From 4cf3212089825369abf24f0194f06b5316c6ea69 Mon Sep 17 00:00:00 2001
From: neko113 <alstn113@gmail.com>
Date: Sun, 25 Sep 2022 15:29:55 +0900
Subject: [PATCH 1/3] =?UTF-8?q?Issue=20#13=20feat=20:=20Spacer=20Layout=20?=
 =?UTF-8?q?Component=20=EC=83=9D=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/layouts/Spacer/Spacer.stories.tsx | 50 ++++++++++++++++++++++
 packages/layouts/Spacer/Spacer.styles.ts   |  6 +++
 packages/layouts/Spacer/Spacer.tsx         | 11 +++++
 packages/layouts/Spacer/index.ts           |  1 +
 4 files changed, 68 insertions(+)
 create mode 100644 packages/layouts/Spacer/Spacer.stories.tsx
 create mode 100644 packages/layouts/Spacer/Spacer.styles.ts
 create mode 100644 packages/layouts/Spacer/Spacer.tsx
 create mode 100644 packages/layouts/Spacer/index.ts

diff --git a/packages/layouts/Spacer/Spacer.stories.tsx b/packages/layouts/Spacer/Spacer.stories.tsx
new file mode 100644
index 0000000..036844c
--- /dev/null
+++ b/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 = {};
diff --git a/packages/layouts/Spacer/Spacer.styles.ts b/packages/layouts/Spacer/Spacer.styles.ts
new file mode 100644
index 0000000..20cad2f
--- /dev/null
+++ b/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;
+`;
diff --git a/packages/layouts/Spacer/Spacer.tsx b/packages/layouts/Spacer/Spacer.tsx
new file mode 100644
index 0000000..c959436
--- /dev/null
+++ b/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} />;
+};
diff --git a/packages/layouts/Spacer/index.ts b/packages/layouts/Spacer/index.ts
new file mode 100644
index 0000000..e7a837e
--- /dev/null
+++ b/packages/layouts/Spacer/index.ts
@@ -0,0 +1 @@
+export { Spacer } from './Spacer';

From a55f261c3f87814f7c0576fad3949b41958c11ba Mon Sep 17 00:00:00 2001
From: neko113 <alstn113@gmail.com>
Date: Sun, 25 Sep 2022 15:30:29 +0900
Subject: [PATCH 2/3] Issue #13 chore : export Spacer

---
 packages/index.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/index.ts b/packages/index.ts
index 5e5a2d7..c028476 100644
--- a/packages/index.ts
+++ b/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';

From cd7323ea234a1a2cca74f7ceb8da29c98f126c6b Mon Sep 17 00:00:00 2001
From: neko113 <alstn113@gmail.com>
Date: Sun, 25 Sep 2022 15:33:04 +0900
Subject: [PATCH 3/3] =?UTF-8?q?Issue=20#13=20refactor=20:=20Checkbox=20sto?=
 =?UTF-8?q?rybook=EC=97=90=20Spacer=20Component=20=EB=8F=84=EC=9E=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/components/Checkbox/Checkbox.stories.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/components/Checkbox/Checkbox.stories.tsx b/packages/components/Checkbox/Checkbox.stories.tsx
index 9945ac1..3084e78 100644
--- a/packages/components/Checkbox/Checkbox.stories.tsx
+++ b/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>