Merge pull request #14 from pknu-wap/feature/#13/Spacer-Layouts-Compo…

…nent

Feature/#13/spacer layouts component

packages/components/Checkbox/Checkbox.stories.tsx

@@ -4,6 +4,7 @@ import { ComponentStory, ComponentMeta } from '@storybook/react';
 import { useState } from 'react';
 import { Checkbox, Props } from './Checkbox';
 import React from 'react';
+import { Spacer } from '../../layouts/Spacer';
 
 export default {
   title: 'Components/Checkbox',
@@ -42,6 +43,7 @@ const Template: ComponentStory<typeof Checkbox> = (args: Props) => {
             // 3️⃣ 체크표시 & 해제를 시키는 로직. 배열에 data가 있으면 true, 없으면 false
             checked={selected.includes(checkbox.data) ? true : false}
           />
+          <Spacer />
         </>
       ))}
       <div>Selected : {selected.join(', ')}</div>

packages/index.ts

@@ -5,6 +5,8 @@ export { Checkbox } from './components/Checkbox';
 
 // layouts
 
+export { Spacer } from './layouts/Spacer';
+
 // theme
 
 export { WapUIProvider } from './theme/theme-provider';

packages/layouts/Spacer/Spacer.stories.tsx

@@ -0,0 +1,50 @@
+import styled from '@emotion/styled';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { Spacer, Props } from './Spacer';
+import React from 'react';
+
+export default {
+  title: 'Layouts/Spacer',
+  component: Spacer,
+} as ComponentMeta<typeof Spacer>;
+
+const Template: ComponentStory<typeof Spacer> = (args: Props) => {
+  return (
+    <Container>
+      <FlexColumn>
+        <Box />
+        <Spacer {...args} />
+        <Box />
+      </FlexColumn>
+      <FlexRow>
+        <Box />
+        <Spacer {...args} />
+        <Box />
+      </FlexRow>
+    </Container>
+  );
+};
+
+const Box = styled.div`
+  background: #f31260;
+  width: 100px;
+  height: 100px;
+`;
+
+const Container = styled.div`
+  margin-top: 1rem;
+`;
+
+const FlexColumn = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
+const FlexRow = styled.div`
+  display: flex;
+  flex-direction: row;
+`;
+
+export const Default = Template.bind({});
+
+Default.args = {};

packages/layouts/Spacer/Spacer.styles.ts

@@ -0,0 +1,6 @@
+import styled from '@emotion/styled';
+
+export const Root = styled.span<{ x: number; y: number }>`
+  width: ${({ x }) => x}rem;
+  height: ${({ y }) => y}rem;
+`;

packages/layouts/Spacer/Spacer.tsx

@@ -0,0 +1,11 @@
+import * as S from './Spacer.styles';
+import React from 'react';
+
+export interface Props {
+  x?: number;
+  y?: number;
+}
+
+export const Spacer = ({ x = 1, y = 1 }: Props) => {
+  return <S.Root x={x} y={y} />;
+};

packages/layouts/Spacer/index.ts

@@ -0,0 +1 @@
+export { Spacer } from './Spacer';