[Fix] 과제, 출결 관련 QA 반영 (#118)

* fix: 과제 리스트 - 간격 * fix: 주차별, 커리큘럼 bar 수정 * fix: 과제 생성, 수정 페이지 타이틀 누락 * fix: 출결번호 오늘날짜만 활성화 * refactor: getIsToday 유틸함수 분리 * fix: 불필요한 base 삭제 * fix: 잘못된 export 수정 * design: 커리큘럼 정렬 맞추기
GDSC-Hongik · Sep 4, 2024 · cf57028 · cf57028
1 parent 93f6c25
commit cf57028
Show file tree

Hide file tree

Showing 5 changed files with 68 additions and 73 deletions.
diff --git a/apps/admin/app/studies/[studyId]/_components/assignment/AssignmentListItem.tsx b/apps/admin/app/studies/[studyId]/_components/assignment/AssignmentListItem.tsx
@@ -1,4 +1,4 @@
-import { cva } from "@styled-system/css";
+import { css } from "@styled-system/css";
 import { Flex } from "@styled-system/jsx";
 import { Table, Text } from "@wow-class/ui";
 import { padWithZero, parseISODate } from "@wow-class/utils";
@@ -30,15 +30,11 @@ const AssignmentListItem = ({
   return (
     <Table>
       <Table.Left style={TableLeftStyle}>
-        <Flex alignItems="center" flex={1} gap="xxs" minWidth="50px">
-          <div
-            className={ThisWeekBarStyle({
-              type: thisWeekAssignment ? "thisWeek" : "notThisWeek",
-            })}
-          />
+        <Flex alignItems="center" gap="xxs" minWidth="50px">
+          {thisWeekAssignment && <div className={ThisWeekBarStyle} />}
           <Text typo="body1">{week}주차</Text>
         </Flex>
-        <Flex direction="column" flex={2} gap="xxs">
+        <Flex direction="column" gap="xxs">
           <Text style={AssignmentTitleStyle} typo="h3">
             {title || "-"}
           </Text>
@@ -58,21 +54,10 @@ const AssignmentListItem = ({
 };
 export default AssignmentListItem;
 
-const ThisWeekBarStyle = cva({
-  base: {
-    width: "4px",
-    height: "18px",
-  },
-  variants: {
-    type: {
-      thisWeek: {
-        backgroundColor: "primary",
-      },
-      notThisWeek: {
-        backgroundColor: "transparent",
-      },
-    },
-  },
+const ThisWeekBarStyle = css({
+  width: "4px",
+  height: "18px",
+  backgroundColor: "primary",
 });
 
 const TableLeftStyle = {

diff --git a/apps/admin/app/studies/[studyId]/_components/attendance/AttendanceItem.tsx b/apps/admin/app/studies/[studyId]/_components/attendance/AttendanceItem.tsx
@@ -3,6 +3,7 @@ import { Text } from "@wow-class/ui";
 import { padWithZero, parseISODate } from "@wow-class/utils";
 import { attendanceStatusMap } from "constants/status/attendanceStatusMap";
 import type { AttendanceApiResponseDto } from "types/dtos/attendance";
+import getIsToday from "utils/getIsToday";
 import Box from "wowds-ui/Box";
 import Tag from "wowds-ui/Tag";
 
@@ -14,14 +15,9 @@ const AttendanceItem = ({
   const { week, deadLine, attendanceNumber } = attendance;
   const { year, month, day, hours, minutes } = parseISODate(deadLine);
 
-  const getIsCurrentWeek = () => {
-    const diffInTime = new Date(deadLine).getTime() - new Date().getTime();
-    const diffInDays = Math.floor(diffInTime / (1000 * 60 * 60 * 24));
-
-    return diffInDays < 7 ? "ONGOING_ATTENDANCE" : "BEFORE_ATTENDANCE";
-  };
-
-  const state = getIsCurrentWeek();
+  const state = getIsToday(deadLine)
+    ? "ONGOING_ATTENDANCE"
+    : "BEFORE_ATTENDANCE";
   const { label, color } = attendanceStatusMap[state];
 
   return (

diff --git a/apps/admin/app/studies/[studyId]/_components/curriculum/CurriculumListItem.tsx b/apps/admin/app/studies/[studyId]/_components/curriculum/CurriculumListItem.tsx
@@ -1,4 +1,4 @@
-import { cva } from "@styled-system/css";
+import { css } from "@styled-system/css";
 import { Flex } from "@styled-system/jsx";
 import { Table, Text } from "@wow-class/ui";
 import { padWithZero, parseISODate } from "@wow-class/utils";
@@ -23,29 +23,23 @@ const CurriculumListItem = ({
 
   return (
     <Table>
-      <Table.Left>
-        <Flex alignItems="center" gap="47px">
-          <Flex alignItems="center" gap="xxs">
-            <div
-              className={ThisWeekBarStyle({
-                type: thisWeekAssignment ? "thisWeek" : "notThisWeek",
-              })}
-            />
-            <Text typo="body1">{week}주차</Text>
-          </Flex>
-          <Flex direction="column" gap="xxs">
-            <Flex alignItems="center" gap="xs">
-              <Text typo="h3">{title || "-"}</Text>
-              {difficulty && (
-                <Tag color={DifficultyMap[difficulty].color} variant="outline">
-                  {DifficultyMap[difficulty].text}
-                </Tag>
-              )}
-            </Flex>
-            <Text color="sub" style={CurriculumDescriptionStyle} typo="body2">
-              {description || "스터디 상세 설명을 작성해주세요."}
-            </Text>
+      <Table.Left style={TableLeftStyle}>
+        <Flex alignItems="center" gap="xxs" minWidth="50px">
+          {thisWeekAssignment && <div className={ThisWeekBarStyle} />}
+          <Text typo="body1">{week}주차</Text>
+        </Flex>
+        <Flex direction="column" gap="xxs">
+          <Flex alignItems="center" gap="xs">
+            <Text typo="h3">{title || "-"}</Text>
+            {difficulty && (
+              <Tag color={DifficultyMap[difficulty].color} variant="outline">
+                {DifficultyMap[difficulty].text}
+              </Tag>
+            )}
           </Flex>
+          <Text color="sub" style={CurriculumDescriptionStyle} typo="body2">
+            {description || "스터디 상세 설명을 작성해주세요."}
+          </Text>
         </Flex>
       </Table.Left>
       <Table.Right>
@@ -57,21 +51,16 @@ const CurriculumListItem = ({
 
 export default CurriculumListItem;
 
-const ThisWeekBarStyle = cva({
-  base: {
-    width: "4px",
-    height: "18px",
-  },
-  variants: {
-    type: {
-      thisWeek: {
-        backgroundColor: "primary",
-      },
-      notThisWeek: {
-        backgroundColor: "transparent",
-      },
-    },
-  },
+const TableLeftStyle = {
+  display: "flex",
+  alignItems: "center",
+  gap: "47px",
+};
+
+const ThisWeekBarStyle = css({
+  width: "4px",
+  height: "18px",
+  backgroundColor: "primary",
 });
 
 const DifficultyMap: Record<

diff --git a/apps/admin/app/studies/assignments/[studyDetailId]/_components/AssignmentHeader.tsx b/apps/admin/app/studies/assignments/[studyDetailId]/_components/AssignmentHeader.tsx
@@ -1,9 +1,10 @@
 "use client";
 
 import { css } from "@styled-system/css";
-import { Flex } from "@styled-system/jsx";
+import { Flex, styled } from "@styled-system/jsx";
 import { Text } from "@wow-class/ui";
 import { studyApi } from "apis/study/studyApi";
+import ItemSeparator from "components/ItemSeparator";
 import { tags } from "constants/tags";
 import { useFormContext } from "react-hook-form";
 import type {
@@ -19,7 +20,7 @@ interface AssignmentHeaderProps {
 }
 
 const AssignmentHeader = ({ assignment, disabled }: AssignmentHeaderProps) => {
-  const { studyDetailId, week, assignmentStatus } = assignment;
+  const { studyDetailId, week, assignmentStatus, studyTitle } = assignment;
   const methods = useFormContext<
     AssignmentApiRequestDto & {
       onOpen: () => void;
@@ -54,8 +55,15 @@ const AssignmentHeader = ({ assignment, disabled }: AssignmentHeaderProps) => {
         <Text color="sub" typo="h3">
           과제 정보를 입력해주세요
         </Text>
-        <Text as="h1" typo="h1">
-          {week}주차 과제
+        <Text
+          as="h1"
+          style={{ display: "flex", alignItems: "center", gap: "0.75rem" }}
+          typo="h1"
+        >
+          {studyTitle} <ItemSeparator height={6} width={6} />
+          <styled.span color="primary">
+            {week}주차 <styled.span color="textBlack">과제</styled.span>
+          </styled.span>
         </Text>
       </Flex>
       <Button

diff --git a/apps/admin/utils/getIsToday.ts b/apps/admin/utils/getIsToday.ts
@@ -0,0 +1,17 @@
+import { parseISODate } from "@wow-class/utils";
+
+const getIsToday = (deadline: string) => {
+  const today = new Date();
+  const deadlineDay = parseISODate(deadline);
+
+  if (
+    today.getFullYear() === deadlineDay.year &&
+    today.getMonth() + 1 === deadlineDay.month &&
+    today.getDate() === deadlineDay.day
+  )
+    return true;
+
+  return false;
+};
+
+export default getIsToday;