[cherry-pick] 클래스 페이지 모바일 반응형 버그 수정 by HA-SEUNG-JEONG · Pull Request #708 · code-zero-to-one/study-platform-client

HA-SEUNG-JEONG · 2026-05-27T01:04:41Z

개요

클래스 목록/상세/로드맵·랜딩·마이페이지 등 다수 페이지에서 모바일(390px) 뷰포트 기준 레이아웃 깨짐 및 UX 버그가 존재했음. 16 배수 spacing 토큰을 rem으로 통일하고, 그리드/탭/CTA 등 주요 UI 요소에 반응형 처리를 적용해 390px~1280px 전 뷰포트 정상 렌더링을 달성함.

원본 PR

develop PR: 클래스 페이지 모바일 반응형 버그 수정 #706 (클래스 페이지 모바일 반응형 버그 수정 #706)
원본 브랜치: fix/bug

Cherry-pick 대상 커밋

140e554d — [bug] fix : style(tokens): 16 나눠떨어지는 spacing 토큰 rem 통일 및 --spacing-1875 추가
2d219e79 — [bug] fix : fix(layout): 공통 레이아웃 모바일 반응형 개선
a49d9e4f — [bug] fix : fix(ui): 클래스 페이지 모바일 반응형 및 UI 버그 수정

스크린샷 chore 커밋(3개)은 PR 문서화 전용으로 main 제외.

변경 파일

src/app/global.css — 16 배수 spacing 토큰 px → rem 통일, --spacing-1875 신규 추가
src/app/(landing)/class/[slug]/page.tsx — 사이드바 그리드 모바일 1열 처리
src/app/(landing)/class/page.tsx — hero/h1 반응형 타이포, 썸네일 토큰 교체
src/app/(landing)/class/[slug]/(learning)/_components/feed-tab.tsx — 컨트롤 영역 flex-wrap으로 iPhone SE 가로 스크롤 방지
src/app/(landing)/class/[slug]/(learning)/_components/qna-tab.tsx — 반응형 개선
src/app/(landing)/class/[slug]/(learning)/feed/[id]/page.tsx — 반응형 개선
src/app/(landing)/class/[slug]/(learning)/layout.tsx — 반응형 개선
src/app/(landing)/class/[slug]/(learning)/qa/[id]/page.tsx — 반응형 개선
src/app/(class-lesson)/class/[slug]/lesson/[id]/page.tsx — 반응형 개선
src/app/(service)/(my)/my-page/page.tsx — 라벨-인풋 모바일 flex-col, 닉네임 flex-wrap
src/components/common/layout/footer.tsx — 모바일 세로 스택, 텍스트 줄바꿈
src/components/common/layout/sidebar/my-page-mobile-nav.tsx — webkit 스크롤바 숨김
src/components/common/ui/floating-class-action-buttons.tsx — 모바일 bottom 위치 조정
src/components/pages/class/class-detail-roadmap-section.tsx — h-[150px] → h-1875 토큰 교체
src/components/pages/class/class-detail-tab-nav.tsx — 탭 수평 스크롤 + 그라데이션 fade
src/components/pages/class/roadmap-tab.tsx — journey map 모바일 숨김, 레슨 카드 truncate, CTA safe-area, 에셋 슬러그 오버라이드
src/components/pages/landing/landing-content.tsx — 랜딩 CTA 바 모바일 full-width + safe-area

혼입 검증 결과

git diff main...fix/bug --stat 결과 fix/bug 전체 브랜치는 281개 파일 변경(develop 누적)이나, cherry-pick은 위 3개 커밋 SHA만 적용하여 17개 코드 파일만 반영됨. PR diff가 원본 PR #706 코드 범위와 일치함.

develop 전용 코드 혼입 없음 (alerttalk, onboarding, admin 등 별도 feature 미포함)
yarn typecheck 통과 (스테일 .next/types/alerttalk 캐시 제거 후 확인)
yarn lint 통과 (0 errors, 263 warnings — 기존 존재)

Test plan

390px (모바일) 뷰포트에서 클래스 목록·상세·로드맵·랜딩·마이페이지 레이아웃 확인
768px (태블릿) 뷰포트에서 레이아웃 확인
1280px (데스크탑) 기존 레이아웃 회귀 없음 확인
iOS Safari에서 랜딩 CTA 바·로드맵 CTA 바 safe-area 확인
클래스 상세 탭 네비 좁은 화면에서 수평 스크롤 동작 확인
vibe-intro-claude-code 클래스 로드맵 탭 이미지 정상 표시 확인 (assetSlug 오버라이드)
마이페이지 프로필 편집 모바일 레이아웃 확인

🤖 Generated with Claude Code

Summary by CodeRabbit

릴리스 노트

Style
- 반응형 레이아웃 개선으로 모바일에서 더 나은 보기 경험 제공
- 버튼 및 상호작용 요소의 상태 표시 개선
- 간격과 여백 조정으로 전체 시각적 일관성 향상
- 가로 스크롤 가능한 영역의 사용성 개선
- iOS 안전 영역 대응으로 전체 화면 최적화

…ng 토큰 rem 통일 및 --spacing-1875 추가 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

- footer: 모바일 flex-col + pb 여백 / 텍스트 flex-wrap - my-page-mobile-nav: webkit 스크롤바 숨김 - floating-buttons: 모바일 bottom 위치 조정 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

- feed-tab: 컨트롤 영역 flex-wrap으로 iPhone SE 가로 스크롤 방지 - roadmap-tab: 말풍선 텍스트 SVG 꼬리 보정 수직 중앙 정렬 - class-detail-roadmap-section: h-[150px] → h-1875 토큰 교체 - tab-nav, qna-tab, layout 등: 반응형 개선 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

vercel · 2026-05-27T01:04:47Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
study-platform-client-dev	Ready	Preview, Comment	May 27, 2026 1:07am

coderabbitai · 2026-05-27T01:05:23Z

Caution

Review failed

Pull request was closed or merged during review

📝 Walkthrough

🎯 워크스루

이 PR은 전체 앱의 Tailwind spacing 토큰 시스템을 px에서 rem으로 전환하고, 모바일-우선 반응형 레이아웃을 강화하며, 상호작용 상태 시각화를 개선하고, 동적 자산 경로 및 iOS 안전 영역 지원을 추가합니다.

📋 변경 사항

Design System 및 Spacing 토큰 업데이트

Layer / File(s)	요약
Spacing 토큰 시스템 업데이트 `src/app/global.css`	spacing 토큰 12개를 px에서 rem으로 전환하고, --spacing-1875, --spacing-3650, --spacing-4425 세 개의 새로운 토큰을 추가합니다.

반응형 레이아웃 및 모바일 대응

Layer / File(s)	요약
레슨 페이지 좌우 컨테이너 반응형화 `src/app/(class-lesson)/class/[slug]/lesson/[id]/page.tsx`	좌측 컨테이너를 md:flex-row 기반 래퍼에 min-w-0 flex-1로 설정하고, 우측 사이드바를 hidden md:block으로 모바일 숨김 처리합니다.
피드/Q&A 탭 컨트롤 영역 반응형 구조 `src/app/(landing)/class/[slug]/(learning)/_components/feed-tab.tsx`, `src/app/(landing)/class/[slug]/(learning)/_components/qna-tab.tsx`	피드와 Q&A 탭의 상단 컨트롤 영역을 flex-col 기반 모바일 레이아웃에서 sm 이상에서 가로 배치로 전환하고, 필터 칩에 가로 스크롤 기능을 추가합니다.
학습 레이아웃 배너 및 탭 네비게이션 `src/app/(landing)/class/[slug]/(learning)/layout.tsx`	배너 제목을 whitespace-nowrap에서 반응형 폰트 크기로 변경하고, 탭 링크를 고정 너비에서 flex-1 기반 유연 레이아웃으로 전환합니다.
클래스 페이지 및 클래스 상세 그리드 레이아웃 `src/app/(landing)/class/[slug]/page.tsx`, `src/app/(landing)/class/page.tsx`	클래스 상세 그리드를 lg 이상에서만 사이드바 레이아웃을 적용하고, 클래스 목록 페이지 썸네일과 배너 제목 폰트 크기를 반응형으로 조정합니다.
프로필 행 반응형 레이아웃 `src/app/(service)/(my)/my-page/page.tsx`	프로필 행을 모바일 flex-col에서 sm 이상에서 flex-row로 전환하고, 닉네임 입력 영역에 flex-wrap을 추가합니다.
푸터 반응형 정보 구조 `src/components/common/layout/footer.tsx`	푸터 레이아웃을 반응형으로 재구성하고, 대표이사/상호명/사업자 정보를 flex flex-wrap 그룹으로 나누어 줄바꿈을 지원합니다.

상호작용 상태 시각화 개선

Layer / File(s)	요약
버튼 및 항목 상호작용 상태 `src/app/(landing)/class/[slug]/(learning)/_components/qna-tab.tsx`, `src/app/(landing)/class/[slug]/(learning)/qa/[id]/page.tsx`	Q&A 탭 버튼과 항목에 active 배경 스타일을 추가하고, 질문/답변 반응 버튼에 whitespace-nowrap을 적용하여 줄바꿈을 고정합니다.
탭 네비게이션 가로 스크롤 및 오버레이 `src/components/pages/class/class-detail-tab-nav.tsx`	탭 네비게이션에 가로 스크롤을 추가하고 스크롤바를 숨기며, 우측 끝에 배경 그라데이션 오버레이를 추가하여 스크롤 가능 영역을 시각적으로 표시합니다.
모달 폭 반응형 조정 `src/app/(landing)/class/[slug]/(learning)/feed/[id]/page.tsx`	신고 및 삭제 확인 모달을 w-full max-w-5000으로 변경하여 모바일에서 전체 화면 폭을 활용합니다.

동적 자산 경로 및 iOS 안전 영역

Layer / File(s)	요약
Roadmap 자산 경로 동적화 `src/components/pages/class/roadmap-tab.tsx`	ASSET_SLUG_OVERRIDE 매핑을 추가하여 슬러그 기반 자산 경로를 동적으로 결정합니다.
Roadmap 진행률 표시 및 오버레이 구조 `src/components/pages/class/roadmap-tab.tsx`	진도 표시 영역의 이미지 src를 동적으로 변경하고, 로드 실패 시 가시성을 숨기며, 진행 문구 오버레이를 이미지 컨테이너 내부로 재배치합니다.
Roadmap 여정 맵 및 이미지 경로 `src/components/pages/class/roadmap-tab.tsx`	여정 맵을 md 이상에서만 표시하고, 여정 이미지 src를 동적으로 변경합니다.
Roadmap 더보기 버튼 상호작용 `src/components/pages/class/roadmap-tab.tsx`	챕터 및 레슨 더보기 버튼에 호버/액티브 배경 스타일을 추가합니다.
Roadmap 레슨 카드 레이아웃 및 텍스트 처리 `src/components/pages/class/roadmap-tab.tsx`	레슨 카드 호버 동작을 추가하고, 타이틀 텍스트 말줄임을 강화하며, 소요시간을 반응형으로 제한하고 상태 스타일을 보강합니다.
Roadmap 고정 결제 CTA 및 iOS 안전 영역 `src/components/pages/class/roadmap-tab.tsx`	고정 CTA의 하단 패딩에 safe-area-inset-bottom을 반영하는 인라인 스타일을 추가합니다.
Roadmap 커리큘럼 미리보기 및 레이아웃 `src/components/pages/class/class-detail-roadmap-section.tsx`	커리큘럼 미리보기 높이를 토큰화하고, 이전/다음 버튼을 키우며, 타겟 오디언스 카드와 결과 쇼케이스 이미지 높이를 조정합니다.

랜딩 페이지 레이아웃 및 CTA 개선

Layer / File(s)	요약
랜딩 페이지 섹션 제목 정렬 `src/components/pages/landing/landing-content.tsx`	CheckSection과 ResultsSection의 제목 영역을 수직 정렬하고 중앙 정렬 및 간격을 추가합니다.
랜딩 페이지 전체 하단 여백 및 고정 CTA `src/components/pages/landing/landing-content.tsx`	전체 랜딩 페이지 하단 여백을 조정하고, 고정 CTA의 위치 및 안전 영역 패딩을 개선합니다.

기타 UI 세부 조정

Layer / File(s)	요약
고정 버튼 위치 조정 `src/components/common/ui/floating-class-action-buttons.tsx`	부동 액션 버튼의 화면 하단 우측 위치를 조정합니다.
모바일 네비게이션 스크롤바 숨김 `src/components/common/layout/sidebar/my-page-mobile-nav.tsx`	모바일 네비게이션의 가로 스크롤바를 숨기는 스타일을 추가합니다.

🎯 2 (단순) | ⏱️ ~15분

🔗 관련 PR

code-zero-to-one/study-platform-client#675: BannerSlideContent 제목과 TabNavigation 탭 링크 레이아웃 클래스 변경이 해당 PR에서 도입된 탭 기반 배너 UI와 직접 연관됩니다.
code-zero-to-one/study-platform-client#438: LandingContent 모듈의 FadeIn 섹션 레이아웃과 FloatingCTABar 패딩 스타일 변경이 해당 PR의 랜딩 섹션 재구성과 겹칩니다.
code-zero-to-one/study-platform-client#706: LessonPage 반응형 레이아웃, 탭 컨트롤 영역 재구성, global.css spacing 토큰 rem 전환이 해당 PR의 변경사항과 직접 맞물려 있습니다.

📌 추천 라벨

release:patch

🐰 축하 시

레이아웃은 유연하고, 간격은 조화롭고,
모바일도, 데스크톱도, 모두 완벽하네요! 🎨
rem 토큰으로 스케일링하며 안전 영역 챙기고,
버튼의 손가락 감촉도 더 매끄러워졌습니다. ✨

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 13.64% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	PR 제목은 클래스 페이지 모바일 반응형 버그 수정이라는 변경사항의 핵심을 명확하게 반영하고 있습니다.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

Create stacked PR
Commit on current branch

🧪 Generate unit tests (beta)

Create PR with unit tests
Commit unit tests in branch cherry/fix-bug-to-main

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

HA-SEUNG-JEONG and others added 3 commits May 27, 2026 09:57

[fix-bug-to-main] cherry : [bug] fix : style(tokens): 16 나눠떨어지는 spaci…

d0e61dd

…ng 토큰 rem 통일 및 --spacing-1875 추가 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

vercel Bot deployed to Preview May 27, 2026 01:07 View deployment

HA-SEUNG-JEONG closed this May 27, 2026

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[cherry-pick] 클래스 페이지 모바일 반응형 버그 수정#708

[cherry-pick] 클래스 페이지 모바일 반응형 버그 수정#708
HA-SEUNG-JEONG wants to merge 3 commits into
mainfrom
cherry/fix-bug-to-main

HA-SEUNG-JEONG commented May 27, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

vercel Bot commented May 27, 2026 •

edited

Loading

Uh oh!

coderabbitai Bot commented May 27, 2026 •

edited

Loading

Review failed

🎯 워크스루

📋 변경 사항

🎯 2 (단순) | ⏱️ ~15분

🔗 관련 PR

📌 추천 라벨

🐰 축하 시

❌ Failed checks (1 warning)

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Conversation

HA-SEUNG-JEONG commented May 27, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

개요

원본 PR

Cherry-pick 대상 커밋

변경 파일

혼입 검증 결과

Test plan

Summary by CodeRabbit

릴리스 노트

Uh oh!

vercel Bot commented May 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

coderabbitai Bot commented May 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Review failed

🎯 워크스루

📋 변경 사항

🎯 2 (단순) | ⏱️ ~15분

🔗 관련 PR

📌 추천 라벨

🐰 축하 시

❌ Failed checks (1 warning)

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

HA-SEUNG-JEONG commented May 27, 2026 •

edited by coderabbitai Bot

Loading

vercel Bot commented May 27, 2026 •

edited

Loading

coderabbitai Bot commented May 27, 2026 •

edited

Loading