Commit @5a9a27627db44cdd3fa46bc7647362735bd68ea8

류윤주 07-22

250722 류윤주 수정

@5a9a27627db44cdd3fa46bc7647362735bd68ea8

3da4041

5a9a276

client/resources/scss/admin/content.scss

--- client/resources/scss/admin/content.scss

+++ client/resources/scss/admin/content.scss


         padding-top: 30rem;
 
         .card-body {
-
             background-color: #fff;
             margin: 0 auto;
             width: 600px;

 
 }
 
-.side-content{
+.side-content {
     width: 400px;
     height: 100%;
     @include flex-layout(flex, flex-start, space-between, column);
     margin-right: 20px;
-        .myinfo {
-            width: 100%;
-            text-align: center;
-            padding: 25px 20px 20px 20px;
-            margin-bottom: 20px;
-            border-radius: 20px;
-            background: linear-gradient(to bottom, #1F3F99, #3354CE);
+
+    .myinfo {
+        width: 100%;
+        text-align: center;
+        padding: 25px 20px 20px 20px;
+        margin-bottom: 20px;
+        border-radius: 20px;
+        background: linear-gradient(to bottom, #1F3F99, #3354CE);
 
         .name-box {
             margin-bottom: 30px;

 
     }
 
-        .boxs {
+    .boxs {
         background-color: #fff;
         border-radius: 20px;
         padding: 20px;

 }
 
 .sidemenu {
-    width: 350px;
+    width: 250px;
     margin-right: 20px;
+    .myinfo {
+        width: 100%;
+        text-align: center;
+        padding: 25px 20px 20px 20px;
+        margin-bottom: 20px;
+        border-radius: 20px;
+        background: linear-gradient(to bottom, #1F3F99, #3354CE);
 
+        .name-box {
+            margin-bottom: 30px;
+
+            .img-area {
+                margin: 0 auto;
+                width: 165px;
+
+                .name {
+                    font-size: 25px;
+                    font-weight: 700;
+                    color: #fff;
+                }
+
+                .info {
+                    background-color: #0A216D;
+                    border-radius: 100px;
+                    display: flex;
+                    align-items: center;
+                    gap: 10px;
+                    justify-content: center;
+
+                    p {
+                        color: #fff;
+                        font-size: 15px;
+                    }
+                }
+            }
+        }
+
+        .info-box {
+            background-color: #fff;
+            border-radius: 15px;
+            display: flex;
+            justify-content: space-between;
+
+            li {
+                text-align: center;
+                border-right: 1px solid #E7EAF4;
+                width: 25%;
+
+                p {
+                    font-size: 35px;
+                    font-weight: 700;
+                    margin: 20px 0;
+                }
+            }
+
+            li:last-child {
+                border: 0;
+            }
+
+            .name {
+                text-align: center;
+                display: flex;
+                justify-content: center;
+                justify-self: center;
+                margin-bottom: 12px;
+                width: 58px;
+                height: 25px;
+                font-size: 16px;
+                font-weight: 700;
+                background-color: #999999;
+                color: #fff;
+                border-radius: 100px;
+            }
+
+            .name.yellow {
+                background-color: #EDAB0C;
+            }
+
+            .name.blue {
+                background-color: #1D75E1;
+            }
+
+            .name.red {
+                background-color: #E92727;
+            }
+        }
+    }
 
 
     .menu-box {

 
         }
     }
-    .menu-box.danil{
-        a{display: block;
+
+    .menu-box.danil {
+        a {
+            display: block;
             cursor: pointer;
             border: 1px solid #213F9A;
             color: #000;
-           
+
             font-size: 17px;
             text-align: left;
             padding: 10px 15px;
             border-radius: 10px;
             margin-bottom: 10px;
-            li{
+
+            li {
                 display: flex;
                 justify-content: space-between;
                 margin-bottom: 0px;
+
                 .icon {
                     display: none;
                 }
             }
         }
-        a.active-link{
+
+        a.active-link {
             background: #213F9A;
-            li{
-                p{
+
+            li {
+                p {
                     color: #fff;
                 }
+
                 .icon {
                     display: block;
                 }

                 gap: 25px;
                 align-items: center;
                 justify-content: center;
-                margin-top: 10px;
+                margin-top: 13px;
 
                 i.fa-bars {
                     display: block;

     }
 
     .card {
+        height: 100%;
         .color-boxs {
             display: flex;
             justify-content: space-between;

                 background-color: #EFF1FA;
                 border-radius: 20px;
                 align-items: center;
-    justify-content: center;
-    display: flex;
-                
+                justify-content: center;
+                display: flex;
+
 
                 .img {
                     position: relative;

                     width: 92px;
                     height: 110px;
                     padding: 8px;
+
                     .close-btn {
                         position: absolute;
                         top: 0;
                         right: 10px;
                     }
+
                     img {
-                       
+
                         object-fit: cover;
                         width: 100%;
                         height: 100%;
                     }
                 }
             }
-            .img-area.column{
+
+            .img-area.column {
                 flex-direction: column;
             }
 

             }
         }
 
-        .tbl-wrap {
-            table.buseo {
-                tbody {
-                    tr {
-                        cursor: pointer;
-                    }
-                }
-            }
-
-            th,
-            td {
-                text-align: center !important;
-                font-size: 16px !important;
-            }
-
-            .status-approved {
-                color: #1D75E1;
-                font-weight: 700;
-            }
-
-            .status-pending {
-                color: #E92727;
-                font-weight: 700;
-            }
-            .status-green {
-                color: #219A8C;
-                font-weight: 700;
-            }
-
-            .expired td {
-                background-color: #F6F6F6;
-                /* 연회색 배경 */
-                filter: grayscale(50%);
-                opacity: 0.6;
-            }
-        }
-
         p.require {
             text-align: right;
 

         }
 
         .card-body {
+            height: 100%;
             .flex {
                 display: flex;
                 align-items: center;
             }
-            .align-top{align-items: flex-start;}
+
+            .align-top {
+                align-items: flex-start;
+            }
+
             .flex.sb {
                 justify-content: space-between;
             }

                     margin-bottom: 0;
                 }
             }
+
             .sch-form-wrap.search {
                 position: relative;
                 flex-direction: column;

                 margin-right: 20px;
                 width: 420px;
                 height: 78rem;
-                .sidemenu{max-height: 66rem; overflow-y: auto;}
-                details{
+
+                .sidemenu {
+                    max-height: 66rem;
+                    overflow-y: auto;
+                }
+
+                details {
                     width: 100%;
-                    summary{
+
+                    summary {
                         border: 0;
                         align-items: center;
                         justify-content: flex-start;
                         gap: 5px;
-                        .icon{display: block;}
-                        p{color: #213F9A; font-weight: 700; margin-right: 10px;}
+
+                        .icon {
+                            display: block;
+                        }
+
+                        p {
+                            color: #213F9A;
+                            font-weight: 700;
+                            margin-right: 10px;
+                        }
                     }
+
                     .arrow {
                         margin-right: 10px;
-                      }
-                      li{
+                    }
+
+                    li {
                         margin-left: 40px;
-                        a{
+
+                        a {
                             justify-content: flex-start;
                             align-items: center;
-                            img{margin-right: 10px;}
+
+                            img {
+                                margin-right: 10px;
+                            }
                         }
-                      }
-                     
-                }
-                details[open]>summary {
+                    }
 
                 }
-                .buttons{position: absolute; bottom: 40px;}
-                .input-group{
+
+                .buttons {
+                    position: absolute;
+                    bottom: 40px;
+                }
+
+                .input-group {
                     display: block;
                     margin-bottom: 20px;
                 }
-                table{
-                    width: 100%; 
-                    thead{
-                        
-                        th{
+
+                table {
+                    width: 100%;
+
+                    thead {
+
+                        th {
                             background-color: #C7CFE3;
                             position: sticky;
                             top: -1px;

                         }
                     }
                 }
+
                 .table-scroll {
-  max-height: max-content; /* 원하는 높이 설정 */
-  overflow-y: auto;
-}
+                    max-height: max-content;
+                    /* 원하는 높이 설정 */
+                    overflow-y: auto;
+                }
             }
+
             form {
                 width: 100%;
                 border: 1px solid #C7CFE3;
                 border-radius: 10px;
                 overflow: hidden;
-                .second-label{
+
+                .second-label {
                     background-color: #fff !important;
                 }
-                
+
             }
-            form.salary{
+
+            form.salary {
                 display: flex;
-                .yearsalary{width: 100%;}
+
+                .yearsalary {
+                    width: 100%;
+                }
             }
+
             .col-12 {
                 min-height: 4rem;
                 width: 100%;
                 display: flex;
                 border-bottom: 1px solid #C7CFE3;
-               
+
                 label {
                     width: 140px;
                     background: #EFF1FA;

                     position: absolute;
                     right: -13px;
                     top: 0;
-                }
-
-                .d-flex {
-                    display: flex;
-                    flex-shrink: 0;
-                    align-items: center;
                 }
 
                 select,

 
                     table {
                         thead {
-                            tr{
+                            tr {
                                 th {
                                     border-right: 1px solid #C7CFE3;
                                     border-bottom: 1px solid #C7CFE3;
-                                  
+
                                 }
-    
+
                                 th:last-child {
                                     border-right: 0;
                                 }
                             }
-                           
+
                         }
 
                         tbody {

                                     margin: 0;
                                 }
 
-                                
+
                             }
 
                             td:last-child {

 
 
             }
-            .col-12.form-title{justify-content: center; background-color: #C7CFE3; font-weight: 600;
-                align-items: center; gap: 10px;
-                button{
 
-                }
+            .col-12.form-title {
+                justify-content: center;
+                background-color: #C7CFE3;
+                font-weight: 600;
+                align-items: center;
+                gap: 10px;
             }
+
             .col-12.return {
                 background-color: #FFF2F2 !important;
+
                 .form-label {
                     background-color: #FBC1C1;
                 }

 
                 }
             }
-            .tbl3{
-                th,td{border: 0; border-bottom: 0 !important;}
-                thead{
-                    background-color: #EFF1FA;
-                    th{padding: 10px;}
+
+            .tbl3 {
+
+                th,
+                td {
+                    border: 0;
+                    border-bottom: 0 !important;
                 }
-                tbody{
-                    td{padding: 0 10px;
-                        .form-select{width: -webkit-fill-available;}
+
+                thead {
+                    background-color: #EFF1FA;
+
+                    th {
+                        padding: 10px;
                     }
-                    tr:last-child td{border-bottom: 0;}
+                }
+
+                tbody {
+                    td {
+                        padding: 0 10px;
+
+                        .form-select {
+                            width: -webkit-fill-available;
+                        }
+                    }
+
+                    tr:last-child td {
+                        border-bottom: 0;
+                    }
                 }
             }
-            
+
 
         }
 

                 font-size: 18px;
                 font-weight: 700;
                 margin-right: 3rem;
-            }
-
-            .d-flex {
-                display: flex;
-                gap: 20px;
             }
 
             .col-12 {

     justify-content: center;
     line-height: 0 !important;
     cursor: pointer;
-align-items: center;
+    align-items: center;
+
     p {
         color: #000;
     }

 input[type="file"] {
     display: none;
 }
-input[type="date"]{
+
+input[type="date"] {
     width: 200px;
     padding-right: 10px;
 }
-input[type="button"]{
+
+input[type="button"] {
     width: 200px;
     background-color: #333;
     color: #fff;
     padding-right: 10px;
 }
+
 table {
-    thead{
-        .toptitle{
-            th{background-color: #B7C2ED !important;}
+    thead {
+        .toptitle {
+            th {
+                background-color: #B7C2ED !important;
+            }
         }
-        .middletitle{
-            th{background-color: #DAE0F7 !important;}
+
+        .middletitle {
+            th {
+                background-color: #DAE0F7 !important;
+            }
         }
-        th{
+
+        th {
             p {
                 background-color: #E92727;
                 border-radius: 5px;
                 color: #fff;
             }
-    
+
             p.green {
                 background-color: #219A8C;
             }
-    
+
             p.blue {
                 background-color: #1D75E1;
             }
         }
     }
-   
+
     th,
     td {
         border: 1px solid #C7CFE3;
         border-bottom: 1px solid #C7CFE3 !important;
     }
-    tbody{
-        tr{
-            th{background-color: var(--tk-secondary-5) !important; font-weight: 700 !important;}
+
+    tbody {
+        tr {
+            th {
+                background-color: var(--tk-secondary-5) !important;
+                font-weight: 700 !important;
+            }
         }
-        
+
     }
 }
 
-.chk-area{
-    .form-check{
+.chk-area {
+    .form-check {
         display: flex;
-            align-items: center;
-            justify-content: center;
+        align-items: center;
+        justify-content: center;
     }
-    label{padding-left: 30px !important; line-height: 0;}
-   
+
+    label {
+        padding-left: 30px !important;
+        line-height: 0;
+    }
+
 }
-label:focus, button:focus{
+
+label:focus,
+button:focus {
     outline: 0;
 }
-.input-radio{
-    .chk-area{
+
+.input-radio {
+    .chk-area {
         margin: 9px 0 9px 10px;
-        .form-check{
-            label{width: auto !important; line-height: 0 !important; background-color: #fff !important; border-right: 0 !important;}
+
+        .form-check {
+            label {
+                width: auto !important;
+                line-height: 0 !important;
+                background-color: #fff !important;
+                border-right: 0 !important;
+            }
         }
     }
 }
+
 .popup-overlay {
     position: fixed;
     top: 0;

     align-items: center;
     justify-content: center;
     z-index: 999;
-  }
-  
-  .popup-content {
+}
+
+.popup-content {
     position: relative;
     background: white;
     padding: 20px;
     border-radius: 10px;
-    
+
     text-align: center;
-    .form-control{margin: 0 !important;}
+
+    .form-control {
+        margin: 0 !important;
+    }
+
     .card-title {
         text-align: left;
     }
-    .ico-sch{
+
+    .ico-sch {
         right: 17px !important;
     }
-    table{
-        th,td{
-            
-    border-right: 1px solid #C7CFE3 !important;
+
+    table {
+
+        th,
+        td {
+
+            border-right: 1px solid #C7CFE3 !important;
         }
     }
-    .close-btn{
+
+    .close-btn {
         position: absolute;
         top: 20px;
         right: 20px;
     }
-    .btn.hyuga{background-color: #1D75E1;}
-    .btn.chuljang{background-color: #219A8C;}
-  }
 
-  .datepicker-conts {
+    .btn.hyuga {
+        background-color: #1D75E1;
+    }
+
+    .btn.chuljang {
+        background-color: #219A8C;
+    }
+}
+
+.datepicker-conts {
     margin-bottom: 20px;
 }
+
 .datepicker-input {
     display: flex;
     justify-content: end;

     }
 }
 
-.schedule-zone{
+.schedule-zone {
     @include flex-layout(flex, stretch);
     height: calc(100% - 311px);
     gap: 4rem;
-    .fc-direction-ltr{
+
+    .boxs {
         width: 550px;
+
+        ul {
+            height: 100%;
+            overflow-y: auto;
+
+            li {
+                padding: 1rem;
+                border: 1px solid #C7CFE3;
+                border-radius: 1rem;
+                margin-bottom: 1rem;
+
+                &:last-child {
+                    margin-bottom: 0;
+                }
+
+                div {
+                    @include flex-layout(flex, center);
+                }
+            }
+        }
     }
+
+    .fc-direction-ltr {
+        width: calc(100% - 590px);
+    }
+}
+
+.tbl-wrap {
+    table.buseo {
+        tbody {
+            tr {
+                cursor: pointer;
+            }
+        }
+    }
+
+    th,
+    td {
+        // text-align: center !important;
+        font-size: 16px !important;
+    }
+
+    .status-approved {
+        color: #1D75E1;
+        font-weight: 700;
+    }
+
+    .status-pending {
+        color: #E92727;
+        font-weight: 700;
+    }
+
+    .status-green {
+        color: #219A8C;
+        font-weight: 700;
+    }
+
+    .expired td {
+        background-color: #F6F6F6;
+        /* 연회색 배경 */
+        filter: grayscale(50%);
+        opacity: 0.6;
+    }
+}
+
+.d-flex{
+    @include flex-layout(flex, center);
+    gap: 1rem;
 }

3da4041

5a9a276

client/views/component/Table.vue

--- client/views/component/Table.vue

+++ client/views/component/Table.vue


       <div class="d-flex justify-content-end gap-1">
               <button
                 type="button"
-                class="btn btn-outline-primary"
+                class="btn sm btn-outline-primary"
                 @click="requestApproval"
               >
                 승인요청
               </button>
               <button
                 type="button"
-                class="btn btn-outline-secondary"
+                class="btn sm btn-outline-secondary"
                 @click="registerLeave"
               >
                 등록
               </button>
               <button
                 type="button"
-                class="btn btn-outline-success"
+                class="btn sm btn-outline-success"
                 @click="saveChanges"
               >
                 저장
               </button>
               <button
                 type="button"
-                class="btn btn-outline-danger"
+                class="btn sm btn-outline-danger"
                 @click="deletePending"
               >
                 삭제

3da4041

5a9a276

client/views/pages/Employee/ChuljangList.vue

--- client/views/pages/Employee/ChuljangList.vue

+++ client/views/pages/Employee/ChuljangList.vue


                     <option v-for="month in months" :key="month" :value="month">{{ month }}</option>
                   </select>
                 </div>
-                <button type="button" class="btn btn-outline-secondary col-xxl-5 col-xl-3"
+                <button type="button" class="btn sm btn-outline-secondary col-xxl-5 col-xl-3"
                   @click="filterData">조회</button>
 
               </div>
               <div class="d-flex justify-content-end ">
-                <button type="button" class="btn btn-outline-primary" @click="registerLeave">
+                <button type="button" class="btn sm btn-outline-primary" @click="registerLeave">
                   등록
                 </button>
-                <button type="button" class="btn btn-outline-success" @click="saveChanges">
+                <button type="button" class="btn sm btn-outline-success" @click="saveChanges">
                   저장
                 </button>
-                <button type="button" class="btn btn-outline-secondary" @click="deletePending">
+                <button type="button" class="btn sm btn-outline-secondary" @click="deletePending">
                   삭제
                 </button>
               </div>

3da4041

5a9a276

client/views/pages/Employee/HyugaList.vue

--- client/views/pages/Employee/HyugaList.vue

+++ client/views/pages/Employee/HyugaList.vue


       <!-- 해당년도 연차 수 -->
       <!-- 전체 -->
       <div class="col-xxl-2 col-md-3 mb-2">
-        <button type="button" class="btn btn-secondary ">
+        <button type="button" class="btn sm btn-secondary ">
           전체 <span class="badge bg-white text-secondary">12개</span>
         </button>
-        <button type="button" class="btn btn-success ">
+        <button type="button" class="btn sm btn-success ">
           사용 <span class="badge bg-white text-success">1개</span>
         </button>
-        <button type="button" class="btn btn-warning">
+        <button type="button" class="btn sm btn-warning">
           미사용 <span class="badge bg-white text-warning">1개</span>
         </button>
       </div>

                     <option v-for="month in months" :key="month" :value="month">{{ month }}</option>
                   </select>
                 </div>
-                <button type="button" class="btn btn-outline-secondary col-xxl-5 col-xl-3"
+                <button type="button" class="btn sm btn-outline-secondary col-xxl-5 col-xl-3"
                   @click="filterData">조회</button>
 
               </div>
               <div class="d-flex justify-content-end ">
-                <button type="button" class="btn btn-outline-secondary" @click="deletePending">
+                <button type="button" class="btn sm btn-outline-secondary" @click="deletePending">
                   삭제
                 </button>
               </div>

3da4041

5a9a276

client/views/pages/Employee/HyugaOk.vue

--- client/views/pages/Employee/HyugaOk.vue

+++ client/views/pages/Employee/HyugaOk.vue


       <!-- 해당년도 연차 수 -->
       <!-- 전체 -->
       <div class="col-xxl-2 col-md-3 mb-2">
-        <button type="button" class="btn btn-secondary ">
+        <button type="button" class="btn sm btn-secondary ">
           전체 <span class="badge bg-white text-secondary">12개</span>
         </button>
-        <button type="button" class="btn btn-success ">
+        <button type="button" class="btn sm btn-success ">
           사용 <span class="badge bg-white text-success">1개</span>
         </button>
-        <button type="button" class="btn btn-warning">
+        <button type="button" class="btn sm btn-warning">
           미사용 <span class="badge bg-white text-warning">1개</span>
         </button>
       </div>

                     <option v-for="month in months" :key="month" :value="month">{{ month }}</option>
                   </select>
                 </div>
-                <button type="button" class="btn btn-outline-secondary col-xxl-5 col-xl-3"
+                <button type="button" class="btn sm btn-outline-secondary col-xxl-5 col-xl-3"
                   @click="filterData">조회</button>
 
               </div>
               <div class="d-flex justify-content-end ">
-                <button type="button" class="btn btn-outline-secondary" @click="deletePending">
+                <button type="button" class="btn sm btn-outline-secondary" @click="deletePending">
                   삭제
                 </button>
               </div>

3da4041

5a9a276

client/views/pages/Manager/approval/ChuljangBokmyeong.vue

--- client/views/pages/Manager/approval/ChuljangBokmyeong.vue

+++ client/views/pages/Manager/approval/ChuljangBokmyeong.vue


               </form>
       </div>
       <div class="buttons">
-        <button class="btn primary" type="submit">승인</button>
-        <button class="btn  btn-red" type="submit" @click="showPopup = true">반려</button>
-        <button class="btn tertiary " type="submit">목록</button>
+        <button class="btn sm primary" type="submit">승인</button>
+        <button class="btn sm  btn-red" type="submit" @click="showPopup = true">반려</button>
+        <button class="btn sm tertiary " type="submit">목록</button>
       </div>
       <ReturnPopup v-if="showPopup" @close="showPopup = false" />
 

3da4041

5a9a276

client/views/pages/Manager/approval/ChuljangPumui.vue

--- client/views/pages/Manager/approval/ChuljangPumui.vue

+++ client/views/pages/Manager/approval/ChuljangPumui.vue


         </form>
       </div>
       <div class="buttons">
-        <button class="btn primary" type="submit">승인</button>
-        <button class="btn  btn-red" type="submit" @click="showPopup = true">반려</button>
-        <button class="btn tertiary " type="submit">목록</button>
+        <button class="btn sm primary" type="submit">승인</button>
+        <button class="btn sm  btn-red" type="submit" @click="showPopup = true">반려</button>
+        <button class="btn sm tertiary " type="submit">목록</button>
       </div>
       <ReturnPopup v-if="showPopup" @close="showPopup = false" />
 

3da4041

5a9a276

client/views/pages/Manager/approval/Hyuga.vue

--- client/views/pages/Manager/approval/Hyuga.vue

+++ client/views/pages/Manager/approval/Hyuga.vue


               </form>
       </div>
             <div class="buttons">
-              <button class="btn primary"  type="button">승인</button>
-              <button class="btn  btn-red"  type="button" @click="showPopup = true">반려</button>
-                <button class="btn tertiary "  type="button">목록</button>
+              <button class="btn sm primary"  type="button">승인</button>
+              <button class="btn sm  btn-red"  type="button" @click="showPopup = true">반려</button>
+                <button class="btn sm tertiary "  type="button">목록</button>
               </div>
               <ReturnPopup v-if="showPopup" @close="showPopup = false"/>
       </div>

3da4041

5a9a276

client/views/pages/Manager/approval/approvalRequest.vue

--- client/views/pages/Manager/approval/approvalRequest.vue

+++ client/views/pages/Manager/approval/approvalRequest.vue


         </div>
         <Pagenation :search="request" @onChange="fnChangeCurrentPage" />
         <div class="buttons">
-          <button type="button" class="btn sm primary" @click="showOptions = true"> 등록 </button>
+          <button type="button" class="btn sm sm primary" @click="showOptions = true"> 등록 </button>
         </div>
       </div>
     </div>

         <div class="card-body">
           <h2 class="card-title">신청종류선택</h2>
           <div class="buttons">
-            <button class="btn hyuga" @click="goToPage('휴가')">휴가신청</button>
-            <button class="btn chuljang" @click="goToPage('출장')">출장신청</button>
+            <button class="btn sm hyuga" @click="goToPage('휴가')">휴가신청</button>
+            <button class="btn sm chuljang" @click="goToPage('출장')">출장신청</button>
           </div>
         </div>
       </div>

3da4041

5a9a276

client/views/pages/Manager/asset/CardInfoManagement.vue

--- client/views/pages/Manager/asset/CardInfoManagement.vue

+++ client/views/pages/Manager/asset/CardInfoManagement.vue


           <div class=" sch-form-wrap title-wrap">
             <h3><img :src="h3icon" alt="">카드 정보</h3>
             <div class="buttons" style="margin: 0;">
-              <button type="submit" class="btn sm tertiary" @click="resetCard">신규</button>
-              <button type="reset" class="btn sm secondary" @click="insertByUpdateCard">
+              <button type="submit" class="btn sm sm tertiary" @click="resetCard">신규</button>
+              <button type="reset" class="btn sm sm secondary" @click="insertByUpdateCard">
                 {{ buttonText }}
               </button>
-              <button type="delete" class="btn sm btn-red" @click="deleteByUseAtCard">삭제</button>
+              <button type="delete" class="btn sm sm btn-red" @click="deleteByUseAtCard">삭제</button>
             </div>
           </div>
           <form class="row g-3 pt-3  needs-validation " @submit.prevent="handleSubmit" style="margin-bottom: 3rem;">

3da4041

5a9a276

client/views/pages/Manager/asset/VhcleInfoManagement.vue

--- client/views/pages/Manager/asset/VhcleInfoManagement.vue

+++ client/views/pages/Manager/asset/VhcleInfoManagement.vue


           <div class=" sch-form-wrap title-wrap">
             <h3><img :src="h3icon" alt="">차량 정보</h3>
             <div class="buttons" style="margin: 0;">
-              <button type="submit" class="btn sm tertiary" @click="resetVhcle">신규</button>
-              <button type="reset" class="btn sm secondary" @click="insertByUpdateVhcle">
+              <button type="submit" class="btn sm sm tertiary" @click="resetVhcle">신규</button>
+              <button type="reset" class="btn sm sm secondary" @click="insertByUpdateVhcle">
                 {{ buttonText }}
               </button>
-              <button type="delete" class="btn sm btn-red" @click="deleteByUseAtVhcle">삭제</button>
+              <button type="delete" class="btn sm sm btn-red" @click="deleteByUseAtVhcle">삭제</button>
             </div>
           </div>
           <form class="row g-3 pt-3  needs-validation " @submit.prevent="handleSubmit" style="margin-bottom: 3rem;">

3da4041

5a9a276

client/views/pages/Manager/attendance/BokmyeongInsert.vue

--- client/views/pages/Manager/attendance/BokmyeongInsert.vue

+++ client/views/pages/Manager/attendance/BokmyeongInsert.vue


 
       </form>
       <div class="buttons">
-        <button type="submit" class="btn primary">등록</button>
-        <button type="reset" class="btn secondary">취소</button>
+        <button type="submit" class="btn sm primary">등록</button>
+        <button type="reset" class="btn sm secondary">취소</button>
       </div>
 
     </div>

3da4041

5a9a276

client/views/pages/Manager/attendance/ChuljangBokmyeongDetail.vue

--- client/views/pages/Manager/attendance/ChuljangBokmyeongDetail.vue

+++ client/views/pages/Manager/attendance/ChuljangBokmyeongDetail.vue


               </form>
       </div>
       <div class="buttons">
-              <button class="btn primary"  type="submit">승인</button>
-              <button class="btn  btn-red"  type="submit" @click="showPopup = true">반려</button>
-              <button class="btn  btn-red"  type="submit">신청취소</button>
-                <button class="btn secondary"  type="submit">재신청</button>
-                <button class="btn secondary"  type="submit">수정</button>
-                <button class="btn tertiary "  type="submit">목록</button>
+              <button class="btn sm primary"  type="submit">승인</button>
+              <button class="btn sm  btn-red"  type="submit" @click="showPopup = true">반려</button>
+              <button class="btn sm  btn-red"  type="submit">신청취소</button>
+                <button class="btn sm secondary"  type="submit">재신청</button>
+                <button class="btn sm secondary"  type="submit">수정</button>
+                <button class="btn sm tertiary "  type="submit">목록</button>
               </div>
               <ReturnPopup v-if="showPopup" @close="showPopup = false"/>
 

3da4041

5a9a276

client/views/pages/Manager/attendance/ChuljangDetailAll.vue

--- client/views/pages/Manager/attendance/ChuljangDetailAll.vue

+++ client/views/pages/Manager/attendance/ChuljangDetailAll.vue


         </form>
       </div>
       <div class="buttons">
-        <button v-if="sanctnStatus === 'waiting' && sanctnStatus !== 'approved'" type="button" class="btn btn-red" @click="deleteData">신청취소</button>
-        <button v-if="sanctnStatus === 'waiting'" type="button" class="btn secondary" @click="fnMoveTo('edit', pageId)">수정</button>
-        <button v-if="sanctnStatus === 'rejected'" type="button" class="btn secondary" @click="fnMoveTo('edit', pageId)">재신청</button>
-        <button v-if="sanctnStatus === 'approved'" type="button" class="btn primary" @click="fnMoveTo('plus', pageId)">복명서 작성</button>
-        <button type="button" class="btn tertiary" @click="fnMoveTo('list')">목록</button>
+        <button v-if="sanctnStatus === 'waiting' && sanctnStatus !== 'approved'" type="button" class="btn sm btn-red" @click="deleteData">신청취소</button>
+        <button v-if="sanctnStatus === 'waiting'" type="button" class="btn sm secondary" @click="fnMoveTo('edit', pageId)">수정</button>
+        <button v-if="sanctnStatus === 'rejected'" type="button" class="btn sm secondary" @click="fnMoveTo('edit', pageId)">재신청</button>
+        <button v-if="sanctnStatus === 'approved'" type="button" class="btn sm primary" @click="fnMoveTo('plus', pageId)">복명서 작성</button>
+        <button type="button" class="btn sm tertiary" @click="fnMoveTo('list')">목록</button>
       </div>
     </div>
   </div>

3da4041

5a9a276

client/views/pages/Manager/attendance/ChuljangInsert.vue

--- client/views/pages/Manager/attendance/ChuljangInsert.vue

+++ client/views/pages/Manager/attendance/ChuljangInsert.vue


     <div class="card-body">
       <h2 class="card-title">출장 신청</h2>
       <p class="require"><img :src="require" alt=""> 필수입력</p>
-      <form class="row g-3 pt-3  needs-validation" @submit.prevent="handleSubmit">
-        <div class="col-12">
-          <label for="where" class="form-label">
-            <p>출장구분 <span class="require"><img :src="require" alt=""></span></p>
-          </label>
-          <select class="form-select" style="width: 110px;" v-model="bsrpInfo.bsrpSe">
-            <option v-for="(item, idx) of cmmnCodes.bsrpCodeList" :key="idx" :value="item.code">{{ item.codeNm }}</option>
-          </select>
-        </div>
-        <div class="col-12">
-          <label for="bsrpInfo.bsrpPlace" class="form-label">
-            <p>출장지 <span class="require"><img :src="require" alt=""></span></p>
-          </label>
-          <input type="text" class="form-control" id="bsrpInfo.bsrpPlace" v-model="bsrpInfo.bsrpPlace" />
-        </div>
-        <div class="col-12">
-          <label for="bsrpInfo.bsrpPurps" class="form-label">
-            <p>출장목적 <span class="require"><img :src="require" alt=""></span></p>
-          </label>
-          <input type="text" class="form-control" id="bsrpInfo.bsrpPurps" v-model="bsrpInfo.bsrpPurps" />
-        </div>
-        <div class="col-12">
-          <label for="where" class="form-label">
-            <p>출장기간 <span class="require"><img :src="require" alt=""></span></p>
-          </label>
-          <div class="d-flex gap-1">
-            <input type="date" class="form-control" id="bsrpInfo.bgnde" v-model="bsrpInfo.bgnde" />
-            <input type="text" class="form-control" id="bsrpInfo.beginHour" v-model="bsrpInfo.beginHour" style="width: 100px;" placeholder="시" />
-            <input type="text" class="form-control" id="bsrpInfo.beginMnt" v-model="bsrpInfo.beginMnt" style="width: 100px;" placeholder="분" />
-          </div>
-          <div class="d-flex gap-1">
-            <input type="date" class="form-control" id="bsrpInfo.endde" v-model="bsrpInfo.endde" />
-            <input type="text" class="form-control" id="bsrpInfo.endHour" v-model="bsrpInfo.endHour" style="width: 100px;" placeholder="시" />
-            <input type="text" class="form-control" id="bsrpInfo.endMnt" v-model="bsrpInfo.endMnt" style="width: 100px;" placeholder="분" />
-          </div>
-        </div>
-        <div class="col-12">
-          <label for="totalDays" class="form-label">일수</label>
-          <input type="text" class="form-control" id="totalDays" v-model="totalDays" readonly />
-        </div>
-        <div class="col-12">
-          <label for="purpose" class="form-label">동행자 <button type="button" title="추가" @click="isOpenNmprModal = true">
-              <PlusCircleFilled />
-            </button>
-          </label>
-          <HrPopup v-if="isOpenNmprModal" :lists="bsrpInfo.bsrpNmprList" @onSelected="fnAddNmpr" @close="isOpenNmprModal = false" />
-          <div class="approval-container">
-            <div v-for="(item, idx) of bsrpInfo.bsrpNmprList" :key="idx" class="d-flex addapproval">
-              <div class="d-flex align-items-center border-x">
-                <p>{{ item.triperNm }} {{ item.clsfNm }}</p>
-                <button type="button" @click="fnDelNmpr(idx)" @mousedown.stop>
-                  <CloseOutlined />
+      <div class="tbl-wrap">
+        <table class="tbl data">
+          <tbody>
+            <tr>
+              <th>출장구분 <span class="require"><img :src="require" alt=""></span></th>
+              <td>
+                <select class="form-select sm" style="width: 110px;" v-model="bsrpInfo.bsrpSe">
+                  <option v-for="(item, idx) of cmmnCodes.bsrpCodeList" :key="idx" :value="item.code">
+                    {{ item.codeNm }}
+                  </option>
+                </select>
+              </td>
+              <th>일수</th>
+              <td>
+                <input type="text" class="form-control sm" v-model="totalDays" readonly />
+              </td>
+            </tr>
+
+            <tr>
+              <th>출장지 <span class="require"><img :src="require" alt=""></span></th>
+              <td>
+                <input type="text" class="form-control sm" v-model="bsrpInfo.bsrpPlace" />
+              </td>
+               <th>출장목적 <span class="require"><img :src="require" alt=""></span></th>
+              <td>
+                <input type="text" class="form-control sm" v-model="bsrpInfo.bsrpPurps" />
+              </td>
+            </tr>
+
+            <tr>
+              <th>출장기간 <span class="require"><img :src="require" alt=""></span></th>
+              <td colspan="3">
+                <div class="d-flex">
+                  <div class="d-flex gap-1 mb-1">
+                    <input type="date" class="form-control sm" v-model="bsrpInfo.bgnde" />
+                    <input type="text" class="form-control sm" style="width: 100px;" placeholder="시" v-model="bsrpInfo.beginHour" />
+                    <input type="text" class="form-control sm" style="width: 100px;" placeholder="분" v-model="bsrpInfo.beginMnt" />
+                  </div>
+                  <div class="d-flex gap-1">
+                    <input type="date" class="form-control sm" v-model="bsrpInfo.endde" />
+                    <input type="text" class="form-control sm" style="width: 100px;" placeholder="시" v-model="bsrpInfo.endHour" />
+                    <input type="text" class="form-control sm" style="width: 100px;" placeholder="분" v-model="bsrpInfo.endMnt" />
+                  </div>
+                </div>
+              </td>
+            </tr>
+
+
+            <tr>
+              <th>
+                동행자
+              </th>
+              <td>
+                <button type="button" title="추가" @click="isOpenNmprModal = true">
+                  <PlusCircleFilled />
                 </button>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div class="col-12">
-          <label for="member" class="form-label">
-            <p>승인자 <span class="require"><img :src="require" alt=""></span></p>
-            <button type="button" title="추가" @click="isOpenSanctnModal = true">
-              <PlusCircleFilled />
-            </button>
-          </label>
-          <HrPopup v-if="isOpenSanctnModal" :lists="bsrpCnsul.sanctnList" @onSelected="fnAddSanctn" @close="isOpenSanctnModal = false" />
-          <div class="approval-container">
-            <SanctnList v-model:lists="bsrpCnsul.sanctnList" @delSanctn="fnDelSanctn" />
-          </div>
-        </div>
-        <div class="col-12">
-          <label for="prvonsh" class="form-label">
-            <p>품의내용 <span class="require"><img :src="require" alt=""></span></p>
-          </label>
-          <EditorComponent v-model:contents="bsrpCnsul.cn" />
-        </div>
-        <div class="col-12">
-          <label for="purpose" class="form-label">
-            <span>법인카드</span>
-            <button type="button" title="추가" @click="isOpenCardModal = true">
-              <PlusCircleFilled />
-            </button>
-          </label>
-          <CorpCardPopup v-if="isOpenCardModal" :bsrpInfo="bsrpInfo" :lists="cprCardList" @close="isOpenCardModal = false" @onSelected="fnAddCard" />
-          <div class="approval-container">
-            <div v-for="(card, idx) in cprCardList" :key="idx" class="d-flex gap-2 addapproval mb-2">
-              <form class="d-flex align-items-center border-x">
-                <p>{{ card.cardNm }}</p>
-                <button type="button" @click="fnDelCard(idx)" class="delete-button">
-                  <CloseOutlined />
+                <HrPopup v-if="isOpenNmprModal" :lists="bsrpInfo.bsrpNmprList" @onSelected="fnAddNmpr" @close="isOpenNmprModal = false" />
+                <div class="approval-container">
+                  <div v-for="(item, idx) of bsrpInfo.bsrpNmprList" :key="idx" class="d-flex addapproval">
+                    <div class="d-flex align-items-center border-x">
+                      <p>{{ item.triperNm }} {{ item.clsfNm }}</p>
+                      <button type="button" @click="fnDelNmpr(idx)" @mousedown.stop>
+                        <CloseOutlined />
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              </td>
+              <th>
+                승인자 <span class="require"><img :src="require" alt=""></span>
+              </th>
+              <td>
+                <button type="button" title="추가" @click="isOpenSanctnModal = true">
+                  <PlusCircleFilled />
                 </button>
-              </form>
-            </div>
-          </div>
-        </div>
-        <div class="col-12 border-x">
-          <label for="purpose" class="form-label">
-            <span>법인차량</span>
-            <button type="button" title="추가" @click="isOpenVhcleModal = true">
-              <PlusCircleFilled />
-            </button>
-          </label>
-          <CorpCarPopup v-if="isOpenVhcleModal" :bsrpInfo="bsrpInfo" :lists="cprVhcleList" @close="isOpenVhcleModal = false" @onSelected="fnAddVhcle" />
-          <div class="approval-container">
-            <div v-for="(vhcle, idx) in cprVhcleList" :key="idx" class="d-flex gap-2 addapproval mb-2">
-              <p>{{ vhcle.vhcleNm }}</p>
-              <select class="form-select" v-model="vhcle.drverId">
-                <option value="" disabled hidden>운전자 선택</option>
-                <option :value="userInfo.userId">{{ userInfo.userNm }}</option>
-                <option v-for="(item, idx) of bsrpInfo.bsrpNmprList" :key="idx" :value="item.userId">{{ item.userNm }}</option>
-              </select>
-              <button type="button" @click="fnDelVhcle(idx)" class="delete-button">
-                <CloseOutlined />
-              </button>
-            </div>
-          </div>
-        </div>
-      </form>
+                <HrPopup v-if="isOpenSanctnModal" :lists="bsrpCnsul.sanctnList" @onSelected="fnAddSanctn" @close="isOpenSanctnModal = false" />
+                <div class="approval-container">
+                  <SanctnList v-model:lists="bsrpCnsul.sanctnList" @delSanctn="fnDelSanctn" />
+                </div>
+              </td>
+            </tr>
+            <tr>
+              <th>품의내용 <span class="require"><img :src="require" alt=""></span></th>
+              <td colspan="3"  style="height: calc(100% - 550px);">
+                <EditorComponent v-model:contents="bsrpCnsul.cn" />
+              </td>
+            </tr>
+            <tr>
+              <th>
+                법인카드
+                <button type="button" title="추가" @click="isOpenCardModal = true">
+                  <PlusCircleFilled />
+                </button>
+              </th>
+              <td>
+                <CorpCardPopup v-if="isOpenCardModal" :bsrpInfo="bsrpInfo" :lists="cprCardList" @close="isOpenCardModal = false" @onSelected="fnAddCard" />
+                <div class="approval-container">
+                  <div v-for="(card, idx) in cprCardList" :key="idx" class="d-flex gap-2 addapproval mb-2">
+                    <form class="d-flex align-items-center border-x">
+                      <p>{{ card.cardNm }}</p>
+                      <button type="button" @click="fnDelCard(idx)" class="delete-button">
+                        <CloseOutlined />
+                      </button>
+                    </form>
+                  </div>
+                </div>
+              </td>
+              <th>
+                법인차량
+                <button type="button" title="추가" @click="isOpenVhcleModal = true">
+                  <PlusCircleFilled />
+                </button>
+              </th>
+              <td>
+                <CorpCarPopup v-if="isOpenVhcleModal" :bsrpInfo="bsrpInfo" :lists="cprVhcleList" @close="isOpenVhcleModal = false" @onSelected="fnAddVhcle" />
+                <div class="approval-container">
+                  <div v-for="(vhcle, idx) in cprVhcleList" :key="idx" class="d-flex gap-2 addapproval mb-2">
+                    <p>{{ vhcle.vhcleNm }}</p>
+                    <select class="form-select" v-model="vhcle.drverId">
+                      <option value="" disabled hidden>운전자 선택</option>
+                      <option :value="userInfo.userId">{{ userInfo.userNm }}</option>
+                      <option v-for="(item, idx) of bsrpInfo.bsrpNmprList" :key="idx" :value="item.userId">
+                        {{ item.userNm }}
+                      </option>
+                    </select>
+                    <button type="button" @click="fnDelVhcle(idx)" class="delete-button">
+                      <CloseOutlined />
+                    </button>
+                  </div>
+                </div>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+
       <div class="buttons">
-        <button type="button" class="btn primary" @click="fnSave">신청</button>
-        <button v-if="$isEmpty(pageId)" type="button" class="btn secondary" @click="fnMoveTo('list')">목록</button>
-        <button v-else type="button" class="btn secondary" @click="fnMoveTo('view', pageId)">취소</button>
+        <button type="button" class="btn sm sm primary" @click="fnSave">신청</button>
+        <button v-if="$isEmpty(pageId)" type="button" class="btn sm sm secondary" @click="fnMoveTo('list')">목록</button>
+        <button v-else type="button" class="btn sm sm secondary" @click="fnMoveTo('view', pageId)">취소</button>
       </div>
     </div>
   </div>

3da4041

5a9a276

client/views/pages/Manager/attendance/HyugaDetail.vue

--- client/views/pages/Manager/attendance/HyugaDetail.vue

+++ client/views/pages/Manager/attendance/HyugaDetail.vue


         </form>
       </div>
       <div class="buttons">
-        <button v-if="detailData.confmAt === 'W' || detailData.confmAt === 'R'" class="btn btn-red" type="button" @click="deleteData">신청취소</button>
-        <button v-if="detailData.confmAt === 'W'" class="btn secondary" type="button" @click="fnMoveTo('edit', pageId)">수정</button>
-        <button v-if="detailData.confmAt === 'R'" class="btn secondary" type="button" @click="fnMoveTo('edit', pageId)">재신청</button>
-        <button class="btn tertiary" type="button" @click="fnMoveTo('list')">목록</button>
+        <button v-if="detailData.confmAt === 'W' || detailData.confmAt === 'R'" class="btn sm btn-red" type="button" @click="deleteData">신청취소</button>
+        <button v-if="detailData.confmAt === 'W'" class="btn sm secondary" type="button" @click="fnMoveTo('edit', pageId)">수정</button>
+        <button v-if="detailData.confmAt === 'R'" class="btn sm secondary" type="button" @click="fnMoveTo('edit', pageId)">재신청</button>
+        <button class="btn sm tertiary" type="button" @click="fnMoveTo('list')">목록</button>
       </div>
       <ReturnPopup v-if="showPopup" @close="showPopup = false" />
     </div>

3da4041

5a9a276

client/views/pages/Manager/attendance/HyugaInsert.vue

--- client/views/pages/Manager/attendance/HyugaInsert.vue

+++ client/views/pages/Manager/attendance/HyugaInsert.vue


     <div class="card-body">
       <h2 class="card-title">휴가 신청</h2>
       <p class="require"><img :src="require" alt=""> 필수입력</p>
-      <div class="row g-3 needs-validation">
-        <div class="col-12">
-          <label for="inputName5" class="form-label">
-            <p>유형<span class="require"><img :src="require" alt=""></span></p>
-          </label>
-          <select class="form-select" style="max-width: 200px;" v-model="editData.vcatnKnd" @change="fnOnchangeVcatnKnd">
-            <option value="" disabled hidden>유형 선택</option>
-            <option v-for="(item, idx) of vcatnKnds" :key="idx" :value="item.code">{{ item.codeNm }}</option>
-          </select>
-        </div>
-        <div class="col-12">
-          <label for="bgnde" class="form-label">
-            <p>시작일<span class="require"><img :src="require" alt=""></span></p>
-          </label>
-          <div class="d-flex gap-1">
-            <input type="date" class="form-control" id="bgnde" v-model="editData.bgnde" @keydown="preventKeyboard" />
-            <input type="text" class="form-control" placeholder="시" style="width: 100px;" v-model="editData.beginHour" readonly />
-            <input type="text" class="form-control" placeholder="분" style="width: 100px;" v-model="editData.beginMnt" readonly />
-          </div>
-        </div>
-        <div class="col-12">
-          <label for="endde" class="form-label">
-            <p>종료일<span class="require"><img :src="require" alt=""></span></p>
-          </label>
-          <div class="d-flex gap-1">
-            <input type="date" class="form-control" id="endde" v-model="editData.endde" :readonly="dayCnt === 0.5" @keydown="preventKeyboard" />
-            <input type="text" class="form-control" placeholder="시" style="width: 100px;" v-model="editData.endHour" readonly />
-            <input type="text" class="form-control" placeholder="분" style="width: 100px;" v-model="editData.endMnt" readonly />
-          </div>
-        </div>
-        <div class="col-12">
-          <label for="totalDays" class="form-label">사용 휴가일</label>
-          <input type="text" class="form-control" id="totalDays" v-model="totalDays" readonly />
-        </div>
-        <div class="col-12">
-          <label for="member" class="form-label">
-            <span>승인자<span class="require"><img :src="require" alt=""></span></span>
-            <button type="button" title="추가" @click="isOpenModal = true">
-              <PlusCircleFilled />
-            </button>
-          </label>
-          <HrPopup v-if="isOpenModal" :lists="editData.sanctnList" @onSelected="fnAddSanctn" @close="isOpenModal = false" />
-          <div class="approval-container">
-            <SanctnList v-model:lists="editData.sanctnList" @delSanctn="fnDelSanctn" />
-          </div>
-        </div>
-        <div class="col-12 border-x hyuga">
-          <label for="prvonsh" class="form-label">세부사항</label>
-          <div>
-            <EditorComponent v-model:contents="editData.detailCn" />
-          </div>
-        </div>
+      <div class="tbl-wrap">
+        <table class="tbl data">
+          <tbody>
+            <tr>
+              <th scope="row">
+                유형 <span class="require"><img :src="require" alt=""></span>
+              </th>
+              <td>
+                <select class="form-select sm" style="max-width: 200px;" v-model="editData.vcatnKnd" @change="fnOnchangeVcatnKnd">
+                  <option value="" disabled hidden>유형 선택</option>
+                  <option v-for="(item, idx) of vcatnKnds" :key="idx" :value="item.code">{{ item.codeNm }}</option>
+                </select>
+              </td>
+            </tr>
+            <tr>
+              <th scope="row">
+                시작일 <span class="require"><img :src="require" alt=""></span>
+              </th>
+              <td>
+                <div class="d-flex gap-1">
+                  <input type="date" class="form-control sm" v-model="editData.bgnde" @keydown="preventKeyboard" />
+                  <input type="text" class="form-control sm" placeholder="시" style="width: 100px;" v-model="editData.beginHour" readonly />
+                  <input type="text" class="form-control sm" placeholder="분" style="width: 100px;" v-model="editData.beginMnt" readonly />
+                </div>
+              </td>
+            </tr>
+            <tr>
+              <th scope="row">
+                종료일 <span class="require"><img :src="require" alt=""></span>
+              </th>
+              <td>
+                <div class="d-flex gap-1">
+                  <input type="date" class="form-control sm" v-model="editData.endde" :readonly="dayCnt === 0.5" @keydown="preventKeyboard" />
+                  <input type="text" class="form-control sm" placeholder="시" style="width: 100px;" v-model="editData.endHour" readonly />
+                  <input type="text" class="form-control sm" placeholder="분" style="width: 100px;" v-model="editData.endMnt" readonly />
+                </div>
+              </td>
+            </tr>
+            <tr>
+              <th scope="row">사용 휴가일</th>
+              <td>
+                <input type="text" class="form-control sm" v-model="totalDays" readonly />
+              </td>
+            </tr>
+            <tr>
+              <th scope="row">
+                승인자 <span class="require"><img :src="require" alt=""></span>
+              </th>
+              <td>
+                <button type="button" title="추가" @click="isOpenModal = true">
+                  <PlusCircleFilled />
+                </button>
+                <HrPopup v-if="isOpenModal" :lists="editData.sanctnList" @onSelected="fnAddSanctn" @close="isOpenModal = false" />
+                <div class="approval-container">
+                  <SanctnList v-model:lists="editData.sanctnList" @delSanctn="fnDelSanctn" />
+                </div>
+              </td>
+            </tr>
+            <tr>
+              <th scope="row">세부사항</th>
+              <td>
+                <EditorComponent v-model:contents="editData.detailCn" />
+              </td>
+            </tr>
+          </tbody>
+        </table>
       </div>
+
       <div class="buttons">
-        <button type="button" class="btn btn-red" @click="fnRecord">이전 승인자 불러오기</button>
-        <button type="button" class="btn primary" @click="fnSave">신청</button>
-        <button type="button" class="btn tertiary" @click="fnMoveTo('list')">취소</button>
+        <button type="button" class="btn sm btn-red" @click="fnRecord">이전 승인자 불러오기</button>
+        <button type="button" class="btn sm primary" @click="fnSave">신청</button>
+        <button type="button" class="btn sm tertiary" @click="fnMoveTo('list')">취소</button>
       </div>
     </div>
   </div>

3da4041

5a9a276

client/views/pages/Manager/financial/employeeSalaryDetail.vue

--- client/views/pages/Manager/financial/employeeSalaryDetail.vue

+++ client/views/pages/Manager/financial/employeeSalaryDetail.vue


 
     </div>
     <div class="buttons">
-        <button type="submit" class="btn tertiary">목록</button>
+        <button type="submit" class="btn sm tertiary">목록</button>
       </div>
     </div>
     

3da4041

5a9a276

client/views/pages/Manager/financial/employeeSalaryInsert.vue

--- client/views/pages/Manager/financial/employeeSalaryInsert.vue

+++ client/views/pages/Manager/financial/employeeSalaryInsert.vue


 
           </form>
           <div class="buttons" style="margin: 10px 0;">
-        <button type="submit" class="btn btn-red sm">지난달 정보 불러오기</button>
-        <button type="submit" class="btn primary sm" @click="showPopup = true">출장비 조회</button>
+        <button type="submit" class="btn sm btn-red sm">지난달 정보 불러오기</button>
+        <button type="submit" class="btn sm primary sm" @click="showPopup = true">출장비 조회</button>
         <ChuljangListPopup v-if="showPopup" @close="showPopup = false" @select="addApproval" />
       </div>
           <form class="row g-3  needs-validation" @submit.prevent="handleSubmit">

         </div>
       </form>
     <div class="buttons">
-        <button type="submit" class="btn primary">등록</button>
-        <button type="submit" class="btn tertiary">취소</button>
+        <button type="submit" class="btn sm primary">등록</button>
+        <button type="submit" class="btn sm tertiary">취소</button>
       </div>
     </div>
     

3da4041

5a9a276

client/views/pages/Manager/financial/salaryList.vue

--- client/views/pages/Manager/financial/salaryList.vue

+++ client/views/pages/Manager/financial/salaryList.vue


                 <td>{{ formatCurrency(item.actual) }}</td>
                 <td>{{ item.payDate }}</td>
                 <td>
-                  <button class="btn secondary xsm" @click="showPopup = true">보기</button>
+                  <button class="btn sm secondary xsm" @click="showPopup = true">보기</button>
                 </td>
               </tr>
             </tbody>

3da4041

5a9a276

client/views/pages/Manager/hr/buseoManagement.vue

--- client/views/pages/Manager/hr/buseoManagement.vue

+++ client/views/pages/Manager/hr/buseoManagement.vue


                 <img :src="arrow" alt="" class="arrow">
                 <img :src="topmenuicon" alt="">
                 <p>{{ menu.title }} </p>
-                <button @click="addSubMenu(index)" class="btn xsm secondary">sub  +</button>
+                <button @click="addSubMenu(index)" class="btn sm xsm secondary">sub  +</button>
               </summary>
               <ul>
                 <li class="submenu" v-for="(submenu, subIndex) in menu.submenus" :key="subIndex">

           <div class=" sch-form-wrap title-wrap">
             <h3><img :src="h3icon" alt="">부서 정보</h3>
             <div class="buttons" style="margin: 0;">
-              <button type="submit" class="btn sm tertiary">초기화</button>
-              <button type="reset" class="btn sm secondary">등록</button>
-              <button type="delete" class="btn sm btn-red">삭제</button>
+              <button type="submit" class="btn sm sm tertiary">초기화</button>
+              <button type="reset" class="btn sm sm secondary">등록</button>
+              <button type="delete" class="btn sm sm btn-red">삭제</button>
             </div>
           </div>
           <form class="row g-3 pt-3  needs-validation detail" @submit.prevent="handleSubmit"

           <div class=" sch-form-wrap title-wrap">
             <h3><img :src="h3icon" alt="">부서 사용자</h3>
             <div class="buttons" style="margin: 0;">
-              <button type="reset" class="btn sm secondary" @click="showPopup = true">사용자 추가</button>
-              <button type="delete" class="btn sm btn-red" @click="removeMember(index)">사용자 삭제</button>
+              <button type="reset" class="btn sm sm secondary" @click="showPopup = true">사용자 추가</button>
+              <button type="delete" class="btn sm sm btn-red" @click="removeMember(index)">사용자 삭제</button>
             </div>
             <HrPopup v-if="showPopup" @close="showPopup = false" @select="addMember"/>
           </div>

3da4041

5a9a276

client/views/pages/Manager/hr/hrDetail.vue

--- client/views/pages/Manager/hr/hrDetail.vue

+++ client/views/pages/Manager/hr/hrDetail.vue


             </div>
           </form>
           <div class="buttons">
-            <button type="delete" class="btn sm btn-red">탈퇴</button>
-        <button type="reset" class="btn sm secondary">수정</button>
-        <button type="submit" class="btn sm tertiary">목록</button>
+            <button type="delete" class="btn sm sm btn-red">탈퇴</button>
+        <button type="reset" class="btn sm sm secondary">수정</button>
+        <button type="submit" class="btn sm sm tertiary">목록</button>
       </div>
     </div>
 

3da4041

5a9a276

client/views/pages/Manager/hr/hrInsert.vue

--- client/views/pages/Manager/hr/hrInsert.vue

+++ client/views/pages/Manager/hr/hrInsert.vue


             </div>
           </form>
           <div class="buttons">
-        <button type="reset" class="btn sm primary">등록</button>
-        <button type="submit" class="btn sm tertiary">취소</button>
+        <button type="reset" class="btn sm sm primary">등록</button>
+        <button type="submit" class="btn sm sm tertiary">취소</button>
       </div>
     </div>
 

3da4041

5a9a276

client/views/pages/Manager/hr/hrManagement.vue

--- client/views/pages/Manager/hr/hrManagement.vue

+++ client/views/pages/Manager/hr/hrManagement.vue


       <td>{{ item.name }}</td>
       <td>{{ item.joinDate }}</td>
       <td>
-        <button class="btn tertiary xsm" @click.stop="resetPassword(item)">초기화</button>
+        <button class="btn sm tertiary xsm" @click.stop="resetPassword(item)">초기화</button>
       </td>
               </tr>
             </tbody>

           </ul>
         </div>
         <div class="buttons">
-                <button class="btn primary"  type="submit"  @click="goToPage('등록')">등록</button>
+                <button class="btn sm primary"  type="submit"  @click="goToPage('등록')">등록</button>
               </div>
       </div>
     </div>

3da4041

5a9a276

client/views/pages/Manager/system/commonCodeDetail.vue

--- client/views/pages/Manager/system/commonCodeDetail.vue

+++ client/views/pages/Manager/system/commonCodeDetail.vue


 
           </form>
           <div class="buttons">
-        <button type="submit" class="btn btn-red">삭제</button>
-        <button type="submit" class="btn secondary">수정</button>
-        <button type="reset" class="btn tertiary">목록</button>
+        <button type="submit" class="btn sm btn-red">삭제</button>
+        <button type="submit" class="btn sm secondary">수정</button>
+        <button type="reset" class="btn sm tertiary">목록</button>
       </div>
     </div>
 

3da4041

5a9a276

client/views/pages/Manager/system/commonCodeInsert.vue

--- client/views/pages/Manager/system/commonCodeInsert.vue

+++ client/views/pages/Manager/system/commonCodeInsert.vue


 
           </form>
           <div class="buttons">
-        <button type="submit" class="btn primary">등록</button>
-        <button type="reset" class="btn tertiary">취소</button>
+        <button type="submit" class="btn sm primary">등록</button>
+        <button type="reset" class="btn sm tertiary">취소</button>
       </div>
     </div>
 

3da4041

5a9a276

client/views/pages/Manager/system/commonCodeManagement.vue

--- client/views/pages/Manager/system/commonCodeManagement.vue

+++ client/views/pages/Manager/system/commonCodeManagement.vue


   </div>
       <!-- End Table -->
       <div class="buttons">
-    <button type="button" class="btn sm primary" @click="goToPage('등록') ">
+    <button type="button" class="btn sm sm primary" @click="goToPage('등록') ">
       등록
     </button>
 

3da4041

5a9a276

client/views/pages/Manager/system/userManagement.vue

--- client/views/pages/Manager/system/userManagement.vue

+++ client/views/pages/Manager/system/userManagement.vue


           <div class=" sch-form-wrap title-wrap">
             <h3><img :src="h3icon" alt="">권한 정보</h3>
             <div class="buttons" style="margin: 0;">
-              <button type="submit" class="btn sm tertiary">신규</button>
-              <button type="reset" class="btn sm secondary">등록</button>
-              <button type="delete" class="btn sm btn-red">삭제</button>
+              <button type="submit" class="btn sm sm tertiary">신규</button>
+              <button type="reset" class="btn sm sm secondary">등록</button>
+              <button type="delete" class="btn sm sm btn-red">삭제</button>
             </div>
           </div>
           <form class="row g-3 pt-3  needs-validation detail" @submit.prevent="handleSubmit"

3da4041

5a9a276

client/views/pages/Manager/task/meetingDetail.vue

--- client/views/pages/Manager/task/meetingDetail.vue

+++ client/views/pages/Manager/task/meetingDetail.vue


         </div>
       </form><!-- End Multi Columns Form -->
       <div class="buttons">
-        <button type="submit" class="btn secondary">수정</button>
-        <button type="submit" class="btn btn-red">삭제</button>
-        <button type="reset" class="btn tertiary">목록</button>
+        <button type="submit" class="btn sm secondary">수정</button>
+        <button type="submit" class="btn sm btn-red">삭제</button>
+        <button type="reset" class="btn sm tertiary">목록</button>
       </div>
     </div>
   </div>

3da4041

5a9a276

client/views/pages/Manager/task/meetingInsert.vue

--- client/views/pages/Manager/task/meetingInsert.vue

+++ client/views/pages/Manager/task/meetingInsert.vue


         </div>
       </form><!-- End Multi Columns Form -->
       <div class="buttons">
-        <button type="submit" class="btn primary">등록</button>
-        <button type="reset" class="btn tertiary">취소</button>
+        <button type="submit" class="btn sm primary">등록</button>
+        <button type="reset" class="btn sm tertiary">취소</button>
       </div>
     </div>
   </div>

3da4041

5a9a276

client/views/pages/Manager/task/projectDetail.vue

--- client/views/pages/Manager/task/projectDetail.vue

+++ client/views/pages/Manager/task/projectDetail.vue


 
       </form>
       <div class="buttons">
-        <button type="reset" class="btn secondary">수정</button>
-        <button type="delete" class="btn btn-red">삭제</button>
-        <button type="submit" class="btn tertiary">목록</button>
+        <button type="reset" class="btn sm secondary">수정</button>
+        <button type="delete" class="btn sm btn-red">삭제</button>
+        <button type="submit" class="btn sm tertiary">목록</button>
       </div>
       <div class=" sch-form-wrap title-wrap"><h3><img :src="h3icon" alt="">회의록 정보</h3></div>
       <div class="cost-statue">

         </ul>
       </div>
   <div class="buttons">
-    <button type="insert" class="btn primary sm" @click="goToPage('회의록 등록')">회의록 등록</button>
+    <button type="insert" class="btn sm primary sm" @click="goToPage('회의록 등록')">회의록 등록</button>
   </div>
 
     </div>

3da4041

5a9a276

client/views/pages/Manager/task/projectInsert.vue

--- client/views/pages/Manager/task/projectInsert.vue

+++ client/views/pages/Manager/task/projectInsert.vue


 
       </form>
       <div class="buttons">
-        <button type="submit" class="btn primary">등록</button>
-        <button type="reset" class="btn tertiary">취소</button>
+        <button type="submit" class="btn sm primary">등록</button>
+        <button type="reset" class="btn sm tertiary">취소</button>
       </div>
     </div>
   </div>

3da4041

5a9a276

client/views/pages/Manager/task/projectTuibDetail.vue

--- client/views/pages/Manager/task/projectTuibDetail.vue

+++ client/views/pages/Manager/task/projectTuibDetail.vue


         
         </div>
         <div class="buttons">
-            <button type="submit" class="btn tertiary">목록</button>
+            <button type="submit" class="btn sm tertiary">목록</button>
           </div>
     </div>
 </div>

3da4041

5a9a276

client/views/pages/User/Join.vue

--- client/views/pages/User/Join.vue

+++ client/views/pages/User/Join.vue


                 </div>
               </div>
               <div class="col-12">
-                <button class="btn btn-primary w-100"  type="submit">계정 생성</button>
+                <button class="btn sm btn-primary w-100"  type="submit">계정 생성</button>
               </div>
               <div class="col-12">
                 <p class="small mb-0">이미 계정이 있으신가요?  <router-link to="Login">로그인</router-link></p>

3da4041

5a9a276

client/views/pages/User/Login.vue

--- client/views/pages/User/Login.vue

+++ client/views/pages/User/Login.vue


                   </div>
 
                   <div class="box">
-                    <button class="btn" type="submit"><img :src="loginIcon" alt="로그인 아이콘">로그인</button>
+                    <button class="btn sm sm" type="submit"><img :src="loginIcon" alt="로그인 아이콘">로그인</button>
                   </div>
                 </form>
               </div>

3da4041

5a9a276

client/views/pages/User/MyPage.vue

--- client/views/pages/User/MyPage.vue

+++ client/views/pages/User/MyPage.vue


 
         </form>
         <div class="buttons">
-          <button class="btn btn-red " type="submit">회원탈퇴</button>
-          <button class="btn secondary " type="submit">수정</button>
+          <button class="btn sm btn-red " type="submit">회원탈퇴</button>
+          <button class="btn sm secondary " type="submit">수정</button>
         </div>
       </div>
     </div>

3da4041

5a9a276

client/views/pages/main/Main.vue

--- client/views/pages/main/Main.vue

+++ client/views/pages/main/Main.vue


             </div>
         </div>
         <div class="schedule-zone">
-            <GoogleCalendar />
             <div class="boxs">
                 <div class="title">
-                    <h2>오늘의 주요 일정</h2>
+                    <h2>오늘의 일정</h2>
                     <!-- <div class="sub">더보기<img :src="moreicon" alt=""></div> -->
                 </div>
+                <ul>
+                    <li v-for="(event, index) in todayEvents" :key="index">
+                       <div>
+                           <p class="category">{{ event.category }}</p>
+                            <p class="name">{{ event.name }}</p>
+                            <p class="position">{{ event.position }}</p>
+                            <p class="department">{{ event.department }}</p>
+                       </div>
+                    </li>
+                </ul>
             </div>
+            <GoogleCalendar />
         </div>
     </div>
 </template>

                 { category: '내부', name: '프로젝트2', startdate: '2025-05-01', enddate: '2025-04-30', status: '진행전' },
                 { category: '내부', name: '프로젝트2', startdate: '2025-05-01', enddate: '2025-04-30', status: '진행전' },
                 { category: '국가과제', name: '프로젝트2', startdate: '2025-05-01', enddate: '2025-04-30', status: '완료' }
+            ],
+            todayEvents: [
+            { name: '홍길동', position: '대리', department: '인사팀', category: '연차' },
+            { name: '김민수', position: '과장', department: '영업팀', category: '출장' },
+            { name: '이영희', position: '사원', department: '마케팅팀', category: '회의' },
+            { name: '박지훈', position: '팀장', department: '개발팀', category: '교육' },
             ]
         }
     },

Add a comment

Open 0
Closed 0

List

...	...	@@ -32,7 +32,7 @@
32	32	<td>
33	33	<button
34	34	type="button"
35		- class="btn sm secondary"
	35	+ class="btn sm sm secondary"
36	36	@click="selectPerson(item)"
37	37	>
38	38	선택

...	...	@@ -43,7 +43,7 @@
43	43	<td>
44	44	<button
45	45	type="button"
46		- class="btn sm secondary"
	46	+ class="btn sm sm secondary"
47	47	@click="selectPerson(item)"
48	48	>
49	49	선택

...	...	@@ -28,7 +28,7 @@
28	28	<td>{{ item.vhcty }}</td>
29	29	<td>{{ item.vhcleNo }}</td>
30	30	<td>
31		- <button type="button" class="btn sm secondary" @click="selectCar(item)" :disabled="isVhcleSelected(item.vhcleId)">선택</button>
	31	+ <button type="button" class="btn sm sm secondary" @click="selectCar(item)" :disabled="isVhcleSelected(item.vhcleId)">선택</button>
32	32	</td>
33	33	</tr>
34	34	</tbody>

...	...	@@ -26,7 +26,7 @@
26	26	<tr v-for="(item, idx) in items" :key="idx">
27	27	<td>{{ item.cardNm }}</td>
28	28	<td>
29		- <button type="button" class="btn sm secondary" @click="selectCard(item)" :disabled="isSelected(item.cardId)">선택</button>
	29	+ <button type="button" class="btn sm sm secondary" @click="selectCard(item)" :disabled="isSelected(item.cardId)">선택</button>
30	30	</td>
31	31	</tr>
32	32	</tbody>

...	...	@@ -32,7 +32,7 @@
32	32	<td>{{ item.deptNm }}</td>
33	33	<td>{{ item.userNm }}</td>
34	34	<td>
35		- <button type="button" class="btn sm secondary" @click="selectPerson(item)" :disabled="isUserSelected(item.userId)">선택</button>
	35	+ <button type="button" class="btn sm sm secondary" @click="selectPerson(item)" :disabled="isUserSelected(item.userId)">선택</button>
36	36	</td>
37	37	</tr>
38	38	</tbody>

...	...	@@ -6,7 +6,6 @@
6	6	padding-top: 30rem;
7	7
8	8	.card-body {
9		-
10	9	background-color: #fff;
11	10	margin: 0 auto;
12	11	width: 600px;
...	...	@@ -50,18 +49,19 @@
50	49
51	50	}
52	51
53		-.side-content{
	52	+.side-content {
54	53	width: 400px;
55	54	height: 100%;
56	55	@include flex-layout(flex, flex-start, space-between, column);
57	56	margin-right: 20px;
58		- .myinfo {
59		- width: 100%;
60		- text-align: center;
61		- padding: 25px 20px 20px 20px;
62		- margin-bottom: 20px;
63		- border-radius: 20px;
64		- background: linear-gradient(to bottom, #1F3F99, #3354CE);
	57	+
	58	+ .myinfo {
	59	+ width: 100%;
	60	+ text-align: center;
	61	+ padding: 25px 20px 20px 20px;
	62	+ margin-bottom: 20px;
	63	+ border-radius: 20px;
	64	+ background: linear-gradient(to bottom, #1F3F99, #3354CE);
65	65
66	66	.name-box {
67	67	margin-bottom: 30px;
...	...	@@ -249,7 +249,7 @@
249	249
250	250	}
251	251
252		- .boxs {
	252	+ .boxs {
253	253	background-color: #fff;
254	254	border-radius: 20px;
255	255	padding: 20px;
...	...	@@ -384,9 +384,95 @@
384	384	}
385	385
386	386	.sidemenu {
387		- width: 350px;
	387	+ width: 250px;
388	388	margin-right: 20px;
	389	+ .myinfo {
	390	+ width: 100%;
	391	+ text-align: center;
	392	+ padding: 25px 20px 20px 20px;
	393	+ margin-bottom: 20px;
	394	+ border-radius: 20px;
	395	+ background: linear-gradient(to bottom, #1F3F99, #3354CE);
389	396
	397	+ .name-box {
	398	+ margin-bottom: 30px;
	399	+
	400	+ .img-area {
	401	+ margin: 0 auto;
	402	+ width: 165px;
	403	+
	404	+ .name {
	405	+ font-size: 25px;
	406	+ font-weight: 700;
	407	+ color: #fff;
	408	+ }
	409	+
	410	+ .info {
	411	+ background-color: #0A216D;
	412	+ border-radius: 100px;
	413	+ display: flex;
	414	+ align-items: center;
	415	+ gap: 10px;
	416	+ justify-content: center;
	417	+
	418	+ p {
	419	+ color: #fff;
	420	+ font-size: 15px;
	421	+ }
	422	+ }
	423	+ }
	424	+ }
	425	+
	426	+ .info-box {
	427	+ background-color: #fff;
	428	+ border-radius: 15px;
	429	+ display: flex;
	430	+ justify-content: space-between;
	431	+
	432	+ li {
	433	+ text-align: center;
	434	+ border-right: 1px solid #E7EAF4;
	435	+ width: 25%;
	436	+
	437	+ p {
	438	+ font-size: 35px;
	439	+ font-weight: 700;
	440	+ margin: 20px 0;
	441	+ }
	442	+ }
	443	+
	444	+ li:last-child {
	445	+ border: 0;
	446	+ }
	447	+
	448	+ .name {
	449	+ text-align: center;
	450	+ display: flex;
	451	+ justify-content: center;
	452	+ justify-self: center;
	453	+ margin-bottom: 12px;
	454	+ width: 58px;
	455	+ height: 25px;
	456	+ font-size: 16px;
	457	+ font-weight: 700;
	458	+ background-color: #999999;
	459	+ color: #fff;
	460	+ border-radius: 100px;
	461	+ }
	462	+
	463	+ .name.yellow {
	464	+ background-color: #EDAB0C;
	465	+ }
	466	+
	467	+ .name.blue {
	468	+ background-color: #1D75E1;
	469	+ }
	470	+
	471	+ .name.red {
	472	+ background-color: #E92727;
	473	+ }
	474	+ }
	475	+ }
390	476
391	477
392	478	.menu-box {
...	...	@@ -424,32 +510,39 @@
424	510
425	511	}
426	512	}
427		- .menu-box.danil{
428		- a{display: block;
	513	+
	514	+ .menu-box.danil {
	515	+ a {
	516	+ display: block;
429	517	cursor: pointer;
430	518	border: 1px solid #213F9A;
431	519	color: #000;
432		-
	520	+
433	521	font-size: 17px;
434	522	text-align: left;
435	523	padding: 10px 15px;
436	524	border-radius: 10px;
437	525	margin-bottom: 10px;
438		- li{
	526	+
	527	+ li {
439	528	display: flex;
440	529	justify-content: space-between;
441	530	margin-bottom: 0px;
	531	+
442	532	.icon {
443	533	display: none;
444	534	}
445	535	}
446	536	}
447		- a.active-link{
	537	+
	538	+ a.active-link {
448	539	background: #213F9A;
449		- li{
450		- p{
	540	+
	541	+ li {
	542	+ p {
451	543	color: #fff;
452	544	}
	545	+
453	546	.icon {
454	547	display: block;
455	548	}
...	...	@@ -576,7 +669,7 @@
576	669	gap: 25px;
577	670	align-items: center;
578	671	justify-content: center;
579		- margin-top: 10px;
	672	+ margin-top: 13px;
580	673
581	674	i.fa-bars {
582	675	display: block;
...	...	@@ -647,6 +740,7 @@
647	740	}
648	741
649	742	.card {
	743	+ height: 100%;
650	744	.color-boxs {
651	745	display: flex;
652	746	justify-content: space-between;
...	...	@@ -729,9 +823,9 @@
729	823	background-color: #EFF1FA;
730	824	border-radius: 20px;
731	825	align-items: center;
732		- justify-content: center;
733		- display: flex;
734		-
	826	+ justify-content: center;
	827	+ display: flex;
	828	+
735	829
736	830	.img {
737	831	position: relative;
...	...	@@ -741,20 +835,23 @@
741	835	width: 92px;
742	836	height: 110px;
743	837	padding: 8px;
	838	+
744	839	.close-btn {
745	840	position: absolute;
746	841	top: 0;
747	842	right: 10px;
748	843	}
	844	+
749	845	img {
750		-
	846	+
751	847	object-fit: cover;
752	848	width: 100%;
753	849	height: 100%;
754	850	}
755	851	}
756	852	}
757		- .img-area.column{
	853	+
	854	+ .img-area.column {
758	855	flex-direction: column;
759	856	}
760	857
...	...	@@ -819,43 +916,6 @@
819	916	}
820	917	}
821	918
822		- .tbl-wrap {
823		- table.buseo {
824		- tbody {
825		- tr {
826		- cursor: pointer;
827		- }
828		- }
829		- }
830		-
831		- th,
832		- td {
833		- text-align: center !important;
834		- font-size: 16px !important;
835		- }
836		-
837		- .status-approved {
838		- color: #1D75E1;
839		- font-weight: 700;
840		- }
841		-
842		- .status-pending {
843		- color: #E92727;
844		- font-weight: 700;
845		- }
846		- .status-green {
847		- color: #219A8C;
848		- font-weight: 700;
849		- }
850		-
851		- .expired td {
852		- background-color: #F6F6F6;
853		- /* 연회색 배경 */
854		- filter: grayscale(50%);
855		- opacity: 0.6;
856		- }
857		- }
858		-
859	919	p.require {
860	920	text-align: right;
861	921
...	...	@@ -865,11 +925,16 @@
865	925	}
866	926
867	927	.card-body {
	928	+ height: 100%;
868	929	.flex {
869	930	display: flex;
870	931	align-items: center;
871	932	}
872		- .align-top{align-items: flex-start;}
	933	+
	934	+ .align-top {
	935	+ align-items: flex-start;
	936	+ }
	937	+
873	938	.flex.sb {
874	939	justify-content: space-between;
875	940	}
...	...	@@ -906,6 +971,7 @@
906	971	margin-bottom: 0;
907	972	}
908	973	}
	974	+
909	975	.sch-form-wrap.search {
910	976	position: relative;
911	977	flex-direction: column;
...	...	@@ -915,43 +981,67 @@
915	981	margin-right: 20px;
916	982	width: 420px;
917	983	height: 78rem;
918		- .sidemenu{max-height: 66rem; overflow-y: auto;}
919		- details{
	984	+
	985	+ .sidemenu {
	986	+ max-height: 66rem;
	987	+ overflow-y: auto;
	988	+ }
	989	+
	990	+ details {
920	991	width: 100%;
921		- summary{
	992	+
	993	+ summary {
922	994	border: 0;
923	995	align-items: center;
924	996	justify-content: flex-start;
925	997	gap: 5px;
926		- .icon{display: block;}
927		- p{color: #213F9A; font-weight: 700; margin-right: 10px;}
	998	+
	999	+ .icon {
	1000	+ display: block;
	1001	+ }
	1002	+
	1003	+ p {
	1004	+ color: #213F9A;
	1005	+ font-weight: 700;
	1006	+ margin-right: 10px;
	1007	+ }
928	1008	}
	1009	+
929	1010	.arrow {
930	1011	margin-right: 10px;
931		- }
932		- li{
	1012	+ }
	1013	+
	1014	+ li {
933	1015	margin-left: 40px;
934		- a{
	1016	+
	1017	+ a {
935	1018	justify-content: flex-start;
936	1019	align-items: center;
937		- img{margin-right: 10px;}
	1020	+
	1021	+ img {
	1022	+ margin-right: 10px;
	1023	+ }
938	1024	}
939		- }
940		-
941		- }
942		- details[open]>summary {
	1025	+ }
943	1026
944	1027	}
945		- .buttons{position: absolute; bottom: 40px;}
946		- .input-group{
	1028	+
	1029	+ .buttons {
	1030	+ position: absolute;
	1031	+ bottom: 40px;
	1032	+ }
	1033	+
	1034	+ .input-group {
947	1035	display: block;
948	1036	margin-bottom: 20px;
949	1037	}
950		- table{
951		- width: 100%;
952		- thead{
953		-
954		- th{
	1038	+
	1039	+ table {
	1040	+ width: 100%;
	1041	+
	1042	+ thead {
	1043	+
	1044	+ th {
955	1045	background-color: #C7CFE3;
956	1046	position: sticky;
957	1047	top: -1px;
...	...	@@ -960,31 +1050,40 @@
960	1050	}
961	1051	}
962	1052	}
	1053	+
963	1054	.table-scroll {
964		- max-height: max-content; /* 원하는 높이 설정 */
965		- overflow-y: auto;
966		-}
	1055	+ max-height: max-content;
	1056	+ /* 원하는 높이 설정 */
	1057	+ overflow-y: auto;
	1058	+ }
967	1059	}
	1060	+
968	1061	form {
969	1062	width: 100%;
970	1063	border: 1px solid #C7CFE3;
971	1064	border-radius: 10px;
972	1065	overflow: hidden;
973		- .second-label{
	1066	+
	1067	+ .second-label {
974	1068	background-color: #fff !important;
975	1069	}
976		-
	1070	+
977	1071	}
978		- form.salary{
	1072	+
	1073	+ form.salary {
979	1074	display: flex;
980		- .yearsalary{width: 100%;}
	1075	+
	1076	+ .yearsalary {
	1077	+ width: 100%;
	1078	+ }
981	1079	}
	1080	+
982	1081	.col-12 {
983	1082	min-height: 4rem;
984	1083	width: 100%;
985	1084	display: flex;
986	1085	border-bottom: 1px solid #C7CFE3;
987		-
	1086	+
988	1087	label {
989	1088	width: 140px;
990	1089	background: #EFF1FA;
...	...	@@ -1011,12 +1110,6 @@
1011	1110	position: absolute;
1012	1111	right: -13px;
1013	1112	top: 0;
1014		- }
1015		-
1016		- .d-flex {
1017		- display: flex;
1018		- flex-shrink: 0;
1019		- align-items: center;
1020	1113	}
1021	1114
1022	1115	select,
...	...	@@ -1082,18 +1175,18 @@
1082	1175
1083	1176	table {
1084	1177	thead {
1085		- tr{
	1178	+ tr {
1086	1179	th {
1087	1180	border-right: 1px solid #C7CFE3;
1088	1181	border-bottom: 1px solid #C7CFE3;
1089		-
	1182	+
1090	1183	}
1091		-
	1184	+
1092	1185	th:last-child {
1093	1186	border-right: 0;
1094	1187	}
1095	1188	}
1096		-
	1189	+
1097	1190	}
1098	1191
1099	1192	tbody {
...	...	@@ -1104,7 +1197,7 @@
1104	1197	margin: 0;
1105	1198	}
1106	1199
1107		-
	1200	+
1108	1201	}
1109	1202
1110	1203	td:last-child {
...	...	@@ -1122,14 +1215,18 @@
1122	1215
1123	1216
1124	1217	}
1125		- .col-12.form-title{justify-content: center; background-color: #C7CFE3; font-weight: 600;
1126		- align-items: center; gap: 10px;
1127		- button{
1128	1218
1129		- }
	1219	+ .col-12.form-title {
	1220	+ justify-content: center;
	1221	+ background-color: #C7CFE3;
	1222	+ font-weight: 600;
	1223	+ align-items: center;
	1224	+ gap: 10px;
1130	1225	}
	1226	+
1131	1227	.col-12.return {
1132	1228	background-color: #FFF2F2 !important;
	1229	+
1133	1230	.form-label {
1134	1231	background-color: #FBC1C1;
1135	1232	}
...	...	@@ -1266,20 +1363,38 @@
1266	1363
1267	1364	}
1268	1365	}
1269		- .tbl3{
1270		- th,td{border: 0; border-bottom: 0 !important;}
1271		- thead{
1272		- background-color: #EFF1FA;
1273		- th{padding: 10px;}
	1366	+
	1367	+ .tbl3 {
	1368	+
	1369	+ th,
	1370	+ td {
	1371	+ border: 0;
	1372	+ border-bottom: 0 !important;
1274	1373	}
1275		- tbody{
1276		- td{padding: 0 10px;
1277		- .form-select{width: -webkit-fill-available;}
	1374	+
	1375	+ thead {
	1376	+ background-color: #EFF1FA;
	1377	+
	1378	+ th {
	1379	+ padding: 10px;
1278	1380	}
1279		- tr:last-child td{border-bottom: 0;}
	1381	+ }
	1382	+
	1383	+ tbody {
	1384	+ td {
	1385	+ padding: 0 10px;
	1386	+
	1387	+ .form-select {
	1388	+ width: -webkit-fill-available;
	1389	+ }
	1390	+ }
	1391	+
	1392	+ tr:last-child td {
	1393	+ border-bottom: 0;
	1394	+ }
1280	1395	}
1281	1396	}
1282		-
	1397	+
1283	1398
1284	1399	}
1285	1400
...	...	@@ -1295,11 +1410,6 @@
1295	1410	font-size: 18px;
1296	1411	font-weight: 700;
1297	1412	margin-right: 3rem;
1298		- }
1299		-
1300		- .d-flex {
1301		- display: flex;
1302		- gap: 20px;
1303	1413	}
1304	1414
1305	1415	.col-12 {
...	...	@@ -1346,7 +1456,8 @@
1346	1456	justify-content: center;
1347	1457	line-height: 0 !important;
1348	1458	cursor: pointer;
1349		-align-items: center;
	1459	+ align-items: center;
	1460	+
1350	1461	p {
1351	1462	color: #000;
1352	1463	}
...	...	@@ -1366,74 +1477,101 @@
1366	1477	input[type="file"] {
1367	1478	display: none;
1368	1479	}
1369		-input[type="date"]{
	1480	+
	1481	+input[type="date"] {
1370	1482	width: 200px;
1371	1483	padding-right: 10px;
1372	1484	}
1373		-input[type="button"]{
	1485	+
	1486	+input[type="button"] {
1374	1487	width: 200px;
1375	1488	background-color: #333;
1376	1489	color: #fff;
1377	1490	padding-right: 10px;
1378	1491	}
	1492	+
1379	1493	table {
1380		- thead{
1381		- .toptitle{
1382		- th{background-color: #B7C2ED !important;}
	1494	+ thead {
	1495	+ .toptitle {
	1496	+ th {
	1497	+ background-color: #B7C2ED !important;
	1498	+ }
1383	1499	}
1384		- .middletitle{
1385		- th{background-color: #DAE0F7 !important;}
	1500	+
	1501	+ .middletitle {
	1502	+ th {
	1503	+ background-color: #DAE0F7 !important;
	1504	+ }
1386	1505	}
1387		- th{
	1506	+
	1507	+ th {
1388	1508	p {
1389	1509	background-color: #E92727;
1390	1510	border-radius: 5px;
1391	1511	color: #fff;
1392	1512	}
1393		-
	1513	+
1394	1514	p.green {
1395	1515	background-color: #219A8C;
1396	1516	}
1397		-
	1517	+
1398	1518	p.blue {
1399	1519	background-color: #1D75E1;
1400	1520	}
1401	1521	}
1402	1522	}
1403		-
	1523	+
1404	1524	th,
1405	1525	td {
1406	1526	border: 1px solid #C7CFE3;
1407	1527	border-bottom: 1px solid #C7CFE3 !important;
1408	1528	}
1409		- tbody{
1410		- tr{
1411		- th{background-color: var(--tk-secondary-5) !important; font-weight: 700 !important;}
	1529	+
	1530	+ tbody {
	1531	+ tr {
	1532	+ th {
	1533	+ background-color: var(--tk-secondary-5) !important;
	1534	+ font-weight: 700 !important;
	1535	+ }
1412	1536	}
1413		-
	1537	+
1414	1538	}
1415	1539	}
1416	1540
1417		-.chk-area{
1418		- .form-check{
	1541	+.chk-area {
	1542	+ .form-check {
1419	1543	display: flex;
1420		- align-items: center;
1421		- justify-content: center;
	1544	+ align-items: center;
	1545	+ justify-content: center;
1422	1546	}
1423		- label{padding-left: 30px !important; line-height: 0;}
1424		-
	1547	+
	1548	+ label {
	1549	+ padding-left: 30px !important;
	1550	+ line-height: 0;
	1551	+ }
	1552	+
1425	1553	}
1426		-label:focus, button:focus{
	1554	+
	1555	+label:focus,
	1556	+button:focus {
1427	1557	outline: 0;
1428	1558	}
1429		-.input-radio{
1430		- .chk-area{
	1559	+
	1560	+.input-radio {
	1561	+ .chk-area {
1431	1562	margin: 9px 0 9px 10px;
1432		- .form-check{
1433		- label{width: auto !important; line-height: 0 !important; background-color: #fff !important; border-right: 0 !important;}
	1563	+
	1564	+ .form-check {
	1565	+ label {
	1566	+ width: auto !important;
	1567	+ line-height: 0 !important;
	1568	+ background-color: #fff !important;
	1569	+ border-right: 0 !important;
	1570	+ }
1434	1571	}
1435	1572	}
1436	1573	}
	1574	+
1437	1575	.popup-overlay {
1438	1576	position: fixed;
1439	1577	top: 0;
...	...	@@ -1445,40 +1583,56 @@
1445	1583	align-items: center;
1446	1584	justify-content: center;
1447	1585	z-index: 999;
1448		- }
1449		-
1450		- .popup-content {
	1586	+}
	1587	+
	1588	+.popup-content {
1451	1589	position: relative;
1452	1590	background: white;
1453	1591	padding: 20px;
1454	1592	border-radius: 10px;
1455		-
	1593	+
1456	1594	text-align: center;
1457		- .form-control{margin: 0 !important;}
	1595	+
	1596	+ .form-control {
	1597	+ margin: 0 !important;
	1598	+ }
	1599	+
1458	1600	.card-title {
1459	1601	text-align: left;
1460	1602	}
1461		- .ico-sch{
	1603	+
	1604	+ .ico-sch {
1462	1605	right: 17px !important;
1463	1606	}
1464		- table{
1465		- th,td{
1466		-
1467		- border-right: 1px solid #C7CFE3 !important;
	1607	+
	1608	+ table {
	1609	+
	1610	+ th,
	1611	+ td {
	1612	+
	1613	+ border-right: 1px solid #C7CFE3 !important;
1468	1614	}
1469	1615	}
1470		- .close-btn{
	1616	+
	1617	+ .close-btn {
1471	1618	position: absolute;
1472	1619	top: 20px;
1473	1620	right: 20px;
1474	1621	}
1475		- .btn.hyuga{background-color: #1D75E1;}
1476		- .btn.chuljang{background-color: #219A8C;}
1477		- }
1478	1622
1479		- .datepicker-conts {
	1623	+ .btn.hyuga {
	1624	+ background-color: #1D75E1;
	1625	+ }
	1626	+
	1627	+ .btn.chuljang {
	1628	+ background-color: #219A8C;
	1629	+ }
	1630	+}
	1631	+
	1632	+.datepicker-conts {
1480	1633	margin-bottom: 20px;
1481	1634	}
	1635	+
1482	1636	.datepicker-input {
1483	1637	display: flex;
1484	1638	justify-content: end;
...	...	@@ -1495,11 +1649,79 @@
1495	1649	}
1496	1650	}
1497	1651
1498		-.schedule-zone{
	1652	+.schedule-zone {
1499	1653	@include flex-layout(flex, stretch);
1500	1654	height: calc(100% - 311px);
1501	1655	gap: 4rem;
1502		- .fc-direction-ltr{
	1656	+
	1657	+ .boxs {
1503	1658	width: 550px;
	1659	+
	1660	+ ul {
	1661	+ height: 100%;
	1662	+ overflow-y: auto;
	1663	+
	1664	+ li {
	1665	+ padding: 1rem;
	1666	+ border: 1px solid #C7CFE3;
	1667	+ border-radius: 1rem;
	1668	+ margin-bottom: 1rem;
	1669	+
	1670	+ &:last-child {
	1671	+ margin-bottom: 0;
	1672	+ }
	1673	+
	1674	+ div {
	1675	+ @include flex-layout(flex, center);
	1676	+ }
	1677	+ }
	1678	+ }
1504	1679	}
	1680	+
	1681	+ .fc-direction-ltr {
	1682	+ width: calc(100% - 590px);
	1683	+ }
	1684	+}
	1685	+
	1686	+.tbl-wrap {
	1687	+ table.buseo {
	1688	+ tbody {
	1689	+ tr {
	1690	+ cursor: pointer;
	1691	+ }
	1692	+ }
	1693	+ }
	1694	+
	1695	+ th,
	1696	+ td {
	1697	+ // text-align: center !important;
	1698	+ font-size: 16px !important;
	1699	+ }
	1700	+
	1701	+ .status-approved {
	1702	+ color: #1D75E1;
	1703	+ font-weight: 700;
	1704	+ }
	1705	+
	1706	+ .status-pending {
	1707	+ color: #E92727;
	1708	+ font-weight: 700;
	1709	+ }
	1710	+
	1711	+ .status-green {
	1712	+ color: #219A8C;
	1713	+ font-weight: 700;
	1714	+ }
	1715	+
	1716	+ .expired td {
	1717	+ background-color: #F6F6F6;
	1718	+ /* 연회색 배경 */
	1719	+ filter: grayscale(50%);
	1720	+ opacity: 0.6;
	1721	+ }
	1722	+}
	1723	+
	1724	+.d-flex{
	1725	+ @include flex-layout(flex, center);
	1726	+ gap: 1rem;
1505	1727	} (파일 끝에 줄바꿈 문자 없음)

...	...	@@ -6,28 +6,28 @@
6	6	<div class="d-flex justify-content-end gap-1">
7	7	<button
8	8	type="button"
9		- class="btn btn-outline-primary"
	9	+ class="btn sm btn-outline-primary"
10	10	@click="requestApproval"
11	11	>
12	12	승인요청
13	13	</button>
14	14	<button
15	15	type="button"
16		- class="btn btn-outline-secondary"
	16	+ class="btn sm btn-outline-secondary"
17	17	@click="registerLeave"
18	18	>
19	19	등록
20	20	</button>
21	21	<button
22	22	type="button"
23		- class="btn btn-outline-success"
	23	+ class="btn sm btn-outline-success"
24	24	@click="saveChanges"
25	25	>
26	26	저장
27	27	</button>
28	28	<button
29	29	type="button"
30		- class="btn btn-outline-danger"
	30	+ class="btn sm btn-outline-danger"
31	31	@click="deletePending"
32	32	>
33	33	삭제

...	...	@@ -26,18 +26,18 @@
26	26	<option v-for="month in months" :key="month" :value="month">{{ month }}</option>
27	27	</select>
28	28	</div>
29		- <button type="button" class="btn btn-outline-secondary col-xxl-5 col-xl-3"
	29	+ <button type="button" class="btn sm btn-outline-secondary col-xxl-5 col-xl-3"
30	30	@click="filterData">조회</button>
31	31
32	32	</div>
33	33	<div class="d-flex justify-content-end ">
34		- <button type="button" class="btn btn-outline-primary" @click="registerLeave">
	34	+ <button type="button" class="btn sm btn-outline-primary" @click="registerLeave">
35	35	등록
36	36	</button>
37		- <button type="button" class="btn btn-outline-success" @click="saveChanges">
	37	+ <button type="button" class="btn sm btn-outline-success" @click="saveChanges">
38	38	저장
39	39	</button>
40		- <button type="button" class="btn btn-outline-secondary" @click="deletePending">
	40	+ <button type="button" class="btn sm btn-outline-secondary" @click="deletePending">
41	41	삭제
42	42	</button>
43	43	</div>

...	...	@@ -8,13 +8,13 @@
8	8	<!-- 해당년도 연차 수 -->
9	9	<!-- 전체 -->
10	10	<div class="col-xxl-2 col-md-3 mb-2">
11		- <button type="button" class="btn btn-secondary ">
	11	+ <button type="button" class="btn sm btn-secondary ">
12	12	전체 <span class="badge bg-white text-secondary">12개</span>
13	13	</button>
14		- <button type="button" class="btn btn-success ">
	14	+ <button type="button" class="btn sm btn-success ">
15	15	사용 <span class="badge bg-white text-success">1개</span>
16	16	</button>
17		- <button type="button" class="btn btn-warning">
	17	+ <button type="button" class="btn sm btn-warning">
18	18	미사용 <span class="badge bg-white text-warning">1개</span>
19	19	</button>
20	20	</div>
...	...	@@ -39,12 +39,12 @@
39	39	<option v-for="month in months" :key="month" :value="month">{{ month }}</option>
40	40	</select>
41	41	</div>
42		- <button type="button" class="btn btn-outline-secondary col-xxl-5 col-xl-3"
	42	+ <button type="button" class="btn sm btn-outline-secondary col-xxl-5 col-xl-3"
43	43	@click="filterData">조회</button>
44	44
45	45	</div>
46	46	<div class="d-flex justify-content-end ">
47		- <button type="button" class="btn btn-outline-secondary" @click="deletePending">
	47	+ <button type="button" class="btn sm btn-outline-secondary" @click="deletePending">
48	48	삭제
49	49	</button>
50	50	</div>

...	...	@@ -84,9 +84,9 @@
84	84	</form>
85	85	</div>
86	86	<div class="buttons">
87		- <button class="btn primary" type="submit">승인</button>
88		- <button class="btn btn-red" type="submit" @click="showPopup = true">반려</button>
89		- <button class="btn tertiary " type="submit">목록</button>
	87	+ <button class="btn sm primary" type="submit">승인</button>
	88	+ <button class="btn sm btn-red" type="submit" @click="showPopup = true">반려</button>
	89	+ <button class="btn sm tertiary " type="submit">목록</button>
90	90	</div>
91	91	<ReturnPopup v-if="showPopup" @close="showPopup = false" />
92	92

...	...	@@ -87,9 +87,9 @@
87	87	</form>
88	88	</div>
89	89	<div class="buttons">
90		- <button class="btn primary" type="submit">승인</button>
91		- <button class="btn btn-red" type="submit" @click="showPopup = true">반려</button>
92		- <button class="btn tertiary " type="submit">목록</button>
	90	+ <button class="btn sm primary" type="submit">승인</button>
	91	+ <button class="btn sm btn-red" type="submit" @click="showPopup = true">반려</button>
	92	+ <button class="btn sm tertiary " type="submit">목록</button>
93	93	</div>
94	94	<ReturnPopup v-if="showPopup" @close="showPopup = false" />
95	95

...	...	@@ -65,9 +65,9 @@
65	65	</form>
66	66	</div>
67	67	<div class="buttons">
68		- <button class="btn primary" type="button">승인</button>
69		- <button class="btn btn-red" type="button" @click="showPopup = true">반려</button>
70		- <button class="btn tertiary " type="button">목록</button>
	68	+ <button class="btn sm primary" type="button">승인</button>
	69	+ <button class="btn sm btn-red" type="button" @click="showPopup = true">반려</button>
	70	+ <button class="btn sm tertiary " type="button">목록</button>
71	71	</div>
72	72	<ReturnPopup v-if="showPopup" @close="showPopup = false"/>
73	73	</div>

...	...	@@ -60,7 +60,7 @@
60	60	</div>
61	61	<Pagenation :search="request" @onChange="fnChangeCurrentPage" />
62	62	<div class="buttons">
63		- <button type="button" class="btn sm primary" @click="showOptions = true"> 등록 </button>
	63	+ <button type="button" class="btn sm sm primary" @click="showOptions = true"> 등록 </button>
64	64	</div>
65	65	</div>
66	66	</div>
...	...	@@ -71,8 +71,8 @@
71	71	<div class="card-body">
72	72	<h2 class="card-title">신청종류선택</h2>
73	73	<div class="buttons">
74		- <button class="btn hyuga" @click="goToPage('휴가')">휴가신청</button>
75		- <button class="btn chuljang" @click="goToPage('출장')">출장신청</button>
	74	+ <button class="btn sm hyuga" @click="goToPage('휴가')">휴가신청</button>
	75	+ <button class="btn sm chuljang" @click="goToPage('출장')">출장신청</button>
76	76	</div>
77	77	</div>
78	78	</div>

...	...	@@ -44,11 +44,11 @@
44	44	<div class=" sch-form-wrap title-wrap">
45	45	<h3><img :src="h3icon" alt="">카드 정보</h3>
46	46	<div class="buttons" style="margin: 0;">
47		- <button type="submit" class="btn sm tertiary" @click="resetCard">신규</button>
48		- <button type="reset" class="btn sm secondary" @click="insertByUpdateCard">
	47	+ <button type="submit" class="btn sm sm tertiary" @click="resetCard">신규</button>
	48	+ <button type="reset" class="btn sm sm secondary" @click="insertByUpdateCard">
49	49	{{ buttonText }}
50	50	</button>
51		- <button type="delete" class="btn sm btn-red" @click="deleteByUseAtCard">삭제</button>
	51	+ <button type="delete" class="btn sm sm btn-red" @click="deleteByUseAtCard">삭제</button>
52	52	</div>
53	53	</div>
54	54	<form class="row g-3 pt-3 needs-validation " @submit.prevent="handleSubmit" style="margin-bottom: 3rem;">

...	...	@@ -45,11 +45,11 @@
45	45	<div class=" sch-form-wrap title-wrap">
46	46	<h3><img :src="h3icon" alt="">차량 정보</h3>
47	47	<div class="buttons" style="margin: 0;">
48		- <button type="submit" class="btn sm tertiary" @click="resetVhcle">신규</button>
49		- <button type="reset" class="btn sm secondary" @click="insertByUpdateVhcle">
	48	+ <button type="submit" class="btn sm sm tertiary" @click="resetVhcle">신규</button>
	49	+ <button type="reset" class="btn sm sm secondary" @click="insertByUpdateVhcle">
50	50	{{ buttonText }}
51	51	</button>
52		- <button type="delete" class="btn sm btn-red" @click="deleteByUseAtVhcle">삭제</button>
	52	+ <button type="delete" class="btn sm sm btn-red" @click="deleteByUseAtVhcle">삭제</button>
53	53	</div>
54	54	</div>
55	55	<form class="row g-3 pt-3 needs-validation " @submit.prevent="handleSubmit" style="margin-bottom: 3rem;">

...	...	@@ -162,7 +162,7 @@
162	162
163	163	</div>
164	164	<div class="buttons">
165		- <button type="submit" class="btn tertiary">목록</button>
	165	+ <button type="submit" class="btn sm tertiary">목록</button>
166	166	</div>
167	167	</div>
168	168

...	...	@@ -116,8 +116,8 @@
116	116
117	117	</form>
118	118	<div class="buttons">
119		- <button type="submit" class="btn primary">등록</button>
120		- <button type="reset" class="btn secondary">취소</button>
	119	+ <button type="submit" class="btn sm primary">등록</button>
	120	+ <button type="reset" class="btn sm secondary">취소</button>
121	121	</div>
122	122
123	123	</div>

...	...	@@ -47,12 +47,12 @@
47	47	</form>
48	48	</div>
49	49	<div class="buttons">
50		- <button class="btn primary" type="submit">승인</button>
51		- <button class="btn btn-red" type="submit" @click="showPopup = true">반려</button>
52		- <button class="btn btn-red" type="submit">신청취소</button>
53		- <button class="btn secondary" type="submit">재신청</button>
54		- <button class="btn secondary" type="submit">수정</button>
55		- <button class="btn tertiary " type="submit">목록</button>
	50	+ <button class="btn sm primary" type="submit">승인</button>
	51	+ <button class="btn sm btn-red" type="submit" @click="showPopup = true">반려</button>
	52	+ <button class="btn sm btn-red" type="submit">신청취소</button>
	53	+ <button class="btn sm secondary" type="submit">재신청</button>
	54	+ <button class="btn sm secondary" type="submit">수정</button>
	55	+ <button class="btn sm tertiary " type="submit">목록</button>
56	56	</div>
57	57	<ReturnPopup v-if="showPopup" @close="showPopup = false"/>
58	58

...	...	@@ -91,11 +91,11 @@
91	91	</form>
92	92	</div>
93	93	<div class="buttons">
94		- <button v-if="sanctnStatus === 'waiting' && sanctnStatus !== 'approved'" type="button" class="btn btn-red" @click="deleteData">신청취소</button>
95		- <button v-if="sanctnStatus === 'waiting'" type="button" class="btn secondary" @click="fnMoveTo('edit', pageId)">수정</button>
96		- <button v-if="sanctnStatus === 'rejected'" type="button" class="btn secondary" @click="fnMoveTo('edit', pageId)">재신청</button>
97		- <button v-if="sanctnStatus === 'approved'" type="button" class="btn primary" @click="fnMoveTo('plus', pageId)">복명서 작성</button>
98		- <button type="button" class="btn tertiary" @click="fnMoveTo('list')">목록</button>
	94	+ <button v-if="sanctnStatus === 'waiting' && sanctnStatus !== 'approved'" type="button" class="btn sm btn-red" @click="deleteData">신청취소</button>
	95	+ <button v-if="sanctnStatus === 'waiting'" type="button" class="btn sm secondary" @click="fnMoveTo('edit', pageId)">수정</button>
	96	+ <button v-if="sanctnStatus === 'rejected'" type="button" class="btn sm secondary" @click="fnMoveTo('edit', pageId)">재신청</button>
	97	+ <button v-if="sanctnStatus === 'approved'" type="button" class="btn sm primary" @click="fnMoveTo('plus', pageId)">복명서 작성</button>
	98	+ <button type="button" class="btn sm tertiary" @click="fnMoveTo('list')">목록</button>
99	99	</div>
100	100	</div>
101	101	</div>

...	...	@@ -3,127 +3,146 @@
3	3	<div class="card-body">
4	4	<h2 class="card-title">출장 신청</h2>
5	5	<p class="require"><img :src="require" alt=""> 필수입력</p>
6		- <form class="row g-3 pt-3 needs-validation" @submit.prevent="handleSubmit">
7		- <div class="col-12">
8		- <label for="where" class="form-label">
9		- <p>출장구분 <span class="require"><img :src="require" alt=""></span></p>
10		- </label>
11		- <select class="form-select" style="width: 110px;" v-model="bsrpInfo.bsrpSe">
12		- <option v-for="(item, idx) of cmmnCodes.bsrpCodeList" :key="idx" :value="item.code">{{ item.codeNm }}</option>
13		- </select>
14		- </div>
15		- <div class="col-12">
16		- <label for="bsrpInfo.bsrpPlace" class="form-label">
17		- <p>출장지 <span class="require"><img :src="require" alt=""></span></p>
18		- </label>
19		- <input type="text" class="form-control" id="bsrpInfo.bsrpPlace" v-model="bsrpInfo.bsrpPlace" />
20		- </div>
21		- <div class="col-12">
22		- <label for="bsrpInfo.bsrpPurps" class="form-label">
23		- <p>출장목적 <span class="require"><img :src="require" alt=""></span></p>
24		- </label>
25		- <input type="text" class="form-control" id="bsrpInfo.bsrpPurps" v-model="bsrpInfo.bsrpPurps" />
26		- </div>
27		- <div class="col-12">
28		- <label for="where" class="form-label">
29		- <p>출장기간 <span class="require"><img :src="require" alt=""></span></p>
30		- </label>
31		- <div class="d-flex gap-1">
32		- <input type="date" class="form-control" id="bsrpInfo.bgnde" v-model="bsrpInfo.bgnde" />
33		- <input type="text" class="form-control" id="bsrpInfo.beginHour" v-model="bsrpInfo.beginHour" style="width: 100px;" placeholder="시" />
34		- <input type="text" class="form-control" id="bsrpInfo.beginMnt" v-model="bsrpInfo.beginMnt" style="width: 100px;" placeholder="분" />
35		- </div>
36		- <div class="d-flex gap-1">
37		- <input type="date" class="form-control" id="bsrpInfo.endde" v-model="bsrpInfo.endde" />
38		- <input type="text" class="form-control" id="bsrpInfo.endHour" v-model="bsrpInfo.endHour" style="width: 100px;" placeholder="시" />
39		- <input type="text" class="form-control" id="bsrpInfo.endMnt" v-model="bsrpInfo.endMnt" style="width: 100px;" placeholder="분" />
40		- </div>
41		- </div>
42		- <div class="col-12">
43		- <label for="totalDays" class="form-label">일수</label>
44		- <input type="text" class="form-control" id="totalDays" v-model="totalDays" readonly />
45		- </div>
46		- <div class="col-12">
47		- <label for="purpose" class="form-label">동행자 <button type="button" title="추가" @click="isOpenNmprModal = true">
48		- <PlusCircleFilled />
49		- </button>
50		- </label>
51		- <HrPopup v-if="isOpenNmprModal" :lists="bsrpInfo.bsrpNmprList" @onSelected="fnAddNmpr" @close="isOpenNmprModal = false" />
52		- <div class="approval-container">
53		- <div v-for="(item, idx) of bsrpInfo.bsrpNmprList" :key="idx" class="d-flex addapproval">
54		- <div class="d-flex align-items-center border-x">
55		- <p>{{ item.triperNm }} {{ item.clsfNm }}</p>
56		- <button type="button" @click="fnDelNmpr(idx)" @mousedown.stop>
57		- <CloseOutlined />
	6	+ <div class="tbl-wrap">
	7	+ <table class="tbl data">
	8	+ <tbody>
	9	+ <tr>
	10	+ <th>출장구분 <span class="require"><img :src="require" alt=""></span></th>
	11	+ <td>
	12	+ <select class="form-select sm" style="width: 110px;" v-model="bsrpInfo.bsrpSe">
	13	+ <option v-for="(item, idx) of cmmnCodes.bsrpCodeList" :key="idx" :value="item.code">
	14	+ {{ item.codeNm }}
	15	+ </option>
	16	+ </select>
	17	+ </td>
	18	+ <th>일수</th>
	19	+ <td>
	20	+ <input type="text" class="form-control sm" v-model="totalDays" readonly />
	21	+ </td>
	22	+ </tr>
	23	+
	24	+ <tr>
	25	+ <th>출장지 <span class="require"><img :src="require" alt=""></span></th>
	26	+ <td>
	27	+ <input type="text" class="form-control sm" v-model="bsrpInfo.bsrpPlace" />
	28	+ </td>
	29	+ <th>출장목적 <span class="require"><img :src="require" alt=""></span></th>
	30	+ <td>
	31	+ <input type="text" class="form-control sm" v-model="bsrpInfo.bsrpPurps" />
	32	+ </td>
	33	+ </tr>
	34	+
	35	+ <tr>
	36	+ <th>출장기간 <span class="require"><img :src="require" alt=""></span></th>
	37	+ <td colspan="3">
	38	+ <div class="d-flex">
	39	+ <div class="d-flex gap-1 mb-1">
	40	+ <input type="date" class="form-control sm" v-model="bsrpInfo.bgnde" />
	41	+ <input type="text" class="form-control sm" style="width: 100px;" placeholder="시" v-model="bsrpInfo.beginHour" />
	42	+ <input type="text" class="form-control sm" style="width: 100px;" placeholder="분" v-model="bsrpInfo.beginMnt" />
	43	+ </div>
	44	+ <div class="d-flex gap-1">
	45	+ <input type="date" class="form-control sm" v-model="bsrpInfo.endde" />
	46	+ <input type="text" class="form-control sm" style="width: 100px;" placeholder="시" v-model="bsrpInfo.endHour" />
	47	+ <input type="text" class="form-control sm" style="width: 100px;" placeholder="분" v-model="bsrpInfo.endMnt" />
	48	+ </div>
	49	+ </div>
	50	+ </td>
	51	+ </tr>
	52	+
	53	+
	54	+ <tr>
	55	+ <th>
	56	+ 동행자
	57	+ </th>
	58	+ <td>
	59	+ <button type="button" title="추가" @click="isOpenNmprModal = true">
	60	+ <PlusCircleFilled />
58	61	</button>
59		- </div>
60		- </div>
61		- </div>
62		- </div>
63		- <div class="col-12">
64		- <label for="member" class="form-label">
65		- <p>승인자 <span class="require"><img :src="require" alt=""></span></p>
66		- <button type="button" title="추가" @click="isOpenSanctnModal = true">
67		- <PlusCircleFilled />
68		- </button>
69		- </label>
70		- <HrPopup v-if="isOpenSanctnModal" :lists="bsrpCnsul.sanctnList" @onSelected="fnAddSanctn" @close="isOpenSanctnModal = false" />
71		- <div class="approval-container">
72		- <SanctnList v-model:lists="bsrpCnsul.sanctnList" @delSanctn="fnDelSanctn" />
73		- </div>
74		- </div>
75		- <div class="col-12">
76		- <label for="prvonsh" class="form-label">
77		- <p>품의내용 <span class="require"><img :src="require" alt=""></span></p>
78		- </label>
79		- <EditorComponent v-model:contents="bsrpCnsul.cn" />
80		- </div>
81		- <div class="col-12">
82		- <label for="purpose" class="form-label">
83		- <span>법인카드</span>
84		- <button type="button" title="추가" @click="isOpenCardModal = true">
85		- <PlusCircleFilled />
86		- </button>
87		- </label>
88		- <CorpCardPopup v-if="isOpenCardModal" :bsrpInfo="bsrpInfo" :lists="cprCardList" @close="isOpenCardModal = false" @onSelected="fnAddCard" />
89		- <div class="approval-container">
90		- <div v-for="(card, idx) in cprCardList" :key="idx" class="d-flex gap-2 addapproval mb-2">
91		- <form class="d-flex align-items-center border-x">
92		- <p>{{ card.cardNm }}</p>
93		- <button type="button" @click="fnDelCard(idx)" class="delete-button">
94		- <CloseOutlined />
	62	+ <HrPopup v-if="isOpenNmprModal" :lists="bsrpInfo.bsrpNmprList" @onSelected="fnAddNmpr" @close="isOpenNmprModal = false" />
	63	+ <div class="approval-container">
	64	+ <div v-for="(item, idx) of bsrpInfo.bsrpNmprList" :key="idx" class="d-flex addapproval">
	65	+ <div class="d-flex align-items-center border-x">
	66	+ <p>{{ item.triperNm }} {{ item.clsfNm }}</p>
	67	+ <button type="button" @click="fnDelNmpr(idx)" @mousedown.stop>
	68	+ <CloseOutlined />
	69	+ </button>
	70	+ </div>
	71	+ </div>
	72	+ </div>
	73	+ </td>
	74	+ <th>
	75	+ 승인자 <span class="require"><img :src="require" alt=""></span>
	76	+ </th>
	77	+ <td>
	78	+ <button type="button" title="추가" @click="isOpenSanctnModal = true">
	79	+ <PlusCircleFilled />
95	80	</button>
96		- </form>
97		- </div>
98		- </div>
99		- </div>
100		- <div class="col-12 border-x">
101		- <label for="purpose" class="form-label">
102		- <span>법인차량</span>
103		- <button type="button" title="추가" @click="isOpenVhcleModal = true">
104		- <PlusCircleFilled />
105		- </button>
106		- </label>
107		- <CorpCarPopup v-if="isOpenVhcleModal" :bsrpInfo="bsrpInfo" :lists="cprVhcleList" @close="isOpenVhcleModal = false" @onSelected="fnAddVhcle" />
108		- <div class="approval-container">
109		- <div v-for="(vhcle, idx) in cprVhcleList" :key="idx" class="d-flex gap-2 addapproval mb-2">
110		- <p>{{ vhcle.vhcleNm }}</p>
111		- <select class="form-select" v-model="vhcle.drverId">
112		- <option value="" disabled hidden>운전자 선택</option>
113		- <option :value="userInfo.userId">{{ userInfo.userNm }}</option>
114		- <option v-for="(item, idx) of bsrpInfo.bsrpNmprList" :key="idx" :value="item.userId">{{ item.userNm }}</option>
115		- </select>
116		- <button type="button" @click="fnDelVhcle(idx)" class="delete-button">
117		- <CloseOutlined />
118		- </button>
119		- </div>
120		- </div>
121		- </div>
122		- </form>
	81	+ <HrPopup v-if="isOpenSanctnModal" :lists="bsrpCnsul.sanctnList" @onSelected="fnAddSanctn" @close="isOpenSanctnModal = false" />
	82	+ <div class="approval-container">
	83	+ <SanctnList v-model:lists="bsrpCnsul.sanctnList" @delSanctn="fnDelSanctn" />
	84	+ </div>
	85	+ </td>
	86	+ </tr>
	87	+ <tr>
	88	+ <th>품의내용 <span class="require"><img :src="require" alt=""></span></th>
	89	+ <td colspan="3" style="height: calc(100% - 550px);">
	90	+ <EditorComponent v-model:contents="bsrpCnsul.cn" />
	91	+ </td>
	92	+ </tr>
	93	+ <tr>
	94	+ <th>
	95	+ 법인카드
	96	+ <button type="button" title="추가" @click="isOpenCardModal = true">
	97	+ <PlusCircleFilled />
	98	+ </button>
	99	+ </th>
	100	+ <td>
	101	+ <CorpCardPopup v-if="isOpenCardModal" :bsrpInfo="bsrpInfo" :lists="cprCardList" @close="isOpenCardModal = false" @onSelected="fnAddCard" />
	102	+ <div class="approval-container">
	103	+ <div v-for="(card, idx) in cprCardList" :key="idx" class="d-flex gap-2 addapproval mb-2">
	104	+ <form class="d-flex align-items-center border-x">
	105	+ <p>{{ card.cardNm }}</p>
	106	+ <button type="button" @click="fnDelCard(idx)" class="delete-button">
	107	+ <CloseOutlined />
	108	+ </button>
	109	+ </form>
	110	+ </div>
	111	+ </div>
	112	+ </td>
	113	+ <th>
	114	+ 법인차량
	115	+ <button type="button" title="추가" @click="isOpenVhcleModal = true">
	116	+ <PlusCircleFilled />
	117	+ </button>
	118	+ </th>
	119	+ <td>
	120	+ <CorpCarPopup v-if="isOpenVhcleModal" :bsrpInfo="bsrpInfo" :lists="cprVhcleList" @close="isOpenVhcleModal = false" @onSelected="fnAddVhcle" />
	121	+ <div class="approval-container">
	122	+ <div v-for="(vhcle, idx) in cprVhcleList" :key="idx" class="d-flex gap-2 addapproval mb-2">
	123	+ <p>{{ vhcle.vhcleNm }}</p>
	124	+ <select class="form-select" v-model="vhcle.drverId">
	125	+ <option value="" disabled hidden>운전자 선택</option>
	126	+ <option :value="userInfo.userId">{{ userInfo.userNm }}</option>
	127	+ <option v-for="(item, idx) of bsrpInfo.bsrpNmprList" :key="idx" :value="item.userId">
	128	+ {{ item.userNm }}
	129	+ </option>
	130	+ </select>
	131	+ <button type="button" @click="fnDelVhcle(idx)" class="delete-button">
	132	+ <CloseOutlined />
	133	+ </button>
	134	+ </div>
	135	+ </div>
	136	+ </td>
	137	+ </tr>
	138	+ </tbody>
	139	+ </table>
	140	+ </div>
	141	+
123	142	<div class="buttons">
124		- <button type="button" class="btn primary" @click="fnSave">신청</button>
125		- <button v-if="$isEmpty(pageId)" type="button" class="btn secondary" @click="fnMoveTo('list')">목록</button>
126		- <button v-else type="button" class="btn secondary" @click="fnMoveTo('view', pageId)">취소</button>
	143	+ <button type="button" class="btn sm sm primary" @click="fnSave">신청</button>
	144	+ <button v-if="$isEmpty(pageId)" type="button" class="btn sm sm secondary" @click="fnMoveTo('list')">목록</button>
	145	+ <button v-else type="button" class="btn sm sm secondary" @click="fnMoveTo('view', pageId)">취소</button>
127	146	</div>
128	147	</div>
129	148	</div>

...	...	@@ -51,10 +51,10 @@
51	51	</form>
52	52	</div>
53	53	<div class="buttons">
54		- <button v-if="detailData.confmAt === 'W' \|\| detailData.confmAt === 'R'" class="btn btn-red" type="button" @click="deleteData">신청취소</button>
55		- <button v-if="detailData.confmAt === 'W'" class="btn secondary" type="button" @click="fnMoveTo('edit', pageId)">수정</button>
56		- <button v-if="detailData.confmAt === 'R'" class="btn secondary" type="button" @click="fnMoveTo('edit', pageId)">재신청</button>
57		- <button class="btn tertiary" type="button" @click="fnMoveTo('list')">목록</button>
	54	+ <button v-if="detailData.confmAt === 'W' \|\| detailData.confmAt === 'R'" class="btn sm btn-red" type="button" @click="deleteData">신청취소</button>
	55	+ <button v-if="detailData.confmAt === 'W'" class="btn sm secondary" type="button" @click="fnMoveTo('edit', pageId)">수정</button>
	56	+ <button v-if="detailData.confmAt === 'R'" class="btn sm secondary" type="button" @click="fnMoveTo('edit', pageId)">재신청</button>
	57	+ <button class="btn sm tertiary" type="button" @click="fnMoveTo('list')">목록</button>
58	58	</div>
59	59	<ReturnPopup v-if="showPopup" @close="showPopup = false" />
60	60	</div>

...	...	@@ -3,63 +3,78 @@
3	3	<div class="card-body">
4	4	<h2 class="card-title">휴가 신청</h2>
5	5	<p class="require"><img :src="require" alt=""> 필수입력</p>
6		- <div class="row g-3 needs-validation">
7		- <div class="col-12">
8		- <label for="inputName5" class="form-label">
9		- <p>유형<span class="require"><img :src="require" alt=""></span></p>
10		- </label>
11		- <select class="form-select" style="max-width: 200px;" v-model="editData.vcatnKnd" @change="fnOnchangeVcatnKnd">
12		- <option value="" disabled hidden>유형 선택</option>
13		- <option v-for="(item, idx) of vcatnKnds" :key="idx" :value="item.code">{{ item.codeNm }}</option>
14		- </select>
15		- </div>
16		- <div class="col-12">
17		- <label for="bgnde" class="form-label">
18		- <p>시작일<span class="require"><img :src="require" alt=""></span></p>
19		- </label>
20		- <div class="d-flex gap-1">
21		- <input type="date" class="form-control" id="bgnde" v-model="editData.bgnde" @keydown="preventKeyboard" />
22		- <input type="text" class="form-control" placeholder="시" style="width: 100px;" v-model="editData.beginHour" readonly />
23		- <input type="text" class="form-control" placeholder="분" style="width: 100px;" v-model="editData.beginMnt" readonly />
24		- </div>
25		- </div>
26		- <div class="col-12">
27		- <label for="endde" class="form-label">
28		- <p>종료일<span class="require"><img :src="require" alt=""></span></p>
29		- </label>
30		- <div class="d-flex gap-1">
31		- <input type="date" class="form-control" id="endde" v-model="editData.endde" :readonly="dayCnt === 0.5" @keydown="preventKeyboard" />
32		- <input type="text" class="form-control" placeholder="시" style="width: 100px;" v-model="editData.endHour" readonly />
33		- <input type="text" class="form-control" placeholder="분" style="width: 100px;" v-model="editData.endMnt" readonly />
34		- </div>
35		- </div>
36		- <div class="col-12">
37		- <label for="totalDays" class="form-label">사용 휴가일</label>
38		- <input type="text" class="form-control" id="totalDays" v-model="totalDays" readonly />
39		- </div>
40		- <div class="col-12">
41		- <label for="member" class="form-label">
42		- <span>승인자<span class="require"><img :src="require" alt=""></span></span>
43		- <button type="button" title="추가" @click="isOpenModal = true">
44		- <PlusCircleFilled />
45		- </button>
46		- </label>
47		- <HrPopup v-if="isOpenModal" :lists="editData.sanctnList" @onSelected="fnAddSanctn" @close="isOpenModal = false" />
48		- <div class="approval-container">
49		- <SanctnList v-model:lists="editData.sanctnList" @delSanctn="fnDelSanctn" />
50		- </div>
51		- </div>
52		- <div class="col-12 border-x hyuga">
53		- <label for="prvonsh" class="form-label">세부사항</label>
54		- <div>
55		- <EditorComponent v-model:contents="editData.detailCn" />
56		- </div>
57		- </div>
	6	+ <div class="tbl-wrap">
	7	+ <table class="tbl data">
	8	+ <tbody>
	9	+ <tr>
	10	+ <th scope="row">
	11	+ 유형 <span class="require"><img :src="require" alt=""></span>
	12	+ </th>
	13	+ <td>
	14	+ <select class="form-select sm" style="max-width: 200px;" v-model="editData.vcatnKnd" @change="fnOnchangeVcatnKnd">
	15	+ <option value="" disabled hidden>유형 선택</option>
	16	+ <option v-for="(item, idx) of vcatnKnds" :key="idx" :value="item.code">{{ item.codeNm }}</option>
	17	+ </select>
	18	+ </td>
	19	+ </tr>
	20	+ <tr>
	21	+ <th scope="row">
	22	+ 시작일 <span class="require"><img :src="require" alt=""></span>
	23	+ </th>
	24	+ <td>
	25	+ <div class="d-flex gap-1">
	26	+ <input type="date" class="form-control sm" v-model="editData.bgnde" @keydown="preventKeyboard" />
	27	+ <input type="text" class="form-control sm" placeholder="시" style="width: 100px;" v-model="editData.beginHour" readonly />
	28	+ <input type="text" class="form-control sm" placeholder="분" style="width: 100px;" v-model="editData.beginMnt" readonly />
	29	+ </div>
	30	+ </td>
	31	+ </tr>
	32	+ <tr>
	33	+ <th scope="row">
	34	+ 종료일 <span class="require"><img :src="require" alt=""></span>
	35	+ </th>
	36	+ <td>
	37	+ <div class="d-flex gap-1">
	38	+ <input type="date" class="form-control sm" v-model="editData.endde" :readonly="dayCnt === 0.5" @keydown="preventKeyboard" />
	39	+ <input type="text" class="form-control sm" placeholder="시" style="width: 100px;" v-model="editData.endHour" readonly />
	40	+ <input type="text" class="form-control sm" placeholder="분" style="width: 100px;" v-model="editData.endMnt" readonly />
	41	+ </div>
	42	+ </td>
	43	+ </tr>
	44	+ <tr>
	45	+ <th scope="row">사용 휴가일</th>
	46	+ <td>
	47	+ <input type="text" class="form-control sm" v-model="totalDays" readonly />
	48	+ </td>
	49	+ </tr>
	50	+ <tr>
	51	+ <th scope="row">
	52	+ 승인자 <span class="require"><img :src="require" alt=""></span>
	53	+ </th>
	54	+ <td>
	55	+ <button type="button" title="추가" @click="isOpenModal = true">
	56	+ <PlusCircleFilled />
	57	+ </button>
	58	+ <HrPopup v-if="isOpenModal" :lists="editData.sanctnList" @onSelected="fnAddSanctn" @close="isOpenModal = false" />
	59	+ <div class="approval-container">
	60	+ <SanctnList v-model:lists="editData.sanctnList" @delSanctn="fnDelSanctn" />
	61	+ </div>
	62	+ </td>
	63	+ </tr>
	64	+ <tr>
	65	+ <th scope="row">세부사항</th>
	66	+ <td>
	67	+ <EditorComponent v-model:contents="editData.detailCn" />
	68	+ </td>
	69	+ </tr>
	70	+ </tbody>
	71	+ </table>
58	72	</div>
	73	+
59	74	<div class="buttons">
60		- <button type="button" class="btn btn-red" @click="fnRecord">이전 승인자 불러오기</button>
61		- <button type="button" class="btn primary" @click="fnSave">신청</button>
62		- <button type="button" class="btn tertiary" @click="fnMoveTo('list')">취소</button>
	75	+ <button type="button" class="btn sm btn-red" @click="fnRecord">이전 승인자 불러오기</button>
	76	+ <button type="button" class="btn sm primary" @click="fnSave">신청</button>
	77	+ <button type="button" class="btn sm tertiary" @click="fnMoveTo('list')">취소</button>
63	78	</div>
64	79	</div>
65	80	</div>

...	...	@@ -54,8 +54,8 @@
54	54
55	55	</form>
56	56	<div class="buttons" style="margin: 10px 0;">
57		- <button type="submit" class="btn btn-red sm">지난달 정보 불러오기</button>
58		- <button type="submit" class="btn primary sm" @click="showPopup = true">출장비 조회</button>
	57	+ <button type="submit" class="btn sm btn-red sm">지난달 정보 불러오기</button>
	58	+ <button type="submit" class="btn sm primary sm" @click="showPopup = true">출장비 조회</button>
59	59	<ChuljangListPopup v-if="showPopup" @close="showPopup = false" @select="addApproval" />
60	60	</div>
61	61	<form class="row g-3 needs-validation" @submit.prevent="handleSubmit">
...	...	@@ -251,8 +251,8 @@
251	251	</div>
252	252	</form>
253	253	<div class="buttons">
254		- <button type="submit" class="btn primary">등록</button>
255		- <button type="submit" class="btn tertiary">취소</button>
	254	+ <button type="submit" class="btn sm primary">등록</button>
	255	+ <button type="submit" class="btn sm tertiary">취소</button>
256	256	</div>
257	257	</div>
258	258

...	...	@@ -38,7 +38,7 @@
38	38	<td>{{ formatCurrency(item.actual) }}</td>
39	39	<td>{{ item.payDate }}</td>
40	40	<td>
41		- <button class="btn secondary xsm" @click="showPopup = true">보기</button>
	41	+ <button class="btn sm secondary xsm" @click="showPopup = true">보기</button>
42	42	</td>
43	43	</tr>
44	44	</tbody>

...	...	@@ -11,7 +11,7 @@
11	11	<img :src="arrow" alt="" class="arrow">
12	12	<img :src="topmenuicon" alt="">
13	13	<p>{{ menu.title }} </p>
14		- <button @click="addSubMenu(index)" class="btn xsm secondary">sub +</button>
	14	+ <button @click="addSubMenu(index)" class="btn sm xsm secondary">sub +</button>
15	15	</summary>
16	16	<ul>
17	17	<li class="submenu" v-for="(submenu, subIndex) in menu.submenus" :key="subIndex">
...	...	@@ -32,9 +32,9 @@
32	32	<div class=" sch-form-wrap title-wrap">
33	33	<h3><img :src="h3icon" alt="">부서 정보</h3>
34	34	<div class="buttons" style="margin: 0;">
35		- <button type="submit" class="btn sm tertiary">초기화</button>
36		- <button type="reset" class="btn sm secondary">등록</button>
37		- <button type="delete" class="btn sm btn-red">삭제</button>
	35	+ <button type="submit" class="btn sm sm tertiary">초기화</button>
	36	+ <button type="reset" class="btn sm sm secondary">등록</button>
	37	+ <button type="delete" class="btn sm sm btn-red">삭제</button>
38	38	</div>
39	39	</div>
40	40	<form class="row g-3 pt-3 needs-validation detail" @submit.prevent="handleSubmit"
...	...	@@ -62,8 +62,8 @@
62	62	<div class=" sch-form-wrap title-wrap">
63	63	<h3><img :src="h3icon" alt="">부서 사용자</h3>
64	64	<div class="buttons" style="margin: 0;">
65		- <button type="reset" class="btn sm secondary" @click="showPopup = true">사용자 추가</button>
66		- <button type="delete" class="btn sm btn-red" @click="removeMember(index)">사용자 삭제</button>
	65	+ <button type="reset" class="btn sm sm secondary" @click="showPopup = true">사용자 추가</button>
	66	+ <button type="delete" class="btn sm sm btn-red" @click="removeMember(index)">사용자 삭제</button>
67	67	</div>
68	68	<HrPopup v-if="showPopup" @close="showPopup = false" @select="addMember"/>
69	69	</div>

...	...	@@ -91,9 +91,9 @@
91	91	</div>
92	92	</form>
93	93	<div class="buttons">
94		- <button type="delete" class="btn sm btn-red">탈퇴</button>
95		- <button type="reset" class="btn sm secondary">수정</button>
96		- <button type="submit" class="btn sm tertiary">목록</button>
	94	+ <button type="delete" class="btn sm sm btn-red">탈퇴</button>
	95	+ <button type="reset" class="btn sm sm secondary">수정</button>
	96	+ <button type="submit" class="btn sm sm tertiary">목록</button>
97	97	</div>
98	98	</div>
99	99

Delete comment

...	...	@@ -117,8 +117,8 @@
117	117	</div>
118	118	</form>
119	119	<div class="buttons">
120		- <button type="reset" class="btn sm primary">등록</button>
121		- <button type="submit" class="btn sm tertiary">취소</button>
	120	+ <button type="reset" class="btn sm sm primary">등록</button>
	121	+ <button type="submit" class="btn sm sm tertiary">취소</button>
122	122	</div>
123	123	</div>
124	124

...	...	@@ -46,7 +46,7 @@
46	46	<td>{{ item.name }}</td>
47	47	<td>{{ item.joinDate }}</td>
48	48	<td>
49		- <button class="btn tertiary xsm" @click.stop="resetPassword(item)">초기화</button>
	49	+ <button class="btn sm tertiary xsm" @click.stop="resetPassword(item)">초기화</button>
50	50	</td>
51	51	</tr>
52	52	</tbody>
...	...	@@ -73,7 +73,7 @@
73	73	</ul>
74	74	</div>
75	75	<div class="buttons">
76		- <button class="btn primary" type="submit" @click="goToPage('등록')">등록</button>
	76	+ <button class="btn sm primary" type="submit" @click="goToPage('등록')">등록</button>
77	77	</div>
78	78	</div>
79	79	</div>

...	...	@@ -40,9 +40,9 @@
40	40
41	41	</form>
42	42	<div class="buttons">
43		- <button type="submit" class="btn btn-red">삭제</button>
44		- <button type="submit" class="btn secondary">수정</button>
45		- <button type="reset" class="btn tertiary">목록</button>
	43	+ <button type="submit" class="btn sm btn-red">삭제</button>
	44	+ <button type="submit" class="btn sm secondary">수정</button>
	45	+ <button type="reset" class="btn sm tertiary">목록</button>
46	46	</div>
47	47	</div>
48	48

...	...	@@ -53,8 +53,8 @@
53	53
54	54	</form>
55	55	<div class="buttons">
56		- <button type="submit" class="btn primary">등록</button>
57		- <button type="reset" class="btn tertiary">취소</button>
	56	+ <button type="submit" class="btn sm primary">등록</button>
	57	+ <button type="reset" class="btn sm tertiary">취소</button>
58	58	</div>
59	59	</div>
60	60

...	...	@@ -82,7 +82,7 @@
82	82	</div>
83	83	<!-- End Table -->
84	84	<div class="buttons">
85		- <button type="button" class="btn sm primary" @click="goToPage('등록') ">
	85	+ <button type="button" class="btn sm sm primary" @click="goToPage('등록') ">
86	86	등록
87	87	</button>
88	88

...	...	@@ -28,9 +28,9 @@
28	28	<div class=" sch-form-wrap title-wrap">
29	29	<h3><img :src="h3icon" alt="">권한 정보</h3>
30	30	<div class="buttons" style="margin: 0;">
31		- <button type="submit" class="btn sm tertiary">신규</button>
32		- <button type="reset" class="btn sm secondary">등록</button>
33		- <button type="delete" class="btn sm btn-red">삭제</button>
	31	+ <button type="submit" class="btn sm sm tertiary">신규</button>
	32	+ <button type="reset" class="btn sm sm secondary">등록</button>
	33	+ <button type="delete" class="btn sm sm btn-red">삭제</button>
34	34	</div>
35	35	</div>
36	36	<form class="row g-3 pt-3 needs-validation detail" @submit.prevent="handleSubmit"

...	...	@@ -85,9 +85,9 @@
85	85	</div>
86	86	</form><!-- End Multi Columns Form -->
87	87	<div class="buttons">
88		- <button type="submit" class="btn secondary">수정</button>
89		- <button type="submit" class="btn btn-red">삭제</button>
90		- <button type="reset" class="btn tertiary">목록</button>
	88	+ <button type="submit" class="btn sm secondary">수정</button>
	89	+ <button type="submit" class="btn sm btn-red">삭제</button>
	90	+ <button type="reset" class="btn sm tertiary">목록</button>
91	91	</div>
92	92	</div>
93	93	</div>

...	...	@@ -113,8 +113,8 @@
113	113	</div>
114	114	</form><!-- End Multi Columns Form -->
115	115	<div class="buttons">
116		- <button type="submit" class="btn primary">등록</button>
117		- <button type="reset" class="btn tertiary">취소</button>
	116	+ <button type="submit" class="btn sm primary">등록</button>
	117	+ <button type="reset" class="btn sm tertiary">취소</button>
118	118	</div>
119	119	</div>
120	120	</div>

...	...	@@ -138,8 +138,8 @@
138	138
139	139	</form>
140	140	<div class="buttons">
141		- <button type="submit" class="btn primary">등록</button>
142		- <button type="reset" class="btn tertiary">취소</button>
	141	+ <button type="submit" class="btn sm primary">등록</button>
	142	+ <button type="reset" class="btn sm tertiary">취소</button>
143	143	</div>
144	144	</div>
145	145	</div>

...	...	@@ -74,7 +74,7 @@
74	74
75	75	</div>
76	76	<div class="buttons">
77		- <button type="submit" class="btn tertiary">목록</button>
	77	+ <button type="submit" class="btn sm tertiary">목록</button>
78	78	</div>
79	79	</div>
80	80	</div>