[UI] 타임 셀렉터 AI 추천 배지 디자인 반영 - #298
jjangminii wants to merge 3 commits into
Conversation
- AI 추천 배지에 텍스트 라벨을 추가했습니다 - 아이콘·라벨 줄과 시간 표시 줄을 세로로 분리했습니다 - 시간 텍스트 폰트를 Medium 굵기로 변경했습니다 - AI 배지와 시간 목록 사이에 구분선을 추가했습니다 - AI 아이콘 크기를 14px로 고정했습니다 Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Navigate logical layers of code changes, visualize relationships, and explore their blast radius. No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Repository: Team-Timo/Timo-client/.coderabbit.yaml Review profile: ASSERTIVE Plan: Advanced Run ID: 📒 Files selected for processing (4)
Included review availability: This review used your included allowance. Your plan provides up to 1 included review per hour; 0 remain after this review. Walkthrough시간 옵션의 표시 데이터를 Changes시간 선택기 변경
Priority: ⬇️ Low Estimated code review effort: 2 (Simple) | ~10 minutes Change: Feature · Severity of issue fixed: Low Merge Risk: ⚪ Minimal · up to The time-option contract is consistent across both forms and the selector, and the AI recommendation button retains an accessible name. No concrete merge-blocking issue remains; normal checks and visual confirmation are appropriate. Security Architecture ReviewSecurity architecture risk: 🔵 Low · up to The known forms adopt the new option format while keeping numeric selection values and application-owned duration handling. No new privileged operation or weakened control was identified. Exposure is bounded by a private workspace package, but the exact historical comparison and wider integration coverage remain incomplete. Retained concerns Security review detailsSecurity Blast Radius
Security Findings and Attack Paths
Trust Boundaries and Controls
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
Comment |
Timo Performance ReportBundle Size — timo-web
Lighthouse — timo-web
Image Optimization — timo-web
측정 커밋: |
yumin-kim2
left a comment
yumin-kim2
left a comment
There was a problem hiding this comment.
변경된 디자인 바로 반영해주셨네요!! 수고하셨습니다 👍👍
- AI 추천 라벨 폰트를 8px 하드코딩에서 caption 토큰(typo-caption-r-10)으로 변경했습니다
- 시간 목록 항목을 value/unit 분리 표기에서 "00 : 15" 형태의 단일 라벨로 변경했습니다
- TimeOption 타입을 {minute, label} 구조로 변경했습니다
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
- TimeOption 타입 변경에 맞춰 생성/상세 모달의 시간 옵션 라벨을 "00 : 15" 형식으로 생성하도록 수정했습니다 Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This branch was successfully deployed
3 participants
ISSUE 🔗
close #297
What is this PR? 🔍
TimeSelector의 AI 추천 배지를 최신 피그마 디자인에 맞춰 반영했습니다.
배경
aria-label로만 접근성을 확보했으며, 아이콘과 시간 입력이 한 줄에 배치되고 AI 배지와 하단 시간 목록 사이 구분선이 없었습니다.timo-black,timo-blue-300,timo-gray-500)에 매핑했습니다.TimeSelector AI 추천 배지
<button>에<span>AI 추천</span>을 추가해 클릭 가능 영역과 접근 가능한 이름을 함께 확보했습니다(시각적 텍스트가 생겨aria-label은 제거). 시간 입력(분/초input2개, 직접 수정 기능은 그대로 유지)은 별도 줄로 내렸습니다. 하단 시간 목록 wrapper에border-t border-timo-gray-500 pt-2를 추가해 구분선을 표현했습니다.typo-headline-r-14(Regular)에서typo-headline-m-14(Medium)로 변경했으나, 디자인팀에서 폰트 스펙이 아직 확정되지 않아 추후 다시 반영될 예정입니다.타이포그래피 · 시간 목록 형식 수정 (후속)
tokens.md에 없는text-[8px]임의값이었는데(위 섹션 최초 작업 당시 매핑 가능한 토큰을 찾지 못했던 부분), 재확인 결과 Figma 스펙은 Caption/Caption_R_10(10px)이었습니다. 시간 목록도 실제로는value+unit(15/min)을 양끝 정렬하는 구조였는데, 피그마 원본은"00 : 15"같은 콜론 구분 단일 텍스트였습니다.text-[8px]→typo-caption-r-10으로 교체했습니다.TimeOption타입을{minute, value, unit}에서{minute, label}로 바꾸고, 목록 렌더링을 span 2개(justify-between)에서 단일 span으로 단순화했습니다.apps/timo-web의 두 호출부(use-time-field.ts,use-detail-todo-form.ts)는 기존convertDurationToTimeText유틸을 재사용해"00 : 15"형식 라벨을 생성하도록 맞췄습니다.typo-headline-m-14vs-r-14) 디자인팀 확정 대기 이슈는 이번 범위와 무관하게 그대로 남아 있습니다.To Reviewers
최종 디자인에 맞춰 업데이트 했습니다.
후속 커밋(타이포·시간 형식)은 디자이너 피드백을 받아 Figma 노드를 다시 대조하며 수정한 부분이라
TimeOption타입 변경(value/unit→label)이 호출부 두 곳에 제대로 반영됐는지 확인 부탁드립니다.Screenshot 📷
Test Checklist ✔
pnpm --filter @repo/timo-design-system check-types통과pnpm --filter @repo/timo-design-system lint통과pnpm --filter timo-web check-types통과pnpm --filter timo-web lint통과