26. 기본 UI 구현하기 #9

기본 UI 구현하기 #9
프로필 수정 버튼 표시하기

---

ProfileView에는 EditProfile 버튼이 존재한다.
지금은 본인의 Profile인지 상대방의 Profile인지 구분 없이 Edit Profile을 표시하지만,
이 둘을 구분해 Follow 버튼으로 치환해 표시할 수 있도록 구현해 본다.

class ProfileViewModel: ObservableObject {
    @Published var tweets = [Tweet]()
    @Published var likedTweets = [Tweet]()

    private let service = TweetService()
    private let userService = UserService()

    let user: User

    init(user: User) {
        self.user = user
        self.fetchUserTweets()
        self.fetchLikedTweets()
    }

ProfileView는 표시할 사용자를 파라미터로 받아 생성자 단계에서 부터 사용한다.
따라서 지금 로그인된 계정인지 확인하는 단계는 더 앞인 User Model이 선언되는 시점에 진행돼야 한다.

프로필 수정 버튼 표시하기
| User Model

before

import FirebaseFirestoreSwift

struct User: Identifiable, Codable {
    @DocumentID var id: String?
    let username: String
    let fullname: String
    let profileImageUrl: String
    let email: String
}

User Model은 할당되는 시점에 타인의 계정인지 확인하는 절차가 존재해야 한다.

after

import FirebaseFirestoreSwift
import Firebase

struct User: Identifiable, Codable {
    @DocumentID var id: String?
    let username: String
    let fullname: String
    let profileImageUrl: String
    let email: String

    var isCurrentUser: Bool {
        return Auth.auth().currentUser?.uid == id
    }
}

Firebase Auth를 사용하기 위해 Firebase를 추가적으로 import 해 주고,
isCurrentUser 변수를 하나 정의해 currentUserdml uid와 지금 할당하려는 사용자의 id를 비교해
다르면 타인의 계정으로 표시한다.

프로필 수정 버튼 표시하기
| ProfileViewModel > actionButtonTitle

var actionButtonTitle: String {
    return user.isCurrentUser ? "Edit Profile" : "Follow"
}

이후에는 간단하다.
user로 바인딩된 User의 isCurrentUser  플래그를 사용해 버튼의 이름을 다르게 지정하면 될 뿐이다.

프로필 수정 버튼 표시하기
| ProfileView

before

Button {

} label: {
    Text("Edit Profile")
        .font(.subheadline).bold()
        .frame(width: 120, height: 32)
        .overlay {
            RoundedRectangle(cornerRadius: 20)
                .stroke(Color.gray, lineWidth: 0.75)
        }
}

after

Button {

} label: {
    Text(viewModel.actionButtonTitle)
        .font(.subheadline).bold()
        .frame(width: 120, height: 32)
        .overlay {
            RoundedRectangle(cornerRadius: 20)
                .stroke(Color.gray, lineWidth: 0.75)
        }
}

ProfileViewModel의 actionButtonTitle을 연동해 표시하면 완료다.

결과