Commit @9e27a44eefa79640e0ea4a19ebffba386760988e

최정임 03-25

250325 최정임 카테고리, 회원관리 페이지 퍼블

@9e27a44eefa79640e0ea4a19ebffba386760988e

3974f71

9e27a44

client/resources/css/common/common.css

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

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


 *{
     padding: 0; margin: 0;  color: #000;
-    font-family: "Pretendard-R";
+    font-family: "Pretendard-R"; box-sizing: border-box;
 }
 html{font-size: 10px;}
 

     background-color: #f6f6f6 !important; 
     color: #999;
 }
-
-
+select:focus {border: 0;}
+textarea{resize: none;}
 
 
 .w130{width: 130px;}

     padding: 15px 30px;
     border-radius: 10px;
     font-size: 20px;
-    &.signout{
+   
+}
+.btn-group-small .button{
+    padding: 10px 25px;
+    border-radius: 5px;
+    font-size: 16px;
+    font-family: "Pretendard-M";
+    cursor: pointer;
+    p{
+        font-size: 16px;
+    font-family: "Pretendard-M";
+    }
+}
+
+.button{
+    &.red-line{
         border: 1px solid #ce3e48;
         color: #ce3e48;
     }
-    &.delete{
-        border: 1px solid #ce3e48;
-        color: #ce3e48;
-    }
-    &.update{
+    &.blue-line{
         border: 1px solid #275cbd;
         color: #275cbd;
     }
-    &.list{
+    &.blue-line-bg{
+        border: 1px solid #007ac3;
+        background-color: #eff5f9;
+        color: #0271b3;
+        p{
+            color: #0271b3;
+        }
+    }
+    &.green-line{
+        border: 1px solid #32b31d;
+        color: #2d9b1b;
+    }
+    &.gray-line{
+        border: 1px solid #636364;
+        color: #000;
+    }
+    &.gray-bg{
+        background-color: #636364;
+        color: #fff;
+    }
+    &.gray-line-bg{
         border: 1px solid #636364;
         background-color: #f9f9f9;
         color: #000;
     }
-}
+    &.pink-line-bg{
+        border: 1px solid #a5067b;
+        background-color: #f7ebf4;
+        color: #a5067b;
+        p{
+            color: #a5067b;
+        }
+    }
+}

3974f71

9e27a44

client/resources/css/user/sub.css

--- client/resources/css/user/sub.css

+++ client/resources/css/user/sub.css


         font-size: 18px;
     }
 
-        
+
     /* pagination */
-    .pagination{
-        button{
+    .pagination {
+        button {
             width: 40px;
             height: 40px;
             margin: 0 4px;

             background-color: #fff;
             border-radius: 50px;
         }
-        button.page-number{
+
+        button.page-number {
             font-size: 20px;
             color: #555555;
             width: 40px;

             background-color: #f0f1f4;
             border-radius: 50px;
         }
-        button.page-number.clicked{
+
+        button.page-number.clicked {
             background-color: #ce3e48;
             color: #fff;
         }
-        .anticon{
-            svg{
+
+        .anticon {
+            svg {
                 font-size: 17px;
-                path{
+
+                path {
                     color: #636364;
                 }
             }
-            
-        
+
+
         }
     }
-    
-    
+
+
 
 }
 

         width: 130px;
         background-color: #ce3e48;
         color: #fff;
-        a{
+
+        a {
             color: #fff;
         }
     }

     border-radius: 20px;
 
     input {
-        padding: 15px;
+        padding: 0 15px;
+        height: 50px;
         border: 1px solid #dddddd;
         border-radius: 5px;
         font-size: 16px;

     dd {
         display: flex;
         align-items: center;
-        p{font-size: 20px;     font-family: "Pretendard-L"; line-height: 30px;}
-        span{font-size: 20px;     font-family: "Pretendard-SB";}
+
+        p {
+            font-size: 20px;
+            font-family: "Pretendard-L";
+            line-height: 30px;
+        }
+
+        span {
+            font-size: 20px;
+            font-family: "Pretendard-SB";
+        }
     }
 
     label {

         display: flex;
         justify-content: space-between;
         margin-bottom: 10px;
-      }
+    }
 
     li {
         width: fit-content;

             color: #a5067b;
             border: 1px solid #a5067b;
         }
-        
+
         &:nth-child(even) {
             color: #007ac3;
             border: 1px solid #007ac3;

     }
 }
 
-.info-form{
-    dd{
-        img{margin-right: 17px;}
-        span{width: 118px;}
+.info-form {
+    dd {
+        img {
+            margin-right: 17px;
+        }
+
+        span {
+            width: 118px;
+        }
     }
 }
 

                 width: 180px;
                 flex-shrink: 0;
             }
+
             input[type="text"] {
                 background-color: #f6f6f6;
                 border: 0;

     }
 
 
-    
+
 
 }
+.select-box {
+    width: 106px;
+    height: 30px;
+    border: 1px solid #cccccc;
+    border-radius: 5px;
+    flex-shrink: 0;
+    padding: 0 10px;
+    line-height: 30px;
+    margin-left: 30px;
 
-.search-result {
-    .select-box{
+    select {
         width: 106px;
-        border: 1px solid #cccccc;
-        border-radius: 5px;
-        flex-shrink: 0;
-        padding: 10px;
-        margin-left: 30px;
-        select {
-            border: 0;
-            font-size: 14px;
-        }
+        border: 0;
+        font-size: 14px;
     }
+}
+.search-result {
     
+
 
     .resultext {
         .main-img {

         border-radius: 24px;
         padding: 30px;
 
-        
+
     }
+
     .text-box {
 
         p,

             }
         }
     }
-    .tabs{
-        .tab-box{display: flex;
+
+    .tabs {
+        .tab-box {
+            display: flex;
             justify-content: end;
             gap: 25px;
         }
-        .tab-title{
+
+        .tab-title {
             display: flex;
             align-items: center;
             gap: 13px;
-            p{
+
+            p {
                 cursor: pointer;
                 font-family: "HAPPINESS-SANS-REGULAR";
                 color: #cccccc;
                 font-size: 17px;
-                b{
+
+                b {
                     color: #cccccc;
                 }
             }
-           
+
         }
-        .tab-title.active p{
+
+        .tab-title.active p {
             color: #000;
-            
-            b{
+
+            b {
                 color: #ff4141;
-                
+
             }
-            
+
         }
-        .tab-content{
-            .content-wrap{
+
+        .tab-content {
+            .content-wrap {
                 margin-top: -23px;
             }
-            .box-wrap{
+
+            .box-wrap {
                 width: 454px;
                 height: 370px;
-                .box { 
-                    background-image: linear-gradient(#fff, #fff), 
-                    linear-gradient(-45deg, #fff, #fff);
+
+                .box {
+                    background-image: linear-gradient(#fff, #fff),
+                        linear-gradient(-45deg, #fff, #fff);
                     background-origin: border-box;
                     background-clip: content-box, border-box;
                     border: 3px solid transparent;
                     border-radius: 32px;
                 }
-            
+
                 .box:hover {
-                    background-image: linear-gradient(#fff, #fff), 
-                    linear-gradient(-45deg, #ca3e49, #3d355d);
+                    background-image: linear-gradient(#fff, #fff),
+                        linear-gradient(-45deg, #ca3e49, #3d355d);
                 }
-                .tab-image{
+
+                .tab-image {
                     width: 100%;
                     height: 297px;
                     object-fit: cover;
                     border-radius: 30px;
                 }
-               
+
             }
-            
+
         }
-    
+
     }
-    .list-wrap{
+
+    .list-wrap {
         border-top: 2px solid #000;
-        &>li{
+
+        &>li {
             border-bottom: 2px solid #eeeeee;
             padding: 30px 10px;
         }

 
 .modal-content {
     background-color: #fff;
-    padding: 50px 35px; 
+    padding: 50px 35px;
     border-radius: 8px;
     max-width: 1000px;
     width: 100%;

         font-family: "Pretendard-B";
         font-size: 30px;
     }
-    .modal-search{
+
+    .modal-search {
         padding: 13px;
         background-color: rgba(0, 61, 97, 0.05);
         border-radius: 10px;
-        input{
+
+        input {
             padding: 0px 20px;
             background-color: #fff;
-            border-radius:5px;
+            border-radius: 5px;
             width: 300px;
             height: 45px;
             font-size: 16px;
             margin-right: 5px;
         }
-        .search-btn{
+
+        .search-btn {
             display: flex;
             align-items: center;
             justify-content: center;

             height: 45px;
             gap: 5px;
             border-radius: 5px;
-            p{
+
+            p {
                 font-size: 16px;
                 color: #fff;
                 font-family: "Pretendard-SB";

         border: none;
         border-radius: 50px;
     }
-    button.closebtn{font-size: 20px;}
+
+    button.closebtn {
+        font-size: 20px;
+    }
+
     button:hover {
         background-color: #0056b3;
     }
-    .register-b{
+
+    .register-b {
         width: 110px;
         height: 40px;
         font-size: 18px;

         color: #fff;
         font-family: "Pretendard-M";
     }
-    
+
 }
 
 
 /* 사진기록물 상세페이지 */
-.gallery-form{
+.gallery-form {
     border: 0;
-    dl{
+
+    dl {
         padding: 30px 0 0 0;
         border-top: 2px solid #000;
-        dd{
+
+        dd {
             position: relative;
             background: #f6f6f6;
             padding: 25px 0px;
-            p{flex: 1; font-size: 35px; text-align: center; font-family: "Pretendard-B"}
-            .date{
+
+            p {
+                flex: 1;
+                font-size: 35px;
+                text-align: center;
+                font-family: "Pretendard-B"
+            }
+
+            .date {
                 position: absolute;
                 right: 30px;
-                span{ font-family: "Pretendard-R"; font-size: 18px;}
-                img{
-                    
+
+                span {
+                    font-family: "Pretendard-R";
+                    font-size: 18px;
+                }
+
+                img {
+
                     object-fit: contain;
                     margin-right: 10px;
                 }
 
             }
-           
-           
+
+
         }
-    
+
     }
-    .gallery{
+
+    .gallery {
         margin-bottom: 107px;
         position: relative;
-        .main-swiper{
-            .swiper{
+
+        .main-swiper {
+            .swiper {
                 width: 100%;
-                .swiper-slide{
-                    img{
+
+                .swiper-slide {
+                    img {
                         height: 800px;
                         width: 100%;
                         object-fit: contain;
                         background-color: #ddd;
                     }
                 }
-               
+
             }
         }
-        .thumbnail{
+
+        .thumbnail {
             width: 1127px;
             padding: 30px 0px;
-                background-color: #fff;
-                border-radius: 90px;
-                position: absolute;
-                z-index: 1;
-                left: 50%;
+            background-color: #fff;
+            border-radius: 90px;
+            position: absolute;
+            z-index: 1;
+            left: 50%;
             transform: translateX(-50%);
             bottom: -10%;
-            box-shadow:1px 2px 19px 1px rgba(0, 0, 0, 0.04);
-            .swiper{
-                width:940px;
+            box-shadow: 1px 2px 19px 1px rgba(0, 0, 0, 0.04);
+
+            .swiper {
+                width: 940px;
                 position: initial;
                 height: 120px;
                 margin: 0 auto;
-                .swiper-wrapper{
+
+                .swiper-wrapper {
                     margin: 0;
                 }
+
                 .swiper-slide img {
                     width: -webkit-fill-available;
                 }
-    
+
             }
         }
-        .swiper-button-prev, .swiper-button-next{
-            box-shadow: none ;
+
+        .swiper-button-prev,
+        .swiper-button-next {
+            box-shadow: none;
             margin-top: -35px;
         }
-        .swiper-button-prev{left: 20px;}
-        .swiper-button-next{right: 20px;}
-        
+
+        .swiper-button-prev {
+            left: 20px;
+        }
+
+        .swiper-button-next {
+            right: 20px;
+        }
+
     }
-    .btn-group{
+
+    .info-form {
+        background-image: linear-gradient(#fff, #fff), linear-gradient(-45deg, #ca3e49, #3f355c);
+        background-origin: border-box;
+        background-clip: content-box, border-box;
+        border: 3px solid transparent;
+        border-radius: 32px;
+
+        dd {
+            background-color: transparent;
+
+            p {
+                font-size: 20px;
+                text-align: left;
+                font-family: "Pretendard-L";
+            }
+        }
+    }
+
+    .btn-group {
         margin-top: 24px;
         text-align: center;
-        button{
+
+        button {
             width: 160px;
             height: 46px;
             font-family: "Pretendard-B";

             text-align: left;
             margin: 0 5px;
         }
-        .select-down{
+
+        .select-down {
             background-image: url(../../images/downbtn_border.png);
         }
-        .all-down{
+
+        .all-down {
             background-image: url(../../images/downbtn_bg.png);
             color: #fff;
         }
-    } 
-    
-   
+    }
+
+
 }
 
+/* 회원관리,  카테고리 관리 */
+.management{
+    .left-con{width: 350px; margin-right: 55px;}
 
+    .search-area{
+        gap: 5px;
+        padding: 0;
+        height: 40px;
+    }
+    .search-wrap{
+        
+        position: initial;
+        transform: none;
+        
+        input{
+            width: 100%;
+            height: 100%;
+            border: 1px solid #000;
+            border-radius: 5px;
+        }
+        .select-box {
+            border-color: #000;
+            width: 100px;
+            height: 100%;
+            select{width: 100%; color: #000; }
+        }
+        .search-btn{
+            position: relative;
+            flex-shrink: 0;
+            width: 40px;
+            height: 40px;
+            background-color: #000;
+            border-radius: 5px;
+            img{
+                position: absolute;
+                left: 50%;
+                right: 50%;
+                transform: translateX(-50%) translateY(-50%);
+            }
+           
+        }
+    }
+    .btn-group-small{
+        gap: 5px;
+        .button{
+            &.flex{
+                img{text-align: left; margin-right: 10px;}
+                p{text-align: center;}
+            }
+        }
+    }
+    .select-box {
+        width: 230px;
+        height: 50px;
+        border: 1px solid #ddd;
+        padding: 0 15px;
+        margin: 0;
+        select {
+            width: 100%;
+            height: 100%;
+            font-size: 16px;
+            color: #999999; 
+        }
+    }
+    .switch{
+        label{margin-top: -12px;}
+    }
+    table{
+        border-radius: 10px;
+        overflow: hidden;
+        
+        thead{
+            background-color: #636364;
+            th{color: #fff; border: 1px solid #eee;}
+        }
+        td{border: 1px solid #eee; text-align: center;}
+        tr:hover td{
+            background-color: #007ac3;
+    overflow: hidden;
+    width: 100%;
+    border: 2px solid transparent; /* Set a transparent border first */
+    border-image: linear-gradient(-45deg, #ce3e48, #3f355c) 1;
+        }
+    }
+    .delete-member {
+        background-color: #f5f8f9; 
+        td{
+            color: #aaaaaa;
+            
+        }
+      }
+      textarea{border-color: #ddd;}
+}
 
 
 

     /* Change the label color when checkbox is checked */
 }
 
-input[type="checkbox"]+label, input[type='radio']+label {
+input[type="checkbox"]+label,
+input[type='radio']+label {
     font-size: 17px;
     font-family: "Pretendard-L";
 }

     /*라인*/
 }
 
+.switch {
+    input[type="checkbox"] {
+        height: 0;
+        width: 0;
+        visibility: hidden;
+    }
+
+    label {
+        cursor: pointer;
+        text-indent: -9999px;
+        width: 65px;
+        height: 28px;
+        background: #544483;
+        display: block;
+        border-radius: 100px;
+        position: relative;
+        transition: background-color 0.3s ease; /* Added smooth transition for background */
+    }
+
+    label:after {
+        content: '';
+        position: absolute;
+        top: 4px;
+        left: 5px;
+        width: 20px;
+        height: 20px;
+        background: #fff;
+        border-radius: 50%;
+        transition: left 0.3s ease, transform 0.3s ease; /* Smooth transition for the toggle ball */
+    }
+
+    /* When the input is checked */
+    input:checked + label {
+        background: #787878; /* Color when active */
+    }
+
+    input:checked + label:after {
+        left: calc(100% - 5px);
+        transform: translateX(-100%); /* Keeps the ball moving smoothly */
+    }
+
+    /* Optional: Make the toggle ball slightly larger during the click for a better effect */
+    label:active:after {
+        width: 20px; /* Slightly increase the ball size */
+        height: 20px;
+    }
+}
+
+
 
 
 /* table*/
-table{
+table {
     width: 100%;
     border-collapse: collapse;
     border-top: 2px solid #000;
 }
-thead{background-color: #f6f6f6;}
-th{
+
+thead {
+    background-color: #f6f6f6;
+}
+
+th {
     font-family: "Pretendard-SB";
     font-size: 18px;
 }
-tbody tr{
+
+tbody tr {
     border-bottom: 1px solid #eeeeee;
-    td{
+
+    td {
         font-size: 16px;
         font-family: "Pretendard-L";
     }
 }
-td, th{padding: 10px 0; }
+
+td,
+th {
+    padding: 10px 0;
+}

9e27a44

client/resources/images/checkbox_blue.png (Binary) (added)

+++ client/resources/images/checkbox_blue.png

Binary file is not shown

9e27a44

client/resources/images/checkbox_pink.png (Binary) (added)

+++ client/resources/images/checkbox_pink.png

Binary file is not shown

9e27a44

client/resources/images/img7.png (Binary) (added)

+++ client/resources/images/img7.png

Binary file is not shown

3974f71

9e27a44

client/views/layout/Header.vue

--- client/views/layout/Header.vue

+++ client/views/layout/Header.vue


                 <nav>
                     <ul>
                         <li v-if="$store.state.roles[0]?.authority === 'ROLE_ADMIN'"
-                            @click="updateMenuStats('MENU_00000001')">기록물</li>
+                            @click="updateMenuStats('MENU_00000001')"><router-link :to="{ path: '/' }" >기록물</router-link></li>
                         <li v-if="$store.state.roles[0]?.authority === 'ROLE_ADMIN'"
-                            @click="updateMenuStats('MENU_00000004')">언론에서 바라본 구미시</li>
+                            @click="updateMenuStats('MENU_00000004')"><router-link :to="{ path: '/' }" >언론에서 바라본 구미시</router-link></li>
                         <li v-if="$store.state.roles[0]?.authority === 'ROLE_ADMIN'"
-                            @click="updateMenuStats('MENU_00000007')">회원관리</li>
+                            @click="updateMenuStats('MENU_00000007')"><router-link :to="{ path: '/MemberManagement.page' }" >회원관리</router-link></li>
                         <li v-if="$store.state.roles[0]?.authority === 'ROLE_ADMIN'"
-                            @click="updateMenuStats('MENU_00000008')">카테고리 관리</li>
+                            @click="updateMenuStats('MENU_00000008')"><router-link :to="{ path: '/CategoryManagement.page' }" >카테고리 관리</router-link></li>
 
                         <li v-if="$store.state.roles[0]?.authority === 'ROLE_USER'"
                             @click="updateMenuStats('MENU_00000001')">기록물</li>

                     this.$store.commit('setStoreReset'); // 오류가 있어도 스토어는 초기화
                     this.$router.push({ path: '/Login.page' }); // 로그인 페이지로 리다이렉트
                 });
-        }
+        },
+        
     },
     watch: {},
     computed: {},

3974f71

9e27a44

client/views/pages/AppRouter.js

--- client/views/pages/AppRouter.js

+++ client/views/pages/AppRouter.js


 import PicHistorySearch from "./user/PicHistorySearch.vue";
 import PicHistoryInsert from "./user/PicHistoryInsert.vue";
 import PicHistoryDetail from "./user/PicHistoryDetail.vue";
+import BodoDetail from "./user/BodoDetail.vue";
+
+import MemberManagement from "./user/MemberManagement.vue";
+import CategoryManagement from "./user/CategoryManagement.vue";
+
 
 const routes = [
   { path: "/", name: "MainPage", component: Main, meta: { authorization: ['ROLE_ADMIN', 'ROLE_USER']} },

   { path: "/PicHistorySearch.page", name: "PicHistorySearch", component: PicHistorySearch },
   { path: "/PicHistoryInsert.page", name: "PicHistoryInsert", component: PicHistoryInsert },
   { path: "/PicHistoryDetail.page", name: "PicHistoryDetail", component: PicHistoryDetail },
+  { path: "/BodoDetail.page", name: "BodoDetail", component: BodoDetail },
+
+  { path: "/MemberManagement.page", name: "MemberManagement", component: MemberManagement },
+  { path: "/CategoryManagement.page", name: "CategoryManagement", component: CategoryManagement },
 
 
 ];

9e27a44

client/views/pages/user/BodoDetail.vue (added)

+++ client/views/pages/user/BodoDetail.vue

...	...	@@ -0,0 +1,151 @@
	1	+<template>
	2	+ <div class="content">
	3	+ <div class="sub-title-area mb-30">
	4	+ <h2>보도자료</h2>
	5	+ <div class="breadcrumb-list">
	6	+ <ul>
	7	+ <li><img :src="homeicon" alt="Home Icon">
	8	+ <p>언론에서 바라본 구미시</p>
	9	+ </li>
	10	+ <li><img :src="righticon" alt=""></li>
	11	+ <li>보도자료</li>
	12	+ </ul>
	13	+ </div>
	14	+ </div>
	15	+ <form action="" class="gallery-form mb-40">
	16	+ <dl class="mb-20">
	17	+ <dd>
	18	+ <p>보도자료 제목1
	19	+ </p>
	20	+ <div class="date flex align-center">
	21	+ <img :src="calendaricon" alt="">
	22	+ <span>2025.02.28</span>
	23	+ </div>
	24	+ </dd>
	25	+
	26	+ </dl>
	27	+ <div>
	28	+ <div>
	29	+ <img :src="noimg" alt="">
	30	+ </div>
	31	+ <div action="" class="info-form mb-50">
	32	+ <h3>기본정보</h3>
	33	+ <dl>
	34	+ <dd class="mb-20">
	35	+ <img :src="addressicon" alt="">
	36	+ <span>주소</span>
	37	+ <p>경상북도 구미시 송정대로 55</p>
	38	+ </dd>
	39	+ <dd class="mb-20">
	40	+ <img :src="yearicon" alt="">
	41	+ <span>생산정보</span>
	42	+ <p>2017</p>
	43	+
	44	+ </dd>
	45	+ <dd>
	46	+ <img :src="categoryicon" alt="">
	47	+ <span>카테고리</span>
	48	+ <ul class="category">
	49	+ <li v-if="resultitem.category1" class="category1">카테고리1</li>
	50	+ <li v-if="resultitem.category2" class="category2">카테고리2</li>
	51	+ </ul>
	52	+
	53	+ </dd>
	54	+
	55	+ </dl>
	56	+ </div>
	57	+ </div>
	58	+ </form>
	59	+
	60	+ <h3>내용</h3>
	61	+ <form action="" class=" info-form mb-50">
	62	+ <dl>
	63	+ <dd>
	64	+ <p> 대한민국 최대의 내륙 산업단지를 보유하고, 서울로부터 277km, 부산으로부터 167km 거리에 있으며, 면적은 615㎢로 경상북도 전체 면적의 3.2%에 달합니다. 인구는
	65	+ 41만 명이고, 선산읍, 고아읍, 산동읍을 비롯한 3읍, 5면, 17개 동으로 구성되어 있습니다.</p>
	66	+
	67	+ </dd>
	68	+ </dl>
	69	+ </form>
	70	+
	71	+
	72	+ <div class="btn-group flex-center">
	73	+ <button class="delete w130" type="button" @click="fnDeleteUser">삭제</button>
	74	+ <button class="update w130" type="button" @click="fnUpdateUser">수정</button>
	75	+ <button class="list w130" type="button" @click="fnUpdateUser">목록</button>
	76	+ </div>
	77	+ </div>
	78	+</template>
	79	+
	80	+<script>
	81	+import axios from "axios";
	82	+import { ref } from 'vue';
	83	+import { updateUsers, logOutProc, updatePassword } from "../../../resources/api/user"
	84	+// Import Swiper Vue components
	85	+import { CaretRightOutlined, PauseOutlined } from '@ant-design/icons-vue';
	86	+import { Swiper, SwiperSlide } from 'swiper/vue';
	87	+
	88	+// Import Swiper styles
	89	+import 'swiper/css';
	90	+
	91	+import 'swiper/css/free-mode';
	92	+import 'swiper/css/navigation';
	93	+import 'swiper/css/thumbs';
	94	+
	95	+// import required modules
	96	+import { FreeMode, Navigation, Thumbs } from 'swiper/modules';
	97	+
	98	+export default {
	99	+ components: {
	100	+ PauseOutlined,
	101	+ CaretRightOutlined,
	102	+ Swiper,
	103	+ SwiperSlide,
	104	+ },
	105	+ setup() {
	106	+ const thumbsSwiper = ref(null);
	107	+
	108	+ const setThumbsSwiper = (swiper) => {
	109	+ thumbsSwiper.value = swiper;
	110	+ };
	111	+
	112	+ return {
	113	+ thumbsSwiper,
	114	+ setThumbsSwiper,
	115	+ modules: [FreeMode, Navigation, Thumbs],
	116	+ };
	117	+ },
	118	+ data() {
	119	+ return {
	120	+ resultitem: {
	121	+ category1: true,
	122	+ category2: true,
	123	+ },
	124	+ noimg: 'client/resources/images/img7.png',
	125	+ calendaricon: 'client/resources/images/icon/calendaricon.png',
	126	+ homeicon: 'client/resources/images/icon/home.png',
	127	+ erroricon: 'client/resources/images/icon/error.png',
	128	+ righticon: 'client/resources/images/icon/right.png',
	129	+ addressicon: 'client/resources/images/icon/addressicon.png',
	130	+ yearicon: 'client/resources/images/icon/yearicon.png',
	131	+ categoryicon: 'client/resources/images/icon/categoryicon.png',
	132	+ slides: [
	133	+ { img: 'client/resources/images/visual.png', alt: 'Slide 1' },
	134	+ { img: 'client/resources/images/visual.png', alt: 'Slide 2' },
	135	+ { img: 'client/resources/images/visual.png', alt: 'Slide 3' },
	136	+ { img: 'client/resources/images/visual.png', alt: 'Slide 3' },
	137	+ { img: 'client/resources/images/visual.png', alt: 'Slide 3' },
	138	+ { img: 'client/resources/images/visual.png', alt: 'Slide 3' },
	139	+ // Add more slides as needed
	140	+ ],
	141	+
	142	+ };
	143	+ },
	144	+ methods: {
	145	+ },
	146	+ watch: {},
	147	+ computed: {
	148	+ },
	149	+ mounted() { },
	150	+};
	151	+</script>(파일 끝에 줄바꿈 문자 없음)

9e27a44

client/views/pages/user/CategoryManagement.vue (added)

+++ client/views/pages/user/CategoryManagement.vue

...	...	@@ -0,0 +1,124 @@
	1	+<template>
	2	+ <div class="content management">
	3	+ <div class="sub-title-area mb-30">
	4	+ <h2>카테고리 관리</h2>
	5	+ <div class="breadcrumb-list">
	6	+ <ul>
	7	+ <li><img :src="homeicon" alt="Home Icon">
	8	+ <p>카테고리 관리</p>
	9	+ </li>
	10	+ <li><img :src="righticon" alt=""></li>
	11	+ <li>카테고리 관리</li>
	12	+ </ul>
	13	+ </div>
	14	+ </div>
	15	+ <div class="flex-sp-bw">
	16	+ <div class="left-con">
	17	+ <div class="search-wrap mb-20">
	18	+ <div class="search-area">
	19	+ <div class="wfull" style="height: 100%;"> <input type="text" v-model="searchText"></div>
	20	+ <button class="search-btn"><img :src="searchicon" alt=""></button>
	21	+ </div>
	22	+
	23	+
	24	+ </div>
	25	+ <table class="mb-10">
	26	+ <thead>
	27	+ <tr>
	28	+ <th>카테고리명</th>
	29	+ </tr>
	30	+ </thead>
	31	+ <tbody>
	32	+ <tr v-for="item in items" :key="item.id" :class="{'delete-member': item.delete}">
	33	+ <!-- Category 칼럼 -->
	34	+ <td>
	35	+ {{ item.category}}
	36	+ </td>
	37	+ </tr>
	38	+ </tbody>
	39	+ </table>
	40	+ </div>
	41	+ <div class="righi-con wfull">
	42	+ <div class="btn-group-small flex-end mb-20">
	43	+ <div class="button green-line">복구</div>
	44	+ <div class="button red-line">삭제</div>
	45	+ <div class="button pink-line-bg flex align-center"><img :src="check_pink" alt="">
	46	+ <p>신규등록</p>
	47	+ </div>
	48	+ <div class="button blue-line-bg flex align-center"><img :src="check_blue" alt="">
	49	+ <p>등록</p>
	50	+ </div>
	51	+ <div class="button gray-bg">취소</div>
	52	+ </div>
	53	+ <form action="" class="insert-form mb-50">
	54	+ <dl>
	55	+ <dd>
	56	+ <label for="id" class="require">카테고리명</label>
	57	+ <div class="wfull"><input type="text" id="id" value="admin" readonly></div>
	58	+ </dd>
	59	+ <div class="hr"></div>
	60	+ <dd>
	61	+ <label for="use" class="require">사용여부</label>
	62	+ <div class="switch">
	63	+ <input type="checkbox" id="switch" checked/>
	64	+ <label for="switch">Toggle</label>
	65	+
	66	+ </div>
	67	+
	68	+ </dd>
	69	+ <div class="hr"></div>
	70	+ <dd>
	71	+ <label for="text" >설명</label>
	72	+ <textarea name="" id="text"></textarea>
	73	+ </dd>
	74	+
	75	+ </dl>
	76	+ </form>
	77	+ </div>
	78	+
	79	+ </div>
	80	+
	81	+ </div>
	82	+</template>
	83	+<script>
	84	+import { DoubleLeftOutlined, LeftOutlined, RightOutlined, DoubleRightOutlined } from '@ant-design/icons-vue';
	85	+
	86	+export default {
	87	+ components: {
	88	+ DoubleLeftOutlined,
	89	+ LeftOutlined,
	90	+ RightOutlined,
	91	+ DoubleRightOutlined,
	92	+ },
	93	+
	94	+ data() {
	95	+ return {
	96	+ items: [
	97	+ { id: 1, category: '카테고리 1', delete: false },
	98	+ { id: 2, category: '카테고리 2', delete: false },
	99	+ { id: 3, category: '카테고리 3', delete: true },
	100	+ ],
	101	+ isModalOpen: false,
	102	+ // Define the image sources
	103	+ homeicon: 'client/resources/images/icon/home.png',
	104	+ erroricon: 'client/resources/images/icon/error.png',
	105	+ righticon: 'client/resources/images/icon/right.png',
	106	+ check_pink: 'client/resources/images/checkbox_pink.png',
	107	+ check_blue: 'client/resources/images/checkbox_blue.png',
	108	+ searchicon: 'client/resources/images/icon/search.png',
	109	+ fileNames: [],
	110	+ selectedCategories: [],
	111	+ };
	112	+ },
	113	+ computed: {
	114	+ filteredItems() {
	115	+ // This could be modified to support filtering based on searchQuery
	116	+ return this.items.filter(item =>
	117	+ item.category.includes(this.searchQuery)
	118	+ );
	119	+ }
	120	+ },
	121	+ methods: {
	122	+ }
	123	+};
	124	+</script>

9e27a44

client/views/pages/user/MemberManagement.vue (added)

+++ client/views/pages/user/MemberManagement.vue

...	...	@@ -0,0 +1,165 @@
	1	+<template>
	2	+ <div class="content management">
	3	+ <div class="sub-title-area mb-30">
	4	+ <h2>회원관리</h2>
	5	+ <div class="breadcrumb-list">
	6	+ <ul>
	7	+ <li><img :src="homeicon" alt="Home Icon">
	8	+ <p>회원관리</p>
	9	+ </li>
	10	+ <li><img :src="righticon" alt=""></li>
	11	+ <li>회원관리</li>
	12	+ </ul>
	13	+ </div>
	14	+ </div>
	15	+ <div class="flex-sp-bw">
	16	+ <div class="left-con">
	17	+ <div class="search-wrap mb-20">
	18	+ <div class="search-area">
	19	+ <div class="select-box">
	20	+ <select name="" id="">
	21	+ <option value="all" selected>전체</option>
	22	+ <option value="id">아이디</option>
	23	+ <option value="name">이름</option>
	24	+ </select>
	25	+ </div>
	26	+ <div class="wfull" style="height: 100%;"> <input type="text" v-model="searchText"></div>
	27	+ <button class="search-btn"><img :src="searchicon" alt=""></button>
	28	+ </div>
	29	+
	30	+
	31	+ </div>
	32	+ <table class="mb-10">
	33	+ <thead>
	34	+ <tr>
	35	+ <th>아이디</th>
	36	+ <th>이름</th>
	37	+ <th>권한</th>
	38	+ </tr>
	39	+ </thead>
	40	+ <tbody>
	41	+ <tr v-for="item in items" :key="index" :class="{'delete-member': item.delete}">
	42	+ <!-- Category 칼럼 -->
	43	+ <td>
	44	+ {{ item.id }}
	45	+ </td>
	46	+ <!-- Checkbox 칼럼 -->
	47	+ <td>
	48	+ {{ item.name }}
	49	+ </td>
	50	+ <td>
	51	+ {{ item.gownhan }}
	52	+ </td>
	53	+ </tr>
	54	+ </tbody>
	55	+ </table>
	56	+ </div>
	57	+ <div class="righi-con wfull">
	58	+ <div class="btn-group-small flex-end mb-20">
	59	+ <div class="button green-line">복구</div>
	60	+ <div class="button red-line">회원탈퇴</div>
	61	+ <div class="button gray-line">비밀번호 초기화</div>
	62	+ <div class="button pink-line-bg flex align-center"><img :src="check_pink" alt="">
	63	+ <p>신규등록</p>
	64	+ </div>
	65	+ <div class="button blue-line-bg flex align-center"><img :src="check_blue" alt="">
	66	+ <p>등록</p>
	67	+ </div>
	68	+ <div class="button gray-bg">취소</div>
	69	+ </div>
	70	+ <form action="" class="insert-form mb-50">
	71	+ <dl>
	72	+ <dd>
	73	+ <label for="id" class="require">아이디</label>
	74	+ <input type="text" id="id" value="admin" readonly>
	75	+ </dd>
	76	+ <div class="hr"></div>
	77	+ <dd>
	78	+ <label for="pw" class="require">비밀번호</label>
	79	+ <div class="wfull"><input type="text" id="pw" value=""></div>
	80	+
	81	+ </dd>
	82	+ <div class="hr"></div>
	83	+ <dd>
	84	+ <label for="pwcheck" class="require">비밀번호 확인</label>
	85	+ <div class="wfull"><input type="text" id="pwcheck" value=""></div>
	86	+
	87	+ </dd>
	88	+ <div class="hr"></div>
	89	+ <dd>
	90	+ <label for="name" class="require">이름</label>
	91	+ <input type="text" id="name" value="관리자" readonly>
	92	+
	93	+ </dd>
	94	+ <div class="hr"></div>
	95	+ <dd>
	96	+ <label for="gwonhan" class="require">권한</label>
	97	+ <div class="select-box">
	98	+ <select>
	99	+ <option selected>관리자</option>
	100	+ <option></option>
	101	+ <option></option>
	102	+ </select>
	103	+ </div>
	104	+
	105	+ </dd>
	106	+ <div class="hr"></div>
	107	+ <dd>
	108	+ <label for="use" class="require">사용여부</label>
	109	+ <div class="switch">
	110	+ <input type="checkbox" id="switch" />
	111	+ <label for="switch">Toggle</label>
	112	+
	113	+ </div>
	114	+
	115	+ </dd>
	116	+ </dl>
	117	+ </form>
	118	+ </div>
	119	+
	120	+ </div>
	121	+
	122	+ </div>
	123	+</template>
	124	+<script>
	125	+import { DoubleLeftOutlined, LeftOutlined, RightOutlined, DoubleRightOutlined } from '@ant-design/icons-vue';
	126	+
	127	+export default {
	128	+ components: {
	129	+ DoubleLeftOutlined,
	130	+ LeftOutlined,
	131	+ RightOutlined,
	132	+ DoubleRightOutlined,
	133	+ },
	134	+
	135	+ data() {
	136	+ return {
	137	+ items: [
	138	+ { id: 'user1', name: '카테고리 1', gownhan:'관리자', delete: false },
	139	+ { id: 'user2', name: '카테고리 2', gownhan:'사용자', delete: false },
	140	+ { id: 'user3', name: '카테고리 3', gownhan:'사용자', delete: true },
	141	+ ],
	142	+ isModalOpen: false,
	143	+ // Define the image sources
	144	+ homeicon: 'client/resources/images/icon/home.png',
	145	+ erroricon: 'client/resources/images/icon/error.png',
	146	+ righticon: 'client/resources/images/icon/right.png',
	147	+ check_pink: 'client/resources/images/checkbox_pink.png',
	148	+ check_blue: 'client/resources/images/checkbox_blue.png',
	149	+ searchicon: 'client/resources/images/icon/search.png',
	150	+ fileNames: [],
	151	+ selectedCategories: [],
	152	+ };
	153	+ },
	154	+ computed: {
	155	+ filteredItems() {
	156	+ // This could be modified to support filtering based on searchQuery
	157	+ return this.items.filter(item =>
	158	+ item.id.includes(this.searchQuery)
	159	+ );
	160	+ }
	161	+ },
	162	+ methods: {
	163	+ }
	164	+};
	165	+</script>

3974f71

9e27a44

client/views/pages/user/PicHistorySearch.vue

--- client/views/pages/user/PicHistorySearch.vue

+++ client/views/pages/user/PicHistorySearch.vue


                         <img :src="resulticon" alt="">
                         <p>총 <b>{{ count }}개</b>의 사진 기록물이 검색되었습니다. </p>
                     </div>
-                    <div class="flex">
+                    <div class="flex ">
                         <ul class="tab-box mb-20">
                             <li v-for="(tab, index) in tabs" :key="index" class="tab-title"
                                 :class="{ active: selectedTab === tab.id }" @click="selectTab(tab.id)">

Add a comment

Open 0
Closed 0

List

...	...	@@ -1,6 +1,6 @@
1	1	*{
2	2	padding: 0; margin: 0; color: #000;
3		- font-family: "Pretendard-R";
	3	+ font-family: "Pretendard-R"; box-sizing: border-box;
4	4	}
5	5	html{font-size: 10px;}
6	6
...	...	@@ -19,8 +19,8 @@
19	19	background-color: #f6f6f6 !important;
20	20	color: #999;
21	21	}
22		-
23		-
	22	+select:focus {border: 0;}
	23	+textarea{resize: none;}
24	24
25	25
26	26	.w130{width: 130px;}
...	...	@@ -62,21 +62,60 @@
62	62	padding: 15px 30px;
63	63	border-radius: 10px;
64	64	font-size: 20px;
65		- &.signout{
	65	+
	66	+}
	67	+.btn-group-small .button{
	68	+ padding: 10px 25px;
	69	+ border-radius: 5px;
	70	+ font-size: 16px;
	71	+ font-family: "Pretendard-M";
	72	+ cursor: pointer;
	73	+ p{
	74	+ font-size: 16px;
	75	+ font-family: "Pretendard-M";
	76	+ }
	77	+}
	78	+
	79	+.button{
	80	+ &.red-line{
66	81	border: 1px solid #ce3e48;
67	82	color: #ce3e48;
68	83	}
69		- &.delete{
70		- border: 1px solid #ce3e48;
71		- color: #ce3e48;
72		- }
73		- &.update{
	84	+ &.blue-line{
74	85	border: 1px solid #275cbd;
75	86	color: #275cbd;
76	87	}
77		- &.list{
	88	+ &.blue-line-bg{
	89	+ border: 1px solid #007ac3;
	90	+ background-color: #eff5f9;
	91	+ color: #0271b3;
	92	+ p{
	93	+ color: #0271b3;
	94	+ }
	95	+ }
	96	+ &.green-line{
	97	+ border: 1px solid #32b31d;
	98	+ color: #2d9b1b;
	99	+ }
	100	+ &.gray-line{
	101	+ border: 1px solid #636364;
	102	+ color: #000;
	103	+ }
	104	+ &.gray-bg{
	105	+ background-color: #636364;
	106	+ color: #fff;
	107	+ }
	108	+ &.gray-line-bg{
78	109	border: 1px solid #636364;
79	110	background-color: #f9f9f9;
80	111	color: #000;
81	112	}
82		-}
	113	+ &.pink-line-bg{
	114	+ border: 1px solid #a5067b;
	115	+ background-color: #f7ebf4;
	116	+ color: #a5067b;
	117	+ p{
	118	+ color: #a5067b;
	119	+ }
	120	+ }
	121	+} (파일 끝에 줄바꿈 문자 없음)

...	...	@@ -39,10 +39,10 @@
39	39	font-size: 18px;
40	40	}
41	41
42		-
	42	+
43	43	/* pagination */
44		- .pagination{
45		- button{
	44	+ .pagination {
	45	+ button {
46	46	width: 40px;
47	47	height: 40px;
48	48	margin: 0 4px;
...	...	@@ -50,7 +50,8 @@
50	50	background-color: #fff;
51	51	border-radius: 50px;
52	52	}
53		- button.page-number{
	53	+
	54	+ button.page-number {
54	55	font-size: 20px;
55	56	color: #555555;
56	57	width: 40px;
...	...	@@ -58,23 +59,26 @@
58	59	background-color: #f0f1f4;
59	60	border-radius: 50px;
60	61	}
61		- button.page-number.clicked{
	62	+
	63	+ button.page-number.clicked {
62	64	background-color: #ce3e48;
63	65	color: #fff;
64	66	}
65		- .anticon{
66		- svg{
	67	+
	68	+ .anticon {
	69	+ svg {
67	70	font-size: 17px;
68		- path{
	71	+
	72	+ path {
69	73	color: #636364;
70	74	}
71	75	}
72		-
73		-
	76	+
	77	+
74	78	}
75	79	}
76		-
77		-
	80	+
	81	+
78	82
79	83	}
80	84
...	...	@@ -125,7 +129,8 @@
125	129	width: 130px;
126	130	background-color: #ce3e48;
127	131	color: #fff;
128		- a{
	132	+
	133	+ a {
129	134	color: #fff;
130	135	}
131	136	}
...	...	@@ -137,7 +142,8 @@
137	142	border-radius: 20px;
138	143
139	144	input {
140		- padding: 15px;
	145	+ padding: 0 15px;
	146	+ height: 50px;
141	147	border: 1px solid #dddddd;
142	148	border-radius: 5px;
143	149	font-size: 16px;
...	...	@@ -147,8 +153,17 @@
147	153	dd {
148	154	display: flex;
149	155	align-items: center;
150		- p{font-size: 20px; font-family: "Pretendard-L"; line-height: 30px;}
151		- span{font-size: 20px; font-family: "Pretendard-SB";}
	156	+
	157	+ p {
	158	+ font-size: 20px;
	159	+ font-family: "Pretendard-L";
	160	+ line-height: 30px;
	161	+ }
	162	+
	163	+ span {
	164	+ font-size: 20px;
	165	+ font-family: "Pretendard-SB";
	166	+ }
152	167	}
153	168
154	169	label {
...	...	@@ -184,7 +199,7 @@
184	199	display: flex;
185	200	justify-content: space-between;
186	201	margin-bottom: 10px;
187		- }
	202	+ }
188	203
189	204	li {
190	205	width: fit-content;
...	...	@@ -197,7 +212,7 @@
197	212	color: #a5067b;
198	213	border: 1px solid #a5067b;
199	214	}
200		-
	215	+
201	216	&:nth-child(even) {
202	217	color: #007ac3;
203	218	border: 1px solid #007ac3;
...	...	@@ -277,10 +292,15 @@
277	292	}
278	293	}
279	294
280		-.info-form{
281		- dd{
282		- img{margin-right: 17px;}
283		- span{width: 118px;}
	295	+.info-form {
	296	+ dd {
	297	+ img {
	298	+ margin-right: 17px;
	299	+ }
	300	+
	301	+ span {
	302	+ width: 118px;
	303	+ }
284	304	}
285	305	}
286	306
...	...	@@ -299,6 +319,7 @@
299	319	width: 180px;
300	320	flex-shrink: 0;
301	321	}
	322	+
302	323	input[type="text"] {
303	324	background-color: #f6f6f6;
304	325	border: 0;
...	...	@@ -362,24 +383,28 @@
362	383	}
363	384
364	385
365		-
	386	+
366	387
367	388	}
	389	+.select-box {
	390	+ width: 106px;
	391	+ height: 30px;
	392	+ border: 1px solid #cccccc;
	393	+ border-radius: 5px;
	394	+ flex-shrink: 0;
	395	+ padding: 0 10px;
	396	+ line-height: 30px;
	397	+ margin-left: 30px;
368	398
369		-.search-result {
370		- .select-box{
	399	+ select {
371	400	width: 106px;
372		- border: 1px solid #cccccc;
373		- border-radius: 5px;
374		- flex-shrink: 0;
375		- padding: 10px;
376		- margin-left: 30px;
377		- select {
378		- border: 0;
379		- font-size: 14px;
380		- }
	401	+ border: 0;
	402	+ font-size: 14px;
381	403	}
	404	+}
	405	+.search-result {
382	406
	407	+
383	408
384	409	.resultext {
385	410	.main-img {
...	...	@@ -413,8 +438,9 @@
413	438	border-radius: 24px;
414	439	padding: 30px;
415	440
416		-
	441	+
417	442	}
	443	+
418	444	.text-box {
419	445
420	446	p,
...	...	@@ -464,70 +490,82 @@
464	490	}
465	491	}
466	492	}
467		- .tabs{
468		- .tab-box{display: flex;
	493	+
	494	+ .tabs {
	495	+ .tab-box {
	496	+ display: flex;
469	497	justify-content: end;
470	498	gap: 25px;
471	499	}
472		- .tab-title{
	500	+
	501	+ .tab-title {
473	502	display: flex;
474	503	align-items: center;
475	504	gap: 13px;
476		- p{
	505	+
	506	+ p {
477	507	cursor: pointer;
478	508	font-family: "HAPPINESS-SANS-REGULAR";
479	509	color: #cccccc;
480	510	font-size: 17px;
481		- b{
	511	+
	512	+ b {
482	513	color: #cccccc;
483	514	}
484	515	}
485		-
	516	+
486	517	}
487		- .tab-title.active p{
	518	+
	519	+ .tab-title.active p {
488	520	color: #000;
489		-
490		- b{
	521	+
	522	+ b {
491	523	color: #ff4141;
492		-
	524	+
493	525	}
494		-
	526	+
495	527	}
496		- .tab-content{
497		- .content-wrap{
	528	+
	529	+ .tab-content {
	530	+ .content-wrap {
498	531	margin-top: -23px;
499	532	}
500		- .box-wrap{
	533	+
	534	+ .box-wrap {
501	535	width: 454px;
502	536	height: 370px;
503		- .box {
504		- background-image: linear-gradient(#fff, #fff),
505		- linear-gradient(-45deg, #fff, #fff);
	537	+
	538	+ .box {
	539	+ background-image: linear-gradient(#fff, #fff),
	540	+ linear-gradient(-45deg, #fff, #fff);
506	541	background-origin: border-box;
507	542	background-clip: content-box, border-box;
508	543	border: 3px solid transparent;
509	544	border-radius: 32px;
510	545	}
511		-
	546	+
512	547	.box:hover {
513		- background-image: linear-gradient(#fff, #fff),
514		- linear-gradient(-45deg, #ca3e49, #3d355d);
	548	+ background-image: linear-gradient(#fff, #fff),
	549	+ linear-gradient(-45deg, #ca3e49, #3d355d);
515	550	}
516		- .tab-image{
	551	+
	552	+ .tab-image {
517	553	width: 100%;
518	554	height: 297px;
519	555	object-fit: cover;
520	556	border-radius: 30px;
521	557	}
522		-
	558	+
523	559	}
524		-
	560	+
525	561	}
526		-
	562	+
527	563	}
528		- .list-wrap{
	564	+
	565	+ .list-wrap {
529	566	border-top: 2px solid #000;
530		- &>li{
	567	+
	568	+ &>li {
531	569	border-bottom: 2px solid #eeeeee;
532	570	padding: 30px 10px;
533	571	}
...	...	@@ -654,7 +692,7 @@
654	692
655	693	.modal-content {
656	694	background-color: #fff;
657		- padding: 50px 35px;
	695	+ padding: 50px 35px;
658	696	border-radius: 8px;
659	697	max-width: 1000px;
660	698	width: 100%;
...	...	@@ -664,20 +702,23 @@
664	702	font-family: "Pretendard-B";
665	703	font-size: 30px;
666	704	}
667		- .modal-search{
	705	+
	706	+ .modal-search {
668	707	padding: 13px;
669	708	background-color: rgba(0, 61, 97, 0.05);
670	709	border-radius: 10px;
671		- input{
	710	+
	711	+ input {
672	712	padding: 0px 20px;
673	713	background-color: #fff;
674		- border-radius:5px;
	714	+ border-radius: 5px;
675	715	width: 300px;
676	716	height: 45px;
677	717	font-size: 16px;
678	718	margin-right: 5px;
679	719	}
680		- .search-btn{
	720	+
	721	+ .search-btn {
681	722	display: flex;
682	723	align-items: center;
683	724	justify-content: center;
...	...	@@ -685,7 +726,8 @@
685	726	height: 45px;
686	727	gap: 5px;
687	728	border-radius: 5px;
688		- p{
	729	+
	730	+ p {
689	731	font-size: 16px;
690	732	color: #fff;
691	733	font-family: "Pretendard-SB";
...	...	@@ -702,11 +744,16 @@
702	744	border: none;
703	745	border-radius: 50px;
704	746	}
705		- button.closebtn{font-size: 20px;}
	747	+
	748	+ button.closebtn {
	749	+ font-size: 20px;
	750	+ }
	751	+
706	752	button:hover {
707	753	background-color: #0056b3;
708	754	}
709		- .register-b{
	755	+
	756	+ .register-b {
710	757	width: 110px;
711	758	height: 40px;
712	759	font-size: 18px;
...	...	@@ -714,91 +761,140 @@
714	761	color: #fff;
715	762	font-family: "Pretendard-M";
716	763	}
717		-
	764	+
718	765	}
719	766
720	767
721	768	/* 사진기록물 상세페이지 */
722		-.gallery-form{
	769	+.gallery-form {
723	770	border: 0;
724		- dl{
	771	+
	772	+ dl {
725	773	padding: 30px 0 0 0;
726	774	border-top: 2px solid #000;
727		- dd{
	775	+
	776	+ dd {
728	777	position: relative;
729	778	background: #f6f6f6;
730	779	padding: 25px 0px;
731		- p{flex: 1; font-size: 35px; text-align: center; font-family: "Pretendard-B"}
732		- .date{
	780	+
	781	+ p {
	782	+ flex: 1;
	783	+ font-size: 35px;
	784	+ text-align: center;
	785	+ font-family: "Pretendard-B"
	786	+ }
	787	+
	788	+ .date {
733	789	position: absolute;
734	790	right: 30px;
735		- span{ font-family: "Pretendard-R"; font-size: 18px;}
736		- img{
737		-
	791	+
	792	+ span {
	793	+ font-family: "Pretendard-R";
	794	+ font-size: 18px;
	795	+ }
	796	+
	797	+ img {
	798	+
738	799	object-fit: contain;
739	800	margin-right: 10px;
740	801	}
741	802
742	803	}
743		-
744		-
	804	+
	805	+
745	806	}
746		-
	807	+
747	808	}
748		- .gallery{
	809	+
	810	+ .gallery {
749	811	margin-bottom: 107px;
750	812	position: relative;
751		- .main-swiper{
752		- .swiper{
	813	+
	814	+ .main-swiper {
	815	+ .swiper {
753	816	width: 100%;
754		- .swiper-slide{
755		- img{
	817	+
	818	+ .swiper-slide {
	819	+ img {
756	820	height: 800px;
757	821	width: 100%;
758	822	object-fit: contain;
759	823	background-color: #ddd;
760	824	}
761	825	}
762		-
	826	+
763	827	}
764	828	}
765		- .thumbnail{
	829	+
	830	+ .thumbnail {
766	831	width: 1127px;
767	832	padding: 30px 0px;
768		- background-color: #fff;
769		- border-radius: 90px;
770		- position: absolute;
771		- z-index: 1;
772		- left: 50%;
	833	+ background-color: #fff;
	834	+ border-radius: 90px;
	835	+ position: absolute;
	836	+ z-index: 1;
	837	+ left: 50%;
773	838	transform: translateX(-50%);
774	839	bottom: -10%;
775		- box-shadow:1px 2px 19px 1px rgba(0, 0, 0, 0.04);
776		- .swiper{
777		- width:940px;
	840	+ box-shadow: 1px 2px 19px 1px rgba(0, 0, 0, 0.04);
	841	+
	842	+ .swiper {
	843	+ width: 940px;
778	844	position: initial;
779	845	height: 120px;
780	846	margin: 0 auto;
781		- .swiper-wrapper{
	847	+
	848	+ .swiper-wrapper {
782	849	margin: 0;
783	850	}
	851	+
784	852	.swiper-slide img {
785	853	width: -webkit-fill-available;
786	854	}
787		-
	855	+
788	856	}
789	857	}
790		- .swiper-button-prev, .swiper-button-next{
791		- box-shadow: none ;
	858	+
	859	+ .swiper-button-prev,
	860	+ .swiper-button-next {
	861	+ box-shadow: none;
792	862	margin-top: -35px;
793	863	}
794		- .swiper-button-prev{left: 20px;}
795		- .swiper-button-next{right: 20px;}
796		-
	864	+
	865	+ .swiper-button-prev {
	866	+ left: 20px;
	867	+ }
	868	+
	869	+ .swiper-button-next {
	870	+ right: 20px;
	871	+ }
	872	+
797	873	}
798		- .btn-group{
	874	+
	875	+ .info-form {
	876	+ background-image: linear-gradient(#fff, #fff), linear-gradient(-45deg, #ca3e49, #3f355c);
	877	+ background-origin: border-box;
	878	+ background-clip: content-box, border-box;
	879	+ border: 3px solid transparent;
	880	+ border-radius: 32px;
	881	+
	882	+ dd {
	883	+ background-color: transparent;
	884	+
	885	+ p {
	886	+ font-size: 20px;
	887	+ text-align: left;
	888	+ font-family: "Pretendard-L";
	889	+ }
	890	+ }
	891	+ }
	892	+
	893	+ .btn-group {
799	894	margin-top: 24px;
800	895	text-align: center;
801		- button{
	896	+
	897	+ button {
802	898	width: 160px;
803	899	height: 46px;
804	900	font-family: "Pretendard-B";
...	...	@@ -807,19 +903,113 @@
807	903	text-align: left;
808	904	margin: 0 5px;
809	905	}
810		- .select-down{
	906	+
	907	+ .select-down {
811	908	background-image: url(../../images/downbtn_border.png);
812	909	}
813		- .all-down{
	910	+
	911	+ .all-down {
814	912	background-image: url(../../images/downbtn_bg.png);
815	913	color: #fff;
816	914	}
817		- }
818		-
819		-
	915	+ }
	916	+
	917	+
820	918	}
821	919
	920	+/* 회원관리, 카테고리 관리 */
	921	+.management{
	922	+ .left-con{width: 350px; margin-right: 55px;}
822	923
	924	+ .search-area{
	925	+ gap: 5px;
	926	+ padding: 0;
	927	+ height: 40px;
	928	+ }
	929	+ .search-wrap{
	930	+
	931	+ position: initial;
	932	+ transform: none;
	933	+
	934	+ input{
	935	+ width: 100%;
	936	+ height: 100%;
	937	+ border: 1px solid #000;
	938	+ border-radius: 5px;
	939	+ }
	940	+ .select-box {
	941	+ border-color: #000;
	942	+ width: 100px;
	943	+ height: 100%;
	944	+ select{width: 100%; color: #000; }
	945	+ }
	946	+ .search-btn{
	947	+ position: relative;
	948	+ flex-shrink: 0;
	949	+ width: 40px;
	950	+ height: 40px;
	951	+ background-color: #000;
	952	+ border-radius: 5px;
	953	+ img{
	954	+ position: absolute;
	955	+ left: 50%;
	956	+ right: 50%;
	957	+ transform: translateX(-50%) translateY(-50%);
	958	+ }
	959	+
	960	+ }
	961	+ }
	962	+ .btn-group-small{
	963	+ gap: 5px;
	964	+ .button{
	965	+ &.flex{
	966	+ img{text-align: left; margin-right: 10px;}
	967	+ p{text-align: center;}
	968	+ }
	969	+ }
	970	+ }
	971	+ .select-box {
	972	+ width: 230px;
	973	+ height: 50px;
	974	+ border: 1px solid #ddd;
	975	+ padding: 0 15px;
	976	+ margin: 0;
	977	+ select {
	978	+ width: 100%;
	979	+ height: 100%;
	980	+ font-size: 16px;
	981	+ color: #999999;
	982	+ }
	983	+ }
	984	+ .switch{
	985	+ label{margin-top: -12px;}
	986	+ }
	987	+ table{
	988	+ border-radius: 10px;
	989	+ overflow: hidden;
	990	+
	991	+ thead{
	992	+ background-color: #636364;
	993	+ th{color: #fff; border: 1px solid #eee;}
	994	+ }
	995	+ td{border: 1px solid #eee; text-align: center;}
	996	+ tr:hover td{
	997	+ background-color: #007ac3;
	998	+ overflow: hidden;
	999	+ width: 100%;
	1000	+ border: 2px solid transparent; /* Set a transparent border first */
	1001	+ border-image: linear-gradient(-45deg, #ce3e48, #3f355c) 1;
	1002	+ }
	1003	+ }
	1004	+ .delete-member {
	1005	+ background-color: #f5f8f9;
	1006	+ td{
	1007	+ color: #aaaaaa;
	1008	+
	1009	+ }
	1010	+ }
	1011	+ textarea{border-color: #ddd;}
	1012	+}
823	1013
824	1014
825	1015
...	...	@@ -891,7 +1081,8 @@
891	1081	/* Change the label color when checkbox is checked */
892	1082	}
893	1083
894		-input[type="checkbox"]+label, input[type='radio']+label {
	1084	+input[type="checkbox"]+label,
	1085	+input[type='radio']+label {
895	1086	font-size: 17px;
896	1087	font-family: "Pretendard-L";
897	1088	}
...	...	@@ -926,24 +1117,83 @@
926	1117	/라인/
927	1118	}
928	1119
	1120	+.switch {
	1121	+ input[type="checkbox"] {
	1122	+ height: 0;
	1123	+ width: 0;
	1124	+ visibility: hidden;
	1125	+ }
	1126	+
	1127	+ label {
	1128	+ cursor: pointer;
	1129	+ text-indent: -9999px;
	1130	+ width: 65px;
	1131	+ height: 28px;
	1132	+ background: #544483;
	1133	+ display: block;
	1134	+ border-radius: 100px;
	1135	+ position: relative;
	1136	+ transition: background-color 0.3s ease; /* Added smooth transition for background */
	1137	+ }
	1138	+
	1139	+ label:after {
	1140	+ content: '';
	1141	+ position: absolute;
	1142	+ top: 4px;
	1143	+ left: 5px;
	1144	+ width: 20px;
	1145	+ height: 20px;
	1146	+ background: #fff;
	1147	+ border-radius: 50%;
	1148	+ transition: left 0.3s ease, transform 0.3s ease; /* Smooth transition for the toggle ball */
	1149	+ }
	1150	+
	1151	+ /* When the input is checked */
	1152	+ input:checked + label {
	1153	+ background: #787878; /* Color when active */
	1154	+ }
	1155	+
	1156	+ input:checked + label:after {
	1157	+ left: calc(100% - 5px);
	1158	+ transform: translateX(-100%); /* Keeps the ball moving smoothly */
	1159	+ }
	1160	+
	1161	+ /* Optional: Make the toggle ball slightly larger during the click for a better effect */
	1162	+ label:active:after {
	1163	+ width: 20px; /* Slightly increase the ball size */
	1164	+ height: 20px;
	1165	+ }
	1166	+}
	1167	+
	1168	+
929	1169
930	1170
931	1171	/* table*/
932		-table{
	1172	+table {
933	1173	width: 100%;
934	1174	border-collapse: collapse;
935	1175	border-top: 2px solid #000;
936	1176	}
937		-thead{background-color: #f6f6f6;}
938		-th{
	1177	+
	1178	+thead {
	1179	+ background-color: #f6f6f6;
	1180	+}
	1181	+
	1182	+th {
939	1183	font-family: "Pretendard-SB";
940	1184	font-size: 18px;
941	1185	}
942		-tbody tr{
	1186	+
	1187	+tbody tr {
943	1188	border-bottom: 1px solid #eeeeee;
944		- td{
	1189	+
	1190	+ td {
945	1191	font-size: 16px;
946	1192	font-family: "Pretendard-L";
947	1193	}
948	1194	}
949		-td, th{padding: 10px 0; }
	1195	+
	1196	+td,
	1197	+th {
	1198	+ padding: 10px 0;
	1199	+} (파일 끝에 줄바꿈 문자 없음)

...	...	@@ -11,6 +11,11 @@
11	11	import PicHistorySearch from "./user/PicHistorySearch.vue";
12	12	import PicHistoryInsert from "./user/PicHistoryInsert.vue";
13	13	import PicHistoryDetail from "./user/PicHistoryDetail.vue";
	14	+import BodoDetail from "./user/BodoDetail.vue";
	15	+
	16	+import MemberManagement from "./user/MemberManagement.vue";
	17	+import CategoryManagement from "./user/CategoryManagement.vue";
	18	+
14	19
15	20	const routes = [
16	21	{ path: "/", name: "MainPage", component: Main, meta: { authorization: ['ROLE_ADMIN', 'ROLE_USER']} },
...	...	@@ -22,6 +27,10 @@
22	27	{ path: "/PicHistorySearch.page", name: "PicHistorySearch", component: PicHistorySearch },
23	28	{ path: "/PicHistoryInsert.page", name: "PicHistoryInsert", component: PicHistoryInsert },
24	29	{ path: "/PicHistoryDetail.page", name: "PicHistoryDetail", component: PicHistoryDetail },
	30	+ { path: "/BodoDetail.page", name: "BodoDetail", component: BodoDetail },
	31	+
	32	+ { path: "/MemberManagement.page", name: "MemberManagement", component: MemberManagement },
	33	+ { path: "/CategoryManagement.page", name: "CategoryManagement", component: CategoryManagement },
25	34
26	35
27	36	];

...	...	@@ -79,7 +79,7 @@
79	79	<img :src="resulticon" alt="">
80	80	<p>총 <b>{{ count }}개</b>의 사진 기록물이 검색되었습니다. </p>
81	81	</div>
82		- <div class="flex">
	82	+ <div class="flex ">
83	83	<ul class="tab-box mb-20">
84	84	<li v-for="(tab, index) in tabs" :key="index" class="tab-title"
85	85	:class="{ active: selectedTab === tab.id }" @click="selectTab(tab.id)">

Delete comment