-
옵션
-
-
-
-
-
+ return (
+
+ {/* 1. 기본 드롭다운 예시 */}
+
+ 1. 기본 드롭다운
+
+ {/* Large 사이즈 예시 */}
+
-
+ {/* Small 사이즈 예시 */}
+
+
+
-
f.value === selectedFilter)?.label
- : '필터 선택'
- }
- items={filterOptions}
- sideOffset={8}
- />
+ {/* 2. 상태 관리가 포함된 드롭다운 예시 */}
+
+
+ 2. 선택 상태가 있는 드롭다운
+
+ {/* 회전 화살표 아이콘 예시 */}
+
+
+ {/* 양방향 화살표 아이콘 예시 */}
+
+
-
+ {/* 3. 이미지 드롭다운 예시 */}
+
- 트리거}
- items={widthSizeTemp}
- />
+ {/* 4. 커스텀 스타일링 예시 */}
+
);
}
diff --git a/src/components/common/Dropdown.tsx b/src/components/common/Dropdown.tsx
index ffd8488..fe9ea74 100644
--- a/src/components/common/Dropdown.tsx
+++ b/src/components/common/Dropdown.tsx
@@ -1,93 +1,150 @@
-import {
- DropdownMenu,
- DropdownMenuContent,
- DropdownMenuItem,
- DropdownMenuTrigger,
-} from '../ui/Dropdown';
+'use client';
-interface IDropdownProps {
- /**
- * 트리거 요소입니다. 버튼 또는 문자열 등 컴포넌트로 전달할 수 있습니다.
- * @example
- *