From f7d9f93c943e86eb9f38b3cbc8cbc4b0c9b7c480 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gromit=20=28=EC=A0=84=EB=AF=BC=EC=9E=AC=29?=
 <64779472+ssi02014@users.noreply.github.com>
Date: Wed, 20 Nov 2024 15:21:13 +0900
Subject: [PATCH] =?UTF-8?q?fix(react):=20AspectRatio=20=EC=9D=B8=ED=84=B0?=
 =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=8A=A4=20=EB=B0=8F=20=EB=82=B4=EB=B6=80=20?=
 =?UTF-8?q?=EB=A1=9C=EC=A7=81=20=EA=B0=9C=EC=84=A0=20(#597)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .changeset/polite-apes-rush.md                |  5 ++
 docs/docs/react/components/AspectRatio.mdx    | 44 +++--------------
 .../src/components/AspectRatio/index.tsx      | 48 +++++--------------
 3 files changed, 23 insertions(+), 74 deletions(-)
 create mode 100644 .changeset/polite-apes-rush.md

diff --git a/.changeset/polite-apes-rush.md b/.changeset/polite-apes-rush.md
new file mode 100644
index 000000000..f7a8a8bd4
--- /dev/null
+++ b/.changeset/polite-apes-rush.md
@@ -0,0 +1,5 @@
+---
+'@modern-kit/react': patch
+---
+
+fix(react): AspectRatio 인터페이스 및 내부 로직 개선 - @ssi0214
diff --git a/docs/docs/react/components/AspectRatio.mdx b/docs/docs/react/components/AspectRatio.mdx
index aca873f62..0f5d617ec 100644
--- a/docs/docs/react/components/AspectRatio.mdx
+++ b/docs/docs/react/components/AspectRatio.mdx
@@ -14,21 +14,22 @@ import { AspectRatio } from '@modern-kit/react';
 
 ## Interface
 ```ts title="typescript"
-interface AspectRatioProps extends ComponentProps<'div'> {
-  asChild?: boolean;
+interface AspectRatioProps {
+  children: JSX.Element;
   ratio: number;
 }
 ```
+```tsx title="typescript"
+const AspectRatio: ({ ratio, children }: AspectRatioProps) => JSX.Element;
+```
 
 ## Usage
-### Basic
-- 기본적으로 div 태그를 부모로 두고 자식 요소를 렌더링 하며, div 태그에 aspect-ratio 속성을 적용합니다.
 ```tsx title="typescript"
 import { AspectRatio } from '@modern-kit/react'
 
 const Example = () => {
   return (
-    <div style={{ width: '500px' }}>
+    <div style={{ width: '700px' }}>
       <AspectRatio ratio={427 / 640}>
         <img src="https://github.com/user-attachments/assets/dd60ec12-afd7-44c9-bd6b-0069e16bf2c9" />
       </AspectRatio>
@@ -39,7 +40,7 @@ const Example = () => {
 
 export const Example1 = () => {
   return (
-    <div style={{ width: '500px' }}>
+    <div style={{ width: '700px' }}>
       <AspectRatio ratio={427 / 640}>
         <img src="https://github.com/user-attachments/assets/dd60ec12-afd7-44c9-bd6b-0069e16bf2c9" />
       </AspectRatio>
@@ -49,34 +50,3 @@ export const Example1 = () => {
 
 <Example1 />
 
-### asChild
-- asChild 속성을 true로 설정하면 자식 요소에 aspect-ratio 속성을 적용합니다.
-```tsx title="typescript"
-import { AspectRatio } from '@modern-kit/react'
-
-const Example = () => {
-  return (
-    <div style={{ width: '500px' }}>
-      <AspectRatio ratio={427 / 640} asChild>
-        <section> {/* section 태그에 aspect-ratio 속성이 적용됩니다. */}
-          <img src="https://github.com/user-attachments/assets/dd60ec12-afd7-44c9-bd6b-0069e16bf2c9" />
-        </section>
-      </AspectRatio>
-    </div>
-  );
-};
-```
-
-export const Example2 = () => {
-  return (
-    <div style={{ width: '500px' }}>
-      <AspectRatio ratio={427 / 640} asChild>
-        <section>
-          <img src="https://github.com/user-attachments/assets/dd60ec12-afd7-44c9-bd6b-0069e16bf2c9" />
-        </section>
-      </AspectRatio>
-    </div>
-  );
-};
-
-<Example2 />
\ No newline at end of file
diff --git a/packages/react/src/components/AspectRatio/index.tsx b/packages/react/src/components/AspectRatio/index.tsx
index 4752b5988..4ac1d4d9a 100644
--- a/packages/react/src/components/AspectRatio/index.tsx
+++ b/packages/react/src/components/AspectRatio/index.tsx
@@ -1,16 +1,10 @@
 import classNames from 'classnames';
 import styles from './AspectRatio.module.css';
 import { Slot } from '../Slot';
-import {
-  CSSProperties,
-  Children,
-  ComponentProps,
-  PropsWithChildren,
-  useMemo,
-} from 'react';
+import { CSSProperties, Children, PropsWithChildren, useMemo } from 'react';
 
-interface AspectRatioProps extends ComponentProps<'div'> {
-  asChild?: boolean;
+interface AspectRatioProps {
+  children: JSX.Element;
   ratio: number;
 }
 
@@ -21,53 +15,33 @@ interface AspectRatioProps extends ComponentProps<'div'> {
  *
  * @template T - 사용할 HTML 요소의 타입을 지정합니다. 기본값은 'div'입니다.
  *
- * @param {PropsWithChildren<AspectRatioProps<T>>} aspectRatioProps - 컴포넌트에 전달되는 속성들입니다.
- * @param {boolean} [aspectRatioProps.asChild=false] - `true`로 설정하면 `Slot` 컴포넌트를 사용해 자식 요소에 aspect-ratio 속성을 적용합니다.
- * @param {number} aspectRatioProps.ratio - 자식 요소의 가로 세로 비율을 지정합니다.
- * @param {React.ReactNode} aspectRatioProps.children - 렌더링 할 자식요소 입니다.
- * @param {Object} [aspectRatioProps.props] - 기타 추가할 나머지 속성들입니다.
+ * @param {PropsWithChildren<AspectRatioProps<T>>} props - 컴포넌트에 전달되는 속성들입니다.
+ * @param {number} props.ratio - 자식 요소의 가로 세로 비율을 지정합니다.
+ * @param {React.ReactNode} props.children - 렌더링 할 자식요소 입니다.
  *
  * @returns {JSX.Element} 주어진 비율에 맞춰 스타일이 적용된 래퍼 요소를 반환합니다.
  *
  * @example
- * // 기본적으로 div를 생성 후 aspect-ratio 속성을 적용합니다.
  * ```tsx
  * <AspectRatio ratio={16 / 9}>
  *  <img src={imgUrl} alt="placeholder" />
  * </AspectRatio>
  * ```
- *
- * @example
- * // asChild 속성을 true로 설정하면 자식 요소에 aspect-ratio 속성을 적용합니다.
- * ```tsx
- * <AspectRatio ratio={16 / 9} asChild>
- *  <section>
- *    <img src={imgUrl} alt="placeholder" />
- *  </section>
- * </AspectRatio>
- * ```
  */
 export const AspectRatio = ({
-  asChild = false,
   ratio,
   children,
-  ...props
-}: PropsWithChildren<AspectRatioProps>): JSX.Element => {
-  const Wrapper = asChild ? Slot : 'div';
+}: AspectRatioProps): JSX.Element => {
   const customStyle: CSSProperties = useMemo(
     () => ({
-      paddingTop: `calc(100% * (1 / ${ratio}))`,
-      ...props.style,
+      aspectRatio: ratio,
     }),
-    [ratio, props.style]
+    [ratio]
   );
 
   return (
-    <Wrapper
-      className={classNames(styles['wrapper'], props.className)}
-      style={customStyle}
-      {...props}>
+    <Slot className={classNames(styles['wrapper'])} style={customStyle}>
       {Children.only(children)}
-    </Wrapper>
+    </Slot>
   );
 };