@lotte-innovate/ui-component-test 0.0.6 → 0.0.8

package/dist/stories/checkbox/CheckboxCard.stories.jsx

@@ -69,57 +69,57 @@ var meta = {
 export default meta;
 export var Default = function (_a) {
     var args = __rest(_a, []);
-    return (<div className="flex flex-col space-y-3">
-    <CheckboxCard id="defaultCheckboxCard" {...args} defaultChecked>
-      default
-    </CheckboxCard>
-    <CheckboxCard id="disabledCheckboxCard" {...args} disabled defaultChecked>
-      disabled
-    </CheckboxCard>
+    return (<div className="flex flex-col space-y-3">
+    <CheckboxCard id="defaultCheckboxCard" {...args} defaultChecked>
+      default
+    </CheckboxCard>
+    <CheckboxCard id="disabledCheckboxCard" {...args} disabled defaultChecked>
+      disabled
+    </CheckboxCard>
   </div>);
 };
 export var Scaling = function (_a) {
     var args = __rest(_a, []);
-    return (<div className="flex flex-col space-y-3">
-    {scalingOptions.map(function (scaling) { return (<div key={scaling}>
-        <CheckboxCard id={scaling} {...args} scaling={scaling}>
-          {scaling}
-        </CheckboxCard>
-      </div>); })}
+    return (<div className="flex flex-col space-y-3">
+    {scalingOptions.map(function (scaling) { return (<div key={scaling}>
+        <CheckboxCard id={scaling} {...args} scaling={scaling}>
+          {scaling}
+        </CheckboxCard>
+      </div>); })}
   </div>);
 };
 export var Size = function (_a) {
     var args = __rest(_a, []);
-    return (<div className="flex flex-col space-y-3">
-    <CheckboxCard id="size-s" {...args} size="small" defaultChecked>
-      small
-    </CheckboxCard>
-    <CheckboxCard id="size-m" {...args} size="medium" defaultChecked>
-      medium
-    </CheckboxCard>
-    <CheckboxCard id="size-l" {...args} size="large" defaultChecked>
-      large
-    </CheckboxCard>
+    return (<div className="flex flex-col space-y-3">
+    <CheckboxCard id="size-s" {...args} size="small" defaultChecked>
+      small
+    </CheckboxCard>
+    <CheckboxCard id="size-m" {...args} size="medium" defaultChecked>
+      medium
+    </CheckboxCard>
+    <CheckboxCard id="size-l" {...args} size="large" defaultChecked>
+      large
+    </CheckboxCard>
   </div>);
 };
 export var Radius = function (_a) {
     var args = __rest(_a, []);
-    return (<div className="flex flex-col space-y-3">
-    {radiusOptions.map(function (radius) { return (<div key={radius}>
-        <CheckboxCard id={radius} {...args} radius={radius}>
-          {radius}
-        </CheckboxCard>
-      </div>); })}
+    return (<div className="flex flex-col space-y-3">
+    {radiusOptions.map(function (radius) { return (<div key={radius}>
+        <CheckboxCard id={radius} {...args} radius={radius}>
+          {radius}
+        </CheckboxCard>
+      </div>); })}
   </div>);
 };
 export var Appearance = function (_a) {
     var args = __rest(_a, []);
-    return (<div className="flex space-x-4">
-    <CheckboxCard id={'classic'} {...args} appearance={'classic'}>
-      classic
-    </CheckboxCard>
-    <CheckboxCard id={'surface'} {...args} appearance={'surface'}>
-      surface
-    </CheckboxCard>
+    return (<div className="flex space-x-4">
+    <CheckboxCard id={'classic'} {...args} appearance={'classic'}>
+      classic
+    </CheckboxCard>
+    <CheckboxCard id={'surface'} {...args} appearance={'surface'}>
+      surface
+    </CheckboxCard>
   </div>);
 };

package/dist/stories/checkbox/CheckboxGroup.stories.jsx

@@ -59,86 +59,86 @@ var meta = {
 export default meta;
 export var Default = function (_a) {
     var args = __rest(_a, []);
-    return (<CheckboxGroup defaultValue={['apple']}>
-    <CheckboxGroupItem id={'apple'} {...args}>
-      사과🍎
-    </CheckboxGroupItem>
-    <CheckboxGroupItem id={'orange'} {...args}>
-      오렌지🍊
-    </CheckboxGroupItem>
-    <CheckboxGroupItem id={'banana'} {...args}>
-      바나나🍌
-    </CheckboxGroupItem>
+    return (<CheckboxGroup defaultValue={['apple']}>
+    <CheckboxGroupItem id={'apple'} {...args}>
+      사과🍎
+    </CheckboxGroupItem>
+    <CheckboxGroupItem id={'orange'} {...args}>
+      오렌지🍊
+    </CheckboxGroupItem>
+    <CheckboxGroupItem id={'banana'} {...args}>
+      바나나🍌
+    </CheckboxGroupItem>
   </CheckboxGroup>);
 };
 export var Size = function (_a) {
     var args = __rest(_a, []);
-    return (<div className="flex flex-col space-y-6">
-    <CheckboxGroup size={'small'} defaultValue={['size-s1']}>
-      <CheckboxGroupItem id="size-s1" {...args}>
-        Agree to Terms and Conditions
-      </CheckboxGroupItem>
-      <CheckboxGroupItem id="size-s2" {...args}>
-        Agree to Privacy Policy
-      </CheckboxGroupItem>
-    </CheckboxGroup>
-
-    <CheckboxGroup size={'medium'} defaultValue={['size-m1']}>
-      <CheckboxGroupItem id="size-m1" {...args}>
-        Agree to Terms and Conditions
-      </CheckboxGroupItem>
-      <CheckboxGroupItem id="size-m2" {...args}>
-        Agree to Privacy Policy
-      </CheckboxGroupItem>
-    </CheckboxGroup>
-
-    <CheckboxGroup size={'large'} defaultValue={['size-l1']}>
-      <CheckboxGroupItem id="size-l1" {...args}>
-        Agree to Terms and Conditions
-      </CheckboxGroupItem>
-      <CheckboxGroupItem id="size-l2" {...args}>
-        Agree to Privacy Policy
-      </CheckboxGroupItem>
-    </CheckboxGroup>
+    return (<div className="flex flex-col space-y-6">
+    <CheckboxGroup size={'small'} defaultValue={['size-s1']}>
+      <CheckboxGroupItem id="size-s1" {...args}>
+        Agree to Terms and Conditions
+      </CheckboxGroupItem>
+      <CheckboxGroupItem id="size-s2" {...args}>
+        Agree to Privacy Policy
+      </CheckboxGroupItem>
+    </CheckboxGroup>
+
+    <CheckboxGroup size={'medium'} defaultValue={['size-m1']}>
+      <CheckboxGroupItem id="size-m1" {...args}>
+        Agree to Terms and Conditions
+      </CheckboxGroupItem>
+      <CheckboxGroupItem id="size-m2" {...args}>
+        Agree to Privacy Policy
+      </CheckboxGroupItem>
+    </CheckboxGroup>
+
+    <CheckboxGroup size={'large'} defaultValue={['size-l1']}>
+      <CheckboxGroupItem id="size-l1" {...args}>
+        Agree to Terms and Conditions
+      </CheckboxGroupItem>
+      <CheckboxGroupItem id="size-l2" {...args}>
+        Agree to Privacy Policy
+      </CheckboxGroupItem>
+    </CheckboxGroup>
   </div>);
 };
 export var Radius = function (_a) {
     var args = __rest(_a, []);
-    return (<div className="flex flex-col space-y-6">
-    <CheckboxGroup defaultValue={['radius-none-1']} radius={'none'}>
-      <CheckboxGroupItem id="radius-none-1" {...args}>
-        체크박스1
-      </CheckboxGroupItem>
-      <CheckboxGroupItem id="radius-none-2" {...args}>
-        체크박스2
-      </CheckboxGroupItem>
-    </CheckboxGroup>
-
-    <CheckboxGroup defaultValue={['radius-small-1']} radius={'small'}>
-      <CheckboxGroupItem id="radius-small-1" {...args}>
-        체크박스1
-      </CheckboxGroupItem>
-      <CheckboxGroupItem id="radius-small-2" {...args}>
-        체크박스2
-      </CheckboxGroupItem>
-    </CheckboxGroup>
-
-    <CheckboxGroup defaultValue={['radius-medium-1']} radius={'medium'}>
-      <CheckboxGroupItem id="radius-medium-1" {...args}>
-        체크박스1
-      </CheckboxGroupItem>
-      <CheckboxGroupItem id="radius-medium-2" {...args}>
-        체크박스2
-      </CheckboxGroupItem>
-    </CheckboxGroup>
-
-    <CheckboxGroup defaultValue={['radius-large-1']} radius={'large'}>
-      <CheckboxGroupItem id="radius-large-1" {...args}>
-        체크박스1
-      </CheckboxGroupItem>
-      <CheckboxGroupItem id="radius-large-2" {...args}>
-        체크박스2
-      </CheckboxGroupItem>
-    </CheckboxGroup>
+    return (<div className="flex flex-col space-y-6">
+    <CheckboxGroup defaultValue={['radius-none-1']} radius={'none'}>
+      <CheckboxGroupItem id="radius-none-1" {...args}>
+        체크박스1
+      </CheckboxGroupItem>
+      <CheckboxGroupItem id="radius-none-2" {...args}>
+        체크박스2
+      </CheckboxGroupItem>
+    </CheckboxGroup>
+
+    <CheckboxGroup defaultValue={['radius-small-1']} radius={'small'}>
+      <CheckboxGroupItem id="radius-small-1" {...args}>
+        체크박스1
+      </CheckboxGroupItem>
+      <CheckboxGroupItem id="radius-small-2" {...args}>
+        체크박스2
+      </CheckboxGroupItem>
+    </CheckboxGroup>
+
+    <CheckboxGroup defaultValue={['radius-medium-1']} radius={'medium'}>
+      <CheckboxGroupItem id="radius-medium-1" {...args}>
+        체크박스1
+      </CheckboxGroupItem>
+      <CheckboxGroupItem id="radius-medium-2" {...args}>
+        체크박스2
+      </CheckboxGroupItem>
+    </CheckboxGroup>
+
+    <CheckboxGroup defaultValue={['radius-large-1']} radius={'large'}>
+      <CheckboxGroupItem id="radius-large-1" {...args}>
+        체크박스1
+      </CheckboxGroupItem>
+      <CheckboxGroupItem id="radius-large-2" {...args}>
+        체크박스2
+      </CheckboxGroupItem>
+    </CheckboxGroup>
   </div>);
 };

package/dist/stories/context-menu/ContextMenu.stories.jsx

@@ -69,87 +69,87 @@ var meta = {
 export default meta;
 export var Default = function (_a) {
     var args = __rest(_a, []);
-    return (<ContextMenu {...args}>
-    <ContextMenuTrigger>
-      <Text>Right-click here.</Text>
-    </ContextMenuTrigger>
-    <ContextMenuContent>
-      <ContextMenuLabel>라벨</ContextMenuLabel>
-      <ContextMenuItem shortcut="⌘ T">기본 아이템</ContextMenuItem>
-      <ContextMenuItem disabled>사용불가 아이템</ContextMenuItem>
-      <ContextMenuSeparator />
-      <ContextMenuGroup>
-        <ContextMenuItem>그룹 아이템1</ContextMenuItem>
-        <ContextMenuItem>그룹 아이템2</ContextMenuItem>
-      </ContextMenuGroup>
-      <ContextMenuSeparator />
-      <ContextMenuCheckboxItem checked>checked 아이템</ContextMenuCheckboxItem>
-      <ContextMenuCheckboxItem checked={false}>unchecked 아이템</ContextMenuCheckboxItem>
-      <ContextMenuSeparator />
-      <ContextMenuRadioGroup value={'apple'}>
-        <ContextMenuRadioItem value={'apple'}>라디오 아이템1</ContextMenuRadioItem>
-        <ContextMenuRadioItem value={'banana'}>라디오 아이템2</ContextMenuRadioItem>
-      </ContextMenuRadioGroup>
-      <ContextMenuSeparator />
-      <ContextMenuSubTrigger>
-        More Menu{' '}
-        <ContextMenuSubContent>
-          <ContextMenuItem>서브 아이템1</ContextMenuItem>
-          <ContextMenuItem>서브 아이템2</ContextMenuItem>
-        </ContextMenuSubContent>
-      </ContextMenuSubTrigger>
-    </ContextMenuContent>
+    return (<ContextMenu {...args}>
+    <ContextMenuTrigger>
+      <Text>Right-click here.</Text>
+    </ContextMenuTrigger>
+    <ContextMenuContent>
+      <ContextMenuLabel>라벨</ContextMenuLabel>
+      <ContextMenuItem shortcut="⌘ T">기본 아이템</ContextMenuItem>
+      <ContextMenuItem disabled>사용불가 아이템</ContextMenuItem>
+      <ContextMenuSeparator />
+      <ContextMenuGroup>
+        <ContextMenuItem>그룹 아이템1</ContextMenuItem>
+        <ContextMenuItem>그룹 아이템2</ContextMenuItem>
+      </ContextMenuGroup>
+      <ContextMenuSeparator />
+      <ContextMenuCheckboxItem checked>checked 아이템</ContextMenuCheckboxItem>
+      <ContextMenuCheckboxItem checked={false}>unchecked 아이템</ContextMenuCheckboxItem>
+      <ContextMenuSeparator />
+      <ContextMenuRadioGroup value={'apple'}>
+        <ContextMenuRadioItem value={'apple'}>라디오 아이템1</ContextMenuRadioItem>
+        <ContextMenuRadioItem value={'banana'}>라디오 아이템2</ContextMenuRadioItem>
+      </ContextMenuRadioGroup>
+      <ContextMenuSeparator />
+      <ContextMenuSubTrigger>
+        More Menu{' '}
+        <ContextMenuSubContent>
+          <ContextMenuItem>서브 아이템1</ContextMenuItem>
+          <ContextMenuItem>서브 아이템2</ContextMenuItem>
+        </ContextMenuSubContent>
+      </ContextMenuSubTrigger>
+    </ContextMenuContent>
   </ContextMenu>);
 };
 export var Radius = function (_a) {
     var args = __rest(_a, []);
-    return (<div className="flex space-x-2">
-    {radiusOptions.map(function (radius) { return (<ContextMenu key={radius} radius={radius} {...args}>
-        <ContextMenuTrigger className="w-[100px]">{radius}</ContextMenuTrigger>
-        <ContextMenuContent>
-          <ContextMenuItem>메뉴1</ContextMenuItem>
-          <ContextMenuItem>메뉴2</ContextMenuItem>
-        </ContextMenuContent>
-      </ContextMenu>); })}
+    return (<div className="flex space-x-2">
+    {radiusOptions.map(function (radius) { return (<ContextMenu key={radius} radius={radius} {...args}>
+        <ContextMenuTrigger className="w-[100px]">{radius}</ContextMenuTrigger>
+        <ContextMenuContent>
+          <ContextMenuItem>메뉴1</ContextMenuItem>
+          <ContextMenuItem>메뉴2</ContextMenuItem>
+        </ContextMenuContent>
+      </ContextMenu>); })}
   </div>);
 };
 export var Size = function (_a) {
     var args = __rest(_a, []);
-    return (<div className="flex space-x-2">
-    <ContextMenu size={'small'} {...args}>
-      <ContextMenuTrigger className="w-[100px]">small</ContextMenuTrigger>
-      <ContextMenuContent>
-        <ContextMenuItem>메뉴1</ContextMenuItem>
-        <ContextMenuItem>메뉴2</ContextMenuItem>
-      </ContextMenuContent>
-    </ContextMenu>
-
-    <ContextMenu size={'medium'} {...args}>
-      <ContextMenuTrigger className="w-[100px]">medium</ContextMenuTrigger>
-      <ContextMenuContent>
-        <ContextMenuItem>메뉴1</ContextMenuItem>
-        <ContextMenuItem>메뉴2</ContextMenuItem>
-      </ContextMenuContent>
-    </ContextMenu>
+    return (<div className="flex space-x-2">
+    <ContextMenu size={'small'} {...args}>
+      <ContextMenuTrigger className="w-[100px]">small</ContextMenuTrigger>
+      <ContextMenuContent>
+        <ContextMenuItem>메뉴1</ContextMenuItem>
+        <ContextMenuItem>메뉴2</ContextMenuItem>
+      </ContextMenuContent>
+    </ContextMenu>
+
+    <ContextMenu size={'medium'} {...args}>
+      <ContextMenuTrigger className="w-[100px]">medium</ContextMenuTrigger>
+      <ContextMenuContent>
+        <ContextMenuItem>메뉴1</ContextMenuItem>
+        <ContextMenuItem>메뉴2</ContextMenuItem>
+      </ContextMenuContent>
+    </ContextMenu>
   </div>);
 };
 export var Appearance = function (_a) {
     var args = __rest(_a, []);
-    return (<div className="flex space-x-2">
-    <ContextMenu appearance={'solid'} {...args}>
-      <ContextMenuTrigger className="w-[100px]">solid</ContextMenuTrigger>
-      <ContextMenuContent>
-        <ContextMenuItem>메뉴1</ContextMenuItem>
-        <ContextMenuItem>메뉴2</ContextMenuItem>
-      </ContextMenuContent>
-    </ContextMenu>
-
-    <ContextMenu appearance={'soft'} {...args}>
-      <ContextMenuTrigger className="w-[100px]">soft</ContextMenuTrigger>
-      <ContextMenuContent>
-        <ContextMenuItem>메뉴1</ContextMenuItem>
-        <ContextMenuItem>메뉴2</ContextMenuItem>
-      </ContextMenuContent>
-    </ContextMenu>
+    return (<div className="flex space-x-2">
+    <ContextMenu appearance={'solid'} {...args}>
+      <ContextMenuTrigger className="w-[100px]">solid</ContextMenuTrigger>
+      <ContextMenuContent>
+        <ContextMenuItem>메뉴1</ContextMenuItem>
+        <ContextMenuItem>메뉴2</ContextMenuItem>
+      </ContextMenuContent>
+    </ContextMenu>
+
+    <ContextMenu appearance={'soft'} {...args}>
+      <ContextMenuTrigger className="w-[100px]">soft</ContextMenuTrigger>
+      <ContextMenuContent>
+        <ContextMenuItem>메뉴1</ContextMenuItem>
+        <ContextMenuItem>메뉴2</ContextMenuItem>
+      </ContextMenuContent>
+    </ContextMenu>
   </div>);
 };

package/dist/stories/data-list/DataList.stories.jsx

@@ -67,119 +67,119 @@ var meta = {
 export default meta;
 export var Default = function (_a) {
     var args = __rest(_a, []);
-    return (<DataList {...args}>
-    <DataListItem {...args}>
-      <DataListLabel {...args}>상태</DataListLabel>
-      <DataListValue {...args}>
-        <Badge appearance="soft" {...args}>
-          배지
-        </Badge>
-      </DataListValue>
-    </DataListItem>
-    <DataListItem {...args}>
-      <DataListLabel {...args}>라벨</DataListLabel>
-      <DataListValue {...args}>
-        텍스트가 길어질 경우 줄바꿈으로 처리됩니다.텍스트가 길어질 경우 줄바꿈으로 처리됩니다.
-      </DataListValue>
-    </DataListItem>
-    <DataListItem {...args}>
-      <DataListLabel {...args}>라벨</DataListLabel>
-      <DataListValue {...args}>
-        <Button {...args}>버튼</Button>
-      </DataListValue>
-    </DataListItem>
+    return (<DataList {...args}>
+    <DataListItem {...args}>
+      <DataListLabel {...args}>상태</DataListLabel>
+      <DataListValue {...args}>
+        <Badge appearance="soft" {...args}>
+          배지
+        </Badge>
+      </DataListValue>
+    </DataListItem>
+    <DataListItem {...args}>
+      <DataListLabel {...args}>라벨</DataListLabel>
+      <DataListValue {...args}>
+        텍스트가 길어질 경우 줄바꿈으로 처리됩니다.텍스트가 길어질 경우 줄바꿈으로 처리됩니다.
+      </DataListValue>
+    </DataListItem>
+    <DataListItem {...args}>
+      <DataListLabel {...args}>라벨</DataListLabel>
+      <DataListValue {...args}>
+        <Button {...args}>버튼</Button>
+      </DataListValue>
+    </DataListItem>
   </DataList>);
 };
 export var Orientation = function (_a) {
     var args = __rest(_a, []);
-    return (<DataList {...args} orientation={'vertical'}>
-    <DataListItem {...args}>
-      <DataListLabel {...args}>상태</DataListLabel>
-      <DataListValue {...args}>
-        <Badge appearance="soft" {...args}>
-          배지
-        </Badge>
-      </DataListValue>
-    </DataListItem>
-    <DataListItem {...args}>
-      <DataListLabel {...args}>라벨</DataListLabel>
-      <DataListValue {...args}>
-        텍스트가 길어질 경우 줄바꿈으로 처리됩니다.텍스트가 길어질 경우 줄바꿈으로 처리됩니다.
-      </DataListValue>
-    </DataListItem>
-    <DataListItem {...args}>
-      <DataListLabel {...args}>라벨</DataListLabel>
-      <DataListValue {...args}>
-        <Button {...args}>버튼</Button>
-      </DataListValue>
-    </DataListItem>
+    return (<DataList {...args} orientation={'vertical'}>
+    <DataListItem {...args}>
+      <DataListLabel {...args}>상태</DataListLabel>
+      <DataListValue {...args}>
+        <Badge appearance="soft" {...args}>
+          배지
+        </Badge>
+      </DataListValue>
+    </DataListItem>
+    <DataListItem {...args}>
+      <DataListLabel {...args}>라벨</DataListLabel>
+      <DataListValue {...args}>
+        텍스트가 길어질 경우 줄바꿈으로 처리됩니다.텍스트가 길어질 경우 줄바꿈으로 처리됩니다.
+      </DataListValue>
+    </DataListItem>
+    <DataListItem {...args}>
+      <DataListLabel {...args}>라벨</DataListLabel>
+      <DataListValue {...args}>
+        <Button {...args}>버튼</Button>
+      </DataListValue>
+    </DataListItem>
   </DataList>);
 };
 export var Scaling = function (_a) {
     var args = __rest(_a, []);
-    return (<div className="flex flex-col space-y-7">
-    {scalingOptions.map(function (scaling) { return (<DataList {...args} key={scaling} scaling={scaling}>
-        <DataListItem {...args}>
-          <DataListLabel {...args}>{scaling}</DataListLabel>
-          <DataListValue {...args}>
-            텍스트가 길어질 경우 줄바꿈으로 처리됩니다.텍스트가 길어질 경우 줄바꿈으로 처리됩니다.
-          </DataListValue>
-        </DataListItem>
-        <DataListItem {...args}>
-          <DataListLabel {...args}>{scaling}</DataListLabel>
-          <DataListValue {...args}>
-            텍스트가 길어질 경우 줄바꿈으로 처리됩니다.텍스트가 길어질 경우 줄바꿈으로 처리됩니다.
-          </DataListValue>
-        </DataListItem>
-      </DataList>); })}
+    return (<div className="flex flex-col space-y-7">
+    {scalingOptions.map(function (scaling) { return (<DataList {...args} key={scaling} scaling={scaling}>
+        <DataListItem {...args}>
+          <DataListLabel {...args}>{scaling}</DataListLabel>
+          <DataListValue {...args}>
+            텍스트가 길어질 경우 줄바꿈으로 처리됩니다.텍스트가 길어질 경우 줄바꿈으로 처리됩니다.
+          </DataListValue>
+        </DataListItem>
+        <DataListItem {...args}>
+          <DataListLabel {...args}>{scaling}</DataListLabel>
+          <DataListValue {...args}>
+            텍스트가 길어질 경우 줄바꿈으로 처리됩니다.텍스트가 길어질 경우 줄바꿈으로 처리됩니다.
+          </DataListValue>
+        </DataListItem>
+      </DataList>); })}
   </div>);
 };
 export var Size = function (_a) {
     var args = __rest(_a, []);
-    return (<div className="flex flex-col space-y-7">
-    <DataList size={'small'}>
-      <DataListItem {...args}>
-        <DataListLabel {...args}>small</DataListLabel>
-        <DataListValue {...args}>
-          텍스트가 길어질 경우 줄바꿈으로 처리됩니다.텍스트가 길어질 경우 줄바꿈으로 처리됩니다.
-        </DataListValue>
-      </DataListItem>
-      <DataListItem {...args}>
-        <DataListLabel {...args}>small</DataListLabel>
-        <DataListValue {...args}>
-          텍스트가 길어질 경우 줄바꿈으로 처리됩니다.텍스트가 길어질 경우 줄바꿈으로 처리됩니다.
-        </DataListValue>
-      </DataListItem>
-    </DataList>
-
-    <DataList size={'medium'}>
-      <DataListItem {...args}>
-        <DataListLabel {...args}>medium</DataListLabel>
-        <DataListValue {...args}>
-          텍스트가 길어질 경우 줄바꿈으로 처리됩니다.텍스트가 길어질 경우 줄바꿈으로 처리됩니다.
-        </DataListValue>
-      </DataListItem>
-      <DataListItem {...args}>
-        <DataListLabel {...args}>medium</DataListLabel>
-        <DataListValue {...args}>
-          텍스트가 길어질 경우 줄바꿈으로 처리됩니다.텍스트가 길어질 경우 줄바꿈으로 처리됩니다.
-        </DataListValue>
-      </DataListItem>
-    </DataList>
-
-    <DataList size={'large'}>
-      <DataListItem {...args}>
-        <DataListLabel {...args}>large</DataListLabel>
-        <DataListValue {...args}>
-          텍스트가 길어질 경우 줄바꿈으로 처리됩니다.텍스트가 길어질 경우 줄바꿈으로 처리됩니다.
-        </DataListValue>
-      </DataListItem>
-      <DataListItem {...args}>
-        <DataListLabel {...args}>large</DataListLabel>
-        <DataListValue {...args}>
-          텍스트가 길어질 경우 줄바꿈으로 처리됩니다.텍스트가 길어질 경우 줄바꿈으로 처리됩니다.
-        </DataListValue>
-      </DataListItem>
-    </DataList>
+    return (<div className="flex flex-col space-y-7">
+    <DataList size={'small'}>
+      <DataListItem {...args}>
+        <DataListLabel {...args}>small</DataListLabel>
+        <DataListValue {...args}>
+          텍스트가 길어질 경우 줄바꿈으로 처리됩니다.텍스트가 길어질 경우 줄바꿈으로 처리됩니다.
+        </DataListValue>
+      </DataListItem>
+      <DataListItem {...args}>
+        <DataListLabel {...args}>small</DataListLabel>
+        <DataListValue {...args}>
+          텍스트가 길어질 경우 줄바꿈으로 처리됩니다.텍스트가 길어질 경우 줄바꿈으로 처리됩니다.
+        </DataListValue>
+      </DataListItem>
+    </DataList>
+
+    <DataList size={'medium'}>
+      <DataListItem {...args}>
+        <DataListLabel {...args}>medium</DataListLabel>
+        <DataListValue {...args}>
+          텍스트가 길어질 경우 줄바꿈으로 처리됩니다.텍스트가 길어질 경우 줄바꿈으로 처리됩니다.
+        </DataListValue>
+      </DataListItem>
+      <DataListItem {...args}>
+        <DataListLabel {...args}>medium</DataListLabel>
+        <DataListValue {...args}>
+          텍스트가 길어질 경우 줄바꿈으로 처리됩니다.텍스트가 길어질 경우 줄바꿈으로 처리됩니다.
+        </DataListValue>
+      </DataListItem>
+    </DataList>
+
+    <DataList size={'large'}>
+      <DataListItem {...args}>
+        <DataListLabel {...args}>large</DataListLabel>
+        <DataListValue {...args}>
+          텍스트가 길어질 경우 줄바꿈으로 처리됩니다.텍스트가 길어질 경우 줄바꿈으로 처리됩니다.
+        </DataListValue>
+      </DataListItem>
+      <DataListItem {...args}>
+        <DataListLabel {...args}>large</DataListLabel>
+        <DataListValue {...args}>
+          텍스트가 길어질 경우 줄바꿈으로 처리됩니다.텍스트가 길어질 경우 줄바꿈으로 처리됩니다.
+        </DataListValue>
+      </DataListItem>
+    </DataList>
   </div>);
 };