From f72dc824f2f42f7569bb7f233c8e01768d807d84 Mon Sep 17 00:00:00 2001 From: doggopawer Date: Fri, 17 Nov 2023 17:49:38 +0900 Subject: [PATCH 01/31] =?UTF-8?q?:sparkles:=20FilterFormDialog=20=EC=BD=94?= =?UTF-8?q?=EB=93=9C=20=ED=98=95=EC=8B=9D=20=EC=88=98=EC=A0=95=20-=20Categ?= =?UTF-8?q?ory,=20PriceRange=EC=9D=98=20value=EB=A5=BC=20=EC=8B=A4=20API?= =?UTF-8?q?=EC=9D=98=20=EA=B0=92=EC=9D=84=20=EC=A3=BC=EB=8F=84=EB=A1=9D=20?= =?UTF-8?q?=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../cards/components/card-list/CardList.tsx | 8 +-- .../filter-form-dialog/FilterFormDialog.tsx | 60 ++++++++++--------- src/hooks/api/queries/useCardsQuery.ts | 4 +- src/services/card/card.ts | 4 +- src/types/card.ts | 9 ++- 5 files changed, 45 insertions(+), 40 deletions(-) diff --git a/src/app/(root)/(routes)/cards/components/card-list/CardList.tsx b/src/app/(root)/(routes)/cards/components/card-list/CardList.tsx index c0f6adf2..e8474b79 100644 --- a/src/app/(root)/(routes)/cards/components/card-list/CardList.tsx +++ b/src/app/(root)/(routes)/cards/components/card-list/CardList.tsx @@ -17,11 +17,11 @@ const CardListContent = () => { const [cardTitle, setCardTitle] = useState( searchParams.get('cardTitle' as string) || '', ) - const [category, setCatgegory] = useState( - (searchParams.get('category') as Category) || '전체보기', + const [category, setCatgegory] = useState( + (searchParams.get('category') as Category['key']) || undefined, ) - const [priceRange, setPriceRange] = useState( - (searchParams.get('priceRange') as PriceRange) || '전체보기', + const [priceRange, setPriceRange] = useState( + (searchParams.get('priceRange') as PriceRange['key']) || undefined, ) // TODO: 현재 API 명세에 status에 어떤 값을 줘야하는지에 대한 정의가 되어 있지 않기 때문에 임시로 상수 값을 전달함 => 추후에 실제 동작 값으로 고치기 diff --git a/src/app/(root)/(routes)/cards/components/filter-form-dialog/FilterFormDialog.tsx b/src/app/(root)/(routes)/cards/components/filter-form-dialog/FilterFormDialog.tsx index 896d5aba..f96d31b5 100644 --- a/src/app/(root)/(routes)/cards/components/filter-form-dialog/FilterFormDialog.tsx +++ b/src/app/(root)/(routes)/cards/components/filter-form-dialog/FilterFormDialog.tsx @@ -16,13 +16,14 @@ import { SelectTrigger, } from '@/components/ui/select' import Assets from '@/config/assets' +import { CATEGORY_OBJS, PRICE_RANGE, PRICE_RANGE_OBJS } from '@/constants/card' import { Category, PriceRange } from '@/types/card' type FilterFormDialogProps = { - priceRange: PriceRange - category: Category - setPriceRange: (priceRange: PriceRange) => void - setCategory: (category: Category) => void + priceRange: PriceRange['key'] + category: Category['key'] + setPriceRange: (priceRange: PriceRange['key']) => void + setCategory: (category: Category['key']) => void } const FilterFormDialog = ({ @@ -39,20 +40,12 @@ const FilterFormDialog = ({ setIsOpen(false) } - const categories: Category[] = [ - '남성의류', - '여성의류', - '잡화ㆍ액세서리', - '신발', - '스포츠', - '도서', - '전자기기', - '가구ㆍ인테리어', - '가전', - ] - // FIXME: 선택 안된 경우 값으로 변경 const hasNoFilter = priceRange !== undefined || category !== undefined + const priceRangeValue = PRICE_RANGE_OBJS.find(({ key }) => key === priceRange) + ?.value + const getCategoryValue = (categoryKey: Category['key']) => + CATEGORY_OBJS.find(({ key }) => key === categoryKey)?.value return ( <> @@ -89,19 +82,23 @@ const FilterFormDialog = ({ @@ -113,19 +110,24 @@ const FilterFormDialog = ({ 카테고리 - {categories.map((currentCategory: Category, index) => ( + {CATEGORY_OBJS.map((currentCategory: Category) => ( ))} diff --git a/src/hooks/api/queries/useCardsQuery.ts b/src/hooks/api/queries/useCardsQuery.ts index b2a5db76..7ec43a0d 100644 --- a/src/hooks/api/queries/useCardsQuery.ts +++ b/src/hooks/api/queries/useCardsQuery.ts @@ -3,8 +3,8 @@ import { getCardList } from '@/services/card/card' import { Category, PriceRange } from '@/types/card' export type UseCardsQueryParams = { - category: Category - priceRange: PriceRange + category: Category['key'] + priceRange: PriceRange['key'] cardTitle: string } diff --git a/src/services/card/card.ts b/src/services/card/card.ts index c26bd163..2ad44271 100644 --- a/src/services/card/card.ts +++ b/src/services/card/card.ts @@ -4,8 +4,8 @@ import type { Category, PriceRange, TradeStatus } from '@/types/card' import apiClient from '../apiClient' export type Getcards = { - category: Category - priceRange: PriceRange + category: Category['key'] + priceRange: PriceRange['key'] cardTitle: string cursorId: number } diff --git a/src/types/card.ts b/src/types/card.ts index 9e315d38..02035503 100644 --- a/src/types/card.ts +++ b/src/types/card.ts @@ -4,6 +4,9 @@ import { PRICE_RANGE, TRADE_TYPE, CARD_TRADE_STATUS, + CATEGORY_OBJS, + TRADE_TYPE_OBJS, + PRICE_RANGE_OBJS, } from '@/constants/card' interface Card { @@ -39,10 +42,10 @@ interface CardImages { image: string | StaticImageData } -type Category = (typeof CATEGORY)[number] +type Category = (typeof CATEGORY_OBJS)[number] type TradeStatus = (typeof CARD_TRADE_STATUS)[number] -type PriceRange = (typeof PRICE_RANGE)[number] -type TradeType = (typeof TRADE_TYPE)[number] +type PriceRange = (typeof PRICE_RANGE_OBJS)[number] +type TradeType = (typeof TRADE_TYPE_OBJS)[number] export type { Category, From 97ca0a91de58c6d1aca15403447127217702c08b Mon Sep 17 00:00:00 2001 From: doggopawer Date: Sun, 19 Nov 2023 14:39:47 +0900 Subject: [PATCH 02/31] =?UTF-8?q?:sparkles:=20CardListContent,=20CardList?= =?UTF-8?q?=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EB=B6=84=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../card-list-content/CardListContent.tsx | 76 +++++++++++++ .../components/card-list-content/index.tsx | 3 + .../cards/components/card-list/CardList.tsx | 106 ++++-------------- src/app/(root)/(routes)/cards/page.tsx | 4 +- 4 files changed, 102 insertions(+), 87 deletions(-) create mode 100644 src/app/(root)/(routes)/cards/components/card-list-content/CardListContent.tsx create mode 100644 src/app/(root)/(routes)/cards/components/card-list-content/index.tsx diff --git a/src/app/(root)/(routes)/cards/components/card-list-content/CardListContent.tsx b/src/app/(root)/(routes)/cards/components/card-list-content/CardListContent.tsx new file mode 100644 index 00000000..658fbbeb --- /dev/null +++ b/src/app/(root)/(routes)/cards/components/card-list-content/CardListContent.tsx @@ -0,0 +1,76 @@ +'use client' + +import { useEffect, useRef, useState } from 'react' +import { useSearchParams } from 'next/navigation' +import ExceptionBoundary from '@/components/domain/exception-boundary' +import MaxWidthWrapper from '@/components/domain/max-width-wrapper' +import { useCardsQuery } from '@/hooks/api/queries/useCardsQuery' +import { useIntersectionObserver } from '@/hooks/useIntersectionObserver' +import { Category, PriceRange } from '@/types/card' +import CardList from '../card-list/CardList' +import FilterFormDialog from '../filter-form-dialog' +import SearchInput from '../search-input' + +const CardListContent = () => { + const searchParams = useSearchParams() + const [cardTitle, setCardTitle] = useState( + searchParams.get('cardTitle' as string) || '', + ) + const [category, setCatgegory] = useState( + (searchParams.get('category') as Category['key']) || undefined, + ) + const [priceRange, setPriceRange] = useState( + (searchParams.get('priceRange') as PriceRange['key']) || undefined, + ) + + // TODO: 현재 API 명세에 status에 어떤 값을 줘야하는지에 대한 정의가 되어 있지 않기 때문에 임시로 상수 값을 전달함 => 추후에 실제 동작 값으로 고치기 + const { data, fetchNextPage, isError, isFetchingNextPage, isLoading } = + useCardsQuery({ + category: category, + priceRange: priceRange, + cardTitle: cardTitle, + }) + + const lastElementRef = useRef(null) + const entry = useIntersectionObserver(lastElementRef, { threshold: 1.0 }) + + useEffect(() => { + if (isFetchingNextPage) { + return + } + + if (entry?.isIntersecting) { + fetchNextPage() + } + }, [entry?.isIntersecting, fetchNextPage, isFetchingNextPage]) + + // TODO: 아이템이 없을시 어떤 UI를 보여줄지 차후에 결정 + + const isEmpty = data?.pages[0].length === 0 + + return ( + +
+ + +
+
+ + + +
+
+ + ) +} +export default CardListContent diff --git a/src/app/(root)/(routes)/cards/components/card-list-content/index.tsx b/src/app/(root)/(routes)/cards/components/card-list-content/index.tsx new file mode 100644 index 00000000..37ab04a9 --- /dev/null +++ b/src/app/(root)/(routes)/cards/components/card-list-content/index.tsx @@ -0,0 +1,3 @@ +import CardListContent from './CardListContent' + +export default CardListContent diff --git a/src/app/(root)/(routes)/cards/components/card-list/CardList.tsx b/src/app/(root)/(routes)/cards/components/card-list/CardList.tsx index e8474b79..8c2c5684 100644 --- a/src/app/(root)/(routes)/cards/components/card-list/CardList.tsx +++ b/src/app/(root)/(routes)/cards/components/card-list/CardList.tsx @@ -1,88 +1,24 @@ -'use client' - -import { useEffect, useRef, Fragment, useState } from 'react' -import { useSearchParams } from 'next/navigation' +import { Fragment } from 'react' +import { InfiniteData } from '@tanstack/react-query' import TradeStatusCard from '@/components/domain/card/trade-status-card' -import ExceptionBoundary from '@/components/domain/exception-boundary' -import MaxWidthWrapper from '@/components/domain/max-width-wrapper' -import { useCardsQuery } from '@/hooks/api/queries/useCardsQuery' -import { useIntersectionObserver } from '@/hooks/useIntersectionObserver' import { Card } from '@/types/card' -import { Category, PriceRange } from '@/types/card' -import FilterFormDialog from '../filter-form-dialog' -import SearchInput from '../search-input' - -const CardListContent = () => { - const searchParams = useSearchParams() - const [cardTitle, setCardTitle] = useState( - searchParams.get('cardTitle' as string) || '', - ) - const [category, setCatgegory] = useState( - (searchParams.get('category') as Category['key']) || undefined, - ) - const [priceRange, setPriceRange] = useState( - (searchParams.get('priceRange') as PriceRange['key']) || undefined, - ) - - // TODO: 현재 API 명세에 status에 어떤 값을 줘야하는지에 대한 정의가 되어 있지 않기 때문에 임시로 상수 값을 전달함 => 추후에 실제 동작 값으로 고치기 - const { data, fetchNextPage, isError, isFetchingNextPage, isLoading } = - useCardsQuery({ - category: category, - priceRange: priceRange, - cardTitle: cardTitle, - }) - - const lastElementRef = useRef(null) - const entry = useIntersectionObserver(lastElementRef, { threshold: 1.0 }) - - useEffect(() => { - if (isFetchingNextPage) { - return - } - - if (entry?.isIntersecting) { - fetchNextPage() - } - }, [entry?.isIntersecting, fetchNextPage, isFetchingNextPage]) - - // TODO: 아이템이 없을시 어떤 UI를 보여줄지 차후에 결정 - - const isEmpty = data?.pages[0].length === 0 - - return ( - -
- - -
-
- - <> - {data?.pages.map((currentPage: any, pageIndex) => ( - - {currentPage.map((card: Card) => ( -
- -
- ))} - - ))} - - -
-
- - ) -} -export default CardListContent +const CardList = ({ + data, +}: { + data: InfiniteData | undefined +}) => ( + <> + {data?.pages.map((currentPage: any, pageIndex) => ( + + {currentPage.map((card: Card) => ( +
+ +
+ ))} + + ))} + +) + +export default CardList diff --git a/src/app/(root)/(routes)/cards/page.tsx b/src/app/(root)/(routes)/cards/page.tsx index 08adf368..8bb2c33d 100644 --- a/src/app/(root)/(routes)/cards/page.tsx +++ b/src/app/(root)/(routes)/cards/page.tsx @@ -1,6 +1,6 @@ import { FunctionComponent } from 'react' import PageTitle from '@/components/domain/page-title' -import CardList from './components/card-list' +import CardListContent from './components/card-list-content' interface CardListPageProps {} @@ -8,7 +8,7 @@ const CardListPage: FunctionComponent = ({}) => { return (
- +
) } From 41e0cb29b281438e15f518f6b1f0f510b95812a7 Mon Sep 17 00:00:00 2001 From: doggopawer Date: Sun, 19 Nov 2023 14:47:50 +0900 Subject: [PATCH 03/31] =?UTF-8?q?:sparkles:=20MyCardListContent,=20MyCardL?= =?UTF-8?q?ist=20=EB=B6=84=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../MyCardListContent.tsx | 58 +++++++++++++ .../components/my-card-list-content/index.tsx | 3 + .../components/my-card-list/MyCardList.tsx | 81 ++++--------------- .../(root)/(routes)/mypage/mycards/page.tsx | 4 +- 4 files changed, 80 insertions(+), 66 deletions(-) create mode 100644 src/app/(root)/(routes)/mypage/mycards/components/my-card-list-content/MyCardListContent.tsx create mode 100644 src/app/(root)/(routes)/mypage/mycards/components/my-card-list-content/index.tsx diff --git a/src/app/(root)/(routes)/mypage/mycards/components/my-card-list-content/MyCardListContent.tsx b/src/app/(root)/(routes)/mypage/mycards/components/my-card-list-content/MyCardListContent.tsx new file mode 100644 index 00000000..4e0ba3be --- /dev/null +++ b/src/app/(root)/(routes)/mypage/mycards/components/my-card-list-content/MyCardListContent.tsx @@ -0,0 +1,58 @@ +'use client' + +import { useEffect, useRef, useState } from 'react' +import ExceptionBoundary from '@/components/domain/exception-boundary' +import MaxWidthWrapper from '@/components/domain/max-width-wrapper' +import { useMyCardsQuery } from '@/hooks/api/queries/useMyCardsQuery' +import { useIntersectionObserver } from '@/hooks/useIntersectionObserver' +import { TradeStatus } from '@/types/card' +import MyCardList from '../my-card-list/MyCardList' +import TradeStatusTabs from '../trade-status-tabs' + +const MyCardListContent = () => { + const [tradeStatus, setTradeStatus] = useState('TRADE_AVAILABLE') + + const { data, fetchNextPage, isLoading, isError, isFetchingNextPage } = + useMyCardsQuery({ + tradeStatus, + }) + + const lastElementRef = useRef(null) + const entry = useIntersectionObserver(lastElementRef, { threshold: 1.0 }) + + useEffect(() => { + if (isFetchingNextPage) { + return + } + + if (entry?.isIntersecting) { + fetchNextPage() + } + }, [entry?.isIntersecting, fetchNextPage, isFetchingNextPage]) + + const isEmpty = data?.pages[0].length === 0 + + return ( + +
+ +
+
+ + + +
+ +
+ + ) +} +export default MyCardListContent diff --git a/src/app/(root)/(routes)/mypage/mycards/components/my-card-list-content/index.tsx b/src/app/(root)/(routes)/mypage/mycards/components/my-card-list-content/index.tsx new file mode 100644 index 00000000..1489b118 --- /dev/null +++ b/src/app/(root)/(routes)/mypage/mycards/components/my-card-list-content/index.tsx @@ -0,0 +1,3 @@ +import MyCardListContent from './MyCardListContent' + +export default MyCardListContent diff --git a/src/app/(root)/(routes)/mypage/mycards/components/my-card-list/MyCardList.tsx b/src/app/(root)/(routes)/mypage/mycards/components/my-card-list/MyCardList.tsx index 21a69a2c..76bb9131 100644 --- a/src/app/(root)/(routes)/mypage/mycards/components/my-card-list/MyCardList.tsx +++ b/src/app/(root)/(routes)/mypage/mycards/components/my-card-list/MyCardList.tsx @@ -1,69 +1,22 @@ -'use client' - -import { useEffect, useRef, Fragment, useState } from 'react' -import ExceptionBoundary from '@/components/domain/exception-boundary' -import MaxWidthWrapper from '@/components/domain/max-width-wrapper' -import { useMyCardsQuery } from '@/hooks/api/queries/useMyCardsQuery' -import { useIntersectionObserver } from '@/hooks/useIntersectionObserver' +import { Fragment } from 'react' +import { InfiniteData } from '@tanstack/react-query' import { Card } from '@/types/card' -import { TradeStatus } from '@/types/card' import MyCard from '../my-card' -import TradeStatusTabs from '../trade-status-tabs' - -const MyCardList = () => { - const [tradeStatus, setTradeStatus] = useState('TRADE_AVAILABLE') - - const { data, fetchNextPage, isLoading, isError, isFetchingNextPage } = - useMyCardsQuery({ - tradeStatus, - }) - - const lastElementRef = useRef(null) - const entry = useIntersectionObserver(lastElementRef, { threshold: 1.0 }) - - useEffect(() => { - if (isFetchingNextPage) { - return - } - - if (entry?.isIntersecting) { - fetchNextPage() - } - }, [entry?.isIntersecting, fetchNextPage, isFetchingNextPage]) - - const isEmpty = data?.pages[0].length === 0 - - return ( - -
- -
-
- - <> - {data?.pages.map((currentPage, pageIndex) => ( - - {currentPage.map((card: Card) => ( - - ))} - - ))} - - - {/*TODO: 로딩 부분에 대한 처리 논의 후 구체적으로 적용 할 것 => 를 사용할지, isLoading으로 처리할지 논의 */} -
+const MyCardList = ({ + data, +}: { + data: InfiniteData | undefined +}) => ( + <> + {data?.pages.map((currentPage, pageIndex) => ( + + {currentPage.map((card: Card) => ( + + ))} + + ))} + +) -
- - ) -} export default MyCardList diff --git a/src/app/(root)/(routes)/mypage/mycards/page.tsx b/src/app/(root)/(routes)/mypage/mycards/page.tsx index 8cd658ab..ba241557 100644 --- a/src/app/(root)/(routes)/mypage/mycards/page.tsx +++ b/src/app/(root)/(routes)/mypage/mycards/page.tsx @@ -1,6 +1,6 @@ import { FunctionComponent } from 'react' import PageTitle from '@/components/domain/page-title' -import MyCardList from './components/my-card-list' +import MyCardListContent from './components/my-card-list-content' interface MyCardListPageProps {} @@ -8,7 +8,7 @@ const MyCardListPage: FunctionComponent = ({}) => { return (
- +
) } From b63a7726475785662ef293a2037c1a732fa6e8a5 Mon Sep 17 00:00:00 2001 From: doggopawer Date: Sun, 19 Nov 2023 15:07:40 +0900 Subject: [PATCH 04/31] =?UTF-8?q?:sparkles:=20MySuggestionListContent,=20L?= =?UTF-8?q?ist=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EB=B6=84=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../my-suggestion-card/MySuggestionCard.tsx | 6 +- .../MySuggestionListContent.tsx | 69 +++++++++++ .../my-suggestion-list-content/index.tsx | 3 + .../my-suggestion-list/MySuggestionList.tsx | 115 +++++------------- .../(routes)/mypage/suggestions/page.tsx | 2 +- 5 files changed, 108 insertions(+), 87 deletions(-) create mode 100644 src/app/(root)/(routes)/mypage/suggestions/components/my-suggestion-list-content/MySuggestionListContent.tsx create mode 100644 src/app/(root)/(routes)/mypage/suggestions/components/my-suggestion-list-content/index.tsx diff --git a/src/app/(root)/(routes)/mypage/suggestions/components/my-suggestion-card/MySuggestionCard.tsx b/src/app/(root)/(routes)/mypage/suggestions/components/my-suggestion-card/MySuggestionCard.tsx index 6ad59098..4347c534 100644 --- a/src/app/(root)/(routes)/mypage/suggestions/components/my-suggestion-card/MySuggestionCard.tsx +++ b/src/app/(root)/(routes)/mypage/suggestions/components/my-suggestion-card/MySuggestionCard.tsx @@ -60,12 +60,12 @@ const WaitingButton = () => { } type SuggestCheckCardProps = { - mySuggestionListResponseData: MySuggestionRes & { pageInfo: number } + mySuggestionRes: MySuggestionRes & { pageInfo: number } suggestionTypeState: SuggestionType directionTypeState: DirectionType } const MySuggestionCard = ({ - mySuggestionListResponseData: { + mySuggestionRes: { suggestionInfo: { suggestionId, suggestionStatus, @@ -115,7 +115,7 @@ const MySuggestionCard = ({ {cardTitle} {itemName} - {priceRange} + {priceRange['value']} {suggestionStatus === 'WAITING' ? ( directionType === 'RECEIVE' ? ( diff --git a/src/app/(root)/(routes)/mypage/suggestions/components/my-suggestion-list-content/MySuggestionListContent.tsx b/src/app/(root)/(routes)/mypage/suggestions/components/my-suggestion-list-content/MySuggestionListContent.tsx new file mode 100644 index 00000000..95833e6c --- /dev/null +++ b/src/app/(root)/(routes)/mypage/suggestions/components/my-suggestion-list-content/MySuggestionListContent.tsx @@ -0,0 +1,69 @@ +'use client' + +import { useEffect, useRef, useState } from 'react' +import { useSearchParams } from 'next/navigation' +import ExceptionBoundary from '@/components/domain/exception-boundary' +import MaxWidthWrapper from '@/components/domain/max-width-wrapper' +import { useMySuggestionsQuery } from '@/hooks/api/queries/useMySuggestionsQuery' +import { useIntersectionObserver } from '@/hooks/useIntersectionObserver' +import { DirectionType, SuggestionType } from '@/types/suggestion' +import MySuggestionList from '../my-suggestion-list/MySuggestionList' +import SuggestionStatusTabs from '../suggestion-status-tabs' + +const MySuggestionListContent = () => { + const [suggestionTypeState, setSuggestionTypeState] = + useState('OFFER') + const [directionTypeState, setDirectionTypeState] = + useState('RECEIVE') + const searchParams = useSearchParams() + + const { data, fetchNextPage, isLoading, isError, isFetchingNextPage } = + useMySuggestionsQuery( + suggestionTypeState, + directionTypeState, + searchParams.get('cardId'), + ) + + const lastElementRef = useRef(null) + const entry = useIntersectionObserver(lastElementRef, { threshold: 1.0 }) + + useEffect(() => { + if (isFetchingNextPage) { + return + } + + if (entry?.isIntersecting) { + fetchNextPage() + } + }, [entry?.isIntersecting, fetchNextPage, isFetchingNextPage]) + + const isEmpty = data?.pages[0].length === 0 + + return ( + +
+ +
+
+ + + +
+ +
+ + ) +} +export default MySuggestionListContent diff --git a/src/app/(root)/(routes)/mypage/suggestions/components/my-suggestion-list-content/index.tsx b/src/app/(root)/(routes)/mypage/suggestions/components/my-suggestion-list-content/index.tsx new file mode 100644 index 00000000..3395bec3 --- /dev/null +++ b/src/app/(root)/(routes)/mypage/suggestions/components/my-suggestion-list-content/index.tsx @@ -0,0 +1,3 @@ +import MySuggestionListContent from './MySuggestionListContent' + +export default MySuggestionListContent diff --git a/src/app/(root)/(routes)/mypage/suggestions/components/my-suggestion-list/MySuggestionList.tsx b/src/app/(root)/(routes)/mypage/suggestions/components/my-suggestion-list/MySuggestionList.tsx index fe6b9bbd..868e7e77 100644 --- a/src/app/(root)/(routes)/mypage/suggestions/components/my-suggestion-list/MySuggestionList.tsx +++ b/src/app/(root)/(routes)/mypage/suggestions/components/my-suggestion-list/MySuggestionList.tsx @@ -1,89 +1,38 @@ -'use client' - -import { useEffect, useRef, Fragment, useState } from 'react' -import { useSearchParams } from 'next/navigation' -import ExceptionBoundary from '@/components/domain/exception-boundary' -import MaxWidthWrapper from '@/components/domain/max-width-wrapper' -import { useMySuggestionsQuery } from '@/hooks/api/queries/useMySuggestionsQuery' -import { useIntersectionObserver } from '@/hooks/useIntersectionObserver' +import { Fragment } from 'react' +import { InfiniteData } from '@tanstack/react-query' import { MySuggestionRes } from '@/services/suggestion/suggestion' import { DirectionType, SuggestionType } from '@/types/suggestion' import MySuggestionCard from '../my-suggestion-card' -import SuggestionStatusTabs from '../suggestion-status-tabs' - -const MySuggestionList = () => { - const [suggestionTypeState, setSuggestionTypeState] = - useState('OFFER') - const [directionTypeState, setDirectionTypeState] = - useState('RECEIVE') - const searchParams = useSearchParams() - - const { data, fetchNextPage, isLoading, isError, isFetchingNextPage } = - useMySuggestionsQuery( - suggestionTypeState, - directionTypeState, - searchParams.get('cardId'), - ) - - const lastElementRef = useRef(null) - const entry = useIntersectionObserver(lastElementRef, { threshold: 1.0 }) - - useEffect(() => { - if (isFetchingNextPage) { - return - } - - if (entry?.isIntersecting) { - fetchNextPage() - } - }, [entry?.isIntersecting, fetchNextPage, isFetchingNextPage]) - - const isEmpty = data?.pages[0].length === 0 - return ( - -
- -
-
- - <> - {data?.pages.map((currentPage, pageIndex) => ( - - {currentPage.map( - ( - mySuggestionListResponseData: MySuggestionRes & { - pageInfo: number - }, - ) => ( - - ), - )} - - ))} - - -
+const MySuggestionList = ({ + data, + suggestionTypeState, + directionTypeState, +}: { + data: InfiniteData | undefined + suggestionTypeState: SuggestionType + directionTypeState: DirectionType +}) => ( + <> + {data?.pages.map((currentPage, pageIndex) => ( + + {currentPage.map( + ( + mySuggestionRes: MySuggestionRes & { + pageInfo: number + }, + ) => ( + + ), + )} + + ))} + +) -
- - ) -} export default MySuggestionList diff --git a/src/app/(root)/(routes)/mypage/suggestions/page.tsx b/src/app/(root)/(routes)/mypage/suggestions/page.tsx index efb6e13e..edaab962 100644 --- a/src/app/(root)/(routes)/mypage/suggestions/page.tsx +++ b/src/app/(root)/(routes)/mypage/suggestions/page.tsx @@ -2,7 +2,7 @@ import { FunctionComponent } from 'react' import PageTitle from '@/components/domain/page-title' import { getCardInfo } from '@/services/card/card' // import MyItemSummaryCard from './components/my-item-summary-card' -import MySuggestionList from './components/my-suggestion-list' +import MySuggestionList from './components/my-suggestion-list-content' interface SuggestCheckListPageProps { params: { From ddde7563fddebd1974aae80158d0eb148e8d1988 Mon Sep 17 00:00:00 2001 From: doggopawer Date: Sun, 19 Nov 2023 15:13:36 +0900 Subject: [PATCH 05/31] =?UTF-8?q?:sparkles:=20MyTradeHistoryListContent,?= =?UTF-8?q?=20List=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EB=B6=84?= =?UTF-8?q?=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../MyTradeHistoryListContent.tsx | 48 +++++++++++ .../my-trade-history-list-content/index.tsx | 3 + .../MyTradeHistoryList.tsx | 79 ++++++------------- .../my-trade-history-list/index.tsx | 4 +- .../(root)/(routes)/mypage/histories/page.tsx | 2 +- 5 files changed, 76 insertions(+), 60 deletions(-) create mode 100644 src/app/(root)/(routes)/mypage/histories/components/my-trade-history-list-content/MyTradeHistoryListContent.tsx create mode 100644 src/app/(root)/(routes)/mypage/histories/components/my-trade-history-list-content/index.tsx diff --git a/src/app/(root)/(routes)/mypage/histories/components/my-trade-history-list-content/MyTradeHistoryListContent.tsx b/src/app/(root)/(routes)/mypage/histories/components/my-trade-history-list-content/MyTradeHistoryListContent.tsx new file mode 100644 index 00000000..b38aba84 --- /dev/null +++ b/src/app/(root)/(routes)/mypage/histories/components/my-trade-history-list-content/MyTradeHistoryListContent.tsx @@ -0,0 +1,48 @@ +'use client' + +import { useEffect, useRef, Fragment } from 'react' +import ExceptionBoundary from '@/components/domain/exception-boundary' +import MaxWidthWrapper from '@/components/domain/max-width-wrapper' +import HistoryCard from '@/components/domain/trade-history-card' +import { useMyTradeHistoryQuery } from '@/hooks/api/queries/useMyTradeHistoriesQuery' +import { useIntersectionObserver } from '@/hooks/useIntersectionObserver' +import { MyHistoryRes } from '@/services/history/history' +import MyTradeHistoryList from '../my-trade-history-list/MyTradeHistoryList' + +const MyTradeHistoryListContent = () => { + const { data, fetchNextPage, isLoading, isError, isFetchingNextPage } = + useMyTradeHistoryQuery() + + const lastElementRef = useRef(null) + const entry = useIntersectionObserver(lastElementRef, { threshold: 1.0 }) + + useEffect(() => { + if (isFetchingNextPage) { + return + } + + if (entry?.isIntersecting) { + fetchNextPage() + } + }, [entry?.isIntersecting, fetchNextPage, isFetchingNextPage]) + + const isEmpty = data?.pages[0].length === 0 + + return ( + +
+ + + +
+ +
+ + ) +} +export default MyTradeHistoryListContent diff --git a/src/app/(root)/(routes)/mypage/histories/components/my-trade-history-list-content/index.tsx b/src/app/(root)/(routes)/mypage/histories/components/my-trade-history-list-content/index.tsx new file mode 100644 index 00000000..e52acc8d --- /dev/null +++ b/src/app/(root)/(routes)/mypage/histories/components/my-trade-history-list-content/index.tsx @@ -0,0 +1,3 @@ +import MyTradeHistoryListContent from './MyTradeHistoryListContent' + +export default MyTradeHistoryListContent diff --git a/src/app/(root)/(routes)/mypage/histories/components/my-trade-history-list/MyTradeHistoryList.tsx b/src/app/(root)/(routes)/mypage/histories/components/my-trade-history-list/MyTradeHistoryList.tsx index f358a468..a6c5cf82 100644 --- a/src/app/(root)/(routes)/mypage/histories/components/my-trade-history-list/MyTradeHistoryList.tsx +++ b/src/app/(root)/(routes)/mypage/histories/components/my-trade-history-list/MyTradeHistoryList.tsx @@ -1,59 +1,24 @@ -'use client' - -import { useEffect, useRef, Fragment } from 'react' -import ExceptionBoundary from '@/components/domain/exception-boundary' -import MaxWidthWrapper from '@/components/domain/max-width-wrapper' -import HistoryCard from '@/components/domain/trade-history-card' -import { useMyTradeHistoryQuery } from '@/hooks/api/queries/useMyTradeHistoriesQuery' -import { useIntersectionObserver } from '@/hooks/useIntersectionObserver' +import { Fragment } from 'react' +import { InfiniteData } from '@tanstack/react-query' +import TradeHistoryCard from '@/components/domain/trade-history-card' import { MyHistoryRes } from '@/services/history/history' -const MyCardList = () => { - const { data, fetchNextPage, isLoading, isError, isFetchingNextPage } = - useMyTradeHistoryQuery() - - const lastElementRef = useRef(null) - const entry = useIntersectionObserver(lastElementRef, { threshold: 1.0 }) - - useEffect(() => { - if (isFetchingNextPage) { - return - } - - if (entry?.isIntersecting) { - fetchNextPage() - } - }, [entry?.isIntersecting, fetchNextPage, isFetchingNextPage]) - - const isEmpty = data?.pages[0].length === 0 - - return ( - -
- - <> - {data?.pages.map((currentPage, pageIndex) => ( - - {currentPage.map((myHistory: MyHistoryRes) => ( -
- -
- ))} - - ))} - - - - {/*TODO: 로딩 부분에 대한 처리 논의 후 구체적으로 적용 할 것 => 를 사용할지, isLoading으로 처리할지 논의 */} -
- -
- - ) -} -export default MyCardList +const MyTradeHistoryList = ({ + data, +}: { + data: InfiniteData | undefined +}) => ( + <> + {data?.pages.map((currentPage, pageIndex) => ( + + {currentPage.map((myHistory: MyHistoryRes) => ( +
+ +
+ ))} + + ))} + +) + +export default MyTradeHistoryList diff --git a/src/app/(root)/(routes)/mypage/histories/components/my-trade-history-list/index.tsx b/src/app/(root)/(routes)/mypage/histories/components/my-trade-history-list/index.tsx index fc4b2257..708901ca 100644 --- a/src/app/(root)/(routes)/mypage/histories/components/my-trade-history-list/index.tsx +++ b/src/app/(root)/(routes)/mypage/histories/components/my-trade-history-list/index.tsx @@ -1,3 +1,3 @@ -import HistoryList from './MyTradeHistoryList' +import MyTradeHistoryList from './MyTradeHistoryList' -export default HistoryList +export default MyTradeHistoryList diff --git a/src/app/(root)/(routes)/mypage/histories/page.tsx b/src/app/(root)/(routes)/mypage/histories/page.tsx index cc1208ed..b582865b 100644 --- a/src/app/(root)/(routes)/mypage/histories/page.tsx +++ b/src/app/(root)/(routes)/mypage/histories/page.tsx @@ -1,6 +1,6 @@ import { FunctionComponent } from 'react' import PageTitle from '@/components/domain/page-title' -import MyTradeHistoryList from './components/my-trade-history-list' +import MyTradeHistoryList from './components/my-trade-history-list-content' interface MyHistoryListPageProps {} From cdcb775b668e3ffc2445935a7dee50cfd1c23b57 Mon Sep 17 00:00:00 2001 From: doggopawer Date: Mon, 20 Nov 2023 00:50:07 +0900 Subject: [PATCH 06/31] =?UTF-8?q?:sparkles:=20CardList=20=EC=8B=A4?= =?UTF-8?q?=EC=A0=9C=20API=20=EC=97=B0=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../card-list-content/CardListContent.tsx | 3 ++- .../cards/components/card-list/CardList.tsx | 4 ++-- src/config/apiEndPoint.ts | 21 ++++++++++++++++--- src/hooks/api/queries/useCardsQuery.ts | 2 +- src/services/card/card.ts | 6 ++++-- 5 files changed, 27 insertions(+), 9 deletions(-) diff --git a/src/app/(root)/(routes)/cards/components/card-list-content/CardListContent.tsx b/src/app/(root)/(routes)/cards/components/card-list-content/CardListContent.tsx index 658fbbeb..3c595d52 100644 --- a/src/app/(root)/(routes)/cards/components/card-list-content/CardListContent.tsx +++ b/src/app/(root)/(routes)/cards/components/card-list-content/CardListContent.tsx @@ -46,7 +46,8 @@ const CardListContent = () => { // TODO: 아이템이 없을시 어떤 UI를 보여줄지 차후에 결정 - const isEmpty = data?.pages[0].length === 0 + const isEmpty = data?.pages[0].cardList.length === 0 + console.log('content', data) return ( diff --git a/src/app/(root)/(routes)/cards/components/card-list/CardList.tsx b/src/app/(root)/(routes)/cards/components/card-list/CardList.tsx index 8c2c5684..ba02c408 100644 --- a/src/app/(root)/(routes)/cards/components/card-list/CardList.tsx +++ b/src/app/(root)/(routes)/cards/components/card-list/CardList.tsx @@ -9,9 +9,9 @@ const CardList = ({ data: InfiniteData | undefined }) => ( <> - {data?.pages.map((currentPage: any, pageIndex) => ( + {data?.pages.map(({ cardList }: any, pageIndex) => ( - {currentPage.map((card: Card) => ( + {cardList.map((card: Card) => (
diff --git a/src/config/apiEndPoint.ts b/src/config/apiEndPoint.ts index 51b1bffa..7ebbf222 100644 --- a/src/config/apiEndPoint.ts +++ b/src/config/apiEndPoint.ts @@ -1,4 +1,4 @@ -import { TradeStatus } from '@/types/card' +import { Category, PriceRange, TradeStatus } from '@/types/card' import { DirectionType, SuggestionType } from '@/types/suggestion' const ApiEndPoint = { @@ -6,8 +6,23 @@ const ApiEndPoint = { test: () => '/test', getCardInfo: (cardId: number) => `cards/${cardId}`, deleteCard: (cardId: number) => `cards/${cardId}`, - getCardList: (cursorId: number) => - `/cards/?category&priceRange&cardTitle&cursorId=${cursorId}&status&size`, // TODO: category,priceRange,cardTitle,status,size 적용 + getCardList: ( + category: Category['key'], + priceRange: PriceRange['key'], + cardTitle: string, + cursorId: number, + ) => { + const params = new URLSearchParams({ + category: category === undefined ? '' : category, + priceRange: priceRange === undefined ? '' : priceRange, + cardTitle, + cursorId: cursorId.toString() === '0' ? '' : cursorId.toString(), + status: 'TRADE_AVAILABLE,RESERVED', + size: '5', + }) + + return `/cards/?${params.toString()}` + }, getMyCardList: (status: TradeStatus, cursorId: number) => `/cards/${status}/my-cards?&size&cursorId=${cursorId}`, // TODO: status 적용 postDibs: (cardId: number) => `/dibs/${cardId}`, diff --git a/src/hooks/api/queries/useCardsQuery.ts b/src/hooks/api/queries/useCardsQuery.ts index 7ec43a0d..a3f34027 100644 --- a/src/hooks/api/queries/useCardsQuery.ts +++ b/src/hooks/api/queries/useCardsQuery.ts @@ -28,7 +28,7 @@ export const useCardsQuery = ({ if (lastPage.length === 0) { return undefined } - return lastPageParam + 1 + return lastPage.nextCursorId }, }) } diff --git a/src/services/card/card.ts b/src/services/card/card.ts index 2ad44271..4c6efff7 100644 --- a/src/services/card/card.ts +++ b/src/services/card/card.ts @@ -36,8 +36,10 @@ const getCardList = async ({ cardTitle, cursorId, }: Getcards) => { - const response = await apiClient.get(ApiEndPoint.getCardList(cursorId)) - return response + const response = await apiClient.get( + ApiEndPoint.getCardList(category, priceRange, cardTitle, cursorId), + ) + return response.data } const getCardInfo = async (cardId: number) => { From a845205075f2ef5b2e83625be23a2c1cf38da979 Mon Sep 17 00:00:00 2001 From: doggopawer Date: Mon, 20 Nov 2023 00:59:50 +0900 Subject: [PATCH 07/31] =?UTF-8?q?:sparkles:=20MyCardList=20=EC=8B=A4?= =?UTF-8?q?=EC=A0=9C=20API=20=EC=97=B0=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../my-card-list-content/MyCardListContent.tsx | 3 +-- .../mycards/components/my-card-list/MyCardList.tsx | 4 ++-- src/config/apiEndPoint.ts | 10 ++++++++-- src/hooks/api/queries/useMyCardsQuery.ts | 2 +- src/services/card/card.ts | 2 +- 5 files changed, 13 insertions(+), 8 deletions(-) diff --git a/src/app/(root)/(routes)/mypage/mycards/components/my-card-list-content/MyCardListContent.tsx b/src/app/(root)/(routes)/mypage/mycards/components/my-card-list-content/MyCardListContent.tsx index 4e0ba3be..b5a3c264 100644 --- a/src/app/(root)/(routes)/mypage/mycards/components/my-card-list-content/MyCardListContent.tsx +++ b/src/app/(root)/(routes)/mypage/mycards/components/my-card-list-content/MyCardListContent.tsx @@ -30,8 +30,7 @@ const MyCardListContent = () => { } }, [entry?.isIntersecting, fetchNextPage, isFetchingNextPage]) - const isEmpty = data?.pages[0].length === 0 - + const isEmpty = data?.pages[0].cardList.length === 0 return (
diff --git a/src/app/(root)/(routes)/mypage/mycards/components/my-card-list/MyCardList.tsx b/src/app/(root)/(routes)/mypage/mycards/components/my-card-list/MyCardList.tsx index 76bb9131..33c29320 100644 --- a/src/app/(root)/(routes)/mypage/mycards/components/my-card-list/MyCardList.tsx +++ b/src/app/(root)/(routes)/mypage/mycards/components/my-card-list/MyCardList.tsx @@ -9,9 +9,9 @@ const MyCardList = ({ data: InfiniteData | undefined }) => ( <> - {data?.pages.map((currentPage, pageIndex) => ( + {data?.pages.map(({ cardList }, pageIndex) => ( - {currentPage.map((card: Card) => ( + {cardList.map((card: Card) => ( ))} diff --git a/src/config/apiEndPoint.ts b/src/config/apiEndPoint.ts index 7ebbf222..ffe4ca4e 100644 --- a/src/config/apiEndPoint.ts +++ b/src/config/apiEndPoint.ts @@ -23,8 +23,14 @@ const ApiEndPoint = { return `/cards/?${params.toString()}` }, - getMyCardList: (status: TradeStatus, cursorId: number) => - `/cards/${status}/my-cards?&size&cursorId=${cursorId}`, // TODO: status 적용 + getMyCardList: (status: TradeStatus, cursorId: number) => { + const params = new URLSearchParams({ + size: '5', + cursorId: cursorId.toString() === '0' ? '' : cursorId.toString(), + }) + + return `/cards/${status}/my-cards?${params.toString()}` + }, postDibs: (cardId: number) => `/dibs/${cardId}`, deleteDibs: (cardId: number) => `/dibs/${cardId}`, getAvailableCardSuggestionList: (cardId: number) => diff --git a/src/hooks/api/queries/useMyCardsQuery.ts b/src/hooks/api/queries/useMyCardsQuery.ts index bb88118f..a4a466dc 100644 --- a/src/hooks/api/queries/useMyCardsQuery.ts +++ b/src/hooks/api/queries/useMyCardsQuery.ts @@ -19,7 +19,7 @@ export const useMyCardsQuery = ({ tradeStatus }: UseMyCardsQueryParams) => { if (lastPage.length === 0) { return undefined } - return lastPageParam + 1 + return lastPage.nextCursorId }, }) } diff --git a/src/services/card/card.ts b/src/services/card/card.ts index 4c6efff7..0941874e 100644 --- a/src/services/card/card.ts +++ b/src/services/card/card.ts @@ -57,7 +57,7 @@ const getMyCardList = async ({ const response = await apiClient.get( ApiEndPoint.getMyCardList(tradeStatus, cursorId), ) - return response + return response.data } const postCardDibs = async (cardId: number) => { From ede9a931151b57997b8c2fa94d9c9d821137afd4 Mon Sep 17 00:00:00 2001 From: doggopawer Date: Mon, 20 Nov 2023 01:11:20 +0900 Subject: [PATCH 08/31] =?UTF-8?q?:sparkles:=20MySuggestionList=20=EC=8B=A4?= =?UTF-8?q?=EC=A0=9C=20API=20=EC=97=B0=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../MySuggestionListContent.tsx | 2 +- .../components/my-suggestion-list/MySuggestionList.tsx | 4 ++-- src/config/apiEndPoint.ts | 10 ++++++++-- src/hooks/api/queries/useMySuggestionsQuery.ts | 4 ++-- src/services/suggestion/suggestion.ts | 4 ++-- 5 files changed, 15 insertions(+), 9 deletions(-) diff --git a/src/app/(root)/(routes)/mypage/suggestions/components/my-suggestion-list-content/MySuggestionListContent.tsx b/src/app/(root)/(routes)/mypage/suggestions/components/my-suggestion-list-content/MySuggestionListContent.tsx index 95833e6c..ca89fbb6 100644 --- a/src/app/(root)/(routes)/mypage/suggestions/components/my-suggestion-list-content/MySuggestionListContent.tsx +++ b/src/app/(root)/(routes)/mypage/suggestions/components/my-suggestion-list-content/MySuggestionListContent.tsx @@ -38,7 +38,7 @@ const MySuggestionListContent = () => { }, [entry?.isIntersecting, fetchNextPage, isFetchingNextPage]) const isEmpty = data?.pages[0].length === 0 - + console.log('content', data) return (
diff --git a/src/app/(root)/(routes)/mypage/suggestions/components/my-suggestion-list/MySuggestionList.tsx b/src/app/(root)/(routes)/mypage/suggestions/components/my-suggestion-list/MySuggestionList.tsx index 868e7e77..273ca69e 100644 --- a/src/app/(root)/(routes)/mypage/suggestions/components/my-suggestion-list/MySuggestionList.tsx +++ b/src/app/(root)/(routes)/mypage/suggestions/components/my-suggestion-list/MySuggestionList.tsx @@ -14,9 +14,9 @@ const MySuggestionList = ({ directionTypeState: DirectionType }) => ( <> - {data?.pages.map((currentPage, pageIndex) => ( + {data?.pages.map(({ suggestionList }, pageIndex) => ( - {currentPage.map( + {suggestionList.map( ( mySuggestionRes: MySuggestionRes & { pageInfo: number diff --git a/src/config/apiEndPoint.ts b/src/config/apiEndPoint.ts index ffe4ca4e..bf8268af 100644 --- a/src/config/apiEndPoint.ts +++ b/src/config/apiEndPoint.ts @@ -40,8 +40,14 @@ const ApiEndPoint = { suggestionType: SuggestionType, cardId: string | null, cursorId: number, - ) => - `/suggestions/${directionType}/${suggestionType}/${cardId}/?&size={}&cursorId=${cursorId}`, //TODO: 변수 적용 + ) => { + const params = new URLSearchParams({ + size: '5', + cursorId: cursorId.toString() === '0' ? '' : cursorId.toString(), + }) + return `/suggestions/${directionType}/${suggestionType}/${cardId}/?${params.toString()}` + }, + putUserProfile: () => '/users/profile-image', putUserNickname: () => '/users/nickname', postSuggestion: (suggestionType: string) => `/suggestions/${suggestionType}`, diff --git a/src/hooks/api/queries/useMySuggestionsQuery.ts b/src/hooks/api/queries/useMySuggestionsQuery.ts index 93a42360..fe1bb1bf 100644 --- a/src/hooks/api/queries/useMySuggestionsQuery.ts +++ b/src/hooks/api/queries/useMySuggestionsQuery.ts @@ -11,7 +11,7 @@ export const useMySuggestionsQuery = ( return useInfiniteQuery({ queryKey: ['my-suggestions', suggestionType, directionType, cardId], queryFn: async ({ pageParam = 0 }) => { - const data: MySuggestionRes[] = await getMySuggestionList({ + const data = await getMySuggestionList({ suggestionType, directionType, cardId, @@ -33,7 +33,7 @@ export const useMySuggestionsQuery = ( if (lastPage.length === 0) { return undefined } - return lastPageParam + 1 + return lastPage.nextCursorId }, }) } diff --git a/src/services/suggestion/suggestion.ts b/src/services/suggestion/suggestion.ts index 942e6d9d..7b42b836 100644 --- a/src/services/suggestion/suggestion.ts +++ b/src/services/suggestion/suggestion.ts @@ -58,7 +58,7 @@ const getMySuggestionList = async ({ cardId, cursorId, }: GetSuggestChecksParams) => { - const response: MySuggestionRes[] = await apiClient.get( + const response = await apiClient.get( ApiEndPoint.getMySuggestionList( directionType, suggestionType, @@ -66,7 +66,7 @@ const getMySuggestionList = async ({ cursorId, ), ) - return response + return response.data } export { getAvailableCardSuggestionList, getMySuggestionList, postSuggestion } From ed82068a81a0941a5f8919b5a3ac5e0955178c1d Mon Sep 17 00:00:00 2001 From: doggopawer Date: Mon, 20 Nov 2023 01:16:21 +0900 Subject: [PATCH 09/31] =?UTF-8?q?:sparkles:=20MyTradeHistoryList=20?= =?UTF-8?q?=EC=8B=A4=EC=A0=9C=20API=20=EC=97=B0=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../MyTradeHistoryListContent.tsx | 2 +- .../my-trade-history-list/MyTradeHistoryList.tsx | 6 +++--- src/config/apiEndPoint.ts | 10 ++++++++-- src/hooks/api/queries/useMyTradeHistoriesQuery.ts | 2 +- src/services/history/history.ts | 4 ++-- 5 files changed, 15 insertions(+), 9 deletions(-) diff --git a/src/app/(root)/(routes)/mypage/histories/components/my-trade-history-list-content/MyTradeHistoryListContent.tsx b/src/app/(root)/(routes)/mypage/histories/components/my-trade-history-list-content/MyTradeHistoryListContent.tsx index b38aba84..1ef27aad 100644 --- a/src/app/(root)/(routes)/mypage/histories/components/my-trade-history-list-content/MyTradeHistoryListContent.tsx +++ b/src/app/(root)/(routes)/mypage/histories/components/my-trade-history-list-content/MyTradeHistoryListContent.tsx @@ -26,7 +26,7 @@ const MyTradeHistoryListContent = () => { } }, [entry?.isIntersecting, fetchNextPage, isFetchingNextPage]) - const isEmpty = data?.pages[0].length === 0 + const isEmpty = data?.pages[0].historyList.length === 0 return ( diff --git a/src/app/(root)/(routes)/mypage/histories/components/my-trade-history-list/MyTradeHistoryList.tsx b/src/app/(root)/(routes)/mypage/histories/components/my-trade-history-list/MyTradeHistoryList.tsx index a6c5cf82..97eea405 100644 --- a/src/app/(root)/(routes)/mypage/histories/components/my-trade-history-list/MyTradeHistoryList.tsx +++ b/src/app/(root)/(routes)/mypage/histories/components/my-trade-history-list/MyTradeHistoryList.tsx @@ -6,12 +6,12 @@ import { MyHistoryRes } from '@/services/history/history' const MyTradeHistoryList = ({ data, }: { - data: InfiniteData | undefined + data: InfiniteData | undefined }) => ( <> - {data?.pages.map((currentPage, pageIndex) => ( + {data?.pages.map(({ historyId }, pageIndex) => ( - {currentPage.map((myHistory: MyHistoryRes) => ( + {historyId.map((myHistory: MyHistoryRes) => (
diff --git a/src/config/apiEndPoint.ts b/src/config/apiEndPoint.ts index bf8268af..4e86e852 100644 --- a/src/config/apiEndPoint.ts +++ b/src/config/apiEndPoint.ts @@ -52,8 +52,14 @@ const ApiEndPoint = { putUserNickname: () => '/users/nickname', postSuggestion: (suggestionType: string) => `/suggestions/${suggestionType}`, getMyDibsList: (cursorId: number) => `/dibs/?cursorId=${cursorId}`, - getMyTradeHistoryList: (cursorId: number) => - `/complete-requests/user/?size&cursorId=${cursorId}`, + getMyTradeHistoryList: (cursorId: number) => { + const params = new URLSearchParams({ + size: '5', + cursorId: cursorId.toString() === '0' ? '' : cursorId.toString(), + }) + + return `/complete-requests/user/?${params.toString()}` + }, postImageFile: () => '/s3/upload/single', postCard: () => '/cards', putCard: (cardId: string) => `/cards/${cardId}`, diff --git a/src/hooks/api/queries/useMyTradeHistoriesQuery.ts b/src/hooks/api/queries/useMyTradeHistoriesQuery.ts index 9a128a53..8062875d 100644 --- a/src/hooks/api/queries/useMyTradeHistoriesQuery.ts +++ b/src/hooks/api/queries/useMyTradeHistoriesQuery.ts @@ -13,7 +13,7 @@ export const useMyTradeHistoryQuery = () => { if (lastPage.length === 0) { return undefined } - return lastPageParam + 1 + return lastPage.nextCursorId }, }) } diff --git a/src/services/history/history.ts b/src/services/history/history.ts index ef12c428..ec25aedb 100644 --- a/src/services/history/history.ts +++ b/src/services/history/history.ts @@ -5,10 +5,10 @@ import apiClient from '../apiClient' export type MyHistoryRes = TradeHistory const getMyTradeHistoryList = async ({ cursorId }: { cursorId: number }) => { - const response: MyHistoryRes[] = await apiClient.get( + const response = await apiClient.get( ApiEndPoint.getMyTradeHistoryList(cursorId), ) - return response + return response.data } export { getMyTradeHistoryList } From c4ce7b36bdf2aa19c22b9ef0cd963659390a589b Mon Sep 17 00:00:00 2001 From: oaoong Date: Mon, 20 Nov 2023 13:32:34 +0900 Subject: [PATCH 10/31] =?UTF-8?q?:tada:=20=ED=94=84=EB=A1=9C=ED=95=84,=20?= =?UTF-8?q?=EB=8B=89=EB=84=A4=EC=9E=84=20api=20=EC=97=B0=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../(routes)/mypage/components/UserInfo.tsx | 24 +++++++++++++++---- src/components/domain/header/Header.tsx | 10 +++----- .../components/{Avatar.tsx => index.tsx} | 13 +++++++--- src/services/user/user.ts | 19 ++++----------- src/types/user.ts | 4 ++-- 5 files changed, 38 insertions(+), 32 deletions(-) rename src/components/domain/header/components/{Avatar.tsx => index.tsx} (76%) diff --git a/src/app/(root)/(routes)/mypage/components/UserInfo.tsx b/src/app/(root)/(routes)/mypage/components/UserInfo.tsx index b1a9a4a8..cf215427 100644 --- a/src/app/(root)/(routes)/mypage/components/UserInfo.tsx +++ b/src/app/(root)/(routes)/mypage/components/UserInfo.tsx @@ -4,9 +4,12 @@ import React, { useState } from 'react' import AvatarEditable from '@/components/domain/avatar-editable' import TextEditable from '@/components/domain/text-editable' import { useAuth } from '@/contexts/AuthProvider' +import { useToast } from '@/hooks/useToast' +import { postImageFile } from '@/services/images' import { putUserNickname, putUserProfile } from '@/services/user/user' const UserInfo = () => { + const { toast } = useToast() const { currentUser } = useAuth() const [isProfileChanged, setIsProfileChanged] = useState(true) const [isNicknameChanged, setIsNicknameChanged] = useState(true) @@ -14,22 +17,33 @@ const UserInfo = () => { const fileChangeHandler = async (file: File) => { setIsProfileChanged(true) try { - const _data = await putUserProfile({ file: file }) + const resUpload = await postImageFile(file) + const resProfile = await putUserProfile(resUpload.data) + return resProfile.data } catch (error) { setIsProfileChanged(false) console.log(error) - // TODO: toast error message 추가 + toast({ + title: '프로필 이미지 변경 실패', + description: '프로필 이미지 변경에 실패했습니다.', + variant: 'destructive', + }) } } const nicknameChangeHandler = async (nickname: string) => { setIsNicknameChanged(true) try { - const _data = await putUserNickname(nickname) + const res = await putUserNickname(nickname) + return res.data } catch (error) { setIsNicknameChanged(false) console.log(error) - //TODO: toast error message 추가 + toast({ + title: '닉네임 변경 실패', + description: '닉네임 변경에 실패했습니다.', + variant: 'destructive', + }) } } @@ -39,7 +53,7 @@ const UserInfo = () => { { - const { isLoggedIn } = useAuth() + const { isLoggedIn, currentUser } = useAuth() return (
@@ -31,7 +27,7 @@ const Header = () => { alarm {/** TODO: 알림 컴포넌트로 변경 */} - + {/** TODO: 아바타 컴포넌트로 변경 */} ) : ( diff --git a/src/components/domain/header/components/Avatar.tsx b/src/components/domain/header/components/index.tsx similarity index 76% rename from src/components/domain/header/components/Avatar.tsx rename to src/components/domain/header/components/index.tsx index 3cb6f895..4389b0ed 100644 --- a/src/components/domain/header/components/Avatar.tsx +++ b/src/components/domain/header/components/index.tsx @@ -1,6 +1,7 @@ import Cookies from 'js-cookie' import Image from 'next/image' import Link from 'next/link' +import { Avatar, AvatarImage, AvatarFallback } from '@/components/ui/avatar' import Button from '@/components/ui/button' import { DropdownMenu, @@ -12,6 +13,7 @@ import { import AppPath from '@/config/appPath' import Assets from '@/config/assets' import { Environment } from '@/config/environment' +import { DEFAULT_PROFILE_IMG } from '@/constants/image' import apiClient from '@/services/apiClient' //TODO: 공용 아바타 컴포넌트로 변경 @@ -35,7 +37,7 @@ const MenuButton = () => { ) } -const Avatar = () => { +const AvatarWithDropdown = ({ imageUrl }: { imageUrl?: string }) => { const onClickLogout = () => { Cookies.remove(Environment.tokenName()) apiClient.setDefaultHeader('Authorization', '') @@ -45,7 +47,12 @@ const Avatar = () => { return ( - + @@ -56,4 +63,4 @@ const Avatar = () => { ) } -export { MenuButton, Avatar } +export { MenuButton, AvatarWithDropdown } diff --git a/src/services/user/user.ts b/src/services/user/user.ts index 200db439..fc4d6a8a 100644 --- a/src/services/user/user.ts +++ b/src/services/user/user.ts @@ -1,21 +1,10 @@ import ApiEndPoint from '@/config/apiEndPoint' import apiClient from '../apiClient' -type putUserProfileReq = { - file: File -} - -const putUserProfile = async ({ file }: putUserProfileReq) => { - const formData = new FormData() - formData.append('profile', file) - const response = await apiClient.put( - ApiEndPoint.putUserProfile(), - formData, - {}, - { - 'Content-Type': 'multipart/form-data', - }, - ) +const putUserProfile = async (imageUrl: string) => { + const response = await apiClient.put(ApiEndPoint.putUserProfile(), { + imageUrl, + }) return response } diff --git a/src/types/user.ts b/src/types/user.ts index 35cbd196..7106d951 100644 --- a/src/types/user.ts +++ b/src/types/user.ts @@ -2,10 +2,10 @@ interface User { userId: number accountId: string nickname: string - role: 'USER' | 'ADMIN' + role: 'ROLE_USER' | 'ROLE_ADMIN' createdDate: string modifiedDate: string - profileImg?: string + imageUrl?: string } export type { User } From 861ee49c6d1f3b6e762108f950a02b65a485ce4d Mon Sep 17 00:00:00 2001 From: doggopawer Date: Mon, 20 Nov 2023 16:33:21 +0900 Subject: [PATCH 11/31] =?UTF-8?q?:sparkles:=20getQueryParams=20=EC=9C=A0?= =?UTF-8?q?=ED=8B=B8=20=ED=95=A8=EC=88=98=20=EC=83=9D=EC=84=B1=20=EB=B0=8F?= =?UTF-8?q?=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/config/apiEndPoint.ts | 45 +++++++++++++++++-------------------- src/utils/getQueryParams.ts | 11 +++++++++ 2 files changed, 31 insertions(+), 25 deletions(-) create mode 100644 src/utils/getQueryParams.ts diff --git a/src/config/apiEndPoint.ts b/src/config/apiEndPoint.ts index 4e86e852..618bf60c 100644 --- a/src/config/apiEndPoint.ts +++ b/src/config/apiEndPoint.ts @@ -1,5 +1,6 @@ import { Category, PriceRange, TradeStatus } from '@/types/card' import { DirectionType, SuggestionType } from '@/types/suggestion' +import { getQueryParams } from '@/utils/getQueryParams' const ApiEndPoint = { getValidateUser: () => '/users', @@ -11,25 +12,20 @@ const ApiEndPoint = { priceRange: PriceRange['key'], cardTitle: string, cursorId: number, - ) => { - const params = new URLSearchParams({ - category: category === undefined ? '' : category, - priceRange: priceRange === undefined ? '' : priceRange, + ) => + `/cards/?${getQueryParams({ + category, + priceRange, cardTitle, - cursorId: cursorId.toString() === '0' ? '' : cursorId.toString(), + cursorId, status: 'TRADE_AVAILABLE,RESERVED', size: '5', - }) - - return `/cards/?${params.toString()}` - }, + })}`, getMyCardList: (status: TradeStatus, cursorId: number) => { - const params = new URLSearchParams({ + return `/cards/${status}/my-cards?${getQueryParams({ + cursorId, size: '5', - cursorId: cursorId.toString() === '0' ? '' : cursorId.toString(), - }) - - return `/cards/${status}/my-cards?${params.toString()}` + })}` }, postDibs: (cardId: number) => `/dibs/${cardId}`, deleteDibs: (cardId: number) => `/dibs/${cardId}`, @@ -41,24 +37,23 @@ const ApiEndPoint = { cardId: string | null, cursorId: number, ) => { - const params = new URLSearchParams({ - size: '5', - cursorId: cursorId.toString() === '0' ? '' : cursorId.toString(), - }) - return `/suggestions/${directionType}/${suggestionType}/${cardId}/?${params.toString()}` + return `/suggestions/${directionType}/${suggestionType}/${cardId}/?${getQueryParams( + { + cursorId, + size: '5', + }, + )}` }, putUserProfile: () => '/users/profile-image', putUserNickname: () => '/users/nickname', postSuggestion: (suggestionType: string) => `/suggestions/${suggestionType}`, - getMyDibsList: (cursorId: number) => `/dibs/?cursorId=${cursorId}`, + getMyDibsList: (cursorId: number) => `/d ibs/?cursorId=${cursorId}`, getMyTradeHistoryList: (cursorId: number) => { - const params = new URLSearchParams({ + return `/complete-requests/user/?${getQueryParams({ + cursorId, size: '5', - cursorId: cursorId.toString() === '0' ? '' : cursorId.toString(), - }) - - return `/complete-requests/user/?${params.toString()}` + })}` }, postImageFile: () => '/s3/upload/single', postCard: () => '/cards', diff --git a/src/utils/getQueryParams.ts b/src/utils/getQueryParams.ts new file mode 100644 index 00000000..5cddbf18 --- /dev/null +++ b/src/utils/getQueryParams.ts @@ -0,0 +1,11 @@ +export const getQueryParams = (paramsObject: any) => { + const params = new URLSearchParams() + + for (const [key, value] of Object.entries(paramsObject)) { + if (value) { + params.append(key, value.toString()) + } + } + + return params.toString() +} From 718e73b647b157c8086eb2d39b6ef8f0612cf3f5 Mon Sep 17 00:00:00 2001 From: doggopawer Date: Mon, 20 Nov 2023 16:33:52 +0900 Subject: [PATCH 12/31] =?UTF-8?q?:tada:=20next.js=20=EC=9D=B4=EB=AF=B8?= =?UTF-8?q?=EC=A7=80=20=EC=86=8C=EC=8A=A4=20=EB=8F=84=EB=A9=94=EC=9D=B8=20?= =?UTF-8?q?=ED=97=88=EC=9A=A9=20=EC=84=A4=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- next.config.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/next.config.js b/next.config.js index b10a79d4..7253c9fa 100644 --- a/next.config.js +++ b/next.config.js @@ -1,6 +1,10 @@ /** @type {import('next').NextConfig} */ const nextConfig = { images: { + domains: [ + 'team-01-bucket.s3.ap-northeast-2.amazonaws.com', + 'dummyimage.com', + ], remotePatterns: [ { protocol: 'https', From ddcf570d988ddc490b3ea30ae18e77d7a4dcf3a0 Mon Sep 17 00:00:00 2001 From: doggopawer Date: Mon, 20 Nov 2023 16:36:11 +0900 Subject: [PATCH 13/31] =?UTF-8?q?:bug:=20=EC=BB=A4=EC=84=9C=20=EC=95=84?= =?UTF-8?q?=EC=9D=B4=EB=94=94=20=EB=B9=84=EB=8F=99=EC=9E=91=20=EC=98=A4?= =?UTF-8?q?=EB=A5=98=20=ED=95=B4=EA=B2=B0=20-=20initialPageParam=20?= =?UTF-8?q?=EC=9D=84=20undefined=EB=A1=9C=20=EC=B4=88=EA=B8=B0=ED=99=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/hooks/api/queries/useCardsQuery.ts | 3 ++- src/hooks/api/queries/useMyCardsQuery.ts | 2 +- src/hooks/api/queries/useMySuggestionsQuery.ts | 2 +- src/hooks/api/queries/useMyTradeHistoriesQuery.ts | 2 +- 4 files changed, 5 insertions(+), 4 deletions(-) diff --git a/src/hooks/api/queries/useCardsQuery.ts b/src/hooks/api/queries/useCardsQuery.ts index a3f34027..7e3e4bbb 100644 --- a/src/hooks/api/queries/useCardsQuery.ts +++ b/src/hooks/api/queries/useCardsQuery.ts @@ -23,11 +23,12 @@ export const useCardsQuery = ({ cardTitle, cursorId: pageParam, }), - initialPageParam: 0, + initialPageParam: undefined, getNextPageParam: (lastPage, allPages, lastPageParam) => { if (lastPage.length === 0) { return undefined } + // console.log('lastPage', lastPage) return lastPage.nextCursorId }, }) diff --git a/src/hooks/api/queries/useMyCardsQuery.ts b/src/hooks/api/queries/useMyCardsQuery.ts index a4a466dc..5237e464 100644 --- a/src/hooks/api/queries/useMyCardsQuery.ts +++ b/src/hooks/api/queries/useMyCardsQuery.ts @@ -14,7 +14,7 @@ export const useMyCardsQuery = ({ tradeStatus }: UseMyCardsQueryParams) => { tradeStatus, cursorId: pageParam, }), - initialPageParam: 0, + initialPageParam: undefined, getNextPageParam: (lastPage, allPages, lastPageParam) => { if (lastPage.length === 0) { return undefined diff --git a/src/hooks/api/queries/useMySuggestionsQuery.ts b/src/hooks/api/queries/useMySuggestionsQuery.ts index fe1bb1bf..821e29fb 100644 --- a/src/hooks/api/queries/useMySuggestionsQuery.ts +++ b/src/hooks/api/queries/useMySuggestionsQuery.ts @@ -28,7 +28,7 @@ export const useMySuggestionsQuery = ( return dataContainingPageInfo }, - initialPageParam: 0, + initialPageParam: undefined, getNextPageParam: (lastPage, allPages, lastPageParam) => { if (lastPage.length === 0) { return undefined diff --git a/src/hooks/api/queries/useMyTradeHistoriesQuery.ts b/src/hooks/api/queries/useMyTradeHistoriesQuery.ts index 8062875d..8491af3d 100644 --- a/src/hooks/api/queries/useMyTradeHistoriesQuery.ts +++ b/src/hooks/api/queries/useMyTradeHistoriesQuery.ts @@ -8,7 +8,7 @@ export const useMyTradeHistoryQuery = () => { await getMyTradeHistoryList({ cursorId: pageParam, }), - initialPageParam: 0, + initialPageParam: undefined, getNextPageParam: (lastPage, allPages, lastPageParam) => { if (lastPage.length === 0) { return undefined From 2f792bb2995f527be2754014da9aa03b754975d9 Mon Sep 17 00:00:00 2001 From: doggopawer Date: Mon, 20 Nov 2023 17:46:44 +0900 Subject: [PATCH 14/31] =?UTF-8?q?:sparkles:=20getCardList=20=EC=9A=94?= =?UTF-8?q?=EC=B2=AD,=EC=9D=91=EB=8B=B5=20=ED=83=80=EC=9E=85=20=EC=A0=95?= =?UTF-8?q?=EC=9D=98=20=EB=B0=8F=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../card-list-content/CardListContent.tsx | 12 +++---- .../cards/components/card-list/CardList.tsx | 5 +-- src/config/apiEndPoint.ts | 13 ++++---- src/hooks/api/queries/useCardsQuery.ts | 18 ++++------ src/services/card/card.ts | 33 +++++++++++-------- 5 files changed, 43 insertions(+), 38 deletions(-) diff --git a/src/app/(root)/(routes)/cards/components/card-list-content/CardListContent.tsx b/src/app/(root)/(routes)/cards/components/card-list-content/CardListContent.tsx index 3c595d52..da8512d9 100644 --- a/src/app/(root)/(routes)/cards/components/card-list-content/CardListContent.tsx +++ b/src/app/(root)/(routes)/cards/components/card-list-content/CardListContent.tsx @@ -6,7 +6,7 @@ import ExceptionBoundary from '@/components/domain/exception-boundary' import MaxWidthWrapper from '@/components/domain/max-width-wrapper' import { useCardsQuery } from '@/hooks/api/queries/useCardsQuery' import { useIntersectionObserver } from '@/hooks/useIntersectionObserver' -import { Category, PriceRange } from '@/types/card' +import { CategoryObjs, PriceRangeObjs } from '@/types/card' import CardList from '../card-list/CardList' import FilterFormDialog from '../filter-form-dialog' import SearchInput from '../search-input' @@ -16,11 +16,11 @@ const CardListContent = () => { const [cardTitle, setCardTitle] = useState( searchParams.get('cardTitle' as string) || '', ) - const [category, setCatgegory] = useState( - (searchParams.get('category') as Category['key']) || undefined, + const [category, setCatgegory] = useState( + (searchParams.get('category') as CategoryObjs['key']) || undefined, ) - const [priceRange, setPriceRange] = useState( - (searchParams.get('priceRange') as PriceRange['key']) || undefined, + const [priceRange, setPriceRange] = useState( + (searchParams.get('priceRange') as PriceRangeObjs['key']) || undefined, ) // TODO: 현재 API 명세에 status에 어떤 값을 줘야하는지에 대한 정의가 되어 있지 않기 때문에 임시로 상수 값을 전달함 => 추후에 실제 동작 값으로 고치기 @@ -46,7 +46,7 @@ const CardListContent = () => { // TODO: 아이템이 없을시 어떤 UI를 보여줄지 차후에 결정 - const isEmpty = data?.pages[0].cardList.length === 0 + const isEmpty = data?.pages[0].data.cardList.length === 0 console.log('content', data) return ( diff --git a/src/app/(root)/(routes)/cards/components/card-list/CardList.tsx b/src/app/(root)/(routes)/cards/components/card-list/CardList.tsx index ba02c408..b4871dc9 100644 --- a/src/app/(root)/(routes)/cards/components/card-list/CardList.tsx +++ b/src/app/(root)/(routes)/cards/components/card-list/CardList.tsx @@ -1,15 +1,16 @@ import { Fragment } from 'react' import { InfiniteData } from '@tanstack/react-query' import TradeStatusCard from '@/components/domain/card/trade-status-card' +import { GetCardListRes } from '@/services/card/card' import { Card } from '@/types/card' const CardList = ({ data, }: { - data: InfiniteData | undefined + data: InfiniteData | undefined }) => ( <> - {data?.pages.map(({ cardList }: any, pageIndex) => ( + {data?.pages.map(({ data: { cardList } }: GetCardListRes, pageIndex) => ( {cardList.map((card: Card) => (
diff --git a/src/config/apiEndPoint.ts b/src/config/apiEndPoint.ts index 618bf60c..56d8947a 100644 --- a/src/config/apiEndPoint.ts +++ b/src/config/apiEndPoint.ts @@ -1,3 +1,4 @@ +import { GetCardListReq } from '@/services/card/card' import { Category, PriceRange, TradeStatus } from '@/types/card' import { DirectionType, SuggestionType } from '@/types/suggestion' import { getQueryParams } from '@/utils/getQueryParams' @@ -7,12 +8,12 @@ const ApiEndPoint = { test: () => '/test', getCardInfo: (cardId: number) => `cards/${cardId}`, deleteCard: (cardId: number) => `cards/${cardId}`, - getCardList: ( - category: Category['key'], - priceRange: PriceRange['key'], - cardTitle: string, - cursorId: number, - ) => + getCardList: ({ + category, + priceRange, + cardTitle, + cursorId, + }: GetCardListReq) => `/cards/?${getQueryParams({ category, priceRange, diff --git a/src/hooks/api/queries/useCardsQuery.ts b/src/hooks/api/queries/useCardsQuery.ts index 7e3e4bbb..3096c9e9 100644 --- a/src/hooks/api/queries/useCardsQuery.ts +++ b/src/hooks/api/queries/useCardsQuery.ts @@ -1,10 +1,10 @@ import { useInfiniteQuery } from '@tanstack/react-query' -import { getCardList } from '@/services/card/card' -import { Category, PriceRange } from '@/types/card' +import { GetCardListRes, getCardList } from '@/services/card/card' +import { CategoryObjs, PriceRangeObjs } from '@/types/card' export type UseCardsQueryParams = { - category: Category['key'] - priceRange: PriceRange['key'] + category: CategoryObjs['key'] + priceRange: PriceRangeObjs['key'] cardTitle: string } @@ -16,7 +16,7 @@ export const useCardsQuery = ({ return useInfiniteQuery({ queryKey: ['cards', category, priceRange, cardTitle], - queryFn: async ({ pageParam = 0 }) => + queryFn: async ({ pageParam = undefined }) => await getCardList({ category, priceRange, @@ -24,12 +24,8 @@ export const useCardsQuery = ({ cursorId: pageParam, }), initialPageParam: undefined, - getNextPageParam: (lastPage, allPages, lastPageParam) => { - if (lastPage.length === 0) { - return undefined - } - // console.log('lastPage', lastPage) - return lastPage.nextCursorId + getNextPageParam: (lastPage: GetCardListRes) => { + return lastPage.data.nextCursorId }, }) } diff --git a/src/services/card/card.ts b/src/services/card/card.ts index 0941874e..9ed58460 100644 --- a/src/services/card/card.ts +++ b/src/services/card/card.ts @@ -1,15 +1,8 @@ import { CardUploadFormValues } from '@/app/(root)/(routes)/cards/new/hooks/useCardUploadForm' import ApiEndPoint from '@/config/apiEndPoint' -import type { Category, PriceRange, TradeStatus } from '@/types/card' +import type { Card, Category, PriceRange, TradeStatus } from '@/types/card' import apiClient from '../apiClient' -export type Getcards = { - category: Category['key'] - priceRange: PriceRange['key'] - cardTitle: string - cursorId: number -} - type putCardReq = { cardId: string cardReq: CardUploadFormValues @@ -29,17 +22,31 @@ const putCard = async ({ cardId, cardReq }: putCardReq) => { return response } -// TODO: 현재 cardsHandler(가짜 API)는 필터에 대한 처리가 이루어져 있지 않으므로, cursorId만 넘겨주고 있음 => 실 API를 받을시 교체 작업 해주기 +export type GetCardListReq = { + category: Category['key'] + priceRange: PriceRange['key'] + cardTitle: string + cursorId: string | undefined +} +export type GetCardListRes = { + code: string + message: string + data: { + cardList: Card[] + nextCursorId: string + } +} + const getCardList = async ({ category, priceRange, cardTitle, cursorId, -}: Getcards) => { - const response = await apiClient.get( - ApiEndPoint.getCardList(category, priceRange, cardTitle, cursorId), +}: GetCardListReq) => { + const response: GetCardListRes = await apiClient.get( + ApiEndPoint.getCardList({ category, priceRange, cardTitle, cursorId }), ) - return response.data + return response } const getCardInfo = async (cardId: number) => { From 90b8a036fe2198de8b5c4cbd90101114ee6298cd Mon Sep 17 00:00:00 2001 From: doggopawer Date: Mon, 20 Nov 2023 17:57:03 +0900 Subject: [PATCH 15/31] =?UTF-8?q?:sparkles:=20getMyCardList=20=EC=9A=94?= =?UTF-8?q?=EC=B2=AD,=EC=9D=91=EB=8B=B5=20=ED=83=80=EC=9E=85=20=EC=A0=95?= =?UTF-8?q?=EC=9D=98=20=EB=B0=8F=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../MyCardListContent.tsx | 2 +- .../components/my-card-list/MyCardList.tsx | 9 +++-- src/config/apiEndPoint.ts | 6 +-- src/hooks/api/queries/useMyCardsQuery.ts | 11 ++---- src/services/card/card.ts | 38 +++++++++++++------ src/types/card.ts | 12 ++++-- 6 files changed, 48 insertions(+), 30 deletions(-) diff --git a/src/app/(root)/(routes)/mypage/mycards/components/my-card-list-content/MyCardListContent.tsx b/src/app/(root)/(routes)/mypage/mycards/components/my-card-list-content/MyCardListContent.tsx index b5a3c264..54a27172 100644 --- a/src/app/(root)/(routes)/mypage/mycards/components/my-card-list-content/MyCardListContent.tsx +++ b/src/app/(root)/(routes)/mypage/mycards/components/my-card-list-content/MyCardListContent.tsx @@ -30,7 +30,7 @@ const MyCardListContent = () => { } }, [entry?.isIntersecting, fetchNextPage, isFetchingNextPage]) - const isEmpty = data?.pages[0].cardList.length === 0 + const isEmpty = data?.pages[0].data.cardList.length === 0 return (
diff --git a/src/app/(root)/(routes)/mypage/mycards/components/my-card-list/MyCardList.tsx b/src/app/(root)/(routes)/mypage/mycards/components/my-card-list/MyCardList.tsx index 33c29320..c82e950d 100644 --- a/src/app/(root)/(routes)/mypage/mycards/components/my-card-list/MyCardList.tsx +++ b/src/app/(root)/(routes)/mypage/mycards/components/my-card-list/MyCardList.tsx @@ -1,18 +1,19 @@ import { Fragment } from 'react' import { InfiniteData } from '@tanstack/react-query' +import { GetMyCardListRes } from '@/services/card/card' import { Card } from '@/types/card' import MyCard from '../my-card' const MyCardList = ({ data, }: { - data: InfiniteData | undefined + data: InfiniteData | undefined }) => ( <> - {data?.pages.map(({ cardList }, pageIndex) => ( + {data?.pages.map(({ data: { cardList } }: GetMyCardListRes, pageIndex) => ( - {cardList.map((card: Card) => ( - + {cardList.map((myCard: Card) => ( + ))} ))} diff --git a/src/config/apiEndPoint.ts b/src/config/apiEndPoint.ts index 56d8947a..5ddcd591 100644 --- a/src/config/apiEndPoint.ts +++ b/src/config/apiEndPoint.ts @@ -1,4 +1,4 @@ -import { GetCardListReq } from '@/services/card/card' +import { GetCardListReq, GetMyCardListReq } from '@/services/card/card' import { Category, PriceRange, TradeStatus } from '@/types/card' import { DirectionType, SuggestionType } from '@/types/suggestion' import { getQueryParams } from '@/utils/getQueryParams' @@ -22,8 +22,8 @@ const ApiEndPoint = { status: 'TRADE_AVAILABLE,RESERVED', size: '5', })}`, - getMyCardList: (status: TradeStatus, cursorId: number) => { - return `/cards/${status}/my-cards?${getQueryParams({ + getMyCardList: ({ tradeStatus, cursorId }: GetMyCardListReq) => { + return `/cards/${tradeStatus}/my-cards?${getQueryParams({ cursorId, size: '5', })}` diff --git a/src/hooks/api/queries/useMyCardsQuery.ts b/src/hooks/api/queries/useMyCardsQuery.ts index 5237e464..7095462d 100644 --- a/src/hooks/api/queries/useMyCardsQuery.ts +++ b/src/hooks/api/queries/useMyCardsQuery.ts @@ -1,5 +1,5 @@ import { useInfiniteQuery } from '@tanstack/react-query' -import { getMyCardList } from '@/services/card/card' +import { GetMyCardListRes, getMyCardList } from '@/services/card/card' import { TradeStatus } from '@/types/card' export type UseMyCardsQueryParams = { @@ -9,17 +9,14 @@ export type UseMyCardsQueryParams = { export const useMyCardsQuery = ({ tradeStatus }: UseMyCardsQueryParams) => { return useInfiniteQuery({ queryKey: ['my-cards', tradeStatus], - queryFn: async ({ pageParam = 0 }) => + queryFn: async ({ pageParam = undefined }) => await getMyCardList({ tradeStatus, cursorId: pageParam, }), initialPageParam: undefined, - getNextPageParam: (lastPage, allPages, lastPageParam) => { - if (lastPage.length === 0) { - return undefined - } - return lastPage.nextCursorId + getNextPageParam: (lastPage: GetMyCardListRes) => { + return lastPage.data.nextCursorId }, }) } diff --git a/src/services/card/card.ts b/src/services/card/card.ts index 9ed58460..5252021e 100644 --- a/src/services/card/card.ts +++ b/src/services/card/card.ts @@ -1,6 +1,13 @@ import { CardUploadFormValues } from '@/app/(root)/(routes)/cards/new/hooks/useCardUploadForm' import ApiEndPoint from '@/config/apiEndPoint' -import type { Card, Category, PriceRange, TradeStatus } from '@/types/card' +import type { + Card, + Category, + CategoryObjs, + PriceRange, + PriceRangeObjs, + TradeStatus, +} from '@/types/card' import apiClient from '../apiClient' type putCardReq = { @@ -23,8 +30,8 @@ const putCard = async ({ cardId, cardReq }: putCardReq) => { } export type GetCardListReq = { - category: Category['key'] - priceRange: PriceRange['key'] + category: CategoryObjs['key'] + priceRange: PriceRangeObjs['key'] cardTitle: string cursorId: string | undefined } @@ -54,17 +61,24 @@ const getCardInfo = async (cardId: number) => { return response } -const getMyCardList = async ({ - tradeStatus, - cursorId, -}: { +export type GetMyCardListReq = { tradeStatus: TradeStatus - cursorId: number -}) => { - const response = await apiClient.get( - ApiEndPoint.getMyCardList(tradeStatus, cursorId), + cursorId: string | undefined +} +export type GetMyCardListRes = { + code: string + message: string + data: { + cardList: Card[] + nextCursorId: string + } +} + +const getMyCardList = async ({ tradeStatus, cursorId }: GetMyCardListReq) => { + const response: GetMyCardListRes = await apiClient.get( + ApiEndPoint.getMyCardList({ tradeStatus, cursorId }), ) - return response.data + return response } const postCardDibs = async (cardId: number) => { diff --git a/src/types/card.ts b/src/types/card.ts index 02035503..608f92f0 100644 --- a/src/types/card.ts +++ b/src/types/card.ts @@ -42,10 +42,13 @@ interface CardImages { image: string | StaticImageData } -type Category = (typeof CATEGORY_OBJS)[number] type TradeStatus = (typeof CARD_TRADE_STATUS)[number] -type PriceRange = (typeof PRICE_RANGE_OBJS)[number] -type TradeType = (typeof TRADE_TYPE_OBJS)[number] +type TradeType = (typeof TRADE_TYPE)[number] +type Category = (typeof CATEGORY)[number] +type PriceRange = (typeof PRICE_RANGE)[number] +type CategoryObjs = (typeof CATEGORY_OBJS)[number] +type PriceRangeObjs = (typeof PRICE_RANGE_OBJS)[number] +type TradeTypeObjs = (typeof TRADE_TYPE_OBJS)[number] export type { Category, @@ -55,4 +58,7 @@ export type { CardDetail, CardImages, TradeStatus, + CategoryObjs, + PriceRangeObjs, + TradeTypeObjs, } From 6ec36f7c1a88e7fc5fa6b4dac5d663226230e3f7 Mon Sep 17 00:00:00 2001 From: doggopawer Date: Mon, 20 Nov 2023 17:58:09 +0900 Subject: [PATCH 16/31] =?UTF-8?q?:sparkles:=20getMyTradeHistoryList=20?= =?UTF-8?q?=EC=9A=94=EC=B2=AD,=EC=9D=91=EB=8B=B5=20=ED=83=80=EC=9E=85=20?= =?UTF-8?q?=EC=A0=95=EC=9D=98=20=EB=B0=8F=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../MyTradeHistoryListContent.tsx | 4 +-- .../MyTradeHistoryList.tsx | 25 +++++++++++-------- src/config/apiEndPoint.ts | 3 ++- .../api/queries/useMyTradeHistoriesQuery.ts | 14 +++++------ src/services/history/history.ts | 22 ++++++++++++---- 5 files changed, 41 insertions(+), 27 deletions(-) diff --git a/src/app/(root)/(routes)/mypage/histories/components/my-trade-history-list-content/MyTradeHistoryListContent.tsx b/src/app/(root)/(routes)/mypage/histories/components/my-trade-history-list-content/MyTradeHistoryListContent.tsx index 1ef27aad..a6732de4 100644 --- a/src/app/(root)/(routes)/mypage/histories/components/my-trade-history-list-content/MyTradeHistoryListContent.tsx +++ b/src/app/(root)/(routes)/mypage/histories/components/my-trade-history-list-content/MyTradeHistoryListContent.tsx @@ -3,10 +3,8 @@ import { useEffect, useRef, Fragment } from 'react' import ExceptionBoundary from '@/components/domain/exception-boundary' import MaxWidthWrapper from '@/components/domain/max-width-wrapper' -import HistoryCard from '@/components/domain/trade-history-card' import { useMyTradeHistoryQuery } from '@/hooks/api/queries/useMyTradeHistoriesQuery' import { useIntersectionObserver } from '@/hooks/useIntersectionObserver' -import { MyHistoryRes } from '@/services/history/history' import MyTradeHistoryList from '../my-trade-history-list/MyTradeHistoryList' const MyTradeHistoryListContent = () => { @@ -26,7 +24,7 @@ const MyTradeHistoryListContent = () => { } }, [entry?.isIntersecting, fetchNextPage, isFetchingNextPage]) - const isEmpty = data?.pages[0].historyList.length === 0 + const isEmpty = data?.pages[0].data.historyList.length === 0 return ( diff --git a/src/app/(root)/(routes)/mypage/histories/components/my-trade-history-list/MyTradeHistoryList.tsx b/src/app/(root)/(routes)/mypage/histories/components/my-trade-history-list/MyTradeHistoryList.tsx index 97eea405..26a76b62 100644 --- a/src/app/(root)/(routes)/mypage/histories/components/my-trade-history-list/MyTradeHistoryList.tsx +++ b/src/app/(root)/(routes)/mypage/histories/components/my-trade-history-list/MyTradeHistoryList.tsx @@ -1,23 +1,26 @@ import { Fragment } from 'react' import { InfiniteData } from '@tanstack/react-query' import TradeHistoryCard from '@/components/domain/trade-history-card' -import { MyHistoryRes } from '@/services/history/history' +import { GetMyTradeHistoryListRes } from '@/services/history/history' +import { TradeHistory } from '@/types/tradeHistory' const MyTradeHistoryList = ({ data, }: { - data: InfiniteData | undefined + data: InfiniteData | undefined }) => ( <> - {data?.pages.map(({ historyId }, pageIndex) => ( - - {historyId.map((myHistory: MyHistoryRes) => ( -
- -
- ))} - - ))} + {data?.pages.map( + ({ data: { historyList } }: GetMyTradeHistoryListRes, pageIndex) => ( + + {historyList.map((myHistory: TradeHistory) => ( +
+ +
+ ))} + + ), + )} ) diff --git a/src/config/apiEndPoint.ts b/src/config/apiEndPoint.ts index 5ddcd591..ccae8564 100644 --- a/src/config/apiEndPoint.ts +++ b/src/config/apiEndPoint.ts @@ -1,4 +1,5 @@ import { GetCardListReq, GetMyCardListReq } from '@/services/card/card' +import { GetMyTradeHistoryListReq } from '@/services/history/history' import { Category, PriceRange, TradeStatus } from '@/types/card' import { DirectionType, SuggestionType } from '@/types/suggestion' import { getQueryParams } from '@/utils/getQueryParams' @@ -50,7 +51,7 @@ const ApiEndPoint = { putUserNickname: () => '/users/nickname', postSuggestion: (suggestionType: string) => `/suggestions/${suggestionType}`, getMyDibsList: (cursorId: number) => `/d ibs/?cursorId=${cursorId}`, - getMyTradeHistoryList: (cursorId: number) => { + getMyTradeHistoryList: ({ cursorId }: GetMyTradeHistoryListReq) => { return `/complete-requests/user/?${getQueryParams({ cursorId, size: '5', diff --git a/src/hooks/api/queries/useMyTradeHistoriesQuery.ts b/src/hooks/api/queries/useMyTradeHistoriesQuery.ts index 8491af3d..6232e5e6 100644 --- a/src/hooks/api/queries/useMyTradeHistoriesQuery.ts +++ b/src/hooks/api/queries/useMyTradeHistoriesQuery.ts @@ -1,19 +1,19 @@ import { useInfiniteQuery } from '@tanstack/react-query' -import { getMyTradeHistoryList } from '@/services/history/history' +import { + GetMyTradeHistoryListRes, + getMyTradeHistoryList, +} from '@/services/history/history' export const useMyTradeHistoryQuery = () => { return useInfiniteQuery({ queryKey: ['my-trade-histories'], - queryFn: async ({ pageParam = 0 }) => + queryFn: async ({ pageParam = undefined }) => await getMyTradeHistoryList({ cursorId: pageParam, }), initialPageParam: undefined, - getNextPageParam: (lastPage, allPages, lastPageParam) => { - if (lastPage.length === 0) { - return undefined - } - return lastPage.nextCursorId + getNextPageParam: (lastPage: GetMyTradeHistoryListRes) => { + return lastPage.data.nextCursorId }, }) } diff --git a/src/services/history/history.ts b/src/services/history/history.ts index ec25aedb..84672fc2 100644 --- a/src/services/history/history.ts +++ b/src/services/history/history.ts @@ -2,13 +2,25 @@ import ApiEndPoint from '@/config/apiEndPoint' import { TradeHistory } from '@/types/tradeHistory' import apiClient from '../apiClient' -export type MyHistoryRes = TradeHistory +export type GetMyTradeHistoryListReq = { + cursorId: string | undefined +} +export type GetMyTradeHistoryListRes = { + code: string + message: string + data: { + historyList: TradeHistory[] + nextCursorId: string + } +} -const getMyTradeHistoryList = async ({ cursorId }: { cursorId: number }) => { - const response = await apiClient.get( - ApiEndPoint.getMyTradeHistoryList(cursorId), +const getMyTradeHistoryList = async ({ + cursorId, +}: GetMyTradeHistoryListReq) => { + const response: GetMyTradeHistoryListRes = await apiClient.get( + ApiEndPoint.getMyTradeHistoryList({ cursorId }), ) - return response.data + return response } export { getMyTradeHistoryList } From 717aa3b1e5e66e50ca34bcea886e40577f81fb0a Mon Sep 17 00:00:00 2001 From: oaoong Date: Mon, 20 Nov 2023 18:27:54 +0900 Subject: [PATCH 17/31] =?UTF-8?q?:sparkles:=20=EC=BA=90=EC=8B=9C=20?= =?UTF-8?q?=EA=B0=B1=EC=8B=A0=20=EC=B2=98=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../(routes)/mypage/components/UserInfo.tsx | 15 +++++++---- src/app/(root)/(routes)/mypage/page.tsx | 27 +++++++++++++++---- .../domain/header/components/index.tsx | 10 +++++++ .../domain/image-uploader/ImageUploader.tsx | 2 ++ .../domain/text-editable/TextEditable.tsx | 1 + src/services/card/card.ts | 4 ++- src/services/user/user.ts | 27 ++++++++++++++----- 7 files changed, 69 insertions(+), 17 deletions(-) diff --git a/src/app/(root)/(routes)/mypage/components/UserInfo.tsx b/src/app/(root)/(routes)/mypage/components/UserInfo.tsx index cf215427..18720d94 100644 --- a/src/app/(root)/(routes)/mypage/components/UserInfo.tsx +++ b/src/app/(root)/(routes)/mypage/components/UserInfo.tsx @@ -3,14 +3,17 @@ import React, { useState } from 'react' import AvatarEditable from '@/components/domain/avatar-editable' import TextEditable from '@/components/domain/text-editable' -import { useAuth } from '@/contexts/AuthProvider' import { useToast } from '@/hooks/useToast' import { postImageFile } from '@/services/images' import { putUserNickname, putUserProfile } from '@/services/user/user' +import { User } from '@/types/user' -const UserInfo = () => { +type UserInfoProps = { + user: User +} + +const UserInfo = ({ user }: UserInfoProps) => { const { toast } = useToast() - const { currentUser } = useAuth() const [isProfileChanged, setIsProfileChanged] = useState(true) const [isNicknameChanged, setIsNicknameChanged] = useState(true) @@ -19,6 +22,7 @@ const UserInfo = () => { try { const resUpload = await postImageFile(file) const resProfile = await putUserProfile(resUpload.data) + window.location.reload() return resProfile.data } catch (error) { setIsProfileChanged(false) @@ -35,6 +39,7 @@ const UserInfo = () => { setIsNicknameChanged(true) try { const res = await putUserNickname(nickname) + window.location.reload() return res.data } catch (error) { setIsNicknameChanged(false) @@ -53,12 +58,12 @@ const UserInfo = () => {
) diff --git a/src/app/(root)/(routes)/mypage/page.tsx b/src/app/(root)/(routes)/mypage/page.tsx index cc1cf823..72d67381 100644 --- a/src/app/(root)/(routes)/mypage/page.tsx +++ b/src/app/(root)/(routes)/mypage/page.tsx @@ -1,14 +1,31 @@ import React from 'react' +import PageTitle from '@/components/domain/page-title' +import ApiEndPoint from '@/config/apiEndPoint' +import apiClient from '@/services/apiClient' +import { User } from '@/types/user' +import { getServerCookie } from '@/utils/getServerCookie' import UserInfo from './components/UserInfo' -const MyPage = () => { +const getUserInfo = async (): Promise => { + const token = getServerCookie() + const res = await apiClient.get( + ApiEndPoint.getValidateUser(), + {}, + { + Authorization: `${token}`, + }, + ) + return res.data.userInfo +} + +const MyPage = async () => { + const userInfo = await getUserInfo() + return (
-
-

마이페이지

-
+
- +
{/* TODO: 각 내용에 대한 라우팅 추가 */}
diff --git a/src/components/domain/header/components/index.tsx b/src/components/domain/header/components/index.tsx index 4389b0ed..0ae8ce64 100644 --- a/src/components/domain/header/components/index.tsx +++ b/src/components/domain/header/components/index.tsx @@ -1,6 +1,7 @@ import Cookies from 'js-cookie' import Image from 'next/image' import Link from 'next/link' +import { useRouter } from 'next/navigation' import { Avatar, AvatarImage, AvatarFallback } from '@/components/ui/avatar' import Button from '@/components/ui/button' import { @@ -38,6 +39,8 @@ const MenuButton = () => { } const AvatarWithDropdown = ({ imageUrl }: { imageUrl?: string }) => { + const router = useRouter() + const onClickLogout = () => { Cookies.remove(Environment.tokenName()) apiClient.setDefaultHeader('Authorization', '') @@ -56,6 +59,13 @@ const AvatarWithDropdown = ({ imageUrl }: { imageUrl?: string }) => { + { + router.push(AppPath.mypage()) + }} + > + 내 정보 + 로그아웃 diff --git a/src/components/domain/image-uploader/ImageUploader.tsx b/src/components/domain/image-uploader/ImageUploader.tsx index 5c0434d0..027f0ae4 100644 --- a/src/components/domain/image-uploader/ImageUploader.tsx +++ b/src/components/domain/image-uploader/ImageUploader.tsx @@ -86,7 +86,9 @@ const ImageUploader = ({ isDeletable={isImageDeletable} isThumbnail={isThumbnail} onDeleteHandler={() => { + console.log(images) setImages(images.filter((_, i) => i !== index)) + onFilesChanged(images.filter((_, i) => i !== index)) }} /> ) diff --git a/src/components/domain/text-editable/TextEditable.tsx b/src/components/domain/text-editable/TextEditable.tsx index e132f92e..4922e0d9 100644 --- a/src/components/domain/text-editable/TextEditable.tsx +++ b/src/components/domain/text-editable/TextEditable.tsx @@ -22,6 +22,7 @@ const TextEditable = ({ const [value, setValue] = useState(defaultText) useEffect(() => { + console.log('이름', defaultText) if (!changedSuccessfully) { setValue(() => defaultText) } diff --git a/src/services/card/card.ts b/src/services/card/card.ts index 8a4d8277..8549d07e 100644 --- a/src/services/card/card.ts +++ b/src/services/card/card.ts @@ -70,7 +70,9 @@ const getCardList = async ({ const getCardInfo = async ( cardId: number, ): Promise<{ data: { cardInfo: CardDetail } }> => { - const response = await apiClient.get(ApiEndPoint.getCardInfo(cardId)) + const response = await apiClient.get(ApiEndPoint.getCardInfo(cardId), { + cache: 'no-store', + }) return response } diff --git a/src/services/user/user.ts b/src/services/user/user.ts index fc4d6a8a..595f7643 100644 --- a/src/services/user/user.ts +++ b/src/services/user/user.ts @@ -1,18 +1,33 @@ +import { revalidateTag } from 'next/cache' import ApiEndPoint from '@/config/apiEndPoint' import apiClient from '../apiClient' const putUserProfile = async (imageUrl: string) => { - const response = await apiClient.put(ApiEndPoint.putUserProfile(), { - imageUrl, - }) + const response = await apiClient.put( + ApiEndPoint.putUserProfile(), + { + imageUrl, + }, + {}, + { + 'Content-Type': 'application/json', + }, + ) return response } const putUserNickname = async (nickname: string) => { - const response = await apiClient.put(ApiEndPoint.putUserNickname(), { - nickname, - }) + const response = await apiClient.put( + ApiEndPoint.putUserNickname(), + { + nickname, + }, + {}, + { + 'Content-Type': 'application/json', + }, + ) return response } From ff3278152ddd63e96a325861051a86adf0d04edf Mon Sep 17 00:00:00 2001 From: doggopawer Date: Mon, 20 Nov 2023 20:18:27 +0900 Subject: [PATCH 18/31] =?UTF-8?q?:sparkles:=20getMySuggestionList=20?= =?UTF-8?q?=EC=9A=94=EC=B2=AD,=EC=9D=91=EB=8B=B5=20=ED=83=80=EC=9E=85=20?= =?UTF-8?q?=EC=A0=95=EC=9D=98=20=EB=B0=8F=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../my-suggestion-card/MySuggestionCard.tsx | 25 ++++---- .../components/my-suggestion-card/index.tsx | 0 .../MySuggestionListContent.tsx | 13 ++-- .../my-suggestion-list-content/index.tsx | 0 .../my-suggestion-list/MySuggestionList.tsx | 37 +++++++++++ .../components/my-suggestion-list/index.tsx | 0 .../SuggestionStatusTabs.tsx | 0 .../suggestion-status-tabs/index.tsx | 0 .../suggestions/{ => [cardId]}/page.tsx | 19 ++---- .../my-suggestion-list/MySuggestionList.tsx | 38 ----------- src/config/apiEndPoint.ts | 15 ++--- .../useMySuggestionUpdateMutation.ts | 64 +++++++++---------- .../api/queries/useMySuggestionsQuery.ts | 27 ++------ src/services/suggestion/suggestion.ts | 30 +++++---- 14 files changed, 124 insertions(+), 144 deletions(-) rename src/app/(root)/(routes)/mypage/suggestions/{ => [cardId]}/components/my-suggestion-card/MySuggestionCard.tsx (88%) rename src/app/(root)/(routes)/mypage/suggestions/{ => [cardId]}/components/my-suggestion-card/index.tsx (100%) rename src/app/(root)/(routes)/mypage/suggestions/{ => [cardId]}/components/my-suggestion-list-content/MySuggestionListContent.tsx (87%) rename src/app/(root)/(routes)/mypage/suggestions/{ => [cardId]}/components/my-suggestion-list-content/index.tsx (100%) create mode 100644 src/app/(root)/(routes)/mypage/suggestions/[cardId]/components/my-suggestion-list/MySuggestionList.tsx rename src/app/(root)/(routes)/mypage/suggestions/{ => [cardId]}/components/my-suggestion-list/index.tsx (100%) rename src/app/(root)/(routes)/mypage/suggestions/{ => [cardId]}/components/suggestion-status-tabs/SuggestionStatusTabs.tsx (100%) rename src/app/(root)/(routes)/mypage/suggestions/{ => [cardId]}/components/suggestion-status-tabs/index.tsx (100%) rename src/app/(root)/(routes)/mypage/suggestions/{ => [cardId]}/page.tsx (68%) delete mode 100644 src/app/(root)/(routes)/mypage/suggestions/components/my-suggestion-list/MySuggestionList.tsx diff --git a/src/app/(root)/(routes)/mypage/suggestions/components/my-suggestion-card/MySuggestionCard.tsx b/src/app/(root)/(routes)/mypage/suggestions/[cardId]/components/my-suggestion-card/MySuggestionCard.tsx similarity index 88% rename from src/app/(root)/(routes)/mypage/suggestions/components/my-suggestion-card/MySuggestionCard.tsx rename to src/app/(root)/(routes)/mypage/suggestions/[cardId]/components/my-suggestion-card/MySuggestionCard.tsx index 4347c534..8ba81b9b 100644 --- a/src/app/(root)/(routes)/mypage/suggestions/components/my-suggestion-card/MySuggestionCard.tsx +++ b/src/app/(root)/(routes)/mypage/suggestions/[cardId]/components/my-suggestion-card/MySuggestionCard.tsx @@ -1,14 +1,15 @@ import { formatDistanceToNow } from 'date-fns' import koLocale from 'date-fns/locale/ko' import Image from 'next/image' -import { useSearchParams } from 'next/navigation' +import { useParams } from 'next/navigation' import Button from '@/components/ui/button' import { CardFlex, CardText, Card, CardImage } from '@/components/ui/card/Card' import Assets from '@/config/assets' import { useMySuggestionUpdateMutation } from '@/hooks/api/mutations/useMySuggestionUpdateMutation' -import { MySuggestionRes } from '@/services/suggestion/suggestion' +import { Card as CardInfo } from '@/types/card' import { DirectionType, + Suggestion, SuggestionStatus, SuggestionType, } from '@/types/suggestion' @@ -59,13 +60,16 @@ const WaitingButton = () => { ) } -type SuggestCheckCardProps = { - mySuggestionRes: MySuggestionRes & { pageInfo: number } +type MySuggestionCardProps = { + mySuggestion: { + suggestionInfo: Suggestion + cardInfo: CardInfo + } suggestionTypeState: SuggestionType directionTypeState: DirectionType } const MySuggestionCard = ({ - mySuggestionRes: { + mySuggestion: { suggestionInfo: { suggestionId, suggestionStatus, @@ -73,23 +77,22 @@ const MySuggestionCard = ({ createdAt, }, cardInfo: { cardTitle, itemName, priceRange, thumbnail }, - pageInfo, }, suggestionTypeState, directionTypeState, -}: SuggestCheckCardProps) => { - const searchParams = useSearchParams() +}: MySuggestionCardProps) => { + const { cardId } = useParams() const { mutate } = useMySuggestionUpdateMutation( suggestionTypeState, directionTypeState, - searchParams.get('cardId'), + cardId, ) const handleMySuggestionUpdate = ( suggestionId: string, suggestionStatus: SuggestionStatus, ) => { - mutate({ suggestionId, suggestionStatus, currentPage: pageInfo }) + mutate({ suggestionId, suggestionStatus }) } return ( @@ -115,7 +118,7 @@ const MySuggestionCard = ({ {cardTitle} {itemName} - {priceRange['value']} + {priceRange} {suggestionStatus === 'WAITING' ? ( directionType === 'RECEIVE' ? ( diff --git a/src/app/(root)/(routes)/mypage/suggestions/components/my-suggestion-card/index.tsx b/src/app/(root)/(routes)/mypage/suggestions/[cardId]/components/my-suggestion-card/index.tsx similarity index 100% rename from src/app/(root)/(routes)/mypage/suggestions/components/my-suggestion-card/index.tsx rename to src/app/(root)/(routes)/mypage/suggestions/[cardId]/components/my-suggestion-card/index.tsx diff --git a/src/app/(root)/(routes)/mypage/suggestions/components/my-suggestion-list-content/MySuggestionListContent.tsx b/src/app/(root)/(routes)/mypage/suggestions/[cardId]/components/my-suggestion-list-content/MySuggestionListContent.tsx similarity index 87% rename from src/app/(root)/(routes)/mypage/suggestions/components/my-suggestion-list-content/MySuggestionListContent.tsx rename to src/app/(root)/(routes)/mypage/suggestions/[cardId]/components/my-suggestion-list-content/MySuggestionListContent.tsx index ca89fbb6..e004ee01 100644 --- a/src/app/(root)/(routes)/mypage/suggestions/components/my-suggestion-list-content/MySuggestionListContent.tsx +++ b/src/app/(root)/(routes)/mypage/suggestions/[cardId]/components/my-suggestion-list-content/MySuggestionListContent.tsx @@ -1,7 +1,7 @@ 'use client' import { useEffect, useRef, useState } from 'react' -import { useSearchParams } from 'next/navigation' +import { useParams, usePathname, useRouter } from 'next/navigation' import ExceptionBoundary from '@/components/domain/exception-boundary' import MaxWidthWrapper from '@/components/domain/max-width-wrapper' import { useMySuggestionsQuery } from '@/hooks/api/queries/useMySuggestionsQuery' @@ -15,14 +15,10 @@ const MySuggestionListContent = () => { useState('OFFER') const [directionTypeState, setDirectionTypeState] = useState('RECEIVE') - const searchParams = useSearchParams() + const { cardId } = useParams() const { data, fetchNextPage, isLoading, isError, isFetchingNextPage } = - useMySuggestionsQuery( - suggestionTypeState, - directionTypeState, - searchParams.get('cardId'), - ) + useMySuggestionsQuery(suggestionTypeState, directionTypeState, cardId) const lastElementRef = useRef(null) const entry = useIntersectionObserver(lastElementRef, { threshold: 1.0 }) @@ -37,8 +33,7 @@ const MySuggestionListContent = () => { } }, [entry?.isIntersecting, fetchNextPage, isFetchingNextPage]) - const isEmpty = data?.pages[0].length === 0 - console.log('content', data) + const isEmpty = data?.pages[0].data.suggestionList.length === 0 return (
diff --git a/src/app/(root)/(routes)/mypage/suggestions/components/my-suggestion-list-content/index.tsx b/src/app/(root)/(routes)/mypage/suggestions/[cardId]/components/my-suggestion-list-content/index.tsx similarity index 100% rename from src/app/(root)/(routes)/mypage/suggestions/components/my-suggestion-list-content/index.tsx rename to src/app/(root)/(routes)/mypage/suggestions/[cardId]/components/my-suggestion-list-content/index.tsx diff --git a/src/app/(root)/(routes)/mypage/suggestions/[cardId]/components/my-suggestion-list/MySuggestionList.tsx b/src/app/(root)/(routes)/mypage/suggestions/[cardId]/components/my-suggestion-list/MySuggestionList.tsx new file mode 100644 index 00000000..0821787d --- /dev/null +++ b/src/app/(root)/(routes)/mypage/suggestions/[cardId]/components/my-suggestion-list/MySuggestionList.tsx @@ -0,0 +1,37 @@ +import { Fragment } from 'react' +import { InfiniteData } from '@tanstack/react-query' +import { GetMySuggestionListRes } from '@/services/suggestion/suggestion' +import { Card } from '@/types/card' +import { DirectionType, Suggestion, SuggestionType } from '@/types/suggestion' +import MySuggestionCard from '../my-suggestion-card' + +const MySuggestionList = ({ + data, + suggestionTypeState, + directionTypeState, +}: { + data: InfiniteData | undefined + suggestionTypeState: SuggestionType + directionTypeState: DirectionType +}) => ( + <> + {data?.pages.map( + ({ data: { suggestionList } }: GetMySuggestionListRes, pageIndex) => ( + + {suggestionList.map( + (mySuggestion: { cardInfo: Card; suggestionInfo: Suggestion }) => ( + + ), + )} + + ), + )} + +) + +export default MySuggestionList diff --git a/src/app/(root)/(routes)/mypage/suggestions/components/my-suggestion-list/index.tsx b/src/app/(root)/(routes)/mypage/suggestions/[cardId]/components/my-suggestion-list/index.tsx similarity index 100% rename from src/app/(root)/(routes)/mypage/suggestions/components/my-suggestion-list/index.tsx rename to src/app/(root)/(routes)/mypage/suggestions/[cardId]/components/my-suggestion-list/index.tsx diff --git a/src/app/(root)/(routes)/mypage/suggestions/components/suggestion-status-tabs/SuggestionStatusTabs.tsx b/src/app/(root)/(routes)/mypage/suggestions/[cardId]/components/suggestion-status-tabs/SuggestionStatusTabs.tsx similarity index 100% rename from src/app/(root)/(routes)/mypage/suggestions/components/suggestion-status-tabs/SuggestionStatusTabs.tsx rename to src/app/(root)/(routes)/mypage/suggestions/[cardId]/components/suggestion-status-tabs/SuggestionStatusTabs.tsx diff --git a/src/app/(root)/(routes)/mypage/suggestions/components/suggestion-status-tabs/index.tsx b/src/app/(root)/(routes)/mypage/suggestions/[cardId]/components/suggestion-status-tabs/index.tsx similarity index 100% rename from src/app/(root)/(routes)/mypage/suggestions/components/suggestion-status-tabs/index.tsx rename to src/app/(root)/(routes)/mypage/suggestions/[cardId]/components/suggestion-status-tabs/index.tsx diff --git a/src/app/(root)/(routes)/mypage/suggestions/page.tsx b/src/app/(root)/(routes)/mypage/suggestions/[cardId]/page.tsx similarity index 68% rename from src/app/(root)/(routes)/mypage/suggestions/page.tsx rename to src/app/(root)/(routes)/mypage/suggestions/[cardId]/page.tsx index edaab962..bbeec2fb 100644 --- a/src/app/(root)/(routes)/mypage/suggestions/page.tsx +++ b/src/app/(root)/(routes)/mypage/suggestions/[cardId]/page.tsx @@ -2,13 +2,7 @@ import { FunctionComponent } from 'react' import PageTitle from '@/components/domain/page-title' import { getCardInfo } from '@/services/card/card' // import MyItemSummaryCard from './components/my-item-summary-card' -import MySuggestionList from './components/my-suggestion-list-content' - -interface SuggestCheckListPageProps { - params: { - itemId: string - } -} +import MySuggestionListContent from './components/my-suggestion-list-content' async function getItemValue(cardId: number) { try { @@ -23,17 +17,18 @@ async function getItemValue(cardId: number) { } } -const SuggestCheckListPage: FunctionComponent< - SuggestCheckListPageProps -> = async ({ params }: SuggestCheckListPageProps) => { +const SuggestCheckListPage = async ({ + params, +}: { + params: { cardId: string } +}) => { const data = await getItemValue(3) return (
- {/* */} {JSON.stringify(data)} - +
) } diff --git a/src/app/(root)/(routes)/mypage/suggestions/components/my-suggestion-list/MySuggestionList.tsx b/src/app/(root)/(routes)/mypage/suggestions/components/my-suggestion-list/MySuggestionList.tsx deleted file mode 100644 index 273ca69e..00000000 --- a/src/app/(root)/(routes)/mypage/suggestions/components/my-suggestion-list/MySuggestionList.tsx +++ /dev/null @@ -1,38 +0,0 @@ -import { Fragment } from 'react' -import { InfiniteData } from '@tanstack/react-query' -import { MySuggestionRes } from '@/services/suggestion/suggestion' -import { DirectionType, SuggestionType } from '@/types/suggestion' -import MySuggestionCard from '../my-suggestion-card' - -const MySuggestionList = ({ - data, - suggestionTypeState, - directionTypeState, -}: { - data: InfiniteData | undefined - suggestionTypeState: SuggestionType - directionTypeState: DirectionType -}) => ( - <> - {data?.pages.map(({ suggestionList }, pageIndex) => ( - - {suggestionList.map( - ( - mySuggestionRes: MySuggestionRes & { - pageInfo: number - }, - ) => ( - - ), - )} - - ))} - -) - -export default MySuggestionList diff --git a/src/config/apiEndPoint.ts b/src/config/apiEndPoint.ts index ccae8564..d686f7ee 100644 --- a/src/config/apiEndPoint.ts +++ b/src/config/apiEndPoint.ts @@ -1,7 +1,6 @@ import { GetCardListReq, GetMyCardListReq } from '@/services/card/card' import { GetMyTradeHistoryListReq } from '@/services/history/history' -import { Category, PriceRange, TradeStatus } from '@/types/card' -import { DirectionType, SuggestionType } from '@/types/suggestion' +import { GetMySuggestionListReq } from '@/services/suggestion/suggestion' import { getQueryParams } from '@/utils/getQueryParams' const ApiEndPoint = { @@ -33,12 +32,12 @@ const ApiEndPoint = { deleteDibs: (cardId: number) => `/dibs/${cardId}`, getAvailableCardSuggestionList: (cardId: number) => `cards/${cardId}/available-cards`, - getMySuggestionList: ( - directionType: DirectionType, - suggestionType: SuggestionType, - cardId: string | null, - cursorId: number, - ) => { + getMySuggestionList: ({ + directionType, + suggestionType, + cardId, + cursorId, + }: GetMySuggestionListReq) => { return `/suggestions/${directionType}/${suggestionType}/${cardId}/?${getQueryParams( { cursorId, diff --git a/src/hooks/api/mutations/useMySuggestionUpdateMutation.ts b/src/hooks/api/mutations/useMySuggestionUpdateMutation.ts index 472a53ce..cb5c6dde 100644 --- a/src/hooks/api/mutations/useMySuggestionUpdateMutation.ts +++ b/src/hooks/api/mutations/useMySuggestionUpdateMutation.ts @@ -1,5 +1,4 @@ import { useMutation, useQueryClient } from '@tanstack/react-query' -import { MySuggestionRes } from '@/services/suggestion/suggestion' import { DirectionType, SuggestionStatus, @@ -9,50 +8,49 @@ import { export const useMySuggestionUpdateMutation = ( suggestionType: SuggestionType, directionType: DirectionType, - cardId: string | null, + cardId: string | string[], ) => { const queryClient = useQueryClient() return useMutation({ onMutate: async ({ suggestionId, suggestionStatus, - currentPage, }: { suggestionId: string suggestionStatus: SuggestionStatus - currentPage: number }) => { - await queryClient.cancelQueries({ - queryKey: ['my-suggestions', suggestionType, directionType, cardId], - }) - console.log( - suggestionType, - directionType, - cardId, - suggestionId, - currentPage, - ) - const oldMySuggestionList = queryClient.getQueryData([ - 'my-suggestions', - suggestionType, - directionType, - cardId, - ]) + // await queryClient.cancelQueries({ + // queryKey: ['my-suggestions', suggestionType, directionType, cardId], + // }) + // console.log( + // suggestionType, + // directionType, + // cardId, + // suggestionId, + // ) + // const oldMySuggestionList = queryClient.getQueryData([ + // 'my-suggestions', + // suggestionType, + // directionType, + // cardId, + // ]) - const newMySuggestionList: any = structuredClone(oldMySuggestionList) - const currentPageMySuggstionList = newMySuggestionList.pages[currentPage] - const currentMySuggestionList = currentPageMySuggstionList.find( - (mySuggestion: MySuggestionRes) => - mySuggestion.suggestionInfo.suggestionId === suggestionId, - ) - currentMySuggestionList.suggestionInfo.suggestionStatus = suggestionStatus - console.log(newMySuggestionList) + // const newMySuggestionList: any = structuredClone(oldMySuggestionList) + // const currentPageMySuggstionList = + // // newMySuggestionList.pages[currentCursorId] + // const currentMySuggestionList = currentPageMySuggstionList.find( + // (mySuggestion: MySuggestionRes) => + // mySuggestion.suggestionInfo.suggestionId === suggestionId, + // ) + // currentMySuggestionList.suggestionInfo.suggestionStatus = suggestionStatus + // console.log(newMySuggestionList) - queryClient.setQueryData( - ['my-suggestions', suggestionType, directionType, cardId], - newMySuggestionList, - ) - return { oldMySuggestionList, newMySuggestionList } + // queryClient.setQueryData( + // ['my-suggestions', suggestionType, directionType, cardId], + // newMySuggestionList, + // ) + // return { oldMySuggestionList, newMySuggestionList } + console.log('점검중') }, // TODO : 에러처리 및 각 종 Optimistic Update 관련 기능 처리하기 }) diff --git a/src/hooks/api/queries/useMySuggestionsQuery.ts b/src/hooks/api/queries/useMySuggestionsQuery.ts index 821e29fb..97221d85 100644 --- a/src/hooks/api/queries/useMySuggestionsQuery.ts +++ b/src/hooks/api/queries/useMySuggestionsQuery.ts @@ -1,39 +1,24 @@ import { useInfiniteQuery } from '@tanstack/react-query' import { getMySuggestionList } from '@/services/suggestion/suggestion' -import { MySuggestionRes } from '@/services/suggestion/suggestion' import { DirectionType, SuggestionType } from '@/types/suggestion' export const useMySuggestionsQuery = ( suggestionType: SuggestionType, directionType: DirectionType, - cardId: string | null, + cardId: string | string[], ) => { return useInfiniteQuery({ queryKey: ['my-suggestions', suggestionType, directionType, cardId], - queryFn: async ({ pageParam = 0 }) => { - const data = await getMySuggestionList({ + queryFn: async ({ pageParam = undefined }) => + await getMySuggestionList({ suggestionType, directionType, cardId, cursorId: pageParam, - }) - - const dataContainingPageInfo = data.map( - (mySuggestion: MySuggestionRes) => ({ - ...mySuggestion, - pageInfo: pageParam, - }), - ) - - return dataContainingPageInfo - }, - + }), initialPageParam: undefined, - getNextPageParam: (lastPage, allPages, lastPageParam) => { - if (lastPage.length === 0) { - return undefined - } - return lastPage.nextCursorId + getNextPageParam: (lastPage: any) => { + return lastPage.data.nextCursorId }, }) } diff --git a/src/services/suggestion/suggestion.ts b/src/services/suggestion/suggestion.ts index 7b42b836..27a7c957 100644 --- a/src/services/suggestion/suggestion.ts +++ b/src/services/suggestion/suggestion.ts @@ -40,16 +40,22 @@ const postSuggestion = async ({ return response } -type GetSuggestChecksParams = { +export type GetMySuggestionListReq = { suggestionType: SuggestionType directionType: DirectionType - cardId: string | null - cursorId: number + cardId: string | string[] + cursorId: string | undefined } - -export type MySuggestionRes = { - cardInfo: Card - suggestionInfo: Suggestion +export type GetMySuggestionListRes = { + code: string + message: string + data: { + suggestionList: { + cardInfo: Card + suggestionInfo: Suggestion + }[] + nextCursorId: string + } } const getMySuggestionList = async ({ @@ -57,16 +63,16 @@ const getMySuggestionList = async ({ directionType, cardId, cursorId, -}: GetSuggestChecksParams) => { - const response = await apiClient.get( - ApiEndPoint.getMySuggestionList( +}: GetMySuggestionListReq) => { + const response: GetMySuggestionListRes = await apiClient.get( + ApiEndPoint.getMySuggestionList({ directionType, suggestionType, cardId, cursorId, - ), + }), ) - return response.data + return response } export { getAvailableCardSuggestionList, getMySuggestionList, postSuggestion } From f171042853f75a53aaf42f87a89f96f45b6f3c21 Mon Sep 17 00:00:00 2001 From: doggopawer Date: Mon, 20 Nov 2023 22:41:58 +0900 Subject: [PATCH 19/31] =?UTF-8?q?:bug:=20=EB=B9=8C=EB=93=9C=20=EC=97=90?= =?UTF-8?q?=EB=9F=AC=20=ED=95=B4=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/services/card/card.ts | 8 -------- 1 file changed, 8 deletions(-) diff --git a/src/services/card/card.ts b/src/services/card/card.ts index 6e1797df..5e730af7 100644 --- a/src/services/card/card.ts +++ b/src/services/card/card.ts @@ -1,17 +1,10 @@ import { CardUploadFormValues } from '@/app/(root)/(routes)/cards/new/hooks/useCardUploadForm' import ApiEndPoint from '@/config/apiEndPoint' import type { -<<<<<<< HEAD Card, - Category, CategoryObjs, - PriceRange, PriceRangeObjs, -======= CardDetail, - Category, - PriceRange, ->>>>>>> develop TradeStatus, } from '@/types/card' import apiClient from '../apiClient' @@ -107,7 +100,6 @@ export type GetMyCardListRes = { const getMyCardList = async ({ tradeStatus, cursorId }: GetMyCardListReq) => { const response: GetMyCardListRes = await apiClient.get( ApiEndPoint.getMyCardList({ tradeStatus, cursorId }), - ) return response } From 924be33fc942e4755c66320f455b431d68e9dd9a Mon Sep 17 00:00:00 2001 From: oaoong Date: Tue, 21 Nov 2023 00:25:36 +0900 Subject: [PATCH 20/31] =?UTF-8?q?:tada:=20=EC=A0=91=EA=B7=BC=20=EA=B6=8C?= =?UTF-8?q?=ED=95=9C=20=EC=B2=98=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/(root)/(routes)/(home)/error.tsx | 2 +- .../(routes)/cards/[cardId]/modify/error.tsx | 37 +++++++++++++++++-- .../(routes)/cards/[cardId]/modify/page.tsx | 18 +++++++++ src/middleware.ts | 2 +- src/services/card/card.ts | 3 +- 5 files changed, 56 insertions(+), 6 deletions(-) diff --git a/src/app/(root)/(routes)/(home)/error.tsx b/src/app/(root)/(routes)/(home)/error.tsx index 3b75e38a..33b557a5 100644 --- a/src/app/(root)/(routes)/(home)/error.tsx +++ b/src/app/(root)/(routes)/(home)/error.tsx @@ -18,7 +18,7 @@ export default function ErrorPage({ const { toast } = useToast() useEffect(() => { // Log the error to an error reporting service - console.log(error.digest, error.message, error.name) + if (error.message === ErrorMessages.Forbidden) { console.log('ForbiddenError') toast({ diff --git a/src/app/(root)/(routes)/cards/[cardId]/modify/error.tsx b/src/app/(root)/(routes)/cards/[cardId]/modify/error.tsx index 2cdc24d0..6ac58247 100644 --- a/src/app/(root)/(routes)/cards/[cardId]/modify/error.tsx +++ b/src/app/(root)/(routes)/cards/[cardId]/modify/error.tsx @@ -2,6 +2,10 @@ // Error components must be Client Components import { useEffect } from 'react' +import { useRouter } from 'next/navigation' +import AppPath from '@/config/appPath' +import ErrorMessages from '@/config/errorMessages' +import { useToast } from '@/hooks/useToast' export default function Error({ error, @@ -10,14 +14,41 @@ export default function Error({ error: Error & { digest?: string } reset: () => void }) { + const router = useRouter() + const { toast } = useToast() useEffect(() => { - // Log the error to an error reporting service - console.error(error) - }, [error]) + console.log(error.digest, error.message, error.name) + if (error.message === ErrorMessages.Forbidden) { + console.log('ForbiddenError') + toast({ + title: 'Forbidden', + description: 'You do not have permission to access this page.', + duration: 2000, + }) + } + if (error.message === ErrorMessages.Unauthorized) { + router.push(AppPath.login()) + toast({ + title: 'Unauthorized', + description: 'Please login to access this page.', + duration: 2000, + }) + } + if (error.message === ErrorMessages.NotFound) { + toast({ + title: 'Not Found', + description: 'Please login to access this page.', + duration: 2000, + }) + } + }, [error, router, toast]) return (

Something went wrong!

+

+ Error: {error.message} ({error?.name}) +

+ + + + { + router.push(AppPath.mypage()) + }} + > + 내 정보 + + 로그아웃 + + + + ) +} + +export default AvatarWithDropdown diff --git a/src/components/domain/header/components/MenuButton.tsx b/src/components/domain/header/components/MenuButton.tsx new file mode 100644 index 00000000..eb173b80 --- /dev/null +++ b/src/components/domain/header/components/MenuButton.tsx @@ -0,0 +1,33 @@ +import Image from 'next/image' +import Link from 'next/link' +import Button from '@/components/ui/button' +import { + DropdownMenu, + DropdownMenuTrigger, + DropdownMenuContent, + DropdownMenuGroup, + DropdownMenuItem, +} from '@/components/ui/dropdown-menu' +import AppPath from '@/config/appPath' +import Assets from '@/config/assets' + +const MenuButton = () => { + return ( + + + + + + + + 홈으로 + + + + + ) +} + +export default MenuButton diff --git a/src/components/domain/header/components/index.tsx b/src/components/domain/header/components/index.tsx index 0ae8ce64..350a14be 100644 --- a/src/components/domain/header/components/index.tsx +++ b/src/components/domain/header/components/index.tsx @@ -1,76 +1,4 @@ -import Cookies from 'js-cookie' -import Image from 'next/image' -import Link from 'next/link' -import { useRouter } from 'next/navigation' -import { Avatar, AvatarImage, AvatarFallback } from '@/components/ui/avatar' -import Button from '@/components/ui/button' -import { - DropdownMenu, - DropdownMenuTrigger, - DropdownMenuContent, - DropdownMenuGroup, - DropdownMenuItem, -} from '@/components/ui/dropdown-menu' -import AppPath from '@/config/appPath' -import Assets from '@/config/assets' -import { Environment } from '@/config/environment' -import { DEFAULT_PROFILE_IMG } from '@/constants/image' -import apiClient from '@/services/apiClient' +import AvatarWithDropdown from './AvatarWithDropdown' +import MenuButton from './MenuButton' -//TODO: 공용 아바타 컴포넌트로 변경 - -const MenuButton = () => { - return ( - - - - - - - - 홈으로 - - - - - ) -} - -const AvatarWithDropdown = ({ imageUrl }: { imageUrl?: string }) => { - const router = useRouter() - - const onClickLogout = () => { - Cookies.remove(Environment.tokenName()) - apiClient.setDefaultHeader('Authorization', '') - location.reload() - } - - return ( - - - - - - - { - router.push(AppPath.mypage()) - }} - > - 내 정보 - - 로그아웃 - - - - ) -} - -export { MenuButton, AvatarWithDropdown } +export { AvatarWithDropdown, MenuButton } From 8b4e3abe85279e8d33e339dff86861a01350ded8 Mon Sep 17 00:00:00 2001 From: oaoong Date: Tue, 21 Nov 2023 13:53:47 +0900 Subject: [PATCH 22/31] =?UTF-8?q?:sparkles:=20=EC=97=90=EB=9F=AC=20?= =?UTF-8?q?=EB=A9=94=EC=84=B8=EC=A7=80=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/(root)/(routes)/cards/[cardId]/modify/error.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/app/(root)/(routes)/cards/[cardId]/modify/error.tsx b/src/app/(root)/(routes)/cards/[cardId]/modify/error.tsx index 6ac58247..afffdf69 100644 --- a/src/app/(root)/(routes)/cards/[cardId]/modify/error.tsx +++ b/src/app/(root)/(routes)/cards/[cardId]/modify/error.tsx @@ -22,7 +22,7 @@ export default function Error({ console.log('ForbiddenError') toast({ title: 'Forbidden', - description: 'You do not have permission to access this page.', + description: ErrorMessages.Forbidden, duration: 2000, }) } @@ -30,14 +30,14 @@ export default function Error({ router.push(AppPath.login()) toast({ title: 'Unauthorized', - description: 'Please login to access this page.', + description: ErrorMessages.Unauthorized, duration: 2000, }) } if (error.message === ErrorMessages.NotFound) { toast({ title: 'Not Found', - description: 'Please login to access this page.', + description: ErrorMessages.NotFound, duration: 2000, }) } From 7fe6d3b09494b248aa6eadc6378efc8e159d7009 Mon Sep 17 00:00:00 2001 From: oaoong Date: Tue, 21 Nov 2023 13:59:39 +0900 Subject: [PATCH 23/31] =?UTF-8?q?:bug:=20=EB=B9=8C=EB=93=9C=20=EC=97=90?= =?UTF-8?q?=EB=9F=AC=20=EC=B2=98=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/services/card/card.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/services/card/card.ts b/src/services/card/card.ts index 8d8b0a38..8a971f2e 100644 --- a/src/services/card/card.ts +++ b/src/services/card/card.ts @@ -75,7 +75,7 @@ export type CardInfoRes = { const getCardInfo = async ( cardId: number, -): Promise<{ data: { cardInfo: CardDetail } }> => { +): Promise<{ data: { cardInfo: CardDetail; userInfo: User } }> => { const response = await apiClient.get(ApiEndPoint.getCardInfo(cardId), { cache: 'no-store', }) From 38ce8c43c0633ff8ae6e2d446d3df955dac740a4 Mon Sep 17 00:00:00 2001 From: doggopawer Date: Tue, 21 Nov 2023 14:40:01 +0900 Subject: [PATCH 24/31] =?UTF-8?q?:bug:=20PriceRange,=20PriceRangeObjs=20?= =?UTF-8?q?=EB=A1=9C=20=ED=83=80=EC=9E=85=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../filter-form-dialog/FilterFormDialog.tsx | 22 +++++++++---------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/src/app/(root)/(routes)/cards/components/filter-form-dialog/FilterFormDialog.tsx b/src/app/(root)/(routes)/cards/components/filter-form-dialog/FilterFormDialog.tsx index f96d31b5..9a8f307c 100644 --- a/src/app/(root)/(routes)/cards/components/filter-form-dialog/FilterFormDialog.tsx +++ b/src/app/(root)/(routes)/cards/components/filter-form-dialog/FilterFormDialog.tsx @@ -16,14 +16,14 @@ import { SelectTrigger, } from '@/components/ui/select' import Assets from '@/config/assets' -import { CATEGORY_OBJS, PRICE_RANGE, PRICE_RANGE_OBJS } from '@/constants/card' -import { Category, PriceRange } from '@/types/card' +import { CATEGORY_OBJS, PRICE_RANGE_OBJS } from '@/constants/card' +import { CategoryObjs, PriceRangeObjs } from '@/types/card' type FilterFormDialogProps = { - priceRange: PriceRange['key'] - category: Category['key'] - setPriceRange: (priceRange: PriceRange['key']) => void - setCategory: (category: Category['key']) => void + priceRange: PriceRangeObjs['key'] + category: CategoryObjs['key'] + setPriceRange: (priceRange: PriceRangeObjs['key']) => void + setCategory: (category: CategoryObjs['key']) => void } const FilterFormDialog = ({ @@ -44,7 +44,7 @@ const FilterFormDialog = ({ const hasNoFilter = priceRange !== undefined || category !== undefined const priceRangeValue = PRICE_RANGE_OBJS.find(({ key }) => key === priceRange) ?.value - const getCategoryValue = (categoryKey: Category['key']) => + const getCategoryValue = (categoryKey: CategoryObjs['key']) => CATEGORY_OBJS.find(({ key }) => key === categoryKey)?.value return ( @@ -82,7 +82,7 @@ const FilterFormDialog = ({