이번 PR은 Lighthouse 및 스크린 리더 검사에서 지적된 다수의 접근성 이슈를 해결합니다

src/features/content/ContentList.jsx

@@ -3,11 +3,17 @@ import { useNavigate } from 'react-router-dom';
 import ContentItem from './ContentItem';
 import styled from '@emotion/styled';
 
-const ContentListContainer = styled.div`
+const ContentListContainer = styled.ul`
   display: flex;
   flex-direction: column;
   gap: 1.5rem;
-`
+  padding: 0;
+  margin: 0;
+`;
+
+const ContentListItem = styled.li`
+  list-style-type: none;
+`;
 
 const ContentList = ({ contents, isBookmark, bookmarkIdList, onFavoriteToggle }) => {
   const navigate = useNavigate();
@@ -16,16 +22,15 @@ const ContentList = ({ contents, isBookmark, bookmarkIdList, onFavoriteToggle })
     <ContentListContainer>
       {contents.map((content, index) => {
         return (
-        <ContentItem
-          key={index}
-          content={content}
-          isBookmark={isBookmark}
-          bookmarkIdList={bookmarkIdList}
-          onClick={() =>
-            navigate(`/content/${content.id || content.contentId}`)
-          }
-          onFavoriteToggle={onFavoriteToggle}
-        />
+          <ContentListItem key={index}>
+            <ContentItem
+              content={content}
+              isBookmark={isBookmark}
+              bookmarkIdList={bookmarkIdList}
+              onClick={() => navigate(`/content/${content.id || content.contentId}`)}
+              onFavoriteToggle={onFavoriteToggle}
+            />
+          </ContentListItem>
         );
       })}
     </ContentListContainer>

src/features/home/AboutSection.jsx

@@ -55,7 +55,7 @@ const TextContainer = styled.div`
   justify-content: center;
   gap: 1.5rem;
 
-  h1 {
+  h2 {
     font-family: 'IBM Plex Sans', sans-serif;
     font-size: 7rem;
     font-weight: bold;
@@ -146,10 +146,10 @@ const TeamAbout = () => {
         </ImageContainer>
         <TextContainer>
           <BgImage src={bgImg} alt="bg" />
-          <h1>
+          <h2>
             매일 아침 한 가지, <br />
             New Insight
-          </h1>
+          </h2>
           <p>Haruhan은 바쁜 일상 속에서도 매일 한 가지 새로운 지식을 쉽고 재미있게 전해드립니다</p>
           <p>짧지만 깊이 있는 인사이트로, 오늘 하루도 성장하는 경험을 해보세요</p>
         </TextContainer>

src/features/home/HeroSection.jsx

@@ -15,7 +15,7 @@ const TeamHeroContainer = styled.div`
 const TextContainer = styled.div`
   position: absolute;
   text-align: center;
-  p {
+  h1 {
     font-family: 'IBM Plex Sans', sans-serif;
     font-weight: 300;
     font-size: 9rem;
@@ -26,13 +26,13 @@ const TextContainer = styled.div`
   }
 
   @media (min-width: 768px) and (max-width: 1440px) {
-    p {
+    h1 {
       font-size: 4rem;
     }
   }
 
   @media (max-width: 767px) {
-    p {
+    h1 {
       font-size: 4rem;
     }
   }
@@ -119,9 +119,9 @@ export default function TeamHero() {
   return (
     <TeamHeroContainer ref={sectionRef}>
       <TextContainer>
-        <p ref={textRef}>
+        <h1 ref={textRef}>
           'One a Day' <span>HARUHAN</span>
-        </p>
+        </h1>
       </TextContainer>
       <ImageContainer>
         {TeamHeroImages.map((src, i) => (

src/features/home/Knowledge/KnowledgeSectionItem.jsx

@@ -14,7 +14,7 @@ const Container = styled.div`
   }
 `;
 
-const Title = styled.h3`
+const Title = styled.h4`
   font-size: 1.5rem;
   margin: 0 0 1rem 0;
   font-weight: bold;
@@ -24,7 +24,7 @@ const Title = styled.h3`
   }
 `;
 
-const Summary = styled.h4`
+const Summary = styled.h5`
   font-size: 1.1rem;
   padding: 0 0 1.5rem 0;
   color: #333;

src/features/home/Knowledge/KnowledgeSectionList.jsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { knowledgeMockData } from '../../../mocks/knowledgeData';
+import { knowledgeMockData } from '@mocks/knowledgeData';
 import KnowledgeSectionItem from './KnowledgeSectionItem';
 import styled from '@emotion/styled';
-import useModal from '../../../hooks/useModal';
+import useModal from '@hooks/useModal';
 import SubscriptionModal from '../../modal/SubscriptionModal';
 
 const Container = styled.div`
@@ -25,7 +25,7 @@ const KnowledgeSectionList = () => {
           onClick={openModal}
         />
       ))}
-    {isModalOpen && <SubscriptionModal isOpen={isModalOpen} onClose={closeModal} />}
+      {isModalOpen && <SubscriptionModal isOpen={isModalOpen} onClose={closeModal} />}
     </Container>
   );
 };

src/features/home/KnowledgeSection.jsx

@@ -9,7 +9,7 @@ const SectionContainer = styled.section`
   overflow: hidden;
 `;
 
-const SectionTitle = styled.h2`
+const SectionTitle = styled.h3`
   font-size: 2.5rem;
   font-weight: 700;
   text-align: center;

src/features/home/PopularTopicSection.jsx

@@ -10,7 +10,7 @@ const SectionContainer = styled.section`
   justify-content: center;
 `;
 
-const SectionTitle = styled.h2`
+const SectionTitle = styled.h3`
   font-size: 3rem;
   font-weight: 800;
   text-align: center;

src/layout/Footer.jsx

@@ -1,8 +1,8 @@
 import styled from '@emotion/styled';
-import { FaGithub } from "react-icons/fa";
+import { FaGithub } from 'react-icons/fa';
 
 const FooterContainer = styled.footer`
-  background-color: #F8F8F8;
+  background-color: #f8f8f8;
   padding: 1rem 0;
   text-align: center;
 `;
@@ -15,12 +15,12 @@ const FooterContent = styled.div`
   gap: 1rem;
   padding-top: 1rem;
   font-size: 0.8rem;
-  color: var(--l-grey);
+  color: black;
 `;
 
 const GithubIconWrapper = styled.div`
   transition: transform 0.3s ease;
-  &:hover { 
+  &:hover {
     transform: scale(1.2);
   }
 `;
@@ -30,9 +30,14 @@ const Footer = () => {
     <FooterContainer>
       <FooterContent>
         <p>&copy; {new Date().getFullYear()} HaruHan. All rights reserved.</p>
-        <GithubIconWrapper >
-          <a href="https://github.com/HaruHan-Mail" target="_blank" rel="noopener noreferrer">
-            <FaGithub size={20} color="var(--l-grey)" />
+        <GithubIconWrapper>
+          <a
+            href="https://github.com/HaruHan-Mail"
+            target="_blank"
+            rel="noopener noreferrer"
+            aria-label="하루한 깃허브"
+          >
+            <FaGithub size={20} color="black" />
           </a>
         </GithubIconWrapper>
       </FooterContent>