Refactor: 셰어/마인더 상담 목록 탭 쿼리스트링 값에 따라 상태 유지되도록 #155

src/api/patch.ts

@@ -27,6 +27,9 @@ export const patchAuthFindId = async (body: any) =>
 //비밀번호 찾기
 export const patchAuthFindPassword = async (body: any) =>
   await patchPublicInstance('/auth/find-password', body);
+//로그아웃
+export const patchAuthSignOut = async (body: any) =>
+  await patchInstance('/auth/signOut', body);
 
 //Counselor Controller
 //카테고리/들준마 상담사 리스트 반환

src/components/Buyer/BuyerConsult/BuyerChatSection.tsx

@@ -29,7 +29,7 @@ export const BuyerChatSection = ({
    * https://stackoverflow.com/questions/73896315/rxjs-subscribe-callback-doesnt-have-access-to-current-react-state-functional-c
    */
   const cardDataRef = useRef<consultApiObject[]>([]);
-  const { stompClient } = useStompContext();
+  const { stompClient, isConnected } = useStompContext();
   //채팅 readId, 가장 최근 unread message, 정렬 업데이트
   const updateChatData = (
     chatId: number,
@@ -106,11 +106,11 @@ export const BuyerChatSection = ({
                     consultId: null,
                   };
                   //add roomIds for unsubscribe
-                  roomIdsRef.current.push(notification.chatId);
+                  roomIdsRef.current.unshift(notification.chatId);
 
                   cardDataRef.current = [
-                    ...cardDataRef.current,
                     addedChatRoomItem,
+                    ...cardDataRef.current,
                   ];
 
                   setCardData(cardDataRef.current);
@@ -148,6 +148,7 @@ export const BuyerChatSection = ({
     sendConnectRequest();
 
     return () => {
+      console.log('unmount');
       if (roomIdsRef.current) {
         roomIdsRef.current.forEach((value) => {
           stompClient.current?.unsubscribe(
@@ -161,7 +162,7 @@ export const BuyerChatSection = ({
         );
       }
     };
-  }, [stompClient]);
+  }, [stompClient, isConnected]);
 
   useLayoutEffect(() => {
     const fetchData = async () => {

src/components/Buyer/BuyerConsult/ConsultModal.tsx

@@ -1,18 +1,26 @@
 import { ReactComponent as CheckIcon } from 'assets/icons/icon-modal-check.svg';
-import { SetStateAction, useEffect, useState } from 'react';
-import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil';
+import { SetStateAction, useState } from 'react';
+import { useRecoilState, useSetRecoilState } from 'recoil';
 import styled, { keyframes } from 'styled-components';
 import { Green, Grey1, Grey6 } from 'styles/color';
 import { Body1 } from 'styles/font';
 import { isConsultModalOpenState, scrollLockState } from 'utils/atom';
 import { ReactComponent as Bar } from 'assets/icons/icon-modal-bar.svg';
+import { SetURLSearchParams } from 'react-router-dom';
 interface SortModalProps {
   sortType: number;
   setSortType: React.Dispatch<SetStateAction<number>>;
+  searchParams: URLSearchParams;
+  setSearchParams: SetURLSearchParams;
 }
 
 //최근순 읽지않은순 modal
-export const ConsultModal = ({ sortType, setSortType }: SortModalProps) => {
+export const ConsultModal = ({
+  sortType,
+  setSortType,
+  searchParams,
+  setSearchParams,
+}: SortModalProps) => {
   //modal 여부
   const [isModalOpen, setIsModalOpen] = useRecoilState(isConsultModalOpenState);
   //여기서 unmount 시 sortType 바꾸고 새로 request
@@ -34,6 +42,8 @@ export const ConsultModal = ({ sortType, setSortType }: SortModalProps) => {
         className="row"
         onClick={() => {
           setSortType(0);
+          searchParams.set('sort', 'latest');
+          setSearchParams(searchParams);
           setIsModalOpen(false);
           setScrollLock(false);
         }}
@@ -51,6 +61,8 @@ export const ConsultModal = ({ sortType, setSortType }: SortModalProps) => {
         className="row"
         onClick={() => {
           setSortType(1);
+          searchParams.set('sort', 'unread');
+          setSearchParams(searchParams);
           setIsModalOpen(false);
           setScrollLock(false);
         }}

src/components/Seller/Common/OngoingCounsultBox.tsx

@@ -27,7 +27,7 @@ interface OngoingCounsultBoxProps {
   counselorprofileStatus: number | undefined;
   onClick?: () => void;
   reviewCompleted?: boolean;
-  isChat: boolean;
+  isChat?: boolean;
 }
 function OngoingCounsultBox({
   categoryStatus,

src/components/Seller/SellerConsult/SellerChatList.tsx

@@ -1,7 +1,7 @@
 import { getChatsMinder } from 'api/get';
 import { ConsultModal } from 'components/Buyer/BuyerConsult/ConsultModal';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { SetURLSearchParams, useNavigate } from 'react-router-dom';
 import { useRecoilState, useSetRecoilState } from 'recoil';
 import styled from 'styled-components';
 import { isConsultModalOpenState, scrollLockState } from 'utils/atom';
@@ -18,13 +18,17 @@ import { ConsultInfoItem, ConsultInfoList } from 'utils/type';
 interface SellerConsultProps {
   sortType: number;
   setSortType: React.Dispatch<React.SetStateAction<number>>;
-  isIncludeCompleteConsult: boolean;
+  isChecked: boolean;
+  searchParams: URLSearchParams;
+  setSearchParams: SetURLSearchParams;
 }
 
 function SellerChatList({
   sortType,
-  isIncludeCompleteConsult,
+  isChecked,
   setSortType,
+  searchParams,
+  setSearchParams,
 }: SellerConsultProps) {
   const [consultInfo, setConsultInfo] = useState<ConsultInfoList>([]);
   const [isLoading, setIsLoading] = useState<boolean>(true);
@@ -41,7 +45,7 @@ function SellerChatList({
    * https://stackoverflow.com/questions/73896315/rxjs-subscribe-callback-doesnt-have-access-to-current-react-state-functional-c
    */
   const cardDataRef = useRef<ConsultInfoItem[]>([]);
-  const { stompClient } = useStompContext();
+  const { stompClient, isConnected } = useStompContext();
   //채팅 readId, 가장 최근 unread message, 정렬 업데이트
   const updateChatData = (
     chatId: number,
@@ -117,11 +121,11 @@ function SellerChatList({
                     consultId: null,
                   };
                   //add roomIds for unsubscribe
-                  roomIdsRef.current.push(notification.chatId);
+                  roomIdsRef.current.unshift(notification.chatId);
 
                   cardDataRef.current = [
-                    ...cardDataRef.current,
                     addedChatRoomItem,
+                    ...cardDataRef.current,
                   ];
 
                   setConsultInfo(cardDataRef.current);
@@ -172,12 +176,12 @@ function SellerChatList({
         );
       }
     };
-  }, [stompClient]);
+  }, [stompClient, isConnected]);
 
   const fetchChatData = useCallback(async () => {
     setIsLoading(true);
     const params = {
-      filter: !isIncludeCompleteConsult,
+      filter: isChecked,
       sortType: sortType === 0 ? 'latest' : 'unread',
     };
 
@@ -199,7 +203,7 @@ function SellerChatList({
     } finally {
       setIsLoading(false);
     }
-  }, [isIncludeCompleteConsult, navigate, setIsLoading, sortType]);
+  }, [isChecked, navigate, setIsLoading, sortType]);
 
   useEffect(() => {
     fetchChatData();
@@ -250,7 +254,12 @@ function SellerChatList({
                   setScrollLock(false);
                 }}
               />
-              <ConsultModal sortType={sortType} setSortType={setSortType} />
+              <ConsultModal
+                sortType={sortType}
+                setSortType={setSortType}
+                searchParams={searchParams}
+                setSearchParams={setSearchParams}
+              />
             </>
           ) : null}
         </ConsultBoxList>

src/components/Seller/SellerConsult/SellerConsultSection.tsx

@@ -4,53 +4,54 @@ import { ReactComponent as CircleCheckIcon } from 'assets/icons/circle-check.svg
 import { Button2 } from 'styles/font';
 import styled from 'styled-components';
 
-import { useState } from 'react';
 import { useSetRecoilState } from 'recoil';
 import { isConsultModalOpenState } from 'utils/atom';
 import SellerLetterList from './SellerLetterList';
 import SellerChatList from './SellerChatList';
 import SellerOpenConsultList from './SellerOpenConsultList';
+import { useConsultParams } from 'hooks/useConsultParams';
+import { useState } from 'react';
 interface ConsultTypeProps {
   isActive: boolean;
   isLong?: boolean;
 }
 
 export const SellerConsultSection = () => {
-  // 편지 탭, 채팅 탭, 공개상담탭 -> 0, 1, 2
-  const [consultTabStatus, setConsultTabStatus] = useState<number>(0);
-  // 완료된 상담 제외, 포함
-  const [isIncludeCompleteConsult, setIsIncludeCompleteConsult] =
-    useState<boolean>(false);
-  // 최근순, 읽지 않은 순
-  const [sortType, setSortType] = useState<number>(0);
+  const {
+    consultType,
+    sortType,
+    setSortType,
+    handleLetterClick,
+    handleChatClick,
+    handleOpenChatClick,
+    searchParams,
+    setSearchParams,
+    isChecked,
+    setIsChecked,
+  } = useConsultParams();
+
   // 모달 열지 말지
   const setIsModalOpen = useSetRecoilState<boolean>(isConsultModalOpenState);
   return (
     <>
       <ConsultSortingMenu>
         <div className="row1">
           <ConsultType
-            isActive={consultTabStatus === 0}
-            onClick={() => {
-              setConsultTabStatus(0);
-            }}
+            isActive={consultType === 'letter'}
+            onClick={handleLetterClick}
           >
             편지
           </ConsultType>
           <ConsultType
-            isActive={consultTabStatus === 1}
-            onClick={() => {
-              setConsultTabStatus(1);
-            }}
+            isActive={consultType === 'chat'}
+            onClick={handleChatClick}
           >
             채팅
           </ConsultType>
           <ConsultType
             isLong={true}
-            isActive={consultTabStatus === 2}
-            onClick={() => {
-              setConsultTabStatus(2);
-            }}
+            isActive={consultType === 'open-chat'}
+            onClick={handleOpenChatClick}
           >
             공개상담
           </ConsultType>
@@ -60,43 +61,45 @@ export const SellerConsultSection = () => {
             }}
           >
             <Button2 color={Grey3}>
-              {sortType === 0 ? '최근순' : '읽지 않은 순'}
+              {sortType === 0 ? '최근순' : '읽지않은순'}
             </Button2>
             <DownArrowIcon />
           </SortingType>
         </div>
-        <div className="row2">
-          <div
-            className="row2-1"
-            onClick={() => {
-              setIsIncludeCompleteConsult(!isIncludeCompleteConsult);
-            }}
-            style={{
-              cursor: 'pointer',
-            }}
-          >
-            {consultTabStatus !== 2 && (
-              <>
-                <CircleCheckIcon
-                  fill={isIncludeCompleteConsult ? Grey5 : Green}
-                />
-                <Button2 color={Grey3}>종료/취소된 상담 제외</Button2>
-              </>
-            )}
+        {!(consultType === 'open-chat') && (
+          <div className="row2">
+            <div
+              className="row2-1"
+              onClick={() => {
+                setIsChecked(!isChecked);
+                searchParams.set('check', String(!isChecked));
+                setSearchParams(searchParams);
+              }}
+              style={{
+                cursor: 'pointer',
+              }}
+            >
+              <CircleCheckIcon fill={isChecked ? Green : Grey5} />
+              <Button2 color={Grey3}>종료/취소된 상담 제외</Button2>
+            </div>
           </div>
-        </div>
+        )}
       </ConsultSortingMenu>
-      {consultTabStatus === 0 ? (
+      {consultType === 'letter' ? (
         <SellerLetterList
           sortType={sortType}
           setSortType={setSortType}
-          isIncludeCompleteConsult={isIncludeCompleteConsult}
+          searchParams={searchParams}
+          setSearchParams={setSearchParams}
+          isChecked={isChecked}
         />
-      ) : consultTabStatus === 1 ? (
+      ) : consultType === 'chat' ? (
         <SellerChatList
           sortType={sortType}
           setSortType={setSortType}
-          isIncludeCompleteConsult={isIncludeCompleteConsult}
+          searchParams={searchParams}
+          setSearchParams={setSearchParams}
+          isChecked={isChecked}
         />
       ) : (
         <SellerOpenConsultList />