feat(ui-kit): Beta Release (#68)

* chore: 배포 테스트 * chore: 배포테스트 * chore: 배포 테스트 * feat(ui-kit): Text 컴포넌트 추가 (#18) * chore: Alpha, Beta 브랜치 개설 [skip ci] (#14) * chore: 배포 테스트 * chore: 배포테스트 * chore: 배포 테스트 * chore: dry run test * feat(ui-kit): Text 컴포넌트 타이핑에 as 프로퍼티 추가 * 스토리북 세팅 * chore(ui-kit): Text 스토리 추가 * feat(ui-kit): Text에 Font Weight 스코어가 제대로 안 먹는 현상 수정 * chore(ui-kit): remove console log * chore(ui-kit): 스토리북 배포 * chore(ui-kit): fix workflow syntax * chore(ui-kit): action trigger test * chore(ui-kit): action trigger test * chore(ui-kit): 스토리북 배포 테스트 * chore(ui-kit): 스토리북 배포 테스트 * chore(ui-kit): 테스트 트리거 추가 * chore(ui-kit): storybook deploy test * chore(ui-kit): test storybook deploy * chore(ui-kit): 스토리북 배포 액션을 메뉴얼로 수정 * chore(ui-kit): Update README.md * chore(ui-kit): 망가진 CI 복구 * chore(ui-kit): 액션 조건이 헤드 커밋만 바라보도록 수정 * chore(ui-kit): 헤드 커밋 접근 수정 * feat(ui-kit): Text 컴포넌트 디자인 변경 (#20) * feat(ui-kit): Text 컴포넌트 디자인 변경 * chore(ui-kit): 스토리북에 깃 유저 정보 추가 * fix(ui-kit): 레퍼런스 타입이 이상하게 들어가 있던 부분 수정 * feat(ui-kit): 섀도우 스타일, 스토리북 추가 (#21) * feat(ui-kit): 타이포그래피 디자인 변경사항 반영 (#22) * feat(ui-kit): Radio 컴포넌트 추가 (#23) * feat(ui-kit): Radio 기본적인 스캐폴딩 완료 * feat(ui-kit) 라디오 컴포넌트 추가 * feat(ui-kit): Color 추가 (#24) * feat(ui-kit): scss 컬러 변수 정의 * feat(ui-kit): grayscale 스토리 작성 * feat(ui-kit): sementic color 스토리 작성 * feat(ui-kit): 컬러변수 context 추가 * feat(ui-kit): 컬러 헥스값 업데이트 * feat(ui-kit): 오타 수정 * feat(ui-kit): 불필요한 변수 제거 * feat(ui-kit): 상수 및 타입 정의 리뷰 반영 * feat(ui-kit): 불필요한 클래스 제거 * feat(ui-kit): 컬러 타입 추가 * feat(ui-kit): Grid Column (#25) * feat(ui-kit): Container 컴포넌트 추가 * feat(ui-kit): Column 컴포넌트 추가 * feat(ui-kit): Row 컴포넌트 추가 * feat(ui-kit): Grid Interface 선언 * feat(ui-kit): Column 컴포넌트 Props * feat(ui-kit):Column style 추가 * feat(ui-kit): Column scss mixin 및 functions 추가 * feat(ui-kit): Component 안에 Import 된 scss 삭제 * feat(ui-kit): Column NumberAttribute 타입 수정 * feat(ui-kit): Column ColumnResponsive 타입 수정 * feat(ui-kit): Column 내부 Immutable하게 변경 * feat(ui-kit): Row 컴포넌트 추가 및 그리드 인터페이스 확정 (#27) * feat(ui-kit): Row 컴포넌트 추가 * chore: PR Template 수정 * feat(ui-kit): add variable width story * feat(ui-kit): remove unused row component * feat(ui-kit): Row컴포넌트의 direction 스토리 추가 * Feat/checkbox (#28) * feat(ui-kit): checkbox 컴포넌트 추가 * feat(ui-kit): checkbox 컴포넌트 스타일 추가 * feat(ui-kit): checkbox 컴포넌트 스토리 추가 * feat(ui-kit): Checkbox 리뷰 내용 반영 * feat(ui-kit): alias 및 utils index 추가 * fix(ui-kit): remove duplicated export syntax * Feat/switch (#29) * feat(ui-kit): switch 컴포넌트 추가 * feat(ui-kit): label 추가 * feat(ui-kit): inline 케이스 추가 및 스타일 일부 수정 * feat(ui-kit): 컴포넌트 수정에 따른 스토리 수정 * feat(ui-kit): Switch transform 퍼센트 값으로 변경 * feat(ui-kit): 스위치 슬라이더 x축 이동 롤백 * style(ui-kit): Radio 컴포넌트의 색을 green50으로 변경 (#30) * refactor(ui-kit): 타이포그래피의 content, content2를 p1, p2로 변경 (#31) * feat(ui-kit): Selection 컴포넌트 추가 (#32) * feat(ui-kit): Selection 컴포넌트 추가 * feat(ui-kit): Selection 컴포넌트에 아이콘 추가 * feat(ui-kit): Selection 컴포넌트 스토리 추가 * feat(ui-kit): 타입 픽스 * 타입 픽스 * feat(ui-kit): Selection 컴포넌트를 Borderless로 변경 * feat(ui-kit): 리뷰 반영 * fix(ui-kit): 타이포그래피 타입 깨지는 이슈 수정 * fea(ui-kit): Toast 추가 (#33) * feat(ui-kit): Toast 컴포넌트 추가 * feat(ui-kit): sleep 유틸 함수 추가 * feat(ui-kit): Portal Context 추가 * feat(ui-kit): LubyconUIKitProvider 추가 * feat(ui-kit): Toast가 Portal에 렌더되도록 변경 * fix(ui-kit): 깨진 디펜던시 수정 * feat(ui-kit): Toast 스토리 추가 * feat(ui-kit): useToast 훅 추가 * feat(ui-kit): 토스트 애니메이션을 useSpring이 아니라 useTransition으로 변경 * feat(ui-kit): 토스트 스토리 업데이트 * feat(ui-kit): 토스트 애니메이션 개선 * feat(ui-kit): fix lint * Feat/button (#34) * feat(ui-kit): init * feat(ui-kit): Button 컴포넌트 스토리 추가 * feat(ui-kit): 리뷰 내용 반영 * feat(ui-kit): 토스트에 Align 기능 추가 (#36) * 탭 컴포넌트 (#35) * feat(ui-kit): Container 컴포넌트 추가 * feat(ui-kit): Tab 컴포넌트 골격 * feat(ui-kit): Tab 스타일 * feat(ui-kit): Tab active 기능 * feat(ui-kit): Tab Bar 애니메이션 추가 * feat(ui-kit): Fixed Width Tab 구현 * feat(ui-kit): Tab Content 구현 * fix(ui-kit): QA 피드백 반영 * fix(ui-kit): 탭 컴포넌트 타입 깨지는 부분 수정 (#38) * fix(ui-kit): 탭 컴포넌트 타입 깨지는 부분 수정 * fix(ui-kit): 탭이 초기화 될 때 자동 선택되지 않는 이슈 수정 * remove console * feat(ui-kit): 툴팁 컴포넌트 추가 (#37) * feat(ui-kit): child ref 포지션으로 툴팁 렌더 * 툴팁 애로우 추가 * 버튼 스타일 수정 * 툴팁이 ref에 반응하도록 수정 * feat(ui-kit): 툴팁 포지션 세팅 완료 * fix lint * feat(ui-kit): 오타 수정 * feat(tooltip): 부모 중 relative 요소가 있어도 툴팁이 올바른 offset을 가지도록 수정 * feat(ui-kit): 토스트 포지션 및 스타일 수정 (#40) * feat(ui-kit): 스낵바 컴포넌트 추가 (#41) * feat(ui-kit): 스낵바 컴포넌트 추가 * feat(ui-kit): 스낵바 타입 업데이트 * feat(ui-kit): Snackbar 컴포넌트 타입에서 children 제거 * feat(ui-kit): 스낵바에 버튼이 연속으로 등장할 때 간격 설정 * feat(ui-kit): 의미없는 모듈 임포트 제거 * style(ui-kit): 수민님 디자인 피드백 반영 (#42) * feat(ui-kit): 카드 컴포넌트 추가 (#39) * feat(ui-kit): 카드 컴포넌트 추가 * feat(ui-kit): 모듈 관계 재정의 * feat(ui-kit): 카드 타입 수정 * feat(ui-kit): Alert, Container 컴포넌트 추가 (#43) * feat(ui-kit): Icon 컴포넌트가 className을 받을 수 있도록 수정 * feat(ui-kit): Column, Container 스타일 버그 수정 * feat(ui-kit): Alert 컴포넌트가 Div 속성을 상속받도록 변경 * feat(ui-kit): Alert 스토리 업데이트 * feat(ui-kit): className을 template string이 아니라 classnames 함수로만 처리하도록 변경 * refactor(ui-kit): 코드 정리 (#44) * refactor(ui-kit): 모듈 트리 변경 * refactor(ui-kit): clxs를 classnames로 변경 * refactor(ui-kit): BEM 방법론에 따른 클래스 명명 * refactor(ui-kit): 스토리북 경로 변경 * refactor(ui-kit): 스토리북 경로 원복 * feat(ui-kit): Input 컴포넌트 추가 (#46) * feat(ui-kit): input 컴포넌트 추가 * feat(ui-kit): Input 컴포넌트 라벨 스토리 수정 * feat(ui-kit): Input 컴포넌트 타입 스토리 추가 * feat(ui-kit): List, ListItem, ListItemImage 컴포넌트 추가 (#45) * feat(ui-kit): 리스트 기본 모양 잡음 * feat(ui-kit): 리스트에 left, right area 추가 * feat(ui-kit): 리스트 스토리북 수정 * chore: UPDATE README [skip ci] (#49) * Update README.md [skip ci] * Update README.md [skip ci] * feat(ui-kit): Accordion 컴포넌트 추가 (#47) * feat(ui-kit): Accordion 컴포넌트 추가 * feat(ui-kit): 아코디언 라벨 스타일 수정 * feat(ui-kit): input 컴포넌트 가현님 피드백 적용 * feat(ui-kit): 아코디언 상태 변경 이벤트 추가 * feat(ui-kit): ProgressBar 컴포넌트 추가 (#48) * feat(ui-kit): Button 컴포넌트 타입 추가 (#51) * feat(ui-kit): Button 컴포넌트 타입 추가 * refactor(ui-kit): change Combine type to CombineElementProps type * Update README.md [skip ci] * chore(ui-kit): 커스텀 도메인을 위한 CNAME 추가 (#52) * 알파 타겟 레포 변경 [skip ci] * CNAME 업데이트 [skip ci] * feat(ui-kit): Modal 컴포넌트 추가 (#50) * feat(ui-kit): Modal 컴포넌트 추가 * feat(ui-kit): Modal 스토리 추가 * feat(ui-kit): Modal TODO * feat(ui-kit): Modal 컴포넌트 추가 * feat(ui-kit): 타이틀 부분 태그 타입 수정 * chore: 리뷰 내용 반영-백드롭 forwradRef * chore: 리뷰 내용 반영-컴포넌트 합성 방식으로 변경 * chore: 모달 컴포넌트 스토리 수정 * chore: 리뷰반영 - 타입 변경, 엘리먼트 유효성 검사 * chore: 리뷰반영 - onOpen 이벤트, 백드롭 이벤트명 * chore: 리뷰반영 - 컴포넌트 제네릭 * chore: 린트 에러 * chore: 스토리 업데이트 * fix(ui-kit): Fix Modal Type Error * feat(ui-kit): Tag 컴포넌트 추가 (#53) * feat(ui-kit): 태그 컴포넌트 추가 * feat(ui-kit): Input 컴포넌트에 left 영역 추가 * feat(ui-kit): TagsInput 컴포넌트 추가 * 의미없는 generateId 제거 * feat(ui-kit): remove tagsInput * Feat/modal (#54) * feat(ui-kit): Modal 컴포넌트 추가 * feat(ui-kit): Modal 스토리 추가 * feat(ui-kit): Modal TODO * feat(ui-kit): Modal 컴포넌트 추가 * feat(ui-kit): 타이틀 부분 태그 타입 수정 * chore: 리뷰 내용 반영-백드롭 forwradRef * chore: 리뷰 내용 반영-컴포넌트 합성 방식으로 변경 * chore: 모달 컴포넌트 스토리 수정 * chore: 리뷰반영 - 타입 변경, 엘리먼트 유효성 검사 * chore: 리뷰반영 - onOpen 이벤트, 백드롭 이벤트명 * chore: 리뷰반영 - 컴포넌트 제네릭 * chore: 린트 에러 * chore: 스토리 업데이트 * chore: 단일 엘리먼트가 주입된 경우 추가 * chore: 모달 컨텍스트 수정 * chore: 모달 컴포넌트 스토리 추가 * chore: 리뷰 내용 반영 - 변수명, children 배열 처리 * Feat/table re (#56) * chore: 컴포넌트, 스타일 import * feat(ui-kit): 테이블 컴포넌트 추가 * chore: 린트 픽스 * feat(ui-kit): Modal 컴포넌트 애니메이션 추가 (#57) * feat(ui-kit): Modal 컴포넌트 애니메이션 추가 * 사용하지 않는 Param 제거 * fix type * fix lint * 모달 hooks 애니메이션 수정 * 외부에서 closeModal을 호출해도 애니메이션이 종료된 후 모달이 사라지도록 수정 * remove eqeq * 의미없는 classnames 호출 제거 * feat(ui-kit): Tabs 컴포넌트 리팩토링 및 모바일 대응 추가 (#58) * feat(ui-kit): Tab 컴포넌트 리팩토링 및 모바일 대응 추가 * 탭 타이포그래피 적용 * feat(docs): 개발에 필요한 기본적인 세팅 완료 (#59) * fix(docs): 사용하지 않는 버튼 제거 * chore(docs): 배포 테스트 * chore(docs): 잡 네임 변경 * chore(docs): fix unknwon workspace * chore(docs): set git conf * chore(docs): 환경에 따라 CNAME 다르게 설정 * chore(docs): 빠진 모듈 추가 * chore(docs): 빠진 환경변수 추가 * chore(docs): CNAME 옮기는 경로 변경 * feat(docs): Docs 개발에 필요한 기본 세팅 완료 * chore(docs): live 배포 스크립트 주석 처리 * chore(docs): 라이브 CICD 다시 살림 * fix(ui-kit): Row 컴포넌트 상하 마진 제거 (#60) * fix(ui-kit): Grid 컴포넌트에 클래스 넣을 수 있도록 변경 (#61) * feat(docs): UI Kit Docs 페이지 와꾸 추가 (#62) * feat(docs): 대략적인 레이아웃 추가 * feat(docs): BasicLayout 추가 * Docs Ui Kit 버전 업 * feat(docs): 사이드 메뉴 대충 와꾸 잡음 * feat(docs): Getting Started 추가 * delete CNAME (#63) * Create CNAME * Delete CNAME Co-authored-by: Daniel kim <bboyzepot@gmail.com> * chore(docs): static resource 404 떨어지는 이슈 해결 (#64) * fix(docs): .nojekyll 파일 생성 * fix(docs): .nojekyll 파일 재생성 * fix(docs): 배포 테스트 * chore(docs): 배포 테스트 * chore(docs): 배포 테스트 * CI/CD 타겟 브랜치 수정 * Feat/toast snackbar combine (#65) * feat: 스낵바와 토스트 하나로 합침 * feat: 스낵바 스타일 정돈 * 스낵바 모바일 대응 * 의미없는 스타일 제거 * feat(ui-kit): 토스트 모바일 적용 배포 트리거 * Feat/text mobile (#66) * feat: Icon 컴포넌트 추가 * feat: 기존에 아이콘 모듈을 사용하던 곳 변경 * fix(ui-kit): 사용하지 않는 디펜던시 제거 (#67) * feat: Icon 컴포넌트 추가 * feat: 기존에 아이콘 모듈을 사용하던 곳 변경 * fix(ui-kit): fix lint Co-authored-by: KIM HYUNJUN <93kimhyunjun@gmail.com> Co-authored-by: 권재원 <springkjw@gmail.com> Co-authored-by: Daniel kim <bboyzepot@gmail.com>
Lubycon · Apr 7, 2021 · 8d15fe6 · 8d15fe6
1 parent 60ea886
commit 8d15fe6
Show file tree

Hide file tree

Showing 172 changed files with 6,597 additions and 657 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -21,5 +21,7 @@ module.exports = {
   ],
   rules: {
     '@typescript-eslint/explicit-module-boundary-types': 'off',
+    '@typescript-eslint/no-empty-function': 'off',
+    'react/prop-types': 'off',
   },
 };
diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md
@@ -0,0 +1,10 @@
+> 이 PR이 BREAKING_CHANGE를 포함하고 있다면 반드시 명시해주세요!
+
+## 변경사항
+어떤 사항이 변경되었는지 자세히 적어주세요!
+
+## 디자인 시안 링크
+디자인 시안 링크를 첨부해주세요!
+
+## 집중적으로 리뷰 받고 싶은 부분이 있나요?
+
diff --git a/.github/workflows/alpha-release-docs.yml b/.github/workflows/alpha-release-docs.yml
@@ -0,0 +1,46 @@
+name: Alpha Release UI Kit Docs
+
+on:
+  push:
+    branches:
+      - master
+      - alpha
+
+jobs:
+  alpha-release-ui-kit-docs:
+    if: "!contains(github.event.head_commit.message, '[skip ci]') && contains(github.event.head_commit.message, '(docs)')"
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v1
+        with:
+          fetch-depth: 0
+      - uses: actions/setup-node@v1
+        with:
+          node-version: 12
+      - name: Set Git Configulations
+        run: |
+          git config --global user.email "lubycon@gmail.com"
+          git config --global user.name "lubycon"
+      - name: Caching Node Modules
+        uses: actions/cache@v2
+        with:
+          path: '**/node_modules'
+          key: ${{ runner.os }}-modules-${{ hashFiles('**/yarn.lock') }}
+      - name: Install depedencies
+        run: yarn
+      - name: Build
+        run: yarn workspace lubycon-ui-kit-docs build
+      - name: Publish
+        run: yarn workspace lubycon-ui-kit-docs deploy
+        env:
+          ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }}
+          ENV: 'alpha'
+      - uses: 8398a7/action-slack@v3 # 슬랙 노티피케이션
+        with:
+          status: ${{ job.status }}
+          fields: repo,message,commit,author,action,eventName,ref,workflow
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          SLACK_WEBHOOK_URL: ${{ secrets.SLACK_DEPLOY_BOT_WEBHOOK_URL }}
+        if: always()
+
diff --git a/.github/workflows/deploy-ui-kit-lib.yml b/.github/workflows/deploy-ui-kit-lib.yml
@@ -9,7 +9,7 @@ on:
 
 jobs:
   ui-kit-publish:
-    if: "!contains(toJSON(github.event.commits.*.msg), '[skip ci]') && contains(toJSON(github.event.commits.*.msg), '(ui-kit)')"
+    if: "!contains(github.event.head_commit.message, '[skip ci]') && contains(github.event.head_commit.message, '(ui-kit)')"
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v1

diff --git a/.github/workflows/live-release-docs.yml b/.github/workflows/live-release-docs.yml
@@ -0,0 +1,45 @@
+name: Live Release UI Kit Docs
+
+on:
+  push:
+    branches:
+      - master
+
+jobs:
+  alpha-release-ui-kit-docs:
+    if: "!contains(github.event.head_commit.message, '[skip ci]') && contains(github.event.head_commit.message, '(docs)')"
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v1
+        with:
+          fetch-depth: 0
+      - uses: actions/setup-node@v1
+        with:
+          node-version: 12
+      - name: Set Git Configulations
+        run: |
+          git config --global user.email "lubycon@gmail.com"
+          git config --global user.name "lubycon"
+      - name: Caching Node Modules
+        uses: actions/cache@v2
+        with:
+          path: '**/node_modules'
+          key: ${{ runner.os }}-modules-${{ hashFiles('**/yarn.lock') }}
+      - name: Install depedencies
+        run: yarn
+      - name: Build
+        run: yarn workspace lubycon-ui-kit-docs build
+      - name: Publish
+        run: yarn workspace lubycon-ui-kit-docs deploy
+        env:
+          ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }}
+          ENV: 'live'
+      - uses: 8398a7/action-slack@v3 # 슬랙 노티피케이션
+        with:
+          status: ${{ job.status }}
+          fields: repo,message,commit,author,action,eventName,ref,workflow
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          SLACK_WEBHOOK_URL: ${{ secrets.SLACK_DEPLOY_BOT_WEBHOOK_URL }}
+        if: always()
+
diff --git a/.github/workflows/publish-storybook.yml b/.github/workflows/publish-storybook.yml
@@ -0,0 +1,25 @@
+name: Publish Dev Storybook
+
+on: [workflow_dispatch]
+
+jobs:
+  storybook-publish:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v1
+      - uses: actions/setup-node@v1
+        with:
+          node-version: 12
+      - name: Set Git Configulations
+        run: |
+          git config --global user.email "lubycon@gmail.com"
+          git config --global user.name "lubycon"
+      - name: Install depedencies
+        run: yarn
+      - name: Build Storybook
+        run: yarn workspace @lubycon/ui-kit build-stories
+      - name: Publish
+        run: yarn workspace @lubycon/ui-kit publish-stories
+        env:
+          ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }}
+
diff --git a/.gitignore b/.gitignore
@@ -15,6 +15,7 @@ out/
 # production
 build
 dist
+storybook-static
 
 # misc
 .DS_Store

diff --git a/LICENSE b/LICENSE
@@ -0,0 +1,22 @@
+
+The MIT License (MIT)
+
+Copyright (c) 2014 Call-Em-All
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/README.md b/README.md
@@ -1,2 +1,106 @@
-# Lubycon UI Kit 🖌
-Lubycon 멘토링 프로젝트의 UI Kit
+<p align="center">
+  <img width="150" src="https://d2x9jxyr47nlkc.cloudfront.net/logo/symbol-color.svg" alt="Lubycon logo">
+</p>
+
+<h1 align="center">Lubycon UI Kit</h1>
+
+<p align="center">
+  Lubycon UI Kit은 한국의 고유 문자인 한글을 기반으로 설계된 UI 라이브러리입니다.<br />
+  국내 디자이너와 개발자들이 동일한 도메인 언어로 커뮤니케이션하는 것을 지향하며, 이를 위해 FE 라이브러리와 Figma 플러그인을 동시에 제공합니다.<br />
+</p>
+
+<div align="center" style="margin-bottom: 8px;">
+  <a href="https://www.typescriptlang.org/" title="Typescript"><img src="https://github.com/tomchen/stack-icons/blob/master/logos/typescript-icon.svg" alt="Typescript" width="21px" height="21px"></a>
+  <a href="https://reactjs.org/" title="React"><img src="https://github.com/tomchen/stack-icons/blob/master/logos/react.svg" alt="React" width="21px" height="21px"></a>
+  <a href="https://www.w3.org/TR/html5/" title="HTML5"><img src="https://github.com/tomchen/stack-icons/blob/master/logos/html-5.svg" alt="HTML5" width="21px" height="21px"></a>
+  <a href="https://sass-lang.com/" title="Sass"><img src="https://github.com/tomchen/stack-icons/blob/master/logos/sass.svg" alt="Sass" width="21px" height="21px"></a>
+  <a href="https://rollupjs.org/" title="rollup.js"><img src="https://github.com/tomchen/stack-icons/blob/master/logos/rollup.svg" alt="rollup.js" width="21px" height="21px"></a>
+  <a href="https://yarnpkg.com/" title="Yarn"><img src="https://github.com/tomchen/stack-icons/blob/master/logos/yarn.svg" alt="Yarn" width="21px" height="21px"></a>
+  <a href="https://www.npmjs.com/" title="NPM"><img src="https://github.com/tomchen/stack-icons/blob/master/logos/npm.svg" alt="NPM" width="21px" height="21px"></a>
+</div>
+
+<div align="center">
+
+  <!--[![npm latest package](https://img.shields.io/npm/v/@lubycon/ui-kit/latest.svg)](https://www.npmjs.com/package/@lubycon/ui-kit)-->
+
+  [![license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/mui-org/material-ui/blob/master/LICENSE)
+  [![workflow](https://github.com/Lubycon/lubycon-ui-kit/workflows/Release%20UI%20Kit/badge.svg)](https://github.com/Lubycon/lubycon-ui-kit)
+  [![workflow](https://github.com/Lubycon/lubycon-ui-kit/workflows/Publish%20Dev%20Storybook/badge.svg)](https://github.com/Lubycon/lubycon-ui-kit)  
+  [![npm alpha package](https://img.shields.io/npm/v/@lubycon/ui-kit/alpha.svg)](https://www.npmjs.com/package/@lubycon/ui-kit)
+  [![npm downloads](https://img.shields.io/npm/dm/@lubycon/ui-kit.svg)](https://www.npmjs.com/package/@lubycon/ui-kit)
+
+</div>
+
+## Installation
+
+Lubycon UI Kit은 아직 알파 버전만 배포된 상태입니다. 따라서 문서 상단의 버전을 확인하고 `latest`가 아닌 정확한 버전을 명시하여 설치하시는 것을 추천합니다.
+
+```sh
+$ npm install @lubycon/ui-kit@v1.1.0-alpha.24
+// or
+$ yarn add @lubycon/ui-kit@v1.1.0-alpha.24
+```
+
+## Usage
+
+Lubycon UI Kit 내부의 몇몇 컴포넌트는 컴포넌트 트리와 분리된 상태와 렌더 트리를 가지고 있기 때문에 `LubyconUIKitProvider`을 필요로 합니다.
+
+```jsx
+// App.tsx
+
+import React, { PropsWithChildren } from 'react';
+import { LubyconUIKitProvider } from '@lubycon/ui-kit';
+
+function App({ children }: PropsWithChildren<{}>) {
+  return <LubyconUIKitProvider>{children}</LubyconUIKitProvider>;
+}
+```
+
+### 선언적 렌더링 vs Hooks
+
+Lubycon UI Kit의 많은 컴포넌트들은 선언적 렌더링을 지원하지만, 간혹 선언적 렌더링만으로 처리하기에는 컴포넌트 렌더 트리가 장황하다고 느껴질 수도 있습니다.
+
+그래서 이런 경우 컴포넌트 렌더 트리에 영향을 받지 않는 몇몇 컴포넌트들에 한해 사용자가 선언적인 방법과 명령적인 방법을 선택해서 사용할 수 있도록 지원하고 있습니다.
+
+#### 선언적 렌더링
+
+```jsx
+import React, { useState } from 'react';
+import { Toast } from '@lubycon/ui-kit';
+
+function Foo() {
+  const [show, setShow] = useState(false);
+
+  return (
+    <>
+      <Button onClick={() => setShow(true)}>토스트 열기</Button>
+      <Toast show={show} message="토스트입니다" />
+    </>
+  );
+}
+
+export default Foo;
+```
+
+#### Hooks
+
+```jsx
+import React from 'react';
+import { useToast, Button } from '@lubycon/ui-kit';
+
+function Foo() {
+  const { openToast } = useToast();
+
+  return (
+    <Button onClick={() => {
+      openToast({
+        message: '토스트입니다',
+      });
+    }}>
+      토스트 열기
+    </Button>
+  );
+}
+
+export default Foo;
+```
diff --git a/docs/.babelrc b/docs/.babelrc
@@ -0,0 +1,4 @@
+{
+  "presets": ["next/babel", "@emotion/babel-preset-css-prop"],
+  "plugins": []
+}
diff --git a/docs/CNAME.alpha b/docs/CNAME.alpha
@@ -0,0 +1 @@
+ui-kit.alpha.lubycon.io
diff --git a/docs/CNAME.live b/docs/CNAME.live
@@ -0,0 +1 @@
+ui-kit.lubycon.io
diff --git a/docs/next-env.d.ts b/docs/next-env.d.ts
@@ -1,2 +1,3 @@
 /// <reference types="next" />
 /// <reference types="next/types/global" />
+/// <reference types="@emotion/react/types/css-prop" />
diff --git a/docs/package.json b/docs/package.json
@@ -1,18 +1,26 @@
 {
   "name": "lubycon-ui-kit-docs",
   "version": "1.0.0",
+  "private": true,
   "scripts": {
     "dev": "next",
-    "build": "next build",
+    "build": "next build && next export",
     "start": "next start",
-    "typecheck": "tsc"
+    "typecheck": "tsc",
+    "deploy": "node ./scripts/deploy"
   },
   "dependencies": {
+    "@emotion/react": "^11.1.5",
+    "@emotion/styled": "^11.1.5",
+    "@lubycon/ui-kit": "^1.1.0-alpha.30",
+    "gh-pages": "^3.1.0",
     "next": "latest",
+    "normalize.css": "^8.0.1",
     "react": "^16.12.0",
     "react-dom": "^16.12.0"
   },
   "devDependencies": {
+    "@emotion/babel-preset-css-prop": "^11.2.0",
     "@types/node": "^12.12.21",
     "@types/react": "^16.9.16",
     "@types/react-dom": "^16.9.4",

diff --git a/docs/pages/_app.tsx b/docs/pages/_app.tsx
@@ -0,0 +1,22 @@
+import React from 'react';
+import { AppProps } from 'next/app';
+import { LubyconUIKitProvider } from '@lubycon/ui-kit';
+
+import 'normalize.css';
+import '@lubycon/ui-kit/css/lubycon-ui-kit.min.css';
+import Head from 'next/head';
+
+export default function LubyconUIKitDocsApp({ Component, pageProps }: AppProps) {
+  return (
+    <>
+      <Head>
+        <title>Lubycon UI Kit</title>
+        <meta charSet="utf-8" />
+        <meta name="viewport" content="initial-scale=1.0, width=device-width" />
+      </Head>
+      <LubyconUIKitProvider>
+        <Component {...pageProps} />
+      </LubyconUIKitProvider>
+    </>
+  );
+}
diff --git a/docs/pages/_document.tsx b/docs/pages/_document.tsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import Document, { Html, Head, Main, NextScript, DocumentContext } from 'next/document';
+
+class LubyconUIKitDocsDocument extends Document {
+  static async getInitialProps(ctx: DocumentContext) {
+    const initialProps = await Document.getInitialProps(ctx);
+    return { ...initialProps };
+  }
+
+  render() {
+    return (
+      <Html lang="ko">
+        <Head />
+        <body>
+          <Main />
+          <NextScript />
+        </body>
+      </Html>
+    );
+  }
+}
+
+export default LubyconUIKitDocsDocument;