taken lectures api/#35

app/__test__/ui/lecture/taken-lecture-list.test.tsx

@@ -0,0 +1,9 @@
+import TakenLectureList from '@/app/ui/lecture/taken-lecture-list';
+import { render, screen } from '@testing-library/react';
+
+describe('Taken lecture list', () => {
+  it('기이수 과목 리스트를 보여준다.', async () => {
+    render(await TakenLectureList());
+    expect(await screen.findByTestId('table-data'));
+  });
+});

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/lecture/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;
+};
+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/lecture/taken-lecture-label.tsx

@@ -0,0 +1,19 @@
+import Link from 'next/link';
+import Button from '../view/atom/button/button';
+import LabelContainer from '../view/atom/label-container/label-container';
+
+export default function TakenLectureLabel() {
+  return (
+    <LabelContainer
+      label="내 기이수 과목"
+      rightElement={
+        <div className="flex gap-2">
+          <Button label="커스텀하기" variant="secondary" size="md" />
+          <Link href="/file-upload">
+            <Button label="업데이트" variant="secondary" size="md" />
+          </Link>
+        </div>
+      }
+    />
+  );
+}

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

@@ -0,0 +1,15 @@
+import { fetchTakenLectures } from '@/app/business/lecture/taken-lecture-list.query';
+import { Table } from '../view/molecule/table';
+import TakenLectureLabel from './taken-lecture-label';
+
+const headerInfo = ['수강년도', '수강학기', '과목코드', '과목명', '학점'];
+
+export default async function TakenLectureList() {
+  const data = await fetchTakenLectures();
+  return (
+    <div className="w-[800px] flex flex-col gap-2">
+      <TakenLectureLabel />
+      <Table headerInfo={headerInfo} data={data.takenLectures} />
+    </div>
+  );
+}

app/ui/view/atom/label-container/label-container.stories.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import LabelContainer from './label-container';
+import Button from '../button/button';
+
+const meta = {
+  title: 'ui/view/atom/Button',
+  component: LabelContainer,
+  tags: ['autodocs'],
+  parameters: {
+    componentSubtitle: 'LabelContainer는 기이수, 미이수 과목에 대한 정보를 나타낼 때 사용되는 view component입니다.',
+    docs: {
+      description: {
+        component: `
+- label 값으로 화면에 출력하고 싶은 text를 할당해야합니다. \n
+- right element 값으로 오른쪽에 렌더링 될 요소를 할당해야합니다. \n
+`,
+      },
+    },
+  },
+} satisfies Meta<typeof LabelContainer>;
+
+export default meta;
+
+export const TakenLectureLabel: StoryObj<typeof LabelContainer> = {
+  args: {
+    label: '내 기이수 과목',
+    rightElement: (
+      <div className="flex gap-2">
+        <Button label="커스텀하기" variant="secondary" size="md" />
+        <Button label="업데이트" variant="secondary" size="md" />
+      </div>
+    ),
+  },
+  render: (args) => (
+    <div className="w-[800px]">
+      <LabelContainer {...args} />
+    </div>
+  ),
+};

app/ui/view/atom/label-container/label-container.tsx

@@ -0,0 +1,15 @@
+import { ReactNode } from 'react';
+
+type LabelContainerProps = {
+  label: string;
+  rightElement: ReactNode;
+};
+
+export default function LabelContainer({ label, rightElement }: LabelContainerProps) {
+  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">{label}</div>
+      {rightElement}
+    </div>
+  );
+}

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

@@ -1,10 +1,15 @@
 import { ReactNode } from 'react';
 
-type ListRootProps<T> = {
-  data: T[];
-  render: (item: T) => ReactNode;
+export type ListRow = { [key: string]: string | number; id: number };
+type ListRootProps = {
+  data: ListRow[];
+  render: (item: ListRow, 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,43 @@
 import { TableHeader } from './table-header';
-import { TableRoot } from './table-root';
+import { ColType } from '../grid/grid-root';
+import List from '../list';
+import Grid from '../grid';
+import { ListRow } from '../list/list-root';
 
-const Table = Object.assign(TableRoot, {
-  Header: TableHeader,
-});
+type TableProps = {
+  headerInfo: string[];
+  data: ListRow[];
+  renderActionButton?: (id: number) => 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, renderActionButton }: TableProps) {
+  const cols = renderActionButton ? headerInfo.length + 1 : headerInfo.length;
+
+  const render = (item: ListRow, index: number) => {
+    return (
+      <List.Row key={index}>
+        <Grid cols={isCol(cols) ? cols : 6}>
+          {Object.keys(item).map((key, index) => {
+            if (key === 'id') return null;
+            return <Grid.Column key={index}>{item[key]}</Grid.Column>;
+          })}
+          {renderActionButton ? <Grid.Column>{renderActionButton(item.id)}</Grid.Column> : null}
+        </Grid>
+      </List.Row>
+    );
+  };
+
+  return (
+    <div className="flex flex-col gap-2.5 w-full" data-testid="table-data">
+      <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',