docs: ts-doc 수정

modern-agile-team · Nov 27, 2024 · a24a51a · a24a51a
1 parent c5f1a19
commit a24a51a
Show file tree

Hide file tree

Showing 6 changed files with 24 additions and 16 deletions.
diff --git a/docs/docs/react/components/AspectRatio.mdx b/docs/docs/react/components/AspectRatio.mdx
@@ -3,7 +3,7 @@ import { AspectRatio } from '@modern-kit/react';
 
 # AspectRatio
 
-주어진  **[aspect-ratio](https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio)** 비율을 맞춰주기 위해 선언적으로 사용하는 유틸 컴포넌트입니다.
+주어진 **[aspect-ratio](https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio)** 비율을 맞춰주기 위해 선언적으로 사용하는 유틸 컴포넌트입니다.
 
 미리 영역을 확보하여 `Layout Shift`를 방지하는데 효과적입니다.
 
@@ -13,7 +13,7 @@ import { AspectRatio } from '@modern-kit/react';
 - `asChild` 속성이 `true`라면 **[Slot](https://modern-agile-team.github.io/modern-kit/docs/react/components/Slot)** 을 통해 자식 요소를 그대로 렌더링하고, 자식 요소에 `aspect-ratio` 속성을 적용해 영역을 확보합니다.
   - Slot은 자식으로 `단일 요소`만 허용됩니다.
   - Slot은 자식으로 컴포넌트가 올 경우 `forwardRef`, `props`를 허용해야 합니다. 허용하지 않으면 정상적으로 동작하지 않습니다.
-  - 자세한 내용은 **[Slot](https://modern-agile-team.github.io/modern-kit/docs/react/components/Slot)** 문서를 참고해주세요.
+  - `asChild` 속성을 사용 할 경우 **[Slot](https://modern-agile-team.github.io/modern-kit/docs/react/components/Slot)** 문서를 참고해주세요.
 
 <br />
 

diff --git a/docs/docs/react/components/InView.mdx b/docs/docs/react/components/InView.mdx
@@ -4,17 +4,18 @@ import { InView } from '@modern-kit/react';
 
 `InView`는 `IntersectionObserver`를 선언적으로 활용 할 수 있는 컴포넌트입니다.
 
+- `@modern-kit/react`의 **[useIntersectionObserver](https://modern-agile-team.github.io/modern-kit/docs/react/hooks/useIntersectionObserver)** 훅을 사용하여 구현되었습니다.
+
 관찰 대상이 `Viewport`에 노출될 때(`onIntersectStart`) 혹은 나갈 때(`onIntersectEnd`) 특정 action 함수를 호출 할 수 있는 컴포넌트입니다.
 
 다형성을 지원하기 때문에 `as`, `asChild` 속성을 지원합니다. 
 
 - 기본적으로 `div` 태그로 자식 요소를 감싸서 렌더링하며, `as` 속성을 통해 감싸는 요소를 특정 요소로 변경해 렌더링할 수 있습니다. 이때 `해당 요소가 관찰 대상`입니다.
-- `asChild` 속성이 true라면 **[Slot](https://modern-agile-team.github.io/modern-kit/docs/react/components/Slot)** 을 통해 자식 요소를 그대로 렌더링하고, `자식 요소를 관찰 대상으로 설정`할 수 있습니다.
+- `asChild` 속성이 true라면 **[Slot](https://modern-agile-team.github.io/modern-kit/docs/react/components/Slot)** 을 통해 래퍼 요소 없이 자식 요소를 그대로 렌더링하고, `자식 요소를 관찰 대상으로 설정`할 수 있습니다.
   - Slot의 자식은 `단일 요소`만 허용됩니다.
   - Slot의 자식으로 컴포넌트가 올 경우 `forwardRef`, `props`를 허용해야 합니다.
-  - 자세한 내용은 **[Slot](https://modern-agile-team.github.io/modern-kit/docs/react/components/Slot)** 문서를 참고해주세요.
+  - `asChild` 속성을 사용 할 경우 **[Slot](https://modern-agile-team.github.io/modern-kit/docs/react/components/Slot)** 문서를 참고해주세요.
 
-`@modern-kit/react`의 **[useIntersectionObserver](https://modern-agile-team.github.io/modern-kit/docs/react/hooks/useIntersectionObserver)** 훅을 사용하여 구현되었습니다.
 
 <br />
 

diff --git a/docs/docs/react/components/Slot.mdx b/docs/docs/react/components/Slot.mdx
@@ -10,7 +10,7 @@ Slot은 부모 컴포넌트의 기능을 자식 컴포넌트에 전달하는 합
 - 자식 컴포넌트의 구현을 변경하지 않고도 새로운 기능을 추가할 수 있습니다
 - 컴포넌트 간의 결합도를 낮추고 재사용성을 높일 수 있습니다
 
-예를 들어 **[InView](https://modern-agile-team.github.io/modern-kit/docs/react/components/InView)** 나 **[AspectRatio](https://modern-agile-team.github.io/modern-kit/docs/react/components/AspectRatio)** 와 같은 컴포넌트에서 `asChild` prop과 함께 사용되어, 래퍼 요소 없이 자식 컴포넌트에 직접 기능을 주입할 수 있습니다.
+예를 들어 **[InView](https://modern-agile-team.github.io/modern-kit/docs/react/components/InView)** 나 **[AspectRatio](https://modern-agile-team.github.io/modern-kit/docs/react/components/AspectRatio)** 와 같은 컴포넌트에서 `asChild` prop을 사용해서, 래퍼 요소 없이 자식 컴포넌트에 직접 기능을 주입할 수 있습니다.
 
 Slot은 아래와 같은 특징이 있습니다.
 1. 자식 요소로 `단일 요소`만 허용됩니다.
@@ -38,6 +38,7 @@ Slot은 아래와 같은 특징이 있습니다.
 ```
 
 2. 자식 요소로 컴포넌트가 온다면 해당 컴포넌트는 필수적으로 `forwardRef`, `props`를 허용해야 합니다. 허용하지 않으면 기능이 정상적으로 동작하지 않습니다.
+- **[radix-ui#your-component-must-spread-props](https://www.radix-ui.com/primitives/docs/guides/composition#your-component-must-spread-props)**
 - **[radix-ui#your-component-must-forward-ref](https://www.radix-ui.com/primitives/docs/guides/composition#your-component-must-forward-ref)**
 ```tsx title="typescript"
 const MyButton = React.forwardRef((props, forwardedRef) => (

diff --git a/packages/react/src/components/AspectRatio/index.tsx b/packages/react/src/components/AspectRatio/index.tsx
@@ -22,6 +22,7 @@ interface AspectRatioProps {
  *
  * - 기본적으로 `div` 태그로 자식 요소를 감싸서 렌더링하며, `as` 속성을 통해 감싸는 요소를 특정 요소로 변경해 렌더링할 수 있습니다. 이때, 해당 요소에 `aspect-ratio` 속성을 적용해 영역을 확보합니다.
  * - `asChild` 속성이 `true`라면 `Slot`을 통해 자식 요소를 그대로 렌더링하고, 자식 요소에 `aspect-ratio` 속성을 적용해 영역을 확보합니다.
+ * - `asChild` 속성을 사용 할 경우 아래 링크를 참고하세요.
  *
  * @see https://modern-agile-team.github.io/modern-kit/docs/react/components/Slot
  *
@@ -31,26 +32,28 @@ interface AspectRatioProps {
  * @param {CSSProperties} props.style - 추가적인 스타일을 지정합니다.
  * @param {string} props.className - 추가적인 클래스를 지정합니다.
  * @param {string} props.as - 감싸는 요소를 지정합니다. 기본 값은 `div`입니다. 해당 요소에 `aspect-ratio` 속성을 적용해 영역을 확보합니다.
- * @param {boolean} props.asChild - 자식 요소를 그대로 렌더링할지 여부를 지정합니다. `true`일 경우 자식 요소가 그대로 렌더링되며, 자식 요소에 `aspect-ratio` 속성이 적용됩니다.
- *
+ * @param {boolean} props.asChild - `true`일 경우 `Slot`을 통해 자식 요소를 그대로 렌더링하고, 자식 요소에 `aspect-ratio` 속성을 적용해 영역을 확보합니다.
  * @returns {JSX.Element} 주어진 aspect-ratio 비율에 맞춰 스타일이 적용된 자식 요소를 반환합니다.
  *
  * @example
  * ```tsx
+ * // Default
  * <AspectRatio ratio={16 / 9}>
  *  <img src={imgUrl} alt="image" />
  * </AspectRatio>
  * ```
  *
  * @example
  * ```tsx
+ * // as article
  * <AspectRatio ratio={16 / 9} as="article">
  *  <img src={imgUrl} alt="image" />
  * </AspectRatio>
  * ```
  *
  * @example
  * ```tsx
+ * // asChild
  * <AspectRatio ratio={16 / 9} asChild>
  *  <img src={imgUrl} alt="image" />
  * </AspectRatio>

diff --git a/packages/react/src/components/InView/index.tsx b/packages/react/src/components/InView/index.tsx
@@ -24,15 +24,16 @@ interface InViewProps extends UseIntersectionObserverProps {
  * 다형성을 지원하기 때문에 `as`, `asChild` 속성을 지원합니다.
  *
  * - 기본적으로 `div` 태그로 자식 요소를 감싸서 렌더링하며, `as` 속성을 통해 감싸는 요소를 특정 요소로 변경해 렌더링할 수 있습니다. 이때 해당 요소가 관찰 대상입니다.
- * - `asChild` 속성이 `true`라면 `Slot`을 통해 자식 요소를 그대로 렌더링하고, 자식 요소를 관찰 대상으로 설정할 수 있습니다.
+ * - `asChild` 속성이 `true`라면 `Slot`을 통해 래퍼 요소 없이 자식 요소를 그대로 렌더링하고, 자식 요소를 관찰 대상으로 설정할 수 있습니다.
+ * - `asChild` 속성을 사용 할 경우 아래 링크를 참고하세요.
  *
  * @see https://modern-agile-team.github.io/modern-kit/docs/react/components/Slot
  *
  *
  * @param {InViewProps} props - 컴포넌트에 전달되는 속성들입니다.
  * @param {React.ReactNode} props.children - 관찰할 자식 요소입니다.
- * @param {string} props.as - 감싸는 요소를 특정 요소로 변경합니다. 기본 값은 `div`입니다. 해당 요소가 관찰 대상입니다.
- * @param {boolean} props.asChild - 자식 요소를 그대로 렌더링할지 여부를 나타냅니다. `true`일 경우 자식 요소가 그대로 렌더링되며, 자식 요소가 관찰 대상입니다.
+ * @param {string} props.as - 관찰할 요소의 타입입니다. 기본값은 `div`입니다.
+ * @param {boolean} [props.asChild=false] - 자식 요소를 래퍼 요소 없이 렌더링하고, 관찰 대상으로 설정할지 여부입니다. `true`일 경우 `Slot` 컴포넌트를 통해 자식 요소에 직접 props를 전달합니다.
  * @param {(entry: IntersectionObserverEntry) => void} props.onIntersectStart - 타겟 요소가 viewport 내에 들어갈 때 호출되는 콜백 함수입니다.
  * @param {(entry: IntersectionObserverEntry) => void} props.onIntersectEnd - 타겟 요소가 viewport에서 나갈 때 호출되는 콜백 함수입니다.
  * @param {number | number[]} props.threshold - 관찰을 시작할 viewport의 가시성 비율입니다.
@@ -45,15 +46,15 @@ interface InViewProps extends UseIntersectionObserverProps {
  *
  * @example
  * ```tsx
- * // 기본적으로 div로 감싸지며, 해당 div를 관찰 대상으로 설정합니다.
+ * // 기본적으로 `div`로 감싸지며, 해당 `div`를 관찰 대상으로 설정합니다.
  * <InView onIntersectStart={onIntersectStart} onIntersectEnd={onIntersectEnd}>
- *   <div>Content1</div>
+ *   <div>Contents</div>
  * </InView>
  * ```
  *
  * @example
  * ```tsx
- * // as 속성을 통해 특정 요소로 렌더링할 수 있으며, 해당 요소가 관찰 대상입니다.
+ * // `as` 속성을 통해 감싸는 요소를 특정 요소로 변경해 렌더링할 수 있습니다. 해당 요소를 관찰 대상으로 설정합니다.
  * <InView as="ul" onIntersectStart={onIntersectStart} onIntersectEnd={onIntersectEnd}>
  *   <li>List Item1</li>
  *   <li>List Item2</li>
@@ -62,9 +63,9 @@ interface InViewProps extends UseIntersectionObserverProps {
  *
  * @example
  * ```tsx
- * // asChild 속성을 통해 자식 요소를 그대로 렌더링하고, 자식 요소를 관찰 대상으로 설정할 수 있습니다.
+ * // `asChild`가 `true`라면 `Slot`을 통해 래퍼 요소 없이 자식 요소를 그대로 렌더링하고, 자식 요소를 관찰 대상으로 설정합니다.
  * <InView asChild onIntersectStart={handleIntersectStart} onIntersectEnd={handleIntersectEnd}>
- *   <div>Box1</div>
+ *   <div>Contents</div>
  * </InView>
  * ```
  */

diff --git a/packages/react/src/components/Slot/index.tsx b/packages/react/src/components/Slot/index.tsx
@@ -17,7 +17,9 @@ export type SlotProps = React.PropsWithChildren<
  * Slot은 아래와 같은 특징이 있습니다.
  * - 자식 요소로 `단일 요소`만 허용됩니다.
  * - 자식 요소로 컴포넌트가 온다면 해당 컴포넌트는 필수적으로 `forwardRef`, `props`를 허용해야 합니다. 허용하지 않으면 기능이 정상적으로 동작하지 않습니다.
+ *  - Slot을 사용 할 경우 아래 링크를 참고하세요.
  *
+ * @see https://www.radix-ui.com/primitives/docs/guides/composition#your-component-must-spread-props
  * @see https://www.radix-ui.com/primitives/docs/guides/composition#your-component-must-forward-ref
  *
  * @example