Skip to content

Commit

Permalink
docs: aspect-ratio ts-doc 제거 및 불 필요한 파일 제거
Browse files Browse the repository at this point in the history
  • Loading branch information
ssi02014 committed Nov 20, 2024
1 parent 1714dba commit f30dd53
Show file tree
Hide file tree
Showing 4 changed files with 10 additions and 22 deletions.
4 changes: 2 additions & 2 deletions docs/docs/react/components/AspectRatio.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,9 @@ 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를 방지하는데 효과적입니다.
미리 영역을 확보하여 `Layout Shift` 방지하는데 효과적입니다.

<br />

Expand Down
12 changes: 0 additions & 12 deletions packages/react/src/components/AspectRatio/AspectRatio.module.css

This file was deleted.

Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { describe, it, expect } from 'vitest';
import { AspectRatio } from '.';

describe('AspectRatio', () => {
it('자식 요소에 aspect-ratio 설정이 적용되어야 합니다.', () => {
it('paragraph 요소에 aspect-ratio 설정이 적용되어야 합니다.', () => {
render(
<AspectRatio ratio={16 / 9}>
<p role="paragraph">Content</p>
Expand Down
14 changes: 7 additions & 7 deletions packages/react/src/components/AspectRatio/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,22 +9,22 @@ interface AspectRatioProps {
}

/**
* @description 주어진 aspect-ratio 비율에 맞게 가로/세로 비율을 편리하게 맞춰주는 컴포넌트입니다.
* @description 주어진 aspect-ratio 비율을 맞춰주기 위해 선언적으로 사용하는 유틸 컴포넌트입니다.
*
* 미리 영역을 확보하여 Layout Shift를 방지하는데 효과적입니다.
* 미리 영역을 확보하여 `Layout Shift`를 방지하는데 효과적입니다.
*
* @template T - 사용할 HTML 요소의 타입을 지정합니다. 기본값은 'div'입니다.
* @see https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio
*
* @param {PropsWithChildren<AspectRatioProps<T>>} props - 컴포넌트에 전달되는 속성들입니다.
* @param {AspectRatioProps} props - 컴포넌트에 전달되는 속성들입니다.
* @param {number} props.ratio - 자식 요소의 가로 세로 비율을 지정합니다.
* @param {React.ReactNode} props.children - 렌더링 할 자식요소 입니다.
* @param {JSX.Element} props.children - 렌더링 할 자식요소 입니다.
*
* @returns {JSX.Element} 주어진 비율에 맞춰 스타일이 적용된 래퍼 요소를 반환합니다.
* @returns {JSX.Element} 주어진 aspect-ratio 비율에 맞춰 스타일이 적용된 자식 요소를 반환합니다.
*
* @example
* ```tsx
* <AspectRatio ratio={16 / 9}>
* <img src={imgUrl} alt="placeholder" />
* <img src={imgUrl} alt="image" />
* </AspectRatio>
* ```
*/
Expand Down

0 comments on commit f30dd53

Please sign in to comment.