<aside> 💡

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

</aside>

1. 공통(웹)

   • [ ] project/web/src/app/global.css 경로에서 html의 font-size를 조정하여 다양한 모바일 사이즈에 대응할 수 있도록 비율늘리기를 적용합니다.

     ⇒ 앞으로는 px 단위를 사용하지 않고, rem 단위로 작성합니다.

     ⇒ 기존에 작성된 px 단위가 있으면, rem 단위로 리팩토링 합니다.

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

     ⇒ project/web/src/commons/layout/index.tsx 경로는 레이아웃의 기준점 입니다.

     ⇒ project/web/src/commons/layout/header.tsx 경로는 레이아웃에 적용될 헤더입니다.

     ⇒ project/web/src/commons/layout/constants.ts 경로에 URL을 key로하며, 각 헤더의 옵션 객체를 value로 하는 객체를 만들어 주세요.

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

   • [ ] px 단위를 rem 단위로 리팩토링하여 비율늘리기를 적용해 주세요.
   • [ ] 글로벌헤더를 적용해 주세요.
   • [ ] 투명하지않은헤더를 적용해 주세요.

3. 솔플레이스로그-상세페이지

   • [ ] project/web/src/app/solplace-logs/[solplaceLogId]/page.tsx 경로에 02.png, 02-folding.png 이미지를 참고하여 UI 및 기능을 완성해 주세요.

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

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

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

   • [ ] 상세페이지와 같은 경우에는, 동적으로 제목을 불러와서 적용해야될 수 있으므로 로컬헤더를 적용해 주세요.

   • [ ] 투명한 헤더를 적용해 주세요.

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

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

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

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