Commit @011f48428b8d89b1cfd77058a327c771bb3e46f9

류윤주 04-16

250416 류윤주 스와이퍼 수정

@011f48428b8d89b1cfd77058a327c771bb3e46f9

d5fa557

011f484

client/views/pages/adm/boardManagement/template/galleryTemplate/GallerySelectListOne.vue

--- client/views/pages/adm/boardManagement/template/galleryTemplate/GallerySelectListOne.vue

+++ client/views/pages/adm/boardManagement/template/galleryTemplate/GallerySelectListOne.vue


               <div class="form-content grid-none overflow-y">
                 <div ref="first">
                     <div class="gallery-wrap">
-                      <div class="swiper mySwiper2">
+                      <div v-if="imgFileList.length > 0" class="swiper mySwiper2">
                         <div class="swiper-wrapper">
                           <div class="swiper-slide"
                             v-for="(item, index) in imgFileList"

                         </div>
                       </div>
 
-                      <div thumbsSlider="" class="swiper mySwiper">
+                      <div v-if="imgFileList.length > 0" thumbsSlider="" class="swiper mySwiper">
                         <div class="swiper-wrapper">
                           <div class="swiper-slide"
                           v-for="(item, index) in imgFileList"

 import DOMPurify from "dompurify";
 import "../../../../../component/ckeditor5/ckeditor.css";
 import { mdiDownload } from "@mdi/js";
+import Swiper from 'swiper/bundle';
+
 export default {
   mixins: [queryParams],
   data() {

       upCmntId: null,
       cmnt: {},
       cmntList: [],
+      gallerySwiperInstance1: null,
+      gallerySwiperInstance2: null,
     };
   },
   created() {

         }
       });
     },
+    // Swiper 인스턴스 초기화 메서드
+    initSwipers() {
+      // 두 번째 Swiper 인스턴스 생성 (gallerySwiper2)
+      this.gallerySwiperInstance2 = new Swiper('.mySwiper', {
+          loop: true,
+          spaceBetween: 10,
+          slidesPerView: 4,
+          freeMode: true,
+          watchSlidesProgress: true
+          // 추가적인 설정 가능
+      });        
+      // 첫 번째 Swiper 인스턴스 생성 (gallerySwiper)
+      this.gallerySwiperInstance1 = new Swiper('.mySwiper2', {
+          spaceBetween: 10,
+          navigation: {
+              nextEl: '.gall-next',
+              prevEl: '.gall-prev'
+          },
+          thumbs: {
+              swiper: this.gallerySwiperInstance2,
+          },
+      });
+    },
+
+    // Swiper 인스턴스 파괴
+    destroySwipers() {
+    if (this.gallerySwiperInstance1) {
+        this.gallerySwiperInstance1.destroy();
+        this.gallerySwiperInstance1 = null;
+    }
+    else if (this.gallerySwiperInstance2) {
+        this.gallerySwiperInstance2.destroy();
+        this.gallerySwiperInstance2 = null;
+    }
+
+    },
   },
   watch: {
     $route(to, from) {

       },
       deep: true,
     },
+    imgFileList: {
+      handler(newVal) {
+          if (newVal.length > 0) {
+            console.log("갤러리",newVal)
+              // 기존의 swiper 인스턴스가 있으면 파괴하고 다시 초기화
+              if (this.gallerySwiperInstance1 && this.gallerySwiperInstance2) {
+                  this.gallerySwiperInstance1.destroy();
+                  this.gallerySwiperInstance2.destroy();
+              }
+              this.$nextTick(() => {                       
+                  this.initSwipers();
+              });
+          }
+
+      },
+      deep: true // 객체 또는 배열 내부의 변경도 감지
+    }
   },
   computed: {
     sanitizedContent() {

d5fa557

011f484

package-lock.json

--- package-lock.json

+++ package-lock.json


         "moment": "^2.30.1",
         "new-line": "^1.1.1",
         "pg": "8.8.0",
-        "swiper": "^5.3.7",
+        "swiper": "^11.1.5",
         "url-loader": "4.1.1",
         "vue": "3.2.40",
         "vue-cookies": "^1.8.4",

       "funding": {
         "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
       }
-    },
-    "node_modules/dom7": {
-      "version": "2.1.5",
-      "resolved": "https://registry.npmjs.org/dom7/-/dom7-2.1.5.tgz",
-      "integrity": "sha512-xnhwVgyOh3eD++/XGtH+5qBwYTgCm0aW91GFgPJ3XG+jlsRLyJivnbP0QmUBFhI+Oaz9FV0s7cxgXHezwOEBYA==",
-      "license": "MIT",
-      "dependencies": {
-        "ssr-window": "^2.0.0"
-      }
-    },
-    "node_modules/dom7/node_modules/ssr-window": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/ssr-window/-/ssr-window-2.0.0.tgz",
-      "integrity": "sha512-NXzN+/HPObKAx191H3zKlYomE5WrVIkoCB5IaSdvKokxTpjBdWfr0RaP+1Z5KOfDT0ZVz+2tdtiBkhsEQ9p+0A==",
-      "license": "MIT"
     },
     "node_modules/domelementtype": {
       "version": "2.3.0",

       "dev": true,
       "license": "BSD-3-Clause"
     },
-    "node_modules/ssr-window": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/ssr-window/-/ssr-window-1.0.1.tgz",
-      "integrity": "sha512-dgFqB+f00LJTEgb6UXhx0h+SrG50LJvti2yMKMqAgzfUmUXZrLSv2fjULF7AWGwK25EXu8+smLR3jYsJQChPsg==",
-      "license": "MIT"
-    },
     "node_modules/ssri": {
       "version": "9.0.1",
       "resolved": "https://registry.npmjs.org/ssri/-/ssri-9.0.1.tgz",

       "integrity": "sha512-djbJ/vZKZO+gPoSDThGNpKDO+o+bAeA4XQKovvkNCqnIS2t+S4qnLAGQhyyrulhCFRl1WWzAp0wUDV8PpTVU3g=="
     },
     "node_modules/swiper": {
-      "version": "5.3.7",
-      "resolved": "https://registry.npmjs.org/swiper/-/swiper-5.3.7.tgz",
-      "integrity": "sha512-BFpXllmUNj1k/Uz6FRW7ykZfUfeCpfqUZxOxeTFZKYy3gv/kOWULHjwy0xlQIJdsiVGF5nZgRG2VbVl6XWy3gw==",
-      "hasInstallScript": true,
+      "version": "11.2.6",
+      "resolved": "https://registry.npmjs.org/swiper/-/swiper-11.2.6.tgz",
+      "integrity": "sha512-8aXpYKtjy3DjcbzZfz+/OX/GhcU5h+looA6PbAzHMZT6ESSycSp9nAjPCenczgJyslV+rUGse64LMGpWE3PX9Q==",
+      "funding": [
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/swiperjs"
+        },
+        {
+          "type": "open_collective",
+          "url": "http://opencollective.com/swiper"
+        }
+      ],
       "license": "MIT",
-      "dependencies": {
-        "dom7": "^2.1.3",
-        "ssr-window": "^1.0.1"
-      },
       "engines": {
         "node": ">= 4.7.0"
-      },
-      "funding": {
-        "type": "patreon",
-        "url": "https://www.patreon.com/vladimirkharlampidi"
       }
     },
     "node_modules/tapable": {

d5fa557

011f484

package.json

--- package.json

+++ package.json

...	...	@@ -20,7 +20,7 @@
20	20	"moment": "^2.30.1",
21	21	"new-line": "^1.1.1",
22	22	"pg": "8.8.0",
23		- "swiper": "^5.3.7",
	23	+ "swiper": "^11.1.5",
24	24	"url-loader": "4.1.1",
25	25	"vue": "3.2.40",
26	26	"vue-cookies": "^1.8.4",

Add a comment

Open 0
Closed 0

List

...	...	@@ -25,7 +25,7 @@
25	25	"moment": "^2.30.1",
26	26	"new-line": "^1.1.1",
27	27	"pg": "8.8.0",
28		- "swiper": "^5.3.7",
	28	+ "swiper": "^11.1.5",
29	29	"url-loader": "4.1.1",
30	30	"vue": "3.2.40",
31	31	"vue-cookies": "^1.8.4",
...	...	@@ -3020,21 +3020,6 @@
3020	3020	"funding": {
3021	3021	"url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
3022	3022	}
3023		- },
3024		- "node_modules/dom7": {
3025		- "version": "2.1.5",
3026		- "resolved": "https://registry.npmjs.org/dom7/-/dom7-2.1.5.tgz",
3027		- "integrity": "sha512-xnhwVgyOh3eD++/XGtH+5qBwYTgCm0aW91GFgPJ3XG+jlsRLyJivnbP0QmUBFhI+Oaz9FV0s7cxgXHezwOEBYA==",
3028		- "license": "MIT",
3029		- "dependencies": {
3030		- "ssr-window": "^2.0.0"
3031		- }
3032		- },
3033		- "node_modules/dom7/node_modules/ssr-window": {
3034		- "version": "2.0.0",
3035		- "resolved": "https://registry.npmjs.org/ssr-window/-/ssr-window-2.0.0.tgz",
3036		- "integrity": "sha512-NXzN+/HPObKAx191H3zKlYomE5WrVIkoCB5IaSdvKokxTpjBdWfr0RaP+1Z5KOfDT0ZVz+2tdtiBkhsEQ9p+0A==",
3037		- "license": "MIT"
3038	3023	},
3039	3024	"node_modules/domelementtype": {
3040	3025	"version": "2.3.0",
...	...	@@ -7123,12 +7108,6 @@
7123	7108	"dev": true,
7124	7109	"license": "BSD-3-Clause"
7125	7110	},
7126		- "node_modules/ssr-window": {
7127		- "version": "1.0.1",
7128		- "resolved": "https://registry.npmjs.org/ssr-window/-/ssr-window-1.0.1.tgz",
7129		- "integrity": "sha512-dgFqB+f00LJTEgb6UXhx0h+SrG50LJvti2yMKMqAgzfUmUXZrLSv2fjULF7AWGwK25EXu8+smLR3jYsJQChPsg==",
7130		- "license": "MIT"
7131		- },
7132	7111	"node_modules/ssri": {
7133	7112	"version": "9.0.1",
7134	7113	"resolved": "https://registry.npmjs.org/ssri/-/ssri-9.0.1.tgz",
...	...	@@ -7354,21 +7333,22 @@
7354	7333	"integrity": "sha512-djbJ/vZKZO+gPoSDThGNpKDO+o+bAeA4XQKovvkNCqnIS2t+S4qnLAGQhyyrulhCFRl1WWzAp0wUDV8PpTVU3g=="
7355	7334	},
7356	7335	"node_modules/swiper": {
7357		- "version": "5.3.7",
7358		- "resolved": "https://registry.npmjs.org/swiper/-/swiper-5.3.7.tgz",
7359		- "integrity": "sha512-BFpXllmUNj1k/Uz6FRW7ykZfUfeCpfqUZxOxeTFZKYy3gv/kOWULHjwy0xlQIJdsiVGF5nZgRG2VbVl6XWy3gw==",
7360		- "hasInstallScript": true,
	7336	+ "version": "11.2.6",
	7337	+ "resolved": "https://registry.npmjs.org/swiper/-/swiper-11.2.6.tgz",
	7338	+ "integrity": "sha512-8aXpYKtjy3DjcbzZfz+/OX/GhcU5h+looA6PbAzHMZT6ESSycSp9nAjPCenczgJyslV+rUGse64LMGpWE3PX9Q==",
	7339	+ "funding": [
	7340	+ {
	7341	+ "type": "patreon",
	7342	+ "url": "https://www.patreon.com/swiperjs"
	7343	+ },
	7344	+ {
	7345	+ "type": "open_collective",
	7346	+ "url": "http://opencollective.com/swiper"
	7347	+ }
	7348	+ ],
7361	7349	"license": "MIT",
7362		- "dependencies": {
7363		- "dom7": "^2.1.3",
7364		- "ssr-window": "^1.0.1"
7365		- },
7366	7350	"engines": {
7367	7351	"node": ">= 4.7.0"
7368		- },
7369		- "funding": {
7370		- "type": "patreon",
7371		- "url": "https://www.patreon.com/vladimirkharlampidi"
7372	7352	}
7373	7353	},
7374	7354	"node_modules/tapable": {

...	...	@@ -17,7 +17,7 @@
17	17	<div class="form-content grid-none overflow-y">
18	18	<div ref="first">
19	19	<div class="gallery-wrap">
20		- <div class="swiper mySwiper2">
	20	+ <div v-if="imgFileList.length > 0" class="swiper mySwiper2">
21	21	<div class="swiper-wrapper">
22	22	<div class="swiper-slide"
23	23	v-for="(item, index) in imgFileList"
...	...	@@ -28,7 +28,7 @@
28	28	</div>
29	29	</div>
30	30
31		- <div thumbsSlider="" class="swiper mySwiper">
	31	+ <div v-if="imgFileList.length > 0" thumbsSlider="" class="swiper mySwiper">
32	32	<div class="swiper-wrapper">
33	33	<div class="swiper-slide"
34	34	v-for="(item, index) in imgFileList"
...	...	@@ -168,6 +168,8 @@
168	168	import DOMPurify from "dompurify";
169	169	import "../../../../../component/ckeditor5/ckeditor.css";
170	170	import { mdiDownload } from "@mdi/js";
	171	+import Swiper from 'swiper/bundle';
	172	+
171	173	export default {
172	174	mixins: [queryParams],
173	175	data() {
...	...	@@ -196,6 +198,8 @@
196	198	upCmntId: null,
197	199	cmnt: {},
198	200	cmntList: [],
	201	+ gallerySwiperInstance1: null,
	202	+ gallerySwiperInstance2: null,
199	203	};
200	204	},
201	205	created() {
...	...	@@ -390,6 +394,42 @@
390	394	}
391	395	});
392	396	},
	397	+ // Swiper 인스턴스 초기화 메서드
	398	+ initSwipers() {
	399	+ // 두 번째 Swiper 인스턴스 생성 (gallerySwiper2)
	400	+ this.gallerySwiperInstance2 = new Swiper('.mySwiper', {
	401	+ loop: true,
	402	+ spaceBetween: 10,
	403	+ slidesPerView: 4,
	404	+ freeMode: true,
	405	+ watchSlidesProgress: true
	406	+ // 추가적인 설정 가능
	407	+ });
	408	+ // 첫 번째 Swiper 인스턴스 생성 (gallerySwiper)
	409	+ this.gallerySwiperInstance1 = new Swiper('.mySwiper2', {
	410	+ spaceBetween: 10,
	411	+ navigation: {
	412	+ nextEl: '.gall-next',
	413	+ prevEl: '.gall-prev'
	414	+ },
	415	+ thumbs: {
	416	+ swiper: this.gallerySwiperInstance2,
	417	+ },
	418	+ });
	419	+ },
	420	+
	421	+ // Swiper 인스턴스 파괴
	422	+ destroySwipers() {
	423	+ if (this.gallerySwiperInstance1) {
	424	+ this.gallerySwiperInstance1.destroy();
	425	+ this.gallerySwiperInstance1 = null;
	426	+ }
	427	+ else if (this.gallerySwiperInstance2) {
	428	+ this.gallerySwiperInstance2.destroy();
	429	+ this.gallerySwiperInstance2 = null;
	430	+ }
	431	+
	432	+ },
393	433	},
394	434	watch: {
395	435	$route(to, from) {
...	...	@@ -413,6 +453,23 @@
413	453	},
414	454	deep: true,
415	455	},
	456	+ imgFileList: {
	457	+ handler(newVal) {
	458	+ if (newVal.length > 0) {
	459	+ console.log("갤러리",newVal)
	460	+ // 기존의 swiper 인스턴스가 있으면 파괴하고 다시 초기화
	461	+ if (this.gallerySwiperInstance1 && this.gallerySwiperInstance2) {
	462	+ this.gallerySwiperInstance1.destroy();
	463	+ this.gallerySwiperInstance2.destroy();
	464	+ }
	465	+ this.$nextTick(() => {
	466	+ this.initSwipers();
	467	+ });
	468	+ }
	469	+
	470	+ },
	471	+ deep: true // 객체 또는 배열 내부의 변경도 감지
	472	+ }
416	473	},
417	474	computed: {
418	475	sanitizedContent() {

Delete comment