[#615] 샘플 컴포넌트 Checkbox를 통해 EVUI 사이트 공통 모듈 작업

################
- EVUI > Checkbox 컴포넌트 리펙토링 완료 (CheckBoxGroup 예정)
- codemirror 등을 이용한 EVUI 사이트내 코드 뷰 모듈 개발 진행 중
- Vue3 환경의 EVUI 라이브러리 install, export 모듈부분 > 개별 라이브러리 함수를 destruring import할 수 있도록 개선

docs/App.vue

@@ -20,7 +20,7 @@ export default {
 @import '~@/stylesheets/default';
 
 * {
-  font-family: 'NanumGothic', Arial, 'Helvetica Neue', Helvetica, sans-serif;
+  font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
 }
 
 #app {

docs/components/CodeView.vue

@@ -0,0 +1,21 @@
+<template>
+  <div>
+    CodeView
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'CodeView',
+  components: {
+  },
+  props: {
+  },
+  setup() {
+
+  },
+};
+</script>
+
+<style scoped>
+</style>

docs/components/Example.vue

@@ -1,17 +1,25 @@
 <template>
   <section>
     <h2>{{ title }}</h2>
+    <br>
     <p class="example-desc">
       {{ description }}
     </p>
-    <div>
-      123
-    </div>
+    <br><br>
+    <component
+      :is="contents"
+    />
+    <br>
+    url : {{ url }}
+    <br>
     <hr class="example-splitter">
   </section>
 </template>
 
 <script>
+import { ref } from 'vue';
+import axios from 'axios';
+
 export default {
   name: 'Example',
   components: {
@@ -25,8 +33,26 @@ export default {
       type: String,
       default: '',
     },
+    contents: {
+      type: Object,
+      default: null,
+    },
+    url: {
+      type: String,
+      default: '',
+    },
   },
-  methods: {
+  setup(props) {
+    const codeData = ref('');
+
+    console.log(`props.url : ${props.url}`);
+    axios.get(props.url).then((result) => {
+      codeData.value = `\`\`\`html\n${result.data}\n\`\`\``;
+    });
+
+    return {
+      codeData,
+    };
   },
 };
 </script>

docs/components/Menu.vue

@@ -40,12 +40,12 @@ export default {
       },
       {
         name: 'CheckBox',
-        routerLink: '/checkBox',
+        routerLink: '/checkbox',
         content: '체크박스',
       },
       {
         name: 'RadioButton',
-        routerLink: '/radioButton',
+        routerLink: '/radio',
         content: '라디오버튼',
       },
       {
@@ -55,7 +55,7 @@ export default {
       },
       {
         name: 'SelectBox',
-        routerLink: '/selectBox',
+        routerLink: '/select',
         content: '셀렉트 박스',
       },
       {

docs/router/index.js

@@ -23,24 +23,24 @@ const routes = [
     component: () => import(/* webpackChunkName: "button" */ '../views/button'),
   },
   {
-    path: '/checkBox',
-    name: 'CheckBox',
-    component: () => import(/* webpackChunkName: "checkBox" */ '../views/checkBox'),
+    path: '/checkbox',
+    name: 'Checkbox',
+    component: () => import(/* webpackChunkName: "checkbox" */ '../views/checkbox'),
   },
   {
-    path: '/radioButton',
-    name: 'RadioButton',
-    component: () => import(/* webpackChunkName: "radioButton" */ '../views/radioButton'),
+    path: '/radio',
+    name: 'Radio',
+    component: () => import(/* webpackChunkName: "radio" */ '../views/radio'),
   },
   {
     path: '/inputNumber',
     name: 'InputNumber',
     component: () => import(/* webpackChunkName: "inputNumber" */ '../views/inputNumber'),
   },
   {
-    path: '/selectBox',
-    name: 'SelectBox',
-    component: () => import(/* webpackChunkName: "selectBox" */ '../views/selectBox'),
+    path: '/select',
+    name: 'Select',
+    component: () => import(/* webpackChunkName: "select" */ '../views/select'),
   },
   {
     path: '/slider',

docs/views/checkbox/example/Default.vue

@@ -0,0 +1,80 @@
+<template>
+  <div>
+    <h5># Common</h5>
+    <br>
+    <EvCheckbox
+      v-model="checkVal1"
+    >
+      Checkbox
+    </EvCheckbox>
+    <br>
+    <br>
+    <button @click="clickButton1">
+      click to change the check value
+    </button>
+    <br>
+    <br>
+    <h5># Use Change Event</h5>
+    <br>
+    <EvCheckbox
+      v-model="checkVal2"
+      @change="changeVal2"
+    >
+      Single Checkbox
+    </EvCheckbox>
+    <br>
+    <br>
+    Value in changeEvent : {{ checkResult2.value }}
+    <br>
+    Event in changeEvent : {{ checkResult2.e }}
+    <br>
+    <br>
+    <h5># Disabled</h5>
+    <br>
+    <EvCheckbox
+      v-model="checkVal3"
+      disabled
+    >
+      DISABLED
+    </EvCheckbox>
+    <br>
+    <br>
+  </div>
+</template>
+
+<script>
+import { ref, reactive } from 'vue';
+
+export default {
+  setup() {
+    const checkVal1 = ref(false);
+    const clickButton1 = () => {
+      checkVal1.value = !checkVal1.value;
+    };
+
+    const checkVal2 = ref(true);
+    const checkResult2 = reactive({
+      value: '',
+      e: null,
+    });
+    const changeVal2 = (value, e) => {
+      checkResult2.value = value;
+      checkResult2.e = e;
+    };
+
+    const checkVal3 = ref(false);
+
+    return {
+      checkVal1,
+      checkVal2,
+      clickButton1,
+      checkResult2,
+      changeVal2,
+      checkVal3,
+    };
+  },
+};
+</script>
+
+<style lang="scss">
+</style>

docs/views/checkbox/index.vue

@@ -0,0 +1,54 @@
+<template>
+  <div class="article-title">
+    <h1> CHECK BOX </h1>
+  </div>
+  <br><hr><br>
+  <Example
+    v-for="(component, index) in components"
+    :key="`${component.title}_${index}`"
+    :title="component.title"
+    :description="component.description"
+    :contents="component.component"
+    :url="component.url"
+  />
+</template>
+
+<script>
+import { ref, defineAsyncComponent } from 'vue';
+import Example from '../../components/Example';
+import Default from './example/Default';
+
+export default {
+  name: 'Checkbox',
+  components: {
+    Example,
+  },
+  inheritAttrs: false,
+  setup() {
+    const checkVal1 = ref(true);
+    const checkVal2 = ref(false);
+    const checkVal3 = ref(false);
+
+    const onChange = (value, e) => {
+      console.log(`value: ${value}, e : ${e}`);
+    };
+
+    const components = [
+      {
+        title: 'Default',
+        description: '여러 개의 선택 사항을 고르기 위한 단일 체크 박스의 기능입니다.',
+        component: defineAsyncComponent(() => Promise.resolve(Default)),
+        url: './docs/views/checkbox/example/Default.vue',
+      },
+    ];
+
+    return {
+      checkVal1,
+      checkVal2,
+      checkVal3,
+      components,
+      onChange,
+    };
+  },
+};
+</script>

package.json

@@ -35,6 +35,7 @@
     "eslint-plugin-import": "^2.21.2",
     "eslint-plugin-vue": "^7.0.0-0",
     "lodash-es": "^4.17.15",
+    "marked": "^1.1.1",
     "moment": "^2.27.0",
     "node-sass": "^4.12.0",
     "sass-loader": "^8.0.2",