로고, 버튼, 아이콘버튼 마이그레이션, ThemeProvider 스토리북에 적용

.storybook/preview.js

@@ -1,16 +1,17 @@
 import ko from 'axe-core/locales/ko.json';
-// import React from 'react';
-// import { MemoryRouter } from 'react-router-dom';
-// import { GlobalStyle } from 'styles/GlobalStyle';
+import React from 'react';
+import { GlobalStyle } from 'styles/GlobalStyle';
+import { ThemeProvider } from '@emotion/react';
+import { theme } from 'theme/theme';
 
-// export const decorators = [
-//   (Story) => (
-//     <MemoryRouter>
-//       <GlobalStyle />
-//       <Story />
-//     </MemoryRouter>
-//   ),
-// ];
+export const decorators = [
+  (Story) => (
+    <ThemeProvider theme={theme}>
+      <GlobalStyle />
+      <Story />
+    </ThemeProvider>
+  ),
+];
 
 export const parameters = {
   a11y: {

src/components/Button/Button.stories.tsx

@@ -0,0 +1,48 @@
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import { GiPerspectiveDiceSixFacesRandom } from 'react-icons/gi';
+import { Button } from './Button';
+
+export default {
+  title: 'Button',
+  component: Button,
+} as ComponentMeta<typeof Button>;
+
+const Template: ComponentStory<typeof Button> = (args) => <Button {...args} />;
+
+export const Default = Template.bind({});
+
+export const Outline = Template.bind({});
+
+Outline.args = {
+  variant: 'outlined',
+  color: 'primaryGreen',
+  children: (
+    <>
+      <GiPerspectiveDiceSixFacesRandom style={{ fontSize: '25px' }} />
+      REROLL
+    </>
+  ),
+  style: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: '10px',
+  },
+  round: true,
+};
+
+export const Fill = Template.bind({});
+
+Fill.args = {
+  type: 'submit',
+  variant: 'filled',
+  color: 'primaryGreen',
+  children: 'Sign In',
+  round: true,
+};
+
+export const Transparent = Template.bind({});
+
+Transparent.args = {
+  variant: 'transparent',
+  children: 'Not registered yet? Sign up here!',
+};

src/components/Button/Button.styled.tsx

@@ -0,0 +1,19 @@
+import styled from '@emotion/styled';
+import { StyledButtonProps } from './Button.types';
+
+export const StyledButton = styled.button<StyledButtonProps>`
+  padding: 10px;
+  border: none;
+  background: none;
+  border-radius: ${({ round }) => round && '30px'};
+`;
+
+export const StyledOutlineButton = styled(StyledButton)`
+  border: 1px solid currentColor;
+  color: ${({ color, theme }) => theme.color[color]};
+`;
+
+export const StyledFillButton = styled(StyledButton)`
+  background-color: ${({ color, theme }) => theme.color[color]};
+  color: ${({ theme }) => theme.color.white};
+`;

src/components/Button/Button.tsx

@@ -0,0 +1,33 @@
+import { ButtonProps, StyledButtonProps } from './Button.types';
+import { StyledButton, StyledOutlineButton, StyledFillButton } from './Button.styled';
+
+const renderButton = ({ type, round = false, color, style, variant, children, ...restProps }: ButtonProps) => {
+  const props: StyledButtonProps = { type, round, color, style };
+
+  switch (variant) {
+    case 'transparent':
+      return (
+        <StyledButton {...props} {...restProps}>
+          {children}
+        </StyledButton>
+      );
+    case 'outlined':
+      return (
+        <StyledOutlineButton {...props} {...restProps}>
+          {children}
+        </StyledOutlineButton>
+      );
+    case 'filled':
+      return (
+        <StyledFillButton {...props} {...restProps}>
+          {children}
+        </StyledFillButton>
+      );
+    default:
+      return null;
+  }
+};
+
+export const Button = (props: ButtonProps) => {
+  return renderButton(props);
+};

src/components/Button/Button.types.ts

@@ -0,0 +1,31 @@
+type Type = 'button' | 'submit';
+type Variant = 'transparent' | 'outlined' | 'filled';
+type Color = 'primaryGreen' | 'primaryOrange' | 'white' | 'black';
+type IconType = 'search' | 'user' | 'heart' | 'close' | 'cart' | 'link' | 'bookmark' | 'bookmarkFill' | 'up';
+type Size = 'small' | 'large';
+
+export interface StyledButtonProps {
+  type: Type;
+  round?: boolean;
+  color: Color;
+  style?: React.CSSProperties;
+  className?: string;
+}
+
+export interface ButtonProps extends StyledButtonProps {
+  variant: Variant;
+  children: React.ReactNode;
+}
+
+export interface StyledIconButtonProps {
+  type: Type;
+  ariaLabel: string;
+  circle: boolean;
+  color: Color;
+  size: Size;
+}
+
+export interface IconButtonProps extends StyledIconButtonProps {
+  iconType: IconType;
+  variant: Variant;
+}

src/components/Button/IconButton.stories.tsx

@@ -0,0 +1,71 @@
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import { IconButton } from './IconButton';
+
+export default {
+  title: 'IconButton',
+  component: IconButton,
+} as ComponentMeta<typeof IconButton>;
+
+const Template: ComponentStory<typeof IconButton> = (args) => <IconButton {...args} />;
+
+export const Default = Template.bind({});
+
+export const Search = Template.bind({});
+
+Search.args = {
+  type: 'submit',
+  ariaLabel: 'search',
+  iconType: 'search',
+  variant: 'transparent',
+  color: 'black',
+  size: 'small',
+};
+
+export const Link = Template.bind({});
+Link.decorators = [
+  (Story) => (
+    <div style={{ backgroundColor: 'rgba(0,0,0,0.5)' }}>
+      <Story />
+    </div>
+  ),
+];
+
+Link.args = {
+  type: 'button',
+  ariaLabel: 'copy link',
+  iconType: 'link',
+  variant: 'transparent',
+  color: 'white',
+  size: 'large',
+};
+
+export const Fill = Template.bind({});
+
+Fill.args = {
+  type: 'button',
+  ariaLabel: 'cart',
+  iconType: 'cart',
+  variant: 'filled',
+  color: 'primaryGreen',
+  size: 'large',
+  circle: true,
+};
+
+export const Outline = Template.bind({});
+Outline.decorators = [
+  (Story) => (
+    <div style={{ backgroundColor: 'rgba(0,0,0,0.5)' }}>
+      <Story />
+    </div>
+  ),
+];
+
+Outline.args = {
+  type: 'button',
+  ariaLabel: 'heart',
+  iconType: 'heart',
+  variant: 'outlined',
+  color: 'white',
+  size: 'large',
+  circle: true,
+};

src/components/Button/IconButton.styled.tsx

@@ -0,0 +1,42 @@
+import styled from '@emotion/styled';
+import { css } from '@emotion/react';
+import { StyledIconButtonProps } from './Button.types';
+
+const sizes = {
+  small: {
+    width: '24px',
+    height: '24px',
+    fontSize: '16px',
+  },
+  large: {
+    width: '50px',
+    height: '50px',
+    fontSize: '32px',
+  },
+};
+
+export const StyledButton = styled.button<StyledIconButtonProps>`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 0;
+  border: none;
+  background: none;
+  border-radius: ${({ circle }) => circle && '50%'};
+  color: ${({ color, theme }) => theme.color[color]};
+
+  ${({ size }) => css`
+    width: ${sizes[size].width};
+    height: ${sizes[size].height};
+    font-size: ${sizes[size].fontSize};
+  `}
+`;
+
+export const StyledOutlineButton = styled(StyledButton)`
+  border: 1px solid currentColor;
+`;
+
+export const StyledFillButton = styled(StyledButton)`
+  background-color: ${({ color, theme }) => theme.color[color]};
+  color: ${({ theme }) => theme.color.white};
+`;

src/components/Button/IconButton.tsx

@@ -0,0 +1,72 @@
+import { FiSearch } from 'react-icons/fi';
+import { FaArrowUp } from 'react-icons/fa';
+import { BsPersonCircle, BsCartCheckFill, BsLink45Deg, BsBookmark, BsFillBookmarkFill } from 'react-icons/bs';
+import { HiHeart } from 'react-icons/hi';
+import { MdClose } from 'react-icons/md';
+import { StyledButton, StyledOutlineButton, StyledFillButton } from './IconButton.styled';
+import { IconButtonProps, StyledIconButtonProps } from './Button.types';
+
+const renderIcon = (iconType: IconButtonProps['iconType']) => {
+  switch (iconType) {
+    case 'search':
+      return <FiSearch />;
+    case 'user':
+      return <BsPersonCircle />;
+    case 'heart':
+      return <HiHeart />;
+    case 'close':
+      return <MdClose />;
+    case 'cart':
+      return <BsCartCheckFill />;
+    case 'link':
+      return <BsLink45Deg />;
+    case 'bookmarkFill':
+      return <BsFillBookmarkFill />;
+    case 'bookmark':
+      return <BsBookmark />;
+    case 'up':
+      return <FaArrowUp />;
+    default:
+      return null;
+  }
+};
+
+const renderButton = ({
+  type,
+  ariaLabel,
+  iconType,
+  circle = false,
+  variant,
+  color,
+  size,
+  ...restProps
+}: IconButtonProps) => {
+  const props: StyledIconButtonProps = { type, ariaLabel, circle, color, size };
+
+  switch (variant) {
+    case 'transparent':
+      return (
+        <StyledButton aria-label={ariaLabel} {...props} {...restProps}>
+          {renderIcon(iconType)}
+        </StyledButton>
+      );
+    case 'outlined':
+      return (
+        <StyledOutlineButton aria-label={ariaLabel} {...props} {...restProps}>
+          {renderIcon(iconType)}
+        </StyledOutlineButton>
+      );
+    case 'filled':
+      return (
+        <StyledFillButton aria-label={ariaLabel} {...props} {...restProps}>
+          {renderIcon(iconType)}
+        </StyledFillButton>
+      );
+    default:
+      return null;
+  }
+};
+
+export const IconButton = (props: IconButtonProps) => {
+  return renderButton(props);
+};

src/components/Logo/Logo.stories.tsx

@@ -0,0 +1,11 @@
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import { Logo } from './Logo';
+
+export default {
+  title: 'Logo',
+  component: Logo,
+} as ComponentMeta<typeof Logo>;
+
+const Template: ComponentStory<typeof Logo> = () => <Logo />;
+
+export const Default = Template.bind({});

src/components/Logo/Logo.styled.tsx

@@ -0,0 +1,23 @@
+import styled from '@emotion/styled';
+import { pxToRem, media } from 'utils';
+import { LogoIcon } from './LogoIcon';
+
+export const StyledA = styled.a`
+  display: flex;
+  font-size: ${pxToRem(24)};
+  align-items: center;
+`;
+
+export const StyledIcon = styled(LogoIcon)`
+  margin: 10px;
+`;
+
+export const StyledSpan = styled.span`
+  width: 130px;
+  transition: 400ms width ease;
+
+  ${media.mobile} {
+    width: 0;
+    overflow: hidden;
+  }
+`;