jichoi / calendar star
류윤주 류윤주 07-25
250725 류윤주 수정
@606e60e1a26ccb42bdc1c3a142bdc06e87f87c03
client/resources/scss/admin/content.scss
--- client/resources/scss/admin/content.scss
+++ client/resources/scss/admin/content.scss
@@ -559,1103 +559,1103 @@
 
 }
 
-// .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;
-//                 }
+                img {
+                    width: 50px;
+                    height: 50px;
+                }
 
-//                 .date {
-//                     margin-left: 10px;
-//                 }
-//             }
+                .date {
+                    margin-left: 10px;
+                }
+            }
 
-//             .sch-wrap {
-//                 border: 1px solid #213F9A;
-//                 padding: 20px;
-//                 border-radius: 10px;
-//                 margin-bottom: 20px;
+            .sch-wrap {
+                border: 1px solid #213F9A;
+                padding: 20px;
+                border-radius: 10px;
+                margin-bottom: 20px;
 
-//                 .buttons {
-//                     gap: 5px;
-//                     margin-top: 0;
-//                 }
+                .buttons {
+                    gap: 5px;
+                    margin-top: 0;
+                }
 
-//                 .sch-form-wrap {
-//                     margin-bottom: 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;
+            .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;
-//                 }
+                .sidemenu {
+                    max-height: 66rem;
+                    overflow-y: auto;
+                }
 
-//                 details {
-//                     width: 100%;
+                details {
+                    width: 100%;
 
-//                     summary {
-//                         border: 0;
-//                         align-items: center;
-//                         justify-content: flex-start;
-//                         gap: 5px;
+                    summary {
+                        border: 0;
+                        align-items: center;
+                        justify-content: flex-start;
+                        gap: 5px;
 
-//                         .icon {
-//                             display: block;
-//                         }
+                        .icon {
+                            display: block;
+                        }
 
-//                         p {
-//                             color: #213F9A;
-//                             font-weight: 700;
-//                             margin-right: 10px;
-//                         }
-//                     }
+                        p {
+                            color: #213F9A;
+                            font-weight: 700;
+                            margin-right: 10px;
+                        }
+                    }
 
-//                     .arrow {
-//                         margin-right: 10px;
-//                     }
+                    .arrow {
+                        margin-right: 10px;
+                    }
 
-//                     li {
-//                         margin-left: 40px;
+                    li {
+                        margin-left: 40px;
 
-//                         a {
-//                             justify-content: flex-start;
-//                             align-items: center;
+                        a {
+                            justify-content: flex-start;
+                            align-items: center;
 
-//                             img {
-//                                 margin-right: 10px;
-//                             }
-//                         }
-//                     }
+                            img {
+                                margin-right: 10px;
+                            }
+                        }
+                    }
 
-//                 }
+                }
 
-//                 .buttons {
-//                     position: absolute;
-//                     bottom: 40px;
-//                 }
+                .buttons {
+                    position: absolute;
+                    bottom: 40px;
+                }
 
-//                 .input-group {
-//                     display: block;
-//                     margin-bottom: 20px;
-//                 }
+                .input-group {
+                    display: block;
+                    margin-bottom: 20px;
+                }
 
-//                 table {
-//                     width: 100%;
+                table {
+                    width: 100%;
 
-//                     thead {
+                    thead {
 
-//                         th {
-//                             background-color: #C7CFE3;
-//                             position: sticky;
-//                             top: -1px;
-//                             border: 1px solid #C7CFE3;
-//                             border-right: 1px solid #C7CFE3;
-//                         }
-//                     }
-//                 }
+                        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;
-//                 }
-//             }
+                .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;
-//                     }
-
-//                     p {
-//                         margin-top: 5px;
-//                     }
-//                 }
-
-//                 .approval-container {
-//                     display: flex;
-//                     flex-direction: column;
-//                     gap: 8px;
-//                     margin: 15px 10px;
-
-//                     .addapproval {
-//                         gap: 5px;
-//                         align-items: center;
-
-//                         .form-control,
-//                         .form-select {
-//                             margin: 0;
-//                             flex-shrink: 0;
-//                         }
-
-//                         .delete-button {
-//                             margin-left: 10px;
-//                         }
-
-//                         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;
-//                                 }
-//                             }
-
-//                         }
-
-//                         tbody {
-//                             td {
-//                                 border-right: 1px solid #C7CFE3;
-
-//                                 input {
-//                                     margin: 0;
-//                                 }
-
-
-//                             }
-
-//                             td:last-child {
-//                                 border-right: 0;
-//                             }
-
-//                             tr:last-child td {
-//                                 border-bottom: 0;
-//                             }
-
-//                         }
-//                     }
-
-//                 }
-
-
-//             }
-
-//             .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;
-//                 }
-
-//                 .form-control {
-//                     background-color: transparent !important;
-//                     border-color: transparent !important;
-//                 }
-//             }
-
-//             .border-x {
-//                 border: 0;
-//             }
-
-//             .buttons {
-//                 display: flex;
-//                 gap: 10px;
-//                 justify-content: end;
-//                 margin-top: 5rem;
+            form {
+                width: 100%;
+                border: 1px solid #C7CFE3;
+                border-radius: 10px;
+                overflow: hidden;
 
-//                 .btn-red {
-//                     border-color: #E92727;
-//                     color: #E92727;
-//                     background-color: #EFF1FA;
-//                 }
+                .second-label {
+                    background-color: #fff !important;
+                }
 
-//             }
+            }
 
-//             .hyuga {
-//                 label {
-//                     line-height: 40rem;
-//                 }
+            form.salary {
+                display: flex;
 
-//                 input.textarea {
-//                     min-height: 40rem;
-//                 }
-//             }
+                .yearsalary {
+                    width: 100%;
+                }
+            }
 
-//             .chuljang {
-//                 label {
-//                     line-height: 17rem;
-//                 }
+            .col-12 {
+                min-height: 4rem;
+                width: 100%;
+                display: flex;
+                border-bottom: 1px solid #C7CFE3;
 
-//                 input.textarea {
-//                     min-height: 17rem;
-//                 }
-//             }
+                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;
 
-//             .form-card {
-//                 position: relative;
-//                 border: 1px solid #CCCCCC;
-//                 border-radius: 10px;
-//                 padding: 30px;
+                    p {
+                        position: relative;
+                    }
 
-//                 h1 {
-//                     margin: 18px 0 48px 0;
-//                     text-align: center;
-//                 }
+                    button {
+                        margin-left: 5px;
+                    }
+                }
 
-//                 .hyuga {
-//                     label {
-//                         line-height: 40rem;
-//                     }
+                p.require {
+                    position: absolute;
+                    right: -13px;
+                    top: 0;
+                }
 
-//                     input.textarea {
-//                         min-height: 40rem;
-//                     }
-//                 }
+                select,
+                input {
+                    margin: 9px 10px;
+                    border-color: #DDDDDD;
+                    height: var(--tk-input-h-sm);
+                }
 
-//                 .chuljang {
-//                     label {
-//                         line-height: 17rem;
-//                     }
+                .form-control[readonly] {
+                    background-color: #EFF1FA;
+                }
 
-//                     input.textarea {
-//                         min-height: 17rem;
-//                     }
-//                 }
+                .invalid-feedback {
+                    color: #E92727;
+                    font-size: 13px;
+                }
 
-//                 .tbl2 {
-//                     width: 30rem;
+                .box {
+                    margin: 15px 10px;
 
-//                     table {
-//                         .thead {
-//                             .th {
-//                                 writing-mode: vertical-rl;
-//                                 padding: 0;
-//                                 width: 50px;
-//                             }
-//                         }
-//                     }
-//                 }
+                    input {
+                        margin: 0;
+                    }
 
-//                 .approval-box {
-//                     position: absolute;
-//                     right: 30px;
-//                     top: 30px;
-//                 }
+                    p {
+                        margin-top: 5px;
+                    }
+                }
 
+                .approval-container {
+                    display: flex;
+                    flex-direction: column;
+                    gap: 8px;
+                    margin: 15px 10px;
 
+                    .addapproval {
+                        gap: 5px;
+                        align-items: center;
 
+                        .form-control,
+                        .form-select {
+                            margin: 0;
+                            flex-shrink: 0;
+                        }
 
-//             }
+                        .delete-button {
+                            margin-left: 10px;
+                        }
 
-//             .detail {
-//                 input[readonly] {
-//                     border-color: #fff;
-//                     background-color: #fff !important;
-//                     cursor: context-menu;
-//                 }
-//             }
+                        label {
+                            width: 95px;
+                            line-height: 30px;
+                            background-color: #333333;
+                            color: #fff;
+                            border-radius: 5px;
+                        }
+                    }
+                }
 
-//             .tbl2 {
-//                 table {
-//                     table-layout: fixed;
-//                     margin-bottom: 10px;
+                .tbl-wrap {
+                    width: 100%;
 
-//                     .thead {
-//                         .th {
-//                             background-color: #C7CFE3;
-//                         }
+                    table {
+                        thead {
+                            tr {
+                                th {
+                                    border-right: 1px solid #C7CFE3;
+                                    border-bottom: 1px solid #C7CFE3;
 
-//                         td {
-//                             background-color: #EFF1FA;
-//                             height: 40px;
-//                             font-weight: 700;
-//                         }
-//                     }
+                                }
 
-//                     td {
-//                         padding: 0;
-//                         border: 1px solid #C7CFE3;
-//                     }
+                                th:last-child {
+                                    border-right: 0;
+                                }
+                            }
 
-//                 }
-//             }
+                        }
 
-//             .tbl3 {
+                        tbody {
+                            td {
+                                border-right: 1px solid #C7CFE3;
 
-//                 th,
-//                 td {
-//                     border: 0;
-//                     border-bottom: 0 !important;
-//                 }
+                                input {
+                                    margin: 0;
+                                }
 
-//                 thead {
-//                     background-color: #EFF1FA;
 
-//                     th {
-//                         padding: 10px;
-//                     }
-//                 }
+                            }
 
-//                 tbody {
-//                     td {
-//                         padding: 0 10px;
+                            td:last-child {
+                                border-right: 0;
+                            }
 
-//                         .form-select {
-//                             width: -webkit-fill-available;
-//                         }
-//                     }
+                            tr:last-child td {
+                                border-bottom: 0;
+                            }
 
-//                     tr:last-child td {
-//                         border-bottom: 0;
-//                     }
-//                 }
-//             }
+                        }
+                    }
 
+                }
 
-//         }
 
-//         .cost-statue {
-//             border: 1px solid #213F9A;
-//             border-radius: 10px;
-//             display: flex;
-//             margin-bottom: 10px;
-//             justify-content: center;
-//             align-items: center;
+            }
 
-//             .costtitle {
-//                 font-size: 18px;
-//                 font-weight: 700;
-//                 margin-right: 3rem;
-//             }
+            .col-12.form-title {
+                justify-content: center;
+                background-color: #C7CFE3;
+                font-weight: 600;
+                align-items: center;
+                gap: 10px;
+            }
 
-//             .col-12 {
-//                 display: flex;
-//                 align-items: center;
+            .col-12.return {
+                background-color: #FFF2F2 !important;
 
-//                 p {
-//                     font-weight: 600;
-//                 }
+                .form-label {
+                    background-color: #FBC1C1;
+                }
 
-//                 input {
-//                     width: 140px;
-//                 }
-//             }
-//         }
-//     }
-// }
+                .form-control {
+                    background-color: transparent !important;
+                    border-color: transparent !important;
+                }
+            }
 
-// .primary {
-//     background-color: #213F9A !important;
-// }
+            .border-x {
+                border: 0;
+            }
 
-// a:focus {
-//     outline: 0;
-// }
+            .buttons {
+                display: flex;
+                gap: 10px;
+                justify-content: end;
+                margin-top: 5rem;
 
-// *:focus {
-//     outline: 0;
-// }
+                .btn-red {
+                    border-color: #E92727;
+                    color: #E92727;
+                    background-color: #EFF1FA;
+                }
 
-// .file {
-//     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;
+            .hyuga {
+                label {
+                    line-height: 40rem;
+                }
 
-//     p {
-//         color: #000;
-//     }
-// }
+                input.textarea {
+                    min-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 */
-// }
+            .chuljang {
+                label {
+                    line-height: 17rem;
+                }
 
-// input[type="file"] {
-//     display: none;
-// }
+                input.textarea {
+                    min-height: 17rem;
+                }
+            }
 
-// input[type="date"] {
-//     width: 200px;
-//     padding-right: 10px;
-// }
+            .form-card {
+                position: relative;
+                border: 1px solid #CCCCCC;
+                border-radius: 10px;
+                padding: 30px;
 
-// input[type="button"] {
-//     width: 200px;
-//     background-color: #333;
-//     color: #fff;
-//     padding-right: 10px;
-// }
+                h1 {
+                    margin: 18px 0 48px 0;
+                    text-align: center;
+                }
 
-// table {
-//     thead {
-//         .toptitle {
-//             th {
-//                 background-color: #B7C2ED !important;
-//             }
-//         }
+                .hyuga {
+                    label {
+                        line-height: 40rem;
+                    }
 
-//         .middletitle {
-//             th {
-//                 background-color: #DAE0F7 !important;
-//             }
-//         }
+                    input.textarea {
+                        min-height: 40rem;
+                    }
+                }
 
-//         th {
-//             p {
-//                 background-color: #E92727;
-//                 border-radius: 5px;
-//                 color: #fff;
-//             }
+                .chuljang {
+                    label {
+                        line-height: 17rem;
+                    }
 
-//             p.green {
-//                 background-color: #219A8C;
-//             }
+                    input.textarea {
+                        min-height: 17rem;
+                    }
+                }
 
-//             p.blue {
-//                 background-color: #1D75E1;
-//             }
-//         }
-//     }
+                .tbl2 {
+                    width: 30rem;
 
-//     th,
-//     td {
-//         border: 1px solid #C7CFE3;
-//         border-bottom: 1px solid #C7CFE3 !important;
-//     }
+                    table {
+                        .thead {
+                            .th {
+                                writing-mode: vertical-rl;
+                                padding: 0;
+                                width: 50px;
+                            }
+                        }
+                    }
+                }
 
-//     tbody {
-//         tr {
-//             th {
-//                 background-color: var(--tk-secondary-5) !important;
-//                 font-weight: 700 !important;
-//             }
-//         }
+                .approval-box {
+                    position: absolute;
+                    right: 30px;
+                    top: 30px;
+                }
 
-//     }
-// }
 
-// .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;
-// }
+            .detail {
+                input[readonly] {
+                    border-color: #fff;
+                    background-color: #fff !important;
+                    cursor: context-menu;
+                }
+            }
 
-// .input-radio {
-//     .chk-area {
-//         margin: 9px 0 9px 10px;
+            .tbl2 {
+                table {
+                    table-layout: fixed;
+                    margin-bottom: 10px;
 
-//         .form-check {
-//             label {
-//                 width: auto !important;
-//                 line-height: 0 !important;
-//                 background-color: #fff !important;
-//                 border-right: 0 !important;
-//             }
-//         }
-//     }
-// }
+                    .thead {
+                        .th {
+                            background-color: #C7CFE3;
+                        }
 
-// .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;
-// }
+                        td {
+                            background-color: #EFF1FA;
+                            height: 40px;
+                            font-weight: 700;
+                        }
+                    }
 
-// .popup-content {
-//     position: relative;
-//     background: white;
-//     padding: 20px;
-//     border-radius: 10px;
+                    td {
+                        padding: 0;
+                        border: 1px solid #C7CFE3;
+                    }
 
-//     text-align: center;
+                }
+            }
 
-//     .form-control {
-//         margin: 0 !important;
-//     }
+            .tbl3 {
 
-//     .card-title {
-//         text-align: left;
-//     }
+                th,
+                td {
+                    border: 0;
+                    border-bottom: 0 !important;
+                }
 
-//     .ico-sch {
-//         right: 17px !important;
-//     }
+                thead {
+                    background-color: #EFF1FA;
 
-//     table {
+                    th {
+                        padding: 10px;
+                    }
+                }
 
-//         th,
-//         td {
+                tbody {
+                    td {
+                        padding: 0 10px;
 
-//             border-right: 1px solid #C7CFE3 !important;
-//         }
-//     }
+                        .form-select {
+                            width: -webkit-fill-available;
+                        }
+                    }
 
-//     .close-btn {
-//         position: absolute;
-//         top: 20px;
-//         right: 20px;
-//     }
+                    tr:last-child td {
+                        border-bottom: 0;
+                    }
+                }
+            }
 
-//     .btn.hyuga {
-//         background-color: #1D75E1;
-//     }
 
-//     .btn.chuljang {
-//         background-color: #219A8C;
-//     }
-// }
+        }
 
-// .datepicker-conts {
-//     margin-bottom: 20px;
-// }
+        .cost-statue {
+            border: 1px solid #213F9A;
+            border-radius: 10px;
+            display: flex;
+            margin-bottom: 10px;
+            justify-content: center;
+            align-items: center;
 
-// .datepicker-input {
-//     display: flex;
-//     justify-content: end;
-//     align-items: center;
-//     gap: 5px;
+            .costtitle {
+                font-size: 18px;
+                font-weight: 700;
+                margin-right: 3rem;
+            }
 
-//     .form-control {
-//         padding-right: 16px !important;
-//         border-color: #C7CFE3;
-//     }
+            .col-12 {
+                display: flex;
+                align-items: center;
 
-//     mark {
-//         background-color: transparent;
-//     }
-// }
+                p {
+                    font-weight: 600;
+                }
 
-.img-area{
-    @include flex-layout(flex, center, center);
-    width: 300px;
-    background-color: #EFF1FA;
-    border-radius: 2rem;
-    padding: 3rem
+                input {
+                    width: 140px;
+                }
+            }
+        }
+    }
 }
+
+.primary {
+    background-color: #213F9A !important;
+}
+
+a:focus {
+    outline: 0;
+}
+
+*:focus {
+    outline: 0;
+}
+
+.file {
+    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;
+    }
+}
+
+// .img-area{
+//     @include flex-layout(flex, center, center);
+//     width: 300px;
+//     background-color: #EFF1FA;
+//     border-radius: 2rem;
+//     padding: 3rem
+// }
 
 .schedule-zone {
     @include flex-layout(flex, stretch);
@@ -1691,74 +1691,74 @@
     }
 }
 
-.tbl-wrap {
-    border: 1px solid var(--#{$prefix}secondary-30);
-    border-radius: 1rem;
-	.tbl {
+// .tbl-wrap {
+//     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);
-                }
+// 		&.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;
-                    }
-                }
-            }
-        }
-	}
-}
+// 			}
+// 		}
+// 		&.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;
+//                     }
+//                 }
+//             }
+//         }
+// 	}
+// }
 
-.d-flex{
-    @include flex-layout(flex, center);
+// .d-flex{
+//     @include flex-layout(flex, center);
 
-    &.justify-between {
-        justify-content: space-between;
-    }   
-    &.justify-end {
-        justify-content: flex-end;
-    } 
+//     &.justify-between {
+//         justify-content: space-between;
+//     }   
+//     &.justify-end {
+//         justify-content: flex-end;
+//     } 
     
-    &.aling-start {
-        align-items: flex-start;
-    }   
-    &.aling-end {
-        align-items: flex-end;
-    }  
+//     &.aling-start {
+//         align-items: flex-start;
+//     }   
+//     &.aling-end {
+//         align-items: flex-end;
+//     }  
 
-    gap: 1rem;
-}
(파일 끝에 줄바꿈 문자 없음)
+//     gap: 1rem;
+// }
(파일 끝에 줄바꿈 문자 없음)
client/views/pages/User/Login.vue
--- client/views/pages/User/Login.vue
+++ client/views/pages/User/Login.vue
@@ -6,23 +6,23 @@
                   <h2 class="card-title text-center pb-0 fs-4"><img :src="logo" alt="로고"></h2>
                 </div>
 
-                <form class="row g-3 needs-validation" :class="{ 'was-validated': formSubmitted }" novalidate @submit.prevent="handleLogin">
+                <div class="row g-3 needs-validation" :class="{ 'was-validated': formSubmitted }">
                   <div class="box">
                     <label for="yourUsername" class="form-label"><img :src="idIcon" alt="아이디 아이콘">아이디</label>
                     <div class="input-group has-validation">
-                      <input v-model="userInfo.loginId" ref="loginId" type="text" name="username" class="form-control" id="yourUsername" placeholder="아이디를 입력하세요." required>
+                      <input v-model="userInfo.loginId" ref="loginId" type="text" name="username" class="form-control sm" id="yourUsername" placeholder="아이디를 입력하세요." required>
                     </div>
                   </div>
 
                   <div class="box">
                     <label for="yourPassword" class="form-label"><img :src="passwordIcon" alt="비밀번호 아이콘">비밀번호</label>
-                    <input v-model="userInfo.password" ref="password" type="password" name="password" class="form-control" id="yourPassword" placeholder="비밀번호를 입력하세요." required>
+                    <input v-model="userInfo.password" ref="password" type="password" name="password" class="form-control sm" id="yourPassword" placeholder="비밀번호를 입력하세요." required>
                   </div>
 
                   <div class="box">
-                    <button class="btn sm sm" type="submit"><img :src="loginIcon" alt="로그인 아이콘">로그인</button>
+                    <button class="btn md" type="submit" @click="handleLogin"><img :src="loginIcon" alt="로그인 아이콘">로그인</button>
                   </div>
-                </form>
+                </div>
               </div>
             </div>
   </div>
Add a comment
List