Commit @25a83da0b70a6ba22c9c1ec8b37a48e7c410e4f0

박정하 04-15

250415 박정하 썸네일 체크박스 선택 오류 개선

@25a83da0b70a6ba22c9c1ec8b37a48e7c410e4f0

9ccde13

25a83da

client/views/layout/Header.vue

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

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


               <li @mouseover="showSubmenu('MENU_00000001')" @mouseleave="hideSubmenu('MENU_00000001')">
                 <p :class="{ 'active-menu': this.$route.path.startsWith('/PicHistory') || this.$route.path.startsWith('/VideoHistory') }">기록물</p>
                 <div class="submenu" v-if="submenuVisible['MENU_00000001']" @mouseover="showSubmenu('MENU_00000001')" @mouseleave="hideSubmenu('MENU_00000001')">
-                  <p :class="{ 'now-menu': this.$route.path.startsWith('/PicHistory') }">• <router-link :to="{ path: '/PicHistorySearch.page' }" @click="hideSubmenu('MENU_00000001')"> 사진 기록물 </router-link>
-                  </p>
+                  <p :class="{ 'now-menu': this.$route.path.startsWith('/PicHistory') }" @click="moveTo('/PicHistorySearch.page', 'MENU_00000001')">• 사진 기록물</p>
                   <div class="hr"></div>
-                  <p :class="{ 'now-menu': this.$route.path.startsWith('/VideoHistory') }">• <router-link :to="{ path: '/VideoHistorySearch.page' }" @click="hideSubmenu('MENU_00000001')"> 영상 기록물 </router-link>
-                  </p>
+                  <p :class="{ 'now-menu': this.$route.path.startsWith('/VideoHistory') }" @click="moveTo('/VideoHistorySearch.page', 'MENU_00000001')">• 영상 기록물</p>
                 </div>
               </li>
               <li @mouseover="showSubmenu('MENU_00000004')" @mouseleave="hideSubmenu('MENU_00000004')">
                 <p :class="{ 'active-menu': this.$route.path.startsWith('/MediaVideo') || this.$route.path.startsWith('/NewsRelease') }">언론에서 바라본 구미시</p>
                 <div class="submenu" v-if="submenuVisible['MENU_00000004']" @mouseover="showSubmenu('MENU_00000004')" @mouseleave="hideSubmenu('MENU_00000004')">
-                  <p :class="{ 'now-menu': this.$route.path.startsWith('/MediaVideo') }">• <router-link :to="{ path: '/MediaVideoSearch.page' }" @click="hideSubmenu('MENU_00000004')"> 미디어 영상 </router-link>
-                  </p>
+                  <p :class="{ 'now-menu': this.$route.path.startsWith('/MediaVideo') }" @click="moveTo('/MediaVideoSearch.page', 'MENU_00000004')">• 미디어 영상</p>
                   <div class="hr"></div>
-                  <p :class="{ 'now-menu': this.$route.path.startsWith('/NewsRelease') }">• <router-link :to="{ path: '/NewsReleaseSearch.page' }" @click="hideSubmenu('MENU_00000004')"> 보도자료 </router-link>
-                  </p>
+                  <p :class="{ 'now-menu': this.$route.path.startsWith('/NewsRelease') }" @click="moveTo('/NewsReleaseSearch.page', 'MENU_00000004')">• 보도자료</p>
                 </div>
               </li>
               <template v-if="$store.state.roles[0]?.authority === 'ROLE_ADMIN'">

       }
     },
 
+    moveTo(path, menuId) {
+      this.hideSubmenu(menuId);
+      this.$router.push({ path });
+    },
+
     logout() {
       // 백엔드 로그아웃 API 호출
       logOutProc()

9ccde13

25a83da

client/views/pages/bbsDcry/photo/PicHistoryDetail.vue

--- client/views/pages/bbsDcry/photo/PicHistoryDetail.vue

+++ client/views/pages/bbsDcry/photo/PicHistoryDetail.vue


           <div class="thumbnail">
             <swiper @swiper="setThumbsSwiper" :spaceBetween="20" :slidesPerView="4" :freeMode="true" :watchSlidesProgress="true" :modules="modules" :navigation="true" class="mySwiper">
               <swiper-slide v-for="(item, idx) of findResult.files" :key="idx">
-                <input type="checkbox" :id="'photo_' + idx" :value="item" v-model="selectedFiles" @click.stop />
-                <img :src="item.filePath" :alt="item.fileNm" />
+                <div class="thumbnail-wrapper">
+                  <div class="checkbox-container" @click.stop>
+                    <input type="checkbox" :id="'photo_' + idx" :value="item" v-model="selectedFiles" />
+                    <label :for="'photo_' + idx"></label>
+                  </div>
+                  <img :src="item.filePath" :alt="item.fileNm" />
+                </div>
               </swiper-slide>
             </swiper>
           </div>

   </div>
 </template>
 <script>
+// Swiper
 import { ref } from 'vue';
-// Import Swiper Vue components
-import { CaretRightOutlined, PauseOutlined } from '@ant-design/icons-vue';
 import { Swiper, SwiperSlide } from 'swiper/vue';
-// Import Swiper styles
+import { FreeMode, Navigation, Thumbs } from 'swiper/modules';
+import { CaretRightOutlined, PauseOutlined } from '@ant-design/icons-vue';
 import 'swiper/css';
 import 'swiper/css/free-mode';
 import 'swiper/css/navigation';
 import 'swiper/css/thumbs';
-// import required modules
-import { FreeMode, Navigation, Thumbs } from 'swiper/modules';
 // COMPONENT
 import ViewerComponent from '../../../component/editor/ViewerComponent.vue';
 // API

 
 export default {
   components: {
-    PauseOutlined,
-    CaretRightOutlined,
     Swiper,
     SwiperSlide,
+    PauseOutlined,
+    CaretRightOutlined,
     ViewerComponent,
   },
 

     };
 
     return {
+      modules: [FreeMode, Navigation, Thumbs],
       thumbsSwiper,
       setThumbsSwiper,
-      modules: [FreeMode, Navigation, Thumbs],
     };
   },
 

Add a comment

Open 0
Closed 0

List

...	...	@@ -11,21 +11,17 @@
11	11	<li @mouseover="showSubmenu('MENU_00000001')" @mouseleave="hideSubmenu('MENU_00000001')">
12	12	<p :class="{ 'active-menu': this.$route.path.startsWith('/PicHistory') \|\| this.$route.path.startsWith('/VideoHistory') }">기록물</p>
13	13	<div class="submenu" v-if="submenuVisible['MENU_00000001']" @mouseover="showSubmenu('MENU_00000001')" @mouseleave="hideSubmenu('MENU_00000001')">
14		- <p :class="{ 'now-menu': this.$route.path.startsWith('/PicHistory') }">• <router-link :to="{ path: '/PicHistorySearch.page' }" @click="hideSubmenu('MENU_00000001')"> 사진 기록물 </router-link>
15		- </p>
	14	+ <p :class="{ 'now-menu': this.$route.path.startsWith('/PicHistory') }" @click="moveTo('/PicHistorySearch.page', 'MENU_00000001')">• 사진 기록물</p>
16	15	<div class="hr"></div>
17		- <p :class="{ 'now-menu': this.$route.path.startsWith('/VideoHistory') }">• <router-link :to="{ path: '/VideoHistorySearch.page' }" @click="hideSubmenu('MENU_00000001')"> 영상 기록물 </router-link>
18		- </p>
	16	+ <p :class="{ 'now-menu': this.$route.path.startsWith('/VideoHistory') }" @click="moveTo('/VideoHistorySearch.page', 'MENU_00000001')">• 영상 기록물</p>
19	17	</div>
20	18	</li>
21	19	<li @mouseover="showSubmenu('MENU_00000004')" @mouseleave="hideSubmenu('MENU_00000004')">
22	20	<p :class="{ 'active-menu': this.$route.path.startsWith('/MediaVideo') \|\| this.$route.path.startsWith('/NewsRelease') }">언론에서 바라본 구미시</p>
23	21	<div class="submenu" v-if="submenuVisible['MENU_00000004']" @mouseover="showSubmenu('MENU_00000004')" @mouseleave="hideSubmenu('MENU_00000004')">
24		- <p :class="{ 'now-menu': this.$route.path.startsWith('/MediaVideo') }">• <router-link :to="{ path: '/MediaVideoSearch.page' }" @click="hideSubmenu('MENU_00000004')"> 미디어 영상 </router-link>
25		- </p>
	22	+ <p :class="{ 'now-menu': this.$route.path.startsWith('/MediaVideo') }" @click="moveTo('/MediaVideoSearch.page', 'MENU_00000004')">• 미디어 영상</p>
26	23	<div class="hr"></div>
27		- <p :class="{ 'now-menu': this.$route.path.startsWith('/NewsRelease') }">• <router-link :to="{ path: '/NewsReleaseSearch.page' }" @click="hideSubmenu('MENU_00000004')"> 보도자료 </router-link>
28		- </p>
	24	+ <p :class="{ 'now-menu': this.$route.path.startsWith('/NewsRelease') }" @click="moveTo('/NewsReleaseSearch.page', 'MENU_00000004')">• 보도자료</p>
29	25	</div>
30	26	</li>
31	27	<template v-if="$store.state.roles[0]?.authority === 'ROLE_ADMIN'">
...	...	@@ -140,6 +136,11 @@
140	136	}
141	137	},
142	138
	139	+ moveTo(path, menuId) {
	140	+ this.hideSubmenu(menuId);
	141	+ this.$router.push({ path });
	142	+ },
	143	+
143	144	logout() {
144	145	// 백엔드 로그아웃 API 호출
145	146	logOutProc()

...	...	@@ -35,8 +35,13 @@
35	35	<div class="thumbnail">
36	36	<swiper @swiper="setThumbsSwiper" :spaceBetween="20" :slidesPerView="4" :freeMode="true" :watchSlidesProgress="true" :modules="modules" :navigation="true" class="mySwiper">
37	37	<swiper-slide v-for="(item, idx) of findResult.files" :key="idx">
38		- <input type="checkbox" :id="'photo_' + idx" :value="item" v-model="selectedFiles" @click.stop />
39		- <img :src="item.filePath" :alt="item.fileNm" />
	38	+ <div class="thumbnail-wrapper">
	39	+ <div class="checkbox-container" @click.stop>
	40	+ <input type="checkbox" :id="'photo_' + idx" :value="item" v-model="selectedFiles" />
	41	+ <label :for="'photo_' + idx"></label>
	42	+ </div>
	43	+ <img :src="item.filePath" :alt="item.fileNm" />
	44	+ </div>
40	45	</swiper-slide>
41	46	</swiper>
42	47	</div>
...	...	@@ -92,17 +97,15 @@
92	97	</div>
93	98	</template>
94	99	<script>
	100	+// Swiper
95	101	import { ref } from 'vue';
96		-// Import Swiper Vue components
97		-import { CaretRightOutlined, PauseOutlined } from '@ant-design/icons-vue';
98	102	import { Swiper, SwiperSlide } from 'swiper/vue';
99		-// Import Swiper styles
	103	+import { FreeMode, Navigation, Thumbs } from 'swiper/modules';
	104	+import { CaretRightOutlined, PauseOutlined } from '@ant-design/icons-vue';
100	105	import 'swiper/css';
101	106	import 'swiper/css/free-mode';
102	107	import 'swiper/css/navigation';
103	108	import 'swiper/css/thumbs';
104		-// import required modules
105		-import { FreeMode, Navigation, Thumbs } from 'swiper/modules';
106	109	// COMPONENT
107	110	import ViewerComponent from '../../../component/editor/ViewerComponent.vue';
108	111	// API
...	...	@@ -111,10 +114,10 @@
111	114
112	115	export default {
113	116	components: {
114		- PauseOutlined,
115		- CaretRightOutlined,
116	117	Swiper,
117	118	SwiperSlide,
	119	+ PauseOutlined,
	120	+ CaretRightOutlined,
118	121	ViewerComponent,
119	122	},
120	123
...	...	@@ -126,9 +129,9 @@
126	129	};
127	130
128	131	return {
	132	+ modules: [FreeMode, Navigation, Thumbs],
129	133	thumbsSwiper,
130	134	setThumbsSwiper,
131		- modules: [FreeMode, Navigation, Thumbs],
132	135	};
133	136	},
134	137

Delete comment