[Feat] 마이페이지 메인 화면 구현

[soobin-k]

📌 PR 요약

마이페이지 메인 화면 구현

🌱 작업한 내용

• 마이페이지 메인 화면 UI
• 내 정보 조회 API 연동
• 모임 조회 API 연동
• 섹션 접고 펴기 로직 구현

🌱 PR 포인트

1. 모임 조회 API 호출 관련

• viewModel init에서 모임 조회 API를 동시에 4번 호출하게 됩니다.
  • status : WAITING, ACTIVE, END, RECRUITING

   let plubbingStatusTypes = PlubbingStatusType.allCases.map {
     return MyPageService.shared.inquireMyMeeting(
       status: $0,
       cursorID: 0
     )
   }
   
   // 플러빙 타입 4가지 API 동시 호출
   let successMyPubbings = Observable.zip(plubbingStatusTypes)
     .map {
       $0.compactMap { result -> MyPlubbingResponse? in
         guard case .success(let model) = result else { return nil }
         return model.data
       }
     }

• 해당 status에 플러빙이 비어있지 않을 때만 섹션을 추가해줍니다.
  • 최초 진입 시, 섹션이 접혀있는게 정책입니다.

    successMyPubbings
      .withUnretained(self)
      .subscribe(onNext: { owner, responses in
        for response in responses {
          guard !response.plubbings.isEmpty else { break }
          // 플러빙이 비어있지 않을 때만 섹션 추가
          owner.myPlubbing.append(
            .init(section: response, isFolded: true)
          )
        }
        
        // 테이블 뷰 리로드
        owner.reloadDataSubject.onNext(())
      }, onError: { error in
          print("")
      })
      .disposed(by: disposeBag)

2. 섹션 접고 펴기 관련

• tableViewCell은 사진과 같이 header, cell, footer 3가지 영역으로 구성되어있습니다.
• header에는 top에만 roundCorner를, footer에는 bottom에만 roundCorner를 적용시켰습니다.
• header영역 클릭 시, 해당 섹션이 리로드 됩니다.

3. 미구현 부분

• 모임 없을때 noneView 화면
• 섹션별 API 페이징 처리(커서 기반)
• 각각 셀 클릭 시, 화면 이동 코드 추가

📸 스크린샷

RPReplay_Final1678732512.MP4

📮 관련 이슈

• [FEAT] 마이페이지 UI 작업 #130

[WhiteHyun]

고생하셨습니다 ☺️

[WhiteHyun]

컨벤션에 맞게 설정 부탁드립니다!
그리고 arr_edge말고 다른 파라미터명은 없을까요? 🤔

[soobin-k]

arr_edge -> edges 로 변경했습니다!

[WhiteHyun]

제가 로그인 파트에서 프로필 설정할 때 쓰였던 코드에 있기는 한데, 이건 테두리 없는 버전이라 다음과 같이 코드를 짰었어요.
교체하는 게 나으려나요?

  private let pencilImageView = UIImageView(image: UIImage(named: "pencilCircle")).then {
    $0.layer.borderColor = UIColor.background.cgColor
    $0.layer.borderWidth = 2
    $0.layer.cornerRadius = 16
    $0.contentMode = .scaleAspectFit
  }

[soobin-k]

음 이건 안바꾸셔도 괜찮을 것 같습니다!
저는 특정 부분만 border를 추가하고 싶어서 저 함수를 추가했어요!

[WhiteHyun]

ㅎㅎ..

Suggested change

	class MyPageService: BaseService {
	final class MyPageService: BaseService {

[soobin-k]

수정했습니다!!

[WhiteHyun]

#F2F3F4는 UIColor.lightGray를 쓰시면 될 것 같습니다!

지금 보니 UIColor.lightGray색상도 바뀌었군요.. 같이 수정해주실 수 있나요?

[soobin-k]

수정했습니다!!

[WhiteHyun]

여기 띄어쓰기 이상해요!

[WhiteHyun]

Suggested change

	import SnapKit
	import RxSwift
	import RxCocoa
	import RxSwift
	import RxCocoa
	import SnapKit
	import Then