{
) : null}
- );
+ );
}
};
@@ -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;
diff --git a/src/pages/Buyer/BuyerSavedCounselor.tsx b/src/pages/Buyer/BuyerSavedCounselor.tsx
index 3d45e494..d08fa37d 100644
--- a/src/pages/Buyer/BuyerSavedCounselor.tsx
+++ b/src/pages/Buyer/BuyerSavedCounselor.tsx
@@ -10,15 +10,22 @@ 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';
+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
([]);
+ const [openConsultData, setOpenConsultData] = useState<
+ openConsultApiObject[]
+ >([]);
const [isLastElem, setIsLastElem] = useState(false);
-
+ const [tabState, setTabState] = useState(1);
const preventRef = useRef(true);
-
const onIntersect: IntersectionObserverCallback = async (entry) => {
if (
entry[0].isIntersecting &&
@@ -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 (
<>
@@ -85,51 +135,112 @@ export const BuyerSavedCounselor = () => {
/>
찜 목록
+
+
+
+
);
} else {
- if (wishlistData.length !== 0) {
- return (
- <>
-
- {
- navigate('/mypage');
- }}
- />
- 찜 목록
-
-
-
-
- {!isLastElem ? (
-
- ) : (
-
- )}
-
+
+ {!isLastElem ? (
+
+ ) : (
+
+ )}
+
+
+ {!isLastElem ? (
+
+ ) : (
+
+ )}
+
-
-
-
- );
- } else {
- return (
-
-
- {
- navigate('/search');
- }}
- />
{
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"
/>
-
-
{
- setIsModalOpen(true);
- setScrollLock(true);
- }}
- >
- {sortList[sortType]}
-
-
-
+
+
+
);
+ } else {
+ if (tabState === 1) {
+ return (
+
+
+
+ {
+ navigate('/search');
+ }}
+ />
+
+
+
+
+
+
+
+
{
+ setIsModalOpen(true);
+ setScrollLock(true);
+ }}
+ >
+ {sortList[sortType]}
+
+
+
+
{
+ setIsModalOpen(true);
+ setScrollLock(true);
+ }}
+ >
+ {openSortList[openSortType]}
+
+
+