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

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 <CompleteRequestCard />
+}
+
+export default CompleteReqeustSection

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<void>
+}
+
+const CompleteRequestButton = ({
+  onClickButton,
+}: CompleteRequestButtonProps) => {
+  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={onClickButton}>
+            거래성사 요청
+          </DropdownMenuItem>
+        </DropdownMenuGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}
+export default CompleteRequestButton

src/app/(root)/(routes)/chat/components/complete-request-card/CompleteRequestCard.tsx

@@ -0,0 +1,66 @@
+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<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>
+)
+
+const CompleteRequestCard = () => {
+  return (
+    <div>
+      <Card className="p-2 flex items-center border-0" size={'sm'}>
+        <CardFlex justify={'between'} className="gap-4">
+          <CardItem
+            thumbnail={
+              'https://team-01-bucket.s3.ap-northeast-2.amazonaws.com/633faaee-0210-4ffb-8085-569374a26d70-214e000d15fc5a3a.jpeg'
+            }
+            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}>
+                <Image src={Assets.checkCircle} alt="accept" />
+              </Button>
+              <Button className="ml-auto" size="icon_sm" variant={null}>
+                <Image src={Assets.quitCircle} alt="refuse" />
+              </Button>
+            </CardFlex>
+          </CardFlex>
+          <CardItem
+            thumbnail={
+              'https://team-01-bucket.s3.ap-northeast-2.amazonaws.com/fdd01120-4443-4643-9d6b-6140b75d0b98-230222112308_1_3034298.jpeg'
+            }
+            itemName={'갤럭시23'}
+          />
+        </CardFlex>
+      </Card>
+    </div>
+  )
+}
+
+export default CompleteRequestCard

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 (
-    <main className="relative flex flex-col items-center w-full gap-10 h-page pb-chat_input">
-      <PageTitle title="채팅방" />
+    <main className="relative flex flex-col items-center w-full gap-4 h-page pb-chat_input">
+      <header className="w-full flex flex-row items-center px-4">
+        <PageTitle title="채팅방" />
+        <CompleteRequestButton onClickButton={handleRequestButton} />
+      </header>
+      <CompleteReqeustSection completeRequestId={1} />
       <section className="flex flex-col items-center px-2 overflow-scroll overflow-x-hidden">
         <ChatList
           messages={messages}

src/config/apiEndPoint.ts

@@ -69,6 +69,10 @@ const ApiEndPoint = {
   putCardStatus: (cardId: number) => `/cards/status/${cardId}`,
   getPopularCardList: () => '/cards/popular',
   putMySuggestionStatus: () => `/suggestions/decision`,
+  getCompleteRequest: (completeRequestId: number) =>
+    `/complete-reqeusts/${completeRequestId}`,
+  postCompleteRequest: () => '/complete-requests',
+  putCompleteRequest: () => '/complete-requests/confirm',
 } as const
 
 export default ApiEndPoint

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/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,50 @@ 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
+}
+
+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,
@@ -180,4 +225,7 @@ export {
   putCard,
   getPopularCardList,
   putCardStatus,
+  getCompleteRequest,
+  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,
 }