Skip to content

MaxWidthWrapper 생성 해두었습니다.

Kim Dong Hyun edited this page Nov 8, 2023 · 1 revision

목적

아이템 카드나, 기타 UI 컴포넌트가 width에 따라 길어져 다소 시각적으로 불편한 현상이 일어나 길이를 제한 하는 래퍼 컴포넌트를 공통으로 두면 좋을것 같다고 생각했습니다.

코드

const MaxWidthWrapper = ({ children }: { children: JSX.Element[] }) => {
  return <div className="max-w-[450px] mx-auto">{children}</div>
}

export default MaxWidthWrapper

굉장히 간단한 코드지만 유용할 것 같아 domain 디렉토리 쪽에 넣어두었습니다. (나중에 한번에 max-w 를 고치는것보다 컴포넌트를 두어 한번에 고치는게 좋겠다라는 생각이들었습니다.) 현재 450으로 px이 고정되어있지만 필요에 따라 나중에 변경 할 수도 있을 것 같습니다.