From 4df40c6096ec877f445b7ef2a498e7aa9eb2c1aa Mon Sep 17 00:00:00 2001
From: JuyeongByeon <wndudqus@naver.com>
Date: Mon, 9 Aug 2021 22:00:17 +0900
Subject: [PATCH] fix: storybook checkbox style

before:
1. there is no flexWrap option in Wrapper Component so in mobile environment some checkbox won't show
2. there is no key props for LabelWrapper, so there are warnings while compiling code

after:

1. added flexWrap:'wrap' and justifyContent:'center' for responsive layout
2. added key props for LabelWrapper
---
 .../CheckboxStories/CheckboxStory.tsx         | 27 ++++++++++---------
 1 file changed, 15 insertions(+), 12 deletions(-)

diff --git a/stories/dooboo-ui/CheckboxStories/CheckboxStory.tsx b/stories/dooboo-ui/CheckboxStories/CheckboxStory.tsx
index cf396ed7..940bc167 100644
--- a/stories/dooboo-ui/CheckboxStories/CheckboxStory.tsx
+++ b/stories/dooboo-ui/CheckboxStories/CheckboxStory.tsx
@@ -53,23 +53,26 @@ const CheckboxStory: FC = () => {
         Checkbox
       </StyledText>
 
-      <View style={{flexDirection: 'row'}}>
+      <View
+        style={{
+          flexDirection: 'row',
+          flexWrap: 'wrap',
+          justifyContent: 'center',
+        }}>
         {types.map((type) => (
-          <>
-            <LabelWapper label={type ?? 'default'}>
-              <Checkbox
-                checked={checked}
-                onPress={() => setChecked(!checked)}
-                type={type}
-              />
-            </LabelWapper>
-
-            <View style={{width: 22}} />
-          </>
+          <LabelWapper key={type} label={type ?? 'default'}>
+            <Checkbox
+              style={{margin: 25}}
+              checked={checked}
+              onPress={() => setChecked(!checked)}
+              type={type}
+            />
+          </LabelWapper>
         ))}
 
         <LabelWapper label="disabled">
           <Checkbox
+            style={{margin: 25}}
             checked={checked}
             onPress={() => setChecked(!checked)}
             disabled