feat: Update DropdownSelect component to display selected items based on dropdown option order

- Modified the selection display logic in the DropdownSelect component to show selected items in the order of the dropdown options, rather than the order of user selection.
- This change aims to provide a consistent and predictable user experience, reducing confusion caused by varying display orders.
- Updated the relevant documentation to reflect this new behavior and its rationale.

Made-with: Cursor
This commit is contained in:
syc0123 2026-03-04 11:08:42 +09:00
parent ec5a980c41
commit a0cf9db6e8
3 changed files with 12 additions and 3 deletions

View File

@ -49,7 +49,13 @@
- **최종**: wrapper div에 마우스 이벤트 + 절대 위치 div로 툴팁 렌더링 (성공)
- **추가**: Popover 열릴 때 `setHoverTooltip(false)`로 툴팁 자동 숨김
### 7. DropdownSelect 공통 컴포넌트 수정
### 8. 선택 항목 표시 순서는 드롭다운 옵션 순서 기준
- **결정**: 사용자가 클릭한 순서가 아닌 드롭다운 옵션 목록 순서대로 표시
- **근거**: 선택 순서대로 보여주면 매번 순서가 달라져서 혼란. 옵션 순서 기준이 일관적이고 예측 가능
- **구현**: `selectedValues.map(...)``safeOptions.filter(...).map(...)` 으로 변경
### 9. DropdownSelect 공통 컴포넌트 수정
- **결정**: 특정 화면이 아닌 `DropdownSelect` 자체를 수정
- **근거**: 품목정보뿐 아니라 모든 화면에서 동일한 문제가 있으므로 공통 해결

View File

@ -23,6 +23,7 @@
- [x] 툴팁 내용을 세로 나열 (`space-y-0.5`)로 구성
- [x] `delayDuration={0}` 설정
- [x] Radix Tooltip → 커스텀 호버 툴팁으로 변경 (onMouseEnter/onMouseLeave + 절대 위치 div)
- [x] 선택 항목 표시 순서를 드롭다운 옵션 순서 기준으로 변경
### 2단계: 검증
@ -50,3 +51,4 @@
| 2026-03-04 | 1단계 코드 수정 완료 (V2Select.tsx) |
| 2026-03-04 | Radix Tooltip이 Popover와 충돌 → 커스텀 호버 툴팁으로 변경 |
| 2026-03-04 | 사용자 검증 완료, 전체 작업 완료 |
| 2026-03-04 | 선택 항목 표시 순서를 옵션 순서 기준으로 변경 |

View File

@ -127,8 +127,9 @@ const DropdownSelect = forwardRef<HTMLButtonElement, {
}, [value]);
const selectedLabels = useMemo(() => {
return selectedValues
.map((v) => safeOptions.find((o) => o.value === v)?.label)
return safeOptions
.filter((o) => selectedValues.includes(o.value))
.map((o) => o.label)
.filter(Boolean) as string[];
}, [selectedValues, safeOptions]);