Merge pull request #11 from shimdokite/chat

[FE] ♻️ 유저 채팅 및 탈퇴에서 발견된 이슈 해결
shimdokite · Apr 10, 2024 · 8688da5 · 8688da5
2 parents 3adb406 + 0ab040c
commit 8688da5
Show file tree

Hide file tree

Showing 12 changed files with 53 additions and 54 deletions.
diff --git a/client/src/api/axios.ts b/client/src/api/axios.ts
@@ -4,14 +4,7 @@ import LocalStorage from './localStorage';
 
 import checkForToken from '@/utils/checkForToken';
 
-const token = LocalStorage.getItem('user-key');
-
-const { authVerify, storageData } = checkForToken();
-
-const accessToken =
-  typeof window !== 'undefined' ? token.state.accessToken : null;
-const refreshToken =
-  typeof window !== 'undefined' ? token.state.refreshToken : null;
+const { authVerify, storageData, accessToken, refreshToken } = checkForToken();
 
 export const instance = axios.create({
   baseURL: process.env.NEXT_PUBLIC_API_URL,

diff --git a/client/src/components/inquiry/Chat.tsx b/client/src/components/inquiry/Chat.tsx
@@ -14,7 +14,7 @@ import useChatMessageQuery from '@/hooks/query/useChatMessageQuery';
 
 import { ChatInput, ChatBox } from '.';
 
-import { Chat } from '@/types/data';
+import { ChatData } from '@/types/data';
 
 import checkForToken from '@/utils/checkForToken';
 
@@ -27,7 +27,7 @@ export default function Chat({ role }: ChatProps) {
   const scrollRef = useRef<HTMLDivElement | null>(null);
 
   const [connected, setConnected] = useState(false);
-  const [chat, setChat] = useState<Chat[]>([]);
+  const [chat, setChat] = useState<ChatData[]>([]);
 
   const router = useRouter();
 
@@ -93,7 +93,7 @@ export default function Chat({ role }: ChatProps) {
         subscription = client?.current?.subscribe(
           `/sub/chatRoom/${roomId}`,
           (payload) => {
-            const receivedMessage: Chat = JSON.parse(payload.body);
+            const receivedMessage: ChatData = JSON.parse(payload.body);
 
             setChat((previousChat) => [...previousChat, receivedMessage]);
           },

diff --git a/client/src/components/inquiry/ChatBox.tsx b/client/src/components/inquiry/ChatBox.tsx
@@ -4,10 +4,10 @@ import { useEffect } from 'react';
 
 import useChatStore from '@/stores/chatStore';
 
-import { Chat } from '@/types/data';
+import { ChatData } from '@/types/data';
 
 interface ChatBoxProps {
-  chat: Chat[];
+  chat: ChatData[];
   user: string;
   role: 'user' | 'admin';
 }
@@ -17,7 +17,7 @@ export default function ChatBox({ chat, user, role }: ChatBoxProps) {
 
   useEffect(() => {
     if (chat && role === 'admin') {
-      const getQuestionerId = (chat: Chat[]) => {
+      const getQuestionerId = (chat: ChatData[]) => {
         return chat.map((data) => {
           if (data.senderId !== 101) setQuestionerId(`${data.senderId}`);
         });

diff --git a/client/src/components/inquiry/InquiryButton.tsx b/client/src/components/inquiry/InquiryButton.tsx
@@ -28,9 +28,9 @@ export default function InquiryButton() {
   return (
     userId &&
     isClient && (
-      <div className="fixed z-20 right-[16px] bottom-[20px]">
+      <div className="fixed z-20 right-4 bottom-5">
         <button
-          className="w-[48px] h-[48px] border-[3px] border-brown-70 rounded-[50%] bg-[url('/assets/img/bg_wood_dark.png')] bg-contain bg-repeat flex justify-center items-center shadow-outer/down"
+          className="w-12 h-12 border-[3px] border-brown-70 rounded-[50%] bg-[url('/assets/img/bg_wood_dark.png')] bg-contain bg-repeat flex justify-center items-center shadow-outer/down"
           onClick={() => setIsOpen(!isOpen)}>
           <Image
             src="/assets/icon/qna.svg"

diff --git a/client/src/components/inquiry/InquiryForm.tsx b/client/src/components/inquiry/InquiryForm.tsx
@@ -37,14 +37,15 @@ export default function InquiryForm() {
   return (
     <>
       <div
-        className="w-full h-[100vh] fixed top-0 left-0 z-20"
+        role="presentation"
+        className="w-full h-screen fixed top-0 left-0 z-20"
         onClick={() => setIsOpen(false)}></div>
 
-      <div className="absolute z-40 right-[50px] bottom-0 mx-2 flex flex-col items-center bg-brown-20 rounded-lg border-2 border-brown-50 shadow-outer/down w-[240px] h-[292px]">
+      <div className="absolute z-40 right-[50px] bottom-0 mx-2 flex flex-col items-center bg-brown-20 rounded-lg border-2 border-brown-50 shadow-outer/down w-60 h-[292px]">
         <div className="h-full flex flex-col justify-center">
           {renderService()}
 
-          <div className="flex justify-center gap-2">
+          <nav role="navigation" className="flex justify-center gap-2">
             <CommonButton
               type="button"
               size="sm"
@@ -55,15 +56,15 @@ export default function InquiryForm() {
               홈
             </CommonButton>
 
-            <CommonButton
-              type="button"
-              size="sm"
-              onClick={() => {
-                selected === 'list' ? setSelected('home') : setSelected('list');
-              }}>
-              {selected === 'list' ? '문의하기' : '대화 목록'}
-            </CommonButton>
-          </div>
+            {selected !== 'list' && (
+              <CommonButton
+                type="button"
+                size="sm"
+                onClick={() => setSelected('list')}>
+                대화 목록
+              </CommonButton>
+            )}
+          </nav>
         </div>
       </div>
     </>

diff --git a/client/src/components/inquiry/InquiryHome.tsx b/client/src/components/inquiry/InquiryHome.tsx
@@ -56,19 +56,19 @@ export default function InquiryHome({
   };
 
   return (
-    <div className="pt-5 h-[83%]">
-      <section>
-        <p className="text-lg text-center px-3">
+    <section className="pt-5 h-[83%]">
+      <div>
+        <h1 className="text-lg text-center px-3">
           <b>무엇을 도와드릴까요?</b>
-        </p>
+        </h1>
 
-        <div className="text-center text-[14px] break-words my-2 leading-[18px] px-3">
+        <h2 className="text-center text-[14px] break-words my-2 leading-[18px] px-3">
           <p>이용에 관한 문의가 있으시다면</p>
 
           <p>
-            <b>문의하기</b> 버튼을 눌러주세요.
+            <b>문의하기</b>&nbsp;버튼을 눌러주세요.
           </p>
-        </div>
+        </h2>
 
         <div className="mt-3">
           {CUSTOMER_SERVICE.notification.map((notice) => (
@@ -96,7 +96,7 @@ export default function InquiryHome({
             </CommonButton>
           )}
         </div>
-      </section>
-    </div>
+      </div>
+    </section>
   );
 }
diff --git a/client/src/components/inquiry/InquiryList.tsx b/client/src/components/inquiry/InquiryList.tsx
@@ -8,9 +8,10 @@ import useChatStore from '@/stores/chatStore';
 import useChatListQuery from '@/hooks/query/useChatListQuery';
 
 import { InquiryForm, InquiryRoom } from '.';
-
 import { ErrorMessage, LoadingMessage } from '../common';
 
+import { ChatList } from '@/types/data';
+
 export default function InquiryList() {
   const ref = useRef(null);
 
@@ -25,10 +26,6 @@ export default function InquiryList() {
     isError,
   } = useChatListQuery(userId);
 
-  const renderService = () => {
-    if (selected === 'chat') return <InquiryForm />;
-  };
-
   const options = {
     root: null,
     rootMargin: '0px',
@@ -37,7 +34,12 @@ export default function InquiryList() {
 
   let observer: IntersectionObserver;
 
-  const intersector = ([entry]: any) => entry.isIntersecting && fetchNextPage();
+  const intersector: IntersectionObserverCallback = (
+    entries: IntersectionObserverEntry[],
+  ) => {
+    const [entry] = entries;
+    entry.isIntersecting && fetchNextPage();
+  };
 
   useEffect(() => {
     if (ref && ref.current) {
@@ -52,7 +54,7 @@ export default function InquiryList() {
 
   return (
     <>
-      {renderService()}
+      {selected === 'chat' && <InquiryForm />}
 
       <div className="flex flex-col items-center w-full h-[83%]">
         <div className="w-[86px] h-[30px] rounded-lg border-2 border-brown-70 mb-2 py-2 px-2 flex justify-center items-center bg-contain bg-center bg-repeat bg-[url('/assets/img/bg_wood_dark.png')]">
@@ -67,7 +69,7 @@ export default function InquiryList() {
 
         <div className="w-full h-[82%] overflow-y-scroll scrollbar">
           {chatList?.map((page) => {
-            return page.chatList.map((list: any) => (
+            return page.chatList.map((list: ChatList) => (
               <div key={list.chatRoomId}>
                 {page.chatList.length === 0 ? (
                   <div className="h-full flex justify-center items-center">

diff --git a/client/src/components/inquiry/NewChat.tsx b/client/src/components/inquiry/NewChat.tsx
@@ -11,7 +11,7 @@ import useChatStore from '@/stores/chatStore';
 
 import { ChatInput, ChatBox } from '.';
 
-import { Chat } from '@/types/data';
+import { ChatData } from '@/types/data';
 
 import checkForToken from '@/utils/checkForToken';
 
@@ -24,7 +24,7 @@ export default function NewChat({ role }: NewChatProps) {
   const scrollRef = useRef<HTMLDivElement | null>(null);
 
   const [connected, setConnected] = useState(false);
-  const [chat, setChat] = useState<Chat[]>([]);
+  const [chat, setChat] = useState<ChatData[]>([]);
 
   const router = useRouter();
 
@@ -89,7 +89,7 @@ export default function NewChat({ role }: NewChatProps) {
           subscription = client?.current?.subscribe(
             `/sub/chatRoom/${roomId}`,
             (payload) => {
-              const receivedMessage: Chat = JSON.parse(payload.body);
+              const receivedMessage: ChatData = JSON.parse(payload.body);
 
               setChat((previousChat) => [...previousChat, receivedMessage]);
             },

diff --git a/client/src/components/inquiry/TitleInput.tsx b/client/src/components/inquiry/TitleInput.tsx
@@ -35,7 +35,7 @@ export default function TitleInput({
         onClick={() => {
           sendTitle(), newChat();
         }}
-        disabled={title === ''}
+        disabled={!title}
         className={`w-[43px] h-[28px] text-[12px] flex justify-center items-center text-brown-10 font-bold  border-brown-70 rounded-xl border-2 bg-contain bg-center bg-repeat bg-[url('/assets/img/bg_wood_dark.png')] shadow-outer/down`}>
         입력
       </button>

diff --git a/client/src/hooks/query/useChatListQuery.ts b/client/src/hooks/query/useChatListQuery.ts
@@ -1,11 +1,14 @@
 import { useInfiniteQuery } from '@tanstack/react-query';
 
 import { getChatListById } from '@/api/chat';
+import useChatStore from '@/stores/chatStore';
 
 const useChatListQuery = (id: string) => {
+  const { roomId } = useChatStore();
+
   const { data, fetchNextPage, hasNextPage, isLoading, isError } =
     useInfiniteQuery(
-      ['chatList'],
+      ['chatList', roomId],
       ({ pageParam = 0 }) => getChatListById({ pageParam }, id),
 
       {

diff --git a/client/src/types/data.d.ts b/client/src/types/data.d.ts
@@ -178,8 +178,8 @@ export interface GuestbookDataInfo {
   createdAt: string;
   modifiedAt: string;
 }
-  
-export interface Chat {
+
+export interface ChatData {
   senderId: number;
   senderName: string;
   messageId: number;
@@ -205,7 +205,7 @@ export interface ReportListsData {
   content: string;
   key: string;
 }
-  
+
 export interface NotificationDataInfo {
   id: number;
   type:

diff --git a/client/src/utils/checkForToken.ts b/client/src/utils/checkForToken.ts
@@ -27,7 +27,7 @@ const checkForToken = () => {
     return true;
   };
 
-  return { authVerify, storageData };
+  return { authVerify, storageData, accessToken, refreshToken };
 };
 
 export default checkForToken;