Merge pull request #446 from js43o/enhance-mogaco-page

[Refactor] 헤더 및 모각코 리스트 페이지 접근성 개선
boostcampwm2023 · Dec 12, 2023 · f26aac9 · f26aac9
2 parents 86e5b49 + fda04a7
commit f26aac9
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 35 deletions.
diff --git a/app/frontend/src/components/Header/index.tsx b/app/frontend/src/components/Header/index.tsx
@@ -13,28 +13,31 @@ export function Header() {
   const { onClickMenu } = useClickMenu();
 
   return (
-    <div className={styles.container}>
+    <header className={styles.container}>
       <div className={styles.header}>
         <NavLink to="/" className={styles.title}>
           <Logo className={styles.logo} />
           <div className={styles.logoTitle}>morak</div>
         </NavLink>
-        <ul className={styles.sideMenu}>
-          {SIDE_MENU.map((menu) => (
-            <li
-              role="menuitem"
-              key={menu.pathname}
-              onClick={() => onClickMenu(menu.pathname)}
-              onKeyDown={() => onClickMenu(menu.pathname)}
-              className={`${styles.sideMenuButton} ${
-                pathname === `/${menu.pathname}` ? styles.active : ''
-              }`}
-            >
-              {menu.value}
-            </li>
-          ))}
-        </ul>
+        <nav>
+          <ul className={styles.sideMenu} role="menubar">
+            {SIDE_MENU.map((menu) => (
+              <li
+                key={menu.pathname}
+                onClick={() => onClickMenu(menu.pathname)}
+                onKeyDown={() => onClickMenu(menu.pathname)}
+                className={`${styles.sideMenuButton} ${
+                  pathname === `/${menu.pathname}` ? styles.active : ''
+                }`}
+                role="menuitem"
+                aria-label={menu.pathname}
+              >
+                {menu.value}
+              </li>
+            ))}
+          </ul>
+        </nav>
       </div>
-    </div>
+    </header>
   );
 }
diff --git a/app/frontend/src/components/Pagination/index.tsx b/app/frontend/src/components/Pagination/index.tsx
@@ -31,7 +31,12 @@ export function Pagination({
 
   return (
     <div className={`${styles.container} ${className}`}>
-      <button type="button" onClick={onClickPrev} disabled={isFirstPage}>
+      <button
+        type="button"
+        onClick={onClickPrev}
+        disabled={isFirstPage}
+        aria-label="prev-page"
+      >
         {arrow}
       </button>
       {array.map((page) => (
@@ -52,6 +57,7 @@ export function Pagination({
         className={styles.rotateArrow}
         onClick={onClickNext}
         disabled={isLastPage}
+        aria-label="next-page"
       >
         {arrow}
       </button>

diff --git a/app/frontend/src/pages/Mogaco/MogacoList.tsx b/app/frontend/src/pages/Mogaco/MogacoList.tsx
@@ -49,37 +49,25 @@ export function MogacoList({ currentPage }: MogacoListProp) {
   }
 
   return (
-    <div className={styles.container}>
+    <main className={styles.container}>
       {mogacoList && mogacoList.length > 0 ? (
         mogacoList.map(
-          ({
-            id,
-            groupId,
-            title,
-            contents,
-            date,
-            maxHumanCount,
-            address,
-            status,
-            group,
-          }) => (
+          ({ id, title, contents, date, address, status, group }) => (
             <MogacoItem
               key={id}
               id={id}
+              group={group}
               title={title}
-              groupId={groupId}
               contents={contents}
-              maxHumanCount={maxHumanCount}
-              address={address}
               date={date}
+              address={address}
               status={status}
-              group={group}
             />
           ),
         )
       ) : (
         <EmptyPage />
       )}
-    </div>
+    </main>
   );
 }