design: Button, Input, Pagination 컴포넌트 UI 구현

src/assets/index.ts

@@ -1,3 +1,13 @@
+export { default as AngleSmallDown } from './svg/angle-small-down.svg';
+export { default as BookmarkRR } from './svg/bookmark-rr.svg';
+export { default as BookmarkSR } from './svg/bookmark-sr.svg';
+export { default as Search } from './svg/search.svg';
+export { default as Envelope } from './svg/envelope.svg';
+export { default as Lock } from './svg/lock.svg';
+export { default as KeyboardArrowLeft } from './svg/keyboard-arrow-left.svg';
+export { default as KeyboardArrowRight } from './svg/keyboard-arrow-right.svg';
+
+// TODO: 이전 SVG
 export { default as Email } from './svg/email.svg';
 export { default as Profile } from './svg/profile.svg';
 export { default as Plus } from './svg/plus.svg';
@@ -8,7 +18,6 @@ export { default as Star } from './svg/star.svg';
 export { default as Hearts } from './svg/hearts.svg';
 export { default as Home } from './svg/home.svg';
 export { default as Key } from './svg/key.svg';
-export { default as Lock } from './svg/lock.svg';
 export { default as LeftButton } from './svg/left-button.svg';
 export { default as RightButton } from './svg/right-button.svg';
 export { default as Person } from './svg/person.svg';

src/components/common/Button/Button.style.ts

@@ -7,75 +7,118 @@ export const getVariantStyling = (
   variant: Required<ButtonProps>['variant'],
 ) => {
   const style = {
-    solidPrimary: css({
-      backgroundColor: color.Primary[400],
-      color: color.Neutral[50],
-
-      '&:hover:enabled': {
-        backgroundColor: color.Primary[500],
-      },
-      '&:disabled': {
-        backgroundColor: color.Neutral[100],
-        color: color.Neutral[400],
-      },
+    primary: css({
+      borderRadius: '4px',
+      backgroundColor: color.MAIN,
+      color: color.WT,
     }),
-    solidNeutral: css({
-      backgroundColor: color.Neutral[800],
-      color: color.Neutral[600],
-      opacity: '.4',
+    outlinePrimary: css({
+      backgroundColor: 'transparent',
+      outline: `1px solid ${color.MAIN}`,
+      color: color.MAIN,
+      borderRadius: '30px',
 
-      '&:hover:enabled': {
-        opacity: '.8',
+      '&:hover': {
+        backgroundColor: color.MAIN,
+        color: color.WT,
+        boxShadow: '1px 2px 15px rgba(119, 130, 255, 0.4)',
       },
     }),
-    outlinePrimary: css({
+    outlineShadow: css({
+      backgroundColor: 'transparent',
+      outline: `1px solid ${color.GY[2]}`,
+      borderRadius: '30px',
+      gap: '10px',
+    }),
+    outlineHighlightR: css({
       backgroundColor: 'transparent',
-      outline: `1px solid ${color.Primary[400]}`,
-      color: color.Primary[400],
+      outline: `2px solid ${color.PINK}`,
+      borderRadius: '10px',
+      color: color.RED,
+      boxShadow: '1px 2px 7px rgba(0, 0, 0, 0.10)',
 
-      '&:hover:enabled': {
-        backgroundColor: color.Primary[400],
-        color: color.Neutral[50],
-      },
-      '&:disabled': {
-        outline: `1px solid ${color.Neutral[400]}`,
-        color: color.Neutral[400],
+      '&:hover': {
+        boxShadow: `0px 0px 15px ${color.PINK}`,
       },
     }),
-    outlineAssistive: css({
+    outlineHighlightB: css({
       backgroundColor: 'transparent',
-      outline: `1px solid ${color.Neutral[800]}`,
-      color: color.Neutral[600],
+      outline: `2px solid ${color.SKYBLUE}`,
+      borderRadius: '10px',
+      color: color.BLUE,
+      boxShadow: '1px 2px 7px rgba(0, 0, 0, 0.10)',
 
-      '&:hover:enabled': {
-        outline: `1px solid ${color.Neutral[700]}`,
-        color: color.Neutral[400],
-      },
-      '&:disabled': {
-        outline: `1px solid ${color.Neutral[400]}`,
-        color: color.Neutral[400],
+      '&:hover': {
+        boxShadow: `0px 0px 15px ${color.SKYBLUE}`,
       },
     }),
+    circle: css({
+      borderRadius: '50%',
+      backgroundColor: color.MAIN,
+      color: color.WT,
+      boxShadow: '1px 1px 4px rgba(0, 0, 0, 0.25)',
+    }),
   };
 
   return style[variant as keyof typeof style];
 };
 
-export const getSizeStyling = (size: Required<ButtonProps>['size']) => {
+export const getSizeByVariantStyling = (
+  variant: Required<ButtonProps>['variant'],
+  size: Required<ButtonProps>['size'],
+) => {
   const style = {
-    large: css(typo.Body.SemiBold_3, {
-      padding: '10px 24px',
-      borderRadius: '8px',
-      gap: '8px',
-    }),
-    small: css(typo.Body.Regular_1, {
-      padding: '6px 10px',
-      borderRadius: '6px',
-      gap: '4px',
-    }),
+    primary: {
+      large: css(typo.Comment.SemiBold, {
+        padding: '8px 16px',
+      }),
+      medium: css({}),
+    },
+    outlinePrimary: {
+      large: css(typo.Main.SemiBold, {
+        padding: '10px 25px',
+      }),
+      medium: css({}),
+    },
+    outlineShadow: {
+      large: css(typo.Main.SemiBold, {
+        padding: '15px 30px',
+        color: color.BK,
+        boxShadow: '1px 2px 15px rgba(0, 0, 0, 0.05)',
+      }),
+      medium: css(typo.Number.Medium_18, {
+        padding: '10px 35px',
+        color: color.MAIN,
+        boxShadow: '1px 2px 7px rgba(0, 0, 0, 0.15)',
+      }),
+    },
+    outlineHighlightR: {
+      large: css(typo.Component.Bold, {
+        width: '410px',
+        padding: '22px 50px',
+      }),
+      medium: css({}),
+    },
+    outlineHighlightB: {
+      large: css(typo.Component.Bold, {
+        width: '410px',
+        padding: '22px 50px',
+      }),
+      medium: css({}),
+    },
+    circle: {
+      large: css({
+        padding: '16px',
+        '& svg': {
+          width: '22px',
+          height: '22px',
+        },
+      }),
+      medium: css({}),
+    },
   };
 
-  return style[size];
+  return style[variant][size];
 };
 
 export const buttonStyling = css({
@@ -88,7 +131,7 @@ export const buttonStyling = css({
   cursor: 'pointer',
 
   '& svg': {
-    width: '16px',
-    height: '16px',
+    width: '24px',
+    height: '24px',
   },
 });

src/components/common/Button/Button.tsx

@@ -1,27 +1,29 @@
-import React, { forwardRef } from 'react';
+import type { Size } from '@/types/theme';
 import type { ComponentPropsWithRef, ForwardedRef, ReactElement } from 'react';
-import type { Size } from '../../../types/theme';
+import React, { forwardRef } from 'react';
 import {
   buttonStyling,
-  getSizeStyling,
+  getSizeByVariantStyling,
   getVariantStyling,
 } from './Button.style';
 
 export interface ButtonProps extends ComponentPropsWithRef<'button'> {
-  size?: Extract<Size, 'small' | 'large'>;
+  size?: Extract<Size, 'large' | 'medium'>;
   variant?:
-    | 'solidPrimary'
-    | 'solidNeutral'
+    | 'primary'
     | 'outlinePrimary'
-    | 'outlineAssistive';
+    | 'outlineShadow'
+    | 'outlineHighlightR'
+    | 'outlineHighlightB'
+    | 'circle';
   iconLeft?: ReactElement;
   iconRight?: ReactElement;
 }
 
 const Button = (
   {
     size = 'large',
-    variant = 'solidPrimary',
+    variant = 'primary',
     children,
     iconLeft,
     iconRight,
@@ -32,7 +34,11 @@ const Button = (
   <button
     type="button"
     ref={ref}
-    css={[buttonStyling, getVariantStyling(variant), getSizeStyling(size)]}
+    css={[
+      buttonStyling,
+      getVariantStyling(variant),
+      getSizeByVariantStyling(variant, size),
+    ]}
     {...attributes}
   >
     {iconLeft}

src/components/common/ErrorMessage/ErrorMessage.style.ts

@@ -6,6 +6,6 @@ import type { ErrorMessageProps } from './ErrorMessage';
 export const getTextStyling = (
   isError: Required<ErrorMessageProps>['isError'],
 ) =>
-  css(typo.Body.Medium_5, {
-    color: isError ? color.Red[500] : color.Neutral[600],
+  css(typo.Main.Medium, {
+    color: isError ? color.RED : color.GY[1],
   });