@ceed/ads 1.13.4 → 1.15.0-next.2

package/dist/components/surfaces/Sheet.md

@@ -0,0 +1,900 @@
+# 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/ads';
+
+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와 색상 조합을 통해 일관성 있고 아름다운 인터페이스를 만들 수 있습니다.