[Refactor] 셰어/마인더 상담 목록 페이지 뷰 쿼리스트링 상태에 맞게 매칭

src/Router.tsx

@@ -45,6 +45,8 @@ import { BuyerChat } from 'pages/Buyer/BuyerChat';
 import Service from 'pages/Common/Service';
 import { BuyerQuit } from 'pages/Buyer/BuyerQuit';
 import { SellerChatTemp } from 'pages/Seller/SellerChatTemp';
+import BuyerOpenConsult from 'pages/Buyer/BuyerOpenConsult';
+import SellerOpenConsult from 'pages/Seller/SellerOpenConsult';
 const Router = () => {
   return (
     <Routes>
@@ -54,6 +56,7 @@ const Router = () => {
       <Route path="/share" element={<BuyerHome />} />
       <Route path="/" element={<BuyerHome />} />
       <Route path="/consult" element={<BuyerConsult />} />
+      <Route path="/open-consult" element={<BuyerOpenConsult />} />
       <Route path="/profile/:id" element={<BuyerCounselorProfile />} />
       <Route path="/search" element={<BuyerSearch />} />
       <Route path="/categorySearch" element={<BuyerCategoryResult />} />
@@ -108,6 +111,7 @@ const Router = () => {
       />
 
       <Route path="/minder/consult" element={<SellerConsult />} />
+      <Route path="/minder/open-consult" element={<SellerOpenConsult />} />
       {/* 판매자 : 프로필 정보 */}
       <Route path="/minder/mypage" element={<SellerMypage />} />
 

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,
@@ -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/Common/TabA1.tsx

@@ -1,5 +1,6 @@
 import styled from 'styled-components';
 import { ReactComponent as UnderLineBuyer } from 'assets/icons/underline-buyer.svg';
+import { ReactComponent as UnderLineBuyerBig } from 'assets/icons/underline-big.svg';
 import { Subtitle } from 'styles/font';
 import { Black, Green, Grey6 } from 'styles/color';
 import { useEffect, useState } from 'react';
@@ -24,6 +25,7 @@ export const TabA1 = ({ isBuyer, initState }: TabA1Props) => {
   return (
     <Wrapper>
       <TabButton
+        tabState={1}
         onClick={() => {
           setTabState(1);
           if (isBuyer) {
@@ -43,6 +45,7 @@ export const TabA1 = ({ isBuyer, initState }: TabA1Props) => {
         )}
       </TabButton>
       <TabButton
+        tabState={2}
         onClick={() => {
           setTabState(2);
           if (isBuyer) {
@@ -61,8 +64,28 @@ export const TabA1 = ({ isBuyer, initState }: TabA1Props) => {
           <Subtitle color={Black}>상담</Subtitle>
         )}
       </TabButton>
-      <TabButton>
+      <TabButton
+        tabState={3}
+        onClick={() => {
+          setTabState(3);
+          if (isBuyer) {
+            navigate('/open-consult');
+          } else {
+            navigate('/minder/open-consult');
+          }
+        }}
+      >
         {tabState === 3 ? (
+          <>
+            <Subtitle color={color}>공개상담</Subtitle>
+            <UnderLineBuyerBig />
+          </>
+        ) : (
+          <Subtitle color={Black}>공개상담</Subtitle>
+        )}
+      </TabButton>
+      <TabButton tabState={4}>
+        {tabState === 4 ? (
           <>
             <Subtitle color={color}>내 정보</Subtitle>
             <UnderLineBuyer />
@@ -71,7 +94,7 @@ export const TabA1 = ({ isBuyer, initState }: TabA1Props) => {
           <Subtitle
             color={Black}
             onClick={() => {
-              setTabState(3);
+              setTabState(4);
               if (isBuyer) {
                 navigate('/mypage');
               } else {
@@ -91,17 +114,23 @@ const Wrapper = styled.div`
   height: 4.4rem;
   display: flex;
   justify-content: center;
-  gap: 12%;
   border-bottom: 1px solid ${Grey6};
   position: sticky;
   top: 6rem;
   background-color: white;
   z-index: 999;
 `;
-const TabButton = styled.div`
+const TabButton = styled.div<{ tabState: number }>`
   display: flex;
   flex-direction: column;
-  width: 6.5rem;
+  width: ${(props) =>
+    props?.tabState === 1
+      ? '8.8rem'
+      : props?.tabState === 2
+      ? '8.2rem'
+      : props?.tabState === 3
+      ? '10.9rem'
+      : '9.6rem'};
   align-items: center;
   cursor: pointer;
 `;

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,
@@ -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>