Drawer 컴포넌트를 구현한다

packages/payment/src/components/Drawer/Drawer.stories.tsx

@@ -0,0 +1,67 @@
+import { Meta, StoryFn } from '@storybook/react';
+import Drawer, { DrawerProps } from './Drawer';
+import { PropsWithChildren } from 'react';
+
+export default {
+  title: 'payments/Drawer',
+  component: Drawer,
+  argTypes: {
+    isOpen: {
+      defaultValue: true,
+      description: 'props 값으로 넘겨주어 drawer의 열고 닫음을 조작할 수 있습니다',
+      control: {
+        type: 'boolean'
+      }
+    },
+    anchor: {
+      defaultValue: 'bottom',
+      description: 'drawer가 열리는 방향에 따라서 값을 조정할 수 있습니다',
+      control: {
+        type: 'radio'
+      },
+      options: ['top', 'bottom', 'left', 'right']
+    }
+  }
+} as Meta;
+
+const Template: StoryFn<PropsWithChildren<DrawerProps>> = args => (
+  <div
+    style={{
+      width: '500px',
+      height: '500px',
+      position: 'relative',
+      border: '1px solid black',
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center'
+    }}
+  >
+    <div style={{ border: '1px solid red', width: '100px', height: '100px' }}>
+      Example Component
+    </div>
+    <Drawer {...args}>
+      <div
+        style={{
+          width: '100%',
+          height: '100%',
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          flexDirection: 'column',
+          gap: '20px'
+        }}
+      >
+        <div>drawer를 감싸는 상위 부모 컴포넌트의 position을 relative로 해주세요</div>
+        <div>drawer로 덮어주고 싶은 컴포넌트와 동일 레벨에 컴포넌트를 위치 시켜주세요</div>
+        <div>drawer의 z-index 값은 500입니다</div>
+      </div>
+    </Drawer>
+  </div>
+);
+
+export const Default = Template.bind({});
+
+Default.args = {
+  isOpen: true,
+  anchor: 'bottom'
+};

packages/payment/src/components/Drawer/Drawer.styled.tsx

@@ -0,0 +1,70 @@
+import styled, { css } from 'styled-components';
+
+export const Dimmed = styled.div`
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+
+  opacity: 0;
+  visibility: hidden;
+
+  background-color: rgba(0, 0, 0, 0.5);
+
+  z-index: ${({ theme }) => theme.zIndex.DRAWER};
+
+  &.is-open {
+    opacity: 1;
+    visibility: visible;
+  }
+`;
+
+export const Container = styled.div<{ anchor: 'left' | 'right' | 'top' | 'bottom' }>`
+  position: absolute;
+
+  background-color: ${({ theme }) => theme.colors.WHITE};
+  box-sizing: border-box;
+
+  ${({ anchor }) =>
+    ((anchor === 'left' || anchor === 'right') &&
+      css`
+        transition: width 1s ease-in-out;
+      `) ||
+    ((anchor === 'top' || anchor === 'bottom') &&
+      css`
+        transition: height 1s ease-in-out;
+      `)}
+
+  &.is-open {
+    ${({ anchor }) =>
+      (anchor === 'top' &&
+        css`
+          width: 100%;
+          height: 50%;
+          border-radius: 0 0 10px 10px;
+          top: 0;
+        `) ||
+      (anchor === 'left' &&
+        css`
+          width: 50%;
+          height: 100%;
+          border-radius: 0 10px 10px 0;
+          left: 0;
+        `) ||
+      (anchor === 'right' &&
+        css`
+          width: 50%;
+          height: 100%;
+          border-radius: 0 10px 10px 0;
+          right: 0;
+        `) ||
+      (anchor === 'bottom' &&
+        css`
+          width: 100%;
+          height: 50%;
+          bottom: 0;
+          border-radius: 10px 10px 0 0;
+        `)}
+  }
+`;

packages/payment/src/components/Drawer/Drawer.tsx

@@ -0,0 +1,25 @@
+import { PropsWithChildren } from 'react';
+import * as S from './Drawer.styled';
+
+export interface DrawerProps {
+  isOpen: boolean;
+  anchor: 'left' | 'right' | 'top' | 'bottom';
+  handleDimmerClickEvent?: (e: React.MouseEvent<HTMLDivElement>) => void;
+}
+
+const Drawer = ({
+  isOpen,
+  anchor,
+  handleDimmerClickEvent,
+  children
+}: PropsWithChildren<DrawerProps>) => {
+  return (
+    <S.Dimmed className={isOpen ? 'is-open' : ''} onClick={handleDimmerClickEvent}>
+      <S.Container className={isOpen ? 'is-open' : ''} anchor={anchor}>
+        {children}
+      </S.Container>
+    </S.Dimmed>
+  );
+};
+
+export default Drawer;