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..8b3c6ea2 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,44 @@ type SuggestListProps = { toCardId: number } -/** - * TODO : 스크롤바 디자인 수정 - */ const SuggestList = ({ suggestionData, pokeAvailable, toCardId, }: SuggestListProps) => { + const router = useRouter() + const filterData = (type: string) => { + const filteredData = suggestionData.filter( + (v) => v.suggestionInfo.suggestionType === type, + ) + + if (filteredData.length === 0) { + return ( +
+ router.push('/cards/new')} + buttonContent="물건 등록하러 가기" + /> +
+ ) + } else { + return filteredData.map((v) => ( + + )) + } + } + return ( @@ -31,33 +62,9 @@ const SuggestList = ({ className="flex flex-col data-[state=inactive]:hidden h-[402px] overflow-y-auto" > {!pokeAvailable && type === 'POKE' ? ( -
- unavailable -

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

-
+ ) : ( - suggestionData - .filter((v) => v.suggestionInfo.suggestionType === type) - .map((v) => ( - - )) + filterData(type) )} ))} 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/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 }, {},