Skip to content

Commit cd67a41

Browse files
bicochanbicochan
committed
Merge remote-tracking branch 'origin/master' into URH-101-use-event-listener-docs
2 parents a346f04 + 3b884bd commit cd67a41

File tree

10 files changed

+619
-30
lines changed

10 files changed

+619
-30
lines changed

‎docs/pages/hooks/_meta.json

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
{
2+
"useAsyncTasks": "useAsyncTasks",
23
"useClipboard": "useClipboard",
34
"useConfirm": "useConfirm",
45
"useDebounce": "useDebounce",
@@ -12,10 +13,13 @@
1213
"useInterval": "useInterval",
1314
"useKeyCombination": "useKeyCombination",
1415
"useKeyDown": "useKeyDown",
16+
"useLocalStorage": "useLocalStorage",
1517
"useLongPress": "useLongPress",
18+
"useMockData": "useMockData",
1619
"useMousePosition": "useMousePosition",
1720
"useOnlineStatus": "useOnlineStatus",
1821
"useOutsideClick": "useOutsideClick",
22+
"usePermission": "usePermission",
1923
"usePrefersColorScheme": "usePrefersColorScheme",
2024
"usePreventCopy": "usePreventCopy",
2125
"useScrollLock": "useScrollLock",
@@ -25,6 +29,7 @@
2529
"useToggle": "useToggle",
2630
"useTranslation": "useTranslation",
2731
"useUnmountEffect": "useUnmountEffect",
32+
"useWorker": "useWorker",
2833
"_template": {
2934
"display": "hidden"
3035
}

‎docs/pages/hooks/useAsyncTasks.mdx

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
# useAsyncTasks
2+
3+
## Introduce
4+
5+
비동기 작업 리스트와 옵션을 받아 로딩 상태, 데이터, 오류 등을 관리하며, 컴포넌트 언마운트 시 상태 업데이트를 방지합니다.
6+
7+
```tsx
8+
interface UseAsyncTasksProps<R> {
9+
tasks: Task<R>[];
10+
options?: Options<R>;
11+
}
12+
13+
interface UseAsyncTasksReturns<R> {
14+
isLoading: boolean;
15+
data: R | null;
16+
error: Error | null;
17+
isError: boolean;
18+
reset: () => void;
19+
}
20+
21+
const useAsyncTasks = <R>(tasks: Task<R>[], options: Options<R>): UseAsyncTasksReturns<R> => { ... }
22+
```
23+
24+
### Props
25+
26+
- `tasks` : 실행할 비동기 작업들의 배열입니다. 비동기 함수 외에도 일반 함수, 원시 데이터 등을 전달할 수 있습니다.
27+
28+
### Returns
29+
30+
- `isLoading` : 현재 비동기 작업이 진행 중인지 여부를 나타내는 불리언 값입니다.
31+
- `data` : 성공적으로 완료된 작업의 결과를 담고 있는 데이터입니다.
32+
- `error` : 작업 중 발생한 오류 정보를 포함합니다.
33+
- `isError` : 오류가 발생했는지 여부를 나타내는 불리언 값입니다.
34+
- `reset` : 이전 상태를 초기화하여 초기 상태로 되돌리는 함수입니다.
35+
36+
## Examples
37+
38+
```tsx copy filename="TestComponent.tsx"
39+
const fetchUsers = async () => {
40+
const response = await fetch(`https://jsonplaceholder.typicode.com/users`);
41+
if (!response.ok) throw new Error('사용자 목록을 가져오지 못했습니다.');
42+
return response.json();
43+
};
44+
45+
const TestComponent = () => {
46+
const { isLoading, data, error, isError, reset } = useAsyncTasks<
47+
{ id: string; name: string }[]
48+
>([fetchUsers], {
49+
onSuccess: () => console.log('사용자 목록을 성공적으로 가져왔습니다!'),
50+
onError: (err) => console.error('오류:', err),
51+
});
52+
53+
return (
54+
<div>
55+
<button onClick={reset}>재로드</button>
56+
{isLoading && <p>로딩 중...</p>}
57+
{isError && <p>오류: {error?.message}</p>}
58+
{data && (
59+
<ul>
60+
{data.map((user) => (
61+
<li key={user.id}>{user.name}</li>
62+
))}
63+
</ul>
64+
)}
65+
</div>
66+
);
67+
};
68+
```

‎docs/pages/hooks/useLocalStorage.mdx

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
# useLocalStorage
2+
3+
## Introduce
4+
5+
로컬 스토리지와 동기화된 상태를 관리하는 훅입니다.
6+
7+
브라우저의 로컬 스토리지 API를 간편하게 사용할 수 있도록 도와주며,
8+
타입 일관성을 유지하기 위해 잘못된 값이 저장되지 않도록 차단합니다.
9+
10+
```ts
11+
interface UseLocalStorageHookProps<T> {
12+
key: string;
13+
initialValue: T;
14+
}
15+
16+
interface UseLocalStorageHookReturns<T> extends Readonly<[T, (value: ValueResolver<T>) => void]> {}
17+
18+
const useLocalStorage = <T>(
19+
key: string,
20+
initialValue: T
21+
): UseLocalStorageHookReturns<T>
22+
```
23+
24+
import { Callout } from 'nextra/components';
25+
26+
<Callout type="warning">
27+
값의 타입이 일치하지 않을 경우 초기값으로 재설정합니다. 또한, 브라우저
28+
환경에서만 동작하므로 서버 환경에서는 사용할 수 없습니다.
29+
</Callout>
30+
31+
### Props
32+
33+
- `key` : 로컬 스토리지에 저장할 값의 키를 지정합니다.
34+
- `initialValue` : 저장할 초기 값을 설정합니다. 만약 로컬 스토리지에 기존 값이 존재하지 않거나 타입이 다른 경우, 해당 초기값이 사용됩니다.
35+
36+
### Returns
37+
38+
- `[storedValue, setValue]` : 첫 번째 요소는 저장된 값이며, 두 번째 요소는 해당 값을 업데이트하는 함수입니다.
39+
40+
## Examples
41+
42+
```tsx copy filename="TestComponent.tsx"
43+
const TestComponent = () => {
44+
const [value, setValue] = useLocalStorage<number>('count', 0);
45+
46+
const handleIncrement = () => setValue((prev) => prev + 1);
47+
const handleReset = () => setValue(0);
48+
49+
return (
50+
<div>
51+
<p>Stored Value: {value}</p>
52+
<button onClick={handleIncrement}>Increment</button>
53+
<button onClick={handleReset}>Reset</button>
54+
</div>
55+
);
56+
};
57+
```

‎docs/pages/hooks/useMockData.mdx

Lines changed: 164 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,164 @@
1+
# useMockData
2+
3+
## Introduce
4+
5+
주어진 스키마와 옵션을 바탕으로 모의 데이터를 생성합니다.
6+
7+
필요한 형태의 데이터를 쉽게 테스트하고 사용할 수 있도록 구성이 되어있습니다.
8+
9+
```ts
10+
interface UseMockDataProps<S extends Schema> {
11+
options?: Partial<Options>;
12+
schema: S;
13+
}
14+
15+
interface UseMockDataReturns<T> {
16+
mockData: T;
17+
addItem: () => void;
18+
}
19+
20+
const useMockData = <S extends Schema>(
21+
props: UseMockDataProps<S>
22+
): UseMockDataReturns<SchemaToType<S>[]> => { ... }
23+
```
24+
25+
### Props
26+
27+
- `schema` : 모의 데이터의 구조를 정의하는 스키마 객체입니다. 각 필드의 타입과 구조를 설정할 수 있습니다.
28+
- `options` : 데이터 생성과 관련된 옵션을 지정할 수 있는 객체입니다. 기본적으로 설정된 `defaultOptions`이 사용되며, 필요 시 이를 덮어쓸 수 있습니다.
29+
- `options.count` : 생성될 요소의 개수를 명시합니다.
30+
- `options.type` : 각 데이터 타입에 대한 기본 생성 범위를 설정하는 객체입니다.
31+
32+
```ts
33+
const defaultOptions: Options = {
34+
count: 1, // 생성될 더미데이터 요소의 개수
35+
type: {
36+
string: {
37+
// 문자열 길이 범위
38+
min: 3,
39+
max: 10,
40+
},
41+
number: {
42+
// 숫자 생성 범위
43+
min: 1,
44+
max: 100,
45+
},
46+
image: {
47+
// 이미지 너비, 높이 범위
48+
width: {
49+
min: 800,
50+
max: 2560,
51+
},
52+
height: {
53+
min: 600,
54+
max: 1440,
55+
},
56+
},
57+
date: {
58+
// 날짜 범위
59+
start: formatDateToYYYYMMDD(),
60+
end: formatDateToYYYYMMDD(1),
61+
},
62+
},
63+
};
64+
```
65+
66+
### Returns
67+
68+
- `mockData` : 주어진 스키마에 따라 생성된 모의 데이터 배열입니다.
69+
- `addItem` : 새로운 모의 데이터를 추가하는 함수입니다. 호출 시 현재 schema에 기반해 새로운 항목이 배열에 추가됩니다.
70+
71+
import { Callout } from 'nextra/components';
72+
73+
<Callout type="warning">
74+
스키마에 정의된 날짜 범위가 유효하지 않을 경우 오류가 발생할 수 있습니다. (예:
75+
시작 날짜가 종료 날짜보다 나중인 경우)
76+
</Callout>
77+
78+
## Examples
79+
80+
```tsx copy filename="TestComponent.tsx"
81+
import React from 'react';
82+
import useMockData, { useMockDataSchema } from './useMockData';
83+
84+
const schema: useMockDataSchema = {
85+
user: {
86+
id: 'UUID',
87+
name: 'string',
88+
posts: [
89+
{
90+
title: 'string',
91+
content: 'string',
92+
tags: ['string'],
93+
comments: [
94+
{
95+
userId: 'UUID',
96+
comment: 'string',
97+
createdAt: 'date',
98+
},
99+
],
100+
},
101+
],
102+
profile: {
103+
avatar: 'image',
104+
bio: 'string',
105+
followers: [
106+
{
107+
followerId: 'UUID',
108+
followedAt: 'date',
109+
},
110+
],
111+
},
112+
},
113+
};
114+
115+
const TestComponent: React.FC = () => {
116+
const { mockData, addItem } = useMockData({ schema });
117+
118+
// mockData 데이터
119+
// [
120+
// {
121+
// "user": {
122+
// "id": "249ad9db-db18-4a92-b38d-6f17894e36e3",
123+
// "name": "Rhudl",
124+
// "posts": [
125+
// {
126+
// "title": "Utvdwx",
127+
// "content": "Hqskuyacjz",
128+
// "tags": [
129+
// "Ufgca"
130+
// ],
131+
// "comments": [
132+
// {
133+
// "userId": "97a3b3c9-1a96-492c-954b-96c62f731291",
134+
// "comment": "Iffaf",
135+
// "createdAt": "2024-11-16T15:23:23.481Z"
136+
// }
137+
// ]
138+
// }
139+
// ],
140+
// "profile": {
141+
// "avatar": "https://picsum.photos/2427/697",
142+
// "bio": "Wtxaccpqj",
143+
// "followers": [
144+
// {
145+
// "followerId": "a6c324ce-18be-49d3-a4d3-86ecb8bc9756",
146+
// "followedAt": "2024-10-26T13:14:18.015Z"
147+
// }
148+
// ]
149+
// }
150+
// }
151+
// }
152+
// ]
153+
154+
return (
155+
<div>
156+
<h1>Mock Data with Nested Structures</h1>
157+
<pre>{JSON.stringify(mockData, null, 2)}</pre>
158+
<button onClick={addItem}>Add Item</button>
159+
</div>
160+
);
161+
};
162+
163+
export default TestComponent;
164+
```

0 commit comments

Comments
 (0)