+
{
);
};
-export default MRegisterForm;
+export default VMRegisterForm;
diff --git a/src/pages/register/VRadioGroup.tsx b/src/pages/register/VRadioGroup.tsx
new file mode 100644
index 00000000..a3102fb8
--- /dev/null
+++ b/src/pages/register/VRadioGroup.tsx
@@ -0,0 +1,151 @@
+import registerState, { RegisterType } from 'recoil/registerState';
+import { useRecoilState } from 'recoil';
+import DetailRadio from './DetailRadio';
+
+export function checkIfAllFilled(data: RegisterType) {
+ const allFieldsFilled = Object.values(data).every((value) => !!value);
+ return allFieldsFilled;
+}
+
+type RadioGroupProps = {
+ handleChange: (event: React.ChangeEvent) => void;
+ handleSexChange: (arg0: string) => void;
+ handleAdoptionStatusChange: (arg0: string) => void;
+ handleNeutralizationStatusChange: (arg0: string) => void;
+};
+
+const VRadioGroup = ({
+ handleChange,
+ handleSexChange,
+ handleAdoptionStatusChange,
+ handleNeutralizationStatusChange,
+}: RadioGroupProps) => {
+ const [petInfo, setPetInfo] = useRecoilState(registerState);
+
+ return (
+
+
+
์ฑ๋ณ
+
+ {
+ handleSexChange('MALE');
+ console.log(petInfo.sex);
+ setPetInfo((prev) => ({
+ ...prev,
+ isComplete: checkIfAllFilled(prev),
+ }));
+ }}
+ onChange={(e) => handleChange(e)}
+ />
+ {
+ handleSexChange('FEMALE');
+ console.log(petInfo.sex);
+ setPetInfo((prev) => ({
+ ...prev,
+ isComplete: checkIfAllFilled(prev),
+ }));
+ }}
+ onChange={(e) => handleChange(e)}
+ />
+
+
+
+
+
+ ์
์ ์ํ
+
+
+ {
+ handleAdoptionStatusChange('YES');
+ setPetInfo((prev) => ({
+ ...prev,
+ isComplete: checkIfAllFilled(prev),
+ }));
+ }}
+ onChange={(e) => handleChange(e)}
+ />
+ {
+ handleAdoptionStatusChange('NO');
+ setPetInfo((prev) => ({
+ ...prev,
+ isComplete: checkIfAllFilled(prev),
+ }));
+ }}
+ onChange={(e) => handleChange(e)}
+ />
+
+
+
+
+ ์ค์ฑํ ์ํ
+
+
+ {
+ handleNeutralizationStatusChange('YES');
+ setPetInfo((prev) => ({
+ ...prev,
+ isComplete: checkIfAllFilled(prev),
+ }));
+ }}
+ onChange={(e) => handleChange(e)}
+ />
+ {
+ handleNeutralizationStatusChange('NO');
+ setPetInfo((prev) => ({
+ ...prev,
+ isComplete: checkIfAllFilled(prev),
+ }));
+ }}
+ onChange={(e) => handleChange(e)}
+ />
+ {
+ handleNeutralizationStatusChange('UNKNOWN');
+ setPetInfo((prev) => ({
+ ...prev,
+ isComplete: checkIfAllFilled(prev),
+ }));
+ }}
+ onChange={(e) => handleChange(e)}
+ />
+
+
+
+ {checked && isValid && (
+
{emailValidText}
+ )}
+ {!checked && !isValid && (
+
{emailInValidText}
+ )}
- {confirm && (
+ {!passwordConfirm && (
๋น๋ฐ๋ฒํธ๊ฐ ์ผ์นํ์ง ์์ต๋๋ค.
)}
}>
+
}>
+
+
+
+
+ );
+};
+
+export default UpdatePage;
diff --git a/src/pages/update/UpdateRegisterForm.tsx b/src/pages/update/UpdateRegisterForm.tsx
new file mode 100644
index 00000000..7e047328
--- /dev/null
+++ b/src/pages/update/UpdateRegisterForm.tsx
@@ -0,0 +1,50 @@
+import { useState } from 'react';
+import { useRecoilState } from 'recoil';
+import registerState, { RegisterType } from 'recoil/registerState';
+import VMRegisterForm from './VUpdateRegisterForm';
+
+interface PetProps {
+ petInfo: RegisterType;
+}
+
+const UpdateRegisterForm = ({ petInfo }: PetProps) => {
+ const [petInfoState, setPetInfo] = useRecoilState(registerState);
+
+ const handleChange = (event: React.SyntheticEvent) => {
+ const target = event.target as HTMLInputElement;
+ const fieldName = target.id;
+ const newValue = target.value;
+
+ const updatedPetInfo = {
+ ...petInfoState,
+ [fieldName]: newValue,
+ };
+
+ // ์ํ ์
๋ฐ์ดํธ
+ setPetInfo(updatedPetInfo);
+
+ // useState์ setํจ์๋ก petInfo๋ฅผ ์
๋ฐ์ดํธํด๋, handleChange๊ฐ ์คํ๋ ๋์ petInfo๋ ์
๋ฐ์ดํธ ์ ์ petInfo๋ฅผ ๊ฐ๋ฆฌํต๋๋ค.
+ // ๋ฐ๋ผ์ tempPetInfo๋ฅผ ๋ง๋ค์ด์ ์ต์ ์ petInfo๋ฅผ ์ฌ์ฉํ๋๋ก ํ์ต๋๋ค.
+ const tempPetInfo = { ...petInfo, [fieldName]: newValue };
+ const allFieldsFilled = Object.values(tempPetInfo).every((value, index) => {
+ // isComplete๋ petInfo์ ๋ชจ๋ ํ๋๊ฐ ์ฑ์์ ธ ์์ ๋ true
+ if (index === Object.values(petInfo).length - 1) {
+ return true;
+ }
+ return !!value;
+ });
+ if (allFieldsFilled) {
+ console.log('๊ฒ์ฌ', petInfo);
+ setPetInfo((prev) => ({ ...prev, isComplete: true }));
+ } else setPetInfo((prev) => ({ ...prev, isComplete: false }));
+ };
+
+ const MRegisterProps = {
+ handleChange,
+ petInfo,
+ };
+
+ return
;
+};
+
+export default UpdateRegisterForm;
diff --git a/src/pages/update/UpdateTemplate.tsx b/src/pages/update/UpdateTemplate.tsx
new file mode 100644
index 00000000..3baf83fc
--- /dev/null
+++ b/src/pages/update/UpdateTemplate.tsx
@@ -0,0 +1,80 @@
+import { useQuery } from '@tanstack/react-query';
+import { getCookie } from 'commons/cookie/cookie';
+import { useEffect, useState } from 'react';
+import { useParams } from 'react-router-dom';
+import { useRecoilState } from 'recoil';
+import registerState from 'recoil/registerState';
+import DayModalInput from 'pages/register/DayModalInput';
+import UpdateHeader from './UpdateHeader';
+import PatchStatusSelectGroup from './PatchStatusSelectGroup';
+import UpdateRegisterForm from './UpdateRegisterForm';
+
+const UpdateTemplate = () => {
+ const params = useParams();
+ const petId = params.id;
+ const cookie = getCookie('loginToken');
+ const [updateState, setUpdateState] = useRecoilState(registerState);
+ const [error, setError] = useState({
+ isError: false,
+ errorMessage: '',
+ });
+
+ // petInfo return
+ const getPetInfo = async () => {
+ const res = await fetch(
+ `${process.env.REACT_APP_URI}/pet/register-info/${petId}`,
+ {
+ method: 'GET',
+ headers: {
+ 'Content-Type': 'application/json',
+ 'Authorization': `Bearer ${cookie}`,
+ },
+ },
+ )
+ .then((response) => {
+ return response.json();
+ })
+ .then((apiData) => {
+ if (apiData.success === false) {
+ throw new Error(apiData.message);
+ }
+ return { ...apiData.response };
+ });
+ return res;
+ };
+
+ const { data, isLoading, isError } = useQuery({
+ queryKey: ['pet-update'],
+ queryFn: () => getPetInfo(),
+ onSuccess: (fetchedData) => {
+ const { profileImageUrl, profileShortFormUrl, ...rest } = fetchedData;
+ setUpdateState({ ...rest, isComplete: true });
+ },
+ suspense: true,
+ });
+
+ // ๋ฐ์ดํฐ ๋ค์ด์ค๋ ๊ฒ ํ์ธ ์ฉ๋
+ useEffect(() => {
+ if (!isLoading && data) {
+ console.log('status: ', updateState);
+ }
+ }, [updateState]);
+
+ if (isError) {
+ return
{error.errorMessage}
;
+ }
+
+ return (
+ <>
+
+
+
+
+
+ );
+};
+
+export default UpdateTemplate;
diff --git a/src/pages/update/VUpdateRegisterForm.tsx b/src/pages/update/VUpdateRegisterForm.tsx
new file mode 100644
index 00000000..ed4e41f6
--- /dev/null
+++ b/src/pages/update/VUpdateRegisterForm.tsx
@@ -0,0 +1,108 @@
+import RadioGroup from 'pages/register/RadioGroup';
+import SelectBox from 'commons/SelectBox';
+import { RegisterType } from 'recoil/registerState';
+import InputGroup from './UpdateInputGroup';
+
+type RegisterProps = {
+ handleChange: (event: React.ChangeEvent
) => void;
+ petInfo: RegisterType;
+};
+
+const VMRegisterForm = ({ handleChange, petInfo }: RegisterProps) => {
+ console.log('dk', petInfo);
+ console.log(petInfo.name);
+ return (
+
+
+
+
+ {
+ handleChange(e);
+ }}
+ value={petInfo.name}
+ />
+
+
+ {
+ handleChange(e);
+ }}
+ value={petInfo.age}
+ />
+
+
+
+
+
+
+
+ {
+ handleChange(e);
+ }}
+ value={petInfo.size}
+ />
+
+
+
+
+ {
+ handleChange(e);
+ }}
+ value={petInfo.weight}
+ />
+
+
+ {
+ handleChange(e);
+ }}
+ value={petInfo.vaccinationStatus}
+ />
+
+
+
+
+ {
+ handleChange(e);
+ }}
+ value={petInfo.description}
+ />
+
+
+