docs: README with Information on @fepack/image and @fepack/react-image (

#51)

## Summary

<!-- Please summarize your changes. -->

<!-- Please link to any applicable information (forum posts, bug
reports, etc.). -->
- Added introduction and installation section for `@fepack/image`.
- Included a separate section for `@fepack/react-image` for React
developers.
- Updated badge links and formatting.

## Checks

<!-- For completed items, change [ ] to [x]. -->

<!-- If you leave this checklist empty, your PR will very likely be
closed. -->

Please check the following:

- [x] I have written documents and tests, if needed.

---------

Co-authored-by: Jonghyeon Ko <[email protected]>

.changeset/dull-hairs-play.md

@@ -0,0 +1,6 @@
+---
+"@fepack/image": patch
+"@fepack/react-image": patch
+---
+
+docs: README with Information on @fepack/image and @fepack/react-image

README.md

@@ -22,14 +22,17 @@
 
 # @fepack/image
 
-`@fepack/image` provides tools designed to simplify image management. Explore and enhance your image handling with `@fepack/image`
+[![npm version](https://img.shields.io/npm/v/@fepack/image?color=4C4885)](https://www.npmjs.com/package/@fepack/image)
+
+`@fepack/image` offers a collection of utilities designed for easy image control.
 
 ## Features
 
 - load
+- LoadClient
 - checkWebPSupport
 - detect
-- extractColors
+- extractRGBs
 
 ## Installation
 
@@ -47,7 +50,9 @@ yarn add @fepack/image
 
 # @fepack/react-image
 
-If you're a React developer, `@fepack/react-image` provides specialized hooks and components to enhance your workflow.
+[![npm version](https://img.shields.io/npm/v/@fepack/image?color=4C4885)](https://www.npmjs.com/package/@fepack/react-image)
+
+For React developers, `@fepack/react-image` provides hooks and components tailored for your workflow with images.
 
 ## Features
 

packages/image/README.md

@@ -1,47 +1,23 @@
-# @fepack/image
+# Introduction
 
-image는 웹페이지의 로딩 시간을 줄이기 위해 사용됩니다. 이 패키지는 웹페이지에 사용되는 이미지들을 미리 로드하며, WEBP 이미지 포맷을 지원합니다.
+## @fepack/image
 
-## 설치
+`@fepack/image` offers a collection of utilities designed for easy image control.
 
-이 패키지를 사용하려면 먼저 프로젝트에 설치해야 합니다.
+[![npm version](https://img.shields.io/npm/v/@fepack/image?color=4C4885)](https://www.npmjs.com/package/@fepack/image)
 
-```
-pnpm add -D @fepack/image
-```
-
-## 기능
-
-1. **이미지 포맷 지원 확인**: 현재 브라우저가 `webp` 이미지 포맷을 지원하는지 확인합니다.
-2. **이미지 로딩**: 지원하는 포맷의 이미지를 로딩합니다.
-
-## 사용법
+### Installation
 
-### 이미지 포맷 지원 확인
+To install the latest stable version of `@fepack/image`, run the following commands:
 
-```js
-import { isSupportWebP } from "@fepack/image";
-
-const isSupportedWebp = await isSupportWebP();
-if (isSupportedWebp) {
-  console.log("This browser supports webp format.");
-} else {
-  console.log("This browser does not support webp format.");
-}
+```shell
+npm install @fepack/image
 ```
 
-### 이미지 로딩
-
-```js
-import { load } from "@fepack/image";
-
-const images = [
-  {
-    defaultSrc: "path/to/default/image.jpg",
-    webpSrc: "path/to/image.webp",
-  },
-  // ... more images
-];
+```shell
+pnpm add @fepack/image
+```
 
-load(images);
+```shell
+yarn add @fepack/image
 ```

packages/react-image/README.md

@@ -0,0 +1,23 @@
+# Introduction
+
+## @fepack/image
+
+For React developers, `@fepack/react-image` provides hooks and components tailored for your workflow with images.
+
+[![npm version](https://img.shields.io/npm/v/@fepack/image?color=4C4885)](https://www.npmjs.com/package/@fepack/react-image)
+
+### Installation
+
+To install the latest stable version of `@fepack/react-image`, run the following commands:
+
+```shell
+npm install @fepack/react-image
+```
+
+```shell
+pnpm add @fepack/react-image
+```
+
+```shell
+yarn add @fepack/react-image
+```