feat: api 에 헤더 삭제 UI 수정

GDSC-Hongik · Aug 19, 2024 · 05a9232 · 05a9232
1 parent 829635e
commit 05a9232
Show file tree

Hide file tree

Showing 9 changed files with 115 additions and 87 deletions.
diff --git a/apps/client/apis/studyDetailApi.ts b/apps/client/apis/studyDetailApi.ts
@@ -9,9 +9,6 @@ export const studyDetailApi = {
       `${apiPath.studyDetail}/dashboard?studyId=${studyId}`,
       {
         next: { tags: [tags.studyDetailDashboard] },
-        headers: {
-          Authorization: `Bearer ${process.env.DEV_AUTH_TOKEN}`,
-        },
       }
     );
 

diff --git a/apps/client/apis/studyHistoryApi.ts b/apps/client/apis/studyHistoryApi.ts
@@ -10,9 +10,6 @@ export const studyHistoryApi = {
       {
         next: { tags: [tags.studyHistory] },
         cache: "force-cache",
-        headers: {
-          Authorization: `Bearer ${process.env.DEV_AUTH_TOKEN}`,
-        },
       }
     );
 
@@ -23,11 +20,6 @@ export const studyHistoryApi = {
       `${apiPath.studyHistory}/${studyHistoryId}/repository`,
       {
         repositoryLink,
-      },
-      {
-        headers: {
-          Authorization: `Bearer ${process.env.NEXT_PUBLIC_DEV_AUTH_TOKEN}`,
-        },
       }
     );
 

diff --git a/apps/client/app/(afterLogin)/my-study/my-homework/_components/HomeworkBoxWithLinkEdit.tsx b/apps/client/app/(afterLogin)/my-study/my-homework/_components/HomeworkBoxWithLinkEdit.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import { Space, Text } from "@wow-class/ui";
+import { padWithZero, parseDate } from "@wow-class/utils";
 import { tags } from "constants/tags";
 import { revalidateTag } from "next/cache";
 import type { SubmittableAssignment } from "types/dtos/study-detail-dashboard";
@@ -9,64 +10,84 @@ import Box from "wowds-ui/Box";
 import Button from "wowds-ui/Button";
 import TextButton from "wowds-ui/TextButton";
 
-interface HomeworkOverviewBoxProps {
+interface HomeworkBoxWithLinkEditProps {
   assignments: SubmittableAssignment[];
   repositoryLink: string;
 }
 export const HomeworkBoxWithLinkEdit = ({
   assignments,
   repositoryLink,
-}: HomeworkOverviewBoxProps) => {
+}: HomeworkBoxWithLinkEditProps) => {
   const handleClickSubmissionComplete = async () => {
     revalidateTag(tags.studyDetailDashboard);
   };
+
+  const isButtonDisabled = !repositoryLink;
   return (
     <>
-      {assignments.map((assignment) => (
-        <Box
-          key={assignment.studyDetailId}
-          text={
-            <>
-              <Text color="primary" typo="label2">
-                {assignment.week}주차
-              </Text>
-              <Space height={16} />
-              <Text as="h2" typo="h2">
-                {assignment.title}
-              </Text>
-              <TextButton
-                as="a"
-                href={assignment.descriptionLink}
-                style={{ paddingLeft: "0px", width: "fit-content" }}
-                text="과제 명세 확인"
-              />
-              <Space height="xs" />
-              <Text color="sub">종료 일시 : {assignment.deadline}</Text>
+      {assignments.map(
+        ({
+          studyDetailId,
+          week,
+          title,
+          deadline,
+          descriptionLink,
+          submissionLink,
+        }) => {
+          const { year, month, day, hours, minutes } = parseDate(deadline);
+
+          const deadlineText = `종료일시: ${year}년 ${month}월 ${day}일 ${padWithZero(
+            hours
+          )}:${padWithZero(minutes)}까지`;
+          return (
+            <Box
+              key={studyDetailId}
+              text={
+                <>
+                  <Text color="primary" typo="label2">
+                    {week}주차
+                  </Text>
+                  <Space height={16} />
+                  <Text as="h2" typo="h2">
+                    {title}
+                  </Text>
+                  <TextButton
+                    as="a"
+                    href={descriptionLink}
+                    style={{ paddingLeft: "0px", width: "fit-content" }}
+                    text="과제 명세 확인"
+                  />
+                  <Space height="xs" />
+                  <Text color="sub">{deadlineText}</Text>
 
-              <Space height={26} />
-              <Button
-                as="a"
-                disabled={!repositoryLink}
-                href={assignment.submissionLink}
-                icon={<Link stroke="primary" />}
-                style={{ maxWidth: "100%" }}
-                variant="outline"
-              >
-                제출하러 가기
-              </Button>
-              <Space height={8} />
-              <Button
-                disabled={!repositoryLink}
-                icon={<Reload />}
-                style={{ maxWidth: "100%" }}
-                onClick={handleClickSubmissionComplete}
-              >
-                제출 완료
-              </Button>
-            </>
-          }
-        />
-      ))}
+                  <Space height={26} />
+                  <Button
+                    as="a"
+                    disabled={isButtonDisabled}
+                    href={submissionLink}
+                    style={{ maxWidth: "100%" }}
+                    variant="outline"
+                    icon={
+                      <Link stroke={isButtonDisabled ? "mono100" : "primary"} />
+                    }
+                  >
+                    제출하러 가기
+                  </Button>
+                  <Space height={8} />
+                  <Button
+                    disabled={isButtonDisabled}
+                    icon={<Reload />}
+                    style={{ maxWidth: "100%" }}
+                    onClick={handleClickSubmissionComplete}
+                  >
+                    제출 완료
+                  </Button>
+                </>
+              }
+            />
+          );
+        }
+      )}
     </>
   );
 };
diff --git a/...app/(afterLogin)/my-study/my-homework/_components/HomeworkHistory/HomeworkHistoryItem.tsx b/...app/(afterLogin)/my-study/my-homework/_components/HomeworkHistory/HomeworkHistoryItem.tsx
@@ -3,6 +3,7 @@ import { Space, Table, Text } from "@wow-class/ui";
 import { padWithZero, parseDate } from "@wow-class/utils";
 import type { ComponentProps } from "react";
 import type { AssignmentHistoryDto } from "types/dtos/study-history";
+import type { AssignmentSubmissionStatusType } from "types/entities/assignment";
 import Button from "wowds-ui/Button";
 import Tag from "wowds-ui/Tag";
 import TextButton from "wowds-ui/TextButton";
@@ -13,7 +14,6 @@ interface HomeworkHistoryItemProps {
 
 export const HomeworkHistoryItem = ({ history }: HomeworkHistoryItemProps) => {
   const {
-    assignmentHistoryId,
     week,
     deadline,
     title,
@@ -22,14 +22,14 @@ export const HomeworkHistoryItem = ({ history }: HomeworkHistoryItemProps) => {
     submissionLink,
   } = history;
 
-  const deadlineDate = parseDate(deadline);
+  const { year, month, day, hours, minutes } = parseDate(deadline);
 
-  const deadlineText = `종료: ${deadlineDate.year}년 ${deadlineDate.month}월 ${deadlineDate.day}일 ${padWithZero(
-    deadlineDate.hours
-  )}:${padWithZero(deadlineDate.minutes)}`;
+  const deadlineText = `종료: ${year}년 ${month}월 ${day}일 ${padWithZero(
+    hours
+  )}:${padWithZero(minutes)}`;
 
   return (
-    <Table key={assignmentHistoryId}>
+    <Table>
       <Table.Left>
         <Text as="h3" typo="h3">
           {week}주차
@@ -52,10 +52,10 @@ export const HomeworkHistoryItem = ({ history }: HomeworkHistoryItemProps) => {
         </Flex>
         <styled.div paddingX="32px">
           <Tag
-            color={statusMapping[assignmentSubmissionStatus].color}
+            color={homeworkSubmissionMap[assignmentSubmissionStatus].color}
             variant="solid2"
           >
-            {statusMapping[assignmentSubmissionStatus].message}
+            {homeworkSubmissionMap[assignmentSubmissionStatus].message}
           </Tag>
         </styled.div>
         <Flex
@@ -77,8 +77,8 @@ export const HomeworkHistoryItem = ({ history }: HomeworkHistoryItemProps) => {
   );
 };
 
-const statusMapping: Record<
-  AssignmentHistoryDto["assignmentSubmissionStatus"],
+const homeworkSubmissionMap: Record<
+  AssignmentSubmissionStatusType,
   { message: string; color: ComponentProps<typeof Tag>["color"] }
 > = {
   FAIL: {

diff --git a/apps/client/app/(afterLogin)/my-study/my-homework/_components/HomeworkHistory/index.tsx b/apps/client/app/(afterLogin)/my-study/my-homework/_components/HomeworkHistory/index.tsx
@@ -1,7 +1,7 @@
+import { Flex } from "@styled-system/jsx";
 import { Space, Text } from "@wow-class/ui";
 import Image from "next/image";
 
-import emptyImageUrl from "../../../../../../public/images/empty-history.png";
 import { history } from "../mockData";
 import { HomeworkHistoryItem } from "./HomeworkHistoryItem";
 
@@ -11,22 +11,35 @@ export const HomeworkHistory = async () => {
 
   return (
     <>
-      <Text as="h2" typo="h2">
-        과제 히스토리
-      </Text>
-      <Text color="sub" typo="body1">
-        지난 과제의 제출 내역을 확인해요.
-      </Text>
-      <Space height={24} />
-      {studyHistories ? (
-        studyHistories.map((history) => (
-          <HomeworkHistoryItem
-            history={history}
-            key={history.assignmentHistoryId}
-          />
-        ))
+      {studyHistories.length ? (
+        <>
+          <Text as="h2" typo="h2">
+            과제 히스토리
+          </Text>
+          <Text color="sub" typo="body1">
+            지난 과제의 제출 내역을 확인해요.
+          </Text>
+          {studyHistories.map((history) => (
+            <HomeworkHistoryItem
+              history={history}
+              key={history.assignmentHistoryId}
+            />
+          ))}
+        </>
       ) : (
-        <Image alt="no-history" src={emptyImageUrl} />
+        <>
+          <Space height={133} />
+          <Flex alignItems="center" direction="column" gap="xl">
+            <Image
+              alt="no-history"
+              height={140}
+              src="/images/empty-history.png"
+              width={186}
+            />
+            <Text>진행된 과제가 없어요</Text>
+          </Flex>
+          <Space height={94} />
+        </>
       )}
     </>
   );

diff --git a/apps/client/app/(afterLogin)/my-study/my-homework/_components/mockData.ts b/apps/client/app/(afterLogin)/my-study/my-homework/_components/mockData.ts
@@ -23,15 +23,15 @@ export const history: AssignmentHistoryDto[] = [
 ];
 
 export const studyDashBoardData: StudyDetailDashboardDto = {
-  repositoryLink: "https://example.com/assignments/react-basics",
+  repositoryLink: "",
   isLinkEditable: true,
   submittableAssignments: [
     {
       studyDetailId: 1,
       assignmentStatus: "OPEN",
       week: 1,
       title: "React Basics",
-      assignmentSubmissionStatus: "FAILURE",
+      assignmentSubmissionStatus: "FAIL",
       descriptionLink: "https://example.com/assignments/react-basics",
       deadline: "2024-08-18T17:56:01.155Z",
       submissionLink: "https://example.com/submissions/react-basics",

diff --git a/apps/client/types/dtos/study-detail-dashboard.ts b/apps/client/types/dtos/study-detail-dashboard.ts
@@ -1,3 +1,5 @@
+import type { AssignmentSubmissionStatusType } from "types/entities/assignment";
+
 export interface StudyDetailDashboardDto {
   repositoryLink: string;
   isLinkEditable: boolean;
@@ -9,7 +11,7 @@ export interface SubmittableAssignment {
   assignmentStatus: "NONE" | "OPEN" | "CANCELLED";
   week: number;
   title: string;
-  assignmentSubmissionStatus: "FAILURE" | "SUCCESS";
+  assignmentSubmissionStatus: AssignmentSubmissionStatusType;
   descriptionLink: string;
   deadline: string;
   submissionLink: string;

diff --git a/apps/client/types/dtos/study-history.ts b/apps/client/types/dtos/study-history.ts
@@ -1,9 +1,11 @@
+import type { AssignmentSubmissionStatusType } from "types/entities/assignment";
+
 export interface AssignmentHistoryDto {
   assignmentHistoryId: number;
   title: string;
   deadline: string;
   descriptionLink?: string;
   submissionLink?: string;
-  assignmentSubmissionStatus: "FAIL" | "SUCCESS"; //TODO: 과제 휴강 여부 추가
+  assignmentSubmissionStatus: AssignmentSubmissionStatusType; //TODO: 과제 휴강 여부 추가
   week: number;
 }
diff --git a/apps/client/types/entities/assignment.ts b/apps/client/types/entities/assignment.ts
@@ -0,0 +1 @@
+export type AssignmentSubmissionStatusType = "FAIL" | "SUCCESS"; //TODO: 과제 휴강 여부 추가