From bcc960ae947fe810bc0cd1b629e86b6577933207 Mon Sep 17 00:00:00 2001
From: inyoung <rmdnps10@gmail.com>
Date: Thu, 18 Apr 2024 19:10:26 +0900
Subject: [PATCH 01/35] =?UTF-8?q?Hotfix:=20=EB=A7=88=EC=9D=B8=EB=8D=94=20?=
 =?UTF-8?q?=EB=8B=B5=EC=9E=A5=EC=8D=BB=EB=8A=94=EC=A7=80=20=EC=97=AC?=
 =?UTF-8?q?=EB=B6=80=EC=97=90=20=EB=94=B0=EB=9D=BC=20=EB=8B=B5=EC=9E=A5?=
 =?UTF-8?q?=EC=93=B0=EA=B8=B0=20=EB=B2=84=ED=8A=BC=20=ED=99=9C=EC=84=B1,?=
 =?UTF-8?q?=20=EB=B9=84=ED=99=9C=EC=84=B1=ED=99=94=20#211?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/get.ts                                |  3 +++
 .../SellerOpenConsult/BottomSection.tsx       | 21 +++++++++++++++++--
 2 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/src/api/get.ts b/src/api/get.ts
index a6fd9cbf..c8fb34ee 100644
--- a/src/api/get.ts
+++ b/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}`);
diff --git a/src/components/Seller/SellerOpenConsult/BottomSection.tsx b/src/components/Seller/SellerOpenConsult/BottomSection.tsx
index a7482684..53d64bce 100644
--- a/src/components/Seller/SellerOpenConsult/BottomSection.tsx
+++ b/src/components/Seller/SellerOpenConsult/BottomSection.tsx
@@ -1,5 +1,5 @@
 import { Button } from 'components/Common/Button';
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import reactTextareaAutosize from 'react-textarea-autosize';
 import styled from 'styled-components';
 import { ReactComponent as SendIcon } from 'assets/icons/icon-send.svg';
@@ -7,6 +7,7 @@ import { Green, Grey3, Grey6, LightGreen, White } from 'styles/color';
 import { useRecoilValue, useSetRecoilState } from 'recoil';
 import { isSendPopupOpenState } from 'utils/atom';
 import { useNavigate, useParams } from 'react-router-dom';
+import { getCounselorsIsWriteComments } from 'api/get';
 interface BottomSectionProps {
   isReplying: boolean;
   setIsReplying: React.Dispatch<React.SetStateAction<boolean>>;
@@ -22,6 +23,7 @@ function BottomSection({
   const navigate = useNavigate();
   const setIsSendPopupOpen = useSetRecoilState(isSendPopupOpenState);
   const { consultid } = useParams();
+  const [isAlreadyWrite, setIsAlreadyWrite] = useState<boolean>(false);
   const handleNavigateRandomConsult = () => {
     if (localStorage.getItem('randomConsult')) {
       const randomNumList = JSON.parse(localStorage.getItem('randomConsult'));
@@ -34,6 +36,18 @@ function BottomSection({
     }
     // 그냥 open-consult id쳐서 들어왔을 경우 추후 예외처리..
   };
+  useEffect(() => {
+    const fetchIsAlreadyWrite = async () => {
+      const res: any = await getCounselorsIsWriteComments(consultid);
+      if (res.status === 200) {
+        setIsAlreadyWrite(res.data);
+      } else if (res.response.status === 404) {
+        alert('존재하지 않는 상담입니다.');
+        navigate('/minder/consult?type=open-consult');
+      }
+    };
+    fetchIsAlreadyWrite();
+  });
   return (
     <BottomSectionWrapper>
       {isReplying ? (
@@ -70,10 +84,13 @@ function BottomSection({
           <Button
             text={'답장쓰기'}
             width="100%"
+            isActive={!isAlreadyWrite}
             backgroundColor={Green}
             height="5.2rem"
             onClick={() => {
-              setIsReplying(true);
+              if (!isAlreadyWrite) {
+                setIsReplying(true);
+              }
             }}
           />
         </div>

From 47595b03e61a5109102f060495c0db8f10333205 Mon Sep 17 00:00:00 2001
From: inyoung <rmdnps10@gmail.com>
Date: Thu, 18 Apr 2024 19:47:13 +0900
Subject: [PATCH 02/35] =?UTF-8?q?Fix:=20=EB=A7=88=EC=9D=B8=EB=8D=94=20?=
 =?UTF-8?q?=EC=A0=95=EB=B3=B4=EC=97=90=EC=84=9C=20consultStyle=20null=20?=
 =?UTF-8?q?=EC=9D=BC=EB=96=84=20=EA=B8=B0=EB=B3=B8=EC=9C=BC=EB=A1=9C=20?=
 =?UTF-8?q?=EB=9C=A8=EB=8A=94=20=ED=94=84=EB=A1=9C=ED=95=84=EC=9D=84=204?=
 =?UTF-8?q?=EB=B2=88=20=EC=BA=90=EB=A6=AD=ED=84=B0=EB=A1=9C=20=ED=91=9C?=
 =?UTF-8?q?=EC=8B=9C=ED=95=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../BuyerConsult/BuyerOpenConsultSection.tsx      | 10 +---------
 src/components/Common/Profile.tsx                 |  5 +++--
 src/components/Seller/Common/BankSelectModal.tsx  |  4 ++--
 .../Seller/SellerOpenConsult/BottomSection.tsx    |  9 +++++----
 src/pages/Seller/SellerMypage.tsx                 |  2 +-
 src/pages/Seller/SellerRefundBankAccount.tsx      | 15 +++++----------
 6 files changed, 17 insertions(+), 28 deletions(-)

diff --git a/src/components/Buyer/BuyerConsult/BuyerOpenConsultSection.tsx b/src/components/Buyer/BuyerConsult/BuyerOpenConsultSection.tsx
index 8f5951e4..bc848908 100644
--- a/src/components/Buyer/BuyerConsult/BuyerOpenConsultSection.tsx
+++ b/src/components/Buyer/BuyerConsult/BuyerOpenConsultSection.tsx
@@ -4,7 +4,7 @@ import styled from 'styled-components';
 import { Green, 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';
@@ -279,14 +279,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;
diff --git a/src/components/Common/Profile.tsx b/src/components/Common/Profile.tsx
index ec3c2f0a..8d969e54 100644
--- a/src/components/Common/Profile.tsx
+++ b/src/components/Common/Profile.tsx
@@ -11,7 +11,7 @@ import { Characters } from 'utils/Characters';
 interface ProfileProps {
   isBuyer: boolean;
   isVerified?: undefined | boolean;
-  profileIdentifier: number | undefined;
+  profileIdentifier: number | null | undefined;
   name: string | undefined;
   levelStatus: string | undefined;
   isPass?: boolean | undefined;
@@ -29,7 +29,8 @@ export const Profile = ({
   return (
     <>
       <ProfileBox>
-        <Characters number={profileIdentifier} width="7.6rem" />
+        {/* 프로플 만들지 않았을 때, 기본 프로필을 4번으로 */}
+        <Characters number={profileIdentifier ?? 4} width="7.6rem" />
 
         {isBuyer ? (
           <Name>{name}</Name>
diff --git a/src/components/Seller/Common/BankSelectModal.tsx b/src/components/Seller/Common/BankSelectModal.tsx
index a7ced60f..bf54b9b4 100644
--- a/src/components/Seller/Common/BankSelectModal.tsx
+++ b/src/components/Seller/Common/BankSelectModal.tsx
@@ -1,4 +1,4 @@
-import React, { SetStateAction } from 'react';
+import React from 'react';
 import { useRecoilState } from 'recoil';
 import styled, { keyframes } from 'styled-components';
 import { Grey4, Grey6 } from 'styles/color';
@@ -7,7 +7,7 @@ import { BankIcon } from 'utils/BankIcon';
 import { isBankModalOpenState } from 'utils/atom';
 import { bankNameList } from 'utils/constant';
 interface BankSelectModalProps {
-  setSelectBankType: React.Dispatch<SetStateAction<string>>;
+  setSelectBankType: React.Dispatch<React.SetStateAction<string | null>>;
 }
 function BankSelectModal({ setSelectBankType }: BankSelectModalProps) {
   const [isBankModalOpen, setIsBankModalOpen] =
diff --git a/src/components/Seller/SellerOpenConsult/BottomSection.tsx b/src/components/Seller/SellerOpenConsult/BottomSection.tsx
index 53d64bce..f1c89765 100644
--- a/src/components/Seller/SellerOpenConsult/BottomSection.tsx
+++ b/src/components/Seller/SellerOpenConsult/BottomSection.tsx
@@ -4,7 +4,7 @@ import reactTextareaAutosize from 'react-textarea-autosize';
 import styled from 'styled-components';
 import { ReactComponent as SendIcon } from 'assets/icons/icon-send.svg';
 import { Green, Grey3, Grey6, LightGreen, White } from 'styles/color';
-import { useRecoilValue, useSetRecoilState } from 'recoil';
+import { useSetRecoilState } from 'recoil';
 import { isSendPopupOpenState } from 'utils/atom';
 import { useNavigate, useParams } from 'react-router-dom';
 import { getCounselorsIsWriteComments } from 'api/get';
@@ -22,11 +22,12 @@ function BottomSection({
 }: BottomSectionProps) {
   const navigate = useNavigate();
   const setIsSendPopupOpen = useSetRecoilState(isSendPopupOpenState);
-  const { consultid } = useParams();
+  const { consultid } = useParams() as { consultid: string };
   const [isAlreadyWrite, setIsAlreadyWrite] = useState<boolean>(false);
   const handleNavigateRandomConsult = () => {
-    if (localStorage.getItem('randomConsult')) {
-      const randomNumList = JSON.parse(localStorage.getItem('randomConsult'));
+    const randomNumListString = localStorage.getItem('randomConsult');
+    if (randomNumListString != null) {
+      const randomNumList = JSON.parse(randomNumListString);
       const navigateId =
         randomNumList[
           (randomNumList.indexOf(parseInt(consultid)) + 1) %
diff --git a/src/pages/Seller/SellerMypage.tsx b/src/pages/Seller/SellerMypage.tsx
index 375fa2f1..8875d659 100644
--- a/src/pages/Seller/SellerMypage.tsx
+++ b/src/pages/Seller/SellerMypage.tsx
@@ -12,7 +12,7 @@ interface UserInfo {
   nickname: string;
   level: string;
   isEducated: boolean;
-  consultStlyle: string;
+  consultStyle: string;
   profilesStatus: string;
 }
 export const SellerMypage = () => {
diff --git a/src/pages/Seller/SellerRefundBankAccount.tsx b/src/pages/Seller/SellerRefundBankAccount.tsx
index cf742394..b8b386f1 100644
--- a/src/pages/Seller/SellerRefundBankAccount.tsx
+++ b/src/pages/Seller/SellerRefundBankAccount.tsx
@@ -11,15 +11,15 @@ import React, { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useRecoilState } from 'recoil';
 import styled from 'styled-components';
-import { Grey1, Grey3, Grey6 } from 'styles/color';
-import { Body1, Body3, Heading } from 'styles/font';
+import { Grey1, Grey6 } from 'styles/color';
+import { Body1, Heading } from 'styles/font';
 import { BankIcon } from 'utils/BankIcon';
 import { isBankModalOpenState } from 'utils/atom';
 
 function SellerRefundBankAccount() {
   const navigate = useNavigate();
-  const [accountNum, setAccountNum] = useState('');
-  const [bankType, setBankType] = useState(null);
+  const [accountNum, setAccountNum] = useState<string>('');
+  const [bankType, setBankType] = useState<string | null>(null);
   const [owner, setOwner] = useState('');
   // 은행 모달
   const [isBankModalOpen, setIsBankModalOpen] =
@@ -27,14 +27,9 @@ function SellerRefundBankAccount() {
 
   const [isActiveFisnishButton, setIsActiveFinishButton] = useState(false);
   useEffect(() => {
-    // API 요청
-    // setAccountNum('12345678900');
-    // setBankType('우리은행');
-    // setOwner('김고민');
-    // const res= getCounselorsAccount()
     const fetchAccountData = async () => {
       try {
-        const res:any = await getCounselorsAccount();
+        const res: any = await getCounselorsAccount();
         if (res.status === 200) {
           setAccountNum(res.data.account);
           setBankType(res.data.bank);

From b1617e989e52043f05c6ab231d2820600ad40f58 Mon Sep 17 00:00:00 2001
From: inyoung <rmdnps10@gmail.com>
Date: Thu, 18 Apr 2024 20:07:39 +0900
Subject: [PATCH 03/35] =?UTF-8?q?Fix:=20=EC=83=81=EB=8B=B4=EC=82=AC=20?=
 =?UTF-8?q?=EA=B2=B0=EC=A0=9C=EB=82=B4=EC=97=AD=20=EB=A6=AC=EC=8A=A4?=
 =?UTF-8?q?=ED=8A=B8=EC=97=90=EC=84=9C=20=ED=86=A0=EA=B8=80=20=EB=A6=AC?=
 =?UTF-8?q?=EC=8A=A4=ED=8A=B8=20=EC=83=81=EB=8B=A8=EC=97=90=20=ED=95=AD?=
 =?UTF-8?q?=EC=83=81=20=EA=B3=A0=EC=A0=95=ED=95=98=EA=B3=A0=20CardList?=
 =?UTF-8?q?=EC=97=90=20height=20=EA=B0=92=20=EB=B6=80=EC=97=AC=ED=95=98?=
 =?UTF-8?q?=EC=97=AC=20=EC=8A=A4=ED=81=AC=EB=A1=A4=20=EC=BB=A8=ED=85=8C?=
 =?UTF-8?q?=EC=9D=B4=EB=84=88=EA=B0=80=20=ED=95=9C=EB=88=88=EC=97=90=20?=
 =?UTF-8?q?=EB=B3=B4=EC=9D=B4=EB=8F=84=EB=A1=9D=20=EA=B5=AC=ED=98=84=20#22?=
 =?UTF-8?q?4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/Buyer/BuyerPayment.tsx | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/pages/Buyer/BuyerPayment.tsx b/src/pages/Buyer/BuyerPayment.tsx
index 48b18fc5..6d14438b 100644
--- a/src/pages/Buyer/BuyerPayment.tsx
+++ b/src/pages/Buyer/BuyerPayment.tsx
@@ -2,12 +2,13 @@ import { getPaymentsCustomers } from 'api/get';
 import { PaymentCard } from 'components/Buyer/BuyerPayment/PaymentCard';
 import { PaymentModal } from 'components/Buyer/BuyerPayment/PaymentModal';
 import { BackIcon, HeaderWrapper } from 'components/Buyer/Common/Header';
+import { Space } from 'components/Common/Space';
 import useIntersectionObserver from 'hooks/useIntersectionObserver';
 import { useLayoutEffect, useRef, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useRecoilState, useSetRecoilState } from 'recoil';
 import styled from 'styled-components';
-import { Green, Grey1, Grey5, White } from 'styles/color';
+import { Green, Grey1, Grey5, Grey6, White } from 'styles/color';
 import { Button2, Heading } from 'styles/font';
 import { isPaymentModalOpenState, scrollLockState } from 'utils/atom';
 import { PaymentInfo } from 'utils/type';
@@ -190,6 +191,7 @@ export const BuyerPayment = () => {
             );
           })}
         </CardWrapper>
+        <Space height="4rem" />
         {!isLastElem ? (
           <div
             ref={setTarget}
@@ -232,12 +234,18 @@ const CardWrapper = styled.div`
   flex-direction: column;
   align-items: center;
   gap: 0.8rem;
+  height: calc(100% - 11.6rem);
+  overflow: scroll;
   margin-top: 1.2rem;
 `;
 const ToggleWrapper = styled.div`
   display: flex;
-  margin: 0.8rem 2rem;
+  padding: 0.8rem 2rem;
   gap: 0.8rem;
+  background-color: white;
+  border-bottom: 1px solid ${Grey6};
+  position: sticky;
+  top: 5.3rem;
 `;
 const ToggleButton = styled.div<{ focus: boolean }>`
   width: 8.1rem;

From 1df205c5345b5a7ee54083f2af9eb255d01e89f4 Mon Sep 17 00:00:00 2001
From: inyoung <rmdnps10@gmail.com>
Date: Thu, 18 Apr 2024 22:01:08 +0900
Subject: [PATCH 04/35] Style: Divder2 makrup #229

---
 src/components/Common/Divider2.tsx      | 70 +++++++++++++++++++++++++
 src/pages/Buyer/BuyerPayment.tsx        |  2 +-
 src/pages/Buyer/BuyerSavedCounselor.tsx |  9 ++--
 3 files changed, 77 insertions(+), 4 deletions(-)
 create mode 100644 src/components/Common/Divider2.tsx

diff --git a/src/components/Common/Divider2.tsx b/src/components/Common/Divider2.tsx
new file mode 100644
index 00000000..06f84e8b
--- /dev/null
+++ b/src/components/Common/Divider2.tsx
@@ -0,0 +1,70 @@
+import React, { useState } from 'react';
+import styled from 'styled-components';
+import { Black, Green, Grey4, Grey6 } from 'styles/color';
+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';
+interface Divder2Props {
+  tabState: number;
+  setTabState: React.Dispatch<React.SetStateAction<number>>;
+}
+function Divider2({ tabState, setTabState }: Divder2Props) {
+  return (
+    <Wrapper>
+      <TabButton
+        tabState={1}
+        onClick={() => {
+          setTabState(1);
+        }}
+      >
+        {tabState === 1 ? (
+          <>
+            <Subtitle color={Green}>상담사</Subtitle>
+            <UnderLineBuyer />
+          </>
+        ) : (
+          <Subtitle color={Grey4}>상담사</Subtitle>
+        )}
+      </TabButton>
+      <TabButton
+        tabState={2}
+        onClick={() => {
+          setTabState(2);
+        }}
+      >
+        {tabState === 2 ? (
+          <>
+            <Subtitle color={Green}>공개상담</Subtitle>
+            <UnderLineBuyerBig />
+          </>
+        ) : (
+          <Subtitle color={Grey4}>공개상담</Subtitle>
+        )}
+      </TabButton>
+    </Wrapper>
+  );
+}
+
+const Wrapper = styled.nav`
+  width: 100%;
+  box-sizing: border-box;
+  padding-top: 0.8rem;
+  height: 4.4rem;
+  display: flex;
+  justify-content: center;
+  border-bottom: 1px solid ${Grey6};
+  position: sticky;
+  top: 5.3rem;
+  background-color: white;
+  z-index: 999;
+`;
+
+const TabButton = styled.div<{ tabState: number }>`
+  display: flex;
+  flex-direction: column;
+  width: 50%;
+  align-items: center;
+  cursor: pointer;
+`;
+
+export default Divider2;
diff --git a/src/pages/Buyer/BuyerPayment.tsx b/src/pages/Buyer/BuyerPayment.tsx
index 6d14438b..536743ae 100644
--- a/src/pages/Buyer/BuyerPayment.tsx
+++ b/src/pages/Buyer/BuyerPayment.tsx
@@ -225,7 +225,7 @@ export const BuyerPayment = () => {
           </>
         ) : null}
       </>
-    );
+    );  
   }
 };
 
diff --git a/src/pages/Buyer/BuyerSavedCounselor.tsx b/src/pages/Buyer/BuyerSavedCounselor.tsx
index 3d45e494..bf801232 100644
--- a/src/pages/Buyer/BuyerSavedCounselor.tsx
+++ b/src/pages/Buyer/BuyerSavedCounselor.tsx
@@ -10,15 +10,15 @@ import { WishlistDataType } from 'utils/type';
 import { ReactComponent as Empty } from 'assets/icons/graphic-noting.svg';
 import styled from 'styled-components';
 import useIntersectionObserver from 'hooks/useIntersectionObserver';
+import Divider2 from 'components/Common/Divider2';
 // TODO: 찜한 마인더 없을 시 페이지 추후 백 연동 시 구현
 export const BuyerSavedCounselor = () => {
   const navigate = useNavigate();
   const [isInitialLoading, setIsInitialLoading] = useState(true);
   const [wishlistData, setWishlistData] = useState<WishlistDataType[]>([]);
   const [isLastElem, setIsLastElem] = useState<boolean>(false);
-
+  const [tabState, setTabState] = useState<number>(1);
   const preventRef = useRef(true);
-
   const onIntersect: IntersectionObserverCallback = async (entry) => {
     if (
       entry[0].isIntersecting &&
@@ -85,6 +85,7 @@ export const BuyerSavedCounselor = () => {
           />
           <Heading color={Grey1}>찜 목록</Heading>
         </HeaderWrapper>
+        <Divider2 tabState={tabState} setTabState={setTabState} />
       </>
     );
   } else {
@@ -99,10 +100,11 @@ export const BuyerSavedCounselor = () => {
             />
             <Heading color={Grey1}>찜 목록</Heading>
           </HeaderWrapper>
+          <Divider2 tabState={tabState} setTabState={setTabState} />
           <Space height="1.2rem" />
           <div
             className="save-counselor-list"
-            style={{ height: 'calc(100vh - 6.5rem)', overflow: 'scroll' }}
+            style={{ height: 'calc(100vh - 11rem)', overflow: 'scroll' }}
           >
             <SavedCounselorResults wishlistData={wishlistData} />
             {!isLastElem ? (
@@ -124,6 +126,7 @@ export const BuyerSavedCounselor = () => {
             />
             <Heading color={Grey1}>찜 목록</Heading>
           </HeaderWrapper>
+          <Divider2 tabState={tabState} setTabState={setTabState} />
           <EmptyWrapper>
             <EmptyIcon />
             <Heading>아직 후기가 없어요.</Heading>

From 90cf37a193706430b2ba83af921cbed00010f596 Mon Sep 17 00:00:00 2001
From: inyoung <rmdnps10@gmail.com>
Date: Thu, 18 Apr 2024 22:55:17 +0900
Subject: [PATCH 05/35] =?UTF-8?q?Feat:=20=EC=B0=9C=20=EB=AA=A9=EB=A1=9D=20?=
 =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20api=20=EC=97=B0=EB=8F=99=20?=
 =?UTF-8?q?=EB=B0=8F=20=EB=AC=B4=ED=95=9C=EC=8A=A4=ED=81=AC=EB=A1=A4=20?=
 =?UTF-8?q?=EA=B5=AC=ED=98=84=20=EC=99=84=EB=A3=8C=20#228?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/get.ts                                |   5 +
 .../SavedCounselorCard.tsx                    |   6 +-
 .../SavedOpenConsultCard.tsx                  | 111 +++++++++
 .../SavedOpenConsultResults.tsx               |  28 +++
 src/pages/Buyer/BuyerConsult.tsx              |   2 +
 src/pages/Buyer/BuyerSavedCounselor.tsx       | 210 +++++++++++++-----
 6 files changed, 309 insertions(+), 53 deletions(-)
 create mode 100644 src/components/Buyer/BuyerSavedCounselor.tsx/SavedOpenConsultCard.tsx
 create mode 100644 src/components/Buyer/BuyerSavedCounselor.tsx/SavedOpenConsultResults.tsx

diff --git a/src/api/get.ts b/src/api/get.ts
index c8fb34ee..8e5f0829 100644
--- a/src/api/get.ts
+++ b/src/api/get.ts
@@ -178,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);
diff --git a/src/components/Buyer/BuyerSavedCounselor.tsx/SavedCounselorCard.tsx b/src/components/Buyer/BuyerSavedCounselor.tsx/SavedCounselorCard.tsx
index c3c7e528..0e0f0754 100644
--- a/src/components/Buyer/BuyerSavedCounselor.tsx/SavedCounselorCard.tsx
+++ b/src/components/Buyer/BuyerSavedCounselor.tsx/SavedCounselorCard.tsx
@@ -83,8 +83,10 @@ export const SavedCounselorCard = ({
           }}
         >
           <TagWrapper>
-            {tagList.map((value: any) => {
-              return <TagA2Cartegory tagType={value} bgColorType={1} />;
+            {tagList.map((value: any, index) => {
+              return (
+                <TagA2Cartegory tagType={value} bgColorType={1} key={index} />
+              );
             })}
           </TagWrapper>
           <Body1 margin={'0.8rem 1.6rem 1.2rem 1.6rem'}>{introduction}</Body1>
diff --git a/src/components/Buyer/BuyerSavedCounselor.tsx/SavedOpenConsultCard.tsx b/src/components/Buyer/BuyerSavedCounselor.tsx/SavedOpenConsultCard.tsx
new file mode 100644
index 00000000..a8f2803a
--- /dev/null
+++ b/src/components/Buyer/BuyerSavedCounselor.tsx/SavedOpenConsultCard.tsx
@@ -0,0 +1,111 @@
+import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
+import styled from 'styled-components';
+import { Green, Grey1, Grey2, Grey3, Grey6 } from 'styles/color';
+import { Body1, Caption1, Caption2 } from 'styles/font';
+import { LoadingSpinner } from 'utils/LoadingSpinner';
+import { ReactComponent as LockIcon } from 'assets/icons/icon-lock.svg';
+import { ReactComponent as HeartIcon } from 'assets/icons/icon-heart2.svg';
+import { ReactComponent as HeartEmptyIcon } from 'assets/icons/icon-heart3.svg';
+import { ReactComponent as SaveIcon } from 'assets/icons/icon-save2.svg';
+import { ReactComponent as SaveEmptyIcon } from 'assets/icons/icon-save3.svg';
+import { ReactComponent as CommentIcon } from 'assets/icons/icon-comment.svg';
+import { ReactComponent as CheckIcon } from 'assets/icons/icon-check2.svg';
+import { ReactComponent as WriteIcon } from 'assets/icons/icon-write.svg';
+import { Space } from 'components/Common/Space';
+import { BackDrop } from 'components/Common/BackDrop';
+import { openConsultApiObject } from 'pages/Buyer/BuyerConsult';
+import { useNavigate } from 'react-router-dom';
+import useIntersectionObserver from 'hooks/useIntersectionObserver';
+interface SavedCounselorCardProps {
+  item: openConsultApiObject;
+}
+function SavedOpenConsultCard({ item }: SavedCounselorCardProps) {
+  const navigate = useNavigate();
+  return (
+    <Wrapper
+      onClick={() => {
+        navigate(`/open-consult/${item.postId}`);
+      }}
+    >
+      <div className="row1">
+        <Body1>{item.title}</Body1>
+      </div>
+      <Space height="1.2rem" />
+      <div className="row2">{item.content}</div>
+      <div className="row3">
+        <IconItem>
+          <HeartResizeIcon />
+          <Caption1 color={Grey2}>{item.totalLike}</Caption1>
+        </IconItem>
+        <IconItem>
+          <SaveIcon />
+          <Caption1 color={Grey2}>{item.totalScrap}</Caption1>
+        </IconItem>
+        <IconItem>
+          <CommentIcon />
+          <Caption1 color={Grey2}>{item.totalComment}</Caption1>
+        </IconItem>
+      </div>
+      <TimeLeft>{item.updatedAt}</TimeLeft>
+    </Wrapper>
+  );
+}
+
+const Wrapper = styled.div`
+  width: 89%;
+  height: 14rem;
+  cursor: pointer;
+  position: relative;
+  background-color: ${Grey6};
+  padding: 1.6rem;
+  box-sizing: border-box;
+  border-radius: 1.2rem;
+  .row1 {
+    width: calc(100% - 5rem);
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 1;
+    max-height: 5rem;
+    overflow: hidden;
+  }
+  .row2 {
+    display: -webkit-box;
+    max-height: 4.7rem;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    align-self: flex-end;
+    margin-bottom: 0.4rem;
+    -webkit-line-clamp: 2;
+    color: ${Grey1};
+    height: 4.6rem;
+    text-overflow: ellipsis;
+    font-family: Pretendard;
+    font-size: 1.4rem;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 155%;
+  }
+  .row3 {
+    display: flex;
+    gap: 1.2rem;
+  }
+`;
+const HeartResizeIcon = styled(HeartIcon)`
+  width: 2rem;
+  height: 2rem;
+`;
+const IconItem = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+`;
+const TimeLeft = styled.div`
+  font-size: 1.2rem;
+  font-weight: 400;
+  color: ${Grey2};
+  position: absolute;
+  bottom: 1.8rem;
+  right: 1.6rem;
+`;
+
+export default SavedOpenConsultCard;
diff --git a/src/components/Buyer/BuyerSavedCounselor.tsx/SavedOpenConsultResults.tsx b/src/components/Buyer/BuyerSavedCounselor.tsx/SavedOpenConsultResults.tsx
new file mode 100644
index 00000000..a506d482
--- /dev/null
+++ b/src/components/Buyer/BuyerSavedCounselor.tsx/SavedOpenConsultResults.tsx
@@ -0,0 +1,28 @@
+import { openConsultApiObject } from 'pages/Buyer/BuyerConsult';
+import React from 'react';
+import styled from 'styled-components';
+import SavedOpenConsultCard from './SavedOpenConsultCard';
+
+interface SavedOpenConsultResultsProps {
+  openConsultList: openConsultApiObject[];
+}
+function SavedOpenConsultResults({
+  openConsultList,
+}: SavedOpenConsultResultsProps) {
+  return (
+    <Wrapper>
+      {openConsultList.map((card) => (
+        <SavedOpenConsultCard item={card} />
+      ))}
+    </Wrapper>
+  );
+}
+
+const Wrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 1.2rem;
+  align-items: center;
+  width: 100%;
+`;
+export default SavedOpenConsultResults;
diff --git a/src/pages/Buyer/BuyerConsult.tsx b/src/pages/Buyer/BuyerConsult.tsx
index 36b784fd..643654e6 100644
--- a/src/pages/Buyer/BuyerConsult.tsx
+++ b/src/pages/Buyer/BuyerConsult.tsx
@@ -30,6 +30,7 @@ export interface consultApiObject {
 }
 export interface openConsultApiObject {
   postId: number;
+  postScrapId: number;
   title: string;
   content: string;
   isPublic: boolean;
@@ -39,6 +40,7 @@ export interface openConsultApiObject {
   publishedAt: string;
   isChosen: boolean;
   isScrapped: boolean;
+  scrappedAt: string;
   totalScrap: number;
   totalComment: number;
   updatedAt: string;
diff --git a/src/pages/Buyer/BuyerSavedCounselor.tsx b/src/pages/Buyer/BuyerSavedCounselor.tsx
index bf801232..d08fa37d 100644
--- a/src/pages/Buyer/BuyerSavedCounselor.tsx
+++ b/src/pages/Buyer/BuyerSavedCounselor.tsx
@@ -11,11 +11,18 @@ import { ReactComponent as Empty } from 'assets/icons/graphic-noting.svg';
 import styled from 'styled-components';
 import useIntersectionObserver from 'hooks/useIntersectionObserver';
 import Divider2 from 'components/Common/Divider2';
+import { openConsultApiObject } from './BuyerConsult';
+import { getPostScraps } from 'api/get';
+import SavedOpenConsultResults from 'components/Buyer/BuyerSavedCounselor.tsx/SavedOpenConsultResults';
+import { LoadingSpinner } from 'utils/LoadingSpinner';
 // TODO: 찜한 마인더 없을 시 페이지 추후 백 연동 시 구현
 export const BuyerSavedCounselor = () => {
   const navigate = useNavigate();
   const [isInitialLoading, setIsInitialLoading] = useState(true);
   const [wishlistData, setWishlistData] = useState<WishlistDataType[]>([]);
+  const [openConsultData, setOpenConsultData] = useState<
+    openConsultApiObject[]
+  >([]);
   const [isLastElem, setIsLastElem] = useState<boolean>(false);
   const [tabState, setTabState] = useState<number>(1);
   const preventRef = useRef(true);
@@ -27,10 +34,18 @@ export const BuyerSavedCounselor = () => {
       preventRef.current
     ) {
       preventRef.current = false;
-      await fetchWishlistData(
-        wishlistData[wishlistData.length - 1].wishlistId,
-        wishlistData[wishlistData.length - 1].updatedAt,
-      );
+      if (tabState === 1) {
+        await fetchWishlistData(
+          wishlistData[wishlistData.length - 1].wishlistId,
+          wishlistData[wishlistData.length - 1].updatedAt,
+        );
+      } else if (tabState === 2) {
+        await fetchOpenConsultData(
+          openConsultData[openConsultData.length - 1].postScrapId,
+          openConsultData[openConsultData.length - 1].scrappedAt,
+        );
+      }
+
       preventRef.current = true;
     }
   };
@@ -46,12 +61,12 @@ export const BuyerSavedCounselor = () => {
       wishlistId: lastId,
       updatedAt: lastUpdateAt,
     };
-
     try {
       const res: any = await postWishLists(body);
       if (res.status === 200) {
         if (res.data.length !== 0) {
           if (lastId === 0) {
+            setIsInitialLoading(true);
             setWishlistData(res.data);
           } else {
             const updatedReviews = [...wishlistData, ...res.data];
@@ -71,9 +86,44 @@ export const BuyerSavedCounselor = () => {
       }
     }
   };
+  const fetchOpenConsultData = async (lastId: number, lastUpdateAt: string) => {
+    try {
+      const params = {
+        postScrapId: lastId,
+        scrappedAt: lastUpdateAt,
+      };
+      const res: any = await getPostScraps({ params });
+      if (res.status === 200) {
+        if (res.data.length !== 0) {
+          if (lastId === 0) {
+            setIsInitialLoading(true);
+            setOpenConsultData(res.data);
+          } else {
+            const updatedOpenConsultList = [...openConsultData, ...res.data];
+            setOpenConsultData(updatedOpenConsultList);
+          }
+        } else {
+          setIsLastElem(true);
+        }
+      } else if (res.response.status !== 401) {
+        // navigate('/mypage');
+      }
+    } catch (err) {
+      alert(err);
+    } finally {
+      if (lastId === 0) {
+        setIsInitialLoading(false);
+      }
+    }
+  };
   useLayoutEffect(() => {
-    fetchWishlistData(0, '');
-  }, []);
+    setIsInitialLoading(true);
+    if (tabState === 1) {
+      fetchWishlistData(0, '');
+    } else if (tabState === 2) {
+      fetchOpenConsultData(0, new Date().toISOString().slice(0, 19));
+    }
+  }, [tabState]);
   if (isInitialLoading) {
     return (
       <>
@@ -86,53 +136,111 @@ export const BuyerSavedCounselor = () => {
           <Heading color={Grey1}>찜 목록</Heading>
         </HeaderWrapper>
         <Divider2 tabState={tabState} setTabState={setTabState} />
+        <div
+          style={{
+            height: '70vh',
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+          }}
+        >
+          <LoadingSpinner />
+        </div>
       </>
     );
   } else {
-    if (wishlistData.length !== 0) {
-      return (
-        <>
-          <HeaderWrapper>
-            <BackIcon
-              onClick={() => {
-                navigate('/mypage');
-              }}
-            />
-            <Heading color={Grey1}>찜 목록</Heading>
-          </HeaderWrapper>
-          <Divider2 tabState={tabState} setTabState={setTabState} />
-          <Space height="1.2rem" />
-          <div
-            className="save-counselor-list"
-            style={{ height: 'calc(100vh - 11rem)', overflow: 'scroll' }}
-          >
-            <SavedCounselorResults wishlistData={wishlistData} />
-            {!isLastElem ? (
-              <div ref={setTarget} style={{ height: '3.5rem' }} />
-            ) : (
-              <div style={{ height: '3.5rem' }} />
-            )}
-          </div>
-        </>
-      );
-    } else {
-      return (
-        <>
-          <HeaderWrapper>
-            <BackIcon
-              onClick={() => {
-                navigate('/mypage');
-              }}
-            />
-            <Heading color={Grey1}>찜 목록</Heading>
-          </HeaderWrapper>
-          <Divider2 tabState={tabState} setTabState={setTabState} />
-          <EmptyWrapper>
-            <EmptyIcon />
-            <Heading>아직 후기가 없어요.</Heading>
-          </EmptyWrapper>
-        </>
-      );
+    if (tabState === 1) {
+      if (wishlistData.length !== 0) {
+        return (
+          <>
+            <HeaderWrapper>
+              <BackIcon
+                onClick={() => {
+                  navigate('/mypage');
+                }}
+              />
+              <Heading color={Grey1}>찜 목록</Heading>
+            </HeaderWrapper>
+            <Divider2 tabState={tabState} setTabState={setTabState} />
+            <Space height="1.2rem" />
+            <div
+              className="save-counselor-list"
+              style={{ height: 'calc(100vh - 11rem)', overflow: 'scroll' }}
+            >
+              <SavedCounselorResults wishlistData={wishlistData} />
+              {!isLastElem ? (
+                <div ref={setTarget} style={{ height: '3.5rem' }} />
+              ) : (
+                <div style={{ height: '3.5rem' }} />
+              )}
+            </div>
+          </>
+        );
+      } else {
+        return (
+          <>
+            <HeaderWrapper>
+              <BackIcon
+                onClick={() => {
+                  navigate('/mypage');
+                }}
+              />
+              <Heading color={Grey1}>찜 목록</Heading>
+            </HeaderWrapper>
+            <Divider2 tabState={tabState} setTabState={setTabState} />
+            <EmptyWrapper>
+              <EmptyIcon />
+              <Heading>아직 후기가 없어요.</Heading>
+            </EmptyWrapper>
+          </>
+        );
+      }
+    } else if (tabState === 2) {
+      if (openConsultData.length !== 0) {
+        return (
+          <>
+            <HeaderWrapper>
+              <BackIcon
+                onClick={() => {
+                  navigate('/mypage');
+                }}
+              />
+              <Heading color={Grey1}>찜 목록</Heading>
+            </HeaderWrapper>
+            <Divider2 tabState={tabState} setTabState={setTabState} />
+            <Space height="1.2rem" />
+            <div
+              className="open-consult-list"
+              style={{ height: 'calc(100vh - 11rem)', overflow: 'scroll' }}
+            >
+              <SavedOpenConsultResults openConsultList={openConsultData} />
+              {!isLastElem ? (
+                <div ref={setTarget} style={{ height: '3.5rem' }} />
+              ) : (
+                <div style={{ height: '3.5rem' }} />
+              )}
+            </div>
+          </>
+        );
+      } else {
+        return (
+          <>
+            <HeaderWrapper>
+              <BackIcon
+                onClick={() => {
+                  navigate('/mypage');
+                }}
+              />
+              <Heading color={Grey1}>찜 목록</Heading>
+            </HeaderWrapper>
+            <Divider2 tabState={tabState} setTabState={setTabState} />
+            <EmptyWrapper>
+              <EmptyIcon />
+              <Heading>아직 저장한 일대다상담이 없어요.</Heading>
+            </EmptyWrapper>
+          </>
+        );
+      }
     }
   }
 };

From 1419d584b1aeca91b662274c222372c8c2fd543e Mon Sep 17 00:00:00 2001
From: inyoung <rmdnps10@gmail.com>
Date: Thu, 18 Apr 2024 23:08:59 +0900
Subject: [PATCH 06/35] =?UTF-8?q?Fix:=20=EC=85=B0=EC=96=B4=20=ED=99=88?=
 =?UTF-8?q?=ED=99=94=EB=A9=B4=20=EB=93=A4=EC=A4=80=EB=A7=88,=20=EC=A7=84?=
 =?UTF-8?q?=EC=A4=91=EC=83=81=20=EB=B0=94=EB=A1=9C=EA=B0=80=EA=B8=B0=20?=
 =?UTF-8?q?=ED=86=A0=EA=B8=80=20=EB=B2=84=ED=8A=BC=20=EC=8A=A4=ED=83=80?=
 =?UTF-8?q?=EC=9D=BC=EC=97=90=20=ED=86=B5=EC=9D=BC=EC=84=B1=20=EB=B6=80?=
 =?UTF-8?q?=EC=97=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Buyer/BuyerHome/HomeConsultInProgress.tsx         |  3 ++-
 src/components/Buyer/BuyerHome/HomeConsultInReady.tsx | 11 +++++------
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/components/Buyer/BuyerHome/HomeConsultInProgress.tsx b/src/components/Buyer/BuyerHome/HomeConsultInProgress.tsx
index de0ec8a2..621b0cc3 100644
--- a/src/components/Buyer/BuyerHome/HomeConsultInProgress.tsx
+++ b/src/components/Buyer/BuyerHome/HomeConsultInProgress.tsx
@@ -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;
   }
diff --git a/src/components/Buyer/BuyerHome/HomeConsultInReady.tsx b/src/components/Buyer/BuyerHome/HomeConsultInReady.tsx
index 577e2e70..6df89ad2 100644
--- a/src/components/Buyer/BuyerHome/HomeConsultInReady.tsx
+++ b/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)``;

From 07a82dcb5c9771e7520b0dca59ff9568ba66bbdd Mon Sep 17 00:00:00 2001
From: inyoung <rmdnps10@gmail.com>
Date: Thu, 18 Apr 2024 23:21:17 +0900
Subject: [PATCH 07/35] =?UTF-8?q?Fix:=20=EA=B2=80=EC=83=89=20=ED=8E=98?=
 =?UTF-8?q?=EC=9D=B4=EC=A7=80=20input=20=EC=8A=A4=ED=83=80=EC=9D=BC=20?=
 =?UTF-8?q?=EB=A6=AC=ED=8C=A9=ED=86=A0=EB=A7=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Buyer/BuyerSearch/SearchHeader.tsx | 13 ++++++-------
 1 file changed, 6 insertions(+), 7 deletions(-)

diff --git a/src/components/Buyer/BuyerSearch/SearchHeader.tsx b/src/components/Buyer/BuyerSearch/SearchHeader.tsx
index caa5e843..09de255e 100644
--- a/src/components/Buyer/BuyerSearch/SearchHeader.tsx
+++ b/src/components/Buyer/BuyerSearch/SearchHeader.tsx
@@ -40,8 +40,8 @@ export const SearchHeader = () => {
           placeHolderColor={Grey4}
           height="4.4rem"
           width="100%"
-          padding="0 3.2rem 0 0"
-          textIndent="1rem"
+          isBoxSizing={true}
+          padding="0.8rem 3.4rem 0.8rem 1.6rem"
         />
         <SearchIcon onClick={handleSubmit} />
       </FormWrapper>
@@ -50,26 +50,25 @@ export const SearchHeader = () => {
 };
 const Wrapper = styled.div`
   height: 5.2rem;
+  gap: 0.8rem;
   background-color: ${White};
   position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
+  box-sizing: border-box;
   padding: 0.4rem 2rem;
 `;
 const BackIcon = styled(Back)`
-  position: absolute;
-  top: 1.4rem;
-  left: 2rem;
   cursor: pointer;
 `;
 const FormWrapper = styled.form`
   position: relative;
-  width: 79%;
+  width: 80%;
 `;
 const SearchIcon = styled(Search)`
   position: absolute;
-  right: -2.7rem;
+  right: 0.8rem;
   top: 0.8rem;
   cursor: pointer;
 `;

From 7600c19964b98b2648c92a5a3eac56c1f40a6699 Mon Sep 17 00:00:00 2001
From: inyoung <rmdnps10@gmail.com>
Date: Thu, 18 Apr 2024 23:38:43 +0900
Subject: [PATCH 08/35] Fix: revised api url reflection 228

---
 src/api/patch.ts                              | 18 +++++++++++++--
 .../Buyer/BuyerSearch/SearchHeader.tsx        |  2 +-
 src/pages/Buyer/BuyerSearchResult.tsx         | 23 +++++++++++--------
 3 files changed, 31 insertions(+), 12 deletions(-)

diff --git a/src/api/patch.ts b/src/api/patch.ts
index a710a214..01c3115f 100644
--- a/src/api/patch.ts
+++ b/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) =>
diff --git a/src/components/Buyer/BuyerSearch/SearchHeader.tsx b/src/components/Buyer/BuyerSearch/SearchHeader.tsx
index 09de255e..b18b73ca 100644
--- a/src/components/Buyer/BuyerSearch/SearchHeader.tsx
+++ b/src/components/Buyer/BuyerSearch/SearchHeader.tsx
@@ -64,7 +64,7 @@ const BackIcon = styled(Back)`
 `;
 const FormWrapper = styled.form`
   position: relative;
-  width: 80%;
+  width: 100%;
 `;
 const SearchIcon = styled(Search)`
   position: absolute;
diff --git a/src/pages/Buyer/BuyerSearchResult.tsx b/src/pages/Buyer/BuyerSearchResult.tsx
index ad24a046..efa3ef98 100644
--- a/src/pages/Buyer/BuyerSearchResult.tsx
+++ b/src/pages/Buyer/BuyerSearchResult.tsx
@@ -17,7 +17,10 @@ import {
   searchKeywordState,
 } from 'utils/atom';
 import Input from 'components/Common/Input';
-import { patchSearchWordsResults } from 'api/patch';
+import {
+  patchSearchWordsCounselorsResults,
+  patchSearchWordsResults,
+} from 'api/patch';
 import { SearchResultData } from 'utils/type';
 import { ConverSortType } from 'utils/convertSortType';
 import { ReactComponent as Empty } from 'assets/icons/graphic-noting.svg';
@@ -81,7 +84,10 @@ export const BuyerSearchResult = () => {
         index: pageIndex,
       };
       const sortTypeString: string = ConverSortType(sortType);
-      const res: any = await patchSearchWordsResults(sortTypeString, body);
+      const res: any = await patchSearchWordsCounselorsResults(
+        sortTypeString,
+        body,
+      );
       if (res.status === 200) {
         if (res.data.length !== 0) {
           if (pageIndex === 0) {
@@ -155,8 +161,8 @@ export const BuyerSearchResult = () => {
               placeHolderColor={Grey4}
               height="4.4rem"
               width="100%"
-              padding="0 3.2rem 0 0"
-              textIndent="1rem"
+              isBoxSizing={true}
+              padding="0.8rem 3.4rem 0.8rem 1.6rem"
             />
             <SearchIcon onClick={handleSubmit} />
           </FormWrapper>
@@ -230,26 +236,25 @@ const Wrapper = styled.div`
 `;
 const HeaderWrapper = styled.div`
   height: 5.2rem;
+  gap: 0.8rem;
   background-color: ${White};
   position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
+  box-sizing: border-box;
   padding: 0.4rem 2rem;
 `;
 const FormWrapper = styled.form`
   position: relative;
-  width: 79%;
+  width: 100%;
 `;
 const BackIcon = styled(Back)`
-  position: absolute;
-  top: 1.4rem;
-  left: 2rem;
   cursor: pointer;
 `;
 const SearchIcon = styled(Search)`
   position: absolute;
-  right: -2.7rem;
+  right: 0.8rem;
   top: 0.8rem;
   cursor: pointer;
 `;

From 1915ae71aaf04b845560b67722915d686df5cd01 Mon Sep 17 00:00:00 2001
From: inyoung <rmdnps10@gmail.com>
Date: Fri, 19 Apr 2024 00:44:57 +0900
Subject: [PATCH 09/35] =?UTF-8?q?Feat:=20=EA=B2=80=EC=83=89=20=ED=8E=98?=
 =?UTF-8?q?=EC=9D=B4=EC=A7=80=20api=20=EC=97=B0=EB=8F=99=20=EB=B0=8F=20?=
 =?UTF-8?q?=EC=97=AC=EB=9F=AC=20=ED=95=84=ED=84=B0=EB=A7=81=EC=97=90=20?=
 =?UTF-8?q?=EB=94=B0=EB=A5=B8=20=EB=B7=B0=20=EA=B5=AC=ED=98=84=20#228?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../BuyerSearchResult/OpenConsultResults.tsx  |  25 ++
 .../Buyer/Common/OpenConsultSortModal.tsx     | 136 ++++++++
 src/components/Common/Divider2.tsx            |   2 -
 src/pages/Buyer/BuyerSearchResult.tsx         | 313 +++++++++++++-----
 src/utils/constant.ts                         |   1 +
 src/utils/convertOpenSortType.ts              |  11 +
 6 files changed, 405 insertions(+), 83 deletions(-)
 create mode 100644 src/components/Buyer/BuyerSearchResult/OpenConsultResults.tsx
 create mode 100644 src/components/Buyer/Common/OpenConsultSortModal.tsx
 create mode 100644 src/utils/convertOpenSortType.ts

diff --git a/src/components/Buyer/BuyerSearchResult/OpenConsultResults.tsx b/src/components/Buyer/BuyerSearchResult/OpenConsultResults.tsx
new file mode 100644
index 00000000..6e3e1c51
--- /dev/null
+++ b/src/components/Buyer/BuyerSearchResult/OpenConsultResults.tsx
@@ -0,0 +1,25 @@
+import React from 'react';
+import styled from 'styled-components';
+import { openConsultApiObject } from 'pages/Buyer/BuyerConsult';
+import SavedOpenConsultCard from '../BuyerSavedCounselor.tsx/SavedOpenConsultCard';
+interface OpenConsultResultProps {
+  openConsultList: openConsultApiObject[];
+}
+function OpenConsultResults({ openConsultList }: OpenConsultResultProps) {
+  return (
+    <Wrapper>
+      {openConsultList.map((item) => (
+        <SavedOpenConsultCard item={item} />
+      ))}
+    </Wrapper>
+  );
+}
+
+const Wrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 1.2rem;
+  align-items: center;
+  width: 100%;
+`;
+export default OpenConsultResults;
diff --git a/src/components/Buyer/Common/OpenConsultSortModal.tsx b/src/components/Buyer/Common/OpenConsultSortModal.tsx
new file mode 100644
index 00000000..ee39bdce
--- /dev/null
+++ b/src/components/Buyer/Common/OpenConsultSortModal.tsx
@@ -0,0 +1,136 @@
+import { ReactComponent as CheckIcon } from 'assets/icons/icon-modal-check.svg';
+import { SetStateAction } from 'react';
+import { useRecoilState, useSetRecoilState } from 'recoil';
+import styled, { keyframes } from 'styled-components';
+import { Green, Grey1, Grey4, Grey6 } from 'styles/color';
+import { Body1 } from 'styles/font';
+import { isSortModalOpenState, scrollLockState } from 'utils/atom';
+interface SortModalProps {
+  sortType: number;
+  setSortType: React.Dispatch<SetStateAction<number>>;
+  setPostId: React.Dispatch<SetStateAction<number>>;
+}
+//최근순 인기순 별점순 모달
+export const OpenConsultSortModal = ({
+  sortType,
+  setSortType,
+  setPostId,
+}: SortModalProps) => {
+  //modal 여부
+  const [isModalOpen, setIsModalOpen] = useRecoilState(isSortModalOpenState);
+  //scorll 막기
+  const setScrollLock = useSetRecoilState(scrollLockState);
+
+  return (
+    <Wrapper visible={isModalOpen}>
+      <div className="bar-wrapper">
+        <Bar />
+      </div>
+      <div
+        className="row"
+        onClick={() => {
+          setSortType(0);
+          setPostId(0);
+          setIsModalOpen(false);
+          setScrollLock(false);
+        }}
+      >
+        {sortType === 0 ? (
+          <>
+            <Body1 color={Green}>최근순</Body1>
+            <CheckIcon />
+          </>
+        ) : (
+          <Body1 color={Grey1}>최근순</Body1>
+        )}
+      </div>
+      <div
+        className="row"
+        onClick={() => {
+          setSortType(1);
+          setPostId(0);
+          setIsModalOpen(false);
+          setScrollLock(false);
+        }}
+      >
+        {sortType === 1 ? (
+          <>
+            <Body1 color={Green}>공감 많은 순</Body1>
+            <CheckIcon />
+          </>
+        ) : (
+          <Body1 color={Grey1}>공감 많은 순</Body1>
+        )}
+      </div>
+      <div
+        className="row"
+        onClick={() => {
+          setSortType(2);
+          setPostId(0);
+          setIsModalOpen(false);
+          setScrollLock(false);
+        }}
+      >
+        {sortType === 2 ? (
+          <>
+            <Body1 color={Green}>댓글 많은 순</Body1>
+            <CheckIcon />
+          </>
+        ) : (
+          <Body1 color={Grey1}>댓글 많은 순</Body1>
+        )}
+      </div>
+    </Wrapper>
+  );
+};
+const slideIn = keyframes`
+  from{
+    transform : translateY(100%);
+  }
+  to{ 
+    transform : translateY(0%);
+  }
+`;
+const slideOut = keyframes`
+  from{
+    transform : translateY(0%);
+  }
+  to{
+    transform : translateY(100%);
+  }
+`;
+const Wrapper = styled.div<{ visible: boolean }>`
+  @media (max-width: 767px) {
+    width: 100vw;
+  }
+  @media (min-width: 768px) {
+    width: 37.5rem;
+  }
+  position: fixed;
+  height: 22.7rem;
+  background-color: ${Grey6};
+  bottom: 0;
+  border-radius: 2rem 2rem 0 0;
+  box-shadow: 0px -4px 10px rgba(0, 0, 0, 0.1);
+  z-index: 2002;
+  animation: ${({ visible }) => (visible ? slideIn : slideOut)} 0.3s ease-in-out;
+
+  .bar-wrapper {
+    height: 4.5rem;
+    display: flex;
+    justify-content: center;
+  }
+  .row {
+    display: flex;
+    padding: 1rem 2rem 0 2rem;
+    height: 4.4rem;
+    justify-content: space-between;
+    cursor: pointer;
+  }
+`;
+const Bar = styled.div`
+  margin-top: 1.2rem;
+  width: 3.1rem;
+  height: 0.3rem;
+  background-color: ${Grey4};
+`;
diff --git a/src/components/Common/Divider2.tsx b/src/components/Common/Divider2.tsx
index 06f84e8b..70ed5297 100644
--- a/src/components/Common/Divider2.tsx
+++ b/src/components/Common/Divider2.tsx
@@ -53,8 +53,6 @@ const Wrapper = styled.nav`
   display: flex;
   justify-content: center;
   border-bottom: 1px solid ${Grey6};
-  position: sticky;
-  top: 5.3rem;
   background-color: white;
   z-index: 999;
 `;
diff --git a/src/pages/Buyer/BuyerSearchResult.tsx b/src/pages/Buyer/BuyerSearchResult.tsx
index efa3ef98..6a301c26 100644
--- a/src/pages/Buyer/BuyerSearchResult.tsx
+++ b/src/pages/Buyer/BuyerSearchResult.tsx
@@ -8,10 +8,9 @@ import { ReactComponent as Down } from 'assets/icons/icon-drop-down.svg';
 import { SearchResults } from 'components/Buyer/BuyerSearchResult/SearchResults';
 import { SortModal } from 'components/Buyer/Common/SortModal';
 import { ChangeEvent, useLayoutEffect, useRef, useState } from 'react';
-import { sortList } from 'utils/constant';
+import { openSortList, sortList } from 'utils/constant';
 import { useRecoilState, useSetRecoilState } from 'recoil';
 import {
-  isLoadingState,
   isSortModalOpenState,
   scrollLockState,
   searchKeywordState,
@@ -19,13 +18,18 @@ import {
 import Input from 'components/Common/Input';
 import {
   patchSearchWordsCounselorsResults,
-  patchSearchWordsResults,
+  patchSearchWordsPostsResults,
 } from 'api/patch';
 import { SearchResultData } from 'utils/type';
 import { ConverSortType } from 'utils/convertSortType';
 import { ReactComponent as Empty } from 'assets/icons/graphic-noting.svg';
 import { LoadingSpinner } from 'utils/LoadingSpinner';
 import useIntersectionObserver from 'hooks/useIntersectionObserver';
+import Divider2 from 'components/Common/Divider2';
+import OpenConsultResults from 'components/Buyer/BuyerSearchResult/OpenConsultResults';
+import { openConsultApiObject } from './BuyerConsult';
+import { OpenConsultSortModal } from 'components/Buyer/Common/OpenConsultSortModal';
+import { ConverOpenSortType } from 'utils/convertOpenSortType';
 export const BuyerSearchResult = () => {
   const navigate = useNavigate();
   //0 : 최신순 1:인기순 2: 별점순
@@ -43,8 +47,14 @@ export const BuyerSearchResult = () => {
   const [input, setInput] = useState(initInput);
   //결과저장
   const [searchData, setSearchData] = useState<SearchResultData[]>([]);
+  const [openConsultSearchData, setOpenConsultSearchData] = useState<
+    openConsultApiObject[]
+  >([]);
   //무한스크롤 위한 page num
   const [pageNum, setPageNum] = useState<number>(0);
+  const [lastId, setLastId] = useState<number>(0);
+  // 상담사 탭 0, 공개 상담 1
+  const [tabState, setTabState] = useState<number>(1);
   const [isLastElem, setIsLastElem] = useState<boolean>(false);
   const preventRef = useRef(true); // 중복 방지 옵션
   const onIntersect: IntersectionObserverCallback = async (entry) => {
@@ -55,7 +65,12 @@ export const BuyerSearchResult = () => {
       preventRef.current
     ) {
       preventRef.current = false;
-      await fetchSearchResults(keyword, pageNum);
+      if (tabState === 1) {
+        await fetchSearchResults(keyword, pageNum);
+      } else if (tabState === 2) {
+        await fetchOpenSearchResults(keyword, lastId);
+      }
+
       preventRef.current = true;
     }
   };
@@ -112,13 +127,51 @@ export const BuyerSearchResult = () => {
       }
     }
   };
+
+  const fetchOpenSearchResults = async (searchWord: string, postId: number) => {
+    try {
+      const body = {
+        word: searchWord,
+        postId: postId,
+      };
+      const sortTypeString: string = ConverOpenSortType(sortType);
+      const res: any = await patchSearchWordsPostsResults(sortTypeString, body);
+      if (res.status === 200) {
+        if (res.data.length !== 0) {
+          if (postId === 0) {
+            setOpenConsultSearchData(res.data);
+            setPageNum(pageNum + 1);
+          } else {
+            const updatedSearchs = [...openConsultSearchData, ...res.data];
+            setLastId(res.data.postId);
+            setOpenConsultSearchData(updatedSearchs);
+          }
+          setIsLastElem(true);
+        } else {
+          setOpenConsultSearchData([]);
+        }
+      } else if (res.response.status === 400) {
+        alert('검색어는 2~20자 사이여야 합니다.');
+      }
+    } catch (e) {
+      alert(e);
+    } finally {
+      if (postId === 0) {
+        setIsLoading(false);
+      }
+    }
+  };
   useLayoutEffect(() => {
     setIsLastElem(false);
     setPageNum(0);
     setSearchData([]);
     setIsLoading(true);
-    fetchSearchResults(keyword, 0);
-  }, [keyword, sortType]);
+    if (tabState === 1) {
+      fetchSearchResults(keyword, 0);
+    } else if (tabState === 2) {
+      fetchOpenSearchResults(keyword, 0);
+    }
+  }, [keyword, sortType, tabState]);
   if (isLoading) {
     return (
       <>
@@ -142,105 +195,195 @@ export const BuyerSearchResult = () => {
       </>
     );
   } else {
-    return (
-      <Wrapper>
-        <HeaderWrapper>
-          <BackIcon
-            onClick={() => {
-              navigate('/search');
-            }}
-          />
-          <FormWrapper onSubmit={handleSubmit}>
-            <Input
-              value={input}
-              onChange={handleOnChange}
-              placeholder="상담사명, 제목, 키워드"
-              fontSize="1.6rem"
-              fontWeight="400"
-              fontColor={Grey1}
-              placeHolderColor={Grey4}
-              height="4.4rem"
-              width="100%"
-              isBoxSizing={true}
-              padding="0.8rem 3.4rem 0.8rem 1.6rem"
-            />
-            <SearchIcon onClick={handleSubmit} />
-          </FormWrapper>
-        </HeaderWrapper>
-        <div className="select">
-          <div
-            className="select-wrapper"
-            onClick={() => {
-              setIsModalOpen(true);
-              setScrollLock(true);
-            }}
-          >
-            <Button2 color={Grey3}>{sortList[sortType]}</Button2>
-            <Down />
-          </div>
-        </div>
-        {searchData.length !== 0 ? (
-          <>
-            <SearchResults searchData={searchData} />
-            {!isLastElem ? (
-              <div ref={setTarget} style={{ height: '3.5rem' }} />
-            ) : (
-              <div style={{ height: '3.5rem' }} />
-            )}
-          </>
-        ) : (
-          <EmptyWrapper>
-            <EmptyIcon />
-            <Heading color={Grey1} margin="0 0 1.5rem 0">
-              검색 결과가 없어요.
-            </Heading>
-            <Body2 color={Grey1}>마인더명, 제목, 상담 스타일 등</Body2>
-            <Body2 color={Grey1}>더 간단한 단어로 검색해보세요.</Body2>
-          </EmptyWrapper>
-        )}
+    if (tabState === 1) {
+      return (
+        <Wrapper>
+          <FixedContainer>
+            <HeaderWrapper>
+              <BackIcon
+                onClick={() => {
+                  navigate('/search');
+                }}
+              />
+              <FormWrapper onSubmit={handleSubmit}>
+                <Input
+                  value={input}
+                  onChange={handleOnChange}
+                  placeholder="상담사명, 제목, 키워드"
+                  fontSize="1.6rem"
+                  fontWeight="400"
+                  fontColor={Grey1}
+                  placeHolderColor={Grey4}
+                  height="4.4rem"
+                  width="100%"
+                  isBoxSizing={true}
+                  padding="0.8rem 3.4rem 0.8rem 1.6rem"
+                />
+                <SearchIcon onClick={handleSubmit} />
+              </FormWrapper>
+            </HeaderWrapper>
+            <Divider2 tabState={tabState} setTabState={setTabState} />
+            <div className="select">
+              <div
+                className="select-wrapper"
+                onClick={() => {
+                  setIsModalOpen(true);
+                  setScrollLock(true);
+                }}
+              >
+                <Button2 color={Grey3}>{sortList[sortType]}</Button2>
+                <Down />
+              </div>
+            </div>
+          </FixedContainer>
 
-        {isModalOpen ? (
-          <>
-            <BackDrop
-              onClick={() => {
-                //여기서 api 호출
-                setIsModalOpen(false);
-                setScrollLock(false);
-              }}
-            />
-            <SortModal
-              sortType={sortType}
-              setSortType={setSortType}
-              setPageNum={setPageNum}
-            />
-          </>
-        ) : null}
-      </Wrapper>
-    );
+          {searchData.length !== 0 ? (
+            <>
+              <SearchResults searchData={searchData} />
+              {!isLastElem ? (
+                <div ref={setTarget} style={{ height: '3.5rem' }} />
+              ) : (
+                <div style={{ height: '3.5rem' }} />
+              )}
+            </>
+          ) : (
+            <EmptyWrapper>
+              <EmptyIcon />
+              <Heading color={Grey1} margin="0 0 1.5rem 0">
+                검색 결과가 없어요.
+              </Heading>
+              <Body2 color={Grey1}>마인더명, 제목, 상담 스타일 등</Body2>
+              <Body2 color={Grey1}>더 간단한 단어로 검색해보세요.</Body2>
+            </EmptyWrapper>
+          )}
+
+          {isModalOpen ? (
+            <>
+              <BackDrop
+                onClick={() => {
+                  //여기서 api 호출
+                  setIsModalOpen(false);
+                  setScrollLock(false);
+                }}
+              />
+              <SortModal
+                sortType={sortType}
+                setSortType={setSortType}
+                setPageNum={setPageNum}
+              />
+            </>
+          ) : null}
+        </Wrapper>
+      );
+    } else if (tabState === 2) {
+      return (
+        <Wrapper>
+          <FixedContainer>
+            <HeaderWrapper>
+              <BackIcon
+                onClick={() => {
+                  navigate('/search');
+                }}
+              />
+              <FormWrapper onSubmit={handleSubmit}>
+                <Input
+                  value={input}
+                  onChange={handleOnChange}
+                  placeholder="상담사명, 제목, 키워드"
+                  fontSize="1.6rem"
+                  fontWeight="400"
+                  fontColor={Grey1}
+                  placeHolderColor={Grey4}
+                  height="4.4rem"
+                  width="100%"
+                  isBoxSizing={true}
+                  padding="0.8rem 3.4rem 0.8rem 1.6rem"
+                />
+                <SearchIcon onClick={handleSubmit} />
+              </FormWrapper>
+            </HeaderWrapper>
+            <Divider2 tabState={tabState} setTabState={setTabState} />
+            <div className="select">
+              <div
+                className="select-wrapper"
+                onClick={() => {
+                  setIsModalOpen(true);
+                  setScrollLock(true);
+                }}
+              >
+                <Button2 color={Grey3}>{openSortList[sortType]}</Button2>
+                <Down />
+              </div>
+            </div>
+          </FixedContainer>
+
+          {openConsultSearchData.length !== 0 ? (
+            <>
+              <OpenConsultResults openConsultList={openConsultSearchData} />
+              {!isLastElem ? (
+                <div ref={setTarget} style={{ height: '3.5rem' }} />
+              ) : (
+                <div style={{ height: '3.5rem' }} />
+              )}
+            </>
+          ) : (
+            <EmptyWrapper>
+              <EmptyIcon />
+              <Heading color={Grey1} margin="0 0 1.5rem 0">
+                검색 결과가 없어요.
+              </Heading>
+              <Body2 color={Grey1}>마인더명, 제목, 상담 스타일 등</Body2>
+              <Body2 color={Grey1}>더 간단한 단어로 검색해보세요.</Body2>
+            </EmptyWrapper>
+          )}
+
+          {isModalOpen ? (
+            <>
+              <BackDrop
+                onClick={() => {
+                  //여기서 api 호출
+                  setIsModalOpen(false);
+                  setScrollLock(false);
+                }}
+              />
+              <OpenConsultSortModal
+                sortType={sortType}
+                setSortType={setSortType}
+                setPostId={setLastId}
+              />
+            </>
+          ) : null}
+        </Wrapper>
+      );
+    }
   }
 };
 
 const Wrapper = styled.div`
   .select {
     display: flex;
+    background-color: white;
     height: 4.4rem;
     padding: 0.4rem 2rem;
     align-items: center;
     justify-content: flex-end;
     cursor: pointer;
+    z-index: 9;
   }
   .select-wrapper {
     display: flex;
     gap: 0.4rem;
   }
 `;
-const HeaderWrapper = styled.div`
+const HeaderWrapper = styled.header`
   height: 5.2rem;
   gap: 0.8rem;
   background-color: ${White};
   position: relative;
   display: flex;
   align-items: center;
+  top: 0;
+  width: 100%;
   justify-content: center;
   box-sizing: border-box;
   padding: 0.4rem 2rem;
@@ -281,3 +424,11 @@ const EmptyWrapper = styled.div`
   flex-direction: column;
   align-items: center;
 `;
+
+const FixedContainer = styled.section`
+  position: sticky;
+  width: 100%;
+  top: 0;
+  background-color: white;
+  z-index: 99;
+`;
diff --git a/src/utils/constant.ts b/src/utils/constant.ts
index 909cea7b..0513e658 100644
--- a/src/utils/constant.ts
+++ b/src/utils/constant.ts
@@ -13,6 +13,7 @@ export const categories = [
   '조언',
   '팩폭',
 ];
+export const openSortList = ['최근순', '공감 많은 순', '댓글 많은 순'];
 export const sortList = ['최근순', '인기순', '별점순'];
 
 export const quizList = [
diff --git a/src/utils/convertOpenSortType.ts b/src/utils/convertOpenSortType.ts
new file mode 100644
index 00000000..c8e82a2a
--- /dev/null
+++ b/src/utils/convertOpenSortType.ts
@@ -0,0 +1,11 @@
+export const ConverOpenSortType = (typeNum: number) => {
+  if (typeNum === 0) {
+    return 'LATEST';
+  } else if (typeNum === 1) {
+    return 'DESC_TOTAL_COMMENT';
+  } else if (typeNum === 2) {
+    return 'DESC_TOTAL_LIKE';
+  } else {
+    return '';
+  }
+};

From 93f467d5e282bf5452017f936d6a953425736bbe Mon Sep 17 00:00:00 2001
From: inyoung <rmdnps10@gmail.com>
Date: Fri, 19 Apr 2024 00:50:07 +0900
Subject: [PATCH 10/35] Fix: add input component in loading ui #228

---
 src/pages/Buyer/BuyerSearchResult.tsx | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/src/pages/Buyer/BuyerSearchResult.tsx b/src/pages/Buyer/BuyerSearchResult.tsx
index 6a301c26..72e15275 100644
--- a/src/pages/Buyer/BuyerSearchResult.tsx
+++ b/src/pages/Buyer/BuyerSearchResult.tsx
@@ -181,7 +181,24 @@ export const BuyerSearchResult = () => {
               navigate('/consult');
             }}
           />
+          <FormWrapper onSubmit={handleSubmit}>
+            <Input
+              value={input}
+              onChange={handleOnChange}
+              placeholder="상담사명, 제목, 키워드"
+              fontSize="1.6rem"
+              fontWeight="400"
+              fontColor={Grey1}
+              placeHolderColor={Grey4}
+              height="4.4rem"
+              width="100%"
+              isBoxSizing={true}
+              padding="0.8rem 3.4rem 0.8rem 1.6rem"
+            />
+            <SearchIcon onClick={handleSubmit} />
+          </FormWrapper>
         </HeaderWrapper>
+
         <div
           style={{
             height: '70vh',
@@ -382,7 +399,6 @@ const HeaderWrapper = styled.header`
   position: relative;
   display: flex;
   align-items: center;
-  top: 0;
   width: 100%;
   justify-content: center;
   box-sizing: border-box;

From 14ee16788fb803feaaa1ad475b151b4ae5d0466d Mon Sep 17 00:00:00 2001
From: inyoung <rmdnps10@gmail.com>
Date: Fri, 19 Apr 2024 21:31:08 +0900
Subject: [PATCH 11/35] =?UTF-8?q?Feat:=20=EA=B2=80=EC=83=89=20=ED=95=84?=
 =?UTF-8?q?=ED=84=B0=EB=A7=81=20=EC=A1=B0=EA=B1=B4=20=EB=B0=8F=20=EA=B2=80?=
 =?UTF-8?q?=EC=83=89=EC=96=B4=20=EC=BF=BC=EB=A6=AC=20=EC=8A=A4=ED=8A=B8?=
 =?UTF-8?q?=EB=A7=81=20=EA=B0=92=EC=9C=BC=EB=A1=9C=20=EB=B0=98=EC=98=81?=
 =?UTF-8?q?=ED=95=98=EC=97=AC=20=EA=B2=80=EC=83=89=20=EA=B2=B0=EA=B3=BC=20?=
 =?UTF-8?q?=EC=9C=A0=EC=A7=80,=20useSearchPageParams=20=EA=B5=AC=ED=98=84?=
 =?UTF-8?q?=20#233?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Buyer/Common/OpenConsultSortModal.tsx     | 11 +++
 src/components/Buyer/Common/SortModal.tsx     | 11 +++
 src/components/Common/Divider2.tsx            |  2 +-
 src/hooks/useSearchPageParams.ts              | 78 +++++++++++++++++++
 src/pages/Buyer/BuyerSearchResult.tsx         | 76 +++++++++---------
 src/utils/convertOpenSortType.ts              |  4 +-
 6 files changed, 141 insertions(+), 41 deletions(-)
 create mode 100644 src/hooks/useSearchPageParams.ts

diff --git a/src/components/Buyer/Common/OpenConsultSortModal.tsx b/src/components/Buyer/Common/OpenConsultSortModal.tsx
index ee39bdce..bab47d48 100644
--- a/src/components/Buyer/Common/OpenConsultSortModal.tsx
+++ b/src/components/Buyer/Common/OpenConsultSortModal.tsx
@@ -1,5 +1,6 @@
 import { ReactComponent as CheckIcon } from 'assets/icons/icon-modal-check.svg';
 import { SetStateAction } from 'react';
+import { SetURLSearchParams } from 'react-router-dom';
 import { useRecoilState, useSetRecoilState } from 'recoil';
 import styled, { keyframes } from 'styled-components';
 import { Green, Grey1, Grey4, Grey6 } from 'styles/color';
@@ -9,12 +10,16 @@ interface SortModalProps {
   sortType: number;
   setSortType: React.Dispatch<SetStateAction<number>>;
   setPostId: React.Dispatch<SetStateAction<number>>;
+  searchParams: URLSearchParams;
+  setSearchParams: SetURLSearchParams;
 }
 //최근순 인기순 별점순 모달
 export const OpenConsultSortModal = ({
   sortType,
   setSortType,
   setPostId,
+  searchParams,
+  setSearchParams,
 }: SortModalProps) => {
   //modal 여부
   const [isModalOpen, setIsModalOpen] = useRecoilState(isSortModalOpenState);
@@ -31,6 +36,8 @@ export const OpenConsultSortModal = ({
         onClick={() => {
           setSortType(0);
           setPostId(0);
+          searchParams.set('open-sort', 'recent');
+          setSearchParams(searchParams);
           setIsModalOpen(false);
           setScrollLock(false);
         }}
@@ -49,6 +56,8 @@ export const OpenConsultSortModal = ({
         onClick={() => {
           setSortType(1);
           setPostId(0);
+          searchParams.set('open-sort', 'likes');
+          setSearchParams(searchParams);
           setIsModalOpen(false);
           setScrollLock(false);
         }}
@@ -67,6 +76,8 @@ export const OpenConsultSortModal = ({
         onClick={() => {
           setSortType(2);
           setPostId(0);
+          searchParams.set('open-sort', 'comments');
+          setSearchParams(searchParams);
           setIsModalOpen(false);
           setScrollLock(false);
         }}
diff --git a/src/components/Buyer/Common/SortModal.tsx b/src/components/Buyer/Common/SortModal.tsx
index 4837cc22..b53d5f06 100644
--- a/src/components/Buyer/Common/SortModal.tsx
+++ b/src/components/Buyer/Common/SortModal.tsx
@@ -1,5 +1,6 @@
 import { ReactComponent as CheckIcon } from 'assets/icons/icon-modal-check.svg';
 import { SetStateAction } from 'react';
+import { SetURLSearchParams } from 'react-router-dom';
 import { useRecoilState, useSetRecoilState } from 'recoil';
 import styled, { keyframes } from 'styled-components';
 import { Green, Grey1, Grey4, Grey6 } from 'styles/color';
@@ -9,12 +10,16 @@ interface SortModalProps {
   sortType: number;
   setSortType: React.Dispatch<SetStateAction<number>>;
   setPageNum: React.Dispatch<SetStateAction<number>>;
+  searchParams: URLSearchParams;
+  setSearchParams: SetURLSearchParams;
 }
 //최근순 인기순 별점순 모달
 export const SortModal = ({
   sortType,
   setSortType,
   setPageNum,
+  searchParams,
+  setSearchParams,
 }: SortModalProps) => {
   //modal 여부
   const [isModalOpen, setIsModalOpen] = useRecoilState(isSortModalOpenState);
@@ -32,6 +37,8 @@ export const SortModal = ({
           setSortType(0);
           setPageNum(0);
           setIsModalOpen(false);
+          searchParams.set('sort', 'recent');
+          setSearchParams(searchParams);
           setScrollLock(false);
         }}
       >
@@ -49,6 +56,8 @@ export const SortModal = ({
         onClick={() => {
           setSortType(1);
           setPageNum(0);
+          searchParams.set('sort', 'popular');
+          setSearchParams(searchParams);
           setIsModalOpen(false);
           setScrollLock(false);
         }}
@@ -67,6 +76,8 @@ export const SortModal = ({
         onClick={() => {
           setSortType(2);
           setPageNum(0);
+          searchParams.set('sort', 'rating');
+          setSearchParams(searchParams);
           setIsModalOpen(false);
           setScrollLock(false);
         }}
diff --git a/src/components/Common/Divider2.tsx b/src/components/Common/Divider2.tsx
index 70ed5297..b2b69a26 100644
--- a/src/components/Common/Divider2.tsx
+++ b/src/components/Common/Divider2.tsx
@@ -6,7 +6,7 @@ import { ReactComponent as UnderLineBuyerBig } from 'assets/icons/underline-big.
 import { Subtitle } from 'styles/font';
 interface Divder2Props {
   tabState: number;
-  setTabState: React.Dispatch<React.SetStateAction<number>>;
+  setTabState: (tabState: number) => void;
 }
 function Divider2({ tabState, setTabState }: Divder2Props) {
   return (
diff --git a/src/hooks/useSearchPageParams.ts b/src/hooks/useSearchPageParams.ts
new file mode 100644
index 00000000..8bced2a6
--- /dev/null
+++ b/src/hooks/useSearchPageParams.ts
@@ -0,0 +1,78 @@
+import { ChangeEvent, useCallback, useState } from 'react';
+import { useSearchParams } from 'react-router-dom';
+import { useRecoilValue } from 'recoil';
+import { searchKeywordState } from 'utils/atom';
+
+export const useSearchPageParams = () => {
+  const [searchParams, setSearchParams] = useSearchParams();
+  const keywordParam = searchParams.get('keyword');
+  const typeParam = searchParams.get('searchType');
+  const sortParam = searchParams.get('sort');
+  const openSortParam = searchParams.get('open-sort');
+  const keywordFromPrevPage = useRecoilValue(searchKeywordState);
+  const initialKeyword = keywordParam ?? keywordFromPrevPage;
+  const initialSearchType = typeParam ?? 'counselor';
+  const initialSortType =
+    sortParam === 'rating' ? 2 : sortParam === 'popular' ? 1 : 0;
+  const initialOpenSortType =
+    openSortParam === 'comments' ? 2 : openSortParam === 'likes' ? 1 : 0;
+  const initialTabState = typeParam === 'open-consult' ? 2 : 1;
+  const [input, setInput] = useState(keywordFromPrevPage);
+  const [keyword, setKeyword] = useState(initialKeyword);
+  const [searchType, setSearchType] = useState<string>(initialSearchType);
+  const [openSortType, setOpenSortType] = useState<number>(initialOpenSortType);
+  const [sortType, setSortType] = useState<number>(initialSortType);
+  const [tabState, setTabState] = useState<number>(initialTabState);
+  const handleClickOpenConsult = useCallback(() => {
+    setSearchType('open-consult');
+    searchParams.set('searchType', 'open-consult');
+    setTabState(2);
+    setSearchParams(searchParams);
+  }, []);
+  const handleClickCounselor = useCallback(() => {
+    setSearchType('counselor');
+    searchParams.set('searchType', 'counselor');
+    setSearchParams(searchParams);
+    setTabState(1);
+    console.log('hi');
+  }, []);
+
+  const handleClickTab = useCallback(
+    (tabState: number) => {
+      if (tabState === 1) {
+        handleClickCounselor();
+      } else {
+        handleClickOpenConsult();
+      }
+    },
+    [tabState],
+  );
+  const handleChangeInput = (event: ChangeEvent<HTMLInputElement>) => {
+    setInput(event.target.value);
+  };
+  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    setKeyword(input);
+    searchParams.set('keyword', input);
+    setSearchParams(searchParams);
+  };
+
+  return {
+    handleClickTab,
+    searchParams,
+    openSortType,
+    setOpenSortType,
+    setSearchParams,
+    input,
+    tabState,
+    setTabState,
+    keyword,
+    setKeyword,
+    handleSubmit,
+    keywordFromPrevPage,
+    searchType,
+    sortType,
+    setSortType,
+    handleChangeInput,
+  };
+};
diff --git a/src/pages/Buyer/BuyerSearchResult.tsx b/src/pages/Buyer/BuyerSearchResult.tsx
index 72e15275..35c60ded 100644
--- a/src/pages/Buyer/BuyerSearchResult.tsx
+++ b/src/pages/Buyer/BuyerSearchResult.tsx
@@ -7,13 +7,12 @@ import { ReactComponent as Search } from 'assets/icons/search.svg';
 import { ReactComponent as Down } from 'assets/icons/icon-drop-down.svg';
 import { SearchResults } from 'components/Buyer/BuyerSearchResult/SearchResults';
 import { SortModal } from 'components/Buyer/Common/SortModal';
-import { ChangeEvent, useLayoutEffect, useRef, useState } from 'react';
+import { useLayoutEffect, useRef, useState } from 'react';
 import { openSortList, sortList } from 'utils/constant';
 import { useRecoilState, useSetRecoilState } from 'recoil';
 import {
   isSortModalOpenState,
   scrollLockState,
-  searchKeywordState,
 } from 'utils/atom';
 import Input from 'components/Common/Input';
 import {
@@ -30,33 +29,40 @@ import OpenConsultResults from 'components/Buyer/BuyerSearchResult/OpenConsultRe
 import { openConsultApiObject } from './BuyerConsult';
 import { OpenConsultSortModal } from 'components/Buyer/Common/OpenConsultSortModal';
 import { ConverOpenSortType } from 'utils/convertOpenSortType';
+import { useSearchPageParams } from 'hooks/useSearchPageParams';
 export const BuyerSearchResult = () => {
   const navigate = useNavigate();
-  //0 : 최신순 1:인기순 2: 별점순
-  // 바뀔 때마다 useEffect로 request
-  const [sortType, setSortType] = useState<number>(0);
-  // Modal 여부(recoil)
+  // Modal 여부(recoil), 스크롤 막기
   const [isModalOpen, setIsModalOpen] =
     useRecoilState<boolean>(isSortModalOpenState);
-  //scorll 막기
   const setScrollLock = useSetRecoilState(scrollLockState);
-  //검색된 value
-  const [keyword, setKeyword] = useRecoilState(searchKeywordState);
-  //input value
-  const initInput = keyword;
-  const [input, setInput] = useState(initInput);
-  //결과저장
+  // 검색 결과 리스트 - 상담사 리스트와 공개 상담 리스트
   const [searchData, setSearchData] = useState<SearchResultData[]>([]);
   const [openConsultSearchData, setOpenConsultSearchData] = useState<
     openConsultApiObject[]
   >([]);
-  //무한스크롤 위한 page num
+  //무한스크롤 위한 page num과 lastId
   const [pageNum, setPageNum] = useState<number>(0);
   const [lastId, setLastId] = useState<number>(0);
-  // 상담사 탭 0, 공개 상담 1
-  const [tabState, setTabState] = useState<number>(1);
+  // 무한스크롤을 trigger를 위한 상태
   const [isLastElem, setIsLastElem] = useState<boolean>(false);
-  const preventRef = useRef(true); // 중복 방지 옵션
+  // 무한스크롤을 trigger를 위한 상태
+  const [isLoading, setIsLoading] = useState<boolean>(true);
+  const preventRef = useRef(true);
+  const {
+    handleClickTab,
+    searchParams,
+    setSearchParams,
+    openSortType,
+    setOpenSortType,
+    input,
+    keyword,
+    tabState,
+    handleSubmit,
+    sortType,
+    setSortType,
+    handleChangeInput,
+  } = useSearchPageParams();
   const onIntersect: IntersectionObserverCallback = async (entry) => {
     if (
       entry[0].isIntersecting &&
@@ -74,24 +80,13 @@ export const BuyerSearchResult = () => {
       preventRef.current = true;
     }
   };
-  //현재 대상 및 option을 props로 전달
   const { setTarget } = useIntersectionObserver({
     root: null,
     rootMargin: '0px',
     threshold: 0.8,
     onIntersect,
   });
-  //input onchagne
-  const handleOnChange = (event: ChangeEvent<HTMLInputElement>) => {
-    setInput(event.target.value);
-  };
-  const handleSubmit: any = (event: ChangeEvent<HTMLFormElement>) => {
-    event.preventDefault();
-    setKeyword(input);
-  };
 
-  //로딩 state
-  const [isLoading, setIsLoading] = useState<boolean>(true);
   const fetchSearchResults = async (searchWord: string, pageIndex: number) => {
     try {
       const body = {
@@ -134,7 +129,7 @@ export const BuyerSearchResult = () => {
         word: searchWord,
         postId: postId,
       };
-      const sortTypeString: string = ConverOpenSortType(sortType);
+      const sortTypeString: string = ConverOpenSortType(openSortType);
       const res: any = await patchSearchWordsPostsResults(sortTypeString, body);
       if (res.status === 200) {
         if (res.data.length !== 0) {
@@ -171,7 +166,8 @@ export const BuyerSearchResult = () => {
     } else if (tabState === 2) {
       fetchOpenSearchResults(keyword, 0);
     }
-  }, [keyword, sortType, tabState]);
+  }, [keyword, sortType, tabState, openSortType]);
+
   if (isLoading) {
     return (
       <>
@@ -184,7 +180,7 @@ export const BuyerSearchResult = () => {
           <FormWrapper onSubmit={handleSubmit}>
             <Input
               value={input}
-              onChange={handleOnChange}
+              onChange={handleChangeInput}
               placeholder="상담사명, 제목, 키워드"
               fontSize="1.6rem"
               fontWeight="400"
@@ -225,7 +221,7 @@ export const BuyerSearchResult = () => {
               <FormWrapper onSubmit={handleSubmit}>
                 <Input
                   value={input}
-                  onChange={handleOnChange}
+                  onChange={handleChangeInput}
                   placeholder="상담사명, 제목, 키워드"
                   fontSize="1.6rem"
                   fontWeight="400"
@@ -239,7 +235,7 @@ export const BuyerSearchResult = () => {
                 <SearchIcon onClick={handleSubmit} />
               </FormWrapper>
             </HeaderWrapper>
-            <Divider2 tabState={tabState} setTabState={setTabState} />
+            <Divider2 tabState={tabState} setTabState={handleClickTab} />
             <div className="select">
               <div
                 className="select-wrapper"
@@ -287,6 +283,8 @@ export const BuyerSearchResult = () => {
                 sortType={sortType}
                 setSortType={setSortType}
                 setPageNum={setPageNum}
+                searchParams={searchParams}
+                setSearchParams={setSearchParams}
               />
             </>
           ) : null}
@@ -305,7 +303,7 @@ export const BuyerSearchResult = () => {
               <FormWrapper onSubmit={handleSubmit}>
                 <Input
                   value={input}
-                  onChange={handleOnChange}
+                  onChange={handleChangeInput}
                   placeholder="상담사명, 제목, 키워드"
                   fontSize="1.6rem"
                   fontWeight="400"
@@ -319,7 +317,7 @@ export const BuyerSearchResult = () => {
                 <SearchIcon onClick={handleSubmit} />
               </FormWrapper>
             </HeaderWrapper>
-            <Divider2 tabState={tabState} setTabState={setTabState} />
+            <Divider2 tabState={tabState} setTabState={handleClickTab} />
             <div className="select">
               <div
                 className="select-wrapper"
@@ -328,7 +326,7 @@ export const BuyerSearchResult = () => {
                   setScrollLock(true);
                 }}
               >
-                <Button2 color={Grey3}>{openSortList[sortType]}</Button2>
+                <Button2 color={Grey3}>{openSortList[openSortType]}</Button2>
                 <Down />
               </div>
             </div>
@@ -364,9 +362,11 @@ export const BuyerSearchResult = () => {
                 }}
               />
               <OpenConsultSortModal
-                sortType={sortType}
-                setSortType={setSortType}
+                sortType={openSortType}
+                setSortType={setOpenSortType}
                 setPostId={setLastId}
+                searchParams={searchParams}
+                setSearchParams={setSearchParams}
               />
             </>
           ) : null}
diff --git a/src/utils/convertOpenSortType.ts b/src/utils/convertOpenSortType.ts
index c8e82a2a..27429624 100644
--- a/src/utils/convertOpenSortType.ts
+++ b/src/utils/convertOpenSortType.ts
@@ -2,9 +2,9 @@ export const ConverOpenSortType = (typeNum: number) => {
   if (typeNum === 0) {
     return 'LATEST';
   } else if (typeNum === 1) {
-    return 'DESC_TOTAL_COMMENT';
-  } else if (typeNum === 2) {
     return 'DESC_TOTAL_LIKE';
+  } else if (typeNum === 2) {
+    return 'DESC_TOTAL_COMMENT';
   } else {
     return '';
   }

From 5b1a61511941acf0415aa06674c5188ca31d5b8c Mon Sep 17 00:00:00 2001
From: kyuhho <rbgh0114@naver.com>
Date: Sat, 20 Apr 2024 16:03:21 +0900
Subject: [PATCH 12/35] feat: add checking stompClient connected logic when
 subscribe (#230)

---
 src/contexts/StompContext.tsx   |  1 +
 src/pages/Buyer/BuyerChat.tsx   |  8 +++++---
 src/pages/Seller/SellerChat.tsx | 12 +++++++-----
 3 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/src/contexts/StompContext.tsx b/src/contexts/StompContext.tsx
index 42232f61..409340b0 100644
--- a/src/contexts/StompContext.tsx
+++ b/src/contexts/StompContext.tsx
@@ -82,6 +82,7 @@ export const StompProvider: React.FC<{ children: ReactNode }> = ({
    *
    */
   const connectChat = () => {
+    setIsConnected(false);
     const socket = new SockJs(process.env.REACT_APP_CHAT_URL + '/chat');
     stompClient.current = Stomp.over(() => {
       return socket;
diff --git a/src/pages/Buyer/BuyerChat.tsx b/src/pages/Buyer/BuyerChat.tsx
index a4b82da8..34ad88b2 100644
--- a/src/pages/Buyer/BuyerChat.tsx
+++ b/src/pages/Buyer/BuyerChat.tsx
@@ -352,7 +352,9 @@ export const BuyerChat = () => {
 
   useEffect(() => {
     // 컴포넌트가 마운트되었을 때 실행
-    connectChat();
+    if (stompClient.current?.connected) {
+      connectChat();
+    }
     //채팅 불러오기
     getChatMessages(0);
     //
@@ -360,7 +362,7 @@ export const BuyerChat = () => {
     //관측 가능
     preventRef.current = true;
     return () => {
-      if (stompClient.current) {
+      if (stompClient.current && stompClient.current?.connected) {
         stompClient.current.unsubscribe('/queue/chattings/customers/' + chatId);
         stompClient.current.unsubscribe(
           '/queue/chattings/status/customers/' + chatId,
@@ -374,7 +376,7 @@ export const BuyerChat = () => {
         sentExitResponse();
       }
     };
-  }, []);
+  }, [stompClient.current?.connected]);
 
   //useEffects
   //보내기 버튼 색상처리
diff --git a/src/pages/Seller/SellerChat.tsx b/src/pages/Seller/SellerChat.tsx
index 0929ca6c..20d82262 100644
--- a/src/pages/Seller/SellerChat.tsx
+++ b/src/pages/Seller/SellerChat.tsx
@@ -263,7 +263,7 @@ const SellerChat = () => {
     }
   };
 
-  const sentExitResponse = () => {
+  const sendExitResponse = () => {
     if (stompClient.current) {
       stompClient.current.send('app/api/v1/chat/counselors/exit/' + chatId, {});
     }
@@ -340,7 +340,9 @@ const SellerChat = () => {
 
   useEffect(() => {
     // 컴포넌트가 마운트되었을 때 실행
-    connectChat();
+    if (stompClient.current?.connected) {
+      connectChat();
+    }
     //채팅 불러오기
     getChatMessages(0);
     //채팅 status, 상대이름 가져오기
@@ -349,7 +351,7 @@ const SellerChat = () => {
     preventRef.current = true;
     // 언마운트 시에 소켓 연결 해제
     return () => {
-      if (stompClient.current) {
+      if (stompClient.current && stompClient.current?.connected) {
         stompClient.current.unsubscribe(
           '/queue/chattings/counselors/' + chatId,
         );
@@ -362,10 +364,10 @@ const SellerChat = () => {
         stompClient.current.unsubscribe(
           '/queue/chatMessages/counselors/' + chatId,
         );
-        sentExitResponse();
+        sendExitResponse();
       }
     };
-  }, []);
+  }, [chatId, stompClient, stompClient.current?.connected]);
 
   //useEffects
   //보내기 버튼 색상처리

From 7d6ae2ef21224a18e9e91599759b1090bfa886d2 Mon Sep 17 00:00:00 2001
From: kyuhho <rbgh0114@naver.com>
Date: Sat, 20 Apr 2024 16:45:04 +0900
Subject: [PATCH 13/35] feat: add exception stompClient connection error (#230)

---
 .../Buyer/BuyerConsult/BuyerConsultChatSection.tsx        | 3 ++-
 src/components/Seller/SellerConsult/SellerChatList.tsx    | 2 +-
 src/contexts/StompContext.tsx                             | 6 +++---
 src/pages/Buyer/BuyerChat.tsx                             | 8 ++++----
 src/pages/Seller/SellerChat.tsx                           | 8 ++++----
 5 files changed, 14 insertions(+), 13 deletions(-)

diff --git a/src/components/Buyer/BuyerConsult/BuyerConsultChatSection.tsx b/src/components/Buyer/BuyerConsult/BuyerConsultChatSection.tsx
index b90412ce..56cdb281 100644
--- a/src/components/Buyer/BuyerConsult/BuyerConsultChatSection.tsx
+++ b/src/components/Buyer/BuyerConsult/BuyerConsultChatSection.tsx
@@ -84,6 +84,7 @@ export const BuyerConsultChatSection = ({
       unreadMessageCount: 0,
       reviewCompleted: null,
       consultId: null,
+      consultCategory: '',
     };
     //add roomIds for unsubscribe
     roomIdsRef.current.unshift(notification.chatId);
@@ -99,7 +100,7 @@ export const BuyerConsultChatSection = ({
     }
 
     const sendConnectRequest = () => {
-      if (stompClient.current) {
+      if (stompClient.current && stompClient.current.connected) {
         stompClient.current.send(
           '/app/api/v1/chat/customers/connect',
           {},
diff --git a/src/components/Seller/SellerConsult/SellerChatList.tsx b/src/components/Seller/SellerConsult/SellerChatList.tsx
index ed7c0a49..98b64a0c 100644
--- a/src/components/Seller/SellerConsult/SellerChatList.tsx
+++ b/src/components/Seller/SellerConsult/SellerChatList.tsx
@@ -117,7 +117,7 @@ function SellerChatList({
      *
      */
     const sendConnectRequest = () => {
-      if (stompClient.current) {
+      if (stompClient.current && stompClient.current.connected) {
         stompClient.current.send(
           '/app/api/v1/chat/counselors/connect',
           {},
diff --git a/src/contexts/StompContext.tsx b/src/contexts/StompContext.tsx
index 409340b0..630183a0 100644
--- a/src/contexts/StompContext.tsx
+++ b/src/contexts/StompContext.tsx
@@ -8,7 +8,7 @@ import React, {
   useState,
 } from 'react';
 import SockJs from 'sockjs-client';
-import { CompatClient, Stomp } from '@stomp/stompjs';
+import { CompatClient, IFrame, Stomp } from '@stomp/stompjs';
 import { useRecoilState } from 'recoil';
 import { isCustomerState } from 'utils/atom';
 import { useLocation } from 'react-router-dom';
@@ -93,7 +93,7 @@ export const StompProvider: React.FC<{ children: ReactNode }> = ({
         Authorization: getCookie('accessToken'),
         isCustomer: isCustomer,
       },
-      (frame: any) => {
+      (frame: IFrame) => {
         console.log('Connected: ' + frame);
         setIsConnected(true);
       },
@@ -109,7 +109,7 @@ export const StompProvider: React.FC<{ children: ReactNode }> = ({
       },
     );
 
-    stompClient.current.reconnect_delay = 100;
+    stompClient.current.reconnectDelay = 100;
   };
 
   //
diff --git a/src/pages/Buyer/BuyerChat.tsx b/src/pages/Buyer/BuyerChat.tsx
index 34ad88b2..3a2d4bbe 100644
--- a/src/pages/Buyer/BuyerChat.tsx
+++ b/src/pages/Buyer/BuyerChat.tsx
@@ -258,7 +258,7 @@ export const BuyerChat = () => {
     }
   };
   const sendMessage = () => {
-    if (stompClient.current) {
+    if (stompClient.current && stompClient.current.connected) {
       stompClient.current.send(
         '/app/api/v1/chatMessages/customers/' + chatId,
         {},
@@ -268,7 +268,7 @@ export const BuyerChat = () => {
   };
 
   const sendChatStartResponse = () => {
-    if (stompClient.current) {
+    if (stompClient.current && stompClient.current.connected) {
       stompClient.current.send(
         '/app/api/v1/chat/customers/' + chatId,
         {},
@@ -278,13 +278,13 @@ export const BuyerChat = () => {
   };
 
   const sentExitResponse = () => {
-    if (stompClient.current) {
+    if (stompClient.current && stompClient.current.connected) {
       stompClient.current.send('app/api/v1/chat/customers/exit/' + chatId, {});
     }
   };
 
   const sendChatFinishRequest = () => {
-    if (stompClient.current) {
+    if (stompClient.current && stompClient.current.connected) {
       stompClient.current.send(
         '/app/api/v1/chat/customers/' + chatId,
         {},
diff --git a/src/pages/Seller/SellerChat.tsx b/src/pages/Seller/SellerChat.tsx
index 20d82262..55c70aac 100644
--- a/src/pages/Seller/SellerChat.tsx
+++ b/src/pages/Seller/SellerChat.tsx
@@ -244,7 +244,7 @@ const SellerChat = () => {
   };
 
   const sendMessage = () => {
-    if (stompClient.current) {
+    if (stompClient.current && stompClient.current.connected) {
       stompClient.current.send(
         '/app/api/v1/chatMessages/counselors/' + chatId,
         {},
@@ -254,7 +254,7 @@ const SellerChat = () => {
   };
 
   const sendChatStartRequest = () => {
-    if (stompClient.current) {
+    if (stompClient.current && stompClient.current.connected) {
       stompClient.current.send(
         '/app/api/v1/chat/counselors/' + chatId,
         {},
@@ -264,13 +264,13 @@ const SellerChat = () => {
   };
 
   const sendExitResponse = () => {
-    if (stompClient.current) {
+    if (stompClient.current && stompClient.current.connected) {
       stompClient.current.send('app/api/v1/chat/counselors/exit/' + chatId, {});
     }
   };
 
   const sendChatFinishRequest = () => {
-    if (stompClient.current) {
+    if (stompClient.current && stompClient.current.connected) {
       stompClient.current.send(
         '/app/api/v1/chat/counselors/' + chatId,
         {},

From 533aefda044e551631627748352408968112b6d0 Mon Sep 17 00:00:00 2001
From: kyuhho <rbgh0114@naver.com>
Date: Sat, 20 Apr 2024 16:48:03 +0900
Subject: [PATCH 14/35] feat: add chat start request time constants (#230)

---
 src/utils/constant.ts | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/utils/constant.ts b/src/utils/constant.ts
index 909cea7b..00cf2d1e 100644
--- a/src/utils/constant.ts
+++ b/src/utils/constant.ts
@@ -102,3 +102,6 @@ export const quitRecommends = [
   '상담사 선택, 취소, 상담하기가 어려우신가요?\n셰어마인드에 대해 이해하기 쉽게 정리해 보았는데 이용해보시는건 어떨까요?',
   '혹시 놓치고 있던 상담사가 있지 않을까요?\n더 많은 상담사를 찾아보고 상담을 받아보시는건 어떠세요?',
 ];
+
+/** 상담 시작 요청 시간 */
+export const CHAT_START_REQUEST_TIME = '10:00';

From dcec01b91521570c156534bfe17897729ae3972d Mon Sep 17 00:00:00 2001
From: kyuhho <rbgh0114@naver.com>
Date: Sat, 20 Apr 2024 16:49:22 +0900
Subject: [PATCH 15/35] feat: apply chat time constant (#230)

---
 src/pages/Buyer/BuyerChat.tsx   | 3 ++-
 src/pages/Seller/SellerChat.tsx | 3 ++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/pages/Buyer/BuyerChat.tsx b/src/pages/Buyer/BuyerChat.tsx
index 3a2d4bbe..27dc1044 100644
--- a/src/pages/Buyer/BuyerChat.tsx
+++ b/src/pages/Buyer/BuyerChat.tsx
@@ -14,6 +14,7 @@ import { useStompContext } from 'contexts/StompContext';
 import useChatRequestTime from 'hooks/Chat/useChatRequestTime';
 import BuyerChatFooter from 'components/Buyer/BuyerChat/BuyerChatFooter';
 import BuyerChatSection from 'components/Buyer/BuyerChat/BuyerChatSection';
+import { CHAT_START_REQUEST_TIME } from 'utils/constant';
 
 export const BuyerChat = () => {
   const navigate = useNavigate();
@@ -129,7 +130,7 @@ export const BuyerChat = () => {
           ) {
             //새 메세지 도착으로 분류
             newMessageRef.current = true;
-            setTime('10:00');
+            setTime(CHAT_START_REQUEST_TIME);
             setMessages((prevMessages) => [
               ...prevMessages,
               {
diff --git a/src/pages/Seller/SellerChat.tsx b/src/pages/Seller/SellerChat.tsx
index 55c70aac..c1de67fe 100644
--- a/src/pages/Seller/SellerChat.tsx
+++ b/src/pages/Seller/SellerChat.tsx
@@ -18,6 +18,7 @@ import { useStompContext } from 'contexts/StompContext';
 import useChatRequestTime from 'hooks/Chat/useChatRequestTime';
 import SellerChatFooter from 'components/Seller/SellerChat/SellerChatFooter';
 import SellerChatSection from 'components/Seller/SellerChat/SellerChatSection';
+import { CHAT_START_REQUEST_TIME } from 'utils/constant';
 
 //
 //
@@ -144,7 +145,7 @@ const SellerChat = () => {
           ) {
             //구매자와 달리 현재 채팅 status를 업데이트하는 방향으로 구현해야할듯
             //새 메세지 도착으로 분류
-            setTime('10:00');
+            setTime(CHAT_START_REQUEST_TIME);
             setChatStatus('상담 시작 요청');
           } else if (
             arrivedMessage.chatWebsocketStatus ===

From 29f0b5bbb9539bdca7d1a55e655a23431c313897 Mon Sep 17 00:00:00 2001
From: kyuhho <rbgh0114@naver.com>
Date: Sat, 20 Apr 2024 17:06:57 +0900
Subject: [PATCH 16/35] feat: remove isConnected in consult in progress

---
 .../Buyer/BuyerHome/HomeConsultInProgress.tsx     | 15 +++++++--------
 1 file changed, 7 insertions(+), 8 deletions(-)

diff --git a/src/components/Buyer/BuyerHome/HomeConsultInProgress.tsx b/src/components/Buyer/BuyerHome/HomeConsultInProgress.tsx
index de0ec8a2..9ed33945 100644
--- a/src/components/Buyer/BuyerHome/HomeConsultInProgress.tsx
+++ b/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 <></>;
@@ -157,7 +157,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)``;

From 1a71c74906a29e68fb5ff29753679072515da77e Mon Sep 17 00:00:00 2001
From: kyuhho <rbgh0114@naver.com>
Date: Sat, 20 Apr 2024 17:10:31 +0900
Subject: [PATCH 17/35] feat: apply stompClient connected in consult chat
 (#230)

---
 .../Buyer/BuyerConsult/BuyerConsultChatSection.tsx          | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/Buyer/BuyerConsult/BuyerConsultChatSection.tsx b/src/components/Buyer/BuyerConsult/BuyerConsultChatSection.tsx
index 56cdb281..a6694c75 100644
--- a/src/components/Buyer/BuyerConsult/BuyerConsultChatSection.tsx
+++ b/src/components/Buyer/BuyerConsult/BuyerConsultChatSection.tsx
@@ -37,7 +37,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, 정렬 업데이트
@@ -95,7 +95,7 @@ export const BuyerConsultChatSection = ({
   };
 
   useEffect(() => {
-    if (!isConnected) {
+    if (!stompClient.current?.connected) {
       return;
     }
 
@@ -194,7 +194,7 @@ export const BuyerConsultChatSection = ({
       }
       stompClient.current?.unsubscribe('/queue/chattings/connect/customers/');
     };
-  }, [stompClient, isConnected]);
+  }, [stompClient, stompClient.current?.connected]);
 
   useLayoutEffect(() => {
     const fetchData = async () => {

From 369eff3c2a415d8b7d7d1868bf16338cf54d2c69 Mon Sep 17 00:00:00 2001
From: kyuhho <rbgh0114@naver.com>
Date: Sat, 20 Apr 2024 17:18:47 +0900
Subject: [PATCH 18/35] feat: apply stompClient connected in consult tab (#230)

---
 .../BuyerConsult/BuyerConsultChatSection.tsx  | 22 ++++++++-------
 .../Seller/SellerConsult/SellerChatList.tsx   | 27 +++++++++++--------
 2 files changed, 28 insertions(+), 21 deletions(-)

diff --git a/src/components/Buyer/BuyerConsult/BuyerConsultChatSection.tsx b/src/components/Buyer/BuyerConsult/BuyerConsultChatSection.tsx
index a6694c75..19197c62 100644
--- a/src/components/Buyer/BuyerConsult/BuyerConsultChatSection.tsx
+++ b/src/components/Buyer/BuyerConsult/BuyerConsultChatSection.tsx
@@ -182,17 +182,19 @@ 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, stompClient.current?.connected]);
 
diff --git a/src/components/Seller/SellerConsult/SellerChatList.tsx b/src/components/Seller/SellerConsult/SellerChatList.tsx
index 98b64a0c..a8ec0f72 100644
--- a/src/components/Seller/SellerConsult/SellerChatList.tsx
+++ b/src/components/Seller/SellerConsult/SellerChatList.tsx
@@ -52,7 +52,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, isConnected } = useStompContext();
+  const { stompClient } = useStompContext();
 
   /**
    * 새로운 채팅 도착 시 업데이트
@@ -109,7 +109,8 @@ function SellerChatList({
   };
 
   useEffect(() => {
-    if (!isConnected) {
+    /** if client not connected, do nothing */
+    if (!stompClient.current?.connected) {
       return;
     }
 
@@ -197,19 +198,23 @@ function SellerChatList({
     //
 
     return () => {
-      roomIdsRef.current.forEach((value) => {
+      if (stompClient.current?.connected) {
+        roomIdsRef.current.forEach((value) => {
+          stompClient.current?.unsubscribe(
+            '/queue/chatMessages/counselors/' + value,
+          );
+        });
+        if (userIdRef.current !== -1) {
+          stompClient.current?.unsubscribe(
+            '/queue/chattings/notifications/counselors/' + userIdRef.current,
+          );
+        }
         stompClient.current?.unsubscribe(
-          '/queue/chatMessages/counselors/' + value,
-        );
-      });
-      if (userIdRef.current !== -1) {
-        stompClient.current?.unsubscribe(
-          '/queue/chattings/notifications/counselors/' + userIdRef.current,
+          '/queue/chattings/connect/counselors/',
         );
       }
-      stompClient.current?.unsubscribe('/queue/chattings/connect/counselors/');
     };
-  }, [stompClient, isConnected]);
+  }, [stompClient, stompClient.current?.connected]);
 
   const fetchChatData = useCallback(async () => {
     setIsLoading(true);

From 26c7188f471ace89f040b4c5fc3e49cb99b42d34 Mon Sep 17 00:00:00 2001
From: kyuhho <rbgh0114@naver.com>
Date: Sat, 20 Apr 2024 17:21:58 +0900
Subject: [PATCH 19/35] chore: fix exception on `useEffect` to avoid wrong
 unread count (#230)

---
 src/pages/Buyer/BuyerChat.tsx   | 13 ++++++++-----
 src/pages/Seller/SellerChat.tsx |  8 +++++---
 2 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/src/pages/Buyer/BuyerChat.tsx b/src/pages/Buyer/BuyerChat.tsx
index 27dc1044..95f2636b 100644
--- a/src/pages/Buyer/BuyerChat.tsx
+++ b/src/pages/Buyer/BuyerChat.tsx
@@ -278,7 +278,7 @@ export const BuyerChat = () => {
     }
   };
 
-  const sentExitResponse = () => {
+  const sendExitResponse = () => {
     if (stompClient.current && stompClient.current.connected) {
       stompClient.current.send('app/api/v1/chat/customers/exit/' + chatId, {});
     }
@@ -352,10 +352,13 @@ export const BuyerChat = () => {
   });
 
   useEffect(() => {
-    // 컴포넌트가 마운트되었을 때 실행
-    if (stompClient.current?.connected) {
-      connectChat();
+    if (!stompClient.current?.connected) {
+      return;
     }
+    // 컴포넌트가 마운트되었을 때 실행
+
+    connectChat();
+
     //채팅 불러오기
     getChatMessages(0);
     //
@@ -374,7 +377,7 @@ export const BuyerChat = () => {
         stompClient.current.unsubscribe(
           '/queue/chatMessages/customers/' + chatId,
         );
-        sentExitResponse();
+        sendExitResponse();
       }
     };
   }, [stompClient.current?.connected]);
diff --git a/src/pages/Seller/SellerChat.tsx b/src/pages/Seller/SellerChat.tsx
index c1de67fe..eb2ccbc3 100644
--- a/src/pages/Seller/SellerChat.tsx
+++ b/src/pages/Seller/SellerChat.tsx
@@ -340,10 +340,12 @@ const SellerChat = () => {
   });
 
   useEffect(() => {
-    // 컴포넌트가 마운트되었을 때 실행
-    if (stompClient.current?.connected) {
-      connectChat();
+    if (!stompClient.current?.connected) {
+      return;
     }
+
+    connectChat();
+
     //채팅 불러오기
     getChatMessages(0);
     //채팅 status, 상대이름 가져오기

From ecdf564da1a93b3775921b5455c0897414ed6dc2 Mon Sep 17 00:00:00 2001
From: kyuhho <rbgh0114@naver.com>
Date: Sat, 20 Apr 2024 23:15:34 +0900
Subject: [PATCH 20/35] feat: fix navigate backspace (#208)

---
 src/pages/Common/Service.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/pages/Common/Service.tsx b/src/pages/Common/Service.tsx
index 779119d8..4c9d5141 100644
--- a/src/pages/Common/Service.tsx
+++ b/src/pages/Common/Service.tsx
@@ -1,6 +1,6 @@
 import { BackIcon, HeaderWrapper } from 'components/Buyer/Common/Header';
 import { Space } from 'components/Common/Space';
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import styled, { keyframes } from 'styled-components';
 import { Green, Grey2, Grey3, Grey6, LightGreen } from 'styles/color';
@@ -19,7 +19,7 @@ import { Button } from 'components/Common/Button';
 import { ReactComponent as HeartIcon } from 'assets/icons/icon-heart2.svg';
 import { LoadingSpinner } from 'utils/LoadingSpinner';
 import { Characters } from 'utils/Characters';
-import { consultStyleToCharNum } from 'utils/convertStringToCharNum';
+
 const slideArray = [
   '연애갈등',
   '이별/재회',
@@ -44,7 +44,7 @@ function Service() {
       <HeaderWrapper>
         <BackIcon
           onClick={() => {
-            navigate('/share');
+            navigate(-1);
           }}
         />
         <Heading>서비스 소개</Heading>

From 22076bc030f48d63a981dc135b7b217b4d10b6c6 Mon Sep 17 00:00:00 2001
From: inyoung <rmdnps10@gmail.com>
Date: Sun, 21 Apr 2024 00:50:22 +0900
Subject: [PATCH 21/35] Chore: Add comments to variables and functions and
 remove unused imports, add dependecny to useEffect #228

---
 .../SavedCounselorCard.tsx                    |  28 ++-
 src/components/Common/Divider2.tsx            |  13 +-
 src/components/Common/TagA2Cartegory.tsx      |  10 +-
 src/hooks/useSearchPageParams.ts              |  45 +++--
 src/pages/Buyer/BuyerHome.tsx                 |  35 ++--
 src/pages/Buyer/BuyerSearchResult.tsx         | 159 ++++++++++--------
 src/utils/convertOpenSortType.ts              |   2 +-
 7 files changed, 177 insertions(+), 115 deletions(-)

diff --git a/src/components/Buyer/BuyerSavedCounselor.tsx/SavedCounselorCard.tsx b/src/components/Buyer/BuyerSavedCounselor.tsx/SavedCounselorCard.tsx
index 0e0f0754..ff6e5262 100644
--- a/src/components/Buyer/BuyerSavedCounselor.tsx/SavedCounselorCard.tsx
+++ b/src/components/Buyer/BuyerSavedCounselor.tsx/SavedCounselorCard.tsx
@@ -8,11 +8,16 @@ import { ReactComponent as NoneBookMark } from 'assets/icons/icon-save1.svg';
 import { ReactComponent as BookMark } from 'assets/icons/icon-save2.svg';
 import { ReactComponent as DownIcon } from 'assets/icons/icon-down-toggle.svg';
 import { ReactComponent as UpIcon } from 'assets/icons/icon-up-toggle.svg';
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { CartegoryState, ConsultTimes } from 'utils/type';
 import { convertTimeToString } from 'utils/convertTimeToString';
 import { deleteWishLists } from 'api/delete';
+
+//
+//
+//
+
 interface SavedCounselorCardProps {
   counselorId: number;
   tagList: CartegoryState[];
@@ -28,7 +33,11 @@ interface SavedCounselorCardProps {
   chattingPrice: number;
   consultStyle: number;
 }
-//일단 toggle파트 제외하고 클릭 시 상담프로필로 navigate하게 구현
+
+//
+//
+//
+
 export const SavedCounselorCard = ({
   counselorId,
   tagList,
@@ -45,11 +54,12 @@ export const SavedCounselorCard = ({
   consultStyle,
 }: SavedCounselorCardProps) => {
   const navigate = useNavigate();
-  //toggle
   const [toggle, setToggle] = useState<boolean>(false);
   const [isSending, setIsSending] = useState<boolean>(false);
   const [isSaved, setIsSaved] = useState<boolean>(true);
-  const handleBookmark = async (e: React.MouseEvent<HTMLElement>) => {
+  const handleBookmark = async (
+    e: React.MouseEvent<HTMLElement> | React.MouseEvent<SVGSVGElement>,
+  ) => {
     e.stopPropagation();
     if (isSending) {
       return;
@@ -73,19 +83,21 @@ export const SavedCounselorCard = ({
       setIsSaved(false);
     }
   };
+  //
+  //
+  //
   if (isSaved) {
     return (
       <Wrapper>
         <UpperWrapper
           onClick={() => {
-            //마인더 프로필 개발되면 수정
             navigate(`/profile/${counselorId}`);
           }}
         >
           <TagWrapper>
-            {tagList.map((value: any, index) => {
+            {tagList.map((value: CartegoryState) => {
               return (
-                <TagA2Cartegory tagType={value} bgColorType={1} key={index} />
+                <TagA2Cartegory tagType={value} bgColorType={1} key={value} />
               );
             })}
           </TagWrapper>
@@ -116,7 +128,7 @@ export const SavedCounselorCard = ({
             <BookMarkIcon onClick={handleBookmark} />
           ) : (
             <NoneBookMarkIcon
-              onClick={(e: React.MouseEvent<HTMLElement>) => {
+              onClick={(e: React.MouseEvent<SVGSVGElement>) => {
                 e.stopPropagation();
                 setIsSaved(true);
               }}
diff --git a/src/components/Common/Divider2.tsx b/src/components/Common/Divider2.tsx
index b2b69a26..f55820b0 100644
--- a/src/components/Common/Divider2.tsx
+++ b/src/components/Common/Divider2.tsx
@@ -1,13 +1,22 @@
-import React, { useState } from 'react';
 import styled from 'styled-components';
-import { Black, Green, Grey4, Grey6 } from 'styles/color';
+import { Green, Grey4, Grey6 } from 'styles/color';
 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';
+
+//
+//
+//
+
 interface Divder2Props {
   tabState: number;
   setTabState: (tabState: number) => void;
 }
+
+//
+//
+//
+
 function Divider2({ tabState, setTabState }: Divder2Props) {
   return (
     <Wrapper>
diff --git a/src/components/Common/TagA2Cartegory.tsx b/src/components/Common/TagA2Cartegory.tsx
index e2816598..215cc540 100644
--- a/src/components/Common/TagA2Cartegory.tsx
+++ b/src/components/Common/TagA2Cartegory.tsx
@@ -2,12 +2,20 @@ import styled from 'styled-components';
 import { Green, Grey6, Red, White } from 'styles/color';
 import { Caption2 } from 'styles/font';
 import { CartegoryState } from 'utils/type';
-//bgcolor type이 1이면 white 2면 해당 색상, 3이면 grey6
+
+//
+//
+//
+
 interface TagA2CartegoryProps {
   tagType: CartegoryState;
   bgColorType: number;
 }
 
+//
+//
+//
+
 export const TagA2Cartegory = ({
   tagType,
   bgColorType,
diff --git a/src/hooks/useSearchPageParams.ts b/src/hooks/useSearchPageParams.ts
index 8bced2a6..9034a6aa 100644
--- a/src/hooks/useSearchPageParams.ts
+++ b/src/hooks/useSearchPageParams.ts
@@ -3,12 +3,20 @@ import { useSearchParams } from 'react-router-dom';
 import { useRecoilValue } from 'recoil';
 import { searchKeywordState } from 'utils/atom';
 
+//
+//
+//
+
 export const useSearchPageParams = () => {
   const [searchParams, setSearchParams] = useSearchParams();
+
+  /** get query-string */
   const keywordParam = searchParams.get('keyword');
   const typeParam = searchParams.get('searchType');
   const sortParam = searchParams.get('sort');
   const openSortParam = searchParams.get('open-sort');
+
+  /** get initial values */
   const keywordFromPrevPage = useRecoilValue(searchKeywordState);
   const initialKeyword = keywordParam ?? keywordFromPrevPage;
   const initialSearchType = typeParam ?? 'counselor';
@@ -17,25 +25,28 @@ export const useSearchPageParams = () => {
   const initialOpenSortType =
     openSortParam === 'comments' ? 2 : openSortParam === 'likes' ? 1 : 0;
   const initialTabState = typeParam === 'open-consult' ? 2 : 1;
+
+  /** states with iniitial value */
   const [input, setInput] = useState(keywordFromPrevPage);
   const [keyword, setKeyword] = useState(initialKeyword);
   const [searchType, setSearchType] = useState<string>(initialSearchType);
   const [openSortType, setOpenSortType] = useState<number>(initialOpenSortType);
   const [sortType, setSortType] = useState<number>(initialSortType);
   const [tabState, setTabState] = useState<number>(initialTabState);
+
+  /** event handler*/
   const handleClickOpenConsult = useCallback(() => {
     setSearchType('open-consult');
     searchParams.set('searchType', 'open-consult');
     setTabState(2);
     setSearchParams(searchParams);
-  }, []);
+  }, [searchParams, setSearchParams]);
   const handleClickCounselor = useCallback(() => {
     setSearchType('counselor');
     searchParams.set('searchType', 'counselor');
     setSearchParams(searchParams);
     setTabState(1);
-    console.log('hi');
-  }, []);
+  }, [searchParams, setSearchParams]);
 
   const handleClickTab = useCallback(
     (tabState: number) => {
@@ -45,17 +56,25 @@ export const useSearchPageParams = () => {
         handleClickOpenConsult();
       }
     },
-    [tabState],
+    [handleClickCounselor, handleClickOpenConsult],
+  );
+  const handleChangeInput = useCallback(
+    (event: ChangeEvent<HTMLInputElement>) => {
+      setInput(event.target.value);
+    },
+    [],
+  );
+  const handleSubmit = useCallback(
+    (
+      event: React.FormEvent<HTMLFormElement> | React.MouseEvent<SVGSVGElement>,
+    ) => {
+      event.preventDefault();
+      setKeyword(input);
+      searchParams.set('keyword', input);
+      setSearchParams(searchParams);
+    },
+    [input, searchParams, setSearchParams],
   );
-  const handleChangeInput = (event: ChangeEvent<HTMLInputElement>) => {
-    setInput(event.target.value);
-  };
-  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
-    event.preventDefault();
-    setKeyword(input);
-    searchParams.set('keyword', input);
-    setSearchParams(searchParams);
-  };
 
   return {
     handleClickTab,
diff --git a/src/pages/Buyer/BuyerHome.tsx b/src/pages/Buyer/BuyerHome.tsx
index 47051b72..a7a4a3a7 100644
--- a/src/pages/Buyer/BuyerHome.tsx
+++ b/src/pages/Buyer/BuyerHome.tsx
@@ -11,27 +11,26 @@ import { useEffect, useState } from 'react';
 import { patchCounselorsAll } from 'api/patch';
 export const BuyerHome = () => {
   const navigate = useNavigate();
-  //결과저장
   const [searchData, setSearchData] = useState<SearchResultData[]>([]);
-  const fectchSearchResults = async () => {
-    try {
-      const body = {
-        index: 0,
-      };
-      const res: any = await patchCounselorsAll('POPULARITY', body);
-      if (res.status === 200) {
-        setSearchData(res.data);
-      } else if (res.response.status === 404) {
-        alert('유효하지 않은 정렬 방식입니다.');
-        navigate('/share');
-      }
-    } catch (e) {
-      console.log(e);
-    }
-  };
   useEffect(() => {
+    const fectchSearchResults = async () => {
+      try {
+        const body = {
+          index: 0,
+        };
+        const res: any = await patchCounselorsAll('POPULARITY', body);
+        if (res.status === 200) {
+          setSearchData(res.data);
+        } else if (res.response.status === 404) {
+          alert('유효하지 않은 정렬 방식입니다.');
+          navigate('/share');
+        }
+      } catch (e) {
+        console.log(e);
+      }
+    };
     fectchSearchResults();
-  }, []);
+  }, [navigate]);
   return (
     <Wrapper>
       <Header
diff --git a/src/pages/Buyer/BuyerSearchResult.tsx b/src/pages/Buyer/BuyerSearchResult.tsx
index 35c60ded..53bfc8f2 100644
--- a/src/pages/Buyer/BuyerSearchResult.tsx
+++ b/src/pages/Buyer/BuyerSearchResult.tsx
@@ -7,13 +7,10 @@ import { ReactComponent as Search } from 'assets/icons/search.svg';
 import { ReactComponent as Down } from 'assets/icons/icon-drop-down.svg';
 import { SearchResults } from 'components/Buyer/BuyerSearchResult/SearchResults';
 import { SortModal } from 'components/Buyer/Common/SortModal';
-import { useLayoutEffect, useRef, useState } from 'react';
+import { useCallback, useLayoutEffect, useRef, useState } from 'react';
 import { openSortList, sortList } from 'utils/constant';
 import { useRecoilState, useSetRecoilState } from 'recoil';
-import {
-  isSortModalOpenState,
-  scrollLockState,
-} from 'utils/atom';
+import { isSortModalOpenState, scrollLockState } from 'utils/atom';
 import Input from 'components/Common/Input';
 import {
   patchSearchWordsCounselorsResults,
@@ -28,27 +25,33 @@ import Divider2 from 'components/Common/Divider2';
 import OpenConsultResults from 'components/Buyer/BuyerSearchResult/OpenConsultResults';
 import { openConsultApiObject } from './BuyerConsult';
 import { OpenConsultSortModal } from 'components/Buyer/Common/OpenConsultSortModal';
-import { ConverOpenSortType } from 'utils/convertOpenSortType';
+import { ConvertOpenSortType } from 'utils/convertOpenSortType';
 import { useSearchPageParams } from 'hooks/useSearchPageParams';
 export const BuyerSearchResult = () => {
   const navigate = useNavigate();
-  // Modal 여부(recoil), 스크롤 막기
+
+  // state with modal, scrollLock
   const [isModalOpen, setIsModalOpen] =
     useRecoilState<boolean>(isSortModalOpenState);
   const setScrollLock = useSetRecoilState(scrollLockState);
-  // 검색 결과 리스트 - 상담사 리스트와 공개 상담 리스트
+
+  // state for saving search api result
   const [searchData, setSearchData] = useState<SearchResultData[]>([]);
   const [openConsultSearchData, setOpenConsultSearchData] = useState<
     openConsultApiObject[]
   >([]);
-  //무한스크롤 위한 page num과 lastId
+
+  // state with inifinite scroll - page number and last id
   const [pageNum, setPageNum] = useState<number>(0);
   const [lastId, setLastId] = useState<number>(0);
-  // 무한스크롤을 trigger를 위한 상태
+
+  // state for trigger fetch api (infinite scroll)
   const [isLastElem, setIsLastElem] = useState<boolean>(false);
-  // 무한스크롤을 trigger를 위한 상태
   const [isLoading, setIsLoading] = useState<boolean>(true);
+
+  // state for blocking fetch api (infinite scroll) when the previous request has not been completed
   const preventRef = useRef(true);
+
   const {
     handleClickTab,
     searchParams,
@@ -63,6 +66,8 @@ export const BuyerSearchResult = () => {
     setSortType,
     handleChangeInput,
   } = useSearchPageParams();
+
+  // function to run in intersection observer
   const onIntersect: IntersectionObserverCallback = async (entry) => {
     if (
       entry[0].isIntersecting &&
@@ -87,75 +92,85 @@ export const BuyerSearchResult = () => {
     onIntersect,
   });
 
-  const fetchSearchResults = async (searchWord: string, pageIndex: number) => {
-    try {
-      const body = {
-        word: searchWord,
-        index: pageIndex,
-      };
-      const sortTypeString: string = ConverSortType(sortType);
-      const res: any = await patchSearchWordsCounselorsResults(
-        sortTypeString,
-        body,
-      );
-      if (res.status === 200) {
-        if (res.data.length !== 0) {
-          if (pageIndex === 0) {
-            setSearchData(res.data);
-            setPageNum(pageNum + 1);
+  // function for fetching search result
+  const fetchSearchResults = useCallback(
+    async (searchWord: string, pageIndex: number) => {
+      try {
+        const body = {
+          word: searchWord,
+          index: pageIndex,
+        };
+        const sortTypeString: string = ConverSortType(sortType);
+        const res: any = await patchSearchWordsCounselorsResults(
+          sortTypeString,
+          body,
+        );
+        if (res.status === 200) {
+          if (res.data.length !== 0) {
+            if (pageIndex === 0) {
+              setSearchData(res.data);
+              setPageNum(pageNum + 1);
+            } else {
+              const updatedSearchs = [...searchData, ...res.data];
+              setSearchData(updatedSearchs);
+              setPageNum(pageNum + 1);
+            }
           } else {
-            const updatedSearchs = [...searchData, ...res.data];
-            setSearchData(updatedSearchs);
-            setPageNum(pageNum + 1);
+            setIsLastElem(true);
           }
-        } else {
-          setIsLastElem(true);
+        } else if (res.response.status === 400) {
+          alert('검색어는 2~20자 사이여야 합니다.');
+        }
+      } catch (e) {
+        alert(e);
+      } finally {
+        if (pageIndex === 0) {
+          setIsLoading(false);
         }
-      } else if (res.response.status === 400) {
-        alert('검색어는 2~20자 사이여야 합니다.');
-      }
-    } catch (e) {
-      alert(e);
-    } finally {
-      if (pageIndex === 0) {
-        setIsLoading(false);
       }
-    }
-  };
-
-  const fetchOpenSearchResults = async (searchWord: string, postId: number) => {
-    try {
-      const body = {
-        word: searchWord,
-        postId: postId,
-      };
-      const sortTypeString: string = ConverOpenSortType(openSortType);
-      const res: any = await patchSearchWordsPostsResults(sortTypeString, body);
-      if (res.status === 200) {
-        if (res.data.length !== 0) {
-          if (postId === 0) {
-            setOpenConsultSearchData(res.data);
-            setPageNum(pageNum + 1);
+    },
+    [pageNum, searchData, sortType],
+  );
+  const fetchOpenSearchResults = useCallback(
+    async (searchWord: string, postId: number) => {
+      try {
+        const body = {
+          word: searchWord,
+          postId: postId,
+        };
+        const sortTypeString: string = ConvertOpenSortType(openSortType);
+        const res: any = await patchSearchWordsPostsResults(
+          sortTypeString,
+          body,
+        );
+        if (res.status === 200) {
+          if (res.data.length !== 0) {
+            if (postId === 0) {
+              setOpenConsultSearchData(res.data);
+              setPageNum(pageNum + 1);
+            } else {
+              const updatedSearchs = [...openConsultSearchData, ...res.data];
+              setLastId(res.data.postId);
+              setOpenConsultSearchData(updatedSearchs);
+            }
+            setIsLastElem(true);
           } else {
-            const updatedSearchs = [...openConsultSearchData, ...res.data];
-            setLastId(res.data.postId);
-            setOpenConsultSearchData(updatedSearchs);
+            setOpenConsultSearchData([]);
           }
-          setIsLastElem(true);
-        } else {
-          setOpenConsultSearchData([]);
+        } else if (res.response.status === 400) {
+          alert('검색어는 2~20자 사이여야 합니다.');
+        }
+      } catch (e) {
+        alert(e);
+      } finally {
+        if (postId === 0) {
+          setIsLoading(false);
         }
-      } else if (res.response.status === 400) {
-        alert('검색어는 2~20자 사이여야 합니다.');
-      }
-    } catch (e) {
-      alert(e);
-    } finally {
-      if (postId === 0) {
-        setIsLoading(false);
       }
-    }
-  };
+    },
+    [openConsultSearchData, openSortType, pageNum],
+  );
+
   useLayoutEffect(() => {
     setIsLastElem(false);
     setPageNum(0);
diff --git a/src/utils/convertOpenSortType.ts b/src/utils/convertOpenSortType.ts
index 27429624..8ff6b394 100644
--- a/src/utils/convertOpenSortType.ts
+++ b/src/utils/convertOpenSortType.ts
@@ -1,4 +1,4 @@
-export const ConverOpenSortType = (typeNum: number) => {
+export const ConvertOpenSortType = (typeNum: number) => {
   if (typeNum === 0) {
     return 'LATEST';
   } else if (typeNum === 1) {

From d3df242a8eb2bff27d6aef71cfccf7415af0a0b2 Mon Sep 17 00:00:00 2001
From: inyoung <rmdnps10@gmail.com>
Date: Sun, 21 Apr 2024 00:57:50 +0900
Subject: [PATCH 22/35] Feat: Changed the previous search value storage method
 from recoil to query string navigate method.#233

---
 src/components/Buyer/BuyerSearch/SearchHeader.tsx | 6 +-----
 src/hooks/useSearchPageParams.ts                  | 8 ++------
 2 files changed, 3 insertions(+), 11 deletions(-)

diff --git a/src/components/Buyer/BuyerSearch/SearchHeader.tsx b/src/components/Buyer/BuyerSearch/SearchHeader.tsx
index b18b73ca..4bd3aee9 100644
--- a/src/components/Buyer/BuyerSearch/SearchHeader.tsx
+++ b/src/components/Buyer/BuyerSearch/SearchHeader.tsx
@@ -5,12 +5,9 @@ import { useNavigate } from 'react-router-dom';
 import { Grey1, Grey4, White } from 'styles/color';
 import Input from 'components/Common/Input';
 import { ChangeEvent, useState } from 'react';
-import { useSetRecoilState } from 'recoil';
-import { searchKeywordState } from 'utils/atom';
 
 export const SearchHeader = () => {
   const navigate = useNavigate();
-  const setKeyword = useSetRecoilState(searchKeywordState);
   //input value
   const [input, setInput] = useState('');
   //input onchagne
@@ -19,8 +16,7 @@ export const SearchHeader = () => {
   };
   const handleSubmit = (event: ChangeEvent<HTMLFormElement>) => {
     event.preventDefault();
-    setKeyword(input);
-    navigate('/search/result');
+    navigate(`/search/result?keyword=${input}`);
   };
   return (
     <Wrapper>
diff --git a/src/hooks/useSearchPageParams.ts b/src/hooks/useSearchPageParams.ts
index 9034a6aa..90e18d58 100644
--- a/src/hooks/useSearchPageParams.ts
+++ b/src/hooks/useSearchPageParams.ts
@@ -1,7 +1,5 @@
 import { ChangeEvent, useCallback, useState } from 'react';
 import { useSearchParams } from 'react-router-dom';
-import { useRecoilValue } from 'recoil';
-import { searchKeywordState } from 'utils/atom';
 
 //
 //
@@ -17,8 +15,7 @@ export const useSearchPageParams = () => {
   const openSortParam = searchParams.get('open-sort');
 
   /** get initial values */
-  const keywordFromPrevPage = useRecoilValue(searchKeywordState);
-  const initialKeyword = keywordParam ?? keywordFromPrevPage;
+  const initialKeyword = keywordParam ?? '';
   const initialSearchType = typeParam ?? 'counselor';
   const initialSortType =
     sortParam === 'rating' ? 2 : sortParam === 'popular' ? 1 : 0;
@@ -27,7 +24,7 @@ export const useSearchPageParams = () => {
   const initialTabState = typeParam === 'open-consult' ? 2 : 1;
 
   /** states with iniitial value */
-  const [input, setInput] = useState(keywordFromPrevPage);
+  const [input, setInput] = useState(initialKeyword);
   const [keyword, setKeyword] = useState(initialKeyword);
   const [searchType, setSearchType] = useState<string>(initialSearchType);
   const [openSortType, setOpenSortType] = useState<number>(initialOpenSortType);
@@ -88,7 +85,6 @@ export const useSearchPageParams = () => {
     keyword,
     setKeyword,
     handleSubmit,
-    keywordFromPrevPage,
     searchType,
     sortType,
     setSortType,

From d68b37cf8f42fd07fb54afd396f243d2199a3b08 Mon Sep 17 00:00:00 2001
From: inyoung <rmdnps10@gmail.com>
Date: Sun, 21 Apr 2024 02:40:12 +0900
Subject: [PATCH 23/35] =?UTF-8?q?Hotfix:=20=EB=B0=B1=EC=97=94=EB=93=9C=20?=
 =?UTF-8?q?=EC=9D=91=EB=8B=B5=EC=9D=B4=20=EB=B3=B4=EC=9D=B4=EC=A7=80=20?=
 =?UTF-8?q?=EC=95=8A=EC=9D=80=20=EC=9D=B4=EC=8A=88=EB=A1=9C=20=EC=9D=B8?=
 =?UTF-8?q?=ED=95=98=EC=97=AC=20=EC=9E=84=EC=8B=9C=EC=A0=81=EC=9C=BC?=
 =?UTF-8?q?=EB=A1=9C=20response=20status=EC=97=90=20=EB=8C=80=ED=95=9C=20?=
 =?UTF-8?q?=EC=B2=98=EB=A6=AC=20=EC=97=86=EC=9D=B4=20=EA=B3=B5=EA=B0=9C?=
 =?UTF-8?q?=EC=83=81=EB=8B=B4=20=EC=9E=91=EC=84=B1=20#228?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../BuyerWriteOpenConsult/FianlWritePopup.tsx      | 14 +++-----------
 .../Seller/SellerOpenConsult/IsSendPopup.tsx       |  1 +
 2 files changed, 4 insertions(+), 11 deletions(-)

diff --git a/src/components/Buyer/BuyerWriteOpenConsult/FianlWritePopup.tsx b/src/components/Buyer/BuyerWriteOpenConsult/FianlWritePopup.tsx
index bb2b4c61..3e596f04 100644
--- a/src/components/Buyer/BuyerWriteOpenConsult/FianlWritePopup.tsx
+++ b/src/components/Buyer/BuyerWriteOpenConsult/FianlWritePopup.tsx
@@ -5,11 +5,7 @@ import { useSetRecoilState } from 'recoil';
 import styled from 'styled-components';
 import { Green, Grey4, LightGreen, White } from 'styles/color';
 import { Body1, Body3 } from 'styles/font';
-import {
-  isBuyPopupOpenState,
-  isPostPopupOpenState,
-  isSendPopupOpenState,
-} from 'utils/atom';
+import { isPostPopupOpenState } from 'utils/atom';
 import { convertCategoryEnum } from 'utils/convertCategoryEnum';
 interface FianlWritePopupProps {
   title: string;
@@ -31,12 +27,8 @@ function FinalWritePopup({ title, content, category }: FianlWritePopupProps) {
       isCompleted: true,
     };
     try {
-      const res: any = await patchOpenConsult(body);
-      if (res?.status === 200) {
-        navigate('/consult/?type=open-consult');
-      } else {
-        console.log(res);
-      }
+      await patchOpenConsult(body);
+      navigate('/consult/?type=open-consult');
     } catch (err) {
       alert(err);
     }
diff --git a/src/components/Seller/SellerOpenConsult/IsSendPopup.tsx b/src/components/Seller/SellerOpenConsult/IsSendPopup.tsx
index 268f3503..52467063 100644
--- a/src/components/Seller/SellerOpenConsult/IsSendPopup.tsx
+++ b/src/components/Seller/SellerOpenConsult/IsSendPopup.tsx
@@ -23,6 +23,7 @@ function IsSendPopup({ text, setText, setIsReplying }: IsSendPopupProps) {
     };
     try {
       const res: any = await postComment(body);
+      console.log(res);
       if (res?.status === 200 || res.status === 201) {
         setText('');
         setIsSendPopupOpen(false);

From 707b28ace648d54c368f18a329e8968f676d0a86 Mon Sep 17 00:00:00 2001
From: inyoung <rmdnps10@gmail.com>
Date: Sun, 21 Apr 2024 18:04:23 +0900
Subject: [PATCH 24/35] =?UTF-8?q?Fix:=20api=20=EC=9D=B8=EC=8A=A4=ED=84=B4?=
 =?UTF-8?q?=EC=8A=A4=20=EB=B6=80=EB=B6=84=20=EC=88=98=EC=A0=95=ED=95=98?=
 =?UTF-8?q?=EC=97=AC=20=EA=B3=B5=EA=B0=9C=EC=83=81=EB=8B=B4=20=EC=9E=91?=
 =?UTF-8?q?=EC=84=B1=20=EC=8B=9C=20api=20response=20status=EC=97=90=20?=
 =?UTF-8?q?=EB=94=B0=EB=A5=B8=20=EC=98=88=EC=99=B8=EC=B2=98=EB=A6=AC=20?=
 =?UTF-8?q?=EA=B5=AC=ED=98=84=20#236?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/Router.tsx                                    |  2 +-
 src/api/patch.ts                                  |  3 +--
 .../BuyerWriteOpenConsult/FianlWritePopup.tsx     | 15 +++++++++++++--
 src/pages/Buyer/BuyerOpenPaymentDetail.tsx        | 13 +++++++++++--
 4 files changed, 26 insertions(+), 7 deletions(-)

diff --git a/src/Router.tsx b/src/Router.tsx
index 417189f6..792ebe0c 100644
--- a/src/Router.tsx
+++ b/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 />} />
diff --git a/src/api/patch.ts b/src/api/patch.ts
index 01c3115f..b92c690d 100644
--- a/src/api/patch.ts
+++ b/src/api/patch.ts
@@ -94,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);
-};
diff --git a/src/components/Buyer/BuyerWriteOpenConsult/FianlWritePopup.tsx b/src/components/Buyer/BuyerWriteOpenConsult/FianlWritePopup.tsx
index 3e596f04..2bb2b377 100644
--- a/src/components/Buyer/BuyerWriteOpenConsult/FianlWritePopup.tsx
+++ b/src/components/Buyer/BuyerWriteOpenConsult/FianlWritePopup.tsx
@@ -27,8 +27,19 @@ function FinalWritePopup({ title, content, category }: FianlWritePopupProps) {
       isCompleted: true,
     };
     try {
-      await patchOpenConsult(body);
-      navigate('/consult/?type=open-consult');
+      const res: any = await patchOpenConsult(body);
+      if (res.status === 200) {
+        navigate('/consult/?type=open-consult');
+      } else if (res?.response.status === 400) {
+        alert('이미 최종 제출된 상담입니다.');
+        navigate('/consult?type=open-consult');
+      } else if (res?.response.status === 403) {
+        alert('작성권한이 없습니다.');
+        navigate('/consult?type=open-consult');
+      } else if (res?.response.status === 404) {
+        alert('존재하지 않는 일대다상담입니다.');
+        navigate('/consult?type=open-consult');
+      }
     } catch (err) {
       alert(err);
     }
diff --git a/src/pages/Buyer/BuyerOpenPaymentDetail.tsx b/src/pages/Buyer/BuyerOpenPaymentDetail.tsx
index 26ed2efc..874cc769 100644
--- a/src/pages/Buyer/BuyerOpenPaymentDetail.tsx
+++ b/src/pages/Buyer/BuyerOpenPaymentDetail.tsx
@@ -16,8 +16,17 @@ export const BuyerOpenPaymentDetail = () => {
       cost: 500,
       isPublic: false,
     };
-    await postOpenConsult(body);
-    navigate('/paymentComplete');
+    try {
+      const res: any = await postOpenConsult(body);
+      if (res.status === 201) {
+        console.log(res);
+        navigate('/paymentComplete');
+      } else if (res?.response.status === 404) {
+        alert('존재하지 않는 회원입니다.');
+      }
+    } catch (err) {
+      alert(err);
+    }
   };
   return (
     <Wrapper>

From 061eec04ee66249ca4479df959cacac983ce91d3 Mon Sep 17 00:00:00 2001
From: inyoung <rmdnps10@gmail.com>
Date: Sun, 21 Apr 2024 18:29:01 +0900
Subject: [PATCH 25/35] =?UTF-8?q?Fix:=20sort=20modal=20props=20error=20?=
 =?UTF-8?q?=ED=95=B4=EA=B2=B0,=20=EB=93=A4=EC=A4=80=EB=A7=88=EC=99=80=20?=
 =?UTF-8?q?=EC=B9=B4=ED=85=8C=EA=B3=A0=EB=A6=AC=20=ED=8E=98=EC=9D=B4?=
 =?UTF-8?q?=EC=A7=80=EC=97=90=EC=84=9C=20=EC=BF=BC=EB=A6=AC=EC=8A=A4?=
 =?UTF-8?q?=ED=8A=B8=EB=A7=81=EC=9C=BC=EB=A1=9C=20=ED=95=84=ED=84=B0?=
 =?UTF-8?q?=EB=A7=81=20=EA=B5=AC=ED=98=84=20#233?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/post.ts                               |  2 +-
 .../BuyerWriteOpenConsult/FianlWritePopup.tsx |  5 +--
 src/pages/Buyer/BuyerAvailCounselor.tsx       | 16 ++++++-
 src/pages/Buyer/BuyerCategoryResult.tsx       | 45 +++++++++++++------
 src/pages/Buyer/BuyerOpenPaymentDetail.tsx    |  4 +-
 src/pages/Buyer/BuyerWriteOpenConsult.tsx     |  2 +-
 src/pages/Seller/SellerLetterWrite.tsx        |  5 +--
 7 files changed, 53 insertions(+), 26 deletions(-)

diff --git a/src/api/post.ts b/src/api/post.ts
index 74e80e24..ef518389 100644
--- a/src/api/post.ts
+++ b/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
diff --git a/src/components/Buyer/BuyerWriteOpenConsult/FianlWritePopup.tsx b/src/components/Buyer/BuyerWriteOpenConsult/FianlWritePopup.tsx
index 2bb2b377..ff109a35 100644
--- a/src/components/Buyer/BuyerWriteOpenConsult/FianlWritePopup.tsx
+++ b/src/components/Buyer/BuyerWriteOpenConsult/FianlWritePopup.tsx
@@ -1,10 +1,9 @@
 import { patchOpenConsult } from 'api/patch';
-import React from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 import { useSetRecoilState } from 'recoil';
 import styled from 'styled-components';
-import { Green, Grey4, LightGreen, White } from 'styles/color';
-import { Body1, Body3 } from 'styles/font';
+import { Green, LightGreen, White } from 'styles/color';
+import { Body1 } from 'styles/font';
 import { isPostPopupOpenState } from 'utils/atom';
 import { convertCategoryEnum } from 'utils/convertCategoryEnum';
 interface FianlWritePopupProps {
diff --git a/src/pages/Buyer/BuyerAvailCounselor.tsx b/src/pages/Buyer/BuyerAvailCounselor.tsx
index 7b91101c..c183ff3f 100644
--- a/src/pages/Buyer/BuyerAvailCounselor.tsx
+++ b/src/pages/Buyer/BuyerAvailCounselor.tsx
@@ -1,4 +1,4 @@
-import { useNavigate } from 'react-router-dom';
+import { useNavigate, useSearchParams } from 'react-router-dom';
 import styled from 'styled-components';
 import { Grey1, Grey3, Grey6, White } from 'styles/color';
 import { Button2, Heading } from 'styles/font';
@@ -18,7 +18,17 @@ import useIntersectionObserver from 'hooks/useIntersectionObserver';
 export const BuyerAvailCounselor = () => {
   //0 : 최신순 1:인기순 2: 별점순
   // 바뀔 때마다 useEffect로 request
-  const [sortType, setSortType] = useState<number>(0);
+  // using query params to store sorting type
+  const [searchParams, setSearchParams] = useSearchParams();
+
+  // sortType - 0 : 최신순 1:인기순 2: 별점순, 기본값: 0, 최신순
+  const initialSortType =
+    searchParams.get('sort') === 'rating'
+      ? 2
+      : searchParams.get('sort') === 'popular'
+      ? 1
+      : 0;
+  const [sortType, setSortType] = useState<number>(initialSortType);
   // Modal 여부(recoil)
   const [isModalOpen, setIsModalOpen] =
     useRecoilState<boolean>(isSortModalOpenState);
@@ -125,6 +135,8 @@ export const BuyerAvailCounselor = () => {
             }}
           />
           <SortModal
+            searchParams={searchParams}
+            setSearchParams={setSearchParams}
             sortType={sortType}
             setSortType={setSortType}
             setPageNum={setPageNum}
diff --git a/src/pages/Buyer/BuyerCategoryResult.tsx b/src/pages/Buyer/BuyerCategoryResult.tsx
index d0652301..0f96e3b7 100644
--- a/src/pages/Buyer/BuyerCategoryResult.tsx
+++ b/src/pages/Buyer/BuyerCategoryResult.tsx
@@ -1,6 +1,6 @@
 import { CategoryResultHeader } from 'components/Buyer/BuyerCategoryResult/CategoryResultHeader';
 import { SortModal } from 'components/Buyer/Common/SortModal';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate, useSearchParams } from 'react-router-dom';
 import styled from 'styled-components';
 import { ReactComponent as Down } from 'assets/icons/icon-drop-down.svg';
 import { Button2 } from 'styles/font';
@@ -20,27 +20,44 @@ import { SearchResultData } from 'utils/type';
 import { CategorySearchResults } from 'components/Buyer/BuyerCategoryResult/CategorySearchResult';
 import { convertCategoryEnum } from 'utils/convertCategoryEnum';
 import useIntersectionObserver from 'hooks/useIntersectionObserver';
-//백 연동 시 page에서 상담사 리스트 받아서 뿌려줘야함
+
+///
+///
+///
+
 export const BuyerCategoryResult = () => {
   const navigate = useNavigate();
-  //0 : 최신순 1:인기순 2: 별점순
-  // 바뀔 때마다 useEffect로 request
-  const [sortType, setSortType] = useState<number>(0);
-  // Modal 여부(recoil)
+
+  // using query params to store sorting type
+  const [searchParams, setSearchParams] = useSearchParams();
+
+  // sortType - 0 : 최신순 1:인기순 2: 별점순, 기본값: 0, 최신순
+  const initialSortType =
+    searchParams.get('sort') === 'rating'
+      ? 2
+      : searchParams.get('sort') === 'popular'
+      ? 1
+      : 0;
+  const [sortType, setSortType] = useState<number>(initialSortType);
+
+  // state with opening Modal, lock scroll
   const [isModalOpen, setIsModalOpen] =
     useRecoilState<boolean>(isSortModalOpenState);
-  //scorll 막기
   const setScrollLock = useSetRecoilState(scrollLockState);
-  //const 카테고리 정보, 검색과 동일하게 searchKeyword로 넘겨줌
+
+  // state with store keyword and serach result
   const searchKeyword = useRecoilValue(searchKeywordState);
-  //결과저장
   const [searchData, setSearchData] = useState<SearchResultData[]>([]);
-  //무한스크롤 위한 page num
+
+  //page num for infinite scrol
   const [pageNum, setPageNum] = useState<number>(0);
   const [isLastElem, setIsLastElem] = useState<boolean>(false);
-  const [isLoading, setIsLoading] = useState<boolean>(true); //로딩 state
-  const preventRef = useRef(true); // 중복 방지 옵션
-  //fetch 함수
+
+  // loding spinner
+  const [isLoading, setIsLoading] = useState<boolean>(true);
+  const preventRef = useRef(true);
+
+  // functio with fetch API
   const fetchSearchResults = async (pageIndex: number) => {
     try {
       const body = {
@@ -137,6 +154,8 @@ export const BuyerCategoryResult = () => {
               }}
             />
             <SortModal
+              searchParams={searchParams}
+              setSearchParams={setSearchParams}
               sortType={sortType}
               setSortType={setSortType}
               setPageNum={setPageNum}
diff --git a/src/pages/Buyer/BuyerOpenPaymentDetail.tsx b/src/pages/Buyer/BuyerOpenPaymentDetail.tsx
index 874cc769..84471050 100644
--- a/src/pages/Buyer/BuyerOpenPaymentDetail.tsx
+++ b/src/pages/Buyer/BuyerOpenPaymentDetail.tsx
@@ -3,8 +3,8 @@ import styled from 'styled-components';
 import { Green, Grey1, Grey3, Grey6, LightGreen, White } from 'styles/color';
 import { Body1, Body3, Heading } from 'styles/font';
 import { ReactComponent as Heart } from 'assets/icons/icon-payment-detail-heart.svg';
-import { useLocation, useNavigate, useParams } from 'react-router-dom';
-import { useEffect, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useState } from 'react';
 import { BackIcon, HeaderWrapper } from 'components/Buyer/Common/Header';
 import { postOpenConsult } from 'api/post';
 
diff --git a/src/pages/Buyer/BuyerWriteOpenConsult.tsx b/src/pages/Buyer/BuyerWriteOpenConsult.tsx
index a7b352c5..a7578621 100644
--- a/src/pages/Buyer/BuyerWriteOpenConsult.tsx
+++ b/src/pages/Buyer/BuyerWriteOpenConsult.tsx
@@ -66,7 +66,7 @@ function BuyerWriteOpenConsult() {
       }
     };
     fetchDraftedData();
-  }, []);
+  }, [postId]);
   useEffect(() => {
     if (input === '' || titleInput === '') {
       // 비어 있으면 전송못함
diff --git a/src/pages/Seller/SellerLetterWrite.tsx b/src/pages/Seller/SellerLetterWrite.tsx
index 53c3ab64..74b2f256 100644
--- a/src/pages/Seller/SellerLetterWrite.tsx
+++ b/src/pages/Seller/SellerLetterWrite.tsx
@@ -1,16 +1,13 @@
-import { getDraftsLetter, getLetterRecentType } from 'api/get';
 import { LetterWriteHeader } from 'components/Seller/SellerLetterWrite/LetterWriteHeader';
 import { LetterWriteMainSection } from 'components/Seller/SellerLetterWrite/LetterWriteMainSection';
 import { LetterWriteSuccess } from 'components/Seller/SellerLetterWrite/LetterWriteSuccess';
-import { useEffect, useState } from 'react';
-import { useNavigate, useParams } from 'react-router-dom';
+import { useState } from 'react';
 
 export const SellerLetterWrite = () => {
   // 편지 전송 완료 페이지 띄울지 여부
   const [isSend, setIsSend] = useState<boolean>(false);
   // 셰어로부터 질문 한눈에 보기 여부
   const [isViewQuestion, setIsViewQuestion] = useState<boolean>(false);
-  const navigate = useNavigate();
   return (
     <>
       <LetterWriteHeader

From 228503ee5eef0f0381a76ab83645ce74e8399ae8 Mon Sep 17 00:00:00 2001
From: inyoung <rmdnps10@gmail.com>
Date: Sun, 21 Apr 2024 19:24:47 +0900
Subject: [PATCH 26/35] Chore: delete useless import and styled-components
 error message #228

---
 .../BuyerConsultLetterSection.tsx             |   1 +
 .../BuyerOpenConsult/HotOpenConsultList.tsx   |   3 +-
 .../BuyerOpenConsult/OpenConsultList.tsx      | 146 ++++++++----------
 src/components/Buyer/Common/ConsultCard.tsx   |  10 +-
 src/components/Common/TabA1.tsx               |  26 ++--
 .../SellerConsult/SellerConsultSection.tsx    |  29 ++--
 src/pages/Buyer/BuyerConsult.tsx              |  20 +--
 7 files changed, 113 insertions(+), 122 deletions(-)

diff --git a/src/components/Buyer/BuyerConsult/BuyerConsultLetterSection.tsx b/src/components/Buyer/BuyerConsult/BuyerConsultLetterSection.tsx
index 3f1e7b74..e46a413b 100644
--- a/src/components/Buyer/BuyerConsult/BuyerConsultLetterSection.tsx
+++ b/src/components/Buyer/BuyerConsult/BuyerConsultLetterSection.tsx
@@ -71,6 +71,7 @@ export const BuyerConsultLetterSection = ({
             {cardData.map((value) => {
               return (
                 <ConsultCard
+                  key={value.id}
                   consultStyle={value.consultStyle}
                   id={value.id}
                   latestMessageContent={value.latestMessageContent}
diff --git a/src/components/Buyer/BuyerOpenConsult/HotOpenConsultList.tsx b/src/components/Buyer/BuyerOpenConsult/HotOpenConsultList.tsx
index 0547c401..4be1b6ad 100644
--- a/src/components/Buyer/BuyerOpenConsult/HotOpenConsultList.tsx
+++ b/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}`);
           }}
diff --git a/src/components/Buyer/BuyerOpenConsult/OpenConsultList.tsx b/src/components/Buyer/BuyerOpenConsult/OpenConsultList.tsx
index 67a52516..a1d51a1d 100644
--- a/src/components/Buyer/BuyerOpenConsult/OpenConsultList.tsx
+++ b/src/components/Buyer/BuyerOpenConsult/OpenConsultList.tsx
@@ -1,32 +1,23 @@
-import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
+import React, { useLayoutEffect, useRef, useState } from 'react';
 import styled from 'styled-components';
-import { Green, Grey1, Grey2, Grey3, Grey6 } from 'styles/color';
-import { Body1, Caption1, Caption2 } from 'styles/font';
-import { LoadingSpinner } from 'utils/LoadingSpinner';
-import { ReactComponent as LockIcon } from 'assets/icons/icon-lock.svg';
+import { Grey1, Grey2, Grey6 } from 'styles/color';
+import { Body1, Caption1 } from 'styles/font';
 import { ReactComponent as HeartIcon } from 'assets/icons/icon-heart2.svg';
-import { ReactComponent as HeartEmptyIcon } from 'assets/icons/icon-heart3.svg';
 import { ReactComponent as SaveIcon } from 'assets/icons/icon-save2.svg';
-import { ReactComponent as SaveEmptyIcon } from 'assets/icons/icon-save3.svg';
 import { ReactComponent as CommentIcon } from 'assets/icons/icon-comment.svg';
-import { ReactComponent as CheckIcon } from 'assets/icons/icon-check2.svg';
-import { ReactComponent as WriteIcon } from 'assets/icons/icon-write.svg';
 import { Space } from 'components/Common/Space';
-import { BackDrop } from 'components/Common/BackDrop';
 import { openConsultApiObject } from 'pages/Buyer/BuyerConsult';
-import {
-  getCustomerOpenConsultList,
-  getCustomerPublicConsultList,
-} from 'api/get';
+import { getCustomerPublicConsultList } from 'api/get';
 import { useNavigate } from 'react-router-dom';
 import useIntersectionObserver from 'hooks/useIntersectionObserver';
+import { LoadingSpinner } from 'utils/LoadingSpinner';
 
 function OpenConsultList() {
   const [cardData, setCardData] = useState<openConsultApiObject[]>([]);
   const preventRef = useRef(true);
   const navigate = useNavigate();
   const [isLastElem, setIsLastElem] = useState<boolean>(false);
-  const [isLoading, setIsLoading] = useState<boolean>(false);
+  const [isLoading, setIsLoading] = useState<boolean>(true);
   const onIntersect: IntersectionObserverCallback = async (entry) => {
     if (entry[0].isIntersecting && !isLastElem && preventRef.current) {
       preventRef.current = false;
@@ -77,47 +68,63 @@ function OpenConsultList() {
   useLayoutEffect(() => {
     fetchOpenConsult(0, new Date().toISOString().slice(0, 19));
   }, []);
-  return (
-    <div>
-      <BuyerOpenConsultCardList>
-        {/* 상담카드 부분 */}
-        {cardData.map((item) => (
-          <BuyerOpenConsultCard
-            onClick={() => {
-              navigate(`/open-consult/${item.postId}`);
-            }}
-          >
-            <div className="row1">
-              <Body1>{item.title}</Body1>
-            </div>
-            <Space height="1.2rem" />
-            <div className="row2">{item.content}</div>
-            <div className="row3">
-              <IconItem>
-                <HeartResizeIcon />
-                <Caption1 color={Grey2}>{item.totalLike}</Caption1>
-              </IconItem>
-              <IconItem>
-                <SaveIcon />
-                <Caption1 color={Grey2}>{item.totalScrap}</Caption1>
-              </IconItem>
-              <IconItem>
-                <CommentIcon />
-                <Caption1 color={Grey2}>{item.totalComment}</Caption1>
-              </IconItem>
-            </div>
-            <TimeLeft>{item.updatedAt}</TimeLeft>
-          </BuyerOpenConsultCard>
-        ))}
-        {!isLastElem ? (
-          <div ref={setTarget} style={{ height: '3.5rem' }} />
-        ) : (
-          <div style={{ height: '3.5rem' }} />
-        )}
-        {/* 상담카드 부분 */}
-      </BuyerOpenConsultCardList>
-    </div>
-  );
+  if (isLoading) {
+    return (
+      <div
+        style={{
+          height: '70vh',
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+        }}
+      >
+        <LoadingSpinner />
+      </div>
+    );
+  } else {
+    return (
+      <div>
+        <BuyerOpenConsultCardList>
+          {/* 상담카드 부분 */}
+          {cardData.map((item) => (
+            <BuyerOpenConsultCard
+              onClick={() => {
+                navigate(`/open-consult/${item.postId}`);
+              }}
+              key={item.postId}
+            >
+              <div className="row1">
+                <Body1>{item.title}</Body1>
+              </div>
+              <Space height="1.2rem" />
+              <div className="row2">{item.content}</div>
+              <div className="row3">
+                <IconItem>
+                  <HeartResizeIcon />
+                  <Caption1 color={Grey2}>{item.totalLike}</Caption1>
+                </IconItem>
+                <IconItem>
+                  <SaveIcon />
+                  <Caption1 color={Grey2}>{item.totalScrap}</Caption1>
+                </IconItem>
+                <IconItem>
+                  <CommentIcon />
+                  <Caption1 color={Grey2}>{item.totalComment}</Caption1>
+                </IconItem>
+              </div>
+              <TimeLeft>{item.updatedAt}</TimeLeft>
+            </BuyerOpenConsultCard>
+          ))}
+          {!isLastElem ? (
+            <div ref={setTarget} style={{ height: '3.5rem' }} />
+          ) : (
+            <div style={{ height: '3.5rem' }} />
+          )}
+          {/* 상담카드 부분 */}
+        </BuyerOpenConsultCardList>
+      </div>
+    );
+  }
 }
 const BuyerOpenConsultCardList = styled.div`
   display: flex;
@@ -177,13 +184,6 @@ const HeartResizeIcon = styled(HeartIcon)`
   height: 2rem;
 `;
 
-const PrivateSign = styled.div`
-  display: flex;
-  position: absolute;
-  top: 1.95rem;
-  right: 1.6rem;
-`;
-
 const TimeLeft = styled.div`
   font-size: 1.2rem;
   font-weight: 400;
@@ -193,24 +193,4 @@ 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 3.3rem;
-  box-sizing: border-box;
-  display: flex;
-  position: fixed;
-  bottom: 3.5rem;
-  flex-direction: column;
-  @media (min-width: 768px) {
-    width: 375px;
-  }
-`;
 export default OpenConsultList;
diff --git a/src/components/Buyer/Common/ConsultCard.tsx b/src/components/Buyer/Common/ConsultCard.tsx
index 6bd45fc7..9ff979fa 100644
--- a/src/components/Buyer/Common/ConsultCard.tsx
+++ b/src/components/Buyer/Common/ConsultCard.tsx
@@ -105,11 +105,11 @@ export const ConsultCard = ({
               ) : null}
             </div>
             {latestMessageContent !== null ? (
-              <CardText color={isBlur ? Grey3 : Grey1}>
+              <CardText $color={isBlur ? Grey3 : Grey1}>
                 {latestMessageContent}
               </CardText>
             ) : (
-              <CardText color={Grey1}>
+              <CardText $color={Grey1}>
                 {opponentNickname}님께 고민 내용을 남겨 주세요.{' '}
                 {opponentNickname}님이 24시간 이내 답장을 드릴 거예요.
               </CardText>
@@ -151,7 +151,7 @@ const Unread = styled.div`
   justify-content: center;
   align-items: center;
   border-radius: 0.4rem;
-  background-color: ${Green};
+  background-$color: ${Green};
   width: 1.9rem;
   height: 1.9rem;
   right: 0;
@@ -184,14 +184,14 @@ const ConsultStateBox = styled.div`
     align-items: center;
   }
 `;
-export const CardText = styled.div<{ color: string }>`
+export const CardText = styled.div<{ $color: string }>`
   width: 100%;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   overflow: hidden;
   -webkit-line-clamp: 2;
   font-family: Pretendard;
-  color: ${(props) => props.color};
+  color: ${(props) => props.$color};
   font-size: 1.4rem;
   font-weight: 400;
   line-height: 155%;
diff --git a/src/components/Common/TabA1.tsx b/src/components/Common/TabA1.tsx
index 64a1f2db..b8b4ef1c 100644
--- a/src/components/Common/TabA1.tsx
+++ b/src/components/Common/TabA1.tsx
@@ -13,7 +13,7 @@ interface TabA1Props {
 }
 export const TabA1 = ({ isBuyer, initState }: TabA1Props) => {
   const navigate = useNavigate();
-  const [tabState, setTabState] = useState<number>();
+  const [$tabState, setTabState] = useState<number>();
   const [color, setColor] = useState<string>();
   const navigateOpenConsult = async () => {
     try {
@@ -37,7 +37,7 @@ export const TabA1 = ({ isBuyer, initState }: TabA1Props) => {
   return (
     <Wrapper>
       <TabButton
-        tabState={1}
+        $tabState={1}
         onClick={() => {
           setTabState(1);
           if (isBuyer) {
@@ -47,7 +47,7 @@ export const TabA1 = ({ isBuyer, initState }: TabA1Props) => {
           }
         }}
       >
-        {tabState === 1 ? (
+        {$tabState === 1 ? (
           <>
             <Subtitle color={color}>홈</Subtitle>
             <UnderLineBuyer />
@@ -57,7 +57,7 @@ export const TabA1 = ({ isBuyer, initState }: TabA1Props) => {
         )}
       </TabButton>
       <TabButton
-        tabState={2}
+        $tabState={2}
         onClick={() => {
           setTabState(2);
           if (isBuyer) {
@@ -67,7 +67,7 @@ export const TabA1 = ({ isBuyer, initState }: TabA1Props) => {
           }
         }}
       >
-        {tabState === 2 ? (
+        {$tabState === 2 ? (
           <>
             <Subtitle color={color}>상담</Subtitle>
             <UnderLineBuyer />
@@ -77,7 +77,7 @@ export const TabA1 = ({ isBuyer, initState }: TabA1Props) => {
         )}
       </TabButton>
       <TabButton
-        tabState={3}
+        $tabState={3}
         onClick={() => {
           setTabState(3);
           if (isBuyer) {
@@ -87,7 +87,7 @@ export const TabA1 = ({ isBuyer, initState }: TabA1Props) => {
           }
         }}
       >
-        {tabState === 3 ? (
+        {$tabState === 3 ? (
           <>
             <Subtitle color={color}>공개상담</Subtitle>
             <UnderLineBuyerBig />
@@ -96,8 +96,8 @@ export const TabA1 = ({ isBuyer, initState }: TabA1Props) => {
           <Subtitle color={Black}>공개상담</Subtitle>
         )}
       </TabButton>
-      <TabButton tabState={4}>
-        {tabState === 4 ? (
+      <TabButton $tabState={4}>
+        {$tabState === 4 ? (
           <>
             <Subtitle color={color}>내 정보</Subtitle>
             <UnderLineBuyer />
@@ -132,15 +132,15 @@ const Wrapper = styled.nav`
   background-color: white;
   z-index: 999;
 `;
-const TabButton = styled.div<{ tabState: number }>`
+const TabButton = styled.div<{ $tabState: number }>`
   display: flex;
   flex-direction: column;
   width: ${(props) =>
-    props?.tabState === 1
+    props?.$tabState === 1
       ? '8.8rem'
-      : props?.tabState === 2
+      : props?.$tabState === 2
       ? '8.2rem'
-      : props?.tabState === 3
+      : props?.$tabState === 3
       ? '10.9rem'
       : '9.6rem'};
   align-items: center;
diff --git a/src/components/Seller/SellerConsult/SellerConsultSection.tsx b/src/components/Seller/SellerConsult/SellerConsultSection.tsx
index 5c9e96cd..d64dc89c 100644
--- a/src/components/Seller/SellerConsult/SellerConsultSection.tsx
+++ b/src/components/Seller/SellerConsult/SellerConsultSection.tsx
@@ -10,12 +10,20 @@ 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;
+  $isActive: boolean;
+  $isLong?: boolean;
 }
 
+//
+//
+//
+
 export const SellerConsultSection = () => {
   const {
     consultType,
@@ -30,27 +38,26 @@ export const SellerConsultSection = () => {
     setIsChecked,
   } = useConsultParams();
 
-  // 모달 열지 말지
   const setIsModalOpen = useSetRecoilState<boolean>(isConsultModalOpenState);
   return (
     <>
       <ConsultSortingMenu>
         <div className="row1">
           <ConsultType
-            isActive={consultType === 'letter'}
+            $isActive={consultType === 'letter'}
             onClick={handleLetterClick}
           >
             편지
           </ConsultType>
           <ConsultType
-            isActive={consultType === 'chat'}
+            $isActive={consultType === 'chat'}
             onClick={handleChatClick}
           >
             채팅
           </ConsultType>
           <ConsultType
-            isLong={true}
-            isActive={consultType === 'open-consult'}
+            $isLong={true}
+            $isActive={consultType === 'open-consult'}
             onClick={handleOpenConsultClick}
           >
             공개상담
@@ -135,7 +142,7 @@ const ConsultSortingMenu = styled.div`
 
 const ConsultType = styled.div<ConsultTypeProps>`
   display: flex;
-  width: ${(props) => (props.isLong ? '8rem' : '5.6rem')};
+  width: ${(props) => (props.$isLong ? '8rem' : '5.6rem')};
   height: 3.4rem;
   cursor: pointer;
   justify-content: center;
@@ -145,8 +152,8 @@ const ConsultType = styled.div<ConsultTypeProps>`
   font-style: normal;
   font-weight: 400;
   line-height: 110%;
-  background: ${(props) => (props.isActive ? LightGreen : Grey6)};
-  color: ${(props) => (props.isActive ? Green : Black)};
+  background: ${(props) => (props.$isActive ? LightGreen : Grey6)};
+  color: ${(props) => (props.$isActive ? Green : Black)};
   margin-top: 0.2rem;
 `;
 const SortingType = styled.div`
diff --git a/src/pages/Buyer/BuyerConsult.tsx b/src/pages/Buyer/BuyerConsult.tsx
index 643654e6..1d7d586a 100644
--- a/src/pages/Buyer/BuyerConsult.tsx
+++ b/src/pages/Buyer/BuyerConsult.tsx
@@ -50,9 +50,7 @@ export interface openConsultApiObject {
 
 export const BuyerConsult = () => {
   const navigate = useNavigate();
-
   const sortList = ['최근순', '읽지않은순'];
-
   const {
     consultType,
     sortType,
@@ -85,7 +83,7 @@ export const BuyerConsult = () => {
         <div className="select">
           <div className="select-button">
             <SelectButton
-              isSelected={consultType === 'letter'}
+              $isSelected={consultType === 'letter'}
               onClick={handleLetterClick}
             >
               <Button2 color={consultType === 'letter' ? Green : Grey1}>
@@ -93,7 +91,7 @@ export const BuyerConsult = () => {
               </Button2>
             </SelectButton>
             <SelectButton
-              isSelected={consultType === 'chat'}
+              $isSelected={consultType === 'chat'}
               onClick={handleChatClick}
             >
               <Button2 color={consultType === 'chat' ? Green : Grey1}>
@@ -101,7 +99,7 @@ export const BuyerConsult = () => {
               </Button2>
             </SelectButton>
             <SelectButton
-              isSelected={consultType === 'open-consult'}
+              $isSelected={consultType === 'open-consult'}
               onClick={handleOpenConsultClick}
             >
               <Button2 color={consultType === 'open-consult' ? Green : Grey1}>
@@ -163,10 +161,14 @@ export const BuyerConsult = () => {
 };
 const Wrapper = styled.div`
   .options {
-    padding: 0.8rem 2rem 0rem;
+    padding: 0.8rem 2rem 1.6rem;
     display: flex;
     flex-direction: column;
     gap: 1.2rem;
+    position: sticky;
+    top: 10.5rem;
+    background-color: white;
+    z-index: 10;
   }
   .select {
     display: flex;
@@ -177,7 +179,7 @@ const Wrapper = styled.div`
   .select-wrapper {
     display: flex;
     gap: 0.4rem;
-    cursor: pointer;
+    cursor: pointer;  
   }
   .select-button {
     display: flex;
@@ -188,8 +190,8 @@ const Wrapper = styled.div`
     gap: 0.4rem;
   }
 `;
-const SelectButton = styled.div<{ isSelected: boolean; isLong?: boolean }>`
-  background-color: ${(props) => (props.isSelected ? LightGreen : Grey6)};
+const SelectButton = styled.div<{ $isSelected: boolean; $isLong?: boolean }>`
+  background-color: ${(props) => (props.$isSelected ? LightGreen : Grey6)};
   cursor: pointer;
   padding: 0.8rem 1.6rem;
   border-radius: 1.2rem;

From 5b045b2f9de32a396fc4a7f5ac760d4e564f8e71 Mon Sep 17 00:00:00 2001
From: inyoung <rmdnps10@gmail.com>
Date: Sun, 21 Apr 2024 19:45:57 +0900
Subject: [PATCH 27/35] Feat: Fix the options tab in the buyer and counselor
 side consultation tab with a sticky container #224

---
 .../BuyerConsult/BuyerConsultChatSection.tsx  |  3 +-
 .../BuyerConsultLetterSection.tsx             |  3 +-
 .../BuyerConsult/BuyerOpenConsultSection.tsx  |  8 ++-
 .../SellerConsult/SellerConsultSection.tsx    | 63 +++++++++++--------
 src/pages/Seller/SellerConsult.tsx            |  8 +--
 5 files changed, 48 insertions(+), 37 deletions(-)

diff --git a/src/components/Buyer/BuyerConsult/BuyerConsultChatSection.tsx b/src/components/Buyer/BuyerConsult/BuyerConsultChatSection.tsx
index b90412ce..35214f48 100644
--- a/src/components/Buyer/BuyerConsult/BuyerConsultChatSection.tsx
+++ b/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';
 
 //
 //
@@ -261,6 +262,7 @@ export const BuyerConsultChatSection = ({
               />
             );
           })}
+          <Space height="4rem" />
         </BuyerConsultChatSectionWrapper>
       );
     } else {
@@ -279,7 +281,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;
diff --git a/src/components/Buyer/BuyerConsult/BuyerConsultLetterSection.tsx b/src/components/Buyer/BuyerConsult/BuyerConsultLetterSection.tsx
index e46a413b..f0c4f329 100644
--- a/src/components/Buyer/BuyerConsult/BuyerConsultLetterSection.tsx
+++ b/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;
@@ -86,6 +87,7 @@ export const BuyerConsultLetterSection = ({
                 />
               );
             })}
+            <Space height="4rem" />
           </BuyerConsultLetterSectionWrapper>
         ) : (
           <EmptyWrapper>
@@ -103,7 +105,6 @@ const BuyerConsultLetterSectionWrapper = styled.section`
   flex-direction: column;
   gap: 0.8rem;
   align-items: center;
-  padding: 1.2rem 0;
 `;
 
 const EmptyIcon = styled(Empty)`
diff --git a/src/components/Buyer/BuyerConsult/BuyerOpenConsultSection.tsx b/src/components/Buyer/BuyerConsult/BuyerOpenConsultSection.tsx
index bc848908..2fdf56f6 100644
--- a/src/components/Buyer/BuyerConsult/BuyerOpenConsultSection.tsx
+++ b/src/components/Buyer/BuyerConsult/BuyerOpenConsultSection.tsx
@@ -1,7 +1,7 @@
 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 } from 'utils/atom';
@@ -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;
diff --git a/src/components/Seller/SellerConsult/SellerConsultSection.tsx b/src/components/Seller/SellerConsult/SellerConsultSection.tsx
index d64dc89c..fc41de02 100644
--- a/src/components/Seller/SellerConsult/SellerConsultSection.tsx
+++ b/src/components/Seller/SellerConsult/SellerConsultSection.tsx
@@ -10,6 +10,7 @@ import SellerLetterList from './SellerLetterList';
 import SellerChatList from './SellerChatList';
 import SellerOpenConsultList from './SellerOpenConsultList';
 import { useConsultParams } from 'hooks/useConsultParams';
+import { Space } from 'components/Common/Space';
 
 //
 //
@@ -92,38 +93,48 @@ export const SellerConsultSection = () => {
           </div>
         </div>
       </ConsultSortingMenu>
-      {consultType === 'letter' ? (
-        <SellerLetterList
-          sortType={sortType}
-          setSortType={setSortType}
-          searchParams={searchParams}
-          setSearchParams={setSearchParams}
-          isChecked={isChecked}
-        />
-      ) : consultType === 'chat' ? (
-        <SellerChatList
-          sortType={sortType}
-          setSortType={setSortType}
-          searchParams={searchParams}
-          setSearchParams={setSearchParams}
-          isChecked={isChecked}
-        />
-      ) : (
-        <SellerOpenConsultList
-          sortType={sortType}
-          setSortType={setSortType}
-          searchParams={searchParams}
-          setSearchParams={setSearchParams}
-        />
-      )}
+      <section
+        className="consult-list"
+        style={{ height: 'calc(100vh - 19.3rem)', overflow: 'scroll' }}
+      >
+        {consultType === 'letter' ? (
+          <SellerLetterList
+            sortType={sortType}
+            setSortType={setSortType}
+            searchParams={searchParams}
+            setSearchParams={setSearchParams}
+            isChecked={isChecked}
+          />
+        ) : consultType === 'chat' ? (
+          <SellerChatList
+            sortType={sortType}
+            setSortType={setSortType}
+            searchParams={searchParams}
+            setSearchParams={setSearchParams}
+            isChecked={isChecked}
+          />
+        ) : (
+          <SellerOpenConsultList
+            sortType={sortType}
+            setSortType={setSortType}
+            searchParams={searchParams}
+            setSearchParams={setSearchParams}
+          />
+        )}
+        <Space height='4rem'/>
+      </section>
     </>
   );
 };
-const ConsultSortingMenu = styled.div`
+const ConsultSortingMenu = styled.section`
   display: flex;
   flex-direction: column;
-  margin: 0.8rem 2rem 1.2rem;
+  padding: 0.8rem 2rem 1.2rem;
   gap: 1.2rem;
+  position: sticky;
+  top: 10.4rem;
+  z-index: 10;
+  background-color: white;
   .row1 {
     display: flex;
     gap: 1.2rem;
diff --git a/src/pages/Seller/SellerConsult.tsx b/src/pages/Seller/SellerConsult.tsx
index a264a6bd..9a127cbb 100644
--- a/src/pages/Seller/SellerConsult.tsx
+++ b/src/pages/Seller/SellerConsult.tsx
@@ -14,12 +14,8 @@ export const SellerConsult = () => {
         }}
       />
       <TabA1 isBuyer={false} initState={2} />
-      <section
-        className="consult-container"
-        style={{ height: 'calc(100vh - 10.4rem)', overflow: 'scroll' }}
-      >
-        <SellerConsultSection />
-      </section>
+
+      <SellerConsultSection />
     </>
   );
 };

From b3802b0fecd8a7a37b3d39c3f93a50f5d4e55a52 Mon Sep 17 00:00:00 2001
From: inyoung <rmdnps10@gmail.com>
Date: Sun, 21 Apr 2024 22:03:04 +0900
Subject: [PATCH 28/35] =?UTF-8?q?Feat:=20=EB=A7=88=EC=9D=B8=EB=8D=94=20?=
 =?UTF-8?q?=EC=88=98=EC=9D=B5=20=EA=B4=80=EB=A6=AC=20=ED=8E=98=EC=9D=B4?=
 =?UTF-8?q?=EC=A7=80=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=8A=A4=ED=83=80?=
 =?UTF-8?q?=EC=9D=BC=20=EC=88=98=EC=A0=95=20=EB=B0=8F=20=EB=AC=B4=ED=95=9C?=
 =?UTF-8?q?=20=EC=8A=A4=ED=81=AC=EB=A1=A4=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Common/TabA1.tsx               |  12 +-
 .../CompleteApplyPopup.tsx                    |  18 +-
 .../ManagementHeader.tsx                      |   7 +-
 .../ManagementStatusSelector.tsx              |  24 ++-
 .../SellerCalculateCard.tsx                   |  22 ++-
 .../SellerManagementModal.tsx                 |  13 +-
 .../SellerConsult/SellerOpenConsultList.tsx   |   2 -
 .../SellerHome/ConsultReviewsSection.tsx      |   5 +-
 .../Seller/SellerCalculateManagement.tsx      | 157 ++++++++++++------
 9 files changed, 181 insertions(+), 79 deletions(-)

diff --git a/src/components/Common/TabA1.tsx b/src/components/Common/TabA1.tsx
index b8b4ef1c..a4e78f6e 100644
--- a/src/components/Common/TabA1.tsx
+++ b/src/components/Common/TabA1.tsx
@@ -13,7 +13,7 @@ interface TabA1Props {
 }
 export const TabA1 = ({ isBuyer, initState }: TabA1Props) => {
   const navigate = useNavigate();
-  const [$tabState, setTabState] = useState<number>();
+  const [tabState, setTabState] = useState<number>();
   const [color, setColor] = useState<string>();
   const navigateOpenConsult = async () => {
     try {
@@ -33,7 +33,7 @@ export const TabA1 = ({ isBuyer, initState }: TabA1Props) => {
     } else {
       setColor(Green);
     }
-  }, []);
+  }, [initState, isBuyer]);
   return (
     <Wrapper>
       <TabButton
@@ -47,7 +47,7 @@ export const TabA1 = ({ isBuyer, initState }: TabA1Props) => {
           }
         }}
       >
-        {$tabState === 1 ? (
+        {tabState === 1 ? (
           <>
             <Subtitle color={color}>홈</Subtitle>
             <UnderLineBuyer />
@@ -67,7 +67,7 @@ export const TabA1 = ({ isBuyer, initState }: TabA1Props) => {
           }
         }}
       >
-        {$tabState === 2 ? (
+        {tabState === 2 ? (
           <>
             <Subtitle color={color}>상담</Subtitle>
             <UnderLineBuyer />
@@ -87,7 +87,7 @@ export const TabA1 = ({ isBuyer, initState }: TabA1Props) => {
           }
         }}
       >
-        {$tabState === 3 ? (
+        {tabState === 3 ? (
           <>
             <Subtitle color={color}>공개상담</Subtitle>
             <UnderLineBuyerBig />
@@ -97,7 +97,7 @@ export const TabA1 = ({ isBuyer, initState }: TabA1Props) => {
         )}
       </TabButton>
       <TabButton $tabState={4}>
-        {$tabState === 4 ? (
+        {tabState === 4 ? (
           <>
             <Subtitle color={color}>내 정보</Subtitle>
             <UnderLineBuyer />
diff --git a/src/components/Seller/SellerCalculateManagement/CompleteApplyPopup.tsx b/src/components/Seller/SellerCalculateManagement/CompleteApplyPopup.tsx
index 63ac89d1..9a8003ee 100644
--- a/src/components/Seller/SellerCalculateManagement/CompleteApplyPopup.tsx
+++ b/src/components/Seller/SellerCalculateManagement/CompleteApplyPopup.tsx
@@ -4,20 +4,34 @@ import React from 'react';
 import styled from 'styled-components';
 import { Grey4 } from 'styles/color';
 import { Body1, Body3 } from 'styles/font';
+
+//
+//
+//
+
 interface CompleteApplyPopupProps {
   name: string;
   date: string;
+  consultType: string;
   setIsCompleteApplyManage: React.Dispatch<React.SetStateAction<boolean>>;
 }
+
+//
+//
+//
+
 function CompleteApplyPopup({
   name = '김고민',
-  date = '2023.02.02',
+  date = '2001.12.15',
+  consultType = '무슨',
   setIsCompleteApplyManage,
 }: CompleteApplyPopupProps) {
   return (
     <CompleteApplyPopupBox>
       <Body1>정산 신청이 완료되었어요!</Body1>
-      <Body3 color={Grey4}>{name}과의 편지 상담 2023.12.23</Body3>
+      <Body3 color={Grey4}>
+        {name}과의 {consultType} 상담 {date}
+      </Body3>
       <Space height="2rem" />
       <Button
         text="닫기"
diff --git a/src/components/Seller/SellerCalculateManagement/ManagementHeader.tsx b/src/components/Seller/SellerCalculateManagement/ManagementHeader.tsx
index e75cf429..c07f6b78 100644
--- a/src/components/Seller/SellerCalculateManagement/ManagementHeader.tsx
+++ b/src/components/Seller/SellerCalculateManagement/ManagementHeader.tsx
@@ -1,6 +1,5 @@
 import styled from 'styled-components';
 import { ReactComponent as LeftArrowIcon } from 'assets/icons/left-arrow.svg';
-import { ReactComponent as MoreIcon } from 'assets/icons/icon-more2.svg';
 import { Heading } from 'styles/font';
 import { useNavigate } from 'react-router-dom';
 export const ManagementHeader = () => {
@@ -19,10 +18,12 @@ export const ManagementHeader = () => {
   );
 };
 
-const ManagementHeaderWrapper = styled.div`
+const ManagementHeaderWrapper = styled.header`
   display: flex;
   align-items: center;
   justify-content: center;
   height: 5.2rem;
-  position: relative;
+  position: sticky;
+  background-color: white;
+  top: 0;
 `;
diff --git a/src/components/Seller/SellerCalculateManagement/ManagementStatusSelector.tsx b/src/components/Seller/SellerCalculateManagement/ManagementStatusSelector.tsx
index db384412..9535e469 100644
--- a/src/components/Seller/SellerCalculateManagement/ManagementStatusSelector.tsx
+++ b/src/components/Seller/SellerCalculateManagement/ManagementStatusSelector.tsx
@@ -5,16 +5,21 @@ import { Button2 } from 'styles/font';
 import { ReactComponent as DownArrowIcon } from 'assets/icons/sorting-down-arrow.svg';
 import { useSetRecoilState } from 'recoil';
 import { isConsultModalOpenState } from 'utils/atom';
-
+//
+//
+//
 interface ManagementStatusSelectorProps {
   manageStatus: string;
   setManageStatus: React.Dispatch<React.SetStateAction<string>>;
   sortType: number;
 }
+//
+//
+//
 export const ManagementStatusSelector = ({
   manageStatus,
   setManageStatus,
-  sortType
+  sortType,
 }: ManagementStatusSelectorProps) => {
   const setIsModalOpen = useSetRecoilState(isConsultModalOpenState);
   return (
@@ -49,7 +54,7 @@ export const ManagementStatusSelector = ({
         }}
         color={manageStatus === '정산 예정' ? White : Black}
         buttonTextType={2}
-        width="7.8rem"
+        width="8.4rem"
         height="3.4rem"
       />
       <SortingType
@@ -58,8 +63,12 @@ export const ManagementStatusSelector = ({
         }}
       >
         <Button2 color={Grey3}>
-          {sortType ===0 ?  "최근 일주일" : sortType===1 ? "최근 1개월" : "전체"}
-          </Button2>
+          {sortType === 0
+            ? '최근 일주일'
+            : sortType === 1
+            ? '최근 1개월'
+            : '전체'}
+        </Button2>
         <DownArrowIcon />
       </SortingType>
     </ManagementStatusSelectorWrapper>
@@ -68,9 +77,12 @@ export const ManagementStatusSelector = ({
 const ManagementStatusSelectorWrapper = styled.div`
   display: flex;
   gap: 0.8rem;
-  padding: 0.4rem 2rem;
+  padding: 0.8rem 2rem;
   align-items: center;
   border-bottom: 1px solid ${Grey6};
+  position: sticky;
+  top: 5.2rem;
+  background-color: white;
 `;
 
 const SortingType = styled.div`
diff --git a/src/components/Seller/SellerCalculateManagement/SellerCalculateCard.tsx b/src/components/Seller/SellerCalculateManagement/SellerCalculateCard.tsx
index eb6b2a36..17d228fd 100644
--- a/src/components/Seller/SellerCalculateManagement/SellerCalculateCard.tsx
+++ b/src/components/Seller/SellerCalculateManagement/SellerCalculateCard.tsx
@@ -4,7 +4,6 @@ import styled from 'styled-components';
 import { Grey3, Grey6, Green, White } from 'styles/color';
 import { Body1, Body3 } from 'styles/font';
 import CompleteApplyPopup from './CompleteApplyPopup';
-import { useState } from 'react';
 import { BackDrop } from 'components/Common/BackDrop';
 
 interface SellerCalulateCardProps {
@@ -15,7 +14,7 @@ interface SellerCalulateCardProps {
   commission: number;
   paymentDate: string;
   paymentAccount: string;
-  id: string;
+  id: number;
   calculateActivate: boolean;
   isShowPopup: boolean;
   setIsShowPopup: any;
@@ -34,9 +33,21 @@ export const SellerCalulateCard = ({
   isShowPopup,
   setIsShowPopup,
 }: SellerCalulateCardProps) => {
-  const applyManagement = async (id: string) => {
-    await patchApplyPayments(id);
-    setIsShowPopup(true);
+  const applyManagement = async (id: number) => {
+    const res: any = await patchApplyPayments(id);
+    try {
+      if (res.status === 200) {
+        setIsShowPopup(true);
+      } else if (res?.response.status === 400) {
+        alert('정산 예정이 아닌 정산에 대한 요청입니다.');
+      } else if (res?.response.status === 403) {
+        alert('신청 권한이 없는 정산에 대한 요청입니다.');
+      } else if (res?.response.status === 404) {
+        alert('존재하지 않은 정산 정보입니다.');
+      }
+    } catch (err) {
+      alert(err);
+    }
   };
 
   return (
@@ -45,6 +56,7 @@ export const SellerCalulateCard = ({
       {isShowPopup && (
         <CompleteApplyPopup
           name={customerName}
+          consultType={consultType}
           date={paymentDate}
           setIsCompleteApplyManage={setIsShowPopup}
         />
diff --git a/src/components/Seller/SellerCalculateManagement/SellerManagementModal.tsx b/src/components/Seller/SellerCalculateManagement/SellerManagementModal.tsx
index 4622034a..33746310 100644
--- a/src/components/Seller/SellerCalculateManagement/SellerManagementModal.tsx
+++ b/src/components/Seller/SellerCalculateManagement/SellerManagementModal.tsx
@@ -1,16 +1,25 @@
 import { ReactComponent as CheckIcon } from 'assets/icons/icon-modal-check.svg';
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 import { useRecoilValue } from 'recoil';
 import { isConsultModalOpenState } from 'utils/atom';
 import { Green, Grey1, Grey4, Grey6 } from 'styles/color';
 import { Body1 } from 'styles/font';
 import styled, { keyframes } from 'styled-components';
+
+//
+//
+//
+
 interface SellerManagementModalProps {
   sortType: number;
   setSortType: React.Dispatch<React.SetStateAction<number>>;
   setIsModalOpen: React.Dispatch<React.SetStateAction<boolean>>;
 }
 
+//
+//
+//
+
 export const SellerManagementModal = ({
   sortType,
   setSortType,
@@ -18,8 +27,6 @@ export const SellerManagementModal = ({
 }: SellerManagementModalProps) => {
   //modal 여부
   const isModalOpen = useRecoilValue(isConsultModalOpenState);
-  //여기서 unmount 시 sortType 바꾸고 새로 request
-  //바뀌고 unmount 될 때 sortType 바꾸기 위해 따로 정의
   const [modalSortType, setModalSortType] = useState<number>(sortType);
 
   return (
diff --git a/src/components/Seller/SellerConsult/SellerOpenConsultList.tsx b/src/components/Seller/SellerConsult/SellerOpenConsultList.tsx
index 142fa4b8..32cdc1e7 100644
--- a/src/components/Seller/SellerConsult/SellerOpenConsultList.tsx
+++ b/src/components/Seller/SellerConsult/SellerOpenConsultList.tsx
@@ -4,9 +4,7 @@ import { Green, Grey1, Grey2, Grey3, Grey6, Red, White } from 'styles/color';
 import { Body1, Caption1, Caption2, Heading } from 'styles/font';
 import { ReactComponent as LockIcon } from 'assets/icons/icon-lock.svg';
 import { ReactComponent as HeartIcon } from 'assets/icons/icon-heart2.svg';
-import { ReactComponent as HeartEmptyIcon } from 'assets/icons/icon-heart3.svg';
 import { ReactComponent as SaveIcon } from 'assets/icons/icon-save2.svg';
-import { ReactComponent as SaveEmptyIcon } from 'assets/icons/icon-save3.svg';
 import { ReactComponent as CommentIcon } from 'assets/icons/icon-comment.svg';
 import { ReactComponent as CheckIcon } from 'assets/icons/icon-check2.svg';
 import { Space } from 'components/Common/Space';
diff --git a/src/components/Seller/SellerHome/ConsultReviewsSection.tsx b/src/components/Seller/SellerHome/ConsultReviewsSection.tsx
index 30219c54..b5942b0b 100644
--- a/src/components/Seller/SellerHome/ConsultReviewsSection.tsx
+++ b/src/components/Seller/SellerHome/ConsultReviewsSection.tsx
@@ -1,14 +1,12 @@
 import { ContentTag } from 'pages/Seller/SellerHome';
 import styled from 'styled-components';
 import { Black, Grey3, Grey6, Red } from 'styles/color';
-import { Body1, Body2, Body3, Body4, Heading, Subtitle } from 'styles/font';
+import { Body1, Body2, Body3, Subtitle } from 'styles/font';
 import { ReactComponent as RightArrow } from 'assets/icons/right-arrow.svg';
-import { ReactComponent as ReviewHeart } from 'assets/icons/review-heart.svg';
 import { useNavigate } from 'react-router-dom';
 import { useEffect, useState } from 'react';
 import { getMinderReviewsHome } from 'api/get';
 import { HeartRate } from 'utils/HeartRate';
-// 섹션 안에서 axios 요청
 
 interface ReviewData {
   comment: string;
@@ -55,6 +53,7 @@ export const ConsultReviewSection = () => {
         ) : (
           reviewData?.map((item) => (
             <ConsultReview
+              key={item.reviewId}
               onClick={() => {
                 navigate('/minder/mypage/review');
               }}
diff --git a/src/pages/Seller/SellerCalculateManagement.tsx b/src/pages/Seller/SellerCalculateManagement.tsx
index 6b61ee80..d64b8130 100644
--- a/src/pages/Seller/SellerCalculateManagement.tsx
+++ b/src/pages/Seller/SellerCalculateManagement.tsx
@@ -1,9 +1,9 @@
 import { ManagementHeader } from 'components/Seller/SellerCalculateManagement/ManagementHeader';
 import styled from 'styled-components';
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { ManagementStatusSelector } from 'components/Seller/SellerCalculateManagement/ManagementStatusSelector';
 import { Heading, Subtitle } from 'styles/font';
-import { Green, Red } from 'styles/color';
+import { Red } from 'styles/color';
 import { SellerCalulateCard } from 'components/Seller/SellerCalculateManagement/SellerCalculateCard';
 import { NoCalculationGraphic } from 'components/Seller/SellerCalculateManagement/NoCalculationGraphic';
 import { useRecoilState, useSetRecoilState } from 'recoil';
@@ -12,16 +12,23 @@ import { SellerManagementModal } from 'components/Seller/SellerCalculateManageme
 import { getPaymentsMinder } from 'api/get';
 import { useNavigate } from 'react-router-dom';
 import { LoadingSpinner } from 'utils/LoadingSpinner';
+import useIntersectionObserver from 'hooks/useIntersectionObserver';
 
+///
+///
+///
 const manageStatusMap = {
   '정산 중': 'SETTLEMENT_ONGOING',
   '정산 예정': 'SETTLEMENT_WAITING',
   완료: 'SETTLEMENT_COMPLETE',
 };
-
 const sortTypeMap = ['WEEK', 'MONTH', 'ALL'];
+
+///
+///
+///
 interface ManageItem {
-  paymentId: string;
+  paymentId: number;
   nickname: string;
   isChat: boolean;
   profit: number;
@@ -32,11 +39,14 @@ interface ManageItem {
   total: number;
 }
 type ManageList = ManageItem[];
+
+///
+///
+///
+
 export const SellerCaculateManagement = () => {
   // 상단 탭의 상태
   const [manageStatus, setManageStatus] = useState<string>('완료');
-  // 내역 없음 여부
-  const [isNoCalculatoin, setIsNoCalculation] = useState<boolean>(false);
   // 드롭다운 메뉴, 최근 일주일 : 0 , 최근 1개월 : 1, 전체 : 2
   const [sortType, setSortType] = useState<number>(0);
   const [isModalOpen, setIsModalOpen] = useRecoilState<boolean>(
@@ -44,38 +54,80 @@ export const SellerCaculateManagement = () => {
   );
   //scorll 막기
   const setScrollLock = useSetRecoilState(scrollLockState);
+  const preventRef = useRef(true);
+
+  const onIntersect: IntersectionObserverCallback = async (entry) => {
+    if (entry[0].isIntersecting && !isLastElem && preventRef.current) {
+      preventRef.current = false;
+      await fetchManagements(
+        managementList[managementList.length - 1].paymentId,
+      );
+      preventRef.current = true;
+    }
+  };
+  const { setTarget } = useIntersectionObserver({
+    root: null,
+    rootMargin: '0px',
+    threshold: 0.8,
+    onIntersect,
+  });
 
+  const [isLastElem, setIsLastElem] = useState<boolean>(false);
   const [managementList, setManagementList] = useState<ManageList>([]);
   const [toatlMoney, setTotalMoney] = useState<number>(0);
   const [isCompleteApplyManage, setIsCompleteApplyManage] = useState(false);
   const [isLoading, setIsLoading] = useState(true);
   const navigate = useNavigate();
-  useEffect(() => {
-    const fetchManagements = async () => {
-      setIsLoading(true);
-      const params = {
-        status: manageStatusMap[manageStatus],
-        sort: sortTypeMap[sortType],
-        paymentId: 0,
-      };
-      const res: any = await getPaymentsMinder({ params });
+  const fetchManagements = async (lastId: number) => {
+    const params = {
+      status: manageStatusMap[manageStatus],
+      sort: sortTypeMap[sortType],
+      paymentId: lastId,
+    };
+    const res: any = await getPaymentsMinder({ params });
+    try {
       if (res?.status === 200) {
-        setManagementList(res?.data);
-        let totalEarnMoney = 0;
-        res?.data?.forEach((item: ManageItem) => {
-          totalEarnMoney += Number(item?.profit);
-        });
-        setTotalMoney(totalEarnMoney);
-        setTimeout(() => {
-          setIsLoading(false);
-        }, 500);
+        if (res.data.length !== 0) {
+          if (lastId === 0) {
+            setManagementList(res.data);
+            let totalEarnMoney = 0;
+            res?.data?.forEach((item: ManageItem) => {
+              totalEarnMoney += Number(item?.profit);
+            });
+            setTotalMoney(totalEarnMoney);
+          } else {
+            const updatedManages = [...managementList, ...res.data];
+            setManagementList(updatedManages);
+            let totalEarnMoney = 0;
+            res?.data?.forEach((item: ManageItem) => {
+              totalEarnMoney += Number(item?.profit);
+            });
+            setTotalMoney(totalEarnMoney);
+          }
+        } else {
+          setManagementList(res.data);
+          setIsLastElem(true);
+          let totalEarnMoney = 0;
+          res?.data?.forEach((item: ManageItem) => {
+            totalEarnMoney += Number(item?.profit);
+          });
+          setTotalMoney(totalEarnMoney);
+        }
       } else {
         alert('판매 정보가 아직 등록되지 않았어요!');
         navigate('/minder');
       }
-    };
-    fetchManagements();
-  }, [manageStatus, sortType, isCompleteApplyManage]);
+    } catch (err) {
+      alert(err);
+    } finally {
+      if (lastId === 0) {
+        setIsLoading(false);
+      }
+    }
+  };
+  useEffect(() => {
+    fetchManagements(0);
+  }, [manageStatus, sortType, isCompleteApplyManage, navigate]);
   return (
     <>
       <ManagementHeader />
@@ -104,27 +156,34 @@ export const SellerCaculateManagement = () => {
           {managementList?.length === 0 ? (
             <NoCalculationGraphic status={manageStatus} />
           ) : (
-            <SellerCalculateCardList>
-              {/* //정산 예정일일 경우 calculateActivate false true로~*/}
-              {managementList?.map((item) => (
-                <SellerCalulateCard
-                  key={item?.paymentId}
-                  id={item?.paymentId}
-                  customerName={item?.nickname}
-                  calculateActivate={
-                    manageStatus === '정산 예정' ? true : false
-                  }
-                  consultType={item?.isChat ? '채팅' : '편지'}
-                  netProfit={item?.profit}
-                  commission={item?.fee}
-                  paymentAccount={item?.account ?? '계좌 명시안됨'}
-                  paymentDate={item?.approvedAt ?? '지급 일자 명시안됨'}
-                  salePrice={item?.cost}
-                  isShowPopup={isCompleteApplyManage}
-                  setIsShowPopup={setIsCompleteApplyManage}
-                />
-              ))}
-            </SellerCalculateCardList>
+            <>
+              <SellerCalculateCardList>
+                {/* //정산 예정일일 경우 calculateActivate false true로~*/}
+                {managementList?.map((item) => (
+                  <SellerCalulateCard
+                    key={item?.paymentId}
+                    id={item?.paymentId}
+                    customerName={item?.nickname}
+                    calculateActivate={
+                      manageStatus === '정산 예정' ? true : false
+                    }
+                    consultType={item?.isChat ? '채팅' : '편지'}
+                    netProfit={item?.profit}
+                    commission={item?.fee}
+                    paymentAccount={item?.account ?? '계좌 명시안됨'}
+                    paymentDate={item?.approvedAt ?? '지급 일자 명시안됨'}
+                    salePrice={item?.cost}
+                    isShowPopup={isCompleteApplyManage}
+                    setIsShowPopup={setIsCompleteApplyManage}
+                  />
+                ))}
+              </SellerCalculateCardList>
+              {!isLastElem ? (
+                <div ref={setTarget} style={{ height: '3.5rem' }} />
+              ) : (
+                <div style={{ height: '3.5rem' }} />
+              )}
+            </>
           )}
         </>
       )}
@@ -152,7 +211,7 @@ const TotalEarnMoney = styled.div`
   display: flex;
   align-items: center;
   gap: 0.8rem;
-  margin: 2.8rem 2rem 1.2rem;
+  margin: 1.2rem 2rem 1.2rem;
 `;
 
 const SellerCalculateCardList = styled.div`

From 28571c65f6024643fbc052bf8b34ef988a4f9981 Mon Sep 17 00:00:00 2001
From: inyoung <rmdnps10@gmail.com>
Date: Sun, 21 Apr 2024 23:08:02 +0900
Subject: [PATCH 29/35] =?UTF-8?q?Feat:=20=EB=93=A4=EC=A4=80=EB=A7=88=20?=
 =?UTF-8?q?=ED=97=A4=EB=8D=94=EC=97=90=EC=84=9C=20navigate=ED=95=98?=
 =?UTF-8?q?=EB=8A=94=20=EA=B2=BD=EB=A1=9C=EB=A5=BC=20-1=EC=97=90=EC=84=9C?=
 =?UTF-8?q?=20=ED=99=88=ED=99=94=EB=A9=B4=EC=9C=BC=EB=A1=9C=20=EC=A7=80?=
 =?UTF-8?q?=EC=A0=95=20#228?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/Buyer/BuyerAvailCounselor.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/Buyer/BuyerAvailCounselor.tsx b/src/pages/Buyer/BuyerAvailCounselor.tsx
index c183ff3f..709ad55d 100644
--- a/src/pages/Buyer/BuyerAvailCounselor.tsx
+++ b/src/pages/Buyer/BuyerAvailCounselor.tsx
@@ -102,7 +102,7 @@ export const BuyerAvailCounselor = () => {
       <HeaderWrapper>
         <BackIcon
           onClick={() => {
-            navigate(-1);
+            navigate('/share');
           }}
         />
         <Heading color={Grey1}>들을 준비가 된 마인더들</Heading>

From 88a3a90ac519c508980b8a595ab3f0c513d89d3c Mon Sep 17 00:00:00 2001
From: inyoung <rmdnps10@gmail.com>
Date: Sun, 21 Apr 2024 23:56:25 +0900
Subject: [PATCH 30/35] =?UTF-8?q?Feat:=20=EC=83=81=EB=8B=B4=EC=82=AC=20?=
 =?UTF-8?q?=EC=B9=B4=ED=85=8C=EA=B3=A0=EB=A6=AC=20=ED=8E=98=EC=9D=B4?=
 =?UTF-8?q?=EC=A7=80=EC=9D=98=20=EC=BF=BC=EB=A6=AC=20=ED=8C=8C=EB=9D=BC?=
 =?UTF-8?q?=EB=AF=B8=ED=84=B0=20=EA=B5=AC=EB=B6=84=EC=9D=84=20=ED=86=B5?=
 =?UTF-8?q?=ED=95=98=EC=97=AC=20=EB=92=A4=EB=A1=9C=EA=B0=80=EA=B8=B0=20?=
 =?UTF-8?q?=EB=88=8C=EB=A0=80=EC=9D=84=20=EB=95=8C=20=EC=9D=B4=EB=8F=99?=
 =?UTF-8?q?=ED=95=98=EB=8A=94=20=ED=8E=98=EC=9D=B4=EC=A7=80=EB=A5=BC=20?=
 =?UTF-8?q?=ED=99=88=20=ED=99=94=EB=A9=B4=EA=B3=BC=20=EA=B2=80=EC=83=89=20?=
 =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=EB=A1=9C=20=EC=9D=B4=EC=9B=90?=
 =?UTF-8?q?=ED=99=94=20#233?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../CategoryResultHeader.tsx                  | 16 ++++--
 .../Buyer/Common/CartegorySearch.tsx          | 52 +++++++++++++++----
 src/pages/Buyer/BuyerHome.tsx                 |  2 +-
 3 files changed, 54 insertions(+), 16 deletions(-)

diff --git a/src/components/Buyer/BuyerCategoryResult/CategoryResultHeader.tsx b/src/components/Buyer/BuyerCategoryResult/CategoryResultHeader.tsx
index 17bbd427..95563c5e 100644
--- a/src/components/Buyer/BuyerCategoryResult/CategoryResultHeader.tsx
+++ b/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>
   );
diff --git a/src/components/Buyer/Common/CartegorySearch.tsx b/src/components/Buyer/Common/CartegorySearch.tsx
index 0a4753c5..812cbd5a 100644
--- a/src/components/Buyer/Common/CartegorySearch.tsx
+++ b/src/components/Buyer/Common/CartegorySearch.tsx
@@ -1,11 +1,11 @@
-import { useNavigate } from 'react-router-dom';
+import { useLocation, useNavigate } from 'react-router-dom';
 import { useSetRecoilState } from 'recoil';
 import styled from 'styled-components';
 import { Grey6 } from 'styles/color';
 import { Characters } from 'utils/Characters';
 import { searchKeywordState } from 'utils/atom';
-
 export const CartegorySearch = () => {
+  const { pathname } = useLocation();
   const navigate = useNavigate();
   const setSearchKeyword = useSetRecoilState(searchKeywordState);
   return (
@@ -16,7 +16,11 @@ export const CartegorySearch = () => {
             number={1}
             onClick={() => {
               setSearchKeyword('연애갈등');
-              navigate('/categorySearch');
+              if (pathname === '/search') {
+                navigate('/categorySearch?from=search');
+              } else {
+                navigate('/categorySearch');
+              }
             }}
           />
           <Text>연애갈등</Text>
@@ -26,7 +30,11 @@ export const CartegorySearch = () => {
             number={2}
             onClick={() => {
               setSearchKeyword('이별/재회');
-              navigate('/categorySearch');
+              if (pathname === '/search') {
+                navigate('/categorySearch?from=search');
+              } else {
+                navigate('/categorySearch');
+              }
             }}
           />
           <Text>이별/재회</Text>
@@ -36,7 +44,11 @@ export const CartegorySearch = () => {
             number={3}
             onClick={() => {
               setSearchKeyword('여자심리');
-              navigate('/categorySearch');
+              if (pathname === '/search') {
+                navigate('/categorySearch?from=search');
+              } else {
+                navigate('/categorySearch');
+              }
             }}
           />
           <Text>여자심리</Text>
@@ -46,7 +58,11 @@ export const CartegorySearch = () => {
             number={4}
             onClick={() => {
               setSearchKeyword('남자심리');
-              navigate('/categorySearch');
+              if (pathname === '/search') {
+                navigate('/categorySearch?from=search');
+              } else {
+                navigate('/categorySearch');
+              }
             }}
           />
           <Text>남자심리</Text>
@@ -58,7 +74,11 @@ export const CartegorySearch = () => {
             number={5}
             onClick={() => {
               setSearchKeyword('썸/연애시작');
-              navigate('/categorySearch');
+              if (pathname === '/search') {
+                navigate('/categorySearch?from=search');
+              } else {
+                navigate('/categorySearch');
+              }
             }}
           />
           <Text>썸/연애시작</Text>
@@ -68,7 +88,11 @@ export const CartegorySearch = () => {
             number={6}
             onClick={() => {
               setSearchKeyword('짝사랑');
-              navigate('/categorySearch');
+              if (pathname === '/search') {
+                navigate('/categorySearch?from=search');
+              } else {
+                navigate('/categorySearch');
+              }
             }}
           />
           <Text>짝사랑</Text>
@@ -78,7 +102,11 @@ export const CartegorySearch = () => {
             number={7}
             onClick={() => {
               setSearchKeyword('권태기');
-              navigate('/categorySearch');
+              if (pathname === '/search') {
+                navigate('/categorySearch?from=search');
+              } else {
+                navigate('/categorySearch');
+              }
             }}
           />
           <Text>권태기</Text>
@@ -88,7 +116,11 @@ export const CartegorySearch = () => {
             number={8}
             onClick={() => {
               setSearchKeyword('기타');
-              navigate('/categorySearch');
+              if (pathname === '/search') {
+                navigate('/categorySearch?from=search');
+              } else {
+                navigate('/categorySearch');
+              }
             }}
           />
           <Text>기타</Text>
diff --git a/src/pages/Buyer/BuyerHome.tsx b/src/pages/Buyer/BuyerHome.tsx
index a7a4a3a7..6152b1a6 100644
--- a/src/pages/Buyer/BuyerHome.tsx
+++ b/src/pages/Buyer/BuyerHome.tsx
@@ -26,7 +26,7 @@ export const BuyerHome = () => {
           navigate('/share');
         }
       } catch (e) {
-        console.log(e);
+        alert(e);
       }
     };
     fectchSearchResults();

From 949a1d8175753428772930cb5f2b26bff2dfd461 Mon Sep 17 00:00:00 2001
From: inyoung <rmdnps10@gmail.com>
Date: Mon, 22 Apr 2024 18:18:51 +0900
Subject: [PATCH 31/35] =?UTF-8?q?Fix:=20=EC=B5=9C=EA=B7=BC=20=EA=B2=80?=
 =?UTF-8?q?=EC=83=89=EC=96=B4=20=ED=81=B4=EB=A6=AD=20=EC=8B=9C=20=EC=BF=BC?=
 =?UTF-8?q?=EB=A6=AC=20=ED=8C=8C=EB=9D=BC=EB=AF=B8=ED=84=B0=EB=A1=9C?=
 =?UTF-8?q?=EC=8D=A8=20keyword=20=EC=B6=94=EA=B0=80=ED=95=98=EA=B8=B0=20#2?=
 =?UTF-8?q?37?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Buyer/BuyerSearch/SearchRecent.tsx | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/src/components/Buyer/BuyerSearch/SearchRecent.tsx b/src/components/Buyer/BuyerSearch/SearchRecent.tsx
index dfabd5ce..58c0634b 100644
--- a/src/components/Buyer/BuyerSearch/SearchRecent.tsx
+++ b/src/components/Buyer/BuyerSearch/SearchRecent.tsx
@@ -6,13 +6,10 @@ import { Grey1, Grey4 } from 'styles/color';
 import { ReactComponent as XIcon } from 'assets/icons/icon-grey-x.svg';
 import { getSearchWords } from 'api/get';
 import { deleteSearchWords } from 'api/delete';
-import { useSetRecoilState } from 'recoil';
-import { searchKeywordState } from 'utils/atom';
 import { useNavigate } from 'react-router-dom';
 export const SearchRecent = () => {
   const navigate = useNavigate();
   const [recentSearch, setRecentSearch] = useState<string[]>([]);
-  const setKeyword = useSetRecoilState(searchKeywordState);
   const handleXonClick = async (
     targetIndex: number,
     event: React.MouseEvent,
@@ -28,8 +25,7 @@ export const SearchRecent = () => {
     }
   };
   const handleRecentClick = (index: number) => {
-    setKeyword(recentSearch[index]);
-    navigate('/search/result');
+    navigate(`/search/result?keyword=${recentSearch[index]}`);
   };
   useEffect(() => {
     const fetchData = async () => {

From 720988769e6fa5157892f4bf83ed483268d20f79 Mon Sep 17 00:00:00 2001
From: inyoung <rmdnps10@gmail.com>
Date: Mon, 22 Apr 2024 19:28:39 +0900
Subject: [PATCH 32/35] =?UTF-8?q?Fix:=20=EB=A7=88=EC=9D=B8=EB=8D=94=20?=
 =?UTF-8?q?=ED=94=84=EB=A1=9C=ED=95=84=20=ED=8E=B8=EC=A7=91=20=ED=8E=98?=
 =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EB=A7=88=EC=9D=B8=EB=8D=94=20=EC=9D=B8?=
 =?UTF-8?q?=EC=A6=9D=20=ED=86=B5=EA=B3=BC=ED=95=98=EC=A7=80=20=EC=95=8A?=
 =?UTF-8?q?=EC=9D=84=20=EA=B2=BD=EC=9A=B0=20response=20status=20code?=
 =?UTF-8?q?=EB=A5=BC=20404=EC=97=90=EC=84=9C=20403=EC=9C=BC=EB=A1=9C=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95=20#239?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Common/TabA1.tsx              | 4 +++-
 src/pages/Seller/SellerMyPageViewProfile.tsx | 5 ++++-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/components/Common/TabA1.tsx b/src/components/Common/TabA1.tsx
index a4e78f6e..4f152323 100644
--- a/src/components/Common/TabA1.tsx
+++ b/src/components/Common/TabA1.tsx
@@ -21,6 +21,9 @@ export const TabA1 = ({ isBuyer, initState }: TabA1Props) => {
       if (res.status === 200) {
         localStorage.setItem('randomConsult', JSON.stringify(res.data));
         navigate(`/minder/open-consult/${res.data[0]}`);
+        setTabState(3);
+      } else if (res?.response.status === 403) {
+        alert('공개 상담 페이지에 접근할 권한이 없습니다.');
       }
     } catch (err) {
       alert(err);
@@ -79,7 +82,6 @@ export const TabA1 = ({ isBuyer, initState }: TabA1Props) => {
       <TabButton
         $tabState={3}
         onClick={() => {
-          setTabState(3);
           if (isBuyer) {
             navigate('/open-consult');
           } else {
diff --git a/src/pages/Seller/SellerMyPageViewProfile.tsx b/src/pages/Seller/SellerMyPageViewProfile.tsx
index 56af4aba..30806828 100644
--- a/src/pages/Seller/SellerMyPageViewProfile.tsx
+++ b/src/pages/Seller/SellerMyPageViewProfile.tsx
@@ -33,9 +33,12 @@ export const SellerMypageViewProfile = () => {
           setIsEvaluationPending(true);
         }
         const profileRes: any = await getProfiles();
-        if (profileRes?.response?.status === 404) {
+        if (profileRes?.response?.status === 403) {
           alert('마인더 인증을 통과한 뒤 판매 정보를 등록할 수 있습니다.');
           navigate('/minder/mypage');
+        } else if (profileRes?.response?.status === 404) {
+          alert('등록되지 않은 회원 정보입니다.');
+          navigate('/minder/mypage');
         }
         setProfile(profileRes.data);
         setIsLoading(false);

From 5c3887e77a5b9188fe4c2987b1dced151a017eee Mon Sep 17 00:00:00 2001
From: inyoung <rmdnps10@gmail.com>
Date: Mon, 22 Apr 2024 19:33:09 +0900
Subject: [PATCH 33/35] Style: adjust common header searchIcon marginTop

---
 src/components/Common/Header.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Common/Header.tsx b/src/components/Common/Header.tsx
index 05d0513e..fc513db9 100644
--- a/src/components/Common/Header.tsx
+++ b/src/components/Common/Header.tsx
@@ -57,7 +57,7 @@ const Logo = styled.div`
   cursor: pointer;
 `;
 const StyledSearch = styled(Search)`
-  margin-top: 1rem;
+  margin-top: 1.4rem;
   margin-right: 2.4rem;
   cursor: pointer;
 `;

From 735ae433333f4ec2b9c7abf55d749c5630e5a514 Mon Sep 17 00:00:00 2001
From: inyoung <rmdnps10@gmail.com>
Date: Mon, 22 Apr 2024 20:24:47 +0900
Subject: [PATCH 34/35] =?UTF-8?q?Feat:=20=ED=95=9C=20=EC=A4=84=20=EC=86=8C?=
 =?UTF-8?q?=EA=B0=9C=EC=99=80=20=EA=B2=BD=ED=97=98=20=EC=86=8C=EA=B0=9C?=
 =?UTF-8?q?=EC=97=90=EC=84=9C=20,=20=EB=AC=B8=EC=9E=90=20=EC=9C=A0?=
 =?UTF-8?q?=ED=9A=A8=EC=84=B1=20=EA=B2=80=EC=82=AC=20=ED=86=B5=EA=B3=BC?=
 =?UTF-8?q?=ED=95=98=EA=B8=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Common/Profile.tsx              | 4 ++++
 src/pages/Seller/SellerMyPageModifyProfile.tsx | 2 +-
 src/utils/isIncludeSpecialLetter.ts            | 2 +-
 3 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/components/Common/Profile.tsx b/src/components/Common/Profile.tsx
index 8d969e54..697c9ab1 100644
--- a/src/components/Common/Profile.tsx
+++ b/src/components/Common/Profile.tsx
@@ -101,6 +101,10 @@ export const Profile = ({
             onClick={() => {
               if (isPass) {
                 navigate('/minder/education/first');
+              } else {
+                alert(
+                  '마지막 인증 시험을 본 시간에서 24시간 이후에 시험을 응시할 수 있어요.',
+                );
               }
             }}
             width="100%"
diff --git a/src/pages/Seller/SellerMyPageModifyProfile.tsx b/src/pages/Seller/SellerMyPageModifyProfile.tsx
index 5ded5a86..d56e3e6e 100644
--- a/src/pages/Seller/SellerMyPageModifyProfile.tsx
+++ b/src/pages/Seller/SellerMyPageModifyProfile.tsx
@@ -97,7 +97,7 @@ export const SellerMypageModifyProfile = () => {
   const category = useCustomSelect('category');
   const style = useCustomSelect('style');
   const type = useCustomSelect('type');
-  // 시간 설정은 나중에....ㅠㅠ
+
   const availableTime = useCustomSelect('time');
 
   const letterPrice = useInput('');
diff --git a/src/utils/isIncludeSpecialLetter.ts b/src/utils/isIncludeSpecialLetter.ts
index 891c06c3..af11775f 100644
--- a/src/utils/isIncludeSpecialLetter.ts
+++ b/src/utils/isIncludeSpecialLetter.ts
@@ -9,7 +9,7 @@ export const isIncludeSpecialLetter = (str: string) => {
 };
 
 export const isIncludeSpecialLetterOneLiner = (str: string) => {
-  var specialCharacterRegex = /[\{\}\[\]\/,;|\)*~`^\-_+<>@\#$%&\\\=\(\'\"]/g;
+  var specialCharacterRegex = /[\{\}\[\]\/;|\)*~`^\-_+<>@\#$%&\\\=\(\'\"]/g;
   if (specialCharacterRegex.test(str)) {
     return true;
   } else {

From c7477de38aae7132bd8b3b4e734844c532e96421 Mon Sep 17 00:00:00 2001
From: inyoung <rmdnps10@gmail.com>
Date: Tue, 23 Apr 2024 05:51:10 +0900
Subject: [PATCH 35/35] =?UTF-8?q?Fix:=20=EB=A7=88=EC=9D=B8=EB=8D=94=20?=
 =?UTF-8?q?=EB=B0=9B=EC=9D=80=20=EB=A6=AC=EB=B7=B0=20=EB=92=A4=EB=A1=9C?=
 =?UTF-8?q?=EA=B0=80=EA=B8=B0=20navigate=20=EC=A3=BC=EC=86=8C=EB=A5=BC=20?=
 =?UTF-8?q?=EC=BF=BC=EB=A6=AC=ED=8C=8C=EB=9D=BC=EB=AF=B8=ED=84=B0=EC=97=90?=
 =?UTF-8?q?=20=EB=94=B0=EB=9D=BC=20=EC=9D=B4=EC=9B=90=ED=99=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../SellerHome/ConsultReviewsSection.tsx       |  2 +-
 .../SellerMyPageReview/SellerReviewHeader.tsx  | 18 ++++++++++++------
 2 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/src/components/Seller/SellerHome/ConsultReviewsSection.tsx b/src/components/Seller/SellerHome/ConsultReviewsSection.tsx
index b5942b0b..602326cd 100644
--- a/src/components/Seller/SellerHome/ConsultReviewsSection.tsx
+++ b/src/components/Seller/SellerHome/ConsultReviewsSection.tsx
@@ -29,7 +29,7 @@ export const ConsultReviewSection = () => {
     <>
       <ContentTag
         onClick={() => {
-          navigate('/minder/mypage/review');
+          navigate('/minder/mypage/review?from=home');
         }}
       >
         {reviewData?.length === 0 ? (
diff --git a/src/components/Seller/SellerMyPageReview/SellerReviewHeader.tsx b/src/components/Seller/SellerMyPageReview/SellerReviewHeader.tsx
index 3ebcbfcc..69eea73a 100644
--- a/src/components/Seller/SellerMyPageReview/SellerReviewHeader.tsx
+++ b/src/components/Seller/SellerMyPageReview/SellerReviewHeader.tsx
@@ -1,19 +1,25 @@
-import { useNavigate } from 'react-router-dom';
+import { useLocation, useNavigate } from 'react-router-dom';
 import styled from 'styled-components';
 import { White } from 'styles/color';
 import { ReactComponent as LeftArrowIcon } from 'assets/icons/left-arrow.svg';
 import { Heading } from 'styles/font';
+import { useCallback, useMemo } from 'react';
 
 export const SellerReviewHeader = () => {
+  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', 'home')) {
+      navigate('/minder');
+    } else {
+      navigate('/minder/mypage');
+    }
+  }, [navigate, params]);
   return (
     <SellerReviewHeaderWrapper>
       <div style={{ position: 'absolute', left: '2rem', cursor: 'pointer' }}>
-        <LeftArrowIcon
-          onClick={() => {
-            navigate('/minder/mypage');
-          }}
-        />
+        <LeftArrowIcon onClick={handleClickBackIcon} />
       </div>
       <Heading>받은 리뷰</Heading>
     </SellerReviewHeaderWrapper>