# 발주관리 페이지 구현 계획서

> **작성일**: 2026-01-05
> **작업 경로**: `/juil/order/order-management`
> **상태**: ✅ 구현 완료

---

## 📋 스크린샷 분석 결과

### 화면 구성

#### 1. 상단 - 발주 스케줄 (달력 영역)
| 요소 | 설명 |
|------|------|
| **뷰 전환** | 주(Week) / 월(Month) 탭 전환 |
| **년월 네비게이션** | 2025년 12월 ◀ ▶ 버튼 |
| **필터** | 작업반장별 필터 (이번년+8주 화살표 버튼) |
| **일정 바(Bar)** | "담당자 - 현장명 / 발주번호" 형태로 여러 날에 걸쳐 표시 |
| **일정 색상** | 회색(완료), 파란색(진행중) 구분 |
| **일자 뱃지** | 빨간 원 안에 숫자 (06, 07, 08 등) - 상태/건수 표시 |
| **더보기** | +15 형태로 해당 일자에 추가 일정 있음 표시 |
| **달력 클릭** | 특정 일자 클릭 시 아래 리스트에 해당 일자 데이터만 필터링 |

#### 2. 하단 - 발주 목록 (리스트 영역)
| 요소 | 설명 |
|------|------|
| **날짜 범위** | 2025-09-01 ~ 2025-09-03 형태 |
| **빠른 필터 탭** | 당해년도 / 전년도 / 전월 / 당월 / 어제 / 오늘 |
| **검색** | 검색창 + 건수 표시 (7건, 12건 선택) |
| **상태 필터** | 빨간 원 숫자 버튼들 (전체/상태별) |
| **삭제 버튼** | 선택된 항목 삭제 |

#### 3. 테이블 컬럼
| 컬럼 | 설명 |
|------|------|
| 체크박스 | 선택 |
| 계약일련번호 | - |
| 거래처 | 회사명 |
| 현장명 | 작업 현장 |
| 병동 | - |
| 공 | - |
| 시APM | 담당 PM |
| 발주번호 | 발주 식별 번호 |
| 발주번 담자 | 발주 담당자 |
| 발주처 | - |
| 작업반 시공품 | 작업 내용 |
| 기간 | 작업 기간 |
| 구분 | 상태 구분 |
| 실적 납품일 | 실제 납품 완료일 |
| 납품일 | 예정 납품일 |

#### 4. 작업 버튼 (선택 시)
- 수정 버튼
- 삭제 버튼

---

## 🏗️ 구현 범위

### Phase 1: 공통 달력 컴포넌트 (ScheduleCalendar)
**재사용 가능한 스케줄 달력 컴포넌트**

```
src/components/common/
└── ScheduleCalendar/
    ├── index.tsx                 # 메인 컴포넌트
    ├── ScheduleCalendar.tsx      # 달력 본체
    ├── CalendarHeader.tsx        # 헤더 (년월/뷰전환/필터)
    ├── MonthView.tsx             # 월간 뷰
    ├── WeekView.tsx              # 주간 뷰
    ├── ScheduleBar.tsx           # 일정 바 컴포넌트
    ├── DayCell.tsx               # 일자 셀 컴포넌트
    ├── MorePopover.tsx           # +N 더보기 팝오버
    ├── types.ts                  # 타입 정의
    └── utils.ts                  # 유틸리티 함수
```

**기능 요구사항**:
- [ ] 월간/주간 뷰 전환
- [ ] 년월 네비게이션 (이전/다음)
- [ ] 일정 바(Bar) 렌더링 (여러 날에 걸침)
- [ ] 일정 색상 구분 (상태별)
- [ ] 일자별 뱃지 숫자 표시
- [ ] +N 더보기 기능 (3개 초과 시)
- [ ] 일자 클릭 이벤트 콜백
- [ ] 필터 영역 slot (외부에서 주입)
- [ ] 반응형 디자인

### Phase 2: 발주관리 리스트 페이지
**페이지 및 컴포넌트 구조**

```
src/app/[locale]/(protected)/juil/order/
└── order-management/
    └── page.tsx                  # 페이지 엔트리

src/components/business/juil/order-management/
├── OrderManagementListClient.tsx # 메인 클라이언트 컴포넌트
├── OrderCalendarSection.tsx      # 달력 섹션 (ScheduleCalendar 사용)
├── OrderListSection.tsx          # 리스트 섹션
├── OrderStatusFilter.tsx         # 상태 필터 (빨간 원 숫자)
├── OrderDateFilter.tsx           # 날짜 빠른 필터 (당해년도/전월 등)
├── types.ts                      # 타입 정의
├── actions.ts                    # Server Actions
└── index.ts                      # 배럴 export
```

**기능 요구사항**:
- [ ] 달력과 리스트 통합 레이아웃
- [ ] 달력 일자 클릭 → 리스트 필터 연동
- [ ] 날짜 범위 선택
- [ ] 빠른 날짜 필터 (당해년도/전년도/전월/당월/어제/오늘)
- [ ] 상태별 필터 (빨간 원 숫자 버튼)
- [ ] 검색 기능
- [ ] 테이블 (체크박스/정렬/페이지네이션)
- [ ] 선택 시 작업 버튼 표시
- [ ] 삭제 기능

---

## 📦 기술 의존성

### 새로 설치 필요
```bash
# FullCalendar 라이브러리 (또는 커스텀 구현)
npm install @fullcalendar/core @fullcalendar/react @fullcalendar/daygrid @fullcalendar/timegrid @fullcalendar/interaction
```

**대안**: FullCalendar 없이 커스텀 달력 컴포넌트로 구현
- 장점: 번들 사이즈 감소, 완전한 커스터마이징
- 단점: 구현 복잡도 증가

### 기존 사용
- `IntegratedListTemplateV2` - 리스트 템플릿
- `DateRangeSelector` - 날짜 범위 선택
- `date-fns` - 날짜 유틸리티

---

## 🔧 세부 구현 체크리스트

### Phase 1: 공통 달력 컴포넌트 (ScheduleCalendar)

#### 1.1 기본 구조 및 타입 정의
- [ ] `types.ts` 생성 (ScheduleEvent, CalendarView, CalendarProps 등)
- [ ] `utils.ts` 생성 (날짜 계산, 일정 위치 계산 등)
- [ ] 컴포넌트 폴더 구조 생성

#### 1.2 CalendarHeader 컴포넌트
- [ ] 년월 표시 및 네비게이션 (◀ ▶)
- [ ] 주/월 뷰 전환 탭
- [ ] 필터 slot (children으로 외부 주입)

#### 1.3 MonthView 컴포넌트
- [ ] 월간 그리드 레이아웃 (7x6)
- [ ] 요일 헤더 (일~토)
- [ ] 날짜 셀 렌더링
- [ ] 이전/다음 달 날짜 표시 (opacity 처리)
- [ ] 오늘 날짜 하이라이트

#### 1.4 WeekView 컴포넌트
- [ ] 주간 그리드 레이아웃 (7 컬럼)
- [ ] 요일 헤더 (날짜 + 요일)
- [ ] 날짜 셀 렌더링

#### 1.5 DayCell 컴포넌트
- [ ] 날짜 숫자 표시
- [ ] 뱃지 숫자 표시 (빨간 원)
- [ ] 클릭 이벤트 처리
- [ ] 선택 상태 스타일

#### 1.6 ScheduleBar 컴포넌트
- [ ] 일정 바 렌더링 (시작~종료 날짜)
- [ ] 여러 날에 걸치는 바 계산 (주 단위 분할)
- [ ] 색상 구분 (상태별)
- [ ] 호버/클릭 이벤트
- [ ] 텍스트 truncate 처리

#### 1.7 MorePopover 컴포넌트
- [ ] +N 버튼 렌더링
- [ ] 팝오버로 숨겨진 일정 목록 표시
- [ ] 일정 항목 클릭 이벤트

#### 1.8 메인 ScheduleCalendar 컴포넌트
- [ ] 상태 관리 (현재 월, 뷰 모드, 선택된 날짜)
- [ ] 일정 데이터 받아서 렌더링
- [ ] 이벤트 콜백 (onDateClick, onEventClick, onMonthChange)
- [ ] 반응형 처리

### Phase 2: 발주관리 리스트 페이지

#### 2.1 타입 및 설정
- [ ] `types.ts` - Order 타입, 필터 옵션, 상태 정의
- [ ] `actions.ts` - Server Actions (목업 데이터)

#### 2.2 page.tsx
- [ ] 페이지 라우트 생성
- [ ] 메타데이터 설정
- [ ] 클라이언트 컴포넌트 import

#### 2.3 OrderDateFilter 컴포넌트
- [ ] 빠른 날짜 필터 버튼 (당해년도/전년도/전월/당월/어제/오늘)
- [ ] 클릭 시 날짜 범위 계산
- [ ] 활성화 상태 스타일

#### 2.4 OrderStatusFilter 컴포넌트
- [ ] 상태별 필터 버튼 (빨간 원 숫자)
- [ ] 전체/상태별 카운트 표시
- [ ] 선택 상태 스타일

#### 2.5 OrderCalendarSection 컴포넌트
- [ ] ScheduleCalendar 사용
- [ ] 필터 영역 (작업반장 셀렉트)
- [ ] 일자 클릭 이벤트 → 리스트 필터 연동
- [ ] 스케줄 데이터 매핑

#### 2.6 OrderListSection 컴포넌트
- [ ] IntegratedListTemplateV2 기반
- [ ] 테이블 컬럼 정의
- [ ] 행 렌더링 (체크박스, 데이터, 작업 버튼)
- [ ] 선택 시 작업 버튼 표시
- [ ] 모바일 카드 렌더링

#### 2.7 OrderManagementListClient 컴포넌트
- [ ] 전체 상태 관리 (달력 + 리스트 연동)
- [ ] 달력 일자 선택 → 리스트 필터
- [ ] 날짜 범위 필터
- [ ] 상태 필터
- [ ] 검색 필터
- [ ] 정렬
- [ ] 페이지네이션
- [ ] 삭제 기능

### Phase 3: 통합 테스트 및 마무리
- [ ] 달력-리스트 연동 테스트
- [ ] 반응형 테스트
- [ ] 목업 데이터 검증
- [ ] 테스트 URL 등록

---

## 🎨 디자인 명세

### 달력 색상
| 상태 | 바 색상 | 뱃지 색상 |
|------|---------|-----------|
| 완료 | 회색 (`bg-gray-400`) | - |
| 진행중 | 파란색 (`bg-blue-500`) | 빨간색 (`bg-red-500`) |
| 대기 | 노란색 (`bg-yellow-500`) | 빨간색 (`bg-red-500`) |

### 레이아웃
```
+--------------------------------------------------+
| 📅 발주관리                          [발주 등록]  |
+--------------------------------------------------+
| [발주 스케줄]                                     |
| +----------------------------------------------+ |
| | 2025년 12월         [주] [월]   [작업반장 ▼] | |
| | ◀ ▶                                         | |
| |----------------------------------------------|
| | 일 | 월 | 화 | 수 | 목 | 금 | 토            | |
| |----------------------------------------------|
| |    |    | 1  | 2  | 3  | 4  | 5             | |
| | 📊 |    | ━━━━━━━━━━━━━━━━━━━ 일정바 ━━━━━━ | |
| |----------------------------------------------|
| | 6  | 7  | 8  | 9  | 10 | 11 | 12            | |
| | ⓪ | ⓪ |    |    |    |    |                | |
| +----------------------------------------------+ |
+--------------------------------------------------+
| [발주 목록]                                       |
| +----------------------------------------------+ |
| | 2025-09-01 ~ 2025-09-03                      | |
| | [당해년도][전년도][전월][당월][어제][오늘]   | |
| |----------------------------------------------|
| | 🔍 검색...    7건 | ⓿ ❶ ❷ ❸ | [삭제]      | |
| |----------------------------------------------|
| | ☐ | 번호 | 거래처 | 현장명 | ... | 작업     | |
| | ☐ | 1    | A사    | 현장1  | ... | [버튼들] | |
| +----------------------------------------------+ |
+--------------------------------------------------+
```

---

## 📝 참고사항

### 달력 라이브러리 선택
**추천: 커스텀 구현**
- FullCalendar는 기능이 과도하고 번들 사이즈가 큼
- 스크린샷의 요구사항은 커스텀으로 충분히 구현 가능
- `date-fns` 활용하여 날짜 계산

### 기존 패턴 준수
- `IntegratedListTemplateV2` 사용
- `DateRangeSelector` 재사용
- `StructureReviewListClient` 패턴 참조

### 향후 확장
- 다른 페이지에서 ScheduleCalendar 재사용
- 일정 등록/수정 모달 추가 예정
- 드래그 앤 드롭 일정 이동 (선택적)

---

## ✅ 작업 순서

1. **Phase 1.1-1.2**: 타입 정의 및 CalendarHeader
2. **Phase 1.3-1.4**: MonthView / WeekView
3. **Phase 1.5-1.6**: DayCell / ScheduleBar
4. **Phase 1.7-1.8**: MorePopover / 메인 컴포넌트
5. **Phase 2.1-2.2**: 발주관리 타입 및 페이지
6. **Phase 2.3-2.4**: 날짜/상태 필터
7. **Phase 2.5-2.6**: 달력/리스트 섹션
8. **Phase 2.7**: 메인 클라이언트 컴포넌트
9. **Phase 3**: 통합 테스트

---

## 🔗 관련 문서
- `[REF] juil-project-structure.md` - 주일 프로젝트 구조
- `StructureReviewListClient.tsx` - 리스트 패턴 참조
- `IntegratedListTemplateV2.tsx` - 템플릿 참조