docs: Update README (#2033)

<!--
  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

@@ -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

packages/bezier-react/.storybook/preview-head.html

@@ -1 +1,2 @@
-<link rel="preload stylesheet" href="https://cf.channel.io/asset/font/Inter/inter.css">
+<link rel="preconnect" href="https://cf.channel.io" />
+<link rel="stylesheet" href="https://cf.channel.io/asset/font/Inter/inter.css" />

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).