feat: 입력 > 02. 하수관로 시설별 설치 현황관리 버튼 추가

- tab 6. 시설별 현황 관리 탭에서만 필요한 버튼
2026-02-19 10:21:26 +09:00
1108 changed files with 33520 additions and 76184 deletions
@@ -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
@@ -4,7 +4,10 @@

 # dependencies
 node_modules/
-.idea/
+
+# build
+.next/
+dist/

 # build
 .next
@@ -19,14 +22,7 @@ apps/fo/.next/**/*
 #.env*
 .qodo

-# next-agents-md
-.next-docs/
-
 pnpm-lock.yaml
 settings.json
 .npmrc
-.cursor
-.agent
-
-apps/**/tsconfig.tsbuildinfo
-logs/
+.cursor
@@ -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]"
@@ -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
@@ -1,3 +0,0 @@
-{
-  "extends": "next/core-web-vitals"
-}
@@ -1,8 +0,0 @@
-{
-  "semi": true,
-  "trailingComma": "all",
-  "singleQuote": false,
-  "printWidth": 100,
-  "tabWidth": 2,
-  "plugins": ["prettier-plugin-tailwindcss"]
-}
@@ -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
-```
@@ -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>
-  );
-}
@@ -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>
-  );
-}
@@ -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`로 분리
-
-이 접근 방식은 과도한 추상화를 방지하고 코드를 더 쉽게 탐색할 수 있게 합니다.
@@ -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;
-}
@@ -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>
-  );
-}
@@ -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>
-  );
-}
@@ -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. **데이터 관리에 집중**: 복잡한 비즈니스 로직보다는 데이터 모델, 검증, 저장에 집중
@@ -1 +0,0 @@
-export { type MenuItem } from "./model/types";
@@ -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;
-}
@@ -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;
@@ -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를 만들지 말고, 중요한 기능 위주로 구성
@@ -1,8 +0,0 @@
-import type { NextConfig } from "next";
-
-const nextConfig: NextConfig = {
-  reactStrictMode: true,
-  transpilePackages: ["@common/assets"],
-};
-
-export default nextConfig;
@@ -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"
-  }
-}
@@ -1,8 +0,0 @@
-/** @type {import('postcss-load-config').Config} */
-const config = {
-  plugins: {
-    tailwindcss: {},
-  },
-};
-
-export default config;
@@ -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로 사용법과 목적을 문서화
@@ -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,
-});
@@ -1 +0,0 @@
-export { apiClient } from "./client";
@@ -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";
@@ -1 +0,0 @@
-export * from "./env";
@@ -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 };
@@ -1,2 +0,0 @@
-export { queryClient } from "./query-client";
-export { dayjs } from "./dayjs";
@@ -1,11 +0,0 @@
-import { QueryClient } from "@tanstack/react-query";
-
-export const queryClient = new QueryClient({
-  defaultOptions: {
-    queries: {
-      retry: 1,
-      refetchOnWindowFocus: false,
-      staleTime: 60 * 1000,
-    },
-  },
-});
@@ -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;
-}
@@ -1 +0,0 @@
-export { PageLayout } from "./page-layout";
@@ -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 };
@@ -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;
@@ -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"]
-}
@@ -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. **재사용 최적화**: 여러 페이지에서 동일한 방식으로 사용될 수 있도록 설계
@@ -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.
@@ -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",
@@ -55,7 +52,7 @@
    "@types/node": "^22.13.1",
    "@types/webpack": "^5.28.5",
    "eslint": "^9.0.0",
-    "eslint-config-next": "15.3.8",
+    "eslint-config-next": "15.4.0",
    "postcss": "^8.4.49",
    "prettier": "^3.4.2",
    "prettier-plugin-tailwindcss": "^0.6.11",
@@ -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");
        }
      }
@@ -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}
              >
@@ -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);
@@ -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>
@@ -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,
-    }),
-  );
-}
@@ -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 };
-}
@@ -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: "",
-    },
-  ];
-}
@@ -1,7 +0,0 @@
-export interface PanelItem {
-  id: string;
-  component: React.ReactNode;
-  className?: string;
-}
-
-export type PanelType = "top" | "bottom";
@@ -1,15 +1,10 @@
 "use client";

-import { useRef, useState, useEffect } from "react";
+import { useRef } from "react";
 import { useQuery } from "@tanstack/react-query";
 import { ENDPOINT } from "@/shared/config";
-import {
-  getImageUrlByAtflCd,
-  getBannerList,
-  type Banner,
-} from "../api/banner-service";
+import { getImageUrlByAtflCd, getBannerList, type Banner } from "../api/banner-service";
 import { getCookie } from "@/shared/lib";
-import { useDragHandle } from "./sortable-panel";

 import {
  Carousel,
@@ -26,13 +21,7 @@ type BannerImageProps = {
 };

 const BannerList: React.FC = () => {
-  const { dragHandleProps, isDragging } = useDragHandle();
-  const [siteId, setSiteId] = useState<string>("");
-
-  useEffect(() => {
-    const id = getCookie("site-id-key") ?? "";
-    setSiteId(id);
-  }, []);
+  const siteId = getCookie("site-id-key") ?? "";

  const BannerImage = ({ atflCd, lnkgUrlAddr }: BannerImageProps) => {
    const { data: imageUrl, isLoading } = useQuery({
@@ -102,19 +91,6 @@ const BannerList: React.FC = () => {
    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 =
@@ -157,14 +133,21 @@ const BannerList: React.FC = () => {
    );
  }

+  // 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>
+    );
+  }
+
  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="배너를 드래그하여 패널 순서 변경"
-      />
+    <div className="card card-border"  style={{ height: "230px" }}>
      <Carousel
        plugins={[plugin.current]}
        opts={{ loop: true }}
@@ -6,8 +6,6 @@ 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 {
  Chart as ChartJS,
  CategoryScale,
@@ -20,15 +18,18 @@ 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 SnPplStatus from "./sn-ppl-status";
+import SnOldPpl from "./sn-old-ppl";
+import FoFcltCntRt from "./fo-fclt-cnt-rt";
+import FoWqltInflEffl from "./fo-wqlt-Infl-effl";
+import ReuseChart from "./reuse-chart";
+import ReuseStatus from "./reuse-status";
+import NoticeList from "./notice-list";
+import BannerList from "./banner-list";
+import SupportList from "./support-list";
+import DataStatusList from "./datastatus-list";
 import MyPostList from "./mypost-list";
 import ScheduleList from "./schedule-list";
-import { SortablePanel } from "./sortable-panel";

 // Chart.js 등록
 ChartJS.register(
@@ -40,7 +41,7 @@ ChartJS.register(
  Filler,
  Legend,
  Tooltip,
-  ArcElement,
+  ArcElement
 );

 interface UserInfo {
@@ -53,29 +54,7 @@ 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);
-  }, []);
-
+  const router = useRouter();  
  useEffect(() => {
    const fetchUserInfo = async () => {
      console.log("fetchUserInfo called");
@@ -136,149 +115,96 @@ function DashboardPage() {
  return (
    <div className="p-2 sm:p-4 md: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>
-            )}
+        {/* 첫번째 라인 */}
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-8 gap-1">
+          {/* 첫번쨰 열 */}
+          <div className="col-span-1 md:col-span-1 lg:col-span-1 xl:col-span-2 h-250 !p-0">
+            {/* 전국 하수처리시설 개소수 및 가동률 */}
+            <FoFcltCntRt />
+
+            {/* 오수관로 및 우수관로 현황 */}
+            <SnPplStatus />
+
+            {/* 하수처리수 재이용 (m³) */}
+            <ReuseChart />
          </div>

-          {/* 우측: 고정된 지도와 사용자 정보 (화면의 50%) */}
-          <div className="flex w-full gap-1 lg:w-1/2">
-            {/* 지도영역 - 고정 (드래그 불가) */}
-            <div className="flex-1">
-              <KoreaBasinMap />
-            </div>
+          {/* 두번쨰 열 */}
+          <div className="col-span-1 md:col-span-1 lg:col-span-1 xl:col-span-2 h-250 !p-0">
+            {/* 수계별 유입ㆍ방류수질 분석 */}
+            <FoWqltInflEffl />

-            {/* 사용자 정보 카드 - 고정 (드래그 불가) */}
-            <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>
+            {/* 노후하수관로현황 */}
+            <SnOldPpl />
+
+            {/* 물재이용 현황 (재이용량, m³) */}
+            <ReuseStatus />
+          </div>
+
+          {/* 지도영역 */}
+          <div className="col-span-1 md:col-span-2 lg:col-span-1 xl:col-span-3">
+            <KoreaBasinMap />
+          </div>
+
+          {/* 사용자 정보 카드 */}
+          <div className="col-span-1 md:col-span-2 lg:col-span-1 xl:col-span-1 !p-0">
+            {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>
-              ) : (
-                !error && <div>사용자 정보를 불러오는 중...</div>
-              )}
-
-              <ScheduleList />
-
-              <MyPostList />
+              </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>
-          </div>
+            ) : (
+              !error && <div>사용자 정보를 불러오는 중...</div>
+            )}
+            
+            <ScheduleList />
+            
+            <MyPostList />
+          </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-1 sm:grid-cols-2 lg:grid-cols-4 gap-1">
+          <div className="card card-border" style={{ height: "250px" }}>
+            <SupportList />
          </div>
-        )}
+          <div className="card card-border" style={{ height: "250px" }}>
+            <DataStatusList />
+          </div>
+          <div className="card card-border" style={{ height: "250px" }}>
+            <NoticeList />
+          </div>
+
+          {/* 배너 영역 */}
+          <div className="card card-border" style={{ height: "250px" }}>
+            <BannerList />
+          </div>
+        </div>
      </div>
    </div>
  );
@@ -5,7 +5,6 @@ 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,
@@ -36,7 +35,6 @@ const getRegionInfo = (regionName: string) => {
 };

 const DataStatusList: React.FC = () => {
-  const { dragHandleProps, isDragging } = useDragHandle();
  const plugin = useRef(
    Autoplay({ delay: 3000, stopOnInteraction: true })
  );
@@ -108,11 +106,7 @@ const DataStatusList: React.FC = () => {

  return (
    <>
-      <div 
-        className={`card_title bottomline cursor-grab active:cursor-grabbing ${isDragging ? 'opacity-50' : ''}`}
-        {...dragHandleProps}
-        title="헤더를 드래그하여 패널 순서 변경"
-      >
+      <div className="card_title bottomline">
        <div className="leftArea">
          <h4>자료현황</h4>
        </div>
@@ -9,10 +9,8 @@ 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);
@@ -59,18 +57,9 @@ const FoFcltCntRt: React.FC = () => {

  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="헤더를 드래그하여 패널 순서 변경"
-      >
+      <div className="card-header text-foreground">
        <h3 className="text-2xl font-medium">수계별 시설운영 개소수 및 가동률</h3>
-        <div 
-          onPointerDown={(e) => e.stopPropagation()}
-          onClick={(e) => e.stopPropagation()}
-        >
-          <BasinSelect selectedBasin={selectedBasin} onValueChange={onBasinChange} />
-        </div>
+        <BasinSelect selectedBasin={selectedBasin} onValueChange={onBasinChange} />
      </div>
      <div className="h-70 p-4">
        <div className="flex gap-2 h-full">
@@ -14,7 +14,6 @@ import {
 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);
@@ -22,7 +21,6 @@ ChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, Title, T
 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[]>([]);
@@ -197,18 +195,9 @@ const FoWqltInflEffl: React.FC = () => {

  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="헤더를 드래그하여 패널 순서 변경"
-      >
+      <div className="card-header text-foreground">
        <h3 className="text-2xl font-medium">수계별 유입ㆍ방류수질 분석</h3>
-        <div 
-          onPointerDown={(e) => e.stopPropagation()}
-          onClick={(e) => e.stopPropagation()}
-        >
-          <BasinSelect  selectedBasin={selectedBasin} onValueChange={onBasinChange}  />
-        </div>
+        <BasinSelect  selectedBasin={selectedBasin} onValueChange={onBasinChange}  />
      </div>
      <div className="h-70 p-0 flex items-center justify-center">
        <div style={{ width: "100%", maxWidth: 400, height: 180 }}>
@@ -10,11 +10,9 @@ 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],
@@ -53,18 +51,9 @@ const NoticeList: React.FC = () => {

  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="헤더를 드래그하여 패널 순서 변경"
-      >
+      <div className="card-header !m-0 !border-none text-foreground">
        <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>
+        <Button className="h-[3.2rem]" onClick={handleMoreClick}>더보기</Button>
      </div>
      {noticePostTableComponent}
    </div>
@@ -8,7 +8,6 @@ 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,
@@ -37,7 +36,6 @@ ChartJS.register(


 const ReuseChart: React.FC = () => {  
-  const { dragHandleProps, isDragging } = useDragHandle();
  const [activeIndex, setActiveIndex] = useState(0);
  const intervalRef = useRef<NodeJS.Timeout | null>(null);
  const reuseStatusData = useStore(
@@ -185,18 +183,9 @@ const ReuseChart: React.FC = () => {

  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="헤더를 드래그하여 패널 순서 변경"
-      >
+      <div className="card-header text-foreground">
        <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>
+        <Button  className="h-[3.2rem]" onClick={handleMoreClick}>더보기</Button>
      </div>
      <div className="relative" style={{ maxWidth: 400, height: 180, marginLeft: 20 }}>
        <div className="h-full">
@@ -7,10 +7,8 @@ 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,
@@ -34,18 +32,9 @@ const ReuseStatus: React.FC = () => {

  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="헤더를 드래그하여 패널 순서 변경"
-      >
+      <div className="card-header text-foreground">
        <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>
+        <Button  className="h-[3.2rem]" onClick={handleMoreClick}>더보기</Button>
      </div>
      <div className="h-70 p-4">
        <div className="w-full h-full flex items-center justify-center">
@@ -17,14 +17,12 @@ 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();
@@ -172,18 +170,9 @@ export default function SnOldPpl() {

  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="헤더를 드래그하여 패널 순서 변경"
-      >
+      <div className="card-header text-foreground">
        <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>
+        <Button  className="h-[3.2rem]" onClick={handleMoreClick}>더보기</Button>
      </div>
      <div className="h-70 p-0 flex items-center justify-center">
        <div style={{ width: "100%", maxWidth: 400, height: 180 }}>
@@ -17,7 +17,6 @@ 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;
@@ -30,7 +29,6 @@ interface ChartDataSet {
 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[]>([]);
  
@@ -159,18 +157,10 @@ export default function SnPplStatus() {
  };
  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="헤더를 드래그하여 패널 순서 변경"
-      >
+      <div className="card-header text-foreground">
        <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>
+        
+        <Button className="h-[3.2rem]" onClick={handleMoreClick}>더보기</Button>
      </div>
      <div className="h-60 p-4">
        <div style={{ width: "100%", maxWidth: 400, height: 180 }}>
@@ -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;
-}
@@ -7,10 +7,8 @@ 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 () => {
@@ -31,11 +29,7 @@ const SupportList: React.FC = () => {

  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="헤더를 드래그하여 패널 순서 변경"
-      >
+      <div className="card-header !m-0 !border-none text-foreground">
        <h3 className="text-2xl font-medium">지원현황</h3>
      </div>
      {supportTableComponent}
@@ -102,7 +102,7 @@ function UsersPage() {
    },
  });

-  const handleSubmit = (e: React.SubmitEvent<HTMLFormElement>) => {
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    setPagination({
      ...pagination,
@@ -1,21 +1,6 @@
 import type { NextConfig } from "next";

 const nextConfig: NextConfig = {
-  output: "standalone",
-  experimental: {
-    proxyTimeout: 600000,
-  },
-  eslint: {
-    ignoreDuringBuilds: true,
-  },
-  typescript: {
-    ignoreBuildErrors: true,
-  },
-  logging: {
-    fetches: {
-      fullUrl: true,
-    },
-  },  
  async rewrites() {
    return {
      afterFiles: [
@@ -46,7 +46,7 @@
    "@types/node": "^22.13.1",
    "@types/webpack": "^5.28.5",
    "eslint": "^9",
-    "eslint-config-next": "15.3.8",
+    "eslint-config-next": "15.1.7",
    "postcss": "^8",
    "prettier": "^3.4.2",
    "prettier-plugin-tailwindcss": "^0.6.11",
@@ -4,17 +4,13 @@ import { useEffect } from "react";
 import { client } from "@/shared/api";
 import type { IUserInfo } from "@/shared/store";
 import { getCookie, useUserStore } from "@/shared/lib";
-import { getAuthLoginRedirectUrl, isAtLoginRedirectUrl } from "@common/network";
 import { ENDPOINT, AUTH_USER_ID } from "@/shared/config";
+import { LoginApi } from "../api/login-service";

 const AuthWrapper = ({ children }: { children: React.ReactNode }) => {
  const { userInfo, setUserInfo } = useUserStore((state) => state);

  async function authCheck() {
-    if (isAtLoginRedirectUrl(getAuthLoginRedirectUrl())) {
-      return;
-    }
-
    const userId = getCookie(AUTH_USER_ID);
    if (!userId) {
      throw new Error("Missing required authentication tokens");
@@ -32,6 +28,8 @@ const AuthWrapper = ({ children }: { children: React.ReactNode }) => {
        await authCheck();
      } catch (error) {
        console.error(error);
+        await LoginApi.silentRefresh();
+        await authCheck();
      }
    })();
  }, []);
@@ -83,7 +83,7 @@ function FaqPage({ bbsId }: { bbsId: string }) {
    }
  };

-  const handleSubmit = (e: React.SubmitEvent<HTMLFormElement>) => {
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    refetch();
  };
@@ -6,7 +6,7 @@ import { LoginApi } from "@/entities/auth";
 import "./login.css";

 function LoginPage() {
-  const handleSubmit = async (e: React.SubmitEvent<HTMLFormElement>) => {
+  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();

    const formData = new FormData(e.target as HTMLFormElement);
@@ -33,7 +33,7 @@ function SearchPage() {
    queryFn: () => SearchApi.searchPost({ keyword: keyword, siteId }),
  });

-  const handleSubmit = (e: React.SubmitEvent<HTMLFormElement>) => {
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    const formData = new FormData(e.target as HTMLFormElement);
    setKeyword(formData.get("keyword") as string);
@@ -84,8 +84,7 @@ function SearchPage() {
              <TabsList className="mx-auto">
                <TabsTrigger value="all">
                  전체 (
-                  {(data?.contsList?.length ?? 0) +
-                    (data?.boardList?.totalElements ?? 0)}
+                  { (data?.contsList?.length ?? 0) + (data?.boardList?.totalElements ?? 0)}
                  건)
                </TabsTrigger>
                <TabsTrigger value="contents">
@@ -134,7 +134,7 @@ function PostPage({ bbsId }: { bbsId: string }) {
    }
  };

-  const handleSubmit = (e: React.SubmitEvent<HTMLFormElement>) => {
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    setPagination({
      ...pagination,
@@ -1,8 +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_TINY_API_KEY=t9nc4z6inquvvd5pq1vea8wcp7lb01qmqseh6egms9vpaju2
-NEXT_PUBLIC_TINY_BASE_URL=
+NEXT_PUBLIC_SERVER_API_URL=http://192.168.0.102:8000
+NEXT_PUBLIC_TINY_API_KEY=t9nc4z6inquvvd5pq1vea8wcp7lb01qmqseh6egms9vpaju2
@@ -38,5 +38,4 @@ yarn-error.log*
 next-env.d.ts

 .env*
-!.env.example
-/start_cs.log
+!.env.example
@@ -1,17 +0,0 @@
-import "@/app/styles/base.css";
-
-export const metadata = {
-    title: "유역하수도 통합 정보플랫폼",
-};
-
-export default function AuthLayout({
-    children,
-}: {
-    children: React.ReactNode;
-}) {
-    return (
-        <html lang="ko">
-            <body>{children}</body>
-        </html>
-    );
-}
@@ -1,3 +0,0 @@
-import { NtftalkHistoryPage } from "@/pages/ntftalk-history";
-
-export default NtftalkHistoryPage;
@@ -1,3 +0,0 @@
-import { NtftalkTempPage } from "@/pages/ntftalk-temp";
-
-export default NtftalkTempPage;
--- a/Show More
+++ b/Show More
				`@@ -1 +0,0 @@`
				`export { type MenuItem } from "./model/types";`
				`@@ -1 +0,0 @@`
				`export { PageLayout } from "./page-layout";`