[refactor] 원서 작성 페이지 리펙토링

apps/admin/src/app/edit/[memberId]/page.tsx

@@ -1,10 +1,9 @@
 import { redirect } from 'next/navigation';
-import { StepsContainer } from 'shared';
+import { StepWrapper } from 'shared';
+import { StepEnum } from 'types';
 
 import { getOneseoByMemberId } from 'admin/app/apis/oneseo/getOneseoById';
 
-const LAST_STEP = 4;
-
 interface EditProps {
   params: { memberId: string };
   searchParams?: { [key: string]: string | undefined };
@@ -14,9 +13,9 @@ export default async function Edit({ params: { memberId }, searchParams }: EditP
   const step = searchParams?.step;
   const id = Number(memberId);
 
-  if (!step || (step && Number(step) > LAST_STEP)) return redirect(`/edit/${memberId}?step=1`);
+  if (!step || !['1', '2', '3', '4'].includes(step)) redirect(`/register/${id}?step=1`);
 
   const data = await getOneseoByMemberId(id);
 
-  return <StepsContainer data={data} type="admin" param={step} memberId={Number(memberId)} />;
+  return <StepWrapper data={data} type="admin" step={step as StepEnum} memberId={id} />;
 }

apps/client/src/app/register/page.tsx

@@ -1,5 +1,6 @@
 import { getDate } from 'api';
 import { redirect } from 'next/navigation';
+import { StepEnum } from 'types';
 
 import { getMyMemberInfo, getMyOneseo } from 'client/app/apis';
 import { RegisterStepsPage } from 'client/pageContainer';
@@ -27,9 +28,9 @@ export default async function Register({ searchParams }: RegisterProps) {
         currentTime < new Date(dateList.oneseoSubmissionEnd).getTime()
       : false;
 
-  if (info === undefined || (data && !data.step) || !isOneseoWrite) redirect('/');
+  if (!info || (data && !data.step) || !isOneseoWrite) redirect('/');
 
-  if (!step) redirect('/register?step=1');
+  if (!step || !['1', '2', '3', '4'].includes(step)) redirect('/register?step=1');
 
-  return <RegisterStepsPage data={data} info={info} param={step} />;
+  return <RegisterStepsPage data={data} info={info} step={step as StepEnum} />;
 }

apps/client/src/pageContainer/CalculatePage/index.tsx

@@ -1,31 +1,101 @@
+/* eslint-disable @typescript-eslint/naming-convention */
 'use client';
 
 import { useState } from 'react';
 
+import { zodResolver } from '@hookform/resolvers/zod';
+import { usePostMockScore } from 'api';
 import Image from 'next/image';
-import { Button, ScoreRegister, useStore } from 'shared';
-import { GraduationType } from 'types';
+import { useForm } from 'react-hook-form';
+import { Button, ScoreCalculateDialog, Step4Register, step4Schema } from 'shared';
+import {
+  GraduationTypeValueEnum,
+  LiberalSystemValueEnum,
+  MockScoreType,
+  Step4FormType,
+} from 'types';
 
 import { ComputerRecommendedPage } from 'client/pageContainer';
 
+import { ARTS_PHYSICAL_SUBJECTS, GENERAL_SUBJECTS } from 'shared/constants';
 import { cn } from 'shared/lib/utils';
 
-const graduationArray: { text: string; value: GraduationType; img: string }[] = [
-  { text: '졸업 예정', value: 'CANDIDATE', img: '/images/candidate.png' },
-  { text: '졸업자', value: 'GRADUATE', img: '/images/graduate.png' },
-  { text: '검정고시', value: 'GED', img: '/images/ged.png' },
+const graduationArray = [
+  { text: '졸업 예정', value: GraduationTypeValueEnum.CANDIDATE, img: '/images/candidate.png' },
+  { text: '졸업자', value: GraduationTypeValueEnum.GRADUATE, img: '/images/graduate.png' },
+  { text: '검정고시', value: GraduationTypeValueEnum.GED, img: '/images/ged.png' },
 ];
 
 const CalculatePage = () => {
-  const { graduationType, setGraduationType } = useStore();
-  const [isClickable, setIsClickable] = useState(false);
+  const step4UseForm = useForm<Step4FormType>({
+    resolver: zodResolver(step4Schema),
+    defaultValues: {
+      liberalSystem: LiberalSystemValueEnum.FREE_GRADE,
+    },
+  });
+
+  const [graduationType, setGraduationType] = useState<GraduationTypeValueEnum | null>(null);
+  const [isDialog, setIsDialog] = useState<boolean>(false);
+  const [scoreCalculateDialogData, setScoreCalculateDialogData] = useState<MockScoreType | null>(
+    null,
+  );
+  const isCandidate = graduationType === GraduationTypeValueEnum.CANDIDATE;
+  const isGED = graduationType === GraduationTypeValueEnum.GED;
+  const isGraduate = graduationType === GraduationTypeValueEnum.GRADUATE;
+  const isStep4Success = step4Schema.safeParse(step4UseForm.watch()).success;
+
+  const { mutate: postMockScore } = usePostMockScore(graduationType!, {
+    onSuccess: (data) => {
+      setScoreCalculateDialogData(data);
+      setIsDialog(true);
+    },
+  });
+
+  const handleCalculateButtonClick = () => {
+    const {
+      liberalSystem,
+      achievement1_2,
+      achievement2_1,
+      achievement2_2,
+      achievement3_1,
+      achievement3_2,
+      newSubjects,
+      artsPhysicalAchievement,
+      absentDays,
+      attendanceDays,
+      volunteerTime,
+      freeSemester,
+      gedTotalScore,
+    } = step4UseForm.watch();
+
+    const body = isGED
+      ? { gedTotalScore: gedTotalScore! }
+      : {
+          liberalSystem: liberalSystem,
+          achievement1_2: achievement1_2!,
+          achievement2_1: achievement2_1!,
+          achievement2_2: achievement2_2!,
+          achievement3_1: achievement3_1!,
+          achievement3_2: achievement3_2!,
+          newSubjects: newSubjects,
+          artsPhysicalAchievement: artsPhysicalAchievement!,
+          absentDays: absentDays!,
+          attendanceDays: attendanceDays!,
+          volunteerTime: volunteerTime!,
+          freeSemester: freeSemester,
+          generalSubjects: [...GENERAL_SUBJECTS],
+          artsPhysicalSubjects: [...ARTS_PHYSICAL_SUBJECTS],
+        };
+
+    postMockScore(body);
+  };
 
   return (
     <>
       <ComputerRecommendedPage />
       {graduationType ? (
         <div className={cn('sm:flex', 'justify-center', 'rounded-[1.25rem]', 'hidden')}>
-          <div className={cn('pb-10', 'mb-40', 'bg-white', 'mt-[3.56rem]', 'rounded-[1.25rem]')}>
+          <div className={cn('mb-[3.56rem]', 'bg-white', 'mt-[3.56rem]', 'rounded-[1.25rem]')}>
             <header
               className={cn(
                 'w-266',
@@ -40,25 +110,29 @@ const CalculatePage = () => {
                 'border-gray-100',
               )}
             >
-              <Button onClick={() => setGraduationType(undefined)} variant="ghost">
+              <Button onClick={() => setGraduationType(null)} variant="ghost">
                 이전
               </Button>
               <Button
                 form="scoreForm"
                 type="submit"
-                variant={isClickable ? 'next' : 'submit'}
-                disabled={!isClickable}
+                variant={isStep4Success ? 'next' : 'submit'}
+                disabled={!isStep4Success}
+                onClick={handleCalculateButtonClick}
               >
                 내 성적 계산하기
               </Button>
             </header>
-            <div className={cn('w-full', 'h-6')} />
-            <ScoreRegister
-              type="calculate"
-              data={undefined}
-              isStep4Clickable={isClickable}
-              setIsStep4Clickable={setIsClickable}
-            />
+            <div className={cn('p-8', 'pt-6', 'pb-10')}>
+              <Step4Register
+                graduationType={graduationType}
+                isCandidate={isCandidate}
+                isGED={isGED}
+                isGraduate={isGraduate}
+                type="calculate"
+                {...step4UseForm}
+              />
+            </div>
           </div>
         </div>
       ) : (
@@ -107,6 +181,13 @@ const CalculatePage = () => {
           </div>
         </div>
       )}
+
+      <ScoreCalculateDialog
+        isDialog={isDialog}
+        setIsDialog={setIsDialog}
+        scoreCalculateDialogData={scoreCalculateDialogData}
+        type="score"
+      />
     </>
   );
 };

apps/client/src/pageContainer/PrintPage/index.tsx

@@ -7,7 +7,7 @@ import { cn } from 'client/lib/utils';
 
 import { PrintIcon } from 'shared/assets';
 import { Button } from 'shared/components';
-import { artPhysicalSubjectArray, defaultSubjectArray } from 'shared/constants';
+import { ARTS_PHYSICAL_SUBJECTS, GENERAL_SUBJECTS } from 'shared/constants';
 
 import { useGetMyOneseo } from 'api/hooks';
 
@@ -296,7 +296,7 @@ const ApplicationPage = ({ initialData }: PrintPageProps) => {
                       <div className="h-[2.2vh] text-left">과목</div>
                     </div>
                     {[
-                      ...defaultSubjectArray,
+                      ...GENERAL_SUBJECTS,
                       ...(oneseo.middleSchoolAchievement.newSubjects ?? []),
                     ].map((subject) => (
                       <div
@@ -463,7 +463,7 @@ const ApplicationPage = ({ initialData }: PrintPageProps) => {
                       <div className="h-[2.2vh] text-right">학년</div>
                       <div className="h-[2.2vh] text-left">과목</div>
                     </div>
-                    {[...artPhysicalSubjectArray].map((subject) => (
+                    {[...ARTS_PHYSICAL_SUBJECTS].map((subject) => (
                       <div
                         key={subject}
                         className="flex items-center justify-center border-b border-black"

apps/client/src/pageContainer/RegisterPage/StepsPage/index.tsx

@@ -2,20 +2,18 @@
 
 import { useEffect } from 'react';
 
-import { StepsContainer, useStore } from 'shared';
-import { GetMyOneseoType, MyMemberInfoType } from 'types';
+import { StepWrapper } from 'shared';
+import { GetMyOneseoType, MyMemberInfoType, StepEnum } from 'types';
 
 import { ComputerRecommendedPage } from 'client/pageContainer';
 
 interface RegisterStepsPageProps {
   data: GetMyOneseoType | undefined;
   info: MyMemberInfoType;
-  param: string;
+  step: StepEnum;
 }
 
-const RegisterStepsPage = ({ data, param, info }: RegisterStepsPageProps) => {
-  const { setAll } = useStore();
-
+const RegisterStepsPage = ({ data, step, info }: RegisterStepsPageProps) => {
   useEffect(() => {
     const handleBeforeUnload = (event: BeforeUnloadEvent) => {
       event.preventDefault();
@@ -30,16 +28,10 @@ const RegisterStepsPage = ({ data, param, info }: RegisterStepsPageProps) => {
     };
   }, []);
 
-  useEffect(() => {
-    return () => {
-      setAll();
-    };
-  }, []);
-
   return (
     <>
       <ComputerRecommendedPage />
-      <StepsContainer data={data} info={info} param={param} type="client" />;
+      <StepWrapper data={data} info={info} step={step} type="client" />;
     </>
   );
 };

packages/api/src/hooks/api/oneseo/usePostMockScore.ts

@@ -13,7 +13,7 @@ import { oneseoQueryKeys, oneseoUrl, post } from 'api/libs';
 
 export const usePostMockScore = (
   type: GraduationType,
-  options: UseMutationOptions<
+  options?: UseMutationOptions<
     MockScoreType,
     AxiosError,
     MiddleSchoolAchievementType | GEDAchievementType

packages/api/src/hooks/api/oneseo/usePostMyOneseo.ts

@@ -6,10 +6,11 @@ import { PostOneseoType } from 'types';
 
 import { oneseoQueryKeys, oneseoUrl, post } from 'api/libs';
 
-export const usePostMyOneseo = (options: UseMutationOptions<unknown, AxiosError, PostOneseoType>) =>
+export const usePostMyOneseo = (
+  options?: UseMutationOptions<unknown, AxiosError, PostOneseoType>,
+) =>
   useMutation({
     mutationKey: oneseoQueryKeys.postMyOneseo(),
     mutationFn: (data: PostOneseoType) => post(oneseoUrl.postMyOneseo(), data),
     ...options,
   });
-

packages/api/src/hooks/api/oneseo/usePutOneseoById.ts

@@ -8,7 +8,7 @@ import { oneseoQueryKeys, oneseoUrl, put } from 'api/libs';
 
 export const usePutOneseoByMemberId = (
   memberId: number,
-  options: UseMutationOptions<unknown, AxiosError, PostOneseoType>,
+  options?: UseMutationOptions<unknown, AxiosError, PostOneseoType>,
 ) =>
   useMutation({
     mutationKey: oneseoQueryKeys.putOneseoByMemberId(memberId),

packages/shared/index.ts

@@ -1 +1 @@
-export * from "./src";
+export * from './src';

packages/shared/package.json

@@ -23,8 +23,7 @@
     "react-daum-postcode": "^3.1.3",
     "tailwind-config": "workspace:^",
     "types": "workspace:^",
-    "zod": "^3.23.8",
-    "zustand": "^4.5.5"
+    "zod": "^3.23.8"
   },
   "devDependencies": {
     "eslint": "^8",