EENE Dashboard upload to Gitea

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-06-17 16:59:34 +09:00
parent cf72281c6d
commit b3f2da203b
138 changed files with 13013 additions and 1929 deletions
--- a/.env.example
+++ b/.env.example
@@ -1,19 +1,17 @@
-# ─── Database ───────────────────────────────────────────────
+# ─── Database (Docker → data/postgres 영구 저장, 포트 54320) ───
 DB_USER=eee_admin
 DB_PASSWORD=eee_password
 DB_NAME=eee_dashboard
-DB_PORT=5432
-# Docker compose 기본값과 동일 (data/postgres 에 영구 저장)
-DATABASE_URL="postgresql://eee_admin:eee_password@localhost:5432/eee_dashboard"
+DB_PORT=54320
+DATABASE_URL="postgresql://eee_admin:eee_password@localhost:54320/eee_dashboard"

 # ─── Backend ─────────────────────────────────────────────────
 PORT=4000
-FRONTEND_URL=http://172.16.8.248:3000
+FRONTEND_URL=http://localhost:3000

-# JWT 시크릿 (운영 시 반드시 강력한 랜덤 문자열로 교체)
 JWT_SECRET=change_this_secret_in_production
 JWT_EXPIRES_IN=7d

-# ─── File Upload ─────────────────────────────────────────────
+# ─── Paths (프로젝트 루트 기준, backend/.env 와 동일) ────────
 UPLOAD_DIR=../uploads
-MAX_FILE_SIZE_MB=20
+HR_DATA_PATH=../data/seed/hr-data.json
--- a/.gitignore
+++ b/.gitignore
@@ -2,9 +2,14 @@ node_modules/
 dist/
 build/
 .env
-data/
+backend/.env
+data/postgres/
+!data/.gitkeep
+!data/seed/
+!data/seed/**
 uploads/*
 !uploads/.gitkeep
 *.log
 .DS_Store
 Thumbs.db
+frontend/.lan-ip
--- a/Gitea업로드.bat
+++ b/Gitea업로드.bat
@@ -0,0 +1,5 @@
+@echo off
+chcp 65001 >nul
+cd /d "%~dp0"
+powershell -NoProfile -ExecutionPolicy Bypass -File "%~dp0scripts\gitea-upload.ps1"
+pause
--- a/PC이전.txt
+++ b/PC이전.txt
@@ -0,0 +1,33 @@
+EENE Dashboard — 이 폴더만 통째로 옮기면 됩니다
+============================================
+
+■ 반드시 함께 복사
+  data\postgres\     DB (업무·팀원·허브 설정·첨부 정보)
+  data\seed\         HR seed (hr-data.json — 최초 import용)
+  uploads\           첨부·팀 사진
+  backend\.env       설정 (없으면 서버시작 시 자동 생성)
+
+■ 새 PC 준비
+  - Node.js 20+
+  - PostgreSQL 16 (Windows) 또는 Docker Desktop
+
+■ 실행 (2개 파일)
+  서버시작.bat       → DB(data\postgres) + 서버 + 화면
+  서버종료.bat       → API/WEB만 종료 (DB 유지)
+  서버종료.bat db    → DB까지 중지
+
+■ 첫 실행 시
+  예전 Windows PostgreSQL(5432)에 데이터가 있으면
+  자동으로 data\postgres 로 옮깁니다.
+
+■ 접속
+  http://localhost:3000
+
+■ PC 옮긴 뒤 [2/4] DB에서 멈출 때
+  1. PostgreSQL 16 설치 (5432 기본값 그대로 OK)
+  2. 서버종료.bat db 실행 후 서버시작.bat 재실행
+  3. 안 되면 data\postgres\postmaster.pid 삭제 후 재실행
+  4. data\postgres\pg.log 마지막 줄 확인
+     - 버전 불일치면 새 PC도 PostgreSQL 16 사용
+
+자세한 내용: README.md
--- a/README.md
+++ b/README.md
@@ -1,204 +1,88 @@
-# EENE 인재성장팀 대시보드
+# EENE 인재성장팀 대시보드 (로컬 전용)

-## 사전 설치 필요
+**이 폴더 통째로** USB·OneDrive 등으로 옮겨도 됩니다.  
+`data/postgres/` + `uploads/` 를 함께 복사하면 데이터가 그대로 유지됩니다.
+
+---
+
+## 실행 (루트 bat 2개)
+
+| 파일 | 용도 |
+|------|------|
+| **`서버시작.bat`** | DB 시작 → 스키마 → (빈 DB면 샘플) → API + 화면 |
+| **`서버종료.bat`** | API/WEB 종료 (DB·데이터 유지) |
+| **`서버종료.bat db`** | DB까지 중지 |
+
+접속: **http://localhost:3000**
+
+PC 이동 요약: **`PC이전.txt`**
+
+---
+
+## 데이터 저장 위치
+
+| 내용 | 경로 |
+|------|------|
+| DB | `data/postgres/` (업무·팀원·허브 설정·첨부 정보) |
+| HR seed (최초 import) | `data/seed/hr-data.json` |
+| 첨부 | `uploads/` |
+| 팀 사진 | `uploads/team/` |
+| API 설정 | `backend/.env` (없으면 `서버시작.bat`이 자동 생성) |
+
+---
+
+## 최초 1회 (수동)

 - [Node.js 20+](https://nodejs.org)
- [Docker Desktop](https://www.docker.com/products/docker-desktop/)
+- **PostgreSQL 16** (Windows 설치) **또는** [Docker Desktop](https://www.docker.com/products/docker-desktop/)
+
+DB는 **항상 `data/postgres/`** 에 저장됩니다 (포트 **54320**).  
+Windows에 PostgreSQL이 이미 5432로 돌아가도 충돌하지 않습니다.
+
+그다음 **`서버시작.bat`** 더블클릭.

 ---

-## 최초 실행 순서
+## 기본 계정 (샘플)

-### 1. 환경 변수 설정
+| 이메일 | 비밀번호 |
+|--------|----------|
+| admin@eene.com | admin1234! |
+| member@eene.com | member1234! |
+
+---
+
+## 폴더 구조
+
+```
+EENE_Dashboard_0608/
+├── 서버시작.bat / 서버종료.bat
+├── data/
+│   ├── postgres/          ← DB (실행 데이터)
+│   └── seed/hr-data.json  ← HR 원본 (seed·import)
+├── uploads/                ← 파일
+├── backend/                ← API
+├── frontend/               ← 화면
+└── _archive/               ← (나중) 배포용 보관
+```
+
+배포는 추후 별도 구축. `_archive/`에 예전 배포 설정만 보관.
+
+---
+
+## 듀얼 모니터
+
+- 왼쪽: `http://localhost:3000`
+- 오른쪽: `http://localhost:3000/detail`
+
+---
+
+## npm (터미널 선호 시)

 ```bash
-# 루트에 .env 파일이 없을 경우 복사
-copy .env.example .env
-
-# 백엔드 .env 확인
-# backend\.env 파일은 이미 기본값으로 생성되어 있음
+npm run local:db      # Docker DB (data/postgres)
+npm run local:db:stop # Docker DB 중지
+npm run local:setup   # 스키마 + 빈 DB seed
+npm run local:api     # :4000
+npm run local:web     # :3000
 ```
-
-### 2. PostgreSQL 실행 (Docker)
-
-```bash
-# 프로젝트 루트에서 실행
-docker compose up -d
-
-# 실행 확인
-docker compose ps
-```
-
-### 3. 백엔드 설치 및 실행
-
-```bash
-cd backend
-
-# 패키지 설치
-npm install
-
-# DB 마이그레이션 (테이블 생성)
-npm run db:migrate
-
-# 샘플 데이터 입력
-npm run db:seed
-
-# 개발 서버 실행
-npm run dev
-```
-
-백엔드가 `http://localhost:4000` 에서 실행됩니다.
-
-### 4. 프론트엔드 설치 및 실행
-
-새 터미널을 열고:
-
-```bash
-cd frontend
-
-# 패키지 설치
-npm install
-
-# 개발 서버 실행
-npm run dev
-```
-
-프론트엔드가 `http://localhost:3000` 에서 실행됩니다.
-
---
-
-## 로컬 전용 운영 (데이터 PC에 영구 저장)
-
-Render 용량 제한 시 **이 PC만으로** 운영할 수 있습니다. 모든 데이터는 아래 폴더에 저장됩니다.
-
-| 데이터 | 저장 위치 |
-|--------|-----------|
-| 업무·팀원·KPI 등 | `data/postgres/` (Docker PostgreSQL 볼륨) |
-| 업무 첨부 파일 | `uploads/` |
-| 팀원 프로필 사진 | `uploads/team/` |
-
-### 빠른 시작
-
-**Windows:** `서버시작.bat` 더블클릭 (DB 시작 → 스키마 동기화 → API+WEB 실행)  
-**종료:** `서버종료.bat` (API/WEB만) · `서버종료.bat docker` (Docker DB까지 중지, 데이터는 유지)
-
-수동 실행:
-
-```bash
-npm run local:db      # PostgreSQL 컨테이너 시작
-npm run local:setup   # DB 스키마 동기화
-npm run local:api     # 백엔드 :4000 (터미널 1)
-npm run local:web     # 프론트 :3000 (터미널 2)
-```
-
-### 접속 주소
-
-| 화면 | 주소 |
-|------|------|
-| 대시보드 | `http://localhost:3000` |
-| 팀원 관리 | `http://localhost:3000/admin` |
-| API | `http://localhost:4000/api` |
-
-사설망 IP(`172.x`, `192.168.x`)로 접속하면 **자동으로 같은 IP의 :4000 백엔드**에 연결됩니다. (Render 서버 불필요)
-
-> `backend/.env` 의 `DATABASE_URL` 이 Docker 계정과 맞아야 합니다.  
-> 기본: `postgresql://eee_admin:eee_password@localhost:5432/eee_dashboard`
-
---
-
-## 서버(이 PC) IP 주소 확인
-
-```powershell
-# CMD 또는 PowerShell 에서 실행
-ipconfig
-# → "이더넷" 또는 "Wi-Fi" 항목의 IPv4 주소 확인
-# 예: 192.168.1.100
-```
-
-팀원들이 접속할 주소:
- 대시보드: `http://172.16.8.248:3000`
- 업무 상세: `http://172.16.8.248:3000/detail`
-
-### Windows 방화벽 포트 열기 (관리자 권한 CMD)
-
-```cmd
-netsh advfirewall firewall add rule name="EEE Dashboard Frontend" dir=in action=allow protocol=TCP localport=3000
-netsh advfirewall firewall add rule name="EEE Dashboard Backend"  dir=in action=allow protocol=TCP localport=4000
-```
-
---
-
-## 듀얼 모니터 사용 방법
-
-1. 브라우저 창을 두 개 엽니다.
-2. **왼쪽 모니터**: `http://localhost:3000` (업무 목록 대시보드)
-3. **오른쪽 모니터**: `http://localhost:3000/detail` (업무 상세 패널)
-4. 왼쪽에서 업무를 클릭하면 오른쪽 창이 자동으로 해당 상세 내용을 표시합니다.
-
---
-
-## 기본 계정 (seed 데이터)
-
-| 이메일 | 비밀번호 | 역할 |
-|---|---|---|
-| admin@eee.com | admin1234! | 관리자 |
-| member@eee.com | member1234! | 팀원 |
-
-> 운영 시 반드시 비밀번호를 변경하세요.
-
---
-
-## 프로젝트 구조
-
-```
-D:\EENE_Dashboard\
-├── backend\               # Express + TypeScript API 서버
-│   ├── prisma\
-│   │   ├── schema.prisma  # DB 스키마 (테이블 정의)
-│   │   └── seed.ts        # 초기 데이터
-│   └── src\
-│       ├── index.ts       # 서버 진입점
-│       ├── app.ts         # Express 앱 설정
-│       ├── socket.ts      # Socket.io 핸들러
-│       ├── lib\           # Prisma 클라이언트
-│       ├── middleware\    # 파일 업로드, 에러 처리
-│       └── routes\        # API 라우터
-│           ├── tasks.ts   # 업무 CRUD
-│           ├── users.ts   # 사용자 관리
-│           ├── files.ts   # 파일 업로드
-│           └── kpi.ts     # KPI 관리
-│
-├── frontend\              # React + TypeScript 앱
-│   └── src\
-│       ├── contexts\      # Socket 컨텍스트
-│       ├── lib\           # API 클라이언트, 듀얼모니터 유틸
-│       ├── pages\         # 각 페이지 컴포넌트
-│       ├── types\         # TypeScript 타입 정의
-│       └── router.tsx     # 라우팅 설정
-│
-├── uploads\               # 업로드 파일 저장소
-├── 서버시작.bat            # 서버 실행
-└── 서버종료.bat            # 서버 종료
-```
-
---
-
-## API 엔드포인트
-
-| 메서드 | 경로 | 설명 |
-|---|---|---|
-| POST | /api/auth/login | 로그인 |
-| GET | /api/auth/me | 내 정보 조회 |
-| GET | /api/tasks | 업무 목록 |
-| POST | /api/tasks | 업무 등록 |
-| PATCH | /api/tasks/:id | 업무 수정 |
-| DELETE | /api/tasks/:id | 업무 삭제 |
-| GET | /api/users | 사용자 목록 (관리자) |
-| POST | /api/users | 사용자 생성 (관리자) |
-| POST | /api/files/upload/:taskId | 파일 업로드 |
-| DELETE | /api/files/:id | 파일 삭제 |
-| GET | /api/kpi | KPI 조회 |
-| POST | /api/kpi | KPI 등록 |
-| GET | /api/team-members | 팀원 목록 |
-| POST | /api/team-members | 팀원 등록 |
-| POST | /api/team-members/photo | 팀원 사진 업로드 (로컬 저장) |
--- a/_archive/.env.docker.example
+++ b/_archive/.env.docker.example
--- a/_archive/render.yaml
+++ b/_archive/render.yaml
--- a/backend/.env.example
+++ b/backend/.env.example
@@ -0,0 +1,17 @@
+# 로컬 전용 — backend/.env 로 복사 후 사용 (서버시작.bat 이 자동 갱신)
+# 모든 경로는 프로젝트 루트(EENE_Dashboard_0608) 기준
+
+# DB — data/postgres (포트 54320)
+DATABASE_URL="postgresql://eee_admin:eee_password@localhost:54320/eee_dashboard"
+
+PORT=4000
+FRONTEND_URL=http://localhost:3000
+
+JWT_SECRET=change_this_secret_in_production
+JWT_EXPIRES_IN=7d
+
+# 첨부 — uploads/ (프로젝트 루트, 파일 크기 상한 없음 — 디스크 여유만큼)
+UPLOAD_DIR=../uploads
+
+# HR seed — data/seed/hr-data.json (최초 seed·import-hr 공통)
+HR_DATA_PATH=../data/seed/hr-data.json
--- a/backend/package-lock.json
+++ b/backend/package-lock.json
@@ -8,6 +8,7 @@
      "name": "eene-dashboard-backend",
      "version": "1.0.0",
      "dependencies": {
+        "@ohah/hwpjs": "^0.1.0-rc.10",
        "@prisma/client": "^6.0.0",
        "bcrypt": "^5.1.1",
        "cors": "^2.8.5",
@@ -17,6 +18,7 @@
        "jsonwebtoken": "^9.0.2",
        "morgan": "^1.10.0",
        "multer": "^1.4.5-lts.1",
+        "prisma": "^6.0.0",
        "socket.io": "^4.8.0",
        "uuid": "^10.0.0"
      },
@@ -29,11 +31,44 @@
        "@types/multer": "^1.4.12",
        "@types/node": "^22.0.0",
        "@types/uuid": "^10.0.0",
-        "prisma": "^6.0.0",
        "tsx": "^4.19.0",
        "typescript": "^5.6.0"
      }
    },
+    "node_modules/@emnapi/core": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.11.1.tgz",
+      "integrity": "sha512-RSvbQmHzdKzNsLYa/wHrbc3KN4sYLKAdPZxqiM2HATqv/SBk2/ENSHpvXGaLOMcsAyz0poEGqkmmKYG3OWiJEQ==",
+      "license": "MIT",
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "@emnapi/wasi-threads": "1.2.2",
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@emnapi/runtime": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.11.1.tgz",
+      "integrity": "sha512-vgj7R3y3Wgx24IQaGPA/R6YFXLHVMOZ0uVEyIQPaWs+rd1AzfEMXlAC22FYwO1XkKR6NPsq7mUandH8oIRdZFw==",
+      "license": "MIT",
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@emnapi/wasi-threads": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/@emnapi/wasi-threads/-/wasi-threads-1.2.2.tgz",
+      "integrity": "sha512-c95qOXkHdydNKhscBTebqEC1CVAZpyqOfVfBzQ1qgzyl3gfeldUjIggDbIZgDKsHLgnsM+igH7TJ/eAasaVuMA==",
+      "license": "MIT",
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
    "node_modules/@esbuild/aix-ppc64": {
      "version": "0.28.0",
      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.28.0.tgz",
@@ -496,6 +531,163 @@
        "node-pre-gyp": "bin/node-pre-gyp"
      }
    },
+    "node_modules/@napi-rs/wasm-runtime": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/@napi-rs/wasm-runtime/-/wasm-runtime-1.1.5.tgz",
+      "integrity": "sha512-AWPoBRJ9tsnVhor4sjO7rkni+7p+2IAEFj6cx06UgP10jkQHqay/36uRV/bFkgrh18D9vb4cr8Q0Pthskgzy+Q==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@tybys/wasm-util": "^0.10.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/Brooooooklyn"
+      },
+      "peerDependencies": {
+        "@emnapi/core": "^1.7.1",
+        "@emnapi/runtime": "^1.7.1"
+      }
+    },
+    "node_modules/@ohah/hwpjs": {
+      "version": "0.1.0-rc.10",
+      "resolved": "https://registry.npmjs.org/@ohah/hwpjs/-/hwpjs-0.1.0-rc.10.tgz",
+      "integrity": "sha512-eHtpBzqyj/qTr4HHUMNwBlZJBjRQ0gUJdUP7i6csGn0uKPhUu0LlV9l6eI2yB68NVD9T5OqLsmGDbLSv8RUDzQ==",
+      "license": "MIT",
+      "dependencies": {
+        "commander": "^14.0.0"
+      },
+      "bin": {
+        "hwpjs": "bin/hwpjs.js"
+      },
+      "engines": {
+        "node": ">= 12.22.0 < 13 || >= 14.17.0 < 15 || >= 15.12.0 < 16 || >= 16.0.0"
+      },
+      "optionalDependencies": {
+        "@ohah/hwpjs-darwin-arm64": "0.1.0-rc.10",
+        "@ohah/hwpjs-darwin-x64": "0.1.0-rc.10",
+        "@ohah/hwpjs-linux-x64-gnu": "0.1.0-rc.10",
+        "@ohah/hwpjs-wasm32-wasi": "0.1.0-rc.10",
+        "@ohah/hwpjs-win32-arm64-msvc": "0.1.0-rc.10",
+        "@ohah/hwpjs-win32-ia32-msvc": "0.1.0-rc.10",
+        "@ohah/hwpjs-win32-x64-msvc": "0.1.0-rc.10"
+      }
+    },
+    "node_modules/@ohah/hwpjs-darwin-arm64": {
+      "version": "0.1.0-rc.10",
+      "resolved": "https://registry.npmjs.org/@ohah/hwpjs-darwin-arm64/-/hwpjs-darwin-arm64-0.1.0-rc.10.tgz",
+      "integrity": "sha512-9CGqsI2XdhLLtEJeIP8JKGPYlALSIGcpoyp2Be0QYzzW6J4LVN1q1We58srxSwn3pfdyumIDEAgXU3FskyRSFQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 12.22.0 < 13 || >= 14.17.0 < 15 || >= 15.12.0 < 16 || >= 16.0.0"
+      }
+    },
+    "node_modules/@ohah/hwpjs-darwin-x64": {
+      "version": "0.1.0-rc.10",
+      "resolved": "https://registry.npmjs.org/@ohah/hwpjs-darwin-x64/-/hwpjs-darwin-x64-0.1.0-rc.10.tgz",
+      "integrity": "sha512-DW2r/SVCNIevGxA48dti3icWXkZmj+W3pq34VURp5FPTO8r2brMKhkywOWejThI7KI213ihlvt/+YIp3d5PrOg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 12.22.0 < 13 || >= 14.17.0 < 15 || >= 15.12.0 < 16 || >= 16.0.0"
+      }
+    },
+    "node_modules/@ohah/hwpjs-linux-x64-gnu": {
+      "version": "0.1.0-rc.10",
+      "resolved": "https://registry.npmjs.org/@ohah/hwpjs-linux-x64-gnu/-/hwpjs-linux-x64-gnu-0.1.0-rc.10.tgz",
+      "integrity": "sha512-Ph5ntwnufbBtvcJTRhtp/+W98Efvr3D4ZpTQ+mr5uzDE4h2g2K3yOGP8MAJD7YEzBF2WXQgWCRtD9jFxVDo/eA==",
+      "cpu": [
+        "x64"
+      ],
+      "libc": [
+        "glibc"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.22.0 < 13 || >= 14.17.0 < 15 || >= 15.12.0 < 16 || >= 16.0.0"
+      }
+    },
+    "node_modules/@ohah/hwpjs-wasm32-wasi": {
+      "version": "0.1.0-rc.10",
+      "resolved": "https://registry.npmjs.org/@ohah/hwpjs-wasm32-wasi/-/hwpjs-wasm32-wasi-0.1.0-rc.10.tgz",
+      "integrity": "sha512-3icQYI6xmEXwYRqsiHitPTK14UvvYJHHF1LzcgT8gXBnbRk5CAAgQC6Z31gqmXbYRCV3LjGdnhZz4bTyFxEfZQ==",
+      "cpu": [
+        "wasm32"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@napi-rs/wasm-runtime": "^1.1.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/@ohah/hwpjs-win32-arm64-msvc": {
+      "version": "0.1.0-rc.10",
+      "resolved": "https://registry.npmjs.org/@ohah/hwpjs-win32-arm64-msvc/-/hwpjs-win32-arm64-msvc-0.1.0-rc.10.tgz",
+      "integrity": "sha512-EN6x0+VKZMnKRbImuSSCTk0oi5uA5802qNQf3VJ+p+VjZO0UbijthoNI7oT4F07F3hp4JYsqaXvi5KuXs0UTOA==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 12.22.0 < 13 || >= 14.17.0 < 15 || >= 15.12.0 < 16 || >= 16.0.0"
+      }
+    },
+    "node_modules/@ohah/hwpjs-win32-ia32-msvc": {
+      "version": "0.1.0-rc.10",
+      "resolved": "https://registry.npmjs.org/@ohah/hwpjs-win32-ia32-msvc/-/hwpjs-win32-ia32-msvc-0.1.0-rc.10.tgz",
+      "integrity": "sha512-1dV3LF1vxAI5+MAw07izoF2YD1if3dUDRt+7E1C6zIoZk91l+5qyUCe8Z3UJOVTNfzl9ZT+ecpgSWevk7KaW3g==",
+      "cpu": [
+        "ia32"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 12.22.0 < 13 || >= 14.17.0 < 15 || >= 15.12.0 < 16 || >= 16.0.0"
+      }
+    },
+    "node_modules/@ohah/hwpjs-win32-x64-msvc": {
+      "version": "0.1.0-rc.10",
+      "resolved": "https://registry.npmjs.org/@ohah/hwpjs-win32-x64-msvc/-/hwpjs-win32-x64-msvc-0.1.0-rc.10.tgz",
+      "integrity": "sha512-PekyIPNmCB1h5iAPm4jIji1bERtFQ2bpXZhpha6XcbaPg8ExWWABViDzF8F/l8YKt4IFaf0AGaGXp03XDMvbhA==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 12.22.0 < 13 || >= 14.17.0 < 15 || >= 15.12.0 < 16 || >= 16.0.0"
+      }
+    },
    "node_modules/@prisma/client": {
      "version": "6.19.3",
      "resolved": "https://registry.npmjs.org/@prisma/client/-/client-6.19.3.tgz",
@@ -522,7 +714,6 @@
      "version": "6.19.3",
      "resolved": "https://registry.npmjs.org/@prisma/config/-/config-6.19.3.tgz",
      "integrity": "sha512-CBPT44BjlQxEt8kiMEauji2WHTDoVBOKl7UlewXmUgBPnr/oPRZC3psci5chJnYmH0ivEIog2OU9PGWoki3DLQ==",
-      "devOptional": true,
      "license": "Apache-2.0",
      "dependencies": {
        "c12": "3.1.0",
@@ -535,14 +726,12 @@
      "version": "6.19.3",
      "resolved": "https://registry.npmjs.org/@prisma/debug/-/debug-6.19.3.tgz",
      "integrity": "sha512-ljkJ+SgpXNktLG0Q/n4JGYCkKf0f8oYLyjImS2I8e2q2WCfdRRtWER062ZV/ixaNP2M2VKlWXVJiGzZaUgbKZw==",
-      "devOptional": true,
      "license": "Apache-2.0"
    },
    "node_modules/@prisma/engines": {
      "version": "6.19.3",
      "resolved": "https://registry.npmjs.org/@prisma/engines/-/engines-6.19.3.tgz",
      "integrity": "sha512-RSYxtlYFl5pJ8ZePgMv0lZ9IzVCOdTPOegrs2qcbAEFrBI1G33h6wyC9kjQvo0DnYEhEVY0X4LsuFHXLKQk88g==",
-      "devOptional": true,
      "hasInstallScript": true,
      "license": "Apache-2.0",
      "dependencies": {
@@ -556,14 +745,12 @@
      "version": "7.1.1-3.c2990dca591cba766e3b7ef5d9e8a84796e47ab7",
      "resolved": "https://registry.npmjs.org/@prisma/engines-version/-/engines-version-7.1.1-3.c2990dca591cba766e3b7ef5d9e8a84796e47ab7.tgz",
      "integrity": "sha512-03bgb1VD5gvuumNf+7fVGBzfpJPjmqV423l/WxsWk2cNQ42JD0/SsFBPhN6z8iAvdHs07/7ei77SKu7aZfq8bA==",
-      "devOptional": true,
      "license": "Apache-2.0"
    },
    "node_modules/@prisma/fetch-engine": {
      "version": "6.19.3",
      "resolved": "https://registry.npmjs.org/@prisma/fetch-engine/-/fetch-engine-6.19.3.tgz",
      "integrity": "sha512-tKtl/qco9Nt7LU5iKhpultD8O4vMCZcU2CHjNTnRrL1QvSUr5W/GcyFPjNL87GtRrwBc7ubXXD9xy4EvLvt8JA==",
-      "devOptional": true,
      "license": "Apache-2.0",
      "dependencies": {
        "@prisma/debug": "6.19.3",
@@ -575,7 +762,6 @@
      "version": "6.19.3",
      "resolved": "https://registry.npmjs.org/@prisma/get-platform/-/get-platform-6.19.3.tgz",
      "integrity": "sha512-xFj1VcJ1N3MKooOQAGO0W5tsd0W2QzIvW7DD7c/8H14Zmp4jseeWAITm+w2LLoLrlhoHdPPh0NMZ8mfL6puoHA==",
-      "devOptional": true,
      "license": "Apache-2.0",
      "dependencies": {
        "@prisma/debug": "6.19.3"
@@ -591,9 +777,18 @@
      "version": "1.1.0",
      "resolved": "https://registry.npmjs.org/@standard-schema/spec/-/spec-1.1.0.tgz",
      "integrity": "sha512-l2aFy5jALhniG5HgqrD6jXLi/rUWrKvqN/qJx6yoJsgKhblVd+iqqU4RCXavm/jPityDo5TCvKMnpjKnOriy0w==",
-      "devOptional": true,
      "license": "MIT"
    },
+    "node_modules/@tybys/wasm-util": {
+      "version": "0.10.2",
+      "resolved": "https://registry.npmjs.org/@tybys/wasm-util/-/wasm-util-0.10.2.tgz",
+      "integrity": "sha512-RoBvJ2X0wuKlWFIjrwffGw1IqZHKQqzIchKaadZZfnNpsAYp2mM0h36JtPCjNDAHGgYez/15uMBpfGwchhiMgg==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
    "node_modules/@types/bcrypt": {
      "version": "5.0.2",
      "resolved": "https://registry.npmjs.org/@types/bcrypt/-/bcrypt-5.0.2.tgz",
@@ -990,7 +1185,6 @@
      "version": "3.1.0",
      "resolved": "https://registry.npmjs.org/c12/-/c12-3.1.0.tgz",
      "integrity": "sha512-uWoS8OU1MEIsOv8p/5a82c3H31LsWVR5qiyXVfBNOzfffjUWtPnhAb4BYI2uG2HfGmZmFjCtui5XNWaps+iFuw==",
-      "devOptional": true,
      "license": "MIT",
      "dependencies": {
        "chokidar": "^4.0.3",
@@ -1048,7 +1242,6 @@
      "version": "4.0.3",
      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.3.tgz",
      "integrity": "sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==",
-      "devOptional": true,
      "license": "MIT",
      "dependencies": {
        "readdirp": "^4.0.1"
@@ -1073,7 +1266,6 @@
      "version": "0.1.6",
      "resolved": "https://registry.npmjs.org/citty/-/citty-0.1.6.tgz",
      "integrity": "sha512-tskPPKEs8D2KPafUypv2gxwJP8h/OaJmC82QQGGDQcHvXX43xF2VDACcJVmZ0EuSxkpO9Kc4MlrA3q0+FG58AQ==",
-      "devOptional": true,
      "license": "MIT",
      "dependencies": {
        "consola": "^3.2.3"
@@ -1088,6 +1280,15 @@
        "color-support": "bin.js"
      }
    },
+    "node_modules/commander": {
+      "version": "14.0.3",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-14.0.3.tgz",
+      "integrity": "sha512-H+y0Jo/T1RZ9qPP4Eh1pkcQcLRglraJaSLoyOtHxu6AapkjWVCy2Sit1QQ4x3Dng8qDlSsZEet7g5Pq06MvTgw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=20"
+      }
+    },
    "node_modules/concat-map": {
      "version": "0.0.1",
      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -1113,14 +1314,12 @@
      "version": "0.2.4",
      "resolved": "https://registry.npmjs.org/confbox/-/confbox-0.2.4.tgz",
      "integrity": "sha512-ysOGlgTFbN2/Y6Cg3Iye8YKulHw+R2fNXHrgSmXISQdMnomY6eNDprVdW9R5xBguEqI954+S6709UyiO7B+6OQ==",
-      "devOptional": true,
      "license": "MIT"
    },
    "node_modules/consola": {
      "version": "3.4.2",
      "resolved": "https://registry.npmjs.org/consola/-/consola-3.4.2.tgz",
      "integrity": "sha512-5IKcdX0nnYavi6G7TtOhwkYzyjfJlatbjMjuLSfE2kYT5pMDOilZ4OvMhi637CcDICTmz3wARPoyhqyX1Y+XvA==",
-      "devOptional": true,
      "license": "MIT",
      "engines": {
        "node": "^14.18.0 || >=16.10.0"
@@ -1204,7 +1403,6 @@
      "version": "7.1.5",
      "resolved": "https://registry.npmjs.org/deepmerge-ts/-/deepmerge-ts-7.1.5.tgz",
      "integrity": "sha512-HOJkrhaYsweh+W+e74Yn7YStZOilkoPb6fycpwNLKzSPtruFs48nYis0zy5yJz1+ktUhHxoRDJ27RQAWLIJVJw==",
-      "devOptional": true,
      "license": "BSD-3-Clause",
      "engines": {
        "node": ">=16.0.0"
@@ -1214,7 +1412,6 @@
      "version": "6.1.7",
      "resolved": "https://registry.npmjs.org/defu/-/defu-6.1.7.tgz",
      "integrity": "sha512-7z22QmUWiQ/2d0KkdYmANbRUVABpZ9SNYyH5vx6PZ+nE5bcC0l7uFvEfHlyld/HcGBFTL536ClDt3DEcSlEJAQ==",
-      "devOptional": true,
      "license": "MIT"
    },
    "node_modules/delegates": {
@@ -1236,7 +1433,6 @@
      "version": "2.0.5",
      "resolved": "https://registry.npmjs.org/destr/-/destr-2.0.5.tgz",
      "integrity": "sha512-ugFTXCtDZunbzasqBxrK93Ik/DRYsO6S/fedkWEMKqt04xZ4csmnmwGDBAb07QWNaGMAmnTIemsYZCksjATwsA==",
-      "devOptional": true,
      "license": "MIT"
    },
    "node_modules/destroy": {
@@ -1303,7 +1499,6 @@
      "version": "3.21.0",
      "resolved": "https://registry.npmjs.org/effect/-/effect-3.21.0.tgz",
      "integrity": "sha512-PPN80qRokCd1f015IANNhrwOnLO7GrrMQfk4/lnZRE/8j7UPWrNNjPV0uBrZutI/nHzernbW+J0hdqQysHiSnQ==",
-      "devOptional": true,
      "license": "MIT",
      "dependencies": {
        "@standard-schema/spec": "^1.0.0",
@@ -1320,7 +1515,6 @@
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/empathic/-/empathic-2.0.0.tgz",
      "integrity": "sha512-i6UzDscO/XfAcNYD75CfICkmfLedpyPDdozrLMmQc5ORaQcdMoc21OnlEylMIqI7U8eniKrPMxxtj8k0vhmJhA==",
-      "devOptional": true,
      "license": "MIT",
      "engines": {
        "node": ">=14"
@@ -1525,14 +1719,12 @@
      "version": "1.0.8",
      "resolved": "https://registry.npmjs.org/exsolve/-/exsolve-1.0.8.tgz",
      "integrity": "sha512-LmDxfWXwcTArk8fUEnOfSZpHOJ6zOMUJKOtFLFqJLoKJetuQG874Uc7/Kki7zFLzYybmZhp1M7+98pfMqeX8yA==",
-      "devOptional": true,
      "license": "MIT"
    },
    "node_modules/fast-check": {
      "version": "3.23.2",
      "resolved": "https://registry.npmjs.org/fast-check/-/fast-check-3.23.2.tgz",
      "integrity": "sha512-h5+1OzzfCC3Ef7VbtKdcv7zsstUQwUDlYpUTvjeUsJAssPgLn7QzbboPtL5ro04Mq0rPOsMzl7q5hIbRs2wD1A==",
-      "devOptional": true,
      "funding": [
        {
          "type": "individual",
@@ -1703,7 +1895,6 @@
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/giget/-/giget-2.0.0.tgz",
      "integrity": "sha512-L5bGsVkxJbJgdnwyuheIunkGatUF/zssUoxxjACCseZYAVbaqdh9Tsmmlkl8vYan09H7sbvKt4pS8GqKLBrEzA==",
-      "devOptional": true,
      "license": "MIT",
      "dependencies": {
        "citty": "^0.1.6",
@@ -1905,7 +2096,6 @@
      "version": "2.7.0",
      "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.7.0.tgz",
      "integrity": "sha512-AC/7JofJvZGrrneWNaEnJeOLUx+JlGt7tNa0wZiRPT4MY1wmfKjt2+6O2p2uz2+skll8OZZmJMNqeke7kKbNgQ==",
-      "devOptional": true,
      "license": "MIT",
      "bin": {
        "jiti": "lib/jiti-cli.mjs"
@@ -2254,7 +2444,6 @@
      "version": "1.6.7",
      "resolved": "https://registry.npmjs.org/node-fetch-native/-/node-fetch-native-1.6.7.tgz",
      "integrity": "sha512-g9yhqoedzIUm0nTnTqAQvueMPVOuIY16bqgAJJC8XOOubYFNwz6IER9qs0Gq2Xd0+CecCKFjtdDTMA4u4xG06Q==",
-      "devOptional": true,
      "license": "MIT"
    },
    "node_modules/nopt": {
@@ -2289,7 +2478,6 @@
      "version": "0.6.6",
      "resolved": "https://registry.npmjs.org/nypm/-/nypm-0.6.6.tgz",
      "integrity": "sha512-vRyr0r4cbBapw07Xw8xrj9Teq3o7MUD35rSaTcanDbW+aK2XHDgJFiU6ZTj2GBw7Q12ysdsyFss+Vdz4hQ0Y6Q==",
-      "devOptional": true,
      "license": "MIT",
      "dependencies": {
        "citty": "^0.2.2",
@@ -2307,7 +2495,6 @@
      "version": "0.2.2",
      "resolved": "https://registry.npmjs.org/citty/-/citty-0.2.2.tgz",
      "integrity": "sha512-+6vJA3L98yv+IdfKGZHBNiGW5KHn22e/JwID0Strsz8h4S/csAu/OuICwxrg44k5MRiZHWIo8XXuJgQTriRP4w==",
-      "devOptional": true,
      "license": "MIT"
    },
    "node_modules/object-assign": {
@@ -2335,7 +2522,6 @@
      "version": "2.0.11",
      "resolved": "https://registry.npmjs.org/ohash/-/ohash-2.0.11.tgz",
      "integrity": "sha512-RdR9FQrFwNBNXAr4GixM8YaRZRJ5PUWbKYbE5eOsrwAjJW0q2REGcf79oYPsLyskQCZG1PLN+S/K1V00joZAoQ==",
-      "devOptional": true,
      "license": "MIT"
    },
    "node_modules/on-finished": {
@@ -2396,21 +2582,18 @@
      "version": "2.0.3",
      "resolved": "https://registry.npmjs.org/pathe/-/pathe-2.0.3.tgz",
      "integrity": "sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==",
-      "devOptional": true,
      "license": "MIT"
    },
    "node_modules/perfect-debounce": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/perfect-debounce/-/perfect-debounce-1.0.0.tgz",
      "integrity": "sha512-xCy9V055GLEqoFaHoC1SoLIaLmWctgCUaBaWxDZ7/Zx4CTyX7cJQLJOok/orfjZAh9kEYpjJa4d0KcJmCbctZA==",
-      "devOptional": true,
      "license": "MIT"
    },
    "node_modules/pkg-types": {
      "version": "2.3.1",
      "resolved": "https://registry.npmjs.org/pkg-types/-/pkg-types-2.3.1.tgz",
      "integrity": "sha512-y+ichcgc2LrADuhLNAx8DFjVfgz91pRxfZdI3UDhxHvcVEZsenLO+7XaU5vOp0u/7V/wZ+plyuQxtrDlZJ+yeg==",
-      "devOptional": true,
      "license": "MIT",
      "dependencies": {
        "confbox": "^0.2.4",
@@ -2422,7 +2605,6 @@
      "version": "6.19.3",
      "resolved": "https://registry.npmjs.org/prisma/-/prisma-6.19.3.tgz",
      "integrity": "sha512-++ZJ0ijLrDJF6hNB4t4uxg2br3fC4H9Yc9tcbjr2fcNFP3rh/SBNrAgjhsqBU4Ght8JPrVofG/ZkXfnSfnYsFg==",
-      "devOptional": true,
      "hasInstallScript": true,
      "license": "Apache-2.0",
      "dependencies": {
@@ -2467,7 +2649,6 @@
      "version": "6.1.0",
      "resolved": "https://registry.npmjs.org/pure-rand/-/pure-rand-6.1.0.tgz",
      "integrity": "sha512-bVWawvoZoBYpp6yIoQtQXHZjmz35RSVHnUOTefl8Vcjr8snTPY1wnpSPMWekcFwbxI6gtmT7rSYPFvz71ldiOA==",
-      "devOptional": true,
      "funding": [
        {
          "type": "individual",
@@ -2523,7 +2704,6 @@
      "version": "2.1.2",
      "resolved": "https://registry.npmjs.org/rc9/-/rc9-2.1.2.tgz",
      "integrity": "sha512-btXCnMmRIBINM2LDZoEmOogIZU7Qe7zn4BpomSKZ/ykbLObuBdvG+mFq11DL6fjH1DRwHhrlgtYWG96bJiC7Cg==",
-      "devOptional": true,
      "license": "MIT",
      "dependencies": {
        "defu": "^6.1.4",
@@ -2555,7 +2735,6 @@
      "version": "4.1.2",
      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.1.2.tgz",
      "integrity": "sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==",
-      "devOptional": true,
      "license": "MIT",
      "engines": {
        "node": ">= 14.18.0"
@@ -2956,7 +3135,6 @@
      "version": "1.2.2",
      "resolved": "https://registry.npmjs.org/tinyexec/-/tinyexec-1.2.2.tgz",
      "integrity": "sha512-M/Q0B2cp4K7kynaT/vnED1j8TlLY+Pp7C6Wl2bl/7u/F0mUVwdyOpwomQb8JpYLitHUssAJRmLZdMCGsrx7i+g==",
-      "devOptional": true,
      "license": "MIT",
      "engines": {
        "node": ">=18"
@@ -2977,6 +3155,13 @@
      "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==",
      "license": "MIT"
    },
+    "node_modules/tslib": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "license": "0BSD",
+      "optional": true
+    },
    "node_modules/tsx": {
      "version": "4.22.3",
      "resolved": "https://registry.npmjs.org/tsx/-/tsx-4.22.3.tgz",
--- a/backend/package.json
+++ b/backend/package.json
@@ -4,7 +4,8 @@
  "description": "EENE 인재성장팀 대시보드 - Backend API",
  "main": "dist/index.js",
  "scripts": {
-    "dev": "npm run db:sync && tsx watch src/index.ts",
+    "dev:serve": "tsx watch src/index.ts",
+    "dev": "npm run db:sync && npm run db:seed-if-empty && npm run db:seed-team-if-empty && npm run dev:serve",
    "db:sync": "prisma migrate deploy || prisma db push",
    "build": "prisma generate && tsc",
    "start": "npm run db:sync && node dist/index.js",
@@ -12,13 +13,17 @@
    "db:generate": "prisma generate",
    "db:studio": "prisma studio",
    "db:seed": "tsx prisma/seed.ts",
+    "db:rebuild": "tsx prisma/seed.ts",
+    "db:seed-if-empty": "tsx scripts/seed-if-empty.ts",
+    "db:seed-team-if-empty": "tsx scripts/seed-team-if-empty.ts",
+    "db:sync-team-photos": "tsx scripts/sync-team-photos.ts",
+    "db:cleanup-legacy-routine": "tsx scripts/cleanup-legacy-routine.ts",
    "db:import-hr": "tsx scripts/import-hr-data.ts",
-    "db:sync-remote": "tsx scripts/sync-from-remote.ts",
-    "db:push-remote": "tsx scripts/sync-to-remote.ts",
-    "db:push-photos": "tsx scripts/sync-to-remote.ts --photos-only",
-    "db:migrate-sections": "tsx scripts/migrate-sections.ts"
+    "db:migrate-sections": "tsx scripts/migrate-sections.ts",
+    "db:migrate-milestone-period-notes": "tsx scripts/migrate-milestone-period-notes.ts"
  },
  "dependencies": {
+    "@ohah/hwpjs": "^0.1.0-rc.10",
    "@prisma/client": "^6.0.0",
    "bcrypt": "^5.1.1",
    "cors": "^2.8.5",
--- a/backend/prisma/mapHrProjects.ts
+++ b/backend/prisma/mapHrProjects.ts
@@ -1,6 +1,7 @@
 import fs from 'fs';
 import path from 'path';
 import type { Priority, TaskStatus } from '@prisma/client';
+import { getHrSeedPath, getUploadDir } from '../src/lib/projectPaths';

 export interface HrProject {
  idx?: number;
@@ -26,6 +27,21 @@ export interface HrProject {
  subPhases?: { name: string; status?: string; text?: string }[];
  timelineItems?: { startDate?: string; endDate?: string; desc?: string }[];
  showOnDashboard?: boolean;
+  owners?: string[];
+}
+
+export interface HrTeamEntry {
+  name: string;
+  photo?: string;
+}
+
+export interface ParsedHrTeamMember {
+  name: string;
+  rank: string | null;
+  role: string | null;
+  cell: string | null;
+  photoUrl: string | null;
+  sortOrder: number;
 }

 export interface MappedTask {
@@ -59,6 +75,8 @@ const SECTION_MAP: Record<string, string> = {
  인사관리: '인사관리',
  성장지원: '학습성장',
  운영관리: '운영관리',
+  운영지원: '운영관리',
+  전산관리: '운영관리',
 };

 const STATUS_MAP: Record<string, TaskStatus> = {
@@ -75,7 +93,7 @@ const PHASE_PROGRESS: Record<string, number> = {
 };

 export function defaultHrDataPath(): string {
-  return path.resolve(__dirname, '../../../HR_Dashboard/data.json');
+  return getHrSeedPath();
 }

 export function loadHrProjects(filePath = defaultHrDataPath()): HrProject[] {
@@ -84,6 +102,72 @@ export function loadHrProjects(filePath = defaultHrDataPath()): HrProject[] {
  return (data.PROJECTS ?? []).filter((p) => p.showOnDashboard !== false);
 }

+export function loadHrTeam(filePath = defaultHrDataPath()): HrTeamEntry[] {
+  const raw = fs.readFileSync(filePath, 'utf-8');
+  const data = JSON.parse(raw) as { TEAM?: HrTeamEntry[] };
+  return data.TEAM ?? [];
+}
+
+/** "조태희 수석(팀장)" → name / rank / role */
+export function parseHrTeamLabel(label: string, sortOrder: number): ParsedHrTeamMember {
+  const s = label.trim();
+  const withRole = s.match(/^(.+?)\s+(.+?)\((.+)\)$/);
+  if (withRole) {
+    const role = withRole[3].trim();
+    return {
+      name: withRole[1].trim(),
+      rank: withRole[2].trim(),
+      role,
+      cell: role === '팀장' ? null : 'HR',
+      photoUrl: null,
+      sortOrder,
+    };
+  }
+  const plain = s.match(/^(.+?)\s+(.+)$/);
+  if (plain) {
+    return {
+      name: plain[1].trim(),
+      rank: plain[2].trim(),
+      role: null,
+      cell: 'HR',
+      photoUrl: null,
+      sortOrder,
+    };
+  }
+  return { name: s, rank: null, role: null, cell: 'HR', photoUrl: null, sortOrder };
+}
+
+export function mapHrTeamMembers(filePath = defaultHrDataPath()): ParsedHrTeamMember[] {
+  return loadHrTeam(filePath).map((entry, i) => {
+    const parsed = parseHrTeamLabel(entry.name, i);
+    const photo = resolveTeamPhotoPath(entry.photo?.trim() || null);
+    return {
+      ...parsed,
+      photoUrl: photo,
+    };
+  });
+}
+
+/** seed용 — 파일이 프로젝트 uploads/ 에 실제 있을 때만 경로 사용 */
+export function resolveTeamPhotoPath(photo: string | null): string | null {
+  if (!photo?.trim()) return null;
+  const trimmed = photo.trim();
+  if (/^https?:\/\//i.test(trimmed) || trimmed.startsWith('data:')) return null;
+
+  const uploadDir = getUploadDir();
+  const relative = trimmed.replace(/^\//, '').replace(/^uploads\//, '');
+  const abs = path.join(uploadDir, relative);
+  if (fs.existsSync(abs)) {
+    return trimmed.startsWith('/') ? trimmed : `/uploads/${relative}`;
+  }
+  return null;
+}
+
+/** PM·담당자 문자열 → team_members.name 매칭용 */
+export function normalizePersonName(value: string): string {
+  return value.trim().replace(/\s+/g, '');
+}
+
 function parseDate(value?: string): Date | null {
  if (!value?.trim()) return null;
  const d = new Date(value);
@@ -94,6 +178,14 @@ function mapSection(category: string): string {
  return SECTION_MAP[category] ?? category;
 }

+function mapBoardSection(p: HrProject): string {
+  const name = p.name.trim();
+  if (/회사생활|C\.E\.L|조직문화|복리후생|문화\s*진단|직원\s*소통/i.test(name)) {
+    return '조직문화';
+  }
+  return mapSection(p.category);
+}
+
 function mapStatus(status?: string, isRoutine = false): TaskStatus {
  if (!status?.trim()) return isRoutine ? 'IN_PROGRESS' : 'TODO';
  return STATUS_MAP[status] ?? 'IN_PROGRESS';
@@ -186,8 +278,8 @@ export function mapHrProjectToTask(p: HrProject, quarter = '2026-Q2'): MappedTas
    status: mapStatus(p.status, isRoutine),
    priority: mapPriority(p.priority),
    quarter,
-    category: mapSection(p.category),
-    section: mapSection(p.category),
+    category: mapBoardSection(p),
+    section: mapBoardSection(p),
    taskType,
    progress: mapProgress(p.progress),
    issueNote: pickIssueNote(p),
@@ -204,5 +296,7 @@ export function mapHrProjectToTask(p: HrProject, quarter = '2026-Q2'): MappedTas
 }

 export function mapAllHrProjects(filePath?: string, quarter = '2026-Q2'): MappedTask[] {
-  return loadHrProjects(filePath).map((p) => mapHrProjectToTask(p, quarter));
+  return loadHrProjects(filePath)
+    .filter((p) => p.priority !== '상시')
+    .map((p) => mapHrProjectToTask(p, quarter));
 }
--- a/backend/prisma/migrations/20260608120000_milestone_members/migration.sql
+++ b/backend/prisma/migrations/20260608120000_milestone_members/migration.sql
@@ -0,0 +1,28 @@
+ALTER TABLE "milestones" ADD COLUMN IF NOT EXISTS "pmMemberId" TEXT;
+
+CREATE TABLE IF NOT EXISTS "milestone_assignees" (
+    "milestoneId" TEXT NOT NULL,
+    "memberId" TEXT NOT NULL,
+    CONSTRAINT "milestone_assignees_pkey" PRIMARY KEY ("milestoneId","memberId")
+);
+
+CREATE INDEX IF NOT EXISTS "milestone_assignees_memberId_idx" ON "milestone_assignees"("memberId");
+CREATE INDEX IF NOT EXISTS "milestones_pmMemberId_idx" ON "milestones"("pmMemberId");
+
+DO $$ BEGIN
+  ALTER TABLE "milestones" ADD CONSTRAINT "milestones_pmMemberId_fkey"
+    FOREIGN KEY ("pmMemberId") REFERENCES "team_members"("id") ON DELETE SET NULL ON UPDATE CASCADE;
+EXCEPTION WHEN duplicate_object THEN NULL;
+END $$;
+
+DO $$ BEGIN
+  ALTER TABLE "milestone_assignees" ADD CONSTRAINT "milestone_assignees_milestoneId_fkey"
+    FOREIGN KEY ("milestoneId") REFERENCES "milestones"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+EXCEPTION WHEN duplicate_object THEN NULL;
+END $$;
+
+DO $$ BEGIN
+  ALTER TABLE "milestone_assignees" ADD CONSTRAINT "milestone_assignees_memberId_fkey"
+    FOREIGN KEY ("memberId") REFERENCES "team_members"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+EXCEPTION WHEN duplicate_object THEN NULL;
+END $$;
--- a/backend/prisma/migrations/20260608140000_task_issue_entries/migration.sql
+++ b/backend/prisma/migrations/20260608140000_task_issue_entries/migration.sql
@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "tasks" ADD COLUMN "issueEntries" JSONB;
--- a/backend/prisma/migrations/20260610100000_hub_config/migration.sql
+++ b/backend/prisma/migrations/20260610100000_hub_config/migration.sql
@@ -0,0 +1,8 @@
+-- CreateTable
+CREATE TABLE IF NOT EXISTS "hub_configs" (
+    "id" TEXT NOT NULL,
+    "config" JSONB NOT NULL,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+
+    CONSTRAINT "hub_configs_pkey" PRIMARY KEY ("id")
+);
--- a/backend/prisma/migrations/20260610120000_milestone_subtitle/migration.sql
+++ b/backend/prisma/migrations/20260610120000_milestone_subtitle/migration.sql
@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "milestones" ADD COLUMN IF NOT EXISTS "subtitle" TEXT;
--- a/backend/prisma/migrations/20260611100000_milestone_period_entries/migration.sql
+++ b/backend/prisma/migrations/20260611100000_milestone_period_entries/migration.sql
@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "milestones" ADD COLUMN "periodEntries" JSONB;
--- a/backend/prisma/schema.prisma
+++ b/backend/prisma/schema.prisma
@@ -46,6 +46,8 @@ model TeamMember {

  pmTasks       Task[]         @relation("PmTasks")
  taskAssignees TaskAssignee[]
+  milestonePmTasks       Milestone[]           @relation("MilestonePm")
+  milestoneAssignees     MilestoneAssignee[]

  @@index([cell])
  @@index([isActive])
@@ -72,7 +74,8 @@ model Task {
  tag         String?    // Growth | Policy | Performance | Culture | Asset | Space | Safety | Environment
  taskType    String?    // 상시업무 | 프로젝트
  progress    Int        @default(0)
-  issueNote   String?
+  issueNote     String?
+  issueEntries  Json?
  startDate   DateTime?
  dueDate     DateTime?
  showDate    Boolean   @default(true)
@@ -200,24 +203,42 @@ model Milestone {
  id          String    @id @default(cuid())
  taskId      String
  title       String
+  subtitle    String?
  description String?
  startDate   DateTime?
  dueDate     DateTime?
+  periodEntries Json?
  progress    Int       @default(0)
  links       String?   // JSON: [{ "label": string, "url": string }]
  completedAt DateTime?
  order       Int       @default(0)
+  pmMemberId  String?
  createdAt   DateTime  @default(now())
  updatedAt   DateTime  @updatedAt

-  task    Task         @relation(fields: [taskId], references: [id], onDelete: Cascade)
-  details TaskDetail[]
-  files   File[]
+  task                Task                 @relation(fields: [taskId], references: [id], onDelete: Cascade)
+  pmMember            TeamMember?          @relation("MilestonePm", fields: [pmMemberId], references: [id])
+  milestoneAssignees  MilestoneAssignee[]
+  details             TaskDetail[]
+  files               File[]

  @@index([taskId])
+  @@index([pmMemberId])
  @@map("milestones")
 }

+model MilestoneAssignee {
+  milestoneId String
+  memberId    String
+
+  milestone Milestone  @relation(fields: [milestoneId], references: [id], onDelete: Cascade)
+  member    TeamMember @relation(fields: [memberId], references: [id], onDelete: Cascade)
+
+  @@id([milestoneId, memberId])
+  @@index([memberId])
+  @@map("milestone_assignees")
+}
+
 // ─── 컬럼 설정 ───────────────────────────────────────────────

 model ColumnConfig {
@@ -231,6 +252,16 @@ model ColumnConfig {
  @@map("column_configs")
 }

+// ─── 허브 설정 (분기 중점 과제·일정·상시 라벨) ─────────────────
+
+model HubConfig {
+  id        String   @id @default("default")
+  config    Json
+  updatedAt DateTime @updatedAt
+
+  @@map("hub_configs")
+}
+
 // ─── 감사 로그 ───────────────────────────────────────────────

 model AuditLog {
--- a/backend/prisma/seed.ts
+++ b/backend/prisma/seed.ts
@@ -1,67 +1,273 @@
 import 'dotenv/config';
+
 import bcrypt from 'bcrypt';
+
 import { PrismaClient } from '@prisma/client';
-import { mapAllHrProjects } from './mapHrProjects';
+
+import {
+
+  loadHrProjects,
+
+  mapAllHrProjects,
+
+  mapHrProjectToTask,
+
+  mapHrTeamMembers,
+
+  normalizePersonName,
+
+} from './mapHrProjects';
+
+

 const prisma = new PrismaClient();

+
+
+const HUB_CONFIG = {
+
+  sloganTitle: '분기 중점 과제',
+
+  sloganLines: ['인사 · 육성 · 문화 · 총무', '개선과제', '정상 추진'],
+
+  scheduleTitle: '분기 주요 일정',
+
+  scheduleItems: [
+
+    { id: '1', date: '2026-04-01', text: '상반기 채용·온보딩' },
+
+    { id: '2', date: '2026-05-15', text: '조직문화 진단·리더십 교육' },
+
+    { id: '3', date: '2026-06-20', text: '분기 성과 점검·평가' },
+
+  ],
+
+  routineLabels: ['채용 운영', '학습 지원', '직원 소통', '자산·시설', '문서·행정'],
+
+};
+
+
+
 async function main() {
-  console.log('🌱 Seeding database...');
+
+  console.log('🌱 Seeding database from data/seed/hr-data.json ...');
+
+

  const adminPw = await bcrypt.hash('admin1234!', 12);
+
  const memberPw = await bcrypt.hash('member1234!', 12);

+
+
  const admin = await prisma.user.upsert({
+
    where: { email: 'admin@eene.com' },
+
    update: {},
+
    create: { email: 'admin@eene.com', password: adminPw, name: '관리자', role: 'ADMIN', department: 'EENE' },
+
  });

+
+
  const member = await prisma.user.upsert({
+
    where: { email: 'member@eene.com' },
+
    update: { name: '정성호' },
+
    create: { email: 'member@eene.com', password: memberPw, name: '정성호', role: 'MEMBER', department: 'EENE' },
+
  });

+
+
  console.log('✅ Users ready');

-  const mapped = mapAllHrProjects();
+
+
+  await prisma.milestoneAssignee.deleteMany({});
+
+  await prisma.taskAssignee.deleteMany({});

  await prisma.file.deleteMany({});
+
  await prisma.taskDetail.deleteMany({});
+
  await prisma.milestone.deleteMany({});
+
  await prisma.kpiMetric.deleteMany({});
+
  await prisma.task.deleteMany({});

-  for (const t of mapped) {
-    const { milestones, detailContent, ...taskData } = t;
-    const task = await prisma.task.create({
+  await prisma.teamMember.deleteMany({});
+
+
+
+  const teamParsed = mapHrTeamMembers();
+
+  const memberIdByName = new Map<string, string>();
+
+
+
+  for (const tm of teamParsed) {
+
+    const created = await prisma.teamMember.create({
+
      data: {
-        ...taskData,
-        creatorId: admin.id,
-        assigneeId: member.id,
+
+        name: tm.name,
+
+        rank: tm.rank,
+
+        role: tm.role,
+
+        cell: tm.cell,
+
+        photoUrl: tm.photoUrl,
+
+        sortOrder: tm.sortOrder,
+
+        isActive: true,
+
      },
+
    });

-    for (const [order, ms] of milestones.entries()) {
-      await prisma.milestone.create({
-        data: { ...ms, taskId: task.id, order },
-      });
-    }
+    memberIdByName.set(normalizePersonName(tm.name), created.id);

-    if (detailContent) {
-      await prisma.taskDetail.create({
-        data: {
-          taskId: task.id,
-          content: detailContent,
-          updatedBy: admin.id,
-        },
-      });
-    }
  }

-  console.log(`✅ Tasks created: ${mapped.length}개 (HR_Dashboard 데이터)`);
+
+
+  console.log(`✅ Team members: ${teamParsed.length}명 (hr-data.json TEAM)`);
+
+
+
+  const hrProjects = loadHrProjects();
+
+  let taskCount = 0;
+
+
+
+  for (const hp of hrProjects) {
+    if (hp.priority === '상시') continue;
+
+    const t = mapHrProjectToTask(hp);
+
+    const { milestones, detailContent, ...taskData } = t;
+
+
+
+    const pmKey = hp.pm?.trim() ? normalizePersonName(hp.pm) : '';
+
+    const pmMemberId = pmKey ? memberIdByName.get(pmKey) ?? null : null;
+
+
+
+    const ownerIds = [...new Set(
+
+      (hp.owners ?? [])
+
+        .map((o) => normalizePersonName(o))
+
+        .filter(Boolean)
+
+        .map((key) => memberIdByName.get(key))
+
+        .filter((id): id is string => !!id),
+
+    )];
+
+
+
+    const task = await prisma.task.create({
+
+      data: {
+
+        ...taskData,
+
+        creatorId: admin.id,
+
+        assigneeId: member.id,
+
+        pmMemberId,
+
+        ...(ownerIds.length > 0
+
+          ? { taskAssignees: { create: ownerIds.map((memberId) => ({ memberId })) } }
+
+          : {}),
+
+      },
+
+    });
+
+
+
+    for (const [order, ms] of milestones.entries()) {
+
+      await prisma.milestone.create({
+
+        data: { ...ms, taskId: task.id, order },
+
+      });
+
+    }
+
+
+
+    if (detailContent) {
+
+      await prisma.taskDetail.create({
+
+        data: {
+
+          taskId: task.id,
+
+          content: detailContent,
+
+          updatedBy: admin.id,
+
+        },
+
+      });
+
+    }
+
+
+
+    taskCount += 1;
+
+  }
+
+
+
+  await prisma.hubConfig.upsert({
+
+    where: { id: 'default' },
+
+    update: { config: HUB_CONFIG },
+
+    create: { id: 'default', config: HUB_CONFIG },
+
+  });
+
+
+
+  console.log(`✅ Tasks: ${taskCount}개 (PROJECTS)`);
+
+  console.log('✅ Hub config reset (5 대분류 상시업무)');
+
  console.log('🎉 Seeding complete!');
+
+  console.log('   → 브라우저에서 Ctrl+F5 후, 필요 시 DevTools에서 localStorage 허브 키 삭제');
+
 }

+
+
 main().catch(console.error).finally(() => prisma.$disconnect());
+
--- a/backend/scripts/_archive/deploy/sync-from-remote.ts
+++ b/backend/scripts/_archive/deploy/sync-from-remote.ts
--- a/backend/scripts/_archive/deploy/sync-to-remote.ts
+++ b/backend/scripts/_archive/deploy/sync-to-remote.ts
--- a/backend/scripts/cleanup-legacy-routine.ts
+++ b/backend/scripts/cleanup-legacy-routine.ts
@@ -0,0 +1,75 @@
+import 'dotenv/config';
+import fs from 'fs';
+import path from 'path';
+import { PrismaClient } from '@prisma/client';
+import { getProjectRoot } from '../src/lib/projectPaths';
+
+const prisma = new PrismaClient();
+
+/** hr-data legacy 상시업무 — 허브 대분류 셸로 대체, 시드·DB에서 제거 */
+const LEGACY_ROUTINE_TITLES = [
+  'H/W, S/W',
+  '시설관리',
+  '배움터',
+  '인재채용',
+  '학습 지원',
+  '채용 운영',
+];
+
+async function deleteLegacyRoutineTasks() {
+  for (const title of LEGACY_ROUTINE_TITLES) {
+    const task = await prisma.task.findFirst({
+      where: { title, taskType: { in: ['기반업무', '상시업무'] } },
+    });
+    if (!task) {
+      console.log(`  skip (not found): ${title}`);
+      continue;
+    }
+    await prisma.task.delete({ where: { id: task.id } });
+    console.log(`  🗑 deleted: ${title}`);
+  }
+
+  const remaining = await prisma.task.count({
+    where: { taskType: { in: ['기반업무', '상시업무'] } },
+  });
+  if (remaining > 0) {
+    const extras = await prisma.task.findMany({
+      where: { taskType: { in: ['기반업무', '상시업무'] } },
+      select: { title: true },
+    });
+    for (const t of extras) {
+      await prisma.task.deleteMany({ where: { title: t.title, taskType: { in: ['기반업무', '상시업무'] } } });
+      console.log(`  🗑 deleted (extra routine): ${t.title}`);
+    }
+  }
+}
+
+function patchHrData() {
+  const seedPath = path.join(getProjectRoot(), 'data', 'seed', 'hr-data.json');
+  const data = JSON.parse(fs.readFileSync(seedPath, 'utf-8')) as {
+    PROJECTS: { name: string; priority?: string; [key: string]: unknown }[];
+  };
+
+  const before = data.PROJECTS.length;
+  data.PROJECTS = data.PROJECTS.filter((p) => p.priority !== '상시');
+
+  fs.writeFileSync(seedPath, JSON.stringify(data, null, 2), 'utf-8');
+  console.log(`  ✓ hr-data.json: removed ${before - data.PROJECTS.length} legacy 상시 entries (${data.PROJECTS.length} projects left)`);
+}
+
+async function main() {
+  console.log('🧹 Delete all legacy routine tasks from DB ...');
+  await deleteLegacyRoutineTasks();
+
+  console.log('📝 Remove priority:상시 from hr-data.json ...');
+  patchHrData();
+
+  console.log('Done. 상시업무는 허브에서 대분류 클릭 시 새 셸로 생성됩니다.');
+}
+
+main()
+  .catch((err) => {
+    console.error(err);
+    process.exit(1);
+  })
+  .finally(() => prisma.$disconnect());
--- a/backend/scripts/import-hr-data.ts
+++ b/backend/scripts/import-hr-data.ts
@@ -102,7 +102,7 @@ async function importViaApi(adminId: string, memberId: string) {

 async function main() {
  const tasks = mapAllHrProjects();
-  console.log(`📦 HR_Dashboard → ${tasks.length} tasks mapped`);
+  console.log(`📦 data/seed/hr-data.json → ${tasks.length} tasks mapped`);

  let adminId: string;
  let memberId: string;
--- a/backend/scripts/migrate-board-sections.ts
+++ b/backend/scripts/migrate-board-sections.ts
@@ -0,0 +1,46 @@
+/**
+ * 4분면 보드 section 정렬 — 조직문화(EX) 프로젝트 재배치
+ * npx tsx scripts/migrate-board-sections.ts
+ */
+import 'dotenv/config';
+import { PrismaClient } from '@prisma/client';
+
+const prisma = new PrismaClient();
+
+const EX_TITLE = /회사생활|C\.E\.L|조직문화|복리후생|문화\s*진단|직원\s*소통/i;
+
+async function main() {
+  const tasks = await prisma.task.findMany({
+    select: { id: true, title: true, section: true },
+  });
+
+  let moved = 0;
+  for (const task of tasks) {
+    if (task.section === '조직문화') continue;
+    if (!EX_TITLE.test(task.title.trim())) continue;
+    await prisma.task.update({
+      where: { id: task.id },
+      data: { section: '조직문화', category: '조직문화' },
+    });
+    moved += 1;
+    console.log(`  → 조직문화: ${task.title}`);
+  }
+
+  const col = await prisma.columnConfig.findUnique({ where: { key: '운영관리' } });
+  if (col && (col.title === '운영관리' || col.title === '운영관리 부문' || col.titleEn === 'Operations')) {
+    await prisma.columnConfig.update({
+      where: { key: '운영관리' },
+      data: { title: '총무관리', titleEn: 'GA' },
+    });
+    console.log('  → column 운영관리 title → 총무관리');
+  }
+
+  console.log(`✅ migrate-board-sections complete (${moved} tasks moved)`);
+}
+
+main()
+  .catch((err) => {
+    console.error(err);
+    process.exit(1);
+  })
+  .finally(() => prisma.$disconnect());
--- a/backend/scripts/migrate-milestone-period-notes.ts
+++ b/backend/scripts/migrate-milestone-period-notes.ts
@@ -0,0 +1,59 @@
+import 'dotenv/config';
+import { Prisma, PrismaClient } from '@prisma/client';
+import { migrateDescriptionToPeriodEntries } from '../src/lib/milestonePeriods';
+
+const prisma = new PrismaClient();
+
+async function main() {
+  const milestones = await prisma.milestone.findMany({
+    where: {
+      description: { not: null },
+      NOT: { description: '' },
+    },
+    select: {
+      id: true,
+      title: true,
+      description: true,
+      startDate: true,
+      dueDate: true,
+      periodEntries: true,
+    },
+  });
+
+  let migrated = 0;
+  let skipped = 0;
+
+  for (const m of milestones) {
+    const { periodEntries, migrated: didMigrate } = migrateDescriptionToPeriodEntries({
+      id: m.id,
+      periodEntries: m.periodEntries,
+      startDate: m.startDate,
+      dueDate: m.dueDate,
+      description: m.description,
+    });
+
+    if (!didMigrate || !periodEntries) {
+      skipped += 1;
+      continue;
+    }
+
+    await prisma.milestone.update({
+      where: { id: m.id },
+      data: {
+        periodEntries: periodEntries as Prisma.InputJsonValue,
+        description: null,
+      },
+    });
+    migrated += 1;
+    console.log(`  ✓ ${m.title} → 기간1 note (${periodEntries.length}건)`);
+  }
+
+  console.log(`\nDone. migrated=${migrated}, skipped=${skipped}, scanned=${milestones.length}`);
+}
+
+main()
+  .catch((err) => {
+    console.error(err);
+    process.exit(1);
+  })
+  .finally(() => prisma.$disconnect());
--- a/backend/scripts/seed-if-empty.ts
+++ b/backend/scripts/seed-if-empty.ts
@@ -0,0 +1,28 @@
+/**
+ * 로컬 DB가 비어 있을 때만 seed 실행 (최초 1회용)
+ */
+import 'dotenv/config';
+import { execSync } from 'child_process';
+import path from 'path';
+import { PrismaClient } from '@prisma/client';
+
+const prisma = new PrismaClient();
+
+async function main() {
+  const users = await prisma.user.count();
+  if (users > 0) {
+    console.log('✓ Local DB has data — skip initial seed');
+    return;
+  }
+
+  console.log('📦 Empty local DB — loading initial sample data...');
+  const backendRoot = path.resolve(__dirname, '..');
+  execSync('tsx prisma/seed.ts', { stdio: 'inherit', cwd: backendRoot });
+}
+
+main()
+  .catch((err) => {
+    console.error(err);
+    process.exit(1);
+  })
+  .finally(() => prisma.$disconnect());
--- a/backend/scripts/seed-team-if-empty.ts
+++ b/backend/scripts/seed-team-if-empty.ts
@@ -0,0 +1,45 @@
+/**
+ * 팀원이 0명일 때만 hr-data.json TEAM → team_members (업무는 건드리지 않음)
+ */
+import 'dotenv/config';
+import { PrismaClient } from '@prisma/client';
+import { mapHrTeamMembers } from '../prisma/mapHrProjects';
+
+const prisma = new PrismaClient();
+
+async function main() {
+  const count = await prisma.teamMember.count();
+  if (count > 0) {
+    console.log('✓ Team members exist — skip TEAM seed');
+    return;
+  }
+
+  const teamParsed = mapHrTeamMembers();
+  if (teamParsed.length === 0) {
+    console.log('✓ hr-data.json TEAM empty — skip');
+    return;
+  }
+
+  for (const tm of teamParsed) {
+    await prisma.teamMember.create({
+      data: {
+        name: tm.name,
+        rank: tm.rank,
+        role: tm.role,
+        cell: tm.cell,
+        photoUrl: tm.photoUrl,
+        sortOrder: tm.sortOrder,
+        isActive: true,
+      },
+    });
+  }
+
+  console.log(`✅ Team members seeded: ${teamParsed.length}명 (hr-data.json TEAM)`);
+}
+
+main()
+  .catch((err) => {
+    console.error(err);
+    process.exit(1);
+  })
+  .finally(() => prisma.$disconnect());
--- a/backend/scripts/sync-team-photos.ts
+++ b/backend/scripts/sync-team-photos.ts
@@ -0,0 +1,198 @@
+import 'dotenv/config';
+import fs from 'fs';
+import path from 'path';
+import crypto from 'crypto';
+import { PrismaClient } from '@prisma/client';
+import { getProjectRoot, getUploadDir, getTeamUploadDir } from '../src/lib/projectPaths';
+
+const prisma = new PrismaClient();
+
+const TEAM_ORDER = ['조태희', '최근혜', '류원준', '주완기', '정성호'];
+
+function fileHash(filePath: string): string {
+  const buf = fs.readFileSync(filePath);
+  return crypto.createHash('md5').update(buf).digest('hex');
+}
+
+function resolveUploadPath(relative: string): string {
+  const clean = relative.replace(/^\//, '').replace(/^uploads\//, '');
+  return path.join(getUploadDir(), clean);
+}
+
+async function syncTeamPhotos() {
+  const teamDir = getTeamUploadDir();
+  if (!fs.existsSync(teamDir)) return;
+
+  const pngs = fs
+    .readdirSync(teamDir)
+    .filter((f) => /\.(png|jpe?g|webp|gif)$/i.test(f))
+    .map((f) => path.join(teamDir, f));
+
+  const byHash = new Map<string, string>();
+  const duplicates: string[] = [];
+
+  for (const filePath of pngs) {
+    const hash = fileHash(filePath);
+    const existing = byHash.get(hash);
+    if (existing) {
+      const keep =
+        fs.statSync(existing).birthtimeMs <= fs.statSync(filePath).birthtimeMs
+          ? existing
+          : filePath;
+      duplicates.push(keep === existing ? filePath : existing);
+      byHash.set(hash, keep);
+    } else {
+      byHash.set(hash, filePath);
+    }
+  }
+
+  for (const dup of duplicates) {
+    fs.unlinkSync(dup);
+    console.log(`  🗑 duplicate removed: ${path.basename(dup)}`);
+  }
+
+  const unique = [...byHash.values()].sort(
+    (a, b) => fs.statSync(a).birthtimeMs - fs.statSync(b).birthtimeMs,
+  );
+
+  const members = await prisma.teamMember.findMany();
+  const byName = new Map(members.map((m) => [m.name, m]));
+
+  for (let i = 0; i < TEAM_ORDER.length; i++) {
+    const name = TEAM_ORDER[i];
+    const member = byName.get(name);
+    if (!member) continue;
+
+    const photoPath = unique[i];
+    const photoUrl = photoPath
+      ? `/uploads/team/${path.basename(photoPath)}`
+      : null;
+
+    await prisma.teamMember.update({
+      where: { id: member.id },
+      data: { photoUrl, sortOrder: i },
+    });
+
+    console.log(`  ✓ ${name} → ${photoUrl ?? '(none)'}`);
+  }
+
+  for (const member of members) {
+    if (TEAM_ORDER.includes(member.name)) continue;
+    const url = member.photoUrl;
+    if (!url) continue;
+    const abs = resolveUploadPath(url);
+    if (!fs.existsSync(abs)) {
+      await prisma.teamMember.update({
+        where: { id: member.id },
+        data: { photoUrl: null },
+      });
+      console.log(`  ✓ cleared broken photo: ${member.name}`);
+    }
+  }
+}
+
+async function clearBrokenTeamPhotoUrls() {
+  const members = await prisma.teamMember.findMany();
+  for (const member of members) {
+    if (!member.photoUrl) continue;
+    if (member.photoUrl.startsWith('http') || member.photoUrl.startsWith('data:')) continue;
+    const abs = resolveUploadPath(member.photoUrl);
+    if (!fs.existsSync(abs)) {
+      await prisma.teamMember.update({
+        where: { id: member.id },
+        data: { photoUrl: null },
+      });
+      console.log(`  ✓ cleared missing file: ${member.name} (${member.photoUrl})`);
+    }
+  }
+}
+
+async function pruneOrphanUploads() {
+  const referenced = new Set<string>();
+
+  const dbFiles = await prisma.file.findMany({ select: { path: true, filename: true } });
+  for (const f of dbFiles) {
+    if (f.path) referenced.add(path.normalize(f.path));
+    referenced.add(path.join(getUploadDir(), f.filename));
+  }
+
+  const members = await prisma.teamMember.findMany({ select: { photoUrl: true } });
+  for (const m of members) {
+    if (!m.photoUrl || m.photoUrl.startsWith('http')) continue;
+    referenced.add(resolveUploadPath(m.photoUrl));
+  }
+
+  const uploadRoot = getUploadDir();
+  const walk = (dir: string) => {
+    for (const entry of fs.readdirSync(dir, { withFileTypes: true })) {
+      const full = path.join(dir, entry.name);
+      if (entry.name === '.gitkeep') continue;
+      if (entry.isDirectory()) {
+        walk(full);
+        continue;
+      }
+      const norm = path.normalize(full);
+      if (!referenced.has(norm)) {
+        fs.unlinkSync(full);
+        console.log(`  🗑 orphan: ${path.relative(getProjectRoot(), full)}`);
+      }
+    }
+  };
+
+  walk(uploadRoot);
+}
+
+async function patchHrDataTeamPhotos() {
+  const seedPath = path.join(getProjectRoot(), 'data', 'seed', 'hr-data.json');
+  if (!fs.existsSync(seedPath)) return;
+
+  const data = JSON.parse(fs.readFileSync(seedPath, 'utf-8')) as {
+    TEAM?: { name: string; photo?: string }[];
+  };
+
+  if (!Array.isArray(data.TEAM)) return;
+
+  const members = await prisma.teamMember.findMany();
+  const byName = new Map(members.map((m) => [m.name, m]));
+
+  let changed = false;
+  for (const entry of data.TEAM) {
+    const parsed = entry.name.match(/^(\S+)/);
+    const name = parsed?.[1];
+    const member = name ? byName.get(name) : null;
+    const nextPhoto = member?.photoUrl ?? undefined;
+    if (entry.photo !== nextPhoto) {
+      if (nextPhoto) entry.photo = nextPhoto;
+      else delete entry.photo;
+      changed = true;
+    }
+  }
+
+  if (changed) {
+    fs.writeFileSync(seedPath, JSON.stringify(data, null, 2), 'utf-8');
+    console.log('  ✓ hr-data.json TEAM photos synced to uploads/team paths');
+  }
+}
+
+async function main() {
+  console.log('📷 Sync team photos from uploads/team/ ...');
+  await syncTeamPhotos();
+
+  console.log('🔍 Clear broken photo URLs ...');
+  await clearBrokenTeamPhotoUrls();
+
+  console.log('🧹 Remove orphan uploads (not in DB) ...');
+  await pruneOrphanUploads();
+
+  console.log('📝 Update hr-data.json TEAM photo paths ...');
+  await patchHrDataTeamPhotos();
+
+  console.log('Done.');
+}
+
+main()
+  .catch((err) => {
+    console.error(err);
+    process.exit(1);
+  })
+  .finally(() => prisma.$disconnect());
--- a/backend/src/app.ts
+++ b/backend/src/app.ts
@@ -17,8 +17,11 @@ app.use(
 const allowedOrigins = [
  'http://localhost:3000',
  'http://localhost:5173',
+  'https://localhost:3000',
  'http://127.0.0.1:3000',
+  'https://127.0.0.1:3000',
  'http://172.16.8.248:3000',
+  'https://172.16.8.248:3000',
  'https://eene-dashboard.vercel.app',
  process.env.FRONTEND_URL,
 ].filter(Boolean) as string[];
@@ -26,11 +29,11 @@ const allowedOrigins = [
 function isAllowedOrigin(origin: string): boolean {
  if (allowedOrigins.includes(origin)) return true;
  if (/^https:\/\/[\w-]+\.vercel\.app$/.test(origin)) return true;
-  // 로컬·사설망 프론트 (용량 절약용 로컬 서버)
-  if (/^http:\/\/(localhost|127\.0\.0\.1)(:\d+)?$/.test(origin)) return true;
-  if (/^http:\/\/172\.(1[6-9]|2\d|3[01])\.\d+\.\d+(:\d+)?$/.test(origin)) return true;
-  if (/^http:\/\/192\.168\.\d+\.\d+(:\d+)?$/.test(origin)) return true;
-  if (/^http:\/\/10\.\d+\.\d+\.\d+(:\d+)?$/.test(origin)) return true;
+  // 로컬·사설망 프론트 (http/https, LAN IP)
+  if (/^https?:\/\/(localhost|127\.0\.0\.1)(:\d+)?$/i.test(origin)) return true;
+  if (/^https?:\/\/172\.(1[6-9]|2\d|3[01])\.\d+\.\d+(:\d+)?$/.test(origin)) return true;
+  if (/^https?:\/\/192\.168\.\d+\.\d+(:\d+)?$/.test(origin)) return true;
+  if (/^https?:\/\/10\.\d+\.\d+\.\d+(:\d+)?$/.test(origin)) return true;
  return false;
 }

--- a/backend/src/index.ts
+++ b/backend/src/index.ts
@@ -5,6 +5,7 @@ import app from './app';
 import { setupSocketHandlers } from './socket';
 import { prisma } from './lib/prisma';
 import { ensureLocalDirs } from './lib/ensureLocalDirs';
+import { getProjectRoot, getHrSeedPath, getUploadDir } from './lib/projectPaths';

 const PORT = Number(process.env.PORT) || 4000;
 const FRONTEND_URL = process.env.FRONTEND_URL || 'http://localhost:3000';
@@ -19,11 +20,16 @@ const io = new Server(httpServer, {
 });

 setupSocketHandlers(io);
+app.set('io', io);

 async function main() {
  ensureLocalDirs();
  await prisma.$connect();
-  console.log('✅ Database connected (PostgreSQL — 로컬 data/postgres 또는 DATABASE_URL)');
+  console.log('✅ Database connected — local PostgreSQL (data/postgres)');
+
+  console.log(`📂 Project root: ${getProjectRoot()}`);
+  console.log(`📂 HR seed: ${getHrSeedPath()}`);
+  console.log(`📂 Uploads: ${getUploadDir()}`);

  httpServer.listen(PORT, '0.0.0.0', () => {
    console.log(`✅ Server running on http://0.0.0.0:${PORT}  (팀원: http://<이PC의IP>:${PORT})`);
--- a/backend/src/lib/ensureLocalDirs.ts
+++ b/backend/src/lib/ensureLocalDirs.ts
@@ -1,22 +1,6 @@
-import fs from 'fs';
-import path from 'path';
+import { ensureProjectDataDirs } from './projectPaths';

-/** 로컬 uploads·팀 사진 폴더 생성 (데이터 영구 저장) */
+/** 로컬 data·uploads 폴더 생성 (DB·파일 영구 저장) */
 export function ensureLocalDirs() {
-  const uploadDir = path.resolve(process.env.UPLOAD_DIR || '../uploads');
-  const teamDir = path.join(uploadDir, 'team');
-  const dataPostgresHint = path.resolve('../data/postgres');
-
-  for (const dir of [uploadDir, teamDir]) {
-    if (!fs.existsSync(dir)) {
-      fs.mkdirSync(dir, { recursive: true });
-      console.log(`📁 Created: ${dir}`);
-    }
-  }
-
-  if (!fs.existsSync(dataPostgresHint)) {
-    console.log(
-      '💡 PostgreSQL 로컬 저장: 프로젝트 루트에서 docker compose up -d 실행 시 data/postgres 에 DB가 보존됩니다.',
-    );
-  }
+  ensureProjectDataDirs();
 }
--- a/backend/src/lib/fileMime.ts
+++ b/backend/src/lib/fileMime.ts
@@ -0,0 +1,60 @@
+const EXT_MIME: Record<string, string> = {
+  pdf: 'application/pdf',
+  png: 'image/png',
+  jpg: 'image/jpeg',
+  jpeg: 'image/jpeg',
+  gif: 'image/gif',
+  webp: 'image/webp',
+  bmp: 'image/bmp',
+  svg: 'image/svg+xml',
+  mp4: 'video/mp4',
+  mov: 'video/quicktime',
+  avi: 'video/x-msvideo',
+  webm: 'video/webm',
+  mkv: 'video/x-matroska',
+  m4v: 'video/x-m4v',
+  wmv: 'video/x-ms-wmv',
+  xlsx: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+  xls: 'application/vnd.ms-excel',
+  csv: 'text/csv',
+  docx: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+  doc: 'application/msword',
+  pptx: 'application/vnd.openxmlformats-officedocument.presentationml.presentation',
+  ppt: 'application/vnd.ms-powerpoint',
+  hwp: 'application/x-hwp',
+  hwpx: 'application/hwp+zip',
+  txt: 'text/plain',
+};
+
+/** multer가 application/octet-stream 으로 저장할 때 확장자로 보정 */
+export function resolveFileMime(originalName: string, stored?: string | null): string {
+  const ext = originalName.split('.').pop()?.toLowerCase() ?? '';
+  const fromExt = ext ? EXT_MIME[ext] : undefined;
+
+  if (!stored || stored === 'application/octet-stream' || stored === 'application/x-msdownload') {
+    return fromExt ?? stored ?? 'application/octet-stream';
+  }
+
+  if (fromExt && stored.startsWith('application/') && stored.includes('octet')) {
+    return fromExt;
+  }
+
+  return stored;
+}
+
+export function isInlinePreviewMime(mime: string): boolean {
+  return (
+    mime.startsWith('image/') ||
+    mime.startsWith('video/') ||
+    mime.startsWith('text/') ||
+    mime === 'application/pdf' ||
+    mime.includes('spreadsheet') ||
+    mime.includes('excel') ||
+    mime.includes('wordprocessingml') ||
+    mime.includes('presentationml') ||
+    mime === 'application/msword' ||
+    mime === 'application/vnd.ms-powerpoint' ||
+    mime === 'application/x-hwp' ||
+    mime === 'application/hwp+zip'
+  );
+}
--- a/backend/src/lib/milestonePeriods.ts
+++ b/backend/src/lib/milestonePeriods.ts
@@ -0,0 +1,140 @@
+export interface MilestonePeriodEntry {
+  id: string;
+  startDate?: string | null;
+  dueDate?: string | null;
+  note?: string | null;
+}
+
+function parseDay(iso: string): Date {
+  const d = new Date(iso);
+  return new Date(d.getFullYear(), d.getMonth(), d.getDate());
+}
+
+export function normalizePeriodEntries(raw: unknown): MilestonePeriodEntry[] {
+  if (!Array.isArray(raw)) return [];
+  const entries: MilestonePeriodEntry[] = [];
+  for (const item of raw) {
+    if (!item || typeof item !== 'object') continue;
+    const row = item as Record<string, unknown>;
+    const startDate = typeof row.startDate === 'string' ? row.startDate.trim() || null : null;
+    const dueDate = typeof row.dueDate === 'string' ? row.dueDate.trim() || null : null;
+    const note = typeof row.note === 'string' ? row.note.trim() || null : null;
+    if (!startDate && !dueDate && !note) continue;
+    entries.push({
+      id: typeof row.id === 'string' && row.id ? row.id : `period-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`,
+      startDate,
+      dueDate,
+      note,
+    });
+  }
+  return entries;
+}
+
+export function deriveMilestoneDatesFromPeriods(entries: MilestonePeriodEntry[]): {
+  startDate: Date | null;
+  dueDate: Date | null;
+} {
+  const times: number[] = [];
+  for (const entry of entries) {
+    if (entry.startDate) times.push(parseDay(entry.startDate).getTime());
+    if (entry.dueDate) times.push(parseDay(entry.dueDate).getTime());
+  }
+  if (times.length === 0) return { startDate: null, dueDate: null };
+  return {
+    startDate: new Date(Math.min(...times)),
+    dueDate: new Date(Math.max(...times)),
+  };
+}
+
+export function resolveMilestonePeriodPayload(body: Record<string, unknown>): {
+  periodEntries: MilestonePeriodEntry[] | undefined;
+  startDate: Date | null | undefined;
+  dueDate: Date | null | undefined;
+} {
+  if (body.periodEntries !== undefined) {
+    const periodEntries = normalizePeriodEntries(body.periodEntries);
+    const { startDate, dueDate } = deriveMilestoneDatesFromPeriods(periodEntries);
+    return {
+      periodEntries,
+      startDate,
+      dueDate,
+    };
+  }
+
+  const hasLegacyStart = body.startDate !== undefined;
+  const hasLegacyDue = body.dueDate !== undefined;
+  if (!hasLegacyStart && !hasLegacyDue) {
+    return { periodEntries: undefined, startDate: undefined, dueDate: undefined };
+  }
+
+  const startDate = body.startDate ? new Date(String(body.startDate)) : null;
+  const dueDate = body.dueDate ? new Date(String(body.dueDate)) : null;
+  const periodEntries =
+    startDate || dueDate
+      ? normalizePeriodEntries([
+          {
+            id: `period-legacy-${Date.now()}`,
+            startDate: startDate ? startDate.toISOString().slice(0, 10) : null,
+            dueDate: dueDate ? dueDate.toISOString().slice(0, 10) : null,
+            note: null,
+          },
+        ])
+      : [];
+
+  return { periodEntries, startDate, dueDate };
+}
+
+function toDateInput(d: Date | null | undefined): string | null {
+  return d ? d.toISOString().slice(0, 10) : null;
+}
+
+/** 레거시 description(@overview: 포함) → 기간1 note 본문 */
+export function legacyDescriptionNote(description: string | null | undefined): string {
+  if (!description?.trim()) return '';
+  if (description.startsWith('@overview:')) {
+    const rest = description.slice('@overview:'.length);
+    const nl = rest.indexOf('\n');
+    if (nl === -1) return rest.trim();
+    const body = rest.slice(nl + 1).trim();
+    if (body) return body;
+    return rest.slice(0, nl).trim();
+  }
+  return description.trim();
+}
+
+/** 공통업무내용(description)을 periodEntries[0].note로 이관 */
+export function migrateDescriptionToPeriodEntries(input: {
+  id?: string;
+  periodEntries: unknown;
+  startDate: Date | null;
+  dueDate: Date | null;
+  description: string | null;
+}): { periodEntries: MilestonePeriodEntry[] | null; migrated: boolean } {
+  const legacyNote = legacyDescriptionNote(input.description);
+  if (!legacyNote) {
+    return { periodEntries: normalizePeriodEntries(input.periodEntries), migrated: false };
+  }
+
+  const existing = normalizePeriodEntries(input.periodEntries);
+  if (existing.length > 0) {
+    if (existing.some((e) => e.note?.trim())) {
+      return { periodEntries: existing, migrated: false };
+    }
+    const updated = [...existing];
+    updated[0] = { ...updated[0], note: legacyNote };
+    return { periodEntries: updated, migrated: true };
+  }
+
+  const id = input.id ? `period-legacy-${input.id}` : `period-legacy-${Date.now()}`;
+  return {
+    periodEntries: [
+      {
+        id,
+        startDate: toDateInput(input.startDate),
+        dueDate: toDateInput(input.dueDate),
+        note: legacyNote,
+      },
+    ],
+    migrated: true,
+  };
+}
--- a/backend/src/lib/projectPaths.ts
+++ b/backend/src/lib/projectPaths.ts
@@ -0,0 +1,65 @@
+import fs from 'fs';
+import path from 'path';
+
+/** backend/ 디렉터리 (package.json 기준) */
+export function getBackendRoot(): string {
+  return path.resolve(__dirname, '../..');
+}
+
+/** EENE_Dashboard_0608 루트 */
+export function getProjectRoot(): string {
+  return path.resolve(getBackendRoot(), '..');
+}
+
+export function getDataDir(): string {
+  return path.join(getProjectRoot(), 'data');
+}
+
+export function getPostgresDataDir(): string {
+  return path.join(getDataDir(), 'postgres');
+}
+
+export function getSeedDir(): string {
+  return path.join(getDataDir(), 'seed');
+}
+
+/** HR 원본 JSON — seed·import 공통 (프로젝트 내부 data/seed/) */
+export function getHrSeedPath(): string {
+  const configured = process.env.HR_DATA_PATH?.trim();
+  if (configured) {
+    return path.isAbsolute(configured)
+      ? configured
+      : path.resolve(getBackendRoot(), configured);
+  }
+  return path.join(getSeedDir(), 'hr-data.json');
+}
+
+export function getUploadDir(): string {
+  const configured = process.env.UPLOAD_DIR?.trim();
+  if (configured) {
+    return path.isAbsolute(configured)
+      ? configured
+      : path.resolve(getBackendRoot(), configured);
+  }
+  return path.join(getProjectRoot(), 'uploads');
+}
+
+export function getTeamUploadDir(): string {
+  return path.join(getUploadDir(), 'team');
+}
+
+/** 서버 기동 시 data·uploads 등 로컬 영구 저장 폴더 생성 */
+export function ensureProjectDataDirs(): void {
+  for (const dir of [
+    getDataDir(),
+    getPostgresDataDir(),
+    getSeedDir(),
+    getUploadDir(),
+    getTeamUploadDir(),
+  ]) {
+    if (!fs.existsSync(dir)) {
+      fs.mkdirSync(dir, { recursive: true });
+      console.log(`📁 Created: ${dir}`);
+    }
+  }
+}
--- a/backend/src/lib/taskIssues.ts
+++ b/backend/src/lib/taskIssues.ts
@@ -0,0 +1,47 @@
+export interface TaskIssueEntry {
+  id: string;
+  text: string;
+  showOnCard: boolean;
+}
+
+function newIssueId() {
+  return `issue-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`;
+}
+
+export function normalizeIssueEntries(raw: unknown): TaskIssueEntry[] {
+  if (!Array.isArray(raw)) return [];
+  const entries: TaskIssueEntry[] = [];
+  for (const item of raw) {
+    if (!item || typeof item !== 'object') continue;
+    const row = item as Record<string, unknown>;
+    const text = typeof row.text === 'string' ? row.text.trim() : '';
+    if (!text) continue;
+    entries.push({
+      id: typeof row.id === 'string' && row.id ? row.id : newIssueId(),
+      text,
+      showOnCard: row.showOnCard !== false,
+    });
+  }
+  return entries;
+}
+
+export function parseIssueEntriesFromTask(task: {
+  issueEntries?: unknown;
+  issueNote?: string | null;
+  showIssue?: boolean;
+}): TaskIssueEntry[] {
+  const fromJson = normalizeIssueEntries(task.issueEntries);
+  if (fromJson.length > 0) return fromJson;
+  const legacy = task.issueNote?.trim();
+  if (!legacy) return [];
+  return [{ id: 'legacy', text: legacy, showOnCard: task.showIssue !== false }];
+}
+
+export function deriveIssueFields(entries: TaskIssueEntry[]) {
+  const visible = entries.filter((entry) => entry.showOnCard && entry.text.trim());
+  return {
+    issueEntries: entries,
+    issueNote: visible.length > 0 ? visible[visible.length - 1].text : null,
+    showIssue: visible.length > 0,
+  };
+}
--- a/backend/src/lib/taskQuery.ts
+++ b/backend/src/lib/taskQuery.ts
@@ -11,6 +11,13 @@ export const teamMemberSelect = {
  sortOrder: true,
 } as const;

+export const milestoneInclude = {
+  pmMember: { select: teamMemberSelect },
+  milestoneAssignees: {
+    include: { member: { select: teamMemberSelect } },
+  },
+} as const;
+
 export const taskInclude = {
  assignee: { select: { id: true, name: true, department: true } },
  creator: { select: { id: true, name: true } },
@@ -34,15 +41,32 @@ export const taskDetailInclude = {
  },
  kpiMetrics: true,
  files: true,
-  milestones: { orderBy: { order: 'asc' as const } },
+  milestones: {
+    orderBy: { order: 'asc' as const },
+    include: milestoneInclude,
+  },
 };

+export function formatMilestone<T extends Record<string, unknown>>(milestone: T) {
+  const { milestoneAssignees, ...rest } = milestone as T & {
+    milestoneAssignees?: Array<{ member: unknown }>;
+  };
+  const assigneeMembers = (milestoneAssignees ?? []).map((ma) => ma.member);
+  return { ...rest, assigneeMembers };
+}
+
 export function formatTask<T extends Record<string, unknown>>(task: T) {
-  const { taskAssignees, ...rest } = task as T & {
+  const { taskAssignees, milestones, ...rest } = task as T & {
    taskAssignees?: Array<{ member: unknown }>;
+    milestones?: Array<Record<string, unknown>>;
  };
  const assigneeMembers = (taskAssignees ?? []).map((ta) => ta.member);
-  return { ...rest, assigneeMembers };
+  const formattedMilestones = milestones?.map((m) => formatMilestone(m));
+  return {
+    ...rest,
+    assigneeMembers,
+    ...(formattedMilestones !== undefined ? { milestones: formattedMilestones } : {}),
+  };
 }

 export async function syncTaskMembers(
--- a/backend/src/lib/uploadErrors.ts
+++ b/backend/src/lib/uploadErrors.ts
@@ -0,0 +1,23 @@
+import fs from 'fs';
+import type { Express } from 'express';
+
+export const DISK_FULL_MESSAGE =
+  '저장 공간이 부족하여 파일을 업로드하지 못했습니다. 불필요한 파일을 삭제한 후 다시 시도해 주세요.';
+
+export function isDiskFullError(err: unknown): boolean {
+  if (!err || typeof err !== 'object') return false;
+  const e = err as NodeJS.ErrnoException & { cause?: unknown };
+  if (e.code === 'ENOSPC' || e.code === 'EDQUOT') return true;
+  if (e.cause !== undefined) return isDiskFullError(e.cause);
+  return false;
+}
+
+/** multer 업로드 실패 시 디스크에 남은 임시 파일 제거 */
+export function cleanupUploadedFile(file?: Express.Multer.File | null) {
+  if (!file?.path) return;
+  try {
+    if (fs.existsSync(file.path)) fs.unlinkSync(file.path);
+  } catch {
+    /* ignore */
+  }
+}
--- a/backend/src/middleware/errorHandler.ts
+++ b/backend/src/middleware/errorHandler.ts
@@ -1,4 +1,5 @@
 import type { Request, Response, NextFunction } from 'express';
+
 import { DISK_FULL_MESSAGE, isDiskFullError } from '../lib/uploadErrors';


@@ -21,11 +22,26 @@ export function errorHandler(

 }

+
+
+export function errorHandler(
+
+  err: Error,
+
+  _req: Request,
+
+  res: Response,
+
+  _next: NextFunction,

 ): void {

  if (err instanceof AppError) {
-    res.status(500).json({ message: 'DB 스키마가 최신이 아닙니다. 배포 후 다시 시도해 주세요.' });
+
+    res.status(err.statusCode).json({ message: err.message });
+
+    return;
+
  }


--- a/backend/src/middleware/upload.ts
+++ b/backend/src/middleware/upload.ts
@@ -3,7 +3,6 @@ import path from 'path';
 import { v4 as uuidv4 } from 'uuid';
 import fs from 'fs';

-const MAX_SIZE_MB = Number(process.env.MAX_FILE_SIZE_MB) || 20;
 const UPLOAD_DIR = path.resolve(process.env.UPLOAD_DIR || '../uploads');

 if (!fs.existsSync(UPLOAD_DIR)) {
@@ -20,7 +19,5 @@ const storage = multer.diskStorage({
  },
 });

-export const upload = multer({
-  storage,
-  limits: { fileSize: MAX_SIZE_MB * 1024 * 1024 },
-});
+/** 파일 크기 상한 없음 — 디스크 여유만큼 저장 (부족 시 uploadErrors) */
+export const upload = multer({ storage });
--- a/backend/src/middleware/uploadTeamPhoto.ts
+++ b/backend/src/middleware/uploadTeamPhoto.ts
@@ -22,7 +22,6 @@ const storage = multer.diskStorage({

 export const uploadTeamPhoto = multer({
  storage,
-  limits: { fileSize: 5 * 1024 * 1024 },
  fileFilter(_req, file, cb) {
    if (/^image\/(jpeg|jpg|png|gif|webp)$/i.test(file.mimetype)) {
      cb(null, true);
--- a/backend/src/routes/columns.ts
+++ b/backend/src/routes/columns.ts
@@ -10,8 +10,8 @@ const DEFAULTS: Record<string, { title: string; titleEn: string; subtitle: strin
    subtitle: '임직원의 몰입(Engagement)과 성장(Education)',
  },
  '운영관리': {
-    title:    '운영관리 부문',
-    titleEn:  'Operations',
+    title:    '총무관리',
+    titleEn:  'GA',
    subtitle: '인프라 고도화와 자산 라이프사이클 표준화',
  },
 };
@@ -27,6 +27,18 @@ router.get('/:key', async (req, res, next) => {
      config = await prisma.columnConfig.create({
        data: { key, title: def?.title ?? key, titleEn: def?.titleEn ?? '', subtitle: def?.subtitle ?? '' },
      });
+    } else if (key === '운영관리') {
+      const legacyTitles = ['운영관리', '운영관리 부문'];
+      const legacyTitleEn = ['Operations'];
+      if (legacyTitles.includes(config.title) || legacyTitleEn.includes(config.titleEn)) {
+        config = await prisma.columnConfig.update({
+          where: { key },
+          data: {
+            title: DEFAULTS[key]?.title ?? config.title,
+            titleEn: DEFAULTS[key]?.titleEn ?? config.titleEn,
+          },
+        });
+      }
    }

    res.json(config);
--- a/backend/src/routes/files.ts
+++ b/backend/src/routes/files.ts
@@ -1,20 +1,43 @@
-import { Router, type Response } from 'express';
+import { Router, type Request, type Response } from 'express';
 import path from 'path';
 import fs from 'fs';
 import { prisma } from '../lib/prisma';
 import { resolveTaskActorId } from '../lib/resolveUser';
 import { upload } from '../middleware/upload';
 import { AppError } from '../middleware/errorHandler';
+import { cleanupUploadedFile, DISK_FULL_MESSAGE, isDiskFullError } from '../lib/uploadErrors';
+import { toHtml } from '@ohah/hwpjs';
+import { resolveFileMime } from '../lib/fileMime';

 const router = Router();

-/** Vercel 상세 창에서 PDF 등 iframe 미리보기 허용 */
-function allowCrossOriginPreview(res: Response) {
-  res.setHeader('Cross-Origin-Resource-Policy', 'cross-origin');
-  res.setHeader(
-    'Content-Security-Policy',
-    "frame-ancestors 'self' https://eene-dashboard.vercel.app https://*.vercel.app http://localhost:3000",
+const PREVIEW_FRAME_ANCESTORS = [
+  "'self'",
+  'https://eene-dashboard.vercel.app',
+  'http://localhost:3000',
+  'https://localhost:3000',
+  'http://127.0.0.1:3000',
+  'https://127.0.0.1:3000',
+];
+
+function isPrivateDevOrigin(origin: string): boolean {
+  return (
+    /^https?:\/\/(localhost|127\.0\.0\.1)(:\d+)?$/i.test(origin) ||
+    /^https?:\/\/172\.(1[6-9]|2\d|3[01])\.\d+\.\d+(:\d+)?$/.test(origin) ||
+    /^https?:\/\/192\.168\.\d+\.\d+(:\d+)?$/.test(origin) ||
+    /^https?:\/\/10\.\d+\.\d+\.\d+(:\d+)?$/.test(origin)
  );
+}
+
+/** PDF 등 iframe 미리보기 — localhost·LAN https 포함 */
+function allowCrossOriginPreview(req: Request, res: Response) {
+  res.setHeader('Cross-Origin-Resource-Policy', 'cross-origin');
+  const ancestors = [...PREVIEW_FRAME_ANCESTORS];
+  const origin = req.headers.origin;
+  if (origin && isPrivateDevOrigin(origin) && !ancestors.includes(origin)) {
+    ancestors.push(origin);
+  }
+  res.setHeader('Content-Security-Policy', `frame-ancestors ${ancestors.join(' ')}`);
  res.removeHeader('X-Frame-Options');
 }

@@ -59,7 +82,7 @@ router.post('/upload/:taskId', upload.single('file'), async (req, res, next) =>
        originalName: fixOriginalName(req.file.originalname),
        displayName,
        sortOrder: Number.isNaN(sortOrder) ? 0 : sortOrder,
-        mimetype: req.file.mimetype,
+        mimetype: resolveFileMime(fixOriginalName(req.file.originalname), req.file.mimetype),
        size: req.file.size,
        path: req.file.path,
        uploadedBy,
@@ -68,10 +91,47 @@ router.post('/upload/:taskId', upload.single('file'), async (req, res, next) =>

    res.status(201).json(fileRecord);
  } catch (err) {
+    if (isDiskFullError(err)) {
+      cleanupUploadedFile(req.file);
+      next(new AppError(507, DISK_FULL_MESSAGE));
+      return;
+    }
    next(err);
  }
 });

+function isHwpOriginalName(originalName: string): boolean {
+  const ext = originalName.split('.').pop()?.toLowerCase() ?? '';
+  return ext === 'hwp' || ext === 'hwpx';
+}
+
+// GET /api/files/:id/hwp-preview — 한글(.hwp/.hwpx) HTML 미리보기
+router.get('/:id/hwp-preview', async (req, res, next) => {
+  try {
+    const fileId = String(req.params.id);
+    const file = await prisma.file.findUnique({ where: { id: fileId } });
+    if (!file) throw new AppError(404, '파일을 찾을 수 없습니다.');
+    if (!fs.existsSync(file.path)) throw new AppError(404, '파일이 서버에 없습니다.');
+    if (!isHwpOriginalName(file.originalName)) {
+      throw new AppError(400, '한글 파일만 미리보기할 수 있습니다.');
+    }
+
+    const data = fs.readFileSync(file.path);
+    const html = toHtml(data, {
+      includeVersion: false,
+      includePageInfo: false,
+    });
+
+    res.json({ html });
+  } catch (err) {
+    if (err instanceof AppError) {
+      next(err);
+      return;
+    }
+    next(new AppError(422, '한글 파일 미리보기 변환에 실패했습니다.'));
+  }
+});
+
 // GET /api/files/:id/view  — 파일 미리보기 (브라우저에서 바로 열기)
 router.get('/:id/view', async (req, res, next) => {
  try {
@@ -80,8 +140,9 @@ router.get('/:id/view', async (req, res, next) => {
    if (!file) throw new AppError(404, '파일을 찾을 수 없습니다.');
    if (!fs.existsSync(file.path)) throw new AppError(404, '파일이 서버에 없습니다.');

-    allowCrossOriginPreview(res);
-    res.setHeader('Content-Type', file.mimetype);
+    allowCrossOriginPreview(req, res);
+    const mime = resolveFileMime(file.originalName, file.mimetype);
+    res.setHeader('Content-Type', mime);
    res.setHeader('Content-Disposition', `inline; filename="${encodeURIComponent(file.originalName)}"`);
    fs.createReadStream(file.path).pipe(res);
  } catch (err) {
@@ -122,7 +183,7 @@ router.post('/:id/replace', upload.single('file'), async (req, res, next) => {
      data: {
        filename: req.file.filename,
        originalName: fixOriginalName(req.file.originalname),
-        mimetype: req.file.mimetype,
+        mimetype: resolveFileMime(fixOriginalName(req.file.originalname), req.file.mimetype),
        size: req.file.size,
        path: req.file.path,
      },
@@ -130,6 +191,11 @@ router.post('/:id/replace', upload.single('file'), async (req, res, next) => {

    res.json(file);
  } catch (err) {
+    if (isDiskFullError(err)) {
+      cleanupUploadedFile(req.file);
+      next(new AppError(507, DISK_FULL_MESSAGE));
+      return;
+    }
    next(err);
  }
 });
--- a/backend/src/routes/hubConfig.ts
+++ b/backend/src/routes/hubConfig.ts
@@ -0,0 +1,74 @@
+import { Router } from 'express';
+import { prisma } from '../lib/prisma';
+
+const router = Router();
+const HUB_ID = 'default';
+
+export const DEFAULT_HUB_CONFIG = {
+  sloganTitle: '분기 중점 과제',
+  sloganLines: ['인사 · 육성 · 문화 · 총무', '개선과제', '정상 추진'],
+  scheduleTitle: '분기 주요 일정',
+  scheduleItems: [
+    { id: '1', date: '2026-04-01', text: '상반기 채용·온보딩' },
+    { id: '2', date: '2026-05-15', text: '조직문화 진단·리더십 교육' },
+    { id: '3', date: '2026-06-20', text: '분기 성과 점검·평가' },
+  ],
+  routineLabels: ['채용 운영', '학습 지원', '직원 소통', '자산·시설', '문서·행정'],
+};
+
+function normalizeConfig(raw: Record<string, unknown>) {
+  const sloganTitle = (raw.sloganTitle as string) ?? DEFAULT_HUB_CONFIG.sloganTitle;
+  return {
+    sloganTitle: sloganTitle === '분기 슬로건' ? '분기 중점 과제' : sloganTitle,
+    sloganLines: Array.isArray(raw.sloganLines)
+      ? (raw.sloganLines as string[])
+      : DEFAULT_HUB_CONFIG.sloganLines,
+    scheduleTitle: (raw.scheduleTitle as string) ?? DEFAULT_HUB_CONFIG.scheduleTitle,
+    scheduleItems: Array.isArray(raw.scheduleItems)
+      ? (raw.scheduleItems as typeof DEFAULT_HUB_CONFIG.scheduleItems)
+      : DEFAULT_HUB_CONFIG.scheduleItems,
+    routineLabels: Array.isArray(raw.routineLabels)
+      ? (raw.routineLabels as string[])
+      : DEFAULT_HUB_CONFIG.routineLabels,
+  };
+}
+
+async function getOrCreateHubConfig() {
+  let row = await prisma.hubConfig.findUnique({ where: { id: HUB_ID } });
+  if (!row) {
+    row = await prisma.hubConfig.create({
+      data: { id: HUB_ID, config: DEFAULT_HUB_CONFIG },
+    });
+  }
+  return row;
+}
+
+// GET /api/hub-config
+router.get('/', async (_req, res, next) => {
+  try {
+    const row = await getOrCreateHubConfig();
+    res.json(normalizeConfig(row.config as Record<string, unknown>));
+  } catch (err) {
+    next(err);
+  }
+});
+
+// PATCH /api/hub-config
+router.patch('/', async (req, res, next) => {
+  try {
+    const row = await getOrCreateHubConfig();
+    const merged = normalizeConfig({
+      ...(row.config as Record<string, unknown>),
+      ...(req.body as Record<string, unknown>),
+    });
+    const updated = await prisma.hubConfig.update({
+      where: { id: HUB_ID },
+      data: { config: merged },
+    });
+    res.json(normalizeConfig(updated.config as Record<string, unknown>));
+  } catch (err) {
+    next(err);
+  }
+});
+
+export default router;
--- a/backend/src/routes/index.ts
+++ b/backend/src/routes/index.ts
@@ -8,6 +8,7 @@ import columnRoutes from './columns';
 import milestoneRoutes from './milestones';
 import detailRoutes from './details';
 import teamMemberRoutes from './teamMembers';
+import hubConfigRoutes from './hubConfig';

 const router = Router();

@@ -18,6 +19,7 @@ router.use('/users', userRoutes);
 router.use('/files', fileRoutes);
 router.use('/kpi', kpiRoutes);
 router.use('/columns', columnRoutes);
+router.use('/hub-config', hubConfigRoutes);
 router.use('/milestones', milestoneRoutes);
 router.use('/details', detailRoutes);

--- a/backend/src/routes/milestones.ts
+++ b/backend/src/routes/milestones.ts
@@ -1,6 +1,9 @@
 import { Router } from 'express';
+import { Prisma } from '@prisma/client';
 import { prisma } from '../lib/prisma';
 import { resolveTaskActorId } from '../lib/resolveUser';
+import { formatMilestone, milestoneInclude, parseMemberIds } from '../lib/taskQuery';
+import { resolveMilestonePeriodPayload } from '../lib/milestonePeriods';
 import { AppError } from '../middleware/errorHandler';

 const router = Router();
@@ -28,14 +31,47 @@ function clampProgress(value: unknown): number {
  return Math.min(100, Math.max(0, Math.round(n)));
 }

+async function syncMilestoneMembers(
+  milestoneId: string,
+  pmMemberId: string | null | undefined,
+  assigneeMemberIds: string[] | undefined,
+) {
+  if (pmMemberId !== undefined) {
+    await prisma.milestone.update({
+      where: { id: milestoneId },
+      data: { pmMemberId: pmMemberId || null },
+    });
+  }
+
+  if (assigneeMemberIds !== undefined) {
+    await prisma.milestoneAssignee.deleteMany({ where: { milestoneId } });
+    const ids = [...new Set(assigneeMemberIds.filter(Boolean))];
+    if (ids.length > 0) {
+      await prisma.milestoneAssignee.createMany({
+        data: ids.map((memberId) => ({ milestoneId, memberId })),
+      });
+    }
+  }
+}
+
+async function loadMilestone(id: string) {
+  const milestone = await prisma.milestone.findUnique({
+    where: { id },
+    include: milestoneInclude,
+  });
+  if (!milestone) throw new AppError(404, '단계를 찾을 수 없습니다.');
+  return formatMilestone(milestone);
+}
+
 // GET /api/milestones/:taskId
 router.get('/:taskId', async (req, res, next) => {
  try {
    const milestones = await prisma.milestone.findMany({
      where: { taskId: req.params.taskId },
      orderBy: { order: 'asc' },
+      include: milestoneInclude,
    });
-    res.json(milestones);
+    res.json(milestones.map((m) => formatMilestone(m)));
  } catch (err) {
    next(err);
  }
@@ -45,26 +81,48 @@ router.get('/:taskId', async (req, res, next) => {
 router.post('/:taskId', async (req, res, next) => {
  try {
    const taskId = req.params.taskId;
-    const { title, description, startDate, dueDate, feedback, links, progress } =
-      req.body as Record<string, string | number>;
+    const body = req.body as Record<string, unknown>;
+    const { title, subtitle, description, startDate, dueDate, feedback, links, progress } = body;
+    const assigneeMemberIds = parseMemberIds(body);
+    const pmMemberId =
+      body.pmMemberId !== undefined ? String(body.pmMemberId || '') || null : undefined;

    if (!title?.toString().trim()) throw new AppError(400, '단계 제목은 필수입니다.');

    const count = await prisma.milestone.count({ where: { taskId } });
+    const periodPayload = resolveMilestonePeriodPayload(body);

    const milestone = await prisma.milestone.create({
      data: {
        taskId,
        title: String(title).trim(),
+        subtitle: subtitle !== undefined ? String(subtitle || '').trim() || null : null,
        description: description?.toString().trim() || null,
-        startDate: startDate ? new Date(String(startDate)) : null,
-        dueDate: dueDate ? new Date(String(dueDate)) : null,
+        startDate:
+          periodPayload.startDate !== undefined
+            ? periodPayload.startDate
+            : startDate
+              ? new Date(String(startDate))
+              : null,
+        dueDate:
+          periodPayload.dueDate !== undefined
+            ? periodPayload.dueDate
+            : dueDate
+              ? new Date(String(dueDate))
+              : null,
+        periodEntries:
+          periodPayload.periodEntries !== undefined
+            ? (periodPayload.periodEntries as Prisma.InputJsonValue)
+            : undefined,
        progress: progress !== undefined ? clampProgress(progress) : 0,
        links: normalizeLinks(links),
        order: count,
+        ...(pmMemberId !== undefined ? { pmMemberId } : {}),
      },
    });

+    await syncMilestoneMembers(milestone.id, pmMemberId, assigneeMemberIds);
+
    if (feedback?.toString().trim()) {
      const updatedBy = await resolveTaskActorId(taskId);
      await prisma.taskDetail.create({
@@ -77,7 +135,7 @@ router.post('/:taskId', async (req, res, next) => {
      });
    }

-    res.status(201).json(milestone);
+    res.status(201).json(await loadMilestone(milestone.id));
  } catch (err) {
    next(err);
  }
@@ -86,19 +144,33 @@ router.post('/:taskId', async (req, res, next) => {
 // PATCH /api/milestones/item/:id
 router.patch('/item/:id', async (req, res, next) => {
  try {
-    const { title, description, startDate, dueDate, feedback, links, progress, completed, order } =
-      req.body as Record<string, string | boolean | number>;
+    const body = req.body as Record<string, unknown>;
+    const { title, subtitle, description, startDate, dueDate, feedback, links, progress, completed, order } =
+      body;
+    const assigneeMemberIds = parseMemberIds(body);
+    const pmMemberId =
+      body.pmMemberId !== undefined ? String(body.pmMemberId || '') || null : undefined;

    const existing = await prisma.milestone.findUnique({ where: { id: req.params.id } });
    if (!existing) throw new AppError(404, '단계를 찾을 수 없습니다.');

+    const periodPayload = resolveMilestonePeriodPayload(body);
+
    const milestone = await prisma.milestone.update({
      where: { id: req.params.id },
      data: {
        ...(title !== undefined && { title: String(title).trim() }),
+        ...(subtitle !== undefined && { subtitle: String(subtitle || '').trim() || null }),
        ...(description !== undefined && { description: description ? String(description).trim() : null }),
-        ...(startDate !== undefined && { startDate: startDate ? new Date(String(startDate)) : null }),
-        ...(dueDate !== undefined && { dueDate: dueDate ? new Date(String(dueDate)) : null }),
+        ...(periodPayload.startDate !== undefined && { startDate: periodPayload.startDate }),
+        ...(periodPayload.dueDate !== undefined && { dueDate: periodPayload.dueDate }),
+        ...(periodPayload.periodEntries !== undefined && {
+          periodEntries: periodPayload.periodEntries as Prisma.InputJsonValue,
+        }),
+        ...(periodPayload.startDate === undefined &&
+          startDate !== undefined && { startDate: startDate ? new Date(String(startDate)) : null }),
+        ...(periodPayload.dueDate === undefined &&
+          dueDate !== undefined && { dueDate: dueDate ? new Date(String(dueDate)) : null }),
        ...(progress !== undefined && { progress: clampProgress(progress) }),
        ...(links !== undefined && { links: normalizeLinks(links) }),
        ...(order !== undefined && { order: Number(order) }),
@@ -106,9 +178,12 @@ router.patch('/item/:id', async (req, res, next) => {
          completedAt: completed ? new Date() : null,
          ...(completed && { progress: 100 }),
        }),
+        ...(pmMemberId !== undefined ? { pmMemberId } : {}),
      },
    });

+    await syncMilestoneMembers(milestone.id, pmMemberId, assigneeMemberIds);
+
    if (typeof feedback === 'string' && feedback.trim()) {
      const updatedBy = await resolveTaskActorId(existing.taskId);
      await prisma.taskDetail.create({
@@ -121,7 +196,7 @@ router.patch('/item/:id', async (req, res, next) => {
      });
    }

-    res.json(milestone);
+    res.json(await loadMilestone(milestone.id));
  } catch (err) {
    next(err);
  }
--- a/backend/src/routes/tasks.ts
+++ b/backend/src/routes/tasks.ts
@@ -1,7 +1,9 @@
 import { Router } from 'express';
+import type { Server } from 'socket.io';
 import { prisma } from '../lib/prisma';
 import { resolveCreatorId } from '../lib/resolveUser';
 import { AppError } from '../middleware/errorHandler';
+import { emitTaskListRefresh, emitTaskUpdated } from '../socket';
 import {
  formatTask,
  parseMemberIds,
@@ -9,9 +11,25 @@ import {
  taskDetailInclude,
  taskInclude,
 } from '../lib/taskQuery';
+import { deriveIssueFields, normalizeIssueEntries } from '../lib/taskIssues';

 const router = Router();

+function resolveIssuePayload(body: Record<string, any>) {
+  if (body.issueEntries !== undefined) {
+    const entries = normalizeIssueEntries(body.issueEntries);
+    return deriveIssueFields(entries);
+  }
+  if (body.issueNote !== undefined) {
+    const text = typeof body.issueNote === 'string' ? body.issueNote.trim() : '';
+    if (!text) {
+      return { issueEntries: [], issueNote: null, showIssue: false };
+    }
+    return deriveIssueFields([{ id: 'legacy', text, showOnCard: body.showIssue !== false }]);
+  }
+  return null;
+}
+
 // GET /api/tasks  — 목록 조회 (필터: status, quarter, assigneeId)
 router.get('/', async (req, res, next) => {
  try {
@@ -64,6 +82,7 @@ router.post('/', async (req, res, next) => {

    const creatorId = await resolveCreatorId(body.creatorId);
    const assigneeMemberIds = parseMemberIds(body);
+    const issuePayload = resolveIssuePayload(body);

    const task = await prisma.task.create({
      data: {
@@ -77,13 +96,14 @@ router.post('/', async (req, res, next) => {
        tag,
        taskType,
        progress: progress ? Number(progress) : 0,
-        issueNote: issueNote || null,
+        issueNote: issuePayload?.issueNote ?? (issueNote || null),
+        issueEntries: issuePayload?.issueEntries as any ?? undefined,
        startDate: startDate ? new Date(startDate) : undefined,
        dueDate: dueDate ? new Date(dueDate) : undefined,
        showDate: showDate !== undefined ? showDate === 'true' || showDate === true : true,
        showDescription: showDescription !== undefined ? showDescription === 'true' || showDescription === true : true,
        showStatus: showStatus !== undefined ? showStatus === 'true' || showStatus === true : true,
-        showIssue: showIssue !== undefined ? showIssue === 'true' || showIssue === true : true,
+        showIssue: issuePayload?.showIssue ?? (showIssue !== undefined ? showIssue === 'true' || showIssue === true : true),
        showProgress: showProgress !== undefined ? showProgress === 'true' || showProgress === true : true,
        assigneeId: assigneeId || null,
        pmMemberId: pmMemberId || null,
@@ -120,6 +140,7 @@ router.patch('/:id', async (req, res, next) => {
            showDescription, showStatus, showIssue, showProgress, pmMemberId } = body;

    const assigneeMemberIds = parseMemberIds(body);
+    const issuePayload = resolveIssuePayload(body);

    await prisma.task.update({
      where: { id: req.params.id },
@@ -134,7 +155,20 @@ router.patch('/:id', async (req, res, next) => {
        ...(tag !== undefined && { tag }),
        ...(taskType !== undefined && { taskType }),
        ...(progress !== undefined && { progress: Number(progress) }),
-        ...(issueNote !== undefined && { issueNote: issueNote || null }),
+        ...(issuePayload
+          ? {
+              issueEntries: issuePayload.issueEntries as any,
+              issueNote: issuePayload.issueNote,
+              showIssue: issuePayload.showIssue,
+            }
+          : issueNote !== undefined
+            ? {
+                issueNote: issueNote || null,
+                ...(issueNote
+                  ? {}
+                  : { issueEntries: [] as any, showIssue: false }),
+              }
+            : {}),
        ...(startDate !== undefined && { startDate: startDate ? new Date(startDate) : null }),
        ...(dueDate !== undefined && { dueDate: dueDate ? new Date(dueDate) : null }),
        ...(assigneeId !== undefined && { assigneeId: assigneeId || null }),
@@ -160,7 +194,14 @@ router.patch('/:id', async (req, res, next) => {
      include: taskInclude,
    });

-    res.json(formatTask(task!));
+    const formatted = formatTask(task!);
+    const io = req.app.get('io') as Server | undefined;
+    if (io) {
+      emitTaskUpdated(io, req.params.id, formatted);
+      emitTaskListRefresh(io);
+    }
+
+    res.json(formatted);
  } catch (err) {
    next(err);
  }
--- a/backend/src/routes/teamMembers.ts
+++ b/backend/src/routes/teamMembers.ts
@@ -2,6 +2,7 @@ import { Router } from 'express';
 import { prisma } from '../lib/prisma';
 import { AppError } from '../middleware/errorHandler';
 import { uploadTeamPhoto } from '../middleware/uploadTeamPhoto';
+import { cleanupUploadedFile, DISK_FULL_MESSAGE, isDiskFullError } from '../lib/uploadErrors';

 const router = Router();

@@ -43,6 +44,11 @@ router.post('/photo', uploadTeamPhoto.single('photo'), async (req, res, next) =>
      filename: req.file.filename,
    });
  } catch (err) {
+    if (isDiskFullError(err)) {
+      cleanupUploadedFile(req.file);
+      next(new AppError(507, DISK_FULL_MESSAGE));
+      return;
+    }
    next(err);
  }
 });
--- a/data/.gitkeep
+++ b/data/.gitkeep
--- a/data/seed/README.md
+++ b/data/seed/README.md
@@ -0,0 +1,7 @@
+# HR seed 데이터
+
+- **`hr-data.json`** — 대시보드 최초 seed·`npm run db:import-hr` 공통 원본
+- 외부 `HR_Dashboard/data.json` 은 더 이상 사용하지 않습니다.
+- PC·팀 공유 시 **`data/postgres/`** + **`uploads/`** + 이 파일을 함께 복사하세요.
+
+경로 변경: `backend/.env` 의 `HR_DATA_PATH`
--- a/data/seed/hr-data.json
+++ b/data/seed/hr-data.json
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -8,7 +8,7 @@ services:
      POSTGRES_PASSWORD: ${DB_PASSWORD:-eee_password}
      POSTGRES_DB: ${DB_NAME:-eee_dashboard}
    ports:
-      - "${DB_PORT:-5432}:5432"
+      - "${DB_PORT:-54320}:5432"
    volumes:
      - ./data/postgres:/var/lib/postgresql/data
    healthcheck:
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -13,6 +13,8 @@
        "@dnd-kit/utilities": "^3.2.2",
        "@tanstack/react-query": "^5.56.0",
        "axios": "^1.7.0",
+        "docx-preview": "^0.3.7",
+        "pptx-react-renderer": "^0.1.1",
        "react": "^18.3.0",
        "react-dom": "^18.3.0",
        "react-router-dom": "^6.26.0",
@@ -24,6 +26,7 @@
        "@tailwindcss/vite": "^4.0.0",
        "@types/react": "^18.3.0",
        "@types/react-dom": "^18.3.0",
+        "@vitejs/plugin-basic-ssl": "^2.3.0",
        "@vitejs/plugin-react": "^4.3.0",
        "tailwindcss": "^4.0.0",
        "typescript": "^5.6.0",
@@ -365,6 +368,40 @@
        "react": ">=16.8.0"
      }
    },
+    "node_modules/@emnapi/core": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.11.1.tgz",
+      "integrity": "sha512-RSvbQmHzdKzNsLYa/wHrbc3KN4sYLKAdPZxqiM2HATqv/SBk2/ENSHpvXGaLOMcsAyz0poEGqkmmKYG3OWiJEQ==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/wasi-threads": "1.2.2",
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@emnapi/runtime": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.11.1.tgz",
+      "integrity": "sha512-vgj7R3y3Wgx24IQaGPA/R6YFXLHVMOZ0uVEyIQPaWs+rd1AzfEMXlAC22FYwO1XkKR6NPsq7mUandH8oIRdZFw==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@emnapi/wasi-threads": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/@emnapi/wasi-threads/-/wasi-threads-1.2.2.tgz",
+      "integrity": "sha512-c95qOXkHdydNKhscBTebqEC1CVAZpyqOfVfBzQ1qgzyl3gfeldUjIggDbIZgDKsHLgnsM+igH7TJ/eAasaVuMA==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
    "node_modules/@esbuild/aix-ppc64": {
      "version": "0.25.12",
      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.25.12.tgz",
@@ -857,6 +894,25 @@
        "@jridgewell/sourcemap-codec": "^1.4.14"
      }
    },
+    "node_modules/@napi-rs/wasm-runtime": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/@napi-rs/wasm-runtime/-/wasm-runtime-1.1.5.tgz",
+      "integrity": "sha512-AWPoBRJ9tsnVhor4sjO7rkni+7p+2IAEFj6cx06UgP10jkQHqay/36uRV/bFkgrh18D9vb4cr8Q0Pthskgzy+Q==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@tybys/wasm-util": "^0.10.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/Brooooooklyn"
+      },
+      "peerDependencies": {
+        "@emnapi/core": "^1.7.1",
+        "@emnapi/runtime": "^1.7.1"
+      }
+    },
    "node_modules/@remix-run/router": {
      "version": "1.23.2",
      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.23.2.tgz",
@@ -1578,6 +1634,17 @@
        "react": "^18 || ^19"
      }
    },
+    "node_modules/@tybys/wasm-util": {
+      "version": "0.10.2",
+      "resolved": "https://registry.npmjs.org/@tybys/wasm-util/-/wasm-util-0.10.2.tgz",
+      "integrity": "sha512-RoBvJ2X0wuKlWFIjrwffGw1IqZHKQqzIchKaadZZfnNpsAYp2mM0h36JtPCjNDAHGgYez/15uMBpfGwchhiMgg==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
    "node_modules/@types/babel__core": {
      "version": "7.20.5",
      "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz",
@@ -1658,6 +1725,19 @@
        "@types/react": "^18.0.0"
      }
    },
+    "node_modules/@vitejs/plugin-basic-ssl": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/@vitejs/plugin-basic-ssl/-/plugin-basic-ssl-2.3.0.tgz",
+      "integrity": "sha512-bdyo8rB3NnQbikdMpHaML9Z1OZPBu6fFOBo+OtxsBlvMJtysWskmBcnbIDhUqgC8tcxNv/a+BcV5U+2nQMm1OQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^18.0.0 || ^20.0.0 || >=22.0.0"
+      },
+      "peerDependencies": {
+        "vite": "^6.0.0 || ^7.0.0 || ^8.0.0"
+      }
+    },
    "node_modules/@vitejs/plugin-react": {
      "version": "4.7.0",
      "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-4.7.0.tgz",
@@ -1840,6 +1920,12 @@
      "dev": true,
      "license": "MIT"
    },
+    "node_modules/core-util-is": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz",
+      "integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==",
+      "license": "MIT"
+    },
    "node_modules/crc-32": {
      "version": "1.2.2",
      "resolved": "https://registry.npmjs.org/crc-32/-/crc-32-1.2.2.tgz",
@@ -1895,6 +1981,15 @@
        "node": ">=8"
      }
    },
+    "node_modules/docx-preview": {
+      "version": "0.3.7",
+      "resolved": "https://registry.npmjs.org/docx-preview/-/docx-preview-0.3.7.tgz",
+      "integrity": "sha512-Lav69CTA/IYZPJTsKH7oYeoZjyg96N0wEJMNslGJnZJ+dMUZK85Lt5ASC79yUlD48ecWjuv+rkcmFt6EVPV0Xg==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "jszip": ">=3.0.0"
+      }
+    },
    "node_modules/dunder-proto": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
@@ -2254,6 +2349,24 @@
        "node": ">= 6"
      }
    },
+    "node_modules/immediate": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/immediate/-/immediate-3.0.6.tgz",
+      "integrity": "sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ==",
+      "license": "MIT"
+    },
+    "node_modules/inherits": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
+      "license": "ISC"
+    },
+    "node_modules/isarray": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
+      "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==",
+      "license": "MIT"
+    },
    "node_modules/jiti": {
      "version": "2.7.0",
      "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.7.0.tgz",
@@ -2296,6 +2409,27 @@
        "node": ">=6"
      }
    },
+    "node_modules/jszip": {
+      "version": "3.10.1",
+      "resolved": "https://registry.npmjs.org/jszip/-/jszip-3.10.1.tgz",
+      "integrity": "sha512-xXDvecyTpGLrqFrvkrUSoxxfJI5AH7U8zxxtVclpsUtMCq4JQ290LY8AW5c7Ggnr/Y/oK+bQMbqK2qmtk3pN4g==",
+      "license": "(MIT OR GPL-3.0-or-later)",
+      "dependencies": {
+        "lie": "~3.3.0",
+        "pako": "~1.0.2",
+        "readable-stream": "~2.3.6",
+        "setimmediate": "^1.0.5"
+      }
+    },
+    "node_modules/lie": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/lie/-/lie-3.3.0.tgz",
+      "integrity": "sha512-UaiMJzeWRlEujzAuw5LokY1L5ecNQYZKfmyZ9L7wDHb/p5etKaxXhohBcrw0EYby+G/NA52vRSN4N39dxHAIwQ==",
+      "license": "MIT",
+      "dependencies": {
+        "immediate": "~3.0.5"
+      }
+    },
    "node_modules/lightningcss": {
      "version": "1.32.0",
      "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.32.0.tgz",
@@ -2666,6 +2800,12 @@
        "node": ">=18"
      }
    },
+    "node_modules/pako": {
+      "version": "1.0.11",
+      "resolved": "https://registry.npmjs.org/pako/-/pako-1.0.11.tgz",
+      "integrity": "sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==",
+      "license": "(MIT AND Zlib)"
+    },
    "node_modules/picocolors": {
      "version": "1.1.1",
      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
@@ -2715,6 +2855,24 @@
        "node": "^10 || ^12 || >=14"
      }
    },
+    "node_modules/pptx-react-renderer": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/pptx-react-renderer/-/pptx-react-renderer-0.1.1.tgz",
+      "integrity": "sha512-nUNMyMJu7xIWbgO6m7szuS+EDPTvHoNYFgCCOjtVJ37lYtbtNoI8zFk1ZnkthmY27U3StzHXcU5oy23FrBhvLg==",
+      "license": "MIT",
+      "dependencies": {
+        "jszip": "^3.10.1"
+      },
+      "engines": {
+        "node": ">=20"
+      }
+    },
+    "node_modules/process-nextick-args": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
+      "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==",
+      "license": "MIT"
+    },
    "node_modules/proxy-from-env": {
      "version": "2.1.0",
      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-2.1.0.tgz",
@@ -2791,6 +2949,21 @@
        "react-dom": ">=16.8"
      }
    },
+    "node_modules/readable-stream": {
+      "version": "2.3.8",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.8.tgz",
+      "integrity": "sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==",
+      "license": "MIT",
+      "dependencies": {
+        "core-util-is": "~1.0.0",
+        "inherits": "~2.0.3",
+        "isarray": "~1.0.0",
+        "process-nextick-args": "~2.0.0",
+        "safe-buffer": "~5.1.1",
+        "string_decoder": "~1.1.1",
+        "util-deprecate": "~1.0.1"
+      }
+    },
    "node_modules/rollup": {
      "version": "4.60.4",
      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.60.4.tgz",
@@ -2836,6 +3009,12 @@
        "fsevents": "~2.3.2"
      }
    },
+    "node_modules/safe-buffer": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
+      "license": "MIT"
+    },
    "node_modules/scheduler": {
      "version": "0.23.2",
      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz",
@@ -2855,6 +3034,12 @@
        "semver": "bin/semver.js"
      }
    },
+    "node_modules/setimmediate": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz",
+      "integrity": "sha512-MATJdZp8sLqDl/68LfQmbP8zKPLQNV6BIZoIgrscFDQ+RsvK/BxeDQOgyxKKoh0y/8h3BqVFnCqQ/gd+reiIXA==",
+      "license": "MIT"
+    },
    "node_modules/socket.io-client": {
      "version": "4.8.3",
      "resolved": "https://registry.npmjs.org/socket.io-client/-/socket.io-client-4.8.3.tgz",
@@ -2905,6 +3090,15 @@
        "node": ">=0.8"
      }
    },
+    "node_modules/string_decoder": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+      "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+      "license": "MIT",
+      "dependencies": {
+        "safe-buffer": "~5.1.0"
+      }
+    },
    "node_modules/tailwindcss": {
      "version": "4.3.0",
      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.3.0.tgz",
@@ -2994,6 +3188,12 @@
        "browserslist": ">= 4.21.0"
      }
    },
+    "node_modules/util-deprecate": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
+      "license": "MIT"
+    },
    "node_modules/vite": {
      "version": "6.4.2",
      "resolved": "https://registry.npmjs.org/vite/-/vite-6.4.2.tgz",
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -14,6 +14,8 @@
    "@dnd-kit/utilities": "^3.2.2",
    "@tanstack/react-query": "^5.56.0",
    "axios": "^1.7.0",
+    "docx-preview": "^0.3.7",
+    "pptx-react-renderer": "^0.1.1",
    "react": "^18.3.0",
    "react-dom": "^18.3.0",
    "react-router-dom": "^6.26.0",
@@ -25,6 +27,7 @@
    "@tailwindcss/vite": "^4.0.0",
    "@types/react": "^18.3.0",
    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-basic-ssl": "^2.3.0",
    "@vitejs/plugin-react": "^4.3.0",
    "tailwindcss": "^4.0.0",
    "typescript": "^5.6.0",
--- a/frontend/public/quarter-dashboard-preview.html
+++ b/frontend/public/quarter-dashboard-preview.html
@@ -32,6 +32,17 @@
      --conn-line-width: 4;
      --text-primary: #1a2b3c;
      --text-muted: #5a6b7d;
+      /* 헤더 상태 통계(stat-*)와 동일 — 프로젝트 제목 불릿 */
+      --status-in-progress: #10b981;
+      --status-hold: #ff9f0a;
+      --status-done: #b0b0b0;
+      --status-issue: #ff5252;
+      /* 부서 카드 헤드 — 샴페인 골드 */
+      --dept-head-bg-top: #faf6ef;
+      --dept-head-bg-bottom: #f0e6d4;
+      --dept-head-text: #4a3d2e;
+      --dept-head-accent: #9a7b4f;
+      --dept-head-line: rgba(180, 152, 108, 0.32);
    }

    * { box-sizing: border-box; margin: 0; padding: 0; }
@@ -188,7 +199,7 @@
    .poly-click-stat {
      display: inline;
      padding: 2px 6px;
-      border-radius: 4px;
+      border-radius: 0;
      line-height: 21px;
      color: #fffc;
      font-size: 18px;
@@ -255,7 +266,8 @@
      flex: 1;
      min-height: 0;
      display: grid;
-      grid-template-columns: minmax(0, 1fr) minmax(320px, 360px) minmax(0, 1fr);
+      /* 중앙 허브 확대(다이아몬드 1.1×) — 좌·우 부문 카드 열은 1fr로 자동 축소 */
+      grid-template-columns: minmax(0, 1fr) minmax(320px, 396px) minmax(0, 1fr);
      grid-template-rows: 1fr 1fr;
      gap: 12px 24px;
      width: 100%;
@@ -360,9 +372,30 @@
    .dept-card--ex  { grid-column: 1; grid-row: 2; }
    .dept-card--ga  { grid-column: 3; grid-row: 2; }

-    /* 아이콘 숨김 (HTML은 BACKUP용으로 유지) */
    .dept-icon {
-      display: none;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+      width: 36px;
+      height: 36px;
+      margin-right: 8px;
+      border-radius: 10px;
+      background: rgba(255, 255, 255, 0.48);
+      border: 1px solid rgba(180, 152, 108, 0.24);
+      box-shadow:
+        inset 0 1px 0 rgba(255, 255, 255, 0.62),
+        0 1px 2px rgba(92, 74, 50, 0.06);
+      color: var(--dept-head-accent);
+      align-self: center;
+    }
+
+    .dept-icon svg {
+      width: 32px;
+      height: 32px;
+      stroke: currentColor;
+      fill: none;
+      stroke-width: 1.75;
    }

    .dept-head {
@@ -373,15 +406,32 @@
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 0;
-      padding: 16px 16px 10px;
-      border-bottom: 1px solid #d8e8e0;
-      background: linear-gradient(180deg, #fcfefd 0%, #f7fbf9 100%);
+      padding: 9px 16px 9px;
+      border-bottom: none;
+      background: linear-gradient(180deg, var(--dept-head-bg-top) 0%, var(--dept-head-bg-bottom) 100%);
+      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
      flex-shrink: 0;
    }

+    .dept-head::after {
+      content: "";
+      position: absolute;
+      left: 14px;
+      right: 14px;
+      bottom: 0;
+      height: 1px;
+      background: linear-gradient(
+        90deg,
+        transparent 0%,
+        var(--dept-head-line) 18%,
+        var(--dept-head-line) 82%,
+        transparent 100%
+      );
+    }
+
    .dept-head-main {
      display: flex;
-      align-items: baseline;
+      align-items: center;
      gap: 0;
      min-width: 0;
      flex: 1;
@@ -411,13 +461,13 @@
    }

    .dept-card .board-dept-title {
-      color: #0a2e24;
+      color: var(--dept-head-text);
    }

    .dept-card .dept-head-count .poly-stat-val,
    .dept-card .dept-head-count .poly-stat-unit,
    .dept-card .board-dept-title-en {
-      color: var(--dept-accent);
+      color: var(--dept-head-accent);
    }

    .board-dept-header-main {
@@ -452,14 +502,30 @@

    /* ─── 프로젝트 목록 — 종이 메모 리스트 ─── */
    .board-project-list {
+      position: relative;
      min-height: 0;
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 0;
      overflow-y: auto;
-      padding: 8px 14px 10px;
-      background: transparent;
+      padding: 10px 14px 10px;
+      background: linear-gradient(180deg, #f8fbfa 0%, rgba(248, 251, 250, 0) 20px);
+    }
+
+    .board-project-list::before {
+      content: "";
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      height: 3px;
+      background: linear-gradient(
+        180deg,
+        rgba(92, 74, 50, 0.04) 0%,
+        transparent 100%
+      );
+      pointer-events: none;
    }

    .project-sub-card {
@@ -482,16 +548,41 @@

    .project-sub-body {
      display: grid;
-      grid-template-columns: 1fr auto;
-      gap: 14px;
+      grid-template-columns: 1fr auto auto;
+      column-gap: 12px;
      align-items: center;
    }

+    .project-sub-divider {
+      display: block;
+      width: 1px;
+      align-self: stretch;
+      margin: 6px 0;
+      background: linear-gradient(
+        180deg,
+        transparent 0%,
+        #c8d9d0 14%,
+        #c8d9d0 86%,
+        transparent 100%
+      );
+    }
+
+    .progress-col {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+      width: 93px;
+    }
+
    .project-fields {
      display: flex;
      flex-direction: column;
      gap: 7px;
      min-width: 0;
+      /* 불릿(10px) + gap(10px) — 하위 필드는 제목 글자 시작선과 정렬 */
+      --project-title-indent: 20px;
    }

    .project-field {
@@ -499,19 +590,43 @@
      grid-template-columns: 96px 1fr;
      gap: 8px;
      align-items: baseline;
+      padding-left: var(--project-title-indent);
    }

    .project-sub-title {
+      display: flex;
+      align-items: flex-start;
+      gap: 10px;
      font-size: 24px;
      font-weight: 600;
      color: #0a2e24;
      line-height: 1.35;
+    }
+
+    .project-sub-title::before {
+      content: "";
+      flex-shrink: 0;
+      width: 10px;
+      height: 10px;
+      margin-top: 9px;
+      border-radius: 50%;
+      background: var(--status-bullet, var(--status-in-progress));
+    }
+
+    .project-sub-title-text {
+      flex: 1;
+      min-width: 0;
      overflow: hidden;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
    }

+    .project-sub-title--in-progress { --status-bullet: var(--status-in-progress); }
+    .project-sub-title--hold { --status-bullet: var(--status-hold); }
+    .project-sub-title--done { --status-bullet: var(--status-done); }
+    .project-sub-title--issue { --status-bullet: var(--status-issue); }
+
    .project-field-label {
      font-size: 20px;
      font-weight: 600;
@@ -532,19 +647,6 @@
      text-overflow: ellipsis;
    }

-    .project-sub-divider {
-      display: none;
-    }
-
-    .progress-col {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-      flex-shrink: 0;
-      width: 93px;
-    }
-
    .dept-card .donut {
      --color: var(--dept-accent);
      background: conic-gradient(var(--color) calc(var(--pct) * 1%), #d4ddd8 0);
@@ -598,8 +700,9 @@
      width: 100%;
      z-index: 2;
      --hub-row-h: calc((100% - 12px) / 2);
-      --hub-band-h: min(calc(var(--hub-row-h) * 0.52), 188px);
-      --hub-slogan-band-h: min(calc(var(--hub-row-h) * 0.624), 226px);
+      --hub-band-h: min(calc(var(--hub-row-h) * 0.473), 171px);
+      /* 슬로건·일정 밴드 — 다이아몬드 1.1×에 맞춰 높이 축소 (0.624→0.567, 226→205) */
+      --hub-slogan-band-h: min(calc(var(--hub-row-h) * 0.567), 205px);
      /* 일정: 박스 top → 제목 (플래너·헤더 띠에서 역산) */
      --hub-title-top: 20px;
      /* 슬로건: 바깥(그리드→포스트잇) + 안(핀 아래→제목). 일정 플래너 14px과 같은 호흡 */
@@ -611,7 +714,7 @@
      --hub-head-pad-bottom: 7px;
      --hub-card-pad-x: 12px;
      --hub-card-pad-bottom: 10px;
-      --hub-diamond-scale: 0.9;
+      --hub-diamond-scale: 0.99;
    }

    .hub-box--message {
@@ -677,7 +780,7 @@
      border: 1px solid #d8e2ea;
    }

-    /* 분기 슬로건 — 2장 겹친 sage 포스트잇 */
+    /* 분기 중점 과제 — 2장 겹친 sage 포스트잇 */
    .hub-box--message {
      background: transparent;
      border: none;
@@ -985,14 +1088,20 @@
      color: #0a2e24;
    }

-    .hub-column .board-project-desc,
-    .hub-column .hub-routine-item {
+    .hub-column .board-project-desc {
      font-size: 20px;
      font-weight: 500;
      line-height: 1.45;
      font-family: inherit;
    }

+    .hub-column .hub-routine-item {
+      font-size: 24px;
+      font-weight: 600;
+      line-height: 1.35;
+      font-family: inherit;
+    }
+
    .hub-column .hub-schedule-month {
      font-size: 20px;
      font-weight: 600;
@@ -1180,30 +1289,25 @@
    }

    .hub-diamond-icon {
+      width: 36px;
+      height: 36px;
+      border: 2px solid var(--hrm);
+      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
+      color: var(--hrm);
+      font-size: 18px;
+      font-weight: 700;
      flex-shrink: 0;
-      line-height: 0;
-    }
-
-    .hub-diamond-icon svg {
-      width: 22px;
-      height: 22px;
-      stroke: #6eecc8;
-      fill: none;
-      stroke-width: 2.4;
-      stroke-linecap: round;
-      stroke-linejoin: round;
    }

    .hub-diamond {
      flex-shrink: 0;
      transform: rotate(45deg);
-      background: var(--hub-diamond-bg);
-      border: 2.5px solid var(--hub-diamond-border);
-      border-radius: 10px;
-      box-shadow: 0 6px 22px rgba(7, 65, 46, 0.28);
+      background: #fff;
+      border: 2.5px solid var(--hrm);
+      box-shadow: 0 4px 18px rgba(7, 65, 46, 0.1);
      display: flex;
      align-items: center;
      justify-content: center;
@@ -1211,77 +1315,52 @@

    .hub-diamond-inner {
      transform: rotate(-45deg);
-      width: 92%;
-      max-height: 92%;
-      text-align: center;
-      padding: 0 8px;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-      gap: 4px;
-      overflow: hidden;
-    }
-
-    .hub-diamond-head {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      gap: 8px;
-      width: 100%;
-    }
-
-    .hub-diamond-head .board-project-title {
-      text-align: left;
-      color: #fff;
-      margin: 0;
-      font-size: 24px;
-      font-weight: 600;
-      line-height: 1.35;
-    }
-
-    .hub-diamond-divider {
      width: 88%;
-      height: 1px;
-      background: rgba(255, 255, 255, 0.22);
-      margin: 2px 0 4px;
-      flex-shrink: 0;
+      text-align: center;
+      padding: 0 4px;
    }

-    .hub-routine-grid {
-      display: grid;
-      grid-template-columns: 1fr 1fr;
-      column-gap: 10px;
-      row-gap: 2px;
-      width: 100%;
-      max-width: 100%;
-      justify-items: center;
+    .hub-diamond-icon {
+      width: 38px;
+      height: 38px;
+      margin: 0 auto 6px;
+      border: 2px solid var(--hrm);
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: var(--hrm);
+      font-size: 20px;
+      font-weight: 700;
    }

-    .hub-routine-item {
-      appearance: none;
-      background: none;
-      border: none;
-      padding: 2px 4px;
-      margin: 0;
-      color: #8fd4bc;
-      cursor: pointer;
-      border-radius: 4px;
-      transition: color 0.18s ease, opacity 0.18s ease, text-shadow 0.18s ease;
+    .hub-diamond-title {
+      font-size: 18px;
+      font-weight: 800;
+      color: #1e3a5f;
+      margin-bottom: 6px;
+      line-height: 1.3;
    }

-    .hub-routine-item:hover {
-      color: #b4ecd6;
-      text-shadow: 0 0 10px rgba(143, 212, 188, 0.28);
+    .hub-diamond ul {
+      list-style: none;
+      text-align: center;
+      font-size: 14px;
+      line-height: 1.5;
+      color: #334155;
+      font-weight: 500;
+      overflow: visible;
+      padding: 0;
    }

-    .hub-routine-item:active {
-      opacity: 0.82;
+    .hub-diamond li {
+      padding: 1px 0;
    }

-    .hub-routine-item:focus-visible {
-      outline: 1px solid rgba(143, 212, 188, 0.45);
-      outline-offset: 2px;
+    .hub-diamond li::before {
+      content: "• ";
+      color: var(--hrm);
+      font-weight: 700;
    }

    @media (max-width: 1200px) {
@@ -1405,7 +1484,10 @@
          <article class="project-sub-card project-sub-card--hrm">
            <div class="project-sub-body">
              <div class="project-fields">
-                <div class="project-sub-title">상반기 채용 운영</div>
+                <div class="project-field">
+                  <span class="project-field-label">프로젝트명</span>
+                  <span class="project-field-value">상반기 채용 운영</span>
+                </div>
                <div class="project-field">
                  <span class="project-field-label">작업 기간</span>
                  <span class="project-field-value">2026.04 ~ 2026.06</span>
@@ -1424,9 +1506,12 @@
          <article class="project-sub-card project-sub-card--hrm">
            <div class="project-sub-body">
              <div class="project-fields">
-                <div class="project-sub-title">평가제도 개선</div>
                <div class="project-field">
-                  <span class="project-field-label">작업 기간</span>
+                  <span class="project-field-label">프로젝트명</span>
+                  <span class="project-field-value">평가제도 개선</span>
+                </div>
+                <div class="project-field">
+                  <span class="project-field-label">기간</span>
                  <span class="project-field-value">2026.03 ~ 2026.07</span>
                </div>
                <div class="project-field">
@@ -1436,7 +1521,8 @@
              </div>
              <div class="project-sub-divider" aria-hidden="true"></div>
              <div class="progress-col">
-                <div class="donut" style="--pct:60"><span>60%</span></div>
+                <span class="progress-label">진행/달성률</span>
+                <div class="donut" style="--pct:60; --color:#ff9f0a"><span style="color:#ff9f0a">보류</span></div>
              </div>
            </div>
          </article>
@@ -1465,9 +1551,12 @@
          <article class="project-sub-card project-sub-card--hrd">
            <div class="project-sub-body">
              <div class="project-fields">
-                <div class="project-sub-title">신규입사자 온보딩 프로그램</div>
                <div class="project-field">
-                  <span class="project-field-label">작업 기간</span>
+                  <span class="project-field-label">프로젝트명</span>
+                  <span class="project-field-value">신규입사자 온보딩 프로그램</span>
+                </div>
+                <div class="project-field">
+                  <span class="project-field-label">기간</span>
                  <span class="project-field-value">2026.04 ~ 2026.06</span>
                </div>
                <div class="project-field">
@@ -1477,6 +1566,7 @@
              </div>
              <div class="project-sub-divider" aria-hidden="true"></div>
              <div class="progress-col">
+                <span class="progress-label">진행/달성률</span>
                <div class="donut" style="--pct:85"><span>85%</span></div>
              </div>
            </div>
@@ -1484,9 +1574,12 @@
          <article class="project-sub-card project-sub-card--hrd">
            <div class="project-sub-body">
              <div class="project-fields">
-                <div class="project-sub-title">팀장 리더십 교육</div>
                <div class="project-field">
-                  <span class="project-field-label">작업 기간</span>
+                  <span class="project-field-label">프로젝트명</span>
+                  <span class="project-field-value">팀장 리더십 교육</span>
+                </div>
+                <div class="project-field">
+                  <span class="project-field-label">기간</span>
                  <span class="project-field-value">2026.05 ~ 2026.06</span>
                </div>
                <div class="project-field">
@@ -1496,7 +1589,8 @@
              </div>
              <div class="project-sub-divider" aria-hidden="true"></div>
              <div class="progress-col">
-                <div class="donut" style="--pct:100"><span>100%</span></div>
+                <span class="progress-label">진행/달성률</span>
+                <div class="donut" style="--pct:100; --color:#b0b0b0"><span style="color:#b0b0b0">완료</span></div>
              </div>
            </div>
          </article>
@@ -1505,7 +1599,7 @@

      <!-- 중앙 허브 -->
      <div class="hub-column" id="hub-column">
-      <!-- 분기 슬로건 -->
+      <!-- 분기 중점 과제 -->
      <div class="hub-box hub-box--message">
          <div class="hub-postit-stack">
            <div class="hub-postit-sheet hub-postit-sheet--back" aria-hidden="true"></div>
@@ -1517,17 +1611,12 @@
                  <div class="hub-box-title-row">
                    <span class="hub-message-icon" aria-hidden="true">
                      <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-                        <path d="M12 4v5"/>
-                        <path d="M12 15v5"/>
-                        <path d="M4 12h5"/>
-                        <path d="M15 12h5"/>
-                        <path d="M18 5v2"/>
-                        <path d="M17 6h2"/>
-                        <path d="M5 17v2"/>
-                        <path d="M4 18h2"/>
+                        <circle cx="12" cy="12" r="10"/>
+                        <circle cx="12" cy="12" r="6"/>
+                        <circle cx="12" cy="12" r="2"/>
                      </svg>
                    </span>
-                    <div class="board-project-title">분기 슬로건</div>
+                    <div class="board-project-title">분기 중점 과제</div>
                  </div>
                </div>
                <div class="hub-postit-message">
@@ -1554,12 +1643,11 @@
              </div>
              <div class="hub-diamond-divider" aria-hidden="true"></div>
              <div class="hub-routine-grid">
-                <button type="button" class="hub-routine-item">채용</button>
-                <button type="button" class="hub-routine-item">교육</button>
-                <button type="button" class="hub-routine-item">소통</button>
-                <button type="button" class="hub-routine-item">시설</button>
-                <button type="button" class="hub-routine-item">자산</button>
-                <button type="button" class="hub-routine-item">행정</button>
+                <button type="button" class="hub-routine-item">채용 운영</button>
+                <button type="button" class="hub-routine-item">교육 운영</button>
+                <button type="button" class="hub-routine-item">직원 소통</button>
+                <button type="button" class="hub-routine-item">자산·시설</button>
+                <button type="button" class="hub-routine-item">문서·행정</button>
              </div>
            </div>
          </div>
@@ -1623,9 +1711,12 @@
          <article class="project-sub-card project-sub-card--ex">
            <div class="project-sub-body">
              <div class="project-fields">
-                <div class="project-sub-title">조직문화 진단</div>
                <div class="project-field">
-                  <span class="project-field-label">작업 기간</span>
+                  <span class="project-field-label">프로젝트명</span>
+                  <span class="project-field-value">조직문화 진단</span>
+                </div>
+                <div class="project-field">
+                  <span class="project-field-label">기간</span>
                  <span class="project-field-value">2026.04 ~ 2026.05</span>
                </div>
                <div class="project-field">
@@ -1635,6 +1726,7 @@
              </div>
              <div class="project-sub-divider" aria-hidden="true"></div>
              <div class="progress-col">
+                <span class="progress-label">진행/달성률</span>
                <div class="donut" style="--pct:100"><span>100%</span></div>
              </div>
            </div>
@@ -1642,9 +1734,12 @@
          <article class="project-sub-card project-sub-card--ex">
            <div class="project-sub-body">
              <div class="project-fields">
-                <div class="project-sub-title">복리후생제도 개선</div>
                <div class="project-field">
-                  <span class="project-field-label">작업 기간</span>
+                  <span class="project-field-label">프로젝트명</span>
+                  <span class="project-field-value">복리후생제도 개선</span>
+                </div>
+                <div class="project-field">
+                  <span class="project-field-label">기간</span>
                  <span class="project-field-value">2026.05 ~ 2026.08</span>
                </div>
                <div class="project-field">
@@ -1654,7 +1749,8 @@
              </div>
              <div class="project-sub-divider" aria-hidden="true"></div>
              <div class="progress-col">
-                <div class="donut" style="--pct:50"><span>50%</span></div>
+                <span class="progress-label">진행/달성률</span>
+                <div class="donut" style="--pct:50; --color:#ff9f0a"><span style="color:#ff9f0a">보류</span></div>
              </div>
            </div>
          </article>
@@ -1683,9 +1779,12 @@
          <article class="project-sub-card project-sub-card--ga">
            <div class="project-sub-body">
              <div class="project-fields">
-                <div class="project-sub-title">사무공간 재배치</div>
                <div class="project-field">
-                  <span class="project-field-label">작업 기간</span>
+                  <span class="project-field-label">프로젝트명</span>
+                  <span class="project-field-value">사무공간 재배치</span>
+                </div>
+                <div class="project-field">
+                  <span class="project-field-label">기간</span>
                  <span class="project-field-value">2026.04 ~ 2026.07</span>
                </div>
                <div class="project-field">
@@ -1695,6 +1794,7 @@
              </div>
              <div class="project-sub-divider" aria-hidden="true"></div>
              <div class="progress-col">
+                <span class="progress-label">진행/달성률</span>
                <div class="donut" style="--pct:70"><span>70%</span></div>
              </div>
            </div>
@@ -1702,9 +1802,12 @@
          <article class="project-sub-card project-sub-card--ga">
            <div class="project-sub-body">
              <div class="project-fields">
-                <div class="project-sub-title">안전·보안 점검 강화</div>
                <div class="project-field">
-                  <span class="project-field-label">작업 기간</span>
+                  <span class="project-field-label">프로젝트명</span>
+                  <span class="project-field-value">안전·보안 점검 강화</span>
+                </div>
+                <div class="project-field">
+                  <span class="project-field-label">기간</span>
                  <span class="project-field-value">2026.04 ~ 2026.06</span>
                </div>
                <div class="project-field">
@@ -1714,6 +1817,7 @@
              </div>
              <div class="project-sub-divider" aria-hidden="true"></div>
              <div class="progress-col">
+                <span class="progress-label">진행/달성률</span>
                <div class="donut" style="--pct:85"><span>85%</span></div>
              </div>
            </div>
--- a/frontend/src/components/common/HubNavChevron.tsx
+++ b/frontend/src/components/common/HubNavChevron.tsx
@@ -0,0 +1,21 @@
+type HubNavChevronProps = {
+  direction: 'prev' | 'next';
+  className?: string;
+};
+
+export function HubNavChevron({ direction, className = '' }: HubNavChevronProps) {
+  return (
+    <svg
+      className={`hub-nav-chevron${className ? ` ${className}` : ''}`}
+      viewBox="0 0 24 24"
+      fill="none"
+      aria-hidden="true"
+    >
+      {direction === 'prev' ? (
+        <path stroke="currentColor" d="M15.5 1 8.5 12l7 11" />
+      ) : (
+        <path stroke="currentColor" d="M8.5 1 15.5 12 8.5 23" />
+      )}
+    </svg>
+  );
+}
--- a/frontend/src/components/common/TaskModal.tsx
+++ b/frontend/src/components/common/TaskModal.tsx
@@ -1,7 +1,9 @@
 import { useState } from 'react';
 import { createPortal } from 'react-dom';
-import type { Task, TeamMember } from '../../types';
-import { normalizeTaskType, displayFlagsForTaskType, TASK_TYPE_OPTIONS } from '../../lib/taskType';
+import type { Task, TeamMember, TaskIssueEntry } from '../../types';
+import { normalizeTaskType } from '../../lib/taskType';
+import { newIssueEntry, parseIssueEntries } from '../../lib/taskIssues';
+import { getRoutineCategory, routineCategoryOptions } from '../../lib/routineCategories';

 const STATUS_OPTIONS = [
  { value: 'TODO',        label: '대기' },
@@ -13,28 +15,27 @@ const STATUS_OPTIONS = [
 export interface TaskFormData {
  title: string;
  section: string;
+  category: string;
  tag: string;
  taskType: string;
  status: string;
  progress: number;
  description: string;
-  issueNote: string;
+  issueEntries: TaskIssueEntry[];
  quarter: string;
  startDate: string;
  dueDate: string;
-  showDate: boolean;
-  showDescription: boolean;
-  showStatus: boolean;
-  showIssue: boolean;
-  showProgress: boolean;
  pmMemberId: string;
  assigneeMemberIds: string[];
 }

 interface TaskModalProps {
  mode: 'add' | 'edit';
+  /** project: 실행과제 전용 / routine: 기반업무(상시) 전용 */
+  variant?: 'project' | 'routine';
  task?: Task;
  defaultSection?: string;
+  defaultCategory?: string;
  defaultQuarter?: string;
  sectionOptions?: { value: string; label: string }[];
  teamMembers?: TeamMember[];
@@ -44,37 +45,37 @@ interface TaskModalProps {

 export function TaskModal({
  mode,
+  variant = 'project',
  task,
  defaultSection = 'HR',
+  defaultCategory = '채용 운영',
  defaultQuarter = '2026-Q2',
  sectionOptions,
  teamMembers = [],
  onSave,
  onClose,
 }: TaskModalProps) {
+  const isRoutine = variant === 'routine';
  const toDateInput = (iso: string | null | undefined) => {
    if (!iso) return '';
    return new Date(iso).toISOString().slice(0, 10);
  };

-  // DB값(프로젝트/상시업무) → 새 값(실행과제/기반업무) 정규화
  const [form, setForm] = useState<TaskFormData>({
    title:       task?.title ?? '',
    section:     task?.section ?? defaultSection,
+    category:    (task ? getRoutineCategory(task) : null) ?? defaultCategory,
    tag:         task?.tag ?? '',
-    taskType:    task?.taskType ? normalizeTaskType(task.taskType) : '실행과제',
+    taskType:    isRoutine
+      ? '기반업무'
+      : (task?.taskType ? normalizeTaskType(task.taskType) : '실행과제'),
    status:      task?.status ?? 'TODO',
    progress:    task?.progress ?? 0,
    description: task?.description ?? '',
-    issueNote:   task?.issueNote ?? '',
+    issueEntries: task ? parseIssueEntries(task) : [],
    quarter:     task?.quarter ?? defaultQuarter,
    startDate:   toDateInput(task?.startDate),
    dueDate:     toDateInput(task?.dueDate),
-    showDate:    task?.showDate ?? true,
-    showDescription: task?.showDescription ?? true,
-    showStatus:  task?.showStatus ?? true,
-    showIssue:   task?.showIssue ?? true,
-    showProgress: task?.showProgress ?? true,
    pmMemberId:  task?.pmMember?.id ?? task?.pmMemberId ?? '',
    assigneeMemberIds: task?.assigneeMembers?.map((m) => m.id) ?? [],
  });
@@ -94,9 +95,36 @@ export function TaskModal({
  const set = <K extends keyof TaskFormData>(field: K, value: TaskFormData[K]) =>
    setForm(prev => ({ ...prev, [field]: value }));

+  const updateIssueEntry = (id: string, patch: Partial<TaskIssueEntry>) => {
+    setForm((prev) => ({
+      ...prev,
+      issueEntries: prev.issueEntries.map((entry) =>
+        entry.id === id ? { ...entry, ...patch } : entry,
+      ),
+    }));
+  };
+
+  const addIssueEntry = () => {
+    setForm((prev) => ({
+      ...prev,
+      issueEntries: [...prev.issueEntries, newIssueEntry()],
+    }));
+  };
+
+  const removeIssueEntry = (id: string) => {
+    setForm((prev) => ({
+      ...prev,
+      issueEntries: prev.issueEntries.filter((entry) => entry.id !== id),
+    }));
+  };
+
  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
-    onSave(form);
+    const payload: TaskFormData = {
+      ...form,
+      taskType: isRoutine ? '기반업무' : '실행과제',
+    };
+    onSave(payload);
  };

  return createPortal(
@@ -111,7 +139,9 @@ export function TaskModal({
        {/* 헤더 */}
        <div className="flex items-center justify-between px-6 py-4 border-b border-gray-100">
          <h2 className="text-2xl font-black text-gray-800">
-            {mode === 'add' ? '✚ 업무 추가' : '✏ 업무 수정'}
+            {isRoutine
+              ? (mode === 'add' ? '✚ 상시업무 추가' : '✏ 상시업무 수정')
+              : (mode === 'add' ? '✚ 프로젝트 추가' : '✏ 프로젝트 수정')}
          </h2>
          <button
            type="button"
@@ -135,14 +165,26 @@ export function TaskModal({
            />
          </div>

-          {/* 섹션 + 업무유형 */}
-          <div className="grid grid-cols-2 gap-3">
-            <div>
-              <label className="block text-sm font-bold text-gray-500 mb-1.5">섹션</label>
+          {/* 대분류 (상시업무) / 소속 부문 (프로젝트) */}
+          <div>
+            <label className="block text-sm font-bold text-gray-500 mb-1.5">
+              {isRoutine ? '대분류' : '소속 부문'}
+            </label>
+            {isRoutine ? (
+              <select
+                value={form.category}
+                onChange={(e) => set('category', e.target.value)}
+                className="w-full border border-gray-200 rounded-xl px-4 py-2.5 outline-none focus:ring-2 transition bg-white focus:border-emerald-400 focus:ring-emerald-100"
+              >
+                {routineCategoryOptions().map((opt) => (
+                  <option key={opt.value} value={opt.value}>{opt.label}</option>
+                ))}
+              </select>
+            ) : (
              <select
                value={form.section}
                onChange={(e) => set('section', e.target.value)}
-                className="w-full border border-gray-200 rounded-xl px-4 py-2.5 outline-none focus:border-blue-400 focus:ring-2 focus:ring-blue-100 transition bg-white"
+                className="w-full border border-gray-200 rounded-xl px-4 py-2.5 outline-none focus:ring-2 transition bg-white focus:border-blue-400 focus:ring-blue-100"
              >
                {(sectionOptions ?? [
                  { value: 'HR', label: 'HR' },
@@ -151,43 +193,14 @@ export function TaskModal({
                  <option key={opt.value} value={opt.value}>{opt.label}</option>
                ))}
              </select>
-            </div>
-            <div>
-              <label className="block text-sm font-bold text-gray-500 mb-1.5">업무 유형</label>
-              <select
-                value={form.taskType}
-                onChange={(e) => {
-                  const newType = e.target.value;
-                  setForm((prev) => ({
-                    ...prev,
-                    taskType: newType,
-                    ...displayFlagsForTaskType(newType),
-                  }));
-                }}
-                className="w-full border border-gray-200 rounded-xl px-4 py-2.5 outline-none focus:border-blue-400 focus:ring-2 focus:ring-blue-100 transition bg-white"
-              >
-                {TASK_TYPE_OPTIONS.map((opt) => (
-                  <option key={opt.value} value={opt.value}>{opt.label}</option>
-                ))}
-              </select>
-            </div>
+            )}
          </div>

-          {/* 상태 + 진행률 */}
+          {/* 상태 + 진행률 (프로젝트만) */}
+          {!isRoutine && (
          <div className="grid grid-cols-2 gap-3">
            <div>
-              <div className="flex items-center justify-between mb-1.5">
-                <label className="text-sm font-bold text-gray-500">상태</label>
-                <label className="flex items-center gap-1.5 cursor-pointer select-none">
-                  <input
-                    type="checkbox"
-                    checked={form.showStatus}
-                    onChange={(e) => set('showStatus', e.target.checked)}
-                    className="w-4 h-4 accent-blue-500 cursor-pointer"
-                  />
-                  <span className="text-xs font-semibold text-gray-400">카드 표시</span>
-                </label>
-              </div>
+              <label className="block text-sm font-bold text-gray-500 mb-1.5">상태</label>
              <select
                value={form.status}
                onChange={(e) => set('status', e.target.value)}
@@ -199,22 +212,11 @@ export function TaskModal({
              </select>
            </div>
            <div>
-              <div className="flex items-center justify-between mb-1.5">
-                <label className="text-sm font-bold text-gray-500">
-                  진행률
-                  <span className="ml-2 font-black text-gray-800">{form.progress}%</span>
-                </label>
-                <label className="flex items-center gap-1.5 cursor-pointer select-none">
-                  <input
-                    type="checkbox"
-                    checked={form.showProgress}
-                    onChange={(e) => set('showProgress', e.target.checked)}
-                    className="w-4 h-4 accent-blue-500 cursor-pointer"
-                  />
-                  <span className="text-xs font-semibold text-gray-400">카드 표시</span>
-                </label>
-              </div>
-              <div className="flex items-center gap-3">
+              <label className="block text-sm font-bold text-gray-500 mb-1.5">
+                진행률
+                <span className="ml-2 font-black text-gray-800">{form.progress}%</span>
+              </label>
+              <div className="flex items-center gap-3 pt-2">
                <input
                  type="range"
                  min={0}
@@ -227,21 +229,27 @@ export function TaskModal({
              </div>
            </div>
          </div>
+          )}
+
+          {/* 상태 (상시업무) */}
+          {isRoutine && (
+            <div>
+              <label className="block text-sm font-bold text-gray-500 mb-1.5">상태</label>
+              <select
+                value={form.status}
+                onChange={(e) => set('status', e.target.value)}
+                className="w-full border border-gray-200 rounded-xl px-4 py-2.5 outline-none focus:border-emerald-400 focus:ring-2 focus:ring-emerald-100 transition bg-white"
+              >
+                {STATUS_OPTIONS.map((s) => (
+                  <option key={s.value} value={s.value}>{s.label}</option>
+                ))}
+              </select>
+            </div>
+          )}

          {/* 내용 */}
          <div>
-            <div className="flex items-center justify-between mb-1.5">
-              <label className="text-sm font-bold text-gray-500">내용</label>
-              <label className="flex items-center gap-1.5 cursor-pointer select-none">
-                <input
-                  type="checkbox"
-                  checked={form.showDescription}
-                  onChange={(e) => set('showDescription', e.target.checked)}
-                  className="w-4 h-4 accent-blue-500 cursor-pointer"
-                />
-                <span className="text-xs font-semibold text-gray-400">카드 표시</span>
-              </label>
-            </div>
+            <label className="block text-sm font-bold text-gray-500 mb-1.5">내용</label>
            <textarea
              value={form.description}
              onChange={(e) => set('description', e.target.value)}
@@ -299,19 +307,9 @@ export function TaskModal({
          )}

          {/* 프로젝트 기간 */}
+          {!isRoutine && (
          <div>
-            <div className="flex items-center justify-between mb-1.5">
-              <label className="text-sm font-bold text-gray-500">기간</label>
-              <label className="flex items-center gap-1.5 cursor-pointer select-none">
-                <input
-                  type="checkbox"
-                  checked={form.showDate}
-                  onChange={(e) => set('showDate', e.target.checked)}
-                  className="w-4 h-4 accent-blue-500 cursor-pointer"
-                />
-                <span className="text-xs font-semibold text-gray-400">카드 표시</span>
-              </label>
-            </div>
+            <label className="block text-sm font-bold text-gray-500 mb-1.5">기간</label>
            <div className="grid grid-cols-2 gap-3">
              <input
                type="date"
@@ -327,27 +325,60 @@ export function TaskModal({
              />
            </div>
          </div>
+          )}

          {/* 이슈 메모 */}
          <div>
-            <div className="flex items-center justify-between mb-1.5">
+            <div className="flex items-center justify-between mb-2">
              <label className="text-sm font-bold text-gray-500">이슈 메모</label>
-              <label className="flex items-center gap-1.5 cursor-pointer select-none">
-                <input
-                  type="checkbox"
-                  checked={form.showIssue}
-                  onChange={(e) => set('showIssue', e.target.checked)}
-                  className="w-4 h-4 accent-blue-500 cursor-pointer"
-                />
-                <span className="text-xs font-semibold text-gray-400">카드 표시</span>
-              </label>
+              <button
+                type="button"
+                onClick={addIssueEntry}
+                className="text-xs font-bold text-blue-600 hover:text-blue-700 px-2 py-1 rounded-lg hover:bg-blue-50 transition"
+              >
+                + 이슈 추가
+              </button>
            </div>
-            <input
-              value={form.issueNote}
-              onChange={(e) => set('issueNote', e.target.value)}
-              className="w-full border border-gray-200 rounded-xl px-4 py-2.5 outline-none focus:border-red-400 focus:ring-2 focus:ring-red-100 transition text-red-600 placeholder:text-gray-300"
-              placeholder="[날짜] 이슈 내용 (비우면 표시 안 함)"
-            />
+            {form.issueEntries.length === 0 ? (
+              <p className="text-sm text-gray-400 rounded-xl border border-dashed border-gray-200 px-4 py-3 text-center">
+                등록된 이슈가 없습니다. 위 버튼으로 추가하세요.
+              </p>
+            ) : (
+              <div className="space-y-2">
+                {form.issueEntries.map((entry, index) => (
+                  <div
+                    key={entry.id}
+                    className="rounded-xl border border-gray-200 bg-gray-50/60 p-3 space-y-2"
+                  >
+                    <textarea
+                      value={entry.text}
+                      onChange={(e) => updateIssueEntry(entry.id, { text: e.target.value })}
+                      rows={2}
+                      className="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm outline-none focus:border-blue-400 focus:ring-2 focus:ring-blue-100 resize-none transition bg-white"
+                      placeholder={`[날짜] 이슈 내용 (${index + 1})`}
+                    />
+                    <div className="flex items-center justify-between gap-2">
+                      <label className="flex items-center gap-1.5 cursor-pointer select-none">
+                        <input
+                          type="checkbox"
+                          checked={entry.showOnCard}
+                          onChange={(e) => updateIssueEntry(entry.id, { showOnCard: e.target.checked })}
+                          className="w-4 h-4 accent-blue-500 cursor-pointer"
+                        />
+                        <span className="text-xs font-semibold text-gray-500">카드 표시</span>
+                      </label>
+                      <button
+                        type="button"
+                        onClick={() => removeIssueEntry(entry.id)}
+                        className="text-xs font-bold text-red-500 hover:text-red-600 px-2 py-1 rounded-lg hover:bg-red-50 transition"
+                      >
+                        삭제
+                      </button>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            )}
          </div>

          {/* 버튼 */}
@@ -361,7 +392,9 @@ export function TaskModal({
            </button>
            <button
              type="submit"
-              className="px-6 py-2.5 rounded-xl bg-blue-600 text-white font-bold hover:bg-blue-700 transition"
+              className={`px-6 py-2.5 rounded-xl text-white font-bold transition ${
+                isRoutine ? 'bg-emerald-700 hover:bg-emerald-800' : 'bg-blue-600 hover:bg-blue-700'
+              }`}
            >
              {mode === 'add' ? '추가하기' : '저장하기'}
            </button>
--- a/frontend/src/components/dashboard/BoardCalendarPopover.tsx
+++ b/frontend/src/components/dashboard/BoardCalendarPopover.tsx
@@ -0,0 +1,172 @@
+import { useEffect, useMemo, useState, type CSSProperties, type RefObject } from 'react';
+import { createPortal } from 'react-dom';
+
+import {
+  QUARTER_RANGE_LABELS,
+  buildMonthWeekRows,
+  dateToQuarter,
+  isSameDay,
+  isSameWeek,
+  quarterEndDate,
+  startOfDay,
+  startOfWeekMonday,
+  toIsoDate,
+} from '../../lib/boardCalendar';
+
+const WEEKDAY_LABELS = ['월', '화', '수', '목', '금', '토', '일'];
+
+interface BoardCalendarPopoverProps {
+  referenceDate: Date;
+  onChange: (d: Date) => void;
+  onClose: () => void;
+  anchorRef: RefObject<HTMLElement | null>;
+}
+
+export function BoardCalendarPopover({
+  referenceDate,
+  onChange,
+  onClose,
+  anchorRef,
+}: BoardCalendarPopoverProps) {
+  const [viewYear, setViewYear] = useState(referenceDate.getFullYear());
+  const [viewMonth, setViewMonth] = useState(referenceDate.getMonth());
+
+  const weekRows = useMemo(
+    () => buildMonthWeekRows(viewYear, viewMonth),
+    [viewYear, viewMonth],
+  );
+
+  const activeQuarterKey = dateToQuarter(referenceDate);
+
+  useEffect(() => {
+    setViewYear(referenceDate.getFullYear());
+    setViewMonth(referenceDate.getMonth());
+  }, [referenceDate]);
+
+  useEffect(() => {
+    const onPointerDown = (e: MouseEvent) => {
+      const anchor = anchorRef.current;
+      const target = e.target as Node;
+      if (anchor?.contains(target)) return;
+      const popover = document.getElementById('board-calendar-popover');
+      if (popover?.contains(target)) return;
+      onClose();
+    };
+    const onKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') onClose();
+    };
+    document.addEventListener('mousedown', onPointerDown);
+    document.addEventListener('keydown', onKeyDown);
+    return () => {
+      document.removeEventListener('mousedown', onPointerDown);
+      document.removeEventListener('keydown', onKeyDown);
+    };
+  }, [anchorRef, onClose]);
+
+  const rect = anchorRef.current?.getBoundingClientRect();
+  const style: CSSProperties = rect
+    ? { top: rect.bottom + 8, right: Math.max(12, window.innerWidth - rect.right) }
+    : { top: 56, right: 24 };
+
+  const shiftMonth = (delta: number) => {
+    const d = new Date(viewYear, viewMonth + delta, 1);
+    setViewYear(d.getFullYear());
+    setViewMonth(d.getMonth());
+  };
+
+  const pickDate = (d: Date) => {
+    onChange(startOfDay(d));
+  };
+
+  const pickQuarter = (q: 1 | 2 | 3 | 4) => {
+    onChange(quarterEndDate(`${viewYear}-Q${q}`));
+  };
+
+  const today = startOfDay(new Date());
+
+  return createPortal(
+    <div id="board-calendar-popover" className="board-calendar-popover" style={style} role="dialog" aria-label="기준일 선택">
+      <div className="board-calendar-popover-head">
+        <button type="button" className="board-calendar-nav" onClick={() => shiftMonth(-1)} aria-label="이전 달">‹</button>
+        <span className="board-calendar-month">{viewYear}년 {viewMonth + 1}월</span>
+        <button type="button" className="board-calendar-nav" onClick={() => shiftMonth(1)} aria-label="다음 달">›</button>
+      </div>
+
+      <div className="board-calendar-quarter-row">
+        {([1, 2, 3, 4] as const).map((q) => {
+          const key = `${viewYear}-Q${q}`;
+          const selected = activeQuarterKey === key;
+          return (
+            <button
+              key={key}
+              type="button"
+              className={`board-calendar-quarter-chip${selected ? ' is-selected' : ''}`}
+              onClick={() => pickQuarter(q)}
+            >
+              <span className="board-calendar-quarter-chip-title">{q}분기</span>
+              <span className="board-calendar-quarter-chip-range">{QUARTER_RANGE_LABELS[q - 1]}</span>
+            </button>
+          );
+        })}
+      </div>
+
+      <div className="board-calendar-grid-wrap">
+        <table className="board-calendar-grid">
+          <thead>
+            <tr>
+              <th className="board-calendar-grid-week-col">주차</th>
+              {WEEKDAY_LABELS.map((label) => (
+                <th key={label}>{label}</th>
+              ))}
+            </tr>
+          </thead>
+          <tbody>
+            {weekRows.map((row) => {
+              const weekSelected = isSameWeek(referenceDate, row.monday);
+              return (
+                <tr key={toIsoDate(row.monday)} className={weekSelected ? 'is-selected-week' : undefined}>
+                  <td className="board-calendar-grid-week-col">
+                    <button
+                      type="button"
+                      className="board-calendar-week-label-btn"
+                      onClick={() => pickDate(startOfWeekMonday(row.monday))}
+                    >
+                      {row.label}
+                    </button>
+                  </td>
+                  {row.days.map((day) => {
+                    const inMonth = day.getMonth() === viewMonth;
+                    const isRef = isSameDay(day, referenceDate);
+                    const isToday = isSameDay(day, today);
+                    return (
+                      <td key={toIsoDate(day)}>
+                        <button
+                          type="button"
+                          className={[
+                            'board-calendar-day-btn',
+                            !inMonth ? 'is-outside' : '',
+                            isRef ? 'is-ref' : '',
+                            isToday ? 'is-today' : '',
+                          ].filter(Boolean).join(' ')}
+                          onClick={() => pickDate(day)}
+                        >
+                          {day.getDate()}
+                        </button>
+                      </td>
+                    );
+                  })}
+                </tr>
+              );
+            })}
+          </tbody>
+        </table>
+      </div>
+
+      <div className="board-calendar-foot">
+        <button type="button" onClick={() => pickDate(startOfWeekMonday(today))}>이번 주</button>
+        <button type="button" onClick={() => pickDate(today)}>이번 분기</button>
+      </div>
+    </div>,
+    document.body,
+  );
+}
--- a/frontend/src/components/dashboard/BoardConnectors.tsx
+++ b/frontend/src/components/dashboard/BoardConnectors.tsx
@@ -1,11 +1,24 @@
-import { useBoardConnectors } from '../../hooks/useBoardConnectors';
+import { useBoardConnectors, type ConnectorStyle } from '../../hooks/useBoardConnectors';

-export function BoardConnectors({ enabled = true }: { enabled?: boolean }) {
-  const { svgRef, lineGroupRef } = useBoardConnectors(enabled);
+export function BoardConnectors({
+  enabled = true,
+  style = 'default',
+}: {
+  enabled?: boolean;
+  style?: ConnectorStyle;
+}) {
+  const { svgRef, lineGroupRef, dotSvgRef, dotGroupRef } = useBoardConnectors(enabled, style);

  return (
-    <svg ref={svgRef} className="connectors" aria-hidden="true">
-      <g ref={lineGroupRef} id="connector-lines" />
-    </svg>
+    <>
+      <svg ref={svgRef} className="connectors" aria-hidden="true">
+        <g ref={lineGroupRef} id="connector-lines" />
+      </svg>
+      {style === 'reference' && (
+        <svg ref={dotSvgRef} className="connectors connectors--dots" aria-hidden="true">
+          <g ref={dotGroupRef} id="connector-dots" />
+        </svg>
+      )}
+    </>
  );
 }
--- a/frontend/src/components/dashboard/DashboardHeader.tsx
+++ b/frontend/src/components/dashboard/DashboardHeader.tsx
@@ -1,5 +1,6 @@
-import { useState } from 'react';
+import { useRef, useState } from 'react';

+import { formatReferenceSummary } from '../../lib/boardCalendar';
 import { isDetailWindowOpen } from '../../lib/dualMonitor';

 import {
@@ -12,7 +13,8 @@ import {

 } from '../../lib/statusFilters';

-import { DualMonitorIcon, PlusIcon, UsersIcon } from './HeaderIcons';
+import { BoardCalendarPopover } from './BoardCalendarPopover';
+import { CalendarIcon, DualMonitorIcon, PlusIcon, UsersIcon } from './HeaderIcons';



@@ -36,6 +38,10 @@ interface DashboardHeaderProps {

  quarter: string;

+  referenceDate: Date;
+
+  onReferenceDateChange: (d: Date) => void;
+
  stats: Stats;

  activeFilters: string[];
@@ -84,6 +90,10 @@ export function DashboardHeader({

  quarter,

+  referenceDate,
+
+  onReferenceDateChange,
+
  stats,

  activeFilters,
@@ -107,6 +117,8 @@ export function DashboardHeader({
 }: DashboardHeaderProps) {

  const [detailViewActive, setDetailViewActive] = useState(isDetailWindowOpen);
+  const [calendarOpen, setCalendarOpen] = useState(false);
+  const calendarBtnRef = useRef<HTMLButtonElement>(null);

  const quarterLabel = quarter.replace(/^(\d{4})-Q(\d)$/, '$1 $2분기 업무');

@@ -237,10 +249,21 @@ export function DashboardHeader({
          <UsersIcon size={16} />
        </button>

+        <button type="button" onClick={onOpenTaskManager} title="신규 프로젝트 추가" className="header-action-btn-new">
+          <PlusIcon size={16} />
+        </button>
+
+        <button
+          type="button"
+          onClick={handleOpenDetailWindow}
+          title="듀얼뷰"
+          className={`header-view-btn-new ${detailViewActive ? 'active' : ''}`}
+        >
+          <DualMonitorIcon size={16} />
+        </button>
+
      </div>

-
-
      <div className="header-stats-bar side-polygon-stats">

        <div className="poly-stat-item" style={{ fontSize: '18px', gap: '8px' }}>
@@ -280,29 +303,30 @@ export function DashboardHeader({


      <div className="side-right-actions shrink-0">
-
-        <button type="button" onClick={onOpenTaskManager} title="신규 프로젝트 추가" className="header-action-btn-new">
-
-          <PlusIcon size={16} />
-
-        </button>
-
-        <button
-
-          type="button"
-
-          onClick={handleOpenDetailWindow}
-
-          title="듀얼뷰"
-
-          className={`header-view-btn-new ${detailViewActive ? 'active' : ''}`}
-
-        >
-
-          <DualMonitorIcon size={16} />
-
-        </button>
-
+        <div className="header-calendar-slot">
+          <span className="board-calendar-ref-text">{formatReferenceSummary(referenceDate)}</span>
+          <button
+            ref={calendarBtnRef}
+            type="button"
+            className={`header-calendar-btn-new${calendarOpen ? ' active' : ''}`}
+            title="기준일 · 분기 선택"
+            aria-expanded={calendarOpen}
+            aria-label="캘린더 열기"
+            onClick={() => setCalendarOpen((open) => !open)}
+          >
+            <CalendarIcon size={16} />
+          </button>
+          {calendarOpen && (
+            <BoardCalendarPopover
+              referenceDate={referenceDate}
+              onChange={(d) => {
+                onReferenceDateChange(d);
+              }}
+              onClose={() => setCalendarOpen(false)}
+              anchorRef={calendarBtnRef}
+            />
+          )}
+        </div>
      </div>

    </header>
--- a/frontend/src/components/dashboard/DepartmentColumn.tsx
+++ b/frontend/src/components/dashboard/DepartmentColumn.tsx
@@ -2,18 +2,21 @@ import { useState, useEffect } from 'react';
 import { createPortal } from 'react-dom';
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import { useDroppable } from '@dnd-kit/core';
-import { SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable';
 import { apiClient, getApiErrorMessage } from '../../lib/apiClient';
 import { isProjectTask } from '../../lib/taskType';
-import { type BoardSlotConfig, slotSectionLabel } from '../../lib/boardLayout';
+import { type BoardSlotConfig, slotSectionLabel, columnDisplayTitle, columnDisplayTitleEn } from '../../lib/boardLayout';
 import { SortableTaskCard } from './TaskCard';
+import { DeptIcon } from './DeptIcon';
+import { DeptProjectList } from './DeptProjectList';
 import { ContextMenu } from '../common/ContextMenu';
 import { TaskModal } from '../common/TaskModal';
 import type { TaskFormData } from '../common/TaskModal';
-import { taskFormToApiPayload } from '../../lib/taskFormPayload';
+import { projectFormToApiPayload } from '../../lib/taskFormPayload';
+import { invalidateTaskCaches } from '../../lib/taskQueryCache';
 import type { Task, TeamMember } from '../../types';

 const DUMMY_HEADER_KEY = 'eene-board-slot-headers-v1';
+/** 참고 레이아웃: 부서당 표시 슬롯 수 (2행 + 스크롤) */

 type DummyHeaders = Record<string, { title: string; titleEn: string; subtitle: string }>;

@@ -138,12 +141,8 @@ export function DepartmentColumn({
    onSuccess: () => queryClient.invalidateQueries({ queryKey: ['columns', slot.sectionKey] }),
  });

-  const title = isDummySlot
-    ? dummyHeader?.title ?? slot.defaultTitle
-    : colConfig?.title ?? slot.defaultTitle;
-  const titleEnState = isDummySlot
-    ? dummyHeader?.titleEn ?? slot.defaultTitleEn
-    : colConfig?.titleEn ?? slot.defaultTitleEn;
+  const title = columnDisplayTitle(slot, colConfig, dummyHeader);
+  const titleEnState = columnDisplayTitleEn(slot, colConfig, dummyHeader);
  const subtitle = isDummySlot ? dummyHeader?.subtitle ?? '' : colConfig?.subtitle ?? '';

  const [ctxMenu, setCtxMenu] = useState<{ x: number; y: number; type: 'header' | 'list' } | null>(null);
@@ -176,7 +175,7 @@ export function DepartmentColumn({
  const patch = useMutation({
    mutationFn: ({ id, data }: { id: string; data: Record<string, unknown> }) =>
      apiClient.patch(`/tasks/${id}`, data),
-    onSuccess: () => queryClient.invalidateQueries({ queryKey: ['tasks'] }),
+    onSuccess: (_data, { id }) => invalidateTaskCaches(queryClient, id),
  });

  const remove = useMutation({
@@ -210,7 +209,7 @@ export function DepartmentColumn({
  const handleAdd = async (data: TaskFormData) => {
    try {
      await create.mutateAsync({
-        ...taskFormToApiPayload(data),
+        ...projectFormToApiPayload(data),
        section,
        priority: 'MEDIUM',
      } as Partial<Task>);
@@ -222,7 +221,7 @@ export function DepartmentColumn({

  const handleEdit = (data: TaskFormData) => {
    if (!editingTask) return;
-    patch.mutate({ id: editingTask.id, data: taskFormToApiPayload(data) });
+    patch.mutate({ id: editingTask.id, data: projectFormToApiPayload(data) });
    setShowEditModal(false);
    setEditingTask(null);
  };
@@ -257,41 +256,40 @@ export function DepartmentColumn({
          }}
        >
          <div className="dept-head-main">
+            <DeptIcon slotId={slot.id} />
            <div className="board-dept-header-main">
              <div className="board-dept-title-wrap">
-                <h2 className="board-dept-title">{title.replace(/\s*부문$/, '')}</h2>
+                <span className="board-dept-title" role="heading" aria-level={2}>
+                  {title.replace(/\s*부문$/, '')}
+                </span>
                {titleEnState && <span className="board-dept-title-en">{titleEnState}</span>}
+                <div className="dept-head-count" aria-label={`${projectTasks.length}건`}>
+                  <span className="poly-stat-val">{projectTasks.length}</span>
+                  <span className="poly-stat-unit">건</span>
+                </div>
              </div>
              {subtitle && <p className="board-dept-subtitle">{subtitle}</p>}
            </div>
          </div>
-          <div className="dept-head-count" aria-label={`${projectTasks.length}건`}>
-            <span className="poly-stat-val">{projectTasks.length}</span>
-            <span className="poly-stat-unit"> 건</span>
-          </div>
        </div>

-        <div
-          ref={setProjectDropRef}
-          className={`board-project-list ${isProjectOver ? 'is-over' : ''}`}
+        <DeptProjectList
+          items={projectTasks}
+          getKey={(task) => task.id}
+          sortableItemIds={projectTasks.map((t) => t.id)}
+          dropRef={setProjectDropRef}
+          className={isProjectOver ? 'is-over' : ''}
          onContextMenu={handleListContextMenu}
-        >
-          {projectTasks.length === 0 ? (
-            <div className="board-empty">해당 업무 없음</div>
-          ) : (
-            <SortableContext items={projectTasks.map((t) => t.id)} strategy={verticalListSortingStrategy}>
-              {projectTasks.map((task) => (
-                <SortableTaskCard
-                  key={task.id}
-                  task={task}
-                  variant="project"
-                  sectionOptions={sectionOptions}
-                  onSelect={onSelectTask}
-                />
-              ))}
-            </SortableContext>
+          empty={<div className="board-empty">해당 업무 없음</div>}
+          renderItem={(task) => (
+            <SortableTaskCard
+              task={task}
+              variant="project"
+              sectionOptions={sectionOptions}
+              onSelect={onSelectTask}
+            />
          )}
-        </div>
+        />
      </section>

      {cardMenu && (
@@ -322,6 +320,7 @@ export function DepartmentColumn({

      {showAddModal && (
        <TaskModal
+          variant="project"
          mode="add"
          defaultSection={section}
          defaultQuarter={quarter}
@@ -334,6 +333,7 @@ export function DepartmentColumn({

      {showEditModal && editingTask && (
        <TaskModal
+          variant="project"
          mode="edit"
          task={editingTask}
          sectionOptions={sectionOptions}
--- a/frontend/src/components/dashboard/DeptIcon.tsx
+++ b/frontend/src/components/dashboard/DeptIcon.tsx
@@ -0,0 +1,44 @@
+import type { BoardSlotId } from '../../lib/boardLayout';
+
+function DeptIconSvg({ slotId }: { slotId: BoardSlotId }) {
+  switch (slotId) {
+    case 'hrm':
+      return (
+        <svg viewBox="0 0 24 24" aria-hidden="true">
+          <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" />
+          <circle cx="9" cy="7" r="4" />
+          <path d="M22 21v-2a4 4 0 0 0-3-3.87" />
+          <path d="M16 3.13a4 4 0 0 1 0 7.75" />
+        </svg>
+      );
+    case 'hrd':
+      return (
+        <svg viewBox="0 0 24 24" aria-hidden="true">
+          <path d="M22 10v6M2 10l10-5 10 5-10 5z" />
+          <path d="M6 12v5c0 1.7 3.3 3 7 3s7-1.3 7-3v-5" />
+        </svg>
+      );
+    case 'ex':
+      return (
+        <svg viewBox="0 0 24 24" aria-hidden="true">
+          <path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.29 1.51 4.04 3 5.5l7 7Z" />
+        </svg>
+      );
+    case 'ga':
+      return (
+        <svg viewBox="0 0 24 24" aria-hidden="true">
+          <rect x="4" y="2" width="16" height="20" rx="2" ry="2" />
+          <path d="M9 22v-4h6v4" />
+          <path d="M8 6h.01M16 6h.01M12 6h.01M12 10h.01M12 14h.01M16 10h.01M16 14h.01M8 10h.01M8 14h.01" />
+        </svg>
+      );
+  }
+}
+
+export function DeptIcon({ slotId }: { slotId: BoardSlotId }) {
+  return (
+    <div className={`dept-icon dept-icon--${slotId}`}>
+      <DeptIconSvg slotId={slotId} />
+    </div>
+  );
+}
--- a/frontend/src/components/dashboard/DeptProjectList.tsx
+++ b/frontend/src/components/dashboard/DeptProjectList.tsx
@@ -0,0 +1,150 @@
+import {
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type MouseEventHandler,
+  type ReactNode,
+} from 'react';
+import { SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable';
+
+const PAGE_SIZE = 2;
+
+type DeptProjectListProps<T> = {
+  items: T[];
+  getKey: (item: T) => string;
+  renderItem: (item: T) => ReactNode;
+  sortableItemIds?: string[];
+  dropRef?: (node: HTMLDivElement | null) => void;
+  className?: string;
+  onContextMenu?: MouseEventHandler<HTMLDivElement>;
+  empty?: ReactNode;
+};
+
+function mergeRefs(
+  ...refs: Array<((node: HTMLDivElement | null) => void) | undefined>
+) {
+  return (node: HTMLDivElement | null) => {
+    refs.forEach((ref) => ref?.(node));
+  };
+}
+
+function chunkItems<T>(items: T[], size: number): T[][] {
+  const pages: T[][] = [];
+  for (let i = 0; i < items.length; i += size) {
+    pages.push(items.slice(i, i + size));
+  }
+  return pages;
+}
+
+export function DeptProjectList<T>({
+  items,
+  getKey,
+  renderItem,
+  sortableItemIds,
+  dropRef,
+  className = '',
+  onContextMenu,
+  empty,
+}: DeptProjectListProps<T>) {
+  const rootRef = useRef<HTMLDivElement | null>(null);
+  const pages = useMemo(() => chunkItems(items, PAGE_SIZE), [items]);
+  const pageCount = pages.length;
+  const paged = pageCount > 1;
+  const [pageIndex, setPageIndex] = useState(0);
+
+  useEffect(() => {
+    setPageIndex((prev) => Math.min(prev, Math.max(0, pageCount - 1)));
+  }, [pageCount]);
+
+  useEffect(() => {
+    const root = rootRef.current;
+    if (!root || !paged) return;
+
+    const onWheel = (event: WheelEvent) => {
+      if (Math.abs(event.deltaY) < 1) return;
+      event.preventDefault();
+      const direction = event.deltaY > 0 ? 1 : -1;
+      setPageIndex((prev) => Math.min(pageCount - 1, Math.max(0, prev + direction)));
+    };
+
+    root.addEventListener('wheel', onWheel, { passive: false });
+    return () => root.removeEventListener('wheel', onWheel);
+  }, [paged, pageCount]);
+
+  const setRefs = mergeRefs((node) => {
+    rootRef.current = node;
+  }, dropRef);
+
+  const listBody = items.length === 0 ? (
+    empty
+  ) : paged ? (
+    <div className="board-project-list-viewport">
+      <div className="board-project-list-page">
+        {pages[pageIndex].map((item) => (
+          <div key={getKey(item)} className="board-project-list-slot">
+            {renderItem(item)}
+          </div>
+        ))}
+        {pages[pageIndex].length < PAGE_SIZE &&
+          Array.from({ length: PAGE_SIZE - pages[pageIndex].length }, (_, slot) => (
+            <div
+              key={`empty-${pageIndex}-${slot}`}
+              className="board-project-list-slot board-project-list-slot--empty"
+              aria-hidden="true"
+            />
+          ))}
+      </div>
+    </div>
+  ) : (
+    <div className="board-project-list-viewport">
+      <div className="board-project-list-track">
+        <div className="board-project-list-page">
+          {pages[0].map((item) => (
+            <div key={getKey(item)} className="board-project-list-slot">
+              {renderItem(item)}
+            </div>
+          ))}
+          {pages[0].length < PAGE_SIZE &&
+            Array.from({ length: PAGE_SIZE - pages[0].length }, (_, slot) => (
+              <div
+                key={`empty-0-${slot}`}
+                className="board-project-list-slot board-project-list-slot--empty"
+                aria-hidden="true"
+              />
+            ))}
+        </div>
+      </div>
+    </div>
+  );
+
+  const sortableIds = sortableItemIds ?? items.map(getKey);
+  const wrappedBody =
+    sortableItemIds && items.length > 0 ? (
+      <SortableContext items={sortableIds} strategy={verticalListSortingStrategy}>
+        {listBody}
+      </SortableContext>
+    ) : (
+      listBody
+    );
+
+  return (
+    <div
+      ref={setRefs}
+      className={`board-project-list board-project-list--2slots${paged ? ' is-paged' : ''}${className ? ` ${className}` : ''}`}
+      onContextMenu={onContextMenu}
+    >
+      {wrappedBody}
+      {paged && (
+        <div className="board-project-list-steps" aria-hidden="true">
+          {Array.from({ length: pageCount }, (_, index) => (
+            <span
+              key={index}
+              className={`board-project-list-step${index === pageIndex ? ' is-active' : ''}`}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
--- a/frontend/src/components/dashboard/HeaderIcons.tsx
+++ b/frontend/src/components/dashboard/HeaderIcons.tsx
@@ -36,6 +36,18 @@ export function UsersIcon({ size = 16, className }: IconProps) {
  );
 }

+/** lucide `calendar` */
+export function CalendarIcon({ size = 16, className }: IconProps) {
+  return (
+    <LucideSvg size={size} className={className}>
+      <path d="M8 2v4" />
+      <path d="M16 2v4" />
+      <rect width="18" height="18" x="3" y="4" rx="2" />
+      <path d="M3 10h18" />
+    </LucideSvg>
+  );
+}
+
 /** 참고 사이트 lucide `plus` */
 export function PlusIcon({ size = 16, className }: IconProps) {
  return (
--- a/frontend/src/components/dashboard/HubColumn.tsx
+++ b/frontend/src/components/dashboard/HubColumn.tsx
@@ -1,19 +1,23 @@
 import { createPortal } from 'react-dom';
-import { useState } from 'react';
-import { useDroppable } from '@dnd-kit/core';
+import { useMemo, useState } from 'react';
+import { useQueryClient } from '@tanstack/react-query';
 import type { Task } from '../../types';
+import { apiClient, getApiErrorMessage } from '../../lib/apiClient';
 import { useHubConfig, type HubConfig, type HubScheduleItem } from '../../lib/hubConfig';
+import { useRoutineCategoryMilestones } from '../../hooks/useRoutineCategoryMilestones';
 import { quarterDateBounds, sortScheduleItems, todayIso } from '../../lib/hubSchedule';
 import { HubScheduleCarousel } from './HubScheduleCarousel';
+import { HubRoutineFocusPanel } from './HubRoutineFocusPanel';
 import { ContextMenu } from '../common/ContextMenu';
+import { routineCategoryShellPayload } from '../../lib/taskFormPayload';

-interface HubColumnProps {
-  routineTasks: Task[];
-  quarter?: string;
-  onSelectRoutine?: (task: Task) => void;
-}
+import {
+  ROUTINE_CATEGORIES,
+  pickRoutineCategoryTask,
+  type RoutineCategory,
+} from '../../lib/routineCategories';

-type HubEditSection = 'slogan' | 'routine' | 'schedule';
+type HubEditSection = 'schedule';

 function ModalShell({
  title,
@@ -53,96 +57,6 @@ function ModalShell({
  );
 }

-function SloganEditModal({
-  config,
-  onSave,
-  onClose,
-}: {
-  config: HubConfig;
-  onSave: (patch: Pick<HubConfig, 'sloganTitle' | 'sloganLines'>) => void;
-  onClose: () => void;
-}) {
-  const [title, setTitle] = useState(config.sloganTitle);
-  const [lines, setLines] = useState(config.sloganLines.join('\n'));
-
-  return (
-    <ModalShell
-      title="분기 슬로건 수정"
-      onClose={onClose}
-      onSubmit={(e) => {
-        e.preventDefault();
-        onSave({ sloganTitle: title.trim() || '분기 슬로건', sloganLines: lines.split('\n') });
-        onClose();
-      }}
-    >
-      <div>
-        <label className="block text-sm font-bold text-gray-500 mb-1.5">제목</label>
-        <input
-          value={title}
-          onChange={(e) => setTitle(e.target.value)}
-          className="w-full border border-gray-200 rounded-xl px-4 py-2.5 outline-none focus:border-emerald-400"
-        />
-      </div>
-      <div>
-        <label className="block text-sm font-bold text-gray-500 mb-1.5">내용 (줄마다 Enter)</label>
-        <textarea
-          rows={5}
-          value={lines}
-          onChange={(e) => setLines(e.target.value)}
-          className="w-full border border-gray-200 rounded-xl px-4 py-2.5 outline-none focus:border-emerald-400 resize-y"
-        />
-      </div>
-    </ModalShell>
-  );
-}
-
-function RoutineEditModal({
-  config,
-  hasRoutineTasks,
-  onSave,
-  onClose,
-}: {
-  config: HubConfig;
-  hasRoutineTasks: boolean;
-  onSave: (patch: Pick<HubConfig, 'routineLabels'>) => void;
-  onClose: () => void;
-}) {
-  const [labels, setLabels] = useState(config.routineLabels.join(', '));
-
-  return (
-    <ModalShell
-      title="상시업무 수정"
-      onClose={onClose}
-      onSubmit={(e) => {
-        e.preventDefault();
-        onSave({
-          routineLabels: labels
-            .split(',')
-            .map((s) => s.trim())
-            .filter(Boolean)
-            .slice(0, 6),
-        });
-        onClose();
-      }}
-    >
-      {hasRoutineTasks && (
-        <p className="text-sm text-gray-500 leading-relaxed">
-          등록된 기반업무가 있으면 다이아몬드에 업무 제목이 우선 표시됩니다. 아래 라벨은 빈 칸·업무 없을 때 사용됩니다.
-        </p>
-      )}
-      <div>
-        <label className="block text-sm font-bold text-gray-500 mb-1.5">표시 라벨 (쉼표 구분, 최대 6개)</label>
-        <input
-          value={labels}
-          onChange={(e) => setLabels(e.target.value)}
-          className="w-full border border-gray-200 rounded-xl px-4 py-2.5 outline-none focus:border-emerald-400"
-          placeholder="채용, 교육, 소통, 시설, 자산, 행정"
-        />
-      </div>
-    </ModalShell>
-  );
-}
-
 function ScheduleEditModal({
  config,
  quarter,
@@ -243,101 +157,84 @@ function openSectionContextMenu(
  setCtxMenu({ x: e.clientX, y: e.clientY, section });
 }

-export function HubColumn({ routineTasks, quarter = '2026-Q2', onSelectRoutine }: HubColumnProps) {
+interface HubColumnProps {
+  routineTasks: Task[];
+  quarter?: string;
+  referenceDate?: Date;
+  onSelectRoutine?: (task: Task) => void;
+  onSelectRoutineMilestone?: (taskId: string, milestoneId: string) => void;
+}
+
+export function HubColumn({
+  routineTasks,
+  quarter = '2026-Q2',
+  referenceDate,
+  onSelectRoutine,
+  onSelectRoutineMilestone,
+}: HubColumnProps) {
  const { config, setConfig } = useHubConfig();
+  const queryClient = useQueryClient();
  const [editSection, setEditSection] = useState<HubEditSection | null>(null);
  const [ctxMenu, setCtxMenu] = useState<{ x: number; y: number; section: HubEditSection } | null>(null);
-  const { setNodeRef: setRoutineDropRef, isOver: isRoutineOver } = useDroppable({
-    id: 'drop::routine::hub',
-  });
+  const [routineOpening, setRoutineOpening] = useState(false);
+  const [activeCategoryIndex, setActiveCategoryIndex] = useState(0);

-  const routineLabels =
-    routineTasks.length > 0
-      ? routineTasks.slice(0, 6).map((t) => ({ label: t.title, task: t }))
-      : config.routineLabels.map((label) => ({ label, task: null as Task | null }));
+  const categoryFocus = useRoutineCategoryMilestones(routineTasks);
+
+  const hubSlots = useMemo((): { task: Task | null; label: RoutineCategory }[] => {
+    return ROUTINE_CATEGORIES.map((label) => ({
+      label,
+      task: pickRoutineCategoryTask(routineTasks, label),
+    }));
+  }, [routineTasks]);
+
+  const openRoutineCategory = async (label: RoutineCategory, task: Task | null) => {
+    if (routineOpening) return;
+    if (task) {
+      onSelectRoutine?.(task);
+      return;
+    }
+    setRoutineOpening(true);
+    try {
+      const { data: created } = await apiClient.post<Task>(
+        '/tasks',
+        routineCategoryShellPayload(label, quarter),
+      );
+      await queryClient.invalidateQueries({ queryKey: ['tasks'] });
+      onSelectRoutine?.(created);
+    } catch (err: unknown) {
+      alert(getApiErrorMessage(err, `"${label}" 업무를 준비하지 못했습니다.`));
+    } finally {
+      setRoutineOpening(false);
+    }
+  };
+
+  const handleFocusMilestoneClick = async (milestoneId: string) => {
+    const entry = categoryFocus[activeCategoryIndex];
+    const label = ROUTINE_CATEGORIES[activeCategoryIndex];
+    if (entry?.task) {
+      onSelectRoutineMilestone?.(entry.task.id, milestoneId);
+      return;
+    }
+    if (routineOpening) return;
+    setRoutineOpening(true);
+    try {
+      const { data: created } = await apiClient.post<Task>(
+        '/tasks',
+        routineCategoryShellPayload(label, quarter),
+      );
+      await queryClient.invalidateQueries({ queryKey: ['tasks'] });
+      onSelectRoutineMilestone?.(created.id, milestoneId);
+    } catch (err: unknown) {
+      alert(getApiErrorMessage(err, `"${label}" 업무를 준비하지 못했습니다.`));
+    } finally {
+      setRoutineOpening(false);
+    }
+  };

  return (
    <>
      <div className="hub-column" id="hub-column">
-        <div
-          className="hub-box hub-box--message"
-          onContextMenu={(e) => openSectionContextMenu(e, 'slogan', setCtxMenu)}
-        >
-          <div className="hub-postit-stack">
-            <div className="hub-postit-sheet hub-postit-sheet--back" aria-hidden="true" />
-            <div className="hub-postit-sheet hub-postit-sheet--front">
-              <span className="hub-postit-pin" aria-hidden="true" />
-              <span className="hub-postit-fold" aria-hidden="true" />
-              <div className="hub-postit-content">
-                <div className="hub-postit-header">
-                  <div className="hub-box-title-row">
-                    <span className="hub-message-icon" aria-hidden="true">
-                      <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-                        <path d="M12 4v5" />
-                        <path d="M12 15v5" />
-                        <path d="M4 12h5" />
-                        <path d="M15 12h5" />
-                        <path d="M18 5v2" />
-                        <path d="M17 6h2" />
-                        <path d="M5 17v2" />
-                        <path d="M4 18h2" />
-                      </svg>
-                    </span>
-                    <div className="board-project-title">{config.sloganTitle}</div>
-                  </div>
-                </div>
-                <div className="hub-postit-message">
-                  {config.sloganLines.filter(Boolean).map((line, i) => (
-                    <p key={i} className="board-project-desc">
-                      {line}
-                    </p>
-                  ))}
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <div
-          className="hub-diamond-wrap"
-          id="hub-diamond-wrap"
-          onContextMenu={(e) => openSectionContextMenu(e, 'routine', setCtxMenu)}
-        >
-          <div
-            ref={setRoutineDropRef}
-            className={`hub-diamond ${isRoutineOver ? 'is-over' : ''}`}
-            id="hub-diamond"
-          >
-            <div className="hub-diamond-inner">
-              <div className="hub-diamond-head">
-                <span className="hub-diamond-icon" aria-hidden="true">
-                  <svg viewBox="0 0 24 24">
-                    <path d="m17 2 4 4-4 4" />
-                    <path d="M3 11v-1a4 4 0 0 1 4-4h14" />
-                    <path d="m7 22-4-4 4-4" />
-                    <path d="M21 13v1a4 4 0 0 1-4 4H3" />
-                  </svg>
-                </span>
-                <div className="board-project-title">상시업무</div>
-              </div>
-              <div className="hub-diamond-divider" aria-hidden="true" />
-              <div className="hub-routine-grid">
-                {routineLabels.map(({ label, task }, i) => (
-                  <button
-                    key={task?.id ?? `label-${i}`}
-                    type="button"
-                    className="hub-routine-item"
-                    onClick={() => task && onSelectRoutine?.(task)}
-                    onContextMenu={(e) => e.stopPropagation()}
-                  >
-                    {label}
-                  </button>
-                ))}
-              </div>
-            </div>
-          </div>
-        </div>
-
        <div
          className="hub-box hub-box--focus"
          onContextMenu={(e) => openSectionContextMenu(e, 'schedule', setCtxMenu)}
@@ -354,9 +251,53 @@ export function HubColumn({ routineTasks, quarter = '2026-Q2', onSelectRoutine }
              </span>
              <div className="board-project-title">{config.scheduleTitle}</div>
            </div>
-            <HubScheduleCarousel items={config.scheduleItems} />
+            <HubScheduleCarousel items={config.scheduleItems} focusDate={referenceDate} />
          </div>
        </div>
+
+        <div className="hub-diamond-wrap" id="hub-diamond-wrap">
+          <div className="hub-diamond" id="hub-diamond">
+            <div className="hub-diamond-inner">
+              <div className="hub-diamond-head">
+                <span className="hub-diamond-icon" aria-hidden="true">
+                  <svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
+                    <path d="M21 12a9 9 0 0 0-9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" />
+                    <path d="M3 3v5h5" />
+                    <path d="M3 12a9 9 0 0 0 9 9 9.75 9.75 0 0 0 6.74-2.74L21 16" />
+                    <path d="M21 21 v-5 h-5" />
+                  </svg>
+                </span>
+                <div className="board-project-title">상시업무</div>
+              </div>
+              <div className="hub-diamond-divider" aria-hidden="true" />
+              <div className="hub-routine-grid">
+                {hubSlots.map(({ label, task }, i) => (
+                  <button
+                    key={task?.id ?? `cat-${i}`}
+                    type="button"
+                    className={`hub-routine-item${activeCategoryIndex === i ? ' is-active' : ''}`}
+                    disabled={routineOpening}
+                    onMouseEnter={() => setActiveCategoryIndex(i)}
+                    onFocus={() => setActiveCategoryIndex(i)}
+                    onClick={() => openRoutineCategory(label, task)}
+                    onContextMenu={(e) => e.stopPropagation()}
+                  >
+                    {label}
+                  </button>
+                ))}
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div className="hub-box hub-box--message hub-box--routine-focus">
+          <HubRoutineFocusPanel
+            activeIndex={activeCategoryIndex}
+            onActiveIndexChange={setActiveCategoryIndex}
+            categories={categoryFocus}
+            onSelectMilestone={handleFocusMilestoneClick}
+          />
+        </div>
      </div>

      {ctxMenu && (
@@ -364,31 +305,14 @@ export function HubColumn({ routineTasks, quarter = '2026-Q2', onSelectRoutine }
          x={ctxMenu.x}
          y={ctxMenu.y}
          onClose={() => setCtxMenu(null)}
-          items={[
-            {
-              icon: '✏',
-              label: '수정',
-              onClick: () => setEditSection(ctxMenu.section),
-            },
-          ]}
+          items={[{
+            icon: '✏',
+            label: '수정',
+            onClick: () => setEditSection(ctxMenu.section),
+          }]}
        />
      )}

-      {editSection === 'slogan' && (
-        <SloganEditModal
-          config={config}
-          onSave={(patch) => setConfig((prev) => ({ ...prev, ...patch }))}
-          onClose={() => setEditSection(null)}
-        />
-      )}
-      {editSection === 'routine' && (
-        <RoutineEditModal
-          config={config}
-          hasRoutineTasks={routineTasks.length > 0}
-          onSave={(patch) => setConfig((prev) => ({ ...prev, ...patch }))}
-          onClose={() => setEditSection(null)}
-        />
-      )}
      {editSection === 'schedule' && (
        <ScheduleEditModal
          config={config}
--- a/frontend/src/components/dashboard/HubFocusTaskList.tsx
+++ b/frontend/src/components/dashboard/HubFocusTaskList.tsx
@@ -0,0 +1,117 @@
+import { useEffect, useMemo, useRef, useState } from 'react';
+
+import type { RoutineFocusMilestone } from '../../hooks/useRoutineCategoryMilestones';
+
+const PAGE_SIZE = 3;
+
+function chunkItems<T>(items: T[], size: number): T[][] {
+  const pages: T[][] = [];
+  for (let i = 0; i < items.length; i += size) {
+    pages.push(items.slice(i, i + size));
+  }
+  return pages;
+}
+
+type HubFocusTaskListProps = {
+  milestones: RoutineFocusMilestone[];
+  isLoading: boolean;
+  categoryKey: string;
+  onSelectMilestone?: (milestoneId: string) => void;
+};
+
+export function HubFocusTaskList({
+  milestones,
+  isLoading,
+  categoryKey,
+  onSelectMilestone,
+}: HubFocusTaskListProps) {
+  const rootRef = useRef<HTMLDivElement | null>(null);
+  const pages = useMemo(() => chunkItems(milestones, PAGE_SIZE), [milestones]);
+  const pageCount = pages.length;
+  const paged = pageCount > 1;
+  const [pageIndex, setPageIndex] = useState(0);
+
+  useEffect(() => {
+    setPageIndex(0);
+  }, [categoryKey]);
+
+  useEffect(() => {
+    setPageIndex((prev) => Math.min(prev, Math.max(0, pageCount - 1)));
+  }, [pageCount]);
+
+  useEffect(() => {
+    const root = rootRef.current;
+    if (!root || !paged) return;
+
+    const onWheel = (event: WheelEvent) => {
+      if (Math.abs(event.deltaY) < 1) return;
+      event.preventDefault();
+      const direction = event.deltaY > 0 ? 1 : -1;
+      setPageIndex((prev) => Math.min(pageCount - 1, Math.max(0, prev + direction)));
+    };
+
+    root.addEventListener('wheel', onWheel, { passive: false });
+    return () => root.removeEventListener('wheel', onWheel);
+  }, [paged, pageCount]);
+
+  if (isLoading) {
+    return (
+      <div className="hub-focus-task-list">
+        <div className="hub-focus-task-viewport">
+          <ul className="hub-focus-task-page">
+            <li className="hub-focus-task-slot hub-focus-task-slot--message">
+              <span className="hub-focus-task-empty board-project-desc">불러오는 중…</span>
+            </li>
+          </ul>
+        </div>
+      </div>
+    );
+  }
+
+  if (milestones.length === 0) {
+    return (
+      <div className="hub-focus-task-list">
+        <div className="hub-focus-task-viewport">
+          <ul className="hub-focus-task-page">
+            <li className="hub-focus-task-slot hub-focus-task-slot--message">
+              <span className="hub-focus-task-empty board-project-desc">등록된 업무명 없음</span>
+            </li>
+          </ul>
+        </div>
+      </div>
+    );
+  }
+
+  const pageItems = pages[pageIndex] ?? [];
+
+  return (
+    <div
+      ref={rootRef}
+      className={`hub-focus-task-list${paged ? ' is-paged' : ''}`}
+    >
+      <div className="hub-focus-task-viewport">
+        <ul className="hub-focus-task-page" aria-live="polite">
+          {pageItems.map((milestone) => (
+            <li key={milestone.id} className="hub-focus-task-slot">
+              <button
+                type="button"
+                className="hub-focus-task-item board-project-desc"
+                onClick={() => onSelectMilestone?.(milestone.id)}
+              >
+                {milestone.title}
+              </button>
+            </li>
+          ))}
+          {pageItems.length < PAGE_SIZE &&
+            Array.from({ length: PAGE_SIZE - pageItems.length }, (_, slot) => (
+              <li
+                key={`empty-${pageIndex}-${slot}`}
+                className="hub-focus-task-slot hub-focus-task-slot--empty"
+                aria-hidden="true"
+              />
+            ))}
+        </ul>
+      </div>
+    </div>
+  );
+}
--- a/frontend/src/components/dashboard/HubRoutineFocusPanel.tsx
+++ b/frontend/src/components/dashboard/HubRoutineFocusPanel.tsx
@@ -0,0 +1,79 @@
+import { HubNavChevron } from '../common/HubNavChevron';
+import { HubFocusTaskList } from './HubFocusTaskList';
+import { ROUTINE_CATEGORIES } from '../../lib/routineCategories';
+import type { RoutineCategoryFocus } from '../../hooks/useRoutineCategoryMilestones';
+
+interface HubRoutineFocusPanelProps {
+  activeIndex: number;
+  onActiveIndexChange: (index: number) => void;
+  categories: RoutineCategoryFocus[];
+  onSelectMilestone?: (milestoneId: string) => void;
+}
+
+export function HubRoutineFocusPanel({
+  activeIndex,
+  onActiveIndexChange,
+  categories,
+  onSelectMilestone,
+}: HubRoutineFocusPanelProps) {
+  const safeIndex = Math.max(0, Math.min(activeIndex, ROUTINE_CATEGORIES.length - 1));
+  const active = categories[safeIndex];
+  const canPrev = safeIndex > 0;
+  const canNext = safeIndex < ROUTINE_CATEGORIES.length - 1;
+
+  const stepPrev = () => {
+    if (canPrev) onActiveIndexChange(safeIndex - 1);
+  };
+
+  const stepNext = () => {
+    if (canNext) onActiveIndexChange(safeIndex + 1);
+  };
+
+  return (
+    <div className="hub-routine-focus">
+      <div className="hub-focus-dots" role="tablist" aria-label="상시업무 대분류">
+        {ROUTINE_CATEGORIES.map((label, index) => (
+          <button
+            key={label}
+            type="button"
+            role="tab"
+            aria-selected={index === safeIndex}
+            aria-label={label}
+            title={label}
+            className={`hub-focus-dot${index === safeIndex ? ' is-active' : ''}`}
+            onClick={() => onActiveIndexChange(index)}
+          />
+        ))}
+      </div>
+
+      <div className="hub-routine-focus-body">
+        <button
+          type="button"
+          className="hub-routine-focus-nav hub-routine-focus-nav--prev"
+          disabled={!canPrev}
+          onClick={stepPrev}
+          aria-label="이전 대분류"
+        >
+          <HubNavChevron direction="prev" />
+        </button>
+
+        <HubFocusTaskList
+          milestones={active?.milestones ?? []}
+          isLoading={!!active?.isLoading}
+          categoryKey={ROUTINE_CATEGORIES[safeIndex]}
+          onSelectMilestone={onSelectMilestone}
+        />
+
+        <button
+          type="button"
+          className="hub-routine-focus-nav hub-routine-focus-nav--next"
+          disabled={!canNext}
+          onClick={stepNext}
+          aria-label="다음 대분류"
+        >
+          <HubNavChevron direction="next" />
+        </button>
+      </div>
+    </div>
+  );
+}
--- a/frontend/src/components/dashboard/HubScheduleCarousel.tsx
+++ b/frontend/src/components/dashboard/HubScheduleCarousel.tsx
@@ -1,8 +1,9 @@
-import { useEffect, useMemo, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import type { HubScheduleItem } from '../../lib/hubConfig';
+import { HubNavChevron } from '../common/HubNavChevron';
 import {
  findScheduleIndexForToday,
-  formatScheduleDateLabel,
+  formatScheduleDateParts,
  isSchedulePast,
  isScheduleToday,
  scheduleWindowStart,
@@ -13,18 +14,22 @@ const VISIBLE_COUNT = 3;

 interface HubScheduleCarouselProps {
  items: HubScheduleItem[];
+  /** 기준일 — 없으면 오늘 */
+  focusDate?: Date;
 }

-export function HubScheduleCarousel({ items }: HubScheduleCarouselProps) {
+export function HubScheduleCarousel({ items, focusDate }: HubScheduleCarouselProps) {
+  const rootRef = useRef<HTMLDivElement | null>(null);
+  const focus = focusDate ?? new Date();
  const sorted = useMemo(
    () => sortScheduleItems(items.filter((i) => i.date && i.text.trim())),
    [items],
  );

-  const todayIndex = useMemo(() => findScheduleIndexForToday(sorted), [sorted]);
+  const focusIndex = useMemo(() => findScheduleIndexForToday(sorted, focus), [sorted, focus]);
  const initialStart = useMemo(
-    () => scheduleWindowStart(sorted.length, todayIndex, VISIBLE_COUNT),
-    [sorted.length, todayIndex],
+    () => scheduleWindowStart(sorted.length, focusIndex, VISIBLE_COUNT),
+    [sorted.length, focusIndex],
  );
  const [startIndex, setStartIndex] = useState(initialStart);

@@ -32,6 +37,32 @@ export function HubScheduleCarousel({ items }: HubScheduleCarouselProps) {
    setStartIndex(initialStart);
  }, [initialStart, sorted.length]);

+  const maxStart = Math.max(0, sorted.length - VISIBLE_COUNT);
+  const paged = sorted.length > VISIBLE_COUNT;
+  const canPrev = startIndex > 0;
+  const canNext = startIndex < maxStart;
+
+  const stepPrev = () => setStartIndex((i) => Math.max(0, i - VISIBLE_COUNT));
+  const stepNext = () => setStartIndex((i) => Math.min(maxStart, i + VISIBLE_COUNT));
+
+  useEffect(() => {
+    const root = rootRef.current;
+    if (!root || !paged) return;
+
+    const onWheel = (event: WheelEvent) => {
+      if (Math.abs(event.deltaY) < 1) return;
+      event.preventDefault();
+      if (event.deltaY > 0) {
+        setStartIndex((i) => Math.min(maxStart, i + VISIBLE_COUNT));
+      } else {
+        setStartIndex((i) => Math.max(0, i - VISIBLE_COUNT));
+      }
+    };
+
+    root.addEventListener('wheel', onWheel, { passive: false });
+    return () => root.removeEventListener('wheel', onWheel);
+  }, [paged, maxStart]);
+
  if (sorted.length === 0) {
    return (
      <div className="hub-schedule-viewport hub-schedule-viewport--empty">
@@ -40,56 +71,64 @@ export function HubScheduleCarousel({ items }: HubScheduleCarouselProps) {
    );
  }

-  const maxStart = Math.max(0, sorted.length - VISIBLE_COUNT);
-  const canPrev = startIndex > 0;
-  const canNext = startIndex < maxStart;
-
-  const stepPrev = () => setStartIndex((i) => Math.max(0, i - VISIBLE_COUNT));
-  const stepNext = () => setStartIndex((i) => Math.min(maxStart, i + VISIBLE_COUNT));
-
  const visible = sorted.slice(startIndex, startIndex + VISIBLE_COUNT);

  return (
-    <div className="hub-schedule-viewport">
-      <button
-        type="button"
-        className="hub-schedule-nav hub-schedule-nav--prev"
-        disabled={!canPrev}
-        onClick={stepPrev}
-        onContextMenu={(e) => e.stopPropagation()}
-        aria-label="이전 일정"
-      >
-        ‹
-      </button>
+    <div
+      ref={rootRef}
+      className={`hub-schedule-carousel${paged ? ' is-paged' : ''}`}
+    >
+      <div className="hub-schedule-viewport">
+        <ul className="hub-schedule-list hub-list">
+          {visible.map((item) => {
+            const past = isSchedulePast(item.date, focus);
+            const today = isScheduleToday(item.date, focus);
+            const dateParts = formatScheduleDateParts(item.date);
+            return (
+              <li
+                key={item.id}
+                className={`hub-schedule-item${past ? ' hub-schedule-item--past' : ''}${today ? ' hub-schedule-item--today' : ''}`}
+              >
+                <span className="hub-schedule-date board-project-desc">
+                  {dateParts ? (
+                    <>
+                      <span className="hub-schedule-date-month">{dateParts.month}</span>
+                      <span className="hub-schedule-date-day">{dateParts.day}</span>
+                    </>
+                  ) : (
+                    item.date
+                  )}
+                </span>
+                <span className="board-project-desc">{item.text}</span>
+              </li>
+            );
+          })}
+        </ul>
+      </div>

-      <ul className="hub-schedule-list hub-list">
-        {visible.map((item) => {
-          const past = isSchedulePast(item.date);
-          const today = isScheduleToday(item.date);
-          return (
-            <li
-              key={item.id}
-              className={`hub-schedule-item${past ? ' hub-schedule-item--past' : ''}${today ? ' hub-schedule-item--today' : ''}`}
-            >
-              <span className="hub-schedule-date board-project-desc">
-                {formatScheduleDateLabel(item.date)}
-              </span>
-              <span className="board-project-desc">{item.text}</span>
-            </li>
-          );
-        })}
-      </ul>
+      {canPrev && (
+        <button
+          type="button"
+          className="hub-schedule-nav hub-schedule-nav--prev"
+          onClick={stepPrev}
+          onContextMenu={(e) => e.stopPropagation()}
+          aria-label="이전 일정"
+        >
+          <HubNavChevron direction="prev" />
+        </button>
+      )}

-      <button
-        type="button"
-        className="hub-schedule-nav hub-schedule-nav--next"
-        disabled={!canNext}
-        onClick={stepNext}
-        onContextMenu={(e) => e.stopPropagation()}
-        aria-label="다음 일정"
-      >
-        ›
-      </button>
+      {canNext && (
+        <button
+          type="button"
+          className="hub-schedule-nav hub-schedule-nav--next"
+          onClick={stepNext}
+          onContextMenu={(e) => e.stopPropagation()}
+          aria-label="다음 일정"
+        >
+          <HubNavChevron direction="next" />
+        </button>
+      )}
    </div>
  );
 }
--- a/frontend/src/components/dashboard/MemberTaskTooltip.tsx
+++ b/frontend/src/components/dashboard/MemberTaskTooltip.tsx
@@ -16,7 +16,7 @@ export function MemberTaskTooltip({
  activeProjectId,
  onProjectClick,
 }: MemberTaskTooltipProps) {
-  const memberTasks = getMemberTasks(memberId, tasks);
+  const memberTasks = getMemberTasks(memberId, tasks, 'project');
  if (memberTasks.length === 0) return null;

  return (
--- a/frontend/src/components/dashboard/QuarterStatusBoard.tsx
+++ b/frontend/src/components/dashboard/QuarterStatusBoard.tsx
@@ -0,0 +1,188 @@
+type DeptKey = 'hrm' | 'hrd' | 'ex' | 'ga';
+
+interface ProjectItem {
+  name: string;
+  period: string;
+  summary: string;
+  progress: number;
+}
+
+interface DeptBlock {
+  key: DeptKey;
+  icon: string;
+  name: string;
+  code: string;
+  projects: ProjectItem[];
+}
+
+const DUMMY_DEPARTMENTS: DeptBlock[] = [
+  {
+    key: 'hrm',
+    icon: '👥',
+    name: '인사관리',
+    code: 'HRM',
+    projects: [
+      {
+        name: '상반기 채용 운영',
+        period: '2026.04 ~ 2026.06',
+        summary: '채용공고, 서류검토, 면접, 사후협의 진행',
+        progress: 75,
+      },
+      {
+        name: '평가제도 개선',
+        period: '2026.03 ~ 2026.07',
+        summary: '평가항목 정비, 부서 의견수렴, 피드백 방식 개선',
+        progress: 60,
+      },
+    ],
+  },
+  {
+    key: 'hrd',
+    icon: '📚',
+    name: '인재육성',
+    code: 'HRD',
+    projects: [
+      {
+        name: '신규입사자 온보딩 프로그램',
+        period: '2026.04 ~ 2026.06',
+        summary: '신규입사자 교육, 조직 적응 프로그램 운영',
+        progress: 85,
+      },
+      {
+        name: '팀장 리더십 교육',
+        period: '2026.05 ~ 2026.06',
+        summary: '팀장 대상 리더십·코칭·피드백 교육 실시',
+        progress: 100,
+      },
+    ],
+  },
+  {
+    key: 'ex',
+    icon: '🤝',
+    name: '조직문화',
+    code: 'EX',
+    projects: [
+      {
+        name: '조직문화 진단',
+        period: '2026.04 ~ 2026.05',
+        summary: '만족도 조사, 직원 의견수렴, 개선과제 도출',
+        progress: 100,
+      },
+      {
+        name: '복리후생제도 개선',
+        period: '2026.05 ~ 2026.08',
+        summary: '복지제도 이용현황 분석, 개선안 검토',
+        progress: 50,
+      },
+    ],
+  },
+  {
+    key: 'ga',
+    icon: '🏢',
+    name: '총무관리',
+    code: 'GA',
+    projects: [
+      {
+        name: '사무공간 재배치',
+        period: '2026.04 ~ 2026.07',
+        summary: '좌석 재배치, 회의실 운영 개선',
+        progress: 70,
+      },
+      {
+        name: '안전·보안 점검 강화',
+        period: '2026.04 ~ 2026.06',
+        summary: '출입통제, 보안카드, 시설안전, 소방점검 관리',
+        progress: 85,
+      },
+    ],
+  },
+];
+
+const HUB_MESSAGE = '인사·육성·문화·총무 개선과제 정상 추진';
+
+const ROUTINE_ITEMS = ['채용 운영', '교육 운영', '직원 소통', '자산·시설 관리', '문서·행정 지원'];
+
+const FOCUS_ITEMS = ['핵심직무 채용 완료', '복지제도 개선안 확정', '안전보안 점검 강화'];
+
+function deptByKey(key: DeptKey): DeptBlock {
+  return DUMMY_DEPARTMENTS.find((d) => d.key === key)!;
+}
+
+function DeptCard({ dept }: { dept: DeptBlock }) {
+  return (
+    <section className={`qboard-dept-card qboard-dept-card--${dept.key}`}>
+      <div className="qboard-dept-head">
+        <div className={`qboard-dept-icon qboard-dept-icon--${dept.key}`}>{dept.icon}</div>
+        <h2 className="qboard-dept-name">
+          {dept.name}
+          <span>{dept.code}</span>
+        </h2>
+      </div>
+      {dept.projects.map((project) => (
+        <article key={project.name} className="qboard-project-block">
+          <div className="qboard-project-fields">
+            <p className="qboard-field-row">
+              <span className="qboard-field-label">프로젝트명</span>
+              <span className="qboard-field-value">{project.name}</span>
+            </p>
+            <p className="qboard-field-row">
+              <span className="qboard-field-label">기간</span>
+              <span className="qboard-field-value">{project.period}</span>
+            </p>
+            <p className="qboard-field-row">
+              <span className="qboard-field-label">주요 내용</span>
+              <span className="qboard-field-value">{project.summary}</span>
+            </p>
+          </div>
+          <div className={`qboard-progress-ring qboard-progress-ring--${dept.key}`}>{project.progress}%</div>
+        </article>
+      ))}
+    </section>
+  );
+}
+
+function CenterHub() {
+  return (
+    <aside className="qboard-hub">
+      <div className="qboard-hub-box qboard-hub-box--message">
+        <div className="qboard-hub-box-title">📢 분기 핵심 메시지</div>
+        <p className="qboard-hub-box-text">{HUB_MESSAGE}</p>
+      </div>
+
+      <div className="qboard-hub-diamond">
+        <div className="qboard-hub-diamond-title">상시업무</div>
+        <ul>
+          {ROUTINE_ITEMS.map((item) => (
+            <li key={item}>{item}</li>
+          ))}
+        </ul>
+      </div>
+
+      <div className="qboard-hub-box qboard-hub-box--focus">
+        <div className="qboard-hub-box-title">🎯 다음 분기 중점관리</div>
+        <ul>
+          {FOCUS_ITEMS.map((item) => (
+            <li key={item}>{item}</li>
+          ))}
+        </ul>
+      </div>
+    </aside>
+  );
+}
+
+export function QuarterStatusBoard() {
+  return (
+    <div className="qboard-wrap">
+      <h1 className="qboard-page-title">2026년 2분기 인사총무 프로젝트 현황 Dashboard</h1>
+      <p className="qboard-page-subtitle">인사관리(HRM) · 인재육성(HRD) · 조직문화(EX) · 총무관리(GA)</p>
+
+      <div className="qboard-layout">
+        <DeptCard dept={deptByKey('hrm')} />
+        <DeptCard dept={deptByKey('hrd')} />
+        <CenterHub />
+        <DeptCard dept={deptByKey('ex')} />
+        <DeptCard dept={deptByKey('ga')} />
+      </div>
+    </div>
+  );
+}
--- a/frontend/src/components/dashboard/TaskCard.tsx
+++ b/frontend/src/components/dashboard/TaskCard.tsx
@@ -5,6 +5,8 @@ import type { DraggableAttributes } from '@dnd-kit/core';
 import type { SyntheticListenerMap } from '@dnd-kit/core/dist/hooks/utilities';
 import type { Task } from '../../types';
 import { DonutGauge } from './DonutGauge';
+import { getProjectTitleStatusClass } from '../../lib/taskStatusVisual';
+import { getVisibleIssueEntries } from '../../lib/taskIssues';

 function fmtDate(iso: string | null | undefined): string {
  if (!iso) return '';
@@ -125,6 +127,7 @@ export function TaskCard({
  const dateRange = fmtDateRange(task);
  const descLine = task.showDescription ? firstDescriptionLine(task.description) : '';
  const showProgress = task.showProgress !== false;
+  const visibleIssues = getVisibleIssueEntries(task);

  return (
    <article
@@ -138,10 +141,12 @@ export function TaskCard({
    >
      <div className="project-sub-body">
        <div className="project-fields">
-          <div className="project-sub-title">{task.title}</div>
+          <div className={`project-sub-title ${getProjectTitleStatusClass(task)}`}>
+            <span className="project-sub-title-text">{task.title}</span>
+          </div>
          {dateRange && (
            <div className="project-field">
-              <span className="project-field-label">작업 기간</span>
+              <span className="project-field-label">수행 기간</span>
              <span className="project-field-value">{dateRange}</span>
            </div>
          )}
@@ -151,19 +156,31 @@ export function TaskCard({
              <span className="project-field-value">{descLine}</span>
            </div>
          )}
-          {task.showIssue && task.issueNote && (
-            <div className="project-field">
-              <span className="project-field-label">이슈</span>
-              <span className="project-field-value" style={{ color: '#c0392b' }}>
-                {task.issueNote}
+          {visibleIssues.map((entry) => (
+            <div key={entry.id} className="project-field project-field--issue">
+              <span className="project-issue-icon" aria-label="이슈" title="이슈">
+                <svg viewBox="0 0 24 24" aria-hidden="true">
+                  <path d="M12 7v6" />
+                  <path d="M12 17h.01" />
+                </svg>
              </span>
+              <span className="project-field-value project-field-value--issue">{entry.text}</span>
+            </div>
+          ))}
+          {visibleIssues.length === 0 && (
+            <div className="project-field project-field--issue project-field--issue-reserved" aria-hidden="true">
+              <span className="project-issue-icon" />
+              <span className="project-field-value project-field-value--issue">&nbsp;</span>
            </div>
          )}
        </div>
        {showProgress && (
-          <div className="progress-col">
-            <DonutGauge task={task} />
-          </div>
+          <>
+            <div className="project-sub-divider" aria-hidden="true" />
+            <div className="progress-col">
+              <DonutGauge task={task} />
+            </div>
+          </>
        )}
      </div>
    </article>
--- a/frontend/src/components/dashboard/TaskManager.tsx
+++ b/frontend/src/components/dashboard/TaskManager.tsx
@@ -7,6 +7,7 @@ import type { TaskFormData } from '../common/TaskModal';
 import type { Task, TeamMember } from '../../types';
 import { isProjectTask, isRoutineTask } from '../../lib/taskType';
 import { taskFormToApiPayload } from '../../lib/taskFormPayload';
+import { invalidateTaskCaches } from '../../lib/taskQueryCache';

 const STATUS_LABEL: Record<string, string> = {
  IN_PROGRESS: '진행', REVIEW: '보류', TODO: '대기', DONE: '완료', CANCELLED: '취소',
@@ -43,7 +44,7 @@ export function TaskManager({ tasks, sectionOptions, quarter, teamMembers = [],
  const patch = useMutation({
    mutationFn: ({ id, data }: { id: string; data: Record<string, unknown> }) =>
      apiClient.patch(`/tasks/${id}`, data),
-    onSuccess: () => queryClient.invalidateQueries({ queryKey: ['tasks'] }),
+    onSuccess: (_data, { id }) => invalidateTaskCaches(queryClient, id),
  });
  const remove = useMutation({
    mutationFn: (id: string) => apiClient.delete(`/tasks/${id}`),
--- a/frontend/src/components/detail/DocxPreview.tsx
+++ b/frontend/src/components/detail/DocxPreview.tsx
@@ -0,0 +1,59 @@
+import { useEffect, useRef } from 'react';
+import { renderAsync } from 'docx-preview';
+import { useFileArrayBuffer } from '../../hooks/useFileBuffer';
+import { FilePreviewFallback } from './FilePreviewFallback';
+
+interface DocxPreviewProps {
+  fileId: string;
+  fileName: string;
+}
+
+export function DocxPreview({ fileId, fileName }: DocxPreviewProps) {
+  const bodyRef = useRef<HTMLDivElement>(null);
+  const styleRef = useRef<HTMLDivElement>(null);
+  const { buffer, loading, error } = useFileArrayBuffer(fileId);
+
+  useEffect(() => {
+    const body = bodyRef.current;
+    const style = styleRef.current;
+    if (!buffer || !body || !style) return;
+
+    body.innerHTML = '';
+    style.innerHTML = '';
+
+    let cancelled = false;
+    renderAsync(buffer, body, style, {
+      className: 'docx-preview',
+      inWrapper: true,
+      ignoreWidth: false,
+      ignoreHeight: false,
+      breakPages: true,
+    }).catch(() => {
+      if (!cancelled) {
+        body.innerHTML = '';
+      }
+    });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [buffer, fileId]);
+
+  if (error || (!loading && !buffer)) {
+    return <FilePreviewFallback fileId={fileId} fileName={fileName} error={error} />;
+  }
+
+  if (loading) {
+    return <FilePreviewFallback fileId={fileId} fileName={fileName} loading />;
+  }
+
+  return (
+    <div className="h-full w-full min-h-0 overflow-auto bg-white">
+      <div ref={styleRef} className="docx-preview-styles" />
+      <div
+        ref={bodyRef}
+        className="docx-preview-body p-4 [&_.docx-wrapper]:mx-auto [&_.docx-wrapper]:bg-white [&_.docx-wrapper]:shadow-sm"
+      />
+    </div>
+  );
+}
--- a/frontend/src/components/detail/FilePreviewFallback.tsx
+++ b/frontend/src/components/detail/FilePreviewFallback.tsx
@@ -0,0 +1,41 @@
+import { fileDownloadUrl } from '../../lib/apiClient';
+
+interface FilePreviewFallbackProps {
+  fileId: string;
+  fileName: string;
+  loading?: boolean;
+  error?: string | null;
+  message?: string;
+}
+
+export function FilePreviewFallback({
+  fileId,
+  fileName,
+  loading,
+  error,
+  message,
+}: FilePreviewFallbackProps) {
+  if (loading) {
+    return <p className="text-lg text-white/50">미리보기 로딩 중…</p>;
+  }
+
+  return (
+    <div className="flex max-w-lg flex-col items-center gap-3 px-6 text-center">
+      <p className="text-xl font-bold text-white/70">{fileName}</p>
+      <p className="text-base leading-relaxed text-white/45">
+        {error ?? message ?? '미리보기를 표시할 수 없습니다.'}
+      </p>
+      {error && (
+        <p className="text-sm text-white/35">
+          서버 재시작 등으로 파일이 삭제되었을 수 있습니다. 단계 수정에서 다시 첨부해 주세요.
+        </p>
+      )}
+      <a
+        href={fileDownloadUrl(fileId)}
+        className="rounded-lg bg-white/10 px-4 py-2 text-sm font-bold text-white/80 hover:bg-white/20"
+      >
+        다운로드
+      </a>
+    </div>
+  );
+}
--- a/frontend/src/components/detail/HwpPreview.tsx
+++ b/frontend/src/components/detail/HwpPreview.tsx
@@ -0,0 +1,70 @@
+import { useEffect, useState } from 'react';
+import { fileHwpPreviewUrl } from '../../lib/apiClient';
+import { FilePreviewFallback } from './FilePreviewFallback';
+
+interface HwpPreviewProps {
+  fileId: string;
+  fileName: string;
+}
+
+export function HwpPreview({ fileId, fileName }: HwpPreviewProps) {
+  const [html, setHtml] = useState<string | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    let cancelled = false;
+    setLoading(true);
+    setError(null);
+    setHtml(null);
+
+    fetch(fileHwpPreviewUrl(fileId))
+      .then(async (res) => {
+        if (!res.ok) {
+          const body = (await res.json().catch(() => null)) as { message?: string } | null;
+          throw new Error(body?.message ?? '한글 미리보기를 불러올 수 없습니다.');
+        }
+        return res.json() as Promise<{ html: string }>;
+      })
+      .then((data) => {
+        if (!cancelled) {
+          setHtml(data.html);
+          setLoading(false);
+        }
+      })
+      .catch((e) => {
+        if (!cancelled) {
+          setError(e instanceof Error ? e.message : '한글 미리보기 실패');
+          setLoading(false);
+        }
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [fileId]);
+
+  if (error) {
+    return (
+      <FilePreviewFallback
+        fileId={fileId}
+        fileName={fileName}
+        error={error}
+        message="한글 미리보기 변환에 실패했습니다. 다운로드 후 한/글에서 확인해 주세요."
+      />
+    );
+  }
+
+  if (loading || !html) {
+    return <FilePreviewFallback fileId={fileId} fileName={fileName} loading />;
+  }
+
+  return (
+    <div className="h-full w-full min-h-0 overflow-auto bg-white">
+      <div
+        className="hwp-preview mx-auto max-w-4xl p-6 text-[15px] leading-relaxed text-slate-800 [&_img]:max-w-full [&_table]:my-3 [&_table]:w-full [&_table]:border-collapse [&_td]:border [&_td]:border-slate-200 [&_td]:px-2 [&_td]:py-1 [&_th]:border [&_th]:border-slate-300 [&_th]:bg-slate-50 [&_th]:px-2 [&_th]:py-1"
+        dangerouslySetInnerHTML={{ __html: html }}
+      />
+    </div>
+  );
+}
--- a/frontend/src/components/detail/MilestoneContentList.tsx
+++ b/frontend/src/components/detail/MilestoneContentList.tsx
@@ -0,0 +1,145 @@
+import { useEffect, useMemo, useRef, useState, type MouseEvent } from 'react';
+import {
+  fmtPeriodPickerLabel,
+  parseMilestonePeriods,
+  parsePeriodNoteLines,
+  pickLatestPeriodId,
+  sortPeriodsByRecent,
+} from '../../lib/milestonePeriods';
+import type { Milestone } from '../../types';
+
+interface MilestoneContentListProps {
+  milestone: Pick<Milestone, 'id' | 'periodEntries' | 'startDate' | 'dueDate' | 'description'> | null | undefined;
+  emptyMessage: string;
+  onContextMenu?: (event: MouseEvent) => void;
+}
+
+function PeriodPicker({
+  periods,
+  selectedId,
+  onSelect,
+}: {
+  periods: ReturnType<typeof parseMilestonePeriods>;
+  selectedId: string;
+  onSelect: (id: string) => void;
+}) {
+  const [open, setOpen] = useState(false);
+  const rootRef = useRef<HTMLDivElement>(null);
+
+  const selected = periods.find((p) => p.id === selectedId) ?? periods[0];
+  const selectedIndex = periods.findIndex((p) => p.id === selected?.id);
+  const label = selected ? fmtPeriodPickerLabel(selected, selectedIndex >= 0 ? selectedIndex : 0) : '';
+
+  useEffect(() => {
+    if (!open) return;
+    const onPointerDown = (event: PointerEvent) => {
+      if (!rootRef.current?.contains(event.target as Node)) setOpen(false);
+    };
+    document.addEventListener('pointerdown', onPointerDown);
+    return () => document.removeEventListener('pointerdown', onPointerDown);
+  }, [open]);
+
+  if (!selected || !label) return null;
+
+  const canPick = periods.length > 1;
+
+  return (
+    <div className="milestone-content-period" ref={rootRef}>
+      <button
+        type="button"
+        className={`milestone-content-period__btn${open ? ' is-open' : ''}`}
+        aria-haspopup="listbox"
+        aria-expanded={open}
+        disabled={!canPick}
+        onClick={() => canPick && setOpen((v) => !v)}
+        title={canPick ? '다른 기간 업무내용 보기' : undefined}
+      >
+        <span className="milestone-content-period__label">{label}</span>
+        {canPick && (
+          <svg width="10" height="10" viewBox="0 0 10 10" aria-hidden className="milestone-content-period__chev">
+            <path d="M2 3.5 L5 6.5 L8 3.5" fill="none" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round" />
+          </svg>
+        )}
+      </button>
+
+      {open && canPick && (
+        <ul className="milestone-content-period__menu" role="listbox">
+          {periods.map((period, index) => {
+            const isActive = period.id === selectedId;
+            return (
+              <li key={period.id} role="option" aria-selected={isActive}>
+                <button
+                  type="button"
+                  className={`milestone-content-period__option${isActive ? ' is-active' : ''}`}
+                  onClick={() => {
+                    onSelect(period.id);
+                    setOpen(false);
+                  }}
+                >
+                  {fmtPeriodPickerLabel(period, index)}
+                </button>
+              </li>
+            );
+          })}
+        </ul>
+      )}
+    </div>
+  );
+}
+
+export function MilestoneContentList({
+  milestone,
+  emptyMessage,
+  onContextMenu,
+}: MilestoneContentListProps) {
+  const periods = useMemo(
+    () => sortPeriodsByRecent(parseMilestonePeriods(milestone)),
+    [milestone],
+  );
+
+  const latestId = useMemo(() => pickLatestPeriodId(periods), [periods]);
+  const [selectedPeriodId, setSelectedPeriodId] = useState<string | null>(null);
+
+  useEffect(() => {
+    setSelectedPeriodId(latestId);
+  }, [milestone?.id, latestId]);
+
+  const activePeriod =
+    periods.find((p) => p.id === selectedPeriodId) ?? periods[0] ?? null;
+  const lines = parsePeriodNoteLines(activePeriod?.note);
+
+  return (
+    <>
+      <div className="detail-section-head">
+        <h3 className="detail-section-label">업무내용</h3>
+        {milestone && periods.length > 0 && activePeriod && (
+          <PeriodPicker
+            periods={periods}
+            selectedId={activePeriod.id}
+            onSelect={setSelectedPeriodId}
+          />
+        )}
+      </div>
+
+      <ul
+        className="min-h-0 flex-1 space-y-2 overflow-y-auto pr-1"
+        onContextMenu={onContextMenu}
+      >
+        {!milestone ? (
+          <li className="detail-body-muted">{emptyMessage}</li>
+        ) : periods.length === 0 ? (
+          <li className="detail-body-muted">{emptyMessage}</li>
+        ) : lines.length === 0 ? (
+          <li className="detail-body-muted">이 기간에 입력된 업무내용이 없습니다.</li>
+        ) : (
+          lines.map((line, index) => (
+            <li key={`${activePeriod!.id}-${index}`} className="flex gap-2" onContextMenu={onContextMenu}>
+              <span className="detail-body-text shrink-0 text-[#4a90d9]">•</span>
+              <p className="detail-body-content min-w-0 flex-1 whitespace-pre-wrap break-words">{line}</p>
+            </li>
+          ))
+        )}
+      </ul>
+    </>
+  );
+}
--- a/frontend/src/components/detail/MilestoneTimeline.tsx
+++ b/frontend/src/components/detail/MilestoneTimeline.tsx
@@ -0,0 +1,237 @@
+import { useEffect, useMemo, useRef, useState } from 'react';
+import {
+  buildMilestoneTimeline,
+  type TimelineMilestoneInput,
+  type TimelineRangeFallback,
+} from '../../lib/milestoneTimeline';
+
+interface MilestoneTimelineProps {
+  milestones: TimelineMilestoneInput[];
+  fallback?: TimelineRangeFallback;
+  selectedId?: string | null;
+  onSelect?: (id: string) => void;
+  title?: string;
+  subtitle?: string;
+  emptyMessage?: string;
+  className?: string;
+  preserveRowOrder?: boolean;
+  /** 상시업무 — 시작·종료일 없는 단계는 게이지 미표시 */
+  hideUndatedBars?: boolean;
+}
+
+export function MilestoneTimeline({
+  milestones,
+  fallback = {},
+  selectedId,
+  onSelect,
+  title = '업무별 타임라인',
+  subtitle,
+  emptyMessage = '기간을 설정한 단계만 표시됩니다.',
+  preserveRowOrder = false,
+  hideUndatedBars = true,
+  className = '',
+}: MilestoneTimelineProps) {
+  const model = useMemo(
+    () => buildMilestoneTimeline(milestones, fallback, { preserveOrder: preserveRowOrder, hideUndatedBars }),
+    [milestones, fallback, preserveRowOrder, hideUndatedBars],
+  );
+
+  const chartRef = useRef<HTMLDivElement>(null);
+  const rowRefs = useRef<Map<string, HTMLDivElement>>(new Map());
+  const measureRef = useRef<HTMLSpanElement>(null);
+  const [expandedBar, setExpandedBar] = useState<{
+    id: string;
+    widthPx: number;
+    leftPx: number;
+  } | null>(null);
+
+  const measureTitleWidth = (title: string) => {
+    const el = measureRef.current;
+    if (!el) return 0;
+    el.textContent = title;
+    return el.offsetWidth + 16;
+  };
+
+  const handleBarEnter = (
+    row: { id: string; title: string; leftPct: number; widthPct: number },
+    event: React.MouseEvent<HTMLButtonElement>,
+  ) => {
+    const chart = chartRef.current;
+    if (!chart) return;
+
+    const btn = event.currentTarget;
+    const chartWidth = chart.clientWidth;
+    const leftPx = (row.leftPct / 100) * chartWidth;
+    const origWidthPx = btn.offsetWidth;
+    const neededWidthPx = measureTitleWidth(row.title);
+
+    if (neededWidthPx <= origWidthPx + 1) return;
+
+    const widthPx = Math.min(chartWidth, neededWidthPx);
+    const extra = widthPx - origWidthPx;
+    let expandedLeftPx = leftPx - extra / 2;
+
+    if (expandedLeftPx < 0) expandedLeftPx = 0;
+    if (expandedLeftPx + widthPx > chartWidth) expandedLeftPx = chartWidth - widthPx;
+
+    setExpandedBar({
+      id: row.id,
+      widthPx,
+      leftPx: expandedLeftPx,
+    });
+  };
+
+  useEffect(() => {
+    if (!selectedId) return;
+    const row = rowRefs.current.get(selectedId);
+    const chart = chartRef.current;
+    if (!row || !chart) return;
+
+    const rowRect = row.getBoundingClientRect();
+    const chartRect = chart.getBoundingClientRect();
+
+    if (rowRect.top >= chartRect.top && rowRect.bottom <= chartRect.bottom) return;
+
+    const delta =
+      rowRect.top < chartRect.top
+        ? rowRect.top - chartRect.top
+        : rowRect.bottom - chartRect.bottom;
+
+    chart.scrollBy({ top: delta, behavior: 'smooth' });
+  }, [selectedId, model?.rows.length]);
+
+  const rangeSubtitle =
+    subtitle ?? (model ? `${model.rangeStartLabel} ~ ${model.rangeEndLabel}` : undefined);
+
+  const rowGroups = useMemo(() => {
+    if (!model) return [];
+    const groups: Array<{
+      milestoneId: string;
+      title: string;
+      progress: number;
+      segments: (typeof model.rows)[number][];
+    }> = [];
+    const indexByMilestone = new Map<string, number>();
+    for (const row of model.rows) {
+      const idx = indexByMilestone.get(row.milestoneId);
+      if (idx === undefined) {
+        indexByMilestone.set(row.milestoneId, groups.length);
+        groups.push({
+          milestoneId: row.milestoneId,
+          title: row.title,
+          progress: row.progress,
+          segments: [row],
+        });
+      } else {
+        groups[idx].segments.push(row);
+      }
+    }
+    return groups;
+  }, [model]);
+
+  return (
+    <footer className={`milestone-timeline ${className}`.trim()}>
+      <div className="milestone-timeline__head">
+        <span className="milestone-timeline__title">{title}</span>
+        {rangeSubtitle && (
+          <span className="milestone-timeline__subtitle truncate">{rangeSubtitle}</span>
+        )}
+      </div>
+
+      {!model ? (
+        <p className="milestone-timeline__empty">{emptyMessage}</p>
+      ) : (
+        <div className="milestone-timeline__body">
+          <div className="milestone-timeline__ticks" aria-hidden="true">
+            {model.ticks.map((tick) => (
+              <span
+                key={`${tick.label}-${tick.leftPct}`}
+                className={`milestone-timeline__tick${tick.isToday ? ' is-today' : ''}`}
+                style={{ left: `${tick.leftPct}%` }}
+                title={tick.isToday ? `오늘 (${tick.label})` : undefined}
+              >
+                <span className="milestone-timeline__tick-label">{tick.label}</span>
+              </span>
+            ))}
+          </div>
+
+          <div className="milestone-timeline__chart" ref={chartRef}>
+            <span ref={measureRef} className="milestone-timeline__measure" aria-hidden="true" />
+            <div className="milestone-timeline__grid" aria-hidden="true">
+              {model.ticks.map((tick) => (
+                <span
+                  key={`grid-${tick.label}-${tick.leftPct}`}
+                  className="milestone-timeline__grid-line"
+                  style={{ left: `${tick.leftPct}%` }}
+                />
+              ))}
+            </div>
+
+            <div className="milestone-timeline__rows">
+              {rowGroups.map((group) => {
+                const isSelected = group.milestoneId === selectedId;
+                return (
+                  <div
+                    key={group.milestoneId}
+                    className="milestone-timeline__row"
+                    ref={(el) => {
+                      if (el) rowRefs.current.set(group.milestoneId, el);
+                      else rowRefs.current.delete(group.milestoneId);
+                    }}
+                  >
+                    {group.segments.map((row) => {
+                      const isExpanded = expandedBar?.id === row.id;
+                      return (
+                        <button
+                          key={row.id}
+                          type="button"
+                          className={`milestone-timeline__bar ${isSelected ? 'is-selected' : ''} ${isExpanded ? 'is-expanded' : ''}`}
+                          style={
+                            isExpanded
+                              ? {
+                                  left: `${expandedBar.leftPx}px`,
+                                  width: `${expandedBar.widthPx}px`,
+                                }
+                              : {
+                                  left: `${row.leftPct}%`,
+                                  width: `${row.widthPct}%`,
+                                }
+                          }
+                          aria-label={group.title}
+                          title={group.title}
+                          onMouseEnter={(e) => handleBarEnter({ ...row, title: group.title }, e)}
+                          onMouseLeave={() => setExpandedBar(null)}
+                          onClick={() => onSelect?.(group.milestoneId)}
+                        >
+                          <span className="milestone-timeline__bar-track" />
+                          <span
+                            className="milestone-timeline__bar-fill"
+                            style={{ width: `${row.progress}%` }}
+                          />
+                          <span className="milestone-timeline__bar-label-wrap" aria-hidden="true">
+                            <span
+                              className="milestone-timeline__bar-label milestone-timeline__bar-label--fill"
+                              style={{ clipPath: `inset(0 ${100 - row.progress}% 0 0)` }}
+                            >
+                              {group.title}
+                            </span>
+                            <span
+                              className="milestone-timeline__bar-label milestone-timeline__bar-label--track"
+                              style={{ clipPath: `inset(0 0 0 ${row.progress}%)` }}
+                            >
+                              {group.title}
+                            </span>
+                          </span>
+                        </button>
+                      );
+                    })}
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+        </div>
+      )}
+    </footer>
+  );
+}
--- a/frontend/src/components/detail/PdfPreview.tsx
+++ b/frontend/src/components/detail/PdfPreview.tsx
@@ -0,0 +1,27 @@
+import { useFileBlobUrl } from '../../hooks/useFileBuffer';
+import { FilePreviewFallback } from './FilePreviewFallback';
+
+interface PdfPreviewProps {
+  fileId: string;
+  fileName: string;
+}
+
+export function PdfPreview({ fileId, fileName }: PdfPreviewProps) {
+  const { blobUrl, loading, error } = useFileBlobUrl(fileId, 'application/pdf');
+
+  if (error || (!loading && !blobUrl)) {
+    return <FilePreviewFallback fileId={fileId} fileName={fileName} error={error} />;
+  }
+
+  if (loading || !blobUrl) {
+    return <FilePreviewFallback fileId={fileId} fileName={fileName} loading />;
+  }
+
+  return (
+    <iframe
+      src={blobUrl}
+      title={fileName}
+      className="h-full w-full border-0 bg-white"
+    />
+  );
+}
--- a/frontend/src/components/detail/PptxPreview.tsx
+++ b/frontend/src/components/detail/PptxPreview.tsx
@@ -0,0 +1,50 @@
+import { useEffect, useRef } from 'react';
+import { renderPptx } from 'pptx-react-renderer';
+import { useFileArrayBuffer } from '../../hooks/useFileBuffer';
+import { FilePreviewFallback } from './FilePreviewFallback';
+
+interface PptxPreviewProps {
+  fileId: string;
+  fileName: string;
+}
+
+export function PptxPreview({ fileId, fileName }: PptxPreviewProps) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const { buffer, loading, error } = useFileArrayBuffer(fileId);
+
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!buffer || !container) return;
+
+    container.innerHTML = '';
+    let cancelled = false;
+
+    renderPptx(buffer, {
+      container,
+      scale: 0.55,
+      showSlideNumbers: true,
+      theme: 'light',
+    }).catch(() => {
+      if (!cancelled) container.innerHTML = '';
+    });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [buffer, fileId]);
+
+  if (error || (!loading && !buffer)) {
+    return <FilePreviewFallback fileId={fileId} fileName={fileName} error={error} />;
+  }
+
+  if (loading) {
+    return <FilePreviewFallback fileId={fileId} fileName={fileName} loading />;
+  }
+
+  return (
+    <div
+      ref={containerRef}
+      className="h-full w-full min-h-0 overflow-auto bg-slate-100 p-4 [&_.pptx-slide]:mx-auto [&_.pptx-slide]:mb-6"
+    />
+  );
+}
--- a/frontend/src/components/detail/ResultPreview.tsx
+++ b/frontend/src/components/detail/ResultPreview.tsx
@@ -1,9 +1,18 @@
-import { useState, useEffect, useCallback } from 'react';
+import { useState, useEffect, useCallback, useMemo } from 'react';
 import { createPortal } from 'react-dom';
 import { ExcelPreview } from './ExcelPreview';
-import { fileDownloadUrl, fileViewUrl } from '../../lib/apiClient';
+import { DocxPreview } from './DocxPreview';
+import { PptxPreview } from './PptxPreview';
+import { PdfPreview } from './PdfPreview';
+import { HwpPreview } from './HwpPreview';
+import { FilePreviewFallback } from './FilePreviewFallback';
 import { openLinkOnRightMonitor } from '../../lib/dualMonitor';
-import { fileDisplayName, isExcelFile, isVideoFile } from '../../lib/fileDisplay';
+import {
+  fileDisplayName,
+  getFilePreviewKind,
+  resolvePreviewMime,
+} from '../../lib/fileDisplay';
+import { useFileBlobUrl } from '../../hooks/useFileBuffer';
 import type { FileRecord, MilestoneLink } from '../../types';

 interface ResultPreviewProps {
@@ -12,32 +21,67 @@ interface ResultPreviewProps {
  hasSelectedStage: boolean;
 }

-function FileMissingNotice({ label, fileId }: { label: string; fileId: string }) {
+function ImagePreview({
+  fileId,
+  fileName,
+  mime,
+  zoom,
+}: {
+  fileId: string;
+  fileName: string;
+  mime: string;
+  zoom: number;
+}) {
+  const { blobUrl, loading, error } = useFileBlobUrl(fileId, mime);
+
+  if (error || (!loading && !blobUrl)) {
+    return <FilePreviewFallback fileId={fileId} fileName={fileName} error={error} />;
+  }
+  if (loading || !blobUrl) {
+    return <FilePreviewFallback fileId={fileId} fileName={fileName} loading />;
+  }
+
  return (
-    <div className="flex max-w-lg flex-col items-center gap-3 px-6 text-center">
-      <p className="text-xl font-bold text-white/70">{label}</p>
-      <p className="text-base leading-relaxed text-white/45">
-        첨부 파일을 서버에서 찾을 수 없습니다.
-        <br />
-        코드 배포·서버 재시작 시 파일이 삭제될 수 있습니다.
-        <br />
-        단계 수정에서 같은 파일을 다시 첨부해 주세요.
-      </p>
-      <a
-        href={fileDownloadUrl(fileId)}
-        className="rounded-lg bg-white/10 px-4 py-2 text-sm font-bold text-white/80 hover:bg-white/20"
-      >
-        다운로드 재시도
-      </a>
-    </div>
+    <img
+      src={blobUrl}
+      alt={fileName}
+      className="max-h-full max-w-full object-contain transition-transform duration-150"
+      style={{ transform: `scale(${zoom})` }}
+      draggable={false}
+    />
  );
 }

+function VideoPreview({ fileId, fileName, mime }: { fileId: string; fileName: string; mime: string }) {
+  const { blobUrl, loading, error } = useFileBlobUrl(fileId, mime);
+
+  if (error || (!loading && !blobUrl)) {
+    return <FilePreviewFallback fileId={fileId} fileName={fileName} error={error} />;
+  }
+  if (loading || !blobUrl) {
+    return <FilePreviewFallback fileId={fileId} fileName={fileName} loading />;
+  }
+
+  return <video src={blobUrl} controls className="max-h-full max-w-full" title={fileName} />;
+}
+
+function TextPreview({ fileId, fileName }: { fileId: string; fileName: string }) {
+  const { blobUrl, loading, error } = useFileBlobUrl(fileId, 'text/plain;charset=utf-8');
+
+  if (error || (!loading && !blobUrl)) {
+    return <FilePreviewFallback fileId={fileId} fileName={fileName} error={error} />;
+  }
+  if (loading || !blobUrl) {
+    return <FilePreviewFallback fileId={fileId} fileName={fileName} loading />;
+  }
+
+  return <iframe src={blobUrl} title={fileName} className="h-full w-full border-0 bg-white" />;
+}
+
 export function ResultPreview({ files, links, hasSelectedStage }: ResultPreviewProps) {
  const [fileId, setFileId] = useState<string | null>(null);
  const [zoom, setZoom] = useState(1);
  const [fullscreen, setFullscreen] = useState(false);
-  const [fileMissing, setFileMissing] = useState(false);

  useEffect(() => {
    if (files.length > 0) {
@@ -49,29 +93,11 @@ export function ResultPreview({ files, links, hasSelectedStage }: ResultPreviewP
  }, [files]);

  const activeFile = fileId ? files.find((f) => f.id === fileId) ?? null : null;
+  const previewKind = activeFile ? getFilePreviewKind(activeFile) : null;
+  const previewMime = activeFile ? resolvePreviewMime(activeFile) : '';

-  useEffect(() => {
-    if (!activeFile || isExcelFile(activeFile)) {
-      setFileMissing(false);
-      return;
-    }
-    let cancelled = false;
-    setFileMissing(false);
-    fetch(fileViewUrl(activeFile.id), { method: 'HEAD' })
-      .then((res) => {
-        if (!cancelled) setFileMissing(!res.ok);
-      })
-      .catch(() => {
-        if (!cancelled) setFileMissing(true);
-      });
-    return () => {
-      cancelled = true;
-    };
-  }, [activeFile?.id, activeFile?.mimetype]);
  const fileIndex = activeFile ? files.findIndex((f) => f.id === activeFile.id) : -1;
-  const isImage = activeFile?.mimetype.includes('image') ?? false;
-  const isVideo = activeFile ? isVideoFile(activeFile) : false;
-  const isExcel = activeFile ? isExcelFile(activeFile) : false;
+  const isImage = previewKind === 'image';

  const goFile = useCallback(
    (delta: number) => {
@@ -89,43 +115,42 @@ export function ResultPreview({ files, links, hasSelectedStage }: ResultPreviewP

  const headerTitle = activeFile ? fileDisplayName(activeFile) : '결과물 프리뷰';

-  const renderContent = () => {
-    if (activeFile) {
-      const label = fileDisplayName(activeFile);
-      if (isExcel) {
+  const previewContent = useMemo(() => {
+    if (!activeFile || !previewKind) return null;
+    const label = fileDisplayName(activeFile);
+
+    switch (previewKind) {
+      case 'excel':
        return <ExcelPreview fileId={activeFile.id} fileName={label} />;
-      }
-      if (fileMissing) {
-        return <FileMissingNotice label={label} fileId={activeFile.id} />;
-      }
-      const src = fileViewUrl(activeFile.id);
-      if (isImage) {
+      case 'image':
        return (
-          <img
-            src={src}
-            alt={label}
-            className="max-h-full max-w-full object-contain transition-transform duration-150"
-            style={{ transform: `scale(${zoom})` }}
-            draggable={false}
-            onError={() => setFileMissing(true)}
+          <ImagePreview fileId={activeFile.id} fileName={label} mime={previewMime} zoom={zoom} />
+        );
+      case 'video':
+        return <VideoPreview fileId={activeFile.id} fileName={label} mime={previewMime} />;
+      case 'pdf':
+        return <PdfPreview fileId={activeFile.id} fileName={label} />;
+      case 'docx':
+        return <DocxPreview fileId={activeFile.id} fileName={label} />;
+      case 'pptx':
+        return <PptxPreview fileId={activeFile.id} fileName={label} />;
+      case 'text':
+        return <TextPreview fileId={activeFile.id} fileName={label} />;
+      case 'hwp':
+        return <HwpPreview fileId={activeFile.id} fileName={label} />;
+      default:
+        return (
+          <FilePreviewFallback
+            fileId={activeFile.id}
+            fileName={label}
+            message="이 형식은 미리보기를 지원하지 않습니다. 다운로드 후 확인해 주세요."
          />
        );
-      }
-      if (isVideo) {
-        return (
-          <video
-            src={src}
-            controls
-            className="max-h-full max-w-full"
-            title={label}
-            onError={() => setFileMissing(true)}
-          />
-        );
-      }
-      return (
-        <iframe src={src} title={label} className="h-full w-full border-0 bg-white" />
-      );
    }
+  }, [activeFile, previewKind, previewMime, zoom]);
+
+  const renderContent = () => {
+    if (activeFile && previewContent) return previewContent;
    if (links.length > 0) {
      return (
        <p className="px-6 text-center text-xl text-white/40">
--- a/frontend/src/components/detail/RoutineDetailView.tsx
+++ b/frontend/src/components/detail/RoutineDetailView.tsx
@@ -0,0 +1,740 @@
+import { useEffect, useMemo, useState } from 'react';
+
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+
+import { apiClient, getApiErrorMessage } from '../../lib/apiClient';
+
+import { ContextMenu } from '../common/ContextMenu';
+
+import {
+
+  StageModal,
+
+  parseMilestoneLinks,
+
+  type StageFileSavePayload,
+
+  type StageFormData,
+
+} from './StageModal';
+
+import {
+
+  ROUTINE_CATEGORIES,
+
+  getRoutineCategory,
+
+  pickRoutineCategoryTask,
+
+  type RoutineCategory,
+
+} from '../../lib/routineCategories';
+
+import { routineCategoryShellPayload } from '../../lib/taskFormPayload';
+
+import { isRoutineTask } from '../../lib/taskType';
+
+import { getMilestoneSubtitle } from '../../lib/milestoneSubtitle';
+import { sortFilesByOrder } from '../../lib/fileDisplay';
+
+import { useTeamMembers } from '../../hooks/useTeamMembers';
+
+import { ResultPreview } from './ResultPreview';
+
+import { MilestoneTimeline } from './MilestoneTimeline';
+import { MilestoneContentList } from './MilestoneContentList';
+import { taskTimelineFallback } from '../../lib/milestoneTimeline';
+import { serializePeriodEntries } from '../../lib/milestonePeriods';
+
+import type { Task, Milestone, FileRecord } from '../../types';
+
+
+
+type TaskWithRelations = Task & {
+
+  files: FileRecord[];
+
+  milestones: Milestone[];
+
+};
+
+
+
+function LeftSection({ children }: { children: React.ReactNode }) {
+
+  return (
+
+    <section className="flex min-h-0 flex-col overflow-hidden border-b border-[#e8edf2] px-4 py-3 last:border-b-0">
+
+      {children}
+
+    </section>
+
+  );
+
+}
+
+
+
+export function RoutineDetailView({
+  task: initialTask,
+  initialStageId,
+}: {
+  task: TaskWithRelations;
+  initialStageId?: string | null;
+}) {
+
+  const qc = useQueryClient();
+
+  const { data: teamMembers = [] } = useTeamMembers();
+
+  const [activeTaskId, setActiveTaskId] = useState(initialTask.id);
+
+  const [selectedStageId, setSelectedStageId] = useState<string | null>(initialStageId ?? null);
+
+  const [stageModal, setStageModal] = useState<{ mode: 'add' | 'edit'; milestone?: Milestone } | null>(null);
+
+  const [stageSaving, setStageSaving] = useState(false);
+
+  const [ctxMenu, setCtxMenu] = useState<{ x: number; y: number; stageId: string } | null>(null);
+
+  const [tabSwitching, setTabSwitching] = useState(false);
+
+
+
+  useEffect(() => {
+
+    setActiveTaskId(initialTask.id);
+
+  }, [initialTask.id]);
+
+
+
+  const { data: activeTask = initialTask } = useQuery({
+    queryKey: ['task', activeTaskId],
+    queryFn: async () => {
+      const { data } = await apiClient.get<TaskWithRelations>(`/tasks/${activeTaskId}`);
+      return data;
+    },
+    initialData: activeTaskId === initialTask.id ? initialTask : undefined,
+    staleTime: 10_000,
+    retry: 2,
+  });
+
+  const { data: quarterTasks = [] } = useQuery({
+    queryKey: ['tasks', { quarter: activeTask.quarter }],
+    queryFn: async () => {
+      const { data } = await apiClient.get<Task[]>('/tasks', {
+        params: { quarter: activeTask.quarter },
+      });
+      return data;
+    },
+    staleTime: 30_000,
+    retry: 2,
+  });
+
+
+
+  const tabTasks = useMemo(() => {
+
+    const routines = quarterTasks.filter((t) => isRoutineTask(t.taskType));
+
+    return ROUTINE_CATEGORIES.map((label) => ({
+
+      label,
+
+      task: pickRoutineCategoryTask(routines, label),
+
+    }));
+
+  }, [quarterTasks]);
+
+
+
+  const activeCategory = getRoutineCategory(activeTask) ?? '채용 운영';
+
+
+
+  const handleTabClick = async (label: RoutineCategory, tabTask: Task | null) => {
+
+    if (tabSwitching) return;
+
+    if (tabTask) {
+
+      setActiveTaskId(tabTask.id);
+
+      return;
+
+    }
+
+    setTabSwitching(true);
+
+    try {
+
+      const { data: created } = await apiClient.post<Task>(
+
+        '/tasks',
+
+        routineCategoryShellPayload(label, activeTask.quarter),
+
+      );
+
+      await qc.invalidateQueries({ queryKey: ['tasks'] });
+
+      setActiveTaskId(created.id);
+
+    } catch (err: unknown) {
+
+      alert(getApiErrorMessage(err, `"${label}" 업무를 준비하지 못했습니다.`));
+
+    } finally {
+
+      setTabSwitching(false);
+
+    }
+
+  };
+
+
+
+  const milestones = useMemo(
+
+    () => [...(activeTask.milestones ?? [])].sort((a, b) => a.order - b.order),
+
+    [activeTask.milestones],
+
+  );
+
+
+
+  useEffect(() => {
+
+    if (initialStageId && milestones.some((m) => m.id === initialStageId)) {
+
+      setSelectedStageId(initialStageId);
+
+    }
+
+  }, [initialTask.id, initialStageId, milestones]);
+
+
+
+  useEffect(() => {
+
+    if (!selectedStageId || !milestones.some((m) => m.id === selectedStageId)) {
+
+      setSelectedStageId(milestones[0]?.id ?? null);
+
+    }
+
+  }, [activeTaskId, milestones, selectedStageId]);
+
+
+
+  const selectedStage = milestones.find((m) => m.id === selectedStageId) ?? null;
+
+  const stageFiles = useMemo(
+
+    () =>
+
+      sortFilesByOrder(
+
+        selectedStageId ? (activeTask.files ?? []).filter((f) => f.milestoneId === selectedStageId) : [],
+
+      ),
+
+    [activeTask.files, selectedStageId],
+
+  );
+
+
+
+  const stageLinks = useMemo(
+
+    () => (selectedStage ? parseMilestoneLinks(selectedStage.links) : []),
+
+    [selectedStage],
+
+  );
+
+
+
+  const deleteStage = useMutation({
+
+    mutationFn: (id: string) => apiClient.delete(`/milestones/item/${id}`),
+
+    onSuccess: () => qc.invalidateQueries({ queryKey: ['task', activeTaskId] }),
+
+  });
+
+
+
+  const uploadFiles = async (milestoneId: string, filePayload: StageFileSavePayload['uploads']) => {
+
+    for (const item of filePayload) {
+
+      const form = new FormData();
+
+      form.append('file', item.file);
+
+      form.append('milestoneId', milestoneId);
+
+      form.append('sortOrder', String(item.sortOrder));
+
+      if (item.displayName.trim()) {
+
+        form.append('displayName', item.displayName.trim());
+
+      }
+
+      await apiClient.post(`/files/upload/${activeTaskId}`, form);
+
+    }
+
+  };
+
+
+
+  const handleStageSave = async (data: StageFormData, filePayload: StageFileSavePayload) => {
+
+    setStageSaving(true);
+
+    try {
+
+      const payload = {
+
+        title: data.title.trim(),
+
+        subtitle: data.subtitle.trim() || null,
+
+        periodEntries: serializePeriodEntries(data.periodEntries),
+
+        progress: data.progress,
+
+        links: data.links,
+
+        pmMemberId: data.pmMemberId || null,
+
+        assigneeMemberIds: data.assigneeMemberIds,
+
+      };
+
+
+
+      let milestoneId: string;
+
+
+
+      if (stageModal?.mode === 'add') {
+
+        const { data: created } = await apiClient.post<Milestone>(
+
+          `/milestones/${activeTaskId}`,
+
+          payload,
+
+        );
+
+        milestoneId = created.id;
+
+        setSelectedStageId(created.id);
+
+      } else if (stageModal?.milestone) {
+
+        const { data: updated } = await apiClient.patch<Milestone>(
+
+          `/milestones/item/${stageModal.milestone.id}`,
+
+          payload,
+
+        );
+
+        milestoneId = updated.id;
+
+        setSelectedStageId(updated.id);
+
+      } else {
+
+        return;
+
+      }
+
+
+
+      try {
+
+        for (const id of filePayload.deletedFileIds) {
+
+          await apiClient.delete(`/files/${id}`);
+
+        }
+
+        for (const rep of filePayload.replacements) {
+
+          const form = new FormData();
+
+          form.append('file', rep.file);
+
+          await apiClient.post(`/files/${rep.id}/replace`, form);
+
+        }
+
+        for (const edit of filePayload.existingEdits) {
+
+          const original = activeTask.files?.find((f) => f.id === edit.id);
+
+          if (!original) continue;
+
+          const prevName = (original.displayName ?? '').trim();
+
+          const nextName = edit.displayName.trim();
+
+          const prevOrder = original.sortOrder ?? 0;
+
+          if (nextName !== prevName || edit.sortOrder !== prevOrder) {
+
+            await apiClient.patch(`/files/${edit.id}`, {
+
+              displayName: nextName || null,
+
+              sortOrder: edit.sortOrder,
+
+            });
+
+          }
+
+        }
+
+        if (filePayload.uploads.length > 0) {
+
+          await uploadFiles(milestoneId, filePayload.uploads);
+
+        }
+
+      } catch (err: unknown) {
+
+        alert(`단계는 저장됐지만 ${getApiErrorMessage(err, '파일 처리에 실패했습니다.')}`);
+
+      }
+
+
+
+      await qc.invalidateQueries({ queryKey: ['task', activeTaskId] });
+
+      setStageModal(null);
+
+    } catch (err: unknown) {
+
+      alert(getApiErrorMessage(err, '단계 저장에 실패했습니다.'));
+
+    } finally {
+
+      setStageSaving(false);
+
+    }
+
+  };
+
+
+
+  return (
+
+    <div className="detail-page-shell flex h-full min-h-0 flex-col overflow-hidden">
+
+      <header className="detail-page-header detail-page-header--routine shrink-0">
+
+        <div className="detail-page-header__tabs">
+
+          {tabTasks.map(({ label, task: tabTask }) => {
+
+            const isActive = activeCategory === label;
+
+            return (
+
+              <button
+
+                key={label}
+
+                type="button"
+
+                disabled={tabSwitching}
+
+                className={`detail-page-header__tab ${isActive ? 'is-active' : ''}`}
+
+                onClick={() => handleTabClick(label, tabTask)}
+
+              >
+
+                {label}
+
+              </button>
+
+            );
+
+          })}
+
+        </div>
+
+      </header>
+
+
+
+      <div className="grid min-h-0 flex-1 grid-cols-[1fr_3fr] grid-rows-1">
+
+        <aside className="detail-aside grid h-full min-h-0 grid-rows-[2fr_1fr] overflow-hidden">
+
+          <LeftSection>
+
+            <div className="detail-section-head">
+
+              <h3 className="detail-section-label">업무명</h3>
+
+              <button
+
+                type="button"
+
+                title="단계 추가"
+
+                onClick={() => setStageModal({ mode: 'add' })}
+
+                className="detail-add-btn"
+
+              >
+
+                +
+
+              </button>
+
+            </div>
+
+            <div className="flex min-h-0 flex-1 flex-col gap-2 overflow-y-auto pr-1">
+
+              {milestones.length === 0 ? (
+
+                <p className="detail-body-muted">+ 버튼으로 단계를 추가하세요.</p>
+
+              ) : (
+
+                milestones.map((stage) => {
+
+                  const isSelected = stage.id === selectedStageId;
+
+                  const subtitle = getMilestoneSubtitle(stage);
+
+                  return (
+
+                    <button
+
+                      key={stage.id}
+
+                      type="button"
+
+                      className={`detail-stage-card shrink-0 rounded-lg border px-3 py-2 text-left transition-colors ${
+
+                        isSelected
+
+                          ? 'is-selected ring-1 ring-[#7eb3e8]'
+
+                          : 'hover:border-slate-300 hover:bg-white/80'
+
+                      }`}
+
+                      onClick={() => setSelectedStageId(stage.id)}
+
+                      onContextMenu={(e) => {
+
+                        e.preventDefault();
+
+                        setSelectedStageId(stage.id);
+
+                        setCtxMenu({ x: e.clientX, y: e.clientY, stageId: stage.id });
+
+                      }}
+
+                    >
+
+                      <p className="detail-body-title truncate">{stage.title}</p>
+
+                      {subtitle ? (
+                        <p className="detail-body-caption mt-0.5 truncate">{subtitle}</p>
+                      ) : null}
+
+                    </button>
+
+                  );
+
+                })
+
+              )}
+
+            </div>
+
+          </LeftSection>
+
+
+
+          <LeftSection>
+
+            <MilestoneContentList
+              milestone={selectedStage}
+              emptyMessage={
+                selectedStage
+                  ? '수행 기간에 업무내용을 입력하세요.'
+                  : '단계를 선택하세요.'
+              }
+            />
+
+          </LeftSection>
+
+        </aside>
+
+
+
+        <div className="flex h-full min-h-0 min-w-0 flex-col">
+
+          <ResultPreview
+
+            files={stageFiles}
+
+            links={stageLinks}
+
+            hasSelectedStage={!!selectedStage}
+
+          />
+
+
+
+          <MilestoneTimeline
+
+            milestones={milestones}
+
+            fallback={taskTimelineFallback(activeTask)}
+
+            selectedId={selectedStageId}
+
+            onSelect={setSelectedStageId}
+
+            preserveRowOrder
+
+            emptyMessage="기간을 설정한 업무명만 타임라인에 표시됩니다."
+
+          />
+
+        </div>
+
+      </div>
+
+
+
+      {stageModal && (
+
+        <StageModal
+
+          variant="routine"
+
+          mode={stageModal.mode}
+
+          milestone={stageModal.milestone}
+
+          existingFiles={
+
+            stageModal.milestone
+
+              ? sortFilesByOrder(
+
+                  (activeTask.files ?? []).filter((f) => f.milestoneId === stageModal.milestone!.id),
+
+                )
+
+              : []
+
+          }
+
+          teamMembers={teamMembers}
+
+          saving={stageSaving}
+
+          onClose={() => setStageModal(null)}
+
+          onSave={handleStageSave}
+
+        />
+
+      )}
+
+
+
+      {ctxMenu && (
+
+        <ContextMenu
+
+          x={ctxMenu.x}
+
+          y={ctxMenu.y}
+
+          onClose={() => setCtxMenu(null)}
+
+          items={[
+
+            {
+
+              icon: '✏',
+
+              label: '수정',
+
+              onClick: () => {
+
+                const m = milestones.find((s) => s.id === ctxMenu.stageId);
+
+                if (m) setStageModal({ mode: 'edit', milestone: m });
+
+              },
+
+            },
+
+            {
+
+              icon: '🗑',
+
+              label: '삭제',
+
+              danger: true,
+
+              onClick: () => {
+
+                if (window.confirm('이 단계를 정말 삭제하시겠습니까?')) {
+
+                  deleteStage.mutate(ctxMenu.stageId);
+
+                }
+
+              },
+
+            },
+
+          ]}
+
+        />
+
+      )}
+
+    </div>
+
+  );
+
+}
+
+
+
+export function RoutineDetailShell({
+  task,
+  initialStageId,
+}: {
+  task: TaskWithRelations;
+  initialStageId?: string | null;
+}) {
+
+  return <RoutineDetailView task={task} initialStageId={initialStageId} />;
+
+}
+
--- a/frontend/src/components/detail/StageModal.tsx
+++ b/frontend/src/components/detail/StageModal.tsx
@@ -1,15 +1,22 @@
 import { useState, useRef, useMemo, useEffect } from 'react';
 import { createPortal } from 'react-dom';
 import { sortFilesByOrder } from '../../lib/fileDisplay';
-import type { FileRecord, Milestone, MilestoneLink } from '../../types';
+import { decodeRoutineStageDescription } from '../../lib/routineMilestone';
+import {
+  newPeriodEntry,
+  parseMilestonePeriods,
+  type MilestonePeriodEntry,
+} from '../../lib/milestonePeriods';
+import type { FileRecord, Milestone, MilestoneLink, TeamMember } from '../../types';

 export interface StageFormData {
  title: string;
-  startDate: string;
-  dueDate: string;
+  subtitle: string;
+  periodEntries: MilestonePeriodEntry[];
  progress: number;
-  description: string;
  links: MilestoneLink[];
+  pmMemberId: string;
+  assigneeMemberIds: string[];
 }

 export interface PendingFileUpload {
@@ -39,8 +46,10 @@ export interface StageFileSavePayload {

 interface StageModalProps {
  mode: 'add' | 'edit';
+  variant?: 'project' | 'routine';
  milestone?: Milestone;
  existingFiles?: FileRecord[];
+  teamMembers?: TeamMember[];
  onSave: (data: StageFormData, files: StageFileSavePayload) => Promise<void>;
  onClose: () => void;
  saving?: boolean;
@@ -55,11 +64,6 @@ type EditTarget =
  | { type: 'link'; index: number }
  | null;

-function toDateInput(iso: string | null | undefined) {
-  if (!iso) return '';
-  return new Date(iso).toISOString().slice(0, 10);
-}
-
 function parseLinks(raw: string | null | undefined): MilestoneLink[] {
  if (!raw) return [];
  try {
@@ -107,21 +111,30 @@ let pendingKeySeq = 0;

 export function StageModal({
  mode,
+  variant = 'project',
  milestone,
  existingFiles = [],
+  teamMembers = [],
  onSave,
  onClose,
  saving,
 }: StageModalProps) {
+  const isRoutine = variant === 'routine';
  const sortedExisting = useMemo(() => sortFilesByOrder(existingFiles), [existingFiles]);

-  const [form, setForm] = useState<StageFormData>({
-    title: milestone?.title ?? '',
-    startDate: toDateInput(milestone?.startDate),
-    dueDate: toDateInput(milestone?.dueDate),
-    progress: milestone?.progress ?? 0,
-    description: milestone?.description ?? '',
-    links: parseLinks(milestone?.links),
+  const [form, setForm] = useState<StageFormData>(() => {
+    const legacyOverview = isRoutine
+      ? decodeRoutineStageDescription(milestone?.description).overview
+      : '';
+    return {
+      title: milestone?.title ?? '',
+      subtitle: milestone?.subtitle?.trim() ?? legacyOverview,
+      periodEntries: parseMilestonePeriods(milestone),
+      progress: milestone?.progress ?? 0,
+      links: parseLinks(milestone?.links),
+      pmMemberId: milestone?.pmMemberId ?? milestone?.pmMember?.id ?? '',
+      assigneeMemberIds: milestone?.assigneeMembers?.map((m) => m.id) ?? [],
+    };
  });

  const [fileRows, setFileRows] = useState<FileRow[]>([]);
@@ -163,6 +176,49 @@ export function StageModal({
  const set = <K extends keyof StageFormData>(key: K, value: StageFormData[K]) =>
    setForm((prev) => ({ ...prev, [key]: value }));

+  const toggleAssignee = (memberId: string) => {
+    setForm((prev) => {
+      const has = prev.assigneeMemberIds.includes(memberId);
+      return {
+        ...prev,
+        assigneeMemberIds: has
+          ? prev.assigneeMemberIds.filter((id) => id !== memberId)
+          : [...prev.assigneeMemberIds, memberId],
+      };
+    });
+  };
+
+  const addPeriodEntry = () => {
+    setForm((prev) => ({
+      ...prev,
+      periodEntries: [...prev.periodEntries, newPeriodEntry()],
+    }));
+  };
+
+  const updatePeriodEntry = (id: string, patch: Partial<MilestonePeriodEntry>) => {
+    setForm((prev) => ({
+      ...prev,
+      periodEntries: prev.periodEntries.map((entry) =>
+        entry.id === id ? { ...entry, ...patch } : entry,
+      ),
+    }));
+  };
+
+  const removePeriodEntry = (id: string) => {
+    setForm((prev) => ({
+      ...prev,
+      periodEntries: prev.periodEntries.filter((entry) => entry.id !== id),
+    }));
+  };
+
+  const modalTitle = isRoutine
+    ? mode === 'add'
+      ? '업무 단계 추가'
+      : '업무 단계 수정'
+    : mode === 'add'
+      ? '업무 일정 추가'
+      : '업무 일정 수정';
+
  const clearEdit = () => {
    setEditTarget(null);
    setEditDisplayName('');
@@ -345,9 +401,7 @@ export function StageModal({
        onSubmit={handleSubmit}
      >
        <div className="shrink-0 border-b border-slate-100 px-6 py-4">
-          <h2 className="text-xl font-black text-slate-800">
-            {mode === 'add' ? '업무 단계 추가' : '업무 단계 수정'}
-          </h2>
+          <h2 className="text-xl font-black text-slate-800">{modalTitle}</h2>
        </div>

        <div className="space-y-4 overflow-y-auto px-6 py-4">
@@ -362,6 +416,18 @@ export function StageModal({
            />
          </label>

+          {isRoutine && (
+            <label className="block">
+              <span className="mb-1 block text-sm font-bold text-slate-500">부제목</span>
+              <input
+                value={form.subtitle}
+                onChange={(e) => set('subtitle', e.target.value)}
+                className="w-full rounded-lg border border-slate-200 px-3 py-2 text-base focus:border-emerald-400 focus:outline-none"
+                placeholder="업무명 아래 표시 (선택)"
+              />
+            </label>
+          )}
+
          <label className="block">
            <span className="mb-1 flex items-center justify-between text-sm font-bold text-slate-500">
              <span>진행률</span>
@@ -378,37 +444,120 @@ export function StageModal({
            />
          </label>

-          <div className="grid grid-cols-2 gap-3">
-            <label className="block">
-              <span className="mb-1 block text-sm font-bold text-slate-500">시작일</span>
-              <input
-                type="date"
-                value={form.startDate}
-                onChange={(e) => set('startDate', e.target.value)}
-                className="w-full rounded-lg border border-slate-200 px-3 py-2 text-sm focus:border-emerald-400 focus:outline-none"
-              />
-            </label>
-            <label className="block">
-              <span className="mb-1 block text-sm font-bold text-slate-500">종료일</span>
-              <input
-                type="date"
-                value={form.dueDate}
-                onChange={(e) => set('dueDate', e.target.value)}
-                className="w-full rounded-lg border border-slate-200 px-3 py-2 text-sm focus:border-emerald-400 focus:outline-none"
-              />
-            </label>
+          <div>
+            <div className="mb-2 flex items-center justify-between">
+              <span className="text-sm font-bold text-slate-500">수행 기간</span>
+              <button
+                type="button"
+                onClick={addPeriodEntry}
+                className="rounded-lg px-2 py-1 text-xs font-bold text-emerald-600 transition hover:bg-emerald-50 hover:text-emerald-700"
+              >
+                + 기간 추가
+              </button>
+            </div>
+            {form.periodEntries.length === 0 ? (
+              <p className="rounded-lg border border-dashed border-slate-200 px-4 py-3 text-center text-sm text-slate-400">
+                등록된 기간이 없습니다. 보류 후 재개·분기별 수행 등 기간을 추가하세요.
+              </p>
+            ) : (
+              <div className="space-y-2">
+                {form.periodEntries.map((entry, index) => (
+                  <div
+                    key={entry.id}
+                    className="space-y-2 rounded-xl border border-slate-200 bg-slate-50/60 p-3"
+                  >
+                    <div className="flex items-center justify-between gap-2">
+                      <span className="text-xs font-bold text-slate-500">기간 {index + 1}</span>
+                      <button
+                        type="button"
+                        onClick={() => removePeriodEntry(entry.id)}
+                        className="rounded-lg px-2 py-1 text-xs font-bold text-red-500 transition hover:bg-red-50 hover:text-red-600"
+                      >
+                        삭제
+                      </button>
+                    </div>
+                    <div className="grid grid-cols-2 gap-2">
+                      <label className="block">
+                        <span className="mb-1 block text-xs font-semibold text-slate-500">시작일</span>
+                        <input
+                          type="date"
+                          value={entry.startDate}
+                          onChange={(e) => updatePeriodEntry(entry.id, { startDate: e.target.value })}
+                          className="w-full rounded-lg border border-slate-200 bg-white px-3 py-2 text-sm focus:border-emerald-400 focus:outline-none"
+                        />
+                      </label>
+                      <label className="block">
+                        <span className="mb-1 block text-xs font-semibold text-slate-500">종료일</span>
+                        <input
+                          type="date"
+                          value={entry.dueDate}
+                          onChange={(e) => updatePeriodEntry(entry.id, { dueDate: e.target.value })}
+                          className="w-full rounded-lg border border-slate-200 bg-white px-3 py-2 text-sm focus:border-emerald-400 focus:outline-none"
+                        />
+                      </label>
+                    </div>
+                    <label className="block">
+                      <span className="mb-1 block text-xs font-semibold text-slate-500">업무내용</span>
+                      <textarea
+                        value={entry.note}
+                        onChange={(e) => updatePeriodEntry(entry.id, { note: e.target.value })}
+                        rows={2}
+                        className="w-full resize-none rounded-lg border border-slate-200 bg-white px-3 py-2 text-sm focus:border-emerald-400 focus:outline-none"
+                        placeholder="이 기간에 수행한 내용"
+                      />
+                    </label>
+                  </div>
+                ))}
+              </div>
+            )}
          </div>

-          <label className="block">
-            <span className="mb-1 block text-sm font-bold text-slate-500">업무내용</span>
-            <textarea
-              value={form.description}
-              onChange={(e) => set('description', e.target.value)}
-              rows={4}
-              className="w-full resize-none rounded-lg border border-slate-200 px-3 py-2 text-base focus:border-emerald-400 focus:outline-none"
-              placeholder="단계별 업무 내용 (줄바꿈 가능)"
-            />
-          </label>
+          {isRoutine && teamMembers.length > 0 && (
+            <div className="space-y-3 rounded-xl border border-emerald-100 bg-emerald-50/40 p-4">
+              <div>
+                <label className="mb-1 block text-sm font-bold text-slate-500">PM</label>
+                <select
+                  value={form.pmMemberId}
+                  onChange={(e) => set('pmMemberId', e.target.value)}
+                  className="w-full rounded-lg border border-slate-200 bg-white px-3 py-2 text-sm outline-none focus:border-emerald-400"
+                >
+                  <option value="">선택 안 함</option>
+                  {teamMembers.map((m) => (
+                    <option key={m.id} value={m.id}>
+                      {m.name}
+                      {m.rank ? ` · ${m.rank}` : ''}
+                    </option>
+                  ))}
+                </select>
+              </div>
+              <div>
+                <label className="mb-1.5 block text-sm font-bold text-slate-500">담당자 (복수 선택)</label>
+                <div className="flex flex-wrap gap-2">
+                  {teamMembers.map((m) => {
+                    const checked = form.assigneeMemberIds.includes(m.id);
+                    return (
+                      <label
+                        key={m.id}
+                        className={`inline-flex cursor-pointer select-none items-center gap-1.5 rounded-lg border px-3 py-1.5 text-sm font-semibold transition ${
+                          checked
+                            ? 'border-emerald-600 bg-emerald-600 text-white'
+                            : 'border-slate-200 bg-white text-slate-600 hover:border-emerald-300'
+                        }`}
+                      >
+                        <input
+                          type="checkbox"
+                          className="sr-only"
+                          checked={checked}
+                          onChange={() => toggleAssignee(m.id)}
+                        />
+                        {m.name}
+                      </label>
+                    );
+                  })}
+                </div>
+              </div>
+            </div>
+          )}

          {/* 첨부 자료 */}
          <div>
--- a/frontend/src/components/dummy/DummyDepartmentColumn.tsx
+++ b/frontend/src/components/dummy/DummyDepartmentColumn.tsx
@@ -0,0 +1,96 @@
+import { useEffect, useMemo, useState } from 'react';
+import { useQuery } from '@tanstack/react-query';
+import { apiClient } from '../../lib/apiClient';
+import {
+  columnDisplayTitle,
+  columnDisplayTitleEn,
+  type BoardSlotConfig,
+} from '../../lib/boardLayout';
+import { isProjectTask } from '../../lib/taskType';
+import { DeptIcon } from '../dashboard/DeptIcon';
+import { TaskCard } from '../dashboard/TaskCard';
+import { DeptProjectList } from '../dashboard/DeptProjectList';
+import type { Task } from '../../types';
+
+const SLOT_COUNT = 3;
+
+const DUMMY_HEADER_KEY = 'eene-board-slot-headers-v1';
+
+type DummyHeaders = Record<string, { title: string; titleEn: string; subtitle: string }>;
+
+function loadDummyHeaders(): DummyHeaders {
+  try {
+    const raw = localStorage.getItem(DUMMY_HEADER_KEY);
+    return raw ? JSON.parse(raw) : {};
+  } catch {
+    return {};
+  }
+}
+
+interface DummyDepartmentColumnProps {
+  slot: BoardSlotConfig;
+  tasks: Task[];
+  orderedIds: string[];
+}
+
+export function DummyDepartmentColumn({ slot, tasks, orderedIds }: DummyDepartmentColumnProps) {
+  const isDummySlot = !slot.sectionKey;
+
+  const { data: colConfig } = useQuery({
+    queryKey: ['columns', slot.sectionKey],
+    queryFn: () => apiClient.get(`/columns/${encodeURIComponent(slot.sectionKey!)}`).then((r) => r.data),
+    enabled: !!slot.sectionKey,
+    staleTime: 0,
+  });
+
+  const [dummyHeader, setDummyHeader] = useState(() => loadDummyHeaders()[slot.id]);
+
+  useEffect(() => {
+    setDummyHeader(loadDummyHeaders()[slot.id]);
+  }, [slot.id]);
+
+  const title = columnDisplayTitle(slot, colConfig, dummyHeader);
+  const titleEnState = columnDisplayTitleEn(slot, colConfig, dummyHeader);
+  const subtitle = isDummySlot ? dummyHeader?.subtitle ?? '' : colConfig?.subtitle ?? '';
+
+  const projectTasks = useMemo(() => {
+    const ordered = [...tasks].sort((a, b) => {
+      const ai = orderedIds.indexOf(a.id);
+      const bi = orderedIds.indexOf(b.id);
+      if (ai === -1 && bi === -1) return 0;
+      if (ai === -1) return 1;
+      if (bi === -1) return -1;
+      return ai - bi;
+    });
+    return ordered.filter((t) => isProjectTask(t.taskType)).slice(0, SLOT_COUNT);
+  }, [tasks, orderedIds]);
+
+  return (
+    <section className={`dept-card ${slot.cssClass}`}>
+      <div className="dept-head">
+        <div className="dept-head-main">
+          <DeptIcon slotId={slot.id} />
+          <div className="board-dept-header-main">
+            <div className="board-dept-title-wrap">
+              <span className="board-dept-title" role="heading" aria-level={2}>
+                {title.replace(/\s*부문$/, '')}
+              </span>
+              {titleEnState && <span className="board-dept-title-en">{titleEnState}</span>}
+              <div className="dept-head-count" aria-label={`${projectTasks.length}건`}>
+                <span className="poly-stat-val">{projectTasks.length}</span>
+                <span className="poly-stat-unit">건</span>
+              </div>
+            </div>
+            {subtitle && <p className="board-dept-subtitle">{subtitle}</p>}
+          </div>
+        </div>
+      </div>
+
+      <DeptProjectList
+        items={projectTasks}
+        getKey={(task) => task.id}
+        renderItem={(task) => <TaskCard key={task.id} task={task} variant="project" />}
+      />
+    </section>
+  );
+}
--- a/frontend/src/hooks/useBoardConnectors.ts
+++ b/frontend/src/hooks/useBoardConnectors.ts
@@ -34,7 +34,98 @@ function relBox(el: Element, parent: Element): Box {
 }

 function snap(n: number) {
-  return Math.round(n * 2) / 2;
+  return Math.round(n * 100) / 100;
+}
+
+/** 참고 레이아웃: 카드 변 부메랑(둔각 다이아) 끝점 */
+function appendBoomerangMarker(
+  group: SVGGElement,
+  at: Point,
+  side: 'left' | 'right',
+  fill: string,
+) {
+  const dir = side === 'right' ? 1 : -1;
+  const tipLen = 7;
+  const wing = 4.5;
+  const pts = [
+    [at.x + dir * tipLen, at.y],
+    [at.x + dir * 1.5, at.y - wing],
+    [at.x - dir * 2.5, at.y],
+    [at.x + dir * 1.5, at.y + wing],
+  ]
+    .map(([x, y]) => `${snap(x)},${snap(y)}`)
+    .join(' ');
+  const poly = document.createElementNS(SVG_NS, 'polygon');
+  poly.setAttribute('points', pts);
+  poly.setAttribute('fill', fill);
+  group.appendChild(poly);
+}
+
+/** 참고 레이아웃: 허브 박스 연결부 V형 부메랑 (박스 안쪽 방향) */
+function appendHubBoomerangMarker(
+  group: SVGGElement,
+  at: Point,
+  dir: 'up' | 'down',
+  fill: string,
+) {
+  const sign = dir === 'down' ? 1 : -1;
+  const tipLen = 5.5;
+  const wing = 5;
+  const base = 3;
+  const pts = [
+    [at.x, at.y + sign * tipLen],
+    [at.x - wing, at.y - sign * base],
+    [at.x + wing, at.y - sign * base],
+  ]
+    .map(([x, y]) => `${snap(x)},${snap(y)}`)
+    .join(' ');
+  const poly = document.createElementNS(SVG_NS, 'polygon');
+  poly.setAttribute('points', pts);
+  poly.setAttribute('fill', fill);
+  group.appendChild(poly);
+}
+
+function pathLength(a: Point, b: Point) {
+  return Math.hypot(b.x - a.x, b.y - a.y);
+}
+
+/** snap·배율 100%에서도 0px 세그먼트가 되지 않도록 보정 */
+function normalizePathPoints(points: Point[], minSeg = 1.25): Point[] {
+  if (points.length < 2) return points;
+  const out: Point[] = [{ ...points[0] }];
+  for (let i = 1; i < points.length; i++) {
+    const prev = out[out.length - 1];
+    const cur = { ...points[i] };
+    const len = pathLength(prev, cur);
+    if (len < minSeg) {
+      const ref =
+        i + 1 < points.length
+          ? points[i + 1]
+          : i > 0
+            ? points[i - 1]
+            : cur;
+      let dx = cur.x - prev.x;
+      let dy = cur.y - prev.y;
+      if (len < 0.01) {
+        dx = ref.x - prev.x;
+        dy = ref.y - prev.y;
+      }
+      const d = Math.hypot(dx, dy) || 1;
+      out.push({ x: prev.x + (dx / d) * minSeg, y: prev.y + (dy / d) * minSeg });
+    } else {
+      out.push(cur);
+    }
+  }
+  return out;
+}
+
+/** reference 상·하: 허브 테두리 ↔ 다이아 꼭짓점 (wrap clamp·stub 보정 없음) */
+function referenceVerticalLine(cx: number, yHub: number, yDiamond: number): Point[] {
+  if (Math.abs(yDiamond - yHub) < 0.5) return [];
+  return [
+    { x: cx, y: yHub },
+    { x: cx, y: yDiamond },
+  ];
 }

 function pointsToPath(points: Point[]) {
@@ -59,12 +150,42 @@ function diamondEdgeMidpoint(cx: number, cy: number, size: number, edge: string)
  return { x: cx + d, y: cy + d };
 }

+/** 다이아몬드 변 중점에서 바깥(테두리)쪽으로 살짝 밀어 연결 */
+function diamondBorderEdgeMidpoint(
+  cx: number,
+  cy: number,
+  size: number,
+  edge: string,
+  outward = 2,
+): Point {
+  const mid = diamondEdgeMidpoint(cx, cy, size, edge);
+  const dx = mid.x - cx;
+  const dy = mid.y - cy;
+  const len = Math.hypot(dx, dy) || 1;
+  return { x: mid.x + (dx / len) * outward, y: mid.y + (dy / len) * outward };
+}
+
 function cardEdgeAnchor(cardEl: Element, layout: Element, side: 'left' | 'right', y: number): Point {
  const cardBox = relBox(cardEl, layout);
  const clampedY = Math.max(cardBox.top + 10, Math.min(cardBox.bottom - 10, y));
  return { x: side === 'right' ? cardBox.right : cardBox.left, y: clampedY };
 }

+/** 참고 레이아웃: 카드 안쪽 변 — 위 행은 중앙보다 살짝 아래, 아래 행은 살짝 위 */
+function cardReferenceInnerEdgeAnchor(
+  cardEl: Element,
+  layout: Element,
+  side: 'left' | 'right',
+  vert: 'top' | 'bottom',
+): Point {
+  const cardBox = relBox(cardEl, layout);
+  const offset = Math.min(36, Math.max(22, cardBox.height * 0.09));
+  const yShift = vert === 'top' ? offset : -offset;
+  const pad = 14;
+  const y = Math.max(cardBox.top + pad, Math.min(cardBox.bottom - pad, cardBox.cy + yShift));
+  return { x: side === 'right' ? cardBox.right : cardBox.left, y };
+}
+
 const FACE_LINKS = [
  { edge: 'top-left', card: '.dept-card--hrm', side: 'right' as const, vert: 'top' as const, knee: 'left' as const },
  { edge: 'top-right', card: '.dept-card--hrd', side: 'left' as const, vert: 'top' as const, knee: 'right' as const },
@@ -89,10 +210,60 @@ function buildBentPath(
  return [cardAnchor, { x: x1, y: cardAnchor.y }, { x: approachX, y: edgeMid.y }, edgeMid];
 }

+/** 참고 레이아웃: 카드 → 짧은 수평 → ~120° 둔각 꺾임 → 대각 → 다이아몬드 */
+function buildReferenceElbowPath(
+  cardAnchor: Point,
+  edgeMid: Point,
+  side: 'left' | 'right',
+  vert: 'top' | 'bottom',
+): Point[] {
+  const towardCenter = side === 'right' ? 1 : -1;
+  const turnSign = vert === 'top' ? -1 : 1;
+  const turn = Math.PI / 3; // 60° 꺾임 → 내각 120°
+  const uOutX = towardCenter * Math.cos(turn);
+  const uOutY = turnSign * Math.sin(turn);
+
+  const minStub = 18;
+  const maxStub = 64;
+
+  let knee: Point;
+  if (Math.abs(uOutY) > 1e-4) {
+    const t = (cardAnchor.y - edgeMid.y) / uOutY;
+    knee = { x: edgeMid.x - t * uOutX, y: cardAnchor.y };
+  } else {
+    knee = { x: cardAnchor.x + towardCenter * minStub, y: cardAnchor.y };
+  }
+
+  const stub = (knee.x - cardAnchor.x) * towardCenter;
+  if (!Number.isFinite(stub) || stub < minStub || stub > maxStub) {
+    knee = { x: cardAnchor.x + towardCenter * Math.max(minStub, Math.min(maxStub, stub || minStub)), y: cardAnchor.y };
+  }
+
+  return [cardAnchor, knee, edgeMid];
+}
+
 function anchorYForSymmetricFace(faceY: number, runX: number, vert: 'top' | 'bottom') {
  return vert === 'top' ? faceY + runX : faceY - runX;
 }

+const REF_HUB_LINE_COLOR = '#c5d2de';
+const REF_HUB_DOT_COLOR = '#b8c6d4';
+/** 둥근 꼭짓점 — 선 끝은 테두리 밖(다이아 레이어에 가려짐) */
+const REF_DIAMOND_LINE_OVERLAP = 0;
+
+/** reference 상·하: 실제 렌더 박스 + border-radius 보정 (기하 topV는 둥근 꼭짓점보다 바깥) */
+function referenceDiamondVerticalY(
+  diamondEl: HTMLElement,
+  diamondBox: Box,
+  end: 'top' | 'bottom',
+): number {
+  const r = parseFloat(getComputedStyle(diamondEl).borderRadius) || 16;
+  const tipOffset = Math.min(r * 0.7, diamondBox.height * 0.07);
+  return end === 'top'
+    ? diamondBox.top + tipOffset + REF_DIAMOND_LINE_OVERLAP
+    : diamondBox.bottom - tipOffset - REF_DIAMOND_LINE_OVERLAP;
+}
+
 function fitDiamond(hubColumn: HTMLElement | null, diamond: HTMLElement | null) {
  if (!hubColumn || !diamond || window.innerWidth <= 1200) return;
  const wrap = diamond.parentElement;
@@ -109,9 +280,13 @@ function fitDiamond(hubColumn: HTMLElement | null, diamond: HTMLElement | null)
  diamond.style.height = `${size}px`;
 }

-export function useBoardConnectors(enabled = true) {
+export type ConnectorStyle = 'default' | 'reference';
+
+export function useBoardConnectors(enabled = true, style: ConnectorStyle = 'default') {
  const lineGroupRef = useRef<SVGGElement>(null);
  const svgRef = useRef<SVGSVGElement>(null);
+  const dotGroupRef = useRef<SVGGElement>(null);
+  const dotSvgRef = useRef<SVGSVGElement>(null);

  useEffect(() => {
    if (!enabled) return;
@@ -124,29 +299,73 @@ export function useBoardConnectors(enabled = true) {
      const hubColumn = document.getElementById('hub-column');
      const lineGroup = lineGroupRef.current;
      const svg = svgRef.current;
+      const dotGroup = dotGroupRef.current;
+      const dotSvg = dotSvgRef.current;
      if (!layout || !diamond || !lineGroup || !svg) return;

      fitDiamond(hubColumn, diamond);

+      requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+          if (!layout.isConnected || !diamond.isConnected) return;
+          drawConnectorsNow(
+            layout,
+            diamond,
+            hubColumn,
+            lineGroup,
+            svg,
+            dotGroup,
+            dotSvg,
+          );
+        });
+      });
+    };
+
+    const drawConnectorsNow = (
+      layout: Element,
+      diamond: HTMLElement,
+      hubColumn: HTMLElement | null,
+      lineGroup: SVGGElement,
+      svg: SVGSVGElement,
+      dotGroup: SVGGElement | null,
+      dotSvg: SVGSVGElement | null,
+    ) => {
      if (window.innerWidth <= 1200) {
        lineGroup.innerHTML = '';
+        dotGroup && (dotGroup.innerHTML = '');
        svg.removeAttribute('viewBox');
+        dotSvg?.removeAttribute('viewBox');
        return;
      }

      const layoutBox = layout.getBoundingClientRect();
      const diamondBox = relBox(diamond, layout);
      const diamondSize = diamond.offsetWidth;
-      const { cx, cy } = diamondBox;
+      const diamondCx = diamondBox.cx;
+      const diamondCy = diamondBox.cy;

      svg.setAttribute('viewBox', `0 0 ${layoutBox.width} ${layoutBox.height}`);
      lineGroup.innerHTML = '';
+      if (dotGroup) dotGroup.innerHTML = '';
+      if (dotSvg) dotSvg.setAttribute('viewBox', `0 0 ${layoutBox.width} ${layoutBox.height}`);

-      const topV = diamondVertex(cx, cy, diamondSize, 'top');
-      const bottomV = diamondVertex(cx, cy, diamondSize, 'bottom');
+      const topV = diamondVertex(diamondCx, diamondCy, diamondSize, 'top');
+      const bottomV = diamondVertex(diamondCx, diamondCy, diamondSize, 'bottom');

-      const msgBox = document.querySelector('.hub-postit-sheet--front');
-      const focusBox = document.querySelector('.hub-schedule-planner');
+      const hubColumnEl = layout.querySelector('.hub-column, #hub-column');
+      const hubBoxEls = hubColumnEl
+        ? Array.from(hubColumnEl.querySelectorAll(':scope > .hub-box'))
+        : [];
+      const topHubBox =
+        hubBoxEls[0] ??
+        (style === 'reference'
+          ? layout.querySelector('.hub-box--message')
+          : layout.querySelector('.hub-postit-sheet--front'));
+      const bottomHubBox =
+        (hubBoxEls.length > 1 ? hubBoxEls[hubBoxEls.length - 1] : hubBoxEls[0]) ??
+        (style === 'reference'
+          ? layout.querySelector('.hub-box--focus')
+          : layout.querySelector('.hub-schedule-planner'));

      const hubBox = hubColumn ? relBox(hubColumn, layout) : null;
      const hrmBox = document.querySelector('.dept-card--hrm');
@@ -166,39 +385,138 @@ export function useBoardConnectors(enabled = true) {

      const d = diamondSize / (2 * Math.SQRT2);
      const approachGap = 32;
-      const leftApproachX = cx - d - approachGap;
-      const rightApproachX = cx + d + approachGap;
+      const leftApproachX = diamondCx - d - approachGap;
+      const rightApproachX = diamondCx + d + approachGap;
      const leftRunX = Math.max(12, leftApproachX - kneeXs.left);
      const rightRunX = Math.max(12, kneeXs.right - rightApproachX);

-      const appendPath = (points: Point[]) => {
-        const path = document.createElementNS(SVG_NS, 'path');
-        path.setAttribute('d', pointsToPath(points));
-        path.setAttribute('stroke', '#b0bcc8');
-        path.setAttribute('stroke-width', '2.5');
-        path.setAttribute('opacity', '0.85');
-        path.setAttribute('fill', 'none');
-        lineGroup.appendChild(path);
+      const REF_CARD_LINE_COLORS: Record<string, string> = {
+        '.dept-card--hrm': '#4a90d9',
+        '.dept-card--hrd': '#37a184',
+        '.dept-card--ex': '#9168b8',
+        '.dept-card--ga': '#2563ab',
+      };
+
+      const appendPath = (
+        points: Point[],
+        opts?: {
+          cardSelector?: string;
+          dotAt?: Point;
+          vertical?: boolean;
+          markerSide?: 'left' | 'right';
+          markerDir?: 'up' | 'down';
+        },
+      ) => {
+        if (points.length < 2) return;
+
+        const cardSelector = opts?.cardSelector;
+        const stroke =
+          opts?.vertical
+            ? REF_HUB_LINE_COLOR
+            : style === 'reference' && cardSelector
+              ? REF_CARD_LINE_COLORS[cardSelector] ?? REF_HUB_LINE_COLOR
+              : style === 'reference'
+                ? REF_HUB_LINE_COLOR
+                : '#b0bcc8';
+
+        if (opts?.vertical && points.length === 2) {
+          const [a, b] = points;
+          const line = document.createElementNS(SVG_NS, 'line');
+          line.setAttribute('x1', String(snap(a.x)));
+          line.setAttribute('y1', String(snap(a.y)));
+          line.setAttribute('x2', String(snap(b.x)));
+          line.setAttribute('y2', String(snap(b.y)));
+          line.setAttribute('stroke', stroke);
+          line.setAttribute('stroke-width', '2');
+          line.setAttribute('fill', 'none');
+          line.setAttribute('stroke-linecap', 'butt');
+          lineGroup.appendChild(line);
+        } else {
+          const path = document.createElementNS(SVG_NS, 'path');
+          const normalized = normalizePathPoints(points);
+          if (normalized.length < 2) return;
+          path.setAttribute('d', pointsToPath(normalized));
+          path.setAttribute('stroke', stroke);
+          path.setAttribute('stroke-width', style === 'reference' ? '2' : '2.5');
+          path.setAttribute('opacity', style === 'reference' ? '1' : '0.85');
+          path.setAttribute('fill', 'none');
+          path.setAttribute('stroke-linecap', style === 'reference' ? 'butt' : 'round');
+          path.setAttribute('stroke-linejoin', style === 'reference' ? 'miter' : 'round');
+          lineGroup.appendChild(path);
+        }
+
+        if (style === 'reference' && opts?.dotAt && dotGroup) {
+          const fill =
+            cardSelector ? (REF_CARD_LINE_COLORS[cardSelector] ?? REF_HUB_DOT_COLOR) : REF_HUB_DOT_COLOR;
+          if (cardSelector && opts.markerSide) {
+            appendBoomerangMarker(dotGroup, opts.dotAt, opts.markerSide, fill);
+          } else if (opts.markerDir) {
+            appendHubBoomerangMarker(dotGroup, opts.dotAt, opts.markerDir, fill);
+          } else {
+            const dot = document.createElementNS(SVG_NS, 'circle');
+            dot.setAttribute('cx', String(snap(opts.dotAt.x)));
+            dot.setAttribute('cy', String(snap(opts.dotAt.y)));
+            dot.setAttribute('r', '4');
+            dot.setAttribute('fill', fill);
+            dotGroup.appendChild(dot);
+          }
+        }
      };

      FACE_LINKS.forEach((link) => {
        const cardEl = document.querySelector(link.card);
        if (!cardEl) return;
-        const edgeMid = diamondEdgeMidpoint(cx, cy, diamondSize, link.edge);
+        const edgeMid =
+          style === 'reference'
+            ? diamondBorderEdgeMidpoint(diamondCx, diamondCy, diamondSize, link.edge)
+            : diamondEdgeMidpoint(diamondCx, diamondCy, diamondSize, link.edge);
        const runX = link.knee === 'left' ? leftRunX : rightRunX;
        const approachX = link.knee === 'left' ? leftApproachX : rightApproachX;
-          const anchorY = anchorYForSymmetricFace(edgeMid.y, runX, link.vert);
-        const cardAnchor = cardEdgeAnchor(cardEl, layout, link.side, anchorY);
-        appendPath(buildBentPath(cardAnchor, edgeMid, link.side, kneeXs[link.knee], approachX));
+        const cardAnchor =
+          style === 'reference'
+            ? cardReferenceInnerEdgeAnchor(cardEl, layout, link.side, link.vert)
+            : cardEdgeAnchor(
+                cardEl,
+                layout,
+                link.side,
+                anchorYForSymmetricFace(edgeMid.y, runX, link.vert),
+              );
+        const pathPoints =
+          style === 'reference'
+            ? buildReferenceElbowPath(cardAnchor, edgeMid, link.side, link.vert)
+            : buildBentPath(cardAnchor, edgeMid, link.side, kneeXs[link.knee], approachX);
+
+        if (style === 'reference') {
+          appendPath(pathPoints, {
+            cardSelector: link.card,
+            dotAt: cardAnchor,
+            markerSide: link.side,
+          });
+        } else {
+          appendPath(pathPoints);
+        }
      });

-      if (msgBox) {
-        const msg = relBox(msgBox, layout);
-        appendPath([topV, { x: cx, y: msg.bottom }]);
+      if (style === 'reference' && topHubBox) {
+        const topHub = relBox(topHubBox, layout);
+        const hubAnchor = { x: diamondCx, y: topHub.bottom };
+        const diamondTopY = referenceDiamondVerticalY(diamond, diamondBox, 'top');
+        const topPoints = referenceVerticalLine(diamondCx, hubAnchor.y, diamondTopY);
+        appendPath(topPoints, { vertical: true, dotAt: hubAnchor, markerDir: 'down' });
+      } else if (topHubBox) {
+        const topHub = relBox(topHubBox, layout);
+        appendPath([topV, { x: diamondCx, y: topHub.bottom }]);
      }
-      if (focusBox) {
-        const focus = relBox(focusBox, layout);
-        appendPath([bottomV, { x: cx, y: focus.top }]);
+
+      if (style === 'reference' && bottomHubBox) {
+        const bottomHub = relBox(bottomHubBox, layout);
+        const hubAnchor = { x: diamondCx, y: bottomHub.top };
+        const diamondBottomY = referenceDiamondVerticalY(diamond, diamondBox, 'bottom');
+        const bottomPoints = referenceVerticalLine(diamondCx, diamondBottomY, hubAnchor.y);
+        appendPath(bottomPoints, { vertical: true, dotAt: hubAnchor, markerDir: 'up' });
+      } else if (bottomHubBox) {
+        const bottomHub = relBox(bottomHubBox, layout);
+        appendPath([bottomV, { x: diamondCx, y: bottomHub.top }]);
      }
    };

@@ -217,10 +535,12 @@ export function useBoardConnectors(enabled = true) {
    }

    const layoutEl = document.querySelector('.board-layout');
+    const hubColEl = document.getElementById('hub-column');
    let ro: ResizeObserver | undefined;
-    if (layoutEl && typeof ResizeObserver !== 'undefined') {
+    if (typeof ResizeObserver !== 'undefined') {
      ro = new ResizeObserver(scheduleDraw);
-      ro.observe(layoutEl);
+      if (layoutEl) ro.observe(layoutEl);
+      if (hubColEl) ro.observe(hubColEl);
    }

    return () => {
@@ -228,7 +548,7 @@ export function useBoardConnectors(enabled = true) {
      clearTimeout(resizeTimer);
      ro?.disconnect();
    };
-  }, [enabled]);
+  }, [enabled, style]);

-  return { svgRef, lineGroupRef };
+  return { svgRef, lineGroupRef, dotSvgRef, dotGroupRef };
 }
--- a/frontend/src/hooks/useBoardReferenceDate.ts
+++ b/frontend/src/hooks/useBoardReferenceDate.ts
@@ -0,0 +1,42 @@
+import { useCallback, useMemo, useState } from 'react';
+
+import {
+  BOARD_REF_DATE_KEY,
+  dateToQuarter,
+  parseIsoDate,
+  startOfDay,
+  toIsoDate,
+} from '../lib/boardCalendar';
+
+export function useBoardReferenceDate() {
+  const [referenceDate, setReferenceDateState] = useState<Date>(() => {
+    try {
+      const stored = localStorage.getItem(BOARD_REF_DATE_KEY);
+      if (stored) {
+        const parsed = parseIsoDate(stored);
+        if (parsed) return startOfDay(parsed);
+      }
+    } catch {
+      /* ignore */
+    }
+    return startOfDay(new Date());
+  });
+
+  const setReferenceDate = useCallback((d: Date) => {
+    const normalized = startOfDay(d);
+    setReferenceDateState(normalized);
+    try {
+      localStorage.setItem(BOARD_REF_DATE_KEY, toIsoDate(normalized));
+    } catch {
+      /* ignore */
+    }
+  }, []);
+
+  const quarter = useMemo(() => dateToQuarter(referenceDate), [referenceDate]);
+
+  const resetToToday = useCallback(() => {
+    setReferenceDate(startOfDay(new Date()));
+  }, [setReferenceDate]);
+
+  return { referenceDate, setReferenceDate, quarter, resetToToday };
+}
--- a/frontend/src/hooks/useFileBuffer.ts
+++ b/frontend/src/hooks/useFileBuffer.ts
@@ -0,0 +1,92 @@
+import { useEffect, useState } from 'react';
+import { fileViewUrl } from '../lib/apiClient';
+
+export function useFileArrayBuffer(fileId: string | null) {
+  const [buffer, setBuffer] = useState<ArrayBuffer | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!fileId) {
+      setBuffer(null);
+      setError(null);
+      setLoading(false);
+      return;
+    }
+
+    let cancelled = false;
+    setLoading(true);
+    setError(null);
+    setBuffer(null);
+
+    fetch(fileViewUrl(fileId))
+      .then((res) => {
+        if (!res.ok) throw new Error('파일을 불러올 수 없습니다.');
+        return res.arrayBuffer();
+      })
+      .then((data) => {
+        if (!cancelled) {
+          setBuffer(data);
+          setLoading(false);
+        }
+      })
+      .catch((e) => {
+        if (!cancelled) {
+          setError(e instanceof Error ? e.message : '미리보기 실패');
+          setLoading(false);
+        }
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [fileId]);
+
+  return { buffer, loading, error };
+}
+
+export function useFileBlobUrl(fileId: string | null, mime: string) {
+  const [blobUrl, setBlobUrl] = useState<string | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!fileId) {
+      setBlobUrl(null);
+      setError(null);
+      setLoading(false);
+      return;
+    }
+
+    let cancelled = false;
+    let objectUrl: string | null = null;
+    setLoading(true);
+    setError(null);
+    setBlobUrl(null);
+
+    fetch(fileViewUrl(fileId))
+      .then((res) => {
+        if (!res.ok) throw new Error('파일을 불러올 수 없습니다.');
+        return res.arrayBuffer();
+      })
+      .then((data) => {
+        if (cancelled) return;
+        objectUrl = URL.createObjectURL(new Blob([data], { type: mime }));
+        setBlobUrl(objectUrl);
+        setLoading(false);
+      })
+      .catch((e) => {
+        if (!cancelled) {
+          setError(e instanceof Error ? e.message : '미리보기 실패');
+          setLoading(false);
+        }
+      });
+
+    return () => {
+      cancelled = true;
+      if (objectUrl) URL.revokeObjectURL(objectUrl);
+    };
+  }, [fileId, mime]);
+
+  return { blobUrl, loading, error };
+}
--- a/frontend/src/hooks/useRoutineCategoryMilestones.ts
+++ b/frontend/src/hooks/useRoutineCategoryMilestones.ts
@@ -0,0 +1,58 @@
+import { useQueries } from '@tanstack/react-query';
+
+import { apiClient } from '../lib/apiClient';
+import {
+  ROUTINE_CATEGORIES,
+  pickRoutineCategoryTask,
+  type RoutineCategory,
+} from '../lib/routineCategories';
+import type { Milestone, Task } from '../types';
+
+type TaskWithMilestones = Task & { milestones?: Milestone[] };
+
+export interface RoutineFocusMilestone {
+  id: string;
+  title: string;
+}
+
+export interface RoutineCategoryFocus {
+  category: RoutineCategory;
+  task: Task | null;
+  milestones: RoutineFocusMilestone[];
+  isLoading: boolean;
+}
+
+export function useRoutineCategoryMilestones(routineTasks: Task[]): RoutineCategoryFocus[] {
+  const shells = ROUTINE_CATEGORIES.map((category) => ({
+    category,
+    task: pickRoutineCategoryTask(routineTasks, category),
+  }));
+
+  const queries = useQueries({
+    queries: shells.map(({ task }) => ({
+      queryKey: ['task', task?.id, 'hub-routine-focus'],
+      queryFn: async () => {
+        const { data } = await apiClient.get<TaskWithMilestones>(`/tasks/${task!.id}`);
+        return data;
+      },
+      enabled: !!task?.id,
+      staleTime: 30_000,
+    })),
+  });
+
+  return shells.map(({ category, task }, index) => {
+    const data = queries[index].data;
+    const milestones = (data?.milestones ?? [])
+      .slice()
+      .sort((a, b) => a.order - b.order)
+      .map((m) => ({ id: m.id, title: m.title.trim() }))
+      .filter((m) => m.title);
+
+    return {
+      category,
+      task,
+      milestones,
+      isLoading: queries[index].isLoading && !!task?.id,
+    };
+  });
+}
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -1,5 +1,18 @@
@import "tailwindcss";

+:root {
+  --app-header-bg: linear-gradient(180deg, #37a184 0%, #29724f 20%, #07412e 100%);
+  --app-header-border: #135643;
+  --app-header-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+  --board-cal-accent: #059669;
+  --board-cal-accent-dark: #047857;
+  --board-cal-accent-deep: #065f46;
+  --board-cal-border: #a7d7c5;
+  --board-cal-surface: #ecfdf5;
+  --board-cal-surface-hover: #d1fae5;
+  --board-cal-muted: #64748b;
+}
+
 html,
 body,
 #root {
@@ -97,12 +110,222 @@ body,
  height: 48px;
  min-height: 48px;
  padding: 0 22px 0 20px;
-  background: linear-gradient(180deg, #37a184 0%, #29724f 20%, #07412e 100%);
-  border-bottom: 1px solid #135643;
-  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+  background: var(--app-header-bg);
+  border-bottom: 1px solid var(--app-header-border);
+  box-shadow: var(--app-header-shadow);
  color: #fff;
 }

+.header-calendar-slot {
+  position: relative;
+  z-index: 101;
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  gap: 10px;
+}
+
+.board-calendar-ref-text {
+  padding: 6px 14px;
+  border: 1px solid rgba(186, 216, 202, 0.35);
+  border-radius: 999px;
+  background: rgba(7, 65, 46, 0.55);
+  color: #fff;
+  font-size: 13px;
+  font-weight: 700;
+  letter-spacing: -0.2px;
+  white-space: nowrap;
+}
+
+.board-calendar-popover {
+  position: fixed;
+  z-index: 10000;
+  width: min(400px, calc(100vw - 24px));
+  padding: 14px 14px 12px;
+  border: 1px solid var(--board-cal-border);
+  border-radius: 14px;
+  background: #fff;
+  box-shadow: 0 16px 40px rgba(7, 65, 46, 0.16);
+  color: #1f2937;
+}
+
+.board-calendar-popover-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 12px;
+}
+
+.board-calendar-month {
+  font-size: 16px;
+  font-weight: 800;
+  color: var(--board-cal-accent-deep);
+}
+
+.board-calendar-nav {
+  width: 30px;
+  height: 30px;
+  border: 1px solid var(--board-cal-border);
+  border-radius: 8px;
+  background: var(--board-cal-surface);
+  color: var(--board-cal-accent);
+  font-size: 18px;
+  line-height: 1;
+  cursor: pointer;
+}
+
+.board-calendar-nav:hover {
+  background: var(--board-cal-surface-hover);
+  border-color: var(--board-cal-accent);
+}
+
+.board-calendar-quarter-row {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 6px;
+  margin-bottom: 12px;
+}
+
+.board-calendar-quarter-chip {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 2px;
+  padding: 8px 4px;
+  border: 1px solid var(--board-cal-border);
+  border-radius: 8px;
+  background: #fff;
+  color: var(--board-cal-accent-deep);
+  cursor: pointer;
+}
+
+.board-calendar-quarter-chip:hover {
+  background: var(--board-cal-surface);
+  border-color: var(--board-cal-accent);
+}
+
+.board-calendar-quarter-chip.is-selected {
+  border-color: var(--board-cal-accent-dark);
+  background: linear-gradient(180deg, #37a184 0%, #047857 100%);
+  color: #fff;
+}
+
+.board-calendar-quarter-chip-title {
+  font-size: 13px;
+  font-weight: 800;
+}
+
+.board-calendar-quarter-chip-range {
+  font-size: 10px;
+  font-weight: 600;
+  opacity: 0.85;
+}
+
+.board-calendar-grid-wrap {
+  overflow-x: auto;
+}
+
+.board-calendar-grid {
+  width: 100%;
+  border-collapse: collapse;
+  table-layout: fixed;
+}
+
+.board-calendar-grid th {
+  padding: 4px 2px;
+  font-size: 11px;
+  font-weight: 700;
+  color: var(--board-cal-muted);
+  text-align: center;
+}
+
+.board-calendar-grid-week-col {
+  width: 72px;
+  text-align: left;
+}
+
+.board-calendar-week-label-btn {
+  padding: 0;
+  border: none;
+  background: none;
+  color: var(--board-cal-accent);
+  font-size: 11px;
+  font-weight: 700;
+  text-align: left;
+  white-space: nowrap;
+  cursor: pointer;
+}
+
+.board-calendar-week-label-btn:hover {
+  color: var(--board-cal-accent-dark);
+  text-decoration: underline;
+}
+
+.board-calendar-day-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  min-height: 28px;
+  padding: 0;
+  border: none;
+  border-radius: 6px;
+  background: transparent;
+  font-size: 12px;
+  font-weight: 600;
+  color: #1f2937;
+  cursor: pointer;
+}
+
+.board-calendar-day-btn.is-outside {
+  color: #cbd5e1;
+  font-weight: 500;
+}
+
+.board-calendar-day-btn.is-ref {
+  background: linear-gradient(180deg, #37a184 0%, #047857 100%);
+  color: #fff;
+}
+
+.board-calendar-day-btn.is-today:not(.is-ref) {
+  box-shadow: inset 0 0 0 1px var(--board-cal-accent);
+  color: var(--board-cal-accent);
+}
+
+.board-calendar-day-btn:hover:not(.is-ref) {
+  background: var(--board-cal-surface);
+}
+
+.board-calendar-grid tr.is-selected-week .board-calendar-week-label-btn {
+  color: var(--board-cal-accent-dark);
+}
+
+.board-calendar-foot {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  margin-top: 12px;
+  padding-top: 10px;
+  border-top: 1px solid #e5e7eb;
+}
+
+.board-calendar-foot button {
+  padding: 6px 14px;
+  border: 1px solid var(--board-cal-border);
+  border-radius: 8px;
+  background: #fff;
+  font-size: 12px;
+  font-weight: 700;
+  color: var(--board-cal-accent-deep);
+  cursor: pointer;
+}
+
+.board-calendar-foot button:hover {
+  background: var(--board-cal-surface);
+  border-color: var(--board-cal-accent);
+  color: var(--board-cal-accent-dark);
+}
+
 .side-left-group {
  display: flex;
  align-items: center;
@@ -119,6 +342,7 @@ body,
 /* F12 — 헤더 원형 아이콘 버튼 (team / + / 듀얼모니터) */
 .header-action-btn-new,
 .header-view-btn-new,
+.header-calendar-btn-new,
 .team-status-btn-new {
  display: flex;
  flex-shrink: 0;
@@ -137,6 +361,7 @@ body,

 .header-action-btn-new svg,
 .header-view-btn-new svg,
+.header-calendar-btn-new svg,
 .team-status-btn-new svg {
  color: inherit;
  filter: none;
@@ -144,6 +369,7 @@ body,

 .header-action-btn-new:hover,
 .header-view-btn-new:hover,
+.header-calendar-btn-new:hover,
 .team-status-btn-new:hover {
  color: #fff;
  border-color: #36816d;
@@ -158,6 +384,7 @@ body,
 .header-action-btn-new:active,
 .header-action-btn-new.active,
 .header-view-btn-new.active,
+.header-calendar-btn-new.active,
 .team-status-btn-new.active {
  color: #cef1eb;
  border-color: #1a4d42;
--- a/frontend/src/lib/apiBase.ts
+++ b/frontend/src/lib/apiBase.ts
@@ -48,6 +48,10 @@ export function getSocketUrl(): string {
  if (import.meta.env.VITE_SOCKET_URL) {
    return import.meta.env.VITE_SOCKET_URL;
  }
+  // dev: Vite proxy /socket.io → API (localhost·LAN IP 동일 origin)
+  if (import.meta.env.DEV && typeof window !== 'undefined') {
+    return window.location.origin;
+  }
  return getBackendOrigin();
 }

--- a/frontend/src/lib/apiClient.ts
+++ b/frontend/src/lib/apiClient.ts
@@ -21,6 +21,10 @@ export function fileDownloadUrl(fileId: string): string {
  return `${baseURL}/files/${fileId}/download`;
 }

+export function fileHwpPreviewUrl(fileId: string): string {
+  return `${baseURL}/files/${fileId}/hwp-preview`;
+}
+
 apiClient.interceptors.request.use((config) => {
  if (config.data instanceof FormData) {
    delete config.headers['Content-Type'];
@@ -34,6 +38,14 @@ apiClient.interceptors.response.use(
 );

 export function getApiErrorMessage(err: unknown, fallback: string): string {
-  const ax = err as { response?: { data?: { message?: string }; status?: number }; message?: string };
-  return ax.response?.data?.message || ax.message || fallback;
+  const ax = err as {
+    response?: { data?: { message?: string }; status?: number };
+    message?: string;
+    code?: string;
+  };
+  if (ax.response?.data?.message) return ax.response.data.message;
+  if (!ax.response && (ax.code === 'ERR_NETWORK' || ax.message?.includes('Network Error'))) {
+    return '서버에 연결할 수 없습니다. 서버 PC에서 서버시작.bat 이 실행 중인지 확인해 주세요.';
+  }
+  return ax.message || fallback;
 }
--- a/frontend/src/lib/boardCalendar.ts
+++ b/frontend/src/lib/boardCalendar.ts
@@ -0,0 +1,108 @@
+export const BOARD_REF_DATE_KEY = 'eene-board-reference-date';
+
+export function startOfDay(d: Date): Date {
+  return new Date(d.getFullYear(), d.getMonth(), d.getDate());
+}
+
+export function toIsoDate(d: Date): string {
+  return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
+}
+
+export function parseIsoDate(iso: string): Date | null {
+  if (!/^\d{4}-\d{2}-\d{2}$/.test(iso)) return null;
+  const [y, m, day] = iso.split('-').map(Number);
+  const dt = new Date(y, m - 1, day);
+  if (dt.getFullYear() !== y || dt.getMonth() !== m - 1 || dt.getDate() !== day) return null;
+  return dt;
+}
+
+export function dateToQuarter(d: Date): string {
+  const q = Math.floor(d.getMonth() / 3) + 1;
+  return `${d.getFullYear()}-Q${q}`;
+}
+
+export function quarterToLabel(quarter: string): string {
+  return quarter.replace(/^(\d{4})-Q(\d)$/, '$1 $2분기 업무');
+}
+
+export function weekOfMonthLabel(d: Date): string {
+  return `${d.getMonth() + 1}월 ${Math.ceil(d.getDate() / 7)}주차`;
+}
+
+export function quarterNumber(d: Date): number {
+  return Math.floor(d.getMonth() / 3) + 1;
+}
+
+export function formatReferenceSummary(d: Date): string {
+  return `기준일 ${toIsoDate(d)} · ${quarterNumber(d)}분기`;
+}
+
+/** @deprecated use formatReferenceSummary */
+export function formatReferencePill(d: Date): string {
+  return formatReferenceSummary(d);
+}
+
+export const QUARTER_RANGE_LABELS = ['1.01~3.31', '4.01~6.30', '7.01~9.30', '10.01~12.31'] as const;
+
+export function startOfWeekMonday(d: Date): Date {
+  const x = startOfDay(d);
+  const dow = x.getDay();
+  const offset = dow === 0 ? -6 : 1 - dow;
+  x.setDate(x.getDate() + offset);
+  return x;
+}
+
+export function quarterStartDate(quarter: string): Date {
+  const m = quarter.match(/^(\d{4})-Q([1-4])$/);
+  if (!m) return startOfDay(new Date());
+  return new Date(Number(m[1]), (Number(m[2]) - 1) * 3, 1);
+}
+
+export function quarterEndDate(quarter: string): Date {
+  const m = quarter.match(/^(\d{4})-Q([1-4])$/);
+  if (!m) return startOfDay(new Date());
+  const year = Number(m[1]);
+  const q = Number(m[2]);
+  const endMonth = q * 3;
+  return new Date(year, endMonth, 0);
+}
+
+export function isSameDay(a: Date, b: Date): boolean {
+  return startOfDay(a).getTime() === startOfDay(b).getTime();
+}
+
+export function isSameWeek(a: Date, b: Date): boolean {
+  return startOfWeekMonday(a).getTime() === startOfWeekMonday(b).getTime();
+}
+
+export interface CalendarWeekRow {
+  label: string;
+  monday: Date;
+  days: Date[];
+}
+
+export function buildMonthWeekRows(year: number, monthIndex: number): CalendarWeekRow[] {
+  const rows: CalendarWeekRow[] = [];
+  let monday = startOfWeekMonday(new Date(year, monthIndex, 1));
+  const monthEnd = new Date(year, monthIndex + 1, 0);
+
+  for (let w = 0; w < 6; w++) {
+    const days: Date[] = Array.from({ length: 7 }, (_, i) => {
+      const d = new Date(monday);
+      d.setDate(monday.getDate() + i);
+      return d;
+    });
+    if (days.some((d) => d.getMonth() === monthIndex)) {
+      const anchor = days.find((d) => d.getMonth() === monthIndex)!;
+      rows.push({
+        label: weekOfMonthLabel(anchor),
+        monday: startOfDay(new Date(monday)),
+        days,
+      });
+    }
+    monday = new Date(monday);
+    monday.setDate(monday.getDate() + 7);
+    if (monday > monthEnd && monday.getMonth() !== monthIndex) break;
+  }
+  return rows;
+}
--- a/frontend/src/lib/boardLayout.ts
+++ b/frontend/src/lib/boardLayout.ts
@@ -56,6 +56,72 @@ export function slotSectionLabel(slot: BoardSlotConfig): string {
  return slot.sectionKey ?? slot.dummySection ?? slot.defaultTitle;
 }

+/** 조직문화(EX) 슬롯 — HR 원본 category와 무관하게 배치할 프로젝트 */
+const EX_CULTURE_TITLE = /회사생활|C\.E\.L|조직문화|복리후생|문화\s*진단|직원\s*소통/i;
+
+export function isExCultureTask(task: {
+  section?: string | null;
+  title?: string | null;
+  tag?: string | null;
+}): boolean {
+  if (task.section?.trim() === '조직문화') return true;
+  if (task.tag === 'Culture') return true;
+  const title = task.title?.trim() ?? '';
+  return title.length > 0 && EX_CULTURE_TITLE.test(title);
+}
+
+export function resolveTaskBoardSlot(task: {
+  section?: string | null;
+  title?: string | null;
+  tag?: string | null;
+}): BoardSlotId | null {
+  if (isExCultureTask(task)) return 'ex';
+  for (const slot of BOARD_SLOTS) {
+    if (slot.id === 'ex') continue;
+    if (taskBelongsToSlot(task.section, slot)) return slot.id;
+  }
+  return null;
+}
+
+export function taskBelongsToBoardSlot(
+  task: { section?: string | null; title?: string | null; tag?: string | null },
+  slot: BoardSlotConfig,
+): boolean {
+  return resolveTaskBoardSlot(task) === slot.id;
+}
+
+/** 컬럼 헤더 — API 기본값(운영관리 등)은 슬롯 표시명(총무관리 등)으로 */
+export function columnDisplayTitle(
+  slot: BoardSlotConfig,
+  colConfig?: { title?: string | null } | null,
+  dummyHeader?: { title?: string } | null,
+): string {
+  if (!slot.sectionKey) {
+    return dummyHeader?.title?.trim() || slot.defaultTitle;
+  }
+  const custom = colConfig?.title?.replace(/\s*부문$/, '').trim();
+  if (!custom) return slot.defaultTitle;
+  if (custom === slot.sectionKey || custom === '운영관리' || custom === 'HR' || custom === '학습성장') {
+    return slot.defaultTitle;
+  }
+  return custom;
+}
+
+export function columnDisplayTitleEn(
+  slot: BoardSlotConfig,
+  colConfig?: { titleEn?: string | null } | null,
+  dummyHeader?: { titleEn?: string } | null,
+): string {
+  if (!slot.sectionKey) {
+    return dummyHeader?.titleEn?.trim() || slot.defaultTitleEn;
+  }
+  const custom = colConfig?.titleEn?.trim();
+  if (!custom || custom === 'Operations' || custom === 'Human Resources') {
+    return slot.defaultTitleEn;
+  }
+  return custom;
+}
+
 export function taskBelongsToSlot(
  taskSection: string | null | undefined,
  slot: BoardSlotConfig,
--- a/frontend/src/lib/dualMonitor.ts
+++ b/frontend/src/lib/dualMonitor.ts
@@ -1,11 +1,15 @@
 /**
 * 듀얼 모니터 연동 — dashboard-260504.vercel.app 와 동일한 창 배치 로직
 * @see https://dashboard-260504.vercel.app/
+ *
+ * 핵심: 클릭 핸들러 안에서 await getScreenDetails() → 권한(모든 디스플레이) → window.open
+ * localhost / IP(172.x) 동일 코드. IP는 origin별로 권한을 한 번 더 허용해야 함.
 */

 const CHANNEL_NAME = 'eee_dashboard';
 const DETAIL_WINDOW_NAME = 'eene_detail';
 const SELECTED_TASK_KEY = 'eee_selected_task';
+const PLACEMENT_STORAGE_KEY = 'eee_detail_window_placement';

 export type DualMonitorEvent =
  | { type: 'TASK_SELECTED'; taskId: string }
@@ -18,6 +22,33 @@ let detailWindow: Window | null = null;
 let dualModeActive = false;
 let closePollTimer: ReturnType<typeof setInterval> | null = null;
 let syncProvider: (() => string | null) | null = null;
+let cachedPlacement: WindowPlacement | null = null;
+let lastPlacementIssue: string | null = null;
+
+export function getLastPlacementIssue(): string | null {
+  return lastPlacementIssue;
+}
+
+/** http://IP 는 secure context가 아니어서 getScreenDetails·권한 팝업 불가 → https 필요 */
+export function getWindowPlacementHint(): string | null {
+  const win = window as WindowWithScreenDetails;
+  if (win.getScreenDetails) return null;
+
+  const { protocol, hostname } = window.location;
+  const isLocalhost = hostname === 'localhost' || hostname === '127.0.0.1';
+
+  if (protocol === 'http:' && !isLocalhost) {
+    return (
+      `http://${hostname} 으로는 「모든 디스플레이」 권한 창이 뜨지 않아 ` +
+      `상세 창이 왼쪽 모니터에 열립니다.\n\n` +
+      `→ https://${hostname}:3000 으로 접속해 주세요.\n` +
+      `(인증서 경고 → 고급 → 계속)\n\n` +
+      `localhost:3000 은 http 로도 동작합니다.`
+    );
+  }
+
+  return '이 브라우저/환경에서는 다중 모니터 창 배치 API를 사용할 수 없습니다.';
+}

 interface ScreenDetailed {
  left: number;
@@ -50,47 +81,93 @@ function placementToFeatures({ left, top, width, height }: WindowPlacement): str
  return `left=${left},top=${top},width=${width},height=${height},menubar=no,toolbar=no,location=no,status=no,resizable=yes,scrollbars=yes`;
 }

+function readPersistedPlacement(): WindowPlacement | null {
+  if (cachedPlacement) return cachedPlacement;
+  try {
+    const raw = localStorage.getItem(PLACEMENT_STORAGE_KEY);
+    if (!raw) return null;
+    const p = JSON.parse(raw) as WindowPlacement;
+    if (
+      typeof p.left === 'number' &&
+      typeof p.top === 'number' &&
+      typeof p.width === 'number' &&
+      typeof p.height === 'number'
+    ) {
+      cachedPlacement = p;
+      return p;
+    }
+  } catch {
+    /* ignore */
+  }
+  return null;
+}
+
+function persistPlacement(placement: WindowPlacement) {
+  cachedPlacement = placement;
+  try {
+    localStorage.setItem(PLACEMENT_STORAGE_KEY, JSON.stringify(placement));
+  } catch {
+    /* ignore */
+  }
+}
+
+function placementFromScreenDetails(details: ScreenDetails): WindowPlacement {
+  const current = details.currentScreen;
+  const sorted = [...details.screens].sort((a, b) => a.left - b.left || a.top - b.top);
+  const idx = sorted.findIndex((s) => s.left === current.left && s.top === current.top);
+  const target =
+    (idx >= 0 && idx < sorted.length - 1 ? sorted[idx + 1] : null) ??
+    sorted.find((s) => s.left !== current.left || s.top !== current.top) ??
+    sorted[sorted.length - 1];
+
+  return {
+    left: target.availLeft ?? target.left,
+    top: target.availTop ?? target.top,
+    width: target.availWidth ?? target.width,
+    height: target.availHeight ?? target.height,
+  };
+}
+
+function fallbackDetailPlacement(): WindowPlacement {
+  const stored = readPersistedPlacement();
+  if (stored) return stored;
+
+  const top = window.screen.availTop ?? 0;
+  const height = window.screen.availHeight;
+  const availLeft = window.screen.availLeft ?? 0;
+  const availWidth = window.screen.availWidth;
+  const monitorRight = availLeft + availWidth;
+
+  return {
+    left: monitorRight,
+    top,
+    width: Math.max(800, availWidth),
+    height,
+  };
+}
+
 /**
- * 참고 사이트(fr)와 동일한 좌표 계산
- * — getScreenDetails await 후 window.open (권한 요청 + 우측 모니터 배치)
+ * 참고 사이트와 동일 — getScreenDetails(await) 로 「모든 디스플레이」 권한 후 좌표 계산
 */
 async function resolveDetailWindowPlacement(): Promise<WindowPlacement> {
-  let left = window.screenX + window.outerWidth;
-  let top = window.screenY;
-  let width = window.screen.availWidth;
-  let height = window.screen.availHeight;
+  lastPlacementIssue = getWindowPlacementHint();

  try {
    const win = window as WindowWithScreenDetails;
    if (win.getScreenDetails) {
      const details = await win.getScreenDetails();
-      const current = details.currentScreen;
-      let target = details.screens.find((s) => s.left >= current.left + current.width);
-      target ||= details.screens.find((s) => s !== current);
-
-      if (target) {
-        left = target.availLeft ?? target.left;
-        top = target.availTop ?? target.top;
-        width = target.availWidth ?? target.width;
-        height = target.availHeight ?? target.height;
-      } else {
-        left = window.screenX + window.outerWidth;
-        width = window.screen.availWidth - left;
-        if (width < 800) {
-          width = 1920;
-          left = window.screen.availWidth;
-        }
-        height = window.screen.availHeight;
-      }
+      lastPlacementIssue = null;
+      return placementFromScreenDetails(details);
    }
  } catch (err) {
-    console.warn('Window Management API failed or denied, using fallback', err);
+    console.warn('[dualMonitor] getScreenDetails failed, using fallback', err);
+    lastPlacementIssue =
+      '「모든 디스플레이」 권한이 거부되었거나 사용할 수 없습니다.\n' +
+      '주소창 자물쇠 → 사이트 권한 → 창 배치 → 허용';
  }
-
-  return { left, top, width, height };
+  return fallbackDetailPlacement();
 }

-/** 우측 모니터 좌표·크기 (열린 뒤 moveTo 보정용) */
 export async function getRightMonitorWindowFeatures(): Promise<string> {
  return placementToFeatures(await resolveDetailWindowPlacement());
 }
@@ -145,13 +222,23 @@ export function registerSyncProvider(fn: () => string | null): () => void {
  };
 }

-
 function applyWindowPlacement(win: Window, left: number, top: number, width: number, height: number) {
  try {
    win.moveTo(left, top);
    win.resizeTo(width, height);
  } catch {
-    // 브라우저 정책으로 실패할 수 있음
+    /* ignore */
+  }
+}
+
+function schedulePlacementRetries(win: Window, placement: WindowPlacement) {
+  const apply = () => {
+    if (win.closed) return;
+    applyWindowPlacement(win, placement.left, placement.top, placement.width, placement.height);
+  };
+  apply();
+  for (const delay of [100, 400, 1000, 2000]) {
+    setTimeout(apply, delay);
  }
 }

@@ -178,7 +265,7 @@ function openDetailWindowWithPlacement(placement: WindowPlacement): Window | nul
  try {
    detailWindow.focus();
  } catch {
-    // ignore
+    /* ignore */
  }

  applyWindowPlacement(detailWindow, placement.left, placement.top, placement.width, placement.height);
@@ -188,10 +275,13 @@ function openDetailWindowWithPlacement(placement: WindowPlacement): Window | nul
 /** 참고 사이트: getScreenDetails(await) → window.open */
 async function openDetailWindowPlaced(onPopupClosed?: () => void): Promise<Window | null> {
  const placement = await resolveDetailWindowPlacement();
+  persistPlacement(placement);
+
  const win = openDetailWindowWithPlacement(placement);
  if (!win) return null;

  startClosePoll(() => onPopupClosed?.());
+  schedulePlacementRetries(win, placement);
  return win;
 }

@@ -218,8 +308,11 @@ export async function openDetailWindow(onPopupClosed?: () => void): Promise<Wind
  return win;
 }

-/** 업무 선택 — 참고 사이트와 같이 배치 계산(await) 후 팝업 열기 */
-export async function sendTaskSelected(taskId: string, onPopupClosed?: () => void): Promise<void> {
+/** 업무 선택 — await getScreenDetails(권한) 후 팝업 open */
+export async function sendTaskSelected(
+  taskId: string,
+  onPopupClosed?: () => void,
+): Promise<boolean> {
  persistSelectedTask(taskId);

  if (!isDetailWindowOpen()) {
@@ -227,10 +320,13 @@ export async function sendTaskSelected(taskId: string, onPopupClosed?: () => voi
    const win = await openDetailWindowPlaced(onPopupClosed);
    if (!win) {
      dualModeActive = false;
-      return;
+      return false;
    }
    scheduleTaskSelected(taskId);
-    return;
+    if (lastPlacementIssue) {
+      window.alert(lastPlacementIssue);
+    }
+    return true;
  }

  scheduleTaskSelected(taskId);
@@ -238,14 +334,16 @@ export async function sendTaskSelected(taskId: string, onPopupClosed?: () => voi
  try {
    detailWindow!.focus();
  } catch {
-    // ignore
+    /* ignore */
  }

-  void resolveDetailWindowPlacement().then((placement) => {
-    if (detailWindow && !detailWindow.closed) {
-      applyWindowPlacement(detailWindow, placement.left, placement.top, placement.width, placement.height);
-    }
-  });
+  const placement = await resolveDetailWindowPlacement();
+  persistPlacement(placement);
+  if (detailWindow && !detailWindow.closed) {
+    schedulePlacementRetries(detailWindow, placement);
+  }
+
+  return true;
 }

 export function sendTaskDeselected(): void {
@@ -299,14 +397,12 @@ export function openLinkOnRightMonitor(url: string, windowName: string): Window
  try {
    win?.focus();
  } catch {
-    // ignore
+    /* ignore */
  }

  if (win) {
    void resolveDetailWindowPlacement().then((placement) => {
-      if (win && !win.closed) {
-        applyWindowPlacement(win, placement.left, placement.top, placement.width, placement.height);
-      }
+      schedulePlacementRetries(win, placement);
    });
  }

--- a/frontend/src/lib/fileDisplay.ts
+++ b/frontend/src/lib/fileDisplay.ts
@@ -35,3 +35,75 @@ export function isExcelFile(file: Pick<FileRecord, 'mimetype' | 'originalName'>)
    name.endsWith('.csv')
  );
 }
+
+export type FilePreviewKind =
+  | 'image'
+  | 'video'
+  | 'excel'
+  | 'pdf'
+  | 'docx'
+  | 'pptx'
+  | 'hwp'
+  | 'text'
+  | 'unsupported';
+
+function extOf(name: string): string {
+  return name.split('.').pop()?.toLowerCase() ?? '';
+}
+
+/** 미리보기 라우팅 — iframe 대신 형식별 뷰어 사용 */
+export function getFilePreviewKind(
+  file: Pick<FileRecord, 'mimetype' | 'originalName'>,
+): FilePreviewKind {
+  const name = file.originalName.toLowerCase();
+  const ext = extOf(name);
+
+  if (isExcelFile(file)) return 'excel';
+  if (file.mimetype.startsWith('image/') || /^(png|jpe?g|gif|webp|bmp|svg)$/.test(ext)) return 'image';
+  if (isVideoFile(file)) return 'video';
+  if (file.mimetype === 'application/pdf' || ext === 'pdf') return 'pdf';
+  if (file.mimetype.includes('wordprocessingml') || ext === 'docx') return 'docx';
+  if (file.mimetype.includes('presentationml') || ext === 'pptx') return 'pptx';
+  if (ext === 'hwp' || ext === 'hwpx' || file.mimetype.includes('hwp')) return 'hwp';
+  if (file.mimetype.startsWith('text/') || ext === 'txt') return 'text';
+  return 'unsupported';
+}
+
+const EXT_MIME: Record<string, string> = {
+  pdf: 'application/pdf',
+  png: 'image/png',
+  jpg: 'image/jpeg',
+  jpeg: 'image/jpeg',
+  gif: 'image/gif',
+  webp: 'image/webp',
+  bmp: 'image/bmp',
+  svg: 'image/svg+xml',
+  mp4: 'video/mp4',
+  mov: 'video/quicktime',
+  avi: 'video/x-msvideo',
+  webm: 'video/webm',
+  mkv: 'video/x-matroska',
+  m4v: 'video/x-m4v',
+  wmv: 'video/x-ms-wmv',
+  xlsx: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+  xls: 'application/vnd.ms-excel',
+  csv: 'text/csv',
+  docx: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+  doc: 'application/msword',
+  pptx: 'application/vnd.openxmlformats-officedocument.presentationml.presentation',
+  ppt: 'application/vnd.ms-powerpoint',
+  hwp: 'application/x-hwp',
+  hwpx: 'application/hwp+zip',
+  txt: 'text/plain',
+};
+
+export function resolvePreviewMime(file: Pick<FileRecord, 'mimetype' | 'originalName'>): string {
+  const ext = extOf(file.originalName);
+  const fromExt = EXT_MIME[ext];
+  const stored = file.mimetype?.trim() ?? '';
+  if (!stored || stored === 'application/octet-stream') {
+    return fromExt ?? stored ?? 'application/octet-stream';
+  }
+  if (fromExt && stored.includes('octet')) return fromExt;
+  return stored;
+}
--- a/frontend/src/lib/hubConfig.ts
+++ b/frontend/src/lib/hubConfig.ts
@@ -1,7 +1,11 @@
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useRef } from 'react';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { apiClient } from './apiClient';
 import { migrateScheduleItem, quarterDateBounds } from './hubSchedule';
+import { ROUTINE_CATEGORIES } from './routineCategories';

 const STORAGE_KEY = 'eene-quarter-hub-config-v1';
+const QUERY_KEY = ['hub-config'] as const;

 export interface HubScheduleItem {
  id: string;
@@ -19,7 +23,7 @@ export interface HubConfig {
 }

 export const DEFAULT_HUB_CONFIG: HubConfig = {
-  sloganTitle: '분기 슬로건',
+  sloganTitle: '분기 중점 과제',
  sloganLines: ['인사 · 육성 · 문화 · 총무', '개선과제', '정상 추진'],
  scheduleTitle: '분기 주요 일정',
  scheduleItems: [
@@ -27,9 +31,29 @@ export const DEFAULT_HUB_CONFIG: HubConfig = {
    { id: '2', date: '2026-05-15', text: '조직문화 진단·리더십 교육' },
    { id: '3', date: '2026-06-20', text: '분기 성과 점검·평가' },
  ],
-  routineLabels: ['채용', '교육', '소통', '시설', '자산', '행정'],
+  routineLabels: ['채용 운영', '학습 지원', '직원 소통', '자산·시설', '문서·행정'],
 };

+function migrateRoutineLabels(raw: unknown): string[] {
+  if (!Array.isArray(raw)) return [...ROUTINE_CATEGORIES];
+  const labels = raw.map(String);
+  if (labels.length === ROUTINE_CATEGORIES.length && labels.every((label, i) => label === ROUTINE_CATEGORIES[i])) {
+    return [...ROUTINE_CATEGORIES];
+  }
+  const legacyFull = ['채용 운영', '교육 운영', '직원 소통', '자산·시설', '문서·행정'];
+  if (labels.length === legacyFull.length && labels.every((label, i) => label === legacyFull[i])) {
+    return [...ROUTINE_CATEGORIES];
+  }
+  const legacyShort = ['채용', '교육', '소통', '시설', '자산', '행정'];
+  if (labels.length === legacyShort.length && labels.every((label, i) => label === legacyShort[i])) {
+    return [...ROUTINE_CATEGORIES];
+  }
+  if (labels.some((label) => label === '교육 운영')) {
+    return labels.map((label) => (label === '교육 운영' ? '학습 지원' : label));
+  }
+  return labels.length > 0 ? labels : [...ROUTINE_CATEGORIES];
+}
+
 function migrateConfig(raw: Record<string, unknown>): HubConfig {
  const { year } = quarterDateBounds('2026-Q2');
  const scheduleItems = Array.isArray(raw.scheduleItems)
@@ -39,52 +63,84 @@ function migrateConfig(raw: Record<string, unknown>): HubConfig {
    : DEFAULT_HUB_CONFIG.scheduleItems;

  return {
-    sloganTitle: (raw.sloganTitle as string) ?? DEFAULT_HUB_CONFIG.sloganTitle,
+    sloganTitle: (() => {
+      const t = (raw.sloganTitle as string) ?? DEFAULT_HUB_CONFIG.sloganTitle;
+      return t === '분기 슬로건' ? '분기 중점 과제' : t;
+    })(),
    sloganLines: (raw.sloganLines as string[]) ?? DEFAULT_HUB_CONFIG.sloganLines,
    scheduleTitle: (raw.scheduleTitle as string) ?? DEFAULT_HUB_CONFIG.scheduleTitle,
    scheduleItems,
-    routineLabels: (raw.routineLabels as string[]) ?? DEFAULT_HUB_CONFIG.routineLabels,
+    routineLabels: migrateRoutineLabels(raw.routineLabels),
  };
 }

-function loadConfig(): HubConfig {
-  if (typeof window === 'undefined') return DEFAULT_HUB_CONFIG;
+async function fetchHubConfig(): Promise<HubConfig> {
+  const raw = await apiClient.get<Record<string, unknown>>('/hub-config').then((r) => r.data);
+  return migrateConfig({ ...DEFAULT_HUB_CONFIG, ...raw });
+}
+
+async function saveHubConfig(config: HubConfig): Promise<HubConfig> {
+  const raw = await apiClient.patch<Record<string, unknown>>('/hub-config', config).then((r) => r.data);
+  return migrateConfig({ ...DEFAULT_HUB_CONFIG, ...raw });
+}
+
+function readLegacyLocalConfig(): HubConfig | null {
+  if (typeof window === 'undefined') return null;
  try {
    const raw = localStorage.getItem(STORAGE_KEY);
-    if (!raw) return DEFAULT_HUB_CONFIG;
+    if (!raw) return null;
    return migrateConfig({ ...DEFAULT_HUB_CONFIG, ...JSON.parse(raw) });
  } catch {
-    return DEFAULT_HUB_CONFIG;
+    return null;
  }
 }

-function saveConfig(config: HubConfig) {
-  localStorage.setItem(STORAGE_KEY, JSON.stringify(config));
-}
-
 export function useHubConfig() {
-  const [config, setConfigState] = useState<HubConfig>(loadConfig);
+  const queryClient = useQueryClient();
+  const legacyMigrated = useRef(false);

-  const setConfig = useCallback((patch: Partial<HubConfig> | ((prev: HubConfig) => HubConfig)) => {
-    setConfigState((prev) => {
-      const next = typeof patch === 'function' ? patch(prev) : { ...prev, ...patch };
-      saveConfig(next);
-      return next;
-    });
-  }, []);
+  const { data: config = DEFAULT_HUB_CONFIG, isLoading } = useQuery({
+    queryKey: QUERY_KEY,
+    queryFn: fetchHubConfig,
+    staleTime: 30_000,
+  });

-  const resetConfig = useCallback(() => {
-    localStorage.removeItem(STORAGE_KEY);
-    setConfigState(DEFAULT_HUB_CONFIG);
-  }, []);
+  const saveMutation = useMutation({
+    mutationFn: saveHubConfig,
+    onSuccess: (saved) => {
+      queryClient.setQueryData(QUERY_KEY, saved);
+    },
+  });

  useEffect(() => {
-    const onStorage = (e: StorageEvent) => {
-      if (e.key === STORAGE_KEY) setConfigState(loadConfig());
-    };
-    window.addEventListener('storage', onStorage);
-    return () => window.removeEventListener('storage', onStorage);
-  }, []);
+    if (isLoading || legacyMigrated.current) return;
+    const legacy = readLegacyLocalConfig();
+    if (!legacy) return;
+    legacyMigrated.current = true;
+    localStorage.removeItem(STORAGE_KEY);
+    saveHubConfig(legacy)
+      .then((saved) => {
+        queryClient.setQueryData(QUERY_KEY, saved);
+      })
+      .catch(() => {
+        /* API 미준비 등 — 기본값 유지 */
+      });
+  }, [isLoading, queryClient]);

-  return { config, setConfig, resetConfig };
+  const setConfig = useCallback(
+    (patch: Partial<HubConfig> | ((prev: HubConfig) => HubConfig)) => {
+      const prev = queryClient.getQueryData<HubConfig>(QUERY_KEY) ?? DEFAULT_HUB_CONFIG;
+      const next = typeof patch === 'function' ? patch(prev) : { ...prev, ...patch };
+      queryClient.setQueryData(QUERY_KEY, next);
+      saveMutation.mutate(next);
+    },
+    [queryClient, saveMutation],
+  );
+
+  const resetConfig = useCallback(() => {
+    queryClient.setQueryData(QUERY_KEY, DEFAULT_HUB_CONFIG);
+    saveMutation.mutate(DEFAULT_HUB_CONFIG);
+  }, [queryClient, saveMutation]);
+
+  return { config, setConfig, resetConfig, isLoading };
 }
--- a/frontend/src/lib/hubSchedule.ts
+++ b/frontend/src/lib/hubSchedule.ts
@@ -16,9 +16,19 @@ export function startOfDay(date: Date): Date {

 /** "6월 8일" */
 export function formatScheduleDateLabel(dateStr: string): string {
+  const parts = formatScheduleDateParts(dateStr);
+  if (!parts) return dateStr;
+  return `${parts.month} ${parts.day}`;
+}
+
+/** { month: "6월", day: "8일" } — 일정 목록 좌우 정렬용 */
+export function formatScheduleDateParts(dateStr: string): { month: string; day: string } | null {
  const dt = parseScheduleDate(dateStr);
-  if (!dt) return dateStr;
-  return `${dt.getMonth() + 1}월 ${dt.getDate()}일`;
+  if (!dt) return null;
+  return {
+    month: `${dt.getMonth() + 1}월`,
+    day: `${dt.getDate()}일`,
+  };
 }

 export function sortScheduleItems(items: HubScheduleItem[]): HubScheduleItem[] {
--- a/frontend/src/lib/milestonePeriods.ts
+++ b/frontend/src/lib/milestonePeriods.ts
@@ -0,0 +1,168 @@
+import type { Milestone, MilestonePeriodEntry } from '../types';
+import { routineStageBody } from './routineMilestone';
+
+export type { MilestonePeriodEntry };
+
+export function newPeriodEntry(): MilestonePeriodEntry {
+  return {
+    id: `period-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`,
+    startDate: '',
+    dueDate: '',
+    note: '',
+  };
+}
+
+function toDateInput(iso: string | null | undefined) {
+  if (!iso) return '';
+  return new Date(iso).toISOString().slice(0, 10);
+}
+
+export function normalizePeriodEntries(raw: unknown): MilestonePeriodEntry[] {
+  if (!Array.isArray(raw)) return [];
+  const entries: MilestonePeriodEntry[] = [];
+  for (const item of raw) {
+    if (!item || typeof item !== 'object') continue;
+    const row = item as Record<string, unknown>;
+    const startDate = typeof row.startDate === 'string' ? row.startDate.trim() : '';
+    const dueDate = typeof row.dueDate === 'string' ? row.dueDate.trim() : '';
+    const note = typeof row.note === 'string' ? row.note : '';
+    if (!startDate && !dueDate && !note.trim()) continue;
+    entries.push({
+      id: typeof row.id === 'string' && row.id ? row.id : newPeriodEntry().id,
+      startDate,
+      dueDate,
+      note,
+    });
+  }
+  return entries;
+}
+
+function legacyDescriptionNote(description: string | null | undefined): string {
+  return routineStageBody(description).trim();
+}
+
+export function parseMilestonePeriods(
+  milestone: Pick<Milestone, 'id' | 'periodEntries' | 'startDate' | 'dueDate' | 'description'> | null | undefined,
+): MilestonePeriodEntry[] {
+  if (!milestone) return [];
+  const legacyNote = legacyDescriptionNote(milestone.description);
+  const fromJson = normalizePeriodEntries(milestone.periodEntries);
+  if (fromJson.length > 0) {
+    if (legacyNote && !fromJson.some((p) => p.note.trim())) {
+      return fromJson.map((p, i) => (i === 0 ? { ...p, note: legacyNote } : p));
+    }
+    return fromJson;
+  }
+  if (milestone.startDate || milestone.dueDate || legacyNote) {
+    return [
+      {
+        id: milestone.id ? `period-legacy-${milestone.id}` : newPeriodEntry().id,
+        startDate: toDateInput(milestone.startDate),
+        dueDate: toDateInput(milestone.dueDate),
+        note: legacyNote,
+      },
+    ];
+  }
+  return [];
+}
+
+export function serializePeriodEntries(entries: MilestonePeriodEntry[]): MilestonePeriodEntry[] {
+  return entries
+    .map((entry) => ({
+      id: entry.id,
+      startDate: entry.startDate.trim(),
+      dueDate: entry.dueDate.trim(),
+      note: entry.note.trim(),
+    }))
+    .filter((entry) => entry.startDate || entry.dueDate || entry.note);
+}
+
+export function fmtPeriodRange(entry: Pick<MilestonePeriodEntry, 'startDate' | 'dueDate'>) {
+  const fmt = (iso: string) => {
+    const d = new Date(iso);
+    return `${String(d.getMonth() + 1).padStart(2, '0')}/${String(d.getDate()).padStart(2, '0')}`;
+  };
+  if (entry.startDate && entry.dueDate) return `${fmt(entry.startDate)} ~ ${fmt(entry.dueDate)}`;
+  if (entry.dueDate) return fmt(entry.dueDate);
+  if (entry.startDate) return `${fmt(entry.startDate)} ~`;
+  return '';
+}
+
+/** 업무내용 기간 선택 — MM.DD~MM.DD (연도 생략) */
+export function fmtPeriodPickerLabel(
+  entry: Pick<MilestonePeriodEntry, 'startDate' | 'dueDate'>,
+  index: number,
+): string {
+  const fmt = (iso: string) => {
+    const d = new Date(iso);
+    return `${String(d.getMonth() + 1).padStart(2, '0')}.${String(d.getDate()).padStart(2, '0')}`;
+  };
+  if (entry.startDate && entry.dueDate) return `${fmt(entry.startDate)}~${fmt(entry.dueDate)}`;
+  if (entry.dueDate) return fmt(entry.dueDate);
+  if (entry.startDate) return `${fmt(entry.startDate)}~`;
+  return `기간 ${index + 1}`;
+}
+
+export function parsePeriodNoteLines(text: string | null | undefined): string[] {
+  if (!text) return [];
+  return text
+    .split('\n')
+    .map((line) => line.replace(/^[•·\-]\s*/, '').trim())
+    .filter(Boolean);
+}
+
+/** 최신 기간 우선 — 종료일·시작일 내림차순 */
+export function sortPeriodsByRecent(periods: MilestonePeriodEntry[]): MilestonePeriodEntry[] {
+  return [...periods].sort((a, b) => {
+    const ta = a.dueDate || a.startDate || '';
+    const tb = b.dueDate || b.startDate || '';
+    if (ta && tb) return tb.localeCompare(ta);
+    if (tb) return 1;
+    if (ta) return -1;
+    return 0;
+  });
+}
+
+export function pickLatestPeriodId(periods: MilestonePeriodEntry[]): string | null {
+  return sortPeriodsByRecent(periods)[0]?.id ?? null;
+}
+
+/** 목록·카드용 — 최신(마지막) 기간 또는 요약 */
+export function fmtMilestonePeriodSummary(
+  milestone: Pick<Milestone, 'periodEntries' | 'startDate' | 'dueDate'>,
+): string {
+  const periods = parseMilestonePeriods(milestone);
+  if (periods.length === 0) return '';
+  if (periods.length === 1) return fmtPeriodRange(periods[0]) || '';
+  const last = periods[periods.length - 1];
+  const lastLabel = fmtPeriodRange(last);
+  return lastLabel ? `${lastLabel} 외 ${periods.length - 1}건` : `기간 ${periods.length}건`;
+}
+
+export interface MilestoneContentBlock {
+  key: string;
+  label: string;
+  lines: string[];
+}
+
+/** @deprecated MilestoneContentList에서 기간 선택 UI로 대체 */
+export function buildMilestoneContentBlocks(
+  milestone: Pick<Milestone, 'id' | 'periodEntries' | 'startDate' | 'dueDate' | 'description'> | null | undefined,
+): MilestoneContentBlock[] {
+  if (!milestone) return [];
+
+  const blocks: MilestoneContentBlock[] = [];
+  const periods = sortPeriodsByRecent(parseMilestonePeriods(milestone)).reverse();
+
+  periods.forEach((period, index) => {
+    const lines = parsePeriodNoteLines(period.note);
+    if (lines.length === 0) return;
+    blocks.push({
+      key: period.id,
+      label: fmtPeriodPickerLabel(period, index),
+      lines,
+    });
+  });
+
+  return blocks;
+}
--- a/frontend/src/lib/milestoneSubtitle.ts
+++ b/frontend/src/lib/milestoneSubtitle.ts
@@ -0,0 +1,9 @@
+import type { Milestone } from '../types';
+import { decodeRoutineStageDescription } from './routineMilestone';
+
+/** 업무명(단계) 카드 — 부제목 (기간 대신 표시) */
+export function getMilestoneSubtitle(m: Milestone): string {
+  if (m.subtitle?.trim()) return m.subtitle.trim();
+  const { overview } = decodeRoutineStageDescription(m.description);
+  return overview;
+}
--- a/frontend/src/lib/milestoneTimeline.ts
+++ b/frontend/src/lib/milestoneTimeline.ts
@@ -0,0 +1,267 @@
+import { quarterDateBounds } from './hubSchedule';
+
+export interface TimelineMilestoneInput {
+  id: string;
+  title: string;
+  startDate?: string | null;
+  dueDate?: string | null;
+  periodEntries?: Array<{
+    id: string;
+    startDate?: string | null;
+    dueDate?: string | null;
+    note?: string | null;
+  }> | null;
+  progress?: number;
+  completedAt?: string | null;
+  order: number;
+  createdAt?: string;
+}
+
+export interface TimelineRangeFallback {
+  startDate?: string | null;
+  dueDate?: string | null;
+  quarter?: string | null;
+}
+
+export interface TimelineTick {
+  label: string;
+  leftPct: number;
+  isToday?: boolean;
+}
+
+export interface TimelineRow {
+  id: string;
+  milestoneId: string;
+  title: string;
+  leftPct: number;
+  widthPct: number;
+  progress: number;
+}
+
+export interface MilestoneTimelineModel {
+  rangeStartLabel: string;
+  rangeEndLabel: string;
+  ticks: TimelineTick[];
+  rows: TimelineRow[];
+}
+
+const DAY_MS = 86_400_000;
+const RANGE_PAD_DAYS = 2;
+/** 하루·단일일정 막대가 타임라인에서 묻히지 않도록 */
+const MIN_BAR_WIDTH_PCT = 2;
+/** 오늘 눈금과 겹치는 기존 날짜 라벨 제거 (주간 눈금 등) */
+const TODAY_TICK_MIN_GAP_PCT = 3.2;
+
+export function taskTimelineFallback(task: {
+  startDate?: string | null;
+  dueDate?: string | null;
+  quarter?: string | null;
+}): TimelineRangeFallback {
+  return {
+    startDate: task.startDate,
+    dueDate: task.dueDate,
+    quarter: task.quarter,
+  };
+}
+
+function startOfDay(d: Date): Date {
+  return new Date(d.getFullYear(), d.getMonth(), d.getDate());
+}
+
+function parseDay(iso: string): Date {
+  return startOfDay(new Date(iso));
+}
+
+export function fmtTimelineDayLabel(d: Date): string {
+  return `${d.getMonth() + 1}.${String(d.getDate()).padStart(2, '0')}`;
+}
+
+function milestoneProgress(m: TimelineMilestoneInput): number {
+  if (m.completedAt) return 100;
+  return Math.min(100, Math.max(0, m.progress ?? 0));
+}
+
+function collectMilestoneTimes(milestones: TimelineMilestoneInput[]): number[] {
+  const times: number[] = [];
+  for (const m of milestones) {
+    const periods = m.periodEntries?.length
+      ? m.periodEntries
+      : m.startDate || m.dueDate
+        ? [{ startDate: m.startDate, dueDate: m.dueDate }]
+        : [];
+    for (const p of periods) {
+      if (p.startDate) times.push(parseDay(p.startDate).getTime());
+      if (p.dueDate) times.push(parseDay(p.dueDate).getTime());
+    }
+  }
+  return times;
+}
+
+function computeRange(
+  milestones: TimelineMilestoneInput[],
+  fallback: TimelineRangeFallback,
+): { start: Date; end: Date } | null {
+  const times = collectMilestoneTimes(milestones);
+
+  if (times.length >= 1) {
+    const min = Math.min(...times);
+    const max = Math.max(...times);
+    const pad = RANGE_PAD_DAYS * DAY_MS;
+    return {
+      start: new Date(min - pad),
+      end: new Date(max + pad),
+    };
+  }
+
+  if (fallback.startDate && fallback.dueDate) {
+    return {
+      start: parseDay(fallback.startDate),
+      end: parseDay(fallback.dueDate),
+    };
+  }
+
+  if (fallback.quarter) {
+    const { min, max } = quarterDateBounds(fallback.quarter);
+    return { start: parseDay(min), end: parseDay(max) };
+  }
+
+  return null;
+}
+
+function buildTicks(rangeStart: Date, rangeEnd: Date): TimelineTick[] {
+  const rangeMs = Math.max(rangeEnd.getTime() - rangeStart.getTime(), DAY_MS);
+  const totalDays = Math.ceil(rangeMs / DAY_MS) + 1;
+  const stepDays = totalDays > 45 ? 7 : totalDays > 28 ? 2 : 1;
+  const now = startOfDay(new Date());
+  const todayInRange = now >= rangeStart && now <= rangeEnd;
+  const nowMs = now.getTime();
+
+  const ticks: TimelineTick[] = [];
+
+  for (let t = rangeStart.getTime(); t <= rangeEnd.getTime(); t += stepDays * DAY_MS) {
+    const d = new Date(t);
+    ticks.push({
+      label: fmtTimelineDayLabel(d),
+      leftPct: ((d.getTime() - rangeStart.getTime()) / rangeMs) * 100,
+      isToday: todayInRange && d.getTime() === nowMs,
+    });
+  }
+
+  if (todayInRange && !ticks.some((tick) => tick.isToday)) {
+    const todayLeftPct = ((nowMs - rangeStart.getTime()) / rangeMs) * 100;
+    const todayTick: TimelineTick = {
+      label: fmtTimelineDayLabel(now),
+      leftPct: todayLeftPct,
+      isToday: true,
+    };
+    const spaced = ticks.filter(
+      (tick) => Math.abs(tick.leftPct - todayLeftPct) >= TODAY_TICK_MIN_GAP_PCT,
+    );
+    spaced.push(todayTick);
+    spaced.sort((a, b) => a.leftPct - b.leftPct);
+    return spaced;
+  }
+
+  return ticks;
+}
+
+function milestoneHasDates(m: TimelineMilestoneInput): boolean {
+  if (m.periodEntries?.some((p) => p.startDate || p.dueDate)) return true;
+  return !!(m.startDate || m.dueDate);
+}
+
+function milestonePeriodSpans(m: TimelineMilestoneInput): Array<{ startMs: number; endMs: number }> {
+  const raw = m.periodEntries?.length
+    ? m.periodEntries
+    : m.startDate || m.dueDate
+      ? [{ startDate: m.startDate, dueDate: m.dueDate }]
+      : [];
+
+  const spans: Array<{ startMs: number; endMs: number }> = [];
+  for (const p of raw) {
+    if (!p.startDate && !p.dueDate) continue;
+    if (p.startDate && p.dueDate) {
+      let startMs = parseDay(p.startDate).getTime();
+      let endMs = parseDay(p.dueDate).getTime();
+      if (endMs < startMs) [startMs, endMs] = [endMs, startMs];
+      spans.push({ startMs, endMs });
+      continue;
+    }
+    const ms = parseDay((p.dueDate ?? p.startDate)!).getTime();
+    spans.push({ startMs: ms, endMs: ms });
+  }
+  return spans;
+}
+
+function buildRows(
+  ordered: TimelineMilestoneInput[],
+  rangeStart: Date,
+  rangeEnd: Date,
+  hideUndatedBars?: boolean,
+): TimelineRow[] {
+  const items =
+    hideUndatedBars === false
+      ? ordered
+      : ordered.filter((m) => milestoneHasDates(m));
+
+  const rangeStartMs = rangeStart.getTime();
+  const rangeMs = Math.max(rangeEnd.getTime() - rangeStartMs, DAY_MS);
+
+  const rows: TimelineRow[] = [];
+
+  for (const m of items) {
+    const spans = milestonePeriodSpans(m);
+    if (spans.length === 0) continue;
+
+    spans.forEach((span, index) => {
+      const { startMs, endMs } = span;
+      const spanMs = endMs - startMs;
+      const isPoint = spanMs === 0;
+
+      let widthPct = isPoint ? MIN_BAR_WIDTH_PCT : (spanMs / rangeMs) * 100;
+      widthPct = Math.max(MIN_BAR_WIDTH_PCT, widthPct);
+
+      let leftPct = ((startMs - rangeStartMs) / rangeMs) * 100;
+      if (isPoint) leftPct -= widthPct / 2;
+      leftPct = Math.max(0, Math.min(100 - widthPct, leftPct));
+
+      rows.push({
+        id: spans.length > 1 ? `${m.id}:${index}` : m.id,
+        milestoneId: m.id,
+        title: m.title,
+        leftPct,
+        widthPct,
+        progress: milestoneProgress(m),
+      });
+    });
+  }
+
+  return rows;
+}
+
+export function buildMilestoneTimeline(
+  milestones: TimelineMilestoneInput[],
+  fallback: TimelineRangeFallback = {},
+  options?: { preserveOrder?: boolean; hideUndatedBars?: boolean },
+): MilestoneTimelineModel | null {
+  if (milestones.length === 0) return null;
+
+  const range = computeRange(milestones, fallback);
+  if (!range) return null;
+
+  const ordered = options?.preserveOrder
+    ? [...milestones]
+    : [...milestones].sort((a, b) => a.order - b.order);
+
+  const rows = buildRows(ordered, range.start, range.end, options?.hideUndatedBars);
+  if (rows.length === 0) return null;
+
+  const ticks = buildTicks(range.start, range.end);
+
+  return {
+    rangeStartLabel: fmtTimelineDayLabel(range.start),
+    rangeEndLabel: fmtTimelineDayLabel(range.end),
+    ticks,
+    rows,
+  };
+}
--- a/frontend/src/lib/routineCategories.ts
+++ b/frontend/src/lib/routineCategories.ts
@@ -0,0 +1,79 @@
+/** 허브 다이아몬드 · 상시업무 대분류 (고정 5종) */
+export const ROUTINE_CATEGORIES = [
+  '채용 운영',
+  '학습 지원',
+  '직원 소통',
+  '자산·시설',
+  '문서·행정',
+] as const;
+
+export type RoutineCategory = (typeof ROUTINE_CATEGORIES)[number];
+
+const LEGACY_CATEGORY_ALIASES: Record<string, RoutineCategory> = {
+  채용: '채용 운영',
+  '채용 운영': '채용 운영',
+  교육: '학습 지원',
+  '교육 운영': '학습 지원',
+  '학습 지원': '학습 지원',
+  학습: '학습 지원',
+  소통: '직원 소통',
+  '직원 소통': '직원 소통',
+  시설: '자산·시설',
+  자산: '자산·시설',
+  '자산·시설': '자산·시설',
+  '자산·시설 관리': '자산·시설',
+  행정: '문서·행정',
+  '문서·행정': '문서·행정',
+  '문서·행정 지원': '문서·행정',
+  인사관리: '채용 운영',
+  학습성장: '학습 지원',
+  운영지원: '자산·시설',
+  전산관리: '문서·행정',
+};
+
+export function normalizeRoutineCategory(value: string | null | undefined): RoutineCategory | null {
+  if (!value?.trim()) return null;
+  const trimmed = value.trim();
+  if (LEGACY_CATEGORY_ALIASES[trimmed]) return LEGACY_CATEGORY_ALIASES[trimmed];
+  const matched = ROUTINE_CATEGORIES.find((cat) => cat === trimmed);
+  return matched ?? null;
+}
+
+export function getRoutineCategory(task: {
+  category?: string | null;
+  section?: string | null;
+  title?: string;
+}): RoutineCategory | null {
+  const fromField = normalizeRoutineCategory(task.category) ?? normalizeRoutineCategory(task.section);
+  if (fromField) return fromField;
+  if (task.title) {
+    const fromTitle = normalizeRoutineCategory(task.title);
+    if (fromTitle) return fromTitle;
+  }
+  return null;
+}
+
+export function routineCategoryOptions(): { value: RoutineCategory; label: RoutineCategory }[] {
+  return ROUTINE_CATEGORIES.map((cat) => ({ value: cat, label: cat }));
+}
+
+export function groupRoutineTasksByCategory<T extends { category?: string | null; section?: string | null; title?: string }>(
+  tasks: T[],
+): Record<RoutineCategory, T[]> {
+  const groups = Object.fromEntries(ROUTINE_CATEGORIES.map((cat) => [cat, [] as T[]])) as Record<RoutineCategory, T[]>;
+  for (const task of tasks) {
+    const cat = getRoutineCategory(task) ?? '채용 운영';
+    groups[cat].push(task);
+  }
+  return groups;
+}
+
+/** 탭·허브 슬롯용 — 제목이 대분류명과 일치하는 대표 task 우선 */
+export function pickRoutineCategoryTask<
+  T extends { id: string; category?: string | null; section?: string | null; title?: string },
+>(tasks: T[], category: RoutineCategory): T | null {
+  const grouped = groupRoutineTasksByCategory(tasks);
+  const inCategory = grouped[category];
+  const shell = inCategory.find((task) => task.title?.trim() === category);
+  return shell ?? inCategory[0] ?? null;
+}
--- a/frontend/src/lib/routineMilestone.ts
+++ b/frontend/src/lib/routineMilestone.ts
@@ -0,0 +1,43 @@
+const OVERVIEW_PREFIX = '@overview:';
+
+/** 상시업무 단계 — overview + 본문(description)을 한 필드에 저장 */
+export function encodeRoutineStageDescription(overview: string, body: string): string | undefined {
+  const o = overview.trim();
+  const b = body.trim();
+  if (!o && !b) return undefined;
+  if (!o) return b || undefined;
+  return `${OVERVIEW_PREFIX}${o}\n${b}`.trim() || undefined;
+}
+
+export function decodeRoutineStageDescription(raw: string | null | undefined): {
+  overview: string;
+  body: string;
+} {
+  if (!raw?.trim()) return { overview: '', body: '' };
+  if (raw.startsWith(OVERVIEW_PREFIX)) {
+    const rest = raw.slice(OVERVIEW_PREFIX.length);
+    const nl = rest.indexOf('\n');
+    if (nl === -1) return { overview: rest.trim(), body: '' };
+    return {
+      overview: rest.slice(0, nl).trim(),
+      body: rest.slice(nl + 1).trim(),
+    };
+  }
+  return { overview: '', body: raw.trim() };
+}
+
+export function parseRoutineContentLines(text: string | null | undefined): string[] {
+  if (!text) return [];
+  return text
+    .split('\n')
+    .map((l) => l.replace(/^[•·\-]\s*/, '').trim())
+    .filter(Boolean);
+}
+
+/** 레거시 @overview: 인코딩 → 편집용 본문 */
+export function routineStageBody(raw: string | null | undefined): string {
+  if (!raw?.trim()) return '';
+  const { overview, body } = decodeRoutineStageDescription(raw);
+  if (body) return body;
+  return overview;
+}
--- a/frontend/src/lib/sections.ts
+++ b/frontend/src/lib/sections.ts
@@ -62,7 +62,7 @@ export const COLUMN_META: Record<
  운영관리: {
    titleEn: 'GA',
    accent: '#36816d',
-    displayTitle: '운영관리',
+    displayTitle: '총무관리',
    routineBg: 'linear-gradient(180deg, #d4ece4 0%, #e4f3ed 100%)',
  },
 };
--- a/Show More
+++ b/Show More