From 483e0b319a43844aef03db8bd4543dc1ec600846 Mon Sep 17 00:00:00 2001
From: bicochan <chanii8@naver.com>
Date: Wed, 2 Apr 2025 17:47:14 +0900
Subject: [PATCH 01/38] =?UTF-8?q?chore:=20=EC=9D=B4=EB=AF=B8=EC=A7=80=20?=
 =?UTF-8?q?=EC=97=85=EB=A1=9C=EB=93=9C=20=EC=95=88=EB=82=B4=20=EB=AC=B8?=
 =?UTF-8?q?=EA=B5=AC=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/cs/src/pages/image/ui/image-form.tsx | 31 +++++++++++++++--------
 1 file changed, 20 insertions(+), 11 deletions(-)

diff --git a/apps/cs/src/pages/image/ui/image-form.tsx b/apps/cs/src/pages/image/ui/image-form.tsx
index 81ab21726..58ecdd1b1 100644
--- a/apps/cs/src/pages/image/ui/image-form.tsx
+++ b/apps/cs/src/pages/image/ui/image-form.tsx
@@ -213,18 +213,27 @@ function ImageForm({ form, imgSn, handleSave, handleDelete }: ImageFormProps) {
                                   });
                                 }}
                                 customPreview={
-                                  <Label htmlFor="atflCd">
-                                    <div className="relative h-[27rem] w-[48rem] rounded-sm border border-border">
-                                      <p className="absolute left-0 top-0 p-2 text-base leading-none">
-                                        {(upload?.file as File)?.name}
-                                      </p>
-                                      <div></div>
-                                      <Progress
-                                        value={progress}
-                                        className="absolute bottom-0 left-0"
-                                      />
+                                  <>
+                                    <Label htmlFor="atflCd">
+                                      <div className="relative h-[27rem] w-[48rem] rounded-sm border border-border">
+                                        <p className="absolute left-0 top-0 p-2 text-base leading-none">
+                                          {(upload?.file as File)?.name}
+                                        </p>
+                                        <div></div>
+                                        <Progress
+                                          value={progress}
+                                          className="absolute bottom-0 left-0"
+                                        />
+                                      </div>
+                                    </Label>
+                                    <div className="mb-2 text-lg font-medium text-label">
+                                      <ul className="ml-10 list-disc">
+                                        <li>권장 사이즈: 1920x500</li>
+                                        <li>파일 최대 크기: 2MB</li>
+                                        <li>확장자: jpg, jpeg, png 가능</li>
+                                      </ul>
                                     </div>
-                                  </Label>
+                                  </>
                                 }
                               />
                             </FormControl>

From 6df605a1840d340067dca8a88d9b2c0859b22c97 Mon Sep 17 00:00:00 2001
From: bicochan <chanii8@naver.com>
Date: Thu, 3 Apr 2025 09:37:25 +0900
Subject: [PATCH 02/38] =?UTF-8?q?feat:=20loading=20ui=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/cs/app/(with-base-layout)/loading.tsx           |  2 ++
 apps/cs/src/pages/image/ui/image-form.tsx            |  4 ++--
 apps/cs/src/shared/ui/skeleton-page.tsx              | 12 ++++++++++++
 packages/common/components/src/ui/skeleton/index.tsx |  2 +-
 4 files changed, 17 insertions(+), 3 deletions(-)
 create mode 100644 apps/cs/app/(with-base-layout)/loading.tsx
 create mode 100644 apps/cs/src/shared/ui/skeleton-page.tsx

diff --git a/apps/cs/app/(with-base-layout)/loading.tsx b/apps/cs/app/(with-base-layout)/loading.tsx
new file mode 100644
index 000000000..3a3b15932
--- /dev/null
+++ b/apps/cs/app/(with-base-layout)/loading.tsx
@@ -0,0 +1,2 @@
+import { SkeletonPage } from "@/shared/ui/skeleton-page";
+export default SkeletonPage;
diff --git a/apps/cs/src/pages/image/ui/image-form.tsx b/apps/cs/src/pages/image/ui/image-form.tsx
index 58ecdd1b1..9ed24c218 100644
--- a/apps/cs/src/pages/image/ui/image-form.tsx
+++ b/apps/cs/src/pages/image/ui/image-form.tsx
@@ -215,8 +215,8 @@ function ImageForm({ form, imgSn, handleSave, handleDelete }: ImageFormProps) {
                                 customPreview={
                                   <>
                                     <Label htmlFor="atflCd">
-                                      <div className="relative h-[27rem] w-[48rem] rounded-sm border border-border">
-                                        <p className="absolute left-0 top-0 p-2 text-base leading-none">
+                                      <div className="relative h-[27rem] w-[48rem] overflow-hidden rounded-sm border border-border bg-accent">
+                                        <p className="absolute bottom-3 left-0 p-2 text-base leading-none">
                                           {(upload?.file as File)?.name}
                                         </p>
                                         <div></div>
diff --git a/apps/cs/src/shared/ui/skeleton-page.tsx b/apps/cs/src/shared/ui/skeleton-page.tsx
new file mode 100644
index 000000000..fca5c8e76
--- /dev/null
+++ b/apps/cs/src/shared/ui/skeleton-page.tsx
@@ -0,0 +1,12 @@
+import { Skeleton } from "@common/components/ui/skeleton";
+
+function SkeletonPage() {
+  return (
+    <div className="flex flex-col gap-4 p-6">
+      <Skeleton className="h-[6rem] rounded-xl" />
+      <Skeleton className="h-[60rem] rounded-xl" />
+    </div>
+  );
+}
+
+export { SkeletonPage };
diff --git a/packages/common/components/src/ui/skeleton/index.tsx b/packages/common/components/src/ui/skeleton/index.tsx
index 6e10fe239..f10066415 100644
--- a/packages/common/components/src/ui/skeleton/index.tsx
+++ b/packages/common/components/src/ui/skeleton/index.tsx
@@ -6,7 +6,7 @@ function Skeleton({
 }: React.HTMLAttributes<HTMLDivElement>) {
   return (
     <div
-      className={cn("animate-pulse rounded-md bg-muted", className)}
+      className={cn("animate-pulse rounded-md bg-[rgba(0,0,0,0.1)]", className)}
       {...props}
     />
   );

From e3454e11d55f9c68f13e52be8d866f204cd45f90 Mon Sep 17 00:00:00 2001
From: bicochan <chanii8@naver.com>
Date: Thu, 3 Apr 2025 11:40:00 +0900
Subject: [PATCH 03/38] =?UTF-8?q?feat:=20=EC=82=AC=EC=9D=B4=ED=8A=B8=20?=
 =?UTF-8?q?=EA=B2=8C=EC=8B=9C=20=EC=9D=B4=EB=A0=A5=20api=20=EC=9E=91?=
 =?UTF-8?q?=EC=97=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../cs/src/pages/image/api/posting-service.ts |  31 +++++
 ...le-columns.tsx => image-table-columns.tsx} |   0
 .../pages/image/model/posting-interface.ts    |  27 +++++
 .../image/model/posting-table-columns.tsx     |  44 +++++++
 apps/cs/src/pages/image/ui/image-page.tsx     |   2 +-
 apps/cs/src/pages/image/ui/modify-page.tsx    | 110 +++++++++++++++---
 .../pages/menu/ui/content-search-dialog.tsx   |   3 +-
 apps/cs/src/pages/menu/ui/menu-page.tsx       |   1 +
 .../pages/site/ui/ip-management-dialog.tsx    |   1 +
 apps/cs/src/shared/config/api.ts              |   1 +
 10 files changed, 203 insertions(+), 17 deletions(-)
 create mode 100644 apps/cs/src/pages/image/api/posting-service.ts
 rename apps/cs/src/pages/image/model/{table-columns.tsx => image-table-columns.tsx} (100%)
 create mode 100644 apps/cs/src/pages/image/model/posting-interface.ts
 create mode 100644 apps/cs/src/pages/image/model/posting-table-columns.tsx

diff --git a/apps/cs/src/pages/image/api/posting-service.ts b/apps/cs/src/pages/image/api/posting-service.ts
new file mode 100644
index 000000000..a50afe5d3
--- /dev/null
+++ b/apps/cs/src/pages/image/api/posting-service.ts
@@ -0,0 +1,31 @@
+import { client } from "@/shared/api";
+import { ENDPOINT } from "@/shared/config";
+import type { PageableList } from "@/shared/model";
+import type {
+  PostService,
+  PostingParams,
+  Post,
+  WithModePostData,
+} from "../model/posting-interface";
+
+export class PostingApiService implements PostService {
+  public async getPostingHistory(
+    params: PostingParams,
+  ): Promise<PageableList<Post>> {
+    const response = await client.get<PageableList<Post>>(
+      `${ENDPOINT.CMS_SERVICE.SITE_PSTGS}`,
+      { params },
+    );
+    return response.data;
+  }
+
+  public async requestPosting(data: WithModePostData[]): Promise<Post[]> {
+    const response = await client.post<Post[]>(
+      `${ENDPOINT.CMS_SERVICE.SITE_PSTGS}`,
+      data,
+    );
+    return response.data;
+  }
+}
+
+export const PostingApi = new PostingApiService();
diff --git a/apps/cs/src/pages/image/model/table-columns.tsx b/apps/cs/src/pages/image/model/image-table-columns.tsx
similarity index 100%
rename from apps/cs/src/pages/image/model/table-columns.tsx
rename to apps/cs/src/pages/image/model/image-table-columns.tsx
diff --git a/apps/cs/src/pages/image/model/posting-interface.ts b/apps/cs/src/pages/image/model/posting-interface.ts
new file mode 100644
index 000000000..0708bb29f
--- /dev/null
+++ b/apps/cs/src/pages/image/model/posting-interface.ts
@@ -0,0 +1,27 @@
+import type { PageableList, PageableParams } from "@/shared/model";
+
+export interface PostingParams extends PageableParams {
+  pstgTrgtNo: number;
+}
+
+export interface Post {
+  siteId: string;
+  siteNm: string;
+  pstgTypeCd: string;
+  pstgTypeNm: string;
+  pstgTrgtNo: number;
+  pstgBgngDt: string;
+  pstgEndDt: string;
+  pstgPrdSeCd: string;
+  pstgPrdSeNm: string;
+  delYn: string;
+}
+
+export interface WithModePostData extends Post {
+  mode: string;
+}
+
+export interface PostService {
+  getPostingHistory: (params: PostingParams) => Promise<PageableList<Post>>;
+  requestPosting: (data: WithModePostData[]) => Promise<Post[]>;
+}
diff --git a/apps/cs/src/pages/image/model/posting-table-columns.tsx b/apps/cs/src/pages/image/model/posting-table-columns.tsx
new file mode 100644
index 000000000..c3a0830a1
--- /dev/null
+++ b/apps/cs/src/pages/image/model/posting-table-columns.tsx
@@ -0,0 +1,44 @@
+"use client";
+
+import dayjs from "dayjs";
+import { type ColumnDef } from "@tanstack/react-table";
+import { Checkbox } from "@common/components/ui";
+import { type Post } from "./posting-interface";
+
+export const columns: ColumnDef<Post>[] = [
+  {
+    id: "select",
+    header: ({ table }) => (
+      <Checkbox
+        checked={table.getIsAllPageRowsSelected()}
+        onClick={(e) => e.stopPropagation()}
+        onCheckedChange={(checked) =>
+          table.toggleAllPageRowsSelected(!!checked)
+        }
+        className="h-4 w-4 rounded border-gray-300"
+      />
+    ),
+    cell: ({ row }) => (
+      <Checkbox
+        checked={row.getIsSelected()}
+        onClick={(e) => e.stopPropagation()}
+        onCheckedChange={(checked) => row.toggleSelected(!!checked)}
+        className="h-4 w-4 rounded border-gray-300"
+      />
+    ),
+  },
+  {
+    accessorKey: "siteNm",
+    header: "사이트",
+  },
+  {
+    accessorKey: "pstgPrdSeNm",
+    header: "게시기간",
+    cell: ({ row }) => {
+      const pstgPrdSeNm = row.original.pstgPrdSeNm;
+      const pstgBgngDt = row.original.pstgBgngDt;
+      const pstgEndDt = row.original.pstgEndDt;
+      return `${pstgPrdSeNm} (${dayjs(pstgBgngDt).format("YYYY-MM-DD")} ~ ${dayjs(pstgEndDt).format("YYYY-MM-DD")})`;
+    },
+  },
+];
diff --git a/apps/cs/src/pages/image/ui/image-page.tsx b/apps/cs/src/pages/image/ui/image-page.tsx
index 48ffcb55c..810cb0b5c 100644
--- a/apps/cs/src/pages/image/ui/image-page.tsx
+++ b/apps/cs/src/pages/image/ui/image-page.tsx
@@ -11,7 +11,7 @@ import {
 import { Button, DataTable, Input, Label } from "@common/components";
 import { ENDPOINT } from "@/shared/config";
 import { ImageApi } from "../api/image-service";
-import { columns } from "../model/table-columns";
+import { columns } from "../model/image-table-columns";
 import { type Image, type ImageParams } from "../model/image-interface";
 
 function ImagePage() {
diff --git a/apps/cs/src/pages/image/ui/modify-page.tsx b/apps/cs/src/pages/image/ui/modify-page.tsx
index c440c56f9..4ab21de5a 100644
--- a/apps/cs/src/pages/image/ui/modify-page.tsx
+++ b/apps/cs/src/pages/image/ui/modify-page.tsx
@@ -1,24 +1,46 @@
 "use client";
 
+import { useState } from "react";
 import { useRouter } from "next/navigation";
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { useMutation, useQuery } from "@tanstack/react-query";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import {
+  getCoreRowModel,
+  useReactTable,
+  type RowSelectionState,
+} from "@tanstack/react-table";
+import { useConfirm } from "@frontend-opensource/use-react-hooks";
+import { Button, DataTable } from "@common/components/ui";
 import { ENDPOINT } from "@/shared/config";
-import { imageFormSchema, type ImageFormData } from "../model/image-interface";
-import { ImageApi } from "../api/image-service";
-import { ImageForm } from "./image-form";
 import { useAlertStore } from "@/shared/lib/use-alert-store";
+import { ConfirmDialog } from "@/shared/ui/confirm-dialog";
+import { imageFormSchema, type ImageFormData } from "../model/image-interface";
+import type { WithModePostData } from "../model/posting-interface";
+import { columns } from "../model/posting-table-columns";
+import { ImageApi } from "../api/image-service";
+import { PostingApi } from "../api/posting-service";
+import { ImageForm } from "./image-form";
 
 function ModifyPage({ serial }: { serial: string }) {
   const router = useRouter();
+  const { confirm } = useConfirm();
+  const queryClient = useQueryClient();
   const { setMessage: alert } = useAlertStore((state) => state);
 
+  const [onConfirm, setOnConfirm] = useState(false);
+  const [rowSelection, setRowSelection] = useState<RowSelectionState>({});
+
   const { data: imageDetail } = useQuery({
     queryKey: [ENDPOINT.CMS_SERVICE.IMAGES, serial],
     queryFn: () => ImageApi.getImageInfo(serial),
   });
 
+  const { data: postHistory } = useQuery({
+    queryKey: [ENDPOINT.CMS_SERVICE.SITE_PSTGS, serial],
+    queryFn: () => PostingApi.getPostingHistory({ pstgTrgtNo: Number(serial) }),
+  });
+
   const { mutateAsync: updateImage } = useMutation({
     mutationFn: (data: ImageFormData) => ImageApi.updateImage(serial, data),
     onSuccess: () => {
@@ -33,23 +55,83 @@ function ModifyPage({ serial }: { serial: string }) {
     },
   });
 
+  const { mutateAsync: requestPosting } = useMutation({
+    mutationFn: (data: WithModePostData[]) => PostingApi.requestPosting(data),
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: [ENDPOINT.CMS_SERVICE.SITE_PSTGS, serial],
+      });
+    },
+  });
+
   const form = useForm<ImageFormData>({
     resolver: zodResolver(imageFormSchema),
     values: imageDetail,
   });
 
+  const table = useReactTable({
+    data: postHistory?.content ?? [],
+    columns,
+    state: {
+      rowSelection,
+    },
+    enableMultiRowSelection: true,
+    getCoreRowModel: getCoreRowModel(),
+    onRowSelectionChange: setRowSelection,
+  });
+
+  const handleDeletePostingHistory = async () => {
+    const data = table.getFilteredSelectedRowModel().flatRows.map((row) => ({
+      ...row.original,
+      mode: "D",
+    }));
+
+    setOnConfirm(true);
+    if (await confirm("삭제하시겠습니까?")) {
+      setOnConfirm(false);
+      await requestPosting(data);
+      alert("삭제되었습니다.");
+    }
+    setOnConfirm(false);
+  };
+
   return (
-    <div className="card card-border !mt-6">
-      <div className="card-header">
-        <h3 className="text-2xl font-medium text-label">이미지 수정</h3>
+    <>
+      <div className="mt-6 flex flex-col">
+        <div className="card card-border">
+          <div className="card-header">
+            <h3 className="text-2xl font-medium text-label">이미지 수정</h3>
+          </div>
+          <ImageForm
+            form={form}
+            imgSn={serial}
+            handleSave={updateImage}
+            handleDelete={deleteImage}
+          />
+        </div>
+        <div className="card card-border">
+          <div className="card-header">
+            <h3 className="text-2xl font-medium text-label">
+              사이트 게시 이력
+            </h3>
+          </div>
+          <div className="card">
+            <div className="mb-4 flex justify-end">
+              <Button
+                size="sm"
+                color="red"
+                disabled={!table.getFilteredSelectedRowModel().flatRows.length}
+                onClick={handleDeletePostingHistory}
+              >
+                이력삭제
+              </Button>
+            </div>
+            <DataTable table={table} />
+          </div>
+        </div>
       </div>
-      <ImageForm
-        form={form}
-        imgSn={serial}
-        handleSave={updateImage}
-        handleDelete={deleteImage}
-      />
-    </div>
+      <ConfirmDialog open={onConfirm} />
+    </>
   );
 }
 
diff --git a/apps/cs/src/pages/menu/ui/content-search-dialog.tsx b/apps/cs/src/pages/menu/ui/content-search-dialog.tsx
index 66d939842..1cfa122a2 100644
--- a/apps/cs/src/pages/menu/ui/content-search-dialog.tsx
+++ b/apps/cs/src/pages/menu/ui/content-search-dialog.tsx
@@ -33,8 +33,7 @@ function ContentSearchDialog({
 
   const { data: contentList, refetch } = useQuery({
     queryKey: [ENDPOINT.CMS_SERVICE.CONTENTS],
-    queryFn: () =>
-      ContentApi.getContentList({ contsTtl, useYn: "Y", page: 0, size: 100 }),
+    queryFn: () => ContentApi.getContentList({ contsTtl }),
     enabled: false,
   });
 
diff --git a/apps/cs/src/pages/menu/ui/menu-page.tsx b/apps/cs/src/pages/menu/ui/menu-page.tsx
index 71ad0042b..56d2a086c 100644
--- a/apps/cs/src/pages/menu/ui/menu-page.tsx
+++ b/apps/cs/src/pages/menu/ui/menu-page.tsx
@@ -179,6 +179,7 @@ function MenuPage() {
       setOnConfirm(false);
       deleteMenu(selectedMenu!.menuCd!);
     }
+    setOnConfirm(false);
   };
 
   const handleAddMenu = () => {
diff --git a/apps/cs/src/pages/site/ui/ip-management-dialog.tsx b/apps/cs/src/pages/site/ui/ip-management-dialog.tsx
index dd9ee3748..5895d0be3 100644
--- a/apps/cs/src/pages/site/ui/ip-management-dialog.tsx
+++ b/apps/cs/src/pages/site/ui/ip-management-dialog.tsx
@@ -90,6 +90,7 @@ function IPManagementDialog({
       await mutateAsync(data.ips);
       alert("저장되었습니다.");
     }
+    setOnConfirm(false);
   };
 
   const handleAddIP = () => {
diff --git a/apps/cs/src/shared/config/api.ts b/apps/cs/src/shared/config/api.ts
index 4430285d8..0a1ec0122 100644
--- a/apps/cs/src/shared/config/api.ts
+++ b/apps/cs/src/shared/config/api.ts
@@ -21,6 +21,7 @@ export const ENDPOINT = {
     CONTENTS: "/cms-service/api/v1/contents",
     USER_OGNZ: "/cms-service/api/v1/user-ognz",
     IMAGES: "/cms-service/api/v1/images",
+    SITE_PSTGS: "/cms-service/api/v1/site-pstgs",
   },
   BOARD_SERVICE: {
     BBS: "/board-service/api/v1/bbs",

From e659f47d1de64e85918cfba203ff8e9f6618cfb8 Mon Sep 17 00:00:00 2001
From: bicochan <chanii8@naver.com>
Date: Thu, 3 Apr 2025 17:37:35 +0900
Subject: [PATCH 04/38] =?UTF-8?q?feat:=20=EC=82=AC=EC=9D=B4=ED=8A=B8=20?=
 =?UTF-8?q?=EB=B0=98=EC=98=81=20=ED=8F=BC=20=EC=9E=91=EC=97=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../posting}/api/posting-service.ts           |   4 +-
 apps/cs/src/entities/posting/index.ts         |   7 +
 .../posting/model/posting-interface.ts        |  43 ++++
 .../entities/posting/ui/posting-dialog.tsx    | 197 ++++++++++++++++++
 apps/cs/src/entities/site/api/site-service.ts |   2 +-
 .../src/pages/image/model/image-interface.ts  |   4 +-
 .../pages/image/model/posting-interface.ts    |  27 ---
 .../image/model/posting-table-columns.tsx     |   4 +-
 apps/cs/src/pages/image/ui/image-form.tsx     |   2 +
 apps/cs/src/pages/image/ui/image-page.tsx     |  45 +++-
 apps/cs/src/pages/image/ui/modify-page.tsx    |  11 +-
 apps/cs/src/pages/menu/ui/menu-form.tsx       |   3 +
 apps/cs/src/pages/menu/ui/menu-page.tsx       |   2 +-
 apps/cs/src/pages/site/ui/site-form.tsx       |   2 +
 .../common/components/src/ui/layout/vbase.tsx |   2 +-
 15 files changed, 304 insertions(+), 51 deletions(-)
 rename apps/cs/src/{pages/image => entities/posting}/api/posting-service.ts (88%)
 create mode 100644 apps/cs/src/entities/posting/index.ts
 create mode 100644 apps/cs/src/entities/posting/model/posting-interface.ts
 create mode 100644 apps/cs/src/entities/posting/ui/posting-dialog.tsx
 delete mode 100644 apps/cs/src/pages/image/model/posting-interface.ts

diff --git a/apps/cs/src/pages/image/api/posting-service.ts b/apps/cs/src/entities/posting/api/posting-service.ts
similarity index 88%
rename from apps/cs/src/pages/image/api/posting-service.ts
rename to apps/cs/src/entities/posting/api/posting-service.ts
index a50afe5d3..b14110653 100644
--- a/apps/cs/src/pages/image/api/posting-service.ts
+++ b/apps/cs/src/entities/posting/api/posting-service.ts
@@ -5,7 +5,7 @@ import type {
   PostService,
   PostingParams,
   Post,
-  WithModePostData,
+  WithModePost,
 } from "../model/posting-interface";
 
 export class PostingApiService implements PostService {
@@ -19,7 +19,7 @@ export class PostingApiService implements PostService {
     return response.data;
   }
 
-  public async requestPosting(data: WithModePostData[]): Promise<Post[]> {
+  public async requestPosting(data: WithModePost[]): Promise<Post[]> {
     const response = await client.post<Post[]>(
       `${ENDPOINT.CMS_SERVICE.SITE_PSTGS}`,
       data,
diff --git a/apps/cs/src/entities/posting/index.ts b/apps/cs/src/entities/posting/index.ts
new file mode 100644
index 000000000..85416783b
--- /dev/null
+++ b/apps/cs/src/entities/posting/index.ts
@@ -0,0 +1,7 @@
+export { PostingApi } from "./api/posting-service";
+export {
+  POSTING_TYPE,
+  type Post,
+  type WithModePost,
+} from "./model/posting-interface";
+export { PostingDialog } from "./ui/posting-dialog";
diff --git a/apps/cs/src/entities/posting/model/posting-interface.ts b/apps/cs/src/entities/posting/model/posting-interface.ts
new file mode 100644
index 000000000..3adaf3404
--- /dev/null
+++ b/apps/cs/src/entities/posting/model/posting-interface.ts
@@ -0,0 +1,43 @@
+import type { PageableList, PageableParams } from "@/shared/model";
+import { z } from "zod";
+
+export const POSTING_TYPE = {
+  POPUP: "POPUP",
+  BANNER: "BANNER",
+  IMAGE: "IMAGE",
+} as const;
+
+export type PostingType = (typeof POSTING_TYPE)[keyof typeof POSTING_TYPE];
+
+export interface PostingParams extends PageableParams {
+  pstgTrgtNo: number;
+}
+
+export const postSchema = z.object({
+  siteId: z.string(),
+  siteNm: z.string(),
+  pstgTypeCd: z.string(),
+  pstgTypeNm: z.string(),
+  pstgTrgtNo: z.number(),
+  pstgBgngDt: z.string(),
+  pstgEndDt: z.string(),
+  pstgPrdSeCd: z.string(),
+  pstgPrdSeNm: z.string(),
+  delYn: z.string(),
+});
+
+export const withModePostSchema = postSchema
+  .extend({
+    mode: z.string(),
+  })
+  .omit({
+    siteNm: true,
+  });
+
+export type Post = z.infer<typeof postSchema>;
+export type WithModePost = z.infer<typeof withModePostSchema>;
+
+export interface PostService {
+  getPostingHistory: (params: PostingParams) => Promise<PageableList<Post>>;
+  requestPosting: (data: WithModePost[]) => Promise<Post[]>;
+}
diff --git a/apps/cs/src/entities/posting/ui/posting-dialog.tsx b/apps/cs/src/entities/posting/ui/posting-dialog.tsx
new file mode 100644
index 000000000..c28448b50
--- /dev/null
+++ b/apps/cs/src/entities/posting/ui/posting-dialog.tsx
@@ -0,0 +1,197 @@
+import { useState } from "react";
+import { useFieldArray, useForm } from "react-hook-form";
+import { useQuery } from "@tanstack/react-query";
+import {
+  Dialog,
+  DialogTrigger,
+  Button,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  Badge,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+  Checkbox,
+  Select,
+} from "@common/components/ui";
+import { CodeSelect } from "@/entities/code";
+import { SiteApi, type Site } from "@/entities/site";
+import type { PageableList } from "@/shared/model";
+import { ENDPOINT } from "@/shared/config";
+import { type PostingType } from "../model/posting-interface";
+
+type PostingTarget = {
+  pstgTrgtNm: string;
+  pstgTrgtNo: number;
+};
+
+type PostingDialogProps = {
+  postingType: PostingType;
+  postingTargets: PostingTarget[];
+};
+
+const POSTING_TYPE_LABEL = {
+  POPUP: "팝업",
+  BANNER: "배너",
+  IMAGE: "이미지",
+} as const;
+
+function PostingDialog({ postingType, postingTargets }: PostingDialogProps) {
+  const [selectedRows, setSelectedRows] = useState<number[]>([]);
+
+  const { data: siteList } = useQuery<PageableList<Site>>({
+    queryKey: [ENDPOINT.CMS_SERVICE.SITES],
+    queryFn: () => SiteApi.getSiteList({}),
+  });
+
+  const form = useForm();
+  const { fields, append, replace } = useFieldArray({
+    control: form.control,
+    name: "pstg",
+  });
+
+  const handleSelectAll = () => {
+    if (selectedRows.length === (siteList?.content.length ?? 0)) {
+      initialize();
+    } else {
+      setSelectedRows(siteList?.content.map((_, i) => i) ?? []);
+      handleAllSelectRow();
+    }
+  };
+
+  const handleSelectRow = (i: number) => {
+    const isSelected = selectedRows.includes(i);
+    setSelectedRows((prev) =>
+      isSelected ? prev.filter((j) => j !== i) : [...prev, i],
+    );
+
+    if (isSelected) {
+      const siteId = siteList?.content[i]?.siteId;
+      if (!siteId) return;
+
+      handleRemoveFields(siteId);
+      return;
+    }
+
+    handleAppendFields(i);
+  };
+
+  const handleAllSelectRow = () => {
+    replace([]);
+    siteList?.content.forEach((_, i) => {
+      handleAppendFields(i);
+    });
+  };
+
+  const handleAppendFields = (i: number) => {
+    for (const target of postingTargets) {
+      append({
+        siteId: siteList?.content[i]?.siteId ?? "",
+        pstgTypeCd: postingType,
+        pstgTrgtNo: target.pstgTrgtNo,
+        pstgBgngDt: "",
+        pstgEndDt: "",
+        pstgPrdSeCd: "",
+        delYn: "N",
+        mode: "C",
+      });
+    }
+  };
+
+  const handleRemoveFields = (siteId: string) => {
+    const filteredFields = fields.filter(
+      (field) => "siteId" in field && field.siteId !== siteId,
+    );
+    replace(filteredFields);
+  };
+
+  const handleOpenChange = (open: boolean) => {
+    if (open) return true;
+    initialize();
+  };
+
+  const initialize = () => {
+    setSelectedRows([]);
+    replace([]);
+  };
+
+  const isAllSelected =
+    siteList && selectedRows.length === siteList.content.length;
+
+  return (
+    <Dialog onOpenChange={handleOpenChange}>
+      <DialogTrigger asChild>
+        <Button color="emerald" disabled={!postingTargets.length}>
+          <i className="diveicon di-layer" />
+          사이트반영
+        </Button>
+      </DialogTrigger>
+      <DialogContent className="max-w-[68rem]" aria-describedby={undefined}>
+        <DialogHeader>
+          <DialogTitle>사이트 반영</DialogTitle>
+        </DialogHeader>
+        <div className="card bg-accent !p-4">
+          <h3 className="font-semibold">
+            선택된 {POSTING_TYPE_LABEL[postingType]}
+          </h3>
+          <div className="mt-4 flex flex-wrap gap-3">
+            {postingTargets.map((target) => (
+              <Badge key={target.pstgTrgtNo}>
+                <span className="text-xl">{target.pstgTrgtNm}</span>
+              </Badge>
+            ))}
+          </div>
+        </div>
+        <div className="m-2 max-h-[28rem] overflow-auto">
+          <Table variant="secondary">
+            <colgroup>
+              <col width="10%" />
+              <col width="25%" />
+              <col width="65%" />
+            </colgroup>
+            <TableHeader className="sticky top-0 z-10 bg-accent">
+              <TableRow>
+                <TableHead className="!px-0">
+                  <Checkbox
+                    checked={isAllSelected}
+                    onCheckedChange={handleSelectAll}
+                  />
+                </TableHead>
+                <TableHead>사이트명</TableHead>
+                <TableHead>게시 구분</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {siteList?.content.map((site, i) => (
+                <TableRow key={site.siteId}>
+                  <TableCell align="center" className="!px-0">
+                    <Checkbox
+                      checked={selectedRows.includes(i)}
+                      onCheckedChange={() => handleSelectRow(i)}
+                    />
+                  </TableCell>
+                  <TableCell align="center">{site.siteNm}</TableCell>
+                  <TableCell align="left">
+                    <PostingPeriodSelect disabled={!selectedRows.includes(i)} />
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+function PostingPeriodSelect({
+  ...props
+}: React.ComponentPropsWithoutRef<typeof Select>) {
+  return <CodeSelect upCd="PSTGPRDCD" {...props} />;
+}
+
+export { PostingDialog };
diff --git a/apps/cs/src/entities/site/api/site-service.ts b/apps/cs/src/entities/site/api/site-service.ts
index 37fd7e49a..68c520093 100644
--- a/apps/cs/src/entities/site/api/site-service.ts
+++ b/apps/cs/src/entities/site/api/site-service.ts
@@ -10,7 +10,7 @@ import {
 } from "../model/site-interface";
 
 export class SiteApiService implements SiteService {
-  public async getSiteList(params: SiteParams): Promise<SiteList> {
+  public async getSiteList(params?: SiteParams): Promise<SiteList> {
     const response = await client.get<SiteList>(
       `${ENDPOINT.CMS_SERVICE.SITES}`,
       { params },
diff --git a/apps/cs/src/pages/image/model/image-interface.ts b/apps/cs/src/pages/image/model/image-interface.ts
index 7748589c7..32065968d 100644
--- a/apps/cs/src/pages/image/model/image-interface.ts
+++ b/apps/cs/src/pages/image/model/image-interface.ts
@@ -11,8 +11,8 @@ export type ImageType = (typeof IMAGE_TYPE)[keyof typeof IMAGE_TYPE];
 
 export interface ImageParams extends PageableParams {
   keyword: string;
-  imgTypeCd: string;
-  useYn: string;
+  imgTypeCd?: string;
+  useYn?: string;
 }
 
 export interface Image {
diff --git a/apps/cs/src/pages/image/model/posting-interface.ts b/apps/cs/src/pages/image/model/posting-interface.ts
deleted file mode 100644
index 0708bb29f..000000000
--- a/apps/cs/src/pages/image/model/posting-interface.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import type { PageableList, PageableParams } from "@/shared/model";
-
-export interface PostingParams extends PageableParams {
-  pstgTrgtNo: number;
-}
-
-export interface Post {
-  siteId: string;
-  siteNm: string;
-  pstgTypeCd: string;
-  pstgTypeNm: string;
-  pstgTrgtNo: number;
-  pstgBgngDt: string;
-  pstgEndDt: string;
-  pstgPrdSeCd: string;
-  pstgPrdSeNm: string;
-  delYn: string;
-}
-
-export interface WithModePostData extends Post {
-  mode: string;
-}
-
-export interface PostService {
-  getPostingHistory: (params: PostingParams) => Promise<PageableList<Post>>;
-  requestPosting: (data: WithModePostData[]) => Promise<Post[]>;
-}
diff --git a/apps/cs/src/pages/image/model/posting-table-columns.tsx b/apps/cs/src/pages/image/model/posting-table-columns.tsx
index c3a0830a1..a43cf8693 100644
--- a/apps/cs/src/pages/image/model/posting-table-columns.tsx
+++ b/apps/cs/src/pages/image/model/posting-table-columns.tsx
@@ -1,9 +1,9 @@
 "use client";
 
 import dayjs from "dayjs";
-import { type ColumnDef } from "@tanstack/react-table";
+import type { ColumnDef } from "@tanstack/react-table";
 import { Checkbox } from "@common/components/ui";
-import { type Post } from "./posting-interface";
+import type { Post } from "@/entities/posting";
 
 export const columns: ColumnDef<Post>[] = [
   {
diff --git a/apps/cs/src/pages/image/ui/image-form.tsx b/apps/cs/src/pages/image/ui/image-form.tsx
index 9ed24c218..e9fcdc9a6 100644
--- a/apps/cs/src/pages/image/ui/image-form.tsx
+++ b/apps/cs/src/pages/image/ui/image-form.tsx
@@ -55,6 +55,7 @@ function ImageForm({ form, imgSn, handleSave, handleDelete }: ImageFormProps) {
 
     await handleConfirm(async () => {
       if (await confirm(confirmMessage)) {
+        setOnConfirm(false);
         await handleSave(data);
       }
     });
@@ -63,6 +64,7 @@ function ImageForm({ form, imgSn, handleSave, handleDelete }: ImageFormProps) {
   const onDelete = async () => {
     await handleConfirm(async () => {
       if (await confirm("삭제하시겠습니까?")) {
+        setOnConfirm(false);
         await handleDelete?.();
       }
     });
diff --git a/apps/cs/src/pages/image/ui/image-page.tsx b/apps/cs/src/pages/image/ui/image-page.tsx
index 810cb0b5c..025639cd5 100644
--- a/apps/cs/src/pages/image/ui/image-page.tsx
+++ b/apps/cs/src/pages/image/ui/image-page.tsx
@@ -9,22 +9,23 @@ import {
   type RowSelectionState,
 } from "@tanstack/react-table";
 import { Button, DataTable, Input, Label } from "@common/components";
+import { POSTING_TYPE, PostingDialog } from "@/entities/posting";
 import { ENDPOINT } from "@/shared/config";
 import { ImageApi } from "../api/image-service";
 import { columns } from "../model/image-table-columns";
 import { type Image, type ImageParams } from "../model/image-interface";
 
+type PostingTarget = {
+  pstgTrgtNm: string;
+  pstgTrgtNo: number;
+};
+
 function ImagePage() {
   const router = useRouter();
 
   const [rowSelection, setRowSelection] = useState<RowSelectionState>({});
-  const [imageQuery, setImageQuery] = useState<ImageParams>({
-    keyword: "",
-    imgTypeCd: "",
-    useYn: "",
-    page: 0,
-    size: 100,
-  });
+  const [postingTargets, setPostingTargets] = useState<PostingTarget[]>([]);
+  const [imageQuery, setImageQuery] = useState<ImageParams>({ keyword: "" });
 
   const { data: imageList, refetch } = useQuery({
     queryKey: [ENDPOINT.CMS_SERVICE.IMAGES],
@@ -52,6 +53,22 @@ function ImagePage() {
     router.push(`/image/register/${row.imgSn}`);
   };
 
+  useEffect(() => {
+    const postingTargets = table
+      .getFilteredSelectedRowModel()
+      .rows.map((row) => ({
+        pstgTrgtNm: row.original.imgTtl,
+        pstgTrgtNo: row.original.imgSn,
+      }));
+
+    if (!postingTargets.length) {
+      setPostingTargets([]);
+      return;
+    }
+
+    setPostingTargets(postingTargets);
+  }, [rowSelection]);
+
   useEffect(() => {
     refetch();
   }, []);
@@ -77,8 +94,18 @@ function ImagePage() {
       </div>
       <div className="card card-border">
         <div className="card-header">
-          <h3 className="text-2xl font-medium text-label">이미지 목록</h3>
-          <Button onClick={() => router.push("/image/register")}>등록</Button>
+          <div className="flex w-full items-center justify-between">
+            <h3 className="text-2xl font-medium text-label">이미지 목록</h3>
+            <div className="flex gap-2">
+              <PostingDialog
+                postingType={POSTING_TYPE.IMAGE}
+                postingTargets={postingTargets}
+              />
+              <Button onClick={() => router.push("/image/register")}>
+                등록
+              </Button>
+            </div>
+          </div>
         </div>
         <div className="card !m-[1.2rem] h-[49rem] overflow-auto !p-0">
           <DataTable table={table} onRowClick={handleRowClick} />
diff --git a/apps/cs/src/pages/image/ui/modify-page.tsx b/apps/cs/src/pages/image/ui/modify-page.tsx
index 4ab21de5a..6704fffee 100644
--- a/apps/cs/src/pages/image/ui/modify-page.tsx
+++ b/apps/cs/src/pages/image/ui/modify-page.tsx
@@ -12,14 +12,13 @@ import {
 } from "@tanstack/react-table";
 import { useConfirm } from "@frontend-opensource/use-react-hooks";
 import { Button, DataTable } from "@common/components/ui";
-import { ENDPOINT } from "@/shared/config";
+import { PostingApi, type WithModePost } from "@/entities/posting";
 import { useAlertStore } from "@/shared/lib/use-alert-store";
 import { ConfirmDialog } from "@/shared/ui/confirm-dialog";
+import { ENDPOINT } from "@/shared/config";
 import { imageFormSchema, type ImageFormData } from "../model/image-interface";
-import type { WithModePostData } from "../model/posting-interface";
 import { columns } from "../model/posting-table-columns";
 import { ImageApi } from "../api/image-service";
-import { PostingApi } from "../api/posting-service";
 import { ImageForm } from "./image-form";
 
 function ModifyPage({ serial }: { serial: string }) {
@@ -56,7 +55,7 @@ function ModifyPage({ serial }: { serial: string }) {
   });
 
   const { mutateAsync: requestPosting } = useMutation({
-    mutationFn: (data: WithModePostData[]) => PostingApi.requestPosting(data),
+    mutationFn: (data: WithModePost[]) => PostingApi.requestPosting(data),
     onSuccess: () => {
       queryClient.invalidateQueries({
         queryKey: [ENDPOINT.CMS_SERVICE.SITE_PSTGS, serial],
@@ -81,7 +80,7 @@ function ModifyPage({ serial }: { serial: string }) {
   });
 
   const handleDeletePostingHistory = async () => {
-    const data = table.getFilteredSelectedRowModel().flatRows.map((row) => ({
+    const data = table.getFilteredSelectedRowModel().rows.map((row) => ({
       ...row.original,
       mode: "D",
     }));
@@ -120,7 +119,7 @@ function ModifyPage({ serial }: { serial: string }) {
               <Button
                 size="sm"
                 color="red"
-                disabled={!table.getFilteredSelectedRowModel().flatRows.length}
+                disabled={!table.getFilteredSelectedRowModel().rows.length}
                 onClick={handleDeletePostingHistory}
               >
                 이력삭제
diff --git a/apps/cs/src/pages/menu/ui/menu-form.tsx b/apps/cs/src/pages/menu/ui/menu-form.tsx
index a4f21128b..8d2336e33 100644
--- a/apps/cs/src/pages/menu/ui/menu-form.tsx
+++ b/apps/cs/src/pages/menu/ui/menu-form.tsx
@@ -52,6 +52,7 @@ function MenuForm({
   const onCreate = async (data: MenuFormData) => {
     await handleConfirm(async () => {
       if (await confirm("저장하시겠습니까?")) {
+        setOnConfirm(false);
         handleCreate(data);
       }
     });
@@ -60,6 +61,7 @@ function MenuForm({
   const onUpdate = async (data: MenuFormData) => {
     await handleConfirm(async () => {
       if (await confirm("수정하시겠습니까?")) {
+        setOnConfirm(false);
         handleUpdate({ menuCd: menuCd!, data });
       }
     });
@@ -68,6 +70,7 @@ function MenuForm({
   const onDelete = () => {
     handleConfirm(async () => {
       if (await confirm("삭제하시겠습니까?")) {
+        setOnConfirm(false);
         handleDelete?.(menuCd!);
       }
     });
diff --git a/apps/cs/src/pages/menu/ui/menu-page.tsx b/apps/cs/src/pages/menu/ui/menu-page.tsx
index 56d2a086c..8e474b0b6 100644
--- a/apps/cs/src/pages/menu/ui/menu-page.tsx
+++ b/apps/cs/src/pages/menu/ui/menu-page.tsx
@@ -62,7 +62,7 @@ function MenuPage() {
 
   const { data: options } = useQuery({
     queryKey: [ENDPOINT.CMS_SERVICE.SITES],
-    queryFn: () => SiteApi.getSiteList({}),
+    queryFn: () => SiteApi.getSiteList(),
     select: (data) =>
       data.content.map((site) => ({
         label: site.siteNm,
diff --git a/apps/cs/src/pages/site/ui/site-form.tsx b/apps/cs/src/pages/site/ui/site-form.tsx
index cbf90c95b..ea4265f4b 100644
--- a/apps/cs/src/pages/site/ui/site-form.tsx
+++ b/apps/cs/src/pages/site/ui/site-form.tsx
@@ -58,6 +58,7 @@ function SiteForm({ form, siteId, handleSave, handleDelete }: SiteFormProps) {
 
     await handleConfirm(async () => {
       if (await confirm(confirmMessage)) {
+        setOnConfirm(false);
         handleSave(data);
       }
     });
@@ -66,6 +67,7 @@ function SiteForm({ form, siteId, handleSave, handleDelete }: SiteFormProps) {
   const onDelete = async () => {
     await handleConfirm(async () => {
       if (await confirm("삭제하시겠습니까?")) {
+        setOnConfirm(false);
         handleDelete?.();
       }
     });
diff --git a/packages/common/components/src/ui/layout/vbase.tsx b/packages/common/components/src/ui/layout/vbase.tsx
index d73f14254..48cc4639b 100644
--- a/packages/common/components/src/ui/layout/vbase.tsx
+++ b/packages/common/components/src/ui/layout/vbase.tsx
@@ -15,7 +15,7 @@ export function VBaseLayout({
   queryClient?: QueryClient;
 }) {
   return (
-    <QueryProvider client={queryClient}>
+    <QueryProvider queryClient={queryClient}>
       <SidebarProvider>
         <div className="flex-1">
           <Header viewOnly />

From badb6821631dc0902630f33cd334ac3faa8d8599 Mon Sep 17 00:00:00 2001
From: bicochan <chanii8@naver.com>
Date: Thu, 3 Apr 2025 18:39:54 +0900
Subject: [PATCH 05/38] =?UTF-8?q?refactor:=20=EC=82=AC=EC=9D=B4=ED=8A=B8?=
 =?UTF-8?q?=20=EB=B0=98=EC=98=81=20=ED=8F=BC=20=EB=A6=AC=ED=8C=A9=ED=86=A0?=
 =?UTF-8?q?=EB=A7=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../entities/posting/ui/posting-dialog.tsx    | 119 ++++++++++--------
 1 file changed, 69 insertions(+), 50 deletions(-)

diff --git a/apps/cs/src/entities/posting/ui/posting-dialog.tsx b/apps/cs/src/entities/posting/ui/posting-dialog.tsx
index c28448b50..ed0e25fe4 100644
--- a/apps/cs/src/entities/posting/ui/posting-dialog.tsx
+++ b/apps/cs/src/entities/posting/ui/posting-dialog.tsx
@@ -24,15 +24,15 @@ import type { PageableList } from "@/shared/model";
 import { ENDPOINT } from "@/shared/config";
 import { type PostingType } from "../model/posting-interface";
 
-type PostingTarget = {
+interface PostingTarget {
   pstgTrgtNm: string;
   pstgTrgtNo: number;
-};
+}
 
-type PostingDialogProps = {
+interface PostingDialogProps {
   postingType: PostingType;
   postingTargets: PostingTarget[];
-};
+}
 
 const POSTING_TYPE_LABEL = {
   POPUP: "팝업",
@@ -42,6 +42,9 @@ const POSTING_TYPE_LABEL = {
 
 function PostingDialog({ postingType, postingTargets }: PostingDialogProps) {
   const [selectedRows, setSelectedRows] = useState<number[]>([]);
+  const [rememberSelectValues, setRememberSelectValues] = useState<
+    Record<string, string>
+  >({});
 
   const { data: siteList } = useQuery<PageableList<Site>>({
     queryKey: [ENDPOINT.CMS_SERVICE.SITES],
@@ -54,13 +57,49 @@ function PostingDialog({ postingType, postingTargets }: PostingDialogProps) {
     name: "pstg",
   });
 
-  const handleSelectAll = () => {
-    if (selectedRows.length === (siteList?.content.length ?? 0)) {
-      initialize();
-    } else {
-      setSelectedRows(siteList?.content.map((_, i) => i) ?? []);
-      handleAllSelectRow();
-    }
+  const isAllSelected =
+    siteList && selectedRows.length === siteList.content.length;
+
+  const initialize = () => {
+    setSelectedRows([]);
+    replace([]);
+  };
+
+  const handleOpenChange = (open: boolean) => {
+    if (open) return true;
+    initialize();
+  };
+
+  const handleAppendFields = (i: number) => {
+    const siteId = siteList?.content[i]?.siteId ?? "";
+    const newFields = postingTargets.map((target) => ({
+      siteId,
+      pstgTypeCd: postingType,
+      pstgTrgtNo: target.pstgTrgtNo,
+      pstgBgngDt: "",
+      pstgEndDt: "",
+      pstgPrdSeCd: rememberSelectValues[siteId] ?? "",
+      delYn: "N",
+      mode: "C",
+    }));
+    append(newFields);
+  };
+
+  const handleUpdateFields =
+    (siteId: string) => (obj: Record<string, unknown>) => {
+      const updatedFields = fields.map((field) =>
+        "siteId" in field && field.siteId === siteId
+          ? { ...field, ...obj }
+          : field,
+      );
+      replace(updatedFields);
+    };
+
+  const handleRemoveFields = (siteId: string) => {
+    const filteredFields = fields.filter(
+      (field) => "siteId" in field && field.siteId !== siteId,
+    );
+    replace(filteredFields);
   };
 
   const handleSelectRow = (i: number) => {
@@ -72,7 +111,6 @@ function PostingDialog({ postingType, postingTargets }: PostingDialogProps) {
     if (isSelected) {
       const siteId = siteList?.content[i]?.siteId;
       if (!siteId) return;
-
       handleRemoveFields(siteId);
       return;
     }
@@ -80,48 +118,26 @@ function PostingDialog({ postingType, postingTargets }: PostingDialogProps) {
     handleAppendFields(i);
   };
 
-  const handleAllSelectRow = () => {
-    replace([]);
-    siteList?.content.forEach((_, i) => {
-      handleAppendFields(i);
-    });
-  };
-
-  const handleAppendFields = (i: number) => {
-    for (const target of postingTargets) {
-      append({
-        siteId: siteList?.content[i]?.siteId ?? "",
-        pstgTypeCd: postingType,
-        pstgTrgtNo: target.pstgTrgtNo,
-        pstgBgngDt: "",
-        pstgEndDt: "",
-        pstgPrdSeCd: "",
-        delYn: "N",
-        mode: "C",
-      });
+  const handleSelectAll = () => {
+    if (selectedRows.length === (siteList?.content.length ?? 0)) {
+      initialize();
+    } else {
+      setSelectedRows(siteList?.content.map((_, i) => i) ?? []);
+      replace([]);
+      siteList?.content.forEach((_, i) => handleAppendFields(i));
     }
   };
 
-  const handleRemoveFields = (siteId: string) => {
-    const filteredFields = fields.filter(
-      (field) => "siteId" in field && field.siteId !== siteId,
-    );
-    replace(filteredFields);
+  const handleSelectValueChange = (siteId: string) => (value: string) => {
+    setRememberSelectValues((prev) => ({
+      ...prev,
+      [siteId]: value,
+    }));
+    handleUpdateFields(siteId)({
+      pstgPrdSeCd: value,
+    });
   };
 
-  const handleOpenChange = (open: boolean) => {
-    if (open) return true;
-    initialize();
-  };
-
-  const initialize = () => {
-    setSelectedRows([]);
-    replace([]);
-  };
-
-  const isAllSelected =
-    siteList && selectedRows.length === siteList.content.length;
-
   return (
     <Dialog onOpenChange={handleOpenChange}>
       <DialogTrigger asChild>
@@ -176,7 +192,10 @@ function PostingDialog({ postingType, postingTargets }: PostingDialogProps) {
                   </TableCell>
                   <TableCell align="center">{site.siteNm}</TableCell>
                   <TableCell align="left">
-                    <PostingPeriodSelect disabled={!selectedRows.includes(i)} />
+                    <PostingPeriodSelect
+                      onValueChange={handleSelectValueChange(site.siteId)}
+                      disabled={!selectedRows.includes(i)}
+                    />
                   </TableCell>
                 </TableRow>
               ))}

From d84bfe2a7c11de0401223fffbc87a93aaafe876c Mon Sep 17 00:00:00 2001
From: bicochan <chanii8@naver.com>
Date: Fri, 4 Apr 2025 11:05:57 +0900
Subject: [PATCH 06/38] =?UTF-8?q?fix:=20=EC=8A=A4=ED=86=A0=EB=A6=AC?=
 =?UTF-8?q?=EB=B6=81=20"Failed=20to=20fetch=20dynamically=20imported=20mod?=
 =?UTF-8?q?ule"=20=EC=97=90=EB=9F=AC=20=ED=95=B4=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/common/components/.storybook/main.ts | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/packages/common/components/.storybook/main.ts b/packages/common/components/.storybook/main.ts
index 4b70a4aed..6049ac6cc 100644
--- a/packages/common/components/.storybook/main.ts
+++ b/packages/common/components/.storybook/main.ts
@@ -34,12 +34,21 @@ const config: StorybookConfig = {
         AUTH_USER_ID: JSON.stringify(process.env.AUTH_USER_ID || "token-id"),
       },
     };
+
+    config.optimizeDeps = {
+      ...config.optimizeDeps,
+      include: ["react", "react-dom", "@storybook/react"],
+      exclude: ["@storybook/react-vite"],
+    };
+
     config.plugins?.push(
       tsconfigPaths({
         projects: [path.resolve(path.dirname(__dirname), "tsconfig.json")],
       }),
     );
+
     config.server = {
+      ...config.server,
       proxy: {
         "/server": {
           target: process.env.SERVER_API_URL,

From 528cc398317f09c13751a69cf93151b639423a63 Mon Sep 17 00:00:00 2001
From: bicochan <chanii8@naver.com>
Date: Fri, 4 Apr 2025 14:49:00 +0900
Subject: [PATCH 07/38] =?UTF-8?q?feat:=20=EC=82=AC=EC=9D=B4=ED=8A=B8=20?=
 =?UTF-8?q?=EB=B0=98=EC=98=81=20=ED=8C=9D=EC=97=85=20=EC=9E=91=EC=97=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../entities/posting/ui/posting-dialog.tsx    | 94 +++++++++++++++----
 .../components/src/ui/calendar/index.tsx      |  2 +-
 .../src/ui/date-picker/date-picker.css        |  2 +-
 .../ui/date-picker/date-picker.stories.tsx    |  2 +-
 .../components/src/ui/date-picker/index.tsx   |  2 +-
 .../src/ui/date-range-picker/index.tsx        | 71 ++++++++++++++
 packages/common/components/src/ui/index.ts    |  1 +
 7 files changed, 151 insertions(+), 23 deletions(-)
 create mode 100644 packages/common/components/src/ui/date-range-picker/index.tsx

diff --git a/apps/cs/src/entities/posting/ui/posting-dialog.tsx b/apps/cs/src/entities/posting/ui/posting-dialog.tsx
index ed0e25fe4..7a91d510e 100644
--- a/apps/cs/src/entities/posting/ui/posting-dialog.tsx
+++ b/apps/cs/src/entities/posting/ui/posting-dialog.tsx
@@ -1,3 +1,4 @@
+import dayjs from "dayjs";
 import { useState } from "react";
 import { useFieldArray, useForm } from "react-hook-form";
 import { useQuery } from "@tanstack/react-query";
@@ -17,22 +18,29 @@ import {
   TableRow,
   Checkbox,
   Select,
+  DateRangePicker,
 } from "@common/components/ui";
+import { cn } from "@common/components/lib";
 import { CodeSelect } from "@/entities/code";
 import { SiteApi, type Site } from "@/entities/site";
 import type { PageableList } from "@/shared/model";
 import { ENDPOINT } from "@/shared/config";
 import { type PostingType } from "../model/posting-interface";
 
-interface PostingTarget {
+type DateRange = {
+  from: string;
+  to?: string;
+};
+
+type PostingTarget = {
   pstgTrgtNm: string;
   pstgTrgtNo: number;
-}
+};
 
-interface PostingDialogProps {
+type PostingDialogProps = {
   postingType: PostingType;
   postingTargets: PostingTarget[];
-}
+};
 
 const POSTING_TYPE_LABEL = {
   POPUP: "팝업",
@@ -42,9 +50,12 @@ const POSTING_TYPE_LABEL = {
 
 function PostingDialog({ postingType, postingTargets }: PostingDialogProps) {
   const [selectedRows, setSelectedRows] = useState<number[]>([]);
-  const [rememberSelectValues, setRememberSelectValues] = useState<
+  const [rememberPeriodCode, setRememberPeriodCode] = useState<
     Record<string, string>
   >({});
+  const [rememberPeriodDate, setRememberPeriodDate] = useState<
+    Record<string, DateRange | undefined>
+  >({});
 
   const { data: siteList } = useQuery<PageableList<Site>>({
     queryKey: [ENDPOINT.CMS_SERVICE.SITES],
@@ -60,14 +71,22 @@ function PostingDialog({ postingType, postingTargets }: PostingDialogProps) {
   const isAllSelected =
     siteList && selectedRows.length === siteList.content.length;
 
-  const initialize = () => {
-    setSelectedRows([]);
-    replace([]);
+  const postingPeriod = (siteId: string) => {
+    const periodCode = Number(rememberPeriodCode[siteId]);
+
+    if (periodCode === 99) return "상시";
+
+    return `${dayjs().format("YYYY-MM-DD")} ~ ${dayjs()
+      .add(periodCode, "day")
+      .format("YYYY-MM-DD")}`;
   };
 
   const handleOpenChange = (open: boolean) => {
     if (open) return true;
-    initialize();
+    replace([]);
+    setSelectedRows([]);
+    setRememberPeriodCode({});
+    setRememberPeriodDate({});
   };
 
   const handleAppendFields = (i: number) => {
@@ -76,9 +95,9 @@ function PostingDialog({ postingType, postingTargets }: PostingDialogProps) {
       siteId,
       pstgTypeCd: postingType,
       pstgTrgtNo: target.pstgTrgtNo,
-      pstgBgngDt: "",
-      pstgEndDt: "",
-      pstgPrdSeCd: rememberSelectValues[siteId] ?? "",
+      pstgBgngDt: rememberPeriodDate[siteId]?.from ?? "",
+      pstgEndDt: rememberPeriodDate[siteId]?.to ?? "",
+      pstgPrdSeCd: rememberPeriodCode[siteId] ?? "",
       delYn: "N",
       mode: "C",
     }));
@@ -120,7 +139,8 @@ function PostingDialog({ postingType, postingTargets }: PostingDialogProps) {
 
   const handleSelectAll = () => {
     if (selectedRows.length === (siteList?.content.length ?? 0)) {
-      initialize();
+      replace([]);
+      setSelectedRows([]);
     } else {
       setSelectedRows(siteList?.content.map((_, i) => i) ?? []);
       replace([]);
@@ -128,8 +148,8 @@ function PostingDialog({ postingType, postingTargets }: PostingDialogProps) {
     }
   };
 
-  const handleSelectValueChange = (siteId: string) => (value: string) => {
-    setRememberSelectValues((prev) => ({
+  const handlePeriodCodeChange = (siteId: string) => (value: string) => {
+    setRememberPeriodCode((prev) => ({
       ...prev,
       [siteId]: value,
     }));
@@ -138,6 +158,20 @@ function PostingDialog({ postingType, postingTargets }: PostingDialogProps) {
     });
   };
 
+  const handlePeriodDateChange =
+    (siteId: string) => (value: DateRange | undefined) => {
+      const from = dayjs(value?.from).format("YYYY-MM-DD 00:00:00");
+      const to = dayjs(value?.to).format("YYYY-MM-DD 23:59:59");
+      setRememberPeriodDate((prev) => ({
+        ...prev,
+        [siteId]: { from, to },
+      }));
+      handleUpdateFields(siteId)({
+        pstgBgngDt: from,
+        pstgEndDt: to,
+      });
+    };
+
   return (
     <Dialog onOpenChange={handleOpenChange}>
       <DialogTrigger asChild>
@@ -192,10 +226,32 @@ function PostingDialog({ postingType, postingTargets }: PostingDialogProps) {
                   </TableCell>
                   <TableCell align="center">{site.siteNm}</TableCell>
                   <TableCell align="left">
-                    <PostingPeriodSelect
-                      onValueChange={handleSelectValueChange(site.siteId)}
-                      disabled={!selectedRows.includes(i)}
-                    />
+                    <div className="flex items-center gap-4">
+                      <PostingPeriodSelect
+                        onValueChange={handlePeriodCodeChange(site.siteId)}
+                        disabled={!selectedRows.includes(i)}
+                      />
+                      {!!Number(rememberPeriodCode[site.siteId]) && (
+                        <span
+                          className={cn(
+                            "text-lg text-label",
+                            !selectedRows.includes(i) && "text-muted",
+                          )}
+                        >
+                          게시 기간: <u>{postingPeriod(site.siteId)}</u>
+                        </span>
+                      )}
+                      {Number(rememberPeriodCode[site.siteId]) === 0 && (
+                        <DateRangePicker
+                          handleDateChange={(date) =>
+                            handlePeriodDateChange(site.siteId)(
+                              date as DateRange | undefined,
+                            )
+                          }
+                          disabled={!selectedRows.includes(i)}
+                        />
+                      )}
+                    </div>
                   </TableCell>
                 </TableRow>
               ))}
diff --git a/packages/common/components/src/ui/calendar/index.tsx b/packages/common/components/src/ui/calendar/index.tsx
index 12c30816b..c1a6d5204 100644
--- a/packages/common/components/src/ui/calendar/index.tsx
+++ b/packages/common/components/src/ui/calendar/index.tsx
@@ -44,7 +44,7 @@ export function Calendar({
         ),
         day_range_end: "day-range-end",
         day_selected:
-          "!bg-primary !text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
+          "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
         day_today: "bg-accent text-accent-foreground",
         day_outside:
           "day-outside text-muted-foreground aria-selected:bg-accent/50 aria-selected:text-muted-foreground",
diff --git a/packages/common/components/src/ui/date-picker/date-picker.css b/packages/common/components/src/ui/date-picker/date-picker.css
index bf9415652..7a1daffac 100644
--- a/packages/common/components/src/ui/date-picker/date-picker.css
+++ b/packages/common/components/src/ui/date-picker/date-picker.css
@@ -2,6 +2,6 @@
 
 @layer components {
   .date-picker-trigger {
-    @apply h-[3rem] w-[12rem] justify-between border-input !bg-background px-4 py-2 text-left text-[1.3rem] font-normal leading-none text-muted-foreground hover:!bg-accent;
+    @apply h-[3rem] w-[12rem] justify-start border-input !bg-background px-4 py-2 text-left text-[1.3rem] font-normal text-muted-foreground hover:!bg-accent;
   }
 }
diff --git a/packages/common/components/src/ui/date-picker/date-picker.stories.tsx b/packages/common/components/src/ui/date-picker/date-picker.stories.tsx
index baae9d769..6b6e2080d 100644
--- a/packages/common/components/src/ui/date-picker/date-picker.stories.tsx
+++ b/packages/common/components/src/ui/date-picker/date-picker.stories.tsx
@@ -1,6 +1,6 @@
+import { useState } from "react";
 import type { Meta, StoryObj } from "@storybook/react";
 import { DatePicker } from ".";
-import { useState } from "react";
 
 const meta: Meta<typeof DatePicker> = {
   title: "Elements/DatePicker",
diff --git a/packages/common/components/src/ui/date-picker/index.tsx b/packages/common/components/src/ui/date-picker/index.tsx
index d6a6553cd..8a9d2155c 100644
--- a/packages/common/components/src/ui/date-picker/index.tsx
+++ b/packages/common/components/src/ui/date-picker/index.tsx
@@ -19,12 +19,12 @@ export function DatePicker({ className, ...props }: DatePickerProps) {
           variant="outline"
           className={cn("date-picker-trigger", className)}
         >
+          <CalendarIcon className="!size-[1.6rem]" />
           {props.selected ? (
             format(props.selected, "yyyy-MM-dd")
           ) : (
             <span>날짜 선택</span>
           )}
-          <CalendarIcon className="!size-[1.6rem]" />
         </Button>
       </PopoverTrigger>
       <PopoverContent className="w-auto p-0">
diff --git a/packages/common/components/src/ui/date-range-picker/index.tsx b/packages/common/components/src/ui/date-range-picker/index.tsx
new file mode 100644
index 000000000..2c99347a2
--- /dev/null
+++ b/packages/common/components/src/ui/date-range-picker/index.tsx
@@ -0,0 +1,71 @@
+"use client";
+
+import { useState } from "react";
+import { format } from "date-fns";
+import { CalendarIcon } from "lucide-react";
+import type { DateRange } from "react-day-picker";
+
+import { cn } from "../../lib/utils";
+import { Button } from "../button";
+import { Calendar } from "../calendar";
+import { Popover, PopoverContent, PopoverTrigger } from "../popover";
+
+type DateRangePickerProps = React.HTMLAttributes<HTMLDivElement> & {
+  disabled?: boolean;
+  handleDateChange?: (date: DateRange | undefined) => void;
+};
+
+export function DateRangePicker({
+  disabled,
+  className,
+  handleDateChange,
+}: DateRangePickerProps) {
+  const [date, setDate] = useState<DateRange>();
+
+  const handleSelect = (date: DateRange | undefined) => {
+    setDate(date);
+    handleDateChange?.(date);
+  };
+
+  return (
+    <div className={cn("grid gap-2", className)}>
+      <Popover>
+        <PopoverTrigger asChild>
+          <Button
+            id="date"
+            variant="outline"
+            className={cn(
+              "h-[3.2rem] min-w-[12rem] justify-start border-input !bg-background px-4 py-2 text-left text-[1.3rem] font-normal text-muted-foreground hover:!bg-accent",
+              !date && "text-muted-foreground",
+            )}
+            disabled={disabled}
+          >
+            <CalendarIcon className="!size-[1.6rem]" />
+            {date?.from ? (
+              date.to ? (
+                <>
+                  {format(date.from, "yyyy-MM-dd")} ~{" "}
+                  {format(date.to, "yyyy-MM-dd")}
+                </>
+              ) : (
+                format(date.from, "yyyy-MM-dd")
+              )
+            ) : (
+              <span>기간 선택</span>
+            )}
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className="w-auto p-0" align="start">
+          <Calendar
+            initialFocus
+            mode="range"
+            defaultMonth={date?.from}
+            selected={date}
+            onSelect={handleSelect}
+            numberOfMonths={2}
+          />
+        </PopoverContent>
+      </Popover>
+    </div>
+  );
+}
diff --git a/packages/common/components/src/ui/index.ts b/packages/common/components/src/ui/index.ts
index c3aad6220..c51eef045 100644
--- a/packages/common/components/src/ui/index.ts
+++ b/packages/common/components/src/ui/index.ts
@@ -5,6 +5,7 @@ export * from "./calendar";
 export * from "./checkbox";
 export * from "./data-table";
 export * from "./date-picker";
+export * from "./date-range-picker";
 export * from "./dialog";
 export * from "./dropdown-menu";
 export * from "./file-uploader";

From 7f4e973c5f4a27cb985c8d47a7584f64875ba333 Mon Sep 17 00:00:00 2001
From: bicochan <chanii8@naver.com>
Date: Fri, 4 Apr 2025 15:25:34 +0900
Subject: [PATCH 08/38] =?UTF-8?q?feat:=20=EC=82=AC=EC=9D=B4=ED=8A=B8=20?=
 =?UTF-8?q?=EB=B0=98=EC=98=81=20=EC=A0=80=EC=9E=A5=20api=20=EC=9E=91?=
 =?UTF-8?q?=EC=97=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/cs/src/app/providers/app-provider.tsx    |  2 +
 .../posting/model/posting-interface.ts        |  7 +++
 .../entities/posting/ui/posting-dialog.tsx    | 47 +++++++++++++++++--
 apps/cs/src/shared/ui/confirm-dialog.tsx      |  6 +--
 4 files changed, 55 insertions(+), 7 deletions(-)

diff --git a/apps/cs/src/app/providers/app-provider.tsx b/apps/cs/src/app/providers/app-provider.tsx
index fb4b65f27..6fd488b90 100644
--- a/apps/cs/src/app/providers/app-provider.tsx
+++ b/apps/cs/src/app/providers/app-provider.tsx
@@ -6,6 +6,7 @@ import { AuthWrapper } from "@/entities/auth";
 import { MenuWrapper } from "@/entities/menu";
 import { StoreProvider } from "@/shared/providers";
 import { AlertDialog } from "@/shared/ui/alert-dialog";
+import { ConfirmDialog } from "@/shared/ui/confirm-dialog";
 
 const AppProvider = ({ children }: Readonly<{ children: React.ReactNode }>) => {
   const queryClient = new QueryClient();
@@ -16,6 +17,7 @@ const AppProvider = ({ children }: Readonly<{ children: React.ReactNode }>) => {
           <AuthWrapper>
             <MenuWrapper>{children}</MenuWrapper>
             <AlertDialog />
+            <ConfirmDialog />
           </AuthWrapper>
         </ConfirmProvider>
       </StoreProvider>
diff --git a/apps/cs/src/entities/posting/model/posting-interface.ts b/apps/cs/src/entities/posting/model/posting-interface.ts
index 3adaf3404..0c9d65a51 100644
--- a/apps/cs/src/entities/posting/model/posting-interface.ts
+++ b/apps/cs/src/entities/posting/model/posting-interface.ts
@@ -32,10 +32,17 @@ export const withModePostSchema = postSchema
   })
   .omit({
     siteNm: true,
+    pstgTypeNm: true,
+    pstgPrdSeNm: true,
   });
 
+export const postingFormSchema = z.object({
+  pstg: z.array(withModePostSchema),
+});
+
 export type Post = z.infer<typeof postSchema>;
 export type WithModePost = z.infer<typeof withModePostSchema>;
+export type PostingFormData = z.infer<typeof postingFormSchema>;
 
 export interface PostService {
   getPostingHistory: (params: PostingParams) => Promise<PageableList<Post>>;
diff --git a/apps/cs/src/entities/posting/ui/posting-dialog.tsx b/apps/cs/src/entities/posting/ui/posting-dialog.tsx
index 7a91d510e..df07e2182 100644
--- a/apps/cs/src/entities/posting/ui/posting-dialog.tsx
+++ b/apps/cs/src/entities/posting/ui/posting-dialog.tsx
@@ -1,7 +1,9 @@
 import dayjs from "dayjs";
 import { useState } from "react";
+import { zodResolver } from "@hookform/resolvers/zod";
 import { useFieldArray, useForm } from "react-hook-form";
-import { useQuery } from "@tanstack/react-query";
+import { useMutation, useQuery } from "@tanstack/react-query";
+import { useConfirm } from "@frontend-opensource/use-react-hooks";
 import {
   Dialog,
   DialogTrigger,
@@ -19,13 +21,22 @@ import {
   Checkbox,
   Select,
   DateRangePicker,
+  DialogClose,
+  DialogFooter,
 } from "@common/components/ui";
 import { cn } from "@common/components/lib";
 import { CodeSelect } from "@/entities/code";
 import { SiteApi, type Site } from "@/entities/site";
 import type { PageableList } from "@/shared/model";
 import { ENDPOINT } from "@/shared/config";
-import { type PostingType } from "../model/posting-interface";
+import { PostingApi } from "../api/posting-service";
+import {
+  postingFormSchema,
+  type PostingFormData,
+  type PostingType,
+  type WithModePost,
+} from "../model/posting-interface";
+import { useAlertStore } from "@/shared/lib/use-alert-store";
 
 type DateRange = {
   from: string;
@@ -49,6 +60,8 @@ const POSTING_TYPE_LABEL = {
 } as const;
 
 function PostingDialog({ postingType, postingTargets }: PostingDialogProps) {
+  const { confirm } = useConfirm();
+  const { setMessage: alert } = useAlertStore((state) => state);
   const [selectedRows, setSelectedRows] = useState<number[]>([]);
   const [rememberPeriodCode, setRememberPeriodCode] = useState<
     Record<string, string>
@@ -62,7 +75,16 @@ function PostingDialog({ postingType, postingTargets }: PostingDialogProps) {
     queryFn: () => SiteApi.getSiteList({}),
   });
 
-  const form = useForm();
+  const { mutateAsync: requestPosting } = useMutation({
+    mutationFn: (data: WithModePost[]) => PostingApi.requestPosting(data),
+    onSuccess: () => {
+      alert("저장되었습니다.");
+    },
+  });
+
+  const form = useForm<PostingFormData>({
+    resolver: zodResolver(postingFormSchema),
+  });
   const { fields, append, replace } = useFieldArray({
     control: form.control,
     name: "pstg",
@@ -172,6 +194,13 @@ function PostingDialog({ postingType, postingTargets }: PostingDialogProps) {
       });
     };
 
+  const handleSave = async () => {
+    if (await confirm("저장하시겠습니까?")) {
+      const data = form.getValues("pstg");
+      await requestPosting(data);
+    }
+  };
+
   return (
     <Dialog onOpenChange={handleOpenChange}>
       <DialogTrigger asChild>
@@ -196,7 +225,7 @@ function PostingDialog({ postingType, postingTargets }: PostingDialogProps) {
             ))}
           </div>
         </div>
-        <div className="m-2 max-h-[28rem] overflow-auto">
+        <div className="m-2 max-h-[30rem] overflow-auto">
           <Table variant="secondary">
             <colgroup>
               <col width="10%" />
@@ -258,6 +287,16 @@ function PostingDialog({ postingType, postingTargets }: PostingDialogProps) {
             </TableBody>
           </Table>
         </div>
+        <DialogFooter className="!justify-center">
+          <Button size="lg" onClick={handleSave}>
+            저장
+          </Button>
+          <DialogClose asChild>
+            <Button size="lg" color="white">
+              취소
+            </Button>
+          </DialogClose>
+        </DialogFooter>
       </DialogContent>
     </Dialog>
   );
diff --git a/apps/cs/src/shared/ui/confirm-dialog.tsx b/apps/cs/src/shared/ui/confirm-dialog.tsx
index 8f9ce2264..4223d197e 100644
--- a/apps/cs/src/shared/ui/confirm-dialog.tsx
+++ b/apps/cs/src/shared/ui/confirm-dialog.tsx
@@ -9,7 +9,7 @@ import {
 } from "@common/components/ui";
 
 type ConfirmDialogProps = {
-  open: boolean;
+  open?: boolean;
   confirmButtonProps?: ButtonProps & { label?: string };
   cancelButtonProps?: ButtonProps & { label?: string };
 };
@@ -19,9 +19,9 @@ function ConfirmDialog({
   confirmButtonProps,
   cancelButtonProps,
 }: ConfirmDialogProps) {
-  const { message, onConfirm, onCancel } = useConfirm();
+  const { message, isOpen, onConfirm, onCancel } = useConfirm();
   return (
-    <Dialog open={open} onOpenChange={onCancel}>
+    <Dialog open={open ?? isOpen} onOpenChange={onCancel}>
       <DialogContent aria-describedby={undefined}>
         <div className="py-10">
           <p className="text-center text-[1.4rem] text-foreground">{message}</p>

From b0f8638df225a9e0f69c96106b964d429a53e593 Mon Sep 17 00:00:00 2001
From: bicochan <chanii8@naver.com>
Date: Fri, 4 Apr 2025 16:24:57 +0900
Subject: [PATCH 09/38] =?UTF-8?q?feat:=20=EC=82=AC=EC=9D=B4=ED=8A=B8=20?=
 =?UTF-8?q?=EB=B0=98=EC=98=81=20api=20=EB=82=A0=EC=A7=9C=20payload=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../entities/posting/model/posting-interface.ts  |  4 ++--
 .../src/entities/posting/ui/posting-dialog.tsx   | 16 ++++++++++++++--
 2 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/apps/cs/src/entities/posting/model/posting-interface.ts b/apps/cs/src/entities/posting/model/posting-interface.ts
index 0c9d65a51..c314d2f30 100644
--- a/apps/cs/src/entities/posting/model/posting-interface.ts
+++ b/apps/cs/src/entities/posting/model/posting-interface.ts
@@ -19,8 +19,8 @@ export const postSchema = z.object({
   pstgTypeCd: z.string(),
   pstgTypeNm: z.string(),
   pstgTrgtNo: z.number(),
-  pstgBgngDt: z.string(),
-  pstgEndDt: z.string(),
+  pstgBgngDt: z.string().optional(),
+  pstgEndDt: z.string().optional(),
   pstgPrdSeCd: z.string(),
   pstgPrdSeNm: z.string(),
   delYn: z.string(),
diff --git a/apps/cs/src/entities/posting/ui/posting-dialog.tsx b/apps/cs/src/entities/posting/ui/posting-dialog.tsx
index df07e2182..d7c0b60ca 100644
--- a/apps/cs/src/entities/posting/ui/posting-dialog.tsx
+++ b/apps/cs/src/entities/posting/ui/posting-dialog.tsx
@@ -90,6 +90,9 @@ function PostingDialog({ postingType, postingTargets }: PostingDialogProps) {
     name: "pstg",
   });
 
+  const isFormValid =
+    fields.length && fields.every((field) => field.pstgPrdSeCd !== "");
+
   const isAllSelected =
     siteList && selectedRows.length === siteList.content.length;
 
@@ -164,19 +167,28 @@ function PostingDialog({ postingType, postingTargets }: PostingDialogProps) {
       replace([]);
       setSelectedRows([]);
     } else {
-      setSelectedRows(siteList?.content.map((_, i) => i) ?? []);
       replace([]);
+      setSelectedRows(siteList?.content.map((_, i) => i) ?? []);
       siteList?.content.forEach((_, i) => handleAppendFields(i));
     }
   };
 
   const handlePeriodCodeChange = (siteId: string) => (value: string) => {
+    const from = dayjs().format("YYYY-MM-DD 00:00:00");
+    const to = dayjs().add(Number(value), "day").format("YYYY-MM-DD 23:59:59");
+
     setRememberPeriodCode((prev) => ({
       ...prev,
       [siteId]: value,
     }));
+    setRememberPeriodDate((prev) => ({
+      ...prev,
+      [siteId]: { from, to },
+    }));
     handleUpdateFields(siteId)({
       pstgPrdSeCd: value,
+      pstgBgngDt: from,
+      pstgEndDt: to,
     });
   };
 
@@ -288,7 +300,7 @@ function PostingDialog({ postingType, postingTargets }: PostingDialogProps) {
           </Table>
         </div>
         <DialogFooter className="!justify-center">
-          <Button size="lg" onClick={handleSave}>
+          <Button size="lg" onClick={handleSave} disabled={!isFormValid}>
             저장
           </Button>
           <DialogClose asChild>

From bc6ee47734a31cf93694e4f6702c67ef883294df Mon Sep 17 00:00:00 2001
From: bicochan <chanii8@naver.com>
Date: Fri, 4 Apr 2025 17:33:00 +0900
Subject: [PATCH 10/38] =?UTF-8?q?feat:=20=EC=9D=B4=EB=AF=B8=EC=A7=80=20?=
 =?UTF-8?q?=EB=B7=B0=EC=9E=89=20=EC=9E=91=EC=97=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/cs/middleware.ts                         | 12 +++-
 .../attachment/api/attachment-service.ts      | 17 +++++
 apps/cs/src/entities/attachment/index.ts      |  1 +
 .../attachment/model/attachment-interface.ts  | 18 ++++++
 apps/cs/src/pages/image/ui/image-form.tsx     | 63 +++++++++++--------
 apps/cs/src/shared/config/api.ts              |  2 +
 .../components/src/ui/file-uploader/index.tsx |  2 +-
 7 files changed, 88 insertions(+), 27 deletions(-)
 create mode 100644 apps/cs/src/entities/attachment/api/attachment-service.ts
 create mode 100644 apps/cs/src/entities/attachment/index.ts
 create mode 100644 apps/cs/src/entities/attachment/model/attachment-interface.ts

diff --git a/apps/cs/middleware.ts b/apps/cs/middleware.ts
index 81039090b..493699bb2 100644
--- a/apps/cs/middleware.ts
+++ b/apps/cs/middleware.ts
@@ -1,4 +1,5 @@
 import { NextRequest, NextResponse } from "next/server";
+import { CLAIM_NAME, AUTH_USER_ID } from "./src/shared/config";
 
 const serverApiUrl =
   process.env.NEXT_PUBLIC_SERVER_API_URL ?? "http://localhost:3000";
@@ -16,8 +17,17 @@ export function middleware(req: NextRequest) {
   }
 
   if (pathname.startsWith("/attach-service")) {
+    const requestHeaders = new Headers(req.headers);
+    const token = req.cookies.get(CLAIM_NAME)?.value;
+    const userId = req.cookies.get(AUTH_USER_ID)?.value;
     const newUrl = `${serverApiUrl}${pathname}`;
-    return NextResponse.rewrite(new URL(newUrl));
+
+    if (token) requestHeaders.set(CLAIM_NAME, token);
+    if (userId) requestHeaders.set(AUTH_USER_ID, userId);
+
+    return NextResponse.rewrite(new URL(newUrl), {
+      headers: requestHeaders,
+    });
   }
 
   return NextResponse.next();
diff --git a/apps/cs/src/entities/attachment/api/attachment-service.ts b/apps/cs/src/entities/attachment/api/attachment-service.ts
new file mode 100644
index 000000000..b0c613c5f
--- /dev/null
+++ b/apps/cs/src/entities/attachment/api/attachment-service.ts
@@ -0,0 +1,17 @@
+import { client } from "@/shared/api";
+import { ENDPOINT } from "@/shared/config";
+import type {
+  Attachment,
+  AttachmentService,
+} from "../model/attachment-interface";
+
+export class AttachmentApiService implements AttachmentService {
+  public async getAttachments(atflCd: string): Promise<Attachment[]> {
+    const response = await client.get<Attachment[]>(
+      `${ENDPOINT.ATTACH_SERVICE.ATTACHMENTS}/${atflCd}`,
+    );
+    return response.data;
+  }
+}
+
+export const AttachmentApi = new AttachmentApiService();
diff --git a/apps/cs/src/entities/attachment/index.ts b/apps/cs/src/entities/attachment/index.ts
new file mode 100644
index 000000000..182ef9fd6
--- /dev/null
+++ b/apps/cs/src/entities/attachment/index.ts
@@ -0,0 +1 @@
+export { AttachmentApi } from "./api/attachment-service";
diff --git a/apps/cs/src/entities/attachment/model/attachment-interface.ts b/apps/cs/src/entities/attachment/model/attachment-interface.ts
new file mode 100644
index 000000000..367e54127
--- /dev/null
+++ b/apps/cs/src/entities/attachment/model/attachment-interface.ts
@@ -0,0 +1,18 @@
+export interface Attachment {
+  atflCd: string;
+  atflSn: number;
+  atflId: string;
+  physFileNm: string;
+  orgnlFileNm: string;
+  atflFlieSz: number;
+  atflType: string;
+  dwnldNocs: number;
+  delYn: string;
+  lnkgDmnId: string;
+  lnkgDmnNm: string;
+  regDt: string;
+}
+
+export interface AttachmentService {
+  getAttachments: (atflCd: string) => Promise<Attachment[]>;
+}
diff --git a/apps/cs/src/pages/image/ui/image-form.tsx b/apps/cs/src/pages/image/ui/image-form.tsx
index e9fcdc9a6..62f8ac41c 100644
--- a/apps/cs/src/pages/image/ui/image-form.tsx
+++ b/apps/cs/src/pages/image/ui/image-form.tsx
@@ -1,7 +1,9 @@
 "use client";
 
-import { useState } from "react";
+import Image from "next/image";
+import { useEffect, useState } from "react";
 import { useRouter } from "next/navigation";
+import { useQuery } from "@tanstack/react-query";
 import type { UseFormReturn } from "react-hook-form";
 import type { HttpResponse, Upload } from "tus-js-client";
 import { useConfirm } from "@frontend-opensource/use-react-hooks";
@@ -20,10 +22,11 @@ import {
   TableRow,
 } from "@common/components";
 import { CodeSelect } from "@/entities/code";
-import { ConfirmDialog } from "@/shared/ui/confirm-dialog";
+import { AttachmentApi } from "@/entities/attachment";
+import { ENDPOINT } from "@/shared/config";
 import { Form, FormControl, FormField, FormItem } from "@/shared/ui/form";
-import { handleUpload } from "../lib/utils";
 import type { ImageFormData } from "../model/image-interface";
+import { handleUpload } from "../lib/utils";
 
 type ImageFormProps = {
   form: UseFormReturn<ImageFormData>;
@@ -38,49 +41,50 @@ function ImageForm({ form, imgSn, handleSave, handleDelete }: ImageFormProps) {
 
   const router = useRouter();
   const { confirm } = useConfirm();
-  const [onConfirm, setOnConfirm] = useState(false);
+  const [attachmentFileId, setAttachmentFileId] = useState("");
   const [upload, setUpload] = useState<Upload | null>(null);
   const [progress, setProgress] = useState(0);
 
-  const handleConfirm = async (callback: () => Promise<void>) => {
-    setOnConfirm(true);
-    await callback();
-    setOnConfirm(false);
-  };
+  const { data: atflId } = useQuery({
+    queryKey: [ENDPOINT.ATTACH_SERVICE.ATTACHMENTS],
+    queryFn: () => AttachmentApi.getAttachments(form.getValues("atflCd")!),
+    enabled: !!form.getValues("atflCd"),
+    select: (data) => data?.[data.length - 1]?.atflId,
+  });
 
   const onSubmit = async (data: ImageFormData) => {
     const confirmMessage = isModifyMode
       ? "수정하시겠습니까?"
       : "저장하시겠습니까?";
 
-    await handleConfirm(async () => {
-      if (await confirm(confirmMessage)) {
-        setOnConfirm(false);
-        await handleSave(data);
-      }
-    });
+    if (await confirm(confirmMessage)) {
+      await handleSave(data);
+    }
   };
 
   const onDelete = async () => {
-    await handleConfirm(async () => {
-      if (await confirm("삭제하시겠습니까?")) {
-        setOnConfirm(false);
-        await handleDelete?.();
-      }
-    });
+    if (await confirm("삭제하시겠습니까?")) {
+      await handleDelete?.();
+    }
   };
 
   const handleProgress = (percentage: string) => {
     setProgress(Number(percentage));
   };
 
-  const handleUploadResponse = (res: HttpResponse) => {
+  const handleUploadResponse = async (res: HttpResponse) => {
     const fileInfo = res.getHeader("X-File-Info");
     if (fileInfo === undefined || fileInfo === null) return;
 
-    form.setValue("atflCd", JSON.parse(fileInfo)?.atflCd);
+    const { atflCd, atflId } = JSON.parse(fileInfo) ?? {};
+    if (atflCd) form.setValue("atflCd", atflCd);
+    if (atflId) setAttachmentFileId(atflId);
   };
 
+  useEffect(() => {
+    if (atflId) setAttachmentFileId(atflId);
+  }, [atflId]);
+
   return (
     <>
       <Form {...form}>
@@ -204,6 +208,7 @@ function ImageForm({ form, imgSn, handleSave, handleDelete }: ImageFormProps) {
                               <FileUploader
                                 id="atflCd"
                                 className="!h-auto !max-w-none flex-col !items-start"
+                                accept=".jpeg,.jpg,.png"
                                 onUpload={(e) => {
                                   const files = e.target.files;
                                   if (!files) return;
@@ -221,7 +226,16 @@ function ImageForm({ form, imgSn, handleSave, handleDelete }: ImageFormProps) {
                                         <p className="absolute bottom-3 left-0 p-2 text-base leading-none">
                                           {(upload?.file as File)?.name}
                                         </p>
-                                        <div></div>
+                                        <div className="relative h-full w-full">
+                                          {attachmentFileId && (
+                                            <Image
+                                              src={`${ENDPOINT.ATTACH_SERVICE.IMAGES}/${attachmentFileId}`}
+                                              alt="업로드된 이미지"
+                                              fill
+                                              objectFit="contain"
+                                            />
+                                          )}
+                                        </div>
                                         <Progress
                                           value={progress}
                                           className="absolute bottom-0 left-0"
@@ -320,7 +334,6 @@ function ImageForm({ form, imgSn, handleSave, handleDelete }: ImageFormProps) {
           </div>
         </form>
       </Form>
-      <ConfirmDialog open={onConfirm} />
     </>
   );
 }
diff --git a/apps/cs/src/shared/config/api.ts b/apps/cs/src/shared/config/api.ts
index 0a1ec0122..c5d3ac937 100644
--- a/apps/cs/src/shared/config/api.ts
+++ b/apps/cs/src/shared/config/api.ts
@@ -5,6 +5,8 @@ export const BASE_URL = `${PROXY_HOST}/server`;
 export const ENDPOINT = {
   ATTACH_SERVICE: {
     TUS_UPLOAD: "/attach-service/api/v1/tus/upload",
+    IMAGES: "/attach-service/api/v1/images",
+    ATTACHMENTS: "/attach-service/api/v1/atfl/attachments",
   },
   USER_SERVICE: {
     LOGIN: "/user-service/login",
diff --git a/packages/common/components/src/ui/file-uploader/index.tsx b/packages/common/components/src/ui/file-uploader/index.tsx
index da3e04b67..d86566492 100644
--- a/packages/common/components/src/ui/file-uploader/index.tsx
+++ b/packages/common/components/src/ui/file-uploader/index.tsx
@@ -26,8 +26,8 @@ export function FileUploader({
         id={id}
         type="file"
         className="sr-only"
-        {...props}
         onChange={onUpload}
+        {...props}
       />
       {customPreview || (
         <div className="file-uploader-preview">

From 632042b19c61ce5aad4917ddcaa202debc7dfbc9 Mon Sep 17 00:00:00 2001
From: bicochan <chanii8@naver.com>
Date: Mon, 7 Apr 2025 10:25:56 +0900
Subject: [PATCH 11/38] =?UTF-8?q?feat:=20=EC=9D=B4=EB=AF=B8=EC=A7=80=20?=
 =?UTF-8?q?=EB=B7=B0=EC=9E=89=20=EC=9E=91=EC=97=85(=EC=9D=B4=EB=AF=B8?=
 =?UTF-8?q?=EC=A7=80=20=EA=B4=80=EB=A6=AC=20=EC=83=81=EC=84=B8)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/cs/src/pages/image/ui/image-form.tsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/apps/cs/src/pages/image/ui/image-form.tsx b/apps/cs/src/pages/image/ui/image-form.tsx
index 62f8ac41c..13c306a2d 100644
--- a/apps/cs/src/pages/image/ui/image-form.tsx
+++ b/apps/cs/src/pages/image/ui/image-form.tsx
@@ -38,6 +38,7 @@ type ImageFormProps = {
 function ImageForm({ form, imgSn, handleSave, handleDelete }: ImageFormProps) {
   const isModifyMode = !!imgSn;
   const atflYn = form.watch("atflYn");
+  const atflCd = form.watch("atflCd");
 
   const router = useRouter();
   const { confirm } = useConfirm();
@@ -46,10 +47,10 @@ function ImageForm({ form, imgSn, handleSave, handleDelete }: ImageFormProps) {
   const [progress, setProgress] = useState(0);
 
   const { data: atflId } = useQuery({
-    queryKey: [ENDPOINT.ATTACH_SERVICE.ATTACHMENTS],
-    queryFn: () => AttachmentApi.getAttachments(form.getValues("atflCd")!),
-    enabled: !!form.getValues("atflCd"),
+    queryKey: [ENDPOINT.ATTACH_SERVICE.ATTACHMENTS, atflCd],
+    queryFn: () => AttachmentApi.getAttachments(atflCd!),
     select: (data) => data?.[data.length - 1]?.atflId,
+    enabled: !!atflCd,
   });
 
   const onSubmit = async (data: ImageFormData) => {

From 35d9595ea26846f2db5638568813f8559f25dd7d Mon Sep 17 00:00:00 2001
From: bicochan <chanii8@naver.com>
Date: Mon, 7 Apr 2025 13:11:22 +0900
Subject: [PATCH 12/38] =?UTF-8?q?feat:=20data=20table=20=ED=8E=98=EC=9D=B4?=
 =?UTF-8?q?=EC=A7=80=EB=84=A4=EC=9D=B4=EC=85=98=20ui=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/common/components/package.json       |   1 +
 .../components/src/ui/data-table/index.tsx    | 155 ++++++++++++++----
 pnpm-lock.yaml                                |  11 ++
 3 files changed, 136 insertions(+), 31 deletions(-)

diff --git a/packages/common/components/package.json b/packages/common/components/package.json
index d9ba2a55e..8b9b12eed 100644
--- a/packages/common/components/package.json
+++ b/packages/common/components/package.json
@@ -33,6 +33,7 @@
     "@radix-ui/react-collapsible": "^1.1.3",
     "@radix-ui/react-dialog": "^1.1.6",
     "@radix-ui/react-dropdown-menu": "^2.1.6",
+    "@radix-ui/react-icons": "^1.3.2",
     "@radix-ui/react-label": "^2.1.2",
     "@radix-ui/react-popover": "^1.1.6",
     "@radix-ui/react-progress": "^1.1.2",
diff --git a/packages/common/components/src/ui/data-table/index.tsx b/packages/common/components/src/ui/data-table/index.tsx
index 7e3af5602..ac82afde9 100644
--- a/packages/common/components/src/ui/data-table/index.tsx
+++ b/packages/common/components/src/ui/data-table/index.tsx
@@ -1,10 +1,18 @@
 import {
   flexRender,
   type RowData,
-  type Table as TableType,
+  type Table as TableInstance,
 } from "@tanstack/react-table";
+import {
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  DoubleArrowLeftIcon,
+  DoubleArrowRightIcon,
+} from "@radix-ui/react-icons";
 import { cn } from "../../lib";
+import { Button } from "../button";
 import { Table, TableCell, TableHead, TableHeader, TableRow } from "../table";
+import type { HTMLAttributes } from "react";
 
 declare module "@tanstack/react-table" {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -13,7 +21,50 @@ declare module "@tanstack/react-table" {
   }
 }
 
-function THead<T>({ table }: { table: TableType<T> }) {
+type DataTableProps<T> = {
+  table: TableInstance<T>;
+  variant?: "default" | "secondary" | "line";
+  className?: HTMLAttributes<HTMLTableElement>["className"];
+  viewPagination?: boolean;
+  onRowClick?: (row: T) => void;
+};
+
+function DataTable<T>({
+  table,
+  variant = "default",
+  className,
+  viewPagination,
+  onRowClick,
+}: DataTableProps<T>) {
+  return (
+    <>
+      <Table className={cn("w-full", className)} variant={variant}>
+        <THead table={table} />
+        <tbody>
+          {table.getRowModel().rows.map((row) => (
+            <TableRow
+              key={row.id}
+              onClick={() => onRowClick?.(row.original)}
+              className={cn(onRowClick && "cursor-pointer hover:bg-accent")}
+            >
+              {row.getVisibleCells().map((cell) => {
+                const { meta } = cell.column.columnDef;
+                return (
+                  <TableCell key={cell.id} align="center" {...meta}>
+                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                  </TableCell>
+                );
+              })}
+            </TableRow>
+          ))}
+        </tbody>
+      </Table>
+      {viewPagination && <Pagination table={table} />}
+    </>
+  );
+}
+
+function THead<T>({ table }: { table: TableInstance<T> }) {
   return (
     <TableHeader>
       {table.getHeaderGroups().map((headerGroup) => (
@@ -37,39 +88,81 @@ function THead<T>({ table }: { table: TableType<T> }) {
   );
 }
 
-type TableProps<T> = {
-  table: TableType<T>;
-  variant?: "default" | "secondary" | "line";
-  onRowClick?: (row: T) => void;
-};
+function Pagination<T>({ table }: { table: TableInstance<T> }) {
+  const pageCount = table.getPageCount();
+  const currentPage = table.getState().pagination.pageIndex;
+  const maxVisiblePages = 10; // 한 번에 보여줄 최대 페이지 수
+
+  let startPage = Math.max(0, currentPage - maxVisiblePages / 2); // 시작 페이지
+  const endPage = Math.min(pageCount, startPage + maxVisiblePages); // 끝 페이지
+
+  if (endPage - startPage < maxVisiblePages) {
+    startPage = Math.max(0, endPage - maxVisiblePages);
+  }
+
+  const pageNumbers = Array(endPage - startPage)
+    .fill(0)
+    .map((_, i) => startPage + i);
 
-function DataTable<T>({
-  table,
-  variant = "default",
-  onRowClick,
-}: TableProps<T>) {
   return (
-    <Table className="w-full" variant={variant}>
-      <THead table={table} />
-      <tbody>
-        {table.getRowModel().rows.map((row) => (
-          <TableRow
-            key={row.id}
-            onClick={() => onRowClick?.(row.original)}
-            className={cn(onRowClick && "cursor-pointer hover:bg-accent")}
+    <div className="mt-[24px] flex items-center justify-center space-x-2">
+      <Button
+        variant="ghost"
+        color="white"
+        className="hidden size-10 p-0 lg:flex"
+        onClick={() => table.setPageIndex(0)}
+        disabled={!table.getCanPreviousPage()}
+      >
+        <span className="sr-only">첫 페이지로</span>
+        <DoubleArrowLeftIcon className="size-4" />
+      </Button>
+      <Button
+        variant="ghost"
+        color="white"
+        className="size-10 p-0"
+        onClick={() => table.previousPage()}
+        disabled={!table.getCanPreviousPage()}
+      >
+        <span className="sr-only">이전 페이지로</span>
+        <ChevronLeftIcon className="size-4" />
+      </Button>
+      <div className="flex items-center justify-center text-sm font-medium">
+        {pageNumbers.map((pageNumber) => (
+          <Button
+            key={pageNumber}
+            variant="ghost"
+            className={cn(
+              "inline-block size-10 !bg-transparent p-0 text-foreground hover:!bg-accent",
+              currentPage === pageNumber &&
+                "!bg-primary !font-bold !text-primary-foreground hover:!bg-primary",
+            )}
+            onClick={() => table.setPageIndex(pageNumber)}
           >
-            {row.getVisibleCells().map((cell) => {
-              const { meta } = cell.column.columnDef;
-              return (
-                <TableCell key={cell.id} align="center" {...meta}>
-                  {flexRender(cell.column.columnDef.cell, cell.getContext())}
-                </TableCell>
-              );
-            })}
-          </TableRow>
+            {pageNumber + 1}
+          </Button>
         ))}
-      </tbody>
-    </Table>
+      </div>
+      <Button
+        variant="ghost"
+        color="white"
+        className="size-10 p-0"
+        onClick={() => table.nextPage()}
+        disabled={!table.getCanNextPage()}
+      >
+        <span className="sr-only">다음 페이지로</span>
+        <ChevronRightIcon className="size-4" />
+      </Button>
+      <Button
+        variant="ghost"
+        color="white"
+        className="hidden size-10 p-0 lg:flex"
+        onClick={() => table.setPageIndex(table.getPageCount() - 1)}
+        disabled={!table.getCanNextPage()}
+      >
+        <span className="sr-only">마지막 페이지로</span>
+        <DoubleArrowRightIcon className="size-4" />
+      </Button>
+    </div>
   );
 }
 
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a56b25dd8..beb0c1aea 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -384,6 +384,9 @@ importers:
       '@radix-ui/react-dropdown-menu':
         specifier: ^2.1.6
         version: 2.1.6(@types/react-dom@18.3.5)(@types/react@18.3.18)(react-dom@18.3.1)(react@18.3.1)
+      '@radix-ui/react-icons':
+        specifier: ^1.3.2
+        version: 1.3.2(react@18.3.1)
       '@radix-ui/react-label':
         specifier: ^2.1.2
         version: 2.1.2(@types/react-dom@18.3.5)(@types/react@18.3.18)(react-dom@18.3.1)(react@18.3.1)
@@ -2102,6 +2105,14 @@ packages:
       react-dom: 18.3.1(react@18.3.1)
     dev: false
 
+  /@radix-ui/react-icons@1.3.2(react@18.3.1):
+    resolution: {integrity: sha512-fyQIhGDhzfc9pK2kH6Pl9c4BDJGfMkPqkyIgYDthyNYoNg3wVhoJMMh19WS4Up/1KMPFVpNsT2q3WmXn2N1m6g==}
+    peerDependencies:
+      react: ^18.3.1
+    dependencies:
+      react: 18.3.1
+    dev: false
+
   /@radix-ui/react-id@1.1.0(@types/react@18.3.18)(react@18.3.1):
     resolution: {integrity: sha512-EJUrI8yYh7WOjNOqpoJaf1jlFIH2LvtgAl+YcFqNCa+4hj64ZXmPkAKOFs/ukjz3byN6bdb/AVUqHkI8/uWWMA==}
     peerDependencies:

From 0e7c59f084590c61ef0005e429e713aee14367ce Mon Sep 17 00:00:00 2001
From: bicochan <chanii8@naver.com>
Date: Mon, 7 Apr 2025 13:21:19 +0900
Subject: [PATCH 13/38] =?UTF-8?q?feat:=20=EC=82=AC=EC=9D=B4=ED=8A=B8=20?=
 =?UTF-8?q?=EA=B4=80=EB=A6=AC=20=EB=B0=8F=20=EC=9D=B4=EB=AF=B8=EC=A7=80=20?=
 =?UTF-8?q?=EA=B4=80=EB=A6=AC=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=ED=85=8C?=
 =?UTF-8?q?=EC=9D=B4=EB=B8=94=EC=97=90=20=ED=8E=98=EC=9D=B4=EC=A7=80?=
 =?UTF-8?q?=EB=84=A4=EC=9D=B4=EC=85=98=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/cs/src/pages/image/ui/image-page.tsx | 19 +++++++--
 apps/cs/src/pages/site/ui/site-page.tsx   | 51 +++++++++++++++++------
 2 files changed, 54 insertions(+), 16 deletions(-)

diff --git a/apps/cs/src/pages/image/ui/image-page.tsx b/apps/cs/src/pages/image/ui/image-page.tsx
index 025639cd5..900ae005a 100644
--- a/apps/cs/src/pages/image/ui/image-page.tsx
+++ b/apps/cs/src/pages/image/ui/image-page.tsx
@@ -6,6 +6,7 @@ import { useQuery } from "@tanstack/react-query";
 import {
   getCoreRowModel,
   useReactTable,
+  type PaginationState,
   type RowSelectionState,
 } from "@tanstack/react-table";
 import { Button, DataTable, Input, Label } from "@common/components";
@@ -26,10 +27,19 @@ function ImagePage() {
   const [rowSelection, setRowSelection] = useState<RowSelectionState>({});
   const [postingTargets, setPostingTargets] = useState<PostingTarget[]>([]);
   const [imageQuery, setImageQuery] = useState<ImageParams>({ keyword: "" });
+  const [pagination, setPagination] = useState<PaginationState>({
+    pageIndex: 0,
+    pageSize: 5,
+  });
 
   const { data: imageList, refetch } = useQuery({
     queryKey: [ENDPOINT.CMS_SERVICE.IMAGES],
-    queryFn: () => ImageApi.getImageList(imageQuery),
+    queryFn: () =>
+      ImageApi.getImageList({
+        ...imageQuery,
+        page: pagination.pageIndex,
+        size: pagination.pageSize,
+      }),
     enabled: false,
   });
 
@@ -37,10 +47,13 @@ function ImagePage() {
     data: imageList?.content ?? [],
     columns,
     state: {
+      pagination,
       rowSelection,
     },
+    manualPagination: true,
     enableMultiRowSelection: true,
     getCoreRowModel: getCoreRowModel(),
+    onPaginationChange: setPagination,
     onRowSelectionChange: setRowSelection,
   });
 
@@ -107,8 +120,8 @@ function ImagePage() {
             </div>
           </div>
         </div>
-        <div className="card !m-[1.2rem] h-[49rem] overflow-auto !p-0">
-          <DataTable table={table} onRowClick={handleRowClick} />
+        <div className="card !m-[1.2rem] h-[29.2rem] overflow-auto !p-0">
+          <DataTable table={table} onRowClick={handleRowClick} viewPagination />
         </div>
       </div>
     </div>
diff --git a/apps/cs/src/pages/site/ui/site-page.tsx b/apps/cs/src/pages/site/ui/site-page.tsx
index e89ddafa0..0d6ff4a82 100644
--- a/apps/cs/src/pages/site/ui/site-page.tsx
+++ b/apps/cs/src/pages/site/ui/site-page.tsx
@@ -4,8 +4,12 @@ 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 { keepPreviousData, useQuery } from "@tanstack/react-query";
+import {
+  getCoreRowModel,
+  useReactTable,
+  type PaginationState,
+} from "@tanstack/react-table";
 import { Button, DataTable, Input, Label } from "@common/components";
 import { SiteApi, type Site, type SiteParams } from "@/entities/site";
 import { ENDPOINT } from "@/shared/config";
@@ -13,20 +17,25 @@ import { columns } from "../model/table-columns";
 
 function SitePage() {
   const router = useRouter();
-  const { data: siteList, refetch } = useQuery({
-    queryKey: [ENDPOINT.CMS_SERVICE.SITES],
-    queryFn: () => SiteApi.getSiteList(siteQuery),
-    enabled: false,
-  });
 
   const [siteQuery, setSiteQuery] = useState<SiteParams>({
     siteNm: "",
   });
+  const [pagination, setPagination] = useState<PaginationState>({
+    pageIndex: 0,
+    pageSize: 5,
+  });
 
-  const table = useReactTable({
-    data: siteList?.content ?? [],
-    columns,
-    getCoreRowModel: getCoreRowModel(),
+  const { data: siteList, refetch } = useQuery({
+    queryKey: [ENDPOINT.CMS_SERVICE.SITES],
+    queryFn: () =>
+      SiteApi.getSiteList({
+        ...siteQuery,
+        page: pagination.pageIndex,
+        size: pagination.pageSize,
+      }),
+    placeholderData: keepPreviousData,
+    enabled: false,
   });
 
   const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
@@ -38,10 +47,26 @@ function SitePage() {
     router.push(`/site/register/${row.siteId}`);
   };
 
+  const table = useReactTable({
+    data: siteList?.content ?? [],
+    columns,
+    rowCount: siteList?.totalElements ?? 0,
+    state: {
+      pagination,
+    },
+    onPaginationChange: setPagination,
+    getCoreRowModel: getCoreRowModel(),
+    manualPagination: true,
+  });
+
   useEffect(() => {
     refetch();
   }, []);
 
+  useEffect(() => {
+    refetch();
+  }, [pagination]);
+
   return (
     <div className="card card-border !mt-6">
       <div className="card card-border">
@@ -64,8 +89,8 @@ function SitePage() {
           <h3 className="text-2xl font-medium text-label">사이트 목록</h3>
           <Button onClick={() => router.push("/site/register")}>등록</Button>
         </div>
-        <div className="card !m-[1.2rem] h-[49rem] overflow-auto !p-0">
-          <DataTable table={table} onRowClick={handleRowClick} />
+        <div className="card !m-[1.2rem] h-[29.2rem] overflow-auto !p-0">
+          <DataTable table={table} onRowClick={handleRowClick} viewPagination />
         </div>
       </div>
     </div>

From 3a8039c5d26efcb96bf72dcf190a4df4340d601d Mon Sep 17 00:00:00 2001
From: bicochan <chanii8@naver.com>
Date: Mon, 7 Apr 2025 13:53:17 +0900
Subject: [PATCH 14/38] =?UTF-8?q?chore:=20endpoint=20key=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/cs/src/entities/posting/api/posting-service.ts      | 4 ++--
 apps/cs/src/pages/image/ui/modify-page.tsx               | 4 ++--
 apps/cs/src/pages/menu/api/organization-service.ts       | 2 +-
 apps/cs/src/pages/menu/ui/organization-search-dialog.tsx | 2 +-
 apps/cs/src/shared/config/api.ts                         | 6 +++---
 5 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/apps/cs/src/entities/posting/api/posting-service.ts b/apps/cs/src/entities/posting/api/posting-service.ts
index b14110653..24a6126f9 100644
--- a/apps/cs/src/entities/posting/api/posting-service.ts
+++ b/apps/cs/src/entities/posting/api/posting-service.ts
@@ -13,7 +13,7 @@ export class PostingApiService implements PostService {
     params: PostingParams,
   ): Promise<PageableList<Post>> {
     const response = await client.get<PageableList<Post>>(
-      `${ENDPOINT.CMS_SERVICE.SITE_PSTGS}`,
+      `${ENDPOINT.CMS_SERVICE.POSTINGS}`,
       { params },
     );
     return response.data;
@@ -21,7 +21,7 @@ export class PostingApiService implements PostService {
 
   public async requestPosting(data: WithModePost[]): Promise<Post[]> {
     const response = await client.post<Post[]>(
-      `${ENDPOINT.CMS_SERVICE.SITE_PSTGS}`,
+      `${ENDPOINT.CMS_SERVICE.POSTINGS}`,
       data,
     );
     return response.data;
diff --git a/apps/cs/src/pages/image/ui/modify-page.tsx b/apps/cs/src/pages/image/ui/modify-page.tsx
index 6704fffee..fe7e19e51 100644
--- a/apps/cs/src/pages/image/ui/modify-page.tsx
+++ b/apps/cs/src/pages/image/ui/modify-page.tsx
@@ -36,7 +36,7 @@ function ModifyPage({ serial }: { serial: string }) {
   });
 
   const { data: postHistory } = useQuery({
-    queryKey: [ENDPOINT.CMS_SERVICE.SITE_PSTGS, serial],
+    queryKey: [ENDPOINT.CMS_SERVICE.POSTINGS, serial],
     queryFn: () => PostingApi.getPostingHistory({ pstgTrgtNo: Number(serial) }),
   });
 
@@ -58,7 +58,7 @@ function ModifyPage({ serial }: { serial: string }) {
     mutationFn: (data: WithModePost[]) => PostingApi.requestPosting(data),
     onSuccess: () => {
       queryClient.invalidateQueries({
-        queryKey: [ENDPOINT.CMS_SERVICE.SITE_PSTGS, serial],
+        queryKey: [ENDPOINT.CMS_SERVICE.POSTINGS, serial],
       });
     },
   });
diff --git a/apps/cs/src/pages/menu/api/organization-service.ts b/apps/cs/src/pages/menu/api/organization-service.ts
index 9ef3b55fa..9409f81b5 100644
--- a/apps/cs/src/pages/menu/api/organization-service.ts
+++ b/apps/cs/src/pages/menu/api/organization-service.ts
@@ -8,7 +8,7 @@ import type {
 export class OrganizationApiService implements OrganizationService {
   public async getOrganizationUserTreeList(): Promise<Organization[]> {
     const response = await client.get<Organization[]>(
-      `${ENDPOINT.CMS_SERVICE.USER_OGNZ}/treeuser`,
+      `${ENDPOINT.CMS_SERVICE.USER_ORGANIZATION}/treeuser`,
     );
     return response.data;
   }
diff --git a/apps/cs/src/pages/menu/ui/organization-search-dialog.tsx b/apps/cs/src/pages/menu/ui/organization-search-dialog.tsx
index 9e0637082..ed825508c 100644
--- a/apps/cs/src/pages/menu/ui/organization-search-dialog.tsx
+++ b/apps/cs/src/pages/menu/ui/organization-search-dialog.tsx
@@ -43,7 +43,7 @@ function OrganizationSearchDialog({
   );
 
   const { data: treeData } = useQuery({
-    queryKey: [ENDPOINT.CMS_SERVICE.USER_OGNZ],
+    queryKey: [ENDPOINT.CMS_SERVICE.USER_ORGANIZATION],
     queryFn: () => OrganizationApi.getOrganizationUserTreeList(),
     select: (data) => generateOrganizationTreeData(data),
   });
diff --git a/apps/cs/src/shared/config/api.ts b/apps/cs/src/shared/config/api.ts
index c5d3ac937..15fd9611f 100644
--- a/apps/cs/src/shared/config/api.ts
+++ b/apps/cs/src/shared/config/api.ts
@@ -15,15 +15,15 @@ export const ENDPOINT = {
   },
   CMS_SERVICE: {
     SITES: "/cms-service/api/v1/sites",
-    CODE: "/cms-service/api/v1/code/cache",
     IPS: "/cms-service/api/v1/site-ips",
     DOMAINS: "/cms-service/api/v1/site-dmns",
+    POSTINGS: "/cms-service/api/v1/site-pstgs",
+    CODE: "/cms-service/api/v1/code/cache",
     MENUS: "/cms-service/api/v1/menus",
     MENU_ROLES: "/cms-service/api/v1/menu-roles",
     CONTENTS: "/cms-service/api/v1/contents",
-    USER_OGNZ: "/cms-service/api/v1/user-ognz",
+    USER_ORGANIZATION: "/cms-service/api/v1/user-ognz",
     IMAGES: "/cms-service/api/v1/images",
-    SITE_PSTGS: "/cms-service/api/v1/site-pstgs",
   },
   BOARD_SERVICE: {
     BBS: "/board-service/api/v1/bbs",

From 7e5571150651087ff7c1db36a646313d4c4ca2ca Mon Sep 17 00:00:00 2001
From: bicochan <chanii8@naver.com>
Date: Mon, 7 Apr 2025 14:00:29 +0900
Subject: [PATCH 15/38] =?UTF-8?q?chore:=20Image=20=EC=9D=B8=ED=84=B0?=
 =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=8A=A4=20=EC=88=98=EC=A0=95(imgTypeCd)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/cs/src/pages/image/model/image-interface.ts      | 2 +-
 apps/cs/src/pages/image/model/image-table-columns.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/cs/src/pages/image/model/image-interface.ts b/apps/cs/src/pages/image/model/image-interface.ts
index 32065968d..2026ef9b5 100644
--- a/apps/cs/src/pages/image/model/image-interface.ts
+++ b/apps/cs/src/pages/image/model/image-interface.ts
@@ -17,7 +17,7 @@ export interface ImageParams extends PageableParams {
 
 export interface Image {
   imgSn: number;
-  imgTypeCd: string;
+  imgTypeCd: ImageType;
   imgTypeNm: string;
   imgTtl: string;
   lnkgUrlAddr: string;
diff --git a/apps/cs/src/pages/image/model/image-table-columns.tsx b/apps/cs/src/pages/image/model/image-table-columns.tsx
index 8ae770e0e..5a1323242 100644
--- a/apps/cs/src/pages/image/model/image-table-columns.tsx
+++ b/apps/cs/src/pages/image/model/image-table-columns.tsx
@@ -37,7 +37,7 @@ export const columns: ColumnDef<Image>[] = [
     accessorKey: "imgTypeCd",
     header: "이미지구분",
     cell: ({ row }) => {
-      const type = row.getValue("imgTypeCd") as string;
+      const type = row.getValue("imgTypeCd");
       switch (type) {
         case IMAGE_TYPE.IMGSUB:
           return "서브이미지";

From a1dd0dc9314f69481fbea4092ab479542d36aa5b Mon Sep 17 00:00:00 2001
From: bicochan <chanii8@naver.com>
Date: Mon, 7 Apr 2025 16:43:55 +0900
Subject: [PATCH 16/38] =?UTF-8?q?feat:=20textarea=20=EC=BB=B4=ED=8F=AC?=
 =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/common/components/src/ui/index.ts    |  1 +
 .../components/src/ui/textarea/index.tsx      | 22 +++++++++++++++++++
 2 files changed, 23 insertions(+)
 create mode 100644 packages/common/components/src/ui/textarea/index.tsx

diff --git a/packages/common/components/src/ui/index.ts b/packages/common/components/src/ui/index.ts
index c51eef045..4ff471de1 100644
--- a/packages/common/components/src/ui/index.ts
+++ b/packages/common/components/src/ui/index.ts
@@ -23,3 +23,4 @@ export * from "./slider";
 export * from "./switch";
 export * from "./table";
 export * from "./tabs";
+export * from "./textarea";
diff --git a/packages/common/components/src/ui/textarea/index.tsx b/packages/common/components/src/ui/textarea/index.tsx
new file mode 100644
index 000000000..9fa52c947
--- /dev/null
+++ b/packages/common/components/src/ui/textarea/index.tsx
@@ -0,0 +1,22 @@
+import * as React from "react";
+
+import { cn } from "../../lib/utils";
+
+const Textarea = React.forwardRef<
+  HTMLTextAreaElement,
+  React.ComponentProps<"textarea">
+>(({ className, ...props }, ref) => {
+  return (
+    <textarea
+      className={cn(
+        "flex min-h-[6rem] w-full rounded-md border border-input bg-transparent p-3 text-base placeholder:text-placeholder focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        className,
+      )}
+      ref={ref}
+      {...props}
+    />
+  );
+});
+Textarea.displayName = "Textarea";
+
+export { Textarea };

From 9a2bdfc0ca4c03eacb55bdaa13aae6b37d152959 Mon Sep 17 00:00:00 2001
From: bicochan <chanii8@naver.com>
Date: Mon, 7 Apr 2025 17:05:55 +0900
Subject: [PATCH 17/38] =?UTF-8?q?feat:=20=EB=B0=B0=EB=84=88=20=EA=B4=80?=
 =?UTF-8?q?=EB=A6=AC=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=9E=91=EC=97=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../cs/app/(with-base-layout)/banner/page.tsx |   2 +
 .../banner/register/[serial]/page.tsx         |  10 +
 .../banner/register/page.tsx                  |   2 +
 .../cs/src/pages/banner/api/banner-service.ts |  51 +++
 apps/cs/src/pages/banner/index.ts             |   3 +
 apps/cs/src/pages/banner/lib/utils.ts         |  61 ++++
 .../pages/banner/model/banner-interface.ts    |  56 +++
 .../banner/model/banner-table-columns.tsx     |  55 +++
 .../banner/model/posting-table-columns.tsx    |  44 +++
 apps/cs/src/pages/banner/ui/banner-form.tsx   | 337 ++++++++++++++++++
 apps/cs/src/pages/banner/ui/banner-page.tsx   | 136 +++++++
 apps/cs/src/pages/banner/ui/create-page.tsx   |  46 +++
 apps/cs/src/pages/banner/ui/modify-page.tsx   | 140 ++++++++
 .../pages/image/model/image-table-columns.tsx |   1 -
 apps/cs/src/pages/image/ui/image-page.tsx     |   7 +-
 apps/cs/src/shared/config/api.ts              |   1 +
 16 files changed, 950 insertions(+), 2 deletions(-)
 create mode 100644 apps/cs/app/(with-base-layout)/banner/page.tsx
 create mode 100644 apps/cs/app/(with-base-layout)/banner/register/[serial]/page.tsx
 create mode 100644 apps/cs/app/(with-base-layout)/banner/register/page.tsx
 create mode 100644 apps/cs/src/pages/banner/api/banner-service.ts
 create mode 100644 apps/cs/src/pages/banner/index.ts
 create mode 100644 apps/cs/src/pages/banner/lib/utils.ts
 create mode 100644 apps/cs/src/pages/banner/model/banner-interface.ts
 create mode 100644 apps/cs/src/pages/banner/model/banner-table-columns.tsx
 create mode 100644 apps/cs/src/pages/banner/model/posting-table-columns.tsx
 create mode 100644 apps/cs/src/pages/banner/ui/banner-form.tsx
 create mode 100644 apps/cs/src/pages/banner/ui/banner-page.tsx
 create mode 100644 apps/cs/src/pages/banner/ui/create-page.tsx
 create mode 100644 apps/cs/src/pages/banner/ui/modify-page.tsx

diff --git a/apps/cs/app/(with-base-layout)/banner/page.tsx b/apps/cs/app/(with-base-layout)/banner/page.tsx
new file mode 100644
index 000000000..23f63defe
--- /dev/null
+++ b/apps/cs/app/(with-base-layout)/banner/page.tsx
@@ -0,0 +1,2 @@
+import { BannerPage } from "@/pages/banner";
+export default BannerPage;
diff --git a/apps/cs/app/(with-base-layout)/banner/register/[serial]/page.tsx b/apps/cs/app/(with-base-layout)/banner/register/[serial]/page.tsx
new file mode 100644
index 000000000..b8ecbbcc8
--- /dev/null
+++ b/apps/cs/app/(with-base-layout)/banner/register/[serial]/page.tsx
@@ -0,0 +1,10 @@
+import { ModifyPage as VModifyPage } from "@/pages/banner";
+
+export default async function ModifyPage({
+  params,
+}: {
+  params: Promise<{ serial: string }>;
+}) {
+  const { serial } = await params;
+  return <VModifyPage serial={serial} />;
+}
diff --git a/apps/cs/app/(with-base-layout)/banner/register/page.tsx b/apps/cs/app/(with-base-layout)/banner/register/page.tsx
new file mode 100644
index 000000000..46eb12c1c
--- /dev/null
+++ b/apps/cs/app/(with-base-layout)/banner/register/page.tsx
@@ -0,0 +1,2 @@
+import { CreatePage } from "@/pages/banner";
+export default CreatePage;
diff --git a/apps/cs/src/pages/banner/api/banner-service.ts b/apps/cs/src/pages/banner/api/banner-service.ts
new file mode 100644
index 000000000..93646c770
--- /dev/null
+++ b/apps/cs/src/pages/banner/api/banner-service.ts
@@ -0,0 +1,51 @@
+import { client } from "@/shared/api";
+import { ENDPOINT } from "@/shared/config";
+import type {
+  BannerFormData,
+  BannerInfo,
+  BannerList,
+  BannerParams,
+  BannerService,
+} from "../model/banner-interface";
+
+export class BannerApiService implements BannerService {
+  public async getBannerList(params: BannerParams): Promise<BannerList> {
+    const response = await client.get<BannerList>(
+      `${ENDPOINT.CMS_SERVICE.BANNERS}`,
+      { params },
+    );
+    return response.data;
+  }
+
+  public async getBannerInfo(bnrSn: string): Promise<BannerInfo> {
+    const response = await client.get<BannerInfo>(
+      `${ENDPOINT.CMS_SERVICE.BANNERS}/${bnrSn}`,
+    );
+    return response.data;
+  }
+
+  public async createBanner(data: BannerFormData): Promise<void> {
+    const response = await client.post<void>(
+      ENDPOINT.CMS_SERVICE.BANNERS,
+      data,
+    );
+    return response.data;
+  }
+
+  public async updateBanner(
+    bnrSn: string,
+    data: BannerFormData,
+  ): Promise<void> {
+    const response = await client.put<void>(
+      `${ENDPOINT.CMS_SERVICE.BANNERS}/${bnrSn}`,
+      data,
+    );
+    return response.data;
+  }
+
+  public async deleteBanner(bnrSn: string): Promise<void> {
+    await client.delete(`${ENDPOINT.CMS_SERVICE.BANNERS}/${bnrSn}`);
+  }
+}
+
+export const BannerApi = new BannerApiService();
diff --git a/apps/cs/src/pages/banner/index.ts b/apps/cs/src/pages/banner/index.ts
new file mode 100644
index 000000000..b2f0c6a55
--- /dev/null
+++ b/apps/cs/src/pages/banner/index.ts
@@ -0,0 +1,3 @@
+export { CreatePage } from "./ui/create-page";
+export { ModifyPage } from "./ui/modify-page";
+export { BannerPage } from "./ui/banner-page";
diff --git a/apps/cs/src/pages/banner/lib/utils.ts b/apps/cs/src/pages/banner/lib/utils.ts
new file mode 100644
index 000000000..c6c8ca101
--- /dev/null
+++ b/apps/cs/src/pages/banner/lib/utils.ts
@@ -0,0 +1,61 @@
+import { Upload, type HttpResponse } from "tus-js-client";
+import { getCookie, setCookie } from "@/shared/lib";
+import { AUTH_USER_ID, CLAIM_NAME, ENDPOINT } from "@/shared/config";
+
+type UploadOptions = {
+  handleUploadStart?: (upload: Upload) => void;
+  handleProgress?: (percentage: string) => void;
+  handleSuccess?: (upload: Upload) => void;
+  handleResponse?: (res: HttpResponse) => void;
+};
+
+export const handleUpload = (files: FileList, options?: UploadOptions) => {
+  let metadata = {};
+
+  const file = files.item(0);
+  if (!file) return;
+  metadata = {
+    filename: file.name,
+    filetype: file.type,
+  };
+
+  const atflCd = getCookie("atfl-cd-key");
+  if (atflCd) {
+    metadata = {
+      ...metadata,
+      atflCd,
+    };
+  }
+
+  const upload = new Upload(file, {
+    endpoint: `${ENDPOINT.ATTACH_SERVICE.TUS_UPLOAD}`,
+    chunkSize: 10 * 1024 * 1024,
+    headers: {
+      [CLAIM_NAME]: getCookie(CLAIM_NAME) ?? "",
+      [AUTH_USER_ID]: getCookie(AUTH_USER_ID) ?? "",
+    },
+    metadata,
+    onError(error) {
+      console.error(`Failed because: ${error}`);
+    },
+    onProgress(bytesUploaded, bytesTotal) {
+      const percentage = ((bytesUploaded / bytesTotal) * 100).toFixed(2);
+      options?.handleProgress?.(percentage);
+    },
+    onAfterResponse(req, res) {
+      const fileInfo = res.getHeader("X-File-Info");
+      if (fileInfo === undefined || fileInfo === null) return;
+
+      setCookie("atfl-cd-key", JSON.parse(fileInfo)?.atflCd ?? "");
+      options?.handleResponse?.(res);
+    },
+    onSuccess() {
+      options?.handleSuccess?.(upload);
+    },
+  });
+
+  upload.start();
+  options?.handleUploadStart?.(upload);
+
+  console.log("upload start >>>>>", upload);
+};
diff --git a/apps/cs/src/pages/banner/model/banner-interface.ts b/apps/cs/src/pages/banner/model/banner-interface.ts
new file mode 100644
index 000000000..839830dad
--- /dev/null
+++ b/apps/cs/src/pages/banner/model/banner-interface.ts
@@ -0,0 +1,56 @@
+import { z } from "zod";
+import type { PageableList, PageableParams } from "@/shared/model";
+
+export const BANNER_TYPE = {
+  BNRMAIN: "BNRMAIN",
+  BNRFTER: "BNRFTER",
+} as const;
+
+export type BannerType = (typeof BANNER_TYPE)[keyof typeof BANNER_TYPE];
+
+export interface BannerParams extends PageableParams {
+  bnrTypeCd?: BannerType;
+  bnrTtl?: string;
+  useYn?: string;
+}
+
+export interface Banner {
+  bnrSn: number;
+  bnrTypeCd: BannerType;
+  bnrTypeNm: string;
+  bnrTtl: string;
+  lnkgUrlAddr: string;
+  useYn: string;
+  mdfcnDt: string;
+  mdfr: string;
+  mdfrNm: string;
+}
+
+export interface BannerInfo extends Omit<Banner, "mdfr"> {
+  bnrExpln: string;
+  newWndwYn: string;
+  atflCd: string;
+  regDt: string;
+  rgTrNm: string;
+}
+
+export const bannerFormSchema = z.object({
+  bnrTypeCd: z.string(),
+  bnrTtl: z.string(),
+  bnrExpln: z.string().nullish(),
+  lnkgUrlAddr: z.string().nullish(),
+  newWndwYn: z.string(),
+  atflCd: z.string().nullish(),
+  useYn: z.string(),
+});
+
+export type BannerFormData = z.infer<typeof bannerFormSchema>;
+export type BannerList = PageableList<Banner>;
+
+export interface BannerService {
+  getBannerList: (params: BannerParams) => Promise<BannerList>;
+  getBannerInfo: (bnrSn: string) => Promise<BannerInfo>;
+  createBanner: (data: BannerFormData) => Promise<void>;
+  updateBanner: (bnrSn: string, data: BannerFormData) => Promise<void>;
+  deleteBanner: (bnrSn: string) => Promise<void>;
+}
diff --git a/apps/cs/src/pages/banner/model/banner-table-columns.tsx b/apps/cs/src/pages/banner/model/banner-table-columns.tsx
new file mode 100644
index 000000000..69833ab00
--- /dev/null
+++ b/apps/cs/src/pages/banner/model/banner-table-columns.tsx
@@ -0,0 +1,55 @@
+"use client";
+
+import dayjs from "dayjs";
+import { type ColumnDef } from "@tanstack/react-table";
+import { Checkbox } from "@common/components/ui";
+import { type Banner } from "./banner-interface";
+
+export const columns: ColumnDef<Banner>[] = [
+  {
+    id: "select",
+    header: ({ table }) => (
+      <Checkbox
+        checked={table.getIsAllPageRowsSelected()}
+        onClick={(e) => e.stopPropagation()}
+        onCheckedChange={(checked) =>
+          table.toggleAllPageRowsSelected(!!checked)
+        }
+        className="h-4 w-4 rounded border-gray-300"
+      />
+    ),
+    cell: ({ row }) => (
+      <Checkbox
+        checked={row.getIsSelected()}
+        onClick={(e) => e.stopPropagation()}
+        onCheckedChange={(checked) => row.toggleSelected(!!checked)}
+        className="h-4 w-4 rounded border-gray-300"
+      />
+    ),
+  },
+  // TODO: 배너 이미지 셀 추가
+  {
+    accessorKey: "bnrTtl",
+    header: "배너명",
+  },
+  {
+    accessorKey: "bnrTypeNm",
+    header: "배너구분",
+  },
+  {
+    accessorKey: "useYn",
+    header: "사용여부",
+  },
+  {
+    accessorKey: "mdfrNm",
+    header: "최종수정자",
+  },
+  {
+    accessorKey: "mdfcnDt",
+    header: "최종수정일",
+    cell: ({ row }) => {
+      const date = row.getValue("mdfcnDt") as string;
+      return date ? dayjs(date).format("YYYY-MM-DD") : "";
+    },
+  },
+];
diff --git a/apps/cs/src/pages/banner/model/posting-table-columns.tsx b/apps/cs/src/pages/banner/model/posting-table-columns.tsx
new file mode 100644
index 000000000..a43cf8693
--- /dev/null
+++ b/apps/cs/src/pages/banner/model/posting-table-columns.tsx
@@ -0,0 +1,44 @@
+"use client";
+
+import dayjs from "dayjs";
+import type { ColumnDef } from "@tanstack/react-table";
+import { Checkbox } from "@common/components/ui";
+import type { Post } from "@/entities/posting";
+
+export const columns: ColumnDef<Post>[] = [
+  {
+    id: "select",
+    header: ({ table }) => (
+      <Checkbox
+        checked={table.getIsAllPageRowsSelected()}
+        onClick={(e) => e.stopPropagation()}
+        onCheckedChange={(checked) =>
+          table.toggleAllPageRowsSelected(!!checked)
+        }
+        className="h-4 w-4 rounded border-gray-300"
+      />
+    ),
+    cell: ({ row }) => (
+      <Checkbox
+        checked={row.getIsSelected()}
+        onClick={(e) => e.stopPropagation()}
+        onCheckedChange={(checked) => row.toggleSelected(!!checked)}
+        className="h-4 w-4 rounded border-gray-300"
+      />
+    ),
+  },
+  {
+    accessorKey: "siteNm",
+    header: "사이트",
+  },
+  {
+    accessorKey: "pstgPrdSeNm",
+    header: "게시기간",
+    cell: ({ row }) => {
+      const pstgPrdSeNm = row.original.pstgPrdSeNm;
+      const pstgBgngDt = row.original.pstgBgngDt;
+      const pstgEndDt = row.original.pstgEndDt;
+      return `${pstgPrdSeNm} (${dayjs(pstgBgngDt).format("YYYY-MM-DD")} ~ ${dayjs(pstgEndDt).format("YYYY-MM-DD")})`;
+    },
+  },
+];
diff --git a/apps/cs/src/pages/banner/ui/banner-form.tsx b/apps/cs/src/pages/banner/ui/banner-form.tsx
new file mode 100644
index 000000000..6ebf9cffd
--- /dev/null
+++ b/apps/cs/src/pages/banner/ui/banner-form.tsx
@@ -0,0 +1,337 @@
+"use client";
+
+import Image from "next/image";
+import { useEffect, useState } from "react";
+import { useRouter } from "next/navigation";
+import { useQuery } from "@tanstack/react-query";
+import type { UseFormReturn } from "react-hook-form";
+import type { HttpResponse, Upload } from "tus-js-client";
+import { useConfirm } from "@frontend-opensource/use-react-hooks";
+import {
+  Button,
+  FileUploader,
+  Input,
+  Label,
+  Progress,
+  RadioGroup,
+  RadioGroupItem,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableRow,
+  Textarea,
+} from "@common/components";
+import { CodeSelect } from "@/entities/code";
+import { AttachmentApi } from "@/entities/attachment";
+import { ENDPOINT } from "@/shared/config";
+import { Form, FormControl, FormField, FormItem } from "@/shared/ui/form";
+import type { BannerFormData } from "../model/banner-interface";
+import { handleUpload } from "../lib/utils";
+
+type BannerFormProps = {
+  form: UseFormReturn<BannerFormData>;
+  bnrSn?: string;
+  handleSave: (data: BannerFormData) => Promise<void>;
+  handleDelete?: () => Promise<void>;
+};
+
+function BannerForm({
+  form,
+  bnrSn,
+  handleSave,
+  handleDelete,
+}: BannerFormProps) {
+  const isModifyMode = !!bnrSn;
+  const atflCd = form.watch("atflCd");
+
+  const router = useRouter();
+  const { confirm } = useConfirm();
+  const [attachmentFileId, setAttachmentFileId] = useState("");
+  const [upload, setUpload] = useState<Upload | null>(null);
+  const [progress, setProgress] = useState(0);
+
+  const { data: atflId } = useQuery({
+    queryKey: [ENDPOINT.ATTACH_SERVICE.ATTACHMENTS, atflCd],
+    queryFn: () => AttachmentApi.getAttachments(atflCd!),
+    select: (data) => data?.[data.length - 1]?.atflId,
+    enabled: !!atflCd,
+  });
+
+  const onSubmit = async (data: BannerFormData) => {
+    const confirmMessage = isModifyMode
+      ? "수정하시겠습니까?"
+      : "저장하시겠습니까?";
+
+    if (await confirm(confirmMessage)) {
+      await handleSave(data);
+    }
+  };
+
+  const onDelete = async () => {
+    if (await confirm("삭제하시겠습니까?")) {
+      await handleDelete?.();
+    }
+  };
+
+  const handleProgress = (percentage: string) => {
+    setProgress(Number(percentage));
+  };
+
+  const handleUploadResponse = async (res: HttpResponse) => {
+    const fileInfo = res.getHeader("X-File-Info");
+    if (fileInfo === undefined || fileInfo === null) return;
+
+    const { atflCd, atflId } = JSON.parse(fileInfo) ?? {};
+    if (atflCd) form.setValue("atflCd", atflCd);
+    if (atflId) setAttachmentFileId(atflId);
+  };
+
+  useEffect(() => {
+    if (atflId) setAttachmentFileId(atflId);
+  }, [atflId]);
+
+  return (
+    <>
+      <Form {...form}>
+        <form onSubmit={form.handleSubmit(onSubmit)}>
+          <div className="card">
+            <Table variant="secondary">
+              <colgroup>
+                <col width="20%" />
+                <col width="80%" />
+              </colgroup>
+              <TableBody>
+                <TableRow>
+                  <TableHead>배너명</TableHead>
+                  <TableCell className="border">
+                    <FormField
+                      control={form.control}
+                      name="bnrTtl"
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormControl>
+                            <Input
+                              {...field}
+                              value={field.value ?? ""}
+                              className="!text-[1.3rem]"
+                              placeholder="배너명을 입력해주세요"
+                            />
+                          </FormControl>
+                        </FormItem>
+                      )}
+                    />
+                  </TableCell>
+                </TableRow>
+                <TableRow>
+                  <TableHead>배너구분</TableHead>
+                  <TableCell className="border">
+                    <FormField
+                      control={form.control}
+                      name="bnrTypeCd"
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormControl>
+                            <CodeSelect
+                              {...field}
+                              value={field.value ?? ""}
+                              upCd="BNRTYPE"
+                              onValueChange={field.onChange}
+                            />
+                          </FormControl>
+                        </FormItem>
+                      )}
+                    />
+                  </TableCell>
+                </TableRow>
+                <TableRow>
+                  <TableHead>배너 이미지</TableHead>
+                  <TableCell className="border">
+                    <FormField
+                      control={form.control}
+                      name="atflCd"
+                      render={() => (
+                        <FormItem className="flex flex-col">
+                          <FormControl>
+                            <FileUploader
+                              id="atflCd"
+                              className="!h-auto !max-w-none flex-col !items-start"
+                              accept=".jpeg,.jpg,.png"
+                              onUpload={(e) => {
+                                const files = e.target.files;
+                                if (!files) return;
+                                handleUpload(files, {
+                                  handleUploadStart: setUpload,
+                                  handleProgress,
+                                  handleSuccess: setUpload,
+                                  handleResponse: handleUploadResponse,
+                                });
+                              }}
+                              customPreview={
+                                <>
+                                  <Label htmlFor="atflCd">
+                                    <div className="relative h-[27rem] w-[48rem] overflow-hidden rounded-sm border border-border bg-accent">
+                                      <p className="absolute bottom-3 left-0 p-2 text-base leading-none">
+                                        {(upload?.file as File)?.name}
+                                      </p>
+                                      <div className="relative h-full w-full">
+                                        {attachmentFileId && (
+                                          <Image
+                                            src={`${ENDPOINT.ATTACH_SERVICE.IMAGES}/${attachmentFileId}`}
+                                            alt="업로드된 이미지"
+                                            fill
+                                            objectFit="contain"
+                                          />
+                                        )}
+                                      </div>
+                                      <Progress
+                                        value={progress}
+                                        className="absolute bottom-0 left-0"
+                                      />
+                                    </div>
+                                  </Label>
+                                  <div className="mb-2 text-lg font-medium text-label">
+                                    <ul className="ml-10 list-disc">
+                                      <li>
+                                        이미지 파일(jpg, jpeg, png, gif)만
+                                        업로드 가능합니다.
+                                      </li>
+                                    </ul>
+                                  </div>
+                                </>
+                              }
+                            />
+                          </FormControl>
+                        </FormItem>
+                      )}
+                    />
+                  </TableCell>
+                </TableRow>
+                <TableRow>
+                  <TableHead>링크 URL</TableHead>
+                  <TableCell className="border">
+                    <FormField
+                      control={form.control}
+                      name="lnkgUrlAddr"
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormControl>
+                            <Input
+                              {...field}
+                              value={field.value ?? ""}
+                              className="!text-[1.3rem]"
+                              placeholder="배너에 연결할 링크를 입력해주세요"
+                            />
+                          </FormControl>
+                        </FormItem>
+                      )}
+                    />
+                  </TableCell>
+                </TableRow>
+                <TableRow>
+                  <TableHead>링크 열기</TableHead>
+                  <TableCell className="border">
+                    <FormField
+                      control={form.control}
+                      name="newWndwYn"
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormControl>
+                            <RadioGroup
+                              {...field}
+                              name="newWndwYn"
+                              onValueChange={field.onChange}
+                            >
+                              <div className="flex items-center space-x-2">
+                                <RadioGroupItem value="N" id="newWndwN" />
+                                <Label htmlFor="newWndwN">현재창</Label>
+                              </div>
+                              <div className="flex items-center space-x-2">
+                                <RadioGroupItem value="Y" id="newWndwY" />
+                                <Label htmlFor="newWndwY">새창</Label>
+                              </div>
+                            </RadioGroup>
+                          </FormControl>
+                        </FormItem>
+                      )}
+                    />
+                  </TableCell>
+                </TableRow>
+                <TableRow>
+                  <TableHead>배너 설명</TableHead>
+                  <TableCell className="border">
+                    <FormField
+                      control={form.control}
+                      name="bnrExpln"
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormControl>
+                            <Textarea
+                              {...field}
+                              value={field.value ?? ""}
+                              className="!text-[1.3rem] !leading-6"
+                              placeholder="배너에 대한 설명을 입력해주세요"
+                            />
+                          </FormControl>
+                        </FormItem>
+                      )}
+                    />
+                  </TableCell>
+                </TableRow>
+                <TableRow>
+                  <TableHead>사용여부</TableHead>
+                  <TableCell className="border">
+                    <FormField
+                      control={form.control}
+                      name="useYn"
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormControl>
+                            <RadioGroup
+                              {...field}
+                              name="useYn"
+                              onValueChange={field.onChange}
+                            >
+                              <div className="flex items-center space-x-2">
+                                <RadioGroupItem value="Y" id="useY" />
+                                <Label htmlFor="useY">사용</Label>
+                              </div>
+                              <div className="flex items-center space-x-2">
+                                <RadioGroupItem value="N" id="useN" />
+                                <Label htmlFor="useN">미사용</Label>
+                              </div>
+                            </RadioGroup>
+                          </FormControl>
+                        </FormItem>
+                      )}
+                    />
+                  </TableCell>
+                </TableRow>
+              </TableBody>
+            </Table>
+          </div>
+          <div className="flex justify-center gap-4 pb-12 pt-10">
+            <Button
+              size="lg"
+              color="white"
+              type="button"
+              onClick={() => router.back()}
+            >
+              목록
+            </Button>
+            <Button size="lg" type="submit">
+              저장
+            </Button>
+            {isModifyMode && (
+              <Button size="lg" color="red" type="button" onClick={onDelete}>
+                삭제
+              </Button>
+            )}
+          </div>
+        </form>
+      </Form>
+    </>
+  );
+}
+
+export { BannerForm };
diff --git a/apps/cs/src/pages/banner/ui/banner-page.tsx b/apps/cs/src/pages/banner/ui/banner-page.tsx
new file mode 100644
index 000000000..a2019c126
--- /dev/null
+++ b/apps/cs/src/pages/banner/ui/banner-page.tsx
@@ -0,0 +1,136 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { useRouter } from "next/navigation";
+import { useQuery } from "@tanstack/react-query";
+import {
+  getCoreRowModel,
+  useReactTable,
+  type PaginationState,
+  type RowSelectionState,
+} from "@tanstack/react-table";
+import { Button, DataTable, Input, Label } from "@common/components";
+import { POSTING_TYPE, PostingDialog } from "@/entities/posting";
+import { ENDPOINT } from "@/shared/config";
+import { BannerApi } from "../api/banner-service";
+import { columns } from "../model/banner-table-columns";
+import { type Banner, type BannerParams } from "../model/banner-interface";
+
+type PostingTarget = {
+  pstgTrgtNm: string;
+  pstgTrgtNo: number;
+};
+
+function BannerPage() {
+  const router = useRouter();
+
+  const [rowSelection, setRowSelection] = useState<RowSelectionState>({});
+  const [postingTargets, setPostingTargets] = useState<PostingTarget[]>([]);
+  const [bannerQuery, setBannerQuery] = useState<BannerParams>({ bnrTtl: "" });
+  const [pagination, setPagination] = useState<PaginationState>({
+    pageIndex: 0,
+    pageSize: 5,
+  });
+
+  const { data: bannerList, refetch } = useQuery({
+    queryKey: [ENDPOINT.CMS_SERVICE.BANNERS],
+    queryFn: () =>
+      BannerApi.getBannerList({
+        ...bannerQuery,
+        page: pagination.pageIndex,
+        size: pagination.pageSize,
+      }),
+    enabled: false,
+  });
+
+  const table = useReactTable({
+    data: bannerList?.content ?? [],
+    columns,
+    state: {
+      pagination,
+      rowSelection,
+    },
+    rowCount: bannerList?.totalElements ?? 0,
+    manualPagination: true,
+    enableMultiRowSelection: true,
+    getCoreRowModel: getCoreRowModel(),
+    onPaginationChange: setPagination,
+    onRowSelectionChange: setRowSelection,
+  });
+
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    refetch();
+  };
+
+  const handleRowClick = (row: Banner) => {
+    router.push(`/banner/register/${row.bnrSn}`);
+  };
+
+  useEffect(() => {
+    const postingTargets = table
+      .getFilteredSelectedRowModel()
+      .rows.map((row) => ({
+        pstgTrgtNm: row.original.bnrTtl,
+        pstgTrgtNo: row.original.bnrSn,
+      }));
+
+    if (!postingTargets.length) {
+      setPostingTargets([]);
+      return;
+    }
+
+    setPostingTargets(postingTargets);
+  }, [rowSelection]);
+
+  useEffect(() => {
+    refetch();
+  }, []);
+
+  useEffect(() => {
+    refetch();
+  }, [pagination]);
+
+  return (
+    <div className="card card-border !mt-6">
+      <div className="card card-border">
+        <form onSubmit={handleSubmit} className="flex items-center gap-2 p-2">
+          <Label htmlFor="" className="mr-2 text-label">
+            배너명
+          </Label>
+          <Input
+            className="h-[3.2rem] w-[24rem] rounded-sm !text-[1.3rem]"
+            value={bannerQuery.bnrTtl}
+            onChange={(e) =>
+              setBannerQuery({ ...bannerQuery, bnrTtl: e.target.value })
+            }
+          />
+          <Button className="h-[3.2rem]" type="submit">
+            조회
+          </Button>
+        </form>
+      </div>
+      <div className="card card-border">
+        <div className="card-header">
+          <div className="flex w-full items-center justify-between">
+            <h3 className="text-2xl font-medium text-label">배너 목록</h3>
+            <div className="flex gap-2">
+              <PostingDialog
+                postingType={POSTING_TYPE.BANNER}
+                postingTargets={postingTargets}
+              />
+              <Button onClick={() => router.push("/banner/register")}>
+                등록
+              </Button>
+            </div>
+          </div>
+        </div>
+        <div className="card !m-[1.2rem] h-[30.4rem] overflow-auto !p-0">
+          <DataTable table={table} onRowClick={handleRowClick} viewPagination />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export { BannerPage };
diff --git a/apps/cs/src/pages/banner/ui/create-page.tsx b/apps/cs/src/pages/banner/ui/create-page.tsx
new file mode 100644
index 000000000..23d082c1d
--- /dev/null
+++ b/apps/cs/src/pages/banner/ui/create-page.tsx
@@ -0,0 +1,46 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useMutation } from "@tanstack/react-query";
+import { useAlertStore } from "@/shared/lib/use-alert-store";
+import {
+  bannerFormSchema,
+  type BannerFormData,
+} from "../model/banner-interface";
+import { BannerApi } from "../api/banner-service";
+import { BannerForm } from "./banner-form";
+
+function CreatePage() {
+  const router = useRouter();
+  const { setMessage: alert } = useAlertStore((state) => state);
+
+  const { mutateAsync: createBanner } = useMutation({
+    mutationFn: (data: BannerFormData) => BannerApi.createBanner(data),
+    onSuccess: () => {
+      alert("등록되었습니다.", router.back);
+    },
+  });
+
+  const form = useForm<BannerFormData>({
+    resolver: zodResolver(bannerFormSchema),
+    defaultValues: {
+      newWndwYn: "N",
+      useYn: "Y",
+    },
+  });
+
+  console.log(form.formState.errors);
+
+  return (
+    <div className="card card-border !mt-6">
+      <div className="card-header">
+        <h3 className="text-2xl font-medium text-label">배너 등록</h3>
+      </div>
+      <BannerForm form={form} handleSave={createBanner} />
+    </div>
+  );
+}
+
+export { CreatePage };
diff --git a/apps/cs/src/pages/banner/ui/modify-page.tsx b/apps/cs/src/pages/banner/ui/modify-page.tsx
new file mode 100644
index 000000000..38c43ebe5
--- /dev/null
+++ b/apps/cs/src/pages/banner/ui/modify-page.tsx
@@ -0,0 +1,140 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import {
+  getCoreRowModel,
+  useReactTable,
+  type RowSelectionState,
+} from "@tanstack/react-table";
+import { useConfirm } from "@frontend-opensource/use-react-hooks";
+import { Button, DataTable } from "@common/components/ui";
+import { PostingApi, type WithModePost } from "@/entities/posting";
+import { useAlertStore } from "@/shared/lib/use-alert-store";
+import { ConfirmDialog } from "@/shared/ui/confirm-dialog";
+import { ENDPOINT } from "@/shared/config";
+import {
+  bannerFormSchema,
+  type BannerFormData,
+} from "../model/banner-interface";
+import { columns } from "../model/posting-table-columns";
+import { BannerApi } from "../api/banner-service";
+import { BannerForm } from "./banner-form";
+
+function ModifyPage({ serial }: { serial: string }) {
+  const router = useRouter();
+  const { confirm } = useConfirm();
+  const queryClient = useQueryClient();
+  const { setMessage: alert } = useAlertStore((state) => state);
+
+  const [onConfirm, setOnConfirm] = useState(false);
+  const [rowSelection, setRowSelection] = useState<RowSelectionState>({});
+
+  const { data: bannerDetail } = useQuery({
+    queryKey: [ENDPOINT.CMS_SERVICE.BANNERS, serial],
+    queryFn: () => BannerApi.getBannerInfo(serial),
+  });
+
+  const { data: postHistory } = useQuery({
+    queryKey: [ENDPOINT.CMS_SERVICE.POSTINGS, serial],
+    queryFn: () => PostingApi.getPostingHistory({ pstgTrgtNo: Number(serial) }),
+  });
+
+  const { mutateAsync: updateBanner } = useMutation({
+    mutationFn: (data: BannerFormData) => BannerApi.updateBanner(serial, data),
+    onSuccess: () => {
+      alert("수정되었습니다.");
+    },
+  });
+
+  const { mutateAsync: deleteBanner } = useMutation({
+    mutationFn: () => BannerApi.deleteBanner(serial),
+    onSuccess: () => {
+      alert("삭제되었습니다.", router.back);
+    },
+  });
+
+  const { mutateAsync: requestPosting } = useMutation({
+    mutationFn: (data: WithModePost[]) => PostingApi.requestPosting(data),
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: [ENDPOINT.CMS_SERVICE.POSTINGS, serial],
+      });
+    },
+  });
+
+  const form = useForm<BannerFormData>({
+    resolver: zodResolver(bannerFormSchema),
+    values: bannerDetail,
+  });
+
+  const table = useReactTable({
+    data: postHistory?.content ?? [],
+    columns,
+    state: {
+      rowSelection,
+    },
+    enableMultiRowSelection: true,
+    getCoreRowModel: getCoreRowModel(),
+    onRowSelectionChange: setRowSelection,
+  });
+
+  const handleDeletePostingHistory = async () => {
+    const data = table.getFilteredSelectedRowModel().rows.map((row) => ({
+      ...row.original,
+      mode: "D",
+    }));
+
+    setOnConfirm(true);
+    if (await confirm("삭제하시겠습니까?")) {
+      setOnConfirm(false);
+      await requestPosting(data);
+      alert("삭제되었습니다.");
+    }
+    setOnConfirm(false);
+  };
+
+  return (
+    <>
+      <div className="mt-6 flex flex-col">
+        <div className="card card-border">
+          <div className="card-header">
+            <h3 className="text-2xl font-medium text-label">배너 수정</h3>
+          </div>
+          <BannerForm
+            form={form}
+            bnrSn={serial}
+            handleSave={updateBanner}
+            handleDelete={deleteBanner}
+          />
+        </div>
+        <div className="card card-border">
+          <div className="card-header">
+            <h3 className="text-2xl font-medium text-label">
+              사이트 게시 이력
+            </h3>
+          </div>
+          <div className="card">
+            <div className="mb-4 flex justify-end">
+              <Button
+                size="sm"
+                color="red"
+                disabled={!table.getFilteredSelectedRowModel().rows.length}
+                onClick={handleDeletePostingHistory}
+              >
+                이력삭제
+              </Button>
+            </div>
+            <DataTable table={table} />
+          </div>
+        </div>
+      </div>
+      <ConfirmDialog open={onConfirm} />
+    </>
+  );
+}
+
+export { ModifyPage };
diff --git a/apps/cs/src/pages/image/model/image-table-columns.tsx b/apps/cs/src/pages/image/model/image-table-columns.tsx
index 5a1323242..dd80ad9c7 100644
--- a/apps/cs/src/pages/image/model/image-table-columns.tsx
+++ b/apps/cs/src/pages/image/model/image-table-columns.tsx
@@ -57,7 +57,6 @@ export const columns: ColumnDef<Image>[] = [
   {
     accessorKey: "useYn",
     header: "사용여부",
-    cell: ({ row }) => (row.getValue("useYn") === "Y" ? "사용" : "미사용"),
   },
   {
     accessorKey: "mdfrNm",
diff --git a/apps/cs/src/pages/image/ui/image-page.tsx b/apps/cs/src/pages/image/ui/image-page.tsx
index 900ae005a..648b8e410 100644
--- a/apps/cs/src/pages/image/ui/image-page.tsx
+++ b/apps/cs/src/pages/image/ui/image-page.tsx
@@ -50,6 +50,7 @@ function ImagePage() {
       pagination,
       rowSelection,
     },
+    rowCount: imageList?.totalElements ?? 0,
     manualPagination: true,
     enableMultiRowSelection: true,
     getCoreRowModel: getCoreRowModel(),
@@ -86,6 +87,10 @@ function ImagePage() {
     refetch();
   }, []);
 
+  useEffect(() => {
+    refetch();
+  }, [pagination]);
+
   return (
     <div className="card card-border !mt-6">
       <div className="card card-border">
@@ -120,7 +125,7 @@ function ImagePage() {
             </div>
           </div>
         </div>
-        <div className="card !m-[1.2rem] h-[29.2rem] overflow-auto !p-0">
+        <div className="card !m-[1.2rem] h-[30.4rem] overflow-auto !p-0">
           <DataTable table={table} onRowClick={handleRowClick} viewPagination />
         </div>
       </div>
diff --git a/apps/cs/src/shared/config/api.ts b/apps/cs/src/shared/config/api.ts
index 15fd9611f..fa4332dd4 100644
--- a/apps/cs/src/shared/config/api.ts
+++ b/apps/cs/src/shared/config/api.ts
@@ -24,6 +24,7 @@ export const ENDPOINT = {
     CONTENTS: "/cms-service/api/v1/contents",
     USER_ORGANIZATION: "/cms-service/api/v1/user-ognz",
     IMAGES: "/cms-service/api/v1/images",
+    BANNERS: "/cms-service/api/v1/bnrs",
   },
   BOARD_SERVICE: {
     BBS: "/board-service/api/v1/bbs",

From 2797ec210e33cf7a653cdfad6166ae9b5aed23f8 Mon Sep 17 00:00:00 2001
From: bicochan <chanii8@naver.com>
Date: Mon, 7 Apr 2025 17:38:37 +0900
Subject: [PATCH 18/38] =?UTF-8?q?fix:=20getCurrentMenu=20=ED=95=A8?=
 =?UTF-8?q?=EC=88=98=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/cs/src/entities/menu/lib/utils.ts | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/apps/cs/src/entities/menu/lib/utils.ts b/apps/cs/src/entities/menu/lib/utils.ts
index 5606d7aa2..d526b34b4 100644
--- a/apps/cs/src/entities/menu/lib/utils.ts
+++ b/apps/cs/src/entities/menu/lib/utils.ts
@@ -5,10 +5,12 @@ export const getCurrentMenu = (
   pathname: string,
 ): MenuItem | null => {
   for (const menu of menus) {
-    if (menu.children) {
-      return getCurrentMenu(menu.children, pathname);
-    }
     if (menu.urlPath === pathname) return menu;
+
+    if (menu.children) {
+      const children = getCurrentMenu(menu.children, pathname);
+      if (children) return children;
+    }
   }
   return null;
 };

From d6b48ea55405234f86eb48253e2baef8a8a4d931 Mon Sep 17 00:00:00 2001
From: bicochan <chanii8@naver.com>
Date: Tue, 8 Apr 2025 10:39:04 +0900
Subject: [PATCH 19/38] =?UTF-8?q?refactor:=20blob=20=EC=9D=B4=EB=AF=B8?=
 =?UTF-8?q?=EC=A7=80=20=EA=B0=80=EC=A0=B8=EC=98=A4=EB=8A=94=20=EB=B0=A9?=
 =?UTF-8?q?=EC=8B=9D=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../entities/attachment/api/attachment-service.ts  |  7 +++++++
 .../attachment/model/attachment-interface.ts       |  1 +
 apps/cs/src/pages/banner/ui/banner-form.tsx        | 14 +++++++++-----
 apps/cs/src/pages/image/ui/image-form.tsx          | 14 +++++++++-----
 packages/common/components/src/ui/lnb/index.tsx    |  3 ++-
 5 files changed, 28 insertions(+), 11 deletions(-)

diff --git a/apps/cs/src/entities/attachment/api/attachment-service.ts b/apps/cs/src/entities/attachment/api/attachment-service.ts
index b0c613c5f..cabba36d0 100644
--- a/apps/cs/src/entities/attachment/api/attachment-service.ts
+++ b/apps/cs/src/entities/attachment/api/attachment-service.ts
@@ -12,6 +12,13 @@ export class AttachmentApiService implements AttachmentService {
     );
     return response.data;
   }
+
+  public async getImageUrl(atflId: string): Promise<string> {
+    if (!atflId) return "";
+    const response = await fetch(`${ENDPOINT.ATTACH_SERVICE.IMAGES}/${atflId}`);
+    const blob = await response.blob();
+    return URL.createObjectURL(blob);
+  }
 }
 
 export const AttachmentApi = new AttachmentApiService();
diff --git a/apps/cs/src/entities/attachment/model/attachment-interface.ts b/apps/cs/src/entities/attachment/model/attachment-interface.ts
index 367e54127..a790efbef 100644
--- a/apps/cs/src/entities/attachment/model/attachment-interface.ts
+++ b/apps/cs/src/entities/attachment/model/attachment-interface.ts
@@ -15,4 +15,5 @@ export interface Attachment {
 
 export interface AttachmentService {
   getAttachments: (atflCd: string) => Promise<Attachment[]>;
+  getImageUrl: (atflId: string) => Promise<string>;
 }
diff --git a/apps/cs/src/pages/banner/ui/banner-form.tsx b/apps/cs/src/pages/banner/ui/banner-form.tsx
index 6ebf9cffd..4e283d45d 100644
--- a/apps/cs/src/pages/banner/ui/banner-form.tsx
+++ b/apps/cs/src/pages/banner/ui/banner-form.tsx
@@ -47,7 +47,7 @@ function BannerForm({
 
   const router = useRouter();
   const { confirm } = useConfirm();
-  const [attachmentFileId, setAttachmentFileId] = useState("");
+  const [imageUrl, setImageUrl] = useState("");
   const [upload, setUpload] = useState<Upload | null>(null);
   const [progress, setProgress] = useState(0);
 
@@ -84,11 +84,15 @@ function BannerForm({
 
     const { atflCd, atflId } = JSON.parse(fileInfo) ?? {};
     if (atflCd) form.setValue("atflCd", atflCd);
-    if (atflId) setAttachmentFileId(atflId);
+    if (atflId) setImageUrl(await AttachmentApi.getImageUrl(atflId));
   };
 
   useEffect(() => {
-    if (atflId) setAttachmentFileId(atflId);
+    if (!atflId) return;
+
+    (async () => {
+      setImageUrl(await AttachmentApi.getImageUrl(atflId));
+    })();
   }, [atflId]);
 
   return (
@@ -175,9 +179,9 @@ function BannerForm({
                                         {(upload?.file as File)?.name}
                                       </p>
                                       <div className="relative h-full w-full">
-                                        {attachmentFileId && (
+                                        {imageUrl && (
                                           <Image
-                                            src={`${ENDPOINT.ATTACH_SERVICE.IMAGES}/${attachmentFileId}`}
+                                            src={imageUrl}
                                             alt="업로드된 이미지"
                                             fill
                                             objectFit="contain"
diff --git a/apps/cs/src/pages/image/ui/image-form.tsx b/apps/cs/src/pages/image/ui/image-form.tsx
index 13c306a2d..96e7f755d 100644
--- a/apps/cs/src/pages/image/ui/image-form.tsx
+++ b/apps/cs/src/pages/image/ui/image-form.tsx
@@ -42,7 +42,7 @@ function ImageForm({ form, imgSn, handleSave, handleDelete }: ImageFormProps) {
 
   const router = useRouter();
   const { confirm } = useConfirm();
-  const [attachmentFileId, setAttachmentFileId] = useState("");
+  const [imageUrl, setImageUrl] = useState("");
   const [upload, setUpload] = useState<Upload | null>(null);
   const [progress, setProgress] = useState(0);
 
@@ -79,11 +79,15 @@ function ImageForm({ form, imgSn, handleSave, handleDelete }: ImageFormProps) {
 
     const { atflCd, atflId } = JSON.parse(fileInfo) ?? {};
     if (atflCd) form.setValue("atflCd", atflCd);
-    if (atflId) setAttachmentFileId(atflId);
+    if (atflId) setImageUrl(await AttachmentApi.getImageUrl(atflId));
   };
 
   useEffect(() => {
-    if (atflId) setAttachmentFileId(atflId);
+    if (!atflId) return;
+
+    (async () => {
+      setImageUrl(await AttachmentApi.getImageUrl(atflId));
+    })();
   }, [atflId]);
 
   return (
@@ -228,9 +232,9 @@ function ImageForm({ form, imgSn, handleSave, handleDelete }: ImageFormProps) {
                                           {(upload?.file as File)?.name}
                                         </p>
                                         <div className="relative h-full w-full">
-                                          {attachmentFileId && (
+                                          {imageUrl && (
                                             <Image
-                                              src={`${ENDPOINT.ATTACH_SERVICE.IMAGES}/${attachmentFileId}`}
+                                              src={imageUrl}
                                               alt="업로드된 이미지"
                                               fill
                                               objectFit="contain"
diff --git a/packages/common/components/src/ui/lnb/index.tsx b/packages/common/components/src/ui/lnb/index.tsx
index 41dc06bfd..f2655be9d 100644
--- a/packages/common/components/src/ui/lnb/index.tsx
+++ b/packages/common/components/src/ui/lnb/index.tsx
@@ -37,7 +37,8 @@ export function LNB({
   const [openMenuIds, setOpenMenuIds] = useState<number[]>([]);
 
   function isPathMatched(path: string) {
-    return currentPath === path;
+    if (!path) return false;
+    return currentPath?.startsWith(path);
   }
 
   function MenuItem({ item }: { item: MenuItem }) {

From 77539bb7855e572467b56d5d5d50d31e2cf18a5a Mon Sep 17 00:00:00 2001
From: bicochan <chanii8@naver.com>
Date: Tue, 8 Apr 2025 13:59:04 +0900
Subject: [PATCH 20/38] =?UTF-8?q?refactor:=20form=20wrapper=20=EC=84=A0?=
 =?UTF-8?q?=EC=96=B8=20=EB=B0=8F=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/cs/src/entities/code/@x/posting.ts       |   1 +
 .../entities/posting/ui/posting-dialog.tsx    |   4 +-
 apps/cs/src/entities/site/@x/posting.ts       |   2 +
 .../src/entities/site/model/site-interface.ts |  16 +-
 apps/cs/src/pages/banner/ui/banner-form.tsx   | 482 ++++++-------
 apps/cs/src/pages/image/ui/image-form.tsx     | 497 ++++++-------
 apps/cs/src/pages/menu/ui/menu-form.tsx       |  89 +--
 apps/cs/src/pages/site/ui/create-page.tsx     |   4 +-
 .../site/ui/domain-management-dialog.tsx      | 308 ++++----
 .../pages/site/ui/ip-management-dialog.tsx    | 266 ++++---
 apps/cs/src/pages/site/ui/site-form.tsx       | 667 ++++++++----------
 apps/cs/src/widgets/form-wrapper/index.ts     |   1 +
 .../widgets/form-wrapper/ui/form-wrapper.tsx  |  68 ++
 13 files changed, 1146 insertions(+), 1259 deletions(-)
 create mode 100644 apps/cs/src/entities/code/@x/posting.ts
 create mode 100644 apps/cs/src/entities/site/@x/posting.ts
 create mode 100644 apps/cs/src/widgets/form-wrapper/index.ts
 create mode 100644 apps/cs/src/widgets/form-wrapper/ui/form-wrapper.tsx

diff --git a/apps/cs/src/entities/code/@x/posting.ts b/apps/cs/src/entities/code/@x/posting.ts
new file mode 100644
index 000000000..0525684d9
--- /dev/null
+++ b/apps/cs/src/entities/code/@x/posting.ts
@@ -0,0 +1 @@
+export { CodeSelect } from "../ui/code-select";
diff --git a/apps/cs/src/entities/posting/ui/posting-dialog.tsx b/apps/cs/src/entities/posting/ui/posting-dialog.tsx
index d7c0b60ca..b49e541c2 100644
--- a/apps/cs/src/entities/posting/ui/posting-dialog.tsx
+++ b/apps/cs/src/entities/posting/ui/posting-dialog.tsx
@@ -25,8 +25,8 @@ import {
   DialogFooter,
 } from "@common/components/ui";
 import { cn } from "@common/components/lib";
-import { CodeSelect } from "@/entities/code";
-import { SiteApi, type Site } from "@/entities/site";
+import { CodeSelect } from "@/entities/code/@x/posting";
+import { SiteApi, type Site } from "@/entities/site/@x/posting";
 import type { PageableList } from "@/shared/model";
 import { ENDPOINT } from "@/shared/config";
 import { PostingApi } from "../api/posting-service";
diff --git a/apps/cs/src/entities/site/@x/posting.ts b/apps/cs/src/entities/site/@x/posting.ts
new file mode 100644
index 000000000..6470b3cb2
--- /dev/null
+++ b/apps/cs/src/entities/site/@x/posting.ts
@@ -0,0 +1,2 @@
+export { SiteApi } from "../api/site-service";
+export type { Site } from "../model/site-interface";
diff --git a/apps/cs/src/entities/site/model/site-interface.ts b/apps/cs/src/entities/site/model/site-interface.ts
index 85b1f802f..8846f59b9 100644
--- a/apps/cs/src/entities/site/model/site-interface.ts
+++ b/apps/cs/src/entities/site/model/site-interface.ts
@@ -35,17 +35,17 @@ export interface SiteDetail extends SiteFormData {
 export const siteFormSchema = z.object({
   siteId: z.string().max(2).nonempty(),
   siteNm: z.string().max(100).nonempty(),
-  siteExpln: z.string().max(1000).nullable(),
+  siteExpln: z.string().max(1000).nullish(),
   siteKndCd: z.string().max(10).nonempty(),
-  siteAddr: z.string().max(2000).nullable(),
-  faxNo: z.string().max(100).nullable(),
-  telNo: z.string().max(1000).nullable(),
-  lwndCn: z.string().max(2000).nullable(),
+  siteAddr: z.string().max(2000).nullish(),
+  faxNo: z.string().max(100).nullish(),
+  telNo: z.string().max(1000).nullish(),
+  lwndCn: z.string().max(2000).nullish(),
   bscSiteYn: z.string(),
-  bkmkIcon: z.string().max(100).nullable(),
+  bkmkIcon: z.string().max(100).nullish(),
   useYn: z.string(),
-  siteSkn: z.string().max(10).nullable(),
-  dmnAddr: z.string().nullable(),
+  siteSkn: z.string().max(10).nullish(),
+  dmnAddr: z.string().nullish(),
 });
 
 export type SiteFormData = z.infer<typeof siteFormSchema>;
diff --git a/apps/cs/src/pages/banner/ui/banner-form.tsx b/apps/cs/src/pages/banner/ui/banner-form.tsx
index 4e283d45d..ade05f13e 100644
--- a/apps/cs/src/pages/banner/ui/banner-form.tsx
+++ b/apps/cs/src/pages/banner/ui/banner-form.tsx
@@ -2,13 +2,10 @@
 
 import Image from "next/image";
 import { useEffect, useState } from "react";
-import { useRouter } from "next/navigation";
 import { useQuery } from "@tanstack/react-query";
 import type { UseFormReturn } from "react-hook-form";
 import type { HttpResponse, Upload } from "tus-js-client";
-import { useConfirm } from "@frontend-opensource/use-react-hooks";
 import {
-  Button,
   FileUploader,
   Input,
   Label,
@@ -25,9 +22,10 @@ import {
 import { CodeSelect } from "@/entities/code";
 import { AttachmentApi } from "@/entities/attachment";
 import { ENDPOINT } from "@/shared/config";
-import { Form, FormControl, FormField, FormItem } from "@/shared/ui/form";
+import { FormControl, FormField, FormItem } from "@/shared/ui/form";
 import type { BannerFormData } from "../model/banner-interface";
 import { handleUpload } from "../lib/utils";
+import { FormWrapper } from "@/widgets/form-wrapper";
 
 type BannerFormProps = {
   form: UseFormReturn<BannerFormData>;
@@ -36,17 +34,9 @@ type BannerFormProps = {
   handleDelete?: () => Promise<void>;
 };
 
-function BannerForm({
-  form,
-  bnrSn,
-  handleSave,
-  handleDelete,
-}: BannerFormProps) {
-  const isModifyMode = !!bnrSn;
+function BannerForm({ form, bnrSn, ...props }: BannerFormProps) {
   const atflCd = form.watch("atflCd");
 
-  const router = useRouter();
-  const { confirm } = useConfirm();
   const [imageUrl, setImageUrl] = useState("");
   const [upload, setUpload] = useState<Upload | null>(null);
   const [progress, setProgress] = useState(0);
@@ -58,22 +48,6 @@ function BannerForm({
     enabled: !!atflCd,
   });
 
-  const onSubmit = async (data: BannerFormData) => {
-    const confirmMessage = isModifyMode
-      ? "수정하시겠습니까?"
-      : "저장하시겠습니까?";
-
-    if (await confirm(confirmMessage)) {
-      await handleSave(data);
-    }
-  };
-
-  const onDelete = async () => {
-    if (await confirm("삭제하시겠습니까?")) {
-      await handleDelete?.();
-    }
-  };
-
   const handleProgress = (percentage: string) => {
     setProgress(Number(percentage));
   };
@@ -96,245 +70,223 @@ function BannerForm({
   }, [atflId]);
 
   return (
-    <>
-      <Form {...form}>
-        <form onSubmit={form.handleSubmit(onSubmit)}>
-          <div className="card">
-            <Table variant="secondary">
-              <colgroup>
-                <col width="20%" />
-                <col width="80%" />
-              </colgroup>
-              <TableBody>
-                <TableRow>
-                  <TableHead>배너명</TableHead>
-                  <TableCell className="border">
-                    <FormField
-                      control={form.control}
-                      name="bnrTtl"
-                      render={({ field }) => (
-                        <FormItem>
-                          <FormControl>
-                            <Input
-                              {...field}
-                              value={field.value ?? ""}
-                              className="!text-[1.3rem]"
-                              placeholder="배너명을 입력해주세요"
-                            />
-                          </FormControl>
-                        </FormItem>
-                      )}
-                    />
-                  </TableCell>
-                </TableRow>
-                <TableRow>
-                  <TableHead>배너구분</TableHead>
-                  <TableCell className="border">
-                    <FormField
-                      control={form.control}
-                      name="bnrTypeCd"
-                      render={({ field }) => (
-                        <FormItem>
-                          <FormControl>
-                            <CodeSelect
-                              {...field}
-                              value={field.value ?? ""}
-                              upCd="BNRTYPE"
-                              onValueChange={field.onChange}
-                            />
-                          </FormControl>
-                        </FormItem>
-                      )}
-                    />
-                  </TableCell>
-                </TableRow>
-                <TableRow>
-                  <TableHead>배너 이미지</TableHead>
-                  <TableCell className="border">
-                    <FormField
-                      control={form.control}
-                      name="atflCd"
-                      render={() => (
-                        <FormItem className="flex flex-col">
-                          <FormControl>
-                            <FileUploader
-                              id="atflCd"
-                              className="!h-auto !max-w-none flex-col !items-start"
-                              accept=".jpeg,.jpg,.png"
-                              onUpload={(e) => {
-                                const files = e.target.files;
-                                if (!files) return;
-                                handleUpload(files, {
-                                  handleUploadStart: setUpload,
-                                  handleProgress,
-                                  handleSuccess: setUpload,
-                                  handleResponse: handleUploadResponse,
-                                });
-                              }}
-                              customPreview={
-                                <>
-                                  <Label htmlFor="atflCd">
-                                    <div className="relative h-[27rem] w-[48rem] overflow-hidden rounded-sm border border-border bg-accent">
-                                      <p className="absolute bottom-3 left-0 p-2 text-base leading-none">
-                                        {(upload?.file as File)?.name}
-                                      </p>
-                                      <div className="relative h-full w-full">
-                                        {imageUrl && (
-                                          <Image
-                                            src={imageUrl}
-                                            alt="업로드된 이미지"
-                                            fill
-                                            objectFit="contain"
-                                          />
-                                        )}
-                                      </div>
-                                      <Progress
-                                        value={progress}
-                                        className="absolute bottom-0 left-0"
+    <FormWrapper form={form} isModifyMode={!!bnrSn} {...props}>
+      <div className="card">
+        <Table variant="secondary">
+          <colgroup>
+            <col width="20%" />
+            <col width="80%" />
+          </colgroup>
+          <TableBody>
+            <TableRow>
+              <TableHead>배너명</TableHead>
+              <TableCell className="border">
+                <FormField
+                  control={form.control}
+                  name="bnrTtl"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormControl>
+                        <Input
+                          {...field}
+                          value={field.value ?? ""}
+                          className="!text-[1.3rem]"
+                          placeholder="배너명을 입력해주세요"
+                        />
+                      </FormControl>
+                    </FormItem>
+                  )}
+                />
+              </TableCell>
+            </TableRow>
+            <TableRow>
+              <TableHead>배너구분</TableHead>
+              <TableCell className="border">
+                <FormField
+                  control={form.control}
+                  name="bnrTypeCd"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormControl>
+                        <CodeSelect
+                          {...field}
+                          value={field.value ?? ""}
+                          upCd="BNRTYPE"
+                          onValueChange={field.onChange}
+                        />
+                      </FormControl>
+                    </FormItem>
+                  )}
+                />
+              </TableCell>
+            </TableRow>
+            <TableRow>
+              <TableHead>배너 이미지</TableHead>
+              <TableCell className="border">
+                <FormField
+                  control={form.control}
+                  name="atflCd"
+                  render={() => (
+                    <FormItem className="flex flex-col">
+                      <FormControl>
+                        <FileUploader
+                          id="atflCd"
+                          className="!h-auto !max-w-none flex-col !items-start"
+                          accept=".jpeg,.jpg,.png"
+                          onUpload={(e) => {
+                            const files = e.target.files;
+                            if (!files) return;
+                            handleUpload(files, {
+                              handleUploadStart: setUpload,
+                              handleProgress,
+                              handleSuccess: setUpload,
+                              handleResponse: handleUploadResponse,
+                            });
+                          }}
+                          customPreview={
+                            <>
+                              <Label htmlFor="atflCd">
+                                <div className="relative h-[27rem] w-[48rem] overflow-hidden rounded-sm border border-border bg-accent">
+                                  <p className="absolute bottom-3 left-0 p-2 text-base leading-none">
+                                    {(upload?.file as File)?.name}
+                                  </p>
+                                  <div className="relative h-full w-full">
+                                    {imageUrl && (
+                                      <Image
+                                        src={imageUrl}
+                                        alt="업로드된 이미지"
+                                        fill
+                                        objectFit="contain"
                                       />
-                                    </div>
-                                  </Label>
-                                  <div className="mb-2 text-lg font-medium text-label">
-                                    <ul className="ml-10 list-disc">
-                                      <li>
-                                        이미지 파일(jpg, jpeg, png, gif)만
-                                        업로드 가능합니다.
-                                      </li>
-                                    </ul>
+                                    )}
                                   </div>
-                                </>
-                              }
-                            />
-                          </FormControl>
-                        </FormItem>
-                      )}
-                    />
-                  </TableCell>
-                </TableRow>
-                <TableRow>
-                  <TableHead>링크 URL</TableHead>
-                  <TableCell className="border">
-                    <FormField
-                      control={form.control}
-                      name="lnkgUrlAddr"
-                      render={({ field }) => (
-                        <FormItem>
-                          <FormControl>
-                            <Input
-                              {...field}
-                              value={field.value ?? ""}
-                              className="!text-[1.3rem]"
-                              placeholder="배너에 연결할 링크를 입력해주세요"
-                            />
-                          </FormControl>
-                        </FormItem>
-                      )}
-                    />
-                  </TableCell>
-                </TableRow>
-                <TableRow>
-                  <TableHead>링크 열기</TableHead>
-                  <TableCell className="border">
-                    <FormField
-                      control={form.control}
-                      name="newWndwYn"
-                      render={({ field }) => (
-                        <FormItem>
-                          <FormControl>
-                            <RadioGroup
-                              {...field}
-                              name="newWndwYn"
-                              onValueChange={field.onChange}
-                            >
-                              <div className="flex items-center space-x-2">
-                                <RadioGroupItem value="N" id="newWndwN" />
-                                <Label htmlFor="newWndwN">현재창</Label>
+                                  <Progress
+                                    value={progress}
+                                    className="absolute bottom-0 left-0"
+                                  />
+                                </div>
+                              </Label>
+                              <div className="mb-2 text-lg font-medium text-label">
+                                <ul className="ml-10 list-disc">
+                                  <li>
+                                    이미지 파일(jpg, jpeg, png, gif)만 업로드
+                                    가능합니다.
+                                  </li>
+                                </ul>
                               </div>
-                              <div className="flex items-center space-x-2">
-                                <RadioGroupItem value="Y" id="newWndwY" />
-                                <Label htmlFor="newWndwY">새창</Label>
-                              </div>
-                            </RadioGroup>
-                          </FormControl>
-                        </FormItem>
-                      )}
-                    />
-                  </TableCell>
-                </TableRow>
-                <TableRow>
-                  <TableHead>배너 설명</TableHead>
-                  <TableCell className="border">
-                    <FormField
-                      control={form.control}
-                      name="bnrExpln"
-                      render={({ field }) => (
-                        <FormItem>
-                          <FormControl>
-                            <Textarea
-                              {...field}
-                              value={field.value ?? ""}
-                              className="!text-[1.3rem] !leading-6"
-                              placeholder="배너에 대한 설명을 입력해주세요"
-                            />
-                          </FormControl>
-                        </FormItem>
-                      )}
-                    />
-                  </TableCell>
-                </TableRow>
-                <TableRow>
-                  <TableHead>사용여부</TableHead>
-                  <TableCell className="border">
-                    <FormField
-                      control={form.control}
-                      name="useYn"
-                      render={({ field }) => (
-                        <FormItem>
-                          <FormControl>
-                            <RadioGroup
-                              {...field}
-                              name="useYn"
-                              onValueChange={field.onChange}
-                            >
-                              <div className="flex items-center space-x-2">
-                                <RadioGroupItem value="Y" id="useY" />
-                                <Label htmlFor="useY">사용</Label>
-                              </div>
-                              <div className="flex items-center space-x-2">
-                                <RadioGroupItem value="N" id="useN" />
-                                <Label htmlFor="useN">미사용</Label>
-                              </div>
-                            </RadioGroup>
-                          </FormControl>
-                        </FormItem>
-                      )}
-                    />
-                  </TableCell>
-                </TableRow>
-              </TableBody>
-            </Table>
-          </div>
-          <div className="flex justify-center gap-4 pb-12 pt-10">
-            <Button
-              size="lg"
-              color="white"
-              type="button"
-              onClick={() => router.back()}
-            >
-              목록
-            </Button>
-            <Button size="lg" type="submit">
-              저장
-            </Button>
-            {isModifyMode && (
-              <Button size="lg" color="red" type="button" onClick={onDelete}>
-                삭제
-              </Button>
-            )}
-          </div>
-        </form>
-      </Form>
-    </>
+                            </>
+                          }
+                        />
+                      </FormControl>
+                    </FormItem>
+                  )}
+                />
+              </TableCell>
+            </TableRow>
+            <TableRow>
+              <TableHead>링크 URL</TableHead>
+              <TableCell className="border">
+                <FormField
+                  control={form.control}
+                  name="lnkgUrlAddr"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormControl>
+                        <Input
+                          {...field}
+                          value={field.value ?? ""}
+                          className="!text-[1.3rem]"
+                          placeholder="배너에 연결할 링크를 입력해주세요"
+                        />
+                      </FormControl>
+                    </FormItem>
+                  )}
+                />
+              </TableCell>
+            </TableRow>
+            <TableRow>
+              <TableHead>링크 열기</TableHead>
+              <TableCell className="border">
+                <FormField
+                  control={form.control}
+                  name="newWndwYn"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormControl>
+                        <RadioGroup
+                          {...field}
+                          name="newWndwYn"
+                          onValueChange={field.onChange}
+                        >
+                          <div className="flex items-center space-x-2">
+                            <RadioGroupItem value="N" id="newWndwN" />
+                            <Label htmlFor="newWndwN">현재창</Label>
+                          </div>
+                          <div className="flex items-center space-x-2">
+                            <RadioGroupItem value="Y" id="newWndwY" />
+                            <Label htmlFor="newWndwY">새창</Label>
+                          </div>
+                        </RadioGroup>
+                      </FormControl>
+                    </FormItem>
+                  )}
+                />
+              </TableCell>
+            </TableRow>
+            <TableRow>
+              <TableHead>배너 설명</TableHead>
+              <TableCell className="border">
+                <FormField
+                  control={form.control}
+                  name="bnrExpln"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormControl>
+                        <Textarea
+                          {...field}
+                          value={field.value ?? ""}
+                          className="!text-[1.3rem] !leading-6"
+                          placeholder="배너에 대한 설명을 입력해주세요"
+                        />
+                      </FormControl>
+                    </FormItem>
+                  )}
+                />
+              </TableCell>
+            </TableRow>
+            <TableRow>
+              <TableHead>사용여부</TableHead>
+              <TableCell className="border">
+                <FormField
+                  control={form.control}
+                  name="useYn"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormControl>
+                        <RadioGroup
+                          {...field}
+                          name="useYn"
+                          onValueChange={field.onChange}
+                        >
+                          <div className="flex items-center space-x-2">
+                            <RadioGroupItem value="Y" id="useY" />
+                            <Label htmlFor="useY">사용</Label>
+                          </div>
+                          <div className="flex items-center space-x-2">
+                            <RadioGroupItem value="N" id="useN" />
+                            <Label htmlFor="useN">미사용</Label>
+                          </div>
+                        </RadioGroup>
+                      </FormControl>
+                    </FormItem>
+                  )}
+                />
+              </TableCell>
+            </TableRow>
+          </TableBody>
+        </Table>
+      </div>
+    </FormWrapper>
   );
 }
 
diff --git a/apps/cs/src/pages/image/ui/image-form.tsx b/apps/cs/src/pages/image/ui/image-form.tsx
index 96e7f755d..18d5df554 100644
--- a/apps/cs/src/pages/image/ui/image-form.tsx
+++ b/apps/cs/src/pages/image/ui/image-form.tsx
@@ -2,13 +2,10 @@
 
 import Image from "next/image";
 import { useEffect, useState } from "react";
-import { useRouter } from "next/navigation";
 import { useQuery } from "@tanstack/react-query";
 import type { UseFormReturn } from "react-hook-form";
 import type { HttpResponse, Upload } from "tus-js-client";
-import { useConfirm } from "@frontend-opensource/use-react-hooks";
 import {
-  Button,
   FileUploader,
   Input,
   Label,
@@ -21,10 +18,11 @@ import {
   TableHead,
   TableRow,
 } from "@common/components";
+import { FormWrapper } from "@/widgets/form-wrapper";
 import { CodeSelect } from "@/entities/code";
 import { AttachmentApi } from "@/entities/attachment";
 import { ENDPOINT } from "@/shared/config";
-import { Form, FormControl, FormField, FormItem } from "@/shared/ui/form";
+import { FormControl, FormField, FormItem } from "@/shared/ui/form";
 import type { ImageFormData } from "../model/image-interface";
 import { handleUpload } from "../lib/utils";
 
@@ -35,13 +33,10 @@ type ImageFormProps = {
   handleDelete?: () => Promise<void>;
 };
 
-function ImageForm({ form, imgSn, handleSave, handleDelete }: ImageFormProps) {
-  const isModifyMode = !!imgSn;
+function ImageForm({ form, imgSn, ...props }: ImageFormProps) {
   const atflYn = form.watch("atflYn");
   const atflCd = form.watch("atflCd");
 
-  const router = useRouter();
-  const { confirm } = useConfirm();
   const [imageUrl, setImageUrl] = useState("");
   const [upload, setUpload] = useState<Upload | null>(null);
   const [progress, setProgress] = useState(0);
@@ -53,22 +48,6 @@ function ImageForm({ form, imgSn, handleSave, handleDelete }: ImageFormProps) {
     enabled: !!atflCd,
   });
 
-  const onSubmit = async (data: ImageFormData) => {
-    const confirmMessage = isModifyMode
-      ? "수정하시겠습니까?"
-      : "저장하시겠습니까?";
-
-    if (await confirm(confirmMessage)) {
-      await handleSave(data);
-    }
-  };
-
-  const onDelete = async () => {
-    if (await confirm("삭제하시겠습니까?")) {
-      await handleDelete?.();
-    }
-  };
-
   const handleProgress = (percentage: string) => {
     setProgress(Number(percentage));
   };
@@ -91,255 +70,233 @@ function ImageForm({ form, imgSn, handleSave, handleDelete }: ImageFormProps) {
   }, [atflId]);
 
   return (
-    <>
-      <Form {...form}>
-        <form onSubmit={form.handleSubmit(onSubmit)}>
-          <div className="card">
-            <Table variant="secondary">
-              <colgroup>
-                <col width="20%" />
-                <col width="80%" />
-              </colgroup>
-              <TableBody>
-                <TableRow>
-                  <TableHead>이미지명</TableHead>
-                  <TableCell className="border">
-                    <FormField
-                      control={form.control}
-                      name="imgTtl"
-                      render={({ field }) => (
-                        <FormItem>
-                          <FormControl>
-                            <Input
-                              {...field}
-                              value={field.value ?? ""}
-                              className="!text-[1.3rem]"
-                              placeholder="이미지명을 입력해주세요"
-                            />
-                          </FormControl>
-                        </FormItem>
-                      )}
-                    />
-                  </TableCell>
-                </TableRow>
-                <TableRow>
-                  <TableHead>정렬순서</TableHead>
-                  <TableCell className="border">
-                    <FormField
-                      control={form.control}
-                      name="sortSeq"
-                      render={({ field }) => (
-                        <FormItem>
-                          <FormControl>
-                            <Input
-                              {...field}
-                              type="number"
-                              min={0}
-                              value={field.value ?? ""}
-                              onChange={(e) => {
-                                const value = e.target.value;
-                                if (isNaN(Number(value))) return;
-                                field.onChange(Number(value));
-                              }}
-                              className="w-[12rem] !text-[1.3rem]"
-                              placeholder="정렬순서를 입력해주세요"
-                            />
-                          </FormControl>
-                        </FormItem>
-                      )}
-                    />
-                  </TableCell>
-                </TableRow>
-                <TableRow>
-                  <TableHead>이미지유형</TableHead>
-                  <TableCell className="border">
-                    <FormField
-                      control={form.control}
-                      name="imgTypeCd"
-                      render={({ field }) => (
-                        <FormItem>
-                          <FormControl>
-                            <CodeSelect
-                              {...field}
-                              value={field.value ?? ""}
-                              upCd="IMGTYPE"
-                              onValueChange={field.onChange}
-                            />
-                          </FormControl>
-                        </FormItem>
-                      )}
-                    />
-                  </TableCell>
-                </TableRow>
-                <TableRow>
-                  <TableHead>첨부파일</TableHead>
-                  <TableCell className="border">
-                    <FormField
-                      control={form.control}
-                      name="atflYn"
-                      render={({ field }) => (
-                        <FormItem>
-                          <FormControl>
-                            <RadioGroup
-                              {...field}
-                              name="atflYn"
-                              onValueChange={field.onChange}
-                            >
-                              <div className="flex items-center space-x-2">
-                                <RadioGroupItem value="Y" id="atflY" />
-                                <Label htmlFor="atflY">이미지파일</Label>
-                              </div>
-                              <div className="flex items-center space-x-2">
-                                <RadioGroupItem value="N" id="atflN" />
-                                <Label htmlFor="atflN">외부링크</Label>
-                              </div>
-                            </RadioGroup>
-                          </FormControl>
-                        </FormItem>
-                      )}
-                    />
-                  </TableCell>
-                </TableRow>
-                {atflYn === "Y" && (
-                  <TableRow>
-                    <TableHead>이미지파일</TableHead>
-                    <TableCell className="border">
-                      <FormField
-                        control={form.control}
-                        name="atflCd"
-                        render={() => (
-                          <FormItem className="flex flex-col">
-                            <FormControl>
-                              <FileUploader
-                                id="atflCd"
-                                className="!h-auto !max-w-none flex-col !items-start"
-                                accept=".jpeg,.jpg,.png"
-                                onUpload={(e) => {
-                                  const files = e.target.files;
-                                  if (!files) return;
-                                  handleUpload(files, {
-                                    handleUploadStart: setUpload,
-                                    handleProgress,
-                                    handleSuccess: setUpload,
-                                    handleResponse: handleUploadResponse,
-                                  });
-                                }}
-                                customPreview={
-                                  <>
-                                    <Label htmlFor="atflCd">
-                                      <div className="relative h-[27rem] w-[48rem] overflow-hidden rounded-sm border border-border bg-accent">
-                                        <p className="absolute bottom-3 left-0 p-2 text-base leading-none">
-                                          {(upload?.file as File)?.name}
-                                        </p>
-                                        <div className="relative h-full w-full">
-                                          {imageUrl && (
-                                            <Image
-                                              src={imageUrl}
-                                              alt="업로드된 이미지"
-                                              fill
-                                              objectFit="contain"
-                                            />
-                                          )}
-                                        </div>
-                                        <Progress
-                                          value={progress}
-                                          className="absolute bottom-0 left-0"
+    <FormWrapper form={form} isModifyMode={!!imgSn} {...props}>
+      <div className="card">
+        <Table variant="secondary">
+          <colgroup>
+            <col width="20%" />
+            <col width="80%" />
+          </colgroup>
+          <TableBody>
+            <TableRow>
+              <TableHead>이미지명</TableHead>
+              <TableCell className="border">
+                <FormField
+                  control={form.control}
+                  name="imgTtl"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormControl>
+                        <Input
+                          {...field}
+                          value={field.value ?? ""}
+                          className="!text-[1.3rem]"
+                          placeholder="이미지명을 입력해주세요"
+                        />
+                      </FormControl>
+                    </FormItem>
+                  )}
+                />
+              </TableCell>
+            </TableRow>
+            <TableRow>
+              <TableHead>정렬순서</TableHead>
+              <TableCell className="border">
+                <FormField
+                  control={form.control}
+                  name="sortSeq"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormControl>
+                        <Input
+                          {...field}
+                          type="number"
+                          min={0}
+                          value={field.value ?? ""}
+                          onChange={(e) => {
+                            const value = e.target.value;
+                            if (isNaN(Number(value))) return;
+                            field.onChange(Number(value));
+                          }}
+                          className="w-[12rem] !text-[1.3rem]"
+                          placeholder="정렬순서를 입력해주세요"
+                        />
+                      </FormControl>
+                    </FormItem>
+                  )}
+                />
+              </TableCell>
+            </TableRow>
+            <TableRow>
+              <TableHead>이미지유형</TableHead>
+              <TableCell className="border">
+                <FormField
+                  control={form.control}
+                  name="imgTypeCd"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormControl>
+                        <CodeSelect
+                          {...field}
+                          value={field.value ?? ""}
+                          upCd="IMGTYPE"
+                          onValueChange={field.onChange}
+                        />
+                      </FormControl>
+                    </FormItem>
+                  )}
+                />
+              </TableCell>
+            </TableRow>
+            <TableRow>
+              <TableHead>첨부파일</TableHead>
+              <TableCell className="border">
+                <FormField
+                  control={form.control}
+                  name="atflYn"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormControl>
+                        <RadioGroup
+                          {...field}
+                          name="atflYn"
+                          onValueChange={field.onChange}
+                        >
+                          <div className="flex items-center space-x-2">
+                            <RadioGroupItem value="Y" id="atflY" />
+                            <Label htmlFor="atflY">이미지파일</Label>
+                          </div>
+                          <div className="flex items-center space-x-2">
+                            <RadioGroupItem value="N" id="atflN" />
+                            <Label htmlFor="atflN">외부링크</Label>
+                          </div>
+                        </RadioGroup>
+                      </FormControl>
+                    </FormItem>
+                  )}
+                />
+              </TableCell>
+            </TableRow>
+            {atflYn === "Y" && (
+              <TableRow>
+                <TableHead>이미지파일</TableHead>
+                <TableCell className="border">
+                  <FormField
+                    control={form.control}
+                    name="atflCd"
+                    render={() => (
+                      <FormItem className="flex flex-col">
+                        <FormControl>
+                          <FileUploader
+                            id="atflCd"
+                            className="!h-auto !max-w-none flex-col !items-start"
+                            accept=".jpeg,.jpg,.png"
+                            onUpload={(e) => {
+                              const files = e.target.files;
+                              if (!files) return;
+                              handleUpload(files, {
+                                handleUploadStart: setUpload,
+                                handleProgress,
+                                handleSuccess: setUpload,
+                                handleResponse: handleUploadResponse,
+                              });
+                            }}
+                            customPreview={
+                              <>
+                                <Label htmlFor="atflCd">
+                                  <div className="relative h-[27rem] w-[48rem] overflow-hidden rounded-sm border border-border bg-accent">
+                                    <p className="absolute bottom-3 left-0 p-2 text-base leading-none">
+                                      {(upload?.file as File)?.name}
+                                    </p>
+                                    <div className="relative h-full w-full">
+                                      {imageUrl && (
+                                        <Image
+                                          src={imageUrl}
+                                          alt="업로드된 이미지"
+                                          fill
+                                          objectFit="contain"
                                         />
-                                      </div>
-                                    </Label>
-                                    <div className="mb-2 text-lg font-medium text-label">
-                                      <ul className="ml-10 list-disc">
-                                        <li>권장 사이즈: 1920x500</li>
-                                        <li>파일 최대 크기: 2MB</li>
-                                        <li>확장자: jpg, jpeg, png 가능</li>
-                                      </ul>
+                                      )}
                                     </div>
-                                  </>
-                                }
-                              />
-                            </FormControl>
-                          </FormItem>
-                        )}
-                      />
-                    </TableCell>
-                  </TableRow>
-                )}
-                {atflYn === "N" && (
-                  <TableRow>
-                    <TableHead>외부링크</TableHead>
-                    <TableCell className="border">
-                      <FormField
-                        control={form.control}
-                        name="lnkgUrlAddr"
-                        render={({ field }) => (
-                          <FormItem>
-                            <FormControl>
-                              <Input
-                                {...field}
-                                value={field.value ?? ""}
-                                className="!text-[1.3rem]"
-                                placeholder="외부링크를 입력해주세요"
-                              />
-                            </FormControl>
-                          </FormItem>
-                        )}
-                      />
-                    </TableCell>
-                  </TableRow>
-                )}
-                <TableRow>
-                  <TableHead>사용여부</TableHead>
-                  <TableCell className="border">
-                    <FormField
-                      control={form.control}
-                      name="useYn"
-                      render={({ field }) => (
-                        <FormItem>
-                          <FormControl>
-                            <RadioGroup
-                              {...field}
-                              name="useYn"
-                              onValueChange={field.onChange}
-                            >
-                              <div className="flex items-center space-x-2">
-                                <RadioGroupItem value="Y" id="useY" />
-                                <Label htmlFor="useY">사용</Label>
-                              </div>
-                              <div className="flex items-center space-x-2">
-                                <RadioGroupItem value="N" id="useN" />
-                                <Label htmlFor="useN">미사용</Label>
-                              </div>
-                            </RadioGroup>
-                          </FormControl>
-                        </FormItem>
-                      )}
-                    />
-                  </TableCell>
-                </TableRow>
-              </TableBody>
-            </Table>
-          </div>
-          <div className="flex justify-center gap-4 pb-12 pt-10">
-            <Button
-              size="lg"
-              color="white"
-              type="button"
-              onClick={() => router.back()}
-            >
-              목록
-            </Button>
-            <Button size="lg" type="submit">
-              저장
-            </Button>
-            {isModifyMode && (
-              <Button size="lg" color="red" type="button" onClick={onDelete}>
-                삭제
-              </Button>
+                                    <Progress
+                                      value={progress}
+                                      className="absolute bottom-0 left-0"
+                                    />
+                                  </div>
+                                </Label>
+                                <div className="mb-2 text-lg font-medium text-label">
+                                  <ul className="ml-10 list-disc">
+                                    <li>권장 사이즈: 1920x500</li>
+                                    <li>파일 최대 크기: 2MB</li>
+                                    <li>확장자: jpg, jpeg, png 가능</li>
+                                  </ul>
+                                </div>
+                              </>
+                            }
+                          />
+                        </FormControl>
+                      </FormItem>
+                    )}
+                  />
+                </TableCell>
+              </TableRow>
             )}
-          </div>
-        </form>
-      </Form>
-    </>
+            {atflYn === "N" && (
+              <TableRow>
+                <TableHead>외부링크</TableHead>
+                <TableCell className="border">
+                  <FormField
+                    control={form.control}
+                    name="lnkgUrlAddr"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormControl>
+                          <Input
+                            {...field}
+                            value={field.value ?? ""}
+                            className="!text-[1.3rem]"
+                            placeholder="외부링크를 입력해주세요"
+                          />
+                        </FormControl>
+                      </FormItem>
+                    )}
+                  />
+                </TableCell>
+              </TableRow>
+            )}
+            <TableRow>
+              <TableHead>사용여부</TableHead>
+              <TableCell className="border">
+                <FormField
+                  control={form.control}
+                  name="useYn"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormControl>
+                        <RadioGroup
+                          {...field}
+                          name="useYn"
+                          onValueChange={field.onChange}
+                        >
+                          <div className="flex items-center space-x-2">
+                            <RadioGroupItem value="Y" id="useY" />
+                            <Label htmlFor="useY">사용</Label>
+                          </div>
+                          <div className="flex items-center space-x-2">
+                            <RadioGroupItem value="N" id="useN" />
+                            <Label htmlFor="useN">미사용</Label>
+                          </div>
+                        </RadioGroup>
+                      </FormControl>
+                    </FormItem>
+                  )}
+                />
+              </TableCell>
+            </TableRow>
+          </TableBody>
+        </Table>
+      </div>
+    </FormWrapper>
   );
 }
 
diff --git a/apps/cs/src/pages/menu/ui/menu-form.tsx b/apps/cs/src/pages/menu/ui/menu-form.tsx
index 8d2336e33..8ee61812a 100644
--- a/apps/cs/src/pages/menu/ui/menu-form.tsx
+++ b/apps/cs/src/pages/menu/ui/menu-form.tsx
@@ -1,9 +1,7 @@
-import { useState } from "react";
 import type { UseFormReturn } from "react-hook-form";
 import { useConfirm } from "@frontend-opensource/use-react-hooks";
 import { Button } from "@common/components";
 import { Form } from "@/shared/ui/form";
-import { ConfirmDialog } from "@/shared/ui/confirm-dialog";
 import type { MenuFormData } from "../model/menu-interface";
 import { BaseMenuForm } from "./base-menu-form";
 import { TypeMenuForm } from "./type-menu-form";
@@ -33,13 +31,6 @@ function MenuForm({
   const isModifyMode = !!menuCd;
 
   const { confirm } = useConfirm();
-  const [onConfirm, setOnConfirm] = useState(false);
-
-  const handleConfirm = async (callback: () => Promise<void>) => {
-    setOnConfirm(true);
-    await callback();
-    setOnConfirm(false);
-  };
 
   const onSubmit = async (data: MenuFormData) => {
     if (isModifyMode) {
@@ -50,65 +41,53 @@ function MenuForm({
   };
 
   const onCreate = async (data: MenuFormData) => {
-    await handleConfirm(async () => {
-      if (await confirm("저장하시겠습니까?")) {
-        setOnConfirm(false);
-        handleCreate(data);
-      }
-    });
+    if (await confirm("저장하시겠습니까?")) {
+      handleCreate(data);
+    }
   };
 
   const onUpdate = async (data: MenuFormData) => {
-    await handleConfirm(async () => {
-      if (await confirm("수정하시겠습니까?")) {
-        setOnConfirm(false);
-        handleUpdate({ menuCd: menuCd!, data });
-      }
-    });
+    if (await confirm("수정하시겠습니까?")) {
+      handleUpdate({ menuCd: menuCd!, data });
+    }
   };
 
-  const onDelete = () => {
-    handleConfirm(async () => {
-      if (await confirm("삭제하시겠습니까?")) {
-        setOnConfirm(false);
-        handleDelete?.(menuCd!);
-      }
-    });
+  const onDelete = async () => {
+    if (await confirm("삭제하시겠습니까?")) {
+      handleDelete?.(menuCd!);
+    }
   };
 
   const menuType = form.watch("menuLnkgTypeCd");
   const isSubmitDisabled = !form.watch("siteId");
 
   return (
-    <>
-      <Form {...form}>
-        <form onSubmit={form.handleSubmit(onSubmit)}>
-          <div className="card card-border">
-            <div className="card-header">
-              <h3 className="text-2xl font-medium text-label">
-                {isModifyMode ? "메뉴 수정" : "메뉴 등록"}
-              </h3>
-              <PermissionsManagementDialog menuCd={menuCd} />
-            </div>
-            <div className="card">
-              <BaseMenuForm form={form} menuCd={menuCd} />
-              <TypeMenuForm form={form} menuType={menuType} />
-            </div>
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)}>
+        <div className="card card-border">
+          <div className="card-header">
+            <h3 className="text-2xl font-medium text-label">
+              {isModifyMode ? "메뉴 수정" : "메뉴 등록"}
+            </h3>
+            <PermissionsManagementDialog menuCd={menuCd} />
           </div>
-          <div className="flex justify-center gap-4 pb-12 pt-10">
-            <Button size="lg" type="submit" disabled={isSubmitDisabled}>
-              저장
+          <div className="card">
+            <BaseMenuForm form={form} menuCd={menuCd} />
+            <TypeMenuForm form={form} menuType={menuType} />
+          </div>
+        </div>
+        <div className="flex justify-center gap-4 pb-12 pt-10">
+          <Button size="lg" type="submit" disabled={isSubmitDisabled}>
+            저장
+          </Button>
+          {isModifyMode && (
+            <Button size="lg" color="red" type="button" onClick={onDelete}>
+              삭제
             </Button>
-            {isModifyMode && (
-              <Button size="lg" color="red" type="button" onClick={onDelete}>
-                삭제
-              </Button>
-            )}
-          </div>
-        </form>
-      </Form>
-      <ConfirmDialog open={onConfirm} />
-    </>
+          )}
+        </div>
+      </form>
+    </Form>
   );
 }
 
diff --git a/apps/cs/src/pages/site/ui/create-page.tsx b/apps/cs/src/pages/site/ui/create-page.tsx
index e8f8c700d..730a6f412 100644
--- a/apps/cs/src/pages/site/ui/create-page.tsx
+++ b/apps/cs/src/pages/site/ui/create-page.tsx
@@ -29,9 +29,9 @@ function CreatePage() {
       faxNo: "",
       telNo: "",
       lwndCn: "",
-      bscSiteYn: "",
+      bscSiteYn: "Y",
       bkmkIcon: "",
-      useYn: "",
+      useYn: "Y",
       siteSkn: "",
     },
   });
diff --git a/apps/cs/src/pages/site/ui/domain-management-dialog.tsx b/apps/cs/src/pages/site/ui/domain-management-dialog.tsx
index fa754d36b..12b9aee6e 100644
--- a/apps/cs/src/pages/site/ui/domain-management-dialog.tsx
+++ b/apps/cs/src/pages/site/ui/domain-management-dialog.tsx
@@ -32,7 +32,6 @@ import {
   type Domain,
   type DomainFormData,
 } from "../model/domain-interface";
-import { ConfirmDialog } from "@/shared/ui/confirm-dialog";
 import { useAlertStore } from "@/shared/lib/use-alert-store";
 
 type DomainManagementDialogProps = {
@@ -79,7 +78,6 @@ function DomainManagementDialog({
     name: "domains",
   });
 
-  const [onConfirm, setOnConfirm] = useState(false);
   const [selectedRows, setSelectedRows] = useState<number[]>([]);
 
   const initialForm = () => {
@@ -88,14 +86,11 @@ function DomainManagementDialog({
   };
 
   const onSubmit = async (data: DomainFormData) => {
-    setOnConfirm(true);
     if (await confirm("저장하시겠습니까?")) {
-      setOnConfirm(false);
       await mutateAsync(data.domains);
       handleSaveDomain?.(data.domains);
       alert("저장되었습니다.");
     }
-    setOnConfirm(false);
   };
 
   const handleAddDomain = () => {
@@ -153,160 +148,157 @@ function DomainManagementDialog({
     fields.length > 0 && selectedRows.length === fields.length;
 
   return (
-    <>
-      <Dialog {...props}>
-        <DialogTrigger asChild>
-          <Button>도메인 관리</Button>
-        </DialogTrigger>
-        <DialogContent className="max-w-[60rem]" aria-describedby={undefined}>
-          <DialogHeader>
-            <DialogTitle>도메인 관리</DialogTitle>
-          </DialogHeader>
-          <Form {...form}>
-            <form
-              onSubmit={(e) => {
-                e.preventDefault();
-                e.stopPropagation();
-                form.handleSubmit(onSubmit)(e);
-              }}
-            >
-              <div className="mb-4 flex justify-end gap-2">
-                <Button type="button" size="sm" onClick={handleAddDomain}>
-                  항목 추가
+    <Dialog {...props}>
+      <DialogTrigger asChild>
+        <Button>도메인 관리</Button>
+      </DialogTrigger>
+      <DialogContent className="max-w-[60rem]" aria-describedby={undefined}>
+        <DialogHeader>
+          <DialogTitle>도메인 관리</DialogTitle>
+        </DialogHeader>
+        <Form {...form}>
+          <form
+            onSubmit={(e) => {
+              e.preventDefault();
+              e.stopPropagation();
+              form.handleSubmit(onSubmit)(e);
+            }}
+          >
+            <div className="mb-4 flex justify-end gap-2">
+              <Button type="button" size="sm" onClick={handleAddDomain}>
+                항목 추가
+              </Button>
+              <Button
+                type="button"
+                size="sm"
+                color="red"
+                onClick={handleDeleteDomain}
+                disabled={selectedRows.length === 0}
+              >
+                항목 삭제
+              </Button>
+            </div>
+            <div className="card card-border max-h-[28.5rem] overflow-auto">
+              <Table variant="secondary">
+                <colgroup>
+                  <col width="10%" />
+                  <col width="auto" />
+                  <col width="15%" />
+                  <col width="25%" />
+                </colgroup>
+                <TableHeader className="sticky -top-[0.6rem]">
+                  <TableRow>
+                    <TableHead className="!px-0">
+                      <Checkbox
+                        checked={isAllSelected}
+                        onCheckedChange={handleSelectAll}
+                      />
+                    </TableHead>
+                    <TableHead>도메인 주소</TableHead>
+                    <TableHead>대표 URL</TableHead>
+                    <TableHead>사용여부</TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {fields.map((field, i) => {
+                    if (field.mode === "D") return null;
+                    return (
+                      <TableRow key={field.id}>
+                        <TableCell align="center" className="!px-0">
+                          <Checkbox
+                            checked={selectedRows.includes(i)}
+                            onCheckedChange={() => handleSelectRow(i)}
+                          />
+                        </TableCell>
+                        <TableCell align="center">
+                          <FormField
+                            control={form.control}
+                            name={`domains.${i}.dmnAddr`}
+                            render={({ field }) => (
+                              <FormItem>
+                                <FormControl>
+                                  <Input
+                                    {...field}
+                                    className="!text-[1.3rem]"
+                                  />
+                                </FormControl>
+                              </FormItem>
+                            )}
+                          />
+                        </TableCell>
+                        <TableCell align="center">
+                          <FormField
+                            control={form.control}
+                            name={`domains.${i}.rprsDmnYn`}
+                            render={({ field }) => (
+                              <FormItem>
+                                <FormControl>
+                                  <Checkbox
+                                    checked={field.value === "Y"}
+                                    onCheckedChange={(checked) => {
+                                      field.onChange(checked ? "Y" : "N");
+                                      handleChangeRprsDmnYn(i);
+                                    }}
+                                  />
+                                </FormControl>
+                              </FormItem>
+                            )}
+                          />
+                        </TableCell>
+                        <TableCell align="center">
+                          <FormField
+                            control={form.control}
+                            name={`domains.${i}.useYn`}
+                            render={({ field }) => (
+                              <FormItem>
+                                <FormControl>
+                                  <RadioGroup
+                                    value={field.value}
+                                    onValueChange={field.onChange}
+                                    className="flex justify-center"
+                                  >
+                                    <div className="flex items-center space-x-2">
+                                      <RadioGroupItem
+                                        value="Y"
+                                        id={`useY-${i}`}
+                                      />
+                                      <Label htmlFor={`useY-${i}`}>예</Label>
+                                    </div>
+                                    <div className="flex items-center space-x-2">
+                                      <RadioGroupItem
+                                        value="N"
+                                        id={`useN-${i}`}
+                                      />
+                                      <Label htmlFor={`useN-${i}`}>
+                                        아니오
+                                      </Label>
+                                    </div>
+                                  </RadioGroup>
+                                </FormControl>
+                              </FormItem>
+                            )}
+                          />
+                        </TableCell>
+                      </TableRow>
+                    );
+                  })}
+                </TableBody>
+              </Table>
+            </div>
+            <DialogFooter className="!justify-center">
+              <Button type="submit" size="lg">
+                저장
+              </Button>
+              <DialogClose asChild>
+                <Button type="button" size="lg" color="white">
+                  취소
                 </Button>
-                <Button
-                  type="button"
-                  size="sm"
-                  color="red"
-                  onClick={handleDeleteDomain}
-                  disabled={selectedRows.length === 0}
-                >
-                  항목 삭제
-                </Button>
-              </div>
-              <div className="card card-border max-h-[28.5rem] overflow-auto">
-                <Table variant="secondary">
-                  <colgroup>
-                    <col width="10%" />
-                    <col width="auto" />
-                    <col width="15%" />
-                    <col width="25%" />
-                  </colgroup>
-                  <TableHeader className="sticky -top-[0.6rem]">
-                    <TableRow>
-                      <TableHead className="!px-0">
-                        <Checkbox
-                          checked={isAllSelected}
-                          onCheckedChange={handleSelectAll}
-                        />
-                      </TableHead>
-                      <TableHead>도메인 주소</TableHead>
-                      <TableHead>대표 URL</TableHead>
-                      <TableHead>사용여부</TableHead>
-                    </TableRow>
-                  </TableHeader>
-                  <TableBody>
-                    {fields.map((field, i) => {
-                      if (field.mode === "D") return null;
-                      return (
-                        <TableRow key={field.id}>
-                          <TableCell align="center" className="!px-0">
-                            <Checkbox
-                              checked={selectedRows.includes(i)}
-                              onCheckedChange={() => handleSelectRow(i)}
-                            />
-                          </TableCell>
-                          <TableCell align="center">
-                            <FormField
-                              control={form.control}
-                              name={`domains.${i}.dmnAddr`}
-                              render={({ field }) => (
-                                <FormItem>
-                                  <FormControl>
-                                    <Input
-                                      {...field}
-                                      className="!text-[1.3rem]"
-                                    />
-                                  </FormControl>
-                                </FormItem>
-                              )}
-                            />
-                          </TableCell>
-                          <TableCell align="center">
-                            <FormField
-                              control={form.control}
-                              name={`domains.${i}.rprsDmnYn`}
-                              render={({ field }) => (
-                                <FormItem>
-                                  <FormControl>
-                                    <Checkbox
-                                      checked={field.value === "Y"}
-                                      onCheckedChange={(checked) => {
-                                        field.onChange(checked ? "Y" : "N");
-                                        handleChangeRprsDmnYn(i);
-                                      }}
-                                    />
-                                  </FormControl>
-                                </FormItem>
-                              )}
-                            />
-                          </TableCell>
-                          <TableCell align="center">
-                            <FormField
-                              control={form.control}
-                              name={`domains.${i}.useYn`}
-                              render={({ field }) => (
-                                <FormItem>
-                                  <FormControl>
-                                    <RadioGroup
-                                      value={field.value}
-                                      onValueChange={field.onChange}
-                                      className="flex justify-center"
-                                    >
-                                      <div className="flex items-center space-x-2">
-                                        <RadioGroupItem
-                                          value="Y"
-                                          id={`useY-${i}`}
-                                        />
-                                        <Label htmlFor={`useY-${i}`}>예</Label>
-                                      </div>
-                                      <div className="flex items-center space-x-2">
-                                        <RadioGroupItem
-                                          value="N"
-                                          id={`useN-${i}`}
-                                        />
-                                        <Label htmlFor={`useN-${i}`}>
-                                          아니오
-                                        </Label>
-                                      </div>
-                                    </RadioGroup>
-                                  </FormControl>
-                                </FormItem>
-                              )}
-                            />
-                          </TableCell>
-                        </TableRow>
-                      );
-                    })}
-                  </TableBody>
-                </Table>
-              </div>
-              <DialogFooter className="!justify-center">
-                <Button type="submit" size="lg">
-                  저장
-                </Button>
-                <DialogClose asChild>
-                  <Button type="button" size="lg" color="white">
-                    취소
-                  </Button>
-                </DialogClose>
-              </DialogFooter>
-            </form>
-          </Form>
-        </DialogContent>
-      </Dialog>
-      <ConfirmDialog open={onConfirm} />
-    </>
+              </DialogClose>
+            </DialogFooter>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
   );
 }
 
diff --git a/apps/cs/src/pages/site/ui/ip-management-dialog.tsx b/apps/cs/src/pages/site/ui/ip-management-dialog.tsx
index 5895d0be3..e17577d16 100644
--- a/apps/cs/src/pages/site/ui/ip-management-dialog.tsx
+++ b/apps/cs/src/pages/site/ui/ip-management-dialog.tsx
@@ -28,7 +28,6 @@ import { Form, FormControl, FormField, FormItem } from "@/shared/ui/form";
 import { ENDPOINT } from "@/shared/config";
 import { IpApi } from "../api/ip-service";
 import { ipFormSchema, type IP, type IPFormData } from "../model/ip-interface";
-import { ConfirmDialog } from "@/shared/ui/confirm-dialog";
 import { useAlertStore } from "@/shared/lib/use-alert-store";
 
 type IPManagementDialogProps = {
@@ -75,7 +74,6 @@ function IPManagementDialog({
     name: "ips",
   });
 
-  const [onConfirm, setOnConfirm] = useState(false);
   const [selectedRows, setSelectedRows] = useState<number[]>([]);
 
   const initialForm = () => {
@@ -84,13 +82,10 @@ function IPManagementDialog({
   };
 
   const onSubmit = async (data: IPFormData) => {
-    setOnConfirm(true);
     if (await confirm("저장하시겠습니까?")) {
-      setOnConfirm(false);
       await mutateAsync(data.ips);
       alert("저장되었습니다.");
     }
-    setOnConfirm(false);
   };
 
   const handleAddIP = () => {
@@ -140,139 +135,136 @@ function IPManagementDialog({
     fields.length > 0 && selectedRows.length === fields.length;
 
   return (
-    <>
-      <Dialog {...props}>
-        <DialogTrigger asChild>
-          <Button disabled={triggerDisabled}>IP 관리</Button>
-        </DialogTrigger>
-        <DialogContent className="max-w-[60rem]" aria-describedby={undefined}>
-          <DialogHeader>
-            <DialogTitle>IP 관리</DialogTitle>
-          </DialogHeader>
-          <Form {...form}>
-            <form
-              onSubmit={(e) => {
-                e.preventDefault();
-                e.stopPropagation();
-                form.handleSubmit(onSubmit)(e);
-              }}
-            >
-              <div className="mb-4 flex justify-end gap-2">
-                <Button type="button" size="sm" onClick={handleAddIP}>
-                  항목 추가
+    <Dialog {...props}>
+      <DialogTrigger asChild>
+        <Button disabled={triggerDisabled}>IP 관리</Button>
+      </DialogTrigger>
+      <DialogContent className="max-w-[60rem]" aria-describedby={undefined}>
+        <DialogHeader>
+          <DialogTitle>IP 관리</DialogTitle>
+        </DialogHeader>
+        <Form {...form}>
+          <form
+            onSubmit={(e) => {
+              e.preventDefault();
+              e.stopPropagation();
+              form.handleSubmit(onSubmit)(e);
+            }}
+          >
+            <div className="mb-4 flex justify-end gap-2">
+              <Button type="button" size="sm" onClick={handleAddIP}>
+                항목 추가
+              </Button>
+              <Button
+                type="button"
+                size="sm"
+                color="red"
+                onClick={handleDeleteIP}
+                disabled={selectedRows.length === 0}
+              >
+                항목 삭제
+              </Button>
+            </div>
+            <div className="card card-border max-h-[28.5rem] overflow-auto">
+              <Table variant="secondary">
+                <colgroup>
+                  <col width="10%" />
+                  <col width="65%" />
+                  <col width="25%" />
+                </colgroup>
+                <TableHeader className="sticky -top-[0.6rem]">
+                  <TableRow>
+                    <TableHead className="!px-0">
+                      <Checkbox
+                        checked={isAllSelected}
+                        onCheckedChange={handleSelectAll}
+                      />
+                    </TableHead>
+                    <TableHead>IP 주소</TableHead>
+                    <TableHead>허용여부</TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {fields.map((field, i) => {
+                    if (field.mode === "D") return null;
+                    return (
+                      <TableRow key={field.id}>
+                        <TableCell align="center" className="!px-0">
+                          <Checkbox
+                            checked={selectedRows.includes(i)}
+                            onCheckedChange={() => handleSelectRow(i)}
+                          />
+                        </TableCell>
+                        <TableCell align="center">
+                          <FormField
+                            control={form.control}
+                            name={`ips.${i}.ipAddr`}
+                            render={({ field }) => (
+                              <FormItem>
+                                <FormControl>
+                                  <Input
+                                    {...field}
+                                    className="!text-[1.3rem]"
+                                  />
+                                </FormControl>
+                              </FormItem>
+                            )}
+                          />
+                        </TableCell>
+                        <TableCell align="center">
+                          <FormField
+                            control={form.control}
+                            name={`ips.${i}.prmYn`}
+                            render={({ field }) => (
+                              <FormItem>
+                                <FormControl>
+                                  <RadioGroup
+                                    value={field.value}
+                                    onValueChange={field.onChange}
+                                    className="flex justify-center"
+                                  >
+                                    <div className="flex items-center space-x-2">
+                                      <RadioGroupItem
+                                        value="Y"
+                                        id={`prmY-${i}`}
+                                      />
+                                      <Label htmlFor={`prmY-${i}`}>예</Label>
+                                    </div>
+                                    <div className="flex items-center space-x-2">
+                                      <RadioGroupItem
+                                        value="N"
+                                        id={`prmN-${i}`}
+                                      />
+                                      <Label htmlFor={`prmN-${i}`}>
+                                        아니오
+                                      </Label>
+                                    </div>
+                                  </RadioGroup>
+                                </FormControl>
+                              </FormItem>
+                            )}
+                          />
+                        </TableCell>
+                      </TableRow>
+                    );
+                  })}
+                </TableBody>
+              </Table>
+            </div>
+            <DialogFooter className="!justify-center">
+              <Button type="submit" size="lg">
+                저장
+              </Button>
+              <DialogClose asChild>
+                <Button type="button" size="lg" color="white">
+                  취소
                 </Button>
-                <Button
-                  type="button"
-                  size="sm"
-                  color="red"
-                  onClick={handleDeleteIP}
-                  disabled={selectedRows.length === 0}
-                >
-                  항목 삭제
-                </Button>
-              </div>
-              <div className="card card-border max-h-[28.5rem] overflow-auto">
-                <Table variant="secondary">
-                  <colgroup>
-                    <col width="10%" />
-                    <col width="65%" />
-                    <col width="25%" />
-                  </colgroup>
-                  <TableHeader className="sticky -top-[0.6rem]">
-                    <TableRow>
-                      <TableHead className="!px-0">
-                        <Checkbox
-                          checked={isAllSelected}
-                          onCheckedChange={handleSelectAll}
-                        />
-                      </TableHead>
-                      <TableHead>IP 주소</TableHead>
-                      <TableHead>허용여부</TableHead>
-                    </TableRow>
-                  </TableHeader>
-                  <TableBody>
-                    {fields.map((field, i) => {
-                      if (field.mode === "D") return null;
-                      return (
-                        <TableRow key={field.id}>
-                          <TableCell align="center" className="!px-0">
-                            <Checkbox
-                              checked={selectedRows.includes(i)}
-                              onCheckedChange={() => handleSelectRow(i)}
-                            />
-                          </TableCell>
-                          <TableCell align="center">
-                            <FormField
-                              control={form.control}
-                              name={`ips.${i}.ipAddr`}
-                              render={({ field }) => (
-                                <FormItem>
-                                  <FormControl>
-                                    <Input
-                                      {...field}
-                                      className="!text-[1.3rem]"
-                                    />
-                                  </FormControl>
-                                </FormItem>
-                              )}
-                            />
-                          </TableCell>
-                          <TableCell align="center">
-                            <FormField
-                              control={form.control}
-                              name={`ips.${i}.prmYn`}
-                              render={({ field }) => (
-                                <FormItem>
-                                  <FormControl>
-                                    <RadioGroup
-                                      value={field.value}
-                                      onValueChange={field.onChange}
-                                      className="flex justify-center"
-                                    >
-                                      <div className="flex items-center space-x-2">
-                                        <RadioGroupItem
-                                          value="Y"
-                                          id={`prmY-${i}`}
-                                        />
-                                        <Label htmlFor={`prmY-${i}`}>예</Label>
-                                      </div>
-                                      <div className="flex items-center space-x-2">
-                                        <RadioGroupItem
-                                          value="N"
-                                          id={`prmN-${i}`}
-                                        />
-                                        <Label htmlFor={`prmN-${i}`}>
-                                          아니오
-                                        </Label>
-                                      </div>
-                                    </RadioGroup>
-                                  </FormControl>
-                                </FormItem>
-                              )}
-                            />
-                          </TableCell>
-                        </TableRow>
-                      );
-                    })}
-                  </TableBody>
-                </Table>
-              </div>
-              <DialogFooter className="!justify-center">
-                <Button type="submit" size="lg">
-                  저장
-                </Button>
-                <DialogClose asChild>
-                  <Button type="button" size="lg" color="white">
-                    취소
-                  </Button>
-                </DialogClose>
-              </DialogFooter>
-            </form>
-          </Form>
-        </DialogContent>
-      </Dialog>
-      <ConfirmDialog open={onConfirm} />
-    </>
+              </DialogClose>
+            </DialogFooter>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
   );
 }
 
diff --git a/apps/cs/src/pages/site/ui/site-form.tsx b/apps/cs/src/pages/site/ui/site-form.tsx
index ea4265f4b..0f9a30b55 100644
--- a/apps/cs/src/pages/site/ui/site-form.tsx
+++ b/apps/cs/src/pages/site/ui/site-form.tsx
@@ -1,9 +1,6 @@
 import { useState } from "react";
-import { useRouter } from "next/navigation";
-import { useConfirm } from "@frontend-opensource/use-react-hooks";
 import { type UseFormReturn } from "react-hook-form";
 import {
-  Button,
   Input,
   Label,
   RadioGroup,
@@ -14,10 +11,10 @@ import {
   TableHead,
   TableRow,
 } from "@common/components";
+import { FormWrapper } from "@/widgets/form-wrapper";
 import { CodeSelect } from "@/entities/code";
 import type { SiteFormData } from "@/entities/site";
-import { FormItem, FormControl, FormField, Form } from "@/shared/ui/form";
-import { ConfirmDialog } from "@/shared/ui/confirm-dialog";
+import { FormItem, FormControl, FormField } from "@/shared/ui/form";
 import type { Domain } from "../model/domain-interface";
 import { IPManagementDialog } from "./ip-management-dialog";
 import { DomainManagementDialog } from "./domain-management-dialog";
@@ -29,21 +26,12 @@ type SiteFormProps = {
   handleDelete?: () => Promise<void>;
 };
 
-function SiteForm({ form, siteId, handleSave, handleDelete }: SiteFormProps) {
+function SiteForm({ form, siteId, ...props }: SiteFormProps) {
   const isModifyMode = !!siteId;
 
-  const router = useRouter();
-  const { confirm } = useConfirm();
-  const [onConfirm, setOnConfirm] = useState(false);
   const [isIpManagementOpen, setIsIpManagementOpen] = useState(false);
   const [isDomainManagementOpen, setIsDomainManagementOpen] = useState(false);
 
-  const handleConfirm = async (callback: () => Promise<void>) => {
-    setOnConfirm(true);
-    await callback();
-    setOnConfirm(false);
-  };
-
   const handleSaveDomain = (rows: Domain[]) => {
     form.setValue(
       "dmnAddr",
@@ -51,359 +39,314 @@ function SiteForm({ form, siteId, handleSave, handleDelete }: SiteFormProps) {
     );
   };
 
-  const onSubmit = async (data: SiteFormData) => {
-    const confirmMessage = isModifyMode
-      ? "수정하시겠습니까?"
-      : "저장하시겠습니까?";
-
-    await handleConfirm(async () => {
-      if (await confirm(confirmMessage)) {
-        setOnConfirm(false);
-        handleSave(data);
-      }
-    });
-  };
-
-  const onDelete = async () => {
-    await handleConfirm(async () => {
-      if (await confirm("삭제하시겠습니까?")) {
-        setOnConfirm(false);
-        handleDelete?.();
-      }
-    });
-  };
-
   return (
-    <>
-      <Form {...form}>
-        <form onSubmit={form.handleSubmit(onSubmit)}>
-          <div className="card">
-            <Table variant="secondary">
-              <colgroup>
-                <col width="20%" />
-                <col width="80%" />
-              </colgroup>
-              <TableBody>
-                <TableRow>
-                  <TableHead>사이트 코드</TableHead>
-                  <TableCell className="border">
-                    <FormField
-                      control={form.control}
-                      name="siteId"
-                      render={({ field }) => (
-                        <FormItem>
-                          <FormControl>
-                            <Input
-                              {...field}
-                              value={field.value ?? ""}
-                              className="w-[12rem] !text-[1.3rem]"
-                              disabled={isModifyMode}
-                            />
-                          </FormControl>
-                        </FormItem>
-                      )}
-                    />
-                  </TableCell>
-                </TableRow>
-                <TableRow>
-                  <TableHead>사이트 구분</TableHead>
-                  <TableCell className="border">
-                    <div className="flex gap-2">
-                      <FormField
-                        control={form.control}
-                        name="siteKndCd"
-                        render={({ field }) => (
-                          <FormItem>
-                            <FormControl>
-                              <CodeSelect
-                                {...field}
-                                upCd="SITEKNDCD"
-                                onValueChange={field.onChange}
-                              />
-                            </FormControl>
-                          </FormItem>
-                        )}
-                      />
-                      {isModifyMode && (
-                        <IPManagementDialog
-                          siteId={siteId}
-                          triggerDisabled={form.watch("siteKndCd") === "O"}
-                          open={isIpManagementOpen}
-                          onOpenChange={setIsIpManagementOpen}
+    <FormWrapper form={form} isModifyMode={isModifyMode} {...props}>
+      <div className="card">
+        <Table variant="secondary">
+          <colgroup>
+            <col width="20%" />
+            <col width="80%" />
+          </colgroup>
+          <TableBody>
+            <TableRow>
+              <TableHead>사이트 코드</TableHead>
+              <TableCell className="border">
+                <FormField
+                  control={form.control}
+                  name="siteId"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormControl>
+                        <Input
+                          {...field}
+                          value={field.value ?? ""}
+                          className="w-[12rem] !text-[1.3rem]"
+                          disabled={isModifyMode}
                         />
-                      )}
-                    </div>
-                  </TableCell>
-                </TableRow>
-                <TableRow>
-                  <TableHead>사이트 디자인</TableHead>
-                  <TableCell className="border">
-                    <FormField
-                      control={form.control}
-                      name="siteSkn"
-                      render={({ field }) => (
-                        <FormItem>
-                          <FormControl>
-                            <CodeSelect
-                              {...field}
-                              value={field.value ?? ""}
-                              upCd="SITESKINCD"
-                              onValueChange={field.onChange}
-                            />
-                          </FormControl>
-                        </FormItem>
-                      )}
+                      </FormControl>
+                    </FormItem>
+                  )}
+                />
+              </TableCell>
+            </TableRow>
+            <TableRow>
+              <TableHead>사이트 구분</TableHead>
+              <TableCell className="border">
+                <div className="flex gap-2">
+                  <FormField
+                    control={form.control}
+                    name="siteKndCd"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormControl>
+                          <CodeSelect
+                            {...field}
+                            upCd="SITEKNDCD"
+                            onValueChange={field.onChange}
+                          />
+                        </FormControl>
+                      </FormItem>
+                    )}
+                  />
+                  {isModifyMode && (
+                    <IPManagementDialog
+                      siteId={siteId}
+                      triggerDisabled={form.watch("siteKndCd") === "O"}
+                      open={isIpManagementOpen}
+                      onOpenChange={setIsIpManagementOpen}
                     />
-                  </TableCell>
-                </TableRow>
-                <TableRow>
-                  <TableHead>사이트명</TableHead>
-                  <TableCell className="border">
-                    <FormField
-                      control={form.control}
-                      name="siteNm"
-                      render={({ field }) => (
-                        <FormItem>
-                          <FormControl>
-                            <Input
-                              {...field}
-                              value={field.value ?? ""}
-                              className="!text-[1.3rem]"
-                              placeholder="사이트명을 입력하십시오."
-                            />
-                          </FormControl>
-                        </FormItem>
-                      )}
-                    />
-                  </TableCell>
-                </TableRow>
-                <TableRow>
-                  <TableHead>사이트 설명</TableHead>
-                  <TableCell className="border">
-                    <FormField
-                      control={form.control}
-                      name="siteExpln"
-                      render={({ field }) => (
-                        <FormItem>
-                          <FormControl>
-                            <Input
-                              {...field}
-                              value={field.value ?? ""}
-                              className="!text-[1.3rem]"
-                              placeholder="사이트 설명을 입력하십시오."
-                            />
-                          </FormControl>
-                        </FormItem>
-                      )}
-                    />
-                  </TableCell>
-                </TableRow>
-                {isModifyMode && (
-                  <TableRow>
-                    <TableHead>사이트 도메인</TableHead>
-                    <TableCell className="border">
-                      <div className="flex gap-2">
-                        <div className="h-[3.2rem] w-[21.5rem] cursor-not-allowed rounded-md border border-input bg-form px-3 py-2 text-[1.3rem] opacity-50">
-                          {form.watch("dmnAddr")}
-                        </div>
-                        <DomainManagementDialog
-                          siteId={siteId}
-                          open={isDomainManagementOpen}
-                          onOpenChange={setIsDomainManagementOpen}
-                          handleSaveDomain={handleSaveDomain}
+                  )}
+                </div>
+              </TableCell>
+            </TableRow>
+            <TableRow>
+              <TableHead>사이트 디자인</TableHead>
+              <TableCell className="border">
+                <FormField
+                  control={form.control}
+                  name="siteSkn"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormControl>
+                        <CodeSelect
+                          {...field}
+                          value={field.value ?? ""}
+                          upCd="SITESKINCD"
+                          onValueChange={field.onChange}
                         />
-                      </div>
-                    </TableCell>
-                  </TableRow>
-                )}
-                <TableRow>
-                  <TableHead>사이트 하단 표기 주소</TableHead>
-                  <TableCell className="border">
-                    <FormField
-                      control={form.control}
-                      name="siteAddr"
-                      render={({ field }) => (
-                        <FormItem>
-                          <FormControl>
-                            <Input
-                              {...field}
-                              value={field.value ?? ""}
-                              className="!text-[1.3rem]"
-                              placeholder="사이트 하단 주소를 입력하십시오."
-                            />
-                          </FormControl>
-                        </FormItem>
-                      )}
-                    />
-                  </TableCell>
-                </TableRow>
-                <TableRow>
-                  <TableHead>사이트 하단 표기 전화번호</TableHead>
-                  <TableCell className="border">
-                    <FormField
-                      control={form.control}
-                      name="telNo"
-                      render={({ field }) => (
-                        <FormItem>
-                          <FormControl>
-                            <Input
-                              {...field}
-                              value={field.value ?? ""}
-                              className="!text-[1.3rem]"
-                              placeholder="사이트 하단 전화번호를 입력하십시오."
-                            />
-                          </FormControl>
-                        </FormItem>
-                      )}
-                    />
-                  </TableCell>
-                </TableRow>
-                <TableRow>
-                  <TableHead>사이트 하단 표기 팩스번호</TableHead>
-                  <TableCell className="border">
-                    <FormField
-                      control={form.control}
-                      name="faxNo"
-                      render={({ field }) => (
-                        <FormItem>
-                          <FormControl>
-                            <Input
-                              {...field}
-                              value={field.value ?? ""}
-                              className="!text-[1.3rem]"
-                              placeholder="사이트 하단 팩스번호를 입력하십시오."
-                            />
-                          </FormControl>
-                        </FormItem>
-                      )}
-                    />
-                  </TableCell>
-                </TableRow>
-                <TableRow>
-                  <TableHead>사이트 하단 표기 내용</TableHead>
-                  <TableCell className="border">
-                    <FormField
-                      control={form.control}
-                      name="lwndCn"
-                      render={({ field }) => (
-                        <FormItem>
-                          <FormControl>
-                            <Input
-                              {...field}
-                              value={field.value ?? ""}
-                              className="!text-[1.3rem]"
-                              placeholder="사이트 표기 내용을 입력하십시오. (ex. COPYRIGHT c 2013 KECO. ALL RIGHTS RESERVED.)"
-                            />
-                          </FormControl>
-                        </FormItem>
-                      )}
-                    />
-                  </TableCell>
-                </TableRow>
-                <TableRow>
-                  <TableHead>북마크 아이콘</TableHead>
-                  <TableCell className="border">
-                    <FormField
-                      control={form.control}
-                      name="bkmkIcon"
-                      render={({ field }) => (
-                        <FormItem>
-                          <FormControl>
-                            <Input
-                              {...field}
-                              value={field.value ?? ""}
-                              className="!text-[1.3rem]"
-                              placeholder="아이콘 파일 경로 및 파일명을 입력하여 주십시오."
-                            />
-                          </FormControl>
-                        </FormItem>
-                      )}
-                    />
-                  </TableCell>
-                </TableRow>
-                <TableRow>
-                  <TableHead>기본 사이트 여부</TableHead>
-                  <TableCell className="border">
-                    <FormField
-                      control={form.control}
-                      name="bscSiteYn"
-                      render={({ field }) => (
-                        <FormItem>
-                          <FormControl>
-                            <RadioGroup
-                              {...field}
-                              name="bscSiteYn"
-                              onValueChange={field.onChange}
-                            >
-                              <div className="flex items-center space-x-2">
-                                <RadioGroupItem value="Y" id="bscSiteY" />
-                                <Label htmlFor="bscSiteY">예</Label>
-                              </div>
-                              <div className="flex items-center space-x-2">
-                                <RadioGroupItem value="N" id="bscSiteN" />
-                                <Label htmlFor="bscSiteN">아니오</Label>
-                              </div>
-                            </RadioGroup>
-                          </FormControl>
-                        </FormItem>
-                      )}
-                    />
-                  </TableCell>
-                </TableRow>
-                <TableRow>
-                  <TableHead>사용 여부</TableHead>
-                  <TableCell className="border">
-                    <FormField
-                      control={form.control}
-                      name="useYn"
-                      render={({ field }) => (
-                        <FormItem>
-                          <FormControl>
-                            <RadioGroup
-                              {...field}
-                              name="useYn"
-                              onValueChange={field.onChange}
-                            >
-                              <div className="flex items-center space-x-2">
-                                <RadioGroupItem value="Y" id="useY" />
-                                <Label htmlFor="useY">사용</Label>
-                              </div>
-                              <div className="flex items-center space-x-2">
-                                <RadioGroupItem value="N" id="useN" />
-                                <Label htmlFor="useN">사용안함</Label>
-                              </div>
-                            </RadioGroup>
-                          </FormControl>
-                        </FormItem>
-                      )}
-                    />
-                  </TableCell>
-                </TableRow>
-              </TableBody>
-            </Table>
-          </div>
-          <div className="flex justify-center gap-4 pb-12 pt-10">
-            <Button
-              size="lg"
-              color="white"
-              type="button"
-              onClick={() => router.back()}
-            >
-              목록
-            </Button>
-            <Button size="lg" type="submit">
-              저장
-            </Button>
+                      </FormControl>
+                    </FormItem>
+                  )}
+                />
+              </TableCell>
+            </TableRow>
+            <TableRow>
+              <TableHead>사이트명</TableHead>
+              <TableCell className="border">
+                <FormField
+                  control={form.control}
+                  name="siteNm"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormControl>
+                        <Input
+                          {...field}
+                          value={field.value ?? ""}
+                          className="!text-[1.3rem]"
+                          placeholder="사이트명을 입력하십시오."
+                        />
+                      </FormControl>
+                    </FormItem>
+                  )}
+                />
+              </TableCell>
+            </TableRow>
+            <TableRow>
+              <TableHead>사이트 설명</TableHead>
+              <TableCell className="border">
+                <FormField
+                  control={form.control}
+                  name="siteExpln"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormControl>
+                        <Input
+                          {...field}
+                          value={field.value ?? ""}
+                          className="!text-[1.3rem]"
+                          placeholder="사이트 설명을 입력하십시오."
+                        />
+                      </FormControl>
+                    </FormItem>
+                  )}
+                />
+              </TableCell>
+            </TableRow>
             {isModifyMode && (
-              <Button size="lg" color="red" type="button" onClick={onDelete}>
-                삭제
-              </Button>
+              <TableRow>
+                <TableHead>사이트 도메인</TableHead>
+                <TableCell className="border">
+                  <div className="flex gap-2">
+                    <div className="h-[3.2rem] w-[21.5rem] cursor-not-allowed rounded-md border border-input bg-form px-3 py-2 text-[1.3rem] opacity-50">
+                      {form.watch("dmnAddr")}
+                    </div>
+                    <DomainManagementDialog
+                      siteId={siteId}
+                      open={isDomainManagementOpen}
+                      onOpenChange={setIsDomainManagementOpen}
+                      handleSaveDomain={handleSaveDomain}
+                    />
+                  </div>
+                </TableCell>
+              </TableRow>
             )}
-          </div>
-        </form>
-      </Form>
-      <ConfirmDialog open={onConfirm} />
-    </>
+            <TableRow>
+              <TableHead>사이트 하단 표기 주소</TableHead>
+              <TableCell className="border">
+                <FormField
+                  control={form.control}
+                  name="siteAddr"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormControl>
+                        <Input
+                          {...field}
+                          value={field.value ?? ""}
+                          className="!text-[1.3rem]"
+                          placeholder="사이트 하단 주소를 입력하십시오."
+                        />
+                      </FormControl>
+                    </FormItem>
+                  )}
+                />
+              </TableCell>
+            </TableRow>
+            <TableRow>
+              <TableHead>사이트 하단 표기 전화번호</TableHead>
+              <TableCell className="border">
+                <FormField
+                  control={form.control}
+                  name="telNo"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormControl>
+                        <Input
+                          {...field}
+                          value={field.value ?? ""}
+                          className="!text-[1.3rem]"
+                          placeholder="사이트 하단 전화번호를 입력하십시오."
+                        />
+                      </FormControl>
+                    </FormItem>
+                  )}
+                />
+              </TableCell>
+            </TableRow>
+            <TableRow>
+              <TableHead>사이트 하단 표기 팩스번호</TableHead>
+              <TableCell className="border">
+                <FormField
+                  control={form.control}
+                  name="faxNo"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormControl>
+                        <Input
+                          {...field}
+                          value={field.value ?? ""}
+                          className="!text-[1.3rem]"
+                          placeholder="사이트 하단 팩스번호를 입력하십시오."
+                        />
+                      </FormControl>
+                    </FormItem>
+                  )}
+                />
+              </TableCell>
+            </TableRow>
+            <TableRow>
+              <TableHead>사이트 하단 표기 내용</TableHead>
+              <TableCell className="border">
+                <FormField
+                  control={form.control}
+                  name="lwndCn"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormControl>
+                        <Input
+                          {...field}
+                          value={field.value ?? ""}
+                          className="!text-[1.3rem]"
+                          placeholder="사이트 표기 내용을 입력하십시오. (ex. COPYRIGHT c 2013 KECO. ALL RIGHTS RESERVED.)"
+                        />
+                      </FormControl>
+                    </FormItem>
+                  )}
+                />
+              </TableCell>
+            </TableRow>
+            <TableRow>
+              <TableHead>북마크 아이콘</TableHead>
+              <TableCell className="border">
+                <FormField
+                  control={form.control}
+                  name="bkmkIcon"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormControl>
+                        <Input
+                          {...field}
+                          value={field.value ?? ""}
+                          className="!text-[1.3rem]"
+                          placeholder="아이콘 파일 경로 및 파일명을 입력하여 주십시오."
+                        />
+                      </FormControl>
+                    </FormItem>
+                  )}
+                />
+              </TableCell>
+            </TableRow>
+            <TableRow>
+              <TableHead>기본 사이트 여부</TableHead>
+              <TableCell className="border">
+                <FormField
+                  control={form.control}
+                  name="bscSiteYn"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormControl>
+                        <RadioGroup
+                          {...field}
+                          name="bscSiteYn"
+                          onValueChange={field.onChange}
+                        >
+                          <div className="flex items-center space-x-2">
+                            <RadioGroupItem value="Y" id="bscSiteY" />
+                            <Label htmlFor="bscSiteY">예</Label>
+                          </div>
+                          <div className="flex items-center space-x-2">
+                            <RadioGroupItem value="N" id="bscSiteN" />
+                            <Label htmlFor="bscSiteN">아니오</Label>
+                          </div>
+                        </RadioGroup>
+                      </FormControl>
+                    </FormItem>
+                  )}
+                />
+              </TableCell>
+            </TableRow>
+            <TableRow>
+              <TableHead>사용 여부</TableHead>
+              <TableCell className="border">
+                <FormField
+                  control={form.control}
+                  name="useYn"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormControl>
+                        <RadioGroup
+                          {...field}
+                          name="useYn"
+                          onValueChange={field.onChange}
+                        >
+                          <div className="flex items-center space-x-2">
+                            <RadioGroupItem value="Y" id="useY" />
+                            <Label htmlFor="useY">사용</Label>
+                          </div>
+                          <div className="flex items-center space-x-2">
+                            <RadioGroupItem value="N" id="useN" />
+                            <Label htmlFor="useN">사용안함</Label>
+                          </div>
+                        </RadioGroup>
+                      </FormControl>
+                    </FormItem>
+                  )}
+                />
+              </TableCell>
+            </TableRow>
+          </TableBody>
+        </Table>
+      </div>
+    </FormWrapper>
   );
 }
 
diff --git a/apps/cs/src/widgets/form-wrapper/index.ts b/apps/cs/src/widgets/form-wrapper/index.ts
new file mode 100644
index 000000000..aa5addaf9
--- /dev/null
+++ b/apps/cs/src/widgets/form-wrapper/index.ts
@@ -0,0 +1 @@
+export { FormWrapper } from "./ui/form-wrapper";
diff --git a/apps/cs/src/widgets/form-wrapper/ui/form-wrapper.tsx b/apps/cs/src/widgets/form-wrapper/ui/form-wrapper.tsx
new file mode 100644
index 000000000..19f941106
--- /dev/null
+++ b/apps/cs/src/widgets/form-wrapper/ui/form-wrapper.tsx
@@ -0,0 +1,68 @@
+import { useRouter } from "next/navigation";
+import { useConfirm } from "@frontend-opensource/use-react-hooks";
+import { type FieldValues, type UseFormReturn } from "react-hook-form";
+import { Button } from "@common/components/ui";
+import { Form } from "@/shared/ui/form";
+
+type FormWrapperProps<T extends FieldValues> = {
+  form: UseFormReturn<T>;
+  children: React.ReactNode;
+  isModifyMode?: boolean;
+  handleSave: (data: T) => Promise<void>;
+  handleDelete?: () => Promise<void>;
+};
+
+function FormWrapper<T extends FieldValues>({
+  form,
+  children,
+  isModifyMode,
+  handleSave,
+  handleDelete,
+}: FormWrapperProps<T>) {
+  const router = useRouter();
+  const { confirm } = useConfirm();
+
+  const onSubmit = async (data: T) => {
+    const confirmMessage = isModifyMode
+      ? "수정하시겠습니까?"
+      : "저장하시겠습니까?";
+
+    if (await confirm(confirmMessage)) {
+      await handleSave(data);
+    }
+  };
+
+  const onDelete = async () => {
+    if (await confirm("삭제하시겠습니까?")) {
+      await handleDelete?.();
+    }
+  };
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)}>
+        {children}
+        <div className="flex justify-center gap-4 pb-12 pt-10">
+          <Button
+            size="lg"
+            color="white"
+            type="button"
+            onClick={() => router.back()}
+          >
+            목록
+          </Button>
+          <Button size="lg" type="submit">
+            저장
+          </Button>
+          {isModifyMode && (
+            <Button size="lg" color="red" type="button" onClick={onDelete}>
+              삭제
+            </Button>
+          )}
+        </div>
+      </form>
+    </Form>
+  );
+}
+
+export { FormWrapper };

From a5652f9f04062270d94b01b2cd5f7546898c7c7d Mon Sep 17 00:00:00 2001
From: bicochan <chanii8@naver.com>
Date: Tue, 8 Apr 2025 14:33:11 +0900
Subject: [PATCH 21/38] =?UTF-8?q?feat:=20=EC=9D=B4=EB=AF=B8=EC=A7=80=20?=
 =?UTF-8?q?=EC=97=85=EB=A1=9C=EB=93=9C=20=EB=A1=9C=EC=A7=81=EC=97=90=20?=
 =?UTF-8?q?=EA=B8=B0=EC=A1=B4=20=EC=9D=B4=EB=AF=B8=EC=A7=80=20=EC=82=AD?=
 =?UTF-8?q?=EC=A0=9C=20=EB=A1=9C=EC=A7=81=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../attachment/api/attachment-service.ts      |  4 ++++
 apps/cs/src/pages/image/ui/image-form.tsx     | 20 ++++++++++---------
 2 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/apps/cs/src/entities/attachment/api/attachment-service.ts b/apps/cs/src/entities/attachment/api/attachment-service.ts
index cabba36d0..31807a3cb 100644
--- a/apps/cs/src/entities/attachment/api/attachment-service.ts
+++ b/apps/cs/src/entities/attachment/api/attachment-service.ts
@@ -13,6 +13,10 @@ export class AttachmentApiService implements AttachmentService {
     return response.data;
   }
 
+  public async deleteAttachment(atflId: string): Promise<void> {
+    await client.delete(`${ENDPOINT.ATTACH_SERVICE.ATTACHMENTS}/${atflId}`);
+  }
+
   public async getImageUrl(atflId: string): Promise<string> {
     if (!atflId) return "";
     const response = await fetch(`${ENDPOINT.ATTACH_SERVICE.IMAGES}/${atflId}`);
diff --git a/apps/cs/src/pages/image/ui/image-form.tsx b/apps/cs/src/pages/image/ui/image-form.tsx
index 18d5df554..236fee434 100644
--- a/apps/cs/src/pages/image/ui/image-form.tsx
+++ b/apps/cs/src/pages/image/ui/image-form.tsx
@@ -41,10 +41,10 @@ function ImageForm({ form, imgSn, ...props }: ImageFormProps) {
   const [upload, setUpload] = useState<Upload | null>(null);
   const [progress, setProgress] = useState(0);
 
-  const { data: atflId } = useQuery({
+  const { data: attachmentData } = useQuery({
     queryKey: [ENDPOINT.ATTACH_SERVICE.ATTACHMENTS, atflCd],
     queryFn: () => AttachmentApi.getAttachments(atflCd!),
-    select: (data) => data?.[data.length - 1]?.atflId,
+    select: (data) => data?.[data.length - 1],
     enabled: !!atflCd,
   });
 
@@ -59,15 +59,17 @@ function ImageForm({ form, imgSn, ...props }: ImageFormProps) {
     const { atflCd, atflId } = JSON.parse(fileInfo) ?? {};
     if (atflCd) form.setValue("atflCd", atflCd);
     if (atflId) setImageUrl(await AttachmentApi.getImageUrl(atflId));
+    if (attachmentData)
+      await AttachmentApi.deleteAttachment(attachmentData.atflId);
   };
 
   useEffect(() => {
-    if (!atflId) return;
+    if (!attachmentData) return;
 
     (async () => {
-      setImageUrl(await AttachmentApi.getImageUrl(atflId));
+      setImageUrl(await AttachmentApi.getImageUrl(attachmentData.atflId));
     })();
-  }, [atflId]);
+  }, [attachmentData]);
 
   return (
     <FormWrapper form={form} isModifyMode={!!imgSn} {...props}>
@@ -205,9 +207,6 @@ function ImageForm({ form, imgSn, ...props }: ImageFormProps) {
                               <>
                                 <Label htmlFor="atflCd">
                                   <div className="relative h-[27rem] w-[48rem] overflow-hidden rounded-sm border border-border bg-accent">
-                                    <p className="absolute bottom-3 left-0 p-2 text-base leading-none">
-                                      {(upload?.file as File)?.name}
-                                    </p>
                                     <div className="relative h-full w-full">
                                       {imageUrl && (
                                         <Image
@@ -218,9 +217,12 @@ function ImageForm({ form, imgSn, ...props }: ImageFormProps) {
                                         />
                                       )}
                                     </div>
+                                    <p className="absolute bottom-3 left-0 z-10 p-2 text-base leading-none">
+                                      {(upload?.file as File)?.name}
+                                    </p>
                                     <Progress
                                       value={progress}
-                                      className="absolute bottom-0 left-0"
+                                      className="absolute bottom-0 left-0 z-10"
                                     />
                                   </div>
                                 </Label>

From 07ee7adca5210139591fc2bf8865c4c297bc7df7 Mon Sep 17 00:00:00 2001
From: bicochan <chanii8@naver.com>
Date: Tue, 8 Apr 2025 15:57:19 +0900
Subject: [PATCH 22/38] =?UTF-8?q?refactor:=20atflCd=EB=A1=9C=20=EA=B8=B0?=
 =?UTF-8?q?=EC=A1=B4=20=EC=9D=B4=EB=AF=B8=EC=A7=80=20=EC=82=AD=EC=A0=9C?=
 =?UTF-8?q?=ED=95=98=EB=8A=94=20=EB=A1=9C=EC=A7=81=EC=9C=BC=EB=A1=9C=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../attachment/api/attachment-service.ts      | 15 +++++++++
 .../attachment/model/attachment-interface.ts  |  3 ++
 .../pages/banner/model/banner-interface.ts    |  1 +
 .../banner/model/banner-table-columns.tsx     | 32 +++++++++++++++++--
 apps/cs/src/pages/banner/ui/banner-form.tsx   | 20 ++++++------
 apps/cs/src/pages/banner/ui/banner-page.tsx   |  2 +-
 apps/cs/src/pages/image/ui/image-form.tsx     |  6 ++--
 apps/cs/src/pages/image/ui/image-page.tsx     |  2 +-
 8 files changed, 65 insertions(+), 16 deletions(-)

diff --git a/apps/cs/src/entities/attachment/api/attachment-service.ts b/apps/cs/src/entities/attachment/api/attachment-service.ts
index 31807a3cb..c930b7012 100644
--- a/apps/cs/src/entities/attachment/api/attachment-service.ts
+++ b/apps/cs/src/entities/attachment/api/attachment-service.ts
@@ -17,12 +17,27 @@ export class AttachmentApiService implements AttachmentService {
     await client.delete(`${ENDPOINT.ATTACH_SERVICE.ATTACHMENTS}/${atflId}`);
   }
 
+  public async deleteAttachmentByAtflCd(atflCd: string): Promise<void> {
+    await client.delete(
+      `${ENDPOINT.ATTACH_SERVICE.ATTACHMENTS}/atflCd/${atflCd}`,
+    );
+  }
+
   public async getImageUrl(atflId: string): Promise<string> {
     if (!atflId) return "";
     const response = await fetch(`${ENDPOINT.ATTACH_SERVICE.IMAGES}/${atflId}`);
     const blob = await response.blob();
     return URL.createObjectURL(blob);
   }
+
+  public async getImageUrlByAtflCd(atflCd: string): Promise<string> {
+    if (!atflCd) return "";
+    const response = await fetch(
+      `${ENDPOINT.ATTACH_SERVICE.IMAGES}/atflCd/${atflCd}`,
+    );
+    const blob = await response.blob();
+    return URL.createObjectURL(blob);
+  }
 }
 
 export const AttachmentApi = new AttachmentApiService();
diff --git a/apps/cs/src/entities/attachment/model/attachment-interface.ts b/apps/cs/src/entities/attachment/model/attachment-interface.ts
index a790efbef..5986a96d1 100644
--- a/apps/cs/src/entities/attachment/model/attachment-interface.ts
+++ b/apps/cs/src/entities/attachment/model/attachment-interface.ts
@@ -15,5 +15,8 @@ export interface Attachment {
 
 export interface AttachmentService {
   getAttachments: (atflCd: string) => Promise<Attachment[]>;
+  deleteAttachment: (atflId: string) => Promise<void>;
+  deleteAttachmentByAtflCd: (atflCd: string) => Promise<void>;
   getImageUrl: (atflId: string) => Promise<string>;
+  getImageUrlByAtflCd: (atflCd: string) => Promise<string>;
 }
diff --git a/apps/cs/src/pages/banner/model/banner-interface.ts b/apps/cs/src/pages/banner/model/banner-interface.ts
index 839830dad..1226f63e6 100644
--- a/apps/cs/src/pages/banner/model/banner-interface.ts
+++ b/apps/cs/src/pages/banner/model/banner-interface.ts
@@ -21,6 +21,7 @@ export interface Banner {
   bnrTtl: string;
   lnkgUrlAddr: string;
   useYn: string;
+  atflCd: string;
   mdfcnDt: string;
   mdfr: string;
   mdfrNm: string;
diff --git a/apps/cs/src/pages/banner/model/banner-table-columns.tsx b/apps/cs/src/pages/banner/model/banner-table-columns.tsx
index 69833ab00..d30d28444 100644
--- a/apps/cs/src/pages/banner/model/banner-table-columns.tsx
+++ b/apps/cs/src/pages/banner/model/banner-table-columns.tsx
@@ -1,9 +1,12 @@
 "use client";
 
 import dayjs from "dayjs";
-import { type ColumnDef } from "@tanstack/react-table";
+import Image from "next/image";
+import type { ColumnDef } from "@tanstack/react-table";
 import { Checkbox } from "@common/components/ui";
-import { type Banner } from "./banner-interface";
+import { AttachmentApi } from "@/entities/attachment";
+import type { Banner } from "./banner-interface";
+import { useEffect, useState } from "react";
 
 export const columns: ColumnDef<Banner>[] = [
   {
@@ -27,7 +30,10 @@ export const columns: ColumnDef<Banner>[] = [
       />
     ),
   },
-  // TODO: 배너 이미지 셀 추가
+  {
+    header: "배너 이미지",
+    cell: ({ row }) => <BannerImage atflCd={row.original.atflCd} />,
+  },
   {
     accessorKey: "bnrTtl",
     header: "배너명",
@@ -53,3 +59,23 @@ export const columns: ColumnDef<Banner>[] = [
     },
   },
 ];
+
+const BannerImage = ({ atflCd }: { atflCd: string }) => {
+  const [imageUrl, setImageUrl] = useState("");
+
+  useEffect(() => {
+    if (!atflCd) return;
+
+    (async () => {
+      setImageUrl(await AttachmentApi.getImageUrlByAtflCd(atflCd));
+    })();
+  }, [atflCd]);
+
+  if (!imageUrl) return null;
+
+  return (
+    <div className="relative flex h-[4rem] w-[16rem] items-center justify-center">
+      <Image src={imageUrl} alt="배너 이미지" fill objectFit="contain" />
+    </div>
+  );
+};
diff --git a/apps/cs/src/pages/banner/ui/banner-form.tsx b/apps/cs/src/pages/banner/ui/banner-form.tsx
index ade05f13e..2c901bd90 100644
--- a/apps/cs/src/pages/banner/ui/banner-form.tsx
+++ b/apps/cs/src/pages/banner/ui/banner-form.tsx
@@ -41,10 +41,10 @@ function BannerForm({ form, bnrSn, ...props }: BannerFormProps) {
   const [upload, setUpload] = useState<Upload | null>(null);
   const [progress, setProgress] = useState(0);
 
-  const { data: atflId } = useQuery({
+  const { data: attachmentData } = useQuery({
     queryKey: [ENDPOINT.ATTACH_SERVICE.ATTACHMENTS, atflCd],
     queryFn: () => AttachmentApi.getAttachments(atflCd!),
-    select: (data) => data?.[data.length - 1]?.atflId,
+    select: (data) => data?.[data.length - 1],
     enabled: !!atflCd,
   });
 
@@ -59,15 +59,17 @@ function BannerForm({ form, bnrSn, ...props }: BannerFormProps) {
     const { atflCd, atflId } = JSON.parse(fileInfo) ?? {};
     if (atflCd) form.setValue("atflCd", atflCd);
     if (atflId) setImageUrl(await AttachmentApi.getImageUrl(atflId));
+    if (attachmentData)
+      await AttachmentApi.deleteAttachmentByAtflCd(attachmentData.atflCd);
   };
 
   useEffect(() => {
-    if (!atflId) return;
+    if (!attachmentData) return;
 
     (async () => {
-      setImageUrl(await AttachmentApi.getImageUrl(atflId));
+      setImageUrl(await AttachmentApi.getImageUrl(attachmentData.atflId));
     })();
-  }, [atflId]);
+  }, [attachmentData]);
 
   return (
     <FormWrapper form={form} isModifyMode={!!bnrSn} {...props}>
@@ -147,9 +149,6 @@ function BannerForm({ form, bnrSn, ...props }: BannerFormProps) {
                             <>
                               <Label htmlFor="atflCd">
                                 <div className="relative h-[27rem] w-[48rem] overflow-hidden rounded-sm border border-border bg-accent">
-                                  <p className="absolute bottom-3 left-0 p-2 text-base leading-none">
-                                    {(upload?.file as File)?.name}
-                                  </p>
                                   <div className="relative h-full w-full">
                                     {imageUrl && (
                                       <Image
@@ -160,9 +159,12 @@ function BannerForm({ form, bnrSn, ...props }: BannerFormProps) {
                                       />
                                     )}
                                   </div>
+                                  <p className="absolute bottom-3 left-0 z-10 p-2 text-base leading-none">
+                                    {(upload?.file as File)?.name}
+                                  </p>
                                   <Progress
                                     value={progress}
-                                    className="absolute bottom-0 left-0"
+                                    className="absolute bottom-0 left-0 z-10"
                                   />
                                 </div>
                               </Label>
diff --git a/apps/cs/src/pages/banner/ui/banner-page.tsx b/apps/cs/src/pages/banner/ui/banner-page.tsx
index a2019c126..2f8555fd5 100644
--- a/apps/cs/src/pages/banner/ui/banner-page.tsx
+++ b/apps/cs/src/pages/banner/ui/banner-page.tsx
@@ -125,7 +125,7 @@ function BannerPage() {
             </div>
           </div>
         </div>
-        <div className="card !m-[1.2rem] h-[30.4rem] overflow-auto !p-0">
+        <div className="card !m-[1.2rem] h-full overflow-auto !p-0">
           <DataTable table={table} onRowClick={handleRowClick} viewPagination />
         </div>
       </div>
diff --git a/apps/cs/src/pages/image/ui/image-form.tsx b/apps/cs/src/pages/image/ui/image-form.tsx
index 236fee434..3b4bb46d4 100644
--- a/apps/cs/src/pages/image/ui/image-form.tsx
+++ b/apps/cs/src/pages/image/ui/image-form.tsx
@@ -60,14 +60,16 @@ function ImageForm({ form, imgSn, ...props }: ImageFormProps) {
     if (atflCd) form.setValue("atflCd", atflCd);
     if (atflId) setImageUrl(await AttachmentApi.getImageUrl(atflId));
     if (attachmentData)
-      await AttachmentApi.deleteAttachment(attachmentData.atflId);
+      await AttachmentApi.deleteAttachmentByAtflCd(attachmentData.atflCd);
   };
 
   useEffect(() => {
     if (!attachmentData) return;
 
     (async () => {
-      setImageUrl(await AttachmentApi.getImageUrl(attachmentData.atflId));
+      setImageUrl(
+        await AttachmentApi.getImageUrlByAtflCd(attachmentData.atflCd),
+      );
     })();
   }, [attachmentData]);
 
diff --git a/apps/cs/src/pages/image/ui/image-page.tsx b/apps/cs/src/pages/image/ui/image-page.tsx
index 648b8e410..18d2fa2fb 100644
--- a/apps/cs/src/pages/image/ui/image-page.tsx
+++ b/apps/cs/src/pages/image/ui/image-page.tsx
@@ -125,7 +125,7 @@ function ImagePage() {
             </div>
           </div>
         </div>
-        <div className="card !m-[1.2rem] h-[30.4rem] overflow-auto !p-0">
+        <div className="card !m-[1.2rem] h-full overflow-auto !p-0">
           <DataTable table={table} onRowClick={handleRowClick} viewPagination />
         </div>
       </div>

From 2eb9eb9370f57639d2ecbbf03030c93e767fa183 Mon Sep 17 00:00:00 2001
From: bicochan <chanii8@naver.com>
Date: Tue, 8 Apr 2025 16:28:27 +0900
Subject: [PATCH 23/38] =?UTF-8?q?fix:=20atflCd=20=EC=BF=A0=ED=82=A4=20?=
 =?UTF-8?q?=EC=B4=88=EA=B8=B0=ED=99=94=20=EB=A1=9C=EC=A7=81=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/cs/src/pages/banner/model/banner-table-columns.tsx | 2 --
 apps/cs/src/pages/banner/ui/banner-form.tsx             | 4 +++-
 apps/cs/src/pages/image/ui/image-form.tsx               | 6 +++---
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/apps/cs/src/pages/banner/model/banner-table-columns.tsx b/apps/cs/src/pages/banner/model/banner-table-columns.tsx
index d30d28444..2468821f4 100644
--- a/apps/cs/src/pages/banner/model/banner-table-columns.tsx
+++ b/apps/cs/src/pages/banner/model/banner-table-columns.tsx
@@ -64,8 +64,6 @@ const BannerImage = ({ atflCd }: { atflCd: string }) => {
   const [imageUrl, setImageUrl] = useState("");
 
   useEffect(() => {
-    if (!atflCd) return;
-
     (async () => {
       setImageUrl(await AttachmentApi.getImageUrlByAtflCd(atflCd));
     })();
diff --git a/apps/cs/src/pages/banner/ui/banner-form.tsx b/apps/cs/src/pages/banner/ui/banner-form.tsx
index 2c901bd90..3b439653c 100644
--- a/apps/cs/src/pages/banner/ui/banner-form.tsx
+++ b/apps/cs/src/pages/banner/ui/banner-form.tsx
@@ -19,13 +19,14 @@ import {
   TableRow,
   Textarea,
 } from "@common/components";
+import { FormWrapper } from "@/widgets/form-wrapper";
 import { CodeSelect } from "@/entities/code";
 import { AttachmentApi } from "@/entities/attachment";
 import { ENDPOINT } from "@/shared/config";
+import { setCookie } from "@/shared/lib/cookie";
 import { FormControl, FormField, FormItem } from "@/shared/ui/form";
 import type { BannerFormData } from "../model/banner-interface";
 import { handleUpload } from "../lib/utils";
-import { FormWrapper } from "@/widgets/form-wrapper";
 
 type BannerFormProps = {
   form: UseFormReturn<BannerFormData>;
@@ -138,6 +139,7 @@ function BannerForm({ form, bnrSn, ...props }: BannerFormProps) {
                           onUpload={(e) => {
                             const files = e.target.files;
                             if (!files) return;
+                            setCookie("atfl-cd-key", "");
                             handleUpload(files, {
                               handleUploadStart: setUpload,
                               handleProgress,
diff --git a/apps/cs/src/pages/image/ui/image-form.tsx b/apps/cs/src/pages/image/ui/image-form.tsx
index 3b4bb46d4..c3a8cca7a 100644
--- a/apps/cs/src/pages/image/ui/image-form.tsx
+++ b/apps/cs/src/pages/image/ui/image-form.tsx
@@ -22,6 +22,7 @@ import { FormWrapper } from "@/widgets/form-wrapper";
 import { CodeSelect } from "@/entities/code";
 import { AttachmentApi } from "@/entities/attachment";
 import { ENDPOINT } from "@/shared/config";
+import { setCookie } from "@/shared/lib/cookie";
 import { FormControl, FormField, FormItem } from "@/shared/ui/form";
 import type { ImageFormData } from "../model/image-interface";
 import { handleUpload } from "../lib/utils";
@@ -64,11 +65,9 @@ function ImageForm({ form, imgSn, ...props }: ImageFormProps) {
   };
 
   useEffect(() => {
-    if (!attachmentData) return;
-
     (async () => {
       setImageUrl(
-        await AttachmentApi.getImageUrlByAtflCd(attachmentData.atflCd),
+        await AttachmentApi.getImageUrlByAtflCd(attachmentData?.atflCd ?? ""),
       );
     })();
   }, [attachmentData]);
@@ -198,6 +197,7 @@ function ImageForm({ form, imgSn, ...props }: ImageFormProps) {
                             onUpload={(e) => {
                               const files = e.target.files;
                               if (!files) return;
+                              setCookie("atfl-cd-key", "");
                               handleUpload(files, {
                                 handleUploadStart: setUpload,
                                 handleProgress,

From 661eb3597a13804f53822a7b2a8f643c006fe324 Mon Sep 17 00:00:00 2001
From: bicochan <chanii8@naver.com>
Date: Tue, 8 Apr 2025 17:00:59 +0900
Subject: [PATCH 24/38] =?UTF-8?q?feat:=20=EB=B0=B0=EB=84=88=20=EB=AA=A9?=
 =?UTF-8?q?=EB=A1=9D=20=EC=9D=B4=EB=AF=B8=EC=A7=80=EC=97=90=20=EC=8A=A4?=
 =?UTF-8?q?=EC=BC=88=EB=A0=88=ED=86=A4=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../pages/banner/model/banner-table-columns.tsx | 17 +++++++++--------
 packages/common/components/src/ui/index.ts      |  1 +
 2 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/apps/cs/src/pages/banner/model/banner-table-columns.tsx b/apps/cs/src/pages/banner/model/banner-table-columns.tsx
index 2468821f4..3d993f766 100644
--- a/apps/cs/src/pages/banner/model/banner-table-columns.tsx
+++ b/apps/cs/src/pages/banner/model/banner-table-columns.tsx
@@ -2,11 +2,12 @@
 
 import dayjs from "dayjs";
 import Image from "next/image";
+import { useQuery } from "@tanstack/react-query";
 import type { ColumnDef } from "@tanstack/react-table";
-import { Checkbox } from "@common/components/ui";
+import { Checkbox, Skeleton } from "@common/components/ui";
 import { AttachmentApi } from "@/entities/attachment";
+import { ENDPOINT } from "@/shared/config";
 import type { Banner } from "./banner-interface";
-import { useEffect, useState } from "react";
 
 export const columns: ColumnDef<Banner>[] = [
   {
@@ -61,13 +62,13 @@ export const columns: ColumnDef<Banner>[] = [
 ];
 
 const BannerImage = ({ atflCd }: { atflCd: string }) => {
-  const [imageUrl, setImageUrl] = useState("");
+  const { data: imageUrl, isLoading } = useQuery({
+    queryKey: [ENDPOINT.ATTACH_SERVICE.IMAGES, atflCd],
+    queryFn: () => AttachmentApi.getImageUrlByAtflCd(atflCd),
+    enabled: !!atflCd,
+  });
 
-  useEffect(() => {
-    (async () => {
-      setImageUrl(await AttachmentApi.getImageUrlByAtflCd(atflCd));
-    })();
-  }, [atflCd]);
+  if (isLoading) return <Skeleton className="h-[4rem] w-[16rem]" />;
 
   if (!imageUrl) return null;
 
diff --git a/packages/common/components/src/ui/index.ts b/packages/common/components/src/ui/index.ts
index 4ff471de1..bea09fa74 100644
--- a/packages/common/components/src/ui/index.ts
+++ b/packages/common/components/src/ui/index.ts
@@ -20,6 +20,7 @@ export * from "./progress";
 export * from "./radio-group";
 export * from "./select";
 export * from "./slider";
+export * from "./skeleton";
 export * from "./switch";
 export * from "./table";
 export * from "./tabs";

From 12a12339b90be5af1203d7ebc2e4888f11c49d3f Mon Sep 17 00:00:00 2001
From: bicochan <chanii8@naver.com>
Date: Tue, 8 Apr 2025 18:10:27 +0900
Subject: [PATCH 25/38] =?UTF-8?q?feat:=20=EB=B0=B0=EB=84=88=20=EC=9D=B4?=
 =?UTF-8?q?=EB=AF=B8=EC=A7=80=20=EB=AF=B8=EB=A6=AC=EB=B3=B4=EA=B8=B0=20?=
 =?UTF-8?q?=EB=8B=A4=EC=9D=B4=EC=96=BC=EB=A1=9C=EA=B7=B8=20=EC=9E=91?=
 =?UTF-8?q?=EC=97=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../banner/model/banner-table-columns.tsx     |  28 +-
 apps/cs/src/pages/banner/ui/banner-page.tsx   |  16 +-
 .../pages/banner/ui/preview-banner-dialog.tsx |  57 ++++
 packages/common/components/package.json       |   1 +
 .../components/src/ui/carousel/index.tsx      | 261 ++++++++++++++++++
 packages/common/components/src/ui/index.ts    |   1 +
 pnpm-lock.yaml                                |  25 ++
 7 files changed, 383 insertions(+), 6 deletions(-)
 create mode 100644 apps/cs/src/pages/banner/ui/preview-banner-dialog.tsx
 create mode 100644 packages/common/components/src/ui/carousel/index.tsx

diff --git a/apps/cs/src/pages/banner/model/banner-table-columns.tsx b/apps/cs/src/pages/banner/model/banner-table-columns.tsx
index 3d993f766..65c8c6e87 100644
--- a/apps/cs/src/pages/banner/model/banner-table-columns.tsx
+++ b/apps/cs/src/pages/banner/model/banner-table-columns.tsx
@@ -9,7 +9,9 @@ import { AttachmentApi } from "@/entities/attachment";
 import { ENDPOINT } from "@/shared/config";
 import type { Banner } from "./banner-interface";
 
-export const columns: ColumnDef<Banner>[] = [
+export const columns = (
+  imageRefs: React.MutableRefObject<Map<number, string>>,
+): ColumnDef<Banner>[] => [
   {
     id: "select",
     header: ({ table }) => (
@@ -33,7 +35,13 @@ export const columns: ColumnDef<Banner>[] = [
   },
   {
     header: "배너 이미지",
-    cell: ({ row }) => <BannerImage atflCd={row.original.atflCd} />,
+    cell: ({ row }) => (
+      <BannerImage
+        atflCd={row.original.atflCd}
+        bnrSn={row.original.bnrSn}
+        imageRefs={imageRefs}
+      />
+    ),
   },
   {
     accessorKey: "bnrTtl",
@@ -61,11 +69,23 @@ export const columns: ColumnDef<Banner>[] = [
   },
 ];
 
-const BannerImage = ({ atflCd }: { atflCd: string }) => {
+type BannerImageProps = {
+  atflCd: string;
+  bnrSn: number;
+  imageRefs: React.MutableRefObject<Map<number, string>>;
+};
+
+const BannerImage = ({ atflCd, bnrSn, imageRefs }: BannerImageProps) => {
+  const prevImage = imageRefs.current.get(bnrSn);
+
   const { data: imageUrl, isLoading } = useQuery({
     queryKey: [ENDPOINT.ATTACH_SERVICE.IMAGES, atflCd],
     queryFn: () => AttachmentApi.getImageUrlByAtflCd(atflCd),
-    enabled: !!atflCd,
+    select: (url) => {
+      if (url) imageRefs.current.set(bnrSn, url);
+      return url;
+    },
+    enabled: !prevImage && !!atflCd,
   });
 
   if (isLoading) return <Skeleton className="h-[4rem] w-[16rem]" />;
diff --git a/apps/cs/src/pages/banner/ui/banner-page.tsx b/apps/cs/src/pages/banner/ui/banner-page.tsx
index 2f8555fd5..0efc89602 100644
--- a/apps/cs/src/pages/banner/ui/banner-page.tsx
+++ b/apps/cs/src/pages/banner/ui/banner-page.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useEffect, useState } from "react";
+import { useEffect, useState, useRef } from "react";
 import { useRouter } from "next/navigation";
 import { useQuery } from "@tanstack/react-query";
 import {
@@ -15,6 +15,7 @@ import { ENDPOINT } from "@/shared/config";
 import { BannerApi } from "../api/banner-service";
 import { columns } from "../model/banner-table-columns";
 import { type Banner, type BannerParams } from "../model/banner-interface";
+import { PreviewBannerDialog } from "./preview-banner-dialog";
 
 type PostingTarget = {
   pstgTrgtNm: string;
@@ -23,6 +24,7 @@ type PostingTarget = {
 
 function BannerPage() {
   const router = useRouter();
+  const imageRefs = useRef<Map<number, string>>(new Map());
 
   const [rowSelection, setRowSelection] = useState<RowSelectionState>({});
   const [postingTargets, setPostingTargets] = useState<PostingTarget[]>([]);
@@ -45,7 +47,7 @@ function BannerPage() {
 
   const table = useReactTable({
     data: bannerList?.content ?? [],
-    columns,
+    columns: columns(imageRefs),
     state: {
       pagination,
       rowSelection,
@@ -67,6 +69,15 @@ function BannerPage() {
     router.push(`/banner/register/${row.bnrSn}`);
   };
 
+  const getSelectedBannerImages = () => {
+    const selectedImages: string[] = [];
+    table.getFilteredSelectedRowModel().rows.forEach((row) => {
+      const imageUrl = imageRefs.current.get(row.original.bnrSn);
+      if (imageUrl) selectedImages.push(imageUrl);
+    });
+    return selectedImages;
+  };
+
   useEffect(() => {
     const postingTargets = table
       .getFilteredSelectedRowModel()
@@ -115,6 +126,7 @@ function BannerPage() {
           <div className="flex w-full items-center justify-between">
             <h3 className="text-2xl font-medium text-label">배너 목록</h3>
             <div className="flex gap-2">
+              <PreviewBannerDialog images={getSelectedBannerImages()} />
               <PostingDialog
                 postingType={POSTING_TYPE.BANNER}
                 postingTargets={postingTargets}
diff --git a/apps/cs/src/pages/banner/ui/preview-banner-dialog.tsx b/apps/cs/src/pages/banner/ui/preview-banner-dialog.tsx
new file mode 100644
index 000000000..bdd9e3237
--- /dev/null
+++ b/apps/cs/src/pages/banner/ui/preview-banner-dialog.tsx
@@ -0,0 +1,57 @@
+"use client";
+
+import Image from "next/image";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+  Button,
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+} from "@common/components";
+
+type PreviewBannerDialogProps = {
+  images: string[];
+};
+
+function PreviewBannerDialog({ images }: PreviewBannerDialogProps) {
+  return (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button disabled={!images.length}>미리보기</Button>
+      </DialogTrigger>
+      <DialogContent className="max-w-[80rem]" aria-describedby={undefined}>
+        <DialogHeader>
+          <DialogTitle>배너 이미지 미리보기</DialogTitle>
+        </DialogHeader>
+        <div className="mt-4 px-12">
+          <Carousel>
+            <CarouselContent>
+              {images.map((image, index) => (
+                <CarouselItem key={index} className="basis-1/3">
+                  <div className="relative flex aspect-video items-center justify-center">
+                    <Image
+                      src={image}
+                      alt={`배너 이미지 ${index + 1}`}
+                      fill
+                      objectFit="contain"
+                    />
+                  </div>
+                </CarouselItem>
+              ))}
+            </CarouselContent>
+            <CarouselPrevious className="!bg-accent text-accent-foreground" />
+            <CarouselNext className="!bg-accent text-accent-foreground" />
+          </Carousel>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+export { PreviewBannerDialog };
diff --git a/packages/common/components/package.json b/packages/common/components/package.json
index 8b9b12eed..cab68595e 100644
--- a/packages/common/components/package.json
+++ b/packages/common/components/package.json
@@ -54,6 +54,7 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "date-fns": "^3.6.0",
+    "embla-carousel-react": "^8.6.0",
     "js-cookie": "^3.0.5",
     "lucide-react": "^0.474.0",
     "react-chartjs-2": "^5.3.0",
diff --git a/packages/common/components/src/ui/carousel/index.tsx b/packages/common/components/src/ui/carousel/index.tsx
new file mode 100644
index 000000000..862e3f440
--- /dev/null
+++ b/packages/common/components/src/ui/carousel/index.tsx
@@ -0,0 +1,261 @@
+"use client";
+
+import * as React from "react";
+import useEmblaCarousel, {
+  type UseEmblaCarouselType,
+} from "embla-carousel-react";
+import { ArrowLeft, ArrowRight } from "lucide-react";
+
+import { cn } from "../../lib/utils";
+import { Button } from "../button";
+
+type CarouselApi = UseEmblaCarouselType[1];
+type UseCarouselParameters = Parameters<typeof useEmblaCarousel>;
+type CarouselOptions = UseCarouselParameters[0];
+type CarouselPlugin = UseCarouselParameters[1];
+
+type CarouselProps = {
+  opts?: CarouselOptions;
+  plugins?: CarouselPlugin;
+  orientation?: "horizontal" | "vertical";
+  setApi?: (api: CarouselApi) => void;
+};
+
+type CarouselContextProps = {
+  carouselRef: ReturnType<typeof useEmblaCarousel>[0];
+  api: ReturnType<typeof useEmblaCarousel>[1];
+  scrollPrev: () => void;
+  scrollNext: () => void;
+  canScrollPrev: boolean;
+  canScrollNext: boolean;
+} & CarouselProps;
+
+const CarouselContext = React.createContext<CarouselContextProps | null>(null);
+
+function useCarousel() {
+  const context = React.useContext(CarouselContext);
+
+  if (!context) {
+    throw new Error("useCarousel must be used within a <Carousel />");
+  }
+
+  return context;
+}
+
+const Carousel = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & CarouselProps
+>(
+  (
+    {
+      orientation = "horizontal",
+      opts,
+      setApi,
+      plugins,
+      className,
+      children,
+      ...props
+    },
+    ref,
+  ) => {
+    const [carouselRef, api] = useEmblaCarousel(
+      {
+        ...opts,
+        axis: orientation === "horizontal" ? "x" : "y",
+      },
+      plugins,
+    );
+    const [canScrollPrev, setCanScrollPrev] = React.useState(false);
+    const [canScrollNext, setCanScrollNext] = React.useState(false);
+
+    const onSelect = React.useCallback((api: CarouselApi) => {
+      if (!api) {
+        return;
+      }
+
+      setCanScrollPrev(api.canScrollPrev());
+      setCanScrollNext(api.canScrollNext());
+    }, []);
+
+    const scrollPrev = React.useCallback(() => {
+      api?.scrollPrev();
+    }, [api]);
+
+    const scrollNext = React.useCallback(() => {
+      api?.scrollNext();
+    }, [api]);
+
+    const handleKeyDown = React.useCallback(
+      (event: React.KeyboardEvent<HTMLDivElement>) => {
+        if (event.key === "ArrowLeft") {
+          event.preventDefault();
+          scrollPrev();
+        } else if (event.key === "ArrowRight") {
+          event.preventDefault();
+          scrollNext();
+        }
+      },
+      [scrollPrev, scrollNext],
+    );
+
+    React.useEffect(() => {
+      if (!api || !setApi) {
+        return;
+      }
+
+      setApi(api);
+    }, [api, setApi]);
+
+    React.useEffect(() => {
+      if (!api) {
+        return;
+      }
+
+      onSelect(api);
+      api.on("reInit", onSelect);
+      api.on("select", onSelect);
+
+      return () => {
+        api?.off("select", onSelect);
+      };
+    }, [api, onSelect]);
+
+    return (
+      <CarouselContext.Provider
+        value={{
+          carouselRef,
+          api: api,
+          opts,
+          orientation:
+            orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
+          scrollPrev,
+          scrollNext,
+          canScrollPrev,
+          canScrollNext,
+        }}
+      >
+        <div
+          ref={ref}
+          onKeyDownCapture={handleKeyDown}
+          className={cn("relative", className)}
+          role="region"
+          aria-roledescription="carousel"
+          {...props}
+        >
+          {children}
+        </div>
+      </CarouselContext.Provider>
+    );
+  },
+);
+Carousel.displayName = "Carousel";
+
+const CarouselContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => {
+  const { carouselRef, orientation } = useCarousel();
+
+  return (
+    <div ref={carouselRef} className="overflow-hidden">
+      <div
+        ref={ref}
+        className={cn(
+          "flex",
+          orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
+          className,
+        )}
+        {...props}
+      />
+    </div>
+  );
+});
+CarouselContent.displayName = "CarouselContent";
+
+const CarouselItem = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => {
+  const { orientation } = useCarousel();
+
+  return (
+    <div
+      ref={ref}
+      role="group"
+      aria-roledescription="slide"
+      className={cn(
+        "min-w-0 shrink-0 grow-0 basis-full",
+        orientation === "horizontal" ? "pl-4" : "pt-4",
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+CarouselItem.displayName = "CarouselItem";
+
+const CarouselPrevious = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<typeof Button>
+>(({ className, variant = "outline", size = "icon", ...props }, ref) => {
+  const { orientation, scrollPrev, canScrollPrev } = useCarousel();
+
+  return (
+    <Button
+      ref={ref}
+      variant={variant}
+      size={size}
+      className={cn(
+        "absolute h-8 w-8 rounded-full",
+        orientation === "horizontal"
+          ? "-left-12 top-1/2 -translate-y-1/2"
+          : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
+        className,
+      )}
+      disabled={!canScrollPrev}
+      onClick={scrollPrev}
+      {...props}
+    >
+      <ArrowLeft className="h-4 w-4" />
+      <span className="sr-only">Previous slide</span>
+    </Button>
+  );
+});
+CarouselPrevious.displayName = "CarouselPrevious";
+
+const CarouselNext = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<typeof Button>
+>(({ className, variant = "outline", size = "icon", ...props }, ref) => {
+  const { orientation, scrollNext, canScrollNext } = useCarousel();
+
+  return (
+    <Button
+      ref={ref}
+      variant={variant}
+      size={size}
+      className={cn(
+        "absolute h-8 w-8 rounded-full",
+        orientation === "horizontal"
+          ? "-right-12 top-1/2 -translate-y-1/2"
+          : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
+        className,
+      )}
+      disabled={!canScrollNext}
+      onClick={scrollNext}
+      {...props}
+    >
+      <ArrowRight className="h-4 w-4" />
+      <span className="sr-only">Next slide</span>
+    </Button>
+  );
+});
+CarouselNext.displayName = "CarouselNext";
+
+export {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+};
diff --git a/packages/common/components/src/ui/index.ts b/packages/common/components/src/ui/index.ts
index bea09fa74..134b76d21 100644
--- a/packages/common/components/src/ui/index.ts
+++ b/packages/common/components/src/ui/index.ts
@@ -2,6 +2,7 @@ export * from "./accordion";
 export * from "./badge";
 export * from "./button";
 export * from "./calendar";
+export * from "./carousel";
 export * from "./checkbox";
 export * from "./data-table";
 export * from "./date-picker";
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index beb0c1aea..f22abbbfc 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -447,6 +447,9 @@ importers:
       date-fns:
         specifier: ^3.6.0
         version: 3.6.0
+      embla-carousel-react:
+        specifier: ^8.6.0
+        version: 8.6.0(react@18.3.1)
       js-cookie:
         specifier: ^3.0.5
         version: 3.0.5
@@ -4821,6 +4824,28 @@ packages:
     resolution: {integrity: sha512-dJr1o6yCntRkXElnhsHh1bAV19bo/hKyFf7tCcWgpXbuFIF0Lakjgqv5LRfSDaNzAII8Fnxg2tqgHkgCvxdbxw==}
     dev: true
 
+  /embla-carousel-react@8.6.0(react@18.3.1):
+    resolution: {integrity: sha512-0/PjqU7geVmo6F734pmPqpyHqiM99olvyecY7zdweCw+6tKEXnrE90pBiBbMMU8s5tICemzpQ3hi5EpxzGW+JA==}
+    peerDependencies:
+      react: ^18.3.1
+    dependencies:
+      embla-carousel: 8.6.0
+      embla-carousel-reactive-utils: 8.6.0(embla-carousel@8.6.0)
+      react: 18.3.1
+    dev: false
+
+  /embla-carousel-reactive-utils@8.6.0(embla-carousel@8.6.0):
+    resolution: {integrity: sha512-fMVUDUEx0/uIEDM0Mz3dHznDhfX+znCCDCeIophYb1QGVM7YThSWX+wz11zlYwWFOr74b4QLGg0hrGPJeG2s4A==}
+    peerDependencies:
+      embla-carousel: 8.6.0
+    dependencies:
+      embla-carousel: 8.6.0
+    dev: false
+
+  /embla-carousel@8.6.0:
+    resolution: {integrity: sha512-SjWyZBHJPbqxHOzckOfo8lHisEaJWmwd23XppYFYVh10bU66/Pn5tkVkbkCMZVdbUE5eTCI2nD8OyIP4Z+uwkA==}
+    dev: false
+
   /emoji-regex@8.0.0:
     resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==}
 

From dc1abe83faa7e70f792a4dd9c6a7bd5b92a7e09f Mon Sep 17 00:00:00 2001
From: bicochan <chanii8@naver.com>
Date: Wed, 9 Apr 2025 09:31:12 +0900
Subject: [PATCH 26/38] =?UTF-8?q?refactor:=20next=20image=20'objectFit'=20?=
 =?UTF-8?q?=EC=86=8D=EC=84=B1=20=EC=A0=9C=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/pages/banner/model/banner-table-columns.tsx |  2 +-
 apps/cs/src/pages/banner/ui/banner-form.tsx         |  4 ++--
 .../src/pages/banner/ui/preview-banner-dialog.tsx   | 13 ++++++++-----
 apps/cs/src/pages/image/ui/image-form.tsx           |  4 ++--
 4 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/apps/cs/src/pages/banner/model/banner-table-columns.tsx b/apps/cs/src/pages/banner/model/banner-table-columns.tsx
index 65c8c6e87..9b36a54fc 100644
--- a/apps/cs/src/pages/banner/model/banner-table-columns.tsx
+++ b/apps/cs/src/pages/banner/model/banner-table-columns.tsx
@@ -94,7 +94,7 @@ const BannerImage = ({ atflCd, bnrSn, imageRefs }: BannerImageProps) => {
 
   return (
     <div className="relative flex h-[4rem] w-[16rem] items-center justify-center">
-      <Image src={imageUrl} alt="배너 이미지" fill objectFit="contain" />
+      <Image src={imageUrl} className="object-contain" fill alt="배너 이미지" />
     </div>
   );
 };
diff --git a/apps/cs/src/pages/banner/ui/banner-form.tsx b/apps/cs/src/pages/banner/ui/banner-form.tsx
index 3b439653c..49c9cc6a1 100644
--- a/apps/cs/src/pages/banner/ui/banner-form.tsx
+++ b/apps/cs/src/pages/banner/ui/banner-form.tsx
@@ -155,9 +155,9 @@ function BannerForm({ form, bnrSn, ...props }: BannerFormProps) {
                                     {imageUrl && (
                                       <Image
                                         src={imageUrl}
-                                        alt="업로드된 이미지"
+                                        className="object-contain"
                                         fill
-                                        objectFit="contain"
+                                        alt="업로드된 이미지"
                                       />
                                     )}
                                   </div>
diff --git a/apps/cs/src/pages/banner/ui/preview-banner-dialog.tsx b/apps/cs/src/pages/banner/ui/preview-banner-dialog.tsx
index bdd9e3237..74be653dd 100644
--- a/apps/cs/src/pages/banner/ui/preview-banner-dialog.tsx
+++ b/apps/cs/src/pages/banner/ui/preview-banner-dialog.tsx
@@ -23,7 +23,10 @@ function PreviewBannerDialog({ images }: PreviewBannerDialogProps) {
   return (
     <Dialog>
       <DialogTrigger asChild>
-        <Button disabled={!images.length}>미리보기</Button>
+        <Button color="white" disabled={!images.length}>
+          <i className="diveicon di-display" />
+          미리보기
+        </Button>
       </DialogTrigger>
       <DialogContent className="max-w-[80rem]" aria-describedby={undefined}>
         <DialogHeader>
@@ -32,14 +35,14 @@ function PreviewBannerDialog({ images }: PreviewBannerDialogProps) {
         <div className="mt-4 px-12">
           <Carousel>
             <CarouselContent>
-              {images.map((image, index) => (
-                <CarouselItem key={index} className="basis-1/3">
+              {images.map((image, i) => (
+                <CarouselItem key={`banner-${i}`} className="basis-1/3">
                   <div className="relative flex aspect-video items-center justify-center">
                     <Image
                       src={image}
-                      alt={`배너 이미지 ${index + 1}`}
+                      className="object-contain"
                       fill
-                      objectFit="contain"
+                      alt={`배너 이미지 ${i + 1}`}
                     />
                   </div>
                 </CarouselItem>
diff --git a/apps/cs/src/pages/image/ui/image-form.tsx b/apps/cs/src/pages/image/ui/image-form.tsx
index c3a8cca7a..10c6fee6b 100644
--- a/apps/cs/src/pages/image/ui/image-form.tsx
+++ b/apps/cs/src/pages/image/ui/image-form.tsx
@@ -213,9 +213,9 @@ function ImageForm({ form, imgSn, ...props }: ImageFormProps) {
                                       {imageUrl && (
                                         <Image
                                           src={imageUrl}
-                                          alt="업로드된 이미지"
+                                          className="object-contain"
                                           fill
-                                          objectFit="contain"
+                                          alt="업로드된 이미지"
                                         />
                                       )}
                                     </div>

From ec4b7db2f3e2a7641467b6d921527d17eea19cab Mon Sep 17 00:00:00 2001
From: bicochan <chanii8@naver.com>
Date: Wed, 9 Apr 2025 13:06:44 +0900
Subject: [PATCH 27/38] =?UTF-8?q?feat:=20=ED=85=9C=ED=94=8C=EB=A6=BF=20?=
 =?UTF-8?q?=EA=B4=80=EB=A6=AC=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=83=9D?=
 =?UTF-8?q?=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../app/(with-base-layout)/template/page.tsx  |   2 +
 .../pages/menu/model/board-table-columns.tsx  |  41 +++---
 .../cs/src/pages/site/model/table-columns.tsx |  61 ++++-----
 .../pages/template/api/template-service.ts    |  19 +++
 apps/cs/src/pages/template/index.ts           |   1 +
 .../template/model/template-interface.ts      |  25 ++++
 .../template/model/template-table-columns.tsx |  35 +++++
 .../src/pages/template/ui/template-page.tsx   | 124 ++++++++++++++++++
 apps/cs/src/shared/config/api.ts              |   1 +
 9 files changed, 254 insertions(+), 55 deletions(-)
 create mode 100644 apps/cs/app/(with-base-layout)/template/page.tsx
 create mode 100644 apps/cs/src/pages/template/api/template-service.ts
 create mode 100644 apps/cs/src/pages/template/index.ts
 create mode 100644 apps/cs/src/pages/template/model/template-interface.ts
 create mode 100644 apps/cs/src/pages/template/model/template-table-columns.tsx
 create mode 100644 apps/cs/src/pages/template/ui/template-page.tsx

diff --git a/apps/cs/app/(with-base-layout)/template/page.tsx b/apps/cs/app/(with-base-layout)/template/page.tsx
new file mode 100644
index 000000000..f5eab5953
--- /dev/null
+++ b/apps/cs/app/(with-base-layout)/template/page.tsx
@@ -0,0 +1,2 @@
+import { TemplatePage } from "@/pages/template";
+export default TemplatePage;
diff --git a/apps/cs/src/pages/menu/model/board-table-columns.tsx b/apps/cs/src/pages/menu/model/board-table-columns.tsx
index f144ac158..4cdf29498 100644
--- a/apps/cs/src/pages/menu/model/board-table-columns.tsx
+++ b/apps/cs/src/pages/menu/model/board-table-columns.tsx
@@ -1,31 +1,30 @@
-import { createColumnHelper } from "@tanstack/react-table";
+import type { ColumnDef } from "@tanstack/react-table";
 import { Checkbox } from "@common/components/ui";
 import type { BoardPopup } from "@/entities/board";
 
-const columnHelper = createColumnHelper<BoardPopup>();
-
-const columns = [
-  columnHelper.accessor((_, index) => index + 1, {
+export const columns: ColumnDef<BoardPopup>[] = [
+  {
     id: "no",
     header: "NO",
-  }),
-  columnHelper.accessor("bbsNm", {
-    id: "bbsNm",
+    cell: ({ row }) => row.index + 1,
+  },
+  {
+    accessorKey: "bbsNm",
     header: "게시판명",
-  }),
-  columnHelper.accessor("bbsTypeNm", {
-    id: "bbsTypeNm",
+  },
+  {
+    accessorKey: "bbsTypeNm",
     header: "게시판유형",
-  }),
-  columnHelper.accessor("regDt", {
-    id: "regDt",
+  },
+  {
+    accessorKey: "regDt",
     header: "최초생성일",
-  }),
-  columnHelper.accessor("pstCnt", {
-    id: "pstCnt",
+  },
+  {
+    accessorKey: "pstCnt",
     header: "게시물건수",
-  }),
-  columnHelper.display({
+  },
+  {
     id: "select",
     header: "선택",
     cell: ({ row }) => {
@@ -37,7 +36,5 @@ const columns = [
         />
       );
     },
-  }),
+  },
 ];
-
-export { columns };
diff --git a/apps/cs/src/pages/site/model/table-columns.tsx b/apps/cs/src/pages/site/model/table-columns.tsx
index 8a2d852cd..c5da01880 100644
--- a/apps/cs/src/pages/site/model/table-columns.tsx
+++ b/apps/cs/src/pages/site/model/table-columns.tsx
@@ -1,48 +1,43 @@
 import dayjs from "dayjs";
-import { createColumnHelper } from "@tanstack/react-table";
+import { type ColumnDef } from "@tanstack/react-table";
 import type { Site } from "@/entities/site";
 
-const columnHelper = createColumnHelper<Site>();
-
-const columns = [
-  columnHelper.accessor((_, index) => index + 1, {
+export const columns: ColumnDef<Site>[] = [
+  {
     id: "no",
     header: "NO",
-  }),
-  columnHelper.accessor("siteId", {
-    id: "siteId",
+    cell: ({ row }) => row.index + 1,
+  },
+  {
+    accessorKey: "siteId",
     header: "사이트코드",
-  }),
-  columnHelper.accessor("siteNm", {
-    id: "siteNm",
+  },
+  {
+    accessorKey: "siteNm",
     header: "사이트명",
-  }),
-  columnHelper.accessor("dmnAddr", {
-    id: "dmnAddr",
+  },
+  {
+    accessorKey: "dmnAddr",
     header: "대표 URL",
-  }),
-  columnHelper.accessor("bscSiteYn", {
-    id: "bscSiteYn",
+  },
+  {
+    accessorKey: "bscSiteYn",
     header: "기본 사이트 여부",
-    cell: (info) => (info.getValue() ? "Y" : "N"),
-  }),
-  columnHelper.accessor("useYn", {
-    id: "useYn",
+  },
+  {
+    accessorKey: "useYn",
     header: "사용 여부",
-    cell: (info) => (info.getValue() ? "Y" : "N"),
-  }),
-  columnHelper.accessor("rgTrNm", {
-    id: "rgTrNm",
+  },
+  {
+    accessorKey: "rgTrNm",
     header: "등록자",
-  }),
-  columnHelper.accessor("regDt", {
-    id: "regDt",
+  },
+  {
+    accessorKey: "regDt",
     header: "등록일",
-    cell: (info) => {
-      const date = dayjs(info.getValue());
+    cell: ({ row }) => {
+      const date = dayjs(row.original.regDt);
       return date.format("YYYY-MM-DD");
     },
-  }),
+  },
 ];
-
-export { columns };
diff --git a/apps/cs/src/pages/template/api/template-service.ts b/apps/cs/src/pages/template/api/template-service.ts
new file mode 100644
index 000000000..d59447875
--- /dev/null
+++ b/apps/cs/src/pages/template/api/template-service.ts
@@ -0,0 +1,19 @@
+import { client } from "@/shared/api";
+import { ENDPOINT } from "@/shared/config";
+import type {
+  TemplateService,
+  TemplateList,
+  TemplateParams,
+} from "../model/template-interface";
+
+export class TemplateApiService implements TemplateService {
+  public async getTemplateList(params?: TemplateParams): Promise<TemplateList> {
+    const response = await client.get<TemplateList>(
+      `${ENDPOINT.CMS_SERVICE.TEMPLATE}`,
+      { params },
+    );
+    return response.data;
+  }
+}
+
+export const TemplateApi = new TemplateApiService();
diff --git a/apps/cs/src/pages/template/index.ts b/apps/cs/src/pages/template/index.ts
new file mode 100644
index 000000000..d6935f34f
--- /dev/null
+++ b/apps/cs/src/pages/template/index.ts
@@ -0,0 +1 @@
+export { TemplatePage } from "./ui/template-page";
diff --git a/apps/cs/src/pages/template/model/template-interface.ts b/apps/cs/src/pages/template/model/template-interface.ts
new file mode 100644
index 000000000..dfc0db485
--- /dev/null
+++ b/apps/cs/src/pages/template/model/template-interface.ts
@@ -0,0 +1,25 @@
+import type { PageableParams, PageableList } from "@/shared/model";
+
+export interface TemplateParams extends PageableParams {
+  keywordType?: string;
+  keyword?: string;
+  tmpltSeCd?: string;
+  useYn?: string;
+}
+
+export interface Template {
+  tmpltSn: number;
+  tmpltNm: string;
+  tmpltSeCd: string;
+  tmpltSeNm: string;
+  useYn: string;
+  mdfcnDt: string;
+  mdfr: string;
+  mdfrNm: string;
+}
+
+export type TemplateList = PageableList<Template>;
+
+export interface TemplateService {
+  getTemplateList(params: TemplateParams): Promise<TemplateList>;
+}
diff --git a/apps/cs/src/pages/template/model/template-table-columns.tsx b/apps/cs/src/pages/template/model/template-table-columns.tsx
new file mode 100644
index 000000000..4407469d7
--- /dev/null
+++ b/apps/cs/src/pages/template/model/template-table-columns.tsx
@@ -0,0 +1,35 @@
+import type { ColumnDef } from "@tanstack/react-table";
+import type { Template } from "./template-interface";
+import dayjs from "dayjs";
+
+export const columns: ColumnDef<Template>[] = [
+  {
+    id: "no",
+    header: "NO",
+    cell: ({ row }) => row.index + 1,
+  },
+  {
+    accessorKey: "tmpltNm",
+    header: "템플릿명",
+  },
+  {
+    accessorKey: "tmpltSeNm",
+    header: "템플릿분류",
+  },
+  {
+    accessorKey: "useYn",
+    header: "사용여부",
+  },
+  {
+    accessorKey: "mdfrNm",
+    header: "최종수정자",
+  },
+  {
+    accessorKey: "mdfcnDt",
+    header: "최종수정일",
+    cell: ({ row }) => {
+      const date = row.getValue("mdfcnDt") as string;
+      return date ? dayjs(date).format("YYYY-MM-DD") : "";
+    },
+  },
+];
diff --git a/apps/cs/src/pages/template/ui/template-page.tsx b/apps/cs/src/pages/template/ui/template-page.tsx
new file mode 100644
index 000000000..dbd96b56b
--- /dev/null
+++ b/apps/cs/src/pages/template/ui/template-page.tsx
@@ -0,0 +1,124 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { useEffect, useState } from "react";
+import { keepPreviousData, useQuery } from "@tanstack/react-query";
+import {
+  getCoreRowModel,
+  useReactTable,
+  type PaginationState,
+} from "@tanstack/react-table";
+import { Button, DataTable, Input, Label } from "@common/components";
+import { CodeSelect } from "@/entities/code/ui/code-select";
+import { ENDPOINT } from "@/shared/config";
+import { TemplateApi } from "../api/template-service";
+import { columns } from "../model/template-table-columns";
+import type { Template } from "../model/template-interface";
+
+function TemplatePage() {
+  const router = useRouter();
+
+  const [templateQuery, setTemplateQuery] = useState({
+    tmpltSeCd: "",
+    keyword: "",
+  });
+  const [pagination, setPagination] = useState<PaginationState>({
+    pageIndex: 0,
+    pageSize: 5,
+  });
+
+  const { data: templateList, refetch } = useQuery({
+    queryKey: [ENDPOINT.CMS_SERVICE.TEMPLATE],
+    queryFn: () =>
+      TemplateApi.getTemplateList({
+        ...templateQuery,
+        page: pagination.pageIndex,
+        size: pagination.pageSize,
+      }),
+    placeholderData: keepPreviousData,
+    enabled: false,
+  });
+
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    refetch();
+  };
+
+  const handleRowClick = (row: Template) => {
+    router.push(`/template/register/${row.tmpltSn}`);
+  };
+
+  const table = useReactTable({
+    data: templateList?.content ?? [],
+    columns,
+    rowCount: templateList?.totalElements ?? 0,
+    state: {
+      pagination,
+    },
+    onPaginationChange: setPagination,
+    getCoreRowModel: getCoreRowModel(),
+    manualPagination: true,
+  });
+
+  useEffect(() => {
+    refetch();
+  }, []);
+
+  useEffect(() => {
+    refetch();
+  }, [pagination]);
+
+  return (
+    <div className="card card-border !mt-6">
+      <div className="card card-border">
+        <form onSubmit={handleSubmit} className="flex gap-2 p-2">
+          <div className="flex space-x-6">
+            <div className="flex items-center gap-2">
+              <Label htmlFor="" className="text-label">
+                템플릿분류
+              </Label>
+              <CodeSelect
+                upCd="TMPLTCLCD"
+                value={templateQuery.tmpltSeCd}
+                onValueChange={(value) =>
+                  setTemplateQuery({ ...templateQuery, tmpltSeCd: value })
+                }
+              />
+            </div>
+            <div className="flex items-center gap-2">
+              <Label htmlFor="" className="text-label">
+                템플릿명
+              </Label>
+              <Input
+                className="h-[3.2rem] w-[24rem] rounded-sm !text-[1.3rem]"
+                value={templateQuery.keyword}
+                onChange={(e) =>
+                  setTemplateQuery({
+                    ...templateQuery,
+                    keyword: e.target.value,
+                  })
+                }
+              />
+            </div>
+          </div>
+          <Button className="h-[3.2rem]" type="submit">
+            조회
+          </Button>
+        </form>
+      </div>
+      <div className="card card-border">
+        <div className="card-header">
+          <h3 className="text-2xl font-medium text-label">템플릿 목록</h3>
+          <Button onClick={() => router.push("/template/register")}>
+            등록
+          </Button>
+        </div>
+        <div className="card !m-[1.2rem] h-[29.2rem] overflow-auto !p-0">
+          <DataTable table={table} onRowClick={handleRowClick} viewPagination />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export { TemplatePage };
diff --git a/apps/cs/src/shared/config/api.ts b/apps/cs/src/shared/config/api.ts
index fa4332dd4..4f1d5605c 100644
--- a/apps/cs/src/shared/config/api.ts
+++ b/apps/cs/src/shared/config/api.ts
@@ -25,6 +25,7 @@ export const ENDPOINT = {
     USER_ORGANIZATION: "/cms-service/api/v1/user-ognz",
     IMAGES: "/cms-service/api/v1/images",
     BANNERS: "/cms-service/api/v1/bnrs",
+    TEMPLATE: "/cms-service/api/v1/tmplt",
   },
   BOARD_SERVICE: {
     BBS: "/board-service/api/v1/bbs",

From 52343926d3d087e7ad887ec8c7688c1b85af6282 Mon Sep 17 00:00:00 2001
From: bicochan <chanii8@naver.com>
Date: Wed, 9 Apr 2025 15:52:29 +0900
Subject: [PATCH 28/38] =?UTF-8?q?feat:=20=ED=85=9C=ED=94=8C=EB=A6=BF=20?=
 =?UTF-8?q?=EA=B4=80=EB=A6=AC=20=ED=8F=BC=20=EC=9E=91=EC=97=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/cs/.env.local                            |   2 -
 apps/cs/.gitignore                            |   2 +
 .../template/register/page.tsx                |   2 +
 apps/cs/package.json                          |   1 +
 .../pages/template/api/template-service.ts    |   9 ++
 apps/cs/src/pages/template/index.ts           |   1 +
 .../template/model/template-interface.ts      |  11 +-
 apps/cs/src/pages/template/ui/create-page.tsx |  42 ++++++
 .../src/pages/template/ui/template-form.tsx   | 134 ++++++++++++++++++
 apps/cs/src/shared/ui/editor.tsx              |  19 +++
 pnpm-lock.yaml                                |  28 +++-
 11 files changed, 243 insertions(+), 8 deletions(-)
 delete mode 100644 apps/cs/.env.local
 create mode 100644 apps/cs/app/(with-base-layout)/template/register/page.tsx
 create mode 100644 apps/cs/src/pages/template/ui/create-page.tsx
 create mode 100644 apps/cs/src/pages/template/ui/template-form.tsx
 create mode 100644 apps/cs/src/shared/ui/editor.tsx

diff --git a/apps/cs/.env.local b/apps/cs/.env.local
deleted file mode 100644
index 0648024ff..000000000
--- a/apps/cs/.env.local
+++ /dev/null
@@ -1,2 +0,0 @@
-NEXT_PUBLIC_PORT=3000
-NEXT_PUBLIC_SERVER_API_URL=http://192.168.0.102:8000
diff --git a/apps/cs/.gitignore b/apps/cs/.gitignore
index 5340dd9a1..e8d8437ee 100644
--- a/apps/cs/.gitignore
+++ b/apps/cs/.gitignore
@@ -36,3 +36,5 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+.env*
\ No newline at end of file
diff --git a/apps/cs/app/(with-base-layout)/template/register/page.tsx b/apps/cs/app/(with-base-layout)/template/register/page.tsx
new file mode 100644
index 000000000..9be3f975a
--- /dev/null
+++ b/apps/cs/app/(with-base-layout)/template/register/page.tsx
@@ -0,0 +1,2 @@
+import { CreatePage } from "@/pages/template";
+export default CreatePage;
diff --git a/apps/cs/package.json b/apps/cs/package.json
index 38d378299..1a8f88c44 100644
--- a/apps/cs/package.json
+++ b/apps/cs/package.json
@@ -18,6 +18,7 @@
     "@radix-ui/react-slot": "^1.1.2",
     "@tanstack/react-query": "^5.67.1",
     "@tanstack/react-table": "^8.21.2",
+    "@tinymce/tinymce-react": "^6.1.0",
     "axios": "^1.8.1",
     "chart.js": "^4.4.8",
     "dayjs": "^1.11.13",
diff --git a/apps/cs/src/pages/template/api/template-service.ts b/apps/cs/src/pages/template/api/template-service.ts
index d59447875..6f2d1f73a 100644
--- a/apps/cs/src/pages/template/api/template-service.ts
+++ b/apps/cs/src/pages/template/api/template-service.ts
@@ -4,6 +4,7 @@ import type {
   TemplateService,
   TemplateList,
   TemplateParams,
+  TemplateFormData,
 } from "../model/template-interface";
 
 export class TemplateApiService implements TemplateService {
@@ -14,6 +15,14 @@ export class TemplateApiService implements TemplateService {
     );
     return response.data;
   }
+
+  public async createTemplate(data: TemplateFormData): Promise<void> {
+    const response = await client.post<void>(
+      `${ENDPOINT.CMS_SERVICE.TEMPLATE}`,
+      data,
+    );
+    return response.data;
+  }
 }
 
 export const TemplateApi = new TemplateApiService();
diff --git a/apps/cs/src/pages/template/index.ts b/apps/cs/src/pages/template/index.ts
index d6935f34f..220fd50c6 100644
--- a/apps/cs/src/pages/template/index.ts
+++ b/apps/cs/src/pages/template/index.ts
@@ -1 +1,2 @@
+export { CreatePage } from "./ui/create-page";
 export { TemplatePage } from "./ui/template-page";
diff --git a/apps/cs/src/pages/template/model/template-interface.ts b/apps/cs/src/pages/template/model/template-interface.ts
index dfc0db485..306fe8197 100644
--- a/apps/cs/src/pages/template/model/template-interface.ts
+++ b/apps/cs/src/pages/template/model/template-interface.ts
@@ -1,3 +1,4 @@
+import { z } from "zod";
 import type { PageableParams, PageableList } from "@/shared/model";
 
 export interface TemplateParams extends PageableParams {
@@ -18,8 +19,16 @@ export interface Template {
   mdfrNm: string;
 }
 
-export type TemplateList = PageableList<Template>;
+export const templateFormSchema = z.object({
+  tmpltNm: z.string(),
+  tmpltCn: z.string(),
+  tmpltSeCd: z.string(),
+  useYn: z.string(),
+});
 
+export type TemplateList = PageableList<Template>;
+export type TemplateFormData = z.infer<typeof templateFormSchema>;
 export interface TemplateService {
   getTemplateList(params: TemplateParams): Promise<TemplateList>;
+  createTemplate(data: TemplateFormData): Promise<void>;
 }
diff --git a/apps/cs/src/pages/template/ui/create-page.tsx b/apps/cs/src/pages/template/ui/create-page.tsx
new file mode 100644
index 000000000..8057ddd00
--- /dev/null
+++ b/apps/cs/src/pages/template/ui/create-page.tsx
@@ -0,0 +1,42 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { useForm } from "react-hook-form";
+import { useMutation } from "@tanstack/react-query";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { TemplateApi } from "../api/template-service";
+import {
+  templateFormSchema,
+  type TemplateFormData,
+} from "../model/template-interface";
+import { useAlertStore } from "@/shared/lib/use-alert-store";
+import { TemplateForm } from "./template-form";
+
+function CreatePage() {
+  const router = useRouter();
+  const { setMessage: alert } = useAlertStore((state) => state);
+  const { mutateAsync: createTemplate } = useMutation({
+    mutationFn: (data: TemplateFormData) => TemplateApi.createTemplate(data),
+    onSuccess: () => {
+      alert("등록되었습니다.", router.back);
+    },
+  });
+
+  const form = useForm<TemplateFormData>({
+    resolver: zodResolver(templateFormSchema),
+    defaultValues: {
+      useYn: "Y",
+    },
+  });
+
+  return (
+    <div className="card card-border !mb-0 !mt-6">
+      <div className="card-header">
+        <h3 className="text-2xl font-medium text-label">템플릿 등록</h3>
+      </div>
+      <TemplateForm form={form} handleSave={createTemplate} />
+    </div>
+  );
+}
+
+export { CreatePage };
diff --git a/apps/cs/src/pages/template/ui/template-form.tsx b/apps/cs/src/pages/template/ui/template-form.tsx
new file mode 100644
index 000000000..07f18186d
--- /dev/null
+++ b/apps/cs/src/pages/template/ui/template-form.tsx
@@ -0,0 +1,134 @@
+import dynamic from "next/dynamic";
+import { type UseFormReturn } from "react-hook-form";
+import {
+  Input,
+  Label,
+  RadioGroup,
+  RadioGroupItem,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableRow,
+} from "@common/components";
+import { FormWrapper } from "@/widgets/form-wrapper";
+import { CodeSelect } from "@/entities/code";
+import { FormItem, FormControl, FormField } from "@/shared/ui/form";
+import type { TemplateFormData } from "../model/template-interface";
+
+const Editor = dynamic(
+  () => import("@/shared/ui/editor").then((module) => module.Editor),
+  { ssr: false },
+);
+
+interface TemplateFormProps {
+  form: UseFormReturn<TemplateFormData>;
+  tmpltSn?: number;
+  handleSave: (data: TemplateFormData) => Promise<void>;
+  handleDelete?: () => Promise<void>;
+}
+
+function TemplateForm({ form, tmpltSn, ...props }: TemplateFormProps) {
+  return (
+    <FormWrapper form={form} isModifyMode={!!tmpltSn} {...props}>
+      <div className="card">
+        <Table variant="secondary">
+          <colgroup>
+            <col width="20%" />
+            <col width="80%" />
+          </colgroup>
+          <TableBody>
+            <TableRow>
+              <TableHead>템플릿 구분</TableHead>
+              <TableCell className="border">
+                <FormField
+                  control={form.control}
+                  name="tmpltSeCd"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormControl>
+                        <CodeSelect
+                          {...field}
+                          upCd="TMPLTCLCD"
+                          onValueChange={field.onChange}
+                        />
+                      </FormControl>
+                    </FormItem>
+                  )}
+                />
+              </TableCell>
+            </TableRow>
+            <TableRow>
+              <TableHead>템플릿명</TableHead>
+              <TableCell className="border">
+                <FormField
+                  control={form.control}
+                  name="tmpltNm"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormControl>
+                        <Input
+                          {...field}
+                          value={field.value ?? ""}
+                          className="!text-[1.3rem]"
+                          placeholder="템플릿명을 입력하십시오."
+                        />
+                      </FormControl>
+                    </FormItem>
+                  )}
+                />
+              </TableCell>
+            </TableRow>
+            <TableRow>
+              <TableHead>템플릿 내용</TableHead>
+              <TableCell className="border">
+                <FormField
+                  control={form.control}
+                  name="tmpltCn"
+                  render={() => (
+                    <FormItem>
+                      <FormControl>
+                        <Editor />
+                      </FormControl>
+                    </FormItem>
+                  )}
+                />
+              </TableCell>
+            </TableRow>
+            <TableRow>
+              <TableHead>사용 여부</TableHead>
+              <TableCell className="border">
+                <FormField
+                  control={form.control}
+                  name="useYn"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormControl>
+                        <RadioGroup
+                          {...field}
+                          name="useYn"
+                          onValueChange={field.onChange}
+                        >
+                          <div className="flex items-center space-x-2">
+                            <RadioGroupItem value="Y" id="useY" />
+                            <Label htmlFor="useY">사용</Label>
+                          </div>
+                          <div className="flex items-center space-x-2">
+                            <RadioGroupItem value="N" id="useN" />
+                            <Label htmlFor="useN">사용안함</Label>
+                          </div>
+                        </RadioGroup>
+                      </FormControl>
+                    </FormItem>
+                  )}
+                />
+              </TableCell>
+            </TableRow>
+          </TableBody>
+        </Table>
+      </div>
+    </FormWrapper>
+  );
+}
+
+export { TemplateForm };
diff --git a/apps/cs/src/shared/ui/editor.tsx b/apps/cs/src/shared/ui/editor.tsx
new file mode 100644
index 000000000..731b13f46
--- /dev/null
+++ b/apps/cs/src/shared/ui/editor.tsx
@@ -0,0 +1,19 @@
+import { Editor as TinyEditor } from "@tinymce/tinymce-react";
+
+const Editor = () => {
+  return (
+    <TinyEditor
+      apiKey={process.env.NEXT_PUBLIC_TINY_API_KEY}
+      init={{
+        language: "ko_KR",
+        height: 500,
+        menubar: false,
+        plugins: "lists advlist table",
+        toolbar:
+          "undo redo | blocks fontfamily fontsize | bold italic underline strikethrough forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist blockquote | table",
+      }}
+    />
+  );
+};
+
+export { Editor };
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index f22abbbfc..69ed7d939 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -66,6 +66,9 @@ importers:
       '@tanstack/react-table':
         specifier: ^8.21.2
         version: 8.21.2(react-dom@18.3.1)(react@18.3.1)
+      '@tinymce/tinymce-react':
+        specifier: ^6.1.0
+        version: 6.1.0(react-dom@18.3.1)(react@18.3.1)
       axios:
         specifier: ^1.8.1
         version: 1.8.1
@@ -1632,7 +1635,7 @@ packages:
       magic-string: 0.27.0
       react-docgen-typescript: 2.2.2(typescript@5.6.3)
       typescript: 5.6.3
-      vite: 6.2.0(@types/node@22.13.5)
+      vite: 6.2.0(@types/node@22.13.9)
     dev: true
 
   /@jridgewell/gen-mapping@0.3.8:
@@ -3097,7 +3100,7 @@ packages:
       browser-assert: 1.2.1
       storybook: 8.6.0(prettier@3.5.2)
       ts-dedent: 2.2.0
-      vite: 6.2.0(@types/node@22.13.5)
+      vite: 6.2.0(@types/node@22.13.9)
     dev: true
 
   /@storybook/components@8.6.0(storybook@8.6.0):
@@ -3229,7 +3232,7 @@ packages:
       resolve: 1.22.10
       storybook: 8.6.0(prettier@3.5.2)
       tsconfig-paths: 4.2.0
-      vite: 6.2.0(@types/node@22.13.5)
+      vite: 6.2.0(@types/node@22.13.9)
     transitivePeerDependencies:
       - rollup
       - supports-color
@@ -3363,6 +3366,21 @@ packages:
       '@testing-library/dom': 10.4.0
     dev: true
 
+  /@tinymce/tinymce-react@6.1.0(react-dom@18.3.1)(react@18.3.1):
+    resolution: {integrity: sha512-K0MP3yYVKe8+etUwsg6zyRq+q9TGLaVf005WiBHiB8JZEomAwbBPERGunhU9uOqNQ5gJs8yVOPZ68Xcd1UHclA==}
+    peerDependencies:
+      react: ^18.3.1
+      react-dom: ^18.3.1
+      tinymce: ^7.0.0 || ^6.0.0 || ^5.5.1
+    peerDependenciesMeta:
+      tinymce:
+        optional: true
+    dependencies:
+      prop-types: 15.8.1
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    dev: false
+
   /@types/aria-query@5.0.4:
     resolution: {integrity: sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==}
     dev: true
@@ -3675,7 +3693,7 @@ packages:
       '@babel/plugin-transform-react-jsx-source': 7.25.9(@babel/core@7.26.9)
       '@types/babel__core': 7.20.5
       react-refresh: 0.14.2
-      vite: 6.2.0(@types/node@22.13.5)
+      vite: 6.2.0(@types/node@22.13.9)
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -8474,7 +8492,7 @@ packages:
       debug: 4.4.0
       globrex: 0.1.2
       tsconfck: 3.1.5(typescript@5.6.3)
-      vite: 6.2.0(@types/node@22.13.5)
+      vite: 6.2.0(@types/node@22.13.9)
     transitivePeerDependencies:
       - supports-color
       - typescript

From 33219d03bcbc02465b9de616143e1ac3bce53663 Mon Sep 17 00:00:00 2001
From: bicochan <chanii8@naver.com>
Date: Wed, 9 Apr 2025 16:03:10 +0900
Subject: [PATCH 29/38] rename: serial -> sequential

---
 .../banner/register/[sequential]/page.tsx     | 10 ++++++++++
 .../banner/register/[serial]/page.tsx         | 10 ----------
 .../image/register/[sequential]/page.tsx      | 10 ++++++++++
 .../image/register/[serial]/page.tsx          | 10 ----------
 apps/cs/src/pages/banner/ui/modify-page.tsx   | 20 ++++++++++---------
 apps/cs/src/pages/image/ui/modify-page.tsx    | 19 +++++++++---------
 6 files changed, 41 insertions(+), 38 deletions(-)
 create mode 100644 apps/cs/app/(with-base-layout)/banner/register/[sequential]/page.tsx
 delete mode 100644 apps/cs/app/(with-base-layout)/banner/register/[serial]/page.tsx
 create mode 100644 apps/cs/app/(with-base-layout)/image/register/[sequential]/page.tsx
 delete mode 100644 apps/cs/app/(with-base-layout)/image/register/[serial]/page.tsx

diff --git a/apps/cs/app/(with-base-layout)/banner/register/[sequential]/page.tsx b/apps/cs/app/(with-base-layout)/banner/register/[sequential]/page.tsx
new file mode 100644
index 000000000..bc19150cb
--- /dev/null
+++ b/apps/cs/app/(with-base-layout)/banner/register/[sequential]/page.tsx
@@ -0,0 +1,10 @@
+import { ModifyPage as VModifyPage } from "@/pages/banner";
+
+export default async function ModifyPage({
+  params,
+}: {
+  params: Promise<{ sequential: string }>;
+}) {
+  const { sequential } = await params;
+  return <VModifyPage sequential={sequential} />;
+}
diff --git a/apps/cs/app/(with-base-layout)/banner/register/[serial]/page.tsx b/apps/cs/app/(with-base-layout)/banner/register/[serial]/page.tsx
deleted file mode 100644
index b8ecbbcc8..000000000
--- a/apps/cs/app/(with-base-layout)/banner/register/[serial]/page.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import { ModifyPage as VModifyPage } from "@/pages/banner";
-
-export default async function ModifyPage({
-  params,
-}: {
-  params: Promise<{ serial: string }>;
-}) {
-  const { serial } = await params;
-  return <VModifyPage serial={serial} />;
-}
diff --git a/apps/cs/app/(with-base-layout)/image/register/[sequential]/page.tsx b/apps/cs/app/(with-base-layout)/image/register/[sequential]/page.tsx
new file mode 100644
index 000000000..800f0b382
--- /dev/null
+++ b/apps/cs/app/(with-base-layout)/image/register/[sequential]/page.tsx
@@ -0,0 +1,10 @@
+import { ModifyPage as VModifyPage } from "@/pages/image";
+
+export default async function ModifyPage({
+  params,
+}: {
+  params: Promise<{ sequential: string }>;
+}) {
+  const { sequential } = await params;
+  return <VModifyPage sequential={sequential} />;
+}
diff --git a/apps/cs/app/(with-base-layout)/image/register/[serial]/page.tsx b/apps/cs/app/(with-base-layout)/image/register/[serial]/page.tsx
deleted file mode 100644
index 8df89b17a..000000000
--- a/apps/cs/app/(with-base-layout)/image/register/[serial]/page.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import { ModifyPage as VModifyPage } from "@/pages/image";
-
-export default async function ModifyPage({
-  params,
-}: {
-  params: Promise<{ serial: string }>;
-}) {
-  const { serial } = await params;
-  return <VModifyPage serial={serial} />;
-}
diff --git a/apps/cs/src/pages/banner/ui/modify-page.tsx b/apps/cs/src/pages/banner/ui/modify-page.tsx
index 38c43ebe5..5b87ce1c0 100644
--- a/apps/cs/src/pages/banner/ui/modify-page.tsx
+++ b/apps/cs/src/pages/banner/ui/modify-page.tsx
@@ -24,7 +24,7 @@ import { columns } from "../model/posting-table-columns";
 import { BannerApi } from "../api/banner-service";
 import { BannerForm } from "./banner-form";
 
-function ModifyPage({ serial }: { serial: string }) {
+function ModifyPage({ sequential }: { sequential: string }) {
   const router = useRouter();
   const { confirm } = useConfirm();
   const queryClient = useQueryClient();
@@ -34,24 +34,26 @@ function ModifyPage({ serial }: { serial: string }) {
   const [rowSelection, setRowSelection] = useState<RowSelectionState>({});
 
   const { data: bannerDetail } = useQuery({
-    queryKey: [ENDPOINT.CMS_SERVICE.BANNERS, serial],
-    queryFn: () => BannerApi.getBannerInfo(serial),
+    queryKey: [ENDPOINT.CMS_SERVICE.BANNERS, sequential],
+    queryFn: () => BannerApi.getBannerInfo(sequential),
   });
 
   const { data: postHistory } = useQuery({
-    queryKey: [ENDPOINT.CMS_SERVICE.POSTINGS, serial],
-    queryFn: () => PostingApi.getPostingHistory({ pstgTrgtNo: Number(serial) }),
+    queryKey: [ENDPOINT.CMS_SERVICE.POSTINGS, sequential],
+    queryFn: () =>
+      PostingApi.getPostingHistory({ pstgTrgtNo: Number(sequential) }),
   });
 
   const { mutateAsync: updateBanner } = useMutation({
-    mutationFn: (data: BannerFormData) => BannerApi.updateBanner(serial, data),
+    mutationFn: (data: BannerFormData) =>
+      BannerApi.updateBanner(sequential, data),
     onSuccess: () => {
       alert("수정되었습니다.");
     },
   });
 
   const { mutateAsync: deleteBanner } = useMutation({
-    mutationFn: () => BannerApi.deleteBanner(serial),
+    mutationFn: () => BannerApi.deleteBanner(sequential),
     onSuccess: () => {
       alert("삭제되었습니다.", router.back);
     },
@@ -61,7 +63,7 @@ function ModifyPage({ serial }: { serial: string }) {
     mutationFn: (data: WithModePost[]) => PostingApi.requestPosting(data),
     onSuccess: () => {
       queryClient.invalidateQueries({
-        queryKey: [ENDPOINT.CMS_SERVICE.POSTINGS, serial],
+        queryKey: [ENDPOINT.CMS_SERVICE.POSTINGS, sequential],
       });
     },
   });
@@ -106,7 +108,7 @@ function ModifyPage({ serial }: { serial: string }) {
           </div>
           <BannerForm
             form={form}
-            bnrSn={serial}
+            bnrSn={sequential}
             handleSave={updateBanner}
             handleDelete={deleteBanner}
           />
diff --git a/apps/cs/src/pages/image/ui/modify-page.tsx b/apps/cs/src/pages/image/ui/modify-page.tsx
index fe7e19e51..0945a292b 100644
--- a/apps/cs/src/pages/image/ui/modify-page.tsx
+++ b/apps/cs/src/pages/image/ui/modify-page.tsx
@@ -21,7 +21,7 @@ import { columns } from "../model/posting-table-columns";
 import { ImageApi } from "../api/image-service";
 import { ImageForm } from "./image-form";
 
-function ModifyPage({ serial }: { serial: string }) {
+function ModifyPage({ sequential }: { sequential: string }) {
   const router = useRouter();
   const { confirm } = useConfirm();
   const queryClient = useQueryClient();
@@ -31,24 +31,25 @@ function ModifyPage({ serial }: { serial: string }) {
   const [rowSelection, setRowSelection] = useState<RowSelectionState>({});
 
   const { data: imageDetail } = useQuery({
-    queryKey: [ENDPOINT.CMS_SERVICE.IMAGES, serial],
-    queryFn: () => ImageApi.getImageInfo(serial),
+    queryKey: [ENDPOINT.CMS_SERVICE.IMAGES, sequential],
+    queryFn: () => ImageApi.getImageInfo(sequential),
   });
 
   const { data: postHistory } = useQuery({
-    queryKey: [ENDPOINT.CMS_SERVICE.POSTINGS, serial],
-    queryFn: () => PostingApi.getPostingHistory({ pstgTrgtNo: Number(serial) }),
+    queryKey: [ENDPOINT.CMS_SERVICE.POSTINGS, sequential],
+    queryFn: () =>
+      PostingApi.getPostingHistory({ pstgTrgtNo: Number(sequential) }),
   });
 
   const { mutateAsync: updateImage } = useMutation({
-    mutationFn: (data: ImageFormData) => ImageApi.updateImage(serial, data),
+    mutationFn: (data: ImageFormData) => ImageApi.updateImage(sequential, data),
     onSuccess: () => {
       alert("수정되었습니다.");
     },
   });
 
   const { mutateAsync: deleteImage } = useMutation({
-    mutationFn: () => ImageApi.deleteImage(serial),
+    mutationFn: () => ImageApi.deleteImage(sequential),
     onSuccess: () => {
       alert("삭제되었습니다.", router.back);
     },
@@ -58,7 +59,7 @@ function ModifyPage({ serial }: { serial: string }) {
     mutationFn: (data: WithModePost[]) => PostingApi.requestPosting(data),
     onSuccess: () => {
       queryClient.invalidateQueries({
-        queryKey: [ENDPOINT.CMS_SERVICE.POSTINGS, serial],
+        queryKey: [ENDPOINT.CMS_SERVICE.POSTINGS, sequential],
       });
     },
   });
@@ -103,7 +104,7 @@ function ModifyPage({ serial }: { serial: string }) {
           </div>
           <ImageForm
             form={form}
-            imgSn={serial}
+            imgSn={sequential}
             handleSave={updateImage}
             handleDelete={deleteImage}
           />

From d5bc4c30f2cdfca72c4131c1b66017522cab48ff Mon Sep 17 00:00:00 2001
From: bicochan <chanii8@naver.com>
Date: Wed, 9 Apr 2025 16:32:03 +0900
Subject: [PATCH 30/38] rename: requestPosting -> savePosting

---
 apps/cs/src/entities/posting/api/posting-service.ts     | 2 +-
 apps/cs/src/entities/posting/model/posting-interface.ts | 2 +-
 apps/cs/src/entities/posting/ui/posting-dialog.tsx      | 6 +++---
 apps/cs/src/pages/banner/ui/modify-page.tsx             | 6 +++---
 apps/cs/src/pages/image/ui/modify-page.tsx              | 6 +++---
 5 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/apps/cs/src/entities/posting/api/posting-service.ts b/apps/cs/src/entities/posting/api/posting-service.ts
index 24a6126f9..269a967a2 100644
--- a/apps/cs/src/entities/posting/api/posting-service.ts
+++ b/apps/cs/src/entities/posting/api/posting-service.ts
@@ -19,7 +19,7 @@ export class PostingApiService implements PostService {
     return response.data;
   }
 
-  public async requestPosting(data: WithModePost[]): Promise<Post[]> {
+  public async savePosting(data: WithModePost[]): Promise<Post[]> {
     const response = await client.post<Post[]>(
       `${ENDPOINT.CMS_SERVICE.POSTINGS}`,
       data,
diff --git a/apps/cs/src/entities/posting/model/posting-interface.ts b/apps/cs/src/entities/posting/model/posting-interface.ts
index c314d2f30..68f094f8c 100644
--- a/apps/cs/src/entities/posting/model/posting-interface.ts
+++ b/apps/cs/src/entities/posting/model/posting-interface.ts
@@ -46,5 +46,5 @@ export type PostingFormData = z.infer<typeof postingFormSchema>;
 
 export interface PostService {
   getPostingHistory: (params: PostingParams) => Promise<PageableList<Post>>;
-  requestPosting: (data: WithModePost[]) => Promise<Post[]>;
+  savePosting: (data: WithModePost[]) => Promise<Post[]>;
 }
diff --git a/apps/cs/src/entities/posting/ui/posting-dialog.tsx b/apps/cs/src/entities/posting/ui/posting-dialog.tsx
index b49e541c2..c1546dfb3 100644
--- a/apps/cs/src/entities/posting/ui/posting-dialog.tsx
+++ b/apps/cs/src/entities/posting/ui/posting-dialog.tsx
@@ -75,8 +75,8 @@ function PostingDialog({ postingType, postingTargets }: PostingDialogProps) {
     queryFn: () => SiteApi.getSiteList({}),
   });
 
-  const { mutateAsync: requestPosting } = useMutation({
-    mutationFn: (data: WithModePost[]) => PostingApi.requestPosting(data),
+  const { mutateAsync: savePosting } = useMutation({
+    mutationFn: (data: WithModePost[]) => PostingApi.savePosting(data),
     onSuccess: () => {
       alert("저장되었습니다.");
     },
@@ -209,7 +209,7 @@ function PostingDialog({ postingType, postingTargets }: PostingDialogProps) {
   const handleSave = async () => {
     if (await confirm("저장하시겠습니까?")) {
       const data = form.getValues("pstg");
-      await requestPosting(data);
+      await savePosting(data);
     }
   };
 
diff --git a/apps/cs/src/pages/banner/ui/modify-page.tsx b/apps/cs/src/pages/banner/ui/modify-page.tsx
index 5b87ce1c0..6f6e2c945 100644
--- a/apps/cs/src/pages/banner/ui/modify-page.tsx
+++ b/apps/cs/src/pages/banner/ui/modify-page.tsx
@@ -59,8 +59,8 @@ function ModifyPage({ sequential }: { sequential: string }) {
     },
   });
 
-  const { mutateAsync: requestPosting } = useMutation({
-    mutationFn: (data: WithModePost[]) => PostingApi.requestPosting(data),
+  const { mutateAsync: savePosting } = useMutation({
+    mutationFn: (data: WithModePost[]) => PostingApi.savePosting(data),
     onSuccess: () => {
       queryClient.invalidateQueries({
         queryKey: [ENDPOINT.CMS_SERVICE.POSTINGS, sequential],
@@ -93,7 +93,7 @@ function ModifyPage({ sequential }: { sequential: string }) {
     setOnConfirm(true);
     if (await confirm("삭제하시겠습니까?")) {
       setOnConfirm(false);
-      await requestPosting(data);
+      await savePosting(data);
       alert("삭제되었습니다.");
     }
     setOnConfirm(false);
diff --git a/apps/cs/src/pages/image/ui/modify-page.tsx b/apps/cs/src/pages/image/ui/modify-page.tsx
index 0945a292b..0229c4dc7 100644
--- a/apps/cs/src/pages/image/ui/modify-page.tsx
+++ b/apps/cs/src/pages/image/ui/modify-page.tsx
@@ -55,8 +55,8 @@ function ModifyPage({ sequential }: { sequential: string }) {
     },
   });
 
-  const { mutateAsync: requestPosting } = useMutation({
-    mutationFn: (data: WithModePost[]) => PostingApi.requestPosting(data),
+  const { mutateAsync: savePosting } = useMutation({
+    mutationFn: (data: WithModePost[]) => PostingApi.savePosting(data),
     onSuccess: () => {
       queryClient.invalidateQueries({
         queryKey: [ENDPOINT.CMS_SERVICE.POSTINGS, sequential],
@@ -89,7 +89,7 @@ function ModifyPage({ sequential }: { sequential: string }) {
     setOnConfirm(true);
     if (await confirm("삭제하시겠습니까?")) {
       setOnConfirm(false);
-      await requestPosting(data);
+      await savePosting(data);
       alert("삭제되었습니다.");
     }
     setOnConfirm(false);

From 83ba372a17e211c2c425e2530f73a62392cae154 Mon Sep 17 00:00:00 2001
From: bicochan <chanii8@naver.com>
Date: Wed, 9 Apr 2025 16:59:45 +0900
Subject: [PATCH 31/38] rename: WithModePost -> PostPayloadData

---
 apps/cs/src/entities/posting/api/posting-service.ts     | 4 ++--
 apps/cs/src/entities/posting/index.ts                   | 2 +-
 apps/cs/src/entities/posting/model/posting-interface.ts | 8 ++++----
 apps/cs/src/entities/posting/ui/posting-dialog.tsx      | 4 ++--
 apps/cs/src/pages/banner/ui/modify-page.tsx             | 4 ++--
 apps/cs/src/pages/image/ui/modify-page.tsx              | 4 ++--
 6 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/apps/cs/src/entities/posting/api/posting-service.ts b/apps/cs/src/entities/posting/api/posting-service.ts
index 269a967a2..2fafd6557 100644
--- a/apps/cs/src/entities/posting/api/posting-service.ts
+++ b/apps/cs/src/entities/posting/api/posting-service.ts
@@ -5,7 +5,7 @@ import type {
   PostService,
   PostingParams,
   Post,
-  WithModePost,
+  PostPayloadData,
 } from "../model/posting-interface";
 
 export class PostingApiService implements PostService {
@@ -19,7 +19,7 @@ export class PostingApiService implements PostService {
     return response.data;
   }
 
-  public async savePosting(data: WithModePost[]): Promise<Post[]> {
+  public async savePosting(data: PostPayloadData[]): Promise<Post[]> {
     const response = await client.post<Post[]>(
       `${ENDPOINT.CMS_SERVICE.POSTINGS}`,
       data,
diff --git a/apps/cs/src/entities/posting/index.ts b/apps/cs/src/entities/posting/index.ts
index 85416783b..c6029d757 100644
--- a/apps/cs/src/entities/posting/index.ts
+++ b/apps/cs/src/entities/posting/index.ts
@@ -2,6 +2,6 @@ export { PostingApi } from "./api/posting-service";
 export {
   POSTING_TYPE,
   type Post,
-  type WithModePost,
+  type PostPayloadData,
 } from "./model/posting-interface";
 export { PostingDialog } from "./ui/posting-dialog";
diff --git a/apps/cs/src/entities/posting/model/posting-interface.ts b/apps/cs/src/entities/posting/model/posting-interface.ts
index 68f094f8c..b14b2ab66 100644
--- a/apps/cs/src/entities/posting/model/posting-interface.ts
+++ b/apps/cs/src/entities/posting/model/posting-interface.ts
@@ -26,7 +26,7 @@ export const postSchema = z.object({
   delYn: z.string(),
 });
 
-export const withModePostSchema = postSchema
+export const postPayloadSchema = postSchema
   .extend({
     mode: z.string(),
   })
@@ -37,14 +37,14 @@ export const withModePostSchema = postSchema
   });
 
 export const postingFormSchema = z.object({
-  pstg: z.array(withModePostSchema),
+  pstg: z.array(postPayloadSchema),
 });
 
 export type Post = z.infer<typeof postSchema>;
-export type WithModePost = z.infer<typeof withModePostSchema>;
+export type PostPayloadData = z.infer<typeof postPayloadSchema>;
 export type PostingFormData = z.infer<typeof postingFormSchema>;
 
 export interface PostService {
   getPostingHistory: (params: PostingParams) => Promise<PageableList<Post>>;
-  savePosting: (data: WithModePost[]) => Promise<Post[]>;
+  savePosting: (data: PostPayloadData[]) => Promise<Post[]>;
 }
diff --git a/apps/cs/src/entities/posting/ui/posting-dialog.tsx b/apps/cs/src/entities/posting/ui/posting-dialog.tsx
index c1546dfb3..9e27a4485 100644
--- a/apps/cs/src/entities/posting/ui/posting-dialog.tsx
+++ b/apps/cs/src/entities/posting/ui/posting-dialog.tsx
@@ -34,7 +34,7 @@ import {
   postingFormSchema,
   type PostingFormData,
   type PostingType,
-  type WithModePost,
+  type PostPayloadData,
 } from "../model/posting-interface";
 import { useAlertStore } from "@/shared/lib/use-alert-store";
 
@@ -76,7 +76,7 @@ function PostingDialog({ postingType, postingTargets }: PostingDialogProps) {
   });
 
   const { mutateAsync: savePosting } = useMutation({
-    mutationFn: (data: WithModePost[]) => PostingApi.savePosting(data),
+    mutationFn: (data: PostPayloadData[]) => PostingApi.savePosting(data),
     onSuccess: () => {
       alert("저장되었습니다.");
     },
diff --git a/apps/cs/src/pages/banner/ui/modify-page.tsx b/apps/cs/src/pages/banner/ui/modify-page.tsx
index 6f6e2c945..7af0f246b 100644
--- a/apps/cs/src/pages/banner/ui/modify-page.tsx
+++ b/apps/cs/src/pages/banner/ui/modify-page.tsx
@@ -12,7 +12,7 @@ import {
 } from "@tanstack/react-table";
 import { useConfirm } from "@frontend-opensource/use-react-hooks";
 import { Button, DataTable } from "@common/components/ui";
-import { PostingApi, type WithModePost } from "@/entities/posting";
+import { PostingApi, type PostPayloadData } from "@/entities/posting";
 import { useAlertStore } from "@/shared/lib/use-alert-store";
 import { ConfirmDialog } from "@/shared/ui/confirm-dialog";
 import { ENDPOINT } from "@/shared/config";
@@ -60,7 +60,7 @@ function ModifyPage({ sequential }: { sequential: string }) {
   });
 
   const { mutateAsync: savePosting } = useMutation({
-    mutationFn: (data: WithModePost[]) => PostingApi.savePosting(data),
+    mutationFn: (data: PostPayloadData[]) => PostingApi.savePosting(data),
     onSuccess: () => {
       queryClient.invalidateQueries({
         queryKey: [ENDPOINT.CMS_SERVICE.POSTINGS, sequential],
diff --git a/apps/cs/src/pages/image/ui/modify-page.tsx b/apps/cs/src/pages/image/ui/modify-page.tsx
index 0229c4dc7..1405ed1f2 100644
--- a/apps/cs/src/pages/image/ui/modify-page.tsx
+++ b/apps/cs/src/pages/image/ui/modify-page.tsx
@@ -12,7 +12,7 @@ import {
 } from "@tanstack/react-table";
 import { useConfirm } from "@frontend-opensource/use-react-hooks";
 import { Button, DataTable } from "@common/components/ui";
-import { PostingApi, type WithModePost } from "@/entities/posting";
+import { PostingApi, type PostPayloadData } from "@/entities/posting";
 import { useAlertStore } from "@/shared/lib/use-alert-store";
 import { ConfirmDialog } from "@/shared/ui/confirm-dialog";
 import { ENDPOINT } from "@/shared/config";
@@ -56,7 +56,7 @@ function ModifyPage({ sequential }: { sequential: string }) {
   });
 
   const { mutateAsync: savePosting } = useMutation({
-    mutationFn: (data: WithModePost[]) => PostingApi.savePosting(data),
+    mutationFn: (data: PostPayloadData[]) => PostingApi.savePosting(data),
     onSuccess: () => {
       queryClient.invalidateQueries({
         queryKey: [ENDPOINT.CMS_SERVICE.POSTINGS, sequential],

From e456595868e9e97234d08e3a9247b92f5b2ec40c Mon Sep 17 00:00:00 2001
From: bicochan <chanii8@naver.com>
Date: Thu, 10 Apr 2025 10:13:03 +0900
Subject: [PATCH 32/38] =?UTF-8?q?feat:=20=EB=A9=94=EB=89=B4=20=EA=B6=8C?=
 =?UTF-8?q?=ED=95=9C=20=EA=B4=80=EB=A6=AC=20=EB=8B=A4=EC=9D=B4=EC=96=BC?=
 =?UTF-8?q?=EB=A1=9C=EA=B7=B8=20=EC=9E=91=EC=97=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../api/menu-authority-service.ts             |  32 +++++
 apps/cs/src/entities/menu-authority/index.ts  |   1 +
 .../model/menu-authority-interface.ts         |  41 ++++++
 .../model/menu-authority-table-columns.tsx    | 117 ++++++++++++++++++
 .../ui/management-authority-dialog.tsx        | 101 +++++++++++++++
 .../pages/menu/model/content-table-colums.tsx |  22 ++--
 apps/cs/src/pages/menu/ui/menu-form.tsx       |   4 +-
 .../menu/ui/permissions-management-dialog.tsx |  22 ----
 .../src/pages/template/ui/template-page.tsx   |   2 +-
 apps/cs/src/shared/config/api.ts              |   1 +
 10 files changed, 306 insertions(+), 37 deletions(-)
 create mode 100644 apps/cs/src/entities/menu-authority/api/menu-authority-service.ts
 create mode 100644 apps/cs/src/entities/menu-authority/index.ts
 create mode 100644 apps/cs/src/entities/menu-authority/model/menu-authority-interface.ts
 create mode 100644 apps/cs/src/entities/menu-authority/model/menu-authority-table-columns.tsx
 create mode 100644 apps/cs/src/entities/menu-authority/ui/management-authority-dialog.tsx
 delete mode 100644 apps/cs/src/pages/menu/ui/permissions-management-dialog.tsx

diff --git a/apps/cs/src/entities/menu-authority/api/menu-authority-service.ts b/apps/cs/src/entities/menu-authority/api/menu-authority-service.ts
new file mode 100644
index 000000000..f9b01b4d8
--- /dev/null
+++ b/apps/cs/src/entities/menu-authority/api/menu-authority-service.ts
@@ -0,0 +1,32 @@
+import { client } from "@/shared/api";
+import { ENDPOINT } from "@/shared/config";
+import type {
+  MenuAuthorityList,
+  MenuAuthorityParams,
+  MenuAuthorityPayloadData,
+  MenuAuthorityService,
+} from "../model/menu-authority-interface";
+
+export class MenuAuthorityApiService implements MenuAuthorityService {
+  public async getMenuAuthorityList(
+    params: MenuAuthorityParams,
+  ): Promise<MenuAuthorityList> {
+    const response = await client.get<MenuAuthorityList>(
+      `${ENDPOINT.CMS_SERVICE.MENU_AUTHRTS}`,
+      { params },
+    );
+    return response.data;
+  }
+
+  public async saveMenuAuthority(
+    data: MenuAuthorityPayloadData[],
+  ): Promise<void> {
+    const response = await client.post<void>(
+      `${ENDPOINT.CMS_SERVICE.MENU_AUTHRTS}`,
+      data,
+    );
+    return response.data;
+  }
+}
+
+export const MenuAuthorityApi = new MenuAuthorityApiService();
diff --git a/apps/cs/src/entities/menu-authority/index.ts b/apps/cs/src/entities/menu-authority/index.ts
new file mode 100644
index 000000000..07433a098
--- /dev/null
+++ b/apps/cs/src/entities/menu-authority/index.ts
@@ -0,0 +1 @@
+export { ManagementAuthorityDialog } from "./ui/management-authority-dialog";
diff --git a/apps/cs/src/entities/menu-authority/model/menu-authority-interface.ts b/apps/cs/src/entities/menu-authority/model/menu-authority-interface.ts
new file mode 100644
index 000000000..d6775838c
--- /dev/null
+++ b/apps/cs/src/entities/menu-authority/model/menu-authority-interface.ts
@@ -0,0 +1,41 @@
+import { z } from "zod";
+import type { PageableList, PageableParams } from "@/shared/model";
+
+export interface MenuAuthorityParams extends PageableParams {
+  groupId?: string;
+  menuCd?: number;
+  useYn?: string;
+}
+
+export const menuAuthoritySchema = z.object({
+  groupId: z.string(),
+  groupNm: z.string(),
+  menuCd: z.number(),
+  mngAuthrtYn: z.string(),
+  inqAuthrtYn: z.string(),
+  regAuthrtYn: z.string(),
+  mdfcnAuthrtYn: z.string(),
+  delAuthrtYn: z.string(),
+  useYn: z.string(),
+  mode: z.string(),
+});
+
+export const menuAuthorityPayloadSchema = menuAuthoritySchema.omit({
+  groupNm: true,
+});
+
+export const menuAuthorityFormSchema = z.object({
+  menuAuthority: z.array(menuAuthorityPayloadSchema),
+});
+
+export type MenuAuthority = z.infer<typeof menuAuthoritySchema>;
+export type MenuAuthorityList = PageableList<MenuAuthority>;
+export type MenuAuthorityPayloadData = z.infer<
+  typeof menuAuthorityPayloadSchema
+>;
+export type MenuAuthorityFormData = z.infer<typeof menuAuthorityFormSchema>;
+
+export interface MenuAuthorityService {
+  getMenuAuthorityList(params: MenuAuthorityParams): Promise<MenuAuthorityList>;
+  saveMenuAuthority(data: MenuAuthorityPayloadData[]): Promise<void>;
+}
diff --git a/apps/cs/src/entities/menu-authority/model/menu-authority-table-columns.tsx b/apps/cs/src/entities/menu-authority/model/menu-authority-table-columns.tsx
new file mode 100644
index 000000000..90bff735d
--- /dev/null
+++ b/apps/cs/src/entities/menu-authority/model/menu-authority-table-columns.tsx
@@ -0,0 +1,117 @@
+import type { ColumnDef } from "@tanstack/react-table";
+import type { UseFormReturn } from "react-hook-form";
+import { Checkbox } from "@common/components/ui";
+import type {
+  MenuAuthority,
+  MenuAuthorityFormData,
+  MenuAuthorityPayloadData,
+} from "./menu-authority-interface";
+
+export const columns = (
+  form: UseFormReturn<MenuAuthorityFormData>,
+): ColumnDef<MenuAuthority>[] => {
+  const getCurrentRow = (i: number) => form.watch("menuAuthority")[i];
+
+  const handleCheckedChange =
+    (i: number, key: keyof MenuAuthorityPayloadData) => (checked: boolean) => {
+      if (getCurrentRow(i)?.mode === "R") {
+        form.setValue(`menuAuthority.${i}.mode`, "U");
+      }
+      form.setValue(`menuAuthority.${i}.${key}`, checked ? "Y" : "N");
+    };
+
+  return [
+    {
+      accessorKey: "groupNm",
+      header: "그룹명",
+    },
+    {
+      accessorKey: "mngAuthrtYn",
+      header: "관리권한",
+      cell: ({ row }) => {
+        return (
+          <Checkbox
+            checked={getCurrentRow(row.index)?.mngAuthrtYn === "Y"}
+            onCheckedChange={(checked) => {
+              if (checked) {
+                handleCheckedChange(
+                  row.index,
+                  "regAuthrtYn",
+                )(checked as boolean);
+                handleCheckedChange(
+                  row.index,
+                  "mdfcnAuthrtYn",
+                )(checked as boolean);
+                handleCheckedChange(
+                  row.index,
+                  "delAuthrtYn",
+                )(checked as boolean);
+                handleCheckedChange(
+                  row.index,
+                  "inqAuthrtYn",
+                )(checked as boolean);
+              }
+              handleCheckedChange(row.index, "mngAuthrtYn")(checked as boolean);
+            }}
+          />
+        );
+      },
+    },
+    {
+      accessorKey: "regAuthrtYn",
+      header: "등록권한",
+      cell: ({ row }) => {
+        return (
+          <Checkbox
+            checked={getCurrentRow(row.index)?.regAuthrtYn === "Y"}
+            onCheckedChange={(checked) => {
+              if (checked) {
+                handleCheckedChange(
+                  row.index,
+                  "inqAuthrtYn",
+                )(checked as boolean);
+              }
+              handleCheckedChange(row.index, "regAuthrtYn")(checked as boolean);
+            }}
+          />
+        );
+      },
+    },
+    {
+      accessorKey: "mdfcnAuthrtYn",
+      header: "수정권한 ",
+      cell: ({ row }) => {
+        return (
+          <Checkbox
+            checked={getCurrentRow(row.index)?.mdfcnAuthrtYn === "Y"}
+            onCheckedChange={handleCheckedChange(row.index, "mdfcnAuthrtYn")}
+          />
+        );
+      },
+    },
+    {
+      accessorKey: "delAuthrtYn",
+      header: "삭제권한",
+      cell: ({ row }) => {
+        return (
+          <Checkbox
+            checked={getCurrentRow(row.index)?.delAuthrtYn === "Y"}
+            onCheckedChange={handleCheckedChange(row.index, "delAuthrtYn")}
+          />
+        );
+      },
+    },
+    {
+      accessorKey: "inqAuthrtYn",
+      header: "조회권한",
+      cell: ({ row }) => {
+        return (
+          <Checkbox
+            checked={getCurrentRow(row.index)?.inqAuthrtYn === "Y"}
+            onCheckedChange={handleCheckedChange(row.index, "inqAuthrtYn")}
+          />
+        );
+      },
+    },
+  ];
+};
diff --git a/apps/cs/src/entities/menu-authority/ui/management-authority-dialog.tsx b/apps/cs/src/entities/menu-authority/ui/management-authority-dialog.tsx
new file mode 100644
index 000000000..8b940634a
--- /dev/null
+++ b/apps/cs/src/entities/menu-authority/ui/management-authority-dialog.tsx
@@ -0,0 +1,101 @@
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useMutation, useQuery } from "@tanstack/react-query";
+import { getCoreRowModel, useReactTable } from "@tanstack/react-table";
+import { useConfirm } from "@frontend-opensource/use-react-hooks";
+import {
+  Button,
+  DataTable,
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@common/components/ui";
+import { ENDPOINT } from "@/shared/config";
+import { useAlertStore } from "@/shared/lib/use-alert-store";
+import {
+  menuAuthorityFormSchema,
+  type MenuAuthorityFormData,
+  type MenuAuthorityPayloadData,
+} from "../model/menu-authority-interface";
+import { columns } from "../model/menu-authority-table-columns";
+import { MenuAuthorityApi } from "../api/menu-authority-service";
+
+type ManagementAuthorityDialogProps = {
+  menuCd?: number;
+} & React.ComponentProps<typeof Dialog>;
+
+function ManagementAuthorityDialog({
+  menuCd,
+  ...props
+}: ManagementAuthorityDialogProps) {
+  const { confirm } = useConfirm();
+  const { setMessage: alert } = useAlertStore((state) => state);
+
+  const { data: menuAuthorityList } = useQuery({
+    queryKey: [ENDPOINT.CMS_SERVICE.MENU_AUTHRTS, menuCd],
+    queryFn: () => MenuAuthorityApi.getMenuAuthorityList({ menuCd }),
+    enabled: !!menuCd,
+  });
+
+  const { mutateAsync: saveMenuAuthority } = useMutation({
+    mutationFn: (data: MenuAuthorityPayloadData[]) =>
+      MenuAuthorityApi.saveMenuAuthority(data),
+    onSuccess: () => {
+      alert("저장되었습니다.");
+    },
+  });
+
+  const form = useForm<MenuAuthorityFormData>({
+    resolver: zodResolver(menuAuthorityFormSchema),
+    values: {
+      menuAuthority: menuAuthorityList?.content ?? [],
+    },
+  });
+
+  const table = useReactTable({
+    data: menuAuthorityList?.content ?? [],
+    columns: columns(form),
+    getCoreRowModel: getCoreRowModel(),
+  });
+
+  const handleSave = async () => {
+    if (await confirm("저장하시겠습니까?")) {
+      const data = form.getValues("menuAuthority");
+      const filteredData = data.filter((item) => item.mode !== "R");
+      await saveMenuAuthority(filteredData);
+    }
+  };
+
+  return (
+    <Dialog {...props}>
+      <DialogTrigger asChild>
+        <Button className="gap-3" disabled={!menuCd}>
+          <i className="diveicon di-personal-information" />
+          권한관리
+        </Button>
+      </DialogTrigger>
+      <DialogContent className="max-w-[60rem]" aria-describedby={undefined}>
+        <DialogHeader>
+          <DialogTitle>그룹별 메뉴 권한</DialogTitle>
+        </DialogHeader>
+        <DataTable table={table} />
+        <DialogFooter className="!justify-center">
+          <Button size="lg" onClick={handleSave}>
+            저장
+          </Button>
+          <DialogClose asChild>
+            <Button size="lg" color="white">
+              취소
+            </Button>
+          </DialogClose>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+export { ManagementAuthorityDialog };
diff --git a/apps/cs/src/pages/menu/model/content-table-colums.tsx b/apps/cs/src/pages/menu/model/content-table-colums.tsx
index b8bb28638..844055b73 100644
--- a/apps/cs/src/pages/menu/model/content-table-colums.tsx
+++ b/apps/cs/src/pages/menu/model/content-table-colums.tsx
@@ -1,20 +1,20 @@
-import { createColumnHelper } from "@tanstack/react-table";
+import type { ColumnDef } from "@tanstack/react-table";
 import { Checkbox } from "@common/components/ui";
 import type { Content } from "./content-interface";
 
-const columnHelper = createColumnHelper<Content>();
-
-const columns = [
-  columnHelper.accessor((_, index) => index + 1, {
+export const columns: ColumnDef<Content>[] = [
+  {
     id: "no",
     header: "NO",
-  }),
-  columnHelper.accessor("contsTtl", {
+    cell: ({ row }) => row.index + 1,
+  },
+  {
     id: "contsTtl",
     header: "콘텐츠명",
-  }),
+    cell: ({ row }) => row.original.contsTtl,
+  },
   // TODO: 최종수정자, 최종수정일, 승인일시 추가
-  columnHelper.display({
+  {
     id: "select",
     header: "선택",
     cell: ({ row }) => {
@@ -26,7 +26,5 @@ const columns = [
         />
       );
     },
-  }),
+  },
 ];
-
-export { columns };
diff --git a/apps/cs/src/pages/menu/ui/menu-form.tsx b/apps/cs/src/pages/menu/ui/menu-form.tsx
index 8ee61812a..0a45214eb 100644
--- a/apps/cs/src/pages/menu/ui/menu-form.tsx
+++ b/apps/cs/src/pages/menu/ui/menu-form.tsx
@@ -2,10 +2,10 @@ import type { UseFormReturn } from "react-hook-form";
 import { useConfirm } from "@frontend-opensource/use-react-hooks";
 import { Button } from "@common/components";
 import { Form } from "@/shared/ui/form";
+import { ManagementAuthorityDialog } from "@/entities/menu-authority";
 import type { MenuFormData } from "../model/menu-interface";
 import { BaseMenuForm } from "./base-menu-form";
 import { TypeMenuForm } from "./type-menu-form";
-import { PermissionsManagementDialog } from "./permissions-management-dialog";
 
 interface MenuFormProps {
   form: UseFormReturn<MenuFormData>;
@@ -69,7 +69,7 @@ function MenuForm({
             <h3 className="text-2xl font-medium text-label">
               {isModifyMode ? "메뉴 수정" : "메뉴 등록"}
             </h3>
-            <PermissionsManagementDialog menuCd={menuCd} />
+            <ManagementAuthorityDialog menuCd={menuCd} />
           </div>
           <div className="card">
             <BaseMenuForm form={form} menuCd={menuCd} />
diff --git a/apps/cs/src/pages/menu/ui/permissions-management-dialog.tsx b/apps/cs/src/pages/menu/ui/permissions-management-dialog.tsx
deleted file mode 100644
index c5f782cbb..000000000
--- a/apps/cs/src/pages/menu/ui/permissions-management-dialog.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import { Button, Dialog, DialogTrigger } from "@common/components/ui";
-
-type PermissionsManagementDialogProps = {
-  menuCd?: number;
-} & React.ComponentProps<typeof Dialog>;
-
-function PermissionsManagementDialog({
-  ...props
-}: PermissionsManagementDialogProps) {
-  return (
-    <Dialog {...props}>
-      <DialogTrigger asChild>
-        <Button className="gap-3">
-          <i className="diveicon di-personal-information" />
-          권한관리
-        </Button>
-      </DialogTrigger>
-    </Dialog>
-  );
-}
-
-export { PermissionsManagementDialog };
diff --git a/apps/cs/src/pages/template/ui/template-page.tsx b/apps/cs/src/pages/template/ui/template-page.tsx
index dbd96b56b..b107559fe 100644
--- a/apps/cs/src/pages/template/ui/template-page.tsx
+++ b/apps/cs/src/pages/template/ui/template-page.tsx
@@ -9,7 +9,7 @@ import {
   type PaginationState,
 } from "@tanstack/react-table";
 import { Button, DataTable, Input, Label } from "@common/components";
-import { CodeSelect } from "@/entities/code/ui/code-select";
+import { CodeSelect } from "@/entities/code";
 import { ENDPOINT } from "@/shared/config";
 import { TemplateApi } from "../api/template-service";
 import { columns } from "../model/template-table-columns";
diff --git a/apps/cs/src/shared/config/api.ts b/apps/cs/src/shared/config/api.ts
index 4f1d5605c..6ed82dec1 100644
--- a/apps/cs/src/shared/config/api.ts
+++ b/apps/cs/src/shared/config/api.ts
@@ -21,6 +21,7 @@ export const ENDPOINT = {
     CODE: "/cms-service/api/v1/code/cache",
     MENUS: "/cms-service/api/v1/menus",
     MENU_ROLES: "/cms-service/api/v1/menu-roles",
+    MENU_AUTHRTS: "/cms-service/api/v1/menu-authrts",
     CONTENTS: "/cms-service/api/v1/contents",
     USER_ORGANIZATION: "/cms-service/api/v1/user-ognz",
     IMAGES: "/cms-service/api/v1/images",

From 1f99d450e9ac0318150887c67892807323175a73 Mon Sep 17 00:00:00 2001
From: bicochan <chanii8@naver.com>
Date: Thu, 10 Apr 2025 14:39:19 +0900
Subject: [PATCH 33/38] =?UTF-8?q?refactor:=20tus=20=EC=97=85=EB=A1=9C?=
 =?UTF-8?q?=EB=93=9C=20=EC=BB=A4=EC=8A=A4=ED=85=80=20=ED=9B=85=20=EC=83=9D?=
 =?UTF-8?q?=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/cs/src/pages/image/lib/utils.ts      | 61 ---------------------
 apps/cs/src/pages/image/ui/image-form.tsx | 32 ++++++------
 apps/cs/src/shared/lib/use-tus.ts         | 64 +++++++++++++++++++++++
 3 files changed, 79 insertions(+), 78 deletions(-)
 delete mode 100644 apps/cs/src/pages/image/lib/utils.ts
 create mode 100644 apps/cs/src/shared/lib/use-tus.ts

diff --git a/apps/cs/src/pages/image/lib/utils.ts b/apps/cs/src/pages/image/lib/utils.ts
deleted file mode 100644
index c6c8ca101..000000000
--- a/apps/cs/src/pages/image/lib/utils.ts
+++ /dev/null
@@ -1,61 +0,0 @@
-import { Upload, type HttpResponse } from "tus-js-client";
-import { getCookie, setCookie } from "@/shared/lib";
-import { AUTH_USER_ID, CLAIM_NAME, ENDPOINT } from "@/shared/config";
-
-type UploadOptions = {
-  handleUploadStart?: (upload: Upload) => void;
-  handleProgress?: (percentage: string) => void;
-  handleSuccess?: (upload: Upload) => void;
-  handleResponse?: (res: HttpResponse) => void;
-};
-
-export const handleUpload = (files: FileList, options?: UploadOptions) => {
-  let metadata = {};
-
-  const file = files.item(0);
-  if (!file) return;
-  metadata = {
-    filename: file.name,
-    filetype: file.type,
-  };
-
-  const atflCd = getCookie("atfl-cd-key");
-  if (atflCd) {
-    metadata = {
-      ...metadata,
-      atflCd,
-    };
-  }
-
-  const upload = new Upload(file, {
-    endpoint: `${ENDPOINT.ATTACH_SERVICE.TUS_UPLOAD}`,
-    chunkSize: 10 * 1024 * 1024,
-    headers: {
-      [CLAIM_NAME]: getCookie(CLAIM_NAME) ?? "",
-      [AUTH_USER_ID]: getCookie(AUTH_USER_ID) ?? "",
-    },
-    metadata,
-    onError(error) {
-      console.error(`Failed because: ${error}`);
-    },
-    onProgress(bytesUploaded, bytesTotal) {
-      const percentage = ((bytesUploaded / bytesTotal) * 100).toFixed(2);
-      options?.handleProgress?.(percentage);
-    },
-    onAfterResponse(req, res) {
-      const fileInfo = res.getHeader("X-File-Info");
-      if (fileInfo === undefined || fileInfo === null) return;
-
-      setCookie("atfl-cd-key", JSON.parse(fileInfo)?.atflCd ?? "");
-      options?.handleResponse?.(res);
-    },
-    onSuccess() {
-      options?.handleSuccess?.(upload);
-    },
-  });
-
-  upload.start();
-  options?.handleUploadStart?.(upload);
-
-  console.log("upload start >>>>>", upload);
-};
diff --git a/apps/cs/src/pages/image/ui/image-form.tsx b/apps/cs/src/pages/image/ui/image-form.tsx
index 10c6fee6b..4a768811b 100644
--- a/apps/cs/src/pages/image/ui/image-form.tsx
+++ b/apps/cs/src/pages/image/ui/image-form.tsx
@@ -4,7 +4,7 @@ import Image from "next/image";
 import { useEffect, useState } from "react";
 import { useQuery } from "@tanstack/react-query";
 import type { UseFormReturn } from "react-hook-form";
-import type { HttpResponse, Upload } from "tus-js-client";
+import type { HttpResponse } from "tus-js-client";
 import {
   FileUploader,
   Input,
@@ -22,10 +22,9 @@ import { FormWrapper } from "@/widgets/form-wrapper";
 import { CodeSelect } from "@/entities/code";
 import { AttachmentApi } from "@/entities/attachment";
 import { ENDPOINT } from "@/shared/config";
-import { setCookie } from "@/shared/lib/cookie";
+import { useTus } from "@/shared/lib/use-tus";
 import { FormControl, FormField, FormItem } from "@/shared/ui/form";
 import type { ImageFormData } from "../model/image-interface";
-import { handleUpload } from "../lib/utils";
 
 type ImageFormProps = {
   form: UseFormReturn<ImageFormData>;
@@ -38,9 +37,13 @@ function ImageForm({ form, imgSn, ...props }: ImageFormProps) {
   const atflYn = form.watch("atflYn");
   const atflCd = form.watch("atflCd");
 
+  const {
+    file: uploadFile,
+    response: uploadResponse,
+    progress,
+    setFile,
+  } = useTus();
   const [imageUrl, setImageUrl] = useState("");
-  const [upload, setUpload] = useState<Upload | null>(null);
-  const [progress, setProgress] = useState(0);
 
   const { data: attachmentData } = useQuery({
     queryKey: [ENDPOINT.ATTACH_SERVICE.ATTACHMENTS, atflCd],
@@ -49,10 +52,6 @@ function ImageForm({ form, imgSn, ...props }: ImageFormProps) {
     enabled: !!atflCd,
   });
 
-  const handleProgress = (percentage: string) => {
-    setProgress(Number(percentage));
-  };
-
   const handleUploadResponse = async (res: HttpResponse) => {
     const fileInfo = res.getHeader("X-File-Info");
     if (fileInfo === undefined || fileInfo === null) return;
@@ -64,6 +63,11 @@ function ImageForm({ form, imgSn, ...props }: ImageFormProps) {
       await AttachmentApi.deleteAttachmentByAtflCd(attachmentData.atflCd);
   };
 
+  useEffect(() => {
+    if (!uploadResponse) return;
+    handleUploadResponse(uploadResponse);
+  }, [uploadResponse]);
+
   useEffect(() => {
     (async () => {
       setImageUrl(
@@ -197,13 +201,7 @@ function ImageForm({ form, imgSn, ...props }: ImageFormProps) {
                             onUpload={(e) => {
                               const files = e.target.files;
                               if (!files) return;
-                              setCookie("atfl-cd-key", "");
-                              handleUpload(files, {
-                                handleUploadStart: setUpload,
-                                handleProgress,
-                                handleSuccess: setUpload,
-                                handleResponse: handleUploadResponse,
-                              });
+                              setFile(files[0] ?? null);
                             }}
                             customPreview={
                               <>
@@ -220,7 +218,7 @@ function ImageForm({ form, imgSn, ...props }: ImageFormProps) {
                                       )}
                                     </div>
                                     <p className="absolute bottom-3 left-0 z-10 p-2 text-base leading-none">
-                                      {(upload?.file as File)?.name}
+                                      {uploadFile?.name}
                                     </p>
                                     <Progress
                                       value={progress}
diff --git a/apps/cs/src/shared/lib/use-tus.ts b/apps/cs/src/shared/lib/use-tus.ts
new file mode 100644
index 000000000..fdaeb1f65
--- /dev/null
+++ b/apps/cs/src/shared/lib/use-tus.ts
@@ -0,0 +1,64 @@
+import { useEffect, useState } from "react";
+import { type HttpResponse, Upload } from "tus-js-client";
+import { AUTH_USER_ID, CLAIM_NAME, ENDPOINT } from "../config";
+import { useAttachmentStore } from "./use-attachment-store";
+import { getCookie } from "./cookie";
+
+export const useTus = () => {
+  const { attachmentFileCode, setAttachmentFileCode } = useAttachmentStore(
+    (state) => state,
+  );
+
+  const [file, setFile] = useState<File | null>(null);
+  const [upload, setUpload] = useState<Upload | null>(null);
+  const [response, setResponse] = useState<HttpResponse | null>(null);
+  const [progress, setProgress] = useState<number>(0);
+
+  const metadata = {
+    filename: file?.name ?? "",
+    filetype: file?.type ?? "",
+    atflCd: attachmentFileCode,
+  };
+
+  const createUpload = () => {
+    return new Upload(file!, {
+      endpoint: `${ENDPOINT.ATTACH_SERVICE.TUS_UPLOAD}`,
+      chunkSize: 10 * 1024 * 1024,
+      headers: {
+        [CLAIM_NAME]: getCookie(CLAIM_NAME) ?? "",
+        [AUTH_USER_ID]: getCookie(AUTH_USER_ID) ?? "",
+      },
+      metadata,
+      onError(error) {
+        throw new Error(`Failed because: ${error}`);
+      },
+      onProgress(bytesUploaded, bytesTotal) {
+        const percentage = ((bytesUploaded / bytesTotal) * 100).toFixed(2);
+        setProgress(Number(percentage));
+      },
+      onAfterResponse(req, res) {
+        const fileInfo = res.getHeader("X-File-Info");
+        if (fileInfo === undefined || fileInfo === null) return;
+
+        setAttachmentFileCode(JSON.parse(fileInfo)?.atflCd ?? "");
+        setResponse(res);
+      },
+    });
+  };
+
+  useEffect(() => {
+    if (!file) return;
+
+    const upload = createUpload();
+    upload.start();
+    setUpload(upload);
+  }, [file]);
+
+  return {
+    file,
+    upload,
+    response,
+    progress,
+    setFile,
+  };
+};

From 93e066ebe5b6f6c9abd81974c58d0cf5bf7f8480 Mon Sep 17 00:00:00 2001
From: bicochan <chanii8@naver.com>
Date: Thu, 10 Apr 2025 18:05:57 +0900
Subject: [PATCH 34/38] =?UTF-8?q?feat:=20=ED=85=9C=ED=94=8C=EB=A6=BF=20?=
 =?UTF-8?q?=EA=B4=80=EB=A6=AC=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=9E=91?=
 =?UTF-8?q?=EC=97=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../template/register/[sequential]/page.tsx   | 10 +++
 .../src/entities/editor/api/editor-service.ts | 19 +++++
 apps/cs/src/entities/editor/index.ts          |  1 +
 .../editor/model/editor-base-config.ts        | 37 ++++++++++
 .../entities/editor/model/editor-interface.ts | 20 ++++++
 apps/cs/src/entities/editor/ui/editor.tsx     | 70 +++++++++++++++++++
 apps/cs/src/pages/banner/ui/banner-form.tsx   |  2 +-
 apps/cs/src/pages/banner/ui/modify-page.tsx   |  2 +-
 apps/cs/src/pages/image/ui/image-form.tsx     |  5 +-
 apps/cs/src/pages/image/ui/modify-page.tsx    |  2 +-
 .../pages/template/api/template-service.ts    | 19 +++++
 apps/cs/src/pages/template/index.ts           |  1 +
 .../template/model/template-interface.ts      |  8 ++-
 apps/cs/src/pages/template/ui/modify-page.tsx | 50 +++++++++++++
 .../src/pages/template/ui/template-form.tsx   | 14 ++--
 apps/cs/src/shared/config/api.ts              |  1 +
 .../cs/src/shared/lib/use-attachment-store.ts | 14 ++++
 .../src/shared/providers/store-provider.tsx   |  9 ++-
 apps/cs/src/shared/store/attachment-store.ts  | 25 +++++++
 apps/cs/src/shared/store/index.ts             |  1 +
 apps/cs/src/shared/ui/editor.tsx              | 19 -----
 21 files changed, 299 insertions(+), 30 deletions(-)
 create mode 100644 apps/cs/app/(with-base-layout)/template/register/[sequential]/page.tsx
 create mode 100644 apps/cs/src/entities/editor/api/editor-service.ts
 create mode 100644 apps/cs/src/entities/editor/index.ts
 create mode 100644 apps/cs/src/entities/editor/model/editor-base-config.ts
 create mode 100644 apps/cs/src/entities/editor/model/editor-interface.ts
 create mode 100644 apps/cs/src/entities/editor/ui/editor.tsx
 create mode 100644 apps/cs/src/pages/template/ui/modify-page.tsx
 create mode 100644 apps/cs/src/shared/lib/use-attachment-store.ts
 create mode 100644 apps/cs/src/shared/store/attachment-store.ts
 delete mode 100644 apps/cs/src/shared/ui/editor.tsx

diff --git a/apps/cs/app/(with-base-layout)/template/register/[sequential]/page.tsx b/apps/cs/app/(with-base-layout)/template/register/[sequential]/page.tsx
new file mode 100644
index 000000000..3878a4e41
--- /dev/null
+++ b/apps/cs/app/(with-base-layout)/template/register/[sequential]/page.tsx
@@ -0,0 +1,10 @@
+import { ModifyPage as VModifyPage } from "@/pages/template";
+
+export default async function ModifyPage({
+  params,
+}: {
+  params: Promise<{ sequential: string }>;
+}) {
+  const { sequential } = await params;
+  return <VModifyPage sequential={sequential} />;
+}
diff --git a/apps/cs/src/entities/editor/api/editor-service.ts b/apps/cs/src/entities/editor/api/editor-service.ts
new file mode 100644
index 000000000..3e2fc75a4
--- /dev/null
+++ b/apps/cs/src/entities/editor/api/editor-service.ts
@@ -0,0 +1,19 @@
+import { client } from "@/shared/api";
+import type {
+  EditorService,
+  FileInfo,
+  UploadFile,
+} from "../model/editor-interface";
+import { ENDPOINT } from "@/shared/config";
+
+export class EditorApiService implements EditorService {
+  async uploadImage(data: UploadFile): Promise<FileInfo> {
+    const response = await client.post<FileInfo>(
+      ENDPOINT.ATTACH_SERVICE.EDITOR_UPLOAD,
+      data,
+    );
+    return response.data;
+  }
+}
+
+export const EditorApi = new EditorApiService();
diff --git a/apps/cs/src/entities/editor/index.ts b/apps/cs/src/entities/editor/index.ts
new file mode 100644
index 000000000..1ae82fb4f
--- /dev/null
+++ b/apps/cs/src/entities/editor/index.ts
@@ -0,0 +1 @@
+export { Editor } from "./ui/editor";
diff --git a/apps/cs/src/entities/editor/model/editor-base-config.ts b/apps/cs/src/entities/editor/model/editor-base-config.ts
new file mode 100644
index 000000000..1b97ba9a0
--- /dev/null
+++ b/apps/cs/src/entities/editor/model/editor-base-config.ts
@@ -0,0 +1,37 @@
+import { SERVER_API_URL } from "@/shared/config";
+
+export const editorBaseConfig = {
+  apiKey: process.env.NEXT_PUBLIC_TINY_API_KEY,
+  init: {
+    language: "ko_KR",
+    height: 500,
+    plugins: [
+      "advlist",
+      "autolink",
+      "lists",
+      "link",
+      "image",
+      "charmap",
+      "preview",
+      "anchor",
+      "searchreplace",
+      "visualblocks",
+      "code",
+      "codesample",
+      "fullscreen",
+      "insertdatetime",
+      "media",
+      "table",
+      "code",
+      "help",
+      "wordcount",
+      "save",
+    ],
+    toolbar: [
+      "undo redo | blocks fontfamily fontsize | bold italic underline strikethrough forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist blockquote | table",
+      "link image",
+    ],
+    images_upload_base_path: SERVER_API_URL,
+    file_picker_types: "image",
+  },
+};
diff --git a/apps/cs/src/entities/editor/model/editor-interface.ts b/apps/cs/src/entities/editor/model/editor-interface.ts
new file mode 100644
index 000000000..ed6b4a987
--- /dev/null
+++ b/apps/cs/src/entities/editor/model/editor-interface.ts
@@ -0,0 +1,20 @@
+export interface UploadFile {
+  fieldName: string;
+  fileType: string;
+  fileBase64: string;
+  originalName: string;
+  size: number;
+}
+
+export interface FileInfo {
+  originalFileName: string;
+  message: string;
+  fileType: string;
+  size: number;
+  uploaded: number;
+  url: string;
+}
+
+export interface EditorService {
+  uploadImage(data: UploadFile): Promise<FileInfo>;
+}
diff --git a/apps/cs/src/entities/editor/ui/editor.tsx b/apps/cs/src/entities/editor/ui/editor.tsx
new file mode 100644
index 000000000..e55bf89a0
--- /dev/null
+++ b/apps/cs/src/entities/editor/ui/editor.tsx
@@ -0,0 +1,70 @@
+import { Editor as TinyEditor, type IAllProps } from "@tinymce/tinymce-react";
+import { editorBaseConfig as baseConfig } from "../model/editor-base-config";
+import { EditorApi } from "../api/editor-service";
+
+const Editor = ({ ...props }: IAllProps) => {
+  return (
+    <TinyEditor
+      {...baseConfig}
+      init={{
+        ...baseConfig.init,
+        images_upload_handler: (blobInfo: {
+          blob: () => Blob;
+          filename: () => string;
+        }) =>
+          new Promise(async (resolve) => {
+            const blob = blobInfo.blob();
+            const fileInfo = {
+              fieldName: `${blob.type.split("/")[1]}`,
+              fileType: blob.type,
+              fileBase64: "",
+              originalName: blobInfo.filename(),
+              size: blob.size,
+            };
+
+            const reader = new FileReader();
+            reader.onload = async () => {
+              const base64 = reader.result as string;
+              fileInfo.fileBase64 = base64.split(",")[1] || "";
+
+              const data = await EditorApi.uploadImage(fileInfo);
+              resolve(data.url);
+            };
+            reader.readAsDataURL(blob);
+          }),
+        file_picker_callback() {
+          const input = document.createElement("input");
+          input.setAttribute("type", "file");
+          input.setAttribute("accept", "image/*");
+
+          // input.addEventListener("change", (e) => {
+          //   const file = e.target.files[0];
+
+          //   const reader = new FileReader();
+          //   reader.addEventListener("load", () => {
+          //     /*
+          //       Note: Now we need to register the blob in TinyMCEs image blob
+          //       registry. In the next release this part hopefully won't be
+          //       necessary, as we are looking to handle it internally.
+          //     */
+          //     const id = "blobid" + new Date().getTime();
+          //     const blobCache = tinymce.activeEditor.editorUpload.blobCache;
+          //     const base64 = reader.result.split(",")[1];
+          //     const blobInfo = blobCache.create(id, file, base64);
+          //     blobCache.add(blobInfo);
+
+          //     /* call the callback and populate the Title field with the file name */
+          //     cb(blobInfo.blobUri(), { title: file.name });
+          //   });
+          //   reader.readAsDataURL(file);
+          // });
+
+          input.click();
+        },
+      }}
+      {...props}
+    />
+  );
+};
+
+export { Editor };
diff --git a/apps/cs/src/pages/banner/ui/banner-form.tsx b/apps/cs/src/pages/banner/ui/banner-form.tsx
index 49c9cc6a1..a39be8c1a 100644
--- a/apps/cs/src/pages/banner/ui/banner-form.tsx
+++ b/apps/cs/src/pages/banner/ui/banner-form.tsx
@@ -30,7 +30,7 @@ import { handleUpload } from "../lib/utils";
 
 type BannerFormProps = {
   form: UseFormReturn<BannerFormData>;
-  bnrSn?: string;
+  bnrSn?: number;
   handleSave: (data: BannerFormData) => Promise<void>;
   handleDelete?: () => Promise<void>;
 };
diff --git a/apps/cs/src/pages/banner/ui/modify-page.tsx b/apps/cs/src/pages/banner/ui/modify-page.tsx
index 7af0f246b..024e334c1 100644
--- a/apps/cs/src/pages/banner/ui/modify-page.tsx
+++ b/apps/cs/src/pages/banner/ui/modify-page.tsx
@@ -108,7 +108,7 @@ function ModifyPage({ sequential }: { sequential: string }) {
           </div>
           <BannerForm
             form={form}
-            bnrSn={sequential}
+            bnrSn={Number(sequential)}
             handleSave={updateBanner}
             handleDelete={deleteBanner}
           />
diff --git a/apps/cs/src/pages/image/ui/image-form.tsx b/apps/cs/src/pages/image/ui/image-form.tsx
index 4a768811b..9a5857b31 100644
--- a/apps/cs/src/pages/image/ui/image-form.tsx
+++ b/apps/cs/src/pages/image/ui/image-form.tsx
@@ -24,11 +24,12 @@ import { AttachmentApi } from "@/entities/attachment";
 import { ENDPOINT } from "@/shared/config";
 import { useTus } from "@/shared/lib/use-tus";
 import { FormControl, FormField, FormItem } from "@/shared/ui/form";
+import { useAttachmentStore } from "@/shared/lib/use-attachment-store";
 import type { ImageFormData } from "../model/image-interface";
 
 type ImageFormProps = {
   form: UseFormReturn<ImageFormData>;
-  imgSn?: string;
+  imgSn?: number;
   handleSave: (data: ImageFormData) => Promise<void>;
   handleDelete?: () => Promise<void>;
 };
@@ -43,6 +44,7 @@ function ImageForm({ form, imgSn, ...props }: ImageFormProps) {
     progress,
     setFile,
   } = useTus();
+  const { setAttachmentFileCode } = useAttachmentStore((state) => state);
   const [imageUrl, setImageUrl] = useState("");
 
   const { data: attachmentData } = useQuery({
@@ -201,6 +203,7 @@ function ImageForm({ form, imgSn, ...props }: ImageFormProps) {
                             onUpload={(e) => {
                               const files = e.target.files;
                               if (!files) return;
+                              setAttachmentFileCode("");
                               setFile(files[0] ?? null);
                             }}
                             customPreview={
diff --git a/apps/cs/src/pages/image/ui/modify-page.tsx b/apps/cs/src/pages/image/ui/modify-page.tsx
index 1405ed1f2..cf51acd6a 100644
--- a/apps/cs/src/pages/image/ui/modify-page.tsx
+++ b/apps/cs/src/pages/image/ui/modify-page.tsx
@@ -104,7 +104,7 @@ function ModifyPage({ sequential }: { sequential: string }) {
           </div>
           <ImageForm
             form={form}
-            imgSn={sequential}
+            imgSn={Number(sequential)}
             handleSave={updateImage}
             handleDelete={deleteImage}
           />
diff --git a/apps/cs/src/pages/template/api/template-service.ts b/apps/cs/src/pages/template/api/template-service.ts
index 6f2d1f73a..9a1fe4c5e 100644
--- a/apps/cs/src/pages/template/api/template-service.ts
+++ b/apps/cs/src/pages/template/api/template-service.ts
@@ -5,6 +5,7 @@ import type {
   TemplateList,
   TemplateParams,
   TemplateFormData,
+  Template,
 } from "../model/template-interface";
 
 export class TemplateApiService implements TemplateService {
@@ -16,6 +17,13 @@ export class TemplateApiService implements TemplateService {
     return response.data;
   }
 
+  public async getTemplateInfo(tmpltSn: string): Promise<Template> {
+    const response = await client.get<Template>(
+      `${ENDPOINT.CMS_SERVICE.TEMPLATE}/${tmpltSn}`,
+    );
+    return response.data;
+  }
+
   public async createTemplate(data: TemplateFormData): Promise<void> {
     const response = await client.post<void>(
       `${ENDPOINT.CMS_SERVICE.TEMPLATE}`,
@@ -23,6 +31,17 @@ export class TemplateApiService implements TemplateService {
     );
     return response.data;
   }
+
+  public async updateTemplate(
+    tmpltSn: string,
+    data: TemplateFormData,
+  ): Promise<void> {
+    const response = await client.put<void>(
+      `${ENDPOINT.CMS_SERVICE.TEMPLATE}/${tmpltSn}`,
+      data,
+    );
+    return response.data;
+  }
 }
 
 export const TemplateApi = new TemplateApiService();
diff --git a/apps/cs/src/pages/template/index.ts b/apps/cs/src/pages/template/index.ts
index 220fd50c6..9db5d7fc0 100644
--- a/apps/cs/src/pages/template/index.ts
+++ b/apps/cs/src/pages/template/index.ts
@@ -1,2 +1,3 @@
 export { CreatePage } from "./ui/create-page";
+export { ModifyPage } from "./ui/modify-page";
 export { TemplatePage } from "./ui/template-page";
diff --git a/apps/cs/src/pages/template/model/template-interface.ts b/apps/cs/src/pages/template/model/template-interface.ts
index 306fe8197..c6dfe7a89 100644
--- a/apps/cs/src/pages/template/model/template-interface.ts
+++ b/apps/cs/src/pages/template/model/template-interface.ts
@@ -11,10 +11,14 @@ export interface TemplateParams extends PageableParams {
 export interface Template {
   tmpltSn: number;
   tmpltNm: string;
+  tmpltCn: string;
   tmpltSeCd: string;
   tmpltSeNm: string;
   useYn: string;
+  delYn: string;
+  regDt: string;
   mdfcnDt: string;
+  rgTrNm: string;
   mdfr: string;
   mdfrNm: string;
 }
@@ -23,12 +27,14 @@ export const templateFormSchema = z.object({
   tmpltNm: z.string(),
   tmpltCn: z.string(),
   tmpltSeCd: z.string(),
-  useYn: z.string(),
+  useYn: z.string().nullish(),
 });
 
 export type TemplateList = PageableList<Template>;
 export type TemplateFormData = z.infer<typeof templateFormSchema>;
 export interface TemplateService {
   getTemplateList(params: TemplateParams): Promise<TemplateList>;
+  getTemplateInfo(tmpltSn: string): Promise<Template>;
   createTemplate(data: TemplateFormData): Promise<void>;
+  updateTemplate(tmpltSn: string, data: TemplateFormData): Promise<void>;
 }
diff --git a/apps/cs/src/pages/template/ui/modify-page.tsx b/apps/cs/src/pages/template/ui/modify-page.tsx
new file mode 100644
index 000000000..7389cda95
--- /dev/null
+++ b/apps/cs/src/pages/template/ui/modify-page.tsx
@@ -0,0 +1,50 @@
+"use client";
+
+import { useForm } from "react-hook-form";
+import { useMutation, useQuery } from "@tanstack/react-query";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { ENDPOINT } from "@/shared/config";
+import { useAlertStore } from "@/shared/lib/use-alert-store";
+import {
+  templateFormSchema,
+  type TemplateFormData,
+} from "../model/template-interface";
+import { TemplateApi } from "../api/template-service";
+import { TemplateForm } from "./template-form";
+
+function ModifyPage({ sequential }: { sequential: string }) {
+  const { setMessage: alert } = useAlertStore((state) => state);
+
+  const { data: templateDetail } = useQuery({
+    queryKey: [ENDPOINT.CMS_SERVICE.TEMPLATE, sequential],
+    queryFn: () => TemplateApi.getTemplateInfo(sequential),
+  });
+
+  const { mutateAsync: updateTemplate } = useMutation({
+    mutationFn: (data: TemplateFormData) =>
+      TemplateApi.updateTemplate(sequential, data),
+    onSuccess: () => {
+      alert("수정되었습니다.");
+    },
+  });
+
+  const form = useForm<TemplateFormData>({
+    resolver: zodResolver(templateFormSchema),
+    values: templateDetail,
+  });
+
+  return (
+    <div className="card card-border !mb-0 !mt-6">
+      <div className="card-header">
+        <h3 className="text-2xl font-medium text-label">템플릿 수정</h3>
+      </div>
+      <TemplateForm
+        form={form}
+        tmpltSn={Number(sequential)}
+        handleSave={updateTemplate}
+      />
+    </div>
+  );
+}
+
+export { ModifyPage };
diff --git a/apps/cs/src/pages/template/ui/template-form.tsx b/apps/cs/src/pages/template/ui/template-form.tsx
index 07f18186d..7d443e420 100644
--- a/apps/cs/src/pages/template/ui/template-form.tsx
+++ b/apps/cs/src/pages/template/ui/template-form.tsx
@@ -17,7 +17,7 @@ import { FormItem, FormControl, FormField } from "@/shared/ui/form";
 import type { TemplateFormData } from "../model/template-interface";
 
 const Editor = dynamic(
-  () => import("@/shared/ui/editor").then((module) => module.Editor),
+  () => import("@/entities/editor").then((module) => module.Editor),
   { ssr: false },
 );
 
@@ -34,8 +34,8 @@ function TemplateForm({ form, tmpltSn, ...props }: TemplateFormProps) {
       <div className="card">
         <Table variant="secondary">
           <colgroup>
-            <col width="20%" />
-            <col width="80%" />
+            <col width="10%" />
+            <col width="90%" />
           </colgroup>
           <TableBody>
             <TableRow>
@@ -85,10 +85,13 @@ function TemplateForm({ form, tmpltSn, ...props }: TemplateFormProps) {
                 <FormField
                   control={form.control}
                   name="tmpltCn"
-                  render={() => (
+                  render={({ field }) => (
                     <FormItem>
                       <FormControl>
-                        <Editor />
+                        <Editor
+                          value={field.value ?? ""}
+                          onEditorChange={field.onChange}
+                        />
                       </FormControl>
                     </FormItem>
                   )}
@@ -107,6 +110,7 @@ function TemplateForm({ form, tmpltSn, ...props }: TemplateFormProps) {
                         <RadioGroup
                           {...field}
                           name="useYn"
+                          value={field.value ?? ""}
                           onValueChange={field.onChange}
                         >
                           <div className="flex items-center space-x-2">
diff --git a/apps/cs/src/shared/config/api.ts b/apps/cs/src/shared/config/api.ts
index 6ed82dec1..cb140e5ea 100644
--- a/apps/cs/src/shared/config/api.ts
+++ b/apps/cs/src/shared/config/api.ts
@@ -5,6 +5,7 @@ export const BASE_URL = `${PROXY_HOST}/server`;
 export const ENDPOINT = {
   ATTACH_SERVICE: {
     TUS_UPLOAD: "/attach-service/api/v1/tus/upload",
+    EDITOR_UPLOAD: "/attach-service/api/v1/upload/editor",
     IMAGES: "/attach-service/api/v1/images",
     ATTACHMENTS: "/attach-service/api/v1/atfl/attachments",
   },
diff --git a/apps/cs/src/shared/lib/use-attachment-store.ts b/apps/cs/src/shared/lib/use-attachment-store.ts
new file mode 100644
index 000000000..285699cc6
--- /dev/null
+++ b/apps/cs/src/shared/lib/use-attachment-store.ts
@@ -0,0 +1,14 @@
+import { useStore } from "zustand";
+import { useContext } from "react";
+import type { AttachmentStore } from "../store/attachment-store";
+import { StoreContext } from "../providers/store-provider";
+
+export const useAttachmentStore = <T>(
+  selector: (store: AttachmentStore) => T,
+): T => {
+  const store = useContext(StoreContext);
+  if (!store) {
+    throw new Error("useAttachmentStore must be used within StoreProvider");
+  }
+  return useStore(store.attachmentStore, selector);
+};
diff --git a/apps/cs/src/shared/providers/store-provider.tsx b/apps/cs/src/shared/providers/store-provider.tsx
index 82783bdac..a0ec17b61 100644
--- a/apps/cs/src/shared/providers/store-provider.tsx
+++ b/apps/cs/src/shared/providers/store-provider.tsx
@@ -1,10 +1,16 @@
 "use client";
 
 import { createContext, useRef } from "react";
-import { createAlertStore, createMenuStore, createUserStore } from "../store";
+import {
+  createAlertStore,
+  createAttachmentStore,
+  createMenuStore,
+  createUserStore,
+} from "../store";
 
 type StoreContextType = {
   alertStore: ReturnType<typeof createAlertStore>;
+  attachmentStore: ReturnType<typeof createAttachmentStore>;
   menuStore: ReturnType<typeof createMenuStore>;
   userStore: ReturnType<typeof createUserStore>;
 };
@@ -18,6 +24,7 @@ export const StoreProvider = ({ children }: { children: React.ReactNode }) => {
   if (storeRef.current === null) {
     storeRef.current = {
       alertStore: createAlertStore(),
+      attachmentStore: createAttachmentStore(),
       menuStore: createMenuStore(),
       userStore: createUserStore(),
     };
diff --git a/apps/cs/src/shared/store/attachment-store.ts b/apps/cs/src/shared/store/attachment-store.ts
new file mode 100644
index 000000000..faa700949
--- /dev/null
+++ b/apps/cs/src/shared/store/attachment-store.ts
@@ -0,0 +1,25 @@
+import { createStore } from "zustand/vanilla";
+
+export type AttachmentState = {
+  attachmentFileCode: string;
+};
+
+export type AttachmentActions = {
+  setAttachmentFileCode: (attachmentFileCode: string) => void;
+};
+
+export type AttachmentStore = AttachmentState & AttachmentActions;
+
+export const defaultInitState: AttachmentState = {
+  attachmentFileCode: "",
+};
+
+export const createAttachmentStore = (
+  initState: AttachmentState = defaultInitState,
+) => {
+  return createStore<AttachmentStore>()((set) => ({
+    ...initState,
+    setAttachmentFileCode: (attachmentFileCode: string) =>
+      set({ attachmentFileCode }),
+  }));
+};
diff --git a/apps/cs/src/shared/store/index.ts b/apps/cs/src/shared/store/index.ts
index 73c608f05..e26f6781e 100644
--- a/apps/cs/src/shared/store/index.ts
+++ b/apps/cs/src/shared/store/index.ts
@@ -1,3 +1,4 @@
 export { createAlertStore } from "./alert-store";
+export { createAttachmentStore } from "./attachment-store";
 export { createMenuStore } from "./menu-store";
 export { createUserStore, type IUserInfo } from "./user-store";
diff --git a/apps/cs/src/shared/ui/editor.tsx b/apps/cs/src/shared/ui/editor.tsx
deleted file mode 100644
index 731b13f46..000000000
--- a/apps/cs/src/shared/ui/editor.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import { Editor as TinyEditor } from "@tinymce/tinymce-react";
-
-const Editor = () => {
-  return (
-    <TinyEditor
-      apiKey={process.env.NEXT_PUBLIC_TINY_API_KEY}
-      init={{
-        language: "ko_KR",
-        height: 500,
-        menubar: false,
-        plugins: "lists advlist table",
-        toolbar:
-          "undo redo | blocks fontfamily fontsize | bold italic underline strikethrough forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist blockquote | table",
-      }}
-    />
-  );
-};
-
-export { Editor };

From 694cd4893e2fdd8ab4332437ccc2c0f6b620e27a Mon Sep 17 00:00:00 2001
From: bicochan <chanii8@naver.com>
Date: Thu, 10 Apr 2025 18:18:35 +0900
Subject: [PATCH 35/38] =?UTF-8?q?chore:=20getCurrentMenu=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/cs/src/entities/menu/lib/utils.ts          | 6 +++++-
 apps/cs/src/pages/banner/ui/banner-form.tsx     | 4 ++--
 apps/cs/src/pages/image/ui/image-form.tsx       | 4 ++--
 apps/cs/src/pages/menu/ui/base-menu-form.tsx    | 4 ++--
 apps/cs/src/pages/menu/ui/type-menu-form.tsx    | 4 ++--
 apps/cs/src/pages/site/ui/site-form.tsx         | 4 ++--
 apps/cs/src/pages/template/ui/template-form.tsx | 4 ++--
 7 files changed, 17 insertions(+), 13 deletions(-)

diff --git a/apps/cs/src/entities/menu/lib/utils.ts b/apps/cs/src/entities/menu/lib/utils.ts
index d526b34b4..1cf4514d9 100644
--- a/apps/cs/src/entities/menu/lib/utils.ts
+++ b/apps/cs/src/entities/menu/lib/utils.ts
@@ -5,7 +5,11 @@ export const getCurrentMenu = (
   pathname: string,
 ): MenuItem | null => {
   for (const menu of menus) {
-    if (menu.urlPath === pathname) return menu;
+    if (
+      menu.urlPath !== "" &&
+      (menu.urlPath === pathname || pathname.startsWith(menu.urlPath))
+    )
+      return menu;
 
     if (menu.children) {
       const children = getCurrentMenu(menu.children, pathname);
diff --git a/apps/cs/src/pages/banner/ui/banner-form.tsx b/apps/cs/src/pages/banner/ui/banner-form.tsx
index a39be8c1a..b0a31d775 100644
--- a/apps/cs/src/pages/banner/ui/banner-form.tsx
+++ b/apps/cs/src/pages/banner/ui/banner-form.tsx
@@ -77,8 +77,8 @@ function BannerForm({ form, bnrSn, ...props }: BannerFormProps) {
       <div className="card">
         <Table variant="secondary">
           <colgroup>
-            <col width="20%" />
-            <col width="80%" />
+            <col width="15%" />
+            <col width="85%" />
           </colgroup>
           <TableBody>
             <TableRow>
diff --git a/apps/cs/src/pages/image/ui/image-form.tsx b/apps/cs/src/pages/image/ui/image-form.tsx
index 9a5857b31..b5c3de013 100644
--- a/apps/cs/src/pages/image/ui/image-form.tsx
+++ b/apps/cs/src/pages/image/ui/image-form.tsx
@@ -83,8 +83,8 @@ function ImageForm({ form, imgSn, ...props }: ImageFormProps) {
       <div className="card">
         <Table variant="secondary">
           <colgroup>
-            <col width="20%" />
-            <col width="80%" />
+            <col width="15%" />
+            <col width="85%" />
           </colgroup>
           <TableBody>
             <TableRow>
diff --git a/apps/cs/src/pages/menu/ui/base-menu-form.tsx b/apps/cs/src/pages/menu/ui/base-menu-form.tsx
index 1af5bca3a..26ead2bb1 100644
--- a/apps/cs/src/pages/menu/ui/base-menu-form.tsx
+++ b/apps/cs/src/pages/menu/ui/base-menu-form.tsx
@@ -22,8 +22,8 @@ function BaseMenuForm({ form, menuCd }: BaseMenuFormProps) {
   return (
     <Table variant="secondary">
       <colgroup>
-        <col width="20%" />
-        <col width="80%" />
+        <col width="15%" />
+        <col width="85%" />
       </colgroup>
       <TableBody>
         {menuCd && (
diff --git a/apps/cs/src/pages/menu/ui/type-menu-form.tsx b/apps/cs/src/pages/menu/ui/type-menu-form.tsx
index b2e6d98e2..210c36f17 100644
--- a/apps/cs/src/pages/menu/ui/type-menu-form.tsx
+++ b/apps/cs/src/pages/menu/ui/type-menu-form.tsx
@@ -55,8 +55,8 @@ function TypeMenuForm({ form, menuType }: TypeMenuFormProps) {
   return (
     <Table variant="secondary" className="-mt-[0.1rem]">
       <colgroup>
-        <col width="20%" />
-        <col width="80%" />
+        <col width="15%" />
+        <col width="85%" />
       </colgroup>
       <TableBody>
         {menuType === "CONTENTS" && (
diff --git a/apps/cs/src/pages/site/ui/site-form.tsx b/apps/cs/src/pages/site/ui/site-form.tsx
index 0f9a30b55..f624a81b7 100644
--- a/apps/cs/src/pages/site/ui/site-form.tsx
+++ b/apps/cs/src/pages/site/ui/site-form.tsx
@@ -44,8 +44,8 @@ function SiteForm({ form, siteId, ...props }: SiteFormProps) {
       <div className="card">
         <Table variant="secondary">
           <colgroup>
-            <col width="20%" />
-            <col width="80%" />
+            <col width="15%" />
+            <col width="85%" />
           </colgroup>
           <TableBody>
             <TableRow>
diff --git a/apps/cs/src/pages/template/ui/template-form.tsx b/apps/cs/src/pages/template/ui/template-form.tsx
index 7d443e420..8716afe00 100644
--- a/apps/cs/src/pages/template/ui/template-form.tsx
+++ b/apps/cs/src/pages/template/ui/template-form.tsx
@@ -34,8 +34,8 @@ function TemplateForm({ form, tmpltSn, ...props }: TemplateFormProps) {
       <div className="card">
         <Table variant="secondary">
           <colgroup>
-            <col width="10%" />
-            <col width="90%" />
+            <col width="15%" />
+            <col width="85%" />
           </colgroup>
           <TableBody>
             <TableRow>

From 73393426aab2dbcbd643d7ef8ae1662e88b4c4cf Mon Sep 17 00:00:00 2001
From: bicochan <chanii8@naver.com>
Date: Fri, 11 Apr 2025 11:44:14 +0900
Subject: [PATCH 36/38] =?UTF-8?q?feat:=20tinymce=20=EC=97=90=EB=94=94?=
 =?UTF-8?q?=ED=84=B0=20=EC=9E=91=EC=97=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/entities/editor/lib/blob-to-base64.ts | 10 ++
 .../entities/editor/lib/generate-file-info.ts | 16 +++
 apps/cs/src/entities/editor/ui/editor.tsx     | 98 +++++++++----------
 3 files changed, 70 insertions(+), 54 deletions(-)
 create mode 100644 apps/cs/src/entities/editor/lib/blob-to-base64.ts
 create mode 100644 apps/cs/src/entities/editor/lib/generate-file-info.ts

diff --git a/apps/cs/src/entities/editor/lib/blob-to-base64.ts b/apps/cs/src/entities/editor/lib/blob-to-base64.ts
new file mode 100644
index 000000000..2f0e68c0f
--- /dev/null
+++ b/apps/cs/src/entities/editor/lib/blob-to-base64.ts
@@ -0,0 +1,10 @@
+export const blobToBase64 = (blob: Blob): Promise<string> => {
+  return new Promise((resolve) => {
+    const reader = new FileReader();
+    reader.onload = () => {
+      const base64 = reader.result as string;
+      resolve(base64.split(",")[1] || "");
+    };
+    reader.readAsDataURL(blob);
+  });
+};
diff --git a/apps/cs/src/entities/editor/lib/generate-file-info.ts b/apps/cs/src/entities/editor/lib/generate-file-info.ts
new file mode 100644
index 000000000..c36ed3577
--- /dev/null
+++ b/apps/cs/src/entities/editor/lib/generate-file-info.ts
@@ -0,0 +1,16 @@
+import { blobToBase64 } from "./blob-to-base64";
+
+export const generateFileInfo = async (blobInfo: {
+  blob: () => Blob;
+  filename: () => string;
+}) => {
+  const blob = blobInfo.blob();
+  const base64 = await blobToBase64(blob);
+  return {
+    fieldName: `${blob.type.split("/")[1]}`,
+    fileType: blob.type,
+    fileBase64: base64,
+    originalName: blobInfo.filename(),
+    size: blob.size,
+  };
+};
diff --git a/apps/cs/src/entities/editor/ui/editor.tsx b/apps/cs/src/entities/editor/ui/editor.tsx
index e55bf89a0..b5ef02153 100644
--- a/apps/cs/src/entities/editor/ui/editor.tsx
+++ b/apps/cs/src/entities/editor/ui/editor.tsx
@@ -1,66 +1,56 @@
-import { Editor as TinyEditor, type IAllProps } from "@tinymce/tinymce-react";
+import { useRef } from "react";
+import {
+  Editor as TinyEditor,
+  type Editor as TinyEditorInstance,
+  type IAllProps,
+} from "@tinymce/tinymce-react";
 import { editorBaseConfig as baseConfig } from "../model/editor-base-config";
+import { generateFileInfo } from "../lib/generate-file-info";
 import { EditorApi } from "../api/editor-service";
 
 const Editor = ({ ...props }: IAllProps) => {
+  const editorRef = useRef<TinyEditorInstance | null>(null);
+
+  const imagesUploadHandler = (blobInfo: {
+    blob: () => Blob;
+    filename: () => string;
+  }) => {
+    return new Promise(async (resolve) => {
+      const fileInfo = await generateFileInfo(blobInfo);
+      const data = await EditorApi.uploadImage(fileInfo);
+      resolve(data.url);
+    });
+  };
+
+  const filePickerCallback = (
+    callback: (base64: string, meta: { title: string }) => void,
+  ) => {
+    const input = document.createElement("input");
+    input.setAttribute("type", "file");
+    input.setAttribute("accept", "image/*");
+    input.onchange = async () => {
+      const file = input.files?.[0];
+      if (!file) return;
+      const reader = new FileReader();
+      reader.onload = async () => {
+        const base64 = reader.result as string;
+        callback(base64, { title: file.name });
+      };
+      reader.readAsDataURL(file);
+    };
+    input.click();
+  };
+
   return (
     <TinyEditor
       {...baseConfig}
+      onInit={(_: unknown, editor: TinyEditorInstance) => {
+        editorRef.current = editor;
+      }}
       init={{
         ...baseConfig.init,
-        images_upload_handler: (blobInfo: {
-          blob: () => Blob;
-          filename: () => string;
-        }) =>
-          new Promise(async (resolve) => {
-            const blob = blobInfo.blob();
-            const fileInfo = {
-              fieldName: `${blob.type.split("/")[1]}`,
-              fileType: blob.type,
-              fileBase64: "",
-              originalName: blobInfo.filename(),
-              size: blob.size,
-            };
-
-            const reader = new FileReader();
-            reader.onload = async () => {
-              const base64 = reader.result as string;
-              fileInfo.fileBase64 = base64.split(",")[1] || "";
-
-              const data = await EditorApi.uploadImage(fileInfo);
-              resolve(data.url);
-            };
-            reader.readAsDataURL(blob);
-          }),
-        file_picker_callback() {
-          const input = document.createElement("input");
-          input.setAttribute("type", "file");
-          input.setAttribute("accept", "image/*");
-
-          // input.addEventListener("change", (e) => {
-          //   const file = e.target.files[0];
-
-          //   const reader = new FileReader();
-          //   reader.addEventListener("load", () => {
-          //     /*
-          //       Note: Now we need to register the blob in TinyMCEs image blob
-          //       registry. In the next release this part hopefully won't be
-          //       necessary, as we are looking to handle it internally.
-          //     */
-          //     const id = "blobid" + new Date().getTime();
-          //     const blobCache = tinymce.activeEditor.editorUpload.blobCache;
-          //     const base64 = reader.result.split(",")[1];
-          //     const blobInfo = blobCache.create(id, file, base64);
-          //     blobCache.add(blobInfo);
-
-          //     /* call the callback and populate the Title field with the file name */
-          //     cb(blobInfo.blobUri(), { title: file.name });
-          //   });
-          //   reader.readAsDataURL(file);
-          // });
-
-          input.click();
-        },
+        images_upload_handler: imagesUploadHandler,
+        file_picker_callback: filePickerCallback,
       }}
       {...props}
     />

From 0ef244a5b2fe35e2d01bcc0b0b4e73255fa842a6 Mon Sep 17 00:00:00 2001
From: bicochan <chanii8@naver.com>
Date: Fri, 11 Apr 2025 14:31:58 +0900
Subject: [PATCH 37/38] =?UTF-8?q?design:=20=ED=8E=98=EC=9D=B4=EC=A7=80=20?=
 =?UTF-8?q?=EB=A0=88=EC=9D=B4=EC=95=84=EC=9B=83=20=ED=95=98=EB=8B=A8=20?=
 =?UTF-8?q?=EC=97=AC=EB=B0=B1=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/cs/src/shared/ui/page-layout.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/cs/src/shared/ui/page-layout.tsx b/apps/cs/src/shared/ui/page-layout.tsx
index 6813173a1..17100389a 100644
--- a/apps/cs/src/shared/ui/page-layout.tsx
+++ b/apps/cs/src/shared/ui/page-layout.tsx
@@ -9,7 +9,7 @@ function PageLayout({ children }: { children: React.ReactNode }) {
     .map((path) => path.trim());
 
   return (
-    <div className="h-auto min-h-full bg-container">
+    <div className="h-auto min-h-full bg-container pb-2">
       <PageTitle
         title={currentMenuInfo?.menuKornNm ?? ""}
         menuPaths={menuPaths ?? []}

From b9a593876199e15e689ba2ebc33ea449282cffe3 Mon Sep 17 00:00:00 2001
From: bicochan <chanii8@naver.com>
Date: Fri, 11 Apr 2025 15:15:12 +0900
Subject: [PATCH 38/38] =?UTF-8?q?feat:=20=EC=95=BD=EA=B4=80=EA=B4=80?=
 =?UTF-8?q?=EB=A6=AC=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=9E=91=EC=97=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/cs/app/(with-base-layout)/terms/page.tsx |   2 +
 .../terms/register/[sequential]/page.tsx      |  10 ++
 .../terms/register/page.tsx                   |   2 +
 apps/cs/src/entities/site/api/site-service.ts |   5 +-
 apps/cs/src/pages/banner/ui/banner-page.tsx   |   4 -
 apps/cs/src/pages/image/ui/image-page.tsx     |   4 -
 apps/cs/src/pages/menu/api/menu-service.ts    |   5 +-
 apps/cs/src/pages/site/ui/site-page.tsx       |   4 -
 .../pages/template/api/template-service.ts    |   4 +
 .../template/model/template-interface.ts      |   2 +
 apps/cs/src/pages/template/ui/modify-page.tsx |  10 ++
 .../src/pages/template/ui/template-page.tsx   |   8 +-
 apps/cs/src/pages/terms/api/terms-service.ts  |  48 ++++++
 apps/cs/src/pages/terms/index.ts              |   3 +
 .../src/pages/terms/model/terms-interface.ts  |  41 ++++++
 .../pages/terms/model/terms-table-columns.tsx |  35 +++++
 apps/cs/src/pages/terms/ui/create-page.tsx    |  40 +++++
 apps/cs/src/pages/terms/ui/modify-page.tsx    |  56 +++++++
 apps/cs/src/pages/terms/ui/terms-form.tsx     | 138 ++++++++++++++++++
 apps/cs/src/pages/terms/ui/terms-page.tsx     | 118 +++++++++++++++
 apps/cs/src/shared/config/api.ts              |   1 +
 21 files changed, 514 insertions(+), 26 deletions(-)
 create mode 100644 apps/cs/app/(with-base-layout)/terms/page.tsx
 create mode 100644 apps/cs/app/(with-base-layout)/terms/register/[sequential]/page.tsx
 create mode 100644 apps/cs/app/(with-base-layout)/terms/register/page.tsx
 create mode 100644 apps/cs/src/pages/terms/api/terms-service.ts
 create mode 100644 apps/cs/src/pages/terms/index.ts
 create mode 100644 apps/cs/src/pages/terms/model/terms-interface.ts
 create mode 100644 apps/cs/src/pages/terms/model/terms-table-columns.tsx
 create mode 100644 apps/cs/src/pages/terms/ui/create-page.tsx
 create mode 100644 apps/cs/src/pages/terms/ui/modify-page.tsx
 create mode 100644 apps/cs/src/pages/terms/ui/terms-form.tsx
 create mode 100644 apps/cs/src/pages/terms/ui/terms-page.tsx

diff --git a/apps/cs/app/(with-base-layout)/terms/page.tsx b/apps/cs/app/(with-base-layout)/terms/page.tsx
new file mode 100644
index 000000000..47f4c8e02
--- /dev/null
+++ b/apps/cs/app/(with-base-layout)/terms/page.tsx
@@ -0,0 +1,2 @@
+import { TermsPage } from "@/pages/terms";
+export default TermsPage;
diff --git a/apps/cs/app/(with-base-layout)/terms/register/[sequential]/page.tsx b/apps/cs/app/(with-base-layout)/terms/register/[sequential]/page.tsx
new file mode 100644
index 000000000..8ff8b2010
--- /dev/null
+++ b/apps/cs/app/(with-base-layout)/terms/register/[sequential]/page.tsx
@@ -0,0 +1,10 @@
+import { ModifyPage as VModifyPage } from "@/pages/terms";
+
+export default async function ModifyPage({
+  params,
+}: {
+  params: Promise<{ sequential: string }>;
+}) {
+  const { sequential } = await params;
+  return <VModifyPage sequential={sequential} />;
+}
diff --git a/apps/cs/app/(with-base-layout)/terms/register/page.tsx b/apps/cs/app/(with-base-layout)/terms/register/page.tsx
new file mode 100644
index 000000000..997fc119a
--- /dev/null
+++ b/apps/cs/app/(with-base-layout)/terms/register/page.tsx
@@ -0,0 +1,2 @@
+import { CreatePage } from "@/pages/terms";
+export default CreatePage;
diff --git a/apps/cs/src/entities/site/api/site-service.ts b/apps/cs/src/entities/site/api/site-service.ts
index 68c520093..a5d9d7cd6 100644
--- a/apps/cs/src/entities/site/api/site-service.ts
+++ b/apps/cs/src/entities/site/api/site-service.ts
@@ -44,10 +44,7 @@ export class SiteApiService implements SiteService {
   }
 
   public async deleteSite(siteId: string): Promise<void> {
-    const response = await client.delete<void>(
-      `${ENDPOINT.CMS_SERVICE.SITES}/${siteId}`,
-    );
-    return response.data;
+    await client.delete(`${ENDPOINT.CMS_SERVICE.SITES}/${siteId}`);
   }
 }
 
diff --git a/apps/cs/src/pages/banner/ui/banner-page.tsx b/apps/cs/src/pages/banner/ui/banner-page.tsx
index 0efc89602..3f0cf5242 100644
--- a/apps/cs/src/pages/banner/ui/banner-page.tsx
+++ b/apps/cs/src/pages/banner/ui/banner-page.tsx
@@ -94,10 +94,6 @@ function BannerPage() {
     setPostingTargets(postingTargets);
   }, [rowSelection]);
 
-  useEffect(() => {
-    refetch();
-  }, []);
-
   useEffect(() => {
     refetch();
   }, [pagination]);
diff --git a/apps/cs/src/pages/image/ui/image-page.tsx b/apps/cs/src/pages/image/ui/image-page.tsx
index 18d2fa2fb..3571a4a1f 100644
--- a/apps/cs/src/pages/image/ui/image-page.tsx
+++ b/apps/cs/src/pages/image/ui/image-page.tsx
@@ -83,10 +83,6 @@ function ImagePage() {
     setPostingTargets(postingTargets);
   }, [rowSelection]);
 
-  useEffect(() => {
-    refetch();
-  }, []);
-
   useEffect(() => {
     refetch();
   }, [pagination]);
diff --git a/apps/cs/src/pages/menu/api/menu-service.ts b/apps/cs/src/pages/menu/api/menu-service.ts
index 7598c2abb..dbb67cb3e 100644
--- a/apps/cs/src/pages/menu/api/menu-service.ts
+++ b/apps/cs/src/pages/menu/api/menu-service.ts
@@ -36,10 +36,7 @@ export class MenuApiService implements MenuService {
   }
 
   public async deleteMenu(menuCd: number): Promise<void> {
-    const response = await client.delete<void>(
-      `${ENDPOINT.CMS_SERVICE.MENUS}/${menuCd}`,
-    );
-    return response.data;
+    await client.delete(`${ENDPOINT.CMS_SERVICE.MENUS}/${menuCd}`);
   }
 
   public async getTreeMenuList(siteId: string): Promise<TreeMenu[]> {
diff --git a/apps/cs/src/pages/site/ui/site-page.tsx b/apps/cs/src/pages/site/ui/site-page.tsx
index 0d6ff4a82..9ffd1294e 100644
--- a/apps/cs/src/pages/site/ui/site-page.tsx
+++ b/apps/cs/src/pages/site/ui/site-page.tsx
@@ -59,10 +59,6 @@ function SitePage() {
     manualPagination: true,
   });
 
-  useEffect(() => {
-    refetch();
-  }, []);
-
   useEffect(() => {
     refetch();
   }, [pagination]);
diff --git a/apps/cs/src/pages/template/api/template-service.ts b/apps/cs/src/pages/template/api/template-service.ts
index 9a1fe4c5e..27a8dfaa3 100644
--- a/apps/cs/src/pages/template/api/template-service.ts
+++ b/apps/cs/src/pages/template/api/template-service.ts
@@ -42,6 +42,10 @@ export class TemplateApiService implements TemplateService {
     );
     return response.data;
   }
+
+  public async deleteTemplate(tmpltSn: string): Promise<void> {
+    await client.delete(`${ENDPOINT.CMS_SERVICE.TEMPLATE}/${tmpltSn}`);
+  }
 }
 
 export const TemplateApi = new TemplateApiService();
diff --git a/apps/cs/src/pages/template/model/template-interface.ts b/apps/cs/src/pages/template/model/template-interface.ts
index c6dfe7a89..1a7bc170b 100644
--- a/apps/cs/src/pages/template/model/template-interface.ts
+++ b/apps/cs/src/pages/template/model/template-interface.ts
@@ -32,9 +32,11 @@ export const templateFormSchema = z.object({
 
 export type TemplateList = PageableList<Template>;
 export type TemplateFormData = z.infer<typeof templateFormSchema>;
+
 export interface TemplateService {
   getTemplateList(params: TemplateParams): Promise<TemplateList>;
   getTemplateInfo(tmpltSn: string): Promise<Template>;
   createTemplate(data: TemplateFormData): Promise<void>;
   updateTemplate(tmpltSn: string, data: TemplateFormData): Promise<void>;
+  deleteTemplate(tmpltSn: string): Promise<void>;
 }
diff --git a/apps/cs/src/pages/template/ui/modify-page.tsx b/apps/cs/src/pages/template/ui/modify-page.tsx
index 7389cda95..987725c7a 100644
--- a/apps/cs/src/pages/template/ui/modify-page.tsx
+++ b/apps/cs/src/pages/template/ui/modify-page.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import { useForm } from "react-hook-form";
+import { useRouter } from "next/navigation";
 import { useMutation, useQuery } from "@tanstack/react-query";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { ENDPOINT } from "@/shared/config";
@@ -13,6 +14,7 @@ import { TemplateApi } from "../api/template-service";
 import { TemplateForm } from "./template-form";
 
 function ModifyPage({ sequential }: { sequential: string }) {
+  const router = useRouter();
   const { setMessage: alert } = useAlertStore((state) => state);
 
   const { data: templateDetail } = useQuery({
@@ -28,6 +30,13 @@ function ModifyPage({ sequential }: { sequential: string }) {
     },
   });
 
+  const { mutateAsync: deleteTemplate } = useMutation({
+    mutationFn: () => TemplateApi.deleteTemplate(sequential),
+    onSuccess: () => {
+      alert("삭제되었습니다.", router.back);
+    },
+  });
+
   const form = useForm<TemplateFormData>({
     resolver: zodResolver(templateFormSchema),
     values: templateDetail,
@@ -42,6 +51,7 @@ function ModifyPage({ sequential }: { sequential: string }) {
         form={form}
         tmpltSn={Number(sequential)}
         handleSave={updateTemplate}
+        handleDelete={deleteTemplate}
       />
     </div>
   );
diff --git a/apps/cs/src/pages/template/ui/template-page.tsx b/apps/cs/src/pages/template/ui/template-page.tsx
index b107559fe..cb6c52433 100644
--- a/apps/cs/src/pages/template/ui/template-page.tsx
+++ b/apps/cs/src/pages/template/ui/template-page.tsx
@@ -13,12 +13,12 @@ import { CodeSelect } from "@/entities/code";
 import { ENDPOINT } from "@/shared/config";
 import { TemplateApi } from "../api/template-service";
 import { columns } from "../model/template-table-columns";
-import type { Template } from "../model/template-interface";
+import type { Template, TemplateParams } from "../model/template-interface";
 
 function TemplatePage() {
   const router = useRouter();
 
-  const [templateQuery, setTemplateQuery] = useState({
+  const [templateQuery, setTemplateQuery] = useState<TemplateParams>({
     tmpltSeCd: "",
     keyword: "",
   });
@@ -60,10 +60,6 @@ function TemplatePage() {
     manualPagination: true,
   });
 
-  useEffect(() => {
-    refetch();
-  }, []);
-
   useEffect(() => {
     refetch();
   }, [pagination]);
diff --git a/apps/cs/src/pages/terms/api/terms-service.ts b/apps/cs/src/pages/terms/api/terms-service.ts
new file mode 100644
index 000000000..2f06ada66
--- /dev/null
+++ b/apps/cs/src/pages/terms/api/terms-service.ts
@@ -0,0 +1,48 @@
+import { client } from "@/shared/api";
+import { ENDPOINT } from "@/shared/config";
+import type {
+  TermsService,
+  TermsList,
+  TermsParams,
+  TermsFormData,
+  Terms,
+} from "../model/terms-interface";
+
+export class TermsApiService implements TermsService {
+  public async getTermsList(params?: TermsParams): Promise<TermsList> {
+    const response = await client.get<TermsList>(
+      `${ENDPOINT.CMS_SERVICE.TERMS}`,
+      { params },
+    );
+    return response.data;
+  }
+
+  public async getTermsInfo(trmsSn: string): Promise<Terms> {
+    const response = await client.get<Terms>(
+      `${ENDPOINT.CMS_SERVICE.TERMS}/${trmsSn}`,
+    );
+    return response.data;
+  }
+
+  public async createTerms(data: TermsFormData): Promise<void> {
+    const response = await client.post<void>(
+      `${ENDPOINT.CMS_SERVICE.TERMS}`,
+      data,
+    );
+    return response.data;
+  }
+
+  public async updateTerms(trmsSn: string, data: TermsFormData): Promise<void> {
+    const response = await client.put<void>(
+      `${ENDPOINT.CMS_SERVICE.TERMS}/${trmsSn}`,
+      data,
+    );
+    return response.data;
+  }
+
+  public async deleteTerms(trmsSn: string): Promise<void> {
+    await client.delete(`${ENDPOINT.CMS_SERVICE.TERMS}/${trmsSn}`);
+  }
+}
+
+export const TermsApi = new TermsApiService();
diff --git a/apps/cs/src/pages/terms/index.ts b/apps/cs/src/pages/terms/index.ts
new file mode 100644
index 000000000..fc5d97a3a
--- /dev/null
+++ b/apps/cs/src/pages/terms/index.ts
@@ -0,0 +1,3 @@
+export { CreatePage } from "./ui/create-page";
+export { ModifyPage } from "./ui/modify-page";
+export { TermsPage } from "./ui/terms-page";
diff --git a/apps/cs/src/pages/terms/model/terms-interface.ts b/apps/cs/src/pages/terms/model/terms-interface.ts
new file mode 100644
index 000000000..14a0bb397
--- /dev/null
+++ b/apps/cs/src/pages/terms/model/terms-interface.ts
@@ -0,0 +1,41 @@
+import { z } from "zod";
+import type { PageableParams, PageableList } from "@/shared/model";
+
+export interface TermsParams extends PageableParams {
+  keywordType?: string;
+  keyword?: string;
+  trmsSeCd?: string;
+  useYn?: string;
+}
+
+export interface Terms {
+  trmsSn: number;
+  trmsTtl: string;
+  trmsCn: string;
+  trmsSeCd: string;
+  trmsSeNm: string;
+  useYn: string;
+  delYn: string;
+  regDt: string;
+  mdfcnDt: string;
+  rgTrNm: string;
+  mdfrNm: string;
+}
+
+export const termsFormSchema = z.object({
+  trmsTtl: z.string(),
+  trmsCn: z.string(),
+  trmsSeCd: z.string(),
+  useYn: z.string(),
+});
+
+export type TermsList = PageableList<Terms>;
+export type TermsFormData = z.infer<typeof termsFormSchema>;
+
+export interface TermsService {
+  getTermsList(params: TermsParams): Promise<TermsList>;
+  getTermsInfo(trmsSn: string): Promise<Terms>;
+  createTerms(data: TermsFormData): Promise<void>;
+  updateTerms(trmsSn: string, data: TermsFormData): Promise<void>;
+  deleteTerms(trmsSn: string): Promise<void>;
+}
diff --git a/apps/cs/src/pages/terms/model/terms-table-columns.tsx b/apps/cs/src/pages/terms/model/terms-table-columns.tsx
new file mode 100644
index 000000000..b70f47d42
--- /dev/null
+++ b/apps/cs/src/pages/terms/model/terms-table-columns.tsx
@@ -0,0 +1,35 @@
+import type { ColumnDef } from "@tanstack/react-table";
+import type { Terms } from "./terms-interface";
+import dayjs from "dayjs";
+
+export const columns: ColumnDef<Terms>[] = [
+  {
+    id: "no",
+    header: "NO",
+    cell: ({ row }) => row.index + 1,
+  },
+  {
+    accessorKey: "trmsTtl",
+    header: "약관명",
+  },
+  {
+    accessorKey: "trmsSeNm",
+    header: "약관구분",
+  },
+  {
+    accessorKey: "useYn",
+    header: "사용여부",
+  },
+  {
+    accessorKey: "mdfrNm",
+    header: "최종수정자",
+  },
+  {
+    accessorKey: "mdfcnDt",
+    header: "최종수정일",
+    cell: ({ row }) => {
+      const date = row.getValue("mdfcnDt") as string;
+      return date ? dayjs(date).format("YYYY-MM-DD") : "";
+    },
+  },
+];
diff --git a/apps/cs/src/pages/terms/ui/create-page.tsx b/apps/cs/src/pages/terms/ui/create-page.tsx
new file mode 100644
index 000000000..509fc91b2
--- /dev/null
+++ b/apps/cs/src/pages/terms/ui/create-page.tsx
@@ -0,0 +1,40 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { useForm } from "react-hook-form";
+import { useMutation } from "@tanstack/react-query";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { TermsApi } from "../api/terms-service";
+import { termsFormSchema, type TermsFormData } from "../model/terms-interface";
+import { useAlertStore } from "@/shared/lib/use-alert-store";
+import { TermsForm } from "./terms-form";
+
+function CreatePage() {
+  const router = useRouter();
+  const { setMessage: alert } = useAlertStore((state) => state);
+
+  const { mutateAsync: createTerms } = useMutation({
+    mutationFn: (data: TermsFormData) => TermsApi.createTerms(data),
+    onSuccess: () => {
+      alert("등록되었습니다.", router.back);
+    },
+  });
+
+  const form = useForm<TermsFormData>({
+    resolver: zodResolver(termsFormSchema),
+    defaultValues: {
+      useYn: "Y",
+    },
+  });
+
+  return (
+    <div className="card card-border !mb-0 !mt-6">
+      <div className="card-header">
+        <h3 className="text-2xl font-medium text-label">약관 등록</h3>
+      </div>
+      <TermsForm form={form} handleSave={createTerms} />
+    </div>
+  );
+}
+
+export { CreatePage };
diff --git a/apps/cs/src/pages/terms/ui/modify-page.tsx b/apps/cs/src/pages/terms/ui/modify-page.tsx
new file mode 100644
index 000000000..61522c2eb
--- /dev/null
+++ b/apps/cs/src/pages/terms/ui/modify-page.tsx
@@ -0,0 +1,56 @@
+"use client";
+
+import { useForm } from "react-hook-form";
+import { useRouter } from "next/navigation";
+import { useMutation, useQuery } from "@tanstack/react-query";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { ENDPOINT } from "@/shared/config";
+import { useAlertStore } from "@/shared/lib/use-alert-store";
+import { termsFormSchema, type TermsFormData } from "../model/terms-interface";
+import { TermsApi } from "../api/terms-service";
+import { TermsForm } from "./terms-form";
+
+function ModifyPage({ sequential }: { sequential: string }) {
+  const router = useRouter();
+  const { setMessage: alert } = useAlertStore((state) => state);
+
+  const { data: termsDetail } = useQuery({
+    queryKey: [ENDPOINT.CMS_SERVICE.TERMS, sequential],
+    queryFn: () => TermsApi.getTermsInfo(sequential),
+  });
+
+  const { mutateAsync: updateTerms } = useMutation({
+    mutationFn: (data: TermsFormData) => TermsApi.updateTerms(sequential, data),
+    onSuccess: () => {
+      alert("수정되었습니다.");
+    },
+  });
+
+  const { mutateAsync: deleteTerms } = useMutation({
+    mutationFn: () => TermsApi.deleteTerms(sequential),
+    onSuccess: () => {
+      alert("삭제되었습니다.", router.back);
+    },
+  });
+
+  const form = useForm<TermsFormData>({
+    resolver: zodResolver(termsFormSchema),
+    values: termsDetail,
+  });
+
+  return (
+    <div className="card card-border !mb-0 !mt-6">
+      <div className="card-header">
+        <h3 className="text-2xl font-medium text-label">약관 수정</h3>
+      </div>
+      <TermsForm
+        form={form}
+        trmsSn={Number(sequential)}
+        handleSave={updateTerms}
+        handleDelete={deleteTerms}
+      />
+    </div>
+  );
+}
+
+export { ModifyPage };
diff --git a/apps/cs/src/pages/terms/ui/terms-form.tsx b/apps/cs/src/pages/terms/ui/terms-form.tsx
new file mode 100644
index 000000000..df436e63a
--- /dev/null
+++ b/apps/cs/src/pages/terms/ui/terms-form.tsx
@@ -0,0 +1,138 @@
+import dynamic from "next/dynamic";
+import { type UseFormReturn } from "react-hook-form";
+import {
+  Input,
+  Label,
+  RadioGroup,
+  RadioGroupItem,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableRow,
+} from "@common/components";
+import { FormWrapper } from "@/widgets/form-wrapper";
+import { CodeSelect } from "@/entities/code";
+import { FormItem, FormControl, FormField } from "@/shared/ui/form";
+import type { TermsFormData } from "../model/terms-interface";
+
+const Editor = dynamic(
+  () => import("@/entities/editor").then((module) => module.Editor),
+  { ssr: false },
+);
+
+interface TermsFormProps {
+  form: UseFormReturn<TermsFormData>;
+  trmsSn?: number;
+  handleSave: (data: TermsFormData) => Promise<void>;
+  handleDelete?: () => Promise<void>;
+}
+
+function TermsForm({ form, trmsSn, ...props }: TermsFormProps) {
+  return (
+    <FormWrapper form={form} isModifyMode={!!trmsSn} {...props}>
+      <div className="card">
+        <Table variant="secondary">
+          <colgroup>
+            <col width="15%" />
+            <col width="85%" />
+          </colgroup>
+          <TableBody>
+            <TableRow>
+              <TableHead>약관 구분</TableHead>
+              <TableCell className="border">
+                <FormField
+                  control={form.control}
+                  name="trmsSeCd"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormControl>
+                        <CodeSelect
+                          {...field}
+                          upCd="TRMSCLCD"
+                          onValueChange={field.onChange}
+                        />
+                      </FormControl>
+                    </FormItem>
+                  )}
+                />
+              </TableCell>
+            </TableRow>
+            <TableRow>
+              <TableHead>약관명</TableHead>
+              <TableCell className="border">
+                <FormField
+                  control={form.control}
+                  name="trmsTtl"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormControl>
+                        <Input
+                          {...field}
+                          value={field.value ?? ""}
+                          className="!text-[1.3rem]"
+                          placeholder="약관명을 입력하십시오."
+                        />
+                      </FormControl>
+                    </FormItem>
+                  )}
+                />
+              </TableCell>
+            </TableRow>
+            <TableRow>
+              <TableHead>약관 내용</TableHead>
+              <TableCell className="border">
+                <FormField
+                  control={form.control}
+                  name="trmsCn"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormControl>
+                        <Editor
+                          value={field.value ?? ""}
+                          onEditorChange={field.onChange}
+                        />
+                      </FormControl>
+                    </FormItem>
+                  )}
+                />
+              </TableCell>
+            </TableRow>
+            <TableRow>
+              <TableHead>사용 여부</TableHead>
+              <TableCell className="border">
+                <FormField
+                  control={form.control}
+                  name="useYn"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormControl>
+                        <RadioGroup
+                          {...field}
+                          name="useYn"
+                          value={field.value ?? ""}
+                          onValueChange={field.onChange}
+                        >
+                          <div className="flex items-center space-x-2">
+                            <RadioGroupItem value="Y" id="useY" />
+                            <Label htmlFor="useY">사용</Label>
+                          </div>
+                          <div className="flex items-center space-x-2">
+                            <RadioGroupItem value="N" id="useN" />
+                            <Label htmlFor="useN">사용안함</Label>
+                          </div>
+                        </RadioGroup>
+                      </FormControl>
+                    </FormItem>
+                  )}
+                />
+              </TableCell>
+            </TableRow>
+          </TableBody>
+        </Table>
+      </div>
+    </FormWrapper>
+  );
+}
+
+export { TermsForm };
diff --git a/apps/cs/src/pages/terms/ui/terms-page.tsx b/apps/cs/src/pages/terms/ui/terms-page.tsx
new file mode 100644
index 000000000..5921e2fdd
--- /dev/null
+++ b/apps/cs/src/pages/terms/ui/terms-page.tsx
@@ -0,0 +1,118 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { useEffect, useState } from "react";
+import { keepPreviousData, useQuery } from "@tanstack/react-query";
+import {
+  getCoreRowModel,
+  useReactTable,
+  type PaginationState,
+} from "@tanstack/react-table";
+import { Button, DataTable, Input, Label } from "@common/components";
+import { CodeSelect } from "@/entities/code";
+import { ENDPOINT } from "@/shared/config";
+import { TermsApi } from "../api/terms-service";
+import { columns } from "../model/terms-table-columns";
+import type { TermsParams, Terms } from "../model/terms-interface";
+
+function TermsPage() {
+  const router = useRouter();
+
+  const [termsQuery, setTermsQuery] = useState<TermsParams>({
+    trmsSeCd: "",
+    keyword: "",
+  });
+  const [pagination, setPagination] = useState<PaginationState>({
+    pageIndex: 0,
+    pageSize: 5,
+  });
+
+  const { data: termsList, refetch } = useQuery({
+    queryKey: [ENDPOINT.CMS_SERVICE.TERMS],
+    queryFn: () =>
+      TermsApi.getTermsList({
+        ...termsQuery,
+        page: pagination.pageIndex,
+        size: pagination.pageSize,
+      }),
+    placeholderData: keepPreviousData,
+    enabled: false,
+  });
+
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    refetch();
+  };
+
+  const handleRowClick = (row: Terms) => {
+    router.push(`/terms/register/${row.trmsSn}`);
+  };
+
+  const table = useReactTable({
+    data: termsList?.content ?? [],
+    columns,
+    rowCount: termsList?.totalElements ?? 0,
+    state: {
+      pagination,
+    },
+    onPaginationChange: setPagination,
+    getCoreRowModel: getCoreRowModel(),
+    manualPagination: true,
+  });
+
+  useEffect(() => {
+    refetch();
+  }, [pagination]);
+
+  return (
+    <div className="card card-border !mt-6">
+      <div className="card card-border">
+        <form onSubmit={handleSubmit} className="flex gap-2 p-2">
+          <div className="flex space-x-6">
+            <div className="flex items-center gap-2">
+              <Label htmlFor="" className="text-label">
+                약관분류
+              </Label>
+              <CodeSelect
+                upCd="TRMSCLCD"
+                value={termsQuery.trmsSeCd}
+                onValueChange={(value) =>
+                  setTermsQuery({ ...termsQuery, trmsSeCd: value })
+                }
+              />
+            </div>
+            <div className="flex items-center gap-2">
+              <Label htmlFor="" className="text-label">
+                약관명
+              </Label>
+              <Input
+                className="h-[3.2rem] w-[24rem] rounded-sm !text-[1.3rem]"
+                value={termsQuery.keyword}
+                onChange={(e) =>
+                  setTermsQuery({
+                    ...termsQuery,
+                    keyword: e.target.value,
+                  })
+                }
+              />
+            </div>
+          </div>
+          <Button className="h-[3.2rem]" type="submit">
+            조회
+          </Button>
+        </form>
+      </div>
+      <div className="card card-border">
+        <div className="card-header">
+          <h3 className="text-2xl font-medium text-label">약관 목록</h3>
+          <Button onClick={() => router.push("/terms/register")}>등록</Button>
+        </div>
+        <div className="card !m-[1.2rem] h-[29.2rem] overflow-auto !p-0">
+          <DataTable table={table} onRowClick={handleRowClick} viewPagination />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export { TermsPage };
diff --git a/apps/cs/src/shared/config/api.ts b/apps/cs/src/shared/config/api.ts
index cb140e5ea..86478ac19 100644
--- a/apps/cs/src/shared/config/api.ts
+++ b/apps/cs/src/shared/config/api.ts
@@ -28,6 +28,7 @@ export const ENDPOINT = {
     IMAGES: "/cms-service/api/v1/images",
     BANNERS: "/cms-service/api/v1/bnrs",
     TEMPLATE: "/cms-service/api/v1/tmplt",
+    TERMS: "/cms-service/api/v1/trms",
   },
   BOARD_SERVICE: {
     BBS: "/board-service/api/v1/bbs",