fix: 과제 스터디의 경우 시간 - 보여주도록 수정 (#82)

Author: hamo-o

apps/client/app/(afterLogin)/study-apply/_components/StudyItem.tsx

@@ -8,6 +8,7 @@ import Link from "next/link";
 import type { ComponentProps } from "react";
 import type { StudyList } from "types/dtos/applyStudy";
 import type { StudyType } from "types/entities/common/study";
+import type { Time } from "types/entities/common/time";
 import Button from "wowds-ui/Button";
 import Tag from "wowds-ui/Tag";
 interface StudyItemProps {
@@ -24,18 +25,25 @@ const StudyItem = ({ study, appliedStudyId }: StudyItemProps) => {
     mentorName,
     studyType,
     dayOfWeek,
-    startTime: { hour: startTimeHour, minute: startTimeMinute },
-    endTime: { hour: endTimeHour, minute: endTimeMinute },
+    startTime,
+    endTime,
     openingDate: openingDateString,
     applicationEndDate: endDateString,
     totalWeek,
   } = study;
 
   const openingDate = parseISODate(openingDateString);
   const endDate = parseISODate(endDateString);
-  const studyTime = `${dayToKorean[dayOfWeek.toUpperCase()]} ${startTimeHour}:${padWithZero(startTimeMinute)} - ${
-    endTimeHour
-  }:${padWithZero(endTimeMinute)}`;
+
+  const formatTime = (startTime: Time, endTime: Time) => {
+    const { hour: startTimeHour, minute: startTimeMinute } = startTime;
+    const { hour: endTimeHour, minute: endTimeMinute } = endTime;
+
+    return `${dayToKorean[dayOfWeek.toUpperCase()]} ${startTimeHour}:${padWithZero(startTimeMinute)} - ${
+      endTimeHour
+    }:${padWithZero(endTimeMinute)}`;
+  };
+  const studyTime = startTime && endTime ? formatTime(startTime, endTime) : "-";
 
   const isApplicable = appliedStudyId === null;
   const isCancelable = appliedStudyId === studyId;
@@ -56,7 +64,12 @@ const StudyItem = ({ study, appliedStudyId }: StudyItemProps) => {
         </Link>
       </Flex>
       <Text className={textCellStyle}>{mentorName}</Text>
-      <Text className={textCellStyle}>{studyTime}</Text>
+      <Text
+        className={textCellStyle}
+        style={{ width: "11rem", textAlign: "center" }}
+      >
+        {studyTime}
+      </Text>
       <Text className={textCellStyle}>{totalWeek}주 코스</Text>
       <Flex direction="column" textAlign="center">
         <Text className={textCellStyle}>

apps/client/types/dtos/applyStudy.ts

@@ -9,8 +9,8 @@ export interface StudyList {
   introduction: string;
   mentorName: string;
   dayOfWeek: DayOfWeekType;
-  startTime: Time;
-  endTime: Time;
+  startTime: Time | null;
+  endTime: Time | null;
   totalWeek: number;
   openingDate: string;
   applicationEndDate: string;