temp: Card 컴포넌트 내 Grade 타입 의존성 임시 작업

src/components/Card/Card.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import Card from "./Card";
-import { Grade } from "../../api/services/common/types";
+import { Grade } from "../../api/services/types";
 
 const meta: Meta<typeof Card> = {
   component: Card,

src/components/Card/Card.test.tsx

@@ -1,30 +1,28 @@
 import { render, screen, within } from "@testing-library/react";
 import { expect, test } from "vitest";
 
-import { Grade } from "../../api/services/common/types";
+import { Grade } from "../../api/services/types";
 
 import Card from "./Card";
 
 test("render grade image", () => {
-  render(<Card id="test" name="test" grade={Grade.BIG_TREE} cohort={1} />);
+  render(<Card id="test" name="test" grade={Grade.TREE} cohort={1} />);
 
   expect(
-    screen.getByRole("img", { name: `${Grade.BIG_TREE} image` }),
+    screen.getByRole("img", { name: `${Grade.TREE} image` }),
   ).toBeInTheDocument();
 });
 
 test("render github name", () => {
   const name = "user123";
-  render(<Card id="test" name={name} grade={Grade.BIG_TREE} cohort={1} />);
+  render(<Card id="test" name={name} grade={Grade.TREE} cohort={1} />);
 
   expect(screen.getByRole("region", { name })).toBeInTheDocument();
 });
 
 test("render cohort", () => {
   const cohort = 2;
-  render(
-    <Card id="test" name="user123" grade={Grade.BIG_TREE} cohort={cohort} />,
-  );
+  render(<Card id="test" name="user123" grade={Grade.TREE} cohort={cohort} />);
 
   expect(
     screen.getByRole("region", { name: `${cohort}기` }),
@@ -33,7 +31,7 @@ test("render cohort", () => {
 
 test("render progress link", () => {
   const id = "test";
-  render(<Card id={id} name="user123" grade={Grade.BIG_TREE} cohort={1} />);
+  render(<Card id={id} name="user123" grade={Grade.TREE} cohort={1} />);
 
   const link = within(
     screen.getByRole("region", { name: `card-navigation-${id}` }),
@@ -45,7 +43,7 @@ test("render progress link", () => {
 
 test("render certificate link", () => {
   const id = "test";
-  render(<Card id={id} name="user123" grade={Grade.BIG_TREE} cohort={1} />);
+  render(<Card id={id} name="user123" grade={Grade.TREE} cohort={1} />);
 
   const link = within(
     screen.getByRole("region", { name: `card-navigation-${id}` }),

src/components/Card/Card.tsx

@@ -2,7 +2,7 @@ import Seed from "../../assets/Seed.png";
 import Sprout from "../../assets/Sprout.png";
 import YoungTree from "../../assets/YoungTree.png";
 import LargeTree from "../../assets/LargeTree.png";
-import type { Grade } from "../../api";
+import { Grade } from "../../api/services/types";
 import Link from "../Link/Link";
 
 import styles from "./Card.module.css";
@@ -17,8 +17,10 @@ interface CardProps {
 const imageTable = {
   SEED: Seed,
   SPROUT: Sprout,
-  SMALL_TREE: YoungTree,
-  BIG_TREE: LargeTree,
+  LEAF: Sprout,
+  BRANCH: Sprout,
+  FRUIT: YoungTree,
+  TREE: LargeTree,
 };
 
 export default function Card({ id, name, cohort, grade }: CardProps) {