diff --git a/docs/docs/react/components/AspectRatio.mdx b/docs/docs/react/components/AspectRatio.mdx index 69ade0bba..1bf68cfa1 100644 --- 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)** 문서를 참고해주세요.
diff --git a/docs/docs/react/components/InView.mdx b/docs/docs/react/components/InView.mdx index 14d218ab7..b708db3e1 100644 --- 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)** 훅을 사용하여 구현되었습니다.
diff --git a/docs/docs/react/components/Slot.mdx b/docs/docs/react/components/Slot.mdx index 078777284..f2d51cb9d 100644 --- 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 index 1641b52e1..508dcc8f3 100644 --- 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,12 +32,12 @@ 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 * * image * @@ -44,6 +45,7 @@ interface AspectRatioProps { * * @example * ```tsx + * // as article * * image * @@ -51,6 +53,7 @@ interface AspectRatioProps { * * @example * ```tsx + * // asChild * * image * diff --git a/packages/react/src/components/InView/index.tsx b/packages/react/src/components/InView/index.tsx index 06431a26c..ff4e9b8b1 100644 --- 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`를 관찰 대상으로 설정합니다. * - *
Content1
+ *
Contents
* * ``` * * @example * ```tsx - * // as 속성을 통해 특정 요소로 렌더링할 수 있으며, 해당 요소가 관찰 대상입니다. + * // `as` 속성을 통해 감싸는 요소를 특정 요소로 변경해 렌더링할 수 있습니다. 해당 요소를 관찰 대상으로 설정합니다. * *
  • List Item1
    • *
  • List Item2
    • @@ -62,9 +63,9 @@ interface InViewProps extends UseIntersectionObserverProps { * * @example * ```tsx - * // asChild 속성을 통해 자식 요소를 그대로 렌더링하고, 자식 요소를 관찰 대상으로 설정할 수 있습니다. + * // `asChild`가 `true`라면 `Slot`을 통해 래퍼 요소 없이 자식 요소를 그대로 렌더링하고, 자식 요소를 관찰 대상으로 설정합니다. * - *
    Box1
    + *
    Contents
    *     * ``` */ diff --git a/packages/react/src/components/Slot/index.tsx b/packages/react/src/components/Slot/index.tsx index 761519319..d1a6cfd37 100644 --- 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