b59150551e
- PermissionManagement externalSelection 콜백 함수 오류 수정 - setSelectedItems → onToggleSelection, onToggleSelectAll, getItemId 변경 - claudedocs 문서 폴더별 정리 (26개 파일) - dashboard/, guides/, settings/, construction/, sales/ 등 Co-Authored-By: Claude <noreply@anthropic.com>
4.1 KiB
4.1 KiB
레이아웃 구조 변경 계획
상태: 📋 대기 (기능 검수 완료 후 진행) 작성일: 2026-01-16 적용 대상: IntegratedListTemplateV2.tsx (55개 페이지 일괄 적용)
현재 구조
1. 타이틀
2. 달력 / 버튼들 (등록 버튼 여기)
3. 통계 카드
4. 검색창 (Card로 감싸짐)
5. 테이블 Card
└─ 탭 버튼들 / 필터 / 삭제 버튼
└─ 테이블
변경 후 구조
1. 타이틀
2. 달력 / 달력버튼 / 검색창 (한 줄)
3. 카드섹션 (한 줄, 줄넘김 없음)
4. [탭 버튼들] ─────────────── [등록] [CSV] 버튼들 ← Card 밖
5. 테이블 Card
├─ 총 N건 / 선택건 / 필터
└─ 테이블
시각화
┌─ 페이지 ─────────────────────────────────────────────────┐
│ 휴가관리 │
│ 직원들의 휴가 현황을 관리합니다 │
├──────────────────────────────────────────────────────────┤
│ [📅 2025-12-01] ~ [📅 2025-12-31] [당월][전월] [🔍검색] │
├──────────────────────────────────────────────────────────┤
│ [승인대기 1명] [연차 4명] [경조사 0명] [사용률 4.3%] │ ← 카드 (줄넘김X)
├──────────────────────────────────────────────────────────┤
│ [사용현황 4] [부여현황 2] [신청현황 3] [등록] [CSV] │ ← Card 밖
├──────────────────────────────────────────────────────────┤
│ ┌─ 테이블 Card ────────────────────────────────────────┐ │
│ │ 총 55건 | 3개 선택됨 [필터1] [필터2] │ │
│ ├──────────────────────────────────────────────────────┤ │
│ │ □ | 번호 | 부서 | 이름 | ... │ │
│ │ □ | 1 | 개발 | 홍길동 | ... │ │
│ └──────────────────────────────────────────────────────┘ │
└──────────────────────────────────────────────────────────┘
주요 변경점
| 항목 | 현재 | 변경 후 |
|---|---|---|
| 검색창 | Card로 감싸짐, 별도 영역 | 달력 옆 한 줄에 배치 |
| 카드섹션 | flex-wrap (줄넘김) | flex-nowrap + overflow-x-auto |
| 탭 버튼 | 테이블 Card 내부 | 테이블 Card 위 (밖) |
| 등록/액션 버튼 | 헤더 영역 | 탭 버튼 오른쪽 |
| 총 N건/선택건 | 탭과 같은 줄 | 테이블 Card 내부 첫 줄 |
| 필터 | 탭과 같은 줄 | 테이블 Card 내부 첫 줄 |
수정 대상 파일
- IntegratedListTemplateV2.tsx - 전체 레이아웃 구조 변경
- UniversalListPage/index.tsx - prop 전달 방식 조정 (필요시)
체크리스트
- 검색창 위치 이동 (달력 옆)
- 카드섹션 줄넘김 방지 (flex-nowrap)
- 탭 버튼 테이블 Card 밖으로 이동
- 등록/액션 버튼 탭 옆으로 이동
- 총 N건/선택건/필터 테이블 Card 내부로 이동
- PC/모바일 반응형 확인
- 55개 페이지 일괄 테스트
진행 조건
✅ 기능 검수 완료 후 진행
- 현재 화면과 비교 검수가 필요하므로 레이아웃 변경은 기능 검수 이후에 진행