<aside> 💡

피그마 바로가기 👉 하이브리드앱 부트캠프

</aside>

1. 사진원본보기 노치 리팩토링

   • [ ] 기존의 react-native의 <SafeAreaView />와 react-native의 <StatusBar /> 는 안드로이드, IOS 간에 적용되는 기능들이 일관되지 않고, 복잡하게 연결되어 있었습니다.

     ⇒ 해당 문제를 해결하기 위해 react-native-safe-area-view 라이브러리가 등장하게 되었고, 해당 라이브러리의 <SafeAreaView />를 사용하면 안드로이드와 IOS 모두 일관되게 노치 겹치기, 배경색 문제를 한방에 해결할 수 있습니다.

     ⇒ 이를 활용하여, 기존 안드로이드 <StatusBar /> 내의 translucent 방법으로 겹치기 하였던 방법을 안드로이드+IOS 모두 <SafeAreaView /> 의 edges를 활용하여 한 방에 문제를 해결하도록 리팩토링하여 보세요.(<StatusBar /> 는 react-native, expo-status-bar 모두 가능하나, 최신 기능인 expo-status-bar를 활용해 보세요.)

2. 사진원본보기 레이아웃쉬프트

   • [ ] 사진원본보기 진행시, 모바일 노치영역이 삭제됨에따라 웹영역이 노치영역을 침범하는 과정에서 레이아웃 변경되는 과정이 시각적으로 보이게 됩니다.

     ⇒ 이 문제를 레이아웃 쉬프트라고 하며, 이를 해결하기 위해 로딩을 먼저 보여주고, 로딩 화면이 렌더되고 난 이후에 노치를 안전하게 삭제하기 위해 노치삭제 및 풀스크린을 다음 틱으로 넘기는 기법을 사용하였습니다. 기존의 숙제였던 사진원본보기에서 레이아웃 쉬프트가 발생하는 경우, 로딩과 틱을 활용하여 쉬프트 현상이 발생하지 않도록 만들어 보세요.

3. 핀치줌

   • [ ] 사진원본보기 풀스크린 화면에서는 손가락 줌인/아웃이 가능해야합니다.

     ⇒ 이를 가능하도록 만들기 위한 방법은 여러가지가 있으나, 웹뷰의 기능을 활용하면 안드로이드만 핀치줌을 제어할 수 있습니다.

     ⇒ 따라서, 해당 웹뷰 기능이 아닌, 브라우저의 viewport의 user-scalable을 활용하여 핀치줌을 제어하도록 완성해 보세요. (핀치줌은 사진원본시에만 가능하며, 그 이외의 페이지에서는 핀치줌이 불가능해야합니다.)