우측 사이드바와 레슨 본문 위 끝선 일직선 상에 오게 하기

[dongjooyun]

📄 설명

@claude 목표: 우측 사이드바와 레슨 본문 위 끝선 일직선 상에 오게 하기
참고 자료에 첨부한 대로 레슨 상세 페이지에 있는 여기서 막히셨나요? 사이드바를 따라해보기(레슨 본문 섹션) 영역과 일직선 상에 오게끔 아래로 내리기.

✅ 작업할 내용

학습 여정 맵 돌아가기
레슨 라벨 | 레슨 제목 | 예상 학습 소요 시간
레슨 한줄 소개
해시태그
따라해보기 | 레슨 돌아보기 tap bar
위 요소를 하나의 태그로 감싸주고 컴포넌트의 너비를 viewport 꽉 채워줘.
그리고 해당 컴포넌트 아래에 따라해보기/레슨 돌아보기에 대한 컨텐츠가 오게끔 하고 우측 사이드바도 아래로 내려줘.
결국은 따라해보기 본문 섹션의 상단 끝 선과 여기서 막히셨나요? 우측 사이드바 섹션의 상단 끝 선이 일직선 상에 오게끔 스타일링 변경해줘.

🙋🏻 참고 자료

[dongjooyun]

@claude

[claude]

Claude finished @dongjooyun's task in 4m 51s —— View job • claude/issue-700-20260525-1846 • Create PR ➔

---

작업 완료

• 참고 이미지 및 현재 레슨 상세 페이지 구조 파악
• 레슨 상세 페이지 컴포넌트 위치 탐색
• 레이아웃 변경 구현
  • 헤더 섹션(뒤로가기 → 탭바)을 full-width div로 분리
  • 헤더 아래에 본문+사이드바 2컬럼 레이아웃 구성
  • 사이드바 상단을 본문 상단과 정렬
• 커밋 & 푸시

변경 내용 요약:

src/app/(class-lesson)/class/[slug]/lesson/[id]/page.tsx

이전 구조:

<div> ← flex-row (2컬럼)
  <div> ← LEFT: 헤더(고정) + 본문(스크롤)
  <div class="pt-500"> ← RIGHT: 사이드바 (헤더와 같은 높이에서 시작)

변경 후 구조:

<div class="flex flex-col h-[...]"> ← flex-column 컨테이너
  <div class="w-full shrink-0 pt-500"> ← 헤더 섹션 (full-width, 고정)
    뒤로가기 / 레슨 라벨·제목·시간 / 한줄 소개 / 탭바
  <div class="flex-1 min-h-0 flex items-start gap-250 mt-300"> ← 2컬럼 (탭바 아래)
    <div class="h-full overflow-y-auto"> ← 본문 (스크롤)
    <div class="w-4500 shrink-0"> ← 사이드바 (본문 상단과 일직선)

|

[dongjooyun]

@claude localhost에서 해당 코드 실행해서 https://test.zeroone.it.kr/class/vibe-intro/lesson/2 화면 어떻게 보이는지 캡처해서 보여줄 수 있니?

[dongjooyun]

@claude

[dongjooyun]

@claude 내가 원하는 대로 위 끝선 align은 잘 되었는데 레슨 헤더 섹션에 예상학습소요시간, 한줄소개와 해시태그가 빠진 것 같은데 다시 추가해.

[claude]

Claude finished @dongjooyun's task in 8m 8s —— View job • claude/issue-700-20260525-1911 • Create PR ➔

---

작업 목록

• 현재 레슨 상세 페이지 코드 확인
• 누락된 요소(예상학습소요시간, 한줄소개, 해시태그) 파악
  • 예상학습소요시간/한줄소개: 코드에 존재했으나 레이아웃 재배치 시 유지 필요
  • 해시태그: LessonDetailResponse에 tags?: string[] 필드 추가 후 표시
• LessonDetailResponse에 tags?: string[] 필드 추가
• 헤더 섹션 재구성 (full-width, 모든 요소 포함)
• 레이아웃 변경: 헤더 아래에 본문+사이드바 2컬럼 정렬
• 커밋 & 푸시

---

변경 내용

src/types/api/course.types.ts

• LessonDetailResponse에 tags?: string[] 필드 추가

src/app/(class-lesson)/class/[slug]/lesson/[id]/page.tsx

• 헤더 섹션(w-full shrink-0)에 모든 요소 포함:
  • 학습 여정 맵 돌아가기
  • 레슨 라벨 + 제목 + 예상학습소요시간
  • 한줄소개 (description)
  • 해시태그 (lesson?.tags 배열을 #태그명 형태로 표시)
  • 따라해보기/레슨 돌아보기 탭바
• 헤더 아래 flex-1 min-h-0 2컬럼 레이아웃:
  • 좌측: 스크롤 가능한 본문 영역
  • 우측: 사이드바 (본문 상단과 동일한 끝선에서 시작)

참고: 해시태그는 lesson.tags 배열이 있을 때만 렌더링됩니다. 백엔드가 tags 필드를 응답에 포함할 경우 표시되며, 현재 API 응답에서 해당 필드가 반환되지 않는다면 백엔드와 함께 확인이 필요합니다.

| claude/issue-700-20260525-1911