jichoi / calendar star
류윤주 류윤주 07-31
250731 류윤주 수정
@ff57d368334c8dc19981201732c2b8930fe0c5c3
31fcf4e
ff57d36
client/views/component/modal/Modal.vue
--- client/views/component/modal/Modal.vue
+++ client/views/component/modal/Modal.vue
@@ -1,7 +1,7 @@
 
 <template>
 
     <div  :class="['modal-back', { in: showModal }]">
 
         <div :class="['modal', { in: showModal, shown: showModal }]">
 
-            <div class="modal-dialog">
 
+            <div class="modal-dialog" :class="className">
 
                 <div class="modal-content">
 
                     <div class="modal-header">
 
                         <div class="flex justify-between align-center">
@@ -11,9 +11,9 @@
 
                     <div class="modal-conts">
 
                         <slot></slot>
 
                     </div>
 
-                    <div class="modal-btn flex justify-end">
 
-                        <slot name="footer"></slot>
 
-                    </div>
 
+                    <slot name="footer">
 
+                        <!-- <div class="modal-btn flex justify-end"></div> -->
 
+                    </slot>
 
                 </div>
 
             </div>
 
         </div>
31fcf4e
ff57d36
client/views/pages/Manager/sanctn/MyApprovalRequestList.vue
--- client/views/pages/Manager/sanctn/MyApprovalRequestList.vue
+++ client/views/pages/Manager/sanctn/MyApprovalRequestList.vue
@@ -62,32 +62,31 @@
 
       <Pagination :search="searchParams" @onChange="handlePageChange" />
 
       <button class="btn sm primary" @click="isOptionsModalVisible = true">신청하기</button>
 
     </div>
 
-  <div v-if="isOptionsModalVisible" class="popup-overlay">
 
-    <div class="popup-content">
 
-      <div class="card">
 
-        <div class="card-body">
 
-          <h2 class="card-title">신청종류선택</h2>
 
-          <div class="buttons">
 
-            <button class="btn sm hyuga" @click="handleRegistrationNavigation('휴가')">휴가신청</button>
 
-            <button class="btn sm chuljang" @click="handleRegistrationNavigation('출장')">출장신청</button>
 
-          </div>
 
+    <Modal :showModal="isOptionsModalVisible" :className="'small-modal'">
 
+      <template #header>
 
+        <div class="modal-title">
 
+          <p>신청 종류 선택</p>
 
         </div>
 
+        <button class="btn-close" @click="isOptionsModalVisible = false"></button>
 
+      </template>
 
+      <div class="d-flex justify-between align-center mb20">
 
+        <button class="btn lg" @click="handleRegistrationNavigation('휴가')">휴가신청</button>
 
+        <button class="btn lg" @click="handleRegistrationNavigation('출장')">출장신청</button>
 
       </div>
 
-      <button class="close-btn" @click="isOptionsModalVisible = false">
 
-        <CloseCircleFilled />
 
-      </button>
 
-    </div>
 
-  </div>
 
+      <!-- <template #footer>
 
+        <button class="btn sm primary" @click="isOptionsModalVisible = false">닫기</button>
 
+      </template> -->
 
+    </Modal>
 
 </template>
 
 <script>
 
-import { SearchOutlined, CloseCircleFilled } from '@ant-design/icons-vue';
 
 import Pagination from '../../../component/Pagination.vue';
 
+import Modal from '../../../component/modal/Modal.vue';
 
 // API
 
 import { findMyApprovalRequestsProc } from '../../../../resources/api/sanctns';
 
 
 export default {
 
   components: {
 
-    SearchOutlined, CloseCircleFilled,
 
+    Modal,
 
     Pagination,
 
   },
Add a comment
List