컴포넌트 문서 기본 프리셋 22개 생성

package.json

@@ -28,7 +28,7 @@
     "@mdx-js/react": "^3.1.1",
     "@react-router/node": "^8.3.1",
     "browserslist": "^4.28.9",
-    "daleui": "^1.1.1",
+    "daleui": "^1.4.0",
     "isbot": "^5",
     "mermaid": "^11.16.1",
     "pretendard": "^1.3.9",

src/content/docs/avatar.mdx

@@ -0,0 +1,14 @@
+Avatar는 현재 로그인한 사용자나 콘텐츠 작성자의 프로필 이미지를 동그라미나 네모 형태로 시각화하고(사용자 식별 기능),<br/>
+이미지가 없을 때는 이름의 이니셜이나 기본 아이콘을 대신 보여주어(대체 정보 제공) 서비스 내에서 사용자의 고유한 정체성과 소속감을 직관적으로 표현해 주는 기본 컴포넌트입니다.
+
+## 기본 사용법
+
+```tsx
+import { Avatar } from "daleui";
+
+export function Example() {
+  return (
+    <Avatar src="https://github.com/DaleSeo.png" name="서달레" size="md" />
+  );
+}
+```

src/content/docs/box.mdx

@@ -0,0 +1,15 @@
+Box는 가장 기본적인 레이아웃 컴포넌트입니다. 배치 규칙 없이 한 덩어리를 감싸거나 폭을 제한하고 싶을 때 쓰는 빈 상자입니다. `padding`·`margin`은 [스페이싱 토큰](/docs/spacing) 이름을 받고, `as`로 렌더링할 태그를 바꿔 `section`·`main` 같은 시맨틱 요소로도 쓸 수 있습니다.
+
+## 기본 사용법
+
+```tsx
+import { Box } from "daleui";
+
+export function Example() {
+  return (
+    <Box as="section" padding="24" width="360px">
+      여백과 폭만 정해 둔 상자입니다.
+    </Box>
+  );
+}
+```

src/content/docs/button.mdx

@@ -0,0 +1,15 @@
+Button은 사용자의 명확한 작업 실행을 위해 사용되는 컴포넌트로, 완료, 저장, 제출과 같은 액션에 사용합니다.
+
+## 기본 사용법
+
+```tsx
+import { Button } from "daleui";
+
+export function Example() {
+  return (
+    <Button type="submit" variant="solid" tone="brand">
+      저장
+    </Button>
+  );
+}
+```

src/content/docs/card.mdx

@@ -0,0 +1,26 @@
+카드 컴포넌트는 정보 전달 또는 특정 페이지나 리소스로 사용자를 이동시키는 것을 주목적으로 합니다.
+
+- 링크가 없는 경우 정보 전달을 목적으로 사용합니다.
+- 링크가 있는 경우에는 카드 전체 영역 또는 특정 CTA 버튼이 하이퍼링크로 동작합니다.<br/>
+  이때 카드는 사용자에게 “여기를 클릭하면 새로운 곳으로 이동한다”는 점을 직관적으로 인지시키는 탐색형 카드입니다.
+
+## 기본 사용법
+
+```tsx
+import { Card } from "daleui";
+
+export function Example() {
+  return (
+    <Card tone="brand" outline>
+      <Card.Icon name="award" />
+      <Card.Body>
+        <Card.Title>디자인 토큰</Card.Title>
+        <Card.Description>
+          색·타이포그래피·여백을 이름으로 쓰는 방법을 정리했습니다.
+        </Card.Description>
+      </Card.Body>
+      <Card.Link href="/docs/colors">색상 문서 보기</Card.Link>
+    </Card>
+  );
+}
+```

src/content/docs/checkbox.mdx

@@ -0,0 +1,12 @@
+Checkbox는 사용자가 하나 이상을 중복 선택할 수 있도록 지원하는 인터페이스 구성 요소입니다.<br/>
+개별 항목의 상태를 선택(Checked) 또는 해제(Unchecked)로 변경하는 기능을 수행합니다.
+
+## 기본 사용법
+
+```tsx
+import { Checkbox } from "daleui";
+
+export function Example() {
+  return <Checkbox name="terms" label="이용약관에 동의합니다" required />;
+}
+```

src/content/docs/checkboxgroup.mdx

@@ -0,0 +1,17 @@
+CheckboxGroup은 여러 선택지 중 하나 이상을 고르는 질문을 하나의 그룹으로 묶는 컴포넌트입니다. 선택지가 2~5개로 적고 모든 옵션을 한눈에 보여줘야 할 때 적합합니다. 그룹 레이블과 도움말을 그룹 단위로 관리하므로, 개별 [Checkbox](/docs/checkbox)를 여러 개 늘어놓는 대신 이 컴포넌트를 씁니다.
+
+## 기본 사용법
+
+```tsx
+import { CheckboxGroup } from "daleui";
+
+export function Example() {
+  return (
+    <CheckboxGroup name="fruits" label="좋아하는 과일을 모두 고르세요">
+      <CheckboxGroup.Item value="apple">사과</CheckboxGroup.Item>
+      <CheckboxGroup.Item value="banana">바나나</CheckboxGroup.Item>
+      <CheckboxGroup.Item value="orange">오렌지</CheckboxGroup.Item>
+    </CheckboxGroup>
+  );
+}
+```

src/content/docs/divider.mdx

@@ -0,0 +1,17 @@
+Divider는 복잡하게 흩어져 있는 정보들을 보기 좋게 묶어주고(그룹화), 어떤 내용이 어디서부터 어디까지인지 한눈에 알 수 있도록(시각적 계층 구조) 도와주는 역할을 하는 컴포넌트입니다.
+
+## 기본 사용법
+
+```tsx
+import { Divider, Text, VStack } from "daleui";
+
+export function Example() {
+  return (
+    <VStack align="stretch" gap="16">
+      <Text as="p">결제 정보</Text>
+      <Divider />
+      <Text as="p">배송 정보</Text>
+    </VStack>
+  );
+}
+```

src/content/docs/flex.mdx

@@ -0,0 +1,16 @@
+Flex는 CSS Flexbox 레이아웃을 위한 컨테이너입니다. `direction`으로 방향을 고르고 `justify`·`align`으로 정렬하며, `gap`·`padding`에는 [스페이싱 토큰](/docs/spacing) 이름을 넘깁니다. 가로 한 줄·세로 한 열처럼 자주 쓰는 배치는 [HStack](/docs/hstack)·[VStack](/docs/vstack)이 더 짧고, 한 컨테이너에서 방향을 바꿔야 하거나 교차축 정렬이 가운데가 아닐 때 Flex를 씁니다.
+
+## 기본 사용법
+
+```tsx
+import { Flex, Text } from "daleui";
+
+export function Example() {
+  return (
+    <Flex direction="row" justify="between" align="center" gap="16">
+      <Text>왼쪽</Text>
+      <Text>오른쪽</Text>
+    </Flex>
+  );
+}
+```

src/content/docs/grid.mdx

@@ -0,0 +1,20 @@
+Grid는 CSS Grid 레이아웃을 위한 컨테이너입니다. 행과 열을 함께 정해야 하는 배치에 쓰고, `gridTemplateColumns`·`gridTemplateRows`·`areas`로 격자를 선언합니다. 한 칸이 여러 열이나 행을 차지해야 하면 `GridItem`으로 범위를 지정합니다. 한 방향으로만 늘어서는 배치라면 [Flex](/docs/flex)가 더 간단합니다.
+
+## 기본 사용법
+
+```tsx
+import { Grid, GridItem, Text } from "daleui";
+
+export function Example() {
+  return (
+    <Grid gridTemplateColumns="repeat(3, 1fr)" gap="16">
+      <GridItem gridColumn="span 2">
+        <Text>두 열을 차지하는 칸</Text>
+      </GridItem>
+      <GridItem>
+        <Text>한 열을 차지하는 칸</Text>
+      </GridItem>
+    </Grid>
+  );
+}
+```

src/content/docs/heading.mdx

@@ -0,0 +1,16 @@
+Heading은 페이지의 제목이나 섹션의 구조를 표현하기 위해 사용하는 컴포넌트입니다.<br/>
+두 가지 색상 톤을 제공하며, 뷰포트에 따라 크기가 유동적으로 변경되도록 설계되어 있습니다.
+
+## 기본 사용법
+
+```tsx
+import { Heading } from "daleui";
+
+export function Example() {
+  return (
+    <Heading level={1} size={2} wordBreak="cjk">
+      달레 UI로 만든 첫 화면
+    </Heading>
+  );
+}
+```

src/content/docs/hstack.mdx

@@ -0,0 +1,16 @@
+HStack은 자식을 가로 한 줄로 배치합니다. [Flex](/docs/flex)에서 자주 쓰는 `direction="row"` 패턴을 `justify="left"`·`align="center"` 기본값과 함께 묶어 둔 컴포넌트라, 아이콘과 텍스트를 나란히 놓는 자리에서는 `gap`만 주면 됩니다. 교차축 정렬이 가운데가 아니거나 한 컨테이너에서 방향을 바꿔야 하면 Flex를 씁니다.
+
+## 기본 사용법
+
+```tsx
+import { HStack, Icon, Text } from "daleui";
+
+export function Example() {
+  return (
+    <HStack gap="8">
+      <Icon name="check" tone="success" />
+      <Text>저장했습니다</Text>
+    </HStack>
+  );
+}
+```

src/content/docs/icon.mdx

@@ -0,0 +1,12 @@
+Icon은 사용자의 이해를 돕고 행동을 유도하기 위해 사용하는 시각적 언어입니다.<br/>
+시스템 전반에서 일관되게 사용되며, 페이지와 컴포넌트 내에서 정보를 함축적으로 전달하는 재사용 가능한 벡터 그래픽 심볼입니다.
+
+## 기본 사용법
+
+```tsx
+import { Icon } from "daleui";
+
+export function Example() {
+  return <Icon name="check" size="md" tone="success" />;
+}
+```

src/content/docs/label.mdx

@@ -0,0 +1,15 @@
+Label은 입력 요소(TextInput, Select, Checkbox 등)에 이름을 부여해 사용자가 해당 필드의 목적을 명확하게 이해하도록 돕는 텍스트 컴포넌트입니다.
+
+## 기본 사용법
+
+```tsx
+import { Label, TextInput } from "daleui";
+
+export function Example() {
+  return (
+    <Label labelText="이메일" required>
+      <TextInput placeholder="dale@example.com" />
+    </Label>
+  );
+}
+```

src/content/docs/link.mdx

@@ -0,0 +1,12 @@
+Link는 사용자를 다른 페이지, 동일 페이지 내의 특정 위치, 또는 외부 리소스로 이동시키는 네비게이션(Navigation) 요소입니다. <br/>
+사용자의 특정 행동을 유도할 때에는 [Button](/docs/button)을 사용합니다.
+
+## 기본 사용법
+
+```tsx
+import { Link } from "daleui";
+
+export function Example() {
+  return <Link href="/docs/install">설치 안내 보기</Link>;
+}
+```

src/content/docs/loader.test.tsx

@@ -30,7 +30,7 @@ describe("문서 본문 모음", () => {
   });
 
   it("본문이 없는 문서에는 undefined를 반환한다", () => {
-    expect(findDocsContent("button")).toBeUndefined();
+    expect(findDocsContent("존재하지않는문서")).toBeUndefined();
   });
 });
 

src/content/docs/passwordinput.mdx

@@ -0,0 +1,18 @@
+PasswordInput은 로그인이나 계정 인증 과정에서 사용자의 비밀번호를 안전하게 입력하도록 지원하는 보안 입력 필드입니다.
+
+## 기본 사용법
+
+```tsx
+import { PasswordInput } from "daleui";
+
+export function Example() {
+  return (
+    <PasswordInput
+      name="password"
+      label="비밀번호"
+      placeholder="8자 이상 입력하세요"
+      required
+    />
+  );
+}
+```

src/content/docs/radiogroup.mdx

@@ -0,0 +1,17 @@
+RadioGroup은 상호 배타적인(mutually exclusive) 선택지들로 구성된 집합입니다. 이 그룹 내에서는 하나의 항목만 선택할 수 있습니다. 사용자가 제한된 선택지 중 하나만 선택해야 할 때 사용합니다. 특히 선택지가 2-5개로 적고 모든 옵션을 한눈에 보여주어야 할 때 적합합니다. 선택지가 많은 경우(6개 이상)에는 대신 [Select](/docs/select) 컴포넌트 사용을 권장합니다.
+
+## 기본 사용법
+
+```tsx
+import { RadioGroup } from "daleui";
+
+export function Example() {
+  return (
+    <RadioGroup name="fruits" label="가장 좋아하는 과일을 고르세요">
+      <RadioGroup.Item value="apple">사과</RadioGroup.Item>
+      <RadioGroup.Item value="banana">바나나</RadioGroup.Item>
+      <RadioGroup.Item value="orange">오렌지</RadioGroup.Item>
+    </RadioGroup>
+  );
+}
+```

src/content/docs/select.mdx

@@ -0,0 +1,18 @@
+Select는 미리 정의된 여러 옵션 중 하나를 사용자가 선택하도록 하기 위한 컴포넌트입니다. <br/>
+일반적으로 좁은 UI 영역에서 많은 선택지를 제공해야하는 경우, 6개 이상의 선택지가 존재하는 경우, 혹은 사용자가 모든 옵션을 즉시 훑어봐야할 필요가 없는 경우에 사용합니다.
+
+## 기본 사용법
+
+```tsx
+import { Select } from "daleui";
+
+export function Example() {
+  return (
+    <Select name="country" label="국가" placeholder="국가를 선택하세요">
+      <option value="kr">대한민국</option>
+      <option value="jp">일본</option>
+      <option value="us">미국</option>
+    </Select>
+  );
+}
+```

src/content/docs/skeleton.mdx

@@ -0,0 +1,11 @@
+Skeleton은 콘텐츠를 불러오는 동안 들어올 자리를 미리 보여 주는 플레이스홀더입니다. 실제 콘텐츠와 비슷한 모양으로 채워 화면이 덜컥 바뀌는 느낌을 줄입니다. 플레이스홀더 자체는 장식으로 취급되어 `aria-hidden`으로 가려지므로, 로딩 중이라는 사실은 콘텐츠를 가진 영역에서 따로 알려야 합니다.
+
+## 기본 사용법
+
+```tsx
+import { Skeleton } from "daleui";
+
+export function Example() {
+  return <Skeleton.Text lines={3} />;
+}
+```

src/content/docs/tag.mdx

@@ -0,0 +1,11 @@
+Tag는 콘텐츠의 속성, 카테고리, 상태(성공, 경고 등)를 키워드 형태로 식별하고 분류하여 시각적으로 강조하는 컴포넌트입니다. 필요에 따라 링크 이동이나 삭제와 같은 상호작용 기능을 제공합니다.
+
+## 기본 사용법
+
+```tsx
+import { Tag } from "daleui";
+
+export function Example() {
+  return <Tag tone="success">배포 완료</Tag>;
+}
+```

src/content/docs/text.mdx

@@ -0,0 +1,15 @@
+Text는 본문 텍스트를 나타내는 컴포넌트입니다. `size`·`weight`는 [타이포그래피 토큰](/docs/typography), `tone`은 [시맨틱 색상 토큰](/docs/colors)을 받고, `as`로 `p`·`span`·`strong` 같은 태그를 골라 의미를 맞춥니다. 제목에는 [Heading](/docs/heading)을 씁니다.
+
+## 기본 사용법
+
+```tsx
+import { Text } from "daleui";
+
+export function Example() {
+  return (
+    <Text as="p" size="md">
+      컴포넌트와 토큰만으로 여기까지 만들 수 있습니다.
+    </Text>
+  );
+}
+```

src/content/docs/textinput.mdx

@@ -0,0 +1,19 @@
+TextInput은 사용자가 이름, 이메일, 검색어 등 텍스트 정보를 직접 입력할 수 있도록 제공되는 입력 컴포넌트입니다.
+
+## 기본 사용법
+
+```tsx
+import { TextInput } from "daleui";
+
+export function Example() {
+  return (
+    <TextInput
+      name="email"
+      label="이메일"
+      placeholder="dale@example.com"
+      helperText="새 소식을 한 달에 한 번 보내드립니다."
+      required
+    />
+  );
+}
+```

src/content/docs/vstack.mdx

@@ -0,0 +1,18 @@
+VStack은 자식을 세로 한 열로 배치합니다. [Flex](/docs/flex)에서 자주 쓰는 `direction="column"` 패턴을 `justify="top"`·`align="center"` 기본값과 함께 묶어 둔 컴포넌트입니다. 폼이나 카드처럼 자식이 가로 폭을 모두 채워야 하는 묶음에는 `align="stretch"`를 주고, 교차축 정렬이 더 복잡하면 Flex를 씁니다.
+
+## 기본 사용법
+
+```tsx
+import { Heading, Text, VStack } from "daleui";
+
+export function Example() {
+  return (
+    <VStack align="stretch" gap="8">
+      <Heading level={2}>주간 리포트</Heading>
+      <Text as="p" muted>
+        지난 7일간의 변화를 모았습니다.
+      </Text>
+    </VStack>
+  );
+}
+```