Commit @fa063bbd555faef97525ef44d73295bd02dadfaa

류윤주 2023-11-28

231128 류윤주 쿠키 팝업

@fa063bbd555faef97525ef44d73295bd02dadfaa

5f52ee9

fa063bb

client/views/pages/user/main/Main.vue

--- client/views/pages/user/main/Main.vue

+++ client/views/pages/user/main/Main.vue


 
 
         <div class="w1400">
-
             <div class="main-partner-logo">
                 <div class="main-partner-img lo1">
                 </div>
                 <div class="main-partner-img lo2">
-
                 </div>
                 <div class="main-partner-img lo3">
-
                 </div>
                 <div class="main-partner-img lo4">
-
-
                 </div>
                 <div class="main-partner-img lo5">
-
-
                 </div>
             </div>
 

 
 
 
-    <div class="main-popup" v-show="popupList.length > 0">
+    <div class="main-popup" v-if="showPopup">
         <div>
             <div class="main-popup-div">
                 <swiper :spaceBetween="30" :centeredSlides="true" :autoplay="{

 }" :navigation="false" :modules="modules" class="mySwiper">
 
                     <swiper-slide v-for="(item, index) in popupList" :key="index">
-                        <a :href="item.shortcuts_url" target="_blank">
+                        <a :href="item.shortcuts_url" target="_blank" v-if="shortcuts_yn === 'Y'">
                             <img :src="getFilePath(item.file_path, item.file_nm, item.file_extn_nm)" alt="">
                         </a>
+                        <img :src="getFilePath(item.file_path, item.file_nm, item.file_extn_nm)" alt="" v-else>
                     </swiper-slide>
 
                 </swiper>
             </div>
             <div class="main-popup-input" :class="{ active: doNotShow }">
-                <p @click="closeForDay">오늘 하루동안 열지 않기</p>
+                <p @click="hidePopup">24시간 동안 열지 않기</p>
                 <p @click="closeNow">닫기</p>
             </div>
         </div>

 import axios from 'axios';
 import COMMON_UTIL from '../../../../resources/js/commonUtil.js';
 import { useStore } from "vuex";
+import Cookies from 'js-cookie';
 
 export default {
     data() {

             noticeListForBanner: [],
             swiper: null,
             store: useStore(),
-            popupList: []
+            popupList: [],
+            showPopup: true
         }
     },
     methods: {
-        // closeForDay: function () {
-        //     this.doNotShow = true;
-        //     const now = new Date();
-        //     localStorage.setItem('popupClosed', now);
-        //     this.doNotShow = true;
-        // },
+        // 메인 팝업 관련 메서드
         closeNow: function () {
-            this.popupList = [];
+            this.showPopup = false;
         },
-        // checkPopup: function () {
-        //     const popupClosedTime = localStorage.getItem('popupClosed');
-        //     if (popupClosedTime) {
-        //         const closedTime = new Date(popupClosedTime);
-        //         const now = new Date();
-        //         const diffTime = Math.abs(now - closedTime);
-        //         const diffHours = Math.ceil(diffTime / (1000 * 60 * 60));
-        //         if (diffHours < 24) {
-        //             return true;
-        //         }
-        //     }
-        //     return false;
-        // },
-
-        getFilePath: function (filePath, fileName,fileExt) {
+        getFilePath: function (filePath, fileName, fileExt) {
             return `http://localhost:8080${filePath}/${fileName}.${fileExt}`;
         },
 
+        checkPopupStatus() {
+            // 쿠키가 설정되어 있으면 팝업을 감춥니다.
+            if (Cookies.get('popupClosed')) {
+                this.showPopup = false;
+            }
+        },
+        hidePopup() {
+            // 'popupClosed' 쿠키를 1일(24시간) 동안 설정합니다.
+            Cookies.set('popupClosed', true, { expires: 1 });
+            this.showPopup = false;
+        },
 
+        // 페이지 준비중 alert
         showAlert: function () {
             alert('페이지 준비중입니다.');
         },

         this.noticeListForMain();
         this.noticeBannerListForMain();
         this.visitLogInsert();
+        this.checkPopupStatus();
     }
 }
 </script>

5f52ee9

fa063bb

package-lock.json

--- package-lock.json

+++ package-lock.json


         "file-saver": "^2.0.5",
         "fs": "0.0.1-security",
         "git": "^0.1.5",
+        "js-cookie": "^3.0.5",
         "lodash": "^4.17.21",
         "new-line": "^1.1.1",
         "pg": "8.8.0",

       "integrity": "sha512-m4avr8yL8kmFN8psrbFFFmB/If14iN5o9nw/NgnnM+kybDJpRsAynV2BsfpTYrTRysYUdADVD7CkUUizgkpLfg==",
       "peer": true
     },
+    "node_modules/js-cookie": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-3.0.5.tgz",
+      "integrity": "sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw==",
+      "engines": {
+        "node": ">=14"
+      }
+    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",

5f52ee9

fa063bb

package.json

--- package.json

+++ package.json

...	...	@@ -20,6 +20,7 @@
20	20	"file-saver": "^2.0.5",
21	21	"fs": "0.0.1-security",
22	22	"git": "^0.1.5",
	23	+ "js-cookie": "^3.0.5",
23	24	"lodash": "^4.17.21",
24	25	"new-line": "^1.1.1",
25	26	"pg": "8.8.0",

Add a comment

Open 0
Closed 0

List

...	...	@@ -300,23 +300,16 @@
300	300
301	301
302	302	<div class="w1400">
303		-
304	303	<div class="main-partner-logo">
305	304	<div class="main-partner-img lo1">
306	305	</div>
307	306	<div class="main-partner-img lo2">
308		-
309	307	</div>
310	308	<div class="main-partner-img lo3">
311		-
312	309	</div>
313	310	<div class="main-partner-img lo4">
314		-
315		-
316	311	</div>
317	312	<div class="main-partner-img lo5">
318		-
319		-
320	313	</div>
321	314	</div>
322	315
...	...	@@ -326,7 +319,7 @@
326	319
327	320
328	321
329		- <div class="main-popup" v-show="popupList.length > 0">
	322	+ <div class="main-popup" v-if="showPopup">
330	323	<div>
331	324	<div class="main-popup-div">
332	325	<swiper :spaceBetween="30" :centeredSlides="true" :autoplay="{
...	...	@@ -337,15 +330,16 @@
337	330	}" :navigation="false" :modules="modules" class="mySwiper">
338	331
339	332	<swiper-slide v-for="(item, index) in popupList" :key="index">
340		- <a :href="item.shortcuts_url" target="_blank">
	333	+ <a :href="item.shortcuts_url" target="_blank" v-if="shortcuts_yn === 'Y'">
341	334	<img :src="getFilePath(item.file_path, item.file_nm, item.file_extn_nm)" alt="">
342	335	</a>
	336	+ <img :src="getFilePath(item.file_path, item.file_nm, item.file_extn_nm)" alt="" v-else>
343	337	</swiper-slide>
344	338
345	339	</swiper>
346	340	</div>
347	341	<div class="main-popup-input" :class="{ active: doNotShow }">
348		- <p @click="closeForDay">오늘 하루동안 열지 않기</p>
	342	+ <p @click="hidePopup">24시간 동안 열지 않기</p>
349	343	<p @click="closeNow">닫기</p>
350	344	</div>
351	345	</div>
...	...	@@ -363,6 +357,7 @@
363	357	import axios from 'axios';
364	358	import COMMON_UTIL from '../../../../resources/js/commonUtil.js';
365	359	import { useStore } from "vuex";
	360	+import Cookies from 'js-cookie';
366	361
367	362	export default {
368	363	data() {
...	...	@@ -384,38 +379,32 @@
384	379	noticeListForBanner: [],
385	380	swiper: null,
386	381	store: useStore(),
387		- popupList: []
	382	+ popupList: [],
	383	+ showPopup: true
388	384	}
389	385	},
390	386	methods: {
391		- // closeForDay: function () {
392		- // this.doNotShow = true;
393		- // const now = new Date();
394		- // localStorage.setItem('popupClosed', now);
395		- // this.doNotShow = true;
396		- // },
	387	+ // 메인 팝업 관련 메서드
397	388	closeNow: function () {
398		- this.popupList = [];
	389	+ this.showPopup = false;
399	390	},
400		- // checkPopup: function () {
401		- // const popupClosedTime = localStorage.getItem('popupClosed');
402		- // if (popupClosedTime) {
403		- // const closedTime = new Date(popupClosedTime);
404		- // const now = new Date();
405		- // const diffTime = Math.abs(now - closedTime);
406		- // const diffHours = Math.ceil(diffTime / (1000 * 60 * 60));
407		- // if (diffHours < 24) {
408		- // return true;
409		- // }
410		- // }
411		- // return false;
412		- // },
413		-
414		- getFilePath: function (filePath, fileName,fileExt) {
	391	+ getFilePath: function (filePath, fileName, fileExt) {
415	392	return `http://localhost:8080${filePath}/${fileName}.${fileExt}`;
416	393	},
417	394
	395	+ checkPopupStatus() {
	396	+ // 쿠키가 설정되어 있으면 팝업을 감춥니다.
	397	+ if (Cookies.get('popupClosed')) {
	398	+ this.showPopup = false;
	399	+ }
	400	+ },
	401	+ hidePopup() {
	402	+ // 'popupClosed' 쿠키를 1일(24시간) 동안 설정합니다.
	403	+ Cookies.set('popupClosed', true, { expires: 1 });
	404	+ this.showPopup = false;
	405	+ },
418	406
	407	+ // 페이지 준비중 alert
419	408	showAlert: function () {
420	409	alert('페이지 준비중입니다.');
421	410	},
...	...	@@ -589,6 +578,7 @@
589	578	this.noticeListForMain();
590	579	this.noticeBannerListForMain();
591	580	this.visitLogInsert();
	581	+ this.checkPopupStatus();
592	582	}
593	583	}
594	584	</script>

...	...	@@ -25,6 +25,7 @@
25	25	"file-saver": "^2.0.5",
26	26	"fs": "0.0.1-security",
27	27	"git": "^0.1.5",
	28	+ "js-cookie": "^3.0.5",
28	29	"lodash": "^4.17.21",
29	30	"new-line": "^1.1.1",
30	31	"pg": "8.8.0",
...	...	@@ -3519,6 +3520,14 @@
3519	3520	"integrity": "sha512-m4avr8yL8kmFN8psrbFFFmB/If14iN5o9nw/NgnnM+kybDJpRsAynV2BsfpTYrTRysYUdADVD7CkUUizgkpLfg==",
3520	3521	"peer": true
3521	3522	},
	3523	+ "node_modules/js-cookie": {
	3524	+ "version": "3.0.5",
	3525	+ "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-3.0.5.tgz",
	3526	+ "integrity": "sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw==",
	3527	+ "engines": {
	3528	+ "node": ">=14"
	3529	+ }
	3530	+ },
3522	3531	"node_modules/js-tokens": {
3523	3532	"version": "4.0.0",
3524	3533	"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",

Delete comment