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 ( - navigate(-1)} isWhiteStyle={isMatchedWhiteStyle}> + ); 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 ( <> -
+
void; isCheckButtonEnabled: boolean; + isWritingActive: boolean; }; /** * 글쓰기 페이지 헤더 * checkButton을 클릭해서 글을 작성한다. */ -const Header = ({ onClickCheckButton, isCheckButtonEnabled }: Props) => { +const Header = ({ onClickCheckButton, isCheckButtonEnabled, isWritingActive }: Props) => { const handleClickCheckButton = () => { onClickCheckButton(); }; return ( - + + 글쓰기