Result Section

데이터 로딩 결과나 액션 완료 여부처럼 사용자 행동의 결과를 알려주고 다음 행동을 안내하는 템플릿이에요.

아직 판매 중인 상품이 없어요

첫 상품을 등록하고 판매를 시작해 보세요

설치

pnpm dlx shadcn@latest add https://rebar.conmarket-landing.workers.dev/r/result-section.json

pnpm dlx shadcn@latest add https://rebar.conmarket-landing.workers.dev/r/result-section.json

class-variance-authority 와 Action Button 을 설치하고 아래 코드를 components/ui/result-section.tsx 에 복사해요.

components/ui/result-section.tsx

/** * @title Result Section * @description 데이터 로딩 결과나 액션 완료 여부처럼 사용자 행동의 결과를 알려주고 다음 행동을 안내하는 템플릿이에요. */import * as React from 'react';import { cva } from 'class-variance-authority';import { cn } from '@/lib/utils';import { ActionButton, type ActionButtonProps } from '@/components/ui/action-button';// SEED React snippet: result-section.tsx (title t8/t5 bold, description t5/t4 regular)const textVariants = {  container: cva('flex flex-col', {    variants: { size: { large: 'gap-x3 pb-x7', medium: 'gap-x2 pb-x6' } },    defaultVariants: { size: 'large' },  }),  title: cva('whitespace-pre-line text-center font-bold text-fg-neutral', {    variants: { size: { large: 'text-t8', medium: 'text-t5' } },    defaultVariants: { size: 'large' },  }),  description: cva('whitespace-pre-line text-center font-regular text-fg-neutral-muted', {    variants: { size: { large: 'text-t5', medium: 'text-t4' } },    defaultVariants: { size: 'large' },  }),};export interface ResultSectionProps extends Omit<React.ComponentProps<'div'>, 'title' | 'children'> {  /**   * 전체 화면은 `large`, 카드·섹션 같은 일부 영역은 `medium` 을 사용해요.   * @default "large"   */  size?: 'large' | 'medium';  /** 아이콘, 일러스트, Lottie 등 상태를 표현하는 에셋이에요. 아래 여백은 에셋 쪽에서 지정해요. */  asset?: React.ReactNode;  title?: React.ReactNode;  description?: React.ReactNode;  /** Neutral Weak · Medium 버튼으로 렌더링돼요. */  primaryActionProps?: ActionButtonProps;  /** Ghost · Small 버튼으로 렌더링돼요. */  secondaryActionProps?: ActionButtonProps;}function ResultSection({  className,  size = 'large',  asset,  title,  description,  primaryActionProps,  secondaryActionProps,  ...props}: ResultSectionProps) {  return (    <div      data-slot="result-section"      data-size={size}      className={cn('flex grow flex-col items-center justify-center px-x12 py-x4', className)}      {...props}    >      {asset && (        <div data-slot="result-section-asset" className="flex items-center justify-center">          {asset}        </div>      )}      <div data-slot="result-section-text" className={textVariants.container({ size })}>        {title && (          <div data-slot="result-section-title" className={textVariants.title({ size })}>            {title}          </div>        )}        {description && (          <div data-slot="result-section-description" className={textVariants.description({ size })}>            {description}          </div>        )}      </div>      {(primaryActionProps || secondaryActionProps) && (        <div data-slot="result-section-actions" className="flex flex-col items-center gap-x5">          {primaryActionProps && <ActionButton variant="neutralWeak" size="medium" {...primaryActionProps} />}          {secondaryActionProps && (            <ActionButton              variant="ghost"              size="small"              {...secondaryActionProps}              // bleed: ghost 버튼의 padding 만큼 바깥으로 넓혀 시각적 정렬을 맞춰요.              className={cn('-mx-x3_5 -my-x2 font-bold text-fg-neutral', secondaryActionProps.className)}            />          )}        </div>      )}    </div>  );}export { ResultSection };

Anatomy

Result Section은 시각적 이해를 돕는 Asset과 핵심 메시지를 담은 Title을 중심으로, 상세 정보를 위한 Description과 다음 행동을 유도하는 Button을 선택적으로 조합해 구성해요. 모든 구성 요소는 화면에 따라 생략할 수 있어요.

컴포넌트 자체에는 배경색이 없어요.

Properties

Size

Title과 Description은 Large, Medium 두 가지 크기로 제공돼요. 컴포넌트가 놓이는 영역의 크기에 맞춰 선택해요.

Size	사용 상황
Large	전체 화면을 차지하는 상태를 표현할 때 사용해요.
Medium	카드나 섹션 등 페이지의 일부 영역에서 상태를 표현할 때 주로 사용해요.

Large 타이틀

부가 설명을 적어 주세요

Medium 타이틀

부가 설명을 적어 주세요

Buttons

Result Section 영역 안에 버튼을 제공해요. 현재 상태를 해결하거나(재시도) 선택적인 옵션을 제공할 때 적합하고, 버튼을 모두 생략할 수도 있어요. 주요 버튼은 Neutral Weak · Medium, 보조 버튼은 Ghost · Small로 렌더링돼요.

버튼 두 개

해결 액션과 보조 액션을 함께 제공해요

버튼 한 개

필요한 버튼만 골라 써요

버튼 없음

안내만 필요할 때는 버튼을 생략해요

Layout

Result Section은 항상 자신을 감싸는 부모 컨테이너를 기준으로 중앙 정렬돼요. 최상위 레이아웃에 두면 화면 정중앙에, 카드나 섹션 안에 두면 해당 영역 안에서 중앙에 위치해요.

최근 본 상품

최근 본 상품이 없어요

관심 있는 상품을 둘러보세요

Asset type

자주 쓰는 Asset 타입은 다음과 같아요. asset 슬롯에 원하는 요소를 넣고, 요소 크기에 맞춰 아래 여백(pb-x4 등)을 조절해요.

Lottie: 가장 자주 쓰이는 완료(Complete)·실패(Fail) 상태를 애니메이션으로 표현해요. 라이트/다크 모드별 에셋을 따로 준비해요.
Icon: 일러스트 대신 아이콘을 쓸 수 있어요. 주로 Empty(데이터 없음) 상태에 사용해요.
2D, 3D Asset: 일반적인 성공·실패가 아닌 서비스 고유의 맥락을 표현할 때 사용해요.
Custom: 화면 맥락에 맞는 그래픽을 자유롭게 넣을 수 있어요.

Guidelines

상태별 사용

결제가 완료됐어요

판매자가 확인하면 알림으로 알려드릴게요

불러오지 못했어요

네트워크 상태를 확인하고 다시 시도해 주세요

받은 쿠폰이 없어요

이벤트에 참여하고 쿠폰을 받아 보세요

Success / Complete: 사용자의 행동이 성공적으로 완료됐음을 알려줘요. 결과를 명확히 보여주고, 다음 행동이 필요하면 버튼으로 안내해요.
Error / Failure: 사용자의 행동이 실패했음을 알려줘요. 사용자가 상황을 이해하고 문제를 해결할 수 있도록 다음에 할 행동을 명확히 안내해요.
Empty / First-time use: 화면에 내용이 없음을 알려줘요. 무엇을 해야 할지 알려 주어 행동을 유도하고 이탈을 막아요.

3D Asset 사용

서비스의 맥락과 브랜딩을 강화하기 위해 3D 에셋을 사용할 수 있어요.

Do· 서비스 고유의 경험

특정 서비스에서만 제공하는 경험을 표현할 때 3D 에셋을 사용해요.

Don't· 범용 메시지

"가입 보류" 같은 범용적인 메시지는 3D 에셋으로 표현하지 않아요.

버튼의 위계는 상황에 맞게 조절하기

메시지의 중요도와 사용자가 처한 맥락에 따라 버튼 위계를 정해 다음 행동을 효과적으로 유도해요.

Button 유형	설명
Bottom CTA	화면 하단 전체를 차지하는 버튼이에요. 시각적 무게감이 가장 크며, 사용자가 가장 먼저 해야 할 핵심 행동을 안내해요.
Contained Button	Result Section 영역 안에 포함되는 작은 버튼이에요. Bottom CTA보다 중요도가 낮으며, 현재 상태를 해결하거나 보조 정보를 제공해요.

실패 시 화면 맥락에 맞는 액션 제공하기

실패 화면의 이탈 버튼은 현재 화면의 성격(전체 화면 vs 임시 화면)에 따라 구분해서 사용해요.

버튼	역할
< (뒤로 가기)	입력 오류처럼 수정이 필요할 때 직전 단계로 돌려보내요.
X (닫기)	모달이나 팝업 같은 임시 레이어를 닫고 원래 보던 화면으로 돌아가요.
돌아가기	되돌아갈 수 없는 상황에서 홈 같은 안전한 목적지로 안내해요.
다시 시도	실패한 작업을 바로 다시 실행해요. 위 버튼들과 함께 사용할 수 있어요.

로딩 이후 상태 표현하기

로딩이 끝난 뒤에는 작업 결과에 따라 성공, 실패 등의 Result Section을 이어서 보여주어 명확한 피드백을 제공해요.

/** * @title Result Section * @description 데이터 로딩 결과나 액션 완료 여부처럼 사용자 행동의 결과를 알려주고 다음 행동을 안내하는 템플릿이에요. */ import * as React from 'react'; import { cva } from 'class-variance-authority'; import { cn } from '@/lib/utils'; import { ActionButton, type ActionButtonProps } from '@/components/ui/action-button'; // SEED React snippet: result-section.tsx (title t8/t5 bold, description t5/t4 regular) const textVariants = { container: cva('flex flex-col', { variants: { size: { large: 'gap-x3 pb-x7', medium: 'gap-x2 pb-x6' } }, defaultVariants: { size: 'large' }, }), title: cva('whitespace-pre-line text-center font-bold text-fg-neutral', { variants: { size: { large: 'text-t8', medium: 'text-t5' } }, defaultVariants: { size: 'large' }, }), description: cva('whitespace-pre-line text-center font-regular text-fg-neutral-muted', { variants: { size: { large: 'text-t5', medium: 'text-t4' } }, defaultVariants: { size: 'large' }, }), }; export interface ResultSectionProps extends Omit<React.ComponentProps<'div'>, 'title' | 'children'> { /** * 전체 화면은 `large`, 카드·섹션 같은 일부 영역은 `medium` 을 사용해요. * @default "large" */ size?: 'large' | 'medium'; /** 아이콘, 일러스트, Lottie 등 상태를 표현하는 에셋이에요. 아래 여백은 에셋 쪽에서 지정해요. */ asset?: React.ReactNode; title?: React.ReactNode; description?: React.ReactNode; /** Neutral Weak · Medium 버튼으로 렌더링돼요. */ primaryActionProps?: ActionButtonProps; /** Ghost · Small 버튼으로 렌더링돼요. */ secondaryActionProps?: ActionButtonProps; } function ResultSection({ className, size = 'large', asset, title, description, primaryActionProps, secondaryActionProps, ...props }: ResultSectionProps) { return ( <div data-slot="result-section" data-size={size} className={cn('flex grow flex-col items-center justify-center px-x12 py-x4', className)} {...props} > {asset && ( <div data-slot="result-section-asset" className="flex items-center justify-center"> {asset} </div> )} <div data-slot="result-section-text" className={textVariants.container({ size })}> {title && ( <div data-slot="result-section-title" className={textVariants.title({ size })}> {title} </div> )} {description && ( <div data-slot="result-section-description" className={textVariants.description({ size })}> {description} </div> )} </div> {(primaryActionProps || secondaryActionProps) && ( <div data-slot="result-section-actions" className="flex flex-col items-center gap-x5"> {primaryActionProps && <ActionButton variant="neutralWeak" size="medium" {...primaryActionProps} />} {secondaryActionProps && ( <ActionButton variant="ghost" size="small" {...secondaryActionProps} // bleed: ghost 버튼의 padding 만큼 바깥으로 넓혀 시각적 정렬을 맞춰요. className={cn('-mx-x3_5 -my-x2 font-bold text-fg-neutral', secondaryActionProps.className)} /> )} </div> )} </div> ); } export { ResultSection };

/** * @title Result Section * @description 데이터 로딩 결과나 액션 완료 여부처럼 사용자 행동의 결과를 알려주고 다음 행동을 안내하는 템플릿이에요. */import * as React from 'react';import { cva } from 'class-variance-authority';import { cn } from '@/lib/utils';import { ActionButton, type ActionButtonProps } from '@/components/ui/action-button';// SEED React snippet: result-section.tsx (title t8/t5 bold, description t5/t4 regular)const textVariants = { container: cva('flex flex-col', { variants: { size: { large: 'gap-x3 pb-x7', medium: 'gap-x2 pb-x6' } }, defaultVariants: { size: 'large' }, }), title: cva('whitespace-pre-line text-center font-bold text-fg-neutral', { variants: { size: { large: 'text-t8', medium: 'text-t5' } }, defaultVariants: { size: 'large' }, }), description: cva('whitespace-pre-line text-center font-regular text-fg-neutral-muted', { variants: { size: { large: 'text-t5', medium: 'text-t4' } }, defaultVariants: { size: 'large' }, }),};export interface ResultSectionProps extends Omit<React.ComponentProps<'div'>, 'title' | 'children'> { /** * 전체 화면은 `large`, 카드·섹션 같은 일부 영역은 `medium` 을 사용해요. * @default "large" */ size?: 'large' | 'medium'; /** 아이콘, 일러스트, Lottie 등 상태를 표현하는 에셋이에요. 아래 여백은 에셋 쪽에서 지정해요. */ asset?: React.ReactNode; title?: React.ReactNode; description?: React.ReactNode; /** Neutral Weak · Medium 버튼으로 렌더링돼요. */ primaryActionProps?: ActionButtonProps; /** Ghost · Small 버튼으로 렌더링돼요. */ secondaryActionProps?: ActionButtonProps;}function ResultSection({ className, size = 'large', asset, title, description, primaryActionProps, secondaryActionProps, ...props}: ResultSectionProps) { return ( <div data-slot="result-section" data-size={size} className={cn('flex grow flex-col items-center justify-center px-x12 py-x4', className)} {...props} > {asset && ( <div data-slot="result-section-asset" className="flex items-center justify-center"> {asset} </div> )} <div data-slot="result-section-text" className={textVariants.container({ size })}> {title && ( <div data-slot="result-section-title" className={textVariants.title({ size })}> {title} </div> )} {description && ( <div data-slot="result-section-description" className={textVariants.description({ size })}> {description} </div> )} </div> {(primaryActionProps || secondaryActionProps) && ( <div data-slot="result-section-actions" className="flex flex-col items-center gap-x5"> {primaryActionProps && <ActionButton variant="neutralWeak" size="medium" {...primaryActionProps} />} {secondaryActionProps && ( <ActionButton variant="ghost" size="small" {...secondaryActionProps} // bleed: ghost 버튼의 padding 만큼 바깥으로 넓혀 시각적 정렬을 맞춰요. className={cn('-mx-x3_5 -my-x2 font-bold text-fg-neutral', secondaryActionProps.className)} /> )} </div> )} </div> );}export { ResultSection };

Result Section

설치Copy Anchor Link

수동 설치

AnatomyCopy Anchor Link

PropertiesCopy Anchor Link

SizeCopy Anchor Link

ButtonsCopy Anchor Link

LayoutCopy Anchor Link

Asset typeCopy Anchor Link

GuidelinesCopy Anchor Link

상태별 사용Copy Anchor Link

3D Asset 사용Copy Anchor Link

버튼의 위계는 상황에 맞게 조절하기Copy Anchor Link

실패 시 화면 맥락에 맞는 액션 제공하기Copy Anchor Link

로딩 이후 상태 표현하기Copy Anchor Link

PropsCopy Anchor Link

On this page

설치