diff --git a/src/api/@types/Retrospectives.ts b/src/api/@types/Retrospectives.ts index 0629d09..59d5954 100644 --- 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 index 466ade1..7bb88a7 100644 --- 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(null); const [type, setType] = useState<'TEAM' | 'PERSONAL'>('TEAM'); + const [status, setStatus] = useState('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 = () => { - + ); }; diff --git a/src/components/createRetro/modal/CreateModal.tsx b/src/components/createRetro/modal/CreateModal.tsx index 5db3192..0cd91b5 100644 --- 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,9 +25,10 @@ interface CreateModalProps { onClose: () => void; templateId: number | null; type: keyof TRetrospective; + status: keyof TStatus; } -const CreateModal: React.FC = ({ isOpen, onClose, templateId, type }) => { +const CreateModal: React.FC = ({ isOpen, onClose, templateId, type, status }) => { const size = 'xl'; const navigate = useNavigate(); const [requestData, setRequestData] = useState({ @@ -35,9 +36,9 @@ const CreateModal: React.FC = ({ isOpen, onClose, templateId, 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 = ({ 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 = ({ isOpen, onClose, templateId, setRequestData({ ...requestData, templateId: selectedTemplateId }); }; + const handleStartDateChange = (startDate: Date) => { + console.log('startDate:', startDate); // startDate를 콘솔에 출력 + setRequestData({ ...requestData, startDate }); // startDate 상태 업데이트 + }; + return ( @@ -95,8 +116,7 @@ const CreateModal: React.FC = ({ isOpen, onClose, templateId, setRequestData({ ...requestData, title })} /> - - setRequestData({ ...requestData, startDate })} /> + diff --git a/src/components/createRetro/modal/StartDateCalender.tsx b/src/components/createRetro/modal/StartDateCalender.tsx index 76e482a..ed83313 100644 --- 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 = ({ 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) => { + const dateString = event.target.value; // 사용자가 입력한 날짜 문자열 + const selectedDate = new Date(dateString); // 문자열을 Date 객체로 변환 + onDateChange(selectedDate); // 부모 컴포넌트로 전달 }; - return ( - - ); + return ; }; export default StartDateCalendar;