fix: 등록하기 페이지 라디오 버튼 클릭 시 isComplete 체크 안 함 문제 해결

onClick을 추가해 라디오 버튼이 클릭되었을 때 필드가 차있는 지 확인하고 isComplete 값을 업데이트 해주도록 구현
Step3-kakao-tech-campus · Oct 13, 2023 · 65d5f55 · 65d5f55
1 parent 6fb6cf3
commit 65d5f55
Show file tree

Hide file tree

Showing 2 changed files with 71 additions and 16 deletions.
diff --git a/src/pages/register/DetailRadio.tsx b/src/pages/register/DetailRadio.tsx
@@ -4,6 +4,7 @@ interface RadioProps {
   value: string;
   selected?: boolean;
   onChange: (e: any) => void;
+  onClick: (e: React.MouseEvent<HTMLInputElement>) => void;
 }
 
 const DetailRadio = ({
@@ -12,6 +13,7 @@ const DetailRadio = ({
   value,
   selected,
   onChange,
+  onClick,
 }: RadioProps) => {
   return (
     <div>
@@ -23,6 +25,7 @@ const DetailRadio = ({
           value={value}
           defaultChecked={selected}
           onChange={onChange}
+          onClick={onClick}
         />
         {label}
       </label>

diff --git a/src/pages/register/RadioGroup.tsx b/src/pages/register/RadioGroup.tsx
@@ -1,40 +1,57 @@
-import registerState from 'recoil/registerState';
+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;
+}
+
 const RadioGroup = () => {
-  const [registerData, setRegisterData] = useRecoilState(registerState);
+  const [registerData, setRegisterData] =
+    useRecoilState<RegisterType>(registerState);
 
   const handleSexChange = (value: string) => {
-    setRegisterData({ ...registerData, sex: value });
+    setRegisterData((prev) => ({ ...prev, sex: value }));
   };
-
   const handleAdoptionStatusChange = (value: string) => {
-    setRegisterData({ ...registerData, adoptionStatus: value });
+    setRegisterData((prev) => ({ ...prev, adoptionStatus: value }));
   };
-
   const handleNeutralizationStatusChange = (value: string) => {
-    setRegisterData({ ...registerData, neutralizationStatus: value });
+    setRegisterData((prev) => ({ ...prev, neutralizationStatus: value }));
   };
-
   return (
     <div className="flex flex-col sm:flex-row sm:gap-20 justify-center">
       <div>
         <h2 className="font-semibold my-3  whitespace-nowrap">성별</h2>
-        <div className="grid grid-cols-2 gap-8 text-sm  sm:whitespace-nowrap">
+        <div className="grid grid-cols-2 gap-8 text-sm  whitespace-nowrap">
           <DetailRadio
             label="남"
             name="sex" // 고유한 name 속성 설정
             value="MALE"
             selected={registerData.sex === 'MALE'}
             onChange={() => handleSexChange('MALE')}
+            onClick={() => {
+              handleSexChange('MALE');
+              setRegisterData((prev) => ({
+                ...prev,
+                isComplete: checkIfAllFilled(prev),
+              }));
+            }}
           />
           <DetailRadio
             label="여"
             name="sex" // 고유한 name 속성 설정
             value="FEMALE"
             selected={registerData.sex === 'FEMALE'}
             onChange={() => handleSexChange('FEMALE')}
+            onClick={() => {
+              handleSexChange('FEMALE');
+              setRegisterData((prev) => ({
+                ...prev,
+                isComplete: checkIfAllFilled(prev),
+              }));
+            }}
           />
         </div>
       </div>
@@ -43,48 +60,83 @@ const RadioGroup = () => {
         <h2 className="font-semibold text-sm my-3 whitespace-nowrap">
           입양 상태
         </h2>
-        <div className="grid grid-cols-2  gap-5 text-sm sm:whitespace-nowrap">
+        <div className="grid grid-cols-2  gap-5 text-sm whitespace-nowrap">
           <DetailRadio
             label="입양"
-            name="adoptionStatus" // 고유한 name 속성 설정
+            name="adoptionStatus"
             value="YES"
             selected={registerData.adoptionStatus === 'YES'}
             onChange={() => handleAdoptionStatusChange('YES')}
+            onClick={() => {
+              handleAdoptionStatusChange('YES');
+              setRegisterData((prev) => ({
+                ...prev,
+                isComplete: checkIfAllFilled(prev),
+              }));
+            }}
           />
           <DetailRadio
             label="미입양"
-            name="adoptionStatus" // 고유한 name 속성 설정
+            name="adoptionStatus"
             value="NO"
             selected={registerData.adoptionStatus === 'NO'}
             onChange={() => handleAdoptionStatusChange('NO')}
+            onClick={() => {
+              handleAdoptionStatusChange('NO');
+              setRegisterData((prev) => ({
+                ...prev,
+                isComplete: checkIfAllFilled(prev),
+              }));
+            }}
           />
         </div>
       </div>
       <div>
         <h2 className="font-semibold text-sm my-3 whitespace-nowrap">
           중성화 상태
         </h2>
-        <div className="grid grid-cols-3 gap-8 text-sm sm:whitespace-nowrap">
+        <div className="grid grid-cols-3 gap-8 text-sm whitespace-nowrap">
           <DetailRadio
             label="했어요"
-            name="neutralizationStatus" // 고유한 name 속성 설정
+            name="neutralizationStatus"
             value="YES"
             selected={registerData.neutralizationStatus === 'YES'}
             onChange={() => handleNeutralizationStatusChange('YES')}
+            onClick={() => {
+              handleNeutralizationStatusChange('YES');
+              setRegisterData((prev) => ({
+                ...prev,
+                isComplete: checkIfAllFilled(prev),
+              }));
+            }}
           />
           <DetailRadio
             label="안했어요"
-            name="neutralizationStatus" // 고유한 name 속성 설정
+            name="neutralizationStatus"
             value="NO"
             selected={registerData.neutralizationStatus === 'NO'}
             onChange={() => handleNeutralizationStatusChange('NO')}
+            onClick={() => {
+              handleNeutralizationStatusChange('NO');
+              setRegisterData((prev) => ({
+                ...prev,
+                isComplete: checkIfAllFilled(prev),
+              }));
+            }}
           />
           <DetailRadio
             label="몰라요"
-            name="neutralizationStatus" // 고유한 name 속성 설정
+            name="neutralizationStatus"
             value="UNKNOWN"
             selected={registerData.neutralizationStatus === 'UNKNOWN'}
             onChange={() => handleNeutralizationStatusChange('UNKNOWN')}
+            onClick={() => {
+              handleNeutralizationStatusChange('UNKNOWN');
+              setRegisterData((prev) => ({
+                ...prev,
+                isComplete: checkIfAllFilled(prev),
+              }));
+            }}
           />
         </div>
       </div>