yjryu / KERIS star
류윤주 류윤주 2023-12-05
231205 류윤주 관리자 css 수정 및 모달 수정
@5c54e7574caa3390a647f906b46b24ec5370ebd0
9bcf597
5c54e75
client/resources/css/admin.css
--- client/resources/css/admin.css
+++ client/resources/css/admin.css
@@ -1,3 +1,123 @@
 
+/* 레이아웃 */
 
+/* 헤더 */
 
+header {
 
+  max-width: 100%;
 
+  grid-area: header;
 
+  background: #f9f9f9;
 
+  padding: 20px 30px;
 
+  box-shadow: 0px 3px 10px #eee;
 
+}
 
+
 
+header p.admin-bar {
 
+  padding: 0 15px;
 
+  font-size: 1.5rem;
 
+  font-weight: 500;
 
+}
 
+
 
+.logout-bnt{
 
+  background: transparent;
 
+  border: none;
 
+  border-left: 2px solid #333;
 
+  padding: 0 15px;
 
+  font-size: 1.5rem;
 
+  font-weight: 500;
 
+  font-family: "Pretendard-Regular";
 
+}
 
+/* 메뉴 */
 
+.amain-menu {
 
+  height: 100%;
 
+  grid-area: nav;
 
+  background-color: #3f87f7;
 
+  overflow-y: auto;
 
+  box-shadow: 3px 0 10px #eee;
 
+  z-index: 10000;
 
+  font-family: "SBaggroM";
 
+}
 
+
 
+.amain-menu::-webkit-scrollbar {
 
+  width: 10px;
 
+}
 
+
 
+.amain-menu::-webkit-scrollbar-thumb {
 
+  background-color: #2f3542;
 
+  border-radius: 10px;
 
+  background-clip: padding-box;
 
+  border: 2px solid transparent;
 
+}
 
+
 
+.amain-menu::-webkit-scrollbar-track {
 
+  background-color: grey;
 
+  border-radius: 10px;
 
+  box-shadow: inset 0px 0px 5px white;
 
+}
 
+.logo-wrap .adm-logo{
 
+  padding: 30px;
 
+}
 
+.logo-wrap .adm-logo a {
 
+  display: block;
 
+  font-size: 3rem;
 
+  font-weight: 900;
 
+  color: #fff;
 
+  line-height: 160%;
 
+  font-family: "Pretendard-Regular";
 
+}
 
+.logo-wrap .adm-logo i{
 
+  font-size: 3rem;
 
+  color: #fff;
 
+  display: none;
 
+}
 
+.menu-text {
 
+  padding: 0 10px;
 
+}
 
+
 
+.amain-menu>ul {
 
+  padding: 30px 0 30px 30px;
 
+}
 
+
 
+.amain-menu>ul>li>a,
 
+.aSub-menu>li>a {
 
+  display: block;
 
+  color: #fff;
 
+  padding: 10px 15px;
 
+}
 
+
 
+.amain-menu>ul>li>a {
 
+  font-size: 1.6rem;
 
+  display: flex;
 
+  justify-content: space-between;
 
+  padding: 15px 40px 15px 15px;
 
+}
 
+
 
+.amain-menu>ul>li.active {
 
+  background: #fff;
 
+  border-radius: 10px 0 0 10px;
 
+}
 
+
 
+.amain-menu>ul>li.active>a {
 
+  color: #3f87f7;
 
+}
 
+
 
+.amain-menu>ul>li.active .aSub-menu a {
 
+  color: #aaa;
 
+}
 
+
 
+.aSub-menu {
 
+  overflow: hidden;
 
+  transition: all 0.5s ease-in-out;
 
+}
 
+
 
+.aSub-menu>li>a {
 
+  font-size: 1.3rem;
 
+  padding: 10px 50px;
 
+  color: #fff;
 
+}
 
+
 
+.amain-menu>ul>li.active .aSub-menu a.router-link-active {
 
+  color: #333;
 
+}
 
+
 
+/* 페이지 */
 
+
 
 .top-bar {
 
   margin-bottom: 30px;
 
 }
@@ -747,4 +867,83 @@
 
 }
 
 .file-list-zone{
 
   text-align: left;
 
-}
(No newline at end of file) 
+}
 
+
 
+
 
+/* 관리자 반응형 */
 
+.layout-wrap-small,.layout-wrap-medium{
 
+  width: 100%;
 
+  height: 100%;
 
+}
 
+
 
+.layout-wrap-small .login-box{
 
+  width: 50%;
 
+}
 
+
 
+.layout-wrap-small .login-box .logo{
 
+  margin-bottom: 30px;
 
+}
 
+
 
+.layout-wrap-small .login-box .logo h1{
 
+  font-size: 2rem;
 
+}
 
+
 
+.layout-wrap-small .login-box .logo p{
 
+  font-size: 1.6rem;
 
+}
 
+
 
+.layout-wrap-small .logo-wrap .adm-logo i{
 
+  display: block;
 
+}
 
+
 
+.layout-wrap-small .amain-menu{
 
+  height: auto;
 
+}
 
+.layout-wrap-small  .amain-menu>ul{
 
+  max-height: 0;
 
+  overflow: hidden;
 
+  padding: 0px 0 0px 30px;
 
+  transition:all 0.3s ease-in-out;
 
+}
 
+
 
+.layout-wrap-small  .amain-menu>ul.active{
 
+  max-height: fit-content;
 
+  overflow: visible;
 
+  padding: 30px 0 30px 30px
 
+}
 
+.layout-wrap-small .content-box{
 
+  padding: 30px;
 
+}
 
+.layout-wrap-small .content-wrap{
 
+  grid-template-columns: 1fr;
 
+}
 
+
 
+.layout-wrap-small .dashboard .combine{
 
+  grid-column: auto;
 
+}
 
+.layout-wrap-small .menu-grid{
 
+  grid-template-columns: repeat(2,1fr);
 
+}
 
+
 
+
 
+.layout-wrap-small  .news-list{
 
+  grid-template-columns: repeat(3,1fr);
 
+}
 
+
 
+.layout-wrap-small .top-bar > div{
 
+  flex-direction:column-reverse;
 
+}
 
+
 
+.layout-wrap-small .top-bar .category-bar{
 
+  flex-direction: initial;
 
+  padding: 30px 0;
 
+}
 
+
 
+.layout-wrap-small .user-grid,
 
+.layout-wrap-small .company-grid{
 
+  grid-template-columns:1fr
 
+}
 
+
 
+.layout-wrap-small .modal-container{
 
+  width: 65%;
 
+}
9bcf597
5c54e75
client/resources/css/common.css
--- client/resources/css/common.css
+++ client/resources/css/common.css
@@ -381,6 +381,12 @@
 
   max-width: 896px;
 
 }
 
 
+.modal-content-monthly {
 
+  width: 100%;
 
+  overflow-y: auto;
 
+  padding: 30px 0;
 
+}
 
+
 
 .mail-modal{
 
   width: 50%;
 
   max-width: 896px;
@@ -388,12 +394,14 @@
 
 
 .admin-alert{
 
   width: 50%;
 
-  max-width: 500px;
 
+  max-width: 450px;
 
 }
 
-
 
+.alert-modal{
 
+  padding: 15px 0;
 
+}
 
 .alert-modal > p{
 
   text-align: center;
 
-  font-size: 2rem;
 
+  font-size: 1.7rem;
 
 }
 
 
 .modal-title {
@@ -402,11 +410,6 @@
 
   padding: 10px 0;
 
 }
 
 
-.modal-content-monthly {
 
-  width: 100%;
 
-  overflow-y: auto;
 
-  padding: 30px 0;
 
-}
 
 
 .modal-end {
 
   width: 100%;
9bcf597
5c54e75
client/views/layout/AdminHeader.vue
--- client/views/layout/AdminHeader.vue
+++ client/views/layout/AdminHeader.vue
@@ -47,29 +47,3 @@
 
     },
 
 };
 
 </script>
 
-
 
-<style scoped>
 
-header {
 
-    max-width: 100%;
 
-    grid-area: header;
 
-    background: #f9f9f9;
 
-    padding: 20px 30px;
 
-    box-shadow: 0px 3px 10px #eee;
 
-}
 
-
 
-header p.admin-bar {
 
-    padding: 0 15px;
 
-    font-size: 1.5rem;
 
-    font-weight: 500;
 
-}
 
-
 
-.logout-bnt{
 
-    background: transparent;
 
-    border: none;
 
-    border-left: 2px solid #333;
 
-    padding: 0 15px;
 
-    font-size: 1.5rem;
 
-    font-weight: 500;
 
-    font-family: "Pretendard-Regular";
 
-}
 
-</style>
9bcf597
5c54e75
client/views/layout/AdminMenu.vue
--- client/views/layout/AdminMenu.vue
+++ client/views/layout/AdminMenu.vue
@@ -1,16 +1,20 @@
 
 <template>
 
-  <nav class="main-menu">
 
+  <nav class="amain-menu">
 
     <div class="logo-wrap">
 
-      <h1 class="adm-logo"><router-link to="/adm.page">AI 디지털교과서<br />통합지원센터</router-link></h1>
 
+      <div class="flex adm-logo">
 
+        <h1><router-link to="/adm.page">AI 디지털교과서<br />통합지원센터</router-link></h1>
 
+        <i class="fa-solid fa-bars" @click="mobileToggle"></i>
 
+      </div>
 
     </div>
 
-    <ul>
 
+
 
+    <ul :class="mobileClass">
 
       <li v-for="(menu, index) in menuList" :key="index" @click="toggleMenu(menu)" :class="{ 'active': menu.isActive }">
 
         <router-link :to="menu.path">
 
           <p><span v-html="menu.icon"></span><span class="menu-text">{{ menu.pathName }}</span></p>
 
           <p v-html="menu.icon2"></p>
 
         </router-link>
 
         <ul v-if="menu.subMenu" class="aSub-menu" :style="{ 'max-height': menu.isOpen ? '360px' : '0' }">
 
-          <li v-for="(subMenu, subIndex) in menu.subMenu" :key="subIndex" @click=" toggleSubMenu($event,menu, subMenu)" >
 
+          <li v-for="(subMenu, subIndex) in menu.subMenu" :key="subIndex" @click=" toggleSubMenu($event, menu, subMenu)">
 
             <router-link :to="subMenu.path">{{ subMenu.pathName }}</router-link>
 
           </li>
 
         </ul>
@@ -50,6 +54,7 @@
 
         { path: "/adm/userSelectList.page", pathName: "사용자관리", icon: '<i class="fa-regular fa-circle-user"></i>', isActive: false },
 
         { path: "/adm/subscribe.page", pathName: "구독서비스", icon: '<i class="fa-regular fa-bell"></i>', isActive: false },
 
       ],
 
+      mobileClass: '',
 
     };
 
   },
 
   methods: {
@@ -58,20 +63,18 @@
 
       this.menuList.forEach((item) => {
 
         if (item !== menu) {
 
           item.isActive = false;
 
-          if (item.subMenu) {
 
-            menu.isOpen = !menu.isOpen;
 
-            if (menu.isOpen) {
 
-              menu.icon2 = "<i class='fa-solid fa-angle-down'></i>";
 
-            } else {
 
-              menu.icon2 = "<i class='fa-solid fa-angle-right'></i>";
 
-            }
 
-            // item.subMenu.forEach((sub) => {
 
-            //   sub.isActive = false
 
-            // })
 
-          }
 
         }
 
       });
 
+
 
       menu.isActive = true;
 
+      if (menu.subMenu) {
 
+        menu.isOpen = !menu.isOpen;  // 클릭한 메뉴의 서브 메뉴 isOpen을 토글
 
+        if (menu.isOpen) {
 
+          menu.icon2 = "<i class='fa-solid fa-angle-down'></i>";  // isOpen이 true인 경우 아이콘 변경
 
+        } else {
 
+          menu.icon2 = "<i class='fa-solid fa-angle-right'></i>";  // isOpen이 false인 경우 아이콘 변경
 
+        }
 
+      }
 
     },
 
     toggleSubMenu(event, menu, subMenu) {
 
       event.stopPropagation();
@@ -96,6 +99,13 @@
 
           }
 
         }
 
       });
 
+    },
 
+    mobileToggle() {
 
+      if (this.mobileClass === '') {
 
+        this.mobileClass = 'active';
 
+      } else {
 
+        this.mobileClass = '';
 
+      }
 
     },
 
     // url에 따른 메뉴
 
     // updateActiveMenu(currentPath) {
@@ -127,92 +137,3 @@
 
   },
 
 };
 
 </script>
 
-
 
-<style scoped>
 
-.main-menu {
 
-  height: 100%;
 
-  grid-area: nav;
 
-  background-color: #3f87f7;
 
-  overflow-y: auto;
 
-  box-shadow: 3px 0 10px #eee;
 
-  z-index: 10000;
 
-  font-family: "SBaggroM";
 
-}
 
-
 
-.main-menu::-webkit-scrollbar {
 
-  width: 10px;
 
-}
 
-
 
-.main-menu::-webkit-scrollbar-thumb {
 
-  background-color: #2f3542;
 
-  border-radius: 10px;
 
-  background-clip: padding-box;
 
-  border: 2px solid transparent;
 
-}
 
-
 
-.main-menu::-webkit-scrollbar-track {
 
-  background-color: grey;
 
-  border-radius: 10px;
 
-  box-shadow: inset 0px 0px 5px white;
 
-}
 
-
 
-.logo-wrap h1.adm-logo a {
 
-  display: block;
 
-  font-size: 3rem;
 
-  font-weight: 900;
 
-  color: #fff;
 
-  padding: 30px;
 
-  line-height: 160%;
 
-  font-family: "Pretendard-Regular";
 
-}
 
-
 
-.menu-text {
 
-  padding: 0 10px;
 
-}
 
-
 
-.main-menu>ul {
 
-  padding: 30px 0 30px 30px;
 
-}
 
-
 
-.main-menu>ul>li>a,
 
-.aSub-menu>li>a {
 
-  display: block;
 
-  color: #fff;
 
-  padding: 10px 15px;
 
-}
 
-
 
-.main-menu>ul>li>a {
 
-  font-size: 1.6rem;
 
-  display: flex;
 
-  justify-content: space-between;
 
-  padding: 15px 40px 15px 15px;
 
-}
 
-
 
-.main-menu>ul>li.active {
 
-  background: #fff;
 
-  border-radius: 10px 0 0 10px;
 
-}
 
-
 
-.main-menu>ul>li.active>a {
 
-  color: #3f87f7;
 
-}
 
-
 
-.main-menu>ul>li.active .aSub-menu a {
 
-  color: #aaa;
 
-}
 
-
 
-.aSub-menu {
 
-  overflow: hidden;
 
-  transition: all 0.5s ease-in-out;
 
-}
 
-
 
-.aSub-menu>li>a {
 
-  font-size: 1.3rem;
 
-  padding: 10px 50px;
 
-  color: #fff;
 
-}
 
-
 
-.main-menu>ul>li.active .aSub-menu a.router-link-active {
 
-  color: #333;
 
-}
 
-</style>
9bcf597
5c54e75
client/views/pages/App.vue
--- client/views/pages/App.vue
+++ client/views/pages/App.vue
@@ -17,7 +17,7 @@
 
       <Footer></Footer>
 
    </div>
 
    <div v-if="isModalOpen" class="modal-wrapper">
 
-      <div class="modal-container">
 
+      <div class="modal-container admin-alert">
 
          <p class="modal-text">
 
             해당글은 정회원에게 공개된 게시물 입니다.<br />
 
             (준회원은 가입 승인 이후 열람 가능하며,<br />
@@ -295,4 +295,6 @@
 
    justify-content: center;
 
    align-items: center;
 
 }
 
+
 
+
 
 </style>
9bcf597
5c54e75
client/views/pages/user/networking/Matching.vue
--- client/views/pages/user/networking/Matching.vue
+++ client/views/pages/user/networking/Matching.vue
@@ -103,6 +103,25 @@
 
             </div>
 
         </section>
 
     </div>
 
+    <div v-show="isModalOpen" class="modal-wrapper">
 
+        <div class="modal-container admin-alert">
 
+            <div v-show="modalType == 'duplication'" class="modal-content-monthly alert-modal">
 
+                <p>비회원은 해당 기능을 이용하실 수 없습니다.</p>
 
+            </div>
 
+            <div v-show="modalType == 'alert'" class="modal-content-monthly alert-modal">
 
+                <p>가입 승인 중 입니다.<br />해당 기능을 이용하실 수 없습니다.</p>
 
+            </div>
 
+            <div v-show="modalType == 'save'" class="modal-content-monthly alert-modal">
 
+                <p>일반 회원은 해당 기능을 이용하실 수 없습니다.</p>
 
+            </div>
 
+            <div v-show="modalType == 'me'" class="modal-content-monthly alert-modal">
 
+                <p>자신의 기업에는 PICK을 할 수 없습니다.</p>
 
+            </div>
 
+            <div class="modal-end">
 
+                <button class="blue-btn small-btn" @click="closeModal">확인</button>
 
+            </div>
 
+        </div>
 
+    </div>
 
 </template>
 
 
 <script>
@@ -133,9 +152,18 @@
 
             store: useStore(),
 
             // 필터링을 위한 키워드
 
             keywords: [],
 
+            isModalOpen:false,
 
+            modalType: null
 
         }
 
     },
 
     methods: {
 
+        openModal: function () {
 
+            this.isModalOpen = true;
 
+        },
 
+        closeModal: function () {
 
+            this.modalType = null;
 
+            this.isModalOpen = false;
 
+        },
 
         companySelectList: function () {
 
             const vm = this;
 
             console.log("vm.selectedKeywords",vm.companyListSearch.selectedKeywords)
@@ -170,18 +198,18 @@
 
         pickModal: function (item) {
 
             const isUserLogin = this.store.state.loginUser;
 
             if (isUserLogin === null) {
 
-                alert("비회원은 해당 기능을 이용하실 수 없습니다.")
 
+                this.modalType = 'duplication';
 
             } else if (isUserLogin.create_account_approval === 'N' && isUserLogin.user_auth === 'company') {
 
-                alert("가입 승인 중 입니다. 해당 기능을 이용하실 수 없습니다.")
 
+                this.modalType = 'alert';
 
             } else if (isUserLogin.user_auth === 'common') {
 
-                alert("일반 회원은 해당 기능을 이용하실 수 없습니다.")
 
+                this.modalType = 'save';
 
             } else if (isUserLogin.create_account_approval === 'Y' && isUserLogin.user_auth === 'company') {
 
                 if (this.userCompanyId != item.company_id) {
 
                     if (confirm(item.company_nm + "에게 PICK 신청을 하시겠습니까?")) {
 
                         this.pick(item)
 
                     }
 
                 } else {
 
-                    alert("자신의 기업에는 PICK을 할 수 없습니다.")
 
+                    this.modalType = 'me';
 
                 }
 
             }
 
         },
@@ -277,7 +305,12 @@
 
         },
 
     },
 
     watch: {
 
-
 
+        "modalType": function (newValue, oldValue) {
 
+            if (this.modalType != null) {
 
+                console.log("modalType watch: ", newValue, oldValue);
 
+                this.openModal();
 
+            }
 
+        },
 
     },
 
     computed: {
9bcf597
5c54e75
client/views/pages/user/networking/MatchingOne.vue
--- client/views/pages/user/networking/MatchingOne.vue
+++ client/views/pages/user/networking/MatchingOne.vue
@@ -116,6 +116,26 @@
 
         </div>
 
       
     </div>
 
+
 
+    <div v-show="isModalOpen" class="modal-wrapper">
 
+        <div class="modal-container admin-alert">
 
+            <div v-show="modalType == 'duplication'" class="modal-content-monthly alert-modal">
 
+                <p>비회원은 해당 기능을 이용하실 수 없습니다.</p>
 
+            </div>
 
+            <div v-show="modalType == 'alert'" class="modal-content-monthly alert-modal">
 
+                <p>가입 승인 중 입니다.<br />해당 기능을 이용하실 수 없습니다.</p>
 
+            </div>
 
+            <div v-show="modalType == 'save'" class="modal-content-monthly alert-modal">
 
+                <p>일반 회원은 해당 기능을 이용하실 수 없습니다.</p>
 
+            </div>
 
+            <div v-show="modalType == 'me'" class="modal-content-monthly alert-modal">
 
+                <p>자신의 기업에는 PICK을 할 수 없습니다.</p>
 
+            </div>
 
+            <div class="modal-end">
 
+                <button class="blue-btn small-btn" @click="closeModal">확인</button>
 
+            </div>
 
+        </div>
 
+    </div>
 
 </template>
 
 
 <script>
@@ -163,9 +183,18 @@
 
             ],
 
             route: useRoute(),
 
             store: useStore(),
 
+            isModalOpen:false,
 
+            modalType: null
 
         }
 
     },
 
     methods: {
 
+        openModal: function () {
 
+            this.isModalOpen = true;
 
+        },
 
+        closeModal: function () {
 
+            this.modalType = null;
 
+            this.isModalOpen = false;
 
+        },
 
 
         companySelectOne: function () {
 
             const vm = this;
@@ -282,22 +311,20 @@
 
             const isUserLogin = this.store.state.loginUser;
 
             console.log(isUserLogin);
 
             if (isUserLogin === null) {
 
-                alert("비회원은 해당 기능을 이용하실 수 없습니다.")
 
+                this.modalType = 'duplication';
 
             } else if (isUserLogin.create_account_approval === 'N' && isUserLogin.user_auth === 'company') {
 
-                alert("가입 승인 중 입니다. 해당 기능을 이용하실 수 없습니다.")
 
+                this.modalType = 'alert';
 
             } else if (isUserLogin.user_auth === 'common') {
 
-                alert("일반 회원은 해당 기능을 이용하실 수 없습니다.")
 
+                this.modalType = 'save';
 
             } else if (isUserLogin.create_account_approval === 'Y' && isUserLogin.user_auth === 'company') {
 
                 if (this.userCompanyId != this.company.company_id) {
 
                     if (confirm(this.company.company_nm + "에 PICK 신청을 하시겠습니까?")) {
 
                         this.pick()
 
                     }
 
                 } else {
 
-                    alert("자신의 기업에는 PICK을 할 수 없습니다.")
 
+                    this.modalType = 'me';
 
                 }
 
             }
 
-
 
-
 
 
         },
@@ -384,7 +411,13 @@
 
             this.getViewer(nuwValue.company_info, 'viewer1');
 
             this.getViewer(nuwValue.company_service, 'viewer2');
 
             this.getViewer(nuwValue.company_technology, 'viewer3');
 
-        }
 
+        },
 
+        "modalType": function (newValue, oldValue) {
 
+            if (this.modalType != null) {
 
+                console.log("modalType watch: ", newValue, oldValue);
 
+                this.openModal();
 
+            }
 
+        },
 
     },
 
     computed: {
Add a comment
List