merge: useLocalStorage 스토리북 작성 (#19)

merge: useLocalStorage 스토리북 작성 (#19)

Author: d0422

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

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} />

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,
+});

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: {},
+};

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>
+  );
+}