env.local loalhosst로 변경

Co-authored-by: Cursor <cursoragent@cursor.com>

.gitignore

@@ -4,10 +4,7 @@
 
 # dependencies
 node_modules/
-
-# build
-.next/
-dist/
+.idea/
 
 # build
 .next
@@ -22,6 +19,14 @@ apps/fo/.next/**/*
 #.env*
 .qodo
 
+# next-agents-md
+.next-docs/
+
 pnpm-lock.yaml
 settings.json
 .npmrc
+.cursor
+.agent
+
+apps/**/tsconfig.tsbuildinfo
+logs/

.husky/pre-push

@@ -0,0 +1,10 @@
+#!/bin/sh
+BRANCH=$(git rev-parse --abbrev-ref HEAD)
+if [ "$BRANCH" != "main" ]; then
+  exit 0
+fi
+echo "Branch: $BRANCH"
+echo "Changed packages (dry-run):"
+pnpm turbo run build --filter="...[origin/$BRANCH]" --dry-run
+echo "Starting build..."
+pnpm turbo run build --filter="...[origin/$BRANCH]"

apps/_template/.env.example

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

apps/_template/.eslintrc.json

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

apps/_template/.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*.local
 
 # vercel
 .vercel

apps/_template/.prettierrc

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

apps/_template/README.md

@@ -0,0 +1,248 @@
+# AS 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)
+
+이 프로젝트는 **Feature-Sliced Design v2.1**을 따르며, 계층적 아키텍처로 구성되어 있습니다.
+
+```
+as/
+├── app/                    # App 레이어 (Next.js App Router)
+│   ├── (routes)/          # 라우트 구조
+│   ├── layout.tsx         # 루트 레이아웃
+│   ├── page.tsx           # 홈 페이지
+│   ├── globals.css        # 글로벌 스타일
+│   └── providers.tsx      # 전역 providers
+│
+├── widgets/               # Widgets 레이어
+│   └── [widget-name]/     # 큰 독립적 UI 블록 (여러 페이지에서 재사용)
+│       ├── ui/
+│       ├── model/
+│       └── index.ts
+│
+├── 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/           # 라우트 상수
+```
+
+### 계층 구조 이해하기
+
+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 (app 디렉토리)
+- **목적**: 웹사이트나 애플리케이션을 구성하는 페이지/화면
+- **내용**: 페이지 UI, 로딩 상태, 에러 바운더리, 데이터 fetching
+- **특징**: 한 페이지당 한 슬라이스 (유사한 페이지는 그룹화 가능)
+- **의존성**: `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, 유틸리티 라이브러리, 글로벌 설정
+- **특징**: 비즈니스 로직 없음, 슬라이스가 없고 세그먼트로만 구성
+- **의존성**: 외부 라이브러리만 사용 가능 (다른 레이어 불가)
+
+## 레이어 간 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
+# 의존성 설치
+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';
+```
+
+### 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
+```

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

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

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

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

apps/_template/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/_template/app/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: var(--font-noto-sans-kr), sans-serif;
+  font-size: 10px;
+}

apps/_template/app/layout.tsx

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

apps/_template/app/providers.tsx

@@ -0,0 +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>
+  );
+}

apps/_template/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/_template/entities/menu/index.ts

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

apps/_template/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/_template/eslint.config.mjs

@@ -0,0 +1,18 @@
+import { defineConfig, globalIgnores } from "eslint/config";
+import nextVitals from "eslint-config-next/core-web-vitals";
+import nextTs from "eslint-config-next/typescript";
+
+const eslintConfig = defineConfig([
+  ...nextVitals,
+  ...nextTs,
+  // Override default ignores of eslint-config-next.
+  globalIgnores([
+    // Default ignores of eslint-config-next:
+    ".next/**",
+    "out/**",
+    "build/**",
+    "next-env.d.ts",
+  ]),
+]);
+
+export default eslintConfig;

apps/_template/features/README.md

@@ -0,0 +1,130 @@
+# 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.FormEvent) => {
+    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/next.config.ts

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

apps/_template/package.json

@@ -0,0 +1,36 @@
+{
+  "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",
+    "next": "15.3.8",
+    "react-hook-form": "^7.54.2",
+    "zod": "^3.24.2"
+  },
+  "devDependencies": {
+    "eslint": "^9.0.0",
+    "eslint-config-next": "15.3.8",
+    "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/_template/postcss.config.mjs

@@ -0,0 +1,8 @@
+/** @type {import('postcss-load-config').Config} */
+const config = {
+  plugins: {
+    tailwindcss: {},
+  },
+};
+
+export default config;

apps/_template/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/_template/shared/api/client.ts

@@ -0,0 +1,9 @@
+import { Client } from "@common/network";
+import { PROXY_HOST, SITE_ID } from "@/shared/config/env";
+
+const BASE_URL = `${PROXY_HOST}/server`;
+
+export const apiClient = Client.getInstance({
+  baseURL: BASE_URL,
+  siteId: SITE_ID,
+});

apps/_template/shared/api/index.ts

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

apps/_template/shared/config/env.ts

@@ -0,0 +1,11 @@
+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/shared/config/index.ts

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

apps/_template/shared/lib/dayjs.ts

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

apps/_template/shared/lib/index.ts

@@ -0,0 +1,2 @@
+export { queryClient } from "./query-client";
+export { dayjs } from "./dayjs";

apps/_template/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/_template/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/_template/shared/ui/index.ts

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

apps/_template/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/_template/tailwind.config.ts

@@ -0,0 +1,29 @@
+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)",
+      },
+      fontFamily: {
+        sans: ["var(--font-noto-sans-kr)", "Noto Sans KR", "sans-serif"],
+      },
+    },
+  },
+  plugins: [],
+};
+
+export default config;

apps/_template/tsconfig.json

@@ -0,0 +1,35 @@
+{
+  "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": {
+      "@/*": ["./*"],
+      "@/app/*": ["./app/*"],
+      "@/shared/*": ["./shared/*"],
+      "@/entities/*": ["./entities/*"],
+      "@/features/*": ["./features/*"],
+      "@/widgets/*": ["./widgets/*"],
+      "@/pages/*": ["./pages/*"],
+      "@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/_template/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/next-env.d.ts

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

apps/cm/app/api/auth/logout/route.ts

@@ -15,4 +15,3 @@ export async function POST() {
   cookieStore.delete(CLAIM_NAME);
   return NextResponse.json({ message: "Logged out" }, { status: 200 });
 }
-

apps/cm/package.json

@@ -52,7 +52,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/entities/auth/lib/token-manager.ts

@@ -1,4 +1,4 @@
-import { AUTH_USER_ID, CLAIM_NAME } from "@/shared/config";
+import { ACCESS_TOKEN, AUTH_USER_ID, CLAIM_NAME, REFRESH_TOKEN } from "@/shared/config";
 import { getCookie, setCookie, removeCookie } from "@/shared/lib";
 
 export class TokenManager {
@@ -76,6 +76,8 @@ export class TokenManager {
 
     this.removeToken(CLAIM_NAME);
     this.removeToken(AUTH_USER_ID);
+    this.removeToken(REFRESH_TOKEN);
+    this.removeToken(ACCESS_TOKEN);
   }
 }
 

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

@@ -145,11 +145,11 @@ function LoginPage() {
         <div className="left_box fx">
           <div className="text">
             <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" />

apps/cm/src/pages/dashboard/ui/mypost-list.tsx

@@ -3,7 +3,7 @@
 import { useRouter } from "next/navigation";
 import { useQuery } from "@tanstack/react-query";
 import { getCoreRowModel } from "@tanstack/react-table";
-import { PostApi, type MyPost } from "@/entities/post";
+import { PostApi, type MyPost, type NoticePost } from "@/entities/post";
 import { ENDPOINT } from "@/shared/config";
 import { useDataTable } from "@/shared/lib";
 import {
@@ -23,15 +23,21 @@ const MyPostList: React.FC = () => {
         }),
     });
 
+    const handleMyPostRowClick = (row: MyPost) => {
+      router.push(`/cms/${row.bbsTypeCd.toLowerCase()}/${row.bbsId}/${row.pstNo}`);
+  };
+
    const { tableComponent: myPostTableComponent } = useDataTable({
         query: myPostQuery,
         tableOptions: {
-        columns: myPostTableColumns,
-        getCoreRowModel: getCoreRowModel(),
+          columns: myPostTableColumns,
+          getCoreRowModel: getCoreRowModel(),
         },
         dataTableOptions: {
-        variant: "line",
+          variant: "line",
+          onRowClick: handleMyPostRowClick
         },
+       
     });
 
   return (

apps/cm/src/pages/dashboard/ui/notice-list.tsx

@@ -26,7 +26,7 @@ const NoticeList: React.FC = () => {
     });
 
     const handleNoticePostRowClick = (row: NoticePost) => {
-        router.push(`/bbs/bbsnotice/${row.bbsId}/${row.pstNo}`);
+        router.push(`/cms/${row.bbsTypeCd.toLowerCase()}/${row.bbsId}/${row.pstNo}`);
     };
 
     const handleMoreClick = () => {
@@ -40,12 +40,12 @@ const NoticeList: React.FC = () => {
     const { tableComponent: noticePostTableComponent } = useDataTable({
         query: noticePostQuery,
         tableOptions: {
-        columns: noticePostTableColumns,
-        getCoreRowModel: getCoreRowModel(),
+          columns: noticePostTableColumns,
+          getCoreRowModel: getCoreRowModel(),
         },
         dataTableOptions: {
-        variant: "line",
-        onRowClick: handleNoticePostRowClick,
+          variant: "line",
+          onRowClick: handleNoticePostRowClick,
         },
     });
 

apps/common/features/next.config.ts

@@ -1,6 +1,21 @@
 import type { NextConfig } from "next";
 
 const nextConfig: NextConfig = {
+  output: "standalone",
+  experimental: {
+    proxyTimeout: 600000,
+  },
+  eslint: {
+    ignoreDuringBuilds: true,
+  },
+  typescript: {
+    ignoreBuildErrors: true,
+  },
+  logging: {
+    fetches: {
+      fullUrl: true,
+    },
+  },  
   async rewrites() {
     return {
       afterFiles: [

apps/common/features/package.json

@@ -46,7 +46,7 @@
     "@types/node": "^22.13.1",
     "@types/webpack": "^5.28.5",
     "eslint": "^9",
-    "eslint-config-next": "15.1.7",
+    "eslint-config-next": "15.3.8",
     "postcss": "^8",
     "prettier": "^3.4.2",
     "prettier-plugin-tailwindcss": "^0.6.11",

apps/common/features/src/entities/auth/lib/auth-wrapper.tsx

@@ -4,13 +4,17 @@ import { useEffect } from "react";
 import { client } from "@/shared/api";
 import type { IUserInfo } from "@/shared/store";
 import { getCookie, useUserStore } from "@/shared/lib";
+import { getAuthLoginRedirectUrl, 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 { userInfo, setUserInfo } = useUserStore((state) => state);
 
   async function authCheck() {
+    if (isAtLoginRedirectUrl(getAuthLoginRedirectUrl())) {
+      return;
+    }
+
     const userId = getCookie(AUTH_USER_ID);
     if (!userId) {
       throw new Error("Missing required authentication tokens");
@@ -28,8 +32,6 @@ const AuthWrapper = ({ children }: { children: React.ReactNode }) => {
         await authCheck();
       } catch (error) {
         console.error(error);
-        await LoginApi.silentRefresh();
-        await authCheck();
       }
     })();
   }, []);

apps/cs/.gitignore

@@ -38,4 +38,5 @@ yarn-error.log*
 next-env.d.ts
 
 .env*
-!.env.example
+!.env.example
+/start_cs.log

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

@@ -60,13 +60,18 @@ async function handler(
         [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: "lax",
-//          domain: domain,
+          sameSite: "strict",
+          domain: domain,
           path: "/",
         });
       }

apps/cs/docs/표준단어정의서.md

@@ -0,0 +1,831 @@
+# 표준단어정의서
+
+AI 이해용으로 정리된 표준단어명, 영문약어명, 영문명 목록입니다.
+
+| 표준단어명 | 표준단어 영문약어명 | 표준단어 영문명 |
+|-----------|-------------------|----------------|
+| BOD | BOD | Biochemical Oxygen Demand |
+| C/N비 | CNR | Carbon-Nitrogen Ratio |
+| COD | COD | Chemical Oxygen Demand |
+| F/M비 | FMR | Food-Microorganism Ratio |
+| GISD | GISDATA | Geographic Information System Data |
+| HTML | HTML | Hypertext Markup Language |
+| ID | ID | Id |
+| IP | IP | Internet Protocol |
+| KEY | KEY | Key |
+| ND | ND | Not Detected |
+| NON | NON | Non |
+| NTU | NTU | Nephelometry Turbidity Unit |
+| OPT | OPT | Opt |
+| PAC | PAC | Polyaluminium Chloride |
+| PH | PH | Hydrogen Exponent |
+| PKI | PKI | Public Key Infrastructure |
+| POOL | POOL | Pool |
+| SS | SS | Suspended Solids (Ss) |
+| TCE | TCE | Trichloroethane |
+| TM | TM | Transverse Mercator |
+| T-N | TN | Total Nitrogen |
+| TOC | TOC | Total Organic Carbon |
+| T-P | TP | Total Phosphorus |
+| URL | URL | Uniform Resource Locator |
+| 가구 | HSHD | Household |
+| 가능 | PSBL | Possible |
+| 가동 | OPR | Operation |
+| 가산 | ADTN | Addition |
+| 가성소다 | NAOH | Caustic Soda(Nach) |
+| 가축분뇨 | ANMA | Animal Manure |
+| 값 | VAL | Value |
+| 강도 | IN | Intensity |
+| 강우 | RAIN | Rain |
+| 개방 | OPN | Opening |
+| 개별 | INDIV | Individual |
+| 개보수비 | RPAFEE | Repair Fee |
+| 개설 | ESTBL | Establishment |
+| 개시 | STRT | Start |
+| 개정 | RVSN | Revision |
+| 개조 | REMDEL | Remodeling |
+| 개체 | INDVD | Individual |
+| 개체군 | POPU | Population |
+| 개폐 | RORGN | Reorganization |
+| 갱신 | UPDT | Update |
+| 건물 | BLDG | Building |
+| 건설 | CONC | Construction |
+| 건수 | NOCS | The Number Of Cases |
+| 건조 | DRY | Dry |
+| 검사 | INSP | Inspection |
+| 검사서 | EXRPT | Examination Report |
+| 검정 | RCGN | Recognition |
+| 검증 | VRFC | Verification |
+| 검출 | DETECT | Detection |
+| 검토 | RVW | Review |
+| 격자 | LATTC | Lattice |
+| 결과 | RSLT | Result |
+| 결의 | DCIS | Decision |
+| 결정 | DCSN | Decision |
+| 경계 | BNDRY | Boundary |
+| 경과 | PROC | Process |
+| 경도 | LOT | Longitude |
+| 경보 | ALARM | Alarm |
+| 경사판 | ICNTPT | Inclination plate |
+| 계 | SUM | Summation |
+| 계량기 | MRNR | Measuring Instrument |
+| 계량기분리 | METRSPRT | Meter Separation |
+| 계면 | SGLV | Sludge Level |
+| 계산식 | FMUL | Formula |
+| 계약 | CTRT | Contract |
+| 계약기간 | CNTRPD | Contract Period |
+| 계절 | SEASON | Season |
+| 계획 | PLAN | Plan |
+| 고도처리 | AWTR | Advanced Water Treatment |
+| 고시 | ANCMNT | Announcement |
+| 고액분리 | SLSPRT | Solid-Liquid Separation |
+| 고형물체류시간 | SRT | Solid Retention Time |
+| 공간데이터 | SPCEDATA | Space Data |
+| 공공 | PUBLIC | Public |
+| 공급 | SPLY | Supply |
+| 공기 | AIR | Air |
+| 공기여과 | ARFT | Air Filter |
+| 공문 | ODOC | Official Documnet |
+| 공법 | MSRC | Method Of Construction |
+| 공사 | CSTRN | Construction |
+| 공사비 | CONSTEXPN | Construction Expenses |
+| 공업지역 | MNFTR_ARA | Manufacturing Area |
+| 공용면적 | CMAR | Common Area |
+| 공통 | CMMN | Commonness |
+| 관 | PP | Pipe |
+| 관계 | REL | Relation |
+| 관련 | RLTN | Relation |
+| 관로 | PPLINE | Pipe Line |
+| 관리 | MNG | Management |
+| 관리기관 | MGC | Management Agency |
+| 관리자 | MNGR | Manager |
+| 관찰 | WTCH | Watch |
+| 관측 | OBSR | Observation |
+| 관측소 | OBSRVT | Observatory |
+| 교반기 | AGITOR | Agirator |
+| 교정 | CRRC | Correction |
+| 구간 | SCTN | Section |
+| 구동 | DRIVE | Drive |
+| 구분 | SE | Section |
+| 구성 | CMPSG | Composing |
+| 구역 | ZONE | Zone |
+| 구조 | STRCT | Structure |
+| 권역 | DSTR | District |
+| 권한 | AUTH | Authority |
+| 규격 | STNDRD | Standard |
+| 규모 | SCAL | Scale |
+| 규제 | REGL | Regulation |
+| 균등 | EQLTY | Equality |
+| 금액 | AMT | Amount |
+| 급수 | WSP | Water Supply |
+| 기간 | WHL | While |
+| 기관 | INST | Institution |
+| 기록 | RECD | Recording |
+| 기록부 | REGI | Register |
+| 기밀 | SCRET | Secret |
+| 기법 | TECQU | Techniques |
+| 기본 | BSIC | Basics |
+| 기본정보 | BASINF | Bassinfo |
+| 기본키 | PK | Primary Key |
+| 기상 | WETHER | Weather |
+| 기안 | DRFTG | Drafting |
+| 기재 | WRIT | Write |
+| 기점 | CDPNT | Cardinal Point |
+| 기존 | LGCY | Legacy |
+| 기준 | CRTR | Criteria |
+| 기타 | ETC | Etc |
+| 기한 | TERM | Term |
+| 기후 | CLMT | Climate |
+| 긴급 | EMRG | Emergency |
+| 날개벽 | WW | Wing Wall |
+| 날씨 | WETHR | Weather |
+| 날짜 | DATE | DATE |
+| 남조류 | BLAL | Blue-Green Algae |
+| 납 | PB | Plumbum |
+| 내려받기 | DWLD | Download |
+| 내부반송 | ITNRCC | Internal Recycl |
+| 내용 | CN | Content |
+| 내용연수 | SVLF | Service Life |
+| 냄새 | SMELL | Smell |
+| 년 | YY | Year |
+| 년간 | FAYR | For A Year |
+| 노즐 | NZL | Nozzle |
+| 노출 | EXPSR | Exposure |
+| 농도 | DNSTY | Density |
+| 농축 | TKN | Thickened |
+| 누적 | ACML | Accumulate |
+| 누출 | LKG | Leakage |
+| 눈 | SNW | Snow |
+| 단가 | UNPRC | Unit Price |
+| 단기 | SRTPD | Short Period |
+| 단순 | SIMPL | Simplicity |
+| 단위 | UNIT | Unit |
+| 대구역 | LZONE | Large Zone |
+| 대분류 | LCLAS | Large Classification |
+| 대장 | REGSTR | Register |
+| 대장균 | COLI | Coliform, Fecal Coliform |
+| 대장균군 | COLIB | Coliform Bacteria |
+| 대지면적 | SIAR | Site Area |
+| 대체 | RPLC | Replace |
+| 덮개 | COVR | Cover |
+| 데이타 | DAT | Data |
+| 도구 | UNT | Unit |
+| 도래 | ADVNT | Advent |
+| 도로 | ROAD | Road |
+| 도로명 | RN | Road Name |
+| 도시 | CTY | City |
+| 도엽 | MAPDMC | Map Demarcation |
+| 도표 | CHART | Chart |
+| 독성 | TOXCTY | Toxicity |
+| 동의 | AGRE | Agreement |
+| 동절기 | WSESN | The Winter Season |
+| 등급 | GRD | Grade |
+| 등기 | RG | Registered |
+| 등록 | REG | Registration |
+| 디바이스 | DVICE | Device |
+| 디코딩 | DCD | Decoding |
+| 레이어 | LYR | Layer |
+| 로그인 | LGN | Login |
+| 로우 | ROW | Row |
+| 마감 | DDLN | Deadline |
+| 마이크로필터 | MCRFT | Micro Filter |
+| 막 | MBRN | Membrane |
+| 만족도 | STFDG | Satisfaction Degree |
+| 맑음 | CLAR | Clear |
+| 매각 | SAL | Sale |
+| 맨홀 | MH | Manhole |
+| 맵 | MAP | Map |
+| 메인 | MAIN | Main |
+| 메일 | EMAIL | Email |
+| 메탄올 | MTN | Methanol(CH3OH) |
+| 명 | NM | Name |
+| 모니터링 | MTRG | Monitoring |
+| 모델 | MODL | Model |
+| 모델링 | MODLNG | Modeling |
+| 모래 | SAND | Sand |
+| 목 | MOK | Mok |
+| 무산소 | ANX | Anoxic |
+| 무산소조 | ANX_TANK | Anoxic Tank  |
+| 무인센서 | MNLSENSR | Manless Sensor |
+| 문서 | DCMT | Document |
+| 물 | WTR | Water |
+| 미급수 | NONWTRSPL | Non Water Supply |
+| 미생물 | BLGC | Biological |
+| 미세먼지 | PM | Particulate Matter |
+| 미세목 | MCRB | Micro Bar |
+| 민간위탁 | ETSVN | Entrustment To Civilian |
+| 민감 | SST | Sensitive |
+| 민원 | CVLCPT | Civil Complaint |
+| 바이러스 | VIRS | Virus |
+| 반기 | HT | Half Term |
+| 반류수 | SIDSWT | Side Stream Water |
+| 반송 | SNDBK | Send Back |
+| 반송수 | RCCWT | Recycled  Water |
+| 반송슬러지 | RTNSLG | Return Sludge |
+| 반영 | RFLT | Reflection |
+| 반응조 | RETNK | Reactant  Tank |
+| 반출 | EXPRT | Export |
+| 반토 | ALUM | Alumina |
+| 반환 | GVBK | Giving Back |
+| 받이 | INL | Inlet |
+| 발생 | OCRN | Occurrence |
+| 발전 | PWGNRT | Power Generation |
+| 발주기관 | ORNT | Order Institution |
+| 방류 | DCWTR | Discharge Water Stock Etc |
+| 방류구 | DSCHG | Discharge |
+| 방류수 | EFLEC | Effluence |
+| 방문 | VST | Visit |
+| 방문자 | VSTR | Visitor |
+| 방법 | MTHD | Method |
+| 방사 | RLSE | Release |
+| 배관 | PLINE | Pipeline |
+| 배분 | DSTRB | Distirbution |
+| 배설물 | EXCRTN | Excretion |
+| 배수 | DRNG | Drainage |
+| 배수구역 | DRANGZN | Drainage Zone |
+| 배출 | EXHST | Exhaust |
+| 배출가스 | EMGA | Emission Gases |
+| 배출구 | VENT | Vent |
+| 배출시설 | DHGP | Discharge Equipment |
+| 배출시험 | EXHTST | Exhaust Test |
+| 배출자 | DCHGR | Discharge Person |
+| 밸브 | VALVE | Valve |
+| 번호 | NO | Number |
+| 법 | LAW | Law |
+| 법적 | LGL | Legal |
+| 법정 | STTY | Statutory |
+| 법정동 | STDG | Statutory Dong(Administrative District) |
+| 법정리 | STLI | Statutory Li(Administrative District) |
+| 변경 | CHG | Change |
+| 변동 | FLCTN | Fluctuation |
+| 변속기 | TRMIS | Transmission |
+| 보고 | RPT | Report |
+| 보고서 | RPOT | Report |
+| 보관 | STORG | Storage |
+| 보수 | MEND | Mend |
+| 보유 | HOLD | Hold |
+| 보정 | RVSION | Revision |
+| 보조 | ASSISC | Assistance |
+| 보조금 | SBSIDY | Subsidy |
+| 복개 | COVE | Cover |
+| 복토 | CWTH | Covering With Soil |
+| 본류 | MI_RV | Main River |
+| 본번 | MNO | Main Number |
+| 부검 | ATPSY | Autopsy |
+| 부과 | LEVY | Levy |
+| 부과금 | LVYAMT | Levy  Amount |
+| 부기 | BUKIP | Bookkeeping |
+| 부담금 | ALOTM | Allotment |
+| 부번 | SNO | Sub Number |
+| 부산물 | BYPRD | By-Product |
+| 부서 | DEPT | Department |
+| 부숙화 | DECPZ | Decomposed  ~Ize |
+| 부적합 | IMPPRTY | Impropriety |
+| 부착 | ASN | Adhesion |
+| 부품 | CMPNT | Components |
+| 부하량 | LOADQTY | Load Quantity |
+| 분과 | DIVSN | Division |
+| 분뇨 | ENSO | Excreta, Night Soil |
+| 분류 | CL | Classification |
+| 분류군 | TAXON | Taxon |
+| 분리막 | SPRTMBR | Separation Membrane |
+| 분배 | DTRBT | Distribution |
+| 분배조 | DTRBT_TANK | Distribution Tank |
+| 분야 | RLM | Realm |
+| 분원성 | FECL | Fecal |
+| 분원성대장균군 | FCOLI | Fecal Coliform |
+| 분원성연쇄상구균 | FCSTRCCI | Fecal Streptococci |
+| 분할 | PRTIN | Partition |
+| 비밀번호 | PSWD | Password |
+| 비상 | EMGNY | Emergency |
+| 비정상 | ABNRM | Abnormality |
+| 사양 | SPECS | Specification |
+| 사업비 | WCT | Working Cost |
+| 사업장 | BPLC | Business Place |
+| 사여과지 | SAND_ FILTR | Sand Filter |
+| 사용 | USE | Use |
+| 사용가능 | USABLE | Usable |
+| 사용권 | RIOUS | Right Of Using |
+| 사용량 | USG | USAGE |
+| 사용자 | USER | User |
+| 사위 | FDG | Four Directions Girth |
+| 사유 | RESN | Reason |
+| 사이클 | CYCLE | Cycle |
+| 사이트 | SITE | Site |
+| 사진 | PHOT | Photograph |
+| 사항 | MATTR | Matter |
+| 사후 | AFTFAT | After Fact |
+| 삭제 | DEL | Deletion |
+| 산기관 | DFS | Diffuser |
+| 산업 | INDUST | Industrial |
+| 산화환원전위 | ORP | Oxidation Reduction Potential |
+| 살모넬라 | SLMN | Salmonella |
+| 삼원촉매장치 | TWCTLC | Three Way Catalytic Converter |
+| 상세 | DTL | Details |
+| 상세주소 | DADDR | Detailed Address |
+| 상수 | WT | Water |
+| 상업지역 | CMCL_ARA | Commercial Area |
+| 상태 | STUS | Status |
+| 상품 | GDS | Goods |
+| 상향류 | UFW | Upflow |
+| 상호 | CONM | Company Name |
+| 색도 | CRMTY | Chromaticity |
+| 생략 | OMS | Omission |
+| 생물 | LVB | Living Being |
+| 생물반응조 | BIRAT | Bioreactor  |
+| 생물서식처 | ORGNHBT | Organism Habitat |
+| 생물종 | BISP | Biological Species |
+| 생성 | CRT | Creation |
+| 생슬러지 | RSLG | Raw Sludge |
+| 생태 | ECLGY | Ecology |
+| 생태독성 |  ECTOX | ecotoxicity |
+| 서류 | PAPE | Papers |
+| 서명 | SIGN | Signing |
+| 서버 | SRVR | Server |
+| 서비스 | SRVC | Service |
+| 설계 | DESGN | Design |
+| 설계용량 | DESGN_CPCT | Design Capacity |
+| 설립 | FNDN | Foundation |
+| 설정 | STNG | Setting |
+| 설치 | INSTL | Installation |
+| 성격 | CHTR | Character |
+| 성공 | SCS | Success |
+| 성능 | PRFMNC | Performance |
+| 성능검사 | EFTST | Efficiency Test |
+| 성적서 | SCRRP | Score Report |
+| 세균 | BCLS | Bacillus |
+| 세목 | FB | Fine bar |
+| 세부 | DETAIL | Detail |
+| 세정 | WS | Washing |
+| 세정제 | CNML | Cleaning Material |
+| 소 | SML | Small |
+| 소독 | DSNF | Disinfection |
+| 소독제 | DSINF | Disinfectant |
+| 소분류 | SCLAS | Small Classification |
+| 소수점 | DCPT | Decimal Point |
+| 소요 | REQ | Required |
+| 소유 | OWN | Own |
+| 소유역 | SBASIN | Sub Basin |
+| 소재지 | PLAC | Place Of Location |
+| 소포 | ATFM | Antifoaming |
+| 소포수 | FBW | Foam Breaking Water |
+| 소포제 | ANAG | Antifoaming Agent |
+| 송부 | SENDNG | Sending |
+| 송신 | SNDM | Send Message |
+| 송풍기 | BLW | Blower |
+| 수 | CNT | Count |
+| 수거 | TKAWY | Take Away |
+| 수계 | WWBH | Watershed, Water Basin, Hydrosphere |
+| 수동 | HOPR | Hand Operation |
+| 수리학적 체류시간 | HRT | Hydraulic Retention Time |
+| 수문 | Gate | Gate |
+| 수산화나트륨 | SOHY | Sodium Hydroxide |
+| 수소이온 | HION | Hydrogen Ion |
+| 수신 | RCPTN | Reception |
+| 수용가 | RCPTR | Receptor |
+| 수위 | WAL | Water Level |
+| 수정 | MDFCN | Modification |
+| 수정자 | MDFR | Modifier |
+| 수제 | SPRDIKE | Superdike |
+| 수조 | Tank | Tank |
+| 수질 | QTWT | Quality Of Water |
+| 수질개선 | WTRQLIMP | Water Quality Improvement |
+| 수질기준 | WQST | Water Quality Standards |
+| 수질배출정보 | WTDI | Water Discharge Information |
+| 수집 | CLCT | Collection |
+| 순환 | CCL | Cycling |
+| 쉬겔라 | SHIGLA | Shigella |
+| 스컴 | SCM | Scum |
+| 스크린 | SCR | Screen |
+| 슬러지 | SLG | Sludge |
+| 슬러지 밀도지수 | SDI | sludge density index |
+| 슬러지 용량 지표 | SVI | Sludge Volume Index |
+| 습지 | WTLN | Wetland |
+| 승인 | APRV | Approval |
+| 승인권 | APPRVRGT | Right Of Approval |
+| 시각 | TIME | Time |
+| 시간 | HR | Hour |
+| 시군구 | SGG | Si/Gun/Gu |
+| 시나리오 | SCEN | Scenario |
+| 시도 | CTPV | Cities And Provinces |
+| 시료 | SMPL | Sample |
+| 시설 | FCLT | Facility |
+| 시설면적 | FCAR | Facility Area |
+| 시설물 | FCLTS | Facilities |
+| 시스템 | SYS | System |
+| 시안 | CYN | Cyaan |
+| 시운전 | TSTRN | Test Run |
+| 시작 | BGNG | Beginning |
+| 시점 | PTM | Point Time |
+| 시행 | ENFC | Enforcement |
+| 시험 | TEST | Test |
+| 신고 | DCLR | Declaration |
+| 신고자 | DCL | Declarer |
+| 신규 | NEW | New |
+| 신기술 | NTCH | New Technology |
+| 신뢰 | CNFDNC | Confidence |
+| 신뢰성 | CRDIBLTY | Credibility |
+| 실시 | OPRT | Operation |
+| 실적 | ACRS | Actual Result |
+| 실행 | EXCN | Execution |
+| 심사 | SRNG | Screening |
+| 심의 | DLBR | Deliberation |
+| 아황산환원혐기성포자형성균 | SFSRA | Spore Forming Sulfite Reducing Anaerobes |
+| 안정화 | STBLZT | Stabilization |
+| 암롤박스(컨테이너) | ARTCT | Arm roll type container |
+| 암모니아성질소 | NHN | Ammonia Nitrogen |
+| 압력 | PRESSR | Pressure |
+| 압송 | PUMPNG | Pumping |
+| 압축 | CMPRS | Compress |
+| 액비 | LQFERTLZ | Liquid Fertilizer |
+| 액상 | LIQD | Liquid |
+| 약 | GENTLE | Gentle |
+| 약품 | CMC | Chemical |
+| 약품비 | MEDFEE | Medicine Fee |
+| 약품사용 | USMD | Use  Medicines |
+| 업로드 | UPLD | Upload |
+| 업무 | DTY | Duty |
+| 없음 | NOT | Nothing |
+| 에너지 | ENR | Energy |
+| 에틸벤젠 | ETBNZN | Ethylbenzene |
+| 여과 | FILTR | Filteration |
+| 여과수 | FTWT | Filtered Water |
+| 여과재 | FTMTRL | Filter Material |
+| 여과형 | FILTRFOM | Filter Form |
+| 여부 | YN | Yes or No |
+| 여시니아균 | YERSNA | Yersinia |
+| 역률 | PWRER_FCT | Power Factor |
+| 역세척 | BWS | Back Wash |
+| 연결 | CONN | Connection |
+| 연계 | LINK | Link |
+| 연도 | YR | Year |
+| 연락 | CNTC | Contact |
+| 연령 | AGE | Age |
+| 연료화 | FUELZ | Fuelize |
+| 연월 | YM | Year and Month |
+| 염소 | CLRN | Chlorine |
+| 염소소독 | CHDI | Chlorine Disinfection |
+| 염소이온 | CLION | Chlorine Ion |
+| 염화제이철 | IRCLD | Iron(III) Chloride |
+| 예보 | FRCST | Forecast |
+| 예비 | PRPT | Preparation |
+| 예산 | BGT | Budget |
+| 예상 | EXPCT | Expectation |
+| 예약 | RSVT | Reservation |
+| 예외 | EXCPT | Exception |
+| 예정 | PRNG | Prearrangement |
+| 예찰 | PRDICT | Prediction |
+| 오류 | ERR | Error |
+| 오수받이 | HUS_INL | House Inlet |
+| 오염물질 | CNTMN | Contaminant |
+| 오염원 | POLUSRC | Pollution Source |
+| 오존 | OZN | Ozone |
+| 오프로드 | OFFRD | Off Road |
+| 옥살산 | OXACID | Oxalic Acid |
+| 와류 | VORTEX | Vortex |
+| 와류형 | VORTXFOM | Vortex From |
+| 완결 | COMPLT | Completion |
+| 완료 | CMPTN | Completion |
+| 완전 | PRFECT | Perfection |
+| 요건 | REQSIT | Requisite |
+| 요막액 | ALLNTFLD | Allantoic Fluid |
+| 요청 | DMND | Demand |
+| 용량 | CPCT | Capacity |
+| 용역 | SERVC | Service |
+| 용존산소 | DO | Dissolved Oxygen |
+| 용해 | DSLV | Dissolving |
+| 우량 | EXLT | Excellent |
+| 우수 | ST | Storm  |
+| 우수받이 | STRT_INL | Street Inlet |
+| 우수토구 | STM_OVFL_MUT | Storm Overflow Mouth |
+| 우회 | BP | BY PASS |
+| 운반 | CNVY | Conveyance |
+| 운영 | OPER | Operation |
+| 운영비 | OPEXP | Operation Expense |
+| 운행 | OPRAT | Operation |
+| 원격 | RMRT | Rmrt |
+| 원격감시체계 | TMS | Tele Monitoring System |
+| 원료 | MTRAL | Material |
+| 원수 | ORGWT | Origin'S Water |
+| 원인자 | ORGPR | The Origin Person |
+| 월 | MM | Month |
+| 위도 | LAT | Latitude |
+| 위반 | CNTR | Contravene |
+| 위촉 | ENTRST | Entrusting |
+| 위치 | LOC | Location |
+| 위탁 | CNSG | Consign |
+| 위탁자 | CONSGNR | Consignor |
+| 유기인 | ORGP | Organic Phosphorus |
+| 유량 | FLUX | Flux |
+| 유량조정조 | EQLZT__TANK | Equalization Tank |
+| 유입 | INFlOW | Inflow |
+| 유입수 | INFWTR | Influent Water |
+| 유주 | SWARMG | Swarming |
+| 유지 | MNTNC | Maintenance |
+| 유지용수공급 | MWRS | Maintenance Water Requirement Supply |
+| 유체 | FLUID | Fluid |
+| 유출 | EFFLUX | Efflux |
+| 유충 | LAVL | Larval |
+| 유형 | TY | Type |
+| 유효 | VLD | Validity |
+| 음용 | DKPS | For Drinking Purpose |
+| 읍면동 | EMD | Eup/Myun/Dong |
+| 응답 | RSPNS | Response |
+| 응집제 | COAG | Cohesive Agents |
+| 이관 | TRNSF | Transfer |
+| 이동 | MVMN | Movement |
+| 이력 | HST | History |
+| 이메일 | EML | Email |
+| 이상 | ABOVE | Above |
+| 이송 | TRSF | Transfer |
+| 이의 | OBJC | Objection |
+| 이차 | SCDR | Secondary |
+| 이차침전지 | SCDR_SDMT_TANK | Secondary Sedimaentation |
+| 이행 | MIG | Migratation |
+| 인건비 | PEXP | Personnel Expenses{Expenditure] |
+| 인계 | HNDVR | Handover |
+| 인계서 | HDOVDC | Handover Document |
+| 인구 | POPL | Population |
+| 인산 | PHACID | Phosphoric Acid |
+| 인산염인 | POP | phosphate |
+| 인양기 | LFT | Lifter |
+| 인원수 | NOPE | The Number of Persons |
+| 인증 | CERT | Certification |
+| 인처리 | PPRCS | Phosphorus  Process |
+| 인허가 | APVL | Approval |
+| 일 | DY | Day |
+| 일련번호 | SN | Serial Number |
+| 일반 | GNRL | General |
+| 일별 | DALY | Daily |
+| 일시 | DT | Date and Time |
+| 일자 | YMD | YEAR Month Day |
+| 일지 | DIARY | Diary |
+| 일차 | PRM | Primary |
+| 일차침전지 | PST_SDMT_TANK | Primary Sedimentation Tank |
+| 일평균 | DYRG | Day Average |
+| 임시 | TMPR | Temporary |
+| 임의 | RNDM | Random |
+| 입고 | WRHS | Warehousing |
+| 입력 | INPT | Input |
+| 잉여 | SPS | Surplus |
+| 잉여슬러지 | EC_SLG | Excess Sludge |
+| 자 | MAN | Man |
+| 자갈 | GRAVEL | Gravel |
+| 자료 | DATA | Data |
+| 자리 | DIGIT | Digit |
+| 자립화 | SLFRLI | Self Reliance |
+| 자연형 | NATRLFOM | Natural Form |
+| 자외선 | URLI | Ultraviolet Rays, Light |
+| 자재 | MTRIL | Material |
+| 자체 | ITSL | Itself |
+| 작성 | WRT | Writing |
+| 작업 | JOB | Job |
+| 잠금 | LOCK | Lock |
+| 장기 | LNGTR | Long Term |
+| 장소 | PLCE | Place |
+| 장착 | MNTNG | Mounting |
+| 재 | RE | Re |
+| 재이용 | REUSE | Reuse |
+| 재이용수 |   | Reuse Water |
+| 재활용 | RUSE | Reuse |
+| 저감 | REDUC | Reduction |
+| 저류조 | DTT_TANK | Detention Tank |
+| 저온 | LOWTMP | Low Temperature |
+| 저장 | STRG | Storage |
+| 저장소 | STORGE | Storage |
+| 적발 | DSCL | Disclose |
+| 적산 | ADD | Addition |
+| 적용 | APLCN | Application |
+| 적합 | STBLT | Suitability |
+| 전기 | ELCTY | Electricity |
+| 전기료 | ELFEE | Electricity Fee |
+| 전력 | PWRER | Power |
+| 전문 | SPCY | Specially |
+| 전산 | CMPUTT | Computation |
+| 전송 | TRSM | Transmission |
+| 전압 | VLTGE | Voltage |
+| 전용 | EXUSE | Exclusive Use |
+| 전원 | SELCT | Source Of Electricity |
+| 전처리 | PRETR | Pretreatment |
+| 점검 | CHCK | Check |
+| 접속 | CNTN | Connection |
+| 정밀 | PRCIS | Precision |
+| 정보 | INFO | Information |
+| 정산 | CLCLN | Calculation |
+| 정상 | NRMLT | Normality |
+| 정수장 | WPPW | Water Purification Plant, Waterworks |
+| 정제 | REFINE | Refining |
+| 정지 | STP | Stop |
+| 제거 | RMV | Removal |
+| 제수변 | SL_VALVE | Sluice Valve |
+| 제작 | MNFCT | Manufacture |
+| 제조사 | MKR | Maker |
+| 제출 | SBMSN | Submission |
+| 제한 | LIMT | Limitation |
+| 조류 | ALG | Algae |
+| 조목 | CSB | Coarse Bar |
+| 조사 | EXMN | Examination |
+| 조성 | MAKE | Make |
+| 조정 | EQLT | Equalization |
+| 조치 | ACTN | Action |
+| 조회 | INQ | Inquiry |
+| 존재 | EXST | Existence |
+| 종결 | TRMN | Termination |
+| 종균제 | MICBA | Microbial Agent |
+| 종료 | END | End |
+| 종류 | KND | Kind |
+| 종목 | IEM | Item |
+| 종별 | ASORT | Assortment |
+| 종사자 | ENFSN | Enfilade Person |
+| 종점 | TMNL | Terminal |
+| 좌표 | COOR | Coordinate |
+| 주간 | WIK | Week |
+| 주변 | CFR | Circumference |
+| 주소 | ADDR | Address |
+| 주입 | IJTN | Injection |
+| 주파수 | FQNC | Frequency |
+| 준공 | CMCN | Completion Of Construction |
+| 중권역 | MDSTRC | Medium District |
+| 중복 | DPCN | Duplication |
+| 중분류 | MLSFC | Middle Classification |
+| 중온 | MESPH | Mesophilic |
+| 중첩 | RETRTN | Reiteration |
+| 중화설비 | NUTEQP | Neutralization Equipment |
+| 중화제 | CNTAG | Counteragent |
+| 증가 | INCRS | Increase |
+| 지도점검표사본 | CITBMR | Copy of Instruction Checklist  |
+| 지방자치단체 | LGOV | Local Governments |
+| 지번 | LOTNO | Lot Number |
+| 지상 | GRND | Ground |
+| 지역 | ARA | Area |
+| 지질 | NTRFS | Nature Of Soil |
+| 지질도 | GEOMAP | Geological Map |
+| 지하 | UDGD | Underground |
+| 지하수 | GROU | Groundwater |
+| 지형 | TPGRPH | Topography |
+| 진공 | VCM | Vacuum |
+| 진단 | DGNSS | Diagnosis |
+| 진동 | VIBRAT | Vibration |
+| 진행 | PRGRE | Progress |
+| 질산 | NIACID | Nitric Acid. |
+| 질산성질소 | NO3N | Nitrate Nitrogen |
+| 집계 | TOT | Total |
+| 집계구 | SUMDST | Summation District |
+| 집행 | IMPL | Implementation |
+| 찌꺼기 | LEES | Lees |
+| 차아염소산 | NAOCL | Hypochlorous Acid |
+| 차집 | ITCT | Intercepting |
+| 착공 | BGNCST | Begin Construction |
+| 채수 | SAMWT | Sampling Of Water |
+| 채수기 | WTRSMPLR | Water Sampler |
+| 채수병 | WTRBOTL | Water Bottle |
+| 처리 | PRCS | Process |
+| 처리비 | PSSFEE | Process  Fee |
+| 처리수 | TRT_WT | Treated Water |
+| 처리수조 | TRT_WT_TANK | Treated Water Tank |
+| 처리시설 | TRTMTFCLT | Treatment Facility |
+| 처리자 | PRCR | Processor |
+| 처분 | DSPS | Disposition |
+| 철염 | FESLT | Ferric Salt |
+| 첨부 | ATCH | Attachment |
+| 첨부파일 | ATFI | Attachment File |
+| 초과 | EXCS | Excess |
+| 초기화 | INITL | Initialization |
+| 촉매 | CTLY | Catalyst |
+| 총계 | TSM | Summation |
+| 총대장균군 | TCOLFGRP | Total Coliform Group |
+| 총량 | TQT | Total Quantity |
+| 총면적 | GFA | Gross Floor Area |
+| 총사업비 | TPCO | Total Project Cost |
+| 총인구 | TPOPLTN | Total Population |
+| 총인처리시설 | TPFCT | Total Phosphorus facility |
+| 최근 | RCNT | Recent |
+| 최대값 | MAXV | Maximum Value |
+| 최소값 | MINV | Minimum Value |
+| 최적 | BMTB | Being The Most Suitable |
+| 최종 | LAST | Last |
+| 최초 | FRST | First |
+| 추출 | EXTR | Extraction |
+| 추출정보 | EXTRINFO | Extraction Information |
+| 축 | AXS | Axis |
+| 출력 | OTPT | Output |
+| 출발 | LVE | Leave |
+| 충전기 | CHRGR | Charger |
+| 취득 | ACQS | Acquisition |
+| 취소 | RTRCN | Retraction |
+| 측정 | MSUR | Measurement |
+| 측정기 | MSRR | Measurement Instrument |
+| 측정소 | MSRSTN | Measurement Station |
+| 침사지 | GTCB | Grit Chamber |
+| 침전 | SDMT | Sediment |
+| 침전지 | SDMT_TANK | sedimentation tank |
+| 컨베이어 | CVY | Conveyor |
+| 컬럼 | COL | Column |
+| 코드 | CD | Code |
+| 크기 | SZ | Size |
+| 크실렌 | XYLEN | Xylene |
+| 탄화 | CARB | Carbonization |
+| 탈거 | CRYOFF | Carry Off |
+| 탈리액 | SPNT | Supernatant |
+| 탈수 | DWTR | Dewatering |
+| 탈수기 | DEHYM | Dehydration  Machine |
+| 탈질 | DNTFCT | Denitrificatio |
+| 탈취 | DODRZ | Deodorization |
+| 탈취기 | DEODRZ | Deodorizer |
+| 탈취제 | DEODR | Deodorant |
+| 탈황제 | DSLFA | Desulfurizing  Agent |
+| 터널형 | YUNLTP | Tunnel Type |
+| 테이블 | TBL | Table |
+| 토구 | OTFL | Outfall |
+| 토지 | LAD | Land |
+| 토지면적 | LDAR | Land Area |
+| 통계 | STATS | Statistics |
+| 통보 | NTFCTN | Notification |
+| 통신 | COMM | Communication |
+| 통지 | AVTSMT | Avertissement |
+| 통합 | UNTY | Unity |
+| 특성 | CHRT | Character |
+| 특수 | SPECL | Special |
+| 특정유해물질 | SHCH | Specified Hazardous Chemicals |
+| 파일 | FILE | File |
+| 판정 | JGMT | Judgement |
+| 펌프 | PUMP | Pump |
+| 펌프장 | PUMP_STT | Pump Station |
+| 페놀 | PHNL | Phenol |
+| 평가 | EVL | Evaluation |
+| 폐기 | DSCD | Discard |
+| 폐기물 | WSTE | Waste |
+| 폐쇄 | CLSG | Closing |
+| 폐수 | WAWA | Waste Water |
+| 폐수처리 | WSWT | Wastewater Treatment |
+| 폐열 | WASTHET | Waste Heat |
+| 포기 | ARTN | Aeration |
+| 포트 | PORT | Port |
+| 폭기조 | ARTN_TANK | Aeration Tank |
+| 폴리머 | PLYMR | Polymer |
+| 폴리철 | FRRCSU | Ferric Sulfate |
+| 표고 | AL | Altitude |
+| 표기 | MARK | Mark |
+| 표시 | INDCT | Indication |
+| 표준 | STD | Standard |
+| 표출 | EPRSS | Expression |
+| 플래그 | FLAG | Flag |
+| 필드 | FILD | Field |
+| 필수 | ESNTL | Essential |
+| 필증 | CERFIN | Certificate Of Finishing |
+| 필터 | FLTER | Filter |
+| 하수 | SWGE | Sewage |
+| 하수도 | DRNGSYS | Drainage System |
+| 하수미처리 | SEWGUNTTM | Un Sewage Treatment |
+| 하수처리 | SEWGTRTM | Sewage Treatment |
+| 하수처리수 | STWTR | Sewage Treatment Water |
+| 하위 | LOWR | Lower |
+| 하향류 | DWFW | Downflow |
+| 할인 | DSCNT | Discount |
+| 함수율 | MISTR_CTNT | Moisture content |
+| 합계 | SMM | Summation |
+| 해당 | RLVT | Relevant |
+| 해석 | INTRPRTT | Interpretation |
+| 해양투기 | OCDU | Ocean Dumping |
+| 행망 | ADMNW | Administration Network |
+| 행정 | ADMN | Administration |
+| 행정구역 | ADMI | Administrative District |
+| 행정동 | DONG | Dong (Administrative District)  |
+| 허가 | PRMSN | Permission |
+| 허용 | PERM | Permission |
+| 현상 | PHNMN | Phenomenon |
+| 혐기 | AARB | Anaerobic |
+| 혐기조 | AARB_TANK | Anaerobic tank |
+| 협잡물 | CCMT | Concomitant |
+| 형태 | SHAP | Shape |
+| 호기 | ARB | Aerobic |
+| 호기조 | ARB_TANK | Aerobic Tank |
+| 호소수 | LMSHWT | Lake  And  Marsh   Water |
+| 호수 | LKE | Lake |
+| 호안 | RVTMNT | Revetment |
+| 호이스트 | HIST | Hoist |
+| 혼합 | CMPN | Compound |
+| 혼합액현탁고형물 | MLSS | Mixed liquor suspended solids |
+| 혼화지 | MXG_TNAK | Mixing tank |
+| 홈페이지 | HMPG | Homepage |
+| 홍수 | FLOOD | Flood |
+| 확인 | IDNTY | Identify |
+| 확인서 | CNFRMN | Confirmation |
+| 확인자 | IDFR | Identifier |
+| 확장자 | EXTN | Extension |
+| 확정 | CFMTN | Confirmation |
+| 환경 | ENVR | Environment |
+| 환경기초시설 | ENINF | Environmental Infrastructure |
+| 환원 | RSTORE | Restoration |
+| 활성탄 | AC | Activated Carbon |
+| 활성화 | PRMT | Promote/Facilitate |
+| 활용 | PRUS | Practical Use |
+| 황산 | ECCBT | Encyclopaedia Britannica (H2So4) |
+| 회사 | CO | Company |
+| 회수 | RTRVL | Retrieval |
+| 회신 | RPLY | Reply |
+| 효율 | EFC | Efficiency |
+| 효율성 | EFFCTV | Effectiveness |
+| 휴대 | MBL | Mobile |
+| 흡수정 | EXTTW | Extraction Well |
+| 흡착 | ADST | Adsorption |

apps/cs/package.json

@@ -52,7 +52,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/cs/src/entities/auth/lib/auth-wrapper.tsx

@@ -1,18 +1,24 @@
 "use client";
 
 import { useEffect } from "react";
-import { useRouter } from "next/navigation";
 import { client } from "@/shared/api";
 import type { IUserInfo } from "@/shared/store";
 import { getCookie, useUserStore } from "@/shared/lib";
-import { ENDPOINT, AUTH_USER_ID } from "@/shared/config";
-import { LoginApi } from "../api/login-service";
+import { isAtLoginRedirectUrl } from "@common/network";
+import {
+  ENDPOINT,
+  AUTH_USER_ID,
+  AUTH_LOGIN_REDIRECT_URL,
+} from "@/shared/config";
 
 const AuthWrapper = ({ children }: { children: React.ReactNode }) => {
-  const router = useRouter();
   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");
@@ -30,14 +36,9 @@ 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);
-          router.push("/auth/login");
+        setUserInfo(null);
+        if (!isAtLoginRedirectUrl(AUTH_LOGIN_REDIRECT_URL)) {
+          window.location.assign(AUTH_LOGIN_REDIRECT_URL);
         }
       }
     })();

apps/cs/src/entities/link/model/link-interface.ts

@@ -118,7 +118,7 @@ export const linkFormSchema = z.object({
     last_link_rslt_cd: z.string().max(4).nullable().optional(),
     last_link_excn_dt: z.string().max(40).nullable().optional(),
     next_link_excn_dt: z.string().max(40).nullable().optional(),
-    last_link_err_cd: z.string().max(10).nullable().optional(),
+    last_link_err_cd: z.string().max(50, { message: '마지막 연계 오류 코드는 50자 이하입니다.' }).nullable().optional(),
     mdfcn_dt: z.string().nullable().optional(),
     mdfr_id: z.string().nullable().optional(),
     link_cycle_mi: z.coerce.number().nullable().optional().refine((val) => {

apps/cs/src/pages/admin/ui/add-admin-dialog.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import {
   keepPreviousData,
   useQuery,
@@ -75,7 +75,7 @@ function AddAdminDialog() {
   });
 
   const query = useQuery({
-    queryKey: [ENDPOINT.USER_SERVICE.USERS, pagination, "normal-user"],
+    queryKey: [ENDPOINT.USER_SERVICE.USERS, "findPageUser", pagination],
     queryFn: () =>
       UserApi.findPageUser({
         ...userSearchQuery,
@@ -181,6 +181,21 @@ function AddAdminDialog() {
     query.refetch();
   };
 
+  useEffect(() => {
+    if (!open) {
+      setRowSelection({});
+      setSelectedGroupId("");
+      setUserSearchQuery({
+        keywordType: "userName",
+        keyword: "",
+      });
+      setPagination({ pageIndex: 0, pageSize: 10 });
+      queryClient.removeQueries({
+        queryKey: [ENDPOINT.USER_SERVICE.USERS, "findPageUser"],
+      });
+    }
+  }, [open]);
+
   return (
     <Dialog open={open} onOpenChange={setOpen}>
       <DialogTrigger asChild>

apps/cs/src/pages/board-statistics/api/board-statistics-service.ts

@@ -1,53 +1,22 @@
-// import { client } from "@/shared/api";
-// import { ENDPOINT } from "@/shared/config";
+import { client } from "@/shared/api";
+import { ENDPOINT } from "@/shared/config";
 import {
   type BoardStatisticsParams,
   type BoardStatistics,
   type BoardStatisticsService,
 } from "../model/board-statistics-interface";
 
-// 임시 모의 데이터
-const mockBoardStatisticsData: BoardStatistics = {
-  totalPosts: 2456,
-  totalComments: 156,
-  averageRating: 4.2,
-  totalViews: 45678,
-  dayList: [
-    { date: "1월", posts: 10, comments: 5, views: 800 },
-    { date: "2월", posts: 15, comments: 8, views: 1200 },
-    { date: "3월", posts: 12, comments: 10, views: 1000 },
-    { date: "4월", posts: 18, comments: 15, views: 1500 },
-    { date: "5월", posts: 22, comments: 20, views: 1800 },
-    { date: "6월", posts: 20, comments: 18, views: 1600 },
-    { date: "7월", posts: 25, comments: 22, views: 2000 },
-  ],
-  boardList: [
-    { boardType: "notice", boardName: "공지사항", count: 45 },
-    { boardType: "faq", boardName: "FAQ", count: 120 },
-    { boardType: "qna", boardName: "Q&A", count: 180 },
-    { boardType: "free", boardName: "자유게시판", count: 95 },
-  ],
-  statusList: [
-    { status: "completed", statusName: "답변완료", count: 75 },
-    { status: "waiting", statusName: "답변대기", count: 25 },
-  ],
-};
-
 class BoardStatisticsApiService implements BoardStatisticsService {
   async getBoardStatistics(
     params: BoardStatisticsParams,
   ): Promise<BoardStatistics> {
-    console.log("params: ", params);
     try {
       // 실제 API 연동 시 아래 코드 사용
-      // const response = await client.get<BoardStatistics>(
-      //   `${ENDPOINT.CMS_SERVICE.BOARD_STATISTICS}`,
-      //   { params },
-      // );
-      // return response.data;
-
-      // 임시 모의 데이터 반환
-      return Promise.resolve(mockBoardStatisticsData);
+      const response = await client.get<BoardStatistics>(
+        `${ENDPOINT.BOARD_SERVICE.STATISTICS}`,
+        { params },
+      );
+      return response.data;
     } catch (error) {
       console.error("게시판 통계 데이터 조회 실패:", error);
       throw error;

apps/cs/src/pages/board-statistics/model/board-statistics-interface.ts

@@ -12,32 +12,36 @@ export interface BoardStatisticsParams extends PageableParams {
 }
 
 export interface BoardStatistics {
-  totalPosts: number;
-  totalComments: number;
-  averageRating: number;
-  totalViews: number;
-  dayList: DayStatistics[];
-  boardList: BoardTypeStatistics[];
-  statusList: StatusStatistics[];
+  bbsTotalDto: BbsTotalDto; // 게시판 전체 통계
+  pstAnsList: PstAnswerStatistics[]; // 게시물 답변 상태별 통계 목록
+  bbsDailyList: BbsDailyStatistics[]; // 게시판 일별 통계 목록
+  bbsPstCntList: BbsPostCountStatistics[]; // 게시판별 게시물 건수 통계 목록
 }
 
-interface DayStatistics {
-  date: string;
-  posts: number;
-  comments: number;
-  views: number;
+interface BbsTotalDto {
+  pstInqCnt: number; // 게시물 조회 건수
+  pstEvlAvg: number; // 게시물 평가 평균
+  pstTotCnt: number; // 게시물 총 건수
+  pstAnsWaitCnt: number; // 게시물 답변 대기 건수
 }
 
-interface BoardTypeStatistics {
-  boardType: string;
-  boardName: string;
-  count: number;
+interface PstAnswerStatistics {
+  answerNm: string; // 답변 명
+  answerYn: string; // 답변 여부 (Y/N)
+  ansCnt: number; // 답변 건수
 }
 
-interface StatusStatistics {
-  status: string;
-  statusName: string;
-  count: number;
+interface BbsDailyStatistics {
+  dayYmd: string; // 일자 (YYYY-MM-DD)
+  pstInqCnt: number; // 게시물 조회 건수
+  pstCmntCnt: number; // 게시물 댓글 건수
+  pstNewCnt: number; // 게시물 신규 건수
+}
+
+interface BbsPostCountStatistics {
+  bbsId: number; // 게시판 ID
+  bbsNm: string; // 게시판 명
+  pstCnt: number; // 게시물 건수
 }
 
 export interface BoardStatisticsService {

apps/cs/src/pages/board-statistics/model/chart-data.ts

@@ -11,20 +11,20 @@ export const chartData = {
   } => {
     return {
       data: {
-        labels: data.dayList.map((item) => item.date),
+        labels: data.bbsDailyList.map((item) => item.dayYmd),
         datasets: [
           {
             type: "line",
             label: "신규게시물",
-            data: data.dayList.map((item) => item.posts),
+            data: data.bbsDailyList.map((item) => item.pstNewCnt),
             borderColor: getCssVariableValue("--chart-1"),
             backgroundColor: "rgba(59, 130, 246, 0.1)",
             tension: 0.4,
           },
           {
             type: "line",
-            label: "답변대기",
-            data: data.dayList.map((item) => item.comments),
+            label: "댓글수",
+            data: data.bbsDailyList.map((item) => item.pstCmntCnt),
             borderColor: getCssVariableValue("--chart-2"),
             backgroundColor: "rgba(236, 72, 153, 0.1)",
             tension: 0.4,
@@ -32,11 +32,10 @@ export const chartData = {
           {
             type: "line",
             label: "조회수",
-            data: data.dayList.map((item) => item.views),
+            data: data.bbsDailyList.map((item) => item.pstInqCnt),
             borderColor: getCssVariableValue("--chart-3"),
             backgroundColor: "rgba(168, 85, 247, 0.1)",
             tension: 0.4,
-            hidden: true,
           },
         ],
       },
@@ -67,13 +66,13 @@ export const chartData = {
   } => {
     return {
       data: {
-        labels: data.boardList.map((item) => item.boardName),
+        labels: data.bbsPstCntList.map((item) => item.bbsNm),
         datasets: [
           {
             type: "bar",
             label: "게시판별 분포",
-            data: data.boardList.map((item) => item.count),
-            backgroundColor: data.boardList.map((_, index) =>
+            data: data.bbsPstCntList.map((item) => item.pstCnt),
+            backgroundColor: data.bbsPstCntList.map((_, index) =>
               getCssVariableValue(`--chart-${(index % 5) + 1}`),
             ),
           },
@@ -106,12 +105,12 @@ export const chartData = {
   } => {
     return {
       data: {
-        labels: data.statusList.map((item) => item.statusName),
+        labels: data.pstAnsList.map((item) => item.answerNm),
         datasets: [
           {
             type: "doughnut",
-            data: data.statusList.map((item) => item.count),
-            backgroundColor: data.statusList.map((_, index) =>
+            data: data.pstAnsList.map((item) => item.ansCnt),
+            backgroundColor: data.pstAnsList.map((_, index) =>
               getCssVariableValue(`--chart-${(index % 5) + 1}`),
             ),
           },

apps/cs/src/pages/board-statistics/ui/board-statistics-page.tsx

@@ -26,7 +26,7 @@ import {
   SelectValue,
 } from "@common/components";
 import { SiteSelect } from "@/entities/site";
-// import { ENDPOINT } from "@/shared/config";
+import { ENDPOINT } from "@/shared/config";
 import { NoData } from "@/shared/ui/no-data";
 import { InputDateRangePicker } from "@/shared/ui/input-date-range-picker";
 import { BoardStatisticsApi } from "../api/board-statistics-service";
@@ -66,7 +66,7 @@ function BoardStatisticsPage() {
   });
 
   const { data: boardStatisticsData } = useQuery({
-    queryKey: ["board-statistics", searchParams],
+    queryKey: [ENDPOINT.BOARD_SERVICE.STATISTICS, searchParams],
     queryFn: () =>
       BoardStatisticsApi.getBoardStatistics({
         ...searchParams,
@@ -176,7 +176,8 @@ function BoardStatisticsPage() {
             <h3 className="text-lg font-medium text-gray-500">총 게시물</h3>
             <div className="flex items-center justify-between">
               <div className="mt-2 text-4xl font-bold">
-                {boardStatisticsData?.totalPosts.toLocaleString() || 0}
+                {boardStatisticsData?.bbsTotalDto?.pstTotCnt?.toLocaleString() ||
+                  0}
               </div>
               <div className="h-16 w-24">
                 <Line
@@ -210,7 +211,8 @@ function BoardStatisticsPage() {
             <h3 className="text-lg font-medium text-gray-500">답변대기</h3>
             <div className="flex items-center justify-between">
               <div className="mt-2 text-4xl font-bold">
-                {boardStatisticsData?.totalComments.toLocaleString() || 0}
+                {boardStatisticsData?.bbsTotalDto?.pstAnsWaitCnt?.toLocaleString() ||
+                  0}
               </div>
               <div className="h-16 w-24">
                 <Line
@@ -244,7 +246,7 @@ function BoardStatisticsPage() {
             <h3 className="text-lg font-medium text-gray-500">평균평점</h3>
             <div className="flex items-center justify-between">
               <div className="mt-2 text-4xl font-bold">
-                {boardStatisticsData?.averageRating.toFixed(1) || 0}
+                {boardStatisticsData?.bbsTotalDto?.pstEvlAvg?.toFixed(1) || 0}
               </div>
               <div className="h-16 w-24">
                 <Line
@@ -278,7 +280,8 @@ function BoardStatisticsPage() {
             <h3 className="text-lg font-medium text-gray-500">총 조회수</h3>
             <div className="flex items-center justify-between">
               <div className="mt-2 text-4xl font-bold">
-                {boardStatisticsData?.totalViews.toLocaleString() || 0}
+                {boardStatisticsData?.bbsTotalDto?.pstInqCnt?.toLocaleString() ||
+                  0}
               </div>
               <div className="h-16 w-24">
                 <Line
@@ -315,7 +318,7 @@ function BoardStatisticsPage() {
             <h3 className="text-2xl font-medium">일별 게시물 현황</h3>
           </div>
           <div className="h-96 p-4">
-            {boardStatisticsData?.dayList?.length ? (
+            {boardStatisticsData?.bbsDailyList?.length ? (
               <Line {...chartData.day(boardStatisticsData)} />
             ) : (
               <NoData />
@@ -329,7 +332,7 @@ function BoardStatisticsPage() {
               <h3 className="text-2xl font-medium">답변상태</h3>
             </div>
             <div className="h-96 p-4">
-              {boardStatisticsData?.statusList?.length ? (
+              {boardStatisticsData?.pstAnsList?.length ? (
                 <Doughnut {...chartData.status(boardStatisticsData)} />
               ) : (
                 <NoData />
@@ -342,7 +345,7 @@ function BoardStatisticsPage() {
               <h3 className="text-2xl font-medium">게시판별 분포</h3>
             </div>
             <div className="h-96 p-4">
-              {boardStatisticsData?.boardList?.length ? (
+              {boardStatisticsData?.bbsPstCntList?.length ? (
                 <Bar {...chartData.board(boardStatisticsData)} />
               ) : (
                 <NoData />

apps/cs/src/pages/code/ui/lwpocode-dialog.tsx

@@ -1,4 +1,4 @@
-import { memo } from "react";
+import { memo, useEffect } from "react";
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
@@ -140,6 +140,10 @@ const LwpoCodeManagementDialog = memo(
       }
     };
 
+    useEffect(() => {
+      if (!open) form.reset();
+    }, [open]);
+
     return (
       <Dialog open={open} onOpenChange={onOpenChange} {...props}>
         <DialogTrigger asChild>{children}</DialogTrigger>

apps/cs/src/pages/code/ui/upcode-dialog.tsx

@@ -1,4 +1,4 @@
-import { memo } from "react";
+import { memo, useEffect } from "react";
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useQuery } from "@tanstack/react-query";
@@ -96,6 +96,10 @@ const UpCodeManagementDialog = memo(
         if (await confirm(confirmMessage)) callback(data);
       };
 
+    useEffect(() => {
+      if (!open) form.reset();
+    }, [open]);
+
     return (
       <Dialog open={open} onOpenChange={onOpenChange} {...props}>
         <DialogTrigger asChild>{children}</DialogTrigger>

apps/cs/src/pages/dashboard/api/dashboard-service.ts

@@ -1,6 +1,13 @@
 import { client } from "@/shared/api";
 import { ENDPOINT } from "@/shared/config";
-import type { Dashboard, DashboardService } from "../model/dashboard-interface";
+import type {
+  Dashboard,
+  DashboardService,
+  NoticeUser,
+  Schedule,
+  ScheduleQueryParams,
+} from "../model/dashboard-interface";
+import type { PageableList } from "@/shared/model";
 
 export class DashboardApiService implements DashboardService {
   public async getDashboard(): Promise<Dashboard> {
@@ -9,6 +16,25 @@ export class DashboardApiService implements DashboardService {
     );
     return response.data;
   }
+
+  public async getNoticeUserList(
+    recvUnqId: string,
+  ): Promise<PageableList<NoticeUser>> {
+    const response = await client.get<PageableList<NoticeUser>>(
+      `${ENDPOINT.CMS_SERVICE.NOTICE_USER}/${recvUnqId}/list`,
+    );
+    return response.data;
+  }
+
+  public async getScheduleList(
+    params?: ScheduleQueryParams,
+  ): Promise<Schedule[]> {
+    const response = await client.get<Schedule[]>(
+      ENDPOINT.CMS_SERVICE.SCHEDULES,
+      { params },
+    );
+    return response.data;
+  }
 }
 
 export const DashboardApi = new DashboardApiService();

apps/cs/src/pages/dashboard/model/dashboard-interface.ts

@@ -1,3 +1,5 @@
+import type { PageableList } from "@/shared/model";
+
 export interface SiteStatisticsContent {
   siteId: string;
   siteNm: string;
@@ -27,6 +29,42 @@ export interface Dashboard {
   menuAccessList: MenuStatisticsContent[];
 }
 
+export interface NoticeUser {
+  notiId: number;
+  recvUnqId: string;
+  senderUnqId: string;
+  notiType: string;
+  notiTtl: string;
+  notReadYn: string;
+  regDt: string;
+}
+
+export interface Schedule {
+  schdlBgngDt: string;
+  schdlEndDt: string;
+  actualDate: string;
+  schdlSn: number;
+  siteId: string;
+  schdlTtl: string;
+  schdlSeCd: string;
+  schdlCn: string;
+  reptYn: string;
+  commSchdlYn: string;
+  atflCd: string | null;
+}
+
+export interface ScheduleQueryParams {
+  siteId?: string;
+  schdlTtl?: string;
+  schdlSeCd?: string;
+  schdlBgngYmd?: string;
+  schdlEndYmd?: string;
+  reptYn?: string;
+  commSchdlYn?: string;
+}
+
 export interface DashboardService {
   getDashboard(): Promise<Dashboard>;
+  getNoticeUserList(recvUnqId: string): Promise<PageableList<NoticeUser>>;
+  getScheduleList(params?: ScheduleQueryParams): Promise<Schedule[]>;
 }

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

@@ -1,5 +1,6 @@
 "use client";
 
+import dayjs from "dayjs";
 import { useRouter } from "next/navigation";
 import { useQuery } from "@tanstack/react-query";
 import { getCoreRowModel } from "@tanstack/react-table";
@@ -17,8 +18,8 @@ import {
 } from "chart.js";
 import { Bar, Line } from "react-chartjs-2";
 import { PostApi, type RecentPost } from "@/entities/post";
-import { ENDPOINT } from "@/shared/config";
-import { useDataTable } from "@/shared/lib";
+import { AUTH_USER_ID, ENDPOINT, SITE_ID } from "@/shared/config";
+import { getCookie, useDataTable } from "@/shared/lib";
 import { DashboardApi } from "../api/dashboard-service";
 import { chartData } from "../model/chart-data";
 import {
@@ -39,12 +40,44 @@ ChartJS.register(
 );
 
 function DashboardPage() {
+  const userId = getCookie(AUTH_USER_ID) ?? "";
+
   const router = useRouter();
+
   const { data } = useQuery({
     queryKey: [ENDPOINT.CMS_SERVICE.DASHBOARD],
     queryFn: () => DashboardApi.getDashboard(),
   });
 
+  const { data: noticeUserList } = useQuery({
+    queryKey: [ENDPOINT.CMS_SERVICE.NOTICE_USER],
+    queryFn: () => DashboardApi.getNoticeUserList(userId),
+    enabled: !!userId,
+    select: (data) => {
+      // 오늘 ~ 한 달 전 사이의 일정
+      const today = dayjs().endOf("day");
+      const monthAgo = dayjs().subtract(1, "month").startOf("day");
+      return data.content?.filter((item) => {
+        const regDt = dayjs(item.regDt);
+        return (
+          (regDt.isSame(monthAgo) || regDt.isAfter(monthAgo)) &&
+          (regDt.isSame(today) || regDt.isBefore(today))
+        );
+      });
+    },
+  });
+
+  const { data: scheduleList } = useQuery({
+    queryKey: [ENDPOINT.CMS_SERVICE.SCHEDULES],
+    queryFn: () =>
+      DashboardApi.getScheduleList({
+        siteId: SITE_ID,
+        schdlBgngYmd: dayjs().format("YYYY-MM-DD"),
+        schdlEndYmd: dayjs().add(1, "month").format("YYYY-MM-DD"),
+        commSchdlYn: "Y",
+      }),
+  });
+
   const noticePostQuery = useQuery({
     queryKey: [ENDPOINT.BOARD_SERVICE.POSTS],
     queryFn: () =>
@@ -323,22 +356,15 @@ function DashboardPage() {
               </div>
               <div className="p-4">
                 <div className="space-y-4 text-foreground">
-                  <div className="flex items-center justify-between border-b border-border pb-4">
-                    <span className="font-medium">신규 사용자 가입</span>
-                    <span>{(1).toLocaleString()}분 전</span>
-                  </div>
-                  <div className="flex items-center justify-between border-b border-border pb-4">
-                    <span className="font-medium">메뉴 수정 요청</span>
-                    <span>{(5).toLocaleString()}분 전</span>
-                  </div>
-                  <div className="flex items-center justify-between border-b border-border pb-4">
-                    <span className="font-medium">게시물 신고</span>
-                    <span>{(10).toLocaleString()}분 전</span>
-                  </div>
-                  <div className="flex items-center justify-between">
-                    <span className="font-medium">컨텐츠 승인 요청</span>
-                    <span>{(15).toLocaleString()}분 전</span>
-                  </div>
+                  {noticeUserList?.map((item) => (
+                    <div
+                      key={item.notiId}
+                      className="flex items-center justify-between border-b border-border pb-4"
+                    >
+                      <span className="font-medium">{item.notiTtl}</span>
+                      <span>{dayjs(item.regDt).fromNow()}</span>
+                    </div>
+                  ))}
                 </div>
               </div>
             </div>
@@ -349,24 +375,44 @@ function DashboardPage() {
               </div>
               <div className="p-4">
                 <div className="space-y-4 text-foreground">
-                  <div className="flex items-center justify-between border-b border-border pb-4">
-                    <span className="font-medium">
-                      {(3).toLocaleString()}월 정기 시스템 점검
-                    </span>
-                    <span>내일</span>
-                  </div>
-                  <div className="flex items-center justify-between border-b border-border pb-4">
-                    <span className="font-medium">서버 업데이트 예정</span>
-                    <span>{(3).toLocaleString()}일 후</span>
-                  </div>
-                  <div className="flex items-center justify-between border-b border-border pb-4">
-                    <span className="font-medium">백업 스케줄</span>
-                    <span>{(5).toLocaleString()}일 후</span>
-                  </div>
-                  <div className="flex items-center justify-between">
-                    <span className="font-medium">정기 보안 점검</span>
-                    <span>{(7).toLocaleString()}일 후</span>
-                  </div>
+                  {scheduleList && scheduleList.length > 0 ? (
+                    scheduleList.map((schedule, index) => {
+                      const today = dayjs();
+                      const scheduleDate = dayjs(schedule.actualDate);
+                      const daysUntil = scheduleDate.diff(today, "day");
+
+                      let timeText = "";
+                      if (daysUntil === 0) {
+                        timeText = "오늘";
+                      } else if (daysUntil === 1) {
+                        timeText = "내일";
+                      } else if (daysUntil > 1) {
+                        timeText = `${daysUntil}일 후`;
+                      } else {
+                        timeText = scheduleDate.format("YYYY-MM-DD");
+                      }
+
+                      return (
+                        <div
+                          key={schedule.schdlSn}
+                          className={`flex items-center justify-between ${
+                            index < scheduleList.length - 1
+                              ? "border-b border-border pb-4"
+                              : ""
+                          }`}
+                        >
+                          <span className="font-medium">
+                            {schedule.schdlTtl}
+                          </span>
+                          <span>{timeText}</span>
+                        </div>
+                      );
+                    })
+                  ) : (
+                    <div className="text-center text-muted-foreground">
+                      예정된 일정이 없습니다.
+                    </div>
+                  )}
                 </div>
               </div>
             </div>

apps/cs/src/pages/groups/ui/menu-authority-dialog.tsx

@@ -1,4 +1,4 @@
-import { useState, useRef } from "react";
+import { useState, useRef, useEffect } from "react";
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useQuery } from "@tanstack/react-query";
@@ -48,25 +48,14 @@ function MenuAuthorityDialog({ groupId }: MenuAuthorityDialogProps) {
     keywordType: "",
     siteId: "",
   });
-  
-  const handleReset = () => {
-    if (inputRef.current) inputRef.current.value = "";
-    setKeywordType("");
-    setSiteId("");
-    setSearchParams({
-      keyword: "",
-      keywordType: "",
-      siteId: "",
-    });
-  };
-
 
   const query = useQuery({
     queryKey: [ENDPOINT.CMS_SERVICE.MENU_AUTHRTS, groupId, searchParams],
-    queryFn: () => MenuAuthorityApi.getGroupMenuAuthorityList({ 
-      groupId, 
-      ...searchParams 
-    }),
+    queryFn: () =>
+      MenuAuthorityApi.getGroupMenuAuthorityList({
+        groupId,
+        ...searchParams,
+      }),
     enabled: open && !!groupId,
   });
 
@@ -117,6 +106,21 @@ function MenuAuthorityDialog({ groupId }: MenuAuthorityDialogProps) {
     });
   };
 
+  const handleReset = () => {
+    if (inputRef.current) inputRef.current.value = "";
+    setSiteId("");
+    setKeywordType("");
+    setSearchParams({
+      keyword: "",
+      keywordType: "",
+      siteId: "",
+    });
+  };
+
+  useEffect(() => {
+    if (!open) handleReset();
+  }, [open]);
+
   return (
     <Dialog open={open} onOpenChange={setOpen}>
       <DialogTrigger asChild>

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

@@ -39,10 +39,10 @@ function LoginlogPage() {
   const [presetDateRange, setPresetDateRange] = useState("");
   const [dateRange, setDateRange] = useState<DateRange>(defaultDateRange);
   const [userId, setUserId] = useState("");
-  const [errOcrnYn, setErrOcrnYn] = useState("N");
+  const [errOcrnYn, setErrOcrnYn] = useState("ALL");
   const [searchParams, setSearchParams] = useState<LoginlogParams>({
     userId: "",
-    errOcrnYn: "N",
+    errOcrnYn: "",
     searchDateFrom: dayjs().subtract(7, "day").format("YYYY-MM-DD"),
     searchDateTo: dayjs().format("YYYY-MM-DD"),
     sort: "lgnDt,desc",
@@ -87,7 +87,7 @@ function LoginlogPage() {
     setSearchParams({
       ...searchParams,
       userId,
-      errOcrnYn,
+      errOcrnYn: errOcrnYn === "ALL" ? "" : errOcrnYn,
       searchDateFrom: dateRange.from
         ? dayjs(dateRange.from).format("YYYY-MM-DD")
         : "",
@@ -102,12 +102,12 @@ function LoginlogPage() {
 
   const handleReset = () => {
     setUserId("");
-    setErrOcrnYn("N");
+    setErrOcrnYn("ALL");
     setDateRange(defaultDateRange);
     setSearchParams({
       ...searchParams,
       userId: "",
-      errOcrnYn: "N",
+      errOcrnYn: "",
       searchDateFrom: dayjs().subtract(7, "day").format("YYYY-MM-DD"),
       searchDateTo: dayjs().format("YYYY-MM-DD"),
     });
@@ -180,6 +180,7 @@ function LoginlogPage() {
               <SelectValue placeholder="선택" />
             </SelectTrigger>
             <SelectContent>
+              <SelectItem value="ALL">전체</SelectItem>
               <SelectItem value="N">정상</SelectItem>
               <SelectItem value="Y">오류</SelectItem>
             </SelectContent>

apps/cs/src/pages/module/ui/management-authority-dialog.tsx

@@ -1,4 +1,4 @@
-import { useState, memo } from "react";
+import { useState, memo, useEffect } from "react";
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useQuery } from "@tanstack/react-query";
@@ -90,6 +90,10 @@ const ManagementAuthorityDialog = memo(
       }
     };
 
+    useEffect(() => {
+      if (!open) form.reset();
+    }, [open]);
+
     return (
       <Dialog open={open} onOpenChange={setOpen}>
         <DialogTrigger asChild>

apps/cs/src/pages/role/ui/mapping-role-dialog.tsx

@@ -1,4 +1,4 @@
-import { useState, useRef } from "react";
+import { useState, useRef, useEffect } from "react";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { getCoreRowModel, type ColumnDef } from "@tanstack/react-table";
 import {
@@ -113,6 +113,10 @@ function MappingRoleDialog({
     },
   });
 
+  useEffect(() => {
+    if (!open) handleReset();
+  }, [open]);
+
   return (
     <Dialog open={open} onOpenChange={onOpenChange} {...props}>
       <DialogTrigger asChild>

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

@@ -56,6 +56,7 @@ export const ENDPOINT = {
     APILOG: "/cms-service/api/v1/api-logs",
     SITE_AUTHORITY: "/cms-service/api/v1/site-authrt",
     CONNECTION_LOG: "/cms-service/api/v1/cntnlog",
+    NOTICE_USER: "/cms-service/api/v1/noti/user",
   },
   BOARD_SERVICE: {
     BBS: "/board-service/api/v1/bbs",
@@ -63,6 +64,7 @@ export const ENDPOINT = {
     POSTS: "/board-service/api/v1/posts",
     POSTS_COMMENTS: "/board-service/api/v1/posts-cmnts",
     POST_EVALUATION: "/board-service/api/v1/pstEvl",
+    STATISTICS: "/board-service/api/v1/stat/bbs",
   },
 };
 

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

@@ -2,6 +2,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 SERVER_API_URL = process.env.NEXT_PUBLIC_SERVER_API_URL;
+export const AUTH_LOGIN_REDIRECT_URL =
+  process.env.NEXT_PUBLIC_AUTH_LOGIN_REDIRECT_URL || "/auth/login";
 export const SITE_ID = process.env.NEXT_PUBLIC_SITE_ID || "CS";
 export const CLAIM_NAME = process.env.NEXT_PUBLIC_CLAIM_NAME || "Authorization";
 export const ACCESS_TOKEN =

apps/dc/package.json

@@ -41,7 +41,7 @@
     "@types/node": "^22.17.0",
     "@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/dc/src/entities/auth/lib/auth-wrapper.tsx

@@ -1,20 +1,24 @@
 "use client";
 
 import { useEffect } from "react";
-import { useRouter } from "next/navigation";
 import { client } from "@/shared/api";
 import type { IUserInfo } from "@/shared/store";
 import { getCookie, useUserStore } from "@/shared/lib";
-import { ENDPOINT, AUTH_USER_ID } from "@/shared/config";
-import { LoginApi } from "../api/login-service";
-
-const CLAIM_NAME = process.env.NEXT_PUBLIC_CLAIM_NAME || "Authorization";
+import { isAtLoginRedirectUrl } from "@common/network";
+import {
+  ENDPOINT,
+  AUTH_USER_ID,
+  AUTH_LOGIN_REDIRECT_URL,
+} from "@/shared/config";
 
 const AuthWrapper = ({ children }: { children: React.ReactNode }) => {
-  const router = useRouter();
   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");
@@ -32,14 +36,9 @@ 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);
-          router.push("/auth/login");
+        setUserInfo(null);
+        if (!isAtLoginRedirectUrl(AUTH_LOGIN_REDIRECT_URL)) {
+          window.location.assign(AUTH_LOGIN_REDIRECT_URL);
         }
       }
     })();

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

@@ -3,10 +3,14 @@ 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 NEXT_PUBLIC_DC_SERVICE_API_URL = process.env.NEXT_PUBLIC_DC_SERVICE_API_URL || `http://localhost:${PORT}`;
+export const NEXT_PUBLIC_DC_SERVICE_API_URL =
+  process.env.NEXT_PUBLIC_DC_SERVICE_API_URL || `http://localhost:${PORT}`;
+export const AUTH_LOGIN_REDIRECT_URL =
+  process.env.NEXT_PUBLIC_AUTH_LOGIN_REDIRECT_URL || "/auth/login";
 
 // Flask API URL
-export const FLASK_API_URL = process.env.NEXT_PUBLIC_FLASK_API_URL || "http://localhost:5000";
+export const FLASK_API_URL =
+  process.env.NEXT_PUBLIC_FLASK_API_URL || "http://localhost:5000";
 
 //export const SITE_ID = process.env.NEXT_PUBLIC_SITE_ID || "DC";
 export const SITE_ID = "DC";

apps/dm/.env.local

@@ -1,26 +1,25 @@
 NEXT_PUBLIC_SITE_ID = DM
+NEXT_PUBLIC_PORT = 3015
 NEXT_PUBLIC_CLAIM_NAME = Authorization
 NEXT_PUBLIC_AUTH_USER_ID = token-id
 NEXT_PUBLIC_ACCESS_TOKEN = access-token
 NEXT_PUBLIC_REFRESH_TOKEN = refresh-token
-NEXT_PUBLIC_PORT = 3005
-#NEXT_PUBLIC_PROXY_HOST = http://con.mind-one.co.kr:11035
-NEXT_PUBLIC_PROXY_HOST = http://localhost:3005
-NEXT_PUBLIC_DM_SERVER_API_URL = http://con.mind-one.co.kr:11083/reuse-service/api/v1
+NEXT_PUBLIC_PROXY_HOST = http://localhost:3015
+NEXT_PUBLIC_CM_LOGIN_PAGE_URL = http://dev.onasys.co.kr:3000/auth/login
 NEXT_PUBLIC_SERVER_API_URL = http://dev.onasys.co.kr:8000
-NEXT_PUBLIC_FO_SERVER_API_URL = http://con.mind-one.co.kr:11083/operation-service/api/v1
-# NEXT_PUBLIC_FO_SERVER_API_URL = http://192.168.1.222:8883/operation-service/api/v1
 NEXT_PUBLIC_CS_SERVER_API_URL = http://dev.onasys.co.kr:8000
+NEXT_PUBLIC_DM_SERVER_API_URL = http://con.mind-one.co.kr:11083/reuse-service/api/v1
+# NEXT_PUBLIC_FO_SERVER_API_URL = http://192.168.1.222:8883/operation-service/api/v1
+NEXT_PUBLIC_FO_SERVER_API_URL = http://con.mind-one.co.kr:11083/operation-service/api/v1
+NEXT_PUBLIC_WR_SERVER_API_URL = http://con.mind-one.co.kr:11083/reuse-service/api/v1
 NEXT_PUBLIC_GEOSERVER_URL = http://rsone.iptime.org:10010/geoserver
 NEXT_PUBLIC_LX_GEOSERVER_URL = http://con.mind-one.co.kr:11306/geoserver
 NEXT_PUBLIC_CS_TUS_UPLOAD = /attach-service/api/v1/tus/upload
-NEXT_PUBLIC_WR_SERVER_API_URL = http://con.mind-one.co.kr:11083/reuse-service/api/v1
 NEXT_PUBLIC_NGII_URL = https://map.ngii.go.kr
 NEXT_PUBLIC_NGII_PARAM = 04trYP9_xwLAfALjwZ-B8g&service=WMTS&request=GetTile&version=1.0.0&format=image/png&layer=korean_map&style=korean&tilematrixset=korean&tilematrix={z}&tilecol={x}&tilerow={y}
-NEXT_PUBLIC_SEWERAGE_API_URL=http://con.mind-one.co.kr:11083/sewerage-service   # 개발 서버 API
+NEXT_PUBLIC_GATEWAY_URL=http://con.mind-one.co.kr:11083  # 개발 서버 API
 #NEXT_PUBLIC_SEWERAGE_API_URL=http://192.168.1.128:8883/sewerage-service/api          # 최용성 
 #NEXT_PUBLIC_SEWERAGE_API_URL=http://192.168.1.66:8883/sewerage-service/api          # 박이정
-NEXT_PUBLIC_CM_LOGIN_PAGE_URL = http://dev.onasys.co.kr:3000/auth/login
 
 
 NEXT_PUBLIC_FINDADRESS_URL=https://business.juso.go.kr/addrlink/addrLinkApi.do

apps/dm/.env.mindone

@@ -1,22 +1,25 @@
 NEXT_PUBLIC_SITE_ID = DM
-NEXT_PUBLIC_PORT = 11035
-NEXT_PUBLIC_PROXY_HOST = http://con.mind-one.co.kr:11035
-NEXT_PUBLIC_SERVER_API_URL = http://dev.onasys.co.kr:8000
-NEXT_PUBLIC_DM_SERVER_API_URL = http://con.mind-one.co.kr:11083/reuse-service/api/v1
-NEXT_PUBLIC_FO_SERVER_API_URL = http://con.mind-one.co.kr:11083/operation-service/api/v1
-NEXT_PUBLIC_CS_SERVER_API_URL = http://dev.onasys.co.kr:8000
-NEXT_PUBLIC_CS_TUS_UPLOAD = /attach-service/api/v1/tus/upload
+NEXT_PUBLIC_PORT = 11315
 NEXT_PUBLIC_CLAIM_NAME = Authorization
 NEXT_PUBLIC_AUTH_USER_ID = token-id
 NEXT_PUBLIC_ACCESS_TOKEN = access-token
 NEXT_PUBLIC_REFRESH_TOKEN = refresh-token
+NEXT_PUBLIC_PROXY_HOST = http://con.mind-one.co.kr:11315
+NEXT_PUBLIC_CM_LOGIN_PAGE_URL = http://dev.onasys.co.kr:3000/auth/login
+NEXT_PUBLIC_SERVER_API_URL = http://dev.onasys.co.kr:8000
+NEXT_PUBLIC_CS_SERVER_API_URL = http://dev.onasys.co.kr:8000
+NEXT_PUBLIC_DM_SERVER_API_URL = http://con.mind-one.co.kr:11083/reuse-service/api/v1
+NEXT_PUBLIC_FO_SERVER_API_URL = http://con.mind-one.co.kr:11083/operation-service/api/v1
 NEXT_PUBLIC_WR_SERVER_API_URL = http://con.mind-one.co.kr:11083/reuse-service/api/v1
+#NEXT_PUBLIC_GEOSERVER_URL = http://rsone.iptime.org:10010/geoserver
+#NEXT_PUBLIC_LX_GEOSERVER_URL = http://con.mind-one.co.kr:11306/geoserver
+NEXT_PUBLIC_CS_TUS_UPLOAD = /attach-service/api/v1/tus/upload
 NEXT_PUBLIC_NGII_URL = https://map.ngii.go.kr
 NEXT_PUBLIC_NGII_PARAM = 04trYP9_xwLAfALjwZ-B8g&service=WMTS&request=GetTile&version=1.0.0&format=image/png&layer=korean_map&style=korean&tilematrixset=korean&tilematrix={z}&tilecol={x}&tilerow={y}
 NEXT_PUBLIC_SEWERAGE_API_URL=http://con.mind-one.co.kr:11083/sewerage-service   # 개발 서버 API
+NEXT_PUBLIC_GATEWAY_URL=http://con.mind-one.co.kr:11083  # 개발 서버 API
 # NEXT_PUBLIC_SEWERAGE_API_URL=http://192.168.1.128:8883/sewerage-service/api          # 최용성 
 #NEXT_PUBLIC_SEWERAGE_API_URL=http://192.168.1.66:8883/sewerage-service/api          # 박이정
-NEXT_PUBLIC_CM_LOGIN_PAGE_URL = http://dev.onasys.co.kr:3000/auth/login
 
 
 NEXT_PUBLIC_FINDADRESS_URL=https://business.juso.go.kr/addrlink/addrLinkApi.do

apps/dm/.env.production

@@ -8,15 +8,16 @@ NEXT_PUBLIC_REFRESH_TOKEN = refresh-token
 #NEXT_PUBLIC_PROXY_HOST = https://devreuse.hasuon.or.kr
 #NEXT_PUBLIC_CM_LOGIN_PAGE_URL = https://devqueen.hasuon.or.kr/auth/login
 NEXT_PUBLIC_SERVER_API_URL = http://apigateway.iipbs-was.svc.cluster.local:8000
-NEXT_PUBLIC_FO_SERVER_API_URL = http://apigateway.iipbs-was.svc.cluster.local:8000/operation-service/api/v1
 NEXT_PUBLIC_CS_SERVER_API_URL = http://apigateway.iipbs-was.svc.cluster.local:8000
-NEXT_PUBLIC_CS_TUS_UPLOAD = /attach-service/api/v1/tus/upload
+NEXT_PUBLIC_FO_SERVER_API_URL = http://apigateway.iipbs-was.svc.cluster.local:8000/operation-service/api/v1
+NEXT_PUBLIC_WR_SERVER_API_URL = http://apigateway.iipbs-was.svc.cluster.local:8000/reuse-service/api/v1
 NEXT_PUBLIC_GEOSERVER_URL = http://172.29.143.87:8080/geoserver
 NEXT_PUBLIC_LX_GEOSERVER_URL = http://172.29.143.87:8080/geoserver_swl
-NEXT_PUBLIC_WR_SERVER_API_URL = http://apigateway.iipbs-was.svc.cluster.local:8000/reuse-service/api/v1
+NEXT_PUBLIC_CS_TUS_UPLOAD = /attach-service/api/v1/tus/upload
 NEXT_PUBLIC_SEWERAGE_API_URL = http://apigateway.iipbs-was.svc.cluster.local:8000/sewerage-service
 NEXT_PUBLIC_NGII_URL = http://172.29.143.87/poiact
 NEXT_PUBLIC_NGII_PARAM = BDE2BEF39DAFEC293AB6730150F222AC&service=WMTS&request=GetTile&version=1.0.0&format=image/png&layer=korean_map&style=korean&tilematrixset=korean&tilematrix={z}&tilecol={y}&tilerow={x}
+NEXT_PUBLIC_GATEWAY_URL = http://apigateway.iipbs-was.svc.cluster.local:8000
 
 
 NEXT_PUBLIC_FINDADRESS_URL=https://business.juso.go.kr/addrlink/addrLinkApi.do

apps/dm/AGENTS.md

@@ -0,0 +1,38 @@
+## Project
+This repository contains a Next.js web application.
+
+Main technologies:
+- Next.js
+- TypeScript
+- pnpm workspace
+- turborepo
+
+이 저장소는 pnpm workspace + Turborepo 기반 monorepo이다.
+
+- 워크스페이스 범위는 `apps/*`, `apps/common/*`, `packages/*`, `packages/common/*`
+- 루트 스크립트는 `turbo run build`, `turbo run dev` 를 사용한다
+- `build` 작업은 의존 패키지의 `build` 를 먼저 수행한다 (`dependsOn: ["^build"]`)
+- `dev` 는 캐시하지 않는 지속 실행 작업이다
+- 변경 범위만 선택 실행할 수 있으므로, 전체 빌드보다 `--filter` 사용을 우선한다
+
+## Encoding 
+- UTF-8 
+- 한글이 깨지지 않도록 주의할 것
+
+## 주석 comment
+- 한글 주석을 삭제하지 말 것
+
+## Monorepo structure
+apps/
+  _template
+  as
+  cm
+  cs
+  dc
+  dm
+  dm_new
+  fo
+  sn
+  st
+  wr
+

apps/dm/app/(base-layout)/layout.tsx

@@ -1,16 +0,0 @@
-"use client";
-import Base from "../base";
-import "../globals.css";
-import { StoreProvider } from "../store";
-
-export default function BaseLayout({
-  children,
-}: Readonly<{
-  children: React.ReactNode;
-}>) {
-  return (
-    <StoreProvider>
-      <Base>{children}</Base>
-    </StoreProvider>
-  );
-}

apps/dm/app/(base-layout)/pages/sdmMng/sdmApplyList/page.tsx

@@ -1,209 +0,0 @@
-"use client"
-import { Table, TableBody, TableCell, TableRow } from '@common/components/ui/table';
-
-import { useDmStore } from '@/app/store';
-import { ContentsDiv, Title, UiModal, UiTable } from '@common/business_components/ui';
-import ListDiv from '@common/business_components/ui/list_div';
-import { useEffect, useState } from 'react';
-import { Toaster } from 'react-hot-toast';
-import SdmLogin from '../sdmLogin/page';
-import type { DemandCompBizType } from '@/app/store/sdmMng';
-import TransValueFormat from '@/app/common/transValueFormat';
-import { useRouter } from 'next/navigation';
-
-const TABLE_STYLES = {
-  header: "text-center border border-[var(--border)] bg-[rgb(234,243,251)] text-[rgb(100,119,132)] whitespace-pre-line",
-  cell: "text-right whitespace-pre-line",
-  fullWidth: "text-center border border-[var(--border)] bg-[rgb(234,243,251)] text-[rgb(100,119,132)] whitespace-pre-line",
-  table: "fixed w-full"
-} as const;
-
-type SdmApplyProps = {
-  sdmNo : string;
-}
-
-export default function SdmApplyList({}: SdmApplyProps) {
-
-  const router = useRouter();
-  
-  const {getSdmInfoStatusList, Sdm, Common} = useDmStore((state) => state);
-  const {successLogin, sdmInfoStatusList, upHeadSdmInfoStatus} = Sdm;
-  const {selectSidoData, selectSigunData} = Common;
-  const [isLogin, setIsLogin] = useState(false);
-  const [isLoginStorageInfo, setIsLoginStorageInfo] = useState(false);
-  const [sdmApplyDetail, setSdmApplyDetail] = useState<DemandCompBizType>({} as DemandCompBizType);
-  const [transformedList, setTransformedList] = useState<DemandCompBizType[]>([]);
-
-  useEffect(() => {
-    console.log('sessionStorage : ',sessionStorage.getItem('user'));
-    const user = sessionStorage.getItem('user');
-    if (user) {
-      setIsLoginStorageInfo(true);
-    }
-  }, []);
-
-  useEffect(() => {
-    if (successLogin || isLoginStorageInfo) {
-      setIsLogin(true);
-      const user = sessionStorage.getItem('user');
-      if (user) {
-        try {
-          const userData = JSON.parse(user);
-          getSdmInfoStatusList(userData.dmdInfoId);
-        } catch (error) {
-          console.error('Error parsing user data:', error);
-        }
-      }
-    }
-  }, [successLogin, getSdmInfoStatusList, isLoginStorageInfo]);
-
-  // 데이터 변환을 위한 별도의 useEffect
-  useEffect(() => {
-    if (sdmInfoStatusList.length > 0) {
-
-      
-      const newTransformedList = sdmInfoStatusList.map((item: DemandCompBizType) => ({
-        ...item,
-        ctpvCd: selectSidoData.find(sido => sido.val === item.ctpvCd?.trim())?.text || '',
-        sggCd: selectSigunData.find(sigun => sigun.val === item.sggCd?.trim())?.text || '',
-      }));
-      setTransformedList(newTransformedList);
-    }
-  }, [sdmInfoStatusList, selectSidoData, selectSigunData]);
-
-  const onClickSdmStatus = (index: number | undefined) => {
-    if (index !== undefined) {
-      const selectedStatus = transformedList[index];
-      if (selectedStatus) {
-
-
-        setSdmApplyDetail(selectedStatus);
-      }
-    }
-  }
-
-  return (
-    <>
-      <Title title="수요신청현황" />
-      <ContentsDiv>
-        <ListDiv>
-          <div className="overflow-y-scroll h-[250px]">
-            <div className="h-[110%] w-[99%]">
-              <UiTable
-                headName='수요정보 신청현황'
-                tableData={transformedList} 
-                headlist={upHeadSdmInfoStatus} 
-                pageSize={0} 
-                total={0} 
-                cellClick={(index) => onClickSdmStatus(index)} 
-                onPageChange={() => {}}
-              />
-            </div>
-          </div>
-        </ListDiv>
-        <ListDiv>
-          <div className="card-header">
-            <h3 className="text-2xl font-medium text-label">수요신청 상세현황</h3>
-          </div>
-          <div className={`card !m-[1.2rem] !p-0r`}>
-            <Table variant="secondary" style={{ tableLayout: 'fixed', width: '100%' }}>
-              <TableBody>
-                <TableRow>
-                  <TableCell colSpan={1} className={TABLE_STYLES.header}>요구시기</TableCell>
-                  <TableCell colSpan={2} className={TABLE_STYLES.cell}>{sdmApplyDetail?.dmndTmng?.toString()}</TableCell>
-                  <TableCell colSpan={1} className={TABLE_STYLES.header}>요구수량(m³/일)</TableCell>
-                  <TableCell colSpan={2} className={TABLE_STYLES.cell}>{<TransValueFormat value={sdmApplyDetail?.dmndQty} format="number"/>}</TableCell>
-                </TableRow>
-                <TableRow>
-                  <TableCell colSpan={1} className={TABLE_STYLES.header}>사용용도</TableCell>
-                  <TableCell colSpan={2} className={TABLE_STYLES.cell}>{sdmApplyDetail?.useUsgCd}</TableCell>
-                  <TableCell colSpan={1} className={TABLE_STYLES.header}>희망단가(원/m³)</TableCell>
-                  <TableCell colSpan={2} className={TABLE_STYLES.cell}>{<TransValueFormat value={sdmApplyDetail?.wntUntprc} format="number"/>}</TableCell>
-                </TableRow>
-                <TableRow>
-                  <TableCell colSpan={6} className={TABLE_STYLES.fullWidth}>요구수량</TableCell>
-                </TableRow>
-                <TableRow>
-                  <TableCell colSpan={1} className={TABLE_STYLES.header}>총대장균군수(개/100ml)</TableCell>
-                  <TableCell colSpan={1} className={TABLE_STYLES.cell}>{   sdmApplyDetail?.grssClfg!=-1?<TransValueFormat value={sdmApplyDetail?.grssClfg ?? ''} format="number"/>:''}  {sdmApplyDetail?.grssClfg?sdmApplyDetail.grssClfg!=-1? '이하':'불검출':'-'}  </TableCell>
-                  <TableCell colSpan={1} className={TABLE_STYLES.header}>결합잔류염소(mg/L)​</TableCell>
-                  <TableCell colSpan={1} className={TABLE_STYLES.cell}>{<TransValueFormat value={sdmApplyDetail?.combResdch ?? ''} format="number"/>}  {sdmApplyDetail?.combResdch?'이하':'-'}</TableCell>
-                  <TableCell colSpan={1} className={TABLE_STYLES.header}>탁도(NTU)</TableCell>
-                  <TableCell colSpan={1} className={TABLE_STYLES.cell}>{<TransValueFormat value={sdmApplyDetail?.trbt ?? ''} format="number"/>}  {sdmApplyDetail?.trbt?'이하':'-'}</TableCell>
-                </TableRow>
-                <TableRow>
-                  <TableCell colSpan={1} className={TABLE_STYLES.header}>생물학적 산소요구량(BOD)(mg/L)</TableCell>
-                  <TableCell colSpan={1} className={TABLE_STYLES.cell}>{<TransValueFormat value={sdmApplyDetail?.blgcOxygDmndQnt ?? ''} format="number"/>}  {sdmApplyDetail?.blgcOxygDmndQnt?'이하':'-'}</TableCell>
-                  <TableCell colSpan={1} className={TABLE_STYLES.header}>냄새</TableCell>
-                  <TableCell colSpan={1} className={TABLE_STYLES.cell}>{<TransValueFormat value={sdmApplyDetail?.smll} format="number"/>}  {sdmApplyDetail?.smll?'이하':'-'}</TableCell>
-                  <TableCell colSpan={1} className={TABLE_STYLES.header}>색도(도)</TableCell>
-                  <TableCell colSpan={1} className={TABLE_STYLES.cell}>{<TransValueFormat value={sdmApplyDetail?.crmty ?? ''} format="number"/>}  {sdmApplyDetail?.crmty?'이하':'-'}</TableCell>
-                </TableRow>
-                <TableRow>
-                  <TableCell colSpan={1} className={TABLE_STYLES.header}>총질소(T-N)(mg/L)</TableCell>
-                  <TableCell colSpan={1} className={TABLE_STYLES.cell}>{<TransValueFormat value={sdmApplyDetail?.tn ?? ''} format="number"/>}  {sdmApplyDetail?.tn?'이하':'-'}</TableCell>
-                  <TableCell colSpan={1} className={TABLE_STYLES.header}>총인(T-P)(mg/L)​</TableCell>
-                  <TableCell colSpan={1} className={TABLE_STYLES.cell}>{<TransValueFormat value={sdmApplyDetail?.tph ?? ''} format="number"/>}  {sdmApplyDetail?.tph?'이하':'-'}</TableCell>
-                  <TableCell colSpan={1} className={TABLE_STYLES.header}>수소이온농도(pH)​</TableCell>
-                  <TableCell colSpan={1} className={TABLE_STYLES.cell}>{<TransValueFormat value={sdmApplyDetail?.ph} format="number"/>}</TableCell>
-                </TableRow>
-                <TableRow>
-                  <TableCell colSpan={1} className={TABLE_STYLES.header}>염화물(mgCL/L)​</TableCell>
-                  <TableCell colSpan={1} className={TABLE_STYLES.cell}>{<TransValueFormat value={sdmApplyDetail?.clIonQnt ?? ''} format="number"/>}  {sdmApplyDetail?.clIonQnt?'이하':'-'}</TableCell>
-                  <TableCell colSpan={1} className={TABLE_STYLES.header}>전기전도도(㎲/cm)​</TableCell>
-                  <TableCell colSpan={1} className={TABLE_STYLES.cell}>{<TransValueFormat value={sdmApplyDetail?.cdtnv ?? ''} format="number"/>}  {sdmApplyDetail?.cdtnv?'이하':'-'}</TableCell>
-                  <TableCell colSpan={1} className={TABLE_STYLES.header}>비고</TableCell>
-                  <TableCell colSpan={1} className={TABLE_STYLES.cell}>{sdmApplyDetail?.rmrk}</TableCell>
-                </TableRow>
-                <TableRow>
-                  <TableCell colSpan={6} className={TABLE_STYLES.fullWidth}>공급처 후보지​</TableCell>
-                </TableRow>
-                <TableRow>
-                  <TableCell colSpan={1} className={TABLE_STYLES.header}>후보지1</TableCell>
-                  <TableCell colSpan={1} className={TABLE_STYLES.cell}>{ sdmApplyDetail?.splyCndtList?.[0]?.ruseUtztnFcltNm ?? ""}</TableCell>
-                  <TableCell colSpan={1} className={TABLE_STYLES.header}>후보지2</TableCell>
-                  <TableCell colSpan={1} className={TABLE_STYLES.cell}>{sdmApplyDetail?.splyCndtList?.[1]?.ruseUtztnFcltNm ?? ""}</TableCell>
-                  <TableCell colSpan={1} className={TABLE_STYLES.header}>후보지3</TableCell>
-                  <TableCell colSpan={1} className={TABLE_STYLES.cell}>{sdmApplyDetail?.splyCndtList?.[2]?.ruseUtztnFcltNm ?? ""}</TableCell>
-                </TableRow>
-              </TableBody>
-            </Table>
-          </div>
-        </ListDiv>
-        <ListDiv>
-          <div className="card-header">
-            <h3 className="text-2xl font-medium text-label">수요신청 진행상태</h3>
-          </div>
-          <div className={`card !m-[1.2rem] !p-0r`}>
-            <Table variant="secondary" style={{ tableLayout: 'fixed', width: '100%' }}>
-              <TableBody>
-                <TableRow>
-                  <TableCell colSpan={1} className={TABLE_STYLES.header}>진행상태</TableCell>
-                  <TableCell colSpan={2} className={TABLE_STYLES.cell}>{sdmApplyDetail?.status?.toString()}</TableCell>
-                  <TableCell colSpan={1} className={TABLE_STYLES.header}>공급처매칭결과</TableCell>
-                  <TableCell colSpan={2} className={TABLE_STYLES.cell}>{sdmApplyDetail?.ruseUtztnFcltNm??''}</TableCell>
-                </TableRow>
-              </TableBody>
-            </Table>
-          </div>
-        </ListDiv>
-      </ContentsDiv>
-      {!isLogin?
-        <UiModal
-          body={<SdmLogin/>}
-          bodyClass="sm:max-w-[90vw] w-[530px] h-[430px]"
-          open={!isLogin}
-          onOpenChange={(open) => {
-            if(!open){
-              setIsLogin(false)
-              router.push('/');
-            }
-          }}
-          noHeaderYn="Y"
-          noFooterYn="Y"
-        />
-      :null}
-      <Toaster position="top-center" />
-    </>
-  );
-}

apps/dm/app/(base-layout)/pages/sdmMng/sdmInfoInsert/modalSimilar/page.tsx

@@ -1,166 +0,0 @@
-"use client"
-
-import { useDmStore } from '@/app/store';
-import type { MoneyDetailType, SimilarCaseType } from '@/app/store/sdmMng';
-import { SelectBox, Title, UiTable } from '@common/business_components/ui';
-import { HeadMakeColSpan } from '@common/business_components/ui/table/HeadMakeColSpan';
-import { Table, TableBody, TableCell, TableHeader, TableRow } from '@common/components/ui/table';
-import { useEffect, useMemo, useState } from 'react';
-
-type modalType = {
-  sply: number | 0;
-  usageCd: string | '';
-  money: number | 0;
-};
-
-const searchUseTypeList = [
-  { text: '공급량', val: 'S' },
-  { text: '사용용도', val: 'U' },
-];
-
-export default function ModalSimilarPage({ sply = 0, usageCd = '', money = 0 }: modalType) {
-  const { Sdm, getSimilarCaseList } = useDmStore((state) => state);
-  const [searchUseType, setSearchUseType] = useState<{text: string, value: string}>({text: '공급량', value: 'S'});
-  const [moneyDetailList, setMoneyDetailList] = useState<MoneyDetailType[]>([]);
-  const {
-    upHeadSimilarCaseList,
-    similarCaseList,
-    upHeadMoneyDetailList,
-  } = Sdm;
-
-  const rowSpans = useMemo(() => {
-    const spans: { [key: number]: number } = {};
-    let currentValue = '';
-    let currentSpan = 0;
-    let startIndex = 0;
-
-    similarCaseList.forEach((item: SimilarCaseType, index: number) => {
-      if (item.ruseBizNm === currentValue
-        || item.bizBgngDate === currentValue
-        || item.bizEndDate === currentValue
-        || item.reqBizReuseFcltCst === currentValue) {
-        currentSpan++;
-        spans[startIndex] = currentSpan;
-      } else {
-        currentValue = item.ruseBizNm;
-        currentSpan = 1;
-        startIndex = index;
-        spans[index] = 1;
-      }
-    });
-
-    return spans;
-  }, [similarCaseList]);
-
-  const handleCellClick = (index: number) => {
-    setMoneyDetailList([{
-      reqBizGrssCst: similarCaseList[index]?.reqBizGrssCst ?? '',
-      reqBizReuseFcltCst: similarCaseList[index]?.reqBizReuseFcltCst ?? '',
-      reqBizPplCst: similarCaseList[index]?.reqBizPplCst ?? '',
-      reqBizArchCst: similarCaseList[index]?.reqBizArchCst ?? '',
-      reqBizMchnCst: similarCaseList[index]?.reqBizMchnCst ?? '',
-      reqBizMtrngCst: similarCaseList[index]?.reqBizMtrngCst ?? '',
-      reqBizGisCst: similarCaseList[index]?.reqBizGisCst ?? '',
-      reqBizCctvCst: similarCaseList[index]?.reqBizCctvCst ?? '',
-      reqBizCmcnCst: similarCaseList[index]?.reqBizCmcnCst ?? '',
-      reqBizWstCst: similarCaseList[index]?.reqBizWstCst ?? '',
-      reqBizDesignCst: similarCaseList[index]?.reqBizDesignCst ?? '',
-      reqBizSpvsCst: similarCaseList[index]?.reqBizSpvsCst ?? '',
-      reqBizSbsdCst: similarCaseList[index]?.reqBizSbsdCst ?? '',
-      reqBizEtc: similarCaseList[index]?.reqBizEtc ?? '',
-      prcmPlanNlep: similarCaseList[index]?.prcmPlanNlep ?? '',
-      prcmPlanLcep: similarCaseList[index]?.prcmPlanLcep ?? '',
-      prcmPlanBrdnCst: similarCaseList[index]?.prcmPlanBrdnCst ?? '',
-      prcmPlanEcqrRt: similarCaseList[index]?.prcmPlanEcqrRt ?? '',
-      prcmPlanGrssCst: similarCaseList[index]?.prcmPlanGrssCst ?? '',
-      clclnNlep: similarCaseList[index]?.clclnNlep ?? '',
-      clclnLcep: similarCaseList[index]?.clclnLcep ?? '',
-      clclnBrdnCst: similarCaseList[index]?.clclnBrdnCst ?? '',
-      clclnEcqrRt: similarCaseList[index]?.clclnEcqrRt ?? '',
-      clclnGrssCst: similarCaseList[index]?.clclnGrssCst ?? ''
-    }]);
-  }
-
-  useEffect(() => {
-    const type = searchUseType.value;
-    getSimilarCaseList(type, type === 'S' ? sply : type === 'U' ? usageCd : money);
-  }, [getSimilarCaseList, money, searchUseType, sply, usageCd]);
-
-  return (
-    <div className="align-top w-[1360px] overflow-x-auto">
-      <Title title="유사사례 조회" />
-      <div className="overflow-x-auto h-[450px] w-full mt-8" tabIndex={0} aria-label="유사사례 테이블 영역">
-        <div className="w-[150%]">
-          <div className="card-header justify-self-start">
-            <h3 className="text-2xl font-medium text-label">유사사례</h3>
-            <SelectBox
-              tabIndex={0}
-              aria-label="검색 기준 선택"
-              selectArray={searchUseTypeList}
-              value={searchUseType.value}
-              onSelectValue={(val) => {
-                setSearchUseType({text: searchUseTypeList.find(item => item.val === val)?.text ?? '', value: val.toString()});
-              }}
-              className="w-[140px] ml-20"
-              label=""
-              selectClass="w-[140px]"
-            />
-          </div>
-          <div className={`card !m-[1.2rem] !p-0r`}>
-            <Table variant="secondary">
-              <TableHeader className="font-bold">
-                <HeadMakeColSpan upHeadList={upHeadSimilarCaseList} />
-              </TableHeader>
-              <TableBody className='text-center'>
-                {similarCaseList.length > 0 ? similarCaseList?.map((el: SimilarCaseType, index) => (
-                  <TableRow key={`similar-case-row-${index}-${el.ruseBizNm}-${el.bizBgngDate}`}>
-                    {upHeadSimilarCaseList.map((head) => (
-                      head.id && head.id.length > 1 && (
-                        <TableCell
-                          tabIndex={head.id === 'someClickableId' ? 0 : undefined}
-                          role="button"
-                          aria-label={`유사사례 ${head.id} 클릭 시 상세 정보 표시`}
-                          className={`${head.align === 'right' ? 'text-right' : head.align === 'center' ? 'text-center' : typeof el[head.id as keyof SimilarCaseType] === 'number' ? 'text-right' : 'text-center'} cursor-pointer`}
-                          key={`similar-case-cell-${head.id}-${index}-${el.ruseBizNm}`}
-                          rowSpan={(head.id === 'businessName' || head.id ==='businessDuration' || head.id === 'money') ? rowSpans[index] : undefined}
-                          style={(head.id === 'businessName' || head.id === 'businessDuration' || head.id === 'money') && index > 0 && similarCaseList[index - 1]?.ruseBizNm === el.ruseBizNm ? { display: 'none' } : undefined}
-                          onClick={() => handleCellClick(index)}
-                          onKeyDown={(e) => {
-                            if (e.key === 'Enter' || e.key === ' ') {
-                              handleCellClick(index);
-                            }
-                          }}
-                        >
-                          {typeof el[head.id as keyof SimilarCaseType] !== 'number' 
-                            ? String(el[head.id as keyof SimilarCaseType] ?? '')
-                            : String(el[head.id as keyof SimilarCaseType]).includes('.') 
-                              ? String(el[head.id as keyof SimilarCaseType]).split('.').map((part, index) => 
-                              index === 0 ? part.replace(/\B(?=(\d{3})+(?!\d))/g, ",") : part
-                            ).join('.')
-                          : String(el[head.id as keyof SimilarCaseType] ?? '').replace(/\B(?=(\d{3})+(?!\d))/g, ",")}
-                        </TableCell>
-                      )
-                    ))}
-                  </TableRow>
-                )) : <></>}
-              </TableBody>
-            </Table>
-          </div>
-        </div>
-      </div>
-      <div className="overflow-x-auto h-[270px] w-full mt-8">
-        <div className="w-[130%]">
-          <UiTable
-            headName={"사업비 상세정보"}
-            tableData={moneyDetailList}
-            headlist={upHeadMoneyDetailList}
-            pageSize={0}
-            total={0}
-            cellClick={undefined}
-            onPageChange={() => {}}
-          />
-        </div>
-      </div>
-    </div>
-  )
-}

apps/dm/app/(base-layout)/pages/sdmMng/sdmInfoInsert/page.tsx

@@ -1,288 +0,0 @@
-"use client";
-
-import { useDmStore } from "@/app/store";
-import { sdmInfoFormSchema, type DemandCompBizType, type SdmInfoFormData } from "@/app/store/sdmMng";
-import { SdmInfoRegForm } from "@/components/ui/sdmInfoInsertForm/component";
-import { UiModal } from "@common/business_components/ui/dialog_ui";
-import { Button } from "@common/components/ui";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { useRouter, useSearchParams } from "next/navigation";
-import { Suspense, useEffect, useState } from "react";
-import { FormProvider, useForm, type SubmitHandler } from "react-hook-form";
-import toast, { Toaster } from "react-hot-toast";
-import SdmLogin from "../sdmLogin/page";
-
-
-
-function SdmInfoInsertContent() {
-  const searchParams = useSearchParams();
-  const { insertSdmInfoData, Sdm, setSubsInfo } = useDmStore((state) => state);
-  const { successLogin } = Sdm;
-  const [ismoneyDisabled, setIsmoneyDisabled] = useState(false);
-  const formSchema = sdmInfoFormSchema;
-
-  const [isLogin, setIsLogin] = useState(false);
-  const [facilityName, setFacilityName] = useState<string>("");
-  const [defaultValues, setDefaultValues] = useState<SdmInfoFormData>({
-    sdmNm: "",
-    demandYmd: new Date(),
-    demandQnty: "",
-    usePurpose: "",
-    money: "",
-    /**요구수질 */
-    reqWaterQlty: "",
-    grssClfg: null,
-    tn: null,
-    combResdch: null,
-    tph: null,
-    trbt: null,
-    ph: null,
-    bod: null,
-    /**컬럼확인필요 */
-    clIonQnt: null,
-    smll: "",
-    cdtnv: null,
-    crmty: null,
-    rmrk: "",
-    /** 후보지 제목 */
-    candidateTitle: [
-      { ruseUtztnFcltNm: "", ruseUtztnFcltCd: "" },
-      { ruseUtztnFcltNm: "", ruseUtztnFcltCd: "" },
-      { ruseUtztnFcltNm: "", ruseUtztnFcltCd: "" },
-    ],
-  });
-
-  useEffect(() => {
-    const user = sessionStorage.getItem("user");
-
-
-    setDefaultValues((prev) => ({
-      ...prev,
-      sdmNm: searchParams.get("dmdCoNm") || "",
-    }));
-    if(searchParams.get("dmdInfoId")){
-      // const data = {
-      //   dmdCoNm: searchParams.get("dmdCoNm") || '',
-      //   ctpvCd: searchParams.get("ctpvCd") || '',
-      //   sggCd: searchParams.get("sggCd") || '',
-      //   dmdInfoId: searchParams.get("dmdInfoId") || '',
-      //   daddr: searchParams.get("daddr") || '',
-      //   telno: searchParams.get("telno") || '',
-      // }
-    
-     // sessionStorage.setItem("user", JSON.stringify(data || {}));
-    }
-    //sessionStorage.setItem("user", JSON.parse(user||'') || "");
-    setIsLogin(user || searchParams.get("dmdInfoId") ? true : false);
-  }, [searchParams]);
-
-  useEffect(() => {
-    const local = localStorage.getItem("user");
-    if (local) {
-      setIsLogin(true);
-    }
-    setSubsInfo([]); // subsInfo 초기화 후보지 처음 화면 들어올때 초기화(스토어내 객체만)
-  }, [setSubsInfo]);
-
-  const form = useForm<SdmInfoFormData>({
-    resolver: zodResolver(formSchema),
-    defaultValues,
-    mode: "onSubmit",
-  });
-
-  const subsInfo = useDmStore((state) => state.map.subsInfo);
-
-  useEffect(() => {
-    //map.subsInfo 스토어 객체 값이 변경되면 해당 값이 폼에 자동으로 들어가도록 수정 대신 값이 있어야함
-    if (subsInfo.length > 0) {
-      form.setValue("candidateTitle", subsInfo);
-    }
-  }, [subsInfo, form]);
-
-  //후보지 팝업 값 셋팅
-  useEffect(() => {
-    const handleMessage = (event: MessageEvent) => {
-      if (event.data?.type === "SET_SUBS_INFO") {
-        setSubsInfo(event.data.payload); // zustand로 값 설정
-      }
-    };
-
-    window.addEventListener("message", handleMessage);
-    return () => window.removeEventListener("message", handleMessage);
-  }, [setSubsInfo]);
-
-  // 로그인 성공 시 모달 닫기 및 폼 업데이트
-  useEffect(() => {
-    if (successLogin) {
-      setIsLogin(true);
-      const user = sessionStorage.getItem("user");
-      if (user) {
-        try {
-          const userData = JSON.parse(user);
-          if (userData.dmdCoNm) {
-            setFacilityName(userData.dmdCoNm);
-            form.setValue("sdmNm", userData.dmdCoNm);
-          }
-        } catch (error) {
-          console.error("Error parsing user data:", error);
-        }
-      }
-    }
-  }, [successLogin, form]);
-
-  useEffect(() => {
-    console.log("Form state changed:", form.formState.errors);
-  }, [form.formState.errors]);
-
-  // 체크박스 상태가 변경될 때마다 money 필드의 에러를 초기화
-  useEffect(() => {
-    if (ismoneyDisabled) {
-      form.clearErrors("money");
-      form.setValue("money", "");
-    }
-  }, [ismoneyDisabled, form]);
-  const router = useRouter();
-  const onSubmit: SubmitHandler<SdmInfoFormData> = async (data) => {
-    try {
-      const dmSubsInfo = data.candidateTitle?.filter(
-        (item) => item.ruseUtztnFcltNm && item.ruseUtztnFcltCd
-      );
-      // Transform form data to madata.candidateTitletch API schema
-      const apiData: DemandCompBizType = {
-        dmdInfoId:
-          JSON.parse(
-            sessionStorage.getItem("user") || "{}"
-          )?.dmdInfoId?.toString() ||
-          searchParams.get("dmdInfoId") + (searchParams.get("bznmTotNo") || ""),
-        dmdInfoFk:
-          JSON.parse(
-            sessionStorage.getItem("user") || "{}"
-          )?.dmdInfoId?.toString() ||
-          searchParams.get("dmdInfoId") + (searchParams.get("bznmTotNo") || ""),
-        dmdCoNm:
-          JSON.parse(
-            sessionStorage.getItem("user") || "{}"
-          )?.dmdCoNm?.toString() || data.sdmNm,
-        ctpvCd:
-          JSON.parse(
-            sessionStorage.getItem("user") || "{}"
-          )?.ctpvCd?.toString() ||
-          searchParams.get("ctpvCd") ||
-          "",
-        sggCd:
-          JSON.parse(
-            sessionStorage.getItem("user") || "{}"
-          )?.sggCd?.toString() ||
-          searchParams.get("sggCd") ||
-          "",
-        daddr:
-          JSON.parse(
-            sessionStorage.getItem("user") || "{}"
-          )?.daddr?.toString() ||
-          searchParams.get("daddr") ||
-          "",
-        telno:
-          JSON.parse(
-            sessionStorage.getItem("user") || "{}"
-          )?.telno?.toString() ||
-          searchParams.get("telno") ||
-          "",
-        rgtr:
-          JSON.parse(
-            sessionStorage.getItem("user") || "{}"
-          )?.rgtr?.toString() ||
-          searchParams.get("rgtr") ||
-          "",
-        useUsgCd: data.usePurpose || "",
-        wntUntprc: Number(data.money) || "",
-        dmndTmng: data.demandYmd || new Date(),
-        dmndQty: Number(data.demandQnty) || "",
-        grssClfg: data.grssClfg === null ? -1 : Number(data.grssClfg),
-        tn: Number(data.tn) || null,
-        combResdch: Number(data.combResdch) || null,
-        tph: Number(data.tph) || null,
-        trbt: Number(data.trbt) || null,
-        ph: data.ph || "",
-        blgcOxygDmndQnt: Number(data.bod) ||null,
-        clIonQnt: Number(data.clIonQnt) || null,
-        smll: data.smll || "",
-        cdtnv: Number(data.cdtnv) ||null,
-        crmty: Number(data.crmty) || null,
-        rmrk: data.rmrk || "",
-        bzmnNo: "",
-        dmdAplyPswd: "",
-        index: 0,
-        reqDt: "",
-        dmdInfoSn: 0,
-        status: "",
-        splyCndtList: dmSubsInfo || [],
-      };
-
-      await insertSdmInfoData(apiData);
-      setTimeout(() => {
-        router.push("/");
-      }, 1000); // 0.8초 후 이동
-    } catch (error) {
-      console.error("Error submitting form:", error);
-    }
-  };
-
-  return (
-    <div className="min-h-screen bg-[#F2F2F2]">
-      <div className="container mx-auto px-4 py-8">
-        <div className="text-center mb-8">
-          <h1 className="text-4xl font-bold text-gray-900 underline">
-            수요정보 등록
-          </h1>
-        </div>
-
-        <div className="max-w-3xl mx-auto bg-white rounded-lg shadow-md p-6">
-          <FormProvider {...form}>
-            <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
-              <SdmInfoRegForm
-                form={form}
-                onCheckboxChange={setIsmoneyDisabled}
-                facilityName={facilityName}
-              />
-              <div className="flex justify-center pt-4">
-                <Button
-                  color="sky"
-                  size={"sm"}
-                  type="submit"
-                  className="w-40 font-semibold py-2 px-4 rounded-md "
-                >
-                  수요정보 등록
-                </Button>
-              </div>
-            </form>
-          </FormProvider>
-        </div>
-      </div>
-
-      {!isLogin ? (
-        <UiModal
-          body={<SdmLogin />}
-          bodyClass="sm:max-w-[90vw] w-[530px] h-[430px]"
-          open={!isLogin}
-          onOpenChange={(open) => {
-            if (!open) {
-              toast.dismiss();
-              router.push("/");
-            }
-          }}
-          noHeaderYn="Y"
-          noFooterYn="Y"
-        />
-      ) : null}
-      <Toaster position="top-center" />
-    </div>
-  );
-}
-
-export default function MyForm() {
-  return (
-    <Suspense fallback={<div>Loading...</div>}>
-      <SdmInfoInsertContent />
-    </Suspense>
-  );
-}

apps/dm/app/(base-layout)/pages/sdmMng/sdmInsert/page.tsx

@@ -1,67 +0,0 @@
-"use client";
-
-import { useDmStore } from "@/app/store";
-import SdmInsertForm from '@common/business_components/ui/sdmInsertForm';
-import type { DemandCompType } from "@common/business_components/ui/sdmInsertForm/form";
-import { useRouter } from "next/navigation";
-import { useCallback, useEffect, useRef } from "react";
-import { Toaster } from "react-hot-toast";
-
-export default function MyForm() {
-  const { Common, initializeCommonData, getDemandCompList, insertSdmData, Sdm } = useDmStore((state) => state);
-  const { selectSidoData, selectSigunData } = Common;
-  const { demandCompList, successNextPage } = Sdm;
-  const router = useRouter();
-  const formDataRef = useRef<DemandCompType | null>(null);
-
-  useEffect(() => {
-    initializeCommonData();
-  }, [initializeCommonData]);
-
-  useEffect(() => {
-    if (successNextPage && formDataRef.current) {
-      const data = formDataRef.current;
-      console.log(data);
-      const queryParams = new URLSearchParams({
-        dmdCoNm: data.dmdCoNm || '',
-        ctpvCd: data.ctpvCd || '',
-        sggCd: data.sggCd || '',
-        dmdInfoId: data.dmdInfoId || '',
-        daddr: data.daddr || '',
-        telno: data.telno || '',
-      });
-      router.push(`/pages/sdmMng/sdmInfoInsert?${queryParams.toString()}`);
-    }
-  }, [successNextPage, router]);
-
-  const callback = useCallback((searchText: string, pageCnt: number) => {
-    searchText = searchText.trim();
-    if (searchText.length > 0) {
-      getDemandCompList(searchText, pageCnt);
-    }
-  }, [getDemandCompList]);
-
-  const handleInsertSdmData = useCallback((data: import('@common/business_components/ui/sdmInsertForm/form').DemandCompType) => {
-    const convertedData: DemandCompType = {
-      ...data,
-    };
-    formDataRef.current = convertedData;
-    insertSdmData(convertedData)
-  }, [insertSdmData]);
-
-  return (
-    <div className="min-h-screen bg-[#F2F2F2]">
-      <div className="pt-12">
-        <SdmInsertForm
-          selectSidoData={selectSidoData}
-          selectSigunData={selectSigunData}
-          dataList={demandCompList}
-          rtnValue={callback}
-          rtnInputData={handleInsertSdmData}
-          openNetwork={true}
-        />
-        <Toaster position="top-center" />
-      </div>
-    </div>
-  );
-}

apps/dm/app/(base-layout)/pages/sdmMng/sdmLogin/page.tsx

@@ -1,18 +0,0 @@
-'use client'
-
-import { SdmLoginForm } from '@/components/ui/sdmLoginForm/component';
-
-export default function SdmLogin() {
-  return (
-    <div className="container mx-auto px-4 py-8">
-      <div className="text-center mb-8">
-        <h1 className="text-4xl font-bold text-gray-900 underline">
-          수요처 로그인
-        </h1>
-      </div>
-      <div className="max-w-3xl mx-auto bg-white rounded-lg shadow-md p-6">
-        <SdmLoginForm />
-      </div>
-    </div>
-  );
-}

apps/dm/app/(base-layout)/pages/wrAbout/page.tsx

@@ -1,339 +0,0 @@
-'use client';
-
-import { useEffect, useRef, useState } from 'react';
-import Image from 'next/image';
-
-const NAVS = [
-  { id: 'card1', label: '물재이용이란' },
-  { id: 'card2', label: '물재이용 필요성' },
-  { id: 'card3', label: '빗물 재이용' },
-  { id: 'card4', label: '중수 재이용' },
-  { id: 'card5', label: '하수 재이용' },
-  { id: 'card6', label: '물재이용 목표' },
-];
-
-export default function WrAboutPage() {
-  const [activeIdx, setActiveIdx] = useState(0);
-  const navRefs = useRef<(HTMLLIElement | null)[]>([]);
-  const cardRefs = useRef<(HTMLElement | null)[]>([]);
-
-  // 클릭 시 이동
-  const handleNavClick = (idx: number) => {
-    setActiveIdx(idx);
-    const targetCard = cardRefs.current[idx];
-    if (targetCard) {
-      targetCard.scrollIntoView({ behavior: 'smooth', block: 'start' });
-    }
-  };
-
-  // 키보드 이벤트 처리
-  const handleKeyDown = (e: React.KeyboardEvent, idx: number) => {
-    if (e.key === 'Enter' || e.key === ' ') {
-      e.preventDefault();
-      handleNavClick(idx);
-    }
-  };
-
-  useEffect(() => {
-    const observerOptions = {
-      root: null,
-      rootMargin: '-200px 0px 0px 0px', // 상단에서 200px 지점을 기준으로
-      threshold: 0
-    };
-
-    const observer = new IntersectionObserver((entries) => {
-      entries.forEach((entry) => {
-        if (entry.isIntersecting) {
-          const idx = cardRefs.current.findIndex(ref => ref === entry.target);
-          if (idx !== -1) {
-            setActiveIdx(idx);
-          }
-        }
-      });
-    }, observerOptions);
-
-    // 각 카드 요소를 관찰
-    const cardsSnapshot = [...cardRefs.current];
-
-    cardsSnapshot.forEach((card) => {
-      if (card) {
-        observer.observe(card);
-      }
-    });
-  
-    return () => {
-      cardsSnapshot.forEach((card) => {
-        if (card) {
-          observer.unobserve(card);
-        }
-      });
-    };
-  }, []);
-
-  return (
-    <div className='bg-[#F2F2F2]'>
-      <main className="relative w-[950px] mx-auto pt-[100px] font-sans">
-        {/* 사이드바 */}
-        <nav className="fixed left-[290px] top-[195px] w-[210px] z-50" aria-label="물재이용 정보 섹션 내비게이션">
-          <ul role="list" className="relative space-y-6">
-            {NAVS.map((nav, idx) => (
-              <li
-                key={nav.id}
-                ref={(el) => { navRefs.current[idx] = el; }}
-                role="listitem"
-                tabIndex={0}
-                aria-current={idx === activeIdx ? 'true' : 'false'}
-                aria-label={`현재 위치: ${nav.label}`}
-                onClick={() => handleNavClick(idx)}
-                onKeyDown={(e) => handleKeyDown(e, idx)}
-                className={`font-NotoSansKR nav-item relative pl-6 text-2xl font-bold text-[#383838] cursor-pointer transition-all duration-300
-                after:content-[''] after:absolute after:top-6 after:left-[0.5rem] after:w-[2px] after:h-[24px] after:bg-[#C5C5C5] last:after:hidden 
-                ${idx === activeIdx ? 'text-4xl font-bold text-[#383838]' : ''}`}
-              >
-                <span className={`absolute left-[0.5rem] top-1 w-4 h-4 rounded-full -translate-x-1/2 transition-all duration-300
-                ${idx === activeIdx ? 'bg-blue-500 border-blue-500' : 'bg-white border-gray-400 border'}`}></span>
-                {nav.label}
-              </li>
-            ))}
-          </ul>
-        </nav>
-
-        <article ref={(el) => { cardRefs.current[0] = el; }} className="card-wrap pl-[100px] mb-24 !pt-0" id="card1" aria-labelledby="card1-title">
-          <h2 id="card1-title" className="font-NotoSansKR relative text-center text-4xl font-medium text-gray-900 mb-6">
-            <span className="absolute left-1/2 top-[-15px] -translate-x-1/2 w-24 h-2 bg-blue-500 rounded-full"></span>
-            물재이용이란
-          </h2>
-          <section aria-labelledby="card1-desc" className="bg-white border border-gray-300 rounded-xl p-[60px] pt-[70px] pb-[70px] ">
-            <h1 id="card1-desc" className="font-NotoSansKR text-[#269DDA] text-5xl font-bold mb-8">물 재이용이 무엇인가요?</h1>
-            <p className="font-NotoSansKR text-[#231815] text-2xl mb-10 leading-relaxed">
-              물 재이용은 빗물, 오수, 하수처리수, 폐수처리수 및 발전소 온배수를<br />
-              물 재이용시설을 이용하여 처리하고, 그 처리된 물을 생활, 공업, 농업, 조경,<br />
-              하천 유지 등의 용도로 이용하는 것을 말합니다.
-            </p>
-            <Image
-              src="/img/wrAbout/img_01_1.png"
-              alt="이 이미지는 물 재이용 시스템의 개요를 나타냅니다. 가정, 공공기관, 하수처리장 등에서 발생한 생활하수, 빗물, 하수처리수를 물 재이용 시설에서 처리한 후, 청소나 화장실, 농업, 살수차, 하천 유지, 공장, 공원 및 골프장 등 다양한 용도로 활용하는 과정을 도식화한 것입니다."
-              width={800}
-              height={400}
-              className="w-[90%] mx-auto mb-8 rounded"
-            />
-            <p className="font-NotoSansKR text-center font-normal text-2xl">
-              환경부는 2011년에 &apos;물의 재이용 촉진 및 지원에 관한 법률&apos;을 제정하여<br />
-              한국환경공단과 함께 물 재이용 확대 및 촉진을 위해 노력하고 있습니다.
-            </p>
-          </section>
-        </article>
-
-        {/* 카드2 */}
-        <article ref={(el) => { cardRefs.current[1] = el; }} className="card-wrap pl-[100px] mb-24" id="card2" aria-labelledby="card2-title">
-          <h2 id="card2-title" className="font-NotoSansKR relative text-center text-4xl font-medium text-gray-900 mb-6">
-            <span className="absolute left-1/2 top-[-15px] -translate-x-1/2 w-24 h-2 bg-blue-500 rounded-full"></span>
-            물재이용 필요성
-          </h2>
-          <section aria-labelledby="card2-desc" className="bg-white border border-gray-300 rounded-xl p-[60px] pt-[70px] pb-[70px] ">
-            <h1 id="card2-desc" className="font-NotoSansKR text-[#D63F1F] text-5xl font-semibold mb-8">물 재이용, 왜 필요한가요?</h1>
-            <p className="font-NotoSansKR text-2xl font-normal mb-10 leading-relaxed">
-              빗물, 중수, 하수처리수는 지속적으로 이용 가능한 순환자원입니다.<br />
-              물 재이용을 통한 효율적인 수자원 활용은 물 스트레스국가인 우리나라에서<br />가뭄대응능력 향상 및 하천수질보전을 위해 반드시 필요한 일입니다.
-            </p>
-            <Image
-              src="/img/wrAbout/img_02_1.png"
-              alt="이 이미지는 기후변화로 인한 온도 상승 추이를 설명한다. 왼쪽에는 지구 그림과 온도계가 함께 표시되어 있으며, 지구 평균 기온은 지난 100년간 약 0.9℃ 상승했음을 나타낸다. 오른쪽에는 대한민국 지도와 함께 온도계가 있으며, 지난 100년간 약 1.8℃ 상승했음을 보여준다. 이는 지구 평균보다 2배 높은 수치이며, 자료 출처는 「기후변화 평가보고서 2020, 환경부·기상청」이다."
-              width={800}
-              height={400}
-              className="w-[90%] mx-auto mb-8 w-[80%]"
-            />
-            <p className="font-NotoSansKR text-2xl mb-10 leading-relaxed">
-              - 우리나라의 기후변화 진행속도는 세계 평균을 상회하고 있습니다.<br />
-              - 기후변화로 인한 국지적인 가뭄은 더욱 자주, 더욱 심하게 일어나고 있으며, 우리의 물 안보를 위협하고 있습니다.
-            </p>
-            <Image
-              src="/img/wrAbout/img_02_2.png"
-              alt="세계 평균 1인당 강수량은 15,044m³이며, 대한민국은 2,546m³로 약 1/6 수준입니다. 계절별 강수량은 봄 10%, 여름 70%, 가을 15%, 겨울 5%입니다. 이는 여름철에 강수량이 집중되는 문제를 나타냅니다."
-              width={800}
-              height={400}
-              className="w-[90%] mx-auto mb-8"
-            />
-            <p className="font-NotoSansKR text-2xl mb-10 leading-relaxed">
-              - 우리나라의 1인당 강수량은 2,546㎥ 으로 세계 평균 15,044㎥의 약 1/6 수준입니다.<br />
-              - 우리나라 강수량의 70%는 여름철에 집중되어 있어 이용 가능한 수자원확보가 어렵습니다.
-            </p>
-            <Image
-              src="/img/wrAbout/img_02_3.png"
-              alt="물 재이용은 환경을 보호하며 지속 가능한 발전이 가능하게 하고, 안정적인 수자원 확보, 깨끗하고 경제적인 공업용수 공급, 하천 수질 개선을 통한 생태계 회복에 기여합니다."
-              width={800}
-              height={400}
-              className="w-[93%] mx-auto"
-            />
-          </section>
-        </article>
-
-        {/* 카드3 */}
-        <article ref={(el) => { cardRefs.current[2] = el; }} className="card-wrap pl-[100px] mb-24" id="card3" aria-labelledby="card3-title">
-          <h2 id="card3-title" className="font-NotoSansKR relative text-center text-4xl font-medium text-gray-900 mb-6">
-            <span className="absolute left-1/2 top-[-15px] -translate-x-1/2 w-24 h-2 bg-blue-500 rounded-full"></span>
-            빗물 재이용
-          </h2>
-          <section aria-labelledby="card3-desc" className="bg-white border border-gray-300 rounded-xl p-[60px] pt-[70px] pb-[70px] ">
-            <h1 id="card3-desc" className="font-NotoSansKR leading-snug text-[#269DDA] text-5xl font-bold mb-6">친환경 수자원 빗물,<br />편리하게 사용할 수 있어요!</h1>
-            <p className="font-NotoSansKR text-2xl mb-10 leading-relaxed">가뭄을 극복하고 홍수를 예방하기 위해<br />비가 내릴 때 빗물을 모아두었다가 사용합니다.</p>
-            <Image
-              src="/img/wrAbout/img_03_1.png"
-              alt="주택 지붕에 내린 빗물을 저장조에 모아 조경용수, 화장실용수, 세척·살수용수로 재활용하는 과정을 보여줍니다."
-              width={800}
-              height={400}
-              className="w-[90%] mx-auto mb-6"
-            />
-            <Image
-              src="/img/wrAbout/img_03_2.png"
-              alt="빗물이용"
-              width={200}
-              height={100}
-              className="mb-5 w-[20%]"
-            />
-            <p className="font-NotoSansKR text-2xl leading-relaxed">
-              - 의무 설치대상: 지붕면적 1,000㎡ 이상의 운동장, 체육관, 공공업무시설 등<br />
-              - 설 치 기 준: 집수시설, 처리시설, 빗물 저류조(지붕 집수면적 x 0.05m 이상)<br />
-              - 활 용 용 도: 골프장 등의 조경용수, 화장실용수, 세척·살수용수 등
-            </p>
-          </section>
-        </article>
-
-        {/* 카드4 */}
-        <article ref={(el) => { cardRefs.current[3] = el; }} className="card-wrap pl-[100px] mb-24" id="card4" aria-labelledby="card4-title">
-          <h2 id="card4-title" className="font-NotoSansKR relative text-center text-4xl font-medium text-gray-900 mb-6">
-            <span className="absolute left-1/2 top-[-15px] -translate-x-1/2 w-24 h-2 bg-blue-500 rounded-full"></span>
-            중수 재이용
-          </h2>
-          <section aria-labelledby="card4-desc" className="bg-white border border-gray-300 rounded-xl p-[60px] pt-[70px] pb-[70px] ">
-            <h1 id="card4-desc" className="font-NotoSansKR leading-snug text-[#9771B0] text-5xl font-bold mb-6">요모조모 쓸모 많은 중수,<br />알뜰하게 재이용할 수 있어요!</h1>
-            <p className="font-NotoSansKR text-2xl mb-10 leading-relaxed">한번 사용한 물을 중수도 시설을 통해 재생하여<br />개별적 또는 지역적으로 재이용할 수 있습니다.</p>
-            <Image
-              src="/img/wrAbout/img_04_1.png"
-              alt="욕실, 세면대, 주방, 세탁기 등에서 발생한 생활용수를 중수도 시설에서 처리하여 화장실 변기용수와 조경용수로 재이용하는 시스템 흐름도입니다."
-              width={800}
-              height={400}
-              className="w-[90%] mx-auto mb-6"
-            />
-            <Image
-              src="/img/wrAbout/img_04_2.png"
-              alt="중수재이용"
-              width={200}
-              height={100}
-              className="mb-5 w-[20%]"
-            />
-            <p className="font-NotoSansKR text-2xl leading-relaxed">
-              - 의무 설치대상: 일정규모 이상의 대규모점포, 숙박/목욕장, 공장, 각종 개발사업 등<br />
-              - 의무 재이용량: 물 사용량의 10% 이상<br />
-              - 활 용 용 도: 청소·화장실용수, 세척·살수용수, 조경용수, 공업용수 등
-            </p>
-          </section>
-        </article>
-
-        {/* 카드5 */}
-        <article ref={(el) => { cardRefs.current[4] = el; }} className="card-wrap pl-[100px] mb-24" id="card5" aria-labelledby="card5-title">
-          <h2 id="card5-title" className="font-NotoSansKR relative text-center text-4xl font-medium text-gray-900 mb-6">
-            <span className="absolute left-1/2 top-[-15px] -translate-x-1/2 w-24 h-2 bg-blue-500 rounded-full"></span>
-            하수 재이용
-          </h2>
-          <section aria-labelledby="card5-desc" className="bg-white border border-gray-300 rounded-xl p-[60px] pt-[70px] pb-[70px] ">
-            <h1 id="card5-desc" className="font-NotoSansKR leading-snug text-[#00818A] text-5xl font-bold mb-6">아직 할 일이 많은 하수처리수,<br />풍족하게 재이용할 수 있어요!</h1>
-            <p className="font-NotoSansKR text-2xl mb-10 leading-relaxed">사용하고 버려져 공공하수처리장으로 모여든 물은<br />용도에 맞는 처리 후 재이용 할 수 있습니다.</p>
-            <Image
-              src="/img/wrAbout/img_05_1.png"
-              alt="주택과 건물에서 발생한 하수가 공공하수처리장을 거쳐 처리된 후, 물 재이용 시설에서 정화되어 공업용수, 하천유지용수, 농업용수, 세척·살수용수로 재활용됩니다."
-              width={800}
-              height={400}
-              className="w-[90%] mx-auto mb-6"
-            />
-            <Image
-              src="/img/wrAbout/img_05_2.png"
-              alt="하수처리 재이용"
-              width={200}
-              height={100}
-              className="mb-5 w-[20%]"
-            />
-            <p className="font-NotoSansKR text-2xl leading-relaxed">
-              - 의무 이용대상: 공공하수처리장(시설용량 5,000㎥/일 이상)<br />
-              - 의무 재이용량: 일 하수처리량의 10% 이상<br />
-              - 활 용 용 도: 공업용수, 하천유지용수, 농업용수 등
-            </p>
-          </section>
-        </article>
-
-        {/* 카드6 */}
-        <article ref={(el) => { cardRefs.current[5] = el; }} className="card-wrap pl-[100px] mb-24" id="card6" aria-labelledby="card6-title">
-          <h2 id="card6-title" className="font-NotoSansKR relative text-center text-4xl font-medium text-gray-900 mb-6">
-            <span className="absolute left-1/2 top-[-15px] -translate-x-1/2 w-24 h-2 bg-blue-500 rounded-full"></span>
-            물재이용 목표
-          </h2>
-          <section aria-labelledby="card6-desc" className="bg-white border border-gray-300 rounded-xl p-[60px] pt-[70px] pb-[70px] ">
-            <h1 id="card6-desc" className="font-NotoSansKR leading-snug text-[#269DDA] text-5xl font-bold mb-6">2030년 물 재이용 목표를 위해<br />모두의 관심과 노력이 필요합니다.</h1>
-            <p className="font-NotoSansKR text-2xl mb-6 leading-relaxed">
-              환경부는 2030년까지의 제2차 물 재이용 기본계획을 수립하여<br />한국환경공단과 함께 물 재이용 확대 및 촉진을 위해 노력하고 있습니다.
-            </p>
-            <Image
-              src="/img/wrAbout/img_06_1.png"
-              alt="지속가능한 물 재이용 정착으로 건전한 물순환 확산"
-              width={800}
-              height={400}
-              className="w-[80%] mx-auto mb-6"
-            />
-            <div className="flex gap-3 flex-wrap justify-between bg-gray-100 p-6 rounded-lg mb-8">
-              <div className="flex-1 text-center">
-                <Image
-                  src="/img/wrAbout/icon_01.png"
-                  alt=""
-                  width={70}
-                  height={70}
-                  className="mx-auto mb-4 w-[auto] h-[70px]"
-                />
-                <h3 className="font-NotoSansKR text-center font-medium text-nowrap mb-2 text-2xl">도시 물 순환이용<br />체계로의 전환</h3>
-                <ul className="font-NotoSansKR text-xl text-gray-600 leading-relaxed space-y-1">
-                  <li className="text-nowrap">- 지속가능한 물 순환이용체계 구축</li>
-                  <li>- 물 재이용시설 관리체계 강화</li>
-                </ul>
-              </div>
-              <div className="flex-1 text-center">
-                <Image
-                  src="/img/wrAbout/icon_02.png"
-                  alt=""
-                  width={70}
-                  height={70}
-                  className="mx-auto mb-4 w-[auto] h-[70px]"
-                />
-                <h3 className="font-NotoSansKR text-center font-medium text-nowrap mb-2 text-2xl">유역기반 하수처리수 재이용<br />수요확대 및 공급체계 구축</h3>
-                <ul className="font-NotoSansKR text-xl text-gray-600 leading-relaxed space-y-1">
-                  <li>- 유역기반 통합물관리 연계 강화</li>
-                  <li>- 하수처리수 재이용 공업용수 공급 활성화</li>
-                  <li>- 하수처리수 재이용을 활용한 물순환 촉진</li>
-                </ul>
-              </div>
-              <div className="flex-1 text-center">
-                <Image
-                  src="/img/wrAbout/icon_03.png"
-                  alt=""
-                  width={70}
-                  height={70}
-                  className="mx-auto mb-4 w-[auto] h-[70px]"
-                />
-                <h3 className="font-NotoSansKR text-center font-medium text-nowrap mb-2 text-2xl">물 재이용 인식제고<br />및 산업발전 기반 마련</h3>
-                <ul className="font-NotoSansKR text-xl text-gray-600 leading-relaxed space-y-1">
-                  <li>- 물 재이용 교육 및 대국민 홍보 강화</li>
-                  <li>- 핵심기술 육성 및 산업발전 지원 강화</li>
-                </ul>
-              </div>
-            </div>
-            <Image
-              src="/img/wrAbout/img_06_2.png"
-              alt="물 재이용량은 2014년 13.3억톤에서 2030년 25.9억톤까지 증가할 것으로 예상됩니다. 그에 따른 기대 효과로는 연간 상수대체 17.9억톤, 물산업 시장성장 약 2조3,541억 원, 건천화된 73개 하천 해소, 약 20,550명의 고용 효과가 포함됩니다."
-              width={800}
-              height={400}
-              className="w-[90%] mx-auto"
-            />
-          </section>
-        </article>
-      </main>
-    </div>
-  );
-}

apps/dm/app/(base-layout)/pages/wrExample/page.tsx

@@ -1,364 +0,0 @@
-import Image from "next/image";
-
-export default function WrExamplePage() {
-  return (
-    <div className="bg-[#F2F2F2]">
-      <div className="relative w-[950px] mx-auto pt-[50px] font-sans">
-        <h2 className="font-NotoSansKR relative text-center text-4xl font-bold text-gray-900 mb-6">
-          <span className="absolute left-1/2 top-[-15px] -translate-x-1/2 w-24 h-2 rounded-full"></span>
-          물 재이용사례
-        </h2>
-      </div>
-      <div className="bg-[#F2F2F2] text-gray-800">
-        <div className="relative w-[950px] mx-auto pt-[50px] font-sans">
-          {/* 카드 1 */}
-          <div className="card-wrap mb-24" id="card1">
-            <h2 className="font-NotoSansKR relative text-center text-4xl font-bold text-gray-900 mb-6">
-              <span className="absolute left-1/2 top-[-15px] -translate-x-1/2 w-24 h-2 bg-blue-500 rounded-full"></span>
-              사업사례 1 
-            </h2>
-            <div className="bg-white border border-gray-300 rounded-xl p-[60px] pt-[70px] pb-[70px]">
-              {/* 사업명 */}
-              <section>
-                <h2 className="font-NotoSansKR text-2xl text-[#657D91] font-bold bg-[#EAEFF3] p-3 rounded mb-4">사업명</h2>
-                <p className="font-NotoSansKR text-2xl font-semibold text-gray-800 leading-relaxed">
-                  경기권역 반도체 사업장 물 재이용 사업<br />
-                  : 삼성전자 반도체 사업장 하수재이용수 공급(재이용시설 설치, 공급망 구축 등)
-                </p>
-              </section>
-              {/* 사업 배경 및 목적 */}
-              <section className="mt-8">
-                <h2 className="font-NotoSansKR text-2xl text-[#657D91] font-bold bg-[#EAEFF3] p-3 rounded mb-4">사업 배경 및 목적</h2>
-                <p className="font-NotoSansKR text-2xl font-semibold text-gray-800 leading-relaxed">
-                  삼성전자는 환경경영전략 실현과 반도체 공장의 안정적 용수 공급을 위해 하수 재이용수를 공업용수로 도입하기로 결정
-                </p>
-              </section>
-              {/* 사업 주요 내용 */}
-              <section className="mt-8">
-                <h2 className="font-NotoSansKR text-2xl text-[#657D91] font-bold bg-[#EAEFF3] p-3 rounded mb-4">사업 주요 내용</h2>
-                <p className="font-NotoSansKR text-2xl font-semibold text-gray-800 leading-relaxed">
-                  1단계 사업[화성·오산(12만㎥/일) → 삼성 화성·기흥(29년 공급)]<br />
-                  2단계 사업[수원(21만㎥/일) → 삼성 평택(30년 공급)]
-                </p>
-              </section>
-              {/* 특이사항 */}
-              <section className="mt-8">
-                <h2 className="font-NotoSansKR text-2xl text-[#657D91] font-bold bg-[#EAEFF3] p-3 rounded mb-4">특이사항</h2>
-                <p className="font-NotoSansKR text-2xl font-semibold text-gray-800 leading-relaxed">
-                  본 사업은 광역 하수 재이용 공급망 구축의 첫 사업으로 초기 민관협의체를 구성·운영 후 관계기관(환경부, 경기도, 지자체, 공단, 수공, 삼성전자) 간 MOU 체결을 통해 사업을 추진하였으며, 반도체 사업장에 하수 재이용수를 공업용수로 공급하는 국내 첫 사업으로 위협부담 해소를 위해 사업을 단계별로 시행
-                </p>
-              </section>
-              {/* 단계별 시각 정보 */}
-              <section className="bg-white px-4 mt-8">
-                <Image 
-                  src="/img/wrExample/img_ex_01_1.png" 
-                  alt="사업단계 설명" 
-                  width={800}
-                  height={400}
-                  className="w-[100%] mx-auto mb-8" 
-                />
-              </section>
-            </div>
-          </div>
-
-          {/* 카드2 */}
-          <div className="card-wrap mb-24" id="card2">
-            <h2 className="font-NotoSansKR relative text-center text-4xl font-bold text-gray-900 mb-6">
-              <span className="absolute left-1/2 top-[-15px] -translate-x-1/2 w-24 h-2 bg-blue-500 rounded-full"></span>
-              사업사례 2
-            </h2>
-            <div className="bg-white border border-gray-300 rounded-xl p-[60px] pt-[70px] pb-[70px]">
-              {/* 사업명 */}
-              <section>
-                <h2 className="font-NotoSansKR text-2xl text-[#657D91] font-bold bg-[#EAEFF3] p-3 rounded mb-4">사업명</h2>
-                <p className="font-NotoSansKR text-2xl font-semibold text-gray-800 leading-relaxed">
-                  경기도 파주시 하수재이용<br />
-                  : 운정·금촌하수처리시설의 하수처리수를 막공법(U/F, R/O)으로 재처리하여 파주 LCD 산업단지내 3개 업체*에 공업용수 공급<br /><br />
-                  *LG디스플레이(P10공장), 희성전자, 엔비텍 등
-                </p>
-              </section>
-              {/* 사업 방식 */}
-              <section className="mt-8">
-                <h2 className="font-NotoSansKR text-2xl text-[#657D91] font-bold bg-[#EAEFF3] p-3 rounded mb-4">사업 방식</h2>
-                <p className="font-NotoSansKR text-2xl font-semibold text-gray-800 leading-relaxed">
-                  민간투자사업(시행사 : 파주그린허브(주), 운영사 : 테크로스)
-                </p>
-              </section>
-              {/* 사업 주요 내용 */}
-              <section className="mt-8">
-                <h2 className="font-NotoSansKR text-2xl text-[#657D91] font-bold bg-[#EAEFF3] p-3 rounded mb-4">사업 주요 내용</h2>
-                <p className="font-NotoSansKR text-2xl font-semibold text-gray-800 leading-relaxed">
-                  처리공정 : 전처리분리막(U/F) + 역삼투서비(R/O)<br />
-                  공급량 : 4만m³/일<br />
-                  관로 : 13.6km<br />
-                  사업비 : 651억원
-                </p>
-              </section>
-              {/* 특이사항 */}
-              <section className="mt-8">
-                <h2 className="font-NotoSansKR text-2xl text-[#657D91] font-bold bg-[#EAEFF3] p-3 rounded mb-4">특이사항</h2>
-                <p className="font-NotoSansKR text-2xl font-semibold text-gray-800 leading-relaxed">
-                  하수처리수 재이용시설 자체 농축폐수 처리공정 개발 및 적용 성공사례
-                </p>
-                <div className="grid grid-cols-1 gap-0 items-start">
-                  {/* 좌측 이미지 */}
-                  <div>
-                    <Image 
-                      src="/img/wrExample/img_ex_02_1.png" 
-                      alt="적용 성공사례 지도" 
-                      width={1000}
-                      height={1200}
-                      className="w-[100%] mx-auto" 
-                    />
-                  </div>
-
-                  {/* 우측 표 */}
-                  <div className="space-y-3">
-                    {/* 하수처리수 공급 */}
-                    <div>
-                      <table className="min-w-full h-[500px]text-center border border-black">
-                        <colgroup>
-                          <col style={{ width: "20%" }} />
-                          <col style={{ width: "40%" }} />
-                          <col style={{ width: "40%" }} />
-                        </colgroup>
-                        <tbody>
-                          <tr>
-                            <td colSpan={3} className="font-NotoSansKR bg-[#ffc000] h-[30px] text-xl text-white font-semibold text-center pt-[6px] pb-[6px] px-0">하수처리수 공급</td>
-                          </tr>
-                          <tr className="text-xl h-[30px]">
-                            <td className="font-NotoSansKR text-xl h-[30px] border-black border p-1 font-bold">위치</td>
-                            <td className="font-NotoSansKR text-xl h-[30px] border-black border p-1 font-bold">금촌하수</td>
-                            <td className="font-NotoSansKR text-xl h-[30px] border-black border p-1 font-bold">운정하수</td>
-                          </tr>
-                          <tr className="text-sm">
-                            <td className="font-NotoSansKR text-xl h-[30px] border-black border p-1 font-bold">시설용량</td>
-                            <td className="font-NotoSansKR text-xl h-[30px] border-black border p-1 font-bold">44,000㎥/일</td>
-                            <td className="font-NotoSansKR text-xl h-[30px] border-black border p-1 font-bold">60,000㎥/일</td>
-                          </tr>
-                          <tr className="text-sm">
-                            <td className="font-NotoSansKR text-xl h-[30px] border-black border p-1 font-bold">유입량</td>
-                            <td className="font-NotoSansKR text-xl h-[30px] border-black border p-1 font-bold">27,000㎥/일<br />자연유하</td>
-                            <td className="font-NotoSansKR text-xl h-[30px] border-black border p-1 font-bold">30,000㎥/일<br />이송펌프장</td>
-                          </tr>
-                        </tbody>
-                      </table>
-                      {/* 첫 화살표 (자연유하 / 관로이송) */}
-                      <div className="flex h-[30px] justify-between items-center my-3 px-4">
-                        <div className="flex text-xl items-center gap-1 text-orange-600 font-bold pl-6">
-                          <span className="font-NotoSansKR">자연유하: 161m</span>
-                          <Image 
-                            src="/img/wrExample/img_arrow_down_1.png" 
-                            alt="오른쪽 화살표" 
-                            width={24}
-                            height={24}
-                            className="h-6 w-6" 
-                          />
-                        </div>
-                        <div className="flex text-xl items-center gap-1 text-orange-600 font-bold">
-                          <Image 
-                            src="/img/wrExample/img_arrow_down_1.png" 
-                            alt="왼쪽 화살표" 
-                            width={24}
-                            height={24}
-                            className="h-6 w-6" 
-                          />
-                          <span className="font-NotoSansKR">관로이송: 3.2km</span>
-                        </div>
-                      </div>
-                    </div>
-
-                    {/* 물재이용 처리시설 */}
-                    <div>
-                      <table className="min-w-full text-center border border-black">
-                        <colgroup>
-                          <col style={{ width: "50%" }} />
-                          <col style={{ width: "50%" }} />
-                        </colgroup>
-                        <tbody>
-                          <tr>
-                            <td colSpan={2} className="font-NotoSansKR bg-[#00b050] text-xl h-[30px] text-white font-semibold text-center pt-[6px] pb-[6px] px-0">물재이용 처리시설</td>
-                          </tr>
-                          <tr className="text-sm">
-                            <td className="font-NotoSansKR text-xl h-[30px] border-black border p-1 font-bold">유입유량</td>
-                            <td className="font-NotoSansKR text-xl h-[30px] border-black border p-1 font-bold">57,000㎥/일</td>
-                          </tr>
-                          <tr className="text-sm">
-                            <td className="font-NotoSansKR text-xl h-[30px] border-black border p-1 font-bold">재이용시설</td>
-                            <td className="font-NotoSansKR text-xl h-[30px] border-black border p-1 font-bold">40,000㎥/일</td>
-                          </tr>
-                          <tr className="text-sm">
-                            <td className="font-NotoSansKR text-xl h-[30px] border-black border p-1 font-bold">농축폐수처리</td>
-                            <td className="font-NotoSansKR text-xl h-[30px] border-black border p-1 font-bold">17,000㎥/일</td>
-                          </tr>
-                        </tbody>
-                      </table>
-                      {/* 두 번째 화살표 (공급관로) */}
-                      <div className="flex flex-col items-center my-3">
-                        <div className="flex h-[30px] items-center gap-1 text-xl text-blue-600 font-semibold">
-                          <span className="font-NotoSansKR">공급관로 L=10.4km</span>
-                          <Image 
-                            src="/img/wrExample/img_arrow_down_2.png" 
-                            alt="아래 화살표" 
-                            width={24}
-                            height={24}
-                            className="h-6 w-6" 
-                          />
-                        </div>
-                      </div>
-                    </div>
-
-                    {/* 수요처 공급 */}
-                    <div>
-                      <table className="min-w-full text-center border border-black">
-                        <colgroup>
-                          <col style={{ width: "50%" }} />
-                          <col style={{ width: "50%" }} />
-                        </colgroup>
-                        <tbody>
-                          <tr>
-                            <td colSpan={2} className="font-NotoSansKR bg-[#3399ff] h-[30px] text-xl text-white font-semibold text-center pt-[6px] pb-[6px] px-0">수요처 공급</td>
-                          </tr>
-                          <tr className="text-sm">
-                            <td className="font-NotoSansKR text-xl h-[30px] border-black border p-1 font-bold">수요처</td>
-                            <td className="font-NotoSansKR text-xl h-[30px] border-black border p-1 font-bold">LG디스플레이 외 2개사</td>
-                          </tr>
-                          <tr className="text-sm">
-                            <td className="font-NotoSansKR text-xl h-[30px] border-black border p-1 font-bold">수요량</td>
-                            <td className="font-NotoSansKR text-xl h-[30px] border-black border p-1 font-bold">40,000㎥/일</td>
-                          </tr>
-                        </tbody>
-                      </table>
-                    </div>
-                  </div>
-                </div>
-              </section>
-            </div>
-          </div>
-
-          {/* 카드3 */}
-          <div className="card-wrap mb-24" id="card3">
-            <h2 className="font-NotoSansKR relative text-center text-4xl font-bold text-gray-900 mb-6">
-              <span className="absolute left-1/2 top-[-15px] -translate-x-1/2 w-24 h-2 bg-blue-500 rounded-full"></span>
-              사업사례 3
-            </h2>
-            <div className="bg-white border border-gray-300 rounded-xl p-[60px] pt-[70px] pb-[70px]">
-              {/* 사업명 */}
-              <section>
-                <h2 className="font-NotoSansKR text-2xl text-[#657D91] font-bold bg-[#EAEFF3] p-3 rounded mb-4">사업명</h2>
-                <p className="font-NotoSansKR text-2xl font-semibold text-gray-800 leading-relaxed">
-                  충남 보령 하수재이용<br />
-                  : 보령·신보령화력발전소에 하루 1만톤의 탈황용수 공급을 위해 보령하수처리시설의 하수처리수 재이용 사업 추진
-                </p>
-              </section>
-              {/* 사업 방식 */}
-              <section className="mt-8">
-                <h2 className="font-NotoSansKR text-2xl text-[#657D91] font-bold bg-[#EAEFF3] p-3 rounded mb-4">사업 방식</h2>
-                <p className="font-NotoSansKR text-2xl font-semibold text-gray-800 leading-relaxed">
-                  2017년 한국환경공단과 사업대행 위 · 수탁 협약 체결
-                </p>
-              </section>
-              {/* 사업 주요 내용 */}
-              <section className="mt-8">
-                <h2 className="font-NotoSansKR text-2xl text-[#657D91] font-bold bg-[#EAEFF3] p-3 rounded mb-4">사업 주요 내용</h2>
-                <p className="font-NotoSansKR text-2xl font-semibold text-gray-800 leading-relaxed">
-                  처리공정 : 전처리분리막(U/F) + 역삼투서비(R/O)<br />
-                  공급량 : 1만m3/일<br />
-                  관로 : 8.7km<br />
-                  사업비 : 315억원(국비 216억원, 재원협의(안))
-                </p>
-              </section>
-              {/* 특이사항 */}
-              <section className="mt-8">
-                <h2 className="font-NotoSansKR text-2xl text-[#657D91] font-bold bg-[#EAEFF3] p-3 rounded mb-4">특이사항</h2>
-                <p className="font-NotoSansKR text-2xl font-semibold text-gray-800 leading-relaxed">
-                  국내 유일 하수재이용 공업용수 공급 재정사업으로 2016년 충남 서부권 가뭄 시 지역사회 기여 차원에서 기관간 MOU (환경부, 충청남도, 보령시, 한국중부발전㈜)를 바탕
-                  으로 추진 되어 경제성보다 공익성을 바탕으로 국가전력 기반시설의 안정적 운영 도모
-                </p>
-                <div className="p-2">
-                  <Image 
-                    src="/img/wrExample/img_ex_03_1.png" 
-                    alt="국가전력 기반시설 설명" 
-                    width={700}
-                    height={350}
-                    className="w-[100%] mx-auto" 
-                  />
-                </div>
-              </section>
-            </div>
-          </div>
-
-          {/* 카드4 */}
-          <div className="card-wrap mb-24" id="card4">
-            <h2 className="font-NotoSansKR relative text-center text-4xl font-bold text-gray-900 mb-6">
-              <span className="absolute left-1/2 top-[-15px] -translate-x-1/2 w-24 h-2 bg-blue-500 rounded-full"></span>
-              사업사례 4
-            </h2>
-            <div className="bg-white border border-gray-300 rounded-xl p-[60px] pt-[70px] pb-[70px]">
-              {/* 사업명 */}
-              <section>
-                <h2 className="font-NotoSansKR text-2xl text-[#657D91] font-bold bg-[#EAEFF3] p-3 rounded mb-4">사업명</h2>
-                <p className="font-NotoSansKR text-2xl font-semibold text-gray-800 leading-relaxed">
-                  경기도 수원시 빗물이용과 중수도
-                </p>
-              </section>
-              {/* 사업 내용 */}
-              <section className="mt-8">
-                <h2 className="font-NotoSansKR text-2xl text-[#657D91] font-bold bg-[#EAEFF3] p-3 rounded mb-4">사업 내용</h2>
-                <p className="font-NotoSansKR text-2xl font-semibold text-gray-800 leading-relaxed">
-                  (빗물) 월드컵경기장 등 4개소에 노면 빗물분사시스템 및 빗물 공급기를 설치하여 혹서기 도시 열섬효과 및 도로 비산먼지 저감<br />
-                  &nbsp;&nbsp;※ 시설 가동중 도로 노면 온도의 7.2 ~ 26.3℃ 감소 효과 확인(21.7월, 수원시청).<br />
-                  &nbsp;&nbsp;다만, 가뭄기나 강우량이 적을 경우 빗물을 원활히 공급하기 다소 곤란<br /><br />
-                  - (중수도) 수원시청, 장안구청, 월드컵경기장에 빗물 연계 중수도를 화장실·조경용수 등으로 사용하여 수도요금 절감(연 7백~30백만원)
-                </p>
-                <div className="grid grid-cols-1 md:grid-cols-2 gap-2 items-start p-2">
-                  <div>
-                    <Image 
-                      src="/img/wrExample/img_ex_04_1.png" 
-                      alt="월드컵경기장 인근도로 노면 살수 이미지" 
-                      width={350}
-                      height={250}
-                      className="w-[100%] mx-auto" 
-                    />
-                    <span className="font-NotoSansKR text-xl block text-center font-semibold my-2">＜월드컵경기장 인근도로 노면 살수＞</span>
-                  </div>
-                  <div>
-                    <Image 
-                      src="/img/wrExample/img_ex_04_2.png" 
-                      alt="주유기 모양의 빗물 공급기 이미지" 
-                      width={350}
-                      height={250}
-                      className="w-[100%] mx-auto" 
-                    />
-                    <span className="font-NotoSansKR text-xl block text-center font-semibold my-2">＜주유기 모양의 빗물 공급기＞</span>
-                  </div>
-                  <div>
-                    <Image 
-                      src="/img/wrExample/img_ex_04_3.png" 
-                      alt="빗물주유기에서 살수용수 공급 이미지" 
-                      width={350}
-                      height={250}
-                      className="w-[100%] mx-auto" 
-                    />
-                    <span className="font-NotoSansKR text-xl block text-center font-semibold my-2">＜빗물주유기에서 살수용수 공급＞</span>
-                  </div>
-                  <div>
-                    <Image 
-                      src="/img/wrExample/img_ex_04_4.png" 
-                      alt="빗물 공급기 및 빗물분사장치 위치" 
-                      width={350}
-                      height={250}
-                      className="w-[100%] mx-auto" 
-                    />
-                    <span className="font-NotoSansKR text-xl block text-center font-semibold my-2">＜빗물 공급기 및 빗물분사장치 위치＞</span>
-                  </div>
-                </div>
-              </section>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
-

apps/dm/app/(base-layout)/pages/wrOverview/page.tsx

@@ -1,113 +0,0 @@
-import Image from "next/image";
-
-export default function WrOverviewPage() {
-  return (
-    <div className="bg-[#F2F2F2]">
-        <div className="relative w-[950px] mx-auto pt-[50px] font-sans">
-          {/* 카드 1 - 물재이용 사업 추진 절차 */}
-          <div className="card-wrap mb-24" id="card1">
-            <h2 className="font-NotoSansKR relative text-center text-4xl font-bold text-gray-900 mb-6">
-              <span className="absolute left-1/2 top-[-15px] -translate-x-1/2 w-24 h-2 bg-blue-500 rounded-full"></span>
-              물재이용 사업 추진 절차 
-            </h2>
-            <div className="bg-white border border-gray-300 rounded-xl p-[60px] py-[50px]">
-              <table className="table-fixed w-full text-center text-sm">
-                <caption className="sr-only">물 재이용 추진 절차 상세 표</caption>
-                <colgroup>
-                  <col style={{ width: "28%" }} />
-                  <col style={{ width: "2%" }} />
-                  <col style={{ width: "35%" }} />
-                  <col style={{ width: "5%" }} />
-                  <col style={{ width: "30%" }} />
-                </colgroup>
-                <tbody>
-                  {/* 1단계 */}
-                  <tr><td></td><td></td><td className="font-NotoSansKR text-[17px] bg-[#EAEFF3] font-bold py-5">타당성 조사</td><td></td><td></td></tr>
-                  <tr><td></td><td></td><td className="font-NotoSansKR text-2xl font-bold text-center">↓</td><td></td><td></td></tr>
-                  {/* 2단계 */}
-                  <tr><td className="font-NotoSansKR text-2xl bg-[#F4D62D] text-black font-bold py-5">매칭시스템 신청</td><td></td><td className="font-NotoSansKR text-[17px] bg-[#EAEFF3] font-bold py-5">사업계획(안) 수립</td><td></td><td></td></tr>
-                  <tr><td></td><td></td><td className="font-NotoSansKR text-2xl font-bold text-center">↓</td><td></td><td></td></tr>
-                  {/* 3단계 */}
-                  <tr><td className="font-NotoSansKR text-2xl bg-[#F4D62D] text-black font-bold py-5">하수도정보시스템 신청</td><td></td><td className="font-NotoSansKR text-[17px] bg-[#EAEFF3] font-bold py-5">국고지원 신청</td><td className="font-NotoSansKR text-2xl font-bold">→</td><td className="font-NotoSansKR text-2xl text-[#fff] bg-[#00B076] font-bold py-5">기술검토(한국환경공단)</td></tr>
-                  <tr><td></td><td></td><td className="font-NotoSansKR text-2xl font-bold text-center">↓</td><td></td><td></td></tr>
-                  {/* 4단계 */}
-                  <tr><td></td><td></td><td className="font-NotoSansKR text-[17px] bg-[#EAEFF3] font-bold py-5">국고지원 확정 통보</td><td></td><td></td></tr>
-                  <tr><td></td><td></td><td className="font-NotoSansKR text-2xl font-bold text-center">↓</td><td></td><td></td></tr>
-                  {/* 5단계 */}
-                  <tr><td></td><td></td><td className="font-NotoSansKR text-[17px] bg-[#EAEFF3] font-bold py-5">사업계획 수립(실시설계)</td><td></td><td></td></tr>
-                  <tr><td></td><td></td><td className="font-NotoSansKR text-2xl font-bold text-center">↓</td><td></td><td></td></tr>
-                  {/* 6단계 */}
-                  <tr><td className="font-NotoSansKR text-2xl bg-[#F4D62D] text-black font-bold py-5">(행정관) 기술검토 신청</td><td></td><td className="font-NotoSansKR text-[17px] bg-[#EAEFF3] font-bold py-5">재원협의(지방환경관서장)</td><td className="font-NotoSansKR text-2xl font-bold">→</td><td className="font-NotoSansKR text-2xl text-[#fff] bg-[#00B076] font-bold py-5">기술검토(한국환경공단)</td></tr>
-                  <tr><td></td><td></td><td className="font-NotoSansKR text-2xl font-bold text-center">↓</td><td></td><td></td></tr>
-                  {/* 7단계 */}
-                  <tr><td className="font-NotoSansKR text-2xl bg-[#F4D62D] text-black font-bold py-5">(행정관) 기술검토 신청</td><td></td><td className="font-NotoSansKR text-[17px] bg-[#EAEFF3] font-bold py-5">설치승인(시도지사)</td><td className="font-NotoSansKR text-2xl font-bold">→</td><td className="font-NotoSansKR text-2xl text-[#fff] bg-[#00B076] font-bold py-5">기술검토(한국환경공단)</td></tr>
-                  <tr><td></td><td></td><td className="font-NotoSansKR text-2xl font-bold text-center">↓</td><td></td><td></td></tr>
-                  {/* 8단계 */}
-                  <tr><td></td><td></td><td className="font-NotoSansKR text-[17px] bg-[#EAEFF3] font-bold py-5">공사시행</td><td></td><td></td></tr>
-                  <tr><td></td><td></td><td className="font-NotoSansKR text-2xl font-bold text-center">↓</td><td></td><td></td></tr>
-                  {/* 9단계 */}
-                  <tr><td className="font-NotoSansKR text-2xl bg-[#F4D62D] text-black font-bold py-5">(행정관) 기술검토 신청</td><td></td><td className="font-NotoSansKR text-[17px] bg-[#EAEFF3] font-bold py-5">준공(국고정산)</td><td className="font-NotoSansKR text-2xl font-bold">→</td><td className="font-NotoSansKR text-2xl text-[#fff] bg-[#00B076] font-bold py-5">기술검토(한국환경공단)</td></tr>
-                </tbody>
-              </table>
-            </div>
-          </div>
-
-          {/* 카드 2 - 물재이용 매칭 시스템 */}
-          <div className="mt-36 card-wrap mb-24" id="card2">
-            <h2 className="font-NotoSansKR relative text-center text-4xl font-bold text-gray-900 mb-6">
-              <span className="absolute left-1/2 top-[-15px] -translate-x-1/2 w-24 h-2 bg-blue-500 rounded-full"></span>
-              물재이용 매칭 시스템이란?
-            </h2>
-            <div className="bg-white border border-gray-300 rounded-xl p-[60px] pt-[70px] pb-[70px]">
-              {/* 개요 */}
-              <section>
-                <h2 className="font-NotoSansKR text-2xl text-[#657D91] font-bold bg-[#EAEFF3] p-3 rounded mb-4">개요</h2>
-                <p className="font-NotoSansKR text-2xl font-bold text-gray-800 leading-relaxed">
-                  기후변화 및 지자체의 개발속도 차이에 따라 물 자원의 수요-공급 불균형이 발생하여 빗물, 중수도, 하수처리 재처리수 등의 공급 여유가 있는 지자체의 재이용수를 부족한 지자체 수요처에 공급하여 불균형 해소를 통한 수자원 절약 및 물 자원 순환
-                </p>
-              </section>
-
-              {/* 구성 */}
-              <section className="mt-8">
-                <h2 className="font-NotoSansKR text-2xl text-[#657D91] font-bold bg-[#EAEFF3] p-3 rounded mb-4">구성</h2>
-                <ul className=" font-NotoSansKR list-[square] pl-6 text-2xl font-bold text-gray-800 leading-relaxed space-y-2">
-                  <li>공급자: 하수처리장, 빗물이용시설, 중수도 등</li>
-                  <li>수요자: 산업체(냉각수), 공공시설(조경, 도로청소), 농민(농업용수) 등</li>
-                  <li>시스템: 수질, 수량, 거리 기반 매칭, 중개</li>
-                  <li>운영주체: 한국환경공단</li>
-                </ul>
-              </section>
-
-              {/* 절차 */}
-              <section className="mt-8">
-                <h2 className="font-NotoSansKR text-2xl text-[#657D91] font-bold bg-[#EAEFF3] p-3 rounded mb-4">사업 주요 내용</h2>
-                <p className="font-NotoSansKR text-2xl font-bold text-gray-800 leading-relaxed">
-                  ① 공급자 등록 → ② 수요자 조건 입력 → ③ 매칭 검토 → ④ 시스템 매칭 → ⑤ 계약·공급 이행
-                </p>
-              </section>
-
-              {/* 기대효과 */}
-              <section className="mt-8">
-                <h2 className="font-NotoSansKR text-2xl text-[#657D91] font-bold bg-[#EAEFF3] p-3 rounded mb-4">기대효과</h2>
-                <ul className="font-NotoSansKR list-[square] pl-6 text-2xl font-bold text-gray-800 leading-relaxed space-y-2">
-                  <li>물 자원 수요-공급 조정을 통한 효율적 분배</li>
-                  <li>물 재이용시설 데이터 수집으로 체계적 관리</li>
-                  <li>지자체, 사업시행자 등 재이용 정보 획득 용이</li>
-                </ul>
-                <div className="text-center my-6">
-                  <Image 
-                    src="/img/wrOverview/img_ov_01_1.png" 
-                    alt="하수 재이용 시스템 흐름도. 저장탱크에서 재처리된 물이 손 씻기, 수도, 세정 등에 공급되며 재이용 활성화를 통해 최적의 물공급 방안이 마련되는 과정을 시각화함." 
-                    width={650}
-                    height={500}
-                    className="h-[500px] mx-auto mb-4 rounded" 
-                  />
-                  <p className="font-NotoSansKR text-2xl font-bold text-gray-800 mt-10">(하수 재이용 시스템 개요도)</p>
-                </div>
-              </section>
-              </div>
-        </div>
-      </div>
-    </div>
-  );
-}

apps/dm/app/(base-layout)/pages/wrStatus/page.tsx

@@ -1,387 +0,0 @@
-'use client';
-
-import { regionData, regionIdMap } from '@/app/common/comFunction';
-import { useDmStore } from '@/app/store';
-import type { DmStatusDataType } from '@/app/store/wrStatus/type';
-import { CHART_FORM, MainChart, type ChartConfig } from '@common/business_components';
-import React, { useEffect, useRef, useState,  useCallback } from 'react';
-import { setCookie } from "../../../../src/shared/lib";
-
-setCookie("site-id-key", process.env.NEXT_PUBLIC_SITE_ID || "DM");
-
-interface WrStatusChartProps {
-  chartForm: string;
-  chartConfig: ChartConfig;
-  chartData: any;
-  chartTitle: string;
-  chartClassName?: string;
-  graphSize?: number;
-  yFieldText? : string | undefined;
-  yFieldText2? : string | undefined;
-  showLegend? : boolean;
-  setXAxisYearTick ?: boolean;
-}
-
-export default function WrStatusPage() {
-
-
-
-
-  const { Common, dmStatus, getDmStatusData,initializeCommonData} = useDmStore((state) => state);
-  const { year:defaultYear, statusData,facilityTotals ,chartData} = dmStatus;
-  const [selectedRegion, setSelectedRegion] = useState<string | null>(null);
-  const [hoveredRegion, setHoveredRegion] = useState<string | null>(null);
-  const [tooltipPosition, setTooltipPosition] = useState<{ x: number; y: number } | null>(null);
-  const [chartOption, setChartOption] = useState<WrStatusChartProps>({} as WrStatusChartProps);
-
-  const svgContainerRef = useRef<HTMLDivElement>(null);
-  const colorLegend = [
-    { label: '하수', color: '#FF6B6B', key: 'sewage' },
-    { label: '빗물', color: '#4ECDC4', key: 'rainwater' },
-    { label: '중수도', color: '#45B7D1', key: 'reclaimed' },
-  ];
-  const facilityTotalsColor = ['#FF6B6B', '#4ECDC4', '#45B7D1', '#FED16A'];
-  // const [defaultYear, setDefaultYear] = useState<string>("");
-  // const defaultYear= '2023';
-
-
-  const handleMarkerClick = (regionId: string) => {
-    if (selectedRegion === regionId) {
-      setSelectedRegion(null);
-    } else {
-      setSelectedRegion(regionId);
-    }
-  };
-
-
-  useEffect(() => {
-    initializeCommonData();
-  }, [initializeCommonData]);
-
-  const createDonutMarker = useCallback((svg: SVGSVGElement, x: number, y: number, name: string, values: number[]) => {
-    const colors = ['#FF6B6B', '#4ECDC4', '#45B7D1', '#FED16A'];
-    const radius = 26;
-    const innerRadius = 18;
-    // const regionId = regionIdMap[name];
-    const regionId = regionIdMap[name];
-    if (!regionId) {
-      console.warn(`Invalid region name: ${name}`);
-      return;
-    }
-    const g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
-    g.setAttribute('transform', `translate(${x}, ${y})`);
-    g.setAttribute('id', `marker-${name}`);
-    g.style.cursor = 'pointer';
-    g.setAttribute('role', 'button');
-    g.setAttribute('tabindex', '0');
-    g.setAttribute('aria-label', `${name} 지역 선택`);
-
-    const bg = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
-    bg.setAttribute('r', radius.toString());
-    bg.setAttribute('fill', 'white');
-    bg.setAttribute('pointer-events', 'all');
-    g.appendChild(bg);
-
-    let startAngle = 0;
-    values.forEach((value, idx) => {
-      const endAngle = startAngle + value * 2 * Math.PI;
-      const x1 = radius * Math.sin(startAngle);
-      const y1 = -radius * Math.cos(startAngle);
-      const x2 = radius * Math.sin(endAngle);
-      const y2 = -radius * Math.cos(endAngle);
-      const largeArc = endAngle - startAngle > Math.PI ? 1 : 0;
-      const d = `M ${x1} ${y1} A ${radius} ${radius} 0 ${largeArc} 1 ${x2} ${y2} L 0 0 Z`;
-
-      const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
-      path.setAttribute('d', d);
-      path.setAttribute('fill', colors[idx % colors.length] as string);
-      g.appendChild(path);
-
-      startAngle = endAngle;
-    });
-
-    const center = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
-    center.setAttribute('r', innerRadius.toString());
-    center.setAttribute('fill', 'white');
-    g.appendChild(center);
-
-    const text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
-    text.setAttribute('x', '0');
-    text.setAttribute('y', '2');
-    text.setAttribute('text-anchor', 'middle');
-    text.setAttribute('font-size', '13');
-    text.setAttribute('font-weight', 'bold');
-    text.setAttribute('dominant-baseline', 'middle');
-    text.setAttribute('fill', 'black');
-    text.textContent = name || '';
-    g.appendChild(text);
-    
-    g.addEventListener('mouseenter', (e) => {
-      setHoveredRegion(regionId);
-      setTooltipPosition({ x: e.clientX, y: e.clientY });
-    });
-
-    g.addEventListener('mouseleave', () => {
-      setHoveredRegion(null);
-      setTooltipPosition(null);
-    });
-
-    g.addEventListener('click', () => {
-      handleMarkerClick(regionId);
-    });
-
-    g.addEventListener('keydown', (e) => {
-      if (e.key === 'Enter' || e.key === ' ') {
-        e.preventDefault();
-
-        const matrix = g.getScreenCTM();
-        if (!matrix) return; // 또는 console.warn('matrix is null'); return;
-
-        const point = svg.createSVGPoint();
-        point.x = 0;
-        point.y = 0;
-        const transformed = point.matrixTransform(matrix);
-
-        setTooltipPosition({ x: transformed.x, y: transformed.y });
-        setHoveredRegion(regionId);
-        handleMarkerClick(regionId);
-      }
-    });
-
-    svg.appendChild(g);
-  }, [handleMarkerClick, regionIdMap]);
-
-
-  useEffect(() => {
-    if(Common.selectSidoData&&Common.selectSidoData.length>1) {
-      getDmStatusData(Common.selectSidoData);
-    }
-  },[Common.selectSidoData, getDmStatusData])
-
-  useEffect(() => {
-    const loadSVG = async () => {
-      try {
-        const response = await fetch('/img/wrStatus/southKoreaMap.svg');
-        const svgText = await response.text();
-        
-        if (svgContainerRef.current) {
-          svgContainerRef.current.innerHTML = svgText;
-          
-          const svg = svgContainerRef.current.querySelector('svg') as SVGSVGElement;
-          if (svg) {
-            svg.style.width = '58%';
-            svg.style.height = 'auto';
-            svg.style.objectFit = 'contain';
-
-            // Set default fills
-            const paths = svg.querySelectorAll('path');
-            paths.forEach(path => {
-              if (!path.getAttribute('fill') || path.getAttribute('fill') === 'none') {
-                path.setAttribute('fill', '#ffffff');
-              }
-            });
-
-            // Create markers
-            regionData.forEach(region => {
-              createDonutMarker(svg, region.x, region.y, region.name, region.values);
-            });
-          }
-        }
-      } catch (error) {
-        console.error('SVG 로딩 실패:', error);
-        if (svgContainerRef.current) {
-          svgContainerRef.current.innerHTML = "<p className='text-red-500'>SVG 로딩 실패</p>";
-        }
-      }
-    };
-
-    loadSVG();
-  }, [createDonutMarker, regionData]);
-
-  useEffect(() => {
-    const svg = svgContainerRef.current?.querySelector('svg');
-    if (svg) {
-      const paths = svg.querySelectorAll('path');
-      paths.forEach(path => {
-        const pathId = path.getAttribute('id');
-        if (pathId) {
-          if (selectedRegion === pathId) {
-            path.setAttribute('fill', '#2563eb');
-          } else {
-            const original = '#ffffff';
-            path.setAttribute('fill', original);
-          }
-        }
-      });
-    }
-  }, [selectedRegion]);
-  useEffect(() => {
-    if(chartData.length>0){
-      const chartConfig = chartData.reduce((config, element) => {
-        config[element.label] = {
-          label: element.label,
-          color : "hsl(var(--chart-1))"
-        };
-        return config;
-      }, {} as Record<string, { label: string; color: string; }>) satisfies ChartConfig;
-    
-      const Option = {
-        chartForm : CHART_FORM.BAR,
-        chartConfig : chartConfig,
-        chartData : chartData,
-        chartTitle : '',
-        chartClassName : "w-full h-[350px] ",
-        graphSize : 10,
-        yFieldText : '시설(개소)',
-        showLegend : true
-      }
-      setChartOption(Option)
-    }else{
-      setChartOption({} as WrStatusChartProps)
-    }
-  }, [chartData]);
-
-  return (
-    <div className="flex h-screen bg-[#F2F2F2] text-gray-800">
-      {/* 우측 콘텐츠 영역 */}
-      <main className="flex-1 p-6 overflow-auto">
-        {/* 상단 제목 */}
-        <div className="mb-6 flex justify-between items-center">
-          <h2 className="text-2xl font-bold">물재이용 현황</h2>
-        </div>
-
-        {/* 콘텐츠 본문 */}
-        <div className="grid grid-cols-1 xl:grid-cols-2 gap-4">
-          {/* 지도 카드 */}
-          <div className="bg-white rounded-xl shadow border border-[#DBE2E6] overflow-hidden max-h-[900px]">
-            {/* 타이틀 영역 */}
-            <div className="border-b border-[#DBE2E6] px-4 py-3">
-              <h3 className="text-[12px] font-semibold">{`재이용시설현황(${defaultYear})`}</h3>
-              <p className="text-[12px] text-[#999] font-medium">행정구역별 재이용시설현황(개소)</p>
-            </div>
-            
-            {/* 본문 콘텐츠 */}
-            <div className="p-4">
-              <div className="bg-[#E2EDF3] p-4 rounded shadow relative">
-                <div className="flex justify-center">
-                  <div 
-                    ref={svgContainerRef}
-                    className="w-full max-w-5xl max-h-[680px] overflow-y-auto block mx-auto"
-                    aria-label="대한민국 지역별 재이용시설 분포도" 
-                    role="region" 
-                    tabIndex={0}
-                  />
-                </div>
-
-                {typeof window !== 'undefined' && hoveredRegion && tooltipPosition && (
-                  <div
-                    className="fixed bg-white text-[12px] text-gray-700 border border-gray-300 shadow-lg rounded px-3 py-2 z-50"
-                    style={{
-                      top: tooltipPosition.y + 10,
-                      left: tooltipPosition.x + 10,
-                      pointerEvents: 'none',
-                    }}
-                  >
-                    <div className="font-semibold mb-1">{hoveredRegion}</div>
-                    <div className="space-y-1">
-                      {colorLegend.map(({ label, color, key }) => (
-                        <div key={key+'' +color} className="flex items-center space-x-2">
-                          <span className="text-[12px] inline-block w-3 h-3 rounded-sm" style={{ backgroundColor: color }}></span>
-                          <span className="text-[12px]">
-                            {label}:{' '}
-                            {statusData?.find(d => d.region === hoveredRegion)?.[key as keyof DmStatusDataType] || '-'}
-                          </span>
-                        </div>
-                      ))}
-                    </div>
-                  </div>
-                )}
-
-                {/* 범례 */}
-                <div className="absolute bottom-2 right-2 bg-white rounded-lg shadow-md p-4 text-sm space-y-2">
-                  {facilityTotals?.map((item, index) => (
-                      <div key ={'fcltTotal' +index}className="flex items-center space-x-2">
-                      <span className="inline-block w-4 h-4 rounded-sm" style={{backgroundColor:facilityTotalsColor[index]}}></span>
-                      <span className="text-[12px] text-gray-900">{item}</span>
-                    </div>
-                    )) }
-                </div>
-              </div>
-            </div>
-          </div>
-
-          {/* 우측 콘텐츠 (표 + 차트) */}
-          <div className="col-span-1 flex flex-col space-y-4">
-            {/* 재이용시설현황 표 */}
-            <div className="bg-white rounded-xl shadow border border-[#DBE2E6] overflow-hidden">
-              {/* 타이틀 + 버튼 영역 */}
-              <div className="flex justify-between items-center border-b border-[#436d85] px-4 py-3">
-                <div>
-                  <h3 className="text-[12px] font-semibold">{`재이용시설현황(${defaultYear})`}</h3>
-                  <p className="text-[12px] text-[#999] font-medium">행정구역별 재이용시설현황[개소(천m³/년)]</p>
-                </div>
-              </div>
-              <div className="p-4">
-                <div className="rounded border border-[#DBE2E6] shadow overflow-auto max-h-[292px] p-4">
-                  <table className="min-w-full text-sm text-center">
-                    <caption className="sr-only text-[12px]">행정구역별 하수, 빗물, 중수도, 온배수 재이용시설 수</caption>
-                    <thead className="bg-gray-50 text-xs text-gray-600 uppercase border-b">
-                      <tr>
-                        <th className="text-[12px] font-semibold px-4 py-2">번호</th>
-                        <th className="text-[12px] font-semibold px-4 py-2">시도</th>
-                        <th className="text-[12px] font-semibold px-4 py-2">하수재이용시설</th>
-                        <th className="text-[12px] font-semibold px-4 py-2">빗물이용시설</th>
-                        <th className="text-[12px] font-semibold px-4 py-2">중수도시설</th>
-                        {/* <th className="text-[12px] font-semibold px-4 py-2">하수(이용량,천𝓂³/년)</th>
-                        <th className="text-[12px] font-semibold px-4 py-2">빗물(이용량,천𝓂³/년)</th>
-                        <th className="text-[12px] font-semibold px-4 py-2">중수도(이용량,천𝓂³/년)</th>
-                        <th className="text-[12px] font-semibold px-4 py-2">온배수(이용량,천𝓂³/년)</th> */}
-                      </tr>
-                    </thead>
-                    <tbody className="divide-y">
-                      {statusData?.map((row, index) => (
-                        <tr key={index} className="hover:bg-gray-50">
-                          <td className="text-[12px] px-4 py-2 text-center">
-                            {index+1}
-                          </td>
-                          <td className="text-[12px]">{row.region}</td>
-                          <td className="text-[12px]">{row.sewage}</td>
-                          <td className="text-[12px]">{row.rainwater}</td>
-                          <td className="text-[12px]">{row.reclaimed}</td>
-                        </tr>
-                      ))}
-                    </tbody>
-                  </table>
-                </div>
-              </div>
-            </div>
-
-            {/* 재이용통계 차트 */}
-            <div className="bg-white rounded-xl shadow border border-[#DBE2E6] overflow-hidden">
-              <div className="border-b border-[#DBE2E6] px-4 py-3">
-                <h3 className="text-[12px] font-semibold">{`재이용통계(${defaultYear})`}</h3>
-                <p className="text-[12px] text-[#999] font-medium">행정구역별 재이용시설 현황 개소수 그래프</p>
-              </div>
-              <div className="p-4 bg-[#f9fbfd]">
-                <div className="h-[305px] text-gray-500">
-                {chartOption?
-                 <MainChart 
-                  chartForm={chartOption.chartForm}
-                  chartConfig={chartOption.chartConfig} 
-                  chartData={chartOption.chartData?.filter(item=>item.label!= '')} 
-                  chartTitle={chartOption.chartTitle} 
-                  chartClassName={chartOption.chartClassName}
-                  graphSize={chartOption.graphSize}
-                  yFieldText={chartOption.yFieldText}
-                  showLegend={chartOption.showLegend}
-                />
-              :<></>}
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </main>
-    </div>
-  );
-};

apps/dm/app/(landing)/reuse/_components/CaseTabsCarousel.tsx

@@ -0,0 +1,578 @@
+"use client";
+
+import React, {
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import Image from "next/image";
+
+/**
+ * CaseTabsCarousel.tsx (FINAL OPTIMIZED)
+ * - 탭별 데이터
+ * - 카드 perPage(1/2/3) 반응형
+ * - 카드 perPage개 = 1그룹, 좌/우 클릭 시 1그룹 단위 이동
+ * - 3그룹 가상화(prev/cur/next)로 DOM 최소화
+ * - px 기반 트랙 이동 + "측정 박스 분리"로 좌/우 비침 방지
+ * - stale state 제거(방향/인덱스 ref 관리)로 슬라이드 안정성 강화
+ * - BUGFIX 1) onTransitionEnd 버블링 방지 (target===currentTarget, transform만 처리)
+ * - BUGFIX 2) 슬라이드 중(busy) clipWidth 변화로 트랙 스냅(-W) 덮어쓰지 않게 분리
+ */
+
+type TabKey = "rain" | "reuse" | "sewage" | "global";
+
+type CaseItem = {
+  id: string;
+  title: string;
+  desc: string;
+  imageSrc: string;
+  href?: string;
+};
+
+const TABS: { key: TabKey; label: string }[] = [
+  { key: "rain", label: "빗물 재이용 사례" },
+  { key: "reuse", label: "중수 재이용 사례" },
+  { key: "sewage", label: "하수 재이용 사례" },
+  { key: "global", label: "해외 재이용 사례" },
+];
+
+// 실제 데이터로 교체해서 쓰세요(구조 유지)
+const MOCK: Record<TabKey, CaseItem[]> = {
+  rain: [
+    {
+      id: "rain-0",
+      title: "경기도 수원시 빗물이용과 중수도",
+      desc: "(빗물) 월드컵경기장 등 4개소에 노면 빗물분사시스템 및 빗물 공급기를 설치하여 혹서기…",
+      imageSrc: "/images/landing/rain_01.png",
+      href: "/reuse/business/rain/suwon",
+    },
+    // {
+    //   id: "rain-2",
+    //   title: "경기도 수원시 빗물이용과 중수도",
+    //   desc: "(빗물) 월드컵경기장 등 4개소에 노면 빗물분사시스템 및 빗물 공급기를 설치하여 혹서기…",
+    //   imageSrc: "/images/landing/rain_01.png",
+    //   href: "#",
+    // },
+  ],
+  reuse: Array.from({ length: 6 }).map((_, i) => ({
+    id: `reuse-${i}`,
+    title: `중수 재이용 사례 ${i + 1}`,
+    desc: "설명 문구가 들어갑니다. (최대 2~3줄) …",
+    imageSrc: "/images/landing/sample_case.png",
+    href: "#",
+  })),
+  sewage: [
+    {
+      id: "sewage-1",
+      title: "경기도 파주시 하수 재이용",
+      desc: "운정·금촌하수처리시설의 하수처리수를 막공법(U/F, R/O)으로 재처리하여 파주 LCD 산업단지내 3개 업체*에...",
+      imageSrc: "/images/landing/sewage_01.png",
+      href: "/reuse/business/sewage/paju",
+    },
+    {
+      id: "sewage-2",
+      title: "충남보령 하수재이용",
+      desc: "보령·신보령화력발전소에 하루 1만톤의 탈황용수 공급을 위해 보령하수처리시설의 하수처리수 재이용 사업...",
+      imageSrc: "/images/landing/sewage_02.png",
+      href: "/reuse/business/sewage/bolyeong",
+    },
+    {
+      id: "sewage-3",
+      title: "여수시 하수처리수 재이용",
+      desc: "(빗물) 월드컵경기장 등 4개소에 노면 빗물분사시스템 및 빗물 공급기를 설치하여 혹서기 도시 열섬효과 및 도로...",
+      imageSrc: "/images/landing/sewage_03.png",
+      href: "/reuse/business/sewage/yeosu",
+    },
+    {
+      id: "sewage-4",
+      title: "청주시 하수 재이용 시설",
+      desc: "청주시 하수처리수 재이용 민간투자사업(BTO) 청주시 하수처리수 재이용 민간투자사업(BTO) 청주시 하수처리수 재이용 민간투자사업(BTO)...",
+      imageSrc: "/images/landing/sewage_04.png",
+      href: "/reuse/business/sewage/cheongju",
+    },
+    {
+      id: "sewage-5",
+      title: "수원시 황구지천 하천유지용수",
+      desc: "황구지천 공공하수처리시설 하수처리수 재이용사업으로 향후 호매실천 및 금곡천 건천화 방지로...",
+      imageSrc: "/images/landing/sewage_05.png",
+      href: "/reuse/business/sewage/hwanggu",
+    },
+    {
+      id: "sewage-6",
+      title: "구리시 도로자동청소시스템",
+      desc: "고농도 미세먼지 발생 및 폭염의 급증에 따라 공공하수처리시설 발생 재이용수 일부를 도로자동청소시스템에 활용...",
+      imageSrc: "/images/landing/sewage_06.png",
+      href: "/reuse/business/sewage/guri",
+    },
+    // ...Array.from({ length: 6 }).map((_, i) => ({
+    //   id: `sewage-x-${i}`,
+    //   title: `하수 재이용 사례 ${i + 4}`,
+    //   desc: "설명 문구가 들어갑니다. (최대 2~3줄) …",
+    //   imageSrc: "/images/landing/sample_case.png",
+    //   href: "#",
+    // })),
+  ],
+  global: [
+    {
+      id: "global-1",
+      title: "해외 재이용 사례 개요",
+      desc: "2024년 하수도 통계 기준 15.6%이며, 제2차 물 재이용 기본 계획을 고려한 2030년 목표는 17%, 우리나라의 하수 처리 재이용률은 15% 수준...",
+      imageSrc: "/images/landing/overview_01.png",
+      href: "reuse/business/globalCase/overview",
+    },
+    {
+      id: "global-2",
+      title: "[대만] 국가 주도의 공업용수 공급",
+      desc: "대만은 물 재이용에 적극적이며 국가주도로 하수재이용 사업 시행(안핑), 안핑을 포함한 16건 공사 완료시 628,100 CMD 공급 가능...",
+      imageSrc: "/images/landing/taiwan_01.png",
+      href: "/reuse/business/globalCase/taiwan",
+    },
+    {
+      id: "global-3",
+      title: "[호주] 생활 속 물 재이용 / 광역 물 재이용수 공급",
+      desc: "SEQ Water Grid는 브리즈번 남동부지역의 식수 공급을 위해 설정한 광역 수로망, 이 광역수로망을 활용하여 물이 부족한 지역으로 물을 공급...",
+      imageSrc: "/images/landing/australia_01.png",
+      href: "/reuse/business/globalCase/australia",
+    },
+    {
+      id: "global-4",
+      title: "[싱가포르] 수요가 높은 산업의 물 재이용 의무화",
+      desc: "2003년 공식 NEWater 공장을 가동했으며 신뢰확보를 위해 NEWater Visitor Center를 함께 건설, NEWater 전체파이프 공급 → 반도체 공장에서 가장 많이 사용...",
+      imageSrc: "/images/landing/singapore_01.png",
+      href: "/reuse/business/globalCase/singapore",
+    },
+    {
+      id: "global-5",
+      title: "[EU] 법률을 제정, EU국가에서 물 재이용 유도",
+      desc: "유럽 지역의 물 부족 문제를 인식하고 ’20년 물 재이용 법률을 제정 (2020/741), 2023년부터 모든 EU국가에서 시행...",
+      imageSrc: "/images/landing/eu_01.png",
+      href: "/reuse/business/globalCase/eu",
+    },
+  ],
+};
+
+/* ---------------- utils ---------------- */
+function chunk<T>(arr: T[], size: number) {
+  const res: T[][] = [];
+  if (size <= 0) return res;
+  for (let i = 0; i < arr.length; i += size) res.push(arr.slice(i, i + size));
+  return res;
+}
+function mod(n: number, m: number) {
+  return ((n % m) + m) % m;
+}
+function usePrefersReducedMotion() {
+  const [reduced, setReduced] = useState(false);
+  useEffect(() => {
+    const mq = window.matchMedia("(prefers-reduced-motion: reduce)");
+    const onChange = () => setReduced(mq.matches);
+    onChange();
+    mq.addEventListener?.("change", onChange);
+    return () => mq.removeEventListener?.("change", onChange);
+  }, []);
+  return reduced;
+}
+
+/**
+ * wrapRef: perPage 계산용
+ * clipRef: "패딩 없는 측정 박스" 폭(px) 계산용
+ */
+function useCarouselMeasure() {
+  const wrapRef = useRef<HTMLDivElement | null>(null);
+  const clipRef = useRef<HTMLDivElement | null>(null);
+
+  const [perPage, setPerPage] = useState(3);
+  const [clipWidth, setClipWidth] = useState(0);
+
+  // perPage: container width로 반응형 결정 (rAF로 디바운스)
+  useEffect(() => {
+    const el = wrapRef.current;
+    if (!el) return;
+
+    let raf = 0;
+
+    const calc = () => {
+      const w = el.clientWidth;
+      if (w < 640) setPerPage(1);
+      else if (w < 1024) setPerPage(2);
+      else setPerPage(3);
+    };
+
+    const ro = new ResizeObserver(() => {
+      cancelAnimationFrame(raf);
+      raf = requestAnimationFrame(calc);
+    });
+
+    calc();
+    ro.observe(el);
+    return () => {
+      cancelAnimationFrame(raf);
+      ro.disconnect();
+    };
+  }, []);
+
+  // clipWidth: 패딩 없는 박스에서 width를 정확히 측정 (sub-pixel 반올림)
+  useEffect(() => {
+    const el = clipRef.current;
+    if (!el) return;
+
+    let raf = 0;
+
+    const calc = () => {
+      const w = Math.round(el.getBoundingClientRect().width);
+      setClipWidth(w);
+    };
+
+    const ro = new ResizeObserver(() => {
+      cancelAnimationFrame(raf);
+      raf = requestAnimationFrame(calc);
+    });
+
+    calc();
+    ro.observe(el);
+    return () => {
+      cancelAnimationFrame(raf);
+      ro.disconnect();
+    };
+  }, []);
+
+  return { wrapRef, clipRef, perPage, clipWidth };
+}
+
+/* ---------------- component ---------------- */
+export default function CaseTabsCarousel() {
+  const [active, setActive] = useState<TabKey>("rain");
+
+  // 탭별 마지막 그룹 인덱스 기억
+  const tabIndexRef = useRef<Record<TabKey, number>>({
+    rain: 0,
+    reuse: 0,
+    sewage: 0,
+    global: 0,
+  });
+
+  const reducedMotion = usePrefersReducedMotion();
+  const { wrapRef, clipRef, perPage, clipWidth } = useCarouselMeasure();
+
+  const items = useMemo(() => MOCK[active] ?? [], [active]);
+  const groups = useMemo(() => chunk(items, perPage), [items, perPage]);
+  const groupCount = groups.length;
+
+  const [cur, setCur] = useState(0);
+  const curRef = useRef(0);
+
+  // px 기반 트랙
+  const [trackPx, setTrackPx] = useState(0);
+  const [anim, setAnim] = useState(false);
+  const [busy, setBusy] = useState(false);
+
+  // 방향 ref (onTransitionEnd에서 trackPx 비교하지 않음)
+  const dirRef = useRef<-1 | 1 | 0>(0);
+
+  // cur 최신값 유지
+  useEffect(() => {
+    curRef.current = cur;
+  }, [cur]);
+
+  /**
+   * 리셋 로직 분리:
+   * - 탭/perPage/groupCount 바뀔 때만 "인덱스/상태" 리셋
+   * - clipWidth 변화는 별도 effect에서 "busy 아닐 때만" 중앙(-W)로 배치
+   */
+  useLayoutEffect(() => {
+    const saved = tabIndexRef.current[active] ?? 0;
+    const nextCur = groupCount ? mod(saved, groupCount) : 0;
+
+    dirRef.current = 0;
+    setCur(nextCur);
+    setBusy(false);
+    setAnim(false);
+  }, [active, perPage, groupCount]);
+
+  // clipWidth 변화로 트랙 위치를 잡되, 슬라이드 중(busy)엔 덮어쓰지 않음
+  useLayoutEffect(() => {
+    if (busy) return;
+    if (clipWidth > 0) setTrackPx(-clipWidth);
+    else setTrackPx(0);
+  }, [clipWidth, busy]);
+
+  // 3그룹 가상화
+  const viewGroups = useMemo(() => {
+    if (!groupCount) return [[], [], []] as CaseItem[][];
+    return [
+      groups[mod(cur - 1, groupCount)] ?? [],
+      groups[mod(cur, groupCount)] ?? [],
+      groups[mod(cur + 1, groupCount)] ?? [],
+    ];
+  }, [groups, cur, groupCount]);
+
+  const canSlide = groupCount > 1 && clipWidth > 0;
+
+  const go = useCallback(
+    (dir: -1 | 1) => {
+      if (!canSlide) return;
+      if (busy) return;
+
+      dirRef.current = dir;
+
+      setBusy(true);
+      setAnim(!reducedMotion);
+
+      // 중앙(-W) 기준: prev=0, next=-2W
+      setTrackPx(dir === 1 ? -2 * clipWidth : 0);
+
+      // reduced motion이면 즉시 확정
+      if (reducedMotion) {
+        const nextCur = mod(curRef.current + dir, groupCount);
+        tabIndexRef.current[active] = nextCur;
+
+        setCur(nextCur);
+        setAnim(false);
+        setTrackPx(-clipWidth);
+        setBusy(false);
+        dirRef.current = 0;
+      }
+    },
+    [active, busy, canSlide, clipWidth, groupCount, reducedMotion]
+  );
+
+  // BUGFIX 1) 자식 transitionend 버블링 방지 + transform만 처리
+  const onTransitionEnd = useCallback(
+  (e: React.TransitionEvent<HTMLDivElement>) => {
+    // 자식 transitionend 버블링 방지
+    if (e.target !== e.currentTarget) return;
+    if (e.propertyName !== "transform") return;
+
+    if (!busy || reducedMotion) return;
+
+    const dir = dirRef.current;
+    if (dir !== 1 && dir !== -1) return;
+
+    const nextCur = mod(curRef.current + dir, groupCount);
+    tabIndexRef.current[active] = nextCur;
+
+    // 1) 먼저 transition을 끄고(중요)
+    setAnim(false);
+
+    // 2) cur를 회전 + 트랙을 즉시 중앙(-W)로 스냅
+    //    (이 순간은 "무조건 애니메이션 없이" 처리되어야 함)
+    setCur(nextCur);
+    setTrackPx(-clipWidth);
+
+    // 3) 다음 프레임(2번 rAF)에서 다시 애니메이션 켜고 busy 해제
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        setAnim(!reducedMotion);
+        setBusy(false);
+        dirRef.current = 0;
+      });
+    });
+  },
+  [active, busy, clipWidth, groupCount, reducedMotion]
+);
+
+  const goDot = useCallback(
+    (idx: number) => {
+      if (!groupCount) return;
+      if (busy) return;
+
+      const target = mod(idx, groupCount);
+      tabIndexRef.current[active] = target;
+
+      dirRef.current = 0;
+      setCur(target);
+      setAnim(false);
+      if (clipWidth > 0) setTrackPx(-clipWidth);
+    },
+    [active, busy, clipWidth, groupCount]
+  );
+
+  const trackStyle: React.CSSProperties = useMemo(
+    () => ({
+      transform: `translate3d(${trackPx}px, 0, 0)`,
+      transition: anim ? "transform 700ms cubic-bezier(.22,.61,.36,1)" : "none",
+      willChange: busy ? "transform" : undefined,
+    }),
+    [trackPx, anim, busy]
+  );
+
+  return (
+    <section className="w-full">
+      {/* 탭 바 */}
+      <div className="mx-auto max-w-[1520px] pt-10">
+        <div className="">
+          <div className="grid grid-cols-4">
+            {TABS.map((t) => {
+                const isActive = t.key === active;
+
+                return (
+                    <button
+                    key={t.key}
+                    type="button"
+                    onClick={() => setActive(t.key)}
+                    className={[
+                        "relative h-[74px] w-full text-base font-semibold",
+                        "transition-colors",
+                        // 기본(비활성): 검정 배경 + 회색 텍스트
+                        !isActive ? "text-[#767676] hover:text-black border-b-2 border-sky-400" : "",
+                        // 활성: 흰 배경 + 진한 텍스트 + 하늘색 테두리(위/좌/우) + 아래는 열어둠
+                        isActive
+                        ? [
+                            "bg-[#eaf4f4] text-black",
+                            "border-t-2 border-l-2 border-r-2 border-sky-400",
+                            "border-b-0", // 아래는 컨텐츠와 이어지도록 열어둠
+                            "z-10", // 테두리가 위로 올라오게
+                            ].join(" ")
+                        : "",
+                    ].join(" ")}
+                    >
+                    {t.label}
+
+                    {/* 활성 탭 하단에 얇은 라인이 필요하면(이미지처럼) */}
+                    {isActive && (
+                        <span className="pointer-events-none absolute left-0 right-0 bottom-[-1px] h-[2px] bg-[#eaf4f4]" />
+                    )}
+                    </button>
+                );
+            })}
+          </div>
+        </div>
+      </div>
+
+      {/* 슬라이더 */}
+      <div ref={wrapRef} className="mx-auto max-w-[1520px] px-6 pb-5 pt-10 bg-[#eaf4f4]">
+        <div className="relative">
+          {/* 좌우 버튼 */}
+          <button
+            type="button"
+            onClick={() => go(-1)}
+            disabled={!canSlide || busy}
+            className={[
+              "absolute left-0 top-1/2 z-10 -translate-y-1/2",
+              "w-[80px] h-[80px] rounded-full bg-white shadow-[0_10px_25px_rgba(0,0,0,0.12)]",
+              "grid place-items-center border-2 border-[#C2CAD2]",
+              !canSlide || busy
+                ? "opacity-40 cursor-not-allowed"
+                : "hover:brightness-95",
+            ].join(" ")}
+            aria-label="이전"
+          >
+            <Image
+              src="/images/landing/icon_left_arrow.png"
+              alt="이전"
+              width={24}
+              height={24}
+              className="w-6 h-6 object-contain"
+            />
+          </button>
+
+          <button
+            type="button"
+            onClick={() => go(1)}
+            disabled={!canSlide || busy}
+            className={[
+              "absolute right-0 top-1/2 z-10 -translate-y-1/2",
+              "w-[80px] h-[80px] rounded-full bg-white shadow-[0_10px_25px_rgba(0,0,0,0.12)]",
+              "grid place-items-center border-2 border-[#C2CAD2]",
+              !canSlide || busy
+                ? "opacity-40 cursor-not-allowed"
+                : "hover:brightness-95",
+            ].join(" ")}
+            aria-label="다음"
+          >
+            <Image
+              src="/images/landing/icon_right_arrow.png"
+              alt="다음"
+              width={24}
+              height={24}
+              className="w-6 h-6 object-contain"
+            />
+          </button>
+
+          {/* 중요: clip(가림)과 measure(측정) 분리 */}
+          <div className="overflow-hidden [clip-path:inset(0)] [contain:paint]">
+            <div className="w-[1250px] overflow-hidden m-auto">
+              {/* 측정은 패딩 없는 박스에서 */}
+              <div ref={clipRef} className="w-full">
+                {/* track */}
+                <div className="flex" style={trackStyle} onTransitionEnd={onTransitionEnd}>
+                  {viewGroups.map((group, gi) => (
+                    <div
+                      key={`pane-${gi}`}
+                      className="shrink-0"
+                      style={{ width: clipWidth || "100%" }}
+                    >
+                      {/* 그룹 내부: perPage 컬럼 */}
+                      <div
+                        className="grid gap-7"
+                        style={{
+                          gridTemplateColumns: `repeat(${perPage}, minmax(0, 1fr))`,
+                        }}
+                      >
+                        {(group ?? []).map((c) => (
+                          <article
+                            key={c.id}
+                            className="overflow-hidden rounded-[22px] border-2 border-sky-400 bg-white"
+                          >
+                            <div className="h-[241px] w-full bg-slate-100 border-b border-b-blue-300">
+                              <Image
+                                src={c.imageSrc}
+                                alt={c.title}
+                                width={640}
+                                height={241}
+                                className="h-full w-full object-cover"
+                                style={{ width: "100%", height: "100%" }}
+                                loading="lazy"
+                              />
+                            </div>
+
+                            <div className="p-8">
+                              <h3 className="h-[77px] text-center text-[28px] font-extrabold leading-snug tracking-tight">
+                                {c.title}
+                              </h3>
+                              <p className="mt-4 line-clamp-3 text-[16px] leading-7 text-slate-600">
+                                {c.desc}
+                              </p>
+
+                              <a
+                                href={c.href ?? "#"}
+                                className="mt-8 inline-flex h-[56px] w-full items-center justify-center gap-3 rounded-md bg-[#02A0D6] text-[18px] font-bold text-white transition hover:brightness-110"
+                              >
+                                자세히 보기 <span aria-hidden>→</span>
+                              </a>
+                            </div>
+                          </article>
+                        ))}
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {/* 도트 */}
+          <div className="mt-8 flex items-center justify-center gap-3">
+            {Array.from({ length: Math.max(groupCount, 1) }).map((_, i) => (
+              <button
+                key={`dot-${i}`}
+                type="button"
+                onClick={() => goDot(i)}
+                className={[
+                  "h-[10px] w-[10px] rounded-full transition",
+                  i === cur
+                    ? "bg-black opacity-100"
+                    : "bg-black opacity-30 hover:opacity-60",
+                ].join(" ")}
+                aria-label={`${i + 1}번 그룹`}
+              />
+            ))}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}

apps/dm/app/(landing)/reuse/_components/ImageSlider.tsx

@@ -0,0 +1,175 @@
+// apps/dm/app/(landing)/reuse/_components/ImageSlider.tsx
+"use client";
+
+import Image from "next/image";
+import { useEffect, useMemo, useRef, useState } from "react";
+
+type Slide = { src: string; alt?: string };
+
+type Props = {
+  slides: Slide[];
+  className?: string;
+  maxWidthClassName?: string; // 예: "max-w-[760px]"
+};
+
+export default function CaseImageSlider({
+  slides,
+  className = "",
+  maxWidthClassName = "max-w-[760px]",
+}: Props) {
+  const safeSlides = useMemo(() => slides.filter(Boolean), [slides]);
+  const [idx, setIdx] = useState(0);
+  const [dragging, setDragging] = useState(false);
+
+  const startX = useRef(0);
+  const deltaX = useRef(0);
+
+  const total = safeSlides.length;
+  const canSlide = total > 1;
+
+  const go = (dir: number) => {
+    if (!canSlide) return;
+    setIdx((prev) => {
+      const next = prev + dir;
+      if (next < 0) return total - 1;
+      if (next >= total) return 0;
+      return next;
+    });
+  };
+
+  // ← → 키보드 지원(선택)
+  useEffect(() => {
+    const onKey = (e: KeyboardEvent) => {
+      if (!canSlide) return;
+      if (e.key === "ArrowLeft") go(-1);
+      if (e.key === "ArrowRight") go(1);
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [canSlide, total]);
+
+  // 드래그(마우스/터치)로 넘기기
+  const onPointerDown = (e: React.PointerEvent) => {
+    if (!canSlide) return;
+    setDragging(true);
+    startX.current = e.clientX;
+    deltaX.current = 0;
+    (e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);
+  };
+
+  const onPointerMove = (e: React.PointerEvent) => {
+    if (!dragging) return;
+    deltaX.current = e.clientX - startX.current;
+  };
+
+  const onPointerUp = () => {
+    if (!dragging) return;
+    setDragging(false);
+
+    const threshold = 60; // 넘김 감도
+    if (deltaX.current > threshold) go(-1);
+    else if (deltaX.current < -threshold) go(1);
+
+    deltaX.current = 0;
+  };
+
+  if (!total) return null;
+
+  return (
+    <section className={className}>
+      <div className={`mx-auto ${maxWidthClassName}`}>
+        <div className="relative">
+          {/* 좌측 버튼 */}
+          <button
+            type="button"
+            onClick={() => go(-1)}
+            className="absolute left-[-60px] top-1/2 -translate-y-1/2 z-10
+                        w-[80px] h-[80px] rounded-full border border-black/20 bg-white
+                        grid place-items-center shadow-sm hover:bg-black/[0.03]"
+            >
+            <Image
+              src="/images/landing/icon_left_arrow.png"
+              alt="이전"
+              width={12}
+              height={22}
+              className="w-[12px] h-[22px]"
+            />
+          </button>
+
+
+          {/* 우측 버튼 */}
+          <button
+            type="button"
+            onClick={() => go(1)}
+            className="absolute right-[-60px] top-1/2 -translate-y-1/2 z-10
+                        w-[80px] h-[80px] rounded-full border border-black/20 bg-white
+                        grid place-items-center shadow-sm hover:bg-black/[0.03]"
+            >
+            <Image
+              src="/images/landing/icon_right_arrow.png"
+              alt="다음"
+              width={12}
+              height={22}
+              className="w-[12px] h-[22px]"
+            />
+          </button>
+
+
+          {/* 뷰포트 */}
+          <div
+            className={[
+              "overflow-hidden",
+              "select-none touch-pan-y",
+              "cursor-grab active:cursor-grabbing",
+              "w-[583px] h-[400px] mx-auto",
+            ].join(" ")}
+            onPointerDown={onPointerDown}
+            onPointerMove={onPointerMove}
+            onPointerUp={onPointerUp}
+            onPointerCancel={onPointerUp}
+          >
+            <div
+              className="flex transition-transform duration-300 ease-out"
+              style={{ transform: `translateX(-${idx * 100}%)` }}
+            >
+              {safeSlides.map((s, i) => (
+                <div key={`${s.src}-${i}`} className="min-w-full">
+                  <Image
+                    src={s.src}
+                    alt={s.alt ?? `slide-${i + 1}`}
+                    width={583}
+                    height={400}
+                    className="w-full h-full object-contain"
+                    style={{ width: "100%", height: "100%" }}
+                    draggable={false}
+                  />
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+
+        {/* 도트 */}
+        {canSlide && (
+          <div className="mt-3 flex items-center justify-center gap-2">
+            {safeSlides.map((_, i) => {
+              const active = i === idx;
+              return (
+                <button
+                  key={i}
+                  type="button"
+                  onClick={() => setIdx(i)}
+                  aria-label={`${i + 1}번 슬라이드`}
+                  className={[
+                    "h-2 w-2 rounded-full",
+                    active ? "bg-black/70" : "bg-black/20 hover:bg-black/35",
+                  ].join(" ")}
+                />
+              );
+            })}
+          </div>
+        )}
+      </div>
+    </section>
+  );
+}

apps/dm/app/(landing)/reuse/_components/Lnb.tsx

@@ -0,0 +1,182 @@
+// apps/dm/app/(landing)/reuse/_components/Lnb.tsx
+"use client";
+
+import Image from "next/image";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { useMemo, useState } from "react";
+
+export type LnbItem = {
+  label: string;
+  href?: string; // href 없는 부모(2뎁스 컨테이너)도 허용
+  children?: LnbItem[];
+};
+
+function isExactActive(pathname: string, href?: string) {
+  if (!href) return false;
+  return pathname === href;
+}
+
+export default function Lnb({ title, items }: { title: string; items: LnbItem[] }) {
+  const pathname = usePathname();
+
+  // ✅ 현재 경로가 속한 2depth 그룹을 기본 open
+  const defaultOpenLabel = useMemo(() => {
+    const found = items.find((it) => it.children?.some((c) => isExactActive(pathname, c.href)));
+    return found?.label ?? null;
+  }, [items, pathname]);
+
+  // ✅ 아코디언: 한 번에 하나만 열리도록 openLabel 1개만 관리
+  const [openLabel, setOpenLabel] = useState<string | null>(defaultOpenLabel);
+
+  return (
+    <aside
+        className={[
+        "fixed left-0 top-[83px]",                 // ✅ 화면 고정 + TopNav 아래로
+        "w-[260px] min-w-[260px] shrink-0",
+        "h-[calc(100vh-83px)]",                    // ✅ 남은 높이만큼
+        "overflow-y-auto",                         // ✅ LNB 내부 스크롤
+        "bg-white z-50",                           // ✅ 겹침 방지
+        ].join(" ")}
+    >
+      {/* 타이틀 */}
+      <div
+        className="h-[120px] flex items-center justify-center
+                   text-white text-[40px] font-bold
+                   bg-gradient-to-r from-cyan-500 to-green-500"
+      >
+        {title}
+      </div>
+
+      {/* 메뉴 */}
+      <ul>
+        {items.map((item) => {
+          const hasChildren = !!item.children?.length;
+
+          // 1뎁스 active
+          const active1 = isExactActive(pathname, item.href);
+
+          // 2뎁스 active(자식 중 exact)
+          const active2 = item.children?.some((c) => isExactActive(pathname, c.href)) ?? false;
+
+          const active = active1 || active2;
+
+          // ✅ children 있는 경우: 아코디언 헤더 + 패널
+          if (hasChildren && !item.href) {
+            const isOpen = openLabel === item.label;
+
+            return (
+              <li key={item.label}>
+                {/* 아코디언 헤더 */}
+                <button
+                  type="button"
+                  onClick={() => setOpenLabel((prev) => (prev === item.label ? null : item.label))}
+                  className={[
+                    "w-full px-5 py-6",
+                    "flex items-center justify-between",
+                    "border-b border-slate-300",
+                    "text-center text-base font-semibold",
+                    active ? "bg-slate-100 text-slate-900" : "bg-slate-100 text-slate-500",
+                  ].join(" ")}
+                  aria-expanded={isOpen}
+                >
+                  <span className="w-full text-center">{item.label}</span>
+
+                  {/* ✅ 우측 화살표(이미지처럼) */}
+                  <span
+                    aria-hidden
+                    className={[
+                        "ml-3 shrink-0 transition-transform duration-200",
+                        isOpen ? "rotate-180" : "rotate-0",
+                    ].join(" ")}
+                    >
+                    <Image
+                      src="/images/landing/drop_arrow.svg"
+                      alt="드롭다운 화살표 아이콘"
+                      width={28}
+                      height={28}
+                      className="w-7 h-7"
+                    />
+                  </span>
+                </button>
+
+                {/* 패널: height auto 애니메이션(그리드 트릭) */}
+                <div
+                  className={[
+                    "grid transition-[grid-template-rows] duration-200 ease-out",
+                    isOpen ? "grid-rows-[1fr]" : "grid-rows-[0fr]",
+                  ].join(" ")}
+                >
+                  <div className="overflow-hidden bg-white">
+                    <ul>
+                      {item.children!.map((child) => {
+                        const childActive = isExactActive(pathname, child.href);
+
+                        return (
+                          <li key={child.href ?? child.label}>
+                            {child.href ? (
+                              <Link
+                                href={child.href}
+                                className={[
+                                  "block px-5 py-4 pl-[60px] text-[18px] font-medium",
+                                  "border-b border-slate-200 transition-colors",
+                                  childActive
+                                    ? "bg-white text-sky-500 cursor-default"
+                                    : "bg-slate-50 text-slate-500 hover:bg-white hover:text-sky-500",
+                                ].join(" ")}
+                              >
+                                {/* 이미지처럼 불릿 필요하면 */}
+                                <span className="mr-2 text-current">
+                                    •
+                                </span>
+                                {child.label}
+                              </Link>
+                            ) : (
+                              <div className="block px-5 py-4 text-[18px] font-medium border-b border-slate-200 bg-slate-50 text-slate-500">
+                                {child.label}
+                              </div>
+                            )}
+                          </li>
+                        );
+                      })}
+                    </ul>
+                  </div>
+                </div>
+              </li>
+            );
+          }
+
+          // ✅ 일반 1뎁스 메뉴(기존 유지)
+          return (
+            <li key={item.href ?? item.label}>
+              {item.href ? (
+                <Link
+                  href={item.href}
+                  className={[
+                    "block px-5 py-4 text-center text-base font-semibold",
+                    "border-b border-slate-300 transition-colors",
+                    active
+                      ? "bg-white text-sky-500 cursor-default"
+                      : "bg-[#F0F0F0] text-[#767676] hover:bg-white hover:text-sky-500",
+                  ].join(" ")}
+                >
+                  {item.label}
+                </Link>
+              ) : (
+                <div
+                  className={[
+                    "block px-5 py-4 text-center text-base font-semibold",
+                    "border-b border-slate-300",
+                    "bg-slate-100 text-slate-500",
+                  ].join(" ")}
+                >
+                  {item.label}
+                </div>
+              )}
+            </li>
+          );
+        })}
+      </ul>
+    </aside>
+  );
+}

apps/dm/app/(landing)/reuse/_components/LoginStatus.tsx

@@ -0,0 +1,51 @@
+// apps/dm/app/(landing)/reuse/_components/LoginStatus.tsx
+"use client";
+
+import Link from "next/link";
+import { useEffect, useState } from "react";
+import { useRouter } from "next/navigation";
+
+export default function LoginStatus() {
+  const router = useRouter();
+  const [userName, setUserName] = useState<string | null>(null);
+
+  useEffect(() => {
+    // 예시: 로그인 시 저장한 값
+    const name = localStorage.getItem("userName");
+    setUserName(name);
+  }, []);
+
+  const handleLogout = () => {
+    localStorage.removeItem("accessToken");
+    localStorage.removeItem("userName");
+    router.refresh(); // 헤더 상태 갱신
+  };
+
+  // 🔹 로그인 전
+  if (!userName) {
+    return (
+      <Link
+        href="/reuse/login"
+        className="flex items-center gap-2 rounded-md bg-sky-500 px-4 py-2 text-sm font-medium text-white hover:bg-sky-600"
+      >
+        로그인
+        <span>→</span>
+      </Link>
+    );
+  }
+
+  // 🔹 로그인 후
+  return (
+    <div className="flex items-center gap-3 text-sm">
+      <span className="text-gray-700">
+        <strong>{userName}</strong>님 환영합니다.
+      </span>
+      <button
+        onClick={handleLogout}
+        className="rounded-md bg-red-500 px-3 py-2 text-white hover:bg-red-600"
+      >
+        로그아웃
+      </button>
+    </div>
+  );
+}

apps/dm/app/(landing)/reuse/_components/PostcodeModal.tsx

@@ -0,0 +1,298 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+
+export type AddrItem = {
+  zipNo: string;       // 우편번호
+  roadAddr: string;    // 도로명주소(전체 문장)
+  jibunAddr: string;   // 지번주소
+};
+
+type Props = {
+  open: boolean;
+  onClose: () => void;
+  onSelect: (item: AddrItem) => void;
+};
+
+type PostcodeApiResponse = {
+  totalCount?: number;
+  items?: AddrItem[];
+};
+
+function useDebouncedValue<T>(value: T, delay = 250) {
+  const [v, setV] = useState(value);
+  useEffect(() => {
+    const t = setTimeout(() => setV(value), delay);
+    return () => clearTimeout(t);
+  }, [value, delay]);
+  return v;
+}
+
+// A: 추천은 roadAddr 전체 문장
+const normalize = (s: string) => s.replace(/\s+/g, " ").trim();
+
+const makeSuggestionsA = (list: AddrItem[], keyword: string, limit = 7) => {
+  const key = normalize(keyword);
+
+  const roadAddrs = list
+    .map((x) => x.roadAddr)
+    .filter((v): v is string => typeof v === "string" && v.trim().length > 0)
+    .map(normalize);
+
+  const uniq = Array.from(new Set(roadAddrs));
+
+  // 입력어 포함 우선 + 짧은 주소 우선
+  uniq.sort((a, b) => {
+    const ai = a.includes(key) ? 0 : 1;
+    const bi = b.includes(key) ? 0 : 1;
+    if (ai !== bi) return ai - bi;
+    return a.length - b.length;
+  });
+
+  return uniq.slice(0, limit);
+};
+
+export default function PostcodeModal({ open, onClose, onSelect }: Props) {
+  const [mounted, setMounted] = useState(false);
+
+  const [q, setQ] = useState("");
+  const dq = useDebouncedValue(q, 250);
+
+  const [suggestions, setSuggestions] = useState<string[]>([]);
+  const [items, setItems] = useState<AddrItem[]>([]);
+  const [total, setTotal] = useState(0);
+  const [loading, setLoading] = useState(false);
+
+  const inputRef = useRef<HTMLInputElement | null>(null);
+
+  useEffect(() => setMounted(true), []);
+
+  // open 시: body scroll lock + focus + ESC
+  useEffect(() => {
+    if (!open) return;
+
+    const prevOverflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+
+    setTimeout(() => inputRef.current?.focus(), 50);
+
+    const onKeyDown = (e: KeyboardEvent) => {
+      if (e.key === "Escape") onClose();
+    };
+    window.addEventListener("keydown", onKeyDown);
+
+    return () => {
+      document.body.style.overflow = prevOverflow;
+      window.removeEventListener("keydown", onKeyDown);
+    };
+  }, [open, onClose]);
+
+  // 검색/추천/리스트 갱신
+  useEffect(() => {
+    if (!open) return;
+
+    const keyword = dq.trim();
+
+    if (!keyword) {
+      setSuggestions([]);
+      setItems([]);
+      setTotal(0);
+      setLoading(false);
+      return;
+    }
+
+    let alive = true;
+
+    (async () => {
+      setLoading(true);
+      try {
+        const res = await fetch(`/api/postcode?query=${encodeURIComponent(keyword)}&page=1`, {
+          cache: "no-store",
+        });
+
+        const data = (await res.json()) as PostcodeApiResponse;
+
+        if (!alive) return;
+
+        const list: AddrItem[] = data.items ?? [];
+        const totalCount: number = data.totalCount ?? 0;
+
+        setItems(list);
+        setTotal(totalCount);
+
+        // ✅ A: roadAddr 전체 문장 추천
+        const sug = makeSuggestionsA(list, keyword, 7);
+        setSuggestions(sug);
+      } catch {
+        if (!alive) return;
+        setItems([]);
+        setTotal(0);
+        setSuggestions([]);
+      } finally {
+        if (alive) setLoading(false);
+      }
+    })();
+
+    return () => {
+      alive = false;
+    };
+  }, [dq, open]);
+
+  const showSuggest = open && q.trim().length > 0 && suggestions.length > 0;
+
+  if (!mounted || !open) return null;
+
+  return createPortal(
+    <div className="fixed inset-0 z-[9999]">
+      {/* overlay */}
+      <button
+        type="button"
+        className="absolute inset-0 bg-black/40"
+        aria-label="닫기"
+        onClick={onClose}
+      />
+
+      {/* panel wrapper */}
+      <div className="absolute inset-0 flex items-center justify-center p-6">
+        <div
+          className="relative w-full max-w-[520px] rounded-2xl bg-white shadow-[0_20px_60px_rgba(0,0,0,0.18)]"
+          role="dialog"
+          aria-modal="true"
+          aria-label="우편번호 검색"
+        >
+          {/* header */}
+          <div className="flex items-center justify-between px-7 pt-6 pb-4">
+            <h2 className="text-[22px] font-extrabold tracking-tight text-slate-900">
+              우편번호 검색
+            </h2>
+
+            <button
+              type="button"
+              onClick={onClose}
+              className="grid h-9 w-9 place-items-center rounded-full hover:bg-slate-100"
+              aria-label="닫기"
+            >
+              <span className="text-[18px] leading-none">✕</span>
+            </button>
+          </div>
+
+          {/* search input */}
+          <div className="px-7 pb-4">
+            <div className="relative">
+              <input
+                ref={inputRef}
+                value={q}
+                onChange={(e) => setQ(e.target.value)}
+                placeholder="주소검색"
+                className={[
+                  "w-full rounded-md border px-4 py-3 pr-12 text-[14px] outline-none",
+                  "border-slate-300 focus:border-sky-500 focus:ring-2 focus:ring-sky-200",
+                ].join(" ")}
+              />
+
+              <button
+                type="button"
+                className="absolute right-3 top-1/2 -translate-y-1/2 grid h-9 w-9 place-items-center rounded-full hover:bg-slate-100 text-[#01ACE5]"
+                aria-label="검색"
+                onClick={() => setQ((v) => v.trim())}
+                >
+                <svg width="18" height="18" viewBox="0 0 24 24" fill="none">
+                    <path
+                    d="M10.5 18a7.5 7.5 0 1 1 0-15 7.5 7.5 0 0 1 0 15Z"
+                    stroke="currentColor"
+                    strokeWidth="2"
+                    />
+                    <path
+                    d="M21 21l-4.3-4.3"
+                    stroke="currentColor"
+                    strokeWidth="2"
+                    strokeLinecap="round"
+                    />
+                </svg>
+              </button>
+
+              {/* suggestions dropdown */}
+              {showSuggest && (
+                <div className="absolute left-0 right-0 top-[calc(100%+6px)] z-10 overflow-hidden rounded-md border border-slate-200 bg-white shadow-lg">
+                  {suggestions.map((s) => (
+                    <button
+                      key={s}
+                      type="button"
+                      className="flex w-full items-center justify-between px-4 py-3 text-left text-[14px] hover:bg-slate-50"
+                      onClick={() => {
+                        // ✅ 추천 클릭 → 입력값 채우고 드롭다운 닫기 + 포커스 유지
+                        setQ(s);
+                        setSuggestions([]);
+                        requestAnimationFrame(() => inputRef.current?.focus());
+                      }}
+                    >
+                      <span className="truncate text-slate-800">{s}</span>
+                      <span className="ml-4 text-slate-400">↵</span>
+                    </button>
+                  ))}
+                </div>
+              )}
+            </div>
+          </div>
+
+          {/* results */}
+          <div className="px-7 pb-7">
+            <div className="mb-3 text-[13px] text-slate-500">
+              {q.trim()
+                ? loading
+                  ? "검색 중…"
+                  : `총 ${total.toLocaleString()}개의 검색결과`
+                : "주소를 입력하면 검색결과가 표시됩니다."}
+            </div>
+
+            <div className="max-h-[420px] overflow-y-auto pr-1">
+              {!loading && q.trim() && items.length === 0 && (
+                <div className="rounded-lg border border-slate-200 p-4 text-[14px] text-slate-600">
+                  검색 결과가 없습니다.
+                </div>
+              )}
+
+              <div className="space-y-3">
+                {items.map((it) => (
+                  <button
+                    key={`${it.zipNo}-${it.roadAddr}`}
+                    type="button"
+                    onClick={() => onSelect(it)}
+                    className={[
+                      "w-full rounded-lg border p-4 text-left transition",
+                      "border-slate-200 hover:border-sky-300 hover:bg-sky-50/30",
+                    ].join(" ")}
+                  >
+                    <div className="text-[20px] font-extrabold tracking-tight text-slate-900">
+                      {it.zipNo}
+                    </div>
+
+                    <div className="mt-2 flex items-start gap-2">
+                      <span className="w-[52px] shrink-0 mt-[2px] inline-flex items-center justify-center rounded-full border border-sky-400 px-2 py-[2px] text-[12px] font-semibold text-sky-600">
+                        도로명
+                      </span>
+                      <p className="text-[14px] leading-6 text-slate-700">
+                        {it.roadAddr}
+                      </p>
+                    </div>
+
+                    <div className="mt-1 flex items-start gap-2">
+                      <span className="w-[52px] shrink-0 mt-[2px] inline-flex items-center justify-center rounded-full border border-[#6DBB4F] px-2 py-[2px] text-[12px] font-semibold text-[#6DBB4F]">
+                        지번
+                      </span>
+                      <p className="text-[14px] leading-6 text-slate-700">
+                        {it.jibunAddr}
+                      </p>
+                    </div>
+                  </button>
+                ))}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>,
+    document.body
+  );
+}

apps/dm/app/(landing)/reuse/_components/SideIndicator.tsx

@@ -0,0 +1,99 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import styles from "../reuse.module.css";
+
+export interface SideIndicatorItem {
+  id: string;
+  label: string;      // 상단/공용 라벨
+  sideLabel?: string; // 사이드 인디게이터 전용 라벨(옵션)
+}
+
+export default function SideIndicator({
+  items,
+  activeId,
+}: {
+  items: SideIndicatorItem[];
+  activeId: string;
+}) {
+  const [manualActiveId, setManualActiveId] = useState<string | null>(null);
+  const clearTimerRef = useRef<number | null>(null);
+
+  const currentId = (manualActiveId ?? activeId ?? "main") || "main";
+
+  // ✅ manualActiveId가 observer(activeId)와 불일치하기 시작하면 즉시 해제 (stuck 방지)
+  useEffect(() => {
+    if (!manualActiveId) return;
+    if (activeId && activeId !== manualActiveId) setManualActiveId(null);
+  }, [activeId, manualActiveId]);
+
+  // ✅ fallback: 스무스 스크롤 시간이 길어도 manual이 오래 남지 않게 타임아웃 해제
+  useEffect(() => {
+    return () => {
+      if (clearTimerRef.current) window.clearTimeout(clearTimerRef.current);
+    };
+  }, []);
+
+  const scrollTo = (id: string) => {
+    setManualActiveId(id);
+
+    // 기존 타이머 제거 후 새로 설정
+    if (clearTimerRef.current) window.clearTimeout(clearTimerRef.current);
+    clearTimerRef.current = window.setTimeout(() => {
+      setManualActiveId(null);
+    }, 1600);
+
+    if (id === "main") {
+      window.scrollTo({ top: 0, behavior: "smooth" });
+      return;
+    }
+
+    document.getElementById(id)?.scrollIntoView({
+      behavior: "smooth",
+      block: "start",
+    });
+  };
+
+  return (
+    <aside className={styles.sideIndicator} aria-label="섹션 이동">
+      <div className={styles.sideIndicatorLine} aria-hidden="true" />
+
+      <ul className={styles.sideIndicatorList}>
+        {items.map((it) => {
+          const isActive = it.id === currentId;
+          const isMain = it.id === "main";
+          const displayLabel = it.sideLabel ?? it.label;
+
+          return (
+            <li key={it.id} className={styles.sideIndicatorItem}>
+              <button
+                type="button"
+                onClick={() => scrollTo(it.id)}
+                className={[
+                  styles.indicatorBtn,
+                  isActive ? styles.indicatorActive : styles.indicatorDot,
+                  isActive
+                    ? isMain
+                      ? styles.indicatorMainActive
+                      : styles.indicatorSectionActive
+                    : "",
+                ].join(" ")}
+                aria-current={isActive ? "location" : undefined}
+                aria-label={displayLabel}
+              >
+                {/* ✅ 텍스트 중복 렌더링 제거:
+                    - active일 때만 시각적 텍스트 표시
+                    - 비활성은 SR-only로만 제공 (CSS에 따라 필요 없으면 제거 가능) */}
+                {isActive ? (
+                  <span className={styles.indicatorText}>{displayLabel}</span>
+                ) : (
+                  <span className="sr-only">{displayLabel}</span>
+                )}
+              </button>
+            </li>
+          );
+        })}
+      </ul>
+    </aside>
+  );
+}

apps/dm/app/(landing)/reuse/_components/SubPageHeader.tsx

@@ -0,0 +1,64 @@
+"use client";
+
+import Link from "next/link";
+
+export type Crumb = { label: string; href?: string };
+
+type Props = {
+  title: string;
+  crumbs: Crumb[];
+  note?: string;
+  underlineWidthClass?: string;
+  className?: string;
+  wrapClassName?: string;
+  hideFooterLine?: boolean;
+  hideGuideText?: boolean;
+};
+
+export default function SubPageHeader({
+  title,
+  crumbs,
+  note = "* 는 필수 값입니다.",
+  // underlineWidthClass = "w-40",
+  className = "",
+  wrapClassName = "",
+  // hideFooterLine = false,
+  hideGuideText = false,
+}: Props) {
+  return (
+    <section className={`text-black ${className}`}>
+      <div className={`pb-5 ${wrapClassName}`}>
+        <div className="flex items-start justify-between gap-6">
+          {/* 좌측 타이틀 */}
+          <div className="inline-block">
+            <h1 className="relative z-10 px-2 text-[28px] font-extrabold tracking-tight text-slate-900 leading-none">{title}</h1>
+            <div className="relative top-[-7px] -z-1 h-4 bg-gradient-to-r from-sky-300 to-green-300" />
+          </div>
+
+          {/* 우측 브레드크럼 */}
+          <nav className="pt-2 text-sm text-black/70" aria-label="breadcrumb">
+            {crumbs.map((c, i) => (
+              <span key={`${c.label}-${i}`}>
+                {c.href ? (
+                  <Link href={c.href} className="hover:text-sky-500">
+                    {c.label}
+                  </Link>
+                ) : (
+                  <span className="text-black/90">{c.label}</span>
+                )}
+                {i < crumbs.length - 1 && <span className="mx-2">›</span>}
+              </span>
+            ))}
+          </nav>
+        </div>
+        {/* 하단 라인 + 안내문 */}
+        {!hideGuideText && (
+          <div className="mt-6 border-t border-black/10 pt-4 text-sm text-black/70">
+            <span className="text-red-400">*</span>
+            {note.replace("*", "")}
+          </div>
+        )}  
+      </div>
+    </section>
+  );
+}

apps/dm/app/(landing)/reuse/_components/TopNav.tsx

@@ -0,0 +1,482 @@
+// apps/dm/app/(landing)/reuse/_components/TopNav.tsx
+"use client";
+
+import Image from "next/image";
+import Link from "next/link";
+import { useEffect, useId, useState } from "react";
+import { useRouter } from "next/navigation";
+
+const NAV_ITEMS = [
+  { href: "/reuse/intro/law", label: "물 재이용 소개" },
+  { href: "/reuse/cases/rain", label: "물 재이용 현황" },
+  { href: "/reuse/business/rain/suwon", label: "물 재이용 사례" },
+  { href: "/reuse/apply/place", label: "수요신청" },
+];
+
+// ✅ 필요 시 실제 “수요처등록” 페이지로 경로만 교체하세요.
+const REGISTER_HREF = "/reuse/apply/place";
+
+// ✅ 로그인 정보 저장 키(원하는대로 변경 가능)
+const LS_TOKEN_KEY = "reuse_accessToken";
+const LS_USER_KEY = "reuse_userName";
+
+type LoginModalProps = {
+  open: boolean;
+  onClose: () => void;
+  onSuccess?: (payload: { userName: string; accessToken?: string }) => void;
+};
+
+type FieldKey = "bizNo" | "workerNo" | "pw";
+
+function isBizNoValid(v: string) {
+  // 예: 123-45-67890
+  return /^\d{3}-\d{2}-\d{5}$/.test(v);
+}
+
+function inputCls(opts: { hasError?: boolean; disabled?: boolean }) {
+  const base =
+    "w-full h-[48px] rounded-[4px] border px-5 text-[18px] outline-none";
+  if (opts.disabled) return `${base} border-gray-200 bg-gray-50 text-gray-400`;
+  if (opts.hasError)
+    return `${base} border-red-500 focus:border-red-500 ring-1 ring-red-400`;
+  return `${base} border-gray-300 focus:border-sky-400`;
+}
+
+function DemandLoginModal({ open, onClose, onSuccess }: LoginModalProps) {
+  const titleId = useId();
+  const router = useRouter();
+
+  const [bizNo, setBizNo] = useState("");
+  const [workerNo, setWorkerNo] = useState("");
+  const [noWorker, setNoWorker] = useState(false);
+  const [pw, setPw] = useState("");
+
+  // ✅ 유효성/서버 에러 표시용
+  const [errors, setErrors] = useState<Partial<Record<FieldKey, string>>>({});
+  const [touched, setTouched] = useState<Partial<Record<FieldKey, boolean>>>({});
+  const [submitting, setSubmitting] = useState(false);
+
+  useEffect(() => {
+    if (!open) return;
+    const onKeyDown = (e: KeyboardEvent) => {
+      if (e.key === "Escape") onClose();
+    };
+    window.addEventListener("keydown", onKeyDown);
+
+    // 스크롤 잠금
+    const prev = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+
+    // 모달 오픈 시 에러/터치 초기화
+    setErrors({});
+    setTouched({});
+
+    return () => {
+      window.removeEventListener("keydown", onKeyDown);
+      document.body.style.overflow = prev;
+    };
+  }, [open, onClose]);
+
+  useEffect(() => {
+    if (noWorker) {
+      setWorkerNo("");
+      setErrors((p) => {
+        const { ...rest } = p;
+        delete rest.workerNo;
+        return rest;
+      });
+    }
+  }, [noWorker]);
+
+  if (!open) return null;
+
+  const validate = () => {
+    const next: Partial<Record<FieldKey, string>> = {};
+
+    const b = bizNo.trim();
+    const w = workerNo.trim();
+    const p = pw.trim();
+
+    if (!b) next.bizNo = "사업자등록번호를 입력해주세요.";
+    else if (!isBizNoValid(b))
+      next.bizNo = "사업자등록번호 형식이 올바르지 않습니다. (예: 123-45-67890)";
+
+    if (!noWorker && !w) next.workerNo = "종사자등록번호를 입력해주세요.";
+
+    if (!p) next.pw = "비밀번호를 입력해주세요.";
+
+    setErrors(next);
+    return next;
+  };
+
+  const markTouched = (key: FieldKey) =>
+    setTouched((p) => ({ ...p, [key]: true }));
+
+  const markAllTouched = () =>
+    setTouched({ bizNo: true, workerNo: true, pw: true });
+
+  const submit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    markAllTouched();
+
+    const v = validate();
+    if (Object.keys(v).length) return;
+
+    try {
+      setSubmitting(true);
+
+      // ✅ TODO: 실제 로그인 API 연결 지점
+      // const res = await fetch("/api/demand/login", {
+      //   method: "POST",
+      //   headers: { "Content-Type": "application/json" },
+      //   body: JSON.stringify({ bizNo, workerNo: noWorker ? null : workerNo, pw }),
+      // });
+      // if (!res.ok) { ... }
+      // const data = await res.json();
+      // onSuccess?.({ userName: data.userName, accessToken: data.token });
+
+      // --- 데모: 비밀번호가 "1234"면 성공 처리(원하면 제거) ---
+      const serverOk = pw.trim() === "1234";
+      if (!serverOk) {
+        setErrors((p) => ({ ...p, pw: "잘못된 비밀번호입니다. (데모: 1234 입력 시 성공)" }));
+        setTouched((p) => ({ ...p, pw: true }));
+        return;
+      }
+
+      onSuccess?.({ userName: "마인드원", accessToken: "demo_token" });
+      onClose();
+      router.refresh();
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  return (
+    <div className="fixed inset-0 z-[100]">
+      {/* Backdrop */}
+      <button
+        type="button"
+        aria-label="닫기"
+        onClick={onClose}
+        className="absolute inset-0 bg-black/40"
+      />
+
+      {/* Dialog */}
+      <div className="absolute inset-0 flex items-center justify-center">
+        <div
+          role="dialog"
+          aria-modal="true"
+          aria-labelledby={titleId}
+          className="w-full max-w-[600px] rounded-[16px] bg-white shadow-2xl overflow-hidden"
+        >
+          {/* Header */}
+          <div className="relative px-10 pt-10">
+            <button
+              type="button"
+              onClick={onClose}
+              aria-label="닫기"
+              className="absolute right-8 top-8 z-40 h-10 w-10 grid place-items-center rounded-full hover:bg-gray-100"
+            >
+              <span className="text-2xl leading-none">×</span>
+            </button>
+
+            <h2
+              id={titleId}
+              className="relative z-10 px-2 text-center text-[32px] font-bold tracking-tight leading-none text-gray-900"
+            >
+              수요처 로그인
+            </h2>
+
+            {/* title underline gradient bar */}
+            <div className="relative top-[-7px] -z-1 mx-auto h-[10px] w-[240px] bg-gradient-to-r from-sky-300 to-green-300" />
+          </div>
+
+          {/* Body */}
+          <form onSubmit={submit} className="px-14 pb-12 pt-10">
+            <div className="space-y-7">
+              {/* 사업자 등록번호 */}
+              <div>
+                <label className="block text-[18px] font-bold text-gray-900 mb-3">
+                  사업자 등록번호
+                </label>
+                <input
+                  value={bizNo}
+                  onChange={(e) => {
+                    setBizNo(e.target.value);
+                    setErrors((p) => ({ ...p, bizNo: undefined }));
+                  }}
+                  onBlur={() => {
+                    markTouched("bizNo");
+                    validate();
+                  }}
+                  placeholder="사업자등록번호를 입력하세요. (예: 123-45-67890)"
+                  className={inputCls({ hasError: !!(touched.bizNo && errors.bizNo) })}
+                />
+                {touched.bizNo && errors.bizNo && (
+                  <p className="mt-3 text-[14px] font-medium text-red-500">
+                    {errors.bizNo}
+                  </p>
+                )}
+              </div>
+
+              {/* 종사자등록번호 + 해당없음 */}
+              <div>
+                <div className="flex items-center justify-between mb-3">
+                  <label className="block text-[18px] font-bold text-gray-900">
+                    종사자등록번호
+                  </label>
+
+                  <label className="flex items-center gap-1 text-[16px] text-[#4F4F4F] select-none">
+                    <input
+                      type="checkbox"
+                      checked={noWorker}
+                      onChange={(e) => setNoWorker(e.target.checked)}
+                      className="h-4 w-4 accent-[#004A94]"
+                    />
+                    해당없음
+                  </label>
+                </div>
+
+                <input
+                  value={workerNo}
+                  onChange={(e) => {
+                    setWorkerNo(e.target.value);
+                    setErrors((p) => ({ ...p, workerNo: undefined }));
+                  }}
+                  onBlur={() => {
+                    markTouched("workerNo");
+                    validate();
+                  }}
+                  disabled={noWorker}
+                  placeholder="종사자등록번호를 입력하세요."
+                  className={inputCls({
+                    disabled: noWorker,
+                    hasError: !noWorker && !!(touched.workerNo && errors.workerNo),
+                  })}
+                />
+
+                {!noWorker && touched.workerNo && errors.workerNo && (
+                  <p className="mt-3 text-[14px] font-medium text-red-500">
+                    {errors.workerNo}
+                  </p>
+                )}
+              </div>
+
+              {/* 비밀번호 */}
+              <div>
+                <label className="block text-[18px] font-bold text-gray-900 mb-3">
+                  비밀번호
+                </label>
+                <input
+                  type="password"
+                  value={pw}
+                  onChange={(e) => {
+                    setPw(e.target.value);
+                    setErrors((p) => ({ ...p, pw: undefined }));
+                  }}
+                  onBlur={() => {
+                    markTouched("pw");
+                    validate();
+                  }}
+                  placeholder="비밀번호를 입력하세요."
+                  className={inputCls({ hasError: !!(touched.pw && errors.pw) })}
+                />
+                {touched.pw && errors.pw && (
+                  <p className="mt-3 text-[14px] font-medium text-red-500">
+                    {errors.pw}
+                  </p>
+                )}
+              </div>
+
+              {/* 로그인 버튼 */}
+              <button
+                type="submit"
+                disabled={submitting}
+                className={[
+                  "mt-2 w-full h-[60px] rounded-[4px] text-white text-[18px]",
+                  submitting
+                    ? "bg-sky-300 cursor-not-allowed"
+                    : "bg-sky-500 hover:bg-sky-600 active:bg-sky-700",
+                ].join(" ")}
+              >
+                {submitting ? "로그인 중..." : "로그인"}
+              </button>
+
+              {/* 비밀번호 초기화 요청 */}
+              <button
+                type="button"
+                onClick={() => alert("TODO: 비밀번호 초기화 요청 화면/기능 연결")}
+                className="mx-auto block text-[14px] text-[#767676] hover:text-gray-900"
+              >
+                비밀번호 초기화 요청
+              </button>
+
+              {/* 하단 안내 박스 + 수요처등록 버튼 */}
+              <div className="mt-6 border border-[#004A94] bg-[#EEF3F9] px-4 py-4 flex items-center justify-between gap-6">
+                <div className="leading-snug">
+                  <div className="text-[16px] text-[#8698AA]">
+                    수요처를 등록하지 않았다면
+                  </div>
+                  <div className="text-[18px] text-[#004A94]">
+                    먼저 수요처등록을 해주세요.
+                  </div>
+                </div>
+
+                <button
+                  type="button"
+                  onClick={() => router.push(REGISTER_HREF)}
+                  className="shrink-0 rounded-[4px] h-[48px] px-10 bg-[#004A94] text-white text-[18px] hover:opacity-95"
+                >
+                  수요처등록
+                </button>
+              </div>
+            </div>
+          </form>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default function TopNav() {
+  const router = useRouter();
+
+  const [loginOpen, setLoginOpen] = useState(false);
+  const [userName, setUserName] = useState<string | null>(null);
+
+  // ✅ 초기 로드 시 로그인 상태 반영
+  useEffect(() => {
+    const name = localStorage.getItem(LS_USER_KEY);
+    setUserName(name);
+  }, []);
+
+  const openLogin = () => setLoginOpen(true);
+
+  const logout = () => {
+    localStorage.removeItem(LS_TOKEN_KEY);
+    localStorage.removeItem(LS_USER_KEY);
+    setUserName(null);
+    router.refresh();
+  };
+
+  return (
+    <>
+      <header className="fixed top-0 left-0 right-0 z-50 bg-white backdrop-blur border-b shadow-md min-w-[1800px]">
+        {/* ✅ 좌/중/우 정렬이 되도록 컨테이너 구성 */}
+        <div className="px-6">
+          <div className="relative h-[83px] flex items-center justify-between">
+            {/* 좌측: 로고 */}
+            <div className="flex items-center gap-3">
+              <Link href="/reuse" className="flex items-center">
+                <Image
+                  src="/images/landing/logo.png"
+                  alt="HASUON"
+                  width={229}
+                  height={46}
+                  className="h-9 w-auto"
+                  priority
+                />
+              </Link>
+            </div>
+
+            {/* 중앙: 상단 메뉴 */}
+            <nav className="absolute left-1/2 -translate-x-1/2 flex items-center gap-[40px] text-sm font-medium">
+              {NAV_ITEMS.map((it) => {
+                // ✅ 수요신청: 로그인 전이면 로그인 모달, 로그인 후면 페이지 이동
+                if (it.label === "수요신청") {
+                  return (
+                    <button
+                      key={it.href}
+                      type="button"
+                      onClick={() => {
+                        if (!userName) openLogin();
+                        else router.push(it.href);
+                      }}
+                      className={[
+                        "relative px-3 py-2 text-lg font-bold",
+                        "text-gray-800 hover:text-sky-700",
+                      ].join(" ")}
+                    >
+                      {it.label}
+                    </button>
+                  );
+                }
+
+                return (
+                  <Link
+                    key={it.href}
+                    href={it.href}
+                    className={[
+                      "relative px-3 py-2 text-lg font-bold",
+                      "text-gray-800 hover:text-sky-700",
+                    ].join(" ")}
+                  >
+                    {it.label}
+                  </Link>
+                );
+              })}
+            </nav>
+
+            {/* ✅ 우측: 로그인 버튼 / 로그인 정보 + 로그아웃 */}
+            <div className="flex items-center gap-3">
+              {!userName ? (
+                <button
+                  type="button"
+                  onClick={openLogin}
+                  className="inline-flex items-center gap-2 rounded-md bg-sky-500 px-4 py-2 text-base text-white hover:bg-sky-600"
+                >
+                  로그인
+                  <span aria-hidden>
+                    <Image
+                      src="/images/landing/icon_login.png"
+                      alt="로그인 아이콘"
+                      width={24}
+                      height={24}
+                      className="h-6 w-6 object-contain ml-1"
+                    />
+                  </span>
+                </button>
+              ) : (
+                <>
+                  <span className="text-base text-gray-700">
+                    <strong className="text-xl text-emerald-600">{userName}</strong>님 환영합니다.
+                  </span>
+                  <button
+                    type="button"
+                    onClick={logout}
+                    className="inline-flex items-center gap-2 rounded-md bg-red-500 px-4 py-2 text-base text-white hover:bg-red-600"
+                  >
+                    로그아웃
+                    <span aria-hidden>
+                        <Image
+                          src="/images/landing/icon_logout.png"
+                          alt="로그아웃 아이콘"
+                          width={24}
+                          height={24}
+                          className="h-6 w-6 object-contain"
+                        />
+                    </span>
+                  </button>
+                </>
+              )}
+            </div>
+          </div>
+        </div>
+      </header>
+
+      {/* ✅ 로그인 모달 */}
+      <DemandLoginModal
+        open={loginOpen}
+        onClose={() => setLoginOpen(false)}
+        onSuccess={({ userName, accessToken }) => {
+          // ✅ 로그인 성공 처리: 저장 + 헤더 갱신
+          localStorage.setItem(LS_USER_KEY, userName);
+          if (accessToken) localStorage.setItem(LS_TOKEN_KEY, accessToken);
+          setUserName(userName);
+          setLoginOpen(false);
+          router.refresh();
+        }}
+      />
+    </>
+  );
+}

apps/dm/app/(landing)/reuse/_constants/lnb.ts

@@ -0,0 +1,58 @@
+// apps/dm/app/(landing)/reuse/_constants/lnb.ts
+import type { LnbItem } from "../_components/Lnb";
+
+export const LNB_DEMAND: LnbItem[] = [
+  { href: "/reuse/apply/place", label: "수요처" },
+  { href: "/reuse/apply/register", label: "수요정보등록" },
+  { href: "/reuse/apply/status", label: "수요신청현황" },
+];
+
+export const LNB_INTRO = [
+  { label: "물 재이용 법", href: "/reuse/intro/law" },
+  { label: "빗물 이용시설", href: "/reuse/intro/rain" },
+  { label: "중수도", href: "/reuse/intro/greywater" },
+  { label: "하수처리수", href: "/reuse/intro/treated" },
+];
+
+export const LNB_CASES  = [
+  { label: "빗물이용시설(현황)", href: "/reuse/cases/rain" },
+  { label: "중수도(현황)", href: "/reuse/cases/greywater" },
+  { label: "하수처리수 재이용시설(현황)", href: "/reuse/cases/treated" },
+];
+
+// 물 재이용 사례처럼 2depth가 있는 메뉴
+export const LNB_BUSINESS: LnbItem[] = [
+  {
+    label: "빗물 재이용 사례",
+    children: [
+      { label: "경기도 수원시", href: "/reuse/business/rain/suwon" },
+    //   { label: "충청남도 보령시", href: "/reuse/business/rain/bolyeong" },
+    //   { label: "충청북도 청주시", href: "/reuse/business/rain/cheongju" },
+    ],
+  },
+  {
+    label: "중수 재이용 사례",
+    children: [{ label: "사례 목록", href: "/reuse/business/graywater" }],
+  },
+  {
+    label: "하수 재이용 사례",
+    children: [
+      { label: "파주시", href: "/reuse/business/sewage/paju" },
+      { label: "충청남도 보령시", href: "/reuse/business/sewage/bolyeong" },
+      { label: "여수", href: "/reuse/business/sewage/yeosu" },
+      { label: "청주", href: "/reuse/business/sewage/cheongju" },
+      { label: "수원시 황구지천", href: "/reuse/business/sewage/hwanggu" },
+      { label: "구리시 도로자동청소시스템", href: "/reuse/business/sewage/guri" },
+    ],
+  },
+  {
+    label: "해외 재이용 사례",
+    children: [
+        { label: "사례 개요", href: "/reuse/business/globalCase/overview" },
+        { label: "대만", href: "/reuse/business/globalCase/taiwan" },
+        { label: "호주", href: "/reuse/business/globalCase/australia" },    
+        { label: "싱가포르", href: "/reuse/business/globalCase/singapore" },
+        { label: "EU", href: "/reuse/business/globalCase/eu" }
+    ],
+  },
+];

apps/dm/app/(landing)/reuse/_hooks/useScrollSpy.ts

@@ -0,0 +1,66 @@
+/**
+ * IntersectionObserver로 각 section의 화면 노출 비율을 계산해서 가장 많이 보이는 section을 activeId로 만든다
+ */
+"use client";
+import { useEffect, useRef, useState } from "react";
+
+const DEFAULT_THRESHOLD = [0, 0.01, 0.1, 0.25, 0.5, 0.75];
+
+export function useScrollSpy(sectionIds: string[], options?: IntersectionObserverInit) {
+  const [activeId, setActiveId] = useState(sectionIds[0] ?? "");
+  const ratiosRef = useRef<Map<string, number>>(new Map());
+  const activeIdRef = useRef(activeId);
+
+  useEffect(() => {
+    activeIdRef.current = activeId;
+  }, [activeId]);
+
+  const threshold = options?.threshold ?? DEFAULT_THRESHOLD;
+  const thresholdKey = Array.isArray(threshold) ? threshold.join("|") : String(threshold);
+
+  useEffect(() => {
+    const els = sectionIds
+      .map((id) => document.getElementById(id))
+      .filter(Boolean) as HTMLElement[];
+
+    if (!els.length) return;
+
+    const DEFAULT_ROOT_MARGIN = "83px 0px -65% 0px";
+
+    // 초기값 세팅(안정화)
+    ratiosRef.current.clear();
+    els.forEach((el) => ratiosRef.current.set(el.id, 0));
+
+    const io = new IntersectionObserver(
+      (entries) => {
+        for (const e of entries) {
+          const id = (e.target as HTMLElement).id;
+          ratiosRef.current.set(id, e.isIntersecting ? e.intersectionRatio : 0);
+        }
+
+        // ✅ 전체 섹션 중 가장 ratio 큰 항목을 active로
+        let bestId = activeIdRef.current;
+        let bestRatio = -1;
+
+        for (const [id, ratio] of ratiosRef.current.entries()) {
+          if (ratio > bestRatio) {
+            bestRatio = ratio;
+            bestId = id;
+          }
+        }
+
+        if (bestId) setActiveId(bestId);
+      },
+      {
+        root: options?.root ?? null,
+        threshold,
+        rootMargin: options?.rootMargin ?? DEFAULT_ROOT_MARGIN,
+      }
+    );
+
+    els.forEach((el) => io.observe(el));
+    return () => io.disconnect();
+  }, [sectionIds, options?.root, options?.rootMargin, threshold, thresholdKey]);
+
+  return activeId;
+}

apps/dm/app/(landing)/reuse/_sections/Cases.tsx

@@ -0,0 +1,69 @@
+// apps/dm/app/(landing)/reuse/_sections/Cases.tsx
+"use client";
+
+import Image from "next/image";
+import section03 from "@/public/images/landing/section_03.png";
+
+export default function Cases() {
+  return (
+    <section id="cases" className="bg-[#EAF6F6]">
+      <div className="mx-auto max-w-[1520px] px-6 h-[870px] flex items-center">
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 w-full">
+          
+          {/* 좌측 : 카피 영역 */}
+          <div className="flex flex-col justify-center">
+            <div className="pl-2 lg:pl-10">
+                <p className="text-[32px] font-extrabold text-slate-900 tracking-[-0.02em]">
+                    빗물+중수도+하수도
+                </p>
+
+                <h2 className="mt-6 leading-[1.1] tracking-[-0.03em]">
+                    <span className="block text-[64px] font-extrabold text-slate-900">
+                        데이터로 보는
+                    </span>
+                    <span className="mt-3 block text-[64px] font-extrabold text-[#004A94]">
+                        물 재이용 현황
+                    </span>
+                </h2>
+
+                <div className="mt-14">
+                    <a
+                        href="/reuse/cases/rain"
+                        className="
+                        inline-flex items-center justify-center gap-3
+                        w-[260px] h-[52px]
+                        bg-[#01ACE5] text-white
+                        rounded-sm
+                        hover:bg-[#0A78C0]
+                        transition-colors
+                        "
+                    >
+                        물 재이용 현황 보러가기
+                        <span className="text-lg">→</span>
+                    </a>
+                </div>
+            </div>
+          </div>
+
+          {/* 우측 : 이미지 카드 */}
+          <div className="flex justify-center lg:justify-end">
+            <div
+              className="
+                relative
+                w-full max-w-[720px]
+              "
+            >
+              <Image
+                src={section03}
+                alt="물 재이용 현황 데이터 테이블"
+                className="w-full h-auto object-cover"
+                style={{ width: "100%", height: "auto" }}
+              />
+            </div>
+          </div>
+
+        </div>
+      </div>
+    </section>
+  );
+}

apps/dm/app/(landing)/reuse/_sections/Hero.tsx

@@ -0,0 +1,36 @@
+// apps/dm/app/(landing)/reuse/_sections/Hero.tsx
+import Image from "next/image";
+import styles from "../reuse.module.css";
+
+export default function Hero() {
+  return (
+    <section id="main" className={styles.hero}>
+      <div className={styles.heroBg} aria-hidden />
+      <div className={styles.heroOverlay} aria-hidden />
+
+      <div className="absolute inset-0 z-10 flex items-center justify-center">
+        <div className="flex flex-col items-center justify-items-center gap-[40px] mx-auto max-w-[1520px] px-6 text-center text-white">
+          <h1 className="text-5xl font-bold tracking-tight">물 재이용</h1>
+          <p className="text-xl font-medium leading-6 text-white/85 max-w-[720px] mx-auto">
+            빗물, 오수, 하수처리수, 폐수처리수, 발전소 온배수를 재이용처리하여<br />
+            생활, 공업, 농업, 조경, 하천유지 등의 용도로 재이용합니다.
+          </p>
+          <p className="text-lg leading-6 text-white/85 max-w-[720px] mx-auto">
+            전국 하수 재이용률 15.6%(2024년 통계 기준),<br />
+            물재이용 활성화를 위한 재이용 수요신청, 매칭을 추진하고 있습니다.
+          </p>
+        </div>
+      </div>
+      <div className="absolute inset-x-0 bottom-[120px] flex flex-col items-center justify-items-center gap-2 mt-10">
+        <Image
+          src="/images/landing/scroll_down.svg"
+          alt=""
+          width={26}
+          height={40}
+          className="w-[26px] h-[40px]"
+        />
+        <span className="text-white/80 text-base tracking-[.25em]">scroll down</span>
+      </div>
+    </section>
+  );
+}

apps/dm/app/(landing)/reuse/_sections/IntroCards.tsx

@@ -0,0 +1,93 @@
+// apps/dm/app/(landing)/reuse/_sections/IntroCards.tsx
+"use client";
+
+import Image, { type StaticImageData } from "next/image";
+import Link from "next/link";
+import card01 from "@/public/images/landing/card_01.jpg";
+import card02 from "@/public/images/landing/card_02.jpg";
+import card03 from "@/public/images/landing/card_03.jpg";
+import card04 from "@/public/images/landing/card_04.jpg";
+
+type IntroCardItem = {
+  title: string;
+  desc: string;
+  image: StaticImageData;
+  href: string;
+};
+
+const INTRO_CARDS: IntroCardItem[] = [
+  {
+    title: "물 재이용 법",
+    desc: "물의 재이용 촉진 및 지원에 관한 법률을 시행하고, 일부 법률은 개정되었습니다.",
+    image: card01,
+    href: "/reuse/intro/law",
+  },
+  {
+    title: "친환경 수자원 빗물",
+    desc: "가뭄을 극복하고 홍수를 예방하기 위해 비가 내릴 때 빗물을 모아두었다가 사용합니다.",
+    image: card02,
+    href: "/reuse/intro/rain",
+  },
+  {
+    title: "알뜰하게 재이용되는 중수",
+    desc: "한번 사용한 물을 중수도 시설을 통해 재생하여 개별적 또는 지역적으로 재이용할 수 있습니다.",
+    image: card03,
+    href: "/reuse/intro/greywater",
+  },
+  {
+    title: "하수처리수 재이용",
+    desc: "사용하고 버려진 공공하수처리장으로 모여진 물을 용도에 맞는 처리 후 재이용 할 수 있습니다.",
+    image: card04,
+    href: "/reuse/intro/treated",
+  },
+];
+
+export default function IntroCards() {
+  return (
+    <section id="intro" className="bg-white">
+      <div className="mx-auto max-w-[1520px] px-6 py-[90px] h-[870px]">
+        <div className="text-center">
+          <div className="inline-block"> 
+            <h2 className="relative z-10 px-2 text-[40px] font-extrabold tracking-tight text-slate-900 leading-none">물 재이용 소개</h2>
+            <div className="relative top-[-7px] -z-1 h-4 bg-gradient-to-r from-sky-300 to-green-300"></div>
+          </div>
+          <p className="mt-5 text-xl text-gray-500">
+            지속 가능한 미래를 위한 약속, 깨끗한 물의 새로운 순환을 시작합니다.
+          </p>
+        </div>
+
+        <section className="mx-auto max-w-8xl px-4 py-12">
+            <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-4">
+                {INTRO_CARDS.map((card, idx) => (
+                <Link
+                    key={idx}
+                    href={card.href}
+                    aria-label={`${card.title} 상세로 이동`}
+                    className="group relative h-[280px] md:h-[320px] lg:h-[500px] overflow-hidden rounded-2xl cursor-pointer focus:outline-none focus:ring-2 focus:ring-sky-400/60"
+                >
+                    {/* 배경 이미지 (이미 그라디언트 포함) */}
+                    <Image
+                      src={card.image}
+                      alt={card.title}
+                      fill
+                      sizes="(min-width: 1024px) 25vw, (min-width: 768px) 50vw, 100vw"
+                      className="absolute inset-0 h-full w-full object-cover transition-transform duration-500 hover:scale-105"
+                    />
+
+                    {/* 텍스트 영역 */}
+                    <div className="absolute bottom-0 z-10 p-6 text-white">
+                        <h3 className="text-lg font-semibold tracking-tight">
+                            {card.title}
+                        </h3>
+                        <p className="mt-2 text-sm leading-relaxed text-white/90 line-clamp-3">
+                            {card.desc}
+                        </p>
+                    </div>
+                </Link>
+                ))}
+            </div>
+        </section>
+      </div>
+    </section>
+  );
+}

apps/dm/app/(landing)/reuse/_sections/ProcessFlow.tsx

@@ -0,0 +1,22 @@
+// apps/dm/app/(landing)/reuse/_sections/ProcessFlow.tsx
+import CaseTabsCarousel from "../_components/CaseTabsCarousel";
+
+
+export default function ProcessFlow() {
+  return (
+    <section id="processflow" className="bg-white">
+      <div className="mx-auto max-w-[1520px] px-6 py-[50px] h-[870px]">
+        <div className="text-center">
+          <div className="inline-block"> 
+            <h2 className="relative z-10 px-2 text-[40px] font-extrabold tracking-tight text-slate-900 leading-none">물 재이용 사례</h2>
+            <div className="relative top-[-7px] -z-1 h-4 bg-gradient-to-r from-sky-300 to-green-300"></div>
+          </div>
+        </div>
+
+        {/* 탭메뉴 영역 */}
+        <CaseTabsCarousel />
+        
+      </div>
+    </section>
+  );
+}

apps/dm/app/(landing)/reuse/apply/layout.tsx

@@ -0,0 +1,13 @@
+// 예) apps/dm/app/(landing)/reuse/apply/layout.tsx
+import type { ReactNode } from "react";
+import Lnb from "../_components/Lnb";
+import { LNB_DEMAND } from "../_constants/lnb";
+
+export default function ApplyLayout({ children }: { children: ReactNode }) {
+  return (
+    <div className="flex gap-0">
+      <Lnb title="수요신청" items={LNB_DEMAND} />
+      <main className="flex-1 px-[100px] pt-[80px]">{children}</main>
+    </div>
+  );
+}