인스타그램 클론

1. 라이브러리

• SnapKit

2. UI 구현

• TabBarController

  • TabBar enum으로 구현
  • CaseIterable을 채택함으로 열거형으로 정의된 프로퍼티들을 for문으로 접근할 수 있다

• MainViewController

  • 메인 뷰는 UITableView로 구성된다
    • 테이블 뷰의 첫번째 셀은 스토리를 보여주는 UICollectionView
    • StoryTableViewCell안의 StoryCollectionViewCell
    • 테이블 뷰 안에 콜렉션 뷰를 넣을 때, contentView에 넣어야한다
    • 왜냐하면 그냥 addSubView했을 때, 가로 스크롤이 안된다
  • 나머지 셀은 피드를 보여주는 FeedTableViewCell

  

• ExploreViewController

  • UISearchController와 UICollectionView로 구성
  • 콜렉션 뷰를 아래로 스크롤하면 refreshControl을 통해 새로고침하는 UI 구현

  

• AccountViewController

  • 2개의 뷰로 나뉘어 구성
  • 상단의 뷰는 (게시물, 팔로워, 팔로우)의 개수, 이름, 프로필 사진 등을 나타내는 뷰
  • 하단의 뷰는 콜렉션 뷰로 구성되어있다
  • 프로필 사진을 탭 했을 때, PHPickerViewController를 사용하여 이미지를 선택할 수 있다(이미지 1장만 가능)

  

• UploadFeedViewController

  • 내비게이션 바의 leftBarButton은 dismiss, rightBarButton은 공유
  • 이미지를 선택하면 선택한 이미지를 보여주는 imagePickerView
  • 이미지가 몇 장 선택되었는지 보여주는 numberOfSelectedImageLabel
  • 이미지 뷰를 탭 했을 때, PHPickerViewController를 사용하여 이미지를 선택할 수 있다(이미지 여러장 가능)
  • 문구를 입력할 수 있는 descriptionTextView
    • textView의 placeholder 기능 구현
  • 사람 태그하기, 위치 추가와 같은 옵션들을 보여주는 optionsTableView

  

3. Model 만들기

• Feed

struct Feed: Codable {
    let id: String
    let user: User
    let location: String
    let imageURLString: [String]
    let likeUser: [User]
    let description: String
    let createDate: Date
    
    var imageURL: [URL?] {
        imageURLString.map { URL(string: $0) }
    }
    var date: String {
        let dateFormatter = DateFormatter()
        dateFormatter.dateFormat = "M월 d일"
        dateFormatter.locale = Locale(identifier: "ko_KR")
        return dateFormatter.string(from: createDate)
    }
}

• User

struct User: Codable, Equatable {
    static func == (lhs: User, rhs: User) -> Bool {
        lhs.id == rhs.id
    }
    
    let id: String
    let name: String
    let nickName: String
    let profileImageURLString: String
    let feed: [String]
    let follower: [String]
    let following: [String]
    let like: [String]
    
    var profileImageURL: URL? { URL(string: profileImageURLString) }
}

소스코드