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

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/common/layout/Footer.tsx

@@ -44,6 +44,7 @@ export default function Footer() {
 const Container = styled.div`
  background-color: ${({ theme }) => theme.colors.secondary["900"]};
  height: 335px;
+ margin-top: 180px;
  padding: 3rem 10rem 1.5rem 10rem;
 `;
 

components/domains/enrollment-check/data.ts

@@ -0,0 +1,5 @@
+export const displayedStatus: { [key: string]: string } = {
+ APPROVED: "승인",
+ REJECTED: "반려",
+ PENDING: "대기",
+};

components/domains/enrollment-check/index.ts

@@ -1 +1,2 @@
 export * from "./table";
+export * from "./data";

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

@@ -1,7 +1,7 @@
 import styled, { css } from "styled-components";
 
 export function DeleteAdmin() {
- return <DeleteButton>삭제하기</DeleteButton>;
+ return <DeleteButton disabled>삭제하기</DeleteButton>;
 }
 
 const DeleteButton = styled.button`
@@ -17,6 +17,10 @@ const DeleteButton = styled.button`
  border: 1px solid ${colors.secondary[400]};
  border-radius: 4px;
  color: ${colors.secondary[400]};
+
+ &:disabled {
+ cursor: not-allowed;
+ }
  `;
  }}
 `;

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

@@ -1,74 +1,103 @@
+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 { displayedStatus } from "../data";
 
 const column: ColumnDef<any>[] = [
  { id: "id", header: "번호", accessorFn: (row) => row.id, size: 28 },
  {
  id: "created_at",
  header: "등록일",
  accessorFn: (row) => row.created_at,
- size: 77,
+ size: 84,
  },
- { id: "genre", header: "장르", accessorFn: (row) => row.genre, size: 28 },
+ { id: "genre", header: "장르", accessorFn: (row) => row.genre, size: 80 },
  { id: "title", header: "작품명", accessorFn: (row) => row.title, size: 245 },
  {
- id: "admin_name",
+ id: "createdBy",
  header: "관리자명",
- accessorFn: (row) => row.admin_name,
- size: 56,
+ accessorFn: (row) => row.createdBy,
+ size: 60,
  },
  {
  id: "status",
  header: "상태",
  accessorFn: (row) => row.status,
- size: 50,
- },
- {
- id: "is_approved",
- header: "승인",
- accessorFn: (row) => row.is_approved,
- size: 40,
+ size: 60,
  },
  {
  id: "selling",
  header: "판매현황",
  accessorFn: (row) => row.selling,
  size: 132,
  },
- {
- id: "admin",
- header: "관리",
- accessorFn: (row) => row.admin,
- size: 72,
- cell(props) {
- return <DeleteAdmin />;
- },
- },
-];
-
-const data: any[] = [
- {
- id: 1,
- created_at: "2023.11.12",
- genre: "공연",
- title: "현대무용<시차적>",
- admin_name: "최병현",
- status: "검수중",
- is_approved: "반려",
- selling: "10/29",
- },
+ // {
+ // id: "admin",
+ // header: "관리",
+ // accessorFn: (row) => row.admin,
+ // size: 72,
+ // cell(props) {
+ // return <DeleteAdmin />;
+ // },
+ // },
 ];
 
 export function EnrollmentCheckTable() {
+ const [list, setList] = useState<any[]>([]);
+
+ useEffect(() => {
+ const updated: any[] = [];
+
+ (async () => {
+ const { data } = await getCheckList();
+
+ data.forEach((work) => {
+ const { schedules, ...rest } = work;
+
+ 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}`,
+ };
+
+ updated.push(row);
+ });
+
+ setList(updated);
+ });
+ })();
+ }, []);
+
+ if (list.length === 0) {
+ return;
+ }
+
  return (
- <SpacerSkleton type="vertical" gap={44}>
+ <SpacerSkleton id="main-content" type="vertical" gap={44}>
  <div>
- <Typography typo="subhead03">{`전체 ${data.length}건`}</Typography>
+ <Typography typo="subhead03">{`전체 ${list.length}건`}</Typography>
  </div>
- <Table name="enrollment-check-table" columns={column} data={data} />
+ <TableContainer>
+ <Table name="enrollment-check-table" columns={column} data={list} />
+ </TableContainer>
  </SpacerSkleton>
  );
 }
+
+const TableContainer = styled.div`
+ max-height: 600px;
+ overflow: scroll;
+`;

styles/global.css

@@ -28,10 +28,6 @@ body {
  height: 100%;
 }
 
-body {
- background-color: #1d1d1d;
-}
-
 input,
 textarea {
  user-select: auto;

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;
+}