[Feat-T3-68] 온보딩 UI 구현

[choijungp]

🌁 Background

온보딩 화면을 구성하고, 사용자 선택 기반으로 결과와 추천 루틴까지 보여주는 로직을 구현하였습니다.

text로 온보딩 결과를 보여주는 것까지는 클라이언트 단에서 해야 하는 일이고,
그에 따른 추천 루틴을 받는 일은 서버로부터 받아야 합니다. (다만 아직 서버 구현이 되어 있지 않아 임의의 값을 넘겨주도록 했습니다.)

이번 PR에서는 전체적인 UI 흐름과 선택 과정을 봐주시면 감사하겠습니다.

📱 Screenshot

온보딩 1: 시간대 선택

iPhone SE3	iPhone 13 mini	iPhone 16 Pro

온보딩 2: 외출 빈도 선택

iPhone SE3	iPhone 13 mini	iPhone 16 Pro

온보딩 3: 원하는 감정 선택

iPhone SE3	iPhone 13 mini	iPhone 16 Pro

온보딩 4: 외출 목표 선택

iPhone SE3	iPhone 13 mini	iPhone 16 Pro

온보딩 5: 온보딩 결과 화면

iPhone SE3	iPhone 13 mini	iPhone 16 Pro

온보딩 5: 선택된 온보딩 기준 추천 루틴 화면

iPhone SE3	iPhone 13 mini	iPhone 16 Pro

전체 로직 흐름

👩‍💻 Contents

• GradientProgressView UI 구현: 온보딩 단계별 진행 상황
  • UIViewController extension에서 해당 진행률을 navigationItem의 titleView에 보여지도록 했습니다.
• OnboardingChoiceButton UI 구현: 온보딩 선택 버튼
  • OnboardingChoiceProtocol를 채택한 모든 타입에서 해당 UI를 사용할 수 있도록 했습니다.
  • 현재는 온보딩 선택지 및 추천 루틴 선택에 재사용됩니다.
• OnboardingView UI 구현: 온보딩 화면
  • 시간대, 외출 빈도, 감정, 외출 목표 온보딩 선택 시에 필요한 모든 View에 재사용됩니다.
• OnboardingResultView UI 구현: 온보딩 결과 화면
  • 선택한 온보딩 선택 결과를 기반으로 요약 화면을 보여줍니다.
  • 3초 뒤에 추천 루틴 화면으로 이동합니다.
• RecommendedRoutineView UI 구현: 온보딩 선택 결과 기반 추천 루틴 화면
  • 온보딩 결과를 바탕으로 추천 루틴 보여줍니다.
  • 피그마 상에서 추후 다른 플로우에서도 재사용될 것 같습니다.
• OnboardingViewModel 구현: 각 온보딩 단계의 로직을 분리하고, 관련 Subject 및 함수들을 정의해 상태를 관리합니다.

✅ Testing

• 현재는 서버 API가 구현되어 있지 않아 사용자 인터랙션 위주의 테스트만을 진행하였습니다.

• 시간대, 외출 빈도, 외출 목표의 경우 1개의 선택지만 선택 가능합니다.

• 감정, 추천 루틴의 경우 중복 선택이 가능합니다.

• 온보딩 선택지에 따른 결과 Text를 확인해보았습니다.

📝 Review Note

SE 기기 대응

• 온보딩 화면에서 SE의 경우 화면이 꽉차는 이슈가 있었습니다.
• 피그마 코멘트에서도 확인할 수 있듯이 그럴 경우 mainLabel 상단을 조정해달라는 요청이 있어서 해당 부분을 다음과 같이 구현하였습니다.
• 화면 높이가 작은 디바이스(667pt)를 기준으로 상단 여백을 계산하도록 했습니다.
• 혹시 더 좋은 방법이 있다면 추천해주세요.

static var mainLabelTopSpacing: CGFloat {
    let height = UIScreen.main.bounds.height
    if height <= 667 { return 12 }
    else { return 32 }
}

ProgressBarView의 intrinsicContentSize

• ProgressBarView에 보면 intrinsicContentSize가 정의되어 있습니다.
• ProgressBarView는 navigationItem의 titleView로 대체하게 구현했는데 titleView는 오토레이아웃 시스템과 별도로 작동하여 superView와의 제약을 통한 크기 결정이 자동으로 이루어지지 않습니다.
• 따라서 확실하게 보여지는 값 400을 기준으로 intrinsicContentSize를 잡아주었습니다.

override var intrinsicContentSize: CGSize {
    return CGSize(width: Layout.maxWidth, height: Layout.barHeight)
}

온보딩 감정 선택지 Set vs Array

• 현재 감정 선택지에 대한 값을 Set으로 저장하고 관리하고 있습니다.
• 다만 이럴 경우, 온보딩 선택 결과를 보여줄 때 Set이면 순서 보장이 되지 않아 항상 동일한 순서로 선택된 감정을 보여주기 어렵습니다.
• 비효율적이여도 사용자를 위해 Array로 보여줄지, 아니면 Set도 크게 상관 없을지 고민이 됩니다.

private let feelingOnboardingChoiceSubject = CurrentValueSubject<Set<OnboardingChoiceType>, Never>([])

📣 Related Issue

• close #T3-68

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

✨ Finishing Touches

🧪 Generate unit tests

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch feat/onboarding

---

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

🪧 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 auto-generate unit tests to generate unit tests for 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 or @coderabbitai 요약 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.

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.

[generalban]

온보딩 UI 구현 정말 깔끔하게 잘하셨네요! 수고하셨습니다!