Feat#88: 글 작성 중 페이지 나갈 경우 '글 작성 종료하시겠습니까?' Confirm 기능 추가 (#90)

* feat: 뒤로가기 Back 컴포넌트에서 confirm창을 띄울지 말지 결정하는 prop 추가

* feat: 글 작성중일때 확인창 띄우는 기능

src/layouts/Back.tsx

@@ -2,16 +2,34 @@ import styled from '@emotion/styled';
 import { SVGHeaderBack24B, theme } from 'concept-be-design-system';
 import { useNavigate } from 'react-router-dom';
 
+import useConfirm from '../hooks/useConfrim';
 import useRouteMatched from '../hooks/useRouteMatch';
 
-const Back = () => {
+type Props = {
+  confirmBeforeNavigate?: boolean;
+};
+
+const Back = ({ confirmBeforeNavigate = false }: Props) => {
   const { hasMatched } = useRouteMatched();
+  const openConfirm = useConfirm();
   const navigate = useNavigate();
 
   const isMatchedWhiteStyle = hasMatched('/feed/:id', '/profile-edit');
 
+  const handleBackClick = async () => {
+    // confirmBeforeNavigate가 true일 경우, confirm 대화 상자 표시
+    if (confirmBeforeNavigate) {
+      const shouldNavigate = await openConfirm({ content: '작업 내용이 저장되지 않습니다. 작성을 종료하시겠습니까?' });
+
+      // 사용자가 취소를 클릭했다면 뒤로가기를 하지 않음
+      if (shouldNavigate === false) return;
+    }
+
+    navigate(-1);
+  };
+
   return (
-    <Wrapper onClick={() => navigate(-1)} isWhiteStyle={isMatchedWhiteStyle}>
+    <Wrapper onClick={handleBackClick} isWhiteStyle={isMatchedWhiteStyle}>
       <SVGHeaderBack24B />
     </Wrapper>
   );

src/pages/Write/Write.page.tsx

@@ -17,7 +17,7 @@ import {
   Flex,
   useDropdown,
 } from 'concept-be-design-system';
-import { useState } from 'react';
+import { useRef, useState } from 'react';
 
 import Header from './components/Header';
 import RecruitmentPlaceSection from './components/RecruitmentPlaceSection';
@@ -147,12 +147,22 @@ const WritePage = () => {
     setSelectedSkillResponses((prev) => prev.filter((item) => item.id !== id));
   };
 
+  // 글 작성중인지 여부: 뒤로가기 시 경고창 띄우기
+  const isWritingActive =
+    title !== '' ||
+    introduce !== '' ||
+    selectedSkillResponses.length > 0 ||
+    branchIds.length > 0 ||
+    purposeIds.length > 0 ||
+    cooperationWay !== '상관없음' ||
+    !!dropdownValue.recruitmentPlace;
+
   return (
     <>
       <SEOMeta title="컨셉비 | 글 작성" description="자유롭고 안전한 아이디어 공유의 장" />
 
       <MainWrapper>
-        <Header onClickCheckButton={writeIdea} isCheckButtonEnabled={canSubmit} />
+        <Header onClickCheckButton={writeIdea} isCheckButtonEnabled={canSubmit} isWritingActive={isWritingActive} />
 
         <Divider color="l3" />
         <TitleAndIntroduceSection

src/pages/Write/components/Header.tsx

@@ -6,20 +6,22 @@ import Back from '../../../layouts/Back';
 type Props = {
   onClickCheckButton: () => void;
   isCheckButtonEnabled: boolean;
+  isWritingActive: boolean;
 };
 
 /**
  * 글쓰기 페이지 헤더
  * checkButton을 클릭해서 글을 작성한다.
  */
-const Header = ({ onClickCheckButton, isCheckButtonEnabled }: Props) => {
+const Header = ({ onClickCheckButton, isCheckButtonEnabled, isWritingActive }: Props) => {
   const handleClickCheckButton = () => {
     onClickCheckButton();
   };
 
   return (
     <HeaderBox>
-      <Back />
+      <Back confirmBeforeNavigate={isWritingActive} />
+
       <Text font="suit16sb" color="b4">
         글쓰기
       </Text>