Merge pull request #151 from DaleStudy/150-new-badges

변경된 등급 이미지 적용

src/components/Card/Card.module.css

@@ -6,12 +6,6 @@
   column-gap: 35px;
   align-items: flex-end;
 
-  > img {
-    width: 105px;
-    height: 128px;
-    object-fit: fill;
-  }
-
   > section {
     > section {
       display: flex;

src/components/Card/Card.stories.tsx

@@ -4,16 +4,57 @@ import { Grade } from "../../api/services/types";
 
 const meta: Meta<typeof Card> = {
   component: Card,
+  args: {
+    id: "test",
+  },
 };
 
 export default meta;
 
-export const Default: StoryObj<typeof Card> = {
+export const Seed: StoryObj<typeof Card> = {
   args: {
-    id: "test",
-    name: "test",
-    currentCohort: 1,
-    cohorts: [1],
+    name: "seed",
     grade: Grade.SEED,
+    cohorts: [1],
+  },
+};
+
+export const Sprout: StoryObj<typeof Card> = {
+  args: {
+    name: "sprout",
+    grade: Grade.SPROUT,
+    cohorts: [2],
+  },
+};
+
+export const Leaf: StoryObj<typeof Card> = {
+  args: {
+    name: "leaf",
+    grade: Grade.LEAF,
+    cohorts: [3],
+  },
+};
+
+export const Branch: StoryObj<typeof Card> = {
+  args: {
+    name: "branch",
+    grade: Grade.BRANCH,
+    cohorts: [4],
+  },
+};
+
+export const Fruit: StoryObj<typeof Card> = {
+  args: {
+    name: "fruit",
+    grade: Grade.FRUIT,
+    cohorts: [5],
+  },
+};
+
+export const Tree: StoryObj<typeof Card> = {
+  args: {
+    name: "tree",
+    grade: Grade.TREE,
+    cohorts: [6],
   },
 };

src/components/Card/Card.tsx

@@ -1,10 +1,6 @@
-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 { Grade } from "../../api/services/types";
+import GradeImage from "../GradeImage/GradeImage";
 import Link from "../Link/Link";
-
 import styles from "./Card.module.css";
 
 interface CardProps {
@@ -15,15 +11,6 @@ interface CardProps {
   grade: Grade;
 }
 
-const imageTable = {
-  SEED: Seed,
-  SPROUT: Sprout,
-  LEAF: Sprout,
-  BRANCH: Sprout,
-  FRUIT: YoungTree,
-  TREE: LargeTree,
-};
-
 export default function Card({
   id,
   name,
@@ -35,7 +22,7 @@ export default function Card({
     cohorts && cohorts.length > 0 ? cohorts.join(", ") : currentCohort;
   return (
     <article className={styles.item}>
-      <img src={imageTable[grade]} alt={`${grade} image`} />
+      <GradeImage grade={grade} width={105} height={128} />
       <section>
         <section aria-label={name}>
           <div>

src/components/GradeImage/GradeImage.stories.tsx

@@ -0,0 +1,22 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import Card from "./GradeImage";
+import { Grade } from "../../api/services/types";
+
+const meta: Meta<typeof Card> = {
+  component: Card,
+  args: {
+    grade: Grade.SEED,
+    width: 105,
+    height: 128,
+  },
+};
+
+export default meta;
+
+export const Seed: StoryObj<typeof Card> = {
+  args: {
+    grade: Grade.SEED,
+    width: 105,
+    height: 128,
+  },
+};

src/components/GradeImage/GradeImage.test.tsx

@@ -0,0 +1,35 @@
+import { faker } from "@faker-js/faker";
+import { render, screen } from "@testing-library/react";
+import { expect, test } from "vitest";
+
+import { Grade } from "../../api/services/types";
+
+import GradeImage from "./GradeImage";
+
+test.each(Object.values(Grade))(
+  "attach alternative text for %s image",
+  (grade) => {
+    render(
+      <GradeImage
+        grade={grade}
+        width={faker.number.int({ min: 1, max: 800 })}
+        height={faker.number.int({ min: 1, max: 800 })}
+      />,
+    );
+
+    expect(screen.getByRole("img")).toHaveAccessibleName(`${grade} image`);
+  },
+);
+
+test("set width and height", () => {
+  render(
+    <GradeImage
+      grade={faker.helpers.arrayElement(Object.values(Grade))}
+      width={105}
+      height={128}
+    />,
+  );
+
+  expect(screen.getByRole("img")).toHaveAttribute("width", "105");
+  expect(screen.getByRole("img")).toHaveAttribute("height", "128");
+});

src/components/GradeImage/GradeImage.tsx

@@ -0,0 +1,33 @@
+import { Grade } from "../../api/services/types";
+import SeedImage from "../../assets/GradeSeed.png";
+import SproutImage from "../../assets/GradeSprout.png";
+import LeafImage from "../../assets/GradeLeaf.png";
+import BranchImage from "../../assets/GradeBranch.png";
+import FruitImage from "../../assets/GradeFruit.png";
+import TreeImage from "../../assets/GradeTree.png";
+
+const imageTable = {
+  SEED: SeedImage,
+  SPROUT: SproutImage,
+  LEAF: LeafImage,
+  BRANCH: BranchImage,
+  FRUIT: FruitImage,
+  TREE: TreeImage,
+};
+
+interface GradeImageProps {
+  grade: Grade;
+  height: number;
+  width: number;
+}
+
+export default function GradeImage({ grade, height, width }: GradeImageProps) {
+  return (
+    <img
+      src={imageTable[grade]}
+      alt={`${grade} image`}
+      height={height}
+      width={width}
+    />
+  );
+}

src/components/Sidebar/Sidebar.tsx

@@ -1,13 +1,7 @@
 import { useEffect, useRef } from "react";
-
 import { Grade } from "../../api/services/types";
-
 import Github from "../../assets/Github.png";
-import LargeTree from "../../assets/LargeTree.png";
-import Seed from "../../assets/Seed.png";
-import Sprout from "../../assets/Sprout.png";
-import YoungTree from "../../assets/YoungTree.png";
-
+import GradeImage from "../GradeImage/GradeImage";
 import styles from "./Sidebar.module.css";
 
 interface SidebarErrorProps {
@@ -30,15 +24,6 @@ interface SidebarNormalProps {
 
 type SidebarProps = SidebarErrorProps | SidebarNormalProps;
 
-const imageTable = {
-  SEED: Seed,
-  SPROUT: Sprout,
-  LEAF: Sprout,
-  BRANCH: Sprout,
-  FRUIT: YoungTree,
-  TREE: LargeTree,
-};
-
 export default function Sidebar(props: SidebarProps) {
   const progressContainerRef = useRef<HTMLDivElement>(null);
   const progressPercent = props.isError
@@ -114,9 +99,7 @@ export default function Sidebar(props: SidebarProps) {
         </section>
 
         <section className={styles.currentStatus}>
-          <figure>
-            <img src={imageTable[grade]} alt={`${grade} 등급`} />
-          </figure>
+          <GradeImage grade={grade} width={80} height={103} />
         </section>
         <section className={styles.taskCounts}>
           {taskProgress.map(({ label, progress, className }) => (

src/pages/Leaderboard/Leaderboard.test.tsx

@@ -132,7 +132,7 @@ test("render the search bar", () => {
 });
 
 function mockMember() {
-  const userName = faker.internet.userName();
+  const userName = faker.internet.username();
   const currentCohort = faker.number.int({ min: 1, max: 9 });
   return mock<Member>({
     id: userName,

src/pages/Progress/Progress.test.tsx

@@ -159,7 +159,7 @@ describe("Server Error", () => {
   });
 });
 
-function mockMember({ id = faker.internet.userName() }: { id?: string } = {}) {
+function mockMember({ id = faker.internet.username() }: { id?: string } = {}) {
   const currentCohort = faker.number.int({ min: 1, max: 9 });
   return mock<Member>({
     id,