Center

개요

Center는 <Flex $css={{ alignItems: 'center', justifyContent: 'center' }}> 의 단축 컴포넌트입니다. display: flex, align-items: center, justify-content: center가 기본 적용되며, Box의 모든 props를 그대로 상속합니다.

로딩 스피너나 빈 상태 화면처럼 콘텐츠를 정중앙에 놓을 때 가장 빠르게 쓸 수 있는 방법입니다.

언제 사용하나요

로딩 스피너를 영역 중앙에 배치할 때
빈 상태(empty state) 메시지와 일러스트를 가운데 정렬할 때
히어로 섹션에서 텍스트나 CTA를 중앙에 놓을 때
아이콘을 고정 크기 컨테이너 안에서 정중앙에 배치할 때

언제 사용하면 안 되나요

수평으로만 가운데 정렬할 때 → HStack에 $css={{ justifyContent: 'center' }}
수직으로만 가운데 정렬할 때 → VStack에 $css={{ justifyContent: 'center' }}
요소를 격자 형태로 배치할 때 → Grid

접근성

기본적으로 <div>를 렌더링합니다. 빈 상태나 로딩 영역에는 render prop으로 적절한 role을 가진 요소를 지정하세요.

// 로딩 영역에 role 지정
<Center render={<div role="status" aria-label="로딩 중" />} $css={{ height: '200px' }}>
  <Spinner />
</Center>

// 빈 상태 섹션
<Center render={<section />} $css={{ height: '400px' }}>
  <VStack $css={{ gap: '$spacing-300', alignItems: 'center' }}>
    <p>결과가 없습니다.</p>
  </VStack>
</Center>

Usage

기본 사용법

<Center $css={{ width: '300px', height: '160px', bgColor: '$background-2', rounded: '$radius-200' }}>
<Box $css={{ padding: '$spacing-300', bgColor: '$primary-10', rounded: '$radius-100' }}><Typo variant="$body-2">중앙 배치</Typo></Box>
</Center>

크기 지정

width와 height를 지정하면 그 안에서 자식이 정중앙에 놓입니다.

<HStack $css={{ gap: '$spacing-400', alignItems: 'flex-start' }}>
<Center $css={{ width: '80px', height: '80px', bgColor: '$background-3', rounded: '$radius-200' }}>
  <Box $css={{ color: '$text-2' }}><Typo variant="$body-2">S</Typo></Box>
</Center>
<Center $css={{ width: '160px', height: '120px', bgColor: '$background-3', rounded: '$radius-200' }}>
  <Box $css={{ color: '$text-2' }}><Typo variant="$body-2">M</Typo></Box>
</Center>
<Center $css={{ width: '240px', height: '160px', bgColor: '$background-3', rounded: '$radius-200' }}>
  <Box $css={{ color: '$text-2' }}><Typo variant="$body-2">L</Typo></Box>
</Center>
</HStack>

아이콘 중앙 배치

고정 크기 컨테이너 안에 아이콘을 정중앙에 놓는 패턴입니다.

<HStack $css={{ gap: '$spacing-300' }}>
<Center $css={{ width: '40px', height: '40px', bgColor: '$primary-10', rounded: '$radius-full' }}>
  <IconStarFilled size="$icon-lg" />
</Center>
<Center $css={{ width: '40px', height: '40px', bgColor: '$support-success-10', rounded: '$radius-full' }}>
  <IconCheckOutline size="$icon-lg" />
</Center>
<Center $css={{ width: '40px', height: '40px', bgColor: '$support-error-10', rounded: '$radius-full' }}>
  <IconCloseOutline size="$icon-lg" />
</Center>
</HStack>

로딩 상태

role="status"와 함께 사용해 스크린리더에 로딩 상태를 알립니다.

<Center
render={<div role="status" aria-label="로딩 중" />}
$css={{ width: '100%', height: '200px', bgColor: '$background-2', rounded: '$radius-300' }}
>
<VStack $css={{ gap: '$spacing-200', alignItems: 'center' }}>
  <Box $css={{ width: '32px', height: '32px', rounded: '$radius-full', borderColor: '$primary-50' }} style={{ border: '3px solid', borderTopColor: 'transparent', animation: 'spin 1s linear infinite' }} />
  <Box $css={{ color: '$text-3' }}><Typo variant="$body-2">불러오는 중...</Typo></Box>
</VStack>
</Center>

빈 상태 (empty state)

데이터가 없을 때 사용자에게 안내 메시지를 중앙에 표시합니다.

<Center $css={{ width: '100%', height: '280px', bgColor: '$background-2', rounded: '$radius-300' }}>
<VStack $css={{ gap: '$spacing-300', alignItems: 'center' }}>
  <Center $css={{ width: '64px', height: '64px', bgColor: '$background-3', rounded: '$radius-full' }}>
    <IconSearchOutline size="$icon-2xl" />
  </Center>
  <VStack $css={{ gap: '$spacing-100', alignItems: 'center' }}>
    <Box $css={{ color: '$text-1' }}><Typo variant="$body-2">검색 결과가 없습니다</Typo></Box>
    <Box $css={{ color: '$text-3' }}><Typo variant="$body-2">다른 키워드로 다시 시도해보세요.</Typo></Box>
  </VStack>
</VStack>
</Center>

반응형 크기

breakpoint별로 컨테이너 크기를 다르게 지정합니다.

<Center
$css={{
  width: '100%',
  height: { mobile: '120px', tablet: '200px', desktop: '280px' },
  bgColor: '$background-2',
  rounded: '$radius-300',
}}
>
<Box $css={{ color: '$text-2' }}><Typo variant="$body-2">반응형 컨테이너 중앙</Typo></Box>
</Center>

$css로 추가 스타일 적용

<Center
$css={{
  width: '100%',
  height: '200px',
  bgColor: { default: '$primary-10', hover: '$primary-20' },
  rounded: '$radius-300',
  elevation: '$elevation-sm',
}}
>
<VStack $css={{ gap: '$spacing-200', alignItems: 'center' }}>
  <Box $css={{ color: '$primary-70' }}><Typo variant="$body-2">시작하기</Typo></Box>
  <Box $css={{ color: '$primary-50' }}><Typo variant="$body-2">클릭해서 계속하세요</Typo></Box>
</VStack>
</Center>

Props

Center는 별도의 props를 추가하지 않습니다. BoxProps를 그대로 사용합니다.

Prop

Type

스타일

Center는 내부적으로 아래 스타일을 기본 적용합니다. $css로 덮어쓸 수 있습니다.

CSS 속성	기본값
`display`	`flex`
`align-items`	`center`
`justify-content`	`center`

On this page