Commit @2515f8387208fb433cdc50f3235fb55b8fa1408e

류윤주 04-09

250409 류윤주 수정

@2515f8387208fb433cdc50f3235fb55b8fa1408e

84aae41

2515f83

client/resources/scss/admin/content.scss

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

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


-.content-wrap {
-    width: 100%;
-    height: 100%;
-    padding: 3rem;
-
-    >.content-zone {
-        height: calc(100% - 142px);
-        // background-color: #ffffff;
-        // padding: 3rem;
-        // @include radius(20);
-        // box-shadow: 0 0 1rem rgba(0, 0, 0, 0.02);
-
-        >.content {
-            height: 100%;
-
-            .scroll {
-                height: 100%;
-                overflow-y: auto;
-            }
-
-        }
-        &.full-page {
-            height: 100%;
-        }
-        &.detail{
-            height: calc(100% - 228px);
-        }
-    }
-}
-
-.content-wrap.main {
-    .content-zone {
+.admin-wrap{
+    .content-wrap {
+        width: 100%;
         height: 100%;
+        padding: 3rem;
+    
+        >.content-zone {
+            height: calc(100% - 142px);
+            // background-color: #ffffff;
+            // padding: 3rem;
+            // @include radius(20);
+            // box-shadow: 0 0 1rem rgba(0, 0, 0, 0.02);
+    
+            >.content {
+                height: 100%;
+    
+                .scroll {
+                    height: 100%;
+                    overflow-y: auto;
+                }
+    
+            }
+            &.full-page {
+                height: 100%;
+            }
+            &.sch-full{
+                height: calc(100% - 60px);
+            }
+            &.detail{
+                height: calc(100% - 228px);
+            }
+        }
     }
-}
-
-.box-title,
-.section-title {
-    font-size: var(--tk-fz-title-md);
-    font-weight: 700;
-    margin-bottom: 1rem;
-}
-
-.search-wrap{
-    @include flex-layout(flex, center, end);
-    .search-bar {
-        position: relative;
-        @include flex-layout(flex, center, end);
+    
+    .content-wrap.main {
+        .content-zone {
+            height: 100%;
+        }
+    }
+    
+    .box-title,
+    .section-title {
+        font-size: var(--tk-fz-title-md);
+        font-weight: 700;
+        margin-bottom: 1rem;
+    }
+    
+    .search-wrap{
+        @include flex-layout(flex, center, space-between);
         margin-bottom: 3rem;
-    
-        .form-select {
-            width: 120px;
-    
-            &.border-none{
-                border: none;
-                margin-left: 0;
+        .search-bar {
+            position: relative;
+            @include flex-layout(flex, center, end);
+        
+            .form-select {
+                width: 120px;
+                margin-left: 1rem;
+        
+                &.border-none{
+                    border: none;
+                    margin-left: 0;
+                }
             }
-        }
-    
-        .form-control {
-            width: 300px;
-            margin-left: 1rem;
-    
-            &.border-none{
-                border: none;
-                margin-left: 0;
+        
+            .form-control {
+                width: 300px;
+                margin-left: 1rem;
+        
+                &.border-none{
+                    border: none;
+                    margin-left: 0;
+                }
             }
-        }
-    
-        button{
-            
-            &.btn {
+
+            .mark{
                 margin-left: 1rem;
             }
-    
-            &.btn-ico{
-                position: absolute;
-                top: 50%;
-                right: 1rem;
-                transform: translateY(-50%);
-                &.main{
-                    &.ico-sch {
-                        &::before,
-                        &::after {
-                            background-image: url(#{$url}/component/common/ico_sch_20_gn.svg);
+        
+            button{
+                
+                &.btn {
+                    margin-left: 1rem;
+                }
+        
+                &.btn-ico{
+                    position: absolute;
+                    top: 50%;
+                    right: 1rem;
+                    transform: translateY(-50%);
+                    &.main{
+                        &.ico-sch {
+                            &::before,
+                            &::after {
+                                background-image: url(#{$url}/component/common/ico_sch_20_gn.svg);
+                            }
                         }
                     }
                 }
             }
+        
+            &.border{
+                width: fit-content;
+                border: 1px solid var(--tk-gray-60);
+                background-color: var(--tk-white);
+                border-radius: var(--tk-input-rd-sm);
+            }
+
+            .ml10{
+                margin-left: 1rem
+            }
         }
+    }
     
-        &.border{
-            width: fit-content;
-            border: 1px solid var(--tk-gray-60);
-            background-color: var(--tk-white);
-            border-radius: var(--tk-input-rd-sm);
-        }
-    }
-}
-
-.btn-wrap {
-    @include flex-layout(flex, center, end);
-    // padding: 2rem 0;
-    padding-top: 2rem;
-
-    button {
-        margin-left: 1rem;
-        &.main{
-            background-color: var(--tk-main-50);
-            border: 1px solid var(--tk-main-50);
-            &:hover{
-                background-color: var(--tk-main-70);
-                border: 1px solid var(--tk-main-70);
-            }
-            &[disabled] {
-                background-color: var(--#{$prefix}gray-30);
-                border-color: var(--#{$prefix}gray-30);
-                color: var(--#{$prefix}gray-60);
-            }
-        }
-    }
-
-    &.list {
-        @include flex-layout(flex, center, space-between);
-        padding: 3rem 0;
-    }
-}
-
-.form-content {
-    padding: 2rem;
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    background-color: var(--tk-white);
-    border-radius: 0 0 2rem 2rem;
-    height: calc(100% - 45px);
-    grid-auto-rows: min-content;
-    // max-height: fit-content;
-
-    .layout {
-        width: 100%;
-        padding: 1rem;
-        border-bottom: 1px solid var(--tk-gray-10);
-
-        .form-title {
-            width: 180px;
-            font-weight: 700;
-
-            span {
-                color: var(--tk-point-40);
-                margin-right: .5rem;
-            }
-        }
-
-        .form-select {
-            min-width: 135px;
-            max-width: 300px;
-
-            &.fixed{
-                width: 135px;
-            }
-        }
-
-        .form-control {
-            max-width: calc(100% - 180px);
-        }
-
-        >div,
-        .form-group {
-            max-width: calc(100% - 180px);
-
-            .form-control {
-                max-width: 100%;
-            }
-
-            span {
-                font-size: var(--tk-fz-detail-sm);
-            }
-
-            &.w_100{
-                width: 100%;
-            }
-        }
-
-        >div,
-        .input-group{
-            max-width: calc(100% - 180px);
-            &.w_100{
-                width: 100%;
-            }
-        }
-
-
-
-        &.grid-column {
-            grid-column: 1/3;
-        }
-
-        &:nth-child(1),:nth-child(2){
-            padding-top: 0;
-        }
-
-        &:last-child{
-            grid-column: 1/3;
-            padding-bottom: 0;
-            border-bottom: 0;
-        }
-
-        &.pb10{
-            padding-bottom: 1rem; 
-        }
-    }
-
-    &.grid-none {
-        display: block;
-    }
-
-
-    // 자식 div 개수가 짝수일 때 마지막 div의 스타일을 변경
-    &:has(> div:nth-child(even)) {
-
-        >div{
-
-            &:nth-last-child(-n + 2){
-                border-bottom: 0;
-                &.border-bottom{
-                    border-bottom: 1px solid var(--tk-gray-10);
-                }
-            }
-
-            &:last-child {
-                grid-column: unset;
+    .btn-wrap {
+        @include flex-layout(flex, center, end);
+        // padding: 2rem 0;
+        padding-top: 2rem;
     
-                &.grid-column {
-                    grid-column: 1/3;
-                }
-            }
-        }
-
-    }
-
-}
-
-.form-box {
-    border: 1px solid var(--tk-gray-10);
-    @include radius(20);
-    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.02);
-
-    .form-box-title {
-        padding: 1rem 3rem;
-        background-color: #c8d0d8;
-        @include flex-layout(flex, center, start);
-        font-size: var(--tk-fz-title-sm);
-        border-radius: 2rem 2rem 0 0;
-
-        >p {
-            margin-right: 1rem;
-            font-weight: 700;
-        }
-
-        >p:nth-of-type(2) {
-            font-size: var(--tk-fz-detail-sm);
-            background-color: var(--tk-point-5);
-            border: 1px solid var(--tk-point-40);
-            padding: .2rem 1rem;
-            // border-radius: var(--tk-rd-12);
-            @include radius(30);
-            font-weight: 400;
-
-            span {
-                color: var(--tk-point-40);
-                margin-right: .5rem;
-            }
-        }
-    }
-
-    &.mb30{
-        margin-bottom: 3rem
-    }
-
-
-}
-
-.setting-box {
-    @include flex-layout(flex, start, start);
-    width: 100%;
-    // height: calc(100% - 77.5px);
-
-    .node-zone {
-        width: 325px;
-        height: 100%;
-        margin-right: 3rem;
-        background-color: #ffffff;
-        border-radius: var(--tk-rd-12);
-        box-shadow: 0 0 1rem rgba(0, 0, 0, 0.02);
-
-        .tree {
-            padding: 3rem;
-            width: 100%;
-            height: calc(100% - 149px);
-            overflow-y: auto;
-
-
-        }
-    }
-
-    .setting-zone {
-        width: calc(100% - 325px - 3rem);
-        height: 100%;
-
-        // .btn-wrap {
-        //     // justify-content: flex-end;
-        //     padding: 1rem 0;
-        // }
-
-
-    }
-
-    .btn-zone {
-        padding: 3rem;
-
         button {
-            min-width: 126px;
             margin-left: 1rem;
-            margin-bottom: 1rem;
-        }
-
-        button:nth-child(1) {
-            margin-left: 0;
-        }
-
-        button:last-child {
-            min-width: 100%;
-            margin-left: 0;
-            margin-bottom: 0;
-        }
-    }
-}
-
-.top-zone {
-    >div {
-        margin-bottom: 5rem;
-
-        .tbl {
-            .table-title {
-                @include ellipsis(1);
+            &.main{
+                background-color: var(--tk-main-50);
+                border: 1px solid var(--tk-main-50);
+                &:hover{
+                    background-color: var(--tk-main-70);
+                    border: 1px solid var(--tk-main-70);
+                }
+                &[disabled] {
+                    background-color: var(--#{$prefix}gray-30);
+                    border-color: var(--#{$prefix}gray-30);
+                    color: var(--#{$prefix}gray-60);
+                }
             }
-
+        }
+    
+        &.list {
+            @include flex-layout(flex, center, space-between);
+            padding: 3rem 0;
         }
     }
-
-}
-
-.middle-zone {
-    @include flex-layout(flex, flex-start, space-between);
-    gap: 3rem;
-    margin-bottom: 5rem;
-
-    .first-box,
-    .two-box,
-    .three-box {
-        flex: 0 0 calc(33.333% - 2rem);
-        max-width: calc(33.333% - 2rem);
+    
+    .form-content {
         padding: 2rem;
-        border-radius: var(--tk-rd-12);
-        text-align: center;
-        border: 1px solid var(--tk-gray-10);
-
-
-    }
-}
-
-.chart-wrap {
-    padding: 3rem;
-    border: 1px solid var(--tk-gray-10);
-    @include radius(20);
-    background-color: var(--tk-white);
-    height:350px
-}
-
-.area{
-    font-size: var(--tk-input-fz-sm);
-}
-
-.form-check{
-    display: flex;
-    align-items: center;
-}
-
-.tbl-wrap{
-    // height: 100%;
-    // box-shadow: 0 0 1rem rgba(0, 0, 0, 0.02);
-
-    .tbl{
-        max-width: 100%;
-        width: 100%;
-        &.data{
-            thead{
-                th{
-                    background-color: #c8d0d8;
-                    &:first-child{
-                        border-radius: 1rem 0 0 0;
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        background-color: var(--tk-white);
+        border-radius: 0 0 2rem 2rem;
+        height: calc(100% - 45px);
+        grid-auto-rows: min-content;
+        // max-height: fit-content;
+    
+        .layout {
+            width: 100%;
+            padding: 1rem;
+            border-bottom: 1px solid var(--tk-gray-10);
+    
+            .form-title {
+                width: 180px;
+                font-weight: 700;
+    
+                span {
+                    color: var(--tk-point-40);
+                    margin-right: .5rem;
+                }
+            }
+    
+            .form-select {
+                min-width: 135px;
+                max-width: 300px;
+    
+                &.fixed{
+                    width: 135px;
+                }
+            }
+    
+            .form-control {
+                max-width: calc(100% - 180px);
+            }
+    
+            >div,
+            .form-group {
+                max-width: calc(100% - 180px);
+    
+                .form-control {
+                    max-width: 100%;
+                }
+    
+                span {
+                    font-size: var(--tk-fz-detail-sm);
+                }
+    
+                &.w_100{
+                    width: 100%;
+                }
+            }
+    
+            >div,
+            .input-group{
+                max-width: calc(100% - 180px);
+                &.w_100{
+                    width: 100%;
+                }
+            }
+    
+    
+    
+            &.grid-column {
+                grid-column: 1/3;
+            }
+    
+            &:nth-child(1),:nth-child(2){
+                padding-top: 0;
+            }
+    
+            &:last-child{
+                grid-column: 1/3;
+                padding-bottom: 0;
+                border-bottom: 0;
+            }
+    
+            &.pb10{
+                padding-bottom: 1rem; 
+            }
+        }
+    
+        &.grid-none {
+            display: block;
+        }
+    
+    
+        // 자식 div 개수가 짝수일 때 마지막 div의 스타일을 변경
+        &:has(> div:nth-child(even)) {
+    
+            >div{
+    
+                &:nth-last-child(-n + 2){
+                    border-bottom: 0;
+                    &.border-bottom{
+                        border-bottom: 1px solid var(--tk-gray-10);
                     }
-                    &:last-child{
-                        border-radius: 0 1rem 0 0;
-                    }
-
-                    &.sticky{
-                        position: sticky;
-                        top: 0;
-                        z-index: 10;
-                        background-color: #c8d0d8;
+                }
+    
+                &:last-child {
+                    grid-column: unset;
+        
+                    &.grid-column {
+                        grid-column: 1/3;
                     }
                 }
             }
     
-            tbody{
-                tr{
-                    &:last-child{
-                        td{
-                            &:first-child{
-                                border-radius:  0 0 0 1rem;
-                            }
-                            &:last-child{
-                                border-radius: 0 0 1rem 0;
-                            }
-
+        }
+    
+    }
+    
+    .form-box {
+        border: 1px solid var(--tk-gray-10);
+        @include radius(20);
+        box-shadow: 0 0 1rem rgba(0, 0, 0, 0.02);
+    
+        .form-box-title {
+            padding: 1rem 3rem;
+            background-color: #c8d0d8;
+            @include flex-layout(flex, center, start);
+            font-size: var(--tk-fz-title-sm);
+            border-radius: 2rem 2rem 0 0;
+    
+            >p {
+                margin-right: 1rem;
+                font-weight: 700;
+            }
+    
+            >p:nth-of-type(2) {
+                font-size: var(--tk-fz-detail-sm);
+                background-color: var(--tk-point-5);
+                border: 1px solid var(--tk-point-40);
+                padding: .2rem 1rem;
+                // border-radius: var(--tk-rd-12);
+                @include radius(30);
+                font-weight: 400;
+    
+                span {
+                    color: var(--tk-point-40);
+                    margin-right: .5rem;
+                }
+            }
+        }
+    
+        &.mb30{
+            margin-bottom: 3rem
+        }
+    
+    
+    }
+    
+    .setting-box {
+        @include flex-layout(flex, start, start);
+        width: 100%;
+        // height: calc(100% - 77.5px);
+    
+        .node-zone {
+            width: 325px;
+            height: 100%;
+            margin-right: 3rem;
+            background-color: #ffffff;
+            border-radius: var(--tk-rd-12);
+            box-shadow: 0 0 1rem rgba(0, 0, 0, 0.02);
+    
+            .tree {
+                padding: 3rem;
+                width: 100%;
+                height: calc(100% - 149px);
+                overflow-y: auto;
+    
+    
+            }
+        }
+    
+        .setting-zone {
+            width: calc(100% - 325px - 3rem);
+            height: 100%;
+    
+            // .btn-wrap {
+            //     // justify-content: flex-end;
+            //     padding: 1rem 0;
+            // }
+    
+    
+        }
+    
+        .btn-zone {
+            padding: 3rem;
+    
+            button {
+                min-width: 126px;
+                margin-left: 1rem;
+                margin-bottom: 1rem;
+            }
+    
+            button:nth-child(1) {
+                margin-left: 0;
+            }
+    
+            button:last-child {
+                min-width: 100%;
+                margin-left: 0;
+                margin-bottom: 0;
+            }
+        }
+    }
+    
+    .top-zone {
+        >div {
+            margin-bottom: 5rem;
+    
+            .tbl {
+                .table-title {
+                    @include ellipsis(1);
+                }
+    
+            }
+        }
+    
+    }
+    
+    .middle-zone {
+        @include flex-layout(flex, flex-start, space-between);
+        gap: 3rem;
+        margin-bottom: 5rem;
+    
+        .first-box,
+        .two-box,
+        .three-box {
+            flex: 0 0 calc(33.333% - 2rem);
+            max-width: calc(33.333% - 2rem);
+            padding: 2rem;
+            border-radius: var(--tk-rd-12);
+            text-align: center;
+            border: 1px solid var(--tk-gray-10);
+    
+    
+        }
+    }
+    
+    .chart-wrap {
+        padding: 3rem;
+        border: 1px solid var(--tk-gray-10);
+        @include radius(20);
+        background-color: var(--tk-white);
+        height:350px
+    }
+    
+    .area{
+        font-size: var(--tk-input-fz-sm);
+    }
+    
+    .form-check{
+        display: flex;
+        align-items: center;
+    }
+    
+    .tbl-wrap{
+        // height: 100%;
+        // box-shadow: 0 0 1rem rgba(0, 0, 0, 0.02);
+    
+        .tbl{
+            max-width: 100%;
+            width: 100%;
+            &.data{
+                thead{
+                    th{
+                        background-color: #c8d0d8;
+                        &:first-child{
+                            border-radius: 1rem 0 0 0;
+                        }
+                        &:last-child{
+                            border-radius: 0 1rem 0 0;
+                        }
+    
+                        &.sticky{
+                            position: sticky;
+                            top: 0;
+                            z-index: 10;
+                            background-color: #c8d0d8;
                         }
                     }
-                    td{
-                        .form-check{
-                            justify-content: center;
-                            input[type=checkbox] ~ label{
-                                padding-left: calc(var(--tk-rdo-size-md));
+                }
+        
+                tbody{
+                    tr{
+                        &:last-child{
+                            td{
+                                &:first-child{
+                                    border-radius:  0 0 0 1rem;
+                                }
+                                &:last-child{
+                                    border-radius: 0 0 1rem 0;
+                                }
+    
+                            }
+                        }
+                        td{
+                            .form-check{
+                                justify-content: center;
+                                input[type=checkbox] ~ label{
+                                    padding-left: calc(var(--tk-rdo-size-md));
+                                }
                             }
                         }
                     }
                 }
             }
+            &.mixing {
+                thead{
+                    tr{
+                        &:nth-child(2){
+                            th{
+                                &:first-child{
+                                    border-radius: 0;
+                                }
+                                &:last-child{
+                                    border-radius: 0;
+                                }
+                            }
+                        }
+                        th{
+                        
+                            border-right: 1px solid var(--tk-secondary-30);
+                
+                            &[rowspan="2"]:last-child{
+                                border-right:0;
+                            }
+                    
+                            &.sticky{
+                                position: sticky;
+                                background-color: #c8d0d8;
+                                z-index: 2;
+                            }
+                            &.top-0 {
+                                top: 0;
+                            }
+                            &.top-40 {
+                                top: 4rem; /* 첫 번째 헤더 높이에 맞춰 조정 */
+                            }
+                        }
+                    }
+                }
+                
+            }
+    
         }
-
+        &.overflow-y{
+            overflow-y: auto;
+        }
+    
     }
-    &.overflow-y{
-        overflow-y: auto;
+    
+    
+    .mb30{
+        margin-bottom: 3rem;
     }
-
-}
-
-.mixing thead th{
-    border-right: 1px solid var(--tk-secondary-30);
-
-    &[rowspan="2"]:last-child{
-        border-right:0;
-    }
-}
-
-.mb30{
-    margin-bottom: 3rem;
-}
-
-.dp__main{
-    height: 100%;
-    >div:first-child{
+    
+    .dp__main{
         height: 100%;
-        *{
+        >div:first-child{
             height: 100%;
+            *{
+                height: 100%;
+            }
+            .dp__input{
+                width: 100%;
+                border: none;
+                background-color: transparent;
+                transition: none;
+                line-height: 100%;
+                padding: 0;
+                font-size: 1.5rem;
+            }
+            .dp__icon{
+                display: none;
+            }
+           
         }
-        .dp__input{
-            width: 100%;
-            border: none;
-            background-color: transparent;
-            transition: none;
-            line-height: 100%;
-            padding: 0;
+    
+        .dp__menu,
+        .dp__selection_preview,
+        .dp__action_button{
             font-size: 1.5rem;
         }
-        .dp__icon{
-            display: none;
-        }
-       
-    }
-
-    .dp__menu,
-    .dp__selection_preview,
-    .dp__action_button{
-        font-size: 1.5rem;
-    }
-}
-
-.check-area {
-    @include flex-layout(flex, center);
-    gap: 3rem;
-}
-
-.w_100{
-    width: 100%;
-}
-
-.h_100{
-    height: 100%;
-}
-
-.layout{
-    @include flex-layout(flex, center, flex-start);
-    .ml10{
-        margin-left: 1rem;
-    }
-
-    &.between{
-        @include flex-layout(flex, center, space-between);
-    }
-}
-
-.border-top{
-    border-top: 1px solid var(--tk-gray-10);
-}
-
-
-.gallery-wrap{
-    margin-bottom: 3rem;
-    .mySwiper{
-        max-width: 600px;
-        height: auto;
-        aspect-ratio: 4/3;
-        background-color: #c8d0d8;
     }
     
-    .mySwiper2{
-        max-width: 600px;
-        .swiper-slide{
-            width: 25%;
+    .check-area {
+        @include flex-layout(flex, center);
+        gap: 3rem;
+    }
+    
+    .w_100{
+        width: 100%;
+    }
+    
+    .h_100{
+        height: 100%;
+    }
+    
+    .layout{
+        @include flex-layout(flex, center, flex-start);
+        .ml10{
+            margin-left: 1rem;
+        }
+    
+        &.between{
+            @include flex-layout(flex, center, space-between);
+        }
+    }
+    
+    .border-top{
+        border-top: 1px solid var(--tk-gray-10);
+    }
+    
+    
+    .gallery-wrap{
+        margin-bottom: 3rem;
+        .mySwiper{
+            max-width: 600px;
             height: auto;
             aspect-ratio: 4/3;
             background-color: #c8d0d8;
         }
+        
+        .mySwiper2{
+            max-width: 600px;
+            .swiper-slide{
+                width: 25%;
+                height: auto;
+                aspect-ratio: 4/3;
+                background-color: #c8d0d8;
+            }
+        }
     }
-}
-
-.video-zone{
-    margin-bottom: 3rem;
-
-    iframe{
-        display: block;
-        width: 600px;
-        height: auto;
-        aspect-ratio: 16/9;
-        margin: 0 auto;
+    
+    .video-zone{
+        margin-bottom: 3rem;
+    
+        iframe{
+            display: block;
+            width: 600px;
+            height: auto;
+            aspect-ratio: 16/9;
+            margin: 0 auto;
+        }
     }
-}
-
-.comment-box{
-    padding: 3rem;
-    background-color: var(--tk-gray-10);
-    @include radius(20);
-    margin-top: 3rem;
-
-    .comment-head{
-        width: auto;
-        margin-right: 3rem;
-        padding-left: 3rem;
-        background-image: url(#{$url}/component/common/ico_comment.svg);
-        background-repeat: no-repeat;
-        background-position: left center;
+    
+    .comment-box{
+        padding: 3rem;
+        background-color: var(--tk-gray-10);
+        @include radius(20);
+        margin-top: 3rem;
+    
+        .comment-head{
+            width: auto;
+            margin-right: 3rem;
+            padding-left: 3rem;
+            background-image: url(#{$url}/component/common/ico_comment.svg);
+            background-repeat: no-repeat;
+            background-position: left center;
+        }
+    
+        .form-control{
+            max-width: calc(100% - 230px);
+        }
+    
+        .btn{
+            margin-left: 1rem;
+        }
     }
-
-    .form-control{
-        max-width: calc(100% - 230px);
-    }
-
-    .btn{
-        margin-left: 1rem;
-    }
-}
-
-.navigate-wrap{
-    padding: 2rem;
-    background-color: var(--tk-white);
-    @include radius(20);
-    margin-top: 2rem;
-    .content-navigate{
-        border-top: 1px solid var(--tk-gray-50);
-        border-bottom: 1px solid var(--tk-gray-50);
-        tbody{
-            tr{
-                border-bottom: 1px solid var(--tk-gray-30);
-
-                td{
-                    padding: 1rem;
-                }
-
-                &:last-child{
-                    border-bottom: 0;
+    
+    .navigate-wrap{
+        padding: 2rem;
+        background-color: var(--tk-white);
+        @include radius(20);
+        margin-top: 2rem;
+        .content-navigate{
+            border-top: 1px solid var(--tk-gray-50);
+            border-bottom: 1px solid var(--tk-gray-50);
+            tbody{
+                tr{
+                    border-bottom: 1px solid var(--tk-gray-30);
+    
+                    td{
+                        padding: 1rem;
+                    }
+    
+                    &:last-child{
+                        border-bottom: 0;
+                    }
                 }
             }
         }
     }
-}
-
-.icon-btn-zone{
-    button{
-        border: 1px solid var(--tk-gray-30);
+    
+    .icon-btn-zone{
+        button{
+            border: 1px solid var(--tk-gray-30);
+            background-color: var(--tk-white);
+            border-radius: 50%;
+            margin-left: 1rem;
+            &.btn-ico[class*='ico-'] {
+                background-size: 1.8rem;
+            }
+    
+            &:first-child{
+                margin-left: 0;
+            }
+        }
+    }
+    
+    .state{
+        display: inline-block;
+        padding: .5rem 1rem;
+        @include radius(10);
+        font-weight: 700;
+        &.red{
+            background-color: var(--tk-point-10);
+            color: var(--tk-point-40);
+        }
+        &.blue{
+            background-color: var(--tk-primary-10); 
+            color: var(--tk-primary-40); 
+        }
+    
+        &.answer{
+            border: 1px solid var(--tk-gray-90);
+            margin-right: 1rem;
+            font-size: 1.5rem;
+        }
+    
+         &.question{
+            background-color: var(--tk-gray-90);
+            color: var(--tk-white);
+            margin-right: 1rem;
+            font-size: 1.5rem;
+        }
+    }
+    
+    .sch-full{
+        height: calc(100% - 60px);
+    }
+    
+    .breadcrumb-warp{
+        padding: .5rem 1rem;
         background-color: var(--tk-white);
-        border-radius: 50%;
-        margin-left: 1rem;
-        &.btn-ico[class*='ico-'] {
-            background-size: 1.8rem;
-        }
-
-        &:first-child{
-            margin-left: 0;
+        @include radius(20);
+        font-size: 1.3rem;
+    
+        .home{
+            padding-left: 2rem;
+            background-image: url(#{$url}/component/common/ico_bread_home.svg);
+            background-position: left center;
+            background-repeat: no-repeat;
         }
     }
+    
 }
-
-.state{
-    display: inline-block;
-    padding: .5rem 1rem;
-    @include radius(10);
-    font-weight: 700;
-    &.red{
-        background-color: var(--tk-point-10);
-        color: var(--tk-point-40);
-    }
-    &.blue{
-        background-color: var(--tk-primary-10); 
-        color: var(--tk-primary-40); 
-    }
-
-    &.answer{
-        border: 1px solid var(--tk-gray-90);
-        margin-right: 1rem;
-        font-size: 1.5rem;
-    }
-
-     &.question{
-        background-color: var(--tk-gray-90);
-        color: var(--tk-white);
-        margin-right: 1rem;
-        font-size: 1.5rem;
-    }
-}
-
-.sch-full{
-    height: calc(100% - 60px);
-}
-
-
 
 
 

84aae41

2515f83

client/resources/scss/admin/layout.scss

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

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


         border-bottom: 1px solid var(--tk-gray-30);
 
         .title-zone{
-            @include flex-layout(flex, flex-end, flex-start); 
+            @include flex-layout(flex, center, flex-start); 
 
             .page-title {
                 font-size: var(--tk-fz-title-xlg);

84aae41

2515f83

client/views/pages/adm/authority/authority/AuthoritySelectList.vue

--- client/views/pages/adm/authority/authority/AuthoritySelectList.vue

+++ client/views/pages/adm/authority/authority/AuthoritySelectList.vue


 <template>
   <div class="search-wrap">
+    <div></div>
     <div class="search-bar border">
       <!-- <select name="" id="" class="border-none gd-2">
                       <option value="">전체</option>

84aae41

2515f83

client/views/pages/adm/boardManagement/boardManagement/BoardManagementSelectList.vue

--- client/views/pages/adm/boardManagement/boardManagement/BoardManagementSelectList.vue

+++ client/views/pages/adm/boardManagement/boardManagement/BoardManagementSelectList.vue


 <template>
     <div class="search-wrap">
+        <div></div>
         <div class="search-bar border">
             <select name="selectType" id="selectType" class="form-select sm border-none" v-model="search.searchType">
                 <option value="">전체</option>

84aae41

2515f83

client/views/pages/adm/boardManagement/template/commonTemplate/CommonSelectList.vue

--- client/views/pages/adm/boardManagement/template/commonTemplate/CommonSelectList.vue

+++ client/views/pages/adm/boardManagement/template/commonTemplate/CommonSelectList.vue


   <!-- 관리자 -->
   <template v-else>
     <div class="search-wrap">
+      <div></div>
       <div class="search-bar border">
         <select
           class="form-select sm border-none"

84aae41

2515f83

client/views/pages/adm/boardManagement/template/faqTemplate/FaqSelectList.vue

--- client/views/pages/adm/boardManagement/template/faqTemplate/FaqSelectList.vue

+++ client/views/pages/adm/boardManagement/template/faqTemplate/FaqSelectList.vue


   </template>
   <template v-else>
       <div class="search-wrap">
+        <div></div>
         <div class="search-bar border">
           <select
             class="form-select sm border-none"

84aae41

2515f83

client/views/pages/adm/boardManagement/template/galleryTemplate/GallerySelectList.vue

--- client/views/pages/adm/boardManagement/template/galleryTemplate/GallerySelectList.vue

+++ client/views/pages/adm/boardManagement/template/galleryTemplate/GallerySelectList.vue


     </template>
     <template v-else>
         <div class="search-wrap">
+            <div></div>
             <div class="search-bar border">
                 <select name="" id="" class="form-select sm border-none" v-model="search.searchType">
                     <option value="">전체</option>

84aae41

2515f83

client/views/pages/adm/boardManagement/template/videoTemplate/VideoSelectList.vue

--- client/views/pages/adm/boardManagement/template/videoTemplate/VideoSelectList.vue

+++ client/views/pages/adm/boardManagement/template/videoTemplate/VideoSelectList.vue


     <template  v-if="pageRole === 'portal'"></template>
     <template v-else>
         <div class="search-wrap">
+            <div></div>
             <div class="search-bar border">
                 <select class="form-select sm border-none" v-model="search.searchType">
                     <option value="">전체</option>
                     <option v-for="(item, idx) in codeList" :key="idx" :value="item.cd">{{ item.cdNm }}</option>
                 </select>
-                <input type="text" class="full-input border-none gd-9 condition-input" placeholder="검색어를 입력하세요." v-model="search.searchText" @keyup.enter="findAll">
+                <input type="text" class="form-control sm border-none" placeholder="검색어를 입력하세요." v-model="search.searchText" @keyup.enter="findAll">
 
 
-                <button class="form-control sm border-none" @click="findAll">검색</button>
+                <button class="btn-ico xsm  main ico-sch" @click="findAll">
+                    <span class="sr-only">검색</span>
+                </button>
 
                 <!-- <button class="large-btn darkg-border-btn" @click="fnSearchReset"><svg-icon type="mdi" :path="refreshPath"></svg-icon> 초기화</button> -->
             </div>

84aae41

2515f83

client/views/pages/adm/boardManagement/wordsManagement/WordsManagementSelectList.vue

--- client/views/pages/adm/boardManagement/wordsManagement/WordsManagementSelectList.vue

+++ client/views/pages/adm/boardManagement/wordsManagement/WordsManagementSelectList.vue


 <template>
     <div class="search-wrap">
+        <div></div>
         <div class="search-bar border">
             <select class="form-select sm border-none">
                 <option value="">전체</option>

84aae41

2515f83

client/views/pages/adm/log/LoginLog.vue

--- client/views/pages/adm/log/LoginLog.vue

+++ client/views/pages/adm/log/LoginLog.vue


 <template>
   <div class="search-wrap">
-    <div class="search-bar">
+    <div></div>
+    <div class="layout">
       <div class="form-control sm cal">
         <VueDatePicker
           InlineOptions

           v-model="search['endDt']"
         />
       </div>
-      <select
-        name="selectType"
-        id="selectType"
-        class="form-select sm"
-        v-model="search['searchType']"
-      >
-        <option value="">전체</option>
-        <option
-          v-for="(item, idx) in codeList"
-          :key="idx"
-          :value="item.cd"
+      <div class="search-bar border ml10">
+        <select
+          name="selectType"
+          id="selectType"
+          class="form-select sm border-none"
+          v-model="search['searchType']"
         >
-          {{ item.cdNm }}
-        </option>
-      </select>
-      <input
-        type="text"
-        class="form-control sm"
-        v-model="search['searchText']"
-        v-on:keyup.enter="fnViewList"
-        placeholder="검색어를 입력하세요."
-      />
-      <button class="btn-ico xsm  main ico-sch" @click="fnViewList">
-        <span class="sr-only">검색</span>
-      </button>
+          <option value="">전체</option>
+          <option
+            v-for="(item, idx) in codeList"
+            :key="idx"
+            :value="item.cd"
+          >
+            {{ item.cdNm }}
+          </option>
+        </select>
+        <input
+          type="text"
+          class="form-control sm border-none"
+          v-model="search['searchText']"
+          v-on:keyup.enter="fnViewList"
+          placeholder="검색어를 입력하세요."
+        />
+        <button class="btn-ico xsm  main ico-sch" @click="fnViewList">
+          <span class="sr-only">검색</span>
+        </button>
+      </div>
     </div>
   </div>
   <div class="content-zone">

84aae41

2515f83

client/views/pages/adm/log/PersonalDataLog.vue

--- client/views/pages/adm/log/PersonalDataLog.vue

+++ client/views/pages/adm/log/PersonalDataLog.vue


 <template>
   <div class="search-wrap">
-    <div class="search-bar">
-      <div class="form-control sm cal">
-        <VueDatePicker
-          InlineOptions   
-          placeholder="시작일"
-          locale="ko"
-          :enable-time-picker="false"
-          :format="formatDate"
-          v-model="search['startDt']"
-            />
-      </div>  
-      <div class="mark">-</div>
-      <div  class="form-control sm cal">
-        <VueDatePicker
-          InlineOptions
-          placeholder="종료일"
-          locale="ko"
-          :enable-time-picker="false"
-          :format="formatDate"
-          v-model="search['endDt']"
-        />
+    <div></div>
+    <div class="layout">
+        <div class="form-control sm cal">
+          <VueDatePicker
+            InlineOptions   
+            placeholder="시작일"
+            locale="ko"
+            :enable-time-picker="false"
+            :format="formatDate"
+            v-model="search['startDt']"
+              />
+        </div>  
+        <div class="mark">-</div>
+        <div  class="form-control sm cal">
+          <VueDatePicker
+            InlineOptions
+            placeholder="종료일"
+            locale="ko"
+            :enable-time-picker="false"
+            :format="formatDate"
+            v-model="search['endDt']"
+          />
       </div>
-            <select
-              name="selectType"
-              id="selectType"
-              class="form-select sm"
-              v-model="search['searchType']"
-            >
-              <option value="">전체</option>
-              <option
-                v-for="(item, idx) in codeList"
-                :key="idx"
-                :value="item.cd"
-              >
-                {{ item.cdNm }}
-              </option>
-            </select>
-            <input
-              type="text"
-              class="form-control sm"
-              v-model="search['searchText']"
-              v-on:keyup.enter="fnViewList"
-              placeholder="검색어를 입력하세요."
-            />
-          <button class="btn-ico xsm  main ico-sch" @click="fnViewList">
-            <span class="sr-only">검색</span>
-          </button>
+      <div class="search-bar border ml10">
+        <select
+          name="selectType"
+          id="selectType"
+          class="form-select sm border-none"
+          v-model="search['searchType']"
+        >
+          <option value="">전체</option>
+          <option
+            v-for="(item, idx) in codeList"
+            :key="idx"
+            :value="item.cd"
+          >
+            {{ item.cdNm }}
+          </option>
+        </select>
+        <input
+          type="text"
+          class="form-control sm border-none"
+          v-model="search['searchText']"
+          v-on:keyup.enter="fnViewList"
+          placeholder="검색어를 입력하세요."
+        />
+        <button class="btn-ico xsm  main ico-sch" @click="fnViewList">
+          <span class="sr-only">검색</span>
+        </button>
+      </div>
     </div>
   </div>
   <div class="content-zone">

84aae41

2515f83

client/views/pages/adm/member/adminManagement/AdminManagementSelectList.vue

--- client/views/pages/adm/member/adminManagement/AdminManagementSelectList.vue

+++ client/views/pages/adm/member/adminManagement/AdminManagementSelectList.vue


 <template>
   <div class="search-wrap">
+    <div></div>
     <div class="search-bar border">
         <select class="form-select sm border-none" v-model="search['searchType']">
           <option value="">전체</option>

84aae41

2515f83

client/views/pages/adm/member/userManagement/UserManagementSelectList.vue

--- client/views/pages/adm/member/userManagement/UserManagementSelectList.vue

+++ client/views/pages/adm/member/userManagement/UserManagementSelectList.vue


 <template>
   <div class="search-wrap">
+    <div></div>
     <div class="search-bar  border">
         <select class="form-select sm border-none" v-model="search['searchType']">
           <option value="">전체</option>

84aae41

2515f83

client/views/pages/adm/menuManagement/menuManagement/MenuManagement.vue

--- client/views/pages/adm/menuManagement/menuManagement/MenuManagement.vue

+++ client/views/pages/adm/menuManagement/menuManagement/MenuManagement.vue


               <div class="form-box-title">
                 <p>메뉴 정보</p>
               </div>
-              <div class="form-content">
+              <div class="form-content"  style="grid-template-rows: auto auto auto auto 1fr auto auto;">
                 <div  class="layout">
                   <label class="form-title">상위 메뉴명 </label>
                   <input type="text" class="form-control sm" v-model="viewMenu.upMenuNm" disabled />

                   <label class="form-title">메뉴명</label>
                   <input type="text" class="form-control sm" ref="menuNm" v-model="viewMenu.menuNm"
                     :disabled="!editMode" />
-                </div>
-                <div class="grid-column layout">
-                  <label class="form-title">메뉴 설명</label>
-                  <textarea  v-model="viewMenu.menuExpln" :disabled="!editMode" class="form-control lg area"></textarea>
                 </div>
                 <div class="grid-column layout">
                   <label class="form-title">메뉴 타입</label>

                     </div>
                   </div>
                 </div>
+                <div class="grid-column layout">
+                  <label class="form-title">메뉴 설명</label>
+                  <textarea  v-model="viewMenu.menuExpln" :disabled="!editMode" class="form-control area" style="height: 100%;"></textarea>
+                </div>
                 <div  class="layout">
                   <label class="form-title">등록자</label>
                   <input type="text" class="form-control sm" v-model="viewMenu.rgtrNm" disabled />

84aae41

2515f83

client/views/pages/adm/preferences/commonCodeManagement/CommonCodeManagement.vue

--- client/views/pages/adm/preferences/commonCodeManagement/CommonCodeManagement.vue

+++ client/views/pages/adm/preferences/commonCodeManagement/CommonCodeManagement.vue


               <div class="form-box-title">
                 <p>공통코드정보</p>
               </div>
-              <div class="form-content">
+              <div class="form-content" style="grid-template-rows: auto auto auto 1fr;">
                 <div class="layout">
                   <label for="" class="form-title">상위코드</label>
                   <input type="text" class="form-control sm" disabled v-model="viewCode.upCd" />

                   </div>
                 </div>
                 <div class="grid-column layout">
-                  <label for="textarea" class="form-title">코드설명</label>
-                  <textarea class="form-control" id="textarea" :disabled="isFormDisabled" v-model="viewCode.cdExpln"></textarea>
+                  <label for="textarea" class="form-title" style="vertical-align: top;">코드설명</label>
+                  <textarea class="form-control" id="textarea" :disabled="isFormDisabled" v-model="viewCode.cdExpln" style="height: 100%;"></textarea>
                 </div>
               </div>
             </div>

84aae41

2515f83

client/views/pages/adm/preferences/contentTypeManagement/ContentTypeManagementSelectList.vue

--- client/views/pages/adm/preferences/contentTypeManagement/ContentTypeManagementSelectList.vue

+++ client/views/pages/adm/preferences/contentTypeManagement/ContentTypeManagementSelectList.vue


 <template>
   <div class="search-wrap">
+    <div></div>
     <div class="search-bar border">
         <input
           type="text"

84aae41

2515f83

client/views/pages/adm/statistics/BbsStatistics.vue

--- client/views/pages/adm/statistics/BbsStatistics.vue

+++ client/views/pages/adm/statistics/BbsStatistics.vue


 <template>
   <div class="search-wrap">
+    <div class="chart-info">
+      <p class="detail-text">
+        방문자 총
+        <span class="detail-bold blue">{{ totalCnt }}</span>
+        명
+      </p>
+    </div>
     <div class="search-bar">
       <div class="form-control sm cal">
         <VueDatePicker

   <div class="content-zone sch-full">
     <div class="content">
       <div class="scroll">
-        <div class="chart-zone mb30" v-show="bbsCnt > 0">
-          <div class="chart-info">
-            <p class="detail-text">
-              방문자 총
-              <span class="detail-bold blue">{{ totalCnt }}</span>
-              명
-            </p>
-          </div>
+        <div class="chart-zone mb30" v-show="bbsCnt > 0"  ref="two">
           <div class="chart-wrap" ref="chartdiv">
             <ClusteredBarChart :chartData="chartData" columnX="menu" />
           </div>
         </div>
-        <div class="tbl-wrap">
+        <div class="tbl-wrap" ref="first">
           <table class="tbl data mixing">
             <colgroup>
               <col width="25%" />

             </colgroup>
             <thead>
               <tr>
-                <th rowspan="2">구분</th>
-                <th colspan="3">사용자 구분</th>
+                <th rowspan="2"  class="sticky top-0">구분</th>
+                <th colspan="3"  class="sticky top-0">사용자 구분</th>
               </tr>
               <tr>
-                <th class="text-ct">관리자</th>
-                <th class="text-ct">사용자</th>
-                <th class="text-ct">비로그인 사용자</th>
+                <th class="sticky top-40">관리자</th>
+                <th class="sticky top-40">사용자</th>
+                <th class="sticky top-40">비로그인 사용자</th>
               </tr>
             </thead>
             <tbody>
               <template v-if="bbsCnt > 0">
                 <tr v-for="(tr, index) of chartData" :key="index">
-                  <td class="text-ct">{{ tr.menu }}</td>
-                  <td class="text-rg">{{ tr["관리자"] }}</td>
-                  <td class="text-rg">{{ tr["사용자"] }}</td>
-                  <td class="text-rg">{{ tr["비로그인 사용자"] }}</td>
+                  <td>{{ tr.menu }}</td>
+                  <td>{{ tr["관리자"] }}</td>
+                  <td>{{ tr["사용자"] }}</td>
+                  <td>{{ tr["비로그인 사용자"] }}</td>
                 </tr>
               </template>
               <template v-else>

       const month = ('00' + (date.getMonth() + 1)).slice(-2);
       const day = ('00' + date.getDate()).slice(-2);
       return `${year}-${month}-${day}`;
+    },
+    updateHeight() {
+      this.$nextTick(() => {
+        const first = this.$refs.first;
+        const two = this.$refs.two;
+
+        let total = 0;
+        if (two) total += two.offsetHeight;
+
+        if (first) {
+          first.style.height = `calc(100% - ${total}px - 30px)`;
+        }
+      });
+    },
+  },
+  watch:{
+    bbsCnt:{
+      handler() {
+        this.$nextTick(() => {
+          this.updateHeight();
+        });
+      },
+      deep: true,
     }
   },
+  mounted() {
+    this.updateHeight();
+
+    // 창 크기 변경 시에도 대응하고 싶다면:
+    window.addEventListener('resize', this.updateHeight);
+  },
+  beforeUnmount() {
+    window.removeEventListener('resize', this.updateHeight);
+  },
 };
 </script>

84aae41

2515f83

client/views/pages/adm/statistics/MenuStatistics.vue

--- client/views/pages/adm/statistics/MenuStatistics.vue

+++ client/views/pages/adm/statistics/MenuStatistics.vue


 <template>
   <div class="search-wrap">
+    <div class="chart-info">
+      <p class="detail-text">
+        방문자 총
+        <span class="detail-bold blue">{{ totalCnt }}</span>
+        명
+      </p>
+    </div>
     <div class="search-bar">
       <div class="form-control sm cal">
         <VueDatePicker

   <div class="content-zone sch-full">
     <div class="content">
       <div class="scroll">
-        <div class="chart-zone mb30" v-show="menuCnt > 0">
-          <div class="chart-info">
-            <p class="detail-text">
-              방문자 총
-              <span class="detail-bold blue">{{ totalCnt }}</span>
-              명
-            </p>
-          </div>
+        <div class="chart-zone mb30" v-show="menuCnt > 0" ref="two">
           <div class="chart-wrap" ref="chartdiv">
             <ClusteredBarChart :chartData="chartData" columnX="menu" />
           </div>
         </div>
-        <div class="tbl-wrap">
+        <div class="tbl-wrap  overflow-y" ref="first">
           <table class="tbl data mixing">
             <colgroup>
               <col width="25%" />

             </colgroup>
             <thead>
               <tr>
-                <th rowspan="2">구분</th>
-                <th colspan="3">사용자 구분</th>
+                <th rowspan="2" class="sticky top-0">구분</th>
+                <th colspan="3" class="sticky top-0">사용자 구분</th>
               </tr>
               <tr>
-                <th class="text-ct">관리자</th>
-                <th class="text-ct">사용자</th>
-                <th class="text-ct">비로그인 사용자</th>
+                <th class="sticky top-40">관리자</th>
+                <th class="sticky top-40">사용자</th>
+                <th class="sticky top-40">비로그인 사용자</th>
               </tr>
             </thead>
             <tbody>
               <template v-if="menuCnt > 0">
                 <tr v-for="(tr, index) of chartData" :key="index">
-                  <td class="text-ct">{{ tr.menu }}</td>
-                  <td class="text-rg">{{ tr["관리자"] }}</td>
-                  <td class="text-rg">{{ tr["사용자"] }}</td>
-                  <td class="text-rg">{{ tr["비로그인 사용자"] }}</td>
+                  <td>{{ tr.menu }}</td>
+                  <td>{{ tr["관리자"] }}</td>
+                  <td>{{ tr["사용자"] }}</td>
+                  <td>{{ tr["비로그인 사용자"] }}</td>
                 </tr>
               </template>
               <template v-else>
                 <tr>
-                  <td colspan="4" class="text-ct">
+                  <td colspan="4" class="data-none">
                     등록된 정보가 존재하지 않습니다.
                   </td>
                 </tr>

       const month = ('00' + (date.getMonth() + 1)).slice(-2);
       const day = ('00' + date.getDate()).slice(-2);
       return `${year}-${month}-${day}`;
+    },
+    updateHeight() {
+      this.$nextTick(() => {
+        const first = this.$refs.first;
+        const two = this.$refs.two;
+
+        let total = 0;
+        if (two) total += two.offsetHeight;
+
+        if (first) {
+          first.style.height = `calc(100% - ${total}px - 30px)`;
+        }
+      });
+    },
+  },
+  watch:{
+    menuCnt:{
+      handler() {
+        this.$nextTick(() => {
+          this.updateHeight();
+        });
+      },
+      deep: true,
     }
   },
+  mounted() {
+    this.updateHeight();
+
+    // 창 크기 변경 시에도 대응하고 싶다면:
+    window.addEventListener('resize', this.updateHeight);
+  },
+  beforeUnmount() {
+    window.removeEventListener('resize', this.updateHeight);
+  },
 };
 </script>

84aae41

2515f83

client/views/pages/adm/statistics/UserStatistics.vue

--- client/views/pages/adm/statistics/UserStatistics.vue

+++ client/views/pages/adm/statistics/UserStatistics.vue


 <template>
+  
   <div class="search-wrap">
+    <div class="chart-info">
+      <p class="detail-text">
+        방문자 총
+        <span class="detail-bold blue">{{ totalCnt }}</span>
+        명
+      </p>
+    </div>
     <div class="search-bar">
       <div class="form-control sm cal">
           <VueDatePicker

   <div class="content-zone sch-full">
     <div class="content">
       <div class="scroll">
-        <div class="chart-zone mb30">
-          <div class="chart-info">
-            <p class="detail-text">
-              방문자 총
-              <span class="detail-bold blue">{{ totalCnt }}</span>
-              명
-            </p>
-          </div>
+        <div class="chart-zone mb30"  ref="two">
           <div class="chart-wrap" ref="chartdiv">
             <ClusteredColumnChart :chartData="chartData" columnX="date" />
           </div>
         </div>
-        <div class="tbl-wrap">
+        <div class="tbl-wrap overflow-y" ref="first">
           <table class="tbl data mixing">
             <colgroup>
               <template v-for="(key, index) of chartData[0]" :key="index">

                 />
               </template>
             </colgroup>
-            <thead>
+            <thead class="sticky">
               <tr>
-                <th rowspan="2">구분</th>
-                <th colspan="3">사용자 구분</th>
+                <th rowspan="2" class="sticky top-0" >구분</th>
+                <th colspan="3" class="sticky top-0">사용자 구분</th>
               </tr>
               <tr>
-                <th class="text-ct">관리자</th>
-                <th class="text-ct">사용자</th>
-                <th class="text-ct">비로그인 사용자</th>
+                <th class="sticky top-40">관리자</th>
+                <th class="sticky top-40">사용자</th>
+                <th class="sticky top-40">비로그인 사용자</th>
               </tr>
             </thead>
             <tbody>
               <tr v-for="(tr, index) of chartData" :key="index">
-                <td class="text-ct">{{ tr.date }}</td>
-                <td class="text-rg">{{ tr["관리자"] }}</td>
-                <td class="text-rg">{{ tr["사용자"] }}</td>
-                <td class="text-rg">{{ tr["비로그인 사용자"] }}</td>
+                <td>{{ tr.date }}</td>
+                <td>{{ tr["관리자"] }}</td>
+                <td>{{ tr["사용자"] }}</td>
+                <td>{{ tr["비로그인 사용자"] }}</td>
               </tr>
             </tbody>
           </table>

       const month = ('00' + (date.getMonth() + 1)).slice(-2);
       const day = ('00' + date.getDate()).slice(-2);
       return `${year}-${month}-${day}`;
-    }
+    },
+    updateHeight() {
+      this.$nextTick(() => {
+        const first = this.$refs.first;
+        const two = this.$refs.two;
+
+        let total = 0;
+        if (two) total += two.offsetHeight;
+
+        if (first) {
+          first.style.height = `calc(100% - ${total}px - 30px)`;
+        }
+      });
+    },
+  },
+  mounted() {
+    this.updateHeight();
+
+    // 창 크기 변경 시에도 대응하고 싶다면:
+    window.addEventListener('resize', this.updateHeight);
+  },
+  beforeUnmount() {
+    window.removeEventListener('resize', this.updateHeight);
   },
 };
 </script>

84aae41

2515f83

client/views/pages/adm/system/networkAccessControl/NetworkAccessControlSelectList.vue

--- client/views/pages/adm/system/networkAccessControl/NetworkAccessControlSelectList.vue

+++ client/views/pages/adm/system/networkAccessControl/NetworkAccessControlSelectList.vue


 <template>
    <div class="search-wrap">
+    <div></div>
     <div class="search-bar border">
       <select
         name="selectType"

Add a comment

Open 0
Closed 0

List

...	...	@@ -1,6 +1,6 @@
1	1	<template>
2		- <div v-if="breadcrumbList.length > 0">
3		- <span><router-link :to="{path : this.$filters.ctxPath('/adm/main.page')}">홈</router-link> > </span>
	2	+ <div v-if="breadcrumbList.length > 0" class="breadcrumb-warp">
	3	+ <span class="home"><router-link :to="{path : this.$filters.ctxPath('/adm/main.page')}">홈</router-link> > </span>
4	4	<span v-for="(crumb, index) in breadcrumbList" :key="index">
5	5	{{ crumb.menuNm }}
6	6	<span v-if="index < breadcrumbList.length - 1"> > </span>

...	...	@@ -72,6 +72,7 @@
72	72	<!-- 관리자 -->
73	73	<template v-else>
74	74	<div class="search-wrap">
	75	+ <div></div>
75	76	<div class="search-bar border">
76	77	<select
77	78	class="form-select sm border-none"

...	...	@@ -186,6 +186,7 @@
186	186	</template>
187	187	<template v-else>
188	188	<div class="search-wrap">
	189	+ <div></div>
189	190	<div class="search-bar border">
190	191	<select
191	192	class="form-select sm border-none"

...	...	@@ -54,6 +54,7 @@
54	54	</template>
55	55	<template v-else>
56	56	<div class="search-wrap">
	57	+ <div></div>
57	58	<div class="search-bar border">
58	59	<select name="" id="" class="form-select sm border-none" v-model="search.searchType">
59	60	<option value="">전체</option>

...	...	@@ -17,7 +17,7 @@
17	17	border-bottom: 1px solid var(--tk-gray-30);
18	18
19	19	.title-zone{
20		- @include flex-layout(flex, flex-end, flex-start);
	20	+ @include flex-layout(flex, center, flex-start);
21	21
22	22	.page-title {
23	23	font-size: var(--tk-fz-title-xlg);

...	...	@@ -1,5 +1,6 @@
1	1	<template>
2	2	<div class="search-wrap">
	3	+ <div></div>
3	4	<div class="search-bar border">
4	5	<!-- <select name="" id="" class="border-none gd-2">
5	6	<option value="">전체</option>

...	...	@@ -2,15 +2,18 @@
2	2	<template v-if="pageRole === 'portal'"></template>
3	3	<template v-else>
4	4	<div class="search-wrap">
	5	+ <div></div>
5	6	<div class="search-bar border">
6	7	<select class="form-select sm border-none" v-model="search.searchType">
7	8	<option value="">전체</option>
8	9	<option v-for="(item, idx) in codeList" :key="idx" :value="item.cd">{{ item.cdNm }}</option>
9	10	</select>
10		- <input type="text" class="full-input border-none gd-9 condition-input" placeholder="검색어를 입력하세요." v-model="search.searchText" @keyup.enter="findAll">
	11	+ <input type="text" class="form-control sm border-none" placeholder="검색어를 입력하세요." v-model="search.searchText" @keyup.enter="findAll">
11	12
12	13
13		- <button class="form-control sm border-none" @click="findAll">검색</button>
	14	+ <button class="btn-ico xsm main ico-sch" @click="findAll">
	15	+ <span class="sr-only">검색</span>
	16	+ </button>
14	17
15	18	<!-- <button class="large-btn darkg-border-btn" @click="fnSearchReset"><svg-icon type="mdi" :path="refreshPath"></svg-icon> 초기화</button> -->
16	19	</div>

...	...	@@ -1,6 +1,7 @@
1	1	<template>
2	2	<div class="search-wrap">
3		- <div class="search-bar">
	3	+ <div></div>
	4	+ <div class="layout">
4	5	<div class="form-control sm cal">
5	6	<VueDatePicker
6	7	InlineOptions
...	...	@@ -22,31 +23,33 @@
22	23	v-model="search['endDt']"
23	24	/>
24	25	</div>
25		- <select
26		- name="selectType"
27		- id="selectType"
28		- class="form-select sm"
29		- v-model="search['searchType']"
30		- >
31		- <option value="">전체</option>
32		- <option
33		- v-for="(item, idx) in codeList"
34		- :key="idx"
35		- :value="item.cd"
	26	+ <div class="search-bar border ml10">
	27	+ <select
	28	+ name="selectType"
	29	+ id="selectType"
	30	+ class="form-select sm border-none"
	31	+ v-model="search['searchType']"
36	32	>
37		- {{ item.cdNm }}
38		- </option>
39		- </select>
40		- <input
41		- type="text"
42		- class="form-control sm"
43		- v-model="search['searchText']"
44		- v-on:keyup.enter="fnViewList"
45		- placeholder="검색어를 입력하세요."
46		- />
47		- <button class="btn-ico xsm main ico-sch" @click="fnViewList">
48		- <span class="sr-only">검색</span>
49		- </button>
	33	+ <option value="">전체</option>
	34	+ <option
	35	+ v-for="(item, idx) in codeList"
	36	+ :key="idx"
	37	+ :value="item.cd"
	38	+ >
	39	+ {{ item.cdNm }}
	40	+ </option>
	41	+ </select>
	42	+ <input
	43	+ type="text"
	44	+ class="form-control sm border-none"
	45	+ v-model="search['searchText']"
	46	+ v-on:keyup.enter="fnViewList"
	47	+ placeholder="검색어를 입력하세요."
	48	+ />
	49	+ <button class="btn-ico xsm main ico-sch" @click="fnViewList">
	50	+ <span class="sr-only">검색</span>
	51	+ </button>
	52	+ </div>
50	53	</div>
51	54	</div>
52	55	<div class="content-zone">

...	...	@@ -1,52 +1,55 @@
1	1	<template>
2	2	<div class="search-wrap">
3		- <div class="search-bar">
4		- <div class="form-control sm cal">
5		- <VueDatePicker
6		- InlineOptions
7		- placeholder="시작일"
8		- locale="ko"
9		- :enable-time-picker="false"
10		- :format="formatDate"
11		- v-model="search['startDt']"
12		- />
13		- </div>
14		- <div class="mark">-</div>
15		- <div class="form-control sm cal">
16		- <VueDatePicker
17		- InlineOptions
18		- placeholder="종료일"
19		- locale="ko"
20		- :enable-time-picker="false"
21		- :format="formatDate"
22		- v-model="search['endDt']"
23		- />
	3	+ <div></div>
	4	+ <div class="layout">
	5	+ <div class="form-control sm cal">
	6	+ <VueDatePicker
	7	+ InlineOptions
	8	+ placeholder="시작일"
	9	+ locale="ko"
	10	+ :enable-time-picker="false"
	11	+ :format="formatDate"
	12	+ v-model="search['startDt']"
	13	+ />
	14	+ </div>
	15	+ <div class="mark">-</div>
	16	+ <div class="form-control sm cal">
	17	+ <VueDatePicker
	18	+ InlineOptions
	19	+ placeholder="종료일"
	20	+ locale="ko"
	21	+ :enable-time-picker="false"
	22	+ :format="formatDate"
	23	+ v-model="search['endDt']"
	24	+ />
24	25	</div>
25		- <select
26		- name="selectType"
27		- id="selectType"
28		- class="form-select sm"
29		- v-model="search['searchType']"
30		- >
31		- <option value="">전체</option>
32		- <option
33		- v-for="(item, idx) in codeList"
34		- :key="idx"
35		- :value="item.cd"
36		- >
37		- {{ item.cdNm }}
38		- </option>
39		- </select>
40		- <input
41		- type="text"
42		- class="form-control sm"
43		- v-model="search['searchText']"
44		- v-on:keyup.enter="fnViewList"
45		- placeholder="검색어를 입력하세요."
46		- />
47		- <button class="btn-ico xsm main ico-sch" @click="fnViewList">
48		- <span class="sr-only">검색</span>
49		- </button>
	26	+ <div class="search-bar border ml10">
	27	+ <select
	28	+ name="selectType"
	29	+ id="selectType"
	30	+ class="form-select sm border-none"
	31	+ v-model="search['searchType']"
	32	+ >
	33	+ <option value="">전체</option>
	34	+ <option
	35	+ v-for="(item, idx) in codeList"
	36	+ :key="idx"
	37	+ :value="item.cd"
	38	+ >
	39	+ {{ item.cdNm }}
	40	+ </option>
	41	+ </select>
	42	+ <input
	43	+ type="text"
	44	+ class="form-control sm border-none"
	45	+ v-model="search['searchText']"
	46	+ v-on:keyup.enter="fnViewList"
	47	+ placeholder="검색어를 입력하세요."
	48	+ />
	49	+ <button class="btn-ico xsm main ico-sch" @click="fnViewList">
	50	+ <span class="sr-only">검색</span>
	51	+ </button>
	52	+ </div>
50	53	</div>
51	54	</div>
52	55	<div class="content-zone">

...	...	@@ -29,7 +29,7 @@
29	29	<div class="form-box-title">
30	30	<p>메뉴 정보</p>
31	31	</div>
32		- <div class="form-content">
	32	+ <div class="form-content" style="grid-template-rows: auto auto auto auto 1fr auto auto;">
33	33	<div class="layout">
34	34	<label class="form-title">상위 메뉴명 </label>
35	35	<input type="text" class="form-control sm" v-model="viewMenu.upMenuNm" disabled />
...	...	@@ -38,10 +38,6 @@
38	38	<label class="form-title">메뉴명</label>
39	39	<input type="text" class="form-control sm" ref="menuNm" v-model="viewMenu.menuNm"
40	40	:disabled="!editMode" />
41		- </div>
42		- <div class="grid-column layout">
43		- <label class="form-title">메뉴 설명</label>
44		- <textarea v-model="viewMenu.menuExpln" :disabled="!editMode" class="form-control lg area"></textarea>
45	41	</div>
46	42	<div class="grid-column layout">
47	43	<label class="form-title">메뉴 타입</label>
...	...	@@ -130,6 +126,10 @@
130	126	</div>
131	127	</div>
132	128	</div>
	129	+ <div class="grid-column layout">
	130	+ <label class="form-title">메뉴 설명</label>
	131	+ <textarea v-model="viewMenu.menuExpln" :disabled="!editMode" class="form-control area" style="height: 100%;"></textarea>
	132	+ </div>
133	133	<div class="layout">
134	134	<label class="form-title">등록자</label>
135	135	<input type="text" class="form-control sm" v-model="viewMenu.rgtrNm" disabled />

...	...	@@ -31,7 +31,7 @@
31	31	<div class="form-box-title">
32	32	<p>공통코드정보</p>
33	33	</div>
34		- <div class="form-content">
	34	+ <div class="form-content" style="grid-template-rows: auto auto auto 1fr;">
35	35	<div class="layout">
36	36	<label for="" class="form-title">상위코드</label>
37	37	<input type="text" class="form-control sm" disabled v-model="viewCode.upCd" />
...	...	@@ -69,8 +69,8 @@
69	69	</div>
70	70	</div>
71	71	<div class="grid-column layout">
72		- <label for="textarea" class="form-title">코드설명</label>
73		- <textarea class="form-control" id="textarea" :disabled="isFormDisabled" v-model="viewCode.cdExpln"></textarea>
	72	+ <label for="textarea" class="form-title" style="vertical-align: top;">코드설명</label>
	73	+ <textarea class="form-control" id="textarea" :disabled="isFormDisabled" v-model="viewCode.cdExpln" style="height: 100%;"></textarea>
74	74	</div>
75	75	</div>
76	76	</div>

...	...	@@ -1,5 +1,12 @@
1	1	<template>
2	2	<div class="search-wrap">
	3	+ <div class="chart-info">
	4	+ <p class="detail-text">
	5	+ 방문자 총
	6	+ <span class="detail-bold blue">{{ totalCnt }}</span>
	7	+ 명
	8	+ </p>
	9	+ </div>
3	10	<div class="search-bar">
4	11	<div class="form-control sm cal">
5	12	<VueDatePicker
...	...	@@ -51,19 +58,12 @@
51	58	<div class="content-zone sch-full">
52	59	<div class="content">
53	60	<div class="scroll">
54		- <div class="chart-zone mb30" v-show="bbsCnt > 0">
55		- <div class="chart-info">
56		- <p class="detail-text">
57		- 방문자 총
58		- <span class="detail-bold blue">{{ totalCnt }}</span>
59		- 명
60		- </p>
61		- </div>
	61	+ <div class="chart-zone mb30" v-show="bbsCnt > 0" ref="two">
62	62	<div class="chart-wrap" ref="chartdiv">
63	63	<ClusteredBarChart :chartData="chartData" columnX="menu" />
64	64	</div>
65	65	</div>
66		- <div class="tbl-wrap">
	66	+ <div class="tbl-wrap" ref="first">
67	67	<table class="tbl data mixing">
68	68	<colgroup>
69	69	<col width="25%" />
...	...	@@ -73,22 +73,22 @@
73	73	</colgroup>
74	74	<thead>
75	75	<tr>
76		- <th rowspan="2">구분</th>
77		- <th colspan="3">사용자 구분</th>
	76	+ <th rowspan="2" class="sticky top-0">구분</th>
	77	+ <th colspan="3" class="sticky top-0">사용자 구분</th>
78	78	</tr>
79	79	<tr>
80		- <th class="text-ct">관리자</th>
81		- <th class="text-ct">사용자</th>
82		- <th class="text-ct">비로그인 사용자</th>
	80	+ <th class="sticky top-40">관리자</th>
	81	+ <th class="sticky top-40">사용자</th>
	82	+ <th class="sticky top-40">비로그인 사용자</th>
83	83	</tr>
84	84	</thead>
85	85	<tbody>
86	86	<template v-if="bbsCnt > 0">
87	87	<tr v-for="(tr, index) of chartData" :key="index">
88		- <td class="text-ct">{{ tr.menu }}</td>
89		- <td class="text-rg">{{ tr["관리자"] }}</td>
90		- <td class="text-rg">{{ tr["사용자"] }}</td>
91		- <td class="text-rg">{{ tr["비로그인 사용자"] }}</td>
	88	+ <td>{{ tr.menu }}</td>
	89	+ <td>{{ tr["관리자"] }}</td>
	90	+ <td>{{ tr["사용자"] }}</td>
	91	+ <td>{{ tr["비로그인 사용자"] }}</td>
92	92	</tr>
93	93	</template>
94	94	<template v-else>
...	...	@@ -250,7 +250,39 @@
250	250	const month = ('00' + (date.getMonth() + 1)).slice(-2);
251	251	const day = ('00' + date.getDate()).slice(-2);
252	252	return `${year}-${month}-${day}`;
	253	+ },
	254	+ updateHeight() {
	255	+ this.$nextTick(() => {
	256	+ const first = this.$refs.first;
	257	+ const two = this.$refs.two;
	258	+
	259	+ let total = 0;
	260	+ if (two) total += two.offsetHeight;
	261	+
	262	+ if (first) {
	263	+ first.style.height = `calc(100% - ${total}px - 30px)`;
	264	+ }
	265	+ });
	266	+ },
	267	+ },
	268	+ watch:{
	269	+ bbsCnt:{
	270	+ handler() {
	271	+ this.$nextTick(() => {
	272	+ this.updateHeight();
	273	+ });
	274	+ },
	275	+ deep: true,
253	276	}
254	277	},
	278	+ mounted() {
	279	+ this.updateHeight();
	280	+
	281	+ // 창 크기 변경 시에도 대응하고 싶다면:
	282	+ window.addEventListener('resize', this.updateHeight);
	283	+ },
	284	+ beforeUnmount() {
	285	+ window.removeEventListener('resize', this.updateHeight);
	286	+ },
255	287	};
256	288	</script> (파일 끝에 줄바꿈 문자 없음)

...	...	@@ -1,5 +1,13 @@
1	1	<template>
	2	+
2	3	<div class="search-wrap">
	4	+ <div class="chart-info">
	5	+ <p class="detail-text">
	6	+ 방문자 총
	7	+ <span class="detail-bold blue">{{ totalCnt }}</span>
	8	+ 명
	9	+ </p>
	10	+ </div>
3	11	<div class="search-bar">
4	12	<div class="form-control sm cal">
5	13	<VueDatePicker
...	...	@@ -55,19 +63,12 @@
55	63	<div class="content-zone sch-full">
56	64	<div class="content">
57	65	<div class="scroll">
58		- <div class="chart-zone mb30">
59		- <div class="chart-info">
60		- <p class="detail-text">
61		- 방문자 총
62		- <span class="detail-bold blue">{{ totalCnt }}</span>
63		- 명
64		- </p>
65		- </div>
	66	+ <div class="chart-zone mb30" ref="two">
66	67	<div class="chart-wrap" ref="chartdiv">
67	68	<ClusteredColumnChart :chartData="chartData" columnX="date" />
68	69	</div>
69	70	</div>
70		- <div class="tbl-wrap">
	71	+ <div class="tbl-wrap overflow-y" ref="first">
71	72	<table class="tbl data mixing">
72	73	<colgroup>
73	74	<template v-for="(key, index) of chartData[0]" :key="index">
...	...	@@ -77,23 +78,23 @@
77	78	/>
78	79	</template>
79	80	</colgroup>
80		- <thead>
	81	+ <thead class="sticky">
81	82	<tr>
82		- <th rowspan="2">구분</th>
83		- <th colspan="3">사용자 구분</th>
	83	+ <th rowspan="2" class="sticky top-0" >구분</th>
	84	+ <th colspan="3" class="sticky top-0">사용자 구분</th>
84	85	</tr>
85	86	<tr>
86		- <th class="text-ct">관리자</th>
87		- <th class="text-ct">사용자</th>
88		- <th class="text-ct">비로그인 사용자</th>
	87	+ <th class="sticky top-40">관리자</th>
	88	+ <th class="sticky top-40">사용자</th>
	89	+ <th class="sticky top-40">비로그인 사용자</th>
89	90	</tr>
90	91	</thead>
91	92	<tbody>
92	93	<tr v-for="(tr, index) of chartData" :key="index">
93		- <td class="text-ct">{{ tr.date }}</td>
94		- <td class="text-rg">{{ tr["관리자"] }}</td>
95		- <td class="text-rg">{{ tr["사용자"] }}</td>
96		- <td class="text-rg">{{ tr["비로그인 사용자"] }}</td>
	94	+ <td>{{ tr.date }}</td>
	95	+ <td>{{ tr["관리자"] }}</td>
	96	+ <td>{{ tr["사용자"] }}</td>
	97	+ <td>{{ tr["비로그인 사용자"] }}</td>
97	98	</tr>
98	99	</tbody>
99	100	</table>
...	...	@@ -237,7 +238,29 @@
237	238	const month = ('00' + (date.getMonth() + 1)).slice(-2);
238	239	const day = ('00' + date.getDate()).slice(-2);
239	240	return `${year}-${month}-${day}`;
240		- }
	241	+ },
	242	+ updateHeight() {
	243	+ this.$nextTick(() => {
	244	+ const first = this.$refs.first;
	245	+ const two = this.$refs.two;
	246	+
	247	+ let total = 0;
	248	+ if (two) total += two.offsetHeight;
	249	+
	250	+ if (first) {
	251	+ first.style.height = `calc(100% - ${total}px - 30px)`;
	252	+ }
	253	+ });
	254	+ },
	255	+ },
	256	+ mounted() {
	257	+ this.updateHeight();
	258	+
	259	+ // 창 크기 변경 시에도 대응하고 싶다면:
	260	+ window.addEventListener('resize', this.updateHeight);
	261	+ },
	262	+ beforeUnmount() {
	263	+ window.removeEventListener('resize', this.updateHeight);
241	264	},
242	265	};
243	266	</script> (파일 끝에 줄바꿈 문자 없음)

Delete comment