# Scroll Fog
URL: /lynx/components/scroll-fog
Source: https://github.com/daangn/seed-design/blob/dev/docs/content/lynx/components/scroll-fog.mdx

스크롤 가능한 영역에서 사용자에게 추가 콘텐츠가 있음을 시각적으로 알려주는 힌트 역할을 합니다.

사용 가능 버전: @seed-design/lynx-react@1.0.0

## Preview

```tsx
import "./styles";

import { Box, ScrollFog, Text, VStack, useSeedClassName } from "@seed-design/lynx-react";

const ITEMS = Array.from({ length: 20 }, (_, index) => index + 1);

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

  return (
    <Box
      className={seedClassName}
      height="full"
      display="flex"
      alignItems="center"
      justifyContent="center"
      bg="bg.layerDefault"
    >
      <Box
        width="300px"
        height="240px"
        borderWidth={1}
        borderColor="stroke.neutralWeak"
        borderRadius="8px"
        style={{ overflow: "hidden" }}
      >
        <ScrollFog style={{ width: "100%", height: "100%" }} placement={["top", "bottom"]}>
          <VStack pt="20px" px="16px" pb="80px" gap="8px">
            {ITEMS.map((item) => (
              <Box
                key={item}
                height="40px"
                flexShrink={false}
                display="flex"
                alignItems="center"
                justifyContent="center"
                borderRadius="4px"
                bg="bg.neutralWeak"
              >
                <Text color="fg.neutral" fontSize="14px">
                  콘텐츠 {item}
                </Text>
              </Box>
            ))}
          </VStack>
        </ScrollFog>
      </Box>
    </Box>
  );
}
```

Scroll Fog는 완전한 Scroll Area보다 간단한 스크롤 힌트를 위한 컴포넌트입니다. 스크롤 영역 위에 Rootage의 `gradient.fade-mask`를 사용하는 별도의 비인터랙티브 mask layer를 표시합니다.

## Installation

- npm: npm install @seed-design/lynx-react
- pnpm: pnpm add @seed-design/lynx-react
- yarn: yarn add @seed-design/lynx-react
- bun: bun add @seed-design/lynx-react

Lynx의 `ScrollFog`는 Registry snippet이나 Recipe 없이 `@seed-design/lynx-react` 패키지에서 직접 제공합니다.

## Usage

`ScrollFog`는 React 버전과 동일하게 임의 방향의 `placement`, 공통 `size`, 방향별 `sizes`, `hideScrollBar`를 지원합니다. `placement`에 `top`, `bottom`, `left`, `right`를 원하는 조합으로 지정할 수 있습니다. Fog 레이어는 터치 입력을 가로채지 않으므로 콘텐츠를 스크롤하거나 조작할 수 있습니다.

```tsx
import { ScrollFog } from "@seed-design/lynx-react";

export function App() {
  return (
    <view style={{ height: "300px" }}>
      <ScrollFog placement={["top", "bottom"]}>
        <view style={{ padding: "20px 0 80px" }}>
          <text>스크롤할 콘텐츠</text>
        </view>
      </ScrollFog>
    </view>
  );
}
```

## Props

### Scroll Fog

## Examples

### Padding

ScrollFog는 항상 fog 효과를 표시하므로, 지정된 방향에 충분한 padding이 필요합니다.

- **최소 padding**: 20px을 유지해야 합니다.
- **화면 전체를 차지하는 세로 스크롤**: 하단 80px, 상단 20px padding을 권장합니다.
- **가로 스크롤**: 좌우 20px padding을 권장합니다.

```tsx
// 상하 스크롤 - 상하 padding 필요
<ScrollFog placement={["top", "bottom"]}>
  <view style={{ padding: "20px 0 80px" }}>...</view>
</ScrollFog>

// 좌우 스크롤 - 좌우 padding 필요
<ScrollFog placement={["left", "right"]}>
  <view style={{ padding: "0 20px" }}>...</view>
</ScrollFog>
```

### Horizontal Scroll

가로 스크롤이 필요한 경우 `placement={["left", "right"]}`를 사용하여 좌우 fog 효과를 적용할 수 있습니다. 콘텐츠가 잘리지 않도록 좌우 20px padding을 제공하세요.

```tsx
import "./styles";

import { Box, HStack, ScrollFog, Text, useSeedClassName } from "@seed-design/lynx-react";

const ITEMS = Array.from({ length: 15 }, (_, index) => index + 1);

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

  return (
    <Box
      className={seedClassName}
      height="full"
      display="flex"
      alignItems="center"
      justifyContent="center"
      bg="bg.layerDefault"
    >
      <Box
        width="300px"
        height="140px"
        borderWidth={1}
        borderColor="stroke.neutralWeak"
        borderRadius="8px"
        style={{ overflow: "hidden" }}
      >
        <ScrollFog style={{ width: "100%", height: "100%" }} placement={["left", "right"]}>
          <HStack width="2000px" height="full" px="20px" align="center" gap="12px">
            {ITEMS.map((item) => (
              <Box
                key={item}
                width="120px"
                height="80px"
                flexShrink={false}
                display="flex"
                alignItems="center"
                justifyContent="center"
                borderRadius="4px"
                bg="bg.neutralWeak"
              >
                <Text color="fg.neutral" fontSize="14px">
                  항목 {item}
                </Text>
              </Box>
            ))}
          </HStack>
        </ScrollFog>
      </Box>
    </Box>
  );
}
```

### Size

`size`를 사용해 모든 방향의 fog 크기를 한 번에 조절할 수 있습니다. `sizes`를 사용하면 각 방향의 크기를 다르게 지정할 수 있습니다.

```tsx
import "./styles";

import { Box, ScrollFog, Text, VStack, useSeedClassName } from "@seed-design/lynx-react";

const ITEMS = Array.from({ length: 20 }, (_, index) => index + 1);

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

  return (
    <Box
      className={seedClassName}
      height="full"
      display="flex"
      alignItems="center"
      justifyContent="center"
      bg="bg.layerDefault"
    >
      <Box
        width="300px"
        height="240px"
        borderWidth={1}
        borderColor="stroke.neutralWeak"
        borderRadius="8px"
        style={{ overflow: "hidden" }}
      >
        <ScrollFog
          style={{ width: "100%", height: "100%" }}
          size={40}
          placement={["top", "bottom"]}
        >
          <VStack pt="40px" px="16px" pb="80px" gap="12px">
            <Text color="fg.neutralMuted" fontSize="14px">
              fog size: 40px
            </Text>
            <VStack gap="8px">
              {ITEMS.map((item) => (
                <Box
                  key={item}
                  height="40px"
                  flexShrink={false}
                  display="flex"
                  alignItems="center"
                  justifyContent="center"
                  borderRadius="4px"
                  bg="bg.neutralWeak"
                >
                  <Text color="fg.neutral" fontSize="14px">
                    콘텐츠 {item}
                  </Text>
                </Box>
              ))}
            </VStack>
          </VStack>
        </ScrollFog>
      </Box>
    </Box>
  );
}
```

```tsx
import "./styles";

import { Box, ScrollFog, Text, useSeedClassName } from "@seed-design/lynx-react";

const ITEMS = Array.from({ length: 100 }, (_, index) => index + 1);
const ROWS = Array.from({ length: 10 }, (_, rowIndex) => ({
  id: rowIndex + 1,
  items: ITEMS.slice(rowIndex * 10, rowIndex * 10 + 10),
}));

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

  return (
    <Box
      className={seedClassName}
      height="full"
      display="flex"
      alignItems="center"
      justifyContent="center"
      bg="bg.layerDefault"
    >
      <Box
        width="400px"
        height="300px"
        borderWidth={1}
        borderColor="stroke.neutralWeak"
        borderRadius="8px"
        style={{ overflow: "hidden" }}
      >
        <ScrollFog
          style={{ width: "100%", height: "100%" }}
          sizes={{
            top: 100,
            bottom: 10,
            left: 50,
            right: 50,
          }}
          placement={["top", "bottom", "left", "right"]}
        >
          <Box
            width="1140px"
            height="1140px"
            p="16px"
            display="flex"
            flexDirection="column"
            gap="12px"
          >
            {ROWS.map((row) => (
              <Box key={row.id} display="flex" flexDirection="row" gap="12px">
                {row.items.map((item) => (
                  <Box
                    key={item}
                    width="100px"
                    height="100px"
                    flexShrink={false}
                    display="flex"
                    alignItems="center"
                    justifyContent="center"
                    borderRadius="4px"
                    bg="bg.neutralWeak"
                  >
                    <Text color="fg.neutral" fontSize="14px">
                      {item}
                    </Text>
                  </Box>
                ))}
              </Box>
            ))}
          </Box>
        </ScrollFog>
      </Box>
    </Box>
  );
}
```

### All Directions

2D 스크롤이 필요한 경우 `placement={["top", "bottom", "left", "right"]}`를 사용하여 모든 방향에 fog 효과를 적용할 수 있습니다.

```tsx
import "./styles";

import { Box, ScrollFog, Text, useSeedClassName } from "@seed-design/lynx-react";

const ITEMS = Array.from({ length: 100 }, (_, index) => index + 1);
const ROWS = Array.from({ length: 10 }, (_, rowIndex) => ({
  id: rowIndex + 1,
  items: ITEMS.slice(rowIndex * 10, rowIndex * 10 + 10),
}));

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

  return (
    <Box
      className={seedClassName}
      height="full"
      display="flex"
      alignItems="center"
      justifyContent="center"
      bg="bg.layerDefault"
    >
      <Box
        width="400px"
        height="300px"
        borderWidth={1}
        borderColor="stroke.neutralWeak"
        borderRadius="8px"
        style={{ overflow: "hidden" }}
      >
        <ScrollFog
          style={{ width: "100%", height: "100%" }}
          placement={["top", "bottom", "left", "right"]}
        >
          <Box
            width="1148px"
            height="1148px"
            p="20px"
            display="flex"
            flexDirection="column"
            gap="12px"
          >
            {ROWS.map((row) => (
              <Box key={row.id} display="flex" flexDirection="row" gap="12px">
                {row.items.map((item) => (
                  <Box
                    key={item}
                    width="100px"
                    height="100px"
                    flexShrink={false}
                    display="flex"
                    alignItems="center"
                    justifyContent="center"
                    borderRadius="4px"
                    bg="bg.neutralWeak"
                  >
                    <Text color="fg.neutral" fontSize="14px">
                      {item}
                    </Text>
                  </Box>
                ))}
              </Box>
            ))}
          </Box>
        </ScrollFog>
      </Box>
    </Box>
  );
}
```

### Hide Scrollbar

`hideScrollBar`를 사용하면 fog 효과는 유지하면서 스크롤바를 숨길 수 있습니다.

```tsx
import "./styles";

import { Box, ScrollFog, Text, VStack, useSeedClassName } from "@seed-design/lynx-react";

const ITEMS = Array.from({ length: 20 }, (_, index) => index + 1);

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

  return (
    <Box
      className={seedClassName}
      height="full"
      display="flex"
      alignItems="center"
      justifyContent="center"
      bg="bg.layerDefault"
    >
      <Box
        width="300px"
        height="240px"
        borderWidth={1}
        borderColor="stroke.neutralWeak"
        borderRadius="8px"
        style={{ overflow: "hidden" }}
      >
        <ScrollFog
          style={{ width: "100%", height: "100%" }}
          hideScrollBar
          placement={["top", "bottom"]}
        >
          <VStack pt="20px" px="16px" pb="80px" gap="12px">
            <Text color="fg.neutralMuted" fontSize="14px">
              hideScrollBar: true
            </Text>
            <VStack gap="8px">
              {ITEMS.map((item) => (
                <Box
                  key={item}
                  height="40px"
                  flexShrink={false}
                  display="flex"
                  alignItems="center"
                  justifyContent="center"
                  borderRadius="4px"
                  bg="bg.neutralWeak"
                >
                  <Text color="fg.neutral" fontSize="14px">
                    콘텐츠 {item}
                  </Text>
                </Box>
              ))}
            </VStack>
          </VStack>
        </ScrollFog>
      </Box>
    </Box>
  );
}
```