refactor(card): add custom ratio for better flexibility (#101)

* refactor(card): add custom ratio for better flexibility

* chore(card): set custom ratio as default

* chore(card): update feedback

* test(card): add unit test for ratio, variant

* chore(card): add argTypes for ratio and variant in Card stories

* chore(readme): updaate storybook url

.changeset/eighty-apricots-punch.md

@@ -0,0 +1,5 @@
+---
+"@sipe-team/card": minor
+---
+
+add custom ratio in card component

README.md

@@ -1,7 +1,7 @@
 ![](./public/assets/og-image.png)
 
 # Sipe Design System 
-[![MIT License](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/sipe-team/3-2_side/blob/main/LICENSE) ![Package Manager](https://img.shields.io/badge/pnpm-9.7.1-orange?logo=pnpm) [![Storybook](https://img.shields.io/badge/Storybook-8.4.7-ff4785?logo=storybook)](https://67417e47644abe8d4e63f82f-ggwavglffa.chromatic.com) ![Tests](https://img.shields.io/badge/Vitest-2.1.4-green?logo=vitest) [![codecov](https://codecov.io/gh/sipe-team/3-2_side/branch/changeset-release%2Fmain/graph/badge.svg?token=1TNLVUFPXC)](https://codecov.io/gh/sipe-team/3-2_side) <img alt="Github Stars" src="https://badgen.net/github/stars/sipe-team/3-2_side" /> 
+[![MIT License](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/sipe-team/3-2_side/blob/main/LICENSE) ![Package Manager](https://img.shields.io/badge/pnpm-9.7.1-orange?logo=pnpm) [![Storybook](https://img.shields.io/badge/Storybook-8.4.7-ff4785?logo=storybook)](https://67417e47644abe8d4e63f82f-lynsfaiqst.chromatic.com) ![Tests](https://img.shields.io/badge/Vitest-2.1.4-green?logo=vitest) [![codecov](https://codecov.io/gh/sipe-team/3-2_side/branch/changeset-release%2Fmain/graph/badge.svg?token=1TNLVUFPXC)](https://codecov.io/gh/sipe-team/3-2_side) <img alt="Github Stars" src="https://badgen.net/github/stars/sipe-team/3-2_side" /> 
 
 Sipe Design System is a monorepo-based component library built to modernize and standardize the official Sipe website. Drawing inspiration from our existing design patterns, we're creating a robust, type-safe, and accessible component system that can be used across all Sipe projects.
 

packages/card/src/Card.stories.tsx

@@ -7,6 +7,16 @@ const meta = {
   parameters: {
     layout: 'centered',
   },
+  argTypes: {
+    ratio: {
+      control: 'select',
+      options: ['rectangle', 'square', 'wide', 'portrait', 'auto'],
+    },
+    variant: {
+      control: 'select',
+      options: ['filled', 'outline'],
+    },
+  },
 } satisfies Meta<typeof Card>;
 export default meta;
 
@@ -15,7 +25,6 @@ type Story = StoryObj<typeof meta>;
 export const Default: Story = {
   args: {
     children: <span style={{ fontSize: '20px' }}>Card</span>,
-    ratio: 'rectangle',
     variant: 'filled',
   },
 };

packages/card/src/Card.test.tsx

@@ -37,6 +37,21 @@ test('ratio에 wide로 넣으면 aspect-ratio는 21/9로 반환한다.', () => {
   expect(screen.getByText('Card')).toHaveStyle('aspect-ratio: 21 / 9');
 });
 
+test('ratio에 square로 넣으면 aspect-ratio는 1/1로 반환한다.', () => {
+  render(<Card ratio="square">Card</Card>);
+  expect(screen.getByText('Card')).toHaveStyle('aspect-ratio: 1 / 1');
+});
+
+test('ratio에 portrait로 넣으면 aspect-ratio는 3/4로 반환한다.', () => {
+  render(<Card ratio="portrait">Card</Card>);
+  expect(screen.getByText('Card')).toHaveStyle('aspect-ratio: 3 / 4');
+});
+
+test('ratio에 auto로 넣으면 aspect-ratio는 auto로 반환한다.', () => {
+  render(<Card ratio="auto">Card</Card>);
+  expect(screen.getByText('Card')).toHaveStyle('aspect-ratio: auto');
+});
+
 test('variant는 default로 filled를 적용한다.', () => {
   render(<Card>Card</Card>);
   expect(screen.getByText('Card')).toHaveStyle({
@@ -50,3 +65,17 @@ test(`variant가 outline으로 넣으면 border(${color.cyan300}) 색상을 적
     border: `1px solid ${color.cyan300}`,
   });
 });
+
+test(`variant가 filled일 때 배경색이 ${color.gray100}이다.`, () => {
+  render(<Card variant="filled">Card</Card>);
+  expect(screen.getByText('Card')).toHaveStyle({
+    backgroundColor: color.gray100,
+  });
+});
+
+test(`variant가 outline일 때 배경색이 ${color.gray50}이다.`, () => {
+  render(<Card variant="outline">Card</Card>);
+  expect(screen.getByText('Card')).toHaveStyle({
+    backgroundColor: color.gray50,
+  });
+});

packages/card/src/Card.tsx

@@ -9,7 +9,7 @@ import {
 } from 'react';
 import styles from './Card.module.css';
 
-export type CardRatio = 'rectangle' | 'square' | 'wide' | 'portrait';
+export type CardRatio = 'rectangle' | 'square' | 'wide' | 'portrait' | 'auto';
 export type CardVariant = 'filled' | 'outline';
 
 export interface CardProps extends ComponentProps<'div'> {
@@ -76,6 +76,6 @@ function getAspectRatio(ratio: CardRatio) {
     case 'portrait':
       return '3 / 4';
     default:
-      return '16 / 9';
+      return 'auto';
   }
 }