[feedback/feature] 법적 고지와 파일 처리 안내 상세화

src/pages/LegalPolicyPage/LegalPolicyPage.module.css

@@ -6,7 +6,7 @@
 }
 
 .header {
-  width: min(880px, 100%);
+  width: min(1080px, 100%);
   min-height: 72px;
   margin: 0 auto;
   display: flex;
@@ -36,10 +36,11 @@
 
 .nav a[aria-current='page'] {
   color: var(--brand-primary);
+  font-weight: 700;
 }
 
 .document {
-  width: min(880px, 100%);
+  width: min(1080px, 100%);
   margin: 0 auto;
   padding: 56px clamp(24px, 6vw, 72px);
   border: 1px solid var(--border-default);
@@ -83,13 +84,47 @@
   line-height: 1.6;
 }
 
+.contentLayout {
+  margin-top: 40px;
+  display: grid;
+  grid-template-columns: minmax(150px, 190px) minmax(0, 1fr);
+  gap: clamp(32px, 5vw, 64px);
+  align-items: start;
+}
+
+.toc {
+  position: sticky;
+  top: 24px;
+  display: grid;
+  gap: 10px;
+  padding-right: 20px;
+  border-right: 1px solid var(--border-default);
+}
+
+.toc strong {
+  margin-bottom: 4px;
+  font-size: 13px;
+}
+
+.toc a {
+  color: var(--text-secondary);
+  font-size: 12px;
+  line-height: 1.45;
+  text-decoration: none;
+}
+
+.toc a:hover,
+.toc a:focus-visible {
+  color: var(--brand-primary);
+}
+
 .sections {
-  margin-top: 36px;
   display: grid;
   gap: 30px;
 }
 
 .sections section {
+  scroll-margin-top: 24px;
   padding-bottom: 30px;
   border-bottom: 1px solid var(--border-default);
 }
@@ -99,13 +134,34 @@
   font-size: 17px;
 }
 
-.sections p {
-  margin: 10px 0 0;
+.sections p,
+.sections li {
   color: var(--text-secondary);
   font-size: 14px;
   line-height: 1.8;
 }
 
+.sections p {
+  margin: 10px 0 0;
+}
+
+.sections ul {
+  margin: 12px 0 0;
+  padding-left: 20px;
+}
+
+.sections li + li {
+  margin-top: 6px;
+}
+
+.sections .sectionNote {
+  margin-top: 14px;
+  padding: 12px 14px;
+  border-left: 3px solid var(--status-warning);
+  background: var(--surface-subtle);
+  font-size: 13px;
+}
+
 .documentFooter {
   margin-top: 36px;
 }
@@ -117,12 +173,57 @@
   text-decoration: none;
 }
 
-@media (max-width: 560px) {
+@media (max-width: 760px) {
   .page {
     padding-inline: 12px;
   }
 
+  .header {
+    align-items: flex-start;
+    flex-direction: column;
+    padding-block: 20px;
+  }
+
+  .nav {
+    width: 100%;
+    gap: 16px;
+  }
+
   .document {
     padding-block: 36px;
   }
+
+  .contentLayout {
+    grid-template-columns: 1fr;
+    gap: 32px;
+  }
+
+  .toc {
+    position: static;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    padding: 16px;
+    border: 1px solid var(--border-default);
+    border-radius: var(--fowoco-radius-6);
+    background: var(--surface-subtle);
+  }
+
+  .toc strong {
+    grid-column: 1 / -1;
+  }
+}
+
+@media (max-width: 420px) {
+  .nav {
+    justify-content: space-between;
+    gap: 4px;
+  }
+
+  .nav a {
+    font-size: 12px;
+    white-space: nowrap;
+  }
+
+  .toc {
+    grid-template-columns: 1fr;
+  }
 }

src/pages/LegalPolicyPage/LegalPolicyPage.test.tsx

@@ -22,7 +22,11 @@ beforeEach(() => {
               required: true,
               content_path: '/legal/privacy',
             },
-            marketing: { version: '1.0', required: false, content_path: null },
+            marketing: {
+              version: '1.0',
+              required: false,
+              content_path: '/legal/marketing',
+            },
           },
         }),
         { status: 200, headers: { 'Content-Type': 'application/json' } },
@@ -45,7 +49,7 @@ describe('LegalPolicyPage', () => {
 
     expect(screen.getByRole('heading', { name: '서비스 이용약관' })).toBeInTheDocument()
     expect(await screen.findByText(/버전 2.0/)).toBeInTheDocument()
-    expect(screen.getByText('3. AI 업무보조의 범위')).toBeInTheDocument()
+    expect(screen.getByRole('heading', { name: '3. AI 업무보조의 범위' })).toBeInTheDocument()
   })
 
   it('renders the privacy processing notice and current version', async () => {
@@ -57,6 +61,21 @@ describe('LegalPolicyPage', () => {
 
     expect(screen.getByRole('heading', { name: '개인정보 처리 안내' })).toBeInTheDocument()
     expect(await screen.findByText(/버전 3.0/)).toBeInTheDocument()
-    expect(screen.getByText('3. 보관과 접근')).toBeInTheDocument()
+    expect(
+      screen.getByRole('heading', { name: '5. 업로드 문서의 검증과 저장' }),
+    ).toBeInTheDocument()
+    expect(screen.getByText(/일반 문서와 근로자 제출 파일은 파일당 최대 20MB/)).toBeInTheDocument()
+  })
+
+  it('renders the optional marketing notice and current version', async () => {
+    render(
+      <MemoryRouter>
+        <LegalPolicyPage kind="marketing" />
+      </MemoryRouter>,
+    )
+
+    expect(screen.getByRole('heading', { name: '제품 소식 수신 안내' })).toBeInTheDocument()
+    expect(await screen.findByText(/버전 1.0/)).toBeInTheDocument()
+    expect(screen.getByRole('heading', { name: '5. 선택 동의의 영향' })).toBeInTheDocument()
   })
 })