Commit @a7b85c45002be0af7c978b3ffcc13a12c0f77383

정다정 01-26

240126 정다정 css 수정

@a7b85c45002be0af7c978b3ffcc13a12c0f77383

29d499a

a7b85c4

client/resources/css/common.css

--- client/resources/css/common.css

+++ client/resources/css/common.css


     height: 100%;
 }
 
-
 .justify-start {
     justify-content: flex-start;
 }

     align-items: flex-end;
 }
 
-
-
 /* 정렬 배율 */
 
 .flex5 {
-    flex: 0 0 4.5%
+    flex: 0 0 4.5%;
 }
 
 .flex10 {
-    flex: 0 0 9.5%
+    flex: 0 0 9.5%;
 }
 
 .flex15 {
-    flex: 0 0 14.5%
+    flex: 0 0 14.5%;
 }
 
 .flex20 {
-    flex: 0 0 19.5%
+    flex: 0 0 19.5%;
 }
 
 .flex25 {
-    flex: 0 0 24.5%
+    flex: 0 0 24.5%;
 }
 
 .flex30 {
-    flex: 0 0 29.5%
+    flex: 0 0 29.5%;
 }
 
 .flex35 {
-    flex: 0 0 34.5%
+    flex: 0 0 34.5%;
 }
 
 .flex40 {
-    flex: 0 0 39.5%
+    flex: 0 0 39.5%;
 }
 
 .flex45 {
-    flex: 0 0 44.5%
+    flex: 0 0 44.5%;
 }
 
 .flex50 {
-    flex: 0 0 49.5%
+    flex: 0 0 49.5%;
 }
 
 .flex55 {
-    flex: 0 0 54.5%
+    flex: 0 0 54.5%;
 }
 
-
 .flex60 {
-    flex: 0 0 59.5%
+    flex: 0 0 59.5%;
 }
 
 .flex65 {
-    flex: 0 0 64.5%
+    flex: 0 0 64.5%;
 }
 
-
 .flex70 {
-    flex: 0 0 69.5%
+    flex: 0 0 69.5%;
 }
 
 .flex75 {
-    flex: 0 0 74.5%
+    flex: 0 0 74.5%;
 }
 
 .flex80 {
-    flex: 0 0 79.5%
+    flex: 0 0 79.5%;
 }
 
 .flex85 {
-    flex: 0 0 84.5%
+    flex: 0 0 84.5%;
 }
 
-
 .flex90 {
-    flex: 0 0 89.5%
+    flex: 0 0 89.5%;
 }
 
 .flex95 {
-    flex: 0 0 94.5%
+    flex: 0 0 94.5%;
 }
 
 /* 너비 */

 }
 
 /* 마진 */
-.ml0{
+.ml0 {
     margin-left: 0px;
 }
-.ml5{
+.ml5 {
     margin-left: 5px;
 }
-.ml10{
+.ml10 {
     margin-left: 10px;
 }
-.ml20{
+.ml20 {
     margin-left: 20px;
 }
-.ml30{
+.ml30 {
     margin-left: 30px;
 }
-.ml40{
+.ml40 {
     margin-left: 40px;
 }
-.ml50{
+.ml50 {
     margin-left: 50px;
 }
-.ml60{
+.ml60 {
     margin-left: 60px;
 }
-.ml70{
+.ml70 {
     margin-left: 70px;
 }
-.ml80{
+.ml80 {
     margin-left: 80px;
 }
-.ml90{
+.ml90 {
     margin-left: 90px;
 }
-.ml100{
+.ml100 {
     margin-left: 100px;
 }
 
-.mr0{
+.mr0 {
     margin-right: 0px;
 }
-.mr5{
+.mr5 {
     margin-right: 5px;
 }
-.mr10{
+.mr10 {
     margin-right: 10px;
 }
-.mr20{
+.mr20 {
     margin-right: 20px;
 }
-.mr30{
+.mr30 {
     margin-right: 30px;
 }
-.mr40{
+.mr40 {
     margin-right: 40px;
 }
-.mr50{
+.mr50 {
     margin-right: 50px;
 }
-.mr60{
+.mr60 {
     margin-right: 60px;
 }
-.mr70{
+.mr70 {
     margin-right: 70px;
 }
-.mr80{
+.mr80 {
     margin-right: 80px;
 }
-.mr90{
+.mr90 {
     margin-right: 90px;
 }
-.mr100{
+.mr100 {
     margin-right: 100px;
 }
 
-.mt0{
+.mt0 {
     margin-top: 0px;
 }
-.mt5{
+.mt5 {
     margin-top: 5px;
 }
-.mt10{
+.mt10 {
     margin-top: 10px;
 }
-.mt20{
+.mt20 {
     margin-top: 20px;
 }
-.mt30{
+.mt30 {
     margin-top: 30px;
 }
-.mt40{
+.mt40 {
     margin-top: 40px;
 }
-.mt50{
+.mt50 {
     margin-top: 50px;
 }
-.mt60{
+.mt60 {
     margin-top: 60px;
 }
-.mt70{
+.mt70 {
     margin-top: 70px;
 }
-.mt80{
+.mt80 {
     margin-top: 80px;
 }
-.mt90{
+.mt90 {
     margin-top: 90px;
 }
-.mt100{
+.mt100 {
     margin-top: 100px;
 }
 
-.mb0{
+.mb0 {
     margin-bottom: 0px;
 }
-.mb5{
+.mb5 {
     margin-bottom: 5px;
 }
-.mb10{
+.mb10 {
     margin-bottom: 10px;
 }
-.mb20{
+.mb20 {
     margin-bottom: 20px;
 }
-.mb30{
+.mb30 {
     margin-bottom: 30px;
 }
-.mb40{
+.mb40 {
     margin-bottom: 40px;
 }
-.mb50{
+.mb50 {
     margin-bottom: 50px;
 }
-.mb60{
+.mb60 {
     margin-bottom: 60px;
 }
-.mb70{
+.mb70 {
     margin-bottom: 70px;
 }
-.mb80{
+.mb80 {
     margin-bottom: 80px;
 }
-.mb90{
+.mb90 {
     margin-bottom: 90px;
 }
-.mb100{
+.mb100 {
     margin-bottom: 210px;
 }
-
-
 
 /* btn */
 .small-btn {
     width: 120px;
     padding: 5px 10px;
     border-radius: 5px;
+}
+
+.variable-btn {
+    border-radius: 5px;
+    padding: 5px 30px;
 }
 
 .large-btn {

 }
 
 .logout-btn::before {
-    content: "";
+    content: '';
     width: 1px;
     height: 10px;
     position: absolute;

 
 .blue-btn,
 .blue-border-btn:hover {
+    margin: 10px 5px;
     background-color: var(--color-blue);
     color: var(--color-white);
     transition: all 0.3s ease-in-out;

 
 .red-btn,
 .red-border-btn:hover {
+    margin: 10px 5px;
     background-color: var(--color-red);
     color: var(--color-white);
     transition: all 0.3s ease-in-out;

     transition: all 0.3s ease-in-out;
 }
 
-
 .blue-border-btn {
     border: 1px solid var(--color-blue);
     color: var(--color-blue);

 
 .orange-border-btn {
     border: 1px solid var(--color-orange);
-    ;
     color: var(--color-orange);
     background-color: #fff;
 }

     height: 15px;
     margin-left: 10px;
 }
-
-
-
 
 /* text 정렬 */
 .text-lf {

 .red {
     color: var(--color-red);
 }
-

29d499a

a7b85c4

client/resources/css/style.css

--- client/resources/css/style.css

+++ client/resources/css/style.css


     position: relative;
 }
 
-.row{
+.row {
     padding: 0;
 }
 

     border: 1px solid #dbe3fb;
 }
 
-.border{
+.border {
     border: 1px solid #eee;
     border-radius: 5px;
 }

 }
 
 .content-titleZone {
-    padding-bottom: 10px;
+    /* padding-bottom: 10px; */
     border-bottom: 1px solid #aaa;
     margin-bottom: 15px;
 }

 }
 
 /* 테이블 공통 */
-.table-zone{
-    padding: 15px 0;
+.table-zone {
+    padding: 0;
 }
 .list-table,
 .form-table {

 }
 .list-table th,
 .list-table td,
-.form-table th{
+.form-table th {
     text-align: center;
 }
 .list-table th,
 .list-table td,
-.form-table th, 
+.form-table th,
 .form-table td {
     border-top: 1px solid #aaa;
 }

     background-color: #f29600;
     color: #fff;
 }
-.list-table tbody tr{
+.list-table tbody tr {
     cursor: pointer;
 }
 .list-table tbody tr:nth-child(even) {

     text-align: center;
 }
 
-
 .option-table th {
     color: #213f99;
 }
 
-.list-info{
+.list-info {
     margin-bottom: 10px;
 }
-
 
 /* 서치바 공통 */
 /* .table-zone */

     padding: 6px 10px;
     border-radius: 5px;
     width: 300px;
-    transition: all ease-in-out .5s;
+    transition: all ease-in-out 0.5s;
 }
 
 .square-input:hover,

 }
 
 .full-input,
-.full-select{
+.full-select {
     width: 100%;
 }
 
 .half-input,
-.half-select{
+.half-select {
     width: 50%;
 }
 

     font-weight: 900;
     color: #213f99;
 }
-
 
 /* 모달 */
 .modal-wrapper {

     overflow-y: auto;
 }
 
-.large-modal{
+.large-modal {
     width: 90%;
 }
 .small-modal {

     font-size: 1.6rem;
     line-height: 180%;
 }
-
 
 .modal-content-monthly::-webkit-scrollbar {
     width: 10px;

     margin-left: 0;
 }
 
-
 /* 탭 */
 .tab-nav {
     border-top: 1px solid #eee;

     border-right: 0;
 }
 
-
 /* 라벨 css(상세 조회랑 다름) */
 .chekck-type {
     display: none;

     color: #213f99;
 }
 
-.chekck-type:checked+label {
+.chekck-type:checked + label {
     background-color: #213f99;
     color: #fff;
 }
 
-
-
 /* page 추가 */
 /* 작업관리 페이지*/
-.node-zone{
+.node-zone {
     height: calc(100% - 61px);
 }
 
-.text-over{
+.text-over {
     white-space: nowrap;
     overflow: hidden;
-    text-overflow: ellipsis; 
+    text-overflow: ellipsis;
 }
 
-.state span{
+.state span {
     display: inline-block;
     font-size: 1.3rem;
     margin-left: 5px;
 }
 
-.vue-flow__panel button{
-    margin-left: 0;    
+.vue-flow__panel button {
+    margin-left: 0;
 }
 
 /* 파일관리 페이지*/
-.file-zone{
+.file-zone {
     height: 100%;
 }
 
-
 /* 데이터활용관리 */
-.gall-list li{
+.gall-list li {
     box-shadow: 0 0 5px #aaa;
     padding: 20px;
     max-width: 24%;
 }
 
-.gall-list li a{
+.gall-list li a {
     display: block;
     width: 100%;
 }
 
-.gall-list li a .gall-img{
+.gall-list li a .gall-img {
     width: 100%;
     height: 200px;
     text-align: center;

     margin-bottom: 10px;
 }
 
-.gall-list li a .gall-img img{
+.gall-list li a .gall-img img {
     width: 100%;
     height: 100%;
 }
 
-.gall-list li a .gall-title{
+.gall-list li a .gall-title {
     font-size: 1.6rem;
     font-weight: 800;
     margin-bottom: 10px;
 }
 
-.gall-info{
+.gall-info {
     width: 100%;
 }
 
-.gall-list li a .gall-detail{
+.gall-list li a .gall-detail {
     font-size: 1.3rem;
     width: 100%;
     overflow: hidden;

     word-break: break-all;
 }
 
-.custom-info{
+.custom-info {
     position: absolute;
     width: calc(100% - 15px);
     z-index: 1000;

 .custom-info details summary,
 .layout-zone details summary,
 .component-zone details summary,
-.chart-zone details summary{
+.chart-zone details summary {
     font-size: 1.6rem;
     padding: 15px;
     border: 1px solid #213f99;

 
 .layout-zone details summary,
 .component-zone details summary,
-.chart-zone details summary{
+.chart-zone details summary {
     border: 1px solid var(--color-orange);
     background-color: rgb(255, 249, 239);
     color: var(--color-orange);

 .custom-info details[open] summary,
 .layout-zone details[open] summary,
 .component-zone details[open] summary,
-.chart-zone details[open] summary{
+.chart-zone details[open] summary {
     border-radius: 5px 5px 0 0;
 }
 
-
-.custom-info details summary::marker{
+.custom-info details summary::marker {
     position: absolute;
     right: 0;
     top: 50%;
     transform: translateY(-50%);
 }
 
-.custom-info .info-zone{
+.custom-info .info-zone {
     border: 1px solid #eee;
     border-radius: 0 0 5px 5px;
     padding: 15px;
     background-color: #fff;
 }
 
-.data-list{
+.data-list {
     min-height: 150px;
     max-height: 150px;
     overflow: scroll;

     padding: 10px;
 }
 
-.custom-tab{
+.custom-tab {
     margin-top: 80px;
     height: calc(100% - 80px);
 }

     height: 100%;
 }
 
-.preview-zone{
+.preview-zone {
     border: 1px solid #eee;
 }
 
-.tab-content{
+.tab-content {
     height: calc(100% - 41px);
 }
 
-.tab-content > .content-box{
-   padding: 10px;
+.tab-content > .content-box {
+    padding: 10px;
 }
 
-.content-list{
+.content-list {
     width: 100%;
     height: 99.9%;
     padding: 10px;

     overflow-y: auto;
 }
 
-.column-item{
+.column-item {
     width: 100%;
     font-size: 1.3rem;
     text-align: center;

     margin-bottom: 10px;
 }
 
-.column-item:last-child{
+.column-item:last-child {
     margin-bottom: 0;
 }
 
 .layout-content,
-.component-content{
+.component-content {
     padding: 10px;
 }
-.layout-content>li,
-.component-content>li{
+.layout-content > li,
+.component-content > li {
     margin-bottom: 10px;
 }
 
-.layout-content>li:last-child,
-.component-content>li:last-child{
+.layout-content > li:last-child,
+.component-content > li:last-child {
     margin-bottom: 0px;
 }
 
 .vertical-icon,
-.horizental-icon{
+.horizental-icon {
     width: 70px;
     height: 70px;
     background-color: #f8f8f8;

 }
 
 .vertical-icon > span,
-.horizental-icon > span{
+.horizental-icon > span {
     display: block;
     width: 25px;
     height: 55px;
     border: 3px solid #ddd;
 }
 
-.horizental-icon > span{
+.horizental-icon > span {
     width: 55px;
     height: 25px;
 }
 
-.icon-content{
+.icon-content {
     margin-left: 10px;
     font-size: 1.4rem;
 }
 
-.component-wrap{
+.component-wrap {
     width: 100%;
     padding: 10px;
     border-radius: 5px;
     background-color: #f8f8f8;
 }
 
-input[type="text"].com-dbZone{
+input[type='text'].com-dbZone {
     margin-left: 0;
 }
 
-.db-input{
+.db-input {
     border: 1px dashed var(--color-red);
 }
 

 .vtwo-component,
 .htwo-component,
 .vthree-component,
-.hthree-component{
+.hthree-component {
     width: 70px;
     height: 50px;
     padding: 5px;

     border-radius: 5px;
 }
 
-.one-component  span,
-.vtwo-component  span,
-.htwo-component  span,
-.one-component  span,
-.vthree-component  span,
-.hthree-component  span{
+.one-component span,
+.vtwo-component span,
+.htwo-component span,
+.one-component span,
+.vthree-component span,
+.hthree-component span {
     display: block;
     width: 100%;
     height: 100%;
     border: 3px solid #ddd;
 }
 
-.htwo-component  span,
+.htwo-component span,
 .vthree-component div:nth-child(2) span,
 .hthree-component div:nth-child(1),
-.hthree-component div:nth-child(2){
+.hthree-component div:nth-child(2) {
     height: 50%;
-}
+}

29d499a

a7b85c4

client/views/pages/dbManagement/ColumnManagement.vue

--- client/views/pages/dbManagement/ColumnManagement.vue

+++ client/views/pages/dbManagement/ColumnManagement.vue


                                 :maxRange="5"
                             />
                             <div class="justify-start">
-                                <button class="blue-btn small-btn">테이블 내 컬럼 분석 실행</button>
+                                <button class="blue-btn variable-btn">테이블 내 컬럼 분석 실행</button>
                             </div>
                         </div>
                     </div>

             </div>
             <div class="right-content flex60">
                 <div class="flex-column">
-                    <div class="content-titleZone">
-                        <p class="box-title">테이블 컬럼 목록</p>
+                    <div>
+                        <div class="content-titleZone">
+                            <p class="box-title">테이블 컬럼 목록</p>
+                        </div>
+                        <div class="table-zone">
+                            <table class="list-table">
+                                <colgroup>
+                                    <col style="width: 5%" />
+                                    <col style="width: " />
+                                    <col style="width: " />
+                                    <col style="width: " />
+                                </colgroup>
+                                <thead>
+                                    <tr>
+                                        <th>No.</th>
+                                        <th>컬럼명</th>
+                                        <th>한글명</th>
+                                        <th>DataType</th>
+                                        <th>Null여부</th>
+                                    </tr>
+                                </thead>
+                                <tbody>
+                                    <tr v-for="(item, index) in tableColumnList" :key="index">
+                                        <td>
+                                            {{
+                                                index + 1 + (tableColumnData.currentPage - 1) * tableColumnData.perPage
+                                            }}
+                                        </td>
+                                        <td>{{ item.column_nm }}</td>
+                                        <td>{{ item.column_nm_k }}</td>
+                                        <td>{{ item.column_type }}</td>
+                                        <td>{{ item.column_isnull }}</td>
+                                    </tr>
+                                </tbody>
+                            </table>
+                            <PaginationButton
+                                v-model:currentPage="tableColumnData.currentPage"
+                                :perPage="tableColumnData.perPage"
+                                :totalCount="tableColumnListCount"
+                                :maxRange="5"
+                            />
+                        </div>
+                        <div class="justify-center flex5">
+                            <button class="blue-btn variable-btn">선택한 컬럼 상세 조회</button>
+                        </div>
                     </div>
-                    <div class="table-zone">
-                        <table class="list-table">
-                            <colgroup>
-                                <col style="width: 5%" />
-                                <col style="width: " />
-                                <col style="width: " />
-                                <col style="width: " />
-                            </colgroup>
-                            <thead>
-                                <tr>
-                                    <th>No.</th>
-                                    <th>컬럼명</th>
-                                    <th>한글명</th>
-                                    <th>DataType</th>
-                                    <th>Null여부</th>
-                                </tr>
-                            </thead>
-                            <tbody>
-                                <tr v-for="(item, index) in tableColumnList" :key="index">
-                                    <td>
-                                        {{ index + 1 + (tableColumnData.currentPage - 1) * tableColumnData.perPage }}
-                                    </td>
-                                    <td>{{ item.column_nm }}</td>
-                                    <td>{{ item.column_nm_k }}</td>
-                                    <td>{{ item.column_type }}</td>
-                                    <td>{{ item.column_isnull }}</td>
-                                </tr>
-                            </tbody>
-                        </table>
-                        <PaginationButton
-                            v-model:currentPage="tableColumnData.currentPage"
-                            :perPage="tableColumnData.perPage"
-                            :totalCount="tableColumnListCount"
-                            :maxRange="5"
-                        />
-                    </div>
-                    <div class="justify-center flex5">
-                        <button class="blue-btn small-btn">선택한 컬럼 상세 조회</button>
-                    </div>
-
-                    <div class="content-titleZone flex5">
-                        <p class="box-title">테이블 내 컬럼 데이터 분석 정보</p>
-                    </div>
-                    <div class="table-zone">
-                        <table class="list-table">
-                            <colgroup>
-                                <col style="width: 5%" />
-                                <col style="width: " />
-                                <col style="width: " />
-                                <col style="width: " />
-                            </colgroup>
-                            <thead>
-                                <tr>
-                                    <th>No.</th>
-                                    <th>데이터</th>
-                                    <th>COUNT</th>
-                                    <th>분포</th>
-                                </tr>
-                            </thead>
-                            <tbody>
-                                <tr>
-                                    <td>1</td>
-                                    <td>test123</td>
-                                    <td>홍길동</td>
-                                    <td>1999.01.01</td>
-                                </tr>
-                            </tbody>
-                        </table>
+                    <div style="margin-top: 30px">
+                        <div class="content-titleZone">
+                            <p class="box-title">테이블 내 컬럼 데이터 분석 정보</p>
+                        </div>
+                        <div class="table-zone">
+                            <table class="list-table">
+                                <colgroup>
+                                    <col style="width: 5%" />
+                                    <col style="width: " />
+                                    <col style="width: " />
+                                    <col style="width: " />
+                                </colgroup>
+                                <thead>
+                                    <tr>
+                                        <th>No.</th>
+                                        <th>데이터</th>
+                                        <th>COUNT</th>
+                                        <th>분포</th>
+                                    </tr>
+                                </thead>
+                                <tbody>
+                                    <tr>
+                                        <td>1</td>
+                                        <td>test123</td>
+                                        <td>홍길동</td>
+                                        <td>1999.01.01</td>
+                                    </tr>
+                                </tbody>
+                            </table>
+                        </div>
                     </div>
                 </div>
             </div>

29d499a

a7b85c4

client/views/pages/dbManagement/DbSchema.vue

--- client/views/pages/dbManagement/DbSchema.vue

+++ client/views/pages/dbManagement/DbSchema.vue


                     </div>
                 </div>
                 <div class="table-zone">
-                    <div class="flex justify-start">
+                    <div class="flex justify-start" style="margin: 10px 0px">
                         <button class="blue-btn small-btn" @click="deleteDbData()">선택항목 삭제</button>
                         <button class="blue-btn small-btn" @click="updateDbData()">선택항목 수정</button>
                         <button class="blue-btn small-btn" @click="connectDb()">접속테스트</button>

                                 <th>설명</th>
                             </tr>
                         </thead>
-                        <tbody class="dbData" >
+                        <tbody class="dbData">
                             <tr
                                 v-for="(db, index) in dbList"
                                 :key="index"

                                     </select>
                                 </td>
                                 <td>{{ db.dbms_version }}</td>
-                                <td><input type="text" v-model="db.dbms_url_port" style="width: 300px;"/></td>
+                                <td><input type="text" v-model="db.dbms_url_port" style="width: 300px" /></td>
                                 <td><input type="text" v-model="db.dbms_drive_nm" /></td>
                                 <td><input type="text" v-model="db.dbms_connect_id" /></td>
                                 <td><input type="password" v-model="db.dbms_connect_pw" /></td>
                                 <td><input type="text" v-model="db.dbms_ag_nm" /></td>
                                 <td><input type="text" v-model="db.dbms_system_nm" /></td>
-                                <td><input type="text" v-model="db.dbms_explain" style="width: 300px;"/></td>
+                                <td><input type="text" v-model="db.dbms_explain" style="width: 300px" /></td>
                             </tr>
                             <tr>
                                 <td colspan="3" style="text-align: left">

                                     </select>
                                 </td>
                                 <td></td>
-                                <td><input type="text" v-model="dbInput.dbms_url_port" style="width: 300px;"/></td>
+                                <td><input type="text" v-model="dbInput.dbms_url_port" style="width: 300px" /></td>
                                 <td><input type="text" v-model="dbInput.dbms_drive_nm" /></td>
                                 <td><input type="text" v-model="dbInput.dbms_connect_id" /></td>
                                 <td><input type="password" v-model="dbInput.dbms_connect_pw" /></td>
                                 <td><input type="text" v-model="dbInput.dbms_ag_nm" /></td>
                                 <td><input type="text" v-model="dbInput.dbms_system_nm" /></td>
-                                <td><input type="text" v-model="dbInput.dbms_explain" style="width: 300px;"/></td>
+                                <td><input type="text" v-model="dbInput.dbms_explain" style="width: 300px" /></td>
                             </tr>
                         </tbody>
                     </table>

                                     type="text"
                                     :placeholder="item.schema_explain"
                                     :disabled="!selectedSchemaIds.includes(item.schema_id)"
-                                    v-model="item.updatedSchemaExplain" style="width: 600px;"
+                                    v-model="item.updatedSchemaExplain"
+                                    style="width: 600px"
                                 />
                             </td>
                         </tr>
                     </tbody>
                 </table>
                 <div class="flex justify-end">
-                    <button class="red-btn small-btn" @click="setSchema()">수집제외 여부, 설명 저장</button>
+                    <button class="red-btn variable-btn" @click="setSchema()">수집제외 여부, 설명 저장</button>
                 </div>
             </div>
             <PaginationButton

 
 <script>
 import PageNavigation from '../../component/PageNavigation.vue';
-import PaginationButton from '../../component/paginationbutton.vue';
-import SvgIcon from '@jamescoyle/vue-icon';
+import PaginationButton from '../../component/PaginationButton.vue';
+import svgIcon from '@jamescoyle/vue-icon';
 import { mdiMagnify } from '@mdi/js';
 import axios from 'axios';
 

     components: {
         PageNavigation: PageNavigation,
         PaginationButton: PaginationButton,
-        SvgIcon: SvgIcon,
+        svgIcon: svgIcon,
     },
     mounted() {
         console.log('main mounted');

29d499a

a7b85c4

client/views/pages/dbManagement/TableManage.vue

--- client/views/pages/dbManagement/TableManage.vue

+++ client/views/pages/dbManagement/TableManage.vue


                             </option>
                         </select>
 
-                        <button class="table-searchBtn" @click="selectTableList">검색</button>
+                        <button class="blue-btn small-btn" @click="selectTableList">검색</button>
                     </div>
                 </div>
                 <!-- 제외 사유 -->
                 <div style="margin-top: 30px">
                     <p class="box-title">> 제외 사유 일괄 지정</p>
-                    <div style="display: flex; align-items: center; margin-top: 15px">
+                    <div class="exceptExplain">
                         <span class="option-title">제외 사유</span>
                         <div class="search-square">
                             <input type="text" class="square-input" placeholder="제외 사유" v-model="update_explain" />

                                 <svg-icon type="mdi" :path="searchPath" class="square-icon"></svg-icon>
                             </button>
                         </div>
-                        <button class="red-border-btn small-btn" @click="handleExplainAdd">일괄 추가</button>
-                        <button class="red-border-btn small-btn" @click="handleExplainDelete">일괄 삭제</button>
+                        <button class="red-btn small-btn" @click="handleExplainAdd">일괄 추가</button>
+                        <button class="red-btn small-btn" @click="handleExplainDelete">일괄 삭제</button>
                     </div>
                 </div>
                 <!-- 테이블 조회 -->
                 <div class="table-zone">
-                    <div class="flex justify-end">
-                        <button class="red-border-btn small-btn" @click="handleTableUpdate">
-                            제외 여부, 사유 저장
-                        </button>
+                    <div class="flex justify-end" style="margin-top: -40px">
+                        <button class="red-btn variable-btn" @click="handleTableUpdate">제외 여부, 사유 저장</button>
                     </div>
                     <table class="list-table" style="text-align: center">
                         <colgroup>

 <script>
 import axios from 'axios';
 import PageNavigation from '../../component/PageNavigation.vue';
-import PaginationButton from '../../component/paginationbutton.vue';
+import PaginationButton from '../../component/PaginationButton.vue';
 import SvgIcon from '@jamescoyle/vue-icon';
 
 export default {

     font-size: 15px;
     margin: 150px 0px;
 }
+.exceptExplain {
+    display: flex;
+    align-items: center;
+    margin-top: 15px;
+}
 </style>

Add a comment

Open 0
Closed 0

List

...	...	@@ -31,7 +31,7 @@
31	31	</div>
32	32	</div>
33	33	<div class="table-zone">
34		- <div class="flex justify-start">
	34	+ <div class="flex justify-start" style="margin: 10px 0px">
35	35	<button class="blue-btn small-btn" @click="deleteDbData()">선택항목 삭제</button>
36	36	<button class="blue-btn small-btn" @click="updateDbData()">선택항목 수정</button>
37	37	<button class="blue-btn small-btn" @click="connectDb()">접속테스트</button>
...	...	@@ -70,7 +70,7 @@
70	70	<th>설명</th>
71	71	</tr>
72	72	</thead>
73		- <tbody class="dbData" >
	73	+ <tbody class="dbData">
74	74	<tr
75	75	v-for="(db, index) in dbList"
76	76	:key="index"
...	...	@@ -90,13 +90,13 @@
90	90	</select>
91	91	</td>
92	92	<td>{{ db.dbms_version }}</td>
93		- <td><input type="text" v-model="db.dbms_url_port" style="width: 300px;"/></td>
	93	+ <td><input type="text" v-model="db.dbms_url_port" style="width: 300px" /></td>
94	94	<td><input type="text" v-model="db.dbms_drive_nm" /></td>
95	95	<td><input type="text" v-model="db.dbms_connect_id" /></td>
96	96	<td><input type="password" v-model="db.dbms_connect_pw" /></td>
97	97	<td><input type="text" v-model="db.dbms_ag_nm" /></td>
98	98	<td><input type="text" v-model="db.dbms_system_nm" /></td>
99		- <td><input type="text" v-model="db.dbms_explain" style="width: 300px;"/></td>
	99	+ <td><input type="text" v-model="db.dbms_explain" style="width: 300px" /></td>
100	100	</tr>
101	101	<tr>
102	102	<td colspan="3" style="text-align: left">
...	...	@@ -110,13 +110,13 @@
110	110	</select>
111	111	</td>
112	112	<td></td>
113		- <td><input type="text" v-model="dbInput.dbms_url_port" style="width: 300px;"/></td>
	113	+ <td><input type="text" v-model="dbInput.dbms_url_port" style="width: 300px" /></td>
114	114	<td><input type="text" v-model="dbInput.dbms_drive_nm" /></td>
115	115	<td><input type="text" v-model="dbInput.dbms_connect_id" /></td>
116	116	<td><input type="password" v-model="dbInput.dbms_connect_pw" /></td>
117	117	<td><input type="text" v-model="dbInput.dbms_ag_nm" /></td>
118	118	<td><input type="text" v-model="dbInput.dbms_system_nm" /></td>
119		- <td><input type="text" v-model="dbInput.dbms_explain" style="width: 300px;"/></td>
	119	+ <td><input type="text" v-model="dbInput.dbms_explain" style="width: 300px" /></td>
120	120	</tr>
121	121	</tbody>
122	122	</table>
...	...	@@ -162,14 +162,15 @@
162	162	type="text"
163	163	:placeholder="item.schema_explain"
164	164	:disabled="!selectedSchemaIds.includes(item.schema_id)"
165		- v-model="item.updatedSchemaExplain" style="width: 600px;"
	165	+ v-model="item.updatedSchemaExplain"
	166	+ style="width: 600px"
166	167	/>
167	168	</td>
168	169	</tr>
169	170	</tbody>
170	171	</table>
171	172	<div class="flex justify-end">
172		- <button class="red-btn small-btn" @click="setSchema()">수집제외 여부, 설명 저장</button>
	173	+ <button class="red-btn variable-btn" @click="setSchema()">수집제외 여부, 설명 저장</button>
173	174	</div>
174	175	</div>
175	176	<PaginationButton
...	...	@@ -185,8 +186,8 @@
185	186
186	187	<script>
187	188	import PageNavigation from '../../component/PageNavigation.vue';
188		-import PaginationButton from '../../component/paginationbutton.vue';
189		-import SvgIcon from '@jamescoyle/vue-icon';
	189	+import PaginationButton from '../../component/PaginationButton.vue';
	190	+import svgIcon from '@jamescoyle/vue-icon';
190	191	import { mdiMagnify } from '@mdi/js';
191	192	import axios from 'axios';
192	193
...	...	@@ -598,7 +599,7 @@
598	599	components: {
599	600	PageNavigation: PageNavigation,
600	601	PaginationButton: PaginationButton,
601		- SvgIcon: SvgIcon,
	602	+ svgIcon: svgIcon,
602	603	},
603	604	mounted() {
604	605	console.log('main mounted');

...	...	@@ -25,7 +25,6 @@
25	25	height: 100%;
26	26	}
27	27
28		-
29	28	.justify-start {
30	29	justify-content: flex-start;
31	30	}
...	...	@@ -58,87 +57,82 @@
58	57	align-items: flex-end;
59	58	}
60	59
61		-
62		-
63	60	/* 정렬 배율 */
64	61
65	62	.flex5 {
66		- flex: 0 0 4.5%
	63	+ flex: 0 0 4.5%;
67	64	}
68	65
69	66	.flex10 {
70		- flex: 0 0 9.5%
	67	+ flex: 0 0 9.5%;
71	68	}
72	69
73	70	.flex15 {
74		- flex: 0 0 14.5%
	71	+ flex: 0 0 14.5%;
75	72	}
76	73
77	74	.flex20 {
78		- flex: 0 0 19.5%
	75	+ flex: 0 0 19.5%;
79	76	}
80	77
81	78	.flex25 {
82		- flex: 0 0 24.5%
	79	+ flex: 0 0 24.5%;
83	80	}
84	81
85	82	.flex30 {
86		- flex: 0 0 29.5%
	83	+ flex: 0 0 29.5%;
87	84	}
88	85
89	86	.flex35 {
90		- flex: 0 0 34.5%
	87	+ flex: 0 0 34.5%;
91	88	}
92	89
93	90	.flex40 {
94		- flex: 0 0 39.5%
	91	+ flex: 0 0 39.5%;
95	92	}
96	93
97	94	.flex45 {
98		- flex: 0 0 44.5%
	95	+ flex: 0 0 44.5%;
99	96	}
100	97
101	98	.flex50 {
102		- flex: 0 0 49.5%
	99	+ flex: 0 0 49.5%;
103	100	}
104	101
105	102	.flex55 {
106		- flex: 0 0 54.5%
	103	+ flex: 0 0 54.5%;
107	104	}
108	105
109		-
110	106	.flex60 {
111		- flex: 0 0 59.5%
	107	+ flex: 0 0 59.5%;
112	108	}
113	109
114	110	.flex65 {
115		- flex: 0 0 64.5%
	111	+ flex: 0 0 64.5%;
116	112	}
117	113
118		-
119	114	.flex70 {
120		- flex: 0 0 69.5%
	115	+ flex: 0 0 69.5%;
121	116	}
122	117
123	118	.flex75 {
124		- flex: 0 0 74.5%
	119	+ flex: 0 0 74.5%;
125	120	}
126	121
127	122	.flex80 {
128		- flex: 0 0 79.5%
	123	+ flex: 0 0 79.5%;
129	124	}
130	125
131	126	.flex85 {
132		- flex: 0 0 84.5%
	127	+ flex: 0 0 84.5%;
133	128	}
134	129
135		-
136	130	.flex90 {
137		- flex: 0 0 89.5%
	131	+ flex: 0 0 89.5%;
138	132	}
139	133
140	134	.flex95 {
141		- flex: 0 0 94.5%
	135	+ flex: 0 0 94.5%;
142	136	}
143	137
144	138	/* 너비 */
...	...	@@ -183,161 +177,164 @@
183	177	}
184	178
185	179	/* 마진 */
186		-.ml0{
	180	+.ml0 {
187	181	margin-left: 0px;
188	182	}
189		-.ml5{
	183	+.ml5 {
190	184	margin-left: 5px;
191	185	}
192		-.ml10{
	186	+.ml10 {
193	187	margin-left: 10px;
194	188	}
195		-.ml20{
	189	+.ml20 {
196	190	margin-left: 20px;
197	191	}
198		-.ml30{
	192	+.ml30 {
199	193	margin-left: 30px;
200	194	}
201		-.ml40{
	195	+.ml40 {
202	196	margin-left: 40px;
203	197	}
204		-.ml50{
	198	+.ml50 {
205	199	margin-left: 50px;
206	200	}
207		-.ml60{
	201	+.ml60 {
208	202	margin-left: 60px;
209	203	}
210		-.ml70{
	204	+.ml70 {
211	205	margin-left: 70px;
212	206	}
213		-.ml80{
	207	+.ml80 {
214	208	margin-left: 80px;
215	209	}
216		-.ml90{
	210	+.ml90 {
217	211	margin-left: 90px;
218	212	}
219		-.ml100{
	213	+.ml100 {
220	214	margin-left: 100px;
221	215	}
222	216
223		-.mr0{
	217	+.mr0 {
224	218	margin-right: 0px;
225	219	}
226		-.mr5{
	220	+.mr5 {
227	221	margin-right: 5px;
228	222	}
229		-.mr10{
	223	+.mr10 {
230	224	margin-right: 10px;
231	225	}
232		-.mr20{
	226	+.mr20 {
233	227	margin-right: 20px;
234	228	}
235		-.mr30{
	229	+.mr30 {
236	230	margin-right: 30px;
237	231	}
238		-.mr40{
	232	+.mr40 {
239	233	margin-right: 40px;
240	234	}
241		-.mr50{
	235	+.mr50 {
242	236	margin-right: 50px;
243	237	}
244		-.mr60{
	238	+.mr60 {
245	239	margin-right: 60px;
246	240	}
247		-.mr70{
	241	+.mr70 {
248	242	margin-right: 70px;
249	243	}
250		-.mr80{
	244	+.mr80 {
251	245	margin-right: 80px;
252	246	}
253		-.mr90{
	247	+.mr90 {
254	248	margin-right: 90px;
255	249	}
256		-.mr100{
	250	+.mr100 {
257	251	margin-right: 100px;
258	252	}
259	253
260		-.mt0{
	254	+.mt0 {
261	255	margin-top: 0px;
262	256	}
263		-.mt5{
	257	+.mt5 {
264	258	margin-top: 5px;
265	259	}
266		-.mt10{
	260	+.mt10 {
267	261	margin-top: 10px;
268	262	}
269		-.mt20{
	263	+.mt20 {
270	264	margin-top: 20px;
271	265	}
272		-.mt30{
	266	+.mt30 {
273	267	margin-top: 30px;
274	268	}
275		-.mt40{
	269	+.mt40 {
276	270	margin-top: 40px;
277	271	}
278		-.mt50{
	272	+.mt50 {
279	273	margin-top: 50px;
280	274	}
281		-.mt60{
	275	+.mt60 {
282	276	margin-top: 60px;
283	277	}
284		-.mt70{
	278	+.mt70 {
285	279	margin-top: 70px;
286	280	}
287		-.mt80{
	281	+.mt80 {
288	282	margin-top: 80px;
289	283	}
290		-.mt90{
	284	+.mt90 {
291	285	margin-top: 90px;
292	286	}
293		-.mt100{
	287	+.mt100 {
294	288	margin-top: 100px;
295	289	}
296	290
297		-.mb0{
	291	+.mb0 {
298	292	margin-bottom: 0px;
299	293	}
300		-.mb5{
	294	+.mb5 {
301	295	margin-bottom: 5px;
302	296	}
303		-.mb10{
	297	+.mb10 {
304	298	margin-bottom: 10px;
305	299	}
306		-.mb20{
	300	+.mb20 {
307	301	margin-bottom: 20px;
308	302	}
309		-.mb30{
	303	+.mb30 {
310	304	margin-bottom: 30px;
311	305	}
312		-.mb40{
	306	+.mb40 {
313	307	margin-bottom: 40px;
314	308	}
315		-.mb50{
	309	+.mb50 {
316	310	margin-bottom: 50px;
317	311	}
318		-.mb60{
	312	+.mb60 {
319	313	margin-bottom: 60px;
320	314	}
321		-.mb70{
	315	+.mb70 {
322	316	margin-bottom: 70px;
323	317	}
324		-.mb80{
	318	+.mb80 {
325	319	margin-bottom: 80px;
326	320	}
327		-.mb90{
	321	+.mb90 {
328	322	margin-bottom: 90px;
329	323	}
330		-.mb100{
	324	+.mb100 {
331	325	margin-bottom: 210px;
332	326	}
333		-
334		-
335	327
336	328	/* btn */
337	329	.small-btn {
338	330	width: 120px;
339	331	padding: 5px 10px;
340	332	border-radius: 5px;
	333	+}
	334	+
	335	+.variable-btn {
	336	+ border-radius: 5px;
	337	+ padding: 5px 30px;
341	338	}
342	339
343	340	.large-btn {
...	...	@@ -358,7 +355,7 @@
358	355	}
359	356
360	357	.logout-btn::before {
361		- content: "";
	358	+ content: '';
362	359	width: 1px;
363	360	height: 10px;
364	361	position: absolute;
...	...	@@ -374,6 +371,7 @@
374	371
375	372	.blue-btn,
376	373	.blue-border-btn:hover {
	374	+ margin: 10px 5px;
377	375	background-color: var(--color-blue);
378	376	color: var(--color-white);
379	377	transition: all 0.3s ease-in-out;
...	...	@@ -381,6 +379,7 @@
381	379
382	380	.red-btn,
383	381	.red-border-btn:hover {
	382	+ margin: 10px 5px;
384	383	background-color: var(--color-red);
385	384	color: var(--color-white);
386	385	transition: all 0.3s ease-in-out;
...	...	@@ -414,7 +413,6 @@
414	413	transition: all 0.3s ease-in-out;
415	414	}
416	415
417		-
418	416	.blue-border-btn {
419	417	border: 1px solid var(--color-blue);
420	418	color: var(--color-blue);
...	...	@@ -435,7 +433,6 @@
435	433
436	434	.orange-border-btn {
437	435	border: 1px solid var(--color-orange);
438		- ;
439	436	color: var(--color-orange);
440	437	background-color: #fff;
441	438	}
...	...	@@ -458,9 +455,6 @@
458	455	height: 15px;
459	456	margin-left: 10px;
460	457	}
461		-
462		-
463		-
464	458
465	459	/* text 정렬 */
466	460	.text-lf {
...	...	@@ -491,4 +485,3 @@
491	485	.red {
492	486	color: var(--color-red);
493	487	}
494		-

...	...	@@ -46,7 +46,7 @@
46	46	position: relative;
47	47	}
48	48
49		-.row{
	49	+.row {
50	50	padding: 0;
51	51	}
52	52
...	...	@@ -55,7 +55,7 @@
55	55	border: 1px solid #dbe3fb;
56	56	}
57	57
58		-.border{
	58	+.border {
59	59	border: 1px solid #eee;
60	60	border-radius: 5px;
61	61	}
...	...	@@ -72,7 +72,7 @@
72	72	}
73	73
74	74	.content-titleZone {
75		- padding-bottom: 10px;
	75	+ /* padding-bottom: 10px; */
76	76	border-bottom: 1px solid #aaa;
77	77	margin-bottom: 15px;
78	78	}
...	...	@@ -84,8 +84,8 @@
84	84	}
85	85
86	86	/* 테이블 공통 */
87		-.table-zone{
88		- padding: 15px 0;
	87	+.table-zone {
	88	+ padding: 0;
89	89	}
90	90	.list-table,
91	91	.form-table {
...	...	@@ -93,12 +93,12 @@
93	93	}
94	94	.list-table th,
95	95	.list-table td,
96		-.form-table th{
	96	+.form-table th {
97	97	text-align: center;
98	98	}
99	99	.list-table th,
100	100	.list-table td,
101		-.form-table th,
	101	+.form-table th,
102	102	.form-table td {
103	103	border-top: 1px solid #aaa;
104	104	}
...	...	@@ -112,7 +112,7 @@
112	112	background-color: #f29600;
113	113	color: #fff;
114	114	}
115		-.list-table tbody tr{
	115	+.list-table tbody tr {
116	116	cursor: pointer;
117	117	}
118	118	.list-table tbody tr:nth-child(even) {
...	...	@@ -134,15 +134,13 @@
134	134	text-align: center;
135	135	}
136	136
137		-
138	137	.option-table th {
139	138	color: #213f99;
140	139	}
141	140
142		-.list-info{
	141	+.list-info {
143	142	margin-bottom: 10px;
144	143	}
145		-
146	144
147	145	/* 서치바 공통 */
148	146	/* .table-zone */
...	...	@@ -166,7 +164,7 @@
166	164	padding: 6px 10px;
167	165	border-radius: 5px;
168	166	width: 300px;
169		- transition: all ease-in-out .5s;
	167	+ transition: all ease-in-out 0.5s;
170	168	}
171	169
172	170	.square-input:hover,
...	...	@@ -206,12 +204,12 @@
206	204	}
207	205
208	206	.full-input,
209		-.full-select{
	207	+.full-select {
210	208	width: 100%;
211	209	}
212	210
213	211	.half-input,
214		-.half-select{
	212	+.half-select {
215	213	width: 50%;
216	214	}
217	215
...	...	@@ -249,7 +247,6 @@
249	247	font-weight: 900;
250	248	color: #213f99;
251	249	}
252		-
253	250
254	251	/* 모달 */
255	252	.modal-wrapper {
...	...	@@ -296,7 +293,7 @@
296	293	overflow-y: auto;
297	294	}
298	295
299		-.large-modal{
	296	+.large-modal {
300	297	width: 90%;
301	298	}
302	299	.small-modal {
...	...	@@ -316,7 +313,6 @@
316	313	font-size: 1.6rem;
317	314	line-height: 180%;
318	315	}
319		-
320	316
321	317	.modal-content-monthly::-webkit-scrollbar {
322	318	width: 10px;
...	...	@@ -346,7 +342,6 @@
346	342	margin-left: 0;
347	343	}
348	344
349		-
350	345	/* 탭 */
351	346	.tab-nav {
352	347	border-top: 1px solid #eee;
...	...	@@ -371,7 +366,6 @@
371	366	border-right: 0;
372	367	}
373	368
374		-
375	369	/* 라벨 css(상세 조회랑 다름) */
376	370	.chekck-type {
377	371	display: none;
...	...	@@ -384,54 +378,51 @@
384	378	color: #213f99;
385	379	}
386	380
387		-.chekck-type:checked+label {
	381	+.chekck-type:checked + label {
388	382	background-color: #213f99;
389	383	color: #fff;
390	384	}
391	385
392		-
393		-
394	386	/* page 추가 */
395	387	/* 작업관리 페이지*/
396		-.node-zone{
	388	+.node-zone {
397	389	height: calc(100% - 61px);
398	390	}
399	391
400		-.text-over{
	392	+.text-over {
401	393	white-space: nowrap;
402	394	overflow: hidden;
403		- text-overflow: ellipsis;
	395	+ text-overflow: ellipsis;
404	396	}
405	397
406		-.state span{
	398	+.state span {
407	399	display: inline-block;
408	400	font-size: 1.3rem;
409	401	margin-left: 5px;
410	402	}
411	403
412		-.vue-flow__panel button{
413		- margin-left: 0;
	404	+.vue-flow__panel button {
	405	+ margin-left: 0;
414	406	}
415	407
416	408	/* 파일관리 페이지*/
417		-.file-zone{
	409	+.file-zone {
418	410	height: 100%;
419	411	}
420	412
421		-
422	413	/* 데이터활용관리 */
423		-.gall-list li{
	414	+.gall-list li {
424	415	box-shadow: 0 0 5px #aaa;
425	416	padding: 20px;
426	417	max-width: 24%;
427	418	}
428	419
429		-.gall-list li a{
	420	+.gall-list li a {
430	421	display: block;
431	422	width: 100%;
432	423	}
433	424
434		-.gall-list li a .gall-img{
	425	+.gall-list li a .gall-img {
435	426	width: 100%;
436	427	height: 200px;
437	428	text-align: center;
...	...	@@ -439,22 +430,22 @@
439	430	margin-bottom: 10px;
440	431	}
441	432
442		-.gall-list li a .gall-img img{
	433	+.gall-list li a .gall-img img {
443	434	width: 100%;
444	435	height: 100%;
445	436	}
446	437
447		-.gall-list li a .gall-title{
	438	+.gall-list li a .gall-title {
448	439	font-size: 1.6rem;
449	440	font-weight: 800;
450	441	margin-bottom: 10px;
451	442	}
452	443
453		-.gall-info{
	444	+.gall-info {
454	445	width: 100%;
455	446	}
456	447
457		-.gall-list li a .gall-detail{
	448	+.gall-list li a .gall-detail {
458	449	font-size: 1.3rem;
459	450	width: 100%;
460	451	overflow: hidden;
...	...	@@ -463,7 +454,7 @@
463	454	word-break: break-all;
464	455	}
465	456
466		-.custom-info{
	457	+.custom-info {
467	458	position: absolute;
468	459	width: calc(100% - 15px);
469	460	z-index: 1000;
...	...	@@ -472,7 +463,7 @@
472	463	.custom-info details summary,
473	464	.layout-zone details summary,
474	465	.component-zone details summary,
475		-.chart-zone details summary{
	466	+.chart-zone details summary {
476	467	font-size: 1.6rem;
477	468	padding: 15px;
478	469	border: 1px solid #213f99;
...	...	@@ -484,7 +475,7 @@
484	475
485	476	.layout-zone details summary,
486	477	.component-zone details summary,
487		-.chart-zone details summary{
	478	+.chart-zone details summary {
488	479	border: 1px solid var(--color-orange);
489	480	background-color: rgb(255, 249, 239);
490	481	color: var(--color-orange);
...	...	@@ -493,26 +484,25 @@
493	484	.custom-info details[open] summary,
494	485	.layout-zone details[open] summary,
495	486	.component-zone details[open] summary,
496		-.chart-zone details[open] summary{
	487	+.chart-zone details[open] summary {
497	488	border-radius: 5px 5px 0 0;
498	489	}
499	490
500		-
501		-.custom-info details summary::marker{
	491	+.custom-info details summary::marker {
502	492	position: absolute;
503	493	right: 0;
504	494	top: 50%;
505	495	transform: translateY(-50%);
506	496	}
507	497
508		-.custom-info .info-zone{
	498	+.custom-info .info-zone {
509	499	border: 1px solid #eee;
510	500	border-radius: 0 0 5px 5px;
511	501	padding: 15px;
512	502	background-color: #fff;
513	503	}
514	504
515		-.data-list{
	505	+.data-list {
516	506	min-height: 150px;
517	507	max-height: 150px;
518	508	overflow: scroll;
...	...	@@ -520,7 +510,7 @@
520	510	padding: 10px;
521	511	}
522	512
523		-.custom-tab{
	513	+.custom-tab {
524	514	margin-top: 80px;
525	515	height: calc(100% - 80px);
526	516	}
...	...	@@ -530,19 +520,19 @@
530	520	height: 100%;
531	521	}
532	522
533		-.preview-zone{
	523	+.preview-zone {
534	524	border: 1px solid #eee;
535	525	}
536	526
537		-.tab-content{
	527	+.tab-content {
538	528	height: calc(100% - 41px);
539	529	}
540	530
541		-.tab-content > .content-box{
542		- padding: 10px;
	531	+.tab-content > .content-box {
	532	+ padding: 10px;
543	533	}
544	534
545		-.content-list{
	535	+.content-list {
546	536	width: 100%;
547	537	height: 99.9%;
548	538	padding: 10px;
...	...	@@ -550,7 +540,7 @@
550	540	overflow-y: auto;
551	541	}
552	542
553		-.column-item{
	543	+.column-item {
554	544	width: 100%;
555	545	font-size: 1.3rem;
556	546	text-align: center;
...	...	@@ -562,26 +552,26 @@
562	552	margin-bottom: 10px;
563	553	}
564	554
565		-.column-item:last-child{
	555	+.column-item:last-child {
566	556	margin-bottom: 0;
567	557	}
568	558
569	559	.layout-content,
570		-.component-content{
	560	+.component-content {
571	561	padding: 10px;
572	562	}
573		-.layout-content>li,
574		-.component-content>li{
	563	+.layout-content > li,
	564	+.component-content > li {
575	565	margin-bottom: 10px;
576	566	}
577	567
578		-.layout-content>li:last-child,
579		-.component-content>li:last-child{
	568	+.layout-content > li:last-child,
	569	+.component-content > li:last-child {
580	570	margin-bottom: 0px;
581	571	}
582	572
583	573	.vertical-icon,
584		-.horizental-icon{
	574	+.horizental-icon {
585	575	width: 70px;
586	576	height: 70px;
587	577	background-color: #f8f8f8;
...	...	@@ -589,35 +579,35 @@
589	579	}
590	580
591	581	.vertical-icon > span,
592		-.horizental-icon > span{
	582	+.horizental-icon > span {
593	583	display: block;
594	584	width: 25px;
595	585	height: 55px;
596	586	border: 3px solid #ddd;
597	587	}
598	588
599		-.horizental-icon > span{
	589	+.horizental-icon > span {
600	590	width: 55px;
601	591	height: 25px;
602	592	}
603	593
604		-.icon-content{
	594	+.icon-content {
605	595	margin-left: 10px;
606	596	font-size: 1.4rem;
607	597	}
608	598
609		-.component-wrap{
	599	+.component-wrap {
610	600	width: 100%;
611	601	padding: 10px;
612	602	border-radius: 5px;
613	603	background-color: #f8f8f8;
614	604	}
615	605
616		-input[type="text"].com-dbZone{
	606	+input[type='text'].com-dbZone {
617	607	margin-left: 0;
618	608	}
619	609
620		-.db-input{
	610	+.db-input {
621	611	border: 1px dashed var(--color-red);
622	612	}
623	613
...	...	@@ -625,7 +615,7 @@
625	615	.vtwo-component,
626	616	.htwo-component,
627	617	.vthree-component,
628		-.hthree-component{
	618	+.hthree-component {
629	619	width: 70px;
630	620	height: 50px;
631	621	padding: 5px;
...	...	@@ -633,21 +623,21 @@
633	623	border-radius: 5px;
634	624	}
635	625
636		-.one-component span,
637		-.vtwo-component span,
638		-.htwo-component span,
639		-.one-component span,
640		-.vthree-component span,
641		-.hthree-component span{
	626	+.one-component span,
	627	+.vtwo-component span,
	628	+.htwo-component span,
	629	+.one-component span,
	630	+.vthree-component span,
	631	+.hthree-component span {
642	632	display: block;
643	633	width: 100%;
644	634	height: 100%;
645	635	border: 3px solid #ddd;
646	636	}
647	637
648		-.htwo-component span,
	638	+.htwo-component span,
649	639	.vthree-component div:nth-child(2) span,
650	640	.hthree-component div:nth-child(1),
651		-.hthree-component div:nth-child(2){
	641	+.hthree-component div:nth-child(2) {
652	642	height: 50%;
653		-} (파일 끝에 줄바꿈 문자 없음)
	643	+}

...	...	@@ -120,7 +120,7 @@
120	120	:maxRange="5"
121	121	/>
122	122	<div class="justify-start">
123		- <button class="blue-btn small-btn">테이블 내 컬럼 분석 실행</button>
	123	+ <button class="blue-btn variable-btn">테이블 내 컬럼 분석 실행</button>
124	124	</div>
125	125	</div>
126	126	</div>
...	...	@@ -128,77 +128,82 @@
128	128	</div>
129	129	<div class="right-content flex60">
130	130	<div class="flex-column">
131		- <div class="content-titleZone">
132		- <p class="box-title">테이블 컬럼 목록</p>
	131	+ <div>
	132	+ <div class="content-titleZone">
	133	+ <p class="box-title">테이블 컬럼 목록</p>
	134	+ </div>
	135	+ <div class="table-zone">
	136	+ <table class="list-table">
	137	+ <colgroup>
	138	+ <col style="width: 5%" />
	139	+ <col style="width: " />
	140	+ <col style="width: " />
	141	+ <col style="width: " />
	142	+ </colgroup>
	143	+ <thead>
	144	+ <tr>
	145	+ <th>No.</th>
	146	+ <th>컬럼명</th>
	147	+ <th>한글명</th>
	148	+ <th>DataType</th>
	149	+ <th>Null여부</th>
	150	+ </tr>
	151	+ </thead>
	152	+ <tbody>
	153	+ <tr v-for="(item, index) in tableColumnList" :key="index">
	154	+ <td>
	155	+ {{
	156	+ index + 1 + (tableColumnData.currentPage - 1) * tableColumnData.perPage
	157	+ }}
	158	+ </td>
	159	+ <td>{{ item.column_nm }}</td>
	160	+ <td>{{ item.column_nm_k }}</td>
	161	+ <td>{{ item.column_type }}</td>
	162	+ <td>{{ item.column_isnull }}</td>
	163	+ </tr>
	164	+ </tbody>
	165	+ </table>
	166	+ <PaginationButton
	167	+ v-model:currentPage="tableColumnData.currentPage"
	168	+ :perPage="tableColumnData.perPage"
	169	+ :totalCount="tableColumnListCount"
	170	+ :maxRange="5"
	171	+ />
	172	+ </div>
	173	+ <div class="justify-center flex5">
	174	+ <button class="blue-btn variable-btn">선택한 컬럼 상세 조회</button>
	175	+ </div>
133	176	</div>
134		- <div class="table-zone">
135		- <table class="list-table">
136		- <colgroup>
137		- <col style="width: 5%" />
138		- <col style="width: " />
139		- <col style="width: " />
140		- <col style="width: " />
141		- </colgroup>
142		- <thead>
143		- <tr>
144		- <th>No.</th>
145		- <th>컬럼명</th>
146		- <th>한글명</th>
147		- <th>DataType</th>
148		- <th>Null여부</th>
149		- </tr>
150		- </thead>
151		- <tbody>
152		- <tr v-for="(item, index) in tableColumnList" :key="index">
153		- <td>
154		- {{ index + 1 + (tableColumnData.currentPage - 1) * tableColumnData.perPage }}
155		- </td>
156		- <td>{{ item.column_nm }}</td>
157		- <td>{{ item.column_nm_k }}</td>
158		- <td>{{ item.column_type }}</td>
159		- <td>{{ item.column_isnull }}</td>
160		- </tr>
161		- </tbody>
162		- </table>
163		- <PaginationButton
164		- v-model:currentPage="tableColumnData.currentPage"
165		- :perPage="tableColumnData.perPage"
166		- :totalCount="tableColumnListCount"
167		- :maxRange="5"
168		- />
169		- </div>
170		- <div class="justify-center flex5">
171		- <button class="blue-btn small-btn">선택한 컬럼 상세 조회</button>
172		- </div>
173		-
174		- <div class="content-titleZone flex5">
175		- <p class="box-title">테이블 내 컬럼 데이터 분석 정보</p>
176		- </div>
177		- <div class="table-zone">
178		- <table class="list-table">
179		- <colgroup>
180		- <col style="width: 5%" />
181		- <col style="width: " />
182		- <col style="width: " />
183		- <col style="width: " />
184		- </colgroup>
185		- <thead>
186		- <tr>
187		- <th>No.</th>
188		- <th>데이터</th>
189		- <th>COUNT</th>
190		- <th>분포</th>
191		- </tr>
192		- </thead>
193		- <tbody>
194		- <tr>
195		- <td>1</td>
196		- <td>test123</td>
197		- <td>홍길동</td>
198		- <td>1999.01.01</td>
199		- </tr>
200		- </tbody>
201		- </table>
	177	+ <div style="margin-top: 30px">
	178	+ <div class="content-titleZone">
	179	+ <p class="box-title">테이블 내 컬럼 데이터 분석 정보</p>
	180	+ </div>
	181	+ <div class="table-zone">
	182	+ <table class="list-table">
	183	+ <colgroup>
	184	+ <col style="width: 5%" />
	185	+ <col style="width: " />
	186	+ <col style="width: " />
	187	+ <col style="width: " />
	188	+ </colgroup>
	189	+ <thead>
	190	+ <tr>
	191	+ <th>No.</th>
	192	+ <th>데이터</th>
	193	+ <th>COUNT</th>
	194	+ <th>분포</th>
	195	+ </tr>
	196	+ </thead>
	197	+ <tbody>
	198	+ <tr>
	199	+ <td>1</td>
	200	+ <td>test123</td>
	201	+ <td>홍길동</td>
	202	+ <td>1999.01.01</td>
	203	+ </tr>
	204	+ </tbody>
	205	+ </table>
	206	+ </div>
202	207	</div>
203	208	</div>
204	209	</div>

...	...	@@ -37,13 +37,13 @@
37	37	</option>
38	38	</select>
39	39
40		- <button class="table-searchBtn" @click="selectTableList">검색</button>
	40	+ <button class="blue-btn small-btn" @click="selectTableList">검색</button>
41	41	</div>
42	42	</div>
43	43	<!-- 제외 사유 -->
44	44	<div style="margin-top: 30px">
45	45	<p class="box-title">> 제외 사유 일괄 지정</p>
46		- <div style="display: flex; align-items: center; margin-top: 15px">
	46	+ <div class="exceptExplain">
47	47	<span class="option-title">제외 사유</span>
48	48	<div class="search-square">
49	49	<input type="text" class="square-input" placeholder="제외 사유" v-model="update_explain" />
...	...	@@ -51,16 +51,14 @@
51	51	<svg-icon type="mdi" :path="searchPath" class="square-icon"></svg-icon>
52	52	</button>
53	53	</div>
54		- <button class="red-border-btn small-btn" @click="handleExplainAdd">일괄 추가</button>
55		- <button class="red-border-btn small-btn" @click="handleExplainDelete">일괄 삭제</button>
	54	+ <button class="red-btn small-btn" @click="handleExplainAdd">일괄 추가</button>
	55	+ <button class="red-btn small-btn" @click="handleExplainDelete">일괄 삭제</button>
56	56	</div>
57	57	</div>
58	58	<!-- 테이블 조회 -->
59	59	<div class="table-zone">
60		- <div class="flex justify-end">
61		- <button class="red-border-btn small-btn" @click="handleTableUpdate">
62		- 제외 여부, 사유 저장
63		- </button>
	60	+ <div class="flex justify-end" style="margin-top: -40px">
	61	+ <button class="red-btn variable-btn" @click="handleTableUpdate">제외 여부, 사유 저장</button>
64	62	</div>
65	63	<table class="list-table" style="text-align: center">
66	64	<colgroup>
...	...	@@ -113,7 +111,7 @@
113	111	<script>
114	112	import axios from 'axios';
115	113	import PageNavigation from '../../component/PageNavigation.vue';
116		-import PaginationButton from '../../component/paginationbutton.vue';
	114	+import PaginationButton from '../../component/PaginationButton.vue';
117	115	import SvgIcon from '@jamescoyle/vue-icon';
118	116
119	117	export default {
...	...	@@ -365,4 +363,9 @@
365	363	font-size: 15px;
366	364	margin: 150px 0px;
367	365	}
	366	+.exceptExplain {
	367	+ display: flex;
	368	+ align-items: center;
	369	+ margin-top: 15px;
	370	+}
368	371	</style>

Delete comment