Merge pull request #53 from Spharos-GentleDog/feature/cart

feat: 주문 내역 조회 무한 스크롤
Spharos-GentleDog · Nov 29, 2023 · fe6c4c6 · fe6c4c6
2 parents cfa512c + c035e13
commit fe6c4c6
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 62 deletions.
diff --git a/src/components/CartList.tsx b/src/components/CartList.tsx
@@ -14,6 +14,10 @@ import { useSession } from 'next-auth/react';
 import { useEffect, useState } from 'react';
 import Icon from './Icon';
 import RenderProduct from './RenderProduct';
+import ButtonClose from '@/shared/ButtonClose/ButtonClose';
+import ButtonSecondary from '@/shared/Button/ButtonSecondary';
+import ButtonThird from '@/shared/Button/ButtonThird';
+import Button from '@/shared/Button/Button';
 
 //@@@@@@@@@@@@@@@@@@@@@@@@@@@@ 브랜드 체크 박스 수정@@@@@@@@@@@@@@@@@
 // 삭제 로직 수정
@@ -371,9 +375,9 @@ export default function CartList() {
           checked: checked,
         }));
       });
+      console.log('newState', newState);
       return newState;
     });
-
     setIsAllChecked(checked);
   };
 
@@ -535,7 +539,6 @@ export default function CartList() {
               onChange={(checked) => handleAllCheck(checked)}
             />
 
-            {/* todo: 선택 삭제 */}
             <button
               className="flex"
               onClick={() =>
@@ -674,9 +677,18 @@ export default function CartList() {
               <span>{checkoutInfo.totalPriceString}</span>
             </div>
           </div>
-          <ButtonPrimary href="/checkout" className="mt-8 w-full">
-            주문하기
-          </ButtonPrimary>
+          {!cartBrandProducts || Object.keys(cartBrandProducts).length === 0 ? (
+            <Button
+              disabled
+              className="mt-8 w-full disabled:bg-opacity-90 bg-slate-900 dark:bg-slate-100 text-slate-50 dark:text-slate-800 shadow-xl"
+            >
+              주문하기
+            </Button>
+          ) : (
+            <ButtonPrimary href="/checkout" className="mt-8 w-full">
+              주문하기
+            </ButtonPrimary>
+          )}
         </div>
       </div>
     </>

diff --git a/src/components/OrderList.tsx b/src/components/OrderList.tsx
@@ -15,36 +15,33 @@ export default function OrderList() {
   const token = session?.data?.user.accessToken;
   const userEmail = session?.data?.user.userEmail;
 
-  const [nextGroup, setNextGroup] = useState();
+  const [nextGroup, setNextGroup] = useState<number>();
   const [groupedOrders, setGroupedOrders] = useState<
     Record<string, Record<string, Record<string, OrderListType[]>>>
   >({});
 
   // 데이터 페칭
-  useEffect(() => {
-    async function fetchOrderList() {
-      const response = await fetch(
-        `${process.env.BASE_API_URL}/api/v1/orders/user?groupId=`,
-        {
-          method: 'GET',
-          headers: {
-            'Content-Type': 'application/json',
-            userEmail: userEmail,
-            Authorization: `Bearer ${token}`,
-          },
-        }
-      );
-      const orderList = await response.json();
-      console.log(orderList);
+  async function fetchOrderList(groupId?: number) {
+    const response = await fetch(
+      `${process.env.BASE_API_URL}/api/v1/orders/user?groupId=${groupId || ''}`,
+      {
+        method: 'GET',
+        headers: {
+          'Content-Type': 'application/json',
+          userEmail: userEmail,
+          Authorization: `Bearer ${token}`,
+        },
+      }
+    );
+    const orderList = await response.json();
+    if (orderList.result.nextGroupId !== null) {
       setNextGroup(orderList.result.nextGroupId);
-      const groupedordersList = groupOrders(
-        orderList.result.vendorsOrderSummaryOutResponseDtoList
-      );
-      setGroupedOrders(groupedordersList);
-      console.log('groupedordersList', groupedordersList);
     }
-    fetchOrderList();
-  }, []);
+    const newGroupedOrders = groupOrders(
+      orderList.result.vendorsOrderSummaryOutResponseDtoList
+    );
+    setGroupedOrders((prev) => ({ ...prev, ...newGroupedOrders }));
+  }
 
   /** 형식 변환 */
   const groupOrders = (orders: OrderListType[]) => {
@@ -74,47 +71,25 @@ export default function OrderList() {
     return groupedByDate;
   };
 
-  // 스크롤 위치에 따라 추가적인 페칭을 진행
-  async function fetchNextOrderList() {
-    if (nextGroup === null) {
-      return;
-    }
-    const response = await fetch(
-      `${process.env.BASE_API_URL}/api/v1/orders/user?groupId=${nextGroup}`,
-      {
-        method: 'GET',
-        headers: {
-          'Content-Type': 'application/json',
-          userEmail: userEmail,
-          Authorization: `Bearer ${token}`,
-        },
-      }
-    );
-    const orderList = await response.json();
-    console.log(orderList);
-    setNextGroup(orderList.result.nextGroupId);
-    const nextGroupedOrders = groupOrders(
-      orderList.result.vendorsOrderSummaryOutResponseDtoList
-    );
-    setGroupedOrders({ ...groupedOrders, ...nextGroupedOrders });
-  }
+  useEffect(() => {
+    fetchOrderList();
+  }, []);
 
-  // 스크롤 위치를 감지해서 페칭 진행
+  // 스크롤 위치에 따라 추가적인 페칭을 진행
   useEffect(() => {
     const handleScroll = async () => {
-      // 스크롤 위치가 페이지 하단에 도달했는지 확인
-      if (window.innerHeight + window.scrollY >= document.body.offsetHeight) {
-        await fetchNextOrderList(); // 페이지 하단에 도달했을 때 추가 데이터 페칭
+      if (
+        window.innerHeight + window.scrollY >=
+          document.body.offsetHeight - 10 &&
+        nextGroup
+      ) {
+        await fetchOrderList(nextGroup);
       }
     };
 
     window.addEventListener('scroll', handleScroll);
-
-    // 컴포넌트가 언마운트될 때 이벤트 리스너 제거
-    return () => {
-      window.removeEventListener('scroll', handleScroll);
-    };
-  }, []);
+    return () => window.removeEventListener('scroll', handleScroll);
+  }, [nextGroup]);
 
   return (
     <>