From 05b4e7c383882f5160ee9f197289d656e7d55deb Mon Sep 17 00:00:00 2001
From: chaeney <chaekey@gmail.com>
Date: Fri, 18 Oct 2024 13:46:12 +0900
Subject: [PATCH] =?UTF-8?q?[KAN-138]=20refactor:=20=EC=A0=91=EA=B7=BC?=
 =?UTF-8?q?=EC=84=B1=20=EA=B0=9C=EC=84=A0=EC=9D=84=20=EC=9C=84=ED=95=B4=20?=
 =?UTF-8?q?button=EC=97=90=20aria-label=20=EC=86=8D=EC=84=B1=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/components/Card/Card.tsx                           | 1 +
 src/app/components/CardList/CardList.tsx                   | 1 +
 src/app/components/Gnb/Gnb.tsx                             | 2 +-
 src/app/components/Gnb/ToggleTheme.tsx                     | 5 +++++
 src/app/components/Input/Input.tsx                         | 3 +++
 src/app/components/Modal/CalendarModal.tsx                 | 1 +
 src/app/components/Modal/ModalHeader.tsx                   | 2 +-
 src/app/components/Pagination/Pagination.tsx               | 2 ++
 src/app/components/Popup/Popup.tsx                         | 6 +++++-
 src/app/components/Tab/TopTab.tsx                          | 2 +-
 src/app/components/UserProfileLayout/UserProfileHeader.tsx | 2 +-
 11 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/src/app/components/Card/Card.tsx b/src/app/components/Card/Card.tsx
index 75117961..e0a5e5a0 100644
--- a/src/app/components/Card/Card.tsx
+++ b/src/app/components/Card/Card.tsx
@@ -172,6 +172,7 @@ const CardOverlay = ({
         data-testid='save-discard-button'
         className='right-24 mt-24 md:absolute md:top-24 md:mt-0'
         onClick={handleButtonClick}
+        aria-label='종료된 모임을 찜하기 해제'
       >
         <IconSaveDiscardBtn className='h-36 w-116 md:hidden' />
         <IconSaveDiscard className='hidden h-48 w-48 md:block' />
diff --git a/src/app/components/CardList/CardList.tsx b/src/app/components/CardList/CardList.tsx
index 5a163218..d70ddf83 100644
--- a/src/app/components/CardList/CardList.tsx
+++ b/src/app/components/CardList/CardList.tsx
@@ -119,6 +119,7 @@ const CardList = ({ data, isSaved, handleButtonClick }: CardProps) => {
             type='button'
             className='right-24 mt-24 md:absolute md:top-24 md:mt-0'
             onClick={handleToggleSave}
+            aria-label='종료된 모임을 찜하기 해제'
           >
             <IconSaveDiscardBtn className='h-36 w-116 md:hidden' />
             <IconSaveDiscard className='hidden h-48 w-48 md:block' />
diff --git a/src/app/components/Gnb/Gnb.tsx b/src/app/components/Gnb/Gnb.tsx
index 00d42304..7cad53a6 100644
--- a/src/app/components/Gnb/Gnb.tsx
+++ b/src/app/components/Gnb/Gnb.tsx
@@ -46,7 +46,7 @@ const Gnb = ({ user, token }: GnbProps) => {
     <header className='fixed left-0 top-0 z-popup w-full border-b-2 border-var-gray-900 bg-var-orange-600'>
       <div className='mx-16 flex max-w-[1200px] items-center justify-between md:mx-24 lg:mx-auto'>
         <nav className='flex items-center'>
-          <Link href='/gatherings'>
+          <Link href='/gatherings' aria-label='메인 페이지로 이동'>
             <Logo className='mr-20 h-40 w-72' />
           </Link>
           <ul className='flex gap-12 md:gap-24'>
diff --git a/src/app/components/Gnb/ToggleTheme.tsx b/src/app/components/Gnb/ToggleTheme.tsx
index 945299bc..22a24182 100644
--- a/src/app/components/Gnb/ToggleTheme.tsx
+++ b/src/app/components/Gnb/ToggleTheme.tsx
@@ -16,6 +16,11 @@ const ToggleTheme = () => {
     <button
       onClick={() => setTheme(resolvedTheme === 'dark' ? 'light' : 'dark')}
       className='relative h-32 w-60 rounded-full bg-var-orange-700 shadow-inner'
+      aria-label={
+        resolvedTheme === 'dark'
+          ? 'Switch to light theme'
+          : 'Switch to dark theme'
+      }
     >
       <div
         className={`absolute left-2 top-1/2 flex size-24 -translate-y-1/2 items-center justify-center rounded-full bg-white text-var-orange-600 transition-all duration-300 dark:translate-x-[26px] dark:bg-neutral-900 dark:text-var-orange-400`}
diff --git a/src/app/components/Input/Input.tsx b/src/app/components/Input/Input.tsx
index 452a0c8f..26b3f8f3 100644
--- a/src/app/components/Input/Input.tsx
+++ b/src/app/components/Input/Input.tsx
@@ -62,6 +62,9 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
             }}
             tabIndex={-1}
             className='absolute right-16 top-1/2 size-24 -translate-y-1/2'
+            aria-label={
+              inputType === 'password' ? 'show password' : 'hide password'
+            }
           >
             {inputType === 'password' ? (
               <IconVisivilityOff />
diff --git a/src/app/components/Modal/CalendarModal.tsx b/src/app/components/Modal/CalendarModal.tsx
index b5e13c8a..b1474af5 100644
--- a/src/app/components/Modal/CalendarModal.tsx
+++ b/src/app/components/Modal/CalendarModal.tsx
@@ -29,6 +29,7 @@ const CalendarModal = ({
         data-testid='close-modal-button'
         className='absolute right-16 top-16'
         onClick={onCloseModal}
+        aria-label='close modal'
       >
         <IconX className='h-20 w-20 text-var-gray-900 dark:text-neutral-100' />
       </button>
diff --git a/src/app/components/Modal/ModalHeader.tsx b/src/app/components/Modal/ModalHeader.tsx
index 44e628c3..b85afc4b 100644
--- a/src/app/components/Modal/ModalHeader.tsx
+++ b/src/app/components/Modal/ModalHeader.tsx
@@ -11,7 +11,7 @@ const ModalHeader = ({ title, onClose }: ModalHeaderProps) => {
   return (
     <div className='flex items-center justify-between'>
       <h1 className='text-18 font-semibold'>{title}</h1>
-      <button onClick={onClose}>
+      <button onClick={onClose} aria-label='close modal'>
         <IconX className='h-24 w-24 text-var-gray-900 dark:text-neutral-100' />
       </button>
     </div>
diff --git a/src/app/components/Pagination/Pagination.tsx b/src/app/components/Pagination/Pagination.tsx
index 02419ef1..eb8329b6 100644
--- a/src/app/components/Pagination/Pagination.tsx
+++ b/src/app/components/Pagination/Pagination.tsx
@@ -94,6 +94,7 @@ const Pagination = ({
         }`}
         onClick={() => handlePageClick(currentPage - 1)}
         disabled={currentPage === 1}
+        aria-label='이전 페이지로 이동'
       >
         <IconChevronLeft className='text-var-gray-800 dark:text-neutral-50' />
       </button>
@@ -130,6 +131,7 @@ const Pagination = ({
         }`}
         onClick={() => handlePageClick(currentPage + 1)}
         disabled={currentPage === totalPages}
+        aria-label='다음 페이지로 이동'
       >
         <IconChevronLeft className='rotate-180 text-var-gray-800 dark:text-neutral-50' />
       </button>
diff --git a/src/app/components/Popup/Popup.tsx b/src/app/components/Popup/Popup.tsx
index 5fdf3cbe..c848fdec 100644
--- a/src/app/components/Popup/Popup.tsx
+++ b/src/app/components/Popup/Popup.tsx
@@ -37,7 +37,11 @@ const Popup = ({
         >
           {/* 닫기 버튼 */}
           <div className='flex w-full justify-end'>
-            <button data-testid='close-modal-button' onClick={onClickClose}>
+            <button
+              data-testid='close-modal-button'
+              onClick={onClickClose}
+              aria-label='close modal'
+            >
               <IconX className='h-24 w-24 text-var-gray-900 dark:text-neutral-100' />
             </button>
           </div>
diff --git a/src/app/components/Tab/TopTab.tsx b/src/app/components/Tab/TopTab.tsx
index 6b44455e..c1246a09 100644
--- a/src/app/components/Tab/TopTab.tsx
+++ b/src/app/components/Tab/TopTab.tsx
@@ -8,7 +8,7 @@ interface TopTabProps {
 const TopTab = ({ isActive, children }: TopTabProps) => {
   return (
     <div
-      className={`flex cursor-pointer items-center gap-4 py-[18px] text-14 font-semibold md:text-16 ${isActive ? 'text-var-gray-900' : 'text-var-orange-50'}`}
+      className={`flex cursor-pointer items-center gap-4 py-[18px] text-14 md:text-16 ${isActive ? 'font-bold text-var-gray-900' : 'font-semibold text-var-orange-50'}`}
     >
       {children}
     </div>
diff --git a/src/app/components/UserProfileLayout/UserProfileHeader.tsx b/src/app/components/UserProfileLayout/UserProfileHeader.tsx
index c3021a90..821db122 100644
--- a/src/app/components/UserProfileLayout/UserProfileHeader.tsx
+++ b/src/app/components/UserProfileLayout/UserProfileHeader.tsx
@@ -10,7 +10,7 @@ const UserProfileHeader = ({ toggleModal }: UserProfileHeaderProps) => {
       <div className='flex items-center justify-between rounded-t-[24px] bg-var-orange-400 p-4 px-24 pb-16 pt-[14px]'>
         <div className='text-18 font-semibold text-var-gray-900'>내 프로필</div>
         <ImageProfile className='mx-auto mb-[-26px] h-40 w-156 md:mr-156' />
-        <button onClick={toggleModal}>
+        <button onClick={toggleModal} aria-label='edit profile modal open'>
           <BtnEdit className='size-32' />
         </button>
       </div>