Merge branch 'main' into iipbs/sn/ii

.gitea/workflows/deploy.yml

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

.gitignore

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

.husky/pre-push

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

apps/_template/.env.example

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

apps/_template/.eslintrc.json

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

apps/_template/.gitignore

@@ -1,36 +0,0 @@
-# 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

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

apps/_template/README.md

@@ -1,248 +0,0 @@
-# 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

@@ -1,31 +0,0 @@
-"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

@@ -1,9 +0,0 @@
-"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

@@ -1,169 +0,0 @@
-# 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

@@ -1,15 +0,0 @@
-@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

@@ -1,30 +0,0 @@
-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

@@ -1,18 +0,0 @@
-"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

@@ -1,114 +0,0 @@
-# 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

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

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

@@ -1,19 +0,0 @@
-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

@@ -1,18 +0,0 @@
-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

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

apps/_template/next.config.ts

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

apps/_template/package.json

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

apps/_template/postcss.config.mjs

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

apps/_template/shared/README.md

@@ -1,149 +0,0 @@
-# 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

@@ -1,9 +0,0 @@
-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

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

apps/_template/shared/config/env.ts

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

apps/_template/shared/config/index.ts

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

apps/_template/shared/lib/dayjs.ts

@@ -1,12 +0,0 @@
-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

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

apps/_template/shared/lib/query-client.ts

@@ -1,11 +0,0 @@
-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

@@ -1,29 +0,0 @@
-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

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

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

@@ -1,35 +0,0 @@
-"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

@@ -1,29 +0,0 @@
-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

@@ -1,35 +0,0 @@
-{
-  "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

@@ -1,135 +0,0 @@
-# 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

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

apps/cm/.env.development

@@ -1,7 +1,7 @@
 # apps/cs/src/shared/config/env.ts 참고
 NEXT_PUBLIC_PORT=3000
 NEXT_PUBLIC_PROXY_HOST=http://localhost:3000
-SERVER_API_URL=http://192.168.0.102:8000
 NEXT_PUBLIC_SITE_ID=CS
 NEXT_PUBLIC_SUB_DOMAIN=http://localhost:3000
+NEXT_PUBLIC_SERVER_API_URL=http://192.168.0.102:8000
 NEXT_PUBLIC_TINY_API_KEY=t9nc4z6inquvvd5pq1vea8wcp7lb01qmqseh6egms9vpaju2

apps/cm/.env.example

@@ -1,14 +1,7 @@
 # apps/cs/src/shared/config/env.ts 참고
-NEXT_PUBLIC_PORT=3001
-NEXT_PUBLIC_PROXY_HOST=http://localhost:3001
-NEXT_PUBLIC_SITE_ID=CM
-NEXT_PUBLIC_SUB_DOMAIN=http://localhost:13000
-# NEXT_PUBLIC_SERVER_API_URL=http://localhost:8000
-NEXT_PUBLIC_SERVER_API_URL=http://dev.onasys.co.kr:8000
-NEXT_PUBLIC_LINK_BACKEND_API_HOST=http://rsone.iptime.org:10014
-NEXT_PUBLIC_TINY_API_KEY=t9nc4z6inquvvd5pq1vea8wcp7lb01qmqseh6egms9vpaju2
-
-NEXT_PUBLIC_SERVER_API_URL2=http://con.mind-one.co.kr:11083
-NEXT_PUBLIC_SERVER_API_URL3=https://apigateway.apps.rsonesoft.com
-NEXT_PUBLIC_SN=https://devlion.hasuon.co.kr
-NEXT_PUBLIC_WR=https://devtiger.hasuon.co.kr
+NEXT_PUBLIC_PORT=3000
+NEXT_PUBLIC_PROXY_HOST=http://localhost:3000
+NEXT_PUBLIC_SITE_ID=CS
+NEXT_PUBLIC_SUB_DOMAIN=http://localhost:3000
+NEXT_PUBLIC_SERVER_API_URL=http://192.168.0.102:8000
+NEXT_PUBLIC_TINY_API_KEY=t9nc4z6inquvvd5pq1vea8wcp7lb01qmqseh6egms9vpaju2

apps/cm/.env.local

@@ -0,0 +1,10 @@
+# apps/cs/src/shared/config/env.ts 참고
+NEXT_PUBLIC_PORT=3000
+NEXT_PUBLIC_PROXY_HOST=http://localhost:3000
+NEXT_PUBLIC_SITE_ID=CS
+NEXT_PUBLIC_SUB_DOMAIN=http://localhost:13000
+NEXT_PUBLIC_SERVER_API_URL=http://dev.onasys.co.kr:8000
+NEXT_PUBLIC_LINK_BACKEND_API_HOST=http://rsone.iptime.org:10014
+NEXT_PUBLIC_TINY_API_KEY=t9nc4z6inquvvd5pq1vea8wcp7lb01qmqseh6egms9vpaju2
+
+NEXT_PUBLIC_SERVER_API_URL2=http://con.mind-one.co.kr:11083/

apps/cm/.env.production

@@ -0,0 +1,7 @@
+# apps/cs/src/shared/config/env.ts 참고
+NEXT_PUBLIC_PORT=3000
+NEXT_PUBLIC_PROXY_HOST=http://localhost:3000
+NEXT_PUBLIC_SITE_ID=CS
+NEXT_PUBLIC_SUB_DOMAIN=http://localhost:3000
+NEXT_PUBLIC_SERVER_API_URL=http://192.168.0.102:8000
+NEXT_PUBLIC_TINY_API_KEY=t9nc4z6inquvvd5pq1vea8wcp7lb01qmqseh6egms9vpaju2

apps/cm/.gitignore

@@ -10,8 +10,6 @@
 !.yarn/releases
 !.yarn/versions
 
-pnpm_lock.yaml
-
 # testing
 /coverage
 

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

@@ -36,15 +36,9 @@ async function handler(
   }
 
   try {
-    // GET 요청이 아닐 때만 body 파싱
-    if (method !== "GET" && !isRefreshHandler) {
-      try {
-        body = await request.json();
-        console.log(`[Proxy] Request body:`, body);
-      } catch {
-        // body가 없을 수 있음
-        body = {};
-      }
+    if (!isRefreshHandler) {
+      body = await request.json();
+      console.log(`[Proxy] Request body:`, body);
     }
 
     const targetUrl = `${SERVER_API_URL}/${params.url.join("/")}`;
@@ -53,7 +47,7 @@ async function handler(
     const result = await fetch(targetUrl, {
       method,
       headers,
-      body: method !== "GET" ? JSON.stringify(body) : undefined,
+      body: JSON.stringify(body),
     });
 
     console.log(`[Proxy] Response status: ${result.status}`);
@@ -61,14 +55,12 @@ async function handler(
 
     // 2FA 관련 엔드포인트인 경우 응답 본문도 확인
     const is2FAEndpoint = params.url.includes("2fa") || params.url.includes("auth");
-    // 배너 API는 인증 없이 호출 가능
-    const isBannerEndpoint = params.url.includes("bnrs");
     let responseData = {};
     
-    if (is2FAEndpoint || isBannerEndpoint) {
+    if (is2FAEndpoint) {
       try {
         responseData = await result.json();
-        console.log(`[Proxy] ${is2FAEndpoint ? '2FA' : 'Banner'} Response data:`, responseData);
+        console.log(`[Proxy] 2FA Response data:`, responseData);
       } catch {
         // JSON 파싱 실패 시 빈 객체 사용
         console.log(`[Proxy] Failed to parse JSON response`);
@@ -82,15 +74,15 @@ async function handler(
     console.log(`[Proxy] Tokens - accessToken: ${!!accessToken}, userId: ${!!userId}, refreshToken: ${!!refreshToken}`);
     console.log(`[Proxy] Available headers:`, Array.from(result.headers.keys()));
 
-    // 2FA 또는 배너 엔드포인트이고 실패한 경우 실제 오류 메시지 반환
-    if (!result.ok && (is2FAEndpoint || isBannerEndpoint)) {
-      console.log(`[Proxy] ${is2FAEndpoint ? '2FA' : 'Banner'} endpoint failed, returning actual error`);
+    // 2FA 엔드포인트이고 실패한 경우 실제 오류 메시지 반환
+    if (!result.ok && is2FAEndpoint) {
+      console.log(`[Proxy] 2FA endpoint failed, returning actual error`);
       return NextResponse.json(responseData, { status: result.status });
     }
 
-    // 2FA 또는 배너 엔드포인트이고 성공한 경우 (토큰이 헤더에 없을 수 있음)
-    if (result.ok && (is2FAEndpoint || isBannerEndpoint)) {
-      console.log(`[Proxy] ${is2FAEndpoint ? '2FA' : 'Banner'} endpoint succeeded, returning response data`);
+    // 2FA 엔드포인트이고 성공한 경우 (토큰이 헤더에 없을 수 있음)
+    if (result.ok && is2FAEndpoint) {
+      console.log(`[Proxy] 2FA endpoint succeeded, returning response data`);
       return NextResponse.json(responseData, { status: result.status });
     }
 
@@ -151,11 +143,3 @@ export async function PUT(
   const params = await props.params;
   return handler(request, params, "PUT");
 }
-
-export async function GET(
-  request: Request,
-  props: { params: Promise<{ url: string[] }> },
-) {
-  const params = await props.params;
-  return handler(request, params, "GET");
-}

apps/cm/eslint.config.mjs

@@ -12,11 +12,6 @@ const compat = new FlatCompat({
 const eslintConfig = [
   ...compat.extends("next/core-web-vitals", "next/typescript"),
   {
-    languageOptions: {
-      parserOptions: {
-        tsconfigRootDir: __dirname,
-      },
-    },
     rules: {
       "react-hooks/exhaustive-deps": "off",
     },

apps/cm/middleware.ts

@@ -17,8 +17,8 @@ const serverApiUrl =
   const serverApiUrl3 =
   process.env.NEXT_PUBLIC_SERVER_API_URL3 ?? serverApiUrl;
 
-  // const serverApiUrl4 =
-  // process.env.NEXT_PUBLIC_SERVER_API_URL4 ?? serverApiUrl;
+  const serverApiUrl4 =
+  process.env.NEXT_PUBLIC_SERVER_API_URL4 ?? serverApiUrl;
 
   const serverApiUrl5 =
   process.env.NEXT_PUBLIC_SERVER_API_URL5 ?? serverApiUrl;
@@ -33,6 +33,19 @@ export function middleware(req: NextRequest) {
     `[Request]\n  Original Pathname: ${pathname}`,
   ];
 
+  if (pathname.startsWith("/server")) {
+    const queryParams = searchParams.toString();
+    const newUrl = `${serverApiUrl}${pathname.replace("/server", "")}${
+      queryParams ? `?${queryParams}` : ""
+    }`;
+
+    logMessages.push(`  Rewritten URL: ${newUrl}`);
+    logMessages.push("\n--------------------------------\n");
+    console.log(logMessages.join("\n"));
+
+    return NextResponse.rewrite(new URL(newUrl));
+  }
+
   if (pathname.startsWith("/attach-service")) {
     const requestHeaders = new Headers(req.headers);
     const token = req.cookies.get(CLAIM_NAME)?.value;
@@ -42,27 +55,6 @@ export function middleware(req: NextRequest) {
     if (token) requestHeaders.set(CLAIM_NAME, token);
     if (userId) requestHeaders.set(AUTH_USER_ID, userId);
 
-    logMessages.push(`  Rewritten URL: ${newUrl}`);
-    logMessages.push("\n--------------------------------\n");
-    // console.log(logMessages.join("\n"));
-
-    return NextResponse.rewrite(new URL(newUrl), {
-      headers: requestHeaders,
-    });
-  }
-
-  
-  if (pathname.startsWith("/server/sewerage-service")) {
-    const requestHeaders = new Headers(req.headers);
-    const token = req.cookies.get(CLAIM_NAME)?.value;
-    const userId = req.cookies.get(AUTH_USER_ID)?.value;
-
-    // const decodedQuery = toDecodedQueryString(searchParams);
-    const newUrl = `${serverApiUrl2}${pathname.replace("/server/", "/")}${searchParams ? `?${searchParams}` : ""}`;
-
-    if (token) requestHeaders.set(CLAIM_NAME, token);
-    if (userId) requestHeaders.set(AUTH_USER_ID, userId);
-
     logMessages.push(`  Rewritten URL: ${newUrl}`);
     logMessages.push("\n--------------------------------\n");
     console.log(logMessages.join("\n"));
@@ -72,7 +64,8 @@ export function middleware(req: NextRequest) {
     });
   }
 
-  if (pathname.startsWith("/reuse-service")) {
+  
+  if (pathname.startsWith("/sewerage-service")) {
     const requestHeaders = new Headers(req.headers);
     const token = req.cookies.get(CLAIM_NAME)?.value;
     const userId = req.cookies.get(AUTH_USER_ID)?.value;
@@ -90,12 +83,11 @@ export function middleware(req: NextRequest) {
     });
   }
 
-  if (pathname.startsWith("/server/operation-service")) {
+  if (pathname.startsWith("/reuse-service")) {
     const requestHeaders = new Headers(req.headers);
     const token = req.cookies.get(CLAIM_NAME)?.value;
     const userId = req.cookies.get(AUTH_USER_ID)?.value;
-    // const newUrl = `${serverApiUrl2}${pathname.replace("/server/", "")}`;
-    const newUrl = `${serverApiUrl2}${pathname.replace("/server/", "/")}${searchParams ? `?${searchParams}` : ""}`;
+    const newUrl = `${serverApiUrl3}${pathname}`;
 
     if (token) requestHeaders.set(CLAIM_NAME, token);
     if (userId) requestHeaders.set(AUTH_USER_ID, userId);
@@ -109,12 +101,11 @@ export function middleware(req: NextRequest) {
     });
   }
 
-  if (pathname.startsWith("/server/ic-service")) {
+  if (pathname.startsWith("/operation-service")) {
     const requestHeaders = new Headers(req.headers);
     const token = req.cookies.get(CLAIM_NAME)?.value;
     const userId = req.cookies.get(AUTH_USER_ID)?.value;
-
-    const newUrl = `${serverApiUrl3}${pathname.replace("/server/", "/")}`;
+    const newUrl = `${serverApiUrl4}${pathname}`;
 
     if (token) requestHeaders.set(CLAIM_NAME, token);
     if (userId) requestHeaders.set(AUTH_USER_ID, userId);
@@ -128,12 +119,29 @@ export function middleware(req: NextRequest) {
     });
   }
 
-  if (pathname.startsWith("/server/dc-service")) {
+  if (pathname.startsWith("/ic-service")) {
     const requestHeaders = new Headers(req.headers);
     const token = req.cookies.get(CLAIM_NAME)?.value;
     const userId = req.cookies.get(AUTH_USER_ID)?.value;
+    const newUrl = `${serverApiUrl5}${pathname}`;
 
-    const newUrl = `${serverApiUrl3}${pathname.replace("/server/", "/")}${searchParams ? `?${searchParams}` : ""}`;
+    if (token) requestHeaders.set(CLAIM_NAME, token);
+    if (userId) requestHeaders.set(AUTH_USER_ID, userId);
+
+    logMessages.push(`  Rewritten URL: ${newUrl}`);
+    logMessages.push("\n--------------------------------\n");
+    console.log(logMessages.join("\n"));
+
+    return NextResponse.rewrite(new URL(newUrl), {
+      headers: requestHeaders,
+    });
+  }
+
+  if (pathname.startsWith("/dc-service")) {
+    const requestHeaders = new Headers(req.headers);
+    const token = req.cookies.get(CLAIM_NAME)?.value;
+    const userId = req.cookies.get(AUTH_USER_ID)?.value;
+    const newUrl = `${serverApiUrl5}${pathname}`;
 
     if (token) requestHeaders.set(CLAIM_NAME, token);
     if (userId) requestHeaders.set(AUTH_USER_ID, userId);
@@ -155,25 +163,11 @@ export function middleware(req: NextRequest) {
 
     logMessages.push(`  User Service Rewritten URL: ${newUrl}`);
     logMessages.push("\n--------------------------------\n");
-    // console.log(logMessages.join("\n"));
+    console.log(logMessages.join("\n"));
 
     return NextResponse.rewrite(new URL(newUrl));
   }
 
-  if (pathname.startsWith("/server")) {
-    const queryParams = searchParams.toString();
-    const newUrl = `${serverApiUrl}${pathname.replace("/server", "/")}${
-      queryParams ? `?${queryParams}` : ""
-    }`;
-
-    logMessages.push(`  Rewritten URL: ${newUrl}`);
-    logMessages.push("\n--------------------------------\n");
-    // console.log(logMessages.join("\n"));
-
-    return NextResponse.rewrite(new URL(newUrl));
-  }
-
-
   if (pathname === "/") {
     return NextResponse.redirect(new URL("/dashboard", req.url));
   }
@@ -184,11 +178,5 @@ export function middleware(req: NextRequest) {
 }
 
 export const config = {
-  matcher: ["/server/:path*", 
-    "/attach-service/:path*", 
-    "/user-service/:path*", 
-    "/sewerage-service/:path*", 
-    "/reuse-service/:path*", 
-    "/operation-service/:path*", 
-    "/"],
+  matcher: ["/server/:path*", "/attach-service/:path*", "/user-service/:path*", "/"],
 };

apps/cm/next.config.ts

@@ -3,22 +3,10 @@ import type { NextConfig } from "next";
 const subDomain =
   process.env.NEXT_PUBLIC_SUB_DOMAIN || "http://localhost:13000";
 
+const backendUrl = process.env.NEXT_PUBLIC_SERVER_API_URL || "http://192.168.0.102:8000";
+
 const nextConfig: NextConfig = {
   output: "standalone",
-  experimental: {
-    proxyTimeout: 600000,
-  },
-  eslint: {
-    ignoreDuringBuilds: true,
-  },
-  typescript: {
-    ignoreBuildErrors: true,
-  },
-  logging: {
-    fetches: {
-      fullUrl: true,
-    },
-  },  
   async rewrites() {
     return {
       beforeFiles: [
@@ -39,6 +27,10 @@ const nextConfig: NextConfig = {
           source: "/cms/:path*",
           destination: `${subDomain}/cms/:path*`,
         },
+        {
+          source: "/user-service/:path*",
+          destination: `${backendUrl}/user-service/:path*`,
+        },
       ],
       fallback: [],
     };

apps/cm/package.json

@@ -12,9 +12,6 @@
     "@common/assets": "workspace:*",
     "@common/components": "workspace:*",
     "@common/config": "workspace:*",
-    "@dnd-kit/core": "^6.3.1",
-    "@dnd-kit/sortable": "^10.0.0",
-    "@dnd-kit/utilities": "^3.2.2",
     "@fontsource-variable/noto-sans-kr": "^5.2.5",
     "@frontend-opensource/use-react-hooks": "^1.1.4",
     "@fullcalendar/core": "^6.1.17",
@@ -28,16 +25,16 @@
     "@radix-ui/react-label": "^2.1.2",
     "@radix-ui/react-slot": "^1.1.2",
     "@radix-ui/react-tooltip": "^1.1.8",
-    "@tanstack/react-query": "^5.75.5",
+    "@tanstack/react-query": "^5.67.1",
     "@tanstack/react-query-devtools": "^5.75.5",
     "@tanstack/react-table": "^8.21.2",
-    "@tinymce/tinymce-react": "^5.1.1",
+    "@tinymce/tinymce-react": "^6.1.0",
     "axios": "^1.8.1",
     "chart.js": "^4.4.8",
     "dayjs": "^1.11.13",
     "js-cookie": "^3.0.5",
     "lucide-react": "^0.474.0",
-    "next": "15.3.8",
+    "next": "15.3.0",
     "next-qrcode": "^2.5.1",
     "next-themes": "^0.4.6",
     "react-chartjs-2": "^5.3.0",
@@ -50,17 +47,17 @@
     "zustand": "^5.0.3"
   },
   "devDependencies": {
-    "@eslint/eslintrc": "^3.0.0",
+    "@eslint/eslintrc": "^3",
     "@types/js-cookie": "^3.0.6",
     "@types/node": "^22.13.1",
     "@types/webpack": "^5.28.5",
-    "eslint": "^9.0.0",
-    "eslint-config-next": "15.3.8",
-    "postcss": "^8.4.49",
+    "eslint": "^9",
+    "eslint-config-next": "15.1.7",
+    "postcss": "^8",
     "prettier": "^3.4.2",
     "prettier-plugin-tailwindcss": "^0.6.11",
     "steiger": "^0.5.5",
-    "tailwindcss": "^3.4.14",
-    "typescript": "^5.7.2"
+    "tailwindcss": "^3.4.1",
+    "typescript": "^5"
   }
-}
+}

apps/cm/src/app/styles/components.css

@@ -73,32 +73,12 @@
   padding: 0 !important;
 }
 
-.card_paddingnone {
-  padding: 0 !important;
-}
-
 .card_nomargin {
   width: 100%;
   margin: 0 !important;
   padding: 0 !important;
 }
 
-.card_title {
-  padding: 1rem;
-  margin-bottom: 1rem;
-}
-
-.card_title .leftArea {
-  display: flex;
-  align-items: center;
-}
-
-.card_title h4 {
-  margin: 0;
-  font-size: 1.5rem;
-  font-weight: 600;
-}
-
 .topline {
   border-top: 1px solid #ccc;
 }
@@ -147,300 +127,3 @@
     border-bottom-color: #3f4042;
   }
 }
-
-/* 자료현황 스타일 */
-.mid_info_area {
-  padding: 10px 5px;
-  height: 220px;
-  position: relative;
-  margin-top: 0;
-}
-
-.mi_list_swiper {
-  height: 100%;
-  width: 100%;
-}
-
-.mi_list {
-  height: 100%;
-}
-
-.ml_box {
-  position: relative;
-  width: 90%;
-  max-width: 90%;
-  height: 150px;
-  padding: 12px;
-  margin: 0 8px;
-  display: flex;
-  border-radius: 12px;
-  background: #f8f9fa;
-  border: 1px solid #e9ecef;
-  box-sizing: border-box;
-  transition: all 0.3s ease;
-}
-
-.ml_box:hover {
-  background: #e3f2fd;
-  border-color: #2196f3;
-  transform: translateY(-2px);
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-}
-
-.mb_section {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  width: 100%;
-}
-
-.tit {
-  display: flex;
-  align-items: center;
-  margin-bottom: 12px;
-}
-
-.tit i {
-  font-size: 20px;
-  margin-right: 10px;
-  color: #2196f3;
-}
-
-.tt {
-  font-size: 16px;
-  font-weight: 600;
-  color: #333;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.info_row {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-  align-items: center;
-}
-
-.info_item {
-  text-align: center;
-  width: 100%;
-}
-
-.info_label {
-  font-size: 12px;
-  color: #666;
-  margin-bottom: 4px;
-}
-
-.info_value {
-  font-size: 18px;
-  font-weight: bold;
-  color: #2196f3;
-  line-height: 1;
-}
-
-/* Swiper 네비게이션 스타일 */
-.mi_list_swiper .swiper-button-next,
-.mi_list_swiper .swiper-button-prev {
-  color: #2196f3;
-  width: 30px;
-  height: 30px;
-  margin-top: -15px;
-}
-
-.mi_list_swiper .swiper-button-next:after,
-.mi_list_swiper .swiper-button-prev:after {
-  font-size: 16px;
-}
-
-.mi_list_swiper .swiper-pagination {
-  bottom: 5px;
-}
-
-.mi_list_swiper .swiper-pagination-bullet {
-  background: #2196f3;
-  opacity: 0.3;
-}
-
-.mi_list_swiper .swiper-pagination-bullet-active {
-  opacity: 1;
-}
-
-/* 특별시 스타일 */
-.ml_box.special-city {
-  background: linear-gradient(135deg, #ff6b6b, #ff8e8e);
-  border-color: #ff4757;
-  color: white;
-}
-
-.ml_box.special-city .tt {
-  color: white;
-  font-weight: 700;
-}
-
-.ml_box.special-city .info_label {
-  color: rgba(255, 255, 255, 0.8);
-}
-
-.ml_box.special-city .info_value {
-  color: white;
-}
-
-.ml_box.special-city:hover {
-  background: linear-gradient(135deg, #ff5252, #ff7979);
-  transform: translateY(-3px);
-  box-shadow: 0 6px 12px rgba(255, 107, 107, 0.3);
-}
-
-/* 광역시 스타일 */
-.ml_box.metropolitan-city {
-  background: linear-gradient(135deg, #4facfe, #00f2fe);
-  border-color: #2196f3;
-  color: white;
-}
-
-.ml_box.metropolitan-city .tt {
-  color: white;
-  font-weight: 600;
-}
-
-.ml_box.metropolitan-city .info_label {
-  color: rgba(255, 255, 255, 0.8);
-}
-
-.ml_box.metropolitan-city .info_value {
-  color: white;
-}
-
-.ml_box.metropolitan-city:hover {
-  background: linear-gradient(135deg, #2196f3, #21cbf3);
-  transform: translateY(-3px);
-  box-shadow: 0 6px 12px rgba(33, 150, 243, 0.3);
-}
-
-/* 광역도 스타일 */
-.ml_box.province {
-  background: linear-gradient(135deg, #a8edea, #fed6e3);
-  border-color: #00bcd4;
-  color: #333;
-}
-
-.ml_box.province .tt {
-  color: #333;
-  font-weight: 600;
-}
-
-.ml_box.province .info_label {
-  color: #666;
-}
-
-.ml_box.province .info_value {
-  color: #00bcd4;
-}
-
-.ml_box.province:hover {
-  background: linear-gradient(135deg, #00bcd4, #26c6da);
-  color: white;
-  transform: translateY(-3px);
-  box-shadow: 0 6px 12px rgba(0, 188, 212, 0.3);
-}
-
-.ml_box.province:hover .tt,
-.ml_box.province:hover .info_label,
-.ml_box.province:hover .info_value {
-  color: white;
-}
-
-/* 네이버 스타일 로그인 박스 */
-.login_info_box {
-  padding: 20px;
-  background: #fff;
-  border: 1px solid #e1e5e9;
-  border-radius: 8px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-}
-
-.login_header {
-  display: flex;
-  align-items: center;
-  margin-bottom: 10px;
-  padding-bottom: 5px;
-  border-bottom: 1px solid #f0f0f0;
-  width: 100%;
-}
-
-.login_avatar {
-  width: 40px;
-  height: 40px;
-  border-radius: 50%;
-  overflow: hidden;
-  margin-right: 12px;
-  border: 2px solid #e1e5e9;
-}
-
-.login_avatar img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-.login_user_info {
-  flex: 1;
-}
-
-.user_name {
-  font-size: 14px;
-  font-weight: 600;
-  color: #333;
-  margin-bottom: 2px;
-}
-
-.user_status {
-  font-size: 12px;
-  color: #03c75a;
-  font-weight: 500;
-}
-
-.login_actions {
-  width: 100%;
-  display: flex;
-  gap: 8px;
-}
-
-.login_btn {
-  flex: 1;
-  height: 40px;
-  background: #03c75a;
-  color: #fff;
-  border: none;
-  border-radius: 4px;
-  font-size: 12px;
-  font-weight: 600;
-  cursor: pointer;
-  transition: all 0.2s ease;
-}
-
-.login_btn:hover {
-  background: #02b351;
-  transform: translateY(-1px);
-}
-
-.signup_btn {
-  flex: 1;
-  height: 40px;
-  background: #fff;
-  color: #03c75a;
-  border: 1px solid #03c75a;
-  border-radius: 4px;
-  font-size: 12px;
-  font-weight: 600;
-  cursor: pointer;
-  transition: all 0.2s ease;
-}
-
-.signup_btn:hover {
-  background: #03c75a;
-  color: #fff;
-  transform: translateY(-1px);
-}

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

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

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

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

apps/cm/src/entities/post/api/post-service.ts

@@ -11,11 +11,9 @@ import {
   type MyPostList,
   type PostParams,
   type MyPostParams,
-  type NoticePostParams,
   type PostFormData,
   type PostUpdateFormData,
   type PostService,
-  type NoticePostList,
 } from "../model/post-interface";
 
 export class PostApiService implements PostService {
@@ -30,22 +28,11 @@ export class PostApiService implements PostService {
     return response.data;
   }
 
-  
-  public async getNoticePostList(
-    params?: NoticePostParams,
-  ): Promise<NoticePostList> {
-    const response = await client.get<NoticePostList>(
-      `${ENDPOINT.BOARD_SERVICE.POSTS}/recentPosts`,
-      { params },
-    );
-    return response.data;
-  }
-
   public async getMyPostList(
     params?: MyPostParams,
   ): Promise<MyPostList> {
     const response = await client.get<MyPostList>(
-      `${ENDPOINT.BOARD_SERVICE.MY_POSTS}`,
+      `${ENDPOINT.BOARD_SERVICE.POSTS}/mypost`,
       { params },
     );
     return response.data;

apps/cm/src/entities/post/index.ts

@@ -4,13 +4,11 @@ export {
   postUpdateFormSchema,
   type Post,
   type MyPost,
-  type NoticePost,
   type MovePost,
   type DeletePost,
   type PostList,
   type PostParams,
   type MyPostParams,
-  type NoticePostParams,
   type PostFormData,
   type PostUpdateFormData,
   type PostService,

apps/cm/src/entities/post/model/post-interface.ts

@@ -12,20 +12,6 @@ export interface PostParams extends PageableParams {
   ansUseYn?: string;
 }
 
-export interface NoticePostParams extends PageableParams {
-  keywordType?: string;
-  keyword?: string;
-  bbsId?: number | null;
-  delYn?: string;
-  frDateYmd?: string;
-  toDateYmd?: string;
-}
-
-export interface NoticePost extends Post {
-  bbsNm: string;
-  bbsTypeCd: string;
-}
-
 export interface MyPostParams extends PageableParams {
   keywordType?: string;
   keyword?: string;
@@ -113,7 +99,6 @@ export const postUpdateFormSchema = postFormSchema.omit({
 
 export type PostList = PageableList<Post>;
 export type MyPostList = PageableList<MyPost>;
-export type NoticePostList = PageableList<NoticePost>;
 export type PostFormData = z.infer<typeof postFormSchema>;
 export type PostUpdateFormData = z.infer<typeof postUpdateFormSchema>;
 

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

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

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

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

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

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

apps/cm/src/pages/dashboard/api/banner-service.ts

@@ -1,54 +0,0 @@
-import { client } from "@/shared/api";
-import { ENDPOINT } from "@/shared/config";
-
-export interface Banner {
-  bnrSn: number;
-  bnrTypeCd: string;
-  bnrTypeNm: string;
-  bnrTtl: string;
-  lnkgUrlAddr: string;
-  useYn: string;
-  atflCd: string;
-  mdfcnDt: string;
-  mdfr: string;
-  mdfrNm: string;
-}
-
-export const getBannerList = async (siteId: string) => {
-  const response = await client.get<Banner[]>(
-    `${ENDPOINT.CMS_SERVICE.BANNERS}/${siteId}`,
-  );
-  return response.data;
-};
-
-export const getImageUrlByAtflCd = async (atflCd: string): Promise<string> => {
-  try {
-    const response = await client.get<Blob>(
-      `${ENDPOINT.ATTACH_SERVICE.IMAGES}/atflCd/${atflCd}`,
-      {
-        responseType: "blob",
-      },
-    );
-    const blob = response.data;
-    const url = URL.createObjectURL(blob);
-    return url;
-  } catch (error: unknown) {
-    const err = error as
-      | { status?: number; message?: string; response?: { status?: number } }
-      | Error
-      | undefined;
-    const status = err && typeof err === "object" && "status" in err
-      ? err.status
-      : err && typeof err === "object" && "response" in err && err.response
-        ? err.response.status
-        : undefined;
-    const message = err instanceof Error
-      ? err.message
-      : err && typeof err === "object" && "message" in err
-        ? String(err.message)
-        : String(error);
-    
-    
-    return "";
-  }
-};

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

@@ -0,0 +1,14 @@
+import { client } from "@/shared/api";
+import { ENDPOINT } from "@/shared/config";
+import type { Dashboard, DashboardService } from "../model/dashboard-interface";
+
+export class DashboardApiService implements DashboardService {
+  public async getDashboard(): Promise<Dashboard> {
+    const response = await client.get<Dashboard>(
+      ENDPOINT.CMS_SERVICE.DASHBOARD,
+    );
+    return response.data;
+  }
+}
+
+export const DashboardApi = new DashboardApiService();

apps/cm/src/pages/dashboard/api/datastatus-service.ts

@@ -1,48 +0,0 @@
-import { client } from "@/shared/api";
-import { ENDPOINT } from "@/shared/config";
-import type { PageableList } from "@/shared/model";
-
-export interface DataStatus {
-  ctpvgnsvycnt: number;
-  filecnt: number;
-  ctpvnm: string;
-}
-
-export const getDataStatusList = async (): Promise<PageableList<DataStatus>> => {
-  const response = await client.get<DataStatus[]>(
-    `${ENDPOINT.DC_SERVICE.DATA_STATUS}`,
-  );
-  const data = response.data;
-
-  console.log("getDataStatusList data:", data);
-
-  return {
-    content: data as DataStatus[],
-    pageable: {
-      sort: {
-        sorted: false,
-        unsorted: true,
-        empty: true,
-      },
-      offset: 0,
-      pageNumber: 0,
-      pageSize: data.length as number,
-      paged: false,
-      unpaged: true,
-    },
-    sort: {
-      sorted: false,
-      unsorted: true,
-      empty: true,
-    },
-    totalPages: 1,
-    totalElements: data.length,
-    number: 0,
-    numberOfElements: data.length,
-    size: data.length,
-    first: true,
-    last: true,
-    empty: data.length === 0,
-  };
-};
-  

apps/cm/src/pages/dashboard/api/fo-service.ts

@@ -1,376 +0,0 @@
-// apps/cm/src/pages/dashboard/api/fo-service.ts
-import { client } from "@/shared/api";
-import { createStore } from "zustand/vanilla";
-import { create } from "zustand";
-import { ENDPOINT } from "@/shared/config";
-import type { OperWqltContent, OperFcltContent, ReuseStatusContent, OperationService   
-} from "../model/fo-interface";
-import type { mapOperFcltItem, mapOperFcltType } from "../model/fo-interface";
-import type { ReuseMapContent, mapReuseMapType } from "../model/fo-interface";
-
-// 기준년도 조회
-export type YearState = {
-  year: string | null;
-};
-export type YearStateActions = {
-  setYear: (year: string | null) => void;
-};
-export type YearStore = YearState & YearStateActions;
-
-export const defaultYearInitState: YearState = {
-  year: null,
-};
-export const createYearStore = (initState: YearState = defaultYearInitState) =>
-  createStore<YearStore>()((set) => ({
-    ...initState,
-    setYear: (year) => set(() => ({ year })),
-  }));
-export const yearStore = createYearStore();
-
-// 유역
-export type BasinState = {
-  selectedBasin: string;
-};
-export type BasinStateActions = {
-  setSelectedBasin: (selectedBasin: string ) => void;
-};
-export type BasinStore = BasinState & BasinStateActions;
-export const defaultBasinInitState: BasinState = {
-  selectedBasin: "한강",
-};
-export const createBasinStore = (initState: BasinState = defaultBasinInitState) =>
-  createStore<BasinStore>()((set) => ({
-    ...initState,
-    setSelectedBasin: (selectedBasin) => set(() => ({ selectedBasin })),
-  }));
-export const basinStore = createBasinStore();
-
-//수계별 시설운영 개소수 및 가동률
-export type OperFcltState = {
-  operFcltStatus: OperFcltContent[] | null;
-};
-export type OperFcltStateActions = {
-  setOperFcltStatus: (operFcltStatus: OperFcltContent[] | null) => void;
-};
-export type OperFcltStore = OperFcltState & OperFcltStateActions;
-// const initialOperFclt: OperFcltContent[]= [
-//         {
-//             "cnt": 710,
-//             "fctCpc": 2911609.0,
-//             "rvbsn": "금강",
-//             "gubun": "R"
-//         },
-//         {
-//             "cnt": 1032,
-//             "fctCpc": 7506047.0,
-//             "rvbsn": "낙동강",
-//             "gubun": "R"
-//         },
-//         {
-//             "cnt": 1261,
-//             "fctCpc": 2061610.0,
-//             "rvbsn": "영산강",
-//             "gubun": "R"
-//         },
-//         {
-//             "cnt": 983,
-//             "fctCpc": 1.3229809E7,
-//             "rvbsn": "한강",
-//             "gubun": "R"
-//         }
-//     ];    
-export const defaultInitOperFcltState: OperFcltState = {
-  // operFcltStatus: initialOperFclt,
-  operFcltStatus: null,
-};
-export const createOperFcltStore = (initState: OperFcltState = defaultInitOperFcltState) =>
-  createStore<OperFcltStore>()((set) => ({
-    ...initState,
-    setOperFcltStatus: (operFcltStatus) => set(() => ({ operFcltStatus })),
-  }));
-export const operFcltStore = createOperFcltStore();
-
-export const initailMapOperFcltData: mapOperFcltType = {
-    colTitle: {cnt:"개소수",rt:"가동률"}, //헤더 영역
-    data: [ 
-      {name: "금강", cnt: 710, rt: 100,},
-      {name: "한강", cnt: 983, rt: 100,},
-      {name: "낙동강", cnt: 1032, rt: 100,},
-      {name: "영산강", cnt: 1261, rt: 100,},
-    ]
-};
-type mapOperFcltState = {
-  mapOperFclt: mapOperFcltItem[];
-  setMapOperFclt: (mapOperFclt: mapOperFcltItem[]) => void;
-};
-export const useMapOperFcltStore = create<mapOperFcltState>((set) => ({
-  mapOperFclt: initailMapOperFcltData.data,
-  setMapOperFclt: (newMapOperFclt) => set({ mapOperFclt: newMapOperFclt }),
-}));
-
-export const initailMapReuseMapData: mapReuseMapType = {
-    colTitle:  {reuseAmnt: "하수재이용량",cnt  : "시설수" }, //헤더 영역
-    data: [ 
-      {name: "금강", reuseAmnt: 17099, cnt: 3181},
-      {name: "한강", reuseAmnt: 17099, cnt: 3181},
-      {name: "낙동강", reuseAmnt: 14745, cnt: 3100},
-      {name: "영산강", reuseAmnt: 5073, cnt: 1662},
-    ]
-};
-type mapReuseMapState = {
-  mapData: ReuseMapContent[];
-  setMapData: (mapData: ReuseMapContent[]) => void;
-};
-export const useMapReuseMapStore = create<mapReuseMapState>((set) => ({
-  mapData: initailMapReuseMapData.data,
-  setMapData: (newMapOperFclt) => set({ mapData: newMapOperFclt }),
-}));
-
-/**
- * OperFcltContent[]를 지도 팝업 데이터 형태인 mapOperFcltItem[]으로 변환합니다.
- * @param data API 응답 데이터
- * @returns 유역별 개소수 및 가동률이 계산된 데이터
- */
-function transformToMapData(data: OperFcltContent[]): mapOperFcltItem[] {
-  const basinData = new Map<string, { operatingCpc: number; totalCpc: number; count: number }>();
-
-  // 1. 유역별로 가동/전체 용량 및 개소수 집계
-  for (const item of data) {
-    if (!item.rvbsn) continue;
-
-    const basin = basinData.get(item.rvbsn) || { operatingCpc: 0, totalCpc: 0, count: 0 };
-    
-    basin.totalCpc += item.fctCpc;
-    if (item.gubun === 'R') {
-      basin.operatingCpc += item.fctCpc;
-      basin.count = item.cnt; // 'R' 구분 데이터의 개소수를 사용
-    }
-    basinData.set(item.rvbsn, basin);
-  }
-
-  // 2. mapOperFcltItem 형태로 변환
-  const result: mapOperFcltItem[] = [];
-  for (const [name, { operatingCpc, totalCpc, count }] of basinData.entries()) {
-    const rt = totalCpc > 0 ? Math.round((operatingCpc / totalCpc) * 100) : 0;
-    result.push({ name, cnt: count, rt });
-  }
-  return result;
-}
-
-//수계별 유입ㆍ방류수질 분석
-export type OperWqltState = {
-  operWqltStatus: OperWqltContent[] | [];
-};
-export type OperWqltStateActions = {
-  setOperWqltStatus: (operWqltStatus: OperWqltContent[] | []) => void;
-};
-export type OperWqltStore = OperWqltState & OperWqltStateActions;
-const initialWqltData: OperWqltContent[] = [
-  { rvbsn: '금강', yr: '2020', sumInflBod: 97975, sumInflToc: 59900, sumInflSs: 103564, sumInflTp: 2879, sumInflTn: 27062, sumEfflBod: 100143, sumEfflToc: 57805, sumEfflSs: 100942, sumEfflTp: 2901, sumEfflTn: 26796, avgInflBod: 0, avgInflToc: 0, avgInflSs: 0, avgInflTp: 0, avgInflTn: 0, avgEfflBod: 0, avgEfflToc: 0, avgEfflSs: 0, avgEfflTp: 0, avgEfflTn: 0 },
-  { rvbsn: '금강', yr: '2021', sumInflBod: 97943, sumInflToc: 55043, sumInflSs: 102727, sumInflTp: 2866, sumInflTn: 26237, sumEfflBod: 100143, sumEfflToc: 57805, sumEfflSs: 100942, sumEfflTp: 2901, sumEfflTn: 26796, avgInflBod: 0, avgInflToc: 0, avgInflSs: 0, avgInflTp: 0, avgInflTn: 0, avgEfflBod: 0, avgEfflToc: 0, avgEfflSs: 0, avgEfflTp: 0, avgEfflTn: 0 },
-  { rvbsn: '금강', yr: '2022', sumInflBod: 104513, sumInflToc: 58471, sumInflSs: 96534, sumInflTp: 2960, sumInflTn: 27089, sumEfflBod: 100143, sumEfflToc: 57805, sumEfflSs: 100942, sumEfflTp: 2901, sumEfflTn: 26796, avgInflBod: 0, avgInflToc: 0, avgInflSs: 0, avgInflTp: 0, avgInflTn: 0, avgEfflBod: 0, avgEfflToc: 0, avgEfflSs: 0, avgEfflTp: 0, avgEfflTn: 0 },
-  { rvbsn: '낙동강', yr: '2020', sumInflBod: 127321, sumInflToc: 79241, sumInflSs: 120184, sumInflTp: 4004, sumInflTn: 35373, sumEfflBod: 128919, sumEfflToc: 69837, sumEfflSs: 123866, sumEfflTp: 4773, sumEfflTn: 36740, avgInflBod: 0, avgInflToc: 0, avgInflSs: 0, avgInflTp: 0, avgInflTn: 0, avgEfflBod: 0, avgEfflToc: 0, avgEfflSs: 0, avgEfflTp: 0, avgEfflTn: 0 },
-  { rvbsn: '낙동강', yr: '2021', sumInflBod: 127792, sumInflToc: 61919, sumInflSs: 123625, sumInflTp: 4157, sumInflTn: 35270, sumEfflBod: 128919, sumEfflToc: 69837, sumEfflSs: 123866, sumEfflTp: 4773, sumEfflTn: 36740, avgInflBod: 0, avgInflToc: 0, avgInflSs: 0, avgInflTp: 0, avgInflTn: 0, avgEfflBod: 0, avgEfflToc: 0, avgEfflSs: 0, avgEfflTp: 0, avgEfflTn: 0 },
-  { rvbsn: '낙동강', yr: '2022', sumInflBod: 131644, sumInflToc: 68350, sumInflSs: 127789, sumInflTp: 6159, sumInflTn: 39578, sumEfflBod: 128919, sumEfflToc: 69837, sumEfflSs: 123866, sumEfflTp: 4773, sumEfflTn: 36740, avgInflBod: 0, avgInflToc: 0, avgInflSs: 0, avgInflTp: 0, avgInflTn: 0, avgEfflBod: 0, avgEfflToc: 0, avgEfflSs: 0, avgEfflTp: 0, avgEfflTn: 0 },
-  { rvbsn: '영산강', yr: '2020', sumInflBod: 141092, sumInflToc: 97019, sumInflSs: 140610, sumInflTp: 14032, sumInflTn: 45880, sumEfflBod: 132293, sumEfflToc: 83642, sumEfflSs: 140673, sumEfflTp: 8419, sumEfflTn: 46126, avgInflBod: 0, avgInflToc: 0, avgInflSs: 0, avgInflTp: 0, avgInflTn: 0, avgEfflBod: 0, avgEfflToc: 0, avgEfflSs: 0, avgEfflTp: 0, avgEfflTn: 0 },
-  { rvbsn: '영산강', yr: '2021', sumInflBod: 131004, sumInflToc: 74582, sumInflSs: 141129, sumInflTp: 5682, sumInflTn: 45056, sumEfflBod: 132293, sumEfflToc: 83642, sumEfflSs: 140673, sumEfflTp: 8419, sumEfflTn: 46126, avgInflBod: 0, avgInflToc: 0, avgInflSs: 0, avgInflTp: 0, avgInflTn: 0, avgEfflBod: 0, avgEfflToc: 0, avgEfflSs: 0, avgEfflTp: 0, avgEfflTn: 0 },
-  { rvbsn: '영산강', yr: '2022', sumInflBod: 124784, sumInflToc: 79326, sumInflSs: 140281, sumInflTp: 5543, sumInflTn: 47443, sumEfflBod: 132293, sumEfflToc: 83642, sumEfflSs: 140673, sumEfflTp: 8419, sumEfflTn: 46126, avgInflBod: 0, avgInflToc: 0, avgInflSs: 0, avgInflTp: 0, avgInflTn: 0, avgEfflBod: 0, avgEfflToc: 0, avgEfflSs: 0, avgEfflTp: 0, avgEfflTn: 0 },
-  { rvbsn: '한강', yr: '2020', sumInflBod: 146258, sumInflToc: 92931, sumInflSs: 151875, sumInflTp: 4151, sumInflTn: 36537, sumEfflBod: 152099, sumEfflToc: 84360, sumEfflSs: 153111, sumEfflTp: 8443, sumEfflTn: 35571, avgInflBod: 0, avgInflToc: 0, avgInflSs: 0, avgInflTp: 0, avgInflTn: 0, avgEfflBod: 0, avgEfflToc: 0, avgEfflSs: 0, avgEfflTp: 0, avgEfflTn: 0 },
-  { rvbsn: '한강', yr: '2021', sumInflBod: 150983, sumInflToc: 77755, sumInflSs: 153838, sumInflTp: 4098, sumInflTn: 34946, sumEfflBod: 152099, sumEfflToc: 84360, sumEfflSs: 153111, sumEfflTp: 8443, sumEfflTn: 35571, avgInflBod: 0, avgInflToc: 0, avgInflSs: 0, avgInflTp: 0, avgInflTn: 0, avgEfflBod: 0, avgEfflToc: 0, avgEfflSs: 0, avgEfflTp: 0, avgEfflTn: 0 },
-  { rvbsn: '한강', yr: '2022', sumInflBod: 159057, sumInflToc: 82394, sumInflSs: 153619, sumInflTp: 17080, sumInflTn: 35231, sumEfflBod: 152099, sumEfflToc: 84360, sumEfflSs: 153111, sumEfflTp: 8443, sumEfflTn: 35571, avgInflBod: 0, avgInflToc: 0, avgInflSs: 0, avgInflTp: 0, avgInflTn: 0, avgEfflBod: 0, avgEfflToc: 0, avgEfflSs: 0, avgEfflTp: 0, avgEfflTn: 0 },
-  { rvbsn: '', yr: '2020', sumInflBod: 55280, sumInflToc: 35027, sumInflSs: 55125, sumInflTp: 1695, sumInflTn: 15442, sumEfflBod: 65532, sumEfflToc: 36455, sumEfflSs: 65256, sumEfflTp: 2830, sumEfflTn: 18291, avgInflBod: 0, avgInflToc: 0, avgInflSs: 0, avgInflTp: 0, avgInflTn: 0, avgEfflBod: 0, avgEfflToc: 0, avgEfflSs: 0, avgEfflTp: 0, avgEfflTn: 0 },
-  { rvbsn: '', yr: '2021', sumInflBod: 66809, sumInflToc: 33841, sumInflSs: 65743, sumInflTp: 2015, sumInflTn: 17674, sumEfflBod: 65532, sumEfflToc: 36455, sumEfflSs: 65256, sumEfflTp: 2830, sumEfflTn: 18291, avgInflBod: 0, avgInflToc: 0, avgInflSs: 0, avgInflTp: 0, avgInflTn: 0, avgEfflBod: 0, avgEfflToc: 0, avgEfflSs: 0, avgEfflTp: 0, avgEfflTn: 0 },
-  { rvbsn: '', yr: '2022', sumInflBod: 74505, sumInflToc: 40498, sumInflSs: 74899, sumInflTp: 4780, sumInflTn: 21756, sumEfflBod: 65532, sumEfflToc: 36455, sumEfflSs: 65256, sumEfflTp: 2830, sumEfflTn: 18291, avgInflBod: 0, avgInflToc: 0, avgInflSs: 0, avgInflTp: 0, avgInflTn: 0, avgEfflBod: 0, avgEfflToc: 0, avgEfflSs: 0, avgEfflTp: 0, avgEfflTn: 0 },
-];
-export const defaultInitOperWqltState: OperWqltState = {
-  operWqltStatus: initialWqltData,
-};
-export const createOperWqltStore = (initState: OperWqltState = defaultInitOperWqltState) =>
-  createStore<OperWqltStore>()((set) => ({
-    ...initState,
-    setOperWqltStatus: (operWqltStatus) => set(() => ({ operWqltStatus })),
-  }));
-export const operWqltStore = createOperWqltStore();
-
-// 물재이용 현황
-export type ReuseState = {
-  reuseStatus: ReuseStatusContent[] | null;
-};
-export type ReuseStateActions = {
-  setReuseStatus: (reuseStatus: ReuseStatusContent[] | null) => void;
-};
-export type ReuseStore = ReuseState & ReuseStateActions;
-const initialReuseStatusData: ReuseStatusContent[] = [
-  { yr: '2021', sewage: 7335803, reclaimed: 254805510.3, rainwater: 14049224.5 },
-  { yr: '2022', sewage: 7378907, reclaimed: 243457788.8, rainwater: 15128093.4 },
-  { yr: '2023', sewage: 7537151, reclaimed: 222475997,   rainwater: 13944732.5 },
-  { yr: '2024', sewage: 7479136, reclaimed: 265625917.7, rainwater: 13305309.5 },
-];
-export const defaultInitReuseState: ReuseState = {
-  reuseStatus: initialReuseStatusData,
-};
-export const createReuseStore = (initState: ReuseState = defaultInitReuseState) =>
-  createStore<ReuseStore>()((set) => ({
-    ...initState,
-    setReuseStatus: (reuseStatus) => set(() => ({ reuseStatus })),
-  }));
-export const reuseStore = createReuseStore();
-
-/**
- * 두 객체 또는 배열의 깊은 비교를 수행합니다.
- * @param obj1 비교할 첫 번째 객체
- * @param obj2 비교할 두 번째 객체
- * @returns 두 객체의 내용이 같으면 true, 그렇지 않으면 false
- */
-// function deepEqual(obj1: any, obj2: any): boolean {
-//   if (obj1 === obj2) {
-//     return true;
-//   }
-
-//   if (obj1 == null || typeof obj1 !== 'object' || obj2 == null || typeof obj2 !== 'object') {
-//     return false;
-//   }
-
-//   const keys1 = Object.keys(obj1);
-//   const keys2 = Object.keys(obj2);
-
-//   if (keys1.length !== keys2.length) {
-//     return false;
-//   }
-
-//   for (const key of keys1) {
-//     if (!keys2.includes(key) || !deepEqual(obj1[key], obj2[key])) {
-//       return false;
-//     }
-//   }
-
-//   // 배열인 경우 순서와 내용이 모두 동일한지 확인
-//   if (Array.isArray(obj1) && Array.isArray(obj2)) {
-//       if (obj1.length !== obj2.length) return false;
-//       for (let i = 0; i < obj1.length; i++) {
-//           if (!deepEqual(obj1[i], obj2[i])) return false;
-//       }
-//   }
-
-//   return true;
-// }
-
-
-export class OperationApiService implements OperationService {
-
-  // 기준년도 조회
-  public async getStandardYear(): Promise<string> {
-    const { year, setYear } = yearStore.getState();
-    if (year) {
-      return year;
-    }
-
-    const response = await client.get<{
-      status: number;
-      data: string;
-      count: number;
-    }>(ENDPOINT.OPERATION_SERVICE.MAIN_YEAR);
-
-    const newYear = response.data.data || '2024';
-    setYear(newYear);
-
-    return newYear;    
-  }
-
-  // 수계별 시설운영 개소수 및 가동률
-  public async getDashOperCntRt(year: string): Promise<OperFcltContent[]> {
-    const { operFcltStatus, setOperFcltStatus } = operFcltStore.getState();
-    const { setMapOperFclt } = useMapOperFcltStore.getState();
-    // 간단한 캐싱: 데이터가 이미 있으면 API 호출 생략
-    if (operFcltStatus && operFcltStatus.length > 0) {
-      return operFcltStatus;
-    }
-
-    const response = await client.get<{
-      status: number;
-      data: OperFcltContent[];
-      count: number;
-    }>(ENDPOINT.OPERATION_SERVICE.OPER_CNTRT, {
-      params: {
-        year,
-      },
-    });
-
-    const list = (response.data.data ?? []).map((item) => ({
-      ...item,
-      cnt: Number(item.cnt),
-      fctCpc: Number(item.fctCpc),
-    }));
-
-    setOperFcltStatus(list);
-    setMapOperFclt(transformToMapData(list));
-    return list;
-  }
-
-  // 수계별 유입ㆍ방류수질 분석
-  public async getDashOperWqlt(year: string): Promise<OperWqltContent[]> {
-    
-    const response = await client.get<{
-      status: number;
-      data: OperWqltContent[];
-      count: number;
-    }>(ENDPOINT.OPERATION_SERVICE.OPER_WQLT, {
-      params: {
-        year,
-      },
-    });
-
-    const list = (response.data.data ?? []).map((item) => ({
-      ...item,
-    }));
-
-    return list;
-  }
-
-  // 물재이용 현황
-  public async getReuseStatus(): Promise<ReuseStatusContent[]> {
-    // API 호출 시에는 항상 최신 데이터를 가져오도록 캐싱 로직을 제거하거나 수정할 수 있습니다.
-    // 여기서는 기존 캐싱 로직을 유지하되, 초기 데이터가 아닌 경우에만 API를 호출하도록 합니다.
-    const { reuseStatus, setReuseStatus } = reuseStore.getState();
-    if (reuseStatus && reuseStatus.length > 0 && reuseStatus !== defaultInitReuseState.reuseStatus) {
-      return reuseStatus;
-    }
-
-    const response = await client.get<{
-      status: number;
-      data: ReuseStatusContent[];
-      count: number;
-    }>(ENDPOINT.OPERATION_SERVICE.REUSE_STATUS);
-
-    const list = (response.data.data ?? []).map((item) => ({
-      ...item,
-      reclaimed: Number(item.reclaimed),
-      rainwater: Number(item.rainwater),
-    }));
-
-    setReuseStatus(list);
-    return list;
-  }
-
-  // 수계별 하수재이용량, 시설수
-  public async getReuseMap(year: string): Promise<ReuseMapContent[]> {
-    
-    const response = await client.get<{
-      status: number;
-      data: ReuseMapContent[];
-      count: number;
-    }>(ENDPOINT.OPERATION_SERVICE.REUSE_MAP, {
-      params: {
-        year,
-      },
-    });
-
-    const list = (response.data.data ?? []).map((item) => ({
-      ...item,
-    }));
-
-    return list;
-  }
-}
-
-export const OperationApi = new OperationApiService();

apps/cm/src/pages/dashboard/api/schedule-service.ts

@@ -1,66 +0,0 @@
-import { client } from "@/shared/api";
-import { ENDPOINT } from "@/shared/config";
-import type { PageableList } from "@/shared/model";
-
-export interface ScheduleParams {
-  siteId?: string;
-  schdlTtl?: string;
-  schdlSeCd?: string;
-  schdlBgngYmd?: string;
-  schdlEndYmd?: string;
-  reptYn?: string;
-  commSchdlYn?: string;
-}
-
-export interface Schedule {
-  schdlSn: number;
-  siteId: string;
-  schdlTtl: string;
-  schdlSeCd: string;
-  schdlSeNm?: string;
-  schdlBgngDt: string;
-  schdlEndDt: string;
-  reptYn: string;
-  commSchdlYn: string;
-  schdlCn?: string;
-  actualDate?: string;
-  atflCd?: string | null;
-}
-
-
-export const getScheduleList = async (params?: ScheduleParams): Promise<PageableList<Schedule>> => {
-  const response = await client.get<Schedule[]>(
-    ENDPOINT.CMS_SERVICE.SCHEDULES,
-    { params },
-  );
-  const data = response.data;
-
-  return {
-    content: data as Schedule[],
-    pageable: {
-      sort: {
-        sorted: false,
-        unsorted: true,
-        empty: true,
-      },
-      offset: 0,
-      pageNumber: 0,
-      pageSize: data.length as number,
-      paged: false,
-      unpaged: true,
-    },
-    sort: {
-      sorted: false,
-      unsorted: true,
-      empty: true,
-    },
-    totalPages: 1,
-    totalElements: data.length,
-    number: 0,
-    numberOfElements: data.length,
-    size: data.length,
-    first: true,
-    last: true,
-    empty: data.length === 0,
-  };
-};

apps/cm/src/pages/dashboard/api/sn-service.ts

@@ -1,189 +0,0 @@
-// apps/cm/src/pages/dashboard/api/sn-service.ts
-import { client } from "@/shared/api";
-import { create } from "zustand";
-import { ENDPOINT } from "@/shared/config";
-import type { PplLengthContent, SewerageService } from "../model/sn-interface";
-import type { OldPplChartData, mapPplOldType, mapPplOldItem } from "../model/sn-interface";
-
-export type SnState = {
-  snStatus: PplLengthContent[] | null;
-};
-export type SnStateActions = {
-  setSnStatus: (snStatus: PplLengthContent[] | null) => void;
-};
-export type SnStore = SnState & SnStateActions;
-
-const initialUsePplChartData: OldPplChartData = {
-  labels: ["금강", "한강", "낙동강", "영산강"],
-  datasets: [
-    {
-      label: "기타",
-      data: [1966, 15480, 6957, 1937],
-      backgroundColor: "rgba(255, 178, 150, 0.9)"
-    },
-    {
-      label: "오수관로",
-      data: [8074, 15879, 16337, 5671],
-      backgroundColor: "rgba(180, 240, 190, 0.95)"
-    },
-    {
-      label: "우수관로",
-      data: [4838, 12893, 10492, 4281],
-      backgroundColor: "rgba(170, 210, 245, 0.95)"
-    }
-  ]
-};
-const initialOldPplChartData: OldPplChartData = {
-  labels: ["금강", "한강", "낙동강", "영산강"],
-  datasets: [
-    {
-      label: "20-25년",
-      data: [1140, 3181, 3100, 1662],
-      backgroundColor: "#3B82F6",
-      borderRadius: 4
-    },
-    {
-      label: "25-30년",
-      data: [1391, 3615, 1814, 1411],
-      backgroundColor: "#EF4444",
-      borderRadius: 4
-    },
-    {
-      label: "30년이상",
-      data: [2014, 10303, 9831, 2000],
-      backgroundColor: "#F87171",
-      borderRadius: 4
-    }
-  ]
-};
-type OldPplStoreState = {
-  chartData: OldPplChartData;
-  setChartData: (chartData: OldPplChartData) => void;
-};
-export const useOldPplStore = create<OldPplStoreState>((set) => ({
-  chartData: initialOldPplChartData,
-  setChartData: (chartData) => set(() => ({ chartData })),
-}));
-export const useUsePplStore = create<OldPplStoreState>((set) => ({
-  chartData: initialUsePplChartData,
-  setChartData: (chartData) => set(() => ({ chartData })),
-}));
-
-export const initailMapOldPplData: mapPplOldType = {
-  colTitle: { totalLen: "총길이", pplLen2025: "20~25년", pplLen2530: "25~30년", pplLen30: "30년 이상" }, //헤더 영역
-  data: [
-    { name: "금강", totalLen: 4545, pplLen2025: 1140, pplLen2530: 1391, pplLen30: 2014 },
-    { name: "한강", totalLen: 17099, pplLen2025: 3181, pplLen2530: 3615, pplLen30: 10303 },
-    { name: "낙동강", totalLen: 14745, pplLen2025: 3100, pplLen2530: 1814, pplLen30: 9831 },
-    { name: "영산강", totalLen: 5073, pplLen2025: 1662, pplLen2530: 1411, pplLen30: 2000 },
-  ]
-};
-type mapPplOldState = {
-  mapData: mapPplOldItem[];
-  setMapData: (mapData: mapPplOldItem[]) => void;
-};
-export const useMapOldPplStore = create<mapPplOldState>((set) => ({
-  mapData: initailMapOldPplData.data,
-  setMapData: (newMapData) => set({ mapData: newMapData }),
-}));
-
-/**
- * OldPplChartData를 지도 팝업 데이터 형태인 mapPplOldItem[]으로 변환합니다.
- * @param chartData 차트 데이터
- * @returns 유역별 노후관로 현황 데이터
- */
-export function transformChartDataToMapData(chartData: OldPplChartData): mapPplOldItem[] {
-  const mapData: mapPplOldItem[] = [];
-  const { labels, datasets } = chartData;
-
-  const pplLen2025Data = datasets.find(d => d.label === '20-25년')?.data || [];
-  const pplLen2530Data = datasets.find(d => d.label === '25-30년')?.data || [];
-  const pplLen30Data = datasets.find(d => d.label === '30년이상')?.data || [];
-
-  labels.forEach((label, index) => {
-    const pplLen2025 = pplLen2025Data[index] || 0;
-    const pplLen2530 = pplLen2530Data[index] || 0;
-    const pplLen30 = pplLen30Data[index] || 0;
-    const totalLen = pplLen2025 + pplLen2530 + pplLen30;
-
-    mapData.push({
-      name: label,
-      totalLen,
-      pplLen2025,
-      pplLen2530,
-      pplLen30,
-    });
-  });
-
-  return mapData;
-}
-
-
-
-export class SewerageApiService implements SewerageService {
-  // 기간별 관로 총길이
-  public async getPplLength(instlYmdFrom: string, instlYmdTo: string): Promise<PplLengthContent[]> {
-    const response = await client.get<{
-      PplLengthList: PplLengthContent[];
-    }>(ENDPOINT.SEWERAGE_SERVICE.PPL_LENGTH, {
-      params: {
-        instlYmdFrom,
-        instlYmdTo,
-      },
-    });
-
-    const list = (response.data.PplLengthList ?? []).map((item) => ({
-      ...item,
-      sumPrlgVl: Number(item.sumPrlgVl),
-    }));
-
-    return list;
-  }
-
-  // 기간별 용도별 관로 총길이 : useCd - SBA004 오수관, SBA003 우수관
-  public async getPplUseLength(instlYmdFrom: string, instlYmdTo: string, useCd: string): Promise<PplLengthContent[]> {
-    const response = await client.get<{
-      PplLengthList: PplLengthContent[];
-    }>(ENDPOINT.SEWERAGE_SERVICE.PPL_USE_LENGTH, {
-      params: {
-        instlYmdFrom,
-        instlYmdTo,
-        useCd,
-      },
-    });
-
-    const list = (response.data.PplLengthList ?? []).map((item) => ({
-      ...item,
-      sumPrlgVl: Number(item.sumPrlgVl),
-    }));
-    return list;
-  }
-
-  // 유역별 용도별 관로 길이(km) MV조회 : usgCd - SBA004 오수관, SBA003 우수관
-  public async getMvUsgPplLength(): Promise<PplLengthContent[]> {
-    const response = await client.get<{
-      PplLengthList: PplLengthContent[];
-    }>(ENDPOINT.SEWERAGE_SERVICE.MV_USG_PPL_LENGTH);
-
-    const list = (response.data.PplLengthList ?? []).map((item) => ({
-      ...item,
-      sumPrlgVl: Number(item.sumPrlgVl),
-    }));
-    return list;
-  }
-  // 유역별 노후도별 관로 길이(km) MV조회 : yearGroup - 20년~25년미만,25년~30년미만,30년이상
-  public async getMvOldPplLength(): Promise<PplLengthContent[]> {
-    const response = await client.get<{
-      PplLengthList: PplLengthContent[];
-    }>(ENDPOINT.SEWERAGE_SERVICE.MV_OLD_PPL_LENGTH);
-
-    const list = (response.data.PplLengthList ?? []).map((item) => ({
-      ...item,
-      sumPrlgVl: Number(item.sumPrlgVl),
-    }));
-    return list;
-  }
-
-}
-
-export const SewerageApi = new SewerageApiService();

apps/cm/src/pages/dashboard/api/support-service.ts

@@ -1,53 +0,0 @@
-import { client } from "@/shared/api";
-import { ENDPOINT } from "@/shared/config";
-import type { PageableList } from "@/shared/model";
-
-export interface Support {
-  total: number;
-  ongoing: number;
-  han: number;
-  youngsang: number;
-  geum: number;
-  nakdong: number;
-  completed: number;
-  type: string;
-}
-
-export const getSupportList = async (): Promise<PageableList<Support>> => {
-  const response = await client.get<Support[]>(
-    `${ENDPOINT.IC_SERVICE.GROUPING_STATISTICS}`,
-  );
-  const data = response.data;
-
-  console.log("getSupportList data:", data);
-
-  return {
-    content: data as Support[],
-    pageable: {
-      sort: {
-        sorted: false,
-        unsorted: true,
-        empty: true,
-      },
-      offset: 0,
-      pageNumber: 0,
-      pageSize: data.length as number,
-      paged: false,
-      unpaged: true,
-    },
-    sort: {
-      sorted: false,
-      unsorted: true,
-      empty: true,
-    },
-    totalPages: 1,
-    totalElements: data.length,
-    number: 0,
-    numberOfElements: data.length,
-    size: data.length,
-    first: true,
-    last: true,
-    empty: data.length === 0,
-  };
-};
-  

apps/cm/src/pages/dashboard/lib/KoreaBasinMap.tsx

@@ -0,0 +1,425 @@
+import React, { useEffect, useRef } from "react";
+import styles from "./KoreaBasinMap.module.css"; // 추가
+
+const SVG_URL = "/images/region_map.svg"; // public 폴더에 region_map.svg 위치 필요
+
+const MANUAL_LABEL_POS = {
+  han: { x: 0.52, y: 0.14 },
+  geum: { x: 0.28, y: 0.47 },
+  nakdong: { x: 0.64, y: 0.47 },
+  yeongsan: { x: 0.18, y: 0.77 },
+};
+
+const BASIN_DATA = {
+  han: {
+    name: "한강",
+    colTitle: "시설수",
+    rows: [
+      ["500m³ 미만", 100000000],
+      ["500m³ 이상", 100000000],
+    ],
+  },
+  geum: {
+    name: "금강",
+    colTitle: "시설수",
+    rows: [
+      ["500m³ 미만", 100000000],
+      ["500m³ 이상", 100000000],
+    ],
+  },
+  nakdong: {
+    name: "낙동강",
+    colTitle: "시설수",
+    rows: [
+      ["500m³ 미만", 100000000],
+      ["500m³ 이상", 100000000],
+    ],
+  },
+  yeongsan: {
+    name: "영산강",
+    colTitle: "시설수",
+    rows: [
+      ["500m³ 미만", 100000000],
+      ["500m³ 이상", 100000000],
+    ],
+  },
+};
+
+const BASIN_IDS = [
+  { key: "han", labels: ["한강", "han"] },
+  { key: "geum", labels: ["금강", "geum"] },
+  { key: "nakdong", labels: ["낙동강", "nakdong"] },
+  { key: "yeongsan", labels: ["영산강", "yeongsan"] },
+];
+
+function fmt(n: number) {
+  return new Intl.NumberFormat("ko-KR").format(n);
+}
+
+export function KoreaBasinMap() {
+  const stageRef = useRef<HTMLDivElement>(null);
+  const svgLayerRef = useRef<HTMLDivElement>(null);
+  const labelsLayerRef = useRef<HTMLDivElement>(null);
+  const popupRef = useRef<HTMLDivElement>(null);
+  const badgeRef = useRef<HTMLDivElement>(null);
+  const rowsRef = useRef<HTMLTableSectionElement>(null);
+  const colTitleRef = useRef<HTMLTableCellElement>(null);
+
+  useEffect(() => {
+    let svg: SVGSVGElement | null = null;
+    let gs: SVGGElement[] = [];
+    let labels: HTMLDivElement[] = [];
+
+    console.log("Loading SVG from:", SVG_URL);
+    fetch(SVG_URL)
+      .then((r) => {
+        console.log("SVG fetch response:", r.status, r.statusText);
+        if (!r.ok) throw new Error(`HTTP error! status: ${r.status}`);
+        return r.text();
+      })
+      .then((txt) => {
+        console.log("SVG content loaded, length:", txt.length);
+        if (!svgLayerRef.current) {
+          console.error("svgLayerRef.current is null");
+          return;
+        }
+        svgLayerRef.current.innerHTML = txt;
+        svg = svgLayerRef.current.querySelector("svg");
+        if (!svg) {
+          console.error("SVG element not found in loaded content");
+          return;
+        }
+        console.log("SVG element found:", svg);
+
+        // viewBox/크기 세팅
+        if (!svg.hasAttribute("viewBox")) {
+          const bb = svg.getBBox();
+          svg.setAttribute(
+            "viewBox",
+            [bb.x, bb.y, bb.width, bb.height].join(" "),
+          );
+        }
+        const vb = (svg.getAttribute("viewBox") || "").split(/\s+/).map(Number);
+        if (vb.length === 4 && vb[3]! > 0 && stageRef.current) {
+          stageRef.current!.style.aspectRatio = String(vb[2]! / vb[3]!);
+        }
+        svg!.setAttribute("preserveAspectRatio", "xMidYMid meet");
+        svg.style.width = "100%";
+        svg.style.height = "100%";
+
+        // 1) 지도 그룹 수집
+        gs = [];
+        console.log("Looking for basin groups in SVG...");
+        BASIN_IDS.forEach((item) => {
+          let g: SVGGElement | null = null;
+          for (const id of item.labels) {
+            g = svg!.getElementById(id) as SVGGElement | null;
+            if (g) {
+              console.log(`Found group for ${item.key} with id '${id}':`, g);
+              break;
+            }
+          }
+          if (!g) {
+            console.warn(`No group found for ${item.key} with labels:`, item.labels);
+            return;
+          }
+          g.classList.add("basin");
+          (g as SVGGElement & { dataset: { key: string; label: string } }).dataset.key = item.key;
+          (g as SVGGElement & { dataset: { key: string; label: string } }).dataset.label = item.labels[0] || '';
+          
+          // 패스에 기본 스타일 적용
+          const paths = g.querySelectorAll('path');
+          paths.forEach((path) => {
+            path.style.fill = 'rgba(0, 150, 255, 0.2)';
+            path.style.stroke = '#0066cc';
+            path.style.strokeWidth = '1';
+            path.style.vectorEffect = 'non-scaling-stroke';
+          });
+          
+          gs.push(g);
+        });
+        console.log(`Found ${gs.length} basin groups`);
+        
+        // 각 유역 그룹의 패스 정보 확인
+        gs.forEach((g, index) => {
+          const paths = g.querySelectorAll('path');
+          console.log(`Group ${index} (${(g as SVGGElement & { dataset: { key: string } }).dataset.key}):`, {
+            element: g,
+            pathCount: paths.length,
+            paths: Array.from(paths).map(p => ({
+              className: p.className.baseVal,
+              d: p.getAttribute('d')?.substring(0, 50) + '...'
+            }))
+          });
+        });
+
+        // 2) 함수들 먼저 정의
+        const clear = () => {
+          gs.forEach((el) => el.classList.remove("active"));
+          if (popupRef.current) {
+            if (styles.show) {
+              popupRef.current.classList.remove(styles.show);
+            }
+            popupRef.current.style.opacity = "0";
+            popupRef.current.style.visibility = "hidden";
+          }
+          if (badgeRef.current) {
+            if (styles.show) {
+              badgeRef.current.classList.remove(styles.show);
+            }
+            badgeRef.current.style.opacity = "0";
+            badgeRef.current.style.visibility = "hidden";
+          }
+          labels.forEach((l) => l.classList.remove("active"));
+        };
+
+        function showFor(g: SVGGElement) {
+          console.log("showFor called for:", g);
+          const key = (g as SVGGElement & { dataset: { key: string; label: string } }).dataset.key;
+          const data = (BASIN_DATA as Record<string, { name: string; colTitle: string; rows: (string | number)[][] }>)[key] || {
+            name: (g as SVGGElement & { dataset: { label: string } }).dataset.label,
+            colTitle: "",
+            rows: [],
+          };
+          console.log("Data for popup:", data);
+          
+          if (badgeRef.current) badgeRef.current.textContent = data.name;
+          if (colTitleRef.current)
+            colTitleRef.current.textContent = data.colTitle || "???";
+          if (rowsRef.current)
+            rowsRef.current.innerHTML = data.rows
+              .map(
+                (r: (string | number)[]) =>
+                  `<tr><td>${r[0]}</td><td style="text-align:right">${fmt(Number(r[1]) || 0)}</td></tr>`,
+              )
+              .join("");
+
+          if (!stageRef.current) return;
+          const sRect = stageRef.current.getBoundingClientRect(),
+            r = g.getBoundingClientRect();
+          const cx = (r.left + r.right) / 2 - sRect.left;
+          const ty = r.top - sRect.top;
+
+          console.log("Popup position:", { cx, ty });
+
+          if (badgeRef.current) {
+            badgeRef.current.style.left = cx + "px";
+            badgeRef.current.style.top = ty + 24 + "px";
+          }
+          if (popupRef.current) {
+            popupRef.current.style.left = cx + "px";
+            popupRef.current.style.top = ty + 6 + "px";
+            popupRef.current.style.opacity = "1";
+            popupRef.current.style.visibility = "visible";
+            if (styles.show) {
+              popupRef.current.classList.add(styles.show);
+            }
+            console.log("Added show class to popup:", popupRef.current.classList.toString());
+          }
+          if (badgeRef.current && styles.show) {
+            badgeRef.current.classList.add(styles.show);
+          }
+
+          if (popupRef.current) {
+            const pRect = popupRef.current.getBoundingClientRect();
+            const x = Math.max(
+              12 + pRect.width / 2,
+              Math.min(cx, sRect.width - 12 - pRect.width / 2),
+            );
+            popupRef.current.style.left = x + "px";
+            if (badgeRef.current) badgeRef.current.style.left = x + "px";
+          }
+        }
+
+        function showForWithLabel(g: SVGGElement) {
+          console.log("showForWithLabel called for:", g);
+          showFor(g);
+          const idx = gs.indexOf(g);
+          labels.forEach((l) => l.classList.remove("active"));
+          if (idx >= 0) labels[idx]!.classList.add("active");
+        }
+
+        // 3) 라벨 DOM 생성
+        labels = [];
+        if (labelsLayerRef.current) {
+          labelsLayerRef.current.innerHTML = "";
+          gs.forEach((g) => {
+            const el = document.createElement("div");
+            el.className = styles.basinLabel || '';
+            el.textContent = (g as SVGGElement & { dataset: { label: string } }).dataset.label || '';
+            labelsLayerRef.current!.appendChild(el);
+            labels.push(el);
+          });
+        }
+
+        // 3) 라벨 위치
+        function positionLabels() {
+          if (!stageRef.current || !svg) return;
+          const sRect = stageRef.current.getBoundingClientRect();
+          const inset =
+            parseFloat(
+              getComputedStyle(stageRef.current).getPropertyValue(
+                "--map-inset",
+              ) || "0",
+            ) / 100;
+          const left = sRect.width * inset,
+            top = sRect.height * inset;
+          const w = sRect.width * (1 - inset * 2),
+            h = sRect.height * (1 - inset * 2);
+          const [vx, vy, vw, vh] = (
+            svg!.getAttribute("viewBox") || "0 0 100 100"
+          )
+            .split(/\s+/)
+            .map(Number);
+
+          const svgRect = svg.getBoundingClientRect();
+          const stageRect = stageRef.current.getBoundingClientRect();
+          const offsetX = svgRect.left - stageRect.left - left;
+          const offsetY = svgRect.top - stageRect.top - top;
+
+          gs.forEach((g, i) => {
+            const key = (g as SVGGElement & { dataset: { key: string } }).dataset.key;
+            const manual = (MANUAL_LABEL_POS as Record<string, { x?: number; y?: number; px?: number; py?: number }>)[key];
+            let px, py;
+            if (
+              manual &&
+              (("x" in manual && "y" in manual) ||
+                ("px" in manual && "py" in manual))
+            ) {
+              if ("px" in manual) {
+                px = left + (manual.px || 0) + offsetX;
+                py = top + (manual.py || 0) + offsetY;
+              } else {
+                px = left + w * (manual.x || 0) + offsetX;
+                py = top + h * (manual.y || 0) + offsetY;
+              }
+            } else {
+              const b = g.getBBox();
+              const cx = b.x + b.width / 2,
+                cy = b.y + b.height / 2;
+              px = ((cx - vx!) / vw!) * w + left + offsetX;
+              py = ((cy - vy!) / vh!) * h + top + offsetY;
+            }
+            labels[i]!.style.left = `${px}px`;
+            labels[i]!.style.top = `${py + 18}px`;
+          });
+        }
+
+        // 4) 상호작용 (함수들은 이미 위에서 정의됨)
+        gs.forEach((g) => {
+          g.addEventListener("mouseenter", () => {
+            clear();
+            g.classList.add("active");
+            showForWithLabel(g);
+          });
+          g.addEventListener("mousemove", () => {
+            if (g.classList.contains("active")) showForWithLabel(g);
+          });
+          g.addEventListener("mouseleave", clear);
+          g.addEventListener("click", (e) => {
+            e.stopPropagation();
+            clear();
+            g.classList.add("active");
+            showForWithLabel(g);
+          });
+        });
+        if (stageRef.current) {
+          stageRef.current.addEventListener("mouseleave", clear);
+          stageRef.current.addEventListener("click", () => clear());
+        }
+
+        // 5) 실행
+        positionLabels();
+        window.addEventListener("resize", positionLabels);
+        new window.ResizeObserver(positionLabels).observe(stageRef.current!);
+      })
+      .catch((error) => {
+        console.error("Error loading SVG:", error);
+        if (svgLayerRef.current)
+          svgLayerRef.current.innerHTML =
+            `<div style="display: flex; align-items: center; justify-content: center; height: 100%; color: #666; font-size: 14px;">지도를 불러올 수 없습니다. (${error.message})</div>`;
+      });
+
+    // cleanup
+    return () => {
+      window.removeEventListener("resize", () => {});
+    };
+  }, []);
+
+  // 스타일은 필요에 따라 tailwind, css 등으로 커스터마이즈하세요.
+  return (
+    <div
+      ref={stageRef}
+      id="stage"
+      style={
+        {
+          width: "100%",
+          height: "560px",
+          position: "relative",
+          zIndex: 20,
+          "--map-inset": "0",
+        } as React.CSSProperties
+      }
+    >
+      <div
+        className={styles.bgLayer}
+        id="bgLayer"
+      />
+      <div
+        ref={svgLayerRef}
+        id="svgLayer"
+        className={`${styles.svgLayer} ${styles.svgContainer}`}
+        style={{ width: "100%", height: "100%" }}
+      />
+      <div
+        ref={labelsLayerRef}
+        id="labelsLayer"
+        className={styles.labelsLayer}
+        style={{
+          position: "absolute",
+          left: 0,
+          top: 0,
+          width: "100%",
+          height: "100%",
+          pointerEvents: "none",
+        }}
+      />
+      <div
+        ref={badgeRef}
+        id="badge"
+        className={styles.badge}
+        style={{ position: "absolute", zIndex: 10, display: "block" }}
+      />
+      <div
+        ref={popupRef}
+        id="popup"
+        className={styles.popup}
+        style={{
+          position: "absolute",
+          zIndex: 20,
+          background: "#fff",
+          border: "1px solid #ccc",
+          borderRadius: 8,
+          padding: 12,
+          minWidth: 160,
+          boxShadow: "0 2px 8px #0002",
+          display: "block",
+          opacity: 0,
+          visibility: "hidden",
+        }}
+      >
+        <table style={{ width: "100%" }}>
+          <thead>
+            <tr>
+              <th>구분</th>
+              <th ref={colTitleRef} id="colTitle">
+                시설수
+              </th>
+            </tr>
+          </thead>
+          <tbody ref={rowsRef} id="rows"></tbody>
+        </table>
+      </div>
+    </div>
+  );
+}

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

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

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

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

apps/cm/src/pages/dashboard/lib/korea-basin-map.tsx

@@ -1,502 +0,0 @@
-"use client";
-/**
- * 유역 지도
- */
-import React, { useCallback, useEffect, useRef, useState } from "react";
-import { useStore } from "zustand";
-import styles from "./korea-basin-map.module.css"; // 추가
-import { basinStore } from "../api/fo-service";
-import { basinKeyMap,MANUAL_LABEL_POS  } from "../model/map-data";
-import { BASIN_DATA, BASIN_IDS } from "../model/map-data";
-import { svcInfo } from "../model/map-data";
-import type { mapOperFcltType, mapReuseMapType} from "../model/fo-interface";
-import type { mapPplOldType } from "../model/sn-interface";
-import { useMapOperFcltStore, OperationApi, useMapReuseMapStore } from "../api/fo-service";
-import { useMapOldPplStore } from "../api/sn-service";
-import {Button} from "@common/components";
-
-const SVG_URL = "/images/region_map.svg"; // public 폴더에 region_map.svg 위치 필요
-
-function fmt(n: number) {
-  return new Intl.NumberFormat("ko-KR").format(n);
-}
-
-const mapOperFcltData: mapOperFcltType = {
-    colTitle: {cnt:"개소수",rt:"가동률"}, //헤더 영역
-    data: [ 
-      {name: "금강", cnt: 710, rt: 100,},
-      {name: "한강", cnt: 983, rt: 100,},
-      {name: "낙동강", cnt: 1032, rt: 100,},
-      {name: "영산강", cnt: 1261, rt: 100,},
-    ]
-};
-const mapPplOldData: mapPplOldType = {
-    colTitle:  {totalLen: "총길이",pplLen2025: "20~25년",pplLen2530: "25~30년",pplLen30  : "30년 이상" }, //헤더 영역
-    data: [ 
-      {name: "금강", totalLen: 4545, pplLen2025: 1140, pplLen2530: 1391, pplLen30  : 2014},
-      {name: "한강", totalLen: 17099, pplLen2025: 3181, pplLen2530: 3615, pplLen30  : 10303},
-      {name: "낙동강", totalLen: 14745, pplLen2025: 3100, pplLen2530: 1814, pplLen30  : 9831},
-      {name: "영산강", totalLen: 5073, pplLen2025: 1662, pplLen2530: 1411, pplLen30  : 2000},
-    ]
-};
-const mapReuseMapData: mapReuseMapType = {
-    colTitle:  {reuseAmnt: "하수재이용량",cnt  : "시설수" }, //헤더 영역
-    data: [ 
-      {name: "금강", reuseAmnt: 17099, cnt: 3181},
-      {name: "한강", reuseAmnt: 17099, cnt: 3181},
-      {name: "낙동강", reuseAmnt: 14745, cnt: 3100},
-      {name: "영산강", reuseAmnt: 5073, cnt: 1662},
-    ]
-};
-
-export function KoreaBasinMap() {
-  const stageRef = useRef<HTMLDivElement>(null);
-  const svgLayerRef = useRef<HTMLDivElement>(null);
-  const labelsLayerRef = useRef<HTMLDivElement>(null);
-  const popupRef = useRef<HTMLDivElement>(null);
-  const [services, setServices] = useState(svcInfo);
-  const [popupContent, setPopupContent] = useState<{ title: string; items: { header: string; data: string }[] }>({
-    title: '',
-    items: [],
-  });
-  const { selectedBasin, setSelectedBasin } = useStore(basinStore);
-  const selectedBasinKey = basinKeyMap[selectedBasin];
-  const {mapOperFclt}  = useMapOperFcltStore();
-  const {mapData: mapPplOld}  = useMapOldPplStore();
-  const {setMapData: setMapReuseMapData}  = useMapReuseMapStore();
-  mapOperFcltData.data = mapOperFclt;
-  mapPplOldData.data = mapPplOld;
-  // mapReuseMapData.data =   mapReuseMap;
-  let standardYear = '2024';
-  useEffect(() => {   
-    const fetchData = async () => {
-      try {
-        standardYear = await OperationApi.getStandardYear();
-        const mapReuseMapRslt = await OperationApi.getReuseMap(standardYear);
-        setMapReuseMapData(mapReuseMapRslt);
-        mapReuseMapData.data = mapReuseMapRslt;
-      } catch (e) {
-        console.error("하수재이용량 map 데이터 조회 실패", e);
-      }
-    };
-    fetchData();
-  }, []);
-  // 유역정보 
-  const showFor = useCallback((g: SVGGElement) => {
-    const activeService = services.find(s => s.active);
-    if (!activeService) return;
-
-    const key = (g as SVGGElement & { dataset: { key: string; label: string } }).dataset.key;
-    const basinName = BASIN_DATA[key as keyof typeof BASIN_DATA]?.name || (g as SVGGElement & { dataset: { label: string } }).dataset.label;
-    
-    const newPopupContent: { title: string; items: { header: string; data: string }[] } = { title: '', items: [] };
-
-    if (activeService.svcId === 'fo') { // 운영실태
-      const item = mapOperFcltData.data.find(d => d.name === basinName);
-      newPopupContent.title = `${standardYear}년도 ${basinName}유역 시설운영 현황`;
-      newPopupContent.items.push({
-        header: mapOperFcltData.colTitle.cnt,
-        data: item ? `${fmt(item.cnt)}개소` : '-',
-      });
-      newPopupContent.items.push({
-        header: mapOperFcltData.colTitle.rt,
-        data: item ? `${item.rt}%` : '-',
-      });
-    } else if (activeService.svcId === 'sn') { // 하수관로
-      const item = mapPplOldData.data.find(d => d.name === basinName);
-      newPopupContent.title = `${standardYear}년도 ${basinName}유역 노후하수관로 현황`;
-      const colTitles = mapPplOldData.colTitle;
-      newPopupContent.items.push({
-        header: colTitles.totalLen,
-        data: item ? `${fmt(item.totalLen)}km` : '-',
-      });
-      newPopupContent.items.push({
-        header: colTitles.pplLen2025,
-        data: item ? `${fmt(item.pplLen2025)}km` : '-',
-      });
-      newPopupContent.items.push({
-        header: colTitles.pplLen2530,
-        data: item ? `${fmt(item.pplLen2530)}km` : '-',
-      });
-      newPopupContent.items.push({
-        header: colTitles.pplLen30,
-        data: item ? `${fmt(item.pplLen30)}km` : '-',
-      });
-    } else if (activeService.svcId === 'wr') { // 물재이용
-      const item = mapReuseMapData.data.find(d => d.name === basinName);
-      newPopupContent.title = `${standardYear}년도 ${basinName}유역 물재이용 현황`;
-      newPopupContent.items.push({
-        header: mapReuseMapData.colTitle.reuseAmnt,
-        data: item ? `${fmt(item.reuseAmnt)}m³` : '-',
-      });
-      newPopupContent.items.push({
-        header: mapReuseMapData.colTitle.cnt,
-        data: item ? `${fmt(item.cnt)}개소` : '-',
-      });
-    }
-
-    setPopupContent(newPopupContent);
-
-    if (!stageRef.current) return;
-    const sRect = stageRef.current.getBoundingClientRect(),
-      r = g.getBoundingClientRect();
-    const cx = (r.left + r.right) / 2 - sRect.left;
-    const ty = r.top - sRect.top;
-    if (popupRef.current) {
-      popupRef.current.style.left = cx + "px";
-      popupRef.current.style.top = ty + 6 + "px";
-      popupRef.current.style.opacity = "1";
-      popupRef.current.style.visibility = "visible";
-      if (styles.show) {
-        popupRef.current.classList.add(styles.show);
-      }
-    }
-
-    if (popupRef.current) {
-      const pRect = popupRef.current.getBoundingClientRect();
-      const x = Math.max(
-        12 + pRect.width / 2,
-        Math.min(cx, sRect.width - 12 - pRect.width / 2),
-      );
-      popupRef.current.style.left = x + "px";
-    }
-  }, [services, mapOperFclt]);
-
-  // selectedBasinKey prop이 변경될 때 지도를 업데이트하는 useEffect
-  useEffect(() => {
-    if (selectedBasinKey) {
-      const svg = svgLayerRef.current?.querySelector("svg");
-      if (!svg) return;
-
-      // 모든 유역의 활성화 상태를 초기화합니다.
-      svg.querySelectorAll('.basin.active').forEach(el => el.classList.remove('active'));
-
-      const targetGroup = svg.querySelector(`.basin[data-key="${selectedBasinKey}"]`) as SVGGElement | null;
-      targetGroup?.classList.add('active');
-    }
-  }, [selectedBasinKey]);
-
-  useEffect(() => {
-    let svg: SVGSVGElement | null = null;
-    let gs: SVGGElement[] = [];
-    let labels: HTMLDivElement[] = [];
-
-    const clear = () => {
-      gs.forEach((el) => el.classList.remove("active"));
-      if (popupRef.current) {
-        if (styles.show) {
-          popupRef.current.classList.remove(styles.show);
-        }
-        popupRef.current.style.opacity = "0";
-      }
-      labels.forEach((l) => l.classList.remove("active"));
-    };
-
-    // const positionLabels = () => {
-    //   // This function's content is moved inside the fetch callback
-    // };
-
-    // console.log("Loading SVG from:", SVG_URL);
-    fetch(SVG_URL)
-      .then((r) => {
-        // console.log("SVG fetch response:", r.status, r.statusText);
-        if (!r.ok) throw new Error(`HTTP error! status: ${r.status}`);
-        return r.text();
-      })
-      .then((txt) => {
-        // console.log("SVG content loaded, length:", txt.length);
-        if (!svgLayerRef.current) {
-          console.error("svgLayerRef.current is null");
-          return;
-        }
-        svgLayerRef.current.innerHTML = txt;
-        svg = svgLayerRef.current.querySelector("svg");
-        if (!svg) {
-          console.error("SVG element not found in loaded content");
-          return;
-        }
-        // console.log("SVG element found:", svg);
-
-        // viewBox/크기 세팅
-        if (!svg.hasAttribute("viewBox")) {
-          const bb = svg.getBBox();
-          svg.setAttribute(
-            "viewBox",
-            [bb.x, bb.y, bb.width, bb.height].join(" "),
-          );
-        }
-        const vb = (svg.getAttribute("viewBox") || "").split(/\s+/).map(Number);
-        if (vb.length === 4 && vb[3]! > 0 && stageRef.current) {
-          stageRef.current!.style.aspectRatio = String(vb[2]! / vb[3]!);
-        }
-        svg!.setAttribute("preserveAspectRatio", "xMidYMid meet");
-        svg.style.width = "100%";
-        svg.style.height = "100%";
-
-        // 1) 지도 그룹 수집
-        gs = [];
-        // console.log("Looking for basin groups in SVG...");
-        BASIN_IDS.forEach((item) => {
-          let g: SVGGElement | null = null;
-          for (const id of item.labels) {
-            g = svg!.getElementById(id) as SVGGElement | null;
-            if (g) {
-              // console.log(`Found group for ${item.key} with id '${id}':`, g);
-              break;
-            }
-          }
-          if (!g) {
-            console.warn(`No group found for ${item.key} with labels:`, item.labels);
-            return;
-          }
-          g.classList.add("basin");
-          (g as SVGGElement & { dataset: { key: string; label: string } }).dataset.key = item.key;
-          (g as SVGGElement & { dataset: { key: string; label: string } }).dataset.label = item.labels[0] || '';
-          
-          // 패스에 기본 스타일 적용
-          const paths = g.querySelectorAll('path');
-          paths.forEach((path) => {
-            path.style.fill = 'rgba(0, 150, 255, 0.2)';
-            path.style.stroke = '#0066cc';
-            path.style.strokeWidth = '1';
-            path.style.vectorEffect = 'non-scaling-stroke';
-          });
-          
-          gs.push(g);
-        });
-        // console.log(`Found ${gs.length} basin groups`);
-        
-        // 각 유역 그룹의 패스 정보 확인
-        // gs.forEach((g, index) => {
-        //   const paths = g.querySelectorAll('path');
-        //   // console.log(`Group ${index} (${(g as SVGGElement & { dataset: { key: string } }).dataset.key}):`, {
-        //   //   element: g,
-        //   //   pathCount: paths.length,
-        //   //   paths: Array.from(paths).map(p => ({
-        //   //     className: p.className.baseVal,
-        //   //     d: p.getAttribute('d')?.substring(0, 50) + '...'
-        //   //   }))
-        //   // });
-        // });
-
-        function showForWithLabel(g: SVGGElement) {
-          // console.log("showForWithLabel called for:", g);
-          showFor(g);
-          const idx = gs.indexOf(g);
-          labels.forEach((l) => l.classList.remove("active"));
-          if (idx >= 0) labels[idx]!.classList.add("active");
-        }
-
-        // 3) 라벨 DOM 생성
-        labels = [];
-        if (labelsLayerRef.current) {
-          labelsLayerRef.current.innerHTML = "";
-          gs.forEach((g) => {
-            const el = document.createElement("div");
-            el.className = styles.basinLabel || '';
-            el.textContent = (g as SVGGElement & { dataset: { label: string } }).dataset.label || '';
-            labelsLayerRef.current!.appendChild(el);
-            labels.push(el);
-          });
-        }
-
-        // 3) 라벨 위치
-        const positionLabels = () => {
-          if (!stageRef.current || !svg) return;
-          const sRect = stageRef.current.getBoundingClientRect();
-          const inset =
-            parseFloat(
-              getComputedStyle(stageRef.current).getPropertyValue(
-                "--map-inset",
-              ) || "0",
-            ) / 100;
-          const left = sRect.width * inset,
-            top = sRect.height * inset;
-          const w = sRect.width * (1 - inset * 2),
-            h = sRect.height * (1 - inset * 2);
-          const [vx, vy, vw, vh] = (
-            svg!.getAttribute("viewBox") || "0 0 100 100"
-          )
-            .split(/\s+/)
-            .map(Number);
-
-          const svgRect = svg.getBoundingClientRect();
-          const stageRect = stageRef.current.getBoundingClientRect();
-          const offsetX = svgRect.left - stageRect.left - left;
-          const offsetY = svgRect.top - stageRect.top - top;
-
-          gs.forEach((g, i) => {
-            const key = (g as SVGGElement & { dataset: { key: string } }).dataset.key;
-            const manual = (MANUAL_LABEL_POS as Record<string, { x?: number; y?: number; px?: number; py?: number }>)[key];
-            let px, py;
-            if (
-              manual &&
-              (("x" in manual && "y" in manual) ||
-                ("px" in manual && "py" in manual))
-            ) {
-              if ("px" in manual) {
-                px = left + (manual.px || 0) + offsetX;
-                py = top + (manual.py || 0) + offsetY;
-              } else {
-                px = left + w * (manual.x || 0) + offsetX;
-                py = top + h * (manual.y || 0) + offsetY;
-              }
-            } else {
-              const b = g.getBBox();
-              const cx = b.x + b.width / 2,
-                cy = b.y + b.height / 2;
-              px = ((cx - vx!) / vw!) * w + left + offsetX;
-              py = ((cy - vy!) / vh!) * h + top + offsetY;
-            }
-            labels[i]!.style.left = `${px}px`;
-            labels[i]!.style.top = `${py + 18}px`;
-          });          
-        }
-
-        // 4) 상호작용 (함수들은 이미 위에서 정의됨)
-        gs.forEach((g) => {
-          g.addEventListener("mouseenter", () => {
-            clear();
-            g.classList.add("active");
-            showForWithLabel(g);
-          });
-          g.addEventListener("mousemove", () => {
-            if (g.classList.contains("active")) showForWithLabel(g);
-          });
-          g.addEventListener("mouseleave", clear);
-          g.addEventListener("click", (e) => {
-            e.stopPropagation();
-            clear();
-            g.classList.add("active");
-            showForWithLabel(g);
-            const basinKey = g.dataset.key as keyof typeof BASIN_DATA | undefined;
-            if (basinKey) {
-              const basinName = BASIN_DATA[basinKey].name;
-              setSelectedBasin(basinName);
-            }
-          });
-          
-        });
-        if (stageRef.current) {
-          stageRef.current.addEventListener("mouseleave", clear);
-          stageRef.current.addEventListener("click", () => clear());
-        }
-
-        // 5) 실행
-        positionLabels();
-        window.addEventListener("resize", positionLabels);
-        new window.ResizeObserver(positionLabels).observe(stageRef.current!);
-      })
-      .catch((error) => {
-        console.error("Error loading SVG:", error);
-        if (svgLayerRef.current)
-          svgLayerRef.current.innerHTML =
-            `<div style="display: flex; align-items: center; justify-content: center; height: 100%; color: #666; font-size: 14px;">지도를 불러올 수 없습니다. (${error.message})</div>`;
-      });
-
-    // cleanup
-    return () => {
-      window.removeEventListener("resize", () => {});
-    };
-  }, [selectedBasinKey, showFor]); // 의존성 배열에 mapOperFclt 추가 불필요
-
-  const handleSvcInfoClick = (clickedSvcId: string) => {
-    setServices(prevServices =>
-      prevServices.map(svc => ({
-        ...svc,
-        active: svc.svcId === clickedSvcId,
-      }))
-    );
-  };
-  // 스타일은 필요에 따라 tailwind, css 등으로 커스터마이즈하세요.
-  return (
-    <div className="col-span-3 !p-0 relative z-10" style={{ height: "765px", background: "rgba(255, 255, 255, 0.6)" }}>
-      <div className="card card-border" style={{ height: "100%" }}>
-        <div className="card-header text-foreground">
-          <h3 className="text-2xl font-medium">유역별 정보</h3>
-          
-            <div className="flex gap-2">
-              {services.map((svc) => (
-                <Button
-                  key={svc.name}
-                  className="h-[3.2rem] float-right"
-                  color={svc.active ? "primary" : "white"}
-                  onClick={() => handleSvcInfoClick(svc.svcId)}
-                >
-                  {svc.name}
-                </Button>
-              ))}
-            </div>
-         
-        </div>
-        <div id="mapArea" style={{height: "calc(100% - 40px)"}}> 
-          <div
-            ref={stageRef}
-            id="stage"
-            style={
-              {
-                aspectRatio: 0.72/1, 
-                width: "100%",
-                maxHeight: "100%",
-                position: "relative",
-                margin: "auto",      
-                "--map-inset": "0%",
-              } as React.CSSProperties
-            }
-          >
-            <div
-              className={styles.bgLayer}
-              id="bgLayer"
-            />
-            <div
-              ref={svgLayerRef}
-              id="svgLayer"
-              className={`${styles.svgLayer} ${styles.svgContainer}`}
-              style={{ width: "100%", height: "100%" }}
-            />
-            <div
-              ref={labelsLayerRef}
-              id="labelsLayer"
-              className={styles.labelsLayer}
-              style={{
-                position: "absolute",
-                left: 0,
-                top: 0,
-                width: "100%",
-                height: "100%",
-                pointerEvents: "none",
-              }}
-            />
-            <div
-              ref={popupRef}
-              id="popup"
-              className={`${styles.popup} absolute z-20 font-sans border border-blue-200 rounded-lg shadow-md overflow-hidden opacity-0 invisible bg-blue-50`}
-              style={{
-                minWidth: 160,
-                display: 'grid',
-                gridTemplateColumns: `repeat(${Math.max(1, popupContent.items.length)}, 1fr)`,
-              }}
-            >
-              {/* 제목 영역 */}
-              <div className="bg-blue-100 text-center font-bold border-b-2 border-blue-200 flex items-center justify-center" style={{ gridColumn: `span ${Math.max(1, popupContent.items.length)}` }}>
-                {popupContent.title}
-              </div>
-
-              {/* 헤더 및 데이터 동적 렌더링 */}
-              {popupContent.items.map((item, index) => (
-                <div key={`header-${index}`} className={`text-center border-b-2 border-blue-200 flex items-center justify-center ${index < popupContent.items.length - 1 ? 'border-r-2' : ''}`}>
-                  {item.header}
-                </div>
-              ))}
-              {popupContent.items.map((item, index) => (
-                <div key={`data-${index}`} className={`text-center flex items-center justify-center ${index < popupContent.items.length - 1 ? 'border-r-2' : ''}`}>
-                  {item.data}
-                </div>
-              ))}
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>  
-  );
-}

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

@@ -0,0 +1,32 @@
+export interface SiteStatisticsContent {
+  siteId: string;
+  siteNm: string;
+  accessHour: string;
+  accessCnt: number;
+}
+
+export interface MenuStatisticsContent {
+  menuCd: number;
+  menuNm: string;
+  accessCnt: number;
+}
+
+export interface Dashboard {
+  memberTotCnt: number;
+  memberTodayCnt: number;
+  pstTotCnt: number;
+  pstTodayCnt: number;
+  accessTodayCnt: number;
+  accessBefDayPer: number;
+  apiTodayCnt: number;
+  waitMemberCnt: number;
+  waitCntnCnt: number;
+  notiList: [];
+  schdlList: [];
+  siteAccessList: SiteStatisticsContent[];
+  menuAccessList: MenuStatisticsContent[];
+}
+
+export interface DashboardService {
+  getDashboard(): Promise<Dashboard>;
+}

apps/cm/src/pages/dashboard/model/fo-interface.ts

@@ -1,77 +0,0 @@
-export interface OperFcltContent {
-  rvbsn: string; // 유역
-  cnt: number;    // 개소수
-  fctCpc: number; // 가동률 (용량)
-  gubun: string;  // 구분
-}
-
-export interface OperWqltContent {
-  rvbsn: string;          // 유역명
-  yr: string;             // 연도
-
-  sumInflBod: number;     // 유입수 BOD 합계
-  sumInflToc: number;     // 유입수 TOC 합계
-  sumInflSs: number;      // 유입수 SS 합계
-  sumInflTp: number;      // 유입수 TP 합계
-  sumInflTn: number;      // 유입수 TN 합계
-
-  sumEfflBod: number;     // 유출수 BOD 합계
-  sumEfflToc: number;     // 유출수 TOC 합계
-  sumEfflSs: number;      // 유출수 SS 합계
-  sumEfflTp: number;      // 유출수 TP 합계
-  sumEfflTn: number;      // 유출수 TN 합계
-
-  avgInflBod: number;     // 기간 평균 유입수 BOD
-  avgInflToc: number;     // 기간 평균 유입수 TOC
-  avgInflSs: number;      // 기간 평균 유입수 SS
-  avgInflTp: number;      // 기간 평균 유입수 TP
-  avgInflTn: number;      // 기간 평균 유입수 TN
-
-  avgEfflBod: number;     // 기간 평균 유출수 BOD
-  avgEfflToc: number;     // 기간 평균 유출수 TOC
-  avgEfflSs: number;      // 기간 평균 유출수 SS
-  avgEfflTp: number;      // 기간 평균 유출수 TP
-  avgEfflTn: number;      // 기간 평균 유출수 TN
-}
-
-export interface ReuseMapContent {
-  name: string;          // 유역명
-  reuseAmnt: number;      // 하수재이용량
-  cnt: number;            // 시설수
-}
-
-export interface ReuseStatusContent {
-  yr: string;
-  sewage: number;
-  reclaimed: number;
-  rainwater: number;
-}
-
-export interface OperationService {
-  getStandardYear(): Promise<string> ;
-  getDashOperCntRt(year: string): Promise<OperFcltContent[]>;
-  getDashOperWqlt(year: string): Promise<OperWqltContent[]>;
-  getReuseStatus(): Promise<ReuseStatusContent[]>;
-}
-
-export type mapOperFcltItem = {
-  name: string;
-  cnt: number;
-  rt: number;
-};
-
-export type mapOperFcltType = {
-  colTitle:  {
-    cnt: string; // 개소수
-    rt: string;  // 가동률
-  };
-  data: mapOperFcltItem[];
-};
-
-export type mapReuseMapType = {
-  colTitle:  {
-    reuseAmnt: string; // 하수재이용량
-    cnt: string;  // 시설수
-  };
-  data: ReuseMapContent[];
-};

apps/cm/src/pages/dashboard/model/map-data.ts

@@ -1,65 +0,0 @@
-export const basinKeyMap: { [key: string]: string } = {
-  "한강": "han",
-  "금강": "geum",
-  "낙동강": "nakdong",
-  "영산강": "yeongsan",
-};
-
-// --- 라벨 좌표(수동 고정값) : inset 적용 영역 기준 퍼센트 또는 px 사용 ---
-//  - 퍼센트: { x:0~1, y:0~1 }  (권장: 반응형에 유리)
-//  - 픽셀:   { px:number, py:number } (inset 좌상단 원점 기준)
-export const MANUAL_LABEL_POS = {
-  han: { x: 0.52, y: 0.14 },
-  geum: { x: 0.28, y: 0.47 },
-  nakdong: { x: 0.64, y: 0.47 },
-  yeongsan: { x: 0.18, y: 0.77 },
-};
-
-export const BASIN_DATA = {
-  han: {
-    name: "한강",
-    colTitle: "시설수",
-    rows: [
-      ["500m³ 미만", 100000000],
-      ["500m³ 이상", 100000000],
-    ],
-  },
-  geum: {
-    name: "금강",
-    colTitle: "시설수",
-    rows: [
-      ["500m³ 미만", 100000000],
-      ["500m³ 이상", 100000000],
-    ],
-  },
-  nakdong: {
-    name: "낙동강",
-    colTitle: "시설수",
-    rows: [
-      ["500m³ 미만", 100000000],
-      ["500m³ 이상", 100000000],
-    ],
-  },
-  yeongsan: {
-    name: "영산강",
-    colTitle: "시설수",
-    rows: [
-      ["500m³ 미만", 100000000],
-      ["500m³ 이상", 100000000],
-    ],
-  },
-};
-
-export const BASIN_IDS = [
-  { key: "han", labels: ["한강", "han"] },
-  { key: "geum", labels: ["금강", "geum"] },
-  { key: "nakdong", labels: ["낙동강", "nakdong"] },
-  { key: "yeongsan", labels: ["영산강", "yeongsan"] },
-];
-
-export const svcInfo = [
-    {svcId: "wr", active: true, name:"물재이용"},
-    {svcId: "sn", active: false, name:"하수관로"},
-    {svcId: "fo", active: false, name:"운영실태"},
-]
-    

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

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

apps/cm/src/pages/dashboard/model/sn-interface.ts

@@ -1,85 +0,0 @@
-import { basinKeyMap } from "../model/map-data";
-export interface PplLengthContent {
-  zoneNm: string;
-  sumPrlgVl: number;
-  usgCd?: string;
-  yearGroup?: string;
-}
-
-export interface SewerageService {
-  getPplLength(ymdFrom: string, ymdTo: string, useCd: string): Promise<PplLengthContent[]>;
-  getPplUseLength(ymdFrom: string, ymdTo: string, useCd: string): Promise<PplLengthContent[]>;
-  getMvUsgPplLength(): Promise<PplLengthContent[]>;
-  getMvOldPplLength(): Promise<PplLengthContent[]>;
-}
-
-export interface ChartDataSet {
-  label: string;
-  data: (number | undefined)[];
-  backgroundColor: string;
-  borderRadius?: number;
-}
-export interface OldPplChartData {
-  labels: string[];
-  datasets: ChartDataSet[];
-}
-
-type SnOldPplItem = {
-  name: string;
-  colTitle: string[];
-  rows: number[];
-};
-
-type SnOldPplLength = {
-  [key: string]: SnOldPplItem;
-};
-
-export type mapPplOldItem = {
-  name: string;
-  totalLen: number;
-  pplLen2025: number;
-  pplLen2530: number;
-  pplLen30: number;
-};
-
-export type mapPplOldType = {
-  colTitle: {
-    totalLen: string; // 총길이
-    pplLen2025: string;  // 20~25년
-    pplLen2530: string;  // 25~30년
-    pplLen30: string;  // 30년 이상
-  };
-  data: mapPplOldItem[];
-};
-
-
-export function buildSnOldPplLength(
-  chartData: {
-    labels: string[];
-    datasets: { label: string; data: number[] }[];
-  },
-  totalLengths: number[]
-): SnOldPplLength {
-  const colTitle = ["총길이", ...chartData.datasets.map((ds) => ds.label)];
-
-  const result: SnOldPplLength = {};
-
-  chartData.labels.forEach((basinName, index) => {
-    const key = basinKeyMap[basinName]; // geum, han, nakdong, yeongsan
-    if (!key) return; // 매핑 안되면 스킵
-    const total = totalLengths[index] ?? 0;
-    const datasetValues = chartData.datasets.map(
-      (ds) => ds.data[index] ?? 0,
-    );
-    result[key] = {
-      name: basinName,
-      colTitle,
-      rows: [
-        total,          // 총길이 (undefined면 0)
-        ...datasetValues, // 각 연차 데이터 (undefined면 0)
-      ],
-    };
-  });
-
-  return result;
-}

apps/cm/src/pages/dashboard/model/support-columns.tsx

@@ -1,49 +0,0 @@
-import type { ColumnDef } from "@tanstack/react-table";
-import type { Support } from "../api/support-service";
-
-const typeLabelMap: Record<string, string> = {
-  waterQuality: "수질",
-  flood: "침수",
-  technical: "기술지원",
-};
-
-const supportTableColumns: ColumnDef<Support>[] = [
-  {
-    accessorKey: "type",
-    header: "구분",
-    cell: ({ getValue }) => {
-      const value = getValue() as string;
-      return typeLabelMap[value] || value;
-    },
-  },
-  {
-    accessorKey: "total",
-    header: "합계",
-  },
-  {
-    accessorKey: "han",
-    header: "한강",
-  },
-  {
-    accessorKey: "nakdong",
-    header: "낙동강",
-  },
-  {
-    accessorKey: "geum",
-    header: "금강",
-  },  
-  {
-    accessorKey: "youngsang",
-    header: "영산강",
-  },
-  {
-    accessorKey: "ongoing",
-    header: "진행중",
-  },
-  {
-    accessorKey: "completed",
-    header: "완료",
-  },
-];
-
-export { supportTableColumns };

apps/cm/src/pages/dashboard/model/table-columns.tsx

@@ -1,9 +1,28 @@
 import dayjs from "dayjs";
 import type { ColumnDef } from "@tanstack/react-table";
-import type { MyPost, NoticePost } from "@/entities/post";
-import type { Schedule } from "../api/schedule-service";
+import { Badge } from "@common/components";
+import type { Post, MyPost } from "@/entities/post";
 
-const noticePostTableColumns: ColumnDef<NoticePost>[] = [
+const noticePostTableColumns: ColumnDef<Post>[] = [
+  {
+    header: "번호",
+    cell: ({ row, table }) => {
+      if (row.original.upndFixYn === "Y") {
+        return (
+          <Badge
+            color="orange"
+            className="flex size-8 items-center justify-center"
+          >
+            <i className="diveicon di-volume-up-fill" />
+          </Badge>
+        );
+      }
+      const totalRows = table.getRowCount();
+      const currentPage = table.getState().pagination.pageIndex;
+      const pageSize = table.getState().pagination.pageSize;
+      return totalRows - (currentPage * pageSize + row.index);
+    },
+  },
   {
     accessorKey: "pstTtl",
     header: "제목",
@@ -24,35 +43,33 @@ const noticePostTableColumns: ColumnDef<NoticePost>[] = [
 ];
 
 const myPostTableColumns: ColumnDef<MyPost>[] = [
+  {
+    header: "번호",
+    cell: ({ row, table }) => {
+      const totalRows = table.getRowCount();
+      const currentPage = table.getState().pagination.pageIndex;
+      const pageSize = table.getState().pagination.pageSize;
+      return totalRows - (currentPage * pageSize + row.index);
+    },
+  },
   {
     accessorKey: "pstTtl",
     header: "제목",
   },
+  {
+    accessorKey: "wrtrNm",
+    header: "작성자",
+  },
   {
     accessorKey: "regDt",
     header: "작성일",
     cell: ({ row }) => dayjs(row.original.regDt).format("YYYY-MM-DD"),
   },
-];
-
-
-const scheduleTableColumns: ColumnDef<Schedule>[] = [
   {
-    accessorKey: "schdlTtl",
-    header: "주요일정",
-    cell: ({ row }) => {
-      const startDate = dayjs(row.original.schdlBgngDt).format("YYYY-MM-DD");
-      const endDate = dayjs(row.original.schdlEndDt).format("YYYY-MM-DD");
-      const schdlTtl = row.original.schdlTtl;
-      return (
-        <div className="text-left">
-          [{startDate} ~ {endDate}]<br />{schdlTtl}
-        </div>
-      );
-    },
+    accessorKey: "inqNocs",
+    header: "조회수",
   },
 ];
 
 
-
-export { noticePostTableColumns, myPostTableColumns, scheduleTableColumns };
+export { noticePostTableColumns, myPostTableColumns };

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

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

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

@@ -1,203 +0,0 @@
-"use client";
-
-import { useRef, useState, useEffect } from "react";
-import { useQuery } from "@tanstack/react-query";
-import { ENDPOINT } from "@/shared/config";
-import {
-  getImageUrlByAtflCd,
-  getBannerList,
-  type Banner,
-} from "../api/banner-service";
-import { getCookie } from "@/shared/lib";
-import { useDragHandle } from "./sortable-panel";
-
-import {
-  Carousel,
-  CarouselContent,
-  CarouselItem,
-  CarouselNext,
-  CarouselPrevious,
-  Autoplay,
-} from "@common/components";
-
-type BannerImageProps = {
-  atflCd: string;
-  lnkgUrlAddr: string;
-};
-
-const BannerList: React.FC = () => {
-  const { dragHandleProps, isDragging } = useDragHandle();
-  const [siteId, setSiteId] = useState<string>("");
-
-  useEffect(() => {
-    const id = getCookie("site-id-key") ?? "";
-    setSiteId(id);
-  }, []);
-
-  const BannerImage = ({ atflCd, lnkgUrlAddr }: BannerImageProps) => {
-    const { data: imageUrl, isLoading } = useQuery({
-      queryKey: [ENDPOINT.ATTACH_SERVICE.IMAGES, atflCd],
-      queryFn: () => getImageUrlByAtflCd(atflCd),
-      enabled: !!atflCd,
-    });
-
-    const handleClick = () => {
-      if (lnkgUrlAddr) {
-        window.open(lnkgUrlAddr, "_blank");
-      }
-    };
-
-    if (isLoading) {
-      return (
-        <div className="relative flex h-[210px] w-full items-center justify-center bg-accent">
-          <div className="text-sm text-muted-foreground">로딩 중...</div>
-        </div>
-      );
-    }
-
-    if (!imageUrl) {
-      return (
-        <div className="relative flex h-[210px] w-full items-center justify-center bg-accent">
-          <div className="text-sm text-muted-foreground">이미지 없음</div>
-        </div>
-      );
-    }
-
-    return (
-      <div
-        className="relative h-[210px] w-full cursor-pointer overflow-hidden transition-opacity hover:opacity-80"
-        onClick={handleClick}
-      >
-        <div
-          className="h-full w-full bg-cover bg-center"
-          style={{ backgroundImage: `url(${imageUrl})` }}
-          role="img"
-          aria-label="배너 이미지"
-        />
-      </div>
-    );
-  };
-
-  const {
-    data: bannerList,
-    error: bannerError,
-    isLoading: isLoadingBanners,
-  } = useQuery<Banner[]>({
-    queryKey: [ENDPOINT.CMS_SERVICE.BANNERS, siteId],
-    queryFn: () => getBannerList(siteId),
-    enabled: !!siteId,
-    retry: false,
-  });
-
-  const plugin = useRef(Autoplay({ delay: 2000, stopOnInteraction: true }));
-
-  // MAIN 타입 배너만 필터링
-  const mainBanners =
-    bannerList?.filter((banner) => banner.bnrTypeCd === "BNRMAIN") ?? [];
-
-  // 에러 상태 판별 헬퍼 함수
-  const getErrorStatus = (e: unknown): number | undefined => {
-    if (!e || typeof e !== "object") return undefined;
-    const maybe = e as { status?: number; response?: { status?: number } };
-    return maybe.status ?? maybe.response?.status;
-  };
-
-  // siteId가 없을 때
-  if (!siteId) {
-    return (
-      <div className="card card-border">
-        <div className="relative flex h-[240px] w-full items-center justify-center bg-accent">
-          <div className="text-sm text-muted-foreground">
-            사이트 ID가 없습니다
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  // 401 에러 처리
-  if (bannerError) {
-    const is401Error =
-      (bannerError instanceof Error && bannerError.message.includes("401")) ||
-      getErrorStatus(bannerError) === 401;
-
-    if (is401Error) {
-      console.error("[BannerList] 401 인증 오류:", bannerError);
-      return (
-        <div className="card card-border">
-          <div className="relative flex h-[280px] w-full items-center justify-center bg-accent">
-            <div className="text-sm text-red-500">
-              인증이 필요합니다. 로그인해주세요.
-            </div>
-          </div>
-        </div>
-      );
-    }
-
-    console.error("[BannerList] 배너 조회 오류:", bannerError);
-    return (
-      <div className="card card-border">
-        <div className="relative flex h-[240px] w-full items-center justify-center bg-accent">
-          <div className="text-sm text-muted-foreground">
-            배너를 불러올 수 없습니다
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  // 로딩 중
-  if (isLoadingBanners) {
-    return (
-      <div className="card card-border">
-        <div className="relative flex h-[240px] w-full items-center justify-center bg-accent">
-          <div className="text-sm text-muted-foreground">배너 로딩 중...</div>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div className="card card-border" style={{ height: "230px" }}>
-      {/* 드래그 핸들 - 배너 위에 오버레이 */}
-      <div 
-        className={`absolute inset-0 z-10 cursor-grab active:cursor-grabbing ${isDragging ? 'bg-black/20' : 'bg-transparent'}`}
-        {...dragHandleProps}
-        title="배너를 드래그하여 패널 순서 변경"
-      />
-      <Carousel
-        plugins={[plugin.current]}
-        opts={{ loop: true }}
-        className="relative"
-      >
-        <CarouselContent className="-ml-0">
-          {mainBanners.length > 0 ? (
-            mainBanners.map((banner) => (
-              <CarouselItem
-                key={`banner-${banner.bnrSn}`}
-                className="basis-full pl-0"
-              >
-                <BannerImage
-                  atflCd={banner.atflCd}
-                  lnkgUrlAddr={banner.lnkgUrlAddr}
-                />
-              </CarouselItem>
-            ))
-          ) : (
-            <CarouselItem className="basis-full pl-0">
-              <div className="relative flex h-[210px] w-full items-center justify-center bg-accent">
-                <div className="text-sm text-muted-foreground">
-                  배너가 없습니다
-                </div>
-              </div>
-            </CarouselItem>
-          )}
-        </CarouselContent>
-        <CarouselPrevious className="absolute left-2 top-1/2 z-10 !bg-[rgba(255,255,255,0.8)] text-accent-foreground" />
-        <CarouselNext className="absolute right-2 top-1/2 z-10 !bg-[rgba(255,255,255,0.8)] text-accent-foreground" />
-      </Carousel>
-    </div>
-  );
-};
-
-export default BannerList;

apps/cm/src/pages/dashboard/ui/basIn-select.tsx

@@ -1,42 +0,0 @@
-"use client";
-
-import React from "react";
-import {
-  cn,
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@common/components";
-
-interface BasinSelectProps {
-  selectedBasin: string;
-  onValueChange: (value: string) => void;
-  className?: string;
-}
-
-const BasinSelect: React.FC<BasinSelectProps> = ({
-   selectedBasin, 
-   onValueChange,
-   className
-  }) => {
-  const basins = ["한강", "금강", "낙동강", "영산강"];
-
-  return (
-    <Select value={selectedBasin} onValueChange={onValueChange}>
-      <SelectTrigger  className={cn("w-[12rem]", className)}>
-        <SelectValue placeholder="유역 선택" />
-      </SelectTrigger>
-      <SelectContent>
-        {basins.map((basin) => (
-          <SelectItem key={basin} value={basin}>
-            {basin}
-          </SelectItem>
-        ))}
-      </SelectContent>
-    </Select>
-  );
-};
-
-export default BasinSelect;

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

@@ -1,13 +1,10 @@
 "use client";
 import { useEffect, useState } from "react";
 import { useRouter } from "next/navigation";
-import Image from "next/image";
 import { tokenManager } from "@/entities/auth/lib/token-manager";
 import { client } from "@/shared/api";
 import { ENDPOINT } from "@/shared/config";
-import { KoreaBasinMap } from "../lib/korea-basin-map";
-import { useDndSensors } from "../lib/hooks/use-dnd-sensors";
-import { usePanelOrder } from "../lib/hooks/use-panel-order";
+import { KoreaBasinMap } from "../lib/KoreaBasinMap"; 
 import {
   Chart as ChartJS,
   CategoryScale,
@@ -20,15 +17,7 @@ import {
   Tooltip,
   ArcElement,
 } from "chart.js";
-import { DndContext, closestCenter } from "@dnd-kit/core";
-import { SortableContext, rectSortingStrategy } from "@dnd-kit/sortable";
-import {
-  getInitialTopPanels,
-  getInitialBottomPanels,
-} from "../model/panel-config";
-import MyPostList from "./mypost-list";
-import ScheduleList from "./schedule-list";
-import { SortablePanel } from "./sortable-panel";
+import { Doughnut } from "react-chartjs-2";
 
 // Chart.js 등록
 ChartJS.register(
@@ -40,7 +29,7 @@ ChartJS.register(
   Filler,
   Legend,
   Tooltip,
-  ArcElement,
+  ArcElement
 );
 
 interface UserInfo {
@@ -53,29 +42,8 @@ interface UserInfo {
 function DashboardPage() {
   const [userInfo, setUserInfo] = useState<UserInfo | null>(null);
   const [error, setError] = useState("");
-  const [isMounted, setIsMounted] = useState(false);
   const router = useRouter();
 
-  // dnd-kit 센서 설정
-  const sensors = useDndSensors();
-
-  // 패널 순서 관리
-  const { panels: topPanels, handleDragEnd: handleTopDragEnd } = usePanelOrder({
-    initialPanels: getInitialTopPanels(),
-    storageKey: "dashboard-top-panels-order",
-  });
-
-  const { panels: bottomPanels, handleDragEnd: handleBottomDragEnd } =
-    usePanelOrder({
-      initialPanels: getInitialBottomPanels(),
-      storageKey: "dashboard-bottom-panels-order",
-    });
-
-  // 클라이언트에서만 드래그 기능 활성화 (hydration 문제 방지)
-  useEffect(() => {
-    setIsMounted(true);
-  }, []);
-
   useEffect(() => {
     const fetchUserInfo = async () => {
       console.log("fetchUserInfo called");
@@ -134,151 +102,199 @@ function DashboardPage() {
   };
 
   return (
-    <div className="p-2 sm:p-4 md:p-6">
+    <div className="p-6">
       <div className="flex flex-col gap-1">
-        {/* 첫번째 라인 - 좌측 6개 패널(2x3) + 우측 지도/사용자 정보 */}
-        <div className="flex flex-col gap-1 lg:flex-row">
-          {/* 좌측: 드래그 가능한 6개 패널 (2x3 그리드, 화면의 50%) */}
-          <div className="w-full lg:w-1/2">
-            {isMounted ? (
-              <DndContext
-                sensors={sensors}
-                collisionDetection={closestCenter}
-                onDragEnd={handleTopDragEnd}
-              >
-                <SortableContext
-                  items={topPanels.map((p) => p.id)}
-                  strategy={rectSortingStrategy}
-                >
-                  <div className="grid grid-cols-2 gap-1">
-                    {topPanels.map((panel) => (
-                      <SortablePanel
-                        key={panel.id}
-                        id={panel.id}
-                        className={panel.className}
-                      >
-                        {panel.component}
-                      </SortablePanel>
-                    ))}
-                  </div>
-                </SortableContext>
-              </DndContext>
-            ) : (
-              <div className="grid grid-cols-2 gap-1">
-                {topPanels.map((panel) => (
-                  <div key={panel.id} className={panel.className}>
-                    {panel.component}
-                  </div>
-                ))}
+        {/* 첫번째 라인 */}
+        <div className="grid grid-cols-8 gap-1">
+          {/* 첫번쨰 열 */}
+          <div className="col-span-2 h-250 !p-0">
+            {/* 전국 하수처리시설 가동률 */}
+            <div className="card card-border">
+              <div className="card-header text-foreground">
+                <h3 className="text-2xl font-medium">전국 하수처리시설 가동률</h3>
               </div>
-            )}
+              <div className="h-60 p-4">
+                <Doughnut
+                  data={{
+                    datasets: [{
+                      data: [75, 25], // 75% 가동률
+                      backgroundColor: ['#00DFE5', '#f5f5f5'],
+                      borderWidth: 0
+                    }]
+                  }}
+                  options={{
+                    responsive: true,
+                    maintainAspectRatio: false,
+                    cutout: '70%',
+                    circumference: 180, // 반원
+                    rotation: -90, // 왼쪽에서 시작
+                    plugins: {
+                      legend: {
+                        display: false
+                      },
+                      tooltip: {
+                        enabled: false
+                      }
+                    }
+                  }}
+                  plugins={[{
+                    id: 'centerText',
+                    afterDraw: (chart) => {
+                      const ctx = chart.ctx;
+                      const centerX = chart.width / 2;
+                      const centerY = chart.height / 2;
+                      
+                      // 가동률 텍스트
+                      ctx.save();
+                      ctx.font = 'bold 24px Arial';
+                      ctx.fillStyle = '#00DFE5';
+                      ctx.textAlign = 'center';
+                      ctx.textBaseline = 'middle';
+                      ctx.fillText('75%', centerX, centerY + 10);
+                      
+                      // 라벨 텍스트
+                      ctx.font = '12px Arial';
+                      ctx.fillStyle = '#666';
+                      ctx.fillText('가동률', centerX, centerY + 30);
+                      ctx.restore();
+                    }
+                  }]}
+                />
+              </div>
+            </div>
+
+            {/* 오수관로 및 우수관로 현황 */}
+            <div className="card card-border">
+              <div className="card-header text-foreground">
+                <h3 className="text-2xl font-medium">오수관로 및 우수관로 현황</h3>
+              </div>
+              <div className="h-60 p-4"></div>
+            </div>
+
+            {/* 하수처리수 재이용 */}
+            <div className="card card-border">
+              <div className="card-header text-foreground">
+                <h3 className="text-2xl font-medium">하수처리수 재이용</h3>
+              </div>
+              <div className="h-60 p-4"></div>
+            </div>
           </div>
 
-          {/* 우측: 고정된 지도와 사용자 정보 (화면의 50%) */}
-          <div className="flex w-full gap-1 lg:w-1/2">
-            {/* 지도영역 - 고정 (드래그 불가) */}
-            <div className="flex-1">
+          {/* 두번쨰 열 */}
+          <div className="col-span-2 h-250 !p-0">
+            {/* 하수처리시설(개소) */}
+            <div className="card card-border">
+              <div className="card-header text-foreground">
+                <h3 className="text-2xl font-medium">하수처리시설(개소)</h3>
+              </div>
+              <div className="grid grid-cols-2 gap-1 h-60 !p-0">
+                <div className="card card-border">
+                  <div className="card-header text-foreground text-center">
+                  <h3 className="text-l font-medium" style={{textAlign: "center", width: "100%"}}>500㎥ 미만(개소)</h3>
+                  </div>
+                  <div style={{fontSize: "38px", textAlign: "center", fontWeight: "600", lineHeight: "1.2", color: "#0ec58a", padding: "2px 0"}}>3,567  <span style={{fontSize: "14px", color: "#000000"}}>개소</span></div>
+                </div>
+                <div className="card card-border">
+                  <div className="card-header text-foreground text-center">
+                    <h3 className="text-l font-medium" style={{textAlign: "center", width: "100%"}}>500㎥ 이상(개소)</h3>
+                  </div>
+                  <div style={{fontSize: "38px", textAlign: "center", fontWeight: "600", lineHeight: "1.2", color: "#0ec58a", padding: "2px 0"}}>767  <span style={{fontSize: "14px", color: "#000000"}}>개소</span></div>
+                </div>
+                <div className="col-span-2" style={{width: "100%", textAlign: "right"}}>기준년월 : 2025.09 </div>
+              </div>
+            </div>
+            
+            {/* 노후하수관로현황 */}
+            <div className="card card-border">
+              <div className="card-header text-foreground">
+                <h3 className="text-2xl font-medium">노후하수관로현황</h3>
+              </div>
+              <div className="h-70 p-4">
+              </div>
+            </div>
+
+            {/* 재이용시설(개소) */}
+            <div className="card card-border">
+              <div className="card-header text-foreground">
+                <h3 className="text-2xl font-medium">재이용시설(개소)</h3>
+              </div>
+              <div className="h-70 p-4">
+              </div>
+            </div>
+          </div>
+          
+          {/* 지도영역 */}
+          <div className="col-span-3 h-200 !p-0 relative z-10">
+            <div className="card card-border">
+              <div className="card-header text-foreground">
+                <h3 className="text-2xl font-medium">유역별 정보</h3>
+              </div>
               <KoreaBasinMap />
             </div>
+          </div>
 
-            {/* 사용자 정보 카드 - 고정 (드래그 불가) */}
-            <div className="flex w-full flex-col gap-1 !p-0 lg:w-[300px]">
-              {error && <div className="mb-4 text-red-500">{error}</div>}
-              {userInfo ? (
-                <div
-                  className="card card_border login_info_box"
-                  style={{ minHeight: "150px", height: "auto" }}
-                >
-                  <div
-                    className="login_header"
-                    style={{ paddingLeft: "10px", paddingRight: "10px" }}
-                  >
-                    <div className="login_avatar">
-                      <Image
-                        src="/images/icon_loginID.png"
-                        alt="프로필"
-                        width={40}
-                        height={40}
-                        onError={(e) => {
-                          const target = e.target as HTMLImageElement;
-                          target.src =
-                            "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='20' r='18' fill='%23e1e5e9'/%3E%3Ctext x='20' y='26' font-size='20' text-anchor='middle' fill='%23999'%3E%3F%3C/text%3E%3C/svg%3E";
-                        }}
-                      />
-                    </div>
-                    <div className="login_user_info">
-                      <div className="user_name">
-                        {userInfo.userName || "-"}
-                      </div>
-                      <div className="user_status">온라인</div>
-                      <div className="user_status text-xs sm:text-sm">
-                        <b>2FA 활성화:</b>{" "}
-                        {userInfo.twoFactorEnabled ? "예" : "아니오"}
-                      </div>
-                    </div>
-                  </div>
-                  <div
-                    className="login_actions"
-                    style={{ paddingLeft: "10px", paddingRight: "10px" }}
-                  >
-                    <button
-                      className="login_btn text-xs sm:text-sm"
-                      onClick={handleLogout}
-                    >
-                      로그아웃
-                    </button>
-                    <button
-                      className="signup_btn text-xs sm:text-sm"
-                      onClick={handleChangePassword}
-                    >
-                      마이페이지
-                    </button>
-                  </div>
+          {/* 사용자 정보 카드 */}
+          <div className="card card-border col-span-1 h-80 p-10">
+            <h2 className="mb-6 text-2xl">사용자 정보</h2>
+            {error && <div className="mb-4 text-red-500">{error}</div>}
+            {userInfo ? (
+              <div className="mb-4">
+                <div>
+                  <b>아이디:</b> {userInfo.userId}
                 </div>
-              ) : (
-                !error && <div>사용자 정보를 불러오는 중...</div>
-              )}
-
-              <ScheduleList />
-
-              <MyPostList />
-            </div>
+                <div>
+                  <b>이메일:</b> {userInfo.email || userInfo.userId}
+                </div>
+                <div>
+                  <b>이름:</b> {userInfo.userName || "-"}
+                </div>
+                <div>
+                  <b>2FA 활성화:</b>{" "}
+                  {userInfo.twoFactorEnabled ? "예" : "아니오"}
+                </div>
+              </div>
+            ) : (
+              !error && <div>사용자 정보를 불러오는 중...</div>
+            )}
+            <button className="btn mb-2 w-full" onClick={handleLogout}>
+              로그아웃
+            </button>
+            <button className="btn w-full" onClick={handleChangePassword}>
+              패스워드 변경
+            </button>
           </div>
         </div>
 
-        {/* 두번째 라인 - 드래그 가능한 4개 패널 */}
-        {isMounted ? (
-          <DndContext
-            sensors={sensors}
-            collisionDetection={closestCenter}
-            onDragEnd={handleBottomDragEnd}
-          >
-            <SortableContext
-              items={bottomPanels.map((p) => p.id)}
-              strategy={rectSortingStrategy}
-            >
-              <div className="grid grid-cols-1 gap-1 sm:grid-cols-2 lg:grid-cols-4">
-                {bottomPanels.map((panel) => (
-                  <SortablePanel
-                    key={panel.id}
-                    id={panel.id}
-                    className="card card-border"
-                  >
-                    <div style={{ height: "250px" }}>{panel.component}</div>
-                  </SortablePanel>
-                ))}
-              </div>
-            </SortableContext>
-          </DndContext>
-        ) : (
-          <div className="grid grid-cols-1 gap-1 sm:grid-cols-2 lg:grid-cols-4">
-            {bottomPanels.map((panel) => (
-              <div key={panel.id} className="card card-border">
-                <div style={{ height: "250px" }}>{panel.component}</div>
-              </div>
-            ))}
+        {/* 두번째 라인 */}
+        <div className="grid grid-cols-4 gap-1">
+          <div className="card card-border"id="grouping-statistics">
+            <div className="card-header text-foreground">
+              <h3 className="text-2xl font-medium">지원현황</h3>
+            </div>
+            <div className="h-70 p-4">
+              
+            </div>
           </div>
-        )}
+          <div className="card card-border">
+            <div className="card-header text-foreground">
+              <h3 className="text-2xl font-medium">자료관 자료현황</h3>
+            </div>
+            <div className="h-70 p-4">
+            </div>
+          </div>
+          <div className="card card-border">
+            <div className="card-header text-foreground">
+              <h3 className="text-2xl font-medium">공지사항</h3>
+            </div>
+            <div className="h-70 p-4">
+            </div>
+          </div>
+
+          {/* 배너 영역 */}
+          <div className="card card-border">
+
+          </div>
+        </div>
       </div>
     </div>
   );

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

@@ -1,180 +0,0 @@
-"use client";
-
-import { useRef } from "react";
-import { useQuery } from "@tanstack/react-query";
-import { ENDPOINT } from "@/shared/config";
-import { getDataStatusList, type DataStatus } from "../api/datastatus-service";
-import type { PageableList } from "@/shared/model";
-import { useDragHandle } from "./sortable-panel";
-
-import {
-  Carousel,
-  CarouselContent,
-  CarouselItem,
-  CarouselNext,
-  CarouselPrevious,
-  Autoplay,
-} from "@common/components";
-
-// 지역 타입에 따른 아이콘과 클래스 결정
-const getRegionInfo = (regionName: string) => {
-  if (regionName.includes("서울특별시")) {
-    return { icon: "🏛️", className: "special-city" };
-  }
-  if (
-    regionName.includes("광역시") ||
-    regionName.includes("부산") ||
-    regionName.includes("대구") ||
-    regionName.includes("인천") ||
-    regionName.includes("광주") ||
-    regionName.includes("대전") ||
-    regionName.includes("울산")
-  ) {
-    return { icon: "🏭", className: "metropolitan-city" };
-  }
-  return { icon: "🌊", className: "province" };
-};
-
-const DataStatusList: React.FC = () => {
-  const { dragHandleProps, isDragging } = useDragHandle();
-  const plugin = useRef(
-    Autoplay({ delay: 3000, stopOnInteraction: true })
-  );
-
-  const {
-    data: dataStatusResponse,
-    error: dataStatusError,
-    isLoading: isLoadingDataStatus,
-  } = useQuery<PageableList<DataStatus>>({
-    queryKey: [ENDPOINT.DC_SERVICE.DATA_STATUS],
-    queryFn: () => getDataStatusList(),
-    enabled: true,
-    retry: false,
-    staleTime: 5 * 60 * 1000, // 5분간 fresh 상태 유지
-    refetchOnWindowFocus: false, // 윈도우 포커스 시 리페칭 방지
-    refetchOnMount: false, // 마운트 시 리페칭 방지 (캐시된 데이터 사용)
-  });
-
-  const dataStatusList = dataStatusResponse?.content || [];
-
-  // 에러 상태 판별 헬퍼 함수
-  const getErrorStatus = (e: unknown): number | undefined => {
-    if (!e || typeof e !== "object") return undefined;
-    const maybe = e as { status?: number; response?: { status?: number } };
-    return maybe.status ?? maybe.response?.status;
-  };
-
-  // 401 에러 처리
-  if (dataStatusError) {
-    const is401Error =
-      (dataStatusError instanceof Error && dataStatusError.message.includes("401")) ||
-      getErrorStatus(dataStatusError) === 401;
-
-    if (is401Error) {
-      console.error("[DataStatusList] 401 인증 오류:", dataStatusError);
-      return (
-        <div className="card card-border">
-          <div className="relative flex h-[280px] w-full items-center justify-center bg-accent">
-            <div className="text-sm text-red-500">
-              인증이 필요합니다. 로그인해주세요.
-            </div>
-          </div>
-        </div>
-      );
-    }
-
-    console.error("[DataStatusList] 데이터 조회 오류:", dataStatusError);
-    return (
-      <div className="card card-border">
-        <div className="relative flex h-[240px] w-full items-center justify-center bg-accent">
-          <div className="text-sm text-muted-foreground">
-            데이터를 불러올 수 없습니다
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  // 로딩 중
-  if (isLoadingDataStatus) {
-    return (
-      <div className="card card-border">
-        <div className="relative flex h-[200px] w-full items-center justify-center bg-accent" >
-          <div className="text-sm text-muted-foreground">데이터 로딩 중...</div>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <>
-      <div 
-        className={`card_title bottomline cursor-grab active:cursor-grabbing ${isDragging ? 'opacity-50' : ''}`}
-        {...dragHandleProps}
-        title="헤더를 드래그하여 패널 순서 변경"
-      >
-        <div className="leftArea">
-          <h4>자료현황</h4>
-        </div>
-      </div>
-      <div className="card card_paddingnone">
-        <div className="mid_info_area" style={{ width: "100%", padding: "5px" }}>
-          <Carousel
-            plugins={[plugin.current]}
-            opts={{ loop: true }}
-            className="relative mi_list_swiper"
-          >
-            <CarouselContent className="-ml-4 mi_list">
-              {dataStatusList.length > 0 ? (
-                dataStatusList.map((dataStatus) => {
-                  const regionInfo = getRegionInfo(dataStatus.ctpvnm);
-                  return (
-                    <CarouselItem
-                      key={`dataStatus-${dataStatus.ctpvnm}`}
-                      className={`basis-1/2 pl-4 ml_box ${regionInfo.className}`}
-                      style={{ width: "200px" }}
-                    >
-                      <div className="mb_section">
-                        <div className="tit">
-                          <i className="cloud-arrow-down-fill color_3">
-                            {regionInfo.icon}
-                          </i>
-                          <span className="tt">{dataStatus.ctpvnm}</span>
-                        </div>
-                        <div className="info_row">
-                          <div className="info_item">
-                            <div className="info_label">기본계획</div>
-                            <div className="info_value">
-                              {dataStatus.ctpvgnsvycnt}
-                            </div>
-                          </div>
-                          <div className="info_item">
-                            <div className="info_label">파일수</div>
-                            <div className="info_value">{dataStatus.filecnt}</div>
-                          </div>
-                        </div>
-                      </div>
-                    </CarouselItem>
-                  );
-                })
-              ) : (
-                <CarouselItem className="basis-full pl-0" style={{ height: "210px" }}>
-                  <div className="relative flex h-[280px] w-full items-center justify-center bg-accent">
-                    <div className="text-sm text-muted-foreground">
-                      데이터가 없습니다
-                    </div>
-                  </div>
-                </CarouselItem>
-              )}
-            </CarouselContent>
-            <CarouselPrevious className="absolute left-2 top-1/2 z-10 !bg-[rgba(255,255,255,0.8)] text-accent-foreground" />
-            <CarouselNext className="absolute right-2 top-1/2 z-10 !bg-[rgba(255,255,255,0.8)] text-accent-foreground" />
-
-          </Carousel>
-        </div>
-      </div>
-    </>
-  );
-};
-
-export default DataStatusList;

apps/cm/src/pages/dashboard/ui/fo-fclt-cnt-rt.tsx

@@ -1,160 +0,0 @@
-"use client";
-/**
- * 수계별 시설운영 개소수 및 가동률
- */
-import React, { useEffect, useState, useMemo } from 'react';
-import { useStore } from "zustand";
-import BasinSelect from "./basIn-select";
-import { Doughnut } from "react-chartjs-2";
-import type { Chart as ChartJS } from "chart.js";
-// import type { mapOperFcltItem, mapBasinData } from "../model/fo-interface";
-import { OperationApi, operFcltStore, basinStore } from "../api/fo-service";
-import { useDragHandle } from "./sortable-panel";
-
-const FoFcltCntRt: React.FC = () => {
-  const { dragHandleProps, isDragging } = useDragHandle();
-  const [year, setYear] = useState<string | null>(null);
-  const { selectedBasin, setSelectedBasin } = useStore(basinStore);
-  const operFcltStatus = useStore(operFcltStore, (state) => state.operFcltStatus);
-
-  const onBasinChange = (value: string) => {
-    setSelectedBasin(value);
-  };
-  
-  useEffect(() => {
-    const fetchData = async () => {
-      try {
-        const standardYear = await OperationApi.getStandardYear();
-        setYear(standardYear);
-        await OperationApi.getDashOperCntRt(standardYear);
-      } catch (e) {
-        console.error("시설운영 데이터 조회 실패", e);
-      }
-    };
-    fetchData();
-  }, []);
-
-  const displayData = useMemo(() => {
-    if (!operFcltStatus) {
-      return { facilityCount: 0, operatingRate: 0, chartData: [0, 100] };
-    }
-    const basinData = operFcltStatus.filter(d => d.rvbsn === selectedBasin); // 선택된 유역의 데이터만 filter
-    const operatingData = basinData.find(d => d.gubun === 'R'); // 선택 유역의 R 데이터만
-    const nonOperatingData = basinData.find(d => d.gubun === 'A');
-    
-    const facilityCount = operatingData?.cnt ?? 0;
-    const operatingCapacity = operatingData?.fctCpc ?? 0;
-    const nonOperatingCapacity = nonOperatingData?.fctCpc ?? 0;
-    const totalCapacity = operatingCapacity + nonOperatingCapacity;
-    
-    const operatingRate = totalCapacity > 0 ? Math.round((operatingCapacity / totalCapacity) * 100) : 0;
-    const result = {
-      facilityCount,
-      operatingRate,
-      chartData: [operatingCapacity, nonOperatingCapacity],
-    };
-    // console.log(result);
-    return result;
-  }, [operFcltStatus, selectedBasin]);
-
-  return (
-    <div className="card card-border" style={{ height: "250px" }}>
-      <div 
-        className={`card-header text-foreground cursor-grab active:cursor-grabbing ${isDragging ? 'opacity-50' : ''}`}
-        {...dragHandleProps}
-        title="헤더를 드래그하여 패널 순서 변경"
-      >
-        <h3 className="text-2xl font-medium">수계별 시설운영 개소수 및 가동률</h3>
-        <div 
-          onPointerDown={(e) => e.stopPropagation()}
-          onClick={(e) => e.stopPropagation()}
-        >
-          <BasinSelect selectedBasin={selectedBasin} onValueChange={onBasinChange} />
-        </div>
-      </div>
-      <div className="h-70 p-4">
-        <div className="flex gap-2 h-full">
-          {/* 왼쪽: 개소수 카드 */}
-          <div className="flex-1">
-            <div className="card card-border h-full flex flex-col">
-              <div className="card-header text-foreground text-center">
-                <h3 className="text-l font-medium mx-auto">개소수 ({year}년도)</h3>
-              </div>
-              <div className="flex items-center justify-center flex-1"  style={{ height: "200px" }}>
-                <div style={{ fontSize: "38px", textAlign: "center", fontWeight: "600", lineHeight: "1.2", color: "#0ec58a" }}>
-                  {displayData.facilityCount.toLocaleString()} <span style={{ fontSize: "14px", color: "#000000" }}>개소</span>
-                </div>
-              </div>
-            </div>
-          </div>
-          {/* 오른쪽: Doughnut 차트 */}
-          <div className="flex-1">
-            <div className="card card-border h-full flex flex-col">
-              <div className="card-header text-foreground text-center">
-                <h3 className="text-l font-medium mx-auto">가동률 ({year}년도)</h3>
-              </div>
-              <div className="flex-1 flex items-start justify-center">
-                <div style={{ width: "100px", height: "100px", display: "flex", alignItems: "flex-start", justifyContent: "center" }}>
-                  <Doughnut
-                    data={{
-                      datasets: [{
-                        data: displayData.chartData,
-                        backgroundColor: ['#00DFE5', '#f5f5f5'],
-                        borderWidth: 0
-                      }]
-                    }}
-                    options={{
-                      responsive: true,
-                      maintainAspectRatio: true,
-                      cutout: '60%',
-                      circumference: 180, // 반원
-                      rotation: -90, // 왼쪽에서 시작
-                      layout: {
-                        padding: 0,
-                      },
-                      plugins: {
-                        legend: {
-                          display: false
-                        },
-                        tooltip: {
-                          enabled: false
-                        }
-                      }
-                    }}
-                    key={displayData.operatingRate} // Key를 변경하여 차트 강제 업데이트
-                    plugins={[{
-                      id: 'centerText',
-                      afterDraw: (chart: ChartJS) => {
-                        const ctx = chart.ctx;
-                        const centerX = chart.width / 2;
-                        const centerY = chart.height / 2;
-                        const rate = displayData.operatingRate ?? 0;
-
-                        // 가동률 텍스트
-                        ctx.save();
-                        ctx.font = 'bold 16px Arial';
-                        ctx.fillStyle = '#00DFE5';
-                        ctx.textAlign = 'center';
-                        ctx.textBaseline = 'middle';
-                        ctx.fillText(`${rate}%`, centerX, centerY + 10);
-
-                        // 라벨 텍스트
-                        ctx.font = '10px Arial';
-                        ctx.fillStyle = '#666';
-                        ctx.fillText('가동률', centerX, centerY + 28);
-                        ctx.restore();
-                      }
-                    }]}
-                  />
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-
-};
-
-export default FoFcltCntRt;

apps/cm/src/pages/dashboard/ui/fo-wqlt-Infl-effl.tsx

@@ -1,257 +0,0 @@
-"use client";
-/**
- * 수계별 유입ㆍ방류수질 분석
- */
-import React, { useEffect, useState, useMemo } from 'react';
-import { useStore } from "zustand";
-import { Line } from 'react-chartjs-2';
-import BasinSelect from "./basIn-select";
-import {
-  Chart as ChartJS,
-  CategoryScale,  LinearScale,  PointElement,  LineElement,
-  Title,  Tooltip,  Legend,  type ChartOptions,
-} from 'chart.js';
-import type { OperWqltContent } from "../model/fo-interface";
-import { OperationApi, basinStore } from "../api/fo-service";
-import { defaultInitOperWqltState } from "../api/fo-service";
-import { useDragHandle } from "./sortable-panel";
-
-// Chart.js 등록
-ChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend);
-
-type WaterQualityType = 'BOD' | 'TOC' | 'SS' | 'TP' | 'TN';
-
-const FoWqltInflEffl: React.FC = () => {
-  const { dragHandleProps, isDragging } = useDragHandle();
-  const { selectedBasin, setSelectedBasin } = useStore(basinStore);
-  const [selectedTab, setSelectedTab] = useState<WaterQualityType>('BOD');  
-  const [wqltData, setWqltData] = useState<OperWqltContent[]>([]);
-  const tabs: WaterQualityType[] = ['BOD', 'TOC', 'SS', 'TP', 'TN'];
-
-  const onBasinChange = (value: string) => {
-    setSelectedBasin(value);
-  };
-
-  useEffect(() => {
-    setWqltData(defaultInitOperWqltState.operWqltStatus);
-    const fetchData = async () => {
-      try {
-        const standardYear = await OperationApi.getStandardYear();
-        const data = await OperationApi.getDashOperWqlt(standardYear);
-        setWqltData(data);
-        // console.log(wqltData);
-      } catch (e) {
-        console.error("시설 유입ㆍ방류수질 데이터 조회 실패", e);
-      }
-    };
-    fetchData();
-  }, []);
-
-  const chartData = useMemo(() => {
-    const filteredData = wqltData
-      .filter(d => d.rvbsn === selectedBasin) // 해당 유역
-      .sort((a, b) => Number(a.yr) - Number(b.yr));
-
-    const wqltKey = selectedTab.charAt(0).toUpperCase() + selectedTab.slice(1).toLowerCase();  
-    const inflowKey = `sumInfl${wqltKey}` as keyof OperWqltContent;
-    const effluentKey = `sumEffl${wqltKey}` as keyof OperWqltContent;
-    const inflowAvgKey = `avgInfl${wqltKey}` as keyof OperWqltContent;
-    const effluentAvgKey = `avgEffl${wqltKey}` as keyof OperWqltContent;
-
-
-    const labels = filteredData.map(d => d.yr ?? '');
-    const inflowData = filteredData.map(d => d[inflowKey] as number);
-    const effluentData = filteredData.map(d => d[effluentKey] as number);
-    const inflowAvg = filteredData[0]?.[inflowAvgKey] as number ?? 0;
-    const effluentAvg = filteredData[0]?.[effluentAvgKey] as number ?? 0;
-        
-    return { labels, inflowData, effluentData, inflowAvg, effluentAvg };
-  }, [wqltData, selectedBasin, selectedTab]);
-
-  // console.log(chartData);
-
-  // 차트 공통 옵션
-  // const getChartOptions = (yAxisLabel: string): ChartOptions<'line'> => ({
-  const getChartOptions = (): ChartOptions<'line'> => ({
-    responsive: true,
-    maintainAspectRatio: false,
-    interaction: {
-      mode: 'index',
-      intersect: false,
-    },
-    plugins: {
-      legend: {
-        display: true,
-        position: 'bottom',
-        labels: {
-          usePointStyle: true,
-          boxWidth: 6,
-          color: '#000',
-          font: {
-            size: 8,
-          },
-        },
-      },
-      tooltip: {
-        enabled: true,
-        titleFont: { size: 10 },
-        bodyFont: { size: 10 },
-      },
-    },
-    scales: {
-      x: {
-        grid: {
-          color: 'rgba(255, 255, 255, 0.1)',
-          tickLength: 4, // 눈금 길이 축소
-        },
-        ticks: {
-          color: '#000',
-          font: {
-            size: 8, // 폰트 크기 축소
-          },
-          padding: 0,
-        },
-      },
-      y: {
-        grid: {
-          color: 'rgba(255, 255, 255, 0.1)',
-        },
-        ticks: {
-          color: '#000',
-          font: {
-            size: 8, // 폰트 크기 축소
-          },
-          maxTicksLimit: 4, // 눈금 개수 제한
-          padding: 2,
-        },
-        title: {
-          display: false,
-        },
-      },
-    },
-    layout: {
-      padding: {
-        top: 5,
-        bottom: 0,
-        left: 0,
-        right: 5
-      }
-    }
-  });
-
-  // 유입 데이터 차트 설정
-  const inflowChartData = {
-    labels: chartData.labels,
-    datasets: [
-      {
-        label: `유입${selectedTab} (mg/L)`,
-        data: chartData.inflowData,
-        borderColor: '#00D4FF',
-        backgroundColor: '#00D4FF',
-        borderWidth: 1,
-        pointRadius: 2,
-        pointHoverRadius: 4,
-        tension: 0.4,
-      },
-      {
-        label: '유입 평균 (mg/L)',
-        data: Array(chartData.labels.length).fill(chartData.inflowAvg),
-        borderColor: '#FF1493',
-        backgroundColor: '#FF1493',
-        borderWidth: 1,
-        borderDash: [10, 5],
-        pointRadius: 0,
-        pointHoverRadius: 4,
-        tension: 0,
-      },
-    ],
-  };
-
-  // 방류 데이터 차트 설정
-  const effluentChartData = {
-    labels: chartData.labels,
-    datasets: [
-      {
-        label: `방류${selectedTab} (mg/L)`,
-        data: chartData.effluentData,
-        borderColor: '#00FF88',
-        backgroundColor: '#00FF88',
-        borderWidth: 1,
-        pointRadius: 2,
-        pointHoverRadius: 4,
-        tension: 0.4,
-      },
-      {
-        label: '방류 평균 (mg/L)',
-        data: Array(chartData.labels.length).fill(chartData.effluentAvg),
-        borderColor: '#FFB800',
-        backgroundColor: '#FFB800',
-        borderWidth: 1,
-        borderDash: [10, 5],
-        pointRadius: 0,
-        pointHoverRadius: 4,
-        tension: 0,
-      },
-    ],
-  };
-
-  return (
-    <div className="card card-border" style={{ height: "250px" }}>
-      <div 
-        className={`card-header text-foreground cursor-grab active:cursor-grabbing ${isDragging ? 'opacity-50' : ''}`}
-        {...dragHandleProps}
-        title="헤더를 드래그하여 패널 순서 변경"
-      >
-        <h3 className="text-2xl font-medium">수계별 유입ㆍ방류수질 분석</h3>
-        <div 
-          onPointerDown={(e) => e.stopPropagation()}
-          onClick={(e) => e.stopPropagation()}
-        >
-          <BasinSelect  selectedBasin={selectedBasin} onValueChange={onBasinChange}  />
-        </div>
-      </div>
-      <div className="h-70 p-0 flex items-center justify-center">
-        <div style={{ width: "100%", maxWidth: 400, height: 180 }}>
-          {/* 탭 메뉴 */}
-          <div style={{ display: 'flex', gap: '20px', borderBottom: '1px solid #000000', flexShrink: 0 }}>
-            {tabs.map((tab) => (
-              <button
-                key={tab}
-                onClick={() => setSelectedTab(tab)}
-                style={{
-                  background: 'none',
-                  border: 'none',
-                  color: selectedTab === tab ? '#00D4FF' : '#6b7c93',
-                  fontSize: '8px',
-                  fontWeight: selectedTab === tab ? 'bold' : 'normal',
-                  cursor: 'pointer',
-                  borderBottom: selectedTab === tab ? '3px solid #00D4FF' : 'none',
-                  transition: 'all 0.3s',
-                }}
-              >
-                {tab}
-              </button>
-            ))}
-          </div>
-
-          {/* 차트 영역 */}
-          <div style={{ display: 'flex', flexDirection: 'row', flex: 1, minHeight: 0 }}>
-            {/* 유입 차트 */}
-            <div style={{ flex: 1, position: 'relative', minWidth: 0 }}>
-              <Line data={inflowChartData} options={getChartOptions()} />
-            </div>
-
-            {/* 방류 차트 */}
-            <div style={{ flex: 1, position: 'relative', minWidth: 0 }}>
-              <Line data={effluentChartData} options={getChartOptions()} />
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    
-  );
-};
-
-export default FoWqltInflEffl;

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

@@ -1,53 +0,0 @@
-"use client";
-
-import { useRouter } from "next/navigation";
-import { useQuery } from "@tanstack/react-query";
-import { getCoreRowModel } from "@tanstack/react-table";
-import { PostApi, type MyPost, type NoticePost } from "@/entities/post";
-import { ENDPOINT } from "@/shared/config";
-import { useDataTable } from "@/shared/lib";
-import {
-  myPostTableColumns,
-} from "../model/table-columns";
-import { Button } from "@common/components";
-
-
-const MyPostList: React.FC = () => {
-    const router = useRouter();
-    const myPostQuery = useQuery({
-        queryKey: [ENDPOINT.BOARD_SERVICE.MY_POSTS],
-        queryFn: () =>
-        PostApi.getMyPostList({
-            page: 0,
-            size: 5,
-        }),
-    });
-
-    const handleMyPostRowClick = (row: MyPost) => {
-      router.push(`/cms/${row.bbsTypeCd.toLowerCase()}/${row.bbsId}/${row.pstNo}`);
-  };
-
-   const { tableComponent: myPostTableComponent } = useDataTable({
-        query: myPostQuery,
-        tableOptions: {
-          columns: myPostTableColumns,
-          getCoreRowModel: getCoreRowModel(),
-        },
-        dataTableOptions: {
-          variant: "line",
-          onRowClick: handleMyPostRowClick
-        },
-       
-    });
-
-  return (
-    <div className="card card-border !p-0"  style={{ height: "300px" }}>
-      <div className="card-header !m-0 !border-none text-foreground">
-        <h3 className="text-2xl font-medium">내 게시글</h3>
-      </div>
-      {myPostTableComponent}
-    </div>
-  );
-};
-
-export default MyPostList;

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

@@ -1,74 +0,0 @@
-"use client";
-
-import { useRouter } from "next/navigation";
-import { useQuery } from "@tanstack/react-query";
-import { getCoreRowModel } from "@tanstack/react-table";
-import { PostApi, type NoticePost } from "@/entities/post";
-import { ENDPOINT } from "@/shared/config";
-import { useDataTable } from "@/shared/lib";
-import {
-  noticePostTableColumns,
-} from "../model/table-columns";
-import { Button } from "@common/components";
-import { useDragHandle } from "./sortable-panel";
-
-
-const NoticeList: React.FC = () => {
-    const { dragHandleProps, isDragging } = useDragHandle();
-    const router = useRouter();
-    const noticePostQuery = useQuery({
-        queryKey: [ENDPOINT.BOARD_SERVICE.POSTS],
-        queryFn: () =>
-        PostApi.getNoticePostList({
-            page: 0,
-            size: 3,
-            keywordType: "bbsTypeCd",
-            keyword: "BBSNOTICE",
-        }),
-    });
-
-    const handleNoticePostRowClick = (row: NoticePost) => {
-        router.push(`/cms/${row.bbsTypeCd.toLowerCase()}/${row.bbsId}/${row.pstNo}`);
-    };
-
-    const handleMoreClick = () => {
-        try {
-            router.push('/cms/bbsnotice/7');
-        } catch (error) {
-            console.error("공지사항 더보기 이동 실패", error);
-        } 
-    };
-
-    const { tableComponent: noticePostTableComponent } = useDataTable({
-        query: noticePostQuery,
-        tableOptions: {
-          columns: noticePostTableColumns,
-          getCoreRowModel: getCoreRowModel(),
-        },
-        dataTableOptions: {
-          variant: "line",
-          onRowClick: handleNoticePostRowClick,
-        },
-    });
-
-  return (
-    <div className="card card-border !p-0"  style={{ height: "220px" }}>
-      <div 
-        className={`card-header !m-0 !border-none text-foreground cursor-grab active:cursor-grabbing ${isDragging ? 'opacity-50' : ''}`}
-        {...dragHandleProps}
-        title="헤더를 드래그하여 패널 순서 변경"
-      >
-        <h3 className="text-2xl font-medium">공지사항</h3>
-        <div 
-          onPointerDown={(e) => e.stopPropagation()}
-          onClick={(e) => e.stopPropagation()}
-        >
-          <Button className="h-[3.2rem]" onClick={handleMoreClick}>더보기</Button>
-        </div>
-      </div>
-      {noticePostTableComponent}
-    </div>
-  );
-};
-
-export default NoticeList;

apps/cm/src/pages/dashboard/ui/reuse-chart.tsx

@@ -1,253 +0,0 @@
-"use client";
-/**
- * 물재이용 차트
- */
-import React, { useState, useEffect, useRef } from 'react';
-import { useStore } from "zustand";
-import { Line } from 'react-chartjs-2';
-import { Button } from "@common/components";
-import type { ReuseStatusContent } from "../model/fo-interface";
-import { OperationApi, reuseStore } from "../api/fo-service";
-import { useDragHandle } from "./sortable-panel";
-import {
-  Chart as ChartJS,
-  CategoryScale,
-  LinearScale,
-  PointElement,
-  LineElement,
-  Title,
-  Tooltip,
-  Legend,
-  Filler,
-  type ChartOptions
-} from 'chart.js';
-
-// Chart.js 플러그인 등록
-ChartJS.register(
-  CategoryScale,
-  LinearScale,
-  PointElement,
-  LineElement,
-  Title,
-  Tooltip,
-  Legend,
-  Filler // 영역 채우기를 위해 필요
-);
-
-
-
-const ReuseChart: React.FC = () => {  
-  const { dragHandleProps, isDragging } = useDragHandle();
-  const [activeIndex, setActiveIndex] = useState(0);
-  const intervalRef = useRef<NodeJS.Timeout | null>(null);
-  const reuseStatusData = useStore(
-    reuseStore,
-    (state) => state.reuseStatus) as ReuseStatusContent[];
-
-  useEffect(() => {
-    OperationApi.getReuseStatus().catch((e) => {
-      console.error("물재이용 차트 데이터 조회 실패", e);
-    });
-  }, []);
-
-  const labels = reuseStatusData?.map((r) => r.yr);
-  const sewageData = reuseStatusData?.map((r) => r.sewage);
-  const reclaimedData = reuseStatusData?.map((r) => r.reclaimed);
-  const rainwaterData = reuseStatusData?.map((r) => r.rainwater);
-
-  const commonChartData = {
-    datasets: [
-      {
-        label: '재이용량',
-        data: sewageData,  // 기본은 하수처리수
-        borderColor: '#00D4FF', // 선 색상 (밝은 하늘색)
-        backgroundColor: 'rgba(0, 212, 255, 0.1)', // 채우기 색상 (투명도 있는 하늘색)
-        borderWidth: 3,
-        pointBackgroundColor: '#00D4FF',
-        pointBorderColor: '#fff',
-        pointBorderWidth: 2,
-        pointRadius: 6,
-        pointHoverRadius: 8,
-        fill: true, // 아래 영역 채우기 활성화
-        tension: 0.4, // 곡선 부드럽게
-      },
-    ],
-  };
-  
-  const commonChartOptions: ChartOptions<'line'> = {
-    maintainAspectRatio: false,
-    plugins: {
-      legend: {
-        display: false, // 범례 숨김 (이미지에 없음)
-      },
-      tooltip: {
-        callbacks: {
-          label: (context) => {
-            let label = context.dataset.label || '';
-            if (label) {
-              label += ': ';
-            }
-            if (context.parsed.y !== null) {
-              label += new Intl.NumberFormat('ko-KR').format(context.parsed.y) + '㎥';
-            }
-            return label;
-          }
-        }
-      }
-    },
-    scales: {
-      x: {
-        grid: {
-          display: true,
-          color: '#f0f0f0', // 연한 회색 그리드
-        },
-        ticks: {
-          color: '#666',
-        }
-      },
-      y: {
-        min: 1100000, // Y축 최소값 설정 (그래프 모양을 위해)
-        grid: {
-          color: '#f0f0f0',
-        },
-        ticks: {
-          color: '#666',
-          callback: function(value) {
-            return new Intl.NumberFormat('ko-KR').format(Number(value)) + '㎥';
-          }
-        }
-      }
-    },
-    interaction: {
-      mode: 'index',
-      intersect: false,
-    },
-  };
-
-  const chartItems = [
-    {
-      title: "하수처리수 재이용량 (m³)",
-      data: {
-        ...commonChartData,
-        labels,
-        datasets: [{ ...commonChartData.datasets[0], data: sewageData }],
-      },
-      options: commonChartOptions,
-    },
-    {
-      title: "중수도 재이용량 (m³)",
-      data: {
-        ...commonChartData,
-        labels,
-        datasets: [{ ...commonChartData.datasets[0], data: reclaimedData }],
-      },
-      options: commonChartOptions,
-    },
-    {
-      title: "빗물 재이용량 (m³)",
-      data: {
-        ...commonChartData,
-        labels,
-        datasets: [{ ...commonChartData.datasets[0], data: rainwaterData }],
-      },
-      options: commonChartOptions,
-    },
-  ];
-
-  const startSlider = () => {
-    intervalRef.current = setInterval(() => {
-      setActiveIndex(prevIndex => (prevIndex + 1) % chartItems.length);
-    }, 7000);
-  };
-
-  const stopSlider = () => {
-    if (intervalRef.current) {
-      clearInterval(intervalRef.current);
-    }
-  };
-
-  useEffect(() => {
-    startSlider();
-    return () => stopSlider();
-  }, []);
-
-  const handleIndicatorClick = (index: number) => {
-    stopSlider();
-    setActiveIndex(index);
-    startSlider();
-  };
-
-  const handleMoreClick = () => {
-    window.open(process.env.NEXT_PUBLIC_WR, "_blank", "noopener,noreferrer");
-  };
-
-  const viewportRef = useRef<HTMLDivElement>(null);
-
-  return (
-    <div className="card card-border" style={{ height: "250px" }}>
-      <div 
-        className={`card-header text-foreground cursor-grab active:cursor-grabbing ${isDragging ? 'opacity-50' : ''}`}
-        {...dragHandleProps}
-        title="헤더를 드래그하여 패널 순서 변경"
-      >
-        <h3 className="text-2xl font-medium">{chartItems[activeIndex]?.title}</h3>
-        <div 
-          onPointerDown={(e) => e.stopPropagation()}
-          onClick={(e) => e.stopPropagation()}
-        >
-          <Button  className="h-[3.2rem]" onClick={handleMoreClick}>더보기</Button>
-        </div>
-      </div>
-      <div className="relative" style={{ maxWidth: 400, height: 180, marginLeft: 20 }}>
-        <div className="h-full">
-
-          {/* ✅ 좌표 기준 (절대 이동 X) */}
-          <div
-            ref={viewportRef}
-            className="w-full overflow-hidden"
-            style={{ height: 170}}
-          >
-            {/* ✅ 이동 대상 */}
-            <div
-              className="flex h-full transition-transform duration-500 ease-in-out"
-              style={{
-                width: `${chartItems.length * 100}%`,
-                transform: `translateX(-${
-                  activeIndex * (viewportRef.current?.offsetWidth ?? 0)
-                }px)`
-              }}
-            >
-              {chartItems.map((chart, index) => (
-                <div
-                  key={index}
-                  className="h-full flex-shrink-0"
-                  style={{ width: `${100 / chartItems.length}%` }}
-                >
-                  <Line
-                    data={chart.data}
-                    options={chart.options as ChartOptions<'line'>}
-                  />
-                </div>
-              ))}
-            </div>
-          </div>
-          <div className="absolute left-1/2 -translate-x-1/2 flex space-x-2" style={{ bottom: '-1px'}}>
-            {chartItems.map((_, index) => (
-              <button
-                key={index}
-                onClick={() => handleIndicatorClick(index)}
-                className={`w-3 h-3 rounded-full cursor-pointer transition-colors ${
-                  activeIndex === index ? 'bg-blue-500' : 'bg-gray-300'
-                }`}
-                aria-label={`Go to slide ${index + 1}`}
-              />
-            ))}
-          </div>
-          
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default ReuseChart;

apps/cm/src/pages/dashboard/ui/reuse-status.tsx

@@ -1,96 +0,0 @@
-"use client";
-/**
- * 물재이용 현황
- */
-import React, { useEffect } from 'react';
-import { useStore } from "zustand";
-import { Button } from "@common/components";
-import type { ReuseStatusContent } from "../model/fo-interface";
-import { OperationApi, reuseStore} from "../api/fo-service";
-import { useDragHandle } from "./sortable-panel";
-
-const ReuseStatus: React.FC = () => {
-  const { dragHandleProps, isDragging } = useDragHandle();
-  // const [reuseStatusData, setReuseStatusData] = useState<ReuseStatusContent[]>([]);
-  const reuseStatusData = useStore(
-    reuseStore,
-    (state) => state.reuseStatus ) as ReuseStatusContent[];
-
-  useEffect(() => {
-    OperationApi.getReuseStatus().catch((e) => {
-      console.error("물재이용 현황 데이터 조회 실패", e);
-    });
-  }, []);
-
-
-  // 숫자 포맷 함수 (천단위 쉼표)
-  const formatNumber = (num: number): string => {
-    return new Intl.NumberFormat('ko-KR').format(num);
-  };
-
-  const handleMoreClick = () => {
-    window.open(process.env.NEXT_PUBLIC_WR, "_blank", "noopener,noreferrer");
-  };
-
-  return (
-    <div className="card card-border" style={{ height: "250px" }}>
-      <div 
-        className={`card-header text-foreground cursor-grab active:cursor-grabbing ${isDragging ? 'opacity-50' : ''}`}
-        {...dragHandleProps}
-        title="헤더를 드래그하여 패널 순서 변경"
-      >
-        <h3 className="text-2xl font-medium">물재이용 현황 (재이용량, m³)</h3>
-        <div 
-          onPointerDown={(e) => e.stopPropagation()}
-          onClick={(e) => e.stopPropagation()}
-        >
-          <Button  className="h-[3.2rem]" onClick={handleMoreClick}>더보기</Button>
-        </div>
-      </div>
-      <div className="h-70 p-4">
-        <div className="w-full h-full flex items-center justify-center">
-          <table className="w-full border-collapse text-md">
-            <thead>
-              <tr  style={{ height: "35px" }}>
-                <th className="bg-blue-500 text-white font-bold py-1 px-3 border border-gray-300">
-                  년도
-                </th>
-                <th className="bg-blue-500 text-white font-bold py-1 px-3 border border-gray-300">
-                  하수재이용량
-                </th>
-                <th className="bg-blue-500 text-white font-bold py-1 px-3 border border-gray-300">
-                  중수도이용량
-                </th>
-                <th className="bg-blue-500 text-white font-bold py-1 px-3 border border-gray-300">
-                  빗물이용량
-                </th>
-              </tr>
-            </thead>
-            <tbody>
-              {reuseStatusData && reuseStatusData.length > 0 && reuseStatusData?.map((row, index) => (
-                <tr key={index} className="hover:bg-gray-50" style={{ height: "35px" }}>
-                  <td className="bg-blue-100 font-semibold text-center py-1 px-3 border border-gray-300">
-                    {row.yr}
-                  </td>
-                  <td className="text-center py-1 px-3 border border-gray-300 bg-white">
-                    {formatNumber(row.sewage)}
-                  </td>
-                  <td className="text-center py-1 px-3 border border-gray-300 bg-white">
-                    {formatNumber(row.reclaimed)}
-                  </td>
-                  <td className="text-center py-1 px-3 border border-gray-300 bg-white">
-                    {formatNumber(row.rainwater)}
-                  </td>
-                </tr>
-              ))}
-            </tbody>
-          </table>
-        </div>
-      </div>
-    </div>
-
-    
-  );
-};
-
-export default ReuseStatus;

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

@@ -1,70 +0,0 @@
-"use client";
-
-import { useRouter } from "next/navigation";
-import { useQuery } from "@tanstack/react-query";
-import { getCoreRowModel } from "@tanstack/react-table";
-import { ENDPOINT } from "@/shared/config";
-import { useDataTable } from "@/shared/lib";
-import {
-  scheduleTableColumns, 
-} from "../model/table-columns";
-import { getScheduleList } from "../api/schedule-service";
-
-// 날짜를 YYYY-MM-DD 형식으로 포맷팅
-const formatDate = (date: Date): string => {
-  const year = date.getFullYear();
-  const month = String(date.getMonth() + 1).padStart(2, "0");
-  const day = String(date.getDate()).padStart(2, "0");
-  return `${year}-${month}-${day}`;
-};
-
-// 오늘부터 한 달 후까지의 날짜 계산
-const getDateRange = () => {
-  const today = new Date();
-  const oneMonthLater = new Date();
-  oneMonthLater.setMonth(today.getMonth() + 1);
-  
-  return {
-    startDate: formatDate(today),
-    endDate: formatDate(oneMonthLater),
-  };
-};
-
-const ScheduleList: React.FC = () => {
-    const router = useRouter();
-    const { startDate, endDate } = getDateRange();
-    
-    const scheduleQuery = useQuery({
-        queryKey: [ENDPOINT.BOARD_SERVICE.POSTS, startDate, endDate],
-        queryFn: () =>
-        getScheduleList({
-            siteId: "",
-            schdlTtl: "",
-            schdlSeCd: "",
-            schdlBgngYmd: startDate,
-            schdlEndYmd: endDate,
-            reptYn: "",
-            commSchdlYn: "Y",
-        }),
-    });
-
-    
-    const { tableComponent: scheduleTableComponent } = useDataTable({
-        query: scheduleQuery,
-        tableOptions: {
-        columns: scheduleTableColumns,
-        getCoreRowModel: getCoreRowModel(),
-        },
-        dataTableOptions: {
-        variant: "line",
-        },
-    });
-
-  return (
-    <div className="card card-border !p-0"  style={{ height: "300px" }}>
-      {scheduleTableComponent}
-    </div>
-  );
-};
-
-export default ScheduleList;

apps/cm/src/pages/dashboard/ui/sn-old-ppl.tsx

@@ -1,195 +0,0 @@
-"use client";
-/**
- * 노후 하수관로 현황
- */
-import React, { useEffect, useState } from "react";
-import {
-  Chart as ChartJS,
-  CategoryScale,
-  LinearScale,
-  BarElement,
-  Title,
-  Tooltip,
-  Legend,
-  type ChartOptions,
-} from "chart.js";
-import { Bar } from "react-chartjs-2";
-import { Button } from "@common/components";
-import type { PplLengthContent, ChartDataSet, OldPplChartData } from "../model/sn-interface";
-import { SewerageApi, useOldPplStore,useMapOldPplStore, transformChartDataToMapData } from "../api/sn-service";
-import { useDragHandle } from "./sortable-panel";
-
-
-// ChartJS 컴포넌트 등록
-ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend);
-
-export default function SnOldPpl() {
-  const { dragHandleProps, isDragging } = useDragHandle();
-  const [oldPplLenData, setOldPplLenData] = useState<PplLengthContent[]>([]);
-  const {chartData, setChartData}  = useOldPplStore();
-  const {setMapData}  = useMapOldPplStore();
-
-  useEffect(() => {
-    // 유역별, 노후년도별 관로길이 데이터를 한번에 조회
-    SewerageApi.getMvOldPplLength()
-      .then((apiResult) => {
-        setOldPplLenData(apiResult);
-      })
-      .catch((e) => console.error("노후관로 데이터 조회 실패", e));
-  }, []);
-
-  useEffect(() => {
-    if (oldPplLenData.length === 0) return;
-
-    // 유역 목록 추출 (중복 제거)
-    const allZones = [...new Set(oldPplLenData.map(d => d.zoneNm))];
-
-    // yearGroup 매핑: API 응답값 -> 차트 label
-    const yearGroupMap: { [key: string]: { label: string; color: string } } = {
-      "20년~25년미만": { label: "20-25년", color: "#3B82F6" },
-      "25년~30년미만": { label: "25-30년", color: "#EF4444" },
-      "30년이상": { label: "30년이상", color: "#F87171" },
-    };
-
-    // 유역별, 노후년도별 데이터 구조화
-    const dataByZone: { [zone: string]: { [yearGroup: string]: number } } = {};
-    allZones.forEach(zone => {
-      dataByZone[zone] = {};
-    });
-
-    oldPplLenData.forEach(item => {
-      let zoneData = dataByZone[item.zoneNm];
-      if (!zoneData) {
-        zoneData = {};
-        dataByZone[item.zoneNm] = zoneData;
-      }
-      if (item.yearGroup) {
-        zoneData[item.yearGroup] = item.sumPrlgVl;
-      }
-    });
-
-    // 데이터셋 생성
-    const newDatasets: ChartDataSet[] = Object.entries(yearGroupMap).map(([yearGroup, { label, color }]) => ({
-      label,
-      data: allZones.map(zone => dataByZone[zone]?.[yearGroup] ?? 0),
-      backgroundColor: color,
-      borderRadius: 4,
-    }));
-
-    const newChartData: OldPplChartData = {
-      labels: allZones,
-      datasets: newDatasets,
-    };
-
-    setChartData(newChartData);
-
-    // 차트 데이터를 기반으로 지도 팝업 데이터 생성 및 상태 업데이트
-    setMapData(transformChartDataToMapData(newChartData));
-  }, [oldPplLenData]);
-
-  // 각 지역별 총 길이 계산
-  const totalLengths = chartData.labels.map((label, i) => {
-    return chartData.datasets.reduce((sum, dataset) => {
-      const value = dataset.data[i];
-      return sum + (typeof value === 'number' ? value : 0);
-    }, 0);
-  });
-  
-  
-  // 차트 옵션 설정
-  const options: ChartOptions<"bar"> = {
-    responsive: true,
-    maintainAspectRatio: false,
-
-    scales: {
-      x: {
-        grid: {
-          display: true,
-        },
-      },
-      y: {
-        beginAtZero: true,
-        min: 0,
-        max: 10000,
-        ticks: {
-          stepSize: 2000,
-          callback: function (value) {
-            return Number(value).toLocaleString() + 'km';
-          }
-        },
-        grid: {
-          color: 'rgba(200, 200, 200, 0.3)',
-        }
-      }
-    },
-    plugins: {
-      legend: {
-        position: 'top',
-        align: 'center', // ⬅ 가운데 정렬
-        labels: {
-          boxWidth: 15,
-          padding: 20, // ⬅ 범례 항목 간 여백 확대
-          usePointStyle: false,
-        },
-      },
-      tooltip: {
-        callbacks: {
-          label: function (context) {
-            return `${context.dataset.label}: ${Number(context.parsed.y).toLocaleString()}km`;
-          }
-        }
-      },
-    },
-    // 총 길이 데이터 표시를 위한 애니메이션 후 함수 설정
-    animation: {
-      onComplete: function (animation) {
-        const chart = animation.chart;
-        const ctx = chart.ctx;
-
-        // 각 데이터셋의 마지막 데이터셋의 인덱스
-        if (chartData.datasets.length === 0) return;
-        // const lastMeta = chart.getDatasetMeta(chartData.datasets.length - 1);
-        // 텍스트 스타일 설정
-        ctx.font = '11px Arial';
-        ctx.fillStyle = '#333';
-        ctx.textAlign = 'center';
-
-        // 각 지역별로 총 길이 표시
-        chartData.labels.forEach((_, i) => {
-          const xPos = chart.scales.x ? chart.scales.x.getPixelForTick(i) : 0;
-          const yPos = chart.chartArea.top; // 차트 영역 최상단 위에 표시
-
-          // 막대 위에 총 길이 텍스트 표시
-          if (totalLengths[i]) ctx.fillText(`총 ${totalLengths[i]?.toLocaleString()}km`, xPos, yPos);
-        });
-      }
-    }
-  };
-
-  const handleMoreClick = () => {
-    window.open(process.env.NEXT_PUBLIC_SN, "_blank", "noopener,noreferrer");
-  };
-
-  return (
-    <div className="card card-border" style={{ height: "250px" }}>
-      <div 
-        className={`card-header text-foreground cursor-grab active:cursor-grabbing ${isDragging ? 'opacity-50' : ''}`}
-        {...dragHandleProps}
-        title="헤더를 드래그하여 패널 순서 변경"
-      >
-        <h3 className="text-2xl font-medium">노후 하수관로 현황</h3>
-        <div 
-          onPointerDown={(e) => e.stopPropagation()}
-          onClick={(e) => e.stopPropagation()}
-        >
-          <Button  className="h-[3.2rem]" onClick={handleMoreClick}>더보기</Button>
-        </div>
-      </div>
-      <div className="h-70 p-0 flex items-center justify-center">
-        <div style={{ width: "100%", maxWidth: 400, height: 180 }}>
-          <Bar options={options} data={chartData} />
-        </div>
-      </div>
-    </div>
-  );
-}

apps/cm/src/pages/dashboard/ui/sn-ppl-status.tsx

@@ -1,182 +0,0 @@
-"use client";
-/**
- * 오수관로 및 우수관로 현황
- */
-import React, { useEffect, useState } from "react";
-import {
-  Chart as ChartJS,
-  CategoryScale,
-  LinearScale,
-  BarElement,
-  Title,
-  Tooltip,
-  Legend,
-  type ChartOptions,
-} from "chart.js";
-import { Bar } from "react-chartjs-2";
-import { Button } from "@common/components";
-import type { PplLengthContent } from "../model/sn-interface";
-import { SewerageApi,useUsePplStore } from "../api/sn-service";
-import { useDragHandle } from "./sortable-panel";
-
-interface ChartDataSet {
-  label: string;
-  data: (number | undefined)[];
-  backgroundColor: string;
-  borderColor?: string;
-}
-
-// const usgCd = { "SBA004": "오수관로", "SBA003": "우수관로", "ETC": "기타" }; // 용도
-ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend);
-
-export default function SnPplStatus() {
-  const { dragHandleProps, isDragging } = useDragHandle();
-  const {chartData, setChartData}  = useUsePplStore();
-  const [usgPplLenData, setUsgPplLenData]  = useState<PplLengthContent[]>([]);
-  
-
-  useEffect(() => {
-    // 유역별, 용도별 관로길이 데이터를 한번에 조회
-    SewerageApi.getMvUsgPplLength()
-      .then((apiResult) => {
-        setUsgPplLenData(apiResult);
-      })
-      .catch((e) => console.error("용도별 관로 데이터 조회 실패", e));
-  }, []);
-  
-  // 데이터가 변경될 때마다 차트를 다시 계산
-  useEffect(() => {
-    if (usgPplLenData.length === 0) return;
-
-    // 유역 목록 추출 (중복 제거)
-    const allZones = [...new Set(usgPplLenData.map(d => d.zoneNm))];
-    const labels = allZones;
-
-    // 유역별, 용도별 데이터 구조화
-    const dataByZone: { [key: string]: { sewage: number; stormwater: number; etc: number } } = {};
-    labels.forEach(zone => {
-      dataByZone[zone] = { sewage: 0, stormwater: 0, etc: 0 };
-    });
-
-    // usgCd별로 데이터 분류: SBA004(오수관로), SBA003(우수관로), ETC(기타)
-    usgPplLenData.forEach(item => {
-      if (!dataByZone[item.zoneNm]) {
-        dataByZone[item.zoneNm] = { sewage: 0, stormwater: 0, etc: 0 };
-      }
-      if (item.usgCd === "SBA004") {
-        dataByZone[item.zoneNm]!.sewage = item.sumPrlgVl;
-      } else if (item.usgCd === "SBA003") {
-        dataByZone[item.zoneNm]!.stormwater = item.sumPrlgVl;
-      } else if (item.usgCd === "ETC") {
-        dataByZone[item.zoneNm]!.etc = item.sumPrlgVl;
-      }
-    });
-
-    const datasets: ChartDataSet[] = [];
-
-    // 기타 데이터셋 (맨 아래에 쌓기 위해 먼저 추가)
-    datasets.push({
-      label: "기타",
-      data: labels.map(zone => dataByZone[zone]?.etc),
-      backgroundColor: "rgba(255, 178, 150, 0.9)",
-    });
-
-    // 오수관로 데이터셋
-    datasets.push({
-      label: "오수관로",
-      data: labels.map(zone => dataByZone[zone]?.sewage),
-      backgroundColor: "rgba(180, 240, 190, 0.95)",
-    });
-
-    // 우수관로 데이터셋
-    datasets.push({
-      label: "우수관로",
-      data: labels.map(zone => dataByZone[zone]?.stormwater),
-      backgroundColor: "rgba(170, 210, 245, 0.95)",
-    });
-
-    setChartData({ labels, datasets });
-
-  }, [usgPplLenData]);
-
-  // 총합(라벨당) 계산
-  const totals = chartData.labels.map((_, i) =>
-    chartData.datasets.reduce((s, ds) => s + (ds.data[i] as number), 0)
-  );
-
-  const options: ChartOptions<"bar"> = {
-    responsive: true,
-    maintainAspectRatio: false,
-    plugins: {
-      legend: {
-        position: "top",
-      },
-      tooltip: {
-        callbacks: {
-          label: (ctx) => `${ctx.dataset.label}: ${Number(ctx.parsed.y).toLocaleString()}km`,
-        },
-      },
-    },
-    scales: {
-      x: {
-        stacked: true,
-      },
-      y: {
-        stacked: true,
-        beginAtZero: true,
-        ticks: {
-          callback: (value) => `${Number(value).toLocaleString()}km`,
-        },
-      },
-    },
-    // 각 스택 위에 총합 표시
-    animation: {
-      onComplete: function (animation) {
-        const chart = animation.chart;
-        const ctx = chart.ctx;
-        const lastMeta = chart.getDatasetMeta(chartData.datasets.length - 1);
-        ctx.save();
-        ctx.fillStyle = "#111";
-        ctx.font = "gray bold 12px Arial";
-        ctx.textAlign = "center";
-
-        totals.forEach((total, i) => {
-          const bar = lastMeta.data[i];
-          if (!bar) return;
-          const x = bar.x;
-          // y는 마지막 스택의 y 좌표(스택의 최상단)에서 조금 위로
-          const y = bar.y - 8;
-          ctx.fillText(`총 ${total.toLocaleString()}km`, x, y);
-        });
-
-        ctx.restore();
-      },
-    },
-  };
-
-  const handleMoreClick = () => {
-    window.open(process.env.NEXT_PUBLIC_SN, "_blank", "noopener,noreferrer");
-  };
-  return (
-    <div className="card card-border" style={{ height: "250px" }}>
-      <div 
-        className={`card-header text-foreground cursor-grab active:cursor-grabbing ${isDragging ? 'opacity-50' : ''}`}
-        {...dragHandleProps}
-        title="헤더를 드래그하여 패널 순서 변경"
-      >
-        <h3 className="text-2xl font-medium">오수관로 및 우수관로 현황</h3>
-        <div 
-          onPointerDown={(e) => e.stopPropagation()}
-          onClick={(e) => e.stopPropagation()}
-        >
-          <Button className="h-[3.2rem]" onClick={handleMoreClick}>더보기</Button>
-        </div>
-      </div>
-      <div className="h-60 p-4">
-        <div style={{ width: "100%", maxWidth: 400, height: 180 }}>
-          <Bar options={options} data={chartData} />
-        </div>
-      </div>
-    </div>
-  );
-}

apps/cm/src/pages/dashboard/ui/sortable-panel.tsx

@@ -1,64 +0,0 @@
-import { useSortable } from "@dnd-kit/sortable";
-import { CSS } from "@dnd-kit/utilities";
-import { createContext, useContext } from "react";
-
-interface SortablePanelProps {
-  id: string;
-  children: React.ReactNode;
-  className?: string;
-}
-
-interface DragHandleContextValue {
-  dragHandleProps: React.HTMLAttributes<HTMLElement>;
-  isDragging: boolean;
-}
-
-const DragHandleContext = createContext<DragHandleContextValue | null>(null);
-
-export function SortablePanel({ id, children, className }: SortablePanelProps) {
-  const {
-    attributes,
-    listeners,
-    setNodeRef,
-    transform,
-    transition,
-    isDragging,
-  } = useSortable({ id });
-
-  const style = {
-    transform: CSS.Transform.toString(transform),
-    transition,
-    opacity: isDragging ? 0.5 : 1,
-  };
-
-  const contextValue: DragHandleContextValue = {
-    dragHandleProps: { ...attributes, ...listeners },
-    isDragging,
-  };
-
-  return (
-    <DragHandleContext.Provider value={contextValue}>
-      <div
-        ref={setNodeRef}
-        style={style}
-        className={className}
-      >
-        {children}
-      </div>
-    </DragHandleContext.Provider>
-  );
-}
-
-export function useDragHandle() {
-  const context = useContext(DragHandleContext);
-  
-  // Context가 없을 때 (서버 렌더링 또는 isMounted = false) 기본값 반환
-  if (!context) {
-    return {
-      dragHandleProps: {},
-      isDragging: false,
-    };
-  }
-  
-  return context;
-}

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

@@ -1,46 +0,0 @@
-"use client";
-
-import { useQuery } from "@tanstack/react-query";
-import { getCoreRowModel } from "@tanstack/react-table";
-import { ENDPOINT } from "@/shared/config";
-import { useDataTable } from "@/shared/lib";
-import type { PageableList } from "@/shared/model";
-import { supportTableColumns } from "../model/support-columns";
-import { getSupportList, type Support } from "../api/support-service";
-import { useDragHandle } from "./sortable-panel";
-
-const SupportList: React.FC = () => {
-  const { dragHandleProps, isDragging } = useDragHandle();
-  const supportQuery = useQuery<PageableList<Support>>({
-    queryKey: [ENDPOINT.IC_SERVICE.GROUPING_STATISTICS],
-    queryFn: async () => {
-      return await getSupportList();
-    },
-  });
-
-  const { tableComponent: supportTableComponent } = useDataTable({
-    query: supportQuery,
-    tableOptions: {
-      columns: supportTableColumns,
-      getCoreRowModel: getCoreRowModel(),
-    },
-    dataTableOptions: {
-      variant: "line",
-    },
-  });
-
-  return (
-    <div className="card card-border !p-0" style={{ height: "220px" }}>
-      <div 
-        className={`card-header !m-0 !border-none text-foreground cursor-grab active:cursor-grabbing ${isDragging ? 'opacity-50' : ''}`}
-        {...dragHandleProps}
-        title="헤더를 드래그하여 패널 순서 변경"
-      >
-        <h3 className="text-2xl font-medium">지원현황</h3>
-      </div>
-      {supportTableComponent}
-    </div>
-  );
-};
-
-export default SupportList;

apps/cm/src/pages/users/ui/users-page.tsx

@@ -102,7 +102,7 @@ function UsersPage() {
     },
   });
 
-  const handleSubmit = (e: React.SubmitEvent<HTMLFormElement>) => {
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
     setPagination({
       ...pagination,

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

@@ -44,7 +44,7 @@ export const ENDPOINT = {
     ORGANIZATIONS: "/cms-service/api/v1/ognzs",
     USER_ORGANIZATION: "/cms-service/api/v1/user-ognz",
     IMAGES: "/cms-service/api/v1/images",
-    BANNERS: "/cms-service/api/v1/bnrs/user",
+    BANNERS: "/cms-service/api/v1/bnrs",
     TEMPLATE: "/cms-service/api/v1/tmplt",
     TERMS: "/cms-service/api/v1/trms",
     LWPO_CODE: "/cms-service/api/v1/lwpo-cds",
@@ -61,38 +61,23 @@ export const ENDPOINT = {
     APILOG: "/cms-service/api/v1/api-logs",
     SITE_AUTHORITY: "/cms-service/api/v1/site-authrt",
     CONNECTION_LOG: "/cms-service/api/v1/cntnlog",
-    SCEHDULES: "/cms-service/api/v1/schdls",
   },
   BOARD_SERVICE: {
     BBS: "/board-service/api/v1/bbs",
     BBS_TEMPLATES: "/board-service/api/v1/bbsTmplt",
     POSTS: "/board-service/api/v1/posts",
-    MY_POSTS: "/board-service/api/v1/posts/me",    
     POSTS_COMMENTS: "/board-service/api/v1/posts-cmnts",
     POST_EVALUATION: "/board-service/api/v1/pstEvl",
-    SITE_AUTHORITY_LIST: "/cms-service/api/v1/site-authrt/user",
-    CONNECTION_LOG_LIST: "/cms-service/api/v1/cntnlog/user",
   },
   SEWERAGE_SERVICE: {
-    PPL_LENGTH: "/sewerage-service/api/v1/ms/pplLength",
-    PPL_USE_LENGTH: "/sewerage-service/api/v1/ms/pplUseLength",
     PPL_COUNTS: "/sewerage-service/api/v1/ms/pplCounts",
     OLD_PPL_COUNTS: "/sewerage-service/api/v1/ms/oldPplCounts",
-    MV_USG_PPL_LENGTH: "/sewerage-service/api/v1/ms/mvUsgPplLength",
-    MV_OLD_PPL_LENGTH: "/sewerage-service/api/v1/ms/mvOldPplLength",
-  },
-  OPERATION_SERVICE: {
-    MAIN_YEAR: "/operation-service/api/v1/dashBoard/main/year",
-    OPER_CNTRT: "/operation-service/api/v1/dashBoard/main/oper/cntrt",
-    OPER_WQLT: "/operation-service/api/v1/dashBoard/main/oper/wqlt",
-    REUSE_STATUS: "/operation-service/api/v1/dashBoard/main/reuse/status",
-    REUSE_MAP: "/operation-service/api/v1/dashBoard/main/reuse/map",
-  },
+  },    
   IC_SERVICE: {
-    GROUPING_STATISTICS: "/ic-service/api/v1/support-status-summary",
+    GROUPING_STATISTICS: "/ic-service/api/v1/nti/grouping-statistics",
   },
   DC_SERVICE: {
-    DATA_STATUS: "/dc-service/api/v1/dataStatus",
+    DATA_STATUS: "/dc-service/api/v1/dc/dataStatus",
   },
 
 };

apps/cm/src/shared/lib/match-query-status.ts

@@ -1,4 +1,3 @@
-import React from "react";
 import { type UseQueryResult } from "@tanstack/react-query";
 import type { PageableList } from "../model";
 
@@ -10,24 +9,24 @@ import type { PageableList } from "../model";
 export function matchQueryStatus<T>(
   query: UseQueryResult<PageableList<T>>,
   options: {
-    Loading?: React.ReactElement;
-    Errored?: React.ReactElement | ((error: unknown) => React.ReactElement);
-    Empty?: React.ReactElement;
+    Loading?: JSX.Element;
+    Errored?: JSX.Element | ((error: unknown) => JSX.Element);
+    Empty?: JSX.Element;
     Success: (
       data: UseQueryResult<PageableList<T>> & {
         data: NonNullable<UseQueryResult<T>["data"]>;
       },
-    ) => React.ReactElement;
+    ) => JSX.Element;
   },
-): React.ReactElement;
+): JSX.Element;
 export function matchQueryStatus<T>(
   query: UseQueryResult<PageableList<T>>,
   options: {
-    Loading?: React.ReactElement;
-    Errored?: React.ReactElement | ((error: unknown) => React.ReactElement);
-    Success: (data: UseQueryResult<PageableList<T>>) => React.ReactElement;
+    Loading?: JSX.Element;
+    Errored?: JSX.Element | ((error: unknown) => JSX.Element);
+    Success: (data: UseQueryResult<PageableList<T>>) => JSX.Element;
   },
-): React.ReactElement;
+): JSX.Element;
 export function matchQueryStatus<T>(
   query: UseQueryResult<PageableList<T>>,
   {
@@ -36,12 +35,12 @@ export function matchQueryStatus<T>(
     Empty,
     Success,
   }: {
-    Loading?: React.ReactElement;
-    Errored?: React.ReactElement | ((error: unknown) => React.ReactElement);
-    Empty?: React.ReactElement;
-    Success: (data: UseQueryResult<PageableList<T>>) => React.ReactElement;
+    Loading?: JSX.Element;
+    Errored?: JSX.Element | ((error: unknown) => JSX.Element);
+    Empty?: JSX.Element;
+    Success: (data: UseQueryResult<PageableList<T>>) => JSX.Element;
   },
-): React.ReactElement {
+): JSX.Element {
   if (query.isLoading && Loading) {
     return Loading;
   }

apps/cm/src/shared/ui/page-layout-title.tsx

@@ -1,22 +0,0 @@
-import { PageTitle } from "@common/components";
-import { useMenuStore } from "../lib/use-menu-store";
-
-function PageLayout({ children }: { children: React.ReactNode }) {
-  const currentMenuInfo = useMenuStore((state) => state.currentMenuInfo);
-
-  const menuPaths = currentMenuInfo?.menuPath
-    ?.split(">")
-    .map((path) => path.trim());
-
-  return (
-    <div className="h-auto min-h-full bg-container pb-2">
-      <PageTitle
-        title={currentMenuInfo?.menuKornNm ?? ""}
-        menuPaths={menuPaths ?? []}
-      />      
-      {children}
-    </div>
-  );
-}
-
-export { PageLayout };

apps/cm/src/shared/ui/page-layout.tsx

@@ -1,5 +1,22 @@
+import { PageTitle } from "@common/components";
+import { useMenuStore } from "../lib/use-menu-store";
+
 function PageLayout({ children }: { children: React.ReactNode }) {
-  return <div className="h-auto min-h-full bg-container pb-2">{children}</div>;
+  const currentMenuInfo = useMenuStore((state) => state.currentMenuInfo);
+
+  const menuPaths = currentMenuInfo?.menuPath
+    ?.split(">")
+    .map((path) => path.trim());
+
+  return (
+    <div className="h-auto min-h-full bg-container pb-2">
+      <PageTitle
+        title={currentMenuInfo?.menuKornNm ?? ""}
+        menuPaths={menuPaths ?? []}
+      />
+      {children}
+    </div>
+  );
 }
 
 export { PageLayout };