From 7560bed97d8c78ea2921e473055db68f5c47a392 Mon Sep 17 00:00:00 2001 From: devkyoung2 Date: Tue, 11 Jun 2024 13:27:36 +0900 Subject: [PATCH 1/5] =?UTF-8?q?[refactor]:=20=ED=95=A8=EC=88=98=20?= =?UTF-8?q?=EC=9D=B4=EB=A6=84=20=EB=B3=80=EA=B2=BD(#261)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 펀딩함과 펀딩아이템이 헷갈리지 않도록 api 요청 함수 이름을 수정함 --- src/layouts/MyPage/FundingBox/FundingTab/index.tsx | 6 +++--- src/pages/MyPage/FundingBox/index.tsx | 4 ++-- src/services/api/v1/funding.ts | 2 +- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/layouts/MyPage/FundingBox/FundingTab/index.tsx b/src/layouts/MyPage/FundingBox/FundingTab/index.tsx index 4169fe9e..9bbdf645 100644 --- a/src/layouts/MyPage/FundingBox/FundingTab/index.tsx +++ b/src/layouts/MyPage/FundingBox/FundingTab/index.tsx @@ -6,7 +6,7 @@ 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 { getMyFundingBoxItems } from 'services/api/v1/funding'; import { MyFundingItemType } from 'types/funding'; @@ -24,8 +24,8 @@ const FundingTab = ({ status }: FundingTabProps) => { const [page, setPage] = useState(0); const { data, isLoading, refetch } = useQuery({ - queryKey: ['fundingItem', status], - queryFn: () => getMyFundingItems(status), + queryKey: ['fundingBoxItems', status], + queryFn: () => getMyFundingBoxItems(status), }); const observingTarget = useInfinityScroll(() => { diff --git a/src/pages/MyPage/FundingBox/index.tsx b/src/pages/MyPage/FundingBox/index.tsx index cce2ea40..34821e66 100644 --- a/src/pages/MyPage/FundingBox/index.tsx +++ b/src/pages/MyPage/FundingBox/index.tsx @@ -4,7 +4,7 @@ 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 { getMyFundingBoxItems } from 'services/api/v1/funding'; import { Tab } from 'types/tab'; @@ -13,7 +13,7 @@ import styles from './index.module.scss'; const FundingBox = () => { const { data, isLoading } = useQuery({ queryKey: ['fundingItem'], - queryFn: () => getMyFundingItems(), + queryFn: () => getMyFundingBoxItems(), }); const tabs: Tab[] = [ diff --git a/src/services/api/v1/funding.ts b/src/services/api/v1/funding.ts index 53c658a4..8b29a846 100644 --- a/src/services/api/v1/funding.ts +++ b/src/services/api/v1/funding.ts @@ -3,7 +3,7 @@ import { MyFundingItemType } from 'types/funding'; import { apiV1 } from '.'; -export const getMyFundingItems = async (status?: string) => { +export const getMyFundingBoxItems = async (status?: string) => { const baseUrl = `/funding/gift`; if (status) { From 30e67a959e0f6ef966e5bc0242f929c3faebca45 Mon Sep 17 00:00:00 2001 From: devkyoung2 Date: Fri, 14 Jun 2024 17:58:59 +0900 Subject: [PATCH 2/5] =?UTF-8?q?[feat]:=20=EC=A7=84=ED=96=89=EC=A4=91?= =?UTF-8?q?=EC=9D=B8=20=ED=8E=80=EB=94=A9=EC=95=84=EC=9D=B4=ED=85=9C=20?= =?UTF-8?q?=EC=9D=91=EB=8B=B5=ED=83=80=EC=9E=85=20=EC=A7=80=EC=A0=95(#261)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/types/funding.ts | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/src/types/funding.ts b/src/types/funding.ts index 1e6b14d8..48e67ee3 100644 --- a/src/types/funding.ts +++ b/src/types/funding.ts @@ -17,3 +17,21 @@ export type MyFundingItemType = { quantity: number; receivedDate: string; }; + +type EmptyObject = Record; + +export type MyInProgressFunding = + | { + fundingId: number; + progressRate: number; + remainAmount: number; + goalAmount: number; + accumulateAmount: number; + productId: number; + brandId: number; + brandPhoto: string; + productPhoto: string; + brandName: string; + productName: string; + } + | EmptyObject; From e65c477291d922654a4257ade60a6d7734c79848 Mon Sep 17 00:00:00 2001 From: devkyoung2 Date: Fri, 14 Jun 2024 17:59:14 +0900 Subject: [PATCH 3/5] =?UTF-8?q?[feat]:=20=EC=A7=84=ED=96=89=EC=A4=91?= =?UTF-8?q?=EC=9D=B8=20=ED=8E=80=EB=94=A9=EC=95=84=EC=9D=B4=ED=85=9C=20api?= =?UTF-8?q?=20=EC=9A=94=EC=B2=AD=20=ED=95=A8=EC=88=98=20=EC=9E=91=EC=84=B1?= =?UTF-8?q?(#261)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/services/api/v1/funding.ts | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/src/services/api/v1/funding.ts b/src/services/api/v1/funding.ts index 8b29a846..95eea99c 100644 --- a/src/services/api/v1/funding.ts +++ b/src/services/api/v1/funding.ts @@ -1,5 +1,5 @@ import { PaginationResponse } from 'types/PaginationResponse'; -import { MyFundingItemType } from 'types/funding'; +import { MyFundingItemType, MyInProgressFunding } from 'types/funding'; import { apiV1 } from '.'; @@ -16,3 +16,9 @@ export const getMyFundingBoxItems = async (status?: string) => { return myFundingItems.data as PaginationResponse; }; + +export const getMyFundingItem = async () => { + const myFundingItem = await apiV1.get('/funding/myItem'); + + return myFundingItem.data as MyInProgressFunding; +}; From 38885c3eea529728ce3ad642ace0e6af77f831a4 Mon Sep 17 00:00:00 2001 From: devkyoung2 Date: Fri, 14 Jun 2024 18:01:16 +0900 Subject: [PATCH 4/5] =?UTF-8?q?[feat]:=20=EC=A7=84=ED=96=89=EC=A4=91?= =?UTF-8?q?=EC=9D=B8=20=ED=8E=80=EB=94=A9=EC=95=84=EC=9D=B4=ED=85=9C=20?= =?UTF-8?q?=EB=8D=B0=EC=9D=B4=ED=84=B0=20=ED=8E=98=EC=B9=AD=20=EB=B0=8F=20?= =?UTF-8?q?=EC=A0=81=EC=9A=A9(#261)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Funding 컴포넌트에서 데이터 페칭 - 변경된 응답 타입에 맞게 FundingItem props 수정 --- .../MyPage/Funding/FundingItem/index.tsx | 37 +++++++++-------- src/pages/MyPage/Funding/index.tsx | 41 +++++++++---------- 2 files changed, 38 insertions(+), 40 deletions(-) diff --git a/src/layouts/MyPage/Funding/FundingItem/index.tsx b/src/layouts/MyPage/Funding/FundingItem/index.tsx index c647374a..f06a5f87 100644 --- a/src/layouts/MyPage/Funding/FundingItem/index.tsx +++ b/src/layouts/MyPage/Funding/FundingItem/index.tsx @@ -6,29 +6,31 @@ import FundingCancelModal from 'components/ui/Modal/FundingCancelModal'; import { useModal } from 'hooks/useModal'; import { formatNumberWithUnit } from 'utils/format'; +import { MyInProgressFunding } from 'types/funding'; + import styles from './index.module.scss'; -// TODO : 펀딩 API 확인후 분리 예정 -type FundingItemProps = { - fundingId: number; - imgUrl: string; - price: number; - productName: string; - productId: number; - brandName: string; - brandId: number; - brandThumbnail: string; -}; +type FundingItemProps = Pick< + MyInProgressFunding, + | 'fundingId' + | 'productPhoto' + | 'goalAmount' + | 'productName' + | 'productId' + | 'brandName' + | 'brandPhoto' + | 'brandId' +>; const FundingItem = ({ fundingId, - imgUrl, - price, + productPhoto, + goalAmount, productName, productId, brandName, + brandPhoto, brandId, - brandThumbnail, }: FundingItemProps) => { const { open, isOpen, close, scrollPos } = useModal(); @@ -41,10 +43,9 @@ const FundingItem = ({ scrollPos={scrollPos} /> - {/* TODO : Thumbnail 리팩토링시 교체 */} {`${productName}상품이미지`} @@ -57,7 +58,7 @@ const FundingItem = ({
{`${brandName}로고이미지`} @@ -67,7 +68,7 @@ const FundingItem = ({

- 목표금액{formatNumberWithUnit(price)} + 목표금액{formatNumberWithUnit(goalAmount)}

diff --git a/src/pages/MyPage/Funding/index.tsx b/src/pages/MyPage/Funding/index.tsx index ae1629ea..35cd6ffc 100644 --- a/src/pages/MyPage/Funding/index.tsx +++ b/src/pages/MyPage/Funding/index.tsx @@ -1,47 +1,44 @@ +import { useQuery } from '@tanstack/react-query'; + import EmptyItem from 'components/feature/EmptyItem'; +import Spinner from 'components/ui/Spinner'; import FundingItem from 'layouts/MyPage/Funding/FundingItem'; import { useUserStore } from 'store/useUserStore'; +import { getMyFundingItem } from 'services/api/v1/funding'; + import styles from './index.module.scss'; -// 목데이터 -const data = { - hasFunding: true, - userName: '보경', - fundingId: 1, - imgUrl: - 'https://img1.kakaocdn.net/thumb/C320x320@2x.fwebp.q82/?fname=https%3A%2F%2Fst.kakaocdn.net%2Fproduct%2Fgift%2Fproduct%2F20240412000831_223be6cfd2eb40e3bbaf238fca8a56e9', - fundingItemName: '참이 포함된 트레이드마크 체인 팔찌', - fundingItemProductId: 9632965, - fundingItemBrandName: '구찌', - fundingItemBrandThumbnail: - 'https://img1.kakaocdn.net/thumb/C200x200@2x.fwebp.q82/?fname=https%3A%2F%2Fst.kakaocdn.net%2Fproduct%2Fgift%2Fgift_brand%2F20240402164826_a474afeeff5e42d9bfd4d64025303e32.png', - fundingPrice: 600000, - brandId: 11481, +const isEmptyObject = (obj: object): boolean => { + return Object.keys(obj).length === 0; }; const Funding = () => { const { name } = useUserStore(); + const { data, isFetched, isLoading } = useQuery({ + queryKey: ['myFundingItem'], + queryFn: () => getMyFundingItem(), + }); return ( <>
{`${name}님의 \n펀딩아이템`}
- {data.hasFunding ? ( + {isFetched && data && !isEmptyObject(data) ? ( ) : ( )} -
펀딩 아이템 추천 영역
+ {isLoading && } ); }; From 386c4342b51b4ef12774a8e91988183daa26dc3b Mon Sep 17 00:00:00 2001 From: devkyoung2 Date: Fri, 14 Jun 2024 18:15:13 +0900 Subject: [PATCH 5/5] =?UTF-8?q?[feat]:=20=EC=A7=84=ED=96=89=EC=A4=91?= =?UTF-8?q?=EC=9D=B8=20=ED=8E=80=EB=94=A9=EC=95=84=EC=9D=B4=ED=85=9C=20?= =?UTF-8?q?=EC=A7=84=ED=96=89=EC=83=81=ED=99=A9=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EB=A0=8C=EB=8D=94=EB=A7=81=20=EB=B0=8F=20?= =?UTF-8?q?=EC=8B=A4=EB=8D=B0=EC=9D=B4=ED=84=B0=20=EC=A0=81=EC=9A=A9(#261)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../MyPage/Funding/FundingProgress/index.tsx | 33 +++++++++++-------- src/pages/MyPage/Funding/index.tsx | 28 ++++++++++------ 2 files changed, 38 insertions(+), 23 deletions(-) diff --git a/src/layouts/MyPage/Funding/FundingProgress/index.tsx b/src/layouts/MyPage/Funding/FundingProgress/index.tsx index 56506751..6ab60e39 100644 --- a/src/layouts/MyPage/Funding/FundingProgress/index.tsx +++ b/src/layouts/MyPage/Funding/FundingProgress/index.tsx @@ -1,49 +1,56 @@ +import ProgressBar from 'components/ui/ProgressBar'; + import { formatNumberToPercent, formatNumberWithUnit } from 'utils/format'; +import { MyInProgressFunding } from 'types/funding'; + import styles from './index.module.scss'; -const data = { - current: 123456, - target: 990000, -}; +type FundingProgressProps = Pick< + MyInProgressFunding, + 'remainAmount' | 'goalAmount' | 'accumulateAmount' +>; -const FundingProgress = () => { +const FundingProgress = ({ + remainAmount, + goalAmount, + accumulateAmount, +}: FundingProgressProps) => { return (

펀딩{' '} - {formatNumberToPercent(data.current, data.target)} + {formatNumberToPercent(accumulateAmount, goalAmount)} {' '} 완료

목표 달성까지{' '} - {formatNumberWithUnit(data.target - data.current)} + {formatNumberWithUnit(remainAmount)} {' '} 남았어요

- {/* TODO : 프로그레스바 삽입 예정 */} -
- 프로그레스바 +
+

목표 금액 - {formatNumberWithUnit(data.target)} + {formatNumberWithUnit(goalAmount)}

모인 금액 - {formatNumberWithUnit(data.current)} + {formatNumberWithUnit(accumulateAmount)}

잔여 금액 - {formatNumberWithUnit(data.target - data.current)} + {formatNumberWithUnit(remainAmount)}

diff --git a/src/pages/MyPage/Funding/index.tsx b/src/pages/MyPage/Funding/index.tsx index 35cd6ffc..a63ee125 100644 --- a/src/pages/MyPage/Funding/index.tsx +++ b/src/pages/MyPage/Funding/index.tsx @@ -3,6 +3,7 @@ import { useQuery } from '@tanstack/react-query'; import EmptyItem from 'components/feature/EmptyItem'; import Spinner from 'components/ui/Spinner'; import FundingItem from 'layouts/MyPage/Funding/FundingItem'; +import FundingProgress from 'layouts/MyPage/Funding/FundingProgress'; import { useUserStore } from 'store/useUserStore'; @@ -25,16 +26,23 @@ const Funding = () => { <>
{`${name}님의 \n펀딩아이템`}
{isFetched && data && !isEmptyObject(data) ? ( - + <> + + + ) : ( )}