[as] feat: 초기 레이아웃 구현

apps/as/.env.example

@@ -1,5 +1,5 @@
 # apps/as/shared/config/env.ts 참고
-NEXT_PUBLIC_PORT=3000
-NEXT_PUBLIC_PROXY_HOST=http://localhost:3000
-NEXT_PUBLIC_SITE_ID=AS
-NEXT_PUBLIC_SERVER_API_URL=http://192.168.0.102:8000
+NEXT_PUBLIC_PORT=
+NEXT_PUBLIC_PROXY_HOST=
+NEXT_PUBLIC_SITE_ID=
+NEXT_PUBLIC_SERVER_API_URL=

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

@@ -0,0 +1,35 @@
+"use client";
+
+import { useCallback } from "react";
+import { usePathname, useRouter } from "next/navigation";
+import { useQueryClient } from "@tanstack/react-query";
+import { BaseLayout } from "@common/components";
+import type { MenuItem } from "@/entities/menu";
+import { PageLayout } from "@/shared/ui/page-layout";
+
+export default function WithBaseLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const router = useRouter();
+  const pathname = usePathname();
+  const queryClient = useQueryClient();
+
+  const handleMenuClick = useCallback(
+    (item: MenuItem) => {
+      router.push(item.urlPath);
+    },
+    [router],
+  );
+
+  return (
+    <BaseLayout
+      queryClient={queryClient}
+      currentPath={pathname ?? ""}
+      handleMenuClick={handleMenuClick}
+    >
+      <PageLayout>{children}</PageLayout>
+    </BaseLayout>
+  );
+}

apps/as/app/(with-base-layout)/page.tsx

@@ -0,0 +1,9 @@
+"use client";
+
+export default function MainPage() {
+  return (
+    <div className="flex h-full flex-col items-center justify-center py-10">
+      <h1 className="mb-4 text-3xl font-bold">Home</h1>
+    </div>
+  );
+}

apps/as/app/globals.css

@@ -1,27 +1,15 @@
+@import "@common/assets/styles/base.css";
+@import "@common/assets/styles/diveicon.css";
+@import "@common/components/index.css";
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
-:root {
-  --background: #ffffff;
-  --foreground: #171717;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
-  }
-}
-
+html,
 body {
   color: var(--foreground);
   background: var(--background);
-  font-family: Arial, Helvetica, sans-serif;
-}
-
-@layer utilities {
-  .text-balance {
-    text-wrap: balance;
-  }
+  font-family: var(--font-noto-sans-kr), sans-serif;
+  font-size: 10px;
 }

apps/as/app/layout.tsx

@@ -1,10 +1,18 @@
 import type { Metadata } from "next";
+import { Noto_Sans_KR } from "next/font/google";
 import { Providers } from "./providers";
 import "./globals.css";
 
+const notoSansKR = Noto_Sans_KR({
+  subsets: ["latin"],
+  weight: ["100", "300", "400", "500", "700", "900"],
+  display: "swap",
+  variable: "--font-noto-sans-kr",
+});
+
 export const metadata: Metadata = {
-  title: "AS Application",
-  description: "Next.js application with FSD architecture",
+  title: "행정지원시스템",
+  description: "행정지원시스템",
 };
 
 interface RootLayoutProps {
@@ -13,8 +21,8 @@ interface RootLayoutProps {
 
 export default function RootLayout({ children }: RootLayoutProps) {
   return (
-    <html lang="ko">
-      <body className="antialiased">
+    <html lang="ko" className={notoSansKR.variable}>
+      <body className={`${notoSansKR.className} antialiased`}>
         <Providers>{children}</Providers>
       </body>
     </html>

apps/as/app/page.tsx

@@ -1,10 +0,0 @@
-export default function HomePage() {
-  return (
-    <main className="flex min-h-screen flex-col items-center justify-center p-24">
-      <div className="z-10 w-full max-w-5xl items-center justify-between text-sm">
-        <h1 className="mb-8 text-4xl font-bold">AS Application</h1>
-        <p className="text-lg">Feature Sliced Design Architecture with Next.js</p>
-      </div>
-    </main>
-  );
-}

apps/as/entities/menu/index.ts

@@ -0,0 +1 @@
+export { type MenuItem } from "./model";

apps/as/entities/menu/model/index.ts

@@ -0,0 +1 @@
+export { type MenuItem } from "./types";

apps/as/entities/menu/model/types.ts

@@ -0,0 +1,19 @@
+export interface MenuItem {
+  menuCd: number;
+  menuKornNm: string;
+  menuEngNm: string;
+  parentId: number | null;
+  sortSeq: number;
+  iconNm?: string;
+  children: MenuItem[] | null;
+  levelNo: number;
+  urlPath: string;
+  menuLnkgTypeCd: string;
+  menuLnkgSn: number;
+  menuPath: string;
+  qrcd: string;
+  useYn: string;
+  otptYn: string;
+  newWndwYn: string;
+  requiredUrlPath: boolean;
+}

apps/as/package.json

@@ -33,4 +33,4 @@
     "tailwindcss": "^3.4.14",
     "typescript": "^5.7.2"
   }
-}
+}

apps/as/shared/ui/button.tsx

@@ -1,36 +0,0 @@
-import { ButtonHTMLAttributes, forwardRef } from "react";
-
-interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-  variant?: "primary" | "secondary" | "outline";
-  size?: "sm" | "md" | "lg";
-}
-
-export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className = "", variant = "primary", size = "md", children, ...props }, ref) => {
-    const baseStyles = "rounded-md font-medium transition-colors focus:outline-none focus:ring-2";
-    
-    const variantStyles = {
-      primary: "bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500",
-      secondary: "bg-gray-600 text-white hover:bg-gray-700 focus:ring-gray-500",
-      outline: "border border-gray-300 bg-transparent hover:bg-gray-50 focus:ring-gray-500",
-    };
-
-    const sizeStyles = {
-      sm: "px-3 py-1.5 text-sm",
-      md: "px-4 py-2 text-base",
-      lg: "px-6 py-3 text-lg",
-    };
-
-    return (
-      <button
-        ref={ref}
-        className={`${baseStyles} ${variantStyles[variant]} ${sizeStyles[size]} ${className}`}
-        {...props}
-      >
-        {children}
-      </button>
-    );
-  },
-);
-
-Button.displayName = "Button";

apps/as/shared/ui/index.ts

@@ -1 +1 @@
-export { Button } from "./button";
+export { PageLayout } from "./page-layout";

apps/as/shared/ui/page-layout.tsx

@@ -0,0 +1,35 @@
+"use client";
+
+import { PageTitle } from "@common/components";
+
+const mockCurrentMenuInfo = {
+  menuCd: 0,
+  menuKornNm: "메인",
+  menuEngNm: "Main",
+  parentId: null,
+  sortSeq: 0,
+  children: null,
+  levelNo: 0,
+  urlPath: "/",
+  menuLnkgTypeCd: "",
+  menuLnkgSn: 0,
+  menuPath: "메인",
+  qrcd: "",
+  useYn: "Y",
+  otptYn: "Y",
+  newWndwYn: "N",
+  requiredUrlPath: false,
+};
+
+function PageLayout({ children }: { children: React.ReactNode }) {
+  const menuPaths = mockCurrentMenuInfo.menuPath.split(">").map((path) => path.trim());
+
+  return (
+    <div className="bg-container h-auto min-h-full pb-2">
+      <PageTitle title={mockCurrentMenuInfo.menuKornNm} menuPaths={menuPaths} />
+      {children}
+    </div>
+  );
+}
+
+export { PageLayout };

apps/as/tailwind.config.ts

@@ -8,6 +8,7 @@ const config: Config = {
     "./features/**/*.{js,ts,jsx,tsx,mdx}",
     "./widgets/**/*.{js,ts,jsx,tsx,mdx}",
     "./app/**/*.{js,ts,jsx,tsx,mdx}",
+    "../../packages/common/components/dist/**/*.{js,ts,jsx,tsx,mdx}",
   ],
   theme: {
     extend: {
@@ -15,6 +16,9 @@ const config: Config = {
         background: "var(--background)",
         foreground: "var(--foreground)",
       },
+      fontFamily: {
+        sans: ["var(--font-noto-sans-kr)", "Noto Sans KR", "sans-serif"],
+      },
     },
   },
   plugins: [],

packages/common/components/package.json

@@ -5,7 +5,7 @@
   "sideEffects": false,
   "type": "module",
   "main": "./dist/index.js",
-  "module": "./dist/index.mjs",
+  "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "files": [
     "dist/**"
@@ -13,7 +13,7 @@
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "import": "./dist/index.mjs",
+      "import": "./dist/index.js",
       "require": "./dist/index.js"
     },
     "./index.css": "./dist/index.css"