[0426] main 배포

src/Router.tsx

@@ -80,7 +80,7 @@ const Router = () => {
       <Route path="/paymentComplete" element={<BuyerPaymentComplete />} />
       <Route path="/paymentFinish" element={<BuyerFinishPayment />} />
       <Route path="/counselors" element={<BuyerAvailCounselor />} />
-      <Route path="/mypage" element={<BuyerMypage />} />
+      <Route path="/mypage" element={<BuyerMypage />} />  
       <Route path="/reviewManage" element={<BuyerReviewManage />} />
       <Route path="/review" element={<BuyerWriteReview />} />
       <Route path="/saved" element={<BuyerSavedCounselor />} />

src/api/get.ts

@@ -149,6 +149,9 @@ export const getCounselorsComments = async (postId: any) =>
 export const getCustomersComments = async (postId: any) =>
   await getInstance(`/comments/customers/${postId}`);
 
+export const getCounselorsIsWriteComments = async (postId: any) =>
+  await getInstance(`/comments/counselors/authentication/${postId}`);
+
 // Post Controller
 export const getOneOpenConsult = async (id: string | undefined) =>
   await getInstance(`/posts/${id}`);
@@ -175,3 +178,8 @@ export const getCustomerIsWriter = async (postId: any) =>
 
 export const getOpenConsultDraft = async (postId: any) =>
   await getInstance(`/posts/drafts/${postId}`);
+
+// Post Scrap Controller
+
+export const getPostScraps = async (params: any) =>
+  getInstance(`/postScraps`, params);

src/api/patch.ts

@@ -64,9 +64,23 @@ export const patchApplyPayments = async (id: any) =>
 
 //SearchWord Controller
 //검색 결과 반환
-export const patchSearchWordsResults = async (sortType: string, body: any) =>
-  await patchPublicInstance(`/searchWords/results?sortType=${sortType}`, body);
+export const patchSearchWordsCounselorsResults = async (
+  sortType: string,
+  body: any,
+) =>
+  await patchPublicInstance(
+    `/searchWords/results/counselors?sortType=${sortType}`,
+    body,
+  );
 
+export const patchSearchWordsPostsResults = async (
+  sortType: string,
+  body: any,
+) =>
+  await patchPublicInstance(
+    `/searchWords/results/posts?sortType=${sortType}`,
+    body,
+  );
 //Wishlist Controlloer
 //찜하기 추가
 export const patchWishLists = async (counselorId: number) =>
@@ -80,6 +94,5 @@ export const patchAdoptComment = async (postId: any, commentId: string) =>
   await patchInstance(`/comments/customers/${postId}?commentId=${commentId}`);
 
 //Post Controller
-export const patchOpenConsult = async (body: any) => {
+export const patchOpenConsult = async (body: any) =>
   await patchInstance(`/posts`, body);
-};

src/api/post.ts

@@ -50,7 +50,7 @@ export const postWishLists = async (body: any) =>
 // 일대다상담
 
 // Comment Controller
-export const postComment = async (body) =>
+export const postComment = async (body: any) =>
   await postInstance('/comments/counselors', body);
 
 // CommentLike Controller

src/components/Buyer/BuyerCategoryResult/CategoryResultHeader.tsx

@@ -3,18 +3,24 @@ import { Grey1, Grey6, White } from 'styles/color';
 import { Heading } from 'styles/font';
 import { ReactComponent as Back } from 'assets/icons/icon-back.svg';
 import { useNavigate } from 'react-router-dom';
+import { useCallback, useMemo } from 'react';
 interface ResultHeaderProps {
   categoryType: string;
 }
 export const CategoryResultHeader = ({ categoryType }: ResultHeaderProps) => {
+  const url = new URL(window.location.href);
+  const params = useMemo(() => new URLSearchParams(url.search), [url.search]);
   const navigate = useNavigate();
+  const handleClickBackIcon = useCallback(() => {
+    if (params.has('from', 'search')) { 
+      navigate('/search');
+    } else {
+      navigate('/share');
+    }
+  }, [navigate, params]);
   return (
     <Wrapper>
-      <BackIcon
-        onClick={() => {
-          navigate(-1);
-        }}
-      />
+      <BackIcon onClick={handleClickBackIcon} />
       <Heading color={Grey1}>{categoryType}</Heading>
     </Wrapper>
   );

src/components/Buyer/BuyerConsult/BuyerConsultChatSection.tsx

@@ -9,6 +9,7 @@ import { LoadingSpinner } from 'utils/LoadingSpinner';
 import { Heading } from 'styles/font';
 import { ReactComponent as Empty } from 'assets/icons/graphic-noting.svg';
 import { convertChatListDate } from 'utils/convertDate';
+import { Space } from 'components/Common/Space';
 
 //
 //
@@ -37,7 +38,7 @@ export const BuyerConsultChatSection = ({
    * https://stackoverflow.com/questions/73896315/rxjs-subscribe-callback-doesnt-have-access-to-current-react-state-functional-c
    */
   const cardDataRef = useRef<consultApiObject[]>([]);
-  const { stompClient, isConnected } = useStompContext();
+  const { stompClient } = useStompContext();
 
   /**
    * 채팅 readId, 가장 최근 unread message, 정렬 업데이트
@@ -84,6 +85,7 @@ export const BuyerConsultChatSection = ({
       unreadMessageCount: 0,
       reviewCompleted: null,
       consultId: null,
+      consultCategory: '',
     };
     //add roomIds for unsubscribe
     roomIdsRef.current.unshift(notification.chatId);
@@ -94,12 +96,12 @@ export const BuyerConsultChatSection = ({
   };
 
   useEffect(() => {
-    if (!isConnected) {
+    if (!stompClient.current?.connected) {
       return;
     }
 
     const sendConnectRequest = () => {
-      if (stompClient.current) {
+      if (stompClient.current && stompClient.current.connected) {
         stompClient.current.send(
           '/app/api/v1/chat/customers/connect',
           {},
@@ -181,19 +183,21 @@ export const BuyerConsultChatSection = ({
     //
 
     return () => {
-      roomIdsRef.current.forEach((value) => {
-        stompClient.current?.unsubscribe(
-          '/queue/chatMessages/customers/' + value,
-        );
-      });
-      if (userIdRef.current !== -1) {
-        stompClient.current?.unsubscribe(
-          '/queue/chattings/notifications/customers/' + userIdRef.current,
-        );
+      if (stompClient.current?.connected) {
+        roomIdsRef.current.forEach((value) => {
+          stompClient.current?.unsubscribe(
+            '/queue/chatMessages/customers/' + value,
+          );
+        });
+        if (userIdRef.current !== -1) {
+          stompClient.current?.unsubscribe(
+            '/queue/chattings/notifications/customers/' + userIdRef.current,
+          );
+        }
+        stompClient.current?.unsubscribe('/queue/chattings/connect/customers/');
       }
-      stompClient.current?.unsubscribe('/queue/chattings/connect/customers/');
     };
-  }, [stompClient, isConnected]);
+  }, [stompClient, stompClient.current?.connected]);
 
   useLayoutEffect(() => {
     const fetchData = async () => {
@@ -261,6 +265,7 @@ export const BuyerConsultChatSection = ({
               />
             );
           })}
+          <Space height="4rem" />
         </BuyerConsultChatSectionWrapper>
       );
     } else {
@@ -279,7 +284,6 @@ const BuyerConsultChatSectionWrapper = styled.section`
   flex-direction: column;
   gap: 0.8rem;
   align-items: center;
-  padding: 1.2rem 0;
 `;
 const EmptyWrapper = styled.div`
   margin-top: 10vh;

src/components/Buyer/BuyerConsult/BuyerConsultLetterSection.tsx

@@ -7,6 +7,7 @@ import { getLettersCustomers } from 'api/get';
 import { LoadingSpinner } from 'utils/LoadingSpinner';
 import { ReactComponent as Empty } from 'assets/icons/graphic-noting.svg';
 import { Heading } from 'styles/font';
+import { Space } from 'components/Common/Space';
 
 interface BuyerConsultLetterSectionProps {
   sortType: number;
@@ -71,6 +72,7 @@ export const BuyerConsultLetterSection = ({
             {cardData.map((value) => {
               return (
                 <ConsultCard
+                  key={value.id}
                   consultStyle={value.consultStyle}
                   id={value.id}
                   latestMessageContent={value.latestMessageContent}
@@ -85,6 +87,7 @@ export const BuyerConsultLetterSection = ({
                 />
               );
             })}
+            <Space height="4rem" />
           </BuyerConsultLetterSectionWrapper>
         ) : (
           <EmptyWrapper>
@@ -102,7 +105,6 @@ const BuyerConsultLetterSectionWrapper = styled.section`
   flex-direction: column;
   gap: 0.8rem;
   align-items: center;
-  padding: 1.2rem 0;
 `;
 
 const EmptyIcon = styled(Empty)`

src/components/Buyer/BuyerConsult/BuyerOpenConsultSection.tsx

@@ -1,10 +1,10 @@
 import React, { useLayoutEffect, useRef, useState } from 'react';
 import { useRecoilState } from 'recoil';
 import styled from 'styled-components';
-import { Green, Grey1, Grey2, Grey3, Grey6 } from 'styles/color';
+import { Grey1, Grey2, Grey3, Grey6 } from 'styles/color';
 import { Body1, Body3, Caption1, Heading } from 'styles/font';
 import { LoadingSpinner } from 'utils/LoadingSpinner';
-import { isBuyPopupOpenState, isConsultModalOpenState } from 'utils/atom';
+import { isBuyPopupOpenState } from 'utils/atom';
 import { ReactComponent as LockIcon } from 'assets/icons/icon-lock.svg';
 import { ReactComponent as HeartIcon } from 'assets/icons/icon-heart2.svg';
 import { ReactComponent as SaveIcon } from 'assets/icons/icon-save2.svg';
@@ -83,7 +83,7 @@ function BuyerOpenConsultSection({ isChecked }: BuyerOpenConsultSectionProps) {
       {isLoading ? (
         <div
           style={{
-            height: 'calc(100vh - 46rem)',
+            height: 'calc(70vh)',
             display: 'flex',
             alignItems: 'center',
           }}
@@ -167,6 +167,8 @@ function BuyerOpenConsultSection({ isChecked }: BuyerOpenConsultSectionProps) {
             })
           )}
           {/* 상담카드 부분 */}
+          {/* 마지막 요소가 가려지지 않도록 마진 영역을 추가 */}
+          <Space height="4rem" />
         </BuyerOpenConsultCardList>
       )}
       {!isLastElem ? (
@@ -196,7 +198,7 @@ function BuyerOpenConsultSection({ isChecked }: BuyerOpenConsultSectionProps) {
 
 const BuyerOpenConsultCardList = styled.div`
   display: flex;
-  margin: 1.2rem 2rem;
+  margin: 0 2rem;
   flex-direction: column;
   align-items: flex-start;
   gap: 1.2rem;
@@ -279,14 +281,6 @@ const TimeLeft = styled.div`
   right: 1.6rem;
 `;
 
-const CreateConsultButton = styled.button`
-  width: 5.8rem;
-  height: 5.8rem;
-  border-radius: 100%;
-  background-color: ${Green};
-  box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.25);
-  align-self: flex-end;
-`;
 const CreateConsultButtonWrapper = styled.div`
   width: 100%;
   padding: 0 2rem;

src/components/Buyer/BuyerHome/HomeConsultInProgress.tsx

@@ -10,7 +10,7 @@ import { useStompContext } from 'contexts/StompContext';
 import { convertChatListDate } from 'utils/convertDate';
 interface ConsultItem {
   id: number;
-  consultStyle: string; 
+  consultStyle: string;
   status: string;
   opponentNickname: string;
   latestMessageUpdatedAt: string;
@@ -25,7 +25,7 @@ interface ConsultItem {
 export const HomeConsultInProgress = () => {
   const navigate = useNavigate();
 
-  const { stompClient, isConnected } = useStompContext();
+  const { stompClient } = useStompContext();
 
   const [consultCard, setConsultCard] = useState<ConsultItem>();
   const [totalOngoing, setTotalOngoing] = useState<number>();
@@ -39,7 +39,7 @@ export const HomeConsultInProgress = () => {
      *
      */
     const connectConsultInProgress = (id: number) => {
-      if (stompClient.current && isConnected && isLogined) {
+      if (stompClient.current && stompClient.current?.connected && isLogined) {
         stompClient.current.subscribe(
           '/queue/chatMessages/customers/' + id,
           (message) => {
@@ -85,13 +85,13 @@ export const HomeConsultInProgress = () => {
     fetchData();
 
     return () => {
-      if (stompClient.current && isConnected && isLogined) {
+      if (stompClient.current && stompClient.current?.connected && isLogined) {
         stompClient.current?.unsubscribe(
           '/queue/chatMessages/customers/' + currentChatIdRef.current,
         );
       }
     };
-  }, [stompClient, isConnected, isLogined]);
+  }, [stompClient, stompClient.current?.connected, isLogined]);
 
   if (!isLogined || !totalOngoing || !consultCard) {
     return <></>;
@@ -145,10 +145,11 @@ const Wrapper = styled.div`
   .nav-consult {
     display: flex;
     width: 100%;
+    height: 4.4rem;
     box-sizing: border-box;
     padding: 2.2rem 3.2rem 1.2rem 2rem;
-    justify-content: space-between;
     align-items: center;
+    justify-content: space-between;
     cursor: pointer;
     margin-bottom: 0.4rem;
   }
@@ -157,7 +158,6 @@ const NavConsult = styled.div`
   display: flex;
   align-items: center;
   gap: 0.8rem;
-  margin: 0px auto 0px 0px
-`;
-const MoreIcon = styled(More)`
+  margin: 0px auto 0px 0px;
 `;
+const MoreIcon = styled(More)``;

src/components/Buyer/BuyerHome/HomeConsultInReady.tsx

@@ -64,7 +64,10 @@ const Wrapper = styled.div`
     width: 100%;
     height: 4.4rem;
     display: flex;
+    box-sizing: border-box;
+    align-items: center;
     justify-content: space-between;
+    padding: 2.2rem 3.2rem 1.2rem 2rem;
     cursor: pointer;
     margin-bottom: 0.4rem;
   }
@@ -73,10 +76,6 @@ const NavConsult = styled.div`
   display: flex;
   align-items: center;
   gap: 0.8rem;
-  margin-top: 0.9rem;
-  margin-left: 2rem;
-`;
-const MoreIcon = styled(More)`
-  margin-right: 3.8rem;
-  margin-top: 1.5rem;
+  margin: 0px auto 0px 0px;
 `;
+const MoreIcon = styled(More)``;

src/components/Buyer/BuyerOpenConsult/HotOpenConsultList.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import styled from 'styled-components';
 import { ReactComponent as FireIcon } from 'assets/icons/icon-fire.svg';
-import { Body3, Body4 } from 'styles/font';
+import { Body4 } from 'styles/font';
 import { Grey6 } from 'styles/color';
 import { getCustomerPopularConsultList } from 'api/get';
 import { useNavigate } from 'react-router-dom';
@@ -26,6 +26,7 @@ function HotOpenConsultList() {
       </FireIconWrapper>
       {hotConsultList.map((item) => (
         <HotTitleItem
+          key={item.postId}
           onClick={() => {
             navigate(`/open-consult/${item.postId}`);
           }}