Merge pull request codestates-seb#360 from shimdokite/develop

[FE] ✨ access, refresh token 만료 시 로그아웃 처리 구현
nalsae · Dec 26, 2023 · 6375a4a · 6375a4a
2 parents 7092143 + be73930
commit 6375a4a
Show file tree

Hide file tree

Showing 25 changed files with 130 additions and 97 deletions.
diff --git a/client/src/api/axios.ts b/client/src/api/axios.ts
@@ -32,7 +32,19 @@ export const chatInstance = axios.create({
 });
 
 const onFulfiled = async (response: AxiosResponse) => {
-  if (authVerify() === 'Access Token Expired') {
+  if (authVerify() === 'Refresh Token Expired') {
+    return (
+      alert('토큰이 만료되었습니다. 다시 로그인해 주시길 바랍니다.'),
+      localStorage.clear(),
+      (window.location.href = '/signin'),
+      Promise.reject('Refresh Token Expired')
+    );
+  }
+
+  if (
+    authVerify() === 'Access Token Expired' &&
+    authVerify() !== 'Refresh Token Expired'
+  ) {
     const { authorization: newAccessToken } = response?.headers;
 
     storageData.state.accessToken = newAccessToken;

diff --git a/client/src/components/common/SeoHead.tsx b/client/src/components/common/SeoHead.tsx
diff --git a/client/src/components/history/FailureModal.tsx b/client/src/components/history/FailureModal.tsx
@@ -14,6 +14,7 @@ export default function FailureModal() {
           <p className="font-bold text-brown-70 text-center break-keep leading-8">
             비밀번호가
           </p>
+
           <p className="font-bold">
             <b className="text-red-50">일치하지 않습니다.</b>
           </p>

diff --git a/client/src/components/history/HistoryPostCard.tsx b/client/src/components/history/HistoryPostCard.tsx
@@ -38,11 +38,13 @@ export default function HistoryPostCard({
       <div className="w-full flex justify-start gap-3 mt-1">
         <div className="flex justify-center items-center gap-[6px] ml-3 mb-1">
           <img src="/assets/img/like.svg" />
+
           <div>{likes}</div>
         </div>
 
         <div className="flex justify-center items-center gap-[6px] mb-1">
           <img src="/assets/img/comment.svg" />
+
           <div>{comment}</div>
         </div>
       </div>

diff --git a/client/src/components/history/ResignModal.tsx b/client/src/components/history/ResignModal.tsx
@@ -31,10 +31,12 @@ export default function ResignModal() {
             <p className="font-bold text-brown-70 text-center break-keep">
               탈퇴하시려면
             </p>
+
             <div className="flex flex-col items-center font-bold text-brown-70 ">
               <p className="font-bold text-brown-80 text-center break-keep leading-8">
                 가입 시 등록하셨던
               </p>
+
               <div className="font-bold text-brown-80 text-center break-keep leading-8">
                 비밀번호
                 <span className="text-brown-70">를 입력해주세요.</span>

diff --git a/client/src/components/history/SuccessedModal.tsx b/client/src/components/history/SuccessedModal.tsx
@@ -28,8 +28,10 @@ export default function SuccessedModal() {
           <span className="font-bold text-brown-60">Grow&nbsp;</span>
           <span className="font-bold text-brown-70">Story</span>를
         </div>
+
         <div className="flex flex-col items-center font-bold text-brown-80 break-keep">
           <span>이용해 주셔서 감사합니다.</span>
+
           <span className="mt-6">다음에 또 놀러 오세요!</span>
         </div>
 

diff --git a/client/src/components/history/UserInfo.tsx b/client/src/components/history/UserInfo.tsx
@@ -38,6 +38,7 @@ export default function UserInfo({ paramsId }: HistoryUserProps) {
 
       <section className="flex flex-col justify-center items-center mb-6 gap-2">
         <h3 className="text-2xl font-bold text-brown-80">{displayName}</h3>
+
         <h4 className="font-bold text-brown-70">{grade}</h4>
       </section>
 
@@ -50,6 +51,7 @@ export default function UserInfo({ paramsId }: HistoryUserProps) {
               width={24}
               height={24}
             />
+
             <p className="text-xl font-bold text-brown-10">
               {point?.toLocaleString()}
             </p>

diff --git a/client/src/components/inquiry/Chat.tsx b/client/src/components/inquiry/Chat.tsx
@@ -1,5 +1,6 @@
 'use client';
 
+import { useRouter } from 'next/navigation';
 import { useEffect, useRef, useState } from 'react';
 import InfiniteScroll from 'react-infinite-scroller';
 
@@ -15,6 +16,8 @@ import { ChatInput, ChatBox } from '.';
 
 import { Chat } from '@/types/data';
 
+import checkForToken from '@/utils/checkForToken';
+
 interface ChatProps {
   role: 'user' | 'admin';
 }
@@ -26,15 +29,20 @@ export default function Chat({ role }: ChatProps) {
   const [connected, setConnected] = useState(false);
   const [chat, setChat] = useState<Chat[]>([]);
 
+  const router = useRouter();
+
   const { roomId, message, setMessage } = useChatStore();
-  const { accessToken, refreshToken, userId, displayName } = useUserStore();
+  const { accessToken, refreshToken, userId, displayName, setClear } =
+    useUserStore();
 
   const {
     data: messageList,
     fetchNextPage,
     hasNextPage,
   } = useChatMessageQuery(roomId);
 
+  const { authVerify } = checkForToken();
+
   const url = process.env.NEXT_PUBLIC_API_URL;
 
   let subscription: StompSubscription | undefined;
@@ -48,6 +56,21 @@ export default function Chat({ role }: ChatProps) {
   const sendMessage = () => {
     if (message === '') return;
 
+    if (
+      authVerify() === 'Access Token Expired' ||
+      authVerify() === 'Refresh Token Expired'
+    ) {
+      return (
+        alert(
+          '토큰이 만료되었습니다. 로그아웃 후 다시 로그인 해주시길 바랍니다.',
+        ),
+        setConnected(false),
+        setClear(),
+        setMessage(''),
+        router.push('/signin')
+      );
+    }
+
     client?.current?.send(`/pub/chatRoom/send`, {}, JSON.stringify(newMessge));
     setMessage('');
   };
@@ -61,30 +84,24 @@ export default function Chat({ role }: ChatProps) {
   useEffect(() => {
     client.current = Stomp.over(() => new SockJS(`${url}/wss`));
 
-    try {
-      client.current.connect(
-        {
-          Authorization: accessToken,
-          refresh: refreshToken,
-        },
-        () => {
-          subscription = client?.current?.subscribe(
-            `/sub/chatRoom/${roomId}`,
-            (payload) => {
-              const receivedMessage: Chat = JSON.parse(payload.body);
-
-              setChat((previousChat) => [...previousChat, receivedMessage]);
-            },
-          );
-
-          setConnected(true);
-        },
-      );
-    } catch (error) {
-      alert(
-        '토큰이 만료되었습니다. 로그아웃 후 다시 로그인 해주시길 바랍니다.',
-      );
-    }
+    client.current.connect(
+      {
+        Authorization: accessToken,
+        refresh: refreshToken,
+      },
+      () => {
+        subscription = client?.current?.subscribe(
+          `/sub/chatRoom/${roomId}`,
+          (payload) => {
+            const receivedMessage: Chat = JSON.parse(payload.body);
+
+            setChat((previousChat) => [...previousChat, receivedMessage]);
+          },
+        );
+
+        setConnected(true);
+      },
+    );
 
     return () => {
       client.current?.disconnect(() => {

diff --git a/client/src/components/inquiry/InquiryHome.tsx b/client/src/components/inquiry/InquiryHome.tsx
@@ -64,6 +64,7 @@ export default function InquiryHome({
 
         <div className="text-center text-[14px] break-words my-2 leading-[18px] px-3">
           <p>이용에 관한 문의가 있으시다면</p>
+
           <p>
             <b>문의하기</b> 버튼을 눌러주세요.
           </p>

diff --git a/client/src/components/inquiry/InquiryRoom.tsx b/client/src/components/inquiry/InquiryRoom.tsx
@@ -6,24 +6,14 @@ import useChatStore from '@/stores/chatStore';
 
 import { ChatList } from '@/types/data';
 
-import checkForToken from '@/utils/checkForToken';
-
 interface InquiryRoomProps {
   chatList: ChatList;
 }
 
 export default function InquiryRoom({ chatList }: InquiryRoomProps) {
   const { setSelected, setRoomId } = useChatStore();
 
-  const { authVerify } = checkForToken();
-
   const onChatRoomById = (chatRoomId: number) => {
-    if (authVerify() === 'Access Token Expired') {
-      return alert(
-        '토큰이 만료되었습니다. 로그아웃 후 다시 로그인 해주시길 바랍니다.',
-      );
-    }
-
     setSelected('chat');
     setRoomId(`${chatRoomId}`);
   };
@@ -46,6 +36,7 @@ export default function InquiryRoom({ chatList }: InquiryRoomProps) {
           <p className="text-xs">
             <b>{chatList.otherAccountName}</b>
           </p>
+
           <p>{chatList.latestTime}</p>
         </div>
 

diff --git a/client/src/components/inquiry/NewChat.tsx b/client/src/components/inquiry/NewChat.tsx
@@ -1,5 +1,6 @@
 'use client';
 
+import { useRouter } from 'next/navigation';
 import { useEffect, useRef, useState } from 'react';
 
 import { CompatClient, Stomp, StompSubscription } from '@stomp/stompjs';
@@ -12,18 +13,26 @@ import { ChatInput, ChatBox } from '.';
 
 import { Chat } from '@/types/data';
 
+import checkForToken from '@/utils/checkForToken';
+
 interface NewChatProps {
   role: 'user' | 'admin';
 }
 
 export default function NewChat({ role }: NewChatProps) {
   const client = useRef<CompatClient>();
+  const scrollRef = useRef<HTMLDivElement | null>(null);
 
   const [connected, setConnected] = useState(false);
   const [chat, setChat] = useState<Chat[]>([]);
 
+  const router = useRouter();
+
   const { message, setMessage, roomId } = useChatStore();
-  const { accessToken, refreshToken, displayName, userId } = useUserStore();
+  const { accessToken, refreshToken, displayName, userId, setClear } =
+    useUserStore();
+
+  const { authVerify } = checkForToken();
 
   const url = process.env.NEXT_PUBLIC_API_URL;
 
@@ -39,14 +48,29 @@ export default function NewChat({ role }: NewChatProps) {
     );
   };
 
+  const newMessge = {
+    senderId: +userId,
+    chatRoomId: roomId,
+    message,
+  };
+
   const sendMessage = () => {
     if (message === '') return;
 
-    const newMessge = {
-      senderId: +userId,
-      chatRoomId: roomId,
-      message,
-    };
+    if (
+      authVerify() === 'Access Token Expired' ||
+      authVerify() === 'Refresh Token Expired'
+    ) {
+      return (
+        alert(
+          '토큰이 만료되었습니다. 로그아웃 후 다시 로그인 해주시길 바랍니다.',
+        ),
+        setConnected(false),
+        setClear(),
+        setMessage(''),
+        router.push('/signin')
+      );
+    }
 
     client?.current?.send(`/pub/chatRoom/send`, {}, JSON.stringify(newMessge));
     setMessage('');
@@ -85,11 +109,21 @@ export default function NewChat({ role }: NewChatProps) {
     };
   }, [roomId]);
 
+  useEffect(() => {
+    if (!scrollRef.current) return;
+
+    scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+  }, [chat]);
+
   return (
     <section className="w-full">
       <div
         className={`${CHAT_STYLE[role]} rounded-lg bg-brown-80 border-brown-90 border-[1px] w-[220px] h-[232px] flex flex-col justify-between mb-[7px]`}>
-        <ChatBox chat={chat} user={displayName} role={role} />
+        <div
+          className="overflow-x-hidden overflow-y-scroll scrollbar"
+          ref={scrollRef}>
+          <ChatBox chat={chat} user={displayName} role={role} />
+        </div>
 
         <ChatInput
           connected={connected}

diff --git a/client/src/components/profile/PasswordForm.tsx b/client/src/components/profile/PasswordForm.tsx
@@ -34,6 +34,7 @@ export default function PasswordForm() {
           className="text-[20px] text-brown-80 font-bold pt-2 pr-2 whitespace-nowrap max-[580px]:p-0 max-[580px]:pb-3">
           기존 비밀번호 :
         </label>
+
         <PasswordInput
           name="password"
           register={register}
@@ -42,25 +43,29 @@ export default function PasswordForm() {
           className="w-[244px] mr-14 max-[420px]:w-[200px]"
         />
       </div>
+
       <div className="w-fit flex max-[580px]:flex-col">
         <label
           htmlFor="newPassword"
           className="text-[20px] text-brown-80 font-bold pt-2 pr-2 whitespace-nowrap max-[580px]:p-0 max-[580px]:pb-3">
           새 비밀번호 :
         </label>
+
         <PasswordInput
           name="newPassword"
           register={register}
           errors={errors}
           className="w-[244px] mr-[38px] max-[580px]:mr-14 max-[420px]:w-[200px]"
         />
       </div>
+
       <div className="w-fit flex max-[580px]:flex-col">
         <label
           htmlFor="newPasswordCheck"
           className="text-[20px] text-brown-80 font-bold pt-2 pr-2 whitespace-nowrap max-[580px]:p-0 max-[580px]:pb-3">
           비밀번호 확인 :
         </label>
+
         <div className="flex">
           <PasswordInput
             name="newPasswordCheck"
@@ -69,6 +74,7 @@ export default function PasswordForm() {
             watch={watch}
             className="w-[244px] max-[420px]:w-[200px]"
           />
+
           <div className="mt-[2px]">
             <CommonButton
               type="submit"
-Original file line number
+Diff line change
@@ Expand Up / @@ -64,6 +64,7 @@ export default function InquiryHome({ @@
             <div className="text-center text-[14px] break-words my-2 leading-[18px] px-3">
               <p>이용에 관한 문의가 있으시다면</p>
               <p>
                 <b>문의하기</b> 버튼을 눌러주세요.
               </p>
@@ Expand Down @@