From f149b024c1e32aeaee2c97b7444113bfaae812a3 Mon Sep 17 00:00:00 2001
From: SukHyun Yun <96977881+YunSukHyun@users.noreply.github.com>
Date: Fri, 10 Jan 2025 23:46:58 +0900
Subject: [PATCH] =?UTF-8?q?[Feat]=20=EC=95=88=EC=9D=BD=EC=9D=80=20?=
 =?UTF-8?q?=EB=A9=94=EC=84=B8=EC=A7=80=EC=99=80=20=ED=86=A0=ED=81=B0=20=20?=
 =?UTF-8?q?(#231)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat: refresh-token

* feat: unread message
---
 src/app/(auth)/redirect/[method]/page.tsx | 30 ++++++++++++++---------
 src/app/_components/Provider.tsx          |  9 +++++--
 src/app/chat/page.tsx                     | 22 +++++++++++------
 3 files changed, 39 insertions(+), 22 deletions(-)

diff --git a/src/app/(auth)/redirect/[method]/page.tsx b/src/app/(auth)/redirect/[method]/page.tsx
index b88da03b..0174274e 100644
--- a/src/app/(auth)/redirect/[method]/page.tsx
+++ b/src/app/(auth)/redirect/[method]/page.tsx
@@ -44,19 +44,25 @@ const Redirect = ({ params: { method } }: { params: { method: string } }) => {
       .get<ResponseType>({
         url: `users/login/${method}/callback?code=${code}`,
       })
-      .then(({ tokenResponseDto: { access_token }, userInfoDto: { nickname, userId } }) => {
-        if (!nickname) {
-          setItem(sessionStorage, 'token', access_token);
-          setItem(sessionStorage, 'userId', userId.toString());
+      .then(
+        ({
+          tokenResponseDto: { access_token, refresh_token },
+          userInfoDto: { nickname, userId },
+        }) => {
+          if (!nickname) {
+            setItem(sessionStorage, 'token', access_token);
+            setItem(sessionStorage, 'userId', userId.toString());
 
-          router.replace(`/signup/${method}`);
-        } else {
-          setItem(localStorage, 'token', access_token);
-          setItem(localStorage, `userId`, userId.toString());
-          setItem(localStorage, 'provider', method.toUpperCase());
-          router.replace('/');
-        }
-      });
+            router.replace(`/signup/${method}`);
+          } else {
+            setItem(localStorage, 'token', access_token);
+            setItem(localStorage, 'userId', userId.toString());
+            setItem(localStorage, 'provider', method.toUpperCase());
+            setItem(localStorage, 'refreshToken', refresh_token);
+            router.replace('/');
+          }
+        },
+      );
   }, [code, method, router]);
 
   return (
diff --git a/src/app/_components/Provider.tsx b/src/app/_components/Provider.tsx
index c59a6af8..62aa1f37 100644
--- a/src/app/_components/Provider.tsx
+++ b/src/app/_components/Provider.tsx
@@ -2,7 +2,7 @@
 
 import { ReactNode } from 'react';
 import client from '@/apis/core';
-import { clearItem, setItem } from '@/utils/storage';
+import { clearItem, getItem, setItem } from '@/utils/storage';
 import { initializeApp } from '@firebase/app';
 import { QueryCache, QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
@@ -30,7 +30,12 @@ const Provider = ({
             clearItem(localStorage);
           } else if (error.response?.status === 1401) {
             client
-              .get<RefreshTokenResponse>({ url: '/users/refresh/kakao' })
+              .get<RefreshTokenResponse>({
+                url: '/users/refresh/kakao',
+                headers: {
+                  refreshToken: getItem(localStorage, 'refreshToken'),
+                },
+              })
               .then((res) => setItem(localStorage, 'token', res.access_token));
           }
         }
diff --git a/src/app/chat/page.tsx b/src/app/chat/page.tsx
index 7343efea..755917cc 100644
--- a/src/app/chat/page.tsx
+++ b/src/app/chat/page.tsx
@@ -19,6 +19,7 @@ interface ChatRoomInfo {
   updatedAt: string;
   lastMessage: ChatType;
   participantCnt: number;
+  unReadMsgCnt: number;
 }
 
 const ChatList = () => {
@@ -40,14 +41,15 @@ const ChatList = () => {
     }
   };
 
-  const fetchChats = async ({ pageParam }: { pageParam: number }) => {
+  const fetchChats = async ({ pageParam }: { pageParam: string }) => {
     const data = await client.get<ChatRoomInfo[]>({
-      url: `/chats/rooms/${userId}?${pageParam === 0 ? '' : `cursor=${pageParam}&`}pageSize=10`,
+      url: `/chats/rooms/${userId}?${pageParam === '0' ? '' : `cursor=${pageParam}&`}pageSize=10`,
       headers: {
         Authorization: `Bearer ${getItem(localStorage, 'token')}`,
         provider: getItem(localStorage, 'provider'),
       },
     });
+    console.log(data);
     setChatRooms([...chatRooms, ...data]);
     if (data.length < 10) setStop(true);
     return data;
@@ -56,14 +58,13 @@ const ChatList = () => {
   const { hasNextPage, fetchNextPage, isFetchingNextPage } = useInfiniteQuery({
     queryKey: ['moreChatList'],
     queryFn: fetchChats,
-    initialPageParam: 0,
+    initialPageParam: '0',
     getNextPageParam: () => {
       if (stop || chatRooms.length === 0) return undefined;
-      return chatRooms[chatRooms.length - 1].roomId;
+      return chatRooms[chatRooms.length - 1].updatedAt;
     },
     enabled: !!userId,
   });
-  console.log(hasNextPage);
 
   useEffect(() => {
     if (!getItem(localStorage, 'token')) router.replace('/signin');
@@ -72,10 +73,10 @@ const ChatList = () => {
   return (
     <ul className="flex flex-col gap-2">
       {chatRooms?.length !== 0
-        ? chatRooms?.map(({ mogakkoId, lastMessage, name, updatedAt }) => (
+        ? chatRooms?.map(({ mogakkoId, lastMessage, name, updatedAt, unReadMsgCnt }) => (
             <li
-              key={mogakkoId}
               className="flex cursor-pointer items-center justify-between gap-2"
+              key={mogakkoId}
               onClick={() => router.push(`chat/${mogakkoId}`)}
             >
               <Image
@@ -86,10 +87,15 @@ const ChatList = () => {
                 className="h-12 w-12 rounded-xl"
                 priority
               />
-              <div className="flex w-48 grow flex-col">
+              <div className="flex grow flex-col">
                 <p className="text-lg">{name}</p>
                 <p className="text-gray-500">{lastMessage.message}</p>
               </div>
+              {unReadMsgCnt > 0 && (
+                <p className="flex h-4 w-4 items-center justify-center rounded-full bg-red-500 text-sm text-white">
+                  {unReadMsgCnt}
+                </p>
+              )}
               <p className="text-sm text-gray-500">{handleDate(updatedAt)}</p>
             </li>
           ))