컴포넌트 스타일 일관성 리팩토링

frontend/.storybook/main.ts

@@ -1,6 +1,6 @@
 import type { StorybookConfig } from '@storybook/react-webpack5';
 import { Configuration } from 'webpack';
-
+import path from 'path';
 const config: StorybookConfig = {
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   addons: [
@@ -27,10 +27,15 @@ const config: StorybookConfig = {
         },
       ],
     });
-
+    config.resolve = {
+      ...config.resolve,
+      alias: {
+        ...config.resolve?.alias,
+        '@': path.resolve(__dirname, '../src'),
+      },
+    };
     return config;
   },
-
   framework: {
     name: '@storybook/react-webpack5',
     options: {},

frontend/src/components/Button/Button.stories.tsx

@@ -27,36 +27,36 @@ const ButtonGroup = ({ disabled }: { disabled: boolean }) => (
   <div css={colStyle}>
     <div css={rowStyle}>
       <div css={buttonWrapper}>
-        <Button type='default' size='small' disabled={disabled}>
+        <Button variant='contained' size='small' disabled={disabled}>
           버튼
         </Button>
       </div>
       <div css={buttonWrapper}>
-        <Button type='default' size='medium' disabled={disabled}>
+        <Button variant='contained' size='medium' disabled={disabled}>
           버튼
         </Button>
       </div>
     </div>
     <div css={rowStyle}>
       <div css={buttonWrapper}>
-        <Button type='outlined' size='small' disabled={disabled}>
+        <Button variant='outlined' size='small' disabled={disabled}>
           버튼
         </Button>
       </div>
       <div css={buttonWrapper}>
-        <Button type='outlined' size='medium' disabled={disabled}>
+        <Button variant='outlined' size='medium' disabled={disabled}>
           버튼
         </Button>
       </div>
     </div>
     <div css={rowStyle}>
       <div css={buttonWrapper}>
-        <Button type='text' size='small' disabled={disabled}>
+        <Button variant='text' size='small' disabled={disabled}>
           버튼
         </Button>
       </div>
       <div css={buttonWrapper}>
-        <Button type='text' size='medium' disabled={disabled}>
+        <Button variant='text' size='medium' disabled={disabled}>
           버튼
         </Button>
       </div>
@@ -71,20 +71,3 @@ export const Enabled: Story = {
 export const Disabled: Story = {
   render: () => <ButtonGroup disabled={true} />,
 };
-
-export const CustomSized: Story = {
-  render: () => (
-    <div css={colStyle}>
-      <Button type='default' width='10rem'>
-        10rem
-      </Button>
-      <Button type='outlined' width='20rem'>
-        20rem
-      </Button>
-      <Button type='text' width='30rem'>
-        30rem
-      </Button>
-      <p style={{ color: '#888888', fontSize: '1.2rem' }}>(text 타입 버튼의 사이즈는 텍스트 길이에 비례합니다.)</p>
-    </div>
-  ),
-};

frontend/src/components/Button/Button.tsx

@@ -1,23 +1,15 @@
-import React from 'react';
-import { buttonStyle, stylesBySize, stylesByType, textTypeStyle } from './style';
+import { ButtonHTMLAttributes } from 'react';
+import * as S from './style';
 
-interface Props {
-  children: React.ReactNode;
-  onClick?: (e?: React.MouseEvent<HTMLButtonElement>) => void;
-  type?: 'default' | 'outlined' | 'text';
-  size?: 'small' | 'medium';
-  width?: string | number;
-  disabled?: boolean;
+export interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {
+  variant: 'contained' | 'outlined' | 'text';
+  size: 'small' | 'medium' | 'filled';
 }
 
-const Button = ({ children, onClick, type = 'default', size = 'medium', width, disabled = false }: Props) => (
-  <button
-    css={[buttonStyle, stylesByType[type], stylesBySize[size], type === 'text' ? textTypeStyle : width && { width }]}
-    disabled={disabled}
-    onClick={onClick}
-  >
+const Button = ({ children, onClick, variant, size, ...rest }: Props) => (
+  <S.Button variant={variant} size={size} onClick={onClick} {...rest}>
     {children}
-  </button>
+  </S.Button>
 );
 
 export default Button;

frontend/src/components/Button/style.ts

@@ -1,66 +1,81 @@
 import { css } from '@emotion/react';
+import styled from '@emotion/styled';
+import type { Props } from './Button';
 
-export const buttonStyle = css({
-  cursor: 'pointer',
-  borderRadius: '8px',
-  textAlign: 'center',
-  padding: '0.8rem 1.6rem',
-  display: 'flex',
-  alignItems: 'center',
-  gap: '0.8rem',
+const variants = {
+  contained: css`
+    color: rgb(52 60 72 / 100%);
+    background: rgb(255 211 105 / 100%);
+  `,
+  outlined: css`
+    color: rgb(255 211 105 / 100%);
+    background: none;
+    border: 0.1rem solid rgb(255 211 105 / 100%);
+  `,
+  text: css`
+    display: inline-block;
 
-  '&:not(:disabled):focus': {
-    outline: 'none',
-  },
+    width: fit-content;
+    height: fit-content;
+    padding: 0;
 
-  '&:not(:disabled):hover': {
-    opacity: 0.8,
-  },
+    color: rgb(255 211 105 / 100%);
 
-  '&:not(:disabled):active': {
-    opacity: 0.6,
-  },
-
-  '&:disabled': {
-    cursor: 'default',
-    opacity: 0.6,
-  },
-});
-
-export const stylesByType = {
-  default: css({
-    background: 'rgb(255 211 105 / 100%)',
-    color: 'rgb(52 60 72 / 100%)',
-  }),
-  outlined: css({
-    background: 'none',
-    border: '0.1rem solid rgb(255 211 105 / 100%)',
-    color: 'rgb(255 211 105 / 100%)',
-  }),
-  text: css({
-    background: 'none',
-    color: 'rgb(255 211 105 / 100%)',
-  }),
+    background: none;
+    border: none;
+  `,
 };
 
-export const stylesBySize = {
-  small: css({
-    height: '3rem',
-    fontWeight: 700,
-    fontSize: '1.4rem',
-  }),
-  medium: css({
-    height: '4rem',
-    fontWeight: 700,
-    fontSize: '1.8rem',
-  }),
+const sizes = {
+  small: css`
+    height: 3rem;
+    font-size: 1.4rem;
+    font-weight: 700;
+  `,
+  medium: css`
+    height: 4rem;
+    font-size: 1.8rem;
+    font-weight: 700;
+  `,
+  filled: css`
+    width: 100%;
+    height: 4rem;
+    font-size: 1.8rem;
+    font-weight: 700%;
+  `,
 };
 
-export const textTypeStyle = css({
-  padding: '0',
-  background: 'none',
-  border: 'none',
-  width: 'fit-content',
-  height: 'fit-content',
-  display: 'inline-block',
-});
+export const Button = styled.button<Props>`
+  cursor: pointer;
+
+  display: flex;
+  gap: 0.8rem;
+  align-items: center;
+  justify-content: center;
+
+  padding: 0.8rem 1.6rem;
+
+  text-align: center;
+
+  border-radius: 8px;
+
+  ${({ size }) => sizes[size]};
+  ${({ variant }) => variants[variant]};
+
+  &:disabled {
+    cursor: default;
+    opacity: 0.6;
+  }
+
+  &:not(:disabled):focus {
+    outline: none;
+  }
+
+  &:not(:disabled):hover {
+    opacity: 0.8;
+  }
+
+  &:not(:disabled):active {
+    opacity: 0.6;
+  }
+`;

frontend/src/components/Flex/Flex.tsx

@@ -1,8 +1,7 @@
-import { ReactNode } from 'react';
-import { FlexContainer } from './style';
+import { HTMLAttributes, PropsWithChildren } from 'react';
+import * as S from './style';
 
-export interface Props {
-  children: ReactNode;
+export interface Props extends HTMLAttributes<HTMLDivElement> {
   direction?: 'row' | 'row-reverse' | 'column' | 'column-reverse';
   justify?: 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly';
   align?: 'stretch' | 'flex-start' | 'flex-end' | 'center' | 'baseline';
@@ -17,19 +16,19 @@ export interface Props {
 
 const Flex = ({
   children,
-  direction = 'row',
-  justify = 'flex-start',
-  align = 'stretch',
-  wrap = 'nowrap',
-  gap = '0',
-  width = 'auto',
-  height = 'auto',
-  padding = '0',
-  margin = '0',
-  flex = 'none',
-  ...props
-}: Props) => (
-  <FlexContainer
+  direction,
+  justify,
+  align,
+  wrap,
+  gap,
+  width,
+  height,
+  padding,
+  margin,
+  flex,
+  ...rests
+}: PropsWithChildren<Props>) => (
+  <S.FlexContainer
     direction={direction}
     justify={justify}
     align={align}
@@ -40,10 +39,10 @@ const Flex = ({
     padding={padding}
     margin={margin}
     flex={flex}
-    {...props}
+    {...rests}
   >
     {children}
-  </FlexContainer>
+  </S.FlexContainer>
 );
 
 export default Flex;

frontend/src/components/Flex/style.ts

@@ -3,14 +3,15 @@ import type { Props } from './Flex';
 
 export const FlexContainer = styled.div<Props>`
   display: flex;
-  flex: ${(props) => props.flex};
-  flex-flow: ${(props) => props.direction} ${(props) => props.wrap};
-  gap: ${(props) => props.gap};
-  align-items: ${(props) => props.align};
-  justify-content: ${(props) => props.justify};
+  flex: ${({ flex }) => flex};
+  flex-direction: ${({ direction }) => direction};
+  flex-wrap: ${({ wrap }) => wrap};
+  gap: ${({ gap }) => gap};
+  align-items: ${({ align }) => align};
+  justify-content: ${({ justify }) => justify};
 
-  width: ${(props) => props.width};
-  height: ${(props) => props.height};
-  margin: ${(props) => props.margin};
-  padding: ${(props) => props.padding};
+  width: ${({ width }) => width};
+  height: ${({ height }) => height};
+  margin: ${({ margin }) => margin};
+  padding: ${({ padding }) => padding};
 `;

frontend/src/components/Header/Header.stories.tsx

@@ -1,9 +1,17 @@
+import { MemoryRouter } from 'react-router-dom';
 import Header from './Header';
 import type { Meta, StoryObj } from '@storybook/react';
 
 const meta: Meta<typeof Header> = {
   title: 'Header',
   component: Header,
+  decorators: [
+    (Story) => (
+      <MemoryRouter>
+        <Story />
+      </MemoryRouter>
+    ),
+  ],
 };
 
 export default meta;