feat: 사이트 목록 api 조회 작업

apps/cs/src/entities/site/api/site-service.ts

@@ -0,0 +1,20 @@
+import { client } from "@/shared/api/client";
+import { ENDPOINT } from "@/shared/config/api";
+import type {
+  ISiteQuery,
+  ISiteInfo,
+  SiteService,
+} from "../model/site-interface";
+
+export class SiteApiService implements SiteService {
+  public async siteInfo(query: ISiteQuery): Promise<ISiteInfo> {
+    const response = await client.get<ISiteInfo>(
+      `${ENDPOINT.CMS_SERVICE.SITES}`,
+      { params: query },
+    );
+
+    return response.data;
+  }
+}
+
+export const SiteApi = new SiteApiService();

apps/cs/src/entities/site/index.ts

@@ -0,0 +1 @@
+export { SiteApi } from "./api/site-service";

apps/cs/src/entities/site/model/site-interface.ts

@@ -0,0 +1,49 @@
+export interface ISiteQuery {
+  siteNm: string;
+  siteKndCd: string;
+  useYn: string;
+  page: number;
+  size: number;
+  sort: string[];
+}
+
+export interface ISite {
+  siteId: string;
+  siteNm: string;
+  siteKindCode: string;
+  bscSiteYn: string;
+  useYn: string;
+}
+
+export interface ISiteInfo {
+  totalPages: number;
+  totalElements: number;
+  number: number;
+  sort: {
+    empty: boolean;
+    sorted: boolean;
+    unsorted: boolean;
+  };
+  size: number;
+  content: ISite[];
+  pageable: {
+    sort: {
+      empty: boolean;
+      sorted: boolean;
+      unsorted: boolean;
+    };
+    offset: number;
+    pageNumber: number;
+    pageSize: number;
+    paged: boolean;
+    unpaged: boolean;
+  };
+  numberOfElements: number;
+  first: boolean;
+  last: boolean;
+  empty: boolean;
+}
+
+export interface SiteService {
+  siteInfo(query: ISiteQuery): Promise<ISiteInfo>;
+}

apps/cs/src/entities/user/api/user-service.ts

@@ -1,10 +1,10 @@
-import { client } from "@/shared/api";
-import { ENDPOINT } from "@/shared/config";
+import { client } from "@/shared/api/client";
+import { ENDPOINT } from "@/shared/config/api";
 import type { IUser, IUserInfo, UserService } from "../model/user-interface";
 
 export class UsersApiService implements UserService {
-  public async userInfo(payload: IUserInfo): Promise<IUser> {
-    const response = await client.get<IUser>(
+  public async userInfo(payload: IUser): Promise<IUserInfo> {
+    const response = await client.get<IUserInfo>(
       `${ENDPOINT.USER_SERVICE.USERS}/${payload.userUniqId}`,
     );
 

apps/cs/src/entities/user/lib/use-user.ts

@@ -1,7 +1,8 @@
 import { useQuery } from "@tanstack/react-query";
 import { UserApi } from "../api/user-service";
 import { useCookie } from "@/shared/providers";
-import { AUTH_USER_ID, ENDPOINT } from "@/shared/config";
+import { ENDPOINT } from "@/shared/config/api";
+import { AUTH_USER_ID } from "@/shared/config/env";
 
 const useUser = () => {
   const { getToken } = useCookie();

apps/cs/src/entities/user/model/user-interface.ts

@@ -1,8 +1,8 @@
-export interface IUserInfo {
+export interface IUser {
   userUniqId: string;
 }
 
-export interface IUser {
+export interface IUserInfo {
   regDt: string;
   mdfcnDt: string;
   rgtr: string;
@@ -37,5 +37,5 @@ export interface IUser {
 }
 
 export interface UserService {
-  userInfo: (payload: IUserInfo) => Promise<IUser>;
+  userInfo: (payload: IUser) => Promise<IUserInfo>;
 }

apps/cs/src/pages/auth/login/api/login.ts

@@ -1,11 +1,6 @@
 import { AxiosError } from "axios";
-import {
-  ACCESS_TOKEN,
-  AUTH_USER_ID,
-  CLAIM_NAME,
-  ENDPOINT,
-  JWT_EXPIRATION_TIME,
-} from "@/shared/config";
+import { ENDPOINT, JWT_EXPIRATION_TIME } from "@/shared/config/api";
+import { ACCESS_TOKEN, AUTH_USER_ID, CLAIM_NAME } from "@/shared/config/env";
 import { tokenManager } from "../lib/token-manager";
 import type { LoginService, ILogin } from "../model/login";
 

apps/cs/src/pages/auth/login/lib/token-manager.ts

@@ -1,4 +1,4 @@
-import { AUTH_USER_ID, CLAIM_NAME } from "@/shared/config";
+import { AUTH_USER_ID, CLAIM_NAME } from "@/shared/config/env";
 import { setToken, removeToken } from "@/shared/lib/cookie";
 
 export class TokenManager {

apps/cs/src/pages/site/model/__mocks__.tsx

@@ -1,59 +1,43 @@
 import { createColumnHelper } from "@tanstack/react-table";
-import { fakerKO as faker } from "@faker-js/faker";
+import type { ISite } from "@/entities/site/model/site-interface";
 
-type Site = {
-  id: number;
-  사이트코드: string;
-  사이트명: string;
-  대표_URL: string;
-  기본_사이트_여부: boolean;
-  사용_여부: boolean;
-  등록자: string;
-  등록일: string;
-};
-
-faker.seed(123);
-
-const data: Site[] = Array.from({ length: 100 }, (_, i) => ({
-  id: i + 1,
-  사이트코드: faker.string.alpha(2).toUpperCase(),
-  사이트명: faker.lorem.word(),
-  대표_URL: faker.internet.url(),
-  기본_사이트_여부: faker.datatype.boolean(),
-  사용_여부: faker.datatype.boolean(),
-  등록자: faker.person.fullName(),
-  등록일: faker.date.recent().toISOString().split("T")[0] as string,
-}));
-
-const columnHelper = createColumnHelper<Site>();
+const columnHelper = createColumnHelper<ISite>();
 
 const columns = [
-  columnHelper.accessor("id", {
+  columnHelper.accessor((_, index) => index + 1, {
+    id: "no",
     header: "NO",
   }),
-  columnHelper.accessor("사이트코드", {
+  columnHelper.accessor("siteId", {
+    id: "siteId",
     header: "사이트코드",
   }),
-  columnHelper.accessor("사이트명", {
+  columnHelper.accessor("siteNm", {
+    id: "siteNm",
     header: "사이트명",
   }),
-  columnHelper.accessor("대표_URL", {
+  columnHelper.accessor("siteKindCode", {
+    id: "unknown1",
     header: "대표 URL",
   }),
-  columnHelper.accessor("기본_사이트_여부", {
+  columnHelper.accessor("bscSiteYn", {
+    id: "bscSiteYn",
     header: "기본 사이트 여부",
     cell: (info) => (info.getValue() ? "Y" : "N"),
   }),
-  columnHelper.accessor("사용_여부", {
+  columnHelper.accessor("useYn", {
+    id: "useYn",
     header: "사용 여부",
     cell: (info) => (info.getValue() ? "Y" : "N"),
   }),
-  columnHelper.accessor("등록자", {
+  columnHelper.accessor("siteId", {
+    id: "unknown2",
     header: "등록자",
   }),
-  columnHelper.accessor("등록일", {
+  columnHelper.accessor("siteId", {
+    id: "ununknown3",
     header: "등록일",
   }),
 ];
 
-export { data, columns };
+export { columns };

apps/cs/src/pages/site/ui/site-page.tsx

@@ -3,30 +3,67 @@
 import "@common/assets/styles/grid.css";
 
 import { useRouter } from "next/navigation";
+import { useEffect, useState } from "react";
+import { useQuery } from "@tanstack/react-query";
 import { getCoreRowModel, useReactTable } from "@tanstack/react-table";
 import { Button, Input, DataTable } from "@common/components";
-import { data, columns } from "../model/__mocks__";
+import { SiteApi } from "@/entities/site/api/site-service";
+import { ENDPOINT } from "@/shared/config/api";
+import { columns } from "../model/__mocks__";
 import { SitePageLayout } from "./layout";
+import type { ISiteQuery } from "@/entities/site/model/site-interface";
 
 function SitePage() {
+  const [siteQuery, setSiteQuery] = useState<ISiteQuery>({
+    siteNm: "",
+    siteKndCd: "",
+    useYn: "",
+    page: 0,
+    size: 0,
+    sort: [],
+  });
+
+  const { data: siteInfo, refetch } = useQuery({
+    queryKey: [ENDPOINT.CMS_SERVICE.SITES],
+    queryFn: () => SiteApi.siteInfo(siteQuery),
+    enabled: false,
+  });
+
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    refetch();
+  };
+
   const router = useRouter();
   const table = useReactTable({
-    data,
+    data: siteInfo?.content ?? [],
     columns,
     getCoreRowModel: getCoreRowModel(),
   });
 
+  useEffect(() => {
+    refetch();
+  }, []);
+
   return (
     <SitePageLayout>
       <div className="card card-border !mt-6">
         <div className="card card-border !border-[#dbe2e6] !bg-[#eef7ff]">
-          <div className="flex items-center gap-2 p-2">
+          <form onSubmit={handleSubmit} className="flex items-center gap-2 p-2">
             <label htmlFor="" className="mr-2 text-[#657481]">
               사이트명
             </label>
-            <Input className="h-[3.2rem] w-[24rem] rounded-sm !text-[1.3rem]" />
-            <Button className="h-[3.2rem]">조회</Button>
-          </div>
+            <Input
+              className="h-[3.2rem] w-[24rem] rounded-sm !text-[1.3rem]"
+              value={siteQuery.siteNm}
+              onChange={(e) =>
+                setSiteQuery({ ...siteQuery, siteNm: e.target.value })
+              }
+            />
+            <Button className="h-[3.2rem]" type="submit">
+              조회
+            </Button>
+          </form>
         </div>
         <div className="card card-border">
           <div className="card-header">

apps/cs/src/shared/api/client.ts

@@ -1,5 +1,6 @@
 import { Client } from "@common/network";
-import { BASE_URL, SITE_ID } from "../config";
+import { BASE_URL } from "../config/api";
+import { SITE_ID } from "../config/env";
 
 export const client = Client.getInstance({
   baseURL: BASE_URL,

apps/cs/src/shared/api/index.ts

@@ -1 +0,0 @@
-export { client } from "./client";

apps/cs/src/shared/config/api.ts

@@ -8,6 +8,9 @@ export const ENDPOINT = {
     USERS: "/user-service/api/v1/users",
     SILENT_REFRESH: "/user-service/api/v1/users/token/refresh",
   },
+  CMS_SERVICE: {
+    SITES: "/cms-service/api/v1/sites",
+  },
 };
 
 export const JWT_EXPIRATION_TIME = 1800000;

apps/cs/src/shared/config/index.ts

@@ -1,2 +0,0 @@
-export * from "./api";
-export * from "./env";