diff --git a/package.json b/package.json
index 6d8fdbf..dd0bf8c 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "@rapiders/react-hooks",
- "version": "1.2.5",
+ "version": "1.2.6",
"description": "react hooks for fast development",
"main": "dist/esm/index.js",
"types": "dist/esm/index.d.ts",
diff --git a/src/stories/useLocalStorage/Docs.mdx b/src/stories/useLocalStorage/Docs.mdx
new file mode 100644
index 0000000..4abd11e
--- /dev/null
+++ b/src/stories/useLocalStorage/Docs.mdx
@@ -0,0 +1,51 @@
+import { Canvas, Meta, Description } from '@storybook/blocks';
+import * as LocalStorage from './LocalStorage.stories';
+
+
+
+# useLocalStorage
+
+LocalStorage 내부 데이터를 선언적으로, type safe하게 관리할 수 있게 하는 훅입니다.
+
+## 제네릭
+
+제네릭을 사용하여 LocalStorage에 저장되는 데이터 타입을 지정하여 안전하게 데이터를 넣고 꺼낼 수 있습니다.
+
+## 함수 인자
+
+`key`: LocalStorage의 Key입니다.
+
+`initialValue`: LocalStorage Key의 최초 Value입니다.
+
+`options (UseLocalStorageOptions | undefined)`: LocalStorage에 저장되고, 값을 가져올때 적용할 직렬화 함수와 역직렬화함수를 options으로 지정할 수 있습니다.
+
+## 반환값
+
+`value`: 현재 LocalStorage에 들어있는 값입니다.
+
+`saveValue`: LocalStorage의 값을 변경하는 함수입니다.
+
+`removeValue`: LocalStorage에 저장된 값을 제거하는 함수입니다.
+
+```tsx
+function LocalStorage() {
+ const [storageValue, setStorageValue] = useLocalStorage('key', 'value');
+ const { value, onChange } = useInput('');
+
+ return (
+
+
Local Storage (key) 에 저장된 값 : {storageValue}
+
새로고침을 통해 확인해보세요!
+
+
+
+
+
+
+ );
+}
+```
+
+
diff --git a/src/stories/useLocalStorage/LocalStorage.css.ts b/src/stories/useLocalStorage/LocalStorage.css.ts
new file mode 100644
index 0000000..1d3a839
--- /dev/null
+++ b/src/stories/useLocalStorage/LocalStorage.css.ts
@@ -0,0 +1,26 @@
+import { style } from '@vanilla-extract/css';
+
+export const flex = style({
+ display: 'flex',
+ gap: 10,
+});
+
+export const flexCol = style({
+ display: 'flex',
+ flexDirection: 'column',
+ gap: 10,
+});
+
+export const info = style({
+ fontSize: 20,
+});
+export const input = style({
+ padding: 15,
+ fontSize: 15,
+ borderRadius: 15,
+});
+
+export const button = style({
+ fontSize: 15,
+ padding: 15,
+});
diff --git a/src/stories/useLocalStorage/LocalStorage.stories.ts b/src/stories/useLocalStorage/LocalStorage.stories.ts
new file mode 100644
index 0000000..e10a920
--- /dev/null
+++ b/src/stories/useLocalStorage/LocalStorage.stories.ts
@@ -0,0 +1,21 @@
+import { Meta, StoryObj } from '@storybook/react';
+import LocalStorage from './LocalStorage';
+
+const meta = {
+ title: 'hooks/useLocalStorage',
+ component: LocalStorage,
+ parameters: {
+ layout: 'centered',
+ docs: {
+ canvas: {},
+ },
+ },
+} satisfies Meta;
+
+export default meta;
+
+type Story = StoryObj;
+
+export const defaultStory: Story = {
+ args: {},
+};
diff --git a/src/stories/useLocalStorage/LocalStorage.tsx b/src/stories/useLocalStorage/LocalStorage.tsx
new file mode 100644
index 0000000..d669ceb
--- /dev/null
+++ b/src/stories/useLocalStorage/LocalStorage.tsx
@@ -0,0 +1,23 @@
+import useInput from '@/useInput/useInput';
+import useLocalStorage from '@/useLocalStorage/useLocalStorage';
+import React from 'react';
+import { button, flex, flexCol, info, input } from './LocalStorage.css';
+
+export default function LocalStorage() {
+ const [storageValue, setStorageValue] = useLocalStorage('key', 'value');
+ const { value, onChange } = useInput('');
+
+ return (
+
+
Local Storage (key) 에 저장된 값 : {storageValue}
+
새로고침을 통해 확인해보세요!
+
+
+
+
+
+
+ );
+}