최정임 최정임 03-20
250320 최정임 통합검색 퍼블리싱
@0d1df876af31f0d7d5ba3e449fea3b12e01f7404
client/resources/css/common/common.css
--- client/resources/css/common/common.css
+++ client/resources/css/common/common.css
@@ -52,8 +52,11 @@
 .mt-5{margin-top: 5px;}
 
 .mb-10{margin-bottom: 10px;}
+.mb-15{margin-bottom: 15px;}
+.mb-20{margin-bottom: 20px;}
 .mb-25{margin-bottom: 25px;}
 .mb-30{margin-bottom: 30px;}
+.mb-40{margin-bottom: 40px;}
 .mb-50{margin-bottom: 50px;}
 .mb-60{margin-bottom: 60px;}
 .mb-110{margin-bottom: 110px;}
client/resources/css/user/sub.css
--- client/resources/css/user/sub.css
+++ client/resources/css/user/sub.css
@@ -26,6 +26,16 @@
             position: absolute;
         }
     }
+    .gopage{
+        font-family: "Pretendard-L";
+        font-size: 17px;
+        text-align: right;
+        
+    }
+    .gopage::after{
+        content: '\2192';
+        font-size: 18px;
+    }
 }
 
 .sub-title-area {
@@ -161,6 +171,21 @@
 
 /* 통합검색 */
 .search-form {
+    dl{
+        padding: 35px 75px;
+        dd{
+            display: flex;
+            align-items: center;
+            p {
+                font-size: 18px;
+                font-family: "Pretendard-SB";
+                width: 180px;
+            }
+        }
+        .mark{width: fit-content; margin: 0 11px;}
+
+    }
+    
     background-image: linear-gradient(#fff, #fff),
         linear-gradient(-45deg, #ca3e49, #3f355c);
     background-origin: border-box;
@@ -168,11 +193,58 @@
     border: 3px solid transparent;
     border-radius: 32px;
 
-    label {
-        font-size: 18px;
-        font-family: "Pretendard-SB";
+  
+    .btn-group{
+        display: flex;
+        justify-content: center;
+        button{
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 10px;
+            width: 140px;
+            font-family: "Pretendard-B";
+            font-size: 16px;
+            border-radius: 30px;
+            &.reset{
+                border: 1px solid #ccc;                
+            }
+            &.search{                
+                background: linear-gradient(132deg, #3e355c, #763954);
+                p{
+                    color: #fff;
+                }
+            }
+        }
     }
+    ul{display: flex; gap: 15px;}
+    li{display: flex; align-items: center; width: 125px; gap: 12px;}
+   
 
+    input[type="text"]{
+        background-color: #f6f6f6;
+        width: 84%;
+        border: 0;
+    }
+    input[type="date"]{
+        position: relative;
+        width: 158px;
+        border-radius: 8px;
+        background: url(../../images/icon/calendar.png) no-repeat right 10px center /
+     auto;
+    }
+    input[type="date"]::placeholder{color: #fff;;}
+    input[type='date']::-webkit-calendar-picker-indicator {
+        position: absolute; 
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        background: transparent; 
+        color: transparent; 
+        cursor: pointer;
+      }
+      
     input[type="checkbox"] {
         position: relative;
         width: 22px;
@@ -209,5 +281,113 @@
         width: 15px;
         height: 11px;
     }
+    input[type="checkbox"]:checked + label {
+        color: rgba(0, 0, 0, 0.12); /* Change the label color when checkbox is checked */
+    }
+
+    label{
+        font-size: 17px;
+        font-family: "Pretendard-L";
+    }
+   
+/* 기본스타일 제거, 버튼 모양 재설정 */
+input[type='radio'] {
+    flex-shrink:0;
+    -webkit-appearance: none; /* 웹킷 브라우저에서 기본 스타일 제거*/
+    -moz-appearance: none; /* 모질라 브라우저에서 기본 스타일 제거*/ 
+    appearance: none; /*기본 브라우저에서 기본 스타일 제거*/
+    width: 22px;
+    height: 22px;
+    padding: 0;
+    border: 1px solid #ccc; /*체크되지 않았을 때의 테두리 색상*/
+    border-radius: 50%;
+    outline: none; /*focus 시에 나타나는 기본 스타일 제거*/
+    cursor: pointer;
+  }
+  /* 체크 시 버튼 모양 스타일*/
+  input[type='radio']:checked {
+    background-color: #544483; /*체크 시 내부 원 색상*/
+    border: 4px solid #fff; /*라인이 아닌, 라인과 원 사이 색상*/
+    box-shadow: 0 0 0 1px #ccc; /*라인*/
+  }
+
+}
+.search-result{
+    .resultext{
+        .main-img{
+            width: 320px;
+            height: 220px;
+            border-radius: 24px;
+        }
+        display: flex;
+        p{
+            font-family: "Pretendard-L";
+            font-size: 17px;
+            b{
+                color: #ce3e48;
+            }
+        }
+        img{object-fit: contain;}
+    }
+   .result-box{
+    display: flex;
+    justify-content: space-between;
+    border: 1px solid #ddd;
+    border-radius: 24px;
+    padding: 30px;
+    .text-box{
+        p,li{font-family: "Pretendard-L";}
+        .text{
+            width: 1048px;
+            font-size: 16px;
+            color: #555555;
+            overflow: hidden; /* Hide any overflow */
+            text-overflow: ellipsis; /* Add an ellipsis at the end */
+            display: -webkit-box;
+            -webkit-line-clamp: 2; /* Limit to 2 lines */
+            -webkit-box-orient: vertical;
+            margin-bottom: 20px;
+        }
+        h5{
+            font-family: "Pretendard-B";
+            font-size: 25px;          
+            margin-bottom: 20px;  
+        }
+        .address{            
+            font-size: 20px;
+            margin-bottom: 18px;
+        }
+        .category {
+            margin-bottom: 20px;
+            ul{
+                display: flex;
+                gap: 5px;
+            }
+            li{
+                width: fit-content;
+                border-radius: 3px;
+                padding: 5px 10px;
+                font-family: "Pretendard-SB";
+                font-size: 14px;  
+                &.category1{
+                    color: #a5067b;
+                    border: 1px solid #a5067b;
+                }
+                &.category2{
+                    color: #007ac3;
+                    border: 1px solid #007ac3;
+                }
+            }
+        }
+        .date{
+            ul{display: flex; gap: 20px;}
+            li{font-size: 17px;
+                b{margin-left: 5px;}
+            }
+        }
+    }
+    
+   }
+    
 }
 
 
client/resources/images/icon/calendar.png (Binary) (added)
+++ client/resources/images/icon/calendar.png
Binary file is not shown
 
client/resources/images/icon/r-check.png (Binary) (added)
+++ client/resources/images/icon/r-check.png
Binary file is not shown
 
client/resources/images/icon/reset.png (Binary) (added)
+++ client/resources/images/icon/reset.png
Binary file is not shown
client/resources/images/icon/search.png (Binary)
--- client/resources/images/icon/search.png
+++ client/resources/images/icon/search.png
Binary file is not shown
 
client/resources/images/img6.png (Binary) (added)
+++ client/resources/images/img6.png
Binary file is not shown
client/views/pages/AppRouter.js
--- client/views/pages/AppRouter.js
+++ client/views/pages/AppRouter.js
@@ -8,6 +8,7 @@
 import NotFound from "./etc/NotFound.vue";
 
 import TotalSearch from "./user/TotalSearch.vue";
+import PicHistory from "./user/PicHistory.vue";
 
 const routes = [
   { path: "/", name: "MainPage", component: Main, meta: { authorization: ['ROLE_ADMIN', 'ROLE_USER']} },
@@ -16,6 +17,7 @@
   { path: "/notFound.page", name: "NotFoundPage", component: NotFound },
 
   { path: "/TotalSearch.page", name: "TotalSearch", component: TotalSearch },
+  { path: "/PicHistory.page", name: "PicHistory", component: PicHistory },
 
 
 ];
 
client/views/pages/user/PicHistory.vue (added)
+++ client/views/pages/user/PicHistory.vue
@@ -0,0 +1,193 @@
+<template>
+    <div class="content">
+        <div class="sub-title-area mb-30">
+            <h2>사진 기록물</h2>
+            <div class="breadcrumb-list">
+                <ul>
+                    <!-- Bind the image source dynamically for homeicon -->
+                    <li><img :src="homeicon" alt="Home Icon"></li>
+                    <li><img :src="righticon" alt=""></li>
+                    <li>통합검색</li>
+                </ul>
+            </div>
+        </div>
+        <form action="search" class="search-form mb-40">
+            <dl>
+                <dd class="mb-15">
+                    <p>기록유형</p>
+                    <ul>
+                        <li v-for="(option, index) in checkOptions" :key="index">
+                            <input type="checkbox" :id="'check_button_' + index" :name="'check_button_' + index" />
+                            <label :for="'check_button_' + index">{{ option }}</label>
+                        </li>
+                    </ul>
+                </dd>
+                <dd class="mb-15">
+                    <p>검색범위</p>
+                    <ul>
+                        <li v-for="(option, index) in checkOptions2" :key="index">
+                            <input type="checkbox" :id="'check_button_' + index" :name="'check_button_' + index" />
+                            <label :for="'check_button_' + index">{{ option }}</label>
+                        </li>
+                    </ul>
+                </dd>
+                <dd class="mb-15">
+                    <p>검색어</p>
+                    <input type="text">
+                </dd>
+                <dd class="mb-15">
+                    <p>생산연도</p>
+                    <input type="date">
+                    <p class="mark">~</p>
+                    <input type="date">
+                </dd>
+                <dd class="mb-20">
+                    <p>카테고리</p>
+                    <ul>
+                        <li v-for="(option, index) in checkOptions3" :key="index">
+                            <input type="checkbox" :id="'check_button_' + index" :name="'check_button_' + index" />
+                            <label :for="'check_button_' + index">{{ option }}</label>
+                        </li>
+                    </ul>
+                </dd>
+                <dd class="mb-15">
+                    <p>정렬</p>
+                    <ul>
+                        <li v-for="(option, index) in checkOptions4" :key="index">
+                            <input type="radio" :id="'radio_button_' + index" :name="'radio_button_' + index" />
+                            <label :for="'radio_button_' + index">{{ option }}</label>
+                        </li>
+                    </ul>
+                </dd>
+                <div class="btn-group">
+                    <button class="reset"><img :src="reseticon" alt="">
+                        <p>초기화</p>
+                    </button>
+                    <button class="search"><img :src="searchicon" alt="">
+                        <p>검색</p>
+                    </button>
+                </div>
+
+            </dl>
+
+        </form>
+        <div class="search-result">
+            <ul>
+                <li v-for="(resultitem, index) in resultitems" :key="index" class="mb-30">
+                    <div class="flex-sp-bw mb-20">
+                        <div class="resultext">
+                            <img :src="resulticon" alt="">
+                            <p>총 <b>{{ resultitem.count }}개</b>의 사진 기록물이 검색되었습니다. </p>
+                        </div>
+                        <router-link :to="{ path: '/' }" class="gopage">모두보기</router-link>
+                    </div>
+                    <div class="result-box">
+                        <div class="main-img"><img :src="resultitem.img" alt=""></div>
+                        <div class="text-box">
+                            <h5>{{ resultitem.title }}</h5>
+                            <p class="address">{{ resultitem.address }}</p>
+                            <p class="text">{{ resultitem.content }}</p>
+                            <div class="category">
+                                <ul>
+                                    <li v-if="resultitem.category1" class="category1">카테고리1</li>
+            <li v-if="resultitem.category2" class="category2">카테고리2</li>
+                                </ul>
+                            </div>
+                            <div class="date">
+                                <ul>
+                                    <li>생산연도 <b>{{ resultitem.year }}</b></li>
+                                    <li>|</li>
+                                    <li>등록 <b>{{ resultitem.date }}</b></li>
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+                </li>
+            </ul>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            resulticon: "client/resources/images/icon/r-check.png",
+            homeicon: 'client/resources/images/icon/home.png',
+            searchicon: 'client/resources/images/icon/search.png',
+            reseticon: 'client/resources/images/icon/reset.png',
+            righticon: 'client/resources/images/icon/right.png',
+            checkOptions: [
+                '전체',
+                '사진',
+                '영상',
+                '미디어 영상',
+                '보도자료',
+            ],
+            checkOptions2: [
+                '전체',
+                '제목',
+                '내용',
+                '주소',
+            ],
+            checkOptions3: [
+                '카테고리1',
+                '카테고리2',
+                '카테고리3',
+                '카테고리4',
+                '카테고리5',
+            ],
+            checkOptions4: [
+                '최신',
+                '인기',
+            ],
+            resultitems: [
+                {
+                    count: 5,
+                    img: 'client/resources/images/img6.png',
+                    title: '사진 기록물 제목',
+                    address: '경상북도 구미시 송정대로 55',
+                    content: '대한민국 최대의 내륙 산업단지를 보유하고, 서울로부터 277km, 부산으로부터 167km 거리에 있으며, 면적은 615㎢로 경상북도 전체 면적의 3.2%에 달합니다. 인구는 41만 명이고, 선산읍, 고아읍, 산동읍을 비롯한 3읍, 5면, 17개 동으로 구성되어…',
+                    category1: true,
+                    category2: true,
+                    year: 2020,
+                    date: '2021-01-01'
+                },
+                {
+                    count: 3,
+                    img: 'client/resources/images/img6.png',
+                    title: '영상 기록물 제목',
+                    address: '경상북도 구미시 송정대로 55',
+                    content: '대한민국 최대의 내륙 산업단지를 보유하고, 서울로부터 277km, 부산으로부터 167km 거리에 있으며, 면적은 615㎢로 경상북도 전체 면적의 3.2%에 달합니다. 인구는 41만 명이고, 선산읍, 고아읍, 산동읍을 비롯한 3읍, 5면, 17개 동으로 구성되어…',
+                    category1: true,
+                    category2: false,
+                    year: 2021,
+                    date: '2022-01-01'
+                },
+                {
+                    count: 3,
+                    img: 'client/resources/images/img6.png',
+                    title: '미디어 영상 제목',
+                    address: '경상북도 구미시 송정대로 55',
+                    content: '대한민국 최대의 내륙 산업단지를 보유하고, 서울로부터 277km, 부산으로부터 167km 거리에 있으며, 면적은 615㎢로 경상북도 전체 면적의 3.2%에 달합니다. 인구는 41만 명이고, 선산읍, 고아읍, 산동읍을 비롯한 3읍, 5면, 17개 동으로 구성되어…',
+                    category1: true,
+                    category2: false,
+                    year: 2021,
+                    date: '2022-01-01'
+                },
+                {
+                    count: 3,
+                    img: 'client/resources/images/img6.png',
+                    title: '보도자료 제목',
+                    address: '경상북도 구미시 송정대로 55',
+                    content: '대한민국 최대의 내륙 산업단지를 보유하고, 서울로부터 277km, 부산으로부터 167km 거리에 있으며, 면적은 615㎢로 경상북도 전체 면적의 3.2%에 달합니다. 인구는 41만 명이고, 선산읍, 고아읍, 산동읍을 비롯한 3읍, 5면, 17개 동으로 구성되어…',
+                    category1: true,
+                    category2: false,
+                    year: 2021,
+                    date: '2022-01-01'
+                },
+            ]
+        };
+    }
+};
+</script>
client/views/pages/user/TotalSearch.vue
--- client/views/pages/user/TotalSearch.vue
+++ client/views/pages/user/TotalSearch.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="content">
-      <div class="sub-title-area mb-110">
+        <div class="sub-title-area mb-30">
             <h2>통합검색</h2>
             <div class="breadcrumb-list">
                 <ul>
@@ -10,33 +10,184 @@
                     <li>통합검색</li>
                 </ul>
             </div>
-      </div>
-        <form action="search" class="search-form">
+        </div>
+        <form action="search" class="search-form mb-40">
             <dl>
-                <dd class="mb-25">
-                    
-                    <input type="checkbox" id="check_button" name="">
-                    <label for="check_button">선택1</label>
-
+                <dd class="mb-15">
+                    <p>기록유형</p>
+                    <ul>
+                        <li v-for="(option, index) in checkOptions" :key="index">
+                            <input type="checkbox" :id="'check_button_' + index" :name="'check_button_' + index" />
+                            <label :for="'check_button_' + index">{{ option }}</label>
+                        </li>
+                    </ul>
                 </dd>
-                
-              
+                <dd class="mb-15">
+                    <p>검색범위</p>
+                    <ul>
+                        <li v-for="(option, index) in checkOptions2" :key="index">
+                            <input type="checkbox" :id="'check_button_' + index" :name="'check_button_' + index" />
+                            <label :for="'check_button_' + index">{{ option }}</label>
+                        </li>
+                    </ul>
+                </dd>
+                <dd class="mb-15">
+                    <p>검색어</p>
+                    <input type="text">
+                </dd>
+                <dd class="mb-15">
+                    <p>생산연도</p>
+                    <input type="date">
+                    <p class="mark">~</p>
+                    <input type="date">
+                </dd>
+                <dd class="mb-20">
+                    <p>카테고리</p>
+                    <ul>
+                        <li v-for="(option, index) in checkOptions3" :key="index">
+                            <input type="checkbox" :id="'check_button_' + index" :name="'check_button_' + index" />
+                            <label :for="'check_button_' + index">{{ option }}</label>
+                        </li>
+                    </ul>
+                </dd>
+                <dd class="mb-15">
+                    <p>정렬</p>
+                    <ul>
+                        <li v-for="(option, index) in checkOptions4" :key="index">
+                            <input type="radio" :id="'radio_button_' + index" :name="'radio_button_' + index" />
+                            <label :for="'radio_button_' + index">{{ option }}</label>
+                        </li>
+                    </ul>
+                </dd>
+                <div class="btn-group">
+                    <button class="reset"><img :src="reseticon" alt="">
+                        <p>초기화</p>
+                    </button>
+                    <button class="search"><img :src="searchicon" alt="">
+                        <p>검색</p>
+                    </button>
+                </div>
+
             </dl>
-            <!-- Bind the image source dynamically for loginicon -->
-            <button><img :src="loginicon" alt="Login Icon"><span>로그인</span></button>
+
         </form>
+        <div class="search-result">
+            <ul>
+                <li v-for="(resultitem, index) in resultitems" :key="index" class="mb-30">
+                    <div class="flex-sp-bw mb-20">
+                        <div class="resultext">
+                            <img :src="resulticon" alt="">
+                            <p>총 <b>{{ resultitem.count }}개</b>의 사진 기록물이 검색되었습니다. </p>
+                        </div>
+                        <router-link :to="{ path: '/' }" class="gopage">모두보기</router-link>
+                    </div>
+                    <div class="result-box">
+                        <div class="main-img"><img :src="resultitem.img" alt=""></div>
+                        <div class="text-box">
+                            <h5>{{ resultitem.title }}</h5>
+                            <p class="address">{{ resultitem.address }}</p>
+                            <p class="text">{{ resultitem.content }}</p>
+                            <div class="category">
+                                <ul>
+                                    <li v-if="resultitem.category1" class="category1">카테고리1</li>
+            <li v-if="resultitem.category2" class="category2">카테고리2</li>
+                                </ul>
+                            </div>
+                            <div class="date">
+                                <ul>
+                                    <li>생산연도 <b>{{ resultitem.year }}</b></li>
+                                    <li>|</li>
+                                    <li>등록 <b>{{ resultitem.date }}</b></li>
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+                </li>
+            </ul>
+        </div>
     </div>
 </template>
 
 <script>
 export default {
-  data() {
-    return {
-      // Define the image sources
-      homeicon: 'client/resources/images/icon/home.png',
-      loginicon: 'client/resources/images/icon/lock.png',
-      righticon: 'client/resources/images/icon/right.png',
-    };
-  }
+    data() {
+        return {
+            resulticon: "client/resources/images/icon/r-check.png",
+            homeicon: 'client/resources/images/icon/home.png',
+            searchicon: 'client/resources/images/icon/search.png',
+            reseticon: 'client/resources/images/icon/reset.png',
+            righticon: 'client/resources/images/icon/right.png',
+            checkOptions: [
+                '전체',
+                '사진',
+                '영상',
+                '미디어 영상',
+                '보도자료',
+            ],
+            checkOptions2: [
+                '전체',
+                '제목',
+                '내용',
+                '주소',
+            ],
+            checkOptions3: [
+                '카테고리1',
+                '카테고리2',
+                '카테고리3',
+                '카테고리4',
+                '카테고리5',
+            ],
+            checkOptions4: [
+                '최신',
+                '인기',
+            ],
+            resultitems: [
+                {
+                    count: 5,
+                    img: 'client/resources/images/img6.png',
+                    title: '사진 기록물 제목',
+                    address: '경상북도 구미시 송정대로 55',
+                    content: '대한민국 최대의 내륙 산업단지를 보유하고, 서울로부터 277km, 부산으로부터 167km 거리에 있으며, 면적은 615㎢로 경상북도 전체 면적의 3.2%에 달합니다. 인구는 41만 명이고, 선산읍, 고아읍, 산동읍을 비롯한 3읍, 5면, 17개 동으로 구성되어…',
+                    category1: true,
+                    category2: true,
+                    year: 2020,
+                    date: '2021-01-01'
+                },
+                {
+                    count: 3,
+                    img: 'client/resources/images/img6.png',
+                    title: '영상 기록물 제목',
+                    address: '경상북도 구미시 송정대로 55',
+                    content: '대한민국 최대의 내륙 산업단지를 보유하고, 서울로부터 277km, 부산으로부터 167km 거리에 있으며, 면적은 615㎢로 경상북도 전체 면적의 3.2%에 달합니다. 인구는 41만 명이고, 선산읍, 고아읍, 산동읍을 비롯한 3읍, 5면, 17개 동으로 구성되어…',
+                    category1: true,
+                    category2: false,
+                    year: 2021,
+                    date: '2022-01-01'
+                },
+                {
+                    count: 3,
+                    img: 'client/resources/images/img6.png',
+                    title: '미디어 영상 제목',
+                    address: '경상북도 구미시 송정대로 55',
+                    content: '대한민국 최대의 내륙 산업단지를 보유하고, 서울로부터 277km, 부산으로부터 167km 거리에 있으며, 면적은 615㎢로 경상북도 전체 면적의 3.2%에 달합니다. 인구는 41만 명이고, 선산읍, 고아읍, 산동읍을 비롯한 3읍, 5면, 17개 동으로 구성되어…',
+                    category1: true,
+                    category2: false,
+                    year: 2021,
+                    date: '2022-01-01'
+                },
+                {
+                    count: 3,
+                    img: 'client/resources/images/img6.png',
+                    title: '보도자료 제목',
+                    address: '경상북도 구미시 송정대로 55',
+                    content: '대한민국 최대의 내륙 산업단지를 보유하고, 서울로부터 277km, 부산으로부터 167km 거리에 있으며, 면적은 615㎢로 경상북도 전체 면적의 3.2%에 달합니다. 인구는 41만 명이고, 선산읍, 고아읍, 산동읍을 비롯한 3읍, 5면, 17개 동으로 구성되어…',
+                    category1: true,
+                    category2: false,
+                    year: 2021,
+                    date: '2022-01-01'
+                },
+            ]
+        };
+    }
 };
 </script>
Add a comment
List