Merge pull request #105 from Step3-kakao-tech-campus/feat/#76

feat: 수정하기 페이지 동물 특성 컴포넌트 구현

src/App.tsx

@@ -12,6 +12,7 @@ import RegisterPage from 'pages/register/RegisterPage';
 import ShelterInfoPage from 'pages/shelterInfo/ShelterInfoPage';
 import SignupPage from 'pages/signUp/SignupPage';
 import UrgentListPage from 'pages/profileList/urgentList/UrgentListPage';
+import UpdatePage from 'pages/update/UpdatePage';
 
 const queryClient = new QueryClient();
 
@@ -31,6 +32,7 @@ function App() {
             <Route path="/login" element={<LoginPage />} />
             <Route path="/signup" element={<SignupPage />} />
             <Route path="/find-shelter" element={<MapPage />} />
+            <Route path="/pet-update/:id" element={<UpdatePage />} />
           </Routes>
         </BrowserRouter>
       </RecoilRoot>

src/pages/login/LoginInputForm.tsx

@@ -58,7 +58,6 @@ const LoginInputForm = () => {
       })
       .then((data) => {
         if (data.success) {
-          // const token = getCookie('loginToken');
           navigate('/');
         }
       });

src/pages/register/RegisterHeader.tsx

@@ -1,4 +1,5 @@
 import { useMutation } from '@tanstack/react-query';
+import { getCookie } from 'commons/cookie/cookie';
 import ModalPortal from 'commons/modals/ModalPortal';
 import RegisterModal, {
   RegisterModalProps,
@@ -8,7 +9,6 @@ import { useNavigate } from 'react-router-dom';
 import { useRecoilValue } from 'recoil';
 import registerState from 'recoil/registerState';
 import ImageVideoInput from './ImageVideoInput';
-import { getCookie } from '../../commons/cookie/cookie';
 
 const RegisterHeader = () => {
   const [selectedImageFile, setSelectedImageFile] = useState(null);
@@ -38,7 +38,7 @@ const RegisterHeader = () => {
       method: 'POST',
       body: formData,
       headers: {
-        Authorization: `Bearer ${loginToken}`,
+        Authorization: `Bearer ${getCookie('loginToken')}`,
       },
     });
     return res.json();
@@ -54,7 +54,7 @@ const RegisterHeader = () => {
     const registerPetDataWithPetPolygonProfileDto = {
       ...restRegisterPetData,
       petPolygonProfileDto: {
-        ...restRegisterPetData.polygonProfile,
+        ...restRegisterPetData.petPolygonProfileDto,
       },
     };
     formData.append(

src/pages/register/StatusScore.tsx

@@ -1,8 +1,8 @@
 interface StatusProps {
   status: string;
   score: number;
-  selectedOption: string;
-  handleChange: (status: string, option: string) => void;
+  selectedOption: number;
+  handleChange: (status: string, option: number) => void;
 }
 
 const Dash = () => {
@@ -21,7 +21,7 @@ const Dash = () => {
 const StatusScore = ({ status, selectedOption, handleChange }: StatusProps) => {
   const getButtonColor = (option: string) => {
     return `appearance-none ${
-      selectedOption !== option
+      String(selectedOption) !== option
         ? 'border-[#C4C4C4] bg-[#C4C4C4]'
         : 'border-brand-color bg-brand-color'
     } border-8 rounded-full w-[50px] h-[50px] cursor-pointer`;
@@ -36,35 +36,35 @@ const StatusScore = ({ status, selectedOption, handleChange }: StatusProps) => {
           type="radio"
           value="1"
           className={getButtonColor('1')}
-          onClick={() => handleChange(status, '1')}
+          onClick={() => handleChange(status, 1)}
         />
         <Dash />
         <input
           type="radio"
           value="2"
           className={getButtonColor('2')}
-          onClick={() => handleChange(status, '2')}
+          onClick={() => handleChange(status, 2)}
         />
         <Dash />
         <input
           type="radio"
           value="3"
           className={getButtonColor('3')}
-          onClick={() => handleChange(status, '3')}
+          onClick={() => handleChange(status, 3)}
         />
         <Dash />
         <input
           type="radio"
           value="4"
           className={getButtonColor('4')}
-          onClick={() => handleChange(status, '4')}
+          onClick={() => handleChange(status, 4)}
         />
         <Dash />
         <input
           type="radio"
           value="5"
           className={getButtonColor('5')}
-          onClick={() => handleChange(status, '5')}
+          onClick={() => handleChange(status, 5)}
         />
         <span className="text-sm font-semibold mx-1">High</span>
       </div>

src/pages/register/StatusSelectGroup.tsx

@@ -5,22 +5,22 @@ import StatusScore from './StatusScore';
 
 const StatusSelectGroup = () => {
   const [profileStatus, setProfileStatus] = useRecoilState(registerState);
-  const { polygonProfile } = profileStatus;
+  const { petPolygonProfileDto } = profileStatus;
 
-  const [intelligenceOption, setIntelligenceOption] = useState('3');
-  const [affinityOption, setAffinityOption] = useState('3');
-  const [athleticOption, setAthleticOption] = useState('3');
-  const [adaptabilityOption, setAdaptabilityOption] = useState('3');
-  const [activenessOption, setActivenessOption] = useState('3');
+  const [intelligenceOption, setIntelligenceOption] = useState(3);
+  const [affinityOption, setAffinityOption] = useState(3);
+  const [athleticOption, setAthleticOption] = useState(3);
+  const [adaptabilityOption, setAdaptabilityOption] = useState(3);
+  const [activenessOption, setActivenessOption] = useState(3);
 
-  const handleOptionChange = (status: string, option: string) => {
+  const handleOptionChange = (status: string, option: number) => {
     switch (status) {
       case 'intelligence':
         setIntelligenceOption(option);
         setProfileStatus((prev) => ({
           ...prev,
           polygonProfile: {
-            ...prev.polygonProfile,
+            ...prev.petPolygonProfileDto,
             intelligence: Number(option),
           },
         }));
@@ -30,7 +30,7 @@ const StatusSelectGroup = () => {
         setProfileStatus((prev) => ({
           ...prev,
           polygonProfile: {
-            ...prev.polygonProfile,
+            ...prev.petPolygonProfileDto,
             affinity: Number(option),
           },
         }));
@@ -40,7 +40,7 @@ const StatusSelectGroup = () => {
         setProfileStatus((prev) => ({
           ...prev,
           polygonProfile: {
-            ...prev.polygonProfile,
+            ...prev.petPolygonProfileDto,
             athletic: Number(option),
           },
         }));
@@ -50,7 +50,7 @@ const StatusSelectGroup = () => {
         setProfileStatus((prev) => ({
           ...prev,
           polygonProfile: {
-            ...prev.polygonProfile,
+            ...prev.petPolygonProfileDto,
             adaptability: Number(option),
           },
         }));
@@ -60,7 +60,7 @@ const StatusSelectGroup = () => {
         setProfileStatus((prev) => ({
           ...prev,
           polygonProfile: {
-            ...prev.polygonProfile,
+            ...prev.petPolygonProfileDto,
             activeness: Number(option),
           },
         }));
@@ -74,31 +74,31 @@ const StatusSelectGroup = () => {
     <div>
       <StatusScore
         status={'intelligence'}
-        score={polygonProfile.intelligence}
+        score={petPolygonProfileDto.intelligence}
         selectedOption={intelligenceOption}
         handleChange={handleOptionChange}
       />
       <StatusScore
         status={'affinity'}
-        score={polygonProfile.affinity}
+        score={petPolygonProfileDto.affinity}
         selectedOption={affinityOption}
         handleChange={handleOptionChange}
       />
       <StatusScore
         status={'athletic'}
-        score={polygonProfile.athletic}
+        score={petPolygonProfileDto.athletic}
         selectedOption={athleticOption}
         handleChange={handleOptionChange}
       />
       <StatusScore
         status={'adaptability'}
-        score={polygonProfile.adaptability}
+        score={petPolygonProfileDto.adaptability}
         selectedOption={adaptabilityOption}
         handleChange={handleOptionChange}
       />
       <StatusScore
         status={'activeness'}
-        score={polygonProfile.activeness}
+        score={petPolygonProfileDto.activeness}
         selectedOption={activenessOption}
         handleChange={handleOptionChange}
       />

src/pages/update/PatchStatusSelectGroup.tsx

@@ -0,0 +1,128 @@
+import StatusScore from 'pages/register/StatusScore';
+import React, { useEffect, useState } from 'react';
+import { useRecoilState } from 'recoil';
+import registerState from 'recoil/registerState';
+
+interface PetStatusType {
+  intelligence: number;
+  affinity: number;
+  athletic: number;
+  adaptability: number;
+  activeness: number;
+}
+
+interface PetStatusProps {
+  petStatus: PetStatusType;
+}
+
+const PatchStatusSelectGroup = ({ petStatus }: PetStatusProps) => {
+  const [profileStatus, setProfileStatus] = useRecoilState(registerState);
+  const { petPolygonProfileDto } = profileStatus;
+
+  const { intelligence, affinity, athletic, adaptability, activeness } =
+    petStatus;
+
+  const [intelligenceOption, setIntelligenceOption] = useState(intelligence);
+  const [affinityOption, setAffinityOption] = useState(affinity);
+  const [athleticOption, setAthleticOption] = useState(athletic);
+  const [adaptabilityOption, setAdaptabilityOption] = useState(adaptability);
+  const [activenessOption, setActivenessOption] = useState(activeness);
+
+  const handleOptionChange = (status: string, option: number) => {
+    switch (status) {
+      case 'intelligence':
+        setIntelligenceOption(option);
+        setProfileStatus((prev) => ({
+          ...prev,
+          polygonProfile: {
+            ...prev.petPolygonProfileDto,
+            intelligence: option,
+          },
+        }));
+        break;
+      case 'affinity':
+        setAffinityOption(option);
+        setProfileStatus((prev) => ({
+          ...prev,
+          polygonProfile: {
+            ...prev.petPolygonProfileDto,
+            affinity: option,
+          },
+        }));
+        break;
+      case 'athletic':
+        setAthleticOption(option);
+        setProfileStatus((prev) => ({
+          ...prev,
+          polygonProfile: {
+            ...prev.petPolygonProfileDto,
+            athletic: option,
+          },
+        }));
+        break;
+      case 'adaptability':
+        setAdaptabilityOption(option);
+        setProfileStatus((prev) => ({
+          ...prev,
+          polygonProfile: {
+            ...prev.petPolygonProfileDto,
+            adaptability: option,
+          },
+        }));
+        break;
+      case 'activeness':
+        setActivenessOption(option);
+        setProfileStatus((prev) => ({
+          ...prev,
+          polygonProfile: {
+            ...prev.petPolygonProfileDto,
+            activeness: option,
+          },
+        }));
+        break;
+      default:
+        break;
+    }
+  };
+
+  useEffect(() => {
+    console.log('propsData: ', petStatus);
+  }, []);
+
+  return (
+    <div>
+      <StatusScore
+        status={'intelligence'}
+        score={petPolygonProfileDto.intelligence}
+        selectedOption={intelligenceOption}
+        handleChange={handleOptionChange}
+      />
+      <StatusScore
+        status={'affinity'}
+        score={petPolygonProfileDto.affinity}
+        selectedOption={affinityOption}
+        handleChange={handleOptionChange}
+      />
+      <StatusScore
+        status={'athletic'}
+        score={petPolygonProfileDto.athletic}
+        selectedOption={athleticOption}
+        handleChange={handleOptionChange}
+      />
+      <StatusScore
+        status={'adaptability'}
+        score={petPolygonProfileDto.adaptability}
+        selectedOption={adaptabilityOption}
+        handleChange={handleOptionChange}
+      />
+      <StatusScore
+        status={'activeness'}
+        score={petPolygonProfileDto.activeness}
+        selectedOption={activenessOption}
+        handleChange={handleOptionChange}
+      />
+    </div>
+  );
+};
+
+export default PatchStatusSelectGroup;