refactor: 디자인 시스템 일관성 개선, baseframe 리팩토링, Storybook 문서화

docs/storybook/package.json

@@ -19,12 +19,12 @@
     "react-dom": "catalog:core"
   },
   "devDependencies": {
-    "@storybook/react-vite": "^10.1.4",
+    "@storybook/react-vite": "^10.2.8",
     "@types/react": "catalog:types",
     "@types/react-dom": "catalog:types",
     "@vitejs/plugin-react": "^5.1.2",
     "globals": "^16.5.0",
-    "storybook": "^10.1.4",
+    "storybook": "^10.2.8",
     "typescript": "catalog:core",
     "vite": "^7.2.7"
   }

docs/website/src/components/example/button-disabled.tsx

@@ -4,7 +4,9 @@ export default function ButtonDisabled() {
   return (
     <div style={{ display: 'flex', gap: 8 }}>
       <Button disabled>Disabled</Button>
-      <Button variant="secondary" disabled>Disabled</Button>
+      <Button variant="secondary" disabled>
+        Disabled
+      </Button>
     </div>
   );
 }

docs/website/src/components/example/button-loading.tsx

@@ -4,7 +4,9 @@ export default function ButtonLoading() {
   return (
     <div style={{ display: 'flex', gap: 8 }}>
       <Button loading>Loading</Button>
-      <Button variant="secondary" loading>Loading</Button>
+      <Button variant="secondary" loading>
+        Loading
+      </Button>
     </div>
   );
 }

docs/website/src/components/example/button-prefix-suffix.tsx

@@ -1,12 +1,14 @@
 import { Button } from '@cocso-ui/react';
-import { PlusIcon, ArrowIOSForwardIcon } from '@cocso-ui/react-icons';
+import { ArrowIOSForwardIcon, PlusIcon } from '@cocso-ui/react-icons';
 
 export default function ButtonPrefixSuffix() {
   return (
     <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
       <Button prefix={<PlusIcon />}>Prefix</Button>
       <Button suffix={<ArrowIOSForwardIcon />}>Suffix</Button>
-      <Button prefix={<PlusIcon />} suffix={<ArrowIOSForwardIcon />}>Both</Button>
+      <Button prefix={<PlusIcon />} suffix={<ArrowIOSForwardIcon />}>
+        Both
+      </Button>
     </div>
   );
 }

docs/website/src/components/example/button-shape.tsx

@@ -6,7 +6,9 @@ export default function ButtonShape() {
     <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
       <Button shape="square">Square</Button>
       <Button shape="rounded">Rounded</Button>
-      <Button shape="circle" svgOnly aria-label="추가"><PlusIcon /></Button>
+      <Button shape="circle" svgOnly aria-label="추가">
+        <PlusIcon />
+      </Button>
     </div>
   );
 }

docs/website/src/components/example/button-size.tsx

@@ -7,7 +7,6 @@ export default function ButtonSize() {
       <Button size="sm">Small</Button>
       <Button size="md">Medium</Button>
       <Button size="lg">Large</Button>
-      <Button size="xl">XLarge</Button>
     </div>
   );
 }

docs/website/src/components/example/button-variant.tsx

@@ -7,7 +7,7 @@ export default function ButtonVariant() {
       <Button variant="secondary">Secondary</Button>
       <Button variant="tertiary">Tertiary</Button>
       <Button variant="success">Success</Button>
-      <Button variant="error">Error</Button>
+      <Button variant="danger">Danger</Button>
       <Button variant="warning">Warning</Button>
       <Button variant="neutral">Neutral</Button>
     </div>

docs/website/src/components/example/checkbox-default.tsx

@@ -6,10 +6,5 @@ import { useState } from 'react';
 export default function CheckboxDefault() {
   const [status, setStatus] = useState<'on' | 'off' | 'intermediate'>('off');
 
-  return (
-    <Checkbox
-      status={status}
-      onChange={(newStatus) => setStatus(newStatus)}
-    />
-  );
+  return <Checkbox status={status} onChange={newStatus => setStatus(newStatus)} />;
 }

docs/website/src/components/example/day-picker-default.tsx

@@ -6,10 +6,5 @@ import { useState } from 'react';
 export default function DayPickerDefault() {
   const [value, setValue] = useState<Date | undefined>(new Date());
 
-  return (
-    <DayPicker
-      value={value}
-      onValueChange={(date) => setValue(date ?? undefined)}
-    />
-  );
+  return <DayPicker value={value} onValueChange={date => setValue(date ?? undefined)} />;
 }

docs/website/src/components/example/day-picker-range.tsx

@@ -11,7 +11,7 @@ export default function DayPickerRange() {
   return (
     <DayPicker
       value={value}
-      onValueChange={(date) => setValue(date ?? undefined)}
+      onValueChange={date => setValue(date ?? undefined)}
       minDate={today}
       maxDate={maxDate}
     />

docs/website/src/components/example/link-indicator.tsx

@@ -4,7 +4,9 @@ export default function LinkIndicator() {
   return (
     <div style={{ display: 'flex', gap: 16 }}>
       <Link href="#">밑줄 있음</Link>
-      <Link href="#" indicator={false}>밑줄 없음</Link>
+      <Link href="#" indicator={false}>
+        밑줄 없음
+      </Link>
     </div>
   );
 }

docs/website/src/components/example/link-size.tsx

@@ -3,10 +3,18 @@ import { Link } from '@cocso-ui/react';
 export default function LinkSize() {
   return (
     <div style={{ display: 'flex', gap: 16, alignItems: 'center' }}>
-      <Link href="#" size="xs">XSmall</Link>
-      <Link href="#" size="sm">Small</Link>
-      <Link href="#" size="md">Medium</Link>
-      <Link href="#" size="lg">Large</Link>
+      <Link href="#" size="xs">
+        XSmall
+      </Link>
+      <Link href="#" size="sm">
+        Small
+      </Link>
+      <Link href="#" size="md">
+        Medium
+      </Link>
+      <Link href="#" size="lg">
+        Large
+      </Link>
     </div>
   );
 }

docs/website/src/components/example/month-picker-default.tsx

@@ -6,10 +6,5 @@ import { useState } from 'react';
 export default function MonthPickerDefault() {
   const [value, setValue] = useState<Date | undefined>(new Date());
 
-  return (
-    <MonthPicker
-      value={value}
-      onValueChange={(date) => setValue(date ?? undefined)}
-    />
-  );
+  return <MonthPicker value={value} onValueChange={date => setValue(date ?? undefined)} />;
 }

docs/website/src/components/example/month-picker-range.tsx

@@ -11,7 +11,7 @@ export default function MonthPickerRange() {
   return (
     <MonthPicker
       value={value}
-      onValueChange={(date) => setValue(date ?? undefined)}
+      onValueChange={date => setValue(date ?? undefined)}
       minDate={minDate}
       maxDate={maxDate}
     />

docs/website/src/components/example/otp-default.tsx

@@ -6,6 +6,7 @@ export default function OtpDefault() {
   return (
     <OneTimePasswordField>
       {Array.from({ length: 6 }, (_, index) => (
+        // biome-ignore lint/suspicious/noArrayIndexKey: fixed-length OTP field
         <OneTimePasswordField.Input key={index} index={index} />
       ))}
     </OneTimePasswordField>

docs/website/src/components/example/pagination-default.tsx

@@ -6,11 +6,5 @@ import { useState } from 'react';
 export default function PaginationDefault() {
   const [page, setPage] = useState(1);
 
-  return (
-    <Pagination
-      page={page}
-      totalPages={10}
-      onChange={setPage}
-    />
-  );
+  return <Pagination page={page} totalPages={10} onChange={setPage} />;
 }

docs/website/src/components/example/pagination-max-visible.tsx

@@ -6,12 +6,5 @@ import { useState } from 'react';
 export default function PaginationMaxVisible() {
   const [page, setPage] = useState(1);
 
-  return (
-    <Pagination
-      page={page}
-      totalPages={20}
-      maxVisible={3}
-      onChange={setPage}
-    />
-  );
+  return <Pagination page={page} totalPages={20} maxVisible={3} onChange={setPage} />;
 }

docs/website/src/components/example/select-size.tsx

@@ -3,12 +3,18 @@ import { Select } from '@cocso-ui/react';
 export default function SelectSize() {
   return (
     <div style={{ display: 'flex', gap: 8, alignItems: 'center', flexWrap: 'wrap' }}>
-      <Select size="2xs"><option>2XSmall</option></Select>
-      <Select size="xs"><option>XSmall</option></Select>
-      <Select size="sm"><option>Small</option></Select>
-      <Select size="md"><option>Medium</option></Select>
-      <Select size="lg"><option>Large</option></Select>
-      <Select size="xl"><option>XLarge</option></Select>
+      <Select size="xs">
+        <option>XSmall</option>
+      </Select>
+      <Select size="sm">
+        <option>Small</option>
+      </Select>
+      <Select size="md">
+        <option>Medium</option>
+      </Select>
+      <Select size="lg">
+        <option>Large</option>
+      </Select>
     </div>
   );
 }

docs/website/src/components/example/toast-variant.tsx

@@ -6,11 +6,21 @@ export default function ToastVariant() {
   return (
     <>
       <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
-        <Button variant="secondary" onClick={() => toast('기본 알림입니다.')}>Default</Button>
-        <Button variant="secondary" onClick={() => toast.success('성공적으로 저장되었습니다.')}>Success</Button>
-        <Button variant="secondary" onClick={() => toast.error('오류가 발생했습니다.')}>Error</Button>
-        <Button variant="secondary" onClick={() => toast.warning('주의가 필요합니다.')}>Warning</Button>
-        <Button variant="secondary" onClick={() => toast.info('참고 정보입니다.')}>Info</Button>
+        <Button variant="secondary" onClick={() => toast('기본 알림입니다.')}>
+          Default
+        </Button>
+        <Button variant="secondary" onClick={() => toast.success('성공적으로 저장되었습니다.')}>
+          Success
+        </Button>
+        <Button variant="secondary" onClick={() => toast.error('오류가 발생했습니다.')}>
+          Error
+        </Button>
+        <Button variant="secondary" onClick={() => toast.warning('주의가 필요합니다.')}>
+          Warning
+        </Button>
+        <Button variant="secondary" onClick={() => toast.info('참고 정보입니다.')}>
+          Info
+        </Button>
       </div>
       <Toaster position="bottom-right" richColors />
     </>

docs/website/src/components/example/typography-type.tsx

@@ -3,8 +3,12 @@ import { Typography } from '@cocso-ui/react';
 export default function TypographyType() {
   return (
     <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
-      <Typography type="heading" size="md" weight="bold">Heading 텍스트</Typography>
-      <Typography type="body" size="md">Body 텍스트입니다. 일반적인 본문 내용에 사용합니다.</Typography>
+      <Typography type="heading" size="md" weight="bold">
+        Heading 텍스트
+      </Typography>
+      <Typography type="body" size="md">
+        Body 텍스트입니다. 일반적인 본문 내용에 사용합니다.
+      </Typography>
     </div>
   );
 }

docs/website/src/components/example/typography-weight.tsx

@@ -3,11 +3,21 @@ import { Typography } from '@cocso-ui/react';
 export default function TypographyWeight() {
   return (
     <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
-      <Typography size={16} weight="light">Light (300)</Typography>
-      <Typography size={16} weight="normal">Normal (400)</Typography>
-      <Typography size={16} weight="medium">Medium (500)</Typography>
-      <Typography size={16} weight="semibold">Semibold (600)</Typography>
-      <Typography size={16} weight="bold">Bold (700)</Typography>
+      <Typography size={16} weight="light">
+        Light (300)
+      </Typography>
+      <Typography size={16} weight="normal">
+        Normal (400)
+      </Typography>
+      <Typography size={16} weight="medium">
+        Medium (500)
+      </Typography>
+      <Typography size={16} weight="semibold">
+        Semibold (600)
+      </Typography>
+      <Typography size={16} weight="bold">
+        Bold (700)
+      </Typography>
     </div>
   );
 }