Mina Choi
21e9f71f53
업로드 모달/툴바를 드롭다운(일괄 업로드 + 양식 다운로드)으로 정리, UPLOAD_COLUMNS 단일 정의 공유, CSV 템플릿(헤더+예시행) 추가. dropdown-menu UI 추가. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
56 lines
2.1 KiB
TypeScript
56 lines
2.1 KiB
TypeScript
"use client"
|
|
|
|
import { Menu as MenuPrimitive } from "@base-ui/react/menu"
|
|
|
|
import { cn } from "@/lib/utils"
|
|
|
|
// shadcn 스타일 DropdownMenu(@base-ui Menu 기반). 액션 묶음용 — Select 와 달리 값 선택이 아니라 명령 실행.
|
|
// 사용: <DropdownMenu><DropdownMenuTrigger render={<Button/>}>...</DropdownMenuTrigger>
|
|
// <DropdownMenuContent><DropdownMenuItem onClick={...}>...</DropdownMenuItem></DropdownMenuContent></DropdownMenu>
|
|
|
|
function DropdownMenu(props: MenuPrimitive.Root.Props) {
|
|
return <MenuPrimitive.Root data-slot="dropdown-menu" {...props} />
|
|
}
|
|
|
|
function DropdownMenuTrigger(props: MenuPrimitive.Trigger.Props) {
|
|
return <MenuPrimitive.Trigger data-slot="dropdown-menu-trigger" {...props} />
|
|
}
|
|
|
|
function DropdownMenuContent({
|
|
className,
|
|
children,
|
|
...props
|
|
}: MenuPrimitive.Popup.Props) {
|
|
return (
|
|
<MenuPrimitive.Portal>
|
|
<MenuPrimitive.Positioner className="z-50 outline-none" sideOffset={4} align="end">
|
|
<MenuPrimitive.Popup
|
|
data-slot="dropdown-menu-content"
|
|
className={cn(
|
|
"bg-popover text-popover-foreground relative z-50 min-w-40 overflow-hidden rounded-lg border border-border p-1 text-xs shadow-md outline-none data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
|
|
className
|
|
)}
|
|
{...props}
|
|
>
|
|
{children}
|
|
</MenuPrimitive.Popup>
|
|
</MenuPrimitive.Positioner>
|
|
</MenuPrimitive.Portal>
|
|
)
|
|
}
|
|
|
|
function DropdownMenuItem({ className, ...props }: MenuPrimitive.Item.Props) {
|
|
return (
|
|
<MenuPrimitive.Item
|
|
data-slot="dropdown-menu-item"
|
|
className={cn(
|
|
"relative flex w-full cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-xs outline-none select-none data-highlighted:bg-muted data-highlighted:text-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-3.5 [&_svg]:shrink-0 [&_svg]:text-muted-foreground",
|
|
className
|
|
)}
|
|
{...props}
|
|
/>
|
|
)
|
|
}
|
|
|
|
export { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem }
|