diff --git a/src/components/header/Header.tsx b/src/components/header/Header.tsx index a194b14..dca3fff 100644 --- a/src/components/header/Header.tsx +++ b/src/components/header/Header.tsx @@ -18,7 +18,15 @@ const Header = ({ const { isLoggedIn } = useAuthStore(); const isHomepage = pathname === "/"; - return isHomepage ? : ; + return isHomepage ? ( + + ) : ( + + ); }; -export default Header; \ No newline at end of file +export default Header; diff --git a/src/components/header/SubHeader.tsx b/src/components/header/SubHeader.tsx index 64dea5f..57bf5e6 100644 --- a/src/components/header/SubHeader.tsx +++ b/src/components/header/SubHeader.tsx @@ -1,6 +1,7 @@ -import { useLocation, useNavigate } from "react-router-dom" +import { useLocation, useNavigate } from "react-router-dom"; +import { useState } from "react"; import useMbtiTestState from "@/store/useMbtiTestState"; - +import ActionConfirmModal from "@/components/modal/ActionConfirmModal"; type SubHeaderProps = { title: string; @@ -11,52 +12,83 @@ type SubHeaderProps = { const SubHeader = ({ title = "", showPreviousIcon = true, - showShareIcon = false, + showShareIcon = false }: SubHeaderProps) => { - const navigate = useNavigate(); - const {pathname} = useLocation(); + const { pathname, state } = useLocation(); const { currentPage, setPreviousStep } = useMbtiTestState(); + const [isLeaveChatModalOpen, setIsLeaveChatModalOpen] = useState(false); + const isProgressPage = pathname === "/mbti-test-progress"; const isChatPage = pathname === "/chat"; const isFirstQuestionPage = currentPage === 1; - + const mode = state?.mode; + const handleGoBack = () => { - if(isProgressPage && !isFirstQuestionPage) setPreviousStep(); - else if(isChatPage) { - // 채팅 취소 모달 오픈 로직 추가 부탁드려요 헤헤 -> 4.9 정준영 + if (isProgressPage && !isFirstQuestionPage) { + setPreviousStep(); + return; + } + + if (isChatPage) { + return mode === "fastFriend" + ? setIsLeaveChatModalOpen(true) + : navigate("/"); + } + + if (isFirstQuestionPage) { + navigate(-1); } - else if(isFirstQuestionPage) navigate(-1); }; - + + const handleCancel = () => setIsLeaveChatModalOpen(false); + + const handleConfirm = () => { + setIsLeaveChatModalOpen(false); + navigate("/"); + }; + return ( -
- {showPreviousIcon && ( - Go To Back - )} - -

- {title} -

- - {showShareIcon && ( - Share - )} -
- ); - } - - export default SubHeader; \ No newline at end of file + <> +
+ {showPreviousIcon && ( + Go To Back + )} + +

+ {title} +

+ + {showShareIcon && ( + Share + )} +
+ + {isLeaveChatModalOpen && ( + + )} + + ); +}; + +export default SubHeader;