[Feat-T3-86] 인트로 · 로그인 · 이용 약관 UI 구현 및 로직 정리 by choijungp · Pull Request #16 · YAPP-Github/Bitnagil-iOS

choijungp · 2025-07-08T08:34:15Z

🌁 Background

로그인 기능을 완성하기 위해 해당 작업을 진행하였습니다.
업데이트된 디자인 시스템을 반영하고, 인트로 > 로그인 > 약관 동의 화면을 구현하였습니다.

기존에 LoginViewModel에 구현되어 있던 로그아웃, 탈퇴, 토큰 재발급 기능을 제거했습니다.
(하지만 UseCase는 남아있으니 필요한 view에서 사용할 수 있음)

📱 Screenshot

온보딩 UI 구현하면서 인트로, 약관 동의 화면 Label 색상 변경해야 하는 것을 깨달았습니다 .. 😅
Label 수정 커밋 에서 수정해서 푸시했습니다 !!

색상때문에 다시 캡쳐하긴 번거로워서 해당 사항 감안해주시길 바랍니다.. ㅠㅠ !!

인트로

iPhone SE3	iPhone 13 mini	iPhone 16 Pro

로그인

iPhone SE3	iPhone 13 mini	iPhone 16 Pro

약관 동의 (선택 X)

iPhone SE3	iPhone 13 mini	iPhone 16 Pro

약관 동의 (선택 O)

iPhone SE3	iPhone 13 mini	iPhone 16 Pro

전체 로직 흐름

Simulator.Screen.Recording.-.iPhone.16.Pro.-.2025-07-08.at.17.21.16.mp4

👩‍💻 Contents

디자인 시스템 정리

Figma 상에 존재하는 Color 에셋 추가 및 BitnagilColor에 정의
BitnagilFont 수정 (enum -> struct로 .. review note 참고)

로그인 흐름 UI 구현

IntroView : 인트로 화면
LoginView : 로그인 화면
TermsAgreementView : 이용 약관 동의 화면
PrimaryButton 컴포넌트 구현 (재사용 가능)

이용 약관 로직 구현

기존 /login 응답으로 받던 response 값에 role이 추가됨에 따라 기존 TokenResponse를 LoginResponse로 수정
AuthEndpoint에 agreements 케이스 추가
AuthRepositoryProtocol 및 AuthRepository에 submitAgreement 정의 및 구현
LoginUseCaseProtocol 및 LoginUseCase에 submitAgreement 정의 및 구현
LoginViewModel에 이용 약관 동의 로직 추가

✅ Testing

UI에 기능을 붙이면서 기존 구현해놨던 로그인 과정과 이용 약관 흐름을 테스트 해봤습니다.
우선 소셜 로그인을 통해 로그인을 하면 User는 guest 권한을 부여받습니다.

이후 약관 동의하여 해당 항목들을 서버로 보냅니다.
현재는 온보딩 뷰가 없어 응답 값을 확인하여 해당 로직이 잘 처리되었는지 확인했습니다.

📝 Review Note

디자인 시스템 개선

이전 디자인 시스템 PR에서는 그레이 색상과 폰트만 정리되어 있었습니다.
이번 PR에서는 피그마에 정의된 모든 색상들과 폰트들을 정리했습니다.
특히 폰트 정리하면서 기존 Enum으로 정리되어 있던 BitnagilFont를 struct로 수정해야 했습니다.
- 기존에는 Enum에 static 변수로 선언하였지만, 현재 피그마에 반영된 폰트는 하나의 style (ex. Headline1)이 각각 다른 weight을 가지고 있을 수 있도록 변경되었습니다.
- 따라서 FontStyle, FontAttributes, FontWeight 등의 enum을 정리해놓고, BitnagilFont에서 사용할 수 있도록 수정하였습니다.
- 완성된 View에서 폰트 사용 예시를 확인할 수 있습니다.

서브 뷰에 Delegate 사용

이용 약관 View를 서브 뷰로 구현하여 재사용하기 위해 TermsAgreementItemView를 구현하였습니다.
다만 TermsAgreementItemView에서 사용자 입력 처리가 2개가 될 수 있습니다. (체크 박스, 더보기 버튼)
따라서 TermsAgreementItemViewDelegate를 구현하여 처리하였습니다.
혹시 Delegate 외에 여러 사용자 입력 처리를 할 수 있는 방법이 있다면 알려주세요!
다른 재사용 컴포넌트(PrimaryButton, SocialLoginButton)는 UIButton으로 구현하여 ViewController에서 addAction을 처리할 수 있도록 구현하였습니다.

서버 응답의 User 권한에 따른 분기 처리
또한 로그인 요청을 보내면 서버로부터 유저 권한을 확인한 후 이용 약관 vs 온보딩을 처리해야 합니다.
서버로부터 온 응답이 .guest라면 이용 약관 view를 타야 하고, 그렇지 않으면 (.user) 온보딩 화면을 타야 합니다.

다만 현재 PR이 길어질 것 같아 상황은 인지한 채로 온보딩 로직 구현하면서 분기 처리를 진행하겠습니다.

📣 Related Issue

close #T3-86

- Figma 디자인 시스템에 정의된 색상 값 Asset 추가 - 그에 따른 BitnagilColor 변수 추가 - Bundle을 해당 모듈에서 찾을 수 있도록 코드 변경

- 기존 Enum으로 정리된 BitnagilFont에서 Struct로 변경하여 weight 값에 따른 폰트를 받을 수 있도록 수정 - FontAttributes, FontStyle, FontWeight 등 폰트 정의에 필요한 enum 및 struct 정의

- apple, kakao, check icon 이미지 추가 - BitnagilIcon Enum 정의

- PrimaryButton Component 구현 - IntroView 구현

- IntroView UI 구현 - SceneDelegate 앱 진입점 수정

- LoginView UI 구현 - SocialLoginButton Component 구현 (카카오, 애플)

- TermAgreementItemView 컴포넌트 구현 - TermAgreementView UI 구현 - LoginViewModel과 로직 구현

- 기존 TokenResponseDTO에서 LoginResponseDTO로 수정 (서버 응답에 User의 role이 추가되었음) - AuthEndpoint에 agreements 케이스 추가 - AuthRepositoryProtocol 및 AuthRepository에 submitAgreements 정의 및 구현 - LoginUseCaseProtocol 및 LoginUseCase에 submitAgreements 정의 및 구현 - LoginViewModel에 submitAgreement 로직 구현

coderabbitai · 2025-07-08T08:34:23Z

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/login-view

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

🪧 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

훌륭한 코드에요 이 정도면 체크만 하고 바로 머지해도 될 것 같습니다~

generalban · 2025-07-08T13:54:38Z

+        static let horizontalMargin: CGFloat = 20
+        static let labelTopSpacing: CGFloat = 54
+        static let graphViewTopSpacing: CGFloat = 38
+        static let graphViewBottomSpacing: CGFloat = 64
+        static let startButtonBottomSpacing: CGFloat = 20
+        static let startButtonHeight: CGFloat = 54


다양한 디바이스 크기에 대응하기 어려울 수도 있을것 같아요. adaptive layout 고려 해볼 수도 있을 것 같습니닷.

넵! 현재 Se3 스크린샷으로 봤을 때에는 큰 문제가 없을 것 같습니다.
추후 고정된 값으로 화면이 안보여서 유연한 값이 필요한 상황이 온다면 디자이너와 협의해서 수정해보겠습니다.

generalban · 2025-07-08T13:58:25Z

+    private let socialType: SocialType
+    private let stackView = UIStackView()
+    private let iconImageView = UIImageView()
+    private let buttonLable = UILabel()


buttonLabel인가용?

choijungp added 11 commits July 7, 2025 17:42

Chore: 디자인 시스템 색상 Color Asset 추가 및 BitnagilColor 변수 값 추가

ac75de9

- Figma 디자인 시스템에 정의된 색상 값 Asset 추가 - 그에 따른 BitnagilColor 변수 추가 - Bundle을 해당 모듈에서 찾을 수 있도록 코드 변경

Chore: 디자인 시스템 폰트 정리

ee0667e

- 기존 Enum으로 정리된 BitnagilFont에서 Struct로 변경하여 weight 값에 따른 폰트를 받을 수 있도록 수정 - FontAttributes, FontStyle, FontWeight 등 폰트 정의에 필요한 enum 및 struct 정의

Chore: 디자인 시스템 icon 이미지 Asset 추가

40fe61c

- apple, kakao, check icon 이미지 추가 - BitnagilIcon Enum 정의

Feat: IntroView 구현 (#T3-86)

96d05a6

- PrimaryButton Component 구현 - IntroView 구현

Feat: LoginView UI 구현 및 로직 수정 (#T3-86)

2302a1b

Refactor: 로그인 서버 통신 관련 AuthRepository 및 LoginUseCase 수정

6529ad4

Feat: IntroView UI 구현 (#T3-86)

f884132

- IntroView UI 구현 - SceneDelegate 앱 진입점 수정

Feat: LoginView UI 구현 (#T3-86)

187c9b0

- LoginView UI 구현 - SocialLoginButton Component 구현 (카카오, 애플)

Feat: 이용 약관 동의 UI 구현 (#T3-86)

b7776d1

- TermAgreementItemView 컴포넌트 구현 - TermAgreementView UI 구현 - LoginViewModel과 로직 구현

Feat: UIViewController extension에 공통 backbutton을 사용할 수 있도록 커스텀

179fb17

choijungp requested a review from generalban July 8, 2025 08:34

choijungp self-assigned this Jul 8, 2025

Fix: IntroView, TermsAgreementView에 Label 색상 적용

a6c5b34

generalban approved these changes Jul 8, 2025

View reviewed changes

Refactor: label 오타 수정

18d89c2

choijungp merged commit ce78550 into develop Jul 8, 2025
2 checks passed

choijungp deleted the feat/login-view branch July 8, 2025 14:09

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

[Feat-T3-86] 인트로 · 로그인 · 이용 약관 UI 구현 및 로직 정리#16

[Feat-T3-86] 인트로 · 로그인 · 이용 약관 UI 구현 및 로직 정리#16
choijungp merged 13 commits into
developfrom
feat/login-view

choijungp commented Jul 8, 2025 •

edited

Loading

Uh oh!

coderabbitai Bot commented Jul 8, 2025

Review skipped

Chat

Support

CodeRabbit Commands (Invoked using PR comments)

Other keywords and placeholders

Documentation and Community

Uh oh!

generalban left a comment

Uh oh!

generalban Jul 8, 2025

Uh oh!

choijungp Jul 8, 2025

Uh oh!

generalban Jul 8, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Conversation

choijungp commented Jul 8, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🌁 Background

📱 Screenshot

👩‍💻 Contents

✅ Testing

📝 Review Note

📣 Related Issue

Uh oh!

coderabbitai Bot commented Jul 8, 2025

Review skipped

Chat

Support

CodeRabbit Commands (Invoked using PR comments)

Other keywords and placeholders

Documentation and Community

Uh oh!

generalban left a comment

Choose a reason for hiding this comment

Uh oh!

generalban Jul 8, 2025

Choose a reason for hiding this comment

Uh oh!

choijungp Jul 8, 2025

Choose a reason for hiding this comment

Uh oh!

generalban Jul 8, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

choijungp commented Jul 8, 2025 •

edited

Loading