Result Section

데이터 로딩 결과, 사용자의 액션 완료 여부 등 사용자 액션의 결과를 제공하는 템플릿입니다. 주로 전체 화면이나 특정 영역을 차지하여 다음 액션을 유도하거나 현재 상황을 안내합니다.

사용 가능 버전@seed-design/[email protected], @seed-design/[email protected]

Lynx 예제를 불러오는 중입니다.

import "./styles";

import IconDiamond from "@karrotmarket/lynx-multicolor-icon/IconDiamond";
import { root } from "@lynx-js/react";
import { Box, Icon, VStack, useSeedClassName } from "@seed-design/lynx-react";
import { ResultSection } from "@/components/ui/result-section";

function Root() {
  const seedClassName = useSeedClassName({ colorMode: "system" });

  return (
    <page className={seedClassName}>
      <VStack width="full" height="full" align="center" justify="center">
        <VStack minHeight="480px" width="320px" borderWidth={1} borderColor="stroke.neutralMuted">
          <ResultSection
            asset={
              <Box pb="x4">
                <Icon icon={<IconDiamond />} size="x10" multicolor />
              </Box>
            }
            title="결과 타이틀"
            description="부가 설명을 적어주세요"
            primaryActionProps={{ children: "Primary Action" }}
            secondaryActionProps={{ children: "Secondary Action" }}
          />
        </VStack>
      </VStack>
    </page>
  );
}

root.render(<Root />);

Installation

npx @seed-design/cli@latest add ui:result-section

pnpm dlx @seed-design/cli@latest add ui:result-section

yarn dlx @seed-design/cli@latest add ui:result-section

bun x @seed-design/cli@latest add ui:result-section

의존성 설치

npm install @seed-design/lynx-react

yarn add @seed-design/lynx-react

pnpm add @seed-design/lynx-react

bun add @seed-design/lynx-react

아래 코드를 복사 후 붙여넣고 사용하세요

/**
 * @file ui:result-section
 * @requires @seed-design/lynx-react@>=0.1.0 <1.0.0
 * @requires @seed-design/lynx-css@>=0.1.0 <1.0.0
 **/

import * as React from "@lynx-js/react";
import {
  ActionButton,
  Text,
  VStack,
  type ActionButtonProps,
  type TextProps,
  type VStackProps,
} from "@seed-design/lynx-react";

export interface ResultSectionProps extends Omit<VStackProps, "children"> {
  /**
   * @default "large"
   */
  size?: "large" | "medium";

  asset?: React.ReactNode;
  title?: React.ReactNode;
  description?: React.ReactNode;

  primaryActionProps?: ActionButtonProps;
  secondaryActionProps?: ActionButtonProps;
}

const textStyles = {
  title: {
    large: "t8Bold",
    medium: "t5Bold",
  },
  description: {
    large: "t5Regular",
    medium: "t4Regular",
  },
} as const satisfies Record<
  string,
  Record<NonNullable<ResultSectionProps["size"]>, NonNullable<TextProps["textStyle"]>>
>;

const textContainerProperties = {
  large: {
    gap: "x3",
    pb: "x7",
  },
  medium: {
    gap: "x2",
    pb: "x6",
  },
} as const satisfies Record<NonNullable<ResultSectionProps["size"]>, VStackProps>;

/**
 * @see https://seed-design.io/lynx/components/result-section
 */
export const ResultSection = React.forwardRef<unknown, ResultSectionProps>((props, ref) => {
  const {
    size = "large",
    asset,
    title,
    description,
    primaryActionProps,
    secondaryActionProps,
    ...otherProps
  } = props;

  return (
    <VStack
      {...(ref ? { ref } : {})}
      justify="center"
      align="center"
      px="x12"
      py="x4"
      grow
      {...otherProps}
    >
      {asset}
      <VStack {...textContainerProperties[size]}>
        <Text align="center" color="fg.neutral" textStyle={textStyles.title[size]}>
          {title}
        </Text>
        <Text align="center" color="fg.neutralMuted" textStyle={textStyles.description[size]}>
          {description}
        </Text>
      </VStack>
      {primaryActionProps || secondaryActionProps ? (
        <VStack align="center" gap="x5">
          {primaryActionProps ? (
            <ActionButton variant="neutralWeak" size="medium" {...primaryActionProps} />
          ) : null}
          {secondaryActionProps ? (
            <ActionButton variant="ghost" size="small" {...secondaryActionProps} />
          ) : null}
        </VStack>
      ) : null}
    </VStack>
  );
});
ResultSection.displayName = "ResultSection";

/**
 * This file is a snippet from SEED Design, helping you get started quickly with @seed-design/* packages.
 * You can extend this snippet however you want.
 */

Props

Prop

Type

asset?React.ReactNode

title?React.ReactNode

description?React.ReactNode

primaryActionProps?ActionButtonProps | undefined

secondaryActionProps?ActionButtonProps | undefined

bindtouchstart?(() => void) | undefined

bindtouchend?(() => void) | undefined

bindtouchcancel?(() => void) | undefined

bg?ScopedColorBg | ScopedColorPalette | ScopedColorBanner | (string & {}) | undefined

background?ScopedColorBg | ScopedColorPalette | ScopedColorBanner | (string & {}) | undefined

color?ScopedColorPalette | (string & {}) | ScopedColorFg | undefined

borderColor?ScopedColorPalette | (string & {}) | ScopedColorStroke | undefined

borderWidth?0 | (string & {}) | 1 | undefined

borderTopWidth?0 | (string & {}) | 1 | undefined

borderRightWidth?0 | (string & {}) | 1 | undefined

borderBottomWidth?0 | (string & {}) | 1 | undefined

borderLeftWidth?0 | (string & {}) | 1 | undefined

borderRadius?0 | (string & {}) | "r0_5" | "r1" | "r1_5" | "r2" | "r2_5" | "r3" | "r3_5" | "r4" | "r5" | "r6" | "full" | undefined

borderTopLeftRadius?0 | (string & {}) | "r0_5" | "r1" | "r1_5" | "r2" | "r2_5" | "r3" | "r3_5" | "r4" | "r5" | "r6" | "full" | undefined

borderTopRightRadius?0 | (string & {}) | "r0_5" | "r1" | "r1_5" | "r2" | "r2_5" | "r3" | "r3_5" | "r4" | "r5" | "r6" | "full" | undefined

borderBottomRightRadius?0 | (string & {}) | "r0_5" | "r1" | "r1_5" | "r2" | "r2_5" | "r3" | "r3_5" | "r4" | "r5" | "r6" | "full" | undefined

borderBottomLeftRadius?0 | (string & {}) | "r0_5" | "r1" | "r1_5" | "r2" | "r2_5" | "r3" | "r3_5" | "r4" | "r5" | "r6" | "full" | undefined

width?

(string & {}) | "full" | Dimension | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText" | undefined

minWidth?

(string & {}) | "full" | Dimension | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText" | undefined

maxWidth?

(string & {}) | "full" | Dimension | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText" | undefined

height?

(string & {}) | "full" | Dimension | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText" | undefined

minHeight?

(string & {}) | "full" | Dimension | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText" | undefined

maxHeight?

(string & {}) | "full" | Dimension | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText" | undefined

top?0 | (string & {}) | undefined

left?0 | (string & {}) | undefined

right?0 | (string & {}) | undefined

bottom?0 | (string & {}) | undefined

padding?

0 | (string & {}) | Dimension | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText" | undefined

p?

0 | (string & {}) | Dimension | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText" | undefined

paddingX?

0 | (string & {}) | Dimension | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText" | undefined

px?

0 | (string & {}) | Dimension | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText" | undefined

paddingY?

0 | (string & {}) | Dimension | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText" | undefined

py?

0 | (string & {}) | Dimension | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText" | undefined

paddingTop?

0 | (string & {}) | Dimension | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText" | "safeArea" | undefined

pt?

0 | (string & {}) | Dimension | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText" | "safeArea" | undefined

paddingRight?

0 | (string & {}) | Dimension | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText" | undefined

pr?

0 | (string & {}) | Dimension | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText" | undefined

paddingBottom?

0 | (string & {}) | Dimension | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText" | "safeArea" | undefined

pb?

0 | (string & {}) | Dimension | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText" | "safeArea" | undefined

paddingLeft?

0 | (string & {}) | Dimension | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText" | undefined

pl?

0 | (string & {}) | Dimension | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText" | undefined

position?(string & {}) | "relative" | "absolute" | "fixed" | undefined

overflowX?(string & {}) | "visible" | "hidden" | undefined

overflowY?(string & {}) | "visible" | "hidden" | undefined

zIndex?Property.ZIndex | undefined

justifySelf?Property.JustifySelf | undefined

alignContent?(string & {}) | "center" | "stretch" | "flexStart" | "flexEnd" | undefined

alignSelf?(string & {}) | "center" | "stretch" | "flexStart" | "flexEnd" | undefined

gap?

0 | (string & {}) | Dimension | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText" | undefined

style?CSSProperties | undefined

className?string | undefined

bindtap?EventHandler<BaseTouchEvent<Target>> | undefined

main-thread:bindtap?EventHandler<BaseTouchEvent<Element>> | undefined

align?(string & {}) | "center" | "stretch" | "flexStart" | "flexEnd" | undefined

justify?(string & {}) | "center" | "flexStart" | "flexEnd" | "spaceBetween" | "spaceAround" | undefined

wrap?boolean | "wrap" | "nowrap" | undefined

grow?boolean | Property.FlexGrow | undefined

shrink?boolean | Property.FlexShrink | undefined

Examples

Sizes

Large

전체 화면을 차지하는 상태를 표현할 때 사용합니다.

Lynx 예제를 불러오는 중입니다.

import "./styles";

import { root } from "@lynx-js/react";
import { VStack, useSeedClassName } from "@seed-design/lynx-react";
import { ResultSection } from "@/components/ui/result-section";

function Root() {
  const seedClassName = useSeedClassName({ colorMode: "system" });

  return (
    <page className={seedClassName}>
      <VStack width="full" height="full" align="center" justify="center">
        <VStack minHeight="480px" width="320px" borderWidth={1} borderColor="stroke.neutralMuted">
          <ResultSection
            size="large"
            title="cupidatat ad consequat"
            description="Lorem ipsum dolor sit amet consectetur adipisicing elit."
            primaryActionProps={{ children: "Primary Action" }}
            secondaryActionProps={{ children: "Secondary Action" }}
          />
        </VStack>
      </VStack>
    </page>
  );
}

root.render(<Root />);

Medium

카드나 섹션처럼 화면의 일부 영역에서 상태를 표현할 때 사용합니다.

Lynx 예제를 불러오는 중입니다.

import "./styles";

import { root } from "@lynx-js/react";
import { VStack, useSeedClassName } from "@seed-design/lynx-react";
import { ResultSection } from "@/components/ui/result-section";

function Root() {
  const seedClassName = useSeedClassName({ colorMode: "system" });

  return (
    <page className={seedClassName}>
      <VStack width="full" height="full" align="center" justify="center">
        <VStack minHeight="480px" width="320px" borderWidth={1} borderColor="stroke.neutralMuted">
          <ResultSection
            size="medium"
            title="cupidatat ad consequat"
            description="Lorem ipsum dolor sit amet consectetur adipisicing elit."
            primaryActionProps={{ children: "Primary Action" }}
            secondaryActionProps={{ children: "Secondary Action" }}
          />
        </VStack>
      </VStack>
    </page>
  );
}

root.render(<Root />);

With CTA & Progress Circle

화면의 주요 액션을 하단 CTA로 제공할 때는 Result Section 내부 버튼 대신 별도 Action Button을 배치할 수 있습니다.

Lynx 예제를 불러오는 중입니다.

import "./styles";

import IconExclamationmarkCircleFill from "@karrotmarket/lynx-monochrome-icon/IconExclamationmarkCircleFill";
import { root, useState } from "@lynx-js/react";
import {
  ActionButton,
  AppBar,
  Box,
  Icon,
  ProgressCircle,
  VStack,
  useSeedClassName,
} from "@seed-design/lynx-react";
import { ResultSection } from "@/components/ui/result-section";

function Root() {
  const seedClassName = useSeedClassName({ colorMode: "system" });
  const [loading, setLoading] = useState(false);

  function handleRetry() {
    "background only";
    setLoading(true);
    setTimeout(() => setLoading(false), 3000);
  }

  return (
    <page className={seedClassName}>
      <VStack width="full" height="full" align="center" justify="center">
        <VStack height="640px" width="360px" borderWidth={1} borderColor="stroke.neutralMuted">
          <AppBar.Root>
            <AppBar.Main>
              <AppBar.Title>환불 요청</AppBar.Title>
            </AppBar.Main>
          </AppBar.Root>
          <VStack grow gap="x4" pb="safeArea">
            <ResultSection
              title={loading ? "환불을 요청하고 있어요" : "다시 시도해주세요"}
              description={loading ? "잠시만 기다려주세요" : "환불 요청에 실패했어요"}
              asset={
                <Box pb="x4">
                  {loading ? (
                    <ProgressCircle.Root>
                      <ProgressCircle.Range />
                    </ProgressCircle.Root>
                  ) : (
                    <Icon
                      icon={<IconExclamationmarkCircleFill color="var(--seed-color-fg-critical)" />}
                      size="x10"
                      color="fg.critical"
                    />
                  )}
                </Box>
              }
            />
            <Box px="spacingX.globalGutter" pt="x3" pb="x2">
              <ActionButton
                flexGrow
                size="large"
                variant="neutralSolid"
                disabled={loading}
                loading={loading}
                bindtap={handleRetry}
              >
                다시 시도
              </ActionButton>
            </Box>
          </VStack>
        </VStack>
      </VStack>
    </page>
  );
}

root.render(<Root />);

Success Example

asset은 임의의 ReactLynx 노드를 받습니다. Lottie를 사용할 때는 앱에서 사용하는 Lynx Lottie 요소를 전달하고, 라이트·다크 모드에 맞는 에셋 선택도 앱에서 처리하세요. Result Section은 특정 애니메이션 라이브러리에 의존하지 않습니다.

Web Version Differences

영역	React Web	Lynx
Native element	`div`, `span`, `button`	`view`, `text`
Event	`onClick`	`bindtap`, `main-thread:bindtap`
Root props	HTML attribute	Lynx native element prop과 `accessibility-*`
Secondary action override	`color`, `fontWeight`, `bleedX`, `bleedY` 적용	Lynx Action Button의 `ghost`, `small` 스타일 사용

Result Section의 크기, 중앙 정렬, 에셋·문구·버튼 구성은 두 플랫폼에서 같습니다. 버튼의 접근 가능한 이름과 탭 이벤트는 primaryActionProps와 secondaryActionProps에 Lynx Action Button prop으로 전달합니다.

Result Section

Manual Installation

의존성 설치

아래 코드를 복사 후 붙여넣고 사용하세요

목차