<aside> 💡

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

</aside>

1. 공통(앱)

   • [ ] project/mobile/apis/index.ts 경로에 디바이스API를 만들어 주세요.

     ⇒ accessToken, refreshToken을 저장할 수 있도록 API를 만들어 주세요.

     • accessToken은 메모리에저장해 주세요.
     • refreshToken은 디바이스에 저장하되, AsyncStorage보다 보안에 강한 SecureStore에 저장해 주세요.

   • [ ] project/web/src/commons/settings/apollo-setting/index.tsx 경로에 refreshToken과 관련된 설정을 추가해 주세요.

     ⇒ errorLink를 사용하여, accessToken이 만료된 경우를 감지하고, refreshToken을 전송하여 accessToken을 재발급 받아 주세요.

     • restoreAccessToken API를 사용해 주세요(HTTP header Authorization에 Bearer 방식으로 refreshToken을 포함하여 요청)

     ⇒ 재발급 받은 accessToken은 앱(웹뷰가 아닌 react-native로 만든 페이지)에서도 사용할 수 있도록 모바일디바이스에 저장해 주세요.

     ⇒ 필요한 경우 추가로 별도의 파일을 만들어서 사용해 주세요.

     • ex: project/web/src/commons/libraries/get-access-token.ts

2. 공통(웹)

   • [ ] project/web/src/commons/settings/routing-setting/index.tsx 경로에 페이지이동을 감지하여 애니메이션을 발생시키는 로직을 만들어 주세요.

     ⇒ 필요시 hook.ts 파일을 만들어서 사용해도 좋습니다.

     ⇒ 안드로이드 백버튼과 연동하여 뒤로가기시에는 뒤로가는 애니메이션을 작동시켜 주세요.

   • [ ] project/web/src/commons/settings/apollo-setting/index.tsx 경로에 graphql 요청이 가능하도록 설정을 만들어 주세요.

     ⇒ 백엔드 엔드포인트는 https://main-hybrid.codebootcamp.co.kr/graphql로 설정해 주세요.

     ⇒ 로그인하여 accessToken이 있는 경우, 글로벌스테이트에서 꺼내온 accessToken을 HTTP header에 포함시켜 주세요.

3. 스플래시페이지

   • [ ] project/web/src/app/onboarding/splash/page.tsx 경로에 피그마 참조하시어 스플래시페이지를 만들어 주세요.

     ⇒ 3초 후에 로그인화면으로 이동해 주세요.(useEffect, setTimeout 등 다양한 기능을 자유롭게 사용해 주세요.)

     ⇒ 현재 단계에서는 이미 로그인이 되어있더라도, 매번 새롭게 로그인 화면으로 이동하여 로그인합니다.

     ⇒ 웹뷰의 시작페이지를 스플래시페이지로 변경해 주세요.

4. 글 작성/수정페이지

   • [ ] 제공되는 엔드포인트"https://main-hybrid.codebootcamp.co.kr/graphql"를 연결해주세요.

     ⇒ 이미지 업로드도 포함해주세요.

     ⇒ 지도 lat, lng 포함, 기존에 만든 api를 expo-location과 연결해보세요.

5. 솔플레이스로그-목록페이지(풀투리프레시)

   • [ ] project/web/src/app/solplace-logs/page.tsx 경로에서 게시글목록에 풀투리프레시를 적용해 주세요.