Feat: Card 컴포넌트 구현

src/page/main/component/card/card-info.tsx

@@ -0,0 +1,27 @@
+import Clock from '@shared/assets/icon/clock.svg?react';
+import UserIcon from '@shared/assets/icon/user.svg?react';
+import MapPinIcon from '@shared/assets/icon/map-pin.svg?react';
+interface CardInfoProps {
+  date: string;
+  count: string;
+  location: string;
+}
+
+export function CardInfo({ date, count, location }: CardInfoProps) {
+  return (
+    <div className=" flex flex-col gap-[0.3rem] typo-caption">
+      <p className="flex gap-[0.6rem]">
+        <Clock width={'1.6rem'} height={'1.6rem'} />
+        {date}
+      </p>
+      <p className="flex gap-[0.6rem]">
+        <UserIcon width={'1.6rem'} height={'1.6rem'} />
+        {count}
+      </p>
+      <p className="flex gap-[0.6rem]">
+        <MapPinIcon width={'1.6rem'} height={'1.6rem'} />
+        {location}
+      </p>
+    </div>
+  );
+}

src/page/main/component/card/card-title.tsx

@@ -0,0 +1,7 @@
+interface CardTitleProps {
+  title: string;
+}
+
+export function CardTitle({ title }: CardTitleProps) {
+  return <p className="typo-body1 line-clamp-2">{title}</p>;
+}

src/page/main/component/card/card.tsx

@@ -0,0 +1,24 @@
+import { CardInfo } from '@page/main/component/card/card-info';
+import { CardTitle } from '@page/main/component/card/card-title';
+
+interface CardProps {
+  image?: string;
+  title: string;
+  date: string;
+  count: string;
+  location: string;
+}
+
+export function Card({ image, title, date, count, location }: CardProps) {
+  return (
+    <div className="flex flex-low gap-[1.6rem] w-[32.7rem] h-[14.8rem] pb-[2rem] border-b border-gray-100">
+      <div className="w-[10.2rem] h-[12.8rem] shrink-0 border rounded-[8px]">
+        <img src={image} />
+      </div>
+      <div className="flex flex-col gap-[1.2rem]">
+        <CardTitle title={title} />
+        <CardInfo date={date} count={count} location={location} />
+      </div>
+    </div>
+  );
+}