Remove chapter access locks and open all course content

Author: jammy0903

packages/frontend/src/features/courses/ChapterLessonsPage.tsx

@@ -5,15 +5,15 @@
  */
 
 import { useCallback, useEffect, useMemo } from 'react';
-import { useParams, useNavigate, Link } from 'react-router-dom';
+import { useParams, useNavigate } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import { useQueryClient } from '@tanstack/react-query';
 import i18n from 'i18next';
 import type { SupportedLanguage } from '@/types/simulator';
 import { CourseGrid } from './components/CourseGrid';
 import { LessonCard } from './components/LessonCard';
 import { useStore } from '@/stores/store';
-import { ChevronLeft, BookOpen, Target, CheckCircle2, Circle, Lock } from 'lucide-react';
+import { ChevronLeft, BookOpen, Target, CheckCircle2, Circle } from 'lucide-react';
 import { useIsMobile, useChapter, useChapterProgress } from '@/hooks';
 import { getLessonFull } from '@/services/courses';
 
@@ -46,7 +46,6 @@ export function ChapterLessonsPage() {
   const navigate = useNavigate();
   const queryClient = useQueryClient();
   const setPageTitle = useStore((s) => s.setPageTitle);
-  const appUser = useStore((s) => s.appUser);
   const langColor = getLanguageColor(lang);
   const isMobile = useIsMobile();
   const locale = i18n.resolvedLanguage || i18n.language;
@@ -55,10 +54,6 @@ export function ChapterLessonsPage() {
   const { data: chapter, isLoading, isError, error } = useChapter(chapterId);
   const { data: chapterProgressData } = useChapterProgress(chapterId);
 
-  // 구독 시스템 제거됨 - 챕터 2 이상은 로그인만 필요
-  const accessDenied = !!chapter && !appUser && chapter.order >= 2;
-  const accessReason = accessDenied ? t('chapter.login_required_for_chapter') : '';
-
   const progressByLessonId = useMemo(() => {
     const map = new Map<string, LessonProgressSnapshot | null>();
     for (const lesson of chapterProgressData?.lessons ?? []) {
@@ -75,7 +70,7 @@ export function ChapterLessonsPage() {
   // - 첫 미완료 레슨 1개만 예열
   // WHY: 이전에는 레슨 전체를 순차 프리페치해서 이동 시 체감 지연을 유발함
   useEffect(() => {
-    if (!chapter?.lessons || chapter.lessons.length === 0 || accessDenied) return;
+    if (!chapter?.lessons || chapter.lessons.length === 0) return;
 
     const lessons = [...chapter.lessons].sort((a, b) => a.order - b.order);
     const firstIncomplete = lessons.find((l) => getLessonProgress(l as LessonWithProgress)?.status !== 'completed');
@@ -87,7 +82,7 @@ export function ChapterLessonsPage() {
       queryFn: () => getLessonFull(targetLessonId),
       staleTime: 5 * 60 * 1000,
     });
-  }, [chapter, queryClient, accessDenied, getLessonProgress, locale]);
+  }, [chapter, queryClient, getLessonProgress, locale]);
 
   // hover 시 해당 레슨 프리페치
   const handlePrefetch = useCallback((lessonId: string) => {
@@ -139,53 +134,6 @@ export function ChapterLessonsPage() {
     );
   }
 
-  // 구독 필요 (접근 거부)
-  if (accessDenied && chapter) {
-    return (
-      <div className="min-h-screen py-4 px-3 md:px-12 lg:px-16">
-        {/* 뒤로가기 버튼 */}
-        <button
-          onClick={() => navigate(`/courses/${lang}`)}
-          className="group flex items-center gap-2 text-[var(--theme-dashboard-text-muted)] hover:text-[#FFD700] transition-colors mb-6"
-        >
-          <ChevronLeft className="w-8 h-8 group-hover:-translate-x-1 transition-transform" />
-          <span className="text-2xl font-semibold tracking-wider uppercase">{t('chapter.back_to_chapters')}</span>
-        </button>
-
-        {/* 잠금 안내 */}
-        <div className="flex flex-col items-center justify-center py-20">
-          <div
-            className="w-24 h-24 rounded-full flex items-center justify-center mb-6"
-            style={{ backgroundColor: `${langColor}30` }}
-          >
-            <Lock className="w-12 h-12" style={{ color: langColor }} />
-          </div>
-          <h2 className="text-2xl font-bold text-[var(--theme-dashboard-title)] mb-3">
-            {chapter.title}
-          </h2>
-          <p className="text-[var(--theme-dashboard-text-muted)] mb-6 text-center max-w-md">
-            {accessReason}
-          </p>
-          <div className="flex flex-col sm:flex-row gap-3">
-            <Link
-              to="/"
-              className="px-6 py-3 bg-gradient-to-r from-amber-400 to-orange-500 text-white rounded-xl font-semibold hover:shadow-lg transition-shadow flex items-center gap-2"
-            >
-              {t('auth.login')}
-            </Link>
-            <button
-              onClick={() => navigate(`/courses/${lang}`)}
-              className="px-6 py-3 border border-[var(--theme-dashboard-card-border)] rounded-xl font-semibold hover:bg-[var(--theme-layout-top-bar-button-hover)] transition-colors"
-              style={{ color: 'var(--theme-dashboard-text)' }}
-            >
-              {t('chapter.view_other_chapters')}
-            </button>
-          </div>
-        </div>
-      </div>
-    );
-  }
-
   return (
     <div className="min-h-screen py-4 px-3 md:px-12 lg:px-16">
       {/* 뒤로가기 버튼 */}

packages/frontend/src/features/courses/LanguageCoursePage.tsx

@@ -6,7 +6,7 @@ import type { ChapterWithLessons } from '@/types';
 import { CourseGrid } from './components/CourseGrid';
 import { ChapterCard } from './components/ChapterCard';
 import { useStore } from '@/stores/store';
-import { ChevronLeft, Lock } from 'lucide-react';
+import { ChevronLeft } from 'lucide-react';
 import { useIsMobile, useLanguageCourse } from '@/hooks';
 import { CBrandIcon } from '@/components/ui/CBrandIcon';
 
@@ -42,7 +42,7 @@ export function LanguageCoursePage({ langOverride }: LanguageCoursePageProps = {
   const lang = langOverride ?? routeLang;
   const navigate = useNavigate();
   const setPageTitle = useStore((s) => s.setPageTitle);
-  const appUser = useStore((s) => s.appUser);
+  const authLoading = useStore((s) => s.authLoading);
 
   // TanStack Query: loading, error, data 자동 관리
   const { data, isLoading, isError, error } = useLanguageCourse(lang);
@@ -106,8 +106,8 @@ export function LanguageCoursePage({ langOverride }: LanguageCoursePageProps = {
   const isMobile = useIsMobile();
 
   // 데이터에서 language와 chapters 추출
-  const language = data;
   const chapters = data?.chapters || [];
+  const pageLoading = authLoading || isLoading;
 
   // 페이지 제목 설정
   useEffect(() => {
@@ -189,7 +189,7 @@ export function LanguageCoursePage({ langOverride }: LanguageCoursePageProps = {
                   {langInfo.name}
                 </h1>
                 <p className="text-[var(--theme-dashboard-text-muted)] text-sm">
-                  {isLoading ? t('common.loading') : `${chapters.length} ${t('courses.chapters')} · ${totalLessons} ${t('courses.lessons')}`}
+                  {pageLoading ? t('common.loading') : `${chapters.length} ${t('courses.chapters')} · ${totalLessons} ${t('courses.lessons')}`}
                 </p>
                 <p className="text-[var(--theme-dashboard-text-muted)] text-xs mt-1">
                   {langInfo.description}
@@ -202,7 +202,7 @@ export function LanguageCoursePage({ langOverride }: LanguageCoursePageProps = {
 
       {/* 챕터 리스트 */}
       <div style={{ marginTop: '80px' }}>
-        {isLoading ? (
+        {pageLoading ? (
           <div className="flex items-center justify-center py-20">
             <div className="text-center">
               <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-[var(--theme-dashboard-accent)] mx-auto mb-4"></div>
@@ -236,30 +236,14 @@ export function LanguageCoursePage({ langOverride }: LanguageCoursePageProps = {
                   // 백엔드에서 계산된 진행률 사용 (DRY 원칙)
                   const { total, completed, percentage: progress } = getChapterProgress(chapter);
 
-                  // 이전 챕터들이 모두 완료되었는지 확인
-                  const previousChaptersComplete = chapters.slice(0, index).every(ch => {
-                    const { total: prevTotal, completed: prevCompleted } = getChapterProgress(ch);
-                    return prevTotal > 0 && prevCompleted === prevTotal;
-                  });
-
-                  const isSequentialLocked = language?.isSequential
-                    ? index > 0 && !previousChaptersComplete && completed === 0
-                    : false;
-
-                  // 비로그인: 챕터 2 이상 로그인 필요
-                  const needsLogin = !appUser && chapter.order >= 2;
-
                   return (
                     <div key={chapter.id}>
                       <button
-                        onClick={() => !isSequentialLocked && navigate(`/courses/${lang}/${chapter.id}`)}
-                        disabled={isSequentialLocked}
-                        className="w-full p-4 text-left transition-colors hover:bg-[var(--theme-layout-top-bar-button-hover)] disabled:opacity-50 disabled:cursor-not-allowed"
+                        onClick={() => navigate(`/courses/${lang}/${chapter.id}`)}
+                        className="w-full p-4 text-left transition-colors hover:bg-[var(--theme-layout-top-bar-button-hover)]"
                       >
                         <div className="flex items-center justify-between gap-3">
                           <h3 className="text-base font-semibold text-[#333] flex items-center gap-2 flex-shrink-0">
-                            {isSequentialLocked && <Lock className="w-4 h-4 text-[var(--theme-dashboard-text-muted)]" />}
-                            {needsLogin && !isSequentialLocked && <Lock className="w-4 h-4 text-gray-400" />}
                             {chapter.title}
                           </h3>
                           <div className="flex items-center gap-2 flex-shrink-0">
@@ -295,22 +279,8 @@ export function LanguageCoursePage({ langOverride }: LanguageCoursePageProps = {
                 {chapters.map((chapter, index) => {
                   // 백엔드에서 계산된 진행률 사용 (DRY 원칙)
                   const { total, completed } = getChapterProgress(chapter);
-
-                  // 이전 챕터들이 모두 완료되었는지 확인
-                  const previousChaptersComplete = chapters.slice(0, index).every(ch => {
-                    const { total: prevTotal, completed: prevCompleted } = getChapterProgress(ch);
-                    return prevTotal > 0 && prevCompleted === prevTotal;
-                  });
-
                   const isComplete = total > 0 && completed === total;
-                  // isSequential이 false면 모든 챕터 즉시 열림
-                  const isLocked = language?.isSequential
-                    ? index > 0 && !previousChaptersComplete && completed === 0
-                    : false;
-                  const isActive = !isComplete && !isLocked && (index === 0 || previousChaptersComplete);
-
-                  // 비로그인: 챕터 2 이상 로그인 필요
-                  const needsLogin = !appUser && chapter.order >= 2;
+                  const isActive = !isComplete && index === 0;
 
                   return (
                     <ChapterCard
@@ -319,9 +289,7 @@ export function LanguageCoursePage({ langOverride }: LanguageCoursePageProps = {
                       languageId={lang}
                       lessonCount={total}
                       completedCount={completed}
-                      isLocked={isLocked}
                       isActive={isActive}
-                      needsLogin={needsLogin}
                     />
                   );
                 })}