[coli-geonwoo]

🚩 연관 이슈

closed #489

📝 작업 내용

청중 공유 화면(/live/:id)이 모바일에서 깨지던 문제를 반응형으로 수정했습니다.

레이아웃 / 헤더

• 모바일(768px 미만)에서 헤더 높이 80px → 56px, 테이블 이름·주제 글자 크기 축소, 긴 테이블 이름 말줄임
• 세로 모드 모바일에서는 주제를 헤더 가운데 대신 본문 상단에 표시
• DefaultLayout 높이를 h-dvh로 바꿔 모바일 브라우저 주소창에 가려지지 않도록 수정
• ContentContainer 좌우 여백을 모바일에서 32px → 16px로 축소
• 높이 500px 이하 화면(가로 모드 휴대폰)용 short 브레이크포인트 추가 (tailwind.config.js)

타이머

• 일반/자유토론 타이머의 글자 크기·간격을 화면 크기에 맞게 조정 (모바일은 화면 폭 기준 크기)
• 자유토론은 모바일에서도 찬성/반대를 좌우로 나란히 표시
• 자유토론 전체 시간을 현재 시간보다 작게 표시 (사회자 타이머와 같은 약 0.7 비율, 데스크톱 포함)
• 모바일에서는 전체/현재 시간 배지를 화면에서 숨기고 스크린 리더용 텍스트로만 유지
• 진행바가 좁은 화면에서 0px로 눌리던 문제 수정 (flex-shrink-0), 가로 모드에서는 두께·폭 축소
• 내용이 화면보다 길 때 위쪽이 잘리지 않도록 safe center 정렬 적용

기타

• 시뮬레이터 스토리에서 모바일일 때 청중 화면을 실제 크기로 표시
• 변경된 클래스에 맞춰 테스트 수정, 모바일 주제 표시·배지 숨김 테스트 추가

다른 페이지 영향
헤더·레이아웃·본문 여백 컴포넌트는 여러 페이지가 함께 사용합니다. 768px 이상에서는 긴 테이블 이름 말줄임 외에 변화가 없고, 모바일과 가로 모드에서만 헤더 높이·여백·글자 크기가 작아집니다.

확인한 화면 크기 (Storybook 시뮬레이터, 헤드리스 Chrome)
375×548, 360×640, 390×664, 가로 667×300, 844×340, 932×380, 768×1024, 1440×900

🏞️ 스크린샷 (선택)

🗣️ 리뷰 요구사항 (선택)

🤖 Generated with Claude Code

[coderabbitai]

Warning

Review limit reached

Next included review available in 7 minutes.

Check out review usage here.

View limit details

Limit details: You’ve used the included review currently available.

You've used all free OSS reviews for now. Wait for the free limit to reset to keep reviewing this public repository.

Learn how review limits work.

Review configuration:

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Advanced

Run ID: e19d7677-b526-4147-adb0-149af5301744

📥 Commits

Reviewing files that changed from the base of the PR and between 43aae19 and 0154718.

📒 Files selected for processing (15)

• src/components/HeaderTableInfo/HeaderTableInfo.tsx
• src/components/HeaderTitle/HeaderTitle.tsx
• src/components/TimerProgressBar/TimerProgressBar.tsx
• src/layout/components/header/StickyTriSectionHeader.tsx
• src/layout/components/main/ContentContainer.tsx
• src/layout/defaultLayout/DefaultLayout.tsx
• src/page/AudienceSharePage/AudienceSharePage.test.tsx
• src/page/AudienceSharePage/AudienceSharePage.tsx
• src/page/AudienceSharePage/components/AudienceNormalTimer.test.tsx
• src/page/AudienceSharePage/components/AudienceNormalTimer.tsx
• src/page/AudienceSharePage/components/AudienceTimeBasedTimer.tsx
• src/page/AudienceSharePage/components/AudienceTimeBasedTimerDisplay.test.tsx
• src/page/AudienceSharePage/components/AudienceTimeBasedTimerDisplay.tsx
• src/page/AudienceSharePage/stories/AudienceShareSimulator.stories.tsx
• tailwind.config.js

---

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

• X
• Mastodon
• Reddit
• LinkedIn

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

[github-actions]

🚀 Preview 배포 완료!

환경	URL
Preview	열기
API	Dev 환경

PR이 닫히면 자동으로 정리됩니다.

[github-actions]

🧹 Preview 배포가 정리되었습니다.