[FE] Refactor/#628 시맨틱 태그, 웹 표준, 웹 접근성 검토

frontend/.eslintrc.js

@@ -40,6 +40,7 @@ module.exports = {
     'react/jsx-props-no-spreading': 'off',
     'react/no-unused-prop-types': 'off',
     'no-underscore-dangle': 'off',
+    'default-case': 'off',
   },
   settings: {
     'import/resolver': {

frontend/cypress/e2e/mapbefine.cy.ts

@@ -4,9 +4,7 @@ describe('메인 페이지', () => {
   });
 
   it('로고와 다양한 지도 소개 글이 보인다.', () => {
-    cy.get('div[aria-label="괜찮을지도 로고 및 홈으로 이동 버튼"]').should(
-      'be.visible',
-    );
+    cy.get('[data-cy="logo"]').should('be.visible');
 
     cy.contains('인기 급상승할 지도').should('be.visible');
   });

frontend/src/GlobalStyle.ts

@@ -3,6 +3,8 @@ import { createGlobalStyle } from 'styled-components';
 const GlobalStyle = createGlobalStyle`
   html,
   body,
+  h2,
+  h3,
   textarea{
     padding:0;
     margin:0;

frontend/src/components/AddFavorite/index.tsx

@@ -2,6 +2,7 @@ import { styled } from 'styled-components';
 
 import { deleteApi } from '../../apis/deleteApi';
 import { postApi } from '../../apis/postApi';
+import { ARIA_FOCUS } from '../../constants';
 import useToast from '../../hooks/useToast';
 
 interface AddFavoriteProps {
@@ -48,7 +49,12 @@ function AddFavorite({
   };
 
   return (
-    <Wrapper onClick={isBookmarked ? deleteFavoriteList : addFavoriteList}>
+    <Wrapper
+      tabIndex={ARIA_FOCUS}
+      role="button"
+      aria-label="즐겨찾기 추가 버튼"
+      onClick={isBookmarked ? deleteFavoriteList : addFavoriteList}
+    >
       {children}
     </Wrapper>
   );

frontend/src/components/AddSeeTogether/index.tsx

@@ -4,6 +4,7 @@ import { styled } from 'styled-components';
 import { deleteApi } from '../../apis/deleteApi';
 import { getApi } from '../../apis/getApi';
 import { postApi } from '../../apis/postApi';
+import { ARIA_FOCUS } from '../../constants';
 import { SeeTogetherContext } from '../../context/SeeTogetherContext';
 import useNavigator from '../../hooks/useNavigator';
 import useToast from '../../hooks/useToast';
@@ -108,7 +109,12 @@ function AddSeeTogether({
   }
 
   return (
-    <Wrapper onClick={isInAtlas ? deleteSeeTogether : addSeeTogetherList}>
+    <Wrapper
+      tabIndex={ARIA_FOCUS}
+      role="button"
+      aria-label="모아보기 추가 버튼"
+      onClick={isInAtlas ? deleteSeeTogether : addSeeTogetherList}
+    >
       {children}
     </Wrapper>
   );

frontend/src/components/AuthorityRadioContainer/index.tsx

@@ -3,6 +3,7 @@ import { useContext, useState } from 'react';
 import styled from 'styled-components';
 
 import useGet from '../../apiHooks/useGet';
+import { ARIA_FOCUS } from '../../constants';
 import { ModalContext } from '../../context/ModalContext';
 import {
   TopicAuthorMember,
@@ -80,7 +81,7 @@ function AuthorityRadioContainer({
             id="publicity-public"
             checked={!isPrivate}
             onChange={() => setIsPrivate(false)}
-            tabIndex={4}
+            tabIndex={ARIA_FOCUS}
           />
           <Space size={1} />
           <label htmlFor="publicity-public">공개 지도</label>
@@ -93,7 +94,7 @@ function AuthorityRadioContainer({
           id="publicity-private"
           checked={isPrivate}
           onChange={() => setIsPrivate(true)}
-          tabIndex={4}
+          tabIndex={ARIA_FOCUS}
         />
         <Space size={1} />
         <label htmlFor="publicity-private">비공개 지도</label>
@@ -115,7 +116,7 @@ function AuthorityRadioContainer({
             id="permission-all"
             checked={isAllPermissioned}
             onChange={onChangeInitAuthMembersWithSetIsAllPermissioned}
-            tabIndex={5}
+            tabIndex={ARIA_FOCUS}
           />
           <Space size={1} />
           {isPrivate ? (
@@ -135,7 +136,7 @@ function AuthorityRadioContainer({
           onClick={() => {
             isAllPermissioned === false && openModal('newTopic');
           }}
-          tabIndex={5}
+          tabIndex={ARIA_FOCUS}
         />
         <Space size={1} />
         <label htmlFor="permission-group">친구들에게</label>
@@ -237,7 +238,7 @@ function AuthorityRadioContainer({
 
           <Flex $justifyContent="end" padding="12px" bottom="0px">
             <Button
-              tabIndex={6}
+              tabIndex={ARIA_FOCUS}
               type="button"
               variant="secondary"
               onClick={() => {
@@ -252,7 +253,7 @@ function AuthorityRadioContainer({
             <Space size={3} />
 
             <Button
-              tabIndex={6}
+              tabIndex={ARIA_FOCUS}
               variant="primary"
               onClick={() => {
                 closeModal('newTopic');

frontend/src/components/Banner/index.tsx

@@ -23,6 +23,7 @@ export default function Banner() {
 
   return (
     <Swiper
+      as="section"
       width={1140}
       height={400}
       $simpleTab
@@ -38,13 +39,18 @@ export default function Banner() {
             width="100%"
             src={BannerItemBoongWEBP}
             alt="붕어빵 배너"
+            aria-label="대동붕어빵여지도로 이동"
           />
         </Box>
       </Tab>
       <Tab label="사용법">
         <Box cursor="pointer">
           <a href={USAGE_URL} target="blank">
-            <BannerImage src={BannerItemUsageWEBP} alt="사용법 배너" />
+            <BannerImage
+              src={BannerItemUsageWEBP}
+              alt="사용법 배너"
+              aria-label="새 창을 띄워 사용법 페이지로 이동"
+            />
           </a>
         </Box>
       </Tab>

frontend/src/components/InputContainer/index.tsx

@@ -52,7 +52,7 @@ function InputContainer({
   };
 
   return (
-    <>
+    <section>
       <Flex>
         <Text color="black" $fontSize="default" $fontWeight="normal">
           {containerTitle}
@@ -106,7 +106,7 @@ function InputContainer({
       )}
       <Space size={0} />
       <ErrorText>{errorMessage}</ErrorText>
-    </>
+    </section>
   );
 }
 const ErrorText = styled.span`

frontend/src/components/Layout/Logo.tsx

@@ -17,8 +17,9 @@ function Logo() {
       onKeyDown={onElementKeyDown}
       ref={elementRef}
       onClick={goToHome}
-      aria-label="괜찮을지도 로고 및 홈으로 이동 버튼"
       tabIndex={0}
+      aria-label="괜찮을지도 로고 및 홈으로 이동하기"
+      data-cy="logo"
     >
       <LogoImage />
     </Box>

frontend/src/components/Layout/index.tsx

@@ -67,6 +67,7 @@ function Layout({ children }: LayoutProps) {
                         </Box>
                       </LogoWrapper>
                       <Flex
+                        as="main"
                         $flexDirection="column"
                         height="inherit"
                         overflow="auto"
@@ -88,7 +89,7 @@ function Layout({ children }: LayoutProps) {
   );
 }
 
-const LogoWrapper = styled.section<{
+const LogoWrapper = styled.header<{
   $layoutWidth: '372px' | '100vw';
 }>`
   width: 372px;
@@ -107,7 +108,7 @@ const LogoWrapper = styled.section<{
   }
 `;
 
-const MediaWrapper = styled.section<{
+const MediaWrapper = styled.div<{
   $isAddPage: boolean;
   $layoutWidth: '372px' | '100vw';
 }>`

frontend/src/components/Map/index.tsx

@@ -81,7 +81,7 @@ function Map() {
   );
 }
 
-const MapContainer = styled.div`
+const MapContainer = styled.section`
   width: 100%;
   height: 100%;
   position: relative;

frontend/src/components/MyInfo/index.tsx

@@ -2,7 +2,11 @@ import { SyntheticEvent, useState } from 'react';
 import { styled } from 'styled-components';
 
 import Setting from '../../assets/updateBtn.svg';
-import { DEFAULT_PROD_URL, DEFAULT_PROFILE_IMAGE } from '../../constants';
+import {
+  ARIA_FOCUS,
+  DEFAULT_PROD_URL,
+  DEFAULT_PROFILE_IMAGE,
+} from '../../constants';
 import useToast from '../../hooks/useToast';
 import { ProfileProps } from '../../types/Profile';
 import Box from '../common/Box';
@@ -69,8 +73,15 @@ function MyInfo() {
       $borderRadius="medium"
       $justifyContent="center"
       $alignItems="center"
+      tabIndex={ARIA_FOCUS}
+      aria-label={`내 정보 영역입니다. 나의 닉네임은 ${user.nickName}이고 이메일은 ${user.email} 입니다.`}
     >
-      <SettingContainer onClick={onClickSetting}>
+      <SettingContainer
+        onClick={onClickSetting}
+        tabIndex={ARIA_FOCUS}
+        role="button"
+        aria-label="내 닉네임 수정하기"
+      >
         <Setting />
       </SettingContainer>
       <Image
@@ -104,13 +115,6 @@ const MyInfoContainer = styled(Flex)`
   border: 1px solid ${({ theme }) => theme.color.lightGray};
 `;
 
-const MyInfoImg = styled.img`
-  width: 80px;
-  height: 80px;
-
-  border-radius: 50%;
-`;
-
 const SettingContainer = styled.div`
   position: absolute;
   top: 10px;