refactor: 모집 마감일, 리뷰 마감일 string으로 통일하기

woowacourse-teams · Dec 6, 2024 · ed9e32c · ed9e32c
1 parent 3053b7b
commit ed9e32c
Show file tree

Hide file tree

Showing 7 changed files with 42 additions and 54 deletions.
diff --git a/frontend/src/@types/roomInfo.ts b/frontend/src/@types/roomInfo.ts
@@ -11,7 +11,8 @@ export type ParticipationStatus =
 
 export type Role = "BOTH" | "REVIEWER" | "REVIEWEE" | "NONE";
 
-interface BaseRoomInfo {
+export interface BaseRoomInfo {
+  roomId?: number;
   title: string;
   content: string;
   repositoryLink: string;
@@ -21,14 +22,6 @@ interface BaseRoomInfo {
   limitedParticipants: number;
   classification: Classification;
   isPublic: boolean;
-}
-export interface CreateRoomInfo extends BaseRoomInfo {
-  recruitmentDeadline: Date;
-  reviewDeadline: Date;
-}
-
-export interface SubmitRoomInfo extends BaseRoomInfo {
-  roomId?: number;
   recruitmentDeadline: string;
   reviewDeadline: string;
 }
@@ -41,8 +34,6 @@ export interface RoomInfo extends BaseRoomInfo {
   roomStatus: RoomStatus;
   participationStatus: ParticipationStatus;
   memberRole: Role;
-  recruitmentDeadline: string;
-  reviewDeadline: string;
   message: string;
 }
 

diff --git a/frontend/src/apis/rooms.api.ts b/frontend/src/apis/rooms.api.ts
@@ -2,12 +2,12 @@ import apiClient from "./apiClient";
 import { API_ENDPOINTS } from "./endpoints";
 import { ParticipantListInfo } from "@/@types/participantList";
 import {
+  BaseRoomInfo,
   Classification,
   Role,
   RoomInfo,
   RoomListInfo,
   RoomStatus,
-  SubmitRoomInfo,
 } from "@/@types/roomInfo";
 import MESSAGES from "@/constants/message";
 
@@ -80,15 +80,15 @@ export const getRoomDetailInfo = async (id: number): Promise<RoomInfo> => {
   return res;
 };
 
-export const postCreateRoom = async (roomData: SubmitRoomInfo): Promise<void> => {
+export const postCreateRoom = async (roomData: BaseRoomInfo): Promise<void> => {
   return apiClient.post({
     endpoint: API_ENDPOINTS.ROOMS,
     body: roomData,
     errorMessage: MESSAGES.ERROR.POST_CREATE_ROOM,
   });
 };
 
-export const putEditRoom = async (roomData: SubmitRoomInfo): Promise<void> => {
+export const putEditRoom = async (roomData: BaseRoomInfo): Promise<void> => {
   return apiClient.put({
     endpoint: API_ENDPOINTS.ROOMS,
     body: roomData,

diff --git a/frontend/src/components/roomDetailPage/controlButton/ControlButton.tsx b/frontend/src/components/roomDetailPage/controlButton/ControlButton.tsx
@@ -86,9 +86,8 @@ const ControlButton = ({ roomInfo, participationStatus }: ControlButtonProps) =>
             <FocusTrap onEscapeFocusTrap={() => handleToggleDropdown()}>
               <S.DropdownItemWrapper>
                 {dropdownItems.map((item: DropdownItem, index) => (
-                  <>
+                  <React.Fragment key={item.name}>
                     <S.DropdownItem
-                      key={item.name}
                       onClick={() => handleDropdownItemClick(item.action)}
                       tabIndex={0}
                       onKeyDown={(e) => {
@@ -98,7 +97,7 @@ const ControlButton = ({ roomInfo, participationStatus }: ControlButtonProps) =>
                       {item.name}
                     </S.DropdownItem>
                     {index < dropdownItems.length - 1 && <S.Divider />}
-                  </>
+                  </React.Fragment>
                 ))}
               </S.DropdownItemWrapper>
             </FocusTrap>

diff --git a/frontend/src/components/roomForm/RoomFormLayout.tsx b/frontend/src/components/roomForm/RoomFormLayout.tsx
@@ -10,7 +10,7 @@ import ConfirmModal from "@/components/common/modal/confirmModal/ConfirmModal";
 import { Textarea } from "@/components/common/textarea/Textarea";
 import DateTimePicker from "@/components/dateTimePicker/DateTimePicker";
 import * as S from "@/components/roomForm/RoomFormLayout.style";
-import { Classification, CreateRoomInfo, RoomInfo } from "@/@types/roomInfo";
+import { BaseRoomInfo, Classification, RoomInfo } from "@/@types/roomInfo";
 import MESSAGES from "@/constants/message";
 import { ErrorText } from "@/styles/common";
 import { formatCombinedDateTime } from "@/utils/dateFormatter";
@@ -28,7 +28,7 @@ interface RoomFormLayoutProps {
   data?: RoomInfo;
 }
 
-const getInitialFormState = (data?: RoomInfo): CreateRoomInfo => ({
+const getInitialFormState = (data?: RoomInfo): BaseRoomInfo => ({
   title: data?.title ?? "",
   classification: data?.classification ?? ("" as Classification),
   content: data?.content ?? "",
@@ -37,39 +37,33 @@ const getInitialFormState = (data?: RoomInfo): CreateRoomInfo => ({
   keywords: data?.keywords?.filter((keyword) => keyword !== "") ?? [],
   matchingSize: data?.matchingSize ?? 1,
   limitedParticipants: data?.limitedParticipants ?? 1,
-  recruitmentDeadline: data ? new Date(data.recruitmentDeadline) : new Date(),
-  reviewDeadline: data ? new Date(data.reviewDeadline) : new Date(),
+  recruitmentDeadline: data ? data.recruitmentDeadline : formatCombinedDateTime(new Date()),
+  reviewDeadline: data ? data.reviewDeadline : formatCombinedDateTime(new Date()),
   isPublic: data?.isPublic ?? true,
 });
 
 const RoomFormLayout = ({ formType, roomId, data }: RoomFormLayoutProps) => {
   const navigate = useNavigate();
   const [isClickedButton, setIsClickedButton] = useState(false);
-  const [formState, setFormState] = useState<CreateRoomInfo>(() => getInitialFormState(data));
+  const [formState, setFormState] = useState<BaseRoomInfo>(() => getInitialFormState(data));
   const { postCreateRoomMutation, putEditRoomMutation } = useMutateRoom();
   const { isModalOpen, handleOpenModal, handleCloseModal } = useModal();
 
-  const handleInputChange = <K extends keyof CreateRoomInfo>(name: K, value: CreateRoomInfo[K]) => {
+  const handleInputChange = <K extends keyof BaseRoomInfo>(name: K, value: BaseRoomInfo[K]) => {
     setFormState((prevState) => ({
       ...prevState,
       [name]: value,
     }));
   };
 
   const handleConfirm = () => {
-    const formattedFormState = {
-      ...formState,
-      recruitmentDeadline: formatCombinedDateTime(formState.recruitmentDeadline),
-      reviewDeadline: formatCombinedDateTime(formState.reviewDeadline),
-    };
-
     if (formType === "edit" && roomId) {
-      const updatedFormState = { ...formattedFormState, roomId };
+      const updatedFormState = { ...formState, roomId };
       putEditRoomMutation.mutate(updatedFormState, {
         onSuccess: () => navigate(`/rooms/${roomId}`),
       });
     } else {
-      postCreateRoomMutation.mutate(formattedFormState, {
+      postCreateRoomMutation.mutate(formState, {
         onSuccess: () => navigate("/"),
       });
     }
@@ -295,22 +289,24 @@ const RoomFormLayout = ({ formType, roomId, data }: RoomFormLayoutProps) => {
             </S.ContentLabel>
             <S.ContentInput>
               <DateTimePicker
-                selectedDateTime={formState.recruitmentDeadline}
+                selectedDateTime={new Date(formState.recruitmentDeadline)}
                 onDateTimeChange={(newDateTime) => {
-                  handleInputChange("recruitmentDeadline", newDateTime);
-                  if (newDateTime > formState.reviewDeadline) {
-                    const newDate = new Date(newDateTime);
-                    handleInputChange("reviewDeadline", newDate);
+                  const newDateTimeString = formatCombinedDateTime(newDateTime);
+                  handleInputChange("recruitmentDeadline", newDateTimeString);
+
+                  if (newDateTimeString > formState.reviewDeadline) {
+                    handleInputChange("reviewDeadline", newDateTimeString);
                   }
                 }}
                 options={{ isPastDateDisabled: true }}
                 error={
                   isClickedButton &&
-                  validators.recruitmentDeadline(formState.recruitmentDeadline) !== ""
+                  validators.recruitmentDeadline(new Date(formState.recruitmentDeadline)) !== ""
                 }
               />
               <ErrorText>
-                {isClickedButton && validators.recruitmentDeadline(formState.recruitmentDeadline)}
+                {isClickedButton &&
+                  validators.recruitmentDeadline(new Date(formState.recruitmentDeadline))}
               </ErrorText>
             </S.ContentInput>
           </S.RowContainer>
@@ -321,25 +317,27 @@ const RoomFormLayout = ({ formType, roomId, data }: RoomFormLayoutProps) => {
             </S.ContentLabel>
             <S.ContentInput>
               <DateTimePicker
-                selectedDateTime={formState.reviewDeadline}
-                onDateTimeChange={(newDateTime) => handleInputChange("reviewDeadline", newDateTime)}
+                selectedDateTime={new Date(formState.reviewDeadline)}
+                onDateTimeChange={(newDateTime) =>
+                  handleInputChange("reviewDeadline", formatCombinedDateTime(newDateTime))
+                }
                 options={{
                   isPastDateDisabled: true,
-                  disabledBeforeDate: formState.recruitmentDeadline,
+                  disabledBeforeDate: new Date(formState.recruitmentDeadline),
                 }}
                 error={
                   isClickedButton &&
                   validators.reviewDeadline(
-                    formState.reviewDeadline,
-                    formState.recruitmentDeadline,
+                    new Date(formState.reviewDeadline),
+                    new Date(formState.recruitmentDeadline),
                   ) !== ""
                 }
               />
               <ErrorText>
                 {isClickedButton &&
                   validators.reviewDeadline(
-                    formState.reviewDeadline,
-                    formState.recruitmentDeadline,
+                    new Date(formState.reviewDeadline),
+                    new Date(formState.recruitmentDeadline),
                   )}
               </ErrorText>
             </S.ContentInput>

diff --git a/frontend/src/hooks/mutations/useMutateRoom.ts b/frontend/src/hooks/mutations/useMutateRoom.ts
@@ -1,7 +1,7 @@
 import useToast from "../common/useToast";
 import useMutateHandlers from "./useMutateHandlers";
 import { useMutation } from "@tanstack/react-query";
-import { Role, SubmitRoomInfo } from "@/@types/roomInfo";
+import { BaseRoomInfo, Role } from "@/@types/roomInfo";
 import {
   deleteParticipateIn,
   deleteParticipatedRoom,
@@ -16,15 +16,15 @@ const useMutateRoom = () => {
   const { handleMutateError } = useMutateHandlers();
 
   const postCreateRoomMutation = useMutation({
-    mutationFn: (roomData: SubmitRoomInfo) => postCreateRoom(roomData),
+    mutationFn: (roomData: BaseRoomInfo) => postCreateRoom(roomData),
     onSuccess: () => {
       openToast(MESSAGES.SUCCESS.POST_CREATE_ROOM);
     },
     onError: (error) => handleMutateError(error),
   });
 
   const putEditRoomMutation = useMutation({
-    mutationFn: (roomData: SubmitRoomInfo) => putEditRoom(roomData),
+    mutationFn: (roomData: BaseRoomInfo) => putEditRoom(roomData),
     onSuccess: () => {
       openToast(MESSAGES.SUCCESS.PUT_EDIT_ROOM);
     },

diff --git a/frontend/src/utils/dateFormatter.ts b/frontend/src/utils/dateFormatter.ts
@@ -53,7 +53,7 @@ export const formatTime = (date: Date): string => {
 
 // 날짜+시간
 export const formatCombinedDateTime = (date: Date): string => {
-  return `${formatDate(date)} ${formatTime(date)}`;
+  return `${formatDate(date)} ${formatTime(date)}`; // TODO: T로 바꿔야함
 };
 
 export const formatLeftTime = (time: string) => {

diff --git a/frontend/src/utils/roomInputValidator.ts b/frontend/src/utils/roomInputValidator.ts
@@ -1,4 +1,4 @@
-import { CreateRoomInfo } from "@/@types/roomInfo";
+import { BaseRoomInfo } from "@/@types/roomInfo";
 
 export const validators = {
   title(value: string): string {
@@ -118,7 +118,7 @@ const isAfterTime = (value: Date, referenceTime: Date): boolean => {
   return valueWithoutSeconds > referenceWithoutSeconds;
 };
 
-export const validateForm = (formState: CreateRoomInfo): boolean => {
+export const validateForm = (formState: BaseRoomInfo): boolean => {
   const validationResults = {
     title: validators.title(formState.title),
     classification: validators.classification(formState.classification),
@@ -131,10 +131,10 @@ export const validateForm = (formState: CreateRoomInfo): boolean => {
       formState.limitedParticipants,
       formState.matchingSize,
     ),
-    recruitmentDeadline: validators.recruitmentDeadline(formState.recruitmentDeadline),
+    recruitmentDeadline: validators.recruitmentDeadline(new Date(formState.recruitmentDeadline)),
     reviewDeadline: validators.reviewDeadline(
-      formState.reviewDeadline,
-      formState.recruitmentDeadline,
+      new Date(formState.reviewDeadline),
+      new Date(formState.recruitmentDeadline),
     ),
   };