Commit @54b30e5ef174288a046bb52730aa9231a63f7aeb

박정하 03-27

250327 박정하 사진기록물 수정

@54b30e5ef174288a046bb52730aa9231a63f7aeb

a3323d3

54b30e5

client/views/component/listLayout/CardStyleComponent.vue

--- client/views/component/listLayout/CardStyleComponent.vue

+++ client/views/component/listLayout/CardStyleComponent.vue

...	...	@@ -21,7 +21,7 @@
21	21	<ul>
22	22	<li>생산연도 <b>{{ item.prdctnYear ? item.prdctnYear : '-' }}</b></li>
23	23	<li>\|</li>
24		- <li>등록 <b>{{ item.rgsde }}</b></li>
	24	+ <li>등록 <b>{{ $dotFormatDate(item.rgsde) }}</b></li>
25	25	</ul>
26	26	</div>
27	27	</div>

a3323d3

54b30e5

client/views/component/listLayout/ListStyleComponent.vue

--- client/views/component/listLayout/ListStyleComponent.vue

+++ client/views/component/listLayout/ListStyleComponent.vue

...	...	@@ -14,7 +14,7 @@
14	14	<ul>
15	15	<li>생산연도 <b>{{ item.prdctnYear ? item.prdctnYear : '-' }}</b></li>
16	16	<li>\|</li>
17		- <li>등록 <b>{{ item.rgsde }}</b></li>
	17	+ <li>등록 <b>{{ $dotFormatDate(item.rgsde) }}</b></li>
18	18	</ul>
19	19	</div>
20	20	</div>

a3323d3

54b30e5

client/views/pages/user/VideoHistoryDetail.vue

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

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


 <template>
-    <div class="content">
-        <div class="sub-title-area mb-30">
-            <h2>영상 기록물</h2>
-            <div class="breadcrumb-list">
-                <ul>
-                    <li><img :src="homeicon" alt="Home Icon">
-                        <p>기록물</p>
-                    </li>
-                    <li><img :src="righticon" alt=""></li>
-                    <li>영상 기록물</li>
-                </ul>
-            </div>
-        </div>
-        <form action="" class="gallery-form mb-40">
-            <dl class="mb-20">
-                <dd>
-                    <p>영상 기록물 제목1
-                    </p>
-                    <div class="date flex align-center">
-                        <img :src="calendaricon" alt="">
-                        <span>2025.02.28</span>
-                    </div>
-                </dd>
-
-            </dl>
-            <div class="gallery video">
-                    <img :src="eximg" alt="">
-                </div>
-        </form>
-
-        <h3>내용</h3>
-        <form action="" class=" info-form mb-50">
-            <dl>
-                <dd>
-                    <p> 대한민국 최대의 내륙 산업단지를 보유하고, 서울로부터 277km, 부산으로부터 167km 거리에 있으며, 면적은 615㎢로 경상북도 전체 면적의 3.2%에 달합니다. 인구는
-                        41만 명이고, 선산읍, 고아읍, 산동읍을 비롯한 3읍, 5면, 17개 동으로 구성되어 있습니다.</p>
-
-                </dd>
-            </dl>
-        </form>
-
-        <h3>기본정보</h3>
-        <form action="" class="info-form mb-50">
-            <dl>
-                <dd class="mb-20">
-                    <img :src="addressicon" alt="">
-                    <span>주소</span>
-                    <p>경상북도 구미시 송정대로 55</p>
-                </dd>
-                <dd class="mb-20">
-                    <img :src="yearicon" alt="">
-                    <span>생산연도</span>
-                    <p>2017</p>
-
-                </dd>
-                <dd>
-                    <img :src="categoryicon" alt="">
-                    <span>카테고리</span>
-                    <ul class="category">
-                        <li v-if="resultitem.category1" class="category1">카테고리1</li>
-                        <li v-if="resultitem.category2" class="category2">카테고리2</li>
-                    </ul>
-
-                </dd>
-
-            </dl>
-        </form>
-        <div class="btn-group flex-center">
-            <button class="red-line " type="button" @click="fnDeleteUser">삭제</button>
-            <button class="blue-line " type="button" @click="fnUpdateUser">수정</button>
-            <button class="gray-line-bg " type="button" @click="fnUpdateUser">목록</button>
-            <button class="gradient ">다운로드</button>
-        </div>
+  <div class="content">
+    <div class="sub-title-area mb-30">
+      <h2>영상 기록물</h2>
+      <div class="breadcrumb-list">
+        <ul>
+          <li><img :src="homeicon" alt="Home Icon">
+            <p>기록물</p>
+          </li>
+          <li><img :src="righticon" alt=""></li>
+          <li>영상 기록물</li>
+        </ul>
+      </div>
     </div>
+    <form action="" class="gallery-form mb-40">
+      <dl class="mb-20">
+        <dd>
+          <p>영상 기록물 제목1 </p>
+          <div class="date flex align-center">
+            <img :src="calendaricon" alt="">
+            <span>2025.02.28</span>
+          </div>
+        </dd>
+      </dl>
+      <div class="gallery video">
+        <img :src="eximg" alt="">
+      </div>
+    </form>
+    <h3>내용</h3>
+    <form action="" class=" info-form mb-50">
+      <dl>
+        <dd>
+          <p> 대한민국 최대의 내륙 산업단지를 보유하고, 서울로부터 277km, 부산으로부터 167km 거리에 있으며, 면적은 615㎢로 경상북도 전체 면적의 3.2%에 달합니다. 인구는 41만 명이고, 선산읍, 고아읍, 산동읍을 비롯한 3읍, 5면, 17개 동으로 구성되어 있습니다.</p>
+        </dd>
+      </dl>
+    </form>
+    <h3>기본정보</h3>
+    <form action="" class="info-form mb-50">
+      <dl>
+        <dd class="mb-20">
+          <img :src="addressicon" alt="">
+          <span>주소</span>
+          <p>경상북도 구미시 송정대로 55</p>
+        </dd>
+        <dd class="mb-20">
+          <img :src="yearicon" alt="">
+          <span>생산연도</span>
+          <p>2017</p>
+        </dd>
+        <dd>
+          <img :src="categoryicon" alt="">
+          <span>카테고리</span>
+          <ul class="category">
+            <li v-if="resultitem.category1" class="category1">카테고리1</li>
+            <li v-if="resultitem.category2" class="category2">카테고리2</li>
+          </ul>
+        </dd>
+      </dl>
+    </form>
+    <div class="btn-group flex-center">
+      <button class="red-line " type="button" @click="fnDeleteUser">삭제</button>
+      <button class="blue-line " type="button" @click="fnUpdateUser">수정</button>
+      <button class="gray-line-bg " type="button" @click="fnUpdateUser">목록</button>
+      <button class="gradient ">다운로드</button>
+    </div>
+  </div>
 </template>
-
 <script>
 import axios from "axios";
 import { ref } from 'vue';

 import { FreeMode, Navigation, Thumbs } from 'swiper/modules';
 
 export default {
-    components: {
-        PauseOutlined,
-        CaretRightOutlined,
-        Swiper,
-        SwiperSlide,
-    },
-    setup() {
-        const thumbsSwiper = ref(null);
+  components: {
+    PauseOutlined,
+    CaretRightOutlined,
+    Swiper,
+    SwiperSlide,
+  },
+  setup() {
+    const thumbsSwiper = ref(null);
 
-        const setThumbsSwiper = (swiper) => {
-            thumbsSwiper.value = swiper;
-        };
+    const setThumbsSwiper = (swiper) => {
+      thumbsSwiper.value = swiper;
+    };
 
-        return {
-            thumbsSwiper,
-            setThumbsSwiper,
-            modules: [FreeMode, Navigation, Thumbs],
-        };
-    },
-    data() {
-        return {
-            resultitem: {
-                category1: true,
-                category2: true,
-            },
-            calendaricon: 'client/resources/images/icon/calendaricon.png',
-            homeicon: 'client/resources/images/icon/home.png',
-            erroricon: 'client/resources/images/icon/error.png',
-            righticon: 'client/resources/images/icon/right.png',
-            addressicon: 'client/resources/images/icon/addressicon.png',
-            yearicon: 'client/resources/images/icon/yearicon.png',
-            categoryicon: 'client/resources/images/icon/categoryicon.png',
-            eximg: 'client/resources/images/img8.png',
-            slides: [
-                { img: 'client/resources/images/visual.png', alt: 'Slide 1' },
-                { img: 'client/resources/images/visual.png', alt: 'Slide 2' },
-                { img: 'client/resources/images/visual.png', alt: 'Slide 3' },
-                { img: 'client/resources/images/visual.png', alt: 'Slide 3' },
-                { img: 'client/resources/images/visual.png', alt: 'Slide 3' },
-                { img: 'client/resources/images/visual.png', alt: 'Slide 3' },
-                // Add more slides as needed
-            ],
+    return {
+      thumbsSwiper,
+      setThumbsSwiper,
+      modules: [FreeMode, Navigation, Thumbs],
+    };
+  },
+  data() {
+    return {
+      resultitem: {
+        category1: true,
+        category2: true,
+      },
+      calendaricon: 'client/resources/images/icon/calendaricon.png',
+      homeicon: 'client/resources/images/icon/home.png',
+      erroricon: 'client/resources/images/icon/error.png',
+      righticon: 'client/resources/images/icon/right.png',
+      addressicon: 'client/resources/images/icon/addressicon.png',
+      yearicon: 'client/resources/images/icon/yearicon.png',
+      categoryicon: 'client/resources/images/icon/categoryicon.png',
+      eximg: 'client/resources/images/img8.png',
+      slides: [
+        { img: 'client/resources/images/visual.png', alt: 'Slide 1' },
+        { img: 'client/resources/images/visual.png', alt: 'Slide 2' },
+        { img: 'client/resources/images/visual.png', alt: 'Slide 3' },
+        { img: 'client/resources/images/visual.png', alt: 'Slide 3' },
+        { img: 'client/resources/images/visual.png', alt: 'Slide 3' },
+        { img: 'client/resources/images/visual.png', alt: 'Slide 3' },
+        // Add more slides as needed
+      ],
 
-        };
-    },
-    methods: {
-    },
-    watch: {},
-    computed: {
-    },
-    mounted() { },
+    };
+  },
+  methods: {
+  },
+  watch: {},
+  computed: {
+  },
+  mounted() { },
 };
 </script>

a3323d3

54b30e5

client/views/pages/user/VideoHistorySearch.vue

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

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


 <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">
-                        <p>기록물</p>
-                    </li>
-                    <li><img :src="righticon" alt=""></li>
-                    <li>영상 기록물</li>
-                </ul>
-            </div>
-        </div>
-        <div action="search" class="search-form form ">
-            <dl>
-                <dd class="mb-15">
-                    <p>검색범위</p>
-                    <ul>
-                        <li>
-                            <input type="checkbox" id="allScope" v-model="isChkAllScope"
-                                @change="fnChkAllOptions('scope')" />
-                            <label for="allScope">전체</label>
-                        </li>
-                        <li v-for="(scope, idx) in searchType" :key="idx">
-                            <input type="checkbox" :id="idx" :name="searchType" :value="scope.key"
-                                v-model="searchReqDTO.searchType" @change="fnChkOption('scope')" />
-                            <label :for="idx">{{ scope.value }}</label>
-                        </li>
-                    </ul>
-                </dd>
-                <dd class="mb-15">
-                    <p>검색어</p>
-                    <div class="wfull"><input type="text" v-model="searchReqDTO.searchText"></div>
-                </dd>
-                <dd class="mb-15">
-                    <p>생산연도</p>
-                    <input type="date" v-model="searchReqDTO.startYear">
-                    <p class="mark">~</p>
-                    <input type="date" v-model="searchReqDTO.endYear">
-                </dd>
-                <dd class="mb-20">
-                    <p>카테고리</p>
-                    <ul>
-                        <li v-for="(category, idx) of categorys" :key="idx">
-                            <input type="checkbox" :id="category.ctgryId" name="categorys" :value="category.ctgryId"
-                                v-model="searchReqDTO.searchCtgry" />
-                            <label :for="category.ctgryId">{{ category.ctgryNm }}</label>
-                        </li>
-                    </ul>
-                </dd>
-                <dd class="mb-15">
-                    <p>정렬</p>
-                    <ul>
-                        <li v-for="(order, idx) of orders" :key="idx">
-                            <input type="radio" :id="order.key" name="orders" :value="order.key"
-                                v-model="searchReqDTO.order" />
-                            <label :for="order.key">{{ order.value }}</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>
-
-        </div>
-        <div class="search-result">
-            <div class="tabs">
-                <div class="flex-sp-bw mb-20 align-center">
-                    <div class="resultext ">
-                        <img :src="resulticon" alt="">
-                        <p>총 <b>{{ count }}개</b>의 영상 기록물이 검색되었습니다. </p>
-                    </div>
-                    <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)">
-                                <img :src="selectedTab === tab.id ? tab.activeImage : tab.inactiveImage"
-                                    :alt="tab.title" class="tab-icon" />
-                                <p><b>{{ tab.title }}</b></p>
-                            </li>
-                        </ul>
-                        <div class="select-box">
-                            <select v-model="itemsPerPage" @change="changeItemsPerPage">
-                                <option :value="5" selected>5개</option>
-                                <option :value="10">10개</option>
-                                <option :value="15">15개</option>
-                            </select>
-                        </div>
-                    </div>
-
-                </div>
-
-                <div class="tab-content">
-                    <!-- Loop through tabContents, and only display content that matches selectedTab -->
-                    <div v-for="(tabContent, idx) in tabContents" :key="idx">
-                        <!-- Display content only if the tab's ID matches the selectedTab -->
-                        <div v-show="tabContent.id === selectedTab">
-                            <!-- 카드형 Section (Card Layout) -->
-                            <div v-if="tabContent.viewType === 'card'">
-                                <ul class="card-wrap">
-                                    <li v-for="(resultitem, index) in paginatedItems" :key="index" class="mb-30">
-                                        <div class="result-box">
-                                            <!-- Main Image Section -->
-                                            <div class="main-img">
-                                                <img :src="resultitem.img" alt="" class="tab-image" />
-                                            </div>
-                                            <!-- Text Section -->
-                                            <div class="text-box">
-                                                <router-link :to="{ path: '/VideoHistoryDetail.page' }">
-                                                    <h5>{{ resultitem.title }}</h5>
-                                                </router-link>
-
-                                                <p class="address">{{ resultitem.address }}</p>
-                                                <p class="text">{{ resultitem.content }}</p>
-
-                                                <div class="mb-20">
-                                                    <ul class="category">
-                                                        <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>
-
-                                <!-- Empty State if no results in paginatedItems -->
-                                <div v-if="paginatedItems.length === 0" class="no-results">
-                                    <p>등록된 게시물이 없습니다.</p>
-                                </div>
-                            </div>
-
-                            <!-- 리스트형 Section (List Layout) -->
-                            <div v-if="tabContent.viewType === 'list'">
-                                <ul class="list-wrap">
-                                    <li v-for="(resultitem, index) in paginatedItems" :key="index" class="mb-30">
-                                        <div class="text-box">
-                                            <router-link :to="{ path: '/VideoHistoryDetail.page' }">
-                                                    <h5>{{ resultitem.title }}</h5>
-                                                </router-link>
-                                            <p class="address">{{ resultitem.address }}</p>
-
-                                            <div class="flex-sp-bw">
-                                                <div class="mb-20">
-                                                    <ul class="category">
-                                                        <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>
-
-                                <!-- Empty State if no results in paginatedItems -->
-                                <div v-if="paginatedItems.length === 0" class="no-results">
-                                    <p>등록된 게시물이 없습니다.</p>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-
-            <div class="btn-group flex-end mt-40"><button class="register"> <router-link
-                        :to="{ path: '/VideoHistoryInsert.page' }">등록</router-link></button></div>
-            <div class="pagination flex-center mt-40">
-
-                <!-- Previous and Next Page Buttons -->
-                <button>
-                    <DoubleLeftOutlined />
-                </button>
-                <button @click="previousPage" :disabled="currentPage === 1">
-                    <LeftOutlined />
-                </button>
-                <button class="page-number clicked">1</button>
-                <button @click="nextPage" :disabled="currentPage === totalPages">
-                    <RightOutlined />
-                </button>
-                <button>
-                    <DoubleRightOutlined />
-                </button>
-            </div>
-        </div>
+  <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">
+            <p>기록물</p>
+          </li>
+          <li><img :src="righticon" alt=""></li>
+          <li>영상 기록물</li>
+        </ul>
+      </div>
     </div>
-
+    <div action="search" class="search-form form ">
+      <dl>
+        <dd class="mb-15">
+          <p>검색범위</p>
+          <ul>
+            <li>
+              <input type="checkbox" id="allScope" v-model="isChkAllScope" @change="fnChkAllOptions('scope')" />
+              <label for="allScope">전체</label>
+            </li>
+            <li v-for="(scope, idx) in searchType" :key="idx">
+              <input type="checkbox" :id="idx" :name="searchType" :value="scope.key" v-model="searchReqDTO.searchType" @change="fnChkOption('scope')" />
+              <label :for="idx">{{ scope.value }}</label>
+            </li>
+          </ul>
+        </dd>
+        <dd class="mb-15">
+          <p>검색어</p>
+          <div class="wfull"><input type="text" v-model="searchReqDTO.searchText"></div>
+        </dd>
+        <dd class="mb-15">
+          <p>생산연도</p>
+          <input type="date" v-model="searchReqDTO.startYear">
+          <p class="mark">~</p>
+          <input type="date" v-model="searchReqDTO.endYear">
+        </dd>
+        <dd class="mb-20">
+          <p>카테고리</p>
+          <ul>
+            <li v-for="(category, idx) of categorys" :key="idx">
+              <input type="checkbox" :id="category.ctgryId" name="categorys" :value="category.ctgryId" v-model="searchReqDTO.searchCtgry" />
+              <label :for="category.ctgryId">{{ category.ctgryNm }}</label>
+            </li>
+          </ul>
+        </dd>
+        <dd class="mb-15">
+          <p>정렬</p>
+          <ul>
+            <li v-for="(order, idx) of orders" :key="idx">
+              <input type="radio" :id="order.key" name="orders" :value="order.key" v-model="searchReqDTO.order" />
+              <label :for="order.key">{{ order.value }}</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>
+    </div>
+    <div class="search-result">
+      <div class="tabs">
+        <div class="flex-sp-bw mb-20 align-center">
+          <div class="resultext ">
+            <img :src="resulticon" alt="">
+            <p>총 <b>{{ count }}개</b>의 영상 기록물이 검색되었습니다. </p>
+          </div>
+          <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)">
+                <img :src="selectedTab === tab.id ? tab.activeImage : tab.inactiveImage" :alt="tab.title" class="tab-icon" />
+                <p><b>{{ tab.title }}</b></p>
+              </li>
+            </ul>
+            <div class="select-box">
+              <select v-model="itemsPerPage" @change="changeItemsPerPage">
+                <option :value="5" selected>5개</option>
+                <option :value="10">10개</option>
+                <option :value="15">15개</option>
+              </select>
+            </div>
+          </div>
+        </div>
+        <div class="tab-content">
+          <!-- Loop through tabContents, and only display content that matches selectedTab -->
+          <div v-for="(tabContent, idx) in tabContents" :key="idx">
+            <!-- Display content only if the tab's ID matches the selectedTab -->
+            <div v-show="tabContent.id === selectedTab">
+              <!-- 카드형 Section (Card Layout) -->
+              <div v-if="tabContent.viewType === 'card'">
+                <ul class="card-wrap">
+                  <li v-for="(resultitem, index) in paginatedItems" :key="index" class="mb-30">
+                    <div class="result-box">
+                      <!-- Main Image Section -->
+                      <div class="main-img">
+                        <img :src="resultitem.img" alt="" class="tab-image" />
+                      </div>
+                      <!-- Text Section -->
+                      <div class="text-box">
+                        <router-link :to="{ path: '/VideoHistoryDetail.page' }">
+                          <h5>{{ resultitem.title }}</h5>
+                        </router-link>
+                        <p class="address">{{ resultitem.address }}</p>
+                        <p class="text">{{ resultitem.content }}</p>
+                        <div class="mb-20">
+                          <ul class="category">
+                            <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>
+                <!-- Empty State if no results in paginatedItems -->
+                <div v-if="paginatedItems.length === 0" class="no-results">
+                  <p>등록된 게시물이 없습니다.</p>
+                </div>
+              </div>
+              <!-- 리스트형 Section (List Layout) -->
+              <div v-if="tabContent.viewType === 'list'">
+                <ul class="list-wrap">
+                  <li v-for="(resultitem, index) in paginatedItems" :key="index" class="mb-30">
+                    <div class="text-box">
+                      <router-link :to="{ path: '/VideoHistoryDetail.page' }">
+                        <h5>{{ resultitem.title }}</h5>
+                      </router-link>
+                      <p class="address">{{ resultitem.address }}</p>
+                      <div class="flex-sp-bw">
+                        <div class="mb-20">
+                          <ul class="category">
+                            <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>
+                <!-- Empty State if no results in paginatedItems -->
+                <div v-if="paginatedItems.length === 0" class="no-results">
+                  <p>등록된 게시물이 없습니다.</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="btn-group flex-end mt-40"><button class="register"> <router-link :to="{ path: '/VideoHistoryInsert.page' }">등록</router-link></button></div>
+      <div class="pagination flex-center mt-40">
+        <!-- Previous and Next Page Buttons -->
+        <button>
+          <DoubleLeftOutlined />
+        </button>
+        <button @click="previousPage" :disabled="currentPage === 1">
+          <LeftOutlined />
+        </button>
+        <button class="page-number clicked">1</button>
+        <button @click="nextPage" :disabled="currentPage === totalPages">
+          <RightOutlined />
+        </button>
+        <button>
+          <DoubleRightOutlined />
+        </button>
+      </div>
+    </div>
+  </div>
 </template>
 <script>
 import { DoubleLeftOutlined, LeftOutlined, RightOutlined, DoubleRightOutlined } from '@ant-design/icons-vue';
 import { findAllCategoryProc } from "../../../resources/api/category"; // 카테고리 목록 검색
 
 export default {
-    components: {
-        DoubleLeftOutlined,
-        LeftOutlined,
-        RightOutlined,
-        DoubleRightOutlined,
+  components: {
+    DoubleLeftOutlined,
+    LeftOutlined,
+    RightOutlined,
+    DoubleRightOutlined,
+  },
+  data() {
+    return {
+      selectedTab: 1,
+      // 검색용 객체
+      searchReqDTO: {
+        searchType: [],
+        searchText: null,
+        startYear: null,
+        endYear: null,
+        searchTy: null,
+        searchCtgry: [],
+        order: "rgsde",
+      },
+      tabs: [
+
+        {
+          id: 1,
+          title: "카드형",
+          activeImage: "client/resources/images/list_icon01_on.png", // Active tab image
+          inactiveImage: "client/resources/images/list_icon01_off.png",
+        },
+        {
+          id: 2,
+          title: "리스트형",
+          activeImage: "client/resources/images/list_icon02_on.png", // Active tab image
+          inactiveImage: "client/resources/images/list_icon02_off.png",
+        },
+      ],
+      tabContents: [
+        { id: 1, viewType: 'card', list: [{ sj: 'Item 1', rgsde: '2025-03-01', files: [{ filePath: 'image1.png' }] }] },
+        { id: 2, viewType: 'list', list: [{ sj: 'Item 2', rgsde: '2025-03-02', files: [{ filePath: 'image2.png' }] }] },
+      ],
+      paginatedItems: [],
+      resultitems: [
+        {
+          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'
+        },
+
+      ],
+      currentPage: 1, // Current page number
+      itemsPerPage: 5,
+      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',
+      count: 23,
+      checkOptions: [
+        '전체',
+        '사진',
+        '영상',
+        '미디어 영상',
+        '보도자료',
+      ],
+      checkOptions2: [
+        '전체',
+        '제목',
+        '내용',
+        '주소',
+      ],
+      checkOptions3: [
+        '카테고리1',
+        '카테고리2',
+        '카테고리3',
+        '카테고리4',
+        '카테고리5',
+      ],
+      checkOptions4: [
+        '최신',
+        '인기',
+      ],
+      isChkAllScope: false, // 검색범위 전체 체크 여부
+      searchType: [
+        { key: "sj", value: "제목" },
+        { key: "cn", value: "내용" },
+        { key: "adres", value: "주소" },
+      ], // 검색범위 목록
+      categorys: [], // 카테고리 목록
+      orders: [
+        { key: "rgsde", value: "최신" },
+        { key: "rdcnt", value: "인기" },
+      ], // 정렬 목록
+    };
+  },
+  computed: {
+    // Total number of pages
+    totalPages() {
+      return Math.ceil(this.resultitems.length / this.itemsPerPage);
     },
-    data() {
-        return {
-            selectedTab: 1,
-            // 검색용 객체
-            searchReqDTO: {
-                searchType: [],
-                searchText: null,
-                startYear: null,
-                endYear: null,
-                searchTy: null,
-                searchCtgry: [],
-                order: "rgsde",
-            },
-            tabs: [
 
-                {
-                    id: 1,
-                    title: "카드형",
-                    activeImage: "client/resources/images/list_icon01_on.png", // Active tab image
-                    inactiveImage: "client/resources/images/list_icon01_off.png",
-                },
-                {
-                    id: 2,
-                    title: "리스트형",
-                    activeImage: "client/resources/images/list_icon02_on.png", // Active tab image
-                    inactiveImage: "client/resources/images/list_icon02_off.png",
-                },
-            ],
-            tabContents: [
-                { id: 1, viewType: 'card', list: [{ sj: 'Item 1', rgsde: '2025-03-01', files: [{ filePath: 'image1.png' }] }] },
-                { id: 2, viewType: 'list', list: [{ sj: 'Item 2', rgsde: '2025-03-02', files: [{ filePath: 'image2.png' }] }] },
-            ],
-            paginatedItems: [],
-            resultitems: [
-                {
-                    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'
-                },
-
-            ],
-            currentPage: 1, // Current page number
-            itemsPerPage: 5,
-            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',
-            count: 23,
-            checkOptions: [
-                '전체',
-                '사진',
-                '영상',
-                '미디어 영상',
-                '보도자료',
-            ],
-            checkOptions2: [
-                '전체',
-                '제목',
-                '내용',
-                '주소',
-            ],
-            checkOptions3: [
-                '카테고리1',
-                '카테고리2',
-                '카테고리3',
-                '카테고리4',
-                '카테고리5',
-            ],
-            checkOptions4: [
-                '최신',
-                '인기',
-            ],
-            isChkAllScope: false, // 검색범위 전체 체크 여부
-            searchType: [
-                { key: "sj", value: "제목" },
-                { key: "cn", value: "내용" },
-                { key: "adres", value: "주소" },
-            ], // 검색범위 목록
-            categorys: [], // 카테고리 목록
-            orders: [
-                { key: "rgsde", value: "최신" },
-                { key: "rdcnt", value: "인기" },
-            ], // 정렬 목록
-        };
+    // Paginated items based on current page and items per page
+    paginatedItems() {
+      const start = (this.currentPage - 1) * this.itemsPerPage;
+      const end = start + this.itemsPerPage;
+      return this.resultitems.slice(start, end);
     },
-    computed: {
-        // Total number of pages
-        totalPages() {
-            return Math.ceil(this.resultitems.length / this.itemsPerPage);
-        },
+  },
+  created() {
+    // 초기 데이터 세팅
+    this.isChkAllScope = true;
+    this.searchReqDTO.searchType = this.searchType.map(item => item.key);
+    this.searchReqDTO.order = this.orders[0].key
 
-        // Paginated items based on current page and items per page
-        paginatedItems() {
-            const start = (this.currentPage - 1) * this.itemsPerPage;
-            const end = start + this.itemsPerPage;
-            return this.resultitems.slice(start, end);
-        },
+    this.fnFindCategorys(); // 카테고리 목록 조회 (검색조건 없음)
+  },
+  methods: {
+    selectTab(tabId) {
+      this.selectedTab = tabId; // Update the selected tab index
     },
-    created() {
-        // 초기 데이터 세팅
-        this.isChkAllScope = true;
-        this.searchReqDTO.searchType = this.searchType.map(item => item.key);
-        this.searchReqDTO.order = this.orders[0].key
-
-        this.fnFindCategorys(); // 카테고리 목록 조회 (검색조건 없음)
+    // Change the number of items displayed per page
+    changeItemsPerPage() {
+      this.currentPage = 1; // Reset to first page when changing items per page
     },
-    methods: {
-        selectTab(tabId) {
-            this.selectedTab = tabId; // Update the selected tab index
-        },
-        // Change the number of items displayed per page
-        changeItemsPerPage() {
-            this.currentPage = 1; // Reset to first page when changing items per page
-        },
-        previousPage() {
-            if (this.currentPage > 1) {
-                this.currentPage--;
-            }
-        },
-
-        // Go to the next page
-        nextPage() {
-            if (this.currentPage < this.totalPages) {
-                this.currentPage++;
-            }
-        },
-        isChkAllScope: false, // 검색범위 전체 체크 여부
-        searchType: [
-            { key: "sj", value: "제목" },
-            { key: "cn", value: "내용" },
-            { key: "adres", value: "주소" },
-        ], // 검색범위 목록
-        categorys: [], // 카테고리 목록
-        orders: [
-            { key: "rgsde", value: "최신" },
-            { key: "rdcnt", value: "인기" },
-        ], // 정렬 목록
-
-        async fnFindCategorys() {
-            try {
-                const response = await findAllCategoryProc();
-                this.categorys = response.data.data.ctgry;
-            } catch (error) {
-                if (error.response) {
-                    console.log("에러 응답:", error.response.data);
-                }
-                console.error("Error:", error);
-            }
-        },
-
-        // 통합검색
-        async fnFindAllDatas() {
-            try {
-                let params = {};
-                if (this.searchReqDTO.searchRecord.length > 0) {
-                    params.searchRecords = this.searchReqDTO.searchRecord.join(',');
-                }
-                if (this.searchReqDTO.searchType.length > 0) {
-                    params.searchTypes = this.searchReqDTO.searchType.join(',');
-                }
-                if (this.searchReqDTO.searchCtgry.length > 0) {
-                    params.searchCtgries = this.searchReqDTO.searchCtgry.join(',');
-                }
-                params.searchText = this.searchReqDTO.searchText;
-                params.startYear = this.searchReqDTO.startYear;
-                params.endYear = this.searchReqDTO.endYear;
-                params.order = this.searchReqDTO.order;
-
-                // API 호출
-                const response = await findAllDatas(params);
-                this.searchResult = response.data.data.searchResult;
-            } catch (error) {
-                if (error.response) {
-                    console.log("에러 응답:", error.response.data);
-                }
-                console.error("Error:", error);
-            }
-        },
+    previousPage() {
+      if (this.currentPage > 1) {
+        this.currentPage--;
+      }
     },
 
+    // Go to the next page
+    nextPage() {
+      if (this.currentPage < this.totalPages) {
+        this.currentPage++;
+      }
+    },
+    isChkAllScope: false, // 검색범위 전체 체크 여부
+    searchType: [
+      { key: "sj", value: "제목" },
+      { key: "cn", value: "내용" },
+      { key: "adres", value: "주소" },
+    ], // 검색범위 목록
+    categorys: [], // 카테고리 목록
+    orders: [
+      { key: "rgsde", value: "최신" },
+      { key: "rdcnt", value: "인기" },
+    ], // 정렬 목록
+
+    async fnFindCategorys() {
+      try {
+        const response = await findAllCategoryProc();
+        this.categorys = response.data.data.ctgry;
+      } catch (error) {
+        if (error.response) {
+          console.log("에러 응답:", error.response.data);
+        }
+        console.error("Error:", error);
+      }
+    },
+
+    // 통합검색
+    async fnFindAllDatas() {
+      try {
+        let params = {};
+        if (this.searchReqDTO.searchRecord.length > 0) {
+          params.searchRecords = this.searchReqDTO.searchRecord.join(',');
+        }
+        if (this.searchReqDTO.searchType.length > 0) {
+          params.searchTypes = this.searchReqDTO.searchType.join(',');
+        }
+        if (this.searchReqDTO.searchCtgry.length > 0) {
+          params.searchCtgries = this.searchReqDTO.searchCtgry.join(',');
+        }
+        params.searchText = this.searchReqDTO.searchText;
+        params.startYear = this.searchReqDTO.startYear;
+        params.endYear = this.searchReqDTO.endYear;
+        params.order = this.searchReqDTO.order;
+
+        // API 호출
+        const response = await findAllDatas(params);
+        this.searchResult = response.data.data.searchResult;
+      } catch (error) {
+        if (error.response) {
+          console.log("에러 응답:", error.response.data);
+        }
+        console.error("Error:", error);
+      }
+    },
+  },
+
 
 
 };

Add a comment

Open 0
Closed 0

List

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

Delete comment