Merge pull request #79 from COW-dev/fix/#78-select

keemsebin · web-flow · commit b44c695b0326 · 2025-10-10T14:27:12.000+09:00
[FIX] Select width 수정, TextArea/Input/Select padding 조절
diff --git a/src/shared/ui/Input/Input.tsx b/src/shared/ui/Input/Input.tsx
@@ -15,7 +15,7 @@ export function Input({ value, onClickReset, ...props }: InputProps) {
     <Flex gap={8} alignItems="center" className="relative w-full">
       <input
         value={value}
-        className="w-full rounded-xl border-none bg-white px-4 py-3 outline-1 outline-gray-200 focus:ring-4 focus:ring-blue-200 focus:outline-blue-500 md:py-3.5"
+        className="w-full rounded-xl border-none bg-white px-4 py-3.5 outline-1 outline-gray-200 focus:ring-4 focus:ring-blue-200 focus:outline-blue-500"
         {...props}
       />
       {value && (
diff --git a/src/shared/ui/Select/Option.tsx b/src/shared/ui/Select/Option.tsx
@@ -5,12 +5,12 @@ import { cn } from '@/shared/lib/core';
 import { useSelectContext } from './Select.context';
 
 const optionVariants = cva(
-  'font-semibold text- cursor-pointer first:rounded-t-md last:rounded-b-md hover:bg-gray-50',
+  'font-semibold text- cursor-pointer first:rounded-t-md last:rounded-b-md hover:bg-gray-100',
   {
     variants: {
       size: {
         md: 'px-3 py-1 text-sm',
-        lg: 'px-5 py-2 md:py-2.5',
+        lg: 'px-4 py-3.5',
       },
     },
     defaultVariants: {
diff --git a/src/shared/ui/Select/OptionGroupName.tsx b/src/shared/ui/Select/OptionGroupName.tsx
@@ -3,9 +3,5 @@ type Props = {
 };
 
 export function OptionGroupName({ name }: Props) {
-  return (
-    <div className="border-b-2 border-gray-100 px-5 py-2 text-base text-gray-300 md:text-lg">
-      {name}
-    </div>
-  );
+  return <div className="border-b-2 border-gray-100 px-4 py-3.5 text-lg text-gray-300">{name}</div>;
 }
diff --git a/src/shared/ui/Select/OptionList.tsx b/src/shared/ui/Select/OptionList.tsx
@@ -5,12 +5,12 @@ import { cn } from '@/shared/lib/core';
 import { useSelectContext } from './Select.context';
 
 const optionListVariants = cva(
-  'absolute top-full left-0 z-50 mt-1 max-h-60 w-full overflow-y-auto rounded-md border border-gray-200 bg-white font-semibold text-gray-400 shadow-lg',
+  'relative z-50 mt-1 max-h-60 w-full overflow-y-auto rounded-md border border-gray-200 bg-white font-semibold text-gray-400 shadow-lg',
   {
     variants: {
       size: {
         md: 'text-sm min-w-24',
-        lg: 'text-base md:text-lg',
+        lg: 'md:text-lg',
       },
     },
     defaultVariants: {
diff --git a/src/shared/ui/Select/Select.stories.tsx b/src/shared/ui/Select/Select.stories.tsx
@@ -7,15 +7,12 @@ const meta = {
   title: 'components/Select',
   component: Select,
   tags: ['autodocs'],
-  argTypes: {
-    size: {
-      control: { type: 'radio' },
-      options: ['md', 'lg'],
-      description: 'Select 컴포넌트의 크기 옵션입니다.',
-    },
-    defaultValue: {
-      control: 'text',
-      description: '기본 선택값입니다.',
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'Select 컴포넌트는 드롭다운 메뉴를 통해 여러 옵션 중 하나를 선택할 수 있는 UI 요소입니다. 사용자는 버튼을 클릭하여 옵션 목록을 열고, 원하는 옵션을 선택할 수 있습니다. 선택된 옵션은 버튼에 표시되며, 사용자는 언제든지 다른 옵션으로 변경할 수 있습니다.',
+      },
     },
   },
 } satisfies Meta<typeof Select>;
@@ -26,18 +23,22 @@ type Story = StoryObj<typeof Select>;
 const defaultContents = ['객관식', '단답형', '체크박스', '드롭다운', '파일'];
 
 export const Basic: Story = {
-  parameters: {
-    docs: {
-      description: {
-        component: '드롭다운 선택 컴포넌트로, 기본 선택과 그룹화된 선택을 지원합니다.',
-      },
-    },
-  },
   args: {
     value: '유형을 선택해주세요',
     size: 'md',
     defaultValue: '유형을 선택해주세요',
   },
+  argTypes: {
+    size: {
+      control: { type: 'radio' },
+      options: ['md', 'lg'],
+      description: 'Select 컴포넌트의 크기 옵션입니다.',
+    },
+    defaultValue: {
+      control: 'text',
+      description: '기본 선택값입니다.',
+    },
+  },
   render: (args) => {
     const [value, setValue] = useState(args.defaultValue);
     return (
diff --git a/src/shared/ui/Select/SelectButton.tsx b/src/shared/ui/Select/SelectButton.tsx
@@ -1,5 +1,6 @@
 import { cn } from '@/shared/lib/core';
 
+import { Flex } from '../Flex';
 import { Icon } from '../Icon';
 
 type Props = {
@@ -23,22 +24,24 @@ type Props = {
 };
 
 const sizeVariants = {
-  md: 'px-3 py-1 text-sm w-fit min-w-24',
-  lg: 'px-5 py-1.5 md:py-2.5 min-w-64 md:w-72 text-base md:text-lg',
+  md: 'px-3 py-1 text-sm min-w-24',
+  lg: 'px-4 py-3.5 min-w-64 text-lg',
 } as const;
 
 export function SelectButton({ selected, onClick, isOpen, size = 'lg' }: Props) {
   return (
-    <div
+    <Flex
+      alignItems="center"
       onClick={onClick}
       className={cn(
         sizeVariants[size],
-        'flex cursor-pointer items-center rounded-lg border border-gray-200 bg-white text-start font-semibold text-gray-400'
+        'w-full rounded-lg border border-gray-200 bg-white font-semibold text-gray-400'
       )}
     >
       <button
+        type="button"
         className={cn(
-          'flex w-full items-center justify-between rounded-lg align-middle hover:rounded-lg',
+          'flex w-full cursor-pointer items-center justify-between rounded-lg align-middle',
           isOpen && 'hover:rounded-b-none'
         )}
       >
@@ -52,6 +55,6 @@ export function SelectButton({ selected, onClick, isOpen, size = 'lg' }: Props)
           )}
         />
       </button>
-    </div>
+    </Flex>
   );
 }
diff --git a/src/shared/ui/Select/SelectMain.tsx b/src/shared/ui/Select/SelectMain.tsx
@@ -28,7 +28,7 @@ type Props = {
   children: ReactNode;
 } & Omit<ComponentProps<'select'>, 'value' | 'onChange' | 'size'>;
 
-export function SelectMain({ value, onChange, size = 'lg', children }: Props) {
+export function SelectMain({ value, onChange, size = 'lg', defaultValue, children }: Props) {
   const [isOpen, setIsOpen] = useState(false);
 
   const handleSelect = (option: string) => {
@@ -44,15 +44,13 @@ export function SelectMain({ value, onChange, size = 'lg', children }: Props) {
         size: size,
       }}
     >
-      <div className="relative w-fit">
-        <SelectButton
-          selected={value}
-          onClick={() => setIsOpen(!isOpen)}
-          size={size}
-          isOpen={isOpen}
-        />
-        {isOpen && <OptionList>{children}</OptionList>}
-      </div>
+      <SelectButton
+        selected={value || defaultValue}
+        onClick={() => setIsOpen(!isOpen)}
+        size={size}
+        isOpen={isOpen}
+      />
+      {isOpen && <OptionList>{children}</OptionList>}
     </SelectContext.Provider>
   );
 }
diff --git a/src/shared/ui/TextArea/TextArea.stories.tsx b/src/shared/ui/TextArea/TextArea.stories.tsx
@@ -23,7 +23,6 @@ type Story = StoryObj<typeof TextArea>;
 export const Basic: Story = {
   args: {
     value: '',
-    variant: 'gray',
     maxLength: 500,
     showCounter: true,
   },
diff --git a/src/shared/ui/TextArea/TextArea.tsx b/src/shared/ui/TextArea/TextArea.tsx
@@ -10,11 +10,6 @@ type TextAreaProps = {
    * Current value of the textarea
    */
   value: string;
-  /**
-   * Background color of the textarea
-   * @default 'gray'
-   */
-  variant: 'gray' | 'white';
   /**
    * Default height in number of rows
    * @default 3
@@ -31,14 +26,8 @@ type TextAreaProps = {
   className?: string;
 } & Omit<ComponentProps<'textarea'>, 'rows'>;
 
-const variantStyle = {
-  gray: 'bg-gray-50',
-  white: 'bg-white',
-} as const;
-
 export function TextArea({
   value,
-  variant = 'gray',
   rows = 3,
   showCounter = false,
   className,
@@ -49,8 +38,7 @@ export function TextArea({
       <textarea
         rows={rows}
         className={cn(
-          'focus:border-primary-100 w-full resize-none rounded-xl border-none px-4 py-3 text-gray-900 outline-1 outline-gray-200 transition-colors placeholder:text-gray-400 focus:border-1',
-          variantStyle[variant],
+          'w-full resize-none rounded-xl border-none bg-white px-4 py-3.5 text-gray-900 outline-1 outline-gray-200 transition-colors placeholder:text-gray-400 focus:ring-4 focus:ring-blue-200 focus:outline-blue-500',
           className
         )}
         {...props}
