@ceed/cds 1.34.1 → 1.36.0

package/dist/components/layout/Stack.md

@@ -6,10 +6,10 @@ The Stack component is a layout component that arranges child elements in one di
 
 ```tsx
 <Stack {...args}>
-  <StackItem>첫 번째 아이템</StackItem>
-  <StackItem>두 번째 아이템</StackItem>
-  <StackItem>세 번째 아이템</StackItem>
-</Stack>
+    <StackItem>첫 번째 아이템</StackItem>
+    <StackItem>두 번째 아이템</StackItem>
+    <StackItem>세 번째 아이템</StackItem>
+  </Stack>
 ```
 
 | Field          | Description | Default  |
@@ -42,37 +42,45 @@ function MyComponent() {
 The basic usage for vertical (`column`) and horizontal (`row`) layouts.
 
 ```tsx
-<div style={{
-  display: 'flex',
-  gap: '3rem',
-  flexWrap: 'wrap'
-}}>
-<div>
-  <Typography level="title-md" sx={{
-    mb: 2
-  }}>
-  세로 스택 (Column)
-</Typography>
-<Stack spacing={2}>
-  <StackItem>Item 1</StackItem>
-  <StackItem>Item 2</StackItem>
-  <StackItem>Item 3</StackItem>
-</Stack>
-</div>
-
-<div>
-  <Typography level="title-md" sx={{
-    mb: 2
-  }}>
-  가로 스택 (Row)
-</Typography>
-<Stack direction="row" spacing={2}>
-  <StackItem>Item 1</StackItem>
-  <StackItem>Item 2</StackItem>
-  <StackItem>Item 3</StackItem>
-</Stack>
-</div>
-</div>
+<div
+    style={{
+      display: "flex",
+      gap: "3rem",
+      flexWrap: "wrap"
+    }}
+  >
+    <div>
+      <Typography
+        level="title-md"
+        sx={{
+          mb: 2
+        }}
+      >
+        세로 스택 (Column)
+      </Typography>
+      <Stack spacing={2}>
+        <StackItem>Item 1</StackItem>
+        <StackItem>Item 2</StackItem>
+        <StackItem>Item 3</StackItem>
+      </Stack>
+    </div>
+
+    <div>
+      <Typography
+        level="title-md"
+        sx={{
+          mb: 2
+        }}
+      >
+        가로 스택 (Row)
+      </Typography>
+      <Stack direction="row" spacing={2}>
+        <StackItem>Item 1</StackItem>
+        <StackItem>Item 2</StackItem>
+        <StackItem>Item 3</StackItem>
+      </Stack>
+    </div>
+  </div>
 ```
 
 ### Directions
@@ -80,68 +88,84 @@ The basic usage for vertical (`column`) and horizontal (`row`) layouts.
 You can use different layout directions.
 
 ```tsx
-<div style={{
-  display: 'flex',
-  flexDirection: 'column',
-  gap: '3rem'
-}}>
-<div>
-  <Typography level="title-sm" sx={{
-    mb: 1
-  }}>
-  Row (가로)
-</Typography>
-<Stack direction="row" spacing={2}>
-  <StackItem>1</StackItem>
-  <StackItem>2</StackItem>
-  <StackItem>3</StackItem>
-</Stack>
-</div>
-
-<div>
-  <Typography level="title-sm" sx={{
-    mb: 1
-  }}>
-  Row Reverse (가로 역순)
-</Typography>
-<Stack direction="row-reverse" spacing={2}>
-  <StackItem>1</StackItem>
-  <StackItem>2</StackItem>
-  <StackItem>3</StackItem>
-</Stack>
-</div>
-
-<div style={{
-  display: 'flex',
-  gap: '3rem'
-}}>
-<div>
-  <Typography level="title-sm" sx={{
-    mb: 1
-  }}>
-  Column (세로)
-</Typography>
-<Stack direction="column" spacing={2}>
-  <StackItem>1</StackItem>
-  <StackItem>2</StackItem>
-  <StackItem>3</StackItem>
-</Stack>
-</div>
+<div
+    style={{
+      display: "flex",
+      flexDirection: "column",
+      gap: "3rem"
+    }}
+  >
+    <div>
+      <Typography
+        level="title-sm"
+        sx={{
+          mb: 1
+        }}
+      >
+        Row (가로)
+      </Typography>
+      <Stack direction="row" spacing={2}>
+        <StackItem>1</StackItem>
+        <StackItem>2</StackItem>
+        <StackItem>3</StackItem>
+      </Stack>
+    </div>
+
+    <div>
+      <Typography
+        level="title-sm"
+        sx={{
+          mb: 1
+        }}
+      >
+        Row Reverse (가로 역순)
+      </Typography>
+      <Stack direction="row-reverse" spacing={2}>
+        <StackItem>1</StackItem>
+        <StackItem>2</StackItem>
+        <StackItem>3</StackItem>
+      </Stack>
+    </div>
 
-<div>
-  <Typography level="title-sm" sx={{
-    mb: 1
-  }}>
-  Column Reverse (세로 역순)
-</Typography>
-<Stack direction="column-reverse" spacing={2}>
-  <StackItem>1</StackItem>
-  <StackItem>2</StackItem>
-  <StackItem>3</StackItem>
-</Stack>
-</div>
-</div>
-</div>
+    <div
+      style={{
+        display: "flex",
+        gap: "3rem"
+      }}
+    >
+      <div>
+        <Typography
+          level="title-sm"
+          sx={{
+            mb: 1
+          }}
+        >
+          Column (세로)
+        </Typography>
+        <Stack direction="column" spacing={2}>
+          <StackItem>1</StackItem>
+          <StackItem>2</StackItem>
+          <StackItem>3</StackItem>
+        </Stack>
+      </div>
+
+      <div>
+        <Typography
+          level="title-sm"
+          sx={{
+            mb: 1
+          }}
+        >
+          Column Reverse (세로 역순)
+        </Typography>
+        <Stack direction="column-reverse" spacing={2}>
+          <StackItem>1</StackItem>
+          <StackItem>2</StackItem>
+          <StackItem>3</StackItem>
+        </Stack>
+      </div>
+    </div>
+  </div>
 ```
 
 ### Different Spacing
@@ -149,63 +173,77 @@ You can use different layout directions.
 You can apply different spacing values.
 
 ```tsx
-<div style={{
-  display: 'flex',
-  flexDirection: 'column',
-  gap: '3rem'
-}}>
-<div>
-  <Typography level="title-sm" sx={{
-    mb: 1
-  }}>
-  간격 없음 (spacing=0)
-</Typography>
-<Stack direction="row" spacing={0}>
-  <StackItem>Item 1</StackItem>
-  <StackItem>Item 2</StackItem>
-  <StackItem>Item 3</StackItem>
-</Stack>
-</div>
-
-<div>
-  <Typography level="title-sm" sx={{
-    mb: 1
-  }}>
-  작은 간격 (spacing=1)
-</Typography>
-<Stack direction="row" spacing={1}>
-  <StackItem>Item 1</StackItem>
-  <StackItem>Item 2</StackItem>
-  <StackItem>Item 3</StackItem>
-</Stack>
-</div>
-
-<div>
-  <Typography level="title-sm" sx={{
-    mb: 1
-  }}>
-  중간 간격 (spacing=2)
-</Typography>
-<Stack direction="row" spacing={2}>
-  <StackItem>Item 1</StackItem>
-  <StackItem>Item 2</StackItem>
-  <StackItem>Item 3</StackItem>
-</Stack>
-</div>
-
-<div>
-  <Typography level="title-sm" sx={{
-    mb: 1
-  }}>
-  큰 간격 (spacing=4)
-</Typography>
-<Stack direction="row" spacing={4}>
-  <StackItem>Item 1</StackItem>
-  <StackItem>Item 2</StackItem>
-  <StackItem>Item 3</StackItem>
-</Stack>
-</div>
-</div>
+<div
+    style={{
+      display: "flex",
+      flexDirection: "column",
+      gap: "3rem"
+    }}
+  >
+    <div>
+      <Typography
+        level="title-sm"
+        sx={{
+          mb: 1
+        }}
+      >
+        간격 없음 (spacing=0)
+      </Typography>
+      <Stack direction="row" spacing={0}>
+        <StackItem>Item 1</StackItem>
+        <StackItem>Item 2</StackItem>
+        <StackItem>Item 3</StackItem>
+      </Stack>
+    </div>
+
+    <div>
+      <Typography
+        level="title-sm"
+        sx={{
+          mb: 1
+        }}
+      >
+        작은 간격 (spacing=1)
+      </Typography>
+      <Stack direction="row" spacing={1}>
+        <StackItem>Item 1</StackItem>
+        <StackItem>Item 2</StackItem>
+        <StackItem>Item 3</StackItem>
+      </Stack>
+    </div>
+
+    <div>
+      <Typography
+        level="title-sm"
+        sx={{
+          mb: 1
+        }}
+      >
+        중간 간격 (spacing=2)
+      </Typography>
+      <Stack direction="row" spacing={2}>
+        <StackItem>Item 1</StackItem>
+        <StackItem>Item 2</StackItem>
+        <StackItem>Item 3</StackItem>
+      </Stack>
+    </div>
+
+    <div>
+      <Typography
+        level="title-sm"
+        sx={{
+          mb: 1
+        }}
+      >
+        큰 간격 (spacing=4)
+      </Typography>
+      <Stack direction="row" spacing={4}>
+        <StackItem>Item 1</StackItem>
+        <StackItem>Item 2</StackItem>
+        <StackItem>Item 3</StackItem>
+      </Stack>
+    </div>
+  </div>
 ```
 
 ### Alignment
@@ -213,68 +251,107 @@ You can apply different spacing values.
 You can control element alignment in different ways.
 
 ```tsx
-<div style={{
-  display: 'flex',
-  flexDirection: 'column',
-  gap: '3rem'
-}}>
-<div>
-  <Typography level="title-sm" sx={{
-    mb: 1
-  }}>
-  Center Alignment
-</Typography>
-<Stack direction="row" spacing={2} alignItems="center" justifyContent="center" sx={{
-  minHeight: 120,
-  bgcolor: 'neutral.50',
-  borderRadius: 'md',
-  p: 2
-}}>
-<StackItem sx={{
-  height: 40
-}}>짧은 아이템</StackItem>
-<StackItem sx={{
-  height: 80
-}}>중간 아이템</StackItem>
-<StackItem sx={{
-  height: 60
-}}>다른 아이템</StackItem>
-</Stack>
-</div>
-
-<div>
-  <Typography level="title-sm" sx={{
-    mb: 1
-  }}>
-  Space Between
-</Typography>
-<Stack direction="row" spacing={0} justifyContent="space-between" sx={{
-  bgcolor: 'neutral.50',
-  borderRadius: 'md',
-  p: 2
-}}>
-<StackItem>왼쪽</StackItem>
-<StackItem>가운데</StackItem>
-<StackItem>오른쪽</StackItem>
-</Stack>
-</div>
-
-<div>
-  <Typography level="title-sm" sx={{
-    mb: 1
-  }}>
-  Flex End
-</Typography>
-<Stack direction="row" spacing={2} justifyContent="flex-end" sx={{
-  bgcolor: 'neutral.50',
-  borderRadius: 'md',
-  p: 2
-}}>
-<StackItem>Item 1</StackItem>
-<StackItem>Item 2</StackItem>
-</Stack>
-</div>
-</div>
+<div
+    style={{
+      display: "flex",
+      flexDirection: "column",
+      gap: "3rem"
+    }}
+  >
+    <div>
+      <Typography
+        level="title-sm"
+        sx={{
+          mb: 1
+        }}
+      >
+        Center Alignment
+      </Typography>
+      <Stack
+        direction="row"
+        spacing={2}
+        alignItems="center"
+        justifyContent="center"
+        sx={{
+          minHeight: 120,
+          bgcolor: "neutral.50",
+          borderRadius: "md",
+          p: 2
+        }}
+      >
+        <StackItem
+          sx={{
+            height: 40
+          }}
+        >
+          짧은 아이템
+        </StackItem>
+        <StackItem
+          sx={{
+            height: 80
+          }}
+        >
+          중간 아이템
+        </StackItem>
+        <StackItem
+          sx={{
+            height: 60
+          }}
+        >
+          다른 아이템
+        </StackItem>
+      </Stack>
+    </div>
+
+    <div>
+      <Typography
+        level="title-sm"
+        sx={{
+          mb: 1
+        }}
+      >
+        Space Between
+      </Typography>
+      <Stack
+        direction="row"
+        spacing={0}
+        justifyContent="space-between"
+        sx={{
+          bgcolor: "neutral.50",
+          borderRadius: "md",
+          p: 2
+        }}
+      >
+        <StackItem>왼쪽</StackItem>
+        <StackItem>가운데</StackItem>
+        <StackItem>오른쪽</StackItem>
+      </Stack>
+    </div>
+
+    <div>
+      <Typography
+        level="title-sm"
+        sx={{
+          mb: 1
+        }}
+      >
+        Flex End
+      </Typography>
+      <Stack
+        direction="row"
+        spacing={2}
+        justifyContent="flex-end"
+        sx={{
+          bgcolor: "neutral.50",
+          borderRadius: "md",
+          p: 2
+        }}
+      >
+        <StackItem>Item 1</StackItem>
+        <StackItem>Item 2</StackItem>
+      </Stack>
+    </div>
+  </div>
 ```
 
 ### Responsive Direction
@@ -283,56 +360,69 @@ You can change the layout direction based on screen size.
 
 ```tsx
 <div>
-  <Typography level="title-md" sx={{
-    mb: 2
-  }}>
-  반응형 방향 (화면 크기에 따라 세로↔가로 전환)
-</Typography>
-<Stack direction={{
-  xs: 'column',
-  sm: 'row'
-}} spacing={2} sx={{
-  p: 2,
-  bgcolor: 'background.level1',
-  borderRadius: 'md'
-}}>
-<Box sx={{
-  flex: 1,
-  p: 2,
-  bgcolor: 'primary.100',
-  borderRadius: 'sm'
-}}>
-<Typography level="body-sm">
-  작은 화면: 세로 배치
-  <br />큰 화면: 가로 배치
-  </Typography>
-</Box>
-<Box sx={{
-  flex: 1,
-  p: 2,
-  bgcolor: 'success.100',
-  borderRadius: 'sm'
-}}>
-<Typography level="body-sm">
-  반응형 레이아웃으로
-  <br />
-  자동 조정됩니다
-</Typography>
-</Box>
-<Box sx={{
-  flex: 1,
-  p: 2,
-  bgcolor: 'warning.100',
-  borderRadius: 'sm'
-}}>
-<Typography level="body-sm">
-  브라우저 크기를
-  <br />
-  조절해보세요
-</Typography>
-</Box>
-</Stack>
-</div>
+    <Typography
+      level="title-md"
+      sx={{
+        mb: 2
+      }}
+    >
+      반응형 방향 (화면 크기에 따라 세로↔가로 전환)
+    </Typography>
+    <Stack
+      direction={{
+        xs: "column",
+        sm: "row"
+      }}
+      spacing={2}
+      sx={{
+        p: 2,
+        bgcolor: "background.level1",
+        borderRadius: "md"
+      }}
+    >
+      <Box
+        sx={{
+          flex: 1,
+          p: 2,
+          bgcolor: "primary.100",
+          borderRadius: "sm"
+        }}
+      >
+        <Typography level="body-sm">
+          작은 화면: 세로 배치
+          <br />큰 화면: 가로 배치
+        </Typography>
+      </Box>
+      <Box
+        sx={{
+          flex: 1,
+          p: 2,
+          bgcolor: "success.100",
+          borderRadius: "sm"
+        }}
+      >
+        <Typography level="body-sm">
+          반응형 레이아웃으로
+          <br />
+          자동 조정됩니다
+        </Typography>
+      </Box>
+      <Box
+        sx={{
+          flex: 1,
+          p: 2,
+          bgcolor: "warning.100",
+          borderRadius: "sm"
+        }}
+      >
+        <Typography level="body-sm">
+          브라우저 크기를
+          <br />
+          조절해보세요
+        </Typography>
+      </Box>
+    </Stack>
+  </div>
 ```
 
 ### Nested Stacks
@@ -341,56 +431,89 @@ You can nest Stack components to build more complex layouts.
 
 ```tsx
 <div>
-  <Typography level="title-md" sx={{
-    mb: 2
-  }}>
-  중첩된 스택
-</Typography>
-<Stack spacing={3}>
-  <Box sx={{
-    p: 2,
-    bgcolor: 'primary.50',
-    borderRadius: 'md'
-  }}>
-  <Typography level="title-sm" sx={{
-    mb: 2
-  }}>
-  세로 스택 안의 가로 스택
-</Typography>
-<Stack direction="row" spacing={2}>
-  <StackItem sx={{
-    bgcolor: 'primary.200'
-  }}>Item 1</StackItem>
-  <StackItem sx={{
-    bgcolor: 'primary.200'
-  }}>Item 2</StackItem>
-  <StackItem sx={{
-    bgcolor: 'primary.200'
-  }}>Item 3</StackItem>
-</Stack>
-</Box>
-
-<Box sx={{
-  p: 2,
-  bgcolor: 'success.50',
-  borderRadius: 'md'
-}}>
-<Typography level="title-sm" sx={{
-  mb: 2
-}}>
-또 다른 가로 스택
-</Typography>
-<Stack direction="row" spacing={2} justifyContent="center">
-  <StackItem sx={{
-    bgcolor: 'success.200'
-  }}>중앙</StackItem>
-  <StackItem sx={{
-    bgcolor: 'success.200'
-  }}>정렬</StackItem>
-</Stack>
-</Box>
-</Stack>
-</div>
+    <Typography
+      level="title-md"
+      sx={{
+        mb: 2
+      }}
+    >
+      중첩된 스택
+    </Typography>
+    <Stack spacing={3}>
+      <Box
+        sx={{
+          p: 2,
+          bgcolor: "primary.50",
+          borderRadius: "md"
+        }}
+      >
+        <Typography
+          level="title-sm"
+          sx={{
+            mb: 2
+          }}
+        >
+          세로 스택 안의 가로 스택
+        </Typography>
+        <Stack direction="row" spacing={2}>
+          <StackItem
+            sx={{
+              bgcolor: "primary.200"
+            }}
+          >
+            Item 1
+          </StackItem>
+          <StackItem
+            sx={{
+              bgcolor: "primary.200"
+            }}
+          >
+            Item 2
+          </StackItem>
+          <StackItem
+            sx={{
+              bgcolor: "primary.200"
+            }}
+          >
+            Item 3
+          </StackItem>
+        </Stack>
+      </Box>
+
+      <Box
+        sx={{
+          p: 2,
+          bgcolor: "success.50",
+          borderRadius: "md"
+        }}
+      >
+        <Typography
+          level="title-sm"
+          sx={{
+            mb: 2
+          }}
+        >
+          또 다른 가로 스택
+        </Typography>
+        <Stack direction="row" spacing={2} justifyContent="center">
+          <StackItem
+            sx={{
+              bgcolor: "success.200"
+            }}
+          >
+            중앙
+          </StackItem>
+          <StackItem
+            sx={{
+              bgcolor: "success.200"
+            }}
+          >
+            정렬
+          </StackItem>
+        </Stack>
+      </Box>
+    </Stack>
+  </div>
 ```
 
 ### Real World Examples
@@ -398,242 +521,293 @@ You can nest Stack components to build more complex layouts.
 Examples that demonstrate real-world use cases.
 
 ```tsx
-<div style={{
-  display: 'flex',
-  flexDirection: 'column',
-  gap: '3rem',
-  maxWidth: 600
-}}>
-{/* Navigation Bar */}
-<div>
-  <Typography level="title-sm" sx={{
-    mb: 2
-  }}>
-  내비게이션 바
-</Typography>
-<Stack direction="row" spacing={0} justifyContent="space-between" alignItems="center" sx={{
-  p: 2,
-  bgcolor: 'background.body',
-  border: '1px solid',
-  borderColor: 'divider',
-  borderRadius: 'md'
-}}>
-<Typography level="title-md">로고</Typography>
-<Stack direction="row" spacing={2}>
-  <Button variant="plain" size="sm">
-    홈
-  </Button>
-  <Button variant="plain" size="sm">
-    소개
-  </Button>
-  <Button variant="plain" size="sm">
-    연락처
-  </Button>
-</Stack>
-<Button size="sm">로그인</Button>
-</Stack>
-</div>
-
-{/* Profile Card */}
-<div>
-  <Typography level="title-sm" sx={{
-    mb: 2
-  }}>
-  프로필 카드
-</Typography>
-<Box sx={{
-  p: 3,
-  bgcolor: 'background.body',
-  border: '1px solid',
-  borderColor: 'divider',
-  borderRadius: 'lg'
-}}>
-<Stack spacing={2}>
-  <Stack direction="row" spacing={2} alignItems="center">
-    <Avatar size="lg" />
-    <Stack spacing={0.5}>
-      <Typography level="title-md">홍길동</Typography>
-      <Typography level="body-sm" sx={{
-        color: 'text.secondary'
-      }}>
-      프론트엔드 개발자
-    </Typography>
-  </Stack>
-</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={1} justifyContent="flex-end">
-  <Button size="sm" variant="outlined" startDecorator={<BookmarkIcon />}>
-    저장
-  </Button>
-  <Button size="sm" variant="outlined" startDecorator={<ShareIcon />}>
-    공유
-  </Button>
-</Stack>
-</Stack>
-</Box>
-</div>
-
-{/* Article Card */}
-<div>
-  <Typography level="title-sm" sx={{
-    mb: 2
-  }}>
-  아티클 카드
-</Typography>
-<Box sx={{
-  p: 3,
-  bgcolor: 'background.body',
-  border: '1px solid',
-  borderColor: 'divider',
-  borderRadius: 'lg'
-}}>
-<Stack spacing={2}>
-  <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>
-  <Button variant="plain" size="sm" sx={{
-    color: 'warning.500'
-  }}>
-  <StarIcon />
-</Button>
-</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" />
-    <Typography level="body-sm">김개발</Typography>
-  </Stack>
-  <Stack direction="row" spacing={1}>
-    <Button size="sm" variant="plain">
-      좋아요 24
-    </Button>
-    <Button size="sm" variant="plain">
-      댓글 5
-    </Button>
-  </Stack>
-</Stack>
-</Stack>
-</Box>
-</div>
-
-{/* Form Layout */}
-<div>
-  <Typography level="title-sm" sx={{
-    mb: 2
-  }}>
-  폼 레이아웃
-</Typography>
-<Box sx={{
-  p: 3,
-  bgcolor: 'background.body',
-  border: '1px solid',
-  borderColor: 'divider',
-  borderRadius: 'lg'
-}}>
-<Stack spacing={3}>
-  <Typography level="title-md">문의하기</Typography>
-
-  <Stack spacing={2}>
-    <Stack spacing={1}>
-      <Typography level="body-sm" fontWeight="500">
-        이름
+<div
+    style={{
+      display: "flex",
+      flexDirection: "column",
+      gap: "3rem",
+      maxWidth: 600
+    }}
+  >
+    {/* Navigation Bar */}
+    <div>
+      <Typography
+        level="title-sm"
+        sx={{
+          mb: 2
+        }}
+      >
+        내비게이션 바
       </Typography>
-      <Box sx={{
-        p: 1.5,
-        bgcolor: 'background.level1',
-        borderRadius: 'sm'
-      }}>
-      <Typography level="body-sm" sx={{
-        color: 'text.secondary'
-      }}>
-      이름을 입력하세요
-    </Typography>
-  </Box>
-</Stack>
-
-<Stack spacing={1}>
-  <Typography level="body-sm" fontWeight="500">
-    이메일
-  </Typography>
-  <Box sx={{
-    p: 1.5,
-    bgcolor: 'background.level1',
-    borderRadius: 'sm'
-  }}>
-  <Typography level="body-sm" sx={{
-    color: 'text.secondary'
-  }}>
-  이메일을 입력하세요
-</Typography>
-</Box>
-</Stack>
-
-<Stack spacing={1}>
-  <Typography level="body-sm" fontWeight="500">
-    메시지
-  </Typography>
-  <Box sx={{
-    p: 1.5,
-    minHeight: 80,
-    bgcolor: 'background.level1',
-    borderRadius: 'sm'
-  }}>
-  <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>
-</Box>
-</div>
-</div>
+      <Stack
+        direction="row"
+        spacing={0}
+        justifyContent="space-between"
+        alignItems="center"
+        sx={{
+          p: 2,
+          bgcolor: "background.body",
+          border: "1px solid",
+          borderColor: "divider",
+          borderRadius: "md"
+        }}
+      >
+        <Typography level="title-md">로고</Typography>
+        <Stack direction="row" spacing={2}>
+          <Button variant="plain" size="sm">
+            홈
+          </Button>
+          <Button variant="plain" size="sm">
+            소개
+          </Button>
+          <Button variant="plain" size="sm">
+            연락처
+          </Button>
+        </Stack>
+        <Button size="sm">로그인</Button>
+      </Stack>
+    </div>
+
+    {/* Profile Card */}
+    <div>
+      <Typography
+        level="title-sm"
+        sx={{
+          mb: 2
+        }}
+      >
+        프로필 카드
+      </Typography>
+      <Box
+        sx={{
+          p: 3,
+          bgcolor: "background.body",
+          border: "1px solid",
+          borderColor: "divider",
+          borderRadius: "lg"
+        }}
+      >
+        <Stack spacing={2}>
+          <Stack direction="row" spacing={2} alignItems="center">
+            <Avatar size="lg" />
+            <Stack spacing={0.5}>
+              <Typography level="title-md">홍길동</Typography>
+              <Typography
+                level="body-sm"
+                sx={{
+                  color: "text.secondary"
+                }}
+              >
+                프론트엔드 개발자
+              </Typography>
+            </Stack>
+          </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={1} justifyContent="flex-end">
+            <Button size="sm" variant="outlined" startDecorator={<BookmarkIcon />}>
+              저장
+            </Button>
+            <Button size="sm" variant="outlined" startDecorator={<ShareIcon />}>
+              공유
+            </Button>
+          </Stack>
+        </Stack>
+      </Box>
+    </div>
+
+    {/* Article Card */}
+    <div>
+      <Typography
+        level="title-sm"
+        sx={{
+          mb: 2
+        }}
+      >
+        아티클 카드
+      </Typography>
+      <Box
+        sx={{
+          p: 3,
+          bgcolor: "background.body",
+          border: "1px solid",
+          borderColor: "divider",
+          borderRadius: "lg"
+        }}
+      >
+        <Stack spacing={2}>
+          <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>
+            <Button
+              variant="plain"
+              size="sm"
+              sx={{
+                color: "warning.500"
+              }}
+            >
+              <StarIcon />
+            </Button>
+          </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" />
+              <Typography level="body-sm">김개발</Typography>
+            </Stack>
+            <Stack direction="row" spacing={1}>
+              <Button size="sm" variant="plain">
+                좋아요 24
+              </Button>
+              <Button size="sm" variant="plain">
+                댓글 5
+              </Button>
+            </Stack>
+          </Stack>
+        </Stack>
+      </Box>
+    </div>
+
+    {/* Form Layout */}
+    <div>
+      <Typography
+        level="title-sm"
+        sx={{
+          mb: 2
+        }}
+      >
+        폼 레이아웃
+      </Typography>
+      <Box
+        sx={{
+          p: 3,
+          bgcolor: "background.body",
+          border: "1px solid",
+          borderColor: "divider",
+          borderRadius: "lg"
+        }}
+      >
+        <Stack spacing={3}>
+          <Typography level="title-md">문의하기</Typography>
+
+          <Stack spacing={2}>
+            <Stack spacing={1}>
+              <Typography level="body-sm" fontWeight="500">
+                이름
+              </Typography>
+              <Box
+                sx={{
+                  p: 1.5,
+                  bgcolor: "background.level1",
+                  borderRadius: "sm"
+                }}
+              >
+                <Typography
+                  level="body-sm"
+                  sx={{
+                    color: "text.secondary"
+                  }}
+                >
+                  이름을 입력하세요
+                </Typography>
+              </Box>
+            </Stack>
+
+            <Stack spacing={1}>
+              <Typography level="body-sm" fontWeight="500">
+                이메일
+              </Typography>
+              <Box
+                sx={{
+                  p: 1.5,
+                  bgcolor: "background.level1",
+                  borderRadius: "sm"
+                }}
+              >
+                <Typography
+                  level="body-sm"
+                  sx={{
+                    color: "text.secondary"
+                  }}
+                >
+                  이메일을 입력하세요
+                </Typography>
+              </Box>
+            </Stack>
+
+            <Stack spacing={1}>
+              <Typography level="body-sm" fontWeight="500">
+                메시지
+              </Typography>
+              <Box
+                sx={{
+                  p: 1.5,
+                  minHeight: 80,
+                  bgcolor: "background.level1",
+                  borderRadius: "sm"
+                }}
+              >
+                <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>
+      </Box>
+    </div>
+  </div>
 ```
 
 ## Key Props
@@ -724,12 +898,7 @@ Stack supports responsive values for all props:
 ### Navigation Bar
 
 ```tsx
-<Stack
-  direction="row"
-  justifyContent="space-between"
-  alignItems="center"
-  sx={{ p: 2 }}
->
+<Stack direction="row" justifyContent="space-between" alignItems="center" sx={{ p: 2 }}>
   <Typography level="title-lg">Logo</Typography>
   <Stack direction="row" spacing={2}>
     <Button variant="plain">Home</Button>
@@ -781,17 +950,21 @@ Stack supports responsive values for all props:
         <Chip variant="soft">New</Chip>
       </Stack>
 
-      <Typography level="body-md">
-        Product description goes here...
-      </Typography>
+      <Typography level="body-md">Product description goes here...</Typography>
 
       <Stack direction="row" spacing={1}>
-        <Chip size="sm" variant="outlined">Tag 1</Chip>
-        <Chip size="sm" variant="outlined">Tag 2</Chip>
+        <Chip size="sm" variant="outlined">
+          Tag 1
+        </Chip>
+        <Chip size="sm" variant="outlined">
+          Tag 2
+        </Chip>
       </Stack>
 
       <Stack direction="row" justifyContent="space-between" alignItems="center">
-        <Typography level="title-lg" color="primary">$99.99</Typography>
+        <Typography level="title-lg" color="primary">
+          $99.99
+        </Typography>
         <Button>Add to Cart</Button>
       </Stack>
     </Stack>
@@ -813,9 +986,7 @@ Stack supports responsive values for all props:
     </Stack>
   </Stack>
 
-  <Typography level="body-md">
-    Passionate about creating great user experiences...
-  </Typography>
+  <Typography level="body-md">Passionate about creating great user experiences...</Typography>
 
   <Stack direction="row" spacing={1}>
     <Chip variant="soft">React</Chip>
@@ -824,7 +995,9 @@ Stack supports responsive values for all props:
   </Stack>
 
   <Stack direction="row" spacing={2}>
-    <Button variant="outlined" fullWidth>Follow</Button>
+    <Button variant="outlined" fullWidth>
+      Follow
+    </Button>
     <Button fullWidth>Message</Button>
   </Stack>
 </Stack>