반응형을 위한 breakpoints 정의 및 responsiveStyle 구현

반응형 스타일링을 할 때마다 media query를 반복적으로 사용하는 문제를 해결하기 위해, breakpoints와 responsiveStyle 함수를 구현했습니다.

breakpoints 및 media query 정의

먼저, 태블릿과 모바일에 대한 breakpoints를 정의했습니다.

export const breakpoints = {
  tablet: '768px',
  mobile: '480px',
} as const;

export const mediaQueries = {
  tablet: `@media (max-width: ${breakpoints.tablet})`,
  mobile: `@media (max-width: ${breakpoints.mobile})`,
};

responsiveStyle 함수 구현

위에서 정의한 breakpoints를 기반으로 명시적이고 반복성을 줄인 반응형 스타일링을 구현하기 위해 responsiveStyle 함수를 만들었습니다. 해당 함수는 각 breakpoint에 맞춰 스타일을 적용할 수 있습니다.

export const responsiveStyle = (styles: {
  default?: { [key: string]: string };
  tablet?: { [key: string]: string };
  mobile?: { [key: string]: string };
}) => ({
  ...styles.default,
  [theme.mediaQueries.tablet]: {
    ...styles.tablet,
  },
  [theme.mediaQueries.mobile]: {
    ...styles.mobile,
  },
});

default, tablet, mobile 옵션을 선택적으로 받기 때문에 각 breakpoints에 맞는 스타일을 설정할 수 있습니다.

Usage

다음은 tablet과 mobile에 따라 margin-right 속성이 반응형으로 적용되는 예시입니다.

import { responsiveStyle } from '@/assets/styles/helpers/responsive';

export default function Example() {
  return (
    <div
      css={responsiveStyle({
        tablet: { marginRight: '32px' },
        mobile: { marginRight: '24px' },
      })}
    >
      ...
    </div>
  );
}

Layout 컴포넌트 개선

Header와 Footer가 공통적으로 사용되는 페이지에서, 개별적으로 렌더링하는 대신 하나의 Layout 컴포넌트로 결합하여 반복을 줄이고 유지보수성을 높이는 것이 좋다고 판단하였습니다.

Layout 컴포넌트

import { ReactNode } from 'react';
import Footer from './Footer';
import Header from './Header';

export default function Layout({ children }: { children: ReactNode }) {
  return (
    <>
      <Header />
      {children}
      <Footer />
    </>
  );
}

Usage

import Layout from '@features/layout';

export default function Example() {
  return (
    <Layout>
      // contents
    </Layout>
  );
}

AUTH path 분리

기존에 ROUTE_PATH에서 모든 경로를 관리하는 대신, 페이지별 연관성을 고려해 경로를 분리했습니다.