🚚 release sprint 5.0.1 (#113)

* 🎉 유저는 제안 요청, 제안 수락/거절, 거래 성사 요청에 대한 알림을 조회 할 수 있다. (#97)

* 🎉 알림 카드 제작 및 페이지 이동 기능 구현

* 🎉 알림 리스트 제작 및 알림 조회 기능 구현

* 🎉 알림 탭 제작 및 알림 종류별 조회 기능 구현

* 🎉 읽음 처리 버튼 제작 및 읽음 처리 기능 구현

* ✨ 채팅방 레이아웃 및 타입 조정

* 🐛 찜 목록 연결 안되던 오류 해결

* 🎉 채팅방 api 연결

* 🎉 유저는 수락된 제안으로 인해 생성된 채팅방 목록을 조회 할 수 있다. (#102)

* 🎉 채팅방 카드 제작 및 리다이렉트 기능 구현

* 🎉 채팅방 리스트 제작 및 무한스크롤 기능 구현

* 🎉 유저는 수락된 제안으로 인해 생성된 채팅방 목록을 조회 할 수 있다. (#104)

* 🎉 채팅방 카드 제작 및 리다이렉트 기능 구현

* 🎉 채팅방 리스트 제작 및 무한스크롤 기능 구현

* Merge branch 'develop' into NABI-301

* 🎉 거래성사요청 기능 구현 완료 (#108)

* 🚧 complete request 상태 타입 지정

* 🚧 get api 추가

* 🚧 거래성사요청 카드 컴포넌트

* 🎉 거래성사요청 컴포넌트 구현

* 🚧 제안요청 수락/거절 api 연결중

* 🚧 chatroom 테스트중

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

* ✨ 코드리뷰 반영

---------

Co-authored-by: Kim Dong Hyun <[email protected]>
Co-authored-by: oaoong <[email protected]>

.vscode/settings.json

@@ -19,5 +19,5 @@
     "titleBar.inactiveForeground": "#e7e7e799"
   },
   "peacock.color": "#6C64F8",
-  "cSpell.words": ["Firestore"]
+  "cSpell.words": ["chatrooms", "Firestore"]
 }

package.json

@@ -34,10 +34,10 @@
     "firebase": "^10.6.0",
     "js-cookie": "^3.0.5",
     "lucide-react": "^0.292.0",
-    "next": "14.0.1",
+    "next": "14.0.3",
     "next-themes": "^0.2.1",
-    "react": "^18",
-    "react-dom": "^18",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-hook-form": "^7.47.0",
     "sharp": "^0.32.6",
     "swiper": "^11.0.3",

src/app/(root)/(routes)/chat/components/ChatList.tsx → src/app/(root)/(routes)/chatrooms/[chatRoomId]/components/ChatList.tsx

@@ -5,7 +5,7 @@ import { cn } from '@/utils'
 
 type ChatListProps = {
   messages: Message[]
-  currentUserNickname?: string
+  currentUserId?: number
 }
 
 type ChatProps = {
@@ -14,15 +14,15 @@ type ChatProps = {
 }
 
 const ChatList = forwardRef<HTMLDivElement, ChatListProps>(
-  ({ messages, currentUserNickname }, ref) => {
+  ({ messages, currentUserId }, ref) => {
     return (
       <ul className="flex flex-col w-full h-full gap-1">
         {messages.map((message: Message) => {
           return (
             <Chat
               key={message.id}
               message={message}
-              isMyMessage={message.sender === currentUserNickname}
+              isMyMessage={message.sender === currentUserId?.toString()}
             />
           )
         })}

src/app/(root)/(routes)/chat/page.tsx → src/app/(root)/(routes)/chatrooms/[chatRoomId]/components/ChatRoomTemplate.tsx

@@ -2,20 +2,26 @@
 
 import React, { useEffect, useRef } from 'react'
 import { limit, orderBy, query, addDoc } from 'firebase/firestore'
-import PageTitle from '@/components/domain/page-title'
 import { CHAT_LIMIT } from '@/config/firebaseConfig'
-import { useAuth } from '@/contexts/AuthProvider'
 import useFirestoreQuery from '@/hooks/useFirestoreQuery'
 import { useToast } from '@/hooks/useToast'
 import { getMessageRef } from '@/lib/firebase'
-import ChatInput from './components/ChatInput'
-import ChatList from './components/ChatList'
+import type { User } from '@/types/user'
+import ChatInput from './ChatInput'
+import ChatList from './ChatList'
 
-const ChatPage = () => {
-  const { currentUser } = useAuth()
+type ChatRoomTemplateProps = {
+  currentUser: User
+  fireStoreId: string
+}
+
+const ChatRoomTemplate = ({
+  currentUser,
+  fireStoreId,
+}: ChatRoomTemplateProps) => {
   const { toast } = useToast()
 
-  const messageRef = getMessageRef('room2') // TODO: room id를 받아서 처리
+  const messageRef = getMessageRef(fireStoreId)
   const messages = useFirestoreQuery(
     query(messageRef, orderBy('createdAt', 'asc'), limit(CHAT_LIMIT)),
   )
@@ -34,7 +40,7 @@ const ChatPage = () => {
     try {
       await addDoc(messageRef, {
         text: message,
-        sender: currentUser?.nickname ?? '익명',
+        sender: currentUser?.userId.toString(),
         createdAt: new Date(),
       })
     } catch (e) {
@@ -47,19 +53,17 @@ const ChatPage = () => {
   }
 
   return (
-    <main className="relative flex flex-col items-center w-full gap-10 h-page pb-chat_input">
-      <PageTitle title="채팅방" />
-      <section className="flex flex-col items-center px-2 overflow-scroll overflow-x-hidden">
+    <>
+      <section className="flex flex-col items-center w-full h-full px-2 overflow-scroll overflow-x-hidden">
         <ChatList
           messages={messages}
-          currentUserNickname={currentUser?.nickname}
+          currentUserId={currentUser?.userId}
           ref={chatBottomRef}
         />
       </section>
       <ChatInput onSubmit={onSubmitMessage} />
-      <div className="w-full h-0 border border-t-background-secondary-color" />
-    </main>
+    </>
   )
 }
 
-export default ChatPage
+export default ChatRoomTemplate

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