From 521c762a7107083fc57b280ed6ebc8df7d7b7a9e Mon Sep 17 00:00:00 2001 From: juyeon-park Date: Wed, 22 Nov 2023 18:15:42 +0900 Subject: [PATCH 1/8] =?UTF-8?q?:construction:=20complete=20request=20?= =?UTF-8?q?=EC=83=81=ED=83=9C=20=ED=83=80=EC=9E=85=20=EC=A7=80=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/constants/card.ts | 7 +++++++ src/types/card.ts | 3 +++ 2 files changed, 10 insertions(+) diff --git a/src/constants/card.ts b/src/constants/card.ts index 3f16ef6c..c16d424e 100644 --- a/src/constants/card.ts +++ b/src/constants/card.ts @@ -96,6 +96,12 @@ const CATEGORY_BUTTON_LIST = [ { key: 'ALL_CARD', value: '전체보기', image: Assets.allCardIcon }, ] as const +const COMPLETE_REQUEST_TYPE_OBJS = [ + { key: 'WAITING', value: '대기중' }, + { key: 'ACCEPTED', value: '확정' }, + { key: 'REFUSED', value: '거절됨' }, +] + export { PRICE_RANGE, CATEGORY, @@ -109,4 +115,5 @@ export { CATEGORY_OBJS, TRADE_TYPE_OBJS, TRADE_STATUS_OBJS, + COMPLETE_REQUEST_TYPE_OBJS, } diff --git a/src/types/card.ts b/src/types/card.ts index 3d67a992..a68bd780 100644 --- a/src/types/card.ts +++ b/src/types/card.ts @@ -7,6 +7,7 @@ import { PRICE_RANGE_OBJS, TRADE_STATUS_OBJS, TRADE_TYPE_OBJS, + COMPLETE_REQUEST_TYPE_OBJS, } from '@/constants/card' interface Card { @@ -51,6 +52,7 @@ type CategoryObjs = (typeof CATEGORY_OBJS)[number] type PriceRangeObjs = (typeof PRICE_RANGE_OBJS)[number] type TradeStatusObjs = (typeof TRADE_STATUS_OBJS)[number] type TradeTypeObjs = (typeof TRADE_TYPE_OBJS)[number] +type CompleteRequestTypeObjs = (typeof COMPLETE_REQUEST_TYPE_OBJS)[number] export type { Category, @@ -64,4 +66,5 @@ export type { PriceRangeObjs, TradeStatusObjs, TradeTypeObjs, + CompleteRequestTypeObjs, } From 15243db0bba05041b3f2433e3dfc26c23abdec6d Mon Sep 17 00:00:00 2001 From: juyeon-park Date: Wed, 22 Nov 2023 18:22:07 +0900 Subject: [PATCH 2/8] =?UTF-8?q?:construction:=20get=20api=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/config/apiEndPoint.ts | 2 ++ src/services/card/card.ts | 18 ++++++++++++++++++ 2 files changed, 20 insertions(+) diff --git a/src/config/apiEndPoint.ts b/src/config/apiEndPoint.ts index ec997016..8a1fcd5a 100644 --- a/src/config/apiEndPoint.ts +++ b/src/config/apiEndPoint.ts @@ -69,6 +69,8 @@ const ApiEndPoint = { putCardStatus: (cardId: number) => `/cards/status/${cardId}`, getPopularCardList: () => '/cards/popular', putMySuggestionStatus: () => `/suggestions/decision`, + getCompleteRequest: (completeRequestId: number) => + `/complete-reqeusts/${completeRequestId}`, } as const export default ApiEndPoint diff --git a/src/services/card/card.ts b/src/services/card/card.ts index 299cad63..738fc84a 100644 --- a/src/services/card/card.ts +++ b/src/services/card/card.ts @@ -7,6 +7,7 @@ import type { TradeStatus, PriceRangeObjs, TradeStatusObjs, + CompleteRequestTypeObjs, } from '@/types/card' import { User } from '@/types/user' import apiClient from '../apiClient' @@ -168,6 +169,22 @@ const putCardStatus = async ({ cardId, status }: PutCardStatusReq) => { return response } +const getCompleteRequest = async ( + completeRequestId: number, +): Promise<{ + data: { + fromCard: CardDetail + toCard: CardDetail + status: CompleteRequestTypeObjs['key'] + } +}> => { + const response = await apiClient.get( + ApiEndPoint.getCompleteRequest(completeRequestId), + ) + + return response +} + export { getCardList, getCardInfo, @@ -180,4 +197,5 @@ export { putCard, getPopularCardList, putCardStatus, + getCompleteRequest, } From 7e3dd63d0249d2f21a3fc50d7bc081d744c73968 Mon Sep 17 00:00:00 2001 From: juyeon-park Date: Wed, 22 Nov 2023 22:39:50 +0900 Subject: [PATCH 3/8] =?UTF-8?q?:construction:=20=EA=B1=B0=EB=9E=98?= =?UTF-8?q?=EC=84=B1=EC=82=AC=EC=9A=94=EC=B2=AD=20=EC=B9=B4=EB=93=9C=20?= =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../CompleteRequestCard.tsx | 59 +++++++++++++++++++ 1 file changed, 59 insertions(+) create mode 100644 src/app/(root)/(routes)/chat/components/complete-request-card/CompleteRequestCard.tsx diff --git a/src/app/(root)/(routes)/chat/components/complete-request-card/CompleteRequestCard.tsx b/src/app/(root)/(routes)/chat/components/complete-request-card/CompleteRequestCard.tsx new file mode 100644 index 00000000..00693e43 --- /dev/null +++ b/src/app/(root)/(routes)/chat/components/complete-request-card/CompleteRequestCard.tsx @@ -0,0 +1,59 @@ +import Image from 'next/image' +import Button from '@/components/ui/button' +import { Card, CardFlex, CardImage, CardText } from '@/components/ui/card/Card' +import Assets from '@/config/assets' +import { Card as CardType } from '@/types/card' + +const CardItem = ({ + thumbnail, + itemName, +}: Pick) => ( + +
+ +
+ + {itemName} + + +) + +const CompleteRequestCard = ({ fromCard, toCard, isAccepted }) => { + return ( +
+ + + + + + 거래 성사 요청이 왔습니다. 거래를 하셨나요? + + + + + + + + + +
+ ) +} + +export default CompleteRequestCard From fd10b90da17a97ec154e77b8780508d5bb57cf98 Mon Sep 17 00:00:00 2001 From: juyeon-park Date: Thu, 23 Nov 2023 01:39:13 +0900 Subject: [PATCH 4/8] =?UTF-8?q?:tada:=20=EA=B1=B0=EB=9E=98=EC=84=B1?= =?UTF-8?q?=EC=82=AC=EC=9A=94=EC=B2=AD=20=EC=BB=B4=ED=8F=AC=EB=84=8C?= =?UTF-8?q?=ED=8A=B8=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/images/check-circle.svg | 5 ++- public/images/quit-circle.svg | 6 ++-- .../components/CompleteRequestSection.tsx | 19 ++++++++++ .../CompleteRequestButton.tsx | 36 +++++++++++++++++++ .../CompleteRequestCard.tsx | 31 +++++++++------- src/app/(root)/(routes)/chat/page.tsx | 25 +++++++++++-- src/config/apiEndPoint.ts | 2 ++ src/constants/card.ts | 6 ++-- src/services/card/card.ts | 30 ++++++++++++++++ 9 files changed, 137 insertions(+), 23 deletions(-) create mode 100644 src/app/(root)/(routes)/chat/components/CompleteRequestSection.tsx create mode 100644 src/app/(root)/(routes)/chat/components/complete-request-button/CompleteRequestButton.tsx diff --git a/public/images/check-circle.svg b/public/images/check-circle.svg index a9e0999a..119d023c 100644 --- a/public/images/check-circle.svg +++ b/public/images/check-circle.svg @@ -1,8 +1,7 @@ - - + - + diff --git a/public/images/quit-circle.svg b/public/images/quit-circle.svg index 19ebedcd..13ab57b4 100644 --- a/public/images/quit-circle.svg +++ b/public/images/quit-circle.svg @@ -1,7 +1,7 @@ - - + + - + diff --git a/src/app/(root)/(routes)/chat/components/CompleteRequestSection.tsx b/src/app/(root)/(routes)/chat/components/CompleteRequestSection.tsx new file mode 100644 index 00000000..22bd9151 --- /dev/null +++ b/src/app/(root)/(routes)/chat/components/CompleteRequestSection.tsx @@ -0,0 +1,19 @@ +import CompleteRequestCard from './complete-request-card/CompleteRequestCard' + +type CompleteReqeustSectionProps = { + completeRequestId: number +} + +const CompleteReqeustSection = ({ + completeRequestId, +}: CompleteReqeustSectionProps) => { + /** + * TODO - 채팅방 단건조회에서 얻은 completeRequestId로 거래성사 요청 api 호출 추가 + * TODO - 현재 로그인한 사람이 toCardID의 userId와 같은 경우 + status가 WAITING인 경우 CompleteRequestCard가 보임 + * TODO - 현재 로그인한 사람이 fromCardID의 userId와 같은 경우 배지가 보임 + * + */ + return +} + +export default CompleteReqeustSection diff --git a/src/app/(root)/(routes)/chat/components/complete-request-button/CompleteRequestButton.tsx b/src/app/(root)/(routes)/chat/components/complete-request-button/CompleteRequestButton.tsx new file mode 100644 index 00000000..c74540a5 --- /dev/null +++ b/src/app/(root)/(routes)/chat/components/complete-request-button/CompleteRequestButton.tsx @@ -0,0 +1,36 @@ +import Image from 'next/image' +import Button from '@/components/ui/button' +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuGroup, + DropdownMenuItem, + DropdownMenuTrigger, +} from '@/components/ui/dropdown-menu' +import Assets from '@/config/assets' + +interface CompleteRequestButtonProps { + onClickButton: () => Promise +} + +const CompleteRequestButton = ({ + onClickButton, +}: CompleteRequestButtonProps) => { + return ( + + + + + + + + 거래성사 요청 + + + + + ) +} +export default CompleteRequestButton diff --git a/src/app/(root)/(routes)/chat/components/complete-request-card/CompleteRequestCard.tsx b/src/app/(root)/(routes)/chat/components/complete-request-card/CompleteRequestCard.tsx index 00693e43..a50006a1 100644 --- a/src/app/(root)/(routes)/chat/components/complete-request-card/CompleteRequestCard.tsx +++ b/src/app/(root)/(routes)/chat/components/complete-request-card/CompleteRequestCard.tsx @@ -8,7 +8,7 @@ const CardItem = ({ thumbnail, itemName, }: Pick) => ( - +
) -const CompleteRequestCard = ({ fromCard, toCard, isAccepted }) => { +const CompleteRequestCard = () => { return (
- - + + - - - 거래 성사 요청이 왔습니다. 거래를 하셨나요? + + + 거래성사 요청이 왔습니다. 거래를 하셨나요? - + @@ -47,8 +52,10 @@ const CompleteRequestCard = ({ fromCard, toCard, isAccepted }) => { diff --git a/src/app/(root)/(routes)/chat/page.tsx b/src/app/(root)/(routes)/chat/page.tsx index 9d92ff89..cc1ce4b0 100644 --- a/src/app/(root)/(routes)/chat/page.tsx +++ b/src/app/(root)/(routes)/chat/page.tsx @@ -8,8 +8,11 @@ import { useAuth } from '@/contexts/AuthProvider' import useFirestoreQuery from '@/hooks/useFirestoreQuery' import { useToast } from '@/hooks/useToast' import { getMessageRef } from '@/lib/firebase' +import { postCompleteRequest } from '@/services/card/card' import ChatInput from './components/ChatInput' import ChatList from './components/ChatList' +import CompleteReqeustSection from './components/CompleteRequestSection' +import CompleteRequestButton from './components/complete-request-button/CompleteRequestButton' const ChatPage = () => { const { currentUser } = useAuth() @@ -46,9 +49,27 @@ const ChatPage = () => { } } + const handleRequestButton = async () => { + try { + await postCompleteRequest(1, 2) //FIXME - api 나오면 실제 cardId로 변경 예정 + } catch (error) { + toast({ + title: '거래성사 요청이 실패했습니다.', + variant: 'destructive', + duration: 2000, + }) + } + } + //TODO - completeRequestId가 null이 아닌 경우는 CompleteRequestButton이 보이지 X + //TODO - completeRequestId가 null인 경우 CompleteRequestSection이 보이지 X + return ( -
- +
+
+ + +
+
`/suggestions/decision`, getCompleteRequest: (completeRequestId: number) => `/complete-reqeusts/${completeRequestId}`, + postCompleteRequest: () => '/complete-requests', + putCompleteRequest: () => '/complete-requests/confirm', } as const export default ApiEndPoint diff --git a/src/constants/card.ts b/src/constants/card.ts index c16d424e..ece3a3e7 100644 --- a/src/constants/card.ts +++ b/src/constants/card.ts @@ -97,9 +97,9 @@ const CATEGORY_BUTTON_LIST = [ ] as const const COMPLETE_REQUEST_TYPE_OBJS = [ - { key: 'WAITING', value: '대기중' }, - { key: 'ACCEPTED', value: '확정' }, - { key: 'REFUSED', value: '거절됨' }, + { key: 'WAITING', value: '거래성사 대기중' }, + { key: 'ACCEPTED', value: '거래성사 확정' }, + { key: 'REFUSED', value: '거래성사 거절됨' }, ] export { diff --git a/src/services/card/card.ts b/src/services/card/card.ts index 738fc84a..8e0f840a 100644 --- a/src/services/card/card.ts +++ b/src/services/card/card.ts @@ -185,6 +185,34 @@ const getCompleteRequest = async ( return response } +const postCompleteRequest = async (fromCardId: number, toCardId: number) => { + const response = await apiClient.post( + ApiEndPoint.postCompleteRequest(), + { fromCardId, toCardId }, + {}, + { + 'Content-Type': 'application/json', + }, + ) + return response +} + +const putCompleteRequest = async ( + fromCardId: number, + toCardId: number, + isAccepted: boolean, +) => { + const response = await apiClient.post( + ApiEndPoint.putCompleteRequest(), + { fromCardId, toCardId, isAccepted }, + {}, + { + 'Content-Type': 'application/json', + }, + ) + return response +} + export { getCardList, getCardInfo, @@ -198,4 +226,6 @@ export { getPopularCardList, putCardStatus, getCompleteRequest, + postCompleteRequest, + putCompleteRequest, } From b6fc92a4f32525b112123c6bde7ef26c9ed003ef Mon Sep 17 00:00:00 2001 From: juyeon-park Date: Thu, 23 Nov 2023 23:12:39 +0900 Subject: [PATCH 5/8] =?UTF-8?q?:construction:=20=EC=A0=9C=EC=95=88?= =?UTF-8?q?=EC=9A=94=EC=B2=AD=20=EC=88=98=EB=9D=BD/=EA=B1=B0=EC=A0=88=20ap?= =?UTF-8?q?i=20=EC=97=B0=EA=B2=B0=EC=A4=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/CompleteRequestSection.tsx | 8 +++++-- .../CompleteRequestCard.tsx | 21 +++++++++------- src/app/(root)/(routes)/chat/page.tsx | 8 +++---- src/config/apiEndPoint.ts | 2 +- .../api/queries/useCompleteRequestQuery.ts | 14 +++++++++++ src/services/card/card.ts | 24 +++++++++++++------ 6 files changed, 54 insertions(+), 23 deletions(-) create mode 100644 src/hooks/api/queries/useCompleteRequestQuery.ts diff --git a/src/app/(root)/(routes)/chat/components/CompleteRequestSection.tsx b/src/app/(root)/(routes)/chat/components/CompleteRequestSection.tsx index 22bd9151..bf9a058f 100644 --- a/src/app/(root)/(routes)/chat/components/CompleteRequestSection.tsx +++ b/src/app/(root)/(routes)/chat/components/CompleteRequestSection.tsx @@ -1,3 +1,4 @@ +import useCompleteRequestQuery from '@/hooks/api/queries/useCompleteRequestQuery' import CompleteRequestCard from './complete-request-card/CompleteRequestCard' type CompleteReqeustSectionProps = { @@ -7,13 +8,16 @@ type CompleteReqeustSectionProps = { const CompleteReqeustSection = ({ completeRequestId, }: CompleteReqeustSectionProps) => { + const { data } = useCompleteRequestQuery(completeRequestId) + console.log(data) + const completeRequestData = data?.data?.completeRequestInfo + console.log(completeRequestData) /** - * TODO - 채팅방 단건조회에서 얻은 completeRequestId로 거래성사 요청 api 호출 추가 * TODO - 현재 로그인한 사람이 toCardID의 userId와 같은 경우 + status가 WAITING인 경우 CompleteRequestCard가 보임 * TODO - 현재 로그인한 사람이 fromCardID의 userId와 같은 경우 배지가 보임 * */ - return + return } export default CompleteReqeustSection diff --git a/src/app/(root)/(routes)/chat/components/complete-request-card/CompleteRequestCard.tsx b/src/app/(root)/(routes)/chat/components/complete-request-card/CompleteRequestCard.tsx index a50006a1..cc5867b5 100644 --- a/src/app/(root)/(routes)/chat/components/complete-request-card/CompleteRequestCard.tsx +++ b/src/app/(root)/(routes)/chat/components/complete-request-card/CompleteRequestCard.tsx @@ -2,6 +2,7 @@ import Image from 'next/image' import Button from '@/components/ui/button' import { Card, CardFlex, CardImage, CardText } from '@/components/ui/card/Card' import Assets from '@/config/assets' +import { GetCompleteRequestRes } from '@/services/card/card' import { Card as CardType } from '@/types/card' const CardItem = ({ @@ -24,16 +25,20 @@ const CardItem = ({ ) -const CompleteRequestCard = () => { +type CompleteRequestCardProps = { + completeRequestInfo: GetCompleteRequestRes['data']['completeRequestInfo'] +} + +const CompleteRequestCard = ({ + completeRequestInfo: { fromCard, toCard }, +}: CompleteRequestCardProps) => { return (
{ diff --git a/src/app/(root)/(routes)/chat/page.tsx b/src/app/(root)/(routes)/chat/page.tsx index cc1ce4b0..7cf3a886 100644 --- a/src/app/(root)/(routes)/chat/page.tsx +++ b/src/app/(root)/(routes)/chat/page.tsx @@ -51,7 +51,7 @@ const ChatPage = () => { const handleRequestButton = async () => { try { - await postCompleteRequest(1, 2) //FIXME - api 나오면 실제 cardId로 변경 예정 + await postCompleteRequest(45, 46) //FIXME - api 나오면 실제 cardId로 변경 예정 } catch (error) { toast({ title: '거래성사 요청이 실패했습니다.', @@ -60,8 +60,8 @@ const ChatPage = () => { }) } } - //TODO - completeRequestId가 null이 아닌 경우는 CompleteRequestButton이 보이지 X - //TODO - completeRequestId가 null인 경우 CompleteRequestSection이 보이지 X + //TODO - completeRequestId가 -1이 아닌 경우는 CompleteRequestButton이 보이지 X + //TODO - completeRequestId가 -1인 경우 CompleteRequestSection이 보이지 X return (
@@ -69,7 +69,7 @@ const ChatPage = () => { - +
'/cards/popular', putMySuggestionStatus: () => `/suggestions/decision`, getCompleteRequest: (completeRequestId: number) => - `/complete-reqeusts/${completeRequestId}`, + `/complete-requests/${completeRequestId}`, postCompleteRequest: () => '/complete-requests', putCompleteRequest: () => '/complete-requests/confirm', } as const diff --git a/src/hooks/api/queries/useCompleteRequestQuery.ts b/src/hooks/api/queries/useCompleteRequestQuery.ts new file mode 100644 index 00000000..f3493c0b --- /dev/null +++ b/src/hooks/api/queries/useCompleteRequestQuery.ts @@ -0,0 +1,14 @@ +import { useQuery } from '@tanstack/react-query' +import { getCompleteRequest } from '@/services/card/card' + +const useCompleteRequestQuery = (completeRequestId: number) => { + return useQuery({ + queryKey: [completeRequestId, 'completeReqeust'] as const, + queryFn: () => { + const res = getCompleteRequest(completeRequestId) + return res + }, + }) +} + +export default useCompleteRequestQuery diff --git a/src/services/card/card.ts b/src/services/card/card.ts index 8e0f840a..d22970f2 100644 --- a/src/services/card/card.ts +++ b/src/services/card/card.ts @@ -169,15 +169,25 @@ const putCardStatus = async ({ cardId, status }: PutCardStatusReq) => { return response } -const getCompleteRequest = async ( - completeRequestId: number, -): Promise<{ +export type GetCompleteRequestRes = { + code: string + message: string data: { - fromCard: CardDetail - toCard: CardDetail - status: CompleteRequestTypeObjs['key'] + completeRequestInfo: { + fromCard: { + cardInfo: Card + userInfo: User + } + toCard: { + cardInfo: Card + userInfo: User + } + status: CompleteRequestTypeObjs['key'] + } } -}> => { +} + +const getCompleteRequest = async (completeRequestId: number) => { const response = await apiClient.get( ApiEndPoint.getCompleteRequest(completeRequestId), ) From e6cd78e02c3040a7ad71cd0c00683574d03a3a4c Mon Sep 17 00:00:00 2001 From: juyeon-park Date: Fri, 24 Nov 2023 00:09:06 +0900 Subject: [PATCH 6/8] =?UTF-8?q?:construction:=20chatroom=20=ED=85=8C?= =?UTF-8?q?=EC=8A=A4=ED=8A=B8=EC=A4=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/CompleteRequestTemplate.tsx | 2 ++ .../(routes)/chatrooms/[chatRoomId]/page.tsx | 18 +++++++++++------- 2 files changed, 13 insertions(+), 7 deletions(-) diff --git a/src/app/(root)/(routes)/chatrooms/[chatRoomId]/components/CompleteRequestTemplate.tsx b/src/app/(root)/(routes)/chatrooms/[chatRoomId]/components/CompleteRequestTemplate.tsx index c3db40c5..239265d5 100644 --- a/src/app/(root)/(routes)/chatrooms/[chatRoomId]/components/CompleteRequestTemplate.tsx +++ b/src/app/(root)/(routes)/chatrooms/[chatRoomId]/components/CompleteRequestTemplate.tsx @@ -1,7 +1,9 @@ import useCompleteRequestQuery from '@/hooks/api/queries/useCompleteRequestQuery' +import { User } from '@/types/user' import CompleteRequestCard from './CompleteRequestCard' type CompleteReqeustTemplateProps = { + currentUser: User completeRequestId: number } diff --git a/src/app/(root)/(routes)/chatrooms/[chatRoomId]/page.tsx b/src/app/(root)/(routes)/chatrooms/[chatRoomId]/page.tsx index a1cff25b..6488ff30 100644 --- a/src/app/(root)/(routes)/chatrooms/[chatRoomId]/page.tsx +++ b/src/app/(root)/(routes)/chatrooms/[chatRoomId]/page.tsx @@ -5,7 +5,7 @@ import apiClient from '@/services/apiClient' import { getServerCookie } from '@/utils/getServerCookie' import ChatRoomTemplate from './components/ChatRoomTemplate' import CompleteRequestButton from './components/CompleteRequestButton' -import CompleteReqeustSection from './components/CompleteRequestTemplate' +import CompleteReqeustTemplate from './components/CompleteRequestTemplate' type ChatPageProps = { params: { @@ -35,12 +35,13 @@ const getInitialChatRoom = async (chatRoomId: string) => { Authorization: `${token}`, }, ) - return res.data.chatRoomInfo.fireStoreChatRoomId + return res.data.chatRoomInfo //fireStoreChatRoomId지움 chatRoomInfo필요 } const ChatPage = async ({ params }: ChatPageProps) => { const initialUserInfo = await getInitialUser() const initialChatRoom = await getInitialChatRoom(params.chatRoomId) + console.log(initialChatRoom) //TODO - completeRequestId가 -1이 아닌 경우는 CompleteRequestButton이 보이지 X //TODO - completeRequestId가 -1인 경우 CompleteRequestSection이 보이지 X @@ -48,13 +49,16 @@ const ChatPage = async ({ params }: ChatPageProps) => {
- + {/* */}
- - + completeRequestId={initialChatRoom.completeRequestId} + /> */} + {/* */}
) From 838085a4019b628086423bd5e6ec9d497123f95a Mon Sep 17 00:00:00 2001 From: juyeon-park Date: Fri, 24 Nov 2023 04:06:21 +0900 Subject: [PATCH 7/8] =?UTF-8?q?:tada:=20=EA=B1=B0=EB=9E=98=EC=84=B1?= =?UTF-8?q?=EC=82=AC=EC=9A=94=EC=B2=AD=20=EA=B8=B0=EB=8A=A5=20=EA=B5=AC?= =?UTF-8?q?=ED=98=84=20=EC=99=84=EB=A3=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/CompleteRequestButton.tsx | 57 +++++++++++++----- .../components/CompleteRequestCard.tsx | 52 ++++++++++++++--- .../components/CompleteRequestTemplate.tsx | 37 +++++++----- .../(routes)/chatrooms/[chatRoomId]/page.tsx | 47 +++++++++++---- .../api/queries/useCompleteRequestQuery.ts | 14 ----- src/services/card/card.ts | 58 ------------------- .../complete-request/completeRequest.ts | 32 ++++++++++ 7 files changed, 178 insertions(+), 119 deletions(-) delete mode 100644 src/hooks/api/queries/useCompleteRequestQuery.ts create mode 100644 src/services/complete-request/completeRequest.ts diff --git a/src/app/(root)/(routes)/chatrooms/[chatRoomId]/components/CompleteRequestButton.tsx b/src/app/(root)/(routes)/chatrooms/[chatRoomId]/components/CompleteRequestButton.tsx index 48009df5..4b5d7b11 100644 --- a/src/app/(root)/(routes)/chatrooms/[chatRoomId]/components/CompleteRequestButton.tsx +++ b/src/app/(root)/(routes)/chatrooms/[chatRoomId]/components/CompleteRequestButton.tsx @@ -1,3 +1,5 @@ +'use client' + import Image from 'next/image' import Button from '@/components/ui/button' import { @@ -9,26 +11,53 @@ import { } from '@/components/ui/dropdown-menu' import Assets from '@/config/assets' import { toast } from '@/hooks/useToast' -import { postCompleteRequest } from '@/services/card/card' +import { postCompleteRequest } from '@/services/complete-request/completeRequest' +import { Card } from '@/types/card' +import { User } from '@/types/user' -interface CompleteRequestButtonProps { - onClickButton?: () => Promise -} -const handleRequestButton = async () => { - try { - await postCompleteRequest(45, 46) //FIXME - api 나오면 실제 cardId로 변경 예정 - } catch (error) { - toast({ - title: '거래성사 요청이 실패했습니다.', - variant: 'destructive', - duration: 2000, - }) +type CompleteRequestButtonProps = { + currentUser: User + fromCardData: { + cardInfo: Pick + userInfo: Pick + } + toCardData: { + cardInfo: Pick + userInfo: Pick } } const CompleteRequestButton = ({ - onClickButton, + currentUser, + fromCardData, + toCardData, }: CompleteRequestButtonProps) => { + const handleRequestButton = async () => { + //NOTE - 현재 로그인한 사람의 아이디로 내 카드 id찾기 -> 삼항연산자 vs find함수 중 어떤 것이 더 나은 방법인지 모르겠음 + const suggestionDataArray = [fromCardData, toCardData] + const myCardId = suggestionDataArray.find( + (obj) => obj.userInfo.userId === currentUser.userId, + )?.cardInfo.cardId as number + const otherCardId = suggestionDataArray.find( + (obj) => obj.userInfo.userId !== currentUser.userId, + )?.cardInfo.cardId as number + + try { + await postCompleteRequest(myCardId, otherCardId) + toast({ + title: '거래성사를 요청하였습니다', + variant: 'default', + duration: 2000, + }) + } catch (error) { + toast({ + title: '거래성사 요청이 실패했습니다.', + variant: 'destructive', + duration: 2000, + }) + } + } + return ( diff --git a/src/app/(root)/(routes)/chatrooms/[chatRoomId]/components/CompleteRequestCard.tsx b/src/app/(root)/(routes)/chatrooms/[chatRoomId]/components/CompleteRequestCard.tsx index cc5867b5..6e01c133 100644 --- a/src/app/(root)/(routes)/chatrooms/[chatRoomId]/components/CompleteRequestCard.tsx +++ b/src/app/(root)/(routes)/chatrooms/[chatRoomId]/components/CompleteRequestCard.tsx @@ -2,7 +2,8 @@ import Image from 'next/image' import Button from '@/components/ui/button' import { Card, CardFlex, CardImage, CardText } from '@/components/ui/card/Card' import Assets from '@/config/assets' -import { GetCompleteRequestRes } from '@/services/card/card' +import { toast } from '@/hooks/useToast' +import { putCompleteRequest } from '@/services/complete-request/completeRequest' import { Card as CardType } from '@/types/card' const CardItem = ({ @@ -26,19 +27,42 @@ const CardItem = ({ ) type CompleteRequestCardProps = { - completeRequestInfo: GetCompleteRequestRes['data']['completeRequestInfo'] + myCardData: CardType + otherCardData: CardType } const CompleteRequestCard = ({ - completeRequestInfo: { fromCard, toCard }, + myCardData, + otherCardData, }: CompleteRequestCardProps) => { + const handleCompleteRequestUpdate = async (isAccepted: boolean) => { + try { + await putCompleteRequest( + otherCardData.cardId, + myCardData.cardId, + isAccepted, + ) + window.location.reload() + toast({ + title: `거래성사 요청을 ${isAccepted ? '수락' : '거절'}하였습니다.`, + variant: 'default', + duration: 2000, + }) + } catch (error) { + toast({ + title: '거래성사요청 수락 또는 거절이 실패했습니다.', + variant: 'destructive', + duration: 2000, + }) + } + } return (
- - diff --git a/src/app/(root)/(routes)/chatrooms/[chatRoomId]/components/CompleteRequestTemplate.tsx b/src/app/(root)/(routes)/chatrooms/[chatRoomId]/components/CompleteRequestTemplate.tsx index 239265d5..e9b8e7f6 100644 --- a/src/app/(root)/(routes)/chatrooms/[chatRoomId]/components/CompleteRequestTemplate.tsx +++ b/src/app/(root)/(routes)/chatrooms/[chatRoomId]/components/CompleteRequestTemplate.tsx @@ -1,25 +1,36 @@ -import useCompleteRequestQuery from '@/hooks/api/queries/useCompleteRequestQuery' +import Badge from '@/components/ui/badge' +import { COMPLETE_REQUEST_TYPE_OBJS } from '@/constants/card' +import { Card, CompleteRequestTypeObjs } from '@/types/card' import { User } from '@/types/user' +import { getValueByKey } from '@/utils/getValueByKey' import CompleteRequestCard from './CompleteRequestCard' type CompleteReqeustTemplateProps = { currentUser: User - completeRequestId: number + completeRequestData: { + fromCard: { cardInfo: Card; userInfo: User } + toCard: { cardInfo: Card; userInfo: User } + status: CompleteRequestTypeObjs['key'] + } } const CompleteReqeustTemplate = ({ - completeRequestId, + currentUser, + completeRequestData: { fromCard, toCard, status }, }: CompleteReqeustTemplateProps) => { - const { data } = useCompleteRequestQuery(completeRequestId) - console.log(data) - const completeRequestData = data?.data?.completeRequestInfo - console.log(completeRequestData) - /** - * TODO - 현재 로그인한 사람이 toCardID의 userId와 같은 경우 + status가 WAITING인 경우 CompleteRequestCard가 보임 - * TODO - 현재 로그인한 사람이 fromCardID의 userId와 같은 경우 배지가 보임 - * - */ - return + //NOTE - 현재 로그인한 사람이 거래성사 요청 받은 사람인경우 + 요청 상태가 waiting인 경우 - 거래성사요청 카드가 보인다. + const isRequestedUser = + toCard.userInfo.userId === currentUser.userId && status === 'WAITING' + return isRequestedUser ? ( + + ) : ( + + {getValueByKey(COMPLETE_REQUEST_TYPE_OBJS, status)} + + ) } export default CompleteReqeustTemplate diff --git a/src/app/(root)/(routes)/chatrooms/[chatRoomId]/page.tsx b/src/app/(root)/(routes)/chatrooms/[chatRoomId]/page.tsx index 6488ff30..e402ce27 100644 --- a/src/app/(root)/(routes)/chatrooms/[chatRoomId]/page.tsx +++ b/src/app/(root)/(routes)/chatrooms/[chatRoomId]/page.tsx @@ -35,30 +35,55 @@ const getInitialChatRoom = async (chatRoomId: string) => { Authorization: `${token}`, }, ) - return res.data.chatRoomInfo //fireStoreChatRoomId지움 chatRoomInfo필요 + return res.data.chatRoomInfo //NOTE - .fireStoreChatRoomId지움. chatRoomInfo필요 +} + +const getCompleteRequestInfo = async (completeRequestId: number) => { + const token = getServerCookie() + const res = await apiClient.get( + ApiEndPoint.getCompleteRequest(completeRequestId), + {}, + { + Authorization: `${token}`, + }, + ) + return res.data.completeRequestInfo } const ChatPage = async ({ params }: ChatPageProps) => { const initialUserInfo = await getInitialUser() const initialChatRoom = await getInitialChatRoom(params.chatRoomId) - console.log(initialChatRoom) - //TODO - completeRequestId가 -1이 아닌 경우는 CompleteRequestButton이 보이지 X - //TODO - completeRequestId가 -1인 경우 CompleteRequestSection이 보이지 X + //NOTE - completeRequestId가 -1이 아닐때만 호출해야하는데 어떻게? -1로 호출하면 서버 500에러남. + const completeRequestInfo = await getCompleteRequestInfo( + initialChatRoom.completeRequestId, + ) + + //NOTE - 둘 중 아무라도 거래성사 요청을 했을 경우 + const isCompleteRequested = initialChatRoom.completeRequestId !== -1 + return (
- {/* */} + {!isCompleteRequested && ( + + )}
- {/* */} - {/* + )} + */} + />
) diff --git a/src/hooks/api/queries/useCompleteRequestQuery.ts b/src/hooks/api/queries/useCompleteRequestQuery.ts deleted file mode 100644 index f3493c0b..00000000 --- a/src/hooks/api/queries/useCompleteRequestQuery.ts +++ /dev/null @@ -1,14 +0,0 @@ -import { useQuery } from '@tanstack/react-query' -import { getCompleteRequest } from '@/services/card/card' - -const useCompleteRequestQuery = (completeRequestId: number) => { - return useQuery({ - queryKey: [completeRequestId, 'completeReqeust'] as const, - queryFn: () => { - const res = getCompleteRequest(completeRequestId) - return res - }, - }) -} - -export default useCompleteRequestQuery diff --git a/src/services/card/card.ts b/src/services/card/card.ts index d22970f2..299cad63 100644 --- a/src/services/card/card.ts +++ b/src/services/card/card.ts @@ -7,7 +7,6 @@ import type { TradeStatus, PriceRangeObjs, TradeStatusObjs, - CompleteRequestTypeObjs, } from '@/types/card' import { User } from '@/types/user' import apiClient from '../apiClient' @@ -169,60 +168,6 @@ const putCardStatus = async ({ cardId, status }: PutCardStatusReq) => { return response } -export type GetCompleteRequestRes = { - code: string - message: string - data: { - completeRequestInfo: { - fromCard: { - cardInfo: Card - userInfo: User - } - toCard: { - cardInfo: Card - userInfo: User - } - status: CompleteRequestTypeObjs['key'] - } - } -} - -const getCompleteRequest = async (completeRequestId: number) => { - const response = await apiClient.get( - ApiEndPoint.getCompleteRequest(completeRequestId), - ) - - return response -} - -const postCompleteRequest = async (fromCardId: number, toCardId: number) => { - const response = await apiClient.post( - ApiEndPoint.postCompleteRequest(), - { fromCardId, toCardId }, - {}, - { - 'Content-Type': 'application/json', - }, - ) - return response -} - -const putCompleteRequest = async ( - fromCardId: number, - toCardId: number, - isAccepted: boolean, -) => { - const response = await apiClient.post( - ApiEndPoint.putCompleteRequest(), - { fromCardId, toCardId, isAccepted }, - {}, - { - 'Content-Type': 'application/json', - }, - ) - return response -} - export { getCardList, getCardInfo, @@ -235,7 +180,4 @@ export { putCard, getPopularCardList, putCardStatus, - getCompleteRequest, - postCompleteRequest, - putCompleteRequest, } diff --git a/src/services/complete-request/completeRequest.ts b/src/services/complete-request/completeRequest.ts new file mode 100644 index 00000000..ffe8a1ef --- /dev/null +++ b/src/services/complete-request/completeRequest.ts @@ -0,0 +1,32 @@ +import ApiEndPoint from '@/config/apiEndPoint' +import apiClient from '../apiClient' + +const postCompleteRequest = async (fromCardId: number, toCardId: number) => { + const response = await apiClient.post( + ApiEndPoint.postCompleteRequest(), + { fromCardId, toCardId }, + {}, + { + 'Content-Type': 'application/json', + }, + ) + return response +} + +const putCompleteRequest = async ( + fromCardId: number, + toCardId: number, + isAccepted: boolean, +) => { + const response = await apiClient.post( + ApiEndPoint.putCompleteRequest(), + { fromCardId, toCardId, isAccepted }, + {}, + { + 'Content-Type': 'application/json', + }, + ) + return response +} + +export { postCompleteRequest, putCompleteRequest } From a54c00fef32901ed5e2de8b9c4744275b5c76885 Mon Sep 17 00:00:00 2001 From: juyeon-park Date: Sat, 25 Nov 2023 11:56:48 +0900 Subject: [PATCH 8/8] =?UTF-8?q?:sparkles:=20=EC=BD=94=EB=93=9C=EB=A6=AC?= =?UTF-8?q?=EB=B7=B0=20=EB=B0=98=EC=98=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/CompleteRequestButton.tsx | 27 +++--------------- .../components/CompleteRequestTemplate.tsx | 2 +- .../(routes)/chatrooms/[chatRoomId]/page.tsx | 28 +++++++++++++------ 3 files changed, 24 insertions(+), 33 deletions(-) diff --git a/src/app/(root)/(routes)/chatrooms/[chatRoomId]/components/CompleteRequestButton.tsx b/src/app/(root)/(routes)/chatrooms/[chatRoomId]/components/CompleteRequestButton.tsx index 4b5d7b11..74572313 100644 --- a/src/app/(root)/(routes)/chatrooms/[chatRoomId]/components/CompleteRequestButton.tsx +++ b/src/app/(root)/(routes)/chatrooms/[chatRoomId]/components/CompleteRequestButton.tsx @@ -12,36 +12,17 @@ import { import Assets from '@/config/assets' import { toast } from '@/hooks/useToast' import { postCompleteRequest } from '@/services/complete-request/completeRequest' -import { Card } from '@/types/card' -import { User } from '@/types/user' type CompleteRequestButtonProps = { - currentUser: User - fromCardData: { - cardInfo: Pick - userInfo: Pick - } - toCardData: { - cardInfo: Pick - userInfo: Pick - } + myCardId: number + otherCardId: number } const CompleteRequestButton = ({ - currentUser, - fromCardData, - toCardData, + myCardId, + otherCardId, }: CompleteRequestButtonProps) => { const handleRequestButton = async () => { - //NOTE - 현재 로그인한 사람의 아이디로 내 카드 id찾기 -> 삼항연산자 vs find함수 중 어떤 것이 더 나은 방법인지 모르겠음 - const suggestionDataArray = [fromCardData, toCardData] - const myCardId = suggestionDataArray.find( - (obj) => obj.userInfo.userId === currentUser.userId, - )?.cardInfo.cardId as number - const otherCardId = suggestionDataArray.find( - (obj) => obj.userInfo.userId !== currentUser.userId, - )?.cardInfo.cardId as number - try { await postCompleteRequest(myCardId, otherCardId) toast({ diff --git a/src/app/(root)/(routes)/chatrooms/[chatRoomId]/components/CompleteRequestTemplate.tsx b/src/app/(root)/(routes)/chatrooms/[chatRoomId]/components/CompleteRequestTemplate.tsx index e9b8e7f6..978cd3a6 100644 --- a/src/app/(root)/(routes)/chatrooms/[chatRoomId]/components/CompleteRequestTemplate.tsx +++ b/src/app/(root)/(routes)/chatrooms/[chatRoomId]/components/CompleteRequestTemplate.tsx @@ -27,7 +27,7 @@ const CompleteReqeustTemplate = ({ otherCardData={toCard.cardInfo} /> ) : ( - + {getValueByKey(COMPLETE_REQUEST_TYPE_OBJS, status)} ) diff --git a/src/app/(root)/(routes)/chatrooms/[chatRoomId]/page.tsx b/src/app/(root)/(routes)/chatrooms/[chatRoomId]/page.tsx index a57fb907..4c6c1856 100644 --- a/src/app/(root)/(routes)/chatrooms/[chatRoomId]/page.tsx +++ b/src/app/(root)/(routes)/chatrooms/[chatRoomId]/page.tsx @@ -34,7 +34,7 @@ const getInitialChatRoom = async (chatRoomId: string) => { Authorization: `${token}`, }, ) - return res.data.chatRoomInfo //NOTE - .fireStoreChatRoomId지움. chatRoomInfo필요 + return res.data.chatRoomInfo } const getCompleteRequestInfo = async (completeRequestId: number) => { @@ -53,13 +53,24 @@ const ChatPage = async ({ params }: ChatPageProps) => { const initialUserInfo = await getInitialUser() const initialChatRoom = await getInitialChatRoom(params.chatRoomId) - //NOTE - completeRequestId가 -1이 아닐때만 호출해야하는데 어떻게? -1로 호출하면 서버 500에러남. - const completeRequestInfo = await getCompleteRequestInfo( - initialChatRoom.completeRequestId, - ) - //NOTE - 둘 중 아무라도 거래성사 요청을 했을 경우 const isCompleteRequested = initialChatRoom.completeRequestId !== -1 + const completeRequestInfo = isCompleteRequested + ? await getCompleteRequestInfo(initialChatRoom.completeRequestId) + : null + + const suggestionDataArray = [ + initialChatRoom.fromCardInfo, + initialChatRoom.toCardInfo, + ] + console.log(suggestionDataArray) + const myCardId = suggestionDataArray.find( + (obj) => obj.userInfo.userId === initialUserInfo.userId, + ).cardInfo.cardId + + const otherCardId = suggestionDataArray.find( + (obj) => obj.userInfo.userId !== initialUserInfo.userId, + ).cardInfo.cardId return (
@@ -67,9 +78,8 @@ const ChatPage = async ({ params }: ChatPageProps) => { {!isCompleteRequested && ( )}