[Feat] 마이페이지 수료내역 api 연동

apps/client/apis/studyHistoryApi.ts

@@ -1,7 +1,10 @@
 import { fetcher } from "@wow-class/utils";
 import { apiPath } from "constants/apiPath";
 import { tags } from "constants/tags";
-import type { AssignmentHistoryDto } from "types/dtos/studyHistory";
+import type {
+  AssignmentHistoryDto,
+  CompletedStudyDto,
+} from "types/dtos/studyHistory";
 
 export const studyHistoryApi = {
   getStudyHistory: async (studyId: number) => {
@@ -34,4 +37,15 @@ export const studyHistoryApi = {
 
     return { success: response.ok };
   },
+  getMyCompletedStudy: async () => {
+    const response = await fetcher.get<CompletedStudyDto[]>(
+      `${apiPath.studyHistory}/me/complete`,
+      {
+        next: { tags: [tags.studyHistory] },
+        cache: "force-cache",
+      }
+    );
+
+    return response.data;
+  },
 };

apps/client/app/(afterLogin)/my-page/_components/CompletedStudy.tsx

@@ -0,0 +1,149 @@
+"use client";
+
+import { css } from "@styled-system/css";
+import { Flex } from "@styled-system/jsx";
+import { AwardIcon, Space, StarCheckIcon, Text } from "@wow-class/ui";
+import { studyHistoryApi } from "apis/studyHistoryApi";
+import Link from "next/link";
+import type { ComponentProps, CSSProperties } from "react";
+import type { AchievmentType, StudyType } from "types/entities/common/study";
+import Table from "wowds-ui/Table";
+import Tag from "wowds-ui/Tag";
+
+export const CompletedStudy = async () => {
+  const data = await studyHistoryApi.getMyCompletedStudy();
+  if (!data) return null;
+
+  return (
+    <Table fullWidth>
+      <Table.Thead>
+        <Table.Th>스터디 이름 </Table.Th>
+        <Table.Th>멘토 </Table.Th>
+        <Table.Th>학기</Table.Th>
+        <Table.Th>코스 기간 </Table.Th>
+        <Table.Th>수료 </Table.Th>
+        <Table.Th>우수 </Table.Th>
+      </Table.Thead>
+      <Table.Tbody>
+        {data.map(
+          ({
+            studyId,
+            title,
+            studyType,
+            notionLink,
+            introduction,
+            mentorName,
+            academicYear,
+            semesterType,
+            totalWeek,
+            studyHistoryStatus,
+            achievements,
+          }) => (
+            <div key={studyId}>
+              <Table.Tr value={studyId}>
+                <Table.Td style={tdStyle}>
+                  <Flex>
+                    <Text typo="h3">{title}</Text>
+                    <Tag
+                      color={curriculumColors[studyType] ?? "green"}
+                      variant="solid1"
+                    >
+                      {studyType}
+                    </Tag>
+                  </Flex>
+                  {introduction && (
+                    <Link
+                      className={introductionLinkTextStyle}
+                      href={notionLink ?? ""}
+                      target="_blank"
+                    >
+                      <Text color="sub" typo="body2">
+                        {introduction}
+                      </Text>
+                    </Link>
+                  )}
+                </Table.Td>
+                <Table.Td style={tdStyle}>
+                  <Text className={mentorTextstyle}>{mentorName} 멘토</Text>
+                </Table.Td>
+                <Table.Td style={tdStyle}>
+                  <Text>
+                    {academicYear}-{semesterType === "FIRST" ? "1" : "2"}
+                  </Text>
+                </Table.Td>
+                <Table.Td style={tdStyle}>
+                  <Text>{totalWeek}주 코스</Text>
+                </Table.Td>
+                <Table.Td style={tdStyle}>
+                  {studyHistoryStatus === "COMPLETED" ? (
+                    <StarCheckIcon checked={true} />
+                  ) : (
+                    <Text className={emptyTextStyle}>-</Text>
+                  )}
+                </Table.Td>
+                <Table.Td style={tdStyle}>
+                  <Flex gap="10px">
+                    <AchievementIcons achievements={achievements} />
+                  </Flex>
+                </Table.Td>
+              </Table.Tr>
+              <Space height={16} />
+            </div>
+          )
+        )}
+      </Table.Tbody>
+    </Table>
+  );
+};
+
+const AchievementIcons = ({ achievements }: { achievements: string[] }) => {
+  const achievementTypes: AchievmentType[] = [
+    "FIRST_ROUND_OUTSTANDING_STUDENT",
+    "SECOND_ROUND_OUTSTANDING_STUDENT",
+  ];
+
+  const isAchievment = achievementTypes.some((type) =>
+    achievements.includes(type)
+  );
+
+  return isAchievment ? (
+    <>
+      {achievementTypes.map(
+        (type) =>
+          achievements.includes(type) && (
+            <AwardIcon disabled={false} key={type} />
+          )
+      )}
+    </>
+  ) : (
+    <Text className={emptyTextStyle}>-</Text>
+  );
+};
+
+const curriculumColors: Record<StudyType, ComponentProps<typeof Tag>["color"]> =
+  {
+    "과제 스터디": "green",
+    "온라인 스터디": "blue",
+    "오프라인 스터디": "yellow",
+  };
+
+const introductionLinkTextStyle = css({
+  whiteSpace: "nowrap",
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  textDecoration: "underline",
+});
+
+const mentorTextstyle = css({
+  display: "flex",
+  alignItems: "center",
+});
+
+const tdStyle: CSSProperties = {
+  paddingBottom: "20px",
+  paddingTop: "16px",
+};
+
+const emptyTextStyle = css({
+  paddingLeft: "5px",
+});

apps/client/app/(afterLogin)/my-page/page.tsx

@@ -1,5 +1,6 @@
 import { Space, Text } from "@wow-class/ui";
 
+import { CompletedStudy } from "./_components/CompletedStudy";
 import { MyInfoBox } from "./_components/MyInfoBox";
 
 const MyPage = () => {
@@ -8,6 +9,8 @@ const MyPage = () => {
       <Text typo="h1">마이 페이지</Text>
       <Space height={16} />
       <MyInfoBox />
+      <Space height={64} />
+      <CompletedStudy />
     </>
   );
 };

apps/client/types/dtos/studyHistory.ts

@@ -3,6 +3,7 @@ import type {
   AssignmentSubmissionFailureType,
   AssignmentSubmissionStatusType,
 } from "types/entities/common/assignment";
+import type { AchievmentType, StudyType } from "types/entities/common/study";
 
 export interface AssignmentHistoryDto {
   assignmentHistoryId: number;
@@ -15,3 +16,17 @@ export interface AssignmentHistoryDto {
   submissionFailureType: AssignmentSubmissionFailureType;
   week: number;
 }
+
+export interface CompletedStudyDto {
+  studyId: number;
+  academicYear: number;
+  semesterType: "FIRST" | "SECOND";
+  title: string;
+  studyType: StudyType;
+  notionLink?: string;
+  introduction?: string;
+  mentorName: string;
+  totalWeek: number;
+  studyHistoryStatus: "NONE" | "COMPLETED";
+  achievements: Array<AchievmentType>;
+}

apps/client/types/entities/common/study.ts

@@ -1 +1,4 @@
 export type StudyType = "과제 스터디" | "온라인 스터디" | "오프라인 스터디";
+export type AchievmentType =
+  | "FIRST_ROUND_OUTSTANDING_STUDENT"
+  | "SECOND_ROUND_OUTSTANDING_STUDENT";