From 54629882a6cf7bc8d16b5e61034a16ceb8ff0e98 Mon Sep 17 00:00:00 2001 From: junjeong Date: Wed, 30 Apr 2025 04:20:47 +0900 Subject: [PATCH 1/3] =?UTF-8?q?working:=20HOMe,=20CHAT=20=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=EC=97=90=EC=84=9C=EB=A7=8C=20=ED=85=8C?= =?UTF-8?q?=EC=8A=A4=ED=8A=B8=20=EC=99=84=EB=A3=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 45 +++++++++++++++++++-- package.json | 2 + src/pages/Chat.tsx | 98 ++++++++++++++++++++++++++-------------------- src/pages/Home.tsx | 72 +++++++++++++++++++--------------- 4 files changed, 140 insertions(+), 77 deletions(-) diff --git a/package-lock.json b/package-lock.json index 0e4d4d2..171617a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14,6 +14,7 @@ "react": "^18.3.1", "react-dom": "^18.3.1", "react-ga4": "^2.1.0", + "react-helmet": "^6.1.0", "react-router-dom": "^7.1.5", "tailwindcss": "^4.0.3", "zustand": "^5.0.3" @@ -24,6 +25,7 @@ "@types/node": "^22.13.13", "@types/react": "^18.3.18", "@types/react-dom": "^18.3.5", + "@types/react-helmet": "^6.1.11", "@vitejs/plugin-react": "^4.3.4", "eslint": "^9.19.0", "eslint-config-prettier": "^10.0.1", @@ -1650,6 +1652,16 @@ "@types/react": "^18.0.0" } }, + "node_modules/@types/react-helmet": { + "version": "6.1.11", + "resolved": "https://registry.npmjs.org/@types/react-helmet/-/react-helmet-6.1.11.tgz", + "integrity": "sha512-0QcdGLddTERotCXo3VFlUSWO3ztraw8nZ6e3zJSgG7apwV5xt+pJUS8ewPBqT4NYB1optGLprNQzFleIY84u/g==", + "dev": true, + "license": "MIT", + "dependencies": { + "@types/react": "*" + } + }, "node_modules/@typescript-eslint/eslint-plugin": { "version": "8.27.0", "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.27.0.tgz", @@ -4512,7 +4524,6 @@ "version": "4.1.1", "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==", - "dev": true, "license": "MIT", "engines": { "node": ">=0.10.0" @@ -4909,7 +4920,6 @@ "version": "15.8.1", "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz", "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==", - "dev": true, "license": "MIT", "dependencies": { "loose-envify": "^1.4.0", @@ -4979,17 +4989,37 @@ "react": "^18.3.1" } }, + "node_modules/react-fast-compare": { + "version": "3.2.2", + "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.2.tgz", + "integrity": "sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==", + "license": "MIT" + }, "node_modules/react-ga4": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/react-ga4/-/react-ga4-2.1.0.tgz", "integrity": "sha512-ZKS7PGNFqqMd3PJ6+C2Jtz/o1iU9ggiy8Y8nUeksgVuvNISbmrQtJiZNvC/TjDsqD0QlU5Wkgs7i+w9+OjHhhQ==", "license": "MIT" }, + "node_modules/react-helmet": { + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/react-helmet/-/react-helmet-6.1.0.tgz", + "integrity": "sha512-4uMzEY9nlDlgxr61NL3XbKRy1hEkXmKNXhjbAIOVw5vcFrsdYbH2FEwcNyWvWinl103nXgzYNlns9ca+8kFiWw==", + "license": "MIT", + "dependencies": { + "object-assign": "^4.1.1", + "prop-types": "^15.7.2", + "react-fast-compare": "^3.1.1", + "react-side-effect": "^2.1.0" + }, + "peerDependencies": { + "react": ">=16.3.0" + } + }, "node_modules/react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==", - "dev": true, "license": "MIT" }, "node_modules/react-refresh": { @@ -5042,6 +5072,15 @@ "react-dom": ">=18" } }, + "node_modules/react-side-effect": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/react-side-effect/-/react-side-effect-2.1.2.tgz", + "integrity": "sha512-PVjOcvVOyIILrYoyGEpDN3vmYNLdy1CajSFNt4TDsVQC5KpTijDvWVoR+/7Rz2xT978D8/ZtFceXxzsPwZEDvw==", + "license": "MIT", + "peerDependencies": { + "react": "^16.3.0 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/reflect.getprototypeof": { "version": "1.0.10", "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.10.tgz", diff --git a/package.json b/package.json index e7aa450..cfe8e2e 100644 --- a/package.json +++ b/package.json @@ -17,6 +17,7 @@ "react": "^18.3.1", "react-dom": "^18.3.1", "react-ga4": "^2.1.0", + "react-helmet": "^6.1.0", "react-router-dom": "^7.1.5", "tailwindcss": "^4.0.3", "zustand": "^5.0.3" @@ -27,6 +28,7 @@ "@types/node": "^22.13.13", "@types/react": "^18.3.18", "@types/react-dom": "^18.3.5", + "@types/react-helmet": "^6.1.11", "@vitejs/plugin-react": "^4.3.4", "eslint": "^9.19.0", "eslint-config-prettier": "^10.0.1", diff --git a/src/pages/Chat.tsx b/src/pages/Chat.tsx index 74faf31..ad39c7d 100644 --- a/src/pages/Chat.tsx +++ b/src/pages/Chat.tsx @@ -1,11 +1,12 @@ import { useEffect, useRef, useState, ChangeEvent, KeyboardEvent } from "react"; +import { useLocation } from "react-router-dom"; +import { Helmet } from "react-helmet"; import IntroGuide from "@/components/IntroGuide"; import Header from "@/components/header/Header"; import ChatMessage from "@/components/ChatMessage"; import ChatActionBar from "@/components/ChatActionBar"; import pickMbtiImage from "@/utils/pickMbtiImage"; import instance from "@/api/axios"; -import { useLocation } from "react-router-dom"; import TipsMenuContainer from "@/components/tips/TipsMenuContainer"; import { trackEvent } from "@/libs/analytics"; @@ -109,51 +110,62 @@ const Chat = () => { }; return ( -
-
- -
- - {/* 메시지 리스트 */} - {messages.map((msg, index) => ( -
- {/* 캐릭터 아이콘 */} - {msg.role === "assistant" && ( - MBTI ICON - )} - {/* 채팅 메시지 */} -
- + <> + + + + + + +
+
+ +
+ + {/* 메시지 리스트 */} + {messages.map((msg, index) => ( +
+ {/* 캐릭터 아이콘 */} + {msg.role === "assistant" && ( + MBTI ICON + )} + {/* 채팅 메시지 */} +
+ +
-
- ))} + ))} -
-
+
+
- handleSend(input)} - /> - - {isOpen && } -
+ handleSend(input)} + /> + + {isOpen && } +
+ ); }; diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx index d3499a0..bc2ecc6 100644 --- a/src/pages/Home.tsx +++ b/src/pages/Home.tsx @@ -10,6 +10,7 @@ import ChatStartButton from "@/components/button/ChatStartButton"; import Header from "@/components/header/Header"; import useAuthStore from "@/store/useAuthStore"; import ProfileContainer from "@/components/ProfileContainer"; +import { Helmet } from "react-helmet"; const Home = () => { const navigate = useNavigate(); @@ -34,37 +35,46 @@ const Home = () => { }, [isLoggedIn]); return ( -
-
-
-
- -
-
-
- -
-
- -
-
-
-
- -
-
- {isLoggedIn && virtualFreindList.length > 0 ? ( - - ) : ( - - )} -
-
-
-
+ <> + + Mbtips + + + + + +
+
+
+
+ +
+
+
+ +
+
+ +
+
+
+
+ +
+
+ {isLoggedIn && virtualFreindList.length > 0 ? ( + + ) : ( + + )} +
+
+
+
+ ); }; From 261807373c5ac123d14eafae8a3c05d70ced2e84 Mon Sep 17 00:00:00 2001 From: junjeong Date: Sat, 10 May 2025 10:18:18 +0900 Subject: [PATCH 2/3] =?UTF-8?q?chore:=20twitter=20meta=20=EB=8D=B0?= =?UTF-8?q?=EC=9D=B4=ED=84=B0=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 2 +- src/App.tsx | 3 +- src/pages/Chat.tsx | 1 + src/pages/ChatTips.tsx | 1 + src/pages/Home.tsx | 1 - src/pages/MbtiTestIntro.tsx | 96 +++++++++++++++---------- src/pages/MbtiTestQuestions.tsx | 56 ++++++++++----- src/pages/MbtiTestResult.tsx | 123 ++++++++++++++++++++------------ 8 files changed, 180 insertions(+), 103 deletions(-) diff --git a/index.html b/index.html index 6a448a2..8a78056 100644 --- a/index.html +++ b/index.html @@ -3,7 +3,7 @@ - MBTips + MBTips_MBTI AI 대화 시뮬레이션
diff --git a/src/App.tsx b/src/App.tsx index df391a9..bed4eb2 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -90,7 +90,7 @@ const App = () => { useEffect(() => { initGA(); - if (parsedAuth.accessToken) checkSession(); + if (parsedAuth && parsedAuth.accessToken) checkSession(); }, []); return ( @@ -105,7 +105,6 @@ const App = () => { )} - diff --git a/src/pages/Chat.tsx b/src/pages/Chat.tsx index 154bb1f..e1172b8 100644 --- a/src/pages/Chat.tsx +++ b/src/pages/Chat.tsx @@ -140,6 +140,7 @@ const Chat = () => { +
diff --git a/src/pages/ChatTips.tsx b/src/pages/ChatTips.tsx index 82454db..b18352a 100644 --- a/src/pages/ChatTips.tsx +++ b/src/pages/ChatTips.tsx @@ -23,6 +23,7 @@ const ChatTips = () => { +
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx index 43066b0..72a8ae1 100644 --- a/src/pages/Home.tsx +++ b/src/pages/Home.tsx @@ -37,7 +37,6 @@ const Home = () => { return ( <> - diff --git a/src/pages/MbtiTestIntro.tsx b/src/pages/MbtiTestIntro.tsx index b167903..c4d360d 100644 --- a/src/pages/MbtiTestIntro.tsx +++ b/src/pages/MbtiTestIntro.tsx @@ -3,6 +3,7 @@ import { useNavigate } from "react-router-dom"; import Header from "@/components/header/Header"; import useLayoutSize from "@/hooks/useLayoutSize"; import trackClickEvent from "@/utils/trackClickEvent"; +import { Helmet } from "react-helmet"; const MbtiTestIntro = () => { const [name, setName] = useState(""); @@ -29,45 +30,68 @@ const MbtiTestIntro = () => { }; return ( -
-
-
- intro image + + - - 그 사람의 mbti는 뭘까? - -

- 상대방 MBTI -
- 유추 테스트 -

-
- - + + + + + + +
+
+
+ intro image - - -
-
+ + + + +
+
+ ); }; diff --git a/src/pages/MbtiTestQuestions.tsx b/src/pages/MbtiTestQuestions.tsx index 41256aa..3f84422 100644 --- a/src/pages/MbtiTestQuestions.tsx +++ b/src/pages/MbtiTestQuestions.tsx @@ -1,4 +1,5 @@ import { useEffect } from "react"; +import { Helmet } from "react-helmet"; import { trackPageView } from "@/libs/analytics"; import { TEST_QNA } from "@/constants/TEST_QNA"; import MbtiAnswerButtons from "@/components/button/MbtiAnswerButtons"; @@ -26,25 +27,44 @@ const MbtiTestQuestions = () => { const content: content = TEST_QNA[Number(currentPage) - 1]; return ( -
-
-
- - {content.number}/12 - -

- {content.question} -

- mbti 테스트 과정 이미지 + + + -
- -
-
-
+ + + + + +
+
+
+ + {content.number}/12 + +

+ {content.question} +

+ mbti 테스트 과정 이미지 +
+ +
+
+
+ ); } else return ; }; diff --git a/src/pages/MbtiTestResult.tsx b/src/pages/MbtiTestResult.tsx index f8a00e1..548ad0f 100644 --- a/src/pages/MbtiTestResult.tsx +++ b/src/pages/MbtiTestResult.tsx @@ -1,3 +1,5 @@ +import { useParams } from "react-router-dom"; +import { Helmet } from "react-helmet"; import { MBTI_RESULT_INFO } from "@/constants/MBTI_RESULT_INFO"; import ShareButton from "@/components/button/ShareButton"; import RestartButton from "@/components/button/RestartButton"; @@ -6,7 +8,7 @@ import useLayoutSize from "@/hooks/useLayoutSize"; import Header from "@/components/header/Header"; const MbtiTestResult = () => { - const mbti = localStorage.getItem("mbti-test-mbti") ?? ""; + const { mbti } = useParams(); const result = MBTI_RESULT_INFO[mbti as keyof typeof MBTI_RESULT_INFO]; const size = useLayoutSize(); const imageURL = @@ -19,52 +21,83 @@ const MbtiTestResult = () => { if (!result) return
404 error occured
; return ( -
-
-
- mbti 테스트 결과 이미지 + + -

- {mbti?.toUpperCase()}는 이런 성향이에요! -

-
    -
  • - {result.tag[0]} -
    • -
  • - {result.tag[1]} -
    • -
-
-

좋아하는 대화 주제

-
    -
  • {result.topic[0]}
    • -
  • {result.topic[1]}
    • -
-

좋아하는 대화 태도

-
    -
  • {result.attitude[0]}
    • -
  • {result.attitude[1]}
    • + + + + + + +
    +
    +
    + mbti 테스트 결과 이미지 +

    + {mbti?.toUpperCase()}는 이런 성향이에요! +

    +
      +
    • + {result.tag[0]} +
      • +
    • + {result.tag[1]} +
    -
    -
    - -
    -
    - - -
    -
-
+
+

좋아하는 대화 주제

+
    +
  • {result.topic[0]}
    • +
  • {result.topic[1]}
    • +
+

좋아하는 대화 태도

+
    +
  • {result.attitude[0]}
    • +
  • {result.attitude[1]}
    • +
+
+
+ +
+
+ + +
+ +
+ ); }; From 05840fd5c496fd1dcef840f05f66271c1c63dd99 Mon Sep 17 00:00:00 2001 From: junjeong Date: Sat, 10 May 2025 10:34:09 +0900 Subject: [PATCH 3/3] =?UTF-8?q?chore:=20mbti-test-intro=20=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=20meta=20=EB=8D=B0=EC=9D=B4=ED=84=B0=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/MbtiTestIntro.tsx | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/pages/MbtiTestIntro.tsx b/src/pages/MbtiTestIntro.tsx index c4d360d..9a76258 100644 --- a/src/pages/MbtiTestIntro.tsx +++ b/src/pages/MbtiTestIntro.tsx @@ -32,10 +32,6 @@ const MbtiTestIntro = () => { return ( <> -