Feat/243

src/components/feature/EmptyItem/index.tsx

@@ -35,6 +35,14 @@ const EMPTY_ITEM_TEXT = {
     title: `주문내역이 없어요`,
     description: `소중한 친구에게 마음❤️을 전해보아요~!`,
   },
+  funding_contributed: {
+    title: `기여했던 펀딩이 없어요`,
+    description: `친구의 펀딩아이템에 마음을 전해보세요~!`,
+  },
+  funding_registered: {
+    title: `등록했던 펀딩이 없어요`,
+    description: `펀딩받고 싶은 선물🎁이 있나요?\n내 취향에 맞는 선물을 등록해보세요~!`,
+  },
 } as const;
 
 const EmptyItem = ({ type }: EmptyItemProps) => {

src/layouts/MyPage/FundingHistory/ContributedFunding/ContributedFundingItem/index.module.scss

@@ -0,0 +1,86 @@
+@import 'styles/mixins.module';
+
+.txt_date {
+  @include font(15px, 400);
+
+  margin-bottom: 10px;
+
+  .num_data {
+    @include font(15px, 700);
+
+    margin-left: 5px;
+  }
+}
+
+.cancel {
+  opacity: 0.5;
+}
+
+.wrapper_history {
+  margin-bottom: 30px;
+  border: 2px solid #ededed;
+  border-radius: 8px;
+  box-shadow: 0 1px 2px -1px rgba(0, 0, 0, 6%);
+
+  .section_status {
+    position: relative;
+    padding: 16px;
+    border-bottom: 1px solid #ededed;
+
+    .ico_receiver {
+      @include ico-gift-order(-125px, -15px, 18px, 12px);
+
+      display: inline-block;
+      margin: 2px 3px 0 0;
+    }
+
+    .txt_detail {
+      @include font(13px, 400, #666);
+
+      position: absolute;
+      right: 16px;
+      line-height: 16px;
+      letter-spacing: -0.024em;
+
+      .ico_detail {
+        @include ico-gift-order(-100px, -15px, 6px, 10px);
+
+        margin: 0 0 0 4px;
+      }
+    }
+  }
+
+  .section_product {
+    display: flex;
+    padding: 16px;
+
+    .thumb_product {
+      @include size(96px, 96px, 0 10px 0 0, 0);
+    }
+
+    .info_product {
+      line-height: 18px;
+
+      .txt_brand {
+        @include font(14px, 400, #888);
+      }
+
+      .txt_title {
+        @include font(14px, 400, #222);
+        @include text-ellipsis(2);
+
+        display: block;
+        overflow: hidden;
+        padding: 4px 0;
+      }
+
+      .num_price {
+        @include font(14px, 700, #000);
+
+        .txt_unit {
+          @include font(14px, 400, #000);
+        }
+      }
+    }
+  }
+}

src/layouts/MyPage/FundingHistory/ContributedFunding/ContributedFundingItem/index.tsx

@@ -0,0 +1,65 @@
+import clsx from 'clsx';
+import { Link } from 'react-router-dom';
+
+import { formatNumberWithComma, formatDateAndTime } from 'utils/format';
+
+import { ContributedFundingItemType } from 'types/fundingHistory';
+
+import styles from './index.module.scss';
+
+type ContributedFundingItemProps = { item: ContributedFundingItemType };
+
+const ContributedFundingItem = ({ item }: ContributedFundingItemProps) => {
+  const { product, fundingDetail } = item;
+  const { productId, name, photo, brandName } = product;
+  const { contributedAt, creatorName, contributedAmount, status } =
+    fundingDetail;
+
+  return (
+    <Link to={`/product/${productId}`}>
+      <p
+        className={clsx(styles.txt_date, {
+          [styles.cancel]: status === 'CANCEL_REFUND',
+        })}
+      >
+        기여한 날짜
+        <span className={styles.num_data}>
+          {formatDateAndTime(contributedAt)}
+        </span>
+      </p>
+
+      <div className={styles.wrapper_history}>
+        <div className={styles.section_status}>
+          <span className={styles.ico_receiver} />
+          {creatorName}
+          <span className={styles.txt_detail}>
+            상세보기
+            <span className={styles.ico_detail} />
+          </span>
+        </div>
+
+        <div
+          className={clsx(styles.section_product, {
+            [styles.cancel]: status === 'CANCEL_REFUND',
+          })}
+        >
+          <img
+            src={photo}
+            alt={`${name}상품이미지`}
+            className={styles.thumb_product}
+          />
+          <div className={styles.info_product}>
+            <p className={styles.txt_brand}>{brandName}</p>
+            <strong className={styles.txt_title}>{name}</strong>
+            <em className={styles.num_price}>
+              {formatNumberWithComma(contributedAmount)}
+              <span className={styles.txt_unit}>원</span>
+            </em>
+          </div>
+        </div>
+      </div>
+    </Link>
+  );
+};
+
+export default ContributedFundingItem;

src/layouts/MyPage/FundingHistory/ContributedFunding/index.module.scss

@@ -0,0 +1,3 @@
+.area_funding {
+  padding: 30px 0 100px;
+}

src/layouts/MyPage/FundingHistory/ContributedFunding/index.tsx

@@ -0,0 +1,71 @@
+import { useQuery } from '@tanstack/react-query';
+
+import { useEffect, useState } from 'react';
+
+import EmptyItem from 'components/feature/EmptyItem';
+import FilterBar from 'components/ui/FilterBar';
+import Spinner from 'components/ui/Spinner';
+
+import { useDateFilter } from 'hooks/useDateFilter';
+import { useInfinityScroll } from 'hooks/useInfinityScroll';
+import { getContributedFundingHistory } from 'services/api/v1/fundingHistory';
+
+import { ContributedFundingItemType } from 'types/fundingHistory';
+
+import ContributedFundingItem from './ContributedFundingItem';
+
+import styles from './index.module.scss';
+
+const ContributedFunding = () => {
+  const [fundingItems, setFundingItems] = useState<
+    ContributedFundingItemType[]
+  >([]);
+  const [hasNext, setHasNext] = useState<boolean>(true);
+  const [page, setPage] = useState<number>(0);
+
+  const { startDate, endDate } = useDateFilter();
+
+  const { data, isLoading, refetch, isFetched } = useQuery({
+    queryKey: ['contributedFundingHistory', startDate, endDate],
+    queryFn: () => getContributedFundingHistory(startDate, endDate),
+  });
+
+  const observingTarget = useInfinityScroll(() => {
+    if (data) setPage(data.pageNumber + 1);
+  }, hasNext);
+
+  useEffect(() => {
+    refetch();
+  }, [page]);
+
+  useEffect(() => {
+    if (data) {
+      setFundingItems(data.items);
+      setHasNext(data.hasNext);
+    }
+  }, [data]);
+
+  return (
+    <>
+      <section className={styles.area_funding}>
+        <FilterBar />
+        {isFetched &&
+          (fundingItems.length === 0 ? (
+            <EmptyItem type="funding_contributed" />
+          ) : (
+            <ul>
+              {fundingItems.map((item) => (
+                <li key={item.fundingDetail.fundingId}>
+                  <ContributedFundingItem item={item} />
+                </li>
+              ))}
+            </ul>
+          ))}
+      </section>
+      {isLoading && <Spinner />}
+      {!isLoading && hasNext && <div ref={observingTarget} />}
+    </>
+  );
+};
+
+export default ContributedFunding;

src/layouts/MyPage/FundingHistory/RegisteredFunding/RegisteredFundingItem/index.module.scss

@@ -0,0 +1,87 @@
+@import 'styles/mixins.module';
+
+.txt_date {
+  @include font(15px, 400);
+
+  margin-bottom: 10px;
+
+  .num_data {
+    @include font(15px, 700);
+
+    margin-left: 5px;
+  }
+}
+
+.wrapper_history {
+  margin-bottom: 30px;
+  border: 2px solid #ededed;
+  border-radius: 8px;
+  box-shadow: 0 1px 2px -1px rgba(0, 0, 0, 6%);
+
+  .section_status {
+    position: relative;
+    padding: 16px;
+    border-bottom: 1px solid #ededed;
+
+    .txt_detail {
+      @include font(13px, 400, #666);
+
+      position: absolute;
+      right: 16px;
+      line-height: 16px;
+      letter-spacing: -0.024em;
+
+      .ico_detail {
+        @include ico-gift-order(-100px, -15px, 6px, 10px);
+
+        margin: 0 0 0 4px;
+      }
+    }
+  }
+
+  .cancel {
+    color: #f00;
+  }
+}
+
+.section_product {
+  display: flex;
+  padding: 16px;
+
+  .thumb_product {
+    @include size(96px, 96px, 0 10px 0 0, 0);
+  }
+
+  .info_product {
+    line-height: 18px;
+
+    .txt_brand {
+      @include font(14px, 400, #888);
+    }
+
+    .txt_title {
+      @include font(14px, 400, #222);
+      @include text-ellipsis(2);
+
+      display: block;
+      overflow: hidden;
+      padding: 4px 0;
+    }
+  }
+}
+
+.txt_price {
+  @include font(14px, 400, #a5a5a5);
+
+  padding: 5px 6px 0 0;
+
+  .num_price {
+    @include font(14px, 700, #000);
+
+    margin-left: 10px;
+  }
+
+  .txt_unit {
+    @include font(14px, 400, #000);
+  }
+}

src/layouts/MyPage/FundingHistory/RegisteredFunding/RegisteredFundingItem/index.tsx

@@ -0,0 +1,63 @@
+import clsx from 'clsx';
+import { Link } from 'react-router-dom';
+
+import { formatNumberWithComma, formatDateAndTime } from 'utils/format';
+
+import {
+  REGISTERED_ITEM_STATUS,
+  RegisteredFundingItemType,
+} from 'types/fundingHistory';
+
+import styles from './index.module.scss';
+
+type RegisteredFundingItemProps = {
+  item: RegisteredFundingItemType;
+};
+
+const RegisteredFundingItem = ({ item }: RegisteredFundingItemProps) => {
+  return (
+    <Link to={`/product/${item.productId}`}>
+      <p className={styles.txt_date}>
+        등록한 날짜
+        <span className={styles.num_data}>
+          {formatDateAndTime(item.createdAt)}
+        </span>
+      </p>
+
+      <div className={styles.wrapper_history}>
+        <div
+          className={clsx(styles.section_status, {
+            [styles.cancel]: item.status === 'CANCEL',
+          })}
+        >
+          {REGISTERED_ITEM_STATUS[item.status]}
+          <span className={styles.txt_detail}>
+            상세보기
+            <span className={styles.ico_detail} />
+          </span>
+        </div>
+
+        <div className={styles.section_product}>
+          <img
+            src={item.productImage}
+            alt={`${item.productName}상품이미지`}
+            className={styles.thumb_product}
+          />
+          <div className={styles.info_product}>
+            <p className={styles.txt_brand}>{item.brandName}</p>
+            <strong className={styles.txt_title}>{item.productName}</strong>
+            <p className={styles.txt_price}>
+              목표 금액 |
+              <em className={styles.num_price}>
+                {formatNumberWithComma(item.goalAmount)}
+              </em>
+              <span className={styles.txt_unit}>원</span>
+            </p>
+          </div>
+        </div>
+      </div>
+    </Link>
+  );
+};
+
+export default RegisteredFundingItem;

src/layouts/MyPage/FundingHistory/RegisteredFunding/index.module.scss

@@ -0,0 +1,3 @@
+.area_funding {
+  padding: 30px 0 100px;
+}