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,7 +19,14 @@ apps/fo/.next/**/*
 #.env*
 .qodo
 
+# next-agents-md
+.next-docs/
+
 pnpm-lock.yaml
 settings.json
 .npmrc
-.cursor
+.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/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/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/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/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/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/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,12 +1,13 @@
 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://localhost:3005
-NEXT_PUBLIC_CS_SERVER_API_URL = http://dev.onasys.co.kr:8000
+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_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
@@ -19,7 +20,6 @@ NEXT_PUBLIC_NGII_PARAM = 04trYP9_xwLAfALjwZ-B8g&service=WMTS&request=GetTile&ver
 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,23 +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,16 +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_GATEWAY_URL = http://apigateway.iipbs-was.svc.cluster.local:8000
 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] h-full">
-      <Title title="유사사례 조회" />
-      <div className="overflow-x-auto h-[480px] 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 overflow-y-hidden">
-        <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,294 +0,0 @@
-"use client";
-
-/**
- *  수요정보등록 화면
- *
- * 🔗 사용 API
- * - 수요정보등록: POST /reuseFc/request/demandInfo
- */
-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/sdmMng/sdmLogout/page.tsx

@@ -1,22 +0,0 @@
-"use client";
-/**
- *  수요처 로그아웃 화면
- *
- * 🔗 사용 API
- *  
- */
-import { useDmStore } from "@/app/store";
-import { useRouter } from "next/navigation";
-import { useEffect } from "react";
-
-export default function SdmLogout() {
-  const router = useRouter();
-  const { actionLogout } = useDmStore((state) => state);
-
-  useEffect(() => {
-    actionLogout();
-    router.push("/pages/sdmMng/sdmInfoInsert");
-  }, [actionLogout, router]);
-
-  return null;
-}

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

apps/dm/app/(landing)/reuse/apply/modal/CandidateSiteModal.tsx

@@ -0,0 +1,327 @@
+"use client";
+
+import { useEffect, useMemo, useState } from "react";
+
+export type CandidateSite = {
+  id: string;
+  name: string;
+  sewageM3d: number; // 하수처리량
+  reuseM3d: number; // 재이용량
+  // 지도 연동 시 사용(현재는 UI/구조용)
+  lat?: number;
+  lng?: number;
+};
+
+type Props = {
+  open: boolean;
+  onClose: () => void;
+  onApply: (selected: CandidateSite[]) => void;
+  initialSelected?: CandidateSite[];
+  maxSelect?: number; // 기본 3개
+};
+
+const MOCK_SITES: CandidateSite[] = [
+  { id: "1", name: "서호생태 수자원 재이용1", sewageM3d: 1300, reuseM3d: 1300, lat: 35.0, lng: 128.0 },
+  { id: "2", name: "서호생태 수자원 재이용2", sewageM3d: 1300, reuseM3d: 1300, lat: 35.01, lng: 128.01 },
+  { id: "3", name: "서호생태 수자원 재이용3", sewageM3d: 1300, reuseM3d: 1300, lat: 35.02, lng: 128.02 },
+];
+
+export default function CandidateSiteModal({
+  open,
+  onClose,
+  onApply,
+  initialSelected = [],
+  maxSelect = 3,
+}: Props) {
+  const [q, setQ] = useState("");
+  const [selected, setSelected] = useState<CandidateSite[]>(initialSelected);
+
+    // 지도 마커 컴포넌트
+    function MapMarker({ label }: { label?: string }) {
+    return (
+        <div className="relative -translate-x-1/2 -translate-y-full">
+            <svg width="72" height="66" viewBox="0 0 72 92">
+                <defs>
+                <linearGradient id="pinGrad" x1="0" y1="0" x2="0" y2="1">
+                    <stop offset="0%" stopColor="#2EDAA0" />
+                    <stop offset="100%" stopColor="#02A7D8" />
+                </linearGradient>
+
+                <filter id="pinShadow" x="-50%" y="-50%" width="200%" height="200%">
+                    <feDropShadow dx="0" dy="2" stdDeviation="2" floodColor="#000" floodOpacity="0.18" />
+                </filter>
+                </defs>
+
+                {/* pin body */}
+                <path
+                    filter="url(#pinShadow)"
+                    d="M36 2C21 2 9 14 9 29c0 22 24 50 26.4 52.7a2 2 0 0 0 3.2 0C40.9 79 63 51 63 29 63 14 51 2 36 2z"
+                    fill="url(#pinGrad)"
+                />
+
+                {/* 내부 흰 원 */}
+                <circle cx="36" cy="29" r="20" fill="#FFFFFF" />
+
+                {label && (
+                <text
+                    x="36"
+                    y="36"
+                    textAnchor="middle"
+                    fontSize="18"
+                    fontWeight="700"
+                    fill="#1F2937"
+                >
+                    {label}
+                </text>
+                )}
+            </svg>
+        </div>
+    );
+  }
+
+  // 모달 열릴 때마다 초기 선택값 동기화
+  useEffect(() => {
+    if (open) setSelected(initialSelected);
+    if (open) setQ("");
+  }, [open, initialSelected]);
+
+  // ESC 닫기
+  useEffect(() => {
+    if (!open) return;
+    const onKeyDown = (e: KeyboardEvent) => {
+      if (e.key === "Escape") onClose();
+    };
+    window.addEventListener("keydown", onKeyDown);
+    return () => window.removeEventListener("keydown", onKeyDown);
+  }, [open, onClose]);
+
+  const filtered = useMemo(() => {
+    const keyword = q.trim();
+    if (!keyword) return MOCK_SITES;
+    return MOCK_SITES.filter((s) => s.name.includes(keyword));
+  }, [q]);
+
+  const isSelected = (id: string) => selected.some((s) => s.id === id);
+
+  const toggleSelect = (item: CandidateSite) => {
+    setSelected((prev) => {
+      const exists = prev.some((p) => p.id === item.id);
+      if (exists) return prev.filter((p) => p.id !== item.id);
+
+      if (prev.length >= maxSelect) return prev; // 최대 개수 초과 방지
+      return [...prev, item];
+    });
+  };
+
+  const removeChip = (id: string) => setSelected((prev) => prev.filter((p) => p.id !== id));
+
+  if (!open) return null;
+
+  return (
+    <div
+      className="fixed inset-0 z-[1000] flex items-center justify-center"
+      role="dialog"
+      aria-modal="true"
+      aria-label="후보지 조회"
+    >
+      {/* overlay */}
+      <button
+        type="button"
+        className="absolute inset-0 bg-black/30"
+        aria-label="모달 닫기"
+        onClick={onClose}
+      />
+
+      {/* panel */}
+      <div className="relative w-[94vw] max-w-[1700px] rounded-xl bg-white shadow-xl">
+        {/* header */}
+        <div className="flex items-center justify-between px-8 py-6">
+          <h2 className="text-2xl font-extrabold text-neutral-900">후보지 조회</h2>
+          <button
+            type="button"
+            aria-label="닫기"
+            onClick={onClose}
+            className="grid h-10 w-10 place-items-center rounded-sm hover:bg-neutral-100"
+          >
+            ✕
+          </button>
+        </div>
+        <div className="h-px w-full bg-neutral-200" />
+
+        {/* body */}
+        <div className="px-8 py-6">
+          <div className="grid grid-cols-12 gap-6">
+            {/* left: search + table */}
+            <div className="col-span-12 lg:col-span-5">
+              <div className="mb-3 text-lg font-semibold text-neutral-900">후보지 검색</div>
+
+              <div className="relative">
+                <input
+                  value={q}
+                  onChange={(e) => setQ(e.target.value)}
+                  placeholder="주소검색"
+                  className="h-12 w-full rounded-sm border border-neutral-300 bg-white px-4 pr-12 text-sm outline-none focus:border-sky-500"
+                />
+                <button
+                  type="button"
+                  aria-label="검색"
+                  onClick={() => setQ((v) => v.trim())}
+                  className="absolute right-2 top-1/2 -translate-y-1/2 grid h-9 w-9 place-items-center rounded-full text-[#01ACE5] hover:bg-slate-100"
+                >
+                  <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>
+              </div>
+
+              {/* table header */}
+              <div className="mt-4 overflow-hidden rounded-sm border border-neutral-200">
+                <div className="grid grid-cols-12 bg-emerald-50/70 px-4 py-3 text-sm font-semibold text-neutral-800">
+                  <div className="col-span-6 flex items-center justify-center">시설명</div>
+                  <div className="col-span-2 text-center">
+                    하수처리량<br />(m³/일)
+                  </div>
+                  <div className="col-span-2 text-center">
+                    재이용량<br />(m³/일)
+                  </div>
+                  <div className="col-span-2 text-center">선택</div>
+                </div>
+
+                {/* rows */}
+                <div className="max-h-[420px] overflow-auto">
+                  {filtered.length === 0 ? (
+                    <div className="px-4 py-10 text-center text-sm text-neutral-500">
+                      검색 결과가 없습니다.
+                    </div>
+                  ) : (
+                    filtered.map((s, idx) => {
+                      const picked = isSelected(s.id);
+                      const disabled = !picked && selected.length >= maxSelect;
+                      return (
+                        <div
+                          key={s.id}
+                          className="grid grid-cols-12 items-center gap-2 border-t border-neutral-200 px-4 py-3 text-sm"
+                        >
+                          <div className="col-span-6 truncate">
+                            <span className="mr-2 text-neutral-500">{idx + 1}</span>
+                            {s.name}
+                          </div>
+                          <div className="col-span-2 text-center">{s.sewageM3d.toLocaleString()}</div>
+                          <div className="col-span-2 text-center">{s.reuseM3d.toLocaleString()}</div>
+                          <div className="col-span-2 flex justify-center">
+                            <button
+                              type="button"
+                              disabled={disabled}
+                              onClick={() => toggleSelect(s)}
+                              className={[
+                                "h-8 rounded-sm px-3 text-xs",
+                                picked ? "bg-gray-600 text-white" : "bg-sky-500 text-white hover:bg-sky-600",
+                                disabled ? "cursor-not-allowed opacity-40" : "",
+                              ].join(" ")}
+                            >
+                              {picked ? "해제" : "선택"}
+                            </button>
+                          </div>
+                        </div>
+                      );
+                    })
+                  )}
+                </div>
+              </div>
+
+              {/* <div className="mt-2 text-xs text-neutral-500">
+                최대 {maxSelect}개까지 선택 가능합니다.
+              </div> */}
+            </div>
+
+            {/* right: map */}
+            <div className="col-span-12 lg:col-span-7">
+              <div className="h-[520px] w-full overflow-hidden rounded-sm border border-neutral-200 bg-neutral-50 relative">
+                {/* TODO: 실제 지도 SDK 연동 시 이 영역 교체 */}
+                <div className="absolute inset-0 grid place-items-center text-sm text-neutral-500">
+                  지도 영역(추후 지도 SDK 연동)
+                </div>
+
+                {/* 선택된 항목의 "가짜 마커" */}
+                {selected.map((s, i) => {
+                    const POS = [
+                        { top: "40%", left: "45%" },
+                        { top: "25%", left: "75%" },
+                        { top: "70%", left: "80%" },
+                  ] as const;
+
+                  const pos = POS[i % POS.length] ?? POS[0];
+
+                  return (
+                        <div
+                        key={s.id}
+                        className="absolute"
+                        style={{ top: pos.top, left: pos.left }}
+                        >
+                        <MapMarker label={String(i + 1)} />
+                        </div>
+                    );
+                })}
+              </div>
+            </div>
+          </div>
+
+          {/* selected chips */}
+          <div className="mt-6">
+            <div className="mb-2 text-lg font-semibold text-neutral-900">
+              선택된 시설 <span className="text-sm font-normal text-neutral-500">(시설명/하수처리량(m³/일)/재이용량(m³/일))</span>
+            </div>
+
+            <div className="min-h-[52px] rounded-sm border border-neutral-200 bg-white px-4 py-3">
+              {selected.length === 0 ? (
+                <div className="text-sm text-neutral-500">선택된 시설이 없습니다.</div>
+              ) : (
+                <div className="flex flex-wrap gap-3">
+                  {selected.map((s) => (
+                    <div
+                      key={s.id}
+                      className="inline-flex items-center gap-3 rounded-sm bg-[#EAF5F5] px-4 py-3 text-sm text-[#01ACE5]"
+                    >
+                      <span className="font-medium">
+                        {s.name} / {s.sewageM3d.toLocaleString()}(m³/일) / {s.reuseM3d.toLocaleString()}(m³/일)
+                      </span>
+                      <button
+                        type="button"
+                        aria-label="삭제"
+                        onClick={() => removeChip(s.id)}
+                        className="grid h-7 w-7 place-items-center rounded-sm hover:bg-sky-100 text-neutral-700 font-semibold"
+                      >
+                        ✕
+                      </button>
+                    </div>
+                  ))}
+                </div>
+              )}
+            </div>
+          </div>
+
+          {/* footer button */}
+          <div className="mt-6 flex justify-center pb-2">
+            <button
+              type="button"
+              onClick={() => onApply(selected)}
+              className="h-11 rounded-sm bg-[#0B4EA2] px-10 text-base text-white hover:opacity-90"
+            >
+              후보지 확인 및 적용
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

apps/dm/app/(landing)/reuse/apply/modal/SimilarCaseModal.tsx

@@ -0,0 +1,544 @@
+// apps/dm/app/(landing)/reuse/apply/modal/SimilarCaseModal.tsx (유사사례 모달)
+"use client";
+
+import { useEffect, useMemo, useState, useId } from "react";
+import { createPortal } from "react-dom";
+
+type Criterion = "" | "supplyAmt" | "treatment" | "usePurpose";
+
+export type SimilarCaseRow = {
+  caseId: string;
+  projectName: string;
+  period: string;
+
+  supplyFacilityType?: string;
+  supplyName?: string;
+  supplyCapacity?: number;
+
+  demandName?: string;
+  demandAddress?: string;
+
+  facilityCapacity?: number;
+  pipeKm?: number;
+  purpose?: string;
+
+  // 유사기준용
+  supplyAmt?: number; // 공급량(m3/일)
+  treatment?: string; // 처리공법
+  usePurpose?: string; // 이용용도
+};
+
+export type SimilarCaseDetail = {
+  // 보증수질
+  coliform?: string;
+  residualCl?: string;
+  turbidity?: string;
+  bod?: string;
+  odor?: string;
+  color?: string;
+  tn?: string;
+  tp?: string;
+  ph?: string;
+  chloride?: string;
+  ec?: string;
+  note?: string;
+
+  // 소요사업비(백만원) - 현재 타입에 있는 항목만 매핑
+  costTotal?: number;
+  costFacility?: number;
+  costPipe?: number;
+  costDesign?: number;
+  costSupervision?: number;
+  costOther?: number;
+
+  // 재원조달계획(백만원)
+  fundingTotal?: number;
+  fundingNational?: number;
+  fundingLocal?: number;
+  fundingSelf?: number;
+  fundingRate?: number; // %
+};
+
+function formatNumber(v: any) {
+  if (v === null || v === undefined || v === "" || Number.isNaN(Number(v))) return "-";
+  const n = typeof v === "number" ? v : Number(String(v).replaceAll(",", ""));
+  if (!Number.isFinite(n)) return "-";
+  return n.toLocaleString("ko-KR");
+}
+
+export default function SimilarCaseModal({
+  open,
+  onClose,
+  rows,
+  detailsByCaseId,
+  onSearch
+}: {
+  open: boolean;
+  onClose: () => void;
+  rows: SimilarCaseRow[];
+  detailsByCaseId: Record<string, SimilarCaseDetail | undefined>;
+  onSearch :(criterion: Criterion) => void;
+}) {
+  const titleId = useId();
+
+  const [mounted, setMounted] = useState(false);
+  const [criterion, setCriterion] = useState<Criterion>("supplyAmt");
+  const [selectedCaseId, setSelectedCaseId] = useState<string>("");
+
+  useEffect(() => setMounted(true), []);
+
+  // 모달 열릴 때 초기화
+  useEffect(() => {
+    if (!open) return;
+    setCriterion("supplyAmt");
+    onSearch("supplyAmt");
+    setSelectedCaseId("");
+  }, [open]);
+
+  // ESC 닫기 + 배경 스크롤 잠금
+  useEffect(() => {
+    if (!open) return;
+
+    const onKeyDown = (e: KeyboardEvent) => {
+      if (e.key === "Escape") onClose();
+    };
+    window.addEventListener("keydown", onKeyDown);
+
+    const prevOverflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+
+    return () => {
+      window.removeEventListener("keydown", onKeyDown);
+      document.body.style.overflow = prevOverflow;
+    };
+  }, [open, onClose]);
+
+  const groupInfo = useMemo(() => {
+    const counts = new Map<string, number>();
+    rows.forEach((r) => counts.set(r.caseId, (counts.get(r.caseId) ?? 0) + 1));
+
+    const firstIndex = new Map<string, number>();
+    rows.forEach((r, idx) => {
+      if (!firstIndex.has(r.caseId)) firstIndex.set(r.caseId, idx);
+    });
+
+    return { counts, firstIndex };
+  }, [rows]);
+
+  const selectedDetail = selectedCaseId ? detailsByCaseId[selectedCaseId] : undefined;
+
+  // open 타입 방어
+  if (typeof open !== "boolean") {
+    console.error("SimilarCaseModal: open prop is not boolean:", open);
+    return null;
+  }
+
+
+  if (!open || !mounted) return null;
+
+  const tdBase =
+    "border border-[#C9C9C9] px-2 py-2 text-sm text-neutral-800 align-middle";
+  const thBase =
+    "border border-[#C9C9C9] bg-[#E7F4E2] px-2 py-2 text-sm font-semibold text-neutral-800 text-center align-middle";
+
+  const highlightTd = "bg-neutral-200";
+
+  const showList = criterion !== "";
+  const hasRows = rows.length > 0;
+
+  const ui = (
+    <div className="fixed inset-0 z-[1000] flex items-center justify-center">
+      {/* overlay */}
+      <button
+        type="button"
+        className="absolute inset-0 bg-black/30"
+        aria-label="모달 닫기"
+        onClick={onClose}
+      />
+
+      {/* panel */}
+      <div
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby={titleId}
+        className="relative w-[94vw] max-w-[1700px] rounded-xl bg-white shadow-xl"
+      >
+        {/* header */}
+        <div className="flex items-center justify-between px-8 py-6">
+          <h2 id={titleId} className="text-2xl font-extrabold text-neutral-900">
+            유사사례 조회
+          </h2>
+          <button
+            type="button"
+            aria-label="닫기"
+            onClick={onClose}
+            className="grid h-10 w-10 place-items-center rounded-sm hover:bg-neutral-100 focus:outline-none focus:ring-2 focus:ring-neutral-300"
+          >
+            ✕
+          </button>
+        </div>
+        <div className="h-px w-full bg-neutral-200" />
+
+        {/* body */}
+        <div className="px-8 py-6">
+          {/* 상단 타이틀 + 유사기준 */}
+          <div className="mb-4 flex items-center justify-between">
+            <div className="text-lg font-semibold text-neutral-900">
+              물 재이용 사업 유사 사례
+            </div>
+
+            <div className="flex items-center gap-3">
+              <span className="text-sm font-semibold text-neutral-800">유사기준</span>
+              <select
+                value={criterion}
+                onChange={(e) => {
+                  const v = e.target.value as Criterion;
+                  setCriterion(v);
+                  setSelectedCaseId("");
+
+                  if(v){
+                    onSearch(v);
+                  }
+                }}
+                className="h-10 w-[180px] rounded-md border border-neutral-300 bg-white px-3 text-sm outline-none focus:border-neutral-500"
+              >
+                <option value="supplyAmt">공급량</option>
+                <option value="usePurpose">이용용도</option>
+              </select>
+            </div>
+          </div>
+
+          {/* 리스트 영역 */}
+          <div className="border border-[#C9C9C9] bg-white">
+            {!showList ? (
+              <div className="grid min-h-[260px] place-items-center bg-emerald-50/30">
+                <div className="text-neutral-500">유사기준을 선택해주세요.</div>
+              </div>
+            ) : !hasRows ? (
+              <div className="grid min-h-[260px] place-items-center bg-emerald-50/30">
+                <div className="text-neutral-500">조회 결과가 없습니다.</div>
+              </div>
+            ) : (
+              // 여기만 스크롤: rows가 4개/더 많아져서 높이를 넘으면 자동 스크롤 생성
+              <div className="max-h-[300px] overflow-y-auto overflow-x-auto">
+                <table className="w-full border-collapse">
+                  {/* thead sticky: bg + shadow + z-index로 겹침/투명 방지 */}
+                  <thead className="sticky top-0 z-20 bg-[#EAF5F5] shadow-sm">
+                    <tr>
+                      <th rowSpan={2} className={`${thBase} bg-[#EAF5F5]`}>
+                        선택
+                      </th>
+                      <th rowSpan={2} className={`${thBase} bg-[#EAF5F5]`}>
+                        사업명
+                      </th>
+                      <th rowSpan={2} className={`${thBase} bg-[#EAF5F5]`}>
+                        사업기간
+                      </th>
+
+                      <th colSpan={3} className={`${thBase} bg-[#EAF5F5]`}>
+                        공급처
+                      </th>
+                      <th colSpan={2} className={`${thBase} bg-[#EAF5F5]`}>
+                        수요처
+                      </th>
+                      <th colSpan={6} className={`${thBase} bg-[#EAF5F5]`}>
+                        재이용시설
+                      </th>
+                    </tr>
+                    <tr>
+                      <th className={`${thBase} bg-[#EAF5F5]`}>시설<br/>종류</th>
+                      <th className={`${thBase} bg-[#EAF5F5]`}>공급처명</th>
+                      <th className={`${thBase} bg-[#EAF5F5]`}>
+                        시설용량
+                        <br />
+                        (m³/일)
+                      </th>
+
+                      <th className={`${thBase} bg-[#EAF5F5]`}>수요처명</th>
+                      <th className={`${thBase} bg-[#EAF5F5]`}>주소</th>
+
+                      <th className={`${thBase} bg-[#EAF5F5]`}>
+                        시설용량
+                        <br />
+                        (m³/일)
+                      </th>
+                      <th className={`${thBase} bg-[#EAF5F5]`}>
+                        관로
+                        <br />
+                        (km)
+                      </th>
+                      <th className={`${thBase} bg-[#EAF5F5]`}>용도</th>
+
+                      <th className={`${thBase} bg-[#EAF5F5]`}>
+                        공급량
+                        <br />
+                        (m³/일)
+                      </th>
+                      <th className={`${thBase} bg-[#EAF5F5]`}>처리공법</th>
+                      <th className={`${thBase} bg-[#EAF5F5]`}>이용용도</th>
+                    </tr>
+                  </thead>
+
+                  <tbody>
+                    {rows.map((r, idx) => {
+                      const isFirst = groupInfo.firstIndex.get(r.caseId) === idx;
+                      const rowSpan = groupInfo.counts.get(r.caseId) ?? 1;
+                      const selected = selectedCaseId === r.caseId;
+
+                      const supplyAmtCls = criterion === "supplyAmt" ? highlightTd : "";
+                      const treatmentCls = criterion === "treatment" ? highlightTd : "";
+                      const usePurposeCls = criterion === "usePurpose" ? highlightTd : "";
+
+                      return (
+                        <tr
+                          key={`${r.caseId}-${idx}`}
+                          className={[
+                            "cursor-pointer hover:bg-neutral-50",
+                            selected ? "bg-sky-50" : "",
+                          ].join(" ")}
+                          onClick={() => setSelectedCaseId(r.caseId)}
+                        >
+                          {isFirst ? (
+                            <>
+                              <td className={`${tdBase} text-center`} rowSpan={rowSpan}>
+                                <input
+                                  type="checkbox"
+                                  checked={selected}
+                                  readOnly
+                                  className="h-4 w-4"
+                                />
+                              </td>
+                              <td className={`${tdBase} text-center`} rowSpan={rowSpan}>
+                                {r.projectName ?? "-"}
+                              </td>
+                              <td className={`${tdBase} text-center`} rowSpan={rowSpan}>
+                                {r.period ?? "-"}
+                              </td>
+                            </>
+                          ) : null}
+
+                          <td className={`${tdBase} text-center`}>{r.supplyFacilityType ?? "-"}</td>
+                          <td className={`${tdBase} text-center`}>{r.supplyName ?? "-"}</td>
+                          <td className={`${tdBase} text-center`}>{formatNumber(r.supplyCapacity)}</td>
+
+                          <td className={`${tdBase} text-center`}>{r.demandName ?? "-"}</td>
+                          <td className={`${tdBase} text-center`}>{r.demandAddress ?? "-"}</td>
+
+                          <td className={`${tdBase} text-center`}>{formatNumber(r.facilityCapacity)}</td>
+                          <td className={`${tdBase} text-center`}>{formatNumber(r.pipeKm)}</td>
+                          <td className={tdBase}>{r.purpose ?? "-"}</td>
+
+                          <td className={`${tdBase} text-center ${supplyAmtCls}`}>
+                            {formatNumber(r.supplyAmt)}
+                          </td>
+                          <td className={`${tdBase} text-center ${treatmentCls}`}>
+                            {r.treatment ?? "-"}
+                          </td>
+                          <td className={`${tdBase} text-center ${usePurposeCls}`}>
+                            {r.usePurpose ?? "-"}
+                          </td>
+                        </tr>
+                      );
+                    })}
+                  </tbody>
+                </table>
+              </div>
+            )}
+          </div>
+
+          <hr className="my-6 border-y-[1px] border-[#C9C9C9]" />
+
+          {/* 상세정보 */}
+          <div className="mt-0">
+            <div className="mb-2 text-lg font-semibold text-neutral-900">상세정보</div>
+
+            {/* 1) 보증수질 */}
+            <div className="overflow-hidden border border-[#C9C9C9]">
+              <table className="w-full border-collapse">
+                <thead>
+                  <tr>
+                    <th colSpan={13} className={thBase}>
+                      보증수질
+                    </th>
+                  </tr>
+                  <tr>
+                    <th rowSpan={2} className={thBase}>
+                      총대장균군수<br />(개/100ml)
+                    </th>
+                    <th rowSpan={2} className={thBase}>
+                      용도별 결합 잔류염소<br />(mg/L)
+                    </th>
+                    <th rowSpan={2} className={thBase}>
+                      탁도<br />(NTU)
+                    </th>
+                  </tr>
+                  <tr>
+                    <th className={thBase}>
+                      생물학적<br />산소요구량(BOD)(mg/L)
+                    </th>
+                    <th className={thBase}>냄새</th>
+                    <th className={thBase}>색도(도)</th>
+                    <th className={thBase}>총질소<br />(T-N)(mg/L)</th>
+                    <th className={thBase}>총인<br />(T-P)(mg/L)</th>
+                    <th className={thBase}>수소이온<br />농도(pH)</th>
+                    <th className={thBase}>염화물<br />(mgCL/L)</th>
+                    <th className={thBase}>전기전도도<br />(μs/cm)</th>
+                    <th className={thBase}>비고</th>
+                  </tr>
+                </thead>
+
+                <tbody>
+                  <tr>
+                    <td className={`${tdBase} text-center`}>{selectedDetail?.coliform ?? "-"}</td>
+                    <td className={`${tdBase} text-center`}>{selectedDetail?.residualCl ?? "-"}</td>
+                    <td className={`${tdBase} text-center`}>{selectedDetail?.turbidity ?? "-"}</td>
+
+                    <td className={`${tdBase} text-center`}>{selectedDetail?.bod ?? "-"}</td>
+                    <td className={`${tdBase} text-center`}>{selectedDetail?.odor ?? "-"}</td>
+                    <td className={`${tdBase} text-center`}>{selectedDetail?.color ?? "-"}</td>
+                    <td className={`${tdBase} text-center`}>{selectedDetail?.tn ?? "-"}</td>
+                    <td className={`${tdBase} text-center`}>{selectedDetail?.tp ?? "-"}</td>
+                    <td className={`${tdBase} text-center`}>{selectedDetail?.ph ?? "-"}</td>
+                    <td className={`${tdBase} text-center`}>{selectedDetail?.chloride ?? "-"}</td>
+                    <td className={`${tdBase} text-center`}>{selectedDetail?.ec ?? "-"}</td>
+
+                    <td className={`${tdBase} text-center`}>{selectedDetail?.note ?? "-"}</td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+
+            {/* 2) 사업비 */}
+            <div className="mt-4 overflow-hidden border border-[#C9C9C9]">
+              <table className="w-full border-collapse">
+                <thead>
+                  <tr>
+                    <th colSpan={14} className={thBase}>
+                      소요사업비(백만원)
+                    </th>
+                    <th colSpan={5} className={thBase}>
+                      재원조달계획(백만원)
+                    </th>
+                    <th colSpan={5} className={thBase}>
+                      사업비 정산(백만원)
+                    </th>
+                  </tr>
+
+                  <tr>
+                    {/* 소요사업비 */}
+                    <th rowSpan={2} className={thBase}>총</th>
+                    <th colSpan={2} className={thBase}>토목</th>
+                    <th rowSpan={2} className={thBase}>건축</th>
+                    <th rowSpan={2} className={thBase}>기계</th>
+                    <th rowSpan={2} className={thBase}>전기<br />·계측</th>
+                    <th rowSpan={2} className={thBase}>GIS<br />DB</th>
+                    <th rowSpan={2} className={thBase}>CCTV</th>
+                    <th rowSpan={2} className={thBase}>시공 및 준공</th>
+                    <th rowSpan={2} className={thBase}>폐기물</th>
+                    <th rowSpan={2} className={thBase}>설계비</th>
+                    <th rowSpan={2} className={thBase}>감리비</th>
+                    <th rowSpan={2} className={thBase}>시설부대</th>
+                    <th rowSpan={2} className={thBase}>기타</th>
+
+                    {/* 재원조달 */}
+                    <th rowSpan={2} className={thBase}>총</th>
+                    <th rowSpan={2} className={thBase}>국비</th>
+                    <th rowSpan={2} className={thBase}>지방비</th>
+                    <th rowSpan={2} className={thBase}>원인자부담</th>
+                    <th rowSpan={2} className={thBase}>국고비율</th>
+
+                    {/* 정산 */}
+                    <th rowSpan={2} className={thBase}>총</th>
+                    <th rowSpan={2} className={thBase}>국비</th>
+                    <th rowSpan={2} className={thBase}>지방비</th>
+                    <th rowSpan={2} className={thBase}>원인자부담</th>
+                    <th rowSpan={2} className={thBase}>국고비율</th>
+                  </tr>
+
+                  <tr>
+                    <th className={thBase}>재이용<br />시설</th>
+                    <th className={thBase}>관로</th>
+                  </tr>
+                </thead>
+
+                <tbody>
+                  <tr>
+                    {/* 소요사업비 */}
+                    <td className={`${tdBase} text-right`}>
+                      {selectedDetail?.costTotal != null ? formatNumber(selectedDetail.costTotal) : "-"}
+                    </td>
+                    <td className={`${tdBase} text-right`}>
+                      {selectedDetail?.costFacility != null ? formatNumber(selectedDetail.costFacility) : "-"}
+                    </td>
+                    <td className={`${tdBase} text-right`}>
+                      {selectedDetail?.costPipe != null ? formatNumber(selectedDetail.costPipe) : "-"}
+                    </td>
+                    <td className={`${tdBase} text-center`}>-</td>
+                    <td className={`${tdBase} text-center`}>-</td>
+                    <td className={`${tdBase} text-center`}>-</td>
+                    <td className={`${tdBase} text-center`}>-</td>
+                    <td className={`${tdBase} text-center`}>-</td>
+                    <td className={`${tdBase} text-center`}>-</td>
+                    <td className={`${tdBase} text-center`}>-</td>
+                    <td className={`${tdBase} text-right`}>
+                      {selectedDetail?.costDesign != null ? formatNumber(selectedDetail.costDesign) : "-"}
+                    </td>
+                    <td className={`${tdBase} text-right`}>
+                      {selectedDetail?.costSupervision != null ? formatNumber(selectedDetail.costSupervision) : "-"}
+                    </td>
+                    <td className={`${tdBase} text-center`}>-</td>
+                    <td className={`${tdBase} text-right`}>
+                      {selectedDetail?.costOther != null ? formatNumber(selectedDetail.costOther) : "-"}
+                    </td>
+
+                    {/* 재원조달 */}
+                    <td className={`${tdBase} text-right`}>
+                      {selectedDetail?.fundingTotal != null ? formatNumber(selectedDetail.fundingTotal) : "-"}
+                    </td>
+                    <td className={`${tdBase} text-right`}>
+                      {selectedDetail?.fundingNational != null ? formatNumber(selectedDetail.fundingNational) : "-"}
+                    </td>
+                    <td className={`${tdBase} text-right`}>
+                      {selectedDetail?.fundingLocal != null ? formatNumber(selectedDetail.fundingLocal) : "-"}
+                    </td>
+                    <td className={`${tdBase} text-right`}>
+                      {selectedDetail?.fundingSelf != null ? formatNumber(selectedDetail.fundingSelf) : "-"}
+                    </td>
+                    <td className={`${tdBase} text-center`}>
+                      {typeof selectedDetail?.fundingRate === "number" ? `${selectedDetail.fundingRate}%` : "-"}
+                    </td>
+
+                    {/* 정산(필드 없으면 동일 값 표시) */}
+                    <td className={`${tdBase} text-right`}>
+                      {selectedDetail?.fundingTotal != null ? formatNumber(selectedDetail.fundingTotal) : "-"}
+                    </td>
+                    <td className={`${tdBase} text-right`}>
+                      {selectedDetail?.fundingNational != null ? formatNumber(selectedDetail.fundingNational) : "-"}
+                    </td>
+                    <td className={`${tdBase} text-right`}>
+                      {selectedDetail?.fundingLocal != null ? formatNumber(selectedDetail.fundingLocal) : "-"}
+                    </td>
+                    <td className={`${tdBase} text-right`}>
+                      {selectedDetail?.fundingSelf != null ? formatNumber(selectedDetail.fundingSelf) : "-"}
+                    </td>
+                    <td className={`${tdBase} text-center`}>
+                      {typeof selectedDetail?.fundingRate === "number" ? `${selectedDetail.fundingRate}%` : "-"}
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+
+            {!selectedCaseId && showList ? (
+              <div className="mt-3 text-sm text-neutral-500">
+                리스트에서 사업을 선택하면 상세정보가 표시됩니다.
+              </div>
+            ) : null}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+
+  return createPortal(ui, document.body);
+}

apps/dm/app/(landing)/reuse/apply/modal/WaterQualityRefModal.tsx

@@ -0,0 +1,99 @@
+// apps/dm/app/(landing)/reuse/apply/modal/WaterQualityRefModal.tsx (수질기준참고 모달)
+"use client";
+
+import { useEffect, useId } from "react";
+import Image from "next/image";
+
+type Props = {
+  open: boolean;
+  onClose: () => void;
+  imageSrc: string;
+  title?: string;
+};
+
+export default function WaterQualityRefModal({
+  open,
+  onClose,
+  imageSrc,
+  title = "수질 기준 참고",
+}: Props) {
+  const titleId = useId();
+
+  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";
+
+    return () => {
+      window.removeEventListener("keydown", onKeyDown);
+      document.body.style.overflow = prev;
+    };
+  }, [open, onClose]);
+
+  if (!open) return null;
+
+  return (
+    <div className="fixed inset-0 z-[120]">
+      {/* 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 p-4">
+        <div
+          role="dialog"
+          aria-modal="true"
+          aria-labelledby={titleId}
+          className="w-full max-w-[1100px] rounded-[18px] bg-white shadow-2xl overflow-hidden"
+        >
+          {/* Header */}
+          <div className="relative px-10 pt-9 pb-6">
+            <button
+              type="button"
+              onClick={onClose}
+              aria-label="닫기"
+              className="absolute right-7 top-7 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="text-left text-[28px] font-bold tracking-tight text-gray-900"
+            >
+              {title}
+            </h2>
+
+            <div className="mt-5 h-px w-full bg-gray-200" />
+          </div>
+
+          {/* Body (스크롤 영역) */}
+          <div className="px-10 pb-10">
+            <div className="max-h-[70vh] overflow-auto bg-white">
+              {/* 이미지가 길어도 여기서 스크롤 */}
+              <Image
+                src={imageSrc}
+                alt="수질 기준 참고"
+                width={851}
+                height={2334}
+                className="block mx-auto max-w-full h-auto"
+                priority
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

apps/dm/app/(landing)/reuse/apply/place/page.tsx

@@ -0,0 +1,355 @@
+// apps/dm/app/(landing)/reuse/apply/place/page.tsx
+"use client";
+
+import React from "react";
+import { useMemo, useState } from "react";
+import SubPageHeader from "../../_components/SubPageHeader";
+import PostcodeModal from "../../_components/PostcodeModal";
+import type { AddrItem } from "../../_components/PostcodeModal";
+
+type Option = { value: string; label: string };
+type SidoValue = "" | "seoul" | "busan" | "daegu" | "incheon" | "gyeonggi";
+
+const SIDO: { value: SidoValue; label: string }[] = [
+  { value: "", label: "선택" },
+  { value: "seoul", label: "서울특별시" },
+  { value: "busan", label: "부산광역시" },
+  { value: "daegu", label: "대구광역시" },
+  { value: "incheon", label: "인천광역시" },
+  { value: "gyeonggi", label: "경기도" },
+];
+
+const SIGUNGU_MAP: Record<SidoValue, Option[]> = {
+  "": [{ value: "", label: "선택" }],
+  seoul: [
+    { value: "", label: "선택" },
+    { value: "gangnam", label: "강남구" },
+    { value: "yeongdeungpo", label: "영등포구" },
+    { value: "mapo", label: "마포구" },
+  ],
+  busan: [
+    { value: "", label: "선택" },
+    { value: "haeundae", label: "해운대구" },
+    { value: "suyeong", label: "수영구" },
+  ],
+  daegu: [
+    { value: "", label: "선택" },
+    { value: "suseong", label: "수성구" },
+    { value: "dalseo", label: "달서구" },
+  ],
+  incheon: [
+    { value: "", label: "선택" },
+    { value: "namdong", label: "남동구" },
+    { value: "yeonsu", label: "연수구" },
+  ],
+  gyeonggi: [
+    { value: "", label: "선택" },
+    { value: "bundang", label: "성남시 분당구" },
+    { value: "suji", label: "용인시 수지구" },
+    { value: "ilsandong", label: "고양시 일산동구" },
+  ],
+};
+
+/* ---------------------------
+ * register/page.tsx 스타일과 맞춘 공통 UI (FormRow/Divider)
+ * -------------------------- */
+
+function Divider() {
+  return <div className="h-px w-full bg-neutral-200" />;
+}
+
+function FormRow({
+  label,
+  required,
+  children,
+}: {
+  label: React.ReactNode;
+  required?: boolean;
+  children: React.ReactNode;
+}) {
+  return (
+    <div className="grid grid-cols-12">
+      {/* 라벨(좌측) */}
+      <div className="col-span-12 lg:col-span-2 flex items-center justify-center text-center bg-emerald-50/70 px-6 py-6">
+        <div className="flex items-center gap-1 text-lg font-semibold text-neutral-800">
+          <span>{label}</span>
+          {required ? <span className="text-red-500">*</span> : null}
+        </div>
+      </div>
+
+      {/* 입력(우측) */}
+      <div className="col-span-12 lg:col-span-10 px-6 py-6">{children}</div>
+    </div>
+  );
+}
+
+function TextInput({
+  value,
+  onChange,
+  placeholder,
+  type = "text",
+  disabled,
+  className = "",
+}: {
+  value: string;
+  onChange: (v: string) => void;
+  placeholder?: string;
+  type?: string;
+  disabled?: boolean;
+  className?: string;
+}) {
+  return (
+    <input
+      type={type}
+      value={value}
+      disabled={disabled}
+      onChange={(e) => onChange(e.target.value)}
+      placeholder={placeholder}
+      className={[
+        "h-11 w-full rounded border border-neutral-300 bg-white px-3 text-sm text-neutral-800",
+        "placeholder:text-neutral-400 focus:border-neutral-400 focus:outline-none",
+        disabled ? "bg-neutral-100 text-neutral-400" : "",
+        className,
+      ].join(" ")}
+    />
+  );
+}
+
+function SelectBox<T extends string>({
+  value,
+  onChange,
+  options,
+  className = "",
+}: {
+  value: T;
+  onChange: (v: T) => void;
+  options: { value: T; label: string }[];
+  className?: string;
+}) {
+  return (
+    <select
+      value={value}
+      onChange={(e) => onChange(e.target.value as T)}
+      className={[
+        "h-11 w-[220px] rounded border border-neutral-300 bg-white px-3 text-sm text-neutral-800",
+        "focus:border-neutral-400 focus:outline-none",
+        className,
+      ].join(" ")}
+    >
+      {options.map((o) => (
+        <option key={o.value} value={o.value}>
+          {o.label}
+        </option>
+      ))}
+    </select>
+  );
+}
+
+export default function DemandPlaceRegisterPage() {
+  /** ✅ 모달 + 주소 상태 (반드시 컴포넌트 내부!) */
+  const [open, setOpen] = useState(false);
+
+  // 모달에서 선택한 값은 이 3개에 반영 (기존 UI zip/addr1/addr2와 맞춤)
+  const [zip, setZip] = useState("");
+  const [addr1, setAddr1] = useState(""); // 도로명 주소 넣을 곳
+  const [addr2, setAddr2] = useState(""); // 상세주소(사용자 입력)
+
+  // (필요하면 유지) 지번도 따로 보관하고 싶을 때
+  // const [jibun, setJibun] = useState("");
+
+  const handleSelect = (it: AddrItem) => {
+    setZip(it.zipNo);
+    setAddr1(it.roadAddr);   // ✅ 주소칸에 도로명 자동 입력
+    // setJibun(it.jibunAddr);  // ✅ 지번도 상태로 보관(원하면 UI에 표시)
+    setOpen(false);
+  };
+
+  /** 기존 폼 상태들 */
+  const [sido, setSido] = useState<SidoValue>("");
+  const [sigungu, setSigungu] = useState<string>("");
+
+  const [company, setCompany] = useState("");
+  const [bizNo, setBizNo] = useState("");
+  const [workerNo, setWorkerNo] = useState("");
+  const [noWorkerNo, setNoWorkerNo] = useState(false);
+
+  const [tel, setTel] = useState("");
+  const [pw, setPw] = useState("");
+  const [pw2, setPw2] = useState("");
+
+  // ✅ undefined 불가(Record<SidoValue,...> + sido가 SidoValue)
+  const sigunguOptions = useMemo<Option[]>(() => SIGUNGU_MAP[sido], [sido]);
+
+  const onSubmit = () => {
+    if (!sido || !sigungu) return alert("시도/시군구를 선택해 주세요.");
+    if (!company) return alert("회사명을 입력해 주세요.");
+    if (!bizNo) return alert("사업자등록번호를 입력해 주세요.");
+    if (!noWorkerNo && !workerNo)
+      return alert("종사자등록번호를 입력하거나 '해당없음'을 선택해 주세요.");
+    if (!addr1) return alert("사업자주소를 입력해 주세요.");
+    if (!tel) return alert("전화번호를 입력해 주세요.");
+    if (!pw) return alert("비밀번호를 입력해 주세요.");
+    if (pw !== pw2) return alert("비밀번호가 일치하지 않습니다.");
+
+    alert("수요처 등록(샘플) 완료!");
+  };
+
+  return (
+    <main className="bg-white">
+      <SubPageHeader
+        title="수요처등록"
+        crumbs={[
+          { label: "Home", href: "/reuse" },
+          { label: "수요신청", href: "/reuse/apply" },
+          { label: "수요처등록" },
+        ]}
+      />
+
+      {/* register/page.tsx와 동일한 테이블 룩앤필 */}
+      <div className="border border-neutral-200 bg-white">
+        <FormRow label="시도" required>
+          <SelectBox<SidoValue>
+            value={sido}
+            onChange={(v) => {
+              setSido(v);
+              setSigungu(""); // 시도 변경 시 초기화
+            }}
+            options={SIDO}
+          />
+        </FormRow>
+
+        <Divider />
+
+        <FormRow label="시군구" required>
+          <select
+            value={sigungu}
+            onChange={(e) => setSigungu(e.target.value)}
+            className="h-11 w-[220px] rounded border border-neutral-300 bg-white px-3 text-sm text-neutral-800 focus:border-neutral-400 focus:outline-none"
+          >
+            {sigunguOptions.map((o) => (
+              <option key={o.value} value={o.value}>
+                {o.label}
+              </option>
+            ))}
+          </select>
+        </FormRow>
+
+        <Divider />
+
+        <FormRow label="회사명" required>
+          <div className="max-w-[420px]">
+            <TextInput value={company} onChange={setCompany} placeholder="회사명을 입력해주세요." />
+          </div>
+        </FormRow>
+
+        <Divider />
+
+        <FormRow label="사업자등록번호" required>
+          <div className="max-w-[420px]">
+            <TextInput value={bizNo} onChange={setBizNo} placeholder="사업자 등록번호를 입력해주세요." />
+          </div>
+        </FormRow>
+
+        <Divider />
+
+        <FormRow label="종사자등록번호">
+          <div className="flex flex-wrap items-center gap-4">
+            <div className="w-[420px] max-w-full">
+              <TextInput
+                value={workerNo}
+                onChange={setWorkerNo}
+                placeholder="종사자등록번호를 입력해주세요."
+                disabled={noWorkerNo}
+              />
+            </div>
+
+            <label className="flex items-center gap-2 text-sm text-neutral-700">
+              <input
+                type="checkbox"
+                checked={noWorkerNo}
+                onChange={(e) => {
+                  setNoWorkerNo(e.target.checked);
+                  if (e.target.checked) setWorkerNo("");
+                }}
+                className="h-4 w-4 rounded border-neutral-300"
+              />
+              해당없음
+            </label>
+          </div>
+        </FormRow>
+
+        <Divider />
+
+        <FormRow label="사업자주소" required>
+          <div className="max-w-[420px] space-y-2">
+            <div className="flex gap-2">
+              <div className="w-[180px]">
+                <TextInput value={zip} onChange={setZip} placeholder="우편번호" />
+              </div>
+
+              <button
+                type="button"
+                onClick={() => setOpen(true)}
+                className="h-11 rounded-md bg-[#888] px-4 text-sm text-white hover:brightness-95"
+              >
+                우편번호 검색
+              </button>
+            </div>
+
+            {/* ✅ 선택된 도로명주소가 자동으로 들어감 */}
+            <TextInput value={addr1} onChange={setAddr1} placeholder="주소" />
+
+            {/* ✅ 상세주소는 사용자 입력 */}
+            <TextInput value={addr2} onChange={setAddr2} placeholder="상세 주소를 입력하세요." />
+
+            {/* (선택) 지번주소도 보여주고 싶으면 */}
+            {/* {jibun ? <p className="text-xs text-neutral-500">지번: {jibun}</p> : null} */}
+          </div>
+        </FormRow>
+
+        <Divider />
+
+        <FormRow label="전화번호" required>
+          <div className="max-w-[420px]">
+            <TextInput value={tel} onChange={setTel} placeholder="전화번호를 입력하세요." />
+          </div>
+        </FormRow>
+
+        <Divider />
+
+        <FormRow label="비밀번호" required>
+          <div className="max-w-[420px]">
+            <TextInput value={pw} onChange={setPw} placeholder="비밀번호를 입력하세요." type="password" />
+          </div>
+        </FormRow>
+
+        <Divider />
+
+        <FormRow label="비밀번호 확인" required>
+          <div className="max-w-[420px]">
+            <TextInput
+              value={pw2}
+              onChange={setPw2}
+              placeholder="비밀번호를 한번 더 입력하세요."
+              type="password"
+            />
+          </div>
+        </FormRow>
+      </div>
+
+      {/* register/page.tsx와 동일하게 하단 중앙 버튼 */}
+      <div className="flex justify-center py-12">
+        <button
+          type="button"
+          onClick={onSubmit}
+          className="h-11 rounded-md bg-[#0B4EA2] px-10 text-lg text-white hover:opacity-90"
+        >
+          수요처 등록
+        </button>
+      </div>
+
+      {/* ✅ 모달 */}
+      <PostcodeModal open={open} onClose={() => setOpen(false)} onSelect={handleSelect} />
+    </main>
+  );
+}

apps/dm/app/(landing)/reuse/apply/register/page.tsx

@@ -0,0 +1,821 @@
+// apps/dm/app/(landing)/reuse/apply/register/page.tsx (수요정보등록 페이지)
+"use client";
+
+import { useMemo, useState, useRef } from "react";
+import SubPageHeader from "../../_components/SubPageHeader";
+import WaterQualityRefModal from "../modal/WaterQualityRefModal";
+import CandidateSiteModal, { type CandidateSite } from "../modal/CandidateSiteModal";
+import SimilarCaseModal, { type SimilarCaseRow, type SimilarCaseDetail } from "../modal/SimilarCaseModal";
+
+type PHRange = { min: string; max: string };
+
+export default function DemandRegisterPage() {
+  const today = useMemo(() => {
+    const d = new Date();
+    const yyyy = d.getFullYear();
+    const mm = String(d.getMonth() + 1).padStart(2, "0");
+    const dd = String(d.getDate()).padStart(2, "0");
+    return `${yyyy}-${mm}-${dd}`;
+  }, []);
+
+  const [openRef, setOpenRef] = useState(false);
+
+  const [openCand, setOpenCand] = useState(false);
+  const [selectedCands, setSelectedCands] = useState<CandidateSite[]>([]);
+
+  // 유사사례 모달
+  const [openSimilar, setOpenSimilar] = useState(false);
+
+ // 유사사례 rows (목업) - API 연동 시 여기만 교체
+  // const rows: SimilarCaseRow[] = useMemo(
+  //   () => [
+  //     {
+  //       caseId: "C-001",
+  //       projectName: "OO시 물 재이용(빗물, 중수도) 시설 설치사업",
+  //       period: "2020.01. ~ 2025.05.",
+  //       supplyFacilityType: "중수도",
+  //       supplyName: "OO새교복지타운",
+  //       supplyCapacity: 0,
+  //       demandName: "OO새교복지타운",
+  //       demandAddress: "OO시 수청로 192",
+  //       facilityCapacity: 50,
+  //       pipeKm: 0,
+  //       purpose: "청소, 화장실, 조경",
+  //       supplyAmt: 50,
+  //       treatment: "MBLM",
+  //       usePurpose: "청소,화장실",
+  //     },
+  //     {
+  //       caseId: "C-001",
+  //       projectName: "OO시 물 재이용(빗물, 중수도) 시설 설치사업",
+  //       period: "2020.01. ~ 2025.05.",
+  //       supplyFacilityType: "중수도",
+  //       supplyName: "OO스포츠센터",
+  //       supplyCapacity: 0,
+  //       demandName: "OO스포츠센터",
+  //       demandAddress: "OO시 경기동로 33",
+  //       facilityCapacity: 50,
+  //       pipeKm: 0,
+  //       purpose: "청소, 화장실, 조경",
+  //       supplyAmt: 50,
+  //       treatment: "MBLM",
+  //       usePurpose: "청소,화장실",
+  //     },
+  //     {
+  //       caseId: "C-002",
+  //       projectName: "OO 엄성저수지 하수처리수 재이용사업",
+  //       period: "2019.12 ~ 2026.01",
+  //       supplyFacilityType: "하수",
+  //       supplyName: "OO 3,4단계 공공하수처리시설",
+  //       supplyCapacity: 70000,
+  //       demandName: "OO천",
+  //       demandAddress: "-",
+  //       facilityCapacity: 0,
+  //       pipeKm: 3,
+  //       purpose: "하천 등 유지용수",
+  //       supplyAmt: 2300,
+  //       treatment: "탈황,총인, 생물산화과,소독",
+  //       usePurpose: "하천 등 유지용수",
+  //     },
+  //     {
+  //       caseId: "C-002",
+  //       projectName: "OO 엄성저수지 하수처리수 재이용사업",
+  //       period: "2019.12 ~ 2026.01",
+  //       supplyFacilityType: "하수",
+  //       supplyName: "OO 3,4단계 공공하수처리시설",
+  //       supplyCapacity: 70000,
+  //       demandName: "OO저수지",
+  //       demandAddress: "-",
+  //       facilityCapacity: 0,
+  //       pipeKm: 5,
+  //       purpose: "하천 등 유지용수",
+  //       supplyAmt: 7700,
+  //       treatment: "탈황,총인, 생물산화과,소독",
+  //       usePurpose: "하천 등 유지용수",
+  //     },
+  //   ],
+  //   []
+  // );
+
+  // 유사사례 상세(목업) - caseId로 매핑
+  // const detailsByCaseId: Record<string, SimilarCaseDetail> = useMemo(
+  //   () => ({
+  //     "C-001": {
+  //       coliform: "불검출",
+  //       residualCl: "0.2이상",
+  //       turbidity: "1.5이하",
+  //       bod: "4.0이하",
+  //       odor: "불쾌하지않을것",
+  //       color: "10이하",
+  //       tn: "-",
+  //       tp: "-",
+  //       ph: "5.8~8.5",
+  //       chloride: "-",
+  //       ec: "-",
+  //       note: "-",
+
+  //       costTotal: 4305,
+  //       costFacility: 3518,
+  //       costPipe: undefined,
+  //       costDesign: 350,
+  //       costSupervision: 417,
+  //       costOther: 12,
+
+  //       fundingTotal: 4305,
+  //       fundingNational: 3104,
+  //       fundingLocal: 1291,
+  //       fundingSelf: undefined,
+  //       fundingRate: 70.0,
+  //     },
+  //     "C-002": {
+  //       coliform: "불검출",
+  //       residualCl: "0.15이상",
+  //       turbidity: "2.0이하",
+  //       bod: "5.0이하",
+  //       odor: "무",
+  //       color: "10이하",
+  //       tn: "-",
+  //       tp: "-",
+  //       ph: "6.0~8.5",
+  //       chloride: "-",
+  //       ec: "-",
+  //       note: "-",
+
+  //       costTotal: 9800,
+  //       costFacility: 2100,
+  //       costPipe: 1800,
+  //       costDesign: 300,
+  //       costSupervision: 280,
+  //       costOther: 1200,
+
+  //       fundingTotal: 9800,
+  //       fundingNational: 4900,
+  //       fundingLocal: 3000,
+  //       fundingSelf: 1900,
+  //       fundingRate: 50,
+  //     },
+  //   }),
+  //   []
+  // );
+
+  // 기본정보
+  const [reqDate, setReqDate] = useState<string>(today);
+  const [reqQty, setReqQty] = useState<string>("");
+  const [usePurpose, setUsePurpose] = useState<string>("");
+  const [hopePrice, setHopePrice] = useState<string>("");
+
+  // 요구수질
+  const [coliform, setColiform] = useState<string>("");
+  const [noDetect, setNoDetect] = useState<boolean>(false);
+
+  const [tn, setTn] = useState<string>("");
+  const [residualCl, setResidualCl] = useState<string>("");
+  const [tp, setTp] = useState<string>("");
+  const [turbidity, setTurbidity] = useState<string>("");
+  const [ph, setPh] = useState<PHRange>({ min: "", max: "" });
+  const [bod, setBod] = useState<string>("");
+  const [chloride, setChloride] = useState<string>("");
+  const [odor, setOdor] = useState<string>("불쾌하지 않을 것");
+  const [ec, setEc] = useState<string>("");
+  const [color, setColor] = useState<string>("");
+  const [remark, setRemark] = useState<string>("");
+
+  // 공급처 후보지 선택(필수아님)
+  const [cand1, setCand1] = useState("");
+  const [cand2, setCand2] = useState("");
+  const [cand3, setCand3] = useState("");
+
+  // 샘플 데이터
+  const similarRows: SimilarCaseRow[] = [
+  // ---------------- A (2행) ----------------
+  {
+    caseId: "A",
+    projectName: "OO시 물 재이용(빗물, 중수도) 시설 설치사업",
+    period: "2020.01.~2025.05.",
+    supplyFacilityType: "중수도",
+    supplyName: "OO폐수재이용",
+    supplyCapacity: 50,
+
+    demandName: "OO시체육센터",
+    demandAddress: "OO시 수성로 192",
+
+    facilityCapacity: 50,
+    pipeKm: 3,
+    purpose: "조경",
+    supplyAmt: 50,
+    treatment: "MBLM",
+    usePurpose: "청소, 화장실",
+  },
+  // A의 공급처 row 추가(=표 1행 추가) → 나머지 컬럼도 같이 채움
+  {
+    caseId: "A",
+    projectName: "OO시 물 재이용(빗물, 중수도) 시설 설치사업",
+    period: "2020.01.~2025.05.",
+    supplyFacilityType: "중수도",
+    supplyName: "OO스포츠센터",
+    supplyCapacity: 30,
+
+    demandName: "OO시체육센터",
+    demandAddress: "OO시 수성로 192",
+
+    facilityCapacity: 50,
+    pipeKm: 3,
+    purpose: "조경",
+    supplyAmt: 50,
+    treatment: "MBLM",
+    usePurpose: "청소, 화장실",
+  },
+
+  // ---------------- B (2행) ----------------
+  {
+    caseId: "B",
+    projectName: "OO 염성저수지 하수처리수 재이용사업",
+    period: "2019.12~2026.1",
+    supplyFacilityType: "하수",
+    supplyName: "OO3.4단계 공공하수처리시설",
+    supplyCapacity: 70000,
+
+    demandName: "OO천",
+    demandAddress: "-",
+
+    facilityCapacity: 0,
+    pipeKm: 3,
+    purpose: "하천 등 유지용수",
+    supplyAmt: 2300,
+    treatment: "탈황, 총인, 생물산화, 소독",
+    usePurpose: "하천 등 유지용수",
+  },
+  // B의 공급처 row 추가(=표 1행 추가)
+  {
+    caseId: "B",
+    projectName: "OO 염성저수지 하수처리수 재이용사업",
+    period: "2019.12~2026.1",
+    supplyFacilityType: "하수",
+    supplyName: "OO3.4단계 공공하수처리시설(2라인)",
+    supplyCapacity: 70000,
+
+    demandName: "OO저수지",
+    demandAddress: "-",
+
+    facilityCapacity: 0,
+    pipeKm: 5,
+    purpose: "하천 등 유지용수",
+    supplyAmt: 7700,
+    treatment: "탈황, 총인, 생물산화, 소독",
+    usePurpose: "하천 등 유지용수",
+  },
+
+  // ---------------- C (1행) ----------------
+  {
+    caseId: "C",
+    projectName: "OO 산업단지 공업용수 재이용사업",
+    period: "2021.03~2024.12",
+    supplyFacilityType: "하수",
+    supplyName: "OO공공하수처리장",
+    supplyCapacity: 15000,
+
+    demandName: "OO산업단지",
+    demandAddress: "OO시 산업로 25",
+
+    facilityCapacity: 5000,
+    pipeKm: 4,
+    purpose: "공업용수",
+    supplyAmt: 5000,
+    treatment: "UF + RO",
+    usePurpose: "공업용수",
+  },
+
+  // ---------------- D (1행) ----------------
+  {
+    caseId: "D",
+    projectName: "OO 공원 조경용수 재이용사업",
+    period: "2018.05~2022.11",
+    supplyFacilityType: "중수도",
+    supplyName: "OO정수장",
+    supplyCapacity: 8000,
+
+    demandName: "OO중앙공원",
+    demandAddress: "OO시 공원로 88",
+
+    facilityCapacity: 1200,
+    pipeKm: 2,
+    purpose: "조경용수",
+    supplyAmt: 1200,
+    treatment: "모래여과",
+    usePurpose: "조경",
+  },
+];
+
+  const similarDetailsByCaseId: Record<string, SimilarCaseDetail> = {
+    A: {
+      coliform: "불검출",
+      residualCl: "0.2이상",
+      turbidity: "1.5이하",
+      bod: "4.0이하",
+      odor: "불쾌하지않을것",
+      color: "10이하",
+      tn: "-",
+      tp: "-",
+      ph: "5.8~8.5",
+      chloride: "-",
+      ec: "-",
+      note: "-",
+      costTotal: 4305,
+      costFacility: 3518,
+      costPipe: 0,
+      costDesign: 350,
+      costSupervision: 417,
+      costOther: 12,
+      fundingTotal: 4305,
+      fundingNational: 3104,
+      fundingLocal: 1291,
+      fundingSelf: 0,
+      fundingRate: 70.0,
+    },
+    B: {
+      coliform: "-",
+      residualCl: "-",
+      turbidity: "-",
+      bod: "-",
+      odor: "-",
+      color: "-",
+      tn: "-",
+      tp: "-",
+      ph: "-",
+      chloride: "-",
+      ec: "-",
+      note: "-",
+      costTotal: 0,
+      costFacility: 0,
+      costPipe: 0,
+      costDesign: 0,
+      costSupervision: 0,
+      costOther: 0,
+      fundingTotal: 0,
+      fundingNational: 0,
+      fundingLocal: 0,
+      fundingSelf: 0,
+      fundingRate: 0,
+    },
+    C: {
+      coliform: "불검출",
+      residualCl: "0.2이상",
+      turbidity: "1.5이하",
+      bod: "4.0이하",
+      odor: "불쾌하지않을것",
+      color: "10이하",
+      tn: "-",
+      tp: "-",
+      ph: "5.8~8.5",
+      chloride: "-",
+      ec: "-",
+      note: "-",
+      costTotal: 4305,
+      costFacility: 3518,
+      costPipe: 0,
+      costDesign: 350,
+      costSupervision: 417,
+      costOther: 12,
+      fundingTotal: 4305,
+      fundingNational: 3104,
+      fundingLocal: 1291,
+      fundingSelf: 0,
+      fundingRate: 70.0,
+    },
+    D: {
+      coliform: "-",
+      residualCl: "-",
+      turbidity: "-",
+      bod: "-",
+      odor: "-",
+      color: "-",
+      tn: "-",
+      tp: "-",
+      ph: "-",
+      chloride: "-",
+      ec: "-",
+      note: "-",
+      costTotal: 0,
+      costFacility: 0,
+      costPipe: 0,
+      costDesign: 0,
+      costSupervision: 0,
+      costOther: 0,
+      fundingTotal: 0,
+      fundingNational: 0,
+      fundingLocal: 0,
+      fundingSelf: 0,
+      fundingRate: 0,
+    },
+  };
+
+  return (
+    <>
+      <main className="bg-white">
+        <SubPageHeader
+          title="수요정보등록"
+          crumbs={[
+            { label: "Home", href: "/reuse" },
+            { label: "수요신청", href: "/reuse/apply" },
+            { label: "수요정보등록" },
+          ]}
+        />
+
+        <div>
+          <div className="border border-neutral-200 bg-white">
+            <FormRow label="요구시기" required>
+              <DateInput value={reqDate} onChange={setReqDate} />
+            </FormRow>
+            <Divider />
+
+            <FormRow label="요구수량(m²/d)" required>
+              <TextInput value={reqQty} onChange={setReqQty} />
+            </FormRow>
+            <Divider />
+
+            <FormRow label="사용용도" required>
+              <TextInput value={usePurpose} onChange={setUsePurpose} />
+            </FormRow>
+            <Divider />
+
+            <FormRow label="희망단가(원)" required>
+              <TextInput value={hopePrice} onChange={setHopePrice} />
+            </FormRow>
+          </div>
+
+          <div className="grid grid-cols-12">
+            <div className="col-span-12 lg:col-span-2 inline-flex items-center justify-center gap-3 px-6 py-6 text-center">
+              <span className="text-lg font-semibold text-neutral-800">요구수질</span>
+              <button
+                type="button"
+                onClick={() => setOpenRef(true)}
+                className="rounded border-[2px] border-[#DE3412] px-2 py-3 text-[15px] font-medium text-[#4F4F4F] hover:bg-orange-50"
+              >
+                수질기준 참고
+              </button>
+
+              <WaterQualityRefModal
+                open={openRef}
+                onClose={() => setOpenRef(false)}
+                imageSrc="/images/landing/water_quality_ref_1.png"
+              />
+            </div>
+          </div>
+
+          <div className="border border-neutral-200 bg-white">
+            <QualityRow
+              leftLabel="총대장균군수(개/mg)"
+              leftRequired
+              leftControl={
+                <div className="flex items-center gap-4">
+                  <TextInput
+                    value={coliform}
+                    onChange={setColiform}
+                    disabled={noDetect}
+                    className={noDetect ? "bg-neutral-100 text-neutral-400" : ""}
+                  />
+                  <label className="flex items-center gap-2 text-sm text-neutral-700">
+                    <input
+                      type="checkbox"
+                      checked={noDetect}
+                      onChange={(e) => {
+                        setNoDetect(e.target.checked);
+                        if (e.target.checked) setColiform("");
+                      }}
+                      className="h-4 w-4 rounded border-neutral-300"
+                    />
+                    불검출
+                  </label>
+                </div>
+              }
+              rightLabel="총질소(T-N)(mg/L)"
+              rightControl={<InlineSuffixInput value={tn} onChange={setTn} suffix="이하" />}
+            />
+            <Divider />
+
+            <QualityRow
+              leftLabel="결합잔류염소(mg/L)"
+              leftRequired
+              leftControl={<TextInput value={residualCl} onChange={setResidualCl} />}
+              rightLabel="총인(T-P)(mg/L)"
+              rightControl={<InlineSuffixInput value={tp} onChange={setTp} suffix="이하" />}
+            />
+            <Divider />
+
+            <QualityRow
+              leftLabel="탁도(NTU)"
+              leftRequired
+              leftControl={<InlineSuffixInput value={turbidity} onChange={setTurbidity} suffix="이하" />}
+              rightLabel="수소이온농도(pH)"
+              rightControl={
+                <div className="flex items-center gap-2">
+                  <TextInput value={ph.min} onChange={(v) => setPh((p) => ({ ...p, min: v }))} className="w-32" />
+                  <span className="text-neutral-500">~</span>
+                  <TextInput value={ph.max} onChange={(v) => setPh((p) => ({ ...p, max: v }))} className="w-32" />
+                </div>
+              }
+            />
+            <Divider />
+
+            <QualityRow
+              leftLabel={
+                <>
+                  생물화학적산소요구량
+                  <br />
+                  (BOD)(mg/L)
+                </>
+              }
+              leftRequired
+              leftControl={<InlineSuffixInput value={bod} onChange={setBod} suffix="이하" />}
+              rightLabel="염화물(mgCL/L)"
+              rightControl={<InlineSuffixInput value={chloride} onChange={setChloride} suffix="이하" />}
+            />
+            <Divider />
+
+            <QualityRow
+              leftLabel="냄새"
+              leftRequired
+              leftControl={
+                <select
+                  value={odor}
+                  onChange={(e) => setOdor(e.target.value)}
+                  className="h-11 w-full max-w-[200px] rounded-md border border-neutral-300 bg-white px-3 text-sm outline-none focus:border-neutral-500"
+                >
+                  <option>불쾌하지 않을 것</option>
+                  <option>약간 있음</option>
+                  <option>있음</option>
+                </select>
+              }
+              rightLabel="전기전도도(µs/cm)"
+              rightControl={<InlineSuffixInput value={ec} onChange={setEc} suffix="이하" />}
+            />
+            <Divider />
+
+            <QualityRow
+              leftLabel="색도(도)"
+              leftRequired
+              leftControl={<InlineSuffixInput value={color} onChange={setColor} suffix="이하" />}
+              rightLabel="비고"
+              rightControl={
+                <textarea
+                  value={remark}
+                  onChange={(e) => setRemark(e.target.value)}
+                  className="h-11 w-full rounded-md border border-neutral-300 bg-white px-3 py-2 text-sm outline-none focus:border-neutral-500"
+                />
+              }
+            />
+            <Divider />
+
+            <div className="grid grid-cols-12">
+              <LabelCell>
+                공급처 후보지 선택
+                <br />
+                (필수아님)
+              </LabelCell>
+
+              <div className="col-span-12 md:col-span-10 p-6">
+                <div className="flex flex-col gap-3 xl:flex-row xl:items-center xl:gap-4">
+                  <TextInput value={cand1} onChange={setCand1} className="max-w-[220px]" />
+                  <TextInput value={cand2} onChange={setCand2} className="max-w-[220px]" />
+                  <TextInput value={cand3} onChange={setCand3} className="max-w-[220px]" />
+
+                  <div className="flex items-center gap-3 xl:ml-2">
+                    <button
+                      type="button"
+                      className="h-11 rounded-md bg-[#888] px-5 text-base text-white hover:bg-neutral-700"
+                      onClick={() => setOpenCand(true)}
+                    >
+                      후보지 조회
+                    </button>
+
+                    <button
+                      type="button"
+                      className="h-11 rounded-md bg-[#888] px-5 text-base text-white hover:bg-neutral-700"
+                      onClick={() => setOpenSimilar(true)}
+                    >
+                      유사사례 조회
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div className="flex justify-center py-12">
+            <button
+              type="button"
+              className="h-11 rounded-md bg-[#0B4EA2] px-10 text-lg text-white hover:opacity-90"
+              onClick={() => console.log("수요정보 등록")}
+            >
+              수요정보 등록
+            </button>
+          </div>
+        </div>
+      </main>
+
+      {/* 후보지 조회 모달 */}
+      <CandidateSiteModal
+        open={openCand}
+        onClose={() => setOpenCand(false)}
+        initialSelected={selectedCands}
+        onApply={(list) => {
+          setSelectedCands(list);
+          setCand1(list[0]?.name ?? "");
+          setCand2(list[1]?.name ?? "");
+          setCand3(list[2]?.name ?? "");
+          setOpenCand(false);
+        }}
+      />
+
+      {/* 유사사례 모달 */}
+      <SimilarCaseModal
+        open={openSimilar}
+        onClose={() => setOpenSimilar(false)}
+        rows={similarRows}
+        detailsByCaseId={similarDetailsByCaseId}
+        onSearch={async (criterion) => {
+            console.log(criterion);
+          }}
+      />
+    </>
+  );
+}
+
+/* ----------------------------- UI helpers ----------------------------- */
+
+function Divider() {
+  return <div className="h-px w-full bg-neutral-200" />;
+}
+
+function LabelCell({
+  children,
+  required,
+}: {
+  children: React.ReactNode;
+  required?: boolean;
+}) {
+  return (
+    <div className="col-span-12 md:col-span-2 flex items-center justify-center bg-emerald-50/70 px-6 py-6 text-center text-lg font-semibold text-neutral-800">
+      <span className="inline-flex items-center gap-1">
+        {children}
+        {required ? <span className="text-red-500">*</span> : null}
+      </span>
+    </div>
+  );
+}
+
+function FormRow({
+  label,
+  required,
+  children,
+}: {
+  label: string;
+  required?: boolean;
+  children: React.ReactNode;
+}) {
+  return (
+    <div className="grid grid-cols-12">
+      <LabelCell required={required}>{label}</LabelCell>
+      <div className="col-span-12 md:col-span-10 p-6">{children}</div>
+    </div>
+  );
+}
+
+function QualityRow({
+  leftLabel,
+  leftRequired,
+  leftControl,
+  rightLabel,
+  rightControl,
+}: {
+  leftLabel: React.ReactNode;
+  leftRequired?: boolean;
+  leftControl: React.ReactNode;
+  rightLabel: React.ReactNode;
+  rightControl: React.ReactNode;
+}) {
+  return (
+    <div className="grid grid-cols-12">
+      <div className="col-span-12 lg:col-span-2 flex items-center justify-center bg-emerald-50/70 px-6 py-6 text-center text-lg font-semibold text-neutral-800">
+        <span className="inline-flex items-center gap-1">
+          <span className="leading-6">{leftLabel}</span>
+          {leftRequired ? <span className="text-red-500">*</span> : null}
+        </span>
+      </div>
+
+      <div className="col-span-12 lg:col-span-4 p-6">{leftControl}</div>
+
+      <div className="col-span-12 lg:col-span-2 flex items-center justify-center bg-emerald-50/70 px-6 py-6 text-center text-lg font-semibold text-neutral-800">
+        <span className="leading-6">{rightLabel}</span>
+      </div>
+
+      <div className="col-span-12 lg:col-span-4 p-6">{rightControl}</div>
+    </div>
+  );
+}
+
+function TextInput({
+  value,
+  onChange,
+  placeholder,
+  disabled,
+  className,
+}: {
+  value: string;
+  onChange: (v: string) => void;
+  placeholder?: string;
+  disabled?: boolean;
+  className?: string;
+}) {
+  return (
+    <input
+      value={value}
+      onChange={(e) => onChange(e.target.value)}
+      placeholder={placeholder}
+      disabled={disabled}
+      className={[
+        "h-11 w-full max-w-[200px] rounded-md border border-neutral-300 bg-white px-3 text-sm outline-none",
+        "focus:border-neutral-500",
+        disabled ? "cursor-not-allowed" : "",
+        className ?? "",
+      ].join(" ")}
+    />
+  );
+}
+
+function InlineSuffixInput({
+  value,
+  onChange,
+  suffix,
+}: {
+  value: string;
+  onChange: (v: string) => void;
+  suffix: string;
+}) {
+  return (
+    <div className="flex items-center gap-3">
+      <TextInput value={value} onChange={onChange} className="max-w-[200px]" />
+      <span className="text-sm text-neutral-600">{suffix}</span>
+    </div>
+  );
+}
+
+function DateInput({
+  value,
+  onChange,
+}: {
+  value: string;
+  onChange: (v: string) => void;
+}) {
+  const ref = useRef<HTMLInputElement | null>(null);
+
+  const openPicker = () => {
+    const el = ref.current;
+    if (!el) return;
+
+    if (typeof (el as any).showPicker === "function") {
+      (el as any).showPicker();
+      return;
+    }
+
+    el.focus();
+    el.click();
+  };
+
+  return (
+    <div className="relative w-full max-w-[200px]">
+      <input
+        ref={ref}
+        type="date"
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        className={[
+          "h-11 w-full rounded-md border border-neutral-300 bg-white px-3 pr-10 text-sm outline-none focus:border-neutral-500",
+          "[&::-webkit-calendar-picker-indicator]:opacity-0",
+          "[&::-webkit-calendar-picker-indicator]:absolute",
+          "[&::-webkit-calendar-picker-indicator]:right-0",
+          "[&::-webkit-calendar-picker-indicator]:w-10",
+          "[&::-webkit-calendar-picker-indicator]:h-full",
+          "[&::-webkit-calendar-picker-indicator]:cursor-pointer",
+        ].join(" ")}
+      />
+
+      <button
+        type="button"
+        onClick={openPicker}
+        className="absolute right-2 top-1/2 -translate-y-1/2 p-1 text-neutral-500 hover:text-neutral-700"
+        aria-label="달력 열기"
+      >
+        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" aria-hidden="true">
+          <path
+            d="M7.14286 7.99104H16.7812M6.48512 2.5625V4.19126M17.3125 2.5625V4.19106M20.5 7.19106L20.5 18.5625C20.5 20.2194 19.1569 21.5625 17.5 21.5625H6.5C4.84315 21.5625 3.5 20.2194 3.5 18.5625V7.19106C3.5 5.53421 4.84315 4.19106 6.5 4.19106H17.5C19.1569 4.19106 20.5 5.53421 20.5 7.19106Z"
+            stroke="#1A1A1A"
+            strokeWidth={2}
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        </svg>
+      </button>
+    </div>
+  );
+}

apps/dm/app/(landing)/reuse/apply/status/page.tsx

@@ -0,0 +1,375 @@
+// apps/dm/app/(landing)/reuse/apply/status/page.tsx
+"use client";
+
+import { useEffect, useMemo, useRef, useState } from "react";
+import SubPageHeader from "../../_components/SubPageHeader";
+//import { useDmStore } from "@/app/store";
+
+type WaterDetail = {
+  toc: string;
+  bdo: string;
+  tn: string;
+  tp: string;
+  cl: string;
+  conductivity: string;
+  coliform: string;
+  turbidity: string;
+  odor: string;
+  color: string;
+  ph: string;
+  note: string;
+};
+
+type Row = {
+  id: number;
+  sido: string;
+  sigungu: string;
+  company: string;
+  address: string;
+  phone: string;
+  date: string;
+  status: "진행중" | "진행완료";
+  detail: {
+    reqDate: string;
+    reqQty: string;
+    usePurpose: string;
+    price: string;
+    water: WaterDetail;
+    candidates: [string, string, string];
+  };
+};
+
+const MOCK: Row[] = [
+  {
+    id: 1,
+    sido: "서울특별시",
+    sigungu: "금천구",
+    company: "서울워터솔루션(주)",
+    address: "서울특별시 금천구 가산디지털2로 119, 24층(가산동)",
+    phone: "010-0000-0000",
+    date: "2025-01-14",
+    status: "진행중",
+    detail: {
+      reqDate: "2025-02",
+      reqQty: "1,200",
+      usePurpose: "공업용수",
+      price: "350",
+      water: {
+        toc: "4",
+        bdo: "3",
+        tn: "10",
+        tp: "1.0",
+        cl: "120",
+        conductivity: "800",
+        coliform: "0",
+        turbidity: "2",
+        odor: "무",
+        color: "무",
+        ph: "7.2",
+        note: "-",
+      },
+      candidates: ["후보지1", "후보지2", "후보지3"],
+    },
+  },
+  {
+    id: 2,
+    sido: "제주특별자치도",
+    sigungu: "서귀포",
+    company: "회사명이 길어도괜찮지",
+    address: "제주특별자치도 서귀포시 천제연로 156, 3층 2호(색달동 1077호)",
+    phone: "010-0000-0000",
+    date: "2025-01-14",
+    status: "진행완료",
+    detail: {
+      reqDate: "2025-03",
+      reqQty: "800",
+      usePurpose: "조경용수",
+      price: "300",
+      water: {
+        toc: "5",
+        bdo: "4",
+        tn: "12",
+        tp: "1.2",
+        cl: "140",
+        conductivity: "900",
+        coliform: "0",
+        turbidity: "3",
+        odor: "무",
+        color: "무",
+        ph: "7.0",
+        note: "현장 협의",
+      },
+      candidates: ["후보지1", "후보지2", "후보지3"],
+    },
+  },
+];
+
+function StatusBadge({ v }: { v: Row["status"] }) {
+  const cls = v === "진행중" ? "text-red-600" : "text-lime-600";
+  return <span className={["font-medium", cls].join(" ")}>{v}</span>;
+}
+
+type TopField = { label: string; value: string; required?: boolean };
+type PairField = { label: string; value: string };
+
+export default function DemandStatusPage() {
+  const rows = useMemo(() => MOCK, []);
+
+  // rows가 빈 경우도 대비 (런타임 오류 방지)
+  const [selectedId, setSelectedId] = useState<number | null>(rows[0]?.id ?? null);
+
+  // 상세영역 스크롤 이동용
+  const detailRef = useRef<HTMLDivElement | null>(null);
+
+  // update
+  /* const updateSdmInfoData = useDmStore(
+    (state) => state.updateSdmInfoData
+  ); */
+
+  // ✅ selected 계산 안정화
+  const selected = useMemo(() => {
+    if (!rows.length) return null;
+    const found = rows.find((r) => r.id === selectedId);
+    return found ?? rows[0];
+  }, [rows, selectedId]);
+
+  // ✅ rows가 바뀌었는데 selectedId가 null이면 자동 첫번째 선택
+  useEffect(() => {
+    const first = rows[0];
+    if (!first) return; // ✅ rows가 비어있으면 종료 (TS + 런타임 안전)
+
+    if (selectedId == null) setSelectedId(first.id);
+  }, [rows, selectedId]);
+
+  // ✅ 상단 2행(요구시기/요구수량/사용용도/희망단가) - TS 안전하게 object로 구성
+  const topFields: TopField[] = useMemo(() => {
+    if (!selected) return [];
+    return [
+      { label: "요구시기", value: selected.detail.reqDate, required: true },
+      { label: "요구수량(㎡/d)", value: selected.detail.reqQty },
+      { label: "사용용도", value: selected.detail.usePurpose },
+      { label: "희망단가(원)", value: selected.detail.price },
+    ];
+  }, [selected]);
+
+  // ✅ 수질 항목 - TS 안전
+  const waterFields: PairField[] = useMemo(() => {
+    if (!selected) return [];
+    const w = selected.detail.water;
+    return [
+      { label: "총대장균군수(개/100mℓ)", value: w.coliform },
+      { label: "결합잔류염소(mg/L)", value: "-" },
+      { label: "탁도(NTU)", value: w.turbidity },
+
+      { label: "생물화학적산소요구량(BOD)(mg/L)", value: w.bdo },
+      { label: "냄새", value: w.odor },
+      { label: "색도(도)", value: w.color },
+
+      { label: "총질소(T-N)(mg/L)", value: w.tn },
+      { label: "총인(T-P)(mg/L)", value: w.tp },
+      { label: "수소이온농도(pH)", value: w.ph },
+
+      { label: "염화물(mgCL/L)", value: w.cl },
+      { label: "전기전도도(µs/cm)", value: w.conductivity },
+      { label: "비고", value: w.note },
+    ];
+  }, [selected]);
+
+  const onSelectRow = (id: number) => {
+    setSelectedId(id);
+
+    // ✅ “행 클릭 → 아래 상세로 보여짐” 체감 확실히: 상세영역으로 이동
+    // (사용자가 이미 아래를 보고 있다면 거의 움직이지 않음)
+    requestAnimationFrame(() => {
+      detailRef.current?.scrollIntoView({ behavior: "smooth", block: "start" });
+    });
+  };
+
+  return (
+    <main className="bg-white">
+        {/* 서브 타이틀 + 브레드크럼 */}
+        <SubPageHeader
+            title="수요신청현황"
+            crumbs={[
+            { label: "Home", href: "/reuse" },
+            { label: "수요신청", href: "/reuse/apply" },
+            { label: "수요신청현황" },
+            ]}
+            hideFooterLine
+            hideGuideText
+        />
+
+        {/* 컨텐츠 영역 */}
+        <div>
+            {/* 리스트 테이블 */}
+            <section className="mt-6">
+                <div className="text-2xl font-bold text-slate-700">수요정보 신청현황</div>
+
+                <div className="mt-3 border border-neutral-200">
+                    <table className="w-full table-fixed">
+                    <thead className="bg-[#E7F4E2]">
+                        <tr className="text-sm text-slate-700">
+                        <th className="w-[60px] px-3 py-3 text-center">NO.</th>
+                        <th className="w-[120px] px-3 py-3 text-center">시도</th>
+                        <th className="w-[120px] px-3 py-3 text-center">시군구</th>
+                        <th className="w-[180px] px-3 py-3 text-center">회사명</th>
+                        <th className="px-3 py-3 text-center">공장주소</th>
+                        <th className="w-[140px] px-3 py-3 text-center">전화번호</th>
+                        <th className="w-[120px] px-3 py-3 text-center">신청일자</th>
+                        <th className="w-[110px] px-3 py-3 text-center">진행상태</th>
+                        </tr>
+                    </thead>
+
+                    <tbody className="bg-white text-base text-slate-700">
+                        {rows.length === 0 ? (
+                        <tr>
+                            <td colSpan={8} className="px-3 py-10 text-center text-slate-400">
+                            조회된 신청내역이 없습니다.
+                            </td>
+                        </tr>
+                        ) : (
+                        rows.map((r) => {
+                            const active = r.id === selected?.id;
+                            return (
+                            <tr
+                                key={r.id}
+                                role="row"
+                                tabIndex={0}
+                                onClick={() => onSelectRow(r.id)}
+                                onKeyDown={(e) => {
+                                if (e.key === "Enter" || e.key === " ") onSelectRow(r.id);
+                                }}
+                                className={[
+                                "border-t border-neutral-200 outline-none",
+                                "cursor-pointer",
+                                active ? "bg-slate-50" : "hover:bg-slate-50",
+                                "focus-visible:ring-2 focus-visible:ring-slate-300",
+                                ].join(" ")}
+                                aria-selected={active}
+                            >
+                                <td className="px-3 py-3 text-center">{r.id}</td>
+                                <td className="px-3 py-3 text-center">{r.sido}</td>
+                                <td className="px-3 py-3 text-center">{r.sigungu}</td>
+                                <td className="px-3 py-3 text-center">{r.company}</td>
+                                <td className="px-3 py-3 text-center">{r.address}</td>
+                                <td className="px-3 py-3 text-center">{r.phone}</td>
+                                <td className="px-3 py-3 text-center">{r.date}</td>
+                                <td className="px-3 py-3 text-center">
+                                <StatusBadge v={r.status} />
+                                </td>
+                            </tr>
+                            );
+                        })
+                        )}
+                    </tbody>
+                    </table>
+                </div>
+            </section>
+
+            {/* 상세현황 */}
+            <section className="mt-10 pb-16" ref={detailRef}>
+
+                <div className="flex justify-between items-center">
+                    <div className="text-2xl font-bold text-slate-700">수요신청 상세현황</div>
+                    <button
+                        type="button"
+                        className="h-8 rounded-md bg-[#888] px-4 text-base text-white hover:bg-neutral-700"
+                    >
+                        수정
+                    </button>
+                </div>
+
+            {!selected ? (
+                <div className="mt-3 border border-neutral-200 px-6 py-10 text-center text-sm text-slate-400">
+                상세 정보를 표시할 신청건이 없습니다.
+                </div>
+            ) : (
+              <div className="mt-3 border border-neutral-200">
+                <div className="bg-sky-50 px-4 py-3 text-sm font-semibold text-slate-700 border-b border-neutral-200">
+                    요구수량
+                </div>
+
+                <div className="grid grid-cols-12 text-sm">
+                    {/* 상단 2행 */}
+                    {topFields.map((f) => (
+                    <div
+                        key={f.label}
+                        className="col-span-12 md:col-span-6 grid grid-cols-12 border-b border-neutral-200"
+                    >
+                        <div className="col-span-4 bg-sky-50 px-4 py-4 flex items-center justify-center text-center font-semibold text-slate-700">
+                        {f.label}
+                        {f.required ? <span className="ml-1 text-red-500">*</span> : null}
+                        </div>
+                        <div className="col-span-8 px-4 py-4 flex items-center justify-center text-center">
+                        {f.value}
+                        </div>
+                    </div>
+                    ))}
+
+                    {/* 수질 */}
+                    <div className="col-span-12 bg-sky-50 px-4 py-3 text-sm font-semibold text-slate-700 border-b border-neutral-200">
+                    요구수질
+                    </div>
+
+                    {waterFields.map((f) => (
+                    <div
+                        key={f.label}
+                        className="col-span-12 md:col-span-4 grid grid-cols-12 border-b border-neutral-200"
+                    >
+                        <div className="col-span-5 bg-sky-50 px-3 py-4 flex items-center justify-center text-center font-semibold text-slate-700">
+                        {f.label}
+                        </div>
+                        <div className="col-span-7 px-3 py-4 flex items-center justify-center text-center">
+                        {f.value}
+                        </div>
+                    </div>
+                    ))}
+
+                    {/* 공급처 후보지 */}
+                    <div className="col-span-12 bg-sky-50 px-4 py-3 text-sm font-semibold text-slate-700 border-b border-neutral-200">
+                    공급처 후보지
+                    </div>
+
+                    {selected.detail.candidates.map((v, i) => (
+                    <div
+                        key={`candidate-${i}`}
+                        className="col-span-12 md:col-span-4 grid grid-cols-12 border-b md:border-b-0 border-neutral-200"
+                    >
+                        <div className="col-span-5 bg-sky-50 px-3 py-4 flex items-center justify-center text-center font-semibold text-slate-700">
+                        후보지{i + 1}
+                        </div>
+                        <div className="col-span-7 px-3 py-4 flex items-center justify-center text-center">
+                        {v}
+                        </div>
+                    </div>
+                    ))}
+
+                    {/* 수요신청 진행상태 */}
+                    <div className="col-span-12 bg-sky-50 px-4 py-3 text-sm font-semibold text-slate-700 border-t border-b border-neutral-200">
+                    수요신청 진행상태
+                    </div>
+
+                    <div className="col-span-12 md:col-span-4 grid grid-cols-12 border-b md:border-b-0 border-neutral-200">
+                        <div className="col-span-5 bg-sky-50 px-3 py-4 flex items-center justify-center text-center font-semibold text-slate-700">
+                        진행상태
+                        </div>
+                        <div className="col-span-7 px-3 py-4 flex items-center justify-center text-center">
+                        {selected.status}
+                        </div>
+                    </div>
+                    <div className="col-span-12 md:col-span-4 grid grid-cols-12 border-b md:border-b-0 border-neutral-200">
+                        <div className="col-span-5 bg-sky-50 px-3 py-4 flex items-center justify-center text-center font-semibold text-slate-700">
+                        공급처매칭결과
+                        </div>
+                        <div className="col-span-7 px-3 py-4 flex items-center justify-center text-center">
+                        
+                        </div>
+                    </div>
+                </div>
+              </div>
+            )}
+            </section>
+        </div>
+    </main>
+  );
+}

apps/dm/app/(landing)/reuse/business/globalCase/australia/page.tsx

@@ -0,0 +1,151 @@
+// apps/dm/app/(landing)/reuse/business/globalCase/australia/page.tsx
+"use client";
+
+import SubPageHeader from "../../../_components/SubPageHeader";
+import CaseImageSlider from "../../../_components/ImageSlider";
+
+function SectionTitle({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="flex items-center gap-3">
+      <span className="h-5 w-[3px] bg-sky-500" />
+      <h3 className="text-2xl font-bold text-neutral-900">{children}</h3>
+    </div>
+  );
+}
+
+type HrProps = {
+  className?: string;
+};
+
+function Hr({ className = "" }: HrProps) {
+  return <div className={`h-[2px] w-full bg-black/10 ${className}`} />;
+}
+
+// type ImgCardProps = {
+//   src: string;
+//   alt: string;
+// };
+
+// function ImgCard({ src, alt }: ImgCardProps) {
+//   return (
+//     <div className="w-full overflow-x-auto">
+//       <img
+//         src={src}
+//         alt={alt}
+//         className="block mx-auto max-w-none"
+//       />
+//     </div>
+//   );
+// }
+
+export default function GreywaterPage() {
+  return (
+    <div className="bg-white">  
+      <SubPageHeader
+        title="[호주] 생활 속 물 재이용 / 광역 물 재이용수 공급"
+        crumbs={[
+            { label: "Home", href: "/reuse" },
+            { label: "물 재이용 사례" },
+            { label: "해외 재이용 사례" },
+            { label: "호주", href: "/reuse/business/globalCase/australia" },
+        ]}
+        hideFooterLine 
+        hideGuideText
+        wrapClassName="!pb-0"
+      /> 
+
+      <Hr className="my-7" />
+
+      {/* 슬라이드 이미지 영역 */}
+      <CaseImageSlider
+        className="mt-8"
+        maxWidthClassName="max-w-[760px]"
+        slides={[
+            { src: "/images/landing/business/globalCase/australia_01.png", alt: "호주 사례 1" },
+        ]}
+      />
+      
+      {/* 생활용수로 재이용수의 적극 활용 */}
+      <section className="mt-8">
+        <SectionTitle>생활용수로 재이용수의 적극 활용</SectionTitle>
+        <div className="px-4 mt-6">
+            <ul className="space-y-4 text-base text-[#4F4F4F]">
+                <li>
+                – 재이용수를 공원, 골프장 등의 관개용수로 공급(초록색 지역)
+                </li>
+                <li>
+                – Dual pipe로 재이용수를 특정 주거단지로 공급(보라색 지역)
+                </li>
+                <li>
+                – 현재 7,000여 가구가 재이용수를 사용
+                </li>
+                <li>
+                – 2030년까지 43,000가구로 확대 예정
+                </li>
+            </ul>
+        </div>
+      </section>
+
+      <Hr className="my-11" />
+ 
+      {/* 호주 재이용수 광역 활용(퀸즈랜드주 브리즈번) */}
+      <section className="mt-6">
+        <SectionTitle>호주 재이용수 광역 활용(퀸즈랜드주 브리즈번)</SectionTitle>
+        <div className="px-4">
+            <ul className="mt-6 space-y-4 text-base text-gray-600">
+                <li>
+                • SEQ Water Grid는 브리즈번 남동부지역의 식수 공급을 위해 설정한 광역 수로망
+                </li>
+                <li>
+                • 이 광역수로망을 활용하여 물이 부족한 지역으로 물을 공급<br />
+                    <ul className="list-inside text-[#767676] ml-4 mt-2">
+                        <li>– 1,618억의 사업비 중 92% 국비, 지방비 8% 투입</li>
+                        <li>– 재이용수는 24km 관로로 타이난 TSMC로 공급</li>
+                    </ul>
+                </li>
+                <li>
+                • 12개 댐, 32개 수처리 시설, 3개 재이용시설, 담수화 플랜트 1개, 저수지 28개와 600km 이상의 물 공급 관로를 건설
+                </li>
+                <li>
+                • 지역적으로 강수량이 고르지 않아, 댐의 저수율이 불균등할 때 지역의 물 공급을 보충하는 중요한 역할을 수행
+                </li>
+            </ul>
+        </div>
+      </section>
+
+      <Hr className="my-11" />
+
+      {/* 특이사항 */}
+      <section className="pb-[200px]">
+        <SectionTitle>특이사항</SectionTitle>
+        <ul className="mt-6 space-y-4 pl-4 text-base text-gray-600">
+            <li>
+                <ul className="list-disc list-outside pl-6 space-y-1 leading-relaxed">
+                    <li>호주는 2000~2009년 강수량 감소로 밀레니엄 가뭄이 발생하여 심각한 물 부족 현상이 발생함</li>
+                </ul>
+            </li>
+            <li>
+                <ul className="list-disc list-outside pl-6 space-y-1 leading-relaxed">
+                    <li>호주는 해안 도시에 인구가 밀집하여 거주하고 있으며 인구 증가율이 타 선진국 대비 높아, 향후 도시에 공급할 수자원 확보가 필요함</li>
+                </ul>
+            </li>
+            <li>
+                <ul className="list-disc list-outside pl-6 space-y-1 leading-relaxed">
+                    <li>호주정부는 1990년대부터 하·폐수가 방류될 경우의 환경 피해에 대해 인식하기 시작하고 배출규제와 위원회를 구성하기 시작</li>
+                </ul>
+            </li>
+            <li>
+                <ul className="list-disc list-outside pl-6 space-y-1 leading-relaxed">
+                    <li>연방정부는 주에 인센티브를 주는 방식으로 물 정책을 장려하고 토지소유권과 물 권리를 구분하여 거래를 허용하고 물 재이용 활성화를 위한 Water Smart Australia 프로그램을 시행</li>
+                </ul>
+            </li>
+            <li>
+                <ul className="list-disc list-outside pl-6 space-y-1 leading-relaxed">
+                    <li>호주의 용수공급 체계는 영국과 미국의 특성들이 존재하지만, 주의 특성과 주 정부의 정책 방향에 따라 주마다도 많은 차이가 있음. 특히 대부분의 주에서 수 자원 개발 기능과 수도 공급의 기능을 분리하여 주정부<br/>산하 기관에서 운영하는게 특징</li>
+                </ul>
+            </li>
+        </ul>
+      </section>
+    </div>
+  );
+}

apps/dm/app/(landing)/reuse/business/globalCase/eu/page.tsx

@@ -0,0 +1,142 @@
+// apps/dm/app/(landing)/reuse/business/globalCase/eu/page.tsx
+"use client";
+
+import SubPageHeader from "../../../_components/SubPageHeader";
+import CaseImageSlider from "../../../_components/ImageSlider";
+
+function SectionTitle({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="flex items-center gap-3">
+      <span className="h-5 w-[3px] bg-sky-500" />
+      <h3 className="text-2xl font-bold text-neutral-900">{children}</h3>
+    </div>
+  );
+}
+
+type HrProps = {
+  className?: string;
+};
+
+function Hr({ className = "" }: HrProps) {
+  return <div className={`h-[2px] w-full bg-black/10 ${className}`} />;
+}
+
+// type ImgCardProps = {
+//   src: string;
+//   alt: string;
+// };
+
+// function ImgCard({ src, alt }: ImgCardProps) {
+//   return (
+//     <div className="w-full overflow-x-auto">
+//       <img
+//         src={src}
+//         alt={alt}
+//         className="block mx-auto max-w-none"
+//       />
+//     </div>
+//   );
+// }
+
+export default function GreywaterPage() {
+  return (
+    <div className="bg-white">  
+      <SubPageHeader
+        title="[EU] 법률을 제정, EU국가에서 물 재이용 유도"
+        crumbs={[
+            { label: "Home", href: "/reuse" },
+            { label: "물 재이용 사례" },
+            { label: "해외 재이용 사례" },
+            { label: "EU", href: "/reuse/business/globalCase/eu" },
+        ]}
+        hideFooterLine 
+        hideGuideText
+        wrapClassName="!pb-0"
+      /> 
+
+      <Hr className="my-7" />
+
+      {/* 슬라이드 이미지 영역 */}
+      <CaseImageSlider
+        className="mt-8"
+        maxWidthClassName="max-w-[760px]"
+        slides={[
+            { src: "/images/landing/business/globalCase/eu_01.png", alt: "EU 사례 1" },
+        ]}
+      />
+      
+      {/* 물 재이용에 대한 법률을 제정(2020 제정, 2023 시행) */}
+      <section className="mt-8">
+        <SectionTitle>물 재이용에 대한 법률을 제정(2020 제정, 2023 시행)</SectionTitle>
+        <div className="px-4 mt-6">
+            <ul className="mt-6 space-y-4 text-base text-gray-600">
+                <li>
+                • 유럽 지역의 물 부족 문제를 인식하고 ’20년 물 재이용 법률을 제정 (2020/741)
+                </li>
+                <li>
+                • 2023년부터 모든 EU국가에서 시행
+                </li>
+            </ul>
+        </div>
+      </section>
+
+      <Hr className="my-11" />
+ 
+      {/* 유럽연합 회원국 물 재이용 지원정책 */}
+      <section className="mt-6">
+        <SectionTitle>유럽연합 회원국 물 재이용 지원정책</SectionTitle>
+        <div className="px-4">
+            <ul className="mt-6 space-y-4 text-base text-gray-600">
+                <li>
+                • 유럽연합 차원에서 다양한 물 재이용 프로그램 자금 지원<br />
+                    <ul className="list-inside space-y-4 text-[#767676] text-sm ml-4 mt-2">
+                        <li>– 2021년부터 3년간 Life RECYCLIO 프로그램 지원 → 세부내용 물 재이용 프로그램<br/>
+                            <ul className="list-inside space-y-2 text-[#767676] ml-4 mt-2">
+                                <li>1. 환경 관련 사업에 자금을 지원하는 Life 프로그램의 일환으로 80만 유로를 지원</li>
+                                <li>2. 식품·농업 분야 물 재이용 확대를 위해 기술 이전 및 평가 실시</li>
+                            </ul>
+                        </li>
+                        <li>– 물 재이용 정책 수행을 위해 BOOST-INN 180만 유로를 지원<br/>
+                            <ul className="list-inside space-y-2 text-[#767676] ml-4 mt-2">
+                                <li> *프랑스, 이탈리아, 스페인 등 유럽 선진국 솔루션 공유</li>
+                            </ul>
+                        </li>
+                    </ul>
+                </li>
+                <li>
+                •  EU산하 JRC(공동연구센터)에서 물 재이용 기술제공 지원<br />
+                    <ul className="list-inside space-y-2 text-[#767676] text-sm ml-4 mt-2">
+                        <li>‘물 재이용 회원 관리 실무 커뮤니티(Water Reuse Management Community of Practice)’ 시범사업 수행</li>
+                        <li>유럽 전역에 성공적인 모델 활용 및 혁신적인 물 재이용 솔루션을 확장할 수 있는 기술을 제공</li>
+                    </ul>
+                </li>
+            </ul>
+        </div>
+      </section>
+
+      <Hr className="my-11" />
+
+      {/* 특이사항 */}
+      <section className="pb-[200px]">
+        <SectionTitle>특이사항</SectionTitle>
+        <ul className="mt-6 space-y-4 pl-4 text-base text-gray-600">
+            <li>
+                <ul className="list-disc list-outside pl-6 space-y-1 leading-relaxed">
+                    <li>2019년 기준 EU 인구의 38%가 물 부족의 영향을 받을 것으로 예상됨. 이 흐름대로면 2030년까지 유럽 유역 전반에 물 부족 문제가 발생하게 될 것으로 예상. 인구 증가, 도시화의 확대, 염분화 및 기후변화들이 수자원 문제들의 주요 요인이며, 식습관 변화와 산업용수 수요 증가 등으로 악화되고 있는 상황</li>
+                </ul>
+            </li>
+            <li>
+                <ul className="list-disc list-outside pl-6 space-y-1 leading-relaxed">
+                    <li>유럽의 물 부족 상황은 지역에 따라 다르게 나타나 스페인을 비롯한 남부유럽 에서 특히 심각함. 전반적으로 북유럽에 비해 남유럽의 물 스트레스가 심하며, 특히 스페인과 포르투갈, 프랑스 동부지역의 물 스트레스가 심각함</li>
+                </ul>
+            </li>
+            <li>
+                <ul className="list-disc list-outside pl-6 space-y-1 leading-relaxed">
+                    <li>유럽 연합에서도 물 부족 문제를 인식하고 2000년 EU Water Framework Directive을 개발, 이후 2020년 재이용에 관한 법률을 제정</li>
+                </ul>
+            </li>
+        </ul>
+      </section>
+    </div>
+  );
+}

apps/dm/app/(landing)/reuse/business/globalCase/overview/page.tsx

@@ -0,0 +1,229 @@
+// apps/dm/app/(landing)/reuse/business/globalCase/overview/page.tsx
+"use client";
+
+import SubPageHeader from "../../../_components/SubPageHeader";
+import CaseImageSlider from "../../../_components/ImageSlider";
+
+function SectionTitle({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="flex items-center gap-3">
+      <span className="h-5 w-[3px] bg-sky-500" />
+      <h3 className="text-2xl font-bold text-neutral-900">{children}</h3>
+    </div>
+  );
+}
+
+type HrProps = {
+  className?: string;
+};
+
+function Hr({ className = "" }: HrProps) {
+  return <div className={`h-[2px] w-full bg-black/10 ${className}`} />;
+}
+
+// type ImgCardProps = {
+//   src: string;
+//   alt: string;
+// };
+
+// function ImgCard({ src, alt }: ImgCardProps) {
+//   return (
+//     <div className="w-full overflow-x-auto">
+//       <img
+//         src={src}
+//         alt={alt}
+//         className="block mx-auto max-w-none"
+//       />
+//     </div>
+//   );
+// }
+
+export default function GreywaterPage() {
+  return (
+    <div className="bg-white">  
+      <SubPageHeader
+        title="해외 재이용 사례 개요"
+        crumbs={[
+            { label: "Home", href: "/reuse" },
+            { label: "물 재이용 사례" },
+            { label: "해외 재이용 사례" },
+            { label: "사례개요", href: "/reuse/business/globalCase/overview" },
+        ]}
+        hideFooterLine
+        hideGuideText
+        wrapClassName="!pb-0"
+      /> 
+
+      <Hr className="my-7" />
+
+      {/* 슬라이드 이미지 영역 */}
+      <CaseImageSlider
+        className="mt-8"
+        maxWidthClassName="max-w-[760px]"
+        slides={[
+            { src: "/images/landing/business/globalCase/overview_01.png", alt: "해외 재이용 사례 1" },
+        ]}
+      />
+
+      <section className="mt-8">
+        <div className="rounded-md bg-[#e9f0f1] p-8">
+            <h3 className="text-xl font-bold text-gray-800 leading-relaxed">
+            2024년 하수도 통계 기준 15.6%이며,<br />
+            제2차 물 재이용 기본 계획을 고려한 2030년 목표는 <span className="font-extrabold">17%</span>
+            </h3>
+
+            {/* 진행 바 영역 */}
+            <div className="mt-6 space-y-4">
+            {/* 2024 */}
+            <div className="flex items-center gap-4">
+                <span className="text-sm text-gray-600">’24년도</span>
+                <div className="relative h-7 rounded-r-lg">
+                    <div className="h-7 w-[112px] rounded-r-lg bg-gray-400" />
+                </div>
+                <span className="text-sm text-gray-700">15.6%</span>
+            </div>
+
+            {/* 2030 */}
+            <div className="flex items-center gap-4">
+                <span className="text-sm text-gray-600">’30년도</span>
+                <div className="relative">
+                    <div className="h-10 w-[327px] rounded-r-lg bg-gradient-to-r from-sky-500 to-green-500" />
+                </div>
+                <span className="text-xl font-bold text-gray-900">17%</span>
+            </div>
+            </div>
+        </div>
+
+        {/* 설명 문구 */}
+        <ul className="mt-6 space-y-4 text-base text-gray-600">
+            <li>
+            • 우리나라의 하수 처리 재이용률은 <span className="text-sky-600 ">15% 수준</span>
+            </li>
+            <li>
+            • 대만은 가뭄과 공업용수 증가에 대응하여
+            <span className="text-sky-600 ">
+                {" "}현재 4.3% 수준이며, 16.5%까지 확대 계획 수립
+            </span>
+            </li>
+        </ul>
+
+        {/* 테이블 */}
+        <div className="mt-6">
+            <table className="w-full text-center text-sm">
+                <thead>
+                    <tr>
+                        <th className="bg-[#C2CAD2] px-4 py-3 text-black rounded-t-lg">국가</th>
+                        <th className="bg-sky-600 px-4 py-3 text-white rounded-t-lg">해외정보</th>
+                        <th className="bg-teal-500 px-4 py-3 text-white rounded-t-lg">현재</th>
+                        <th className="bg-green-500 px-4 py-3 text-white rounded-t-lg">미래(목표, 예측치)</th>
+                    </tr>
+                </thead>
+                <tbody className="bg-white border border-t-0">
+                    <tr className="border-t">
+                        <td className="px-4 py-3 font-medium">한국</td>
+                        <td className="px-4 py-3 bg-sky-50 text-gray-700">12.1%</td>
+                        <td className="px-4 py-3">15.6%</td>
+                        <td className="px-4 py-3  bg-sky-50 text-gray-700">17%</td>
+                    </tr>
+                    <tr className="border-t">
+                        <td className="px-4 py-3 font-medium">대만</td>
+                        <td className="px-4 py-3 bg-sky-50 text-gray-700">2.4%</td>
+                        <td className="px-4 py-3">4.3%</td>
+                        <td className="px-4 py-3  bg-sky-50 text-gray-700">16.5%</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+      </section>
+
+      <Hr className="my-11" />
+ 
+      {/* 주요 국가의 하수처리수 재이용률 (%) */}
+      <section className="pb-[200px]">
+        <SectionTitle>주요 국가의 하수처리수 재이용률 (%)</SectionTitle>
+        {/* 설명 문구 */}
+        <ul className="mt-6 space-y-4 text-base text-gray-600">
+            <li>
+            • 전 세계적으로 물 재이용은 호주, 유럽, 아프리카, 미국 등 가뭄이 잦거나 심각한 가뭄이 발생한 국가에서 많이 이루어짐
+            </li>
+            <li>
+            • 이스라엘, 쿠웨이트 등 중동 및 북아프리카 지역은 가용 수자원이 제한되어 있어 재이용량 비중도 매우 높은 편
+            </li>
+        </ul>
+        {/* 테이블 (2단 병렬: 좌/우 데이터) */}
+        <div className="mt-6">
+            <div className="overflow-x-auto">
+                <table className="min-w-[900px] w-full text-center text-sm">
+                    <thead>
+                        <tr>
+                        {/* 좌측 3컬럼 */}
+                        <th className="bg-[#C2CAD2] px-4 py-3 text-black rounded-t-lg">국가명</th>
+                        <th className="bg-sky-600 px-4 py-3 text-white rounded-t-lg">지역</th>
+                        <th className="bg-green-500 px-4 py-3 text-white rounded-t-lg">재이용률</th>
+
+                        {/* 우측 3컬럼 */}
+                        <th className="bg-[#C2CAD2] px-4 py-3 text-black rounded-t-lg">국가명</th>
+                        <th className="bg-sky-600 px-4 py-3 text-white rounded-t-lg">지역</th>
+                        <th className="bg-green-500 px-4 py-3 text-white rounded-t-lg">재이용률</th>
+                        </tr>
+                    </thead>
+
+                    <tbody className="bg-white border border-t-0">
+                        {[
+                        {
+                            L: { c: "이스라엘", r: "중동&북아프리카", v: "92.3" },
+                            R: { c: "튀르키예", r: "동유럽&중앙아시아", v: "26.6" },
+                        },
+                        {
+                            L: { c: "쿠웨이트", r: "중동&북아프리카", v: "89.3" },
+                            R: { c: "독일", r: "서유럽", v: "25.0" },
+                        },
+                        {
+                            L: { c: "호주", r: "동아시아&태평양", v: "49.0" },
+                            R: { c: "스페인", r: "서유럽", v: "24.4" },
+                        },
+                        {
+                            L: { c: "싱가포르", r: "동아시아&태평양", v: "44.4" },
+                            R: { c: "한국", r: "동아시아&태평양", v: "12.1" },
+                        },
+                        {
+                            L: { c: "그리스", r: "서유럽", v: "39.1" },
+                            R: { c: "미국", r: "북아메리카", v: "13.1" },
+                        },
+                        {
+                            L: { c: "사우디아라비아", r: "중동&북아프리카", v: "32.8" },
+                            R: { c: "프랑스", r: "서유럽", v: "9.5" },
+                        },
+                        {
+                            L: { c: "이탈리아", r: "서유럽", v: "31.7" },
+                            R: { c: "대만", r: "동아시아&태평양", v: "2.4" },
+                        },
+                        {
+                            L: { c: "룩셈부르크", r: "서유럽", v: "29.1" },
+                            R: { c: "일본", r: "동아시아&태평양", v: "0.8" },
+                        },
+                        {
+                            L: { c: "포르투갈", r: "서유럽", v: "29.0" },
+                            R: { c: "", r: "", v: "" }, // 마지막 우측은 빈칸(이미지처럼)
+                        },
+                        ].map((row, idx) => (
+                        <tr key={idx} className="border-t">
+                            {/* 좌측 */}
+                            <td className="px-4 py-3 font-medium text-gray-700">{row.L.c}</td>
+                            <td className="px-4 py-3 bg-sky-50 text-gray-700">{row.L.r}</td>
+                            <td className="px-4 py-3 bg-green-50  text-gray-700">{row.L.v}</td>
+
+                            {/* 우측 */}
+                            <td className="px-4 py-3 font-medium text-gray-700">{row.R.c}</td>
+                            <td className="px-4 py-3 bg-sky-50 text-gray-700">{row.R.r}</td>
+                            <td className="px-4 py-3 bg-green-50  text-gray-700">{row.R.v}</td>
+                        </tr>
+                        ))}
+                    </tbody>
+                </table>
+            </div>
+        </div>
+      </section>
+    </div>
+  );
+}

apps/dm/app/(landing)/reuse/business/globalCase/singapore/page.tsx

@@ -0,0 +1,172 @@
+// apps/dm/app/(landing)/reuse/business/globalCase/singapore/page.tsx
+"use client";
+
+import SubPageHeader from "../../../_components/SubPageHeader";
+import CaseImageSlider from "../../../_components/ImageSlider";
+
+function SectionTitle({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="flex items-center gap-3">
+      <span className="h-5 w-[3px] bg-sky-500" />
+      <h3 className="text-2xl font-bold text-neutral-900">{children}</h3>
+    </div>
+  );
+}
+
+type HrProps = {
+  className?: string;
+};
+
+function Hr({ className = "" }: HrProps) {
+  return <div className={`h-[2px] w-full bg-black/10 ${className}`} />;
+}
+
+// type ImgCardProps = {
+//   src: string;
+//   alt: string;
+// };
+
+// function ImgCard({ src, alt }: ImgCardProps) {
+//   return (
+//     <div className="w-full overflow-x-auto">
+//       <img
+//         src={src}
+//         alt={alt}
+//         className="block mx-auto max-w-none"
+//       />
+//     </div>
+//   );
+// }
+
+export default function GreywaterPage() {
+  return (
+    <div className="bg-white">  
+      <SubPageHeader
+        title="[싱가포르] 수요가 높은 산업의 물 재이용 의무화"
+        crumbs={[
+            { label: "Home", href: "/reuse" },
+            { label: "물 재이용 사례" },
+            { label: "해외 재이용 사례" },
+            { label: "싱가포르", href: "/reuse/business/globalCase/singapore" },
+        ]}
+        hideFooterLine 
+        hideGuideText
+        wrapClassName="!pb-0"
+      /> 
+
+      <Hr className="my-7" />
+
+      {/* 슬라이드 이미지 영역 */}
+      <CaseImageSlider
+        className="mt-8"
+        maxWidthClassName="max-w-[760px]"
+        slides={[
+            { src: "/images/landing/business/globalCase/singapore_01.png", alt: "싱가포르 사례 1" },
+        ]}
+      />
+      
+      {/* 싱가포르 NEWater 비중 확대 */}
+      <section className="mt-8">
+        <SectionTitle>싱가포르 NEWater 비중 확대</SectionTitle>
+        <div className="px-4 mt-6">
+            <ul className="mt-6 space-y-4 text-base text-gray-600">
+                <li>
+                • 2003년 공식 NEWater 공장을 가동했으며 신뢰확보를 위해 NEWater Visitor Center를 함께 건설
+                </li>
+                <li>
+                • NEWater 전체파이프 공급 → 반도체 공장에서 가장 많이 사용
+                </li>
+                <li>
+                • 2060년까지 NEWater 비중 55%까지 높이는 것이 싱가포르의 목표
+                </li>
+            </ul>
+        </div>
+      </section>
+
+      <Hr className="my-11" />
+ 
+      {/* 싱가포르 재이용수 의무화 및 지원정책 */}
+      <section className="mt-6">
+        <SectionTitle>싱가포르 재이용수 의무화 및 지원정책</SectionTitle>
+        <div className="px-4">
+            <ul className="mt-6 space-y-4 text-base text-gray-600">
+                <li>
+                • 공업용수 수요가 높은 산업에 대해 물 재이용을 의무화<br />
+                    <ul className="list-inside text-[#767676] text-sm ml-4 mt-2">
+                        <li>– 반도체업계 전체 비 재이용수(non-domestic용수) 17% 차지 → 공업용수 수요 원인</li>
+                        <li>– 2024년 1월 1일부터 연간 최소 60,000㎥를 소비하는 사업자는 재이용수 사용 의무화</li>
+                        <li>– 반도체 공장의 경우 최소 50% 이상의 재이용수를 요구함(현재는 43% 정도)</li>
+                    </ul>
+                </li>
+                <li>
+                • 재정 지원을 통해 재이용 활성화를 지원<br />
+                    <ul className="list-inside text-[#767676] text-sm ml-4 mt-2">
+                        <li>– 재이용 설비를 기준으로 2025년까지 싱가포르 수자원공사의 2가지 금융상품 제공<br/>
+                            <ul className="list-inside text-[#767676] ml-4 mt-2">
+                                <li>1. Water Efficiency Fund</li>
+                                <li>2. Industrial Water Solutions Demonstration Fund</li>
+                            </ul>
+                        </li>
+                        <li className="mt-2">– 2025년 기준 지원 한도 상향 → 물 재이용 활성 도모<br/>
+                            <ul className="list-inside text-[#767676] ml-4 mt-2">
+                                <li>투입비용 50% → 75% 지원 / WSDP: $400만 → $500만</li>
+                                <li>물 효율이 높은 장비를 도입하는 데에도 최대 $300만 지원 가능</li>
+                            </ul>
+                        </li>
+                    </ul>
+                </li>
+            </ul>
+        </div>
+      </section>
+
+      <Hr className="my-11" />
+
+      {/* 특이사항 */}
+      <section className="pb-[200px]">
+        <SectionTitle>특이사항</SectionTitle>
+        <ul className="mt-6 space-y-4 pl-4 text-base text-gray-600">
+            <li>
+                <ul className="list-disc list-outside pl-6 space-y-1 leading-relaxed">
+                    <li>싱가포르는 천연 수자원이 많지 않아, 말레이시아 조호르와 1962년 맺은 협약으로 물을 수입해왔으며, 재이용수를 늘리기 위한 노력을 계속하고 있음<br/>
+                        <ul className="list-inside text-[#767676] text-sm ml-4 mt-2">
+                            <li>- 싱가포르는 국토 내에 호수와 하천이적고 집수공간도 적어 빗물로 확보할 수 있는 수자원량은 전체 물 수요의 20%에 불과함</li>
+                        </ul>
+                    </li>
+                </ul>
+            </li>
+            <li>
+                <ul className="list-disc list-outside pl-6 space-y-1 leading-relaxed">
+                    <li>싱가포르는 도심에 저수지를 건설하 고 건물에 빗물이용시설을 건설하여 빗물을 재이용하고 있음</li>
+                </ul>
+            </li>
+            <li>
+                <ul className="list-disc list-outside pl-6 space-y-1 leading-relaxed">
+                    <li>싱가포르는 2002년부터 하수재이용수인 NEWater를 개발, 비음 용수와 간접음용수로 활용하고 있음<br/>
+                        <ul className="list-inside text-[#767676] text-sm/6 ml-4 mt-2">
+                            <li>- 재이용수를 NEWater라는 이름으로 명명하고 NEWater에 대한 신뢰 확보를 위해 NEWater 방문자 센터도 건설함</li>
+                            <li>- 비음용수로 많이 사용하며 건기에는 NEWater를 저수지에 추가하여 원수와 섞음. 원수는 상수도에서 처리 한 후 가정에 수돗물로 공급함</li>
+                            <li>- NEWater는 전용 파이프를 통해 주로 웨이퍼 제조 공장, 산업단지, 상업용 건물에서 산업 및 냉각수로 사용. 제일 많이 사용하는 곳은 웨이퍼 제조 공장</li>
+                        </ul>
+                    </li>
+                </ul>
+            </li>
+            <li>
+                <ul className="list-disc list-outside pl-6 space-y-1 leading-relaxed">
+                    <li>2024년 4월 기준 1㎥ 당 공업용수 가격은 $1.66이며, Non-domestic 기준 NEWater 가격은 $2.41</li>
+                </ul>
+            </li>
+            <li>
+                <ul className="list-disc list-outside pl-6 space-y-1 leading-relaxed">
+                    <li>공업용수 가격 $1.66은 수도요금(water tariff)과 수자원세(waterborne tax)로 구분됨. $1.66에는 $1만큼의 수자원세가 포함됨</li>
+                </ul>
+            </li>
+            <li>
+                <ul className="list-disc list-outside pl-6 space-y-1 leading-relaxed">
+                    <li>2023년 싱가포르는 산업용수 수요가 높은 산업에 대해 물 재 이용을 의무화했으며, 정부는 기금을 통해 물 재이용을 지원함</li>
+                </ul>
+            </li>
+        </ul>
+      </section>
+    </div>
+  );
+}

apps/dm/app/(landing)/reuse/business/globalCase/taiwan/page.tsx

@@ -0,0 +1,216 @@
+// apps/dm/app/(landing)/reuse/business/globalCase/taiwan/page.tsx
+"use client";
+
+import SubPageHeader from "../../../_components/SubPageHeader";
+import CaseImageSlider from "../../../_components/ImageSlider";
+
+function SectionTitle({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="flex items-center gap-3">
+      <span className="h-5 w-[3px] bg-sky-500" />
+      <h3 className="text-2xl font-bold text-neutral-900">{children}</h3>
+    </div>
+  );
+}
+
+type HrProps = {
+  className?: string;
+};
+
+function Hr({ className = "" }: HrProps) {
+  return <div className={`h-[2px] w-full bg-black/10 ${className}`} />;
+}
+
+// type ImgCardProps = {
+//   src: string;
+//   alt: string;
+// };
+
+// function ImgCard({ src, alt }: ImgCardProps) {
+//   return (
+//     <div className="w-full overflow-x-auto">
+//       <img
+//         src={src}
+//         alt={alt}
+//         className="block mx-auto max-w-none"
+//       />
+//     </div>
+//   );
+// }
+
+export default function GreywaterPage() {
+  return (
+    <div className="bg-white">  
+      <SubPageHeader
+        title="[대만] 국가 주도의 공업용수 공급"
+        crumbs={[
+            { label: "Home", href: "/reuse" },
+            { label: "물 재이용 사례" },
+            { label: "해외 재이용 사례" },
+            { label: "대만", href: "/reuse/business/globalCase/taiwan" },
+        ]}
+        hideFooterLine 
+        hideGuideText
+        wrapClassName="!pb-0"
+      /> 
+
+      <Hr className="my-7" />
+
+      {/* 슬라이드 이미지 영역 */}
+      <CaseImageSlider
+        className="mt-8"
+        maxWidthClassName="max-w-[760px]"
+        slides={[
+            { src: "/images/landing/business/globalCase/taiwan_01.png", alt: "대만 사례 1" },
+        ]}
+      />
+      
+      {/* 재생 수자원 개발법 제정(2015년제정, 2022개정) */}
+      <section className="mt-8">
+        <SectionTitle>재생 수자원 개발법 제정(2015년제정, 2022개정)</SectionTitle>
+        <div className="px-4">
+            <ul className="mt-6 space-y-2 text-base text-gray-600">
+                <li>
+                • 목적: 수자원 지속 가능성 향상, 재생 수자원 활용을 통해 물부족 문제 해결
+                </li>
+                <li>
+                • 내용: 재생 수자원 정의·분류, 이용 의무, 이용 제한, 수질 기준 등
+                </li>
+            </ul>
+            <div className="rounded-sm bg-[#e9f0f1] p-8 mt-5">
+                <ul className="space-y-1 text-2xl text-[#1A1A1A]">
+                    <li>
+                    – 제4조. 물 소비 계획에 따른 재이용수 이용 관련 내용 (일정 비율 재이용수 사용 규정)
+                    </li>
+                    <li>
+                    – 제5조. 재이용수의 운영자, 사용자 관련 내용 (지자체에서 하수 무상공급 제공 가능)
+                    </li>
+                    <li>
+                    – 제7조. 재이용수 이용 범위, 이용량 재이용수 수질 기준 내용 (식품, 제약산업 사용 불가)
+                    </li>
+                    <li>
+                    – 제8조. 재이용수 사업 주체, 책임 등에 관한 내용 (광역인 경우, 정부가 지자체 지정)
+                    </li>
+                </ul>
+            </div>
+        </div>
+      </section>
+
+      <Hr className="my-11" />
+ 
+      {/* 대만정부 하수재이용 사업 시행 */}
+      <section className="mt-6">
+        <SectionTitle>대만정부 하수재이용 사업 시행</SectionTitle>
+        <div className="px-4">
+            <ul className="mt-6 space-y-4 text-base text-gray-600">
+                <li>
+                • 대만은 물 재이용에 적극적이며 국가주도로 하수재이용 사업 시행(안핑)<br />
+                    <ul className="list-inside text-[#767676] ml-4 mt-2">
+                        <li>– 1,618억의 사업비 중 92% 국비, 지방비 8% 투입</li>
+                        <li>– 재이용수는 24km 관로로 타이난 TSMC로 공급</li>
+                    </ul>
+                </li>
+                <li>
+                • 안핑을 포함한 16건 공사 완료시 628,100 CMD 공급 가능
+                </li>
+                <li>
+                • 공급단가는 수질과 운영조건에 따라 다르게 책정
+                </li>
+            </ul>
+            {/* 테이블 (2단 병렬: 좌/우 데이터) */}
+            <div className="mt-3">
+                <div className="overflow-x-auto">
+                    <p className="text-center text-2xl py-2">〈대만 재이용 시설별 재이용수 공급단지〉</p>
+                    <table className="min-w-[900px] w-full text-center text-sm">
+                        <thead className="border">
+                            <tr>
+                                <th className="bg-[#C2CAD2] px-4 py-3 text-black">사업</th>
+                                <th className="bg-sky-600 px-4 py-3 text-white">가격(NTD/㎥)</th>
+                                <th className="bg-green-500 px-4 py-3 text-white">가격(원/㎥)</th>
+                            </tr>
+                        </thead>
+
+                        <tbody className="bg-white text-[#4F4F4F] border border-t-0">
+                            <tr className="border-t">
+                                <td className="px-4 py-3 bg-white">Fongshan(가오슝)</td>
+                                <td className="px-4 py-3  bg-[#EAF5F5]">23.39</td>
+                                <td className="px-4 py-3 bg-[#E7F4E2]">1,038원</td>
+                            </tr>
+                            <tr className="border-t">
+                                <td className="px-4 py-3 bg-white">Linhai(가오슝)</td>
+                                <td className="px-4 py-3  bg-[#EAF5F5]">19.28</td>
+                                <td className="px-4 py-3 bg-[#E7F4E2]">858원</td>
+                            </tr>
+                            <tr className="border-t">
+                                <td className="px-4 py-3 bg-white">Anping(타이난)</td>
+                                <td className="px-4 py-3  bg-[#EAF5F5]">38.28</td>
+                                <td className="px-4 py-3 bg-[#E7F4E2]">1,699원</td>
+                            </tr>
+                            <tr className="border-t">
+                                <td className="px-4 py-3 bg-white">Yongkang(타이난)</td>
+                                <td className="px-4 py-3  bg-[#EAF5F5]">23.67</td>
+                                <td className="px-4 py-3 bg-[#E7F4E2]">1,050원</td>
+                            </tr>
+                            <tr className="border-t">
+                                <td className="px-4 py-3 bg-white">Rende(타이난)</td>
+                                <td className="px-4 py-3  bg-[#EAF5F5]">28.26</td>
+                                <td className="px-4 py-3 bg-[#E7F4E2]">1,254원</td>
+                            </tr>
+                            <tr className="border-t">
+                                <td className="px-4 py-3 bg-white">Shuinan(타이중)</td>
+                                <td className="px-4 py-3  bg-[#EAF5F5]">15.00</td>
+                                <td className="px-4 py-3 bg-[#E7F4E2]">668원</td>
+                            </tr>
+                            <tr className="border-t">
+                                <td className="px-4 py-3 bg-white">Quaitou(가오슝)</td>
+                                <td className="px-4 py-3  bg-[#EAF5F5]">35.44</td>
+                                <td className="px-4 py-3 bg-[#E7F4E2]">1,573원</td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+        </div>
+      </section>
+
+      <Hr className="my-11" />
+
+      {/* 특이사항 */}
+      <section className="pb-[200px]">
+        <SectionTitle>특이사항</SectionTitle>
+        <ul className="mt-6 space-y-4 pl-4 text-base text-gray-600">
+            <li>
+                <ul className="list-disc list-outside pl-6 space-y-1 leading-relaxed">
+                    <li>대만은 풍부한 강수량에도, 지형적 특성으로 인해 수자원 확보에 어려움을 겪고 있으며, 대만 남부지역의 경우 우기와 건기 사이의 강수량 차이가 큼</li>
+                </ul>
+            </li>
+            <li>
+                <ul className="list-disc list-outside pl-6 space-y-1 leading-relaxed">
+                    <li>대만은 최근 심각한 가뭄이 여러 해에 걸쳐서 발생하고 있으며, 강수량 감소와 함께 대만 정부 주도하에 반도체 산업을 국가 핵심 산업으로 선정하고 반도체 산업 육성 계획을 세움. 그 결과, 2023년 파운드리 시장의 68.3%를 차지하는 반도체 강국으로 성장했으며 이로 인한 공업용수 수요가 크게 증가</li>
+                </ul>
+            </li>
+            <li>
+                <ul className="list-disc list-outside pl-6 space-y-1 leading-relaxed">
+                    <li>반도체 산업은 물 소비가 많아, 안정적인 용수공급이 매우 중요한데 현재 19개의 반도체 공장이 물이 부족한 대만 남부지역에 위치함. 2021년 가뭄 발생 당시, 산업단지 기업들도 용수 공급에 어려움을 겪음. 이는 대만 남부 지역의 물 부족, 물 분배 등에 대한 문제를 야기함</li>
+                </ul>
+            </li>
+            <li>
+                <ul className="list-disc list-outside pl-6 space-y-1 leading-relaxed">
+                    <li>대만 정부는 산업단지 기업들에게 2023년부터 물에 대한 추가요금 부과를 시작했으며, 농업용수에 대해서는 강력한 억제정책을 시행함. 안정적인 용수 공급을 위해서 정부와 기업에서 자체적으로 재이용수 시설에 대한 투자가 이루어지고 있음.</li>
+                </ul>
+            </li>
+            <li>
+                <ul className="list-disc list-outside pl-6 space-y-1 leading-relaxed">
+                    <li>대만은 2004년 기후변화로 인한 물 부족 상황을 해결하기 위해 수자원 보호 전략을 승인하고, 2015년 대만 환경부는 재생 수자원 개발법을 발표, 2022년에는 한 차례 개정</li>
+                </ul>
+            </li>
+            <li>
+                <ul className="list-disc list-outside pl-6 space-y-1 leading-relaxed">
+                    <li>대만은 물 소비량이 많은 산업(high water consuming industries)과 하수처리장(municipal wastewater treatment plants), 두 곳을 재이용수의 주요 공급원으로 계획</li>
+                </ul>
+            </li>
+        </ul>
+      </section>
+    </div>
+  );
+}

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

@@ -0,0 +1,16 @@
+// apps/dm/app/(landing)/reuse/business/layout.tsx
+
+import type { ReactNode } from "react";
+import Lnb from "../_components/Lnb";
+import { LNB_BUSINESS } from "../_constants/lnb";
+
+export default function BusinessLayout({ children }: { children: ReactNode }) {
+  return (
+    <div className="flex gap-0">
+      <Lnb title="사례" items={LNB_BUSINESS} />
+      <main className="flex-1 px-[100px] pt-[80px]">
+        {children}
+      </main>
+    </div>
+  );
+}

apps/dm/app/(landing)/reuse/business/rain/suwon/page.tsx

@@ -0,0 +1,93 @@
+// apps/dm/app/(landing)/reuse/business/rain/suwon/page.tsx
+"use client";
+
+import SubPageHeader from "../../../_components/SubPageHeader";
+import CaseImageSlider from "../../../_components/ImageSlider";
+
+function SectionTitle({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="flex items-center gap-3">
+      <span className="h-5 w-[3px] bg-sky-500" />
+      <h3 className="text-2xl font-bold text-neutral-900">{children}</h3>
+    </div>
+  );
+}
+
+type HrProps = {
+  className?: string;
+};
+
+function Hr({ className = "" }: HrProps) {
+  return <div className={`h-[2px] w-full bg-black/10 ${className}`} />;
+}
+
+// type ImgCardProps = {
+//   src: string;
+//   alt: string;
+// };
+
+// function ImgCard({ src, alt }: ImgCardProps) {
+//   return (
+//     <div className="w-full overflow-x-auto">
+//       <img
+//         src={src}
+//         alt={alt}
+//         className="block mx-auto max-w-none"
+//       />
+//     </div>
+//   );
+// }
+
+export default function GreywaterPage() {
+  return (
+    <div className="bg-white">  
+      <SubPageHeader
+        title="경기도 수원시 빗물이용과 중수도"
+        crumbs={[
+            { label: "Home", href: "/reuse" },
+            { label: "물 재이용 사례" },
+            { label: "빗물 재이용 사례" },
+            { label: "수원시", href: "/reuse/business/rain/suwon" },
+        ]}
+        hideFooterLine
+        hideGuideText
+        wrapClassName="!pb-0"
+      /> 
+
+      <Hr className="my-7" />
+
+      {/* 슬라이드 이미지 영역 */}
+      <CaseImageSlider
+        className="mt-8"
+        maxWidthClassName="max-w-[760px]"
+        slides={[
+            { src: "/images/landing/business/rain/rain_01.png", alt: "수원시 하수 재이용 1" },
+            { src: "/images/landing/business/rain/rain_02.png", alt: "수원시 하수 재이용 2" },
+            { src: "/images/landing/business/rain/rain_03.png", alt: "수원시 하수 재이용 3" },
+            { src: "/images/landing/business/rain/rain_04.png", alt: "수원시 하수 재이용 4" },
+        ]}
+      />
+
+      {/* 사업명 */}
+      <section className="mt-6">
+        <SectionTitle>사업명</SectionTitle>
+        <p className="mt-8 text-base text-gray-600">
+          경기도 수원시 빗물이용과 중수도
+        </p>
+      </section>
+
+      <Hr className="my-11" />
+
+      {/* 사업 방식 */}
+      <section className="pb-[200px]">
+        <SectionTitle>사업 방식</SectionTitle>
+        <p className="mt-8 text-base text-gray-600">
+          (빗물) 월드컵경기장 등 4개소에 노면 빗물분사시스템 및 빗물 공급기를 설치하여 혹서기 도시 열섬효과 및 도로 비산먼지 저감<br/>
+          ※ 시설 가동중 도로 노면 온도의 7.2 ~ 26.3℃ 감소 효과 확인(‘21.7월, 수원시청).<br/>  
+          다만, 가뭄기나 강우량이 적을 경우 빗물을 원활히 공급하기 다소 곤란<br/><br/>
+          - (중수도) 수원시청, 장안구청, 월드컵경기장에 빗물 연계 중수도를 화장실·조경용수 등으로 사용하여 수도요금 절감(연 7백~30백만원)
+        </p>
+      </section>
+    </div>
+  );
+}

apps/dm/app/(landing)/reuse/business/sewage/bolyeong/page.tsx

@@ -0,0 +1,111 @@
+// apps/dm/app/(landing)/reuse/business/sewage/bolyeong/page.tsx
+"use client";
+
+import SubPageHeader from "../../../_components/SubPageHeader";
+import CaseImageSlider from "../../../_components/ImageSlider";
+
+function SectionTitle({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="flex items-center gap-3">
+      <span className="h-5 w-[3px] bg-sky-500" />
+      <h3 className="text-2xl font-bold text-neutral-900">{children}</h3>
+    </div>
+  );
+}
+
+type HrProps = {
+  className?: string;
+};
+
+function Hr({ className = "" }: HrProps) {
+  return <div className={`h-[2px] w-full bg-black/10 ${className}`} />;
+}
+
+// type ImgCardProps = {
+//   src: string;
+//   alt: string;
+// };
+
+// function ImgCard({ src, alt }: ImgCardProps) {
+//   return (
+//     <div className="w-full overflow-x-auto">
+//       <img
+//         src={src}
+//         alt={alt}
+//         className="block mx-auto max-w-none"
+//       />
+//     </div>
+//   );
+// }
+
+export default function GreywaterPage() {
+  return (
+    <div className="bg-white">  
+      <SubPageHeader
+        title="충남보령 하수 재이용"
+        crumbs={[
+            { label: "Home", href: "/reuse" },
+            { label: "물 재이용 사례" },
+            { label: "하수 재이용 사례" },
+            { label: "충청남도 보령시", href: "/reuse/business/sewage/bolyeong" },
+        ]}
+        hideFooterLine
+        hideGuideText
+        wrapClassName="!pb-0"
+      /> 
+
+      <Hr className="my-7" />
+
+      {/* 슬라이드 이미지 영역 */}
+      <CaseImageSlider
+        className="mt-8"
+        maxWidthClassName="max-w-[760px]"
+        slides={[
+            { src: "/images/landing/business/sewage/bolyeong_01.png", alt: "보령시 하수 재이용 1" },
+        ]}
+      />
+
+      {/* 사업명 */}
+      <section className="mt-6">
+        <SectionTitle>사업명</SectionTitle>
+        <p className="mt-8 text-base text-gray-600">
+          충남 보령 하수재이용<br/>
+          : 보령·신보령화력발전소에 하루 1만톤의 탈황용수 공급을 위해 보령하수처리시설의 하수처리수 재이용 사업 추진
+        </p>
+      </section>
+
+      <Hr className="my-11" />
+
+      {/* 사업 방식 */}
+      <section className="mt-6">
+        <SectionTitle>사업 방식</SectionTitle>
+        <p className="mt-8 text-base text-gray-600">
+          2017년 한국환경공단과 사업대행 위 · 수탁 협약 체결 
+        </p>
+      </section>
+
+      {/* 사업 주요 내용 */}
+      <section className="mt-6">
+        <SectionTitle>사업 주요 내용</SectionTitle>
+        <p className="mt-8 text-base text-gray-600">
+          처리공정 : 전처리 UF + 후처리 RO<br/>
+          시설용량 : 1만m³/일<br/> 
+          관로 : 8.7km<br/>
+          사업비 : 315억원<br/>
+          위치: 충청남도 보령시 대청방조제로 322 일원
+        </p>
+      </section>
+
+      <Hr className="my-11" />  
+
+      {/* 특이사항 */}
+      <section className="pb-[200px]">
+        <SectionTitle>특이사항</SectionTitle>
+        <p className="mt-8 text-base text-gray-600">
+          국내 유일 하수재이용 공업용수 공급 재정사업으로 2016년 충남 서부권 가뭄 시 지역사회 기여 차원에서 기관간 MOU(환경부, 충청남도, 보령시, 한국중부발전㈜)를 바탕으로 추진 되어 경제성보다 공익성을 바탕으로<br/>
+          국가전력 기반시설의 안정적 운영 도모
+        </p>
+      </section>
+    </div>
+  );
+}

apps/dm/app/(landing)/reuse/business/sewage/cheongju/page.tsx

@@ -0,0 +1,94 @@
+// apps/dm/app/(landing)/reuse/business/sewage/cheongju/page.tsx
+"use client";
+
+import SubPageHeader from "../../../_components/SubPageHeader";
+import CaseImageSlider from "../../../_components/ImageSlider";
+
+function SectionTitle({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="flex items-center gap-3">
+      <span className="h-5 w-[3px] bg-sky-500" />
+      <h3 className="text-2xl font-bold text-neutral-900">{children}</h3>
+    </div>
+  );
+}
+
+type HrProps = {
+  className?: string;
+};
+
+function Hr({ className = "" }: HrProps) {
+  return <div className={`h-[2px] w-full bg-black/10 ${className}`} />;
+}
+
+// type ImgCardProps = {
+//   src: string;
+//   alt: string;
+// };
+
+// function ImgCard({ src, alt }: ImgCardProps) {
+//   return (
+//     <div className="w-full overflow-x-auto">
+//       <img
+//         src={src}
+//         alt={alt}
+//         className="block mx-auto max-w-none"
+//       />
+//     </div>
+//   );
+// }
+
+export default function GreywaterPage() {
+  return (
+    <div className="bg-white">  
+      <SubPageHeader
+        title="청주시 하수 재이용 시설"
+        crumbs={[
+            { label: "Home", href: "/reuse" },
+            { label: "물 재이용 사례" },
+            { label: "하수 재이용 사례" },
+            { label: "청주시", href: "/reuse/business/sewage/cheongju" },
+        ]}
+        hideFooterLine
+        hideGuideText
+        wrapClassName="!pb-0"
+      /> 
+
+      <Hr className="my-7" />
+
+      {/* 슬라이드 이미지 영역 */}
+      <CaseImageSlider
+        className="mt-8"
+        maxWidthClassName="max-w-[760px]"
+        slides={[
+            { src: "/images/landing/business/sewage/cheongju_01.png", alt: "청주시 하수 재이용 1" },
+        ]}
+      />
+
+      {/* 사업명 */}
+      <section className="mt-6">
+        <SectionTitle>사업명</SectionTitle>
+        <p className="mt-8 text-base text-gray-600">
+          청주시 하수 재이용 시설
+        </p>
+      </section>
+
+      <Hr className="my-11" />
+
+      {/* 사업 주요 내용 */}
+      <section className="pb-[200px]">
+        <SectionTitle>사업 주요 내용</SectionTitle>
+        <p className="mt-8 text-base text-gray-600">
+          청주시 하수처리수 재이용 민간투자사업(BTO)<br/>
+          공급량 : 35,000㎥/일<br/> 
+          공급관로 : 8.3㎞<br/>
+          사업비 : 622억원<br/>
+          수요처 : SK하이닉스 등 일반산업단지<br/>
+          지역 (위치) : 충청북도 청주시 흥덕구 가락리 135-9번지 일원<br/>
+          처리용량 : 35.000(m³/일)<br/>
+          적용기술 : 분리막 (UF : 전처리), (RO : 주처리)
+        </p>
+      </section>
+    </div>
+  );
+}

apps/dm/app/(landing)/reuse/business/sewage/guri/page.tsx

@@ -0,0 +1,148 @@
+// apps/dm/app/(landing)/reuse/business/sewage/guri/page.tsx
+"use client";
+
+import SubPageHeader from "../../../_components/SubPageHeader";
+import CaseImageSlider from "../../../_components/ImageSlider";
+
+function SectionTitle({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="flex items-center gap-3">
+      <span className="h-5 w-[3px] bg-sky-500" />
+      <h3 className="text-2xl font-bold text-neutral-900">{children}</h3>
+    </div>
+  );
+}
+
+type HrProps = {
+  className?: string;
+};
+
+function Hr({ className = "" }: HrProps) {
+  return <div className={`h-[2px] w-full bg-black/10 ${className}`} />;
+}
+
+// type ImgCardProps = {
+//   src: string;
+//   alt: string;
+// };
+
+// function ImgCard({ src, alt }: ImgCardProps) {
+//   return (
+//     <div className="w-full overflow-x-auto">
+//       <img
+//         src={src}
+//         alt={alt}
+//         className="block mx-auto max-w-none"
+//       />
+//     </div>
+//   );
+// }
+
+export default function GreywaterPage() {
+  return (
+    <div className="bg-white">  
+      <SubPageHeader
+        title="구리시 도로자동청소시스템"
+        crumbs={[
+            { label: "Home", href: "/reuse" },
+            { label: "물 재이용 사례" },
+            { label: "하수 재이용 사례" },
+            { label: "구리시", href: "/reuse/business/sewage/guri" },
+        ]}
+        hideFooterLine
+        hideGuideText
+        wrapClassName="!pb-0"
+      /> 
+
+      <Hr className="my-7" />
+
+      {/* 슬라이드 이미지 영역 */}
+      <CaseImageSlider
+        className="mt-8"
+        maxWidthClassName="max-w-[760px]"
+        slides={[
+            { src: "/images/landing/business/sewage/guri_01.png", alt: "구리시 도로자동청소시스템 1" },
+            { src: "/images/landing/business/sewage/guri_02.png", alt: "구리시 도로자동청소시스템 2" },
+        ]}
+      />
+
+      {/* 사업명 */}
+      <section className="mt-6">
+        <SectionTitle>사업명</SectionTitle>
+        <p className="mt-8 text-base text-gray-600">
+          구리시 도로자동청소시스템 설치사업
+        </p>
+      </section>
+
+      <Hr className="my-11" />
+
+      {/* 사업목적 */}
+      <section className="mt-6">
+        <SectionTitle>사업목적</SectionTitle>
+        <p className="mt-8 text-base text-gray-600">
+          고농도 미세먼지 발생 및 폭염의 급증에 따라 공공하수처리시설 발생 재이용수 일부를 도로자동청소시스템에 활용하여 미세먼지 저감 및 폭염 취약성 완화
+        </p>
+      </section>
+
+      <Hr className="my-11" />
+
+      {/* 사업 주요 내용 */}
+      <section className="mt-6">
+        <SectionTitle>사업 주요 내용</SectionTitle>
+        <p className="mt-8 text-base text-gray-600">
+          총사업비 : 61억원<br/>
+          위 치 : 구리시 경춘로 및 갈매중앙로 일대 등<br/> 
+          관 로 : 5.8km<br/>
+          공급계획<br/>
+        </p>
+      </section>
+
+      <Hr className="my-11" />
+
+      {/* 공급계획 */}
+      <section className="pb-[200px]">
+        <SectionTitle>공급계획</SectionTitle>
+        {/* 데이터 테이블 */}
+        <div className="overflow-x-auto mt-8">
+            <table className="w-full border border-[#E3E7EA] text-center">
+                <thead>
+                    <tr>
+                        <th className="bg-[#01ACE5] text-white font-semibold py-4 border border-gray-300">
+                        시설명
+                        </th>
+                        <th className="bg-[#33B5C8] text-white font-semibold py-4 border border-gray-300">
+                        재이용수 용도
+                        </th>
+                        <th className="bg-[#55BCA2] text-white font-semibold py-4 border border-gray-300">
+                        공급량(㎥/일) 
+                        </th>
+                        <th className="bg-[#6DBB4F] text-white font-semibold py-4 border border-gray-300">
+                        원수 
+                        </th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td
+                        className="bg-white py-6 border border-gray-300 text-gray-700"
+                        >
+                        도로자동청소시스템
+                        </td>
+                        <td className="bg-white py-6 border border-gray-300 text-gray-700">
+                        세척살수용수
+                        </td>
+                        <td className="bg-white py-6 border border-gray-300 text-gray-700">
+                        178
+                        </td>
+                        <td className="bg-white py-6 border border-gray-300 text-gray-700">
+                        구리 공공하수처리장 재이용수
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+      </section>
+
+    </div>
+  );
+}

apps/dm/app/(landing)/reuse/business/sewage/hwanggu/page.tsx

@@ -0,0 +1,173 @@
+// apps/dm/app/(landing)/reuse/business/sewage/hwanggu/page.tsx
+"use client";
+
+import SubPageHeader from "../../../_components/SubPageHeader";
+import CaseImageSlider from "../../../_components/ImageSlider";
+
+function SectionTitle({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="flex items-center gap-3">
+      <span className="h-5 w-[3px] bg-sky-500" />
+      <h3 className="text-2xl font-bold text-neutral-900">{children}</h3>
+    </div>
+  );
+}
+
+type HrProps = {
+  className?: string;
+};
+
+function Hr({ className = "" }: HrProps) {
+  return <div className={`h-[2px] w-full bg-black/10 ${className}`} />;
+}
+
+// type ImgCardProps = {
+//   src: string;
+//   alt: string;
+// };
+
+// function ImgCard({ src, alt }: ImgCardProps) {
+//   return (
+//     <div className="w-full overflow-x-auto">
+//       <img
+//         src={src}
+//         alt={alt}
+//         className="block mx-auto max-w-none"
+//       />
+//     </div>
+//   );
+// }
+
+export default function GreywaterPage() {
+  return (
+    <div className="bg-white">  
+      <SubPageHeader
+        title="수원시 황구지천 하천유지용수"
+        crumbs={[
+            { label: "Home", href: "/reuse" },
+            { label: "물 재이용 사례" },
+            { label: "하수 재이용 사례" },
+            { label: "수원시 황구지천", href: "/reuse/business/sewage/hwanggu" },
+        ]}
+        hideFooterLine
+        hideGuideText
+        wrapClassName="!pb-0"
+      /> 
+
+      <Hr className="my-7" />
+
+      {/* 슬라이드 이미지 영역 */}
+      <CaseImageSlider
+        className="mt-8"
+        maxWidthClassName="max-w-[760px]"
+        slides={[
+            { src: "/images/landing/business/sewage/hwanggu_01.png", alt: "수원시 황구지천 하수 재이용 1" },
+            { src: "/images/landing/business/sewage/hwanggu_02.png", alt: "수원시 황구지천 하수 재이용 2" },
+            { src: "/images/landing/business/sewage/hwanggu_03.png", alt: "수원시 황구지천 하수 재이용 3" },
+        ]}
+      />
+
+      {/* 사업명 */}
+      <section className="mt-6">
+        <SectionTitle>사업명</SectionTitle>
+        <p className="mt-8 text-base text-gray-600">
+          수원시 황수원시 황구지천 하수처리수 재이용사업
+        </p>
+      </section>
+
+      <Hr className="my-11" />
+
+      {/* 사업목적 */}
+      <section className="mt-6">
+        <SectionTitle>사업목적</SectionTitle>
+        <p className="mt-8 text-base text-gray-600">
+          황구지천 공공하수처리시설 하수처리수 재이용사업으로 향후 호매실천 및 금곡천 건천화 방지로 주민들에게 친수 공간 제공 및 하천 생태계 보전
+        </p>
+      </section>
+
+      <Hr className="my-11" />
+
+      {/* 사업 주요 내용 */}
+      <section className="mt-6">
+        <SectionTitle>사업 주요 내용</SectionTitle>
+        <p className="mt-8 text-base text-gray-600">
+          총사업비 : 110억원<br/>
+          위 치 : 수원시 권선구 호매실천, 금곡천<br/> 
+          관 로 : 3.9km<br/>
+          공 급 량 : 25,000㎥/일(하수처리시설 용량: 45,000㎥/일)<br/>
+        </p>
+      </section>
+
+      <Hr className="my-11" />
+
+      {/* 공급계획 */}
+      <section className="pb-[200px]">
+        <SectionTitle>공급계획</SectionTitle>
+        {/* 데이터 테이블 */}
+        <div className="overflow-x-auto mt-8">
+            <table className="w-full border border-[#E3E7EA] text-center">
+                <thead>
+                <tr>
+                    {/* 구분 */}
+                    <th className="w-1/4 bg-[#E3E7EA] text-black font-semibold py-4 border border-gray-300">
+                    구분
+                    </th>
+
+                    {/* 공급량 */}
+                    <th className="w-2/4 bg-[#1FA3C6] text-white font-semibold py-4 border border-gray-300">
+                    공급량
+                    </th>
+
+                    {/* 비고 */}
+                    <th className="w-2/4 bg-[#72B84F] text-white font-semibold py-4 border border-gray-300">
+                    비고
+                    </th>
+                </tr>
+                </thead>
+
+                <tbody>
+                <tr>
+                    {/* 좌측 병합 */}
+                    <td
+                    rowSpan={3}
+                    className="bg-white font-medium text-gray-700 border border-gray-300"
+                    >
+                    하천 등 유지용수
+                    </td>
+
+                    <td className="bg-white py-6 border border-gray-300 text-gray-700 text-lg font-medium">
+                    12,500m³/일
+                    </td>
+
+                    <td className="bg-white py-6 border border-gray-300 text-gray-700">
+                    호매실천 공급
+                    </td>
+                </tr>
+
+                <tr>
+                    <td className="bg-white py-6 border border-gray-300 text-gray-700 text-lg font-medium">
+                    6,250m³/일
+                    </td>
+
+                    <td className="bg-white py-6 border border-gray-300 text-gray-700">
+                    금곡천1 공급
+                    </td>
+                </tr>
+
+                <tr>
+                    <td className="bg-white py-6 border border-gray-300 text-gray-700 text-lg font-medium">
+                    6,250m³/일
+                    </td>
+
+                    <td className="bg-white py-6 border border-gray-300 text-gray-700">
+                    금곡천2 공급
+                    </td>
+                </tr>
+                </tbody>
+            </table>
+        </div>
+      </section>
+
+    </div>
+  );
+}

apps/dm/app/(landing)/reuse/business/sewage/paju/page.tsx

@@ -0,0 +1,112 @@
+// apps/dm/app/(landing)/reuse/business/sewage/paju/page.tsx
+"use client";
+
+import SubPageHeader from "../../../_components/SubPageHeader";
+import CaseImageSlider from "../../../_components/ImageSlider";
+
+function SectionTitle({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="flex items-center gap-3">
+      <span className="h-5 w-[3px] bg-sky-500" />
+      <h3 className="text-2xl font-bold text-neutral-900">{children}</h3>
+    </div>
+  );
+}
+
+type HrProps = {
+  className?: string;
+};
+
+function Hr({ className = "" }: HrProps) {
+  return <div className={`h-[2px] w-full bg-black/10 ${className}`} />;
+}
+
+// type ImgCardProps = {
+//   src: string;
+//   alt: string;
+// };
+
+// function ImgCard({ src, alt }: ImgCardProps) {
+//   return (
+//     <div className="w-full overflow-x-auto">
+//       <img
+//         src={src}
+//         alt={alt}
+//         className="block mx-auto max-w-none"
+//       />
+//     </div>
+//   );
+// }
+
+export default function GreywaterPage() {
+  return (
+    <div className="bg-white">  
+      <SubPageHeader
+        title="경기도 파주시 하수 재이용"
+        crumbs={[
+            { label: "Home", href: "/reuse" },
+            { label: "물 재이용 사례" },
+            { label: "하수 재이용 사례" },
+            { label: "파주시", href: "/reuse/business/sewage/paju" },
+        ]}
+        hideFooterLine
+        hideGuideText
+        wrapClassName="!pb-0"
+      /> 
+
+      <Hr className="my-7" />
+
+      {/* 슬라이드 이미지 영역 */}
+      <CaseImageSlider
+        className="mt-8"
+        maxWidthClassName="max-w-[760px]"
+        slides={[
+            { src: "/images/landing/business/sewage/paju_01.png", alt: "파주시 하수 재이용 1" },
+        ]}
+      />
+
+      {/* 사업명 */}
+      <section className="mt-6">
+        <SectionTitle>사업명</SectionTitle>
+        <p className="mt-8 text-base text-gray-600">
+          경기도 파주시 하수재이용<br/>
+          : 운정·금촌하수처리시설의 하수처리수를 막공법(U/F, R/O)으로 재처리하여 파주 LCD 산업단지내 3개 업체*에 공업용수 공급<br/>
+          *LG디스플레이(P10공장), 희성전자, 엔비텍 등
+        </p>
+      </section>
+
+      <Hr className="my-11" />
+
+      {/* 사업 배경 및 목적 */}
+      <section className="mt-6">
+        <SectionTitle>사업 배경 및 목적</SectionTitle>
+        <p className="mt-8 text-base text-gray-600">
+          민간투자사업(시행사 : 파주그린허브(주), 운영사 : 테크로스) 
+        </p>
+      </section>
+
+      {/* 사업 주요 내용 */}
+      <section className="mt-6">
+        <SectionTitle>사업 주요 내용</SectionTitle>
+        <p className="mt-8 text-base text-gray-600">
+          처리공정 : 전처리 UF + 후처리 RO<br/>
+          공급량 : 4만m³/일<br/> 
+          관로 : 13.6km<br/>
+          사업비 : 651억원<br/>
+          위치 : 경기도 파주시 금촌동 714번지 일원<br/>
+          시설용량 :  41,20m³/일
+        </p>
+      </section>
+
+      <Hr className="my-11" />  
+
+      {/* 특이사항 */}
+      <section className="pb-[200px]">
+        <SectionTitle>특이사항</SectionTitle>
+        <p className="mt-8 text-base text-gray-600">
+          하수처리수 재이용시설 자체 농축폐수 처리공정 개발 및 적용 성공사례
+        </p>
+      </section>
+    </div>
+  );
+}

apps/dm/app/(landing)/reuse/business/sewage/yeosu/page.tsx

@@ -0,0 +1,101 @@
+// apps/dm/app/(landing)/reuse/business/sewage/yeosu/page.tsx
+"use client";
+
+import SubPageHeader from "../../../_components/SubPageHeader";
+import CaseImageSlider from "../../../_components/ImageSlider";
+
+function SectionTitle({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="flex items-center gap-3">
+      <span className="h-5 w-[3px] bg-sky-500" />
+      <h3 className="text-2xl font-bold text-neutral-900">{children}</h3>
+    </div>
+  );
+}
+
+type HrProps = {
+  className?: string;
+};
+
+function Hr({ className = "" }: HrProps) {
+  return <div className={`h-[2px] w-full bg-black/10 ${className}`} />;
+}
+
+// type ImgCardProps = {
+//   src: string;
+//   alt: string;
+// };
+
+// function ImgCard({ src, alt }: ImgCardProps) {
+//   return (
+//     <div className="w-full overflow-x-auto">
+//       <img
+//         src={src}
+//         alt={alt}
+//         className="block mx-auto max-w-none"
+//       />
+//     </div>
+//   );
+// }
+
+export default function GreywaterPage() {
+  return (
+    <div className="bg-white">  
+      <SubPageHeader
+        title="여수시 하수처리수 재이용 민간투자사업(BTO)"
+        crumbs={[
+            { label: "Home", href: "/reuse" },
+            { label: "물 재이용 사례" },
+            { label: "하수 재이용 사례" },
+            { label: "여수시", href: "/reuse/business/sewage/yeosu" },
+        ]}
+        hideFooterLine
+        hideGuideText
+        wrapClassName="!pb-0"
+      /> 
+
+      <Hr className="my-7" />
+
+      {/* 슬라이드 이미지 영역 */}
+      <CaseImageSlider
+        className="mt-8"
+        maxWidthClassName="max-w-[760px]"
+        slides={[
+            { src: "/images/landing/business/sewage/yeosu_01.png", alt: "여수시 하수 재이용 1" },
+        ]}
+      />
+
+      {/* 사업명 */}
+      <section className="mt-6">
+        <SectionTitle>사업명</SectionTitle>
+        <p className="mt-8 text-base text-gray-600">
+          여수시 하수처리수 재이용 민간 투자사업(BTO)
+        </p>
+      </section>
+
+      <Hr className="my-11" />
+
+      {/* 사업 목적 */}
+      <section className="mt-6">
+        <SectionTitle>사업 목적</SectionTitle>
+        <p className="mt-8 text-base text-gray-600">
+          수요자가 원하는 양질의 공업용수를 저렴하게 곰급하여 한정된 수자원의 효율적 이용 및 지역적 물 부족 해소, 하수재이용을 통한 오염총량 저감 및 방류수역 수질개선 
+        </p>
+      </section>
+
+      {/* 사업 주요 내용 */}
+      <section className="pb-[200px]">
+        <SectionTitle>사업 주요 내용</SectionTitle>
+        <p className="mt-8 text-base text-gray-600">
+          총사업비 : GS칼텍스, YNCC(주) 등 750억원<br/>
+          시행사 : 여수그린허브(주)<br/> 
+          운영사 : 테크로스<br/>
+          위치: 여수시 신월로 2844일원 (여수 하수처리시설 부지 내)<br/>
+          처리공법 : 전처리시설(MF) + 주처리시설(RO)<br/>
+          시설용량 및 공급량 : 5만m³/일<br/>
+          관로 : 18.6km
+        </p>
+      </section>
+    </div>
+  );
+}