From c4a0fa89935c88c3d7471f49bcf605337a32b42c Mon Sep 17 00:00:00 2001 From: saseungmin Date: Sun, 30 Jul 2023 20:25:50 +0900 Subject: [PATCH] =?UTF-8?q?docs(@nft-team/react):=20useResizeViewportHeigh?= =?UTF-8?q?t,=20useBoolean,=20GlobalPortal=20tsdocs=20=EC=9E=91=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .changeset/ten-shrimps-complain.md | 6 +++ apps/docs/docs/core/modules.md | 14 +++--- apps/docs/docs/react/modules.md | 2 +- apps/docs/docs/react/modules/components.md | 41 +++++++++++---- apps/docs/docs/react/modules/hooks.md | 50 ++++++++++++++----- packages/react/.eslintrc.js | 2 +- packages/react/src/components/ClientOnly.tsx | 3 +- .../react/src/components/GlobalPortal.tsx | 24 +++++++++ packages/react/src/hooks/useBoolean.ts | 10 ++++ packages/react/src/hooks/useIsMounted.ts | 2 +- .../src/hooks/useResizeViewportHeight.ts | 15 ++++++ 11 files changed, 136 insertions(+), 33 deletions(-) create mode 100644 .changeset/ten-shrimps-complain.md diff --git a/.changeset/ten-shrimps-complain.md b/.changeset/ten-shrimps-complain.md new file mode 100644 index 00000000..632b79be --- /dev/null +++ b/.changeset/ten-shrimps-complain.md @@ -0,0 +1,6 @@ +--- +"docs": minor +"@nft-team/react": patch +--- + +docs(@nft-team/react): useResizeViewportHeight, useBoolean, GlobalPortal tsdocs 작성 diff --git a/apps/docs/docs/core/modules.md b/apps/docs/docs/core/modules.md index 4fbaf60e..17dbf16f 100644 --- a/apps/docs/docs/core/modules.md +++ b/apps/docs/docs/core/modules.md @@ -30,7 +30,7 @@ custom_edit_url: null #### Defined in -[utils.ts:44](https://github.com/mbti-nf-team/frontend-libraries/blob/d191bf9/packages/core/src/utils.ts#L44) +[utils.ts:44](https://github.com/mbti-nf-team/frontend-libraries/blob/27f22a1/packages/core/src/utils.ts#L44) ___ @@ -50,7 +50,7 @@ ___ #### Defined in -[utils.ts:26](https://github.com/mbti-nf-team/frontend-libraries/blob/d191bf9/packages/core/src/utils.ts#L26) +[utils.ts:26](https://github.com/mbti-nf-team/frontend-libraries/blob/27f22a1/packages/core/src/utils.ts#L26) ___ @@ -71,7 +71,7 @@ ___ #### Defined in -[utils.ts:34](https://github.com/mbti-nf-team/frontend-libraries/blob/d191bf9/packages/core/src/utils.ts#L34) +[utils.ts:34](https://github.com/mbti-nf-team/frontend-libraries/blob/27f22a1/packages/core/src/utils.ts#L34) ___ @@ -91,7 +91,7 @@ ___ #### Defined in -[utils.ts:64](https://github.com/mbti-nf-team/frontend-libraries/blob/d191bf9/packages/core/src/utils.ts#L64) +[utils.ts:64](https://github.com/mbti-nf-team/frontend-libraries/blob/27f22a1/packages/core/src/utils.ts#L64) ___ @@ -117,7 +117,7 @@ ___ #### Defined in -[utils.ts:52](https://github.com/mbti-nf-team/frontend-libraries/blob/d191bf9/packages/core/src/utils.ts#L52) +[utils.ts:52](https://github.com/mbti-nf-team/frontend-libraries/blob/27f22a1/packages/core/src/utils.ts#L52) ___ @@ -153,7 +153,7 @@ console.log(result); // 'newValue'; #### Defined in -[utils.ts:14](https://github.com/mbti-nf-team/frontend-libraries/blob/d191bf9/packages/core/src/utils.ts#L14) +[utils.ts:14](https://github.com/mbti-nf-team/frontend-libraries/blob/27f22a1/packages/core/src/utils.ts#L14) ___ @@ -173,4 +173,4 @@ ___ #### Defined in -[utils.ts:36](https://github.com/mbti-nf-team/frontend-libraries/blob/d191bf9/packages/core/src/utils.ts#L36) +[utils.ts:36](https://github.com/mbti-nf-team/frontend-libraries/blob/27f22a1/packages/core/src/utils.ts#L36) diff --git a/apps/docs/docs/react/modules.md b/apps/docs/docs/react/modules.md index 65292e8e..bfcdee8c 100644 --- a/apps/docs/docs/react/modules.md +++ b/apps/docs/docs/react/modules.md @@ -1,6 +1,6 @@ --- id: "modules" -title: "@nft-team/react - v1.2.2" +title: "@nft-team/react - v1.3.0" sidebar_label: "Exports" sidebar_position: 0.5 custom_edit_url: null diff --git a/apps/docs/docs/react/modules/components.md b/apps/docs/docs/react/modules/components.md index fdf51aff..09ee93e1 100644 --- a/apps/docs/docs/react/modules/components.md +++ b/apps/docs/docs/react/modules/components.md @@ -15,8 +15,7 @@ custom_edit_url: null **`Description`** Component의 mount 여부를 확인하여 mount가 된 경우, Component를 render해줍니다. -mount되지 않은 경우에는 Component를 render해주지 않습니다. - +mount되지 않은 경우에는 Component를 render해주지 않습니다.
SSR 환경에서 실제로 컴포넌트가 브라우저에서 mount 된 이후에만 해당 Component를 보여주고 싶을때 사용합니다. (SSR 환경에서 Hydration 오류로 인해서 에러가 발생하는 문제를 해결합니다.) @@ -45,7 +44,7 @@ function ClintOnlyComponent() { #### Defined in -[packages/react/src/components/ClientOnly.tsx:23](https://github.com/mbti-nf-team/frontend-libraries/blob/d191bf9/packages/react/src/components/ClientOnly.tsx#L23) +[packages/react/src/components/ClientOnly.tsx:22](https://github.com/mbti-nf-team/frontend-libraries/blob/27f22a1/packages/react/src/components/ClientOnly.tsx#L22) ___ @@ -65,19 +64,43 @@ ___ #### Defined in -[packages/react/src/components/DelayRenderComponent.tsx:11](https://github.com/mbti-nf-team/frontend-libraries/blob/d191bf9/packages/react/src/components/DelayRenderComponent.tsx#L11) +[packages/react/src/components/DelayRenderComponent.tsx:11](https://github.com/mbti-nf-team/frontend-libraries/blob/27f22a1/packages/react/src/components/DelayRenderComponent.tsx#L11) ___ ### GlobalPortal -▸ **GlobalPortal**(`«destructured»`): ``null`` \| `ReactPortal` +▸ **GlobalPortal**(`elementId`): ``null`` \| `ReactPortal` + +**`Description`** + +부모 컴포넌트의 DOM 외부에 존재하는 DOM 노드에 렌더링 할 수 있게 해주는 +`ReactDOM.createPortal`를 이용해 컴포넌트를 렌더링해줍니다.
+공통적인 UI(모달, 팝업, 알림 등)나 부모 컴포넌트에 +`overflow: hidden`, `z-index`와 같은 스타일이 있을 때 부모 엘리먼트에 의존적이지 않아야하는 경우 유용합니다. + +**`Example`** + +```html title="html" +
+``` + +```tsx title="tsx" +function SampleComponent() { + + return ( + +
Render component
+ + ); +} +``` #### Parameters -| Name | Type | -| :------ | :------ | -| `«destructured»` | `PropsWithChildren`<`Props`\> | +| Name | Type | Description | +| :------ | :------ | :------ | +| `elementId` | `PropsWithChildren`<`Props`\> | 부모 엘리먼트가 아닌 다른 DOM 트리의 elementId값 | #### Returns @@ -85,4 +108,4 @@ ___ #### Defined in -[packages/react/src/components/GlobalPortal.tsx:10](https://github.com/mbti-nf-team/frontend-libraries/blob/d191bf9/packages/react/src/components/GlobalPortal.tsx#L10) +[packages/react/src/components/GlobalPortal.tsx:34](https://github.com/mbti-nf-team/frontend-libraries/blob/27f22a1/packages/react/src/components/GlobalPortal.tsx#L34) diff --git a/apps/docs/docs/react/modules/hooks.md b/apps/docs/docs/react/modules/hooks.md index dc2b6187..dfad73c6 100644 --- a/apps/docs/docs/react/modules/hooks.md +++ b/apps/docs/docs/react/modules/hooks.md @@ -32,7 +32,7 @@ custom_edit_url: null #### Defined in -[packages/react/src/hooks/useActionKeyEvent.ts:6](https://github.com/mbti-nf-team/frontend-libraries/blob/d191bf9/packages/react/src/hooks/useActionKeyEvent.ts#L6) +[packages/react/src/hooks/useActionKeyEvent.ts:6](https://github.com/mbti-nf-team/frontend-libraries/blob/27f22a1/packages/react/src/hooks/useActionKeyEvent.ts#L6) ___ @@ -40,11 +40,21 @@ ___ ▸ **useBoolean**(`initialValue?`): [`boolean`, () => `void`, () => `void`, (`nextValue?`: `boolean`) => `void`] +**`Description`** + +`boolean` 타입으로만 반환하는 `useState`를 쉽게 사용할 수 있는 hook 입니다. + +**`Example`** + +```ts +const [isOpen, openModal, closeModal, toggleModal] = useBoolean(); +``` + #### Parameters -| Name | Type | Default value | -| :------ | :------ | :------ | -| `initialValue` | `boolean` | `false` | +| Name | Type | Default value | Description | +| :------ | :------ | :------ | :------ | +| `initialValue` | `boolean` | `false` | 초기값을 세팅 | #### Returns @@ -52,7 +62,7 @@ ___ #### Defined in -[packages/react/src/hooks/useBoolean.ts:3](https://github.com/mbti-nf-team/frontend-libraries/blob/d191bf9/packages/react/src/hooks/useBoolean.ts#L3) +[packages/react/src/hooks/useBoolean.ts:13](https://github.com/mbti-nf-team/frontend-libraries/blob/27f22a1/packages/react/src/hooks/useBoolean.ts#L13) ___ @@ -79,7 +89,7 @@ ___ #### Defined in -[packages/react/src/hooks/useDebounce.ts:3](https://github.com/mbti-nf-team/frontend-libraries/blob/d191bf9/packages/react/src/hooks/useDebounce.ts#L3) +[packages/react/src/hooks/useDebounce.ts:3](https://github.com/mbti-nf-team/frontend-libraries/blob/27f22a1/packages/react/src/hooks/useDebounce.ts#L3) ___ @@ -89,7 +99,7 @@ ___ **`Description`** -Component의 mount 여부를 확인하는 hook 입니다. +Component의 mount 여부를 확인하는 hook 입니다.
SSR 환경에서 실제로 컴포넌트가 브라우저에서 mount 된 이후에 어떤 동작을 실행하기 위해서 사용합니다. **`Example`** @@ -111,7 +121,7 @@ useEffect(() => { #### Defined in -[packages/react/src/hooks/useIsMounted.ts:18](https://github.com/mbti-nf-team/frontend-libraries/blob/d191bf9/packages/react/src/hooks/useIsMounted.ts#L18) +[packages/react/src/hooks/useIsMounted.ts:18](https://github.com/mbti-nf-team/frontend-libraries/blob/27f22a1/packages/react/src/hooks/useIsMounted.ts#L18) ___ @@ -163,7 +173,7 @@ ___ #### Defined in -[packages/react/src/hooks/useLessThenScrollY.ts:5](https://github.com/mbti-nf-team/frontend-libraries/blob/d191bf9/packages/react/src/hooks/useLessThenScrollY.ts#L5) +[packages/react/src/hooks/useLessThenScrollY.ts:5](https://github.com/mbti-nf-team/frontend-libraries/blob/27f22a1/packages/react/src/hooks/useLessThenScrollY.ts#L5) ___ @@ -171,13 +181,29 @@ ___ ▸ **useResizeViewportHeight**(): `void` +**`Description`** + +스크롤을 포함한 window의 높이를 가져와 window 크기를 resize해줍니다.
+모바일 환경의 웹뷰에서 디바이스 및 브라우저 환경에 따라 크기가 달라져 불필요한 스크롤이 생길 수 있습니다. 이때 이 hook을 사용하면 유용합니다. + +**`Example`** + +```tsx +function SampleComponent() { + useResizeViewportHeight(); + + return
sample text
+} + +``` + #### Returns `void` #### Defined in -[packages/react/src/hooks/useResizeViewportHeight.ts:3](https://github.com/mbti-nf-team/frontend-libraries/blob/d191bf9/packages/react/src/hooks/useResizeViewportHeight.ts#L3) +[packages/react/src/hooks/useResizeViewportHeight.ts:17](https://github.com/mbti-nf-team/frontend-libraries/blob/27f22a1/packages/react/src/hooks/useResizeViewportHeight.ts#L17) ___ @@ -216,7 +242,7 @@ ___ #### Defined in -[packages/react/src/hooks/useThrottleCallback.ts:3](https://github.com/mbti-nf-team/frontend-libraries/blob/d191bf9/packages/react/src/hooks/useThrottleCallback.ts#L3) +[packages/react/src/hooks/useThrottleCallback.ts:3](https://github.com/mbti-nf-team/frontend-libraries/blob/27f22a1/packages/react/src/hooks/useThrottleCallback.ts#L3) ___ @@ -237,4 +263,4 @@ ___ #### Defined in -[packages/react/src/hooks/useTimeout.ts:5](https://github.com/mbti-nf-team/frontend-libraries/blob/d191bf9/packages/react/src/hooks/useTimeout.ts#L5) +[packages/react/src/hooks/useTimeout.ts:5](https://github.com/mbti-nf-team/frontend-libraries/blob/27f22a1/packages/react/src/hooks/useTimeout.ts#L5) diff --git a/packages/react/.eslintrc.js b/packages/react/.eslintrc.js index 044a16d5..71b7aa24 100644 --- a/packages/react/.eslintrc.js +++ b/packages/react/.eslintrc.js @@ -34,6 +34,6 @@ module.exports = { 'import/prefer-default-export': 'off', 'import/no-extraneous-dependencies': 'off', 'react/require-default-props': 'off', - 'tsdoc/syntax': 'warn', + 'tsdoc/syntax': 'off', }, }; diff --git a/packages/react/src/components/ClientOnly.tsx b/packages/react/src/components/ClientOnly.tsx index badfbd80..8f2074de 100644 --- a/packages/react/src/components/ClientOnly.tsx +++ b/packages/react/src/components/ClientOnly.tsx @@ -4,8 +4,7 @@ import useIsMounted from '../hooks/useIsMounted'; /** * @description Component의 mount 여부를 확인하여 mount가 된 경우, Component를 render해줍니다. - * mount되지 않은 경우에는 Component를 render해주지 않습니다. - * + * mount되지 않은 경우에는 Component를 render해주지 않습니다.
* SSR 환경에서 실제로 컴포넌트가 브라우저에서 mount 된 이후에만 해당 Component를 보여주고 싶을때 사용합니다. * (SSR 환경에서 Hydration 오류로 인해서 에러가 발생하는 문제를 해결합니다.) * diff --git a/packages/react/src/components/GlobalPortal.tsx b/packages/react/src/components/GlobalPortal.tsx index e1151bb6..4bf00da5 100644 --- a/packages/react/src/components/GlobalPortal.tsx +++ b/packages/react/src/components/GlobalPortal.tsx @@ -7,6 +7,30 @@ interface Props { elementId?: string; } +/** + * @description 부모 컴포넌트의 DOM 외부에 존재하는 DOM 노드에 렌더링 할 수 있게 해주는 + * `ReactDOM.createPortal`를 이용해 컴포넌트를 렌더링해줍니다.
+ * 공통적인 UI(모달, 팝업, 알림 등)나 부모 컴포넌트에 + * `overflow: hidden`, `z-index`와 같은 스타일이 있을 때 부모 엘리먼트에 의존적이지 않아야하는 경우 유용합니다. + * + * @example + * ```html title="html" + *
+ * ``` + * + * ```tsx title="tsx" + * function SampleComponent() { + * + * return ( + * + *
Render component
+ * + * ); + * } + * ``` + * + * @param elementId - 부모 엘리먼트가 아닌 다른 DOM 트리의 elementId값 + */ function GlobalPortal({ elementId = 'portal-container', children }: PropsWithChildren) { const isMounted = useIsMounted(); diff --git a/packages/react/src/hooks/useBoolean.ts b/packages/react/src/hooks/useBoolean.ts index 7ef61797..f59d0821 100644 --- a/packages/react/src/hooks/useBoolean.ts +++ b/packages/react/src/hooks/useBoolean.ts @@ -1,5 +1,15 @@ import { useCallback, useState } from 'react'; +/** + * @description `boolean` 타입으로만 반환하는 `useState`를 쉽게 사용할 수 있는 hook 입니다. + * + * @example + * ```ts + * const [isOpen, openModal, closeModal, toggleModal] = useBoolean(); + * ``` + * + * @param initialValue - 초기값을 세팅 + */ function useBoolean( initialValue = false, ): [boolean, () => void, () => void, (nextValue?: boolean) => void] { diff --git a/packages/react/src/hooks/useIsMounted.ts b/packages/react/src/hooks/useIsMounted.ts index 204e11f2..0706a9eb 100644 --- a/packages/react/src/hooks/useIsMounted.ts +++ b/packages/react/src/hooks/useIsMounted.ts @@ -1,6 +1,6 @@ import { useEffect, useState } from 'react'; /** - * @description Component의 mount 여부를 확인하는 hook 입니다. + * @description Component의 mount 여부를 확인하는 hook 입니다.
* SSR 환경에서 실제로 컴포넌트가 브라우저에서 mount 된 이후에 어떤 동작을 실행하기 위해서 사용합니다. * * @example diff --git a/packages/react/src/hooks/useResizeViewportHeight.ts b/packages/react/src/hooks/useResizeViewportHeight.ts index a59a1013..d00dd45b 100644 --- a/packages/react/src/hooks/useResizeViewportHeight.ts +++ b/packages/react/src/hooks/useResizeViewportHeight.ts @@ -1,5 +1,19 @@ import { useEffect } from 'react'; +/** + * @description 스크롤을 포함한 window의 높이를 가져와 window 크기를 resize해줍니다.
+ * 모바일 환경의 웹뷰에서 디바이스 및 브라우저 환경에 따라 크기가 달라져 불필요한 스크롤이 생길 수 있습니다. 이때 이 hook을 사용하면 유용합니다. + * + * @example + * ```tsx + * function SampleComponent() { + * useResizeViewportHeight(); + * + * return
sample text
+ * } + * + * ``` + */ function useResizeViewportHeight() { const handleResize = () => { const vh = window.innerHeight * 0.01; @@ -9,6 +23,7 @@ function useResizeViewportHeight() { useEffect(() => { handleResize(); + window.addEventListener('resize', handleResize); return () => window.removeEventListener('resize', handleResize);