Commit @be38d5ec960e9942296cd3e3a43bcc4b2a3159eb

류윤주 07-25

250725 류윤주 수정

@be38d5ec960e9942296cd3e3a43bcc4b2a3159eb

25da134

be38d5e

client/resources/scss/admin/content.scss

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

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


 
 }
 
-.content {
-    .pagination {
-        margin-top: 20px;
-        margin-bottom: 5rem;
+// .content {
+//     .pagination {
+//         margin-top: 20px;
+//         margin-bottom: 5rem;
 
-        ul {
-            display: flex;
-            list-style: none;
-            padding: 0;
-            gap: 8px;
-            justify-content: center;
-            align-items: center;
-        }
+//         ul {
+//             display: flex;
+//             list-style: none;
+//             padding: 0;
+//             gap: 8px;
+//             justify-content: center;
+//             align-items: center;
+//         }
 
-        li {
-            width: 35px;
-            height: 35px;
-            text-align: center;
-            line-height: 35px;
-            border: 1px solid #BDCBE8;
-            border-radius: 4px;
-            cursor: pointer;
-            background-color: #fff;
-            color: #333;
-            transition: 0.2s;
-        }
+//         li {
+//             width: 35px;
+//             height: 35px;
+//             text-align: center;
+//             line-height: 35px;
+//             border: 1px solid #BDCBE8;
+//             border-radius: 4px;
+//             cursor: pointer;
+//             background-color: #fff;
+//             color: #333;
+//             transition: 0.2s;
+//         }
 
-        li:hover:not(.disabled) {
-            background-color: #f0f0f0;
-        }
+//         li:hover:not(.disabled) {
+//             background-color: #f0f0f0;
+//         }
 
-        li.active {
-            background-color: #1D75E1;
-            color: white;
-            font-weight: bold;
-        }
+//         li.active {
+//             background-color: #1D75E1;
+//             color: white;
+//             font-weight: bold;
+//         }
 
-        li.arrow {
-            font-weight: bold;
-        }
+//         li.arrow {
+//             font-weight: bold;
+//         }
 
-        li.disabled {
-            opacity: 0.5;
-            cursor: not-allowed;
-        }
-    }
+//         li.disabled {
+//             opacity: 0.5;
+//             cursor: not-allowed;
+//         }
+//     }
 
-    .title {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        margin-bottom: 10px;
+//     .title {
+//         display: flex;
+//         justify-content: space-between;
+//         align-items: center;
+//         margin-bottom: 10px;
 
-        h2 {
-            font-size: 24px;
-            font-weight: 700;
-            display: flex;
-            gap: 20px;
+//         h2 {
+//             font-size: 24px;
+//             font-weight: 700;
+//             display: flex;
+//             gap: 20px;
 
-            span {
-                border: 1px solid #E92727;
-                border-radius: 100px;
-                color: #E92727;
-                font-size: 15px;
-                text-align: center;
-                padding: 5px 20px;
-            }
-        }
+//             span {
+//                 border: 1px solid #E92727;
+//                 border-radius: 100px;
+//                 color: #E92727;
+//                 font-size: 15px;
+//                 text-align: center;
+//                 padding: 5px 20px;
+//             }
+//         }
 
-        .sub {
-            display: flex;
-            align-items: center;
-            gap: 3px;
-        }
-    }
+//         .sub {
+//             display: flex;
+//             align-items: center;
+//             gap: 3px;
+//         }
+//     }
 
-    .top-content {
-        display: flex;
-        gap: 40px;
-        margin-bottom: 15px;
-    }
+//     .top-content {
+//         display: flex;
+//         gap: 40px;
+//         margin-bottom: 15px;
+//     }
 
-    .boxs {
-        // width: 550px;
+//     .boxs {
+//         // width: 550px;
 
-        .blue-box {
-            width: 550px;
-            height: calc(100% - 46px);
-            background-color: #D7DCF1;
-            border-radius: 10px;
-            padding: 32px;
+//         .blue-box {
+//             width: 550px;
+//             height: calc(100% - 46px);
+//             background-color: #D7DCF1;
+//             border-radius: 10px;
+//             padding: 32px;
 
-            .box {
-                background-color: #fff;
-                text-align: center;
-                padding: 29px 0;
-                border-radius: 10px;
+//             .box {
+//                 background-color: #fff;
+//                 text-align: center;
+//                 padding: 29px 0;
+//                 border-radius: 10px;
 
-                .time {
-                    font-size: 35px;
-                    font-weight: 700;
-                }
+//                 .time {
+//                     font-size: 35px;
+//                     font-weight: 700;
+//                 }
 
-            }
+//             }
 
-            .buttons {
-                display: flex;
-                gap: 25px;
-                align-items: center;
-                justify-content: center;
-                margin-top: 13px;
+//             .buttons {
+//                 display: flex;
+//                 gap: 25px;
+//                 align-items: center;
+//                 justify-content: center;
+//                 margin-top: 13px;
 
-                i.fa-bars {
-                    display: block;
-                    width: 1px;
-                    height: 40px;
-                    background-color: #fff;
-                }
-            }
-        }
+//                 i.fa-bars {
+//                     display: block;
+//                     width: 1px;
+//                     height: 40px;
+//                     background-color: #fff;
+//                 }
+//             }
+//         }
 
-        .board {
-            border: 1px solid #DDDDDD;
-            border-radius: 10px;
+//         .board {
+//             border: 1px solid #DDDDDD;
+//             border-radius: 10px;
 
-            table {
+//             table {
 
-                tr {
-                    border-bottom: 1px solid #DDDDDD;
-                }
+//                 tr {
+//                     border-bottom: 1px solid #DDDDDD;
+//                 }
 
-                tr:last-child {
-                    border: 0;
-                }
+//                 tr:last-child {
+//                     border: 0;
+//                 }
 
-                td {
-                    border-radius: 10px;
-                    border: 0;
-                    text-align: center;
+//                 td {
+//                     border-radius: 10px;
+//                     border: 0;
+//                     text-align: center;
 
-                    p {
-                        padding: 4px 0;
-                        border-radius: 5px;
-                        width: 85px;
-                    }
-                }
+//                     p {
+//                         padding: 4px 0;
+//                         border-radius: 5px;
+//                         width: 85px;
+//                     }
+//                 }
 
-                .category-service p {
-                    background-color: #FED9AC;
-                }
+//                 .category-service p {
+//                     background-color: #FED9AC;
+//                 }
 
-                .category-internal p {
-                    background-color: #EFF1FA;
-                }
+//                 .category-internal p {
+//                     background-color: #EFF1FA;
+//                 }
 
-                .category-government p {
-                    background-color: #DFD4F0;
-                }
+//                 .category-government p {
+//                     background-color: #DFD4F0;
+//                 }
 
-                .status p {
-                    border: 2px solid #AAAAAA;
-                    border-radius: 100px;
-                    color: #AAAAAA;
-                    font-size: 15px;
-                }
+//                 .status p {
+//                     border: 2px solid #AAAAAA;
+//                     border-radius: 100px;
+//                     color: #AAAAAA;
+//                     font-size: 15px;
+//                 }
 
-                .status-in-progress p {
-                    border-color: #1D75E1;
-                    color: #1D75E1;
-                }
+//                 .status-in-progress p {
+//                     border-color: #1D75E1;
+//                     color: #1D75E1;
+//                 }
 
-                .status-complete p {
-                    color: rgb(39, 96, 55);
-                    border-color: rgb(39, 96, 55);
-                }
+//                 .status-complete p {
+//                     color: rgb(39, 96, 55);
+//                     border-color: rgb(39, 96, 55);
+//                 }
 
-            }
-        }
-    }
+//             }
+//         }
+//     }
 
-    .card {
-        height: 100%;
-        .color-boxs {
-            display: flex;
-            justify-content: space-between;
-            gap: 10px;
-            margin-bottom: 20px;
+//     .card {
+//         height: 100%;
+//         .color-boxs {
+//             display: flex;
+//             justify-content: space-between;
+//             gap: 10px;
+//             margin-bottom: 20px;
 
-            .box {
-                display: block;
-                text-align: center;
-                width: calc(100% / 6);
-                background-color: #F9F9F9;
-                font-size: 30px;
-                font-weight: 700;
-                border-radius: 10px;
-                padding-bottom: 24px;
+//             .box {
+//                 display: block;
+//                 text-align: center;
+//                 width: calc(100% / 6);
+//                 background-color: #F9F9F9;
+//                 font-size: 30px;
+//                 font-weight: 700;
+//                 border-radius: 10px;
+//                 padding-bottom: 24px;
 
-                h3 {
-                    background-color: #333333;
-                    color: #fff;
-                    border-radius: 10px;
-                    width: 100%;
-                    height: 50px;
-                    line-height: 50px;
-                    margin-bottom: 17px;
-                    font-size: 20px;
-                }
-            }
+//                 h3 {
+//                     background-color: #333333;
+//                     color: #fff;
+//                     border-radius: 10px;
+//                     width: 100%;
+//                     height: 50px;
+//                     line-height: 50px;
+//                     margin-bottom: 17px;
+//                     font-size: 20px;
+//                 }
+//             }
 
-            .box.red {
-                background-color: #FEF3F3;
+//             .box.red {
+//                 background-color: #FEF3F3;
 
-                h3 {
-                    background-color: #E92727;
-                }
+//                 h3 {
+//                     background-color: #E92727;
+//                 }
 
-            }
+//             }
 
-            .box.green {
-                background-color: #EFF9FB;
+//             .box.green {
+//                 background-color: #EFF9FB;
 
-                h3 {
-                    background-color: #3C97AB;
-                }
-            }
+//                 h3 {
+//                     background-color: #3C97AB;
+//                 }
+//             }
 
-            .box.blue {
-                background-color: #E9EFF8;
+//             .box.blue {
+//                 background-color: #E9EFF8;
 
-                h3 {
-                    background-color: #1D75E1;
-                }
-            }
+//                 h3 {
+//                     background-color: #1D75E1;
+//                 }
+//             }
 
-            .box.purple {
-                background-color: #F5EFFA;
+//             .box.purple {
+//                 background-color: #F5EFFA;
 
-                h3 {
-                    background-color: #A36CD4;
-                }
-            }
+//                 h3 {
+//                     background-color: #A36CD4;
+//                 }
+//             }
 
-            .box.orange {
-                background-color: #FFF8F3;
+//             .box.orange {
+//                 background-color: #FFF8F3;
 
-                h3 {
-                    background-color: #F7941C;
-                }
-            }
+//                 h3 {
+//                     background-color: #F7941C;
+//                 }
+//             }
 
-        }
+//         }
 
-        .name-box {
-            margin-bottom: 20px;
+//         .name-box {
+//             margin-bottom: 20px;
 
-            .img-area {
-                flex-shrink: 0;
-                margin-right: 30px;
-                width: 300px;
-                height: 180px;
-                background-color: #EFF1FA;
-                border-radius: 20px;
-                align-items: center;
-                justify-content: center;
-                display: flex;
+//             .img-area {
+//                 flex-shrink: 0;
+//                 margin-right: 30px;
+//                 width: 300px;
+//                 height: 180px;
+//                 background-color: #EFF1FA;
+//                 border-radius: 20px;
+//                 align-items: center;
+//                 justify-content: center;
+//                 display: flex;
 
 
-                .img {
-                    position: relative;
-                    display: flex;
-                    justify-self: center;
-                    background-color: #fff;
-                    width: 92px;
-                    height: 110px;
-                    padding: 8px;
+//                 .img {
+//                     position: relative;
+//                     display: flex;
+//                     justify-self: center;
+//                     background-color: #fff;
+//                     width: 92px;
+//                     height: 110px;
+//                     padding: 8px;
 
-                    .close-btn {
-                        position: absolute;
-                        top: 0;
-                        right: 10px;
-                    }
+//                     .close-btn {
+//                         position: absolute;
+//                         top: 0;
+//                         right: 10px;
+//                     }
 
-                    img {
+//                     img {
 
-                        object-fit: cover;
-                        width: 100%;
-                        height: 100%;
-                    }
-                }
-            }
+//                         object-fit: cover;
+//                         width: 100%;
+//                         height: 100%;
+//                     }
+//                 }
+//             }
 
-            .img-area.column {
-                flex-direction: column;
-            }
+//             .img-area.column {
+//                 flex-direction: column;
+//             }
 
-            form {
-                input[readonly] {
-                    border-color: #fff;
-                    background-color: #fff !important;
-                    cursor: context-menu;
-                }
+//             form {
+//                 input[readonly] {
+//                     border-color: #fff;
+//                     background-color: #fff !important;
+//                     cursor: context-menu;
+//                 }
 
-                .col-12 {
-                    input {
-                        margin: 9px 10px;
-                    }
+//                 .col-12 {
+//                     input {
+//                         margin: 9px 10px;
+//                     }
 
-                    label {
-                        line-height: 48px;
-                    }
-                }
-            }
+//                     label {
+//                         line-height: 48px;
+//                     }
+//                 }
+//             }
 
-        }
+//         }
 
-        .sch-form-wrap {
-            justify-self: end;
-            margin-bottom: 20px;
+//         .sch-form-wrap {
+//             justify-self: end;
+//             margin-bottom: 20px;
 
-            .input-group {
+//             .input-group {
 
-                .form-select,
-                .form-control {
-                    height: 40px;
-                    border-color: #C7CFE3;
-                    font-size: 16px;
-                }
+//                 .form-select,
+//                 .form-control {
+//                     height: 40px;
+//                     border-color: #C7CFE3;
+//                     font-size: 16px;
+//                 }
 
-                .form-control {
-                    padding-right: 30px;
-                    padding-left: 10px;
-                }
+//                 .form-control {
+//                     padding-right: 30px;
+//                     padding-left: 10px;
+//                 }
 
-                .ico-sch {
-                    right: 5px;
-                }
-            }
+//                 .ico-sch {
+//                     right: 5px;
+//                 }
+//             }
 
-        }
+//         }
 
-        .sch-form-wrap.title-wrap {
-            justify-content: space-between;
-            width: 100%;
+//         .sch-form-wrap.title-wrap {
+//             justify-content: space-between;
+//             width: 100%;
 
-            h3 {
-                img {
-                    margin: 5px 5px 0 0;
-                }
-            }
+//             h3 {
+//                 img {
+//                     margin: 5px 5px 0 0;
+//                 }
+//             }
 
-            .input-group {
-                width: auto;
+//             .input-group {
+//                 width: auto;
 
-            }
-        }
+//             }
+//         }
 
-        p.require {
-            text-align: right;
+//         p.require {
+//             text-align: right;
 
-            img {
-                margin-top: 9px;
-            }
-        }
+//             img {
+//                 margin-top: 9px;
+//             }
+//         }
 
-        .card-body {
-            height: 100%;
-            .flex {
-                display: flex;
-                align-items: center;
-            }
+//         .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;
-            }
+//             .flex.sb {
+//                 justify-content: space-between;
+//             }
 
-            .card-title {
-                margin-bottom: 20px;
-            }
+//             .card-title {
+//                 margin-bottom: 20px;
+//             }
 
-            .sub {
-                margin-right: 20px;
+//             .sub {
+//                 margin-right: 20px;
+
+//                 img {
+//                     width: 50px;
+//                     height: 50px;
+//                 }
+
+//                 .date {
+//                     margin-left: 10px;
+//                 }
+//             }
+
+//             .sch-wrap {
+//                 border: 1px solid #213F9A;
+//                 padding: 20px;
+//                 border-radius: 10px;
+//                 margin-bottom: 20px;
+
+//                 .buttons {
+//                     gap: 5px;
+//                     margin-top: 0;
+//                 }
+
+//                 .sch-form-wrap {
+//                     margin-bottom: 0;
+//                 }
+//             }
+
+//             .sch-form-wrap.search {
+//                 position: relative;
+//                 flex-direction: column;
+//                 background-color: #EFF1FA;
+//                 padding: 20px;
+//                 border-radius: 10px;
+//                 margin-right: 20px;
+//                 width: 420px;
+//                 height: 78rem;
+
+//                 .sidemenu {
+//                     max-height: 66rem;
+//                     overflow-y: auto;
+//                 }
+
+//                 details {
+//                     width: 100%;
+
+//                     summary {
+//                         border: 0;
+//                         align-items: center;
+//                         justify-content: flex-start;
+//                         gap: 5px;
+
+//                         .icon {
+//                             display: block;
+//                         }
+
+//                         p {
+//                             color: #213F9A;
+//                             font-weight: 700;
+//                             margin-right: 10px;
+//                         }
+//                     }
+
+//                     .arrow {
+//                         margin-right: 10px;
+//                     }
+
+//                     li {
+//                         margin-left: 40px;
+
+//                         a {
+//                             justify-content: flex-start;
+//                             align-items: center;
+
+//                             img {
+//                                 margin-right: 10px;
+//                             }
+//                         }
+//                     }
+
+//                 }
+
+//                 .buttons {
+//                     position: absolute;
+//                     bottom: 40px;
+//                 }
+
+//                 .input-group {
+//                     display: block;
+//                     margin-bottom: 20px;
+//                 }
+
+//                 table {
+//                     width: 100%;
+
+//                     thead {
+
+//                         th {
+//                             background-color: #C7CFE3;
+//                             position: sticky;
+//                             top: -1px;
+//                             border: 1px solid #C7CFE3;
+//                             border-right: 1px solid #C7CFE3;
+//                         }
+//                     }
+//                 }
+
+//                 .table-scroll {
+//                     max-height: max-content;
+//                     /* 원하는 높이 설정 */
+//                     overflow-y: auto;
+//                 }
+//             }
+
+//             form {
+//                 width: 100%;
+//                 border: 1px solid #C7CFE3;
+//                 border-radius: 10px;
+//                 overflow: hidden;
+
+//                 .second-label {
+//                     background-color: #fff !important;
+//                 }
+
+//             }
+
+//             form.salary {
+//                 display: flex;
+
+//                 .yearsalary {
+//                     width: 100%;
+//                 }
+//             }
+
+//             .col-12 {
+//                 min-height: 4rem;
+//                 width: 100%;
+//                 display: flex;
+//                 border-bottom: 1px solid #C7CFE3;
+
+//                 label {
+//                     width: 140px;
+//                     background: #EFF1FA;
+//                     font-weight: 600;
+//                     font-size: 16px;
+//                     text-align: center;
+//                     flex-shrink: 0;
+//                     position: relative;
+//                     display: flex;
+//                     border-right: 1px solid #C7CFE3;
+//                     align-items: center;
+//                     justify-content: center;
+
+//                     p {
+//                         position: relative;
+//                     }
+
+//                     button {
+//                         margin-left: 5px;
+//                     }
+//                 }
+
+//                 p.require {
+//                     position: absolute;
+//                     right: -13px;
+//                     top: 0;
+//                 }
+
+//                 select,
+//                 input {
+//                     margin: 9px 10px;
+//                     border-color: #DDDDDD;
+//                     height: var(--tk-input-h-sm);
+//                 }
+
+//                 .form-control[readonly] {
+//                     background-color: #EFF1FA;
+//                 }
+
+//                 .invalid-feedback {
+//                     color: #E92727;
+//                     font-size: 13px;
+//                 }
+
+//                 .box {
+//                     margin: 15px 10px;
+
+//                     input {
+//                         margin: 0;
+//                     }
 
-                img {
-                    width: 50px;
-                    height: 50px;
-                }
+//                     p {
+//                         margin-top: 5px;
+//                     }
+//                 }
 
-                .date {
-                    margin-left: 10px;
-                }
-            }
+//                 .approval-container {
+//                     display: flex;
+//                     flex-direction: column;
+//                     gap: 8px;
+//                     margin: 15px 10px;
 
-            .sch-wrap {
-                border: 1px solid #213F9A;
-                padding: 20px;
-                border-radius: 10px;
-                margin-bottom: 20px;
+//                     .addapproval {
+//                         gap: 5px;
+//                         align-items: center;
 
-                .buttons {
-                    gap: 5px;
-                    margin-top: 0;
-                }
+//                         .form-control,
+//                         .form-select {
+//                             margin: 0;
+//                             flex-shrink: 0;
+//                         }
 
-                .sch-form-wrap {
-                    margin-bottom: 0;
-                }
-            }
+//                         .delete-button {
+//                             margin-left: 10px;
+//                         }
 
-            .sch-form-wrap.search {
-                position: relative;
-                flex-direction: column;
-                background-color: #EFF1FA;
-                padding: 20px;
-                border-radius: 10px;
-                margin-right: 20px;
-                width: 420px;
-                height: 78rem;
+//                         label {
+//                             width: 95px;
+//                             line-height: 30px;
+//                             background-color: #333333;
+//                             color: #fff;
+//                             border-radius: 5px;
+//                         }
+//                     }
+//                 }
 
-                .sidemenu {
-                    max-height: 66rem;
-                    overflow-y: auto;
-                }
+//                 .tbl-wrap {
+//                     width: 100%;
 
-                details {
-                    width: 100%;
+//                     table {
+//                         thead {
+//                             tr {
+//                                 th {
+//                                     border-right: 1px solid #C7CFE3;
+//                                     border-bottom: 1px solid #C7CFE3;
 
-                    summary {
-                        border: 0;
-                        align-items: center;
-                        justify-content: flex-start;
-                        gap: 5px;
+//                                 }
 
-                        .icon {
-                            display: block;
-                        }
+//                                 th:last-child {
+//                                     border-right: 0;
+//                                 }
+//                             }
 
-                        p {
-                            color: #213F9A;
-                            font-weight: 700;
-                            margin-right: 10px;
-                        }
-                    }
+//                         }
 
-                    .arrow {
-                        margin-right: 10px;
-                    }
+//                         tbody {
+//                             td {
+//                                 border-right: 1px solid #C7CFE3;
 
-                    li {
-                        margin-left: 40px;
+//                                 input {
+//                                     margin: 0;
+//                                 }
 
-                        a {
-                            justify-content: flex-start;
-                            align-items: center;
 
-                            img {
-                                margin-right: 10px;
-                            }
-                        }
-                    }
+//                             }
 
-                }
+//                             td:last-child {
+//                                 border-right: 0;
+//                             }
 
-                .buttons {
-                    position: absolute;
-                    bottom: 40px;
-                }
+//                             tr:last-child td {
+//                                 border-bottom: 0;
+//                             }
 
-                .input-group {
-                    display: block;
-                    margin-bottom: 20px;
-                }
+//                         }
+//                     }
 
-                table {
-                    width: 100%;
+//                 }
 
-                    thead {
 
-                        th {
-                            background-color: #C7CFE3;
-                            position: sticky;
-                            top: -1px;
-                            border: 1px solid #C7CFE3;
-                            border-right: 1px solid #C7CFE3;
-                        }
-                    }
-                }
+//             }
 
-                .table-scroll {
-                    max-height: max-content;
-                    /* 원하는 높이 설정 */
-                    overflow-y: auto;
-                }
-            }
+//             .col-12.form-title {
+//                 justify-content: center;
+//                 background-color: #C7CFE3;
+//                 font-weight: 600;
+//                 align-items: center;
+//                 gap: 10px;
+//             }
 
-            form {
-                width: 100%;
-                border: 1px solid #C7CFE3;
-                border-radius: 10px;
-                overflow: hidden;
+//             .col-12.return {
+//                 background-color: #FFF2F2 !important;
 
-                .second-label {
-                    background-color: #fff !important;
-                }
+//                 .form-label {
+//                     background-color: #FBC1C1;
+//                 }
 
-            }
+//                 .form-control {
+//                     background-color: transparent !important;
+//                     border-color: transparent !important;
+//                 }
+//             }
 
-            form.salary {
-                display: flex;
+//             .border-x {
+//                 border: 0;
+//             }
 
-                .yearsalary {
-                    width: 100%;
-                }
-            }
+//             .buttons {
+//                 display: flex;
+//                 gap: 10px;
+//                 justify-content: end;
+//                 margin-top: 5rem;
 
-            .col-12 {
-                min-height: 4rem;
-                width: 100%;
-                display: flex;
-                border-bottom: 1px solid #C7CFE3;
+//                 .btn-red {
+//                     border-color: #E92727;
+//                     color: #E92727;
+//                     background-color: #EFF1FA;
+//                 }
 
-                label {
-                    width: 140px;
-                    background: #EFF1FA;
-                    font-weight: 600;
-                    font-size: 16px;
-                    text-align: center;
-                    flex-shrink: 0;
-                    position: relative;
-                    display: flex;
-                    border-right: 1px solid #C7CFE3;
-                    align-items: center;
-                    justify-content: center;
+//             }
 
-                    p {
-                        position: relative;
-                    }
+//             .hyuga {
+//                 label {
+//                     line-height: 40rem;
+//                 }
 
-                    button {
-                        margin-left: 5px;
-                    }
-                }
+//                 input.textarea {
+//                     min-height: 40rem;
+//                 }
+//             }
 
-                p.require {
-                    position: absolute;
-                    right: -13px;
-                    top: 0;
-                }
+//             .chuljang {
+//                 label {
+//                     line-height: 17rem;
+//                 }
 
-                select,
-                input {
-                    margin: 9px 10px;
-                    border-color: #DDDDDD;
-                    height: var(--tk-input-h-sm);
-                }
+//                 input.textarea {
+//                     min-height: 17rem;
+//                 }
+//             }
 
-                .form-control[readonly] {
-                    background-color: #EFF1FA;
-                }
+//             .form-card {
+//                 position: relative;
+//                 border: 1px solid #CCCCCC;
+//                 border-radius: 10px;
+//                 padding: 30px;
 
-                .invalid-feedback {
-                    color: #E92727;
-                    font-size: 13px;
-                }
+//                 h1 {
+//                     margin: 18px 0 48px 0;
+//                     text-align: center;
+//                 }
 
-                .box {
-                    margin: 15px 10px;
+//                 .hyuga {
+//                     label {
+//                         line-height: 40rem;
+//                     }
 
-                    input {
-                        margin: 0;
-                    }
+//                     input.textarea {
+//                         min-height: 40rem;
+//                     }
+//                 }
 
-                    p {
-                        margin-top: 5px;
-                    }
-                }
+//                 .chuljang {
+//                     label {
+//                         line-height: 17rem;
+//                     }
 
-                .approval-container {
-                    display: flex;
-                    flex-direction: column;
-                    gap: 8px;
-                    margin: 15px 10px;
+//                     input.textarea {
+//                         min-height: 17rem;
+//                     }
+//                 }
 
-                    .addapproval {
-                        gap: 5px;
-                        align-items: center;
+//                 .tbl2 {
+//                     width: 30rem;
 
-                        .form-control,
-                        .form-select {
-                            margin: 0;
-                            flex-shrink: 0;
-                        }
+//                     table {
+//                         .thead {
+//                             .th {
+//                                 writing-mode: vertical-rl;
+//                                 padding: 0;
+//                                 width: 50px;
+//                             }
+//                         }
+//                     }
+//                 }
 
-                        .delete-button {
-                            margin-left: 10px;
-                        }
+//                 .approval-box {
+//                     position: absolute;
+//                     right: 30px;
+//                     top: 30px;
+//                 }
 
-                        label {
-                            width: 95px;
-                            line-height: 30px;
-                            background-color: #333333;
-                            color: #fff;
-                            border-radius: 5px;
-                        }
-                    }
-                }
 
-                .tbl-wrap {
-                    width: 100%;
 
-                    table {
-                        thead {
-                            tr {
-                                th {
-                                    border-right: 1px solid #C7CFE3;
-                                    border-bottom: 1px solid #C7CFE3;
 
-                                }
+//             }
 
-                                th:last-child {
-                                    border-right: 0;
-                                }
-                            }
+//             .detail {
+//                 input[readonly] {
+//                     border-color: #fff;
+//                     background-color: #fff !important;
+//                     cursor: context-menu;
+//                 }
+//             }
 
-                        }
+//             .tbl2 {
+//                 table {
+//                     table-layout: fixed;
+//                     margin-bottom: 10px;
 
-                        tbody {
-                            td {
-                                border-right: 1px solid #C7CFE3;
+//                     .thead {
+//                         .th {
+//                             background-color: #C7CFE3;
+//                         }
 
-                                input {
-                                    margin: 0;
-                                }
+//                         td {
+//                             background-color: #EFF1FA;
+//                             height: 40px;
+//                             font-weight: 700;
+//                         }
+//                     }
 
+//                     td {
+//                         padding: 0;
+//                         border: 1px solid #C7CFE3;
+//                     }
 
-                            }
+//                 }
+//             }
 
-                            td:last-child {
-                                border-right: 0;
-                            }
+//             .tbl3 {
 
-                            tr:last-child td {
-                                border-bottom: 0;
-                            }
+//                 th,
+//                 td {
+//                     border: 0;
+//                     border-bottom: 0 !important;
+//                 }
 
-                        }
-                    }
+//                 thead {
+//                     background-color: #EFF1FA;
 
-                }
+//                     th {
+//                         padding: 10px;
+//                     }
+//                 }
 
+//                 tbody {
+//                     td {
+//                         padding: 0 10px;
 
-            }
+//                         .form-select {
+//                             width: -webkit-fill-available;
+//                         }
+//                     }
 
-            .col-12.form-title {
-                justify-content: center;
-                background-color: #C7CFE3;
-                font-weight: 600;
-                align-items: center;
-                gap: 10px;
-            }
+//                     tr:last-child td {
+//                         border-bottom: 0;
+//                     }
+//                 }
+//             }
 
-            .col-12.return {
-                background-color: #FFF2F2 !important;
 
-                .form-label {
-                    background-color: #FBC1C1;
-                }
+//         }
 
-                .form-control {
-                    background-color: transparent !important;
-                    border-color: transparent !important;
-                }
-            }
+//         .cost-statue {
+//             border: 1px solid #213F9A;
+//             border-radius: 10px;
+//             display: flex;
+//             margin-bottom: 10px;
+//             justify-content: center;
+//             align-items: center;
 
-            .border-x {
-                border: 0;
-            }
+//             .costtitle {
+//                 font-size: 18px;
+//                 font-weight: 700;
+//                 margin-right: 3rem;
+//             }
 
-            .buttons {
-                display: flex;
-                gap: 10px;
-                justify-content: end;
-                margin-top: 5rem;
+//             .col-12 {
+//                 display: flex;
+//                 align-items: center;
 
-                .btn-red {
-                    border-color: #E92727;
-                    color: #E92727;
-                    background-color: #EFF1FA;
-                }
+//                 p {
+//                     font-weight: 600;
+//                 }
 
-            }
+//                 input {
+//                     width: 140px;
+//                 }
+//             }
+//         }
+//     }
+// }
 
-            .hyuga {
-                label {
-                    line-height: 40rem;
-                }
+// .primary {
+//     background-color: #213F9A !important;
+// }
 
-                input.textarea {
-                    min-height: 40rem;
-                }
-            }
+// a:focus {
+//     outline: 0;
+// }
 
-            .chuljang {
-                label {
-                    line-height: 17rem;
-                }
+// *:focus {
+//     outline: 0;
+// }
 
-                input.textarea {
-                    min-height: 17rem;
-                }
-            }
+// .file {
+//     background-color: #EFF1FA;
+//     width: 120px;
+//     border: #213F9A 1px solid;
+//     border-radius: 10px;
+//     padding: 7px 0;
+//     margin-top: 10px;
+// }
 
-            .form-card {
-                position: relative;
-                border: 1px solid #CCCCCC;
-                border-radius: 10px;
-                padding: 30px;
+// .file-label {
+//     width: inherit !important;
+//     display: flex;
+//     gap: 5px;
+//     justify-content: center;
+//     line-height: 0 !important;
+//     cursor: pointer;
+//     align-items: center;
 
-                h1 {
-                    margin: 18px 0 48px 0;
-                    text-align: center;
-                }
+//     p {
+//         color: #000;
+//     }
+// }
 
-                .hyuga {
-                    label {
-                        line-height: 40rem;
-                    }
+// .file-name {
+//     max-width: 150px;
+//     white-space: nowrap;
+//     overflow: hidden;
+//     text-overflow: ellipsis;
+//     display: inline-block;
+//     /* or block depending on layout */
+//     vertical-align: middle;
+//     /* optional */
+// }
 
-                    input.textarea {
-                        min-height: 40rem;
-                    }
-                }
+// input[type="file"] {
+//     display: none;
+// }
 
-                .chuljang {
-                    label {
-                        line-height: 17rem;
-                    }
+// input[type="date"] {
+//     width: 200px;
+//     padding-right: 10px;
+// }
 
-                    input.textarea {
-                        min-height: 17rem;
-                    }
-                }
+// input[type="button"] {
+//     width: 200px;
+//     background-color: #333;
+//     color: #fff;
+//     padding-right: 10px;
+// }
 
-                .tbl2 {
-                    width: 30rem;
+// table {
+//     thead {
+//         .toptitle {
+//             th {
+//                 background-color: #B7C2ED !important;
+//             }
+//         }
 
-                    table {
-                        .thead {
-                            .th {
-                                writing-mode: vertical-rl;
-                                padding: 0;
-                                width: 50px;
-                            }
-                        }
-                    }
-                }
+//         .middletitle {
+//             th {
+//                 background-color: #DAE0F7 !important;
+//             }
+//         }
 
-                .approval-box {
-                    position: absolute;
-                    right: 30px;
-                    top: 30px;
-                }
+//         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;
+//             }
+//         }
 
-            .detail {
-                input[readonly] {
-                    border-color: #fff;
-                    background-color: #fff !important;
-                    cursor: context-menu;
-                }
-            }
+//     }
+// }
 
-            .tbl2 {
-                table {
-                    table-layout: fixed;
-                    margin-bottom: 10px;
+// .chk-area {
+//     .form-check {
+//         display: flex;
+//         align-items: center;
+//         justify-content: center;
+//     }
 
-                    .thead {
-                        .th {
-                            background-color: #C7CFE3;
-                        }
+//     label {
+//         padding-left: 30px !important;
+//         line-height: 0;
+//     }
 
-                        td {
-                            background-color: #EFF1FA;
-                            height: 40px;
-                            font-weight: 700;
-                        }
-                    }
+// }
 
-                    td {
-                        padding: 0;
-                        border: 1px solid #C7CFE3;
-                    }
+// label:focus,
+// button:focus {
+//     outline: 0;
+// }
 
-                }
-            }
+// .input-radio {
+//     .chk-area {
+//         margin: 9px 0 9px 10px;
 
-            .tbl3 {
+//         .form-check {
+//             label {
+//                 width: auto !important;
+//                 line-height: 0 !important;
+//                 background-color: #fff !important;
+//                 border-right: 0 !important;
+//             }
+//         }
+//     }
+// }
 
-                th,
-                td {
-                    border: 0;
-                    border-bottom: 0 !important;
-                }
+// .popup-overlay {
+//     position: fixed;
+//     top: 0;
+//     left: 0;
+//     width: 100%;
+//     height: 100%;
+//     background-color: rgba(0, 0, 0, 0.5);
+//     display: flex;
+//     align-items: center;
+//     justify-content: center;
+//     z-index: 999;
+// }
 
-                thead {
-                    background-color: #EFF1FA;
+// .popup-content {
+//     position: relative;
+//     background: white;
+//     padding: 20px;
+//     border-radius: 10px;
 
-                    th {
-                        padding: 10px;
-                    }
-                }
+//     text-align: center;
 
-                tbody {
-                    td {
-                        padding: 0 10px;
+//     .form-control {
+//         margin: 0 !important;
+//     }
 
-                        .form-select {
-                            width: -webkit-fill-available;
-                        }
-                    }
+//     .card-title {
+//         text-align: left;
+//     }
 
-                    tr:last-child td {
-                        border-bottom: 0;
-                    }
-                }
-            }
+//     .ico-sch {
+//         right: 17px !important;
+//     }
 
+//     table {
 
-        }
+//         th,
+//         td {
 
-        .cost-statue {
-            border: 1px solid #213F9A;
-            border-radius: 10px;
-            display: flex;
-            margin-bottom: 10px;
-            justify-content: center;
-            align-items: center;
+//             border-right: 1px solid #C7CFE3 !important;
+//         }
+//     }
 
-            .costtitle {
-                font-size: 18px;
-                font-weight: 700;
-                margin-right: 3rem;
-            }
+//     .close-btn {
+//         position: absolute;
+//         top: 20px;
+//         right: 20px;
+//     }
 
-            .col-12 {
-                display: flex;
-                align-items: center;
+//     .btn.hyuga {
+//         background-color: #1D75E1;
+//     }
 
-                p {
-                    font-weight: 600;
-                }
+//     .btn.chuljang {
+//         background-color: #219A8C;
+//     }
+// }
 
-                input {
-                    width: 140px;
-                }
-            }
-        }
-    }
-}
+// .datepicker-conts {
+//     margin-bottom: 20px;
+// }
 
-.primary {
-    background-color: #213F9A !important;
-}
+// .datepicker-input {
+//     display: flex;
+//     justify-content: end;
+//     align-items: center;
+//     gap: 5px;
 
-a:focus {
-    outline: 0;
-}
+//     .form-control {
+//         padding-right: 16px !important;
+//         border-color: #C7CFE3;
+//     }
 
-*:focus {
-    outline: 0;
-}
+//     mark {
+//         background-color: transparent;
+//     }
+// }
 
-.file {
+.img-area{
+    @include flex-layout(flex, center, center);
+    width: 300px;
     background-color: #EFF1FA;
-    width: 120px;
-    border: #213F9A 1px solid;
-    border-radius: 10px;
-    padding: 7px 0;
-    margin-top: 10px;
-}
-
-.file-label {
-    width: inherit !important;
-    display: flex;
-    gap: 5px;
-    justify-content: center;
-    line-height: 0 !important;
-    cursor: pointer;
-    align-items: center;
-
-    p {
-        color: #000;
-    }
-}
-
-.file-name {
-    max-width: 150px;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    display: inline-block;
-    /* or block depending on layout */
-    vertical-align: middle;
-    /* optional */
-}
-
-input[type="file"] {
-    display: none;
-}
-
-input[type="date"] {
-    width: 200px;
-    padding-right: 10px;
-}
-
-input[type="button"] {
-    width: 200px;
-    background-color: #333;
-    color: #fff;
-    padding-right: 10px;
-}
-
-table {
-    thead {
-        .toptitle {
-            th {
-                background-color: #B7C2ED !important;
-            }
-        }
-
-        .middletitle {
-            th {
-                background-color: #DAE0F7 !important;
-            }
-        }
-
-        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;
-            }
-        }
-
-    }
-}
-
-.chk-area {
-    .form-check {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-    }
-
-    label {
-        padding-left: 30px !important;
-        line-height: 0;
-    }
-
-}
-
-label:focus,
-button:focus {
-    outline: 0;
-}
-
-.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;
-            }
-        }
-    }
-}
-
-.popup-overlay {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-color: rgba(0, 0, 0, 0.5);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    z-index: 999;
-}
-
-.popup-content {
-    position: relative;
-    background: white;
-    padding: 20px;
-    border-radius: 10px;
-
-    text-align: center;
-
-    .form-control {
-        margin: 0 !important;
-    }
-
-    .card-title {
-        text-align: left;
-    }
-
-    .ico-sch {
-        right: 17px !important;
-    }
-
-    table {
-
-        th,
-        td {
-
-            border-right: 1px solid #C7CFE3 !important;
-        }
-    }
-
-    .close-btn {
-        position: absolute;
-        top: 20px;
-        right: 20px;
-    }
-
-    .btn.hyuga {
-        background-color: #1D75E1;
-    }
-
-    .btn.chuljang {
-        background-color: #219A8C;
-    }
-}
-
-.datepicker-conts {
-    margin-bottom: 20px;
-}
-
-.datepicker-input {
-    display: flex;
-    justify-content: end;
-    align-items: center;
-    gap: 5px;
-
-    .form-control {
-        padding-right: 16px !important;
-        border-color: #C7CFE3;
-    }
-
-    mark {
-        background-color: transparent;
-    }
+    border-radius: 2rem;
+    padding: 3rem
 }
 
 .schedule-zone {

 }
 
 .tbl-wrap {
-    table.buseo {
-        tbody {
-            tr {
-                cursor: pointer;
+    border: 1px solid var(--#{$prefix}secondary-30);
+    border-radius: 1rem;
+	.tbl {
+        
+		&.data {
+            tr{
+                &:last-child {
+                    td,th{
+                        border-bottom: 0;
+                    }
+                }
+            }
+			th,
+			td {
+				padding: var(--#{$prefix}spacer-1) var(--#{$prefix}spacer-4);
+				border-bottom: 1px solid;
+				line-height: $line-height-base;
+				vertical-align: middle;
+			}
+			tbody {
+				th{
+                    background-color: var(--#{$prefix}secondary-5);
+                }
+				
+			}
+		}
+		&.radius-table{
+            tr{
+                &:first-child {
+                    th {
+                        border-radius: 1rem 0 0 0;
+                    }
+                    td {
+                        border-radius: 0 1rem 0 0;
+                    }
+                }
+                &:last-child {
+                    th {
+                       &:first-child {
+                            border-radius: 0 0 0 1rem;
+                        }
+                    }
+                    td {
+                        border-radius: 0 0 1rem 0;
+                    }
+                }
             }
         }
-    }
-
-    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);
+
+    &.justify-between {
+        justify-content: space-between;
+    }   
+    &.justify-end {
+        justify-content: flex-end;
+    } 
+    
+    &.aling-start {
+        align-items: flex-start;
+    }   
+    &.aling-end {
+        align-items: flex-end;
+    }  
+
     gap: 1rem;
 }

25da134

be38d5e

client/resources/scss/admin/layout.scss

--- client/resources/scss/admin/layout.scss

+++ client/resources/scss/admin/layout.scss


     display: flex;
     justify-content: space-between;
     margin-bottom: 20px;
-    .title{width: 350px; flex-shrink: 0; text-align: center;}
+    .title{width: 250px; flex-shrink: 0; text-align: center;}
     .user-info{
         display: flex;
         justify-self: flex-end;

25da134

be38d5e

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

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

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


   <div class="card ">
     <div class="card-body">
       <h2 class="card-title">부서별 근태현황</h2>
-        <div class="name-box flex sb simple">
+        <div class="d-flex">
           <div class="img-area">
             <div class="img"><img :src="photoicon" alt="">
             </div>
           </div>
-          <form class="row g-3 needs-validation " :class="{ 'was-validated': formSubmitted }"
-            @submit.prevent="handleRegister" novalidate>
-            <div class="col-12">
-              <label for="yourName" class="form-label">아이디</label>
-              <input v-model="name" type="text" name="name" class="form-control" id="yourName" required readonly
-                placeholder="admin">
-            </div>
-            <div class="col-12 ">
-              <div class="col-12 border-x">
-                <label for="youremail" class="form-label ">이름<p class="require"><img :src="require" alt=""></p></label>
-                <input v-model="email" type="text" name="username" class="form-control" id="youremail" required readonly>
-              </div>
+          <div class="tbl-wrap" style="width: calc(100% - 310px);">
+            <table class="tbl data radius-table">
+              <tbody>
+                <tr>
+                  <th>아이디</th>
+                  <td colspan="3">
+                    <input v-model="name" type="text" name="name" class="form-control sm" id="yourName" required readonly placeholder="admin" />
+                  </td>
+                </tr>
+                <tr>
+                  <th >이름</th>
+                  <td>
+                    <input v-model="email" type="text" name="username" class="form-control sm" id="youremail" required readonly />
+                  </td>
+                  <th>부서</th>
+                  <td>
+                    <input v-model="password" type="password" name="password" class="form-control sm" id="yourPassword" required readonly placeholder="주식회사 테이큰 소프트" />
+                  </td>
+                </tr>
+                <tr>
+                  <th>직급</th>
+                  <td>
+                    <input v-model="email" type="text" name="username" class="form-control sm" id="youremail2" required readonly placeholder="과장" />
+                  </td>
+                  <th>직책</th>
+                  <td>
+                    <input v-model="password" type="password" name="password" class="form-control sm" id="yourPassword2" required readonly placeholder="팀장" />
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
 
-              <div class="col-12 border-x">
-                <label for="yourPassword" class="form-label">부서</label>
-                <input v-model="password" type="password" name="password" class="form-control" id="yourPassword"
-                  required readonly placeholder="주식회사 테이큰 소프트">
-              </div>
-            </div>
-            <div class="col-12 border-x">
-              <div class="col-12 border-x">
-                <label for="youremail" class="form-label">직급</label>
-                <input v-model="email" type="text" name="username" class="form-control" id="youremail" required readonly
-                  placeholder="과장">
-              </div>
-
-              <div class="col-12 border-x">
-                <label for="yourPassword" class="form-label">직책</label>
-                <input v-model="password" type="password" name="password" class="form-control" id="yourPassword"
-                  required readonly placeholder="팀장">
-              </div>
-            </div>
-
-
-          </form>
         </div>
 
-      <div class="sch-form-wrap ">
-        <div class="input-group">
-          <select name="" id="" class="form-select">
+      <div class="sch-form-wrap">
+        <div class="input-group d-flex justify-end">
+          <select name="" id="" class="form-select sm">
               <option :value="currentYear">{{ currentYear }}년</option>
               <option value="all">전체</option>
               <option v-for="year in remainingYears" :key="year" :value="year" v-if="year !== currentYear">
                 {{ year }}년
               </option>
             </select>
-            <select name="" id="" class="form-select">
+            <select name="" id="" class="form-select sm">
               <option :value="currentMonth">{{ currentMonth }}월</option>
               <option value="all">전체</option>
               <option v-for="month in remainingMonths" :key="month" :value="month" v-if="month !== currentMonth">
                 {{ month }}월
               </option>
             </select>
-          <select name="" id="" class="form-select">
+          <select name="" id="" class="form-select sm">
                 <option value="">전체</option>
                 <option value="">지각</option>
                 <option value="">조기퇴근</option>

                 <option value="">병가</option>
           </select>
         </div>
-
       </div>
-      <div class=" tbl-wrap tbl2">
+      <div class="tbl-wrap">
         <table class="tbl data">
-          <colgroup>
-            <col style="width: 150px;">
-            <col style="width: ">
-            <col style="width: ">
-            <col style="width: ">
-            <col style="width: ">
-            <col style="width: ">
-            <!-- 더 많은 열 설정 -->
-          </colgroup>
           <tbody>
-            <tr class="thead">
-              <td rowspan="2" class="th">근태 현황</td>
-              <td>지각</td>
-              <td>조기퇴근</td>
-              <td>결근</td>
-              <td>출장</td>
-              <td>주말출근</td>
+            <tr>
+              <th rowspan="2">근태 현황</th>
+              <th>지각</th>
+              <th>조기퇴근</th>
+              <th>결근</th>
+              <th>출장</th>
+              <th>주말출근</th>
             </tr>
             <tr>
               <td>{{ late }}</td>

           </tbody>
 
         </table>
+      </div>
+      <div class="tbl-wrap">
         <table class="tbl data">
-          <colgroup>
-            <col style="width: 150px;">
-            <col span="">
-            <col style="width: ">
-            <col style="width: ">
-            <col style="width: ">
-            <!-- 더 많은 열 설정 -->
-          </colgroup>
           <tbody>
-            <tr class="thead">
-              <td rowspan="2" class="th">휴가 현황</td>
-              <td>연차</td>
-              <td>대체휴가</td>
-              <td>공가</td>
-              <td>병가</td>
+            <tr>
+              <th rowspan="2">휴가 현황</th>
+              <th>연차</th>
+              <th>대체휴가</th>
+              <th>공가</th>
+              <th>병가</th>
             </tr>
             <tr>
               <td></td>

               <td></td>
             </tr>
           </tbody>
-
         </table>
       </div>
       <div class="tbl-wrap">
         <table id="myTable" class="tbl data">
-          <colgroup>
-            <col style="width: 200px;">
-            <col style=" width: ">
-          </colgroup>
           <thead>
             <tr>
               <th>연차 </th>

25da134

be38d5e

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

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

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

...	...	@@ -41,52 +41,34 @@
41	41
42	42	</div>
43	43	</div>
44		- <div class=" tbl-wrap tbl2">
45		- <table class="tbl data">
46		- <colgroup>
47		- <col style="width: 150px;">
48		- <col style="width: ">
49		- <col style="width: ">
50		- <col style="width: ">
51		- <col style="width: ">
52		- <col style="width: ">
53		- <!-- 더 많은 열 설정 -->
54		- </colgroup>
	44	+ <div class="tbl-wrap">
	45	+ <table class="tbl data mb30">
55	46	<tbody>
56		- <tr class="thead">
57		- <td rowspan="2" class="th">근태 현황</td>
58		- <td>지각</td>
59		- <td>조기퇴근</td>
60		- <td>결근</td>
61		- <td>출장</td>
62		- <td>주말출근</td>
	47	+ <tr>
	48	+ <th rowspan="2" style="width: 200px;">근태 현황</th>
	49	+ <th>지각</th>
	50	+ <th>조기퇴근</th>
	51	+ <th>결근</th>
	52	+ <th>출장</th>
	53	+ <th>주말출근</th>
63	54	</tr>
64	55	<tr>
65		- <td>{{ late }}</td>
66		- <td>{{ earlyLeave }}</td>
67		- <td>{{ absence }}</td>
68		- <td>{{ businessTrip }}</td>
69		- <td>{{ weekendWork }}</td>
70		- </tr>
	56	+ <td>{{ late }}</td>
	57	+ <td>{{ earlyLeave }}</td>
	58	+ <td>{{ absence }}</td>
	59	+ <td>{{ businessTrip }}</td>
	60	+ <td>{{ weekendWork }}</td>
	61	+ </tr>
71	62	</tbody>
72		-
73	63	</table>
74		- <table class="tbl data">
75		- <colgroup>
76		- <col style="width: 150px;">
77		- <col style="width: ">
78		- <col style="width: ">
79		- <col style="width: ">
80		- <col style="width: ">
81		- <!-- 더 많은 열 설정 -->
82		- </colgroup>
	64	+ <table class="tbl data mb30">
83	65	<tbody>
84		- <tr class="thead">
85		- <td rowspan="2" class="th">휴가 현황</td>
86		- <td>연차</td>
87		- <td>대체휴가</td>
88		- <td>공가</td>
89		- <td>병가</td>
	66	+ <tr>
	67	+ <th rowspan="2" style="width: 200px;">휴가 현황</th>
	68	+ <th>연차</th>
	69	+ <th>대체휴가</th>
	70	+ <th>공가</th>
	71	+ <th>병가</th>
90	72	</tr>
91	73	<tr>
92	74	<td></td>

Add a comment

Open 0
Closed 0

List

...	...	@@ -2,7 +2,7 @@
2	2	display: flex;
3	3	justify-content: space-between;
4	4	margin-bottom: 20px;
5		- .title{width: 350px; flex-shrink: 0; text-align: center;}
	5	+ .title{width: 250px; flex-shrink: 0; text-align: center;}
6	6	.user-info{
7	7	display: flex;
8	8	justify-self: flex-end;

...	...	@@ -2,65 +2,63 @@
2	2	<div class="card ">
3	3	<div class="card-body">
4	4	<h2 class="card-title">부서별 근태현황</h2>
5		- <div class="name-box flex sb simple">
	5	+ <div class="d-flex">
6	6	<div class="img-area">
7	7	<div class="img"><img :src="photoicon" alt="">
8	8	</div>
9	9	</div>
10		- <form class="row g-3 needs-validation " :class="{ 'was-validated': formSubmitted }"
11		- @submit.prevent="handleRegister" novalidate>
12		- <div class="col-12">
13		- <label for="yourName" class="form-label">아이디</label>
14		- <input v-model="name" type="text" name="name" class="form-control" id="yourName" required readonly
15		- placeholder="admin">
16		- </div>
17		- <div class="col-12 ">
18		- <div class="col-12 border-x">
19		- <label for="youremail" class="form-label ">이름<p class="require"><img :src="require" alt=""></p></label>
20		- <input v-model="email" type="text" name="username" class="form-control" id="youremail" required readonly>
21		- </div>
	10	+ <div class="tbl-wrap" style="width: calc(100% - 310px);">
	11	+ <table class="tbl data radius-table">
	12	+ <tbody>
	13	+ <tr>
	14	+ <th>아이디</th>
	15	+ <td colspan="3">
	16	+ <input v-model="name" type="text" name="name" class="form-control sm" id="yourName" required readonly placeholder="admin" />
	17	+ </td>
	18	+ </tr>
	19	+ <tr>
	20	+ <th >이름</th>
	21	+ <td>
	22	+ <input v-model="email" type="text" name="username" class="form-control sm" id="youremail" required readonly />
	23	+ </td>
	24	+ <th>부서</th>
	25	+ <td>
	26	+ <input v-model="password" type="password" name="password" class="form-control sm" id="yourPassword" required readonly placeholder="주식회사 테이큰 소프트" />
	27	+ </td>
	28	+ </tr>
	29	+ <tr>
	30	+ <th>직급</th>
	31	+ <td>
	32	+ <input v-model="email" type="text" name="username" class="form-control sm" id="youremail2" required readonly placeholder="과장" />
	33	+ </td>
	34	+ <th>직책</th>
	35	+ <td>
	36	+ <input v-model="password" type="password" name="password" class="form-control sm" id="yourPassword2" required readonly placeholder="팀장" />
	37	+ </td>
	38	+ </tr>
	39	+ </tbody>
	40	+ </table>
	41	+ </div>
22	42
23		- <div class="col-12 border-x">
24		- <label for="yourPassword" class="form-label">부서</label>
25		- <input v-model="password" type="password" name="password" class="form-control" id="yourPassword"
26		- required readonly placeholder="주식회사 테이큰 소프트">
27		- </div>
28		- </div>
29		- <div class="col-12 border-x">
30		- <div class="col-12 border-x">
31		- <label for="youremail" class="form-label">직급</label>
32		- <input v-model="email" type="text" name="username" class="form-control" id="youremail" required readonly
33		- placeholder="과장">
34		- </div>
35		-
36		- <div class="col-12 border-x">
37		- <label for="yourPassword" class="form-label">직책</label>
38		- <input v-model="password" type="password" name="password" class="form-control" id="yourPassword"
39		- required readonly placeholder="팀장">
40		- </div>
41		- </div>
42		-
43		-
44		- </form>
45	43	</div>
46	44
47		- <div class="sch-form-wrap ">
48		- <div class="input-group">
49		- <select name="" id="" class="form-select">
	45	+ <div class="sch-form-wrap">
	46	+ <div class="input-group d-flex justify-end">
	47	+ <select name="" id="" class="form-select sm">
50	48	<option :value="currentYear">{{ currentYear }}년</option>
51	49	<option value="all">전체</option>
52	50	<option v-for="year in remainingYears" :key="year" :value="year" v-if="year !== currentYear">
53	51	{{ year }}년
54	52	</option>
55	53	</select>
56		- <select name="" id="" class="form-select">
	54	+ <select name="" id="" class="form-select sm">
57	55	<option :value="currentMonth">{{ currentMonth }}월</option>
58	56	<option value="all">전체</option>
59	57	<option v-for="month in remainingMonths" :key="month" :value="month" v-if="month !== currentMonth">
60	58	{{ month }}월
61	59	</option>
62	60	</select>
63		- <select name="" id="" class="form-select">
	61	+ <select name="" id="" class="form-select sm">
64	62	<option value="">전체</option>
65	63	<option value="">지각</option>
66	64	<option value="">조기퇴근</option>
...	...	@@ -72,27 +70,17 @@
72	70	<option value="">병가</option>
73	71	</select>
74	72	</div>
75		-
76	73	</div>
77		- <div class=" tbl-wrap tbl2">
	74	+ <div class="tbl-wrap">
78	75	<table class="tbl data">
79		- <colgroup>
80		- <col style="width: 150px;">
81		- <col style="width: ">
82		- <col style="width: ">
83		- <col style="width: ">
84		- <col style="width: ">
85		- <col style="width: ">
86		- <!-- 더 많은 열 설정 -->
87		- </colgroup>
88	76	<tbody>
89		- <tr class="thead">
90		- <td rowspan="2" class="th">근태 현황</td>
91		- <td>지각</td>
92		- <td>조기퇴근</td>
93		- <td>결근</td>
94		- <td>출장</td>
95		- <td>주말출근</td>
	77	+ <tr>
	78	+ <th rowspan="2">근태 현황</th>
	79	+ <th>지각</th>
	80	+ <th>조기퇴근</th>
	81	+ <th>결근</th>
	82	+ <th>출장</th>
	83	+ <th>주말출근</th>
96	84	</tr>
97	85	<tr>
98	86	<td>{{ late }}</td>
...	...	@@ -104,22 +92,16 @@
104	92	</tbody>
105	93
106	94	</table>
	95	+ </div>
	96	+ <div class="tbl-wrap">
107	97	<table class="tbl data">
108		- <colgroup>
109		- <col style="width: 150px;">
110		- <col span="">
111		- <col style="width: ">
112		- <col style="width: ">
113		- <col style="width: ">
114		- <!-- 더 많은 열 설정 -->
115		- </colgroup>
116	98	<tbody>
117		- <tr class="thead">
118		- <td rowspan="2" class="th">휴가 현황</td>
119		- <td>연차</td>
120		- <td>대체휴가</td>
121		- <td>공가</td>
122		- <td>병가</td>
	99	+ <tr>
	100	+ <th rowspan="2">휴가 현황</th>
	101	+ <th>연차</th>
	102	+ <th>대체휴가</th>
	103	+ <th>공가</th>
	104	+ <th>병가</th>
123	105	</tr>
124	106	<tr>
125	107	<td></td>
...	...	@@ -128,15 +110,10 @@
128	110	<td></td>
129	111	</tr>
130	112	</tbody>
131		-
132	113	</table>
133	114	</div>
134	115	<div class="tbl-wrap">
135	116	<table id="myTable" class="tbl data">
136		- <colgroup>
137		- <col style="width: 200px;">
138		- <col style=" width: ">
139		- </colgroup>
140	117	<thead>
141	118	<tr>
142	119	<th>연차 </th>

Delete comment