fix: FM_SLD 레이아웃 깨짐 수정 (#87) by gyogyo05 · Pull Request #89 · TTORANG/Web

gyogyo05 · 2026-01-30T16:16:50Z

📌 관련 이슈

close fix: FM_SLD_01 레이아웃 오류 수정 #87

✨ 변경 내용

피드백자 슬라이드 모바일뷰 레이아웃 깨짐 개선

💡 참고 사항

gemini-code-assist · 2026-01-30T16:17:19Z

Summary of Changes

Hello @gyogyo05, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

이 PR은 피드백 슬라이드 페이지의 모바일 뷰에서 발생하는 레이아웃 깨짐 현상을 수정하는 데 중점을 둡니다. 반응 버튼의 간격과 스타일을 조정하고, 탭 콘텐츠 및 댓글 영역의 스크롤 동작과 레이아웃을 개선하여 모바일 환경에서 사용자 경험을 향상시키는 것이 주된 목적입니다.

Highlights

반응 버튼 레이아웃 개선: 모바일 뷰에서 반응 버튼의 간격(gap)을 줄이고, 패딩(px)을 조정하여 더 조밀하게 배치했습니다. 또한, 버튼 스타일을 baseBtn과 widthClass 변수로 분리하여 유지보수성을 높였습니다. 반응 개수 텍스트의 스타일도 tabular-nums와 min-w-0 클래스를 사용하여 개선했습니다.
모바일 피드백 슬라이드 페이지 레이아웃 수정: 모바일 뷰의 상단 섹션에서 불필요한 가로 패딩을 제거했습니다. 반응 버튼 그룹에 flex-wrap을 적용하고 개별 버튼의 최소 너비를 min-w-[3.5rem]으로 설정하여 모바일 환경에서 버튼들이 적절히 줄 바꿈 되도록 했습니다. 활성 탭의 하단 테두리 두께를 border-b-2로 늘려 시각적 강조를 강화했습니다.
모바일 탭 콘텐츠 및 댓글 영역 스크롤 개선: 모바일 탭 콘텐츠 컨테이너에 flex flex-col을 추가하고, 스크립트 패널에 overflow-y-auto를 적용하여 내용이 길어질 경우 스크롤이 가능하도록 했습니다. 댓글 목록 영역도 min-h-0 h-full 및 overflow-y-auto를 통해 스크롤 동작을 개선했으며, 댓글 입력 영역은 sticky bottom-0에서 shrink-0으로 변경하여 레이아웃 안정성을 확보했습니다.
탭 레이블 텍스트 변경: 모바일 뷰의 탭 레이블 중 '스크립트'를 '대본'으로 변경했습니다.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	`/gemini review`	Performs a code review for the current pull request in its current state.
Pull Request Summary	`/gemini summary`	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	`/gemini help`	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

gemini-code-assist

Code Review

이 PR은 피드백 슬라이드의 모바일 뷰에서 발생하는 레이아웃 깨짐 현상을 수정하는 것을 목표로 하고 있습니다. 전반적으로 ReactionButtons 컴포넌트의 스타일링을 개선하고 FeedbackSlidePage의 모바일 레이아웃 관련 CSS 클래스를 수정하여 문제를 해결한 것으로 보입니다. 코드 가독성을 높이기 위한 리팩토링도 일부 포함되어 있습니다. 몇 가지 코드 중복 및 오타로 보이는 부분을 발견하여 수정을 제안합니다. 또한, 탭 UI의 클래스네임 생성 로직을 함수로 추출하여 중복을 제거하고 유지보수성을 높이는 방안을 제안합니다.

I am having trouble creating individual review comments. Click here to see my feedback.

src/components/feedback/ReactionButtons.tsx (55-61)

baseBtn 변수에 이미 포함된 클래스들이 className 문자열에 중복으로 사용되고 있습니다. 코드 가독성과 유지보수성을 위해 중복된 클래스들을 제거하는 것이 좋습니다.

            className={`${baseBtn} ${widthClass} ${buttonClassName ?? ''} ${
              isLastOdd ? 'col-span-2 justify-self-start' : ''
            } ${
              reaction.active
                ? 'bg-gray-900 border-main-variant1 text-main-variant2 text-body-m-bold'
                : 'bg-gray-200 border-gray-400 text-black hover:border-gray-600'
            }`}

src/components/feedback/ReactionButtons.tsx (69)

font-body-m 클래스명은 typography.css에 정의되어 있지 않아 오타로 보입니다. 의도하신 것이 text-body-m (일반 굵기) 이라면 수정이 필요합니다. 버튼이 활성화 상태일 때 부모 요소에 text-body-m-bold가 적용되는데, 카운트 숫자는 일반 굵기를 유지하려는 의도였다면 text-body-m으로 수정하는 것이 맞을 것 같습니다.

              className={`tabular-nums text-right min-w-0 ${reaction.active ? 'text-body-m' : ''}`}

src/pages/FeedbackSlidePage.tsx (210-212)

이 버튼의 className을 결정하는 로직이 '댓글' 탭 버튼(222-226행)에서도 거의 동일하게 반복되고 있습니다. 코드 중복을 줄이고 유지보수성을 높이기 위해 이 로직을 헬퍼 함수로 추출하는 것을 고려해 보세요. 예를 들어, 다음과 같은 함수를 사용할 수 있습니다.

const getTabClassName = (isActive: boolean) => 
  `flex-1 py-3 text-body-m-bold transition-colors ${
    isActive ? 'text-main border-b-2 border-main-variant1' : 'text-gray-600'
  }`;

그리고 각 버튼에서 className={getTabClassName(mobileTab === 'script')} 와 같이 사용할 수 있습니다.

References

Extract complex or repetitive conditional className logic into a helper function, using utilities like clsx to improve readability and maintainability.

gyogyo05 · 2026-01-30T16:47:43Z

@claude 코드 리뷰해줘

claude · 2026-01-30T16:47:57Z

Claude finished @gyogyo05's task in 1m 44s —— View job

코드 리뷰 완료 ✅

모바일 레이아웃 개선 작업 잘 진행하셨습니다! 전반적으로 깔끔한 수정이지만, 몇 가지 개선할 수 있는 부분을 발견했습니다.

주요 개선 사항

✅ 잘된 점

리팩토링 품질
- getTabClassName 헬퍼 함수로 중복 제거 (FeedbackSlidePage.tsx:109-112)
- baseBtn과 widthClass 변수 분리로 가독성 향상 (ReactionButtons.tsx:46-49)
- 스크롤 레이아웃 개선으로 모바일 UX 향상
접근성
- border-b-2로 활성 탭 강조 개선
- tabular-nums로 숫자 정렬 개선
컴포넌트 재사용성
- FeedbackHeaderLeft 컴포넌트로 헤더 추출 (Router.tsx:55)

🔍 발견된 이슈

1. 🐛 존재하지 않는 CSS 클래스 사용 (높은 우선순위)

위치: ReactionButtons.tsx:69

className={`tabular-nums text-right min-w-0 ${reaction.active ? 'font-semibold' : ''}`}

문제:

font-semibold는 Tailwind의 유틸리티 클래스이지만, CLAUDE.md에 따르면 이 프로젝트는 디자인 시스템의 타이포그래피 클래스를 우선 사용해야 합니다
typography.css에 정의된 클래스: .text-body-m, .text-body-m-bold 등
현재 부모 요소에 text-body-m이 있고, 활성화 시 text-body-m-bold가 적용되므로, 자식 요소에서 font-semibold를 사용하면 디자인 시스템과 충돌할 수 있습니다

권장 수정:

className={`tabular-nums text-right min-w-0`}

부모에서 이미 bold 처리되므로 자식에서 별도 font-weight 지정 불필요

Fix this →

2. ⚠️ Flexbox 레이아웃 논리 불일치 (중간 우선순위)

위치: FeedbackSlidePage.tsx:199-200

className="w-full flex-wrap justify-between"
buttonClassName="min-w-[3.5rem]"

문제:

justify-between은 아이템들을 양 끝에 배치하는데, flex-wrap과 함께 사용하면 마지막 줄에서 의도하지 않은 간격이 생길 수 있습니다
리액션 버튼이 5개일 경우, 마지막 버튼이 오른쪽 끝에 붙어서 불균형해 보일 수 있습니다

참고: 데스크톱 뷰에서는 layout="grid-2" (grid 레이아웃)를 사용해서 이 문제가 없습니다 (158행)

권장 수정 (옵션 중 선택):

// Option 1: gap으로 일정한 간격 유지
className="w-full flex-wrap gap-2"

// Option 2: grid 레이아웃 사용 (데스크톱과 일관성)
className="w-full grid grid-cols-5 gap-2"

Fix this →

3. 📝 일관성 개선 가능 (낮은 우선순위)

위치: ReactionButtons.tsx:38-39

const containerClass = isGrid
  ? `grid grid-cols-2 gap-2 justify-items-center ${className ?? ''}`
  : `flex gap-1 ${showLabel ? 'flex-wrap' : 'flex-nowrap'} ${className ?? ''}`;

관찰:

Grid 레이아웃: gap-2 (0.5rem)
Flex 레이아웃: gap-1 (0.25rem)
px 값: px-3 → px-2로 변경됨

변경 의도가 명확하지만, gap-2를 gap-1로 줄인 이유가 궁금합니다. 모바일에서 터치 타겟 최소 크기(44x44px)를 고려하면 gap-2가 더 안전할 수 있습니다.

💡 추가 제안사항

1. 매직 넘버 상수화

// ReactionButtons.tsx:200
buttonClassName="min-w-[3.5rem]"

→ 반복 사용될 경우 상수로 관리 고려:

const MOBILE_BUTTON_MIN_WIDTH = 'min-w-[3.5rem]';

2. 접근성 개선

모바일 반응 버튼에 aria-label 추가 고려 (라벨 없이 이모지만 표시되므로)
예: aria-label={config.label}

📊 변경 요약

파일	주요 변경	영향도
ReactionButtons.tsx	gap, padding 축소 / 변수 추출	중간
FeedbackSlidePage.tsx	모바일 스크롤 개선 / 탭 리팩토링	높음
Router.tsx	헤더 컴포넌트화	낮음

✅ 최종 의견

모바일 레이아웃 개선 목표는 잘 달성하셨습니다! 위의 이슈 중:

**이슈 chore: 프로젝트 세팅 #1 (font-semibold)**은 수정 권장
**이슈 chore/프로젝트 세팅 #2 (justify-between)**는 실제 디자인 의도에 따라 선택
나머지는 참고사항

특히 스크롤 레이아웃(overflow-y-auto, min-h-0) 개선은 모바일 UX에 큰 도움이 될 것 같습니다. 고생하셨습니다! 👍

AndyH0ng · 2026-01-30T19:25:14Z

feedback/*에서

공통으로 쓰이는 레이아웃 분리해서 사용하게 하고,
프로젝트 제목 컴포넌트 수정,
대본/댓글 헤더 요소 선택 시 layout shift 문제 해결하고,
헤더 바로 아래에 슬라이드/비디오 띄워지게 해놨습니다.

2026-01-31.4.27.07.mov

feedback/video 모바일에서 대본 섹션만 스크롤되지 않고 화면 전체가 내려가는 문제가 있네요
수정부탁드립니다.

AndyH0ng · 2026-01-30T23:52:00Z

@claude 코드 리뷰해줘

claude · 2026-01-30T23:52:21Z

Claude finished @AndyH0ng's task in 1m 57s —— View job

코드 리뷰 완료 ✅

모바일 레이아웃 개선 작업 수고하셨습니다! 공통 레이아웃 컴포넌트 추출과 스크롤 구조 개선이 잘 이루어졌습니다. 다만 중요한 버그 1개와 개선 사항들을 발견했습니다.

🚨 Critical Issue - 스크롤 버그 발견

1. feedback/video 모바일에서 대본 섹션 스크롤 버그 (높은 우선순위)

위치: FeedbackVideoPage.tsx:106-114

문제:
AndyH0ng님이 언급하신 이슈를 확인했습니다. ScriptSection 컴포넌트가 이미 overflow-y-auto를 내부에 가지고 있는데, 추가로 px-4 py-4 패딩을 가진 div로 감싸져 있어서 스크롤이 제대로 작동하지 않습니다.

현재 구조:

scriptTabContent={
  <div className="px-4 py-4">  {/* ❌ 이 wrapper가 문제! */}
    <ScriptSection
      slides={projectSlides}
      slideChangeTimes={slideChangeTimes}
      currentTime={currentTime}
      onSeek={requestSeek}
    />
  </div>
}

ScriptSection.tsx:128을 보면 이미 overflow-y-auto와 p-4 패딩이 있습니다:

className="flex-1 min-w-0 rounded-lg p-4 overflow-y-auto flex flex-col gap-2 bg-gray-100 focus:outline-none"

이중 래퍼 구조 때문에:

FeedbackMobileLayout.tsx:102의 h-full overflow-y-auto가 외부 div에 적용
내부 ScriptSection의 flex-1 overflow-y-auto가 제대로 작동하지 않음
결과적으로 화면 전체가 스크롤됨

해결 방법:
FeedbackSlidePage.tsx:173-184의 패턴을 따라 패딩을 ScriptSection 내부에서 처리하도록 수정해야 합니다.

FeedbackSlidePage.tsx (올바른 패턴):

scriptTabContent={
  <div className="px-4 py-4">
    <SlideTitle fallbackTitle={`슬라이드 ${slideIndex + 1}`} readOnly />
    <div className="mt-3 bg-gray-200 rounded-lg px-4 py-3 h-48 overflow-y-auto">
      {/* 스크립트 콘텐츠 */}
    </div>
  </div>
}

여기서는 overflow-y-auto가 고정 높이(h-48)와 함께 사용되어 올바르게 작동합니다.

권장 수정:

옵션 1 - ScriptSection을 wrapper 없이 직접 사용 (추천)

scriptTabContent={
  <ScriptSection
    slides={projectSlides}
    slideChangeTimes={slideChangeTimes}
    currentTime={currentTime}
    onSeek={requestSeek}
  />
}

ScriptSection에 이미 필요한 패딩(p-4)이 있으므로 추가 wrapper 불필요

옵션 2 - ScriptSection의 패딩 제거 후 wrapper에서 처리
ScriptSection.tsx:128의 p-4를 제거하고 wrapper에서 패딩 관리

Fix this →

⚠️ 기타 개선 사항

2. 중복된 className 적용 (중간 우선순위)

위치: ReactionButtons.tsx:77-79

className={`tabular-nums text-right min-w-0 ${
  reaction.active ? 'text-main-variant2 text-body-m-bold' : ''
}`}

문제:

부모 버튼(55-61행)에서 이미 text-body-m이 적용됨
reaction.active일 때 부모에서 text-main-variant2 text-body-m-bold 적용
자식 span에서 또다시 text-main-variant2 text-body-m-bold 적용 → 중복

권장 수정:

className="tabular-nums text-right min-w-0"

부모에서 이미 처리되므로 자식에서 조건부 클래스 불필요

Fix this →

3. 반응 버튼 활성화 색상 불일치 (낮은 우선순위)

위치: ReactionButtons.tsx:58-60

reaction.active
  ? 'bg-gray-900 border-main-variant1 text-black'
  : 'bg-gray-200 border-gray-400 text-black hover:border-gray-600'

관찰:

활성화: bg-gray-900 (어두운 배경) + text-black (검은 텍스트)
비활성화: bg-gray-200 (밝은 배경) + text-black (검은 텍스트)

활성화 상태에서 bg-gray-900과 text-black의 대비가 낮아 가독성이 떨어질 수 있습니다. 디자인 의도가 맞는지 확인이 필요합니다.

참고: 스크린샷을 보니 활성화된 👍 버튼(99)이 흰 배경으로 보이는데, 코드는 bg-gray-900으로 되어 있어 불일치가 있습니다.

✅ 잘된 점

공통 레이아웃 추출
- FeedbackMobileLayout.tsx 컴포넌트로 슬라이드/비디오 페이지 간 중복 제거
- 슬롯 기반 설계로 확장성 확보
- 접근성 고려 (ARIA 속성, 키보드 네비게이션)
레이아웃 안정성 개선
- border-b-2 고정으로 탭 전환 시 layout shift 해결 (FeedbackMobileLayout.tsx:55)
- shrink-0 사용으로 고정 영역 보호
스크롤 구조 개선
- min-h-0 + overflow-hidden 조합으로 flex container 스크롤 제어
- Slide 페이지는 올바르게 작동 (FeedbackSlidePage.tsx:173-184)
코드 품질
- getTabClassName 헬퍼 함수로 중복 제거
- 상수 분리 (TAB_IDS, PANEL_IDS)

📋 요약

이슈	우선순위	위치	상태
Video 대본 스크롤 버그	🚨 높음	FeedbackVideoPage.tsx:106-114	수정 필요
중복 className	⚠️ 중간	ReactionButtons.tsx:77-79	수정 권장
활성화 색상 불일치	📝 낮음	ReactionButtons.tsx:58-60	확인 필요

다음 단계:

가장 먼저 이슈 chore: 프로젝트 세팅 #1 (스크롤 버그) 수정 - 사용자 경험에 직접적 영향
이슈 #2는 코드 품질 개선 차원에서 수정 권장
이슈 #3은 디자인 의도 확인 후 결정

전반적으로 좋은 리팩토링이었습니다! 스크롤 버그만 수정하면 완벽할 것 같습니다. 👍

AndyH0ng · 2026-01-31T16:31:33Z

해당 문제 수정하고 머지합니다.

fix: FM_SLD 레이아웃 깨짐 수정 (#87)

898baf7

github-actions bot added component 컴포넌트 관련 변경 page 페이지 관련 변경 labels Jan 30, 2026

Merge branch 'develop' into fix/fm-sld-87

d7a251b

gemini-code-assist bot reviewed Jan 30, 2026

View reviewed changes

gyogyo05 added 3 commits January 31, 2026 01:30

refactor: 코드 중복 제거 및 유지보수성 향상 (#87)

0326bd8

refactor: 코드 중복 제거 및 유지보수성 향상 (#87)

e819e81

fix: FdSlidePage에 FeedbackHeaderLeft 복구 (#87)

4a80d96

gyogyo05 and others added 6 commits January 31, 2026 02:02

style: 모바일 버튼 간격 조정 (#87)

bc90263

feat: readonly prop 추가 (#87)

a995434

design: 데스크톱 모바일 뷰 분기 (#87)

fea9e43

fix: 헤더 layout shift 해결 (#87)

472d1d6

refactor: 모바일 피드백 레이아웃 컴포넌트 생성 (#87)

38350a6

refactor: 데스크톱 모바일 컴포넌트 병합 (#87)

4b86801

github-actions bot added the store 상태 관리 변경 label Jan 30, 2026

design: 모바일 트리거 범위 확대 (#87)

9a77911

github-actions bot added the style 스타일링 관련 변경 label Jan 30, 2026

AndyH0ng added 3 commits February 1, 2026 00:45

docs: CLAUDE.md 업데이트 (#87)

8f32c9d

feat: Claude 코드리뷰 반영 (#87)

c3de84e

refactor: css로 단일 SlideWebcamStage 위치 조정 (#87)

566ff46

github-actions bot added the documentation label Jan 31, 2026

AndyH0ng added 3 commits February 1, 2026 01:23

fix: 스크롤 해제 플래그 역치 증가 (#87)

9bb8384

design: error 엑센트 모달 디자인 통일 (#87)

98f1830

Merge branch 'develop' into fix/fm-sld-87

e6015b2

AndyH0ng assigned AndyH0ng and gyogyo05 Jan 31, 2026

AndyH0ng self-requested a review January 31, 2026 16:31

AndyH0ng approved these changes Jan 31, 2026

View reviewed changes

AndyH0ng merged commit 9cd887a into develop Jan 31, 2026
9 checks passed

AndyH0ng deleted the fix/fm-sld-87 branch January 31, 2026 16:32

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix: FM_SLD 레이아웃 깨짐 수정 (#87)#89

fix: FM_SLD 레이아웃 깨짐 수정 (#87)#89
AndyH0ng merged 18 commits intodevelopfrom
fix/fm-sld-87

gyogyo05 commented Jan 30, 2026

Uh oh!

gemini-code-assist bot commented Jan 30, 2026

Uh oh!

gemini-code-assist bot left a comment

Uh oh!

gyogyo05 commented Jan 30, 2026

Uh oh!

claude bot commented Jan 30, 2026 •

edited

Loading

Uh oh!

AndyH0ng commented Jan 30, 2026 •

edited

Loading

Uh oh!

AndyH0ng commented Jan 30, 2026

Uh oh!

claude bot commented Jan 30, 2026 •

edited

Loading

Uh oh!

AndyH0ng commented Jan 31, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

gyogyo05 commented Jan 30, 2026

📌 관련 이슈

✨ 변경 내용

💡 참고 사항

Uh oh!

gemini-code-assist bot commented Jan 30, 2026

Summary of Changes

Highlights

Footnotes

Uh oh!

gemini-code-assist bot left a comment

Choose a reason for hiding this comment

Code Review

src/components/feedback/ReactionButtons.tsx (55-61)

src/components/feedback/ReactionButtons.tsx (69)

src/pages/FeedbackSlidePage.tsx (210-212)

Uh oh!

gyogyo05 commented Jan 30, 2026

Uh oh!

claude bot commented Jan 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

코드 리뷰 완료 ✅

주요 개선 사항

✅ 잘된 점

🔍 발견된 이슈

1. 🐛 존재하지 않는 CSS 클래스 사용 (높은 우선순위)

2. ⚠️ Flexbox 레이아웃 논리 불일치 (중간 우선순위)

3. 📝 일관성 개선 가능 (낮은 우선순위)

💡 추가 제안사항

1. 매직 넘버 상수화

2. 접근성 개선

📊 변경 요약

✅ 최종 의견

Uh oh!

AndyH0ng commented Jan 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

AndyH0ng commented Jan 30, 2026

Uh oh!

claude bot commented Jan 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

코드 리뷰 완료 ✅

🚨 Critical Issue - 스크롤 버그 발견

1. feedback/video 모바일에서 대본 섹션 스크롤 버그 (높은 우선순위)

⚠️ 기타 개선 사항

2. 중복된 className 적용 (중간 우선순위)

3. 반응 버튼 활성화 색상 불일치 (낮은 우선순위)

✅ 잘된 점

📋 요약

Uh oh!

AndyH0ng commented Jan 31, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

claude bot commented Jan 30, 2026 •

edited

Loading

AndyH0ng commented Jan 30, 2026 •

edited

Loading

claude bot commented Jan 30, 2026 •

edited

Loading