refactor/#359: petProfile 관련 훅 파일 분리

- usePetProfileStep - usePetProfileValidation - usePetProfileAddition
woowacourse-teams · Aug 23, 2023 · b12fe9c · b12fe9c
1 parent a051771
commit b12fe9c
Show file tree

Hide file tree

Showing 12 changed files with 140 additions and 141 deletions.
diff --git a/frontend/src/components/PetProfile/PetProfileEditionForm/PetProfileEditionForm.tsx b/frontend/src/components/PetProfile/PetProfileEditionForm/PetProfileEditionForm.tsx
@@ -9,7 +9,7 @@ import Label from '@/components/@common/Label/Label';
 import { PET_SIZES } from '@/constants/petProfile';
 import { usePetProfile } from '@/context/petProfile/PetProfileContext';
 import { useValidParams } from '@/hooks/@common/useValidParams';
-import { usePetProfileValidation } from '@/hooks/petProfile';
+import { usePetProfileValidation } from '@/hooks/petProfile/usePetProfileValidation';
 import {
   useEditPetMutation,
   usePetItemQuery,

diff --git a/frontend/src/hooks/petProfile.ts → ...hooks/petProfile/usePetProfileAddition.ts b/frontend/src/hooks/petProfile.ts → ...hooks/petProfile/usePetProfileAddition.ts
@@ -1,142 +1,14 @@
 import { ChangeEvent, useState } from 'react';
 import { useNavigate, useOutletContext } from 'react-router-dom';
 
-import {
-  FEMALE,
-  MALE,
-  MIXED_BREED,
-  PET_AGE_MAX,
-  PET_AGE_MIN,
-  PET_PROFILE_ADDITION_STEP,
-  PET_SIZES,
-  STEP_PATH,
-} from '@/constants/petProfile';
+import { MIXED_BREED, PET_SIZES } from '@/constants/petProfile';
 import { usePetAdditionContext } from '@/context/petProfile/PetAdditionContext';
 import { usePetProfile } from '@/context/petProfile/PetProfileContext';
+import { useAddPetProfileMutation, useBreedListQuery } from '@/hooks/query/petProfile';
 import { routerPath } from '@/router/routes';
-import {
-  Gender,
-  PetAdditionOutletContextProps,
-  PetProfile,
-  PetSize,
-} from '@/types/petProfile/client';
+import { PetAdditionOutletContextProps, PetProfile, PetSize } from '@/types/petProfile/client';
 
-import { useAddPetProfileMutation, useBreedListQuery } from './query/petProfile';
-
-export const usePetProfileStep = () => {
-  const navigate = useNavigate();
-  const { isMixedBreed } = usePetProfileValidation();
-  const { petProfile } = usePetAdditionContext();
-
-  const [step, setStep] = useState(0);
-  const [isValidStep, setIsValidStep] = useState(false);
-
-  const totalStep = Object.values(PET_PROFILE_ADDITION_STEP).length;
-  const isLastStep = step === totalStep;
-
-  const goBack = (): void => navigate(routerPath.back);
-  const goNext = () => {
-    if (step === PET_PROFILE_ADDITION_STEP.BREED && !isMixedBreed(petProfile.breed)) {
-      navigate(STEP_PATH[step + 2]);
-      return;
-    }
-
-    if (!isLastStep) navigate(STEP_PATH[step + 1]);
-  };
-
-  const updateCurrentStep = (step: number) => setStep(step);
-  const updateIsValidStep = (isValid: boolean) => setIsValidStep(isValid);
-
-  return {
-    step,
-    totalStep,
-    isValidStep,
-    isLastStep,
-    updateCurrentStep,
-    updateIsValidStep,
-    goBack,
-    goNext,
-  };
-};
-
-export const usePetProfileValidation = () => {
-  const [isValidNameInput, setIsValidNameInput] = useState(true);
-  const [isValidAgeSelect, setIsValidAgeSelect] = useState(true);
-  const [isValidWeightInput, setIsValidWeightInput] = useState(true);
-
-  const validateName = (e: ChangeEvent<HTMLInputElement>) => {
-    const petName = e.target.value;
-
-    if (isValidName(petName)) {
-      setIsValidNameInput(true);
-      return true;
-    }
-
-    setIsValidNameInput(false);
-    return false;
-  };
-
-  const validateAge = (e: ChangeEvent<HTMLSelectElement>) => {
-    const petAge = Number(e.target.value);
-
-    if (isValidAgeRange(petAge)) {
-      setIsValidAgeSelect(true);
-      setIsValidWeightInput(true);
-      return true;
-    }
-
-    setIsValidAgeSelect(false);
-    return false;
-  };
-
-  const validateWeight = (e: ChangeEvent<HTMLInputElement>) => {
-    const petWeight = e.target.value;
-
-    if (isValidWeight(petWeight)) {
-      setIsValidWeightInput(true);
-      return true;
-    }
-
-    setIsValidWeightInput(false);
-    return false;
-  };
-
-  const isValidName = (name: string) => {
-    const validNameCharacters = /^[a-zA-Z0-9가-힣ㄱ-ㅎㅏ-ㅣ]{1,10}$/;
-
-    return validNameCharacters.test(name);
-  };
-
-  const isValidAgeRange = (age: number) =>
-    typeof age === 'number' && age >= PET_AGE_MIN && age <= PET_AGE_MAX;
-
-  const isValidGender = (gender: string): gender is Gender => gender === MALE || gender === FEMALE;
-
-  const isValidWeight = (weight: string) => {
-    const validWeightCharacters = /^(?:100(?:\.0)?|\d{1,2}(?:\.\d)?)$/; // 100.0 또는 1~2자리 숫자.소수 첫째짜리 숫자
-
-    if (Number(weight) <= 0) return false;
-
-    return validWeightCharacters.test(weight);
-  };
-
-  const isMixedBreed = (breed: string) => breed === MIXED_BREED;
-
-  return {
-    isValidNameInput,
-    isValidAgeSelect,
-    isValidWeightInput,
-
-    validateName,
-    validateAge,
-    validateWeight,
-    isValidName,
-    isValidAgeRange,
-    isValidGender,
-    isValidWeight,
-    isMixedBreed,
-  };
-};
+import { usePetProfileValidation } from './usePetProfileValidation';
 
 export const usePetProfileAddition = () => {
   const navigate = useNavigate();

diff --git a/frontend/src/hooks/petProfile/usePetProfileStep.ts b/frontend/src/hooks/petProfile/usePetProfileStep.ts
@@ -0,0 +1,44 @@
+import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+import { PET_PROFILE_ADDITION_STEP, STEP_PATH } from '@/constants/petProfile';
+import { usePetAdditionContext } from '@/context/petProfile/PetAdditionContext';
+import { routerPath } from '@/router/routes';
+
+import { usePetProfileValidation } from './usePetProfileValidation';
+
+export const usePetProfileStep = () => {
+  const navigate = useNavigate();
+  const { isMixedBreed } = usePetProfileValidation();
+  const { petProfile } = usePetAdditionContext();
+
+  const [step, setStep] = useState(0);
+  const [isValidStep, setIsValidStep] = useState(false);
+
+  const totalStep = Object.values(PET_PROFILE_ADDITION_STEP).length;
+  const isLastStep = step === totalStep;
+
+  const goBack = (): void => navigate(routerPath.back);
+  const goNext = () => {
+    if (step === PET_PROFILE_ADDITION_STEP.BREED && !isMixedBreed(petProfile.breed)) {
+      navigate(STEP_PATH[step + 2]);
+      return;
+    }
+
+    if (!isLastStep) navigate(STEP_PATH[step + 1]);
+  };
+
+  const updateCurrentStep = (step: number) => setStep(step);
+  const updateIsValidStep = (isValid: boolean) => setIsValidStep(isValid);
+
+  return {
+    step,
+    totalStep,
+    isValidStep,
+    isLastStep,
+    updateCurrentStep,
+    updateIsValidStep,
+    goBack,
+    goNext,
+  };
+};
diff --git a/frontend/src/hooks/petProfile/usePetProfileValidation.ts b/frontend/src/hooks/petProfile/usePetProfileValidation.ts
@@ -0,0 +1,83 @@
+import { ChangeEvent, useState } from 'react';
+
+import { FEMALE, MALE, MIXED_BREED, PET_AGE_MAX, PET_AGE_MIN } from '@/constants/petProfile';
+import { Gender } from '@/types/petProfile/client';
+
+export const usePetProfileValidation = () => {
+  const [isValidNameInput, setIsValidNameInput] = useState(true);
+  const [isValidAgeSelect, setIsValidAgeSelect] = useState(true);
+  const [isValidWeightInput, setIsValidWeightInput] = useState(true);
+
+  const validateName = (e: ChangeEvent<HTMLInputElement>) => {
+    const petName = e.target.value;
+
+    if (isValidName(petName)) {
+      setIsValidNameInput(true);
+      return true;
+    }
+
+    setIsValidNameInput(false);
+    return false;
+  };
+
+  const validateAge = (e: ChangeEvent<HTMLSelectElement>) => {
+    const petAge = Number(e.target.value);
+
+    if (isValidAgeRange(petAge)) {
+      setIsValidAgeSelect(true);
+      setIsValidWeightInput(true);
+      return true;
+    }
+
+    setIsValidAgeSelect(false);
+    return false;
+  };
+
+  const validateWeight = (e: ChangeEvent<HTMLInputElement>) => {
+    const petWeight = e.target.value;
+
+    if (isValidWeight(petWeight)) {
+      setIsValidWeightInput(true);
+      return true;
+    }
+
+    setIsValidWeightInput(false);
+    return false;
+  };
+
+  const isValidName = (name: string) => {
+    const validNameCharacters = /^[a-zA-Z0-9가-힣ㄱ-ㅎㅏ-ㅣ]{1,10}$/;
+
+    return validNameCharacters.test(name);
+  };
+
+  const isValidAgeRange = (age: number) =>
+    typeof age === 'number' && age >= PET_AGE_MIN && age <= PET_AGE_MAX;
+
+  const isValidGender = (gender: string): gender is Gender => gender === MALE || gender === FEMALE;
+
+  const isValidWeight = (weight: string) => {
+    const validWeightCharacters = /^(?:100(?:\.0)?|\d{1,2}(?:\.\d)?)$/; // 100.0 또는 1~2자리 숫자.소수 첫째짜리 숫자
+
+    if (Number(weight) <= 0) return false;
+
+    return validWeightCharacters.test(weight);
+  };
+
+  const isMixedBreed = (breed: string) => breed === MIXED_BREED;
+
+  return {
+    isValidNameInput,
+    isValidAgeSelect,
+    isValidWeightInput,
+
+    validateName,
+    validateAge,
+    validateWeight,
+    isValidName,
+    isValidAgeRange,
+    isValidGender,
+    isValidWeight,
+    isMixedBreed,
+  };
+};
diff --git a/frontend/src/pages/PetProfile/PetProfileAddition/PetProfileAddition.tsx b/frontend/src/pages/PetProfile/PetProfileAddition/PetProfileAddition.tsx
@@ -4,7 +4,7 @@ import { styled } from 'styled-components';
 import BackBtnIcon from '@/assets/svg/back_btn.svg';
 import Button from '@/components/@common/Button/Button';
 import Template from '@/components/@common/Template';
-import { usePetProfileStep } from '@/hooks/petProfile';
+import { usePetProfileStep } from '@/hooks/petProfile/usePetProfileStep';
 
 const PetProfileAddition = () => {
   const {

diff --git a/frontend/src/pages/PetProfile/PetProfileAddition/PetProfileAgeAddition.tsx b/frontend/src/pages/PetProfile/PetProfileAddition/PetProfileAgeAddition.tsx
@@ -4,7 +4,7 @@ import { styled } from 'styled-components';
 
 import PetAgeSelect from '@/components/PetProfile/PetAgeSelect';
 import { PET_PROFILE_ADDITION_STEP } from '@/constants/petProfile';
-import { usePetProfileAddition } from '@/hooks/petProfile';
+import { usePetProfileAddition } from '@/hooks/petProfile/usePetProfileAddition';
 import { PetAdditionOutletContextProps } from '@/types/petProfile/client';
 
 const PetProfileAgeAddition = () => {

diff --git a/frontend/src/pages/PetProfile/PetProfileAddition/PetProfileBreedAddition.tsx b/frontend/src/pages/PetProfile/PetProfileAddition/PetProfileBreedAddition.tsx
@@ -4,7 +4,7 @@ import { styled } from 'styled-components';
 
 import PetBreedSelect from '@/components/PetProfile/PetBreedSelect';
 import { PET_PROFILE_ADDITION_STEP } from '@/constants/petProfile';
-import { usePetProfileAddition } from '@/hooks/petProfile';
+import { usePetProfileAddition } from '@/hooks/petProfile/usePetProfileAddition';
 import { PetAdditionOutletContextProps } from '@/types/petProfile/client';
 import { getTopicParticle } from '@/utils/getTopicParticle';
 

diff --git a/frontend/src/pages/PetProfile/PetProfileAddition/PetProfileGenderAddition.tsx b/frontend/src/pages/PetProfile/PetProfileAddition/PetProfileGenderAddition.tsx
@@ -4,7 +4,7 @@ import { styled } from 'styled-components';
 
 import GenderRadioInput from '@/components/PetProfile/GenderRadioInput';
 import { GENDERS, PET_PROFILE_ADDITION_STEP } from '@/constants/petProfile';
-import { usePetProfileAddition } from '@/hooks/petProfile';
+import { usePetProfileAddition } from '@/hooks/petProfile/usePetProfileAddition';
 import { PetAdditionOutletContextProps } from '@/types/petProfile/client';
 
 const PetProfileGenderAddition = () => {

diff --git a/frontend/src/pages/PetProfile/PetProfileAddition/PetProfileImageAddition.tsx b/frontend/src/pages/PetProfile/PetProfileAddition/PetProfileImageAddition.tsx
@@ -4,7 +4,7 @@ import { styled } from 'styled-components';
 
 import PetProfileImageUploader from '@/components/PetProfile/PetProfileImageUploader';
 import { PET_PROFILE_ADDITION_STEP } from '@/constants/petProfile';
-import { usePetProfileAddition } from '@/hooks/petProfile';
+import { usePetProfileAddition } from '@/hooks/petProfile/usePetProfileAddition';
 import { PetAdditionOutletContextProps } from '@/types/petProfile/client';
 import { getTopicParticle } from '@/utils/getTopicParticle';
 

diff --git a/frontend/src/pages/PetProfile/PetProfileAddition/PetProfileNameAddition.tsx b/frontend/src/pages/PetProfile/PetProfileAddition/PetProfileNameAddition.tsx
@@ -4,7 +4,7 @@ import { styled } from 'styled-components';
 
 import Input from '@/components/@common/Input/Input';
 import { PET_PROFILE_ADDITION_STEP } from '@/constants/petProfile';
-import { usePetProfileAddition } from '@/hooks/petProfile';
+import { usePetProfileAddition } from '@/hooks/petProfile/usePetProfileAddition';
 import { PetAdditionOutletContextProps } from '@/types/petProfile/client';
 
 const PetProfileNameAddition = () => {

diff --git a/frontend/src/pages/PetProfile/PetProfileAddition/PetProfilePetSizeAddition.tsx b/frontend/src/pages/PetProfile/PetProfileAddition/PetProfilePetSizeAddition.tsx
@@ -4,7 +4,7 @@ import { styled } from 'styled-components';
 
 import Label from '@/components/@common/Label/Label';
 import { PET_PROFILE_ADDITION_STEP, PET_SIZES } from '@/constants/petProfile';
-import { usePetProfileAddition } from '@/hooks/petProfile';
+import { usePetProfileAddition } from '@/hooks/petProfile/usePetProfileAddition';
 import { PetAdditionOutletContextProps } from '@/types/petProfile/client';
 
 const PetProfilePetSizeAddition = () => {

diff --git a/frontend/src/pages/PetProfile/PetProfileAddition/PetProfileWeightAddition.tsx b/frontend/src/pages/PetProfile/PetProfileAddition/PetProfileWeightAddition.tsx
@@ -4,7 +4,7 @@ import { styled } from 'styled-components';
 
 import Input from '@/components/@common/Input/Input';
 import { PET_PROFILE_ADDITION_STEP } from '@/constants/petProfile';
-import { usePetProfileAddition } from '@/hooks/petProfile';
+import { usePetProfileAddition } from '@/hooks/petProfile/usePetProfileAddition';
 import { PetAdditionOutletContextProps } from '@/types/petProfile/client';
 
 const PetProfileWeightAddition = () => {