[FEAT] 프로젝트 카드 컴포넌트 추가

src/app/page.tsx

@@ -1,3 +1,11 @@
+import { MockProjectData } from "@/components/common/ProjectCard/_mock/mock-project";
+import { ProjectCard } from "@/components/common/ProjectCard/ProjectCard";
+
 export default function Home() {
-  return <main>Hello, world!</main>;
+  const data = MockProjectData;
+  return (
+    <main>
+      <ProjectCard data={data} />
+    </main>
+  );
 }

src/components/common/ProjectCard/ProjectCard.module.css

@@ -0,0 +1,101 @@
+.card {
+  width: 300px;
+  height: 410px;
+  background-color: var(--color-surfaceContainerLowest);
+  border: 1px solid var(--color-outlineVariant);
+  border-radius: 12px;
+}
+
+.img-section {
+  padding: 8px;
+  position: relative;
+}
+
+.img {
+  width: auto;
+  height: auto;
+  max-width: 100%;
+  max-height: 100%;
+  border-radius: 8px;
+}
+
+.img:hover ~ .icon {
+  transform: scale(1.5);
+  top: 75%;
+  left: 85%;
+  transition: 0.5s;
+}
+
+.icon {
+  color: var(--color-outlineVariant);
+  position: absolute;
+  top: 85%;
+  left: 90%;
+  transform: translate(-50%, -50%);
+}
+
+.badge-group {
+  height: fit-content;
+}
+
+.title {
+  height: 48px;
+  max-height: 48px;
+  font-size: 24px;
+  line-height: 25px;
+  font-weight: 700;
+  color: var(--color-onSurface);
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  word-break: keep-all;
+}
+
+@supports (-webkit-line-clamp: 2) {
+  .title {
+    white-space: initial;
+    display: -webkit-box;
+    line-clamp: 2;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+  }
+}
+
+.participants-container {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  height: 24px;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 24px;
+  color: var(--color-outline);
+}
+
+.attr-wrapper {
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 24px;
+  color: var(--color-onSurface);
+}
+
+.value-wrapper {
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 24px;
+  color: var(--color-onSurface);
+}
+
+.like-section {
+  display: flex;
+  background-color: var(--color-surfaceVariant);
+  height: 40px;
+  align-items: center;
+}
+
+.likes-wrapper {
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 24px;
+  color: var(--color-primary);
+}

src/components/common/ProjectCard/ProjectCard.story.tsx

@@ -0,0 +1,25 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { ProjectCard } from "./ProjectCard";
+import { MockProjectData } from "./_mock/mock-project";
+
+const meta = {
+  title: "ProjectCard",
+  component: ProjectCard,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {},
+  args: {},
+} satisfies Meta<typeof ProjectCard>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const data = MockProjectData;
+
+export const Usage: Story = {
+  args: {
+    data: data,
+  },
+};

src/components/common/ProjectCard/ProjectCard.tsx

@@ -0,0 +1,76 @@
+import { Card, CardSection, Divider, Group, Stack } from "@mantine/core";
+import Image from "next/image";
+import classes from "./ProjectCard.module.css";
+import { IconSearch } from "@tabler/icons-react";
+import Link from "next/link";
+import { ProjectCardLikeSection } from "./ProjectCardLikeSection";
+
+export type ProjectCardDataType = {
+  id: number;
+  title: string;
+  thumbnailUrl: string; // uuid 예정
+  categories: string[];
+  participants: string[];
+  team: string;
+  advisor: string;
+  likes: number;
+  isMarked: boolean;
+};
+
+export interface ProjectCardProps {
+  data: ProjectCardDataType;
+  width?: string;
+  height?: string;
+}
+
+export function ProjectCard({ data, width, height }: ProjectCardProps) {
+  const ParticipantsString = data.participants.join(", ");
+  return (
+    <Card className={classes.card} w={width} h={height}>
+      <CardSection className={classes["img-section"]}>
+        <Link
+          href={{
+            pathname: `/${data.id}`,
+          }}
+          style={{ textDecorationLine: "none" }}
+        >
+          <Image
+            src={data.thumbnailUrl}
+            alt={"thumbnail"}
+            className={classes.img}
+            width={500}
+            height={500}
+            priority
+          />
+          <IconSearch className={classes.icon} />
+        </Link>
+      </CardSection>
+      <CardSection pl={24} pt={8}>
+        <Group className={classes["badge-group"]} gap={16}>
+          {/* TODO: div를 카드뱃지 컴포넌트로 수정 */}
+          {data.categories.map((category, index) => (
+            <div key={index}>{category}</div>
+          ))}
+        </Group>
+      </CardSection>
+      <CardSection pl={24} pr={24} pb={16} pt={8}>
+        <Stack gap={8}>
+          <div className={classes.title}>{data.title}</div>
+          <div className={classes["participants-container"]}>{ParticipantsString}</div>
+          <Divider c={"var(--color-outline)"} />
+        </Stack>
+        <Stack gap={0} mt={8}>
+          <Group gap={24}>
+            <div className={classes["attr-wrapper"]}>참가팀명</div>
+            <div className={classes["value-wrapper"]}>{data.team}</div>
+          </Group>
+          <Group gap={24}>
+            <div className={classes["attr-wrapper"]}>지도교수</div>
+            <div className={classes["value-wrapper"]}>{data.advisor}</div>
+          </Group>
+        </Stack>
+      </CardSection>
+      <ProjectCardLikeSection likes={data.likes} isMarked={data.isMarked} />
+    </Card>
+  );
+}

src/components/common/ProjectCard/ProjectCardLikeSection.tsx

@@ -0,0 +1,30 @@
+import { CardSection, Group, UnstyledButton } from "@mantine/core";
+import { IconBookmark, IconBookmarkFilled, IconThumbUp } from "@tabler/icons-react";
+import classes from "./ProjectCard.module.css";
+
+export interface ProjectCardLikeSectionProps {
+  likes: number;
+  isMarked: boolean;
+}
+
+export function ProjectCardLikeSection({ likes, isMarked }: ProjectCardLikeSectionProps) {
+  return (
+    <CardSection className={classes["like-section"]}>
+      <Group align="center" justify="space-between" w={500} p={16}>
+        <UnstyledButton>
+          <Group gap={0}>
+            <IconThumbUp color="var(--color-primary)" />
+            <div className={classes["likes-wrapper"]}>{likes}</div>
+          </Group>
+        </UnstyledButton>
+        <UnstyledButton>
+          {isMarked ? (
+            <IconBookmarkFilled color="var(--color-primary)" />
+          ) : (
+            <IconBookmark color="var(--color-primary)" />
+          )}
+        </UnstyledButton>
+      </Group>
+    </CardSection>
+  );
+}

src/components/common/ProjectCard/_mock/mock-project.ts

@@ -0,0 +1,13 @@
+import { ProjectCardDataType } from "../ProjectCard";
+
+export const MockProjectData: ProjectCardDataType = {
+  id: 1,
+  title: "GPT 기반의 일상 대화형 챗봇 모델 개발",
+  thumbnailUrl: "/images/mock-project-thumbnail.png",
+  categories: ["AI", "자연어처리"],
+  participants: ["조민규", "조하빈", "장준우", "김예윤", "신준서"],
+  team: "바이브컴퍼니",
+  advisor: "박희선",
+  likes: 63,
+  isMarked: true,
+};

src/components/common/ProjectCard/index.ts

@@ -0,0 +1 @@
+export { ProjectCard } from "./ProjectCard";