feat(domain/enrollment-check): 등록확인 API 연동

Author: choi2601

api/arts/index.ts

@@ -0,0 +1,7 @@
+import type { ResponseForm } from "@/types";
+import type { Art } from "@/types/arts";
+import httpClient from "../core";
+
+export const getCheckList = async (): Promise<ResponseForm<Art[]>> => {
+  return httpClient.get("/arts/check-list");
+};

api/index.ts

@@ -3,3 +3,4 @@ export * from "./detail";
 export * from "./comment";
 export * from "./reserve";
 export * from "./landing";
+export * from "./arts";

app/login/page.tsx

@@ -4,6 +4,7 @@ import OAuthLogin from "@/components/domains/oauth/login";
 
 const authUri = process.env.NEXT_PUBLIC_NAVER_AUTH_URI as string;
 const clientId = process.env.NEXT_PUBLIC_NAVER_CLIENT_ID as string;
+const clientState = process.env.NEXT_PUBLIC_AUTH_CLIENT_STATE as string;
 const redirectUri = process.env.NEXT_PUBLIC_NAVER_REDIRECT_URI as string;
 
 export default function LoginPage() {
@@ -13,7 +14,7 @@ export default function LoginPage() {
         authUri={authUri}
         clientId={clientId}
         redirectUri={redirectUri}
-        state="test"
+        state={clientState}
         style={{ backgroundColor: "#03c75A", width: "350px" }}
       >
         네이버 로그인

components/domains/enrollment-check/data.ts

@@ -1,109 +1,3 @@
-export const mockRes = {
-  message: "등록확인 리스트 페이지 조회에 성공했습니다..",
-  data: [
-    {
-      id: 33,
-      createdAt: "2024-01-30T14:28:38.045106+09:00",
-      genre: "test",
-      title: "test",
-      status: "APPROVED",
-      createdBy: "test",
-      schedules: [
-        {
-          id: 57,
-          leftSeatCount: 48,
-          seatMaxCount: 100,
-        },
-        {
-          id: 58,
-          leftSeatCount: 1,
-          seatMaxCount: 100,
-        },
-      ],
-    },
-    {
-      id: 32,
-      createdAt: "2024-01-30T14:27:02.689494+09:00",
-      genre: "test",
-      title: "test",
-      status: "APPROVED",
-      createdBy: "test",
-      schedules: [
-        {
-          id: 55,
-          leftSeatCount: 99,
-          seatMaxCount: 100,
-        },
-        {
-          id: 56,
-          leftSeatCount: 99,
-          seatMaxCount: 100,
-        },
-      ],
-    },
-    {
-      id: 30,
-      createdAt: "2024-01-30T14:20:29.129058+09:00",
-      genre: "test",
-      title: "test",
-      status: "APPROVED",
-      createdBy: "test",
-      schedules: [
-        {
-          id: 51,
-          leftSeatCount: 68,
-          seatMaxCount: 0,
-        },
-        {
-          id: 52,
-          leftSeatCount: 119,
-          seatMaxCount: 0,
-        },
-      ],
-    },
-    {
-      id: 5,
-      createdAt: "2023-12-19T20:13:59.079114+09:00",
-      genre: "test",
-      title: "test",
-      status: "APPROVED",
-      createdBy: "test",
-      schedules: [
-        {
-          id: 10,
-          leftSeatCount: 0,
-          seatMaxCount: 0,
-        },
-        {
-          id: 9,
-          leftSeatCount: 0,
-          seatMaxCount: 0,
-        },
-      ],
-    },
-    {
-      id: 1,
-      createdAt: "2023-11-18T18:01:33.129115+09:00",
-      genre: "test",
-      title: "test",
-      status: "APPROVED",
-      createdBy: "test",
-      schedules: [
-        {
-          id: 1,
-          leftSeatCount: 0,
-          seatMaxCount: 0,
-        },
-        {
-          id: 2,
-          leftSeatCount: 0,
-          seatMaxCount: 0,
-        },
-      ],
-    },
-  ],
-};
-
 export const displayedStatus: { [key: string]: string } = {
   APPROVED: "승인",
   REJECTED: "반려",

components/domains/enrollment-check/table/index.tsx

@@ -2,11 +2,12 @@ import { useEffect, useState } from "react";
 import type { ColumnDef } from "@tanstack/react-table";
 import dayjs from "dayjs";
 import styled from "styled-components";
+import { getCheckList } from "@/api";
 import { SpacerSkleton } from "@/components/common/spacer";
 import { Table } from "@/components/common/table";
 import Typography from "@/components/common/text/Typography";
 import { DeleteAdmin } from "./deleteAdmin";
-import { mockRes, displayedStatus } from "../data";
+import { displayedStatus } from "../data";
 
 const column: ColumnDef<any>[] = [
   { id: "id", header: "번호", accessorFn: (row) => row.id, size: 28 },
@@ -53,31 +54,37 @@ export function EnrollmentCheckTable() {
   useEffect(() => {
     const updated: any[] = [];
 
-    const { data } = mockRes;
+    (async () => {
+      const { data } = await getCheckList();
 
-    data.forEach((work) => {
-      const { schedules, ...rest } = work;
+      data.forEach((work) => {
+        const { schedules, ...rest } = work;
 
-      schedules.forEach((schedule) => {
-        const { id, leftSeatCount, seatMaxCount } = schedule;
+        schedules.forEach((schedule) => {
+          const { id, leftSeatCount, seatMaxCount } = schedule;
 
-        const row = {
-          id,
-          created_at: dayjs(rest.createdAt).format("YYYY.MM.DD"),
-          genre: rest.genre,
-          title: rest.title,
-          createdBy: rest.createdBy,
-          status: displayedStatus[rest.status],
-          selling: `${leftSeatCount}/${seatMaxCount}`,
-        };
+          const row = {
+            id,
+            created_at: dayjs(rest.createdAt).format("YYYY.MM.DD"),
+            genre: rest.genre,
+            title: rest.title,
+            createdBy: rest.createdBy,
+            status: displayedStatus[rest.status],
+            selling: `${leftSeatCount}/${seatMaxCount}`,
+          };
 
-        updated.push(row);
-      });
+          updated.push(row);
+        });
 
-      setList(updated);
-    });
+        setList(updated);
+      });
+    })();
   }, []);
 
+  if (list.length === 0) {
+    return;
+  }
+
   return (
     <SpacerSkleton id="main-content" type="vertical" gap={44}>
       <div>

types/arts/index.ts

@@ -0,0 +1,15 @@
+export interface Art {
+  id: number;
+  createdAt: Date;
+  genre: string;
+  title: string;
+  status: string;
+  createdBy: string;
+  schedules: Schedule[];
+}
+
+export interface Schedule {
+  id: number;
+  leftSeatCount: number;
+  seatMaxCount: number;
+}