모바일 환경에서 각 페이지를 방문하면, 가로 스크롤이 생기면서 흰색 여백이 생기는 것을 확인 하였고, header 에 지정된 padding이 box-sizing:content-box 기준에 따라 콘텐츠 넓이에 포함되어 생긴 문제이므로 불필요한 padding 을 제거하여 해결(padding 을 건드리지 않는다면 box-sizing을 border-box 로 설정해도 동일하게 해결 가능)
레시피 상세 조회 페이지 레이아웃 깨짐 문제 개선
레시피 상세 조회 페이지 방문 후 모바일 뷰 환경에서 콘텐츠가 가로로 정렬되어 레이아웃 깨짐이 발생함. 이 문제의 원인은 미디어 쿼리 적용 시 max-width 와 min-width 사이의 범위를 벗어난 경우에 해당 미디어 쿼리에 설정한 속성이 적용되지 않는 요소가 있었기 때문임. 따라서 해당 요소도 속성이 적용되도록 함으로써 해결
홈 페이지 슬라이드 레이아웃 깨짐 문제 개선
사용자가 사이트에 첫 방문하게 되면 보이는 슬라이드로 모바일 뷰에서 뷰 포트 높이가 617px 밑으로 내려가게 되면 레이아웃이 깨지는 문제가 발생함. 이 문제는 해당 높이에 대한 별도의 미디어 쿼리를 적용하여 해결함.
Local 관련 컴포넌트 SCSS 파일 통일
기존에 LocalFoodPage 와 LocalMarket 페이지의 경우 동일한 구성을 가지고 있음. 동일한 구조를 가지지만 서로 다른 페이지로서 기능을 수행하므로 컴포넌트 자체는 모듈화하지 않고, SCSS 파일을 하나의 파일로 통일하는 작업을 수행.
또한, 각각 pages/LocalMarket, pages/LocalFood 형식으로 구분되어 있던 폴더구조를 Local/LocalFood, Local/LocalMarket 과 같은 방식으로 유지보수가 편리한 방향으로 수정함
개요
메인 페이지별 레이아웃 깨짐 문제 개선
레시피 상세 조회 페이지 레이아웃 깨짐 문제 개선
홈 페이지 슬라이드 레이아웃 깨짐 문제 개선
Local 관련 컴포넌트 SCSS 파일 통일
그 외