Commit @46e861554628bbd258d7bdc924a33d1cc46eb0e1

46e8615

client/views/common/commonPlugin.js (added)

+++ client/views/common/commonPlugin.js

...	...	@@ -0,0 +1,36 @@
	1	+/**
	2	+ *
	3	+ * 공통 처리 플러그인
	4	+ */
	5	+export default{
	6	+ install(Vue){
	7	+
	8	+ let alertRef = {};
	9	+
	10	+ Vue.config.globalProperties.$setAlertRef = function(ref){
	11	+ alertRef = ref;
	12	+ }
	13	+
	14	+ //날짜 비교 함수
	15	+ Vue.config.globalProperties.$getSum = function(prevDate, currentDate){
	16	+ alert(prevDate)
	17	+ alert(currentDate)
	18	+ }
	19	+
	20	+ // 모달 호출
	21	+ Vue.config.globalProperties.$showAlert = function(title, message){
	22	+ alertRef.setTitle(title);
	23	+ alertRef.setMessage(message);
	24	+ alertRef.showModal();
	25	+ }
	26	+
	27	+ // confirm 창 호출
	28	+ Vue.config.globalProperties.$showConfirm = async function(title, message){
	29	+
	30	+ alertRef.setTitle(title);
	31	+ alertRef.setMessage(message);
	32	+ const resultData = await alertRef.showConfirm();
	33	+ return resultData;
	34	+ }
	35	+ }
	36	+}

34a5b60

46e8615

client/views/index.js

--- client/views/index.js

+++ client/views/index.js


 
 import AppRouter from "./pages/AppRouter.js";
 import App from "./pages/App.vue";
+import cmmnPlugin from './common/commonPlugin.js';
+import { quillEditor } from 'vue3-quill';
+
+// splitter component
+import PrimeVue from 'primevue/config';
+import Splitter from 'primevue/splitter';
+import SplitterPanel from 'primevue/splitterpanel';
+import "primevue/resources/themes/lara-light-green/theme.css";
+import "primevue/resources/primevue.min.css"; /* Deprecated */
 
 
+const app = createApp(App);
+app.use(cmmnPlugin)
+app.use(quillEditor)
+app.use(AppRouter)
+app.mount("#root");
 
-const vue = createApp(App).use(AppRouter).mount("#root");
+app.component('Splitter', Splitter);
+app.component('SplitterPanel', SplitterPanel);

34a5b60

46e8615

client/views/pages/App.vue

--- client/views/pages/App.vue

+++ client/views/pages/App.vue


    methods: {
       // 로그인
       updateIsLogin: function (boolean) {
+         console.log(boolean);
          this.isLogin = boolean;
       },
    },

34a5b60

46e8615

client/views/pages/login/Login.vue

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

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


                 .then(function (response) {
                     console.log("login - response", response.data);
                     if (response.data > 0) {
-                        vm.$emit("updateIsLogin", true);
                         alert("로그인 성공하였습니다.");
+                        vm.$emit("updateIsLogin", true);
                         vm.$router.go();
                         vm.$router.push({ path: '/main.page', query: {} });
                     } else {

34a5b60

46e8615

client/views/template/layoutTemplate/Horizontal.vue

--- client/views/template/layoutTemplate/Horizontal.vue

+++ client/views/template/layoutTemplate/Horizontal.vue


                     </div>
                 </div>
                 <div class="table-zone">
-                    <div class="flex justify-between align-center">
+                    <div class="list-info flex justify-between align-center">
                         <div class="count-zone">
                             <p>총 <span>40</span>건 중 <span>01</span>건 선택</p>
                         </div>

                             </tr>
                         </tbody>
                     </table>
-                    <div class="flex justify-end">
-                        <button class="red-border-btn small-btn">선택항목 삭제</button>
-                    </div>
+                </div>
+                <div class="flex justify-end">
+                    <button class="red-border-btn small-btn">선택항목 삭제</button>
                 </div>
                 <PaginationButton />
             </div>

                         <tbody>
                             <tr>
                                 <th>user ID</th>
-                                <td><input type="text" name="" id=""></td>
+                                <td><input type="text" name="" id="" class="full-input"></td>
                                 <th>이름</th>
-                                <td><input type="text" name="" id=""></td>
+                                <td><input type="text" name="" id="" class="full-input"></td>
                             </tr>
                             <tr>
                                 <th>생년월일</th>

                                 </td>
                                 <th>성별</th>
                                 <td>
-                                    <select name="" id=""></select>
+                                    <select name="" id="" class="full-select"></select>
                                 </td>
                             </tr>
                         </tbody>

34a5b60

46e8615

client/views/template/layoutTemplate/Vertical.vue

--- client/views/template/layoutTemplate/Vertical.vue

+++ client/views/template/layoutTemplate/Vertical.vue


                         <div class="content-titleZone">
                             <p class="box-title">호스트 선택</p>
                         </div>
-                        <select name="" id="">
+                        <select name="" id="" class="full-select">
                             <option value="">172.0.0.1</option>
                         </select>
                     </div>

             <div class="right-content flex80">
                 <div class="searchbar-zone">
                     <div class="flex justify-end align-center">
-                        <input type="date" name="" id="" class="square-date">
+                        <input type="date" name="" id="search-date" class="square-date"
+                            :class="{ 'date-placeholder': startDate }" data-placeholder="날짜 선택" @change="handleDateChange">
                         <span class="coupler">~</span>
-                        <input type="date" name="" id="" class="square-date">
+                        <input type="date" name="" id="search-date" class="square-date"
+                            :class="{ 'date-placeholder': endDate }" data-placeholder="날짜 선택" @change="handleDateChange">
                         <select name="" id="" class="square-select">
                             <option value="all">전체</option>
                         </select>

                 </div>
                 <div class="flex-column">
                     <div class="table-zone">
+                        <div class="list-info flex justify-between align-center">
+                        <div class="count-zone">
+                            <p>총 <span>40</span>건 중 <span>01</span>건 선택</p>
+                        </div>
+                        <div class="cunt-selectZone">
+                            <select name="" id="">
+                                <option value="">10개 보기</option>
+                                <option value="">20개 보기</option>
+                            </select>
+                        </div>
+                    </div>
                         <table class="list-table">
                             <colgroup>
                                 <col style="width: ;">

 <script>
 import PageNavigation from '../../component/PageNavigation.vue';
 import PaginationButton from '../../component/PaginationButton.vue';
-import FileTree from '../../component/FileTree.vue';
 import SvgIcon from '@jamescoyle/vue-icon';
 import { mdiMagnify } from '@mdi/js';
 export default {
     data() {
         return {
-            searchPath: mdiMagnify
+            searchPath: mdiMagnify,
+            startDate:true,
+            endDate:true
         }
     },
     methods: {
-
+        handleDateChange:function() {
+           if(this.startDate){
+            this.startDate = false
+           }else if(this.endDate){
+            this.endDate = false
+           }
+        } 
     },
     watch: {
 

     },
     components: {
         'PageNavigation': PageNavigation,
-        'FileTree': FileTree,
         'SvgIcon': SvgIcon,
         'PaginationButton': PaginationButton
     },

34a5b60

46e8615

client/views/template/templateElement/AlertModal.vue

--- client/views/template/templateElement/AlertModal.vue

+++ client/views/template/templateElement/AlertModal.vue


 <template>
     <div v-show="isModalOpen" class="modal-wrapper">
-        <div class="modal-container alert-modal">
+        <div class="modal-container small-modal">
             <div class="modal-title text-ct">
-                <h2>모달 제목</h2>
+                <h2>{{title}}</h2>
             </div>
             <div class="modal-content-monthly">
-                <p class="alert-write text-ct">경고 메세지를 입력해주세요. <br />
-                    삭제,수정,추가 등등
+                <p class="alert-write text-ct"  v-html="message">                   
                 </p>
             </div>
-            <div class="modal-end flex justify-between">
-                <button class="gray-btn large-btn flex50" @click="closeModal">취소</button>
-                <button class="blue-btn large-btn flex50" @click="closeModal">확인</button>
+            <div class="modal-end flex justify-center">
+                <button class="gray-btn large-btn flex50" id="confirmCancle" @click="closeModal" v-show="confirmAt">취소</button>
+                <button class="blue-btn large-btn flex50" id="confirmOk" @click="closeModal">확인</button>
             </div>
         </div>
     </div>

 <script>
 
 export default {
+    props: {
+        title : {
+            type : String,
+            default : '모달 제목'
+        },
+        message : {
+            type : String,
+            default : '경고 메세지를 입력해주세요. <br /> 삭제,수정,추가 등등'
+        },
+    },
     data() {
         return {
-            isModalOpen: true,
+            isModalOpen: false,
             activeTab: 'tab1',
-            modalType: 'tab-modal'
+            modalType: 'tab-modal',
+            title : this.title,
+            message : this.message,
+            confirmAt : false
         }
     },
     methods: {

             this.activeTab = tabName;
         },
 
+        // 닫기
         closeModal:function(){
-            this.isModalOpen=false;
-        }
+            this.isModalOpen = false;
+        },
+
+        // 모달 호출
+        showModal : function(){
+            
+            this.confirmAt = false;
+            this.isModalOpen = true;
+            document.getElementById("confirmOk").focus()
+        },
+
+        // confirm 호출
+        showConfirm : async function(){
+            this.confirmAt = true;
+            this.isModalOpen = true;   
+            document.getElementById("confirmOk").focus()
+            const promise = new Promise((resolve, reject) => {               
+                document.getElementById("confirmCancle").addEventListener("click", async () => {   
+                    resolve('cancle')
+                });
+    
+                document.getElementById("confirmOk").addEventListener("click", async () => {                   
+                    resolve('ok')                 
+                });
+            });
+
+            return promise.then(
+                (id) => {         
+                    if(id == 'cancle'){
+                        return false;  
+                    }else if(id =='ok'){
+                        return true;          
+                    }
+                 
+                }     
+            );
+        },
+
+        setTitle : function(Title){
+            this.title = Title;
+        },
+
+        setMessage : function(message){
+            this.message = message;
+        },
+
     },
     watch: {
 

 
     },
     components: {
+
     },
     mounted() {
         console.log('main mounted');

34a5b60

46e8615

client/views/template/templateElement/BtnPosition.vue

--- client/views/template/templateElement/BtnPosition.vue

+++ client/views/template/templateElement/BtnPosition.vue


         <div class="box">
             <p style="font-size:2rem; font-weight:800; margin-bottom:10px">타이틀 옆 버튼 위치</p>
             <!-- 여기서부터 복사 -->
-            <div class="flex-between">
+            <div class="flex justify-between align-center">
                 <p class="box-title">폴더 리스트</p>
                 <button class="darkg-border-btn small-btn">폴더추가</button>
             </div>

         <div class="box">
             <p style="font-size:2rem; font-weight:800; margin-bottom:10px">다운로드버튼 및 crud 한페이지에서 이루어지는 page의 조회 및 삭제</p>
             <!-- 여기서부터 복사 -->
-            <div class="flex-end">
+            <div class="flex justify-end">
                 <button class="green-border-btn small-btn">파일 다운로드</button>
             </div>
             <table class="list-table">

         <div class="box">
             <p style="font-size:2rem; font-weight:800; margin-bottom:10px">조건 검색과 같이 들어가는 버튼</p>
             <!-- 여기서부터 복사 -->
-            <div class="flex-between">
-                <div>
+            <div class="flex justify-between align-center">
+                <div class="flex20">
                     <button class="darkg-border-btn small-btn">선택이동</button>
                     <button class="darkg-border-btn small-btn">선택복사</button>
                     <button class="darkg-border-btn small-btn">선택삭제</button>
                 </div>
-                <div class="flex-end">
-                    <div class="search-bar flex">
-                        <select name="" id="">
-                            <option value="all">전체</option>
-                        </select>
-                        <input type="text" name="" id="">
+                <div class="flex justify-end flex80">
+                    <div class="search-bar">
+                        <div class="flex justify-end align-center">
+                            <input type="date" name="" id="" class="square-date">
+                            <span class="coupler">~</span>
+                            <input type="date" name="" id="" class="square-date">
+                            <select name="" id="" class="square-select">
+                                <option value="all">전체</option>
+                            </select>
+                            <div class="search-square">
+                                <input type="text" class="square-input" placeholder="Search">
+                                <button class="square-button">
+                                    <svg-icon type="mdi" :path="searchPath" class="square-icon"></svg-icon>
+                                </button>
+                            </div>
+                        </div>
                     </div>
-                    <button class="blue-btn small-btn">검색</button>
                 </div>
             </div>
             <table class="list-table">

                 </tbody>
             </table>
             <!-- 여기서부터 복사 -->
-            <div class="flex-end">
+            <div class="flex justify-end">
                 <button class="darkg-btn small-btn">등록</button>
             </div>
         </div>

                     <tr>
                         <th>생년월일</th>
                         <td>
-                            <div class="flex">
-                                <select name="" id=""></select>
-                                <select name="" id=""></select>
-                                <select name="" id=""></select>
+                            <div class="flex justify-between">
+                                <select name="" id="" class="flex30"></select>
+                                <select name="" id="" class="flex30"></select>
+                                <select name="" id="" class="flex30"></select>
                             </div>
                         </td>
                         <th>성별</th>

                 </tbody>
             </table>
             <!-- 여기서부터 복사 -->
-            <div class="flex-end">
+            <div class="flex justify-end">
                 <button class="red-border-btn small-btn">삭제</button>
                 <button class="darkg-border-btn small-btn">목록</button>
                 <button class="green-border-btn small-btn">수정</button>

 </template>
 
 <script>
-
+import SvgIcon from '@jamescoyle/vue-icon';
+import { mdiMagnify } from '@mdi/js';
 export default {
     data() {
         return {
+            searchPath: mdiMagnify
         }
     },
     methods: {

 
     },
     components: {
+        'SvgIcon': SvgIcon
     },
     mounted() {
     }

34a5b60

46e8615

client/views/template/templateElement/BtnTable.vue

--- client/views/template/templateElement/BtnTable.vue

+++ client/views/template/templateElement/BtnTable.vue


                 </select>
             </div>
         </div>
-        <table class="list-table">
+        <div class="table-zone">
+            <table class="list-table">
             <colgroup>
                 <col style="width: ;">
                 <col style="width: ;">

             </colgroup>
             <thead>
                 <tr>
-                    <th>No <button class="tp-btn"><svg-icon type="mdi" :path="settingPath" :color="'#213f99'"></svg-icon></button></th>
-                    <th>user ID <button class="tp-btn"><svg-icon type="mdi" :path="settingPath" :color="'#213f99'"></svg-icon></button></th>
-                    <th>이름 <button class="tp-btn"><svg-icon type="mdi" :path="settingPath" :color="'#213f99'"></svg-icon></button></th>
-                    <th>생년월일 <button class="tp-btn"><svg-icon type="mdi" :path="settingPath" :color="'#213f99'"></svg-icon></button></th>
-                    <th>성별 <button class="tp-btn"><svg-icon type="mdi" :path="settingPath" :color="'#213f99'"></svg-icon></button></th>
+                    <th>No <button class="tp-btn"><svg-icon type="mdi" :width="15" :height="15" :path="settingPath" :color="'#213f99'"></svg-icon></button></th>
+                    <th>user ID <button class="tp-btn"><svg-icon type="mdi" :width="15" :height="15" :path="settingPath" :color="'#213f99'"></svg-icon></button></th>
+                    <th>이름 <button class="tp-btn"><svg-icon type="mdi" :width="15" :height="15" :path="settingPath" :color="'#213f99'"></svg-icon></button></th>
+                    <th>생년월일 <button class="tp-btn"><svg-icon type="mdi" :width="15" :height="15" :path="settingPath" :color="'#213f99'"></svg-icon></button></th>
+                    <th>성별 <button class="tp-btn"><svg-icon type="mdi" :width="15" :height="15" :path="settingPath" :color="'#213f99'"></svg-icon></button></th>
                 </tr>
             </thead>
             <tbody>

                 </tr>
             </tbody>
         </table>
+        </div>
     </div>
 </template>
 

34a5b60

46e8615

client/views/template/templateElement/DefaultSearchBar.vue

--- client/views/template/templateElement/DefaultSearchBar.vue

+++ client/views/template/templateElement/DefaultSearchBar.vue


 <template>
     <div class="search-bar">
         <div class="flex justify-end align-center">
-            <input type="date" name="" id="" class="square-date">
+            <input type="date" name="" id="search-date" class="square-date" :class="{ 'date-placeholder': startDate }" data-placeholder="날짜 선택" @change="handleDateChange">
             <span class="coupler">~</span>
-            <input type="date" name="" id="" class="square-date">
+            <input type="date" name="" id="search-date" class="square-date" :class="{ 'date-placeholder': endDate }" data-placeholder="날짜 선택" @change="handleDateChange">
             <select name="" id="" class="square-select">
                 <option value="all">전체</option>
             </select>

 export default {
     data() {
         return {
-            searchPath: mdiMagnify
+            searchPath: mdiMagnify,
+            startDate:true,
+            endDate:true
         }
     },
     methods: {
-
+        handleDateChange:function() {
+           if(this.startDate){
+            this.startDate = false
+           }else if(this.endDate){
+            this.endDate = false
+           }
+        } 
     },
     watch: {
 

46e8615

client/views/template/templateElement/FileTree.vue (added)

+++ client/views/template/templateElement/FileTree.vue

...	...	@@ -0,0 +1,59 @@
	1	+<template>
	2	+ <div class="flex justfiy-center">
	3	+ <Tree :value="nodes" :loadingMode="'icon'" class="flex20"></Tree>
	4	+ </div>
	5	+</template>
	6	+
	7	+<script>
	8	+import Tree from 'primevue/tree';
	9	+import SvgIcon from '@jamescoyle/vue-icon';
	10	+import { mdiFolderOpenOutline, mdiFileOutline } from '@mdi/js';
	11	+
	12	+export default {
	13	+ data() {
	14	+ return {
	15	+ nodes: [
	16	+ {
	17	+ key: 0,
	18	+ label: "test1",
	19	+ nodeIcon:'<svg-icon type="mdi" :path="folderPath"></svg-icon>',
	20	+ children: [
	21	+ { key: 0 - 0, label: "test0.1", data: "https://www.google.com", type: 'url',nodeIcon:' <svg-icon type="mdi" :path="filePath"></svg-icon>' },
	22	+ { key: 0 - 1, label: "test0.2", data: "https://www.google.com", type: 'url',nodeIcon:' <svg-icon type="mdi" :path="filePath"></svg-icon>' },
	23	+ { key: 0 - 2, label: "test0.3", data: "https://www.google.com", type: 'url',nodeIcon:' <svg-icon type="mdi" :path="filePath"></svg-icon>' },
	24	+ { key: 0 - 3, label: "test0.4", data: "https://www.google.com", type: 'url',nodeIcon:' <svg-icon type="mdi" :path="filePath"></svg-icon>' }
	25	+ ]
	26	+ },
	27	+ {
	28	+ key: 1,
	29	+ label: "test2",
	30	+ nodeIcon:'<svg-icon type="mdi" :path="folderPath"></svg-icon>',
	31	+ children: [
	32	+ { key: 1 - 0, label: "test1.1", data: "https://www.google.com", type: 'url',nodeIcon:' <svg-icon type="mdi" :path="filePath"></svg-icon>' },
	33	+ { key: 1 - 1, label: "test1.2", data: "https://www.google.com", type: 'url',nodeIcon:' <svg-icon type="mdi" :path="filePath"></svg-icon>' },
	34	+ { key: 1 - 2, label: "test1.3", data: "https://www.google.com", type: 'url',nodeIcon:' <svg-icon type="mdi" :path="filePath"></svg-icon>' },
	35	+ { key: 1 - 3, label: "test1.4", data: "https://www.google.com", type: 'url',nodeIcon:' <svg-icon type="mdi" :path="filePath"></svg-icon>' }
	36	+ ]
	37	+ },
	38	+ ],
	39	+ folderPath:mdiFolderOpenOutline,
	40	+ filePath:mdiFolderOpenOutline,
	41	+ }
	42	+ },
	43	+ methods: {
	44	+ },
	45	+ watch: {
	46	+
	47	+ },
	48	+ computed: {
	49	+
	50	+ },
	51	+ components: {
	52	+ 'Tree': Tree,
	53	+ 'SvgIcon':SvgIcon
	54	+ },
	55	+ mounted() {
	56	+ console.log('main mounted');
	57	+ }
	58	+}
	59	+</script>(No newline at end of file)

34a5b60

46e8615

client/views/template/templateElement/FormModal.vue

--- client/views/template/templateElement/FormModal.vue

+++ client/views/template/templateElement/FormModal.vue


         return {
             isModalOpen: true,
             activeTab: 'tab1',
-            // modalType: 'form-modal'
-            modalType: 'tab-modal'
+            // modalType: 'form-modal',
+             modalType: 'tab-modal'
         }
     },
     methods: {

34a5b60

46e8615

client/views/template/templateElement/FormTable.vue

--- client/views/template/templateElement/FormTable.vue

+++ client/views/template/templateElement/FormTable.vue


 <template>
     <div class="table-zone">
         <table class="form-table">
+            <!-- col 꼭 너비 기재해야함! 그래야 100%로 차지함 -->
             <colgroup>
                 <col style="width: ;">
                 <col style="width: ;">

34a5b60

46e8615

client/views/template/templateElement/FormTable2.vue

--- client/views/template/templateElement/FormTable2.vue

+++ client/views/template/templateElement/FormTable2.vue


 <template>
     <div class="table-zone">
         <table class="form-table2">
+                        <!-- col 꼭 너비 기재해야함! 그래야 100%로 차지함 -->
             <colgroup>
                 <col style="width: ;">
                 <col style="width: ;">

46e8615

client/views/template/templateElement/Icon.vue (added)

+++ client/views/template/templateElement/Icon.vue

...	...	@@ -0,0 +1,36 @@
	1	+<template>
	2	+ <div class="icon-zone">
	3	+ <p class="flex justify-center align-center state green"><svg-icon type="mdi" :width="21" :height="21" :path="checkPath"></svg-icon> <span>성공</span></p>
	4	+ <p class="flex justify-center align-center state red"><svg-icon type="mdi" :width="21" :height="21" :path="xPath"></svg-icon> <span>실패</span></p>
	5	+ <p class="flex justify-center align-center state orange"><img src="../../../resources/img/loading_mini_icon.png" alt=""> <span>진행중</span></p>
	6	+ </div>
	7	+</template>
	8	+
	9	+<script>
	10	+import SvgIcon from '@jamescoyle/vue-icon';
	11	+import { mdiCheckCircle, mdiCloseCircle } from '@mdi/js';
	12	+export default {
	13	+ data() {
	14	+ return {
	15	+ checkPath: mdiCheckCircle,
	16	+ xPath: mdiCloseCircle,
	17	+
	18	+ }
	19	+ },
	20	+ methods: {
	21	+
	22	+ },
	23	+ watch: {
	24	+
	25	+ },
	26	+ computed: {
	27	+
	28	+ },
	29	+ components: {
	30	+ 'SvgIcon': SvgIcon
	31	+ },
	32	+ mounted() {
	33	+ console.log('main mounted');
	34	+ }
	35	+}
	36	+</script>

46e8615

client/views/template/templateElement/ListModal.vue (added)

+++ client/views/template/templateElement/ListModal.vue

...	...	@@ -0,0 +1,116 @@
	1	+<template>
	2	+ <div v-show="isModalOpen" class="modal-wrapper">
	3	+ <div class="modal-container">
	4	+ <div class="modal-title">
	5	+ <div class="flex justify-between align-center">
	6	+ <h2>센서 알람 설정</h2>
	7	+ <button class="close-btn" @click="closeModal">X</button>
	8	+ </div>
	9	+ </div>
	10	+ <div class="modal-content-monthly">
	11	+ <div class="table-zone">
	12	+ <table class="list-table">
	13	+ <!-- col 꼭 너비 기재해야함! 그래야 100%로 차지함 -->
	14	+ <colgroup>
	15	+ <col style="width: 22.5%;">
	16	+ <col style="width: 22.5%;">
	17	+ <col style="width: 22.5%;">
	18	+ <col style="width: 22.5%;">
	19	+ <col style="width: 10%;">
	20	+ </colgroup>
	21	+ <thead>
	22	+ <tr>
	23	+ <th>컬럼명</th>
	24	+ <th>한글명</th>
	25	+ <th>MIN</th>
	26	+ <th>MAX</th>
	27	+ <th>사용여부</th>
	28	+ </tr>
	29	+ </thead>
	30	+ <tbody>
	31	+ <tr>
	32	+ <td>SENS1</td>
	33	+ <td><input type="text" name="" id="" class="full-input" value="벨브1"/></td>
	34	+ <td><input type="text" name="" id="" class="full-input"/></td>
	35	+ <td><input type="text" name="" id="" class="full-input"/></td>
	36	+ <td><input type="checkbox" name="" id=""></td>
	37	+ </tr>
	38	+ <tr>
	39	+ <td>SENS2</td>
	40	+ <td><input type="text" name="" id="" class="full-input" value="벨브2"/></td>
	41	+ <td><input type="text" name="" id="" class="full-input"/></td>
	42	+ <td><input type="text" name="" id="" class="full-input"/></td>
	43	+ <td><input type="checkbox" name="" id=""></td>
	44	+ </tr>
	45	+ <tr>
	46	+ <td>SENS3</td>
	47	+ <td><input type="text" name="" id="" class="full-input" value="벨브3"/></td>
	48	+ <td><input type="text" name="" id="" class="full-input"/></td>
	49	+ <td><input type="text" name="" id="" class="full-input"/></td>
	50	+ <td><input type="checkbox" name="" id=""></td>
	51	+ </tr>
	52	+ <tr>
	53	+ <td>SENS4</td>
	54	+ <td><input type="text" name="" id="" class="full-input" value="벨브4"/></td>
	55	+ <td><input type="text" name="" id="" class="full-input"/></td>
	56	+ <td><input type="text" name="" id="" class="full-input"/></td>
	57	+ <td><input type="checkbox" name="" id=""></td>
	58	+ </tr>
	59	+ <tr>
	60	+ <td>SENS5</td>
	61	+ <td><input type="text" name="" id="" class="full-input" value="벨브5"/></td>
	62	+ <td><input type="text" name="" id="" class="full-input"/></td>
	63	+ <td><input type="text" name="" id="" class="full-input"/></td>
	64	+ <td><input type="checkbox" name="" id=""></td>
	65	+ </tr>
	66	+ <tr>
	67	+ <td>SENS6</td>
	68	+ <td><input type="text" name="" id="" class="full-input" value="벨브6"/></td>
	69	+ <td><input type="text" name="" id="" class="full-input"/></td>
	70	+ <td><input type="text" name="" id="" class="full-input"/></td>
	71	+ <td><input type="checkbox" name="" id=""></td>
	72	+ </tr>
	73	+ </tbody>
	74	+ </table>
	75	+ </div>
	76	+ </div>
	77	+ <div class="modal-end flex justify-end">
	78	+ <button v-show="modalType === 'form-modal'" class="orange-btn small-btn">접속</button>
	79	+ <button v-show="modalType === 'tab-modal'" class="blue-btn small-btn">확인</button>
	80	+ </div>
	81	+ </div>
	82	+ </div>
	83	+</template>
	84	+
	85	+<script>
	86	+
	87	+export default {
	88	+ data() {
	89	+ return {
	90	+ isModalOpen: true,
	91	+ activeTab: 'tab1',
	92	+ modalType: 'tab-modal'
	93	+ }
	94	+ },
	95	+ methods: {
	96	+ // 탭 변경
	97	+ showTab: function (tabName) {
	98	+ this.activeTab = tabName;
	99	+ },
	100	+ closeModal: function () {
	101	+ this.isModalOpen = false;
	102	+ }
	103	+ },
	104	+ watch: {
	105	+
	106	+ },
	107	+ computed: {
	108	+
	109	+ },
	110	+ components: {
	111	+ },
	112	+ mounted() {
	113	+ console.log('main mounted');
	114	+ }
	115	+}
	116	+</script>(No newline at end of file)

34a5b60

46e8615

client/views/template/templateElement/ListTable.vue

--- client/views/template/templateElement/ListTable.vue

+++ client/views/template/templateElement/ListTable.vue


 <template>
     <div class="table-zone">
-        <div class="flex justify-between align-center">
+        <div class="list-info flex justify-between align-center">
             <div class="count-zone">
                 <p>총 <span>40</span>건 중 <span>01</span>건 선택</p>
             </div>

             </div>
         </div>
         <table class="list-table">
+            <!-- col 꼭 너비 기재해야함! 그래야 100%로 차지함 -->
             <colgroup>
                 <col style="width: ;">
                 <col style="width: ;">

                     <td>1999.01.01</td>
                     <td>여</td>
                 </tr>
+                <tr v-if="postList === 0">
+                    <td colspan="5" class="no-list">검색조건에 해당하는 데이터가 없습니다.</td>
+                </tr>
             </tbody>
         </table>
     </div>

...	...	@@ -143,8 +143,8 @@
143	143	return {
144	144	isModalOpen: true,
145	145	activeTab: 'tab1',
146		- // modalType: 'form-modal'
147		- modalType: 'tab-modal'
	146	+ // modalType: 'form-modal',
	147	+ modalType: 'tab-modal'
148	148	}
149	149	},
150	150	methods: {

...	...	@@ -7,7 +7,22 @@
7	7
8	8	import AppRouter from "./pages/AppRouter.js";
9	9	import App from "./pages/App.vue";
	10	+import cmmnPlugin from './common/commonPlugin.js';
	11	+import { quillEditor } from 'vue3-quill';
	12	+
	13	+// splitter component
	14	+import PrimeVue from 'primevue/config';
	15	+import Splitter from 'primevue/splitter';
	16	+import SplitterPanel from 'primevue/splitterpanel';
	17	+import "primevue/resources/themes/lara-light-green/theme.css";
	18	+import "primevue/resources/primevue.min.css"; /* Deprecated */
10	19
11	20
	21	+const app = createApp(App);
	22	+app.use(cmmnPlugin)
	23	+app.use(quillEditor)
	24	+app.use(AppRouter)
	25	+app.mount("#root");
12	26
13		-const vue = createApp(App).use(AppRouter).mount("#root");
	27	+app.component('Splitter', Splitter);
	28	+app.component('SplitterPanel', SplitterPanel);

...	...	@@ -26,6 +26,7 @@
26	26	methods: {
27	27	// 로그인
28	28	updateIsLogin: function (boolean) {
	29	+ console.log(boolean);
29	30	this.isLogin = boolean;
30	31	},
31	32	},

...	...	@@ -75,8 +75,8 @@
75	75	.then(function (response) {
76	76	console.log("login - response", response.data);
77	77	if (response.data > 0) {
78		- vm.$emit("updateIsLogin", true);
79	78	alert("로그인 성공하였습니다.");
	79	+ vm.$emit("updateIsLogin", true);
80	80	vm.$router.go();
81	81	vm.$router.push({ path: '/main.page', query: {} });
82	82	} else {

...	...	@@ -28,7 +28,7 @@
28	28	</div>
29	29	</div>
30	30	<div class="table-zone">
31		- <div class="flex justify-between align-center">
	31	+ <div class="list-info flex justify-between align-center">
32	32	<div class="count-zone">
33	33	<p>총 <span>40</span>건 중 <span>01</span>건 선택</p>
34	34	</div>
...	...	@@ -140,9 +140,9 @@
140	140	</tr>
141	141	</tbody>
142	142	</table>
143		- <div class="flex justify-end">
144		- <button class="red-border-btn small-btn">선택항목 삭제</button>
145		- </div>
	143	+ </div>
	144	+ <div class="flex justify-end">
	145	+ <button class="red-border-btn small-btn">선택항목 삭제</button>
146	146	</div>
147	147	<PaginationButton />
148	148	</div>
...	...	@@ -161,9 +161,9 @@
161	161	<tbody>
162	162	<tr>
163	163	<th>user ID</th>
164		- <td><input type="text" name="" id=""></td>
	164	+ <td><input type="text" name="" id="" class="full-input"></td>
165	165	<th>이름</th>
166		- <td><input type="text" name="" id=""></td>
	166	+ <td><input type="text" name="" id="" class="full-input"></td>
167	167	</tr>
168	168	<tr>
169	169	<th>생년월일</th>
...	...	@@ -176,7 +176,7 @@
176	176	</td>
177	177	<th>성별</th>
178	178	<td>
179		- <select name="" id=""></select>
	179	+ <select name="" id="" class="full-select"></select>
180	180	</td>
181	181	</tr>
182	182	</tbody>

...	...	@@ -11,7 +11,7 @@
11	11	<div class="content-titleZone">
12	12	<p class="box-title">호스트 선택</p>
13	13	</div>
14		- <select name="" id="">
	14	+ <select name="" id="" class="full-select">
15	15	<option value="">172.0.0.1</option>
16	16	</select>
17	17	</div>
...	...	@@ -28,9 +28,11 @@
28	28	<div class="right-content flex80">
29	29	<div class="searchbar-zone">
30	30	<div class="flex justify-end align-center">
31		- <input type="date" name="" id="" class="square-date">
	31	+ <input type="date" name="" id="search-date" class="square-date"
	32	+ :class="{ 'date-placeholder': startDate }" data-placeholder="날짜 선택" @change="handleDateChange">
32	33	<span class="coupler">~</span>
33		- <input type="date" name="" id="" class="square-date">
	34	+ <input type="date" name="" id="search-date" class="square-date"
	35	+ :class="{ 'date-placeholder': endDate }" data-placeholder="날짜 선택" @change="handleDateChange">
34	36	<select name="" id="" class="square-select">
35	37	<option value="all">전체</option>
36	38	</select>
...	...	@@ -44,6 +46,17 @@
44	46	</div>
45	47	<div class="flex-column">
46	48	<div class="table-zone">
	49	+ <div class="list-info flex justify-between align-center">
	50	+ <div class="count-zone">
	51	+ <p>총 <span>40</span>건 중 <span>01</span>건 선택</p>
	52	+ </div>
	53	+ <div class="cunt-selectZone">
	54	+ <select name="" id="">
	55	+ <option value="">10개 보기</option>
	56	+ <option value="">20개 보기</option>
	57	+ </select>
	58	+ </div>
	59	+ </div>
47	60	<table class="list-table">
48	61	<colgroup>
49	62	<col style="width: ;">
...	...	@@ -144,17 +157,24 @@
144	157	<script>
145	158	import PageNavigation from '../../component/PageNavigation.vue';
146	159	import PaginationButton from '../../component/PaginationButton.vue';
147		-import FileTree from '../../component/FileTree.vue';
148	160	import SvgIcon from '@jamescoyle/vue-icon';
149	161	import { mdiMagnify } from '@mdi/js';
150	162	export default {
151	163	data() {
152	164	return {
153		- searchPath: mdiMagnify
	165	+ searchPath: mdiMagnify,
	166	+ startDate:true,
	167	+ endDate:true
154	168	}
155	169	},
156	170	methods: {
157		-
	171	+ handleDateChange:function() {
	172	+ if(this.startDate){
	173	+ this.startDate = false
	174	+ }else if(this.endDate){
	175	+ this.endDate = false
	176	+ }
	177	+ }
158	178	},
159	179	watch: {
160	180
...	...	@@ -164,7 +184,6 @@
164	184	},
165	185	components: {
166	186	'PageNavigation': PageNavigation,
167		- 'FileTree': FileTree,
168	187	'SvgIcon': SvgIcon,
169	188	'PaginationButton': PaginationButton
170	189	},

...	...	@@ -1,17 +1,16 @@
1	1	<template>
2	2	<div v-show="isModalOpen" class="modal-wrapper">
3		- <div class="modal-container alert-modal">
	3	+ <div class="modal-container small-modal">
4	4	<div class="modal-title text-ct">
5		- <h2>모달 제목</h2>
	5	+ <h2>{{title}}</h2>
6	6	</div>
7	7	<div class="modal-content-monthly">
8		- <p class="alert-write text-ct">경고 메세지를 입력해주세요. <br />
9		- 삭제,수정,추가 등등
	8	+ <p class="alert-write text-ct" v-html="message">
10	9	</p>
11	10	</div>
12		- <div class="modal-end flex justify-between">
13		- <button class="gray-btn large-btn flex50" @click="closeModal">취소</button>
14		- <button class="blue-btn large-btn flex50" @click="closeModal">확인</button>
	11	+ <div class="modal-end flex justify-center">
	12	+ <button class="gray-btn large-btn flex50" id="confirmCancle" @click="closeModal" v-show="confirmAt">취소</button>
	13	+ <button class="blue-btn large-btn flex50" id="confirmOk" @click="closeModal">확인</button>
15	14	</div>
16	15	</div>
17	16	</div>
...	...	@@ -20,11 +19,24 @@
20	19	<script>
21	20
22	21	export default {
	22	+ props: {
	23	+ title : {
	24	+ type : String,
	25	+ default : '모달 제목'
	26	+ },
	27	+ message : {
	28	+ type : String,
	29	+ default : '경고 메세지를 입력해주세요. <br /> 삭제,수정,추가 등등'
	30	+ },
	31	+ },
23	32	data() {
24	33	return {
25		- isModalOpen: true,
	34	+ isModalOpen: false,
26	35	activeTab: 'tab1',
27		- modalType: 'tab-modal'
	36	+ modalType: 'tab-modal',
	37	+ title : this.title,
	38	+ message : this.message,
	39	+ confirmAt : false
28	40	}
29	41	},
30	42	methods: {
...	...	@@ -33,9 +45,54 @@
33	45	this.activeTab = tabName;
34	46	},
35	47
	48	+ // 닫기
36	49	closeModal:function(){
37		- this.isModalOpen=false;
38		- }
	50	+ this.isModalOpen = false;
	51	+ },
	52	+
	53	+ // 모달 호출
	54	+ showModal : function(){
	55	+
	56	+ this.confirmAt = false;
	57	+ this.isModalOpen = true;
	58	+ document.getElementById("confirmOk").focus()
	59	+ },
	60	+
	61	+ // confirm 호출
	62	+ showConfirm : async function(){
	63	+ this.confirmAt = true;
	64	+ this.isModalOpen = true;
	65	+ document.getElementById("confirmOk").focus()
	66	+ const promise = new Promise((resolve, reject) => {
	67	+ document.getElementById("confirmCancle").addEventListener("click", async () => {
	68	+ resolve('cancle')
	69	+ });
	70	+
	71	+ document.getElementById("confirmOk").addEventListener("click", async () => {
	72	+ resolve('ok')
	73	+ });
	74	+ });
	75	+
	76	+ return promise.then(
	77	+ (id) => {
	78	+ if(id == 'cancle'){
	79	+ return false;
	80	+ }else if(id =='ok'){
	81	+ return true;
	82	+ }
	83	+
	84	+ }
	85	+ );
	86	+ },
	87	+
	88	+ setTitle : function(Title){
	89	+ this.title = Title;
	90	+ },
	91	+
	92	+ setMessage : function(message){
	93	+ this.message = message;
	94	+ },
	95	+
39	96	},
40	97	watch: {
41	98
...	...	@@ -44,6 +101,7 @@
44	101
45	102	},
46	103	components: {
	104	+
47	105	},
48	106	mounted() {
49	107	console.log('main mounted');

...	...	@@ -3,7 +3,7 @@
3	3	<div class="box">
4	4	<p style="font-size:2rem; font-weight:800; margin-bottom:10px">타이틀 옆 버튼 위치</p>
5	5	<!-- 여기서부터 복사 -->
6		- <div class="flex-between">
	6	+ <div class="flex justify-between align-center">
7	7	<p class="box-title">폴더 리스트</p>
8	8	<button class="darkg-border-btn small-btn">폴더추가</button>
9	9	</div>
...	...	@@ -11,7 +11,7 @@
11	11	<div class="box">
12	12	<p style="font-size:2rem; font-weight:800; margin-bottom:10px">다운로드버튼 및 crud 한페이지에서 이루어지는 page의 조회 및 삭제</p>
13	13	<!-- 여기서부터 복사 -->
14		- <div class="flex-end">
	14	+ <div class="flex justify-end">
15	15	<button class="green-border-btn small-btn">파일 다운로드</button>
16	16	</div>
17	17	<table class="list-table">
...	...	@@ -51,20 +51,29 @@
51	51	<div class="box">
52	52	<p style="font-size:2rem; font-weight:800; margin-bottom:10px">조건 검색과 같이 들어가는 버튼</p>
53	53	<!-- 여기서부터 복사 -->
54		- <div class="flex-between">
55		- <div>
	54	+ <div class="flex justify-between align-center">
	55	+ <div class="flex20">
56	56	<button class="darkg-border-btn small-btn">선택이동</button>
57	57	<button class="darkg-border-btn small-btn">선택복사</button>
58	58	<button class="darkg-border-btn small-btn">선택삭제</button>
59	59	</div>
60		- <div class="flex-end">
61		- <div class="search-bar flex">
62		- <select name="" id="">
63		- <option value="all">전체</option>
64		- </select>
65		- <input type="text" name="" id="">
	60	+ <div class="flex justify-end flex80">
	61	+ <div class="search-bar">
	62	+ <div class="flex justify-end align-center">
	63	+ <input type="date" name="" id="" class="square-date">
	64	+ <span class="coupler">~</span>
	65	+ <input type="date" name="" id="" class="square-date">
	66	+ <select name="" id="" class="square-select">
	67	+ <option value="all">전체</option>
	68	+ </select>
	69	+ <div class="search-square">
	70	+ <input type="text" class="square-input" placeholder="Search">
	71	+ <button class="square-button">
	72	+ <svg-icon type="mdi" :path="searchPath" class="square-icon"></svg-icon>
	73	+ </button>
	74	+ </div>
	75	+ </div>
66	76	</div>
67		- <button class="blue-btn small-btn">검색</button>
68	77	</div>
69	78	</div>
70	79	<table class="list-table">
...	...	@@ -137,7 +146,7 @@
137	146	</tbody>
138	147	</table>
139	148	<!-- 여기서부터 복사 -->
140		- <div class="flex-end">
	149	+ <div class="flex justify-end">
141	150	<button class="darkg-btn small-btn">등록</button>
142	151	</div>
143	152	</div>
...	...	@@ -160,10 +169,10 @@
160	169	<tr>
161	170	<th>생년월일</th>
162	171	<td>
163		- <div class="flex">
164		- <select name="" id=""></select>
165		- <select name="" id=""></select>
166		- <select name="" id=""></select>
	172	+ <div class="flex justify-between">
	173	+ <select name="" id="" class="flex30"></select>
	174	+ <select name="" id="" class="flex30"></select>
	175	+ <select name="" id="" class="flex30"></select>
167	176	</div>
168	177	</td>
169	178	<th>성별</th>
...	...	@@ -174,7 +183,7 @@
174	183	</tbody>
175	184	</table>
176	185	<!-- 여기서부터 복사 -->
177		- <div class="flex-end">
	186	+ <div class="flex justify-end">
178	187	<button class="red-border-btn small-btn">삭제</button>
179	188	<button class="darkg-border-btn small-btn">목록</button>
180	189	<button class="green-border-btn small-btn">수정</button>
...	...	@@ -184,10 +193,12 @@
184	193	</template>
185	194
186	195	<script>
187		-
	196	+import SvgIcon from '@jamescoyle/vue-icon';
	197	+import { mdiMagnify } from '@mdi/js';
188	198	export default {
189	199	data() {
190	200	return {
	201	+ searchPath: mdiMagnify
191	202	}
192	203	},
193	204	methods: {
...	...	@@ -200,6 +211,7 @@
200	211
201	212	},
202	213	components: {
	214	+ 'SvgIcon': SvgIcon
203	215	},
204	216	mounted() {
205	217	}

...	...	@@ -11,7 +11,8 @@
11	11	</select>
12	12	</div>
13	13	</div>
14		- <table class="list-table">
	14	+ <div class="table-zone">
	15	+ <table class="list-table">
15	16	<colgroup>
16	17	<col style="width: ;">
17	18	<col style="width: ;">
...	...	@@ -20,11 +21,11 @@
20	21	</colgroup>
21	22	<thead>
22	23	<tr>
23		- <th>No <button class="tp-btn"><svg-icon type="mdi" :path="settingPath" :color="'#213f99'"></svg-icon></button></th>
24		- <th>user ID <button class="tp-btn"><svg-icon type="mdi" :path="settingPath" :color="'#213f99'"></svg-icon></button></th>
25		- <th>이름 <button class="tp-btn"><svg-icon type="mdi" :path="settingPath" :color="'#213f99'"></svg-icon></button></th>
26		- <th>생년월일 <button class="tp-btn"><svg-icon type="mdi" :path="settingPath" :color="'#213f99'"></svg-icon></button></th>
27		- <th>성별 <button class="tp-btn"><svg-icon type="mdi" :path="settingPath" :color="'#213f99'"></svg-icon></button></th>
	24	+ <th>No <button class="tp-btn"><svg-icon type="mdi" :width="15" :height="15" :path="settingPath" :color="'#213f99'"></svg-icon></button></th>
	25	+ <th>user ID <button class="tp-btn"><svg-icon type="mdi" :width="15" :height="15" :path="settingPath" :color="'#213f99'"></svg-icon></button></th>
	26	+ <th>이름 <button class="tp-btn"><svg-icon type="mdi" :width="15" :height="15" :path="settingPath" :color="'#213f99'"></svg-icon></button></th>
	27	+ <th>생년월일 <button class="tp-btn"><svg-icon type="mdi" :width="15" :height="15" :path="settingPath" :color="'#213f99'"></svg-icon></button></th>
	28	+ <th>성별 <button class="tp-btn"><svg-icon type="mdi" :width="15" :height="15" :path="settingPath" :color="'#213f99'"></svg-icon></button></th>
28	29	</tr>
29	30	</thead>
30	31	<tbody>
...	...	@@ -44,6 +45,7 @@
44	45	</tr>
45	46	</tbody>
46	47	</table>
	48	+ </div>
47	49	</div>
48	50	</template>
49	51

...	...	@@ -1,9 +1,9 @@
1	1	<template>
2	2	<div class="search-bar">
3	3	<div class="flex justify-end align-center">
4		- <input type="date" name="" id="" class="square-date">
	4	+ <input type="date" name="" id="search-date" class="square-date" :class="{ 'date-placeholder': startDate }" data-placeholder="날짜 선택" @change="handleDateChange">
5	5	<span class="coupler">~</span>
6		- <input type="date" name="" id="" class="square-date">
	6	+ <input type="date" name="" id="search-date" class="square-date" :class="{ 'date-placeholder': endDate }" data-placeholder="날짜 선택" @change="handleDateChange">
7	7	<select name="" id="" class="square-select">
8	8	<option value="all">전체</option>
9	9	</select>
...	...	@@ -23,11 +23,19 @@
23	23	export default {
24	24	data() {
25	25	return {
26		- searchPath: mdiMagnify
	26	+ searchPath: mdiMagnify,
	27	+ startDate:true,
	28	+ endDate:true
27	29	}
28	30	},
29	31	methods: {
30		-
	32	+ handleDateChange:function() {
	33	+ if(this.startDate){
	34	+ this.startDate = false
	35	+ }else if(this.endDate){
	36	+ this.endDate = false
	37	+ }
	38	+ }
31	39	},
32	40	watch: {
33	41

...	...	@@ -1,6 +1,7 @@
1	1	<template>
2	2	<div class="table-zone">
3	3	<table class="form-table">
	4	+ <!-- col 꼭 너비 기재해야함! 그래야 100%로 차지함 -->
4	5	<colgroup>
5	6	<col style="width: ;">
6	7	<col style="width: ;">

...	...	@@ -1,6 +1,6 @@
1	1	<template>
2	2	<div class="table-zone">
3		- <div class="flex justify-between align-center">
	3	+ <div class="list-info flex justify-between align-center">
4	4	<div class="count-zone">
5	5	<p>총 <span>40</span>건 중 <span>01</span>건 선택</p>
6	6	</div>
...	...	@@ -12,6 +12,7 @@
12	12	</div>
13	13	</div>
14	14	<table class="list-table">
	15	+ <!-- col 꼭 너비 기재해야함! 그래야 100%로 차지함 -->
15	16	<colgroup>
16	17	<col style="width: ;">
17	18	<col style="width: ;">
...	...	@@ -42,6 +43,9 @@
42	43	<td>1999.01.01</td>
43	44	<td>여</td>
44	45	</tr>
	46	+ <tr v-if="postList === 0">
	47	+ <td colspan="5" class="no-list">검색조건에 해당하는 데이터가 없습니다.</td>
	48	+ </tr>
45	49	</tbody>
46	50	</table>
47	51	</div>

Delete comment