이로울 | 포트폴리오

Feedback

Interactive UI Explorer

아래에서 각 컴포넌트의 다양한 Variants와 States를 문서화된 형태로 테스트해볼 수 있습니다.

Live Preview

결과가 없어요

필터를 조정해 보세요

불러오기 실패

네트워크를 확인해 주세요

불러오는 중

잠시만 기다려 주세요

Feedback States

Empty / Error / Loading 상태를 하나의 컴포넌트에서 전환해 보면서,
실제 서비스에서도 그대로 재사용할 수 있는 디자인 시스템용 Feedback 컴포넌트 세트입니다.

FeedbackShowcase

Empty / Error / Loading 상태를 탭처럼 전환하여 시각적으로 확인할 수 있는 쇼케이스 컴포넌트

Source Code

          import { FeedbackShowcase } from '@/components';

          <FeedbackShowcase />

아직 생성된 항목이 없어요

지금 바로 첫 번째 항목을 만들어보세요.

Live Preview

Implementation

제작 코드

이 컴포넌트가 실제로 어떻게 구현되어 있는지 — 본체 .tsx 파일을 그대로 보여줍니다. variant 매핑·접근성 처리·forwardRef 패턴 등 디테일을 그대로 확인할 수 있어요.

'use client';

import type { FeedbackBaseProps } from './types';
import { cn } from '@/lib/cn';

export interface EmptyStateProps extends FeedbackBaseProps {}

/**
 * EmptyState
 *
 * - 데이터가 없을 때 표시하는 상태 컴포넌트
 * - "처음 시작해 보세요", "항목을 추가해 보세요" 같은 행동 유도에 적합
 */
export function EmptyState({
  title,
  description,
  icon,
  action,
  className,
}: EmptyStateProps) {
  return (
    <div
      className={cn(
        'flex flex-col items-center justify-center gap-3 rounded-2xl border border-slate-200 bg-white px-6 py-10 text-center',
        className,
      )}
    >
      <span className="flex size-12 items-center justify-center rounded-2xl bg-slate-100 text-slate-400">
        {icon ?? (
          <svg className="size-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.5}>
            <path strokeLinecap="round" strokeLinejoin="round" d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-4l-2 3h-4l-2-3H4" />
          </svg>
        )}
      </span>
      <div>
        <h3 className="text-sm font-bold text-slate-700">{title}</h3>
        {description && (
          <p className="mt-1 max-w-md text-xs text-slate-400">{description}</p>
        )}
      </div>
      {action && <div className="mt-2">{action}</div>}
    </div>
  );
}