From 54629882a6cf7bc8d16b5e61034a16ceb8ff0e98 Mon Sep 17 00:00:00 2001 From: junjeong Date: Wed, 30 Apr 2025 04:20:47 +0900 Subject: [PATCH 1/7] =?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 7d50d0d6d6ec889e235b8fb08f720f2a9a3bab1e Mon Sep 17 00:00:00 2001 From: junjeong Date: Sat, 10 May 2025 09:24:18 +0900 Subject: [PATCH 2/7] =?UTF-8?q?chore:=20Chat=20=ED=8E=98=EC=9D=B4=EC=A7=80?= =?UTF-8?q?=EC=9D=98=20=EA=B3=B5=EC=9C=A0=ED=95=98=EA=B8=B0=20=EB=B2=84?= =?UTF-8?q?=ED=8A=BC=20=EC=82=AC=EB=9D=BC=EC=A7=80=EA=B2=8C=20=ED=95=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.tsx | 2 +- src/pages/Chat.tsx | 2 +- src/store/useMbtiTestState.ts | 216 +++++++++++++++++----------------- 3 files changed, 112 insertions(+), 108 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index fc378bd..a7bd089 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -89,7 +89,7 @@ const App = () => { useEffect(() => { initGA(); - if (parsedAuth.accessToken) checkSession(); + if (parsedAuth && parsedAuth.accessToken) checkSession(); }, []); return ( diff --git a/src/pages/Chat.tsx b/src/pages/Chat.tsx index 8d5bd3c..08d8c68 100644 --- a/src/pages/Chat.tsx +++ b/src/pages/Chat.tsx @@ -136,7 +136,7 @@ const Chat = () => { return (
-
+
diff --git a/src/store/useMbtiTestState.ts b/src/store/useMbtiTestState.ts index ed161bd..cc614fc 100644 --- a/src/store/useMbtiTestState.ts +++ b/src/store/useMbtiTestState.ts @@ -3,22 +3,114 @@ import { create } from "zustand"; type PageNumber = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12; interface MbtiTestState { - currentPage: PageNumber; - currentMbti: string; - mbtiLog: Record; - setNextStep: () => void; - setPreviousStep: () => void; - setMbtiLog: (mbti: string) => void; - getMbtiByLog: () => void; - validatePrevStepisComplete: (order: PageNumber) => boolean; - setPageComplete: (step: PageNumber) => void; - retry: () => void; + currentPage: PageNumber; + currentMbti: string; + mbtiLog: Record; + setNextStep: () => void; + setPreviousStep: () => void; + setMbtiLog: (mbti: string) => void; + getMbtiByLog: () => void; + validatePrevStepisComplete: (order: PageNumber) => boolean; + setPageComplete: (step: PageNumber) => void; + retry: () => void; } const useMbtiTestState = create((set, get) => ({ - currentPage: 1, - currentMbti : "", - mbtiLog: { + currentPage: 1, + currentMbti: "", + mbtiLog: { + E: 0, + I: 0, + N: 0, + S: 0, + F: 0, + T: 0, + J: 0, + P: 0 + }, + setNextStep: () => { + const currentPage = get().currentPage; + const setPageComplete = get().setPageComplete; + + setPageComplete(currentPage); // 현재 페이지를 완료로 설정 + + // 마지막 페이지라면 결과 페이지로 이동 + if (currentPage === 12) { + get().getMbtiByLog(); + if (get().currentMbti !== "") window.location.href = "/mbti-test-result"; + else console.error("mbti가 비어있습니다."); + } else { + // 그렇지 않다면 페이지를 증가시킴 + set((state) => ({ + currentPage: (state.currentPage + 1) as PageNumber + })); + } + }, + setPreviousStep: () => { + const currentPage = get().currentPage; + if (currentPage > 1) { + // 페이지가 1보다 클 때만 감소 + set((state) => ({ + currentPage: (state.currentPage - 1) as PageNumber + })); + } + }, + setMbtiLog: (mbti: string) => { + set((state) => ({ + mbtiLog: { + ...state.mbtiLog, + [mbti]: state.mbtiLog[mbti] + 1 + } + })); + }, + getMbtiByLog: () => { + let mbti = ""; + const mbtiLog = get().mbtiLog; + if (mbtiLog.E > mbtiLog.I) mbti += "E"; + else mbti += "I"; + if (mbtiLog.N > mbtiLog.S) mbti += "N"; + else mbti += "S"; + if (mbtiLog.F > mbtiLog.T) mbti += "F"; + else mbti += "T"; + if (mbtiLog.J > mbtiLog.P) mbti += "J"; + else mbti += "P"; + set(() => ({ + currentMbti: mbti + })); + localStorage.setItem("mbti-test-mbti", mbti); + }, + validatePrevStepisComplete: (order: PageNumber) => { + if (order <= 1) { + return false; + } + return !!get().pageIsCompleted[(order - 1) as PageNumber]; + }, + setPageComplete: (step: PageNumber) => { + set((state) => ({ + pageIsCompleted: { + ...state.pageIsCompleted, + [step]: true + } + })); + }, + retry: () => { + set(() => ({ + currentPage: 1, + pageIsCompleted: { + 1: false, + 2: false, + 3: false, + 4: false, + 5: false, + 6: false, + 7: false, + 8: false, + 9: false, + 10: false, + 11: false, + 12: false + }, + log: { E: 0, I: 0, N: 0, @@ -26,98 +118,10 @@ const useMbtiTestState = create((set, get) => ({ F: 0, T: 0, J: 0, - P: 0, - }, - setNextStep: () => { - const currentPage = get().currentPage; - const setPageComplete = get().setPageComplete; - - setPageComplete(currentPage); // 현재 페이지를 완료로 설정 - - // 마지막 페이지라면 결과 페이지로 이동 - if (currentPage === 12) { - get().getMbtiByLog(); - if (get().currentMbti !== "") window.location.href="/mbti-test-result"; - else console.error("mbti가 비어있습니다."); - } else { - // 그렇지 않다면 페이지를 증가시킴 - set((state) => ({ - currentPage: (state.currentPage + 1) as PageNumber, - })); - } - - }, - setPreviousStep: () => { - const currentPage = get().currentPage; - if (currentPage > 1) { // 페이지가 1보다 클 때만 감소 - set((state) => ({ - currentPage: (state.currentPage - 1) as PageNumber, - })); - } - }, - setMbtiLog : (mbti : string) => { - set((state) => ({ - mbtiLog: { - ...state.mbtiLog, - [mbti]: state.mbtiLog[mbti] + 1, - }, - })); - }, - getMbtiByLog:()=>{ - let mbti =""; - const mbtiLog = get().mbtiLog; - if(mbtiLog.E>mbtiLog.I) mbti += "E"; else mbti += "I"; - if(mbtiLog.N>mbtiLog.S) mbti += "N"; else mbti += "S"; - if(mbtiLog.F>mbtiLog.T) mbti += "F"; else mbti += "T"; - if(mbtiLog.J>mbtiLog.P) mbti += "J"; else mbti += "P"; - set(() => ({ - currentMbti: mbti, - })); - localStorage.setItem("mbti-test-mbti", mbti); - }, - validatePrevStepisComplete: (order: PageNumber) => { - if (order <= 1) { - return false; - } - return !!get().pageIsCompleted[order - 1 as PageNumber]; - }, - setPageComplete: (step: PageNumber) => { - set((state) => ({ - pageIsCompleted: { - ...state.pageIsCompleted, - [step]: true, - }, - })); - }, - retry: ()=> { - set(() => ({ - currentPage: 1, - pageIsCompleted: { - 1: false, - 2: false, - 3: false, - 4: false, - 5: false, - 6: false, - 7: false, - 8: false, - 9: false, - 10: false, - 11: false, - 12: false, - }, - log: { - E: 0, - I: 0, - N: 0, - S: 0, - F: 0, - T: 0, - J: 0, - P: 0, - }, - })); - }, + P: 0 + } + })); + } })); -export default useMbtiTestState; \ No newline at end of file +export default useMbtiTestState; From e3caf095cd78cf4eef94fd314e7b15b1fdcd4e3b Mon Sep 17 00:00:00 2001 From: junjeong Date: Sat, 10 May 2025 09:27:46 +0900 Subject: [PATCH 3/7] =?UTF-8?q?chore:=20MainHdear=20profile.svg=20?= =?UTF-8?q?=EC=9A=B0=EC=B8=A1=EC=A0=95=EB=A0=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/header/MainHeader.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/header/MainHeader.tsx b/src/components/header/MainHeader.tsx index 8e734f0..b5fa4e2 100644 --- a/src/components/header/MainHeader.tsx +++ b/src/components/header/MainHeader.tsx @@ -11,7 +11,7 @@ const MainHeader = ({ isLoggedIn }: { isLoggedIn: boolean }) => { }; return ( -
+
Date: Sat, 10 May 2025 09:43:20 +0900 Subject: [PATCH 4/7] =?UTF-8?q?fix:=20Mbti=20test=20result=20=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=EC=97=90=EC=84=9C=20=EA=B3=B5=EC=9C=A0?= =?UTF-8?q?=ED=95=98=EA=B8=B0=ED=96=88=EC=9D=84=20=EB=95=8C=20url=EC=97=90?= =?UTF-8?q?=20mbti=EA=B0=80=20=EB=93=A4=EC=96=B4=EA=B0=88=20=EC=88=98=20?= =?UTF-8?q?=EC=9E=88=EB=8F=84=EB=A1=9D=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.tsx | 4 +- src/pages/MbtiTestResult.tsx | 3 +- src/store/useMbtiTestState.ts | 233 ++++++++++++++++++---------------- 3 files changed, 131 insertions(+), 109 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index fc378bd..f9bbcaf 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -89,7 +89,7 @@ const App = () => { useEffect(() => { initGA(); - if (parsedAuth.accessToken) checkSession(); + if (parsedAuth && parsedAuth.accessToken) checkSession(); }, []); return ( @@ -118,7 +118,7 @@ const App = () => { } /> } /> } /> - } /> + } /> } /> diff --git a/src/pages/MbtiTestResult.tsx b/src/pages/MbtiTestResult.tsx index f8a00e1..2572145 100644 --- a/src/pages/MbtiTestResult.tsx +++ b/src/pages/MbtiTestResult.tsx @@ -4,9 +4,10 @@ import RestartButton from "@/components/button/RestartButton"; import ChatStartButton from "@/components/button/ChatStartButton"; import useLayoutSize from "@/hooks/useLayoutSize"; import Header from "@/components/header/Header"; +import { useParams } from "react-router-dom"; 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 = diff --git a/src/store/useMbtiTestState.ts b/src/store/useMbtiTestState.ts index ed161bd..04ef13b 100644 --- a/src/store/useMbtiTestState.ts +++ b/src/store/useMbtiTestState.ts @@ -3,22 +3,131 @@ import { create } from "zustand"; type PageNumber = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12; interface MbtiTestState { - currentPage: PageNumber; - currentMbti: string; - mbtiLog: Record; - setNextStep: () => void; - setPreviousStep: () => void; - setMbtiLog: (mbti: string) => void; - getMbtiByLog: () => void; - validatePrevStepisComplete: (order: PageNumber) => boolean; - setPageComplete: (step: PageNumber) => void; - retry: () => void; + currentPage: PageNumber; + currentMbti: string; + pageIsCompleted: Record; + mbtiLog: Record; + setNextStep: () => void; + setPreviousStep: () => void; + setMbtiLog: (mbti: string) => void; + getMbtiByLog: () => void; + validatePrevStepisComplete: (order: PageNumber) => boolean; + setPageComplete: (step: PageNumber) => void; + retry: () => void; } const useMbtiTestState = create((set, get) => ({ - currentPage: 1, - currentMbti : "", - mbtiLog: { + currentPage: 1, + currentMbti: "", + pageIsCompleted: { + 1: false, + 2: false, + 3: false, + 4: false, + 5: false, + 6: false, + 7: false, + 8: false, + 9: false, + 10: false, + 11: false, + 12: false + }, + mbtiLog: { + E: 0, + I: 0, + N: 0, + S: 0, + F: 0, + T: 0, + J: 0, + P: 0 + }, + setNextStep: () => { + const currentPage = get().currentPage; + const currentMbti = get().currentMbti; + const setPageComplete = get().setPageComplete; + + setPageComplete(currentPage); // 현재 페이지를 완료로 설정 + + // 마지막 페이지라면 결과 페이지로 이동 + if (currentPage === 12) { + get().getMbtiByLog(); + if (currentMbti !== "") + window.location.href = `/mbti-test-result/${currentMbti}`; + else console.error("mbti가 비어있습니다."); + } else { + // 그렇지 않다면 페이지를 증가시킴 + set((state) => ({ + currentPage: (state.currentPage + 1) as PageNumber + })); + } + }, + setPreviousStep: () => { + const currentPage = get().currentPage; + if (currentPage > 1) { + // 페이지가 1보다 클 때만 감소 + set((state) => ({ + currentPage: (state.currentPage - 1) as PageNumber + })); + } + }, + setMbtiLog: (mbti: string) => { + set((state) => ({ + mbtiLog: { + ...state.mbtiLog, + [mbti]: state.mbtiLog[mbti] + 1 + } + })); + }, + getMbtiByLog: () => { + let mbti = ""; + const mbtiLog = get().mbtiLog; + if (mbtiLog.E > mbtiLog.I) mbti += "E"; + else mbti += "I"; + if (mbtiLog.N > mbtiLog.S) mbti += "N"; + else mbti += "S"; + if (mbtiLog.F > mbtiLog.T) mbti += "F"; + else mbti += "T"; + if (mbtiLog.J > mbtiLog.P) mbti += "J"; + else mbti += "P"; + set(() => ({ + currentMbti: mbti + })); + localStorage.setItem("mbti-test-mbti", mbti); + }, + validatePrevStepisComplete: (order: PageNumber) => { + if (order <= 1) { + return false; + } + return !!get().pageIsCompleted[(order - 1) as PageNumber]; + }, + setPageComplete: (step: PageNumber) => { + set((state) => ({ + pageIsCompleted: { + ...state.pageIsCompleted, + [step]: true + } + })); + }, + retry: () => { + set(() => ({ + currentPage: 1, + pageIsCompleted: { + 1: false, + 2: false, + 3: false, + 4: false, + 5: false, + 6: false, + 7: false, + 8: false, + 9: false, + 10: false, + 11: false, + 12: false + }, + log: { E: 0, I: 0, N: 0, @@ -26,98 +135,10 @@ const useMbtiTestState = create((set, get) => ({ F: 0, T: 0, J: 0, - P: 0, - }, - setNextStep: () => { - const currentPage = get().currentPage; - const setPageComplete = get().setPageComplete; - - setPageComplete(currentPage); // 현재 페이지를 완료로 설정 - - // 마지막 페이지라면 결과 페이지로 이동 - if (currentPage === 12) { - get().getMbtiByLog(); - if (get().currentMbti !== "") window.location.href="/mbti-test-result"; - else console.error("mbti가 비어있습니다."); - } else { - // 그렇지 않다면 페이지를 증가시킴 - set((state) => ({ - currentPage: (state.currentPage + 1) as PageNumber, - })); - } - - }, - setPreviousStep: () => { - const currentPage = get().currentPage; - if (currentPage > 1) { // 페이지가 1보다 클 때만 감소 - set((state) => ({ - currentPage: (state.currentPage - 1) as PageNumber, - })); - } - }, - setMbtiLog : (mbti : string) => { - set((state) => ({ - mbtiLog: { - ...state.mbtiLog, - [mbti]: state.mbtiLog[mbti] + 1, - }, - })); - }, - getMbtiByLog:()=>{ - let mbti =""; - const mbtiLog = get().mbtiLog; - if(mbtiLog.E>mbtiLog.I) mbti += "E"; else mbti += "I"; - if(mbtiLog.N>mbtiLog.S) mbti += "N"; else mbti += "S"; - if(mbtiLog.F>mbtiLog.T) mbti += "F"; else mbti += "T"; - if(mbtiLog.J>mbtiLog.P) mbti += "J"; else mbti += "P"; - set(() => ({ - currentMbti: mbti, - })); - localStorage.setItem("mbti-test-mbti", mbti); - }, - validatePrevStepisComplete: (order: PageNumber) => { - if (order <= 1) { - return false; - } - return !!get().pageIsCompleted[order - 1 as PageNumber]; - }, - setPageComplete: (step: PageNumber) => { - set((state) => ({ - pageIsCompleted: { - ...state.pageIsCompleted, - [step]: true, - }, - })); - }, - retry: ()=> { - set(() => ({ - currentPage: 1, - pageIsCompleted: { - 1: false, - 2: false, - 3: false, - 4: false, - 5: false, - 6: false, - 7: false, - 8: false, - 9: false, - 10: false, - 11: false, - 12: false, - }, - log: { - E: 0, - I: 0, - N: 0, - S: 0, - F: 0, - T: 0, - J: 0, - P: 0, - }, - })); - }, + P: 0 + } + })); + } })); -export default useMbtiTestState; \ No newline at end of file +export default useMbtiTestState; From 261807373c5ac123d14eafae8a3c05d70ced2e84 Mon Sep 17 00:00:00 2001 From: junjeong Date: Sat, 10 May 2025 10:18:18 +0900 Subject: [PATCH 5/7] =?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 6/7] =?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 ( <> - Date: Sun, 11 May 2025 19:01:42 +0900 Subject: [PATCH 7/7] =?UTF-8?q?fix:=20useParams=20import=EB=AC=B8=20?= =?UTF-8?q?=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/MbtiTestResult.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/pages/MbtiTestResult.tsx b/src/pages/MbtiTestResult.tsx index 9ac2157..548ad0f 100644 --- a/src/pages/MbtiTestResult.tsx +++ b/src/pages/MbtiTestResult.tsx @@ -6,7 +6,6 @@ import RestartButton from "@/components/button/RestartButton"; import ChatStartButton from "@/components/button/ChatStartButton"; import useLayoutSize from "@/hooks/useLayoutSize"; import Header from "@/components/header/Header"; -import { useParams } from "react-router-dom"; const MbtiTestResult = () => { const { mbti } = useParams();