Merge pull request #238 from niceplugin/examples/svg

예제 번역: /examples/svg

Author: narusas

ko-KR/.vitepress/config.ts

@@ -469,7 +469,7 @@ export const sidebar = {
           link: '/examples/#tree'
         },
         {
-          text: 'SVG Graph',
+          text: 'SVG 그래프',
           link: '/examples/#svg'
         },
         {

ko-KR/src/examples/src/svg/App/composition.js

@@ -30,7 +30,7 @@ export default {
       if (stats.length > 3) {
         stats.splice(stats.indexOf(stat), 1)
       } else {
-        alert("Can't delete more!")
+        alert("더 이상 삭제할 수 없습니다!")
       }
     }
 

ko-KR/src/examples/src/svg/App/options.js

@@ -29,7 +29,7 @@ export default {
       if (this.stats.length > 3) {
         this.stats.splice(this.stats.indexOf(stat), 1)
       } else {
-        alert("Can't delete more!")
+        alert("더 이상 삭제할 수 없습니다!")
       }
     }
   }

ko-KR/src/examples/src/svg/App/template.html

@@ -1,18 +1,21 @@
+<!-- 그래프 -->
 <svg width="200" height="200">
   <PolyGraph :stats="stats"></PolyGraph>
 </svg>
 
-<!-- controls -->
+<!-- 컨트롤러 -->
 <div v-for="stat in stats">
   <label>{{stat.label}}</label>
   <input type="range" v-model="stat.value" min="0" max="100">
   <span>{{stat.value}}</span>
   <button @click="remove(stat)" class="remove">X</button>
 </div>
 
+<!-- 입력 폼 -->
 <form id="add">
   <input name="newlabel" v-model="newLabel">
-  <button @click="add">Add a Stat</button>
+  <button @click="add">스탯 추가</button>
 </form>
 
+<!-- 스탯 배열 시각적인 출력 -->
 <pre id="raw">{{ stats }}</pre>

ko-KR/src/examples/src/svg/PolyGraph/composition.js

@@ -10,6 +10,7 @@ export default {
     stats: Array
   },
   setup(props) {
+    // polygon 태그의 points 속성에 적용할 계산된 속성
     const points = computed(() => {
       const total = props.stats.length
       return props.stats

ko-KR/src/examples/src/svg/PolyGraph/options.js

@@ -9,7 +9,7 @@ export default {
     stats: Array
   },
   computed: {
-    // a computed property for the polygon's points
+    // polygon 태그의 points 속성에 적용할 계산된 속성
     points() {
       const total = this.stats.length
       return this.stats

ko-KR/src/examples/src/svg/description.txt

@@ -1 +1,4 @@
-Say Hello World with Vue!
+부모 컴포넌트에서 스탯(stats) 배열을
+자식 컴포넌트에게 전달하여 그래프를 그립니다.
+컴포넌트 간 공통으로 사용하는 로직은
+재사용성을 위해 컴포저블 함수로 되어있습니다.