[Chore] 클라이언트 나의 스터디 페이지 및 자잘한 QA 사항 반영

apps/client/app/(afterLogin)/my-study/_components/AssignmentStatusBox.tsx

@@ -1,7 +1,7 @@
 import { css } from "@styled-system/css";
 import { Flex } from "@styled-system/jsx";
 import { Text } from "@wow-class/ui";
-import { parseISODate } from "@wow-class/utils";
+import { padWithZero, parseISODate } from "@wow-class/utils";
 import { routePath } from "constants/routePath";
 import Link from "next/link";
 import type { ComponentProps } from "react";
@@ -28,7 +28,7 @@ const AssignmentStatusBox = ({
 }: AssignmentStatusBoxProps) => {
   const { year, month, day, hours, minutes } = parseISODate(deadLine);
 
-  const attendanceDeadline = `${year}년 ${month}월 ${day}일 ${hours}:${minutes}까지`;
+  const attendanceDeadline = `${year}년 ${month}월 ${day}일 ${padWithZero(hours)}:${padWithZero(minutes)}까지`;
   const {
     label: assignmentSubmissionStatusLabel = "",
     color: assignmentSubmissionStatusColor,

apps/client/app/(afterLogin)/my-study/_components/DailyTaskItem.tsx

@@ -0,0 +1,40 @@
+import type { DailyTaskDto } from "types/dtos/myStudy";
+import type { DailyTaskType } from "types/entities/myStudy";
+
+import { AssignmentStatusBox, AttendanceStatusBox } from ".";
+
+const DailyTaskItem = ({
+  dailyTask,
+  index,
+}: {
+  dailyTask: DailyTaskDto<DailyTaskType>;
+  index: number;
+}) => {
+  const {
+    todoType,
+    week,
+    deadLine,
+    attendanceStatus,
+    assignmentTitle,
+    assignmentSubmissionStatus,
+  } = dailyTask;
+
+  return todoType === "ATTENDANCE" ? (
+    <AttendanceStatusBox
+      attendanceStatus={attendanceStatus || "NOT_ATTENDED"}
+      deadLine={deadLine}
+      key={index}
+      week={week}
+    />
+  ) : (
+    <AssignmentStatusBox
+      assignmentSubmissionStatus={assignmentSubmissionStatus || "SUCCESS"}
+      deadLine={deadLine}
+      key={index}
+      name={assignmentTitle || ""}
+      week={week}
+    />
+  );
+};
+
+export default DailyTaskItem;

apps/client/app/(afterLogin)/my-study/_components/DailyTasks.tsx

@@ -1,11 +1,8 @@
 import { Flex } from "@styled-system/jsx";
 import { Text } from "@wow-class/ui";
 import { myStudyApi } from "apis/myStudyApi";
-import type { DailyTaskDto } from "types/dtos/myStudy";
-import type { DailyTaskType } from "types/entities/myStudy";
 
-import { AttendanceStatusBox, DailyTaskCarousel } from ".";
-import AssignmentStatusBox from "./AssignmentStatusBox";
+import { DailyTaskCarousel, DailyTaskItem } from ".";
 
 const DailyTasks = async () => {
   const myOngoingStudyData = await myStudyApi.getMyOngoingStudyInfo();
@@ -36,38 +33,4 @@ const DailyTasks = async () => {
   );
 };
 
-const DailyTaskItem = ({
-  dailyTask,
-  index,
-}: {
-  dailyTask: DailyTaskDto<DailyTaskType>;
-  index: number;
-}) => {
-  const {
-    todoType,
-    week,
-    deadLine,
-    attendanceStatus,
-    assignmentTitle,
-    assignmentSubmissionStatus,
-  } = dailyTask;
-
-  return todoType === "ATTENDANCE" ? (
-    <AttendanceStatusBox
-      attendanceStatus={attendanceStatus || "NOT_ATTENDED"}
-      deadLine={deadLine}
-      key={index}
-      week={week}
-    />
-  ) : (
-    <AssignmentStatusBox
-      assignmentSubmissionStatus={assignmentSubmissionStatus || "SUCCESS"}
-      deadLine={deadLine}
-      key={index}
-      name={assignmentTitle || ""}
-      week={week}
-    />
-  );
-};
-
 export default DailyTasks;

apps/client/app/(afterLogin)/my-study/_components/EmptyStudy.tsx

@@ -8,8 +8,8 @@ const EmptyStudy = () => {
       alignItems="center"
       direction="column"
       gap="xl"
-      height="100%"
       justifyContent="center"
+      minHeight="calc(100vh - 108px)"
     >
       <Image
         alt="empty-study"

apps/client/app/(afterLogin)/my-study/_components/StudyCurriculum.tsx

@@ -54,6 +54,8 @@ const StudyCurriculum = async () => {
                 ? "제출한 과제 확인"
                 : "과제 제출하기";
             const isCurrentWeek = getIsCurrentWeek(startDate, endDate);
+            const buttonDisabled =
+              assignmentSubmissionStatus === "FAILURE" || !isCurrentWeek;
 
             return (
               <Table key={index}>
@@ -105,7 +107,7 @@ const StudyCurriculum = async () => {
                   <Button
                     aria-label="check-submitted-assignment"
                     asProp={Link}
-                    disabled={assignmentSubmissionStatus === "FAILURE"}
+                    disabled={buttonDisabled}
                     href={submissionLink || ""}
                     size="sm"
                     style={assignmentButtonStyle}

apps/client/app/(afterLogin)/my-study/_components/index.ts

@@ -1,6 +1,7 @@
 export { default as AssignmentStatusBox } from "./AssignmentStatusBox";
 export { default as AttendanceStatusBox } from "./AttendanceStatusBox";
 export { default as DailyTaskCarousel } from "./DailyTaskCarousel";
+export { default as DailyTaskItem } from "./DailyTaskItem";
 export { default as DailyTasks } from "./DailyTasks";
 export { default as EmptyStudy } from "./EmptyStudy";
 export { default as Header } from "./Header";

apps/client/app/(afterLogin)/my-study/layout.tsx

@@ -23,5 +23,5 @@ const Layout = ({
 export default Layout;
 
 const layoutContainerStyle = css({
-  height: "100%",
+  minHeight: "calc(100vh - 108px)",
 });

package.json

@@ -46,6 +46,6 @@
     "clsx": "^2.1.1",
     "wowds-icons": "^0.1.3",
     "wowds-tokens": "^0.1.1",
-    "wowds-ui": "^0.1.14"
+    "wowds-ui": "^0.1.15"
   }
 }

packages/utils/src/formatDate.ts

@@ -9,12 +9,12 @@ export const parseISODate = (dateString: string) => {
   const date = new Date(dateString);
 
   return {
-    year: date.getUTCFullYear(),
-    month: date.getUTCMonth() + 1,
-    day: date.getUTCDate(),
-    hours: date.getUTCHours(),
-    minutes: date.getUTCMinutes(),
-    seconds: date.getUTCSeconds(),
+    year: date.getFullYear(),
+    month: date.getMonth() + 1,
+    day: date.getDate(),
+    hours: date.getHours(),
+    minutes: date.getMinutes(),
+    seconds: date.getSeconds(),
   };
 };