taken lectures api/#35

app/business/api-path.ts

@@ -2,4 +2,5 @@ const BASE_URL = process.env.API_MOCKING === 'enable' ? 'http://localhost:9090'
 
 export const API_PATH = {
   revenue: `${BASE_URL}/revenue`,
+  takenLectures: `${BASE_URL}/taken-lectures`,
 };

app/business/taken-lectures/taken-lecture-list.query.ts

@@ -0,0 +1,20 @@
+import { API_PATH } from '../api-path';
+
+type lectureInfo = {
+  id: number;
+  year: string;
+  semester: string;
+  lectureCode: string;
+  lectureName: string;
+  credit: number;
+};
+export type TakenLectures = {
+  totalCredit: number;
+  takenLectures: lectureInfo[];
+};
+
+export const fetchTakenLectures = async (): Promise<TakenLectures> => {
+  const response = await fetch(API_PATH.takenLectures);
+  const data = await response.json();
+  return data;
+};

app/mocks/data.mock.ts

@@ -12,3 +12,65 @@ export const revenue = [
   { month: 'Nov', revenue: 3000 },
   { month: 'Dec', revenue: 4800 },
 ];
+
+export const takenLectures = JSON.parse(`{
+  "totalCredit": 115,
+  "takenLectures": [
+    {
+      "id": 140,
+      "year": "CUSTOM",
+      "semester": "CUSTOM",
+      "lectureCode": "HED01407",
+      "lectureName": "딥러닝",
+      "credit": 3
+    },
+    {
+      "id": 139,
+      "year": "CUSTOM",
+      "semester": "CUSTOM",
+      "lectureCode": "HED01311",
+      "lectureName": "자기주도학습",
+      "credit": 2
+    },
+    {
+      "id": 135,
+      "year": "2023",
+      "semester": "1학기",
+      "lectureCode": "HED01413",
+      "lectureName": "캡스톤디자인",
+      "credit": 3
+    },
+    {
+      "id": 128,
+      "year": "2023",
+      "semester": "1학기",
+      "lectureCode": "HED01404",
+      "lectureName": "빅데이터기술특론1",
+      "credit": 3
+    },
+    {
+      "id": 126,
+      "year": "2023",
+      "semester": "1학기",
+      "lectureCode": "HED01318",
+      "lectureName": "모바일컴퓨팅",
+      "credit": 3
+    },
+    {
+      "id": 125,
+      "year": "2023",
+      "semester": "1학기",
+      "lectureCode": "HED01407",
+      "lectureName": "딥러닝",
+      "credit": 3
+    },
+    {
+      "id": 124,
+      "year": "2023",
+      "semester": "1학기",
+      "lectureCode": "HED01317",
+      "lectureName": "데이터베이스프로젝트",
+      "credit": 3
+    }
+  ]
+}`);

app/mocks/handlers.mock.ts

@@ -1,5 +1,5 @@
 import { HttpResponse, http, delay } from 'msw';
-import { revenue } from './data.mock';
+import { revenue, takenLectures } from './data.mock';
 import { API_PATH } from '../business/api-path';
 
 export const handlers = [
@@ -8,4 +8,7 @@ export const handlers = [
     console.log(revenue);
     return HttpResponse.json(revenue);
   }),
+  http.get(API_PATH.takenLectures, () => {
+    return HttpResponse.json(takenLectures);
+  }),
 ];

app/ui/taken-lectures/taken-lecture-list.tsx

@@ -0,0 +1,39 @@
+import { TakenLectures, fetchTakenLectures } from '@/app/business/taken-lectures/taken-lecture-list.query';
+import { Table } from '../view/molecule/table';
+import TakenLectureTitle from './taken-lecture-title';
+import Button from '../view/atom/button/button';
+import Link from 'next/link';
+
+const parseTakenLectures = (subjects: TakenLectures['takenLectures']) => {
+  return subjects.map((subject) => [
+    subject.year,
+    subject.semester,
+    subject.lectureCode,
+    subject.lectureName,
+    subject.credit,
+  ]);
+};
+
+const headerInfo = ['수강년도', '수강학기', '과목코드', '과목명', '학점'];
+
+export default async function TakenLectureList() {
+  const data = await fetchTakenLectures();
+  const takenLectures = parseTakenLectures(data.takenLectures);
+
+  return (
+    <div className="w-[800px] flex flex-col gap-2">
+      <TakenLectureTitle
+        titleLabel="내 기이수 과목"
+        rightElement={
+          <div className="flex gap-2">
+            <Button label="커스텀하기" variant="secondary" size="md" />
+            <Link href="/file-upload">
+              <Button label="업데이트" variant="secondary" size="md" />
+            </Link>
+          </div>
+        }
+      />
+      <Table headerInfo={headerInfo} data={takenLectures} />
+    </div>
+  );
+}

app/ui/taken-lectures/taken-lecture-title.tsx

@@ -0,0 +1,15 @@
+import { ReactNode } from 'react';
+
+type TakenLectureTitle = {
+  titleLabel: string;
+  rightElement: ReactNode;
+};
+
+export default function TakenLectureTitle({ titleLabel, rightElement }: TakenLectureTitle) {
+  return (
+    <div className="flex justify-between items-center w-full">
+      <div className="rounded-[100px] bg-light-blue-6 p-2.5 text-white text-lg font-bold">{titleLabel}</div>
+      {rightElement}
+    </div>
+  );
+}

app/ui/view/molecule/list/list-root.tsx

@@ -1,10 +1,14 @@
 import { ReactNode } from 'react';
 
-type ListRootProps<T> = {
-  data: T[];
-  render: (item: T) => ReactNode;
+type ListRootProps = {
+  data: (string | number)[][];
+  render: (item: (string | number)[], index: number) => ReactNode;
 };
 
-export function ListRoot<T>({ data, render }: ListRootProps<T>) {
-  return <div className="rounded-2xl border-[1px] border-black-2 w-full">{data.map((item) => render(item))}</div>;
+export function ListRoot({ data, render }: ListRootProps) {
+  return (
+    <div className="rounded-2xl border-[1px] border-black-2 w-full">
+      {data.map((item, index) => render(item, index))}
+    </div>
+  );
 }

app/ui/view/molecule/table/index.tsx

@@ -1,8 +1,41 @@
 import { TableHeader } from './table-header';
-import { TableRoot } from './table-root';
+import { ColType } from '../grid/grid-root';
+import List from '../list';
+import Grid from '../grid';
 
-const Table = Object.assign(TableRoot, {
-  Header: TableHeader,
-});
+type TableProps = {
+  headerInfo: string[];
+  data: (string | number)[][];
+  actionButton?: JSX.Element;
+};
 
-export default Table;
+function isCol(cols: number): cols is ColType {
+  if (cols === 3 || cols === 4 || cols === 5 || cols === 6) {
+    return true;
+  }
+  return false;
+}
+
+export function Table({ data, headerInfo, actionButton }: TableProps) {
+  const cols = actionButton ? headerInfo.length + 1 : headerInfo.length;
+
+  const render = (item: (string | number)[], index: number) => {
+    return (
+      <List.Row key={index}>
+        <Grid cols={isCol(cols) ? cols : 6}>
+          {item.map((info) => (
+            <Grid.Column key={info}>{info}</Grid.Column>
+          ))}
+          {actionButton ? <Grid.Column>{actionButton}</Grid.Column> : null}
+        </Grid>
+      </List.Row>
+    );
+  };
+
+  return (
+    <div className="flex flex-col gap-2.5 w-full">
+      <TableHeader headerInfo={headerInfo} cols={isCol(cols) ? cols : 6} />
+      <List data={data} render={render} />
+    </div>
+  );
+}

app/ui/view/molecule/table/table.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import Table from '.';
 import Button from '../../atom/button/button';
+import { Table } from '.';
 
 const meta = {
   title: 'ui/view/molecule/Table',