feat(ux): 학습센터를 카테고리 선택 방식으로 (83강좌 한번에 → 카테고리별 12개)

강좌 83개가 한 화면에 다 펼쳐져 압도적이던 문제.
- 카테고리 탭(7개, 각 '이름 완료/전체' 표시) 추가, 선택한 카테고리 강좌만 렌더
- 처음엔 첫 카테고리(컴퓨터 기초)를 열어 둠, .tabs/.tab 기존 스타일 재사용
- 전체 진도율 바는 히어로에 그대로 유지

검증: 초기 컴퓨터기초 12개만 노출, '앱 개발' 탭 클릭 시 앱 12강좌로 전환, 콘솔에러0.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

frontend/src/pages/LearnHubPage.jsx

@@ -10,6 +10,10 @@ import { COURSE_CATEGORIES, ALL_COURSES } from '../courseCatalog';
 export default function LearnHubPage() {
   // 완료한 코스 slug들 — 포함 여부 확인이 잦으니 Set이 제격 (대시보드와 같은 패턴)
   const [completedSlugs, setCompletedSlugs] = useState(new Set());
+  // 지금 보고 있는 카테고리. 처음엔 첫 카테고리(컴퓨터 기초)를 연다.
+  // 학습 포인트: 코스 83개를 한 번에 다 펼치면 압도적이라, 카테고리 하나씩만 보여준다.
+  //   "한 화면에 담을 정보의 양"을 줄이는 게 직관성의 핵심이다.
+  const [activeCategory, setActiveCategory] = useState(COURSE_CATEGORIES[0].category);
 
   useEffect(() => {
     let cancelled = false;
@@ -25,6 +29,10 @@ export default function LearnHubPage() {
   const totalCount = ALL_COURSES.length;
   const percent = totalCount === 0 ? 0 : Math.round((totalDone / totalCount) * 100);
 
+  // 선택된 카테고리 (없으면 첫 번째로 안전하게 폴백)
+  const group =
+    COURSE_CATEGORIES.find((g) => g.category === activeCategory) || COURSE_CATEGORIES[0];
+
   return (
     <div>
       <div className="hero">
@@ -56,7 +64,26 @@ export default function LearnHubPage() {
         </p>
       </div>
 
-      {COURSE_CATEGORIES.map((group) => {
+      {/* 카테고리 선택 탭 — 누른 카테고리의 강좌만 아래에 보여준다.
+          각 탭에 "이름 + 완료/전체"를 함께 표시해 어디를 얼마나 했는지 한눈에. */}
+      <div className="tabs">
+        {COURSE_CATEGORIES.map((g) => {
+          const gDone = g.items.filter((i) => i.slug && completedSlugs.has(i.slug)).length;
+          return (
+            <button
+              key={g.category}
+              type="button"
+              className={`tab${g.category === activeCategory ? ' active' : ''}`}
+              onClick={() => setActiveCategory(g.category)}
+            >
+              {g.category} {gDone}/{g.items.length}
+            </button>
+          );
+        })}
+      </div>
+
+      {/* 선택된 카테고리 하나만 렌더 */}
+      {(() => {
         const groupDone = group.items.filter((i) => i.slug && completedSlugs.has(i.slug)).length;
         return (
           <div key={group.category}>
@@ -113,7 +140,7 @@ export default function LearnHubPage() {
             </div>
           </div>
         );
-      })}
+      })()}
     </div>
   );
 }