From af794bf6d1da4e05945363088d68c4b69a0e8034 Mon Sep 17 00:00:00 2001
From: "jeff.park" <jeff.park@machbase.com>
Date: Thu, 26 Oct 2023 10:22:12 +0900
Subject: [PATCH 1/5] =?UTF-8?q?=E2=9C=A8=20=ED=81=AC=EB=A1=9C=EB=A7=88?=
 =?UTF-8?q?=ED=8B=B1=20=EB=B0=B0=ED=8F=AC=20=EB=A1=9C=EC=A7=81=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .github/workflows/chromatic-publish.yml | 22 ++++++++++++++++++++++
 package-lock.json                       | 20 +++++++++++++++++++-
 package.json                            |  1 +
 3 files changed, 42 insertions(+), 1 deletion(-)
 create mode 100644 .github/workflows/chromatic-publish.yml

diff --git a/.github/workflows/chromatic-publish.yml b/.github/workflows/chromatic-publish.yml
new file mode 100644
index 0000000..145ccbf
--- /dev/null
+++ b/.github/workflows/chromatic-publish.yml
@@ -0,0 +1,22 @@
+# Name of our action
+name: 'Chromatic Publish'
+# The event that will trigger the action
+on:
+    workflow_run:
+      workflows: ["update tag & package"]
+      types:
+        - completed
+
+jobs:
+  publish:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v1
+      - run: yarn
+        #👇 Adds Chromatic as a step in the workflow
+      - uses: chromaui/action@v1
+        # Options required for Chromatic's GitHub Action
+        with:
+          #👇 Chromatic projectToken, see https://storybook.js.org/tutorials/design-systems-for-developers/react/ko/review/ to obtain it
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+          token: ${{ secrets.GITHUB_TOKEN }}
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 914f073..01542b2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7,7 +7,7 @@
     "": {
       "name": "kyui3",
       "version": "0.2.1",
-      "license": "ISC",
+      "license": "MIT",
       "dependencies": {
         "@fortawesome/fontawesome-svg-core": "^6.2.1",
         "@fortawesome/free-brands-svg-icons": "^6.2.1",
@@ -29,6 +29,7 @@
         "@types/node": "^18.11.18",
         "@vitejs/plugin-vue": "^4.0.0",
         "@vue/tsconfig": "^0.1.3",
+        "chromatic": "^7.5.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "sass": "^1.57.1",
@@ -6686,6 +6687,17 @@
         "node": ">=10"
       }
     },
+    "node_modules/chromatic": {
+      "version": "7.5.0",
+      "resolved": "https://registry.npmjs.org/chromatic/-/chromatic-7.5.0.tgz",
+      "integrity": "sha512-9B1rT8/L71BZTmAGXFBvKGrudnVZ4uBcGFckx0ZEMvOXboI0DOyr1/ehmSB1YmPOhu+r/7dy2jfTEzPmYcpXJg==",
+      "dev": true,
+      "bin": {
+        "chroma": "dist/bin.js",
+        "chromatic": "dist/bin.js",
+        "chromatic-cli": "dist/bin.js"
+      }
+    },
     "node_modules/chrome-trace-event": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/chrome-trace-event/-/chrome-trace-event-1.0.3.tgz",
@@ -18203,6 +18215,12 @@
       "integrity": "sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==",
       "dev": true
     },
+    "chromatic": {
+      "version": "7.5.0",
+      "resolved": "https://registry.npmjs.org/chromatic/-/chromatic-7.5.0.tgz",
+      "integrity": "sha512-9B1rT8/L71BZTmAGXFBvKGrudnVZ4uBcGFckx0ZEMvOXboI0DOyr1/ehmSB1YmPOhu+r/7dy2jfTEzPmYcpXJg==",
+      "dev": true
+    },
     "chrome-trace-event": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/chrome-trace-event/-/chrome-trace-event-1.0.3.tgz",
diff --git a/package.json b/package.json
index 1059a09..c658bc1 100644
--- a/package.json
+++ b/package.json
@@ -34,6 +34,7 @@
     "@types/node": "^18.11.18",
     "@vitejs/plugin-vue": "^4.0.0",
     "@vue/tsconfig": "^0.1.3",
+    "chromatic": "^7.5.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "sass": "^1.57.1",

From e58d97a6838cf40294863bff9f34fb81849e32dc Mon Sep 17 00:00:00 2001
From: "jeff.park" <jeff.park@machbase.com>
Date: Thu, 26 Oct 2023 11:04:39 +0900
Subject: [PATCH 2/5] =?UTF-8?q?=F0=9F=94=A5=20input=20=EC=BB=B4=ED=8F=AC?=
 =?UTF-8?q?=EB=84=8C=ED=8A=B8=EC=97=90=EC=84=9C=20textarea=20=EC=A0=9C?=
 =?UTF-8?q?=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/input/Input.stories.ts |  37 +----
 src/components/input/Input.vue        | 215 ++++++++++++--------------
 2 files changed, 107 insertions(+), 145 deletions(-)

diff --git a/src/components/input/Input.stories.ts b/src/components/input/Input.stories.ts
index cdfd009..968d235 100644
--- a/src/components/input/Input.stories.ts
+++ b/src/components/input/Input.stories.ts
@@ -14,19 +14,15 @@ const meta = {
             description: '인풋의 스타일에 적용되는 `type`',
             defaultValue: 'text',
             control: 'select',
-            options: [
-                'text',
-                'textarea',
-                'email',
-                'phone',
-            ]
+            options: ['text', 'email', 'phone'],
         },
         placeholder: {
             description: '인풋 placeholder',
             defaultValue: 'input',
         },
         isValidate: {
-            description: '인풋에 입력한 값이 유효한 값인지 체크할지 말지 정하는 변수',
+            description:
+                '인풋에 입력한 값이 유효한 값인지 체크할지 말지 정하는 변수',
             default: true,
         },
         disabled: {
@@ -58,7 +54,7 @@ const meta = {
         helperText: {
             description: 'input 도움말',
             defaultValue: '',
-        }
+        },
     },
 } satisfies Meta<typeof Input>;
 
@@ -81,7 +77,7 @@ export const Default: Story = {
         },
         template: `
             <Input v-bind="args" v-model="value"></Input>
-        `
+        `,
     }),
     args: {
         type: 'text',
@@ -102,7 +98,7 @@ export const InputWithLabelAndHelperText: Story = {
         },
         template: `
             <Input v-bind="args" v-model="value"></Input>
-        `
+        `,
     }),
     args: {
         type: 'text',
@@ -113,24 +109,3 @@ export const InputWithLabelAndHelperText: Story = {
         helperText: '헬퍼 텍스트 입니다.',
     },
 };
-
-export const Textarea: Story = {
-    render: (args) => ({
-        components: {
-            Input,
-        },
-        setup() {
-            const value = ref('');
-            return { args, value };
-        },
-        template: `
-            <Input v-bind="args" v-model="value"></Input>
-        `
-    }),
-    args: {
-        type: 'textarea',
-        placeholder: 'input',
-        isValidate: true,
-        disabled: false,
-    },
-};
\ No newline at end of file
diff --git a/src/components/input/Input.vue b/src/components/input/Input.vue
index 4a04e1a..7eacea8 100644
--- a/src/components/input/Input.vue
+++ b/src/components/input/Input.vue
@@ -1,33 +1,32 @@
 <template>
-  <div class="input-overlay">
-    <label v-if="props.label" class="c-input-label">{{ props.label }}</label>
-    <div
-        class="input-wrapper"
-        :class="[validateClasses, classes]"
-    >
-        <Icon v-if="type !== 'textarea' && leftIcon" :icon="leftIcon" class="c-input-icon-left"/>
-        <input 
-            v-if="type !== 'textarea'"
-            :value="modelValue"
-            @input="updateInputValue"
-            :placeholder="placeholder"
-            :type="type"
-            :disabled="disabled"
-            class="c-input"
+    <div class="input-overlay">
+        <label v-if="props.label" class="c-input-label">{{
+            props.label
+        }}</label>
+        <div class="input-wrapper" :class="[validateClasses, classes]">
+            <Icon v-if="leftIcon" :icon="leftIcon" class="c-input-icon-left" />
+            <input
+                :value="modelValue"
+                @input="updateInputValue"
+                :placeholder="placeholder"
+                :type="type"
+                :disabled="disabled"
+                class="c-input"
+            />
+            <Icon
+                v-if="rightIcon"
+                :icon="rightIcon"
+                class="c-input-icon-right"
+            />
+        </div>
+        <div
+            v-if="props.helperText"
+            class="c-input-helper-text"
+            :class="[validateClasses]"
         >
-        <Icon v-if="type !== 'textarea' && rightIcon" :icon="rightIcon" class="c-input-icon-right"/>
-
-        <textarea
-            v-if="type === 'textarea'"
-            :value="modelValue"
-            @input="updateInputValue"
-            :placeholder="placeholder"
-            :disabled="disabled"
-            class="c-textarea"
-        ></textarea>
+            {{ props.helperText }}
+        </div>
     </div>
-    <div v-if="props.helperText" class="c-input-helper-text" :class="[validateClasses]">{{ props.helperText }}</div>
-  </div>
 </template>
 
 <script setup lang="ts" name="c-input">
@@ -46,7 +45,7 @@ const props = defineProps({
         type: String,
         default: 'text',
         validator(value: string) {
-            return ['text', 'textarea', 'email', 'phone'].includes(value)
+            return ['text', 'email', 'phone'].includes(value);
         },
     },
     label: {
@@ -77,121 +76,110 @@ const props = defineProps({
 
 const validateClasses = computed(() => {
     return {
-        'is-danger': props.modelValue !== '' && props.isValidate && !checkValidate(props.type, props.modelValue),
-        'is-success': props.modelValue !== '' && props.isValidate && checkValidate(props.type, props.modelValue)
-    }
-})
+        'is-danger':
+            props.modelValue !== '' &&
+            props.isValidate &&
+            !checkValidate(props.type, props.modelValue),
+        'is-success':
+            props.modelValue !== '' &&
+            props.isValidate &&
+            checkValidate(props.type, props.modelValue),
+    };
+});
 
 const classes = computed(() => {
     return {
-        'is-disabled': props.disabled
-    }
-})
+        'is-disabled': props.disabled,
+    };
+});
 
 const updateInputValue = (event: any) => {
     emit('update:modelValue', event.target.value);
-}
+};
 
 const checkValidate = (type: string, value: any) => {
     let checkReg: RegExp;
-    if(type === 'email') {
+    if (type === 'email') {
         // eslint-disable-next-line
-        checkReg = /^[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,3}$/;
-    } else if(type === 'phone') {
+        checkReg =
+            /^[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,3}$/;
+    } else if (type === 'phone') {
         checkReg = /^01([0|1|6|7|8|9])-?([0-9]{3,4})-?([0-9]{4})$/;
-    } else if(value) {
+    } else if (value) {
         return value.toString().length >= 1;
     } else {
         return false;
     }
     return checkReg.test(value);
-}
+};
 </script>
 
 <style lang="scss" scoped>
 @import '../../styles/common.scss';
 
 .c-input {
-  width: 100%;
-  height: 35px;
+    width: 100%;
+    height: 35px;
 
-  outline: none;
-  border: none;
-  border-radius: 5px;
-  
-  font-size: 16px;
+    outline: none;
+    border: none;
+    border-radius: 5px;
 
-  padding: 5px;
+    font-size: 16px;
+
+    padding: 5px;
 }
 
-.c-textarea {
-  width: 100%;
-  min-height: 150px;
-  height: 100%;
+.input-wrapper {
+    width: 100%;
+    height: 100%;
 
-  font-size: 16px;
+    // padding: 5px 16px;
 
-  border: none;
-  border-radius: 5px;
-  padding: 5px 16px;
+    box-sizing: border-box;
 
-  resize: vertical;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 
-  &:focus {
-      outline: none;
-  }
-}
+    border: 1px solid $c-default-border-color;
+    border-radius: 5px;
+    box-shadow: $c-box-shadow;
 
-.input-wrapper {
-  width: 100%;
-  height: 100%;
-
-  // padding: 5px 16px;
-
-  box-sizing: border-box;
-
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  border: 1px solid $c-default-border-color;
-  border-radius: 5px;
-  box-shadow: $c-box-shadow;
-
-  background-color: $c-white-color;
-
-  .c-input-icon-left {
-      padding: 5px 0 5px 5px;
-      display: flex;
-      justify-content: center;
-  }
-  .c-input-icon-right {
-      padding: 5px 5px 5px 0;
-      display: flex;
-      justify-content: center;
-  }
-
-  &:hover {
-      border-color: $c-hover-border-color;
-  }
-  &.is-danger {
-      box-shadow: $c-danger-color 0px 0px 5px;
-      border-color: $c-danger-color;
-  }
-  &.is-success {
-      box-shadow: $c-success-color 0px 0px 5px;
-      border-color: $c-success-color;
-  }
-  &.is-disabled {
-      border-color: lightgray;
-      background-color: lightgray;
-      input:disabled {
-          cursor: not-allowed;
-      }
-      ::placeholder {
-          color: rgb(165, 164, 164);
-      }
-  }
+    background-color: $c-white-color;
+
+    .c-input-icon-left {
+        padding: 5px 0 5px 5px;
+        display: flex;
+        justify-content: center;
+    }
+    .c-input-icon-right {
+        padding: 5px 5px 5px 0;
+        display: flex;
+        justify-content: center;
+    }
+
+    &:hover {
+        border-color: $c-hover-border-color;
+    }
+    &.is-danger {
+        box-shadow: $c-danger-color 0px 0px 5px;
+        border-color: $c-danger-color;
+    }
+    &.is-success {
+        box-shadow: $c-success-color 0px 0px 5px;
+        border-color: $c-success-color;
+    }
+    &.is-disabled {
+        border-color: lightgray;
+        background-color: lightgray;
+        input:disabled {
+            cursor: not-allowed;
+        }
+        ::placeholder {
+            color: rgb(165, 164, 164);
+        }
+    }
 }
 
 .input-overlay {
@@ -211,5 +199,4 @@ const checkValidate = (type: string, value: any) => {
         }
     }
 }
-
-</style>
\ No newline at end of file
+</style>

From 988334d9ccaa8463cf816ff57c9252e44b8f70b0 Mon Sep 17 00:00:00 2001
From: "jeff.park" <jeff.park@machbase.com>
Date: Thu, 26 Oct 2023 11:04:59 +0900
Subject: [PATCH 3/5] =?UTF-8?q?=E2=9C=A8=20textarea=20=EC=BB=B4=ED=8F=AC?=
 =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/textarea/TextArea.vue | 120 +++++++++++++++++++++++++++
 src/components/textarea/index.ts     |   3 +
 src/index.ts                         |   6 ++
 3 files changed, 129 insertions(+)
 create mode 100644 src/components/textarea/TextArea.vue
 create mode 100644 src/components/textarea/index.ts

diff --git a/src/components/textarea/TextArea.vue b/src/components/textarea/TextArea.vue
new file mode 100644
index 0000000..1430f03
--- /dev/null
+++ b/src/components/textarea/TextArea.vue
@@ -0,0 +1,120 @@
+<template>
+    <div class="textarea-overlay">
+        <label v-if="props.label" class="c-textarea-label">{{
+            props.label
+        }}</label>
+        <div class="textarea-wrapper" :class="[classes]">
+            <textarea
+                :value="modelValue"
+                @input="updateTextAreaValue"
+                :placeholder="placeholder"
+                :disabled="disabled"
+                :maxlength="maxLength"
+                :rows="rows"
+                class="c-textarea"
+                :style="{ resize: isResize ? 'vertical' : 'none' }"
+            ></textarea>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts" name="c-textarea">
+import { computed } from 'vue';
+
+const emit = defineEmits(['update:modelValue']);
+
+const props = defineProps({
+    modelValue: [Number, String],
+    placeholder: {
+        type: String,
+        default: '',
+    },
+    label: {
+        type: String,
+        default: '',
+    },
+    disabled: {
+        type: Boolean,
+        default: false,
+    },
+    rows: {
+        type: Number,
+        default: 5,
+    },
+    maxLength: {
+        type: Number,
+        default: 500,
+    },
+    isResize: {
+        type: Boolean,
+        default: false,
+    },
+});
+
+const classes = computed(() => {
+    return {
+        'is-disabled': props.disabled,
+    };
+});
+
+const updateTextAreaValue = (event: any) => {
+    emit('update:modelValue', event.target.value);
+};
+</script>
+
+<style lang="scss" scoped>
+@import '../../styles/common.scss';
+.c-textarea {
+    width: 100%;
+    height: 100%;
+
+    font-size: 16px;
+
+    border: none;
+    border-radius: 5px;
+    padding: 5px 16px;
+
+    &:focus {
+        outline: none;
+    }
+}
+.textarea-wrapper {
+    width: 100%;
+    height: 100%;
+
+    box-sizing: border-box;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    border: 1px solid $c-default-border-color;
+    border-radius: 5px;
+    box-shadow: $c-box-shadow;
+
+    background-color: $c-white-color;
+
+    &:hover {
+        border-color: $c-hover-border-color;
+    }
+    &.is-disabled {
+        border-color: lightgray;
+        background-color: lightgray;
+        input:disabled {
+            cursor: not-allowed;
+        }
+        ::placeholder {
+            color: rgb(165, 164, 164);
+        }
+    }
+}
+
+.textarea-overlay {
+    display: flex;
+    flex-direction: column;
+    justify-content: start;
+    .c-textarea-label {
+        margin-bottom: 0.3rem;
+    }
+}
+</style>
diff --git a/src/components/textarea/index.ts b/src/components/textarea/index.ts
new file mode 100644
index 0000000..1749ee9
--- /dev/null
+++ b/src/components/textarea/index.ts
@@ -0,0 +1,3 @@
+import TextArea from './TextArea.vue';
+
+export { TextArea };
diff --git a/src/index.ts b/src/index.ts
index 7703d40..f35f568 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -2,6 +2,7 @@ import type { App } from 'vue';
 
 // components
 import { Input } from './components/input/index';
+import { TextArea } from './components/textarea/index';
 import { Icon } from './components/icon/index';
 import { Button, ButtonGroup } from './components/button/index';
 import { Switch } from './components/switch/index';
@@ -110,6 +111,10 @@ const components = [
         name: 'c-accordion-group',
         value: AccordionGroup,
     },
+    {
+        name: 'c-textarea',
+        value: TextArea,
+    },
 ];
 
 const kyui3 = {
@@ -143,6 +148,7 @@ export {
     Modal,
     Accordion,
     AccordionGroup,
+    TextArea,
     FontAwesomeIcon,
 };
 

From 903df7005a7ea73ad9af9d9b1196f68950e6c5e1 Mon Sep 17 00:00:00 2001
From: "jeff.park" <jeff.park@machbase.com>
Date: Thu, 26 Oct 2023 11:47:42 +0900
Subject: [PATCH 4/5] =?UTF-8?q?=F0=9F=93=9D=20=EC=95=84=EC=BD=94=EB=94=94?=
 =?UTF-8?q?=EC=96=B8=20=EC=8A=A4=ED=86=A0=EB=A6=AC=EB=B6=81=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/accordion/Accordion.stories.ts | 88 +++++++++++++++++++
 src/components/accordion/AccordionGroup.vue   |  2 +
 2 files changed, 90 insertions(+)
 create mode 100644 src/components/accordion/Accordion.stories.ts

diff --git a/src/components/accordion/Accordion.stories.ts b/src/components/accordion/Accordion.stories.ts
new file mode 100644
index 0000000..39f9e17
--- /dev/null
+++ b/src/components/accordion/Accordion.stories.ts
@@ -0,0 +1,88 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+
+import Accordion from '@/components/accordion/Accordion.vue';
+import AccordionGroup from '@/components/accordion/AccordionGroup.vue';
+
+// More on how to set up stories at: https://storybook.js.org/docs/vue/writing-stories/introduction
+const meta = {
+    title: 'kyUI3/Accordion',
+    component: Accordion,
+    // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/vue/writing-docs/autodocs
+    tags: ['autodocs'],
+    argTypes: {
+        title: {
+            description: '아코디언 타이틀',
+            defaultValue: 'title',
+        },
+        isArrow: {
+            description: '화살표 여부',
+            defaultValue: false,
+        },
+    },
+} satisfies Meta<typeof Accordion>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/vue/api/csf
+ * to learn how to use render functions.
+ */
+export const Default: Story = {
+    render: (args) => ({
+        components: { Accordion },
+        setup() {
+            return { args };
+        },
+        template: `
+            <Accordion v-bind="args">
+                <div>아코디언 내용</div>
+            </Accordion>
+        `,
+    }),
+    args: {
+        title: 'accordion',
+        isArrow: false,
+    },
+};
+
+export const Group: Story = {
+    parameters: {
+        docs: {
+            source: {
+                code: `
+<c-accordion-group>
+    <c-accordion title="accordion1">
+        <div>여기에 내용을</div>
+    </c-accordion>
+    <c-accordion title="accordion2">
+        <div>꾸며 주시면</div>
+    </c-accordion>
+    <c-accordion title="accordion3">
+        <div>아름다운 아코디언이 완성됩니다.</div>
+    </c-accordion>
+</c-accordion-group>
+`,
+            },
+        },
+    },
+    render: (args) => ({
+        components: { Accordion, AccordionGroup },
+        setup() {
+            return { args };
+        },
+        template: `
+        <AccordionGroup>
+            <Accordion title="accordion1">
+                <div>여기에 내용을</div>
+            </Accordion>
+            <Accordion title="accordion2">
+                <div>꾸며 주시면</div>
+            </Accordion>
+            <Accordion title="accordion3">
+                <div>아름다운 아코디언이 완성됩니다.</div>
+            </Accordion>
+        </AccordionGroup>
+        `,
+    }),
+};
diff --git a/src/components/accordion/AccordionGroup.vue b/src/components/accordion/AccordionGroup.vue
index 0f444f3..f7292b4 100644
--- a/src/components/accordion/AccordionGroup.vue
+++ b/src/components/accordion/AccordionGroup.vue
@@ -4,6 +4,8 @@
     </div>
 </template>
 
+<script setup lang="ts" name="c-accordion-group"></script>
+
 <style lang="scss" scoped>
 @import '../../styles/common.scss';
 .c-accordion-group {

From 30cf80990d520c65f157bdc36e787fa0d57da62d Mon Sep 17 00:00:00 2001
From: "jeff.park" <jeff.park@machbase.com>
Date: Thu, 26 Oct 2023 11:54:57 +0900
Subject: [PATCH 5/5] =?UTF-8?q?=F0=9F=93=9D=20textarea=20=EC=8A=A4?=
 =?UTF-8?q?=ED=86=A0=EB=A6=AC=EB=B6=81=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/textarea/TextArea.stories.ts | 54 +++++++++++++++++++++
 1 file changed, 54 insertions(+)
 create mode 100644 src/components/textarea/TextArea.stories.ts

diff --git a/src/components/textarea/TextArea.stories.ts b/src/components/textarea/TextArea.stories.ts
new file mode 100644
index 0000000..f0c4610
--- /dev/null
+++ b/src/components/textarea/TextArea.stories.ts
@@ -0,0 +1,54 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+
+import TextArea from '@/components/textarea/TextArea.vue';
+
+// More on how to set up stories at: https://storybook.js.org/docs/vue/writing-stories/introduction
+const meta = {
+    title: 'kyUI3/TextArea',
+    component: TextArea,
+    // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/vue/writing-docs/autodocs
+    tags: ['autodocs'],
+    argTypes: {
+        placeholder: {
+            description: 'textarea placeholder',
+            defaultValue: 'textarea',
+        },
+        disabled: {
+            description: 'textarea를 disable처리 합니다.',
+            defaultValue: false,
+        },
+        label: {
+            description: 'textarea 라벨',
+            defaultValue: '',
+        },
+        rows: {
+            description: 'textarea의 최대 라인 수',
+            defaultValue: 5,
+        },
+        maxLength: {
+            description: 'textarea의 최대 글자 수',
+            defaultValue: 500,
+        },
+        isResize: {
+            description: 'textarea의 리사이즈 여부 (수직으로만 가능)',
+            defaultValue: false,
+        },
+    },
+} satisfies Meta<typeof TextArea>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/vue/api/csf
+ * to learn how to use render functions.
+ */
+export const Default: Story = {
+    args: {
+        placeholder: 'textarea',
+        disabled: false,
+        rows: 3,
+        maxLength: 500,
+        isResize: true,
+    },
+};