+
+ 
{
};
return (
-
-
-
+
);
};
diff --git a/src/pages/ChatRecommend.tsx b/src/pages/ChatRecommend.tsx
index ef94f41..523a0b4 100644
--- a/src/pages/ChatRecommend.tsx
+++ b/src/pages/ChatRecommend.tsx
@@ -1,4 +1,5 @@
import { useParams } from "react-router-dom";
+import { Helmet } from "react-helmet";
import { Mbti } from "@/types/mbti";
import { chatRecommend } from "@/mock/chatRecommend";
import Header from "@/components/header/Header";
@@ -18,22 +19,30 @@ const ChatRecommend = () => {
} else return
- {/* 캐릭터 아이콘 */}
- {msg.role === "assistant" && (
- 
- )}
- {/* 채팅 메시지 */}
- handleSend(input)}
+ />
- handleSend(input)}
- />
-
- {isOpen &&
+ {isOpen &&
- )}
- {/* 채팅 메시지 */}
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
- ))}
+ ))}
-
-
+ {/* 캐릭터 아이콘 */}
+ {msg.role === "assistant" && (
+
+ )}
+ {/* 채팅 메시지 */}
+
-
+ )}
+ {/* 채팅 메시지 */}
+
+
-
- 
+
+
+
+
+
+
+
+
+
+
+
);
};
diff --git a/src/pages/ChatTemperature.tsx b/src/pages/ChatTemperature.tsx
index 8037eaa..14aa2d3 100644
--- a/src/pages/ChatTemperature.tsx
+++ b/src/pages/ChatTemperature.tsx
@@ -1,5 +1,6 @@
import { useEffect, useState } from "react";
import { useParams } from "react-router-dom";
+import { Helmet } from "react-helmet";
import instance from "@/api/axios";
import Header from "@/components/header/Header";
@@ -31,28 +32,40 @@ const ChatTemperature = () => {
}, []);
return (
-
-
- ![mbti 온도 이미지]({"/image/image_온도.png"})
+
+
+
+
+
+
+
+
+
+
+
);
};
diff --git a/src/pages/ChatTips.tsx b/src/pages/ChatTips.tsx
index 1264cf9..b18352a 100644
--- a/src/pages/ChatTips.tsx
+++ b/src/pages/ChatTips.tsx
@@ -1,4 +1,5 @@
import { useParams } from "react-router-dom";
+import { Helmet } from "react-helmet";
import { Mbti } from "@/types/mbti";
import { tips } from "@/mock/tips";
import Header from "@/components/header/Header";
@@ -18,18 +19,30 @@ const ChatTips = () => {
} else return
+
+
+ - 방금까지 나눈 대화로 온도를 측정했어요! -
- {temperature ? ( - - 현재까지 나눈 대화의 온도는 {temperature}도에요 - - ) : ( - - ...대화의 온도를 불러오는 중 - - )} - -
+ + 방금까지 나눈 대화로 온도를 측정했어요! +
+ {temperature ? ( + + 현재까지 나눈 대화의 온도는 {temperature}도에요 + + ) : ( + + ...대화의 온도를 불러오는 중 + + )} +
-
-
+
+
+
+
+
+
+
+
+
+
+
);
};
diff --git a/src/pages/Content.tsx b/src/pages/Content.tsx
index 416d327..46a6be1 100644
--- a/src/pages/Content.tsx
+++ b/src/pages/Content.tsx
@@ -1,8 +1,9 @@
-import Header from "@/components/header/Header";
+import { Helmet } from "react-helmet";
+import { useNavigate, useParams } from "react-router-dom";
import { CONTENT_DATA } from "@/constants/CONTENT";
import { trackEvent } from "@/libs/analytics";
import React from "react";
-import { useNavigate, useParams } from "react-router-dom";
+import Header from "@/components/header/Header";
const Content = () => {
const navigate = useNavigate();
@@ -33,44 +34,79 @@ const Content = () => {
};
return (
-
+
+ {title}
- {description} - -{title}
+ {description} +
-
+
+
+
+
-
+
+
+
+
+
- 
-
- MBTI 성향 기반
-
-
+ <>
+
+
+
+
+
+
+
+
+
+ MBTI 성향 기반
+
+
+
);
};
diff --git a/src/pages/MbtiTestIntro.tsx b/src/pages/MbtiTestIntro.tsx
index b167903..9a76258 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,64 @@ const MbtiTestIntro = () => {
};
return (
-
-
+
);
};
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 (
-
- {/* 상단 배너 */}
-
+
);
};
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
index d3499a0..72a8ae1 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,44 @@ const Home = () => {
}, [isLoggedIn]);
return (
-
-
- 
-
-
+ 
-
+
- - {content.subTitle} -
- )} +
+ {/* 상단 배너 */}
+
+
+
+
- {/* 본문 내용 */}
-
+
- {content.content && renderContentWithLineBreaks(content.content)}
-
+ {/* 서브 제목 */}
+ {content.subTitle && (
+ + {content.subTitle} +
+ )} - {/* 하단 버튼 */} - + {/* 본문 내용 */} +
+ {content.content && renderContentWithLineBreaks(content.content)}
+
+
+ {/* 하단 버튼 */}
+
+
-
-
-
-
-
-
-
-
-
+ <>
+
-
-
-
-
-
-
- {isLoggedIn && virtualFreindList.length > 0 ? (
-
-
+
+
+
+
+
+
+
+
+
+
);
};
diff --git a/src/pages/Login.tsx b/src/pages/Login.tsx
index 619fbed..96a28cc 100644
--- a/src/pages/Login.tsx
+++ b/src/pages/Login.tsx
@@ -1,4 +1,5 @@
import { useState } from "react";
+import { Helmet } from "react-helmet";
import KakaoLoginButton from "@/components/button/KakaoLoginButton";
import TermsAndPrivacy from "@/components/TermsAndPrivacy";
import TermsAndPrivacyModal from "@/components/modal/TermsAndPrivacyModal";
@@ -26,36 +27,44 @@ const Login = () => {
const isTerms = isModalOpen.mode === "terms";
return (
-
+
+
+
+
+
+
+ {isLoggedIn && virtualFreindList.length > 0 ? (
+
+
- MBTI 성향 기반
-
- AI 채팅 시뮬레이션으로
-
- 대화 연습과 꿀팁 얻어가세요
-
-
- 대화 연습부터, 피드백까지 드려요
-
-
-
-
-
- {isOpen ? (
- isTerms ? (
-
+ MBTI 성향 기반
+
+ AI 채팅 시뮬레이션으로
+
+ 대화 연습과 꿀팁 얻어가세요
+
+
+ 대화 연습부터, 피드백까지 드려요
+
+
+
+
+
+ {isOpen ? (
+ isTerms ? (
+
- 
+
+
+
-
- 그 사람의 mbti는 뭘까?
-
-
- 상대방 MBTI
-
-
+
+
+
+
+
+
+
+
+
+
- 상대방 MBTI
-
- 유추 테스트
-
-
+
-
-
-
-
-
-
-
-
-
- {content.number}/12
-
- 
+
+
+
-
-
+
+
+
+
+
+ - {content.question} -
-
+
-
-
+
+
+ {content.number}/12
+
+
+
+
+
);
} else return + {content.question} +
+
+
+
+ 404 error occured
;
return (
-
-
- 
+
+
-
+
+
);
};
diff --git a/src/pages/SelectInfo.tsx b/src/pages/SelectInfo.tsx
index 9b32639..c7b7db1 100644
--- a/src/pages/SelectInfo.tsx
+++ b/src/pages/SelectInfo.tsx
@@ -1,11 +1,12 @@
import { ChangeEvent, useEffect, useState } from "react";
import { useLocation, useNavigate } from "react-router-dom";
-import FormButton from "@/components/button/FormButton";
-import Header from "@/components/header/Header";
+import { Helmet } from "react-helmet";
import { getMBTIgroup, mapAgeToNumber } from "@/utils/helpers";
import { authInstance } from "@/api/axios";
-import ToastMessage from "@/components/ToastMessage";
import { trackEvent } from "@/libs/analytics";
+import FormButton from "@/components/button/FormButton";
+import Header from "@/components/header/Header";
+import ToastMessage from "@/components/ToastMessage";
type FastFriendResponse = {
header: {
@@ -227,154 +228,177 @@ const SelectInfo = () => {
};
return (
- - {mbti?.toUpperCase()}는 이런 성향이에요! -
--
-
- - {result.tag[0]} - -
- - {result.tag[1]} - -
-
+ 좋아하는 대화 주제
--
-
- {result.topic[0]} -
- {result.topic[1]} -
좋아하는 대화 태도
--
-
- {result.attitude[0]} -
- {result.attitude[1]} + + + + + + +
- + {result.tag[0]} + +
- + {result.tag[1]} +
+
+
+
- + {mbti?.toUpperCase()}는 이런 성향이에요! +
+-
+
-
-
-
-
-
+
+ 좋아하는 대화 주제
+-
+
- {result.topic[0]} +
- {result.topic[1]} +
좋아하는 대화 태도
+-
+
- {result.attitude[0]} +
- {result.attitude[1]} +
+
+
+
+
-
+
+
+
+
-
-
-
- {/* MBTI 선택 */}
-
+ <>
+
-
- - {selectInfoTitle} -
- -
- {mbtiOptions.map((option) => (
- handleMBTISelect(option)}
- >
- {option}
-
- ))}
-
-
-
-
- 정보 추가 입력 -
- - {/* 이름 입력 */} -
-
-
-
+
+
-
- 나이 +
+ {/* MBTI 선택 */}
+
+
+
+
- {/* 성별 선택 */}
- + {selectInfoTitle}
-
- {ageOptions.map((option) => (
+
+
+
+ {mbtiOptions.map((option) => (
handleButtonClick(option, setAge, age)}
+ size="md"
+ selected={isMBTISelected(option)}
+ onClick={() => handleMBTISelect(option)}
>
{option}
))}
- ;
- 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;
- 성별 +
+
+
);
};
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
+
- + 정보 추가 입력
-
- {genderOptions.map((option) => (
- handleButtonClick(option, setGender, gender)}
- >
- {option}
-
- ))}
+
+ {/* 이름 입력 */}
+
- {/* 관계 선택 */}
-
+
+
-
- setToastMessage(null)}
- />
- )}
-
- {/* 대화 시작 버튼 */}
-
+ {toastMessage && (
+ setToastMessage(null)}
+ />
+ )}
+
+ {/* 대화 시작 버튼 */}
+
+
- 상대방과 나의 관계 -
-
- {relationshipOptions.map((option) => (
-
- handleButtonClick(option, setRelationship, relationship)
- }
- >
- {option}
-
- ))}
+ {/* 나이 선택 */}
+
- {/* 관심사 선택 */}
-
+
- + 나이 +
+
+ {ageOptions.map((option) => (
+ handleButtonClick(option, setAge, age)}
+ >
+ {option}
+
+ ))}
+
-
- {toastMessage && (
- - 관심사 -
-
- {interestOptions.map((option) => (
- handleInterestSelect(option)}
- >
- {option}
-
- ))}
+ {/* 성별 선택 */}
+
-
+
+
+ {/* 관계 선택 */}
+ + 성별 +
+
+ {genderOptions.map((option) => (
+ handleButtonClick(option, setGender, gender)}
+ >
+ {option}
+
+ ))}
+
+
+
+
+ {/* 관심사 선택 */}
+ + 상대방과 나의 관계 +
+
+ {relationshipOptions.map((option) => (
+
+ handleButtonClick(option, setRelationship, relationship)
+ }
+ >
+ {option}
+
+ ))}
+
+
+
+ 관심사 +
+
+ {interestOptions.map((option) => (
+ handleInterestSelect(option)}
+ >
+ {option}
+
+ ))}
+