Merge pull request #5 from bankids/feature/storybook

feat: button component

src/components/common/Button.stories.tsx

@@ -0,0 +1,34 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import Button from './Button';
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+  title: 'Common/Button',
+  component: Button,
+  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
+  argTypes: {},
+} as ComponentMeta<typeof Button>;
+
+// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
+const Template: ComponentStory<typeof Button> = (args) => <Button {...args} />;
+
+export const 다음 = Template.bind({});
+다음.args = {
+  property: 'primary',
+  label: '다음',
+  state: true,
+};
+
+export const 다음_disabled = Template.bind({});
+다음_disabled.args = {
+  property: 'primary',
+  label: '다음',
+  state: false,
+};
+
+export const 카카오톡으로_시작하기 = Template.bind({});
+카카오톡으로_시작하기.args = {
+  label: '카카오톡으로 시작하기',
+  property: 'etc',
+  state: true,
+};

src/components/common/Button.tsx

@@ -0,0 +1,62 @@
+import styled, { css } from 'styled-components';
+
+interface ButtonProps {
+  /**
+   * etc : 카카오로그인 / primary-secondary : 한칸 두칸
+   */
+  property: 'etc' | 'primary' | 'secondary';
+  /**
+   * 버튼 내용
+   */
+  label: string;
+  /**
+   * 버튼 활성화 상태
+   */
+  state?: boolean;
+  /**
+   * Optional click handler
+   */
+  onClick?: () => void;
+}
+
+function Button({ property, label, state, onClick }: ButtonProps) {
+  return (
+    <Wrapper
+      property={property}
+      state={true}
+      onClick={onClick}
+      disabled={!state}
+    >
+      {label}
+    </Wrapper>
+  );
+}
+
+export default Button;
+
+const Wrapper = styled.button<{
+  property: 'etc' | 'primary' | 'secondary';
+  state: boolean;
+}>`
+  width: 100%;
+  height: 50px;
+  border-radius: 8px;
+  border: none;
+  font-size: 16px;
+  font-weight: bold;
+  ${({ property }) =>
+    property == 'etc'
+      ? css`
+          color: ${({ theme }) => theme.palette.black};
+          background-color: ${({ theme }) => theme.palette.yellow[3]};
+        `
+      : css`
+          color: ${({ theme }) => theme.palette.white};
+          background-color: ${({ theme }) => theme.palette.yellow[0]};
+        `};
+
+  :disabled {
+    background-color: ${({ theme }) => theme.palette.gray[2]};
+    color: ${({ theme }) => theme.palette.gray[5]};
+  }
+`;

src/components/common/Margin.tsx

@@ -0,0 +1,12 @@
+import { ReactNode } from 'react';
+import styled from 'styled-components';
+
+function Margin({ children }: { children: ReactNode }) {
+  return <Wrapper>{children}</Wrapper>;
+}
+
+export default Margin;
+
+const Wrapper = styled.div`
+  margin: 20px 0px;
+`;

src/components/stories/Button.stories.tsx → src/components/stories/Example.stories.tsx

@@ -1,5 +1,5 @@
 import { ComponentStory, ComponentMeta } from '@storybook/react';
-import { Button } from './Button';
+import { Button } from './Example';
 
 // More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
 export default {

src/components/stories/Button.tsx → src/components/stories/Example.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import styled from 'styled-components';
-import './button.css';
+import './Example.css';
 
 interface ButtonProps {
   /**