JenniferSoft Design Docs

Appearance

Result 컴포넌트 ​

Result 컴포넌트는 사용자에게 작업 결과, 상태 또는 피드백을 시각적으로 표시하기 위한 UI 요소입니다. 아이콘, 텍스트 및 색상을 조합하여 다양한 상황에 맞는 결과 화면을 제공합니다.

기본 구조 ​

Result 컴포넌트는 다음과 같은 구조로 이루어져 있습니다:

  1. 아이콘 영역: 상단에 위치하며 상태를 나타내는 아이콘을 표시
  2. 텍스트 영역: 아이콘 아래에 위치하며 캡션, 메인 텍스트, 서브 텍스트를 포함
  3. 슬롯: 추가 콘텐츠를 위한 기본 슬롯 제공

속성(Props) ​

속성타입기본값설명
iconTypeIconTypes | 'error-face' | 'dotted-error-face'undefined아이콘 타입
color'gray' | 'blue' | 'green' | 'red' | 'orange' | 'purple' | 'yellow' | 'pink' | ... | 'primary''primary'색상 테마
size'small' | 'medium' | 'large''medium'크기
captionstring''상단 작은 텍스트
titlestring''주요 텍스트
descriptionstring''부가 설명 텍스트

크기 변형 ​

작은 크기
Small 사이즈
아이콘 크기: 24px, 박스 크기: 48px
중간 크기
Medium 사이즈
아이콘 크기: 40px, 박스 크기: 80px
큰 크기
Large 사이즈
아이콘 크기: 64px, 박스 크기: 112px
vue
<template>
    <result
        :iconType="ICON_TYPE.checkCircle"
        color="green"
        size="small"
        caption="작은 크기"
        title="Small 사이즈"
        description="아이콘 크기: 24px, 박스 크기: 48px"
    />
    <result
        :iconType="ICON_TYPE.checkCircle"
        color="blue"
        size="medium"
        caption="중간 크기"
        title="Medium 사이즈"
        description="아이콘 크기: 40px, 박스 크기: 80px"
    />
    <result
        :iconType="ICON_TYPE.checkCircle"
        color="purple"
        size="large"
        caption="큰 크기"
        title="Large 사이즈"
        description="아이콘 크기: 64px, 박스 크기: 112px"
    />
</template>

아이콘 타입 ​

Error Face
기본 에러 아이콘
육각형 모양의 얼굴 아이콘
Dotted Error Face
점선 스타일 에러 아이콘
점선 스타일의 육각형 모양 얼굴 아이콘
Check Circle
체크 아이콘
SvgIcon 컴포넌트의 아이콘 사용
Info Circle
정보 아이콘
SvgIcon 컴포넌트의 아이콘 사용
vue
<template>
    <result
        iconType="error-face"
        color="red"
        caption="Error Face"
        title="기본 에러 아이콘"
        description="육각형 모양의 얼굴 아이콘"
    />
    <result
        iconType="dotted-error-face"
        color="red"
        caption="Dotted Error Face"
        title="점선 스타일 에러 아이콘"
        description="점선 스타일의 육각형 모양 얼굴 아이콘"
    />
    <result
        :iconType="ICON_TYPE.checkCircle"
        color="green"
        caption="Check Circle"
        title="체크 아이콘"
        description="SvgIcon 컴포넌트의 아이콘 사용"
    />
    <result
        :iconType="ICON_TYPE.infoCircle"
        color="blue"
        caption="Info Circle"
        title="정보 아이콘"
        description="SvgIcon 컴포넌트의 아이콘 사용"
    />
</template>

색상 테마 ​

Primary
기본 색상
Blue
파란색 테마
Green
녹색 테마
Red
빨간색 테마
Orange
주황색 테마
Purple
보라색 테마
Yellow
노란색 테마
Pink
분홍색 테마
Plum
자홍색 테마
Lavender
라벤더 테마
Indigo
인디고 테마
Cyan
시안 테마
Grass
그래스 테마
Lime
라임 테마
Brown
브라운 테마
Teal
틸 테마
Skyblue
하늘색 테마
vue
<template>
    <result
        :iconType="ICON_TYPE.checkCircle"
        color="primary"
        caption="Primary"
        title="기본 색상"
    />
    <result
        :iconType="ICON_TYPE.checkCircle"
        color="blue"
        caption="Blue"
        title="파란색 테마"
    />
    <result
        :iconType="ICON_TYPE.checkCircle"
        color="green"
        caption="Green"
        title="녹색 테마"
    />
    <result
        :iconType="ICON_TYPE.checkCircle"
        color="red"
        caption="Red"
        title="빨간색 테마"
    />
    ...
    <!-- 더 많은 색상 옵션 사용 가능 -->
</template>

사용 예시 ​

title만 사용하는 경우 ​

제목만 표시하는 결과
vue
<template>
    <result color="primary" title="제목만 표시하는 결과" />
</template>

description만 사용하는 경우 ​

설명만 표시하는 결과 컴포넌트입니다. 제목 없이 설명만 표시할 수 있습니다.
vue
<template>
    <result
        color="blue"
        description="설명만 표시하는 결과 컴포넌트입니다. 제목 없이 설명만 표시할 수 있습니다."
    />
</template>

title + description 사용하는 경우 ​

제목과 설명이 있는 결과
제목과 설명을 함께 사용하여 더 자세한 정보를 제공할 수 있습니다.
vue
<template>
    <result
        color="green"
        title="제목과 설명이 있는 결과"
        description="제목과 설명을 함께 사용하여 더 자세한 정보를 제공할 수 있습니다."
    />
</template>

icon + title + description 사용하는 경우 ​

아이콘이 포함된 결과
아이콘, 제목, 설명을 모두 사용하여 시각적으로 더 풍부한 결과를 표시합니다.
vue
<template>
    <result
        :iconType="ICON_TYPE.checkCircle"
        color="purple"
        title="아이콘이 포함된 결과"
        description="아이콘, 제목, 설명을 모두 사용하여 시각적으로 더 풍부한 결과를 표시합니다."
    />
</template>

icon + caption + title + description + 슬롯에 버튼 추가한 경우 ​

캡션도 같이 사용해서 더욱 풍부하게
사용자 액션이 필요한 결과
슬롯을 사용하여 버튼이나 다른 컴포넌트를 추가할 수 있습니다.
vue
<template>
    <result
        :iconType="ICON_TYPE.info"
        color="orange"
        caption="캡션도 같이 사용해서 더욱 풍부하게"
        title="사용자 액션이 필요한 결과"
        description="슬롯을 사용하여 버튼이나 다른 컴포넌트를 추가할 수 있습니다."
    >
        <Btn type="primary-filled" text="확인" class="mt-4" />
    </result>
</template>