+
{title}
{content}
- {created_at}
+ {timeDiff}
-
+
);
}
diff --git a/src/app/notification/api/fetchSse.ts b/src/app/notification/api/fetchSse.ts
new file mode 100644
index 00000000..4ceb04c7
--- /dev/null
+++ b/src/app/notification/api/fetchSse.ts
@@ -0,0 +1,47 @@
+import { BACK_URL } from '@/constants/api';
+import { END_POINT } from '@/constants/api/end-point';
+import CustomError from '@/error/CustomError';
+import { getCookie } from '@/lib/cookie';
+import { decrypt } from '@/utils/crypto';
+import { EventSourcePolyfill } from 'event-source-polyfill';
+
+export const fetchSse = async () => {
+ const { main, getSubscribe } = END_POINT.notificationController;
+ const accessToken = decrypt(getCookie({ name: 'access_token' }));
+
+ try {
+ const eventSource = new EventSourcePolyfill(
+ BACK_URL + main + getSubscribe,
+ {
+ headers: {
+ Authorization: `Bearer ${accessToken}`,
+ },
+ },
+ );
+
+ eventSource.onopen = () => {
+ console.log('Connection established.');
+ };
+
+ // 서버로부터 빈 메시지가 수신되면 이를 무시합니다.
+ eventSource.onmessage = event => {
+ if (event.data.trim() === '') {
+ return;
+ }
+ const eventData = JSON.parse(event.data);
+ console.log('Received message:', eventData);
+ // 여기서 이벤트 데이터를 처리하거나 화면에 표시하는 등의 작업을 수행합니다.
+ };
+
+ // 오류 처리 로직을 추가합니다.
+ eventSource.onerror = error => {
+ console.error('EventSource error:', error);
+ eventSource.close();
+ };
+ } catch (error: unknown) {
+ if (error instanceof CustomError) {
+ throw new Error(error.message);
+ }
+ throw new Error(String(error));
+ }
+};
diff --git a/src/app/notification/api/readNotification.ts b/src/app/notification/api/readNotification.ts
new file mode 100644
index 00000000..3e30ec72
--- /dev/null
+++ b/src/app/notification/api/readNotification.ts
@@ -0,0 +1,15 @@
+import CustomError from '@/error/CustomError';
+import { axiosInstance } from '@/lib/axios/axios-instance';
+import { END_POINT } from '@/constants/api/end-point';
+
+const readNotification = async (id: number) => {
+ try {
+ await axiosInstance.patch(END_POINT.notificationController.read(id));
+ } catch (error: unknown) {
+ if (error instanceof CustomError) {
+ throw new Error(error.message);
+ }
+ }
+};
+
+export default readNotification;
diff --git a/src/app/service/page.tsx b/src/app/service/page.tsx
index 32f0e2bf..01e41b79 100644
--- a/src/app/service/page.tsx
+++ b/src/app/service/page.tsx
@@ -14,7 +14,7 @@ function Page() {
diff --git a/src/app/sign-in/kakao/page.tsx b/src/app/sign-in/kakao/page.tsx
index e850f173..5fa38836 100644
--- a/src/app/sign-in/kakao/page.tsx
+++ b/src/app/sign-in/kakao/page.tsx
@@ -12,9 +12,10 @@ import { encrypt } from '@/utils/crypto';
import { useRouter } from 'next/navigation';
import { getEmail } from '@/utils/getEmail';
import { useToast } from '@/app/_components/ui/use-toast';
+import { SIGN_UP_ERROR_MESSAGES } from '@/constants/sign-in';
import { setTokensInCookies } from '@/utils/setTokensInCookies';
+import { fetchSse } from '@/app/notification/api/fetchSse';
import { ERROR_CODE, STATUS_CODE } from '@/constants/api/statusCode';
-import { SIGN_UP_ERROR_MESSAGES } from '@/constants/sign-in';
// 카카오 소셜 로그인 REDIRECT URI PAGE
function Page() {
@@ -43,6 +44,7 @@ function Page() {
case STATUS_CODE.ok:
router.push(service);
setId(response.data.id);
+ await fetchSse();
break;
case invalidEmail:
diff --git a/src/constants/api/end-point.ts b/src/constants/api/end-point.ts
index 9e4debfd..7d637a32 100644
--- a/src/constants/api/end-point.ts
+++ b/src/constants/api/end-point.ts
@@ -161,14 +161,20 @@ export const END_POINT = {
notificationController: {
// DEFAULT
- default: '/notification',
+ main: '/notification',
getNotification: (page: number) => {
const url = new URLSearchParams();
url.append('page', String(page));
- return `${END_POINT.notificationController.default}?${url.toString()}`;
+ return `${END_POINT.notificationController.main}?${url.toString()}`;
},
+
+ read: (notificationId: number) => {
+ return `${END_POINT.notificationController.main}/${notificationId}/read`;
+ },
+
+ getSubscribe: '/subscribe',
},
};
diff --git a/src/types/notification/index.ts b/src/types/notification/index.ts
index 809a473b..04e7d53d 100644
--- a/src/types/notification/index.ts
+++ b/src/types/notification/index.ts
@@ -15,3 +15,9 @@ export interface NotificationProps {
export interface NotificationData extends Pagination {
content: NotificationProps[];
}
+
+export interface SubscribeResponse {
+ id: string;
+ event: string;
+ data: string;
+}