docs: inView, AspectRation 컴포넌트 문서 수정 (#611)

modern-agile-team · Nov 28, 2024 · a9d8e16 · a9d8e16
1 parent e03ff93
commit a9d8e16
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 15 deletions.
diff --git a/docs/docs/react/components/AspectRatio.mdx b/docs/docs/react/components/AspectRatio.mdx
@@ -7,9 +7,13 @@ import { AspectRatio } from '@modern-kit/react';
 
 미리 영역을 확보하여 `Layout Shift`를 방지하는데 효과적입니다.
 
-다형성을 지원하기 때문에 `as`, `asChild` 속성을 지원합니다. 
+### 다형성
+`AspectRatio` 컴포넌트는 `as`, `asChild` 속성을 모두 지원합니다.
 
+### as
 - 기본적으로 `div` 태그로 자식 요소를 감싸서 렌더링하며, `as` 속성을 통해 감싸는 요소를 특정 요소로 변경해 렌더링할 수 있습니다. 해당 요소에 `aspect-ratio` 속성을 적용해 영역을 확보합니다.
+
+### asChild
 - `asChild` 속성이 `true`라면 **[Slot](https://modern-agile-team.github.io/modern-kit/docs/react/components/Slot)** 을 통해 자식 요소를 그대로 렌더링하고, 자식 요소에 `aspect-ratio` 속성을 적용해 영역을 확보합니다.
   - Slot은 자식으로 `단일 요소`만 허용됩니다.
   - Slot은 자식으로 컴포넌트가 올 경우 `forwardRef`, `props`를 허용해야 합니다. 허용하지 않으면 정상적으로 동작하지 않습니다.

diff --git a/docs/docs/react/components/InView.mdx b/docs/docs/react/components/InView.mdx
@@ -8,12 +8,16 @@ import { InView } from '@modern-kit/react';
 
 관찰 대상이 `Viewport`에 노출될 때(`onIntersectStart`) 혹은 나갈 때(`onIntersectEnd`) 특정 action 함수를 호출 할 수 있는 컴포넌트입니다.
 
-다형성을 지원하기 때문에 `as`, `asChild` 속성을 지원합니다. 
+### 다형성
+`InView` 컴포넌트는 `as`, `asChild` 속성을 모두 지원합니다.
 
-- 기본적으로 `div` 태그로 자식 요소를 감싸서 렌더링하며, `as` 속성을 통해 감싸는 요소를 특정 요소로 변경해 렌더링할 수 있습니다. 이때 `해당 요소가 관찰 대상`입니다.
-- `asChild` 속성이 true라면 **[Slot](https://modern-agile-team.github.io/modern-kit/docs/react/components/Slot)** 을 통해 래퍼 요소 없이 자식 요소를 그대로 렌더링하고, `자식 요소를 관찰 대상으로 설정`할 수 있습니다.
+### as
+- 기본적으로 `div` 태그로 자식 요소를 감싸서 렌더링하며, `as` 속성을 통해 감싸는 요소를 특정 요소로 변경해 렌더링할 수 있습니다. 이때 해당 요소가 `IntersectionObserver`의 관찰 대상이 됩니다.
+
+### asChild
+- `asChild` 속성이 `true`라면 **[Slot](https://modern-agile-team.github.io/modern-kit/docs/react/components/Slot)** 을 통해 래퍼 요소 없이 자식 요소를 그대로 렌더링하고, 해당 자식 요소가 `IntersectionObserver`의 관찰 대상이 됩니다.
   - Slot의 자식은 `단일 요소`만 허용됩니다.
-  - Slot의 자식으로 컴포넌트가 올 경우 `forwardRef`, `props`를 허용해야 합니다.
+  - Slot은 자식으로 컴포넌트가 올 경우 `forwardRef`, `props`를 허용해야 합니다. 허용하지 않으면 정상적으로 동작하지 않습니다.
   - `asChild` 속성을 사용 할 경우 **[Slot](https://modern-agile-team.github.io/modern-kit/docs/react/components/Slot)** 문서를 참고해주세요.
 
 
@@ -35,7 +39,7 @@ const InView: PolyForwardComponent<"div", InViewProps, React.ElementType>
 
 ## Usage
 ### Default
-- 기본적으로 `div`로 감싸지며, 해당 `div`를 관찰 대상으로 설정합니다.
+- 기본적으로 `div`로 감싸지며, 해당 `div`가 `IntersectionObserver`의 관찰 대상이 됩니다.
 - 해당 `div`가 viewport에 노출되거나 숨겨질 때 `onIntersectStart/onIntersectEnd` 콜백 함수를 호출합니다.
 ```tsx title="typescript"
 import { InView } from '@modern-kit/react';
@@ -53,7 +57,7 @@ const Example = () => {
 ```
 
 ### as
-- `as` 속성을 통해 특정 요소로 렌더링할 수 있으며, 해당 요소가 관찰 대상입니다.
+- `as` 속성을 통해 특정 요소로 렌더링할 수 있으며, 해당 요소가 `IntersectionObserver`의 관찰 대상이 됩니다.
 - 해당 요소가 viewport에 노출되거나 숨겨질 때 `onIntersectStart/onIntersectEnd` 콜백 함수를 호출합니다.
 ```tsx title="typescript"
 import { InView } from '@modern-kit/react';
@@ -76,7 +80,7 @@ const Example = () => {
 ```
 
 ### asChild
-- `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)** 을 통해 래퍼 요소 없이 자식 요소를 그대로 렌더링하고, 해당 자식 요소가 `IntersectionObserver`의 관찰 대상이 됩니다.
 - 자식 요소가 viewport에 노출되거나 숨겨질 때 `onIntersectStart/onIntersectEnd` 콜백 함수를 호출합니다.
 ```tsx title="typescript"
 import { InView } from '@modern-kit/react';

diff --git a/packages/react/src/components/InView/index.tsx b/packages/react/src/components/InView/index.tsx
@@ -23,9 +23,9 @@ interface InViewProps extends UseIntersectionObserverProps {
  *
  * 다형성을 지원하기 때문에 `as`, `asChild` 속성을 지원합니다.
  *
- * - 기본적으로 `div` 태그로 자식 요소를 감싸서 렌더링하며, `as` 속성을 통해 감싸는 요소를 특정 요소로 변경해 렌더링할 수 있습니다. 이때 해당 요소가 관찰 대상입니다.
- * - `asChild` 속성이 `true`라면 `Slot`을 통해 래퍼 요소 없이 자식 요소를 그대로 렌더링하고, 자식 요소를 관찰 대상으로 설정할 수 있습니다.
- * - `asChild` 속성을 사용 할 경우 아래 링크를 참고하세요.
+ * - 기본적으로 `div` 태그로 자식 요소를 감싸서 렌더링하며, `as` 속성을 통해 감싸는 요소를 특정 요소로 변경해 렌더링할 수 있습니다. 이때 해당 요소가 `IntersectionObserver`의 관찰 대상이 됩니다.
+ * - `asChild` 속성이 `true`라면 `Slot`을 통해 래퍼 요소 없이 자식 요소를 그대로 렌더링하고, 자식 요소를 `IntersectionObserver`의 관찰 대상이 됩니다.
+ * - `asChild` 속성을 사용 할 경우 아래 Slot 링크를 참고하세요.
  *
  * @see https://modern-agile-team.github.io/modern-kit/docs/react/components/Slot
  *
@@ -46,15 +46,15 @@ interface InViewProps extends UseIntersectionObserverProps {
  *
  * @example
  * ```tsx
- * // 기본적으로 `div`로 감싸지며, 해당 `div`를 관찰 대상으로 설정합니다.
+ * // default
  * <InView onIntersectStart={onIntersectStart} onIntersectEnd={onIntersectEnd}>
  *   <div>Contents</div>
  * </InView>
  * ```
  *
  * @example
  * ```tsx
- * // `as` 속성을 통해 감싸는 요소를 특정 요소로 변경해 렌더링할 수 있습니다. 해당 요소를 관찰 대상으로 설정합니다.
+ * // as: ul
  * <InView as="ul" onIntersectStart={onIntersectStart} onIntersectEnd={onIntersectEnd}>
  *   <li>List Item1</li>
  *   <li>List Item2</li>
@@ -63,8 +63,8 @@ interface InViewProps extends UseIntersectionObserverProps {
  *
  * @example
  * ```tsx
- * // `asChild`가 `true`라면 `Slot`을 통해 래퍼 요소 없이 자식 요소를 그대로 렌더링하고, 자식 요소를 관찰 대상으로 설정합니다.
- * <InView asChild onIntersectStart={handleIntersectStart} onIntersectEnd={handleIntersectEnd}>
+ * // asChild
+ * <InView asChild onIntersectStart={onIntersectStart} onIntersectEnd={onIntersectEnd}>
  *   <div>Contents</div>
  * </InView>
  * ```