refactor: 반려동물 정보 등록, 수정 관련 리팩터링

frontend/src/apis/petProfile.ts

@@ -5,8 +5,8 @@ import {
   GetPetReq,
   GetPetRes,
   GetPetsRes,
-  PostPetProfileReq,
-  PostPetProfileRes,
+  PostPetReq,
+  PostPetRes,
   PutPetReq,
   PutPetRes,
 } from '@/types/petProfile/remote';
@@ -31,8 +31,8 @@ export const getPets = async () => {
   return data;
 };
 
-export const postPetProfile = async (postPetProfileProps: PostPetProfileReq) => {
-  const { data } = await client.post<PostPetProfileRes>('/pets', postPetProfileProps);
+export const postPet = async (postPetProps: PostPetReq) => {
+  const { data } = await client.post<PostPetRes>('/pets', postPetProps);
 
   return data;
 };

frontend/src/components/PetProfile/PetInfoInForm.tsx

@@ -17,7 +17,7 @@ const PetInfoInForm = (petInfoInFormProps: PetInfoInFormProps) => {
   const { previewImage, imageUrl, uploadImage } = useImageUpload();
 
   useEffect(() => {
-    onChangeImage(imageUrl);
+    if (imageUrl) onChangeImage(imageUrl);
   }, [imageUrl]);
 
   return (

frontend/src/pages/PetProfile/PetProfileEdition/PetProfileEdition.stories.tsx → frontend/src/components/PetProfile/PetProfileEditionForm/PetProfileEditionForm.stories.tsx

@@ -6,28 +6,29 @@ import React from 'react';
 import { reactRouterParameters } from 'storybook-addon-react-router-v6';
 import { styled } from 'styled-components';
 
-import PetProfileEdition from './PetProfileEdition';
+import PetProfileProvider from '../../../context/petProfile/PetProfileContext';
+import PetProfileEditionForm from './PetProfileEditionForm';
 
 const meta = {
-  title: 'PetProfile/Edition',
-  component: PetProfileEdition,
+  title: 'PetProfile/EditionForm',
+  component: PetProfileEditionForm,
   decorators: [
     Story => (
-      <FlexBox>
+      <PetProfileProvider>
         <Story />
-      </FlexBox>
+      </PetProfileProvider>
     ),
   ],
 
   parameters: {
     reactRouter: reactRouterParameters({
       location: {
-        pathParams: { petId: '1' },
+        pathParams: { petId: '2' },
       },
       routing: { path: '/pets/:petId/edit' },
     }),
   },
-} satisfies Meta<typeof PetProfileEdition>;
+} satisfies Meta<typeof PetProfileEditionForm>;
 
 export default meta;
 type Story = StoryObj<typeof meta>;
@@ -81,12 +82,3 @@ export const InvalidWeight: Story = {
     expect(weightErrorMessage).toBeVisible();
   },
 };
-
-const FlexBox = styled.div`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-
-  width: 100%;
-  height: auto;
-`;

frontend/src/components/PetProfile/PetProfileEditionForm/PetProfileEditionForm.tsx

@@ -0,0 +1,245 @@
+import { styled } from 'styled-components';
+
+import EditIconLight from '@/assets/svg/edit_icon_light.svg';
+import TrashCanIcon from '@/assets/svg/trash_can_icon.svg';
+import Input from '@/components/@common/Input/Input';
+import Label from '@/components/@common/Label/Label';
+import { PET_ERROR_MESSAGE, PET_SIZES } from '@/constants/petProfile';
+import { usePetProfileEdition } from '@/hooks/petProfile/usePetProfileEdition';
+import { usePetProfileValidation } from '@/hooks/petProfile/usePetProfileValidation';
+
+import PetAgeSelect from '../PetAgeSelect';
+import PetInfoInForm from '../PetInfoInForm';
+
+const PetProfileEditionForm = () => {
+  const { isMixedBreed } = usePetProfileValidation();
+  const {
+    pet,
+    isValidForm,
+    isValidNameInput,
+    isValidAgeSelect,
+    isValidWeightInput,
+    onChangeName,
+    onChangeAge,
+    onChangeWeight,
+    onChangePetSize,
+    onChangeImage,
+    onSubmitNewPetProfile,
+    onClickRemoveButton,
+  } = usePetProfileEdition();
+
+  return (
+    <div>
+      {pet && (
+        <>
+          <FormContainer>
+            <PetInfoWrapper>
+              <PetInfoInForm
+                petItem={{ ...pet, weight: Number(pet.weight) }}
+                onChangeImage={onChangeImage}
+              />
+            </PetInfoWrapper>
+
+            <div>
+              <InputLabel htmlFor="pet-name">이름 입력</InputLabel>
+              <Input
+                id="pet-name"
+                value={pet.name}
+                type="text"
+                required
+                minLength={1}
+                placeholder="여기를 눌러 아이의 이름을 입력해주세요."
+                maxLength={10}
+                isValid
+                onChange={onChangeName}
+                design="underline"
+                fontSize="1.3rem"
+              />
+              <ErrorCaption>{isValidNameInput ? '' : PET_ERROR_MESSAGE.INVALID_NAME}</ErrorCaption>
+            </div>
+            <div>
+              <InputLabel htmlFor="pet-age">나이 선택</InputLabel>
+              <PetAgeSelect id="pet-age" onChange={onChangeAge} initialAge={pet.age} />
+              <ErrorCaption>{isValidAgeSelect ? '' : '나이를 선택해주세요!'} </ErrorCaption>
+            </div>
+            <div>
+              <InputLabel htmlFor="pet-weight">몸무게 입력</InputLabel>
+              <WeightInputContainer>
+                <Input
+                  id="pet-weight"
+                  type="text"
+                  value={pet.weight}
+                  required
+                  minLength={1}
+                  placeholder="예) 7.5"
+                  maxLength={5}
+                  isValid
+                  onChange={onChangeWeight}
+                  design="underline"
+                  fontSize="1.3rem"
+                  inputMode="decimal"
+                />
+                <Kg>kg</Kg>
+              </WeightInputContainer>
+              <ErrorCaption>
+                {isValidWeightInput ? '' : PET_ERROR_MESSAGE.INVALID_WEIGHT}
+              </ErrorCaption>
+            </div>
+            {isMixedBreed(pet.breed) && (
+              <div>
+                <InputLabel htmlFor="pet-size">크기 선택</InputLabel>
+                <PetSizeContainer role="radiogroup" id="pet-size">
+                  {PET_SIZES.map(size => (
+                    <Label
+                      key={size}
+                      role="radio"
+                      text={size}
+                      onClick={() => onChangePetSize(size)}
+                      clicked={pet.petSize === size}
+                    />
+                  ))}
+                </PetSizeContainer>
+              </div>
+            )}
+          </FormContainer>
+
+          <ButtonContainer>
+            <BasicButton
+              type="button"
+              $isEditButton
+              onClick={onSubmitNewPetProfile}
+              disabled={!isValidForm}
+            >
+              <EditIconImage src={EditIconLight} alt="" />
+              수정
+            </BasicButton>
+            <BasicButton
+              type="button"
+              $isEditButton={false}
+              onClick={() => {
+                onClickRemoveButton(pet.id);
+              }}
+            >
+              <img src={TrashCanIcon} alt="" />
+              삭제
+            </BasicButton>
+          </ButtonContainer>
+        </>
+      )}
+    </div>
+  );
+};
+
+export default PetProfileEditionForm;
+
+const FormContainer = styled.form`
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+
+  padding: 2rem;
+`;
+
+const PetInfoWrapper = styled.div`
+  margin-bottom: 2rem;
+`;
+
+const InputLabel = styled.label`
+  display: block;
+
+  margin-bottom: 0.4rem;
+
+  font-size: 1.3rem;
+  font-weight: 500;
+  line-height: 1.7rem;
+  color: ${({ theme }) => theme.color.grey600};
+  letter-spacing: -0.5px;
+`;
+
+const ErrorCaption = styled.p`
+  min-height: 1.7rem;
+  margin-top: 1rem;
+
+  font-size: 1.3rem;
+  font-weight: 500;
+  line-height: 1.7rem;
+  color: ${({ theme }) => theme.color.warning};
+  letter-spacing: -0.5px;
+`;
+
+const WeightInputContainer = styled.div`
+  position: relative;
+`;
+
+const Kg = styled.p`
+  position: absolute;
+  top: 1.2rem;
+  right: 1.2rem;
+
+  font-size: 1.3rem;
+  font-weight: 500;
+  line-height: 1.7rem;
+  color: ${({ theme }) => theme.color.grey600};
+  letter-spacing: -0.5px;
+`;
+
+const PetSizeContainer = styled.div`
+  cursor: pointer;
+
+  display: flex;
+  gap: 0.8rem;
+  align-items: center;
+
+  margin-top: 1.2rem;
+`;
+
+const ButtonContainer = styled.div`
+  position: fixed;
+  bottom: 4rem;
+  left: 0;
+
+  display: flex;
+  gap: 1.6rem;
+
+  width: 100%;
+  padding: 0 2rem;
+`;
+
+const BasicButton = styled.button<{ $isEditButton: boolean }>`
+  cursor: pointer;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  width: ${({ $isEditButton }) => ($isEditButton ? '70%' : '30%')};
+  height: 5.1rem;
+
+  font-size: 1.6rem;
+  font-weight: 700;
+  line-height: 2.4rem;
+  color: ${({ theme }) => theme.color.white};
+  letter-spacing: 0.02rem;
+
+  background-color: ${({ $isEditButton, theme }) =>
+    $isEditButton ? theme.color.primary : '#E73846'};
+  border: none;
+  border-radius: 16px;
+
+  transition: all 100ms ease-in-out;
+
+  &:active {
+    scale: 0.98;
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+
+    background-color: ${({ theme }) => theme.color.grey300};
+  }
+`;
+
+const EditIconImage = styled.img`
+  margin-right: 0.4rem;
+  margin-bottom: 0.2rem;
+`;

frontend/src/components/PetProfile/PetProfileImageUploader.tsx

@@ -2,11 +2,11 @@ import { useEffect } from 'react';
 import { styled } from 'styled-components';
 
 import CameraIcon from '@/assets/svg/camera_icon.svg';
-import { usePetProfileContext } from '@/context/petProfile';
+import { usePetAdditionContext } from '@/context/petProfile/PetAdditionContext';
 import { useImageUpload } from '@/hooks/common/useImageUpload';
 
 const PetProfileImageUploader = () => {
-  const { updatePetProfile } = usePetProfileContext();
+  const { updatePetProfile } = usePetAdditionContext();
   const { previewImage, imageUrl, uploadImage } = useImageUpload();
 
   useEffect(() => {

frontend/src/constants/petProfile.ts

@@ -29,3 +29,8 @@ export const STEP_PATH: Record<number, string> = {
   [PET_PROFILE_ADDITION_STEP.WEIGHT]: PATH.PET_PROFILE_WEIGHT_ADDITION,
   [PET_PROFILE_ADDITION_STEP.IMAGE_FILE]: PATH.PET_PROFILE_IMAGE_FILE_ADDITION,
 } as const;
+
+export const PET_ERROR_MESSAGE = {
+  INVALID_NAME: '아이의 이름은 1~10글자 사이의 한글, 영어, 숫자만 입력 가능합니다.',
+  INVALID_WEIGHT: '몸무게는 0kg초과, 100kg이하 소수점 첫째짜리까지 입력이 가능합니다.',
+} as const;