1. CardBasic

CardBasic 컴포넌트는 기본 카드 레이아웃을 제공하며, 제목과 본문 내용을 포함할 수 있습니다. 이 컴포넌트는 간단한 텍스트 또는 기타 React 컴포넌트를 카드 형태로 감싸서 표시할 때 유용합니다.

1.1. Import

import CardBasic from '@components/Card/CardBasic';

1.2. Usage

기본 사용 예제는 아래와 같습니다:

Example Card

This is an example of a basic card component in React.

import CardBasic from '@components/Card/CardBasic';

function Example() {
  return (
    <CardBasic title="Example Card">
      <p>This is an example of a basic card component in React.</p>
    </CardBasic>
  );
}

export default Example;

1.3. Props

CardBasic 컴포넌트는 아래와 같은 Props를 가집니다:

Prop	Description	Type	Default
`title`	카드의 제목을 지정합니다.	`string`	`""`
`children`	카드 내부에 표시될 내용입니다.	`React.ReactNode`	`null`

1.4. Full Example

import CardBasic from '@components/Card/CardBasic';

function FullExample() {
  return (
    <div>
      <CardBasic title="Card 1">
        <p>This is the first card with some example content.</p>
      </CardBasic>
      <CardBasic title="Card 2">
        <p>This is the second card with different content.</p>
      </CardBasic>
      <CardBasic title="Card 3">
        <p>This is the third card with even more content.</p>
      </CardBasic>
    </div>
  );
}

export default FullExample;

2. CardInteractive

CardInteractive 컴포넌트는 사용자가 클릭하여 추가적인 내용을 확장하거나 축소할 수 있는 인터랙티브한 카드 레이아웃을 제공합니다. 이 컴포넌트는 제목과 본문 내용을 포함할 수 있으며, 본문 내용은 클릭 시 확장됩니다.

2.1. Import

import CardInteractive from '@components/Card/CardInteractive';

2.2. Usage

기본 사용 예제는 아래와 같습니다:

Interactive Card

import CardInteractive from '@components/Card/CardInteractive';

function Example() {
  return (
    <CardInteractive title="Interactive Card">
      <p>This content is hidden until the card is clicked.</p>
    </CardInteractive>
  );
}

export default Example;

2.3. Props

CardInteractive 컴포넌트는 아래와 같은 Props를 가집니다:

Prop	Description	Type	Default
`title`	카드의 제목을 지정합니다.	`string`	`""`
`children`	카드 내부에 표시될 내용입니다. 클릭 시 확장됩니다.	`React.ReactNode`	`null`

2.4. Full Example

import CardInteractive from '@components/Card/CardInteractive';

function FullExample() {
  return (
    <div>
      <CardInteractive title="Card 1">
        <p>This is the first card with interactive content.</p>
      </CardInteractive>
      <CardInteractive title="Card 2">
        <p>This is the second card, click to expand.</p>
      </CardInteractive>
      <CardInteractive title="Card 3">
        <p>The third card also has expandable content.</p>
      </CardInteractive>
    </div>
  );
}

export default FullExample;

3. CardImage

CardImage 컴포넌트는 이미지 또는 아바타와 함께 텍스트를 표시하는 카드 레이아웃을 제공합니다. 이 컴포넌트는 제목과 본문 내용을 포함할 수 있으며, 이미지를 카드 왼쪽에 배치할 수 있습니다.

3.1. Import

import CardImage from '@components/Card/CardImage';

3.2. Usage

기본 사용 예제는 아래와 같습니다:

Image Card

This card includes an image alongside the text.

import CardImage from '@components/Card/CardImage';

function Example() {
  return (
    <CardImage title="Image Card">
      <p>This card includes an image alongside the text.</p>
    </CardImage>
  );
}

export default Example;

3.3. Props

CardImage 컴포넌트는 아래와 같은 Props를 가집니다:

Prop	Description	Type	Default
`title`	카드의 제목을 지정합니다.	`string`	`""`
`children`	카드 내부에 표시될 내용입니다.	`React.ReactNode`	`null`

3.4. Full Example

import CardImage from '@components/Card/CardImage';

function FullExample() {
  return (
    <div>
      <CardImage title="Image Card 1">
        <p>This is the first card with an image.</p>
      </CardImage>
      <CardImage title="Image Card 2">
        <p>This is the second card with another image.</p>
      </CardImage>
      <CardImage title="Image Card 3">
        <p>The third card with yet another image.</p>
      </CardImage>
    </div>
  );
}

export default FullExample;

4. CardPricing

CardPricing 컴포넌트는 상품 또는 서비스의 가격, 설명, 주요 특징을 표시하는 카드 레이아웃을 제공합니다. 구매 버튼도 포함되어 있어, 사용자가 바로 상품을 구매할 수 있습니다.

4.1. Import

import CardPricing from '@components/Card/CardPricing';

4.2. Usage

기본 사용 예제는 아래와 같습니다:

Pro Plan

Access more features with the Pro plan.

$20/month

5x more usage
Access to Claude 3 Haiku
Priority access during high-traffic periods

import CardPricing from '@components/Card/CardPricing';

function Example() {
  return (
    <CardPricing
      title="Pro Plan"
      description="Access more features with the Pro plan."
      price="$20/month"
      features={[
        "5x more usage",
        "Access to Claude 3 Haiku",
        "Priority access during high-traffic periods",
      ]}
      buy="Subscribe Now"
    />
  );
}

export default Example;

4.3. Props

CardPricing 컴포넌트는 아래와 같은 Props를 가집니다:

Prop	Description	Type	Default
`title`	카드의 제목을 지정합니다.	`string`	`""`
`description`	상품 또는 서비스에 대한 설명을 제공합니다.	`string`	`""`
`price`	상품 또는 서비스의 가격을 표시합니다.	`string`	`""`
`features`	상품 또는 서비스의 주요 특징을 리스트 형태로 표시합니다.	`string[]`	`[]`
`buy`	구매 버튼에 표시될 텍스트를 지정합니다.	`string`	`""`

4.4. Full Example

import CardPricing from '@components/Card/CardPricing';

function FullExample() {
  return (
    <div>
      <CardPricing
        title="Basic Plan"
        description="Get started with the basic plan."
        price="$10/month"
        features={[
          "2x more usage",
          "Standard access to features",
        ]}
        buy="Get Started"
      />
      <CardPricing
        title="Pro Plan"
        description="Access more features with the Pro plan."
        price="$20/month"
        features={[
          "5x more usage",
          "Access to Claude 3 Haiku",
          "Priority access during high-traffic periods",
        ]}
        buy="Subscribe Now"
      />
      <CardPricing
        title="Enterprise Plan"
        description="Enterprise-grade features for your business."
        price="Contact us"
        features={[
          "Unlimited usage",
          "Dedicated support",
          "Custom integrations",
        ]}
        buy="Contact Sales"
      />
    </div>
  );
}

export default FullExample;

5. CardReview

CardReview 컴포넌트는 사용자 리뷰와 함께 사용자 아바타, 이름, 별점을 표시하는 카드 레이아웃을 제공합니다. 사용자가 남긴 텍스트 리뷰와 별점을 함께 표시할 수 있습니다.

5.1. Import

import CardReview from '@components/Card/CardReview';

5.2. Usage

기본 사용 예제는 아래와 같습니다:

John Doe

This is an excellent product! Highly recommended.

import CardReview from '@components/Card/CardReview';

function Example() {
  return (
    <CardReview avatar="/avatar1.svg" name="John Doe" rate={4}>
      <p>This is an excellent product! Highly recommended.</p>
    </CardReview>
  );
}

export default Example;

5.3. Props

CardReview 컴포넌트는 아래와 같은 Props를 가집니다:

Prop	Description	Type	Default
`avatar`	리뷰를 작성한 사용자의 아바타 이미지 경로를 지정합니다.	`string`	`""`
`name`	리뷰를 작성한 사용자의 이름을 지정합니다.	`string`	`""`
`rate`	사용자가 부여한 별점 (0-5)입니다.	`number`	`0`
`children`	리뷰 텍스트를 포함할 수 있습니다.	`React.ReactNode`	`null`

5.4. Full Example

import CardReview from '@components/Card/CardReview';

function FullExample() {
  return (
    <div>
      <CardReview avatar="/avatar1.svg" name="John Doe" rate={5}>
        <p>Perfect! Exceeded my expectations.</p>
      </CardReview>
      <CardReview avatar="/avatar2.svg" name="Jane Smith" rate={4}>
        <p>Very good, but there's room for improvement.</p>
      </CardReview>
      <CardReview avatar="/avatar3.svg" name="Bob Brown" rate={3}>
        <p>It's okay, not the best I've used.</p>
      </CardReview>
    </div>
  );
}

export default FullExample;