Feat(design-system): Card 컴포넌트 구현

packages/design-system/src/components/card/BaseCard.tsx

@@ -0,0 +1,13 @@
+interface BaseCardProps {
+  children: React.ReactNode;
+}
+
+const BaseCard = ({ children }: BaseCardProps) => {
+  return (
+    <div className="outline-gray200 w-[24.8rem] overflow-hidden rounded-[1.2rem] bg-white outline">
+      {children}
+    </div>
+  );
+};
+
+export default BaseCard;

packages/design-system/src/components/card/Card.stories.tsx

@@ -0,0 +1,124 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import Card from './Card';
+
+const meta: Meta<typeof Card> = {
+  title: 'Components/Card',
+  component: Card,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component:
+          '**Card** 컴포넌트는 리마인드 카드와 북마크 카드 두 가지 유형을 지원합니다.<br/>' +
+          '**`remind`**, **`bookmark`** 중 type을 선택하여 사용할 수 있으며 이에 따라 다른 인터페이스를 제공합니다..',
+      },
+    },
+  },
+  argTypes: {
+    type: {
+      control: 'inline-radio',
+      options: ['remind', 'bookmark'],
+      description: '카드의 종류를 선택합니다.',
+    },
+    title: { control: 'text' },
+    content: { control: 'text' },
+    category: { control: 'text' },
+    imageUrl: { control: 'text' },
+    timeRemaining: {
+      control: 'text',
+      if: { arg: 'type', eq: 'remind' },
+    },
+    date: {
+      control: 'text',
+      if: { arg: 'type', eq: 'bookmark' },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Card>;
+
+export const Remind: Story = {
+  name: 'type: remind',
+  args: {
+    type: 'remind',
+    title: '리마인드 카드 타이틀',
+    content: '리마인드 컨텐츠 내용입니다.',
+    category: '개발',
+    timeRemaining: '3시간 25분',
+    imageUrl:
+      'https://images.unsplash.com/photo-1517694712202-14dd9538aa97?q=80&w=2070&auto=format&fit=crop',
+  },
+};
+
+export const BookMark: Story = {
+  name: 'type: bookmark',
+  args: {
+    type: 'bookmark',
+    title: '북마크 카드 타이틀',
+    content: '북마크 컨텐츠 내용입니다.',
+    category: '디자인',
+    date: '2025.08.26',
+    imageUrl:
+      'https://images.unsplash.com/photo-1555949963-ff9fe0c870eb?q=80&w=2070&auto=format&fit=crop',
+  },
+};
+
+export const LongTextSideBySide: Story = {
+  name: 'case: Long Text',
+  render: () => (
+    <div style={{ display: 'flex', gap: '20px', alignItems: 'flex-start' }}>
+      <Card
+        type="remind"
+        title="두 줄로 표시되는 긴 리마인드 카드 타이틀입니다. 제한 길이를 넘어가면 ... 처리가 됩니다."
+        content="여기에 두 줄 이상으로 늘어나는 리마인드 컨텐츠 내용이 들어갑니다. 길이를 확인해보세요."
+        category="기획"
+        timeRemaining="3시간 25분"
+        imageUrl="https://images.unsplash.com/photo-1587620962725-abab7fe55159?q=80&w=1931&auto=format&fit=crop"
+      />
+      <Card
+        type="bookmark"
+        title="두 줄로 표시되는 긴 북마크 카드 타이틀입니다. 제한 길이를 넘어가면 ... 처리가 됩니다."
+        content="여기에 두 줄 이상으로 늘어나는 북마크 컨텐츠 내용이 들어갑니다. 길이를 확인해보세요."
+        category="마케팅"
+        date="2025.09.15"
+        imageUrl="https://images.unsplash.com/photo-1522204523234-8729aa6e3d5f?q=80&w=2070&auto=format&fit=crop"
+      />
+    </div>
+  ),
+};
+
+export const NoImageSideBySide: Story = {
+  name: 'case: No imageUrl',
+  render: () => (
+    <div style={{ display: 'flex', gap: '20px', alignItems: 'flex-start' }}>
+      <Card
+        type="remind"
+        title="두 줄로 표시되는 긴 리마인드 카드 타이틀입니다. 제한 길이를 넘어가면 ... 처리가 됩니다."
+        content="여기에 두 줄 이상으로 늘어나는 리마인드 컨텐츠 내용이 들어갑니다. 길이를 확인해보세요."
+        category="기획"
+        timeRemaining="3시간 25분"
+      />
+      <Card
+        type="bookmark"
+        title="두 줄로 표시되는 긴 북마크 카드 타이틀입니다. 제한 길이를 넘어가면 ... 처리가 됩니다."
+        content="여기에 두 줄 이상으로 늘어나는 북마크 컨텐츠 내용이 들어갑니다. 길이를 확인해보세요."
+        category="마케팅"
+        date="2025.09.15"
+      />
+    </div>
+  ),
+};
+
+export const NoCategoryBookmark: Story = {
+  name: 'case: No category (bookmark)',
+  args: {
+    type: 'bookmark',
+    title: '북마크 카드 타이틀',
+    content: '북마크 컨텐츠 내용입니다.',
+    date: '2025.08.26',
+    imageUrl:
+      'https://images.unsplash.com/photo-1555949963-ff9fe0c870eb?q=80&w=2070&auto=format&fit=crop',
+  },
+};

packages/design-system/src/components/card/Card.tsx

@@ -0,0 +1,37 @@
+import MyBookmarkCard from './MyBookmarkCard';
+import RemindCard from './RemindCard';
+
+type BaseProps = {
+  title: string;
+  content?: string;
+  category?: string;
+  imageUrl?: string;
+};
+
+type RemindProps = BaseProps & {
+  type: 'remind';
+  timeRemaining: string;
+  date?: never;
+};
+
+type BookmarkProps = BaseProps & {
+  type: 'bookmark';
+  date: string;
+  timeRemaining?: never;
+};
+
+export type CardProps = RemindProps | BookmarkProps;
+
+const Card = (props: CardProps) => {
+  const { type } = props;
+
+  return (
+    <>
+      {type === 'remind' && <RemindCard {...props} />}
+
+      {type === 'bookmark' && <MyBookmarkCard {...props} />}
+    </>
+  );
+};
+
+export default Card;

packages/design-system/src/components/card/MyBookmarkCard.tsx

@@ -0,0 +1,63 @@
+import { Icon } from '@/icons';
+import chippiNoImage from '../../assets/chippi_no_image.svg';
+import BaseCard from './BaseCard';
+
+interface MyBookmarkCardProps {
+  title: string;
+  content?: string;
+  category?: string;
+  imageUrl?: string;
+  date: string;
+}
+
+const MyBookmarkCard = ({
+  title,
+  content,
+  category,
+  imageUrl,
+  date,
+}: MyBookmarkCardProps) => {
+  return (
+    <BaseCard>
+      <div className="flex h-[12rem] w-full items-center justify-center overflow-hidden bg-[#F8F8FA]">
+        {imageUrl ? (
+          <img src={imageUrl} className="h-full w-full object-cover" />
+        ) : (
+          <img
+            src={chippiNoImage}
+            alt="이미지 없을 경우 logo"
+            className="h-[12rem]"
+          />
+        )}
+      </div>
+
+      <div className="px-[1.6rem] py-[2.4rem]">
+        <div className="mb-[0.8rem] flex h-[5.6rem] justify-between gap-[0.8rem]">
+          <h3 className="head6 line-clamp-2">{title}</h3>
+          <button
+            type="button"
+            aria-label="카테고리 상세"
+            className="cursor-pointer self-start"
+          >
+            <Icon name="ic_details_category" />
+          </button>
+        </div>
+
+        <p className="body3-r text-font-gray-2 mb-[1.2rem] line-clamp-2 h-[4.2rem]">
+          {content}
+        </p>
+
+        {/* TODO: 카테고리 컴포넌트로 교체 */}
+        {category && (
+          <span className="bg-category-red-bg caption2-sb text-category-red-text h-[2.2rem] w-[6.2rem] rounded-[0.4rem] px-[0.8rem] py-[0.2rem]">
+            {category}
+          </span>
+        )}
+
+        <p className="caption2-m text-font-ltgray-4 mt-[1.2rem]">{date}</p>
+      </div>
+    </BaseCard>
+  );
+};
+
+export default MyBookmarkCard;

packages/design-system/src/components/card/RemindCard.tsx

@@ -0,0 +1,66 @@
+import { Icon } from '@/icons';
+import chippiNoImage from '../../assets/chippi_no_image.svg';
+import BaseCard from './BaseCard';
+
+interface RemindCardProps {
+  title: string;
+  content?: string;
+  category?: string;
+  imageUrl?: string;
+  timeRemaining: string;
+}
+
+const RemindCard = ({
+  title,
+  content,
+  category,
+  imageUrl,
+  timeRemaining,
+}: RemindCardProps) => {
+  return (
+    <BaseCard>
+      <div className="bg-gray900 flex items-center gap-[0.4rem] py-[1.2rem] pl-[1.6rem] text-sm text-white">
+        <Icon name="ic_clock_active" />
+        <span className="body2-m text-main400 mr-[0.2rem]">
+          {timeRemaining || '-'}
+        </span>
+        <span className="body2-m text-white-bg">이후에 사라져요</span>
+      </div>
+
+      <div className="flex h-[12rem] w-full items-center justify-center overflow-hidden bg-[#F8F8FA]">
+        {imageUrl ? (
+          <img src={imageUrl} className="h-full w-full object-cover" />
+        ) : (
+          <img
+            src={chippiNoImage}
+            alt="이미지 없을 경우 logo"
+            className="h-[12rem]"
+          />
+        )}
+      </div>
+
+      <div className="px-[1.6rem] py-[2.4rem]">
+        <div className="mb-[0.8rem] flex h-[5.6rem] justify-between gap-[0.8rem]">
+          <h3 className="head6 line-clamp-2">{title}</h3>
+          <button
+            type="button"
+            aria-label="카테고리 상세"
+            className="cursor-pointer self-start"
+          >
+            <Icon name="ic_details_category" />
+          </button>
+        </div>
+        <p className="body3-r text-font-gray-2 mb-[1.2rem] line-clamp-2 h-[4.2rem]">
+          {content}
+        </p>
+
+        {/* TODO: 카테고리 컴포넌트로 교체 */}
+        <span className="bg-category-red-bg caption2-sb text-category-red-text h-[2.2rem] w-[6.2rem] rounded-[0.4rem] px-[0.8rem] py-[0.2rem]">
+          {category}
+        </span>
+      </div>
+    </BaseCard>
+  );
+};
+
+export default RemindCard;

packages/design-system/src/components/index.ts

@@ -1,8 +1,9 @@
-export { default as Button } from './button/Button';
-export { Switch } from './switch/Switch';
 export { default as Badge } from './badge/Badge';
-export { default as Input } from './input/Input';
+export { default as Button } from './button/Button';
+export { default as Card } from './card/Card';
 export { default as Chip } from './chip/Chip';
+export { default as Input } from './input/Input';
 export { default as Level } from './level/Level';
-export { Textarea } from './textarea/Textarea';
 export { Progress } from './progress/Progress';
+export { Switch } from './switch/Switch';
+export { Textarea } from './textarea/Textarea';

packages/design-system/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

packages/tailwind-config/shared-styles.css

@@ -1,3 +1,4 @@
+@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css');
 @import 'tailwindcss';
 
 /* Head */
@@ -230,8 +231,22 @@
 
 @layer base {
   html {
-    font-family: system-ui, sans-serif;
     font-size: 62.5%;
+    padding: 0;
+    border: 0;
+    vertical-align: baseline;
+  }
+
+  body {
+    font-family:
+      'Pretendard',
+      -apple-system,
+      BlinkMacSystemFont,
+      'Segoe UI',
+      Roboto,
+      'Helvetica Neue',
+      Arial,
+      sans-serif;
   }
 }