# 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 IconDiamond from "@karrotmarket/lynx-multicolor-icon/IconDiamond";
import { useState } from "@lynx-js/react";
import { Box, Icon, VStack } from "@seed-design/lynx-react";
import { ResultSection } from "@/components/ui/result-section";

export default function Example() {
  const [actionResult, setActionResult] = useState<string | null>(null);

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

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

  return (
    <VStack width="full" maxWidth="320px" alignSelf="center" grow minHeight="0">
      <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>
  );
}
```

## 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

`ResultSection`은 `VStack`의 레이아웃·스타일 prop도 받습니다.

## Examples

### Sizes

#### Large

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

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

export default function Example() {
  return (
    <VStack width="full" maxWidth="320px" alignSelf="center" grow minHeight="0">
      <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>
  );
}
```

#### Medium

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

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

export default function Example() {
  return (
    <VStack width="full" maxWidth="320px" alignSelf="center" grow minHeight="0">
      <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>
  );
}
```

### With CTA & Progress Circle

주요 액션을 화면 하단에 둘 때는 Result Section 밖에 Action Button을 배치할 수 있습니다.

```tsx
import IconExclamationmarkCircleFill from "@karrotmarket/lynx-monochrome-icon/IconExclamationmarkCircleFill";
import { useEffect, useState } from "@lynx-js/react";
import { ActionButton, Box, Icon, VStack } from "@seed-design/lynx-react";
import { AppBar, AppBarMain } from "@/components/ui/app-bar";
import { ProgressCircle } from "@/components/ui/progress-circle";
import { ResultSection } from "@/components/ui/result-section";

export default function Example() {
  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 (
    <VStack width="full" maxWidth="360px" alignSelf="center" grow minHeight="0">
      <AppBar>
        <AppBarMain title="환불 요청" />
      </AppBar>
      <VStack grow gap="x4" pb="safeArea">
        <ResultSection
          title={loading ? "환불을 요청하고 있어요" : "다시 시도해주세요"}
          description={loading ? "잠시만 기다려주세요" : "환불 요청에 실패했어요"}
          asset={
            <Box pb="x4">
              {loading ? (
                <ProgressCircle />
              ) : (
                <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>
  );
}
```

### Success Example

SEED는 Lynx용 Lottie 컴포넌트를 제공하지 않아 Success Example을 실행 예제로 제공하지 않습니다. 앱에서 사용하는 Lottie 노드를 `asset`에 전달하고, 확인 액션은 `primaryActionProps`로 연결합니다.

## 웹 버전과의 차이

| 영역            | React Web                                                                                | Lynx                               |
| ------------- | ---------------------------------------------------------------------------------------- | ---------------------------------- |
| 네이티브 요소       | `div`, `span`, `button`                                                                  | `view`, `text`                     |
| 이벤트           | `onClick`                                                                                | `bindtap`, `main-thread:bindtap`   |
| 루트 속성         | HTML 속성                                                                                  | Lynx 네이티브 요소 속성과 `accessibility-*` |
| 보조 액션 기본값     | `ghost`, `small`, `color="fg.neutral"`, `fontWeight="bold"`, `bleedX/bleedY="asPadding"` | `ghost`, `small`; 기본 bleed 없음      |
| 보조 액션 bleed 값 | 토큰과 `"asPadding"` 지원                                                                     | px 길이, `0`, `"safeArea"` 지원        |

버튼의 접근 가능한 이름과 탭 이벤트는 `primaryActionProps`와 `secondaryActionProps`로 전달합니다.