✨ 웹뷰 iPhone 뷰포트 설정

[BangDori]

작업 이유

• 웹에서 실제와 동일한 환경을 확인하기 위함
• 디자이너님들과의 원활한 소통 👍

작업 사항

1️⃣ iPhone 추가

1. iPhone

iPhone은 웹 기준으로 width값이 1440px 이상일 때만 다음과 같이 렌더링 되게 됩니다.

실제와 동일한 환경을 구성하기 위해, 위에 Status 바 이미지를 추가하였습니다.

(참고) 👍 저는 폰트 크기 67%일 때가 가장 적합한 iPhone 뷰포트 환경이였어요~

2. 🚨 주의할 점

해당 PR의 경우 프로젝트를 원활한 프로젝트 진행을 위한 기능 구현입니다. 그렇기 때문에 실제 PROD 모드에서는 iPhone Layout이 렌더링되지 않도록 해야 합니다.

하지만 실제 릴리즈 이전까지는 Amplify 및 https://wv.dev.pennyway.co.kr/ 에서도 해당 레이아웃을 확인할 수 있도록 하는 것이 좋다고 생각하여 PROD 모드에서도 iPhone이 표시되도록 하겠습니다.

2️⃣ 라이브러리 수정 (react-infinite-scroller -> react-intersection-observer)

기존에 FeedMainList 컴포넌트에서 사용하고 있었던 react-infinite-scroller 라이브러리의 경우, 무한스크롤을 document를 기반으로 진행하고 있어 iPhone 뷰포트 환경에서 작동이 어려운 부분이 있었습니다.

하지만 iPhone 뷰포트 환경 설정을 위한 작업이다 보니, 실제 PROD 모드에는 반영되지 않는 부분이였기에 다음과 같은 점을 고민하였습니다.

1. 번들 사이즈 비교

\	[email protected]	[email protected]
BUNDLE SIZE	6.6kB(MINIFIED), 2.2kB(MINIFIED + GZIPPED)	4kB(MINIFIED), 1.6kB(MINIFIED + GZIPPED)
DOWNLOAD TIME	44ms(SLOW 3G), 3ms(EMERGING 4G)	32ms(SLOW 3G), 2ms(EMERGING 4G)

• [email protected]
• [email protected]

2. 구현 난이도

기존의 react-infinite-scroller와 비교하여 react-intersection-observer 또한 무한 스크롤을 구현하기 위해 유사한 개념을 활용하고 있다고 생각하였기에, 구현 난이도는 높지 않다고 생각하였습니다.

리뷰어가 중점적으로 확인해야 하는 부분

• iPhone이 정상적으로 화면에 렌더링되고 있나요?
• 아이폰 내에서 무한 스크롤이 정상적으로 동작하고 있나요?
• 아이폰 내에서 에러 토스트가 해당 위치에 제대로 표시되고 있나요?

발견한 이슈

라이브러리 교체로 인해, Intersection Observer를 이용하게 되면서 테스트 코드를 수정하였습니다.

• Intersection Observer를 Mock 함수로 대체 (vitest는 vi.fn())

[aws-amplify-ap-northeast-2]

This pull request is automatically being deployed by Amplify Hosting (learn more).

Access this pull request here: https://pr-41.d37mn03xh3qyyz.amplifyapp.com

[Legitgoons]

수고 많으셨습니다. 실제 레이아웃과 비슷한 형태라 소통과 개발에 큰 도움이 될 것 같네요. 병합하셔도 좋습니다!