refactor: 리뷰반영

DaleStudy · Nov 27, 2024 · 0370de6 · 0370de6
1 parent 4dd9d23
commit 0370de6
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 17 deletions.
diff --git a/src/components/Card/Card.test.tsx b/src/components/Card/Card.test.tsx
@@ -31,24 +31,24 @@ test("render cohort", () => {
   ).toBeInTheDocument();
 });
 
-test("render progress button", () => {
+test("render progress link", () => {
   const id = "test";
   render(<Card id={id} name="user123" grade={Grade.BIG_TREE} cohort={1} />);
 
   const link = within(
-    screen.getByRole("navigation", { name: `card-navigation-${id}` }),
+    screen.getByRole("region", { name: `card-navigation-${id}` }),
   ).getByRole("link", { name: "풀이 현황" });
 
   expect(link).toBeInTheDocument();
   expect(link).toHaveAttribute("href", `/progress?member=${id}`);
 });
 
-test("render certificate button", () => {
+test("render certificate link", () => {
   const id = "test";
   render(<Card id={id} name="user123" grade={Grade.BIG_TREE} cohort={1} />);
 
   const link = within(
-    screen.getByRole("navigation", { name: `card-navigation-${id}` }),
+    screen.getByRole("region", { name: `card-navigation-${id}` }),
   ).getByRole("link", { name: "수료증" });
   expect(link).toBeInTheDocument();
   expect(link).toHaveAttribute("href", `/certificate?member=${id}`);

diff --git a/src/components/Card/Card.tsx b/src/components/Card/Card.tsx
@@ -26,7 +26,7 @@ export default function Card({ id, name, cohort, grade }: CardProps) {
     <article className={styles.item}>
       <img src={imageTable[grade]} alt={`${grade} image`} />
       <section>
-        <section aria-labelledby={`card-github-${id}`}>
+        <section aria-label={name}>
           <div>
             <svg
               width="10"
@@ -41,9 +41,9 @@ export default function Card({ id, name, cohort, grade }: CardProps) {
               />
             </svg>
           </div>
-          <span id={`card-github-${id}`}>{name}</span>
+          <span>{name}</span>
         </section>
-        <section aria-labelledby={`card-cohort-${id}`}>
+        <section aria-label={`${cohort}기`}>
           <div>
             <svg
               width="10"
@@ -58,12 +58,12 @@ export default function Card({ id, name, cohort, grade }: CardProps) {
               />
             </svg>
           </div>
-          <span id={`card-cohort-${id}`}>{cohort}기</span>
+          <span>{cohort}기</span>
         </section>
-        <nav aria-label={`card-navigation-${id}`}>
+        <section aria-label={`card-navigation-${id}`}>
           <Link href={`/progress?member=${id}`}>풀이 현황</Link>
           <Link href={`/certificate?member=${id}`}>수료증</Link>
-        </nav>
+        </section>
       </section>
     </article>
   );

diff --git a/src/components/Leaderboard/Leaderboard.tsx b/src/components/Leaderboard/Leaderboard.tsx
@@ -19,13 +19,14 @@ export default function Leaderboard() {
       <h1>리더보드</h1>
       <ul>
         {members.map((member) => (
-          <Card
-            key={member.name}
-            id={member.id}
-            name={member.name}
-            cohort={member.cohort}
-            grade={member.grade}
-          />
+          <li key={member.name}>
+            <Card
+              id={member.id}
+              name={member.name}
+              cohort={member.cohort}
+              grade={member.grade}
+            />
+          </li>
         ))}
       </ul>
       <Footer />