AdminPageCard

Layout

관리자 화면의 본문을 카드 표면으로 감싸는 레이아웃 컨테이너.

Usage

관리자 목록·상세 화면의 본문 영역을 일관된 카드 표면과 여백으로 묶을 때 사용한다.

import

import { AdminPageCard } from '@mildang/design-system/unofficial/AdminPageCard';

예제를 복사해 쓸 때 필요한 준비

• @mildang/styled-system 은 이 저장소에서 Panda 가 생성하는 산출물이다. 저장소 안에서는 turbo run ship 이후 쓸 수 있고, 패키지 소비자는 자기 Panda 산출물이나 다른 레이아웃 수단으로 바꿔야 한다.

API Reference

AdminPageCard Props

Prop

Type

Default

"div" | "article" | "main" | "section"

div

className

string

지정 안 함

SystemStyleObject

지정 안 함

예제

기본 카드

코드

import {
  AdminPageCard,
  type AdminPageCardProps,
} from '@mildang/design-system/unofficial/AdminPageCard';

const STORY_DEFAULT_ARGS = {
  sx: { h: '100%', p: '24px 28px 12px 28px' },
  children: <p>카드 본문</p>,
} satisfies AdminPageCardProps;

export default function AdminPageCardDefaultExample(props: Partial<AdminPageCardProps> = {}) {
  const mergedProps = { ...STORY_DEFAULT_ARGS, ...props };
  return <AdminPageCard {...mergedProps} />;
}

목록 레이아웃

코드

import {
  AdminPageCard,
  type AdminPageCardProps,
} from '@mildang/design-system/unofficial/AdminPageCard';
import { css } from '@mildang/styled-system/css';

const STORY_DEFAULT_ARGS = {
  sx: {
    h: '100%',
    p: '24px 28px 12px 28px',
    display: 'grid',
    gridTemplateRows: 'auto 1fr auto',
    gap: '24px',
    overflow: 'hidden',
  },
  children: (
    <>
      <h1 className={css({ textStyle: 'title-2xl' })}>제목</h1>
      <div className={css({ bg: 'primary.ghostBg.low', borderRadius: '8px' })} />
      <p className={css({ textStyle: 'contents-sm', color: 'primary.text.low' })}>푸터</p>
    </>
  ),
} satisfies AdminPageCardProps;

export default function AdminPageCardListLayoutExample(props: Partial<AdminPageCardProps> = {}) {
  const mergedProps = { ...STORY_DEFAULT_ARGS, ...props };
  return <AdminPageCard {...mergedProps} />;
}

section 요소

코드

import {
  AdminPageCard,
  type AdminPageCardProps,
} from '@mildang/design-system/unofficial/AdminPageCard';

const STORY_DEFAULT_ARGS = {
  as: 'section',
  'aria-label': '상담 모니터링',
  sx: { h: '100%', p: '24px 28px' },
  children: <p>section으로 렌더된 카드</p>,
} satisfies AdminPageCardProps;

export default function AdminPageCardAsSectionExample(props: Partial<AdminPageCardProps> = {}) {
  const mergedProps = { ...STORY_DEFAULT_ARGS, ...props };
  return <AdminPageCard {...mergedProps} />;
}