refactor: reorganize Select stories and add size/state variants (#9639)

<img width="373" height="535" alt="스크린샷 2026-03-09 오후 2 48 10"
src="https://github.com/user-attachments/assets/7fea3fd4-0d90-4022-ad78-c53e3d5be887"
/>


## Summary
- Reorganize Select-related stories under `Components/Select/` hierarchy
(SingleSelect, MultiSelect, Select)
- Add `size` prop (`lg`/`md`) to SingleSelect, MultiSelect,
SelectTrigger for Figma Large (40px) / Medium (32px) variants
- Add `invalid` prop (red border) to SingleSelect and SelectTrigger
- Add `loading` prop (spinner) to SingleSelect
- Add `hover:bg-secondary-background-hover` to all select triggers
- Align disabled opacity to 30% per Figma spec
- Add new stories: Disabled, Invalid, Loading, MediumSize, AllStates

## Test plan
- [ ] Verify Storybook renders all stories under `Components/Select/`
- [ ] Check hover state visually on all select triggers
- [ ] Verify Medium size (32px) renders correctly
- [ ] Verify Invalid state shows red border
- [ ] Verify Loading state shows spinner
- [ ] Verify Disabled state has 30% opacity and no hover effect

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-9639-refactor-reorganize-Select-stories-and-add-size-state-variants-31e6d73d36508142b835f04ab6bdaefe)
by [Unito](https://www.unito.io)

---------

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>

src/components/ui/select/SelectTrigger.vue

@@ -5,24 +5,41 @@ import type { HTMLAttributes } from 'vue'
 
 import { cn } from '@/utils/tailwindUtil'
 
-const { class: className, ...restProps } = defineProps<
-  SelectTriggerProps & { class?: HTMLAttributes['class'] }
+const {
+  class: className,
+  size = 'lg',
+  invalid = false,
+  ...restProps
+} = defineProps<
+  SelectTriggerProps & {
+    class?: HTMLAttributes['class']
+    /** Trigger size: 'lg' (40px) or 'md' (32px) */
+    size?: 'lg' | 'md'
+    /** Show invalid (destructive) border */
+    invalid?: boolean
+  }
 >()
 </script>
 
 <template>
   <SelectTrigger
     v-bind="restProps"
+    :aria-invalid="invalid || undefined"
     :class="
       cn(
-        'flex h-10 w-full cursor-pointer items-center justify-between select-none',
-        'rounded-lg px-4 py-2 text-sm',
+        'flex w-full cursor-pointer items-center justify-between select-none',
+        size === 'md' ? 'h-8 px-3 py-1 text-xs' : 'h-10 px-4 py-2 text-sm',
+        'rounded-lg',
         'bg-secondary-background text-base-foreground',
-        'border-[2.5px] border-solid border-transparent',
         'transition-all duration-200 ease-in-out',
-        'focus:border-node-component-border focus:outline-none',
+        'hover:bg-secondary-background-hover',
+        'border-[2.5px] border-solid',
+        invalid
+          ? 'border-destructive-background'
+          : 'border-transparent focus:border-node-component-border',
+        'focus:outline-none',
         'data-placeholder:text-muted-foreground',
-        'disabled:cursor-not-allowed disabled:opacity-60',
+        'disabled:cursor-not-allowed disabled:opacity-30 disabled:hover:bg-secondary-background',
         '[&>span]:truncate',
         className
       )