From 9059e5cba7d7ab929e9d42b5bfd4fb322b23ff7a Mon Sep 17 00:00:00 2001 From: CessnaJ Date: Wed, 10 Jan 2024 14:43:42 +0900 Subject: [PATCH 1/9] =?UTF-8?q?[INIT]=20SSE=20eventsource=EC=97=90=20?= =?UTF-8?q?=ED=97=A4=EB=8D=94=20=EB=8B=B4=EA=B8=B0=20=EC=9C=84=ED=95=9C=20?= =?UTF-8?q?event-source-polyfill=20=ED=8C=A8=ED=82=A4=EC=A7=80=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 24 ++++++++++++++++++++++++ 1 file changed, 24 insertions(+) diff --git a/package-lock.json b/package-lock.json index fc5357d9..275ebba8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,6 +10,7 @@ "dependencies": { "ant-design-vue": "^4.0.8", "axios": "^1.6.2", + "event-source-polyfill": "^1.0.31", "lodash": "^4.17.21", "pinia": "^2.1.7", "pinia-plugin-persistedstate": "^3.2.1", @@ -21,6 +22,7 @@ "devDependencies": { "@rushstack/eslint-patch": "^1.3.3", "@tsconfig/node18": "^18.2.2", + "@types/event-source-polyfill": "^1.0.5", "@types/jsdom": "^21.1.3", "@types/lodash": "^4.14.202", "@types/node": "^18.18.5", @@ -1124,6 +1126,12 @@ "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==", "dev": true }, + "node_modules/@types/event-source-polyfill": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/@types/event-source-polyfill/-/event-source-polyfill-1.0.5.tgz", + "integrity": "sha512-iaiDuDI2aIFft7XkcwMzDWLqo7LVDixd2sR6B4wxJut9xcp/Ev9bO4EFg4rm6S9QxATLBj5OPxdeocgmhjwKaw==", + "dev": true + }, "node_modules/@types/jsdom": { "version": "21.1.6", "resolved": "https://registry.npmjs.org/@types/jsdom/-/jsdom-21.1.6.tgz", @@ -3148,6 +3156,11 @@ "node": ">=0.10.0" } }, + "node_modules/event-source-polyfill": { + "version": "1.0.31", + "resolved": "https://registry.npmjs.org/event-source-polyfill/-/event-source-polyfill-1.0.31.tgz", + "integrity": "sha512-4IJSItgS/41IxN5UVAVuAyczwZF7ZIEsM1XAoUzIHA6A+xzusEZUutdXz2Nr+MQPLxfTiCvqE79/C8HT8fKFvA==" + }, "node_modules/event-stream": { "version": "3.3.4", "resolved": "https://registry.npmjs.org/event-stream/-/event-stream-3.3.4.tgz", @@ -7699,6 +7712,12 @@ "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==", "dev": true }, + "@types/event-source-polyfill": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/@types/event-source-polyfill/-/event-source-polyfill-1.0.5.tgz", + "integrity": "sha512-iaiDuDI2aIFft7XkcwMzDWLqo7LVDixd2sR6B4wxJut9xcp/Ev9bO4EFg4rm6S9QxATLBj5OPxdeocgmhjwKaw==", + "dev": true + }, "@types/jsdom": { "version": "21.1.6", "resolved": "https://registry.npmjs.org/@types/jsdom/-/jsdom-21.1.6.tgz", @@ -9194,6 +9213,11 @@ "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==", "dev": true }, + "event-source-polyfill": { + "version": "1.0.31", + "resolved": "https://registry.npmjs.org/event-source-polyfill/-/event-source-polyfill-1.0.31.tgz", + "integrity": "sha512-4IJSItgS/41IxN5UVAVuAyczwZF7ZIEsM1XAoUzIHA6A+xzusEZUutdXz2Nr+MQPLxfTiCvqE79/C8HT8fKFvA==" + }, "event-stream": { "version": "3.3.4", "resolved": "https://registry.npmjs.org/event-stream/-/event-stream-3.3.4.tgz", From 84e6e7182d8e80ea16a6f9e1e6981b6a1dd4f0e8 Mon Sep 17 00:00:00 2001 From: CessnaJ Date: Wed, 10 Jan 2024 14:46:02 +0900 Subject: [PATCH 2/9] [INIT] event-source-polyfill --- package.json | 2 ++ 1 file changed, 2 insertions(+) diff --git a/package.json b/package.json index 9e81475e..cc23055f 100644 --- a/package.json +++ b/package.json @@ -17,6 +17,7 @@ "dependencies": { "ant-design-vue": "^4.0.8", "axios": "^1.6.2", + "event-source-polyfill": "^1.0.31", "lodash": "^4.17.21", "pinia": "^2.1.7", "pinia-plugin-persistedstate": "^3.2.1", @@ -28,6 +29,7 @@ "devDependencies": { "@rushstack/eslint-patch": "^1.3.3", "@tsconfig/node18": "^18.2.2", + "@types/event-source-polyfill": "^1.0.5", "@types/jsdom": "^21.1.3", "@types/lodash": "^4.14.202", "@types/node": "^18.18.5", From 37c7116e9a402ddd80dccb54394518f8c4e5e839 Mon Sep 17 00:00:00 2001 From: CessnaJ Date: Wed, 10 Jan 2024 14:46:35 +0900 Subject: [PATCH 3/9] =?UTF-8?q?[INIT]=20tsconfig.vitest.json=20=EC=97=85?= =?UTF-8?q?=EB=8D=B0=EC=9D=B4=ED=8A=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- tsconfig.vitest.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/tsconfig.vitest.json b/tsconfig.vitest.json index d080d611..a88fb5a0 100644 --- a/tsconfig.vitest.json +++ b/tsconfig.vitest.json @@ -3,7 +3,7 @@ "exclude": [], "compilerOptions": { "composite": true, - "lib": [], - "types": ["node", "jsdom"] + "lib": ["es2020", "dom"], + "types": ["vitest/globals", "vitest"] } } From 968d5a1862521e198fb2273d560cd90912381aaa Mon Sep 17 00:00:00 2001 From: CessnaJ Date: Wed, 10 Jan 2024 14:47:17 +0900 Subject: [PATCH 4/9] =?UTF-8?q?[FIX]=20SSE=20eventSource=20=EC=97=B0?= =?UTF-8?q?=EA=B2=B0=20header=EC=B6=94=EA=B0=80,=20base=20url=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/apis/notification/notification.ts | 23 +++++++++++++++++++---- 1 file changed, 19 insertions(+), 4 deletions(-) diff --git a/src/apis/notification/notification.ts b/src/apis/notification/notification.ts index 5b78580e..902fbe3c 100644 --- a/src/apis/notification/notification.ts +++ b/src/apis/notification/notification.ts @@ -2,7 +2,9 @@ import { AxiosError } from 'axios' import { authAxiosInstance } from '@/apis/utils/index' import type { Notification } from '@/types/notification' // Notification 타입을 정의해야 합니다. +import { EventSourcePolyfill } from 'event-source-polyfill' +const BASE_URL = import.meta.env.VITE_API_BASE_URL const NOTIFICATION_PREFIX_PATH = '/notification-service' const NOTIFICATION_DOMAIN_PREFIX_PATH = '/notifications' @@ -59,12 +61,25 @@ export const deleteAllNotifications = async (): Promise => { // 알림 구독 export const subscribeToNotifications = ( onMessage: (notification: Notification) => void, - onError?: (event: Event) => void + onError?: (event: Event | MessageEvent) => void ): (() => void) => { console.log('SSE connection을 시도합니다.') + const accessToken = localStorage.getItem('accessToken') - const eventSource = new EventSource( - `${NOTIFICATION_PREFIX_PATH}${NOTIFICATION_DOMAIN_PREFIX_PATH}/subscription` + if (accessToken === null) { + console.log('accessToken을 찾을 수 없습니다.') + return () => { + console.log('No active SSE connection to close because accessToken was null.') + } + } + + const eventSource = new EventSourcePolyfill( + `${BASE_URL}${NOTIFICATION_PREFIX_PATH}${NOTIFICATION_DOMAIN_PREFIX_PATH}/subscription`, + { + headers: { + Authorization: `Bearer ${accessToken}` + } + } ) eventSource.onopen = (event) => { @@ -81,7 +96,7 @@ export const subscribeToNotifications = ( eventSource.onerror = (event) => { console.error('EventSource error:', event) if (onError) { - onError(event) + onError(event as Event) } } From ab6769444ef704aa252b14f2e4dcb602529f0192 Mon Sep 17 00:00:00 2001 From: CokeLee777 Date: Wed, 10 Jan 2024 16:48:26 +0900 Subject: [PATCH 5/9] =?UTF-8?q?[FIX]=20fix=20=EC=B0=9C=20=ED=86=A0?= =?UTF-8?q?=EA=B8=80=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/ootd/OOTDPostCardComponent.vue | 24 ++++++++------ .../ootd/OOTDProfileCardComponent.vue | 13 -------- src/views/OOTDDetailView.vue | 31 ++++++++++++++----- 3 files changed, 39 insertions(+), 29 deletions(-) diff --git a/src/components/ootd/OOTDPostCardComponent.vue b/src/components/ootd/OOTDPostCardComponent.vue index 494bc758..39bab362 100644 --- a/src/components/ootd/OOTDPostCardComponent.vue +++ b/src/components/ootd/OOTDPostCardComponent.vue @@ -23,13 +23,9 @@ const likeButtonClickListener = async (postId: number, isLike: boolean | undefin alert('로그인이 필요합니다.') } else { const postIndex = props.posts.findIndex((post) => post.id === postId) + console.log(postIndex) + console.log(props.posts[postIndex].isLike) if (postIndex !== -1) { - const hasPostLike = postLikeStore.hasPostLike(postId) - if (hasPostLike) { - props.posts[postIndex].isLike ? props.posts[postIndex].likeCount += 1 : props.posts[postIndex].likeCount -= 1 - } else { - props.posts[postIndex].isLike ? props.posts[postIndex].likeCount -= 1 : props.posts[postIndex].likeCount += 1 - } await postLikeStore.togglePostLikes(postId) } } @@ -106,8 +102,18 @@ const handleImageLoad = async () => { d='M8.82563 15L7.64035 13.921C3.43054 10.1035 0.651245 7.57766 0.651245 4.49591C0.651245 1.97003 2.62945 0 5.14716 0C6.5695 0 7.93462 0.662125 8.82563 1.70027C9.71664 0.662125 11.0818 0 12.5041 0C15.0218 0 17 1.97003 17 4.49591C17 7.57766 14.2207 10.1035 10.0109 13.921L8.82563 15Z' fill='#FF0000' /> -
{{ post.likeCount }}
-
{{ post.likeCount }}+
+
+
+ {{ post.likeCount - 1 }} +
+
+ {{ post.likeCount + 1 }} +
+
+ {{ post.likeCount }} +
+
+
999+
{ fill='#C6C6C6' />
{{ post.viewCount }}
-
{{ post.viewCount }}+
+
999+
diff --git a/src/components/ootd/OOTDProfileCardComponent.vue b/src/components/ootd/OOTDProfileCardComponent.vue index 9e769a0e..cbdfcf4b 100644 --- a/src/components/ootd/OOTDProfileCardComponent.vue +++ b/src/components/ootd/OOTDProfileCardComponent.vue @@ -85,19 +85,6 @@ onBeforeRouteLeave(async (to, from) => { await flushFollowStore() }) -// 새로고침 or 브라우저 창 닫을 때 이벤트 -window.addEventListener('beforeunload', async (event) => { - flushFollowStore() - .then((res) => { - window.location.reload() - }) - .catch((error) => { - console.error(error) - event.preventDefault() - event.returnValue = '' - }) -}) - const img = ref(null) const imageSize = ref({ width: 0, diff --git a/src/views/OOTDDetailView.vue b/src/views/OOTDDetailView.vue index 01681d84..4c9a9b29 100644 --- a/src/views/OOTDDetailView.vue +++ b/src/views/OOTDDetailView.vue @@ -81,11 +81,6 @@ const likeButtonClickListener = (isLike: boolean | undefined) => { if (isLike === undefined) { alert('로그인이 필요합니다.') } else { - if (postLikeStore.hasPostLike(postId.value)) { - post.value.isLike ? post.value.likeCount += 1 : post.value.likeCount -= 1 - } else { - post.value.isLike ? post.value.likeCount -= 1 : post.value.likeCount += 1 - } postLikeStore.togglePostLikes(postId.value) } } @@ -270,7 +265,15 @@ const onTagedProductMouseLeave = async (productId: number) => {