[TASK-67] feat: 디자인 시스템 수정 및 추가사항 반영 (색상, 아이콘, Input)

src/app/auth/(authWithLayout)/sign-in/page.tsx

@@ -53,7 +53,7 @@ const SignInPage = () => {
           <SquareButtonL
             type='submit'
             disabled={!isFormDataValid}
-            variant={isFormDataValid ? 'primary' : 'tertiaty'}
+            variant={isFormDataValid ? 'primary' : 'tertiary'}
           >
             로그인
           </SquareButtonL>

src/app/auth/(authWithLayout)/sign-up/page.tsx

@@ -105,7 +105,7 @@ const SignUpPage = () => {
           <SquareButtonL
             type='submit'
             disabled={!isFormDataValid}
-            variant={isFormDataValid ? 'primary' : 'tertiaty'}
+            variant={isFormDataValid ? 'primary' : 'tertiary'}
           >
             <p>회원가입</p>
           </SquareButtonL>

src/components/ArtworkPage/ArtworkFilter.tsx

@@ -60,7 +60,7 @@ const ArtworkFilter = ({
               variant={
                 selectedArtworkField === artworkField.value
                   ? 'primary'
-                  : 'tertiaty'
+                  : 'tertiary'
               }
               buttonSize='m'
               onClick={() => handleArtworkFieldClick(artworkField.value)}

src/components/Button/OvalButton.tsx

@@ -11,19 +11,19 @@ const OvalButton = ({
   const bgColorClasses = {
     primary: 'bg-main',
     secondary: buttonSize === 'm' ? '' : 'bg-gray-200',
-    tertiaty: buttonSize === 'm' ? 'bg-gray-800' : 'bg-gray-700',
+    tertiary: buttonSize === 'm' ? 'bg-gray-800' : 'bg-gray-700',
   };
 
   const hoverBgColorClasses = {
     primary: 'hover:bg-[#885DFF]',
     secondary: buttonSize === 'm' ? '' : 'hover:bg-gray-300',
-    tertiaty: '',
+    tertiary: '',
   };
 
   const textColorClasses = {
     primary: 'text-white',
     secondary: buttonSize === 'm' ? 'text-transparent' : 'text-gray-600',
-    tertiaty: buttonSize === 'm' ? 'text-white' : 'text-gray-300',
+    tertiary: buttonSize === 'm' ? 'text-white' : 'text-gray-300',
   };
 
   const buttonSizeClasses = {

src/components/Button/SquareButtonL.tsx

@@ -1,7 +1,7 @@
 import { SquareButtonLProps } from '@/types';
 
 const SquareButtonL = ({
-  variant = 'tertiaty',
+  variant = 'tertiary',
   children,
 
   onClick,
@@ -15,19 +15,19 @@ const SquareButtonL = ({
   const bgColorClasses = {
     primary: 'bg-main',
     secondary: 'bg-gray-200',
-    tertiaty: 'bg-gray-800',
+    tertiary: 'bg-gray-800',
   };
 
   const hoverBgColorClasses = {
     primary: 'hover:bg-[#885DFF]',
     secondary: 'hover:bg-gray-300',
-    tertiaty: 'hover:bg-gray-700',
+    tertiary: 'hover:bg-gray-700',
   };
 
   const textColorClasses = {
     primary: 'text-white',
     secondary: 'text-gray-500',
-    tertiaty: 'text-gray-300',
+    tertiary: 'text-gray-300',
   };
 
   return (

src/components/FilterDropdown/index.tsx

@@ -62,7 +62,7 @@ const FilterDropdown = ({
                 className={`block w-[149px] h-[44px] px-[23px] py-[10px]
                   text-gray-400 cursor-pointer
                   ${option === selected && isDropdownOpen ? 'text-white' : 'text-gray-400'}
-                  hover:bg-gray-800`}
+                  hover:bg-background-overlay`}
               >
                 {option}
               </li>

src/components/Icon/iconSizes.ts

@@ -1,10 +1,10 @@
 export type IconSize = 'xl' | 'l' | 'm' | 's';
 
 const iconSizes: Record<IconSize, string> = {
-  xl: 'w-15 h-15',
-  l: 'w-7.5 h-7.5',
+  xl: 'w-[60px] h-[60px]',
+  l: 'w-[30px] h-[30px]',
   m: 'w-6 h-6',
-  s: 'w-4.5 h-4.5',
+  s: 'w-[18px] h-[18px]',
 };
 
 export default iconSizes;

src/components/Icon/icons/MoreVertical.tsx

@@ -0,0 +1,21 @@
+import { IconProps } from '@/types';
+
+const MoreVertical = ({ className }: IconProps) => {
+  return (
+    <svg
+      className={className}
+      viewBox='0 0 30 30'
+      fill='none'
+      xmlns='http://www.w3.org/2000/svg'
+    >
+      <path
+        fillRule='evenodd'
+        clipRule='evenodd'
+        d='M13.75 6.875C13.75 7.91053 14.5895 8.75 15.625 8.75C16.6605 8.75 17.5 7.91053 17.5 6.875C17.5 5.83947 16.6605 5 15.625 5C14.5895 5 13.75 5.83947 13.75 6.875ZM13.7134 15.1001C13.7134 16.1356 14.5528 16.9751 15.5884 16.9751C16.6239 16.9751 17.4634 16.1356 17.4634 15.1001C17.4634 14.0646 16.6239 13.2251 15.5884 13.2251C14.5528 13.2251 13.7134 14.0646 13.7134 15.1001ZM15.4883 25.188C14.4527 25.188 13.6133 24.3485 13.6133 23.313C13.6133 22.2775 14.4527 21.438 15.4883 21.438C16.5238 21.438 17.3633 22.2775 17.3633 23.313C17.3633 24.3485 16.5238 25.188 15.4883 25.188Z'
+        fill='currentColor'
+      />
+    </svg>
+  );
+};
+
+export default MoreVertical;

src/components/Icon/iconsNames.ts

@@ -32,6 +32,7 @@ import Lock from './icons/Lock';
 import Menu from './icons/Menu';
 import Message from './icons/Message';
 import MoreHorizontal from './icons/MoreHorizontal';
+import MoreVertical from './icons/MoreVertical';
 import Notification from './icons/Notification';
 import Pause from './icons/Pause';
 import Person from './icons/Person';
@@ -81,6 +82,7 @@ export const iconsNames: Record<
   Menu,
   Message,
   MoreHorizontal,
+  MoreVertical,
   Notification,
   Pause,
   Person,

src/components/Input/BasicInput.tsx

@@ -0,0 +1,129 @@
+'use client';
+
+import { Input } from '@nextui-org/react';
+import { ChangeEvent, useState } from 'react';
+
+import Icon from '../Icon/Icon';
+
+interface BasicInputProps {
+  type?: string;
+  label?: string;
+  placeholder?: string;
+
+  value: string;
+  onChange: (e: ChangeEvent<HTMLInputElement>) => void;
+
+  showClear?: boolean;
+  onClear?: () => void;
+  showEyeIcon?: boolean;
+  showTextLength?: boolean;
+  isInvalid?: boolean;
+  minLength?: number;
+  maxLength?: number;
+  errorMessage?: string;
+  successMessage?: string;
+}
+
+const BasicInput = ({
+  type,
+  label,
+  placeholder,
+  value,
+  onChange,
+  showClear = false,
+  onClear,
+  showEyeIcon = false,
+  showTextLength = false,
+  isInvalid = false,
+  minLength,
+  maxLength,
+  errorMessage,
+  successMessage,
+}: BasicInputProps) => {
+  const [isPasswordVisible, setIsPasswordVisible] = useState(false);
+
+  const togglePasswordVisibility = () =>
+    setIsPasswordVisible(!isPasswordVisible);
+
+  const currentTextLength = value.length;
+  const textLengthColor =
+    currentTextLength === 0
+      ? 'text-gray-700'
+      : maxLength && currentTextLength > maxLength
+        ? 'text-system-error'
+        : 'text-white';
+
+  return (
+    <div>
+      <Input
+        type={showEyeIcon && isPasswordVisible ? 'text' : type || 'text'}
+        label={label}
+        labelPlacement='outside'
+        placeholder={placeholder}
+        value={value}
+        onChange={onChange}
+        onClear={showClear ? onClear : undefined}
+        isInvalid={false}
+        minLength={minLength}
+        maxLength={maxLength}
+        endContent={
+          <>
+            {showEyeIcon && (
+              <button
+                type='button'
+                aria-label='toggle password visibility'
+                onClick={togglePasswordVisibility}
+                disabled={value === ''}
+              >
+                <Icon
+                  name={isPasswordVisible ? 'Eye' : 'EyeOff'}
+                  size='m'
+                  className={`text-gray-200 ${value === '' ? 'text-gray-800' : ''}`}
+                />
+              </button>
+            )}
+
+            {showTextLength && maxLength && (
+              <div className='flex items-center'>
+                <span className={`placeholder ${textLengthColor}`}>
+                  {currentTextLength}
+                </span>
+                <span className='placeholder text-gray-700'>/{maxLength}</span>
+              </div>
+            )}
+          </>
+        }
+        classNames={{
+          label: ['custom-label', 'top-5', '!text-gray-400'],
+          input: 'placeholder:text-gray-700',
+          inputWrapper: ['bg-gray-900', 'rounded-md', 'h-15'],
+        }}
+      />
+      <div className='flex items-center mt-[3px] h-[26px]'>
+        {isInvalid && errorMessage ? (
+          <>
+            <Icon
+              name='CheckCircleFilled'
+              size='s'
+              className='text-system-error mr-2'
+            />
+            <p className='button-s text-system-error'>{errorMessage}</p>
+          </>
+        ) : (
+          successMessage && (
+            <>
+              <Icon
+                name='AlertCircle'
+                size='s'
+                className='text-gray-400 mr-2'
+              />
+              <p className='button-s text-system-success'>{successMessage}</p>
+            </>
+          )
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default BasicInput;

src/types/buttons/BaseButtonProps.ts

@@ -1,7 +1,7 @@
 import { ReactNode } from 'react';
 
 export interface BaseButtonProps {
-  variant: 'primary' | 'secondary' | 'tertiaty';
+  variant: 'primary' | 'secondary' | 'tertiary';
   children: ReactNode;
 
   onClick?: () => void;

tailwind.config.ts

@@ -10,7 +10,7 @@ const colors = {
   black: '#111111',
   white: '#FFFFFF',
   gray: {
-    900: '#222222',
+    900: '#1B1B1B',
     800: '#2B2B2B',
     700: '#616161',
     600: '#757575',
@@ -25,6 +25,7 @@ const colors = {
   subtitle: '#F5F5F5',
   background: {
     base: '#101010',
+    overlay: '#232225',
   },
 };
 
@@ -42,12 +43,6 @@ export default {
         sans: ['var(--font-montserrat)'],
       },
       colors,
-      spacing: {
-        '4.5': '18px',
-        '7.5': '30px',
-        '15': '60px',
-        '78.25': '313px',
-      },
     },
     screens: {
       mobile: '677px',