원서 상태에 따라 formStep 핸들링

apps/user/src/app/form/page.tsx

@@ -1,10 +1,8 @@
 'use client';
 
 import { FormWrapper } from '@/components/common';
-import { useFormStatusQuery } from '@/services/form/queries';
 import { useFormStepValueStore, useSetFormStepStore } from '@/store';
 import { SwitchCase } from '@toss/react';
-import { useEffect } from 'react';
 import 보호자정보 from './보호자정보/보호자정보';
 import 성적입력 from './성적입력/성적입력';
 import 자기소개서 from './자기소개서/자기소개서';
@@ -19,17 +17,6 @@ import 출신학교및학력 from './출신학교및학력/출신학교및학력
 const FormPage = () => {
     const formStep = useFormStepValueStore();
     const setFormStep = useSetFormStepStore();
-    const { data: formStatusData } = useFormStatusQuery();
-
-    useEffect(() => {
-        if (formStatusData) {
-            if (formStatusData.status === 'SUBMITTED') {
-                setFormStep('초안제출완료');
-            } else if (formStatusData.status === 'FINAL_SUBMITTED') {
-                setFormStep('최종제출완료');
-            }
-        }
-    }, [formStatusData]);
 
     return (
         <FormWrapper>

apps/user/src/app/form/초안작성완료/초안작성완료.hooks.ts

@@ -72,18 +72,17 @@ export const useCheckFilledForm = () => {
     const form = useFormValueStore();
     const [isFilledForm, setIsFilledForm] = useState(false);
 
-    const [applicantFieldCount, setApplicantFieldCount] = useState(0);
-    const [parentFieldCount, setParentFieldCount] = useState(0);
-    const [educationFieldCount, setEducationFieldCount] = useState(0);
-    const [typeFieldCount, setTypeFieldCount] = useState(0);
-    const [documentFieldCount, setDocumentFieldCount] = useState(0);
+    const [applicantFilledCount, setApplicantFilledCount] = useState(0);
+    const [parentFilledCount, setParentFilledCount] = useState(0);
+    const [educationFilledCount, setEducationFilledCount] = useState(0);
+    const [typeFilledCount, setTypeFilledCount] = useState(0);
+    const [documentFilledCount, setDocumentFilledCount] = useState(0);
 
     useEffect(() => {
         const filledApplicantFieldsCount = useFilledApplicantFieldsCount(form.applicant);
-
         const filledParentFieldsCount = useFilledParentFieldsCount(form.parent);
         const filledEducationFieldsCount = useFilledEducationFieldsCount(form.education);
-        const filledTypeFieldsCount = form.type ? 1 : 0;
+        const filledTypeFieldCount = form.type ? 1 : 0;
         const filledDocumentFieldsCount = Object.values(form.document).filter(
             (value) => !!value,
         ).length;
@@ -92,25 +91,25 @@ export const useCheckFilledForm = () => {
             filledApplicantFieldsCount === 5 &&
             filledParentFieldsCount === 6 &&
             filledEducationFieldsCount === 8 &&
-            filledTypeFieldsCount === 1 &&
+            filledTypeFieldCount === 1 &&
             filledDocumentFieldsCount === 2
         ) {
             setIsFilledForm(true);
         }
 
-        setApplicantFieldCount(filledApplicantFieldsCount);
-        setParentFieldCount(filledParentFieldsCount);
-        setEducationFieldCount(filledEducationFieldsCount);
-        setTypeFieldCount(filledTypeFieldsCount);
-        setDocumentFieldCount(filledDocumentFieldsCount);
+        setApplicantFilledCount(filledApplicantFieldsCount);
+        setParentFilledCount(filledParentFieldsCount);
+        setEducationFilledCount(filledEducationFieldsCount);
+        setTypeFilledCount(filledTypeFieldCount);
+        setDocumentFilledCount(filledDocumentFieldsCount);
     }, []);
 
     return {
-        applicantFieldCount,
-        parentFieldCount,
-        educationFieldCount,
-        typeFieldCount,
-        documentFieldCount,
+        applicantFilledCount,
+        parentFilledCount,
+        educationFilledCount,
+        typeFilledCount,
+        documentFilledCount,
         isFilledForm,
     };
 };

apps/user/src/app/form/초안작성완료/초안작성완료.tsx

@@ -1,8 +1,7 @@
 'use client';
 
-import { CheckFormComplete, CompleteAlaram, DraftFormConfirm } from '@/components/form';
+import { CheckFormCompleteBox, CompleteAlaram, DraftFormConfirm } from '@/components/form';
 import { AppLayout } from '@/layouts';
-import { useSetFormStepStore } from '@/store';
 import { IconCancelCircle, IconCheckCircle } from '@maru/icon';
 import { color } from '@maru/theme';
 import { Button, Column, Row, Text } from '@maru/ui';
@@ -13,15 +12,14 @@ import { useCheckFilledForm, useCTAButton, useSubmitDraftFormAction } from './
 
 const 초안작성완료 = () => {
     const overlay = useOverlay();
-    const setFormStep = useSetFormStepStore();
     const { handleAgainCheckFormButtonClick } = useCTAButton();
     const {
-        applicantFieldCount,
-        parentFieldCount,
-        educationFieldCount,
-        typeFieldCount,
-        documentFieldCount,
-        isFilledForm,
+        applicantFilledCount,
+        parentFilledCount,
+        educationFilledCount,
+        typeFilledCount,
+        documentFilledCount,
+        isFilledForm: isComplete,
     } = useCheckFilledForm();
     const { handleSubmitDraftFormButtonClick } = useSubmitDraftFormAction();
 
@@ -42,24 +40,24 @@ const 초안작성완료 = () => {
         <AppLayout header>
             <CompleteAlarmBox>
                 <CompleteAlaram
-                    isComplete={isFilledForm}
+                    isComplete={isComplete}
                     completeText="원서 초안 작성 완료"
-                    inCompleteText="아직 작성하지 않은 곳이 있어요"
+                    incompleteText="아직 작성하지 않은 곳이 있어요"
                 />
             </CompleteAlarmBox>
-            <Styled초안작성완료 isFilledForm={isFilledForm}>
+            <Styled초안작성완료 isComplete={isComplete}>
                 <Row gap={8} alignItems="center">
-                    {isFilledForm ? (
+                    {isComplete ? (
                         <IconCheckCircle width={64} height={64} />
                     ) : (
                         <IconCancelCircle width={64} height={64} />
                     )}
                     <Text fontType="H1" color={color.gray900}>
-                        {isFilledForm ? '원서 초안 작성 완료' : '아직 작성하지 않은 곳이 있어요'}
+                        {isComplete ? '원서 초안 작성 완료' : '아직 작성하지 않은 곳이 있어요'}
                     </Text>
                 </Row>
                 <Column gap={12}>
-                    {isFilledForm ? (
+                    {isComplete ? (
                         <Text fontType="p1" color={color.gray900}>
                             원서 접수에 필요한 초안을 모두 작성하셨습니다.
                         </Text>
@@ -68,7 +66,7 @@ const 초안작성완료 = () => {
                             원서 작성 중 입력하지 않은 곳이 있습니다.
                         </Text>
                     )}
-                    {isFilledForm ? (
+                    {isComplete ? (
                         <Text fontType="H4" color={color.red}>
                             원서 초안 제출 시 부산소프트웨어마이스터고등학교 입학전형에 응시한
                             것으로 처리되며
@@ -79,7 +77,7 @@ const 초안작성완료 = () => {
                             원서 작성 중 입력하지 않은 곳이 있다면 초안을 제출할 수 없습니다.
                         </Text>
                     )}
-                    {isFilledForm ? (
+                    {isComplete ? (
                         <Text fontType="p1" color={color.gray900}>
                             잘못 입력한 곳이 없는지 면밀히 검토해주시기 바랍니다.
                         </Text>
@@ -89,46 +87,14 @@ const 초안작성완료 = () => {
                         </Text>
                     )}
                 </Column>
-                <CheckFormCompleteBox>
-                    <CheckFormComplete
-                        onClick={() => setFormStep('지원자정보')}
-                        formStep="지원자 정보"
-                        maxCompleteOfNumber={5}
-                        completeOfNumber={applicantFieldCount}
-                    />
-                    <CheckFormComplete
-                        onClick={() => setFormStep('보호자정보')}
-                        formStep="보호자 정보"
-                        maxCompleteOfNumber={6}
-                        completeOfNumber={parentFieldCount}
-                    />
-                    <CheckFormComplete
-                        onClick={() => setFormStep('출신학교및학력')}
-                        formStep="출신학교 및 학력"
-                        maxCompleteOfNumber={8}
-                        completeOfNumber={educationFieldCount}
-                    />
-                    <CheckFormComplete
-                        onClick={() => setFormStep('전형선택')}
-                        formStep="전형 선택"
-                        maxCompleteOfNumber={1}
-                        completeOfNumber={typeFieldCount}
-                    />
-                    <CheckFormComplete
-                        onClick={() => setFormStep('성적입력')}
-                        formStep="성적 입력"
-                        maxCompleteOfNumber={4}
-                        completeOfNumber={4}
-                    />
-                    <CheckFormComplete
-                        onClick={() => setFormStep('자기소개서')}
-                        formStep="자기소개서 및 학업계획서"
-                        maxCompleteOfNumber={2}
-                        completeOfNumber={documentFieldCount}
-                    />
-                </CheckFormCompleteBox>
-
-                {isFilledForm && (
+                <CheckFormCompleteBox
+                    applicantFilledCount={applicantFilledCount}
+                    parentFilledCount={parentFilledCount}
+                    educationFilledCount={educationFilledCount}
+                    typeFilledCount={typeFilledCount}
+                    documentFilledCount={documentFilledCount}
+                />
+                {isComplete && (
                     <Column gap={24}>
                         <Text fontType="H3" color={color.gray900}>
                             제출하시겠습니까?
@@ -153,9 +119,9 @@ const 초안작성완료 = () => {
 
 export default 초안작성완료;
 
-const Styled초안작성완료 = styled.div<{ isFilledForm: boolean }>`
+const Styled초안작성완료 = styled.div<{ isComplete: boolean }>`
     ${flex({ flexDirection: 'column' })}
-    gap: ${(props) => (props.isFilledForm ? '48px' : '62px')};
+    gap: ${(props) => (props.isComplete ? '48px' : '62px')};
     max-width: 800px;
     height: 100%;
     margin: 62px auto 240px;
@@ -174,14 +140,6 @@ const Styled초안작성완료 = styled.div<{ isFilledForm: boolean }>`
     }
 `;
 
-const CheckFormCompleteBox = styled.div`
-    display: flex;
-    flex-wrap: wrap;
-    gap: 16px;
-    width: 100%;
-    height: 248px;
-`;
-
 const CompleteAlarmBox = styled.div`
     position: absolute;
     width: 100%;

apps/user/src/app/result/final/page.tsx

@@ -11,7 +11,7 @@ import { useState } from 'react';
 import styled from 'styled-components';
 
 const FinalResultPage = () => {
-    const [ResultStep, setResultStep] = useState<ResultStep>('MAIN');
+    const [finalResultStep, setFinalResultStep] = useState<ResultStep>('MAIN');
 
     return (
         <AppLayout header footer>
@@ -25,9 +25,9 @@ const FinalResultPage = () => {
                     </Text>
                 </Column>
                 <SwitchCase
-                    value={ResultStep}
+                    value={finalResultStep}
                     caseBy={{
-                        MAIN: <ResultMain option="FINAL" setResultStep={setResultStep} />,
+                        MAIN: <ResultMain option="FINAL" setResultStep={setFinalResultStep} />,
                         RESULT: <FinalResultTable />,
                     }}
                 />

apps/user/src/app/result/first/page.tsx

@@ -11,7 +11,7 @@ import { useState } from 'react';
 import styled from 'styled-components';
 
 const FirstResultPage = () => {
-    const [ResultStep, setResultStep] = useState<ResultStep>('MAIN');
+    const [firstResultStep, setFirstResultStep] = useState<ResultStep>('MAIN');
 
     return (
         <AppLayout header footer>
@@ -25,9 +25,9 @@ const FirstResultPage = () => {
                     </Text>
                 </Column>
                 <SwitchCase
-                    value={ResultStep}
+                    value={firstResultStep}
                     caseBy={{
-                        MAIN: <ResultMain option="FIRST" setResultStep={setResultStep} />,
+                        MAIN: <ResultMain option="FIRST" setResultStep={setFirstResultStep} />,
                         RESULT: <FirstResultTable />,
                     }}
                 />

apps/user/src/components/common/Wrappers/AuthWrapper/AuthWrapper.tsx

@@ -1,29 +1,28 @@
 'use client';
 
-import { Storage } from '@/apis/storage/storage';
-import { ROUTES, TOKEN } from '@/constants/common/constant';
+import { ROUTES } from '@/constants/common/constant';
+import { useUser } from '@/hooks';
 import { color } from '@maru/theme';
 import { Confirm, Text } from '@maru/ui';
 import { useOverlay } from '@toss/use-overlay';
 import { redirect, usePathname, useRouter } from 'next/navigation';
 import { ReactNode, useEffect } from 'react';
 
-const NOT_LOGGEDIN_PRIVATE_PAGE: string[] = [ROUTES.FORM, ROUTES.FIRST_RESULT, ROUTES.FINAL_RESULT];
-const LOGGEDIN_PRIVATE_PAGE: string[] = [ROUTES.LOGIN, ROUTES.SIGNUP];
-
 interface Props {
     children: ReactNode;
 }
 
+const NOT_LOGGEDIN_PRIVATE_PAGE: string[] = [ROUTES.FORM, ROUTES.FIRST_RESULT, ROUTES.FINAL_RESULT];
+const LOGGEDIN_PRIVATE_PAGE: string[] = [ROUTES.LOGIN, ROUTES.SIGNUP];
+
 const AuthWrapper = ({ children }: Props) => {
     const router = useRouter();
     const pathName = usePathname();
     const overlay = useOverlay();
-
-    const token = Storage.getItem(TOKEN.ACCESS);
+    const { isLoggedIn } = useUser();
 
     useEffect(() => {
-        if (NOT_LOGGEDIN_PRIVATE_PAGE.includes(pathName) && !token) {
+        if (NOT_LOGGEDIN_PRIVATE_PAGE.includes(pathName) && !isLoggedIn) {
             overlay.open(({ isOpen, close }) => (
                 <Confirm
                     isOpen={isOpen}
@@ -44,7 +43,7 @@ const AuthWrapper = ({ children }: Props) => {
             ));
             router.push(ROUTES.MAIN);
         }
-        if (token) {
+        if (isLoggedIn) {
             if (LOGGEDIN_PRIVATE_PAGE.includes(pathName)) {
                 redirect(ROUTES.MAIN);
             }
@@ -77,7 +76,7 @@ const AuthWrapper = ({ children }: Props) => {
             //     }
             // }
         }
-    }, [token, pathName, overlay, router]);
+    }, [isLoggedIn, pathName, overlay, router]);
 
     return <>{children}</>;
 };