🎉 거래성사요청 기능 구현 완료

src/app/(root)/(routes)/chatrooms/[chatRoomId]/components/CompleteRequestButton.tsx

@@ -0,0 +1,59 @@
+'use client'
+
+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'
+import { toast } from '@/hooks/useToast'
+import { postCompleteRequest } from '@/services/complete-request/completeRequest'
+
+type CompleteRequestButtonProps = {
+  myCardId: number
+  otherCardId: number
+}
+
+const CompleteRequestButton = ({
+  myCardId,
+  otherCardId,
+}: CompleteRequestButtonProps) => {
+  const handleRequestButton = async () => {
+    try {
+      await postCompleteRequest(myCardId, otherCardId)
+      toast({
+        title: '거래성사를 요청하였습니다',
+        variant: 'default',
+        duration: 2000,
+      })
+    } catch (error) {
+      toast({
+        title: '거래성사 요청이 실패했습니다.',
+        variant: 'destructive',
+        duration: 2000,
+      })
+    }
+  }
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button className="ml-auto" size="icon_sm" variant={null}>
+          <Image src={Assets.vMoreIcon} alt="more" />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent className="min-w-[8rem]">
+        <DropdownMenuGroup>
+          <DropdownMenuItem onClick={handleRequestButton}>
+            거래성사 요청
+          </DropdownMenuItem>
+        </DropdownMenuGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}
+export default CompleteRequestButton

src/app/(root)/(routes)/chatrooms/[chatRoomId]/components/CompleteRequestCard.tsx

@@ -0,0 +1,103 @@
+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 { toast } from '@/hooks/useToast'
+import { putCompleteRequest } from '@/services/complete-request/completeRequest'
+import { Card as CardType } from '@/types/card'
+
+const CardItem = ({
+  thumbnail,
+  itemName,
+}: Pick<CardType, 'thumbnail' | 'itemName'>) => (
+  <CardFlex direction={'col'} justify={'center'} align={'center'} gap={'space'}>
+    <div className="h-11 w-20 relative">
+      <CardImage
+        alt="card-thumbnail"
+        src={thumbnail}
+        layout="fill"
+        objectFit="cover"
+        className="rounded"
+      />
+    </div>
+    <CardText className="font-bold text-[12px] whitespace-nowrap overflow-hidden overflow-ellipsis">
+      {itemName}
+    </CardText>
+  </CardFlex>
+)
+
+type CompleteRequestCardProps = {
+  myCardData: CardType
+  otherCardData: CardType
+}
+
+const CompleteRequestCard = ({
+  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 (
+    <div>
+      <Card className="p-2 flex items-center border-0" size={'sm'}>
+        <CardFlex justify={'between'} className="gap-4">
+          <CardItem
+            thumbnail={myCardData.thumbnail}
+            itemName={myCardData.itemName}
+          />
+          <CardFlex direction={'col'} align={'center'} justify={'center'}>
+            <CardText
+              type={'description'}
+              className="text-[12px] max-w-[125px] text-center"
+            >
+              거래성사 요청이 왔습니다. 거래를 하셨나요?
+            </CardText>
+            <CardFlex direction={'row'} gap={'space'}>
+              <Button
+                className="ml-auto"
+                size="icon_sm"
+                variant={null}
+                onClick={() => handleCompleteRequestUpdate(true)}
+              >
+                <Image src={Assets.checkCircle} alt="accept" />
+              </Button>
+              <Button
+                className="ml-auto"
+                size="icon_sm"
+                variant={null}
+                onClick={() => handleCompleteRequestUpdate(false)}
+              >
+                <Image src={Assets.quitCircle} alt="refuse" />
+              </Button>
+            </CardFlex>
+          </CardFlex>
+          <CardItem
+            thumbnail={otherCardData.thumbnail}
+            itemName={otherCardData.itemName}
+          />
+        </CardFlex>
+      </Card>
+    </div>
+  )
+}
+
+export default CompleteRequestCard

src/app/(root)/(routes)/chatrooms/[chatRoomId]/components/CompleteRequestTemplate.tsx

@@ -0,0 +1,36 @@
+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
+  completeRequestData: {
+    fromCard: { cardInfo: Card; userInfo: User }
+    toCard: { cardInfo: Card; userInfo: User }
+    status: CompleteRequestTypeObjs['key']
+  }
+}
+
+const CompleteReqeustTemplate = ({
+  currentUser,
+  completeRequestData: { fromCard, toCard, status },
+}: CompleteReqeustTemplateProps) => {
+  //NOTE -  현재 로그인한 사람이 거래성사 요청 받은 사람인경우 + 요청 상태가 waiting인 경우 - 거래성사요청 카드가 보인다.
+  const isRequestedUser =
+    toCard.userInfo.userId === currentUser.userId && status === 'WAITING'
+  return isRequestedUser ? (
+    <CompleteRequestCard
+      myCardData={fromCard.cardInfo}
+      otherCardData={toCard.cardInfo}
+    />
+  ) : (
+    <Badge variant={'gradation'} size={'lg'} className="self-end mr-4">
+      {getValueByKey(COMPLETE_REQUEST_TYPE_OBJS, status)}
+    </Badge>
+  )
+}
+
+export default CompleteReqeustTemplate

src/app/(root)/(routes)/chatrooms/[chatRoomId]/page.tsx

@@ -4,6 +4,8 @@ import ApiEndPoint from '@/config/apiEndPoint'
 import apiClient from '@/services/apiClient'
 import { getServerCookie } from '@/utils/getServerCookie'
 import ChatRoomTemplate from './components/ChatRoomTemplate'
+import CompleteRequestButton from './components/CompleteRequestButton'
+import CompleteReqeustTemplate from './components/CompleteRequestTemplate'
 
 type ChatPageProps = {
   params: {
@@ -32,19 +34,64 @@ const getInitialChatRoom = async (chatRoomId: string) => {
       Authorization: `${token}`,
     },
   )
-  return res.data.chatRoomInfo.fireStoreChatRoomId
+  return res.data.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)
 
+  //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 (
     <main className="relative flex flex-col items-center w-full gap-10 h-page pb-chat_input">
-      <PageTitle title="채팅방" />
+      <header className="w-full flex flex-row items-center px-4">
+        <PageTitle title="채팅방" />
+        {!isCompleteRequested && (
+          <CompleteRequestButton
+            myCardId={myCardId}
+            otherCardId={otherCardId}
+          />
+        )}
+      </header>
+      {isCompleteRequested && (
+        <CompleteReqeustTemplate
+          currentUser={initialUserInfo}
+          completeRequestData={completeRequestInfo}
+        />
+      )}
       <ChatRoomTemplate
         currentUser={initialUserInfo}
-        fireStoreId={initialChatRoom}
+        fireStoreId={initialChatRoom.fireStoreChatRoomId}
       />
       <div className="w-full h-0 border border-t-background-secondary-color" />
     </main>

src/config/apiEndPoint.ts

@@ -79,6 +79,10 @@ const ApiEndPoint = {
   putCardStatus: (cardId: number) => `/cards/status/${cardId}`,
   getPopularCardList: () => '/cards/popular',
   putMySuggestionStatus: () => `/suggestions/decision`,
+  getCompleteRequest: (completeRequestId: number) =>
+    `/complete-requests/${completeRequestId}`,
+  postCompleteRequest: () => '/complete-requests',
+  putCompleteRequest: () => '/complete-requests/confirm',
   getNotificationList: ({ isRead, cursorId }: GetNotificationListReq) => {
     return `/notifications/?${getQueryParams({
       'is-read': String(isRead),

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,
 }

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 }

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,
 }