From 88ea176cb47e5ee53b970dcfef82173abada3a99 Mon Sep 17 00:00:00 2001
From: Youngjin Park <youngjin988@gmail.com>
Date: Sat, 13 Apr 2024 21:08:26 +0900
Subject: [PATCH] =?UTF-8?q?Feat#88:=20=EA=B8=80=20=EC=9E=91=EC=84=B1=20?=
 =?UTF-8?q?=EC=A4=91=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EB=82=98=EA=B0=88=20?=
 =?UTF-8?q?=EA=B2=BD=EC=9A=B0=20'=EA=B8=80=20=EC=9E=91=EC=84=B1=20?=
 =?UTF-8?q?=EC=A2=85=EB=A3=8C=ED=95=98=EC=8B=9C=EA=B2=A0=EC=8A=B5=EB=8B=88?=
 =?UTF-8?q?=EA=B9=8C=3F'=20Confirm=20=EA=B8=B0=EB=8A=A5=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80=20(#90)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

* feat: 글 작성중일때 확인창 띄우는 기능
---
 src/layouts/Back.tsx                  | 22 ++++++++++++++++++++--
 src/pages/Write/Write.page.tsx        | 14 ++++++++++++--
 src/pages/Write/components/Header.tsx |  6 ++++--
 3 files changed, 36 insertions(+), 6 deletions(-)

diff --git a/src/layouts/Back.tsx b/src/layouts/Back.tsx
index ae8124e2..0bdff0ba 100644
--- a/src/layouts/Back.tsx
+++ b/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>
   );
diff --git a/src/pages/Write/Write.page.tsx b/src/pages/Write/Write.page.tsx
index 52c816be..79539040 100644
--- a/src/pages/Write/Write.page.tsx
+++ b/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
diff --git a/src/pages/Write/components/Header.tsx b/src/pages/Write/components/Header.tsx
index 72c0c814..471cd1c2 100644
--- a/src/pages/Write/components/Header.tsx
+++ b/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>