밀당 DS

시작하기

HelpText

Foundation

입력값 아래에 도움말이나 검증 메시지를 다는 텍스트.

Usage

입력·선택 필드의 규칙이나 예시를 짧게 안내할 때 사용한다. 입력 중 검증 결과를 error·warning·success 상태로 즉시 알려야 할 때 사용한다. 최대 글자 수나 남은 글자 수처럼 입력 제한 정보를 표시할 때 사용한다. 자세한 가이드나 정책으로 이어지는 보조 링크가 필요할 때 사용한다.

import

import

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

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

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

• 외부 패키지를 따로 설치한다. DS 의 전이 의존성에 기대지 않는다.

API Reference

HelpText Props

Prop

Type

Default

asChild

boolean

false

className

string

지정 안 함

showIcon

boolean

false

variant

"link" | "info" | "error" | "warning" | "success"

info

사용 가이드

권장

  • 같은 위치에 메시지가 겹치면 error, warning, info 순으로 우선순위를 정한다.

지양

  • 레이블만 반복하거나 사용자가 해결할 방법이 없는 모호한 오류 문구를 쓰지 않는다.

예제

기본 사용

입력 아래에 붙는 안내 한 줄 — 채우기 전에 알려 줄 규칙을 info 로 적습니다.

코드

Open in Playground
import { default as HelpText, type HelpTextProps } from '@mildang/design-system/HelpText';

const STORY_DEFAULT_ARGS = { ...({}), ...({ children: 'Help Text', showIcon: false, variant: 'info' }) } as HelpTextProps;

const HelpTextDemoExampleRender = (args: HelpTextProps) => <HelpText {...args} />;

export default function HelpTextDemoExample(props: Partial<HelpTextProps>) {
  const mergedProps = { ...STORY_DEFAULT_ARGS, ...props } as HelpTextProps;
  return HelpTextDemoExampleRender(mergedProps);
}

상태와 아이콘

info·warning·error·success·link 다섯 상태를 비교합니다. 아이콘은 showIcon 으로 켜고 link 는 asChild 로 실제 링크를 감쌉니다.

코드

Open in Playground
import { default as HelpText, type HelpTextProps } from '@mildang/design-system/HelpText';

const STORY_DEFAULT_ARGS = { ...({}), ...({ children: '10 / 100', showIcon: false, variant: 'info' }) } as HelpTextProps;

const HelpTextCharacterCounterExampleRender = (args: HelpTextProps) => <HelpText {...args} />;

export default function HelpTextCharacterCounterExample(props: Partial<HelpTextProps>) {
  const mergedProps = { ...STORY_DEFAULT_ARGS, ...props } as HelpTextProps;
  return HelpTextCharacterCounterExampleRender(mergedProps);
}

StatusStates

코드

import { default as HelpText, type HelpTextProps } from '@mildang/design-system/HelpText';
import Link from 'next/link';

const STORY_DEFAULT_ARGS = { ...({}), ...({ children: 'Help Text' }) } as HelpTextProps;

const HelpTextStatusStatesExampleRender = (args: HelpTextProps) => (
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, auto)', gap: 24 }}>
      {(
        [
          { label: 'Info', variant: 'info' },
          { label: 'Warning', variant: 'warning' },
          { label: 'Error', variant: 'error' },
          { label: 'Link', variant: 'link' },
          { label: 'Success', variant: 'success' },
        ] as const
      ).map(({ label, variant }) => (
        <div key={variant} style={{ display: 'flex', flexDirection: 'column', gap: 8, alignItems: 'center' }}>
          <strong>{label}</strong>
          <div style={{ display: 'flex', gap: 20 }}>
            {variant === 'link' ? (
              <>
                <HelpText asChild {...args} variant="link">
                  <Link href="/">{args.children}</Link>
                </HelpText>
                <HelpText asChild {...args} variant="link" showIcon>
                  <Link href="/">{args.children}</Link>
                </HelpText>
              </>
            ) : (
              <>
                <HelpText {...args} variant={variant} />
                <HelpText {...args} variant={variant} showIcon />
              </>
            )}
          </div>
        </div>
      ))}
    </div>
  );

export default function HelpTextStatusStatesExample(props: Partial<HelpTextProps>) {
  const mergedProps = { ...STORY_DEFAULT_ARGS, ...props } as HelpTextProps;
  return HelpTextStatusStatesExampleRender(mergedProps);
}

Icon

코드

Open in Playground
import { default as HelpText, type HelpTextProps } from '@mildang/design-system/HelpText';

const STORY_DEFAULT_ARGS = { ...({}), ...({ children: 'Help Text', variant: 'info' }) } as HelpTextProps;

const HelpTextIconExampleRender = (args: HelpTextProps) => <HelpText {...args} showIcon />;

export default function HelpTextIconExample(props: Partial<HelpTextProps>) {
  const mergedProps = { ...STORY_DEFAULT_ARGS, ...props } as HelpTextProps;
  return HelpTextIconExampleRender(mergedProps);
}

LineBreakStory

코드

import { default as HelpText, type HelpTextProps } from '@mildang/design-system/HelpText';
import { Stack } from '@mildang/styled-system/jsx';
import Link from 'next/link';

const STORY_DEFAULT_ARGS = { ...({}), ...({
    children: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum neque mauris, pretium non egestas at, mollis at eros. Nullam accumsan ligula at nulla sollicitudin ultricies. Nullam sed laoreet lectus, sed efficitur elit. Nunc nec tortor scelerisque, convallis enim at, auctor magna. Donec laoreet mollis erat sit amet vulputate. Fusce mollis sed purus eget faucibus. Quisque eget consequat libero. Praesent id ultricies nisl.`,
  }) } as HelpTextProps;

const HelpTextLineBreakStoryExampleRender = (args: HelpTextProps) => {
    return (
      <Stack spacing={1} direction="column" width={'300px'}>
        <HelpText {...args} showIcon />
        <HelpText {...args} variant="error" showIcon />
        <HelpText {...args} variant="warning" />
        <HelpText asChild {...args} variant="link" showIcon>
          <Link href="/">{args.children}</Link>
        </HelpText>
        <HelpText {...args} showIcon />
      </Stack>
    );
  };

export default function HelpTextLineBreakStoryExample(props: Partial<HelpTextProps>) {
  const mergedProps = { ...STORY_DEFAULT_ARGS, ...props } as HelpTextProps;
  return HelpTextLineBreakStoryExampleRender(mergedProps);
}

LinkStory

코드

import { default as HelpText, type HelpTextProps } from '@mildang/design-system/HelpText';
import Link from 'next/link';

const STORY_DEFAULT_ARGS = { ...({}), ...({ variant: 'link' }) } as HelpTextProps;

const HelpTextLinkStoryExampleRender = (args: HelpTextProps) => (
    <HelpText asChild {...args}>
      <Link href="/">Link</Link>
    </HelpText>
  );

export default function HelpTextLinkStoryExample(props: Partial<HelpTextProps>) {
  const mergedProps = { ...STORY_DEFAULT_ARGS, ...props } as HelpTextProps;
  return HelpTextLinkStoryExampleRender(mergedProps);
}