[FEAT] 홈/통계/타임사이드바 다국어(i18n) 텍스트 매핑 추가#113
Conversation
- TodayButton, DropdownView에 label/placeholder 오버라이드용 prop을 추가했습니다 - PriorityIcon에 접근성용 label prop을 추가해 스크린리더에서 우선순위를 읽을 수 있게 했습니다 - AddTaskButton의 플러스 아이콘을 텍스트 색상과 일치하는 PlusGrayIcon으로 교체했습니다
- 홈 헤더의 오늘/기본/7일/할 일 추가 텍스트를 Home 네임스페이스로 매핑했습니다 - 홈 투두 카드의 태그·우선순위 값을 고정 유니온 타입으로 정규화하고 Common 네임스페이스로 매핑했습니다 - 요일 표시를 Common.weekday 사전과 공용 getDayOfWeekKey 유틸로 통일했습니다 - 통계 헤더의 월 라벨을 로케일과 무관하게 영어 월 이름만 표시하도록 수정했습니다
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Warning Review limit reached
Next review available in: 44 minutes Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available. How can I continue?After more reviews become available, a review can be triggered using the To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews. How do review limits work?CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability. For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window. Please refer docs for additional details. Review details⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: ASSERTIVE Plan: Pro Plus Run ID: 📒 Files selected for processing (1)
Walkthrough홈, 통계, 타임 사이드바 화면의 하드코딩된 한글 텍스트를 next-intl 기반 Common/Home 번역 네임스페이스로 교체했습니다. 요일 키 조회 유틸을 신규 추가하고, TodoTagName 타입을 도입했으며, PriorityIcon에 접근성 라벨을 추가했습니다. 일부 디자인 시스템 컴포넌트의 스타일과 아이콘도 함께 조정되었습니다. Changesi18n 매핑 및 관련 UI 정합성
Estimated code review effort: 3 (Moderate) | ~25 minutes Possibly related PRs
Suggested reviewers: 🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
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. Comment |
- 리팩터링 과정에서 실수로 빠졌던 Header.SidebarButton과 useNavigationSidebar wiring을 다시 추가했습니다
Timo Performance ReportBundle Size — timo-web
Lighthouse — timo-web
Image Optimization — timo-web
측정 커밋: |
- WeeklyNav 라벨 너비를 w-25에서 w-17로 좁혀 화살표 버튼과의 간격을 맞췄습니다
ehye1
left a comment
ehye1
left a comment
There was a problem hiding this comment.
코드 보면서 다국어 매핑 구조 어떻게 하는지 이해햇습니다,,
굿굿 !! 수고하셨습니다
jjangminii
left a comment
jjangminii
left a comment
There was a problem hiding this comment.
요일 계산이 date.ts와 TimeSidebarHeader.tsx에서 서로 다르게 구현되어 있던 걸 getDayOfWeekKey 공용 유틸로 통합해주셨네요. 단순 텍스트 번역이 아니라 "하나만 고치면 다른 화면은 한글로 남는" 근본 원인부터 해결해주신 점이 좋았습니당 😊 재사용 값은 Common, 홈 전용은 Home으로 나눈 기준도 명확해서 다른 화면에서도 그대로 재사용 가능할 것 같아요. 고생하셨습니다!
…to feat/web/112-i18n-locale-mapping
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In
`@apps/timo-web/app/`[locale]/(main)/(with-time-sidebar)/home/_containers/HomeTodoContainer.tsx:
- Line 19: `HomeTodoContainer`에서 새로 추가된 `TagLabelKey`와 `PriorityLabelKey` 타입 별칭의
접미사가 규칙과 달라 기존 `TodoPriorityTypes`와 일관되지 않습니다. 이 두 `type` alias의 이름을 경로 지침에 맞게
`Types` 접미사로 통일하고, 해당 타입을 사용하는 선언/참조도 함께 새 이름으로 맞춰서 `TodoPriorityTypes`와 같은 네이밍
규칙을 유지하세요.
In `@apps/timo-web/messages/ko.json`:
- Line 27: The Korean label for veryImportant is missing a space and should be
updated for consistency with the English label; adjust the translation entry in
ko.json for the veryImportant key to use the natural phrasing “매우 중요” instead of
“매우중요”. Use the veryImportant key in the messages file to locate the string and
keep the rest of the translation file unchanged.
In `@packages/timo-design-system/src/components/dropdown-view/DropdownView.tsx`:
- Around line 23-27: `DropdownView` is no longer preserving a stable default
width when only `className` is passed to the `Dropdown` root, so callers like
`Header.ViewDropdown` may collapse to content width. Update `DropdownView` to
keep the default `w-18.5` on the root by merging it with any incoming
`className` using `cn("w-18.5", className)`, and keep the rest of the dropdown
structure unchanged.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro Plus
Run ID: 3d2acc35-b175-4c0b-bc3f-e66dc91b6e3f
📒 Files selected for processing (16)
apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_components/HomeTodoCard.tsxapps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_containers/HomeHeaderContainer.tsxapps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_containers/HomeTodoContainer.tsxapps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_mocks/todo-mock.tsapps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_types/todo-type.tsapps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_utils/date.tsapps/timo-web/app/[locale]/(main)/statistics/_containers/StatisticsHeaderContainer.tsxapps/timo-web/components/layout/header/Header.tsxapps/timo-web/components/layout/sidebar/time/TimeSidebarHeader.tsxapps/timo-web/messages/en.jsonapps/timo-web/messages/ko.jsonapps/timo-web/utils/get-day-of-week-key.tspackages/timo-design-system/src/components/button/add-task-button/AddTaskButton.tsxpackages/timo-design-system/src/components/button/today-button/TodayButton.tsxpackages/timo-design-system/src/components/dropdown-view/DropdownView.tsxpackages/timo-design-system/src/components/priority/priority-icon/PriorityIcon.tsx
💤 Files with no reviewable changes (1)
- apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_utils/date.ts
- TagLabelKey, PriorityLabelKey 타입 별칭명을 TagLabelKeyTypes, PriorityLabelKeyTypes로 변경했습니다
3 participants
ISSUE 🔗
close #112
What is this PR? 🔍
홈, 통계, 타임 사이드바 화면에서 하드코딩돼 있던 한글 텍스트(요일/태그/우선순위/월 이름/버튼 라벨)를 next-intl 기반으로 다국어 매핑했습니다.
배경
home/_utils/date.ts와TimeSidebarHeader.tsx(Intl.DateTimeFormat("ko-KR", ...)) 두 곳에 서로 다른 방식으로 중복 구현돼 있었습니다.Common네임스페이스로, 홈페이지 전용 텍스트(오늘/기본/7일/할 일 추가)는Home네임스페이스로 나눠 정리하고, 요일 계산은 공용 유틸getDayOfWeekKey하나로 통일했습니다.홈 헤더 (오늘 / 기본 / 7일)
HomeHeaderContainer의 "오늘"/"기본"/"7일" 텍스트를Home네임스페이스로 옮겼습니다.VIEW_OPTIONS = ["기본", "7일"]처럼 표시 문자열 자체가 선택 상태값으로 쓰이고 있어서, 그대로 번역 문자열로 바꾸면 로케일 전환 시 선택된 값이 어느 옵션인지 어긋날 수 있었습니다.isWeekView(boolean)로 바꾸고, 화면에 보여줄 라벨만t("viewBasic")/t("viewWeek")로 계산해 넘깁니다.Header.TodayButton에도labelprop을 추가해t("today")를 전달합니다.AddTaskButton
t("addTask")로 교체하고, 플러스 아이콘을 텍스트와 같은 톤인PlusGrayIcon(#9F9F9F, gray-700)으로 바꿨습니다.PlusIcon은#3F3F3F(gray-900) 고정이라 옆 텍스트(text-timo-gray-700)와 색 톤이 달라 보였습니다.PlusGrayIcon을 그대로 사용했습니다. Tailwind[&>path]:fill-*로 기존 아이콘 색을 오버라이드하는 방식도 검토했으나, 이미 존재하는 아이콘을 쓰는 쪽이 더 적합해 채택하지 않았습니다.홈 투두 카드 (태그 · 우선순위)
TodoTag.name을 자유 문자열에서TodoTagName(DAILY_LIFE/WORK/EXERCISE/ASSIGNMENT/ADDITIONAL) 유니온으로 좁히고, mock 데이터와 카드 렌더링을 이 값 기준으로 번역하도록 바꿨습니다. 우선순위도 같은 방식으로Common.priority.*에 매핑했습니다.HomeTodoContainer에서TAG_LABEL_KEY/PRIORITY_LABEL_KEY두Record상수로 도메인 값 → 번역 key를 매핑하고,tCommon(\tag.${...}`)/tCommon(`priority.${...}`)로 변환한 문자열을HomeTodoCard에 내려줍니다. 우선순위는 화면에 노출되는 텍스트가 없어서,PriorityIcon에labelprop을 추가해aria-label`로만 노출했습니다(시각적으로는 기존과 동일).EXERCISE/ADDITIONAL로 임의 매핑했습니다. 실제 태그 체계가 백엔드/기획에서 확정되면 이 매핑을 다시 맞춰야 합니다.요일 표시 통일
home/_utils/date.ts에서 공용 유틸apps/timo-web/utils/get-day-of-week-key.ts로 옮기고, 번역 사전도Home.weekday에서Common.weekday로 이동했습니다.TimeSidebarHeader가 쓰던Intl.DateTimeFormat("ko-KR", ...)하드코딩도 이 공용 유틸 + 사전 조합으로 교체했습니다.Intl포맷)으로 구현돼 있어, 하나를 고쳐도 다른 하나는 그대로 한글로 남는 구조였습니다.getDayOfWeekKey(date)가"sunday"~"saturday"key를 반환하면, 두 컴포넌트 모두useTranslations("Common")으로t(\weekday.${key}`)`를 호출해 같은 사전을 공유합니다.통계 헤더 월 라벨
StatisticsHeaderContainer의 월 라벨 포맷을Intl.DateTimeFormat("ko-KR", { year: "numeric", month: "long" })에서Intl.DateTimeFormat("en-US", { month: "long" })으로 바꿔, "July"처럼 로케일과 무관하게 항상 영어 월 이름만 표시하도록 했습니다.To Reviewers
EXERCISE, "자기계발"→ADDITIONAL매핑은 실제 기획 확정 전 제 임의 판단입니다. 다르면todo-mock.ts/TAG_LABEL_KEY만 고치면 됩니다.PriorityIcon에 추가한labelprop은 시각적으로는 변화가 없고aria-label만 붙습니다(스크린리더 전용 개선).Screenshot 📷
Test Checklist ✔
pnpm check-types통과pnpm lint통과ko/en) 전환 후 실제 화면 확인 — 미실행pnpm build— 미실행