[#651] Docs Sample Page 로직 리펙토링 (#652)

* [#651] Docs Sample Page 로직 리펙토링 ################ - dynamic import에 필요한 path는 변수가 아닌 리터럴 스트링값만 허용되므로 path를 조합할 수 없음. - docs 페이지 내 각 컴포넌트에서 raw-loader를 통한 파일 내 텍스트 값을 가져와 자식 컴포넌트로 넘겨주는 구조 구성 - raw-loader, dynamic import를 통해 파싱된 텍스트(md파일, 코드 내용) 및 컴포넌트별 정보들을 v-bind를 사용하여 props값으로 내림 - 각 페이지에서 사용되는 공통 Example 컴포넌트 코드 리펙토링 및 dynamic import로 인한 딜레이로 인해 하이라이트 사용자지정 디렉티브의 훅을 mounted에서 updated로 변경 - 페이지 하단의 API 문서 markdown 텍스트도 dynamic import로 인해 반환된 값의 반응형 참조 값을 받아 적용될 수 있도록 computed 로직 추가 * [#651] Docs Sample Page 로직 리펙토링 ################ - 불필요한 바인딩 값 제거 * [#651] Docs Sample Page 로직 리펙토링 ################ - 중복되는 템플릿을 가진 템플릿을 리펙토링하여 하나의 페이지에서 라우터의 props를 넘겨서 선택한 메뉴와 관련있는 화면이 나오도록 로직을 변경 - dynamic import를 없애고 사용자지정 디렉티브의 훅도 원복 - docs > views > [컴포넌트명] 폴더 내 index.vue를 없애고 라우터에서 props로 넘길 정보만 `props.js` 생성 * [#651] Docs Sample Page 로직 리펙토링 ################ - 현재까지 개발된 docs의 컴포넌트 페이지에 router를 통한 props넘기는 로직 적용 - icon의 경우 샘플코드가 없으므로 PageView에서 현재 route name이 Icon인지 아닌지에 따라 IconList 컴포넌트를 보여주도록 설정 - 불필요한 파일 삭제
ex-em · Sep 25, 2020 · 602c2d6 · 602c2d6
1 parent c63bcad
commit 602c2d6
Show file tree

Hide file tree

Showing 15 changed files with 193 additions and 298 deletions.
diff --git a/docs/components/Example.vue b/docs/components/Example.vue
@@ -8,9 +8,7 @@
     </p>
     <div class="article-example">
       <div class="view">
-        <component
-          :is="contents"
-        />
+        <component :is="component" />
       </div>
       <div
         v-highlight
@@ -20,11 +18,11 @@
           ref="codeWrapper"
           class="code-wrapper"
         >
-          <pre
-            v-for="(code, key) in codeText"
-            :key="key"
-          >
-            {{ code }}
+          <pre>
+            {{ parsedData?.template?.content }}
+          </pre>
+          <pre>
+            {{ parsedData?.script?.content }}
           </pre>
         </div>
         <div
@@ -63,17 +61,13 @@ export default {
       type: String,
       default: '',
     },
-    contents: {
+    component: {
       type: Object,
       default: null,
     },
-    url: {
-      type: String,
-      default: '',
-    },
-    codeText: {
-      type: Object,
-      default: () => {},
+    parsedData: {
+      type: [String, Object],
+      default: null,
     },
   },
   setup() {
@@ -85,6 +79,7 @@ export default {
         codeWrapper.value.scrollTop = 0;
       }
     };
+
     return {
       codeExpend,
       codeWrapper,

diff --git a/docs/components/MarkdownView.vue b/docs/components/MarkdownView.vue
@@ -10,6 +10,7 @@
 </template>
 
 <script>
+import { computed } from 'vue';
 import marked from 'marked';
 import hljs from 'highlight.js';
 
@@ -34,7 +35,7 @@ export default {
     },
   },
   setup(props) {
-    const compiledMd = marked(props.source);
+    const compiledMd = computed(() => marked(props.source));
 
     return {
       compiledMd,

diff --git a/docs/router/index.js b/docs/router/index.js
@@ -1,5 +1,11 @@
 import { createRouter, createWebHistory } from 'vue-router';
-import Intro from '../views/Intro.vue';
+import Intro from 'docs/views/Intro.vue';
+import PageView from 'docs/views/PageView';
+import checkboxProps from 'docs/views/checkbox/props';
+import selectProps from 'docs/views/select/props';
+import radioProps from 'docs/views/radio/props';
+import textFieldProps from 'docs/views/textField/props';
+import iconProps from 'docs/views/icon/props';
 
 const routes = [
   {
@@ -25,12 +31,14 @@ const routes = [
   {
     path: '/checkbox',
     name: 'Checkbox',
-    component: () => import(/* webpackChunkName: "checkbox" */ '../views/checkbox'),
+    component: PageView,
+    props: checkboxProps,
   },
   {
     path: '/radio',
     name: 'Radio',
-    component: () => import(/* webpackChunkName: "radio" */ '../views/radio'),
+    component: PageView,
+    props: radioProps,
   },
   {
     path: '/inputNumber',
@@ -40,7 +48,8 @@ const routes = [
   {
     path: '/select',
     name: 'Select',
-    component: () => import(/* webpackChunkName: "select" */ '../views/select'),
+    component: PageView,
+    props: selectProps,
   },
   {
     path: '/slider',
@@ -75,7 +84,8 @@ const routes = [
   {
     path: '/textField',
     name: 'TextField',
-    component: () => import(/* webpackChunkName: "textField" */ '../views/textField'),
+    component: PageView,
+    props: textFieldProps,
   },
   {
     path: '/barChart',
@@ -110,7 +120,8 @@ const routes = [
   {
     path: '/icon',
     name: 'Icon',
-    component: () => import(/* webpackChunkName: "icon" */ '../views/icon'),
+    component: PageView,
+    props: iconProps,
   },
   {
     path: '/:catchAll(.*)',

diff --git a/docs/views/PageView.vue b/docs/views/PageView.vue
@@ -0,0 +1,44 @@
+<template>
+  <h2 class="content-title">
+    {{ $route.name }}
+  </h2>
+  <template v-if="$route.name !== 'Icon'">
+    <example
+      v-for="(value, name, index) in components"
+      :key="`${name}_${index}`"
+      v-bind="value"
+      :title="name"
+    />
+  </template>
+  <icon-list v-else />
+  <markdown-view
+    :source="mdText"
+  />
+</template>
+
+<script>
+import Example from 'docs/components/Example';
+import MarkdownView from 'docs/components/MarkdownView';
+import IconList from 'docs/views/icon/example/IconList';
+
+export default {
+  components: {
+    Example,
+    MarkdownView,
+    IconList,
+  },
+  inheritAttrs: false,
+  props: {
+    mdText: {
+      type: String,
+      default: '',
+    },
+    components: {
+      type: Object,
+      default: () => {},
+    },
+  },
+  setup() {
+  },
+};
+</script>
diff --git a/docs/views/checkbox/api/checkbox.md b/docs/views/checkbox/api/checkbox.md
@@ -1,13 +1,22 @@
 
 >### Desc
- - 태그는 &lt;EvCheckbox&gt;(이하 <체크박스>), &lt;EvCheckboxGroup&gt;(이하 <체크박스그룹>)으로 정의
+ - 태그는 &lt;ev-checkbox&gt;(이하 <체크박스>), &lt;ev-checkbox-group&gt;(이하 <체크박스그룹>)으로 정의
 
 ```
-<EvCheckboxGroup>
-  <EvCheckbox>텍스트</EvCheckbox>
-  <EvCheckbox>텍스트</EvCheckbox>
-  <EvCheckbox>텍스트</EvCheckbox>
-</EvCheckboxGroup>
+<ev-checkbox
+    v-mode="바인딩값"
+    @change="이벤트메소드"
+>
+    텍스트
+</ev-checkbox>
+```
+
+```
+<ev-checkbox-group>
+    <ev-checkbox label="라벨값">텍스트</ev-checkbox>
+    <ev-checkbox label="라벨값">텍스트</ev-checkbox>
+    <ev-checkbox label="라벨값" /> // 이 경우는 라벨값 = 텍스트
+</ev-checkbox-group>
 ```
 
  - <체크박스그룹>과 <체크박스> 태그는 위와 같이 상위에 그룹, 하위에 체크박스로 사용
@@ -39,7 +48,6 @@
 > | 이름 | 디폴트 | 타입 | 설명 | 종류 |
   |------------ |-----------|---------|-------------------------|---------------------------------------------------|
   | v-model | null | String, Number, Boolean, Symbol, Array | <체크박스그룹>내 선택된 <체크박스> label 값으로, 해당 값은 바인딩되어 동적으로 변함 | |
-  | label | null | String  | HTML element value (required) |  |
   | disabled | false | Boolean | HTML element disabled attribute |  |
 
 >### Event
@@ -50,6 +58,4 @@
  | change | event | <체크박스그룹> 내 <체크박스> 변화 이벤트 감지 |
 
 >### 참고
- - :id는 내부적으로 가지고 있으며, <체크박스>태그 내 <label for=":id">와 연동하기 위함.
-   - 현재는 ${&#95;uid}&#95;${value}로 되어있으나, 추후 바꿀 예정
  - <체크박스>체크박스텍스트값</체크박스>로 태그 내부에 텍스트는 &lt;slot/&gt;을 사용함.
diff --git a/docs/views/checkbox/index.vue b/docs/views/checkbox/index.vue
diff --git a/docs/views/checkbox/props.js b/docs/views/checkbox/props.js
@@ -0,0 +1,22 @@
+import { parseComponent } from 'vue-template-compiler';
+import mdText from 'raw-loader!./api/checkbox.md';
+import Default from './example/Default';
+import DefaultRaw from '!!raw-loader!./example/Default';
+import CheckboxGroup from './example/CheckboxGroup';
+import CheckboxGroupRaw from '!!raw-loader!./example/CheckboxGroup';
+
+export default {
+  mdText,
+  components: {
+    Default: {
+      description: '여러 개의 선택 사항을 고르기 위한 단일 체크 박스의 기능입니다.',
+      component: Default,
+      parsedData: parseComponent(DefaultRaw),
+    },
+    CheckboxGroup: {
+      description: '체크박스 그룹 기능입니다.',
+      component: CheckboxGroup,
+      parsedData: parseComponent(CheckboxGroupRaw),
+    },
+  },
+};
diff --git a/docs/views/icon/index.vue b/docs/views/icon/index.vue
diff --git a/docs/views/icon/props.js b/docs/views/icon/props.js
@@ -0,0 +1,15 @@
+import { parseComponent } from 'vue-template-compiler';
+import mdText from '!!raw-loader!./api/icon.md';
+import Default from './example/Default';
+import DefaultRaw from '!!raw-loader!./example/Default';
+
+export default {
+  mdText,
+  components: {
+    Default: {
+      description: 'EVUI에서 제공하는 아이콘입니다.',
+      component: Default,
+      parsedData: parseComponent(DefaultRaw),
+    },
+  },
+};