♻️ Refactor: 웹 접근성 향상 (#266)

FRONTENDSCHOOL5 · Aug 12, 2023 · fa8f25b · fa8f25b
1 parent e6cd060
commit fa8f25b
Show file tree

Hide file tree

Showing 9 changed files with 256 additions and 221 deletions.
diff --git a/src/components/Header/BackButton.jsx b/src/components/Header/BackButton.jsx
@@ -3,7 +3,7 @@ import { useNavigate } from 'react-router-dom';
 import { useRecoilValue } from 'recoil';
 import { isDarkModeState } from '../../atoms/StylesAtom';
 import GlobalSprite from '../../assets/sprite/GlobalSprite';
-import { Button } from './BackButtonStyle'
+import { Button } from './BackButtonStyle';
 
 const BackButton = () => {
   const navigate = useNavigate();
@@ -13,8 +13,11 @@ const BackButton = () => {
   };
 
   return (
-    <Button onClick={goBack}>
-      <GlobalSprite id={isDarkMode ? 'icon-arrow-left-dark' : 'icon-arrow-left'} color={'transparent'}/>
+    <Button onClick={goBack} aria-label="뒤로 가기">
+      <GlobalSprite
+        id={isDarkMode ? 'icon-arrow-left-dark' : 'icon-arrow-left'}
+        color={'transparent'}
+      />
     </Button>
   );
 };

diff --git a/src/components/Header/TopBasicNavHeader.jsx b/src/components/Header/TopBasicNavHeader.jsx
@@ -4,17 +4,19 @@ import { isDarkModeState } from '../../atoms/StylesAtom';
 import GlobalSprite from '../../assets/sprite/GlobalSprite';
 import Container from './HeaderContainer';
 import BackButton from './BackButton';
-import { ModalButton } from "./TopBasicNavHeaderStyle";
-
+import { ModalButton } from './TopBasicNavHeaderStyle';
 
 const TopBasicNavHeader = ({ onButtonClick }) => {
   const isDarkMode = useRecoilValue(isDarkModeState);
 
   return (
     <Container>
       <BackButton />
-      <ModalButton onClick={onButtonClick}>
-        <GlobalSprite id={isDarkMode ? 's-icon-more-vertical-dark' : 's-icon-more-vertical'} color={'white'} />
+      <ModalButton onClick={onButtonClick} aria-label="모달 버튼">
+        <GlobalSprite
+          id={isDarkMode ? 's-icon-more-vertical-dark' : 's-icon-more-vertical'}
+          color={'white'}
+        />
       </ModalButton>
     </Container>
   );

diff --git a/src/components/Header/TopChatNavHeader.jsx b/src/components/Header/TopChatNavHeader.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
-import { useRecoilValue } from "recoil";
-import { isDarkModeState } from '../../atoms/StylesAtom'
+import { useRecoilValue } from 'recoil';
+import { isDarkModeState } from '../../atoms/StylesAtom';
 import GlobalSprite from '../../assets/sprite/GlobalSprite';
 import Container from './HeaderContainer';
 import BackButton from './BackButton';
@@ -15,8 +15,10 @@ const TopChatNavHeader = ({ text }) => {
         <BackButton />
         <Text>{text}</Text>
       </Section>
-      <ModalButton>
-        <GlobalSprite id={isDarkMode ? 's-icon-more-vertical-dark' : 's-icon-more-vertical'} />
+      <ModalButton aria-label="모달 버튼">
+        <GlobalSprite
+          id={isDarkMode ? 's-icon-more-vertical-dark' : 's-icon-more-vertical'}
+        />
       </ModalButton>
     </Container>
   );

diff --git a/src/components/Header/TopMainNavHeader.jsx b/src/components/Header/TopMainNavHeader.jsx
@@ -12,9 +12,12 @@ const TopMainNavHeader = () => {
   return (
     <Container>
       <Title>들숨날숨 피드</Title>
-      <SearchButton>
-        <Link to="/Search">
-          <GlobalSprite id={isDarkMode ? 'icon-search-dark' : 'icon-search'} color={'transparent'}/>
+      <SearchButton aria-label="유저 찾기">
+        <Link to="/Search" aria-label="유저 찾기 페이지로 이동">
+          <GlobalSprite
+            id={isDarkMode ? 'icon-search-dark' : 'icon-search'}
+            color={'transparent'}
+          />
         </Link>
       </SearchButton>
     </Container>

diff --git a/src/components/common/Button/DarkModeButton.jsx b/src/components/common/Button/DarkModeButton.jsx
@@ -3,31 +3,31 @@ import { useRecoilState } from 'recoil';
 import { ThemeProvider } from 'styled-components';
 import { isDarkModeState } from '../../../atoms/StylesAtom';
 import darkColors from '../../../styles/Theme';
-import { Container, Button } from './DarkModeButtonStyle'
-
+import { Container, Button } from './DarkModeButtonStyle';
 
 const DarkModeToggle = () => {
   const [isDarkMode, setIsDarkMode] = useRecoilState(isDarkModeState);
   const toggleDarkMode = () => {
     setIsDarkMode((prev) => !prev);
   };
-
   const selectedTheme = isDarkMode ? { colors: darkColors } : {};
 
   return (
     <ThemeProvider theme={selectedTheme}>
       <Container>
-        <Button>
-          <label class="switch">
-          {!isDarkMode ?
-            <input type="checkbox" onClick={toggleDarkMode}/> :
-            <input type="checkbox" onClick={toggleDarkMode} checked/>}
-            <span class="slider"></span>
+        <Button aria-label="다크 모드 버튼">
+          <label className="switch" aria-label="다크 모드 전환">
+            {!isDarkMode ? (
+              <input type="checkbox" onClick={toggleDarkMode} />
+            ) : (
+              <input type="checkbox" onClick={toggleDarkMode} checked />
+            )}
+            <span className="slider"></span>
           </label>
         </Button>
       </Container>
     </ThemeProvider>
   );
 };
 
-export default DarkModeToggle;
+export default DarkModeToggle;
diff --git a/src/pages/PostPage/PostPage.jsx b/src/pages/PostPage/PostPage.jsx
@@ -30,7 +30,7 @@ import {
   DetailButton,
 } from './PostPageStyle';
 
-const PostPage = ({ data, showModal, setPickedPost, theme, accountName }) => {
+const PostPage = ({ data, showModal }) => {
   const isDarkMode = useRecoilValue(isDarkModeState);
   const token = useRecoilValue(tokenAtom);
   const [startPoint, setStartPoint] = useState(''); // startPoint 상태 추가
@@ -139,105 +139,107 @@ const PostPage = ({ data, showModal, setPickedPost, theme, accountName }) => {
   }
 
   return (
-      <Container>
-        <Title>게시글 페이지</Title>
-        <Post>
-          <Image
-            src={
-              numberRegex.test(data.author.image)
-                ? data.author.image
-                : isDarkMode
-                ? basicDarkImg
-                : basicImg
-            }
-          />
-          <Contents>
-            {/* 프로필로 이동 */}
-            <ProfileButton onClick={handleProfileClick} className="go-to-profile">
-              <UserName>{data.author.username}</UserName>
-              <UserAccountName>@ {data.author.accountname}</UserAccountName>
-            </ProfileButton>
-            {/* 신고, 공유 모달 */}
-            <ModalButton
-              onClick={() => {
-                showModal(data);
-              }}
-              className="post-modal"
-            >
-              <GlobalSprite
+    <Container>
+      <Title>게시글 페이지</Title>
+      <Post>
+        <Image
+          src={
+            numberRegex.test(data.author.image)
+              ? data.author.image
+              : isDarkMode
+              ? basicDarkImg
+              : basicImg
+          }
+          alt="프로필 이미지"
+        />
+        <Contents>
+          {/* 프로필로 이동 */}
+          <ProfileButton onClick={handleProfileClick} className="go-to-profile">
+            <UserName>{data.author.username}</UserName>
+            <UserAccountName>@ {data.author.accountname}</UserAccountName>
+          </ProfileButton>
+          {/* 신고, 공유 모달 */}
+          <ModalButton
+            onClick={() => {
+              showModal(data);
+            }}
+            className="post-modal"
+            aria-label="모달 버튼"
+          >
+            <GlobalSprite
               id={'s-icon-more-vertical'}
               color={'white'}
               size={18}
             />
-            </ModalButton>
-            {/* 피드로 이동 */}
-            <DetailButton
-              onClick={handleFeedClick}
-              className="go-to-post-detail"
-              detail={detail}
-            >
-              <ScheduleSection>
-                <GlobalSprite
-                  id={isDarkMode ? 'icon-calendar-dark' : 'icon-calendar'}
-                  size={13}
-                />
-                <Text>
-                  {data &&
-                    data.content.substring(3, 4) +
-                      '요일, ' +
-                      data.content.substring(5, 10) +
-                      ', ' +
-                      (isJSON(data.content) ? JSON.parse(data.content)[1] : '')}
-                </Text>
-              </ScheduleSection>
-              <LocationSection>
+          </ModalButton>
+          {/* 피드로 이동 */}
+          <DetailButton
+            onClick={handleFeedClick}
+            className="go-to-post-detail"
+            detail={detail}
+          >
+            <ScheduleSection>
+              <GlobalSprite
+                id={isDarkMode ? 'icon-calendar-dark' : 'icon-calendar'}
+                size={13}
+              />
+              <Text>
+                {data &&
+                  data.content.substring(3, 4) +
+                    '요일, ' +
+                    data.content.substring(5, 10) +
+                    ', ' +
+                    (isJSON(data.content) ? JSON.parse(data.content)[1] : '')}
+              </Text>
+            </ScheduleSection>
+            <LocationSection>
+              <GlobalSprite
+                id={isDarkMode ? 'icon-location-dark' : 'icon-location'}
+                size={13}
+              />
+              <Text>
+                {startPoint}~{endPoint}
+              </Text>
+            </LocationSection>
+            <MapSection>
+              <Map data={data.image} detail={detail} />
+            </MapSection>
+            <ContentsSection>
+              {data &&
+                (isJSON(data.content)
+                  ? JSON.parse(data.content)[2].toString()
+                  : '')}
+            </ContentsSection>
+            <ButtonContainer>
+              <Participation>{postLikeCount}명 참여</Participation>
+              <Comment>
                 <GlobalSprite
-                  id={isDarkMode ? 'icon-location-dark' : 'icon-location'}
-                  size={13}
+                  id={
+                    isDarkMode
+                      ? 'icon-message-circle-dark'
+                      : 'icon-message-circle'
+                  }
+                  size={12}
+                  color={'transparent'}
                 />
-                <Text>
-                  {startPoint}~{endPoint}
-                </Text>
-              </LocationSection>
-              <MapSection>
-                <Map data={data.image} detail={detail} />
-              </MapSection>
-              <ContentsSection>
-                {data &&
-                  (isJSON(data.content)
-                    ? JSON.parse(data.content)[2].toString()
-                    : '')}
-              </ContentsSection>
-              <ButtonContainer>
-                <Participation>{postLikeCount}명 참여</Participation>
-                <Comment>
-                  <GlobalSprite
-                    id={
-                      isDarkMode
-                        ? 'icon-message-circle-dark'
-                        : 'icon-message-circle'
-                    }
-                    size={12}
-                    color={'transparent'}
-                  />
-                  <Text>{data.commentCount}</Text>
-                </Comment>
-              </ButtonContainer>
-            </DetailButton>
-            </Contents>
-        </Post>
-        {detail ? (
-          <JoinButton
-            type={'XL'}
-            text={postLikeState ? '참가하기 취소' : '참가하기'}
-            isClicked={postLikeState}
-            handleClick={handleToggleLike}
-            isDarkMode={isDarkMode}
-          />
-        ) : (
-          <></>
-        )}
-      </Container>
+                <Text>{data.commentCount}</Text>
+              </Comment>
+            </ButtonContainer>
+          </DetailButton>
+        </Contents>
+      </Post>
+      {detail ? (
+        <JoinButton
+          type={'XL'}
+          text={postLikeState ? '참가하기 취소' : '참가하기'}
+          isClicked={postLikeState}
+          handleClick={handleToggleLike}
+          isDarkMode={isDarkMode}
+        />
+      ) : (
+        <></>
+      )}
+    </Container>
   );
 };
 export default PostPage;