Merge remote-tracking branch 'origin/iipbs/st/dev'

머지 branch 'origin/iipbs/st/dev' into iipbs/st/dev

.gitea/workflows/deploy.yml

@@ -0,0 +1,33 @@
+name: Deploy Frontend
+
+on:
+  push:
+    branches:
+      - deploy
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Setup SSH
+        run: |
+          mkdir -p ~/.ssh
+          echo "${{ secrets.SSH_PRIVATE_KEY }}" > ~/.ssh/deploy_key
+          chmod 600 ~/.ssh/deploy_key
+          ssh-keyscan -p 28 -H 192.168.0.4 >> ~/.ssh/known_hosts
+
+      - name: Deploy
+        run: |
+          ssh -i ~/.ssh/deploy_key -p 28 onasys@192.168.0.4 << 'EOF'
+            cd ~/frontend
+            git restore .
+            git clean -fd
+            git pull origin deploy
+            pnpm install
+            pnpm turbo build
+            pm2 reload all
+          EOF

apps/_template/.env.example

@@ -1,5 +1,8 @@
-# apps/as/shared/config/env.ts 참고
+# src/shared/config/env.ts 참고
 NEXT_PUBLIC_PORT=
 NEXT_PUBLIC_PROXY_HOST=
 NEXT_PUBLIC_SITE_ID=
-NEXT_PUBLIC_SERVER_API_URL=
+SERVER_API_URL=
+
+# 401 시 브라우저 리다이렉트 대상
+NEXT_PUBLIC_AUTH_LOGIN_REDIRECT_URL=/auth/login

apps/_template/README.md

@@ -1,4 +1,4 @@
-# AS Application
+# Template Application
 
 Next.js 애플리케이션 with FSD(Feature Sliced Design) 아키텍처
 
@@ -13,46 +13,40 @@ Next.js 애플리케이션 with FSD(Feature Sliced Design) 아키텍처
 - **HTTP 클라이언트**: Axios
 - **날짜 처리**: Day.js
 
-## 프로젝트 구조 (FSD)
+## 프로젝트 구조 (FSD + Next.js App Router)
 
-이 프로젝트는 **Feature-Sliced Design v2.1**을 따르며, 계층적 아키텍처로 구성되어 있습니다.
+이 프로젝트는 **Feature-Sliced Design v2.1**과 **FSD 공식 Next.js 가이드**에 맞춰 구성되어 있습니다. Next.js `app/`은 라우트만 담당하고, 실제 레이어는 `src/` 아래에 있습니다.
 
 ```
-as/
-├── app/                    # App 레이어 (Next.js App Router)
-│   ├── (routes)/          # 라우트 구조
-│   ├── layout.tsx         # 루트 레이아웃
-│   ├── page.tsx           # 홈 페이지
-│   ├── globals.css        # 글로벌 스타일
-│   └── providers.tsx      # 전역 providers
+_template/
+├── app/                    # Next.js App Router (루트) — 라우트·레이아웃 진입점만
+│   ├── layout.tsx         # 루트 레이아웃 (src/app에서 providers, styles import)
+│   └── (with-base-layout)/
+│       ├── layout.tsx     # BaseLayout 래퍼 (src/app/layouts에서 import)
+│       └── page.tsx       # re-export: export { MainPage as default } from '@/pages/home'
 │
-├── widgets/               # Widgets 레이어
-│   └── [widget-name]/     # 큰 독립적 UI 블록 (여러 페이지에서 재사용)
-│       ├── ui/
-│       ├── model/
-│       └── index.ts
+├── pages/                  # 빈 폴더 + README (Next.js가 src/pages를 Pages Router로 쓰지 않도록)
+│   └── README.md
 │
-├── features/              # Features 레이어
-│   └── [feature-name]/    # 사용자 상호작용 기능 (여러 페이지에서 재사용)
-│       ├── ui/
-│       ├── api/
-│       ├── model/
-│       └── index.ts
-│
-├── entities/              # Entities 레이어
-│   └── [entity-name]/     # 비즈니스 엔티티 (User, Product 등)
-│       ├── model/
-│       ├── api/
-│       ├── ui/
-│       └── index.ts
-│
-└── shared/                # Shared 레이어
-    ├── ui/               # UI Kit (비즈니스 로직 없는 공통 컴포넌트)
-    ├── api/              # API 클라이언트 설정
-    ├── lib/              # 내부 라이브러리 (dates, colors 등)
-    ├── config/           # 환경 설정, feature flags
-    ├── types/            # 공통 타입 정의
-    └── routes/           # 라우트 상수
+└── src/                    # FSD 레이어 (실제 코드)
+    ├── app/                # App 레이어 (슬라이스 없음, 세그먼트만)
+    │   ├── providers/      # 전역 Providers (QueryClient 등)
+    │   ├── styles/         # 글로벌 스타일 (globals.css)
+    │   └── layouts/        # 공통 레이아웃 컴포넌트 (BaseLayoutWrapper)
+    │
+    ├── pages/              # Pages 레이어 (페이지 슬라이스)
+    │   └── home/
+    │       ├── ui/
+    │       └── index.ts    # Public API
+    │
+    ├── widgets/            # Widgets 레이어
+    ├── features/           # Features 레이어
+    ├── entities/           # Entities 레이어
+    └── shared/             # Shared 레이어
+        ├── ui/
+        ├── api/
+        ├── lib/
+        └── config/
 ```
 
 ### 계층 구조 이해하기
@@ -86,10 +80,10 @@ shared/    ↓ 가장 낮은 책임, 의존성 없음
 - **특징**: 슬라이스가 없고 세그먼트로만 구성
 - **의존성**: 모든 하위 레이어 사용 가능
 
-### 2. Pages (app 디렉토리)
+### 2. Pages (src/pages)
 - **목적**: 웹사이트나 애플리케이션을 구성하는 페이지/화면
 - **내용**: 페이지 UI, 로딩 상태, 에러 바운더리, 데이터 fetching
-- **특징**: 한 페이지당 한 슬라이스 (유사한 페이지는 그룹화 가능)
+- **특징**: 한 페이지당 한 슬라이스 (유사한 페이지는 그룹화 가능). Next.js `app/`의 route 파일에서 re-export
 - **의존성**: `widgets`, `features`, `entities`, `shared` 사용 가능
 
 > 💡 **FSD v2.1 권장사항**: "pages-first" 접근 방식을 따라, 재사용되지 않는 큰 UI 블록과 비즈니스 로직은 페이지 슬라이스에 유지하세요.
@@ -118,29 +112,6 @@ shared/    ↓ 가장 낮은 책임, 의존성 없음
 - **특징**: 비즈니스 로직 없음, 슬라이스가 없고 세그먼트로만 구성
 - **의존성**: 외부 라이브러리만 사용 가능 (다른 레이어 불가)
 
-## 레이어 간 Import 규칙
-
-> **핵심 규칙**: 슬라이스 내의 모듈(파일)은 **오직 하위 레이어**에 있는 다른 슬라이스만 import할 수 있습니다.
-
-예시:
-- `features/auth-login/ui/form.tsx`는 `entities/user`와 `shared/ui`를 import 가능
-- 하지만 다른 `features/post-create`나 상위 레이어인 `widgets`는 import 불가
-- 같은 슬라이스 내부(`features/auth-login/`)의 다른 파일들은 자유롭게 import 가능
-
-## Public API 규칙
-
-> **슬라이스 외부의 모듈은 슬라이스의 Public API만 참조할 수 있으며, 내부 파일 구조에 직접 접근할 수 없습니다.**
-
-모든 슬라이스(및 슬라이스가 없는 레이어의 세그먼트)는 반드시 `index.ts`를 통해 Public API를 정의해야 합니다.
-
-```typescript
-// ✅ 올바른 import
-import { LoginForm } from 'features/auth-login';
-
-// ❌ 잘못된 import (내부 구조 직접 접근)
-import { LoginForm } from 'features/auth-login/ui/login-form';
-```
-
 ## 시작하기
 
 ```bash
@@ -174,16 +145,16 @@ NEXT_PUBLIC_API_URL=http://localhost:3000/api
 ```typescript
 // ✅ 올바른 import (하위 레이어)
 // features/auth-login/ui/form.tsx
-import { User } from 'entities/user';
-import { Button } from 'shared/ui/button';
+import { User } from "entities/user";
+import { Button } from "shared/ui/button";
 
 // ❌ 잘못된 import (같은 레이어)
 // features/auth-login/ui/form.tsx
-import { PostForm } from 'features/post-create';  // 금지!
+import { PostForm } from "features/post-create";  // 금지!
 
 // ❌ 잘못된 import (상위 레이어)
 // features/auth-login/ui/form.tsx
-import { Header } from 'widgets/header';  // 금지!
+import { Header } from "widgets/header";  // 금지!
 ```
 
 ### 2. Public API 규칙
@@ -192,10 +163,10 @@ import { Header } from 'widgets/header';  // 금지!
 
 ```typescript
 // ✅ 올바른 import (Public API 사용)
-import { LoginForm } from 'features/auth-login';
+import { LoginForm } from "features/auth-login";
 
 // ❌ 잘못된 import (내부 구조 직접 접근)
-import { LoginForm } from 'features/auth-login/ui/login-form';
+import { LoginForm } from "features/auth-login/ui/login-form";
 ```
 
 **Public API 작성 시 주의사항**:
@@ -205,44 +176,12 @@ import { LoginForm } from 'features/auth-login/ui/login-form';
 
 ```typescript
 // ❌ 나쁜 예시
-export * from './ui/Comment';
-export * from './model/comments';
+export * from "./ui/Comment";
+export * from "./model/comments";
 
 // ✅ 좋은 예시
-export { Comment } from './ui/comment';
-export { CommentForm } from './ui/comment-form';
-export { useComments } from './model/use-comments';
-export type { Comment, CommentFormData } from './model/types';
-```
-
-### 3. 슬라이스 독립성
-
-- **Zero Coupling**: 같은 레이어의 슬라이스들은 서로 독립적이어야 합니다
-- **High Cohesion**: 슬라이스는 주요 목표와 관련된 대부분의 코드를 포함해야 합니다
-- 예외: Entities 레이어에서 필요한 경우 `@x` 표기법으로 cross-import 가능
-
-### 4. 세그먼트 명명 규칙
-
-세그먼트 이름은 **목적**을 설명해야 하며, **본질**을 설명하면 안 됩니다:
-
-- ❌ **나쁜 이름**: `components`, `hooks`, `types` (무엇인지만 설명)
-- ✅ **좋은 이름**: `ui`, `api`, `model`, `lib` (왜 있는지 설명)
-
-## 코드 규칙
-
-- TypeScript 사용 (strict mode)
-- 함수형 컴포넌트 사용
-- Named exports 선호
-- Tailwind CSS 사용
-- ESLint + Prettier 적용
-- Public API는 명시적으로 정의 (와일드카드 export 지양)
-
-## 아키텍처 린팅
-
-코드베이스의 FSD 규칙 준수를 자동으로 검증하려면 [Steiger](https://github.com/feature-sliced/steiger)를 사용하세요.
-
-```bash
-# Steiger 설치 및 실행
-pnpm add -D @feature-sliced/steiger
-npx steiger src
+export { Comment } from "./ui/comment";
+export { CommentForm } from "./ui/comment-form";
+export { useComments } from "./model/use-comments";
+export type { Comment, CommentFormData } from "./model/types";
 ```

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

@@ -1,31 +1,10 @@
-"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>
-  );
-}
+import type { ReactNode } from "react";
+import { BaseLayoutWrapper } from "@/app/layouts/base-layout";
+
+interface WithBaseLayoutProps {
+  children: ReactNode;
+}
+
+export default function WithBaseLayout({ children }: WithBaseLayoutProps) {
+  return <BaseLayoutWrapper>{children}</BaseLayoutWrapper>;
+}

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

@@ -1,9 +1 @@
-"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>
-  );
-}
+export { MainPage as default } from "@/pages/home";

apps/_template/app/layout.tsx

@@ -1,14 +1,7 @@
 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",
-});
+import { cookies } from "next/headers";
+import { Providers } from "@/app/providers";
+import "@/app/styles/globals.css";
 
 export const metadata: Metadata = {
   title: "행정지원시스템",
@@ -19,10 +12,12 @@ interface RootLayoutProps {
   children: React.ReactNode;
 }
 
-export default function RootLayout({ children }: RootLayoutProps) {
+export default async function RootLayout({ children }: RootLayoutProps) {
+  const theme = (await cookies()).get("site-theme-key");
+
   return (
-    <html lang="ko" className={notoSansKR.variable}>
-      <body className={`${notoSansKR.className} antialiased`}>
+    <html lang="ko" data-theme={theme?.value}>
+      <body>
         <Providers>{children}</Providers>
       </body>
     </html>

apps/_template/middleware.ts

@@ -0,0 +1,50 @@
+import { NextRequest, NextResponse } from "next/server";
+import { PORT, PROXY_HOST, SERVER_API_URL, SITE_ID } from "@/shared/config";
+
+const serverApiUrl = process.env.SERVER_API_URL ?? "http://localhost:3000";
+
+// CSP 헤더 설정 함수 (img-src만)
+function addSecurityHeaders(response: NextResponse): NextResponse {
+  response.headers.set("Content-Security-Policy", "img-src 'self' data: https: blob:;");
+  return response;
+}
+
+export function middleware(req: NextRequest) {
+  const pathname = req.nextUrl.pathname;
+  const searchParams = req.nextUrl.searchParams;
+
+  const logMessages: string[] = [
+    `[Middleware Request] ${new Date().toISOString()}`,
+    `[Environment]\n  Mode: ${process.env.NODE_ENV}\n  Port: ${PORT}\n  Proxy Host: ${PROXY_HOST}\n  Server API URL: ${SERVER_API_URL}\n  Site ID: ${SITE_ID}`,
+    `[Request]\n  Original Pathname: ${pathname}`,
+  ];
+
+  if (pathname.startsWith("/server")) {
+    const queryParams = searchParams.toString();
+    const newUrl = `${serverApiUrl}${pathname.replace("/server", "")}${
+      queryParams ? `?${queryParams}` : ""
+    }`;
+
+    logMessages.push(`  Rewritten URL: ${newUrl}`);
+    logMessages.push("\n--------------------------------\n");
+    console.log(logMessages.join("\n"));
+
+    const response = NextResponse.rewrite(new URL(newUrl));
+    return addSecurityHeaders(response);
+  }
+
+  // if (pathname === "/") {
+  //   const response = NextResponse.redirect(new URL("/dashboard", req.url));
+  //   return addSecurityHeaders(response);
+  // }
+
+  logMessages.push("\n--------------------------------\n");
+  console.log(logMessages.join("\n"));
+
+  const response = NextResponse.next();
+  return addSecurityHeaders(response);
+}
+
+export const config = {
+  matcher: ["/server/:path*", "/"],
+};

apps/_template/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "as",
+  "name": "template",
   "version": "0.1.0",
   "private": true,
   "scripts": {
@@ -25,7 +25,7 @@
   },
   "devDependencies": {
     "eslint": "^9.0.0",
-    "eslint-config-next": "15.4.0",
+    "eslint-config-next": "15.3.8",
     "postcss": "^8.4.49",
     "prettier": "^3.4.2",
     "prettier-plugin-tailwindcss": "^0.6.11",

apps/_template/pages/README.md

@@ -0,0 +1,9 @@
+# 이 폴더는 비워 둡니다 (FSD + Next.js App Router)
+
+Next.js가 `src/pages`를 **Pages Router**용 `pages` 디렉터리로 인식하지 않도록,  
+프로젝트 루트에 **빈 `pages` 폴더**를 두는 것이 FSD 공식 가이드 권장사항입니다.
+
+- 실제 페이지(FSD Pages 레이어)는 **`src/pages`**에 있습니다.
+- Next.js 라우트는 **`app/`** 에서 `src/pages`를 re-export 하는 방식으로 연결됩니다.
+
+[Feature-Sliced Design - Usage with Next.js (App Router)](https://feature-sliced.design/docs/guides/tech/with-nextjs)

apps/_template/shared/config/env.ts

@@ -1,11 +0,0 @@
-export const PORT = process.env.NEXT_PUBLIC_PORT || "3000";
-export const PROXY_HOST =
-  process.env.NEXT_PUBLIC_PROXY_HOST || `http://localhost:${PORT}`;
-export const SERVER_API_URL = process.env.NEXT_PUBLIC_SERVER_API_URL;
-export const SITE_ID = process.env.NEXT_PUBLIC_SITE_ID || "AS";
-export const CLAIM_NAME = process.env.NEXT_PUBLIC_CLAIM_NAME || "Authorization";
-export const ACCESS_TOKEN =
-  process.env.NEXT_PUBLIC_ACCESS_TOKEN || "access-token";
-export const REFRESH_TOKEN =
-  process.env.NEXT_PUBLIC_REFRESH_TOKEN || "refresh-token";
-export const AUTH_USER_ID = process.env.NEXT_PUBLIC_AUTH_USER_ID || "token-id";

apps/_template/src/app/layouts/base-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";
+
+interface BaseLayoutWrapperProps {
+  children: React.ReactNode;
+}
+
+export function BaseLayoutWrapper({ children }: BaseLayoutWrapperProps) {
+  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/_template/src/app/providers/index.tsx

@@ -1,18 +1,18 @@
-"use client";
-
-import { QueryClientProvider } from "@tanstack/react-query";
-import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
-import { queryClient } from "@/shared/lib";
-
-interface ProvidersProps {
-  children: React.ReactNode;
-}
-
-export function Providers({ children }: ProvidersProps) {
-  return (
-    <QueryClientProvider client={queryClient}>
-      {children}
-      <ReactQueryDevtools initialIsOpen={false} />
-    </QueryClientProvider>
-  );
-}
+"use client";
+
+import { QueryClientProvider } from "@tanstack/react-query";
+import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
+import { queryClient } from "@/shared/lib";
+
+interface ProvidersProps {
+  children: React.ReactNode;
+}
+
+export function Providers({ children }: ProvidersProps) {
+  return (
+    <QueryClientProvider client={queryClient}>
+      {children}
+      <ReactQueryDevtools initialIsOpen={false} />
+    </QueryClientProvider>
+  );
+}

apps/_template/src/app/styles/globals.css

@@ -10,6 +10,6 @@ html,
 body {
   color: var(--foreground);
   background: var(--background);
-  font-family: var(--font-noto-sans-kr), sans-serif;
+  font-family: "Noto Sans KR", sans-serif;
   font-size: 10px;
 }

apps/_template/src/features/README.md

@@ -0,0 +1,133 @@
+# Features Layer
+
+**Features**는 앱의 주요 사용자 상호작용과 기능을 구현하는 레이어입니다. 사용자가 실제로 수행하는 작업들로, 주로 비즈니스 엔티티와 관련이 있습니다.
+
+## 목적
+
+- 사용자가 중요하게 생각하는 주요 상호작용 구현
+- 재사용 가능한 비즈니스 기능 제공
+- 여러 페이지에서 사용되는 기능의 중복 제거
+
+## Feature로 만들어야 하는 경우
+
+> ⚠️ **중요**: 모든 것을 feature로 만들 필요는 없습니다.
+
+Feature로 만드는 것이 좋은 지표:
+
+- **여러 페이지에서 재사용됨**: 예를 들어, 여러 에디터가 있고 모두 댓글 기능이 있다면, 댓글은 재사용 가능한 feature입니다
+- **중요한 비즈니스 기능**: 신규 프로젝트 참여자가 Features 폴더를 보고 앱의 주요 기능을 빠르게 파악할 수 있어야 합니다
+
+Feature가 너무 많으면 중요한 기능이 묻히므로, 신규 참여자의 경험을 최적화하여 결정하세요.
+
+## 구조
+
+각 feature 슬라이스는 다음 세그먼트로 구성됩니다:
+
+```
+features/
+└── [feature-name]/
+    ├── ui/            # 상호작용을 수행하는 UI (폼, 버튼 등)
+    ├── api/           # 액션 수행에 필요한 API 호출 (선택적)
+    ├── model/         # 검증 및 내부 상태 관리 (선택적)
+    ├── lib/           # 유틸리티 함수 (선택적)
+    ├── config/        # feature flags (선택적)
+    └── index.ts       # Public API
+```
+
+### 세그먼트 설명
+
+- **ui**: 사용자 상호작용을 위한 UI 컴포넌트 (폼, 모달, 버튼 등)
+- **api**: feature 실행에 필요한 API 요청 함수
+- **model**: 폼 검증, 내부 상태, 비즈니스 로직
+- **lib**: feature 내부에서만 사용되는 유틸리티
+- **config**: feature flags, feature별 설정값
+- **index.ts**: 슬라이스의 Public API (외부에서 사용할 수 있는 것만 export)
+
+## 예시
+
+```typescript
+// features/auth-login/ui/login-form.tsx
+import { useState } from 'react';
+import { loginUser } from '../api/login-user';
+import type { LoginCredentials } from '../model/types';
+
+export function LoginForm() {
+  const [credentials, setCredentials] = useState<LoginCredentials>({
+    email: '',
+    password: ''
+  });
+
+  const handleSubmit = async (e: React.SubmitEvent) => {
+    e.preventDefault();
+    await loginUser(credentials);
+  };
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <input
+        type="email"
+        value={credentials.email}
+        onChange={(e) => setCredentials({ ...credentials, email: e.target.value })}
+      />
+      <input
+        type="password"
+        value={credentials.password}
+        onChange={(e) => setCredentials({ ...credentials, password: e.target.value })}
+      />
+      <button type="submit">로그인</button>
+    </form>
+  );
+}
+
+// features/auth-login/api/login-user.ts
+import type { LoginCredentials } from '../model/types';
+
+export async function loginUser(credentials: LoginCredentials) {
+  const response = await fetch('/api/auth/login', {
+    method: 'POST',
+    body: JSON.stringify(credentials),
+  });
+  return response.json();
+}
+
+// features/auth-login/model/types.ts
+export interface LoginCredentials {
+  email: string;
+  password: string;
+}
+
+// features/auth-login/index.ts
+export { LoginForm } from './ui/login-form';
+export { loginUser } from './api/login-user';
+export type { LoginCredentials } from './model/types';
+```
+
+## 레이어 의존성 규칙
+
+✅ **허용되는 의존성**:
+
+- `shared` 레이어의 모듈
+- `entities` 레이어의 모듈
+- 같은 feature 슬라이스 내의 다른 세그먼트
+
+❌ **금지된 의존성**:
+
+- 다른 `features` 슬라이스 (feature 간 직접 의존 금지)
+- `widgets` 레이어
+- `pages` 레이어
+- `app` 레이어
+
+> 💡 **팁**: 여러 features가 공통 기능을 필요로 한다면, 그 기능을 `shared` 레이어로 이동시키거나 `entities` 레이어에서 관리하세요.
+
+## 명명 규칙
+
+- 소문자와 대시 사용: `auth-login`, `post-create`, `comment-edit`
+- 동사 형태 권장: 사용자 액션을 나타내는 이름 사용
+- 명확하고 구체적으로: 기능의 목적이 명확하게 드러나도록
+
+## 주의사항
+
+1. **하나의 기능에만 집중**: 각 feature는 단일 사용자 시나리오를 구현해야 합니다
+2. **재사용성 고려**: 여러 페이지에서 사용될 수 있도록 설계
+3. **독립성 유지**: 다른 features에 의존하지 않고 독립적으로 작동
+4. **적절한 추상화**: 너무 많은 feature를 만들지 말고, 중요한 기능 위주로 구성

apps/_template/src/pages/home/index.ts

@@ -0,0 +1 @@
+export { MainPage } from "./ui/main-page";

apps/_template/src/pages/home/ui/main-page.tsx

@@ -0,0 +1,9 @@
+"use client";
+
+export 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/_template/src/shared/config/env.ts

@@ -0,0 +1,8 @@
+export const PORT = process.env.NEXT_PUBLIC_PORT || "3000";
+export const PROXY_HOST = process.env.NEXT_PUBLIC_PROXY_HOST || `http://localhost:${PORT}`;
+export const SITE_ID = process.env.NEXT_PUBLIC_SITE_ID || "AS";
+export const SERVER_API_URL = process.env.SERVER_API_URL;
+export const CLAIM_NAME = process.env.NEXT_PUBLIC_CLAIM_NAME || "Authorization";
+export const ACCESS_TOKEN = process.env.NEXT_PUBLIC_ACCESS_TOKEN || "access-token";
+export const REFRESH_TOKEN = process.env.NEXT_PUBLIC_REFRESH_TOKEN || "refresh-token";
+export const AUTH_USER_ID = process.env.NEXT_PUBLIC_AUTH_USER_ID || "token-id";

apps/_template/tailwind.config.ts

@@ -18,9 +18,6 @@ const config: Config = {
         background: "var(--background)",
         foreground: "var(--foreground)",
       },
-      fontFamily: {
-        sans: ["var(--font-noto-sans-kr)", "Noto Sans KR", "sans-serif"],
-      },
     },
   },
   plugins: [],

apps/_template/tsconfig.json

@@ -19,13 +19,7 @@
       }
     ],
     "paths": {
-      "@/*": ["./*"],
-      "@/app/*": ["./app/*"],
-      "@/shared/*": ["./shared/*"],
-      "@/entities/*": ["./entities/*"],
-      "@/features/*": ["./features/*"],
-      "@/widgets/*": ["./widgets/*"],
-      "@/pages/*": ["./pages/*"],
+      "@/*": ["./src/*"],
       "@common/components": ["../../packages/common/components/dist/"],
       "@common/network": ["../../packages/common/network/"]
     }

apps/as/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

apps/as/.gitignore

@@ -1,13 +1,10 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
 # dependencies
+/node_modules
 /.pnp
-.pnp.*
-.yarn/*
-!.yarn/patches
-!.yarn/plugins
-!.yarn/releases
-!.yarn/versions
+.pnp.js
+.yarn/install-state.gz
 
 # testing
 /coverage
@@ -27,9 +24,9 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
-.pnpm-debug.log*
 
-# env files (can opt-in for committing if needed)
+# local env files
+.env.*
 
 # vercel
 .vercel

apps/as/.prettierrc

@@ -0,0 +1,8 @@
+{
+  "semi": true,
+  "trailingComma": "all",
+  "singleQuote": false,
+  "printWidth": 100,
+  "tabWidth": 2,
+  "plugins": ["prettier-plugin-tailwindcss"]
+}

apps/as/README.md

@@ -0,0 +1,187 @@
+# Template Application
+
+Next.js 애플리케이션 with FSD(Feature Sliced Design) 아키텍처
+
+## 기술 스택
+
+- **프레임워크**: Next.js 15 + TypeScript
+- **스타일링**: Tailwind CSS
+- **상태관리**: Zustand
+- **데이터 페칭**: TanStack Query (React Query)
+- **폼 관리**: React Hook Form + Zod
+- **테이블**: TanStack Table
+- **HTTP 클라이언트**: Axios
+- **날짜 처리**: Day.js
+
+## 프로젝트 구조 (FSD + Next.js App Router)
+
+이 프로젝트는 **Feature-Sliced Design v2.1**과 **FSD 공식 Next.js 가이드**에 맞춰 구성되어 있습니다. Next.js `app/`은 라우트만 담당하고, 실제 레이어는 `src/` 아래에 있습니다.
+
+```
+_template/
+├── app/                    # Next.js App Router (루트) — 라우트·레이아웃 진입점만
+│   ├── layout.tsx         # 루트 레이아웃 (src/app에서 providers, styles import)
+│   └── (with-base-layout)/
+│       ├── layout.tsx     # BaseLayout 래퍼 (src/app/layouts에서 import)
+│       └── page.tsx       # re-export: export { MainPage as default } from '@/pages/home'
+│
+├── pages/                  # 빈 폴더 + README (Next.js가 src/pages를 Pages Router로 쓰지 않도록)
+│   └── README.md
+│
+└── src/                    # FSD 레이어 (실제 코드)
+    ├── app/                # App 레이어 (슬라이스 없음, 세그먼트만)
+    │   ├── providers/      # 전역 Providers (QueryClient 등)
+    │   ├── styles/         # 글로벌 스타일 (globals.css)
+    │   └── layouts/        # 공통 레이아웃 컴포넌트 (BaseLayoutWrapper)
+    │
+    ├── pages/              # Pages 레이어 (페이지 슬라이스)
+    │   └── home/
+    │       ├── ui/
+    │       └── index.ts    # Public API
+    │
+    ├── widgets/            # Widgets 레이어
+    ├── features/           # Features 레이어
+    ├── entities/           # Entities 레이어
+    └── shared/             # Shared 레이어
+        ├── ui/
+        ├── api/
+        ├── lib/
+        └── config/
+```
+
+### 계층 구조 이해하기
+
+FSD는 **3단계 계층**으로 구성됩니다:
+
+1. **Layers (레이어)**: 책임과 의존성에 따른 수평적 분리 (app, pages, widgets, features, entities, shared)
+2. **Slices (슬라이스)**: 비즈니스 도메인에 따른 수직적 분리 (user, product, auth-login 등)
+3. **Segments (세그먼트)**: 기술적 목적에 따른 분리 (ui, api, model, lib 등)
+
+> 📚 각 레이어의 자세한 설명은 해당 폴더의 README.md를 참고하세요.
+
+## FSD 레이어 설명
+
+FSD는 계층적 아키텍처로, 각 레이어는 책임의 범위와 의존성의 정도에 따라 구분됩니다. 7개의 표준화된 레이어가 있으며, 프로젝트에 필요한 레이어만 사용하면 됩니다.
+
+### 레이어 계층 구조 (위에서 아래로)
+
+```
+app/       ↑ 가장 높은 책임, 가장 많은 의존성
+pages/     |
+widgets/   |
+features/  |
+entities/  |
+shared/    ↓ 가장 낮은 책임, 의존성 없음
+```
+
+### 1. App
+- **목적**: 앱 전체에 영향을 주는 기술적/비즈니스적 사항
+- **내용**: Context providers, 글로벌 스타일, 스토어 설정, 라우터 설정, 애널리틱스
+- **특징**: 슬라이스가 없고 세그먼트로만 구성
+- **의존성**: 모든 하위 레이어 사용 가능
+
+### 2. Pages (src/pages)
+- **목적**: 웹사이트나 애플리케이션을 구성하는 페이지/화면
+- **내용**: 페이지 UI, 로딩 상태, 에러 바운더리, 데이터 fetching
+- **특징**: 한 페이지당 한 슬라이스 (유사한 페이지는 그룹화 가능). Next.js `app/`의 route 파일에서 re-export
+- **의존성**: `widgets`, `features`, `entities`, `shared` 사용 가능
+
+> 💡 **FSD v2.1 권장사항**: "pages-first" 접근 방식을 따라, 재사용되지 않는 큰 UI 블록과 비즈니스 로직은 페이지 슬라이스에 유지하세요.
+
+### 3. Widgets
+- **목적**: 큰 규모의 독립적인 UI 블록
+- **내용**: 여러 features와 entities를 조합한 복합 UI
+- **사용 시기**: 여러 페이지에서 재사용되거나, 페이지에 여러 개의 큰 독립적 블록이 있을 때
+- **의존성**: `features`, `entities`, `shared` 사용 가능 (다른 `widgets` 불가)
+
+### 4. Features
+- **목적**: 사용자가 수행하는 주요 상호작용과 비즈니스 기능
+- **내용**: 사용자 시나리오 (예: 로그인, 상품 검색, 댓글 작성)
+- **사용 시기**: 여러 페이지에서 재사용되는 기능
+- **의존성**: `entities`, `shared` 사용 가능 (다른 `features` 불가)
+
+### 5. Entities
+- **목적**: 비즈니스가 다루는 실제 개념 (User, Product, Order 등)
+- **내용**: 데이터 모델, 타입, API 요청, 엔티티의 시각적 표현
+- **특징**: 비즈니스 용어로 명명
+- **의존성**: 다른 `entities`, `shared` 사용 가능
+
+### 6. Shared
+- **목적**: 애플리케이션의 기반 제공
+- **내용**: API 클라이언트, UI Kit, 유틸리티 라이브러리, 글로벌 설정
+- **특징**: 비즈니스 로직 없음, 슬라이스가 없고 세그먼트로만 구성
+- **의존성**: 외부 라이브러리만 사용 가능 (다른 레이어 불가)
+
+## 시작하기
+
+```bash
+# 의존성 설치
+pnpm install
+
+# 개발 서버 실행
+pnpm run dev
+
+# 프로덕션 빌드
+pnpm run build
+
+# 프로덕션 서버 실행
+pnpm start
+```
+
+## 환경 변수
+
+`.env.local` 파일 생성:
+
+```env
+NEXT_PUBLIC_API_URL=http://localhost:3000/api
+```
+
+## FSD 핵심 규칙
+
+### 1. Import 규칙
+
+> **슬라이스 내의 모듈(파일)은 오직 하위 레이어에 있는 슬라이스만 import할 수 있습니다.**
+
+```typescript
+// ✅ 올바른 import (하위 레이어)
+// features/auth-login/ui/form.tsx
+import { User } from "entities/user";
+import { Button } from "shared/ui/button";
+
+// ❌ 잘못된 import (같은 레이어)
+// features/auth-login/ui/form.tsx
+import { PostForm } from "features/post-create";  // 금지!
+
+// ❌ 잘못된 import (상위 레이어)
+// features/auth-login/ui/form.tsx
+import { Header } from "widgets/header";  // 금지!
+```
+
+### 2. Public API 규칙
+
+> **슬라이스 외부에서는 Public API(index.ts)를 통해서만 접근해야 합니다.**
+
+```typescript
+// ✅ 올바른 import (Public API 사용)
+import { LoginForm } from "features/auth-login";
+
+// ❌ 잘못된 import (내부 구조 직접 접근)
+import { LoginForm } from "features/auth-login/ui/login-form";
+```
+
+**Public API 작성 시 주의사항**:
+- 와일드카드 re-export(`export * from`) 사용 지양
+- 필요한 것만 명시적으로 export
+- 슬라이스의 인터페이스를 명확하게 표현
+
+```typescript
+// ❌ 나쁜 예시
+export * from "./ui/Comment";
+export * from "./model/comments";
+
+// ✅ 좋은 예시
+export { Comment } from "./ui/comment";
+export { CommentForm } from "./ui/comment-form";
+export { useComments } from "./model/use-comments";
+export type { Comment, CommentFormData } from "./model/types";
+```

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

@@ -0,0 +1,11 @@
+import type { ReactNode } from "react";
+
+import { BaseLayoutWrapper } from "@/app/layouts/base-layout";
+
+interface WithBaseLayoutProps {
+  children: ReactNode;
+}
+
+export default function WithBaseLayout({ children }: WithBaseLayoutProps) {
+  return <BaseLayoutWrapper>{children}</BaseLayoutWrapper>;
+}

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

@@ -0,0 +1 @@
+export { MainPage as default } from "@/pages/home";

apps/as/app/README.md

@@ -0,0 +1,169 @@
+# App Layer
+
+**App**은 애플리케이션 전체에 영향을 미치는 기술적, 비즈니스적 사항을 다루는 최상위 레이어입니다.
+
+## 목적
+
+- 애플리케이션의 진입점(entrypoint) 제공
+- 전역 Context Providers 설정
+- 라우터 구성
+- 글로벌 스타일 정의
+- 전역 상태 저장소 설정
+- 애널리틱스 및 모니터링 설정
+
+## 특징
+
+- **슬라이스 없음**: App 레이어는 Shared처럼 슬라이스가 없고 세그먼트로만 구성됩니다
+- **전체 앱 관심사**: 특정 비즈니스 도메인이 아닌 앱 전체와 관련된 코드만 포함
+- **최상위 레이어**: 모든 하위 레이어의 모듈을 자유롭게 import 가능
+
+## 구조 (Next.js App Router)
+
+Next.js를 사용하는 경우, App 레이어는 주로 `app/` 디렉토리로 표현됩니다:
+
+```
+app/
+├── (routes)/              # 라우트 그룹 및 페이지
+│   ├── (auth)/
+│   │   ├── login/
+│   │   │   └── page.tsx
+│   │   └── register/
+│   │       └── page.tsx
+│   └── (main)/
+│       ├── dashboard/
+│       │   └── page.tsx
+│       └── settings/
+│           └── page.tsx
+├── layout.tsx            # 루트 레이아웃
+├── page.tsx              # 홈 페이지
+├── globals.css           # 글로벌 스타일
+├── providers.tsx         # 전역 Providers 설정
+└── error.tsx             # 글로벌 에러 핸들러
+```
+
+### 일반적인 FSD 세그먼트 구조
+
+FSD 표준 세그먼트를 사용하는 경우:
+
+```
+app/
+├── entrypoint/           # 애플리케이션 진입점 (프레임워크별)
+│   └── index.tsx
+├── providers/            # Context Providers
+│   ├── query-provider.tsx
+│   ├── theme-provider.tsx
+│   └── index.tsx
+├── styles/               # 글로벌 스타일
+│   ├── globals.css
+│   └── theme.css
+├── store/                # 글로벌 상태 저장소 설정
+│   └── index.ts
+└── routes/               # 라우터 설정
+    └── index.tsx
+```
+
+## 예시
+
+### Next.js Providers 설정
+
+```typescript
+// app/providers.tsx
+'use client';
+
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { ThemeProvider } from 'next-themes';
+import { useState } from 'react';
+
+export function Providers({ children }: { children: React.ReactNode }) {
+  const [queryClient] = useState(() => new QueryClient({
+    defaultOptions: {
+      queries: {
+        staleTime: 60 * 1000,
+      },
+    },
+  }));
+
+  return (
+    <QueryClientProvider client={queryClient}>
+      <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
+        {children}
+      </ThemeProvider>
+    </QueryClientProvider>
+  );
+}
+
+// app/layout.tsx
+import { Providers } from './providers';
+import './globals.css';
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="ko">
+      <body>
+        <Providers>
+          {children}
+        </Providers>
+      </body>
+    </html>
+  );
+}
+```
+
+### 글로벌 설정
+
+```typescript
+// app/config/analytics.ts
+export function initAnalytics() {
+  if (typeof window !== 'undefined') {
+    // 애널리틱스 초기화
+  }
+}
+
+// app/config/monitoring.ts
+export function initMonitoring() {
+  // 에러 모니터링 설정
+}
+```
+
+## Next.js App Router와 FSD
+
+Next.js의 `app/` 디렉토리는 FSD의 **App 레이어**와 **Pages 레이어**를 동시에 담당합니다:
+
+- **루트 레벨 파일들** (`layout.tsx`, `providers.tsx`, `globals.css`): App 레이어
+- **라우트 폴더들** (`dashboard/`, `login/` 등): Pages 레이어
+
+각 페이지별 비즈니스 로직은:
+- 재사용되지 않는 UI는 페이지 슬라이스(`app/dashboard/` 등) 안에 유지
+- 재사용되는 기능은 `features/` 레이어로 분리
+- 여러 페이지에서 재사용되는 큰 UI 블록은 `widgets/` 레이어로 분리
+
+## 레이어 의존성 규칙
+
+✅ **허용되는 의존성**:
+- 모든 하위 레이어 (`pages`, `widgets`, `features`, `entities`, `shared`)
+- 같은 `app` 레이어 내의 다른 세그먼트
+- 외부 라이브러리
+
+❌ **금지된 의존성**:
+- 없음 (App은 최상위 레이어)
+
+## 주의사항
+
+1. **비대화 방지**: App 레이어가 너무 커지면 관리가 어려워집니다. 대부분의 로직은 하위 레이어에 배치하세요
+2. **전역 관심사만**: 특정 페이지나 기능에만 관련된 코드는 해당 레이어로 이동
+3. **라우터 레벨 로직**: 라우터 및 서버 레벨 로직은 이 레이어에 유지
+4. **Processes 레이어 사용 지양**: Processes 레이어는 deprecated되었으므로 해당 로직은 `app`이나 `features`에 배치
+
+## FSD v2.1 권장사항
+
+최신 FSD 버전(v2.1)은 **"pages-first"** 접근 방식을 권장합니다:
+
+- 더 많은 코드를 페이지 슬라이스에 유지
+- 큰 UI 블록과 재사용되지 않는 비즈니스 로직은 즉시 추출하지 말고 페이지에 보관
+- 실제로 재사용이 필요할 때만 `features`나 `widgets`로 분리
+
+이 접근 방식은 과도한 추상화를 방지하고 코드를 더 쉽게 탐색할 수 있게 합니다.

apps/as/app/api/proxy/[...url]/route.ts

@@ -0,0 +1,94 @@
+import { cookies } from "next/headers";
+import { NextResponse } from "next/server";
+
+import {
+  ACCESS_TOKEN,
+  AUTH_USER_ID,
+  CLAIM_NAME,
+  REFRESH_TOKEN,
+  SERVER_API_URL,
+  SITE_ID,
+} from "@/shared/config";
+
+async function handler(
+  request: Request,
+  params: { url: string[] },
+  method: "GET" | "POST" | "PUT" | "DELETE",
+) {
+  const cookieStore = await cookies();
+  const headers: Record<string, string> = {
+    "Content-Type": "application/json",
+    "X-Site-Id": SITE_ID,
+  };
+  let body = {};
+  const isRefreshHandler = params.url.includes("refresh");
+
+  // silent refresh
+  if (isRefreshHandler) {
+    const refreshToken = cookieStore.get(REFRESH_TOKEN);
+    headers[CLAIM_NAME] = refreshToken?.value ?? "";
+
+    if (!headers[CLAIM_NAME]) {
+      return NextResponse.json({ message: "Can't refresh" }, { status: 401 });
+    }
+  }
+
+  try {
+    if (!isRefreshHandler) {
+      body = await request.json();
+    }
+
+    const result = await fetch(`${SERVER_API_URL}/${params.url.join("/")}`, {
+      method,
+      headers,
+      body: JSON.stringify(body),
+    });
+
+    if (!result.ok) {
+      return NextResponse.json({ message: "Invalid Credentials" }, { status: 401 });
+    }
+
+    const accessToken = result.headers.get(ACCESS_TOKEN);
+    const refreshToken = result.headers.get(REFRESH_TOKEN);
+    const userId = result.headers.get(AUTH_USER_ID);
+
+    if (accessToken && userId) {
+      const response = NextResponse.json({
+        [ACCESS_TOKEN]: accessToken,
+        [AUTH_USER_ID]: userId,
+      });
+
+      const forwardedHost = request.headers.get("x-forwarded-host");
+      const host = request.headers.get("host");
+      const actualHost = forwardedHost || host || new URL(request.url).hostname.toString();
+
+      // 운영 환경에서 domain 설정
+      const domain = actualHost.includes("hasuon.or.kr") ? ".hasuon.or.kr" : actualHost;
+
+      if (refreshToken) {
+        cookieStore.set(REFRESH_TOKEN, refreshToken, {
+          httpOnly: true,
+          sameSite: "strict",
+          domain: domain,
+          path: "/",
+        });
+      }
+
+      return response;
+    }
+
+    return NextResponse.json({ message: "Invalid Credentials" }, { status: 401 });
+  } catch (error) {
+    return NextResponse.json({ message: "Server Error", error }, { status: 500 });
+  }
+}
+
+export async function POST(request: Request, props: { params: Promise<{ url: string[] }> }) {
+  const params = await props.params;
+  return handler(request, params, "POST");
+}
+
+export async function PUT(request: Request, props: { params: Promise<{ url: string[] }> }) {
+  const params = await props.params;
+  return handler(request, params, "PUT");
+}

apps/as/app/layout.tsx

@@ -0,0 +1,27 @@
+import type { Metadata } from "next";
+import { cookies } from "next/headers";
+
+import { Providers } from "@/app/providers";
+
+import "@/app/styles/globals.css";
+
+export const metadata: Metadata = {
+  title: "행정지원시스템",
+  description: "행정지원시스템",
+};
+
+interface RootLayoutProps {
+  children: React.ReactNode;
+}
+
+export default async function RootLayout({ children }: RootLayoutProps) {
+  const theme = (await cookies()).get("site-theme-key");
+
+  return (
+    <html lang="ko" data-theme={theme?.value}>
+      <body>
+        <Providers>{children}</Providers>
+      </body>
+    </html>
+  );
+}

apps/as/docs/approval-line-management/SPEC.md

@@ -0,0 +1,358 @@
+# 화면설계서: 결재선 관리
+
+## 1. 기본 정보
+
+| 항목       | 내용                                         |
+| ---------- | -------------------------------------------- |
+| 버전       | 0.1 (초안)                                   |
+| 프로세스명 | UI설계                                       |
+| 화면명     | 결재선 관리                                  |
+| 화면 유형  | [v] 조회 [v] 입력 [v] 수정 [v] 삭제 [ ] 출력 |
+| 메뉴 경로  | 디지털행정지원 > 시스템관리 > 결재선 관리    |
+
+---
+
+## 2. 화면 목적
+
+전자결재 처리에 사용할 **결재서식**(템플릿)을 등록·관리하고, 각 서식별로 **결재선**(접수 -> 검토 -> 승인 -> 최종승인 단계)을 구성한다. 상단의 결재서식 목록에서 하나를 선택하면 하단 영역에 해당 서식의 결재 단계(결재자/순서/구분)가 표시되며, 사용자는 결재자 추가·수정·삭제와 결재선 저장을 수행한다.
+
+---
+
+## 3. 화면 구성
+
+### 3-1. 전체 레이아웃
+
+```
+┌──────────────────────────────────────────────────────────────────────────────┐
+│  페이지 타이틀: 결재선 관리              브레드크럼: 디지털행정지원 > … >    │
+├──────────────────────────────────────────────────────────────────────────────┤
+│  [영역 A] 전자결재선 관리 목록                              [서식 등록]      │
+│  ┌──────────────────────────────────────────────────────────────────────┐    │
+│  │ 전자결재서식아이디 | 결재서식명 | 문서구분 | 등록일시 | 관리         │    │
+│  ├──────────────────────────────────────────────────────────────────────┤    │
+│  │  TMPL-0001 (선택 행 강조)  …                            [수정][삭제] │    │
+│  │  TMPL-0002 …                                            [수정][삭제] │    │
+│  └──────────────────────────────────────────────────────────────────────┘    │
+├──────────────────────────────────────────────────────────────────────────────┤
+│  [영역 B] 결재선 관리                            선택된 서식: TMPL-0001      │
+│  ┌──────────────────────────────────────────────────────────────────────┐    │
+│  │ [영역 B-1] 결재자 입력 폼                                            │    │
+│  │ 결재선아이디(자동발급) | 결재구분 ▾ | 결재자명 [검토인력 선택]       │    │
+│  │ 결재순서번호               [결재자 추가] [결재선 저장] [초기화]      │    │
+│  ├──────────────────────────────────────────────────────────────────────┤    │
+│  │ [영역 B-2] 결재선 그리드                                             │    │
+│  │ 결재선아이디 | 결재순서번호 | 결재구분 | 결재자명 | 등록일시 | 관리 │    │
+│  │  APLN-0001  |     1        | 접수     | 김민수   | …      |[수정][삭제] │
+│  │  APLN-0002  |     2        | 검토     | 박지훈   | …      |[수정][삭제] │
+│  │  APLN-0003  |     3        | 최종승인 | 이서연   | …      |[수정][삭제] │
+│  └──────────────────────────────────────────────────────────────────────┘    │
+└──────────────────────────────────────────────────────────────────────────────┘
+```
+
+### 3-2. 화면 데이터 흐름
+
+```
+BEGIN
+
+  // 최초 진입
+  CALL TBD.결재서식목록조회()
+  DISPLAY 결재서식 그리드 (영역 A)
+  DISPLAY 빈 상태 안내 (영역 B)            // 서식 미선택 시 폼·그리드 비활성
+
+  // 영역 A: 서식 행 선택
+  ON 영역 A 행 CLICK DO
+      SET 선택된 서식 = 행.전자결재서식아이디  // 영역 B 상단 라벨에 표시
+      CALL TBD.결재선목록조회(서식아이디)
+      DISPLAY 결재선 그리드 (영역 B-2)
+      RESET 결재자 입력 폼 (영역 B-1)
+  END ON
+
+  // 영역 A: 신규 서식 등록
+  ON [서식 등록] 버튼 CLICK DO
+      OPEN 결재서식 등록 다이얼로그
+      ON 확인 DO
+          CALL TBD.결재서식등록(서식정보)
+          CALL TBD.결재서식목록조회()        // → 영역 A 갱신
+      END ON
+  END ON
+
+  // 영역 A: 서식 수정·삭제
+  ON 영역 A [수정] 버튼 CLICK DO
+      OPEN 결재서식 수정 다이얼로그(선택 행)
+      ON 확인 DO
+          CALL TBD.결재서식수정(서식아이디, 서식정보)
+          CALL TBD.결재서식목록조회()
+      END ON
+  END ON
+
+  ON 영역 A [삭제] 버튼 CLICK DO
+      CONFIRM "선택한 결재서식을 삭제하시겠습니까?"
+      CALL TBD.결재서식삭제(서식아이디)
+      CALL TBD.결재서식목록조회()
+      IF 삭제된 서식이 현재 선택된 서식 THEN
+          RESET 영역 B (그리드 비우기, 폼 비활성)
+      END IF
+  END ON
+
+  // 영역 B-1: 결재자 입력 폼
+  ON [검토인력 선택] 버튼 CLICK DO
+      VALIDATE 서식 선택됨   // 미선택 시 안내 후 종료
+      OPEN 검토인력 선택 다이얼로그
+      ON 선택 DO
+          SET 결재자명 = 선택인력.성명
+          SET 결재자ID = 선택인력.사용자ID   // 내부 상태로 보관
+      END ON
+  END ON
+
+  ON 결재구분 SELECT CHANGE DO
+      SET 결재구분 = 선택값                // 접수 / 검토 / 최종승인
+  END ON
+
+  ON 결재순서번호 INPUT CHANGE DO
+      SET 결재순서번호 = 값(숫자)
+  END ON
+
+  // 영역 B-1: 결재자 추가 (그리드에 행 추가, 미저장 상태)
+  ON [결재자 추가] 버튼 CLICK DO
+      VALIDATE 서식 선택됨
+              · 결재구분 입력
+              · 결재자 선택됨
+              · 결재순서번호 > 0 (중복 시 안내)
+      ADD 입력 폼 값을 영역 B-2 그리드에 임시 행으로 추가
+      RESET 결재자 입력 폼 (영역 B-1)
+      // 결재선아이디는 저장 시점에 서버에서 자동 발급되므로
+      // 임시 행은 클라이언트 임시 키로 식별 (예: APLN-0007 같은 미발급 표기 또는 임시 ID)
+  END ON
+
+  // 영역 B-1: 결재선 저장 (그리드 전체 일괄 저장)
+  ON [결재선 저장] 버튼 CLICK DO
+      VALIDATE 서식 선택됨 · 결재선 1건 이상 · 순서번호 중복 없음
+      CALL TBD.결재선일괄저장(서식아이디, 결재선목록)
+      CALL TBD.결재선목록조회(서식아이디)    // → 영역 B-2 갱신
+      TOAST "결재선이 저장되었습니다."
+  END ON
+
+  // 영역 B-1: 초기화
+  ON [초기화] 버튼 CLICK DO
+      RESET 결재자 입력 폼 (영역 B-1) → 기본값
+                                     (결재구분=접수, 결재자명="", 결재순서번호=1)
+  END ON
+
+  // 영역 B-2: 그리드 행 수정·삭제
+  ON 영역 B-2 [수정] 버튼 CLICK DO
+      OPEN 결재자 수정 다이얼로그(선택 행)
+      ON 확인 DO
+          CALL TBD.결재선수정(결재선아이디, 결재선정보)
+          CALL TBD.결재선목록조회(서식아이디)
+      END ON
+  END ON
+
+  ON 영역 B-2 [삭제] 버튼 CLICK DO
+      CONFIRM "선택한 결재자를 삭제하시겠습니까?"
+      CALL TBD.결재선삭제(결재선아이디)
+      CALL TBD.결재선목록조회(서식아이디)
+  END ON
+
+END
+```
+
+---
+
+## 4. 영역 A: 전자결재선 관리 목록
+
+선택된 결재서식이 영역 B의 작업 대상이 된다. 행 클릭으로 선택 상태를 표시(좌측 컬러 바·배경 강조)한다.
+
+### 4-1. 헤더 / 툴바
+
+| 항목        | 내용                                            |
+| ----------- | ----------------------------------------------- |
+| 섹션 타이틀 | 전자결재선 관리 목록                            |
+| 우측 버튼   | **[서식 등록]** — 결재서식 등록 다이얼로그 오픈 |
+
+### 4-2. 그리드 컬럼
+
+| 컬럼명             | Field             | 타입   | 비고                                          |
+| ------------------ | ----------------- | ------ | --------------------------------------------- |
+| 전자결재서식아이디 | `elctAtrzTmpltId` | string | 예) `TMPL-0001` (서버 자동 발급, TBD)         |
+| 결재서식명         | `atrzTmpltNm`     | string | 예) `설치인가 검토 결재`                      |
+| 문서구분           | `docSeNm`         | string | 예) `설치인가`, `기본계획` (코드/명 매핑 TBD) |
+| 등록일시           | `regDt`           | string | `YYYY-MM-DD HH:mm:ss`                         |
+| 관리               | —                 | —      | 행별 **[수정] · [삭제]** 버튼                 |
+
+- 행 클릭 시: 해당 서식을 **선택 상태**로 만들고 영역 B 라벨(`선택된 서식: {전자결재서식아이디}`)과 영역 B-2 그리드를 갱신한다.
+- 페이지네이션: TBD (스크린샷에는 미표시).
+
+### 4-3. 버튼
+
+| 버튼명    | 위치           | 동작                                                              |
+| --------- | -------------- | ----------------------------------------------------------------- |
+| 서식 등록 | 섹션 우측 상단 | 결재서식 등록 다이얼로그 오픈 (입력 항목·필수값 TBD)              |
+| 수정      | 행별           | 결재서식 수정 다이얼로그 오픈 (해당 행 값으로 초기화)             |
+| 삭제      | 행별           | 확인 다이얼로그 후 삭제. 선택 중인 서식이면 영역 B 상태도 초기화. |
+
+### 4-4. 다이얼로그(개요)
+
+| 다이얼로그명       | 트리거           | 입력 항목(예상)                | 비고                     |
+| ------------------ | ---------------- | ------------------------------ | ------------------------ |
+| 결재서식 등록      | [서식 등록] 클릭 | 결재서식명, 문서구분(드롭다운) | 등록 성공 시 영역 A 갱신 |
+| 결재서식 수정      | 행별 [수정]      | 결재서식명, 문서구분           | 기존 값으로 초기화       |
+| 결재서식 삭제 확인 | 행별 [삭제]      | (확인/취소)                    |                          |
+
+---
+
+## 5. 영역 B: 결재선 관리
+
+영역 A에서 선택된 결재서식을 기준으로 결재 단계(접수·검토·최종승인)와 결재자, 순서를 관리한다. 영역 B는 상단 **결재자 입력 폼(B-1)** 과 하단 **결재선 그리드(B-2)** 로 구성된다.
+
+### 5-1. 헤더 / 상태 표시
+
+| 항목        | 내용                                                                                                         |
+| ----------- | ------------------------------------------------------------------------------------------------------------ |
+| 섹션 타이틀 | 결재선 관리                                                                                                  |
+| 우측 라벨   | `선택된 서식: {전자결재서식아이디}` — 영역 A에서 선택한 서식 ID를 강조 색으로 표시. 미선택 시 영역 B 비활성. |
+
+### 5-2. 영역 B-1: 결재자 입력 폼
+
+#### 필드 정의
+
+| 표시명                 | 입력 유형         | 필수 | 기본값      | 데이터 소스          | API 파라미터 매핑 | 비고                                                                  |
+| ---------------------- | ----------------- | ---- | ----------- | -------------------- | ----------------- | --------------------------------------------------------------------- |
+| 결재선아이디(자동발급) | 텍스트(읽기 전용) | —    | `APLN-XXXX` | 서버 자동 발급 (TBD) | TBD               | 입력 불가. 저장 시 서버 발급. 표시값은 미발급 자리표시(또는 임시 ID). |
+| 결재구분               | 드롭다운          | 예   | `접수`      | 코드 (TBD)           | TBD               | 옵션: **접수 / 검토 / 최종승인** (그리드 행 기준)                     |
+| 결재자명               | 텍스트(읽기 전용) | 예   | `""`        | [검토인력 선택] 결과 | TBD               | 자유 입력 불가. 다이얼로그 선택 결과로 채움.                          |
+| 결재순서번호           | 숫자 입력         | 예   | `1`         | —                    | TBD               | 1 이상의 정수. 동일 서식 내 중복 검증 필요.                           |
+
+플레이스홀더 / 표시 텍스트:
+
+- 결재자명 입력란 플레이스홀더: `검토인력을 선택하세요`
+- 결재선아이디 표시 예시: `APLN-0007` (다음 발급 예정 번호 노출 또는 빈 칸 — 표시 정책 TBD)
+
+#### 버튼
+
+| 버튼명        | 동작                                                                                                          |
+| ------------- | ------------------------------------------------------------------------------------------------------------- |
+| 검토인력 선택 | **검토인력 선택 다이얼로그** 오픈. 선택 시 `결재자명`과 내부 `결재자 ID`를 폼 상태에 반영.                    |
+| 결재자 추가   | 입력 폼 값을 영역 B-2 그리드에 **임시 행**으로 추가하고 폼을 초기화한다. (서버 호출 없음, 저장 시 일괄 반영.) |
+| 결재선 저장   | 영역 B-2의 결재선 목록을 일괄 저장 API로 전송한다. 성공 시 그리드 재조회 + 토스트 표시.                       |
+| 초기화        | 입력 폼을 기본값으로 리셋(결재구분=접수, 결재자명=빈값, 결재순서번호=1).                                      |
+
+> 정책 메모: **[결재자 추가]** 와 **[결재선 저장]** 의 분리에 대해서는 두 가지 운영이 가능하다. 본 SPEC 초안은 그리드에 임시 행을 누적해 두고 [결재선 저장] 시점에 서버에 일괄 반영하는 모델을 가정한다. 실제 구현 방식(추가 즉시 저장 vs 일괄 저장)은 백엔드 API 확정 후 재정의(TBD).
+
+#### 다이얼로그
+
+| 다이얼로그명     | 트리거          | 표시 내용 / 입력 항목                                      | 결과                                |
+| ---------------- | --------------- | ---------------------------------------------------------- | ----------------------------------- |
+| 검토인력 선택    | [검토인력 선택] | 사용자 검색 필터(이름/소속 등 TBD), 사용자 목록(단일 선택) | 선택된 사용자 정보를 입력 폼에 반영 |
+| 결재자 수정      | B-2 행별 [수정] | 결재구분, 결재자명(선택), 결재순서번호                     | 확인 시 해당 행 갱신                |
+| 결재자 삭제 확인 | B-2 행별 [삭제] | (확인/취소)                                                | 확인 시 해당 행 삭제                |
+
+### 5-3. 영역 B-2: 결재선 그리드
+
+#### 그리드 컬럼
+
+| 컬럼명       | Field        | 타입   | 비고                                  |
+| ------------ | ------------ | ------ | ------------------------------------- |
+| 결재선아이디 | `atrzLineId` | string | 예) `APLN-0001` (서버 자동 발급, TBD) |
+| 결재순서번호 | `atrzSeqNo`  | number | 1부터 시작. 단계 순서.                |
+| 결재구분     | `atrzSeNm`   | string | `접수` / `검토` / `최종승인`          |
+| 결재자명     | `atrzUserNm` | string | 검토인력 선택 시 채워짐               |
+| 등록일시     | `regDt`      | string | `YYYY-MM-DD HH:mm:ss`                 |
+| 관리         | —            | —      | 행별 **[수정] · [삭제]** 버튼         |
+
+- 표시 정렬: 기본 `결재순서번호` 오름차순.
+- 임시 행(서버 미저장)과 저장된 행의 시각적 구분 필요(예: ID 컬럼 표기 또는 행 스타일). 세부 UI는 TBD.
+- 페이지네이션: TBD.
+
+---
+
+## 6. API/DTO 명세
+
+> 본 화면은 현재 UI 위주 초안으로, API/DTO는 백엔드 명세 확정 후 채운다.
+
+### 6-1. 공통
+
+| 항목        | 내용                                        |
+| ----------- | ------------------------------------------- |
+| Base prefix | TBD (예: `/server` 또는 결재 서비스 prefix) |
+| 인증        | JWT 토큰 기반 (Authorization 헤더)          |
+| 클라이언트  | TBD (예: `@/entities/approval-line`)        |
+
+### 6-2. 전자결재서식 (영역 A)
+
+| 기능               | Method | URL | Request DTO | Response DTO | API(클라이언트 함수명) |
+| ------------------ | ------ | --- | ----------- | ------------ | ---------------------- |
+| 결재서식 목록 조회 | TBD    | TBD | TBD         | TBD          | TBD                    |
+| 결재서식 등록      | TBD    | TBD | TBD         | TBD          | TBD                    |
+| 결재서식 수정      | TBD    | TBD | TBD         | TBD          | TBD                    |
+| 결재서식 삭제      | TBD    | TBD | TBD         | TBD          | TBD                    |
+
+### 6-3. 결재선 (영역 B)
+
+| 기능                     | Method | URL | Request DTO                          | Response DTO | API(클라이언트 함수명) |
+| ------------------------ | ------ | --- | ------------------------------------ | ------------ | ---------------------- |
+| 결재선 목록 조회(서식별) | TBD    | TBD | `{ elctAtrzTmpltId }` (TBD)          | TBD          | TBD                    |
+| 결재선 추가/일괄 저장    | TBD    | TBD | `{ elctAtrzTmpltId, lines[] }` (TBD) | TBD          | TBD                    |
+| 결재선 수정              | TBD    | TBD | TBD                                  | TBD          | TBD                    |
+| 결재선 삭제              | TBD    | TBD | TBD                                  | TBD          | TBD                    |
+
+### 6-4. 검토인력 (다이얼로그)
+
+| 기능               | Method | URL | Request DTO     | Response DTO | API(클라이언트 함수명) |
+| ------------------ | ------ | --- | --------------- | ------------ | ---------------------- |
+| 검토인력 목록 조회 | TBD    | TBD | TBD (검색 필터) | TBD          | TBD                    |
+
+---
+
+## 7. UI 구현 가이드
+
+### 7-1. 기술 스택·원칙
+
+- **공통 컴포넌트**: `@common/components` (버튼, 셀렉트, 인풋, 카드 등 기존 패턴 재사용).
+- **테이블**: `@tanstack/react-table`, 프로젝트 표준 `useDataTable` 패턴이 있다면 동일하게 적용.
+- **데이터**: React Query 기반 조회/뮤테이션. API 확정 후 `queryKey` 와 무효화 정책 정리.
+- **상태**: 영역 A의 **선택된 서식 ID**, 영역 B-1의 **결재자 입력 폼 값**, 영역 B-2의 **임시 결재선 배열**은 페이지 로컬 상태로 관리. 다이얼로그 상태(검토인력 선택 등)는 컴포넌트 로컬 상태 또는 가벼운 상태 관리 훅으로 분리.
+- **모의 데이터**: 백엔드 명세 확정 전까지 `@faker-js/faker` 로 그리드 목데이터 구성(스크린샷 컬럼/값과 동일 형태).
+
+### 7-2. 모듈·파일 배치(제안)
+
+| 구분               | 경로                                                                                                                                      |
+| ------------------ | ----------------------------------------------------------------------------------------------------------------------------------------- |
+| 라우트(App Router) | `apps/as/app/(with-base-layout)/approval-line-management/page.tsx`                                                                        |
+| 페이지 컴포넌트    | `apps/as/src/pages/approval-line-management/index.ts`<br/>`.../ui/approval-line-management-page.tsx`                                      |
+| 위젯(영역 단위)    | `apps/as/src/widgets/approval-template-list/`<br/>`apps/as/src/widgets/approval-line-editor/`                                             |
+| 피처(상호작용)     | `apps/as/src/features/approver-picker/` (검토인력 선택 다이얼로그)                                                                        |
+| 엔티티(도메인)     | `apps/as/src/entities/approval-template/`<br/>`apps/as/src/entities/approval-line/`                                                       |
+| 그리드 컬럼 정의   | `entities/approval-template/model/approval-template-table-columns.tsx`<br/>`entities/approval-line/model/approval-line-table-columns.tsx` |
+| API 클라이언트     | `entities/approval-template/api/*`, `entities/approval-line/api/*` (TBD)                                                                  |
+
+### 7-3. 영역별 UI 매핑
+
+| 영역   | 주요 UI                                                                                                                                                     | 비고                                    |
+| ------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------- |
+| A      | 섹션 헤더 + Button(`서식 등록`) + DataTable (행 선택, 행별 Action 버튼)                                                                                     | 선택 행 강조, 행 클릭으로 영역 B 갱신   |
+| B 헤더 | 상태 라벨 `선택된 서식: {ID}`                                                                                                                               | 미선택 시 영역 B-1·B-2 비활성           |
+| B-1    | 읽기 전용 Input(아이디), Select(결재구분), Input+Button(결재자/검토인력 선택), NumberInput(순서번호), Action 버튼 3종(`결재자 추가`/`결재선 저장`/`초기화`) | 폼 유효성 검증 후 그리드에 임시 행 추가 |
+| B-2    | DataTable (행별 [수정][삭제]), 임시 행 시각적 구분                                                                                                          | 기본 정렬: 결재순서번호 ASC             |
+| 공통   | Dialog(검토인력 선택, 서식 등록/수정, 결재자 수정, 삭제 확인)                                                                                               | 디자인 시스템의 `Dialog` 컴포넌트 사용  |
+
+### 7-4. 데이터 흐름(요약)
+
+- **진입 시**: 결재서식 목록 조회(TBD) → 영역 A 그리드 렌더. 영역 B는 안내/비활성 상태.
+- **서식 선택 시**: 선택된 `elctAtrzTmpltId` 를 페이지 상태로 보관 → 결재선 목록 조회(TBD) → 영역 B-2 그리드 갱신. 영역 B-1 폼 초기화.
+- **결재자 추가**: 입력 폼 값을 영역 B-2의 **클라이언트 임시 배열**에 push. 결재선아이디는 미발급 상태로 표시(또는 임시 키). 폼 리셋.
+- **결재선 저장**: 임시 배열 + 기존 그리드 행을 합쳐 일괄 저장 API(TBD) 호출 → 성공 시 그리드 재조회 + 토스트.
+- **수정/삭제**: 각각의 단건 API(TBD) 호출 후 그리드 재조회.
+- **검토인력 선택 다이얼로그**: 사용자 목록 조회(TBD) → 단일 선택 → 폼의 결재자명/결재자 ID 갱신.
+- **서식 등록/수정/삭제**: 다이얼로그 또는 확인 후 단건 API(TBD) 호출 → 영역 A 그리드 재조회. 삭제 대상이 현재 선택된 서식이면 영역 B 초기화.
+
+### 7-5. 미확정 / 검증 필요 항목 (TBD)
+
+- 모든 백엔드 API 경로·DTO·필드명.
+- `결재선아이디(자동발급)` 입력 박스의 표시 정책: (a) 다음 발급 예정 번호 미리 보여주기, (b) 저장 전에는 빈 칸 또는 자리표시자만, (c) 임시 ID.
+- `[결재자 추가]` 의 동작: 그리드에 임시 누적(현재 가정) vs 즉시 단건 저장.
+- 결재구분 코드 값(`접수`/`검토`/`최종승인`)의 코드 매핑.
+- 문서구분 코드 값(`설치인가`/`기본계획` 등)의 코드 매핑.
+- 영역 A·B 그리드의 페이지네이션·정렬·검색 필터 유무.
+- 검토인력 선택 다이얼로그의 검색 필드(부서/직급/이름 등) 및 다중 선택 허용 여부.
+- 결재선 저장 시 순서번호 중복·누락(예: 1, 2, 4) 허용 정책.
+- 권한(역할별 등록/수정/삭제 가능 여부).

apps/as/eslint.config.mjs

@@ -0,0 +1,33 @@
+import { FlatCompat } from "@eslint/eslintrc";
+import { dirname } from "path";
+import { fileURLToPath } from "url";
+import baseEsLintConfig from "../../eslint.config.mjs";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+const compat = new FlatCompat({
+  baseDirectory: __dirname,
+});
+
+const eslintConfig = [
+  ...compat.extends("next/core-web-vitals", "next/typescript"),
+  ...baseEsLintConfig,
+  {
+    rules: {
+      "react-hooks/exhaustive-deps": "off",
+      "@typescript-eslint/no-unused-vars": [
+        "warn",
+        {
+          argsIgnorePattern: "^_",
+          varsIgnorePattern: "^_",
+          caughtErrorsIgnorePattern: "^_",
+        },
+      ],
+      "@typescript-eslint/no-explicit-any": "warn",
+      "@typescript-eslint/no-wrapper-object-types": "warn",
+    },
+  },
+];
+
+export default eslintConfig;

apps/as/middleware.ts

@@ -0,0 +1,51 @@
+import { NextRequest, NextResponse } from "next/server";
+
+import { PORT, PROXY_HOST, SERVER_API_URL, SITE_ID } from "@/shared/config";
+
+const serverApiUrl = process.env.SERVER_API_URL ?? "http://localhost:3000";
+
+// CSP 헤더 설정 함수 (img-src만)
+function addSecurityHeaders(response: NextResponse): NextResponse {
+  response.headers.set("Content-Security-Policy", "img-src 'self' data: https: blob:;");
+  return response;
+}
+
+export function middleware(req: NextRequest) {
+  const pathname = req.nextUrl.pathname;
+  const searchParams = req.nextUrl.searchParams;
+
+  const logMessages: string[] = [
+    `[Middleware Request] ${new Date().toISOString()}`,
+    `[Environment]\n  Mode: ${process.env.NODE_ENV}\n  Port: ${PORT}\n  Proxy Host: ${PROXY_HOST}\n  Server API URL: ${SERVER_API_URL}\n  Site ID: ${SITE_ID}`,
+    `[Request]\n  Original Pathname: ${pathname}`,
+  ];
+
+  if (pathname.startsWith("/server")) {
+    const queryParams = searchParams.toString();
+    const newUrl = `${serverApiUrl}${pathname.replace("/server", "")}${
+      queryParams ? `?${queryParams}` : ""
+    }`;
+
+    logMessages.push(`  Rewritten URL: ${newUrl}`);
+    logMessages.push("\n--------------------------------\n");
+    console.log(logMessages.join("\n"));
+
+    const response = NextResponse.rewrite(new URL(newUrl));
+    return addSecurityHeaders(response);
+  }
+
+  // if (pathname === "/") {
+  //   const response = NextResponse.redirect(new URL("/dashboard", req.url));
+  //   return addSecurityHeaders(response);
+  // }
+
+  logMessages.push("\n--------------------------------\n");
+  console.log(logMessages.join("\n"));
+
+  const response = NextResponse.next();
+  return addSecurityHeaders(response);
+}
+
+export const config = {
+  matcher: ["/server/:path*", "/"],
+};

apps/as/next-env.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
+/// <reference types="next/navigation-types/compat/navigation" />
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

apps/as/next.config.ts

@@ -0,0 +1,8 @@
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  reactStrictMode: true,
+  transpilePackages: ["@common/assets"],
+};
+
+export default nextConfig;

apps/as/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "as",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint",
+    "lint:fsd": "steiger ."
+  },
+  "dependencies": {
+    "@common/assets": "workspace:*",
+    "@common/components": "workspace:*",
+    "@common/network": "workspace:*",
+    "@hookform/resolvers": "^4.1.3",
+    "@tanstack/react-query": "^5.75.5",
+    "@tanstack/react-query-devtools": "^5.75.5",
+    "@tanstack/react-table": "^8.21.2",
+    "axios": "^1.8.1",
+    "dayjs": "^1.11.13",
+    "js-cookie": "^3.0.5",
+    "next": "15.3.8",
+    "react-hook-form": "^7.54.2",
+    "zod": "^3.24.2"
+  },
+  "devDependencies": {
+    "@eslint/eslintrc": "^3",
+    "@types/js-cookie": "^3.0.6",
+    "eslint": "^9.0.0",
+    "eslint-config-next": "15.3.8",
+    "eslint-plugin-react-hooks": "^5.0.0",
+    "postcss": "^8.4.49",
+    "prettier": "^3.4.2",
+    "prettier-plugin-tailwindcss": "^0.6.11",
+    "steiger": "^0.5.11",
+    "tailwindcss": "^3.4.14",
+    "typescript": "^5.7.2"
+  }
+}

apps/as/pages/README.md

@@ -0,0 +1,9 @@
+# 이 폴더는 비워 둡니다 (FSD + Next.js App Router)
+
+Next.js가 `src/pages`를 **Pages Router**용 `pages` 디렉터리로 인식하지 않도록,  
+프로젝트 루트에 **빈 `pages` 폴더**를 두는 것이 FSD 공식 가이드 권장사항입니다.
+
+- 실제 페이지(FSD Pages 레이어)는 **`src/pages`**에 있습니다.
+- Next.js 라우트는 **`app/`** 에서 `src/pages`를 re-export 하는 방식으로 연결됩니다.
+
+[Feature-Sliced Design - Usage with Next.js (App Router)](https://feature-sliced.design/docs/guides/tech/with-nextjs)

apps/as/src/app/layouts/base-layout.tsx

@@ -0,0 +1,37 @@
+"use client";
+
+import { useCallback } from "react";
+import { usePathname, useRouter } from "next/navigation";
+
+import { useQueryClient } from "@tanstack/react-query";
+
+import { PageLayout } from "@/shared/ui/page-layout";
+import type { MenuItem } from "@/entities/menu";
+import { BaseLayout } from "@common/components";
+
+interface BaseLayoutWrapperProps {
+  children: React.ReactNode;
+}
+
+export function BaseLayoutWrapper({ children }: BaseLayoutWrapperProps) {
+  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/src/app/providers/index.tsx

@@ -0,0 +1,23 @@
+"use client";
+
+import { QueryClientProvider } from "@tanstack/react-query";
+import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
+
+import { queryClient } from "@/shared/lib";
+import { StoreProvider } from "@/shared/providers";
+import { AuthWrapper } from "@/entities/auth";
+
+interface ProvidersProps {
+  children: React.ReactNode;
+}
+
+export function Providers({ children }: ProvidersProps) {
+  return (
+    <QueryClientProvider client={queryClient}>
+      <StoreProvider>
+        <AuthWrapper>{children}</AuthWrapper>
+      </StoreProvider>
+      <ReactQueryDevtools initialIsOpen={false} />
+    </QueryClientProvider>
+  );
+}

apps/as/src/app/styles/globals.css

@@ -0,0 +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;
+
+html,
+body {
+  color: var(--foreground);
+  background: var(--background);
+  font-family: "Noto Sans KR", sans-serif;
+  font-size: 10px;
+}

apps/as/src/entities/README.md

@@ -0,0 +1,114 @@
+# Entities Layer
+
+**Entities**는 프로젝트가 다루는 실제 비즈니스 개념을 나타내는 레이어입니다. 비즈니스에서 제품을 설명할 때 사용하는 용어들(예: User, Product, Order)이 주로 엔티티가 됩니다.
+
+## 목적
+
+- 비즈니스 엔티티의 데이터 모델 및 타입 정의
+- 엔티티 관련 API 요청 함수 관리
+- 엔티티의 시각적 표현 제공 (재사용 가능한 UI)
+- 여러 페이지에서 동일한 외관을 재사용할 수 있도록 지원
+
+## 구조
+
+각 엔티티 슬라이스는 다음 세그먼트로 구성됩니다:
+
+```
+entities/
+└── [entity-name]/
+    ├── model/         # 데이터 저장소, 검증 스키마, 상태 관리
+    ├── api/           # 엔티티 관련 API 요청 함수
+    ├── ui/            # 엔티티 시각적 표현 (선택적)
+    ├── lib/           # 엔티티 관련 유틸리티 (선택적)
+    ├── @x/            # 다른 엔티티로부터의 cross-import용 Public API (선택적)
+    └── index.ts       # Public API
+```
+
+### 세그먼트 설명
+
+- **model**: 데이터 모델, 타입 정의, 상태 저장소 (Zustand 등)
+- **api**: 백엔드 API 호출 함수
+- **ui**: 엔티티를 표시하는 UI 컴포넌트 (완전한 UI 블록이 아니라 재사용 가능한 표현)
+- **lib**: 엔티티 관련 유틸리티 함수
+- **@x**: 다른 엔티티가 이 엔티티를 import할 때 사용하는 명시적 cross-import API
+- **index.ts**: 슬라이스의 Public API (외부에서 사용할 수 있는 것만 export)
+
+## 예시
+
+```typescript
+// entities/user/model/user.ts
+export interface User {
+  id: string;
+  name: string;
+  email: string;
+  role: 'admin' | 'user';
+}
+
+// entities/user/api/get-user.ts
+import type { User } from '../model/user';
+
+export async function getUser(id: string): Promise<User> {
+  const response = await fetch(`/api/users/${id}`);
+  return response.json();
+}
+
+// entities/user/ui/user-card.tsx
+import type { User } from '../model/user';
+
+interface UserCardProps {
+  user: User;
+  onClick?: () => void;
+}
+
+export function UserCard({ user, onClick }: UserCardProps) {
+  return (
+    <div onClick={onClick}>
+      <h3>{user.name}</h3>
+      <p>{user.email}</p>
+    </div>
+  );
+}
+
+// entities/user/index.ts
+export { type User } from './model/user';
+export { getUser } from './api/get-user';
+export { UserCard } from './ui/user-card';
+```
+
+## 엔티티 간 관계
+
+엔티티가 서로 연결되어 있을 때는 `@x` 표기법을 사용하여 명시적으로 cross-import를 관리하는 것이 권장됩니다:
+
+```typescript
+// entities/artist/model/artist.ts
+import type { Song } from 'entities/song/@x/artist';
+
+export interface Artist {
+  name: string;
+  songs: Array<Song>;
+}
+
+// entities/song/@x/artist.ts
+export type { Song } from '../model/song';
+```
+
+> `@x` 폴더를 사용하면 엔티티 간 연결을 명확하게 만들어 함께 리팩터링이 필요한 코드를 쉽게 찾을 수 있습니다.
+
+## 레이어 의존성 규칙
+
+✅ **허용되는 의존성**:
+- `shared` 레이어의 모듈
+- 같은 엔티티 슬라이스 내의 다른 세그먼트
+- 다른 엔티티 슬라이스 (필요한 경우, `@x` 표기법 권장)
+
+❌ **금지된 의존성**:
+- `features` 레이어
+- `widgets` 레이어
+- `pages` 레이어
+- `app` 레이어
+
+## 주의사항
+
+1. **UI 컴포넌트는 완전한 비즈니스 로직을 포함하지 않음**: UI는 주로 props나 slots를 통해 다양한 비즈니스 로직을 연결할 수 있도록 설계
+2. **엔티티 간 비즈니스 로직은 상위 레이어에**: 엔티티 간 상호작용의 비즈니스 로직은 Features나 Pages 레이어에서 처리
+3. **데이터 관리에 집중**: 복잡한 비즈니스 로직보다는 데이터 모델, 검증, 저장에 집중

apps/as/src/entities/auth/api/login-service.ts

@@ -1,13 +1,15 @@
 import { AxiosError } from "axios";
+
 import {
-  ENDPOINT,
-  JWT_EXPIRATION_TIME,
   ACCESS_TOKEN,
   AUTH_USER_ID,
   CLAIM_NAME,
+  ENDPOINT,
+  JWT_EXPIRATION_TIME,
 } from "@/shared/config";
-import type { LoginService, ILogin } from "../model/login-interface";
+
 import { tokenManager } from "../lib/token-manager";
+import type { ILogin, LoginService } from "../model/login-interface";
 
 export class LoginApiService implements LoginService {
   private static instance: LoginApiService;
@@ -32,30 +34,27 @@ export class LoginApiService implements LoginService {
       });
 
       const data = await response.json();
-      console.log('data ', data)
+      console.log("data ", data);
       const accessToken = data[ACCESS_TOKEN];
       const tokenId = data[AUTH_USER_ID];
 
       if (!accessToken || !tokenId) {
-        if (data.message == 'Invalid Credentials' ) {
-          throw new Error('아이디와 비밀번호가 일치하지 않습니다.');
-        } else if (data.message == 'User not found') {
-          throw new Error('존재하지 않는 아이디입니다.');
-        } else if (data.message == 'User is not active') {
-          throw new Error('활성화되지 않은 계정입니다.');
-        } else if (data.message == 'User is not verified') {
-          throw new Error('이메일 인증이 필요합니다.');
+        if (data.message == "Invalid Credentials") {
+          throw new Error("아이디와 비밀번호가 일치하지 않습니다.");
+        } else if (data.message == "User not found") {
+          throw new Error("존재하지 않는 아이디입니다.");
+        } else if (data.message == "User is not active") {
+          throw new Error("활성화되지 않은 계정입니다.");
+        } else if (data.message == "User is not verified") {
+          throw new Error("이메일 인증이 필요합니다.");
         } else {
           throw new Error(data.message);
-        } 
+        }
       }
 
       tokenManager.setToken(CLAIM_NAME, accessToken);
       tokenManager.setToken(AUTH_USER_ID, tokenId);
-      tokenManager.setupRefreshTimer(
-        () => this.silentRefresh(),
-        JWT_EXPIRATION_TIME,
-      );
+      tokenManager.setupRefreshTimer(() => this.silentRefresh(), JWT_EXPIRATION_TIME);
     } catch (error) {
       if (error instanceof AxiosError) {
         throw new Error(`Login 실패 ${error.response?.data?.message}`);
@@ -66,10 +65,9 @@ export class LoginApiService implements LoginService {
 
   public async silentRefresh(): Promise<void> {
     try {
-      const response = await fetch(
-        `/api/proxy${ENDPOINT.USER_SERVICE.SILENT_REFRESH}`,
-        { method: "PUT" },
-      );
+      const response = await fetch(`/api/proxy${ENDPOINT.USER_SERVICE.SILENT_REFRESH}`, {
+        method: "PUT",
+      });
 
       const data = await response.json();
       const accessToken = data[ACCESS_TOKEN];
@@ -84,9 +82,7 @@ export class LoginApiService implements LoginService {
     } catch (error) {
       tokenManager.clearAuthToken();
       if (error instanceof AxiosError) {
-        throw new Error(
-          `Silent refresh failed: ${error.response?.data?.message}`,
-        );
+        throw new Error(`Silent refresh failed: ${error.response?.data?.message}`);
       }
       throw new Error(`Silent refresh failed: ${error}`);
     }

apps/as/src/entities/auth/index.ts

@@ -0,0 +1,2 @@
+export { LoginApi } from "./api/login-service";
+export { AuthWrapper } from "./lib/auth-wrapper";

apps/as/src/entities/auth/lib/auth-wrapper.tsx

@@ -0,0 +1,45 @@
+"use client";
+
+import { useEffect } from "react";
+
+import { client } from "@/shared/api";
+import { AUTH_LOGIN_REDIRECT_URL, AUTH_USER_ID, ENDPOINT } from "@/shared/config";
+import { getCookie, useUserStore } from "@/shared/lib";
+import type { IUserInfo } from "@/shared/store";
+import { isAtLoginRedirectUrl } from "@common/network";
+
+const AuthWrapper = ({ children }: { children: React.ReactNode }) => {
+  const { userInfo, setUserInfo } = useUserStore((state) => state);
+
+  async function authCheck() {
+    if (isAtLoginRedirectUrl(AUTH_LOGIN_REDIRECT_URL)) {
+      return;
+    }
+
+    const userId = getCookie(AUTH_USER_ID);
+    if (!userId) {
+      throw new Error("Missing required authentication tokens");
+    }
+
+    const response = await client.get<IUserInfo>(`${ENDPOINT.USER_SERVICE.USERS}/info/me`);
+    if (!userInfo) setUserInfo(response.data);
+  }
+
+  useEffect(() => {
+    (async () => {
+      try {
+        await authCheck();
+      } catch (error) {
+        console.error(error);
+        setUserInfo(null);
+        if (!isAtLoginRedirectUrl(AUTH_LOGIN_REDIRECT_URL)) {
+          window.location.assign(AUTH_LOGIN_REDIRECT_URL);
+        }
+      }
+    })();
+  }, []);
+
+  return <>{children}</>;
+};
+
+export { AuthWrapper };

apps/as/src/entities/auth/lib/token-manager.ts

@@ -1,5 +1,5 @@
-import { AUTH_USER_ID, CLAIM_NAME } from "@/src/shared/config";
-import { getCookie, removeCookie, setCookie } from "@/src/shared/lib/cookie";
+import { AUTH_USER_ID, CLAIM_NAME } from "@/shared/config";
+import { getCookie, removeCookie,setCookie } from "@/shared/lib";
 
 export class TokenManager {
   private static instance: TokenManager;
@@ -19,14 +19,37 @@ export class TokenManager {
   }
 
   public setToken(key: string, value: string): void {
+    const domain = this.getCookieDomain();
+    
     setCookie(key, value, {
       secure: window.location.protocol === "https:",
       sameSite: "lax",
+      domain: domain,
+      path: "/", // 모든 경로에서 접근 가능
     });
   }
 
+  
+  private getCookieDomain(): string | undefined {
+    const hostname = window.location.hostname;
+    
+    // 개발 환경에서는 localhost 도메인 사용
+    if (hostname === "localhost" || hostname === "127.0.0.1") {
+      return undefined; // localhost에서는 도메인 설정하지 않음
+    }
+    
+    // 운영 환경에서는 서브도메인을 포함한 최상위 도메인 사용
+    if (hostname.includes("hasuon.or.kr")) {
+      return ".hasuon.or.kr";
+    }
+    
+    // 기타 환경에서는 현재 호스트명 사용
+    return hostname;
+  }
+
   public removeToken(key: string): void {
-    removeCookie(key);
+    const domain = this.getCookieDomain();
+    removeCookie(key, { domain, path: "/" });
   }
 
   public setupRefreshTimer(

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

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

apps/as/src/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/src/pages/auth/login/index.ts

@@ -0,0 +1 @@
+export { LoginPage } from "./ui/login-page";

apps/as/src/pages/auth/login/ui/login-page.tsx

@@ -0,0 +1,120 @@
+"use client";
+
+import { useState } from "react";
+import Image from "next/image";
+
+import { LoginApi } from "@/entities/auth";
+import { images } from "@common/assets";
+
+import "./login.css";
+
+function LoginPage() {
+  const [errorMessage, setErrorMessage] = useState<string>("");
+
+  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    setErrorMessage(""); // 에러 메시지 초기화
+
+    const formData = new FormData(e.target as HTMLFormElement);
+    const userId = formData.get("id") as string;
+    const password = formData.get("password") as string;
+
+    try {
+      await LoginApi.login({ userId, password });
+      window.location.href = "/";
+    } catch (error) {
+      const message = error instanceof Error ? error.message : "로그인에 실패했습니다.";
+      setErrorMessage(message);
+    }
+  };
+
+  return (
+    <div className="login fx">
+      <div className="left_box fx">
+        <div className="text">
+          <h1>
+            하수도정보시스템
+            <br />
+            <span>CMS 통합관리시스템</span>
+          </h1>
+          <p>하수도정보시스템 CMS 통합관리시스템에 오신 것을 환영합니다.</p>
+        </div>
+        <div className="img">
+          <Image src={images.logo} width={229} height={46} alt="logo" />
+        </div>
+      </div>
+      <form id="loginForm" name="loginForm" method="post" onSubmit={handleSubmit}>
+        <div className="login_box fx">
+          <ul className="fx">
+            <li>
+              <h2>ID</h2>
+              <div className="input_st st1">
+                <i className="diveicon di-account-box" />
+                <input
+                  type="text"
+                  className="id"
+                  title="아이디를 입력하세요."
+                  id="id"
+                  name="id"
+                  maxLength={12}
+                />
+              </div>
+            </li>
+            <li>
+              <h2>PASSWORD</h2>
+              <div className="input_st st2">
+                <i className="diveicon di-key" />
+                <input
+                  type="password"
+                  className="input_style"
+                  maxLength={25}
+                  title="비밀번호를 입력하세요."
+                  id="password"
+                  name="password"
+                />
+              </div>
+            </li>
+          </ul>
+          <div className="bottom_box fx">
+            <div className="checks fx">
+              <input type="checkbox" name="checkId" title="로그인ID 저장여부" id="checkId" />
+              <label htmlFor="checkId">아이디저장</label>
+            </div>
+            {/* <a href="javascript:fnUserSearch();" className=" pw_message fx"><i className="xi-external-link"></i>비밀번호 또는 아이디를 잃어버리셨나요?</a> */}
+          </div>
+          {errorMessage && (
+            <div className="error_message">
+              <span>{errorMessage}</span>
+            </div>
+          )}
+          <button type="submit" className="login_btn fx">
+            <span>LOGIN</span>
+          </button>
+          <div className="footer">
+            <div className="copy fx">
+              <p>copyright © 2023 KECO. All rights reserved.</p>
+            </div>
+            <div className="fot_btn fx">
+              <a href="https://keco.or.kr/web/lay1/S1T6C1348/contents.do" target="_blank">
+                개인정보처리방침
+              </a>
+              <a href="https://keco.or.kr/web/lay1/S1T6C1349/contents.do" target="_blank">
+                저작권정책안내
+              </a>
+              <a href="https://keco.or.kr/web/lay1/S1T6C1350/contents.do" target="_blank">
+                이메일무단수집거부
+              </a>
+            </div>
+            <p className="addr fx">
+              <span>주소 : (22689) 인천광역시 서구 환경로 42(경서동 종합환경연구단지)</span>
+              <span>전화 : (시스템) 032-590-4321, 3752, 4314 / (통 계) 032-590-3723, 3722</span>
+              <span>팩스 :032-590-3729</span>
+            </p>
+          </div>
+        </div>
+      </form>
+    </div>
+  );
+}
+
+export { LoginPage };

apps/as/src/pages/auth/login/ui/login.css

@@ -0,0 +1,325 @@
+/**
+* OLYM Cascading Style Sheets
+* File Name : login.css
+* Description : 로그인 스타일시트
+* Author : Web business Team / Choi Hyun Mi
+* Email : desingtj@olym.co.kr
+* Date : 2023.07.20
+* Update : 2023.07.26
+* Copyright(c) 2023 OLYM Communications. All Rights Reserved.
+*/
+html,
+body {
+  background: #fff;
+}
+.fx {
+  display: flex;
+  -ms-display: flex;
+  -webkit-display: flex;
+  box-sizing: border-box;
+}
+.login {
+  width: 100%;
+  height: 100vh;
+}
+.login .left_box {
+  width: 100%;
+  background: url(../../../../../public/images/bg_login.jpg) no-repeat
+    center/cover;
+  flex-direction: column;
+  justify-content: space-between;
+  padding: 7% 5% 5% 5%;
+}
+.login .left_box .text h1 {
+  font-size: 53px;
+  color: #fff;
+}
+.login .left_box .text h1 span {
+  font-weight: 800;
+}
+.login .left_box .text p {
+  margin-top: 40px;
+  font-size: 18px;
+  color: #fff;
+}
+.login .login_box {
+  width: 100%;
+  flex-direction: column;
+  justify-content: center;
+  padding: 4% 12% 4% 6%;
+}
+.login .login_box > ul {
+  flex-direction: column;
+  gap: 40px;
+}
+.login .login_box > ul > li h2 {
+  font-size: 22px;
+  font-weight: 600;
+  color: #2640a5;
+  margin-bottom: 14px;
+}
+.login .login_box > ul > li .input_st {
+  position: relative;
+}
+.login .login_box > ul > li .input_st .diveicon {
+  position: absolute;
+  top: 50%;
+  left: 28px;
+  transform: translateY(-50%);
+  font-family: "Xeicon";
+  font-size: 25px;
+  color: #003288;
+}
+.login .login_box > ul > li input {
+  width: 100%;
+  padding: 20px 20px 20px 70px;
+  background: #f7f7f7;
+  box-sizing: border-box;
+  border: none;
+  border-radius: 5px;
+  font-size: 18px;
+  font-weight: 700;
+  color: #000;
+  height: auto;
+}
+.login .login_box > ul > li input:focus {
+  outline: 1px solid #3c5fe5;
+}
+.login .login_box > ul > li input::placeholder {
+  color: #afabab;
+  font-weight: 500;
+}
+.login .login_box .bottom_box {
+  justify-content: space-between;
+  gap: 20px;
+  padding: 50px 0 45px 0;
+}
+.login .login_box .bottom_box .checks {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.login .login_box .bottom_box .checks input[type="checkbox"] {
+  width: 18px;
+  height: 18px;
+}
+.login .login_box .bottom_box .checks label {
+  font-size: 14px;
+}
+.login .login_box .bottom_box .pw_message {
+  align-items: center;
+  gap: 5px;
+  color: #636363;
+  font-weight: 500;
+  border-bottom: 1px solid #ccc;
+  padding-bottom: 5px;
+}
+.login .login_box .bottom_box .pw_message i {
+  color: #327af5;
+  font-size: 20px;
+}
+.login .login_box .error_message {
+  margin: 20px 0;
+  padding: 12px 20px;
+  background: #fee;
+  border: 1px solid #fcc;
+  border-radius: 5px;
+  color: #c33;
+  font-size: 14px;
+  text-align: center;
+}
+.login .login_box .error_message span {
+  display: block;
+  font-weight: 500;
+}
+.login .login_box .login_btn {
+  position: relative;
+  border-radius: 5px;
+  padding: 24px 15px;
+  background: linear-gradient(
+    to left,
+    #1d3969 0%,
+    #264078 10%,
+    #172558 40%,
+    #162254 50%,
+    #111c43 60%,
+    #111c42 100%
+  );
+  overflow: hidden;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+  color: #fff;
+  cursor: pointer;
+}
+.login .login_box .login_btn span {
+  font-family: "Montserrat";
+  font-size: 19px;
+  font-weight: 700;
+  position: relative;
+}
+.login .login_box .login_btn i {
+  font-size: 22px;
+  transform: translateY(-2px);
+}
+.login .login_box .login_btn:before {
+  display: block;
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  background: linear-gradient(
+    to right,
+    #1d3969 0%,
+    #264078 10%,
+    #172558 40%,
+    #162254 50%,
+    #111c43 60%,
+    #111c42 100%
+  );
+  transition: opacity 0.5s;
+}
+.login .login_box .login_btn:hover::before {
+  opacity: 1;
+}
+.login .footer .copy {
+  margin-top: 36px;
+  justify-content: space-between;
+  align-items: center;
+  gap: 3%;
+}
+.login .footer .copy p {
+  font-size: 13px;
+  color: #d4d4d4;
+  width: 44%;
+  text-align: center;
+}
+.login .footer .copy::before,
+.login .login_box .copy::after {
+  content: "";
+  width: 20%;
+  height: 1px;
+  background: #d4d4d4;
+}
+.login .footer .fot_btn {
+  gap: 20px;
+  margin: 30px 0 10px 0;
+}
+.login .footer .fot_btn a {
+  color: #333;
+  font-weight: 700;
+  font-size: 13px;
+}
+.login .footer .fot_btn a:hover {
+  color: #003288;
+}
+.login .footer .addr {
+  color: #666;
+  font-size: 13px;
+  gap: 3px 20px;
+  flex-wrap: wrap;
+}
+/* 비밀번호 변경 팝업창 */
+.login .modal .modal_container {
+  width: 750px;
+}
+.login .pw_desc {
+  padding: 10px 10px 30px 10px;
+  color: #666;
+}
+.login .pw_desc p {
+  font-size: 1.25rem;
+  color: #000;
+  font-weight: 700;
+  margin-bottom: 10px;
+}
+.login .pw_desc span {
+  color: #f60;
+  font-weight: 700;
+}
+.login .modal .form_write {
+  border-top: 1px solid #ddd;
+  border-bottom: 1px solid #ddd;
+  padding: 20px 50px;
+}
+@media (max-width: 1024px) {
+  .login {
+    flex-direction: column;
+    height: auto;
+  }
+  .login .left_box {
+    padding: 30px;
+    flex-direction: column-reverse;
+    gap: 20px;
+  }
+  .login .left_box .text h1 {
+    font-size: 30px;
+    line-height: 1.2em;
+  }
+  .login .left_box .text p {
+    margin-top: 20px;
+    font-size: 14px;
+  }
+  .login .left_box .img img {
+    height: 40px;
+  }
+  .login .login_box {
+    padding: 30px;
+  }
+  .login .login_box > ul {
+    gap: 20px;
+  }
+  .login .login_box > ul > li h2 {
+    margin-bottom: 7px;
+  }
+  .login .login_box > ul > li .input_st::after {
+    left: 15px;
+    font-size: 20px;
+  }
+  .login .login_box > ul > li input {
+    padding: 15px 10px 15px 50px;
+    font-size: 16px;
+  }
+  .login .login_box .bottom_box {
+    flex-direction: column;
+    align-items: flex-start;
+    padding: 30px 0;
+  }
+  .login .login_box .bottom_box .id_save label {
+    font-size: 14px;
+  }
+  .login .login_box .login_btn {
+    padding: 15px;
+  }
+  .login .login_box .login_btn span {
+    font-size: 16px;
+  }
+  .login .login_box .login_btn i {
+    font-size: 18px;
+    transform: translateY(-1px);
+  }
+  .login .login_box .copy p {
+    width: 100%;
+  }
+  .login .login_box .copy::before,
+  .login .login_box .copy::after {
+    display: none;
+  }
+  .login .footer .addr {
+    font-size: 11px;
+    gap: 3px 10px;
+  }
+  .login .modal .modal_container {
+    width: 90%;
+  }
+  .login .pw_desc {
+    padding: 0 0 20px 0;
+  }
+  .login .modal .form_write {
+    padding: 10px;
+  }
+}
+/* // login */

apps/as/src/pages/home/index.ts

@@ -0,0 +1 @@
+export { MainPage } from "./ui/main-page";

apps/as/src/pages/home/ui/main-page.tsx

@@ -0,0 +1,9 @@
+"use client";
+
+export 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/src/shared/README.md

@@ -0,0 +1,149 @@
+# Shared Layer
+
+**Shared**는 애플리케이션의 기반을 형성하는 레이어입니다. 외부 세계(백엔드, 서드파티 라이브러리, 환경)와의 연결을 생성하고, 높은 응집력을 가진 자체 라이브러리를 정의하는 곳입니다.
+
+## 목적
+
+- 외부 시스템 및 라이브러리와의 통합
+- 프로젝트 전체에서 사용되는 공통 코드 제공
+- 비즈니스 로직이 없는 재사용 가능한 유틸리티 및 UI 제공
+- 글로벌 설정 및 환경 변수 관리
+
+## 특징
+
+- **슬라이스 없음**: Shared 레이어는 비즈니스 도메인이 없으므로 슬라이스로 나뉘지 않습니다
+- **세그먼트 구성**: 기술적 목적에 따라 세그먼트로 직접 구성됩니다
+- **자유로운 import**: Shared 내의 모든 파일은 서로를 참조하고 import할 수 있습니다
+
+## 구조
+
+```
+shared/
+├── ui/                # 애플리케이션 UI Kit
+│   ├── button/
+│   ├── input/
+│   ├── modal/
+│   └── index.ts
+├── api/               # API 클라이언트 및 백엔드 엔드포인트 함수
+│   ├── client.ts
+│   └── index.ts
+├── lib/               # 내부 라이브러리 모음
+│   ├── dates/         # 날짜 관련 유틸리티
+│   ├── colors/        # 색상 관련 유틸리티
+│   ├── text/          # 텍스트 처리 유틸리티
+│   └── index.ts
+├── config/            # 환경 변수, 글로벌 feature flags
+│   ├── env.ts
+│   └── index.ts
+├── types/             # 공통 타입 정의
+│   └── index.ts
+├── i18n/              # 번역 설정, 글로벌 번역 문자열
+│   └── index.ts
+└── routes/            # 라우트 상수 또는 패턴
+    └── index.ts
+```
+
+## 세그먼트 설명
+
+### 📁 ui
+애플리케이션의 UI Kit로, 비즈니스 로직을 포함하지 않는 재사용 가능한 UI 컴포넌트들입니다.
+
+- Button, Input, Modal 같은 기본 컴포넌트
+- 비즈니스 로직은 없지만 UI 로직은 포함 가능 (예: Autocomplete, SearchBar)
+- 비즈니스 테마 컴포넌트도 허용 (예: 회사 로고, 페이지 레이아웃)
+
+### 📁 api
+API 클라이언트 및 특정 백엔드 엔드포인트 요청 함수입니다.
+
+- HTTP 클라이언트 설정 (Axios, Fetch 등)
+- 인증 인터셉터
+- 공통 에러 핸들링
+
+### 📁 lib
+내부 라이브러리 모음으로, 각 라이브러리는 **하나의 관심사**에 집중해야 합니다.
+
+> ⚠️ **중요**: `helpers`나 `utils` 폴더처럼 덤프 폴더로 만들지 마세요. 각 라이브러리는 명확한 초점 영역(예: dates, colors, text)을 가져야 하며, README로 문서화해야 합니다.
+
+### 📁 config
+환경 변수, 글로벌 feature flags 및 앱 전체 설정입니다.
+
+### 📁 types
+프로젝트 전체에서 사용되는 공통 타입 정의입니다.
+
+### 📁 i18n
+번역 설정 코드 및 글로벌 번역 문자열입니다.
+
+### 📁 routes
+라우트 상수 또는 라우트 매칭 패턴입니다.
+
+## 예시
+
+```typescript
+// shared/ui/button/button.tsx
+interface ButtonProps {
+  children: React.ReactNode;
+  variant?: 'primary' | 'secondary';
+  onClick?: () => void;
+}
+
+export function Button({ children, variant = 'primary', onClick }: ButtonProps) {
+  return (
+    <button
+      className={variant === 'primary' ? 'bg-blue-500' : 'bg-gray-500'}
+      onClick={onClick}
+    >
+      {children}
+    </button>
+  );
+}
+
+// shared/api/client.ts
+import axios from 'axios';
+
+export const apiClient = axios.create({
+  baseURL: process.env.NEXT_PUBLIC_API_URL,
+  timeout: 10000,
+});
+
+// shared/lib/dates/format-date.ts
+import dayjs from 'dayjs';
+
+export function formatDate(date: Date, format: string = 'YYYY-MM-DD'): string {
+  return dayjs(date).format(format);
+}
+
+// shared/config/env.ts
+export const ENV = {
+  apiUrl: process.env.NEXT_PUBLIC_API_URL!,
+  isDev: process.env.NODE_ENV === 'development',
+} as const;
+```
+
+## 레이어 의존성 규칙
+
+✅ **허용되는 의존성**:
+- 같은 `shared` 레이어 내의 다른 세그먼트 (자유로운 cross-import)
+- 외부 라이브러리 및 패키지
+
+❌ **금지된 의존성**:
+- `entities` 레이어
+- `features` 레이어
+- `widgets` 레이어
+- `pages` 레이어
+- `app` 레이어
+
+> 💡 **원칙**: Shared는 가장 낮은 레이어이므로 상위 레이어에 의존하지 않습니다.
+
+## 세그먼트 명명 규칙
+
+세그먼트 이름은 **내용의 목적**을 설명해야 하며, **본질**을 설명하면 안 됩니다.
+
+❌ **나쁜 예시**: `components`, `hooks`, `types` (본질을 설명)
+✅ **좋은 예시**: `ui`, `api`, `lib/dates`, `config` (목적을 설명)
+
+## 주의사항
+
+1. **비즈니스 로직 없음**: Shared는 순수한 기술적 코드만 포함
+2. **높은 재사용성**: 앱 전체에서 사용될 수 있어야 함
+3. **명확한 라이브러리 구조**: `lib` 내부는 관심사별로 명확하게 분리
+4. **문서화**: 각 라이브러리는 README로 사용법과 목적을 문서화

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

@@ -1,11 +1,13 @@
-import { Client } from "@common/network";
-import { BASE_URL } from "../config/api";
-import { SITE_ID } from "../config/env";
-import { setCookie } from "../lib";
-
-setCookie("site-id-key", SITE_ID);
-
-export const client = Client.getInstance({
-  baseURL: BASE_URL,
-  siteId: SITE_ID,
-});
+import { PROXY_HOST, SITE_ID } from "@/shared/config";
+import { Client } from "@common/network";
+
+import { setCookie } from "../lib";
+
+setCookie("site-id-key", SITE_ID);
+
+const BASE_URL = `${PROXY_HOST}/server`;
+
+export const client = Client.getInstance({
+  baseURL: BASE_URL,
+  siteId: SITE_ID,
+});

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

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

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

@@ -0,0 +1,9 @@
+export const ENDPOINT = {
+  USER_SERVICE: {
+    LOGIN: "/user-service/login",
+    SILENT_REFRESH: "/user-service/api/v1/users/token/refresh",
+    USERS: "/user-service/api/v1/users",
+  },
+};
+
+export const JWT_EXPIRATION_TIME = 1800000;

apps/as/src/shared/config/env.ts

@@ -0,0 +1,10 @@
+export const PORT = process.env.NEXT_PUBLIC_PORT || "3000";
+export const PROXY_HOST = process.env.NEXT_PUBLIC_PROXY_HOST || `http://localhost:${PORT}`;
+export const SITE_ID = process.env.NEXT_PUBLIC_SITE_ID || "AS";
+export const SERVER_API_URL = process.env.SERVER_API_URL;
+export const AUTH_LOGIN_REDIRECT_URL =
+  process.env.NEXT_PUBLIC_AUTH_LOGIN_REDIRECT_URL || "/auth/login";
+export const CLAIM_NAME = process.env.NEXT_PUBLIC_CLAIM_NAME || "Authorization";
+export const ACCESS_TOKEN = process.env.NEXT_PUBLIC_ACCESS_TOKEN || "access-token";
+export const REFRESH_TOKEN = process.env.NEXT_PUBLIC_REFRESH_TOKEN || "refresh-token";
+export const AUTH_USER_ID = process.env.NEXT_PUBLIC_AUTH_USER_ID || "token-id";

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

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

apps/as/src/shared/lib/cookie.ts

@@ -1,6 +1,5 @@
 import Cookies from "js-cookie";
 
-
 export function getCookie(name: string): string | undefined {
   if (typeof window === "undefined") {
     return undefined;

apps/as/src/shared/lib/dayjs.ts

@@ -0,0 +1,13 @@
+import dayjs from "dayjs";
+import relativeTime from "dayjs/plugin/relativeTime";
+import timezone from "dayjs/plugin/timezone";
+import utc from "dayjs/plugin/utc";
+
+import "dayjs/locale/ko";
+
+dayjs.extend(utc);
+dayjs.extend(timezone);
+dayjs.extend(relativeTime);
+dayjs.locale("ko");
+
+export { dayjs };

apps/as/src/shared/lib/index.ts

@@ -0,0 +1,4 @@
+export { getCookie, removeCookie, setCookie } from "./cookie";
+export { dayjs } from "./dayjs";
+export { queryClient } from "./query-client";
+export { useUserStore } from "./use-user-store";

apps/as/src/shared/lib/query-client.ts

@@ -0,0 +1,11 @@
+import { QueryClient } from "@tanstack/react-query";
+
+export const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      retry: 1,
+      refetchOnWindowFocus: false,
+      staleTime: 60 * 1000,
+    },
+  },
+});

apps/as/src/shared/lib/use-user-store.ts

@@ -0,0 +1,16 @@
+import { useContext } from "react";
+
+import { useStore } from "zustand";
+
+import { StoreContext } from "../providers";
+import type { UserStore } from "../store";
+
+export const useUserStore = <T>(selector: (store: UserStore) => T): T => {
+  const storeContext = useContext(StoreContext);
+
+  if (!storeContext) {
+    throw new Error("useUserStore must be used within StoreProvider");
+  }
+
+  return useStore(storeContext.userStore, selector);
+};

apps/as/src/shared/model/index.ts

@@ -0,0 +1,29 @@
+export interface BaseEntity {
+  id: string;
+  createdAt: string;
+  updatedAt: string;
+}
+
+export interface PaginationParams {
+  page: number;
+  limit: number;
+}
+
+export interface PaginationResponse<T> {
+  data: T[];
+  total: number;
+  page: number;
+  limit: number;
+}
+
+export interface ApiResponse<T> {
+  success: boolean;
+  data: T;
+  message?: string;
+}
+
+export interface ApiError {
+  message: string;
+  code?: string;
+  status?: number;
+}

apps/as/src/shared/providers/index.ts

@@ -0,0 +1 @@
+export { StoreContext, StoreProvider } from "./store-provider";

apps/as/src/shared/providers/store-provider.tsx

@@ -0,0 +1,22 @@
+"use client";
+
+import { createContext, useRef } from "react";
+
+import { createUserStore } from "../store";
+
+type StoreContextType = {
+  userStore: ReturnType<typeof createUserStore>;
+};
+
+export const StoreContext = createContext<StoreContextType | undefined>(undefined);
+
+export const StoreProvider = ({ children }: { children: React.ReactNode }) => {
+  const storeRef = useRef<StoreContextType | null>(null);
+  if (storeRef.current === null) {
+    storeRef.current = {
+      userStore: createUserStore(),
+    };
+  }
+
+  return <StoreContext.Provider value={storeRef.current}>{children}</StoreContext.Provider>;
+};

apps/as/src/shared/store/index.ts

@@ -0,0 +1 @@
+export { createUserStore, type IUserInfo, type UserStore } from "./user-store";

apps/as/src/shared/ui/index.ts

@@ -0,0 +1 @@
+export { PageLayout } from "./page-layout";

apps/as/src/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/src/widgets/README.md

@@ -0,0 +1,135 @@
+# Widgets Layer
+
+**Widgets**는 큰 규모의 독립적인 UI 블록을 위한 레이어입니다. 여러 features와 entities를 조합하여 완전한 기능을 제공하는 복합 컴포넌트를 담습니다.
+
+## 목적
+
+- 큰 규모의 독립적인 UI 블록 구성
+- 여러 features와 entities를 하나의 응집력 있는 UI로 결합
+- 여러 페이지에서 재사용되는 복잡한 UI 제공
+- 페이지 레벨 레이아웃 및 섹션 관리
+
+## Widget으로 만들어야 하는 경우
+
+Widget은 다음 조건에 해당할 때 사용하세요:
+
+✅ **Widget으로 만들기 좋은 경우**:
+- 여러 페이지에서 재사용되는 큰 UI 블록
+- 페이지에 여러 개의 큰 독립적 블록이 있고, 이것이 그 중 하나인 경우
+- 페이지 레벨 레이아웃 컴포넌트 (nested routing 시스템 사용 시)
+
+❌ **Widget으로 만들지 말아야 하는 경우**:
+- UI 블록이 페이지의 대부분을 차지하고 재사용되지 않는 경우 → 페이지 슬라이스 내부에 직접 배치
+- 작은 재사용 컴포넌트 → `shared/ui`에 배치
+
+## 구조
+
+각 widget 슬라이스는 다음 세그먼트로 구성됩니다:
+
+```
+widgets/
+└── [widget-name]/
+    ├── ui/            # 위젯의 메인 UI 컴포넌트
+    ├── model/         # 위젯 내부 상태 관리 (선택적)
+    ├── api/           # 위젯 전용 API 호출 (선택적)
+    ├── lib/           # 위젯 내부 유틸리티 (선택적)
+    └── index.ts       # Public API
+```
+
+### 세그먼트 설명
+
+- **ui**: 여러 features와 entities를 조합한 위젯 UI
+- **model**: 위젯 내부 상태 및 로직 (선택적)
+- **api**: 위젯이 필요로 하는 데이터 fetching (선택적)
+- **lib**: 위젯 내부에서만 사용되는 헬퍼 함수 (선택적)
+- **index.ts**: 슬라이스의 Public API (외부에서 사용할 수 있는 것만 export)
+
+## 예시
+
+```typescript
+// widgets/header/ui/header.tsx
+import { Logo } from 'shared/ui/logo';
+import { Navigation } from 'shared/ui/navigation';
+import { UserMenu } from 'features/user-menu';
+import { NotificationBell } from 'features/notifications';
+
+export function Header() {
+  return (
+    <header>
+      <Logo />
+      <Navigation />
+      <NotificationBell />
+      <UserMenu />
+    </header>
+  );
+}
+
+// widgets/product-list/ui/product-list.tsx
+import { useProducts } from '../api/use-products';
+import { ProductCard } from 'entities/product';
+import { AddToCartButton } from 'features/cart-add-item';
+
+export function ProductList() {
+  const { data: products, isLoading } = useProducts();
+
+  if (isLoading) return <div>로딩 중...</div>;
+
+  return (
+    <div>
+      {products.map((product) => (
+        <div key={product.id}>
+          <ProductCard product={product} />
+          <AddToCartButton productId={product.id} />
+        </div>
+      ))}
+    </div>
+  );
+}
+
+// widgets/product-list/api/use-products.ts
+import { useQuery } from '@tanstack/react-query';
+import { getProducts } from 'entities/product';
+
+export function useProducts() {
+  return useQuery({
+    queryKey: ['products'],
+    queryFn: getProducts,
+  });
+}
+
+// widgets/product-list/index.ts
+export { ProductList } from './ui/product-list';
+```
+
+## 레이어 의존성 규칙
+
+✅ **허용되는 의존성**:
+- `shared` 레이어의 모듈
+- `entities` 레이어의 모듈
+- `features` 레이어의 모듈
+- 같은 widget 슬라이스 내의 다른 세그먼트
+
+❌ **금지된 의존성**:
+- 다른 `widgets` 슬라이스 (widget 간 직접 의존 금지)
+- `pages` 레이어
+- `app` 레이어
+
+## 명명 규칙
+
+- 소문자와 대시 사용: `header`, `sidebar`, `product-list`
+- 명사 형태 권장: UI 블록의 성격을 나타내는 이름 사용
+- 구체적으로: 위젯의 역할이 명확하게 드러나도록
+
+## Nested Routing 사용 시
+
+Remix 같은 nested routing 시스템을 사용한다면:
+- Widgets 레이어를 flat routing의 Pages 레이어처럼 사용 가능
+- 완전한 라우터 블록 생성 (데이터 fetching, loading states, error boundaries 포함)
+- 페이지 레이아웃을 이 레이어에 저장 가능
+
+## 주의사항
+
+1. **독립성 유지**: 각 위젯은 독립적으로 작동 가능해야 합니다
+2. **적절한 크기**: 너무 작은 컴포넌트는 `shared/ui`에, 재사용되지 않으면 `pages`에 배치
+3. **응집력**: 관련된 features와 entities를 의미 있게 조합
+4. **재사용 최적화**: 여러 페이지에서 동일한 방식으로 사용될 수 있도록 설계

apps/as/tailwind.config.ts

@@ -0,0 +1,26 @@
+import type { Config } from "tailwindcss";
+import presetConfig from "../../tailwind.config.preset";
+
+const config: Config = {
+  presets: [presetConfig],
+  content: [
+    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
+    "./shared/**/*.{js,ts,jsx,tsx,mdx}",
+    "./entities/**/*.{js,ts,jsx,tsx,mdx}",
+    "./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: {
+      colors: {
+        background: "var(--background)",
+        foreground: "var(--foreground)",
+      },
+    },
+  },
+  plugins: [],
+};
+
+export default config;

apps/as/tsconfig.json

@@ -0,0 +1,29 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./src/*"],
+      "@common/components": ["../../packages/common/components/dist/"],
+      "@common/network": ["../../packages/common/network/"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}

apps/cm/package.json

@@ -12,6 +12,9 @@
     "@common/assets": "workspace:*",
     "@common/components": "workspace:*",
     "@common/config": "workspace:*",
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
     "@fontsource-variable/noto-sans-kr": "^5.2.5",
     "@frontend-opensource/use-react-hooks": "^1.1.4",
     "@fullcalendar/core": "^6.1.17",
@@ -52,7 +55,7 @@
     "@types/node": "^22.13.1",
     "@types/webpack": "^5.28.5",
     "eslint": "^9.0.0",
-    "eslint-config-next": "15.4.0",
+    "eslint-config-next": "15.3.8",
     "postcss": "^8.4.49",
     "prettier": "^3.4.2",
     "prettier-plugin-tailwindcss": "^0.6.11",

apps/cm/src/entities/auth/lib/auth-wrapper.tsx

@@ -5,16 +5,15 @@ import { useRouter } from "next/navigation";
 import { client } from "@/shared/api";
 import type { IUserInfo } from "@/shared/store";
 import { getCookie, useUserStore } from "@/shared/lib";
+import { isAtLoginRedirectUrl } from "@common/network";
 import { ENDPOINT, AUTH_USER_ID } from "@/shared/config";
-import { LoginApi } from "../api/login-service";
 
 const AuthWrapper = ({ children }: { children: React.ReactNode }) => {
   const router = useRouter();
   const { userInfo, setUserInfo } = useUserStore((state) => state);
 
   async function authCheck() {
-    // 로그인 페이지에서는 인증 체크를 건너뜀
-    if (window.location.pathname === '/auth/login') {
+    if (isAtLoginRedirectUrl("/auth/login")) {
       return;
     }
 
@@ -35,13 +34,8 @@ const AuthWrapper = ({ children }: { children: React.ReactNode }) => {
         await authCheck();
       } catch (error) {
         console.error(error);
-
-        try {
-          await LoginApi.silentRefresh();
-          await authCheck();
-        } catch (refreshError) {
-          console.error("Token refresh failed:", refreshError);
-          setUserInfo(null);
+        setUserInfo(null);
+        if (!isAtLoginRedirectUrl("/auth/login")) {
           router.push("/auth/login");
         }
       }

apps/cm/src/pages/auth/login/ui/SignupModal.tsx

@@ -14,7 +14,9 @@ interface SignupModalProps {
 }
 
 function SignupModal({ open, onClose, onSuccess }: SignupModalProps) {
-  const [currentStep, setCurrentStep] = useState<'agreement' | 'signup'>('agreement');
+  const [currentStep, setCurrentStep] = useState<"agreement" | "signup">(
+    "agreement",
+  );
   const [agreed, setAgreed] = useState(false);
   const [formData, setFormData] = useState({
     userId: "",
@@ -47,7 +49,7 @@ function SignupModal({ open, onClose, onSuccess }: SignupModalProps) {
   // 모달이 닫힐 때 초기화
   useEffect(() => {
     if (!open) {
-      setCurrentStep('agreement');
+      setCurrentStep("agreement");
       setAgreed(false);
       setFormData({
         userId: "",
@@ -81,17 +83,19 @@ function SignupModal({ open, onClose, onSuccess }: SignupModalProps) {
 
   const handleNextStep = () => {
     if (agreed) {
-      setCurrentStep('signup');
+      setCurrentStep("signup");
     }
   };
 
-  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
+  const handleInputChange = (
+    e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>,
+  ) => {
     const { name, value } = e.target;
-    setFormData(prev => ({ ...prev, [name]: value }));
-    
+    setFormData((prev) => ({ ...prev, [name]: value }));
+
     // 에러 초기화
     if (errors[name]) {
-      setErrors(prev => ({ ...prev, [name]: "" }));
+      setErrors((prev) => ({ ...prev, [name]: "" }));
     }
   };
 
@@ -102,20 +106,27 @@ function SignupModal({ open, onClose, onSuccess }: SignupModalProps) {
     if (!formData.userId) newErrors.userId = "아이디를 입력해주세요.";
     if (!formData.userName) newErrors.userName = "이름을 입력해주세요.";
     if (!formData.password) newErrors.password = "비밀번호를 입력해주세요.";
-    if (!formData.confirmPassword) newErrors.confirmPassword = "비밀번호 확인을 입력해주세요.";
+    if (!formData.confirmPassword)
+      newErrors.confirmPassword = "비밀번호 확인을 입력해주세요.";
     if (!formData.pswdHnt) newErrors.pswdHnt = "비밀번호 힌트를 입력해주세요.";
     if (!formData.laeSeCd) newErrors.laeSeCd = "법인구분을 선택해주세요.";
     if (!formData.ogdpSeCd) newErrors.ogdpSeCd = "기관구분을 선택해주세요.";
 
     // 비밀번호 확인
-    if (formData.password && formData.confirmPassword && formData.password !== formData.confirmPassword) {
+    if (
+      formData.password &&
+      formData.confirmPassword &&
+      formData.password !== formData.confirmPassword
+    ) {
       newErrors.confirmPassword = "비밀번호가 일치하지 않습니다.";
     }
 
     // 비밀번호 정규식 검증
-    const passwordRegex = /^(?=.*[a-zA-Z])(?=.*\d)(?=.*[!@#$%^&*()_+\-=[\]{};':"\\|,.<>/?]).{8,20}$/;
+    const passwordRegex =
+      /^(?=.*[a-zA-Z])(?=.*\d)(?=.*[!@#$%^&*()_+\-=[\]{};':"\\|,.<>/?]).{8,20}$/;
     if (formData.password && !passwordRegex.test(formData.password)) {
-      newErrors.password = "비밀번호는 8~20자, 영문/숫자/특수기호를 모두 포함해야 합니다.";
+      newErrors.password =
+        "비밀번호는 8~20자, 영문/숫자/특수기호를 모두 포함해야 합니다.";
     }
 
     // 이메일 형식 검증
@@ -124,8 +135,10 @@ function SignupModal({ open, onClose, onSuccess }: SignupModalProps) {
     }
 
     // 중복 체크 검증
-    if (idAvailable === false) newErrors.userId = "이미 사용 중인 아이디입니다.";
-    if (emailAvailable === false) newErrors.email = "이미 사용 중인 이메일입니다.";
+    if (idAvailable === false)
+      newErrors.userId = "이미 사용 중인 아이디입니다.";
+    if (emailAvailable === false)
+      newErrors.email = "이미 사용 중인 이메일입니다.";
 
     setErrors(newErrors);
     const isValid = Object.keys(newErrors).length === 0;
@@ -135,7 +148,7 @@ function SignupModal({ open, onClose, onSuccess }: SignupModalProps) {
 
   const checkUserIdDuplicate = async () => {
     if (!formData.userId) {
-      setErrors(prev => ({ ...prev, userId: "아이디를 입력해주세요." }));
+      setErrors((prev) => ({ ...prev, userId: "아이디를 입력해주세요." }));
       return;
     }
 
@@ -147,19 +160,25 @@ function SignupModal({ open, onClose, onSuccess }: SignupModalProps) {
       });
       const response = await signupClient.post<boolean>(
         `${ENDPOINT.USER_SERVICE.USERS}/existsUserId`,
-        { userId: formData.userId }
+        { userId: formData.userId },
       );
 
       const exists = response.data;
       setIdAvailable(!exists);
       if (exists) {
-        setErrors(prev => ({ ...prev, userId: "이미 사용 중인 아이디입니다." }));
+        setErrors((prev) => ({
+          ...prev,
+          userId: "이미 사용 중인 아이디입니다.",
+        }));
       } else {
-        setErrors(prev => ({ ...prev, userId: "" }));
+        setErrors((prev) => ({ ...prev, userId: "" }));
       }
     } catch (error) {
       console.error("아이디 중복 체크 오류:", error);
-      setErrors(prev => ({ ...prev, userId: "아이디 중복 체크 중 오류가 발생했습니다." }));
+      setErrors((prev) => ({
+        ...prev,
+        userId: "아이디 중복 체크 중 오류가 발생했습니다.",
+      }));
     } finally {
       setIsCheckingId(false);
     }
@@ -167,7 +186,7 @@ function SignupModal({ open, onClose, onSuccess }: SignupModalProps) {
 
   const checkEmailDuplicate = async () => {
     if (!formData.email) {
-      setErrors(prev => ({ ...prev, email: "이메일을 입력해주세요." }));
+      setErrors((prev) => ({ ...prev, email: "이메일을 입력해주세요." }));
       return;
     }
 
@@ -179,28 +198,34 @@ function SignupModal({ open, onClose, onSuccess }: SignupModalProps) {
       });
       const response = await signupClient.post<boolean>(
         `${ENDPOINT.USER_SERVICE.USERS}/exists`,
-        { email: formData.email }
+        { email: formData.email },
       );
 
       const exists = response.data;
       setEmailAvailable(!exists);
       if (exists) {
-        setErrors(prev => ({ ...prev, email: "이미 사용 중인 이메일입니다." }));
+        setErrors((prev) => ({
+          ...prev,
+          email: "이미 사용 중인 이메일입니다.",
+        }));
       } else {
-        setErrors(prev => ({ ...prev, email: "" }));
+        setErrors((prev) => ({ ...prev, email: "" }));
       }
     } catch (error) {
       console.error("이메일 중복 체크 오류:", error);
-      setErrors(prev => ({ ...prev, email: "이메일 중복 체크 중 오류가 발생했습니다." }));
+      setErrors((prev) => ({
+        ...prev,
+        email: "이메일 중복 체크 중 오류가 발생했습니다.",
+      }));
     } finally {
       setIsCheckingEmail(false);
     }
   };
 
-  const handleSubmit = async (e: React.FormEvent) => {
+  const handleSubmit = async (e: React.SubmitEvent) => {
     e.preventDefault();
     console.log("회원가입 버튼 클릭됨");
-    
+
     if (!validateForm()) {
       console.log("폼 검증 실패");
       return;
@@ -230,19 +255,19 @@ function SignupModal({ open, onClose, onSuccess }: SignupModalProps) {
 
       // SignupClient를 통해 익명사용자 회원가입 API 호출
       const signupClient = SignupClient.getInstance({
-        baseURL: BASE_URL
+        baseURL: BASE_URL,
       });
       const response = await signupClient.post(
         `${ENDPOINT.USER_SERVICE.USERS}/anonymouse/users/join`,
-        signupData
+        signupData,
       );
 
       console.log("회원가입 성공:", response.data);
-      
+
       // 성공 시 모달 닫기 및 콜백 호출
       onSuccess();
       onClose();
-      
+
       // 폼 초기화
       setFormData({
         userId: "",
@@ -267,13 +292,12 @@ function SignupModal({ open, onClose, onSuccess }: SignupModalProps) {
       setErrors({});
       setIdAvailable(null);
       setEmailAvailable(null);
-
     } catch (error: unknown) {
       console.error("회원가입 오류:", error);
       if (error instanceof Error) {
-        setErrors(prev => ({ ...prev, submit: error.message }));
+        setErrors((prev) => ({ ...prev, submit: error.message }));
       } else {
-        setErrors(prev => ({ ...prev, submit: "회원가입에 실패했습니다." }));
+        setErrors((prev) => ({ ...prev, submit: "회원가입에 실패했습니다." }));
       }
     } finally {
       setIsLoading(false);
@@ -286,36 +310,52 @@ function SignupModal({ open, onClose, onSuccess }: SignupModalProps) {
     <div className="modal-overlay" onClick={onClose}>
       <div className="modal-content" onClick={(e) => e.stopPropagation()}>
         <div className="modal-header">
-          <h2>{currentStep === 'agreement' ? '개인정보제공동의' : '회원가입'}</h2>
-          <button className="close-button" onClick={onClose}>×</button>
+          <h2>
+            {currentStep === "agreement" ? "개인정보제공동의" : "회원가입"}
+          </h2>
+          <button className="close-button" onClick={onClose}>
+            ×
+          </button>
         </div>
-        
-        {currentStep === 'agreement' ? (
+
+        {currentStep === "agreement" ? (
           <div className="agreement-content">
             <div className="agreement-text">
               <h3>개인정보 수집 및 이용 동의</h3>
               <p>회원가입을 위해 다음과 같이 개인정보를 수집 및 이용합니다.</p>
-              
+
               <h4>1. 수집하는 개인정보 항목</h4>
               <ul>
-                <li>필수항목: 아이디, 이름, 비밀번호, 비밀번호 힌트, 법인구분, 기관구분</li>
-                <li>선택항목: 이메일, 휴대폰번호, 전화번호, 주소, 기관코드, 상세기관코드, 사업자등록번호</li>
+                <li>
+                  필수항목: 아이디, 이름, 비밀번호, 비밀번호 힌트, 법인구분,
+                  기관구분
+                </li>
+                <li>
+                  선택항목: 이메일, 휴대폰번호, 전화번호, 주소, 기관코드,
+                  상세기관코드, 사업자등록번호
+                </li>
               </ul>
-              
+
               <h4>2. 개인정보의 수집 및 이용목적</h4>
               <ul>
                 <li>회원가입 및 관리</li>
                 <li>서비스 제공 및 운영</li>
                 <li>고객상담 및 문의응답</li>
               </ul>
-              
+
               <h4>3. 개인정보의 보유 및 이용기간</h4>
-              <p>회원탈퇴 시까지 (단, 관련 법령에 따라 보존이 필요한 경우 해당 기간까지)</p>
-              
+              <p>
+                회원탈퇴 시까지 (단, 관련 법령에 따라 보존이 필요한 경우 해당
+                기간까지)
+              </p>
+
               <h4>4. 동의 거부권 및 거부 시 불이익</h4>
-              <p>개인정보 수집 및 이용에 대한 동의를 거부할 수 있으며, 동의 거부 시 회원가입이 제한됩니다.</p>
+              <p>
+                개인정보 수집 및 이용에 대한 동의를 거부할 수 있으며, 동의 거부
+                시 회원가입이 제한됩니다.
+              </p>
             </div>
-            
+
             <div className="agreement-checkbox">
               <label>
                 <input
@@ -326,13 +366,9 @@ function SignupModal({ open, onClose, onSuccess }: SignupModalProps) {
                 <span>개인정보 수집 및 이용에 동의합니다.</span>
               </label>
             </div>
-            
+
             <div className="agreement-actions">
-              <button
-                type="button"
-                onClick={onClose}
-                className="cancel-button"
-              >
+              <button type="button" onClick={onClose} className="cancel-button">
                 취소
               </button>
               <button
@@ -349,7 +385,7 @@ function SignupModal({ open, onClose, onSuccess }: SignupModalProps) {
           <form onSubmit={handleSubmit} className="signup-form">
             <div className="form-section">
               <h3>기본 정보</h3>
-              
+
               <div className="form-row">
                 <div className="form-group">
                   <label htmlFor="userId">아이디 *</label>
@@ -373,8 +409,14 @@ function SignupModal({ open, onClose, onSuccess }: SignupModalProps) {
                       {isCheckingId ? "확인중..." : "중복확인"}
                     </button>
                   </div>
-                  {idAvailable === true && <span className="success-message">사용 가능한 아이디입니다.</span>}
-                  {errors.userId && <span className="error-message">{errors.userId}</span>}
+                  {idAvailable === true && (
+                    <span className="success-message">
+                      사용 가능한 아이디입니다.
+                    </span>
+                  )}
+                  {errors.userId && (
+                    <span className="error-message">{errors.userId}</span>
+                  )}
                 </div>
               </div>
 
@@ -390,7 +432,9 @@ function SignupModal({ open, onClose, onSuccess }: SignupModalProps) {
                     placeholder="이름을 입력하세요"
                     disabled={isLoading}
                   />
-                  {errors.userName && <span className="error-message">{errors.userName}</span>}
+                  {errors.userName && (
+                    <span className="error-message">{errors.userName}</span>
+                  )}
                 </div>
               </div>
 
@@ -416,8 +460,14 @@ function SignupModal({ open, onClose, onSuccess }: SignupModalProps) {
                       {isCheckingEmail ? "확인중..." : "중복확인"}
                     </button>
                   </div>
-                  {emailAvailable === true && <span className="success-message">사용 가능한 이메일입니다.</span>}
-                  {errors.email && <span className="error-message">{errors.email}</span>}
+                  {emailAvailable === true && (
+                    <span className="success-message">
+                      사용 가능한 이메일입니다.
+                    </span>
+                  )}
+                  {errors.email && (
+                    <span className="error-message">{errors.email}</span>
+                  )}
                 </div>
               </div>
 
@@ -434,7 +484,9 @@ function SignupModal({ open, onClose, onSuccess }: SignupModalProps) {
                     maxLength={20}
                     disabled={isLoading}
                   />
-                  {errors.password && <span className="error-message">{errors.password}</span>}
+                  {errors.password && (
+                    <span className="error-message">{errors.password}</span>
+                  )}
                 </div>
               </div>
 
@@ -451,7 +503,11 @@ function SignupModal({ open, onClose, onSuccess }: SignupModalProps) {
                     maxLength={20}
                     disabled={isLoading}
                   />
-                  {errors.confirmPassword && <span className="error-message">{errors.confirmPassword}</span>}
+                  {errors.confirmPassword && (
+                    <span className="error-message">
+                      {errors.confirmPassword}
+                    </span>
+                  )}
                 </div>
               </div>
 
@@ -468,7 +524,9 @@ function SignupModal({ open, onClose, onSuccess }: SignupModalProps) {
                     maxLength={10}
                     disabled={isLoading}
                   />
-                  {errors.pswdHnt && <span className="error-message">{errors.pswdHnt}</span>}
+                  {errors.pswdHnt && (
+                    <span className="error-message">{errors.pswdHnt}</span>
+                  )}
                 </div>
               </div>
 
@@ -485,14 +543,16 @@ function SignupModal({ open, onClose, onSuccess }: SignupModalProps) {
                     maxLength={100}
                     disabled={isLoading}
                   />
-                  {errors.pswdAns && <span className="error-message">{errors.pswdAns}</span>}
+                  {errors.pswdAns && (
+                    <span className="error-message">{errors.pswdAns}</span>
+                  )}
                 </div>
               </div>
             </div>
 
             <div className="form-section">
               <h3>연락처 정보</h3>
-              
+
               <div className="form-row">
                 <div className="form-group">
                   <label htmlFor="mphn">휴대폰 번호</label>
@@ -506,7 +566,9 @@ function SignupModal({ open, onClose, onSuccess }: SignupModalProps) {
                     maxLength={11}
                     disabled={isLoading}
                   />
-                  {errors.mphn && <span className="error-message">{errors.mphn}</span>}
+                  {errors.mphn && (
+                    <span className="error-message">{errors.mphn}</span>
+                  )}
                 </div>
               </div>
 
@@ -523,14 +585,16 @@ function SignupModal({ open, onClose, onSuccess }: SignupModalProps) {
                     maxLength={11}
                     disabled={isLoading}
                   />
-                  {errors.telno && <span className="error-message">{errors.telno}</span>}
+                  {errors.telno && (
+                    <span className="error-message">{errors.telno}</span>
+                  )}
                 </div>
               </div>
             </div>
 
             <div className="form-section">
               <h3>주소 정보</h3>
-              
+
               <div className="form-row">
                 <div className="form-group">
                   <label htmlFor="zip">우편번호</label>
@@ -544,7 +608,9 @@ function SignupModal({ open, onClose, onSuccess }: SignupModalProps) {
                     maxLength={5}
                     disabled={isLoading}
                   />
-                  {errors.zip && <span className="error-message">{errors.zip}</span>}
+                  {errors.zip && (
+                    <span className="error-message">{errors.zip}</span>
+                  )}
                 </div>
               </div>
 
@@ -561,7 +627,9 @@ function SignupModal({ open, onClose, onSuccess }: SignupModalProps) {
                     maxLength={200}
                     disabled={isLoading}
                   />
-                  {errors.addr && <span className="error-message">{errors.addr}</span>}
+                  {errors.addr && (
+                    <span className="error-message">{errors.addr}</span>
+                  )}
                 </div>
               </div>
 
@@ -578,14 +646,16 @@ function SignupModal({ open, onClose, onSuccess }: SignupModalProps) {
                     maxLength={200}
                     disabled={isLoading}
                   />
-                  {errors.daddr && <span className="error-message">{errors.daddr}</span>}
+                  {errors.daddr && (
+                    <span className="error-message">{errors.daddr}</span>
+                  )}
                 </div>
               </div>
             </div>
 
             <div className="form-section">
               <h3>기관 정보</h3>
-              
+
               <div className="form-row">
                 <div className="form-group">
                   <label htmlFor="laeSeCd">법인구분 *</label>
@@ -601,7 +671,9 @@ function SignupModal({ open, onClose, onSuccess }: SignupModalProps) {
                     <option value="02">민간기업</option>
                     <option value="03">개인</option>
                   </select>
-                  {errors.laeSeCd && <span className="error-message">{errors.laeSeCd}</span>}
+                  {errors.laeSeCd && (
+                    <span className="error-message">{errors.laeSeCd}</span>
+                  )}
                 </div>
               </div>
 
@@ -621,7 +693,9 @@ function SignupModal({ open, onClose, onSuccess }: SignupModalProps) {
                     <option value="03">공공기관</option>
                     <option value="04">민간기업</option>
                   </select>
-                  {errors.ogdpSeCd && <span className="error-message">{errors.ogdpSeCd}</span>}
+                  {errors.ogdpSeCd && (
+                    <span className="error-message">{errors.ogdpSeCd}</span>
+                  )}
                 </div>
               </div>
 
@@ -638,7 +712,9 @@ function SignupModal({ open, onClose, onSuccess }: SignupModalProps) {
                     maxLength={10}
                     disabled={isLoading}
                   />
-                  {errors.instSeCd && <span className="error-message">{errors.instSeCd}</span>}
+                  {errors.instSeCd && (
+                    <span className="error-message">{errors.instSeCd}</span>
+                  )}
                 </div>
               </div>
 
@@ -655,21 +731,25 @@ function SignupModal({ open, onClose, onSuccess }: SignupModalProps) {
                     maxLength={10}
                     disabled={isLoading}
                   />
-                  {errors.dtlInstCd && <span className="error-message">{errors.dtlInstCd}</span>}
+                  {errors.dtlInstCd && (
+                    <span className="error-message">{errors.dtlInstCd}</span>
+                  )}
                 </div>
               </div>
             </div>
 
             {errors.submit && (
               <div className="form-row">
-                <div className="error-message submit-error">{errors.submit}</div>
+                <div className="error-message submit-error">
+                  {errors.submit}
+                </div>
               </div>
             )}
 
             <div className="form-actions">
               <button
                 type="button"
-                onClick={() => setCurrentStep('agreement')}
+                onClick={() => setCurrentStep("agreement")}
                 className="back-button"
                 disabled={isLoading}
               >

apps/cm/src/pages/auth/login/ui/UserSignupModal.tsx

@@ -305,7 +305,7 @@ function UserSignupModal({ open, onClose, onSuccess }: UserSignupModalProps) {
     }
   };
 
-  const handleSubmit = async (e: React.FormEvent) => {
+  const handleSubmit = async (e: React.SubmitEvent) => {
     e.preventDefault();
     console.log("회원가입 버튼 클릭됨 - handleSubmit");
     console.log("현재 폼 데이터:", formData);

apps/cm/src/pages/auth/login/ui/login-page.tsx

@@ -26,7 +26,7 @@ function LoginPage() {
     console.log("Modal states - OTP:", showOtpModal, "2FA:", showTwoFAModal);
   }, [showOtpModal, showTwoFAModal]);
 
-  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+  const handleSubmit = async (e: React.SubmitEvent<HTMLFormElement>) => {
     e.preventDefault();
     setIsLoading(true);
     setError("");
@@ -43,44 +43,54 @@ function LoginPage() {
       if (isOtpEnabled) {
         // 2FA 로그인 - Proxy를 통해 처리 (2FA 전용 엔드포인트 사용)
         console.log("Starting 2FA login...");
-        
-        const response = await fetch(`/api/proxy${ENDPOINT.USER_SERVICE.LOGIN_2FA}`, {
-          method: 'POST',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({
-            userId,
-            password,
-            provider: 'password'
-          }),
-        });
+
+        const response = await fetch(
+          `/api/proxy${ENDPOINT.USER_SERVICE.LOGIN_2FA}`,
+          {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({
+              userId,
+              password,
+              provider: "password",
+            }),
+          },
+        );
 
         if (!response.ok) {
           const errorData = await response.json();
-          let errorMsg = errorData.message || '로그인 실패';
+          let errorMsg = errorData.message || "로그인 실패";
           if (Array.isArray(errorData.errors) && errorData.errors.length > 0) {
-            errorMsg = errorData.errors.map((e: { message: string }) => e.message).join(', ');
+            errorMsg = errorData.errors
+              .map((e: { message: string }) => e.message)
+              .join(", ");
           }
           throw new Error(errorMsg);
         }
 
         const data = await response.json();
         console.log("2FA login response:", data);
-        console.log("Response headers:", Object.fromEntries(response.headers.entries()));
-        
+        console.log(
+          "Response headers:",
+          Object.fromEntries(response.headers.entries()),
+        );
+
         // 2FA 로그인 응답에는 tempToken과 registered2FA만 포함됨
         if (!data.tempToken) {
           throw new Error("Missing tempToken in 2FA login response");
         }
 
         // 임시 토큰을 localStorage에 저장 (OTP 인증용)
-        localStorage.setItem('tempToken', data.tempToken);
+        localStorage.setItem("tempToken", data.tempToken);
         console.log("tempToken saved:", data.tempToken);
 
         if (data.registered2FA) {
           console.log("User has 2FA registered, showing OTP modal");
           setShowOtpModal(true);
         } else {
-          console.log("User doesn't have 2FA registered, showing 2FA setup modal");
+          console.log(
+            "User doesn't have 2FA registered, showing 2FA setup modal",
+          );
           setShowTwoFAModal(true);
         }
       } else {
@@ -91,7 +101,7 @@ function LoginPage() {
       }
     } catch (error: unknown) {
       console.error("Login error:", error);
-      
+
       // 에러 처리
       if (error instanceof Error) {
         setError(error.message);
@@ -147,9 +157,9 @@ function LoginPage() {
             <h1>
               유역하수도통합플랫폼
               <br />
-              <span>하수도 포탈</span>
+              <span>유역하수도 포탈</span>
             </h1>
-            <p>유역하수도통합플랫폼 하수도 포탈에 오신 것을 환영합니다.</p>
+            <p>유역하수도통합플랫폼 유역하수도포탈에 오신 것을 환영합니다.</p>
           </div>
           <div className="img">
             <Image src={images.logo} width={229} height={46} alt="logo" />
@@ -218,25 +228,36 @@ function LoginPage() {
                 <label htmlFor="checkTwoFA">OTP 인증</label>
               </div>
             </div>
-            <button 
-              type="submit" 
-              className="login_btn fx"
-              disabled={isLoading}
-            >
+            <button type="submit" className="login_btn fx" disabled={isLoading}>
               <span>{isLoading ? "로그인 중..." : "LOGIN"}</span>
             </button>
             {error && (
-              <div className="error-message" style={{ color: "red", textAlign: "center", marginTop: "10px" }}>
+              <div
+                className="error-message"
+                style={{ color: "red", textAlign: "center", marginTop: "10px" }}
+              >
                 {error}
               </div>
             )}
             {successMessage && (
-              <div className="success-message" style={{ color: "green", textAlign: "center", marginTop: "10px" }}>
+              <div
+                className="success-message"
+                style={{
+                  color: "green",
+                  textAlign: "center",
+                  marginTop: "10px",
+                }}
+              >
                 {successMessage}
               </div>
             )}
-            <div className="signup-link" style={{ textAlign: "center", marginTop: "15px" }}>
-              <span style={{ color: "#666", fontSize: "14px" }}>계정이 없으신가요? </span>
+            <div
+              className="signup-link"
+              style={{ textAlign: "center", marginTop: "15px" }}
+            >
+              <span style={{ color: "#666", fontSize: "14px" }}>
+                계정이 없으신가요?{" "}
+              </span>
               <button
                 type="button"
                 onClick={() => setShowSignupModal(true)}
@@ -246,7 +267,7 @@ function LoginPage() {
                   color: "#3b82f6",
                   textDecoration: "underline",
                   cursor: "pointer",
-                  fontSize: "14px"
+                  fontSize: "14px",
                 }}
               >
                 회원가입
@@ -282,8 +303,8 @@ function LoginPage() {
                   종합환경연구단지)
                 </span>
                 <span>
-                  전화 : (시스템) 032-590-4321, 3752, 4314 / (통 계) 032-590-3723,
-                  3722
+                  전화 : (시스템) 032-590-4321, 3752, 4314 / (통 계)
+                  032-590-3723, 3722
                 </span>
                 <span>팩스 :032-590-3729</span>
               </p>

apps/cm/src/pages/dashboard/lib/hooks/use-dnd-sensors.ts

@@ -0,0 +1,16 @@
+import {
+  KeyboardSensor,
+  PointerSensor,
+  useSensor,
+  useSensors,
+} from "@dnd-kit/core";
+import { sortableKeyboardCoordinates } from "@dnd-kit/sortable";
+
+export function useDndSensors() {
+  return useSensors(
+    useSensor(PointerSensor),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates,
+    }),
+  );
+}

apps/cm/src/pages/dashboard/lib/hooks/use-panel-order.ts

@@ -0,0 +1,59 @@
+import { useState, useEffect } from "react";
+import { arrayMove } from "@dnd-kit/sortable";
+import type { DragEndEvent } from "@dnd-kit/core";
+import type { PanelItem } from "../../model/types";
+
+interface UsePanelOrderProps {
+  initialPanels: PanelItem[];
+  storageKey: string;
+}
+
+export function usePanelOrder({
+  initialPanels,
+  storageKey,
+}: UsePanelOrderProps) {
+  const [panels, setPanels] = useState<PanelItem[]>(initialPanels);
+  const [isInitialized, setIsInitialized] = useState(false);
+
+  useEffect(() => {
+    if (isInitialized) return;
+
+    const saved = localStorage.getItem(storageKey);
+    if (saved) {
+      try {
+        const savedIds = JSON.parse(saved);
+        const restoredPanels = savedIds
+          .map((id: string) => initialPanels.find((p) => p.id === id))
+          .filter(Boolean);
+        if (restoredPanels.length === initialPanels.length) {
+          setPanels(restoredPanels);
+        }
+      } catch {
+        setPanels(initialPanels);
+      }
+    }
+    setIsInitialized(true);
+  }, [storageKey]);
+
+  const handleDragEnd = (event: DragEndEvent) => {
+    const { active, over } = event;
+
+    if (over && active.id !== over.id) {
+      setPanels((items) => {
+        const oldIndex = items.findIndex((item) => item.id === active.id);
+        const newIndex = items.findIndex((item) => item.id === over.id);
+        const newItems = arrayMove(items, oldIndex, newIndex);
+
+        // localStorage에 저장
+        localStorage.setItem(
+          storageKey,
+          JSON.stringify(newItems.map((item) => item.id)),
+        );
+
+        return newItems;
+      });
+    }
+  };
+
+  return { panels, handleDragEnd };
+}

apps/cm/src/pages/dashboard/model/panel-config.tsx

@@ -0,0 +1,71 @@
+import FoFcltCntRt from "@/pages/dashboard/ui/fo-fclt-cnt-rt";
+import SnPplStatus from "@/pages/dashboard/ui/sn-ppl-status";
+import ReuseChart from "@/pages/dashboard/ui/reuse-chart";
+import FoWqltInflEffl from "@/pages/dashboard/ui/fo-wqlt-Infl-effl";
+import SnOldPpl from "@/pages/dashboard/ui/sn-old-ppl";
+import ReuseStatus from "@/pages/dashboard/ui/reuse-status";
+import SupportList from "@/pages/dashboard/ui/support-list";
+import DataStatusList from "@/pages/dashboard/ui/datastatus-list";
+import NoticeList from "@/pages/dashboard/ui/notice-list";
+import BannerList from "@/pages/dashboard/ui/banner-list";
+import type { PanelItem } from "./types";
+
+export function getInitialTopPanels(): PanelItem[] {
+  return [
+    {
+      id: "panel-1",
+      component: <FoFcltCntRt />,
+      className: "",
+    },
+    {
+      id: "panel-2",
+      component: <SnPplStatus />,
+      className: "",
+    },
+    {
+      id: "panel-3",
+      component: <ReuseChart />,
+      className: "",
+    },
+    {
+      id: "panel-4",
+      component: <FoWqltInflEffl />,
+      className: "",
+    },
+    {
+      id: "panel-5",
+      component: <SnOldPpl />,
+      className: "",
+    },
+    {
+      id: "panel-6",
+      component: <ReuseStatus />,
+      className: "",
+    },
+  ];
+}
+
+export function getInitialBottomPanels(): PanelItem[] {
+  return [
+    {
+      id: "panel-7",
+      component: <SupportList />,
+      className: "",
+    },
+    {
+      id: "panel-8",
+      component: <DataStatusList />,
+      className: "",
+    },
+    {
+      id: "panel-9",
+      component: <NoticeList />,
+      className: "",
+    },
+    {
+      id: "panel-10",
+      component: <BannerList />,
+      className: "",
+    },
+  ];
+}

apps/cm/src/pages/dashboard/model/types.ts

@@ -0,0 +1,7 @@
+export interface PanelItem {
+  id: string;
+  component: React.ReactNode;
+  className?: string;
+}
+
+export type PanelType = "top" | "bottom";