Merge pull request StudyBadge-TenTen#148 from StudyBadge-TenTen/test

[StudyBadge_FE StudyBadge-TenTen#117 ]: 접근성 개선 코드 삽입
rabyeoljji · Aug 21, 2024 · 6fb9d4c · 6fb9d4c
2 parents 6c1e734 + 4519f73
commit 6fb9d4c
Show file tree

Hide file tree

Showing 18 changed files with 194 additions and 119 deletions.
diff --git a/src/components/auth/KakaoLogin.tsx b/src/components/auth/KakaoLogin.tsx
@@ -23,8 +23,18 @@ const KakaoLogin: React.FC = () => {
 
   return (
     <>
-      <img onClick={handleKakaoLogin} src={KAKAO_BTN_BIG} className="hidden md:inline-block mt-2 cursor-pointer" />
-      <img onClick={handleKakaoLogin} src={KAKAO_BTN_SMALL} className="md:hidden mt-2 cursor-pointer" />
+      <img
+        onClick={handleKakaoLogin}
+        src={KAKAO_BTN_BIG}
+        alt="카카오 로그인 버튼"
+        className="hidden md:inline-block mt-2 cursor-pointer"
+      />
+      <img
+        onClick={handleKakaoLogin}
+        src={KAKAO_BTN_SMALL}
+        alt="카카오 로그인 버튼"
+        className="md:hidden mt-2 cursor-pointer"
+      />
     </>
   );
 };

diff --git a/src/components/auth/NaverLogin.tsx b/src/components/auth/NaverLogin.tsx
@@ -21,6 +21,7 @@ const NaverLogin: React.FC = () => {
   return (
     <button
       onClick={handleNaverLogin}
+      name="네이버 로그인"
       className="w-[183px] md:w-[300px] btn-blue bg-[#00C73C] hover:bg-[#00C73C] text-white p-0 py-1 rounded mt-4 flex justify-center items-center"
     >
       <img src={NAVER_ICON} className="w-8" />

diff --git a/src/components/channel/MemberList.tsx b/src/components/channel/MemberList.tsx
@@ -128,10 +128,18 @@ const MemberList = ({ setNewSubLeader, setModal, isStudyEnd }: MemberListPropsTy
                       key={member.studyMemberId}
                       className={`w-[210px] h-80 border border-solid border-Gray-3 rounded-[50px] flex flex-col ${!isStudyEnd && data.leader ? "justify-between" : "justify-center"} items-center px-4 py-8 m-2 relative`}
                     >
-                      {member.badgeLevel === "NONE" && <img src={NONE_BADGE} className="absolute w-16 right-8" />}
-                      {member.badgeLevel === "BRONZE" && <img src={BRONZE_BADGE} className="absolute w-16 right-8" />}
-                      {member.badgeLevel === "SILVER" && <img src={SILVER_BADGE} className="absolute w-16 right-8" />}
-                      {member.badgeLevel === "GOLD" && <img src={GOLD_BADGE} className="absolute w-16 right-8" />}
+                      {member.badgeLevel === "NONE" && (
+                        <img src={NONE_BADGE} alt="기본뱃지" className="absolute w-16 right-8" />
+                      )}
+                      {member.badgeLevel === "BRONZE" && (
+                        <img src={BRONZE_BADGE} alt="브론즈뱃지" className="absolute w-16 right-8" />
+                      )}
+                      {member.badgeLevel === "SILVER" && (
+                        <img src={SILVER_BADGE} alt="실버뱃지" className="absolute w-16 right-8" />
+                      )}
+                      {member.badgeLevel === "GOLD" && (
+                        <img src={GOLD_BADGE} alt="골드뱃지" className="absolute w-16 right-8" />
+                      )}
                       <div className="flex flex-col justify-center items-center">
                         {member.imageUrl ? (
                           <img
@@ -224,10 +232,18 @@ const MemberList = ({ setNewSubLeader, setModal, isStudyEnd }: MemberListPropsTy
                       key={member.memberId}
                       className={`w-[210px] h-80 border border-solid border-Gray-3 rounded-[50px] flex flex-col ${!isStudyEnd && data.leader ? "justify-between" : "justify-center"} items-center px-4 py-8 m-2 relative`}
                     >
-                      {member.badgeLevel === "NONE" && <img src={NONE_BADGE} className="absolute w-16 right-8" />}
-                      {member.badgeLevel === "BRONZE" && <img src={BRONZE_BADGE} className="absolute w-16 right-8" />}
-                      {member.badgeLevel === "SILVER" && <img src={SILVER_BADGE} className="absolute w-16 right-8" />}
-                      {member.badgeLevel === "GOLD" && <img src={GOLD_BADGE} className="absolute w-16 right-8" />}
+                      {member.badgeLevel === "NONE" && (
+                        <img src={NONE_BADGE} alt="기본뱃지" className="absolute w-16 right-8" />
+                      )}
+                      {member.badgeLevel === "BRONZE" && (
+                        <img src={BRONZE_BADGE} alt="브론즈뱃지" className="absolute w-16 right-8" />
+                      )}
+                      {member.badgeLevel === "SILVER" && (
+                        <img src={SILVER_BADGE} alt="실버뱃지" className="absolute w-16 right-8" />
+                      )}
+                      {member.badgeLevel === "GOLD" && (
+                        <img src={GOLD_BADGE} alt="골드뱃지" className="absolute w-16 right-8" />
+                      )}
                       <div className="flex flex-col justify-center items-center">
                         {member.imageUrl ? (
                           <img

diff --git a/src/components/channel/Recruitment.tsx b/src/components/channel/Recruitment.tsx
@@ -167,10 +167,18 @@ const Recruitment = (): JSX.Element => {
                           </div>
                         )}
                         <div className="w-fit h-full flex flex-col justify-center items-center">
-                          {participant.badgeLevel === "NONE" && <img src={NONE_BADGE} className="w-16" />}
-                          {participant.badgeLevel === "BRONZE" && <img src={BRONZE_BADGE} className="w-16" />}
-                          {participant.badgeLevel === "SILVER" && <img src={SILVER_BADGE} className="w-16" />}
-                          {participant.badgeLevel === "GOLD" && <img src={GOLD_BADGE} className="w-16" />}
+                          {participant.badgeLevel === "NONE" && (
+                            <img src={NONE_BADGE} alt="기본뱃지" className="w-16" />
+                          )}
+                          {participant.badgeLevel === "BRONZE" && (
+                            <img src={BRONZE_BADGE} alt="브론즈뱃지" className="w-16" />
+                          )}
+                          {participant.badgeLevel === "SILVER" && (
+                            <img src={SILVER_BADGE} alt="실버뱃지" className="w-16" />
+                          )}
+                          {participant.badgeLevel === "GOLD" && (
+                            <img src={GOLD_BADGE} alt="골드뱃지" className="w-16" />
+                          )}
                           <p className="text-xl font-bold mt-2">{participant.name}</p>
                         </div>
                       </div>

diff --git a/src/components/common/Carousel.tsx b/src/components/common/Carousel.tsx
@@ -39,7 +39,7 @@ const MainCarousel = (): JSX.Element => {
         >
           {carouselList.map((item, index) => (
             <div key={item.description} className="relative">
-              <img src={item.imgUrl} alt={`Carousel item ${index}`} />
+              <img src={item.imgUrl} alt={`슬라이드 이미지 ${index}`} />
               <div className="carousel-description absolute w-full h-48 left-auto right-auto top-1/3 sm:top-1/4 md:bottom-1/3 mb-10 text-left lg:container px-4 md:px-10">
                 <h2 className="text-2xl text-white font-bold">{item.title}</h2>
                 <p className="text-white">{item.description}</p>

diff --git a/src/components/layout/Footer.tsx b/src/components/layout/Footer.tsx
@@ -9,7 +9,7 @@ const Footer = (): JSX.Element => {
           <br />
           created by team TenTen
         </div>
-        <img src={LOGO} className="h-20 md:h-44 mx-16" />
+        <img src={LOGO} alt="스터디 뱃지 로고" className="h-20 md:h-44 mx-16" />
         <div className="text-right w-full text-center sm:w-20 md:w-56 mr-8">
           <b>CONTACT</b>
           <br />

diff --git a/src/components/layout/Header.tsx b/src/components/layout/Header.tsx
@@ -115,16 +115,20 @@ const Header = (): JSX.Element => {
           <img
             src={LOGO}
             className="h-24 md:h-16 cursor-pointer"
-            alt="STUDY-BADGE-LOGO"
+            alt="스터디 뱃지 로고"
             onClick={() => {
               navigate("/");
               window.location.reload();
             }}
           />
           <form className="hidden md:inline-block w-1/2 mx-8" onSubmit={handleSubmit}>
+            <label htmlFor="searchBar" className="hidden">
+              검색창
+            </label>
             <input
               id="searchBar"
               type="text"
+              name="keyword"
               value={inputValue}
               onChange={handleInputChange}
               className=" w-full h-12 border border-solid border-Gray-3 rounded-[50px] indent-5"

diff --git a/src/components/layout/header_contents/MobileSearchBar.tsx b/src/components/layout/header_contents/MobileSearchBar.tsx
@@ -18,9 +18,13 @@ const MobileSearchBar = ({ isOpen, handleSubmit, inputValue, handleInputChange }
           className={`mobile-search-bar md:hidden fixed top-0 z-20 w-full h-20 bg-white shadow-card px-6 py-4 transition-all`}
         >
           <form className="w-full" onSubmit={handleSubmit}>
+            <label htmlFor="searchBar" className="hidden">
+              검색창
+            </label>
             <input
               id="searchBar"
               type="text"
+              name="keyword"
               value={inputValue}
               onChange={handleInputChange}
               className=" w-full h-12 border border-solid border-Gray-3 rounded-[50px] indent-5"

diff --git a/src/components/layout/header_contents/ProfileBtn.tsx b/src/components/layout/header_contents/ProfileBtn.tsx
@@ -26,7 +26,7 @@ const ProfileBtn = (): JSX.Element => {
   // };
 
   return (
-    <button type="button" className="profile-btn mr-8 md:mr-4" onClick={() => handleClick()}>
+    <button type="button" name="프로필 버튼" className="profile-btn mr-8 md:mr-4" onClick={() => handleClick()}>
       <svg
         xmlns="http://www.w3.org/2000/svg"
         width="30"

diff --git a/src/components/profile/Profile.tsx b/src/components/profile/Profile.tsx
@@ -109,10 +109,10 @@ const Profile = (): JSX.Element => {
                 </div>
               </div>
               <div className="badge w-1/3 flex justify-center items-center mt-8 md:mt-0">
-                {data.badgeLevel === "NONE" && <img src={NONE_BADGE} className="w-28" />}
-                {data.badgeLevel === "BRONZE" && <img src={BRONZE_BADGE} className="w-28" />}
-                {data.badgeLevel === "SILVER" && <img src={SILVER_BADGE} className="w-28" />}
-                {data.badgeLevel === "GOLD" && <img src={GOLD_BADGE} className="w-28" />}
+                {data.badgeLevel === "NONE" && <img src={NONE_BADGE} alt="기본뱃지" className="w-28" />}
+                {data.badgeLevel === "BRONZE" && <img src={BRONZE_BADGE} alt="브론즈뱃지" className="w-28" />}
+                {data.badgeLevel === "SILVER" && <img src={SILVER_BADGE} alt="실버뱃지" className="w-28" />}
+                {data.badgeLevel === "GOLD" && <img src={GOLD_BADGE} alt="골드뱃지" className="w-28" />}
               </div>
             </div>
             <div className="w-full h-fit bg-Gray-1 border-x border-b border-solid border-Gray-3 rounded-b-[30px] flex flex-col md:flex-row justify-between items-center px-10 py-8 md:py-4">