85 lines
3.4 KiB
Markdown
85 lines
3.4 KiB
Markdown
|
# [맥락노트] 카테고리 트리 대분류 추가 모달 - 연속 등록 모드 수정
|
||
|
|
|
||
|
|
> 관련 문서: [계획서](./CCA[계획]-카테고리-연속등록모드.md) | [체크리스트](./CCA[체크]-카테고리-연속등록모드.md)
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## 왜 이 작업을 하는가
|
||
|
|
|
||
|
|
- 기준정보 - 옵션설정에서 트리 구조 카테고리(품목정보 > 재고단위 등)의 "대분류 추가" 모달이 저장 후 닫히지 않음
|
||
|
|
- 연속 등록 모드가 하드코딩되어 항상 ON 상태이고, 끌 수 있는 UI가 없음
|
||
|
|
- 같은 폴더의 평면 목록 모달(`CategoryValueAddDialog.tsx`)은 이미 올바르게 구현되어 있음
|
||
|
|
- 동일 패턴을 적용하여 일관성 확보
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## 핵심 결정 사항과 근거
|
||
|
|
|
||
|
|
### 1. 기본값: 연속 등록 OFF (모달 닫힘)
|
||
|
|
|
||
|
|
- **결정**: `continuousAdd` 초기값을 `false`로 설정
|
||
|
|
- **근거**: 대부분의 사용자는 한 건 추가 후 결과를 확인하려 함. 연속 입력은 선택적 기능
|
||
|
|
|
||
|
|
### 2. 체크박스 위치: DialogFooter 아래, border-t 구분선 별도 영역
|
||
|
|
|
||
|
|
- **결정**: `ScreenModal.tsx` (1287~1303행) 패턴 그대로 적용
|
||
|
|
- **근거**: "기준정보 - 부서관리" 추가 모달과 동일한 디자인. 프로젝트 관행 준수
|
||
|
|
- **대안 검토**: `CategoryValueAddDialog.tsx`는 DialogFooter 안에 체크박스 배치 → 부서 모달과 다른 디자인이므로 기각
|
||
|
|
|
||
|
|
### 3. 라벨: "저장 후 계속 입력 (연속 등록 모드)"
|
||
|
|
|
||
|
|
- **결정**: `ScreenModal.tsx`와 동일한 라벨 텍스트 사용
|
||
|
|
- **근거**: 부서 추가 모달과 동일한 문구로 사용자 혼란 방지
|
||
|
|
|
||
|
|
### 4. localStorage 미사용
|
||
|
|
|
||
|
|
- **결정**: 컴포넌트 state만 사용, localStorage 영속화 안 함
|
||
|
|
- **근거**: `CategoryValueAddDialog.tsx`(같은 폴더 형제 컴포넌트)가 localStorage를 쓰지 않음. `ScreenModal.tsx`는 사용하지만 동적 화면 모달 전용 기능이므로 범위가 다름
|
||
|
|
|
||
|
|
### 5. 수정 대상: handleAdd 함수만
|
||
|
|
|
||
|
|
- **결정**: 저장 성공 분기에서만 `continuousAdd` 체크
|
||
|
|
- **근거**: 실패 시에는 원래대로 모달 유지 + 에러 표시. 분기가 필요한 건 성공 시뿐
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## 관련 파일 위치
|
||
|
|
|
||
|
|
| 구분 | 파일 경로 | 설명 |
|
||
|
|
|------|----------|------|
|
||
|
|
| 수정 대상 | `frontend/components/table-category/CategoryValueManagerTree.tsx` | 트리형 카테고리 값 관리 (대분류/중분류/소분류) |
|
||
|
|
| 참고 패턴 (로직) | `frontend/components/table-category/CategoryValueAddDialog.tsx` | 평면 목록 추가 모달 - continuousAdd 분기 로직 |
|
||
|
|
| 참고 패턴 (UI) | `frontend/components/common/ScreenModal.tsx` | 동적 화면 모달 - 체크박스 위치/라벨/스타일 |
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## 기술 참고
|
||
|
|
|
||
|
|
### 현재 handleAdd 흐름
|
||
|
|
|
||
|
|
```
|
||
|
|
handleAdd() → API 호출 → 성공 시:
|
||
|
|
1. toast.success
|
||
|
|
2. 폼 초기화 (모달 유지 - 하드코딩)
|
||
|
|
3. addNameRef 포커스
|
||
|
|
4. loadTree(true) - 펼침 상태 유지
|
||
|
|
5. parentValue 있으면 해당 노드 펼침
|
||
|
|
```
|
||
|
|
|
||
|
|
### 변경 후 handleAdd 흐름
|
||
|
|
|
||
|
|
```
|
||
|
|
handleAdd() → API 호출 → 성공 시:
|
||
|
|
1. toast.success
|
||
|
|
2. loadTree(true) + parentValue 펼침
|
||
|
|
3. continuousAdd 체크:
|
||
|
|
- true: 폼 초기화 + addNameRef 포커스 (모달 유지)
|
||
|
|
- false: 폼 초기화 + setIsAddModalOpen(false) (모달 닫힘)
|
||
|
|
```
|
||
|
|
|
||
|
|
### import 현황
|
||
|
|
|
||
|
|
- `Checkbox`: 24행에서 이미 import (`@/components/ui/checkbox`)
|
||
|
|
- `Label`: 53행에서 이미 import (`@/components/ui/label`)
|
||
|
|
- 추가 import 불필요
|