<aside> 💡

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

</aside>

<aside> 💡

아직 API는 제공되지 않습니다.(추후에 제공될 예정입니다.)

리스트와 같은 페이지에 데이터를 넣어서 테스트하고싶으신 분들은 mockdata를 만들어서 진행해주시면 됩니다. 단순히 mockdata 파일(ex. mockdata.ts)을 만들어서 데이터를 추가해줘도 좋습니다.

더 나아가서 msw에 대해서도 공부해볼까요?(수업으로는 제공되지 않았지만 스스로 공부해보셔도 좋을 것 같습니다. 제공되는 레퍼런스 코드에도 msw로 제공 될 예정입니다.)

</aside>

1. 공통(웹)

   • [ ] project/web/src/commons/layout 경로에 레이아웃을 추가해 주세요.

     ⇒ project/web/src/commons/layout/footer.tsx 경로는 레이아웃에 적용될 푸터입니다. (푸터는 short 컨텐츠인 경우와 long 컨텐츠 모두 올바르게 작동하도록 만들고, 상황에 따라 fixed도 가능하도록 만들어 주세요.)

2. 솔플레이스로그-등록페이지

   • [ ] 등록페이지의 길이에 따라 올바르게 푸터가 적용되도록 만들어 주세요. (fixed 푸터로 설정하지 않습니다.)

3. 솔플레이스로그-수정페이지

   • [ ] 등록페이지와 수정페이지는 같은 컴포넌트를 공유하도록 하지 않습니다.

     ⇒ 추후의 유지보수와 확장성을 위해서 폼 등록과 같은 컴포넌트를 공유하지 않습니다.

     ⇒ 단, 인풋, 버튼과 같은 컴포넌트들은 공유해야합니다.

     ⇒ 정답은 없습니다. 아래 예시와 폴더구조를 참고해주세요.

     

     

   • [ ] project/web/src/app/solplace-logs/[solplaceLogId]/edit/page.tsx 경로에 피그마를 참고하여 UI 및 기능을 완성해 주세요.

     ⇒ 웹에서의 기능 및 라이브러리 추가에 제한을 두지 않습니다.

     ⇒ 컴포넌트의 폴더 경로(또는 npm 업로드) 추가 등에 제한을 두지 않습니다.

   • [ ] rem 단위를 적용하여 비율늘리기를 적용해 주세요.

   • [ ] 등록시 입력했던 값들이 초기값으로 들어가 있어야 합니다.

   • [ ] 이미지 수정은 삭제/추가 방식으로 적용해 주세요.

   • [ ] 휴대폰 노치영역은 침범하지 않습니다. ⇒ 노치영역과 겹치지 않도록 만들어 주세요.

   • [ ] 지도영역은 현재 수정페이지에서 readonly 상태이므로, 서울시청의 lat, lng를 기본값으로 사용하여 나타내 주세요.

   • [ ] 사진영역은 좌우스크롤이 가능해야 합니다.

4. 솔플레이스로그-목록페이지

   • [ ] project/web/src/app/solplace-logs/page.tsx 경로에 피그마를 참고하여 UI 및 기능을 완성해 주세요.

     ⇒ 웹에서의 기능 및 라이브러리 추가에 제한을 두지 않습니다.

     ⇒ 컴포넌트의 폴더 경로(또는 npm 업로드) 추가 등에 제한을 두지 않습니다.

   • [ ] rem 단위를 적용하여 비율늘리기를 적용해 주세요.

   • [ ] 스크롤을 내리면 추가 페이지를 불러와야 합니다.

   • [ ] 휴대폰 노치영역은 침범하지 않습니다.

     ⇒ 노치영역과 겹치지 않도록 만들어 주세요.

   • [ ] 푸터는 fixed 푸터로 설정해 주세요.