Merge pull request #29 from mbti-nf-team/docs/update-ts-docs

mbti-nf-team · Jul 24, 2023 · b5e7dcf · b5e7dcf
2 parents e8d380c + d4e95ed
commit b5e7dcf
Show file tree

Hide file tree

Showing 9 changed files with 102 additions and 17 deletions.
diff --git a/.changeset/hungry-avocados-walk.md b/.changeset/hungry-avocados-walk.md
@@ -0,0 +1,5 @@
+---
+"docs": major
+---
+
+docs: @nft-team/frontend-library 초기 문서 작성
diff --git a/.changeset/polite-geckos-shop.md b/.changeset/polite-geckos-shop.md
@@ -0,0 +1,5 @@
+---
+"@nft-team/react": patch
+---
+
+docs: useIsMounted, ClientOnly ts-docs 작성
diff --git a/apps/docs/docs/api/modules/nft_team_core.md b/apps/docs/docs/api/modules/nft_team_core.md
@@ -30,7 +30,7 @@ custom_edit_url: null
 
 #### Defined in
 
-[utils.ts:44](https://github.com/mbti-nf-team/frontend-libraries/blob/47d5b08/packages/core/src/utils.ts#L44)
+[utils.ts:44](https://github.com/mbti-nf-team/frontend-libraries/blob/e8d380c/packages/core/src/utils.ts#L44)
 
 ___
 
@@ -50,7 +50,7 @@ ___
 
 #### Defined in
 
-[utils.ts:26](https://github.com/mbti-nf-team/frontend-libraries/blob/47d5b08/packages/core/src/utils.ts#L26)
+[utils.ts:26](https://github.com/mbti-nf-team/frontend-libraries/blob/e8d380c/packages/core/src/utils.ts#L26)
 
 ___
 
@@ -71,7 +71,7 @@ ___
 
 #### Defined in
 
-[utils.ts:34](https://github.com/mbti-nf-team/frontend-libraries/blob/47d5b08/packages/core/src/utils.ts#L34)
+[utils.ts:34](https://github.com/mbti-nf-team/frontend-libraries/blob/e8d380c/packages/core/src/utils.ts#L34)
 
 ___
 
@@ -91,7 +91,7 @@ ___
 
 #### Defined in
 
-[utils.ts:64](https://github.com/mbti-nf-team/frontend-libraries/blob/47d5b08/packages/core/src/utils.ts#L64)
+[utils.ts:64](https://github.com/mbti-nf-team/frontend-libraries/blob/e8d380c/packages/core/src/utils.ts#L64)
 
 ___
 
@@ -117,7 +117,7 @@ ___
 
 #### Defined in
 
-[utils.ts:52](https://github.com/mbti-nf-team/frontend-libraries/blob/47d5b08/packages/core/src/utils.ts#L52)
+[utils.ts:52](https://github.com/mbti-nf-team/frontend-libraries/blob/e8d380c/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/47d5b08/packages/core/src/utils.ts#L14)
+[utils.ts:14](https://github.com/mbti-nf-team/frontend-libraries/blob/e8d380c/packages/core/src/utils.ts#L14)
 
 ___
 
@@ -173,4 +173,4 @@ ___
 
 #### Defined in
 
-[utils.ts:36](https://github.com/mbti-nf-team/frontend-libraries/blob/47d5b08/packages/core/src/utils.ts#L36)
+[utils.ts:36](https://github.com/mbti-nf-team/frontend-libraries/blob/e8d380c/packages/core/src/utils.ts#L36)
diff --git a/apps/docs/docs/api/modules/nft_team_react.md b/apps/docs/docs/api/modules/nft_team_react.md
@@ -12,6 +12,26 @@ custom_edit_url: null
 
 ▸ **ClientOnly**(`«destructured»`): `ReactElement` \| ``null``
 
+**`Description`**
+
+Component의 mount 여부를 확인하여 mount가 된 경우, Component를 render해줍니다.
+mount되지 않은 경우에는 Component를 render해주지 않습니다.
+
+SSR 환경에서 실제로 컴포넌트가 브라우저에서 mount 된 이후에만 해당 Component를 보여주고 싶을때 사용합니다.
+(SSR 환경에서 Hydration 오류로 인해서 에러가 발생하는 문제를 해결합니다.)
+
+**`Example`**
+
+```tsx
+function ClintOnlyComponent() {
+ return (
+   <ClientOnly>
+     <div>Render only client environment</div>
+   </ClientOnly>
+ );
+}
+```
+
 #### Parameters
 
 | Name | Type |
@@ -25,7 +45,7 @@ custom_edit_url: null
 
 #### Defined in
 
-[packages/react/src/components/ClientOnly.tsx:5](https://github.com/mbti-nf-team/frontend-libraries/blob/47d5b08/packages/react/src/components/ClientOnly.tsx#L5)
+[packages/react/src/components/ClientOnly.tsx:23](https://github.com/mbti-nf-team/frontend-libraries/blob/e8d380c/packages/react/src/components/ClientOnly.tsx#L23)
 
 ___
 
@@ -45,7 +65,7 @@ ___
 
 #### Defined in
 
-[packages/react/src/components/DelayRenderComponent.tsx:11](https://github.com/mbti-nf-team/frontend-libraries/blob/47d5b08/packages/react/src/components/DelayRenderComponent.tsx#L11)
+[packages/react/src/components/DelayRenderComponent.tsx:11](https://github.com/mbti-nf-team/frontend-libraries/blob/e8d380c/packages/react/src/components/DelayRenderComponent.tsx#L11)
 
 ___
 
@@ -65,7 +85,7 @@ ___
 
 #### Defined in
 
-[packages/react/src/components/GlobalPortal.tsx:10](https://github.com/mbti-nf-team/frontend-libraries/blob/47d5b08/packages/react/src/components/GlobalPortal.tsx#L10)
+[packages/react/src/components/GlobalPortal.tsx:10](https://github.com/mbti-nf-team/frontend-libraries/blob/e8d380c/packages/react/src/components/GlobalPortal.tsx#L10)
 
 ___
 
@@ -93,7 +113,7 @@ ___
 
 #### Defined in
 
-[packages/react/src/hooks/useActionKeyEvent.ts:6](https://github.com/mbti-nf-team/frontend-libraries/blob/47d5b08/packages/react/src/hooks/useActionKeyEvent.ts#L6)
+[packages/react/src/hooks/useActionKeyEvent.ts:6](https://github.com/mbti-nf-team/frontend-libraries/blob/e8d380c/packages/react/src/hooks/useActionKeyEvent.ts#L6)
 
 ___
 
@@ -113,7 +133,7 @@ ___
 
 #### Defined in
 
-[packages/react/src/hooks/useBoolean.ts:3](https://github.com/mbti-nf-team/frontend-libraries/blob/47d5b08/packages/react/src/hooks/useBoolean.ts#L3)
+[packages/react/src/hooks/useBoolean.ts:3](https://github.com/mbti-nf-team/frontend-libraries/blob/e8d380c/packages/react/src/hooks/useBoolean.ts#L3)
 
 ___
 
@@ -140,21 +160,39 @@ ___
 
 #### Defined in
 
-[packages/react/src/hooks/useDebounce.ts:3](https://github.com/mbti-nf-team/frontend-libraries/blob/47d5b08/packages/react/src/hooks/useDebounce.ts#L3)
+[packages/react/src/hooks/useDebounce.ts:3](https://github.com/mbti-nf-team/frontend-libraries/blob/e8d380c/packages/react/src/hooks/useDebounce.ts#L3)
 
 ___
 
 ### useIsMounted
 
 ▸ **useIsMounted**(): `boolean`
 
+**`Description`**
+
+Component의 mount 여부를 확인하는 hook 입니다.
+SSR 환경에서 실제로 컴포넌트가 브라우저에서 mount 된 이후에 어떤 동작을 실행하기 위해서 사용합니다.
+
+**`Example`**
+
+```ts
+const isMounted = useIsMounted();
+
+useEffect(() => {
+  if (isMounted) {
+    return;
+  }
+}, [isMounted]);
+
+```
+
 #### Returns
 
 `boolean`
 
 #### Defined in
 
-[packages/react/src/hooks/useIsMounted.ts:3](https://github.com/mbti-nf-team/frontend-libraries/blob/47d5b08/packages/react/src/hooks/useIsMounted.ts#L3)
+[packages/react/src/hooks/useIsMounted.ts:18](https://github.com/mbti-nf-team/frontend-libraries/blob/e8d380c/packages/react/src/hooks/useIsMounted.ts#L18)
 
 ___
 
@@ -199,7 +237,7 @@ ___
 
 #### Defined in
 
-[packages/react/src/hooks/useResizeViewportHeight.ts:3](https://github.com/mbti-nf-team/frontend-libraries/blob/47d5b08/packages/react/src/hooks/useResizeViewportHeight.ts#L3)
+[packages/react/src/hooks/useResizeViewportHeight.ts:3](https://github.com/mbti-nf-team/frontend-libraries/blob/e8d380c/packages/react/src/hooks/useResizeViewportHeight.ts#L3)
 
 ___
 
@@ -220,4 +258,4 @@ ___
 
 #### Defined in
 
-[packages/react/src/hooks/useTimeout.ts:5](https://github.com/mbti-nf-team/frontend-libraries/blob/47d5b08/packages/react/src/hooks/useTimeout.ts#L5)
+[packages/react/src/hooks/useTimeout.ts:5](https://github.com/mbti-nf-team/frontend-libraries/blob/e8d380c/packages/react/src/hooks/useTimeout.ts#L5)
diff --git a/packages/react/.eslintrc.js b/packages/react/.eslintrc.js
@@ -12,6 +12,7 @@ module.exports = {
     'coverage/',
   ],
   extends: ['@nft-team/eslint-config'],
+  plugins: ['eslint-plugin-tsdoc'],
   overrides: [
     {
       files: ['*.ts', '*.tsx'],
@@ -33,5 +34,6 @@ module.exports = {
     'import/prefer-default-export': 'off',
     'import/no-extraneous-dependencies': 'off',
     'react/require-default-props': 'off',
+    'tsdoc/syntax': 'warn',
   },
 };
diff --git a/packages/react/package.json b/packages/react/package.json
@@ -38,6 +38,7 @@
     "@types/react-test-renderer": "^18",
     "@types/testing-library__jest-dom": "^5.14.6",
     "eslint": "^8.44.0",
+    "eslint-plugin-tsdoc": "^0.2.17",
     "given2": "^2.1.7",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.5.0",

diff --git a/packages/react/src/components/ClientOnly.tsx b/packages/react/src/components/ClientOnly.tsx
@@ -2,6 +2,24 @@ import { PropsWithChildren, ReactElement } from 'react';
 
 import useIsMounted from '../hooks/useIsMounted';
 
+/**
+ * @description Component의 mount 여부를 확인하여 mount가 된 경우, Component를 render해줍니다.
+ * mount되지 않은 경우에는 Component를 render해주지 않습니다.
+ *
+ * SSR 환경에서 실제로 컴포넌트가 브라우저에서 mount 된 이후에만 해당 Component를 보여주고 싶을때 사용합니다.
+ * (SSR 환경에서 Hydration 오류로 인해서 에러가 발생하는 문제를 해결합니다.)
+ *
+ * @example
+ * ```tsx
+ * function ClintOnlyComponent() {
+ *  return (
+ *    <ClientOnly>
+ *      <div>Render only client environment</div>
+ *    </ClientOnly>
+ *  );
+ * }
+ * ```
+ */
 function ClientOnly({ children }: PropsWithChildren): ReactElement | null {
   const isMounted = useIsMounted();
 

diff --git a/packages/react/src/hooks/useIsMounted.ts b/packages/react/src/hooks/useIsMounted.ts
@@ -1,5 +1,20 @@
 import { useEffect, useState } from 'react';
-
+/**
+ * @description Component의 mount 여부를 확인하는 hook 입니다.
+ * SSR 환경에서 실제로 컴포넌트가 브라우저에서 mount 된 이후에 어떤 동작을 실행하기 위해서 사용합니다.
+ *
+ * @example
+ * ```ts
+ * const isMounted = useIsMounted();
+ *
+ * useEffect(() => {
+ *   if (isMounted) {
+ *     return;
+ *   }
+ * }, [isMounted]);
+ *
+ * ```
+ */
 function useIsMounted() {
   const [mounted, setMounted] = useState<boolean>(false);
 

diff --git a/yarn.lock b/yarn.lock
@@ -3303,6 +3303,7 @@ __metadata:
     "@types/react-test-renderer": ^18
     "@types/testing-library__jest-dom": ^5.14.6
     eslint: ^8.44.0
+    eslint-plugin-tsdoc: ^0.2.17
     given2: ^2.1.7
     identity-obj-proxy: ^3.0.0
     jest: ^29.5.0