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

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

Lynx Engine 최소 버전: 3.6

사용 가능 버전: @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 { useState } from "@lynx-js/react";
import { Box, Icon, VStack, useSeedClassName } from "@seed-design/lynx-react";
import { ResultSection } from "@/components/ui/result-section";

export default function Example() {
  const seedClassName = useSeedClassName({ colorMode: "system" });
  const [actionResult, setActionResult] = useState<string | null>(null);

  function handlePrimaryAction() {
    "background only";
    setActionResult("Primary Action Clicked");
  }

  function handleSecondaryAction() {
    "background only";
    setActionResult("Secondary Action Clicked");
  }

  return (
    <view className={`${seedClassName} docs-lynx-result-section-root`}>
      <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={actionResult ?? "부가 설명을 적어주세요"}
            primaryActionProps={{ children: "Primary Action", bindtap: handlePrimaryAction }}
            secondaryActionProps={{
              children: "Secondary Action",
              bindtap: handleSecondaryAction,
            }}
          />
        </VStack>
      </VStack>
    </view>
  );
}
```

## 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 { VStack, useSeedClassName } from "@seed-design/lynx-react";
import { ResultSection } from "@/components/ui/result-section";

export default function Example() {
  const seedClassName = useSeedClassName({ colorMode: "system" });

  return (
    <view className={`${seedClassName} docs-lynx-result-section-root`}>
      <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>
    </view>
  );
}
```

#### Medium

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

```tsx
import "./styles";

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

export default function Example() {
  const seedClassName = useSeedClassName({ colorMode: "system" });

  return (
    <view className={`${seedClassName} docs-lynx-result-section-root`}>
      <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>
    </view>
  );
}
```

### With CTA & Progress Circle

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

```tsx
import "./styles";

import IconExclamationmarkCircleFill from "@karrotmarket/lynx-monochrome-icon/IconExclamationmarkCircleFill";
import { useEffect, 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";

export default function Example() {
  const seedClassName = useSeedClassName({ colorMode: "system" });
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const timer = setTimeout(() => setLoading(false), 3000);

    return () => clearTimeout(timer);
  }, []);

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

  return (
    <view className={`${seedClassName} docs-lynx-result-section-root`}>
      <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 />} 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>
    </view>
  );
}
```

### Success Example

현재 저장소의 Lynx Registry와 `@seed-design/lynx-react`는 Lottie 구현체를 제공하지 않으므로 Success Example을 실행 예제로 제공하지 않습니다.

같은 화면이 필요하면 앱에서 검증한 Lynx용 Lottie 구현체를 사용하세요. 앱이 현재 색상 모드에 맞는 에셋을 선택하고, 자동 재생·한 번 재생·마지막 프레임 유지 동작을 설정한 70×70 노드를 `asset`에 전달할 수 있습니다. 확인 액션은 `primaryActionProps`로 연결하세요.

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