# Sheet

## Introduction

Sheet는 콘텐츠를 담는 표면(surface) 컴포넌트입니다. 카드, 패널, 대화상자 등 다양한 UI 요소를 만드는 기반이 되며, 시각적으로 콘텐츠를 그룹화하고 구분하는 역할을 합니다. 다양한 variant와 color 조합을 통해 용도에 맞는 스타일을 적용할 수 있습니다.

```tsx
<Sheet {...args} sx={{
  p: 3,
  maxWidth: 400,
  borderRadius: 'md'
}}>
<Typography level="title-md" sx={{
  mb: 2
}}>
Sheet 컴포넌트
</Typography>
<Typography level="body-md">
  이것은 Sheet 컴포넌트의 기본 예제입니다. 다양한 콘텐츠를 담을 수 있는 표면을 제공합니다.
</Typography>
</Sheet>
```

| Field   | Description | Default    |
| ------- | ----------- | ---------- |
| variant | 시트 스타일 변형   | "outlined" |
| color   | 시트 색상       | "neutral"  |

## Usage

```tsx
import { Sheet } from '@ceed/cds';

function MyComponent() {
  return (
    <Sheet variant="outlined" sx={{ p: 3, borderRadius: 'md' }}>
      <Typography level="title-md">시트 제목</Typography>
      <Typography level="body-md">시트 안의 콘텐츠가 들어갑니다.</Typography>
    </Sheet>
  );
}
```

## Examples

### Basic Usage

가장 기본적인 Sheet 사용법입니다.

```tsx
<div style={{
  display: 'flex',
  gap: '2rem',
  flexWrap: 'wrap'
}}>
<Sheet sx={{
  p: 3,
  maxWidth: 300,
  borderRadius: 'md'
}}>
<Typography level="title-md" sx={{
  mb: 1
}}>
기본 Sheet
</Typography>
<Typography level="body-sm">가장 기본적인 Sheet 컴포넌트입니다.</Typography>
</Sheet>

<Sheet variant="outlined" sx={{
  p: 3,
  maxWidth: 300,
  borderRadius: 'md'
}}>
<Typography level="title-md" sx={{
  mb: 1
}}>
Outlined Sheet
</Typography>
<Typography level="body-sm">테두리가 있는 Sheet 컴포넌트입니다.</Typography>
</Sheet>
</div>
```

### Variants

다양한 스타일 변형을 제공합니다.

```tsx
<div style={{
  display: 'flex',
  gap: '2rem',
  flexWrap: 'wrap'
}}>
<Sheet variant="solid" sx={{
  p: 3,
  maxWidth: 250,
  borderRadius: 'md'
}}>
<Typography level="title-md" sx={{
  mb: 1,
  color: 'white'
}}>
Solid
</Typography>
<Typography level="body-sm" sx={{
  color: 'white'
}}>
배경이 채워진 스타일
</Typography>
</Sheet>

<Sheet variant="soft" sx={{
  p: 3,
  maxWidth: 250,
  borderRadius: 'md'
}}>
<Typography level="title-md" sx={{
  mb: 1
}}>
Soft
</Typography>
<Typography level="body-sm">부드러운 배경 스타일</Typography>
</Sheet>

<Sheet variant="outlined" sx={{
  p: 3,
  maxWidth: 250,
  borderRadius: 'md'
}}>
<Typography level="title-md" sx={{
  mb: 1
}}>
Outlined
</Typography>
<Typography level="body-sm">테두리가 있는 스타일</Typography>
</Sheet>

<Sheet variant="plain" sx={{
  p: 3,
  maxWidth: 250,
  borderRadius: 'md'
}}>
<Typography level="title-md" sx={{
  mb: 1
}}>
Plain
</Typography>
<Typography level="body-sm">배경이 없는 평면 스타일</Typography>
</Sheet>
</div>
```

### Colors

다양한 색상을 적용할 수 있습니다.

```tsx
<div style={{
  display: 'flex',
  gap: '1rem',
  flexWrap: 'wrap'
}}>
<Sheet color="primary" variant="soft" sx={{
  p: 2,
  borderRadius: 'md'
}}>
<Typography level="title-sm">Primary</Typography>
</Sheet>

<Sheet color="neutral" variant="soft" sx={{
  p: 2,
  borderRadius: 'md'
}}>
<Typography level="title-sm">Neutral</Typography>
</Sheet>

<Sheet color="danger" variant="soft" sx={{
  p: 2,
  borderRadius: 'md'
}}>
<Typography level="title-sm">Danger</Typography>
</Sheet>

<Sheet color="success" variant="soft" sx={{
  p: 2,
  borderRadius: 'md'
}}>
<Typography level="title-sm">Success</Typography>
</Sheet>

<Sheet color="warning" variant="soft" sx={{
  p: 2,
  borderRadius: 'md'
}}>
<Typography level="title-sm">Warning</Typography>
</Sheet>
</div>
```

### User Profile Card

사용자 프로필을 표시하는 카드 예제입니다.

```tsx
<Sheet variant="outlined" sx={{
  maxWidth: 400,
  borderRadius: 'lg',
  p: 3
}}>
<Stack spacing={3}>
  <Stack direction="row" spacing={2} alignItems="center">
    <Avatar size="lg" src="https://i.pravatar.cc/100?img=1" />
    <Stack spacing={0.5}>
      <Typography level="title-lg">김철수</Typography>
      <Typography level="body-sm" sx={{
        color: 'text.secondary'
      }}>
      프론트엔드 개발자
    </Typography>
  </Stack>
  <Box sx={{
    ml: 'auto'
  }}>
  <IconButton variant="plain" size="sm">
    <SettingsIcon />
  </IconButton>
</Box>
</Stack>

<Typography level="body-md">
  사용자 경험을 중시하는 프론트엔드 개발자입니다. React와 TypeScript를 주로 사용하며, 깔끔하고 직관적인
  인터페이스 구현에 관심이 많습니다.
</Typography>

<Stack direction="row" spacing={1}>
  <Chip size="sm" variant="soft">
    React
  </Chip>
  <Chip size="sm" variant="soft">
    TypeScript
  </Chip>
  <Chip size="sm" variant="soft">
    Next.js
  </Chip>
</Stack>

<Stack direction="row" spacing={2}>
  <Button variant="outlined" fullWidth>
    팔로우
  </Button>
  <Button fullWidth>메시지 보내기</Button>
</Stack>
</Stack>
</Sheet>
```

### Article Card

아티클을 표시하는 복잡한 카드 레이아웃 예제입니다.

```tsx
<Sheet variant="outlined" sx={{
  maxWidth: 500,
  borderRadius: 'lg',
  overflow: 'hidden'
}}>
<Box sx={{
  height: 200,
  bgcolor: 'neutral.100',
  backgroundImage: 'url(https://images.unsplash.com/photo-1486312338219-ce68d2c6f44d?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80)',
  backgroundSize: 'cover',
  backgroundPosition: 'center'
}} />

<Stack spacing={2} sx={{
  p: 3
}}>
<Stack direction="row" justifyContent="space-between" alignItems="flex-start">
  <Stack spacing={1}>
    <Typography level="title-lg">React 18의 새로운 기능들</Typography>
    <Typography level="body-sm" sx={{
      color: 'text.secondary'
    }}>
    2024년 1월 15일 • 5분 읽기
  </Typography>
</Stack>
<IconButton variant="plain" size="sm" sx={{
  color: 'warning.500'
}}>
<StarIcon />
</IconButton>
</Stack>

<Typography level="body-md">
  React 18에서 도입된 Concurrent Features와 새로운 Hooks에 대해 자세히 알아보겠습니다. Suspense, useTransition,
  useDeferredValue 등의 새로운 기능들이 어떻게 사용자 경험을 개선하는지 살펴보겠습니다.
</Typography>

<Stack direction="row" spacing={1}>
  <Chip size="sm" variant="outlined">
    React
  </Chip>
  <Chip size="sm" variant="outlined">
    JavaScript
  </Chip>
  <Chip size="sm" variant="outlined">
    개발
  </Chip>
</Stack>

<Stack direction="row" justifyContent="space-between" alignItems="center">
  <Stack direction="row" spacing={1} alignItems="center">
    <Avatar size="sm" src="https://i.pravatar.cc/32?img=2" />
    <Typography level="body-sm">김개발</Typography>
  </Stack>

  <Stack direction="row" spacing={1}>
    <Button size="sm" variant="plain" startDecorator={<FavoriteIcon />}>
      24
    </Button>
    <Button size="sm" variant="plain" startDecorator={<ShareIcon />}>
      공유
    </Button>
  </Stack>
</Stack>
</Stack>
</Sheet>
```

### Notification Panel

알림을 표시하는 패널 예제입니다.

```tsx
<Sheet variant="soft" color="primary" sx={{
  maxWidth: 400,
  borderRadius: 'lg',
  p: 3
}}>
<Stack direction="row" justifyContent="space-between" alignItems="flex-start" spacing={2}>
  <Stack spacing={1}>
    <Typography level="title-md">새로운 알림이 있습니다</Typography>
    <Typography level="body-sm">프로젝트에 새로운 댓글이 달렸습니다. 확인해보시겠습니까?</Typography>
  </Stack>
  <IconButton variant="plain" size="sm">
    <CloseIcon />
  </IconButton>
</Stack>

<Stack direction="row" spacing={2} sx={{
  mt: 3
}}>
<Button size="sm" variant="solid">
  확인하기
</Button>
<Button size="sm" variant="outlined">
  나중에
</Button>
</Stack>
</Sheet>
```

### Stats Cards

통계 정보를 표시하는 카드들입니다.

```tsx
<div style={{
  display: 'flex',
  gap: '1rem',
  flexWrap: 'wrap'
}}>
<Sheet variant="outlined" sx={{
  minWidth: 200,
  borderRadius: 'lg',
  p: 3
}}>
<Stack spacing={1}>
  <Typography level="body-sm" sx={{
    color: 'text.secondary'
  }}>
  총 사용자
</Typography>
<Typography level="h2" color="primary">
  1,234
</Typography>
<Typography level="body-xs" sx={{
  color: 'success.600'
}}>
+12% 증가
</Typography>
</Stack>
</Sheet>

<Sheet variant="outlined" sx={{
  minWidth: 200,
  borderRadius: 'lg',
  p: 3
}}>
<Stack spacing={1}>
  <Typography level="body-sm" sx={{
    color: 'text.secondary'
  }}>
  매출
</Typography>
<Typography level="h2" color="primary">
  ₩5.6M
</Typography>
<Typography level="body-xs" sx={{
  color: 'success.600'
}}>
+8% 증가
</Typography>
</Stack>
</Sheet>

<Sheet variant="outlined" sx={{
  minWidth: 200,
  borderRadius: 'lg',
  p: 3
}}>
<Stack spacing={1}>
  <Typography level="body-sm" sx={{
    color: 'text.secondary'
  }}>
  주문 수
</Typography>
<Typography level="h2" color="primary">
  789
</Typography>
<Typography level="body-xs" sx={{
  color: 'danger.600'
}}>
-3% 감소
</Typography>
</Stack>
</Sheet>
</div>
```

### Form Sheet

폼을 담고 있는 시트 예제입니다.

```tsx
<Sheet variant="outlined" sx={{
  maxWidth: 400,
  borderRadius: 'lg',
  p: 4
}}>
<Stack spacing={3}>
  <Stack spacing={1}>
    <Typography level="title-lg">문의하기</Typography>
    <Typography level="body-sm" sx={{
      color: 'text.secondary'
    }}>
    궁금한 점이 있으시면 언제든지 연락해 주세요.
  </Typography>
</Stack>

<Stack spacing={2}>
  <Stack spacing={1}>
    <Typography level="body-sm" fontWeight="500">
      이름
    </Typography>
    <Box sx={{
      p: 2,
      border: '1px solid',
      borderColor: 'divider',
      borderRadius: 'sm',
      bgcolor: 'background.level1'
    }}>
    <Typography level="body-sm" sx={{
      color: 'text.secondary'
    }}>
    이름을 입력하세요
  </Typography>
</Box>
</Stack>

<Stack spacing={1}>
  <Typography level="body-sm" fontWeight="500">
    이메일
  </Typography>
  <Box sx={{
    p: 2,
    border: '1px solid',
    borderColor: 'divider',
    borderRadius: 'sm',
    bgcolor: 'background.level1'
  }}>
  <Typography level="body-sm" sx={{
    color: 'text.secondary'
  }}>
  이메일을 입력하세요
</Typography>
</Box>
</Stack>

<Stack spacing={1}>
  <Typography level="body-sm" fontWeight="500">
    메시지
  </Typography>
  <Box sx={{
    p: 2,
    minHeight: 100,
    border: '1px solid',
    borderColor: 'divider',
    borderRadius: 'sm',
    bgcolor: 'background.level1'
  }}>
  <Typography level="body-sm" sx={{
    color: 'text.secondary'
  }}>
  메시지를 입력하세요
</Typography>
</Box>
</Stack>
</Stack>

<Stack direction="row" spacing={2} justifyContent="flex-end">
  <Button variant="outlined">취소</Button>
  <Button>전송</Button>
</Stack>
</Stack>
</Sheet>
```

### Nested Sheets

시트 안에 다른 시트들을 중첩한 예제입니다.

```tsx
<Sheet variant="outlined" sx={{
  maxWidth: 600,
  borderRadius: 'lg',
  p: 3
}}>
<Stack spacing={3}>
  <Typography level="title-lg">대시보드</Typography>

  <Stack direction="row" spacing={2}>
    <Sheet variant="soft" color="primary" sx={{
      flex: 1,
      p: 2,
      borderRadius: 'md'
    }}>
    <Typography level="body-sm" sx={{
      color: 'primary.700'
    }}>
    활성 사용자
  </Typography>
  <Typography level="h3" sx={{
    color: 'primary.800'
  }}>
  2,345
</Typography>
</Sheet>

<Sheet variant="soft" color="success" sx={{
  flex: 1,
  p: 2,
  borderRadius: 'md'
}}>
<Typography level="body-sm" sx={{
  color: 'success.700'
}}>
완료된 작업
</Typography>
<Typography level="h3" sx={{
  color: 'success.800'
}}>
156
</Typography>
</Sheet>
</Stack>

<Sheet variant="soft" sx={{
  p: 3,
  borderRadius: 'md'
}}>
<Stack spacing={2}>
  <Typography level="title-md">최근 활동</Typography>

  <Stack spacing={1}>
    {['새로운 사용자가 가입했습니다', '프로젝트가 완료되었습니다', '댓글이 등록되었습니다'].map((activity, index) => <Box key={index} sx={{
      p: 1.5,
      bgcolor: 'background.body',
      borderRadius: 'sm'
    }}>
    <Typography level="body-sm">{activity}</Typography>
  </Box>)}
</Stack>
</Stack>
</Sheet>
</Stack>
</Sheet>
```

## Variants

Sheet는 4가지 variant를 지원합니다:

### solid

배경색이 채워진 스타일입니다. 강조가 필요한 콘텐츠에 사용합니다.

```tsx
<Sheet variant="solid" color="primary">
  강조된 콘텐츠
</Sheet>
```

### soft

부드러운 배경색을 가진 스타일입니다. 눈에 띄지만 과하지 않은 강조에 사용합니다.

```tsx
<Sheet variant="soft" color="success">
  부드러운 강조
</Sheet>
```

### outlined

테두리가 있는 스타일입니다. 가장 일반적으로 사용되는 카드 스타일입니다.

```tsx
<Sheet variant="outlined">기본 카드 스타일</Sheet>
```

### plain

배경이나 테두리가 없는 평면 스타일입니다. 미니멀한 디자인에 사용합니다.

```tsx
<Sheet variant="plain">미니멀한 스타일</Sheet>
```

## Colors

다양한 색상 테마를 적용할 수 있습니다:

- **primary**: 주요 작업이나 중요한 정보
- **neutral**: 일반적인 콘텐츠 (기본값)
- **danger**: 오류나 경고 상황
- **success**: 성공이나 긍정적인 결과
- **warning**: 주의사항이나 중요한 알림

```tsx
<Sheet color="danger" variant="soft">
  오류 메시지
</Sheet>
<Sheet color="success" variant="soft">
  성공 메시지
</Sheet>
```

## Common Use Cases

### Profile Cards

```tsx
<Sheet variant="outlined" sx={{ maxWidth: 400, borderRadius: 'lg', p: 3 }}>
  <Stack direction="row" spacing={2} alignItems="center">
    <Avatar size="lg" src="/profile.jpg" />
    <Stack>
      <Typography level="title-lg">사용자 이름</Typography>
      <Typography level="body-sm" color="neutral">
        직책
      </Typography>
    </Stack>
  </Stack>

  <Typography level="body-md" sx={{ mt: 2 }}>
    사용자 소개 텍스트...
  </Typography>

  <Stack direction="row" spacing={2} sx={{ mt: 3 }}>
    <Button variant="outlined" fullWidth>
      팔로우
    </Button>
    <Button fullWidth>메시지</Button>
  </Stack>
</Sheet>
```

### Dashboard Cards

```tsx
<Sheet variant="outlined" sx={{ p: 3, borderRadius: 'lg' }}>
  <Typography level="body-sm" color="neutral">
    총 매출
  </Typography>
  <Typography level="h2" color="primary">
    ₩1,234,567
  </Typography>
  <Typography level="body-xs" color="success">
    +12% 증가
  </Typography>
</Sheet>
```

### Content Cards

```tsx
<Sheet variant="outlined" sx={{ borderRadius: 'lg', overflow: 'hidden' }}>
  <Box sx={{ height: 200, bgcolor: 'primary.100' }}>{/* 이미지나 미디어 콘텐츠 */}</Box>

  <Stack spacing={2} sx={{ p: 3 }}>
    <Typography level="title-lg">콘텐츠 제목</Typography>
    <Typography level="body-md">콘텐츠 설명...</Typography>

    <Stack direction="row" justifyContent="space-between">
      <Typography level="body-sm" color="neutral">
        2024.01.15
      </Typography>
      <Button size="sm">더 보기</Button>
    </Stack>
  </Stack>
</Sheet>
```

### Form Containers

```tsx
<Sheet variant="outlined" sx={{ maxWidth: 500, borderRadius: 'lg', p: 4 }}>
  <Typography level="title-lg" sx={{ mb: 3 }}>
    로그인
  </Typography>

  <Stack spacing={2}>
    <FormControl>
      <FormLabel>이메일</FormLabel>
      <Input type="email" />
    </FormControl>

    <FormControl>
      <FormLabel>비밀번호</FormLabel>
      <Input type="password" />
    </FormControl>

    <Button fullWidth>로그인</Button>
  </Stack>
</Sheet>
```

### Modal Content

```tsx
<Sheet
  variant="outlined"
  sx={{
    position: 'fixed',
    top: '50%',
    left: '50%',
    transform: 'translate(-50%, -50%)',
    borderRadius: 'lg',
    p: 4,
    maxWidth: 400,
    boxShadow: 'lg',
  }}
>
  <Typography level="title-lg" sx={{ mb: 2 }}>
    확인 필요
  </Typography>
  <Typography level="body-md" sx={{ mb: 3 }}>
    정말로 이 작업을 수행하시겠습니까?
  </Typography>

  <Stack direction="row" spacing={2} justifyContent="flex-end">
    <Button variant="outlined">취소</Button>
    <Button color="danger">삭제</Button>
  </Stack>
</Sheet>
```

### Notification Banners

```tsx
<Sheet variant="soft" color="warning" sx={{ borderRadius: 'md', p: 2 }}>
  <Stack direction="row" alignItems="center" spacing={2}>
    <WarningIcon />
    <Typography level="body-md">시스템 점검이 예정되어 있습니다.</Typography>
    <Button size="sm" variant="plain">
      자세히 보기
    </Button>
  </Stack>
</Sheet>
```

## Best Practices

1. **적절한 패딩**: 콘텐츠 양에 따라 적절한 패딩을 설정하세요.

   ```tsx
   <Sheet sx={{ p: { xs: 2, sm: 3, md: 4 } }}>
   ```

2. **의미있는 변형 선택**:
   - `outlined`: 일반적인 카드나 패널
   - `soft`: 부드러운 강조나 구분
   - `solid`: 강한 강조나 액션
   - `plain`: 미니멀하거나 중첩된 콘텐츠

3. **색상의 의미 활용**:
   - `danger`: 오류, 삭제 등 위험한 작업
   - `success`: 성공 메시지, 완료 상태
   - `warning`: 주의사항, 중요 알림
   - `primary`: 주요 액션, 강조 콘텐츠
   - `neutral`: 일반 콘텐츠

4. **반응형 고려**:

   ```tsx
   <Sheet sx={{
     maxWidth: { xs: '100%', sm: 400 },
     borderRadius: { xs: 0, sm: 'lg' },
     p: { xs: 2, sm: 3 }
   }}>
   ```

5. **접근성**:
   - 적절한 시맨틱 태그와 함께 사용하세요
   - 충분한 색상 대비를 유지하세요
   - 키보드 탐색을 고려하세요

6. **성능**:
   - 그림자나 복잡한 스타일은 필요할 때만 사용하세요
   - 많은 카드가 있을 때는 가상화를 고려하세요

7. **일관성**:
   - 프로젝트 전반에서 일관된 borderRadius와 spacing을 사용하세요
   - 비슷한 콘텐츠에는 동일한 variant를 사용하세요

## Advanced Usage

### Custom Styling

```tsx
<Sheet
  sx={{
    background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
    border: 0,
    borderRadius: 3,
    boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
    color: 'white',
    p: 3,
  }}
>
  커스텀 스타일링
</Sheet>
```

### Interactive States

```tsx
<Sheet
  variant="outlined"
  sx={{
    cursor: 'pointer',
    transition: 'all 0.2s',
    '&:hover': {
      boxShadow: 'md',
      transform: 'translateY(-2px)',
    },
    '&:active': {
      transform: 'translateY(0)',
    },
  }}
  onClick={() => console.log('clicked')}
>
  클릭 가능한 카드
</Sheet>
```

### With Animation (Framer Motion)

```tsx
<Sheet
  initial={{ opacity: 0, y: 20 }}
  animate={{ opacity: 1, y: 0 }}
  transition={{ duration: 0.3 }}
  whileHover={{ scale: 1.02 }}
  variant="outlined"
  sx={{ p: 3 }}
>
  애니메이션 카드
</Sheet>
```

Sheet는 유연하고 강력한 표면 컴포넌트로, 다양한 UI 패턴을 구현하는 기초가 됩니다. 적절한 variant와 색상 조합을 통해 일관성 있고 아름다운 인터페이스를 만들 수 있습니다.
