# Result Section
URL: /lynx/components/result-section
Source: https://github.com/daangn/seed-design/blob/dev/docs/content/lynx/components/result-section.mdx

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

사용 가능 버전: @seed-design/lynx-react@0.6.0, @seed-design/lynx-css@0.10.0

## Preview

```tsx
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

- npm: npx @seed-design/cli@latest add ui:result-section
- pnpm: pnpm dlx @seed-design/cli@latest add ui:result-section
- yarn: yarn dlx @seed-design/cli@latest add ui:result-section
- bun: bun x @seed-design/cli@latest add ui:result-section

## Props

## Examples

### Sizes

#### Large

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

```tsx
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

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

```tsx
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을 배치할 수 있습니다.

```tsx
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으로 전달합니다.