[TNT-158] 트레이너 회원가입 UI 및 네비게이션 구현 #30

syss220211 · 2025-01-24T10:22:56Z

📌 What is the PR?

회원가입 피처 중 트레이너의 회원가입 플로우를 구현하였습니다.
네비게이션을 구현해보았습니다...

🪄 Changes

트레이너 회원가입 플로우 중 트레이너 단독 화면들의 플로우를 구현하였습니다.
API 연결 전, 기본 네비게이션 작업은 완료하였고, 해당 PR 머지 후 트레이니 화면과 네트워크 코드 풀 받아서 이어서 작업할 예정입니다!
Button 관련하여 변경사항 팔로업 (있었는데 제가 확인을 못했던거 같아요. 사이즈 및 padding값이 변경되었더라구요)
TNavigation에 새로운 케이스 추가 (RTitleButton+CenterTitle)

~~초기 온보딩(로그인)화면을 구현하였습니다.~~
~~이용 약관 화면을 구현하였습니다.~~
~~트레이너 프로필 생성 완료, 트레이너 초대코드 생성, 트레이너 연결 완료 화면의 UI를 구현하였습니다.~~
~~화면 별 Feature는 아직 틀만 만들었습니다.~~
~~제가 작업한 뷰에서 트레이너, 트레이니가 공통적으로 사용하는 화면은 Presentation하위 Sources > Onboarding > Common에 추가하였습니다.~~
온보딩의 네비게이션을 작업하였습니다.(SignFeature) 우선은 TCA 튜토리얼 기반으로 학습한 내용으로 구현해보았는데 이런 방향성과 해당 방법이 맞는지 확인부탁드립니다 ㅎ.ㅎ...

🌐 Common Changes

🔥 PR Point

public enum Action: ViewAction {
        case view(View)
        case move(MoveAction)
        case path(StackActionOf<Path>)
        
        @CasePathable
        public enum View: Equatable {
            case tappedAppleLogin
            case tappedKakaoLogin
        }
        
        @CasePathable
        public enum MoveAction: Equatable {
            case toTermview // 약관 동의 화면으로 이동
            case toselectRole // 역할 선택화면으로 이동
            
            /// 트레이너
            case toRegisterNickname
            case toCompleteSignup
            case toMakeInvitationCode
            
            /// 트레이니
            case toRegisterUserInfo
            case toRegisterPtPurpose
            case toRegisterprecautions
            case toRegisterInvitationCode
            case toRegisterPtClassInfo
        }
        
case let .view(view):
                switch view {
                case .tappedAppleLogin:
                    return .none
                case .tappedKakaoLogin:
                    return .none
                }
            case let .move(move):
                switch move {
                case .toTermview:
                    state.path.append(.term)
                    return .none
                case .toselectRole:
                    state.path.append(.selectRole)
                    return .none
                case .toRegisterNickname:
                    state.path.append(.registerNickname)
                    return .none
                case .toCompleteSignup:
                    state.path.append(.completeSignup(TrainerSignUpCompleteFeature.State()))
                    return .none
                case .toMakeInvitationCode:
                    state.path.append(.makeInvitationCode(MakeInvitationCodeFeature.State()))
                    return .none
                default:
                    return .none
                }

📸 Screenshot

기능	스크린샷
GIF

🙆🏻 To Reviewers

TCA와 관련하여.. 많은 피드백 미리 감사드립니다 ...
Feature 를 컨벤션에 맞춰서 수정했습니다만.. 잘못 정의한 부분이 있는지 한번 확인 부탁드립니다!

💭 Related Issues

Resolved: [TNT-158] 트레이너 회원가입 플로우 작성 #25

애플, 카카오 아이콘 추가

- UI 수정 부분 반영 - Button 관련하여 변경사항 팔로업 (있었는데 제가 확인을 못했나봄) - TNavigation에 새로운 케이스 추가 (RTitleButton+CenterTitle) - 복사 후 ToastMessag 적용 전, API 연결 전

FpRaArNkK

고생많으셨습니다!
몇가지 코멘트 남겨놓았는데 확인 부탁드려요!

FpRaArNkK · 2025-01-26T07:07:35Z

TnT/Projects/Presentation/Sources/Onbarding/Common/OnboardingFeature.swift

+        /// 기존 ViewAction을 Root임을 고려하여 MoveAction으로 구현하였습니다.
+        case move(MoveAction)


좋네요! 👍👍

FpRaArNkK · 2025-01-26T07:08:56Z

TnT/Projects/Presentation/Sources/Onbarding/Common/OnboardingView.swift

+
+                Spacer()
+
+                Image(.imgOnboardingLogin)


해당 이미지는 별도 설정 없어도 괜찮을까요??

있는게 맞는것 같습니다. 추가할게요!!

FpRaArNkK · 2025-01-26T07:11:55Z

TnT/Projects/Presentation/Sources/Onbarding/Common/TermView.swift

+public enum Term: CaseIterable {
+    case term
+    case personalInfo
+
+    var id: Int {
+        switch self {
+        case .term:
+            return 0
+        case .personalInfo:
+            return 1
+        }
+    }
+
+    var title: String {
+        switch self {
+        case .term:
+            return "(필수)서비스 이용약관 동의"
+        case .personalInfo:
+            return "(필수)개인정보 처리방침 동의"
+        }
+    }
+
+    var url: String {
+        switch self {
+        case .term:
+            return ""
+        case .personalInfo:
+            return ""
+        }
+    }
+}


Reducer에서도 같이 사용되는 개념인데, 위치를 바꿔주면 더 좋을 것 같아요!

FpRaArNkK · 2025-01-26T07:15:15Z

TnT/Projects/Presentation/Sources/Onbarding/Common/TermView.swift

+    private func termList(term: Term, isAgreed: Bool, toggle: @escaping (Bool) -> Void) -> some View {
+        HStack(spacing: 8) {
+            Image(isAgreed ? .icnCheckButtonSelected : .icnCheckButtonUnselected)
+                .resizable()
+                .frame(width: 24, height: 24)
+                .onTapGesture {
+                    toggle(isAgreed)
+                }
+
+            Text(term.title)
+                .typographyStyle(.body2Medium, with: .neutral500)
+
+            Spacer()
+
+            Text("보기")
+                .typographyStyle(.body2Medium, with: .neutral300)
+                .onTapGesture {
+                    if let url = URL(string: term.url) {
+                        UIApplication.shared.open(url)
+                    }
+                }
+        }
+    }
+}


해당 뷰아이템에 대해서 ForEach로 추가되는 아이템이니
섹션의 느낌이 나는 TermList보다는 TermListItem의 네이밍은 어떨까요?
TermListItem ∈ TermList 처럼요!

굿굿 애매하다 싶었는데 바꿔놓겠습니다

FpRaArNkK · 2025-01-26T07:17:46Z

TnT/Projects/Presentation/Sources/Onbarding/Trainer/Login/Code/MakeInvitationCodeView.swift

+import SwiftUI
+import DesignSystem
+import ComposableArchitecture


모듈 친구는 한줄 띄워서 아래로 맞춰주세요!
뷰 작성 컨벤션

...ts/Presentation/Sources/Onbarding/Trainer/Login/Connection/ConnectedTraineeProfileView.swift

FpRaArNkK · 2025-01-26T09:28:37Z

TnT/Projects/DesignSystem/Sources/DesignSystem/Image+DesignSystem.swift

+    static let icKakao: ImageResource = DesignSystemAsset.icnKakao.imageResource
+    static let icApple: ImageResource = DesignSystemAsset.icnApple.imageResource


icn 컨벤션 맞춰주세요!
asset 컨벤션

FpRaArNkK · 2025-01-26T09:34:58Z

...ts/Presentation/Sources/Onbarding/Trainer/Login/Connection/ConnectedTraineeProfileView.swift

+    @ViewBuilder
+    private func traineeProfileView(title: String, content: String) -> some View {
+        HStack(spacing: 12) {
+            Text(title)
+                .typographyStyle(.body2Bold, with: .neutral950)
+            Text(content)
+                .typographyStyle(.body2Medium, with: .neutral500)
+        }
+    }
+
+    @ViewBuilder
+    private func traineeInfoView(content: String, type: Info) -> some View {
+        VStack(spacing: 7) {
+            Text(type.rawValue)
+                .typographyStyle(.body1Bold, with: .neutral900)
+                .frame(maxWidth: .infinity, alignment: .leading)
+
+            Text(content)
+                .typographyStyle(.label1Medium, with: .neutral800)
+                .frame(height: type == .caution ? 128 : nil)
+                .frame(maxWidth: .infinity, alignment: .leading)
+                .padding(.init(top: 10, leading: 16, bottom: 10, trailing: 16))
+                .background(Color.neutral100)
+                .clipShape(RoundedRectangle(cornerRadius: 8))
+        }
+    }


섹션을 담당하지 않는 친구들은 extension으로 빼서, struct로 만들어주세요!
해당 코드에서 Item이란 의미를 확실하게 줄거에요.
뷰 작성 컨벤션

FpRaArNkK · 2025-01-26T09:37:29Z

...rojects/Presentation/Sources/Onbarding/Trainer/Login/Connection/ConnectionCompleteView.swift

+    @ViewBuilder
+    private func userProfileView(imgae: ImageResource, name: String) -> some View {
+        VStack(spacing: 12) {
+            Image(imgae)
+                .resizable()
+                .frame(width: 100, height: 100)
+                .scaledToFill()
+                .clipShape(Circle())
+
+            Text(name)
+                .typographyStyle(.body2Medium, with: .neutral300)
+                .frame(maxWidth: .infinity)
+        }
+        .frame(width: 100)
+    }


해당 친구도 섹션을 담당하는 것이 아닌 섹션을 구성하는 아이템이니 struct로 빼주세요!

FpRaArNkK · 2025-01-26T09:47:27Z

...rojects/Presentation/Sources/Onbarding/Trainer/Login/Connection/ConnectionCompleteView.swift

+import DesignSystem
+import ComposableArchitecture
+
+public struct ConnectionCompleteView: View {


View 상단에

@ViewAction(for: ConnectionCompleteFeature.self) public struct ConnectionCompleteView: View {

처럼 작성해주시고,

아래 내용들에서
store.send(.view(.tappedNextButton)) 대신
send(.tappedNextButton)으로 보내주세요!

훨씬 간단하면서, viewAction에 선언된 액션만 호출하게 제한할 수 있겠죠?

확인이요!

FpRaArNkK · 2025-01-26T10:12:19Z

...rojects/Presentation/Sources/Onbarding/Trainer/Login/Profile/TrainerSignUpCompleteView.swift

+        Spacer().frame(height: 80.5)
+
+        Text("만나서 반가워요\n김헬짱 트레이너님!")
+            .typographyStyle(.heading1, with: .neutral950)
+            .frame(maxWidth: .infinity)
+            .multilineTextAlignment(.center)
+            .padding(.horizontal, 24)
+
+        Text("트레이니와 함께\n케미를 터뜨려보세요! 🧨")
+            .multilineTextAlignment(.center)
+
+        Spacer().frame(height: 18)


단일 아이템으로 구성되지 않는 섹션의 경우,
VStack, HStack, ZStack, Group과 같이 묶어 해당 섹션이 어떤 레이아웃으로 아이템들이 표현되는지 작성해주시면
한 눈에 레이아웃을 파악하기 좋을 것 같아요!

syss220211

뷰컨벤션 관련해서 일괄 확인완료했습니다. 수정해서 반영해놓을게요!

...ts/Presentation/Sources/Onbarding/Trainer/Login/Connection/ConnectedTraineeProfileView.swift

syss220211 · 2025-01-26T10:36:49Z

...ts/Presentation/Sources/Onbarding/Trainer/Login/Connection/ConnectedTraineeProfileView.swift

+    @ViewBuilder
+    private func traineeProfileView(title: String, content: String) -> some View {
+        HStack(spacing: 12) {
+            Text(title)
+                .typographyStyle(.body2Bold, with: .neutral950)
+            Text(content)
+                .typographyStyle(.body2Medium, with: .neutral500)
+        }
+    }
+
+    @ViewBuilder
+    private func traineeInfoView(content: String, type: Info) -> some View {
+        VStack(spacing: 7) {
+            Text(type.rawValue)
+                .typographyStyle(.body1Bold, with: .neutral900)
+                .frame(maxWidth: .infinity, alignment: .leading)
+
+            Text(content)
+                .typographyStyle(.label1Medium, with: .neutral800)
+                .frame(height: type == .caution ? 128 : nil)
+                .frame(maxWidth: .infinity, alignment: .leading)
+                .padding(.init(top: 10, leading: 16, bottom: 10, trailing: 16))
+                .background(Color.neutral100)
+                .clipShape(RoundedRectangle(cornerRadius: 8))
+        }
+    }


syss220211 · 2025-01-26T10:39:01Z

...rojects/Presentation/Sources/Onbarding/Trainer/Login/Connection/ConnectionCompleteView.swift

+import DesignSystem
+import ComposableArchitecture
+
+public struct ConnectionCompleteView: View {


확인이요!

…158-trainerSignup

FpRaArNkK · 2025-01-26T14:15:04Z

TnT/Projects/Presentation/Sources/Onbarding/Trainer/Login/Code/MakeInvitationCodeFeature.swift

+    public enum Action: Equatable {
+        case setNavigation
+        case view(ViewAction)
+
+        public enum ViewAction {
+            case tappedNextButton
+            case tappedIssuanceButton
+            case copyCode
+        }
+    }


Action에 ViewAction 프로토콜 추가해주시고, 프로토콜과 이름이 겹치니
case view(View)로 작성해주세요!
Reducer 작성 컨벤션

FpRaArNkK · 2025-01-26T14:15:40Z

TnT/Projects/Presentation/Sources/Onbarding/Trainer/Login/Code/MakeInvitationCodeView.swift

+
+public struct MakeInvitationCodeView: View {


@ViewAction 달아주세요!

FpRaArNkK

굳! SNS 로그인 파이팅!

syss220211 added 3 commits January 24, 2025 16:12

[Feat] 기본 네비게이션 정의

4b47b83

애플, 카카오 아이콘 추가

[Feat] 트레이너 로그인 화면 구현

bdbb398

[Feat] 네비게이션 연결

cd0a83a

syss220211 requested a review from FpRaArNkK January 24, 2025 10:23

FpRaArNkK self-assigned this Jan 25, 2025

FpRaArNkK added the ✨Feat 새로운 기능 구현 (새로운 로직 추가, UI 구현 등) label Jan 25, 2025

FpRaArNkK assigned syss220211 and unassigned FpRaArNkK Jan 25, 2025

syss220211 and others added 5 commits January 25, 2025 12:02

[Refactor] TBotton 오류 수정

35a0f39

[Feat] 트레이너 회원가입 플로우 네비게이션 구현

1b0ec95

[Refactor] View 컨벤션에 맞춰 수정

f6135cd

Merge branch 'develop' into TNT-158-trainerSignup

3ee9e90

FpRaArNkK reviewed Jan 26, 2025

View reviewed changes

syss220211 commented Jan 26, 2025

View reviewed changes

syss220211 added 2 commits January 26, 2025 22:58

[Refactor] Review 피드백 반영

e505bb3

Merge remote-tracking branch 'origin/TNT-158-trainerSignup' into TNT-…

c637ba1

…158-trainerSignup

FpRaArNkK reviewed Jan 26, 2025

View reviewed changes

syss220211 added 2 commits January 26, 2025 23:56

[Refactor] ViewAction 추가 완료

d803967

[Fix] background 색상 오류 수정

0e3bbe9

FpRaArNkK approved these changes Jan 26, 2025

View reviewed changes

syss220211 merged commit efdbb1c into develop Jan 26, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[TNT-158] 트레이너 회원가입 UI 및 네비게이션 구현 #30

[TNT-158] 트레이너 회원가입 UI 및 네비게이션 구현 #30

syss220211 commented Jan 24, 2025 •

edited

Loading

FpRaArNkK left a comment

FpRaArNkK Jan 26, 2025

FpRaArNkK Jan 26, 2025 •

edited

Loading

syss220211 Jan 26, 2025

FpRaArNkK Jan 26, 2025

syss220211 Jan 26, 2025

FpRaArNkK Jan 26, 2025

syss220211 Jan 26, 2025

FpRaArNkK Jan 26, 2025

syss220211 Jan 26, 2025

FpRaArNkK Jan 26, 2025

FpRaArNkK Jan 26, 2025

syss220211 Jan 26, 2025

FpRaArNkK Jan 26, 2025

FpRaArNkK Jan 26, 2025 •

edited

Loading

syss220211 Jan 26, 2025

FpRaArNkK Jan 26, 2025 •

edited

Loading

syss220211 left a comment

syss220211 Jan 26, 2025

syss220211 Jan 26, 2025

FpRaArNkK Jan 26, 2025 •

edited

Loading

FpRaArNkK Jan 26, 2025

FpRaArNkK left a comment

		/// 기존 ViewAction을 Root임을 고려하여 MoveAction으로 구현하였습니다.
		case move(MoveAction)

		static let icKakao: ImageResource = DesignSystemAsset.icnKakao.imageResource
		static let icApple: ImageResource = DesignSystemAsset.icnApple.imageResource

[TNT-158] 트레이너 회원가입 UI 및 네비게이션 구현 #30

[TNT-158] 트레이너 회원가입 UI 및 네비게이션 구현 #30

Conversation

syss220211 commented Jan 24, 2025 • edited Loading

📌 What is the PR?

🪄 Changes

🌐 Common Changes

🔥 PR Point

📸 Screenshot

🙆🏻 To Reviewers

💭 Related Issues

FpRaArNkK left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

FpRaArNkK Jan 26, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

FpRaArNkK Jan 26, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

FpRaArNkK Jan 26, 2025 • edited Loading

Choose a reason for hiding this comment

syss220211 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

FpRaArNkK Jan 26, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

FpRaArNkK left a comment

Choose a reason for hiding this comment

syss220211 commented Jan 24, 2025 •

edited

Loading

FpRaArNkK Jan 26, 2025 •

edited

Loading

FpRaArNkK Jan 26, 2025 •

edited

Loading

FpRaArNkK Jan 26, 2025 •

edited

Loading

FpRaArNkK Jan 26, 2025 •

edited

Loading