refactor: 분리되어 관리하고 있던 문서 시스템을 하나로 통일

2026-09-04 18:56:01 +09:00
parent 4b9e7148b5
commit 43bccd08a8
121 changed files with 2861 additions and 534 deletions
@@ -0,0 +1,44 @@
+홈 주제 탭 — 배포본 실측
+출처: https://hyeonworks.com (frontend 2b2f443) — 2026-09-04, Playwright 로 getComputedStyle
+재현: 홈에서 개발자도구 콘솔에 아래를 붙여 넣으면 같은 값이 나온다.
+
+  const s = document.querySelector('.home-comparison');
+  [...s.querySelectorAll('.home-topic-tabs button')].map(b => {
+    const cs = getComputedStyle(b);
+    return { text: b.textContent, selected: b.getAttribute('aria-selected'),
+             fontSize: cs.fontSize, fontWeight: cs.fontWeight,
+             color: cs.color, background: cs.backgroundColor,
+             pseudoAfter: getComputedStyle(b, '::after').content };
+  });
+
+======================================================================
+[탭]
+
+  고른 탭   "OAuth/OIDC 인증 경계"   aria-selected=true
+    font-size      14px          ← 2단계에서는 30px 이었다
+    font-weight    560           ← 2단계에서는 650
+    color          rgb(23,24,27)      (--ink)
+    background     rgb(231,231,227)   ← 알약. 색만으로는 「진한 글자」로 읽힌다
+    border-radius  17px
+    ::after        none          ← 파란 밑줄 제거 확인
+
+  안 고른 탭 "JPA 피드 조회 성능"    aria-selected=false
+    color          rgb(108,111,118)   (--faint)
+    background     rgba(0,0,0,0)      투명
+
+[묶음의 결속 — 「글자만 떠 있다」를 고친 부분]
+
+  .home-topic-panel  border-top     1px rgb(200,203,207)   (--line-strong)
+  .home-comparison ul border-top    0px                    ← 윗선을 패널로 옮겼다
+  탭 줄 아래 ~ 패널 위 간격          0px                    ← 탭이 그 선에 바로 얹힌다
+
+  선이 목록에 있으면 축 이름 줄만 선 위로 밀려 나가 탭과 한 덩어리처럼 보이고,
+  정작 목록은 저 혼자 시작한다. 그 상태가 home-topic-tabs-2.png 다.
+
+[왼쪽 끝 정렬 — 알약의 좌우 여백(13px)만큼 줄을 당겼다]
+
+  첫 탭 글자      x = 261
+  축 이름 「구조」  x = 261
+  첫 행 「SPA」    x = 263
+
+[구역 전체 높이]  529px