Feat/#141

src/apis/Write/type.ts

@@ -0,0 +1,14 @@
+import type { ApplyType } from "@/types/Write/write"
+import { IDAcustomAxios } from "@/util/CustomAxios/customAxios"
+
+export const getType = async () => {
+  const response = await IDAcustomAxios.get("/admission/type")
+  return response.data
+}
+
+export const putType = async (type: ApplyType) => {
+  const response = await IDAcustomAxios.put("/admission/type", {
+    type,
+  })
+  return response.data
+}

src/atom/Apply/applyAtom.ts

@@ -1,4 +1,5 @@
 import type * as T from "@/types/Write/write"
+import { ApplyType } from "@/types/Write/write"
 import { atom } from "jotai"
 
 export const pageAtom = atom<number>(0)
@@ -21,3 +22,9 @@ export const guardianInfo = atom<T.ParentInfo>({
 })
 
 export const idPhotoAtom = atom<File | null>(null)
+
+export const typeAtom = atom<T.TypeInfo>({
+  type: ApplyType.NONE,
+  category: null,
+  subCategory: null,
+})

src/components/Write/Type/SpecialAdmission/index.tsx

@@ -4,15 +4,32 @@ import Select from "@/components/common/Select"
 import { SpecialAdmissionSelectList } from "@/constants/Write/specialConstant"
 import React from "react"
 import { Form } from "../style"
+import useType from "@/hooks/Write/useType"
+import type { ApplyType } from "@/types/Write/write"
 
 const SpecialAdmission = () => {
+  const { userTypeInfo, setUserTypeInfo } = useType()
+
   return (
     <Card>
       <InputWrapper title="특별전형 선택">
         <Select
           width={650}
-          list={SpecialAdmissionSelectList}
-          changeEvent={() => {}}
+          value={
+            SpecialAdmissionSelectList.find((val: [ApplyType, string]) => {
+              return userTypeInfo.type === val[0]
+            })?.[1]
+          }
+          list={SpecialAdmissionSelectList.map((val) => val[1])}
+          changeEvent={(event) => {
+            SpecialAdmissionSelectList.forEach((val) => {
+              if ((event.target as HTMLLIElement).innerText === val[1]) {
+                setUserTypeInfo((prev) => {
+                  return { ...prev, type: val[0] }
+                })
+              }
+            })
+          }}
         />
       </InputWrapper>
       <div style={{ marginTop: "1rem" }}>

src/components/Write/Type/SpecialScreening/index.tsx

@@ -3,20 +3,21 @@ import InputWrapper from "@/components/common/InputWrapper"
 import Radio from "@/components/common/Radio"
 import Select from "@/components/common/Select"
 import { SpecialSelectObject } from "@/constants/Write/specialConstant"
-import useRadio from "@/hooks/useRadio"
 import * as S from "../style"
-import React, { useEffect, useState } from "react"
+import React from "react"
+import { ApplySubCategory, ApplyType } from "@/types/Write/write"
 import type { SpecialTypeUnion } from "../type"
+import useType from "@/hooks/Write/useType"
 
 type ReadonlyInputUnion = Exclude<
   SpecialTypeUnion,
-  "사회통합전형 (기회균등전형)" | "사회통합전형 (사회다양성 전형)"
+  ApplySubCategory.EQUALS_OPPORTUNITY | ApplySubCategory.SOCIAL_DIVERSITY
 >
 
 const readonlyInputObject: Record<ReadonlyInputUnion, string> = {
-  마이스터인재전형:
+  MEISTER:
     "소프트웨어 분야 마이스터로 성장할 수 있는 잠재력이 있다고 판단되는 학생 중 학교장의 추천을 받은 자",
-  지역우선전형:
+  LOCAL_FIRST:
     "대구광역시 달성군 소재 중학교 졸업예정자, 중학교 졸업자 또는 중학교 졸업자와 동등한 학력 인정자로서 원서 접수일 현재 전 가족이 대구광역시 달성군에 주민등록이 되어있고 실제 거주하는 자",
 }
 // const readonlyInputSizeObject: Record<ReadonlyInputUnion, number> = {
@@ -25,55 +26,92 @@ const readonlyInputObject: Record<ReadonlyInputUnion, string> = {
 // }
 
 const SpecialScreening = () => {
-  const [currentSpecial, changeCurrentSpecial] = useRadio<SpecialTypeUnion>()
-  const [selectValue, setSelectValue] = useState<string>("선택")
-
-  useEffect(() => {
-    if (selectValue !== "선택") {
-      setSelectValue("선택")
-    }
-  }, [currentSpecial])
+  const { userTypeInfo, setUserTypeInfo } = useType()
 
   return (
     <Card>
       <InputWrapper title="특별전형 선택">
         <Radio
           name="kind"
-          value="마이스터인재전형"
+          value={ApplyType.MEISTER}
           width={153}
-          onClick={changeCurrentSpecial}
+          onClick={({ target }) => {
+            setUserTypeInfo((prev) => {
+              return {
+                ...prev,
+                subCategory: null,
+                type: (target as HTMLInputElement).value as ApplyType,
+              }
+            })
+          }}
+          checked={userTypeInfo.type === ApplyType.MEISTER}
         >
           마이스터인재전형
         </Radio>
         <Radio
           name="kind"
-          value="사회통합전형 (기회균등전형)"
+          value={ApplySubCategory.EQUALS_OPPORTUNITY}
           width={153}
-          onClick={changeCurrentSpecial}
+          onClick={({ target }) => {
+            setUserTypeInfo((prev) => {
+              return {
+                ...prev,
+                subCategory: (target as HTMLInputElement)
+                  .value as ApplySubCategory,
+                type: ApplyType.NONE,
+              }
+            })
+          }}
+          checked={
+            userTypeInfo.subCategory === ApplySubCategory.EQUALS_OPPORTUNITY
+          }
         >
           사회통합전형 (기회균등전형)
         </Radio>
         <Radio
           name="kind"
-          value="사회통합전형 (사회다양성 전형)"
+          value={ApplySubCategory.SOCIAL_DIVERSITY}
           width={153}
-          onClick={changeCurrentSpecial}
+          onClick={({ target }) => {
+            setUserTypeInfo((prev) => {
+              return {
+                ...prev,
+                subCategory: (target as HTMLInputElement)
+                  .value as ApplySubCategory,
+                type: ApplyType.NONE,
+              }
+            })
+          }}
+          checked={
+            userTypeInfo.subCategory === ApplySubCategory.SOCIAL_DIVERSITY
+          }
         >
           사회통합전형 (사회다양성 전형)
         </Radio>
         <Radio
           name="kind"
-          value="지역우선전형"
+          value={ApplyType.LOCAL_FIRST}
           width={153}
-          onClick={changeCurrentSpecial}
+          onClick={({ target }) => {
+            setUserTypeInfo((prev) => {
+              return {
+                ...prev,
+                subCategory: null,
+                type: (target as HTMLInputElement).value as ApplyType,
+              }
+            })
+          }}
+          checked={userTypeInfo.type === ApplyType.LOCAL_FIRST}
         >
           지역우선전형
         </Radio>
       </InputWrapper>
-      {currentSpecial &&
-        ["마이스터인재전형", "지역우선전형"].includes(currentSpecial) && (
+      {userTypeInfo.subCategory !== ApplySubCategory.EQUALS_OPPORTUNITY &&
+        userTypeInfo.subCategory !== ApplySubCategory.SOCIAL_DIVERSITY &&
+        (userTypeInfo.type === ApplyType.MEISTER ||
+          userTypeInfo.type === ApplyType.LOCAL_FIRST) && (
           <S.Form>
-            {readonlyInputObject[currentSpecial as ReadonlyInputUnion]}
+            {readonlyInputObject[userTypeInfo.type as ReadonlyInputUnion]}
           </S.Form>
           // <Textarea
           //   height={
@@ -84,29 +122,43 @@ const SpecialScreening = () => {
           //   style={{ marginTop: "34px" }}
           // />
         )}
-      {currentSpecial &&
-        [
-          "사회통합전형 (기회균등전형)",
-          "사회통합전형 (사회다양성 전형)",
-        ].includes(currentSpecial) && (
+      {userTypeInfo.type !== ApplyType.MEISTER &&
+        userTypeInfo.type !== ApplyType.LOCAL_FIRST &&
+        (userTypeInfo.subCategory === ApplySubCategory.EQUALS_OPPORTUNITY ||
+          userTypeInfo.subCategory === ApplySubCategory.SOCIAL_DIVERSITY) && (
           <Select
             changeEvent={(event) => {
-              console.log((event.target as HTMLLIElement).innerText)
-              setSelectValue((event.target as HTMLLIElement).innerText)
+              SpecialSelectObject[
+                userTypeInfo.subCategory !== null
+                  ? userTypeInfo.subCategory
+                  : ApplySubCategory.EQUALS_OPPORTUNITY
+              ].forEach((val: [ApplyType, string]) => {
+                if ((event.target as HTMLLIElement).innerText === val[1]) {
+                  setUserTypeInfo((prev) => {
+                    return { ...prev, type: val[0] }
+                  })
+                }
+              })
             }}
-            list={
+            list={SpecialSelectObject[userTypeInfo.subCategory].map(
+              (val) => val[1],
+            )}
+            value={
               SpecialSelectObject[
-                currentSpecial as Exclude<SpecialTypeUnion, ReadonlyInputUnion>
-              ]
+                userTypeInfo.subCategory !== null
+                  ? userTypeInfo.subCategory
+                  : ApplySubCategory.EQUALS_OPPORTUNITY
+              ].find((val: [ApplyType, string]) => {
+                return userTypeInfo.type === val[0]
+              })?.[1]
             }
-            value={selectValue}
             width={650}
             style={{ marginTop: "34px" }}
           />
         )}
-      <S.FormWrap>
-        {selectValue !== "선택" && <S.Form>dummy</S.Form>}
-      </S.FormWrap>
+      {/* <S.FormWrap>
+        {selectValue !=== "선택" && <S.Form>dummy</S.Form>}
+      </S.FormWrap> */}
     </Card>
   )
 }

src/components/Write/Type/index.tsx

@@ -3,31 +3,56 @@ import InputWrapper from "@/components/common/InputWrapper"
 import Radio from "@/components/common/Radio"
 import useRadio from "@/hooks/useRadio"
 import React, { useEffect } from "react"
-import SpecialScreening from "./specialScreening"
-import SpecialAdmission from "./specialAdmission"
-import type { CurrentTypeUnion } from "./type"
+import SpecialScreening from "./SpecialScreening"
+import SpecialAdmission from "./SpecialAdmission"
+// import type { CurrentTypeUnion } from "./type"
 import { useKeyFunnel } from "@dgswcns/cns-funnel"
 import * as S from "./style"
+import useType from "@/hooks/Write/useType"
+import { ApplyMainCategory } from "@/types/Write/write"
 
 const WriteType = () => {
-  const [currentType, changeCurrentType] = useRadio<CurrentTypeUnion>()
-  const [TypeFunnel, TypeStep, setType] = useKeyFunnel<CurrentTypeUnion>()
+  const [currentType, changeCurrentType] = useRadio<ApplyMainCategory>()
+  const [TypeFunnel, TypeStep, setType] = useKeyFunnel<ApplyMainCategory>()
+  const { setUserTypeInfo, data } = useType()
 
   useEffect(() => {
     setType(currentType)
+    setUserTypeInfo((prev) => {
+      return {
+        ...prev,
+        category: currentType === undefined ? null : currentType,
+      }
+    })
   }, [currentType])
 
+  useEffect(() => {
+    setUserTypeInfo({ ...data })
+  }, [data])
+
   return (
     <section>
       <Card>
         <InputWrapper title="졸업구분">
-          <Radio name="type" value="일반전형" onClick={changeCurrentType}>
+          <Radio
+            name="type"
+            value={ApplyMainCategory.COMMON}
+            onClick={changeCurrentType}
+          >
             일반전형
           </Radio>
-          <Radio name="type" value="특별전형" onClick={changeCurrentType}>
+          <Radio
+            name="type"
+            value={ApplyMainCategory.SPECIAL}
+            onClick={changeCurrentType}
+          >
             특별전형
           </Radio>
-          <Radio name="type" value="특례입학" onClick={changeCurrentType}>
+          <Radio
+            name="type"
+            value={ApplyMainCategory.EXCEPTIONAL}
+            onClick={changeCurrentType}
+          >
             특례입학
           </Radio>
         </InputWrapper>
@@ -46,10 +71,10 @@ const WriteType = () => {
         </TypeFunnel>
       </Card>
       <TypeFunnel>
-        <TypeStep name="특별전형">
+        <TypeStep name="SPECIAL">
           <SpecialScreening />
         </TypeStep>
-        <TypeStep name="특례입학">
+        <TypeStep name="EXCEPTIONAL">
           <SpecialAdmission />
         </TypeStep>
       </TypeFunnel>

src/components/Write/Type/type.ts

@@ -1,6 +1,7 @@
-export type CurrentTypeUnion = "일반전형" | "특별전형" | "특례입학"
+import type { ApplySubCategory, ApplyType } from "@/types/Write/write"
+
 export type SpecialTypeUnion =
-  | "마이스터인재전형"
-  | "사회통합전형 (기회균등전형)"
-  | "사회통합전형 (사회다양성 전형)"
-  | "지역우선전형"
+  | ApplyType.MEISTER
+  | ApplySubCategory.EQUALS_OPPORTUNITY
+  | ApplySubCategory.SOCIAL_DIVERSITY
+  | ApplyType.LOCAL_FIRST

src/components/common/Write/Aside/index.tsx

@@ -6,6 +6,7 @@ import useGetBrWidth from "@/hooks/useGetBrWidth"
 import useGuardian from "@/hooks/Write/useGuardian"
 import usePersonal from "@/hooks/Write/usePersonal"
 import useIdPhoto from "@/hooks/Write/useIdPhoto"
+import useType from "@/hooks/Write/useType"
 
 /**
  * @todo
@@ -18,6 +19,7 @@ export const Aside = () => {
   const { fixUserInfo } = usePersonal()
   const { fixParentInfo } = useGuardian()
   const { setPhoto } = useIdPhoto()
+  const { fixTypeInfo } = useType()
 
   const checkCurrentPageSave = () => {
     switch (currentPage) {
@@ -37,6 +39,9 @@ export const Aside = () => {
       case 4:
         break
       case 5:
+        fixTypeInfo()
+          .then((e) => console.log(e))
+          .catch((e) => console.log(e))
         break
       case 6:
         break