fix: contentDetail 화면에서 header position이 absolute로 설정되어 있어, 콘텐츠 블록하고 겹치던 문제 해결

.github/workflows/E2ETest_Lighthouse.yml

@@ -12,35 +12,27 @@ jobs:
       pull-requests: write
 
     steps:
-      # 1. 소스 체크아웃
       - uses: actions/checkout@v4
 
-      # 2. Node 설치
       - uses: actions/setup-node@v4
         with:
           node-version: 'lts/*'
 
-      # 3. 의존성 설치
       - name: Install dependencies
         run: npm ci
 
-      # 4. Playwright 브라우저 설치
       - name: Install Playwright Browsers
         run: npx playwright install --with-deps
 
-      # 5. 프로젝트 빌드
       - name: Build project
         run: npm run build
 
-      # 6. Playwright 테스트 실행 (JSON 리포트 저장)
       - name: Run Playwright tests
         run: npx playwright test
 
-      # 7. Lighthouse CI 실행 (JSON 리포트 저장)
       - name: Run Lighthouse CI
         run: npx lhci autorun --config=./lighthouserc.json --output=json
 
-      # 8. Lighthouse 결과 파싱
       - name: Parse Lighthouse Scores
         id: lighthouse
         run: |
@@ -55,7 +47,6 @@ jobs:
           echo "$result" >> $GITHUB_OUTPUT
           echo "EOF" >> $GITHUB_OUTPUT
 
-      # 9. Playwright 결과 파싱
       - name: Parse Playwright Results
         id: playwright
         run: |
@@ -66,7 +57,6 @@ jobs:
           echo "failed=$failed" >> $GITHUB_OUTPUT
           echo "total=$total" >> $GITHUB_OUTPUT
 
-      # 10. PR 코멘트 작성
       - name: Comment on PR
         uses: actions/github-script@v7
         env:
@@ -88,12 +78,12 @@ jobs:
             |---------------|--------|
             | **Tests**     |        |
             | Total         | \`${total}\` |
-            | ✅ Passed      | \`${passed}\` |
-            | ❌ Failed      | \`${failed}\` |
+            | Passed      | \`${passed}\` |
+            | Failed      | \`${failed}\` |
             | **Lighthouse**|        |
-            | 🚀 Performance | \`${lh.perf}\` |
-            | ♿ Accessibility| \`${lh.access}\` |
-            | 🔎 SEO         | \`${lh.seo}\` |
+            | Performance | \`${lh.perf}\` |
+            | Accessibility| \`${lh.access}\` |
+            | SEO         | \`${lh.seo}\` |
             | LCP | \`${lh.lcp.toFixed(2)}s\` |
             `;
 
@@ -104,7 +94,6 @@ jobs:
               body: body
             });
 
-      # 11. 리포트 아티팩트 업로드 (HTML 파일)
       - uses: actions/upload-artifact@v4
         if: always()
         with:

index.html

@@ -4,19 +4,14 @@
     <meta charset="UTF-8" />
     <meta
       name="description"
-      content="Haruhan은 지식 기반의 콘텐츠를 제공하는 서비스입니다. 여러분의 일상에 새로운 인사이트를 더하세요."
+      content="Haruhan은 지식 기반의 교양 콘텐츠를 제공하는 구독 서비스입니다. 매일 하나의 교양지식으로 여러분의 일상에 새로운 인사이트를 더하세요."
     />
     <meta
       name="viewport"
       content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
     />
     <title>Haruhan</title>
-    <link
-      rel="preload"
-      href="/src/assets/images/HaruhanLogo.webp"
-      as="image"
-      fetchpriority="high"
-    />
+    <link rel="preload" href="/src/assets/images/HaruhanLogo.webp" as="image" />
     <link
       href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700&display=swap"
       rel="preload"

src/features/feedback/FeedbackSection.jsx

@@ -11,8 +11,8 @@ const Container = styled.div`
   justify-content: center;
   align-items: center;
   padding: 1rem;
-  min-height: 100vh;
   box-sizing: border-box;
+  height: 90vh;
 `;
 
 const Card = styled.div`

src/features/setting/SettingSection.jsx

@@ -6,15 +6,15 @@ import SettingSectionForm from './SectionSectionForm';
 import SettingSectionInfo from './SettingSectionInfo';
 
 const Container = styled.div`
-  height: 100vh;
+  height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
 `;
 
 const ContentWrapper = styled.div`
   max-width: 600px;
-  margin: 4rem auto;
+  margin: 1rem auto;
   padding: 2rem;
   background-color: var(--white);
   border-radius: 10px;

src/layout/Header.jsx

@@ -26,7 +26,7 @@ const HeaderContainer = styled.header`
     backdrop-filter: blur(12px);
     -webkit-backdrop-filter: blur(12px);
     box-shadow: 0 5px 20px rgba(0, 0, 0, 0.07);
-    padding: 15px 40px;
+    padding: 20px 40px;
   }
 `;
 

src/layout/MailHeader.jsx

@@ -7,8 +7,8 @@ const MailHeaderContainer = styled.section`
   align-items: center;
   justify-content: space-between;
   box-sizing: border-box;
+  position: relative;
 
-  position: absolute;
   top: 0;
   left: 0;
   z-index: 1000;