From 020b4ec219cf8ce6dc30fae301f5f5bbb9e202a8 Mon Sep 17 00:00:00 2001
From: Ed <sungik.dev@gmail.com>
Date: Wed, 28 Feb 2024 15:17:44 +0900
Subject: [PATCH] docs: Update README (#2033)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

<!--
  How to write a good PR title:
- Follow [the Conventional Commits
specification](https://www.conventionalcommits.org/en/v1.0.0/).
  - Give as much context as necessary and as little as possible
  - Prefix it with [WIP] while it’s a work in progress
-->

## Self Checklist

- [x] I wrote a PR title in **English** and added an appropriate
**label** to the PR.
- [x] I wrote the commit message in **English** and to follow [**the
Conventional Commits
specification**](https://www.conventionalcommits.org/en/v1.0.0/).
- [x] I [added the
**changeset**](https://github.com/changesets/changesets/blob/main/docs/adding-a-changeset.md)
about the changes that needed to be released. (or didn't have to)
- [x] I wrote or updated **documentation** related to the changes. (or
didn't have to)
- [x] I wrote or updated **tests** related to the changes. (or didn't
have to)
- [x] I tested the changes in various browsers. (or didn't have to)
  - Windows: Chrome, Edge, (Optional) Firefox
  - macOS: Chrome, Edge, Safari, (Optional) Firefox

## Related Issue
<!-- Please link to issue if one exists -->

- #1800

## Summary
<!-- Please brief explanation of the changes made -->

Update README.md

## Details
<!-- Please elaborate description of the changes -->

- 다음 버전의 내용에 맞게 문서 내용을 업데이트합니다.
- Chore: bezier-icons 기존 문서의 잘못된 예제 수정
- Chore: storybook preload 잘못된 코드 수정

### Breaking change? (Yes/No)
<!-- If Yes, please describe the impact and migration path for users -->

No
---
 packages/bezier-icons/README.md               |  6 ++-
 .../bezier-react/.storybook/preview-head.html |  3 +-
 packages/bezier-react/README.md               | 45 +++++++++++++------
 3 files changed, 39 insertions(+), 15 deletions(-)

diff --git a/packages/bezier-icons/README.md b/packages/bezier-icons/README.md
index 6bf69920af..441df59c70 100644
--- a/packages/bezier-icons/README.md
+++ b/packages/bezier-icons/README.md
@@ -55,8 +55,12 @@ If you need to validate the icon source component, use the utility function `isB
 ```tsx
 import { isBezierIcon, AllIcon } from '@channel.io/bezier-icons'
 
+function FooIcon() {
+  return (<svg />)
+}
+
 console.log(isBezierIcon(AllIcon)) // true
-console.log(isBezierIcon(<svg />)) // false
+console.log(isBezierIcon(FooIcon)) // false
 ```
 
 ## Contributing
diff --git a/packages/bezier-react/.storybook/preview-head.html b/packages/bezier-react/.storybook/preview-head.html
index 8cb0e1914f..dd48ab6b64 100644
--- a/packages/bezier-react/.storybook/preview-head.html
+++ b/packages/bezier-react/.storybook/preview-head.html
@@ -1 +1,2 @@
-<link rel="preload stylesheet" href="https://cf.channel.io/asset/font/Inter/inter.css">
\ No newline at end of file
+<link rel="preconnect" href="https://cf.channel.io" />
+<link rel="stylesheet" href="https://cf.channel.io/asset/font/Inter/inter.css" />
diff --git a/packages/bezier-react/README.md b/packages/bezier-react/README.md
index 825556d2ad..b339e8758c 100644
--- a/packages/bezier-react/README.md
+++ b/packages/bezier-react/README.md
@@ -7,46 +7,65 @@ Bezier React is a React components library that implements Bezier design system.
 ### npm
 
 ```bash
-npm i @channel.io/bezier-react styled-components@5
-npm i -D @types/styled-components@5
+npm i @channel.io/bezier-react
 ```
 
 ### yarn
 
 ```bash
-yarn add @channel.io/bezier-react styled-components@5
-yarn add -D @types/styled-components@5
+yarn add @channel.io/bezier-react
 ```
 
 ### pnpm
 
 ```bash
-pnpm install @channel.io/bezier-react styled-components@5
-pnpm install -D @types/styled-components@5
+pnpm install @channel.io/bezier-react
 ```
 
-**bezier-react has [styled-components](https://styled-components.com/) as peer dependency** so don't forget to install it.
-
 ## Usage
 
-1. Wrap `BezierProvider` at the root of your application.
-2. Pass the `foundation` value like `LightFoundation` or `DarkFoundation`.
+### 1. CSS import
+
+In order to use bezier-react's styles, you need to import CSS. If you're using the module bundler, you can import CSS directly from within your JavaScript file.
+
+```tsx
+import "@channel.io/bezier-react/styles.css"
+```
+
+Or if you're not using the module bundler, you can add the CSS directly to your HTML. We recommend referring to your styles file and copy-pasting it. As bezier-react updates, your styles should update with it.
+
+```html
+<link rel="stylesheet" href="styles.css" />
+```
+
+### 2. Wrap `AppProvider`
+
+Wrap `AppProvider` at the root of your application. If necessary, you can change the theme by specifying the `themeName` property.
 
 ```tsx
 import React from 'react'
 import { createRoot } from 'react-dom/client'
-import { BezierProvider, LightFoundation, Text } from '@channel.io/bezier-react'
+import { AppProvider, Text } from '@channel.io/bezier-react'
 
 const container = document.getElementById('root') as HTMLElement
 const root = createRoot(container)
 
 root.render(
-  <BezierProvider foundation={LightFoundation}>
+  <AppProvider themeName="dark">
     <Text as="h1">Hello World</Text>
-  </BezierProvider>,
+  </AppProvider>,
 )
 ```
 
+### 3. Font import
+
+Import font from CDN of Channel Corp. Or you can import it from [Google Fonts](https://fonts.google.com/specimen/Inter).
+
+```html
+<link rel="preconnect" href="https://cf.channel.io" />
+<link rel="stylesheet" href="https://cf.channel.io/asset/font/Inter/inter.css" />
+```
+
 ## Contributing
 
 See [contribution guide](https://github.com/channel-io/bezier-react/wiki/Contribute).