Merge branch 'refactor/#368-DefaultInfoStateRefactor' of https://gith…

…ub.com/TEAM-MODEE/modee-web into refactor/#384-POSTAPI
TEAM-MODDY · Feb 19, 2024 · cf94597 · cf94597
2 parents 4d55253 + 54e5c43
commit cf94597
Show file tree

Hide file tree

Showing 5 changed files with 83 additions and 97 deletions.
diff --git 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
@@ -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';
@@ -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_STYLE } from '../constants/select';
 
 import HairTypeInput from './HairTypeInput';
 import StyleButton from './StyleButton';
@@ -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 (
@@ -53,10 +52,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) => (
+                <HairTypeInput key={element.LENGTH} type={element.LENGTH} />
+              ))}
             </S.HairTypeInputBox>
           </S.HairLengthSection>
           <hr />
@@ -67,27 +65,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) => (
+              <React.Fragment key={element.TITLE}>
+                <S.StyleBox>
+                  <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 />}
+              </React.Fragment>
+            ))}
           </S.DeserveStyleSection>
         </S.StyleSection>
       </S.MainStyle>
@@ -97,7 +87,7 @@ const DefaultInfo = () => {
           setStep({ ...step, current: step.current + 1 });
         }}
         isFixed={true}
-        disabled={!verifyStatus}
+        disabled={!selectedStyle.verifyStatus}
       />
     </S.DefaultInfoLayout>
   );

diff --git a/src/views/ApplicationPage/components/HairTypeInput.tsx b/src/views/ApplicationPage/components/HairTypeInput.tsx
@@ -2,67 +2,39 @@ 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';
 
 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:
-        images = [shortDefault, shortSelected];
-        break;
-      case 1:
-        images = [mediumDefault, mediumSelected];
-        break;
-      case 2:
-        images = [longDefault, longSelected];
-        break;
-      case 3:
-        images = [rapunzelDefault, rapunzelSelected];
-        break;
-      default:
-        images = ['', ''];
-    }
-    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),
-    );
+    SELECT_LENGTH.forEach((item) => {
+      if (item.LENGTH === type) setHairImg([item.IMAGES.DEFAULT, item.IMAGES.SELECTED]);
+    });
 
-    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[0] : hairImg[1]} alt="hairImg" />
       </S.HairType>
     </>
   );

diff --git a/src/views/ApplicationPage/constants/select.ts b/src/views/ApplicationPage/constants/select.ts
@@ -1,9 +1,49 @@
+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: '커트',
   COLOR: '컬러',
   PERM: '펌',
 };
 
+interface SelectStyleItem {
+  TITLE: string;
+  CONTENT: Record<string, string>;
+}
+
+export const SELECT_STYLE: SelectStyleItem[] = [
+  { TITLE: '커트', CONTENT: { '일반 커트': 'NORMAL_CUT' } },
+  {
+    TITLE: '컬러',
+    CONTENT: {
+      '전체 염색': 'ALL_COLOR',
+      '전체 탈색': 'ALL_DECOLOR',
+    },
+  },
+  {
+    TITLE: '펌',
+    CONTENT: {
+      셋팅펌: 'SETTING_PERM ',
+      일반펌: 'NORMAL_PERM',
+      매직: 'STRAIGHTENING ',
+    },
+  },
+];
+
 export const SELECT_SERVICE = {
   펌: 'PERM',
   탈색: 'DECOLOR',
@@ -18,12 +58,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 ',
-};
diff --git 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,