<aside> 💡
피그마 바로가기 👉 하이브리드앱 부트캠프
</aside>
2. 공통(웹)
[ ] project/web/src/commons/settings/device-setting/index.tsx 경로에 안드로이드와 IOS에서 모두 수신 가능하도록 useEffect에서 Listener를 만들어 주세요.
⇒ 셋팅컴포넌트 이름은 DeviceSetting 으로 작성합니다.
[ ] project/web/src/commons/settings/device-setting/hook.ts 경로에 모바일에 fetch 요청을 위한 기능을 만들어 주세요.
⇒ 커스텀훅 이름은 useDeviceSetting 으로 작성합니다.
⇒ fetch 요청을 위한 기능 이름은 fetchApp 으로 만들어 주세요.
⇒ fetchApp API를 사용하여 응답을 받을 시 Promise를 사용해야 하며, await 또는 .then() 등으로 기다릴 수 있어야 합니다.
솔플레이스로그-등록페이지(지도등록)
솔플레이스로그-수정페이지(지도수정)
솔플레이스로그-등록/수정페이지(지도등록/지도수정) 공통
[ ] 지도등록페이지와 지도수정페이지가 같은 컴포넌트를 공유할 수 있도록, 공통컴포넌트로 지도컴포넌트를 만들어서 사용해 주세요.
⇒ 웹에서의 기능 및 라이브러리 추가에 제한을 두지 않습니다.
⇒ 컴포넌트의 폴더 경로(또는 npm 업로드) 추가 등에 제한을 두지 않습니다.
⇒ 지도라이브러리 마찬가지로 제한을 두지 않습니다.
[ ] 페이지이동을 위해 쿼리스트링을 사용합니다.(단, 이미지는 제외 => 글로벌스테이트 사용)
⇒ 기존의 등록/수정페이지에서 입력된 데이터를 쿼리스트링으로 변환하여 지도등록/지도수정페이지로 이동 합니다.
⇒ 쿼리스트링에 지도등록/지도수정 버튼을 클릭하면 이동될 redirect-url을 포함합니다.
⇒ 지도를 움직인 후, 지도등록/지도수정 버튼을 클릭하는 경우 redirect-url로 샬로우라우팅 합니다.
[ ] 지도를 움직이는 경우, 해당 마커와 일치하는 주소를 사용중인 지도 라이브러리를 통해 받아와 주세요.
⇒ 중앙 마커는 항상 가운데에 고정되어 있으며, 바닥에 깔려있는 지도만 움직여야 합니다.
⇒ 움직인 위치의 lat, lng에 해당하는 주소를 지도 라이브러리를 통해 받아와서 화면에 보여줍니다.
⇒ 본 과정에서 setState 대신, 샬로우라우팅을 사용하여 리렌더 합니다.
[ ] 휴대폰 노치영역은 침범하지 않습니다.
⇒ 노치영역과 겹치지 않도록 만들어 주세요.