feat: 채팅 나가기 팝업 추가

Author: Soohyuniii

src/components/header/Header.tsx

@@ -18,7 +18,15 @@ const Header = ({
   const { isLoggedIn } = useAuthStore();
   const isHomepage = pathname === "/";
 
-  return isHomepage ? <MainHeader isLoggedIn={isLoggedIn}/> : <SubHeader title={title} showPreviousIcon={showPreviousIcon} showShareIcon={showShareIcon} />;
+  return isHomepage ? (
+    <MainHeader isLoggedIn={isLoggedIn} />
+  ) : (
+    <SubHeader
+      title={title}
+      showPreviousIcon={showPreviousIcon}
+      showShareIcon={showShareIcon}
+    />
+  );
 };
 
-export default Header;
+export default Header;

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 (
-    <header className="relative flex h-[56px] w-full flex-row items-center justify-center border-b border-gray-100 bg-white">
-    {showPreviousIcon && (
-      <img
-      src="/public/icon/arrow_left.svg"
-      alt="Go To Back"
-      className="absolute left-[18.77px] cursor-pointer"
-      width={9.87}
-      height={16}
-      onClick={handleGoBack}
-      />
-    )}
-
-    <h1 className="absolute left-1/2 -translate-x-1/2 transform text-[18px] font-bold text-gray-900">
-      {title}
-    </h1>
-
-    {showShareIcon && (
-      <img
-      src="/public/icon/share.svg"
-      alt="Share"
-      className="absolute right-[20px] cursor-pointer"
-      width={16}
-      height={16}
-      />
-    )}
-  </header>
-    );
-  }
-  
-  export default SubHeader;
+    <>
+      <header className="relative flex h-[56px] w-full flex-row items-center justify-center border-b border-gray-100 bg-white">
+        {showPreviousIcon && (
+          <img
+            src="/public/icon/arrow_left.svg"
+            alt="Go To Back"
+            className="absolute left-[18.77px] cursor-pointer"
+            width={9.87}
+            height={16}
+            onClick={handleGoBack}
+          />
+        )}
+
+        <h1 className="absolute left-1/2 -translate-x-1/2 transform text-[18px] font-bold text-gray-900">
+          {title}
+        </h1>
+
+        {showShareIcon && (
+          <img
+            src="/public/icon/share.svg"
+            alt="Share"
+            className="absolute right-[20px] cursor-pointer"
+            width={16}
+            height={16}
+          />
+        )}
+      </header>
+
+      {isLeaveChatModalOpen && (
+        <ActionConfirmModal
+          title="채팅방 나가기"
+          message={["대화가 저장 되지않아요", "정말 나갈까요?"]}
+          cancelText="취소"
+          confirmText="확인"
+          onCancel={handleCancel}
+          onConfirm={handleConfirm}
+        />
+      )}
+    </>
+  );
+};
+
+export default SubHeader;