From 8adacff255fe55b719aee5dc6d2f3e5617d35ed2 Mon Sep 17 00:00:00 2001
From: aazkgh <gg25hp17@naver.com>
Date: Sun, 11 Feb 2024 18:36:01 +0900
Subject: [PATCH 1/7] =?UTF-8?q?refactor:=20=EB=A8=B8=EB=A6=AC=20=EA=B8=B0?=
 =?UTF-8?q?=EC=9E=A5=20=EC=83=81=EC=88=98=ED=99=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/ApplicationPage/components/DefaultInfo.tsx   | 9 ++++-----
 src/views/ApplicationPage/components/HairTypeInput.tsx | 1 +
 src/views/ApplicationPage/constants/select.ts          | 2 ++
 3 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/views/ApplicationPage/components/DefaultInfo.tsx b/src/views/ApplicationPage/components/DefaultInfo.tsx
index 39744dcd..02ec7b01 100644
--- a/src/views/ApplicationPage/components/DefaultInfo.tsx
+++ b/src/views/ApplicationPage/components/DefaultInfo.tsx
@@ -8,7 +8,7 @@ import Button from '../../@common/components/Button';
 import Header from '../../@common/components/Header';
 import ProgressBar from '../../@common/components/ProgressBar';
 import { INFO_MESSAGE } from '../constants/message';
-import { SELECT_TYPE } from '../constants/select';
+import { SELECT_LENGTH, SELECT_TYPE } from '../constants/select';
 
 import HairTypeInput from './HairTypeInput';
 import StyleButton from './StyleButton';
@@ -53,10 +53,9 @@ const DefaultInfo = () => {
               <span>{INFO_MESSAGE.LENGTH_SUBTITLE}</span>
             </S.Title>
             <S.HairTypeInputBox>
-              <HairTypeInput imgIdx={0} type="SHORT" />
-              <HairTypeInput imgIdx={1} type="ABOVE_SHOULDER" />
-              <HairTypeInput imgIdx={2} type="UNDER_SHOULDER" />
-              <HairTypeInput imgIdx={3} type="UNDER_WAIST" />
+              {SELECT_LENGTH.map((element, index) => (
+                <HairTypeInput key={element} imgIdx={index} type={element} />
+              ))}
             </S.HairTypeInputBox>
           </S.HairLengthSection>
           <hr />
diff --git a/src/views/ApplicationPage/components/HairTypeInput.tsx b/src/views/ApplicationPage/components/HairTypeInput.tsx
index 8e1c7fcf..73bf4dc6 100644
--- a/src/views/ApplicationPage/components/HairTypeInput.tsx
+++ b/src/views/ApplicationPage/components/HairTypeInput.tsx
@@ -25,6 +25,7 @@ const HairTypeInput = ({ imgIdx, type }: HairTypeInputProps) => {
 
   useEffect(() => {
     let images;
+
     switch (imgIdx) {
       case 0:
         images = [shortDefault, shortSelected];
diff --git a/src/views/ApplicationPage/constants/select.ts b/src/views/ApplicationPage/constants/select.ts
index 0364b3c8..d2829590 100644
--- a/src/views/ApplicationPage/constants/select.ts
+++ b/src/views/ApplicationPage/constants/select.ts
@@ -1,3 +1,5 @@
+export const SELECT_LENGTH = ['SHORT', 'ABOVE_SHOULDER', 'UNDER_SHOULDER', 'UNDER_WAIST'];
+
 export const SELECT_TYPE = {
   CUT: '커트',
   COLOR: '컬러',

From b761aaa2aa985b00e08c47453c23e6f12659676e Mon Sep 17 00:00:00 2001
From: aazkgh <gg25hp17@naver.com>
Date: Sun, 11 Feb 2024 19:23:09 +0900
Subject: [PATCH 2/7] =?UTF-8?q?refactor:=20=EC=84=A0=ED=98=B8=20=EC=8A=A4?=
 =?UTF-8?q?=ED=83=80=EC=9D=BC=20=EC=83=81=EC=88=98=ED=99=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/DefaultInfo.tsx                | 36 ++++++++-----------
 src/views/ApplicationPage/constants/select.ts | 28 ++++++++++-----
 2 files changed, 33 insertions(+), 31 deletions(-)

diff --git a/src/views/ApplicationPage/components/DefaultInfo.tsx b/src/views/ApplicationPage/components/DefaultInfo.tsx
index 02ec7b01..efd7d84b 100644
--- a/src/views/ApplicationPage/components/DefaultInfo.tsx
+++ b/src/views/ApplicationPage/components/DefaultInfo.tsx
@@ -8,7 +8,7 @@ import Button from '../../@common/components/Button';
 import Header from '../../@common/components/Header';
 import ProgressBar from '../../@common/components/ProgressBar';
 import { INFO_MESSAGE } from '../constants/message';
-import { SELECT_LENGTH, SELECT_TYPE } from '../constants/select';
+import { SELECT_LENGTH, SELECT_STYLE } from '../constants/select';
 
 import HairTypeInput from './HairTypeInput';
 import StyleButton from './StyleButton';
@@ -66,27 +66,19 @@ const DefaultInfo = () => {
               </h2>
               <span>{INFO_MESSAGE.PREFERENCE_SUBTITLE}</span>
             </S.Title>
-            <S.StyleBox>
-              <h3>{SELECT_TYPE.CUT}</h3>
-              <StyleButton isSelected={activateCheckbox('일반 커트')} type="일반 커트" />
-            </S.StyleBox>
-            <hr />
-            <S.StyleBox>
-              <h3>{SELECT_TYPE.COLOR}</h3>
-              <S.SelectList>
-                <StyleButton isSelected={activateCheckbox('전체 염색')} type="전체 염색" />
-                <StyleButton isSelected={activateCheckbox('전체 탈색')} type="전체 탈색" />
-              </S.SelectList>
-            </S.StyleBox>
-            <hr />
-            <S.StyleBox>
-              <h3>{SELECT_TYPE.PERM}</h3>
-              <S.SelectList>
-                <StyleButton isSelected={activateCheckbox('셋팅펌')} type="셋팅펌" />
-                <StyleButton isSelected={activateCheckbox('일반펌')} type="일반펌" />
-                <StyleButton isSelected={activateCheckbox('매직')} type="매직" />
-              </S.SelectList>
-            </S.StyleBox>
+            {SELECT_STYLE.map((element, index) => (
+              <>
+                <S.StyleBox key={element.TITLE}>
+                  <h3>{element.TITLE}</h3>
+                  <S.SelectList>
+                    {Object.keys(element.CONTENT).map((content) => (
+                      <StyleButton key={content} isSelected={activateCheckbox(content)} type={content} />
+                    ))}
+                  </S.SelectList>
+                </S.StyleBox>
+                {index === SELECT_STYLE.length - 1 ? null : <hr />}
+              </>
+            ))}
           </S.DeserveStyleSection>
         </S.StyleSection>
       </S.MainStyle>
diff --git a/src/views/ApplicationPage/constants/select.ts b/src/views/ApplicationPage/constants/select.ts
index d2829590..f4de8696 100644
--- a/src/views/ApplicationPage/constants/select.ts
+++ b/src/views/ApplicationPage/constants/select.ts
@@ -6,6 +6,25 @@ export const SELECT_TYPE = {
   PERM: '펌',
 };
 
+export const SELECT_STYLE = [
+  { TITLE: '커트', CONTENT: { '일반 커트': 'NORMAL_CUT' } },
+  {
+    TITLE: '컬러',
+    CONTENT: {
+      '전체 염색': 'ALL_COLOR',
+      '전체 탈색': 'ALL_DECOLOR',
+    },
+  },
+  {
+    TITLE: '펌',
+    CONTENT: {
+      셋팅펌: 'SETTING_PERM ',
+      일반펌: 'NORMAL_PERM',
+      매직: 'STRAIGHTENING ',
+    },
+  },
+];
+
 export const SELECT_SERVICE = {
   펌: 'PERM',
   탈색: 'DECOLOR',
@@ -20,12 +39,3 @@ export const SELECT_PERIOD = {
   '7 - 12개월': 'SEVEN_TWELVE',
   '12 개월 초과': 'ABOVE_TWELVE',
 };
-
-export const SELECT_STYLE = {
-  '일반 커트': 'NORMAL_CUT',
-  '전체 염색': 'ALL_COLOR',
-  '전체 탈색': 'ALL_DECOLOR',
-  셋팅펌: 'SETTING_PERM ',
-  일반펌: 'NORMAL_PERM',
-  매직: 'STRAIGHTENING ',
-};

From e05bac7f90c07c979d5ed1107fda10455064202b Mon Sep 17 00:00:00 2001
From: aazkgh <gg25hp17@naver.com>
Date: Sun, 11 Feb 2024 23:42:14 +0900
Subject: [PATCH 3/7] =?UTF-8?q?fix:=20key=20props=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/ApplicationPage/components/DefaultInfo.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/views/ApplicationPage/components/DefaultInfo.tsx b/src/views/ApplicationPage/components/DefaultInfo.tsx
index efd7d84b..859c7691 100644
--- a/src/views/ApplicationPage/components/DefaultInfo.tsx
+++ b/src/views/ApplicationPage/components/DefaultInfo.tsx
@@ -1,4 +1,4 @@
-import { useEffect } from 'react';
+import React, { useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useRecoilState } from 'recoil';
 import { styled } from 'styled-components';
@@ -67,8 +67,8 @@ const DefaultInfo = () => {
               <span>{INFO_MESSAGE.PREFERENCE_SUBTITLE}</span>
             </S.Title>
             {SELECT_STYLE.map((element, index) => (
-              <>
-                <S.StyleBox key={element.TITLE}>
+              <React.Fragment key={element.TITLE}>
+                <S.StyleBox>
                   <h3>{element.TITLE}</h3>
                   <S.SelectList>
                     {Object.keys(element.CONTENT).map((content) => (
@@ -77,7 +77,7 @@ const DefaultInfo = () => {
                   </S.SelectList>
                 </S.StyleBox>
                 {index === SELECT_STYLE.length - 1 ? null : <hr />}
-              </>
+              </React.Fragment>
             ))}
           </S.DeserveStyleSection>
         </S.StyleSection>

From 5086b06b8f645ed38c0ce3ae15d8ed8cbf61ad69 Mon Sep 17 00:00:00 2001
From: aazkgh <gg25hp17@naver.com>
Date: Mon, 12 Feb 2024 02:36:54 +0900
Subject: [PATCH 4/7] =?UTF-8?q?refactor:=20state=20=EB=A6=AC=ED=8C=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/recoil/atoms/applicationState.ts          |  2 -
 .../components/DefaultInfo.tsx                |  4 +-
 .../components/HairTypeInput.tsx              | 44 ++++++++-----------
 3 files changed, 21 insertions(+), 29 deletions(-)

diff --git a/src/recoil/atoms/applicationState.ts b/src/recoil/atoms/applicationState.ts
index a9a5ec0e..fc712a50 100644
--- a/src/recoil/atoms/applicationState.ts
+++ b/src/recoil/atoms/applicationState.ts
@@ -16,7 +16,6 @@ export const applyStepState = atom<applyStepType>({
 export interface hairStyleType {
   length: string;
   preference: Array<string>;
-  lengthStatus: Array<boolean>;
   verifyStatus: boolean;
 }
 
@@ -25,7 +24,6 @@ export const hairStyleState = atom<hairStyleType>({
   default: {
     length: '',
     preference: [],
-    lengthStatus: [false, false, false, false],
     verifyStatus: false,
   },
 });
diff --git a/src/views/ApplicationPage/components/DefaultInfo.tsx b/src/views/ApplicationPage/components/DefaultInfo.tsx
index 859c7691..e4c578a5 100644
--- a/src/views/ApplicationPage/components/DefaultInfo.tsx
+++ b/src/views/ApplicationPage/components/DefaultInfo.tsx
@@ -53,8 +53,8 @@ const DefaultInfo = () => {
               <span>{INFO_MESSAGE.LENGTH_SUBTITLE}</span>
             </S.Title>
             <S.HairTypeInputBox>
-              {SELECT_LENGTH.map((element, index) => (
-                <HairTypeInput key={element} imgIdx={index} type={element} />
+              {SELECT_LENGTH.map((element) => (
+                <HairTypeInput key={element} type={element} />
               ))}
             </S.HairTypeInputBox>
           </S.HairLengthSection>
diff --git a/src/views/ApplicationPage/components/HairTypeInput.tsx b/src/views/ApplicationPage/components/HairTypeInput.tsx
index 73bf4dc6..10b4f297 100644
--- a/src/views/ApplicationPage/components/HairTypeInput.tsx
+++ b/src/views/ApplicationPage/components/HairTypeInput.tsx
@@ -10,33 +10,32 @@ import longDefault from '../../@common/assets/images/btn_hair3_default.png';
 import longSelected from '../../@common/assets/images/btn_hair3_selected.png';
 import rapunzelDefault from '../../@common/assets/images/btn_hair4_default.png';
 import rapunzelSelected from '../../@common/assets/images/btn_hair4_selected.png';
+import { SELECT_LENGTH } from '../constants/select';
 
 import { hairStyleState } from '@/recoil/atoms/applicationState';
 
 interface HairTypeInputProps {
-  imgIdx: number;
   type: string;
 }
 
-const HairTypeInput = ({ imgIdx, type }: HairTypeInputProps) => {
+const HairTypeInput = ({ type }: HairTypeInputProps) => {
   const [selectedStyle, setSelectedStyle] = useRecoilState(hairStyleState);
-  const { length, lengthStatus } = selectedStyle;
   const [hairImg, setHairImg] = useState<string[]>(['', '']);
+  const [isActive, setIsActive] = useState(false);
 
   useEffect(() => {
     let images;
-
-    switch (imgIdx) {
-      case 0:
+    switch (type) {
+      case SELECT_LENGTH[0]:
         images = [shortDefault, shortSelected];
         break;
-      case 1:
+      case SELECT_LENGTH[1]:
         images = [mediumDefault, mediumSelected];
         break;
-      case 2:
+      case SELECT_LENGTH[2]:
         images = [longDefault, longSelected];
         break;
-      case 3:
+      case SELECT_LENGTH[3]:
         images = [rapunzelDefault, rapunzelSelected];
         break;
       default:
@@ -44,26 +43,21 @@ const HairTypeInput = ({ imgIdx, type }: HairTypeInputProps) => {
     }
     setHairImg(images);
 
-    const tempLengthState = [...lengthStatus];
-
-    type === length ? (tempLengthState[imgIdx] = true) : (tempLengthState[imgIdx] = false);
-    setSelectedStyle({ ...selectedStyle, lengthStatus: tempLengthState });
-  }, []);
-
-  const onlySelected = () => {
-    const tempLengthState = [...lengthStatus];
-    tempLengthState.forEach((_, index) =>
-      index === imgIdx ? (tempLengthState[index] = true) : (tempLengthState[index] = false),
-    );
-
-    setSelectedStyle({ ...selectedStyle, lengthStatus: tempLengthState, length: type });
-  };
+    type === selectedStyle.length ? setIsActive(true) : setIsActive(false);
+  }, [selectedStyle.length]);
 
   return (
     <>
-      <S.HairTypeInput type="radio" id={type} name="hairtype" onChange={onlySelected} />
+      <S.HairTypeInput
+        type="radio"
+        id={type}
+        name="hairtype"
+        onChange={() => {
+          setSelectedStyle({ ...selectedStyle, length: type });
+        }}
+      />
       <S.HairType htmlFor={type}>
-        <img src={lengthStatus[imgIdx] ? hairImg[1] : hairImg[0]} alt="hairImg" />
+        <img src={isActive ? hairImg[1] : hairImg[0]} alt="hairImg" />
       </S.HairType>
     </>
   );

From 89833f73d24df66933b59ef7389ef06ed9744ec1 Mon Sep 17 00:00:00 2001
From: aazkgh <gg25hp17@naver.com>
Date: Mon, 12 Feb 2024 17:35:38 +0900
Subject: [PATCH 5/7] =?UTF-8?q?refactor:=20=ED=97=A4=EC=96=B4=20=EC=9D=B4?=
 =?UTF-8?q?=EB=AF=B8=EC=A7=80=20=EC=83=81=EC=88=98=ED=99=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/DefaultInfo.tsx                |  2 +-
 .../components/HairTypeInput.tsx              | 31 +++----------------
 src/views/ApplicationPage/constants/select.ts | 16 +++++++++-
 3 files changed, 20 insertions(+), 29 deletions(-)

diff --git a/src/views/ApplicationPage/components/DefaultInfo.tsx b/src/views/ApplicationPage/components/DefaultInfo.tsx
index e4c578a5..77f5f265 100644
--- a/src/views/ApplicationPage/components/DefaultInfo.tsx
+++ b/src/views/ApplicationPage/components/DefaultInfo.tsx
@@ -54,7 +54,7 @@ const DefaultInfo = () => {
             </S.Title>
             <S.HairTypeInputBox>
               {SELECT_LENGTH.map((element) => (
-                <HairTypeInput key={element} type={element} />
+                <HairTypeInput key={element.LENGTH} type={element.LENGTH} />
               ))}
             </S.HairTypeInputBox>
           </S.HairLengthSection>
diff --git a/src/views/ApplicationPage/components/HairTypeInput.tsx b/src/views/ApplicationPage/components/HairTypeInput.tsx
index 10b4f297..e9f01d08 100644
--- a/src/views/ApplicationPage/components/HairTypeInput.tsx
+++ b/src/views/ApplicationPage/components/HairTypeInput.tsx
@@ -2,14 +2,6 @@ import { useEffect, useState } from 'react';
 import { useRecoilState } from 'recoil';
 import { styled } from 'styled-components';
 
-import shortDefault from '../../@common/assets/images/btn_hair1_default.png';
-import shortSelected from '../../@common/assets/images/btn_hair1_selected.png';
-import mediumDefault from '../../@common/assets/images/btn_hair2_default.png';
-import mediumSelected from '../../@common/assets/images/btn_hair2_selected.png';
-import longDefault from '../../@common/assets/images/btn_hair3_default.png';
-import longSelected from '../../@common/assets/images/btn_hair3_selected.png';
-import rapunzelDefault from '../../@common/assets/images/btn_hair4_default.png';
-import rapunzelSelected from '../../@common/assets/images/btn_hair4_selected.png';
 import { SELECT_LENGTH } from '../constants/select';
 
 import { hairStyleState } from '@/recoil/atoms/applicationState';
@@ -24,24 +16,9 @@ const HairTypeInput = ({ type }: HairTypeInputProps) => {
   const [isActive, setIsActive] = useState(false);
 
   useEffect(() => {
-    let images;
-    switch (type) {
-      case SELECT_LENGTH[0]:
-        images = [shortDefault, shortSelected];
-        break;
-      case SELECT_LENGTH[1]:
-        images = [mediumDefault, mediumSelected];
-        break;
-      case SELECT_LENGTH[2]:
-        images = [longDefault, longSelected];
-        break;
-      case SELECT_LENGTH[3]:
-        images = [rapunzelDefault, rapunzelSelected];
-        break;
-      default:
-        images = ['', ''];
-    }
-    setHairImg(images);
+    SELECT_LENGTH.forEach((item) => {
+      if (item.LENGTH === type) setHairImg([item.IMAGES.DEFAULT, item.IMAGES.SELECTED]);
+    });
 
     type === selectedStyle.length ? setIsActive(true) : setIsActive(false);
   }, [selectedStyle.length]);
@@ -57,7 +34,7 @@ const HairTypeInput = ({ type }: HairTypeInputProps) => {
         }}
       />
       <S.HairType htmlFor={type}>
-        <img src={isActive ? hairImg[1] : hairImg[0]} alt="hairImg" />
+        <img src={!isActive ? hairImg[0] : hairImg[1]} alt="hairImg" />
       </S.HairType>
     </>
   );
diff --git a/src/views/ApplicationPage/constants/select.ts b/src/views/ApplicationPage/constants/select.ts
index f4de8696..d0f47751 100644
--- a/src/views/ApplicationPage/constants/select.ts
+++ b/src/views/ApplicationPage/constants/select.ts
@@ -1,4 +1,18 @@
-export const SELECT_LENGTH = ['SHORT', 'ABOVE_SHOULDER', 'UNDER_SHOULDER', 'UNDER_WAIST'];
+import shortDefault from '../../@common/assets/images/btn_hair1_default.png';
+import shortSelected from '../../@common/assets/images/btn_hair1_selected.png';
+import mediumDefault from '../../@common/assets/images/btn_hair2_default.png';
+import mediumSelected from '../../@common/assets/images/btn_hair2_selected.png';
+import longDefault from '../../@common/assets/images/btn_hair3_default.png';
+import longSelected from '../../@common/assets/images/btn_hair3_selected.png';
+import rapunzelDefault from '../../@common/assets/images/btn_hair4_default.png';
+import rapunzelSelected from '../../@common/assets/images/btn_hair4_selected.png';
+
+export const SELECT_LENGTH = [
+  { LENGTH: 'SHORT', IMAGES: { DEFAULT: shortDefault, SELECTED: shortSelected } },
+  { LENGTH: 'ABOVE_SHOULDER', IMAGES: { DEFAULT: mediumDefault, SELECTED: mediumSelected } },
+  { LENGTH: 'UNDER_SHOULDER', IMAGES: { DEFAULT: longDefault, SELECTED: longSelected } },
+  { LENGTH: 'UNDER_WAIST', IMAGES: { DEFAULT: rapunzelDefault, SELECTED: rapunzelSelected } },
+];
 
 export const SELECT_TYPE = {
   CUT: '커트',

From e098ef9ccafcc9f29baa3bc49fbc75757d726221 Mon Sep 17 00:00:00 2001
From: aazkgh <gg25hp17@naver.com>
Date: Mon, 12 Feb 2024 17:38:16 +0900
Subject: [PATCH 6/7] =?UTF-8?q?chore:=20=EB=B6=88=ED=95=84=EC=9A=94?=
 =?UTF-8?q?=ED=95=9C=20=EB=B3=80=EC=88=98=20=EC=82=AD=EC=A0=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/ApplicationPage/components/DefaultInfo.tsx | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/views/ApplicationPage/components/DefaultInfo.tsx b/src/views/ApplicationPage/components/DefaultInfo.tsx
index 77f5f265..bf7e8bd0 100644
--- a/src/views/ApplicationPage/components/DefaultInfo.tsx
+++ b/src/views/ApplicationPage/components/DefaultInfo.tsx
@@ -18,17 +18,16 @@ import { applyStepState, hairStyleState } from '@/recoil/atoms/applicationState'
 const DefaultInfo = () => {
   const [step, setStep] = useRecoilState(applyStepState);
   const [selectedStyle, setSelectedStyle] = useRecoilState(hairStyleState);
-  const { length, preference, verifyStatus } = selectedStyle;
   const navigate = useNavigate();
 
   useEffect(() => {
-    length && preference.length > 0
+    selectedStyle.length && selectedStyle.preference.length > 0
       ? setSelectedStyle({ ...selectedStyle, verifyStatus: true })
       : setSelectedStyle({ ...selectedStyle, verifyStatus: false });
-  }, [length, preference]);
+  }, [selectedStyle.length, selectedStyle.preference]);
 
   const activateCheckbox = (type: string): boolean => {
-    return preference.includes(type);
+    return selectedStyle.preference.includes(type);
   };
 
   return (
@@ -88,7 +87,7 @@ const DefaultInfo = () => {
           setStep({ ...step, current: step.current + 1 });
         }}
         isFixed={true}
-        disabled={!verifyStatus}
+        disabled={!selectedStyle.verifyStatus}
       />
     </S.DefaultInfoLayout>
   );

From 54e5c437248fcfe8e4d4b7d417bb8df14e98005e Mon Sep 17 00:00:00 2001
From: aazkgh <gg25hp17@naver.com>
Date: Thu, 15 Feb 2024 15:05:56 +0900
Subject: [PATCH 7/7] =?UTF-8?q?fix:=20=EC=84=9C=EB=B2=84=20=ED=86=B5?=
 =?UTF-8?q?=EC=8B=A0=20=ED=83=80=EC=9E=85=20=EC=97=90=EB=9F=AC=20=EB=B0=98?=
 =?UTF-8?q?=EC=98=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/ApplicationPage/constants/select.ts       |  7 ++++++-
 .../ApplicationPage/hooks/usePostApplication.ts     | 13 ++++---------
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/views/ApplicationPage/constants/select.ts b/src/views/ApplicationPage/constants/select.ts
index d0f47751..82205a68 100644
--- a/src/views/ApplicationPage/constants/select.ts
+++ b/src/views/ApplicationPage/constants/select.ts
@@ -20,7 +20,12 @@ export const SELECT_TYPE = {
   PERM: '펌',
 };
 
-export const SELECT_STYLE = [
+interface SelectStyleItem {
+  TITLE: string;
+  CONTENT: Record<string, string>;
+}
+
+export const SELECT_STYLE: SelectStyleItem[] = [
   { TITLE: '커트', CONTENT: { '일반 커트': 'NORMAL_CUT' } },
   {
     TITLE: '컬러',
diff --git a/src/views/ApplicationPage/hooks/usePostApplication.ts b/src/views/ApplicationPage/hooks/usePostApplication.ts
index 6458e0d3..71ed0f27 100644
--- a/src/views/ApplicationPage/hooks/usePostApplication.ts
+++ b/src/views/ApplicationPage/hooks/usePostApplication.ts
@@ -37,20 +37,15 @@ const usePostApplication = () => {
     return tempElement;
   });
 
-  const tempPreference = preference.map((element) => {
-    let tempElement = element;
-    Object.keys(SELECT_STYLE).forEach((key) => {
-      if (key === element) {
-        tempElement = SELECT_STYLE[key as keyof typeof SELECT_STYLE];
-      }
-    });
-    return tempElement;
+  const convertedPreference = preference.map((preferenceElement) => {
+    const convertedItem = SELECT_STYLE.find((key) => key.CONTENT[preferenceElement]);
+    return convertedItem && convertedItem.CONTENT[preferenceElement];
   });
 
   const postApplication = async () => {
     const objApplicationInfo = {
       hairLength: length,
-      preferHairStyles: tempPreference,
+      preferHairStyles: convertedPreference,
       hairDetail: hairDetail.data,
       hairServiceRecords: tempHairServiceRecords,
       instagramId,