From 36492b77e1b07abb303a73b339f73b4cdc0c8d82 Mon Sep 17 00:00:00 2001
From: d0422 <rlfehd2013@naver.com>
Date: Fri, 24 May 2024 19:55:27 +0900
Subject: [PATCH 1/2] =?UTF-8?q?docs:=20useLocalStorage=20Storybook=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/stories/useLocalStorage/Docs.mdx          | 51 +++++++++++++++++++
 .../useLocalStorage/LocalStorage.css.ts       | 26 ++++++++++
 .../useLocalStorage/LocalStorage.stories.ts   | 21 ++++++++
 src/stories/useLocalStorage/LocalStorage.tsx  | 23 +++++++++
 4 files changed, 121 insertions(+)
 create mode 100644 src/stories/useLocalStorage/Docs.mdx
 create mode 100644 src/stories/useLocalStorage/LocalStorage.css.ts
 create mode 100644 src/stories/useLocalStorage/LocalStorage.stories.ts
 create mode 100644 src/stories/useLocalStorage/LocalStorage.tsx

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';
+
+<Meta of={LocalStorage} />
+
+# 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 (
+    <div className={flexCol}>
+      <div className={info}>Local Storage (key) 에 저장된 값 : {storageValue}</div>
+      <div>새로고침을 통해 확인해보세요!</div>
+
+      <div className={flex}>
+        <input type="text" onChange={onChange} className={input} placeholder="값 변경하기!" />
+        <button onClick={() => setStorageValue(value)} className={button}>
+          적용
+        </button>
+      </div>
+    </div>
+  );
+}
+```
+
+<Canvas of={LocalStorage.defaultStory} />
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<typeof LocalStorage>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+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 (
+    <div className={flexCol}>
+      <div className={info}>Local Storage (key) 에 저장된 값 : {storageValue}</div>
+      <div>새로고침을 통해 확인해보세요!</div>
+
+      <div className={flex}>
+        <input type="text" onChange={onChange} className={input} placeholder="값 변경하기!" />
+        <button onClick={() => setStorageValue(value)} className={button}>
+          적용
+        </button>
+      </div>
+    </div>
+  );
+}

From 1c5655951a7f58f1bfc2d5c6cc92fb84a8b4af84 Mon Sep 17 00:00:00 2001
From: d0422 <rlfehd2013@naver.com>
Date: Fri, 24 May 2024 19:56:01 +0900
Subject: [PATCH 2/2] =?UTF-8?q?chore:=20=EB=B2=84=EC=A0=84=20=EC=97=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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",