387672b5b2
- /juil/ 경로를 /construction/으로 변경 - 컴포넌트 폴더명 juil → construction 변경 - 컴포넌트명 Juil* → Construction* 변경 - 테스트 URL 페이지 경로 업데이트 - claudedocs 문서 경로 업데이트 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
11 KiB
11 KiB
발주관리 페이지 구현 계획서
작성일: 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
기능 요구사항:
- 달력과 리스트 통합 레이아웃
- 달력 일자 클릭 → 리스트 필터 연동
- 날짜 범위 선택
- 빠른 날짜 필터 (당해년도/전년도/전월/당월/어제/오늘)
- 상태별 필터 (빨간 원 숫자 버튼)
- 검색 기능
- 테이블 (체크박스/정렬/페이지네이션)
- 선택 시 작업 버튼 표시
- 삭제 기능
📦 기술 의존성
새로 설치 필요
# 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 재사용
- 일정 등록/수정 모달 추가 예정
- 드래그 앤 드롭 일정 이동 (선택적)
✅ 작업 순서
- Phase 1.1-1.2: 타입 정의 및 CalendarHeader
- Phase 1.3-1.4: MonthView / WeekView
- Phase 1.5-1.6: DayCell / ScheduleBar
- Phase 1.7-1.8: MorePopover / 메인 컴포넌트
- Phase 2.1-2.2: 발주관리 타입 및 페이지
- Phase 2.3-2.4: 날짜/상태 필터
- Phase 2.5-2.6: 달력/리스트 섹션
- Phase 2.7: 메인 클라이언트 컴포넌트
- Phase 3: 통합 테스트
🔗 관련 문서
[REF] juil-project-structure.md- 주일 프로젝트 구조StructureReviewListClient.tsx- 리스트 패턴 참조IntegratedListTemplateV2.tsx- 템플릿 참조