Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

25.01.02 #80

Merged
merged 5 commits into from
Jan 2, 2025
Merged

25.01.02 #80

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
425464e
feat: React Helmet으로 메타태그 관리 (#76)
hailey-hy Dec 30, 2024
4e79856
feat: 마이페이지에 함께한 날, 실행한 프롬프트 보여주는 기능 추가 (#75)
hailey-hy Dec 30, 2024
c83d649
[이슈 해결] 포켓런 실행/결과란 높이 이슈, 코드블록 overflow 이슈, 헤더 유저 버튼 hover, selected …
hailey-hy Dec 30, 2024
bfaf98f
style: 모바일 프롬프트 상세 페이지 padding 조정 (#79)
hailey-hy Jan 2, 2025
75d99b7
chore: lnb에 gtm 관련 속성 추가 (#78)
hailey-hy Jan 2, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
83 changes: 37 additions & 46 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,50 +1,41 @@
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/logo.png" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link
rel="stylesheet"
as="style"
crossorigin
href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/static/pretendard.min.css"
/>
<link
rel="stylesheet"
type="text/css"
charset="UTF-8"
href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css"
/>
<link
rel="stylesheet"
type="text/css"
href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css"
/>
<title>
포켓 프롬프트 - ChatGPT 프롬프트 모음 | AI 프롬프트 템플릿 저장소
</title>
<meta
name="”keywords”"
content="ChatGPT 프롬프트, AI 프롬프트 템플릿, 프롬프트 엔지니어링, 프롬프트 모음, AI 활용법, 프롬프트 저장, 프롬프트 공유, ChatGPT 활용, Claude 프롬프트"
/>
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/logo.png" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link
rel="stylesheet"
as="style"
crossorigin
href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/static/pretendard.min.css"
/>
<link
rel="stylesheet"
type="text/css"
charset="UTF-8"
href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css"
/>
<link
rel="stylesheet"
type="text/css"
href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css"
/>
<title>
포켓 프롬프트 - ChatGPT 프롬프트 모음 | AI 프롬프트 템플릿 저장소
</title>
<meta
name="”keywords”"
content="ChatGPT 프롬프트, AI 프롬프트 템플릿, 프롬프트 엔지니어링, 프롬프트 모음, AI 활용법, 프롬프트 저장, 프롬프트 공유, ChatGPT 활용, Claude 프롬프트"
/>

<!-- 기본 메타 정보 -->
<meta property="og:type" content="website" />
<meta property="og:url" content="https://pocket-prompt.com/" />
<meta
property="og:title"
content="포켓 프롬프트 - ChatGPT 프롬프트 모음 | AI 프롬프트 템플릿 저장소"
/>
<meta property="og:image" content="/image.png" />
<meta
property="og:description"
content="ChatGPT, Claude 등 AI 프롬프트 작성이 어려우신가요? 검증된 프롬프트 템플릿을 저장하고 바로 사용하세요!"
/>
<meta property="og:site_name" content="Pocket Prompt" />
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
<!-- 기본 메타 정보 -->
<meta property="og:type" content="website" />
<meta property="og:site_name" content="Pocket Prompt" />
<meta property="og:image" content="/image.png" />
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>
50 changes: 50 additions & 0 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-gtm-module": "^2.0.11",
"react-helmet-async": "^2.0.5",
"react-hook-form": "^7.53.1",
"react-markdown": "^9.0.1",
"react-responsive": "^10.0.0",
Expand Down
27 changes: 18 additions & 9 deletions src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,8 @@ import * as Sentry from "@sentry/react";
import GlobalModal from "@/components/common/Modal/GlobalModal";
import { useEffect } from "react";
import TagManager from "react-gtm-module";
import { HelmetProvider } from "react-helmet-async";
import MetaTags from "./components/common/MetaTags/MetaTags";

function App() {
console.log(`🍀 Environment - ${import.meta.env.MODE}`);
Expand Down Expand Up @@ -40,15 +42,22 @@ function App() {
}, []);

return (
<Styles>
<RecoilRoot>
<QueryClientProvider client={queryClient}>
<RouterProvider router={router} />
<Toast />
<GlobalModal />
</QueryClientProvider>
</RecoilRoot>
</Styles>
<HelmetProvider>
<MetaTags
title="포켓 프롬프트 - ChatGPT 프롬프트 모음 | AI 프롬프트 템플릿 저장소"
description="ChatGPT, Claude 등 AI 프롬프트 작성이 어려우신가요? 검증된 프롬프트 템플릿을 저장하고 바로 사용하세요!"
url="https://pocket-prompt.com/"
/>
<Styles>
<RecoilRoot>
<QueryClientProvider client={queryClient}>
<RouterProvider router={router} />
<Toast />
<GlobalModal />
</QueryClientProvider>
</RecoilRoot>
</Styles>
</HelmetProvider>
);
}

Expand Down
1 change: 1 addition & 0 deletions src/apis/auth/auth.model.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ export interface LoginResponse {
* UserResponse
*/
export interface UserResponse {
days_since_join: number;
email: string;
nickname: string;
picture: string;
Expand Down
36 changes: 27 additions & 9 deletions src/components/Header/User/User.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { useUser } from "@/hooks/useUser";
import { useNavigate } from "react-router-dom";
import { useLocation, useNavigate } from "react-router-dom";
import styled from "styled-components";
import Text from "@/components/common/Text/Text";
import Icon from "@/components/common/Icon";
Expand All @@ -8,29 +8,47 @@ export default function User() {
const { userData } = useUser();
const navigate = useNavigate();

const location = useLocation();
const isSelected = location.pathname.includes("my");

return (
<Wrapper onClick={() => navigate("/my")}>
<UserWrapper>
<Text font="b3_14_reg" color="G_800">
<Wrapper $isSelected={isSelected}>
<UserWrapper onClick={() => navigate("/my")}>
<Text
font="b3_14_reg"
color={isSelected ? "primary_100" : "G_800"}
>
{userData.user?.nickname}
</Text>
<Icon name="User" color="G_800" />
<Icon
name="User"
color={isSelected ? "primary_100" : "G_800"}
/>
</UserWrapper>
</Wrapper>
);
}

const Wrapper = styled.div`
const Wrapper = styled.div<{ $isSelected: boolean }>`
${({ theme }) => theme.mixins.flexBox()};
gap: 10px;

cursor: pointer;

background-color: ${({ $isSelected }) =>
$isSelected ? "#F2F3FD" : "#f1f2f6"};
border-radius: 8px;
border: ${({ $isSelected }) =>
$isSelected && "1.5px solid var(--primary-50, #BBC0F5)"};

:hover {
background-color: ${({ $isSelected }) => !$isSelected && "#dee0e8"};
border-radius: 8px;
}
`;

const UserWrapper = styled.div`
${({ theme }) => theme.mixins.flexBox()};
cursor: pointer;
padding: 8px 8px 8px 12px;
gap: 10px;
background-color: #f1f2f6;
border-radius: 8px;
`;
1 change: 1 addition & 0 deletions src/components/LNB/LNB.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ export interface MenuItemsType {
type?: "divider";
onClick?: () => void;
disabled?: boolean;
"data-tracking-id"?: string;
}

interface LNBtype {
Expand Down
31 changes: 31 additions & 0 deletions src/components/common/MetaTags/MetaTags.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
import React from "react";
import { Helmet } from "react-helmet-async";

interface MetaTagsProps {
title?: string;
description?: string;
url?: string;
}

const MetaTags: React.FC<MetaTagsProps> = ({ title, description, url }) => {
return (
<Helmet>
{url && <meta property="og:url" content={url} />}
{url && <link rel="canonical" href={url} />}
{title && (
<meta
property="og:title"
content="포켓 프롬프트 - ChatGPT 프롬프트 모음 | AI 프롬프트 템플릿 저장소"
/>
)}
{description && (
<meta
property="og:description"
content="ChatGPT, Claude 등 AI 프롬프트 작성이 어려우신가요? 검증된 프롬프트 템플릿을 저장하고 바로 사용하세요!"
/>
)}
</Helmet>
);
};

export default MetaTags;
12 changes: 8 additions & 4 deletions src/components/common/Text/Text.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -101,20 +101,24 @@ const MarkdownWrapper = styled.div`

code {
background: #f5f5f5;
border: 1px solid #e1e1e1;
padding: 0.1em 0.2em;
border-radius: 3px;
font-family: "Courier New", Courier, monospace;
font-family: "Fira Code", "Source Code Pro", "Menlo", "Consolas",
"Courier New", monospace;
font-size: 0.95em;
}

pre {
background: #f5f5f5;
border: 1px solid #e1e1e1;
padding: 0.6em; /* 코드블록 패딩을 줄임 */
padding: 0.6em;
border-radius: 4px;
overflow-x: auto;
max-width: 100%;
overflow-y: auto;
overflow-x: hidden;
margin: 0.3em 0;
word-wrap: break-word;
white-space: pre-wrap;
}
`;

Expand Down
Loading
Loading