Onboarding 페이지 UI구현

[isGeekCode]

Screenshots 📸

고민, 과정, 근거 💬

각 탭의 이미지의 크기 자체가 달라서 VStack으로 구현된 화면이 상이해지는 상황이 생겼습니다.
사실상 이미지의 크기가 일관성 있는 것이 훨신 용이하지만 이런경우는 어떻게 하실지 궁금합니다.

저는 일단 제공 받은 이미지의 상단 Spacer를 각 탭에 맞게 세팅을 하는 방법으로 처리하였습니다.

커스텀 페이지컨트롤은.. 음.. 마음에 안듭니다. 좀더 이쁜 방법없을지 개선해볼 생각이고,
텍스트가 바로 바뀌는 것도 어느 정도의 애니메이션이 들어가는게 낫지않을까 생각이 듭니다.

++++++++++++++
페이지컨트롤 등의 애니메이션 효과 처리

애니메이션이 적용되는 케이스

• 이미지 스크롤하는 경우
• 다음 버튼 누르는 경우
• 페이지컨트롤을 클릭하는 경우

[eung7]

수고하셨습니다! 저에게는 애니메이션이 너무 예쁜데요? 🤣

[isGeekCode]

리뷰 요청하기 전에 충돌난 부분은 반드시 해결해주시기 바랍니다! 충돌 전 리뷰하면 충돌 해결 후 코드리뷰했던 코드가 변경될 여지가 있기에, 저는 리뷰 하지 않는 편입니다. :) (실제로 브랜치 룰도 그렇게 정해두기도 했고요..ㅎㅎ)

public extension Image 부분에 제가 onboarding 이미지를 2개 추가했는데 거기서 충돌이 나는 것으로 보입니다.
main에는 다른 많은 값이 추가된 것 같아요

[isGeekCode]

Image+Resource 파일이 충돌하는 것같아서 해당 부분에 추가된 이미지 두개는 다시 기본 Assets으로 이동시켰습니다. 다음 PR에 해당내용을 다시 추가하도록할게요.

[eung7]

수고하셨습니다!
애니메이션이 부드럽게 진행되는 것이 아주 멋집니다 👍👍

[isGeekCode]

수정했습니다

[isGeekCode]

struct OnboardingPage {
let title: String
let body: String
let imageName: String
}
이런식으로 모델을 구현하고 ViewModel에서 해당 모델을 갖고 있도록 변경하였습니다.

[isGeekCode]

@WhiteHyun 기존에 enum으로 했었던건 마치 UITableView의 셀 타입을 구분했던것처럼 간단하게만 구현하려고 했었던 거였는데요.

ViewModel을 따로 구현하게 되면서 의도가 약간씩 벗어나게 된거였습니다.
큭.ㅠ 다른분들 의견들을 하나둘 반영하다보니 저도 정신없이 수정만 했네요

다시 MVVM으로 리팩토링을 해봤습니다. 리뷰 요청드려요!

[WhiteHyun]

고생하셨어요. 🥹 ViewModel이 어떤 역할을 가져야할지 고민한 모습이 엿보였습니다.
앞으로도 ViewModel이 해야하는 역할이 무엇일까 고민해보면서 개발해가면 좋을 것 같아요.
제 말이 정답은 아닙니다. 하지만, 자신이 작성한 코드에 대해서 리뷰어를 설득 및 납득시켜야한다고 생각해요.
다음 PR때는 그런 모습을 보여주셨으면 좋겠습니다 ㅎㅎ 정말 고생 많으셨어요!

[WhiteHyun]

말씀하신 글을 다시 읽어보았는데 약간 오해의 소지를 갖고 계신 것 같아 첨언합니다.

기존에 enum으로 했었던건 마치 UITableView의 셀 타입을 구분했던것처럼 간단하게만 구현하려고 했었던 거였는데요.

ViewModel을 따로 구현하게 되면서 의도가 약간씩 벗어나게 된거였습니다.
큭.ㅠ 다른분들 의견들을 하나둘 반영하다보니 저도 정신없이 수정만 했네요

다시 MVVM으로 리팩토링을 해봤습니다. 리뷰 요청드려요!

enum을 쓴 게 잘못되었다는 뜻이 아닙니다. 저는 이 화면에서 enum을 써도 좋다고 생각하고 있어요.
그런데, 뷰를 위한 프로퍼티가 enum에도 있고 ViewModel에도 있고, 게다가 각각의 정보를 @State 프로퍼티로도 갖고 있어서 관리복잡성 때문에 말씀드린 거였습니다.