Responsive

브레이크포인트에 따라 다른 컴포넌트를 렌더링하는 반응형 컴포넌트입니다.

Import

import { Responsive } from '@liner-engineering/orbit-kit';

브레이크포인트

Key	설명
xs	Extra Small
s	Small
m	Medium
l	Large
xl	Extra Large
xxl	2X Large
xxxl	3X Large

사용법

기본 사용법

<Responsive
  xs={<div>XS 화면</div>}
  s={<div>S 화면</div>}
  m={<div>M 화면</div>}
  l={<div>L 화면</div>}
  xl={<div>XL 화면</div>}
  xxl={<div>XXL 화면</div>}
  xxxl={<div>XXXL 화면</div>}
/>

일부 브레이크포인트만 사용

지정하지 않은 브레이크포인트는 가장 가까운 작은 브레이크포인트의 컴포넌트를 표시합니다.

<Responsive xs={<MobileHeader />} l={<DesktopHeader />} />
// xs, s, m: MobileHeader 렌더링
// l, xl, xxl, xxxl: DesktopHeader 렌더링

className 적용

<Responsive className="header-container" xs={<MobileHeader />} l={<DesktopHeader />} />

API

type BreakPointsKey = 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl' | 'xxxl';

interface ResponsiveProps {
  xs?: React.ReactNode;
  s?: React.ReactNode;
  m?: React.ReactNode;
  l?: React.ReactNode;
  xl?: React.ReactNode;
  xxl?: React.ReactNode;
  xxxl?: React.ReactNode;
  className?: string;
}

function Responsive(props: ResponsiveProps): JSX.Element;

Props

Prop	타입	필수	설명
xs	React.ReactNode	아니오	Extra Small 화면에서 렌더링할 컴포넌트
s	React.ReactNode	아니오	Small 화면에서 렌더링할 컴포넌트
m	React.ReactNode	아니오	Medium 화면에서 렌더링할 컴포넌트
l	React.ReactNode	아니오	Large 화면에서 렌더링할 컴포넌트
xl	React.ReactNode	아니오	Extra Large 화면에서 렌더링할 컴포넌트
xxl	React.ReactNode	아니오	2X Large 화면에서 렌더링할 컴포넌트
xxxl	React.ReactNode	아니오	3X Large 화면에서 렌더링할 컴포넌트
className	string	아니오	Media 컴포넌트에 적용할 CSS 클래스

예시

레이아웃 분기

import { Responsive } from '@liner-engineering/orbit-kit';

function Layout({ children }: { children: React.ReactNode }) {
  return (
    <>
      <Responsive xs={<MobileNavigation />} l={<DesktopSidebar />} />
      <main>{children}</main>
    </>
  );
}

카드 그리드

function CardGrid({ items }: { items: Item[] }) {
  return (
    <Responsive
      xs={
        <div className="grid grid-cols-1 gap-2">
          {items.map((item) => (
            <Card key={item.id} item={item} size="sm" />
          ))}
        </div>
      }
      m={
        <div className="grid grid-cols-2 gap-4">
          {items.map((item) => (
            <Card key={item.id} item={item} size="md" />
          ))}
        </div>
      }
      xl={
        <div className="grid grid-cols-4 gap-6">
          {items.map((item) => (
            <Card key={item.id} item={item} size="lg" />
          ))}
        </div>
      }
    />
  );
}

@liner-fe/prism

Responsive 컴포넌트는 내부적으로 @liner-fe/prism의 Media 컴포넌트를 사용합니다. 브레이크포인트 값은 prism 디자인 시스템을 따릅니다.

SSR 지원

@artsy/fresnel 기반으로 SSR을 지원합니다. 서버에서는 모든 브레이크포인트가 렌더링되고, 클라이언트에서 적절한 것만 표시됩니다.