Merge pull request #239 from niceplugin/examples/modal

narusas · web-flow · commit 4eb93b70a413 · 2022-06-22T09:21:24.000+09:00
예제 번역: /examples/modal
diff --git a/ko-KR/.vitepress/config.ts b/ko-KR/.vitepress/config.ts
@@ -473,7 +473,7 @@ export const sidebar = {
           link: '/examples/#svg'
         },
         {
-          text: 'Modal with Transitions',
+          text: '트렌지션으로 모달 구현',
           link: '/examples/#modal'
         },
         {
diff --git a/ko-KR/src/examples/src/modal/App/template.html b/ko-KR/src/examples/src/modal/App/template.html
@@ -1,10 +1,16 @@
-<button id="show-modal" @click="showModal = true">Show Modal</button>
+<button id="show-modal" @click="showModal = true">모달 열기</button>
 
+<!--
+  Vue 가상 DOM 구조에서
+  모달 컴포넌트는 현재 컴포넌트의 자식이지만,
+  <body> 태그에 위치합니다.
+-->
 <Teleport to="body">
-  <!-- use the modal component, pass in the prop -->
+  <!-- prop을 전달하는 모달 컴포넌트를 사용합니다 -->
   <modal :show="showModal" @close="showModal = false">
+    <!-- name 속성 값이 "header"인 슬롯에 전달될 컨텐츠 -->
     <template #header>
-      <h3>custom header</h3>
+      <h3>커스텀 해더</h3>
     </template>
   </modal>
 </Teleport>
diff --git a/ko-KR/src/examples/src/modal/Modal/template.html b/ko-KR/src/examples/src/modal/Modal/template.html
@@ -3,20 +3,20 @@
     <div class="modal-wrapper">
       <div class="modal-container">
         <div class="modal-header">
-          <slot name="header">default header</slot>
+          <slot name="header">기본 해더</slot>
         </div>
 
         <div class="modal-body">
-          <slot name="body">default body</slot>
+          <slot name="body">기본 컨텐츠</slot>
         </div>
 
         <div class="modal-footer">
           <slot name="footer">
-            default footer
+            기본 푸터
             <button
               class="modal-default-button"
               @click="$emit('close')"
-            >OK</button>
+            >확인</button>
           </slot>
         </div>
       </div>
diff --git a/ko-KR/src/examples/src/modal/description.txt b/ko-KR/src/examples/src/modal/description.txt
@@ -1 +1 @@
-Modal component with customizable slots and CSS transitions.
+커스텀 가능한 슬롯 및 CSS 트렌지션이 있는 모달 컴포넌트

Original file line number	Diff line number	Diff line change
`@@ -473,7 +473,7 @@ export const sidebar = {`
`473`	`473`	`link: '/examples/#svg'`
`474`	`474`	`},`
`475`	`475`	`{`
`476`		`- text: 'Modal with Transitions',`
	`476`	`+ text: '트렌지션으로 모달 구현',`
`477`	`477`	`link: '/examples/#modal'`
`478`	`478`	`},`
`479`	`479`	`{`
Original file line number	Diff line number	Diff line change
`@@ -1 +1 @@`
`1`		`-Modal component with customizable slots and CSS transitions.`
	`1`	`+커스텀 가능한 슬롯 및 CSS 트렌지션이 있는 모달 컴포넌트`