docs: 노션에 있는 내용 옮겨놓음 (#90)

Lubycon · Jun 11, 2021 · dbe42f7 · dbe42f7
1 parent 5ab92bb
commit dbe42f7
Show file tree

Hide file tree

Showing 17 changed files with 275 additions and 105 deletions.
diff --git a/ui-kit/.storybook/preview.js b/ui-kit/.storybook/preview.js
@@ -14,7 +14,7 @@ export const parameters = {
   options: {
     storySort: {
       method: '',
-      order: ['Lubycon UI Kit',['Welcome', 'Getting Started'], 'Styles', 'Components'], 
+      order: ['Lubycon UI Kit',['Welcome', 'Getting Started', 'Usage'], 'Styles', 'Components'], 
       locales: '', 
     },
   },

diff --git a/ui-kit/src/stories/Components/Accordion/index.stories.mdx b/ui-kit/src/stories/Components/Accordion/index.stories.mdx
@@ -5,8 +5,12 @@ import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
 
 # Accordion
 
+아코디언은 펼치거나 접을 수 있는 패널 컴포넌트 입니다. 펼침 상태를 활용하여 추가적인 정보를 사용자에게 제공할 수 있습니다. 기본적으로 접힌 상태이며, 사용자가 해당 패널을 클릭하면 펼침 상태로 변경됩니다.
+
 ## Preview
 
+라벨은 펼쳐지기 전에 아코디언에 보여지는 텍스트 영역을 가리킵니다. 펼쳐진 부분의 텍스트 영역은 아코디언 컴포넌트의 내부에 기입한 내용으로 나타납니다.
+
 <Canvas>
   <Story name="Preview">
     <Accordion
@@ -39,3 +43,39 @@ import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
     </Accordion>
   </Story>
 </Canvas>
+
+## Default Open
+
+아코디언 컴포넌트가 처음 렌더될 때의 펼침여부를 결정할 수 있습니다.
+
+<Canvas>
+  <Story name="Default Open">
+    <Accordion label="👀 텍스트가 숨겨져 있어요" defaultOpen={true}>
+      아코디언이 펼쳐지면 아래에 내용이 나옵니다.
+      <br />
+      아코디언이 펼쳐지면 아래에 내용이 나옵니다.
+      <br />
+      아코디언이 펼쳐지면 아래에 내용이 나옵니다.
+      <br />
+    </Accordion>
+  </Story>
+</Canvas>
+
+# 이벤트 핸들러
+
+Lubycon UI Kit에서는 아코디언 컴포넌트의 상태에 따라 호출되는 함수 props를 제공하고 있습니다.
+
+`onChange`는 아코디언 패널의 펼침 접힘 상태가 변경되었을 때, `onOpen`은 아코디언 패널이 펼쳐졌을 때, `onClose`는 아코디언 패널이 접혀졌을 때 호출됩니다.
+
+<Canvas>
+  <Story name="Event Handler">
+    <Accordion label="👀 텍스트가 숨겨져 있어요">
+      아코디언이 펼쳐지면 아래에 내용이 나옵니다.
+      <br />
+      아코디언이 펼쳐지면 아래에 내용이 나옵니다.
+      <br />
+      아코디언이 펼쳐지면 아래에 내용이 나옵니다.
+      <br />
+    </Accordion>
+  </Story>
+</Canvas>
diff --git a/ui-kit/src/stories/Components/Alert/index.stories.mdx b/ui-kit/src/stories/Components/Alert/index.stories.mdx
@@ -11,7 +11,21 @@ import { alerts } from './data';
 
 <Canvas>
   <Story name="Preview">
-    <Row style={{ marginBottom: 80, width: 1200 }}>
+    <Alert type="positive">메세지를 넣어주세요</Alert>
+  </Story>
+</Canvas>
+
+### Title
+
+특별히 강조하고 싶은 메세지가 있는 경우에는 `title` 프로퍼티를 사용할 수 있습니다. `title` 프로퍼티에 입력된 값은 `Alert` 의 왼쪽 부분에 진한 글씨로 강조되어 렌더됩니다.
+
+### Type
+
+`Alert` 컴포넌트는 Lubycon UI Kit에서 제공하는 4가지 시맨틱 컬러를 기반으로 한 타입을 가지고 있습니다. 기본적으로 아무 타입도 주지 않았을 때 `Alert` 컴포넌트는 `informative` 타입으로 렌더됩니다.
+
+<Canvas>
+  <Story name="Type">
+    <Row style={{ width: 1200 }}>
       {alerts.map(({ type, title }) => (
         <Column xs={6} key={type} style={{ marginBottom: 32 }}>
           <Alert style={{ marginBottom: 16 }} type={type} title={`${title} 메세지`}>

diff --git a/ui-kit/src/stories/Components/Button/index.stories.mdx b/ui-kit/src/stories/Components/Button/index.stories.mdx
@@ -7,45 +7,66 @@ import { sizeList, buttonText, semanticColors } from './data';
 
 # Button
 
+버튼 컴포넌트는 HTML의 button 엘리먼트를 기반으로 만들어졌기 때문에, Lubycon UI Kit이 제공하는 인터페이스 외에 기존 HTML의 button 엘리먼트가 제공하고 있던 기능도 모두 사용 가능합니다.
+
 ## Preview
 
 <Canvas>
   <Story name="Preview">
-    {sizeList.map((size, index) => (
-      <Row key={index} alignItems="center" style={{ marginBottom: 20 }}>
-        <Column xs="auto" style={{ width: '100px', marginRight: 40 }}>
-          <Text>{size.charAt(0).toUpperCase() + size.slice(1)}</Text>
-        </Column>
-        <Column>
-          <Button size={size} key={index}>
-            {buttonText}
-          </Button>
-        </Column>
-        <Column>
-          <Button size={size} key={index + 'disabled'} disabled>
-            {buttonText}
-          </Button>
-        </Column>
-      </Row>
-    ))}
+    <Button>버튼입니다</Button>
   </Story>
 </Canvas>
 
-## Types
+### Size
+
+`Button` 컴포넌트는 `small` `medium` `large` 3가지의 사이즈를 가지고 있습니다.
+
+<Canvas>
+  <Story name="Size">
+    <Row direction="column">
+      <Column style={{ marginBottom: 8 }}>
+        <Button size="small" type="informative">
+          버튼 텍스트
+        </Button>
+      </Column>
+      <Column style={{ marginBottom: 8 }}>
+        <Button size="medium" type="informative">
+          버튼 텍스트
+        </Button>
+      </Column>
+      <Column style={{ marginBottom: 8 }}>
+        <Button size="large" type="informative">
+          버튼 텍스트
+        </Button>
+      </Column>
+    </Row>
+  </Story>
+</Canvas>
+
+### Types
+
+`Button` 컴포넌트는 Lubycon UI Kit에서 제공하는 4가지 시맨틱 컬러를 기반으로 한 타입을 가지고 있습니다.
+
+기본적으로 아무 타입도 주지 않았을 때 `Button` 컴포넌트는 배경색이 없는 투명 상태로 렌더됩니다.
 
 <Canvas>
   <Story name="Types">
-    {semanticColors.map((type, index) => (
-      <Row key={index} alignItems="center" style={{ marginBottom: 20 }}>
-        <Column xs="auto" style={{ width: '100px', marginRight: 40 }}>
-          <Text>{type.charAt(0).toUpperCase() + type.slice(1)}</Text>
-        </Column>
-        <Column>
-          <Button key={index} type={type}>
-            {buttonText}
-          </Button>
-        </Column>
-      </Row>
-    ))}
+    <Row direction="column">
+      <Column style={{ marginBottom: 8 }}>
+        <Button>기본 버튼</Button>
+      </Column>
+      <Column style={{ marginBottom: 8 }}>
+        <Button type="informative">Informative</Button>
+      </Column>
+      <Column style={{ marginBottom: 8 }}>
+        <Button type="positive">Positive</Button>
+      </Column>
+      <Column style={{ marginBottom: 8 }}>
+        <Button type="negative">Negative</Button>
+      </Column>
+      <Column style={{ marginBottom: 8 }}>
+        <Button type="notice">Notice</Button>
+      </Column>
+    </Row>
   </Story>
 </Canvas>
diff --git a/ui-kit/src/stories/Components/Card/index.stories.mdx b/ui-kit/src/stories/Components/Card/index.stories.mdx
@@ -17,84 +17,62 @@ import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
 
 # Card
 
-## Preview
+- Card는 단일 주제에 대한 정보 전달을 목적으로 하는 컴포넌트입니다.
+- Card는 상세하고 디테일한 문서 내용을 전달하기에 앞서 진입점으로 사용되는 컴포넌트입니다.
+- 카드의 내용에 따라 자율적인 UI 변경이 가능합니다. Icon, UI controls, text를 추가할 수 있습니다.
+- 표현하고자 하는 내용에 따라 header/text/footer 레이아웃을 변경해 사용할 수 있습니다.
+- Default와 Image card 두 가지 형태를 제공합니다.
+
+## Default Card
+
+가장 기본적인 text type 카드입니다. 필요에 따라 커스텀해 사용할 수 있습니다.
 
 <Canvas>
-  <Story name="Preview">
-    <div style={{ width: 240 }}>
-      <Card>
-        <CardHeader>제목</CardHeader>
-        <CardContent>
-          <Text
-            style={{
-              color: colors.gray70,
-            }}
-          >
-            내용을 입력하세요.
-            <br />
-            내용을 입력하세요.
-            <br />
-            내용을 입력하세요.
-            <br />
-            내용을 입력하세요.
+  <Story name="Default Card">
+    <Card style={{ width: 240 }}>
+      <CardHeader>제목</CardHeader>
+      <CardContent>
+        <Text
+          style={{
+            color: colors.gray70,
+          }}
+        >
+          내용을 입력하세요.
+          <br />
+          내용을 입력하세요.
+          <br />
+          내용을 입력하세요.
+          <br />
+          내용을 입력하세요.
+        </Text>
+      </CardContent>
+      <CardFooter>
+        <span style={{ display: 'flex', alignItems: 'center', cursor: 'pointer' }} role="button">
+          <Text typography="caption" style={{ color: colors.gray60, marginRight: 5 }}>
+            더보기
           </Text>
-        </CardContent>
-        <CardFooter>
-          <span style={{ display: 'flex', alignItems: 'center', cursor: 'pointer' }} role="button">
-            <Text typography="caption" style={{ color: colors.gray60, marginRight: 5 }}>
-              더보기
-            </Text>
-            <Icon name="arrow-forward" type="outline" color={colors.gray60} />
-          </span>
-        </CardFooter>
-      </Card>
-    </div>
+          <Icon name="arrow-forward" type="outline" color={colors.gray60} />
+        </span>
+      </CardFooter>
+    </Card>
   </Story>
 </Canvas>
 
 ## Image Card
 
 <Canvas>
   <Story name="Image Card">
-    <Row style={{ width: 900 }}>
-      <Column>
-        <Card>
-          <CardHeader>제목</CardHeader>
-          <CardImageContent src="http://cogulmars.cafe24.com/img/04about_img01.png" alt="에비츄" />
-          <CardFooter>
-            <span
-              style={{ display: 'flex', alignItems: 'center', cursor: 'pointer' }}
-              role="button"
-            >
-              <Text typography="caption" style={{ color: colors.gray60, marginRight: 5 }}>
-                더보기
-              </Text>
-              <Icon name="arrow-forward" type="outline" color={colors.gray60} />
-            </span>
-          </CardFooter>
-        </Card>
-      </Column>
-      <Column>
-        <Card>
-          <CardHeader>춤추는 에비츄</CardHeader>
-          <CardImageContent
-            src="https://cdn.univ20.com/wp-content/uploads/2015/08/c4ca4238a0b923820dcc509a6f75849b.gif"
-            alt="춤추는 에비츄"
-          />
-          <CardFooter justifyContent="flex-end">
-            <Button size="small">더보기</Button>
-          </CardFooter>
-        </Card>
-      </Column>
-      <Column>
-        <Card>
-          <CardHeader>장보는 에비츄</CardHeader>
-          <CardImageContent
-            src="http://cogulmars.cafe24.com/img/04about_img04.png"
-            alt="장보는 에비츄"
-          />
-        </Card>
-      </Column>
-    </Row>
+    <Card style={{ width: 240 }}>
+      <CardHeader>제목</CardHeader>
+      <CardImageContent src="http://cogulmars.cafe24.com/img/04about_img01.png" alt="에비츄" />
+      <CardFooter>
+        <span style={{ display: 'flex', alignItems: 'center', cursor: 'pointer' }} role="button">
+          <Text typography="caption" style={{ color: colors.gray60, marginRight: 5 }}>
+            더보기
+          </Text>
+          <Icon name="arrow-forward" type="outline" color={colors.gray60} />
+        </span>
+      </CardFooter>
+    </Card>
   </Story>
 </Canvas>
diff --git a/ui-kit/src/stories/Components/Checkbox/index.stories.mdx b/ui-kit/src/stories/Components/Checkbox/index.stories.mdx
@@ -5,12 +5,15 @@ import { Checkbox } from 'src';
 
 # Checkbox
 
+기본적인 목적에 충실한 체크박스 컴포넌트를 제공합니다. 하나의 아이템이나 여러 개의 아이템을 선택하는 상황을 표현하는데 사용할 수 있습니다.
+
 ## Preview
 
+간단한 라벨 정의만으로 체크박스 컴포넌트를 사용할 수 있습니다.
+
 <Canvas>
   <Story name="Preview">
     <Checkbox label={'체크박스1'} />
-    <Checkbox label={'체크박스2'} />
   </Story>
 </Canvas>
 
@@ -27,6 +30,8 @@ import { Checkbox } from 'src';
 
 ## Inline
 
+필요에 따라 display 설정을 props로 조정할 수 있습니다.
+
 <Canvas>
   <Story name="Inline">
     <Checkbox label={'체크박스'} display="inline" style={{ marginRight: '20px' }} />

diff --git a/ui-kit/src/stories/Components/Grid/index.stories.mdx b/ui-kit/src/stories/Components/Grid/index.stories.mdx
@@ -6,6 +6,8 @@ import { columns, columnStyle } from './data';
 
 # Grid
 
+그리드는 유연하게 레이아웃을 정의하면서도 시각적인 일관성을 만들어줍니다. Lubycon UI Kit 의 그리드는 12개의 컬럼을 기반으로 구성되어있습니다.
+
 ## Preview
 
 <Canvas>

diff --git a/ui-kit/src/stories/Components/Modal/index.stories.mdx b/ui-kit/src/stories/Components/Modal/index.stories.mdx
@@ -6,8 +6,16 @@ import { Preview, ModalHooks } from './Components';
 
 # Modal
 
+모달 컴포넌트는 사용자 화면 위에 나타나는 또 다른 UI 입니다. 모달 컴포넌트가 열리게 되면, 모달 영역 내의 콘텐츠만 조작이 가능합니다. 현재 페이지 영역 내에서 더 자세한 정보를 보여주고 싶을 때 사용할 수 있습니다.
+
+> **주의사항**
+>
+> Modal 컴포넌트는 컴포넌트 합성 방식으로 사용이 가능합니다. Lubycon UI Kit에서 지정한 헤더와 푸터같은 특정 영역은 별도의 컴포넌트로 분리되어 있습니다
+
 ## Preview
 
+기본 모달 컴포넌트 형태입니다. `Modal` 컴포넌트 내부를 사용자의 임의로 구성하여 사용할 수 있습니다. 모달 내부에는 적어도 한 개 이상의 컴포넌트가 들어가야 합니다. size나 모달의 상태에 따른 여러가지 이벤트 핸들러를 등록할 수 있습니다.
+
 <Canvas>
   <Story name="Preview">
     <Preview />
@@ -16,6 +24,8 @@ import { Preview, ModalHooks } from './Components';
 
 ## With Hooks
 
+모달 컴포넌트를 명령형으로 사용하는 방법입니다. openModal 함수의 인자로 컴포넌트를 정의해서 사용할 수 있습니다. 해당 함수는 모달의 ID 값을 반환하며, 이 ID 값을 closeModl 함수의 인자로 넘겨서 해당 모달이 닫히도록 만들 수 있습니다.
+
 <Canvas>
   <Story name="With Hooks">
     <ModalHooks />