90 lines
3.9 KiB
Markdown
90 lines
3.9 KiB
Markdown
|
# [맥락노트] V2Select 다중 선택 드롭다운 - 선택 항목 표시 개선
|
||
|
|
|
||
|
|
> 관련 문서: [계획서](./MST[계획서]-v2select-multiselect-tooltip.md) | [체크리스트](./MST[체크리스트]-v2select-multiselect-tooltip.md)
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## 왜 이 작업을 하는가
|
||
|
|
|
||
|
|
- 사용자가 수정 모달에서 다중 선택 드롭다운을 사용할 때 `"3개 선택됨"` 만 보임
|
||
|
|
- 드롭다운을 다시 열어봐야만 무엇이 선택됐는지 확인 가능 → UX 불편
|
||
|
|
- 선택 항목을 직접 보여주고, 넘치면 툴팁으로 확인할 수 있게 개선
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## 핵심 결정 사항과 근거
|
||
|
|
|
||
|
|
### 1. "n개 선택됨" → 라벨 쉼표 나열
|
||
|
|
|
||
|
|
- **결정**: `"구매품, 판매품, 재고품"` 형태로 표시
|
||
|
|
- **근거**: 사용자가 드롭다운을 열지 않아도 선택 내용을 바로 확인 가능
|
||
|
|
|
||
|
|
### 2. 무조건 한 줄, 넘치면 말줄임(`...`)
|
||
|
|
|
||
|
|
- **결정**: 여러 줄 줄바꿈 없이 한 줄 고정, `truncate`로 오버플로우 처리
|
||
|
|
- **근거**: 드롭다운 필드 높이가 고정되어 있어 여러 줄 표시 시 레이아웃이 깨짐
|
||
|
|
|
||
|
|
### 3. 텍스트가 잘릴 때만 툴팁 표시
|
||
|
|
|
||
|
|
- **결정**: `scrollWidth > clientWidth` 비교로 실제 잘림 여부 감지 후 툴팁 활성화
|
||
|
|
- **근거**: 전부 보이는데 툴팁이 뜨면 오히려 방해. 필요할 때만 보여야 함
|
||
|
|
- **대안 검토**: "2개 이상이면 항상 툴팁" → 기각 (불필요한 툴팁 발생)
|
||
|
|
|
||
|
|
### 4. 툴팁 내용은 세로 나열
|
||
|
|
|
||
|
|
- **결정**: 툴팁 안에서 항목을 줄바꿈으로 세로 나열
|
||
|
|
- **근거**: 가로 나열 시 툴팁도 길어져서 읽기 어려움. 세로가 한눈에 파악하기 좋음
|
||
|
|
|
||
|
|
### 5. 툴팁 딜레이 0ms
|
||
|
|
|
||
|
|
- **결정**: `delayDuration={0}` 즉시 표시
|
||
|
|
- **근거**: 사용자가 "무엇을 선택했는지" 확인하려는 의도적 행동이므로 즉시 응답해야 함
|
||
|
|
|
||
|
|
### 6. Radix Tooltip 대신 커스텀 호버 툴팁 사용
|
||
|
|
|
||
|
|
- **결정**: Radix Tooltip을 사용하지 않고 `onMouseEnter`/`onMouseLeave`로 직접 제어
|
||
|
|
- **근거**: Radix Tooltip + Popover 조합은 이벤트 충돌 발생. 내부 배치든 외부 래핑이든 Popover가 호버를 가로챔
|
||
|
|
- **시도 1**: Tooltip을 Button 안에 배치 → Popover가 이벤트 가로챔 (실패)
|
||
|
|
- **시도 2**: Radix 공식 패턴 (TooltipTrigger > PopoverTrigger > Button 체이닝) → 여전히 동작 안 함 (실패)
|
||
|
|
- **최종**: wrapper div에 마우스 이벤트 + 절대 위치 div로 툴팁 렌더링 (성공)
|
||
|
|
- **추가**: Popover 열릴 때 `setHoverTooltip(false)`로 툴팁 자동 숨김
|
||
|
|
|
||
|
|
### 7. DropdownSelect 공통 컴포넌트 수정
|
||
|
|
|
||
|
|
- **결정**: 특정 화면이 아닌 `DropdownSelect` 자체를 수정
|
||
|
|
- **근거**: 품목정보뿐 아니라 모든 화면에서 동일한 문제가 있으므로 공통 해결
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## 관련 파일 위치
|
||
|
|
|
||
|
|
| 구분 | 파일 경로 | 설명 |
|
||
|
|
|------|----------|------|
|
||
|
|
| 수정 대상 | `frontend/components/v2/V2Select.tsx` | DropdownSelect 컴포넌트 (170~178행) |
|
||
|
|
| 타입 정의 | `frontend/types/v2-components.ts` | V2SelectProps, SelectOption 타입 |
|
||
|
|
| UI 컴포넌트 | `frontend/components/ui/tooltip.tsx` | shadcn Tooltip 컴포넌트 |
|
||
|
|
| 렌더러 | `frontend/lib/registry/components/v2-select/V2SelectRenderer.tsx` | V2Select를 레지스트리에 연결 |
|
||
|
|
| 수정 모달 | `frontend/components/screen/EditModal.tsx` | 공통 편집 모달 |
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## 기술 참고
|
||
|
|
|
||
|
|
### truncate 감지 방식
|
||
|
|
|
||
|
|
```
|
||
|
|
scrollWidth: 텍스트의 실제 전체 너비 (보이지 않는 부분 포함)
|
||
|
|
clientWidth: 요소의 보이는 너비
|
||
|
|
|
||
|
|
scrollWidth > clientWidth → 텍스트가 잘리고 있음 (... 표시 중)
|
||
|
|
```
|
||
|
|
|
||
|
|
### selectedLabels 계산 흐름
|
||
|
|
|
||
|
|
```
|
||
|
|
value (string[]) → selectedValues → safeOptions에서 label 매칭 → selectedLabels (string[])
|
||
|
|
```
|
||
|
|
|
||
|
|
- `selectedLabels`는 이미 `DropdownSelect` 내부에서 `useMemo`로 계산됨 (126~130행)
|
||
|
|
- 추가 데이터 fetching 불필요, 기존 값을 `.join(", ")`로 결합하면 됨
|