+
+
-
-
+
);
};
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}
))}
-
- 성별 +
+
+
);
};
+
- + 정보 추가 입력
-
- {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}
+
+ ))}
+