Components / Feedback
Bottom Info
화면 하단에 고정되는 정보/경고 메시지 바입니다. 배경색으로 유형(info, warning, error)을 구분합니다.
사용법
Bottom Info는 현재 화면에 관련된 안내 사항이나 경고를 하단에 고정 표시합니다. 사용자의 시선이 자연스럽게 도달하는 위치입니다.
<BottomInfo type="info" message="감정서가 필요한 작품입니다" />
<div style="position:fixed;bottom:0;left:0;right:0;background:var(--charcoal);color:var(--white);padding:var(--space-3) var(--space-5);font-size:var(--text-xs);display:flex;justify-content:space-between;align-items:center"> <span>Information bar</span> <button style="color:var(--white);background:none;border:none;cursor:pointer;font-size:var(--text-xs)">Close</button> </div>
Info 타입
일반 안내 메시지를 전달합니다. 파란색 배경으로 표현됩니다.
<BottomInfo type="info" message="인증 완료된 작품입니다" />
Warning / Error 타입
경고는 주황색, 에러는 빨간색 배경으로 긴급도를 구분합니다.
<BottomInfo type="warning" message="결제 기한이 24시간 남았습니다" /> <BottomInfo type="error" message="결제에 실패하였습니다. 다시 시도해 주세요" />
접근성
| 속성 | 값 | 설명 |
|---|---|---|
role | "status" | 상태 메시지 영역임을 명시합니다. |
aria-live | "polite" | info 타입에 적용됩니다. |
aria-live | "assertive" | error 타입에 적용되어 즉시 알립니다. |
aria-label | "{type}: {message}" | 메시지 유형과 내용을 전달합니다. |
사용 방법 예시
빨래터
박수근 · 유화 · 45.5 x 38cm
₩12,000,000
인터페이스
BottomInfoProps
| 속성 | 필수 | 기본값 | 타입 | 설명 |
|---|---|---|---|---|
type | — | info | warning | error | 메시지 유형입니다. | |
message | — | string | 표시할 메시지 텍스트입니다. | |
icon | — | 자동 | ReactNode | 커스텀 아이콘입니다. 미지정 시 타입별 기본 아이콘이 사용됩니다. |
dismissible | — | false | boolean | 닫기 버튼 표시 여부입니다. |
onDismiss | — | — | () => void | 닫기 버튼 클릭 핸들러입니다. |
action | — | — | { label: string; onClick: () => void } | 우측 액션 버튼 설정입니다. |
Components / Feedback
Bubble
말풍선형 툴팁/가이드 컴포넌트입니다. 특정 UI 요소를 가리키는 화살표 방향을 지정할 수 있습니다.
사용법
Bubble은 사용자에게 기능 안내, 가이드 메시지, 힌트 등을 전달하는 말풍선입니다. 가리킬 방향(top, bottom, left, right)을 지정합니다.
<Bubble direction="bottom" message="여기를 눌러 작품을 등록하세요" />
<div style="background:var(--alpha-4);padding:var(--space-3) var(--space-4);border-radius:0;max-width:280px;font-size:var(--text-sm)"> Chat message bubble content </div>
방향: top / bottom
화살표가 위 또는 아래를 가리킵니다. 대상 요소의 위치에 따라 선택합니다.
Top (화살표 위)
Bottom (화살표 아래)
<Bubble direction="top" message="위쪽 대상을 가리킵니다" /> <Bubble direction="bottom" message="아래쪽 대상을 가리킵니다" />
방향: left / right
화살표가 좌측 또는 우측을 가리킵니다. 사이드 네비게이션이나 아이콘 옆 가이드에 적합합니다.
Left
Right
<Bubble direction="left" message="좌측 안내" /> <Bubble direction="right" message="우측 안내" />
접근성
| 속성 | 값 | 설명 |
|---|---|---|
role | "tooltip" | 툴팁 역할임을 명시합니다. |
aria-describedby | 대상 요소에 연결 | 버블이 설명하는 대상 요소를 참조합니다. |
aria-hidden | "true" | 장식용 화살표에 적용합니다. |
사용 방법 예시
첫 작품을 등록해 보세요
인터페이스
BubbleProps
| 속성 | 필수 | 기본값 | 타입 | 설명 |
|---|---|---|---|---|
message | — | string | 말풍선에 표시할 텍스트입니다. | |
direction | — | bottom | top | bottom | left | right | 화살표 방향입니다. |
variant | — | dark | dark | light | 말풍선 색상 테마입니다. |
visible | — | true | boolean | 말풍선 표시 여부입니다. |
dismissible | — | true | boolean | 닫기 가능 여부입니다. |
onDismiss | — | — | () => void | 닫기 시 호출되는 핸들러입니다. |
Components / Feedback
Progress Bar
진행 상태를 수평 바로 시각적으로 표시하는 컴포넌트입니다. 파일 업로드, 작업 완료율, 단계별 진행 등 다양한 상황에서 사용자에게 현재 진행 상태를 직관적으로 전달합니다.
사용법
기본 Progress Bar는 value와 max 속성을 통해 진행률을 표시합니다. 기본 최대값은 100이며, 퍼센트 라벨을 함께 표시할 수 있습니다.
<ProgressBar value={65} />
<ProgressBar value={40} showLabel />
<ProgressBar value={100} max={100} color="success" /> <div style="height:8px;background:var(--alpha-4);border-radius:0;overflow:hidden"> <div style="width:65%;height:100%;background:var(--red-brand);border-radius:0;transition:width var(--dur-slow)"></div> </div>
크기와 색상
다양한 크기와 색상 옵션을 제공합니다. 크기는 sm, md, lg를 지원하며, 색상은 primary, success, warning, error를 사용할 수 있습니다.
<ProgressBar value={50} size="sm" />
<ProgressBar value={50} size="md" />
<ProgressBar value={50} size="lg" />
<ProgressBar value={70} color="primary" />
<ProgressBar value={70} color="success" />
<ProgressBar value={70} color="warning" />
<ProgressBar value={70} color="error" /> 접근성
| 속성 | 값 | 설명 |
|---|---|---|
role | progressbar | 진행 바 역할을 명시합니다 |
aria-valuenow | {value} | 현재 진행 값을 전달합니다 |
aria-valuemin | 0 | 최소값을 전달합니다 |
aria-valuemax | {max} | 최대값을 전달합니다 |
aria-label | string | 스크린 리더에 표시할 라벨을 지정합니다 |
사용 방법 예시
작품 이미지 업로드 시 진행률을 표시하는 예시입니다.
인터페이스
ProgressBarProps
| 속성 | 필수 | 기본값 | 타입 | 설명 |
|---|---|---|---|---|
value | — | number | 현재 진행 값 (0 이상) | |
max | 100 | number | 최대값 | |
color | 'primary' | 'primary' | 'success' | 'warning' | 'error' | 진행 바의 색상 테마 | |
size | 'md' | 'sm' | 'md' | 'lg' | 진행 바의 높이 크기 | |
showLabel | false | boolean | 퍼센트 라벨 표시 여부 | |
animated | false | boolean | 애니메이션 활성화 여부 |
크기 (Size)
3단계 사이즈 스케일을 지원합니다. 기본값은 md입니다.
상태 (States)
ProgressBar의 시각적 상태입니다.
Components / Feedback
Result
작업 결과(성공, 실패, 경고, 정보)를 전체 화면 또는 섹션 단위로 표시하는 피드백 컴포넌트입니다. 아이콘, 제목, 설명, 그리고 후속 액션 버튼을 포함하여 사용자에게 명확한 결과를 전달합니다.
사용법
기본 Result는 상태(status)와 제목(title)을 필수로 받습니다. 선택적으로 설명 텍스트와 액션 버튼을 추가할 수 있습니다.
<Result
status="success"
title="작품이 성공적으로 등록되었습니다"
description="등록된 작품은 관리자 검토 후 24시간 내에 플랫폼에 공개됩니다."
primaryAction={{ label: '작품 확인', onClick: handleView }}
secondaryAction={{ label: '홈으로', onClick: handleHome }}
/> <div style="text-align:center;padding:var(--space-12)"> <div style="font-size:48px;margin-bottom:var(--space-4)"></div> <h2 style="font-size:var(--text-xl);font-weight:700;color:var(--charcoal);margin:0 0 8px">Success</h2> <p style="font-size:var(--text-sm);color:var(--text-muted)">Your action was completed.</p> </div>
상태 변형
4가지 상태 변형을 지원합니다: success, error, warning, info. 각 상태에 따라 아이콘과 색상이 자동으로 변경됩니다.
<Result status="success" title="성공" description="작업이 완료되었습니다" /> <Result status="error" title="실패" description="작업을 완료할 수 없습니다" /> <Result status="warning" title="경고" description="주의가 필요합니다" /> <Result status="info" title="정보" description="참고 정보입니다" />
접근성
| 속성 | 값 | 설명 |
|---|---|---|
role | alert | 결과 메시지가 알림임을 명시합니다 |
aria-live | assertive | 결과가 즉시 스크린 리더에 전달됩니다 |
aria-label | string | 결과 상태에 대한 전체 설명을 제공합니다 |
role (아이콘) | img | 상태 아이콘이 이미지 역할임을 명시합니다 |
사용 방법 예시
작품 등록이 완료된 후 결과를 표시하는 예시입니다.
인터페이스
ResultProps
| 속성 | 필수 | 기본값 | 타입 | 설명 |
|---|---|---|---|---|
status | — | 'success' | 'error' | 'warning' | 'info' | 결과 상태 유형 | |
title | — | string | 결과 제목 텍스트 | |
description | — | string | 결과 설명 텍스트 | |
icon | — | ReactNode | 상태 아이콘을 커스텀으로 지정 | |
primaryAction | — | { label: string; onClick: () => void } | 주요 액션 버튼 설정 | |
secondaryAction | — | { label: string; onClick: () => void } | 보조 액션 버튼 설정 |
Components / Feedback
Skeleton
콘텐츠 로딩 중 표시하는 플레이스홀더 컴포넌트입니다. 실제 콘텐츠의 레이아웃과 유사한 형태의 회색 블록을 표시하여 사용자에게 로딩 상태를 자연스럽게 전달하고, 체감 로딩 시간을 줄여줍니다.
사용법
기본 Skeleton은 variant 속성으로 형태를 지정합니다. text, circle, rect 3가지 형태를 제공하며, 기본적으로 shimmer 애니메이션이 적용됩니다.
<Skeleton variant="text" />
<Skeleton variant="circle" width={40} height={40} />
<Skeleton variant="rect" width="100%" height={120} borderRadius={0} /> <div style="height:16px;background:linear-gradient(90deg,var(--alpha-4) 25%,var(--alpha-8) 50%,var(--alpha-4) 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:0"></div>
형태 변형
text, circle, rect 3가지 기본 형태를 조합하여 다양한 로딩 레이아웃을 구성할 수 있습니다. 애니메이션을 비활성화하여 정적 플레이스홀더로 사용할 수도 있습니다.
<!-- 리스트 아이템 -->
<div style={{ display: 'flex', gap: 12 }}>
<Skeleton variant="circle" width={44} height={44} />
<div>
<Skeleton variant="text" width="70%" />
<Skeleton variant="text" width="45%" />
</div>
</div>
<!-- 카드 -->
<Skeleton variant="rect" width="100%" height={100} />
<Skeleton variant="text" width="80%" />
<Skeleton variant="text" width="50%" />
<!-- 정적 (애니메이션 없음) -->
<Skeleton variant="circle" width={44} height={44} animated={false} /> 접근성
| 속성 | 값 | 설명 |
|---|---|---|
role | status | 로딩 상태를 나타내는 역할을 명시합니다 |
aria-busy | true | 콘텐츠가 로딩 중임을 전달합니다 |
aria-label | "로딩 중" | 스크린 리더에 로딩 상태를 전달합니다 |
prefers-reduced-motion | reduce | 사용자 접근성 설정 시 애니메이션을 비활성화합니다 |
사용 방법 예시
작품 카드 목록이 로딩 중인 상태를 표시하는 예시입니다.
인터페이스
SkeletonProps
| 속성 | 필수 | 기본값 | 타입 | 설명 |
|---|---|---|---|---|
variant | 'text' | 'text' | 'circle' | 'rect' | 스켈레톤의 형태 | |
width | '100%' | number | string | 너비 (px 또는 퍼센트) | |
height | 14 | number | string | 높이 (px 또는 퍼센트) | |
borderRadius | 0 | number | 모서리 둥글기 (기본 0 · 직각) | |
animated | true | boolean | shimmer 애니메이션 활성화 여부 |
상태 (States)
Skeleton은 로딩 중 단일 상태를 가지며, 세 가지 형태(text, circle, rect)로 표현됩니다.
Components / Feedback
Tooltip
호버 또는 포커스 시 추가 정보를 표시하는 툴팁 컴포넌트입니다. 간결한 보조 설명이나 레이블을 제공하여 사용자 경험을 향상시킵니다.
사용법
<Tooltip content="작품 상세 정보 보기" placement="top"> <IconButton icon="info" /> </Tooltip>
<div style="position:relative;display:inline-block">
<span>Hover target</span>
<div style="position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);background:var(--charcoal);color:var(--white);padding:6px 12px;font-size:var(--text-xs);white-space:nowrap;pointer-events:none">
Tooltip text
<div style="position:absolute;top:100%;left:50%;transform:translateX(-50%);border:4px solid transparent;border-top-color:var(--charcoal)"></div>
</div>
</div> 위치와 테마
접근성
| 속성 | 값 | 설명 |
|---|---|---|
role | tooltip | 툴팁 역할을 스크린 리더에 전달합니다 |
aria-describedby | 툴팁 ID | 트리거 요소와 툴팁을 연결합니다 |
id | 고유 ID | 접근성을 위한 고유 식별자입니다 |
| 키보드 | Focus / Blur | 포커스 시 표시, 블러 시 숨김 처리됩니다 |
| 키보드 | Escape | ESC 키로 툴팁을 닫을 수 있습니다 |
사용 방법 예시
인터페이스
TooltipProps
| 속성 | 필수 | 기본값 | 타입 | 설명 |
|---|---|---|---|---|
content | — | string | 툴팁에 표시할 텍스트 | |
placement | "top" | "top" | "bottom" | "left" | "right" | 툴팁 표시 위치 | |
theme | "dark" | "light" | "dark" | 툴팁 테마 | |
trigger | "hover" | "hover" | "click" | 툴팁 트리거 방식 | |
delay | 200 | number | 표시 지연 시간 (ms) |
크기 (Size)
3단계 사이즈 스케일을 지원합니다. 기본값은 md입니다.