인스타그램 클론 앱 개발하기 in SwiftUI 3주차

seokhoho·2024년 3월 15일

인스타그램클론앱개발

목록 보기

3/5

인스타그램 클론 앱 개발하기

3주차 개발

계획:
상단 네비게이션 버튼 기능 (카메라, 메세지 페이지)
피드셀 프로필 누르면 프로필 탭 화면으로 이동
피드셀 하트 버튼 누르면 색변화, 카운트 증감
피드셀 댓글 버튼 누르면 모달로 댓글페이지 띄우기
피드셀 공유 버튼 누르면 모달로 공유 페이지 띄우기
피드셀 저장 버튼 누르면 모달로 저장 페이지 띄우기
~~이미지 로딩 중 표시할 플레이스 홀더 정하기~~

실제 구현한 것들:
하트, 저장 버튼의 색상 변경 구현
스토리의 테두리에 이미지를 넣어 깔끔하게하였다.
하트버튼 클릭시 카운트 증감, 목록을 누르면 네비게이션 이동
피드 프로필 이미지, 이름 누르면 프로필 뷰로 네비게이션 이동
더보기 버튼(점 3개) 클릭시 설정 시트 올라오기
댓글 버튼(말풍선) 클릭시 댓글 시트 올라오기
공유 버튼(종이비행기) 클릭시 공유 시트 올라오기
저장 버튼 클릭시 저장 시트 올라오기
시트의 Detent를 커스텀
Story 구조체를 User에서 분리하여 정의
피드의 사진이 모든 기기에 대응하도록 피드사진을 375x375로 고정했던 것을 기기 사이즈에 맞추어 대입했다.
ScrollView였던 피드를 TabView로 변경하여 페이지 효과를 내고 사진 하단에 나타나는 indexDisplay를 안보이게 수정하였다.
라이브러리를 사용해서 피드의 인디케이터에 사용했다.

BriefPagingControl 라이브러리를 SPM으로 추가하여 피드의 인디케이터를 설정했다 링크

BriefPagingControl(numberOfPages: feed.feedImageURL.count, currentPage: $feedIndex) { config in
    config.indicatorSize = 6 // 인디케이터의 최대크기
    config.spacing = 4 // 인디케이터의 간격
    config.currentIndicatorColor = Color.init(hexCode: "3897F0") // 현재 인디케이터의 색상
    config.indicatorColor = Color.init(hexCode: "D9D9D9") // 그 외 인디케이터의 색상
    config.numberOfMainIndicators = .three // 메인크기 인디케이터의 수를 최대 3개로 설정
    config.hidesForSinglePage = true // 사진이 1개일 때 숨기기
    config.animation = .snappy
}

어려웠던 점

개발중 xpc error 라는 알 수 없는 에러가 발견되었다. 이런 알 수 없는 에러가 발생할 때마다 멘탈이 갈갈 갈린다.. 마음이 꺾였다. 링크 여기 스택오브 플로우 링크에서 제시한 방법으로 결국 해결하였지만 만 하루동안 흘려보낸 시간에 꺾여버린 마음 때문에 매우 힘들었다.

미흡/보완한 점

지난번에 상단 툴바의 위치를 trailing으로 고정값을 주어 구현했었는데 스터디원의 도움으로 모든 기기에 대응할 수 있게 ToolbarItem에 HStack을 넣어 Spacer()로 각 UI들이 같은 범위로 간격을 갖게하였다.
하지만 이 방법도 문제가 있는 것이 한쪽에만 상단툴바가 증가한다면 Spacer()로 간격을 잡을 수 없다.

.toolbar {
    ToolbarItem(placement: .navigation) {
        VStack {
            HStack {
                NavigationLink {
                        
                        // 카메라
                        
                } label: {
                    Image("carmera")
                        .padding(.horizontal)
                }
                
                Spacer()
                    
                Image("navigationLogo")
                    
                Spacer()
                    
                NavigationLink {
                        
                        // 메세지 뷰
                        
                } label: {
                    Image("messanger")
                        .padding(.leading)
                }
            }
            .frame(width: UIScreen.main.bounds.width)
        }
    }
}

시트를 크기를 large로 한다면 밑에 처럼 뒤에 있던 화면이 작아지며 살짝 블러처리가 된다. 이런 현상을 없애고자 검색을 시작했고 임계값을 설정하는 것을 찾아 해결했다.

.sheet(isPresented: $showCommentSheet) {
    Text("시트")
        .presentationDetents([.large])
}

참조 Detents를 커스텀하거나 .fraction(0.999)을 설정하게되면 아래 사진처럼 뒤에 있는 화면이 작아지지 않게 된다.

나는 custom을 했다.

.sheet(isPresented: $showSaveFeedSheet) {
            
    Text("저장 시트")
        .presentationDetents([
            .height(UIScreen.main.bounds.height / 2.5),
            .custom(CustomDetent.self)
        ])
}

// CustomDetent.swift

struct CustomDetent: CustomPresentationDetent {
    static func height(in context: Context) -> CGFloat? {
        return context.maxDetentValue - 1
    }
}