feat: study-dashboard api 연결, HomeworkBox 분리

apps/client/apis/studyDetailApi.ts

@@ -0,0 +1,20 @@
+import { fetcher } from "@wow-class/utils";
+import { apiPath } from "constants/apiPath";
+import { tags } from "constants/tags";
+import type { StudyDetailDashboardDto } from "types/dtos/study-detail-dashboard";
+
+export const studyDetailApi = {
+  getStudyDetailDashboard: async (studyId: number) => {
+    const response = await fetcher.get<StudyDetailDashboardDto>(
+      `${apiPath.studyDetail}/dashboard?studyId=${studyId}`,
+      {
+        next: { tags: [tags.studyDetailDashboard] },
+        headers: {
+          Authorization: `Bearer ${process.env.DEV_AUTH_TOKEN}`,
+        },
+      }
+    );
+
+    return response.data;
+  },
+};

apps/client/apis/studyHistoryApi.ts

@@ -9,6 +9,7 @@ export const studyHistoryApi = {
       `${apiPath.studyHistory}/assignments?studyId=${studyId}`,
       {
         next: { tags: [tags.studyHistory] },
+        cache: "force-cache",
         headers: {
           Authorization: `Bearer ${process.env.DEV_AUTH_TOKEN}`,
         },

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

@@ -0,0 +1,72 @@
+"use client";
+
+import { Space, Text } from "@wow-class/ui";
+import { tags } from "constants/tags";
+import { revalidateTag } from "next/cache";
+import type { SubmittableAssignment } from "types/dtos/study-detail-dashboard";
+import { Link, Reload } from "wowds-icons";
+import Box from "wowds-ui/Box";
+import Button from "wowds-ui/Button";
+import TextButton from "wowds-ui/TextButton";
+
+interface HomeworkOverviewBoxProps {
+  assignments: SubmittableAssignment[];
+  repositoryLink: string;
+}
+export const HomeworkBoxWithLinkEdit = ({
+  assignments,
+  repositoryLink,
+}: HomeworkOverviewBoxProps) => {
+  const handleClickSubmissionComplete = async () => {
+    revalidateTag(tags.studyDetailDashboard);
+  };
+  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>
+
+              <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>
+            </>
+          }
+        />
+      ))}
+    </>
+  );
+};

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

@@ -1,56 +1,89 @@
+"use client";
+
 import { Flex, styled } from "@styled-system/jsx";
 import { Space, Text } from "@wow-class/ui";
+import { tags } from "constants/tags";
+import { revalidateTag } from "next/cache";
 import Image from "next/image";
+import type { SubmittableAssignment } from "types/dtos/study-detail-dashboard";
 import { Link, Reload } from "wowds-icons";
 import Box from "wowds-ui/Box";
 import Button from "wowds-ui/Button";
 import Tag from "wowds-ui/Tag";
 import TextButton from "wowds-ui/TextButton";
 
-export const HomeworkOverviewBox = () => {
+interface HomeworkOverviewBoxProps {
+  assignments: SubmittableAssignment[];
+}
+export const HomeworkOverviewBox = ({
+  assignments,
+}: HomeworkOverviewBoxProps) => {
+  const handleClickSubmissionComplete = async () => {
+    revalidateTag(tags.studyDetailDashboard);
+  };
   return (
-    <Box
-      text={
-        <>
-          <Text color="primary" typo="label2">
-            4주차
-          </Text>
-          <Space height={16} />
-          <Flex gap="xs">
-            <Text as="h2" typo="h2">
-              HTTP 통신 코드 작성하기
-            </Text>
-            <Tag color="blue" variant="solid2">
-              제출 완료
-            </Tag>
-          </Flex>
-          <TextButton style={{ paddingLeft: "0px" }} text="과제 명세 확인" />
-          <Space height="xs" />
-          <Text color="sub">종료 일시 : 2024년 5월 23일 23:59</Text>
-          <Flex gap="xs">
-            <Text as="div" color="sub">
-              제출한 과제 :
-              <Text as="span" color="textBlack">
-                2024-1-Web-Study/Week4
+    <>
+      {assignments.map((assignment) => (
+        <Box
+          key={assignment.studyDetailId}
+          text={
+            <>
+              <Text color="primary" typo="label2">
+                {assignment.week}주차
               </Text>
-            </Text>
-            <Image alt="dot" height={6} src="/images/dot.svg" width={6} />
-            <styled.div color="primary">글자수 충족</styled.div>
-          </Flex>
-          <Space height={26} />
-          <Button
-            icon={<Link stroke="primary" />}
-            style={{ maxWidth: "100%" }}
-            variant="outline"
-          >
-            제출하러 가기
-          </Button>
-          <Space height={8} />
-          <Button icon={<Reload />} style={{ maxWidth: "100%" }}>
-            제출 완료
-          </Button>
-        </>
-      }
-    />
+              <Space height={16} />
+              <Flex gap="xs">
+                <Text as="h2" typo="h2">
+                  {assignment.title}
+                </Text>
+                <Tag color="blue" variant="solid2">
+                  {assignment.assignmentSubmissionStatus}
+                </Tag>
+              </Flex>
+              <TextButton
+                as="a"
+                href={assignment.descriptionLink}
+                style={{ paddingLeft: "0px", width: "fit-content" }}
+                text="과제 명세 확인"
+              />
+              <Space height="xs" />
+              <Text color="sub">종료 일시 : {assignment.deadline}</Text>
+              <Flex gap="xs">
+                <Text as="div" color="sub">
+                  제출한 과제
+                  <Text as="span" color="textBlack">
+                    {assignment.title}
+                  </Text>
+                </Text>
+                <Image alt="dot" height={6} src="/images/dot.svg" width={6} />
+                <styled.div color="primary">
+                  {assignment.assignmentSubmissionStatus === "FAILURE"
+                    ? assignment.submissionFailureType
+                    : "글자수 충족"}
+                </styled.div>
+              </Flex>
+              <Space height={26} />
+              <Button
+                as="a"
+                href={assignment.submissionLink}
+                icon={<Link stroke="primary" />}
+                style={{ maxWidth: "100%" }}
+                variant="outline"
+              >
+                제출하러 가기
+              </Button>
+              <Space height={8} />
+              <Button
+                icon={<Reload />}
+                style={{ maxWidth: "100%" }}
+                onClick={handleClickSubmissionComplete}
+              >
+                제출 완료
+              </Button>
+            </>
+          }
+        />
+      ))}
+    </>
   );
 };

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

@@ -2,37 +2,54 @@
 
 import { Flex } from "@styled-system/jsx";
 import { Space, Text } from "@wow-class/ui";
-import { useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { Edit, Trash, Warn } from "wowds-icons";
 import Box from "wowds-ui/Box";
 import Button from "wowds-ui/Button";
 import Tag from "wowds-ui/Tag";
 import TextField from "wowds-ui/TextField";
 
-export const RepositorySubmissionBox = () => {
-  const [url, setUrl] = useState("");
-  const [isEditing, setIsEditing] = useState(true);
+interface RepositorySubmissionBoxProps {
+  repositoryLink: string;
+}
+
+type RepositorySubmissionStatus = "none" | "editing" | "submitted";
+
+export const RepositorySubmissionBox = ({
+  repositoryLink,
+}: RepositorySubmissionBoxProps) => {
+  const [url, setUrl] = useState(repositoryLink);
   const [isInitialSubmit, setIsInitialSubmit] = useState(true);
+  const [status, setStatus] = useState<RepositorySubmissionStatus>("none");
 
-  const handleChange = (value: string) => {
+  const handleClickChange = useCallback((value: string) => {
     setUrl(value);
-  };
+  }, []);
 
-  const handleEditButtonClick = () => {
-    setIsEditing(true);
-  };
+  const handleClickEditButton = useCallback(() => {
+    setStatus("editing");
+  }, []);
 
-  const handleSubmitButtonClick = () => {
+  const handleClickSubmitButton = useCallback(async () => {
     if (isInitialSubmit) {
       setIsInitialSubmit(false);
     } else {
       console.log("모달 오픈");
     }
-    setIsEditing(false);
-  };
+    setStatus("submitted");
+    //TODO: studyHistoryId 넣어주기
+    //await studyHistoryApi.putRepository(1, url);
+  }, [isInitialSubmit]);
+
+  useEffect(() => {
+    if (isInitialSubmit) {
+      setStatus(repositoryLink ? "submitted" : "none");
+    }
+  }, [isInitialSubmit, repositoryLink]);
 
   return (
     <Box
+      variant="text"
       text={
         <>
           <Text color="primary" typo="label2">
@@ -43,34 +60,34 @@ export const RepositorySubmissionBox = () => {
             <Text as="h2" typo="h2">
               과제 제출을 위한 레포지토리 URL 입력하기
             </Text>
-            {!isEditing && (
+            {status === "submitted" && (
               <Tag color="blue" variant="solid2">
                 제출 완료
               </Tag>
             )}
           </Flex>
           <Space height={4} />
-          {isEditing && isInitialSubmit && (
+          {status === "none" && (
             <Flex alignItems="center" gap="xxs">
               <Warn fill="error" stroke="error" />
               <Text color="error" typo="body1">
                 입력하지 않으면 앞으로의 과제를 제출할 수 없어요.
               </Text>
             </Flex>
           )}
-          {!isEditing && !isInitialSubmit && (
+          {status === "submitted" && (
             <Text color="sub">최초 과제 제출 전 까지만 수정이 가능해요.</Text>
           )}
           <Space height={26} />
-          {isEditing && (
+          {status !== "submitted" && (
             <TextField
               label=""
               placeholder="URL 을 입력하세요"
               value={url}
-              onChange={handleChange}
+              onChange={handleClickChange}
             />
           )}
-          {!isEditing && (
+          {status === "submitted" && (
             <Flex
               backgroundColor="backgroundAlternative"
               borderRadius="5px"
@@ -82,15 +99,15 @@ export const RepositorySubmissionBox = () => {
             >
               {url}
               <Flex gap="xs" marginLeft="auto">
-                <Edit stroke="textBlack" onClick={handleEditButtonClick} />
+                <Edit stroke="textBlack" onClick={handleClickEditButton} />
                 <Trash stroke="textBlack" />
               </Flex>
             </Flex>
           )}
           <Space height={62} />
           <Button
             style={{ maxWidth: "100%" }}
-            onClick={handleSubmitButtonClick}
+            onClick={handleClickSubmitButton}
           >
             입력하기
           </Button>