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

feat: 수정하기 페이지 달력 컴포넌트 추가
Step3-kakao-tech-campus · Oct 14, 2023 · 95aa650 · 95aa650
2 parents 78c1531 + 5171dfe
commit 95aa650
Show file tree

Hide file tree

Showing 7 changed files with 56 additions and 43 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -14,7 +14,11 @@ import SignupPage from 'pages/signUp/SignupPage';
 import UrgentListPage from 'pages/profileList/urgentList/UrgentListPage';
 import UpdatePage from 'pages/update/UpdatePage';
 
-const queryClient = new QueryClient();
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: { refetchOnWindowFocus: false, refetchOnMount: false },
+  },
+});
 
 function App() {
   return (

diff --git a/src/pages/login/VLoginInputForm.tsx b/src/pages/login/VLoginInputForm.tsx
@@ -28,7 +28,7 @@ const VLoginInputForm = ({
         onChange={(e) => {
           handleChange(e);
         }}
-        autocomplete="email"
+        autocomplete="off"
       />
       {isEmailEmpty && <div className="text-red-500">{errorText}</div>}
       <InputGroup
@@ -39,7 +39,7 @@ const VLoginInputForm = ({
         onChange={(e) => {
           handleChange(e);
         }}
-        autocomplete="current-password"
+        autocomplete="off"
       />
       {isPasswordEmpty && (
         <div className="text-red-500">비밀번호를 입력해주세요.</div>

diff --git a/src/pages/register/Calendar.tsx b/src/pages/register/Calendar.tsx
@@ -255,16 +255,16 @@ const Calendar = ({ handleClick }: CalendarProps) => {
       </div>
 
       <table className="flex flex-col gap-2 font-medium">
-        <thead className="grid grid-cols-7 grid-rows-1 text-center">
+        <thead className="grid grid-cols-7 grid-rows-1">
           {dayOfWeek.map((row: string, index: number) => (
-            <tr key={index} className="weeks">
+            <tr key={index} className="weeks mx-auto">
               <td>{row}</td>
             </tr>
           ))}
         </thead>
         <tbody className="h-full grid gap-2">
           {calendarRows.map((row: JSX.Element[], index: number) => (
-            <tr key={index} className="text-center grid grid-cols-7 gap-2">
+            <tr key={index} className="text-center grid grid-cols-7">
               {row}
             </tr>
           ))}

diff --git a/src/pages/register/VDayModalInput.tsx b/src/pages/register/VDayModalInput.tsx
@@ -12,7 +12,7 @@ const VDayModalInput = ({ open, handleClick }: DayModalProps) => {
   const { protectionExpirationDate } = protectionDate;
 
   return (
-    <div className="flex justify-center items-center gap-2">
+    <div className="flex justify-center items-center gap-2 relative">
       <label htmlFor="day-modal" className="text-sm font-semibold">
         안락사 일자
       </label>
@@ -23,10 +23,11 @@ const VDayModalInput = ({ open, handleClick }: DayModalProps) => {
         type="text"
         placeholder="날짜를 선택해주세요."
         onClick={handleClick}
-        defaultValue={protectionExpirationDate}
-        autoComplete="date"
+        value={protectionExpirationDate}
+        autoComplete="off"
+        readOnly
       />
-      <dialog open={open} className="">
+      <dialog open={open} className="absolute top-10 mt-2">
         <Calendar handleClick={handleClick} />
       </dialog>
     </div>

diff --git a/src/pages/signUp/VSignupInputForm.tsx b/src/pages/signUp/VSignupInputForm.tsx
@@ -35,7 +35,7 @@ const VSignupInputForm = ({
           type="text"
           placeholder="이메일을 입력해주세요."
           onChange={handleChange}
-          autocomplete="email"
+          autocomplete="off"
         />
         <button
           type="button" // type을 버튼으로 지정해주면 handleSubmit이 작동하지 않음 -> onClick만 동작
@@ -57,15 +57,15 @@ const VSignupInputForm = ({
         type="password"
         placeholder="비밀번호를 입력해주세요."
         onChange={handleChange}
-        autocomplete="new-password"
+        autocomplete="off"
       />
       <InputGroup
         id="password-confirm"
         name="비밀번호 확인"
         type="password"
         placeholder="비밀번호를 한번 더 입력해주세요."
         onChange={handleChange}
-        autocomplete="new-password"
+        autocomplete="off"
       />
       {!passwordConfirm && (
         <div className="text-red-500">비밀번호가 일치하지 않습니다.</div>
@@ -76,15 +76,15 @@ const VSignupInputForm = ({
         type="text"
         placeholder="보호소 이름을 입력해주세요."
         onChange={handleChange}
-        autocomplete="organization"
+        autocomplete="off"
       />
       <InputGroup
         id="shelter-contact"
         name="보호소 연락처"
         type="text"
         placeholder="보호소에 연락 가능한 연락처를 입력해주세요."
         onChange={handleChange}
-        autocomplete="tel-national"
+        autocomplete="off"
       />
       <AddressInputGroup />
       <button className="bg-brand-color text-white w-full rounded-md p-2">

diff --git a/src/pages/update/PatchStatusSelectGroup.tsx b/src/pages/update/PatchStatusSelectGroup.tsx
@@ -1,7 +1,7 @@
 import StatusScore from 'pages/register/StatusScore';
-import React, { useEffect, useState } from 'react';
-import { useRecoilState } from 'recoil';
-import registerState from 'recoil/registerState';
+import React, { useState } from 'react';
+import { SetterOrUpdater } from 'recoil';
+import { RegisterType } from 'recoil/registerState';
 
 interface PetStatusType {
   intelligence: number;
@@ -13,12 +13,13 @@ interface PetStatusType {
 
 interface PetStatusProps {
   petStatus: PetStatusType;
+  setUpdateState: SetterOrUpdater<RegisterType>;
 }
 
-const PatchStatusSelectGroup = ({ petStatus }: PetStatusProps) => {
-  const [profileStatus, setProfileStatus] = useRecoilState(registerState);
-  const { petPolygonProfileDto } = profileStatus;
-
+const PatchStatusSelectGroup = ({
+  petStatus,
+  setUpdateState,
+}: PetStatusProps) => {
   const { intelligence, affinity, athletic, adaptability, activeness } =
     petStatus;
 
@@ -32,49 +33,49 @@ const PatchStatusSelectGroup = ({ petStatus }: PetStatusProps) => {
     switch (status) {
       case 'intelligence':
         setIntelligenceOption(option);
-        setProfileStatus((prev) => ({
+        setUpdateState((prev) => ({
           ...prev,
-          polygonProfile: {
+          petPolygonProfileDto: {
             ...prev.petPolygonProfileDto,
             intelligence: option,
           },
         }));
         break;
       case 'affinity':
         setAffinityOption(option);
-        setProfileStatus((prev) => ({
+        setUpdateState((prev) => ({
           ...prev,
-          polygonProfile: {
+          petPolygonProfileDto: {
             ...prev.petPolygonProfileDto,
             affinity: option,
           },
         }));
         break;
       case 'athletic':
         setAthleticOption(option);
-        setProfileStatus((prev) => ({
+        setUpdateState((prev) => ({
           ...prev,
-          polygonProfile: {
+          petPolygonProfileDto: {
             ...prev.petPolygonProfileDto,
             athletic: option,
           },
         }));
         break;
       case 'adaptability':
         setAdaptabilityOption(option);
-        setProfileStatus((prev) => ({
+        setUpdateState((prev) => ({
           ...prev,
-          polygonProfile: {
+          petPolygonProfileDto: {
             ...prev.petPolygonProfileDto,
             adaptability: option,
           },
         }));
         break;
       case 'activeness':
         setActivenessOption(option);
-        setProfileStatus((prev) => ({
+        setUpdateState((prev) => ({
           ...prev,
-          polygonProfile: {
+          petPolygonProfileDto: {
             ...prev.petPolygonProfileDto,
             activeness: option,
           },
@@ -85,39 +86,40 @@ const PatchStatusSelectGroup = ({ petStatus }: PetStatusProps) => {
     }
   };
 
-  useEffect(() => {
-    console.log('propsData: ', petStatus);
-  }, []);
+  // 데이터 확인용
+  // useEffect(() => {
+  //   console.log(petStatus);
+  // }, [petStatus]);
 
   return (
     <div>
       <StatusScore
         status={'intelligence'}
-        score={petPolygonProfileDto.intelligence}
+        score={intelligence}
         selectedOption={intelligenceOption}
         handleChange={handleOptionChange}
       />
       <StatusScore
         status={'affinity'}
-        score={petPolygonProfileDto.affinity}
+        score={affinity}
         selectedOption={affinityOption}
         handleChange={handleOptionChange}
       />
       <StatusScore
         status={'athletic'}
-        score={petPolygonProfileDto.athletic}
+        score={athletic}
         selectedOption={athleticOption}
         handleChange={handleOptionChange}
       />
       <StatusScore
         status={'adaptability'}
-        score={petPolygonProfileDto.adaptability}
+        score={adaptability}
         selectedOption={adaptabilityOption}
         handleChange={handleOptionChange}
       />
       <StatusScore
         status={'activeness'}
-        score={petPolygonProfileDto.activeness}
+        score={activeness}
         selectedOption={activenessOption}
         handleChange={handleOptionChange}
       />

diff --git a/src/pages/update/UpdatePage.tsx b/src/pages/update/UpdatePage.tsx
@@ -4,6 +4,7 @@ import { useEffect } from 'react';
 import { useParams } from 'react-router-dom';
 import { useRecoilState } from 'recoil';
 import registerState from 'recoil/registerState';
+import DayModalInput from 'pages/register/DayModalInput';
 import PatchStatusSelectGroup from './PatchStatusSelectGroup';
 
 const UpdatePage = () => {
@@ -41,16 +42,21 @@ const UpdatePage = () => {
     },
   });
 
+  // 데이터 들어오는 것 확인 용도
   useEffect(() => {
     if (!isLoading && data) {
-      // 데이터 들어오는 것 확인 용도
-      console.log('data: ', data);
       console.log('status: ', updateState);
     }
   }, [updateState]);
 
   return !isLoading ? (
-    <PatchStatusSelectGroup petStatus={updateState.petPolygonProfileDto} />
+    <div>
+      <DayModalInput />
+      <PatchStatusSelectGroup
+        petStatus={updateState.petPolygonProfileDto}
+        setUpdateState={setUpdateState}
+      />
+    </div>
   ) : (
     <div>Loading...</div>
   );