[Feature] 검색 페이지, 찜 목록 페이지 리뉴얼된 버전으로 업데이트 + 검색 필터링 쿼리파라미터로 추가하여 검색 결과 유지

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);

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) =>

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;
   }

src/components/Buyer/BuyerHome/HomeConsultInReady.tsx

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

src/components/Buyer/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>

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;

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;

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: 100%;
 `;
 const SearchIcon = styled(Search)`
   position: absolute;
-  right: -2.7rem;
+  right: 0.8rem;
   top: 0.8rem;
   cursor: pointer;
 `;

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;