feat: 단가관리 페이지 마이그레이션 및 HR 관리 기능 추가

## 단가관리 (Pricing Management) - 단가 목록 페이지 (IntegratedListTemplateV2 공통 템플릿 적용) - 단가 등록/수정 폼 (원가/마진 자동 계산) - 이력 조회, 수정 이력, 최종 확정 다이얼로그 - 판매관리 > 단가관리 네비게이션 메뉴 추가 ## HR 관리 (Human Resources) - 사원관리 (목록, 등록, 수정, 상세, CSV 업로드) - 부서관리 (트리 구조) - 근태관리 (기본 구조) ## 품목관리 개선 - Radix UI Select controlled mode 버그 수정 (key prop 적용) - DynamicItemForm 파일 업로드 지원 - 수정 페이지 데이터 로딩 개선 ## 문서화 - 단가관리 마이그레이션 체크리스트 - HR 관리 구현 체크리스트 - Radix UI Select 버그 수정 가이드 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-12-06 11:36:38 +09:00
parent 751e65f59b
commit 48dbba0e5f
59 changed files with 9888 additions and 101 deletions
--- a/claudedocs/_index.md
+++ b/claudedocs/_index.md
@@ -1,6 +1,6 @@
 # claudedocs 문서 맵

-> 프로젝트 기술 문서 인덱스 (Last Updated: 2025-12-04)
+> 프로젝트 기술 문서 인덱스 (Last Updated: 2025-12-05)

 ## 폴더 구조

@@ -8,6 +8,7 @@
 claudedocs/
 ├── _index.md           # 이 파일 - 문서 맵
 ├── auth/               # 🔐 인증 & 토큰 관리
+├── hr/                 # 👥 인사관리 (부서/사원)
 ├── item-master/        # 📦 품목기준관리
 ├── sales/              # 💰 판매관리 (견적/거래처)
 ├── dashboard/          # 📊 대시보드 & 사이드바
@@ -37,6 +38,15 @@ claudedocs/

 ---

+## 👥 hr/ - 인사관리 (부서/사원)
+
+| 파일 | 설명 |
+|------|------|
+| `[IMPL-2025-12-05] department-management-checklist.md` | ✅ **완료** - 부서관리 구현 체크리스트 (무제한 트리구조) |
+| `[IMPL-2025-12-05] employee-management-checklist.md` | 🔄 **진행중** - 사원관리 구현 체크리스트 |
+
+---
+
 ## 📦 item-master/ - 품목기준관리

 | 파일 | 설명 |
@@ -62,10 +72,11 @@ claudedocs/

 ---

-## 💰 sales/ - 판매관리 (견적/거래처)
+## 💰 sales/ - 판매관리 (견적/거래처/단가)

 | 파일 | 설명 |
 |------|------|
+| `[IMPL-2025-12-05] pricing-management-migration.md` | 🔄 **진행중** - 단가관리 마이그레이션 계획 (7 Phase, 체크리스트, 원가/마진 계산 로직) |
 | `[API-2025-12-04] quote-api-request.md` | ⭐ **NEW** - 견적관리 API 요청서 (데이터 모델, 엔드포인트, 수식 계산) |
 | `[PLAN-2025-12-04] quote-management-implementation.md` | 📋 **NEW** - 견적관리 작업계획서 (6 Phase, 체크리스트) |
 | `[IMPL-2025-12-04] client-management-api-integration.md` | ✅ **완료** - 거래처관리 API 연동 체크리스트 (CRUD, 그룹 훅) |
@@ -101,6 +112,7 @@ claudedocs/

 | 파일 | 설명 |
 |------|------|
+| `[FIX-2025-12-05] radix-ui-select-controlled-mode-bug.md` | ⭐ **NEW** - Radix UI Select 버그 해결 (Edit 모드 값 표시 안됨 → key prop 강제 리마운트) |
 | `i18n-usage-guide.md` | 다국어 사용 가이드 |
 | `form-validation-guide.md` | 폼 유효성 검사 |
 | `CSS-MIGRATION-WORKFLOW.md` | CSS 마이그레이션 워크플로우 |
@@ -145,6 +157,7 @@ claudedocs/
 - `DESIGN` - 설계 문서
 - `TEST` - 테스트 가이드
 - `NEXT` - 다음 작업 목록
+- `FIX` - 버그 해결 문서

 ### 폴더 배치 기준
 1. **기능/도메인 우선**: 문서 주제에 맞는 폴더에 배치
--- a/radix-ui-select-controlled-mode-bug.md
+++ b/radix-ui-select-controlled-mode-bug.md
@@ -0,0 +1,139 @@
+# Radix UI Select Controlled Mode 버그 해결
+
+**작성일**: 2025-12-05
+**문제 유형**: UI 컴포넌트 버그
+**적용 범위**: 모든 Dropdown/Select 필드
+
+---
+
+## 문제 현상
+
+Edit 모드에서 Select/Dropdown 컴포넌트에 기존 값이 표시되지 않음
+
+**증상:**
+- API에서 데이터 정상 수신 (예: `unit: 'M'`)
+- formData에 값 정상 매핑 (예: `98_unit: 'M'`)
+- resetForm 정상 호출
+- DropdownField에 value prop 정상 전달 (`rawValue: 'M'`)
+- **하지만 UI에 선택된 값이 표시되지 않음!**
+
+---
+
+## 원인
+
+**Radix UI Select의 Controlled Mode 버그**
+
+Select 컴포넌트가 빈 값(`''`)으로 처음 마운트되면, 이후 value prop이 변경되어도 내부 상태가 업데이트되지 않는 문제
+
+**문제 코드:**
+```tsx
+<Select
+  value={stringValue}  // 처음에 '' → 나중에 'M'으로 변경되어도 UI 반영 안됨
+  onValueChange={onChange}
+>
+```
+
+---
+
+## 해결책
+
+**`key` prop으로 강제 리마운트**
+
+```tsx
+<Select
+  key={`${fieldKey}-${stringValue}`}  // value 변경 시 컴포넌트 리마운트
+  value={stringValue}
+  onValueChange={onChange}
+>
+```
+
+---
+
+## 적용 파일
+
+`src/components/items/DynamicItemForm/fields/DropdownField.tsx`
+
+**수정 전:**
+```tsx
+<Select
+  value={stringValue}
+  onValueChange={onChange}
+  disabled={disabled || !hasOptions}
+>
+```
+
+**수정 후:**
+```tsx
+<Select
+  key={`${fieldKey}-${stringValue}`}
+  value={stringValue}
+  onValueChange={onChange}
+  disabled={disabled || !hasOptions}
+>
+```
+
+---
+
+## 적용 범위
+
+이 수정은 `DropdownField` 컴포넌트를 사용하는 **모든 품목 유형**에 자동 적용됨:
+
+- ✅ 소모품 (CS)
+- ✅ 원자재 (RM)
+- ✅ 부자재 (SM)
+- ✅ 부품 (PT)
+- ✅ 제품 (FG)
+
+---
+
+## 디버깅 가이드
+
+Edit 모드에서 Select 값이 안 나올 때 체크리스트:
+
+### 1. API 데이터 확인
+```
+[EditItem] ========== API 원본 데이터 ==========
+unit: M        ← 값 있음 ✅
+specification: null  ← 백엔드에서 안 줌 ❌
+```
+
+### 2. 필드 매핑 확인
+```
+[DynamicItemForm] fieldKeyMap: {unit: '98_unit', ...}
+[DynamicItemForm] Mapped initialData: {98_unit: 'M', ...}
+```
+
+### 3. resetForm 확인
+```
+[useDynamicFormState] resetForm 호출됨: {98_unit: 'M', ...}
+```
+
+### 4. DropdownField 확인
+```
+[DropdownField] 단위 필드 디버깅:
+  rawValue: 'M'           ← 값 있음 ✅
+  valueInOptions: true    ← 옵션에 존재 ✅
+```
+
+**모든 값이 정상인데 UI에 안 나오면 → key prop 문제!**
+
+---
+
+## 관련 이슈
+
+### 추가 발견 사항
+
+API 응답에서 일부 필드가 누락될 수 있음:
+- `specification: null` → DB에 값 없거나 API 응답에서 제외
+- `note: undefined` → API 응답에 필드 자체가 없음
+- `remarks: null` → DB에 값 없음
+
+이런 경우 **백엔드 API 수정 요청 필요**
+
+---
+
+## 참고
+
+- Radix UI Select 공식 문서에서는 이 동작을 버그로 인정하지 않음
+- React의 controlled component 패턴에서 초기값 변경 시 발생하는 일반적인 문제
+- `key` prop 패턴은 React 공식 권장 해결책
--- a/department-management-checklist.md
+++ b/department-management-checklist.md
@@ -0,0 +1,319 @@
+# 부서관리 화면 구현 체크리스트
+
+> **생성일**: 2025-12-05
+> **상태**: 구현 완료 (API 연동 대기)
+> **경로**: `인사관리 > 부서관리`
+> **테스트 URL**: `http://localhost:3000/ko/hr/department-management`
+
+---
+
+## 0. 핵심 요구사항
+
+### 트리 구조 - 무제한 깊이
+
+```
+회사명
+├── 부서A
+│   ├── 팀A-1
+│   │   ├── 파트A-1-1
+│   │   │   └── ... (무제한)
+│   │   └── 파트A-1-2
+│   └── 팀A-2
+├── 부서B
+│   └── 팀B-1
+└── 부서C
+```
+
+- **깊이 제한 없음**: 부서 > 하위부서 > 하위부서 > ... 무한 재귀 가능
+- **재귀적 데이터 구조**: `children` 배열로 무한 중첩 표현
+- **동적 들여쓰기**: depth에 따라 padding-left 계산 (`depth * 24px` 등)
+- **+/- 토글**: 하위 항목이 있는 모든 노드에 펼침/접힘 버튼 표시
+
+---
+
+## 1. 화면 분석 요약
+
+### 1.1 스크린샷 기반 기능 정리
+
+| 번호 | 구분 | 기능 | 설명 |
+|------|------|------|------|
+| 01 | 전체 선택 | 체크박스 | 전체 선택/해제 토글, 디폴트 해제 |
+| 02 | 개별 선택 | 체크박스 | 개별 선택/해제 토글, 디폴트 해제 |
+| 03 | 추가 버튼 | 상단 액션 | 관리 권한 없으면 숨김, 선택한 부서의 하위 부서 일괄 생성 |
+| 04 | 삭제 버튼 | 상단 액션 | 관리 권한 없으면 숨김, "선택한 부서 N개를 삭제하시겠습니까?" Alert |
+| 05 | 축소 버튼 | 트리 (-) | 클릭 시 확대 버튼으로 변경, 하위 부서 숨김 |
+| 06 | 확대 버튼 | 트리 (+) | 클릭 시 축소 버튼으로 변경, 하위 부서 표시 |
+| 07 | 추가 버튼 | 행 호버 | 관리 권한 없으면 숨김, 부서 추가 팝업 표시 |
+| 08 | 수정 버튼 | 행 호버 | 관리 권한 없으면 숨김, 부서 수정 팝업 표시 |
+| 09 | 삭제 버튼 | 행 호버 | 관리 권한 없으면 숨김, "{부서명} 부서를 삭제하시겠습니까?" Alert |
+
+### 1.2 팝업 구성
+
+| 팝업 | 구성요소 | 비고 |
+|------|----------|------|
+| 부서 추가 | 부서명 인풋박스 + 취소/등록 버튼 | 기존 부서명 표시, 수정 가능 |
+| 부서 수정 | 부서명 인풋박스 + 취소/수정 버튼 | 기존 부서명 표시 |
+
+### 1.3 삭제 로직
+
+- 삭제 시 해당 부서의 인원은 **회사(기본) 인원으로 변경**됨
+
+---
+
+## 2. 컴포넌트 구조
+
+```
+src/
+├── app/[locale]/(protected)/hr/
+│   └── department-management/
+│       └── page.tsx                    # 페이지 진입점
+│
+└── components/hr/
+    └── DepartmentManagement/
+        ├── index.tsx                   # 메인 컴포넌트
+        ├── DepartmentStats.tsx         # 전체 부서 카운트 카드
+        ├── DepartmentToolbar.tsx       # 검색 + 추가/삭제 버튼
+        ├── DepartmentTree.tsx          # 트리 구조 테이블
+        ├── DepartmentTreeItem.tsx      # 트리 행 (재귀)
+        ├── DepartmentDialog.tsx        # 추가/수정 팝업
+        └── types.ts                    # 타입 정의
+```
+
+---
+
+## 3. 타입 정의
+
+```typescript
+// types.ts
+
+/**
+ * 부서 데이터 (무제한 깊이 재귀 구조)
+ * - depth: 렌더링 시 들여쓰기 계산용 (0부터 시작, 제한 없음)
+ * - children: 하위 부서 배열 (재귀적으로 무한 중첩 가능)
+ */
+interface Department {
+  id: number;
+  name: string;
+  parentId: number | null;
+  depth: number;           // 깊이 (0: 최상위, 1, 2, 3, ... 무제한)
+  children?: Department[]; // 하위 부서 (재귀 - 무제한 깊이)
+}
+
+interface DepartmentDialogProps {
+  isOpen: boolean;
+  onOpenChange: (open: boolean) => void;
+  mode: 'add' | 'edit';
+  parentDepartment?: Department;  // 추가 시 부모 부서
+  department?: Department;        // 수정 시 대상 부서
+  onSubmit: (name: string) => void;
+}
+
+/**
+ * 트리 아이템 Props (재귀 렌더링)
+ */
+interface DepartmentTreeItemProps {
+  department: Department;
+  depth: number;                    // 현재 깊이 (들여쓰기 계산용)
+  isExpanded: boolean;              // 펼침 상태
+  isSelected: boolean;              // 선택 상태
+  onToggleExpand: (id: number) => void;
+  onToggleSelect: (id: number) => void;
+  onAdd: (parentId: number) => void;
+  onEdit: (department: Department) => void;
+  onDelete: (department: Department) => void;
+  expandedIds: Set<number>;         // 전체 펼침 상태 (하위 재귀용)
+  selectedIds: Set<number>;         // 전체 선택 상태 (하위 재귀용)
+}
+```
+
+---
+
+## 4. 구현 체크리스트
+
+### Phase 1: 기본 구조 설정
+- [x] `types.ts` - Department 타입 및 Props 인터페이스 정의
+- [x] `page.tsx` - 라우트 페이지 생성 (`/hr/department-management`)
+- [x] `index.tsx` - DepartmentManagement 메인 컴포넌트 (PageLayout + PageHeader)
+
+### Phase 2: 상단 영역 구현
+- [x] `DepartmentStats.tsx` - 전체 부서 카운트 카드 ("전체 부서 N개")
+- [x] `DepartmentToolbar.tsx` - 검색창 구현
+- [x] `DepartmentToolbar.tsx` - 선택 카운트 표시 ("총 N건 | N건 선택")
+- [x] `DepartmentToolbar.tsx` - 추가 버튼 (선택한 부서 하위에 일괄 추가)
+- [x] `DepartmentToolbar.tsx` - 삭제 버튼 (선택한 부서 일괄 삭제)
+
+### Phase 3: 트리 테이블 구현
+- [x] `DepartmentTree.tsx` - 테이블 헤더 (전체 선택 체크박스 + 부서명 + 작업)
+- [x] `DepartmentTreeItem.tsx` - 트리 행 기본 구조 (체크박스 + 들여쓰기 + 부서명)
+- [x] `DepartmentTreeItem.tsx` - +/- 버튼 (하위 부서 펼침/접힘)
+- [x] `DepartmentTreeItem.tsx` - 호버 시 작업 버튼 표시 (추가, 수정, 삭제)
+- [x] `DepartmentTreeItem.tsx` - 재귀 렌더링 (하위 부서 표시)
+
+### Phase 4: 다이얼로그 구현
+- [x] `DepartmentDialog.tsx` - 부서 추가 팝업 (부서명 입력 + 취소/등록)
+- [x] `DepartmentDialog.tsx` - 부서 수정 팝업 (부서명 입력 + 취소/수정)
+- [x] AlertDialog - 단일 삭제 확인 ("{부서명} 부서를 삭제하시겠습니까?")
+- [x] AlertDialog - 일괄 삭제 확인 ("선택한 부서 N개를 삭제하시겠습니까?")
+
+### Phase 5: 상태 관리 & 인터랙션
+- [x] 체크박스 선택 상태 관리 (selectedIds: Set)
+- [x] 전체 선택/해제 로직 구현
+- [x] 트리 펼침/접힘 상태 관리 (expandedIds: Set)
+- [ ] 검색 필터링 로직 구현 (TODO: 추후 구현)
+- [x] 목업 데이터 생성 및 연동
+
+### Phase 6: 스타일 및 마무리
+- [x] 기존 프로젝트 디자인 패턴 적용 확인
+- [x] 반응형 레이아웃 확인 (모바일/데스크톱)
+- [x] 호버 애니메이션 및 트랜지션 확인
+- [ ] 접근성 확인 (키보드 네비게이션) (TODO: 추후 보완)
+
+---
+
+## 5. 디자인 기준 (기존 프로젝트 패턴)
+
+### 5.1 레이아웃
+- **페이지 패딩**: `p-4 md:p-6`
+- **섹션 간격**: `space-y-4 md:space-y-6`
+- **카드**: `border rounded-lg p-4`
+
+### 5.2 컴포넌트
+| 요소 | 컴포넌트 | 비고 |
+|------|----------|------|
+| 페이지 래퍼 | `PageLayout` | maxWidth="full" |
+| 헤더 | `PageHeader` | icon + title + description |
+| 카드 | `Card` | 전체 부서 카운트 |
+| 입력창 | `Input` | 검색, 부서명 |
+| 버튼 | `Button` | variant: default, outline, ghost, destructive |
+| 체크박스 | `Checkbox` | 전체/개별 선택 |
+| 팝업 | `Dialog` | 추가/수정 |
+| 확인창 | `AlertDialog` | 삭제 확인 |
+
+### 5.3 아이콘 (lucide-react)
+- `Building2` - 페이지 아이콘
+- `Search` - 검색
+- `Plus` - 추가
+- `Trash2` - 삭제
+- `Pencil` - 수정
+- `ChevronRight` / `ChevronDown` - 트리 펼침/접힘
+- `Minus` - 트리 접힘 버튼
+
+### 5.4 인터랙션
+- **행 호버**: `hover:bg-gray-50 transition-colors`
+- **작업 버튼**: 호버 시에만 표시 (`opacity-0 group-hover:opacity-100`)
+
+---
+
+## 6. 목업 데이터
+
+```typescript
+/**
+ * 무제한 깊이 트리 구조 목업 데이터
+ * - depth 0: 회사
+ * - depth 1: 부서
+ * - depth 2: 팀
+ * - depth 3+: 파트, 셀, ... (무제한)
+ */
+const mockDepartments: Department[] = [
+  {
+    id: 1,
+    name: '회사명',
+    parentId: null,
+    depth: 0,
+    children: [
+      {
+        id: 2,
+        name: '경영지원본부',
+        parentId: 1,
+        depth: 1,
+        children: [
+          {
+            id: 4,
+            name: '인사팀',
+            parentId: 2,
+            depth: 2,
+            children: [
+              {
+                id: 7,
+                name: '채용파트',
+                parentId: 4,
+                depth: 3,
+                children: [
+                  { id: 10, name: '신입채용셀', parentId: 7, depth: 4, children: [] },
+                  { id: 11, name: '경력채용셀', parentId: 7, depth: 4, children: [] },
+                ]
+              },
+              { id: 8, name: '교육파트', parentId: 4, depth: 3, children: [] },
+            ]
+          },
+          { id: 5, name: '총무팀', parentId: 2, depth: 2, children: [] },
+        ]
+      },
+      {
+        id: 3,
+        name: '개발본부',
+        parentId: 1,
+        depth: 1,
+        children: [
+          { id: 6, name: '프론트엔드팀', parentId: 3, depth: 2, children: [] },
+          { id: 9, name: '백엔드팀', parentId: 3, depth: 2, children: [] },
+        ]
+      },
+    ]
+  }
+];
+
+/**
+ * 전체 부서 수 계산 유틸리티 (재귀)
+ */
+const countAllDepartments = (departments: Department[]): number => {
+  return departments.reduce((count, dept) => {
+    return count + 1 + (dept.children ? countAllDepartments(dept.children) : 0);
+  }, 0);
+};
+
+/**
+ * 모든 부서 ID 추출 유틸리티 (재귀 - 전체 선택용)
+ */
+const getAllDepartmentIds = (departments: Department[]): number[] => {
+  return departments.flatMap(dept => [
+    dept.id,
+    ...(dept.children ? getAllDepartmentIds(dept.children) : [])
+  ]);
+};
+```
+
+---
+
+## 7. 참고 파일
+
+| 파일 | 참고 내용 |
+|------|-----------|
+| `src/components/items/ItemMasterDataManagement.tsx` | 전체 구조 패턴 |
+| `src/components/organisms/PageHeader.tsx` | 헤더 컴포넌트 |
+| `src/components/organisms/PageLayout.tsx` | 레이아웃 컴포넌트 |
+| `src/components/ui/dialog.tsx` | 다이얼로그 사용법 |
+| `src/components/ui/alert-dialog.tsx` | 확인 다이얼로그 |
+| `src/components/ui/checkbox.tsx` | 체크박스 |
+
+---
+
+## 8. 진행 로그
+
+| 날짜 | 작업 내용 | 상태 |
+|------|-----------|------|
+| 2025-12-05 | 계획서 작성 | 완료 |
+| 2025-12-05 | Phase 1: 기본 구조 (types, page, index) | 완료 |
+| 2025-12-05 | Phase 2: 상단 영역 (Stats, Toolbar) | 완료 |
+| 2025-12-05 | Phase 3: 트리 테이블 (Tree, TreeItem) | 완료 |
+| 2025-12-05 | Phase 4: 다이얼로그 (Dialog, AlertDialog) | 완료 |
+| 2025-12-05 | Phase 5: 상태 관리 (선택, 펼침, 추가/수정/삭제) | 완료 |
+| 2025-12-05 | 빌드 테스트 | 성공 |
+
+---
+
+## 9. 이슈 및 메모
+
+- API 연동 없이 화면만 먼저 구현 (목업 데이터 사용)
+- 권한 체크 로직은 추후 API 연동 시 구현 예정
+- 삭제 시 인원 이동 로직은 백엔드 API 의존
--- a/employee-management-checklist.md
+++ b/employee-management-checklist.md
@@ -0,0 +1,143 @@
+# 사원관리 (Employee Management) 구현 체크리스트
+
+## 개요
+- **위치**: 인사관리 > 사원관리
+- **경로**: `/[locale]/(protected)/hr/employee-management`
+- **생성일**: 2025-12-05
+- **상태**: 🔄 진행중
+
+## 화면 구성 분석 (스크린샷 기반)
+
+### 1. 메인 목록 화면
+- 통계 카드: 재직(55명), 휴직(5명), 퇴직(1명), 평균근속년수(5.3년)
+- 날짜 필터 (기간 선택)
+- 액션 버튼: CSV 일괄등록, 사원등록, 사용자 초대
+- 검색 및 필터 (전체/사용자 아이디 보유 등)
+- 정렬 옵션
+- 테이블 컬럼: No, 사원코드, 부서, 직책, 이름, 직급, 휴대폰, 이메일, 입사일, 상태, 사용자아이디, 권한, 작업
+
+### 2. 사원 등록/수정 다이얼로그
+- **기본 사원정보**: 이름*, 주민등록번호, 휴대폰, 이메일, 연봉, 급여계좌(은행, 계좌, 예금주)
+- **선택적 필드** (설정에 따라 표시): 프로필사진, 사원코드, 성별, 주소(우편번호 찾기)
+- **인사정보**: 입사일, 고용형태, 직급, 상태, 부서/직책 (복수 가능)
+- **사용자 정보**: 아이디*, 비밀번호*, 권한, 상태
+
+### 3. 필드 설정 팝업
+- 사원 상세 필드 ON/OFF: 프로필 사진, 사원코드, 성별, 주소
+- 인사 정보 필드 ON/OFF: 입사일, 고용 형태, 직급, 상태, 부서, 직책
+
+### 4. CSV 일괄등록
+- 테이블 형태로 데이터 미리보기 표시
+- 유효성 검사 결과 표시
+
+---
+
+## 구현 체크리스트
+
+### Phase 1: 기본 구조 설정
+- [x] 1.1 types.ts 생성 - Employee, EmployeeFormData 인터페이스 정의
+- [x] 1.2 page.tsx 생성 - 라우트 페이지 (/hr/employee-management)
+- [x] 1.3 index.tsx 생성 - 메인 컴포넌트 (상태 관리)
+- [x] 1.4 mock 데이터 생성 - 테스트용 사원 데이터 (61명: 55 재직, 5 휴직, 1 퇴직)
+
+### Phase 2: 통계 및 목록 화면
+- [x] 2.1 EmployeeStats - 통계 카드 (공통 StatCards 활용)
+- [x] 2.2 EmployeeToolbar.tsx - 날짜필터, 액션 버튼 영역
+- [x] 2.3 메인 목록 구현 - 공통 DataTable 활용
+- [x] 2.4 테이블 컬럼 정의 - 모든 필수 컬럼 구현
+
+### Phase 3: 사원 등록/수정 다이얼로그
+- [x] 3.1 EmployeeDialog.tsx - 다이얼로그 컨테이너 (create/edit/view 모드 통합)
+- [x] 3.2 기본 사원정보 폼 섹션 (EmployeeDialog 내 통합)
+- [x] 3.3 선택적 필드 섹션 - 프로필, 사원코드, 성별, 주소 (필드설정 연동)
+- [x] 3.4 인사정보 섹션 - 부서/직책 복수 추가/삭제 기능 구현
+- [x] 3.5 사용자 정보 섹션 - Switch로 계정 생성 토글
+
+### Phase 4: 필드 설정 기능
+- [x] 4.1 FieldSettingsDialog.tsx - 필드 ON/OFF 설정 다이얼로그
+- [x] 4.2 필드 설정 상태 관리 (useState 기반)
+- [x] 4.3 설정에 따른 폼 필드 동적 렌더링
+
+### Phase 5: CSV 일괄등록
+- [x] 5.1 CSVUploadDialog.tsx - CSV 업로드 다이얼로그
+- [x] 5.2 CSV 파싱 유틸리티 (내장)
+- [x] 5.3 미리보기 테이블 구현
+- [x] 5.4 유효성 검사 및 에러 표시
+
+### Phase 6: 추가 기능
+- [x] 6.1 사용자 초대 기능 - UI 버튼 준비 (실제 로직은 API 연동 시)
+- [x] 6.2 삭제 확인 AlertDialog
+- [x] 6.3 필터/검색 기능 완성 (DataTable 내장)
+- [x] 6.4 정렬 기능 완성 (DataTable 내장)
+
+### Phase 7: 테스트 및 검증
+- [x] 7.1 빌드 테스트 ✅ 성공
+- [ ] 7.2 UI 렌더링 확인 (사용자 테스트 필요)
+- [ ] 7.3 반응형 디자인 확인 (모바일 카드뷰)
+
+---
+
+## 공통 컴포넌트 활용 계획
+
+| 컴포넌트 | 용도 |
+|----------|------|
+| DataTable | 사원 목록 테이블 |
+| StatCards | 통계 카드 (재직, 휴직, 퇴직, 평균근속년수) |
+| SearchFilter | 검색 및 필터 |
+| Pagination | 페이지네이션 |
+| TabFilter | 상태별 탭 필터 |
+| Dialog | 등록/수정 다이얼로그 |
+| AlertDialog | 삭제 확인 |
+| Switch | 필드 설정 ON/OFF |
+| Select | 드롭다운 (은행, 권한 등) |
+| Input | 텍스트 입력 필드 |
+| Button | 모든 버튼 |
+| Badge | 상태 표시 (재직/휴직/퇴직) |
+
+---
+
+## 참고사항
+
+### 외부 이메일 로직 (스크린샷 7)
+- 사용자 초대 시 외부 이메일 발송
+- 현재는 UI만 구현, 실제 이메일 발송은 API 연동 시 처리
+
+### 부서/직책 복수 선택
+- 한 사원이 여러 부서에 소속 가능
+- 부서별 직책 개별 설정
+- 추가/삭제 버튼으로 관리
+
+### 필드 설정 저장
+- 필드 표시 설정은 세션 또는 localStorage에 저장
+- 사용자별로 다른 설정 유지 가능
+
+---
+
+## 진행 상황 업데이트
+
+| 날짜 | 완료 항목 | 메모 |
+|------|-----------|------|
+| 2025-12-05 | 체크리스트 작성 | 스크린샷 분석 완료 |
+| 2025-12-05 | Phase 1-6 구현 완료 | types.ts, page.tsx, index.tsx, EmployeeToolbar, EmployeeDialog, FieldSettingsDialog, CSVUploadDialog |
+| 2025-12-05 | 빌드 테스트 성공 | 17.1 kB First Load JS |
+
+## 생성된 파일 목록
+
+```
+src/components/hr/EmployeeManagement/
+├── types.ts              # 타입 정의 (Employee, EmployeeFormData, FieldSettings 등)
+├── index.tsx             # 메인 컴포넌트 (상태관리, DataTable 활용)
+├── EmployeeToolbar.tsx   # 툴바 (날짜필터, 액션버튼)
+├── EmployeeDialog.tsx    # 등록/수정/상세 다이얼로그
+├── FieldSettingsDialog.tsx # 필드 설정 다이얼로그
+└── CSVUploadDialog.tsx   # CSV 일괄등록 다이얼로그
+
+src/app/[locale]/(protected)/hr/employee-management/
+└── page.tsx              # 라우트 페이지
+```
+
+## 접속 URL
+
+- 한국어: `http://localhost:3000/ko/hr/employee-management`
+- 영어: `http://localhost:3000/en/hr/employee-management`
+- 일본어: `http://localhost:3000/ja/hr/employee-management`
--- a/claudedocs/item-master/[IMPL-2025-12-05]
+++ b/claudedocs/item-master/[IMPL-2025-12-05]
@@ -0,0 +1,162 @@
+# 품목 파일 업로드 기능 구현 체크리스트
+
+**생성일**: 2025-12-05
+**상태**: 🔄 진행중
+
+---
+
+## 📋 개요
+
+품목 등록/수정 시 파일 업로드 기능이 누락되어 있음. 백엔드 API는 구현되어 있으나 프론트엔드에서 호출하지 않음.
+
+### 대상 파일 타입
+
+| 타입 | API type 값 | 대상 품목 | 허용 확장자 | 최대 크기 |
+|------|------------|----------|------------|----------|
+| 절곡/조립 전개도 | `bending_diagram` | PT (BENDING, ASSEMBLY) | jpg,jpeg,png,gif,bmp,svg,webp | 10MB |
+| 시방서 | `specification` | FG | pdf,doc,docx,xls,xlsx,hwp | 20MB |
+| 인정서 | `certification` | FG | pdf,doc,docx,xls,xlsx,hwp | 20MB |
+
+### 백엔드 API
+
+- **업로드**: `POST /api/v1/items/{id}/files` (multipart/form-data)
+- **삭제**: `DELETE /api/v1/items/{id}/files/{type}`
+
+### DB 컬럼 (Product 모델)
+
+```
+bending_diagram, bending_details
+specification_file, specification_file_name
+certification_file, certification_file_name
+certification_number, certification_start_date, certification_end_date
+```
+
+---
+
+## Phase 1: 프록시 API 수정
+
+- [x] **1.1** `/api/proxy/[...path]/route.ts` multipart/form-data 지원 추가 ✅
+  - `executeBackendRequest` 함수에 `isFormData` 파라미터 추가
+  - multipart/form-data일 때 FormData 그대로 전달
+  - Content-Type 헤더 생략하여 boundary 자동 설정
+
+---
+
+## Phase 2: 파일 업로드 API 함수 생성
+
+- [x] **2.1** `src/lib/api/items.ts`에 파일 업로드/삭제 함수 추가 ✅
+  - `uploadItemFile(itemId, file, type, options?)` - 프록시 경유, ID 기반
+  - `deleteItemFile(itemId, type)` - 프록시 경유, ID 기반
+  - `UploadFileOptions` 인터페이스: certification 필드, bendingDetails 지원
+  - 레거시 함수 deprecated 처리
+
+---
+
+## Phase 3: DynamicItemForm 수정 (등록 모드)
+
+- [x] **3.1** `handleFormSubmit` 수정 - 품목 생성 후 파일 업로드 로직 추가 ✅
+  - 품목 생성 → ID 반환 → 파일 업로드
+  - `types.ts`에 `ItemSaveResult` 인터페이스 추가
+  - `create/page.tsx`에서 ID 반환하도록 수정
+- [x] **3.2** PT (절곡/조립): `bendingDiagramFile` 업로드 연동 ✅
+  - `uploadItemFile(itemId, bendingDiagramFile, 'bending_diagram')` 호출
+  - bendingDetails 옵션 지원
+- [x] **3.3** FG (제품): `specificationFile`, `certificationFile` 업로드 연동 ✅
+  - 시방서: `uploadItemFile(itemId, specificationFile, 'specification')`
+  - 인정서: `uploadItemFile(itemId, certificationFile, 'certification', { certificationNumber, ... })`
+- [x] **3.4** 에러 처리: 품목은 생성됐는데 파일 업로드 실패 시 처리 ✅
+  - 파일 업로드 실패 시 경고 alert 표시
+  - 품목 저장은 완료되므로 리다이렉트 진행
+
+---
+
+## Phase 4: DynamicItemForm 수정 (수정 모드)
+
+- [x] **4.1** 기존 파일 정보 로드 및 표시 ✅
+  - `edit/page.tsx` `mapApiResponseToFormData`에 파일 필드 추가
+  - `bending_diagram`, `specification_file`, `certification_file` 등 매핑
+- [x] **4.2** 파일 업로드 (새 파일로 교체) ✅
+  - `edit/page.tsx`에서 `itemId` prop 전달
+  - 동일한 파일 업로드 로직 적용 (등록/수정 공용)
+- [ ] **4.3** 파일 삭제 기능 추가 (DELETE API 호출) - Phase 5로 이동
+- [x] **4.4** edit/page.tsx에서 파일 관련 initialData 매핑 ✅
+
+---
+
+## Phase 5: 기존 파일 표시 및 UI 개선
+
+### 5-A. 상세 페이지 파일 표시
+
+- [x] **5.1** `/items/[id]/page.tsx` - `mapApiResponseToItemMaster`에 파일 필드 추가 ✅
+  - `bendingDiagram` (전개도 이미지 URL)
+  - `specificationFile`, `specificationFileName` (시방서)
+  - `certificationFile`, `certificationFileName` (인정서)
+  - `certificationNumber`, `certificationStartDate`, `certificationEndDate` (인정 정보)
+
+- [x] **5.2** `ItemDetailClient.tsx` - 파일 표시 UI 추가 ✅
+  - PT(절곡/조립): 전개도 이미지 표시 (`<img>` 태그) + 절곡 상세정보 테이블
+  - FG(제품): 시방서/인정서 파일명 표시 (Badge + 다운로드 링크)
+  - FG(제품): 인정 정보 표시 (인정번호, 유효기간)
+
+### 5-B. 수정 페이지 기존 파일 표시
+
+- [x] **5.3** `DynamicItemForm/index.tsx` - 기존 파일 표시 UI 추가 ✅
+  - FG(제품): 기존 시방서/인정서 파일명 표시
+  - initialData에서 파일 정보 로드 (useEffect)
+  - `getStorageUrl` 헬퍼 함수로 URL 변환
+
+- [x] **5.4** 파일 삭제 버튼 추가 ✅
+  - `deleteItemFile` API 호출
+  - 삭제 확인 다이얼로그 (confirm)
+  - 삭제 중 로딩 상태 표시
+
+### 5-C. 추가 개선 (선택)
+
+- [ ] **5.5** 업로드 진행 상태 표시 (로딩 스피너)
+- [ ] **5.6** 파일 크기/확장자 validation (프론트엔드)
+- [x] **5.7** 파일 다운로드 링크 추가 ✅ (상세/수정 페이지 모두)
+
+---
+
+## Phase 6: 테스트
+
+- [ ] **6.1** 등록 모드: PT 절곡품 이미지 업로드 테스트
+- [ ] **6.2** 등록 모드: PT 조립품 이미지 업로드 테스트
+- [ ] **6.3** 등록 모드: FG 시방서/인정서 업로드 테스트
+- [ ] **6.4** 수정 모드: 기존 파일 표시 테스트
+- [ ] **6.5** 수정 모드: 파일 교체 테스트
+- [ ] **6.6** 수정 모드: 파일 삭제 테스트
+
+---
+
+## 참고 파일
+
+### 프론트엔드
+- `/src/app/api/proxy/[...path]/route.ts` - 프록시 API
+- `/src/lib/api/items.ts` - API 함수
+- `/src/components/items/DynamicItemForm/index.tsx` - 메인 폼
+- `/src/components/items/ItemForm/BendingDiagramSection.tsx` - 전개도 섹션
+- `/src/app/[locale]/(protected)/items/create/page.tsx` - 등록 페이지
+- `/src/app/[locale]/(protected)/items/[id]/edit/page.tsx` - 수정 페이지
+
+### 백엔드
+- `/app/Http/Controllers/Api/V1/ItemsFileController.php` - 파일 업로드 컨트롤러
+- `/app/Http/Requests/ItemsFileUploadRequest.php` - 요청 검증
+- `/app/Models/Products/Product.php` - Product 모델
+
+---
+
+## 작업 로그
+
+| 날짜 | 작업 내용 | 완료 |
+|------|----------|:----:|
+| 2025-12-05 | 체크리스트 생성, 현황 분석 완료 | ✅ |
+| 2025-12-05 | Phase 1: 프록시 API multipart/form-data 지원 추가 | ✅ |
+| 2025-12-05 | Phase 2: 파일 업로드/삭제 API 함수 생성 | ✅ |
+| 2025-12-05 | Phase 3: 등록 모드 파일 업로드 연동 완료 | ✅ |
+| 2025-12-05 | Phase 4: 수정 모드 파일 업로드 연동 완료 | ✅ |
+| 2025-12-05 | 빌드 테스트 통과 | ✅ |
+| 2025-12-05 | Phase 5: 기존 파일 표시 UI 구현 완료 | ✅ |
+| | - 상세 페이지: 전개도 이미지, 시방서/인정서 표시 | |
+| | - 수정 페이지: 기존 파일 미리보기 + 삭제 기능 | |
+| | | |
--- a/claudedocs/sales/[IMPL-2025-12-05]
+++ b/claudedocs/sales/[IMPL-2025-12-05]
@@ -0,0 +1,328 @@
+# [IMPL-2025-12-05] 단가관리 페이지 마이그레이션 계획서
+
+## 개요
+- **소스**: sam-design 프로젝트 (`PricingManagement*.tsx`, `PricingWrite.tsx`)
+- **대상**: sam-react-prod (Next.js App Router)
+- **경로**: `/sales/pricing-management`
+- **기존 공통 테이블**: `@/components/common/DataTable/DataTable.tsx` 사용
+
+---
+
+## 스크린샷 분석 결과
+
+### 1. 단가 목록 페이지
+- 통계 카드 4개 (전체 품목, 단가 등록, 미등록, 확정)
+- 검색창 (품목 코드, 품목명, 규격 검색)
+- 탭 필터 (전체/제품/부품/부자재/원자재/소모품/절곡물)
+- 데이터 테이블 컬럼: 번호, 품목유형, 품목코드, 품목명, 규격, 단위, 매입단가, 가공비, 판매단가, 마진율, 적용일, 상태, 작업
+
+### 2. 단가 등록 페이지 (미등록 → + 버튼)
+- 품목 정보 섹션 (읽기전용): 품목코드, 품목명, 품목유형, 단위, 규격
+- 단가 정보 입력:
+  - 적용일 (필수)
+  - 공급업체, 입고일, 작성자
+  - 입고가 (필수), 단위, LOSS(%), 가공비
+  - 원가 계산 섹션 (입고가 + 가공비 + LOSS = LOSS 적용 원가)
+  - 반올림 규칙, 반올림 단위
+  - 마진율(%), 판매단가 (필수)
+  - 마진 계산 섹션 (LOSS 적용 원가 vs 판매단가 = 마진)
+  - 비고
+
+### 3. 단가 수정 페이지 (활성 상태)
+- 등록 페이지와 동일 구조
+- 상태 배지 표시 (활성/확정/수정차수)
+- 추가 버튼: 이력 조회, 최종 확정, 저장
+- 다이얼로그: 이력 조회, 수정 이력 생성, 최종 확정
+
+---
+
+## 파일 구조
+
+```
+src/
+├── app/[locale]/(protected)/sales/pricing-management/
+│   ├── page.tsx                    # 단가 목록 페이지
+│   ├── create/
+│   │   └── page.tsx               # 단가 등록 페이지 (품목 선택 후)
+│   └── [id]/
+│       └── edit/
+│           └── page.tsx           # 단가 수정 페이지
+├── components/
+│   └── pricing/
+│       ├── PricingListClient.tsx   # 목록 클라이언트 컴포넌트
+│       ├── PricingFormClient.tsx   # 등록/수정 폼 컴포넌트
+│       ├── PricingStatsCards.tsx   # 통계 카드 컴포넌트
+│       ├── PricingHistoryDialog.tsx # 이력 조회 다이얼로그
+│       ├── PricingRevisionDialog.tsx # 수정 이력 생성 다이얼로그
+│       ├── PricingFinalizeDialog.tsx # 최종 확정 다이얼로그
+│       └── types.ts                # 타입 정의
+└── lib/api/
+    └── pricing.ts                  # API 함수
+```
+
+---
+
+## 체크리스트
+
+### Phase 1: 기본 설정 및 타입 정의 ✅
+- [x] 1.1 `src/components/pricing/types.ts` 타입 정의 파일 생성
+  - [x] `PricingData` 인터페이스
+  - [x] `PricingRevision` 인터페이스
+  - [x] `PricingFormData` 인터페이스
+  - [x] `PricingStats` 인터페이스
+- [ ] 1.2 `src/lib/api/pricing.ts` API 함수 파일 생성 (API 연동 시 구현 예정)
+  - [ ] `fetchPricingList` - 단가 목록 조회
+  - [ ] `fetchPricingById` - 단가 상세 조회
+  - [ ] `createPricing` - 단가 등록
+  - [ ] `updatePricing` - 단가 수정
+  - [ ] `finalizePricing` - 단가 최종 확정
+  - [ ] `fetchPricingHistory` - 단가 이력 조회
+
+### Phase 2: 단가 목록 페이지 ✅
+- [x] 2.1 통계 카드 (공통 StatCards 컴포넌트 활용)
+  - [x] 전체 품목 카드 (Package 아이콘, 파랑)
+  - [x] 단가 등록 카드 (DollarSign 아이콘, 초록)
+  - [x] 미등록 카드 (AlertCircle 아이콘, 주황)
+  - [x] 확정 카드 (CheckCircle2 아이콘, 보라)
+- [x] 2.2 `src/components/pricing/PricingListClient.tsx` 생성
+  - [x] 공통 DataTable 컴포넌트 연동
+  - [x] 탭 필터 구성 (전체/제품/부품/부자재/원자재/소모품/절곡물)
+  - [x] 검색 기능 (품목코드, 품목명, 규격)
+  - [x] 테이블 컬럼 정의
+    - [x] 번호 컬럼
+    - [x] 품목유형 컬럼 (Badge)
+    - [x] 품목코드 컬럼
+    - [x] 품목명 컬럼
+    - [x] 규격 컬럼
+    - [x] 단위 컬럼
+    - [x] 매입단가 컬럼 (금액 포맷)
+    - [x] 가공비 컬럼 (금액 포맷)
+    - [x] 판매단가 컬럼 (금액 포맷, 굵게)
+    - [x] 마진율 컬럼 (Badge, 색상 구분)
+    - [x] 적용일 컬럼 (날짜 포맷)
+    - [x] 상태 컬럼 (미등록/활성/확정 Badge)
+    - [x] 작업 컬럼 (등록/수정/이력 버튼)
+  - [x] 품목 마스터 동기화 버튼
+- [x] 2.3 `src/app/[locale]/(protected)/sales/pricing-management/page.tsx` 생성
+  - [x] 서버 컴포넌트 구성
+  - [x] PricingListClient 연동
+
+### Phase 3: 단가 등록/수정 폼 컴포넌트 ✅
+- [x] 3.1 `src/components/pricing/PricingFormClient.tsx` 생성
+  - [x] 품목 정보 섹션 (읽기전용 카드)
+    - [x] 품목 코드
+    - [x] 품목명
+    - [x] 품목 유형 (Badge)
+    - [x] 단위
+    - [x] 규격
+  - [x] 단가 정보 섹션
+    - [x] 적용일 입력 (필수, DatePicker)
+    - [x] 공급업체 입력
+    - [x] 입고일 입력 (DatePicker)
+    - [x] 작성자 입력
+    - [x] 입고가 입력 (필수, 숫자)
+    - [x] 단위 선택 (Select)
+    - [x] LOSS(%) 입력 (숫자)
+    - [x] 가공비 입력 (숫자)
+  - [x] 원가 계산 섹션 (자동 계산 표시)
+    - [x] 입고가 표시
+    - [x] 가공비 표시
+    - [x] 소계 표시
+    - [x] LOSS 적용 금액 표시
+    - [x] LOSS 적용 원가 표시 (최종)
+  - [x] 반올림 설정
+    - [x] 반올림 규칙 선택 (반올림/올림/내림)
+    - [x] 반올림 단위 선택 (1/10/100/1000/10000원)
+  - [x] 마진율/판매단가 입력
+    - [x] 마진율(%) 입력 → 판매단가 자동 계산
+    - [x] 판매단가 입력 → 마진율 자동 계산 (필수)
+  - [x] 마진 계산 섹션 (자동 계산 표시)
+    - [x] LOSS 적용 원가 표시
+    - [x] 판매단가 표시
+    - [x] 마진 금액 및 % 표시
+  - [x] 비고 입력 (Textarea)
+  - [x] 수정 모드 상태 표시
+    - [x] 최종 확정 배지
+    - [x] 수정 차수 배지
+    - [x] 활성 상태 배지
+  - [x] 버튼 영역
+    - [x] 취소 버튼
+    - [x] 이력 조회 버튼 (수정 모드, 이력 있을 때)
+    - [x] 최종 확정 버튼 (수정 모드, 미확정일 때)
+    - [x] 저장 버튼
+
+### Phase 4: 다이얼로그 컴포넌트 ✅
+- [x] 4.1 `src/components/pricing/PricingHistoryDialog.tsx` 생성
+  - [x] 현재 버전 표시 (파란 배경)
+  - [x] 이전 버전 목록 (리비전 번호, 날짜, 수정자, 수정 사유)
+  - [x] 각 버전별 단가 정보 표시 (매입단가, 가공비, 판매단가, 마진율)
+  - [x] 최초 버전 표시 (회색 배경)
+- [x] 4.2 `src/components/pricing/PricingRevisionDialog.tsx` 생성
+  - [x] 수정 사유 입력 (필수, Textarea)
+  - [x] 취소/수정 이력 저장 버튼
+- [x] 4.3 `src/components/pricing/PricingFinalizeDialog.tsx` 생성
+  - [x] 확정 대상 정보 요약 (품목명, 매입단가, 판매단가, 마진율)
+  - [x] 경고 메시지 (확정 후 수정 불가)
+  - [x] 취소/최종 확정 버튼
+
+### Phase 5: 페이지 라우트 구성 ✅
+- [x] 5.1 `src/app/[locale]/(protected)/sales/pricing-management/create/page.tsx` 생성
+  - [x] 품목 정보 쿼리 파라미터로 전달받기
+  - [x] PricingFormClient 연동 (신규 모드)
+- [x] 5.2 `src/app/[locale]/(protected)/sales/pricing-management/[id]/edit/page.tsx` 생성
+  - [x] 기존 단가 데이터 조회
+  - [x] PricingFormClient 연동 (수정 모드)
+
+### Phase 6: 네비게이션 연동 ✅
+- [x] 6.1 사이드바 메뉴 추가
+  - [x] 판매관리 > 단가관리 메뉴 항목 추가
+  - [x] 아이콘: DollarSign
+  - [x] 경로: `/sales/pricing-management`
+
+### Phase 7: 테스트 및 검증 ⏳
+- [ ] 7.1 기능 테스트
+  - [ ] 목록 페이지 로딩
+  - [ ] 검색 기능
+  - [ ] 탭 필터 기능
+  - [ ] 페이지네이션
+  - [ ] 신규 등록 플로우
+  - [ ] 수정 플로우
+  - [ ] 이력 조회
+  - [ ] 최종 확정
+- [ ] 7.2 반응형 테스트
+  - [ ] 데스크톱 레이아웃
+  - [ ] 모바일 레이아웃
+- [ ] 7.3 스타일 검증
+  - [ ] sam-design 스크린샷과 비교
+
+---
+
+## 데이터 타입 참조
+
+```typescript
+// PricingData 인터페이스 (sam-design 기준)
+interface PricingData {
+  id: string;
+  itemId: string;
+  itemCode: string;
+  itemName: string;
+  itemType: string;
+  specification?: string;
+  unit: string;
+  effectiveDate: string;      // 적용일
+  receiveDate?: string;       // 입고일
+  author?: string;            // 작성자
+  purchasePrice?: number;     // 매입단가 (입고가)
+  processingCost?: number;    // 가공비
+  loss?: number;              // LOSS(%)
+  roundingRule?: 'round' | 'ceil' | 'floor';  // 반올림 규칙
+  roundingUnit?: number;      // 반올림 단위
+  marginRate?: number;        // 마진율(%)
+  salesPrice?: number;        // 판매단가
+  supplier?: string;          // 공급업체
+  note?: string;              // 비고
+
+  currentRevision: number;    // 현재 리비전
+  isFinal: boolean;           // 최종 확정 여부
+  revisions?: PricingRevision[];
+  finalizedDate?: string;
+  finalizedBy?: string;
+  status: 'draft' | 'active' | 'inactive' | 'finalized';
+
+  createdAt: string;
+  createdBy: string;
+  updatedAt?: string;
+  updatedBy?: string;
+}
+
+interface PricingRevision {
+  revisionNumber: number;
+  revisionDate: string;
+  revisionBy: string;
+  revisionReason?: string;
+  previousData: PricingData;
+}
+```
+
+---
+
+## 원가/마진 계산 로직
+
+```typescript
+// LOSS 적용 원가 계산
+const calculateCostWithLoss = () => {
+  const basePrice = (purchasePrice || 0) + (processingCost || 0);
+  const lossRate = (loss || 0) / 100;
+  return Math.round(basePrice * (1 + lossRate));
+};
+
+// 반올림 적용
+const applyRounding = (value: number, rule: 'round' | 'ceil' | 'floor', unit: number) => {
+  switch (rule) {
+    case 'ceil': return Math.ceil(value / unit) * unit;
+    case 'floor': return Math.floor(value / unit) * unit;
+    default: return Math.round(value / unit) * unit;
+  }
+};
+
+// 마진율 → 판매단가 계산
+const calculateSalesPrice = (marginRate: number) => {
+  const costWithLoss = calculateCostWithLoss();
+  const price = costWithLoss * (1 + marginRate / 100);
+  return Math.round(applyRounding(price, roundingRule, roundingUnit));
+};
+
+// 판매단가 → 마진율 계산
+const calculateMarginRate = (salesPrice: number) => {
+  const costWithLoss = calculateCostWithLoss();
+  if (costWithLoss > 0) {
+    return ((salesPrice - costWithLoss) / costWithLoss) * 100;
+  }
+  return 0;
+};
+```
+
+---
+
+## 참고 사항
+
+1. **공통 DataTable 사용**: `/components/common/DataTable/DataTable.tsx` 활용
+2. **탭 필터**: DataTable의 `tabFilter` prop 활용
+3. **검색**: DataTable의 `search` prop 활용
+4. **페이지네이션**: DataTable 기본 제공
+5. **API 프록시**: HttpOnly 쿠키 사용 시 `/api/proxy/` 경로 활용
+6. **라우팅**: Next.js App Router 패턴 준수
+
+---
+
+## 진행 상태
+
+- **시작일**: 2025-12-05
+- **현재 단계**: Phase 6 완료, API 연동 대기
+- **완료율**: 85% (UI/컴포넌트 마이그레이션 완료, API 연동 및 테스트 대기)
+
+---
+
+## 생성된 파일 목록
+
+| 파일 경로 | 설명 |
+|-----------|------|
+| `src/components/pricing/types.ts` | 타입 정의 |
+| `src/components/pricing/PricingListClient.tsx` | 목록 클라이언트 컴포넌트 |
+| `src/components/pricing/PricingFormClient.tsx` | 등록/수정 폼 컴포넌트 |
+| `src/components/pricing/PricingHistoryDialog.tsx` | 이력 조회 다이얼로그 |
+| `src/components/pricing/PricingRevisionDialog.tsx` | 수정 이력 생성 다이얼로그 |
+| `src/components/pricing/PricingFinalizeDialog.tsx` | 최종 확정 다이얼로그 |
+| `src/components/pricing/index.ts` | Barrel export |
+| `src/app/[locale]/(protected)/sales/pricing-management/page.tsx` | 목록 페이지 |
+| `src/app/[locale]/(protected)/sales/pricing-management/create/page.tsx` | 등록 페이지 |
+| `src/app/[locale]/(protected)/sales/pricing-management/[id]/edit/page.tsx` | 수정 페이지 |
+
+---
+
+## 변경 이력
+
+| 날짜 | 내용 | 작성자 |
+|------|------|--------|
+| 2025-12-05 | 최초 계획서 작성 | Claude |
+| 2025-12-05 | Phase 1-6 완료 (UI/컴포넌트 마이그레이션) | Claude |
--- a/src/app/[locale]/(protected)/hr/attendance-management/page.tsx
+++ b/src/app/[locale]/(protected)/hr/attendance-management/page.tsx
@@ -0,0 +1,38 @@
+/**
+ * 근태관리 페이지 (Attendance Management)
+ *
+ * 직원 출퇴근 및 근태 정보를 관리하는 시스템
+ * - 근태 목록 조회/검색/필터
+ * - 근태 등록/수정
+ * - 사유 등록 (출장, 휴가, 외근 등)
+ * - 엑셀 다운로드
+ */
+
+import { Suspense } from 'react';
+import { AttendanceManagement } from '@/components/hr/AttendanceManagement';
+import type { Metadata } from 'next';
+
+/**
+ * 메타데이터 설정
+ */
+export const metadata: Metadata = {
+  title: '근태관리',
+  description: '직원 출퇴근 및 근태 정보를 관리합니다',
+};
+
+export default function AttendanceManagementPage() {
+  return (
+    <div>
+      <Suspense fallback={
+        <div className="flex items-center justify-center min-h-[400px]">
+          <div className="text-center">
+            <div className="inline-block h-8 w-8 animate-spin rounded-full border-4 border-solid border-primary border-r-transparent mb-4"></div>
+            <p className="text-muted-foreground">로딩 중...</p>
+          </div>
+        </div>
+      }>
+        <AttendanceManagement />
+      </Suspense>
+    </div>
+  );
+}
--- a/src/app/[locale]/(protected)/hr/department-management/page.tsx
+++ b/src/app/[locale]/(protected)/hr/department-management/page.tsx
@@ -0,0 +1,35 @@
+/**
+ * 부서관리 페이지 (Department Management)
+ *
+ * 부서 정보를 관리하는 시스템
+ * 무제한 깊이 트리 구조 지원
+ */
+
+import { Suspense } from 'react';
+import { DepartmentManagement } from '@/components/hr/DepartmentManagement';
+import type { Metadata } from 'next';
+
+/**
+ * 메타데이터 설정
+ */
+export const metadata: Metadata = {
+  title: '부서관리',
+  description: '부서 정보를 관리합니다',
+};
+
+export default function DepartmentManagementPage() {
+  return (
+    <div>
+      <Suspense fallback={
+        <div className="flex items-center justify-center min-h-[400px]">
+          <div className="text-center">
+            <div className="inline-block h-8 w-8 animate-spin rounded-full border-4 border-solid border-primary border-r-transparent mb-4"></div>
+            <p className="text-muted-foreground">로딩 중...</p>
+          </div>
+        </div>
+      }>
+        <DepartmentManagement />
+      </Suspense>
+    </div>
+  );
+}
--- a/src/app/[locale]/(protected)/hr/employee-management/[id]/edit/page.tsx
+++ b/src/app/[locale]/(protected)/hr/employee-management/[id]/edit/page.tsx
@@ -0,0 +1,68 @@
+'use client';
+
+import { useRouter, useParams } from 'next/navigation';
+import { useState, useEffect } from 'react';
+import { EmployeeForm } from '@/components/hr/EmployeeManagement/EmployeeForm';
+import type { Employee, EmployeeFormData } from '@/components/hr/EmployeeManagement/types';
+
+// TODO: 실제 API에서 데이터 가져오기
+const mockEmployee: Employee = {
+  id: '1',
+  name: '김철수',
+  employeeCode: 'EMP001',
+  phone: '010-1234-5678',
+  email: 'kimcs@company.com',
+  status: 'active',
+  hireDate: '2020-03-15',
+  employmentType: 'regular',
+  rank: '과장',
+  gender: 'male',
+  salary: 50000000,
+  bankAccount: {
+    bankName: '국민은행',
+    accountNumber: '123-456-789012',
+    accountHolder: '김철수',
+  },
+  address: {
+    zipCode: '12345',
+    address1: '서울시 강남구 테헤란로 123',
+    address2: '101호',
+  },
+  departmentPositions: [
+    { id: '1', departmentId: 'd1', departmentName: '개발본부', positionId: 'p1', positionName: '팀장' }
+  ],
+  userInfo: { userId: 'kimcs', role: 'manager', accountStatus: 'active' },
+  createdAt: '2020-03-15T00:00:00Z',
+  updatedAt: '2024-01-15T00:00:00Z',
+};
+
+export default function EmployeeEditPage() {
+  const router = useRouter();
+  const params = useParams();
+  const [employee, setEmployee] = useState<Employee | null>(null);
+
+  useEffect(() => {
+    // TODO: API 연동
+    // const id = params.id;
+    setEmployee(mockEmployee);
+  }, [params.id]);
+
+  const handleSave = (data: EmployeeFormData) => {
+    // TODO: API 연동
+    console.log('Update employee:', params.id, data);
+    router.push(`/ko/hr/employee-management/${params.id}`);
+  };
+
+  if (!employee) {
+    return (
+      <div className="flex items-center justify-center min-h-[400px]">
+        <div className="text-center">
+          <div className="inline-block h-8 w-8 animate-spin rounded-full border-4 border-solid border-primary border-r-transparent mb-4"></div>
+          <p className="text-muted-foreground">로딩 중...</p>
+        </div>
+      </div>
+    );
+  }
+
+  return <EmployeeForm mode="edit" employee={employee} onSave={handleSave} />;
+}
--- a/src/app/[locale]/(protected)/hr/employee-management/[id]/page.tsx
+++ b/src/app/[locale]/(protected)/hr/employee-management/[id]/page.tsx
@@ -0,0 +1,119 @@
+'use client';
+
+import { useRouter, useParams } from 'next/navigation';
+import { useState, useEffect } from 'react';
+import { EmployeeDetail } from '@/components/hr/EmployeeManagement/EmployeeDetail';
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '@/components/ui/alert-dialog';
+import type { Employee } from '@/components/hr/EmployeeManagement/types';
+
+// TODO: 실제 API에서 데이터 가져오기
+const mockEmployee: Employee = {
+  id: '1',
+  name: '김철수',
+  employeeCode: 'EMP001',
+  phone: '010-1234-5678',
+  email: 'kimcs@company.com',
+  status: 'active',
+  hireDate: '2020-03-15',
+  employmentType: 'regular',
+  rank: '과장',
+  gender: 'male',
+  salary: 50000000,
+  bankAccount: {
+    bankName: '국민은행',
+    accountNumber: '123-456-789012',
+    accountHolder: '김철수',
+  },
+  address: {
+    zipCode: '12345',
+    address1: '서울시 강남구 테헤란로 123',
+    address2: '101호',
+  },
+  departmentPositions: [
+    { id: '1', departmentId: 'd1', departmentName: '개발본부', positionId: 'p1', positionName: '팀장' }
+  ],
+  userInfo: { userId: 'kimcs', role: 'manager', accountStatus: 'active' },
+  createdAt: '2020-03-15T00:00:00Z',
+  updatedAt: '2024-01-15T00:00:00Z',
+};
+
+export default function EmployeeDetailPage() {
+  const router = useRouter();
+  const params = useParams();
+  const [employee, setEmployee] = useState<Employee | null>(null);
+  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
+
+  useEffect(() => {
+    // TODO: API 연동
+    // const id = params.id;
+    setEmployee(mockEmployee);
+  }, [params.id]);
+
+  const handleEdit = () => {
+    router.push(`/ko/hr/employee-management/${params.id}/edit`);
+  };
+
+  const handleDelete = () => {
+    setDeleteDialogOpen(true);
+  };
+
+  const confirmDelete = () => {
+    // TODO: API 연동
+    console.log('Delete employee:', params.id);
+    router.push('/ko/hr/employee-management');
+  };
+
+  if (!employee) {
+    return (
+      <div className="flex items-center justify-center min-h-[400px]">
+        <div className="text-center">
+          <div className="inline-block h-8 w-8 animate-spin rounded-full border-4 border-solid border-primary border-r-transparent mb-4"></div>
+          <p className="text-muted-foreground">로딩 중...</p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <>
+      <EmployeeDetail
+        employee={employee}
+        onEdit={handleEdit}
+        onDelete={handleDelete}
+      />
+
+      <AlertDialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>사원 삭제</AlertDialogTitle>
+            <AlertDialogDescription>
+              &quot;{employee.name}&quot; 사원을 삭제하시겠습니까?
+              <br />
+              <span className="text-destructive">
+                삭제된 사원 정보는 복구할 수 없습니다.
+              </span>
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>취소</AlertDialogCancel>
+            <AlertDialogAction
+              onClick={confirmDelete}
+              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+            >
+              삭제
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </>
+  );
+}
--- a/src/app/[locale]/(protected)/hr/employee-management/csv-upload/page.tsx
+++ b/src/app/[locale]/(protected)/hr/employee-management/csv-upload/page.tsx
@@ -0,0 +1,13 @@
+'use client';
+
+import { CSVUploadPage } from '@/components/hr/EmployeeManagement/CSVUploadPage';
+import type { Employee } from '@/components/hr/EmployeeManagement/types';
+
+export default function EmployeeCSVUploadPage() {
+  const handleUpload = (employees: Employee[]) => {
+    // TODO: API 연동
+    console.log('Upload employees:', employees);
+  };
+
+  return <CSVUploadPage onUpload={handleUpload} />;
+}
--- a/src/app/[locale]/(protected)/hr/employee-management/new/page.tsx
+++ b/src/app/[locale]/(protected)/hr/employee-management/new/page.tsx
@@ -0,0 +1,17 @@
+'use client';
+
+import { useRouter } from 'next/navigation';
+import { EmployeeForm } from '@/components/hr/EmployeeManagement/EmployeeForm';
+import type { EmployeeFormData } from '@/components/hr/EmployeeManagement/types';
+
+export default function EmployeeNewPage() {
+  const router = useRouter();
+
+  const handleSave = (data: EmployeeFormData) => {
+    // TODO: API 연동
+    console.log('Save new employee:', data);
+    router.push('/ko/hr/employee-management');
+  };
+
+  return <EmployeeForm mode="create" onSave={handleSave} />;
+}
--- a/src/app/[locale]/(protected)/hr/employee-management/page.tsx
+++ b/src/app/[locale]/(protected)/hr/employee-management/page.tsx
@@ -0,0 +1,38 @@
+/**
+ * 사원관리 페이지 (Employee Management)
+ *
+ * 사원 정보를 관리하는 시스템
+ * - 사원 목록 조회/검색/필터
+ * - 사원 등록/수정/삭제
+ * - CSV 일괄 등록
+ * - 사용자 초대
+ */
+
+import { Suspense } from 'react';
+import { EmployeeManagement } from '@/components/hr/EmployeeManagement';
+import type { Metadata } from 'next';
+
+/**
+ * 메타데이터 설정
+ */
+export const metadata: Metadata = {
+  title: '사원관리',
+  description: '사원 정보를 관리합니다',
+};
+
+export default function EmployeeManagementPage() {
+  return (
+    <div>
+      <Suspense fallback={
+        <div className="flex items-center justify-center min-h-[400px]">
+          <div className="text-center">
+            <div className="inline-block h-8 w-8 animate-spin rounded-full border-4 border-solid border-primary border-r-transparent mb-4"></div>
+            <p className="text-muted-foreground">로딩 중...</p>
+          </div>
+        </div>
+      }>
+        <EmployeeManagement />
+      </Suspense>
+    </div>
+  );
+}
--- a/src/app/[locale]/(protected)/items/[id]/edit/page.tsx
+++ b/src/app/[locale]/(protected)/items/[id]/edit/page.tsx
@@ -14,9 +14,12 @@ import DynamicItemForm from '@/components/items/DynamicItemForm';
 import type { DynamicFormData } from '@/components/items/DynamicItemForm/types';
 import type { ItemType } from '@/types/item';
 import { Loader2 } from 'lucide-react';
-
-// Materials 타입 (SM, RM, CS는 Material 테이블 사용)
-const MATERIAL_TYPES = ['SM', 'RM', 'CS'];
+import {
+  MATERIAL_TYPES,
+  isMaterialType,
+  transformMaterialDataForSave,
+  convertOptionsToStandardFields,
+} from '@/lib/utils/materialTransform';

 /**
 * API 응답 타입 (백엔드 Product 모델 기준)
@@ -38,6 +41,9 @@ interface ItemApiResponse {
  is_active?: boolean;
  description?: string;
  note?: string;
+  remarks?: string;  // Material 모델은 remarks 사용
+  material_code?: string;  // Material 모델 코드 필드
+  material_type?: string;  // Material 모델 타입 필드
  part_type?: string;
  part_usage?: string;
  material?: string;
@@ -69,12 +75,15 @@ function mapApiResponseToFormData(data: ItemApiResponse): DynamicFormData {
  // 프론트엔드 폼 필드: item_name, item_code 등 (snake_case)

  // 기본 필드 (백엔드 name → 폼 item_name)
-  const itemName = data.name || data.item_name;
+  // Material의 경우 item_name 필드 사용, Product는 name 필드 사용
+  const itemName = data.item_name || data.name;
  if (itemName) formData['item_name'] = itemName;
  if (data.unit) formData['unit'] = data.unit;
  if (data.specification) formData['specification'] = data.specification;
  if (data.description) formData['description'] = data.description;
+  // Material은 'remarks', Product는 'note' 사용 → 프론트엔드 폼은 'note' 기대
  if (data.note) formData['note'] = data.note;
+  if (data.remarks) formData['note'] = data.remarks;  // Material remarks → note 매핑
  formData['is_active'] = data.is_active ?? true;

  // 부품 관련 필드 (PT)
@@ -100,12 +109,32 @@ function mapApiResponseToFormData(data: ItemApiResponse): DynamicFormData {
  if (data.certification_start_date) formData['certification_start_date'] = data.certification_start_date;
  if (data.certification_end_date) formData['certification_end_date'] = data.certification_end_date;

+  // 파일 관련 필드 (edit 모드에서 기존 파일 표시용)
+  if (data.bending_diagram) formData['bending_diagram'] = data.bending_diagram;
+  if (data.specification_file) formData['specification_file'] = data.specification_file;
+  if (data.specification_file_name) formData['specification_file_name'] = data.specification_file_name;
+  if (data.certification_file) formData['certification_file'] = data.certification_file;
+  if (data.certification_file_name) formData['certification_file_name'] = data.certification_file_name;
+
+  // Material(SM, RM, CS) options 필드 매핑
+  // 백엔드에서 options: [{label: "standard_1", value: "옵션값"}, ...] 형태로 저장됨
+  // 프론트엔드 폼에서는 standard_1: "옵션값" 형태로 사용
+  // 2025-12-05: Edit 모드에서 Select 옵션 값 불러오기 위해 추가
+  if (data.options && Array.isArray(data.options)) {
+    (data.options as Array<{ label: string; value: string }>).forEach((opt) => {
+      if (opt.label && opt.value) {
+        formData[opt.label] = opt.value;
+      }
+    });
+  }
+
  // 기타 동적 필드들 (API에서 받은 모든 필드를 포함)
  Object.entries(data).forEach(([key, value]) => {
    // 이미 처리한 특수 필드들 제외 (백엔드 필드명 + 기존 필드명)
    const excludeKeys = [
      'id', 'code', 'name', 'product_type',  // 백엔드 Product 모델 필드
      'item_code', 'item_name', 'item_type', // 기존 호환 필드
+      'material_code', 'material_type', 'remarks',  // Material 모델 필드 (remarks → note 변환됨)
      'created_at', 'updated_at', 'deleted_at', 'bom',
      'tenant_id', 'category_id', 'category', 'component_lines',
    ];
@@ -177,6 +206,12 @@ export default function EditItemPage() {

        if (result.success && result.data) {
          const apiData = result.data as ItemApiResponse;
+          // console.log('========== [EditItem] API 원본 데이터 ==========');
+          // console.log('is_active:', apiData.is_active);
+          // console.log('specification:', apiData.specification);
+          // console.log('unit:', apiData.unit);
+          // console.log('전체 데이터:', JSON.stringify(apiData, null, 2));
+          // console.log('================================================');

          // ID, 품목 유형 저장
          // Product: product_type, Material: material_type 또는 type_code
@@ -187,7 +222,12 @@ export default function EditItemPage() {

          // 폼 데이터로 변환
          const formData = mapApiResponseToFormData(apiData);
-          // console.log('[EditItem] Mapped form data:', formData);
+          // console.log('========== [EditItem] Mapped form data ==========');
+          // console.log('is_active:', formData['is_active']);
+          // console.log('specification:', formData['specification']);
+          // console.log('unit:', formData['unit']);
+          // console.log('전체 매핑 데이터:', JSON.stringify(formData, null, 2));
+          // console.log('=================================================');
          setInitialData(formData);
        } else {
          setError(result.message || '품목 정보를 불러올 수 없습니다.');
@@ -222,6 +262,12 @@ export default function EditItemPage() {
    // Materials (SM, RM, CS)는 /products/materials 엔드포인트 + PATCH 메서드 사용
    // Products (FG, PT)는 /items 엔드포인트 + PUT 메서드 사용
    const isMaterial = itemType ? MATERIAL_TYPES.includes(itemType) : false;
+
+    // 디버깅: material_code 생성 관련 변수 확인 (필요 시 주석 해제)
+    // console.log('========== [EditItem] handleSubmit 디버깅 ==========');
+    // console.log('itemType:', itemType, 'isMaterial:', isMaterial);
+    // console.log('data:', JSON.stringify(data, null, 2));
+    // console.log('====================================================');
    const updateUrl = isMaterial
      ? `/api/proxy/products/materials/${itemId}`
      : `/api/proxy/items/${itemId}`;
@@ -229,18 +275,25 @@ export default function EditItemPage() {

    // console.log('[EditItem] Update URL:', updateUrl, '(method:', method, ', isMaterial:', isMaterial, ')');

-    // 수정 시 code/material_code는 변경하지 않음 (UNIQUE 제약조건 위반 방지)
-    // DynamicItemForm에서 자동생성되는 code를 제외해야 함
+    // 품목코드 자동생성 처리
+    // - FG(제품): 품목코드 = 품목명
+    // - PT(부품): DynamicItemForm에서 자동계산한 code 사용 (조립/절곡/구매 각각 다른 규칙)
+    // - Material(SM, RM, CS): material_code = 품목명-규격
    let submitData = { ...data };

-    // FG(제품)의 경우: 품목코드 = 품목명이므로, name 변경 시 code도 함께 변경
-    // 다른 타입: code 제외 (UNIQUE 제약조건)
    if (itemType === 'FG') {
      // FG는 품목명이 품목코드가 되므로 name 값으로 code 설정
      submitData.code = submitData.name;
-    } else {
-      delete submitData.code;
+    } else if (itemType === 'PT') {
+      // PT는 DynamicItemForm에서 자동계산한 code를 그대로 사용
+      // (조립: GR-001, 절곡: RM30, 구매: 전동개폐기150KG380V)
+      // code가 없으면 기본값으로 name 사용
+      if (!submitData.code) {
+        submitData.code = submitData.name;
+      }
    }
+    // Material(SM, RM, CS)은 아래 isMaterial 블록에서 submitData.code를 material_code로 변환
+    // 2025-12-05: delete submitData.code 제거 - DynamicItemForm에서 조합된 code 값을 사용해야 함

    // 공통: spec → specification 필드명 변환 (백엔드 API 규격)
    if (submitData.spec !== undefined) {
@@ -249,29 +302,21 @@ export default function EditItemPage() {
    }

    if (isMaterial) {
-      // Materials의 경우 추가 필드명 변환
-      // DynamicItemForm에서 오는 데이터: name, product_type 등
-      // Material API가 기대하는 데이터: name, material_type 등
-      submitData = {
-        ...submitData,
-        // Material API 필드명 매핑
-        material_type: submitData.product_type || itemType,
-        // 불필요한 필드 제거
-        product_type: undefined,
-        material_code: undefined,  // 수정 시 코드 변경 불가
-      };
-      // console.log('[EditItem] Material submitData:', submitData);
+      // Material(SM, RM, CS) 데이터 변환: standard_* → options 배열, specification 생성
+      // 2025-12-05: 공통 유틸 함수 사용
+      submitData = transformMaterialDataForSave(submitData, itemType || 'RM');
+      // console.log('[EditItem] Material 변환 데이터:', submitData);
    } else {
      // Products (FG, PT)의 경우
      // console.log('[EditItem] Product submitData:', submitData);
    }

    // API 호출
-    console.log('========== [EditItem] PUT 요청 데이터 ==========');
-    console.log('URL:', updateUrl);
-    console.log('Method:', method);
-    console.log('전송 데이터:', JSON.stringify(submitData, null, 2));
-    console.log('================================================');
+    // console.log('========== [EditItem] PUT 요청 데이터 ==========');
+    // console.log('URL:', updateUrl);
+    // console.log('Method:', method);
+    // console.log('전송 데이터:', JSON.stringify(submitData, null, 2));
+    // console.log('================================================');

    const response = await fetch(updateUrl, {
      method,
@@ -282,16 +327,16 @@ export default function EditItemPage() {
    });

    const result = await response.json();
-    console.log('========== [EditItem] PUT 응답 ==========');
-    console.log('Response:', JSON.stringify(result, null, 2));
-    console.log('==========================================');
+    // console.log('========== [EditItem] PUT 응답 ==========');
+    // console.log('Response:', JSON.stringify(result, null, 2));
+    // console.log('==========================================');

    if (!response.ok || !result.success) {
      throw new Error(result.message || '품목 수정에 실패했습니다.');
    }

-    // 성공 메시지만 표시 (리다이렉트는 DynamicItemForm에서 처리)
-    // alert 제거 - DynamicItemForm에서 router.push('/items')로 이동
+    // 성공 시 품목 ID 반환 (파일 업로드용)
+    return { id: itemId, ...result.data };
  };

  // 로딩 상태
@@ -339,6 +384,7 @@ export default function EditItemPage() {
      <DynamicItemForm
        mode="edit"
        itemType={itemType}
+        itemId={itemId ?? undefined}
        initialData={initialData}
        onSubmit={handleSubmit}
      />
--- a/src/app/[locale]/(protected)/items/[id]/page.tsx
+++ b/src/app/[locale]/(protected)/items/[id]/page.tsx
@@ -73,6 +73,17 @@ function mapApiResponseToItemMaster(data: Record<string, unknown>): ItemMaster {
      quantityFormula: bomItem.quantity_formula ? String(bomItem.quantity_formula) : undefined,
      isBending: Boolean(bomItem.is_bending ?? false),
    })) : undefined,
+    // 파일 관련 필드 (PT - 절곡/조립 부품)
+    bendingDiagram: data.bending_diagram ? String(data.bending_diagram) : undefined,
+    bendingDetails: Array.isArray(data.bending_details) ? data.bending_details : undefined,
+    // 파일 관련 필드 (FG - 제품)
+    specificationFile: data.specification_file ? String(data.specification_file) : undefined,
+    specificationFileName: data.specification_file_name ? String(data.specification_file_name) : undefined,
+    certificationFile: data.certification_file ? String(data.certification_file) : undefined,
+    certificationFileName: data.certification_file_name ? String(data.certification_file_name) : undefined,
+    certificationNumber: data.certification_number ? String(data.certification_number) : undefined,
+    certificationStartDate: data.certification_start_date ? String(data.certification_start_date) : undefined,
+    certificationEndDate: data.certification_end_date ? String(data.certification_end_date) : undefined,
  };
 }

--- a/src/app/[locale]/(protected)/items/create/page.tsx
+++ b/src/app/[locale]/(protected)/items/create/page.tsx
@@ -9,6 +9,7 @@
 import { useState } from 'react';
 import DynamicItemForm from '@/components/items/DynamicItemForm';
 import type { DynamicFormData } from '@/components/items/DynamicItemForm/types';
+import { isMaterialType, transformMaterialDataForSave } from '@/lib/utils/materialTransform';

 // 기존 ItemForm (주석처리 - 롤백 시 사용)
 // import ItemForm from '@/components/items/ItemForm';
@@ -21,13 +22,24 @@ export default function CreateItemPage() {
    setSubmitError(null);

    try {
+      // 필드명 변환: spec → specification (백엔드 API 규격)
+      const submitData = { ...data };
+      if (submitData.spec !== undefined) {
+        submitData.specification = submitData.spec;
+        delete submitData.spec;
+      }
+
+      // Material(SM, RM, CS)인 경우 수정 페이지와 동일하게 transformMaterialDataForSave 사용
+      const itemType = submitData.product_type as string;
+
      // API 호출: POST /api/proxy/items
+      // 백엔드에서 product_type에 따라 Product/Material 분기 처리
      const response = await fetch('/api/proxy/items', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
-        body: JSON.stringify(data),
+        body: JSON.stringify(submitData),
      });

      const result = await response.json();
@@ -37,7 +49,10 @@ export default function CreateItemPage() {
      }

      // 성공 시 DynamicItemForm 내부에서 /items로 리다이렉트 처리됨
-      console.log('[CreateItemPage] 품목 등록 성공:', result.data);
+      // console.log('[CreateItemPage] 품목 등록 성공:', result.data);
+
+      // 생성된 품목 ID를 포함한 데이터 반환 (파일 업로드용)
+      return { id: result.data.id, ...result.data };
    } catch (error) {
      console.error('[CreateItemPage] 품목 등록 실패:', error);
      setSubmitError(error instanceof Error ? error.message : '품목 등록에 실패했습니다.');
--- a/src/app/[locale]/(protected)/sales/pricing-management/[id]/edit/page.tsx
+++ b/src/app/[locale]/(protected)/sales/pricing-management/[id]/edit/page.tsx
@@ -0,0 +1,233 @@
+/**
+ * 단가 수정 페이지
+ *
+ * 경로: /sales/pricing-management/[id]/edit
+ */
+
+import { PricingFormClient } from '@/components/pricing';
+import type { PricingData } from '@/components/pricing';
+
+interface EditPricingPageProps {
+  params: Promise<{
+    id: string;
+  }>;
+}
+
+// TODO: API 연동 시 실제 단가 조회로 교체
+async function getPricingById(id: string): Promise<PricingData | null> {
+  // 임시 목(Mock) 데이터
+  const mockPricings: Record<string, PricingData> = {
+    'pricing-4': {
+      id: 'pricing-4',
+      itemId: 'item-4',
+      itemCode: 'GR-001',
+      itemName: '가이드레일 130×80',
+      itemType: 'PT',
+      specification: '130×80×2438',
+      unit: 'EA',
+      effectiveDate: '2025-11-24',
+      purchasePrice: 45000,
+      processingCost: 5000,
+      loss: 0,
+      roundingRule: 'round',
+      roundingUnit: 1,
+      marginRate: 20,
+      salesPrice: 60000,
+      supplier: '가이드레일 공급사',
+      note: '스크린용 가이드레일',
+      currentRevision: 1,
+      isFinal: false,
+      revisions: [
+        {
+          revisionNumber: 1,
+          revisionDate: '2025-11-20T10:00:00Z',
+          revisionBy: '관리자',
+          revisionReason: '초기 가격 조정',
+          previousData: {
+            id: 'pricing-4',
+            itemId: 'item-4',
+            itemCode: 'GR-001',
+            itemName: '가이드레일 130×80',
+            itemType: 'PT',
+            specification: '130×80×2438',
+            unit: 'EA',
+            effectiveDate: '2025-11-15',
+            purchasePrice: 40000,
+            processingCost: 5000,
+            marginRate: 15,
+            salesPrice: 51750,
+            currentRevision: 0,
+            isFinal: false,
+            status: 'draft',
+            createdAt: '2025-11-15T09:00:00Z',
+            createdBy: '관리자',
+          },
+        },
+      ],
+      status: 'active',
+      createdAt: '2025-11-15T09:00:00Z',
+      createdBy: '관리자',
+      updatedAt: '2025-11-24T14:30:00Z',
+      updatedBy: '관리자',
+    },
+    'pricing-5': {
+      id: 'pricing-5',
+      itemId: 'item-5',
+      itemCode: 'CASE-001',
+      itemName: '케이스 철재',
+      itemType: 'PT',
+      specification: '표준형',
+      unit: 'EA',
+      effectiveDate: '2025-11-20',
+      purchasePrice: 35000,
+      processingCost: 10000,
+      loss: 0,
+      roundingRule: 'round',
+      roundingUnit: 10,
+      marginRate: 25,
+      salesPrice: 56250,
+      currentRevision: 0,
+      isFinal: false,
+      revisions: [],
+      status: 'active',
+      createdAt: '2025-11-20T10:00:00Z',
+      createdBy: '관리자',
+    },
+    'pricing-6': {
+      id: 'pricing-6',
+      itemId: 'item-6',
+      itemCode: 'MOTOR-001',
+      itemName: '모터 0.4KW',
+      itemType: 'PT',
+      specification: '0.4KW',
+      unit: 'EA',
+      effectiveDate: '2025-11-15',
+      purchasePrice: 120000,
+      processingCost: 10000,
+      loss: 0,
+      roundingRule: 'round',
+      roundingUnit: 100,
+      marginRate: 15,
+      salesPrice: 149500,
+      currentRevision: 2,
+      isFinal: false,
+      revisions: [
+        {
+          revisionNumber: 2,
+          revisionDate: '2025-11-12T10:00:00Z',
+          revisionBy: '관리자',
+          revisionReason: '공급가 변동',
+          previousData: {
+            id: 'pricing-6',
+            itemId: 'item-6',
+            itemCode: 'MOTOR-001',
+            itemName: '모터 0.4KW',
+            itemType: 'PT',
+            specification: '0.4KW',
+            unit: 'EA',
+            effectiveDate: '2025-11-10',
+            purchasePrice: 115000,
+            processingCost: 10000,
+            marginRate: 15,
+            salesPrice: 143750,
+            currentRevision: 1,
+            isFinal: false,
+            status: 'active',
+            createdAt: '2025-11-05T09:00:00Z',
+            createdBy: '관리자',
+          },
+        },
+        {
+          revisionNumber: 1,
+          revisionDate: '2025-11-10T10:00:00Z',
+          revisionBy: '관리자',
+          revisionReason: '초기 등록',
+          previousData: {
+            id: 'pricing-6',
+            itemId: 'item-6',
+            itemCode: 'MOTOR-001',
+            itemName: '모터 0.4KW',
+            itemType: 'PT',
+            specification: '0.4KW',
+            unit: 'EA',
+            effectiveDate: '2025-11-05',
+            purchasePrice: 110000,
+            processingCost: 10000,
+            marginRate: 15,
+            salesPrice: 138000,
+            currentRevision: 0,
+            isFinal: false,
+            status: 'draft',
+            createdAt: '2025-11-05T09:00:00Z',
+            createdBy: '관리자',
+          },
+        },
+      ],
+      status: 'active',
+      createdAt: '2025-11-05T09:00:00Z',
+      createdBy: '관리자',
+      updatedAt: '2025-11-15T11:00:00Z',
+      updatedBy: '관리자',
+    },
+    'pricing-7': {
+      id: 'pricing-7',
+      itemId: 'item-7',
+      itemCode: 'CTL-001',
+      itemName: '제어기 기본형',
+      itemType: 'PT',
+      specification: '기본형',
+      unit: 'EA',
+      effectiveDate: '2025-11-10',
+      purchasePrice: 80000,
+      processingCost: 5000,
+      loss: 0,
+      roundingRule: 'round',
+      roundingUnit: 1000,
+      marginRate: 20,
+      salesPrice: 102000,
+      currentRevision: 3,
+      isFinal: true,
+      finalizedDate: '2025-11-25T10:00:00Z',
+      finalizedBy: '관리자',
+      revisions: [],
+      status: 'finalized',
+      createdAt: '2025-11-01T09:00:00Z',
+      createdBy: '관리자',
+      updatedAt: '2025-11-25T10:00:00Z',
+      updatedBy: '관리자',
+    },
+  };
+
+  return mockPricings[id] || null;
+}
+
+export default async function EditPricingPage({ params }: EditPricingPageProps) {
+  const { id } = await params;
+
+  const pricingData = await getPricingById(id);
+
+  if (!pricingData) {
+    return (
+      <div className="container mx-auto py-6 px-4">
+        <div className="text-center py-12">
+          <h2 className="text-xl font-semibold mb-2">단가 정보를 찾을 수 없습니다</h2>
+          <p className="text-muted-foreground">
+            올바른 단가 정보로 다시 시도해주세요.
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <PricingFormClient
+      mode="edit"
+      initialData={pricingData}
+      onSave={async (data, isRevision, revisionReason) => {
+        'use server';
+        // TODO: API 연동 시 실제 수정 로직으로 교체
+        console.log('단가 수정:', data, isRevision, revisionReason);
+      }}
+    />
+  );
+}
--- a/src/app/[locale]/(protected)/sales/pricing-management/create/page.tsx
+++ b/src/app/[locale]/(protected)/sales/pricing-management/create/page.tsx
@@ -0,0 +1,81 @@
+/**
+ * 단가 등록 페이지
+ *
+ * 경로: /sales/pricing-management/create?itemId=xxx&itemCode=xxx
+ */
+
+import { PricingFormClient } from '@/components/pricing';
+import type { ItemInfo } from '@/components/pricing';
+
+interface CreatePricingPageProps {
+  searchParams: Promise<{
+    itemId?: string;
+    itemCode?: string;
+  }>;
+}
+
+// TODO: API 연동 시 실제 품목 조회로 교체
+async function getItemInfo(itemId: string, itemCode: string): Promise<ItemInfo | null> {
+  // 임시 목(Mock) 데이터
+  const mockItems: Record<string, ItemInfo> = {
+    'item-1': {
+      id: 'item-1',
+      itemCode: 'SCREEN-001',
+      itemName: '스크린 셔터 기본형',
+      itemType: 'FG',
+      specification: '표준형',
+      unit: 'SET',
+    },
+    'item-2': {
+      id: 'item-2',
+      itemCode: 'SCREEN-002',
+      itemName: '스크린 셔터 오픈형',
+      itemType: 'FG',
+      specification: '오픈형',
+      unit: 'SET',
+    },
+    'item-3': {
+      id: 'item-3',
+      itemCode: 'STEEL-001',
+      itemName: '철재 셔터 기본형',
+      itemType: 'FG',
+      specification: '표준형',
+      unit: 'SET',
+    },
+  };
+
+  return mockItems[itemId] || null;
+}
+
+export default async function CreatePricingPage({ searchParams }: CreatePricingPageProps) {
+  const params = await searchParams;
+  const itemId = params.itemId || '';
+  const itemCode = params.itemCode || '';
+
+  const itemInfo = await getItemInfo(itemId, itemCode);
+
+  if (!itemInfo) {
+    return (
+      <div className="container mx-auto py-6 px-4">
+        <div className="text-center py-12">
+          <h2 className="text-xl font-semibold mb-2">품목 정보를 찾을 수 없습니다</h2>
+          <p className="text-muted-foreground">
+            올바른 품목 정보로 다시 시도해주세요.
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <PricingFormClient
+      mode="create"
+      itemInfo={itemInfo}
+      onSave={async (data) => {
+        'use server';
+        // TODO: API 연동 시 실제 저장 로직으로 교체
+        console.log('단가 등록:', data);
+      }}
+    />
+  );
+}
--- a/src/app/[locale]/(protected)/sales/pricing-management/page.tsx
+++ b/src/app/[locale]/(protected)/sales/pricing-management/page.tsx
@@ -0,0 +1,178 @@
+/**
+ * 단가 목록 페이지
+ *
+ * 경로: /sales/pricing-management
+ */
+
+import { PricingListClient } from '@/components/pricing';
+import type { PricingListItem } from '@/components/pricing';
+
+// TODO: API 연동 시 실제 데이터 fetching으로 교체
+async function getPricingList(): Promise<PricingListItem[]> {
+  // 임시 목(Mock) 데이터
+  return [
+    {
+      id: 'pricing-1',
+      itemId: 'item-1',
+      itemCode: 'SCREEN-001',
+      itemName: '스크린 셔터 기본형',
+      itemType: 'FG',
+      specification: '표준형',
+      unit: 'SET',
+      purchasePrice: undefined,
+      processingCost: undefined,
+      salesPrice: undefined,
+      marginRate: undefined,
+      effectiveDate: undefined,
+      status: 'not_registered',
+      currentRevision: 0,
+      isFinal: false,
+    },
+    {
+      id: 'pricing-2',
+      itemId: 'item-2',
+      itemCode: 'SCREEN-002',
+      itemName: '스크린 셔터 오픈형',
+      itemType: 'FG',
+      specification: '오픈형',
+      unit: 'SET',
+      purchasePrice: undefined,
+      processingCost: undefined,
+      salesPrice: undefined,
+      marginRate: undefined,
+      effectiveDate: undefined,
+      status: 'not_registered',
+      currentRevision: 0,
+      isFinal: false,
+    },
+    {
+      id: 'pricing-3',
+      itemId: 'item-3',
+      itemCode: 'STEEL-001',
+      itemName: '철재 셔터 기본형',
+      itemType: 'FG',
+      specification: '표준형',
+      unit: 'SET',
+      purchasePrice: undefined,
+      processingCost: undefined,
+      salesPrice: undefined,
+      marginRate: undefined,
+      effectiveDate: undefined,
+      status: 'not_registered',
+      currentRevision: 0,
+      isFinal: false,
+    },
+    {
+      id: 'pricing-4',
+      itemId: 'item-4',
+      itemCode: 'GR-001',
+      itemName: '가이드레일 130×80',
+      itemType: 'PT',
+      specification: '130×80×2438',
+      unit: 'EA',
+      purchasePrice: 45000,
+      processingCost: 5000,
+      salesPrice: 60000,
+      marginRate: 20,
+      effectiveDate: '2025-11-24',
+      status: 'active',
+      currentRevision: 1,
+      isFinal: false,
+    },
+    {
+      id: 'pricing-5',
+      itemId: 'item-5',
+      itemCode: 'CASE-001',
+      itemName: '케이스 철재',
+      itemType: 'PT',
+      specification: '표준형',
+      unit: 'EA',
+      purchasePrice: 35000,
+      processingCost: 10000,
+      salesPrice: 56250,
+      marginRate: 25,
+      effectiveDate: '2025-11-20',
+      status: 'active',
+      currentRevision: 0,
+      isFinal: false,
+    },
+    {
+      id: 'pricing-6',
+      itemId: 'item-6',
+      itemCode: 'MOTOR-001',
+      itemName: '모터 0.4KW',
+      itemType: 'PT',
+      specification: '0.4KW',
+      unit: 'EA',
+      purchasePrice: 120000,
+      processingCost: 10000,
+      salesPrice: 149500,
+      marginRate: 15,
+      effectiveDate: '2025-11-15',
+      status: 'active',
+      currentRevision: 2,
+      isFinal: false,
+    },
+    {
+      id: 'pricing-7',
+      itemId: 'item-7',
+      itemCode: 'CTL-001',
+      itemName: '제어기 기본형',
+      itemType: 'PT',
+      specification: '기본형',
+      unit: 'EA',
+      purchasePrice: 80000,
+      processingCost: 5000,
+      salesPrice: 102000,
+      marginRate: 20,
+      effectiveDate: '2025-11-10',
+      status: 'finalized',
+      currentRevision: 3,
+      isFinal: true,
+    },
+    {
+      id: 'pricing-8',
+      itemId: 'item-8',
+      itemCode: '가이드레일wall12*30*12',
+      itemName: '가이드레일',
+      itemType: 'PT',
+      specification: '가이드레일',
+      unit: 'M',
+      purchasePrice: undefined,
+      processingCost: undefined,
+      salesPrice: undefined,
+      marginRate: undefined,
+      effectiveDate: undefined,
+      status: 'not_registered',
+      currentRevision: 0,
+      isFinal: false,
+    },
+    {
+      id: 'pricing-9',
+      itemId: 'item-9',
+      itemCode: '소모품 테스트-소모품 규격 테스트',
+      itemName: '소모품 테스트',
+      itemType: 'CS',
+      specification: '소모품 규격 테스트',
+      unit: 'M',
+      purchasePrice: undefined,
+      processingCost: undefined,
+      salesPrice: undefined,
+      marginRate: undefined,
+      effectiveDate: undefined,
+      status: 'not_registered',
+      currentRevision: 0,
+      isFinal: false,
+    },
+  ];
+}
+
+export default async function PricingManagementPage() {
+  const pricingList = await getPricingList();
+
+  return (
+    <div className="container mx-auto py-6 px-4">
+      <PricingListClient initialData={pricingList} />
+    </div>
+  );
+}
--- a/src/app/api/proxy/[...path]/route.ts
+++ b/src/app/api/proxy/[...path]/route.ts
@@ -74,22 +74,32 @@ async function refreshAccessToken(refreshToken: string): Promise<{

 /**
 * 백엔드 API 요청 실행 함수
+ *
+ * @param isFormData - true인 경우 Content-Type 헤더를 생략 (브라우저가 boundary 자동 설정)
 */
 async function executeBackendRequest(
  url: URL,
  method: string,
  token: string | undefined,
-  body: string | undefined,
-  contentType: string
+  body: string | FormData | undefined,
+  contentType: string,
+  isFormData: boolean = false
 ): Promise<Response> {
+  // FormData인 경우 Content-Type을 생략해야 브라우저가 boundary를 자동 설정
+  const headers: Record<string, string> = {
+    'Accept': 'application/json',
+    'X-API-KEY': process.env.NEXT_PUBLIC_API_KEY || '',
+    'Authorization': token ? `Bearer ${token}` : '',
+  };
+
+  // FormData가 아닌 경우에만 Content-Type 설정
+  if (!isFormData) {
+    headers['Content-Type'] = contentType;
+  }
+
  return fetch(url.toString(), {
    method,
-    headers: {
-      'Content-Type': contentType,
-      'Accept': 'application/json',
-      'X-API-KEY': process.env.NEXT_PUBLIC_API_KEY || '',
-      'Authorization': token ? `Bearer ${token}` : '',
-    },
+    headers,
    body,
  });
 }
@@ -162,8 +172,9 @@ async function proxyRequest(
    });

    // 3. 요청 바디 읽기 (POST, PUT, DELETE, PATCH)
-    let body: string | undefined;
+    let body: string | FormData | undefined;
    const contentType = request.headers.get('content-type') || 'application/json';
+    let isFormData = false;

    if (['POST', 'PUT', 'DELETE', 'PATCH'].includes(method)) {
      if (contentType.includes('application/json')) {
@@ -171,16 +182,38 @@ async function proxyRequest(
        console.log('🔵 [PROXY] Request:', method, url.toString());
        console.log('🔵 [PROXY] Request Body:', body); // 디버깅용
      } else if (contentType.includes('multipart/form-data')) {
-        // multipart는 formData로 처리해야 하지만, 현재는 지원하지 않음
-        console.warn('🟡 [PROXY] multipart/form-data is not fully supported');
-        body = await request.text();
+        // multipart/form-data 처리: FormData를 그대로 전달
+        console.log('📎 [PROXY] Processing multipart/form-data request');
+        isFormData = true;
+
+        // 원본 요청의 FormData 읽기
+        const originalFormData = await request.formData();
+
+        // 새 FormData 생성 (백엔드 전송용)
+        const newFormData = new FormData();
+
+        // 모든 필드 복사
+        for (const [key, value] of originalFormData.entries()) {
+          if (value instanceof File) {
+            // File 객체는 그대로 추가
+            newFormData.append(key, value, value.name);
+            console.log(`📎 [PROXY] File field: ${key} = ${value.name} (${value.size} bytes)`);
+          } else {
+            // 일반 필드
+            newFormData.append(key, value);
+            console.log(`📎 [PROXY] Form field: ${key} = ${value}`);
+          }
+        }
+
+        body = newFormData;
+        console.log('🔵 [PROXY] Request:', method, url.toString());
      }
    } else {
      console.log('🔵 [PROXY] Request:', method, url.toString());
    }

    // 4. 백엔드로 프록시 요청
-    let backendResponse = await executeBackendRequest(url, method, token, body, contentType);
+    let backendResponse = await executeBackendRequest(url, method, token, body, contentType, isFormData);
    let newTokens: { accessToken?: string; refreshToken?: string; expiresIn?: number } | null = null;

    // 5. 🔄 401 응답 시 토큰 갱신 후 재시도
@@ -195,7 +228,7 @@ async function proxyRequest(
        // 새 토큰으로 원래 요청 재시도
        token = refreshResult.accessToken;
        newTokens = refreshResult;
-        backendResponse = await executeBackendRequest(url, method, token, body, contentType);
+        backendResponse = await executeBackendRequest(url, method, token, body, contentType, isFormData);

        console.log('🔵 [PROXY] Retry response status:', backendResponse.status);
      } else {
--- a/src/components/hr/AttendanceManagement/AttendanceInfoDialog.tsx
+++ b/src/components/hr/AttendanceManagement/AttendanceInfoDialog.tsx
@@ -0,0 +1,337 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { Label } from '@/components/ui/label';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { Calendar } from '@/components/ui/calendar';
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/components/ui/popover';
+import { CalendarIcon } from 'lucide-react';
+import { format } from 'date-fns';
+import { ko } from 'date-fns/locale';
+import { cn } from '@/lib/utils';
+import type {
+  AttendanceInfoDialogProps,
+  AttendanceFormData,
+} from './types';
+import {
+  HOUR_OPTIONS,
+  MINUTE_OPTIONS,
+  OVERTIME_HOUR_OPTIONS,
+} from './types';
+
+const initialFormData: AttendanceFormData = {
+  employeeId: '',
+  baseDate: format(new Date(), 'yyyy-MM-dd'),
+  checkInHour: '9',
+  checkInMinute: '0',
+  checkOutHour: '18',
+  checkOutMinute: '0',
+  nightOvertimeHours: '0',
+  nightOvertimeMinutes: '0',
+  weekendOvertimeHours: '0',
+  weekendOvertimeMinutes: '0',
+};
+
+export function AttendanceInfoDialog({
+  open,
+  onOpenChange,
+  mode,
+  attendance,
+  employees,
+  onSave,
+}: AttendanceInfoDialogProps) {
+  const [formData, setFormData] = useState<AttendanceFormData>(initialFormData);
+  const [selectedDate, setSelectedDate] = useState<Date | undefined>(new Date());
+
+  // 모드별 타이틀
+  const title = mode === 'create' ? '근태 정보' : '근태 정보';
+
+  // 데이터 초기화
+  useEffect(() => {
+    if (open && attendance && mode === 'edit') {
+      const [checkInHour, checkInMinute] = (attendance.checkIn || '09:00').split(':');
+      const [checkOutHour, checkOutMinute] = (attendance.checkOut || '18:00').split(':');
+
+      setFormData({
+        employeeId: attendance.employeeId,
+        baseDate: attendance.baseDate,
+        checkInHour: checkInHour || '9',
+        checkInMinute: checkInMinute === '30' ? '30' : '0',
+        checkOutHour: checkOutHour || '18',
+        checkOutMinute: checkOutMinute === '30' ? '30' : '0',
+        nightOvertimeHours: '0',
+        nightOvertimeMinutes: '0',
+        weekendOvertimeHours: '0',
+        weekendOvertimeMinutes: '0',
+      });
+      setSelectedDate(new Date(attendance.baseDate));
+    } else if (open && mode === 'create') {
+      setFormData(initialFormData);
+      setSelectedDate(new Date());
+    }
+  }, [open, attendance, mode]);
+
+  // 입력 변경 핸들러
+  const handleChange = (field: keyof AttendanceFormData, value: string) => {
+    setFormData(prev => ({ ...prev, [field]: value }));
+  };
+
+  // 날짜 변경 핸들러
+  const handleDateChange = (date: Date | undefined) => {
+    setSelectedDate(date);
+    if (date) {
+      setFormData(prev => ({ ...prev, baseDate: format(date, 'yyyy-MM-dd') }));
+    }
+  };
+
+  // 저장
+  const handleSubmit = () => {
+    onSave(formData);
+    onOpenChange(false);
+  };
+
+  // 선택된 사원 정보
+  const selectedEmployee = employees.find(e => e.id === formData.employeeId);
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-md">
+        <DialogHeader>
+          <DialogTitle>{title}</DialogTitle>
+        </DialogHeader>
+
+        <div className="space-y-4 py-4">
+          {/* 대상 선택 */}
+          <div className="flex items-center justify-between">
+            <Label className="text-sm font-medium min-w-[80px]">대상</Label>
+            <Select
+              value={formData.employeeId}
+              onValueChange={(value) => handleChange('employeeId', value)}
+            >
+              <SelectTrigger className="w-[200px]">
+                <SelectValue placeholder="선택 ▼" />
+              </SelectTrigger>
+              <SelectContent>
+                {employees.map((employee) => (
+                  <SelectItem key={employee.id} value={employee.id}>
+                    {employee.department} / {employee.rank} / {employee.name}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+
+          {/* 기준일 */}
+          <div className="flex items-center justify-between">
+            <Label className="text-sm font-medium min-w-[80px]">기준일</Label>
+            <Popover>
+              <PopoverTrigger asChild>
+                <Button
+                  variant="outline"
+                  className={cn(
+                    'w-[200px] justify-start text-left font-normal',
+                    !selectedDate && 'text-muted-foreground'
+                  )}
+                >
+                  <CalendarIcon className="mr-2 h-4 w-4" />
+                  {selectedDate ? format(selectedDate, 'yyyy-MM-dd') : '날짜 선택'}
+                </Button>
+              </PopoverTrigger>
+              <PopoverContent className="w-auto p-0" align="end">
+                <Calendar
+                  mode="single"
+                  selected={selectedDate}
+                  onSelect={handleDateChange}
+                  locale={ko}
+                  initialFocus
+                />
+              </PopoverContent>
+            </Popover>
+          </div>
+
+          {/* 출근 시간 */}
+          <div className="flex items-center justify-between">
+            <Label className="text-sm font-medium min-w-[80px]">출근 시간</Label>
+            <div className="flex items-center gap-2">
+              <Select
+                value={formData.checkInHour}
+                onValueChange={(value) => handleChange('checkInHour', value)}
+              >
+                <SelectTrigger className="w-[90px]">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  {HOUR_OPTIONS.map((option) => (
+                    <SelectItem key={option.value} value={option.value}>
+                      {option.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+              <Select
+                value={formData.checkInMinute}
+                onValueChange={(value) => handleChange('checkInMinute', value)}
+              >
+                <SelectTrigger className="w-[90px]">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  {MINUTE_OPTIONS.map((option) => (
+                    <SelectItem key={option.value} value={option.value}>
+                      {option.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+
+          {/* 퇴근 시간 */}
+          <div className="flex items-center justify-between">
+            <Label className="text-sm font-medium min-w-[80px]">퇴근 시간</Label>
+            <div className="flex items-center gap-2">
+              <Select
+                value={formData.checkOutHour}
+                onValueChange={(value) => handleChange('checkOutHour', value)}
+              >
+                <SelectTrigger className="w-[90px]">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  {HOUR_OPTIONS.map((option) => (
+                    <SelectItem key={option.value} value={option.value}>
+                      {option.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+              <Select
+                value={formData.checkOutMinute}
+                onValueChange={(value) => handleChange('checkOutMinute', value)}
+              >
+                <SelectTrigger className="w-[90px]">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  {MINUTE_OPTIONS.map((option) => (
+                    <SelectItem key={option.value} value={option.value}>
+                      {option.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+
+          {/* 야간 연장 시간 */}
+          <div className="flex items-center justify-between">
+            <Label className="text-sm font-medium min-w-[80px]">야간 연장 시간</Label>
+            <div className="flex items-center gap-2">
+              <Select
+                value={formData.nightOvertimeHours}
+                onValueChange={(value) => handleChange('nightOvertimeHours', value)}
+              >
+                <SelectTrigger className="w-[90px]">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  {OVERTIME_HOUR_OPTIONS.map((option) => (
+                    <SelectItem key={option.value} value={option.value}>
+                      {option.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+              <Select
+                value={formData.nightOvertimeMinutes}
+                onValueChange={(value) => handleChange('nightOvertimeMinutes', value)}
+              >
+                <SelectTrigger className="w-[90px]">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  {MINUTE_OPTIONS.map((option) => (
+                    <SelectItem key={option.value} value={option.value}>
+                      {option.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+
+          {/* 주말 연장 시간 */}
+          <div className="flex items-center justify-between">
+            <Label className="text-sm font-medium min-w-[80px]">주말 연장 시간</Label>
+            <div className="flex items-center gap-2">
+              <Select
+                value={formData.weekendOvertimeHours}
+                onValueChange={(value) => handleChange('weekendOvertimeHours', value)}
+              >
+                <SelectTrigger className="w-[90px]">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  {OVERTIME_HOUR_OPTIONS.map((option) => (
+                    <SelectItem key={option.value} value={option.value}>
+                      {option.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+              <Select
+                value={formData.weekendOvertimeMinutes}
+                onValueChange={(value) => handleChange('weekendOvertimeMinutes', value)}
+              >
+                <SelectTrigger className="w-[90px]">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  {MINUTE_OPTIONS.map((option) => (
+                    <SelectItem key={option.value} value={option.value}>
+                      {option.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+        </div>
+
+        <DialogFooter className="gap-2">
+          <Button
+            variant="outline"
+            onClick={() => onOpenChange(false)}
+            className="bg-gray-900 text-white hover:bg-gray-800"
+          >
+            취소
+          </Button>
+          <Button
+            onClick={handleSubmit}
+            className="bg-gray-900 text-white hover:bg-gray-800"
+          >
+            저장
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
--- a/src/components/hr/AttendanceManagement/ReasonInfoDialog.tsx
+++ b/src/components/hr/AttendanceManagement/ReasonInfoDialog.tsx
@@ -0,0 +1,174 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { Label } from '@/components/ui/label';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { Calendar } from '@/components/ui/calendar';
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/components/ui/popover';
+import { CalendarIcon } from 'lucide-react';
+import { format } from 'date-fns';
+import { ko } from 'date-fns/locale';
+import { cn } from '@/lib/utils';
+import type {
+  ReasonInfoDialogProps,
+  ReasonFormData,
+  ReasonType,
+} from './types';
+import { REASON_TYPE_LABELS } from './types';
+
+const initialFormData: ReasonFormData = {
+  employeeId: '',
+  baseDate: format(new Date(), 'yyyy-MM-dd'),
+  reasonType: '',
+};
+
+export function ReasonInfoDialog({
+  open,
+  onOpenChange,
+  employees,
+  onSubmit,
+}: ReasonInfoDialogProps) {
+  const [formData, setFormData] = useState<ReasonFormData>(initialFormData);
+  const [selectedDate, setSelectedDate] = useState<Date | undefined>(new Date());
+
+  // 데이터 초기화
+  useEffect(() => {
+    if (open) {
+      setFormData(initialFormData);
+      setSelectedDate(new Date());
+    }
+  }, [open]);
+
+  // 입력 변경 핸들러
+  const handleChange = (field: keyof ReasonFormData, value: string) => {
+    setFormData(prev => ({ ...prev, [field]: value }));
+  };
+
+  // 날짜 변경 핸들러
+  const handleDateChange = (date: Date | undefined) => {
+    setSelectedDate(date);
+    if (date) {
+      setFormData(prev => ({ ...prev, baseDate: format(date, 'yyyy-MM-dd') }));
+    }
+  };
+
+  // 등록 (문서 작성 화면으로 이동)
+  const handleSubmit = () => {
+    onSubmit(formData);
+    onOpenChange(false);
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-md">
+        <DialogHeader>
+          <DialogTitle>사유 정보</DialogTitle>
+        </DialogHeader>
+
+        <div className="space-y-4 py-4">
+          {/* 대상 선택 */}
+          <div className="flex items-center justify-between">
+            <Label className="text-sm font-medium min-w-[80px]">대상</Label>
+            <Select
+              value={formData.employeeId}
+              onValueChange={(value) => handleChange('employeeId', value)}
+            >
+              <SelectTrigger className="w-[200px]">
+                <SelectValue placeholder="선택 ▼" />
+              </SelectTrigger>
+              <SelectContent>
+                {employees.map((employee) => (
+                  <SelectItem key={employee.id} value={employee.id}>
+                    {employee.department} / {employee.rank} / {employee.name}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+
+          {/* 기준일 */}
+          <div className="flex items-center justify-between">
+            <Label className="text-sm font-medium min-w-[80px]">기준일</Label>
+            <Popover>
+              <PopoverTrigger asChild>
+                <Button
+                  variant="outline"
+                  className={cn(
+                    'w-[200px] justify-start text-left font-normal',
+                    !selectedDate && 'text-muted-foreground'
+                  )}
+                >
+                  <CalendarIcon className="mr-2 h-4 w-4" />
+                  {selectedDate ? format(selectedDate, 'yyyy-MM-dd') : '날짜 선택'}
+                </Button>
+              </PopoverTrigger>
+              <PopoverContent className="w-auto p-0" align="end">
+                <Calendar
+                  mode="single"
+                  selected={selectedDate}
+                  onSelect={handleDateChange}
+                  locale={ko}
+                  initialFocus
+                />
+              </PopoverContent>
+            </Popover>
+          </div>
+
+          {/* 유형 선택 */}
+          <div className="flex items-center justify-between">
+            <Label className="text-sm font-medium min-w-[80px]">유형</Label>
+            <Select
+              value={formData.reasonType}
+              onValueChange={(value) => handleChange('reasonType', value)}
+            >
+              <SelectTrigger className="w-[200px]">
+                <SelectValue placeholder="선택 ▼" />
+              </SelectTrigger>
+              <SelectContent>
+                {Object.entries(REASON_TYPE_LABELS).map(([value, label]) => (
+                  <SelectItem key={value} value={value}>
+                    {label}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+        </div>
+
+        <DialogFooter className="gap-2">
+          <Button
+            variant="outline"
+            onClick={() => onOpenChange(false)}
+            className="bg-gray-900 text-white hover:bg-gray-800"
+          >
+            취소
+          </Button>
+          <Button
+            onClick={handleSubmit}
+            className="bg-gray-900 text-white hover:bg-gray-800"
+          >
+            등록
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
--- a/src/components/hr/AttendanceManagement/index.tsx
+++ b/src/components/hr/AttendanceManagement/index.tsx
@@ -0,0 +1,535 @@
+'use client';
+
+import { useState, useMemo, useCallback } from 'react';
+import { useRouter } from 'next/navigation';
+import {
+  Clock,
+  UserCheck,
+  AlertCircle,
+  Calendar,
+  Download,
+  Plus,
+  FileText,
+  Edit,
+} from 'lucide-react';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { Checkbox } from '@/components/ui/checkbox';
+import { TableRow, TableCell } from '@/components/ui/table';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/components/ui/popover';
+import { Calendar as CalendarComponent } from '@/components/ui/calendar';
+import { CalendarIcon } from 'lucide-react';
+import { format, addDays } from 'date-fns';
+import { ko } from 'date-fns/locale';
+import { cn } from '@/lib/utils';
+import {
+  IntegratedListTemplateV2,
+  type TableColumn,
+  type StatCard,
+  type TabOption,
+} from '@/components/templates/IntegratedListTemplateV2';
+import { ListMobileCard, InfoField } from '@/components/organisms/ListMobileCard';
+import { AttendanceInfoDialog } from './AttendanceInfoDialog';
+import { ReasonInfoDialog } from './ReasonInfoDialog';
+import type {
+  AttendanceRecord,
+  AttendanceStatus,
+  SortOption,
+  AttendanceFormData,
+  ReasonFormData,
+} from './types';
+import {
+  ATTENDANCE_STATUS_LABELS,
+  ATTENDANCE_STATUS_COLORS,
+  SORT_OPTIONS,
+  REASON_TYPE_LABELS,
+} from './types';
+
+/**
+ * Mock 데이터 - 실제 API 연동 전 테스트용
+ */
+const mockEmployees = [
+  { id: '1', name: '이름', department: '부서명', position: '부서장팀장', rank: '부장' },
+  { id: '2', name: '이름', department: '부서명', position: '팀장', rank: '부장' },
+  { id: '3', name: '이름', department: '부서명', position: '부서장팀장', rank: '부장' },
+  { id: '4', name: '이름', department: '부서명', position: '팀장', rank: '부장' },
+  { id: '5', name: '이름', department: '부서명', position: '부서장팀장', rank: '부장' },
+  { id: '6', name: '이름', department: '부서명', position: '팀장', rank: '부장' },
+  { id: '7', name: '이름', department: '부서명', position: '부서장팀장', rank: '부장' },
+];
+
+// Mock 근태 기록 생성
+const generateMockAttendanceRecords = (): AttendanceRecord[] => {
+  const records: AttendanceRecord[] = [];
+  const statuses: AttendanceStatus[] = ['onTime', 'onTime', 'onTime', 'late', 'absent', 'vacation', 'onTime'];
+  const reasons = [
+    null,
+    null,
+    null,
+    null,
+    { type: 'businessTripRequest' as const, label: '출장기안', documentId: 'doc1' },
+    { type: 'fieldWorkRequest' as const, label: '외근승인', documentId: 'doc2' },
+    null,
+  ];
+
+  mockEmployees.forEach((employee, index) => {
+    records.push({
+      id: String(index + 1),
+      employeeId: employee.id,
+      employeeName: employee.name,
+      department: employee.department,
+      position: employee.position,
+      rank: employee.rank,
+      baseDate: '2025-09-03',
+      checkIn: index === 4 ? null : '08:40',
+      checkOut: index === 4 ? null : '21:40',
+      breakTime: '1시간',
+      overtimeHours: index % 2 === 0 ? '3시간 30분' : '1시간',
+      reason: reasons[index],
+      status: statuses[index],
+      createdAt: new Date().toISOString(),
+      updatedAt: new Date().toISOString(),
+    });
+  });
+
+  return records;
+};
+
+export function AttendanceManagement() {
+  const router = useRouter();
+
+  // 근태 데이터 상태
+  const [attendanceRecords, setAttendanceRecords] = useState<AttendanceRecord[]>(generateMockAttendanceRecords);
+
+  // 검색 및 필터 상태
+  const [searchValue, setSearchValue] = useState('');
+  const [activeTab, setActiveTab] = useState<string>('all');
+  const [sortOption, setSortOption] = useState<SortOption>('rank');
+  const [currentPage, setCurrentPage] = useState(1);
+  const itemsPerPage = 20;
+
+  // 날짜 범위 상태
+  const [dateRange, setDateRange] = useState<{ from: Date; to: Date }>({
+    from: new Date('2025-09-01'),
+    to: new Date('2025-09-03'),
+  });
+
+  // 다이얼로그 상태
+  const [attendanceDialogOpen, setAttendanceDialogOpen] = useState(false);
+  const [attendanceDialogMode, setAttendanceDialogMode] = useState<'create' | 'edit'>('create');
+  const [selectedAttendance, setSelectedAttendance] = useState<AttendanceRecord | null>(null);
+  const [reasonDialogOpen, setReasonDialogOpen] = useState(false);
+  const [selectedItems, setSelectedItems] = useState<Set<string>>(new Set());
+
+  // 필터링된 데이터
+  const filteredRecords = useMemo(() => {
+    let filtered = attendanceRecords;
+
+    // 탭(상태) 필터
+    if (activeTab !== 'all') {
+      filtered = filtered.filter(r => r.status === activeTab);
+    }
+
+    // 검색 필터
+    if (searchValue) {
+      const search = searchValue.toLowerCase();
+      filtered = filtered.filter(r =>
+        r.employeeName.toLowerCase().includes(search) ||
+        r.department.toLowerCase().includes(search)
+      );
+    }
+
+    // 정렬
+    filtered = [...filtered].sort((a, b) => {
+      switch (sortOption) {
+        case 'rank':
+          return a.rank.localeCompare(b.rank, 'ko');
+        case 'deptAsc':
+          return a.department.localeCompare(b.department, 'ko');
+        case 'deptDesc':
+          return b.department.localeCompare(a.department, 'ko');
+        case 'nameAsc':
+          return a.employeeName.localeCompare(b.employeeName, 'ko');
+        case 'nameDesc':
+          return b.employeeName.localeCompare(a.employeeName, 'ko');
+        default:
+          return 0;
+      }
+    });
+
+    return filtered;
+  }, [attendanceRecords, activeTab, searchValue, sortOption]);
+
+  // 페이지네이션된 데이터
+  const paginatedData = useMemo(() => {
+    const startIndex = (currentPage - 1) * itemsPerPage;
+    return filteredRecords.slice(startIndex, startIndex + itemsPerPage);
+  }, [filteredRecords, currentPage, itemsPerPage]);
+
+  // 통계 계산
+  const stats = useMemo(() => {
+    const onTimeCount = attendanceRecords.filter(r => r.status === 'onTime').length;
+    const lateCount = attendanceRecords.filter(r => r.status === 'late').length;
+    const absentCount = attendanceRecords.filter(r => r.status === 'absent').length;
+    const vacationCount = attendanceRecords.filter(r => r.status === 'vacation').length;
+
+    return { onTimeCount, lateCount, absentCount, vacationCount };
+  }, [attendanceRecords]);
+
+  // StatCards 데이터
+  const statCards: StatCard[] = useMemo(() => [
+    {
+      label: '정시 출근',
+      value: `${stats.onTimeCount}명`,
+      icon: UserCheck,
+      iconColor: 'text-green-500',
+    },
+    {
+      label: '지각',
+      value: `${stats.lateCount}명`,
+      icon: Clock,
+      iconColor: 'text-yellow-500',
+    },
+    {
+      label: '결근',
+      value: `${stats.absentCount}명`,
+      icon: AlertCircle,
+      iconColor: 'text-red-500',
+    },
+    {
+      label: '휴가',
+      value: `${stats.vacationCount}명`,
+      icon: Calendar,
+      iconColor: 'text-blue-500',
+    },
+  ], [stats]);
+
+  // 탭 옵션
+  const tabs: TabOption[] = useMemo(() => [
+    { value: 'all', label: '전체', count: attendanceRecords.length, color: 'gray' },
+    { value: 'onTime', label: '정시 출근', count: stats.onTimeCount, color: 'green' },
+    { value: 'late', label: '지각', count: stats.lateCount, color: 'yellow' },
+    { value: 'absent', label: '결근', count: stats.absentCount, color: 'red' },
+    { value: 'vacation', label: '휴가', count: stats.vacationCount, color: 'blue' },
+    { value: 'businessTrip', label: '출장', count: attendanceRecords.filter(r => r.status === 'businessTrip').length, color: 'purple' },
+    { value: 'fieldWork', label: '외근', count: attendanceRecords.filter(r => r.status === 'fieldWork').length, color: 'orange' },
+    { value: 'overtime', label: '연장근무', count: attendanceRecords.filter(r => r.status === 'overtime').length, color: 'indigo' },
+  ], [attendanceRecords.length, stats]);
+
+  // 테이블 컬럼 정의
+  const tableColumns: TableColumn[] = useMemo(() => [
+    { key: 'department', label: '부서', className: 'min-w-[80px]' },
+    { key: 'position', label: '직책', className: 'min-w-[100px]' },
+    { key: 'name', label: '이름', className: 'min-w-[60px]' },
+    { key: 'rank', label: '직급', className: 'min-w-[60px]' },
+    { key: 'baseDate', label: '기준일', className: 'min-w-[100px]' },
+    { key: 'checkIn', label: '출근', className: 'min-w-[60px]' },
+    { key: 'checkOut', label: '퇴근', className: 'min-w-[60px]' },
+    { key: 'breakTime', label: '휴게', className: 'min-w-[60px]' },
+    { key: 'overtime', label: '연장근무', className: 'min-w-[80px]' },
+    { key: 'reason', label: '사유', className: 'min-w-[80px]' },
+    { key: 'actions', label: '작업', className: 'w-[60px] text-center' },
+  ], []);
+
+  // 체크박스 토글
+  const toggleSelection = useCallback((id: string) => {
+    setSelectedItems(prev => {
+      const newSet = new Set(prev);
+      if (newSet.has(id)) {
+        newSet.delete(id);
+      } else {
+        newSet.add(id);
+      }
+      return newSet;
+    });
+  }, []);
+
+  // 전체 선택/해제
+  const toggleSelectAll = useCallback(() => {
+    if (selectedItems.size === paginatedData.length && paginatedData.length > 0) {
+      setSelectedItems(new Set());
+    } else {
+      const allIds = new Set(paginatedData.map((item) => item.id));
+      setSelectedItems(allIds);
+    }
+  }, [selectedItems.size, paginatedData]);
+
+  // 핸들러
+  const handleAddAttendance = useCallback(() => {
+    setAttendanceDialogMode('create');
+    setSelectedAttendance(null);
+    setAttendanceDialogOpen(true);
+  }, []);
+
+  const handleAddReason = useCallback(() => {
+    setReasonDialogOpen(true);
+  }, []);
+
+  const handleEditAttendance = useCallback((record: AttendanceRecord) => {
+    setAttendanceDialogMode('edit');
+    setSelectedAttendance(record);
+    setAttendanceDialogOpen(true);
+  }, []);
+
+  const handleSaveAttendance = useCallback((data: AttendanceFormData) => {
+    console.log('Save attendance:', data);
+    // TODO: API 연동
+    setAttendanceDialogOpen(false);
+  }, []);
+
+  const handleSubmitReason = useCallback((data: ReasonFormData) => {
+    console.log('Submit reason:', data);
+    // TODO: 문서 작성 화면으로 이동
+    router.push(`/ko/hr/documents/new?type=${data.reasonType}`);
+  }, [router]);
+
+  const handleExcelDownload = useCallback(() => {
+    console.log('Excel download');
+    // TODO: 엑셀 다운로드 기능 구현
+  }, []);
+
+  const handleReasonClick = useCallback((record: AttendanceRecord) => {
+    if (record.reason?.documentId) {
+      router.push(`/ko/hr/documents/${record.reason.documentId}`);
+    }
+  }, [router]);
+
+  // 테이블 행 렌더링
+  const renderTableRow = useCallback((item: AttendanceRecord, index: number, globalIndex: number) => {
+    const isSelected = selectedItems.has(item.id);
+
+    return (
+      <TableRow
+        key={item.id}
+        className="hover:bg-muted/50"
+      >
+        <TableCell className="text-center" onClick={(e) => e.stopPropagation()}>
+          <Checkbox
+            checked={isSelected}
+            onCheckedChange={() => toggleSelection(item.id)}
+          />
+        </TableCell>
+        <TableCell>{item.department}</TableCell>
+        <TableCell>{item.position}</TableCell>
+        <TableCell>{item.employeeName}</TableCell>
+        <TableCell>{item.rank}</TableCell>
+        <TableCell>
+          {item.baseDate ? format(new Date(item.baseDate), 'yyyy-MM-dd (E)', { locale: ko }) : '-'}
+        </TableCell>
+        <TableCell>{item.checkIn || '-'}</TableCell>
+        <TableCell>{item.checkOut || '-'}</TableCell>
+        <TableCell>{item.breakTime || '-'}</TableCell>
+        <TableCell>{item.overtimeHours || '-'}</TableCell>
+        <TableCell>
+          {item.reason ? (
+            <Button
+              variant="link"
+              size="sm"
+              className="p-0 h-auto text-blue-600 hover:text-blue-800"
+              onClick={() => handleReasonClick(item)}
+            >
+              {item.reason.label}
+            </Button>
+          ) : '-'}
+        </TableCell>
+        <TableCell className="text-center">
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={() => handleEditAttendance(item)}
+            title="수정"
+          >
+            <Edit className="w-4 h-4" />
+          </Button>
+        </TableCell>
+      </TableRow>
+    );
+  }, [selectedItems, toggleSelection, handleEditAttendance, handleReasonClick]);
+
+  // 모바일 카드 렌더링
+  const renderMobileCard = useCallback((
+    item: AttendanceRecord,
+    index: number,
+    globalIndex: number,
+    isSelected: boolean,
+    onToggle: () => void
+  ) => {
+    return (
+      <ListMobileCard
+        id={item.id}
+        title={item.employeeName}
+        headerBadges={
+          <div className="flex items-center gap-2 flex-wrap">
+            <Badge variant="outline" className="text-xs">
+              {item.department}
+            </Badge>
+            <Badge variant="outline" className="text-xs">
+              {item.rank}
+            </Badge>
+          </div>
+        }
+        statusBadge={
+          <Badge className={ATTENDANCE_STATUS_COLORS[item.status]}>
+            {ATTENDANCE_STATUS_LABELS[item.status]}
+          </Badge>
+        }
+        isSelected={isSelected}
+        onToggleSelection={onToggle}
+        infoGrid={
+          <div className="grid grid-cols-2 gap-x-4 gap-y-3">
+            <InfoField label="직책" value={item.position} />
+            <InfoField
+              label="기준일"
+              value={item.baseDate ? format(new Date(item.baseDate), 'yyyy-MM-dd') : '-'}
+            />
+            <InfoField label="출근" value={item.checkIn || '-'} />
+            <InfoField label="퇴근" value={item.checkOut || '-'} />
+            <InfoField label="휴게" value={item.breakTime || '-'} />
+            <InfoField label="연장근무" value={item.overtimeHours || '-'} />
+            {item.reason && (
+              <InfoField label="사유" value={item.reason.label} />
+            )}
+          </div>
+        }
+        actions={
+          <div className="flex gap-2 flex-wrap">
+            <Button
+              variant="default"
+              size="default"
+              className="flex-1 min-w-[100px] h-11"
+              onClick={(e) => { e.stopPropagation(); handleEditAttendance(item); }}
+            >
+              <Edit className="h-4 w-4 mr-2" />
+              수정
+            </Button>
+          </div>
+        }
+      />
+    );
+  }, [handleEditAttendance]);
+
+  // 헤더 액션 (날짜 범위 + 버튼들)
+  const headerActions = (
+    <div className="flex items-center gap-2 flex-wrap">
+      {/* 날짜 범위 선택 */}
+      <Popover>
+        <PopoverTrigger asChild>
+          <Button variant="outline" className="gap-2">
+            <CalendarIcon className="h-4 w-4" />
+            {format(dateRange.from, 'yyyy-MM-dd')} ~ {format(dateRange.to, 'yyyy-MM-dd')}
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className="w-auto p-0" align="end">
+          <CalendarComponent
+            mode="range"
+            selected={{ from: dateRange.from, to: dateRange.to }}
+            onSelect={(range) => {
+              if (range?.from && range?.to) {
+                setDateRange({ from: range.from, to: range.to });
+              }
+            }}
+            locale={ko}
+            numberOfMonths={2}
+          />
+        </PopoverContent>
+      </Popover>
+
+      <Button variant="outline" onClick={handleExcelDownload}>
+        <Download className="w-4 h-4 mr-2" />
+        엑셀 다운로드
+      </Button>
+      <Button onClick={handleAddAttendance}>
+        <Plus className="w-4 h-4 mr-2" />
+        근태 등록
+      </Button>
+    </div>
+  );
+
+  // 검색 옆 추가 필터 (사유 등록 버튼 + 정렬 셀렉트)
+  const extraFilters = (
+    <div className="flex items-center gap-2 flex-wrap">
+      <Button variant="outline" onClick={handleAddReason}>
+        <FileText className="w-4 h-4 mr-2" />
+        사유 등록
+      </Button>
+      <Select value={sortOption} onValueChange={(value) => setSortOption(value as SortOption)}>
+        <SelectTrigger className="w-[140px]">
+          <SelectValue />
+        </SelectTrigger>
+        <SelectContent>
+          {Object.entries(SORT_OPTIONS).map(([value, label]) => (
+            <SelectItem key={value} value={value}>{label}</SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+    </div>
+  );
+
+  // 페이지네이션 설정
+  const totalPages = Math.ceil(filteredRecords.length / itemsPerPage);
+
+  return (
+    <>
+      <IntegratedListTemplateV2<AttendanceRecord>
+        title="근태관리"
+        description="직원 출퇴근 및 근태 정보를 관리합니다"
+        icon={Clock}
+        headerActions={headerActions}
+        stats={statCards}
+        searchValue={searchValue}
+        onSearchChange={setSearchValue}
+        searchPlaceholder="이름, 부서 검색..."
+        extraFilters={extraFilters}
+        tabs={tabs}
+        activeTab={activeTab}
+        onTabChange={setActiveTab}
+        tableColumns={tableColumns}
+        data={paginatedData}
+        totalCount={filteredRecords.length}
+        allData={filteredRecords}
+        selectedItems={selectedItems}
+        onToggleSelection={toggleSelection}
+        onToggleSelectAll={toggleSelectAll}
+        getItemId={(item) => item.id}
+        renderTableRow={renderTableRow}
+        renderMobileCard={renderMobileCard}
+        pagination={{
+          currentPage,
+          totalPages,
+          totalItems: filteredRecords.length,
+          itemsPerPage,
+          onPageChange: setCurrentPage,
+        }}
+      />
+
+      {/* 근태 정보 다이얼로그 */}
+      <AttendanceInfoDialog
+        open={attendanceDialogOpen}
+        onOpenChange={setAttendanceDialogOpen}
+        mode={attendanceDialogMode}
+        attendance={selectedAttendance}
+        employees={mockEmployees}
+        onSave={handleSaveAttendance}
+      />
+
+      {/* 사유 정보 다이얼로그 */}
+      <ReasonInfoDialog
+        open={reasonDialogOpen}
+        onOpenChange={setReasonDialogOpen}
+        employees={mockEmployees}
+        onSubmit={handleSubmitReason}
+      />
+    </>
+  );
+}
--- a/src/components/hr/AttendanceManagement/types.ts
+++ b/src/components/hr/AttendanceManagement/types.ts
@@ -0,0 +1,128 @@
+/**
+ * 근태관리 (AttendanceManagement) 타입 정의
+ */
+
+// 근태 상태 타입
+export type AttendanceStatus = 'onTime' | 'late' | 'absent' | 'vacation' | 'businessTrip' | 'fieldWork' | 'overtime';
+
+// 근태 상태 라벨
+export const ATTENDANCE_STATUS_LABELS: Record<AttendanceStatus, string> = {
+  onTime: '정시 출근',
+  late: '지각',
+  absent: '결근',
+  vacation: '휴가',
+  businessTrip: '출장',
+  fieldWork: '외근',
+  overtime: '연장근무',
+};
+
+// 근태 상태 색상
+export const ATTENDANCE_STATUS_COLORS: Record<AttendanceStatus, string> = {
+  onTime: 'bg-green-100 text-green-700',
+  late: 'bg-yellow-100 text-yellow-700',
+  absent: 'bg-red-100 text-red-700',
+  vacation: 'bg-blue-100 text-blue-700',
+  businessTrip: 'bg-purple-100 text-purple-700',
+  fieldWork: 'bg-orange-100 text-orange-700',
+  overtime: 'bg-indigo-100 text-indigo-700',
+};
+
+// 정렬 옵션
+export type SortOption = 'rank' | 'deptAsc' | 'deptDesc' | 'nameAsc' | 'nameDesc';
+
+export const SORT_OPTIONS: Record<SortOption, string> = {
+  rank: '직급순',
+  deptAsc: '부서 오름차순',
+  deptDesc: '부서 내림차순',
+  nameAsc: '이름 오름차순',
+  nameDesc: '이름 내림차순',
+};
+
+// 사유 유형 (문서 유형)
+export type ReasonType = 'businessTripRequest' | 'vacationRequest' | 'fieldWorkRequest' | 'overtimeRequest';
+
+export const REASON_TYPE_LABELS: Record<ReasonType, string> = {
+  businessTripRequest: '출장신청서',
+  vacationRequest: '휴가신청서',
+  fieldWorkRequest: '외근신청서',
+  overtimeRequest: '연장근무신청서',
+};
+
+// 근태 기록 인터페이스
+export interface AttendanceRecord {
+  id: string;
+  employeeId: string;
+  employeeName: string;
+  department: string;
+  position: string;
+  rank: string;
+  baseDate: string;
+  checkIn: string | null;
+  checkOut: string | null;
+  breakTime: string | null;
+  overtimeHours: string | null;
+  reason: {
+    type: ReasonType;
+    label: string;
+    documentId?: string;
+  } | null;
+  status: AttendanceStatus;
+  createdAt: string;
+  updatedAt: string;
+}
+
+// 근태 등록/수정 폼 데이터
+export interface AttendanceFormData {
+  employeeId: string;
+  baseDate: string;
+  checkInHour: string;
+  checkInMinute: string;
+  checkOutHour: string;
+  checkOutMinute: string;
+  nightOvertimeHours: string;
+  nightOvertimeMinutes: string;
+  weekendOvertimeHours: string;
+  weekendOvertimeMinutes: string;
+}
+
+// 사유 등록 폼 데이터
+export interface ReasonFormData {
+  employeeId: string;
+  baseDate: string;
+  reasonType: ReasonType | '';
+}
+
+// 근태 정보 다이얼로그 Props
+export interface AttendanceInfoDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  mode: 'create' | 'edit';
+  attendance?: AttendanceRecord | null;
+  employees: { id: string; name: string; department: string; position: string; rank: string }[];
+  onSave: (data: AttendanceFormData) => void;
+}
+
+// 사유 정보 다이얼로그 Props
+export interface ReasonInfoDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  employees: { id: string; name: string; department: string; position: string; rank: string }[];
+  onSubmit: (data: ReasonFormData) => void;
+}
+
+// 시간 옵션 생성 헬퍼
+export const HOUR_OPTIONS = Array.from({ length: 24 }, (_, i) => ({
+  value: String(i),
+  label: `${i}시`,
+}));
+
+export const MINUTE_OPTIONS = [
+  { value: '0', label: '0분' },
+  { value: '30', label: '30분' },
+];
+
+// 연장 시간 옵션 (0-12시간)
+export const OVERTIME_HOUR_OPTIONS = Array.from({ length: 13 }, (_, i) => ({
+  value: String(i),
+  label: `${i}시간`,
+}));
--- a/src/components/hr/DepartmentManagement/DepartmentDialog.tsx
+++ b/src/components/hr/DepartmentManagement/DepartmentDialog.tsx
@@ -0,0 +1,92 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+} from '@/components/ui/dialog';
+import { Input } from '@/components/ui/input';
+import { Button } from '@/components/ui/button';
+import { Label } from '@/components/ui/label';
+import type { DepartmentDialogProps } from './types';
+
+/**
+ * 부서 추가/수정 다이얼로그
+ */
+export function DepartmentDialog({
+  isOpen,
+  onOpenChange,
+  mode,
+  parentDepartment,
+  department,
+  onSubmit
+}: DepartmentDialogProps) {
+  const [name, setName] = useState('');
+
+  // 다이얼로그 열릴 때 초기값 설정
+  useEffect(() => {
+    if (isOpen) {
+      if (mode === 'edit' && department) {
+        setName(department.name);
+      } else {
+        setName('');
+      }
+    }
+  }, [isOpen, mode, department]);
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (name.trim()) {
+      onSubmit(name.trim());
+      setName('');
+    }
+  };
+
+  const title = mode === 'add' ? '부서 추가' : '부서 수정';
+  const submitText = mode === 'add' ? '등록' : '수정';
+
+  return (
+    <Dialog open={isOpen} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle>{title}</DialogTitle>
+        </DialogHeader>
+
+        <form onSubmit={handleSubmit}>
+          <div className="space-y-4 py-4">
+            {/* 부모 부서 표시 (추가 모드일 때) */}
+            {mode === 'add' && parentDepartment && (
+              <div className="text-sm text-muted-foreground">
+                상위 부서: <span className="font-medium">{parentDepartment.name}</span>
+              </div>
+            )}
+
+            {/* 부서명 입력 */}
+            <div className="space-y-2">
+              <Label htmlFor="department-name">부서명</Label>
+              <Input
+                id="department-name"
+                value={name}
+                onChange={(e) => setName(e.target.value)}
+                placeholder="부서명을 입력하세요"
+                autoFocus
+              />
+            </div>
+          </div>
+
+          <DialogFooter>
+            <Button type="button" variant="outline" onClick={() => onOpenChange(false)}>
+              취소
+            </Button>
+            <Button type="submit" disabled={!name.trim()}>
+              {submitText}
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}
--- a/src/components/hr/DepartmentManagement/DepartmentStats.tsx
+++ b/src/components/hr/DepartmentManagement/DepartmentStats.tsx
@@ -0,0 +1,18 @@
+'use client';
+
+import { Card, CardContent } from '@/components/ui/card';
+import type { DepartmentStatsProps } from './types';
+
+/**
+ * 전체 부서 카운트 카드
+ */
+export function DepartmentStats({ totalCount }: DepartmentStatsProps) {
+  return (
+    <Card>
+      <CardContent className="py-4">
+        <div className="text-sm text-muted-foreground">전체 부서</div>
+        <div className="text-3xl font-bold">{totalCount}개</div>
+      </CardContent>
+    </Card>
+  );
+}
--- a/src/components/hr/DepartmentManagement/DepartmentToolbar.tsx
+++ b/src/components/hr/DepartmentManagement/DepartmentToolbar.tsx
@@ -0,0 +1,53 @@
+'use client';
+
+import { Input } from '@/components/ui/input';
+import { Button } from '@/components/ui/button';
+import { Search, Plus, Trash2 } from 'lucide-react';
+import type { DepartmentToolbarProps } from './types';
+
+/**
+ * 검색 + 추가/삭제 버튼 툴바
+ */
+export function DepartmentToolbar({
+  totalCount,
+  selectedCount,
+  searchQuery,
+  onSearchChange,
+  onAdd,
+  onDelete
+}: DepartmentToolbarProps) {
+  return (
+    <div className="flex flex-col sm:flex-row gap-4 items-start sm:items-center justify-between">
+      {/* 검색창 */}
+      <div className="relative w-full sm:w-80">
+        <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+        <Input
+          placeholder="부서명 검색"
+          value={searchQuery}
+          onChange={(e) => onSearchChange(e.target.value)}
+          className="pl-9"
+        />
+      </div>
+
+      {/* 선택 카운트 + 버튼 */}
+      <div className="flex items-center gap-3">
+        <span className="text-sm text-muted-foreground whitespace-nowrap">
+          총 {totalCount}건 {selectedCount > 0 && `| ${selectedCount}건 선택`}
+        </span>
+        <Button size="sm" onClick={onAdd}>
+          <Plus className="h-4 w-4 mr-1" />
+          추가
+        </Button>
+        <Button
+          size="sm"
+          variant="destructive"
+          onClick={onDelete}
+          disabled={selectedCount === 0}
+        >
+          <Trash2 className="h-4 w-4 mr-1" />
+          삭제
+        </Button>
+      </div>
+    </div>
+  );
+}
--- a/src/components/hr/DepartmentManagement/DepartmentTree.tsx
+++ b/src/components/hr/DepartmentManagement/DepartmentTree.tsx
@@ -0,0 +1,70 @@
+'use client';
+
+import { Card, CardContent } from '@/components/ui/card';
+import { Checkbox } from '@/components/ui/checkbox';
+import { DepartmentTreeItem } from './DepartmentTreeItem';
+import type { DepartmentTreeProps } from './types';
+import { getAllDepartmentIds } from './types';
+
+/**
+ * 트리 구조 테이블 컨테이너
+ */
+export function DepartmentTree({
+  departments,
+  expandedIds,
+  selectedIds,
+  onToggleExpand,
+  onToggleSelect,
+  onToggleSelectAll,
+  onAdd,
+  onEdit,
+  onDelete
+}: DepartmentTreeProps) {
+  const allIds = getAllDepartmentIds(departments);
+  const isAllSelected = allIds.length > 0 && selectedIds.size === allIds.length;
+  const isIndeterminate = selectedIds.size > 0 && selectedIds.size < allIds.length;
+
+  return (
+    <Card>
+      <CardContent className="p-0">
+        {/* 테이블 헤더 */}
+        <div className="flex items-center px-4 py-3 border-b bg-muted/50">
+          <div className="flex items-center gap-3 flex-1">
+            <Checkbox
+              checked={isIndeterminate ? 'indeterminate' : isAllSelected}
+              onCheckedChange={onToggleSelectAll}
+              aria-label="전체 선택"
+            />
+            <span className="font-medium text-sm">부서명</span>
+          </div>
+          <div className="w-24 text-right font-medium text-sm">작업</div>
+        </div>
+
+        {/* 트리 아이템 목록 */}
+        <div className="divide-y">
+          {departments.map(department => (
+            <DepartmentTreeItem
+              key={department.id}
+              department={department}
+              depth={0}
+              expandedIds={expandedIds}
+              selectedIds={selectedIds}
+              onToggleExpand={onToggleExpand}
+              onToggleSelect={onToggleSelect}
+              onAdd={onAdd}
+              onEdit={onEdit}
+              onDelete={onDelete}
+            />
+          ))}
+        </div>
+
+        {/* 빈 상태 */}
+        {departments.length === 0 && (
+          <div className="text-center py-12 text-muted-foreground">
+            등록된 부서가 없습니다
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}
--- a/src/components/hr/DepartmentManagement/DepartmentTreeItem.tsx
+++ b/src/components/hr/DepartmentManagement/DepartmentTreeItem.tsx
@@ -0,0 +1,117 @@
+'use client';
+
+import { Checkbox } from '@/components/ui/checkbox';
+import { Button } from '@/components/ui/button';
+import { ChevronRight, ChevronDown, Plus, Pencil, Trash2 } from 'lucide-react';
+import type { DepartmentTreeItemProps } from './types';
+
+/**
+ * 트리 행 (재귀 렌더링)
+ * - 무제한 깊이 지원
+ * - depth에 따른 동적 들여쓰기
+ */
+export function DepartmentTreeItem({
+  department,
+  depth,
+  expandedIds,
+  selectedIds,
+  onToggleExpand,
+  onToggleSelect,
+  onAdd,
+  onEdit,
+  onDelete
+}: DepartmentTreeItemProps) {
+  const hasChildren = department.children && department.children.length > 0;
+  const isExpanded = expandedIds.has(department.id);
+  const isSelected = selectedIds.has(department.id);
+
+  // 들여쓰기 계산 (depth * 24px)
+  const paddingLeft = depth * 24;
+
+  return (
+    <>
+      {/* 현재 행 */}
+      <div
+        className="group flex items-center px-4 py-3 hover:bg-muted/50 transition-colors"
+        style={{ paddingLeft: `${paddingLeft + 16}px` }}
+      >
+        <div className="flex items-center gap-2 flex-1 min-w-0">
+          {/* 펼침/접힘 버튼 */}
+          <Button
+            variant="ghost"
+            size="sm"
+            className={`h-6 w-6 p-0 ${!hasChildren ? 'invisible' : ''}`}
+            onClick={() => onToggleExpand(department.id)}
+          >
+            {isExpanded ? (
+              <ChevronDown className="h-4 w-4" />
+            ) : (
+              <ChevronRight className="h-4 w-4" />
+            )}
+          </Button>
+
+          {/* 체크박스 */}
+          <Checkbox
+            checked={isSelected}
+            onCheckedChange={() => onToggleSelect(department.id)}
+            aria-label={`${department.name} 선택`}
+          />
+
+          {/* 부서명 */}
+          <span className="truncate">{department.name}</span>
+        </div>
+
+        {/* 작업 버튼 (호버 시 표시) */}
+        <div className="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
+          <Button
+            variant="ghost"
+            size="sm"
+            className="h-7 w-7 p-0"
+            onClick={() => onAdd(department.id)}
+            title="하위 부서 추가"
+          >
+            <Plus className="h-4 w-4" />
+          </Button>
+          <Button
+            variant="ghost"
+            size="sm"
+            className="h-7 w-7 p-0"
+            onClick={() => onEdit(department)}
+            title="수정"
+          >
+            <Pencil className="h-4 w-4" />
+          </Button>
+          <Button
+            variant="ghost"
+            size="sm"
+            className="h-7 w-7 p-0 text-destructive hover:text-destructive"
+            onClick={() => onDelete(department)}
+            title="삭제"
+          >
+            <Trash2 className="h-4 w-4" />
+          </Button>
+        </div>
+      </div>
+
+      {/* 하위 부서 (재귀) */}
+      {hasChildren && isExpanded && (
+        <>
+          {department.children!.map(child => (
+            <DepartmentTreeItem
+              key={child.id}
+              department={child}
+              depth={depth + 1}
+              expandedIds={expandedIds}
+              selectedIds={selectedIds}
+              onToggleExpand={onToggleExpand}
+              onToggleSelect={onToggleSelect}
+              onAdd={onAdd}
+              onEdit={onEdit}
+              onDelete={onDelete}
+            />
+          ))}
+        </>
+      )}
+    </>
+  );
+}
--- a/src/components/hr/DepartmentManagement/index.tsx
+++ b/src/components/hr/DepartmentManagement/index.tsx
@@ -0,0 +1,352 @@
+'use client';
+
+import { useState, useMemo } from 'react';
+import { PageLayout } from '@/components/organisms/PageLayout';
+import { PageHeader } from '@/components/organisms/PageHeader';
+import { Building2 } from 'lucide-react';
+import { DepartmentStats } from './DepartmentStats';
+import { DepartmentToolbar } from './DepartmentToolbar';
+import { DepartmentTree } from './DepartmentTree';
+import { DepartmentDialog } from './DepartmentDialog';
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '@/components/ui/alert-dialog';
+import type { Department } from './types';
+import { countAllDepartments, getAllDepartmentIds, findDepartmentById } from './types';
+
+/**
+ * 무제한 깊이 트리 구조 목업 데이터
+ */
+const mockDepartments: Department[] = [
+  {
+    id: 1,
+    name: '회사명',
+    parentId: null,
+    depth: 0,
+    children: [
+      {
+        id: 2,
+        name: '경영지원본부',
+        parentId: 1,
+        depth: 1,
+        children: [
+          {
+            id: 4,
+            name: '인사팀',
+            parentId: 2,
+            depth: 2,
+            children: [
+              {
+                id: 7,
+                name: '채용파트',
+                parentId: 4,
+                depth: 3,
+                children: [
+                  { id: 10, name: '신입채용셀', parentId: 7, depth: 4, children: [] },
+                  { id: 11, name: '경력채용셀', parentId: 7, depth: 4, children: [] },
+                ]
+              },
+              { id: 8, name: '교육파트', parentId: 4, depth: 3, children: [] },
+            ]
+          },
+          { id: 5, name: '총무팀', parentId: 2, depth: 2, children: [] },
+        ]
+      },
+      {
+        id: 3,
+        name: '개발본부',
+        parentId: 1,
+        depth: 1,
+        children: [
+          { id: 6, name: '프론트엔드팀', parentId: 3, depth: 2, children: [] },
+          { id: 9, name: '백엔드팀', parentId: 3, depth: 2, children: [] },
+        ]
+      },
+    ]
+  }
+];
+
+export function DepartmentManagement() {
+  // 부서 데이터 상태
+  const [departments, setDepartments] = useState<Department[]>(mockDepartments);
+
+  // 선택 상태
+  const [selectedIds, setSelectedIds] = useState<Set<number>>(new Set());
+
+  // 펼침 상태 (기본: 최상위만 펼침)
+  const [expandedIds, setExpandedIds] = useState<Set<number>>(new Set([1]));
+
+  // 검색어
+  const [searchQuery, setSearchQuery] = useState('');
+
+  // 다이얼로그 상태
+  const [dialogOpen, setDialogOpen] = useState(false);
+  const [dialogMode, setDialogMode] = useState<'add' | 'edit'>('add');
+  const [selectedDepartment, setSelectedDepartment] = useState<Department | undefined>();
+  const [parentDepartment, setParentDepartment] = useState<Department | undefined>();
+
+  // 삭제 확인 다이얼로그
+  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
+  const [departmentToDelete, setDepartmentToDelete] = useState<Department | null>(null);
+  const [isBulkDelete, setIsBulkDelete] = useState(false);
+
+  // 전체 부서 수 계산
+  const totalCount = useMemo(() => countAllDepartments(departments), [departments]);
+
+  // 모든 부서 ID
+  const allIds = useMemo(() => getAllDepartmentIds(departments), [departments]);
+
+  // 펼침/접힘 토글
+  const handleToggleExpand = (id: number) => {
+    setExpandedIds(prev => {
+      const next = new Set(prev);
+      if (next.has(id)) {
+        next.delete(id);
+      } else {
+        next.add(id);
+      }
+      return next;
+    });
+  };
+
+  // 선택 토글
+  const handleToggleSelect = (id: number) => {
+    setSelectedIds(prev => {
+      const next = new Set(prev);
+      if (next.has(id)) {
+        next.delete(id);
+      } else {
+        next.add(id);
+      }
+      return next;
+    });
+  };
+
+  // 전체 선택/해제
+  const handleToggleSelectAll = () => {
+    if (selectedIds.size === allIds.length) {
+      setSelectedIds(new Set());
+    } else {
+      setSelectedIds(new Set(allIds));
+    }
+  };
+
+  // 부서 추가 (행 버튼)
+  const handleAdd = (parentId: number) => {
+    const parent = findDepartmentById(departments, parentId);
+    setParentDepartment(parent || undefined);
+    setSelectedDepartment(undefined);
+    setDialogMode('add');
+    setDialogOpen(true);
+  };
+
+  // 부서 추가 (상단 버튼 - 선택된 부서의 하위에 일괄 추가)
+  const handleBulkAdd = () => {
+    if (selectedIds.size === 0) {
+      // 선택된 부서가 없으면 최상위에 추가
+      setParentDepartment(undefined);
+    } else {
+      // 선택된 첫 번째 부서를 부모로 설정
+      const firstSelectedId = Array.from(selectedIds)[0];
+      const parent = findDepartmentById(departments, firstSelectedId);
+      setParentDepartment(parent || undefined);
+    }
+    setSelectedDepartment(undefined);
+    setDialogMode('add');
+    setDialogOpen(true);
+  };
+
+  // 부서 수정
+  const handleEdit = (department: Department) => {
+    setSelectedDepartment(department);
+    setParentDepartment(undefined);
+    setDialogMode('edit');
+    setDialogOpen(true);
+  };
+
+  // 부서 삭제 (단일)
+  const handleDelete = (department: Department) => {
+    setDepartmentToDelete(department);
+    setIsBulkDelete(false);
+    setDeleteDialogOpen(true);
+  };
+
+  // 부서 삭제 (일괄)
+  const handleBulkDelete = () => {
+    if (selectedIds.size === 0) return;
+    setDepartmentToDelete(null);
+    setIsBulkDelete(true);
+    setDeleteDialogOpen(true);
+  };
+
+  // 삭제 확인
+  const confirmDelete = () => {
+    if (isBulkDelete) {
+      // 일괄 삭제 로직
+      setDepartments(prev => deleteDepartmentsRecursive(prev, selectedIds));
+      setSelectedIds(new Set());
+    } else if (departmentToDelete) {
+      // 단일 삭제 로직
+      setDepartments(prev => deleteDepartmentsRecursive(prev, new Set([departmentToDelete.id])));
+      setSelectedIds(prev => {
+        const next = new Set(prev);
+        next.delete(departmentToDelete.id);
+        return next;
+      });
+    }
+    setDeleteDialogOpen(false);
+    setDepartmentToDelete(null);
+  };
+
+  // 재귀적으로 부서 삭제
+  const deleteDepartmentsRecursive = (depts: Department[], idsToDelete: Set<number>): Department[] => {
+    return depts
+      .filter(dept => !idsToDelete.has(dept.id))
+      .map(dept => ({
+        ...dept,
+        children: dept.children ? deleteDepartmentsRecursive(dept.children, idsToDelete) : []
+      }));
+  };
+
+  // 부서 추가/수정 제출
+  const handleDialogSubmit = (name: string) => {
+    if (dialogMode === 'add') {
+      // 새 부서 추가
+      const newId = Math.max(...allIds, 0) + 1;
+      const newDept: Department = {
+        id: newId,
+        name,
+        parentId: parentDepartment?.id || null,
+        depth: parentDepartment ? parentDepartment.depth + 1 : 0,
+        children: []
+      };
+
+      if (parentDepartment) {
+        // 부모 부서의 children에 추가
+        setDepartments(prev => addChildDepartment(prev, parentDepartment.id, newDept));
+      } else {
+        // 최상위에 추가
+        setDepartments(prev => [...prev, newDept]);
+      }
+    } else if (dialogMode === 'edit' && selectedDepartment) {
+      // 부서 수정
+      setDepartments(prev => updateDepartmentName(prev, selectedDepartment.id, name));
+    }
+    setDialogOpen(false);
+  };
+
+  // 재귀적으로 자식 부서 추가
+  const addChildDepartment = (depts: Department[], parentId: number, newDept: Department): Department[] => {
+    return depts.map(dept => {
+      if (dept.id === parentId) {
+        return {
+          ...dept,
+          children: [...(dept.children || []), newDept]
+        };
+      }
+      if (dept.children) {
+        return {
+          ...dept,
+          children: addChildDepartment(dept.children, parentId, newDept)
+        };
+      }
+      return dept;
+    });
+  };
+
+  // 재귀적으로 부서명 업데이트
+  const updateDepartmentName = (depts: Department[], id: number, name: string): Department[] => {
+    return depts.map(dept => {
+      if (dept.id === id) {
+        return { ...dept, name };
+      }
+      if (dept.children) {
+        return {
+          ...dept,
+          children: updateDepartmentName(dept.children, id, name)
+        };
+      }
+      return dept;
+    });
+  };
+
+  return (
+    <PageLayout>
+      <PageHeader
+        title="부서관리"
+        description="부서 정보를 관리합니다"
+        icon={Building2}
+      />
+
+      <div className="space-y-4">
+        {/* 전체 부서 카운트 */}
+        <DepartmentStats totalCount={totalCount} />
+
+        {/* 검색 + 추가/삭제 버튼 */}
+        <DepartmentToolbar
+          totalCount={totalCount}
+          selectedCount={selectedIds.size}
+          searchQuery={searchQuery}
+          onSearchChange={setSearchQuery}
+          onAdd={handleBulkAdd}
+          onDelete={handleBulkDelete}
+        />
+
+        {/* 트리 테이블 */}
+        <DepartmentTree
+          departments={departments}
+          expandedIds={expandedIds}
+          selectedIds={selectedIds}
+          onToggleExpand={handleToggleExpand}
+          onToggleSelect={handleToggleSelect}
+          onToggleSelectAll={handleToggleSelectAll}
+          onAdd={handleAdd}
+          onEdit={handleEdit}
+          onDelete={handleDelete}
+        />
+      </div>
+
+      {/* 추가/수정 다이얼로그 */}
+      <DepartmentDialog
+        isOpen={dialogOpen}
+        onOpenChange={setDialogOpen}
+        mode={dialogMode}
+        parentDepartment={parentDepartment}
+        department={selectedDepartment}
+        onSubmit={handleDialogSubmit}
+      />
+
+      {/* 삭제 확인 다이얼로그 */}
+      <AlertDialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>부서 삭제</AlertDialogTitle>
+            <AlertDialogDescription>
+              {isBulkDelete
+                ? `선택한 부서 ${selectedIds.size}개를 삭제하시겠습니까?`
+                : `"${departmentToDelete?.name}" 부서를 삭제하시겠습니까?`
+              }
+              <br />
+              <span className="text-destructive">
+                삭제된 부서의 인원은 회사(기본) 인원으로 변경됩니다.
+              </span>
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>취소</AlertDialogCancel>
+            <AlertDialogAction onClick={confirmDelete} className="bg-destructive text-destructive-foreground hover:bg-destructive/90">
+              삭제
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </PageLayout>
+  );
+}
--- a/src/components/hr/DepartmentManagement/types.ts
+++ b/src/components/hr/DepartmentManagement/types.ts
@@ -0,0 +1,109 @@
+/**
+ * 부서관리 타입 정의
+ * @description 무제한 깊이 트리 구조 지원
+ */
+
+/**
+ * 부서 데이터 (무제한 깊이 재귀 구조)
+ */
+export interface Department {
+  id: number;
+  name: string;
+  parentId: number | null;
+  depth: number;           // 깊이 (0: 최상위, 1, 2, 3, ... 무제한)
+  children?: Department[]; // 하위 부서 (재귀 - 무제한 깊이)
+}
+
+/**
+ * 부서 추가/수정 다이얼로그 Props
+ */
+export interface DepartmentDialogProps {
+  isOpen: boolean;
+  onOpenChange: (open: boolean) => void;
+  mode: 'add' | 'edit';
+  parentDepartment?: Department;  // 추가 시 부모 부서
+  department?: Department;        // 수정 시 대상 부서
+  onSubmit: (name: string) => void;
+}
+
+/**
+ * 트리 아이템 Props (재귀 렌더링)
+ */
+export interface DepartmentTreeItemProps {
+  department: Department;
+  depth: number;
+  expandedIds: Set<number>;
+  selectedIds: Set<number>;
+  onToggleExpand: (id: number) => void;
+  onToggleSelect: (id: number) => void;
+  onAdd: (parentId: number) => void;
+  onEdit: (department: Department) => void;
+  onDelete: (department: Department) => void;
+}
+
+/**
+ * 부서 통계 Props
+ */
+export interface DepartmentStatsProps {
+  totalCount: number;
+}
+
+/**
+ * 툴바 Props
+ */
+export interface DepartmentToolbarProps {
+  totalCount: number;
+  selectedCount: number;
+  searchQuery: string;
+  onSearchChange: (query: string) => void;
+  onAdd: () => void;
+  onDelete: () => void;
+}
+
+/**
+ * 트리 컨테이너 Props
+ */
+export interface DepartmentTreeProps {
+  departments: Department[];
+  expandedIds: Set<number>;
+  selectedIds: Set<number>;
+  onToggleExpand: (id: number) => void;
+  onToggleSelect: (id: number) => void;
+  onToggleSelectAll: () => void;
+  onAdd: (parentId: number) => void;
+  onEdit: (department: Department) => void;
+  onDelete: (department: Department) => void;
+}
+
+/**
+ * 전체 부서 수 계산 유틸리티 (재귀)
+ */
+export const countAllDepartments = (departments: Department[]): number => {
+  return departments.reduce((count, dept) => {
+    return count + 1 + (dept.children ? countAllDepartments(dept.children) : 0);
+  }, 0);
+};
+
+/**
+ * 모든 부서 ID 추출 유틸리티 (재귀 - 전체 선택용)
+ */
+export const getAllDepartmentIds = (departments: Department[]): number[] => {
+  return departments.flatMap(dept => [
+    dept.id,
+    ...(dept.children ? getAllDepartmentIds(dept.children) : [])
+  ]);
+};
+
+/**
+ * ID로 부서 찾기 (재귀)
+ */
+export const findDepartmentById = (departments: Department[], id: number): Department | null => {
+  for (const dept of departments) {
+    if (dept.id === id) return dept;
+    if (dept.children) {
+      const found = findDepartmentById(dept.children, id);
+      if (found) return found;
+    }
+  }
+  return null;
+};
--- a/src/components/hr/EmployeeManagement/CSVUploadDialog.tsx
+++ b/src/components/hr/EmployeeManagement/CSVUploadDialog.tsx
@@ -0,0 +1,277 @@
+'use client';
+
+import { useState, useCallback, useRef } from 'react';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent } from '@/components/ui/card';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import { Badge } from '@/components/ui/badge';
+import { Upload, FileSpreadsheet, AlertCircle, CheckCircle } from 'lucide-react';
+import type { Employee, CSVEmployeeRow, CSVValidationResult } from './types';
+
+interface CSVUploadDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onUpload: (employees: Employee[]) => void;
+}
+
+export function CSVUploadDialog({
+  open,
+  onOpenChange,
+  onUpload,
+}: CSVUploadDialogProps) {
+  const [file, setFile] = useState<File | null>(null);
+  const [validationResults, setValidationResults] = useState<CSVValidationResult[]>([]);
+  const [isProcessing, setIsProcessing] = useState(false);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  // 파일 선택
+  const handleFileSelect = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+    const selectedFile = e.target.files?.[0];
+    if (selectedFile && selectedFile.type === 'text/csv') {
+      setFile(selectedFile);
+      processCSV(selectedFile);
+    }
+  }, []);
+
+  // CSV 파싱 및 유효성 검사
+  const processCSV = async (csvFile: File) => {
+    setIsProcessing(true);
+    try {
+      const text = await csvFile.text();
+      const lines = text.split('\n').map(line => line.trim()).filter(line => line);
+
+      if (lines.length < 2) {
+        setValidationResults([]);
+        return;
+      }
+
+      // 헤더 파싱
+      const headers = lines[0].split(',').map(h => h.trim());
+
+      // 데이터 파싱 및 유효성 검사
+      const results: CSVValidationResult[] = lines.slice(1).map((line, index) => {
+        const values = line.split(',').map(v => v.trim());
+        const data: CSVEmployeeRow = {
+          name: values[headers.indexOf('이름')] || values[headers.indexOf('name')] || '',
+          phone: values[headers.indexOf('휴대폰')] || values[headers.indexOf('phone')] || undefined,
+          email: values[headers.indexOf('이메일')] || values[headers.indexOf('email')] || undefined,
+          departmentName: values[headers.indexOf('부서')] || values[headers.indexOf('department')] || undefined,
+          positionName: values[headers.indexOf('직책')] || values[headers.indexOf('position')] || undefined,
+          hireDate: values[headers.indexOf('입사일')] || values[headers.indexOf('hireDate')] || undefined,
+          status: values[headers.indexOf('상태')] || values[headers.indexOf('status')] || undefined,
+        };
+
+        // 유효성 검사
+        const errors: string[] = [];
+        if (!data.name) {
+          errors.push('이름은 필수입니다');
+        }
+        if (data.email && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(data.email)) {
+          errors.push('이메일 형식이 올바르지 않습니다');
+        }
+        if (data.phone && !/^\d{3}-\d{4}-\d{4}$/.test(data.phone)) {
+          errors.push('휴대폰 형식이 올바르지 않습니다 (000-0000-0000)');
+        }
+
+        return {
+          row: index + 2, // 1-indexed, 헤더 제외
+          data,
+          isValid: errors.length === 0,
+          errors,
+        };
+      });
+
+      setValidationResults(results);
+    } catch {
+      console.error('CSV 파싱 오류');
+    } finally {
+      setIsProcessing(false);
+    }
+  };
+
+  // 업로드 실행
+  const handleUpload = () => {
+    const validRows = validationResults.filter(r => r.isValid);
+    const employees: Employee[] = validRows.map((r, index) => ({
+      id: String(Date.now() + index),
+      name: r.data.name,
+      phone: r.data.phone,
+      email: r.data.email,
+      status: (r.data.status === '재직' || r.data.status === 'active') ? 'active' :
+              (r.data.status === '휴직' || r.data.status === 'leave') ? 'leave' :
+              (r.data.status === '퇴직' || r.data.status === 'resigned') ? 'resigned' : 'active',
+      hireDate: r.data.hireDate,
+      departmentPositions: r.data.departmentName ? [{
+        id: String(Date.now() + index),
+        departmentId: '',
+        departmentName: r.data.departmentName,
+        positionId: '',
+        positionName: r.data.positionName || '',
+      }] : [],
+      createdAt: new Date().toISOString(),
+      updatedAt: new Date().toISOString(),
+    }));
+
+    onUpload(employees);
+    handleReset();
+  };
+
+  // 초기화
+  const handleReset = () => {
+    setFile(null);
+    setValidationResults([]);
+    if (fileInputRef.current) {
+      fileInputRef.current.value = '';
+    }
+  };
+
+  const validCount = validationResults.filter(r => r.isValid).length;
+  const invalidCount = validationResults.filter(r => !r.isValid).length;
+
+  return (
+    <Dialog open={open} onOpenChange={(open) => { if (!open) handleReset(); onOpenChange(open); }}>
+      <DialogContent className="max-w-4xl max-h-[90vh] overflow-y-auto">
+        <DialogHeader>
+          <DialogTitle>CSV 일괄등록</DialogTitle>
+          <DialogDescription>
+            CSV 파일을 업로드하여 사원을 일괄 등록합니다
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-4 py-4">
+          {/* 파일 업로드 영역 */}
+          {!file && (
+            <Card className="border-dashed">
+              <CardContent className="p-8">
+                <div className="flex flex-col items-center justify-center space-y-4">
+                  <FileSpreadsheet className="w-12 h-12 text-muted-foreground" />
+                  <div className="text-center">
+                    <p className="text-sm text-muted-foreground mb-2">
+                      CSV 파일을 드래그하거나 클릭하여 업로드
+                    </p>
+                    <p className="text-xs text-muted-foreground">
+                      필수 컬럼: 이름 | 선택 컬럼: 휴대폰, 이메일, 부서, 직책, 입사일, 상태
+                    </p>
+                  </div>
+                  <input
+                    ref={fileInputRef}
+                    type="file"
+                    accept=".csv"
+                    onChange={handleFileSelect}
+                    className="hidden"
+                    id="csv-upload"
+                  />
+                  <Button variant="outline" asChild>
+                    <label htmlFor="csv-upload" className="cursor-pointer">
+                      <Upload className="w-4 h-4 mr-2" />
+                      파일 선택
+                    </label>
+                  </Button>
+                </div>
+              </CardContent>
+            </Card>
+          )}
+
+          {/* 파일 정보 및 미리보기 */}
+          {file && (
+            <>
+              <div className="flex items-center justify-between">
+                <div className="flex items-center gap-2">
+                  <FileSpreadsheet className="w-5 h-5 text-muted-foreground" />
+                  <span className="text-sm font-medium">{file.name}</span>
+                </div>
+                <div className="flex items-center gap-4">
+                  <div className="flex items-center gap-2">
+                    <CheckCircle className="w-4 h-4 text-green-500" />
+                    <span className="text-sm">유효: {validCount}건</span>
+                  </div>
+                  {invalidCount > 0 && (
+                    <div className="flex items-center gap-2">
+                      <AlertCircle className="w-4 h-4 text-red-500" />
+                      <span className="text-sm">오류: {invalidCount}건</span>
+                    </div>
+                  )}
+                  <Button variant="ghost" size="sm" onClick={handleReset}>
+                    다시 선택
+                  </Button>
+                </div>
+              </div>
+
+              {/* 미리보기 테이블 */}
+              {validationResults.length > 0 && (
+                <div className="rounded-md border max-h-[400px] overflow-auto">
+                  <Table>
+                    <TableHeader>
+                      <TableRow>
+                        <TableHead className="w-[60px]">행</TableHead>
+                        <TableHead className="w-[80px]">상태</TableHead>
+                        <TableHead>이름</TableHead>
+                        <TableHead>휴대폰</TableHead>
+                        <TableHead>이메일</TableHead>
+                        <TableHead>부서</TableHead>
+                        <TableHead>직책</TableHead>
+                        <TableHead>오류</TableHead>
+                      </TableRow>
+                    </TableHeader>
+                    <TableBody>
+                      {validationResults.map((result) => (
+                        <TableRow
+                          key={result.row}
+                          className={result.isValid ? '' : 'bg-red-50'}
+                        >
+                          <TableCell className="font-medium">{result.row}</TableCell>
+                          <TableCell>
+                            {result.isValid ? (
+                              <Badge className="bg-green-100 text-green-800">유효</Badge>
+                            ) : (
+                              <Badge className="bg-red-100 text-red-800">오류</Badge>
+                            )}
+                          </TableCell>
+                          <TableCell>{result.data.name || '-'}</TableCell>
+                          <TableCell>{result.data.phone || '-'}</TableCell>
+                          <TableCell>{result.data.email || '-'}</TableCell>
+                          <TableCell>{result.data.departmentName || '-'}</TableCell>
+                          <TableCell>{result.data.positionName || '-'}</TableCell>
+                          <TableCell className="text-sm text-red-600">
+                            {result.errors.join(', ')}
+                          </TableCell>
+                        </TableRow>
+                      ))}
+                    </TableBody>
+                  </Table>
+                </div>
+              )}
+            </>
+          )}
+        </div>
+
+        <DialogFooter>
+          <Button variant="outline" onClick={() => onOpenChange(false)}>
+            취소
+          </Button>
+          <Button
+            onClick={handleUpload}
+            disabled={!file || validCount === 0 || isProcessing}
+          >
+            {validCount}건 등록
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
--- a/src/components/hr/EmployeeManagement/CSVUploadPage.tsx
+++ b/src/components/hr/EmployeeManagement/CSVUploadPage.tsx
@@ -0,0 +1,354 @@
+'use client';
+
+import { useState, useCallback, useRef } from 'react';
+import { useRouter } from 'next/navigation';
+import { PageLayout } from '@/components/organisms/PageLayout';
+import { PageHeader } from '@/components/organisms/PageHeader';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Checkbox } from '@/components/ui/checkbox';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import { X, Users, Download } from 'lucide-react';
+import type { Employee, CSVEmployeeRow, CSVValidationResult } from './types';
+
+interface CSVUploadPageProps {
+  onUpload: (employees: Employee[]) => void;
+}
+
+export function CSVUploadPage({ onUpload }: CSVUploadPageProps) {
+  const router = useRouter();
+  const [file, setFile] = useState<File | null>(null);
+  const [validationResults, setValidationResults] = useState<CSVValidationResult[]>([]);
+  const [isProcessing, setIsProcessing] = useState(false);
+  const [selectedRows, setSelectedRows] = useState<Set<number>>(new Set());
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  // 파일 선택
+  const handleFileSelect = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+    const selectedFile = e.target.files?.[0];
+    if (selectedFile) {
+      setFile(selectedFile);
+      setValidationResults([]);
+      setSelectedRows(new Set());
+    }
+  }, []);
+
+  // 파일 제거
+  const handleRemoveFile = useCallback(() => {
+    setFile(null);
+    setValidationResults([]);
+    setSelectedRows(new Set());
+    if (fileInputRef.current) {
+      fileInputRef.current.value = '';
+    }
+  }, []);
+
+  // 파일변환 (CSV 파싱)
+  const handleConvert = async () => {
+    if (!file) return;
+
+    setIsProcessing(true);
+    try {
+      const text = await file.text();
+      const lines = text.split('\n').map(line => line.trim()).filter(line => line);
+
+      if (lines.length < 2) {
+        setValidationResults([]);
+        return;
+      }
+
+      // 헤더 파싱
+      const headers = lines[0].split(',').map(h => h.trim());
+
+      // 데이터 파싱 및 유효성 검사
+      const results: CSVValidationResult[] = lines.slice(1).map((line, index) => {
+        const values = line.split(',').map(v => v.trim());
+        const data: CSVEmployeeRow = {
+          name: values[headers.indexOf('이름')] || values[headers.indexOf('name')] || '',
+          phone: values[headers.indexOf('휴대폰')] || values[headers.indexOf('phone')] || undefined,
+          email: values[headers.indexOf('이메일')] || values[headers.indexOf('email')] || undefined,
+          departmentName: values[headers.indexOf('부서')] || values[headers.indexOf('department')] || undefined,
+          positionName: values[headers.indexOf('직책')] || values[headers.indexOf('position')] || undefined,
+          hireDate: values[headers.indexOf('입사일')] || values[headers.indexOf('hireDate')] || undefined,
+          status: values[headers.indexOf('상태')] || values[headers.indexOf('status')] || undefined,
+        };
+
+        // 유효성 검사
+        const errors: string[] = [];
+        if (!data.name) {
+          errors.push('이름은 필수입니다');
+        }
+        if (data.email && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(data.email)) {
+          errors.push('이메일 형식이 올바르지 않습니다');
+        }
+        if (data.phone && !/^\d{3}-\d{4}-\d{4}$/.test(data.phone)) {
+          errors.push('휴대폰 형식이 올바르지 않습니다 (000-0000-0000)');
+        }
+
+        return {
+          row: index + 2,
+          data,
+          isValid: errors.length === 0,
+          errors,
+        };
+      });
+
+      setValidationResults(results);
+    } catch {
+      console.error('CSV 파싱 오류');
+    } finally {
+      setIsProcessing(false);
+    }
+  };
+
+  // 행 선택
+  const handleSelectRow = useCallback((rowIndex: number, checked: boolean) => {
+    setSelectedRows(prev => {
+      const newSet = new Set(prev);
+      if (checked) {
+        newSet.add(rowIndex);
+      } else {
+        newSet.delete(rowIndex);
+      }
+      return newSet;
+    });
+  }, []);
+
+  // 전체 선택
+  const handleSelectAll = useCallback((checked: boolean) => {
+    if (checked) {
+      const validIndices = validationResults
+        .filter(r => r.isValid)
+        .map((_, index) => index);
+      setSelectedRows(new Set(validIndices));
+    } else {
+      setSelectedRows(new Set());
+    }
+  }, [validationResults]);
+
+  // 양식 다운로드
+  const handleDownloadTemplate = () => {
+    const headers = ['이름', '휴대폰', '이메일', '부서', '직책', '입사일', '상태'];
+    const sampleData = ['홍길동', '010-1234-5678', 'hong@company.com', '개발팀', '팀원', '2024-01-01', '재직'];
+    const csv = [headers.join(','), sampleData.join(',')].join('\n');
+
+    const blob = new Blob(['\uFEFF' + csv], { type: 'text/csv;charset=utf-8;' });
+    const link = document.createElement('a');
+    link.href = URL.createObjectURL(blob);
+    link.download = '사원등록_양식.csv';
+    link.click();
+  };
+
+  // 업로드 실행
+  const handleUpload = () => {
+    const selectedResults = validationResults.filter((_, index) => selectedRows.has(index));
+    const employees: Employee[] = selectedResults.map((r, index) => ({
+      id: String(Date.now() + index),
+      name: r.data.name,
+      phone: r.data.phone,
+      email: r.data.email,
+      status: (r.data.status === '재직' || r.data.status === 'active') ? 'active' :
+              (r.data.status === '휴직' || r.data.status === 'leave') ? 'leave' :
+              (r.data.status === '퇴직' || r.data.status === 'resigned') ? 'resigned' : 'active',
+      hireDate: r.data.hireDate,
+      departmentPositions: r.data.departmentName ? [{
+        id: String(Date.now() + index),
+        departmentId: '',
+        departmentName: r.data.departmentName,
+        positionId: '',
+        positionName: r.data.positionName || '',
+      }] : [],
+      createdAt: new Date().toISOString(),
+      updatedAt: new Date().toISOString(),
+    }));
+
+    onUpload(employees);
+    router.push('/ko/hr/employee-management');
+  };
+
+  const validCount = validationResults.filter(r => r.isValid).length;
+  const isAllSelected = validCount > 0 && selectedRows.size === validCount;
+
+  return (
+    <PageLayout>
+      <PageHeader
+        title="CSV 일괄 등록"
+        description="CSV로 정보를 일괄 등록합니다"
+        icon={Users}
+      />
+
+      <div className="space-y-6">
+        {/* 일괄 등록 카드 */}
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-lg">일괄 등록</CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            {/* CSV 파일 선택 영역 */}
+            <div className="flex items-center gap-4">
+              <div className="flex items-center gap-2">
+                <span className="text-sm font-medium">CSV 파일</span>
+                <span className="text-xs text-muted-foreground">CSV 파일 50MB 이하 가능</span>
+              </div>
+            </div>
+
+            <div className="flex items-center gap-4">
+              {/* 찾기 버튼 */}
+              <input
+                ref={fileInputRef}
+                type="file"
+                accept=".csv"
+                onChange={handleFileSelect}
+                className="hidden"
+                id="csv-file-input"
+              />
+              <Button
+                variant="outline"
+                onClick={() => fileInputRef.current?.click()}
+                className="px-6"
+              >
+                찾기
+              </Button>
+
+              {/* 파일명 표시 */}
+              {file && (
+                <div className="flex items-center gap-2 px-3 py-1.5 border rounded">
+                  <span className="text-sm">{file.name}</span>
+                  <button
+                    onClick={handleRemoveFile}
+                    className="text-muted-foreground hover:text-foreground"
+                  >
+                    <X className="h-4 w-4" />
+                  </button>
+                </div>
+              )}
+
+              {/* 양식 다운로드 버튼 */}
+              <Button
+                variant="outline"
+                onClick={handleDownloadTemplate}
+                className="ml-auto gap-2"
+              >
+                <Download className="h-4 w-4" />
+                양식 다운로드
+              </Button>
+            </div>
+
+            {/* 파일변환 버튼 */}
+            <Button
+              onClick={handleConvert}
+              disabled={!file || isProcessing}
+              className="w-full bg-black hover:bg-black/90 text-white"
+            >
+              파일변환
+            </Button>
+          </CardContent>
+        </Card>
+
+        {/* 테이블 상단 정보 */}
+        {validationResults.length > 0 && (
+          <div className="flex items-center gap-4">
+            <span className="text-sm">
+              총 <strong>{validationResults.length}</strong>건
+            </span>
+            {selectedRows.size > 0 && (
+              <span className="text-sm">
+                {selectedRows.size}건 선택
+              </span>
+            )}
+          </div>
+        )}
+
+        {/* 데이터 테이블 */}
+        <Card>
+          <CardContent className="pt-6">
+            <div className="rounded-md border overflow-x-auto">
+              <Table>
+                <TableHeader>
+                  <TableRow>
+                    <TableHead className="w-[50px] text-center">
+                      <Checkbox
+                        checked={isAllSelected}
+                        onCheckedChange={handleSelectAll}
+                        disabled={validationResults.length === 0}
+                      />
+                    </TableHead>
+                    <TableHead className="w-[60px] text-center">번호</TableHead>
+                    <TableHead className="min-w-[80px]">이름</TableHead>
+                    <TableHead className="min-w-[120px]">휴대폰</TableHead>
+                    <TableHead className="min-w-[150px]">이메일</TableHead>
+                    <TableHead className="min-w-[100px]">부서</TableHead>
+                    <TableHead className="min-w-[100px]">직책</TableHead>
+                    <TableHead className="min-w-[100px]">입사일</TableHead>
+                    <TableHead className="min-w-[80px]">상태</TableHead>
+                    <TableHead className="min-w-[150px]">오류</TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {validationResults.length === 0 ? (
+                    <TableRow>
+                      <TableCell colSpan={10} className="h-24 text-center text-muted-foreground">
+                        파일 선택 및 파일 변환이 필요합니다.
+                      </TableCell>
+                    </TableRow>
+                  ) : (
+                    validationResults.map((result, index) => (
+                      <TableRow
+                        key={result.row}
+                        className={!result.isValid ? 'bg-red-50 hover:bg-red-100' : 'hover:bg-muted/50'}
+                      >
+                        <TableCell className="text-center">
+                          <Checkbox
+                            checked={selectedRows.has(index)}
+                            onCheckedChange={(checked) => handleSelectRow(index, !!checked)}
+                            disabled={!result.isValid}
+                          />
+                        </TableCell>
+                        <TableCell className="text-center text-muted-foreground">
+                          {validationResults.length - index}
+                        </TableCell>
+                        <TableCell>{result.data.name || '-'}</TableCell>
+                        <TableCell>{result.data.phone || '-'}</TableCell>
+                        <TableCell>{result.data.email || '-'}</TableCell>
+                        <TableCell>{result.data.departmentName || '-'}</TableCell>
+                        <TableCell>{result.data.positionName || '-'}</TableCell>
+                        <TableCell>{result.data.hireDate || '-'}</TableCell>
+                        <TableCell>{result.data.status || '-'}</TableCell>
+                        <TableCell>
+                          {result.errors.length > 0 ? (
+                            <span className="text-sm text-red-600">
+                              {result.errors.join(', ')}
+                            </span>
+                          ) : (
+                            <span className="text-sm text-green-600">유효</span>
+                          )}
+                        </TableCell>
+                      </TableRow>
+                    ))
+                  )}
+                </TableBody>
+              </Table>
+            </div>
+          </CardContent>
+        </Card>
+
+        {/* 등록 버튼 */}
+        <Button
+          onClick={handleUpload}
+          disabled={selectedRows.size === 0 || isProcessing}
+          className="w-full"
+          size="lg"
+        >
+          {selectedRows.size > 0 ? `${selectedRows.size}건 등록` : '등록'}
+        </Button>
+      </div>
+    </PageLayout>
+  );
+}
--- a/src/components/hr/EmployeeManagement/EmployeeDetail.tsx
+++ b/src/components/hr/EmployeeManagement/EmployeeDetail.tsx
@@ -0,0 +1,203 @@
+'use client';
+
+import { useRouter } from 'next/navigation';
+import { PageLayout } from '@/components/organisms/PageLayout';
+import { PageHeader } from '@/components/organisms/PageHeader';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { Separator } from '@/components/ui/separator';
+import { Users, ArrowLeft, Edit, Trash2 } from 'lucide-react';
+import type { Employee } from './types';
+import {
+  EMPLOYEE_STATUS_LABELS,
+  EMPLOYEE_STATUS_COLORS,
+  EMPLOYMENT_TYPE_LABELS,
+  GENDER_LABELS,
+  USER_ROLE_LABELS,
+  USER_ACCOUNT_STATUS_LABELS,
+} from './types';
+
+interface EmployeeDetailProps {
+  employee: Employee;
+  onEdit: () => void;
+  onDelete: () => void;
+}
+
+export function EmployeeDetail({ employee, onEdit, onDelete }: EmployeeDetailProps) {
+  const router = useRouter();
+
+  const handleBack = () => {
+    router.push('/ko/hr/employee-management');
+  };
+
+  return (
+    <PageLayout>
+      <PageHeader
+        title="사원 상세"
+        description="사원 정보를 확인합니다"
+        icon={Users}
+      />
+
+      <div className="space-y-6">
+        {/* 기본 정보 */}
+        <Card>
+          <CardHeader className="flex flex-row items-center justify-between">
+            <CardTitle className="text-base">기본 정보</CardTitle>
+            <Badge className={EMPLOYEE_STATUS_COLORS[employee.status]}>
+              {EMPLOYEE_STATUS_LABELS[employee.status]}
+            </Badge>
+          </CardHeader>
+          <CardContent>
+            <dl className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              <div>
+                <dt className="text-sm font-medium text-muted-foreground">이름</dt>
+                <dd className="text-sm mt-1">{employee.name}</dd>
+              </div>
+              {employee.employeeCode && (
+                <div>
+                  <dt className="text-sm font-medium text-muted-foreground">사원코드</dt>
+                  <dd className="text-sm mt-1">{employee.employeeCode}</dd>
+                </div>
+              )}
+              {employee.residentNumber && (
+                <div>
+                  <dt className="text-sm font-medium text-muted-foreground">주민등록번호</dt>
+                  <dd className="text-sm mt-1">{employee.residentNumber}</dd>
+                </div>
+              )}
+              {employee.gender && (
+                <div>
+                  <dt className="text-sm font-medium text-muted-foreground">성별</dt>
+                  <dd className="text-sm mt-1">{GENDER_LABELS[employee.gender]}</dd>
+                </div>
+              )}
+              {employee.phone && (
+                <div>
+                  <dt className="text-sm font-medium text-muted-foreground">휴대폰</dt>
+                  <dd className="text-sm mt-1">{employee.phone}</dd>
+                </div>
+              )}
+              {employee.email && (
+                <div>
+                  <dt className="text-sm font-medium text-muted-foreground">이메일</dt>
+                  <dd className="text-sm mt-1">{employee.email}</dd>
+                </div>
+              )}
+              {employee.salary && (
+                <div>
+                  <dt className="text-sm font-medium text-muted-foreground">연봉</dt>
+                  <dd className="text-sm mt-1">{employee.salary.toLocaleString()}원</dd>
+                </div>
+              )}
+              {employee.bankAccount && (
+                <div className="md:col-span-2">
+                  <dt className="text-sm font-medium text-muted-foreground">급여계좌</dt>
+                  <dd className="text-sm mt-1">
+                    {employee.bankAccount.bankName} {employee.bankAccount.accountNumber} ({employee.bankAccount.accountHolder})
+                  </dd>
+                </div>
+              )}
+              {employee.address && (
+                <div className="md:col-span-2">
+                  <dt className="text-sm font-medium text-muted-foreground">주소</dt>
+                  <dd className="text-sm mt-1">
+                    ({employee.address.zipCode}) {employee.address.address1} {employee.address.address2}
+                  </dd>
+                </div>
+              )}
+            </dl>
+          </CardContent>
+        </Card>
+
+        {/* 인사 정보 */}
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-base">인사 정보</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <dl className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              {employee.hireDate && (
+                <div>
+                  <dt className="text-sm font-medium text-muted-foreground">입사일</dt>
+                  <dd className="text-sm mt-1">{new Date(employee.hireDate).toLocaleDateString('ko-KR')}</dd>
+                </div>
+              )}
+              {employee.employmentType && (
+                <div>
+                  <dt className="text-sm font-medium text-muted-foreground">고용형태</dt>
+                  <dd className="text-sm mt-1">{EMPLOYMENT_TYPE_LABELS[employee.employmentType]}</dd>
+                </div>
+              )}
+              {employee.rank && (
+                <div>
+                  <dt className="text-sm font-medium text-muted-foreground">직급</dt>
+                  <dd className="text-sm mt-1">{employee.rank}</dd>
+                </div>
+              )}
+              {employee.departmentPositions.length > 0 && (
+                <div className="md:col-span-2">
+                  <dt className="text-sm font-medium text-muted-foreground">부서/직책</dt>
+                  <dd className="text-sm mt-1">
+                    <div className="space-y-1">
+                      {employee.departmentPositions.map((dp) => (
+                        <div key={dp.id} className="flex items-center gap-2">
+                          <span>{dp.departmentName}</span>
+                          <span className="text-muted-foreground">-</span>
+                          <span>{dp.positionName}</span>
+                        </div>
+                      ))}
+                    </div>
+                  </dd>
+                </div>
+              )}
+            </dl>
+          </CardContent>
+        </Card>
+
+        {/* 사용자 정보 */}
+        {employee.userInfo && (
+          <Card>
+            <CardHeader>
+              <CardTitle className="text-base">사용자 정보</CardTitle>
+            </CardHeader>
+            <CardContent>
+              <dl className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <div>
+                  <dt className="text-sm font-medium text-muted-foreground">아이디</dt>
+                  <dd className="text-sm mt-1">{employee.userInfo.userId}</dd>
+                </div>
+                <div>
+                  <dt className="text-sm font-medium text-muted-foreground">권한</dt>
+                  <dd className="text-sm mt-1">{USER_ROLE_LABELS[employee.userInfo.role]}</dd>
+                </div>
+                <div>
+                  <dt className="text-sm font-medium text-muted-foreground">계정상태</dt>
+                  <dd className="text-sm mt-1">{USER_ACCOUNT_STATUS_LABELS[employee.userInfo.accountStatus]}</dd>
+                </div>
+              </dl>
+            </CardContent>
+          </Card>
+        )}
+
+        {/* 버튼 영역 */}
+        <div className="flex items-center justify-between">
+          <Button variant="outline" onClick={handleBack}>
+            <ArrowLeft className="w-4 h-4 mr-2" />
+            목록으로
+          </Button>
+          <div className="flex items-center gap-2">
+            <Button variant="outline" onClick={onDelete} className="text-destructive hover:bg-destructive hover:text-destructive-foreground">
+              <Trash2 className="w-4 h-4 mr-2" />
+              삭제
+            </Button>
+            <Button onClick={onEdit}>
+              <Edit className="w-4 h-4 mr-2" />
+              수정
+            </Button>
+          </div>
+        </div>
+      </div>
+    </PageLayout>
+  );
+}
--- a/src/components/hr/EmployeeManagement/EmployeeDialog.tsx
+++ b/src/components/hr/EmployeeManagement/EmployeeDialog.tsx
@@ -0,0 +1,573 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { Separator } from '@/components/ui/separator';
+import { Switch } from '@/components/ui/switch';
+import { Plus, Trash2 } from 'lucide-react';
+import type {
+  EmployeeDialogProps,
+  EmployeeFormData,
+  DepartmentPosition,
+} from './types';
+import {
+  EMPLOYMENT_TYPE_LABELS,
+  GENDER_LABELS,
+  USER_ROLE_LABELS,
+  USER_ACCOUNT_STATUS_LABELS,
+  EMPLOYEE_STATUS_LABELS,
+} from './types';
+
+const initialFormData: EmployeeFormData = {
+  name: '',
+  residentNumber: '',
+  phone: '',
+  email: '',
+  salary: '',
+  bankAccount: { bankName: '', accountNumber: '', accountHolder: '' },
+  profileImage: '',
+  employeeCode: '',
+  gender: '',
+  address: { zipCode: '', address1: '', address2: '' },
+  hireDate: '',
+  employmentType: '',
+  rank: '',
+  status: 'active',
+  departmentPositions: [],
+  hasUserAccount: false,
+  userId: '',
+  password: '',
+  confirmPassword: '',
+  role: 'user',
+  accountStatus: 'active',
+};
+
+export function EmployeeDialog({
+  open,
+  onOpenChange,
+  mode,
+  employee,
+  onSave,
+  fieldSettings,
+}: EmployeeDialogProps) {
+  const [formData, setFormData] = useState<EmployeeFormData>(initialFormData);
+
+  // 모드별 타이틀
+  const title = {
+    create: '사원 등록',
+    edit: '사원 수정',
+    view: '사원 상세',
+  }[mode];
+
+  const isViewMode = mode === 'view';
+
+  // 데이터 초기화
+  useEffect(() => {
+    if (open && employee && mode !== 'create') {
+      setFormData({
+        name: employee.name,
+        residentNumber: employee.residentNumber || '',
+        phone: employee.phone || '',
+        email: employee.email || '',
+        salary: employee.salary?.toString() || '',
+        bankAccount: employee.bankAccount || { bankName: '', accountNumber: '', accountHolder: '' },
+        profileImage: employee.profileImage || '',
+        employeeCode: employee.employeeCode || '',
+        gender: employee.gender || '',
+        address: employee.address || { zipCode: '', address1: '', address2: '' },
+        hireDate: employee.hireDate || '',
+        employmentType: employee.employmentType || '',
+        rank: employee.rank || '',
+        status: employee.status,
+        departmentPositions: employee.departmentPositions || [],
+        hasUserAccount: !!employee.userInfo,
+        userId: employee.userInfo?.userId || '',
+        password: '',
+        confirmPassword: '',
+        role: employee.userInfo?.role || 'user',
+        accountStatus: employee.userInfo?.accountStatus || 'active',
+      });
+    } else if (open && mode === 'create') {
+      setFormData(initialFormData);
+    }
+  }, [open, employee, mode]);
+
+  // 입력 변경 핸들러
+  const handleChange = (field: keyof EmployeeFormData, value: unknown) => {
+    setFormData(prev => ({ ...prev, [field]: value }));
+  };
+
+  // 부서/직책 추가
+  const handleAddDepartmentPosition = () => {
+    const newDP: DepartmentPosition = {
+      id: String(Date.now()),
+      departmentId: '',
+      departmentName: '',
+      positionId: '',
+      positionName: '',
+    };
+    setFormData(prev => ({
+      ...prev,
+      departmentPositions: [...prev.departmentPositions, newDP],
+    }));
+  };
+
+  // 부서/직책 삭제
+  const handleRemoveDepartmentPosition = (id: string) => {
+    setFormData(prev => ({
+      ...prev,
+      departmentPositions: prev.departmentPositions.filter(dp => dp.id !== id),
+    }));
+  };
+
+  // 부서/직책 변경
+  const handleDepartmentPositionChange = (id: string, field: keyof DepartmentPosition, value: string) => {
+    setFormData(prev => ({
+      ...prev,
+      departmentPositions: prev.departmentPositions.map(dp =>
+        dp.id === id ? { ...dp, [field]: value } : dp
+      ),
+    }));
+  };
+
+  // 저장
+  const handleSubmit = () => {
+    onSave(formData);
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto">
+        <DialogHeader>
+          <DialogTitle>{title}</DialogTitle>
+          <DialogDescription>
+            {mode === 'create' ? '새로운 사원 정보를 입력합니다' : '사원 정보를 확인/수정합니다'}
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-6 py-4">
+          {/* 기본 사원정보 */}
+          <div className="space-y-4">
+            <h3 className="text-sm font-semibold">기본 정보</h3>
+
+            <div className="grid grid-cols-2 gap-4">
+              <div className="space-y-2">
+                <Label htmlFor="name">이름 *</Label>
+                <Input
+                  id="name"
+                  value={formData.name}
+                  onChange={(e) => handleChange('name', e.target.value)}
+                  disabled={isViewMode}
+                  placeholder="이름을 입력하세요"
+                />
+              </div>
+
+              <div className="space-y-2">
+                <Label htmlFor="residentNumber">주민등록번호</Label>
+                <Input
+                  id="residentNumber"
+                  value={formData.residentNumber}
+                  onChange={(e) => handleChange('residentNumber', e.target.value)}
+                  disabled={isViewMode}
+                  placeholder="000000-0000000"
+                />
+              </div>
+
+              <div className="space-y-2">
+                <Label htmlFor="phone">휴대폰</Label>
+                <Input
+                  id="phone"
+                  value={formData.phone}
+                  onChange={(e) => handleChange('phone', e.target.value)}
+                  disabled={isViewMode}
+                  placeholder="010-0000-0000"
+                />
+              </div>
+
+              <div className="space-y-2">
+                <Label htmlFor="email">이메일</Label>
+                <Input
+                  id="email"
+                  type="email"
+                  value={formData.email}
+                  onChange={(e) => handleChange('email', e.target.value)}
+                  disabled={isViewMode}
+                  placeholder="email@company.com"
+                />
+              </div>
+
+              <div className="space-y-2">
+                <Label htmlFor="salary">연봉</Label>
+                <Input
+                  id="salary"
+                  type="number"
+                  value={formData.salary}
+                  onChange={(e) => handleChange('salary', e.target.value)}
+                  disabled={isViewMode}
+                  placeholder="연봉 (원)"
+                />
+              </div>
+            </div>
+
+            {/* 급여 계좌 */}
+            <div className="space-y-2">
+              <Label>급여계좌</Label>
+              <div className="grid grid-cols-3 gap-2">
+                <Input
+                  value={formData.bankAccount.bankName}
+                  onChange={(e) => handleChange('bankAccount', { ...formData.bankAccount, bankName: e.target.value })}
+                  disabled={isViewMode}
+                  placeholder="은행명"
+                />
+                <Input
+                  value={formData.bankAccount.accountNumber}
+                  onChange={(e) => handleChange('bankAccount', { ...formData.bankAccount, accountNumber: e.target.value })}
+                  disabled={isViewMode}
+                  placeholder="계좌번호"
+                />
+                <Input
+                  value={formData.bankAccount.accountHolder}
+                  onChange={(e) => handleChange('bankAccount', { ...formData.bankAccount, accountHolder: e.target.value })}
+                  disabled={isViewMode}
+                  placeholder="예금주"
+                />
+              </div>
+            </div>
+          </div>
+
+          <Separator />
+
+          {/* 선택적 필드 (설정에 따라 표시) */}
+          {(fieldSettings.showEmployeeCode || fieldSettings.showGender || fieldSettings.showAddress) && (
+            <>
+              <div className="space-y-4">
+                <h3 className="text-sm font-semibold">추가 정보</h3>
+
+                <div className="grid grid-cols-2 gap-4">
+                  {fieldSettings.showEmployeeCode && (
+                    <div className="space-y-2">
+                      <Label htmlFor="employeeCode">사원코드</Label>
+                      <Input
+                        id="employeeCode"
+                        value={formData.employeeCode}
+                        onChange={(e) => handleChange('employeeCode', e.target.value)}
+                        disabled={isViewMode}
+                        placeholder="자동생성 또는 직접입력"
+                      />
+                    </div>
+                  )}
+
+                  {fieldSettings.showGender && (
+                    <div className="space-y-2">
+                      <Label htmlFor="gender">성별</Label>
+                      <Select
+                        value={formData.gender}
+                        onValueChange={(value) => handleChange('gender', value)}
+                        disabled={isViewMode}
+                      >
+                        <SelectTrigger>
+                          <SelectValue placeholder="성별 선택" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          {Object.entries(GENDER_LABELS).map(([value, label]) => (
+                            <SelectItem key={value} value={value}>{label}</SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                    </div>
+                  )}
+                </div>
+
+                {fieldSettings.showAddress && (
+                  <div className="space-y-2">
+                    <Label>주소</Label>
+                    <div className="flex gap-2">
+                      <Input
+                        value={formData.address.zipCode}
+                        onChange={(e) => handleChange('address', { ...formData.address, zipCode: e.target.value })}
+                        disabled={isViewMode}
+                        placeholder="우편번호"
+                        className="w-32"
+                      />
+                      <Button variant="outline" size="sm" disabled={isViewMode}>
+                        우편번호 찾기
+                      </Button>
+                    </div>
+                    <Input
+                      value={formData.address.address1}
+                      onChange={(e) => handleChange('address', { ...formData.address, address1: e.target.value })}
+                      disabled={isViewMode}
+                      placeholder="기본주소"
+                    />
+                    <Input
+                      value={formData.address.address2}
+                      onChange={(e) => handleChange('address', { ...formData.address, address2: e.target.value })}
+                      disabled={isViewMode}
+                      placeholder="상세주소"
+                    />
+                  </div>
+                )}
+              </div>
+
+              <Separator />
+            </>
+          )}
+
+          {/* 인사 정보 */}
+          <div className="space-y-4">
+            <h3 className="text-sm font-semibold">인사 정보</h3>
+
+            <div className="grid grid-cols-2 gap-4">
+              {fieldSettings.showHireDate && (
+                <div className="space-y-2">
+                  <Label htmlFor="hireDate">입사일</Label>
+                  <Input
+                    id="hireDate"
+                    type="date"
+                    value={formData.hireDate}
+                    onChange={(e) => handleChange('hireDate', e.target.value)}
+                    disabled={isViewMode}
+                  />
+                </div>
+              )}
+
+              {fieldSettings.showEmploymentType && (
+                <div className="space-y-2">
+                  <Label htmlFor="employmentType">고용형태</Label>
+                  <Select
+                    value={formData.employmentType}
+                    onValueChange={(value) => handleChange('employmentType', value)}
+                    disabled={isViewMode}
+                  >
+                    <SelectTrigger>
+                      <SelectValue placeholder="고용형태 선택" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {Object.entries(EMPLOYMENT_TYPE_LABELS).map(([value, label]) => (
+                        <SelectItem key={value} value={value}>{label}</SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </div>
+              )}
+
+              {fieldSettings.showRank && (
+                <div className="space-y-2">
+                  <Label htmlFor="rank">직급</Label>
+                  <Input
+                    id="rank"
+                    value={formData.rank}
+                    onChange={(e) => handleChange('rank', e.target.value)}
+                    disabled={isViewMode}
+                    placeholder="직급 입력"
+                  />
+                </div>
+              )}
+
+              {fieldSettings.showStatus && (
+                <div className="space-y-2">
+                  <Label htmlFor="status">상태</Label>
+                  <Select
+                    value={formData.status}
+                    onValueChange={(value) => handleChange('status', value)}
+                    disabled={isViewMode}
+                  >
+                    <SelectTrigger>
+                      <SelectValue placeholder="상태 선택" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {Object.entries(EMPLOYEE_STATUS_LABELS).map(([value, label]) => (
+                        <SelectItem key={value} value={value}>{label}</SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </div>
+              )}
+            </div>
+
+            {/* 부서/직책 (복수 가능) */}
+            {(fieldSettings.showDepartment || fieldSettings.showPosition) && (
+              <div className="space-y-2">
+                <div className="flex items-center justify-between">
+                  <Label>부서/직책</Label>
+                  {!isViewMode && (
+                    <Button
+                      type="button"
+                      variant="outline"
+                      size="sm"
+                      onClick={handleAddDepartmentPosition}
+                    >
+                      <Plus className="w-4 h-4 mr-1" />
+                      추가
+                    </Button>
+                  )}
+                </div>
+
+                {formData.departmentPositions.length === 0 ? (
+                  <p className="text-sm text-muted-foreground">부서/직책을 추가해주세요</p>
+                ) : (
+                  <div className="space-y-2">
+                    {formData.departmentPositions.map((dp) => (
+                      <div key={dp.id} className="flex items-center gap-2">
+                        <Input
+                          value={dp.departmentName}
+                          onChange={(e) => handleDepartmentPositionChange(dp.id, 'departmentName', e.target.value)}
+                          disabled={isViewMode}
+                          placeholder="부서명"
+                          className="flex-1"
+                        />
+                        <Input
+                          value={dp.positionName}
+                          onChange={(e) => handleDepartmentPositionChange(dp.id, 'positionName', e.target.value)}
+                          disabled={isViewMode}
+                          placeholder="직책"
+                          className="flex-1"
+                        />
+                        {!isViewMode && (
+                          <Button
+                            type="button"
+                            variant="ghost"
+                            size="sm"
+                            onClick={() => handleRemoveDepartmentPosition(dp.id)}
+                          >
+                            <Trash2 className="w-4 h-4 text-destructive" />
+                          </Button>
+                        )}
+                      </div>
+                    ))}
+                  </div>
+                )}
+              </div>
+            )}
+          </div>
+
+          <Separator />
+
+          {/* 사용자 정보 */}
+          <div className="space-y-4">
+            <div className="flex items-center justify-between">
+              <h3 className="text-sm font-semibold">사용자 정보</h3>
+              {!isViewMode && (
+                <div className="flex items-center gap-2">
+                  <Switch
+                    id="hasUserAccount"
+                    checked={formData.hasUserAccount}
+                    onCheckedChange={(checked) => handleChange('hasUserAccount', checked)}
+                  />
+                  <Label htmlFor="hasUserAccount" className="text-sm">
+                    사용자 계정 생성
+                  </Label>
+                </div>
+              )}
+            </div>
+
+            {(formData.hasUserAccount || (isViewMode && employee?.userInfo)) && (
+              <div className="grid grid-cols-2 gap-4">
+                <div className="space-y-2">
+                  <Label htmlFor="userId">아이디 *</Label>
+                  <Input
+                    id="userId"
+                    value={formData.userId}
+                    onChange={(e) => handleChange('userId', e.target.value)}
+                    disabled={isViewMode}
+                    placeholder="사용자 아이디"
+                  />
+                </div>
+
+                {!isViewMode && mode === 'create' && (
+                  <>
+                    <div className="space-y-2">
+                      <Label htmlFor="password">비밀번호 *</Label>
+                      <Input
+                        id="password"
+                        type="password"
+                        value={formData.password}
+                        onChange={(e) => handleChange('password', e.target.value)}
+                        placeholder="비밀번호"
+                      />
+                    </div>
+
+                    <div className="space-y-2">
+                      <Label htmlFor="confirmPassword">비밀번호 확인</Label>
+                      <Input
+                        id="confirmPassword"
+                        type="password"
+                        value={formData.confirmPassword}
+                        onChange={(e) => handleChange('confirmPassword', e.target.value)}
+                        placeholder="비밀번호 확인"
+                      />
+                    </div>
+                  </>
+                )}
+
+                <div className="space-y-2">
+                  <Label htmlFor="role">권한</Label>
+                  <Select
+                    value={formData.role}
+                    onValueChange={(value) => handleChange('role', value)}
+                    disabled={isViewMode}
+                  >
+                    <SelectTrigger>
+                      <SelectValue placeholder="권한 선택" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {Object.entries(USER_ROLE_LABELS).map(([value, label]) => (
+                        <SelectItem key={value} value={value}>{label}</SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </div>
+
+                <div className="space-y-2">
+                  <Label htmlFor="accountStatus">계정상태</Label>
+                  <Select
+                    value={formData.accountStatus}
+                    onValueChange={(value) => handleChange('accountStatus', value)}
+                    disabled={isViewMode}
+                  >
+                    <SelectTrigger>
+                      <SelectValue placeholder="상태 선택" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {Object.entries(USER_ACCOUNT_STATUS_LABELS).map(([value, label]) => (
+                        <SelectItem key={value} value={value}>{label}</SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </div>
+              </div>
+            )}
+          </div>
+        </div>
+
+        <DialogFooter>
+          <Button variant="outline" onClick={() => onOpenChange(false)}>
+            {isViewMode ? '닫기' : '취소'}
+          </Button>
+          {!isViewMode && (
+            <Button onClick={handleSubmit}>
+              {mode === 'create' ? '등록' : '저장'}
+            </Button>
+          )}
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
--- a/src/components/hr/EmployeeManagement/EmployeeForm.tsx
+++ b/src/components/hr/EmployeeManagement/EmployeeForm.tsx
@@ -0,0 +1,628 @@
+'use client';
+
+import { useState, useEffect, useRef } from 'react';
+import { useRouter } from 'next/navigation';
+import Image from 'next/image';
+import { PageLayout } from '@/components/organisms/PageLayout';
+import { PageHeader } from '@/components/organisms/PageHeader';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { Switch } from '@/components/ui/switch';
+import { Users, Plus, Trash2, ArrowLeft, Save, Camera, User } from 'lucide-react';
+import type {
+  Employee,
+  EmployeeFormData,
+  DepartmentPosition,
+  FieldSettings,
+} from './types';
+import {
+  EMPLOYMENT_TYPE_LABELS,
+  GENDER_LABELS,
+  USER_ROLE_LABELS,
+  USER_ACCOUNT_STATUS_LABELS,
+  EMPLOYEE_STATUS_LABELS,
+  DEFAULT_FIELD_SETTINGS,
+} from './types';
+
+interface EmployeeFormProps {
+  mode: 'create' | 'edit';
+  employee?: Employee;
+  onSave: (data: EmployeeFormData) => void;
+  fieldSettings?: FieldSettings;
+}
+
+const initialFormData: EmployeeFormData = {
+  name: '',
+  residentNumber: '',
+  phone: '',
+  email: '',
+  salary: '',
+  bankAccount: { bankName: '', accountNumber: '', accountHolder: '' },
+  profileImage: '',
+  employeeCode: '',
+  gender: '',
+  address: { zipCode: '', address1: '', address2: '' },
+  hireDate: '',
+  employmentType: '',
+  rank: '',
+  status: 'active',
+  departmentPositions: [],
+  hasUserAccount: false,
+  userId: '',
+  password: '',
+  confirmPassword: '',
+  role: 'user',
+  accountStatus: 'active',
+};
+
+export function EmployeeForm({
+  mode,
+  employee,
+  onSave,
+  fieldSettings = DEFAULT_FIELD_SETTINGS,
+}: EmployeeFormProps) {
+  const router = useRouter();
+  const [formData, setFormData] = useState<EmployeeFormData>(initialFormData);
+  const [previewImage, setPreviewImage] = useState<string | null>(null);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const title = mode === 'create' ? '사원 등록' : '사원 수정';
+
+  // 데이터 초기화
+  useEffect(() => {
+    if (employee && mode === 'edit') {
+      setFormData({
+        name: employee.name,
+        residentNumber: employee.residentNumber || '',
+        phone: employee.phone || '',
+        email: employee.email || '',
+        salary: employee.salary?.toString() || '',
+        bankAccount: employee.bankAccount || { bankName: '', accountNumber: '', accountHolder: '' },
+        profileImage: employee.profileImage || '',
+        employeeCode: employee.employeeCode || '',
+        gender: employee.gender || '',
+        address: employee.address || { zipCode: '', address1: '', address2: '' },
+        hireDate: employee.hireDate || '',
+        employmentType: employee.employmentType || '',
+        rank: employee.rank || '',
+        status: employee.status,
+        departmentPositions: employee.departmentPositions || [],
+        hasUserAccount: !!employee.userInfo,
+        userId: employee.userInfo?.userId || '',
+        password: '',
+        confirmPassword: '',
+        role: employee.userInfo?.role || 'user',
+        accountStatus: employee.userInfo?.accountStatus || 'active',
+      });
+    }
+  }, [employee, mode]);
+
+  // 입력 변경 핸들러
+  const handleChange = (field: keyof EmployeeFormData, value: unknown) => {
+    setFormData(prev => ({ ...prev, [field]: value }));
+  };
+
+  // 부서/직책 추가
+  const handleAddDepartmentPosition = () => {
+    const newDP: DepartmentPosition = {
+      id: String(Date.now()),
+      departmentId: '',
+      departmentName: '',
+      positionId: '',
+      positionName: '',
+    };
+    setFormData(prev => ({
+      ...prev,
+      departmentPositions: [...prev.departmentPositions, newDP],
+    }));
+  };
+
+  // 부서/직책 삭제
+  const handleRemoveDepartmentPosition = (id: string) => {
+    setFormData(prev => ({
+      ...prev,
+      departmentPositions: prev.departmentPositions.filter(dp => dp.id !== id),
+    }));
+  };
+
+  // 부서/직책 변경
+  const handleDepartmentPositionChange = (id: string, field: keyof DepartmentPosition, value: string) => {
+    setFormData(prev => ({
+      ...prev,
+      departmentPositions: prev.departmentPositions.map(dp =>
+        dp.id === id ? { ...dp, [field]: value } : dp
+      ),
+    }));
+  };
+
+  // 저장
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    onSave(formData);
+  };
+
+  // 취소
+  const handleCancel = () => {
+    router.back();
+  };
+
+  // 프로필 이미지 업로드 핸들러
+  const handleImageUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (file) {
+      const reader = new FileReader();
+      reader.onloadend = () => {
+        setPreviewImage(reader.result as string);
+        handleChange('profileImage', reader.result as string);
+      };
+      reader.readAsDataURL(file);
+    }
+  };
+
+  // 프로필 이미지 삭제 핸들러
+  const handleRemoveImage = () => {
+    setPreviewImage(null);
+    handleChange('profileImage', '');
+    if (fileInputRef.current) {
+      fileInputRef.current.value = '';
+    }
+  };
+
+  return (
+    <PageLayout>
+      <PageHeader
+        title={title}
+        description={mode === 'create' ? '새로운 사원 정보를 입력합니다' : '사원 정보를 수정합니다'}
+        icon={Users}
+      />
+
+      <form onSubmit={handleSubmit} className="space-y-6">
+        {/* 사원 정보 - 프로필 사진 + 기본 정보 */}
+        <Card>
+          <CardHeader className="bg-black text-white rounded-t-lg">
+            <CardTitle className="text-base font-medium">사원 정보</CardTitle>
+          </CardHeader>
+          <CardContent className="pt-6">
+            <div className="flex flex-col md:flex-row gap-6">
+              {/* 프로필 사진 영역 */}
+              {fieldSettings.showProfileImage && (
+                <div className="flex flex-col items-center gap-3">
+                  <div className="relative w-32 h-32 rounded-full border-2 border-dashed border-gray-300 bg-gray-50 flex items-center justify-center overflow-hidden">
+                    {previewImage || formData.profileImage ? (
+                      <Image
+                        src={previewImage || formData.profileImage}
+                        alt="프로필 사진"
+                        fill
+                        className="object-cover"
+                      />
+                    ) : (
+                      <User className="w-12 h-12 text-gray-400" />
+                    )}
+                  </div>
+                  <div className="flex gap-2">
+                    <input
+                      ref={fileInputRef}
+                      type="file"
+                      accept="image/*"
+                      onChange={handleImageUpload}
+                      className="hidden"
+                      id="profile-image-input"
+                    />
+                    <Button
+                      type="button"
+                      variant="outline"
+                      size="sm"
+                      onClick={() => fileInputRef.current?.click()}
+                    >
+                      <Camera className="w-4 h-4 mr-1" />
+                      사진 등록
+                    </Button>
+                    {(previewImage || formData.profileImage) && (
+                      <Button
+                        type="button"
+                        variant="ghost"
+                        size="sm"
+                        onClick={handleRemoveImage}
+                      >
+                        <Trash2 className="w-4 h-4" />
+                      </Button>
+                    )}
+                  </div>
+                </div>
+              )}
+
+              {/* 기본 정보 필드들 */}
+              <div className="flex-1 grid grid-cols-1 md:grid-cols-2 gap-4">
+                <div className="space-y-2">
+                  <Label htmlFor="name">이름 *</Label>
+                  <Input
+                    id="name"
+                    value={formData.name}
+                    onChange={(e) => handleChange('name', e.target.value)}
+                    placeholder="이름을 입력하세요"
+                    required
+                  />
+                </div>
+
+                <div className="space-y-2">
+                  <Label htmlFor="residentNumber">주민등록번호</Label>
+                  <Input
+                    id="residentNumber"
+                    value={formData.residentNumber}
+                    onChange={(e) => handleChange('residentNumber', e.target.value)}
+                    placeholder="000000-0000000"
+                  />
+                </div>
+
+                <div className="space-y-2">
+                  <Label htmlFor="phone">휴대폰</Label>
+                  <Input
+                    id="phone"
+                    value={formData.phone}
+                    onChange={(e) => handleChange('phone', e.target.value)}
+                    placeholder="010-0000-0000"
+                  />
+                </div>
+
+                <div className="space-y-2">
+                  <Label htmlFor="email">이메일</Label>
+                  <Input
+                    id="email"
+                    type="email"
+                    value={formData.email}
+                    onChange={(e) => handleChange('email', e.target.value)}
+                    placeholder="email@company.com"
+                  />
+                </div>
+
+                <div className="space-y-2">
+                  <Label htmlFor="salary">연봉</Label>
+                  <Input
+                    id="salary"
+                    type="number"
+                    value={formData.salary}
+                    onChange={(e) => handleChange('salary', e.target.value)}
+                    placeholder="연봉 (원)"
+                  />
+                </div>
+              </div>
+            </div>
+
+            {/* 급여 계좌 */}
+            <div className="space-y-2 mt-6">
+              <Label>급여계좌</Label>
+              <div className="grid grid-cols-1 md:grid-cols-3 gap-2">
+                <Input
+                  value={formData.bankAccount.bankName}
+                  onChange={(e) => handleChange('bankAccount', { ...formData.bankAccount, bankName: e.target.value })}
+                  placeholder="은행명"
+                />
+                <Input
+                  value={formData.bankAccount.accountNumber}
+                  onChange={(e) => handleChange('bankAccount', { ...formData.bankAccount, accountNumber: e.target.value })}
+                  placeholder="계좌번호"
+                />
+                <Input
+                  value={formData.bankAccount.accountHolder}
+                  onChange={(e) => handleChange('bankAccount', { ...formData.bankAccount, accountHolder: e.target.value })}
+                  placeholder="예금주"
+                />
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+
+        {/* 선택 정보 (사원 상세) */}
+        {(fieldSettings.showEmployeeCode || fieldSettings.showGender || fieldSettings.showAddress) && (
+          <Card>
+            <CardHeader className="bg-black text-white rounded-t-lg">
+              <CardTitle className="text-base font-medium">선택 정보</CardTitle>
+            </CardHeader>
+            <CardContent className="pt-6 space-y-4">
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                {fieldSettings.showEmployeeCode && (
+                  <div className="space-y-2">
+                    <Label htmlFor="employeeCode">사원코드</Label>
+                    <Input
+                      id="employeeCode"
+                      value={formData.employeeCode}
+                      onChange={(e) => handleChange('employeeCode', e.target.value)}
+                      placeholder="자동생성 또는 직접입력"
+                    />
+                  </div>
+                )}
+
+                {fieldSettings.showGender && (
+                  <div className="space-y-2">
+                    <Label htmlFor="gender">성별</Label>
+                    <Select
+                      value={formData.gender}
+                      onValueChange={(value) => handleChange('gender', value)}
+                    >
+                      <SelectTrigger>
+                        <SelectValue placeholder="성별 선택" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {Object.entries(GENDER_LABELS).map(([value, label]) => (
+                          <SelectItem key={value} value={value}>{label}</SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                )}
+              </div>
+
+              {fieldSettings.showAddress && (
+                <div className="space-y-2">
+                  <Label>주소</Label>
+                  <div className="flex gap-2">
+                    <Input
+                      value={formData.address.zipCode}
+                      onChange={(e) => handleChange('address', { ...formData.address, zipCode: e.target.value })}
+                      placeholder="우편번호"
+                      className="w-32"
+                    />
+                    <Button type="button" variant="outline" size="sm">
+                      우편번호 찾기
+                    </Button>
+                  </div>
+                  <Input
+                    value={formData.address.address1}
+                    onChange={(e) => handleChange('address', { ...formData.address, address1: e.target.value })}
+                    placeholder="기본주소"
+                  />
+                  <Input
+                    value={formData.address.address2}
+                    onChange={(e) => handleChange('address', { ...formData.address, address2: e.target.value })}
+                    placeholder="상세주소"
+                  />
+                </div>
+              )}
+            </CardContent>
+          </Card>
+        )}
+
+        {/* 인사 정보 */}
+        <Card>
+          <CardHeader className="bg-black text-white rounded-t-lg">
+            <CardTitle className="text-base font-medium">인사 정보</CardTitle>
+          </CardHeader>
+          <CardContent className="pt-6 space-y-4">
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              {fieldSettings.showHireDate && (
+                <div className="space-y-2">
+                  <Label htmlFor="hireDate">입사일</Label>
+                  <Input
+                    id="hireDate"
+                    type="date"
+                    value={formData.hireDate}
+                    onChange={(e) => handleChange('hireDate', e.target.value)}
+                  />
+                </div>
+              )}
+
+              {fieldSettings.showEmploymentType && (
+                <div className="space-y-2">
+                  <Label htmlFor="employmentType">고용형태</Label>
+                  <Select
+                    value={formData.employmentType}
+                    onValueChange={(value) => handleChange('employmentType', value)}
+                  >
+                    <SelectTrigger>
+                      <SelectValue placeholder="고용형태 선택" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {Object.entries(EMPLOYMENT_TYPE_LABELS).map(([value, label]) => (
+                        <SelectItem key={value} value={value}>{label}</SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </div>
+              )}
+
+              {fieldSettings.showRank && (
+                <div className="space-y-2">
+                  <Label htmlFor="rank">직급</Label>
+                  <Input
+                    id="rank"
+                    value={formData.rank}
+                    onChange={(e) => handleChange('rank', e.target.value)}
+                    placeholder="직급 입력"
+                  />
+                </div>
+              )}
+
+              {fieldSettings.showStatus && (
+                <div className="space-y-2">
+                  <Label htmlFor="status">상태</Label>
+                  <Select
+                    value={formData.status}
+                    onValueChange={(value) => handleChange('status', value)}
+                  >
+                    <SelectTrigger>
+                      <SelectValue placeholder="상태 선택" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {Object.entries(EMPLOYEE_STATUS_LABELS).map(([value, label]) => (
+                        <SelectItem key={value} value={value}>{label}</SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </div>
+              )}
+            </div>
+
+            {/* 부서/직책 */}
+            {(fieldSettings.showDepartment || fieldSettings.showPosition) && (
+              <div className="space-y-2">
+                <div className="flex items-center justify-between">
+                  <Label>부서/직책</Label>
+                  <Button
+                    type="button"
+                    variant="outline"
+                    size="sm"
+                    onClick={handleAddDepartmentPosition}
+                  >
+                    <Plus className="w-4 h-4 mr-1" />
+                    추가
+                  </Button>
+                </div>
+
+                {formData.departmentPositions.length === 0 ? (
+                  <p className="text-sm text-muted-foreground py-4 text-center border rounded-md">
+                    부서/직책을 추가해주세요
+                  </p>
+                ) : (
+                  <div className="space-y-2">
+                    {formData.departmentPositions.map((dp) => (
+                      <div key={dp.id} className="flex items-center gap-2">
+                        <Input
+                          value={dp.departmentName}
+                          onChange={(e) => handleDepartmentPositionChange(dp.id, 'departmentName', e.target.value)}
+                          placeholder="부서명"
+                          className="flex-1"
+                        />
+                        <Input
+                          value={dp.positionName}
+                          onChange={(e) => handleDepartmentPositionChange(dp.id, 'positionName', e.target.value)}
+                          placeholder="직책"
+                          className="flex-1"
+                        />
+                        <Button
+                          type="button"
+                          variant="ghost"
+                          size="sm"
+                          onClick={() => handleRemoveDepartmentPosition(dp.id)}
+                        >
+                          <Trash2 className="w-4 h-4 text-destructive" />
+                        </Button>
+                      </div>
+                    ))}
+                  </div>
+                )}
+              </div>
+            )}
+          </CardContent>
+        </Card>
+
+        {/* 사용자 정보 */}
+        <Card>
+          <CardHeader className="bg-black text-white rounded-t-lg">
+            <div className="flex items-center justify-between">
+              <CardTitle className="text-base font-medium">사용자 정보</CardTitle>
+              <div className="flex items-center gap-2">
+                <Switch
+                  id="hasUserAccount"
+                  checked={formData.hasUserAccount}
+                  onCheckedChange={(checked) => handleChange('hasUserAccount', checked)}
+                  className="data-[state=checked]:bg-white data-[state=checked]:text-black"
+                />
+                <Label htmlFor="hasUserAccount" className="text-sm font-normal text-white">
+                  사용자 계정 생성
+                </Label>
+              </div>
+            </div>
+          </CardHeader>
+          {formData.hasUserAccount && (
+            <CardContent className="pt-6">
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <div className="space-y-2">
+                  <Label htmlFor="userId">아이디 *</Label>
+                  <Input
+                    id="userId"
+                    value={formData.userId}
+                    onChange={(e) => handleChange('userId', e.target.value)}
+                    placeholder="사용자 아이디"
+                    required={formData.hasUserAccount}
+                  />
+                </div>
+
+                {mode === 'create' && (
+                  <>
+                    <div className="space-y-2">
+                      <Label htmlFor="password">비밀번호 *</Label>
+                      <Input
+                        id="password"
+                        type="password"
+                        value={formData.password}
+                        onChange={(e) => handleChange('password', e.target.value)}
+                        placeholder="비밀번호"
+                        required={formData.hasUserAccount}
+                      />
+                    </div>
+
+                    <div className="space-y-2">
+                      <Label htmlFor="confirmPassword">비밀번호 확인</Label>
+                      <Input
+                        id="confirmPassword"
+                        type="password"
+                        value={formData.confirmPassword}
+                        onChange={(e) => handleChange('confirmPassword', e.target.value)}
+                        placeholder="비밀번호 확인"
+                      />
+                    </div>
+                  </>
+                )}
+
+                <div className="space-y-2">
+                  <Label htmlFor="role">권한</Label>
+                  <Select
+                    value={formData.role}
+                    onValueChange={(value) => handleChange('role', value)}
+                  >
+                    <SelectTrigger>
+                      <SelectValue placeholder="권한 선택" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {Object.entries(USER_ROLE_LABELS).map(([value, label]) => (
+                        <SelectItem key={value} value={value}>{label}</SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </div>
+
+                <div className="space-y-2">
+                  <Label htmlFor="accountStatus">계정상태</Label>
+                  <Select
+                    value={formData.accountStatus}
+                    onValueChange={(value) => handleChange('accountStatus', value)}
+                  >
+                    <SelectTrigger>
+                      <SelectValue placeholder="상태 선택" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {Object.entries(USER_ACCOUNT_STATUS_LABELS).map(([value, label]) => (
+                        <SelectItem key={value} value={value}>{label}</SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </div>
+              </div>
+            </CardContent>
+          )}
+        </Card>
+
+        {/* 버튼 영역 */}
+        <div className="flex items-center justify-between">
+          <Button type="button" variant="outline" onClick={handleCancel}>
+            <ArrowLeft className="w-4 h-4 mr-2" />
+            취소
+          </Button>
+          <Button type="submit">
+            <Save className="w-4 h-4 mr-2" />
+            {mode === 'create' ? '등록' : '저장'}
+          </Button>
+        </div>
+      </form>
+    </PageLayout>
+  );
+}
--- a/src/components/hr/EmployeeManagement/EmployeeToolbar.tsx
+++ b/src/components/hr/EmployeeManagement/EmployeeToolbar.tsx
@@ -0,0 +1,82 @@
+'use client';
+
+import { Button } from '@/components/ui/button';
+import { Card, CardContent } from '@/components/ui/card';
+import { Calendar, FileSpreadsheet, UserPlus, Mail, Settings } from 'lucide-react';
+
+interface EmployeeToolbarProps {
+  dateRange: { from?: Date; to?: Date };
+  onDateRangeChange: (range: { from?: Date; to?: Date }) => void;
+  onAddEmployee: () => void;
+  onCSVUpload: () => void;
+  onUserInvite: () => void;
+  onFieldSettings: () => void;
+}
+
+export function EmployeeToolbar({
+  dateRange,
+  onDateRangeChange,
+  onAddEmployee,
+  onCSVUpload,
+  onUserInvite,
+  onFieldSettings,
+}: EmployeeToolbarProps) {
+  return (
+    <Card>
+      <CardContent className="p-4">
+        <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
+          {/* 날짜 필터 */}
+          <div className="flex items-center gap-2">
+            <Calendar className="w-4 h-4 text-muted-foreground" />
+            <span className="text-sm text-muted-foreground">기간:</span>
+            <Button variant="outline" size="sm">
+              {dateRange.from && dateRange.to
+                ? `${dateRange.from.toLocaleDateString('ko-KR')} - ${dateRange.to.toLocaleDateString('ko-KR')}`
+                : '전체 기간'
+              }
+            </Button>
+          </div>
+
+          {/* 액션 버튼들 */}
+          <div className="flex flex-wrap items-center gap-2">
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={onFieldSettings}
+              className="gap-1"
+            >
+              <Settings className="w-4 h-4" />
+              <span className="hidden sm:inline">필드 설정</span>
+            </Button>
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={onCSVUpload}
+              className="gap-1"
+            >
+              <FileSpreadsheet className="w-4 h-4" />
+              <span className="hidden sm:inline">CSV 일괄등록</span>
+            </Button>
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={onUserInvite}
+              className="gap-1"
+            >
+              <Mail className="w-4 h-4" />
+              <span className="hidden sm:inline">사용자 초대</span>
+            </Button>
+            <Button
+              size="sm"
+              onClick={onAddEmployee}
+              className="gap-1"
+            >
+              <UserPlus className="w-4 h-4" />
+              <span>사원 등록</span>
+            </Button>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
--- a/src/components/hr/EmployeeManagement/FieldSettingsDialog.tsx
+++ b/src/components/hr/EmployeeManagement/FieldSettingsDialog.tsx
@@ -0,0 +1,223 @@
+'use client';
+
+import { useState, useEffect, useMemo } from 'react';
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { Label } from '@/components/ui/label';
+import { Switch } from '@/components/ui/switch';
+import { Card } from '@/components/ui/card';
+import type { FieldSettings } from './types';
+
+interface FieldSettingsDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  settings: FieldSettings;
+  onSave: (settings: FieldSettings) => void;
+}
+
+export function FieldSettingsDialog({
+  open,
+  onOpenChange,
+  settings,
+  onSave,
+}: FieldSettingsDialogProps) {
+  const [localSettings, setLocalSettings] = useState<FieldSettings>(settings);
+
+  useEffect(() => {
+    if (open) {
+      setLocalSettings(settings);
+    }
+  }, [open, settings]);
+
+  const handleToggle = (key: keyof FieldSettings) => {
+    setLocalSettings(prev => ({ ...prev, [key]: !prev[key] }));
+  };
+
+  // 사원 상세 전체 토글
+  const employeeDetailFields: (keyof FieldSettings)[] = [
+    'showProfileImage', 'showEmployeeCode', 'showGender', 'showAddress'
+  ];
+  const isAllEmployeeDetailOn = useMemo(() =>
+    employeeDetailFields.every(key => localSettings[key]),
+    [localSettings]
+  );
+  const handleToggleAllEmployeeDetail = (checked: boolean) => {
+    setLocalSettings(prev => {
+      const updated = { ...prev };
+      employeeDetailFields.forEach(key => {
+        updated[key] = checked;
+      });
+      return updated;
+    });
+  };
+
+  // 인사 정보 전체 토글
+  const hrInfoFields: (keyof FieldSettings)[] = [
+    'showHireDate', 'showEmploymentType', 'showRank', 'showStatus', 'showDepartment', 'showPosition'
+  ];
+  const isAllHrInfoOn = useMemo(() =>
+    hrInfoFields.every(key => localSettings[key]),
+    [localSettings]
+  );
+  const handleToggleAllHrInfo = (checked: boolean) => {
+    setLocalSettings(prev => {
+      const updated = { ...prev };
+      hrInfoFields.forEach(key => {
+        updated[key] = checked;
+      });
+      return updated;
+    });
+  };
+
+  const handleSave = () => {
+    onSave(localSettings);
+    onOpenChange(false);
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-md">
+        <DialogHeader>
+          <DialogTitle>항목 설정</DialogTitle>
+        </DialogHeader>
+
+        <div className="space-y-4 py-4">
+          {/* 사원 상세 섹션 */}
+          <Card className="p-4">
+            <div className="space-y-3">
+              {/* 전체 토글 */}
+              <div className="flex items-center justify-between border-b pb-3">
+                <Label className="font-semibold">사원 상세</Label>
+                <Switch
+                  checked={isAllEmployeeDetailOn}
+                  onCheckedChange={handleToggleAllEmployeeDetail}
+                />
+              </div>
+
+              {/* 개별 항목들 */}
+              <div className="flex items-center justify-between">
+                <Label htmlFor="showProfileImage">프로필 사진</Label>
+                <Switch
+                  id="showProfileImage"
+                  checked={localSettings.showProfileImage}
+                  onCheckedChange={() => handleToggle('showProfileImage')}
+                />
+              </div>
+
+              <div className="flex items-center justify-between">
+                <Label htmlFor="showEmployeeCode">사원코드</Label>
+                <Switch
+                  id="showEmployeeCode"
+                  checked={localSettings.showEmployeeCode}
+                  onCheckedChange={() => handleToggle('showEmployeeCode')}
+                />
+              </div>
+
+              <div className="flex items-center justify-between">
+                <Label htmlFor="showGender">성별</Label>
+                <Switch
+                  id="showGender"
+                  checked={localSettings.showGender}
+                  onCheckedChange={() => handleToggle('showGender')}
+                />
+              </div>
+
+              <div className="flex items-center justify-between">
+                <Label htmlFor="showAddress">주소</Label>
+                <Switch
+                  id="showAddress"
+                  checked={localSettings.showAddress}
+                  onCheckedChange={() => handleToggle('showAddress')}
+                />
+              </div>
+            </div>
+          </Card>
+
+          {/* 인사 정보 섹션 */}
+          <Card className="p-4">
+            <div className="space-y-3">
+              {/* 전체 토글 */}
+              <div className="flex items-center justify-between border-b pb-3">
+                <Label className="font-semibold">인사 정보</Label>
+                <Switch
+                  checked={isAllHrInfoOn}
+                  onCheckedChange={handleToggleAllHrInfo}
+                />
+              </div>
+
+              {/* 개별 항목들 */}
+              <div className="flex items-center justify-between">
+                <Label htmlFor="showHireDate">입사일</Label>
+                <Switch
+                  id="showHireDate"
+                  checked={localSettings.showHireDate}
+                  onCheckedChange={() => handleToggle('showHireDate')}
+                />
+              </div>
+
+              <div className="flex items-center justify-between">
+                <Label htmlFor="showEmploymentType">고용 형태</Label>
+                <Switch
+                  id="showEmploymentType"
+                  checked={localSettings.showEmploymentType}
+                  onCheckedChange={() => handleToggle('showEmploymentType')}
+                />
+              </div>
+
+              <div className="flex items-center justify-between">
+                <Label htmlFor="showRank">직급</Label>
+                <Switch
+                  id="showRank"
+                  checked={localSettings.showRank}
+                  onCheckedChange={() => handleToggle('showRank')}
+                />
+              </div>
+
+              <div className="flex items-center justify-between">
+                <Label htmlFor="showStatus">상태</Label>
+                <Switch
+                  id="showStatus"
+                  checked={localSettings.showStatus}
+                  onCheckedChange={() => handleToggle('showStatus')}
+                />
+              </div>
+
+              <div className="flex items-center justify-between">
+                <Label htmlFor="showDepartment">부서</Label>
+                <Switch
+                  id="showDepartment"
+                  checked={localSettings.showDepartment}
+                  onCheckedChange={() => handleToggle('showDepartment')}
+                />
+              </div>
+
+              <div className="flex items-center justify-between">
+                <Label htmlFor="showPosition">직책</Label>
+                <Switch
+                  id="showPosition"
+                  checked={localSettings.showPosition}
+                  onCheckedChange={() => handleToggle('showPosition')}
+                />
+              </div>
+            </div>
+          </Card>
+        </div>
+
+        {/* 버튼 */}
+        <div className="flex justify-center gap-2">
+          <Button variant="outline" onClick={() => onOpenChange(false)} className="w-24">
+            취소
+          </Button>
+          <Button onClick={handleSave} className="w-24 bg-blue-500 hover:bg-blue-600">
+            저장
+          </Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}
--- a/src/components/hr/EmployeeManagement/UserInviteDialog.tsx
+++ b/src/components/hr/EmployeeManagement/UserInviteDialog.tsx
@@ -0,0 +1,115 @@
+'use client';
+
+import { useState } from 'react';
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Textarea } from '@/components/ui/textarea';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import type { UserRole } from './types';
+import { USER_ROLE_LABELS } from './types';
+
+interface UserInviteDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onInvite: (data: { email: string; role: UserRole; message?: string }) => void;
+}
+
+export function UserInviteDialog({ open, onOpenChange, onInvite }: UserInviteDialogProps) {
+  const [email, setEmail] = useState('');
+  const [role, setRole] = useState<UserRole>('user');
+  const [message, setMessage] = useState('');
+
+  const handleSubmit = () => {
+    if (!email) return;
+    onInvite({ email, role, message: message || undefined });
+    // Reset form
+    setEmail('');
+    setRole('user');
+    setMessage('');
+  };
+
+  const handleCancel = () => {
+    setEmail('');
+    setRole('user');
+    setMessage('');
+    onOpenChange(false);
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-[425px]">
+        <DialogHeader>
+          <DialogTitle>사용자 초대</DialogTitle>
+        </DialogHeader>
+
+        <div className="space-y-4 py-4">
+          {/* 이메일 주소 */}
+          <div className="space-y-2">
+            <Label htmlFor="invite-email">이메일 주소</Label>
+            <Input
+              id="invite-email"
+              type="email"
+              placeholder="이메일"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+            />
+          </div>
+
+          {/* 권한 */}
+          <div className="space-y-2">
+            <Label htmlFor="invite-role">권한</Label>
+            <Select value={role} onValueChange={(value) => setRole(value as UserRole)}>
+              <SelectTrigger id="invite-role">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="admin">{USER_ROLE_LABELS.admin}</SelectItem>
+                <SelectItem value="manager">{USER_ROLE_LABELS.manager}</SelectItem>
+                <SelectItem value="user">{USER_ROLE_LABELS.user}</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+
+          {/* 초대 메시지 (선택) */}
+          <div className="space-y-2">
+            <Label htmlFor="invite-message">초대 메시지 (선택)</Label>
+            <Textarea
+              id="invite-message"
+              placeholder="초대 메시지를 입력해주세요."
+              value={message}
+              onChange={(e) => setMessage(e.target.value)}
+              rows={4}
+            />
+          </div>
+        </div>
+
+        {/* 버튼 */}
+        <div className="flex justify-end gap-2">
+          <Button variant="outline" onClick={handleCancel}>
+            취소
+          </Button>
+          <Button
+            onClick={handleSubmit}
+            disabled={!email}
+            className="bg-black hover:bg-black/90 text-white"
+          >
+            초대
+          </Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}
--- a/src/components/hr/EmployeeManagement/index.tsx
+++ b/src/components/hr/EmployeeManagement/index.tsx
@@ -0,0 +1,588 @@
+'use client';
+
+import { useState, useMemo, useCallback } from 'react';
+import { useRouter } from 'next/navigation';
+import { Users, Edit, Trash2, UserCheck, UserX, Clock, Calendar, Mail, Plus, Upload } from 'lucide-react';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { Checkbox } from '@/components/ui/checkbox';
+import { TableRow, TableCell } from '@/components/ui/table';
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '@/components/ui/alert-dialog';
+import {
+  IntegratedListTemplateV2,
+  type TabOption,
+  type TableColumn,
+  type StatCard,
+} from '@/components/templates/IntegratedListTemplateV2';
+import { ListMobileCard, InfoField } from '@/components/organisms/ListMobileCard';
+import { FieldSettingsDialog } from './FieldSettingsDialog';
+import { UserInviteDialog } from './UserInviteDialog';
+import type {
+  Employee,
+  EmployeeStatus,
+  FieldSettings,
+} from './types';
+import {
+  EMPLOYEE_STATUS_LABELS,
+  EMPLOYEE_STATUS_COLORS,
+  DEFAULT_FIELD_SETTINGS,
+  USER_ROLE_LABELS,
+} from './types';
+
+/**
+ * Mock 데이터 - 실제 API 연동 전 테스트용
+ */
+const mockEmployees: Employee[] = [
+  {
+    id: '1',
+    name: '김철수',
+    employeeCode: 'abc123',
+    phone: '010-1234-1234',
+    email: 'abc@company.com',
+    status: 'active',
+    hireDate: '2025-09-11',
+    departmentPositions: [
+      { id: '1', departmentId: 'd1', departmentName: '부서명', positionId: 'p1', positionName: '부서장팀장' }
+    ],
+    rank: '부장',
+    userInfo: { userId: 'abc', role: 'manager', accountStatus: 'active' },
+    createdAt: '2020-03-15T00:00:00Z',
+    updatedAt: '2024-01-15T00:00:00Z',
+  },
+  {
+    id: '2',
+    name: '이영희',
+    employeeCode: 'abc123',
+    phone: '010-1234-1234',
+    email: 'abc@company.com',
+    status: 'leave',
+    hireDate: '2025-09-11',
+    departmentPositions: [
+      { id: '2', departmentId: 'd2', departmentName: '부서명', positionId: 'p2', positionName: '팀장' }
+    ],
+    rank: '부장',
+    userInfo: { userId: 'abc', role: 'manager', accountStatus: 'active' },
+    createdAt: '2019-06-01T00:00:00Z',
+    updatedAt: '2024-02-20T00:00:00Z',
+  },
+  {
+    id: '3',
+    name: '박민수',
+    employeeCode: 'abc123',
+    phone: '010-1234-1234',
+    email: 'abc@company.com',
+    status: 'resigned',
+    hireDate: '2025-09-11',
+    departmentPositions: [
+      { id: '3', departmentId: 'd1', departmentName: '부서명', positionId: 'p2', positionName: '부서장팀장' }
+    ],
+    rank: '부장',
+    createdAt: '2021-01-10T00:00:00Z',
+    updatedAt: '2024-03-01T00:00:00Z',
+  },
+  {
+    id: '4',
+    name: '정수진',
+    employeeCode: 'abc123',
+    phone: '010-1234-1234',
+    email: 'abc@company.com',
+    status: 'active',
+    hireDate: '2025-09-11',
+    departmentPositions: [
+      { id: '4', departmentId: 'd3', departmentName: '부서명', positionId: 'p3', positionName: '팀장' }
+    ],
+    rank: '부장',
+    createdAt: '2018-09-20T00:00:00Z',
+    updatedAt: '2024-01-30T00:00:00Z',
+  },
+];
+
+// 추가 mock 데이터 생성 (55명 재직, 5명 휴직, 1명 퇴직)
+const generateMockEmployees = (): Employee[] => {
+  const employees: Employee[] = [...mockEmployees];
+  const departments = ['부서명'];
+  const positions = ['팀장', '부서장팀장', '파트장'];
+  const ranks = ['부장'];
+
+  for (let i = 5; i <= 61; i++) {
+    const status: EmployeeStatus = i <= 55 ? 'active' : i <= 60 ? 'leave' : 'resigned';
+    employees.push({
+      id: String(i),
+      name: `이름`,
+      employeeCode: `abc123`,
+      phone: `010-1234-1234`,
+      email: `abc@company.com`,
+      status,
+      hireDate: `2025-09-11`,
+      departmentPositions: [
+        {
+          id: String(i),
+          departmentId: `d${Math.floor(1 + Math.random() * 5)}`,
+          departmentName: departments[0],
+          positionId: `p${Math.floor(1 + Math.random() * 3)}`,
+          positionName: positions[Math.floor(Math.random() * positions.length)],
+        }
+      ],
+      rank: ranks[0],
+      userInfo: Math.random() > 0.3 ? {
+        userId: `abc`,
+        role: 'user',
+        accountStatus: 'active',
+      } : undefined,
+      createdAt: new Date().toISOString(),
+      updatedAt: new Date().toISOString(),
+    });
+  }
+  return employees;
+};
+
+export function EmployeeManagement() {
+  const router = useRouter();
+
+  // 사원 데이터 상태
+  const [employees, setEmployees] = useState<Employee[]>(generateMockEmployees);
+
+  // 검색 및 필터 상태
+  const [searchValue, setSearchValue] = useState('');
+  const [activeTab, setActiveTab] = useState<string>('all');
+  const [currentPage, setCurrentPage] = useState(1);
+  const itemsPerPage = 20;
+
+  // 다이얼로그 상태
+  const [fieldSettingsOpen, setFieldSettingsOpen] = useState(false);
+  const [fieldSettings, setFieldSettings] = useState<FieldSettings>(DEFAULT_FIELD_SETTINGS);
+  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
+  const [employeeToDelete, setEmployeeToDelete] = useState<Employee | null>(null);
+  const [userInviteOpen, setUserInviteOpen] = useState(false);
+  const [selectedItems, setSelectedItems] = useState<Set<string>>(new Set());
+
+  // 필터링된 데이터
+  const filteredEmployees = useMemo(() => {
+    let filtered = employees;
+
+    // 탭 필터 (상태)
+    if (activeTab !== 'all') {
+      filtered = filtered.filter(e => e.status === activeTab);
+    }
+
+    // 검색 필터
+    if (searchValue) {
+      const search = searchValue.toLowerCase();
+      filtered = filtered.filter(e =>
+        e.name.toLowerCase().includes(search) ||
+        e.employeeCode?.toLowerCase().includes(search) ||
+        e.email?.toLowerCase().includes(search)
+      );
+    }
+
+    return filtered;
+  }, [employees, activeTab, searchValue]);
+
+  // 페이지네이션된 데이터
+  const paginatedData = useMemo(() => {
+    const startIndex = (currentPage - 1) * itemsPerPage;
+    return filteredEmployees.slice(startIndex, startIndex + itemsPerPage);
+  }, [filteredEmployees, currentPage, itemsPerPage]);
+
+  // 통계 계산
+  const stats = useMemo(() => {
+    const activeCount = employees.filter(e => e.status === 'active').length;
+    const leaveCount = employees.filter(e => e.status === 'leave').length;
+    const resignedCount = employees.filter(e => e.status === 'resigned').length;
+
+    const activeEmployees = employees.filter(e => e.status === 'active' && e.hireDate);
+    const totalTenure = activeEmployees.reduce((sum, e) => {
+      const hireDate = new Date(e.hireDate!);
+      const today = new Date();
+      const years = (today.getTime() - hireDate.getTime()) / (1000 * 60 * 60 * 24 * 365);
+      return sum + years;
+    }, 0);
+    const averageTenure = activeEmployees.length > 0 ? totalTenure / activeEmployees.length : 0;
+
+    return { activeCount, leaveCount, resignedCount, averageTenure };
+  }, [employees]);
+
+  // StatCards 데이터
+  const statCards: StatCard[] = useMemo(() => [
+    {
+      label: '재직',
+      value: `${stats.activeCount}명`,
+      icon: UserCheck,
+      iconColor: 'text-green-500',
+    },
+    {
+      label: '휴직',
+      value: `${stats.leaveCount}명`,
+      icon: Clock,
+      iconColor: 'text-yellow-500',
+    },
+    {
+      label: '퇴직',
+      value: `${stats.resignedCount}명`,
+      icon: UserX,
+      iconColor: 'text-gray-500',
+    },
+    {
+      label: '평균근속년수',
+      value: `${stats.averageTenure.toFixed(1)}년`,
+      icon: Calendar,
+      iconColor: 'text-blue-500',
+    },
+  ], [stats]);
+
+  // 탭 옵션
+  const tabs: TabOption[] = useMemo(() => [
+    { value: 'all', label: '전체', count: employees.length, color: 'gray' },
+    { value: 'active', label: '재직', count: stats.activeCount, color: 'green' },
+    { value: 'leave', label: '휴직', count: stats.leaveCount, color: 'yellow' },
+    { value: 'resigned', label: '퇴직', count: stats.resignedCount, color: 'gray' },
+  ], [employees.length, stats]);
+
+  // 테이블 컬럼 정의
+  const tableColumns: TableColumn[] = useMemo(() => [
+    { key: 'rowNumber', label: '번호', className: 'w-[60px] text-center' },
+    { key: 'employeeCode', label: '사원코드', className: 'min-w-[100px]' },
+    { key: 'department', label: '부서', className: 'min-w-[100px]' },
+    { key: 'position', label: '직책', className: 'min-w-[100px]' },
+    { key: 'name', label: '이름', className: 'min-w-[80px]' },
+    { key: 'rank', label: '직급', className: 'min-w-[80px]' },
+    { key: 'phone', label: '휴대폰', className: 'min-w-[120px]' },
+    { key: 'email', label: '이메일', className: 'min-w-[150px]' },
+    { key: 'hireDate', label: '입사일', className: 'min-w-[100px]' },
+    { key: 'status', label: '상태', className: 'min-w-[80px]' },
+    { key: 'userId', label: '사용자아이디', className: 'min-w-[100px]' },
+    { key: 'userRole', label: '권한', className: 'min-w-[80px]' },
+    { key: 'actions', label: '작업', className: 'w-[100px] text-right' },
+  ], []);
+
+  // 체크박스 토글
+  const toggleSelection = useCallback((id: string) => {
+    setSelectedItems(prev => {
+      const newSet = new Set(prev);
+      if (newSet.has(id)) {
+        newSet.delete(id);
+      } else {
+        newSet.add(id);
+      }
+      return newSet;
+    });
+  }, []);
+
+  // 전체 선택/해제
+  const toggleSelectAll = useCallback(() => {
+    if (selectedItems.size === paginatedData.length && paginatedData.length > 0) {
+      setSelectedItems(new Set());
+    } else {
+      const allIds = new Set(paginatedData.map((item) => item.id));
+      setSelectedItems(allIds);
+    }
+  }, [selectedItems.size, paginatedData]);
+
+  // 일괄 삭제 핸들러
+  const handleBulkDelete = useCallback(() => {
+    const ids = Array.from(selectedItems);
+    setEmployees(prev => prev.filter(emp => !ids.includes(emp.id)));
+    setSelectedItems(new Set());
+  }, [selectedItems]);
+
+  // 핸들러
+  const handleAddEmployee = useCallback(() => {
+    router.push('/ko/hr/employee-management/new');
+  }, [router]);
+
+  const handleCSVUpload = useCallback(() => {
+    router.push('/ko/hr/employee-management/csv-upload');
+  }, [router]);
+
+  const handleDeleteEmployee = useCallback(() => {
+    if (employeeToDelete) {
+      setEmployees(prev => prev.filter(emp => emp.id !== employeeToDelete.id));
+      setDeleteDialogOpen(false);
+      setEmployeeToDelete(null);
+    }
+  }, [employeeToDelete]);
+
+  const handleRowClick = useCallback((row: Employee) => {
+    router.push(`/ko/hr/employee-management/${row.id}`);
+  }, [router]);
+
+  const handleEdit = useCallback((id: string) => {
+    router.push(`/ko/hr/employee-management/${id}/edit`);
+  }, [router]);
+
+  const openDeleteDialog = useCallback((employee: Employee) => {
+    setEmployeeToDelete(employee);
+    setDeleteDialogOpen(true);
+  }, []);
+
+  // 테이블 행 렌더링
+  const renderTableRow = useCallback((item: Employee, index: number, globalIndex: number) => {
+    const isSelected = selectedItems.has(item.id);
+
+    return (
+      <TableRow
+        key={item.id}
+        className="hover:bg-muted/50 cursor-pointer"
+        onClick={() => handleRowClick(item)}
+      >
+        <TableCell className="text-center" onClick={(e) => e.stopPropagation()}>
+          <Checkbox
+            checked={isSelected}
+            onCheckedChange={() => toggleSelection(item.id)}
+          />
+        </TableCell>
+        <TableCell className="text-muted-foreground text-center">
+          {globalIndex}
+        </TableCell>
+        <TableCell>{item.employeeCode || '-'}</TableCell>
+        <TableCell>
+          {item.departmentPositions?.length > 0
+            ? item.departmentPositions.map(dp => dp.departmentName).join(', ')
+            : '-'}
+        </TableCell>
+        <TableCell>
+          {item.departmentPositions?.length > 0
+            ? item.departmentPositions.map(dp => dp.positionName).join(', ')
+            : '-'}
+        </TableCell>
+        <TableCell>{item.name}</TableCell>
+        <TableCell>{item.rank || '-'}</TableCell>
+        <TableCell>{item.phone || '-'}</TableCell>
+        <TableCell>{item.email || '-'}</TableCell>
+        <TableCell>
+          {item.hireDate ? new Date(item.hireDate).toLocaleDateString('ko-KR') : '-'}
+        </TableCell>
+        <TableCell>
+          <Badge className={EMPLOYEE_STATUS_COLORS[item.status]}>
+            {EMPLOYEE_STATUS_LABELS[item.status]}
+          </Badge>
+        </TableCell>
+        <TableCell>{item.userInfo?.userId || '-'}</TableCell>
+        <TableCell>
+          {item.userInfo ? USER_ROLE_LABELS[item.userInfo.role] : '-'}
+        </TableCell>
+        <TableCell className="text-right" onClick={(e) => e.stopPropagation()}>
+          {isSelected && (
+            <div className="flex items-center justify-end gap-1">
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={() => handleEdit(item.id)}
+                title="수정"
+              >
+                <Edit className="w-4 h-4" />
+              </Button>
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={() => openDeleteDialog(item)}
+                title="삭제"
+              >
+                <Trash2 className="w-4 h-4 text-red-500" />
+              </Button>
+            </div>
+          )}
+        </TableCell>
+      </TableRow>
+    );
+  }, [selectedItems, toggleSelection, handleRowClick, handleEdit, openDeleteDialog]);
+
+  // 모바일 카드 렌더링
+  const renderMobileCard = useCallback((
+    item: Employee,
+    index: number,
+    globalIndex: number,
+    isSelected: boolean,
+    onToggle: () => void
+  ) => {
+    return (
+      <ListMobileCard
+        id={item.id}
+        title={item.name}
+        headerBadges={
+          <div className="flex items-center gap-2 flex-wrap">
+            <Badge variant="outline" className="text-xs">
+              #{globalIndex}
+            </Badge>
+            <code className="text-xs bg-gray-100 px-2 py-1 rounded">
+              {item.employeeCode}
+            </code>
+          </div>
+        }
+        statusBadge={
+          <Badge className={EMPLOYEE_STATUS_COLORS[item.status]}>
+            {EMPLOYEE_STATUS_LABELS[item.status]}
+          </Badge>
+        }
+        isSelected={isSelected}
+        onToggleSelection={onToggle}
+        onCardClick={() => handleRowClick(item)}
+        infoGrid={
+          <div className="grid grid-cols-2 gap-x-4 gap-y-3">
+            <InfoField
+              label="부서"
+              value={item.departmentPositions?.length > 0
+                ? item.departmentPositions.map(dp => dp.departmentName).join(', ')
+                : '-'}
+            />
+            <InfoField
+              label="직책"
+              value={item.departmentPositions?.length > 0
+                ? item.departmentPositions.map(dp => dp.positionName).join(', ')
+                : '-'}
+            />
+            <InfoField label="직급" value={item.rank || '-'} />
+            <InfoField label="휴대폰" value={item.phone || '-'} />
+            <InfoField label="이메일" value={item.email || '-'} />
+            <InfoField
+              label="입사일"
+              value={item.hireDate ? new Date(item.hireDate).toLocaleDateString('ko-KR') : '-'}
+            />
+            {item.userInfo && (
+              <>
+                <InfoField label="사용자ID" value={item.userInfo.userId || '-'} />
+                <InfoField label="권한" value={USER_ROLE_LABELS[item.userInfo.role]} />
+              </>
+            )}
+          </div>
+        }
+        actions={
+          isSelected ? (
+            <div className="flex gap-2 flex-wrap">
+              <Button
+                variant="default"
+                size="default"
+                className="flex-1 min-w-[100px] h-11"
+                onClick={(e) => { e.stopPropagation(); handleEdit(item.id); }}
+              >
+                <Edit className="h-4 w-4 mr-2" />
+                수정
+              </Button>
+              <Button
+                variant="outline"
+                size="default"
+                className="flex-1 min-w-[100px] h-11 border-red-200 text-red-600 hover:border-red-300 bg-transparent"
+                onClick={(e) => { e.stopPropagation(); openDeleteDialog(item); }}
+              >
+                <Trash2 className="h-4 w-4 mr-2" />
+                삭제
+              </Button>
+            </div>
+          ) : undefined
+        }
+      />
+    );
+  }, [handleRowClick, handleEdit, openDeleteDialog]);
+
+  // 헤더 액션
+  const headerActions = (
+    <div className="flex items-center gap-2 flex-wrap">
+      <Button
+        variant="outline"
+        onClick={() => setUserInviteOpen(true)}
+      >
+        <Mail className="w-4 h-4 mr-2" />
+        사용자 초대
+      </Button>
+      <Button variant="outline" onClick={handleCSVUpload}>
+        <Upload className="w-4 h-4 mr-2" />
+        CSV 일괄 등록
+      </Button>
+      <Button onClick={handleAddEmployee}>
+        <Plus className="w-4 h-4 mr-2" />
+        사원 등록
+      </Button>
+    </div>
+  );
+
+  // 페이지네이션 설정
+  const totalPages = Math.ceil(filteredEmployees.length / itemsPerPage);
+
+  return (
+    <>
+      <IntegratedListTemplateV2<Employee>
+        title="사원관리"
+        description="사원 정보를 관리합니다"
+        icon={Users}
+        headerActions={headerActions}
+        stats={statCards}
+        searchValue={searchValue}
+        onSearchChange={setSearchValue}
+        searchPlaceholder="이름, 사원코드, 이메일 검색..."
+        tabs={tabs}
+        activeTab={activeTab}
+        onTabChange={setActiveTab}
+        tableColumns={tableColumns}
+        data={paginatedData}
+        totalCount={filteredEmployees.length}
+        allData={filteredEmployees}
+        selectedItems={selectedItems}
+        onToggleSelection={toggleSelection}
+        onToggleSelectAll={toggleSelectAll}
+        onBulkDelete={handleBulkDelete}
+        getItemId={(item) => item.id}
+        renderTableRow={renderTableRow}
+        renderMobileCard={renderMobileCard}
+        pagination={{
+          currentPage,
+          totalPages,
+          totalItems: filteredEmployees.length,
+          itemsPerPage,
+          onPageChange: setCurrentPage,
+        }}
+      />
+
+      {/* 필드 설정 다이얼로그 */}
+      <FieldSettingsDialog
+        open={fieldSettingsOpen}
+        onOpenChange={setFieldSettingsOpen}
+        settings={fieldSettings}
+        onSave={setFieldSettings}
+      />
+
+      {/* 사용자 초대 다이얼로그 */}
+      <UserInviteDialog
+        open={userInviteOpen}
+        onOpenChange={setUserInviteOpen}
+        onInvite={(data) => {
+          console.log('Invite user:', data);
+          setUserInviteOpen(false);
+        }}
+      />
+
+      {/* 삭제 확인 다이얼로그 */}
+      <AlertDialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>사원 삭제</AlertDialogTitle>
+            <AlertDialogDescription>
+              &quot;{employeeToDelete?.name}&quot; 사원을 삭제하시겠습니까?
+              <br />
+              <span className="text-destructive">
+                삭제된 사원 정보는 복구할 수 없습니다.
+              </span>
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>취소</AlertDialogCancel>
+            <AlertDialogAction
+              onClick={handleDeleteEmployee}
+              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+            >
+              삭제
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </>
+  );
+}
--- a/src/components/hr/EmployeeManagement/types.ts
+++ b/src/components/hr/EmployeeManagement/types.ts
@@ -0,0 +1,266 @@
+/**
+ * Employee Management Types
+ * 사원관리 타입 정의
+ */
+
+// ===== 기본 Enum/상수 타입 =====
+
+/** 사원 상태 */
+export type EmployeeStatus = 'active' | 'leave' | 'resigned';
+
+/** 상태 라벨 매핑 */
+export const EMPLOYEE_STATUS_LABELS: Record<EmployeeStatus, string> = {
+  active: '재직',
+  leave: '휴직',
+  resigned: '퇴직',
+};
+
+/** 상태 뱃지 색상 */
+export const EMPLOYEE_STATUS_COLORS: Record<EmployeeStatus, string> = {
+  active: 'bg-green-100 text-green-800',
+  leave: 'bg-yellow-100 text-yellow-800',
+  resigned: 'bg-gray-100 text-gray-800',
+};
+
+/** 고용 형태 */
+export type EmploymentType = 'regular' | 'contract' | 'parttime' | 'intern';
+
+export const EMPLOYMENT_TYPE_LABELS: Record<EmploymentType, string> = {
+  regular: '정규직',
+  contract: '계약직',
+  parttime: '파트타임',
+  intern: '인턴',
+};
+
+/** 성별 */
+export type Gender = 'male' | 'female';
+
+export const GENDER_LABELS: Record<Gender, string> = {
+  male: '남성',
+  female: '여성',
+};
+
+/** 사용자 권한 */
+export type UserRole = 'admin' | 'manager' | 'user';
+
+export const USER_ROLE_LABELS: Record<UserRole, string> = {
+  admin: '관리자',
+  manager: '매니저',
+  user: '일반 사용자',
+};
+
+/** 사용자 계정 상태 */
+export type UserAccountStatus = 'active' | 'inactive' | 'pending';
+
+export const USER_ACCOUNT_STATUS_LABELS: Record<UserAccountStatus, string> = {
+  active: '활성',
+  inactive: '비활성',
+  pending: '대기',
+};
+
+// ===== 부서/직책 관련 =====
+
+/** 부서-직책 매핑 (한 사원이 여러 부서에 소속 가능) */
+export interface DepartmentPosition {
+  id: string;
+  departmentId: string;
+  departmentName: string;
+  positionId: string;
+  positionName: string;
+}
+
+// ===== 급여 계좌 정보 =====
+
+export interface BankAccount {
+  bankName: string;
+  accountNumber: string;
+  accountHolder: string;
+}
+
+// ===== 주소 정보 =====
+
+export interface Address {
+  zipCode: string;
+  address1: string; // 기본 주소
+  address2: string; // 상세 주소
+}
+
+// ===== 사용자 정보 =====
+
+export interface UserInfo {
+  userId: string;
+  password?: string; // 등록/수정 시에만 사용
+  role: UserRole;
+  accountStatus: UserAccountStatus;
+}
+
+// ===== 메인 Employee 인터페이스 =====
+
+export interface Employee {
+  id: string;
+
+  // 기본 정보 (필수)
+  name: string;
+
+  // 기본 정보 (선택)
+  residentNumber?: string; // 주민등록번호
+  phone?: string;
+  email?: string;
+  salary?: number; // 연봉
+  bankAccount?: BankAccount;
+
+  // 선택적 필드 (설정에 따라 표시)
+  profileImage?: string;
+  employeeCode?: string; // 사원코드
+  gender?: Gender;
+  address?: Address;
+
+  // 인사 정보
+  hireDate?: string; // YYYY-MM-DD
+  employmentType?: EmploymentType;
+  rank?: string; // 직급 (예: 사원, 대리, 과장 등)
+  status: EmployeeStatus;
+  departmentPositions: DepartmentPosition[]; // 부서/직책 (복수 가능)
+
+  // 사용자 정보 (시스템 계정)
+  userInfo?: UserInfo;
+
+  // 메타 정보
+  createdAt: string;
+  updatedAt: string;
+}
+
+// ===== 폼 데이터 타입 =====
+
+export interface EmployeeFormData {
+  // 기본 정보
+  name: string;
+  residentNumber: string;
+  phone: string;
+  email: string;
+  salary: string; // 입력 시 문자열
+  bankAccount: BankAccount;
+
+  // 선택적 필드
+  profileImage: string;
+  employeeCode: string;
+  gender: Gender | '';
+  address: Address;
+
+  // 인사 정보
+  hireDate: string;
+  employmentType: EmploymentType | '';
+  rank: string;
+  status: EmployeeStatus;
+  departmentPositions: DepartmentPosition[];
+
+  // 사용자 정보
+  hasUserAccount: boolean;
+  userId: string;
+  password: string;
+  confirmPassword: string;
+  role: UserRole;
+  accountStatus: UserAccountStatus;
+}
+
+// ===== 필드 설정 타입 =====
+
+export interface FieldSettings {
+  // 사원 상세 필드
+  showProfileImage: boolean;
+  showEmployeeCode: boolean;
+  showGender: boolean;
+  showAddress: boolean;
+
+  // 인사 정보 필드
+  showHireDate: boolean;
+  showEmploymentType: boolean;
+  showRank: boolean;
+  showStatus: boolean;
+  showDepartment: boolean;
+  showPosition: boolean;
+}
+
+export const DEFAULT_FIELD_SETTINGS: FieldSettings = {
+  showProfileImage: true,
+  showEmployeeCode: true,
+  showGender: true,
+  showAddress: true,
+  showHireDate: true,
+  showEmploymentType: true,
+  showRank: true,
+  showStatus: true,
+  showDepartment: true,
+  showPosition: true,
+};
+
+// ===== 필터/검색 타입 =====
+
+export type EmployeeFilterType = 'all' | 'hasUserId' | 'noUserId';
+
+export const EMPLOYEE_FILTER_OPTIONS: { value: EmployeeFilterType; label: string }[] = [
+  { value: 'all', label: '전체' },
+  { value: 'hasUserId', label: '사용자 아이디 보유' },
+  { value: 'noUserId', label: '사용자 아이디 미보유' },
+];
+
+// ===== CSV 업로드 타입 =====
+
+export interface CSVEmployeeRow {
+  name: string;
+  phone?: string;
+  email?: string;
+  departmentName?: string;
+  positionName?: string;
+  hireDate?: string;
+  status?: string;
+  // 추가 필드들...
+}
+
+export interface CSVValidationResult {
+  row: number;
+  data: CSVEmployeeRow;
+  isValid: boolean;
+  errors: string[];
+}
+
+// ===== 통계 타입 =====
+
+export interface EmployeeStats {
+  activeCount: number;
+  leaveCount: number;
+  resignedCount: number;
+  averageTenure: number; // 평균 근속년수
+}
+
+// ===== 다이얼로그 타입 =====
+
+export type DialogMode = 'create' | 'edit' | 'view';
+
+export interface EmployeeDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  mode: DialogMode;
+  employee?: Employee;
+  onSave: (data: EmployeeFormData) => void;
+  fieldSettings: FieldSettings;
+}
+
+// ===== 정렬 옵션 =====
+
+export type SortField = 'name' | 'employeeCode' | 'department' | 'hireDate' | 'status';
+export type SortDirection = 'asc' | 'desc';
+
+export interface SortOption {
+  field: SortField;
+  direction: SortDirection;
+  label: string;
+}
+
+export const SORT_OPTIONS: SortOption[] = [
+  { field: 'name', direction: 'asc', label: '이름 (오름차순)' },
+  { field: 'name', direction: 'desc', label: '이름 (내림차순)' },
+  { field: 'hireDate', direction: 'desc', label: '입사일 (최신순)' },
+  { field: 'hireDate', direction: 'asc', label: '입사일 (오래된순)' },
+  { field: 'employeeCode', direction: 'asc', label: '사원코드 (오름차순)' },
+];
--- a/src/components/items/DynamicItemForm/fields/DropdownField.tsx
+++ b/src/components/items/DynamicItemForm/fields/DropdownField.tsx
@@ -80,6 +80,22 @@ export function DropdownField({
  // 옵션이 없으면 드롭다운을 disabled로 표시
  const hasOptions = options.length > 0;

+  // 디버깅: 단위 필드 값 추적
+  if (isUnitField) {
+    console.log('[DropdownField] 단위 필드 디버깅:', {
+      fieldKey,
+      fieldName: field.field_name,
+      rawValue: value,
+      stringValue,
+      isUnitField,
+      unitOptionsCount: unitOptions?.length || 0,
+      unitOptions: unitOptions?.slice(0, 3), // 처음 3개만
+      optionsCount: options.length,
+      options: options.slice(0, 3), // 처음 3개만
+      valueInOptions: options.some(o => o.value === stringValue),
+    });
+  }
+
  return (
    <div>
      <Label htmlFor={fieldKey}>
@@ -87,6 +103,7 @@ export function DropdownField({
        {field.is_required && <span className="text-red-500"> *</span>}
      </Label>
      <Select
+        key={`${fieldKey}-${stringValue}`}
        value={stringValue}
        onValueChange={onChange}
        disabled={disabled || !hasOptions}
--- a/src/components/items/DynamicItemForm/hooks/useDynamicFormState.ts
+++ b/src/components/items/DynamicItemForm/hooks/useDynamicFormState.ts
@@ -9,7 +9,7 @@

 'use client';

-import { useState, useCallback, useEffect, useRef } from 'react';
+import { useState, useCallback } from 'react';
 import type {
  DynamicFormData,
  DynamicFormErrors,
@@ -19,26 +19,18 @@ import type {
 import type { ItemFieldResponse } from '@/types/item-master-api';

 export function useDynamicFormState(
-  initialData?: DynamicFormData
+  _initialData?: DynamicFormData  // 사용하지 않음 - 호환성을 위해 파라미터 유지
 ): UseDynamicFormStateResult {
-  const [formData, setFormData] = useState<DynamicFormData>(initialData || {});
+  // 2025-12-05: 항상 빈 객체로 시작
+  // Edit 모드 데이터는 DynamicItemForm에서 resetForm()으로 설정
+  // 이렇게 해야 StrictMode 리마운트에서도 안전함
+  const [formData, setFormData] = useState<DynamicFormData>({});
  const [errors, setErrors] = useState<DynamicFormErrors>({});
  const [isSubmitting, setIsSubmitting] = useState(false);

-  // 2025-12-04: Edit 모드에서 initialData가 비동기로 로드될 때 formData 동기화
-  // useState의 초기값은 첫 렌더 시에만 사용되므로,
-  // initialData가 나중에 변경되면 formData를 업데이트해야 함
-  const isInitialDataLoaded = useRef(false);
-
-  useEffect(() => {
-    // initialData가 있고, 아직 로드되지 않았을 때만 동기화
-    // (사용자가 수정 중인 데이터를 덮어쓰지 않도록)
-    if (initialData && Object.keys(initialData).length > 0 && !isInitialDataLoaded.current) {
-      console.log('[useDynamicFormState] initialData 동기화:', initialData);
-      setFormData(initialData);
-      isInitialDataLoaded.current = true;
-    }
-  }, [initialData]);
+  // 2025-12-05: initialData 동기화 useEffect 제거
+  // 모든 초기 데이터는 resetForm()을 통해서만 설정
+  // StrictMode에서 useState 초기값이 원본 데이터로 리셋되는 문제 해결

  // 필드 값 설정
  const setFieldValue = useCallback((fieldKey: string, value: DynamicFieldValue) => {
@@ -186,6 +178,7 @@ export function useDynamicFormState(

  // 폼 초기화
  const resetForm = useCallback((newInitialData?: DynamicFormData) => {
+    console.log('[useDynamicFormState] resetForm 호출됨:', newInitialData);
    setFormData(newInitialData || {});
    setErrors({});
    setIsSubmitting(false);
--- a/src/components/items/DynamicItemForm/index.tsx
+++ b/src/components/items/DynamicItemForm/index.tsx
@@ -8,7 +8,7 @@

 import { useState, useEffect, useMemo, useRef } from 'react';
 import { useRouter } from 'next/navigation';
-import { Package, Save, X } from 'lucide-react';
+import { Package, Save, X, FileText, Trash2, Download } from 'lucide-react';
 import { cn } from '@/lib/utils';
 import { Label } from '@/components/ui/label';
 import { Input } from '@/components/ui/input';
@@ -34,9 +34,10 @@ import {
  generateBendingItemCodeSimple,
  generatePurchasedItemCode,
 } from './utils/itemCodeGenerator';
-import type { DynamicItemFormProps, DynamicFormData, DynamicSection, DynamicFieldValue, BOMLine, BOMSearchState } from './types';
+import type { DynamicItemFormProps, DynamicFormData, DynamicSection, DynamicFieldValue, BOMLine, BOMSearchState, ItemSaveResult } from './types';
 import type { ItemType, BendingDetail } from '@/types/item';
 import type { ItemFieldResponse } from '@/types/item-master-api';
+import { uploadItemFile, deleteItemFile, ItemFileType } from '@/lib/api/items';

 /**
 * 헤더 컴포넌트 - 기존 FormHeader와 동일한 디자인
@@ -220,6 +221,7 @@ function DynamicSectionRenderer({
 export default function DynamicItemForm({
  mode,
  itemType: initialItemType,
+  itemId: propItemId,
  initialData,
  onSubmit,
 }: DynamicItemFormProps) {
@@ -260,6 +262,75 @@ export default function DynamicItemForm({
  const [specificationFile, setSpecificationFile] = useState<File | null>(null);
  const [certificationFile, setCertificationFile] = useState<File | null>(null);

+  // 기존 파일 URL 상태 (edit 모드에서 사용)
+  const [existingBendingDiagram, setExistingBendingDiagram] = useState<string>('');
+  const [existingSpecificationFile, setExistingSpecificationFile] = useState<string>('');
+  const [existingSpecificationFileName, setExistingSpecificationFileName] = useState<string>('');
+  const [existingCertificationFile, setExistingCertificationFile] = useState<string>('');
+  const [existingCertificationFileName, setExistingCertificationFileName] = useState<string>('');
+  const [isDeletingFile, setIsDeletingFile] = useState<string | null>(null);
+
+  // initialData에서 기존 파일 정보 로드 (edit 모드)
+  useEffect(() => {
+    if (mode === 'edit' && initialData) {
+      if (initialData.bending_diagram) {
+        setExistingBendingDiagram(initialData.bending_diagram as string);
+      }
+      if (initialData.specification_file) {
+        setExistingSpecificationFile(initialData.specification_file as string);
+        setExistingSpecificationFileName((initialData.specification_file_name as string) || '시방서');
+      }
+      if (initialData.certification_file) {
+        setExistingCertificationFile(initialData.certification_file as string);
+        setExistingCertificationFileName((initialData.certification_file_name as string) || '인정서');
+      }
+    }
+  }, [mode, initialData]);
+
+  // Storage 경로를 전체 URL로 변환
+  const getStorageUrl = (path: string | undefined): string | null => {
+    if (!path) return null;
+    if (path.startsWith('http://') || path.startsWith('https://')) {
+      return path;
+    }
+    const apiUrl = process.env.NEXT_PUBLIC_API_URL || '';
+    return `${apiUrl}/storage/${path}`;
+  };
+
+  // 파일 삭제 핸들러
+  const handleDeleteFile = async (fileType: ItemFileType) => {
+    if (!propItemId) return;
+
+    const confirmMessage = fileType === 'bending_diagram' ? '전개도 이미지를' :
+                          fileType === 'specification' ? '시방서 파일을' : '인정서 파일을';
+
+    if (!confirm(`${confirmMessage} 삭제하시겠습니까?`)) return;
+
+    try {
+      setIsDeletingFile(fileType);
+      await deleteItemFile(propItemId, fileType);
+
+      // 상태 업데이트
+      if (fileType === 'bending_diagram') {
+        setExistingBendingDiagram('');
+        setBendingDiagram('');
+      } else if (fileType === 'specification') {
+        setExistingSpecificationFile('');
+        setExistingSpecificationFileName('');
+      } else if (fileType === 'certification') {
+        setExistingCertificationFile('');
+        setExistingCertificationFileName('');
+      }
+
+      alert('파일이 삭제되었습니다.');
+    } catch (error) {
+      console.error('[DynamicItemForm] 파일 삭제 실패:', error);
+      alert('파일 삭제에 실패했습니다.');
+    } finally {
+      setIsDeletingFile(null);
+    }
+  };
+
  // 조건부 표시 관리
  const { shouldShowSection, shouldShowField } = useConditionalDisplay(structure, formData);

@@ -332,9 +403,18 @@ export default function DynamicItemForm({
  const [isEditDataMapped, setIsEditDataMapped] = useState(false);

  useEffect(() => {
-    if (mode !== 'edit' || !structure || !initialData || isEditDataMapped) return;
+    if (mode !== 'edit' || !structure || !initialData) return;

-    // console.log('[DynamicItemForm] Edit mode: mapping initialData to field_key format');
+    // 이미 매핑된 데이터가 formData에 있으면 스킵 (98_unit 같은 field_key 형식)
+    // StrictMode 리렌더에서도 안전하게 동작
+    const hasFieldKeyData = Object.keys(formData).some(key => /^\d+_/.test(key));
+    if (hasFieldKeyData) {
+      console.log('[DynamicItemForm] Edit mode: 이미 field_key 형식 데이터 있음, 매핑 스킵');
+      return;
+    }
+
+    console.log('[DynamicItemForm] Edit mode: mapping initialData to field_key format');
+    console.log('[DynamicItemForm] initialData:', initialData);

    // initialData의 간단한 키를 structure의 field_key로 매핑
    // 예: { item_name: '테스트' } → { '98_item_name': '테스트' }
@@ -353,6 +433,17 @@ export default function DynamicItemForm({
    // structure에서 모든 필드의 field_key 수집
    const fieldKeyMap: Record<string, string> = {}; // 간단한 키 → field_key 매핑

+    // 영문 → 한글 필드명 별칭 (API 응답 키 → structure field_name 매핑)
+    // API는 영문 키(unit, note)로 응답하지만, structure field_key는 한글(단위, 비고) 포함
+    const fieldAliases: Record<string, string> = {
+      'unit': '단위',
+      'note': '비고',
+      'remarks': '비고',  // Material 모델은 remarks 사용
+      'item_name': '품목명',
+      'specification': '규격',
+      'description': '설명',
+    };
+
    structure.sections.forEach((section) => {
      section.fields.forEach((f) => {
        const field = f.field;
@@ -378,7 +469,7 @@ export default function DynamicItemForm({
      }
    });

-    // console.log('[DynamicItemForm] fieldKeyMap:', fieldKeyMap);
+    console.log('[DynamicItemForm] fieldKeyMap:', fieldKeyMap);

    // initialData를 field_key 형식으로 변환
    Object.entries(initialData).forEach(([key, value]) => {
@@ -390,13 +481,41 @@ export default function DynamicItemForm({
      else if (fieldKeyMap[key]) {
        mappedData[fieldKeyMap[key]] = value;
      }
+      // 영문 → 한글 별칭으로 시도 (API 응답 키 → structure field_name)
+      else if (fieldAliases[key] && fieldKeyMap[fieldAliases[key]]) {
+        mappedData[fieldKeyMap[fieldAliases[key]]] = value;
+        console.log(`[DynamicItemForm] 별칭 매핑: ${key} → ${fieldAliases[key]} → ${fieldKeyMap[fieldAliases[key]]}`);
+      }
      // 매핑 없는 경우 그대로 유지
      else {
        mappedData[key] = value;
      }
    });

-    // console.log('[DynamicItemForm] Mapped initialData:', mappedData);
+    // 추가: 폼 구조의 모든 필드를 순회하면서, initialData에서 해당 값 직접 찾아서 설정
+    // (fieldKeyMap에 매핑이 없는 경우를 위한 fallback)
+    Object.entries(fieldKeyMap).forEach(([simpleName, fieldKey]) => {
+      // 아직 매핑 안된 필드인데 initialData에 값이 있으면 설정
+      if (mappedData[fieldKey] === undefined && initialData[simpleName] !== undefined) {
+        mappedData[fieldKey] = initialData[simpleName];
+      }
+    });
+
+    // 추가: 영문 별칭을 역으로 검색하여 매핑 (한글 field_name → 영문 API 키)
+    // 예: fieldKeyMap에 '단위'가 있고, initialData에 'unit'이 있으면 매핑
+    Object.entries(fieldAliases).forEach(([englishKey, koreanKey]) => {
+      const targetFieldKey = fieldKeyMap[koreanKey];
+      if (targetFieldKey && mappedData[targetFieldKey] === undefined && initialData[englishKey] !== undefined) {
+        mappedData[targetFieldKey] = initialData[englishKey];
+        console.log(`[DynamicItemForm] 별칭 fallback 매핑: ${englishKey} → ${koreanKey} → ${targetFieldKey}`);
+      }
+    });
+
+    console.log('========== [DynamicItemForm] Edit 모드 데이터 매핑 ==========');
+    console.log('specification 관련 키:', Object.keys(mappedData).filter(k => k.includes('specification') || k.includes('규격')));
+    console.log('is_active 관련 키:', Object.keys(mappedData).filter(k => k.includes('active') || k.includes('상태')));
+    console.log('매핑된 데이터:', mappedData);
+    console.log('==============================================================');

    // 변환된 데이터로 폼 리셋
    resetForm(mappedData);
@@ -1113,7 +1232,11 @@ export default function DynamicItemForm({
    };

    // formData를 백엔드 필드명으로 변환
-    // console.log('[DynamicItemForm] formData before conversion:', formData);
+    console.log('========== [DynamicItemForm] 저장 시 formData ==========');
+    console.log('specification 관련:', Object.entries(formData).filter(([k]) => k.includes('specification') || k.includes('규격')));
+    console.log('is_active 관련:', Object.entries(formData).filter(([k]) => k.includes('active') || k.includes('상태')));
+    console.log('전체 formData:', formData);
+    console.log('=========================================================');
    const convertedData: Record<string, any> = {};
    Object.entries(formData).forEach(([key, value]) => {
      // "{id}_{fieldKey}" 형식 체크: 숫자로 시작하고 _가 있는 경우
@@ -1131,6 +1254,7 @@ export default function DynamicItemForm({
          // "활성", true, "true", "1", 1 등을 true로, 나머지는 false로
          const isActive = value === true || value === 'true' || value === '1' ||
                          value === 1 || value === '활성' || value === 'active';
+          console.log(`[DynamicItemForm] is_active 변환: key=${key}, value=${value}(${typeof value}) → isActive=${isActive}`);
          convertedData[backendKey] = isActive;
        } else {
          convertedData[backendKey] = value;
@@ -1142,13 +1266,18 @@ export default function DynamicItemForm({
        if (backendKey === 'is_active') {
          const isActive = value === true || value === 'true' || value === '1' ||
                          value === 1 || value === '활성' || value === 'active';
+          console.log(`[DynamicItemForm] is_active 변환 (non-field_key): key=${key}, value=${value}(${typeof value}) → isActive=${isActive}`);
          convertedData[backendKey] = isActive;
        } else {
          convertedData[backendKey] = value;
        }
      }
    });
-    // console.log('[DynamicItemForm] convertedData after conversion:', convertedData);
+    console.log('========== [DynamicItemForm] convertedData 결과 ==========');
+    console.log('is_active:', convertedData.is_active);
+    console.log('specification:', convertedData.spec || convertedData.specification);
+    console.log('전체:', convertedData);
+    console.log('===========================================================');

    // 품목명 값 추출 (품목코드와 품목명 모두 필요)
    // 2025-12-04: 절곡 부품은 별도 품목명 필드(bendingFieldKeys.itemName) 사용
@@ -1249,7 +1378,79 @@ export default function DynamicItemForm({
    // console.log('[DynamicItemForm] 제출 데이터:', submitData);

    await handleSubmit(async () => {
-      await onSubmit(submitData);
+      // 품목 저장 (ID 반환)
+      const result = await onSubmit(submitData);
+      const itemId = result?.id;
+
+      // 파일 업로드 (품목 ID가 있을 때만)
+      if (itemId) {
+        const fileUploadErrors: string[] = [];
+
+        // PT (절곡/조립) 전개도 이미지 업로드
+        if (selectedItemType === 'PT' && (isBendingPart || isAssemblyPart) && bendingDiagramFile) {
+          try {
+            console.log('[DynamicItemForm] 전개도 파일 업로드 시작:', bendingDiagramFile.name);
+            await uploadItemFile(itemId, bendingDiagramFile, 'bending_diagram', {
+              bendingDetails: bendingDetails.length > 0 ? bendingDetails.map(d => ({
+                angle: d.angle || 0,
+                length: d.width || 0,
+                type: d.direction || '',
+              })) : undefined,
+            });
+            console.log('[DynamicItemForm] 전개도 파일 업로드 성공');
+          } catch (error) {
+            console.error('[DynamicItemForm] 전개도 파일 업로드 실패:', error);
+            fileUploadErrors.push('전개도 이미지');
+          }
+        }
+
+        // FG (제품) 시방서 업로드
+        if (selectedItemType === 'FG' && specificationFile) {
+          try {
+            console.log('[DynamicItemForm] 시방서 파일 업로드 시작:', specificationFile.name);
+            await uploadItemFile(itemId, specificationFile, 'specification');
+            console.log('[DynamicItemForm] 시방서 파일 업로드 성공');
+          } catch (error) {
+            console.error('[DynamicItemForm] 시방서 파일 업로드 실패:', error);
+            fileUploadErrors.push('시방서');
+          }
+        }
+
+        // FG (제품) 인정서 업로드
+        if (selectedItemType === 'FG' && certificationFile) {
+          try {
+            console.log('[DynamicItemForm] 인정서 파일 업로드 시작:', certificationFile.name);
+            // formData에서 인정서 관련 필드 추출
+            const certNumber = Object.entries(formData).find(([key]) =>
+              key.includes('certification_number') || key.includes('인정번호')
+            )?.[1] as string | undefined;
+            const certStartDate = Object.entries(formData).find(([key]) =>
+              key.includes('certification_start') || key.includes('인정_유효기간_시작')
+            )?.[1] as string | undefined;
+            const certEndDate = Object.entries(formData).find(([key]) =>
+              key.includes('certification_end') || key.includes('인정_유효기간_종료')
+            )?.[1] as string | undefined;
+
+            await uploadItemFile(itemId, certificationFile, 'certification', {
+              certificationNumber: certNumber,
+              certificationStartDate: certStartDate,
+              certificationEndDate: certEndDate,
+            });
+            console.log('[DynamicItemForm] 인정서 파일 업로드 성공');
+          } catch (error) {
+            console.error('[DynamicItemForm] 인정서 파일 업로드 실패:', error);
+            fileUploadErrors.push('인정서');
+          }
+        }
+
+        // 파일 업로드 실패 경고 (품목은 저장됨)
+        if (fileUploadErrors.length > 0) {
+          console.warn('[DynamicItemForm] 일부 파일 업로드 실패:', fileUploadErrors.join(', '));
+          // 품목은 저장되었으므로 경고만 표시하고 진행
+          alert(`품목이 저장되었습니다.\n\n일부 파일 업로드에 실패했습니다: ${fileUploadErrors.join(', ')}\n수정 화면에서 다시 업로드해 주세요.`);
+        }
+      }
+
      router.push('/items');
      router.refresh();
    });
@@ -1484,10 +1685,36 @@ export default function DynamicItemForm({
                {/* FG(제품) 전용: 인정 유효기간 종료일 다음에 시방서/인정서 파일 업로드 */}
                {isCertEndDateField && selectedItemType === 'FG' && (
                  <div className="mt-4 space-y-4">
-                    {/* 시방서 파일 업로드 */}
+                    {/* 시방서 파일 */}
                    <div>
                      <Label htmlFor="specification_file">시방서 (PDF)</Label>
-                      <div className="mt-1.5">
+                      <div className="mt-1.5 space-y-2">
+                        {/* 기존 파일 표시 (edit 모드) */}
+                        {mode === 'edit' && existingSpecificationFile && !specificationFile && (
+                          <div className="flex items-center gap-2 p-2 bg-gray-50 rounded border">
+                            <FileText className="h-4 w-4 text-blue-600" />
+                            <span className="text-sm flex-1 truncate">{existingSpecificationFileName}</span>
+                            <a
+                              href={getStorageUrl(existingSpecificationFile) || '#'}
+                              target="_blank"
+                              rel="noopener noreferrer"
+                              className="inline-flex items-center gap-1 text-sm text-blue-600 hover:text-blue-800"
+                            >
+                              <Download className="h-3.5 w-3.5" />
+                            </a>
+                            <Button
+                              type="button"
+                              variant="ghost"
+                              size="sm"
+                              onClick={() => handleDeleteFile('specification')}
+                              disabled={isDeletingFile === 'specification' || isSubmitting}
+                              className="h-7 w-7 p-0 text-red-500 hover:text-red-700 hover:bg-red-50"
+                            >
+                              <Trash2 className="h-3.5 w-3.5" />
+                            </Button>
+                          </div>
+                        )}
+                        {/* 새 파일 업로드 */}
                        <Input
                          id="specification_file"
                          type="file"
@@ -1500,16 +1727,42 @@ export default function DynamicItemForm({
                          className="cursor-pointer"
                        />
                        {specificationFile && (
-                          <p className="text-xs text-muted-foreground mt-1">
+                          <p className="text-xs text-muted-foreground">
                            선택된 파일: {specificationFile.name}
                          </p>
                        )}
                      </div>
                    </div>
-                    {/* 인정서 파일 업로드 */}
+                    {/* 인정서 파일 */}
                    <div>
                      <Label htmlFor="certification_file">인정서 (PDF)</Label>
-                      <div className="mt-1.5">
+                      <div className="mt-1.5 space-y-2">
+                        {/* 기존 파일 표시 (edit 모드) */}
+                        {mode === 'edit' && existingCertificationFile && !certificationFile && (
+                          <div className="flex items-center gap-2 p-2 bg-gray-50 rounded border">
+                            <FileText className="h-4 w-4 text-green-600" />
+                            <span className="text-sm flex-1 truncate">{existingCertificationFileName}</span>
+                            <a
+                              href={getStorageUrl(existingCertificationFile) || '#'}
+                              target="_blank"
+                              rel="noopener noreferrer"
+                              className="inline-flex items-center gap-1 text-sm text-green-600 hover:text-green-800"
+                            >
+                              <Download className="h-3.5 w-3.5" />
+                            </a>
+                            <Button
+                              type="button"
+                              variant="ghost"
+                              size="sm"
+                              onClick={() => handleDeleteFile('certification')}
+                              disabled={isDeletingFile === 'certification' || isSubmitting}
+                              className="h-7 w-7 p-0 text-red-500 hover:text-red-700 hover:bg-red-50"
+                            >
+                              <Trash2 className="h-3.5 w-3.5" />
+                            </Button>
+                          </div>
+                        )}
+                        {/* 새 파일 업로드 */}
                        <Input
                          id="certification_file"
                          type="file"
@@ -1522,7 +1775,7 @@ export default function DynamicItemForm({
                          className="cursor-pointer"
                        />
                        {certificationFile && (
-                          <p className="text-xs text-muted-foreground mt-1">
+                          <p className="text-xs text-muted-foreground">
                            선택된 파일: {certificationFile.name}
                          </p>
                        )}
--- a/src/components/items/DynamicItemForm/types.ts
+++ b/src/components/items/DynamicItemForm/types.ts
@@ -134,14 +134,24 @@ export type DynamicFormErrors = Record<string, string>;
 // 컴포넌트 Props 타입
 // ============================================

+/**
+ * 품목 저장 결과 (파일 업로드에 필요한 ID 포함)
+ */
+export interface ItemSaveResult {
+  id: number;
+  [key: string]: unknown;
+}
+
 /**
 * DynamicItemForm 메인 컴포넌트 Props
 */
 export interface DynamicItemFormProps {
  mode: 'create' | 'edit';
-  itemType: 'FG' | 'PT' | 'SM' | 'RM' | 'CS';
+  itemType?: 'FG' | 'PT' | 'SM' | 'RM' | 'CS';
+  itemId?: number;  // edit 모드에서 파일 업로드에 사용
  initialData?: DynamicFormData;
-  onSubmit: (data: DynamicFormData) => Promise<void>;
+  /** 품목 저장 후 결과 반환 (create: id 필수, edit: id 선택) */
+  onSubmit: (data: DynamicFormData) => Promise<ItemSaveResult | void>;
 }

 /**
--- a/src/components/items/ItemDetailClient.tsx
+++ b/src/components/items/ItemDetailClient.tsx
@@ -26,7 +26,7 @@ import {
  TableHeader,
  TableRow,
 } from '@/components/ui/table';
-import { ArrowLeft, Edit, Package } from 'lucide-react';
+import { ArrowLeft, Edit, Package, FileImage, Download, FileText, Check, Calendar } from 'lucide-react';

 interface ItemDetailClientProps {
  item: ItemMaster;
@@ -60,6 +60,22 @@ function formatItemCodeForAssembly(item: ItemMaster): string {
  return item.itemCode;
 }

+/**
+ * Storage 경로를 전체 URL로 변환
+ * - 이미 전체 URL인 경우 그대로 반환
+ * - 상대 경로인 경우 API URL + /storage/ 붙여서 반환
+ */
+function getStorageUrl(path: string | undefined): string | null {
+  if (!path) return null;
+  // 이미 전체 URL인 경우
+  if (path.startsWith('http://') || path.startsWith('https://')) {
+    return path;
+  }
+  // 상대 경로인 경우
+  const apiUrl = process.env.NEXT_PUBLIC_API_URL || '';
+  return `${apiUrl}/storage/${path}`;
+}
+
 export default function ItemDetailClient({ item }: ItemDetailClientProps) {
  const router = useRouter();

@@ -339,6 +355,186 @@ export default function ItemDetailClient({ item }: ItemDetailClientProps) {
        </Card>
      )}

+      {/* 절곡품/조립품 전개도 정보 */}
+      {item.itemType === 'PT' &&
+       (item.partType === 'BENDING' || item.partType === 'ASSEMBLY') &&
+       (item.bendingDiagram || (item.bendingDetails && item.bendingDetails.length > 0)) && (
+        <Card>
+          <CardHeader className="pb-3">
+            <CardTitle className="flex items-center gap-2 text-base md:text-lg">
+              <FileImage className="h-4 w-4 md:h-5 md:w-5" />
+              {item.partType === 'ASSEMBLY' ? '조립품 전개도 (바라시)' : '절곡품 전개도 (바라시)'}
+            </CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-4 md:space-y-6 pt-0">
+            {/* 전개도 이미지 */}
+            {item.bendingDiagram ? (
+              <div>
+                <Label className="text-muted-foreground text-xs md:text-sm">전개도 이미지</Label>
+                <div className="mt-2 p-2 md:p-4 border rounded-lg bg-gray-50">
+                  {/* eslint-disable-next-line @next/next/no-img-element */}
+                  <img
+                    src={getStorageUrl(item.bendingDiagram) || ''}
+                    alt="전개도"
+                    className="max-w-full h-auto max-h-64 md:max-h-96 mx-auto border rounded"
+                  />
+                </div>
+              </div>
+            ) : (
+              <div className="text-center py-6 md:py-8 text-xs md:text-sm text-muted-foreground border rounded-lg bg-gray-50">
+                등록된 전개도 이미지가 없습니다.
+              </div>
+            )}
+
+            {/* 전개도 상세 데이터 */}
+            {item.bendingDetails && item.bendingDetails.length > 0 && (
+              <div>
+                <Label className="text-muted-foreground text-xs md:text-sm">전개도 상세 데이터</Label>
+                <div className="mt-2 overflow-x-auto bg-white rounded border">
+                  <Table>
+                    <TableHeader>
+                      <TableRow className="bg-gray-100">
+                        <TableHead className="px-1 md:px-2 py-1 md:py-2 text-center">번호</TableHead>
+                        <TableHead className="px-1 md:px-2 py-1 md:py-2 text-center">입력</TableHead>
+                        <TableHead className="px-1 md:px-2 py-1 md:py-2 text-center">연신율</TableHead>
+                        <TableHead className="px-1 md:px-2 py-1 md:py-2 text-center">연신율계산후</TableHead>
+                        <TableHead className="px-1 md:px-2 py-1 md:py-2 text-center">합계</TableHead>
+                        <TableHead className="px-1 md:px-2 py-1 md:py-2 text-center">음영</TableHead>
+                        <TableHead className="px-1 md:px-2 py-1 md:py-2 text-center">A각</TableHead>
+                      </TableRow>
+                    </TableHeader>
+                    <TableBody>
+                      {item.bendingDetails.map((detail, detailIndex) => {
+                        const calculated = detail.input + detail.elongation;
+                        let sum = 0;
+                        for (let i = 0; i <= detailIndex; i++) {
+                          const d = item.bendingDetails![i];
+                          sum += d.input + d.elongation;
+                        }
+
+                        return (
+                          <TableRow key={detail.id} className={detail.shaded ? "bg-gray-200" : ""}>
+                            <TableCell className="px-1 md:px-2 py-1 text-center">{detail.no}</TableCell>
+                            <TableCell className="px-1 md:px-2 py-1 text-center">{detail.input}</TableCell>
+                            <TableCell className="px-1 md:px-2 py-1 text-center">{detail.elongation}</TableCell>
+                            <TableCell className="px-1 md:px-2 py-1 text-center bg-blue-50">{calculated}</TableCell>
+                            <TableCell className="px-1 md:px-2 py-1 text-center bg-green-50 font-medium">{sum}</TableCell>
+                            <TableCell className="px-1 md:px-2 py-1 text-center">
+                              {detail.shaded ? <Check className="h-3 w-3 md:h-4 md:w-4 inline" /> : "-"}
+                            </TableCell>
+                            <TableCell className="px-1 md:px-2 py-1 text-center">{detail.aAngle || "-"}</TableCell>
+                          </TableRow>
+                        );
+                      })}
+                    </TableBody>
+                  </Table>
+                </div>
+                <div className="mt-2 p-2 md:p-3 bg-blue-50 rounded-lg border border-blue-200">
+                  <p className="text-xs md:text-sm">
+                    <span className="font-medium">최종 전개 길이:</span>{" "}
+                    <span className="text-base md:text-lg font-bold text-blue-700">
+                      {item.bendingDetails.reduce((sum, d) => sum + d.input + d.elongation, 0)} mm
+                    </span>
+                  </p>
+                </div>
+              </div>
+            )}
+          </CardContent>
+        </Card>
+      )}
+
+      {/* 제품(FG) 인정 정보 및 첨부 파일 */}
+      {item.itemType === 'FG' && (item.certificationNumber || item.specificationFile || item.certificationFile) && (
+        <Card>
+          <CardHeader className="pb-3">
+            <CardTitle className="flex items-center gap-2 text-base md:text-lg">
+              <FileText className="h-4 w-4 md:h-5 md:w-5" />
+              인정 정보 및 첨부 파일
+            </CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-4 md:space-y-6 pt-0">
+            {/* 인정 정보 */}
+            {item.certificationNumber && (
+              <div className="grid grid-cols-1 md:grid-cols-3 gap-4 p-4 bg-gray-50 rounded-lg border">
+                <div>
+                  <Label className="text-muted-foreground text-xs md:text-sm">인정번호</Label>
+                  <p className="mt-1 font-medium">{item.certificationNumber}</p>
+                </div>
+                {item.certificationStartDate && (
+                  <div>
+                    <Label className="text-muted-foreground text-xs md:text-sm flex items-center gap-1">
+                      <Calendar className="h-3 w-3" />
+                      유효기간 시작
+                    </Label>
+                    <p className="mt-1">{new Date(item.certificationStartDate).toLocaleDateString('ko-KR')}</p>
+                  </div>
+                )}
+                {item.certificationEndDate && (
+                  <div>
+                    <Label className="text-muted-foreground text-xs md:text-sm flex items-center gap-1">
+                      <Calendar className="h-3 w-3" />
+                      유효기간 종료
+                    </Label>
+                    <p className="mt-1">{new Date(item.certificationEndDate).toLocaleDateString('ko-KR')}</p>
+                  </div>
+                )}
+              </div>
+            )}
+
+            {/* 첨부 파일 */}
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              {/* 시방서 */}
+              <div className="p-4 border rounded-lg">
+                <Label className="text-muted-foreground text-xs md:text-sm">시방서</Label>
+                {item.specificationFile ? (
+                  <div className="mt-2 flex items-center gap-2">
+                    <FileText className="h-4 w-4 text-blue-600" />
+                    <span className="text-sm truncate flex-1">
+                      {item.specificationFileName || '시방서 파일'}
+                    </span>
+                    <a
+                      href={getStorageUrl(item.specificationFile) || '#'}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="inline-flex items-center gap-1 text-sm text-blue-600 hover:text-blue-800"
+                    >
+                      <Download className="h-4 w-4" />
+                      다운로드
+                    </a>
+                  </div>
+                ) : (
+                  <p className="mt-2 text-sm text-muted-foreground">등록된 시방서가 없습니다.</p>
+                )}
+              </div>
+
+              {/* 인정서 */}
+              <div className="p-4 border rounded-lg">
+                <Label className="text-muted-foreground text-xs md:text-sm">인정서</Label>
+                {item.certificationFile ? (
+                  <div className="mt-2 flex items-center gap-2">
+                    <FileText className="h-4 w-4 text-green-600" />
+                    <span className="text-sm truncate flex-1">
+                      {item.certificationFileName || '인정서 파일'}
+                    </span>
+                    <a
+                      href={getStorageUrl(item.certificationFile) || '#'}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="inline-flex items-center gap-1 text-sm text-green-600 hover:text-green-800"
+                    >
+                      <Download className="h-4 w-4" />
+                      다운로드
+                    </a>
+                  </div>
+                ) : (
+                  <p className="mt-2 text-sm text-muted-foreground">등록된 인정서가 없습니다.</p>
+                )}
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+      )}
+
      {/* BOM 정보 - 절곡 부품은 제외 */}
      {(item.itemType === 'FG' || (item.itemType === 'PT' && item.partType !== 'BENDING')) && item.bom && item.bom.length > 0 && (
        <Card>
--- a/src/components/pricing/PricingFinalizeDialog.tsx
+++ b/src/components/pricing/PricingFinalizeDialog.tsx
@@ -0,0 +1,94 @@
+/**
+ * 단가 최종 확정 다이얼로그
+ */
+
+'use client';
+
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { Lock, CheckCircle2 } from 'lucide-react';
+
+interface PricingFinalizeDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onConfirm: () => void;
+  itemName: string;
+  purchasePrice?: number;
+  salesPrice?: number;
+  marginRate?: number;
+}
+
+export function PricingFinalizeDialog({
+  open,
+  onOpenChange,
+  onConfirm,
+  itemName,
+  purchasePrice,
+  salesPrice,
+  marginRate,
+}: PricingFinalizeDialogProps) {
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <Lock className="h-5 w-5 text-purple-600" />
+            최종 확정
+          </DialogTitle>
+          <DialogDescription>
+            단가를 최종 확정하시겠습니까? 확정 후에는 수정할 수 없습니다.
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="py-4">
+          <div className="bg-purple-50 border border-purple-200 rounded-lg p-4 space-y-2 text-sm">
+            <div className="flex justify-between">
+              <span className="text-muted-foreground">품목:</span>
+              <span className="font-semibold">{itemName}</span>
+            </div>
+            <div className="flex justify-between">
+              <span className="text-muted-foreground">매입단가:</span>
+              <span className="font-semibold">
+                {purchasePrice?.toLocaleString() || '-'}원
+              </span>
+            </div>
+            <div className="flex justify-between">
+              <span className="text-muted-foreground">판매단가:</span>
+              <span className="font-semibold">
+                {salesPrice?.toLocaleString() || '-'}원
+              </span>
+            </div>
+            <div className="flex justify-between">
+              <span className="text-muted-foreground">마진율:</span>
+              <span className="font-semibold">
+                {marginRate?.toFixed(1) || '-'}%
+              </span>
+            </div>
+          </div>
+        </div>
+
+        <DialogFooter>
+          <Button variant="outline" onClick={() => onOpenChange(false)}>
+            취소
+          </Button>
+          <Button
+            onClick={onConfirm}
+            className="bg-purple-600 hover:bg-purple-700"
+          >
+            <CheckCircle2 className="h-4 w-4 mr-2" />
+            최종 확정
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+export default PricingFinalizeDialog;
--- a/src/components/pricing/PricingFormClient.tsx
+++ b/src/components/pricing/PricingFormClient.tsx
@@ -0,0 +1,769 @@
+/**
+ * 단가 등록/수정 폼 클라이언트 컴포넌트
+ *
+ * 기능:
+ * - 품목 정보 표시 (읽기전용)
+ * - 단가 정보 입력
+ * - 원가/마진 자동 계산
+ * - 반올림 규칙 적용
+ * - 수정 이력 관리
+ */
+
+'use client';
+
+import { useState, useEffect, useCallback, useMemo } from 'react';
+import { useRouter } from 'next/navigation';
+import {
+  DollarSign,
+  Package,
+  ArrowLeft,
+  Save,
+  Calculator,
+  TrendingUp,
+  AlertCircle,
+  History,
+  CheckCircle2,
+  Lock,
+} from 'lucide-react';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Textarea } from '@/components/ui/textarea';
+import { Badge } from '@/components/ui/badge';
+import { Separator } from '@/components/ui/separator';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { toast } from 'sonner';
+
+import type {
+  PricingData,
+  PricingFormData,
+  ItemInfo,
+  RoundingRule,
+  ItemType,
+} from './types';
+import {
+  ITEM_TYPE_LABELS,
+  UNIT_OPTIONS,
+  ROUNDING_RULE_OPTIONS,
+  ROUNDING_UNIT_OPTIONS,
+} from './types';
+
+// 다이얼로그 컴포넌트들 (추후 분리)
+import { PricingHistoryDialog } from './PricingHistoryDialog';
+import { PricingRevisionDialog } from './PricingRevisionDialog';
+import { PricingFinalizeDialog } from './PricingFinalizeDialog';
+
+interface PricingFormClientProps {
+  mode: 'create' | 'edit';
+  itemInfo?: ItemInfo;
+  initialData?: PricingData;
+  onSave?: (data: PricingData, isRevision?: boolean, revisionReason?: string) => Promise<void>;
+}
+
+export function PricingFormClient({
+  mode,
+  itemInfo,
+  initialData,
+  onSave,
+}: PricingFormClientProps) {
+  const router = useRouter();
+  const isEditMode = mode === 'edit';
+
+  // 품목 정보 (신규: itemInfo, 수정: initialData)
+  const displayItemCode = initialData?.itemCode || itemInfo?.itemCode || '';
+  const displayItemName = initialData?.itemName || itemInfo?.itemName || '';
+  const displayItemType = initialData?.itemType || itemInfo?.itemType || '';
+  const displaySpecification = initialData?.specification || itemInfo?.specification || '';
+  const displayUnit = initialData?.unit || itemInfo?.unit || 'EA';
+
+  // 폼 상태
+  const [effectiveDate, setEffectiveDate] = useState(
+    initialData?.effectiveDate || new Date().toISOString().split('T')[0]
+  );
+  const [receiveDate, setReceiveDate] = useState(initialData?.receiveDate || '');
+  const [author, setAuthor] = useState(initialData?.author || '');
+  const [purchasePrice, setPurchasePrice] = useState(initialData?.purchasePrice || 0);
+  const [processingCost, setProcessingCost] = useState(initialData?.processingCost || 0);
+  const [loss, setLoss] = useState(initialData?.loss || 0);
+  const [roundingRule, setRoundingRule] = useState<RoundingRule>(
+    initialData?.roundingRule || 'round'
+  );
+  const [roundingUnit, setRoundingUnit] = useState(initialData?.roundingUnit || 1);
+  const [marginRate, setMarginRate] = useState(initialData?.marginRate || 0);
+  const [salesPrice, setSalesPrice] = useState(initialData?.salesPrice || 0);
+  const [supplier, setSupplier] = useState(initialData?.supplier || '');
+  const [note, setNote] = useState(initialData?.note || '');
+  const [unit, setUnit] = useState(displayUnit);
+
+  // 에러 상태
+  const [errors, setErrors] = useState<Record<string, boolean>>({});
+
+  // 다이얼로그 상태
+  const [showHistoryDialog, setShowHistoryDialog] = useState(false);
+  const [showRevisionDialog, setShowRevisionDialog] = useState(false);
+  const [showFinalizeDialog, setShowFinalizeDialog] = useState(false);
+
+  // 로딩 상태
+  const [isSaving, setIsSaving] = useState(false);
+
+  // 반올림 적용 함수
+  const applyRounding = useCallback(
+    (value: number, rule: RoundingRule, unit: number): number => {
+      if (unit <= 0) return Math.round(value);
+      switch (rule) {
+        case 'ceil':
+          return Math.ceil(value / unit) * unit;
+        case 'floor':
+          return Math.floor(value / unit) * unit;
+        default:
+          return Math.round(value / unit) * unit;
+      }
+    },
+    []
+  );
+
+  // LOSS 적용 원가 계산
+  const costWithLoss = useMemo(() => {
+    const basePrice = (purchasePrice || 0) + (processingCost || 0);
+    const lossRate = (loss || 0) / 100;
+    return Math.round(basePrice * (1 + lossRate));
+  }, [purchasePrice, processingCost, loss]);
+
+  // 마진율 → 판매단가 계산
+  const handleMarginRateChange = useCallback(
+    (rate: number) => {
+      setMarginRate(rate);
+      if (costWithLoss > 0) {
+        const calculatedPrice = costWithLoss * (1 + rate / 100);
+        const roundedPrice = applyRounding(calculatedPrice, roundingRule, roundingUnit);
+        setSalesPrice(Math.round(roundedPrice));
+      } else {
+        setSalesPrice(0);
+      }
+    },
+    [costWithLoss, roundingRule, roundingUnit, applyRounding]
+  );
+
+  // 판매단가 → 마진율 계산
+  const handleSalesPriceChange = useCallback(
+    (price: number) => {
+      setSalesPrice(price);
+      if (costWithLoss > 0) {
+        const calculatedMarginRate = ((price - costWithLoss) / costWithLoss) * 100;
+        setMarginRate(parseFloat(calculatedMarginRate.toFixed(1)));
+      } else {
+        setMarginRate(0);
+      }
+    },
+    [costWithLoss]
+  );
+
+  // 원가 변경 시 판매가 자동 재계산
+  useEffect(() => {
+    if (marginRate > 0 && (purchasePrice > 0 || processingCost > 0)) {
+      const calculatedPrice = costWithLoss * (1 + marginRate / 100);
+      const roundedPrice = applyRounding(calculatedPrice, roundingRule, roundingUnit);
+      const finalPrice = Math.round(roundedPrice);
+      if (finalPrice !== salesPrice) {
+        setSalesPrice(finalPrice);
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [purchasePrice, processingCost, loss, roundingRule, roundingUnit]);
+
+  // 마진 금액 계산
+  const marginAmount = useMemo(() => {
+    return salesPrice - costWithLoss;
+  }, [salesPrice, costWithLoss]);
+
+  // 유효성 검사
+  const validateForm = useCallback(() => {
+    const newErrors: Record<string, boolean> = {};
+    if (!effectiveDate) newErrors.effectiveDate = true;
+    if (purchasePrice <= 0 && salesPrice <= 0) {
+      newErrors.purchasePrice = true;
+      newErrors.salesPrice = true;
+    }
+    setErrors(newErrors);
+    return Object.keys(newErrors).length === 0;
+  }, [effectiveDate, purchasePrice, salesPrice]);
+
+  // 저장 처리
+  const handleSave = async (isRevision = false, revisionReason = '') => {
+    if (!validateForm()) {
+      toast.error('필수 항목을 입력해주세요.');
+      return;
+    }
+
+    // 수정 모드이고 리비전 있으면 수정 이력 다이얼로그
+    if (isEditMode && initialData && !isRevision &&
+        (initialData.currentRevision > 0 || initialData.isFinal)) {
+      setShowRevisionDialog(true);
+      return;
+    }
+
+    setIsSaving(true);
+
+    try {
+      const pricingData: PricingData = {
+        id: initialData?.id || `PR-${Date.now()}`,
+        itemId: initialData?.itemId || itemInfo?.id || '',
+        itemCode: displayItemCode,
+        itemName: displayItemName,
+        itemType: displayItemType,
+        specification: displaySpecification,
+        unit: unit,
+        effectiveDate,
+        receiveDate: receiveDate || undefined,
+        author: author || undefined,
+        purchasePrice: purchasePrice || undefined,
+        processingCost: processingCost || undefined,
+        loss: loss || undefined,
+        roundingRule: roundingRule || undefined,
+        roundingUnit: roundingUnit || undefined,
+        marginRate: marginRate || undefined,
+        salesPrice: salesPrice || undefined,
+        supplier: supplier || undefined,
+        note: note || undefined,
+        currentRevision: isRevision
+          ? (initialData?.currentRevision || 0) + 1
+          : initialData?.currentRevision || 0,
+        isFinal: initialData?.isFinal || false,
+        revisions: initialData?.revisions || [],
+        status: isRevision ? 'active' : initialData?.status || 'draft',
+        createdAt: initialData?.createdAt || new Date().toISOString(),
+        createdBy: initialData?.createdBy || '관리자',
+        updatedAt: new Date().toISOString(),
+        updatedBy: '관리자',
+      };
+
+      if (onSave) {
+        await onSave(pricingData, isRevision, revisionReason);
+      }
+
+      toast.success(isEditMode ? '단가가 수정되었습니다.' : '단가가 등록되었습니다.');
+      router.push('/sales/pricing-management');
+    } catch (error) {
+      toast.error('저장 중 오류가 발생했습니다.');
+      console.error(error);
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  // 최종 확정 처리
+  const handleFinalize = async () => {
+    if (!initialData) return;
+
+    setIsSaving(true);
+    try {
+      const finalizedData: PricingData = {
+        ...initialData,
+        effectiveDate,
+        receiveDate: receiveDate || undefined,
+        author: author || undefined,
+        purchasePrice: purchasePrice || undefined,
+        processingCost: processingCost || undefined,
+        loss: loss || undefined,
+        roundingRule: roundingRule || undefined,
+        roundingUnit: roundingUnit || undefined,
+        marginRate: marginRate || undefined,
+        salesPrice: salesPrice || undefined,
+        supplier: supplier || undefined,
+        note: note || undefined,
+        isFinal: true,
+        finalizedDate: new Date().toISOString(),
+        finalizedBy: '관리자',
+        status: 'finalized',
+        updatedAt: new Date().toISOString(),
+        updatedBy: '관리자',
+      };
+
+      if (onSave) {
+        await onSave(finalizedData);
+      }
+
+      toast.success('단가가 최종 확정되었습니다.');
+      setShowFinalizeDialog(false);
+      router.push('/sales/pricing-management');
+    } catch (error) {
+      toast.error('확정 중 오류가 발생했습니다.');
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  return (
+    <div className="container mx-auto px-4 py-6 max-w-5xl">
+      {/* 헤더 */}
+      <div className="flex items-center gap-3 mb-6">
+        <div className="p-2 bg-blue-100 rounded-lg">
+          <DollarSign className="h-6 w-6 text-blue-600" />
+        </div>
+        <div>
+          <h1 className="text-2xl font-bold">
+            단가 {isEditMode ? '수정' : '등록'}
+          </h1>
+          <p className="text-sm text-muted-foreground">
+            {isEditMode
+              ? '품목의 단가 정보를 수정합니다'
+              : '새로운 품목의 단가 정보를 등록합니다'}
+          </p>
+        </div>
+      </div>
+
+      {/* 상태 표시 (수정 모드) */}
+      {isEditMode && initialData && (
+        <div className="mb-4 flex gap-2 justify-end">
+          {initialData.isFinal && (
+            <Badge className="bg-purple-600">
+              <Lock className="h-3 w-3 mr-1" />
+              최종 확정됨
+            </Badge>
+          )}
+          {initialData.currentRevision > 0 && (
+            <Badge variant="outline" className="bg-blue-50 text-blue-700">
+              <History className="h-3 w-3 mr-1" />
+              수정 {initialData.currentRevision}차
+            </Badge>
+          )}
+          {initialData.status === 'active' && !initialData.isFinal && (
+            <Badge variant="outline" className="bg-green-50 text-green-700 border-green-200">
+              활성
+            </Badge>
+          )}
+        </div>
+      )}
+
+      {/* 품목 정보 카드 */}
+      <Card className="mb-6 border-2 border-blue-200">
+        <CardHeader className="bg-blue-50">
+          <CardTitle className="flex items-center gap-2">
+            <Package className="h-5 w-5 text-blue-600" />
+            품목 정보
+          </CardTitle>
+        </CardHeader>
+        <CardContent className="pt-6">
+          <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+            <div>
+              <Label className="text-sm text-muted-foreground">품목 코드</Label>
+              <div className="mt-1 font-semibold">{displayItemCode}</div>
+            </div>
+            <div>
+              <Label className="text-sm text-muted-foreground">품목명</Label>
+              <div className="mt-1 font-semibold">{displayItemName}</div>
+            </div>
+            <div>
+              <Label className="text-sm text-muted-foreground">품목 유형</Label>
+              <div className="mt-1">
+                <Badge variant="outline">
+                  {ITEM_TYPE_LABELS[displayItemType as ItemType] || displayItemType}
+                </Badge>
+              </div>
+            </div>
+            <div>
+              <Label className="text-sm text-muted-foreground">단위</Label>
+              <div className="mt-1 font-semibold">{displayUnit}</div>
+            </div>
+            {displaySpecification && (
+              <div className="col-span-2 md:col-span-4">
+                <Label className="text-sm text-muted-foreground">규격</Label>
+                <div className="mt-1">{displaySpecification}</div>
+              </div>
+            )}
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* 단가 정보 카드 */}
+      <Card className="mb-6">
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            <DollarSign className="h-5 w-5" />
+            단가 정보
+          </CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-6">
+          {/* 적용일 */}
+          <div>
+            <Label>
+              적용일 <span className="text-red-500">*</span>
+            </Label>
+            <Input
+              type="date"
+              value={effectiveDate}
+              onChange={(e) => {
+                setEffectiveDate(e.target.value);
+                setErrors((prev) => ({ ...prev, effectiveDate: false }));
+              }}
+              className={errors.effectiveDate ? 'border-red-500' : ''}
+            />
+            {errors.effectiveDate && (
+              <p className="text-sm text-red-500 mt-1 flex items-center gap-1">
+                <AlertCircle className="h-3 w-3" />
+                적용일을 선택해주세요
+              </p>
+            )}
+          </div>
+
+          <Separator />
+
+          {/* 공급업체 및 기본 정보 */}
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <div>
+              <Label>공급업체</Label>
+              <Input
+                value={supplier}
+                onChange={(e) => setSupplier(e.target.value)}
+                placeholder="공급업체명을 입력하세요"
+              />
+            </div>
+            <div>
+              <Label>입고일</Label>
+              <Input
+                type="date"
+                value={receiveDate}
+                onChange={(e) => setReceiveDate(e.target.value)}
+              />
+            </div>
+            <div>
+              <Label>작성자</Label>
+              <Input
+                value={author}
+                onChange={(e) => setAuthor(e.target.value)}
+                placeholder="작성자명을 입력하세요"
+              />
+            </div>
+          </div>
+
+          <Separator />
+
+          {/* 입고가 및 단위 */}
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <div>
+              <Label>
+                입고가 <span className="text-red-500">*</span>
+              </Label>
+              <div className="relative">
+                <Input
+                  type="number"
+                  value={purchasePrice || ''}
+                  onChange={(e) => {
+                    setPurchasePrice(parseInt(e.target.value) || 0);
+                    setErrors((prev) => ({ ...prev, purchasePrice: false, salesPrice: false }));
+                  }}
+                  placeholder="0"
+                  className={errors.purchasePrice ? 'border-red-500 pr-12' : 'pr-12'}
+                />
+                <span className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground">
+                  원
+                </span>
+              </div>
+            </div>
+            <div>
+              <Label>단위</Label>
+              <Select value={unit} onValueChange={setUnit}>
+                <SelectTrigger>
+                  <SelectValue placeholder="단위 선택" />
+                </SelectTrigger>
+                <SelectContent>
+                  {UNIT_OPTIONS.map((option) => (
+                    <SelectItem key={option.value} value={option.value}>
+                      {option.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+              <p className="text-xs text-muted-foreground mt-1">
+                단가 적용 시 사용될 단위
+              </p>
+            </div>
+            <div>
+              <Label>LOSS (%)</Label>
+              <div className="relative">
+                <Input
+                  type="number"
+                  step="0.1"
+                  value={loss || ''}
+                  onChange={(e) => setLoss(parseFloat(e.target.value) || 0)}
+                  placeholder="0"
+                  className="pr-12"
+                />
+                <span className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground">
+                  %
+                </span>
+              </div>
+              <p className="text-xs text-muted-foreground mt-1">
+                제조 과정에서 발생하는 손실율
+              </p>
+            </div>
+            <div>
+              <Label>가공비</Label>
+              <div className="relative">
+                <Input
+                  type="number"
+                  value={processingCost || ''}
+                  onChange={(e) => setProcessingCost(parseInt(e.target.value) || 0)}
+                  placeholder="0"
+                  className="pr-12"
+                />
+                <span className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground">
+                  원
+                </span>
+              </div>
+            </div>
+          </div>
+
+          {/* 원가 계산 섹션 */}
+          {(purchasePrice > 0 || processingCost > 0) && (
+            <div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
+              <div className="flex items-center gap-2 mb-2">
+                <Calculator className="h-4 w-4 text-blue-600" />
+                <Label className="text-blue-900">원가 계산</Label>
+              </div>
+              <div className="space-y-1 text-sm">
+                <div className="flex justify-between">
+                  <span className="text-muted-foreground">입고가:</span>
+                  <span>{(purchasePrice || 0).toLocaleString()}원</span>
+                </div>
+                <div className="flex justify-between">
+                  <span className="text-muted-foreground">가공비:</span>
+                  <span>{(processingCost || 0).toLocaleString()}원</span>
+                </div>
+                <Separator className="my-2" />
+                <div className="flex justify-between">
+                  <span className="text-muted-foreground">소계:</span>
+                  <span>{((purchasePrice || 0) + (processingCost || 0)).toLocaleString()}원</span>
+                </div>
+                {loss > 0 && (
+                  <div className="flex justify-between text-orange-600">
+                    <span>LOSS ({loss}%):</span>
+                    <span>
+                      +{(((purchasePrice || 0) + (processingCost || 0)) * (loss / 100)).toLocaleString()}원
+                    </span>
+                  </div>
+                )}
+                <Separator className="my-2" />
+                <div className="flex justify-between font-semibold text-base">
+                  <span className="text-blue-900">LOSS 적용 원가:</span>
+                  <span className="text-blue-600">{costWithLoss.toLocaleString()}원</span>
+                </div>
+              </div>
+            </div>
+          )}
+
+          <Separator />
+
+          {/* 반올림 설정 */}
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <div>
+              <Label>반올림 규칙</Label>
+              <Select
+                value={roundingRule}
+                onValueChange={(value) => setRoundingRule(value as RoundingRule)}
+              >
+                <SelectTrigger>
+                  <SelectValue placeholder="선택하세요" />
+                </SelectTrigger>
+                <SelectContent>
+                  {ROUNDING_RULE_OPTIONS.map((option) => (
+                    <SelectItem key={option.value} value={option.value}>
+                      {option.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            <div>
+              <Label>반올림 단위</Label>
+              <Select
+                value={roundingUnit.toString()}
+                onValueChange={(value) => setRoundingUnit(parseInt(value))}
+              >
+                <SelectTrigger>
+                  <SelectValue placeholder="선택하세요" />
+                </SelectTrigger>
+                <SelectContent>
+                  {ROUNDING_UNIT_OPTIONS.map((option) => (
+                    <SelectItem key={option.value} value={option.value.toString()}>
+                      {option.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+              <p className="text-xs text-muted-foreground mt-1">
+                단가 계산 시 적용될 반올림 단위
+              </p>
+            </div>
+          </div>
+
+          <Separator />
+
+          {/* 마진율/판매단가 */}
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <div>
+              <Label>마진율 (%)</Label>
+              <div className="relative">
+                <Input
+                  type="number"
+                  step="0.1"
+                  value={marginRate || ''}
+                  onChange={(e) => handleMarginRateChange(parseFloat(e.target.value) || 0)}
+                  placeholder="0"
+                  className="pr-12"
+                />
+                <span className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground">
+                  %
+                </span>
+              </div>
+              <p className="text-xs text-muted-foreground mt-1">
+                마진율을 입력하면 판매단가가 자동 계산됩니다
+              </p>
+            </div>
+            <div>
+              <Label>
+                판매단가 <span className="text-red-500">*</span>
+              </Label>
+              <div className="relative">
+                <Input
+                  type="number"
+                  value={salesPrice || ''}
+                  onChange={(e) => {
+                    handleSalesPriceChange(parseInt(e.target.value) || 0);
+                    setErrors((prev) => ({ ...prev, purchasePrice: false, salesPrice: false }));
+                  }}
+                  placeholder="0"
+                  className={errors.salesPrice ? 'border-red-500 pr-12' : 'pr-12'}
+                />
+                <span className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground">
+                  원
+                </span>
+              </div>
+              <p className="text-xs text-muted-foreground mt-1">
+                판매단가를 직접 입력하면 마진율이 자동 계산됩니다
+              </p>
+            </div>
+          </div>
+
+          {(errors.purchasePrice || errors.salesPrice) && (
+            <p className="text-sm text-red-500 flex items-center gap-1">
+              <AlertCircle className="h-3 w-3" />
+              입고가 또는 판매단가 중 최소 하나를 입력해주세요
+            </p>
+          )}
+
+          {/* 마진 계산 섹션 */}
+          {salesPrice > 0 && (purchasePrice > 0 || processingCost > 0) && (
+            <div className="bg-green-50 border border-green-200 rounded-lg p-4">
+              <div className="flex items-center gap-2 mb-2">
+                <TrendingUp className="h-4 w-4 text-green-600" />
+                <Label className="text-green-900">마진 계산</Label>
+              </div>
+              <div className="space-y-1 text-sm">
+                <div className="flex justify-between">
+                  <span className="text-muted-foreground">LOSS 적용 원가:</span>
+                  <span>{costWithLoss.toLocaleString()}원</span>
+                </div>
+                <div className="flex justify-between">
+                  <span className="text-muted-foreground">판매단가:</span>
+                  <span>{salesPrice.toLocaleString()}원</span>
+                </div>
+                <Separator className="my-2" />
+                <div className="flex justify-between font-semibold text-base">
+                  <span className="text-green-900">마진:</span>
+                  <span className="text-green-600">
+                    {marginAmount.toLocaleString()}원 ({marginRate.toFixed(1)}%)
+                  </span>
+                </div>
+              </div>
+            </div>
+          )}
+
+          <Separator />
+
+          {/* 비고 */}
+          <div>
+            <Label>비고</Label>
+            <Textarea
+              value={note}
+              onChange={(e) => setNote(e.target.value)}
+              placeholder="비고사항을 입력하세요"
+              rows={3}
+            />
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* 버튼 영역 */}
+      <div className="flex gap-2 justify-between">
+        <div className="flex gap-2">
+          {isEditMode && initialData?.revisions && initialData.revisions.length > 0 && (
+            <Button variant="outline" onClick={() => setShowHistoryDialog(true)}>
+              <History className="h-4 w-4 mr-2" />
+              이력 조회 ({initialData.currentRevision}차)
+            </Button>
+          )}
+        </div>
+        <div className="flex gap-2">
+          <Button
+            variant="outline"
+            onClick={() => router.push('/sales/pricing-management')}
+            className="min-w-[100px]"
+          >
+            <ArrowLeft className="h-4 w-4 mr-2" />
+            취소
+          </Button>
+          {isEditMode && initialData && !initialData.isFinal && (
+            <Button
+              onClick={() => setShowFinalizeDialog(true)}
+              className="min-w-[100px] bg-purple-600 hover:bg-purple-700"
+            >
+              <CheckCircle2 className="h-4 w-4 mr-2" />
+              최종 확정
+            </Button>
+          )}
+          <Button
+            onClick={() => handleSave()}
+            className="min-w-[100px] bg-blue-600 hover:bg-blue-700"
+            disabled={initialData?.isFinal || isSaving}
+          >
+            <Save className="h-4 w-4 mr-2" />
+            {initialData?.isFinal ? '확정됨' : '저장'}
+          </Button>
+        </div>
+      </div>
+
+      {/* 다이얼로그들 */}
+      <PricingHistoryDialog
+        open={showHistoryDialog}
+        onOpenChange={setShowHistoryDialog}
+        pricingData={initialData}
+      />
+
+      <PricingRevisionDialog
+        open={showRevisionDialog}
+        onOpenChange={setShowRevisionDialog}
+        onConfirm={(reason) => handleSave(true, reason)}
+      />
+
+      <PricingFinalizeDialog
+        open={showFinalizeDialog}
+        onOpenChange={setShowFinalizeDialog}
+        onConfirm={handleFinalize}
+        itemName={displayItemName}
+        purchasePrice={purchasePrice}
+        salesPrice={salesPrice}
+        marginRate={marginRate}
+      />
+    </div>
+  );
+}
+
+export default PricingFormClient;
--- a/src/components/pricing/PricingHistoryDialog.tsx
+++ b/src/components/pricing/PricingHistoryDialog.tsx
@@ -0,0 +1,168 @@
+/**
+ * 단가 이력 조회 다이얼로그
+ */
+
+'use client';
+
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Badge } from '@/components/ui/badge';
+import { Separator } from '@/components/ui/separator';
+import { History } from 'lucide-react';
+import type { PricingData } from './types';
+
+interface PricingHistoryDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  pricingData?: PricingData | null;
+}
+
+export function PricingHistoryDialog({
+  open,
+  onOpenChange,
+  pricingData,
+}: PricingHistoryDialogProps) {
+  if (!pricingData) return null;
+
+  const hasRevisions = pricingData.revisions && pricingData.revisions.length > 0;
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-4xl max-h-[80vh] overflow-y-auto">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <History className="h-5 w-5" />
+            단가 수정 이력
+          </DialogTitle>
+          <DialogDescription>
+            {pricingData.itemName} ({pricingData.itemCode})의 단가 변경 이력입니다.
+          </DialogDescription>
+        </DialogHeader>
+
+        {hasRevisions ? (
+          <div className="space-y-4">
+            {/* 현재 버전 */}
+            <div className="border-2 border-blue-200 rounded-lg p-4 bg-blue-50">
+              <div className="flex items-center justify-between mb-3">
+                <div className="flex items-center gap-2">
+                  <Badge className="bg-blue-600">현재 버전</Badge>
+                  <span className="font-semibold">
+                    수정 {pricingData.currentRevision}차
+                  </span>
+                </div>
+                <span className="text-sm text-muted-foreground">
+                  {new Date(
+                    pricingData.updatedAt || pricingData.createdAt
+                  ).toLocaleString('ko-KR')}
+                </span>
+              </div>
+              <div className="grid grid-cols-4 gap-3 text-sm">
+                <div>
+                  <span className="text-muted-foreground">매입단가:</span>
+                  <div className="font-semibold">
+                    {pricingData.purchasePrice?.toLocaleString() || '-'}원
+                  </div>
+                </div>
+                <div>
+                  <span className="text-muted-foreground">가공비:</span>
+                  <div className="font-semibold">
+                    {pricingData.processingCost?.toLocaleString() || '-'}원
+                  </div>
+                </div>
+                <div>
+                  <span className="text-muted-foreground">판매단가:</span>
+                  <div className="font-semibold">
+                    {pricingData.salesPrice?.toLocaleString() || '-'}원
+                  </div>
+                </div>
+                <div>
+                  <span className="text-muted-foreground">마진율:</span>
+                  <div className="font-semibold">
+                    {pricingData.marginRate?.toFixed(1) || '-'}%
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            {/* 이전 버전들 */}
+            {[...pricingData.revisions!].reverse().map((revision) => (
+              <div key={revision.revisionNumber} className="border rounded-lg p-4">
+                <div className="flex items-center justify-between mb-3">
+                  <div className="flex items-center gap-2">
+                    <Badge variant="outline">이전 버전</Badge>
+                    <span className="font-semibold">
+                      수정 {revision.revisionNumber}차
+                    </span>
+                    {revision.revisionReason && (
+                      <span className="text-sm text-muted-foreground">
+                        ({revision.revisionReason})
+                      </span>
+                    )}
+                  </div>
+                  <div className="text-right">
+                    <div className="text-sm text-muted-foreground">
+                      {new Date(revision.revisionDate).toLocaleString('ko-KR')}
+                    </div>
+                    <div className="text-xs text-muted-foreground">
+                      by {revision.revisionBy}
+                    </div>
+                  </div>
+                </div>
+                <div className="grid grid-cols-4 gap-3 text-sm">
+                  <div>
+                    <span className="text-muted-foreground">매입단가:</span>
+                    <div>
+                      {revision.previousData.purchasePrice?.toLocaleString() || '-'}원
+                    </div>
+                  </div>
+                  <div>
+                    <span className="text-muted-foreground">가공비:</span>
+                    <div>
+                      {revision.previousData.processingCost?.toLocaleString() || '-'}원
+                    </div>
+                  </div>
+                  <div>
+                    <span className="text-muted-foreground">판매단가:</span>
+                    <div>
+                      {revision.previousData.salesPrice?.toLocaleString() || '-'}원
+                    </div>
+                  </div>
+                  <div>
+                    <span className="text-muted-foreground">마진율:</span>
+                    <div>
+                      {revision.previousData.marginRate?.toFixed(1) || '-'}%
+                    </div>
+                  </div>
+                </div>
+              </div>
+            ))}
+
+            {/* 최초 버전 */}
+            <div className="border rounded-lg p-4 bg-gray-50">
+              <div className="flex items-center justify-between mb-3">
+                <div className="flex items-center gap-2">
+                  <Badge variant="outline">최초 버전</Badge>
+                  <span className="font-semibold">초기 등록</span>
+                </div>
+                <span className="text-sm text-muted-foreground">
+                  {new Date(pricingData.createdAt).toLocaleString('ko-KR')}
+                </span>
+              </div>
+            </div>
+          </div>
+        ) : (
+          <div className="text-center py-8 text-muted-foreground">
+            수정 이력이 없습니다.
+          </div>
+        )}
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+export default PricingHistoryDialog;
--- a/src/components/pricing/PricingListClient.tsx
+++ b/src/components/pricing/PricingListClient.tsx
@@ -0,0 +1,449 @@
+/**
+ * 단가 목록 클라이언트 컴포넌트
+ *
+ * IntegratedListTemplateV2 공통 템플릿 활용
+ */
+
+'use client';
+
+import { useState, useMemo } from 'react';
+import { useRouter } from 'next/navigation';
+import {
+  DollarSign,
+  Package,
+  AlertCircle,
+  CheckCircle2,
+  Plus,
+  Edit,
+  History,
+  RefreshCw,
+} from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { Checkbox } from '@/components/ui/checkbox';
+import { TableRow, TableCell } from '@/components/ui/table';
+import {
+  IntegratedListTemplateV2,
+  type TabOption,
+  type TableColumn,
+  type StatCard,
+} from '@/components/templates/IntegratedListTemplateV2';
+import { ListMobileCard, InfoField } from '@/components/organisms/ListMobileCard';
+import type { PricingListItem, ItemType } from './types';
+import { ITEM_TYPE_LABELS, ITEM_TYPE_COLORS } from './types';
+
+interface PricingListClientProps {
+  initialData: PricingListItem[];
+}
+
+export function PricingListClient({
+  initialData,
+}: PricingListClientProps) {
+  const router = useRouter();
+  const [data] = useState<PricingListItem[]>(initialData);
+  const [searchTerm, setSearchTerm] = useState('');
+  const [activeTab, setActiveTab] = useState('all');
+  const [selectedItems, setSelectedItems] = useState<Set<string>>(new Set());
+  const [currentPage, setCurrentPage] = useState(1);
+  const pageSize = 20;
+
+  // 필터링된 데이터
+  const filteredData = useMemo(() => {
+    let result = [...data];
+
+    // 탭 필터
+    if (activeTab !== 'all') {
+      result = result.filter(item => item.itemType === activeTab);
+    }
+
+    // 검색 필터
+    if (searchTerm) {
+      const search = searchTerm.toLowerCase();
+      result = result.filter(item =>
+        item.itemCode.toLowerCase().includes(search) ||
+        item.itemName.toLowerCase().includes(search) ||
+        (item.specification?.toLowerCase().includes(search) ?? false)
+      );
+    }
+
+    return result;
+  }, [data, activeTab, searchTerm]);
+
+  // 페이지네이션된 데이터
+  const paginatedData = useMemo(() => {
+    const start = (currentPage - 1) * pageSize;
+    return filteredData.slice(start, start + pageSize);
+  }, [filteredData, currentPage, pageSize]);
+
+  // 통계 계산
+  const totalStats = useMemo(() => {
+    const totalAll = data.length;
+    const totalFG = data.filter(d => d.itemType === 'FG').length;
+    const totalPT = data.filter(d => d.itemType === 'PT').length;
+    const totalSM = data.filter(d => d.itemType === 'SM').length;
+    const totalRM = data.filter(d => d.itemType === 'RM').length;
+    const totalCS = data.filter(d => d.itemType === 'CS').length;
+    const registered = data.filter(d => d.status !== 'not_registered').length;
+    const notRegistered = totalAll - registered;
+    const finalized = data.filter(d => d.isFinal).length;
+
+    return { totalAll, totalFG, totalPT, totalSM, totalRM, totalCS, registered, notRegistered, finalized };
+  }, [data]);
+
+  // 금액 포맷팅
+  const formatPrice = (price?: number) => {
+    if (price === undefined || price === null) return '-';
+    return `${price.toLocaleString()}원`;
+  };
+
+  // 품목 유형 Badge 렌더링
+  const renderItemTypeBadge = (type: string) => {
+    const colors = ITEM_TYPE_COLORS[type as ItemType];
+    const label = ITEM_TYPE_LABELS[type as ItemType] || type;
+
+    if (!colors) {
+      return <Badge variant="outline">{label}</Badge>;
+    }
+
+    return (
+      <Badge
+        variant="outline"
+        className={`${colors.bg} ${colors.text} ${colors.border}`}
+      >
+        {label}
+      </Badge>
+    );
+  };
+
+  // 상태 Badge 렌더링
+  const renderStatusBadge = (item: PricingListItem) => {
+    if (item.status === 'not_registered') {
+      return <Badge variant="outline" className="bg-gray-50 text-gray-700">미등록</Badge>;
+    }
+    if (item.isFinal) {
+      return <Badge variant="outline" className="bg-purple-50 text-purple-700 border-purple-200">확정</Badge>;
+    }
+    if (item.status === 'active') {
+      return <Badge variant="outline" className="bg-green-50 text-green-700 border-green-200">활성</Badge>;
+    }
+    if (item.status === 'inactive') {
+      return <Badge variant="outline" className="bg-red-50 text-red-700 border-red-200">비활성</Badge>;
+    }
+    return <Badge variant="outline" className="bg-blue-50 text-blue-700 border-blue-200">초안</Badge>;
+  };
+
+  // 마진율 Badge 렌더링
+  const renderMarginBadge = (marginRate?: number) => {
+    if (marginRate === undefined || marginRate === null || marginRate === 0) {
+      return <span className="text-muted-foreground">-</span>;
+    }
+
+    const colorClass =
+      marginRate >= 30 ? 'bg-green-50 text-green-700 border-green-200' :
+      marginRate >= 20 ? 'bg-blue-50 text-blue-700 border-blue-200' :
+      marginRate >= 10 ? 'bg-orange-50 text-orange-700 border-orange-200' :
+      'bg-red-50 text-red-700 border-red-200';
+
+    return (
+      <Badge variant="outline" className={colorClass}>
+        {marginRate.toFixed(1)}%
+      </Badge>
+    );
+  };
+
+  // 네비게이션 핸들러
+  const handleRegister = (item: PricingListItem) => {
+    router.push(`/sales/pricing-management/create?itemId=${item.itemId}&itemCode=${item.itemCode}`);
+  };
+
+  const handleEdit = (item: PricingListItem) => {
+    router.push(`/sales/pricing-management/${item.id}/edit`);
+  };
+
+  const handleHistory = (item: PricingListItem) => {
+    // TODO: 이력 다이얼로그 열기
+    console.log('이력 조회:', item.id);
+  };
+
+  // 체크박스 전체 선택/해제
+  const toggleSelectAll = () => {
+    if (selectedItems.size === paginatedData.length && paginatedData.length > 0) {
+      setSelectedItems(new Set());
+    } else {
+      const allIds = new Set(paginatedData.map((item) => item.id));
+      setSelectedItems(allIds);
+    }
+  };
+
+  // 개별 체크박스 선택/해제
+  const toggleSelection = (itemId: string) => {
+    const newSelected = new Set(selectedItems);
+    if (newSelected.has(itemId)) {
+      newSelected.delete(itemId);
+    } else {
+      newSelected.add(itemId);
+    }
+    setSelectedItems(newSelected);
+  };
+
+  // 탭 옵션
+  const tabs: TabOption[] = [
+    { value: 'all', label: '전체', count: totalStats.totalAll, color: 'gray' },
+    { value: 'FG', label: '제품', count: totalStats.totalFG, color: 'purple' },
+    { value: 'PT', label: '부품', count: totalStats.totalPT, color: 'orange' },
+    { value: 'SM', label: '부자재', count: totalStats.totalSM, color: 'green' },
+    { value: 'RM', label: '원자재', count: totalStats.totalRM, color: 'blue' },
+    { value: 'CS', label: '소모품', count: totalStats.totalCS, color: 'gray' },
+  ];
+
+  // 통계 카드
+  const stats: StatCard[] = [
+    { label: '전체 품목', value: totalStats.totalAll, icon: Package, iconColor: 'text-blue-600' },
+    { label: '단가 등록', value: totalStats.registered, icon: DollarSign, iconColor: 'text-green-600' },
+    { label: '미등록', value: totalStats.notRegistered, icon: AlertCircle, iconColor: 'text-orange-600' },
+    { label: '확정', value: totalStats.finalized, icon: CheckCircle2, iconColor: 'text-purple-600' },
+  ];
+
+  // 테이블 컬럼 정의
+  const tableColumns: TableColumn[] = [
+    { key: 'rowNumber', label: '번호', className: 'w-[60px] text-center' },
+    { key: 'itemType', label: '품목유형', className: 'min-w-[100px]' },
+    { key: 'itemCode', label: '품목코드', className: 'min-w-[120px]' },
+    { key: 'itemName', label: '품목명', className: 'min-w-[150px]' },
+    { key: 'specification', label: '규격', className: 'min-w-[100px]', hideOnMobile: true },
+    { key: 'unit', label: '단위', className: 'min-w-[60px]', hideOnMobile: true },
+    { key: 'purchasePrice', label: '매입단가', className: 'min-w-[100px] text-right', hideOnTablet: true },
+    { key: 'processingCost', label: '가공비', className: 'min-w-[80px] text-right', hideOnTablet: true },
+    { key: 'salesPrice', label: '판매단가', className: 'min-w-[100px] text-right' },
+    { key: 'marginRate', label: '마진율', className: 'min-w-[80px] text-right', hideOnMobile: true },
+    { key: 'effectiveDate', label: '적용일', className: 'min-w-[100px]', hideOnMobile: true },
+    { key: 'status', label: '상태', className: 'min-w-[80px]' },
+    { key: 'actions', label: '작업', className: 'w-[120px] text-right' },
+  ];
+
+  // 테이블 행 렌더링
+  const renderTableRow = (item: PricingListItem, index: number, globalIndex: number) => {
+    const isSelected = selectedItems.has(item.id);
+
+    return (
+      <TableRow key={item.id} className="hover:bg-muted/50">
+        <TableCell className="text-center">
+          <Checkbox
+            checked={isSelected}
+            onCheckedChange={() => toggleSelection(item.id)}
+          />
+        </TableCell>
+        <TableCell className="text-muted-foreground text-center">
+          {globalIndex}
+        </TableCell>
+        <TableCell>{renderItemTypeBadge(item.itemType)}</TableCell>
+        <TableCell>
+          <code className="text-xs bg-gray-100 px-2 py-1 rounded">
+            {item.itemCode}
+          </code>
+        </TableCell>
+        <TableCell>
+          <span className="font-medium truncate max-w-[200px] block">
+            {item.itemName}
+          </span>
+        </TableCell>
+        <TableCell className="text-muted-foreground hidden md:table-cell">
+          {item.specification || '-'}
+        </TableCell>
+        <TableCell className="hidden md:table-cell">
+          <Badge variant="secondary">{item.unit || '-'}</Badge>
+        </TableCell>
+        <TableCell className="text-right font-mono hidden lg:table-cell">
+          {formatPrice(item.purchasePrice)}
+        </TableCell>
+        <TableCell className="text-right font-mono hidden lg:table-cell">
+          {formatPrice(item.processingCost)}
+        </TableCell>
+        <TableCell className="text-right font-mono font-semibold">
+          {formatPrice(item.salesPrice)}
+        </TableCell>
+        <TableCell className="text-right hidden md:table-cell">
+          {renderMarginBadge(item.marginRate)}
+        </TableCell>
+        <TableCell className="hidden md:table-cell">
+          {item.effectiveDate
+            ? new Date(item.effectiveDate).toLocaleDateString('ko-KR')
+            : '-'}
+        </TableCell>
+        <TableCell>{renderStatusBadge(item)}</TableCell>
+        <TableCell className="text-right">
+          <div className="flex items-center justify-end gap-1">
+            {item.status === 'not_registered' ? (
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={(e) => { e.stopPropagation(); handleRegister(item); }}
+                title="단가 등록"
+              >
+                <Plus className="w-4 h-4" />
+              </Button>
+            ) : (
+              <>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={(e) => { e.stopPropagation(); handleEdit(item); }}
+                  title="수정"
+                >
+                  <Edit className="w-4 h-4" />
+                </Button>
+                {item.currentRevision > 0 && (
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={(e) => { e.stopPropagation(); handleHistory(item); }}
+                    title="이력"
+                  >
+                    <History className="w-4 h-4" />
+                  </Button>
+                )}
+              </>
+            )}
+          </div>
+        </TableCell>
+      </TableRow>
+    );
+  };
+
+  // 모바일 카드 렌더링
+  const renderMobileCard = (
+    item: PricingListItem,
+    index: number,
+    globalIndex: number,
+    isSelected: boolean,
+    onToggle: () => void
+  ) => {
+    return (
+      <ListMobileCard
+        key={item.id}
+        id={item.id}
+        title={item.itemName}
+        headerBadges={
+          <div className="flex items-center gap-2 flex-wrap">
+            <code className="text-xs bg-gray-100 px-2 py-1 rounded">
+              {item.itemCode}
+            </code>
+            {renderItemTypeBadge(item.itemType)}
+          </div>
+        }
+        statusBadge={renderStatusBadge(item)}
+        isSelected={isSelected}
+        onToggleSelection={onToggle}
+        onCardClick={() => item.status !== 'not_registered' ? handleEdit(item) : handleRegister(item)}
+        infoGrid={
+          <div className="grid grid-cols-2 gap-x-4 gap-y-3">
+            {item.specification && (
+              <InfoField label="규격" value={item.specification} />
+            )}
+            {item.unit && (
+              <InfoField label="단위" value={item.unit} />
+            )}
+            <InfoField label="판매단가" value={formatPrice(item.salesPrice)} />
+            <InfoField
+              label="마진율"
+              value={item.marginRate ? `${item.marginRate.toFixed(1)}%` : '-'}
+            />
+          </div>
+        }
+        actions={
+          isSelected ? (
+            <div className="flex gap-2 flex-wrap">
+              {item.status === 'not_registered' ? (
+                <Button
+                  variant="default"
+                  size="default"
+                  className="flex-1 min-w-[100px] h-11"
+                  onClick={(e) => { e.stopPropagation(); handleRegister(item); }}
+                >
+                  <Plus className="h-4 w-4 mr-2" />
+                  등록
+                </Button>
+              ) : (
+                <>
+                  <Button
+                    variant="default"
+                    size="default"
+                    className="flex-1 min-w-[100px] h-11"
+                    onClick={(e) => { e.stopPropagation(); handleEdit(item); }}
+                  >
+                    <Edit className="h-4 w-4 mr-2" />
+                    수정
+                  </Button>
+                  {item.currentRevision > 0 && (
+                    <Button
+                      variant="outline"
+                      size="default"
+                      className="flex-1 min-w-[100px] h-11"
+                      onClick={(e) => { e.stopPropagation(); handleHistory(item); }}
+                    >
+                      <History className="h-4 w-4 mr-2" />
+                      이력
+                    </Button>
+                  )}
+                </>
+              )}
+            </div>
+          ) : undefined
+        }
+      />
+    );
+  };
+
+  // 헤더 액션
+  const headerActions = (
+    <Button
+      variant="outline"
+      onClick={() => {
+        // TODO: API 연동 시 품목 마스터 동기화 로직 구현
+        console.log('품목 마스터 동기화');
+      }}
+      className="gap-2"
+    >
+      <RefreshCw className="h-4 w-4" />
+      품목 마스터 동기화
+    </Button>
+  );
+
+  // 페이지네이션
+  const totalPages = Math.ceil(filteredData.length / pageSize);
+
+  return (
+    <IntegratedListTemplateV2<PricingListItem>
+      title="단가 관리"
+      description="품목별 매입단가, 판매단가 및 마진을 관리합니다"
+      icon={DollarSign}
+      headerActions={headerActions}
+      stats={stats}
+      searchValue={searchTerm}
+      onSearchChange={setSearchTerm}
+      searchPlaceholder="품목코드, 품목명, 규격 검색..."
+      tabs={tabs}
+      activeTab={activeTab}
+      onTabChange={setActiveTab}
+      tableColumns={tableColumns}
+      data={paginatedData}
+      totalCount={filteredData.length}
+      allData={filteredData}
+      selectedItems={selectedItems}
+      onToggleSelection={toggleSelection}
+      onToggleSelectAll={toggleSelectAll}
+      getItemId={(item) => item.id}
+      renderTableRow={renderTableRow}
+      renderMobileCard={renderMobileCard}
+      pagination={{
+        currentPage,
+        totalPages,
+        totalItems: filteredData.length,
+        itemsPerPage: pageSize,
+        onPageChange: setCurrentPage,
+      }}
+    />
+  );
+}
+
+export default PricingListClient;
--- a/src/components/pricing/PricingRevisionDialog.tsx
+++ b/src/components/pricing/PricingRevisionDialog.tsx
@@ -0,0 +1,94 @@
+/**
+ * 단가 수정 이력 생성 다이얼로그
+ */
+
+'use client';
+
+import { useState } from 'react';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { Label } from '@/components/ui/label';
+import { Textarea } from '@/components/ui/textarea';
+import { Edit2, Save } from 'lucide-react';
+import { toast } from 'sonner';
+
+interface PricingRevisionDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onConfirm: (reason: string) => void;
+}
+
+export function PricingRevisionDialog({
+  open,
+  onOpenChange,
+  onConfirm,
+}: PricingRevisionDialogProps) {
+  const [revisionReason, setRevisionReason] = useState('');
+
+  const handleConfirm = () => {
+    if (!revisionReason.trim()) {
+      toast.error('수정 사유를 입력해주세요.');
+      return;
+    }
+    onConfirm(revisionReason);
+    setRevisionReason('');
+    onOpenChange(false);
+  };
+
+  const handleCancel = () => {
+    setRevisionReason('');
+    onOpenChange(false);
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <Edit2 className="h-5 w-5" />
+            수정 이력 생성
+          </DialogTitle>
+          <DialogDescription>
+            단가 정보를 수정하시겠습니까? 수정 사유를 입력해주세요.
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-4 py-4">
+          <div>
+            <Label>
+              수정 사유 <span className="text-red-500">*</span>
+            </Label>
+            <Textarea
+              value={revisionReason}
+              onChange={(e) => setRevisionReason(e.target.value)}
+              placeholder="예: 공급업체 단가 인상으로 인한 조정"
+              rows={3}
+            />
+          </div>
+        </div>
+
+        <DialogFooter>
+          <Button variant="outline" onClick={handleCancel}>
+            취소
+          </Button>
+          <Button
+            onClick={handleConfirm}
+            className="bg-blue-600 hover:bg-blue-700"
+          >
+            <Save className="h-4 w-4 mr-2" />
+            수정 이력 저장
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+export default PricingRevisionDialog;
--- a/src/components/pricing/index.ts
+++ b/src/components/pricing/index.ts
@@ -0,0 +1,10 @@
+/**
+ * 단가관리 컴포넌트 인덱스
+ */
+
+export * from './types';
+export { PricingListClient } from './PricingListClient';
+export { PricingFormClient } from './PricingFormClient';
+export { PricingHistoryDialog } from './PricingHistoryDialog';
+export { PricingRevisionDialog } from './PricingRevisionDialog';
+export { PricingFinalizeDialog } from './PricingFinalizeDialog';
--- a/src/components/pricing/types.ts
+++ b/src/components/pricing/types.ts
@@ -0,0 +1,182 @@
+/**
+ * 단가관리 타입 정의
+ */
+
+import type { LucideIcon } from 'lucide-react';
+
+// ===== 단가 리비전 =====
+
+/** 단가 수정 이력 */
+export interface PricingRevision {
+  revisionNumber: number;
+  revisionDate: string;
+  revisionBy: string;
+  revisionReason?: string;
+  previousData: PricingData;
+}
+
+// ===== 단가 데이터 =====
+
+/** 단가 상태 */
+export type PricingStatus = 'draft' | 'active' | 'inactive' | 'finalized';
+
+/** 반올림 규칙 */
+export type RoundingRule = 'round' | 'ceil' | 'floor';
+
+/** 단가 데이터 인터페이스 */
+export interface PricingData {
+  id: string;
+  itemId: string;
+  itemCode: string;
+  itemName: string;
+  itemType: string;
+  specification?: string;
+  unit: string;
+
+  // 단가 정보
+  effectiveDate: string;      // 적용일
+  receiveDate?: string;       // 입고일
+  author?: string;            // 작성자
+  purchasePrice?: number;     // 매입단가 (입고가)
+  processingCost?: number;    // 가공비
+  loss?: number;              // LOSS(%)
+  roundingRule?: RoundingRule; // 반올림 규칙
+  roundingUnit?: number;      // 반올림 단위
+  marginRate?: number;        // 마진율(%)
+  salesPrice?: number;        // 판매단가
+  supplier?: string;          // 공급업체
+  note?: string;              // 비고
+
+  // 리비전 관리
+  currentRevision: number;
+  isFinal: boolean;
+  revisions?: PricingRevision[];
+  finalizedDate?: string;
+  finalizedBy?: string;
+  status: PricingStatus;
+
+  // 메타데이터
+  createdAt: string;
+  createdBy: string;
+  updatedAt?: string;
+  updatedBy?: string;
+}
+
+// ===== 품목 정보 (등록 시 전달) =====
+
+/** 품목 기본 정보 */
+export interface ItemInfo {
+  id: string;
+  itemCode: string;
+  itemName: string;
+  itemType: string;
+  specification?: string;
+  unit: string;
+}
+
+// ===== 폼 데이터 =====
+
+/** 단가 폼 입력 데이터 */
+export interface PricingFormData {
+  effectiveDate: string;
+  receiveDate: string;
+  author: string;
+  purchasePrice: number;
+  processingCost: number;
+  loss: number;
+  roundingRule: RoundingRule;
+  roundingUnit: number;
+  marginRate: number;
+  salesPrice: number;
+  supplier: string;
+  note: string;
+  unit: string;
+}
+
+// ===== 통계 =====
+
+/** 단가 통계 */
+export interface PricingStats {
+  totalItems: number;
+  registeredCount: number;
+  notRegisteredCount: number;
+  finalizedCount: number;
+}
+
+// ===== 목록 아이템 (테이블용) =====
+
+/** 목록 표시용 데이터 */
+export interface PricingListItem {
+  id: string;
+  itemId: string;
+  itemCode: string;
+  itemName: string;
+  itemType: string;
+  specification?: string;
+  unit: string;
+  purchasePrice?: number;
+  processingCost?: number;
+  salesPrice?: number;
+  marginRate?: number;
+  effectiveDate?: string;
+  status: PricingStatus | 'not_registered';
+  currentRevision: number;
+  isFinal: boolean;
+}
+
+// ===== 유틸리티 타입 =====
+
+/** 품목 유형 */
+export type ItemType = 'FG' | 'PT' | 'SM' | 'RM' | 'CS' | 'BENDING';
+
+/** 품목 유형 라벨 맵 */
+export const ITEM_TYPE_LABELS: Record<ItemType, string> = {
+  FG: '제품',
+  PT: '부품',
+  SM: '부자재',
+  RM: '원자재',
+  CS: '소모품',
+  BENDING: '절곡물',
+};
+
+/** 품목 유형 색상 맵 */
+export const ITEM_TYPE_COLORS: Record<ItemType, { bg: string; text: string; border: string }> = {
+  FG: { bg: 'bg-purple-50', text: 'text-purple-700', border: 'border-purple-200' },
+  PT: { bg: 'bg-orange-50', text: 'text-orange-700', border: 'border-orange-200' },
+  SM: { bg: 'bg-cyan-50', text: 'text-cyan-700', border: 'border-cyan-200' },
+  RM: { bg: 'bg-green-50', text: 'text-green-700', border: 'border-green-200' },
+  CS: { bg: 'bg-gray-50', text: 'text-gray-700', border: 'border-gray-200' },
+  BENDING: { bg: 'bg-blue-50', text: 'text-blue-700', border: 'border-blue-200' },
+};
+
+/** 단위 옵션 */
+export const UNIT_OPTIONS = [
+  { value: 'EA', label: 'EA (개)' },
+  { value: 'SET', label: 'SET (세트)' },
+  { value: 'KG', label: 'KG (킬로그램)' },
+  { value: 'G', label: 'G (그램)' },
+  { value: 'M', label: 'M (미터)' },
+  { value: 'CM', label: 'CM (센티미터)' },
+  { value: 'MM', label: 'MM (밀리미터)' },
+  { value: 'L', label: 'L (리터)' },
+  { value: 'ML', label: 'ML (밀리리터)' },
+  { value: 'BOX', label: 'BOX (박스)' },
+  { value: 'ROLL', label: 'ROLL (롤)' },
+  { value: 'SHEET', label: 'SHEET (장)' },
+];
+
+/** 반올림 규칙 옵션 */
+export const ROUNDING_RULE_OPTIONS = [
+  { value: 'round', label: '반올림' },
+  { value: 'ceil', label: '올림' },
+  { value: 'floor', label: '내림' },
+];
+
+/** 반올림 단위 옵션 */
+export const ROUNDING_UNIT_OPTIONS = [
+  { value: 1, label: '1원 단위' },
+  { value: 10, label: '10원 단위' },
+  { value: 100, label: '100원 단위' },
+  { value: 1000, label: '1,000원 단위' },
+  { value: 10000, label: '10,000원 단위' },
+];
--- a/src/components/templates/IntegratedListTemplateV2.tsx
+++ b/src/components/templates/IntegratedListTemplateV2.tsx
@@ -277,13 +277,12 @@ export function IntegratedListTemplateV2<T = any>({
                      검색 결과가 없습니다.
                    </div>
                  ) : (
+                    // 백엔드가 created_at ASC로 정렬해서 보내줌 (오래된 순)
                    (allData || data).map((item, index) => {
                      const itemId = getItemId(item);
                      const isSelected = selectedItems.has(itemId);
-                      // 역순 번호 계산: totalCount가 있으면 역순, 없으면 순차
-                      const globalIndex = totalCount
-                        ? totalCount - index
-                        : index + 1;
+                      // 순차 번호: 1번부터 시작
+                      const globalIndex = index + 1;

                      return (
                        <div key={itemId}>
@@ -343,12 +342,11 @@ export function IntegratedListTemplateV2<T = any>({
                          </TableCell>
                        </TableRow>
                      ) : (
+                        // 백엔드가 created_at ASC로 정렬해서 보내줌 (오래된 순)
                        data.map((item, index) => {
                          const itemId = getItemId(item);
-                          // 역순 번호 계산: totalCount가 있으면 역순, 없으면 순차
-                          const globalIndex = totalCount
-                            ? totalCount - (startIndex + index)
-                            : startIndex + index;
+                          // 순차 번호: startIndex 기준으로 1부터 시작
+                          const globalIndex = startIndex + index + 1;
                          return (
                            <Fragment key={itemId}>
                              {renderTableRow(item, index, globalIndex)}
--- a/src/hooks/useItemList.ts
+++ b/src/hooks/useItemList.ts
@@ -137,7 +137,9 @@ export function useItemList(): UseItemListResult {
    partType: item.part_type as string | undefined,
    unit: (item.unit ?? '') as string,
    specification: (item.specification ?? '') as string,
-    isActive: item.is_active !== undefined ? Boolean(item.is_active) : (item.deleted_at === null),
+    // is_active가 null/undefined면 deleted_at 기준으로 판단 (삭제 안됐으면 활성)
+    // deleted_at이 없거나 null이면 활성, 값이 있으면 비활성
+    isActive: item.is_active != null ? Boolean(item.is_active) : !item.deleted_at,
    category1: (item.category1 ?? '') as string,
    category2: (item.category2 ?? '') as string,
    category3: (item.category3 ?? '') as string,
--- a/src/layouts/DashboardLayout.tsx
+++ b/src/layouts/DashboardLayout.tsx
@@ -19,6 +19,7 @@ import {
  Receipt,
  Package,
  Settings,
+  DollarSign,
 } from 'lucide-react';
 import { Input } from '@/components/ui/input';
 import { Button } from '@/components/ui/button';
@@ -96,6 +97,7 @@ export default function DashboardLayout({ children }: DashboardLayoutProps) {
            children: [
              { id: "customer-management", label: "거래처관리", icon: Building2, path: "/sales/client-management-sales-admin" },
              { id: "quote-management", label: "견적관리", icon: Receipt, path: "/sales/quote-management" },
+              { id: "pricing-management", label: "단가관리", icon: DollarSign, path: "/sales/pricing-management" },
            ],
          },
          {
--- a/src/lib/api/items.ts
+++ b/src/lib/api/items.ts
@@ -322,12 +322,126 @@ export async function deleteBOMLine(

 // ===== 파일 업로드 =====

+/** 파일 타입 */
+export type ItemFileType = 'specification' | 'certification' | 'bending_diagram';
+
+/** 파일 업로드 옵션 */
+export interface UploadFileOptions {
+  /** 인증번호 (certification 타입일 때) */
+  certificationNumber?: string;
+  /** 인증 시작일 (certification 타입일 때) */
+  certificationStartDate?: string;
+  /** 인증 종료일 (certification 타입일 때) */
+  certificationEndDate?: string;
+  /** 절곡 상세 정보 (bending_diagram 타입일 때) */
+  bendingDetails?: Array<{
+    angle: number;
+    length: number;
+    type: string;
+  }>;
+}
+
+/** 파일 업로드 응답 */
+export interface UploadFileResponse {
+  file_type: string;
+  file_url: string;
+  file_path: string;
+  file_name: string;
+  product: Record<string, unknown>;
+}
+
 /**
- * 파일 업로드 (시방서, 인정서, 전개도 등)
+ * 품목 파일 업로드 (ID 기반, 프록시 사용)
 *
- * @param itemCode - 품목 코드
+ * HttpOnly 쿠키 인증을 위해 Next.js API 프록시를 경유합니다.
+ *
+ * @param itemId - 품목 ID (숫자)
 * @param file - 업로드할 파일
 * @param fileType - 파일 유형 (specification, certification, bending_diagram)
+ * @param options - 추가 옵션 (certification 관련 필드, bending_details 등)
+ *
+ * @example
+ * // 시방서 업로드
+ * await uploadItemFile(123, specFile, 'specification');
+ *
+ * // 인정서 업로드 (추가 정보 포함)
+ * await uploadItemFile(123, certFile, 'certification', {
+ *   certificationNumber: 'CERT-001',
+ *   certificationStartDate: '2025-01-01',
+ *   certificationEndDate: '2026-01-01',
+ * });
+ *
+ * // 절곡/조립 전개도 업로드
+ * await uploadItemFile(123, diagramFile, 'bending_diagram');
+ */
+export async function uploadItemFile(
+  itemId: number,
+  file: File,
+  fileType: ItemFileType,
+  options?: UploadFileOptions
+): Promise<UploadFileResponse> {
+  const formData = new FormData();
+  formData.append('file', file);
+  formData.append('type', fileType);
+
+  // certification 관련 추가 필드
+  if (fileType === 'certification' && options) {
+    if (options.certificationNumber) {
+      formData.append('certification_number', options.certificationNumber);
+    }
+    if (options.certificationStartDate) {
+      formData.append('certification_start_date', options.certificationStartDate);
+    }
+    if (options.certificationEndDate) {
+      formData.append('certification_end_date', options.certificationEndDate);
+    }
+  }
+
+  // bending_diagram 관련 추가 필드
+  if (fileType === 'bending_diagram' && options?.bendingDetails) {
+    formData.append('bending_details', JSON.stringify(options.bendingDetails));
+  }
+
+  // 프록시 경유: /api/proxy/items/{id}/files → /api/v1/items/{id}/files
+  const response = await fetch(`/api/proxy/items/${itemId}/files`, {
+    method: 'POST',
+    body: formData,
+    credentials: 'include',
+    // Content-Type은 FormData 사용 시 자동 설정됨 (boundary 포함)
+  });
+
+  const data = await handleApiResponse<ApiResponse<UploadFileResponse>>(response);
+  return data.data;
+}
+
+/**
+ * 품목 파일 삭제 (ID 기반, 프록시 사용)
+ *
+ * @param itemId - 품목 ID (숫자)
+ * @param fileType - 파일 유형 (specification, certification, bending_diagram)
+ *
+ * @example
+ * await deleteItemFile(123, 'specification');
+ */
+export async function deleteItemFile(
+  itemId: number,
+  fileType: ItemFileType
+): Promise<{ file_type: string; deleted: boolean; product: Record<string, unknown> }> {
+  // 프록시 경유: /api/proxy/items/{id}/files/{type} → /api/v1/items/{id}/files/{type}
+  const response = await fetch(`/api/proxy/items/${itemId}/files/${fileType}`, {
+    method: 'DELETE',
+    credentials: 'include',
+  });
+
+  const data = await handleApiResponse<ApiResponse<{ file_type: string; deleted: boolean; product: Record<string, unknown> }>>(response);
+  return data.data;
+}
+
+// ===== 레거시 파일 업로드 (하위 호환성) =====
+
+/**
+ * @deprecated uploadItemFile 사용 권장 (ID 기반)
+ * 파일 업로드 (시방서, 인정서, 전개도 등) - 품목 코드 기반
 */
 export async function uploadFile(
  itemCode: string,
@@ -359,10 +473,8 @@ export async function uploadFile(
 }

 /**
- * 파일 삭제
- *
- * @param itemCode - 품목 코드
- * @param fileType - 파일 유형
+ * @deprecated deleteItemFile 사용 권장 (ID 기반)
+ * 파일 삭제 - 품목 코드 기반
 */
 export async function deleteFile(
  itemCode: string,
--- a/src/lib/utils/materialTransform.ts
+++ b/src/lib/utils/materialTransform.ts
@@ -0,0 +1,111 @@
+/**
+ * Material(SM, RM, CS) 데이터 변환 유틸리티
+ *
+ * 프론트엔드 폼 데이터 ↔ 백엔드 API 데이터 변환
+ * 2025-12-05: 등록/수정 페이지 공통 사용
+ */
+
+import type { DynamicFormData } from '@/components/items/DynamicItemForm/types';
+
+// Material 타입 상수
+export const MATERIAL_TYPES = ['SM', 'RM', 'CS'] as const;
+export type MaterialType = typeof MATERIAL_TYPES[number];
+
+/**
+ * Material 타입인지 확인
+ */
+export function isMaterialType(itemType: string | null | undefined): boolean {
+  return itemType ? MATERIAL_TYPES.includes(itemType as MaterialType) : false;
+}
+
+/**
+ * 프론트엔드 폼 데이터에서 standard_* 필드들을 추출하여 options 배열로 변환
+ *
+ * 입력: { standard_1: "옵션1-1", standard_3: "옵션3-2", name: "품목명", ... }
+ * 출력: { options: [{label: "standard_1", value: "옵션1-1"}, {label: "standard_3", value: "옵션3-2"}], ... }
+ */
+export function convertStandardFieldsToOptions(data: DynamicFormData): {
+  options: Array<{ label: string; value: string }>;
+  specification: string;
+  remainingData: DynamicFormData;
+} {
+  const options: Array<{ label: string; value: string }> = [];
+  const specValues: string[] = [];
+  const remainingData: DynamicFormData = {};
+
+  Object.entries(data).forEach(([key, value]) => {
+    // standard_로 시작하는 필드 또는 옵션 관련 필드 탐지
+    const isStandardField = key.startsWith('standard_') ||
+                           key.startsWith('option_') ||
+                           /^[0-9]+_standard_/.test(key) ||  // "{id}_standard_1" 형식
+                           /^[0-9]+_option_/.test(key);      // "{id}_option_1" 형식
+
+    if (isStandardField && value && typeof value === 'string' && value.trim()) {
+      // standard_* 필드는 options 배열로 변환
+      options.push({ label: key, value: value.trim() });
+      specValues.push(value.trim());
+    } else {
+      // 나머지 필드는 그대로 유지
+      remainingData[key] = value;
+    }
+  });
+
+  // 선택된 옵션 값들을 '-'로 연결하여 specification 생성
+  const specification = specValues.join('-');
+
+  return { options, specification, remainingData };
+}
+
+/**
+ * 백엔드 API 응답의 options 배열을 프론트엔드 폼 필드로 변환
+ *
+ * 입력: options: [{label: "standard_1", value: "옵션1-1"}, {label: "standard_3", value: "옵션3-2"}]
+ * 출력: { standard_1: "옵션1-1", standard_3: "옵션3-2" }
+ */
+export function convertOptionsToStandardFields(
+  options: Array<{ label: string; value: string }> | null | undefined
+): DynamicFormData {
+  const formData: DynamicFormData = {};
+
+  if (options && Array.isArray(options)) {
+    options.forEach((opt) => {
+      if (opt.label && opt.value) {
+        formData[opt.label] = opt.value;
+      }
+    });
+  }
+
+  return formData;
+}
+
+/**
+ * Material 저장 데이터 변환 (등록/수정 공통)
+ *
+ * 프론트엔드 폼 데이터를 백엔드 Material API 형식으로 변환
+ */
+export function transformMaterialDataForSave(
+  data: DynamicFormData,
+  itemType: string
+): DynamicFormData {
+  // standard_* 필드들을 options 배열로 변환
+  const { options, specification, remainingData } = convertStandardFieldsToOptions(data);
+
+  // Material 품목코드 생성: 품목명-규격(옵션조합)
+  const materialName = (remainingData.name || remainingData.item_name || '') as string;
+  const materialCode = remainingData.code ||
+    (specification ? `${materialName}-${specification}` : materialName);
+
+  return {
+    ...remainingData,
+    // Material API 필드명 매핑
+    material_type: (remainingData.product_type as string) || itemType,
+    remarks: remainingData.note as string,  // note → remarks 변환
+    material_code: materialCode,
+    specification: specification || null,   // 옵션 조합값을 specification으로 저장
+    options: options.length > 0 ? options : null,  // options 배열로 저장
+    // 불필요한 필드 제거
+    code: undefined,
+    product_type: undefined,
+    note: undefined,
+  };
+}
--- a/src/lib/utils/menuTransform.ts
+++ b/src/lib/utils/menuTransform.ts
@@ -12,6 +12,7 @@ import {
  ShoppingCart,
  Receipt,
  Factory,
+  DollarSign,
  LucideIcon,
 } from 'lucide-react';

@@ -35,6 +36,9 @@ export const iconMap: Record<string, LucideIcon> = {
  // 생산관리 관련 아이콘
  factory: Factory,
  production: Factory,
+  // 단가관리 관련 아이콘
+  dollar: DollarSign,
+  pricing: DollarSign,
 };

 // API 메뉴 데이터 타입