feat: 사이트 관리 페이지 생성

apps/cs/.prettierrc

@@ -0,0 +1,3 @@
+{
+  "plugins": ["prettier-plugin-tailwindcss"]
+}

apps/cs/app/globals.css

@@ -1,5 +0,0 @@
-@import "@common/assets/index.css";
-
-@tailwind base;
-@tailwind components;
-@tailwind utilities;

apps/cs/app/layout.tsx

@@ -1,34 +1,2 @@
-import type { Metadata } from "next";
-import { Geist, Geist_Mono } from "next/font/google";
-import "./globals.css";
-
-const geistSans = Geist({
-  variable: "--font-geist-sans",
-  subsets: ["latin"],
-});
-
-const geistMono = Geist_Mono({
-  variable: "--font-geist-mono",
-  subsets: ["latin"],
-});
-
-export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
-};
-
-export default function RootLayout({
-  children,
-}: Readonly<{
-  children: React.ReactNode;
-}>) {
-  return (
-    <html lang="en">
-      <body
-        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
-      >
-        {children}
-      </body>
-    </html>
-  );
-}
+import { App } from "@/app";
+export default App;

apps/cs/app/page.tsx

@@ -1,11 +0,0 @@
-"use client";
-
-import { BaseLayout } from "@common/components";
-
-export default function Home() {
-  return (
-    <BaseLayout>
-      <div>유역하수도 통합 정보플랫폼</div>
-    </BaseLayout>
-  );
-}

apps/cs/app/site/page.tsx

@@ -0,0 +1,2 @@
+import { SitePage } from "@/pages/site";
+export default SitePage;

apps/cs/package.json

@@ -18,6 +18,9 @@
     "eslint": "^9",
     "eslint-config-next": "15.1.7",
     "postcss": "^8",
+    "prettier": "^3.4.2",
+    "prettier-plugin-tailwindcss": "^0.6.11",
+    "steiger": "^0.5.5",
     "tailwindcss": "^3.4.1",
     "typescript": "^5"
   }

apps/cs/src/app/index.tsx

@@ -0,0 +1,17 @@
+import type { Metadata } from "next";
+import "./styles/base.css";
+import "./styles/components.css";
+
+export const metadata: Metadata = {
+  title: "유역하수도 통합 정보플랫폼",
+};
+
+const App = ({ children }: Readonly<{ children: React.ReactNode }>) => {
+  return (
+    <html lang="ko">
+      <body>{children}</body>
+    </html>
+  );
+};
+
+export { App };

apps/cs/src/app/styles/base.css

@@ -0,0 +1,10 @@
+@import "@common/assets/index.css";
+
+@tailwind base;
+@tailwind utilities;
+
+html,
+body {
+  font-family: "Noto Sans KR", sans-serif;
+  font-size: 10px;
+}

apps/cs/src/app/styles/components.css

@@ -0,0 +1,10 @@
+@tailwind components;
+
+@layer components {
+  .card {
+    @apply relative m-[0.6rem] box-border min-h-[2rem] rounded-[0.5rem] p-[0.6rem] text-[1.3rem] text-[#666];
+  }
+  .card-border {
+    @apply shadow-blur border border-[#dbe2e6] bg-[rgba(255,255,255,0.6)];
+  }
+}

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

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

apps/cs/src/pages/site/ui/index.tsx

@@ -0,0 +1,35 @@
+"use client";
+
+import { BaseLayout, Button, Input } from "@common/components";
+
+const SitePage = () => {
+  return (
+    <BaseLayout>
+      <div className="h-full bg-[#f1f6f9]">
+        <h2 className="px-[1.8rem] pt-[2rem] text-[2.4rem] font-semibold text-[#4c5e6f]">
+          사이트 관리
+        </h2>
+        <div className="card">
+          <div className="card card-border !border-[#dbe2e6] !bg-[#eef7ff]">
+            <div className="flex items-center gap-2 p-2">
+              <label htmlFor="" className="mr-2 text-[#657481]">
+                사이트명
+              </label>
+              <Input className="h-[3.2rem] w-[24rem] rounded-sm !text-[1.3rem]" />
+              <Button className="h-[3.2rem]">조회</Button>
+            </div>
+          </div>
+          <div className="card card-border">
+            <div className="flex items-center justify-between p-2">
+              <h3>사이트 목록</h3>
+              <Button className="">등록</Button>
+            </div>
+          </div>
+          <div>{/* 테이블 */}</div>
+        </div>
+      </div>
+    </BaseLayout>
+  );
+};
+
+export { SitePage };

apps/cs/tailwind.config.ts

@@ -5,7 +5,14 @@ export default {
   presets: [presetConfig],
   darkMode: ["class", "[data-mode='dark']"],
   content: [
-    "./app/**/*.{js,ts,jsx,tsx,mdx}",
+    "./src/**/*.{js,ts,jsx,tsx,mdx}",
     "../../packages/common/components/src/ui/**/*.{js,ts,jsx,tsx,mdx}",
   ],
+  theme: {
+    extend: {
+      boxShadow: {
+        blur: "0 0 10px -1px rgba(0, 0, 0, 0.06)",
+      },
+    },
+  },
 } satisfies Config;

apps/cs/tsconfig.json

@@ -2,7 +2,6 @@
   "$schema": "https://json.schemastore.org/tsconfig",
   "extends": "../../tsconfig.base.json",
   "compilerOptions": {
-    "baseUrl": ".",
     "target": "ES2017",
     "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
@@ -23,11 +22,12 @@
         "name": "next"
       }
     ],
+    "baseUrl": "./src",
     "paths": {
       "@/*": ["./*"],
-      "@common/components": ["../../packages/common/components/src"],
-      "@common/assets/*": ["../../packages/common/assets/dist/*"],
-      "@common/assets": ["../../packages/common/assets/dist"]
+      "@common/components": ["../../../packages/common/components/src"],
+      "@common/assets/*": ["../../../packages/common/assets/dist/*"],
+      "@common/assets": ["../../../packages/common/assets/dist"]
     }
   },
   "include": [