syc0123
634f0cae18
- Introduced new documents detailing the modifications made to the category tree modal for continuous registration mode. - Updated the functionality to allow the modal to close after saving or remain open based on user preference via a checkbox. - Enhanced the user experience by aligning the modal behavior with existing patterns in the project. - Included a checklist to track implementation progress and ensure thorough testing. These changes aim to improve the usability and consistency of the category management feature in the application.
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 불필요
|