Merge pull request #360 from sharemindteam/dev

Dev

.github/ISSUE_TEMPLATE/feature.md

@@ -6,7 +6,7 @@ labels: "\U0001F4AB feat"
 assignees: ''
 ---
 
-## Describtion
+## Description
 
 <br>
 Issue 내용을 작성해주세요.

src/components/Buyer/BuyerHome/HomeConsultInReady.tsx

@@ -11,18 +11,26 @@ import { Space } from 'components/Common/Space';
 import { getCurrentHour } from 'utils/getCurrentHour';
 import { Flex } from 'components/Common/Flex';
 import CounselorCard from 'components/Common/CounselorCard';
-///
-///
-///
+
+//
+//
+//
+
 interface HomeConsultInReadyProps {
   searchData: SearchResultData[];
 }
-///
-///
-///
+
+//
+//
+//
+
 export const HomeConsultInReady = ({ searchData }: HomeConsultInReadyProps) => {
   const navigate = useNavigate();
 
+  //
+  //
+  //
+
   return (
     <Wrapper>
       <div
@@ -95,6 +103,7 @@ const Wrapper = styled.section`
     cursor: pointer;
   }
 `;
+
 const NavConsult = styled.div`
   width: 100%;
   span#current-time {
@@ -106,6 +115,7 @@ const NavConsult = styled.div`
     align-items: center;
   }
 `;
+
 const MoreIcon = styled(More)`
   margin-left: auto;
 `;

src/components/Buyer/BuyerSavedCounselor.tsx/SavedCounselorResults.tsx

@@ -3,25 +3,103 @@ import { WishlistDataType } from 'utils/type';
 import { AppendCategoryType } from 'utils/AppendCategoryType';
 import { consultStyleToCharNum } from 'utils/convertStringToCharNum';
 import CounselorCard from 'components/Common/CounselorCard';
+import { useInfiniteQuery } from '@tanstack/react-query';
+import { postWishLists } from 'api/post';
+import { useMemo } from 'react';
+import useInfiniteObserver from 'hooks/useInfiniteObserver';
+import { Space } from 'components/Common/Space';
+import { LoadingSpinner } from 'utils/LoadingSpinner';
+import EmptySection from 'components/Common/EmptySection';
 
 //
 //
 //
 
-interface SavedCounselorResultsProps {
-  wishlistData: WishlistDataType[];
-}
+const INFINITE_POST_WISH_LISTS_QUERY_KEY = 'infinitePostWishLists';
+
+const WISH_LIST_PER_PAGE = 4;
 
 //
 //
 //
 
-export const SavedCounselorResults = ({
-  wishlistData,
-}: SavedCounselorResultsProps) => {
+export const SavedCounselorResults = () => {
+  //
+  //
+  //
+  const {
+    data: wishlistData,
+    fetchNextPage,
+    hasNextPage,
+    isFetching,
+    isFetchingNextPage,
+    isLoadingError,
+  } = useInfiniteQuery<WishlistDataType[]>({
+    queryKey: [INFINITE_POST_WISH_LISTS_QUERY_KEY],
+    queryFn: async ({ pageParam }) =>
+      await postWishLists(pageParam).then((res: any) => res.data),
+    initialPageParam: {
+      wishlistId: 0,
+      updatedAt: '',
+    },
+    getNextPageParam: (lastPage) => {
+      if (lastPage.length < WISH_LIST_PER_PAGE) {
+        return undefined;
+      }
+
+      const lastItem = lastPage[lastPage.length - 1];
+
+      return {
+        wishlistId: lastItem.wishlistId,
+        updatedAt: lastItem.updatedAt,
+      };
+    },
+  });
+
+  const wishlists = useMemo(
+    () => wishlistData?.pages.flatMap((wishlist) => wishlist) ?? [],
+    [wishlistData],
+  );
+
+  const { observerElem } = useInfiniteObserver({
+    fetchNextPage,
+    hasNextPage,
+    isFetching,
+    isFetchingNextPage,
+    isLoadingError,
+  });
+
+  //
+  //
+  //
+
+  if (isFetching && !isFetchingNextPage) {
+    return (
+      <div
+        style={{
+          height: '70vh',
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+        }}
+      >
+        <LoadingSpinner />
+      </div>
+    );
+  }
+
+  if (wishlists.length === 0) {
+    return (
+      <EmptySection
+        title="아직 찜한 마인더가 없어요."
+        subtitle={`관심 있는 마인더를 찜하고\n더욱 편리하게 상담하세요.`}
+      />
+    );
+  }
+
   return (
     <Wrapper>
-      {wishlistData.map((value) => {
+      {wishlists.map((value) => {
         return (
           <CounselorCard
             key={value.wishlistId}
@@ -37,10 +115,12 @@ export const SavedCounselorResults = ({
             level={value.level}
             rating={value.ratingAverage}
             totalReview={value.totalReview}
-            isSavedCounselorPage={true}
+            totalConsult={value.totalConsult}
           />
         );
       })}
+      <div ref={observerElem} />
+      <Space height="3.5rem" />
     </Wrapper>
   );
 };

src/components/Buyer/BuyerSavedCounselor.tsx/SavedOpenConsultResults.tsx

@@ -1,19 +1,102 @@
 import { openConsultApiObject } from 'pages/Buyer/BuyerConsult';
-import React from 'react';
 import styled from 'styled-components';
 import SavedOpenConsultCard from './SavedOpenConsultCard';
+import { useInfiniteQuery } from '@tanstack/react-query';
+import { getPostScraps } from 'api/get';
+import { useMemo } from 'react';
+import useInfiniteObserver from 'hooks/useInfiniteObserver';
+import { Space } from 'components/Common/Space';
+import { LoadingSpinner } from 'utils/LoadingSpinner';
+import EmptySection from 'components/Common/EmptySection';
+
+//
+//
+//
+
+const INFINITE_POST_SCRAPS_QUERY_KEY = 'infiniteGetPostScraps';
+
+const POST_SCRAPS_PER_PAGE = 6;
+
+//
+//
+//
+
+function SavedOpenConsultResults() {
+  //
+  //
+  //
+  const {
+    data: openConsults,
+    fetchNextPage,
+    hasNextPage,
+    isFetching,
+    isFetchingNextPage,
+    isLoadingError,
+  } = useInfiniteQuery<openConsultApiObject[]>({
+    queryKey: [INFINITE_POST_SCRAPS_QUERY_KEY],
+    queryFn: async ({ pageParam }) =>
+      await getPostScraps({ params: pageParam }).then((res: any) => res.data),
+    initialPageParam: {
+      postScrapId: 0,
+      scrappedAt: new Date().toISOString().slice(0, 19),
+    },
+    getNextPageParam: (lastPage) => {
+      if (lastPage.length < POST_SCRAPS_PER_PAGE) {
+        return undefined;
+      }
+
+      const lastItem = lastPage[lastPage.length - 1];
+
+      return {
+        postScrapId: lastItem.postScrapId,
+        scrappedAt: lastItem.scrappedAt,
+      };
+    },
+  });
+
+  const openConsultList = useMemo(
+    () => openConsults?.pages.flatMap((consult) => consult) ?? [],
+    [openConsults],
+  );
+
+  const { observerElem } = useInfiniteObserver({
+    fetchNextPage,
+    hasNextPage,
+    isFetching,
+    isFetchingNextPage,
+    isLoadingError,
+  });
+
+  //
+  //
+  //
+
+  if (isFetching && !isFetchingNextPage) {
+    return (
+      <div
+        style={{
+          height: '70vh',
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+        }}
+      >
+        <LoadingSpinner />
+      </div>
+    );
+  }
+
+  if (openConsultList.length === 0) {
+    return <EmptySection title="아직 저장한 공개상담이 없어요." />;
+  }
 
-interface SavedOpenConsultResultsProps {
-  openConsultList: openConsultApiObject[];
-}
-function SavedOpenConsultResults({
-  openConsultList,
-}: SavedOpenConsultResultsProps) {
   return (
     <Wrapper>
       {openConsultList.map((card) => (
         <SavedOpenConsultCard item={card} />
       ))}
+      <div ref={observerElem} />
+      <Space height="3.5rem" />
     </Wrapper>
   );
 }
@@ -22,7 +105,10 @@ const Wrapper = styled.div`
   display: flex;
   flex-direction: column;
   gap: 1.2rem;
+  box-sizing: border-box;
+  padding: 0 2rem;
   align-items: center;
   width: 100%;
 `;
+
 export default SavedOpenConsultResults;

src/components/Common/CounselorCard.tsx

@@ -31,10 +31,9 @@ interface CounselorCardProps {
   isWishList: boolean;
   rating: number;
   totalReview: number;
-  totalConsult?: number;
+  totalConsult: number;
   isRealtime?: boolean;
   consultStyle?: number;
-  isSavedCounselorPage?: boolean;
 }
 
 //
@@ -74,7 +73,6 @@ const CounselorCard = ({
   consultStyle,
   totalConsult,
   isRealtime,
-  isSavedCounselorPage = false,
 }: CounselorCardProps) => {
   const navigate = useNavigate();
 
@@ -158,15 +156,17 @@ const CounselorCard = ({
     return (
       <Flex direction="column" align="flex-start">
         {isRealtime ? (
-          <TimeWrapper>
-            <Caption2
-              color={White}
-            >{`${hours}시 기준 실시간 상담 가능`}</Caption2>
-          </TimeWrapper>
+          <Flex justify="flex-start" width="100%">
+            <TimeWrapper>
+              <Caption2
+                color={White}
+              >{`${hours}시 기준 실시간 상담 가능`}</Caption2>
+            </TimeWrapper>
+          </Flex>
         ) : null}
         <InfoWrapper isRealtime={isRealtime}>
           <Flex direction="column" gap="1rem" align="flex-start">
-            <Flex gap="1rem">
+            <Flex gap="1rem" width="100%" justify="flex-start">
               <ImgWrapper>
                 <Characters number={consultStyle} />
               </ImgWrapper>
@@ -176,13 +176,8 @@ const CounselorCard = ({
                   <Caption2 color={Grey1}>{'LV. ' + level}</Caption2>
                 </Flex>
                 <Flex gap="0.8rem">
-                  {/* TODO: TotalConsult is changed to optional, because get wishlist do not return total consult. It should be added later */}
-                  {totalConsult ? (
-                    <>
-                      <Body3 color={Grey2}>상담 {totalConsult}회</Body3>
-                      <Divider />
-                    </>
-                  ) : null}
+                  <Body3 color={Grey2}>상담 {totalConsult}회</Body3>
+                  <Divider />
                   <Body3 color={Grey2}>후기 {totalReview}개</Body3>
                   <Divider />
                   <Flex gap="0.2rem">
@@ -192,7 +187,7 @@ const CounselorCard = ({
                 </Flex>
               </Flex>
             </Flex>
-            <Flex gap="0.8rem">
+            <Flex gap="0.8rem" width="100%" justify="flex-start">
               {tagList.map((value: any) => {
                 return (
                   <TagA2Cartegory key={value} tagType={value} bgColorType={3} />
@@ -236,10 +231,6 @@ const CounselorCard = ({
   //
   //
 
-  if (isSavedCounselorPage && !isSaved) {
-    return null;
-  }
-
   return (
     <Wrapper>
       {renderIntroSection()}
@@ -298,6 +289,7 @@ const BookMarkIcon = styled(BookMark)`
   padding-left: 0.8rem;
   cursor: pointer;
 `;
+
 const NoneBookMarkIcon = styled(NoneBookMark)`
   padding-left: 0.8rem;
   cursor: pointer;