From 4d43b64c27ed35c209166842f0307d833e2688b4 Mon Sep 17 00:00:00 2001 From: juyeon-park Date: Tue, 28 Nov 2023 00:00:39 +0900 Subject: [PATCH] =?UTF-8?q?:bug:=20=EA=B1=B0=EB=9E=98=EC=84=B1=EC=82=AC=20?= =?UTF-8?q?=EC=A0=9C=EC=95=88/=EC=88=98=EB=9D=BD=20=EB=B2=84=EA=B7=B8=20?= =?UTF-8?q?=ED=95=B4=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../trade-section/PokeUnavailableInfo.tsx | 18 ++++++ .../components/trade-section/SuggestList.tsx | 61 ++++++++++--------- .../components/trade-section/TradeSection.tsx | 3 +- .../components/CompleteRequestButton.tsx | 12 +++- .../components/CompleteRequestCard.tsx | 49 +++++++++------ .../components/CompleteRequestTemplate.tsx | 5 +- .../(routes)/chatrooms/[chatRoomId]/page.tsx | 2 +- .../mutations/useCardStatusUpdateMutation.ts | 5 +- .../complete-request/completeRequest.ts | 2 +- 9 files changed, 95 insertions(+), 62 deletions(-) create mode 100644 src/app/(root)/(routes)/cards/[cardId]/components/trade-section/PokeUnavailableInfo.tsx diff --git a/src/app/(root)/(routes)/cards/[cardId]/components/trade-section/PokeUnavailableInfo.tsx b/src/app/(root)/(routes)/cards/[cardId]/components/trade-section/PokeUnavailableInfo.tsx new file mode 100644 index 00000000..6e0cd393 --- /dev/null +++ b/src/app/(root)/(routes)/cards/[cardId]/components/trade-section/PokeUnavailableInfo.tsx @@ -0,0 +1,18 @@ +import Image from 'next/image' +import Assets from '@/config/assets' + +const PokeUnavailableInfo = () => { + return ( +
+ unavailable +

찔러보기가 허용되지 않은 물건입니다

+
+ ) +} + +export default PokeUnavailableInfo diff --git a/src/app/(root)/(routes)/cards/[cardId]/components/trade-section/SuggestList.tsx b/src/app/(root)/(routes)/cards/[cardId]/components/trade-section/SuggestList.tsx index 4e007a82..d3178fa1 100644 --- a/src/app/(root)/(routes)/cards/[cardId]/components/trade-section/SuggestList.tsx +++ b/src/app/(root)/(routes)/cards/[cardId]/components/trade-section/SuggestList.tsx @@ -1,8 +1,9 @@ -import Image from 'next/image' +import { useRouter } from 'next/navigation' import SuggestCard from '@/components/domain/card/suggest-card' +import NoData from '@/components/domain/no-data' import { Tabs, TabsTrigger, TabsList, TabsContent } from '@/components/ui/tabs' -import Assets from '@/config/assets' import { AvailableCardSuggestionListRes } from '@/services/suggestion/suggestion' +import PokeUnavailableInfo from './PokeUnavailableInfo' type SuggestListProps = { suggestionData: AvailableCardSuggestionListRes[] @@ -10,14 +11,18 @@ type SuggestListProps = { toCardId: number } -/** - * TODO : 스크롤바 디자인 수정 - */ const SuggestList = ({ suggestionData, pokeAvailable, toCardId, }: SuggestListProps) => { + const router = useRouter() + const filterData = (type: string) => { + return suggestionData.filter( + (v) => v.suggestionInfo.suggestionType === type, + ) + } + return ( @@ -31,33 +36,29 @@ const SuggestList = ({ className="flex flex-col data-[state=inactive]:hidden h-[402px] overflow-y-auto" > {!pokeAvailable && type === 'POKE' ? ( -
- unavailable + ) : filterData(type).length ? ( + filterData(type).map((v) => ( + -

- 찔러보기가 허용되지 않은 물건입니다 -

-
+ )) ) : ( - suggestionData - .filter((v) => v.suggestionInfo.suggestionType === type) - .map((v) => ( - - )) +
+ router.push('/cards/new')} + buttonContent="물건 등록하러 가기" + /> +
)} ))} diff --git a/src/app/(root)/(routes)/cards/[cardId]/components/trade-section/TradeSection.tsx b/src/app/(root)/(routes)/cards/[cardId]/components/trade-section/TradeSection.tsx index 8785a5ae..528ee760 100644 --- a/src/app/(root)/(routes)/cards/[cardId]/components/trade-section/TradeSection.tsx +++ b/src/app/(root)/(routes)/cards/[cardId]/components/trade-section/TradeSection.tsx @@ -11,6 +11,7 @@ import { DialogHeader, DialogTitle, } from '@/components/ui/dialog' +import AppPath from '@/config/appPath' import Assets from '@/config/assets' import { PRICE_RANGE_OBJS, TRADE_TYPE_OBJS } from '@/constants/card' import { useAuth } from '@/contexts/AuthProvider' @@ -77,7 +78,7 @@ const TradeSection = ({ const onClickButton = async () => { if (isMyItem) { - router.push(`/mypage/suggestions/${cardId}`) + router.push(AppPath.mySuggestions(cardId)) } else { setOpen(true) } diff --git a/src/app/(root)/(routes)/chatrooms/[chatRoomId]/components/CompleteRequestButton.tsx b/src/app/(root)/(routes)/chatrooms/[chatRoomId]/components/CompleteRequestButton.tsx index 74572313..e35453a7 100644 --- a/src/app/(root)/(routes)/chatrooms/[chatRoomId]/components/CompleteRequestButton.tsx +++ b/src/app/(root)/(routes)/chatrooms/[chatRoomId]/components/CompleteRequestButton.tsx @@ -1,5 +1,6 @@ 'use client' +import { useState } from 'react' import Image from 'next/image' import Button from '@/components/ui/button' import { @@ -22,9 +23,12 @@ const CompleteRequestButton = ({ myCardId, otherCardId, }: CompleteRequestButtonProps) => { + const [isCompleteRequested, setIsCompleteRequested] = useState(false) + const handleRequestButton = async () => { try { await postCompleteRequest(myCardId, otherCardId) + setIsCompleteRequested(true) toast({ title: '거래성사를 요청하였습니다', variant: 'default', @@ -42,9 +46,11 @@ const CompleteRequestButton = ({ return ( - + {!isCompleteRequested && ( + + )} diff --git a/src/app/(root)/(routes)/chatrooms/[chatRoomId]/components/CompleteRequestCard.tsx b/src/app/(root)/(routes)/chatrooms/[chatRoomId]/components/CompleteRequestCard.tsx index 6e01c133..9a5b2ddc 100644 --- a/src/app/(root)/(routes)/chatrooms/[chatRoomId]/components/CompleteRequestCard.tsx +++ b/src/app/(root)/(routes)/chatrooms/[chatRoomId]/components/CompleteRequestCard.tsx @@ -1,4 +1,8 @@ +'use client' + +import { useState } from 'react' import Image from 'next/image' +import Badge from '@/components/ui/badge' import Button from '@/components/ui/button' import { Card, CardFlex, CardImage, CardText } from '@/components/ui/card/Card' import Assets from '@/config/assets' @@ -35,6 +39,7 @@ const CompleteRequestCard = ({ myCardData, otherCardData, }: CompleteRequestCardProps) => { + const [completeRequestStatus, setCompleteRequestStatus] = useState('') const handleCompleteRequestUpdate = async (isAccepted: boolean) => { try { await putCompleteRequest( @@ -42,7 +47,7 @@ const CompleteRequestCard = ({ myCardData.cardId, isAccepted, ) - window.location.reload() + setCompleteRequestStatus(isAccepted ? '거래성사 확정' : '거래성사 거절') toast({ title: `거래성사 요청을 ${isAccepted ? '수락' : '거절'}하였습니다.`, variant: 'default', @@ -71,24 +76,30 @@ const CompleteRequestCard = ({ > 거래성사 요청이 왔습니다. 거래를 하셨나요? - - - - + {completeRequestStatus === '' ? ( + + + + + ) : ( + + {completeRequestStatus} + + )} { - //NOTE - 현재 로그인한 사람이 거래성사 요청 받은 사람인경우 + 요청 상태가 waiting인 경우 - 거래성사요청 카드가 보인다. const isRequestedUser = toCard.userInfo.userId === currentUser.userId && status === 'WAITING' return isRequestedUser ? ( ) : ( diff --git a/src/app/(root)/(routes)/chatrooms/[chatRoomId]/page.tsx b/src/app/(root)/(routes)/chatrooms/[chatRoomId]/page.tsx index 4c6c1856..262fcb8c 100644 --- a/src/app/(root)/(routes)/chatrooms/[chatRoomId]/page.tsx +++ b/src/app/(root)/(routes)/chatrooms/[chatRoomId]/page.tsx @@ -63,7 +63,7 @@ const ChatPage = async ({ params }: ChatPageProps) => { initialChatRoom.fromCardInfo, initialChatRoom.toCardInfo, ] - console.log(suggestionDataArray) + const myCardId = suggestionDataArray.find( (obj) => obj.userInfo.userId === initialUserInfo.userId, ).cardInfo.cardId diff --git a/src/hooks/api/mutations/useCardStatusUpdateMutation.ts b/src/hooks/api/mutations/useCardStatusUpdateMutation.ts index c7d539ad..f7dab328 100644 --- a/src/hooks/api/mutations/useCardStatusUpdateMutation.ts +++ b/src/hooks/api/mutations/useCardStatusUpdateMutation.ts @@ -1,6 +1,4 @@ import { useMutation, useQueryClient } from '@tanstack/react-query' -import Cookies from 'js-cookie' -import { Environment } from '@/config/environment' import { toast } from '@/hooks/useToast' import { putCardStatus } from '@/services/card/card' import { TradeStatusObjs } from '@/types/card' @@ -10,9 +8,8 @@ const useCardStatusUpdateMutation = ( status: TradeStatusObjs['key'], ) => { const queryClient = useQueryClient() - const token = Cookies.get(Environment.tokenName()) - const queryKey = [cardId, 'cardInfo', token] + const queryKey = [cardId, 'cardInfo'] return useMutation({ mutationFn: putCardStatus, onMutate: async () => { diff --git a/src/services/complete-request/completeRequest.ts b/src/services/complete-request/completeRequest.ts index ffe8a1ef..c99f140c 100644 --- a/src/services/complete-request/completeRequest.ts +++ b/src/services/complete-request/completeRequest.ts @@ -18,7 +18,7 @@ const putCompleteRequest = async ( toCardId: number, isAccepted: boolean, ) => { - const response = await apiClient.post( + const response = await apiClient.put( ApiEndPoint.putCompleteRequest(), { fromCardId, toCardId, isAccepted }, {},