feat: 펌프장 검색 추가

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

.gitignore

@@ -25,4 +25,6 @@ apps/fo/.next/**/*
 pnpm-lock.yaml
 settings.json
 .npmrc
-.cursor
+.cursor
+
+apps/**/tsconfig.tsbuildinfo

.husky/pre-push

@@ -0,0 +1,3 @@
+#!/bin/sh
+BRANCH=$(git rev-parse --abbrev-ref HEAD)
+pnpm turbo run build --filter="...[origin/$BRANCH]"

apps/_template/.env.example

@@ -0,0 +1,5 @@
+# apps/as/shared/config/env.ts 참고
+NEXT_PUBLIC_PORT=
+NEXT_PUBLIC_PROXY_HOST=
+NEXT_PUBLIC_SITE_ID=
+NEXT_PUBLIC_SERVER_API_URL=

apps/_template/.eslintrc.json

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

apps/_template/.gitignore

@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

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.4.0",
+    "postcss": "^8.4.49",
+    "prettier": "^3.4.2",
+    "prettier-plugin-tailwindcss": "^0.6.11",
+    "steiger": "^0.5.11",
+    "tailwindcss": "^3.4.14",
+    "typescript": "^5.7.2"
+  }
+}

apps/_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/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/dm_new/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_new/app/(landing)/reuse/_components/SubPageHeader.tsx

@@ -19,10 +19,10 @@ export default function SubPageHeader({
   title,
   crumbs,
   note = "* 는 필수 값입니다.",
-  underlineWidthClass = "w-40",
+  // underlineWidthClass = "w-40",
   className = "",
   wrapClassName = "",
-  hideFooterLine = false,
+  // hideFooterLine = false,
   hideGuideText = false,
 }: Props) {
   return (

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

@@ -80,7 +80,8 @@ function DemandLoginModal({ open, onClose, onSuccess }: LoginModalProps) {
     if (noWorker) {
       setWorkerNo("");
       setErrors((p) => {
-        const { workerNo: _w, ...rest } = p;
+        const { ...rest } = p;
+        delete rest.workerNo;
         return rest;
       });
     }

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

@@ -2,7 +2,7 @@
 import type { LnbItem } from "../_components/Lnb";
 
 export const LNB_DEMAND: LnbItem[] = [
-  { href: "/reuse/apply/place", label: "수요처등록" },
+  { href: "/reuse/apply/place", label: "수요처" },
   { href: "/reuse/apply/register", label: "수요정보등록" },
   { href: "/reuse/apply/status", label: "수요신청현황" },
 ];

apps/dm_new/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-[1400px] 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_new/app/(landing)/reuse/apply/place/page.tsx

@@ -1,8 +1,11 @@
 // 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";
@@ -75,9 +78,7 @@ function FormRow({
       </div>
 
       {/* 입력(우측) */}
-      <div className="col-span-12 lg:col-span-10 px-6 py-6">
-        {children}
-      </div>
+      <div className="col-span-12 lg:col-span-10 px-6 py-6">{children}</div>
     </div>
   );
 }
@@ -145,6 +146,25 @@ function SelectBox<T extends string>({
 }
 
 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>("");
 
@@ -153,10 +173,6 @@ export default function DemandPlaceRegisterPage() {
   const [workerNo, setWorkerNo] = useState("");
   const [noWorkerNo, setNoWorkerNo] = useState(false);
 
-  const [zip, setZip] = useState("");
-  const [addr1, setAddr1] = useState("");
-  const [addr2, setAddr2] = useState("");
-
   const [tel, setTel] = useState("");
   const [pw, setPw] = useState("");
   const [pw2, setPw2] = useState("");
@@ -222,11 +238,7 @@ export default function DemandPlaceRegisterPage() {
 
         <FormRow label="회사명" required>
           <div className="max-w-[420px]">
-            <TextInput
-              value={company}
-              onChange={setCompany}
-              placeholder="회사명을 입력해주세요."
-            />
+            <TextInput value={company} onChange={setCompany} placeholder="회사명을 입력해주세요." />
           </div>
         </FormRow>
 
@@ -234,11 +246,7 @@ export default function DemandPlaceRegisterPage() {
 
         <FormRow label="사업자등록번호" required>
           <div className="max-w-[420px]">
-            <TextInput
-              value={bizNo}
-              onChange={setBizNo}
-              placeholder="사업자 등록번호를 입력해주세요."
-            />
+            <TextInput value={bizNo} onChange={setBizNo} placeholder="사업자 등록번호를 입력해주세요." />
           </div>
         </FormRow>
 
@@ -278,21 +286,24 @@ export default function DemandPlaceRegisterPage() {
               <div className="w-[180px]">
                 <TextInput value={zip} onChange={setZip} placeholder="우편번호" />
               </div>
+
               <button
                 type="button"
-                onClick={() => alert("우편번호 검색(샘플)")}
-                className="h-11 rounded bg-[#888] px-4 text-base text-white hover:bg-neutral-700"
+                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="상세 주소를 입력하세요."
-            />
+
+            {/* ✅ 상세주소는 사용자 입력 */}
+            <TextInput value={addr2} onChange={setAddr2} placeholder="상세 주소를 입력하세요." />
+
+            {/* (선택) 지번주소도 보여주고 싶으면 */}
+            {/* {jibun ? <p className="text-xs text-neutral-500">지번: {jibun}</p> : null} */}
           </div>
         </FormRow>
 
@@ -300,11 +311,7 @@ export default function DemandPlaceRegisterPage() {
 
         <FormRow label="전화번호" required>
           <div className="max-w-[420px]">
-            <TextInput
-              value={tel}
-              onChange={setTel}
-              placeholder="전화번호를 입력하세요."
-            />
+            <TextInput value={tel} onChange={setTel} placeholder="전화번호를 입력하세요." />
           </div>
         </FormRow>
 
@@ -312,12 +319,7 @@ export default function DemandPlaceRegisterPage() {
 
         <FormRow label="비밀번호" required>
           <div className="max-w-[420px]">
-            <TextInput
-              value={pw}
-              onChange={setPw}
-              placeholder="비밀번호를 입력하세요."
-              type="password"
-            />
+            <TextInput value={pw} onChange={setPw} placeholder="비밀번호를 입력하세요." type="password" />
           </div>
         </FormRow>
 
@@ -345,6 +347,9 @@ export default function DemandPlaceRegisterPage() {
           수요처 등록
         </button>
       </div>
+
+      {/* ✅ 모달 */}
+      <PostcodeModal open={open} onClose={() => setOpen(false)} onSelect={handleSelect} />
     </main>
   );
-}
+}

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

@@ -4,6 +4,7 @@
 import { useMemo, useState, useRef } from "react";
 import SubPageHeader from "../../_components/SubPageHeader";
 import WaterQualityRefModal from "../modal/WaterQualityRefModal";
+import CandidateSiteModal, { type CandidateSite } from "../modal/CandidateSiteModal";
 
 type PHRange = { min: string; max: string };
 
@@ -18,6 +19,9 @@ export default function DemandRegisterPage() {
 
   const [openRef, setOpenRef] = useState(false);
 
+  const [openCand, setOpenCand] = useState(false);
+  const [selectedCands, setSelectedCands] = useState<CandidateSite[]>([]);
+
   // 기본정보
   const [reqDate, setReqDate] = useState<string>(today);
   const [reqQty, setReqQty] = useState<string>("");
@@ -251,10 +255,7 @@ export default function DemandRegisterPage() {
                                 <button
                                     type="button"
                                     className="h-11 rounded-md bg-[#888] px-5 text-base text-white hover:bg-neutral-700"
-                                    onClick={() => {
-                                    // TODO: 후보지 조회 모달/검색 연결
-                                    console.log("후보지 조회", { cand1, cand2, cand3 });
-                                    }}
+                                    onClick={() => setOpenCand(true)}
                                 >
                                     후보지 조회
                                 </button>
@@ -290,6 +291,22 @@ export default function DemandRegisterPage() {
 
             </div>
         </main>
+
+        <CandidateSiteModal
+            open={openCand}
+            onClose={() => setOpenCand(false)}
+            initialSelected={selectedCands}
+            onApply={(list) => {
+                setSelectedCands(list);
+
+                // ✅ cand1~3 입력칸에 반영(시설명만 넣는 버전)
+                setCand1(list[0]?.name ?? "");
+                setCand2(list[1]?.name ?? "");
+                setCand3(list[2]?.name ?? "");
+
+                setOpenCand(false);
+            }}
+        />
     </>
   );
 }

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

@@ -262,7 +262,16 @@ export default function DemandStatusPage() {
 
             {/* 상세현황 */}
             <section className="mt-10 pb-16" ref={detailRef}>
-            <div className="text-2xl font-bold text-slate-700">수요신청 상세현황</div>
+
+                <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">

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

@@ -21,22 +21,22 @@ function Hr({ className = "" }: HrProps) {
   return <div className={`h-[2px] w-full bg-black/10 ${className}`} />;
 }
 
-type ImgCardProps = {
-  src: string;
-  alt: string;
-};
+// 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>
-  );
-}
+// 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 (

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

@@ -21,22 +21,22 @@ function Hr({ className = "" }: HrProps) {
   return <div className={`h-[2px] w-full bg-black/10 ${className}`} />;
 }
 
-type ImgCardProps = {
-  src: string;
-  alt: string;
-};
+// 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>
-  );
-}
+// 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 (

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

@@ -21,22 +21,22 @@ function Hr({ className = "" }: HrProps) {
   return <div className={`h-[2px] w-full bg-black/10 ${className}`} />;
 }
 
-type ImgCardProps = {
-  src: string;
-  alt: string;
-};
+// 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>
-  );
-}
+// 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 (

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

@@ -21,22 +21,22 @@ function Hr({ className = "" }: HrProps) {
   return <div className={`h-[2px] w-full bg-black/10 ${className}`} />;
 }
 
-type ImgCardProps = {
-  src: string;
-  alt: string;
-};
+// 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>
-  );
-}
+// 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 (

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

@@ -21,22 +21,22 @@ function Hr({ className = "" }: HrProps) {
   return <div className={`h-[2px] w-full bg-black/10 ${className}`} />;
 }
 
-type ImgCardProps = {
-  src: string;
-  alt: string;
-};
+// 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>
-  );
-}
+// 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 (

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

@@ -21,22 +21,22 @@ function Hr({ className = "" }: HrProps) {
   return <div className={`h-[2px] w-full bg-black/10 ${className}`} />;
 }
 
-type ImgCardProps = {
-  src: string;
-  alt: string;
-};
+// 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>
-  );
-}
+// 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 (

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

@@ -21,22 +21,22 @@ function Hr({ className = "" }: HrProps) {
   return <div className={`h-[2px] w-full bg-black/10 ${className}`} />;
 }
 
-type ImgCardProps = {
-  src: string;
-  alt: string;
-};
+// 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>
-  );
-}
+// 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 (

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

@@ -21,22 +21,22 @@ function Hr({ className = "" }: HrProps) {
   return <div className={`h-[2px] w-full bg-black/10 ${className}`} />;
 }
 
-type ImgCardProps = {
-  src: string;
-  alt: string;
-};
+// 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>
-  );
-}
+// 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 (

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

@@ -21,22 +21,22 @@ function Hr({ className = "" }: HrProps) {
   return <div className={`h-[2px] w-full bg-black/10 ${className}`} />;
 }
 
-type ImgCardProps = {
-  src: string;
-  alt: string;
-};
+// 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>
-  );
-}
+// 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 (

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

@@ -21,22 +21,22 @@ function Hr({ className = "" }: HrProps) {
   return <div className={`h-[2px] w-full bg-black/10 ${className}`} />;
 }
 
-type ImgCardProps = {
-  src: string;
-  alt: string;
-};
+// 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>
-  );
-}
+// 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 (

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

@@ -21,22 +21,22 @@ function Hr({ className = "" }: HrProps) {
   return <div className={`h-[2px] w-full bg-black/10 ${className}`} />;
 }
 
-type ImgCardProps = {
-  src: string;
-  alt: string;
-};
+// 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>
-  );
-}
+// 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 (

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

@@ -21,22 +21,22 @@ function Hr({ className = "" }: HrProps) {
   return <div className={`h-[2px] w-full bg-black/10 ${className}`} />;
 }
 
-type ImgCardProps = {
-  src: string;
-  alt: string;
-};
+// 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>
-  );
-}
+// 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 (

apps/dm_new/app/(landing)/reuse/intro/rain/page.tsx

@@ -65,12 +65,33 @@ export default function RainwaterReusePage() {
       <Hr className="my-11" />
 
       {/* 2) 빗물이용시설 설치 관리 법적 의무 대상 */}
-      <section className="pb-[200px]">
+      <section className="mt-6">
         <SectionTitle>빗물이용시설 설치 관리 법적 의무 대상</SectionTitle>
         <div className="mt-8">
           <ImgCard src="/images/landing/intro/rainreuse_mandatory.png" alt="법적 의무 대상 설명" />
         </div>
       </section>
+
+      <Hr className="my-11" />
+
+      {/* 3) 빗물이용시설 설계 방안 */}
+      <section className="mt-6">
+        <SectionTitle>빗물이용시설 설계 방안</SectionTitle>
+        <div className="mt-8">
+          <ImgCard src="/images/landing/intro/rainwater_design.png" alt="빗물이용시설 설계 방안 설명" />
+        </div>
+      </section>
+
+      <Hr className="my-11" />
+
+      {/* 4) 빗물이용시설 시설기준 및 관리기준 */}
+      <section className="pb-[200px]">
+        <SectionTitle>빗물이용시설 시설기준 및 관리기준</SectionTitle>
+        <div className="mt-8">
+          <ImgCard src="/images/landing/intro/rainwater_standards.png" alt="빗물이용시설 시설기준 및 관리기준 설명" />
+        </div>
+      </section>
+
     </div>
   );
 }

apps/dm_new/app/(landing)/reuse/layout.tsx

@@ -1,6 +1,6 @@
 // apps/dm/app/(landing)/reuse/layout.tsx
 import "./reuse.module.css";
-import type { ReactNode } from "react";
+// import type { ReactNode } from "react";
 import TopNav from "./_components/TopNav";
 
 export default function ReuseLandingLayout({ children }: { children: React.ReactNode }) {

apps/dm_new/app/(with-layout)/apply/dmdco/page.tsx

@@ -1,7 +1,9 @@
 "use client";
 
-import { useEffect, useMemo, useState, type ReactNode } from "react";
+import { useEffect, useMemo, useRef, useState, type ReactNode, type RefObject } from "react";
 import SubPageHeader from "@/components/SubPageHeader";
+import PostcodeModal from "@/components/PostcodeModal";
+import type { AddrItem } from "@/app/store/sdmMng/postcode-service";
 import { useDmStore } from "@/app/store";
 import { fetchType, getFetch, postFetch, putFetch } from "@/components/ui/api";
 import { getCookie } from "@common/components/lib";
@@ -11,6 +13,7 @@ type Option = { value: string; label: string };
 type SessionUser = {
   dmdInfoId?: string;
   dmdCoNm?: string;
+  zip?: string;
   daddr?: string;
   telno?: string;
   ctpvCd?: string;
@@ -21,6 +24,42 @@ type SessionUser = {
 
 const TOKEN_ID_COOKIE = "token-id";
 const FALLBACK_UUID = "c475824c-0e82-4a06-a282-2b55a20df265";
+const normalizeRegionName = (value: string) => value.replace(/\s+/g, "").trim();
+const isSameRegionName = (left: string, right: string) => {
+  const a = normalizeRegionName(left);
+  const b = normalizeRegionName(right);
+  return Boolean(a && b && (a === b || a.includes(b) || b.includes(a)));
+};
+const formatKoreanPhoneNumber = (value: string) => {
+  const digits = value.replace(/\D/g, "").slice(0, 11); // 숫자만 추출하고 최대 11자리까지만 사용
+  if (!digits) return ""; // 입력이 비어 있으면 빈 문자열 반환
+
+  if (/^1\d{0,7}$/.test(digits)) { // 15xx/16xx/18xx 같은 대표번호 패턴
+    if (digits.length <= 4) return digits; // 아직 뒷자리가 부족하면 원문 유지
+    return `${digits.slice(0, 4)}-${digits.slice(4, 8)}`; // xxxx-xxxx
+  }
+
+  if (digits.startsWith("02")) { // 서울 지역번호(02)
+    const rest = digits.slice(2); // 국번/가입자번호 구간
+    if (!rest) return "02"; // 02만 입력된 상태
+    if (rest.length <= 3) return `02-${rest}`; // 02-xxx
+    if (rest.length <= 7) return `02-${rest.slice(0, 3)}-${rest.slice(3)}`; // 02-xxx-xxxx
+    return `02-${rest.slice(0, 4)}-${rest.slice(4, 8)}`; // 02-xxxx-xxxx
+  }
+
+  if (digits.startsWith("0")) { // 02 제외 일반 지역번호/휴대폰(010 포함)
+    const area = digits.slice(0, 3); // 앞 3자리 식별자
+    const rest = digits.slice(3); // 나머지 번호
+    if (!rest) return area; // 식별자만 입력된 상태
+    if (rest.length <= 3) return `${area}-${rest}`; // 0xx-xxx
+    if (rest.length <= 7) return `${area}-${rest.slice(0, 3)}-${rest.slice(3)}`; // 0xx-xxx-xxxx
+    return `${area}-${rest.slice(0, 4)}-${rest.slice(4, 8)}`; // 0xx-xxxx-xxxx
+  }
+
+  if (digits.length <= 4) return digits; // 예외 입력: 앞 4자리까지
+  if (digits.length <= 8) return `${digits.slice(0, 4)}-${digits.slice(4)}`; // xxxx-xxxx
+  return `${digits.slice(0, 4)}-${digits.slice(4, 8)}-${digits.slice(8, 11)}`; // xxxx-xxxx-xxx
+};
 
 function Divider() {
   return <div className="h-px w-full bg-neutral-200" />;
@@ -55,6 +94,7 @@ function TextInput({
   placeholder,
   type = "text",
   disabled,
+  inputRef,
   className = "",
 }: {
   value: string;
@@ -62,10 +102,12 @@ function TextInput({
   placeholder?: string;
   type?: string;
   disabled?: boolean;
+  inputRef?: RefObject<HTMLInputElement | null>;
   className?: string;
 }) {
   return (
     <input
+      ref={inputRef}
       type={type}
       value={value}
       disabled={disabled}
@@ -129,6 +171,9 @@ export default function DemandPlaceRegisterPage() {
   const [zip, setZip] = useState("");
   const [addr1, setAddr1] = useState("");
   const [addr2, setAddr2] = useState("");
+  const [isPostcodeModalOpen, setIsPostcodeModalOpen] = useState(false);
+  const [focusDetailAddrOnClose, setFocusDetailAddrOnClose] = useState(false);
+  const detailAddrRef = useRef<HTMLInputElement | null>(null);
 
   const [tel, setTel] = useState("");
   const [pw, setPw] = useState("");
@@ -167,9 +212,10 @@ export default function DemandPlaceRegisterPage() {
       }
 
       setCompany(String(user.dmdCoNm ?? ""));
+      setZip(String(user.zip ?? ""));
       setAddr1(String(user.daddr ?? ""));
       setAddr2("");
-      setTel(String(user.telno ?? "").replace(/\D/g, ""));
+      setTel(formatKoreanPhoneNumber(String(user.telno ?? "")));
       setSido(String(user.ctpvCd ?? ""));
       setSigungu(String(user.sggCd ?? ""));
     } catch {
@@ -178,6 +224,22 @@ export default function DemandPlaceRegisterPage() {
     }
   }, []);
 
+  useEffect(() => {
+    if (!focusDetailAddrOnClose || isPostcodeModalOpen) return;
+
+    if (!addr1.trim()) {
+      setFocusDetailAddrOnClose(false);
+      return;
+    }
+
+    const timer = setTimeout(() => {
+      detailAddrRef.current?.focus();
+      setFocusDetailAddrOnClose(false);
+    }, 0);
+
+    return () => clearTimeout(timer);
+  }, [addr1, focusDetailAddrOnClose, isPostcodeModalOpen]);
+
   const sidoOptions = useMemo<Option[]>(() => {
     const mapped = selectSidoData
       .filter((item) => item.val !== "0")
@@ -274,6 +336,7 @@ export default function DemandPlaceRegisterPage() {
       dmdCoNm: company.trim(),
       dmdInfoId: fullDmdInfoId,
       bzmnNo: bizDigits,
+      zip: zip.trim(),
       daddr: mergedAddress,
       telno: telDigits,
       rgtr: (sessionUser?.rgtr as string) || myUUID,
@@ -311,6 +374,30 @@ export default function DemandPlaceRegisterPage() {
     }
   };
 
+  const handleSelectAddress = (item: AddrItem) => {
+    setZip(item.zipNo);
+    setAddr1(item.roadAddr);
+    setFocusDetailAddrOnClose(true);
+    const matchedSido = selectSidoData.find(
+      (region) =>
+        region.val !== "0" &&
+        isSameRegionName(region.text ?? "", item.ctpvNm ?? ""),
+    );
+
+    if (matchedSido) {
+      setSido(matchedSido.val);
+      const matchedSigungu = selectSigunData.find(
+        (region) =>
+          region.val !== "0" &&
+          region.val.startsWith(matchedSido.val) &&
+          isSameRegionName(region.text ?? "", item.sggNm ?? ""),
+      );
+      setSigungu(matchedSigungu?.val ?? "");
+    }
+
+    setIsPostcodeModalOpen(false);
+  };
+
   const pageTitle = editMode ? "수요처수정" : "수요처등록";
 
   return (
@@ -414,7 +501,7 @@ export default function DemandPlaceRegisterPage() {
               </div>
               <button
                 type="button"
-                onClick={() => alert("우편번호 검색(샘플)")}
+                onClick={() => setIsPostcodeModalOpen(true)}
                 className="h-11 rounded bg-[#888] px-4 text-base text-white hover:bg-neutral-700"
               >
                 우편번호 검색
@@ -426,6 +513,7 @@ export default function DemandPlaceRegisterPage() {
               value={addr2}
               onChange={setAddr2}
               placeholder="상세 주소를 입력하세요."
+              inputRef={detailAddrRef}
             />
           </div>
         </FormRow>
@@ -436,7 +524,7 @@ export default function DemandPlaceRegisterPage() {
           <div className="max-w-[420px]">
             <TextInput
               value={tel}
-              onChange={(v) => setTel(v.replace(/\D/g, "").slice(0, 11))}
+              onChange={(v) => setTel(formatKoreanPhoneNumber(v))}
               placeholder="전화번호를 입력하세요."
             />
           </div>
@@ -478,6 +566,12 @@ export default function DemandPlaceRegisterPage() {
           {editMode ? "수요처 수정" : "수요처 등록"}
         </button>
       </div>
+
+      <PostcodeModal
+        open={isPostcodeModalOpen}
+        onClose={() => setIsPostcodeModalOpen(false)}
+        onSelect={handleSelectAddress}
+      />
     </main>
   );
 }

apps/dm_new/app/(with-layout)/apply/register/page.tsx

@@ -1,13 +1,82 @@
-// apps/dm/app/(landing)/reuse/apply/register/page.tsx
+// app/(with-layout)/apply/register/page.tsx
+/**
+ *  수요정보등록(수정) 화면
+ *
+ * 🔗 사용 API
+ * - 수요정보등록: POST /reuseFc/request/demandInfo
+ * - 수요정보조회: GET  /reuseFc/request/' + dmdInfoId - getSdmInfoStatusList
+ */
 "use client";
 
-import { useMemo, useState, useRef } from "react";
+import { Suspense, useEffect, useMemo, useRef, useState } from "react";
+import { useRouter, useSearchParams } from "next/navigation";
+import { useDmStore } from "@/app/store";
+import type { DemandCompBizType } from "@/app/store/sdmMng";
+import { putFetch } from "@/components/ui/api";
 import SubPageHeader from "@/components/SubPageHeader";
 import WaterQualityRefModal from "../modal/WaterQualityRefModal";
 
 type PHRange = { min: string; max: string };
+type SessionUser = {
+  dmdInfoId?: string;
+  dmdCoNm?: string;
+  ctpvCd?: string;
+  sggCd?: string;
+  zip?: string;
+  daddr?: string;
+  telno?: string;
+  rgtr?: string;
+};
+
+const toNumberOrNull = (value: string, disabled = false) => {
+  if (disabled) return null;
+  const trimmed = value.trim();
+  if (!trimmed) return null;
+  const parsed = Number(trimmed);
+  return Number.isNaN(parsed) ? null : parsed;
+};
+
+const toNumberOrEmpty = (value: string) => {
+  const trimmed = value.trim();
+  if (!trimmed) return "" as const;
+  const parsed = Number(trimmed);
+  return Number.isNaN(parsed) ? ("" as const) : parsed;
+};
+
+const isNumeric = (value: string) => /^\d+(\.\d+)?$/.test(value.trim());
+
+const formatDateForInput = (raw?: string | null) => {
+  if (!raw) return "";
+  const parsed = new Date(raw);
+  if (Number.isNaN(parsed.getTime())) return "";
+  const yyyy = parsed.getFullYear();
+  const mm = String(parsed.getMonth() + 1).padStart(2, "0");
+  const dd = String(parsed.getDate()).padStart(2, "0");
+  return `${yyyy}-${mm}-${dd}`;
+};
+
+const parsePhRange = (raw?: string | null): PHRange => {
+  if (!raw) return { min: "", max: "" };
+  const [min = "", max = ""] = raw.split("~").map((v) => v.trim());
+  return { min, max };
+};
+
+const getSessionUser = (): SessionUser | null => {
+  if (typeof window === "undefined") return null;
+  const raw = sessionStorage.getItem("user");
+  if (!raw) return null;
+  try {
+    return JSON.parse(raw) as SessionUser;
+  } catch {
+    return null;
+  }
+};
+
+function DemandRegisterPageContent() {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const { insertSdmInfoData, Sdm } = useDmStore((state) => state);
 
-export default function DemandRegisterPage() {
   const today = useMemo(() => {
     const d = new Date();
     const yyyy = d.getFullYear();
@@ -17,283 +86,486 @@ export default function DemandRegisterPage() {
   }, []);
 
   const [openRef, setOpenRef] = useState(false);
+  const [editMode, setEditMode] = useState(false);
+  const [updateAllowed, setUpdateAllowed] = useState(true);
+  const [dmdInfoSn, setDmdInfoSn] = useState<number>(0);
+  const [submitting, setSubmitting] = useState(false);
 
   // 기본정보
-  const [reqDate, setReqDate] = useState<string>(today);
-  const [reqQty, setReqQty] = useState<string>("");
-  const [usePurpose, setUsePurpose] = useState<string>("");
-  const [hopePrice, setHopePrice] = useState<string>("");
+  const [reqDate, setReqDate] = useState<string>(today);    // 요구시기
+  const [reqQty, setReqQty] = useState<string>("");         // 요구수량(m²/d)
+  const [usePurpose, setUsePurpose] = useState<string>(""); // 사용용도
+  const [hopePrice, setHopePrice] = useState<string>("");   // 희망단가
+
 
   // 요구수질
-  const [coliform, setColiform] = useState<string>("");
-  const [noDetect, setNoDetect] = useState<boolean>(false);
+  const [coliform, setColiform] = useState<string>("");       // 총대장균군수(개/mg)
+  const [noDetect, setNoDetect] = useState<boolean>(false);   // 총대장균군수 불검출
+
+  const [tn, setTn] = useState<string>("");                   // 총질소(T-N)(mg/L)
+  const [residualCl, setResidualCl] = useState<string>("");   // 결합잔류염소(mg/L)
+  const [tp, setTp] = useState<string>("");                   // 총인(T-P)(mg/L)
+  const [turbidity, setTurbidity] = useState<string>("");      // 
+  const [ph, setPh] = useState<PHRange>({ min: "", max: "" }); // 수소이온농도(pH)
+  const [bod, setBod] = useState<string>("");                  // 생물화학적산소요구량(BOD)(mg/L)
+  const [chloride, setChloride] = useState<string>("");        // 염화물(mgCL/L)
+  const [odor, setOdor] = useState<string>("불쾌하지 않을 것");  // 냄새
+  const [ec, setEc] = useState<string>("");                    // 전기전도도(µs/cm)
+  const [color, setColor] = useState<string>("");              // 색도(도)
+  const [remark, setRemark] = useState<string>("");            // 비고
 
-  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("");
 
+  useEffect(() => {
+    const isEditParam =
+      searchParams.get("editMode") === "true" ||
+      Boolean(searchParams.get("dmdInfoSn"));
+    setEditMode(isEditParam);
+
+    const status = (searchParams.get("status") || "").trim();
+    setUpdateAllowed(!isEditParam || status === "신청");
+
+    if (!isEditParam) return;
+
+    const parsedSn = Number(searchParams.get("dmdInfoSn") || "0");
+    setDmdInfoSn(Number.isNaN(parsedSn) ? 0 : parsedSn);
+
+    setReqDate(formatDateForInput(searchParams.get("dmndTmng")) || today);
+    setReqQty(searchParams.get("dmndQty") || "");
+    setUsePurpose(searchParams.get("useUsgCd") || "");
+    setHopePrice(searchParams.get("wntUntprc") || "");
+
+    const rawColiform = searchParams.get("grssClfg") || "";
+    const isNoDetect = rawColiform === "-1";
+    setNoDetect(isNoDetect);
+    setColiform(isNoDetect ? "" : rawColiform);
+
+    setTn(searchParams.get("tn") || "");
+    setResidualCl(searchParams.get("combResdch") || "");
+    setTp(searchParams.get("tph") || "");
+    setTurbidity(searchParams.get("trbt") || "");
+    setBod(searchParams.get("blgcOxygDmndQnt") || "");
+    setChloride(searchParams.get("clIonQnt") || "");
+    setEc(searchParams.get("cdtnv") || "");
+    setColor(searchParams.get("crmty") || "");
+    setRemark(searchParams.get("rmrk") || "");
+
+    const phRange = parsePhRange(searchParams.get("ph"));
+    setPh(phRange);
+    setOdor(searchParams.get("smll") || "불쾌하지 않을 것");
+  }, [searchParams, today]);
+
+  const validate = () => {
+    const disabledFields = Sdm.disableRules[usePurpose] || [];
+    const isDisabled = (field: string) => disabledFields.includes(field);
+
+    if (!reqDate) {
+      alert("요구시기를 입력해주세요.");
+      return false;
+    }
+    if (!reqQty.trim()) {
+      alert("요구수량을 입력해주세요.");
+      return false;
+    }
+    if (!/^\d+$/.test(reqQty.trim())) {
+      alert("요구수량은 숫자만 입력 가능합니다.");
+      return false;
+    }
+    if (!usePurpose.trim()) {
+      alert("사용용도를 입력해주세요.");
+      return false;
+    }
+    if (!hopePrice.trim()) {
+      alert("희망단가를 입력해주세요.");
+      return false;
+    }
+    if (!/^\d+$/.test(hopePrice.trim())) {
+      alert("희망단가는 숫자만 입력 가능합니다.");
+      return false;
+    }
+    if (!noDetect && coliform.trim() && !isNumeric(coliform)) {
+      alert("총대장균군수는 숫자만 입력 가능합니다.");
+      return false;
+    }
+
+    const requiredFields: Array<{ key: string; label: string; value: string }> = [
+      { key: "tn", label: "총질소(T-N)(mg/L)", value: tn },
+      { key: "combResdch", label: "결합잔류염소(mg/L)", value: residualCl },
+      { key: "tph", label: "총인(T-P)(mg/L)", value: tp },
+      { key: "trbt", label: "탁도(NTU)", value: turbidity },
+      { key: "bod", label: "생물학적 산소요구량(BOD)(mg/L)", value: bod },
+      { key: "clIonQnt", label: "염화물(mgCL/L)", value: chloride },
+      { key: "smll", label: "냄새", value: odor },
+      { key: "cdtnv", label: "전기전도도(㎲/cm)", value: ec },
+      { key: "crmty", label: "색도(도)", value: color },
+    ];
+
+    for (const field of requiredFields) {
+      if (isDisabled(field.key)) continue;
+      if (!field.value.trim()) {
+        alert(`${field.label} 을 입력해주세요.`);
+        return false;
+      }
+      if (field.key !== "smll" && !isNumeric(field.value)) {
+        alert(`${field.label} 은 숫자만 입력 가능합니다.`);
+        return false;
+      }
+    }
+
+    if (!isDisabled("ph") && (!ph.min.trim() || !ph.max.trim())) {
+      alert("수소이온농도(pH) 을 입력해주세요.");
+      return false;
+    }
+
+    return true;
+  };
+
+  const onSubmit = async () => {
+    if (submitting) return;
+    if (!validate()) return;
+
+    if (editMode && !updateAllowed) {
+      alert("진행상태가 신청인 경우에만 수정할 수 있습니다.");
+      return;
+    }
+
+    const sessionUser = getSessionUser();
+    const idFromQuery =
+      (searchParams.get("dmdInfoId") || "") + (searchParams.get("bznmTotNo") || "");
+    const dmdInfoId = String(sessionUser?.dmdInfoId || idFromQuery || "").trim();
+
+    if (!dmdInfoId) {
+      alert("수요처 정보가 없어 저장할 수 없습니다.");
+      return;
+    }
+
+    const disabledFields = Sdm.disableRules[usePurpose] || [];
+    const isDisabled = (field: string) => disabledFields.includes(field);
+    const parsedPh = isDisabled("ph") ? "" : `${ph.min.trim()}~${ph.max.trim()}`;
+    const cands = [cand1, cand2, cand3]
+      .map((name) => name.trim())
+      .filter(Boolean)
+      .map((name) => ({
+        ruseUtztnFcltNm: name,
+        ruseUtztnFcltCd: "",
+      }))
+      .filter((item) => item.ruseUtztnFcltNm && item.ruseUtztnFcltCd);
+
+    const payload: DemandCompBizType = {
+      index: 0,
+      dmdInfoId,
+      dmdInfoFk: dmdInfoId,
+      bzmnNo: "",
+      dmdCoNm: String(sessionUser?.dmdCoNm || searchParams.get("dmdCoNm") || ""),
+      zip: String(sessionUser?.zip || searchParams.get("zip") || ""),
+      daddr: String(sessionUser?.daddr || searchParams.get("daddr") || ""),
+      telno: String(sessionUser?.telno || searchParams.get("telno") || ""),
+      rgtr: String(sessionUser?.rgtr || searchParams.get("rgtr") || ""),
+      useUsgCd: usePurpose.trim(),
+      ctpvCd: String(sessionUser?.ctpvCd || searchParams.get("ctpvCd") || ""),
+      sggCd: String(sessionUser?.sggCd || searchParams.get("sggCd") || ""),
+      dmdAplyPswd: "",
+      wntUntprc: toNumberOrEmpty(hopePrice),
+      dmndTmng: reqDate ? new Date(reqDate) : "",
+      dmndQty: toNumberOrEmpty(reqQty),
+      grssClfg: noDetect ? -1 : toNumberOrNull(coliform),
+      tn: toNumberOrNull(tn, isDisabled("tn")),
+      combResdch: toNumberOrNull(residualCl, isDisabled("combResdch")),
+      tph: toNumberOrNull(tp, isDisabled("tph")),
+      trbt: toNumberOrNull(turbidity, isDisabled("trbt")),
+      ph: parsedPh,
+      blgcOxygDmndQnt: toNumberOrNull(bod, isDisabled("bod")),
+      clIonQnt: toNumberOrNull(chloride, isDisabled("clIonQnt")),
+      smll: isDisabled("smll") ? "" : odor.trim(),
+      cdtnv: toNumberOrNull(ec, isDisabled("cdtnv")),
+      crmty: toNumberOrNull(color, isDisabled("crmty")),
+      rmrk: remark.trim(),
+      reqDt: "",
+      dmdInfoSn: editMode ? dmdInfoSn : 0,
+      status: String(searchParams.get("status") || ""),
+      splyCndtList: cands,
+    };
+
+    try {
+      setSubmitting(true);
+      if (editMode) {
+        const updatePayload = {
+          ...payload,
+          mdfr: String(sessionUser?.rgtr || payload.rgtr || ""),
+        };
+        await putFetch("/reuseFc/request/demandInfo", updatePayload);
+        alert("수요정보 수정 완료!");
+      } else {
+        await insertSdmInfoData(payload);
+      }
+      router.push("/apply/status");
+    } catch (error) {
+      console.error("Failed to submit demand info", error);
+      alert(editMode ? "수요정보 수정에 실패하였습니다." : "수요정보 등록에 실패하였습니다.");
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
   return (
     <>
     
-        <main className="bg-white">
+      <main className="bg-white">
 
-            {/* 서브 타이틀 + 브레드크럼 */}
-            <SubPageHeader
-                title="수요정보등록"
-                crumbs={[
-                { label: "Home", href: "/reuse" },
-                { label: "수요신청", href: "/reuse/apply" },
-                { label: "수요정보등록" },
-                ]}
-            />
+        {/* 서브 타이틀 + 브레드크럼 */}
+        <SubPageHeader
+            title="수요정보등록"
+            crumbs={[
+            { label: "Home", href: "/main" },
+            { label: "수요신청", href: "/apply/status" },
+            { label: "수요정보등록" },
+            ]}
+        />
 
-            {/* 컨텐츠 영역 */}
-            <div>
+        {/* 컨텐츠 영역 */}
+        <div>
 
-                {/* 기본정보 테이블 */}
-                <div className="border border-neutral-200 bg-white">
-                    <FormRow label="요구시기" required>
-                        <DateInput value={reqDate} onChange={setReqDate} />
-                    </FormRow>
+            {/* 기본정보 테이블 */}
+            <div className="border border-neutral-200 bg-white">
+                <FormRow label="요구시기" required>
+                    <DateInput value={reqDate} onChange={setReqDate} />
+                </FormRow>
 
-                    <Divider />
+                <Divider />
 
-                    <FormRow label="요구수량(m²/d)" required>
-                        <TextInput value={reqQty} onChange={setReqQty} placeholder="" />
-                    </FormRow>
+                <FormRow label="요구수량(m²/d)" required>
+                    <TextInput value={reqQty} onChange={setReqQty} placeholder="" />
+                </FormRow>
 
-                    <Divider />
+                <Divider />
 
-                    <FormRow label="사용용도" required>
-                        <TextInput value={usePurpose} onChange={setUsePurpose} />
-                    </FormRow>
+                <FormRow label="사용용도" required>
+                    <TextInput value={usePurpose} onChange={setUsePurpose} />
+                </FormRow>
 
-                    <Divider />
+                <Divider />
 
-                    <FormRow label="희망단가(원)" required>
-                        <TextInput value={hopePrice} onChange={setHopePrice} />
-                    </FormRow>
+                <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 justify-center items-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="grid grid-cols-12">
-                    <div className="col-span-12 lg:col-span-2 inline-flex justify-center items-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 className="border border-neutral-200 bg-white">
+                {/* 1행 */}
+                <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 />
+
+                {/* 2행 */}
+                <QualityRow
+                    leftLabel="결합잔류염소(mg/L)"
+                    leftRequired
+                    leftControl={<TextInput value={residualCl} onChange={setResidualCl} />}
+                    rightLabel="총인(T-P)(mg/L)"
+                    rightControl={
+                    <InlineSuffixInput value={tp} onChange={setTp} suffix="이하" />
+                    }
+                />
+                <Divider />
+
+                {/* 3행 */}
+                <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>
-                </div>
+                    }
+                />
+                <Divider />
 
-                {/* 요구수질 테이블 */}
-                <div className="border border-neutral-200 bg-white">
-                    {/* 1행 */}
-                    <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 />
-
-                    {/* 2행 */}
-                    <QualityRow
-                        leftLabel="결합잔류염소(mg/L)"
-                        leftRequired
-                        leftControl={<TextInput value={residualCl} onChange={setResidualCl} />}
-                        rightLabel="총인(T-P)(mg/L)"
-                        rightControl={
-                        <InlineSuffixInput value={tp} onChange={setTp} suffix="이하" />
-                        }
-                    />
-                    <Divider />
-
-                    {/* 3행 */}
-                    <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 />
-
-                    {/* 4행 */}
-                    <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 />
-
-                    {/* 5행 */}
-                    <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 />
-
-                    {/* 6행 */}
-                    <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>
-                        공급처 후보지 선택
+                {/* 4행 */}
+                <QualityRow
+                    leftLabel={
+                    <>
+                        생물화학적산소요구량
                         <br />
-                        (필수아님)
-                        </LabelCell>
+                        (BOD)(mg/L)
+                    </>
+                    }
+                    leftRequired
+                    leftControl={<InlineSuffixInput value={bod} onChange={setBod} suffix="이하" />}
+                    rightLabel="염화물(mgCL/L)"
+                    rightControl={<InlineSuffixInput value={chloride} onChange={setChloride} suffix="이하" />}
+                />
+                <Divider />
 
-                        <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]" />
+                {/* 5행 */}
+                <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 />
 
-                                <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={() => {
-                                    // TODO: 후보지 조회 모달/검색 연결
-                                    console.log("후보지 조회", { cand1, cand2, cand3 });
-                                    }}
-                                >
-                                    후보지 조회
-                                </button>
-                                <button
-                                    type="button"
-                                    className="h-11 rounded-md bg-[#888] px-5 text-base text-white hover:bg-neutral-600"
-                                    onClick={() => {
-                                    // TODO: 유사사례 연결
-                                    console.log("유사사례");
-                                    }}
-                                >
-                                    유사사례
-                                </button>
-                                </div>
+                {/* 6행 */}
+                <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={() => {
+                                // TODO: 후보지 조회 모달/검색 연결
+                                console.log("후보지 조회", { cand1, cand2, cand3 });
+                                }}
+                            >
+                                후보지 조회
+                            </button>
+                            <button
+                                type="button"
+                                className="h-11 rounded-md bg-[#888] px-5 text-base text-white hover:bg-neutral-600"
+                                onClick={() => {
+                                // TODO: 유사사례 연결
+                                console.log("유사사례");
+                                }}
+                            >
+                                유사사례
+                            </button>
                             </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={() => {
-                        // TODO: 저장 처리
-                        console.log("수요정보 등록");
-                        }}
-                    >
-                        수요정보 등록
-                    </button>
-                </div>
-
             </div>
-        </main>
+
+            {/* 하단 버튼 */}
+            <div className="flex justify-center py-12">
+                <button
+                    type="button"
+                    disabled={submitting}
+                    className="h-11 rounded-md bg-[#0B4EA2] px-10 text-lg text-white hover:opacity-90 disabled:cursor-not-allowed disabled:opacity-70"
+                    onClick={onSubmit}
+                >
+                    {editMode ? "수요정보 수정" : "수요정보 등록"}
+                </button>
+            </div>
+
+        </div>
+      </main>
     </>
   );
 }
 
+export default function DemandRegisterPage() {
+  return (
+    <Suspense fallback={<div>Loading...</div>}>
+      <DemandRegisterPageContent />
+    </Suspense>
+  );
+}
+
 /* ----------------------------- UI helpers ----------------------------- */
 
 function Divider() {

apps/dm_new/app/(with-layout)/example/globalCase/overview/page.tsx

@@ -21,22 +21,22 @@ function Hr({ className = "" }: HrProps) {
   return <div className={`h-[2px] w-full bg-black/10 ${className}`} />;
 }
 
-type ImgCardProps = {
-  src: string;
-  alt: string;
-};
+// 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>
-  );
-}
+// 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 (

apps/dm_new/app/(with-layout)/example/globalCase/singapore/page.tsx

@@ -21,22 +21,22 @@ function Hr({ className = "" }: HrProps) {
   return <div className={`h-[2px] w-full bg-black/10 ${className}`} />;
 }
 
-type ImgCardProps = {
-  src: string;
-  alt: string;
-};
+// 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>
-  );
-}
+// 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 (

apps/dm_new/app/(with-layout)/example/globalCase/taiwan/page.tsx

@@ -21,22 +21,22 @@ function Hr({ className = "" }: HrProps) {
   return <div className={`h-[2px] w-full bg-black/10 ${className}`} />;
 }
 
-type ImgCardProps = {
-  src: string;
-  alt: string;
-};
+// 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>
-  );
-}
+// 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 (

apps/dm_new/app/(with-layout)/example/rain/suwon/page.tsx

@@ -21,22 +21,22 @@ function Hr({ className = "" }: HrProps) {
   return <div className={`h-[2px] w-full bg-black/10 ${className}`} />;
 }
 
-type ImgCardProps = {
-  src: string;
-  alt: string;
-};
+// 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>
-  );
-}
+// 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 (

apps/dm_new/app/(with-layout)/example/sewage/bolyeong/page.tsx

@@ -21,22 +21,22 @@ function Hr({ className = "" }: HrProps) {
   return <div className={`h-[2px] w-full bg-black/10 ${className}`} />;
 }
 
-type ImgCardProps = {
-  src: string;
-  alt: string;
-};
+// 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>
-  );
-}
+// 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 (

apps/dm_new/app/(with-layout)/example/sewage/cheongju/page.tsx

@@ -21,22 +21,22 @@ function Hr({ className = "" }: HrProps) {
   return <div className={`h-[2px] w-full bg-black/10 ${className}`} />;
 }
 
-type ImgCardProps = {
-  src: string;
-  alt: string;
-};
+// 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>
-  );
-}
+// 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 (

apps/dm_new/app/(with-layout)/example/sewage/hwanggu/page.tsx

@@ -21,22 +21,22 @@ function Hr({ className = "" }: HrProps) {
   return <div className={`h-[2px] w-full bg-black/10 ${className}`} />;
 }
 
-type ImgCardProps = {
-  src: string;
-  alt: string;
-};
+// 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>
-  );
-}
+// 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 (

apps/dm_new/app/(with-layout)/example/sewage/paju/page.tsx

@@ -21,22 +21,22 @@ function Hr({ className = "" }: HrProps) {
   return <div className={`h-[2px] w-full bg-black/10 ${className}`} />;
 }
 
-type ImgCardProps = {
-  src: string;
-  alt: string;
-};
+// 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>
-  );
-}
+// 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 (

apps/dm_new/app/(with-layout)/example/sewage/yeosu/page.tsx

@@ -21,22 +21,22 @@ function Hr({ className = "" }: HrProps) {
   return <div className={`h-[2px] w-full bg-black/10 ${className}`} />;
 }
 
-type ImgCardProps = {
-  src: string;
-  alt: string;
-};
+// 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>
-  );
-}
+// 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 (

apps/dm_new/app/(with-layout)/intro/rain/page.tsx

@@ -65,12 +65,32 @@ export default function RainwaterReusePage() {
       <Hr className="my-11" />
 
       {/* 2) 빗물이용시설 설치 관리 법적 의무 대상 */}
-      <section className="pb-[200px]">
+      <section className="mt-6">
         <SectionTitle>빗물이용시설 설치 관리 법적 의무 대상</SectionTitle>
         <div className="mt-8">
           <ImgCard src="/images/landing/intro/rainreuse_mandatory.png" alt="법적 의무 대상 설명" />
         </div>
       </section>
+
+      <Hr className="my-11" />
+
+      {/* 3) 빗물이용시설 설계 방안 */}
+      <section className="mt-6">
+        <SectionTitle>빗물이용시설 설계 방안</SectionTitle>
+        <div className="mt-8">
+          <ImgCard src="/images/landing/intro/rainwater_design.png" alt="빗물이용시설 설계 방안 설명" />
+        </div>
+      </section>
+
+      <Hr className="my-11" />
+
+      {/* 4) 빗물이용시설 시설기준 및 관리기준 */}
+      <section className="pb-[200px]">
+        <SectionTitle>빗물이용시설 시설기준 및 관리기준</SectionTitle>
+        <div className="mt-8">
+          <ImgCard src="/images/landing/intro/rainwater_standards.png" alt="빗물이용시설 시설기준 및 관리기준 설명" />
+        </div>
+      </section>
     </div>
   );
 }

apps/dm_new/app/api/postcode/route.ts

@@ -0,0 +1,60 @@
+import { NextResponse } from "next/server";
+
+export async function GET(req: Request) {
+  const { searchParams } = new URL(req.url);
+  const query = (searchParams.get("query") ?? "").trim();
+  const page = Number(searchParams.get("page") ?? "1");
+
+  if (!query) {
+    return NextResponse.json({ totalCount: 0, items: [] });
+  }
+
+  const confmKey = process.env.JUSO_API_KEY;
+
+  // ✅ 키 없으면 UI 개발용 더미
+  if (!confmKey) {
+    return NextResponse.json({
+      totalCount: 3,
+      items: [
+        {
+          zipNo: "06236",
+          roadAddr: "서울특별시 강남구 테헤란로 152, 강남파이낸스센터 12층",
+          jibunAddr: "서울특별시 강남구 역삼동 737-10 강남파이낸스센터",
+        },
+        {
+          zipNo: "06180",
+          roadAddr: "서울특별시 강남구 테헤란로 231, 센터필드 WEST동 3층",
+          jibunAddr: "서울특별시 강남구 역삼동 824-11 센터필드 WEST동",
+        },
+        {
+          zipNo: "06142",
+          roadAddr: "서울특별시 강남구 테헤란로 521, 삼성동 코엑스인터컨티넨탈호텔 별관",
+          jibunAddr: "서울특별시 강남구 삼성동 159-1 코엑스인터컨티넨탈호텔",
+        },
+      ],
+    });
+  }
+
+  // ✅ 행안부 주소검색 API(JSON)
+  const url = new URL("https://business.juso.go.kr/addrlink/addrLinkApi.do");
+  url.searchParams.set("confmKey", confmKey);
+  url.searchParams.set("currentPage", String(page));
+  url.searchParams.set("countPerPage", "20");
+  url.searchParams.set("keyword", query);
+  url.searchParams.set("resultType", "json");
+
+  const r = await fetch(url.toString(), { cache: "no-store" });
+  const j = await r.json();
+
+  const common = j?.results?.common;
+  const totalCount = Number(common?.totalCount ?? 0);
+  const list = j?.results?.juso ?? [];
+
+  const items = list.map((x: any) => ({
+    zipNo: x.zipNo,
+    roadAddr: x.roadAddr,
+    jibunAddr: x.jibunAddr,
+  }));
+
+  return NextResponse.json({ totalCount, items });
+}

apps/dm_new/app/store/sdmMng/index.tsx

@@ -109,6 +109,7 @@ export type DemandCompBizType = {
   dmdInfoFk: string | '';
   bzmnNo: string | '';
   dmdCoNm: string | '';
+  zip: string | '';
   daddr: string | '';
   telno: string | '';
   rgtr: string | '';
@@ -719,6 +720,7 @@ export const SdmReducer = (set: any): SdmActions => {
           bzmnNo: res.bzmnNo,
           dmdCoNm: res.dmdCoNm,
           dmdInfoId: res.dmdInfoId,
+          zip: res.zip || '',
           daddr: res.daddr,
           telno: res.telno.replace(/(\d{3})(\d{4})(\d{4})/, '$1-$2-$3'),
           rgtr: res.rgtr,

apps/dm_new/app/store/sdmMng/postcode-service.ts

@@ -0,0 +1,290 @@
+export type AddrItem = {
+  zipNo: string;
+  roadAddr: string;
+  jibunAddr: string;
+  ctpvNm: string;
+  sggNm: string;
+};
+
+export interface ZipSearchParams {
+  roadNm?: string;
+  bldgNoMno?: number | null;
+  bldgNoSno?: number | null;
+  page?: number;
+  size?: number;
+}
+
+export interface Zip {
+  zoneNo: string;
+  ctpvNm: string;
+  sggNm: string;
+  lotno: string;
+  zipAddr: string;
+}
+
+interface ZipListResponse {
+  content?: Zip[];
+  totalElements?: number;
+}
+
+export type PostcodeSearchParams = {
+  roadNm: string;
+  bldgNoMno: number;
+  bldgNoSno: number | null;
+  page: number;
+};
+
+export type ParsePostcodeInputResult =
+  | { ok: true; value: PostcodeSearchParams; keyword: string }
+  | { ok: false; message: string };
+
+export type PostcodeSearchResult = {
+  totalCount: number;
+  items: AddrItem[];
+};
+
+type SuggestionSeed = {
+  roadNm: string;
+  bldgNoMno: number;
+};
+
+async function findAddress(searchQuery: ZipSearchParams): Promise<ZipListResponse> {
+  if (!searchQuery) return {};
+
+  const params = new URLSearchParams();
+  if (searchQuery.roadNm) params.append("roadNm", searchQuery.roadNm);
+  if (searchQuery.bldgNoMno != null) {
+    params.append("bldgNoMno", searchQuery.bldgNoMno.toString());
+  }
+  if (searchQuery.bldgNoSno != null) {
+    params.append("bldgNoSno", searchQuery.bldgNoSno.toString());
+  }
+  if (searchQuery.page != null) params.append("page", searchQuery.page.toString());
+  if (searchQuery.size != null) params.append("size", searchQuery.size.toString());
+
+  const url = `/cms-service/api/v1/zips?${params.toString()}`;
+  const response = await fetch(url);
+  if (!response.ok) throw new Error("Network response was not ok");
+  return (await response.json()) as ZipListResponse;
+}
+
+function extractSuggestionSeed(item: Zip): SuggestionSeed | null {
+  const ext = item as Zip & {
+    roadNm?: string;
+    bldgNoMno?: number | string;
+  };
+
+  const mnoByField = Number(ext.bldgNoMno);
+  const roadNmByField = (ext.roadNm ?? "").trim();
+  if (roadNmByField && Number.isInteger(mnoByField) && mnoByField > 0) {
+    return { roadNm: roadNmByField, bldgNoMno: mnoByField };
+  }
+
+  const firstSegment = (item.zipAddr ?? "").split(",")[0]?.trim() ?? "";
+  if (!firstSegment) return null;
+
+  const parts = firstSegment.split(/\s+/);
+  const bldgToken = parts.at(-1) ?? "";
+  const matched = bldgToken.match(/^(\d+)(?:-\d+)?$/);
+  if (!matched) return null;
+
+  const bldgNoMno = Number(matched[1]);
+  const roadNm = parts.slice(0, -1).join(" ").trim();
+  if (!roadNm || !Number.isInteger(bldgNoMno) || bldgNoMno <= 0) {
+    return null;
+  }
+
+  return { roadNm, bldgNoMno };
+}
+
+function searchFilter(search: string): boolean {
+  if (search.length === 0) return true;
+
+  const expText = /[%=><]/;
+  if (expText.test(search)) {
+    alert("특수문자를 입력 할수 없습니다.");
+    return false;
+  }
+
+  const sqlArray = [
+    "OR",
+    "SELECT",
+    "INSERT",
+    "DELETE",
+    "UPDATE",
+    "CREATE",
+    "DROP",
+    "EXEC",
+    "UNION",
+    "FETCH",
+    "DECLARE",
+    "TRUNCATE",
+  ];
+
+  for (const sqlWord of sqlArray) {
+    const regex = new RegExp(sqlWord, "gi");
+    if (regex.test(search)) {
+      alert(`"${sqlWord}"와(과) 같은 특정문자로 검색할 수 없습니다.`);
+      return false;
+    }
+  }
+
+  return true;
+}
+
+export function parsePostcodeInput(
+  input: string,
+  page = 1,
+): ParsePostcodeInputResult {
+  const normalized = input.replace(/\s+/g, " ").trim();
+
+  if (!normalized) {
+    return {
+      ok: false,
+      message: "도로명과 건물번호를 입력해 주세요. 예) 테헤란로 152-1",
+    };
+  }
+
+  const parts = normalized.split(" ");
+  if (parts.length < 2) {
+    if (/^\d+(?:-\d+)?$/.test(normalized)) {
+      return { ok: false, message: "도로명을 입력해 주세요" };
+    }
+    if (/[가-힣]/.test(normalized) && !/\d/.test(normalized)) {
+      return { ok: false, message: "건물번호를 입력해 주세요" };
+    }
+    return {
+      ok: false,
+      message: "도로명과 건물번호를 공백으로 구분해 주세요. 예) 테헤란로 152-1",
+    };
+  }
+
+  const bldgToken = parts.at(-1) ?? "";
+  const roadNm = parts.slice(0, -1).join(" ").trim();
+
+  if (!roadNm || !/[가-힣]/.test(roadNm)) {
+    return {
+      ok: false,
+      message: "도로명을 입력해 주세요",
+    };
+  }
+
+  if (!/\d/.test(bldgToken)) {
+    return { ok: false, message: "건물번호를 입력해 주세요" };
+  }
+
+  if (!/^\d+(?:-\d+)?$/.test(bldgToken)) {
+    return {
+      ok: false,
+      message:
+        "건물번호는 숫자 또는 숫자-숫자 형식으로 입력해 주세요. 예) 152 또는 152-1",
+    };
+  }
+
+  const [mnoStr, snoStr] = bldgToken.split("-");
+  const bldgNoMno = Number(mnoStr);
+  const bldgNoSno = snoStr ? Number(snoStr) : null;
+
+  if (!Number.isInteger(bldgNoMno) || bldgNoMno <= 0) {
+    return { ok: false, message: "건물본번은 1 이상의 숫자로 입력해 주세요." };
+  }
+
+  if (bldgNoSno !== null && (!Number.isInteger(bldgNoSno) || bldgNoSno <= 0)) {
+    return { ok: false, message: "건물부번은 1 이상의 숫자로 입력해 주세요." };
+  }
+
+  return {
+    ok: true,
+    value: {
+      roadNm,
+      bldgNoMno,
+      bldgNoSno,
+      page,
+    },
+    keyword: `${roadNm} ${bldgNoMno}${bldgNoSno ? `-${bldgNoSno}` : ""}`,
+  };
+}
+
+export function extractSearchInputFromRoadAddr(roadAddr: string): string {
+  const firstSegment = roadAddr.split(",")[0]?.trim() ?? "";
+  if (!firstSegment) return "";
+
+  const parts = firstSegment.split(/\s+/);
+  const bldgToken = parts.at(-1) ?? "";
+  if (!/^\d+(?:-\d+)?$/.test(bldgToken)) return "";
+
+  return `${parts.slice(0, -1).join(" ")} ${bldgToken}`.trim();
+}
+
+export async function fetchPostcodeSuggestions(input: string): Promise<string[]> {
+  const normalized = input.replace(/\s+/g, " ").trim();
+  const parts = normalized.split(" ");
+  const tail = parts.at(-1) ?? "";
+  const roadNm =
+    /^\d+(?:-\d+)?$/.test(tail) && parts.length > 1
+      ? parts.slice(0, -1).join(" ").trim()
+      : normalized;
+  if (!roadNm) return [];
+  if (!searchFilter(roadNm)) return [];
+
+  const data = await findAddress({
+    roadNm,
+    page: 0,
+    size: 50,
+  });
+
+  const list = Array.isArray(data?.content) ? (data.content as Zip[]) : [];
+  const suggestions: string[] = [];
+  const seen = new Set<string>();
+
+  for (const item of list) {
+    const seed = extractSuggestionSeed(item);
+    if (!seed) continue;
+
+    const label = `${seed.roadNm} ${seed.bldgNoMno}`;
+    if (seen.has(label)) continue;
+
+    seen.add(label);
+    suggestions.push(label);
+    if (suggestions.length >= 5) break;
+  }
+
+  return suggestions;
+}
+
+export async function fetchPostcode(
+  params: PostcodeSearchParams,
+): Promise<PostcodeSearchResult> {
+  const keywordForCheck = `${params.roadNm} ${params.bldgNoMno}${
+    params.bldgNoSno ? `-${params.bldgNoSno}` : ""
+  }`;
+  if (!searchFilter(keywordForCheck)) {
+    return {
+      totalCount: 0,
+      items: [],
+    };
+  }
+
+  const query: ZipSearchParams = {
+    roadNm: params.roadNm,
+    bldgNoMno: params.bldgNoMno,
+    bldgNoSno: params.bldgNoSno,
+    page: Math.max(params.page - 1, 0),
+    size: 20,
+  };
+
+  const data = await findAddress(query);
+  const list = Array.isArray(data?.content) ? (data.content as Zip[]) : [];
+  const items: AddrItem[] = list.map((item) => ({
+    zipNo: item.zoneNo ?? "",
+    roadAddr: item.zipAddr ?? "",
+    jibunAddr: item.lotno ?? item.zipAddr ?? "",
+    ctpvNm: item.ctpvNm ?? "",
+    sggNm: item.sggNm ?? "",
+  }));
+
+  return {
+    totalCount: Number(data?.totalElements ?? 0),
+    items,
+  };
+}

apps/dm_new/components/LoginModal.tsx

@@ -64,8 +64,8 @@ export default function LoginModal({ open, onClose, onSuccess }: LoginModalProps
   }, [open, onClose]);
 
   useEffect(() => {
-    if (noWorker) {
-      setWorkerNo("");
+    if (noWorker) { // 종사업자번호 해당없음
+      setWorkerNo(""); // 종사업자번호
       setErrors((p) => {
         const nextErrors = { ...p };
         delete nextErrors.workerNo;
@@ -127,7 +127,7 @@ export default function LoginModal({ open, onClose, onSuccess }: LoginModalProps
     markAllTouched();
 
     const v = validate();
-    if (Object.keys(v).length) return;
+    if (Object.keys(v).length) return; //검증 에러가 하나라도 있으면 로그인 요청을 중단
 
     try {
       setSubmitting(true);

apps/dm_new/components/PostcodeModal.tsx

@@ -0,0 +1,303 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import {
+  fetchPostcode,
+  fetchPostcodeSuggestions,
+  parsePostcodeInput,
+  type AddrItem,
+  type PostcodeSearchResult,
+} from "@/app/store/sdmMng/postcode-service";
+
+export type { AddrItem } from "@/app/store/sdmMng/postcode-service";
+
+type Props = {
+  open: boolean;
+  onClose: () => void;
+  onSelect: (item: AddrItem) => void;
+};
+
+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;
+}
+
+export default function PostcodeModal({ open, onClose, onSelect }: Props) {
+  const [mounted, setMounted] = useState(false);
+
+  const [q, setQ] = useState("");
+  const dq = useDebouncedValue(q, 250);
+
+  const [items, setItems] = useState<AddrItem[]>([]);
+  const [suggestions, setSuggestions] = useState<string[]>([]);
+  const [total, setTotal] = useState(0);
+  const [loading, setLoading] = useState(false);
+  const [searchMessage, setSearchMessage] = useState("");
+
+  const inputRef = useRef<HTMLInputElement | null>(null);
+
+  useEffect(() => setMounted(true), []);
+
+  useEffect(() => {
+    if (open) return;
+    setQ("");
+    setItems([]);
+    setSuggestions([]);
+    setTotal(0);
+    setLoading(false);
+    setSearchMessage("");
+  }, [open]);
+
+  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([]);
+      return;
+    }
+
+    let alive = true;
+    (async () => {
+      try {
+        const nextSuggestions = await fetchPostcodeSuggestions(keyword);
+        if (!alive) return;
+        setSuggestions(nextSuggestions);
+      } catch {
+        if (!alive) return;
+        setSuggestions([]);
+      }
+    })();
+
+    return () => {
+      alive = false;
+    };
+  }, [dq, open]);
+
+  useEffect(() => {
+    if (!open) return;
+
+    const keyword = dq.trim();
+
+    if (!keyword) {
+      setItems([]);
+      setTotal(0);
+      setLoading(false);
+      setSearchMessage("");
+      return;
+    }
+
+    const parsed = parsePostcodeInput(keyword, 1);
+    if (!parsed.ok) {
+      setItems([]);
+      setTotal(0);
+      setLoading(false);
+      setSearchMessage(parsed.message);
+      return;
+    }
+
+    let alive = true;
+
+    (async () => {
+      setLoading(true);
+      setSearchMessage("");
+      try {
+        const result: PostcodeSearchResult = await fetchPostcode(parsed.value);
+        if (!alive) return;
+
+        setItems(result.items);
+        setTotal(result.totalCount);
+      } catch {
+        if (!alive) return;
+        setItems([]);
+        setTotal(0);
+        setSearchMessage("우편번호 검색 중 오류가 발생했습니다.");
+      } finally {
+        if (alive) {
+          setLoading(false);
+          setSuggestions([]);
+        }
+      }
+    })();
+
+    return () => {
+      alive = false;
+    };
+  }, [dq, open]);
+
+  const showSuggest = open && q.trim().length >= 1 && suggestions.length > 0;
+
+  if (!mounted || !open) return null;
+
+  return createPortal(
+    <div className="fixed inset-0 z-[9999]">
+      <button
+        type="button"
+        className="absolute inset-0 bg-black/40"
+        aria-label="닫기"
+        onClick={onClose}
+      />
+
+      <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="우편번호 검색"
+        >
+          <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>
+
+          <div className="px-7 pb-4">
+            <div className="relative">
+              <input
+                ref={inputRef}
+                value={q}
+                onChange={(e) => setQ(e.target.value)}
+                placeholder="예) 테헤란로 152-1"
+                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>
+
+          <div className="px-7 pb-7">
+            <div className="mb-3 text-[13px] text-slate-500">
+              {q.trim()
+                ? loading
+                  ? "검색 중..."
+                  : searchMessage || `총 ${total.toLocaleString()}개의 검색결과`
+                : "도로명과 건물번호를 입력하세요. 예) 테헤란로 152-1"}
+            </div>
+
+            <div className="max-h-[420px] overflow-y-auto pr-1">
+              {!loading && q.trim() && items.length === 0 && !searchMessage && (
+                <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_new/components/SubPageHeader.tsx

@@ -19,10 +19,10 @@ export default function SubPageHeader({
   title,
   crumbs,
   note = "* 는 필수 값입니다.",
-  underlineWidthClass = "w-40",
+  // underlineWidthClass = "w-40",
   className = "",
   wrapClassName = "",
-  hideFooterLine = false,
+  // hideFooterLine = false,
   hideGuideText = false,
 }: Props) {
   return (

apps/dm_new/components/TopNav.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import Link from "next/link";
+import Image from "next/image";
 import { usePathname, useRouter } from "next/navigation";
 import { useEffect, useMemo, useState } from "react";
 import LoginModal from "@/components/LoginModal";
@@ -91,7 +92,14 @@ export default function TopNav() {
             {/* 좌측: 로고 */}
             <div className="flex items-center gap-3">
               <Link href="/main" className="flex items-center">
-                <img src="/images/landing/logo.png" alt="HASUON" className="h-9 w-auto" />
+                <Image
+                  src="/images/landing/logo.png"
+                  alt="HASUON"
+                  width={229}
+                  height={46}
+                  className="h-9 w-auto"
+                  priority
+                />
               </Link>
             </div>
 
@@ -149,9 +157,11 @@ export default function TopNav() {
                 >
                   로그인
                   <span aria-hidden>
-                    <img
+                    <Image
                       src="/images/landing/icon_login.png"
                       alt="login icon"
+                      width={24}
+                      height={24}
                       className="ml-1 h-6 w-6 object-contain"
                     />
                   </span>
@@ -168,9 +178,11 @@ export default function TopNav() {
                   >
                     로그아웃
                     <span aria-hidden>
-                      <img
+                      <Image
                         src="/images/landing/icon_logout.png"
                         alt="logout icon"
+                        width={24}
+                        height={24}
                         className="h-6 w-6 object-contain"
                       />
                     </span>

apps/dm_new/eslint.config.mjs

@@ -24,6 +24,7 @@ const eslintConfig = [
   {rules:{
     // other rules..
     "@typescript-eslint/no-explicit-any": "off",
+    "@next/next/no-img-element": "off",
     ...(isProd ? { "react-hooks/exhaustive-deps": "off" } : {}),
   }},
 ];

apps/dm_new/next.config.ts

@@ -1,5 +1,5 @@
 import type { NextConfig } from "next";
-import path from "path";
+// import path from "path";
 
 const subDomain =
   process.env.NEXT_PUBLIC_PROXY_HOST || "http://localhost:3000";