[DESIGN] 사소한 디자인 개선 사항 적용 #351
Conversation
Walkthrough여러 UI 컴포넌트의 여백·폰트 크기·아이콘 벡터가 조정되고, 타이머 페이지에서 조작 버튼을 하단 고정 배치하도록 레이아웃이 변경되었으며, TIME_BASED 타이머에서 발언 시간이 0일 때 전용 미리보기 이미지를 선택하도록 분기 로직이 추가되었습니다. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
participant U as 사용자
participant TCC as TimerCreationContent
participant V as View
U->>TCC: 타이머 타입/설정 전달
TCC->>TCC: if type == TIME_BASED
alt speakerMinutes===0 && speakerSeconds===0
TCC->>V: render time_based_timer_only_total.jpg (alt: time-based-timer-only-total-timer)
else
TCC->>V: render time_based_timer.jpg (alt: time-based-timer)
end
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Assessment against linked issues
Assessment against linked issues: Out-of-scope changes
Possibly related PRs
Suggested reviewers
Poem
Tip 🔌 Remote MCP (Model Context Protocol) integration is now available!Pro plan users can now connect to remote MCP servers from the Integrations page. Connect with popular remote MCPs such as Notion and Linear to add more context to your reviews and chats. 📜 Recent review detailsConfiguration used: CodeRabbit UI Review profile: CHILL Plan: Pro 💡 Knowledge Base configuration:
You can enable these sources in your CodeRabbit configuration. 📒 Files selected for processing (1)
✅ Files skipped from review due to trivial changes (1)
✨ Finishing Touches
🧪 Generate unit tests
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. CodeRabbit Commands (Invoked using PR/Issue comments)Type Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (8)
src/components/ProsAndConsTitle/PropsAndConsTitle.tsx (1)
13-21: 팀명은 시맨틱 heading 사용 권장(접근성)
시각적 제목 역할을 하는 텍스트가<span>입니다. 스크린 리더 탐색성과 문서 구조를 위해 h2/h3 등으로의 전환을 고려해 주세요.아래와 같이 변경을 제안합니다(스타일 영향 최소화):
- <span className="text-2xl font-bold text-camp-blue"> + <h2 className="text-2xl font-bold text-camp-blue"> {prosTeamName} - </span> + </h2> ... - <span className="text-2xl font-bold text-camp-red">{consTeamName}</span> + <h2 className="text-2xl font-bold text-camp-red">{consTeamName}</h2>src/components/icons/LeftArrow.tsx (1)
24-25: LeftArrow 아이콘의 viewBox 및 종횡비를 RightArrow와 동일하게 조정 필요현재 RightArrow는
viewBox="0 0 33 30"·aspect-[33/30]를 사용하지만, LeftArrow는viewBox="0 0 34 30"·aspect-[34/30]로 설정되어 있어 버튼 쌍의 크기·정렬이 어긋날 수 있습니다. 같은 캔버스 기준을 쓰도록 아래와 같이 수정을 권장합니다.– 파일:
src/components/icons/LeftArrow.tsx
– 수정 내용:- viewBox="0 0 34 30" + viewBox="0 0 33 30" ... - aspect-[34/30] + aspect-[33/30]src/page/TimerPage/TimerPage.tsx (2)
89-91: 컨테이너 relative 지정은 적절합니다. 콘텐츠 가림 방지용 패딩 추가 제안
하단 고정되는 조작부가 절대 위치로 겹치므로, 컨테이너에 하단 패딩을 줘서 본문이 가려지지 않도록 하는 것이 안전합니다.아래처럼
pb-[66px]을 추가하면 기본 여유 공간이 생깁니다(필요시 더 큰 브레이크포인트에서 보정 가능).- 'relative flex h-full w-full flex-col items-center justify-center space-y-[32px] xl:space-y-[60px]', + 'relative flex h-full w-full flex-col items-center justify-center space-y-[32px] xl:space-y-[60px] pb-[66px]',
97-103: 하단 고정 조작부의 가로 정렬 및 안전영역 보완
absolute bottom-[66px]만으로는 브라우저/레이아웃에 따라 가로 중앙 정렬이 보장되지 않을 수 있습니다. 또한 iOS 등의 안전영역을 고려하면safe-area-inset-bottom을 포함한 보정이 있으면 좋습니다.다음과 같이 중앙 정렬과 안전영역 보정을 권장합니다(프로젝트 Tailwind 버전에 따라
calc(env(...)+...)지원 여부 확인 필요).- className="absolute bottom-[66px]" + className="absolute left-1/2 -translate-x-1/2 bottom-[66px]"가능하다면 대안으로 다음도 고려해 주세요(둘 중 택1):
- 안전영역 포함:
bottom-[calc(66px+env(safe-area-inset-bottom))]- 혹은 상위 컨테이너에
pb-[calc(66px+env(safe-area-inset-bottom))]추가모바일(iOS Safari/Android Chrome)에서 아래를 중점 확인해 주세요:
- 세로/가로 회전 시 조작부가 항상 화면 내에 완전히 보이는지
- 탭 포커스 이동 시 가려지는 요소가 없는지
src/page/TableComposition/components/TimeBox/TimeBox.tsx (2)
123-134: span 내부에 p 중첩은 콘텐츠 모델 상 비권장 — div로 교체 권고현재 블록 요소(p)가 인라인 요소(span) 내부에 들어가 있습니다. 일부 브라우저/툴링에서 레이아웃·접근성 이슈가 생길 수 있으니 div로 감싸는 쪽이 안전합니다.
적용 diff:
- <span + <div className={clsx('flex flex-row text-[22px] text-default-black', { 'max-w-[200px]': isModifiable, })} > <p className="truncate font-semibold"> {speechType} {speaker && ( <span className="font-medium">{` | ${speaker} 토론자`}</span> )} </p> - </span> + </div>
135-135: 색상 상속 리스크에 대비해 time 텍스트에도 명시적 색상 지정 제안전역 기본색을 올려두셨지만, 상위 컨테이너에서 색상이 오버라이드될 경우를 방지하려면 pros/cons 패널의 시간 텍스트에도 text-default-black을 명시하는 편이 안전합니다. 중립 패널과의 시각적 일관성도 좋아집니다.
- <p className="text-[22px] font-medium">{timeStr}</p> + <p className="text-[22px] font-medium text-default-black">{timeStr}</p>src/page/TableComposition/components/TimerCreationContent/TimerCreationContent.tsx (1)
468-474: 분기 렌더링은 목적에 부합합니다. 다만 접근성/중복 최소화를 함께 개선해보세요
- alt는 현재 “time-based-timer”로 고정돼 있어 정보성이 낮습니다. 장식용이라면 alt=""와 aria-hidden을 주고, 정보 제공용이라면 한국어로 더 구체화해 주세요.
- 이미지가 정적 프리뷰인 만큼 loading="lazy"와 decoding="async"로 초기 로딩 비용을 줄일 수 있습니다.
- 동일한 클래스/속성이 반복되니 src/alt만 분기하는 변수를 만들어 중복을 줄이는 것도 좋습니다.
변경 라인에 한한 최소 diff:
- <img - src={timeBasedTimerOnlyTotalImage} - alt="time-based-timer" - className="absolute top-1/2 w-full -translate-y-1/2 object-contain" - /> + <img + src={timeBasedTimerOnlyTotalImage} + alt="" + aria-hidden="true" + loading="lazy" + decoding="async" + className="absolute top-1/2 w-full -translate-y-1/2 object-contain" + />참고: 분기 외의 이미지도 동일 정책을 적용하면 일관성이 좋아집니다(예: 475–479 라인). 추가로, 중복 제거를 원하시면 아래처럼 정리할 수 있습니다(지원 예시):
// 분기 위쪽 어딘가 const isPerSpeakingDisabled = speakerMinutes === 0 && speakerSeconds === 0; const timeBasedPreviewSrc = isPerSpeakingDisabled ? timeBasedTimerOnlyTotalImage : timeBasedTimerImage; // 렌더링 부분 <img src={timeBasedPreviewSrc} alt="" aria-hidden="true" loading="lazy" decoding="async" className="absolute top-1/2 w-full -translate-y-1/2 object-contain" />src/components/icons/RightArrow.tsx (1)
20-26: SVG 아이콘 기본 접근성 속성 추가 제안아이콘이 장식용으로 쓰이는 경우가 많으므로 기본값으로 aria-hidden/focusable을 지정해 보시기 바랍니다(필요 시 상위에서 덮어쓰기 가능).
<svg viewBox="0 0 33 30" fill="none" className={` aspect-[33/30] ${className} `} xmlns="http://www.w3.org/2000/svg" + aria-hidden="true" + focusable="false" {...props} >
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
⛔ Files ignored due to path filters (2)
src/assets/timer/time_based_timer.pngis excluded by!**/*.pngsrc/assets/timer/time_based_timer_only_total.pngis excluded by!**/*.png
📒 Files selected for processing (8)
src/components/ProsAndConsTitle/PropsAndConsTitle.tsx(1 hunks)src/components/icons/LeftArrow.tsx(1 hunks)src/components/icons/RightArrow.tsx(1 hunks)src/index.css(1 hunks)src/page/TableComposition/components/TimeBox/TimeBox.tsx(4 hunks)src/page/TableComposition/components/TimerCreationContent/TimerCreationContent.tsx(2 hunks)src/page/TimerPage/TimerPage.tsx(2 hunks)src/page/TimerPage/components/RoundControlRow.tsx(2 hunks)
🔇 Additional comments (6)
src/components/ProsAndConsTitle/PropsAndConsTitle.tsx (1)
11-11: 헤더-타이틀 간격 축소 의도 충족. 하단 간격 영향만 화면별로 재확인 필요
py-4제거로 내부 상·하 패딩이 사라지고mb-4로 하단 간격이 생깁니다. 조회/수정 화면 외 사용처에서도 컴포넌트 아래 영역이 과도하게 벌어지지 않는지 한번만 확인해 주세요.src/index.css (1)
11-14: 컬러 배경 대비 검토 필요
html, body에 전역text-default-black기본값 적용은 OK입니다.
다만 아래 위치들에서 검정 텍스트 대비가 WCAG 최소 4.5:1을 만족하는지(특히 모바일 저밝기/다크 모드) 반드시 확인해주세요. 필요 시text-default-white등 명시적 텍스트 컬러 적용을 고려해 주세요.
src/index.css
- 48행:
.timebox.pros(bg-camp-blue/50)- 52행:
.timebox.cons(bg-camp-red/50)- 60행:
.timebox.time-based(bg-brand/70)src/page/TimerPage/components/NormalTimer.tsx
- 99행: Pros 버튼 (
bg-camp-blue/50→ hover 시bg-camp-blue)- 103행: Cons 버튼 (
bg-camp-red/50→ hover 시bg-camp-red)src/page/TimerPage/components/TimerController.tsx
- 36행:
stance==='PROS'(bg-camp-blue)- 37행:
stance==='CONS'(bg-camp-red)src/page/TableListPage/components/Table.tsx
- 31행: isHovered=false →
bg-brand/70- 32행: isHovered=true →
bg-brandsrc/components/DesignSystemSample/DesignSystemSample.stories.tsx (Lines 35–41)
<h1>:bg-brand<ColorItem>:bg-team-blue,bg-team-red,bg-brand,bg-brand-hover,bg-semantic-warning,bg-semantic-errorsrc/components/DialogModal/DialogModal.tsx
- 55행: 버튼 hover 시
hover:bg-brand(텍스트 컬러 미지정)src/page/TimerPage/components/RoundControlRow.tsx (1)
1-1: clsx 의존성 및 RoundControlRow 호출부 검증 완료
- package.json의 dependencies에
clsx(^2.1.1) 항목이 존재함을 확인했습니다.RoundControlRowProps에className?: string이 안전하게 추가되었으며 기본값('')도 정의되어 있습니다.TimerPage.tsx에서<RoundControlRow … className="absolute bottom-[66px]" />으로 올바르게className을 전달하고 있습니다.추가 조치할 사항이 없습니다.
src/page/TableComposition/components/TimeBox/TimeBox.tsx (2)
154-158: Neutral(작전시간) 패널 타이포그래피 22px + 명시적 색상 적용: 좋습니다요구사항(22px 통일, 기본 검정 적용)에 맞게 잘 정리되었습니다.
180-185: Neutral(Time-based) 패널 타이포그래피 통일: 좋습니다레이블/시간 모두 22px로 통일되고 색상도 명시되어 일관성이 확보되었습니다.
src/page/TableComposition/components/TimerCreationContent/TimerCreationContent.tsx (1)
15-15: 전용 프리뷰 이미지 import 추가: OKTIME_BASED에서 1회당 발언 시간 비활성화 케이스를 구분하기 위한 리소스 준비로 보이며 적절합니다.
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (3)
src/page/TableComposition/components/TimerCreationContent/TimerCreationContent.tsx (3)
177-185: 프리뷰 분기 로직은 정확. 변수명/계산식만 소폭 다듬으면 가독성↑현재 분기 조건(speakerMinutes===0 && speakerSeconds===0)은 의도에 부합합니다. 다만:
- 이름 isSpeakingTimerDisabled는 “타이머 자체 비활성화”로 읽힐 수 있어 의미가 모호합니다. “1회당 발언 시간 비활성화”를 드러내는 isPerSpeakingTimeDisabled가 더 명확합니다.
- 동일 의미를 초 단위 합계로 판별하면(= 0초) 한 눈에 의도가 들어옵니다.
- alt 텍스트가 영문 식별자 형태라서 스크린리더 사용자에게 의미 전달이 약합니다. 한국어로 구체화하거나 i18n 키로 분리하는 것을 권장합니다.
아래처럼 정리하면 좋겠습니다.
- // 시간 총량제 타이머 샘플 이미지 및 대체 텍스트 결정 - const isSpeakingTimerDisabled = speakerMinutes === 0 && speakerSeconds === 0; - const timeBasedPreviewSrc = isSpeakingTimerDisabled - ? timeBasedTimerOnlyTotalImage - : timeBasedTimerImage; - const timeBasedPreviewAlt = isSpeakingTimerDisabled - ? 'time-based-timer-only-total-timer' - : 'time-based-timer'; + // 시간 총량제 타이머 샘플 이미지 및 대체 텍스트 결정 + const speakingTotalSeconds = speakerMinutes * 60 + speakerSeconds; + const isPerSpeakingTimeDisabled = speakingTotalSeconds === 0; + const timeBasedPreviewSrc = isPerSpeakingTimeDisabled + ? timeBasedTimerOnlyTotalImage + : timeBasedTimerImage; + // 접근성: 한국어 alt로 의미 전달 강화 (i18n 적용 시 키로 대체 권장) + const timeBasedPreviewAlt = isPerSpeakingTimeDisabled + ? '자유토론 타이머 프리뷰 (전체 시간만 표시)' + : '자유토론 타이머 프리뷰';참고: onSubmit에서 timePerSpeaking을 0이면 null로 보내는 현재 로직(라인 348-349)과도 의미가 일치합니다.
479-481: 동적 프리뷰 연결 LGTM. 디코딩 힌트로 초기 페인트 영향 최소화 제안src/alt 바인딩은 적절합니다. 이미지 디코딩을 비동기로 힌트 주면 메인 스레드 블로킹을 줄일 수 있습니다(특히 저사양 환경에서 유리).
- src={timeBasedPreviewSrc} - alt={timeBasedPreviewAlt} + src={timeBasedPreviewSrc} + alt={timeBasedPreviewAlt} + decoding="async"추가로, 위 코멘트의 alt 개선안(한국어 문구 또는 i18n 키)도 함께 반영되면 접근성이 좋아집니다.
15-15: 타이머 관련 PNG 용량 확인 완료fd 명령어로 확인한 결과, 타이머 프리뷰 자산의 파일 크기는 다음과 같습니다.
- src/assets/timer/normal_timer_cons.png: 71K
- src/assets/timer/normal_timer_neutral.png: 60K
- src/assets/timer/normal_timer_pros.png: 72K
- src/assets/timer/time_based_timer.png: 188K
- src/assets/timer/time_based_timer_only_total.png: 168K
time_based_timer_only_total.png(168K)과time_based_timer.png(188K)는 초기 모달 렌더링 시 로드 지연 가능성이 있어, WebP 변환 또는 추가 압축을 통해 파일 크기 최적화를 권장드립니다.
최종적으로 코드 변경은 승인하며, 용량 최적화는 선택적인 리팩토링으로 고려해 주세요.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (2)
src/page/TableComposition/components/TimerCreationContent/TimerCreationContent.tsx(3 hunks)src/page/TimerPage/TimerPage.tsx(2 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- src/page/TimerPage/TimerPage.tsx
🧰 Additional context used
🧠 Learnings (1)
📓 Common learnings
Learnt from: i-meant-to-be
PR: debate-timer/debate-timer-fe#351
File: src/components/icons/RightArrow.tsx:10-15
Timestamp: 2025-08-24T15:54:30.978Z
Learning: In the debate-timer-fe codebase, the LeftArrow and RightArrow icons have intentionally different viewBox dimensions (LeftArrow: 34×30, RightArrow: 33×30) as provided by the designer. This size difference is intentional design decision and should not be flagged as an inconsistency or visual imbalance issue.
jaeml06
left a comment
jaeml06
left a comment
There was a problem hiding this comment.
정상작동하는 것 확인했습니다 고생하셨습니다.
useon
left a comment
useon
left a comment
There was a problem hiding this comment.
작업 확인했습니다 !! 꼼꼼하게 반영해주셔서 감사합니다 😊
i-meant-to-be
temporarily deployed
to
DEPLOY_DEV
GitHub Actions
Inactive
🚩 연관 이슈
closed #347
📝 작업 내용
배경
써니의 피드백과 지난 KPT 회고 세션에서 받았던 피드백을 모아 적용하였습니다.
세부 내용
좌우 화살표 아이콘 벡터 변경
좌우 화살표 아이콘 -
DTLeftArrow와DTRightArrow- 의 SVG 코드가 써니의 수정으로 인해 일부 변경되었습니다.헤더와 찬성/반대 팀명 사이 간격 축소
상단 헤더와 시간표 조회/수정 화면에 나타나는 팀명 컴포넌트의 간격이 다소 넓은 것 같다는 써니의 피드백에 따라, 간격을 축소하였습니다.
타임박스의 발언자 텍스트와 시간 텍스트의 크기 통일
써니의 피드백에 따라, 타임박스의 발언자 텍스트와 시간 텍스트의 크기를 22 px로 통일하였습니다.
1회당 발언 시간 비활성화 시 타이머 이미지 변경
타임박스 추가 모달에서 1회당 발언 시간 비활성화(0분 0초로 설정) 시, 타이머 샘플 사진 역시 1회당 발언 시간 없는 시간 총량제 타이머가 표시되도록 개선했습니다.
타이머 조작 버튼 화면 하단에 고정
타이머 조작 버튼을 화면 하단 기준 66 px 위에 고정 배치하였습니다. 이를 위해
TimerPage컨테이너를relative로 설정하고, 타이머 조작부에absolute bottom-[66px]태그를 추가했습니다.그 외 변경 사항
text-default-black(#222222)로 설정되도록 개선🏞️ 스크린샷 (선택)
위에 첨부하여 생략
🗣️ 리뷰 요구사항 (선택)
없음
Summary by CodeRabbit
New Features
Style
UX