Feat/227

src/components/feature/EmptyItem/index.tsx

@@ -23,6 +23,14 @@ const EMPTY_ITEM_TEXT = {
     title: `사용한 선물이 없어요`,
     description: `받은 선물🎁을 사용하고, 친구에게 고마운 마음을 표현해보세요~!`,
   },
+  funding_usable: {
+    title: `사용 가능한 펀딩이 없어요`,
+    description: `펀딩받고 싶은 선물🎁이 있나요?\n내 취향에 맞는 선물을 등록해보세요~!`,
+  },
+  funding_used: {
+    title: `사용한 펀딩이 없어요`,
+    description: `받은 펀딩을 사용하고, 친구들에게 고마운 마음을 표현해보세요~!`,
+  },
   history_order: {
     title: `주문내역이 없어요`,
     description: `소중한 친구에게 마음❤️을 전해보아요~!`,

src/components/ui/Tabs/index.module.scss

@@ -49,7 +49,8 @@
   }
 }
 
-.product_list {
+.product_list,
+.received_box {
   .wrapper_tab {
     margin-right: 33px;
     padding: 14px 0;
@@ -67,6 +68,10 @@
   }
 }
 
+.received_box {
+  margin-bottom: 30px;
+}
+
 .funding_history {
   .wrapper_tab {
     width: 50%;

src/components/ui/Tabs/index.tsx

@@ -8,7 +8,7 @@ import styles from './index.module.scss';
 type TabProps = {
   initialTabId: Tab['id'];
   tabs: Tab[];
-  mode: 'product_list' | 'product_detail' | 'funding_history';
+  mode: 'product_list' | 'product_detail' | 'funding_history' | 'received_box';
 };
 
 const Tabs = ({ initialTabId = 0, tabs, mode }: TabProps) => {

src/layouts/MyPage/FundingBox/FundingTab/index.module.scss

@@ -0,0 +1,7 @@
+.list_funding {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  row-gap: 30px;
+  max-width: 840px;
+  margin: 30px 0 100px;
+}

src/layouts/MyPage/FundingBox/FundingTab/index.tsx

@@ -0,0 +1,67 @@
+import { useQuery } from '@tanstack/react-query';
+
+import { useEffect, useState } from 'react';
+
+import EmptyItem from 'components/feature/EmptyItem';
+import Spinner from 'components/ui/Spinner';
+
+import { useInfinityScroll } from 'hooks/useInfinityScroll';
+import { getMyFundingItems } from 'services/api/v1/funding';
+
+import { MyFundingItemType } from 'types/funding';
+
+import MyFundingItem from '../MyFundingItem';
+
+import styles from './index.module.scss';
+
+type FundingTabProps = {
+  status: 'USABLE' | 'USED';
+};
+
+const FundingTab = ({ status }: FundingTabProps) => {
+  const [fundingItems, setFundingItems] = useState<MyFundingItemType[]>([]);
+  const [hasNext, setHasNext] = useState<boolean>(true);
+  const [page, setPage] = useState<number>(0);
+
+  const { data, isLoading, refetch } = useQuery({
+    queryKey: ['fundingItem', status],
+    queryFn: () => getMyFundingItems(status),
+  });
+
+  const observingTarget = useInfinityScroll(() => {
+    if (data) setPage(data.pageNumber + 1);
+  }, hasNext);
+
+  useEffect(() => {
+    refetch();
+  }, [page]);
+
+  useEffect(() => {
+    if (data) {
+      setFundingItems((prev) => [...prev, ...data.items]);
+      setHasNext(data.hasNext);
+    }
+  }, [data]);
+
+  if (!hasNext && fundingItems.length === 0) {
+    const emptyType = status === 'USABLE' ? 'funding_usable' : 'funding_used';
+
+    return <EmptyItem type={emptyType} />;
+  }
+
+  return (
+    <>
+      <ul className={styles.list_funding}>
+        {fundingItems.map((fundingItem) => (
+          <li key={fundingItem.id}>
+            <MyFundingItem fundingItem={fundingItem} status={status} />
+          </li>
+        ))}
+      </ul>
+      {isLoading && <Spinner />}
+      {hasNext && <div ref={observingTarget} />}
+    </>
+  );
+};
+
+export default FundingTab;

src/layouts/MyPage/FundingBox/MyFundingItem/index.module.scss

@@ -0,0 +1,67 @@
+@import 'styles/mixins.module';
+
+.badge {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+
+  &.used {
+    @include img-badge(0, -55px, 50px, 50px);
+  }
+
+  &.canceled {
+    @include img-badge(-55px, -55px, 50px, 50px);
+  }
+}
+
+.d_day {
+  display: inline-block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  background-color: #888;
+  color: #fff;
+  font-size: 14px;
+  padding: 5px 8px;
+  letter-spacing: -0.03em;
+}
+
+.wrapper_funding {
+  $width: 196px;
+
+  width: $width;
+  position: relative;
+
+  .wrapper_thumb {
+    @include wrapper-prod-img($width, 0);
+
+    .img_unavailable {
+      opacity: 0.4;
+    }
+  }
+
+  .txt_brand {
+    display: block;
+    padding-top: 9px;
+    font-size: 13px;
+    color: #5990c7;
+
+    @include text-ellipsis(1);
+  }
+
+  .txt_prod {
+    display: block;
+    padding-top: 4px;
+    font-size: 15px;
+    color: #666;
+
+    @include text-ellipsis(1);
+  }
+}
+
+.txt_date {
+  margin-top: 8px;
+  font-size: 12px;
+  color: #a0a0a0;
+  letter-spacing: -0.028em;
+}

src/layouts/MyPage/FundingBox/MyFundingItem/index.tsx

@@ -0,0 +1,50 @@
+import clsx from 'clsx';
+
+import { getDDay, getOneYearLaterDate } from 'utils/generate';
+
+import {
+  MyFundingItemType,
+  STATUS_TEXT,
+  FundingItemStatusType,
+} from 'types/funding';
+
+import styles from './index.module.scss';
+
+type MyFundingItemProps = {
+  fundingItem: MyFundingItemType;
+  status: 'USABLE' | 'USED';
+};
+
+const MyFundingItem = ({ fundingItem, status }: MyFundingItemProps) => {
+  const { product, receivedDate } = fundingItem;
+  const { name, photo, brandName } = product;
+  const expiredAt = getOneYearLaterDate(receivedDate).toString();
+
+  return (
+    <div className={styles.wrapper_funding}>
+      <div className={styles.wrapper_thumb}>
+        <img
+          src={photo}
+          alt={name}
+          className={clsx({ [styles.img_unavailable]: status !== 'USABLE' })}
+        />
+      </div>
+      <span className={styles.txt_brand}>{brandName}</span>
+      <strong className={styles.txt_prod}>{name}</strong>
+
+      {status === 'USABLE' ? (
+        <span className={styles.d_day}>D-{getDDay(expiredAt)}</span>
+      ) : (
+        <span className={clsx(styles.badge, styles[status.toLowerCase()])}>
+          {STATUS_TEXT[status as FundingItemStatusType]}
+        </span>
+      )}
+
+      <span className={styles.txt_date}>
+        {new Date(receivedDate).toLocaleString()}
+      </span>
+    </div>
+  );
+};
+
+export default MyFundingItem;

src/layouts/MyPage/GiftBox/GiftItem/index.module.scss

@@ -1,12 +1,5 @@
 @import 'styles/mixins.module';
 
-@mixin img-badge($x, $y, $width, $height) {
-  @include img-sprite($x, $y, $width, $height);
-
-  background-image: url('assets/badge_state.png');
-  background-size: 325px 105px;
-}
-
 .badge {
   position: absolute;
   top: 10px;

src/layouts/MyPage/GiftBox/GiftItem/index.tsx

@@ -1,5 +1,7 @@
 import clsx from 'clsx';
 
+import { getDDay } from 'utils/generate';
+
 import { Gift, STATUS_TEXT, StatusType } from 'types/Gift';
 
 import styles from './index.module.scss';
@@ -16,12 +18,6 @@ const GiftItem = ({ gift, status }: GiftItemProps) => {
     receivedAt,
   } = gift;
 
-  const getDDay = () => {
-    const diffTime = new Date(expiredAt).getTime() - new Date().getTime(); // 시간 차이, 단위: ms
-    const DDay = Math.ceil(diffTime / (1000 * 60 * 60 * 24)); // 밀리초 / 1일
-    return DDay;
-  };
-
   return (
     <div className={styles.wrapper_gift}>
       <div className={styles.wrapper_thumb}>
@@ -35,7 +31,7 @@ const GiftItem = ({ gift, status }: GiftItemProps) => {
       <strong className={styles.txt_prod}>{productName}</strong>
 
       {status === 'NOT_USED' ? (
-        <span className={styles.d_day}>D-{getDDay()}</span>
+        <span className={styles.d_day}>D-{getDDay(expiredAt)}</span>
       ) : (
         <span className={clsx(styles.badge, styles[status.toLowerCase()])}>
           {STATUS_TEXT[status]}

src/pages/MyPage/FundingBox/index.tsx

@@ -1,15 +1,48 @@
+import { useQuery } from '@tanstack/react-query';
+
+import Spinner from 'components/ui/Spinner';
+import Tabs from 'components/ui/Tabs';
+import FundingTab from 'layouts/MyPage/FundingBox/FundingTab';
+
+import { getMyFundingItems } from 'services/api/v1/funding';
+
+import { Tab } from 'types/tab';
+
 import styles from './index.module.scss';
 
 const FundingBox = () => {
+  const { data, isLoading } = useQuery({
+    queryKey: ['fundingItem'],
+    queryFn: () => getMyFundingItems(),
+  });
+
+  const tabs: Tab[] = [
+    {
+      id: 0,
+      name: `사용 가능한 펀딩아이템`,
+      content: <FundingTab status="USABLE" />,
+    },
+    {
+      id: 1,
+      name: `사용 완료한 펀딩아이템 `,
+      content: <FundingTab status="USED" />,
+    },
+  ];
+
   return (
-    <>
-      <h1 className={styles.txt_title}>
-        총 n개의
-        <br />
-        펀딩을 달성했습니다. 🎉
-      </h1>
-      탭
-    </>
+    <div>
+      {isLoading && <Spinner />}
+      {data && (
+        <>
+          <h1 className={styles.txt_title}>
+            총 {`${data.totalElements}`}개의
+            <br />
+            펀딩을 달성했습니다. 🎉
+          </h1>
+          <Tabs initialTabId={0} mode="received_box" tabs={tabs} />
+        </>
+      )}
+    </div>
   );
 };
 

src/pages/MyPage/GiftBox/index.tsx

@@ -26,7 +26,7 @@ const GiftBox = () => {
         <br />
         확인해보세요 🎁
       </h1>
-      <Tabs initialTabId={0} mode="product_list" tabs={tabs} />
+      <Tabs initialTabId={0} mode="received_box" tabs={tabs} />
     </>
   );
 };

src/services/api/v1/funding.ts

@@ -0,0 +1,18 @@
+import { PaginationResponse } from 'types/PaginationResponse';
+import { MyFundingItemType } from 'types/funding';
+
+import { apiV1 } from '.';
+
+export const getMyFundingItems = async (status?: string) => {
+  const baseUrl = `/funding/gift`;
+
+  if (status) {
+    const myFundingItems = await apiV1.get(`${baseUrl}?status=${status}`);
+
+    return myFundingItems.data as PaginationResponse<MyFundingItemType>;
+  }
+
+  const myFundingItems = await apiV1.get(baseUrl);
+
+  return myFundingItems.data as PaginationResponse<MyFundingItemType>;
+};