Merge pull request #80 from ai-surfers/develop

25.01.02
ai-surfers · Jan 2, 2025 · 5b1ad70 · 5b1ad70
2 parents 5c46716 + 75d99b7
commit 5b1ad70
Show file tree

Hide file tree

Showing 15 changed files with 3,446 additions and 3,055 deletions.
diff --git a/index.html b/index.html
@@ -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>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -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",

diff --git a/src/App.tsx b/src/App.tsx
@@ -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}`);
@@ -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>
     );
 }
 

diff --git a/src/apis/auth/auth.model.ts b/src/apis/auth/auth.model.ts
@@ -10,6 +10,7 @@ export interface LoginResponse {
  * UserResponse
  */
 export interface UserResponse {
+    days_since_join: number;
     email: string;
     nickname: string;
     picture: string;

diff --git a/src/components/Header/User/User.tsx b/src/components/Header/User/User.tsx
@@ -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";
@@ -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;
 `;
diff --git a/src/components/LNB/LNB.tsx b/src/components/LNB/LNB.tsx
@@ -14,6 +14,7 @@ export interface MenuItemsType {
     type?: "divider";
     onClick?: () => void;
     disabled?: boolean;
+    "data-tracking-id"?: string;
 }
 
 interface LNBtype {

diff --git a/src/components/common/MetaTags/MetaTags.tsx b/src/components/common/MetaTags/MetaTags.tsx
@@ -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;
diff --git a/src/components/common/Text/Text.tsx b/src/components/common/Text/Text.tsx
@@ -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;
     }
 `;