From 1867c050c46218a850d9f5990251911d49b86865 Mon Sep 17 00:00:00 2001
From: AWESOMEDEV <admin@awesomedev.dev>
Date: Fri, 17 Jul 2026 15:55:42 +0900
Subject: [PATCH] =?UTF-8?q?feat(ux):=20=ED=95=99=EC=8A=B5=EC=84=BC?=
 =?UTF-8?q?=ED=84=B0=EB=A5=BC=20=EC=B9=B4=ED=85=8C=EA=B3=A0=EB=A6=AC=20?=
 =?UTF-8?q?=EC=84=A0=ED=83=9D=20=EB=B0=A9=EC=8B=9D=EC=9C=BC=EB=A1=9C=20(83?=
 =?UTF-8?q?=EA=B0=95=EC=A2=8C=20=ED=95=9C=EB=B2=88=EC=97=90=20=E2=86=92=20?=
 =?UTF-8?q?=EC=B9=B4=ED=85=8C=EA=B3=A0=EB=A6=AC=EB=B3=84=2012=EA=B0=9C)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

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

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 frontend/src/pages/LearnHubPage.jsx | 31 +++++++++++++++++++++++++++--
 1 file changed, 29 insertions(+), 2 deletions(-)

diff --git a/frontend/src/pages/LearnHubPage.jsx b/frontend/src/pages/LearnHubPage.jsx
index 5eaba32..3a1533a 100644
--- a/frontend/src/pages/LearnHubPage.jsx
+++ b/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>
   );
 }