공통 컴포넌트 스타일 고정이 만든 문제 해결

 

1차 배포 이후, UI 수정 및 코드 다듬기 작업을 하고 있었습니다. 홈 페이지의 로고의 크기를 반응형 별로 만들어 두지 않고 모바일 크기 하나로 통일해둬서 pc 브라우저 환경에서 로고 크기가 작아보였습니다.

UI를 수정하고자 로고 컴포넌트에서 로고의 크기를 키웠습니다.

// 기존 코드
className='h-10'

// 수정 후 코드
className='h-12 md:h-16 lg:h-20'

그러나 수정 후 예상치 못한 문제가 발생했습니다.

 

1. 문제 상황

레시피 상세 페이지 헤더에서도 동일한 로고 컴포넌트를 사용하고 있었기 때문에, 헤더 UI까지 함께 커져 레이아웃이 무너졌습니다.

 

2. 원인 분석

문제의 핵심은 공통 컴포넌트 내부에 특정 페이지 전용 스타일이 고정되어 있었다는 점 입니다.

// 반응형을 추가한 로고 컴포넌트 코드
export const BrandLogo = () => {
  return (
    <img
      src="/logo/MenuMateLogo.svg"
      alt="MenuMate logo"
      className="h-12 md:h-16 lg:h-20"
    />
  );
};

해당 구조에서는 어느 곳에서 import 해서 쓰든 간에 동일한 크기를 강제로 사용하게 됩니다.

즉, 컴포넌트 재사용은 하고 있었지만 실제로는 유연한 공통 컴포넌트가 아니었던 것입니다.

 

3. 해결 방법

컴포넌트가 외부에서 스타일을 주입받을 수 있도록 className props를 추가했습니다.

type BrandLogoProps = {
  className?: string;
};

export const BrandLogo = ({ className }: BrandLogoProps) => {
  return (
    <img
      src="/logo/MenuMateLogo.svg"
      alt="MenuMate logo"
      className={cn('h-10 w-auto select-none', className)}
    />
  );
};

 

 

홈 페이지 사용 예시

<BrandLogo className="h-12 md:h-16 lg:h-20" />

 

레시피 페이지 헤더 사용 예시

<BrandLogo className="h-8 md:h-10" />

 

4. 배운 점

• 공통 컴포넌트에 특정 페이지 전용 스타일을 고정하면 재사용성이 떨어질 수 있다는 점을 배웠습니다.
• 공통 컴포넌트는 공통 역할만 담당하고, 상황별 스타일은 외부에서 주입하는 구조가 유지보수에 유리하다는 것을 배웠습니다.
• 작은 UI 수정도 다른 페이지에 영향을 줄 수 있기 때문에 공통 컴포넌트 설계가 중요하다는 걸 배웠습니다.