번역 기능 리팩토링 #259
Merged
번역 기능 리팩토링 #259
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Closed
📝 WalkthroughWalkthrough이번 변경에서는 Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant FloatingTranslateButton
participant ToastSystem
participant GoogleTranslate
User->>FloatingTranslateButton: 언어 변경 시도
FloatingTranslateButton->>GoogleTranslate: 언어 변경 요청
alt 에러 발생
FloatingTranslateButton->>ToastSystem: 번역 오류 토스트 표시
else 성공
GoogleTranslate-->>FloatingTranslateButton: 언어 변경 완료
end
Estimated code review effort🎯 2 (Simple) | ⏱️ ~8 minutes Possibly related PRs
Suggested reviewers
Poem
Note ⚡️ Unit Test Generation is now available in beta!Learn more here, or try it out under "Finishing Touches" below. 📜 Recent review detailsConfiguration used: .coderabbit.yaml 📒 Files selected for processing (1)
🧰 Additional context used🧠 Learnings (1)📓 Common learnings🔇 Additional comments (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 comments)
Other keywords and placeholders
Documentation and Community
|
|
🚀 오늘뭐해 Preview Deploy 완료! |
![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
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
apps/what-today/src/components/FlagIcon.tsx(2 hunks)apps/what-today/src/components/FloatingTranslateButton.tsx(13 hunks)
🧰 Additional context used
🧠 Learnings (7)
📓 Common learnings
Learnt from: kjhyun0830
PR: What-Today-FE/What-Today#77
File: apps/what-today/src/pages/mypage/manage-activities/index.tsx:50-63
Timestamp: 2025-07-19T01:23:56.149Z
Learning: User kjhyun0830 follows an incremental development approach in What-Today project, implementing UI first and adding functionality in later iterations, as confirmed in PR #77 for the experience management page.
Learnt from: HarrySeop
PR: What-Today-FE/What-Today#129
File: apps/what-today/src/pages/mypage/reservations-list/index.tsx:13-25
Timestamp: 2025-07-24T19:36:15.516Z
Learning: HarrySeop은 What-Today 프로젝트에서 API 에러 처리를 토스터(toast notification)로 처리하는 방식을 선호하며, 핸들러 함수 구현 시점에 함께 연결하는 접근 방식을 취함.
Learnt from: kjhyun0830
PR: What-Today-FE/What-Today#169
File: apps/what-today/src/hooks/useMyActivitiesQuery.ts:23-25
Timestamp: 2025-07-29T14:50:14.117Z
Learning: kjhyun0830은 What-Today 프로젝트에서 토스터 알림과 같은 UI 일관성이 필요한 기능들을 여러 페이지에 걸쳐 한 번에 수정하는 접근 방식을 선호한다.
Learnt from: kjhyun0830
PR: What-Today-FE/What-Today#219
File: apps/what-today/src/pages/mypage/main/index.tsx:108-157
Timestamp: 2025-08-03T00:45:03.763Z
Learning: kjhyun0830은 What-Today 프로젝트의 마이페이지(apps/what-today/src/pages/mypage/main/index.tsx)에서 다음 브랜치에 스켈레톤 UI 작업과 함께 로딩 상태 처리를 구현할 계획이라고 언급함.
Learnt from: kjhyun0830
PR: What-Today-FE/What-Today#178
File: apps/what-today/src/index.css:63-83
Timestamp: 2025-07-30T13:22:43.195Z
Learning: kjhyun0830은 What-Today 프로젝트에서 기능적으로 문제가 없는 코드에 대해서는 장기적인 유지보수 개선사항보다는 현재 작동하는 상태를 유지하는 것을 선호하는 실용적인 접근 방식을 취한다.
Learnt from: Taeil08
PR: What-Today-FE/What-Today#125
File: packages/design-system/src/components/DatePicker.tsx:25-28
Timestamp: 2025-07-24T13:33:33.202Z
Learning: packages/design-system/src/components/DatePicker.tsx에서 Taeil08은 sr-only 클래스를 가진 div 요소가 달력 트리거 버튼의 세로 정렬에 필요하다고 설명했음. 이 요소를 제거하면 버튼 정렬이 깨지는 레이아웃 의존성이 있음.
Learnt from: Taeil08
PR: What-Today-FE/What-Today#237
File: packages/design-system/src/components/Carousel/Carousel.tsx:19-25
Timestamp: 2025-08-04T04:16:10.940Z
Learning: Taeil08 prefers using translate-x-1/2 and translate-x-1/2 for carousel navigation button positioning in packages/design-system/src/components/Carousel/Carousel.tsx as it provides better flexibility for button positioning compared to fixed positioning without transforms.
📚 Learning: the mainpage component in apps/what-today/src/pages/main/index.tsx contains placeholder/example code...
Learnt from: MyungJiwoo
PR: What-Today-FE/What-Today#43
File: apps/what-today/src/pages/main/index.tsx:7-7
Timestamp: 2025-07-14T13:36:17.941Z
Learning: The MainPage component in apps/what-today/src/pages/main/index.tsx contains placeholder/example code that will be modified later, including the fixed height class 'h-1400' which the user indicated is temporary.
Applied to files:
apps/what-today/src/components/FlagIcon.tsx
📚 Learning: in packages/design-system/src/components/button/index.tsx, harryseop uses handleclick wrapper for se...
Learnt from: HarrySeop
PR: What-Today-FE/What-Today#53
File: packages/design-system/src/components/button/index.tsx:32-41
Timestamp: 2025-07-16T06:51:15.152Z
Learning: In packages/design-system/src/components/button/index.tsx, HarrySeop uses handleClick wrapper for security purposes to prevent execution when users remove disabled attributes via developer tools. The onClick handler should be extracted from rest props before spreading to avoid being overwritten.
Applied to files:
apps/what-today/src/components/FlagIcon.tsxapps/what-today/src/components/FloatingTranslateButton.tsx
📚 Learning: taeil08 prefers using translate-x-1/2 and translate-x-1/2 for carousel navigation button positioning...
Learnt from: Taeil08
PR: What-Today-FE/What-Today#237
File: packages/design-system/src/components/Carousel/Carousel.tsx:19-25
Timestamp: 2025-08-04T04:16:10.940Z
Learning: Taeil08 prefers using translate-x-1/2 and translate-x-1/2 for carousel navigation button positioning in packages/design-system/src/components/Carousel/Carousel.tsx as it provides better flexibility for button positioning compared to fixed positioning without transforms.
Applied to files:
apps/what-today/src/components/FloatingTranslateButton.tsx
📚 Learning: in the button component (packages/design-system/src/components/button/index.tsx), the children filte...
Learnt from: HarrySeop
PR: What-Today-FE/What-Today#53
File: packages/design-system/src/components/button/index.tsx:63-70
Timestamp: 2025-07-15T16:38:40.310Z
Learning: In the Button component (packages/design-system/src/components/button/index.tsx), the children filtering logic that only allows strings and Icon components is intentional design decision by HarrySeop. The validChildren filter is meant to restrict button content to only text strings and Icon components for consistency and to prevent component misuse.
Applied to files:
apps/what-today/src/components/FloatingTranslateButton.tsx
📚 Learning: packages/design-system/src/components/datepicker.tsx에서 taeil08은 sr-only 클래스를 가진 div 요소가 달력 트리거 버튼의 세...
Learnt from: Taeil08
PR: What-Today-FE/What-Today#125
File: packages/design-system/src/components/DatePicker.tsx:25-28
Timestamp: 2025-07-24T13:33:33.202Z
Learning: packages/design-system/src/components/DatePicker.tsx에서 Taeil08은 sr-only 클래스를 가진 div 요소가 달력 트리거 버튼의 세로 정렬에 필요하다고 설명했음. 이 요소를 제거하면 버튼 정렬이 깨지는 레이아웃 의존성이 있음.
Applied to files:
apps/what-today/src/components/FloatingTranslateButton.tsx
📚 Learning: popovertrigger component in controlled mode (when open and onopenchange props are provided to popove...
Learnt from: MyungJiwoo
PR: What-Today-FE/What-Today#117
File: apps/what-today/src/components/notification/NotificationPopover.tsx:21-21
Timestamp: 2025-07-24T08:18:09.297Z
Learning: PopoverTrigger component in controlled mode (when open and onOpenChange props are provided to PopoverRoot) does not automatically toggle the popover state on click. The developer must provide a manual onClick handler to manage the state toggle, as the internal handleClick only works when !isControlled.
Applied to files:
apps/what-today/src/components/FloatingTranslateButton.tsx
🧬 Code Graph Analysis (1)
apps/what-today/src/components/FloatingTranslateButton.tsx (1)
apps/what-today/src/constants/languages.ts (1)
findLanguageByCode(70-72)
🔇 Additional comments (9)
apps/what-today/src/components/FlagIcon.tsx (1)
2-2: LGTM!
twMerge임포트가 올바르게 추가되었습니다. Tailwind CSS 클래스 충돌을 방지하고 더 나은 클래스 병합을 위한 좋은 선택입니다.apps/what-today/src/components/FloatingTranslateButton.tsx (8)
2-2: LGTM!에러 처리를 위한
useToast훅 임포트가 올바르게 추가되었습니다. 이전 학습 내용에 따르면 HarrySeop님께서 토스트 알림을 통한 에러 처리를 선호하시는 것으로 확인됩니다.
19-19: LGTM!
useToast훅의 사용법이 올바릅니다.
30-74: 언어 감지 로직 개선이 우수합니다!쿠키 기반 언어 감지를 우선 순위로 두고, URL 파라미터와 body 클래스를 fallback으로 사용하는 계층적 접근 방식이 훌륭합니다.
googtrans쿠키는 Google Translate의 현재 상태를 가장 안정적으로 감지할 수 있는 방법입니다. 또한 콘솔 에러를 토스트 알림으로 대체한 것도 사용자 경험을 크게 개선합니다.
107-115: LGTM!Google Translate 초기화 시 에러 처리가 토스트 알림으로 일관성 있게 개선되었습니다. 의존성 배열에
toast추가도 올바릅니다.
146-155: LGTM!스크립트 로딩 실패 시 토스트 알림 처리가 적절히 추가되었습니다. 의존성 배열 업데이트도 올바릅니다.
189-302: 언어 변경 함수의 에러 처리가 완벽하게 개선되었습니다!모든 잠재적 실패 지점에 토스트 알림이 추가되어 사용자가 번역 과정의 문제를 명확히 인지할 수 있게 되었습니다. 특히 Google Translate가 준비되지 않았을 때, select 요소를 찾을 수 없을 때, 그리고 일반적인 예외 상황에 대한 처리가 모두 포함되어 있어 포괄적입니다.
319-348: UI 스타일링 개선이 우수합니다!드롭다운의 패딩과 그림자 조정, 라벨 텍스트 색상 변경, 플로팅 버튼의
rounded-full스타일 적용 등이 일관성 있게 적용되어 더 현대적이고 세련된 디자인을 만들어냅니다.FlagIcon에rounded-full클래스를 추가한 것도 전체적인 디자인 통일성을 높입니다.
1-356: 전체적으로 훌륭한 리팩토링입니다!이번 변경사항은 PR 목표에 완벽히 부합하는 포괄적인 개선을 보여줍니다:
- 에러 처리 개선: 콘솔 로그를 토스트 알림으로 대체하여 사용자 피드백을 크게 향상
- 언어 감지 강화: 쿠키 기반 감지를 우선순위로 하는 더 안정적인 로직
- UI 디자인 개선: 일관된 스타일링과 현대적인 디자인 요소 적용
- 코드 품질: 의존성 배열 정확한 관리와 에러 처리의 일관성
HarrySeop님의 이전 작업 패턴에 따른 토스트 알림 사용도 잘 반영되어 있습니다.
|
🚀 오늘뭐해 Preview Deploy 완료! |
Taeil08
approved these changes
Aug 4, 2025
|
🚀 오늘뭐해 Preview Deploy 완료! |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
🧩 관련 이슈 번호
📌 작업 내용
✅ 체크리스트
📷 UI 변경 사항 (선택)
❓무슨 문제가 발생했나요? (선택)
💬 기타 참고 사항 (선택)
Summary by CodeRabbit
버그 수정
스타일
기타