[ merge into master ] 개발 코드 업데이트

✨ 크로마틱 배포 로직 추가
🔥 input 컴포넌트에서 textarea 제거
✨ textarea 컴포넌트 추가
📝 아코디언 스토리북 추가
📝 textarea 스토리북 추가

.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 }}

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",

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>
+        `,
+    }),
+};

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 {

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,
-    },
-};