Feat[#THKV-121] : Selectbox 및 하위 컴포넌트 리디자인 및 리팩토링

src/app/(root)/select-test/page.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { Selectbox } from '@/components/common/Selectbox';
+import { Body2Black } from '@/components/common/Typography';
+
+const options = [
+  { value: 'option1', label: '옵션 1' },
+  { value: 'option2', label: '옵션 2' },
+  { value: 'option3', label: '옵션 3' },
+  { value: 'option4', label: '옵션 4' },
+  { value: 'option5', label: '옵션 5' },
+  { value: 'option6', label: '옵션 6' },
+  { value: 'option7', label: '옵션 7' },
+  { value: 'option8', label: '옵션 8' },
+  { value: 'option9', label: '옵션 9' },
+  { value: 'option10', label: '옵션 10' },
+];
+
+const page = () => {
+  return (
+    <div className='mt-20 bg-[#D8D8D8] p-4'>
+      <Body2Black>Select Box</Body2Black>
+      <div className='flex flex-col gap-2'>
+        <Selectbox options={options} buttonSize='sm' />
+        <Selectbox options={options} buttonSize='sm' bgColor='grey' />
+        <Selectbox options={options} buttonSize='md' />
+        <Selectbox options={options} buttonSize='md' bgColor='grey' />
+        <Selectbox
+          options={options}
+          buttonSize='sm'
+          bgColor='disabled'
+          readonly
+        />
+        <Selectbox
+          options={options}
+          buttonSize='md'
+          bgColor='disabled'
+          readonly
+        />
+      </div>
+    </div>
+  );
+};
+
+export default page;

src/app/globals.css

@@ -15,9 +15,11 @@
 
   .custom-scrollbar::-webkit-scrollbar-thumb,
   .scrollbar-gray-100::-webkit-scrollbar-thumb {
-    background-color: #aaaaaa; /* 손잡이 색상 gray400 */
+    /* 손잡이 색상 grey300*/
+    background-color: #abadb2;
     border-radius: 20px;
-    border: 6px solid #fcfbfa; /* 트랙과의 구분을 위한 여백 white100*/
+    /* 트랙과의 구분을 위한 여백 white100*/
+    border: 6px solid #ffffff;
   }
 
   .scrollbar-gray-100::-webkit-scrollbar-thumb {

src/components/common/Button/Button.variant.tsx

@@ -15,6 +15,7 @@ export const buttonVariants = cva(
         outline:
           'bg-white-100 text-black-100 border border-grey-100 hover:bg-grey-100 active:bg-grey-200 disabled:bg-white-100 disabled:text-grey-200 disabled:border-grey-100',
         pagination: '',
+        default: '',
       },
       size: {
         // 추후 삭제 예정

src/components/common/Dropdown/Dropdown.variant.tsx

@@ -1,17 +1,18 @@
 import { cva } from 'class-variance-authority';
 
 export const dropdownVariants = cva(
-  'absolute z-10 w-full max-h-56 overflow-y-auto custom-scrollbar bg-white-100 border-[1px] border-red rounded-md shadow-md',
+  'absolute mt-1 z-10 w-full max-h-56 overflow-y-auto custom-scrollbar bg-white-100 border border-grey-100 rounded-lg shadow-[0_8px_4px_rgba(0,0,0,0.12)]',
   {
     variants: {
       isOpen: {
         true: 'block',
         false: 'hidden',
       },
+      // 추후 삭제
       size: {
-        small: 'rounded-md mt-1',
-        basic: 'rounded-lg mt-[6px]',
-        large: 'rounded-lg mt-2',
+        small: '',
+        basic: '',
+        large: '',
       },
     },
     defaultVariants: {

src/components/common/Icon/assets/ArrowDown.tsx

@@ -1,22 +1,24 @@
 import { SVGProps } from 'react';
 
 const ArrowDown = ({
-  width = 20,
-  height = 20,
-  color = '#000',
+  width,
+  height,
+  color,
   ...props
 }: SVGProps<SVGSVGElement>) => {
   return (
     <svg
       width={width}
       height={height}
-      viewBox='0 0 24 24'
+      viewBox='0 0 20 20'
       fill='none'
       xmlns='http://www.w3.org/2000/svg'
       {...props}
     >
       <path
-        d='M5.70711 9.71069C5.31658 10.1012 5.31658 10.7344 5.70711 11.1249L10.5993 16.0123C11.3805 16.7927 12.6463 16.7924 13.4271 16.0117L18.3174 11.1213C18.708 10.7308 18.708 10.0976 18.3174 9.70708C17.9269 9.31655 17.2937 9.31655 16.9032 9.70708L12.7176 13.8927C12.3271 14.2833 11.6939 14.2832 11.3034 13.8927L7.12132 9.71069C6.7308 9.32016 6.09763 9.32016 5.70711 9.71069Z'
+        fillRule='evenodd'
+        clipRule='evenodd'
+        d='M5.21967 8.21967C5.51256 7.92678 5.98744 7.92678 6.28033 8.21967L10 11.9393L13.7197 8.21967C14.0126 7.92678 14.4874 7.92678 14.7803 8.21967C15.0732 8.51256 15.0732 8.98744 14.7803 9.28033L10.5303 13.5303C10.3897 13.671 10.1989 13.75 10 13.75C9.80109 13.75 9.61032 13.671 9.46967 13.5303L5.21967 9.28033C4.92678 8.98744 4.92678 8.51256 5.21967 8.21967Z'
         fill={color}
       />
     </svg>

src/components/common/Icon/assets/ArrowUp.tsx

@@ -1,22 +1,24 @@
 import { SVGProps } from 'react';
 
 const Arrowup = ({
-  width = 20,
-  height = 20,
-  color = '#000',
+  width,
+  height,
+  color,
   ...props
 }: SVGProps<SVGSVGElement>) => {
   return (
     <svg
       width={width}
       height={height}
-      viewBox='0 0 24 24'
+      viewBox='0 0 20 20'
       fill='none'
       xmlns='http://www.w3.org/2000/svg'
       {...props}
     >
       <path
-        d='M18.2929 15.2893C18.6834 14.8988 18.6834 14.2656 18.2929 13.8751L13.4007 8.98766C12.6195 8.20726 11.3537 8.20757 10.5729 8.98835L5.68257 13.8787C5.29205 14.2692 5.29205 14.9024 5.68257 15.2929C6.0731 15.6835 6.70626 15.6835 7.09679 15.2929L11.2824 11.1073C11.673 10.7168 12.3061 10.7168 12.6966 11.1073L16.8787 15.2893C17.2692 15.6798 17.9024 15.6798 18.2929 15.2893Z'
+        fillRule='evenodd'
+        clipRule='evenodd'
+        d='M9.46967 6.47431C9.76256 6.18142 10.2374 6.18142 10.5303 6.47431L14.7803 10.7243C15.0732 11.0172 15.0732 11.4921 14.7803 11.785C14.4874 12.0779 14.0126 12.0779 13.7197 11.785L10 8.0653L6.28033 11.785C5.98744 12.0779 5.51256 12.0779 5.21967 11.785C4.92678 11.4921 4.92678 11.0172 5.21967 10.7243L9.46967 6.47431Z'
         fill={color}
       />
     </svg>

src/components/common/Icon/assets/index.ts

@@ -44,8 +44,8 @@ export const iconMap: Record<string, IconMapEntry> = {
   edit: { type: 'fill', file: Edit },
   xmark: { type: 'fill', file: Xmark },
   plus: { type: 'stroke', file: Plus },
-  arrowUp: { type: 'stroke', file: Arrowup },
-  arrowDown: { type: 'stroke', file: ArrowDown },
+  arrowUp: { type: 'fill', file: Arrowup },
+  arrowDown: { type: 'fill', file: ArrowDown },
   arrowPrev: { type: 'fill', file: ArrowPrev },
   arrowNext: { type: 'stroke', file: ArrowNext },
   arrowPrevBlock: { type: 'fill', file: ArrowPrevBlock },

src/components/common/OptionList/OptionList.variant.tsx

@@ -1,25 +1,25 @@
 import { cva } from 'class-variance-authority';
 
+// 추후 variants 비롯 파일 전체 삭제
 export const optionListUlVariants = cva('flex h-full w-full flex-col', {
   variants: {
+    // 추후 삭제
     size: {
-      small: 'pl-2 pt-2 pb-2 pr-1 gap-1 text-sm rounded-md',
-      basic:
-        'pl-[10px] pt-[10px] pb-[10px] pr-[5px] gap-2 text-basic rounded-lg',
-      large: 'pl-3 pt-3 pb-3 pr-[6px] gap-2 text-lg rounded-lg',
+      small: '',
+      basic: '',
+      large: '',
     },
   },
 });
 
-export const optionListLiVariants = cva(
-  'cursor-pointer rounded-md hover:bg-gray-100 active:bg-gray-200',
-  {
-    variants: {
-      size: {
-        small: 'pt-2 pb-2 pl-2 mr-1 gap-1 text-sm rounded-md',
-        basic: 'p-[10px] mr-[5px] gap-2 text-basic rounded-lg ',
-        large: 'pl-3 mr-[6px] pt-3 pb-3 py-4 gap-2 text-lg rounded-lg',
-      },
+// 추후 variants 비롯 파일 전체 삭제
+export const optionListLiVariants = cva('', {
+  variants: {
+    // 추후 삭제
+    size: {
+      small: '',
+      basic: '',
+      large: '',
     },
   },
-);
+});

src/components/common/OptionList/index.tsx

@@ -1,3 +1,4 @@
+import { cn } from '@/utils/core';
 import {
   optionListLiVariants,
   optionListUlVariants,
@@ -11,11 +12,20 @@ type OptionListProps = {
 };
 
 const OptionList = ({ options, size, onSelect }: OptionListProps) => (
-  <ul className={optionListUlVariants({ size })} role='listbox'>
+  <ul
+    className={cn(
+      optionListUlVariants({ size }),
+      'flex h-full w-full flex-col',
+    )}
+    role='listbox'
+  >
     {options.map((option) => (
       <li
         key={option.value}
-        className={optionListLiVariants({ size })}
+        className={cn(
+          optionListLiVariants({ size }),
+          'cursor-pointer px-4 py-3 hover:bg-gray-50 active:bg-white-100 active:text-green-500',
+        )}
         onClick={() => onSelect(option.value)}
       >
         {option.label}

src/components/common/SelectButton/SelectButton.variant.tsx

@@ -1,17 +1,41 @@
 import { cva } from 'class-variance-authority';
 
 export const selectButtonVariants = cva(
-  'w-fit border-[1px] border-gray-300 rounded-md bg-white-100 text-left text-nowrap focus:border-green-700 focus:outline-none',
+  'w-full rounded-lg text-left text-nowrap border border-transparent focus:border-green-500 focus:border focus:outline-none',
   {
     variants: {
-      size: {
-        small: 'min-w-20 px-3 py-2 text-sm rounded-md pr-8',
-        basic: 'min-w-24 px-5 py-3 text-basic rounded-lg pr-10',
-        large: 'min-w-28 px-7 py-5 text-lg rounded-lg pr-12',
+      buttonSize: {
+        sm: 'h-12 px-4 py-3',
+        md: 'h-16 px-4 py-4',
+      },
+      bgColor: {
+        grey: 'bg-grey-50',
+        white: 'bg-white-100',
+        disabled:
+          'bg-grey-100 text-grey-500 cursor-not-allowed focus:border-transparent',
       },
       isError: {
         true: 'border-red-300',
       },
+      // 리디자인 완성 시 삭제
+      size: {
+        small: 'min-w-20 px-3 py-2 text-sm rounded-md pr-8',
+        basic: 'min-w-24 px-5 py-3 text-base rounded-lg pr-10',
+        large: 'min-w-28 px-7 py-5 text-lg rounded-lg pr-12',
+      },
     },
   },
 );
+
+export const typoVariants = cva('whitespace-pre-line text-wrap', {
+  variants: {
+    buttonSize: {
+      sm: 'text-lg leading-[1.52] tracking-[-0.008em] font-medium',
+      md: 'text-base leading-[1.52] tracking-[-0.008em] font-medium',
+    },
+    state: {
+      selected: 'text-black-100',
+      placeholder: 'text-grey-200',
+    },
+  },
+});

src/components/common/SelectButton/index.tsx

@@ -1,52 +1,68 @@
 import { VariantProps } from 'class-variance-authority';
 import { cn } from '@/utils/core';
-import { selectIconVariants } from '../Selectbox/Selectbox.variant';
+import Button from '@/components/common/Button/Button';
 import Icon from '@/components/common/Icon';
-import { Size } from '@/components/common/Selectbox';
-import { selectButtonVariants } from '@/components/common/SelectButton/SelectButton.variant';
+import { BgColor, ButtonSize, Size } from '@/components/common/Selectbox';
+import { selectIconVariants } from '@/components/common/Selectbox/Selectbox.variant';
+import {
+  selectButtonVariants,
+  typoVariants,
+} from '@/components/common/SelectButton/SelectButton.variant';
 
 type SelectButtonProps = VariantProps<typeof selectButtonVariants> & {
   selectedOption: string | null;
   placeholder: string;
-  size: Size;
+  buttonSize: ButtonSize;
+  bgColor: BgColor;
   isOpen: boolean;
   className?: string;
-  onClick: () => void;
   isError?: boolean;
-};
-
-const ICON_SIZE: Record<Size, number> = {
-  small: 16,
-  basic: 16,
-  large: 20,
+  onClick: () => void;
+  // 리디자인 완성 시 삭제
+  size?: Size;
 };
 
 const SelectButton = ({
   selectedOption,
   placeholder,
-  size,
+  buttonSize,
+  bgColor,
   isOpen,
   className,
-  onClick,
   isError = false,
+  onClick,
+  size,
 }: SelectButtonProps) => {
-  const iconSize = ICON_SIZE[size];
+  const iconSize = buttonSize === 'sm' ? 20 : 24;
+
   return (
-    <button
-      className={cn(selectButtonVariants({ size, isError }), className)}
+    <Button
+      className={cn(
+        selectButtonVariants({ size, buttonSize, bgColor, isError }),
+        className,
+      )}
       type='button'
+      variant='default'
       onClick={onClick}
       aria-haspopup='listbox'
       aria-expanded={isOpen}
     >
-      <span>{selectedOption || placeholder}</span>
+      <span
+        className={typoVariants({
+          buttonSize,
+          state: selectedOption ? 'selected' : 'placeholder',
+        })}
+      >
+        {selectedOption || placeholder}
+      </span>
       <Icon
         className={selectIconVariants({ size })}
         name={isOpen ? 'arrowUp' : 'arrowDown'}
+        color='black'
         width={iconSize}
         height={iconSize}
       />
-    </button>
+    </Button>
   );
 };
 

src/components/common/Selectbox/Selectbox.variant.tsx

@@ -13,13 +13,14 @@ export const selectboxVariants = cva('inline-block relative w-full', {
 });
 
 export const selectIconVariants = cva(
-  'absolute top-1/2 z-20 -translate-y-1/2',
+  'absolute top-1/2 z-20 -translate-y-1/2 right-4',
   {
     variants: {
       size: {
-        small: 'right-2',
-        basic: 'right-4',
-        large: 'right-4',
+        // 리디자인 완료 후 삭제
+        small: '',
+        basic: '',
+        large: '',
       },
     },
     defaultVariants: {