devping-kr · plla2 · Jan 9, 2025 · Jan 9, 2025 · Jan 9, 2025 · Jan 9, 2025
diff --git a/src/app/(root)/input/page.tsx b/src/app/(root)/input/page.tsx
@@ -0,0 +1,112 @@
+'use client';
+
+import { Input } from '@/components/common/Input';
+
+const page = () => {
+  return (
+    <div className='flex flex-col gap-3'>
+      <div className='flex flex-col gap-1'>
+        <span>white Input</span>
+        <div className='flex w-full flex-col items-center gap-2 bg-grey-400 px-3 py-3'>
+          <Input variant='white' size='s' />
+          <Input variant='white' size='m' />
+          <Input variant='white' size='s' placeholder='Placeholder...' />
+          <Input variant='white' size='m' placeholder='Placeholder...' />
+          <Input
+            variant='white'
+            size='s'
+            rightIconAction={() => alert('아이콘 클릭!')}
+            isRightIcon
+            rightIcon='show'
+            placeholder='Placeholder...'
+          />
+          <Input
+            variant='white'
+            size='m'
+            rightIconAction={() => alert('아이콘 클릭!')}
+            isRightIcon
+            rightIcon='show'
+            placeholder='Placeholder...'
+          />
+          <Input
+            variant='white'
+            size='s'
+            rightIconAction={() => alert('아이콘 클릭!')}
+            isRightIcon
+            rightIcon='hide'
+            placeholder='Placeholder...'
+          />
+          <Input
+            variant='white'
+            size='m'
+            rightIconAction={() => alert('아이콘 클릭!')}
+            isRightIcon
+            rightIcon='hide'
+            placeholder='Placeholder...'
+          />
+          <Input
+            variant='white'
+            size='m'
+            rightIconAction={() => alert('아이콘 클릭!')}
+            isRightIcon
+            rightIcon='hide'
+            placeholder='Placeholder...'
+            disabled={true}
+          />
+        </div>
+      </div>
+      <div className='flex flex-col gap-1'>
+        <span>Grey Input</span>
+        <div className='flex w-full flex-col items-center gap-2 bg-grey-400 px-3 py-3'>
+          <Input variant='grey50' size='s' />
+          <Input variant='grey50' size='m' />
+          <Input variant='grey50' size='s' placeholder='Placeholder...' />
+          <Input variant='grey50' size='m' placeholder='Placeholder...' />
+          <Input
+            variant='grey50'
+            size='s'
+            rightIconAction={() => alert('아이콘 클릭!')}
+            isRightIcon
+            rightIcon='show'
+            placeholder='Placeholder...'
+          />
+          <Input
+            variant='grey50'
+            size='m'
+            rightIconAction={() => alert('아이콘 클릭!')}
+            isRightIcon
+            rightIcon='show'
+            placeholder='Placeholder...'
+          />
+          <Input
+            variant='grey50'
+            size='s'
+            rightIconAction={() => alert('아이콘 클릭!')}
+            isRightIcon
+            rightIcon='hide'
+            placeholder='Placeholder...'
+          />
+          <Input
+            variant='grey50'
+            size='m'
+            rightIconAction={() => alert('아이콘 클릭!')}
+            isRightIcon
+            rightIcon='hide'
+            placeholder='Placeholder...'
+          />
+          <Input
+            variant='grey50'
+            size='m'
+            rightIconAction={() => alert('아이콘 클릭!')}
+            isRightIcon
+            rightIcon='hide'
+            placeholder='Placeholder...'
+            disabled={true}
+          />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default page;
diff --git a/src/components/common/Icon/assets/Hide.tsx b/src/components/common/Icon/assets/Hide.tsx
@@ -5,45 +5,20 @@ const Hide = ({ width, height, ...props }: SVGProps<SVGSVGElement>) => {
     <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='M9.76069 14.3668C9.18569 13.7928 8.83569 13.0128 8.83569 12.1378C8.83569 10.3848 10.2477 8.9718 11.9997 8.9718C12.8667 8.9718 13.6647 9.3228 14.2297 9.8968'
-        stroke='#79B669'
-        strokeWidth='1.5'
-        strokeLinecap='round'
-        strokeLinejoin='round'
+        fillRule='evenodd'
+        clipRule='evenodd'
+        d='M3.28082 2.22211C2.98793 1.92922 2.51305 1.92922 2.22016 2.22211C1.92726 2.515 1.92726 2.98988 2.22016 3.28277L16.7202 17.7828C17.0131 18.0757 17.4879 18.0757 17.7808 17.7828C18.0737 17.4899 18.0737 17.015 17.7808 16.7221L16.0356 14.9769C17.5069 13.8618 18.66 12.3489 19.3348 10.5984C19.4819 10.2168 19.4821 9.79371 19.3352 9.41207C17.8925 5.66295 14.2565 3.00244 9.99908 3.00244C8.28256 3.00244 6.66706 3.43493 5.25559 4.19688L3.28082 2.22211ZM7.75242 6.69372L8.84416 7.78545C9.19 7.60467 9.5834 7.50244 10.0007 7.50244C11.3814 7.50244 12.5007 8.62173 12.5007 10.0024C12.5007 10.4197 12.3984 10.8131 12.2177 11.159L13.3096 12.2509C13.7459 11.6101 14.0009 10.8361 14.0009 10.0024C14.0009 7.7933 12.21 6.00244 10.0009 6.00244C9.16724 6.00244 8.39317 6.25745 7.75242 6.69372Z'
+        fill='#C4C5C8'
       />
       <path
-        d='M15.1049 12.699C14.8729 13.989 13.8569 15.007 12.5679 15.241'
-        stroke='#79B669'
-        strokeWidth='1.5'
-        strokeLinecap='round'
-        strokeLinejoin='round'
-      />
-      <path
-        d='M6.65463 17.4724C5.06763 16.2264 3.72363 14.4064 2.74963 12.1374C3.73363 9.85835 5.08663 8.02835 6.68363 6.77235C8.27063 5.51635 10.1016 4.83435 11.9996 4.83435C13.9086 4.83435 15.7386 5.52635 17.3356 6.79135'
-        stroke='#79B669'
-        strokeWidth='1.5'
-        strokeLinecap='round'
-        strokeLinejoin='round'
-      />
-      <path
-        d='M19.4477 8.99084C20.1357 9.90484 20.7407 10.9598 21.2497 12.1368C19.2827 16.6938 15.8067 19.4388 11.9997 19.4388C11.1367 19.4388 10.2857 19.2988 9.46765 19.0258'
-        stroke='#79B669'
-        strokeWidth='1.5'
-        strokeLinecap='round'
-        strokeLinejoin='round'
-      />
-      <path
-        d='M19.887 4.24963L4.11304 20.0236'
-        stroke='#79B669'
-        strokeWidth='1.5'
-        strokeLinecap='round'
-        strokeLinejoin='round'
+        d='M10.7489 13.9326L13.2716 16.4553C12.2467 16.8099 11.1463 17.0024 10.0009 17.0024C5.74346 17.0024 2.10746 14.3419 0.664743 10.5928C0.51788 10.2112 0.518007 9.78808 0.665098 9.40652C1.15652 8.13176 1.90157 6.98302 2.8384 6.02213L6.07068 9.25442C6.02484 9.49674 6.00086 9.74679 6.00086 10.0024C6.00086 12.2116 7.79172 14.0024 10.0009 14.0024C10.2565 14.0024 10.5066 13.9785 10.7489 13.9326Z'
+        fill='#C4C5C8'
       />
     </svg>
   );

diff --git a/src/components/common/Icon/assets/Show.tsx b/src/components/common/Icon/assets/Show.tsx
@@ -11,22 +11,14 @@ const Show = ({ width, height, ...props }: SVGProps<SVGSVGElement>) => {
       {...props}
     >
       <path
-        fillRule='evenodd'
-        clipRule='evenodd'
-        d='M15.1615 12.0531C15.1615 13.7991 13.7455 15.2141 11.9995 15.2141C10.2535 15.2141 8.8385 13.7991 8.8385 12.0531C8.8385 10.3061 10.2535 8.89111 11.9995 8.89111C13.7455 8.89111 15.1615 10.3061 15.1615 12.0531Z'
-        stroke='#79B669'
-        strokeWidth='1.5'
-        strokeLinecap='round'
-        strokeLinejoin='round'
+        d='M12 15C13.6569 15 15 13.6569 15 12C15 10.3431 13.6569 9 12 9C10.3431 9 9 10.3431 9 12C9 13.6569 10.3431 15 12 15Z'
+        fill='#C4C5C8'
       />
       <path
         fillRule='evenodd'
         clipRule='evenodd'
-        d='M11.998 19.3549C15.806 19.3549 19.289 16.6169 21.25 12.0529C19.289 7.48885 15.806 4.75085 11.998 4.75085H12.002C8.194 4.75085 4.711 7.48885 2.75 12.0529C4.711 16.6169 8.194 19.3549 12.002 19.3549H11.998Z'
-        stroke='#79B669'
-        strokeWidth='1.5'
-        strokeLinecap='round'
-        strokeLinejoin='round'
+        d='M1.32341 11.4467C2.81066 6.97571 7.02791 3.75 12.0005 3.75C16.9708 3.75 21.1864 6.97271 22.6755 11.4405C22.7959 11.8015 22.796 12.1922 22.6759 12.5533C21.1886 17.0243 16.9714 20.25 11.9988 20.25C7.02847 20.25 2.81284 17.0273 1.32374 12.5595C1.2034 12.1985 1.20328 11.8078 1.32341 11.4467ZM17.25 12C17.25 14.8995 14.8995 17.25 12 17.25C9.1005 17.25 6.75 14.8995 6.75 12C6.75 9.1005 9.1005 6.75 12 6.75C14.8995 6.75 17.25 9.1005 17.25 12Z'
+        fill='#C4C5C8'
       />
     </svg>
   );

diff --git a/src/components/common/Icon/index.tsx b/src/components/common/Icon/index.tsx
@@ -21,7 +21,7 @@ const Icon = ({
   name,
   width = 20,
   height = 20,
-  color = 'black',
+  color,
   hoverColor,
   className,
 }: IconProps) => {

diff --git a/src/components/common/Input/Input.variant.tsx b/src/components/common/Input/Input.variant.tsx
@@ -1,44 +1,65 @@
 import { cva } from 'class-variance-authority';
 
 export const inputContainerVariants = cva(
-  'flex w-full items-center gap-2 border px-2 box-border',
+  'flex w-full items-center gap-2 px-4 rounded-lg',
   {
     variants: {
       variant: {
-        empty: 'border-none bg-inherit shadow-none',
+        white: 'bg-white-100',
+        grey50: 'bg-grey-50',
       },
+
+      isFocused: {
+        true: 'border border-green-500',
+        false: '',
+      },
+      disabled: {
+        true: '!bg-grey-100 cursor-not-allowed',
+      },
+
+      // 추후 삭제 예정
       bgcolor: {
         form: 'bg-green-100',
         search: 'bg-white-200',
         meal: 'bg-white-100',
       },
-      borderRadius: {
-        basic: 'rounded-md',
-        large: 'rounded-lg',
-      },
       height: {
         basic: 'h-[38px]',
         large: 'h-[62px]',
       },
-      isFocused: {
-        true: 'border-green-600',
-        false: 'border-green-400',
-      },
-      disabled: {
-        true: 'cursor-not-allowed opacity-80',
+      borderRadius: {
+        basic: 'rounded-md',
+        large: 'rounded-lg',
       },
       isError: {
         true: 'border-red-300',
       },
+      // ---------------
+      size: {
+        s: 'h-12',
+        m: 'h-16',
+      },
     },
     defaultVariants: {
       borderRadius: 'basic',
-      height: 'basic',
       bgcolor: 'form',
+      height: 'basic',
+      size: 's',
     },
   },
 );
 
 export const inputVariants = cva(
-  'w-full flex items-center bg-transparent text-[14px] placeholder:text-gray-400 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-80',
+  'w-full flex items-center bg-transparent text-[14px] placeholder:text-placeholder focus-visible:outline-none disabled:cursor-not-allowed disabled:bg-grey-100',
+  {
+    variants: {
+      size: {
+        s: 'text-base leading-[1.52] tracking-[-0.008em] font-medium',
+        m: 'text-lg leading-[1.52] tracking-[-0.008em] font-medium',
+      },
+    },
+    defaultVariants: {
+      size: 's',
+    },
+  },
 );
diff --git a/src/components/common/Input/index.tsx b/src/components/common/Input/index.tsx
@@ -24,7 +24,7 @@ export type InputIconProps =
       rightIcon?: string;
     };
 
-export type InputProps = ComponentPropsWithoutRef<'input'> &
+export type InputProps = Omit<ComponentPropsWithoutRef<'input'>, 'size'> &
   VariantProps<typeof inputVariants> &
   VariantProps<typeof inputContainerVariants> &
   InputIconProps & {
@@ -41,6 +41,8 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
       borderRadius,
       className,
       bgcolor,
+      height,
+      size,
       isLeftIcon = false,
       isRightIcon = false,
       rightIcon = '',
@@ -49,17 +51,17 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
       disabled,
       rightIconAction = () => {},
       onSubmit = () => {},
-      height,
       buttonText = '검색',
       isError,
       ...props
-    }: InputProps,
+    },
     ref,
   ) => {
     const [isFocused, setIsFocused] = useState(false);
 
     const handleFocus = useCallback(() => setIsFocused(true), []);
     const handleBlur = useCallback(() => setIsFocused(false), []);
+
     return (
       <div
         className={inputContainerVariants({
@@ -68,13 +70,14 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
           bgcolor,
           variant,
           height,
+          size,
           disabled,
           isError,
         })}
       >
         {isLeftIcon && <Icon name='search' width={22} height={22} />}
         <input
-          className={cn(inputVariants(), className)}
+          className={cn(inputVariants({ size }), className)}
           ref={ref}
           value={value}
           disabled={disabled}
@@ -83,12 +86,15 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
           {...props}
         />
         {isRightIcon && rightIcon && (
-          <button onClick={rightIconAction} type='button'>
+          <button
+            onClick={!disabled ? () => rightIconAction() : undefined}
+            type='button'
+          >
             <Icon
               name={rightIcon}
-              width={20}
-              height={20}
-              className='cursor-pointer'
+              width={size === 's' ? 20 : 24}
+              height={size === 's' ? 20 : 24}
+              className={`cursor-pointer ${disabled ? 'cursor-not-allowed' : ''}`}
             />
           </button>
         )}
@@ -108,4 +114,5 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
     );
   },
 );
+
 Input.displayName = 'Input';
diff --git a/src/styles/colors.ts b/src/styles/colors.ts
@@ -7,6 +7,7 @@ export const colors = {
   black: {
     100: '#101010',
   },
+  dimmed: 'rgba(0, 0, 0, 0.56)',
   grey: {
     50: '#F5F5F6',
     100: '#E2E3E5',

diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -10,6 +10,11 @@ const config: Config = {
   theme: {
     extend: {
       colors,
+      textColor: {
+        placeholder: colors.grey[200],
+        assistiveTxt: colors.grey[500],
+        dimmed: colors.dimmed,
+      },
       translate: {
         '-1/2': '-50%',
       },