From a0cf9db6e897e23c83ff3c1a08f48468012f8017 Mon Sep 17 00:00:00 2001
From: syc0123 <yechul.shin@gmail.com>
Date: Wed, 4 Mar 2026 11:08:42 +0900
Subject: [PATCH] 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
---
 docs/ycshin-node/MST[맥락]-다중선택-라벨표시.md | 8 +++++++-
 docs/ycshin-node/MST[체크]-다중선택-라벨표시.md | 2 ++
 frontend/components/v2/V2Select.tsx             | 5 +++--
 3 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/docs/ycshin-node/MST[맥락]-다중선택-라벨표시.md b/docs/ycshin-node/MST[맥락]-다중선택-라벨표시.md
index 81b536fe..155dde59 100644
--- a/docs/ycshin-node/MST[맥락]-다중선택-라벨표시.md
+++ b/docs/ycshin-node/MST[맥락]-다중선택-라벨표시.md
@@ -49,7 +49,13 @@
 - **최종**: wrapper div에 마우스 이벤트 + 절대 위치 div로 툴팁 렌더링 (성공)
 - **추가**: Popover 열릴 때 `setHoverTooltip(false)`로 툴팁 자동 숨김
 
-### 7. DropdownSelect 공통 컴포넌트 수정
+### 8. 선택 항목 표시 순서는 드롭다운 옵션 순서 기준
+
+- **결정**: 사용자가 클릭한 순서가 아닌 드롭다운 옵션 목록 순서대로 표시
+- **근거**: 선택 순서대로 보여주면 매번 순서가 달라져서 혼란. 옵션 순서 기준이 일관적이고 예측 가능
+- **구현**: `selectedValues.map(...)` → `safeOptions.filter(...).map(...)` 으로 변경
+
+### 9. DropdownSelect 공통 컴포넌트 수정
 
 - **결정**: 특정 화면이 아닌 `DropdownSelect` 자체를 수정
 - **근거**: 품목정보뿐 아니라 모든 화면에서 동일한 문제가 있으므로 공통 해결
diff --git a/docs/ycshin-node/MST[체크]-다중선택-라벨표시.md b/docs/ycshin-node/MST[체크]-다중선택-라벨표시.md
index 0a22eab9..c3599343 100644
--- a/docs/ycshin-node/MST[체크]-다중선택-라벨표시.md
+++ b/docs/ycshin-node/MST[체크]-다중선택-라벨표시.md
@@ -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 | 선택 항목 표시 순서를 옵션 순서 기준으로 변경 |
diff --git a/frontend/components/v2/V2Select.tsx b/frontend/components/v2/V2Select.tsx
index 7631bc74..9a31ca37 100644
--- a/frontend/components/v2/V2Select.tsx
+++ b/frontend/components/v2/V2Select.tsx
@@ -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]);