[Refactor] ApplyPage 로직 분리 - 1 (#441)

* chore: 관심사 끼리 분류

* refactor: 페이지 이탈 alert custom hook으로 분리

* refactor: isReview 전역 변수로 빼기

* refactor: apply page loading 제거

* feat: useDialog hook 생성

* refactor: useDialog 적용

* chore: dialog들 Form Provider 바깥으로 빼기

* chore: 오타 제거

* refactor: isReview 전역변수 제거

* feat: useEventListener custom hook 제작

* refactor: useEventListener 적용

src/App.tsx

@@ -3,7 +3,7 @@ import { sessionReplayPlugin } from '@amplitude/plugin-session-replay-browser';
 import { MutationCache, QueryCache, QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import { AxiosError } from 'axios';
-import { lazy, Suspense, useEffect, useRef, useState } from 'react';
+import { lazy, Suspense, useEffect, useState } from 'react';
 import { RouterProvider, createBrowserRouter } from 'react-router-dom';
 
 import Layout from '@components/Layout';
@@ -14,6 +14,7 @@ import { dark, light } from 'styles/theme.css';
 import BigLoading from 'views/loadings/BigLoding';
 
 import 'styles/reset.css';
+import useDialog from '@hooks/useDialog';
 
 const SessionExpiredDialog = lazy(() =>
   import('views/dialogs').then(({ SessionExpiredDialog }) => ({ default: SessionExpiredDialog })),
@@ -55,7 +56,7 @@ const App = () => {
   //   }
   // }, []);
 
-  const sessionRef = useRef<HTMLDialogElement>(null);
+  const { ref: sessionExpiredDialogRef, handleShowDialog: handleShowSessionExpiredDialog } = useDialog();
   const [isAmplitudeInitialized, setIsAmplitudeInitialized] = useState(false);
   const { isLight } = useTheme();
 
@@ -74,7 +75,7 @@ const App = () => {
         const axiosError = error as AxiosError;
 
         if (axiosError.response?.status === 401) {
-          sessionRef.current?.showModal();
+          handleShowSessionExpiredDialog();
         } else if (axiosError.response?.status === 500) {
           window.location.href = '/error';
         }
@@ -85,7 +86,7 @@ const App = () => {
         const axiosError = error as AxiosError;
 
         if (axiosError.response?.status === 401) {
-          sessionRef.current?.showModal();
+          handleShowSessionExpiredDialog();
         } else if (axiosError.response?.status === 500) {
           window.location.href = '/error';
         }
@@ -110,7 +111,7 @@ const App = () => {
 
   return (
     <>
-      <SessionExpiredDialog ref={sessionRef} />
+      <SessionExpiredDialog ref={sessionExpiredDialogRef} />
       <ThemeProvider>
         <DeviceTypeProvider>
           <RecruitingInfoProvider>

src/common/hooks/useDialog.tsx

@@ -0,0 +1,17 @@
+import { useRef } from 'react';
+
+const useDialog = () => {
+  const ref = useRef<HTMLDialogElement>(null);
+
+  const handleShowDialog = () => {
+    ref.current?.showModal();
+  };
+
+  const handleCloseDialog = () => {
+    ref.current?.close();
+  };
+
+  return { ref, handleShowDialog, handleCloseDialog };
+};
+
+export default useDialog;

src/common/hooks/useEventListener.tsx

@@ -0,0 +1,14 @@
+import { useEffect } from 'react';
+
+type EventType = keyof WindowEventMap;
+type EventListener = (event: Event) => void;
+
+const useEventListener = (eventName: EventType, callbackFn: EventListener) => {
+  useEffect(() => {
+    window.addEventListener(eventName, callbackFn);
+
+    return () => window.removeEventListener(eventName, callbackFn);
+  }, [eventName, callbackFn]);
+};
+
+export default useEventListener;

src/views/ApplyPage/components/ApplyCategory/index.tsx

@@ -8,10 +8,10 @@ import { CATEGORY } from './constant';
 import { activeLinkStyleVar, categoryLinkStyleVar, categoryList, container, containerVar } from './style.css';
 
 interface ApplyCategoryProps {
-  isReview: boolean;
+  isReview?: boolean;
   minIndex: number;
 }
-const ApplyCategory = memo(({ isReview, minIndex }: ApplyCategoryProps) => {
+const ApplyCategory = memo(({ minIndex, isReview = false }: ApplyCategoryProps) => {
   const { deviceType } = useDeviceType();
   const { isScrollingDown, isScrollTop } = useScrollPosition(isReview ? 380 : 950);
 

src/views/ApplyPage/components/ApplyHeader/index.tsx

@@ -6,13 +6,13 @@ import { useRecruitingInfo } from 'contexts/RecruitingInfoProvider';
 import { buttonWrapper, headerContainerVar } from './style.css';
 
 interface ApplyHeaderProps {
-  isReview: boolean;
+  isReview?: boolean;
   isLoading?: boolean;
   onSaveDraft?: () => void;
   onSubmitData?: () => void;
 }
 
-const ApplyHeader = ({ isReview, isLoading, onSaveDraft, onSubmitData }: ApplyHeaderProps) => {
+const ApplyHeader = ({ isLoading, onSaveDraft, onSubmitData, isReview = false }: ApplyHeaderProps) => {
   const { deviceType } = useDeviceType();
   const {
     recruitingInfo: { soptName, season, group, isMakers },

src/views/ApplyPage/components/ApplyInfo/index.tsx

@@ -19,7 +19,7 @@ import {
 } from './style.css';
 import { APPLY_INFO } from '../../constant';
 
-const ApplyInfo = memo(({ isReview }: { isReview: boolean }) => {
+const ApplyInfo = memo(({ isReview = false }: { isReview?: boolean }) => {
   const { deviceType } = useDeviceType();
   const {
     recruitingInfo: {

src/views/ApplyPage/components/BottomSection/index.tsx

@@ -9,11 +9,11 @@ import { SELECT_OPTIONS } from 'views/ApplyPage/constant';
 import { doubleLineCheck, labelVar, line, sectionContainer } from './style.css';
 
 interface BottomSectionProps {
-  isReview: boolean;
+  isReview?: boolean;
   knownPath?: string;
 }
 
-const BottomSection = ({ isReview, knownPath }: BottomSectionProps) => {
+const BottomSection = ({ knownPath, isReview = false }: BottomSectionProps) => {
   const { deviceType } = useDeviceType();
   const {
     recruitingInfo: { isMakers },

src/views/ApplyPage/components/CommonSection/index.tsx

@@ -8,13 +8,13 @@ import Info from '../Info';
 import LinkInput from '../LinkInput';
 
 interface CommonSectionProps {
-  isReview: boolean;
+  isReview?: boolean;
   refCallback: (elem: HTMLSelectElement) => void;
   questions?: Questions[];
   commonQuestionsDraft?: Answers[];
 }
 
-const CommonSection = ({ isReview, refCallback, questions, commonQuestionsDraft }: CommonSectionProps) => {
+const CommonSection = ({ refCallback, questions, commonQuestionsDraft, isReview = false }: CommonSectionProps) => {
   const { deviceType } = useDeviceType();
   const commonQuestionsById = commonQuestionsDraft?.reduce(
     (acc, draft) => {

src/views/ApplyPage/components/DefaultSection/index.tsx

@@ -107,12 +107,12 @@ const ProfileImage = ({ disabled, pic, deviceType }: ProfileImageProps) => {
 
 interface DefaultSectionProps {
   isMakers?: boolean;
-  isReview: boolean;
+  isReview?: boolean;
   refCallback?: (elem: HTMLSelectElement) => void;
   applicantDraft?: Applicant;
 }
 
-const DefaultSection = ({ isMakers, isReview, refCallback, applicantDraft }: DefaultSectionProps) => {
+const DefaultSection = ({ isMakers, refCallback, applicantDraft, isReview = false }: DefaultSectionProps) => {
   const { deviceType } = useDeviceType();
   const {
     address,

src/views/ApplyPage/components/PartSection/index.tsx

@@ -11,7 +11,7 @@ import Info from '../Info';
 import LinkInput from '../LinkInput';
 
 interface PartSectionProps {
-  isReview: boolean;
+  isReview?: boolean;
   refCallback: (elem: HTMLSelectElement) => void;
   part?: string;
   questions?: {
@@ -24,12 +24,12 @@ interface PartSectionProps {
 }
 
 const PartSection = ({
-  isReview,
   refCallback,
   part,
   questions,
   partQuestionsDraft,
   questionTypes,
+  isReview = false,
 }: PartSectionProps) => {
   const { deviceType } = useDeviceType();
   const { getValues } = useFormContext();

src/views/ApplyPage/hooks/useBeforeExitPageAlert.tsx

@@ -0,0 +1,13 @@
+import useEventListener from '@hooks/useEventListener';
+
+/** 페이지 이탈 시 alert 띄우기 */
+const useBeforeExitPageAlert = () => {
+  const handleBeforeUnload = (e: BeforeUnloadEvent) => {
+    e.preventDefault();
+    e.returnValue = ''; // Included for legacy support, e.g. Chrome/Edeg < 119;
+  };
+
+  useEventListener('beforeunload', handleBeforeUnload);
+};
+
+export default useBeforeExitPageAlert;