20251208 #383 기능개선 온보딩 온보딩페이지 간격 수정

[SeoHyun1024]

#383

Summary by CodeRabbit

Style

• 온보딩 화면의 UI 간격 및 패딩을 조정하여 안전 영역 처리를 개선했습니다.
• 카테고리 선택, 위치 인증, 약관 동의 화면의 레이아웃을 최적화하여 시각적 밸런스를 향상시켰습니다.
• 세부 정보 보기 아이콘을 변경했습니다.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

Walkthrough

온보딩 화면 세 개의 UI 레이아웃과 스타일을 조정합니다. 상단 간격을 줄이고 하단 패딩을 증가시키며, 칩 보더 렌더링을 변경하고, 완료 버튼을 CompletionButton으로 교체하고, 아이콘을 변경합니다. 비즈니스 로직은 수정되지 않습니다.

Changes

Cohort / File(s)	Summary
카테고리 선택 화면 lib/screens/onboarding/category_selection_step.dart	상단 간격을 32.h에서 1.h로 축소; 완료 버튼 하단 패딩을 48.h에서 63.h + 기기 하단 패딩으로 증가; 칩 보더 스트로크 정렬을 내부에서 외부로 변경
위치 인증 화면 lib/screens/onboarding/location_verification_step.dart	completion_button.dart 임포트 추가; 맵 영역 flex 341→350, 정보 영역 flex 370→285로 조정; 세로 간격 조정 (32→20, 20→16); 기존 텍스트 버튼을 CompletionButton으로 교체; setLocationTrackingMode 호출 방식 간결화
약관 동의 화면 lib/screens/onboarding/term_agreement_step.dart	버튼 하단 패딩을 48.h에서 63.h + 기기 하단 패딩으로 증가; AppIcons.dotsVertical을 AppIcons.detailView로 변경 (2회)

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

• CompletionButton 위젯 교체: location_verification_step에서 기존 TextButton을 새로운 완료 버튼으로 교체한 부분 확인 필요
• 반복적인 패딩/간격 조정: 세 개 파일 모두에서 유사한 레이아웃 조정이 적용되므로 일관성 검증 필요
• 아이콘 변경: term_agreement_step에서 아이콘 교체 의도 및 동작 확인

Possibly related issues

• 🚀 [기능개선][온보딩] 온보딩페이지 간격 수정 #383: 카테고리 칩 보더 strokeAlign 변경, 확인 버튼 하단 패딩 조정, 맵/간격 레이아웃 수정이 모두 일치함
• 🔍 [시험요청][온보딩] 온보딩페이지 간격 수정 #386: 온보딩 화면 간격 및 패딩 수정이 관련 이슈의 목표와 직접 일치함

Possibly related PRs

• 서비스 이용약관 페이지 추가 #113: 동일한 term_agreement_step.dart 파일을 수정하며 완료 버튼/아이콘 사용과 관련됨
• 온보딩 이용약관 동의 화면 완료시 api 연동 필요 #119: 동일한 term_agreement_step.dart 파일의 레이아웃, 하단 패딩, 버튼 교체 (TextButton→CompletionButton) 변경과 일치함
• 온보딩 UI 변경 헤더 통일화 필요  #111: location_verification_step.dart 파일을 수정하며 완료 버튼 교체 변경과 관련됨

Poem

🐰 한 번 건넛뛰기 ✨

간격 줄이고 패딩 늘리며,
버튼들을 예쁘게 새 옷입히고,
아이콘도 살짝 바꿔 단장하니,
온보딩 화면이 반짝반짝~ 🌟

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	PR 제목이 변경 사항의 주요 내용을 명확하게 설명하고 있습니다: 온보딩 페이지의 간격 수정
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch 20251208_#383_기능개선_온보딩_온보딩페이지_간격_수정

---

📜 Recent review details

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 893aa29 and 1186ecc.

⛔ Files ignored due to path filters (1)

• pubspec.lock is excluded by !**/*.lock

📒 Files selected for processing (3)

• lib/screens/onboarding/category_selection_step.dart (3 hunks)
• lib/screens/onboarding/location_verification_step.dart (6 hunks)
• lib/screens/onboarding/term_agreement_step.dart (2 hunks)

🧰 Additional context used

📓 Path-based instructions (1)

**/*.dart

📄 CodeRabbit inference engine (CLAUDE.md)

**/*.dart: Use CustomTextStyles for all text styling in Flutter widgets - never define TextStyle directly
Use AppColors for all color values - never use direct Color codes or Colors constants
Use the team's common extension method context.navigateTo() for screen navigation to support iOS swipe gesture handling

Files:

• lib/screens/onboarding/term_agreement_step.dart
• lib/screens/onboarding/category_selection_step.dart
• lib/screens/onboarding/location_verification_step.dart

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

• GitHub Check: 프로젝트 빌드 테스트

🔇 Additional comments (10)

lib/screens/onboarding/term_agreement_step.dart (2)

237-244: 안전 영역 지원이 적절하게 구현되었습니다.

하단 패딩이 기기의 안전 영역을 고려하여 조정되었으며, 다른 온보딩 화면들과 일관성 있게 적용되었습니다.

---

310-315: 아이콘 변경이 의미적으로 더 적절합니다.

상세 보기 버튼의 아이콘을 dotsVertical에서 detailView로 변경하여 기능을 더 명확하게 표현합니다.

lib/screens/onboarding/category_selection_step.dart (3)

35-35: 상단 간격 축소가 레이아웃 개선에 효과적입니다.

상단 여백을 32.h에서 1.h로 대폭 줄여 카테고리 칩 영역에 더 많은 공간을 할당했습니다.

---

44-46: 안전 영역 지원이 일관되게 적용되었습니다.

다른 온보딩 화면들과 동일한 패턴으로 하단 패딩이 조정되었습니다.

---

117-125: 칩 보더 렌더링 방식이 변경되었습니다.

보더가 외부에 그려지도록 변경되어 칩의 실제 크기가 약간 증가할 수 있습니다. 다양한 기기에서 칩들이 의도한 대로 배치되는지 시각적으로 확인해 주세요.

lib/screens/onboarding/location_verification_step.dart (5)

11-11: CompletionButton 도입으로 버튼 UI가 표준화되었습니다.

다른 온보딩 화면들과 일관된 완료 버튼 컴포넌트를 사용합니다.

---

50-50: 맵과 정보 영역의 비율이 조정되었습니다.

맵 영역이 확장(341→350)되고 정보 영역이 축소(370→285)되어 화면 비율이 재조정되었습니다.

Also applies to: 98-98

---

73-75: 코드 가독성이 개선되었습니다.

setLocationTrackingMode 호출이 적절한 들여쓰기와 포맷팅으로 정리되었습니다.

Also applies to: 85-87

---

104-123: 간격과 패딩이 일관되게 조정되었습니다.

여러 간격 값들이 조정되어 더 조화로운 레이아웃을 구성합니다.

---

124-135: CompletionButton으로 교체되어 일관성이 향상되었습니다.

기존 TextButton을 CompletionButton으로 교체하고 안전 영역을 고려한 패딩을 적용했습니다.

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[github-actions]

✅ 프로젝트 빌드 성공

APK 빌드가 완료되었습니다.