Merge pull request #107 from COW-dev/refactor/#99-select

[REFACTOR] Select 컴포넌트 크기 맞춤, drag svg 추가

Author: keemsebin

src/shared/index.ts

@@ -11,7 +11,7 @@ export { FileUpload } from './ui/FileUpload/FileUpload';
 export { Flex } from './ui/Flex';
 export { Icon } from './ui/Icon';
 export { IconButton } from './ui/IconButton';
-export { Input } from './ui/Input/Input';
+export { Input } from './ui/Input';
 export { ImageGallery } from './ui/ImageGallery';
 export { Modal } from './ui/Modal';
 export { MediaUpload } from './ui/MediaUpload';

src/shared/ui/Select/SelectButton.tsx

@@ -21,32 +21,46 @@ type Props = {
    * The size of the button.
    */
   size?: 'md' | 'lg';
+  /**
+   * Custom class name for styling.
+   */
+  className?: string;
 };
 
 const sizeVariants = {
-  md: 'px-3 py-1 text-sm min-w-24',
-  lg: 'px-4 py-3.5 min-w-64 text-lg',
+  md: 'px-3 py-1 text-sm min-w-24 rounded-lg',
+  lg: 'px-4 py-3.5 min-w-64 min-h-[52px] rounded-xl',
 } as const;
 
-export function SelectButton({ selected, onClick, isOpen, size = 'lg' }: Props) {
+export function SelectButton({
+  selected,
+  onClick,
+  isOpen,
+  size = 'lg',
+  className,
+  ...props
+}: Props) {
   return (
     <Flex
       alignItems="center"
       onClick={onClick}
       className={cn(
         sizeVariants[size],
-        'w-full rounded-lg border border-gray-200 bg-white font-semibold text-gray-400'
+        'w-full border border-gray-200 bg-white font-semibold text-gray-400',
+        className
       )}
+      {...props}
     >
       <button
         type="button"
         className={cn(
-          'flex w-full cursor-pointer items-center justify-between rounded-lg align-middle',
+          'flex w-full cursor-pointer items-center justify-between rounded-xl align-middle leading-none',
           isOpen && 'hover:rounded-b-none'
         )}
       >
         {selected}
         <Icon
+          size={20}
           name="arrowDown"
           className={cn(
             'transform transition-transform duration-300',

src/shared/ui/assets/drag.svg

@@ -9,6 +9,7 @@ import Check from './check.svg';
 import Close from './close.svg';
 import Dots from './dots.svg';
 import DownLoad from './download.svg';
+import Drag from './drag.svg';
 import Dustpan from './dustpan.svg';
 import Etc from './etc.svg';
 import File from './file.svg';
@@ -39,6 +40,7 @@ export const Icons = {
   camera: Camera,
   chart: Chart,
   download: DownLoad,
+  drag: Drag,
   dots: Dots,
   dustpan: Dustpan,
   peoples: Peoples,