fix: 파이 차트 내 온도 위치 수정, 오른쪽 캡슐 버튼 내 글자 크기 자동으로 변경

[Neibce]

Summary by CodeRabbit

• Style
  • UI 요소의 코드 정렬 및 들여쓰기를 개선하여 가독성을 높였습니다.
  • 알림 텍스트의 폰트 크기를 22에서 20으로 소폭 조정하고, Padding과 FittedBox로 감싸 레이아웃과 텍스트 스케일링을 개선했습니다.

[coderabbitai]

Walkthrough

이 변경 사항은 home_donutCapsule.dart 파일 내에서 코드 포매팅과 UI 소폭 조정에 집중되어 있습니다. 레이아웃 값과 텍스트 위젯의 배치가 더 읽기 쉽도록 재정렬되었으며, 일부 폰트 크기 조정 및 위젯 래핑이 추가되었습니다. 로직이나 상태 관리에는 변화가 없습니다.

Changes

파일/폴더	변경 요약
frontend/ongi/lib/screens/home/home_donutCapsule.dart	레이아웃 값과 위젯 포매팅 개선, 텍스트 크기 소폭 조정, FittedBox 및 Padding 추가, onTap 콜백 및 텍스트 할당 포매팅 단순화

Sequence Diagram(s)

(해당 변경은 UI 포매팅 및 경미한 레이아웃 조정에 한정되어 있어 시퀀스 다이어그램 생략)

Possibly related PRs

• feat: 홈화면에 파이차트 추가 및 캡슐 버튼 자연스럽게 수정 #36: 동일 파일 내 위젯의 구조 및 동작을 대폭 변경한 PR로, 이번 PR은 그 후속 미세 조정에 해당함.
• feat: home side bar complete #30: 이번 PR에서 수정한 컴포넌트와 상태 관리 코드를 최초 도입한 PR로, 직접적으로 연관됨.

Suggested reviewers

• taekoong

Poem

🐰
코드 줄을 가지런히,
UI에 살짝 손길을,
폰트 크기 줄이고,
패딩으로 감싸주니,
토끼도 미소 짓네—
깔끔해진 화면 위,
한 송이 당근빛 봄!

---

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Explain this complex logic.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  • @coderabbitai explain this code block.
  • @coderabbitai modularize this function.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read src/utils.ts and explain its main purpose.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
  • @coderabbitai help me debug CodeRabbit configuration file.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai full review to do a full review from scratch and review all the files again.
• @coderabbitai summary to regenerate the summary of the PR.
• @coderabbitai generate docstrings to generate docstrings for this PR.
• @coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
• @coderabbitai help to get help.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• Please see the configuration documentation for more information.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (3)

frontend/ongi/lib/screens/home/home_donutCapsule.dart (3)

26-29: MediaQuery 호출을 캐싱하여 성능 개선 가능

MediaQuery.of(context).size.width 값을 한 빌드 사이클 안에서 여러 번 계산하고 있습니다(본 줄 포함 총 10여 회). 동일한 값을 반복적으로 조회하면 불필요한 트리거가 발생할 수 있으므로, 변수로 캐싱해두고 재사용하는 편이 좋습니다.

예시 diff:

@@
   @override
   Widget build(BuildContext context) {
-    return Expanded(
+    final screenWidth = MediaQuery.of(context).size.width;
+    final screenHeight = MediaQuery.of(context).size.height;
+
+    return Expanded(
@@
-            width: MediaQuery.of(context).size.width * 0.95,
-            height: MediaQuery.of(context).size.width * 0.95,
+            width: screenWidth * 0.95,
+            height: screenWidth * 0.95,
@@
-                    offset: Offset(
-                      -MediaQuery.of(context).size.width * 0.35,
+                    offset: Offset(
+                      -screenWidth * 0.35,

---

150-163: FittedBox 사용은 👍 하지만 AutoSizeText 고려

FittedBox로 텍스트 스케일링을 제어한 점은 유용합니다. 다만 긴 문구가 들어올 경우 줄바꿈 없이 축소만 진행돼 가독성이 떨어질 수 있습니다. auto_size_text 패키지의 AutoSizeText를 사용하면 최소/최대 폰트, 줄바꿈 등을 더 세밀하게 제어할 수 있습니다.

---

196-199: 람다식의 중첩 삼항 연산 가독성 개선 제안

onTap의 한 줄짜리 람다에서 삼항 연산을 바로 넣으면 읽기 어렵습니다. 별도 메서드(ex. _toggleSelection(0))로 추출하거나 블록 람다로 가독성을 높여보세요.

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 402bf8f and 3acefb9.

📒 Files selected for processing (1)

• frontend/ongi/lib/screens/home/home_donutCapsule.dart (5 hunks)

🔇 Additional comments (2)

frontend/ongi/lib/screens/home/home_donutCapsule.dart (2)

47-49: 좌측 오프셋 수치 하드코딩 검토 필요

left 값을 screenWidth * 0.04로 고정하면 작은-화면(예: 320 px)에서 텍스트가 지나치게 밀려 시각적 왜곡이 생길 수 있습니다. LayoutBuilder나 FittedBox를 활용해 동적으로 위치를 잡는 방법을 고려해 보세요.

---

113-115: 선택 상태에서 버튼 폭이 화면 90 % → 오버플로우 가능성

세로형 Column + crossAxisAlignment.end 구조에서 버튼 폭을 0.9 * screenWidth로 확장하면, 패딩/마진이 없는 상황에서 우측이 화면을 초과해 Overflow 경고가 발생할 수 있습니다. 실제 기기에서 Edge-case(가로 360 px 이하) 테스트를 권장드립니다.