[Feat] #194 - 코스 발견 페이지 UI 변경 하였습니다. #213

thingineeer · 2023-11-21T14:40:36Z

🌱 작업한 내용

관련있는 부분 전체적으로 가독성 있게 코드 리팩터링 (구조 리팩터링 x)
추천 코스(마라톤코스) 수평 스크롤 셀을 코스 발견에 추가 하였습니다.
마라톤 코스 관련 네트워크 코드 추가 하였습니다 (DTO 추가)
코스 전체 수를 가져와는 네트워크 코드 추가 하였습니다 (DTO 추가)
Cell 관리하는 부분 리팩터링을 진행 하였습니다. (Cell관련 Delegate 부분)
Combine 으로 이벤트 처리 코드 추가 ( 마라톤 Cell -> 코스 발견 뷰 에서 클릭 이벤트 처리)
최신순, 스크랩순 버튼을 추가하였습니다.
- default 최신순
페이지 네이션 로직 살짝 변경

+12/5

업로드 버튼 스크롤시 작은 업로드 버튼으로 변경
- 업로드 버튼 애니메이션은 당근 중고거래 홈 글쓰기 버튼 참고 (미완 ^^;) [Feat] #224 - 코스발견, 코스보관함, 코스 상세, 유저프로필 1차 QA 진행 하였습니다. #225 완성

+12/9

코스 상세에서 스크랩 후, 코스 발견으로 이동할때 스크랩 부분 자연스럽게 변경
- delegate 패턴 사용
  스크랩부분에 집중

코스 상세 -> 코스 발견 테스트 8
코스 발견 -> 코스 상세 테스트 5

🌱 PR Point

Enum을 활용하여 0...4로 되어있는 부분으로 상수화하였고, if~else문을 보기 좋게 Switch문으로 바꾸었습니다.
마라톤 코스 발견 뷰는 따로 빼서 파일을 나눠 코드를 작성하였고, 코스 발견 뷰에 넣었습니다.
⭐️⭐️ 페이지 네이션을 하는 과정 에서, 스크랩 부분을 어떻게 처리할지 고민입니다.
업로드 버튼이 동적으로 바뀌는 과정에서 레이아웃(CGAffineTransform) 을 바꿀지, 그냥 isHidden을 번갈아가며 할지 고민을 하다 isHidden으로 해결하였는데, 추가 의견 있으시면 해당 부분에 리뷰 바랍니다.

레이아웃을 변동 시켰다면, 아래 예시 와 같은 코드가 될 것 입니다.

UIView.animate(withDuration: 0.5 {
    self.miniUploadButton.transform = .identity
    self.uploadButton.transform = CGAffineTransform(translationX: 0, y: 100)
}

UIView.animate(withDuration: 0.5 {
    self.uploadButton.transform = .identity
    self.miniUploadButton.transform = CGAffineTransform(translationX: 0, y: 100)
}

📸 스크린샷

구현 내용	스크린샷
코스발견

📮 관련 이슈

Resolved: [Feat] #194 - 코스 발견 페이지 UI 리뉴얼 #194

서버 API 연결 전 테스트 코드 입니다.

추천코스, 수평 스크롤 인점 감안하여 셀을 추가하였습니다. 이 부분은 추천코스의 역할을 할 예정입니다.

다양한 케이스가 매직넘버로 이루어져 있어, 상수로 대체하여 가독성을 증가시켰습니다.

TitleCollectionViewCell의 then으로 안된 문법을 변경해 주었습니다.

추후 불필요한 메시지(코드) 삭제 예정

코스 발견 뷰로 넘겨줄 이벤트를 처리하기 위해 Combine을 사용하였습니다.

코스 발견에 넘어오는 이벤트를 처리하는 코드를 추가하였습니다.

함수의 코드의 복잡성이 있어, 따로 함수로 빼서 관리해 주게 짰습니다. 추후 저 셀도 따로 빼서 관리할 예정입니다.

getTotalPageCount 를 추가 하였습니다.

따로 데이터를 받는거라, 하나의 파라미터지만 DTO를 추가하였습니다.

getTotalPageNum() 함수를 추가하여 viewDidLoad 에 추가 해주었습니다.

Combine 으로 두번 호출되는 코드를 제거 하였습니다.

원래 빨리 내리거나, 너무 쭉 내리면 page 수가 너무 빨리 올라가 페이징이 의미가 없는 구현이 됐던 코드 입니다. 동기처리를 추가 하였고, 일부 pagination 로직 코드 수정을 하였습니다. 동기 처리를 await, task.sleep으로 가능하면 그걸로 할 예정

디버깅용 주석은 냅뒀습니다~

MarathonCourseListCVC 마라톤 코스로 네이밍 변경 하였습니다.

thingineeer

모르는 거나, 궁금한 거, 이게 왜 있지? 하는 코드들이 있으면 전부 질문 남겨주세요
변수 명도 이상하거나, 이렇게 했으면 더 좋겠다 하는 것들도 전부요!!

Runnect-iOS/Runnect-iOS/Presentation/CourseStorage/Views/CVC/MarathonCourseListCVC.swift

Runnect-iOS/Runnect-iOS/Presentation/CourseDiscovery/Views/VC/CourseDiscoveryVC.swift

513sojin

궁금한 부분 리뷰 남겨두었습니다!! 이번에도 많은 작업을 하셨네요 👍🏻

513sojin · 2023-12-04T12:36:57Z

Runnect-iOS/Runnect-iOS/Network/Dto/CourseDiscoveryDto/ResponseDto/TotalPageCountDto.swift

이 DTO는 언제 사용되는 건가요?!

서버에서 마라톤 코스를 따로 보내줄때 사용 됩니다 ‼️

요거 ! @513sojin

struct TotalPageCountDto: Codable { let totalPageCount: Int }

앗 요부분 말한거였어요 ㅎㅎ

@513sojin

아아 요 부분은 전체 페이지를 가져올 때 사용되는 DTO인데, 코스 불러올 때 전체 페이지가 달려오는 게 아니라 따로 호출해야 불러오기 때문에 DTO를 추가해 주었습니다!!

지금 코드에서는 주석 처리 해놔서 사용하지 않습니다.
주석 처리한 이유는 저희 앱스토어에 있는 서버(노드) 로 돌릴 때, totalCount를 주는 API가 없어서 그냥 테스트할 때는 상수로 해놓고 페이지 네이션 테스트 해놓고 있습니다! (참고로 저희 테섭은 1페이지당 10개 데이터로 바뀌었습니다, 노드는 24개씩)

513sojin · 2023-12-04T12:40:37Z

Runnect-iOS/Runnect-iOS/Presentation/CourseDiscovery/Views/MarathonMapCollectionViewCell.swift

+    let didSelectCourse = PassthroughSubject<IndexPath, Never>()
+}
+
+class MarathonMapCollectionViewCell: UICollectionViewCell {


이 부분은 cell안에 collectionView가 들어가는 건가요 ..? 어떤 구조인지 궁금합니다

맞습니다.
코스 발견(collectionView) 수직 방향에
마라톤코스(collectionView) 수평 방향으로 Cell을 추가해주었습니다.

처음에 구현을 할 때, 코스 발견 안에서 코드를 구현하려고 하였습니다. (코스 발견의 맨 마지막 셀 이 원래 그 파일 안에 있던 것처럼)
하지만 코스 발견 내에서, 새로운 셀을 만들고 Cell 속성을 .horizontal 하여도 수평으로 스크롤이 되지 않은 문제에 직면하였습니다.
그래서 저는 마라톤 Cell이라는 파일을 따로 만들고 코스 발견 셀에 병합해 주는 코드를 작성을 하였습니다.

...ect-iOS/Runnect-iOS/Presentation/CourseDiscovery/Views/MarathonTitleCollectionViewCell.swift

Runnect-iOS/Runnect-iOS/Presentation/CourseStorage/Views/CVC/MarathonCourseListCVC.swift

Runnect-iOS/Runnect-iOS/Presentation/CourseDiscovery/Views/VC/CourseDiscoveryVC.swift

thingineeer

이해 안 되는 거 있으면 몇 번이든 괜찮으니 댓글 달아주세요~ 👍

🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥
이 리뷰 아래는 제 댓글 밖에 안 보이니 위에 ⭐️질문한 곳⭐️ 에 필요한 댓글 달아주세요!
🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥

thingineeer · 2023-12-04T15:48:34Z

Runnect-iOS/Runnect-iOS/Network/Dto/CourseDiscoveryDto/ResponseDto/TotalPageCountDto.swift

서버에서 마라톤 코스를 따로 보내줄때 사용 됩니다 ‼️

...ect-iOS/Runnect-iOS/Presentation/CourseDiscovery/Views/MarathonTitleCollectionViewCell.swift

Runnect-iOS/Runnect-iOS/Presentation/CourseDiscovery/Views/VC/CourseDiscoveryVC.swift

Runnect-iOS/Runnect-iOS/Presentation/CourseStorage/Views/CVC/MarathonCourseListCVC.swift

thingineeer · 2023-12-04T16:08:59Z

Runnect-iOS/Runnect-iOS/Presentation/CourseDiscovery/Views/MarathonMapCollectionViewCell.swift

+    let didSelectCourse = PassthroughSubject<IndexPath, Never>()
+}
+
+class MarathonMapCollectionViewCell: UICollectionViewCell {


맞습니다.
코스 발견(collectionView) 수직 방향에
마라톤코스(collectionView) 수평 방향으로 Cell을 추가해주었습니다.

처음에 구현을 할 때, 코스 발견 안에서 코드를 구현하려고 하였습니다. (코스 발견의 맨 마지막 셀 이 원래 그 파일 안에 있던 것처럼)
하지만 코스 발견 내에서, 새로운 셀을 만들고 Cell 속성을 .horizontal 하여도 수평으로 스크롤이 되지 않은 문제에 직면하였습니다.
그래서 저는 마라톤 Cell이라는 파일을 따로 만들고 코스 발견 셀에 병합해 주는 코드를 작성을 하였습니다.

함수명 명명규칙 set ~~ 으로 변경 MarathonMapCVC 파일에서 "MarathonCourseListCVC" 를 "CourseListCVC" 으로 변경

구 버전 ic_plus_button 을 새 버전으로 변경 하였습니다.

UIScrollViewDelegate 로 따로 extension을 분리 해주었습니다.

적당한 스크롤 이벤트가 발생하면 업로드 버튼이 다르게 바뀌는 것을 구현하였습니다.

513sojin

답변 달아주신 부분 정독햇습니다 . 궁금증 해결완.
근데 보다보니 또 궁금한게 생겨서 질문 몇개 던져둡니다 ㅎㅎ

513sojin · 2023-12-05T14:43:56Z

Runnect-iOS/Runnect-iOS/Network/Dto/CourseDiscoveryDto/ResponseDto/TotalPageCountDto.swift

struct TotalPageCountDto: Codable { let totalPageCount: Int }

앗 요부분 말한거였어요 ㅎㅎ

513sojin · 2023-12-05T15:12:49Z

Runnect-iOS/Runnect-iOS/Presentation/CourseDiscovery/Views/VC/CourseDiscoveryVC.swift

+    private func handleButtonVisibility(uploadButtonChanged: Bool, hidden: Bool, miniHidden: Bool) {
+        guard self.uploadButtonChanged != uploadButtonChanged else {
+            return
+        }
+
+        toggleUploadButtons(hidden: hidden, miniHidden: miniHidden)
+        self.uploadButtonChanged = uploadButtonChanged
+    }


보다보니 이 부분도 궁금해졌습니다 ,, 이 부분은 어디 버튼 상태를 바꿔주는 함수인가요 ??!

@513sojin

설명하기 전 새로 생긴 코드부터 설명하겠습니다.
파일 최상단에 위치해 있는 속성 부분에 private var uploadButtonChanged = false를 선언 한 이유는 scroll을 할 때마다 계속 업로드 버튼이 바뀌는 코드가 작동되다 보니, 자꾸 반짝반짝 거려서 한 번만 실행 시키기 위한 통제권 이라고 생각하시면 됩니다.

if contentOffsetY > scrollThreshold { handleButtonVisibility(uploadButtonChanged: true, hidden: true, miniHidden: false) } else { handleButtonVisibility(uploadButtonChanged: false, hidden: false, miniHidden: true) }

if contentOffsetY > scrollThreshold 일 경우 업로드 버튼이 사라지고, mini 업로드 버튼이 나타나는 코드이고,
반대 경우는 반대로 생각하시면 됩니다.

⭐️ 다시 본론으로 들어와 handleButtonVisibility 이 부분은 가시성을 위한 용도입니다.

changeButtonStyleOnScroll 메서드에서 contentOffsetY와 scrollThreshold를 기반으로 스크롤에 따라 버튼 가시성을 변경합니다. ‼️‼️ --> 일단 30% 정도 스크롤이 되었으면 바뀌게 설정 해두었어요.

그리고 handleButtonVisibility 메서드에서는 uploadButtonChanged가 변경되었을 때에만 버튼의 가시성을 조절하는 로직이 들어가 있습니다.
그 부분을 guard let 바인딩으로 해결 했구요 ‼️

private func handleButtonVisibility(uploadButtonChanged: Bool, hidden: Bool, miniHidden: Bool) { guard self.uploadButtonChanged != uploadButtonChanged else { return } {...중략... } }

마지막으로, toggleUploadButtons 메서드에서 버튼의 가시성을 변경하는 애니메이션을 수행하는 거죠 ‼

아래는 시연 영상입니다. (바뀌는 애니메이션은 아직 덜 공부하여 그나마 여러 개 해보다가 적당히 예쁜 걸로 했습니다 ^_^)
레이아웃과, 애니메이션은 추후 수정 예정입니다~ ‼️(아직 피그마에 확정이 안 남)

이해했습니다 !!!! 디테일한 부분까지 신경 많이쓰시네요 👍🏻
물어볼때마다 다 떠먹여주신 (.....) 덕분에 이번Pr에서 스크롤뷰쪽 개념 제대로 잡고 갑니다 수고하셨어요 !!@

Runnect-iOS/Runnect-iOS/Presentation/CourseDiscovery/Views/VC/CourseDiscoveryVC.swift

서버에서 만들어준 isEnd, totalPageNum을 추가 해주었습니다.

thingineeer added 8 commits November 18, 2023 17:52

[Feat] Runnect#194 - 마라톤 Title 부분 기능 구현

505f66f

[Feat] Runnect#194 - 코스발견 Title 수정

11141a7

[Feat] Runnect#194 - 마라톤 Cell skeleton 코드 추가

db7e87e

[Feat] Runnect#194 - 추천 코스 수평 CVC 구현

ed1b4ca

서버 API 연결 전 테스트 코드 입니다.

[Feat] Runnect#194 - 코스 발견 수평 CVC 추가

e938b96

[Feat] Runnect#194 - 추천 코스의 셀 구현

1edc88a

추천코스, 수평 스크롤 인점 감안하여 셀을 추가하였습니다. 이 부분은 추천코스의 역할을 할 예정입니다.

[Refactor] Runnect#194 - 코스 발견 코드 상수화 적용

42b14a6

다양한 케이스가 매직넘버로 이루어져 있어, 상수로 대체하여 가독성을 증가시켰습니다.

[Refactor] Runnect#194 - Then 문법 적용

2cbd292

TitleCollectionViewCell의 then으로 안된 문법을 변경해 주었습니다.

thingineeer added Feat 새로운 기능 구현 Refactor 전면 수정 labels Nov 21, 2023

thingineeer requested a review from 513sojin November 21, 2023 14:40

thingineeer self-assigned this Nov 21, 2023

thingineeer changed the title ~~#194 - 코스 발견 페이지 UI 변경 하였습니다.~~ [Feat] #194 - 코스 발견 페이지 UI 변경 하였습니다. Nov 21, 2023

thingineeer added 17 commits November 23, 2023 17:24

[Chore] Runnect#194 - 서버 통신을 위한 코드 추가

14c5393

추후 불필요한 메시지(코드) 삭제 예정

[Feat] Runnect#194 - 코스발견 정렬 파라미터 기능 구현

0df28bf

[Refactor] Runnect#194 - 셀 타이틀 코드 수정

f24f5df

[Feat] Runnect#194 - 코스 발견 마라톤 DTO 추가

63a4045

[Feat] Runnect#194 - 마라톤 데이터 Cell에 추가

562cf6c

[Feat] Runnect#194 - 마라톤 라우터 추가

f22d713

[Feat] Runnect#194 - Combine 이벤트 추가

d3780e7

코스 발견 뷰로 넘겨줄 이벤트를 처리하기 위해 Combine을 사용하였습니다.

[Feat] Runnect#194 - Combine 이벤트 받는 코드 추가

16f53cc

코스 발견에 넘어오는 이벤트를 처리하는 코드를 추가하였습니다.

[Refactor] Runnect#194 - Cyclomatic Complexity 경고 제거

0009a3f

함수의 코드의 복잡성이 있어, 따로 함수로 빼서 관리해 주게 짰습니다. 추후 저 셀도 따로 빼서 관리할 예정입니다.

[Feat] Runnect#194 - 코스 개수 받아오는 라우터 추가

6ae5a94

getTotalPageCount 를 추가 하였습니다.

[Feat] Runnect#194 - 코스 개수 받아오는 DTO 추가

ccfad24

따로 데이터를 받는거라, 하나의 파라미터지만 DTO를 추가하였습니다.

[Feat] Runnect#194 - 코스 개수 네트워크 코드 구현

b7584a3

getTotalPageNum() 함수를 추가하여 viewDidLoad 에 추가 해주었습니다.

Merge branch 'develop' into Runnect#194---코스-발견-페이지-UI-리뉴얼

e19183d

[Fix] Runnect#194 - 코스 발견 정렬 터치 이벤트 중복 삭제

94eef74

Combine 으로 두번 호출되는 코드를 제거 하였습니다.

[Feat] Runnect#194 - 코스 발견 서버에서 보내주는 갯수 상수 처리

90246bf

[Chore] Runnect#194 - 필요없는 주석 제거

a67cbe3

디버깅용 주석은 냅뒀습니다~

thingineeer added 5 commits November 29, 2023 19:15

[Chore] Runnect#194 - RecommendedListCVC 파일 이름 변경

5539539

MarathonCourseListCVC 마라톤 코스로 네이밍 변경 하였습니다.

[Chore] Runnect#194 - 즉시 실행 클로저 -> Then 문법으로 변경

2bacc00

[Fix] Runnect#194 - 코스 불러오는 갯수 변경

e69ef01

[Fix] Runnect#194 - level 자료형 변경

3a44e5a

[Chore] Runnect#194 - 기존 코드 오타 수정

f335617

thingineeer commented Dec 1, 2023

View reviewed changes

513sojin reviewed Dec 4, 2023

View reviewed changes

thingineeer commented Dec 4, 2023

View reviewed changes

thingineeer added 4 commits December 5, 2023 01:45

[Feat] Runnect#194 - 코드리뷰 1차 반영

841a946

함수명 명명규칙 set ~~ 으로 변경 MarathonMapCVC 파일에서 "MarathonCourseListCVC" 를 "CourseListCVC" 으로 변경

[Fix] Runnect#194 - Assets 변경

98ce908

구 버전 ic_plus_button 을 새 버전으로 변경 하였습니다.

[Refactor] Runnect#194 - pagination 함수 분리

b695b8b

UIScrollViewDelegate 로 따로 extension을 분리 해주었습니다.

[Feat] Runnect#194 - 업로드 버튼 동적으로 구현

7b58638

적당한 스크롤 이벤트가 발생하면 업로드 버튼이 다르게 바뀌는 것을 구현하였습니다.

513sojin approved these changes Dec 5, 2023

View reviewed changes

thingineeer added 7 commits December 7, 2023 14:54

[Docs] Runnect#194 - gitignore 추가

9d862f8

[Feat] Runnect#194 - 업로드 버튼 모션 수정

f90f5d0

[Feat] Runnect#194 - 업로드 버튼 애니메이션 수정

31bd47f

[Add] Runnect#194 - 코스 발견 페이징 DTO추가

2d7b98a

서버에서 만들어준 isEnd, totalPageNum을 추가 해주었습니다.

Feat Runnect#194 - 스크랩 이벤트 이슈 해결

8e4a234

[Chore] Runnect#194 - 필요 없는 주석 제거

079fff8

[Fix] Runnect#194 - getCourseData 로딩 시간 변경

c30d8d2

thingineeer merged commit fd8cf56 into Runnect:develop Dec 9, 2023

thingineeer deleted the #194---코스-발견-페이지-UI-리뉴얼 branch December 9, 2023 15:23

thingineeer mentioned this pull request Dec 16, 2023

[Feat] #226 - 코스 발견 피드에서의 이벤트 처리들을 추가 해주었습니다. #227

Merged

thingineeer added the 명진😼 label Jan 13, 2024

thingineeer added the UX label Oct 12, 2024

[Feat] #194 - 코스 발견 페이지 UI 변경 하였습니다. #213

[Feat] #194 - 코스 발견 페이지 UI 변경 하였습니다. #213

Uh oh!

Conversation

thingineeer commented Nov 21, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🌱 작업한 내용

🌱 PR Point

📸 스크린샷

📮 관련 이슈

Uh oh!

thingineeer left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

513sojin left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

thingineeer Dec 5, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

thingineeer left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

513sojin left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

thingineeer Dec 5, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

thingineeer commented Nov 21, 2023 •

edited

Loading

513sojin left a comment •

edited

Loading

thingineeer Dec 5, 2023 •

edited

Loading

thingineeer left a comment •

edited

Loading

thingineeer Dec 5, 2023 •

edited

Loading