Feat: 찜 목록 페이지 api 연동 및 무한스크롤 구현 완료 #228

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