From c066254a9e6a423e5835b8f76388fc46a6029776 Mon Sep 17 00:00:00 2001
From: Hyelim Choi <HyelimChoi01@gmail.com>
Date: Mon, 7 Oct 2024 16:37:07 +0900
Subject: [PATCH 1/8] =?UTF-8?q?feat:=20=EB=9E=9C=EB=94=A9=20=ED=8E=98?=
 =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EC=A0=91=EA=B7=BC=EC=84=B1=20=EA=B0=9C?=
 =?UTF-8?q?=EC=84=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/Landing/FifthSection.tsx          | 2 +-
 frontend/src/components/Landing/FirstSection.tsx          | 8 ++++----
 frontend/src/components/Landing/FourthSection.tsx         | 4 ++--
 frontend/src/components/Landing/SecondSection.tsx         | 2 +-
 frontend/src/components/Landing/ThirdSection.tsx          | 4 ++--
 frontend/src/components/_common/Button/Button.tsx         | 1 +
 frontend/src/components/_common/Footer/FooterButton.tsx   | 8 ++++----
 frontend/src/components/_common/Header/Header.tsx         | 2 +-
 .../components/_common/KakaoLogin/KakaoLoginButton.tsx    | 5 +++--
 9 files changed, 19 insertions(+), 17 deletions(-)

diff --git a/frontend/src/components/Landing/FifthSection.tsx b/frontend/src/components/Landing/FifthSection.tsx
index dd6fcb0ac..b9d1087f2 100644
--- a/frontend/src/components/Landing/FifthSection.tsx
+++ b/frontend/src/components/Landing/FifthSection.tsx
@@ -13,7 +13,7 @@ const FifthSection = () => {
             시작해 볼까요?
           </S.Text>
           <S.IconBox>
-            <LampIcon width={80} />
+            <LampIcon width={80} aria-hidden="true" />
           </S.IconBox>
           <S.EmptyBox height={20} />
           <S.CenterBox>
diff --git a/frontend/src/components/Landing/FirstSection.tsx b/frontend/src/components/Landing/FirstSection.tsx
index 99d6f286a..5ab72b6dc 100644
--- a/frontend/src/components/Landing/FirstSection.tsx
+++ b/frontend/src/components/Landing/FirstSection.tsx
@@ -12,15 +12,15 @@ const FirstSection = () => {
   return (
     <>
       <S.LogoBox>
-        <BangBangIcon width="350" height="130" />
+        <BangBangIcon width="350" height="130" aria-hidden="true" />
         <S.TextWrapper>
           <S.SubtitleText>방 구하기</S.SubtitleText>
           <S.SubtitleText>이거 하나로 끝!</S.SubtitleText>
           <S.CheckIconBox>
-            <SmallCheck />
+            <SmallCheck aria-hidden="true" />
           </S.CheckIconBox>
         </S.TextWrapper>
-        <BangGgoodTextIcon width={220} height={50} />
+        <BangGgoodTextIcon width={220} height={50} aria-hidden="true" />
       </S.LogoBox>
       <S.ButtonWrapper>
         <KakaoLoginButton />
@@ -29,7 +29,7 @@ const FirstSection = () => {
       <S.MoreBox>
         <S.SubText>방끗을 소개할게요!</S.SubText>
         <S.MoveUpDownAnimationBox>
-          <ArrowDownSmall />
+          <ArrowDownSmall aria-hidden="true" />
         </S.MoveUpDownAnimationBox>
       </S.MoreBox>
     </>
diff --git a/frontend/src/components/Landing/FourthSection.tsx b/frontend/src/components/Landing/FourthSection.tsx
index ab4ba211c..1bb669833 100644
--- a/frontend/src/components/Landing/FourthSection.tsx
+++ b/frontend/src/components/Landing/FourthSection.tsx
@@ -29,12 +29,12 @@ const FourthSection = () => {
         <S.EmptyBox height={10} />
         <S.Observer ref={ref} />
         <S.AnimationBox isIntersecting={isIntersecting}>
-          <img src={customPageScreen} width="200px" />
+          <img src={customPageScreen} width="200px" alt="" />
         </S.AnimationBox>
         <S.Text margin={30}>
           방 구하기 초보라 아무것도 모르겠다면,
           <br />
-          <S.Highlight>집 구하기 꿀팁이 담긴 아티클</S.Highlight>을
+          <S.Highlight>방 구하기 꿀팁이 담긴 아티클</S.Highlight>을
           <br /> 읽으면서 방 구하기 고수가 되어보아요!
           <S.Observer ref={ref2} />
           <S.EmptyBox height={20} />
diff --git a/frontend/src/components/Landing/SecondSection.tsx b/frontend/src/components/Landing/SecondSection.tsx
index 221a7561e..e878d54e6 100644
--- a/frontend/src/components/Landing/SecondSection.tsx
+++ b/frontend/src/components/Landing/SecondSection.tsx
@@ -32,7 +32,7 @@ const SecondSection = () => {
       </S.TextBox>
       <S.Observer ref={ref} />
       <S.AnimationBox isIntersecting={isIntersecting}>
-        <img src={mainPageScreen} width="200px" />
+        <img src={mainPageScreen} width="200px" alt="" />
       </S.AnimationBox>
     </>
   );
diff --git a/frontend/src/components/Landing/ThirdSection.tsx b/frontend/src/components/Landing/ThirdSection.tsx
index 46c523366..9d49a46fe 100644
--- a/frontend/src/components/Landing/ThirdSection.tsx
+++ b/frontend/src/components/Landing/ThirdSection.tsx
@@ -62,9 +62,9 @@ const ThirdSection = () => {
         <S.Observer ref={ref2} />
         <S.AnimationBox isIntersecting={isIntersecting2}>
           <S.ChecklistImgBox>
-            <img src={checkingPageScreen} />
+            <img src={checkingPageScreen} alt="" />
             <S.PencilIconBox>
-              <PencilIcon width={70} height={90} />
+              <PencilIcon width={70} height={90} aria-hidden="true" />
             </S.PencilIconBox>
           </S.ChecklistImgBox>
         </S.AnimationBox>
diff --git a/frontend/src/components/_common/Button/Button.tsx b/frontend/src/components/_common/Button/Button.tsx
index 9ebeafe65..0b5c24f01 100644
--- a/frontend/src/components/_common/Button/Button.tsx
+++ b/frontend/src/components/_common/Button/Button.tsx
@@ -37,6 +37,7 @@ const Button = ({
       onClick={color !== 'disabled' ? onClick : () => {}}
       {...rest}
       disabled={disabled}
+      aria-label={label}
     >
       <FlexBox.Horizontal>
         {Icon && <Icon />}
diff --git a/frontend/src/components/_common/Footer/FooterButton.tsx b/frontend/src/components/_common/Footer/FooterButton.tsx
index 5331f4432..4cfbd9818 100644
--- a/frontend/src/components/_common/Footer/FooterButton.tsx
+++ b/frontend/src/components/_common/Footer/FooterButton.tsx
@@ -22,25 +22,25 @@ const FooterButton = ({ logo, isActive = false }: Props) => {
     <S.Wrapper>
       {logo === 'home' && (
         <>
-          <Home stroke={stroke} fill={stroke} />
+          <Home stroke={stroke} fill={stroke} aria-label="홈 바로가기" />
           <S.Text isActive={isActive}>홈</S.Text>
         </>
       )}
       {logo === 'checklist' && (
         <>
-          <Checklist stroke={stroke} fill={fill} />
+          <Checklist stroke={stroke} fill={fill} aria-label="체크리스트 바로가기" />
           <S.Text isActive={isActive}>체크리스트</S.Text>
         </>
       )}
       {logo === 'article' && (
         <>
-          <Article stroke={stroke} fill={fill} />
+          <Article stroke={stroke} fill={fill} aria-label="아티클 바로가기" />
           <S.Text isActive={isActive}>아티클</S.Text>
         </>
       )}
       {logo === 'profile' && (
         <>
-          <Profile stroke={stroke} fill={fill} />
+          <Profile stroke={stroke} fill={fill} aria-label="마이페이지 바로가기" />
           <S.Text isActive={isActive}>마이페이지</S.Text>
         </>
       )}
diff --git a/frontend/src/components/_common/Header/Header.tsx b/frontend/src/components/_common/Header/Header.tsx
index ed1726f3c..6deafefcd 100644
--- a/frontend/src/components/_common/Header/Header.tsx
+++ b/frontend/src/components/_common/Header/Header.tsx
@@ -81,7 +81,7 @@ const Header = Object.assign(HeaderWrapper, {
   Logo: () => {
     return (
       <Link to={ROUTE_PATH.home}>
-        <BangGgoodTextIcon />
+        <BangGgoodTextIcon aria-label="" />
       </Link>
     );
   },
diff --git a/frontend/src/components/_common/KakaoLogin/KakaoLoginButton.tsx b/frontend/src/components/_common/KakaoLogin/KakaoLoginButton.tsx
index 511ec5071..76a4a5265 100644
--- a/frontend/src/components/_common/KakaoLogin/KakaoLoginButton.tsx
+++ b/frontend/src/components/_common/KakaoLogin/KakaoLoginButton.tsx
@@ -9,7 +9,7 @@ const KakaoLoginButton = () => {
 
   return (
     <S.KakaoLoginButton onClick={moveToKakao}>
-      <KakaoLogo />
+      <KakaoLogo aria-hidden="true" />
       <S.Text>카카오톡으로 시작하기</S.Text>
     </S.KakaoLoginButton>
   );
@@ -22,7 +22,8 @@ const S = {
     width: 100%;
     height: 5rem;
     ${flexRow}
-    justify-content: space-evenly;
+    gap: 0.5rem;
+    justify-content: center;
     align-items: center;
     border-radius: 0.8rem;
 

From 2efe537c32dffc3203f48c37184f925c2b4dc2d0 Mon Sep 17 00:00:00 2001
From: Hyelim Choi <HyelimChoi01@gmail.com>
Date: Mon, 7 Oct 2024 16:54:22 +0900
Subject: [PATCH 2/8] =?UTF-8?q?refactor:=20=EB=B6=88=ED=95=84=EC=9A=94?=
 =?UTF-8?q?=ED=95=9C=20=EC=9D=B4=EB=AF=B8=EC=A7=80=20=EB=9D=BC=EB=B2=A8=20?=
 =?UTF-8?q?=EC=A0=9C=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/ChecklistList/ChecklistCard.tsx  | 2 +-
 frontend/src/components/ChecklistList/CustomBanner.tsx   | 4 ++--
 frontend/src/components/Main/ArticlePreviewCard.tsx      | 9 +++++++--
 frontend/src/components/Main/ArticleSection.tsx          | 4 ++--
 frontend/src/components/Main/ChecklistPreviewCard.tsx    | 2 +-
 .../components/NewChecklist/NewRoomInfoForm/Address.tsx  | 2 +-
 frontend/src/components/_common/Button/Button.tsx        | 2 +-
 frontend/src/components/_common/Header/Header.tsx        | 3 ++-
 frontend/src/components/_common/Like/LikeButton.tsx      | 1 +
 frontend/src/pages/ChecklistListPage.tsx                 | 2 +-
 frontend/src/pages/MyPage.tsx                            | 2 +-
 11 files changed, 20 insertions(+), 13 deletions(-)

diff --git a/frontend/src/components/ChecklistList/ChecklistCard.tsx b/frontend/src/components/ChecklistList/ChecklistCard.tsx
index 6e8ce0d5e..b1dfb5dbb 100644
--- a/frontend/src/components/ChecklistList/ChecklistCard.tsx
+++ b/frontend/src/components/ChecklistList/ChecklistCard.tsx
@@ -24,7 +24,7 @@ const ChecklistCard = ({ checklist }: Props) => {
     <S.Container onClick={handleMoveToDetail}>
       <S.Row>
         <S.LocationWrapper>
-          <LocationLineIcon />
+          <LocationLineIcon aria-hidden="true" />
           {formattedUndefined(address, 'string', '주소')}
         </S.LocationWrapper>
         <LikeButton isLiked={isLiked} checklistId={checklistId} />
diff --git a/frontend/src/components/ChecklistList/CustomBanner.tsx b/frontend/src/components/ChecklistList/CustomBanner.tsx
index 6772372ff..09e8deac2 100644
--- a/frontend/src/components/ChecklistList/CustomBanner.tsx
+++ b/frontend/src/components/ChecklistList/CustomBanner.tsx
@@ -11,7 +11,7 @@ const CustomBanner = ({ onClick }: Props) => {
   return (
     <S.Banner onClick={onClick}>
       <S.Wrapper>
-        <PencilIcon width={30} height={30} />
+        <PencilIcon width={30} height={30} aria-hidden="true" />
         <S.Title>체크리스트 질문</S.Title>
       </S.Wrapper>
       <S.Button>편집하기</S.Button>
@@ -46,7 +46,7 @@ const S = {
   Title: styled.span`
     ${flexCenter}
   `,
-  Button: styled.div`
+  Button: styled.button`
     padding: 0.4rem 0.8rem;
 
     background-color: ${({ theme }) => theme.palette.green500};
diff --git a/frontend/src/components/Main/ArticlePreviewCard.tsx b/frontend/src/components/Main/ArticlePreviewCard.tsx
index f74ba2646..3ed54a1a1 100644
--- a/frontend/src/components/Main/ArticlePreviewCard.tsx
+++ b/frontend/src/components/Main/ArticlePreviewCard.tsx
@@ -24,11 +24,16 @@ const ArticlePreviewCard = ({ index, article }: Props) => {
   };
 
   return (
-    <S.Container bgColor={color500} hoverColor={color600} onClick={handleClickArticle}>
+    <S.Container
+      bgColor={color500}
+      hoverColor={color600}
+      onClick={handleClickArticle}
+      aria-label="클릭하면 해당 아티클 페이지로 이동합니다"
+    >
       <S.Keyword bgColor={color600}>{keyword}</S.Keyword>
       <S.Title>{title}</S.Title>
       <S.ArrowButton>
-        <ArrowRight stroke={color600} />
+        <ArrowRight stroke={color600} aria-hidden="true" />
       </S.ArrowButton>
     </S.Container>
   );
diff --git a/frontend/src/components/Main/ArticleSection.tsx b/frontend/src/components/Main/ArticleSection.tsx
index 40d6bec9a..762419261 100644
--- a/frontend/src/components/Main/ArticleSection.tsx
+++ b/frontend/src/components/Main/ArticleSection.tsx
@@ -50,12 +50,12 @@ const S = {
   Title: styled.div`
     ${title4}
   `,
-  ShowMore: styled.div`
+  ShowMore: styled.button`
     color: ${({ theme }) => theme.palette.grey400};
     font-size: ${({ theme }) => theme.text.size.small};
     cursor: pointer;
   `,
-  CardList: styled.div`
+  CardList: styled.article`
     box-sizing: border-box;
 
     min-width: 100%;
diff --git a/frontend/src/components/Main/ChecklistPreviewCard.tsx b/frontend/src/components/Main/ChecklistPreviewCard.tsx
index 64517090d..d31a174fc 100644
--- a/frontend/src/components/Main/ChecklistPreviewCard.tsx
+++ b/frontend/src/components/Main/ChecklistPreviewCard.tsx
@@ -26,7 +26,7 @@ const ChecklistPreviewCard = ({ index, checklist }: Props) => {
 
   return (
     <S.Container onClick={handleClick}>
-      <HomeCircle color={color500} bgColor={color200} />
+      <HomeCircle color={color500} bgColor={color200} aria-hidden="true" />
       <S.Column>
         <S.Label>
           {formattedUndefined(station)}역 · {formattedUndefined(walkingTime)}분
diff --git a/frontend/src/components/NewChecklist/NewRoomInfoForm/Address.tsx b/frontend/src/components/NewChecklist/NewRoomInfoForm/Address.tsx
index 161dabd94..53ffe0122 100644
--- a/frontend/src/components/NewChecklist/NewRoomInfoForm/Address.tsx
+++ b/frontend/src/components/NewChecklist/NewRoomInfoForm/Address.tsx
@@ -18,7 +18,7 @@ const Address = () => {
       ) : (
         <FormField.TextBox text={'주소를 추가해 주세요.'} />
       )}
-      <FlexBox.Horizontal style={{ marginTop: '20px' }}>
+      <FlexBox.Horizontal style={{ marginTop: '2rem' }}>
         {/*실시간 위치 모달*/}
         <RealTimeAddressModal />
         {/*주소 찾기 모달*/}
diff --git a/frontend/src/components/_common/Button/Button.tsx b/frontend/src/components/_common/Button/Button.tsx
index 0b5c24f01..9b40ccdc6 100644
--- a/frontend/src/components/_common/Button/Button.tsx
+++ b/frontend/src/components/_common/Button/Button.tsx
@@ -40,7 +40,7 @@ const Button = ({
       aria-label={label}
     >
       <FlexBox.Horizontal>
-        {Icon && <Icon />}
+        {Icon && <Icon aria-hidden="true" />}
         <S.Text size={size}>{label}</S.Text>
       </FlexBox.Horizontal>
     </S.Button>
diff --git a/frontend/src/components/_common/Header/Header.tsx b/frontend/src/components/_common/Header/Header.tsx
index 6deafefcd..6475a548d 100644
--- a/frontend/src/components/_common/Header/Header.tsx
+++ b/frontend/src/components/_common/Header/Header.tsx
@@ -81,7 +81,7 @@ const Header = Object.assign(HeaderWrapper, {
   Logo: () => {
     return (
       <Link to={ROUTE_PATH.home}>
-        <BangGgoodTextIcon aria-label="" />
+        <BangGgoodTextIcon aria-label="방끗 로고" />
       </Link>
     );
   },
@@ -96,6 +96,7 @@ const Header = Object.assign(HeaderWrapper, {
         }}
         onClick={handleClick}
         {...props}
+        aria-label="뒤로가기"
       />
     );
   },
diff --git a/frontend/src/components/_common/Like/LikeButton.tsx b/frontend/src/components/_common/Like/LikeButton.tsx
index dd61461a4..79cf929ab 100644
--- a/frontend/src/components/_common/Like/LikeButton.tsx
+++ b/frontend/src/components/_common/Like/LikeButton.tsx
@@ -41,6 +41,7 @@ const LikeButton = ({ isLiked = false, checklistId }: Props) => {
       onClick={handleClickLike}
       fill={fill ? theme.palette.red500 : 'NONE'}
       stroke={fill ? theme.palette.red500 : theme.palette.grey500}
+      aria-label="좋아요 버튼"
     />
   );
 };
diff --git a/frontend/src/pages/ChecklistListPage.tsx b/frontend/src/pages/ChecklistListPage.tsx
index be414785a..5bd1cd45b 100644
--- a/frontend/src/pages/ChecklistListPage.tsx
+++ b/frontend/src/pages/ChecklistListPage.tsx
@@ -52,7 +52,7 @@ const ChecklistListPage = () => {
         </S.ListBox>
       </Layout>
       <FloatingButton size="extends" onClick={handleClickFloatingButton}>
-        <PlusBlack />방 체크하기
+        <PlusBlack aria-hidden="true" />방 체크하기
       </FloatingButton>
     </>
   );
diff --git a/frontend/src/pages/MyPage.tsx b/frontend/src/pages/MyPage.tsx
index 387149616..ad1227c00 100644
--- a/frontend/src/pages/MyPage.tsx
+++ b/frontend/src/pages/MyPage.tsx
@@ -28,7 +28,7 @@ const MyPage = () => {
           <S.Container style={{ width: '100%' }}>
             <S.Profile>
               <S.ProfileIcon>
-                <BangBangIcon width="100" height="100" />
+                <BangBangIcon width="100" height="100" aria-hidden="true" />
               </S.ProfileIcon>
               {`안녕하세요 ${isError ? '게스트' : user?.userName}님`}
             </S.Profile>

From 133087d8d9399154dfd0e27d516c69897bdd84fb Mon Sep 17 00:00:00 2001
From: Hyelim Choi <HyelimChoi01@gmail.com>
Date: Mon, 7 Oct 2024 17:20:09 +0900
Subject: [PATCH 3/8] =?UTF-8?q?refactor:=20=EC=9D=B4=EB=AF=B8=EC=A7=80=20?=
 =?UTF-8?q?=EC=A0=91=EA=B7=BC=EC=84=B1=20=EA=B0=9C=EC=84=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ChecklistDetail/RoomInfoSection.tsx       | 20 +++++++++----------
 .../ChecklistQuestionAnswers.tsx              |  1 +
 .../Option/OptionAllSelectBox.tsx             |  1 -
 .../Option/OptionButton/OptionButton.tsx      |  8 ++++++--
 .../NewChecklist/Option/OptionList.tsx        |  4 ++--
 .../components/_common/Checkbox/Checkbox.tsx  |  4 +++-
 .../_common/CounterBox/CounterBox.tsx         |  7 ++++++-
 .../src/components/_common/TipBox/TipBox.tsx  |  2 +-
 frontend/src/pages/ChecklistListPage.tsx      |  2 +-
 ...ge.tsx => ChecklistQuestionSelectPage.tsx} |  0
 frontend/src/routers/router.tsx               |  2 +-
 11 files changed, 31 insertions(+), 20 deletions(-)
 rename frontend/src/pages/{ChecklisQuestionSelectPage.tsx => ChecklistQuestionSelectPage.tsx} (100%)

diff --git a/frontend/src/components/ChecklistDetail/RoomInfoSection.tsx b/frontend/src/components/ChecklistDetail/RoomInfoSection.tsx
index 31d6b94e8..a3da61a48 100644
--- a/frontend/src/components/ChecklistDetail/RoomInfoSection.tsx
+++ b/frontend/src/components/ChecklistDetail/RoomInfoSection.tsx
@@ -70,18 +70,18 @@ const RoomInfoSection = ({ nearSubways, room, options, checklistId, isLiked }: P
       </S.GreenWrapper>
       <S.GapBox>
         <S.Row>
-          <Room />
+          <Room aria-hidden="true" />
           {formattedUndefined(structure, 'string', '방 구조')} / {formattedUndefined(size)} 평
         </S.Row>
         <S.Row>
-          <Stairs />
+          <Stairs aria-hidden="true" />
           {floorLevel === '지상'
             ? `${formattedUndefined(floor)}층`
             : formattedUndefined(floorLevel, 'string', '방 종류')}
         </S.Row>
       </S.GapBox>
       <S.Row>
-        <Utils /> 관리비 포함 항목 :
+        <Utils aria-hidden="true" /> 관리비 포함 항목 :
         {includedMaintenances
           ?.map(id => IncludedMaintenancesData.find(item => item.id === id)?.displayName)
           .filter(Boolean)
@@ -89,36 +89,36 @@ const RoomInfoSection = ({ nearSubways, room, options, checklistId, isLiked }: P
         {!includedMaintenances?.length && formattedUndefined(includedMaintenances?.length, 'string', '')}
       </S.Row>
       <S.Row>
-        <Calendar />
+        <Calendar aria-hidden="true" />
         {formattedUndefined(contractTerm)}개월 계약 <br />
         입주 가능일 : {formattedUndefined(occupancyMonth)}월 {occupancyPeriod}
       </S.Row>
       <S.Row>
-        <Subway />
+        <Subway aria-hidden="true" />
         <SubwayStations stations={nearSubways} />
       </S.Row>
       <S.GapBox>
         <S.Row>
-          <Building />
+          <Building aria-hidden="true" />
           {formattedUndefined(realEstate, 'string', '부동산')}
         </S.Row>
         <S.Row>
-          <Pencil />
+          <Pencil aria-hidden="true" />
           {formattedDate(createdAt ?? '', '.')}
         </S.Row>
       </S.GapBox>
       <S.Row>
-        <Options />
+        <Options aria-hidden="true" />
         {options.length
           ? options.map(option => option.optionName).join(', ')
           : formattedUndefined(options.length, 'string', '옵션')}
       </S.Row>
       <S.Row>
-        <Summary />
+        <Summary aria-hidden="true" />
         {formattedUndefined(summary, 'string', '한줄평')}
       </S.Row>
       <S.Row>
-        <LocationLineIcon height={20} width={20} />
+        <LocationLineIcon height={20} width={20} aria-hidden="true" />
         {formattedUndefined(address, 'string', '주소')} <br /> {buildingName}
       </S.Row>
       <AddressMap location={address ?? ''} />
diff --git a/frontend/src/components/NewChecklist/ChecklistQuestion/ChecklistQuestionAnswers.tsx b/frontend/src/components/NewChecklist/ChecklistQuestion/ChecklistQuestionAnswers.tsx
index ab88b9ab4..02cf39f8f 100644
--- a/frontend/src/components/NewChecklist/ChecklistQuestion/ChecklistQuestionAnswers.tsx
+++ b/frontend/src/components/NewChecklist/ChecklistQuestion/ChecklistQuestionAnswers.tsx
@@ -28,6 +28,7 @@ const ChecklistQuestionAnswers = ({ answer, questionId }: { answer: AnswerType;
             isSelected={isSelected}
             onClick={() => handleClick(option.name)}
             key={`${questionId}-${option.id}`}
+            aria-label={option.name === 'GOOD' ? '좋아요 버튼' : '싫어요 버튼'}
           />
         );
       })}
diff --git a/frontend/src/components/NewChecklist/Option/OptionAllSelectBox.tsx b/frontend/src/components/NewChecklist/Option/OptionAllSelectBox.tsx
index 7c16a74ae..572546070 100644
--- a/frontend/src/components/NewChecklist/Option/OptionAllSelectBox.tsx
+++ b/frontend/src/components/NewChecklist/Option/OptionAllSelectBox.tsx
@@ -26,7 +26,6 @@ const OptionAllSelectBox = () => {
           color={theme.palette.yellow500}
           hoverColor={theme.palette.yellow600}
         />
-
         <span>전체선택</span>
       </S.TotalSelectBox>
       <CounterBox currentCount={selectedOptions.length} totalCount={OPTION_COUNT} />
diff --git a/frontend/src/components/NewChecklist/Option/OptionButton/OptionButton.tsx b/frontend/src/components/NewChecklist/Option/OptionButton/OptionButton.tsx
index 3cd81227c..b83084157 100644
--- a/frontend/src/components/NewChecklist/Option/OptionButton/OptionButton.tsx
+++ b/frontend/src/components/NewChecklist/Option/OptionButton/OptionButton.tsx
@@ -33,8 +33,12 @@ const OptionButton = ({ option, isSelected }: { option: OptionWithIcon; isSelect
   const currentColor = isSelected ? BUTTON_COLOR.selected : BUTTON_COLOR.unSelected;
 
   return (
-    <S.Box color={currentColor.fill} borderColor={currentColor.border} onClick={handleClick}>
-      <S.IconBox>{isSelected ? <FilledIcon /> : <UnFilledIcon />}</S.IconBox>
+    <S.Box
+      color={currentColor.fill}
+      borderColor={currentColor.border}
+      onClick={handleClick}
+    >
+      <S.IconBox>{isSelected ? <FilledIcon aria-hidden="true" /> : <UnFilledIcon aria-hidden="true" />}</S.IconBox>
       <S.TextBox color={currentColor.text}>{displayName}</S.TextBox>
     </S.Box>
   );
diff --git a/frontend/src/components/NewChecklist/Option/OptionList.tsx b/frontend/src/components/NewChecklist/Option/OptionList.tsx
index 792ca2fba..aae0713c9 100644
--- a/frontend/src/components/NewChecklist/Option/OptionList.tsx
+++ b/frontend/src/components/NewChecklist/Option/OptionList.tsx
@@ -1,6 +1,6 @@
 import styled from '@emotion/styled';
 
-import MemoziedOptionButton from '@/components/NewChecklist/Option/OptionButton/OptionButton';
+import OptionButton from '@/components/NewChecklist/Option/OptionButton/OptionButton';
 import { OPTIONS } from '@/constants/options';
 import useSelectedOptionStore from '@/store/useSelectedOptionStore';
 
@@ -9,7 +9,7 @@ export const OptionList = () => {
 
   const icons = OPTIONS.map(option => {
     const isCurrentOptionSelected = optionStoreActions.isSelectedOption(option.id);
-    return <MemoziedOptionButton option={option} key={option.id} isSelected={isCurrentOptionSelected} />;
+    return <OptionButton option={option} key={option.id} isSelected={isCurrentOptionSelected} />;
   });
 
   return <S.GridContainer>{icons}</S.GridContainer>;
diff --git a/frontend/src/components/_common/Checkbox/Checkbox.tsx b/frontend/src/components/_common/Checkbox/Checkbox.tsx
index e89e18aa2..6baeb6812 100644
--- a/frontend/src/components/_common/Checkbox/Checkbox.tsx
+++ b/frontend/src/components/_common/Checkbox/Checkbox.tsx
@@ -30,7 +30,9 @@ const Checkbox = ({
 
   return (
     <S.Checkbox $color={checkedColor} $hoverColor={hoverColor} onClick={onClick}>
-      <S.FlexBox>{iconType === 'check' ? <CheckIcon /> : <PlusWhite />}</S.FlexBox>
+      <S.FlexBox>
+        {iconType === 'check' ? <CheckIcon aria-hidden="true" /> : <PlusWhite aria-hidden="true" />}
+      </S.FlexBox>
       <S.CheckboxInput type="checkbox" onChange={handleClick} checked={isChecked} />
     </S.Checkbox>
   );
diff --git a/frontend/src/components/_common/CounterBox/CounterBox.tsx b/frontend/src/components/_common/CounterBox/CounterBox.tsx
index a84c018e1..6eb600808 100644
--- a/frontend/src/components/_common/CounterBox/CounterBox.tsx
+++ b/frontend/src/components/_common/CounterBox/CounterBox.tsx
@@ -19,7 +19,12 @@ const CounterBox = ({
   totalCount,
 }: Props) => {
   return (
-    <S.Container $color={color} $gap={gap}>
+    <S.Container
+      $color={color}
+      $gap={gap}
+      aria-live="polite"
+      aria-label={`${totalCount}개 중 ${currentCount}개 선택됨`}
+    >
       {hasBracket && <span>(</span>}
       <span>{currentCount}</span>
       <span>/</span>
diff --git a/frontend/src/components/_common/TipBox/TipBox.tsx b/frontend/src/components/_common/TipBox/TipBox.tsx
index 50334fb2e..af92facd4 100644
--- a/frontend/src/components/_common/TipBox/TipBox.tsx
+++ b/frontend/src/components/_common/TipBox/TipBox.tsx
@@ -19,7 +19,7 @@ const TipBox = ({ tipType }: Props) => {
       <S.TipText>
         💡 <S.Bold>TIP</S.Bold> : {TIP_MESSAGE[tipType]}
       </S.TipText>
-      <CloseIcon onClick={closeTip} style={{ paddingRight: 1 }} />
+      <CloseIcon onClick={closeTip} style={{ paddingRight: 1 }} aria-label="클릭하면 팁박스가 삭제됩니다" />
     </S.TipBox>
   );
 };
diff --git a/frontend/src/pages/ChecklistListPage.tsx b/frontend/src/pages/ChecklistListPage.tsx
index 5bd1cd45b..be414785a 100644
--- a/frontend/src/pages/ChecklistListPage.tsx
+++ b/frontend/src/pages/ChecklistListPage.tsx
@@ -52,7 +52,7 @@ const ChecklistListPage = () => {
         </S.ListBox>
       </Layout>
       <FloatingButton size="extends" onClick={handleClickFloatingButton}>
-        <PlusBlack aria-hidden="true" />방 체크하기
+        <PlusBlack />방 체크하기
       </FloatingButton>
     </>
   );
diff --git a/frontend/src/pages/ChecklisQuestionSelectPage.tsx b/frontend/src/pages/ChecklistQuestionSelectPage.tsx
similarity index 100%
rename from frontend/src/pages/ChecklisQuestionSelectPage.tsx
rename to frontend/src/pages/ChecklistQuestionSelectPage.tsx
diff --git a/frontend/src/routers/router.tsx b/frontend/src/routers/router.tsx
index 6b81868cb..ec5298de9 100644
--- a/frontend/src/routers/router.tsx
+++ b/frontend/src/routers/router.tsx
@@ -12,7 +12,7 @@ const MyPage = React.lazy(() => import('@/pages/MyPage'));
 const NewChecklistPage = React.lazy(() => import('@/pages/NewChecklistPage'));
 const EditChecklistPage = React.lazy(() => import('@/pages/EditChecklistPage'));
 const ChecklistDetailPage = React.lazy(() => import('@/pages/ChecklistDetailPage'));
-const ChecklistQuestionSelectPage = React.lazy(() => import('@/pages/ChecklisQuestionSelectPage'));
+const ChecklistQuestionSelectPage = React.lazy(() => import('@/pages/ChecklistQuestionSelectPage'));
 const ArticleDetailPage = React.lazy(() => import('@/pages/ArticleDetailPage'));
 const LandingPage = React.lazy(() => import('@/pages/LandingPage'));
 const NotFound = React.lazy(() => import('@/pages/NotFound'));

From ef47d9728f9ff28abfa772c9450fa4f74a2a188a Mon Sep 17 00:00:00 2001
From: Hyelim Choi <HyelimChoi01@gmail.com>
Date: Mon, 7 Oct 2024 17:31:32 +0900
Subject: [PATCH 4/8] =?UTF-8?q?refactor:=20=EB=8B=B5=EB=B3=80=20=EC=84=A0?=
 =?UTF-8?q?=ED=83=9D=20=EC=9D=B4=EB=AA=A8=EC=A7=80=20=EB=B2=84=ED=8A=BC=20?=
 =?UTF-8?q?role=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../NewChecklist/ChecklistQuestion/ChecklistQuestionAnswers.tsx  | 1 +
 1 file changed, 1 insertion(+)

diff --git a/frontend/src/components/NewChecklist/ChecklistQuestion/ChecklistQuestionAnswers.tsx b/frontend/src/components/NewChecklist/ChecklistQuestion/ChecklistQuestionAnswers.tsx
index 02cf39f8f..d63ac620c 100644
--- a/frontend/src/components/NewChecklist/ChecklistQuestion/ChecklistQuestionAnswers.tsx
+++ b/frontend/src/components/NewChecklist/ChecklistQuestion/ChecklistQuestionAnswers.tsx
@@ -24,6 +24,7 @@ const ChecklistQuestionAnswers = ({ answer, questionId }: { answer: AnswerType;
 
         return (
           <AnswerIcon
+            role="button"
             answer={option.name}
             isSelected={isSelected}
             onClick={() => handleClick(option.name)}

From 65a408fc95d4b668e68ddd1293531cd89e3b48f8 Mon Sep 17 00:00:00 2001
From: Hyelim Choi <HyelimChoi01@gmail.com>
Date: Tue, 8 Oct 2024 12:04:57 +0900
Subject: [PATCH 5/8] =?UTF-8?q?refactor:=20html=20=ED=95=9C=EA=B5=AD?=
 =?UTF-8?q?=EC=96=B4=20=EC=96=B8=EC=96=B4=20=EC=84=A4=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/public/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/public/index.html b/frontend/public/index.html
index 0457c4903..7429e9ac7 100644
--- a/frontend/public/index.html
+++ b/frontend/public/index.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html>
+<html lang="ko">
   <head>
     <meta charset="utf-8" />
     <link rel="icon" href="favicon.ico" />

From 99c75791052759a1995ff9035e836434e4935b37 Mon Sep 17 00:00:00 2001
From: Hyelim Choi <HyelimChoi01@gmail.com>
Date: Tue, 8 Oct 2024 12:05:14 +0900
Subject: [PATCH 6/8] =?UTF-8?q?refactor:=20=EC=9D=B4=EB=AF=B8=EC=A7=80=20?=
 =?UTF-8?q?=EC=B9=B4=ED=85=8C=EA=B3=A0=EB=A6=AC=20=EB=9D=BC=EB=B2=A8?=
 =?UTF-8?q?=EB=A7=81=20=EC=9E=91=EC=97=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ChecklistDetail/RoomInfoSection.tsx       | 20 +++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/frontend/src/components/ChecklistDetail/RoomInfoSection.tsx b/frontend/src/components/ChecklistDetail/RoomInfoSection.tsx
index a3da61a48..32e1bd571 100644
--- a/frontend/src/components/ChecklistDetail/RoomInfoSection.tsx
+++ b/frontend/src/components/ChecklistDetail/RoomInfoSection.tsx
@@ -70,18 +70,18 @@ const RoomInfoSection = ({ nearSubways, room, options, checklistId, isLiked }: P
       </S.GreenWrapper>
       <S.GapBox>
         <S.Row>
-          <Room aria-hidden="true" />
+          <Room aria-label="방 구조" />
           {formattedUndefined(structure, 'string', '방 구조')} / {formattedUndefined(size)} 평
         </S.Row>
         <S.Row>
-          <Stairs aria-hidden="true" />
+          <Stairs aria-label="방 종류" />
           {floorLevel === '지상'
             ? `${formattedUndefined(floor)}층`
             : formattedUndefined(floorLevel, 'string', '방 종류')}
         </S.Row>
       </S.GapBox>
       <S.Row>
-        <Utils aria-hidden="true" /> 관리비 포함 항목 :
+        <Utils aria-label="관리비 포함 항목" /> 관리비 포함 항목 :
         {includedMaintenances
           ?.map(id => IncludedMaintenancesData.find(item => item.id === id)?.displayName)
           .filter(Boolean)
@@ -89,36 +89,36 @@ const RoomInfoSection = ({ nearSubways, room, options, checklistId, isLiked }: P
         {!includedMaintenances?.length && formattedUndefined(includedMaintenances?.length, 'string', '')}
       </S.Row>
       <S.Row>
-        <Calendar aria-hidden="true" />
+        <Calendar aria-label="계약 월수 / 입주 가능일" />
         {formattedUndefined(contractTerm)}개월 계약 <br />
         입주 가능일 : {formattedUndefined(occupancyMonth)}월 {occupancyPeriod}
       </S.Row>
       <S.Row>
-        <Subway aria-hidden="true" />
+        <Subway aria-label="가까운 지하철" />
         <SubwayStations stations={nearSubways} />
       </S.Row>
       <S.GapBox>
         <S.Row>
-          <Building aria-hidden="true" />
+          <Building aria-label="부동산" />
           {formattedUndefined(realEstate, 'string', '부동산')}
         </S.Row>
         <S.Row>
-          <Pencil aria-hidden="true" />
+          <Pencil aria-label="작성 일자" />
           {formattedDate(createdAt ?? '', '.')}
         </S.Row>
       </S.GapBox>
       <S.Row>
-        <Options aria-hidden="true" />
+        <Options aria-label="옵션" />
         {options.length
           ? options.map(option => option.optionName).join(', ')
           : formattedUndefined(options.length, 'string', '옵션')}
       </S.Row>
       <S.Row>
-        <Summary aria-hidden="true" />
+        <Summary aria-label="한줄평" />
         {formattedUndefined(summary, 'string', '한줄평')}
       </S.Row>
       <S.Row>
-        <LocationLineIcon height={20} width={20} aria-hidden="true" />
+        <LocationLineIcon height={20} width={20} aria-label="주소" />
         {formattedUndefined(address, 'string', '주소')} <br /> {buildingName}
       </S.Row>
       <AddressMap location={address ?? ''} />

From caa2e3a009ef4e252d64b392431a6d4a1677ba30 Mon Sep 17 00:00:00 2001
From: Hyelim Choi <HyelimChoi01@gmail.com>
Date: Tue, 8 Oct 2024 12:05:30 +0900
Subject: [PATCH 7/8] =?UTF-8?q?refactor:=20=EC=9D=B4=EB=AF=B8=EC=A7=80=20a?=
 =?UTF-8?q?lt=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/Landing/FirstSection.tsx  | 2 +-
 frontend/src/components/Landing/FourthSection.tsx | 2 +-
 frontend/src/components/Landing/ThirdSection.tsx  | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/Landing/FirstSection.tsx b/frontend/src/components/Landing/FirstSection.tsx
index 5ab72b6dc..49ba9ae02 100644
--- a/frontend/src/components/Landing/FirstSection.tsx
+++ b/frontend/src/components/Landing/FirstSection.tsx
@@ -29,7 +29,7 @@ const FirstSection = () => {
       <S.MoreBox>
         <S.SubText>방끗을 소개할게요!</S.SubText>
         <S.MoveUpDownAnimationBox>
-          <ArrowDownSmall aria-hidden="true" />
+          <ArrowDownSmall aria-label="스크롤로 하단의 정보를 확인할 수 있어요" />
         </S.MoveUpDownAnimationBox>
       </S.MoreBox>
     </>
diff --git a/frontend/src/components/Landing/FourthSection.tsx b/frontend/src/components/Landing/FourthSection.tsx
index 1bb669833..1ccec01a1 100644
--- a/frontend/src/components/Landing/FourthSection.tsx
+++ b/frontend/src/components/Landing/FourthSection.tsx
@@ -29,7 +29,7 @@ const FourthSection = () => {
         <S.EmptyBox height={10} />
         <S.Observer ref={ref} />
         <S.AnimationBox isIntersecting={isIntersecting}>
-          <img src={customPageScreen} width="200px" alt="" />
+          <img src={customPageScreen} width="200px" alt="질문 선택 화면 스크린샷" />
         </S.AnimationBox>
         <S.Text margin={30}>
           방 구하기 초보라 아무것도 모르겠다면,
diff --git a/frontend/src/components/Landing/ThirdSection.tsx b/frontend/src/components/Landing/ThirdSection.tsx
index 9d49a46fe..0866aa364 100644
--- a/frontend/src/components/Landing/ThirdSection.tsx
+++ b/frontend/src/components/Landing/ThirdSection.tsx
@@ -62,7 +62,7 @@ const ThirdSection = () => {
         <S.Observer ref={ref2} />
         <S.AnimationBox isIntersecting={isIntersecting2}>
           <S.ChecklistImgBox>
-            <img src={checkingPageScreen} alt="" />
+            <img src={checkingPageScreen} alt="체크리스트 작성 화면 스크린샷" />
             <S.PencilIconBox>
               <PencilIcon width={70} height={90} aria-hidden="true" />
             </S.PencilIconBox>

From df74109bb2591c1d24add47c26d26f538c897900 Mon Sep 17 00:00:00 2001
From: Hyelim Choi <HyelimChoi01@gmail.com>
Date: Tue, 8 Oct 2024 12:05:41 +0900
Subject: [PATCH 8/8] =?UTF-8?q?refactor:=20=EB=B6=88=ED=95=84=EC=9A=94?=
 =?UTF-8?q?=ED=95=9C=20=EC=A1=B0=EA=B1=B4=20=EC=82=AD=EC=A0=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/pages/ChecklistDetailPage.tsx | 24 +++++++++----------
 frontend/src/pages/NewChecklistPage.tsx    | 28 ++++++++++------------
 2 files changed, 24 insertions(+), 28 deletions(-)

diff --git a/frontend/src/pages/ChecklistDetailPage.tsx b/frontend/src/pages/ChecklistDetailPage.tsx
index 67be93e9b..f40af7a95 100644
--- a/frontend/src/pages/ChecklistDetailPage.tsx
+++ b/frontend/src/pages/ChecklistDetailPage.tsx
@@ -104,19 +104,17 @@ const ChecklistDetailPage = () => {
         <MemoSection memo={checklist?.room?.memo} />
       </Layout>
 
-      {isModalOpen && (
-        <AlertModal
-          title={
-            <div>
-              정말 <S.AccentText>체크리스트</S.AccentText>를 삭제하시겠습니까?
-            </div>
-          }
-          subtitle="삭제한 체크리스트는 다시 확인할 수 없습니다."
-          isOpen={isModalOpen}
-          onClose={closeModal}
-          handleApprove={handleDelete}
-        />
-      )}
+      <AlertModal
+        title={
+          <div>
+            정말 <S.AccentText>체크리스트</S.AccentText>를 삭제하시겠습니까?
+          </div>
+        }
+        subtitle="삭제한 체크리스트는 다시 확인할 수 없습니다."
+        isOpen={isModalOpen}
+        onClose={closeModal}
+        handleApprove={handleDelete}
+      />
     </>
   );
 };
diff --git a/frontend/src/pages/NewChecklistPage.tsx b/frontend/src/pages/NewChecklistPage.tsx
index 39afbf35b..ae6287a2b 100644
--- a/frontend/src/pages/NewChecklistPage.tsx
+++ b/frontend/src/pages/NewChecklistPage.tsx
@@ -80,21 +80,19 @@ const NewChecklistPage = () => {
         mutateType="add"
       />
 
-      {isAlertModalOpen && (
-        <AlertModal
-          title={
-            <div>
-              나가면 작성하던 내용이 다 지워집니다.
-              <br />
-              괜찮으신가요?
-            </div>
-          }
-          isOpen={isAlertModalOpen}
-          onClose={closeAlertModal}
-          handleApprove={resetAndGoHome}
-          approveButtonName="나가기"
-        />
-      )}
+      <AlertModal
+        title={
+          <div>
+            나가면 작성하던 내용이 다 지워집니다.
+            <br />
+            괜찮으신가요?
+          </div>
+        }
+        isOpen={isAlertModalOpen}
+        onClose={closeAlertModal}
+        handleApprove={resetAndGoHome}
+        approveButtonName="나가기"
+      />
 
       <LoginModal isModalOpen={isLoginModalOpen} modalClose={closeLoginModal} />
     </>