refactor: page layout 공통 적용

apps/cs/app/(with-base-layout)/layout.tsx

@@ -5,6 +5,8 @@ import type { MenuItem } from "@common/components/api";
 import { BaseLayout } from "@common/components/ui";
 import { MenuWrapper } from "@/entities/menu";
 import { useMenuStore } from "@/shared/lib";
+import { PageLayout } from "@/shared/ui/page-layout";
+
 export default function WithBaseLayout({
   children,
 }: {
@@ -21,7 +23,9 @@ export default function WithBaseLayout({
 
   return (
     <BaseLayout currentPath={pathname ?? ""} handleMenuClick={handleMenuClick}>
-      <MenuWrapper>{children}</MenuWrapper>
+      <MenuWrapper>
+        <PageLayout>{children}</PageLayout>
+      </MenuWrapper>
     </BaseLayout>
   );
 }

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

@@ -2,7 +2,6 @@
 
 import { Upload } from "tus-js-client";
 import { FileUploader } from "@common/components/ui";
-import { PageLayout } from "@/shared/ui/page-layout";
 import { AUTH_USER_ID, CLAIM_NAME, ENDPOINT } from "@/shared/config";
 import { getCookie } from "@/shared/lib";
 
@@ -47,14 +46,12 @@ function ImagePage() {
   };
 
   return (
-    <PageLayout>
+    <div className="card card-border">
-      <div className="card card-border">
+      <div className="card-header">
-        <div className="card-header">
+        <h3 className="text-2xl font-medium text-label">이미지 목록</h3>
-          <h3 className="text-2xl font-medium text-label">이미지 목록</h3>
-        </div>
-        <FileUploader id="image-uploader" onUpload={handleUpload} />
       </div>
-    </PageLayout>
+      <FileUploader id="image-uploader" onUpload={handleUpload} />
+    </div>
   );
 }
 

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

@@ -16,7 +16,6 @@ import {
 } from "@common/components/ui";
 import { SiteApi } from "@/entities/site";
 import { ENDPOINT } from "@/shared/config";
-import { PageLayout } from "@/shared/ui/page-layout";
 import { ConfirmDialog } from "@/shared/ui/confirm-dialog";
 import { useAlertStore } from "@/shared/lib/use-alert-store";
 import type { TreeMenu } from "../model/menu-interface";
@@ -197,67 +196,65 @@ function MenuPage() {
 
   return (
     <>
-      <PageLayout>
+      <div className="card !mb-0 flex !min-h-[calc(100vh-16.8rem)] gap-2">
-        <div className="card !mb-0 flex !min-h-[calc(100vh-16.8rem)] gap-2">
+        <div className="card card-border w-[24rem]">
-          <div className="card card-border w-[24rem]">
+          <Select value={siteId} onValueChange={handleSiteIdChange}>
-            <Select value={siteId} onValueChange={handleSiteIdChange}>
+            <SelectTrigger>
-              <SelectTrigger>
+              <SelectValue placeholder="선택하세요" />
-                <SelectValue placeholder="선택하세요" />
+            </SelectTrigger>
-              </SelectTrigger>
+            <SelectContent>
-              <SelectContent>
+              {options?.map((option) => (
-                {options?.map((option) => (
+                <SelectItem key={option.value} value={option.value}>
-                  <SelectItem key={option.value} value={option.value}>
+                  {option.label}
-                    {option.label}
+                </SelectItem>
-                  </SelectItem>
+              ))}
-                ))}
+            </SelectContent>
-              </SelectContent>
+          </Select>
-            </Select>
+          {siteId && (
-            {siteId && (
+            <>
-              <>
+              <div className="my-4 flex gap-2">
-                <div className="my-4 flex gap-2">
+                <Button
-                  <Button
+                  size="sm"
-                    size="sm"
+                  color="primary"
-                    color="primary"
+                  className="flex-1"
-                    className="flex-1"
+                  onClick={handleAddMenu}
-                    onClick={handleAddMenu}
+                >
-                  >
+                  메뉴 추가
-                    메뉴 추가
+                </Button>
-                  </Button>
+                <Button
-                  <Button
+                  size="sm"
-                    size="sm"
+                  color="red"
-                    color="red"
+                  className="flex-1"
-                    className="flex-1"
+                  onClick={handleNodeDelete}
-                    onClick={handleNodeDelete}
+                  disabled={!selectedMenu}
-                    disabled={!selectedMenu}
+                >
-                  >
+                  메뉴 삭제
-                    메뉴 삭제
+                </Button>
-                  </Button>
+              </div>
-                </div>
+              <div className="card card-border !mx-0">
-                <div className="card card-border !mx-0">
+                <MenuTree
-                  <MenuTree
+                  tree={tree}
-                    tree={tree}
+                  siteId={siteId}
-                    siteId={siteId}
+                  selectedMenu={selectedMenu}
-                    selectedMenu={selectedMenu}
+                  additionalNodeForm={additionalNodeForm}
-                    additionalNodeForm={additionalNodeForm}
+                  onSelectNode={handleNodeSelect}
-                    onSelectNode={handleNodeSelect}
+                  onAdditionalNodeSave={handleAdditionalNodeSave}
-                    onAdditionalNodeSave={handleAdditionalNodeSave}
+                  onAdditionalNodeCancel={resetAdditionalNode}
-                    onAdditionalNodeCancel={resetAdditionalNode}
+                />
-                  />
+              </div>
-                </div>
+            </>
-              </>
+          )}
-            )}
-          </div>
-          <div className="card card-border flex-1">
-            <MenuForm
-              form={form}
-              menuCd={selectedMenu?.menuCd}
-              handleCreate={createMenu}
-              handleModify={modifyMenu}
-              handleDelete={deleteMenu}
-            />
-          </div>
         </div>
-      </PageLayout>
+        <div className="card card-border flex-1">
+          <MenuForm
+            form={form}
+            menuCd={selectedMenu?.menuCd}
+            handleCreate={createMenu}
+            handleModify={modifyMenu}
+            handleDelete={deleteMenu}
+          />
+        </div>
+      </div>
       <ConfirmDialog open={onConfirm} />
     </>
   );

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

@@ -6,7 +6,6 @@ import { useMutation } from "@tanstack/react-query";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { SiteApi, siteFormSchema, type SiteFormData } from "@/entities/site";
 import { useAlertStore } from "@/shared/lib/use-alert-store";
-import { PageLayout } from "@/shared/ui/page-layout";
 import { SiteForm } from "./site-form";
 
 function CreatePage() {
@@ -37,11 +36,7 @@ function CreatePage() {
     },
   });
 
-  return (
+  return <SiteForm form={form} handleSave={createSite} />;
-    <PageLayout>
-      <SiteForm form={form} handleSave={createSite} />
-    </PageLayout>
-  );
 }
 
 export { CreatePage };

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

@@ -6,7 +6,6 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { SiteApi, siteFormSchema, type SiteFormData } from "@/entities/site";
 import { ENDPOINT } from "@/shared/config";
-import { PageLayout } from "@/shared/ui/page-layout";
 import { useAlertStore } from "@/shared/lib/use-alert-store";
 import { SiteForm } from "./site-form";
 
@@ -63,14 +62,12 @@ function ModifyPage({ siteId }: { siteId: string }) {
   });
 
   return (
-    <PageLayout>
+    <SiteForm
-      <SiteForm
+      form={form}
-        form={form}
+      siteId={siteId}
-        siteId={siteId}
+      handleSave={modifySite}
-        handleSave={modifySite}
+      handleDelete={deleteSite}
-        handleDelete={deleteSite}
+    />
-      />
-    </PageLayout>
   );
 }
 

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

@@ -9,7 +9,6 @@ import { getCoreRowModel, useReactTable } from "@tanstack/react-table";
 import { Button, DataTable, Input } from "@common/components";
 import { SiteApi, type Site, type SiteParams } from "@/entities/site";
 import { ENDPOINT } from "@/shared/config";
-import { PageLayout } from "@/shared/ui/page-layout";
 import { columns } from "../model/table-columns";
 
 function SitePage() {
@@ -44,34 +43,32 @@ function SitePage() {
   }, []);
 
   return (
-    <PageLayout>
+    <div className="card card-border !mt-6">
-      <div className="card card-border !mt-6">
+      <div className="card card-border">
-        <div className="card card-border">
+        <form onSubmit={handleSubmit} className="flex items-center gap-2 p-2">
-          <form onSubmit={handleSubmit} className="flex items-center gap-2 p-2">
+          <label htmlFor="" className="mr-2 text-label">
-            <label htmlFor="" className="mr-2 text-label">
+            사이트명
-              사이트명
+          </label>
-            </label>
+          <Input
-            <Input
+            className="h-[3.2rem] w-[24rem] rounded-sm !text-[1.3rem]"
-              className="h-[3.2rem] w-[24rem] rounded-sm !text-[1.3rem]"
+            value={siteQuery.siteNm}
-              value={siteQuery.siteNm}
+            onChange={(e) => setSiteQuery({ siteNm: e.target.value })}
-              onChange={(e) => setSiteQuery({ siteNm: e.target.value })}
+          />
-            />
+          <Button className="h-[3.2rem]" type="submit">
-            <Button className="h-[3.2rem]" type="submit">
+            조회
-              조회
+          </Button>
-            </Button>
+        </form>
-          </form>
+      </div>
+      <div className="card card-border">
+        <div className="card-header">
+          <h3 className="text-2xl font-medium text-label">사이트 목록</h3>
+          <Button onClick={() => router.push("/site/register")}>등록</Button>
         </div>
-        <div className="card card-border">
+        <div className="card !m-[1.2rem] h-[49rem] overflow-auto !p-0">
-          <div className="card-header">
+          <DataTable table={table} onRowClick={handleRowClick} />
-            <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>
         </div>
       </div>
-    </PageLayout>
+    </div>
   );
 }