Fittering 개발 기록 - 내 맞춤 정보 설정 UI 작업

thumbzzero·2023년 8월 2일

SWM Fittering 개발 기록

목록 보기

3/10

개발 내용

내 맞춤 정보 설정(/user/mysize/*) 관련 UI 추가

내 체형 정보 조회
맞춤 정보 입력 방식 선택 모달창
스마트 분석 사진 등록
내 체형 정보 직접 입력하기

배운 점 & 트러블 슈팅

`position: fixed`로 아래에 고정되어 있는 모바일 Navbar로 인해 콘텐츠 잘림 현상 해결

position: fixed; 속성을 사용하여 아래에 고정된 Navbar의 경우, 해당 요소는 더 이상 문서 흐름을 차지하지 않기 때문에 다른 컨텐츠와 겹칠 수 있음
일반적으로 fixed 위치 요소는 뷰포트를 기준으로 배치되기 때문에 다른 요소들이 아래로 밀려남

-> Navbar의 높이만큼 다른 요소의 margin 값을 설정하여 자리를 만들어주는 방법이 많이 사용됨

/* layout.tsx */

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="ko" className={inter.className}>
      <body className="flex flex-col w-full px-4 lg:px-0 max-w-screen-lg mx-auto mb-[6rem] md:mb-0">
        <Header />
        <main className="grow">{children}</main>
        <MobileNavbar />
      </body>
    </html>
  );
}