PR 가이드라인

PR Checklist

PR 날릴 때 체크 리스트

[x] 코드 컨벤션을 잘 지키셨나요?
[x] 이슈 체크리스트를 잘 반영했나요?
[x] Conflict 문제가 발생하지는 않나요?

PR Type

어떤 종류의 PR인가요?

[ ] 버그 수정
[x] 새 기능 개발
[ ] 코드 스타일 변경
[x] 리팩토링
[ ] 문서 작업 변경
[ ] 기타 작업

연관되는 issue 정보를 알려주세요

Issue Number: #186 #164

PR 설명하기

이 PR에 대해 간략하게 소개해주세요!

어떻게 작동하나요? code 기반으로 설명해주세요

각각의 View는 알맞은 ViewModel을 가지고 있으며 기존 ViewModel을 분기 처리하여 넘겨주던 부분을 각각의 View가 가지고 있는 알맞은 ViewModel을 넘기도록 구현되었습니다. MyPageView는 MenuTabBar를 활용하여 MemoList를 보여주는 부분과 Memo Image Marker를 보여주는 각각의 View를 가지고 있습니다. 최대한 각각의 ViewModel을 넘기도록 하여 ProfileMemoList, ProfileMemoListCell를 재활용 하였습니다. (프로토콜 지향 패러다임의 장점 활용을 위하여)


struct MyPageView: View {
    @State var selected: Int = 2
    @State private var presentLoginAlert = false
    @State private var presentLoginView = false

    @ObservedObject var authViewModel: AuthService = .shared

    @ObservedObject var mypageViewModel: MypageViewModel = .init()

    @State var selectedIndex = 0

    var body: some View {
        ZStack(alignment: .top) {
            Color.bgColor.edgesIgnoringSafeArea(.top)

            ScrollView(.vertical, showsIndicators: false) {
                VStack(alignment: .leading) {
                    // 로그인 되었다면 로직 실행
                    if let currentUser = authViewModel.currentUser, let userId = UserDefaults.standard.string(forKey: "userId") {
                        let isCurrentUser = authViewModel.userSession?.uid == userId

                        MypageTopView()
                        // 하나씩 추가해서 탭 추가, spacin......g, horizontalInset 늘어나면 값 수정 필요
                        MenuTabBar(menus: [MenuTabModel(index: 0, image: "list.bullet.below.rectangle"), MenuTabModel(index: 1, image: "newspaper")],
                                   selectedIndex: $selectedIndex,
                                   fullWidth: UIScreen.main.bounds.width,
                                   spacing: 50,
                                   horizontalInset: 91.5)
                        .padding(.horizontal)
                        switch selectedIndex {
                        case 0:
                            createHeader()
                            ProfileMemoList<MypageViewModel>().environmentObject(mypageViewModel)

                        default:
                            MapImageMarkerView<MypageViewModel>().environmentObject(mypageViewModel)

                        }

                    }
                    else {
                        showLoginPrompt()
                    }
                }

                .refreshable {
                    // Refresh logic
                }
                .padding(.horizontal, 14)
                .safeAreaInset(edge: .top) {
                    Color.clear.frame(height: 0).background(Color.bgColor)
                }
                .safeAreaInset(edge: .bottom) {
                    Color.clear.frame(height: 0).background(Color.bgColor).border(Color.black)
                }
            }
        }
        .onAppear {
            checkLoginStatus()
            authViewModel.fetchUser()

        }
        .alert("로그인 후에 사용 가능한 기능입니다.\n로그인 하시겠습니까?", isPresented: $presentLoginAlert) {
            Button("로그인 하기", role: .destructive) {
                self.presentLoginView = true
            }
            Button("둘러보기", role: .cancel) {
                // Handle '둘러보기' case
            }
        }
        .fullScreenCover(isPresented: $presentLoginView) {
            LoginView().environmentObject(authViewModel)
        }
        .overlay {
            if LoadingManager.shared.phase == .loading {
                LoadingView()
            }
        }
    }

    private func createHeader() -> some View {
        HStack(alignment: .lastTextBaseline) {
            Spacer()

            Button {
                mypageViewModel.isShowingOptions.toggle()
            } label: {
                Image(systemName: "slider.horizontal.3").foregroundStyle(Color.gray).font(.system(size: 24))
            }
            .confirmationDialog("정렬하고 싶은 기준을 선택하세요.", isPresented: $mypageViewModel.isShowingOptions) {
                ForEach(SortedTypeOfMemo.allCases, id: \.id) { type in
                    Button(type.rawValue) {
                        mypageViewModel.sortMemoList(type: type)
                    }
                }
            }
        }
        .padding(.top, 38)
    }

    private func showLoginPrompt() -> some View {
        VStack(alignment: .center) {
            Spacer()

            HStack {
                Spacer()
                Text("로그인이 필요해요!").font(.semibold20)
                Spacer()
            }

            Button {
                self.presentLoginView = true
            } label: {
                Text("로그인 하러가기")
            }

            Spacer()
        }
    }

    private func checkLoginStatus() {
        Task {
            if UserDefaults.standard.string(forKey: "userId") != nil {
                presentLoginAlert = false
            } else {
                presentLoginAlert = true
            }
        }
    }
}

OtherUserProfileView는 작성자의 프로필을 확인할 때 Detail 쪽에서 넘어올 때만 사용합니다. 기존에 MyPage를 계속 생성하여 무한 로딩되는 문제가 있었는데 #164 해당 문제를 해결하기 위해 내가 작성한 메모라도 otherUserViewModel를 타고 들어가서 로직들이 실행되며 단지 View를 구분하기 위해 TopView만 교체하여 팔로우, 팔로잉 대신 설정화면이 보이도록 분기 처리하였습니다. 그 외 로직은 같습니다.

enum SortedTypeOfMemo: String, CaseIterable, Identifiable {
    case last = "최신순"
    case like = "좋아요순"
    case close = "가까운순"

    var id: SortedTypeOfMemo { self }
}

struct OtherUserProfileView: View {
    @State private var presentLoginAlert = false
    @State private var presentLoginView = false

    @ObservedObject var authViewModel: AuthService = .shared
    @ObservedObject var otherUserViewModel: OtherUserViewModel = .init()

    @State var selectedIndex = 0

    // 생성자를 통해 @State를 만들수 있도록 fromDetail true면 상대방 프로필 가져오기
    init(memoCreator: User) {
        otherUserViewModel.fetchMemoCreatorProfile( memoCreator: memoCreator)
    }

    var body: some View {
        ZStack(alignment: .top) {
            Color.bgColor.edgesIgnoringSafeArea(.top)

            ScrollView(.vertical, showsIndicators: false) {
                VStack(alignment: .leading) {
                    // 로그인 되었다면 로직 실행
                    if let currentUser = authViewModel.currentUser, let userId = UserDefaults.standard.string(forKey: "userId") {
                        let isCurrentUser = authViewModel.userSession?.uid == userId

                        // 상대방 프로필을 표시할 때는 제네릭을 사용하여 OtherUserViewModel을 전달 MyPage를 표시할 때는 MypageViewModel 전달
                        if  otherUserViewModel.memoCreator.isCurrentUser == false  {
                            OtherUserTopView(memoCreator: $otherUserViewModel.memoCreator, viewModel: otherUserViewModel)
                            createHeader()

                            ProfileMemoList<OtherUserViewModel>().environmentObject(otherUserViewModel)
                        }
                        else {
                            MypageTopView()
                            createHeader()

                            ProfileMemoList<OtherUserViewModel>().environmentObject(otherUserViewModel)
                        }

                    }
                    else {
                        showLoginPrompt()
                    }
                }

            }

프로토콜 지향 패러다임의 장점 활용하여 각 ViewModel에서 중복되는 메서드들을 모았습니다.


import SwiftUI
import _PhotosUI_SwiftUI
import FirebaseAuth
import FirebaseCore
import FirebaseFirestore

protocol ProfileViewModelProtocol: ObservableObject {

    var merkerMemoList: [Memo] { get set } 
    var memoList: [Memo] { get set }
    var selectedFilter: SortedTypeOfMemo { get set }
    var isShowingOptions: Bool { get set }
    var isCurrentUserLoginState: Bool { get set }
    var user: User? { get set }
    var currentLocation: CLLocation? { get set }
    var lastDocument: QueryDocumentSnapshot? { get set }

    func fetchDistanceOfUserAndMemo(myLocation: CLLocationCoordinate2D, memoLocation: Location) -> Double
    func sortMemoList(type: SortedTypeOfMemo)
    func fetchUserState()
    func fetchCurrentUserLoginState() -> Bool
    func fetchCurrentUserLocation(returnCompletion: @escaping (CLLocation?) -> Void)
    func pagenate(userID: String) async
}

extension ProfileViewModelProtocol {
    func fetchUserState() {
        guard let _ = UserDefaults.standard.string(forKey: "userId") else { return }
    }

    func fetchCurrentUserLoginState() -> Bool {
        if let _ = Auth.auth().currentUser {
            return true
        }
        return false
    }

    // MARK: 현재 사용의 위치(위도, 경도)와 메모의 위치, 그리고 설정할 거리를 통해 설정된 거리 내 메모를 필터링하는 함수(CLLocation의 distance 메서드 사용)
    func fetchDistanceOfUserAndMemo(myLocation: CLLocationCoordinate2D, memoLocation: Location ) -> Double {
        // 사용자의 위치를 CLLocation객체로 생성
        let location = CLLocationCoordinate2D(latitude: memoLocation.latitude, longitude: memoLocation.longitude)
        return location.distance(to: myLocation)
    }

    // MARK: MemoList 필터링 & 정렬하는 메서드입니다
    func sortMemoList(type: SortedTypeOfMemo) {
        self.selectedFilter = type
        switch type {
        case .last:
            self.memoList = memoList.sorted {
                let first = Date(timeIntervalSince1970: $0.date)
                let second = Date(timeIntervalSince1970: $1.date)
                // 시간비교 orderedAscending: first가 second보다 이전(빠른), orderedDescending: first가 second보다 이후(늦은)
                switch first.compare(second) {
                case .orderedAscending: return false
                case .orderedDescending: return true
                case .orderedSame: return true
                }
            }
        case .like:
            self.memoList = memoList.sorted { $0.likeCount > $1.likeCount }
        case .close:
            self.memoList = memoList.sorted {
                let first = $0.location.distance(from: currentLocation ?? CLLocation(latitude: 37.5664056, longitude: 126.9778222))
                let second = $1.location.distance(from: currentLocation ?? CLLocation(latitude: 37.5664056, longitude: 126.9778222))
                return first < second
            }
        }
    }

}

간단하게 MapImageMarkerView를 구현하였습니다!

import SwiftUI
import MapKit

struct MapImageMarkerView<ViewModel: ProfileViewModelProtocol>: View {
    @EnvironmentObject var viewModel: ViewModel
    @State private var position: MapCameraPosition = .userLocation(followsHeading: true, fallback: .automatic)

    var body: some View {
        VStack {
            Map(position: $position) {
                ForEach($viewModel.memoList, id: \.id) { memo in

                    let location = CLLocationCoordinate2D(
                        latitude: Double(memo.location.latitude.wrappedValue),
                        longitude: Double(memo.location.longitude.wrappedValue)
                    )

                    Annotation(memo.title.wrappedValue, coordinate: location) {
                        ZStack {
                            RoundedRectangle(cornerRadius: 5)
                                .fill(.background)
                            RoundedRectangle(cornerRadius: 5)
                                .stroke(.secondary, lineWidth: 5)
                            Image(uiImage: UIImage(data: memo.images.first?.wrappedValue ?? Data()) ?? UIImage())
                                .resizable()
                                .scaledToFit()
                                .frame(width: 50, height: 50)
                                .padding(5)

                        }

                    }
                }
                .annotationTitles(.hidden) // 제목 감추기
            }
            .mapControls { // 이제 버튼을 탭하여 내 위치를 표시할 수 있습니다. 내가 움직일 때 지도 카메라가 나를 따라다닐 것입니다.
                       MapUserLocationButton() // 누르면 내 위치로 바로 이동함, 내가 이동하면 카메라도 이동함
                       MapCompass()
                       MapScaleView()
                       /*
                        mapControls 설정은 지도를 회전하면 나침반을 띄우고 화면을 확대하거나 축소하면 축적을 표시함
                        */
            }
            .frame(height: 400)

        }
    }
}

가능하다면 추가해주세요

변경 사항 스크린샷 혹은 화면 녹화

스크린샷

https://github.com/APP-iOS3rd/PJ3T2_Mymory/assets/54401641/45165739-eab6-40ec-a0ea-d63303ac0f82

기타 언급해야 할 사항들

요약 로그인한 사용자가 MyPage를 보면 탭 2개 DetailView(내가 작성한 메모)에서 프로필 눌렀을 때 다른 메모 작성자 프로필 보는 것과 동일하게 탭 1개 OtherUserProfileView이용

APP-iOS3rd / PJ3T2_Mymory

Refactoring/MyPage : MyPage, OtherUser Profile 분리 작업 🙆🏻 #187