Merge pull request #31 from mbti-nf-team/docs/react-tsdocs

mbti-nf-team · Jul 30, 2023 · 5ad572c · 5ad572c
2 parents 27f22a1 + c4a0fa8
commit 5ad572c
Show file tree

Hide file tree

Showing 11 changed files with 136 additions and 33 deletions.
diff --git a/.changeset/ten-shrimps-complain.md 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
@@ -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
@@ -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
@@ -15,8 +15,7 @@ custom_edit_url: null
 **`Description`**
 
 Component의 mount 여부를 확인하여 mount가 된 경우, Component를 render해줍니다.
-mount되지 않은 경우에는 Component를 render해주지 않습니다.
-
+mount되지 않은 경우에는 Component를 render해주지 않습니다. <br />
 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,24 +64,48 @@ ___
 
 #### 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`를 이용해 컴포넌트를 렌더링해줍니다. <br />
+공통적인 UI(모달, 팝업, 알림 등)나 부모 컴포넌트에
+`overflow: hidden`, `z-index`와 같은 스타일이 있을 때 부모 엘리먼트에 의존적이지 않아야하는 경우 유용합니다.
+
+**`Example`**
+
+```html title="html"
+<div id="portal-container" />
+```
+
+```tsx title="tsx"
+function SampleComponent() {
+
+ return (
+   <GlobalPortal elementId="portal-container">
+     <div>Render component</div>
+   </GlobalPortal>
+ );
+}
+```
 
 #### Parameters
 
-| Name | Type |
-| :------ | :------ |
-| `«destructured»` | `PropsWithChildren`<`Props`\> |
+| Name | Type | Description |
+| :------ | :------ | :------ |
+| `elementId` | `PropsWithChildren`<`Props`\> | 부모 엘리먼트가 아닌 다른 DOM 트리의 elementId값 |
 
 #### Returns
 
 ``null`` \| `ReactPortal`
 
 #### 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
@@ -32,27 +32,37 @@ 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)
 
 ___
 
 ### useBoolean
 
 ▸ **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
 
 [`boolean`, () => `void`, () => `void`, (`nextValue?`: `boolean`) => `void`]
 
 #### 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 입니다. <br />
 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,21 +173,37 @@ ___
 
 #### 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)
 
 ___
 
 ### useResizeViewportHeight
 
 ▸ **useResizeViewportHeight**(): `void`
 
+**`Description`**
+
+스크롤을 포함한 window의 높이를 가져와 window 크기를 resize해줍니다. <br />
+모바일 환경의 웹뷰에서 디바이스 및 브라우저 환경에 따라 크기가 달라져 불필요한 스크롤이 생길 수 있습니다. 이때 이 hook을 사용하면 유용합니다.
+
+**`Example`**
+
+```tsx
+function SampleComponent() {
+  useResizeViewportHeight();
+
+  return <div>sample text</div>
+}
+
+```
+
 #### 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
@@ -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
@@ -4,8 +4,7 @@ import useIsMounted from '../hooks/useIsMounted';
 
 /**
  * @description Component의 mount 여부를 확인하여 mount가 된 경우, Component를 render해줍니다.
- * mount되지 않은 경우에는 Component를 render해주지 않습니다.
- *
+ * mount되지 않은 경우에는 Component를 render해주지 않습니다. <br />
  * SSR 환경에서 실제로 컴포넌트가 브라우저에서 mount 된 이후에만 해당 Component를 보여주고 싶을때 사용합니다.
  * (SSR 환경에서 Hydration 오류로 인해서 에러가 발생하는 문제를 해결합니다.)
  *

diff --git 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`를 이용해 컴포넌트를 렌더링해줍니다. <br />
+ * 공통적인 UI(모달, 팝업, 알림 등)나 부모 컴포넌트에
+ * `overflow: hidden`, `z-index`와 같은 스타일이 있을 때 부모 엘리먼트에 의존적이지 않아야하는 경우 유용합니다.
+ *
+ * @example
+ * ```html title="html"
+ * <div id="portal-container" />
+ * ```
+ *
+ * ```tsx title="tsx"
+ * function SampleComponent() {
+ *
+ *  return (
+ *    <GlobalPortal elementId="portal-container">
+ *      <div>Render component</div>
+ *    </GlobalPortal>
+ *  );
+ * }
+ * ```
+ *
+ * @param elementId - 부모 엘리먼트가 아닌 다른 DOM 트리의 elementId값
+ */
 function GlobalPortal({ elementId = 'portal-container', children }: PropsWithChildren<Props>) {
   const isMounted = useIsMounted();
 

diff --git 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
@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
 /**
- * @description Component의 mount 여부를 확인하는 hook 입니다.
+ * @description Component의 mount 여부를 확인하는 hook 입니다. <br />
  * SSR 환경에서 실제로 컴포넌트가 브라우저에서 mount 된 이후에 어떤 동작을 실행하기 위해서 사용합니다.
  *
  * @example

diff --git 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해줍니다. <br />
+ * 모바일 환경의 웹뷰에서 디바이스 및 브라우저 환경에 따라 크기가 달라져 불필요한 스크롤이 생길 수 있습니다. 이때 이 hook을 사용하면 유용합니다.
+ *
+ * @example
+ * ```tsx
+ * function SampleComponent() {
+ *   useResizeViewportHeight();
+ *
+ *   return <div>sample text</div>
+ * }
+ *
+ * ```
+ */
 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);