From b026061c34b8ef9849529ed18b7d9778fd6f149b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=97=90=EC=9D=B4=EB=93=A0?=
 <62369936+gyeongza@users.noreply.github.com>
Date: Thu, 3 Aug 2023 19:47:29 +0900
Subject: [PATCH] =?UTF-8?q?=EC=9B=B9=20=ED=91=9C=EC=A4=80=20=EB=B0=8F=20?=
 =?UTF-8?q?=EC=9B=B9=20=EC=A0=91=EA=B7=BC=EC=84=B1=20=EC=A4=80=EC=88=98=20?=
 =?UTF-8?q?(#198)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* refactor: 시멘틱 태그 적용

* refactor: 이미지 alt 속성 추가

* feat: 제목 input autoFocus 기능 추가

* feat: 리뷰 요청 글 작성 aria-label 추가
---
 frontend/src/components/InputBox.tsx            |  9 ++++++++-
 frontend/src/components/SelectSupportModal.tsx  | 12 ++++++------
 .../SupporterSelectItem/SupporterSelectItem.tsx | 17 +++++++++--------
 frontend/src/components/common/Avatar.tsx       |  2 +-
 frontend/src/components/common/Button.tsx       |  4 +++-
 frontend/src/components/common/Modal.tsx        |  2 +-
 frontend/src/layout/Header.tsx                  |  4 ++--
 frontend/src/layout/Layout.tsx                  |  2 +-
 frontend/src/pages/MainPage.tsx                 |  6 +++---
 frontend/src/pages/RunnerPostCreatePage.tsx     |  1 +
 frontend/src/pages/RunnerPostDetailPage.tsx     |  2 +-
 11 files changed, 36 insertions(+), 25 deletions(-)

diff --git a/frontend/src/components/InputBox.tsx b/frontend/src/components/InputBox.tsx
index 44a207f0d..e1b4470ce 100644
--- a/frontend/src/components/InputBox.tsx
+++ b/frontend/src/components/InputBox.tsx
@@ -6,6 +6,7 @@ interface Props extends React.HTMLProps<HTMLInputElement> {
   handleInputTextState: (e: React.ChangeEvent<HTMLInputElement>) => void;
   fontSize?: string | number;
   fontWeight?: string | number;
+  autoFocus?: boolean;
 }
 
 const InputBox = ({
@@ -16,11 +17,17 @@ const InputBox = ({
   height,
   fontSize,
   fontWeight,
+  autoFocus,
   handleInputTextState,
 }: Props) => {
   return (
     <S.InputContainer $fontSize={fontSize} $fontWeight={fontWeight} $width={width} $height={height}>
-      <S.InputBox onChange={handleInputTextState} maxLength={maxLength} placeholder={placeholder} />
+      <S.InputBox
+        onChange={handleInputTextState}
+        maxLength={maxLength}
+        placeholder={placeholder}
+        autoFocus={autoFocus}
+      />
       {maxLength && (
         <S.InputTextLength>
           {inputTextState.length ?? 0} / {maxLength}
diff --git a/frontend/src/components/SelectSupportModal.tsx b/frontend/src/components/SelectSupportModal.tsx
index 503befa93..c991b25f0 100644
--- a/frontend/src/components/SelectSupportModal.tsx
+++ b/frontend/src/components/SelectSupportModal.tsx
@@ -23,11 +23,11 @@ const SelectSupportModal = ({ closeModal, handleSelectButton }: Props) => {
           <S.Title>서포터를 선택해 주세요 ✅</S.Title>
           <S.TitleDescription>선택한 서포터가 확인 후 리뷰를 진행합니다.</S.TitleDescription>
         </S.TitleContainer>
-        <S.FilterContainer>
-          <S.FilterTitle onClick={clickedFilter} selected={selectedTechField === '프론트엔드'}>
+        <S.FilterContainer tabIndex={0} aria-label="개발 분야 필터 리스트">
+          <S.FilterTitle tabIndex={0} onClick={clickedFilter} selected={selectedTechField === '프론트엔드'}>
             프론트엔드
           </S.FilterTitle>
-          <S.FilterTitle onClick={clickedFilter} selected={selectedTechField === '백엔드'}>
+          <S.FilterTitle tabIndex={0} onClick={clickedFilter} selected={selectedTechField === '백엔드'}>
             백엔드
           </S.FilterTitle>
         </S.FilterContainer>
@@ -54,7 +54,7 @@ const S = {
     gap: 20px;
   `,
 
-  TitleContainer: styled.div`
+  TitleContainer: styled.header`
     display: flex;
     flex-direction: column;
     gap: 15px;
@@ -62,12 +62,12 @@ const S = {
     margin: 20px 0 53px 20px;
   `,
 
-  Title: styled.p`
+  Title: styled.h1`
     font-size: 36px;
     font-weight: 700;
   `,
 
-  TitleDescription: styled.div`
+  TitleDescription: styled.h2`
     margin-left: 5px;
 
     font-size: 18px;
diff --git a/frontend/src/components/SupporterSelect/SupporterSelectItem/SupporterSelectItem.tsx b/frontend/src/components/SupporterSelect/SupporterSelectItem/SupporterSelectItem.tsx
index 7191b433a..6be197f6d 100644
--- a/frontend/src/components/SupporterSelect/SupporterSelectItem/SupporterSelectItem.tsx
+++ b/frontend/src/components/SupporterSelect/SupporterSelectItem/SupporterSelectItem.tsx
@@ -37,25 +37,25 @@ const SupporterSelectItem = ({
   };
 
   return (
-    <S.SupporterSelectItemContainer>
+    <S.SupporterSelectItemContainer tabIndex={0} aria-label="서포터 정보">
       <S.LeftSideContainer>
         <Avatar width="60px" height="60px" imageUrl={'https://via.placeholder.com/150'} />
         <S.DescriptionContainer>
-          <S.Name>{name}</S.Name>
-          <S.Company>{company}</S.Company>
+          <S.Name tabIndex={0}>{name}</S.Name>
+          <S.Company tabIndex={0}>{company}</S.Company>
           <S.TechStackContainer>
-            {technicalTags.map((tag) => (
-              <TechLabel key={supporterId} tag={tag} />
+            {technicalTags.map((tag, index) => (
+              <TechLabel key={index} tag={tag} />
             ))}
           </S.TechStackContainer>
           <S.CompletedReviewContainer>
-            <S.CompletedReview>완료한 리뷰</S.CompletedReview>
-            <S.CompletedReviewCount>{reviewCount}</S.CompletedReviewCount>
+            <S.CompletedReview tabIndex={0}>완료한 리뷰</S.CompletedReview>
+            <S.CompletedReviewCount tabIndex={0}>{reviewCount}</S.CompletedReviewCount>
           </S.CompletedReviewContainer>
         </S.DescriptionContainer>
       </S.LeftSideContainer>
       <S.ButtonContainer>
-        <S.GithubButton href={githubUrl} target="_blank">
+        <S.GithubButton href={githubUrl} target="_blank" aria-label={`${name} github 바로가기`}>
           <S.GithubIcon src={githubIcon} />
           <S.GithubButtonText>github</S.GithubButtonText>
         </S.GithubButton>
@@ -66,6 +66,7 @@ const SupporterSelectItem = ({
           fontSize="12px"
           fontWeight={700}
           onClick={handleSelectedSupporter}
+          ariaLabel={`${name} 선택하기`}
         >
           선택하기
         </Button>
diff --git a/frontend/src/components/common/Avatar.tsx b/frontend/src/components/common/Avatar.tsx
index 3ea3a0ab5..9ec0f0d31 100644
--- a/frontend/src/components/common/Avatar.tsx
+++ b/frontend/src/components/common/Avatar.tsx
@@ -8,7 +8,7 @@ interface Props extends React.HTMLProps<HTMLImageElement> {
 const Avatar = ({ imageUrl, width, height }: Props) => {
   return (
     <S.ImageWrapper>
-      <S.Image src={imageUrl} $width={width} $height={height} />
+      <S.Image src={imageUrl} $width={width} $height={height} alt="프로필" />
     </S.ImageWrapper>
   );
 };
diff --git a/frontend/src/components/common/Button.tsx b/frontend/src/components/common/Button.tsx
index fb94574c1..e7b81b4de 100644
--- a/frontend/src/components/common/Button.tsx
+++ b/frontend/src/components/common/Button.tsx
@@ -7,9 +7,10 @@ interface Props extends React.HTMLProps<HTMLButtonElement> {
   fontSize?: string | number;
   fontWeight?: number;
   type?: 'button' | 'submit' | 'reset';
+  ariaLabel?: string;
 }
 
-const Button = ({ colorTheme, children, width, height, type, fontSize, fontWeight, onClick }: Props) => {
+const Button = ({ colorTheme, children, width, height, type, fontSize, fontWeight, onClick, ariaLabel }: Props) => {
   return (
     <S.ButtonWrapper>
       <S.Button
@@ -20,6 +21,7 @@ const Button = ({ colorTheme, children, width, height, type, fontSize, fontWeigh
         $fontSize={fontSize}
         $fontWeight={fontWeight}
         onClick={onClick}
+        aria-label={ariaLabel}
       >
         {children}
       </S.Button>
diff --git a/frontend/src/components/common/Modal.tsx b/frontend/src/components/common/Modal.tsx
index 2558f933d..05f527898 100644
--- a/frontend/src/components/common/Modal.tsx
+++ b/frontend/src/components/common/Modal.tsx
@@ -9,7 +9,7 @@ interface Props extends React.HTMLProps<HTMLDivElement> {
 
 const Modal = ({ children, closeModal, width, height }: Props) => {
   return createPortal(
-    <S.ModalContainer>
+    <S.ModalContainer aria-label="서포터 선택 모달창" aria-modal="true" role="서포터 선택 모달창">
       <S.BackDrop onClick={closeModal} />
       <S.ModalViewContainer $width={width} $height={height}>
         {children}
diff --git a/frontend/src/layout/Header.tsx b/frontend/src/layout/Header.tsx
index 39a489b02..fa230036f 100644
--- a/frontend/src/layout/Header.tsx
+++ b/frontend/src/layout/Header.tsx
@@ -9,7 +9,7 @@ const Header = () => {
   return (
     <S.HeaderWrapper>
       <S.HeaderContainer>
-        <S.Logo src={LogoImage} onClick={goToMainPage} />
+        <S.Logo src={LogoImage} onClick={goToMainPage} alt="바톤로고" />
         <S.MenuContainer>
           <S.LoginButton
             onClick={() => {
@@ -28,7 +28,7 @@ const Header = () => {
 export default Header;
 
 const S = {
-  HeaderWrapper: styled.div`
+  HeaderWrapper: styled.header`
     display: flex;
     justify-content: center;
 
diff --git a/frontend/src/layout/Layout.tsx b/frontend/src/layout/Layout.tsx
index 20072c244..2d1657278 100644
--- a/frontend/src/layout/Layout.tsx
+++ b/frontend/src/layout/Layout.tsx
@@ -24,7 +24,7 @@ const S = {
     align-items: center;
   `,
 
-  ChildrenWrapper: styled.div`
+  ChildrenWrapper: styled.article`
     width: 1200px;
 
     margin-bottom: 80px;
diff --git a/frontend/src/pages/MainPage.tsx b/frontend/src/pages/MainPage.tsx
index 81821cfba..8dcad1c24 100644
--- a/frontend/src/pages/MainPage.tsx
+++ b/frontend/src/pages/MainPage.tsx
@@ -27,7 +27,7 @@ const MainPage = () => {
           </S.TagContainer> */}
         </S.LeftSideContainer>
 
-        <Button onClick={goToRunnerPostCreatePage} colorTheme="WHITE" fontSize="18px">
+        <Button onClick={goToRunnerPostCreatePage} colorTheme="WHITE" fontSize="18px" ariaLabel="리뷰 요청 글 작성하기">
           리뷰 요청 글 작성하기
         </Button>
       </S.ControlPanelContainer>
@@ -41,10 +41,10 @@ const MainPage = () => {
 export default MainPage;
 
 const S = {
-  TitleWrapper: styled.div`
+  TitleWrapper: styled.header`
     margin: 72px 0 53px 0;
   `,
-  Title: styled.p`
+  Title: styled.h1`
     font-size: 36px;
     font-weight: 700;
   `,
diff --git a/frontend/src/pages/RunnerPostCreatePage.tsx b/frontend/src/pages/RunnerPostCreatePage.tsx
index 38c0be3ab..6aaa4006a 100644
--- a/frontend/src/pages/RunnerPostCreatePage.tsx
+++ b/frontend/src/pages/RunnerPostCreatePage.tsx
@@ -162,6 +162,7 @@ const RunnerPostCreatePage = () => {
               fontSize="38px"
               fontWeight="700"
               placeholder="제목을 입력해주세요"
+              autoFocus={true}
             />
           </S.InputContainer>
           <S.InputContainer>
diff --git a/frontend/src/pages/RunnerPostDetailPage.tsx b/frontend/src/pages/RunnerPostDetailPage.tsx
index f149cc674..e4fb3b630 100644
--- a/frontend/src/pages/RunnerPostDetailPage.tsx
+++ b/frontend/src/pages/RunnerPostDetailPage.tsx
@@ -214,7 +214,7 @@ const S = {
     gap: 10px;
   `,
 
-  PostTitle: styled.div`
+  PostTitle: styled.h1`
     font-size: 38px;
     font-weight: 700;
   `,