Skip to content

Commit 61cbb7e

Browse files
HA-SEUNG-JEONGHA-SEUNG-JEONG
authored
Merge pull request #583 from code-zero-to-one/feat/class
클래스 내 레슨 추가
2 parents a26253a + 946e8f5 commit 61cbb7e

7 files changed

Lines changed: 581 additions & 473 deletions

File tree

‎src/app/(landing)/class/[id]/page.tsx‎

Lines changed: 108 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33
import {
44
Users,
55
Clock,
6-
ThumbsUp,
76
ChevronDown,
87
ChevronUp,
98
ChevronLeft,
@@ -18,7 +17,11 @@ import Link from 'next/link';
1817
import { use, useMemo, useState } from 'react';
1918
import { cn } from '@/components/common/ui/(shadcn)/lib/utils';
2019
import { useAuth } from '@/features/auth/model/use-auth';
21-
import { useGetCourseCurriculum } from '@/hooks/queries/course/course-api';
20+
import {
21+
useGetCourseCurriculum,
22+
useGetCourseDetail,
23+
useGetCourseList,
24+
} from '@/hooks/queries/course/course-api';
2225
import { useToastStore } from '@/stores/use-toast-store';
2326

2427
const LoginModal = dynamic(
@@ -116,6 +119,9 @@ export default function ClassDetailPage({
116119

117120
// 커리큘럼은 DB에서 가져오되, 코스가 없으면 하드코딩된 CHAPTERS로 fallback.
118121
const { data: curriculum } = useGetCourseCurriculum(slug);
122+
const { data: courseDetail } = useGetCourseDetail(slug);
123+
const { data: allCourses } = useGetCourseList();
124+
const courseSummary = allCourses?.find((c) => c.slug === slug);
119125
const chaptersForRoadmap = useMemo(() => {
120126
if (curriculum?.chapters && curriculum.chapters.length > 0) {
121127
return curriculum.chapters.map((chapter) => ({
@@ -125,6 +131,7 @@ export default function ClassDetailPage({
125131
lessons: chapter.lessons.map((lesson) => ({
126132
order: lesson.order,
127133
title: lesson.title,
134+
lessonId: lesson.lessonId,
128135
})),
129136
}));
130137
}
@@ -133,6 +140,7 @@ export default function ClassDetailPage({
133140
lessons: chapter.lessons.map((title, index) => ({
134141
order: index + 1,
135142
title,
143+
lessonId: undefined as number | undefined,
136144
})),
137145
}));
138146
}, [curriculum]);
@@ -167,26 +175,26 @@ export default function ClassDetailPage({
167175
{/* Page header */}
168176
<div className="mx-auto max-w-page px-600 pt-600">
169177
<h1 className="font-designer-36b text-gray-800">
170-
바이브 코딩 입문자 코스
178+
{courseDetail?.title ?? '바이브 코딩 입문자 코스'}
171179
</h1>
172180
<div className="mt-300 flex flex-wrap gap-400">
173181
<div className="flex items-center gap-75">
174182
<Users className="h-300 w-300 shrink-0 text-text-subtlest" />
175183
<p className="font-designer-16m text-gray-800">
176-
<span className="font-designer-16b text-text-brand">30</span>
177-
명이 함께 배우고 있어요!
178-
</p>
179-
</div>
180-
<div className="flex items-center gap-75">
181-
<Clock className="h-300 w-300 shrink-0 text-text-subtlest" />
182-
<p className="font-designer-16m text-gray-800">평균 5일 소요</p>
183-
</div>
184-
<div className="flex items-center gap-75">
185-
<ThumbsUp className="h-300 w-300 shrink-0 text-text-subtlest" />
186-
<p className="font-designer-16m text-gray-800">
187-
<span className="font-designer-16b text-text-brand">25</span>명
184+
<span className="font-designer-16b text-text-brand">
185+
{courseSummary?.participantCount ?? 0}
186+
</span>
187+
{courseSummary?.participantLabel ?? '명이 함께 배우고 있어요!'}
188188
</p>
189189
</div>
190+
{curriculum?.durationDays && (
191+
<div className="flex items-center gap-75">
192+
<Clock className="h-300 w-300 shrink-0 text-text-subtlest" />
193+
<p className="font-designer-16m text-gray-800">
194+
평균 {curriculum.durationDays}일 소요
195+
</p>
196+
</div>
197+
)}
190198
</div>
191199
</div>
192200

@@ -446,6 +454,14 @@ export default function ClassDetailPage({
446454
<p className="font-designer-18b text-gray-800">
447455
{lesson.title}
448456
</p>
457+
{lesson.lessonId !== undefined && (
458+
<Link
459+
href={`/class/${slug}/lesson/${lesson.lessonId}`}
460+
className="ml-auto shrink-0 rounded-100 border border-border-brand px-200 py-75 font-designer-14m text-text-brand"
461+
>
462+
자세히 보기
463+
</Link>
464+
)}
449465
</div>
450466
))}
451467
</div>
@@ -485,7 +501,44 @@ export default function ClassDetailPage({
485501
/>
486502
</div>
487503
</div>
488-
{/* TODO: remaining benefit cards — content to be confirmed */}
504+
<div className="overflow-hidden rounded-200 bg-purple-100 p-350">
505+
<p className="font-designer-20b text-gray-800">
506+
디스코드에서 함께 공부해요
507+
</p>
508+
<p className="mt-200 whitespace-pre-line font-designer-18r text-gray-800">
509+
{
510+
'라이브 학습 채널에서 화면 공유하고 함께 레슨 들어요.\n혼자가 아닌 함께 완주할 수 있어요.\n운영진 24시간 상주, 막힌 곳 질문답변 가능.'
511+
}
512+
</p>
513+
<div className="mt-300">
514+
<Image
515+
src="/class/detail/benefit-2.png"
516+
alt="디스코드 함께 공부"
517+
width={96}
518+
height={96}
519+
className="rounded-150"
520+
/>
521+
</div>
522+
</div>
523+
<div className="overflow-hidden rounded-200 bg-yellow-100 p-350">
524+
<p className="font-designer-20b text-gray-800">
525+
막히면 바로 질문하세요
526+
</p>
527+
<p className="mt-200 whitespace-pre-line font-designer-18r text-gray-800">
528+
{
529+
'레슨마다 질문답변을 남길 수 있어요.\n운영진이 직접 답변해드립니다.\n다른 빌더들은 어떤 곳에서 막혔는지, 어떻게 해결했는지도 참고해보세요.'
530+
}
531+
</p>
532+
<div className="mt-300">
533+
<Image
534+
src="/class/detail/benefit-3.png"
535+
alt="질문답변"
536+
width={96}
537+
height={96}
538+
className="rounded-150"
539+
/>
540+
</div>
541+
</div>
489542
</div>
490543
</section>
491544

@@ -506,12 +559,11 @@ export default function ClassDetailPage({
506559
<div className="overflow-hidden rounded-150 border border-border-subtle">
507560
<div className="p-300">
508561
<h3 className="font-designer-28b text-gray-800">
509-
바이브 코딩 입문자 코스
562+
{courseDetail?.title ?? '바이브 코딩 입문자 코스'}
510563
</h3>
511-
<p className="mt-150 font-designer-16r text-gray-800">
512-
바이브 코딩 막막함 이젠 여기서 끝내세요!
513-
<br />
514-
ZERO-ONE의 빌더들과 함께 뿌셔보세요!
564+
<p className="mt-150 whitespace-pre-line font-designer-16r text-gray-800">
565+
{courseDetail?.description ??
566+
'바이브 코딩 막막함 이젠 여기서 끝내세요!\nZERO-ONE의 빌더들과 함께 뿌셔보세요!'}
515567
</p>
516568

517569
<span className="mt-150 inline-block rounded-50 bg-gray-400 px-75 py-25 font-designer-12r text-text-inverse">
@@ -520,14 +572,37 @@ export default function ClassDetailPage({
520572
<p className="mt-75 font-designer-14r text-gray-500">
521573
Claude Pro 1개월 Gift 증정 + 커뮤니티 +
522574
<br />
523-
N개 레슨 + 실습 가이드
575+
{courseDetail?.freeLessonCount !== null &&
576+
courseDetail?.freeLessonCount !== undefined
577+
? `${courseDetail.freeLessonCount}개 레슨`
578+
: 'N개 레슨'}{' '}
579+
+ 실습 가이드
524580
</p>
525581

582+
{courseSummary?.discountPrice && (
583+
<div className="mt-300">
584+
<p className="font-designer-14b text-gray-800">
585+
무료 온보딩 이후 코스 금액가
586+
</p>
587+
<p className="mt-75 font-designer-30b text-gray-800">
588+
{courseSummary.discountPrice.toLocaleString()}원
589+
</p>
590+
{courseSummary.regularPrice && (
591+
<p className="font-designer-16r text-gray-500 line-through">
592+
{courseSummary.regularPrice.toLocaleString()}원
593+
</p>
594+
)}
595+
</div>
596+
)}
597+
526598
<div className="mt-300 flex items-center gap-50">
527599
<Users className="h-300 w-300 shrink-0 text-text-subtlest" />
528600
<p className="font-designer-14m text-gray-800">
529-
지금 <span className="text-text-brand">00</span>
530-
명이 이 코스를 탐색하고 있어요!
601+
지금{' '}
602+
<span className="text-text-brand">
603+
{courseSummary?.participantCount}
604+
</span>
605+
명이 이 코스를 들었어요!
531606
</p>
532607
</div>
533608

@@ -560,21 +635,21 @@ export default function ClassDetailPage({
560635
)}
561636
</div>
562637

563-
{/* Study With Me */}
564-
<div className="mt-300 overflow-hidden rounded-100 bg-gray-800 p-300">
638+
{/* Study With Me — TODO: API/CMS 연동 필요 (이벤트 날짜·내용 백엔드 제공) */}
639+
<div className="mt-300 rounded-100 bg-gray-800 p-300">
565640
<p className="font-designer-14m text-white">
566-
5월 20일(토) 저녁 8시
641+
매주 월·화·수 오전 6시
567642
</p>
568643
<p className="mt-75 font-designer-18b text-white">
569644
Study with Me 진행!
570645
</p>
571-
<p className="mt-150 font-designer-14r text-gray-400">
572-
디스코드에서 모여서 배운 것을 토대로
573-
<br />
574-
각자 공부해봐요!
646+
<p className="mt-150 whitespace-pre-line font-designer-14r text-gray-400">
647+
{
648+
'함께 모여 공부하는 시간이에요.\n디스코드 라이브 채널에서 만나요.'
649+
}
575650
</p>
576-
<p className="mt-300 font-designer-12r text-gray-400">
577-
*디스코드 방은 알림톡으로 안내드립니다.
651+
<p className="mt-200 font-designer-12r text-gray-400">
652+
※ 디스코드 방은 알림톡으로 안내드립니다.
578653
</p>
579654
</div>
580655
</div>

0 commit comments

Comments
 (0)