🐛 Fix: 날짜 선택에 따른 status 변화 수정 완료

donga-it-club · Apr 19, 2024 · 0a9d7fc · 0a9d7fc
1 parent c8f7e29
commit 0a9d7fc
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 29 deletions.
diff --git a/src/api/@types/Retrospectives.ts b/src/api/@types/Retrospectives.ts
@@ -63,7 +63,7 @@ export interface PostRetrospectivesRequest {
   templateId: number;
   status: keyof TStatus;
   thumbnail: string | null;
-  startDate: string;
+  startDate: Date | string;
   description: string;
 }
 

diff --git a/src/components/createRetro/CreateButtonBox.tsx b/src/components/createRetro/CreateButtonBox.tsx
@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
 import { useDisclosure } from '@chakra-ui/react';
+import { TStatus } from '@/api/@types/@asConst';
 import PersonalRetroCreateButton from '@/components/createRetro/PersonalRetroCreateButton';
 import TeamRetroCreateButton from '@/components/createRetro/TeamRetroCreateButton';
 import CreateModal from '@/components/createRetro/modal/CreateModal';
@@ -9,16 +10,19 @@ const CreateButtonBox: React.FC = () => {
   const { isOpen, onOpen, onClose } = useDisclosure();
   const [templateId, setTemplateId] = useState<number | null>(null);
   const [type, setType] = useState<'TEAM' | 'PERSONAL'>('TEAM');
+  const [status, setStatus] = useState<keyof TStatus>('NOT_STARTED');
 
   const handleTeamButtonClick = () => {
     setTemplateId(1);
     setType('TEAM'); // TEAM으로 type 설정
+    setStatus('NOT_STARTED'); // 초기 상태
     onOpen();
   };
 
   const handlePersonalButtonClick = () => {
     setTemplateId(2);
     setType('PERSONAL'); // PERSONAL로 type 설정
+    setStatus('NOT_STARTED'); // 초기 상태
     onOpen();
   };
 
@@ -32,7 +36,7 @@ const CreateButtonBox: React.FC = () => {
           <PersonalRetroCreateButton />
         </S.SpacedButton>
       </S.ButtonListContainer>
-      <CreateModal isOpen={isOpen} onClose={onClose} templateId={templateId} type={type} />
+      <CreateModal isOpen={isOpen} onClose={onClose} templateId={templateId} type={type} status={status} />
     </>
   );
 };

diff --git a/src/components/createRetro/modal/CreateModal.tsx b/src/components/createRetro/modal/CreateModal.tsx
@@ -9,7 +9,7 @@ import {
   ModalCloseButton,
   Button,
 } from '@chakra-ui/react';
-import { Status, TRetrospective } from '@/api/@types/@asConst';
+import { TRetrospective, TStatus } from '@/api/@types/@asConst';
 import { PostRetrospectivesRequest } from '@/api/@types/Retrospectives';
 import postImageToS3 from '@/api/imageApi/postImageToS3';
 import postRetrospective from '@/api/retrospectivesApi/postRetrospective';
@@ -25,19 +25,20 @@ interface CreateModalProps {
   onClose: () => void;
   templateId: number | null;
   type: keyof TRetrospective;
+  status: keyof TStatus;
 }
 
-const CreateModal: React.FC<CreateModalProps> = ({ isOpen, onClose, templateId, type }) => {
+const CreateModal: React.FC<CreateModalProps> = ({ isOpen, onClose, templateId, type, status }) => {
   const size = 'xl';
   const navigate = useNavigate();
   const [requestData, setRequestData] = useState<PostRetrospectivesRequest>({
     title: '',
     type: type,
     userId: 1,
     templateId: templateId || 1,
-    status: Status.NOT_STARTED,
+    status: status,
     thumbnail: null,
-    startDate: '',
+    startDate: new Date(),
     description: '',
   });
 
@@ -46,15 +47,30 @@ const CreateModal: React.FC<CreateModalProps> = ({ isOpen, onClose, templateId,
       ...prevData,
       templateId: templateId || 1, // templateId가 변경될 때마다 업데이트
       type: type,
+      status: status,
     }));
-  }, [templateId, type]);
+  }, [templateId, type, status]);
 
   const handleCreateClick = async () => {
     try {
+      let calculatedStatus: keyof TStatus = 'NOT_STARTED'; // 기본값은 'NOT_STARTED'로 설정
+
+      // startDate 값이 오늘 이전이면 'IN_PROGRESS'로 설정
+      const today = new Date();
+      const startedDate = new Date(requestData.startDate);
+      // console.log(startedDate);
+      if (startedDate <= today) {
+        calculatedStatus = 'IN_PROGRESS';
+      }
+
+      const isoDateString = startedDate.toISOString();
+      // console.log(isoDateString);
+
       // 회고 생성 요청 전송
       const retrospectiveResponse = await postRetrospective({
         ...requestData,
-        status: Status.NOT_STARTED,
+        startDate: isoDateString,
+        status: calculatedStatus, // 계산된 status 값으로 설정
         thumbnail: requestData.thumbnail || null, // thumbnail이 없으면 null을 전송
       });
 
@@ -79,6 +95,11 @@ const CreateModal: React.FC<CreateModalProps> = ({ isOpen, onClose, templateId,
     setRequestData({ ...requestData, templateId: selectedTemplateId });
   };
 
+  const handleStartDateChange = (startDate: Date) => {
+    console.log('startDate:', startDate); // startDate를 콘솔에 출력
+    setRequestData({ ...requestData, startDate }); // startDate 상태 업데이트
+  };
+
   return (
     <Modal isOpen={isOpen} size={size} onClose={onClose}>
       <ModalOverlay />
@@ -95,8 +116,7 @@ const CreateModal: React.FC<CreateModalProps> = ({ isOpen, onClose, templateId,
           <S.RightColumn>
             <TitleInput onChange={title => setRequestData({ ...requestData, title })} />
             <TemplateSelect onChange={handleTemplateChange} defaultTemplateId={requestData.templateId} />
-
-            <StartDateCalendar onDateChange={startDate => setRequestData({ ...requestData, startDate })} />
+            <StartDateCalendar onDateChange={handleStartDateChange} />
           </S.RightColumn>
         </S.CustomModalBody>
         <S.BottomModalBody>

diff --git a/src/components/createRetro/modal/StartDateCalender.tsx b/src/components/createRetro/modal/StartDateCalender.tsx
@@ -1,31 +1,20 @@
-import React, { useState } from 'react';
-import { ko } from 'date-fns/locale/ko';
+import React from 'react';
+import { Input } from '@chakra-ui/react';
 import 'react-datepicker/dist/react-datepicker.css';
-import * as S from '@/styles/createRetro/modal/StartDateCalendar.style';
 import '@/styles/createRetro/modal/Calendar.css';
 
 interface StartDateCalendarProps {
-  onDateChange: (dateString: string) => void;
+  onDateChange: (date: Date) => void;
 }
 
 const StartDateCalendar: React.FC<StartDateCalendarProps> = ({ onDateChange }) => {
-  const [selectedDate, setSelectedDate] = useState(new Date());
-
-  const handleDateChange = (date: Date) => {
-    setSelectedDate(date);
-    const isoDateString = date.toISOString(); // 백엔드 request body에 보낼 날짜 타입
-    onDateChange(isoDateString);
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const dateString = event.target.value; // 사용자가 입력한 날짜 문자열
+    const selectedDate = new Date(dateString); // 문자열을 Date 객체로 변환
+    onDateChange(selectedDate); // 부모 컴포넌트로 전달
   };
 
-  return (
-    <S.DateInput
-      selected={selectedDate}
-      onChange={handleDateChange}
-      locale={ko}
-      dateFormat="yyyy-MM-dd"
-      showPopperArrow={false}
-    />
-  );
+  return <Input placeholder="회고 시작일 선택" size="md" type="date" onChange={handleChange} />;
 };
 
 export default StartDateCalendar;