Merge pull request #92 from team-nabi/NABI-262

🎉 제안 수락, 거절 API 연결 및 기타 작업

src/app/(root)/(routes)/cards/components/card-list-content/CardListContent.tsx

@@ -3,7 +3,6 @@
 import { useEffect, useRef, useState } from 'react'
 import { useSearchParams } from 'next/navigation'
 import ExceptionBoundary from '@/components/domain/exception-boundary'
-import MaxWidthWrapper from '@/components/domain/max-width-wrapper'
 import { useCardsQuery } from '@/hooks/api/queries/useCardsQuery'
 import { useIntersectionObserver } from '@/hooks/useIntersectionObserver'
 import { CategoryObjs, PriceRangeObjs } from '@/types/card'
@@ -50,7 +49,7 @@ const CardListContent = () => {
   console.log('content', data)
 
   return (
-    <MaxWidthWrapper>
+    <>
       <div className="h-9 flex justify-between items-center mb-6">
         <SearchInput setCardTitle={setCardTitle} />
         <FilterFormDialog
@@ -71,7 +70,7 @@ const CardListContent = () => {
         </ExceptionBoundary>
       </div>
       <div ref={lastElementRef} />
-    </MaxWidthWrapper>
+    </>
   )
 }
 export default CardListContent

src/app/(root)/(routes)/cards/page.tsx

@@ -1,15 +1,16 @@
 import { FunctionComponent } from 'react'
+import MaxWidthWrapper from '@/components/domain/max-width-wrapper'
 import PageTitle from '@/components/domain/page-title'
 import CardListContent from './components/card-list-content'
 
 interface CardListPageProps {}
 
 const CardListPage: FunctionComponent<CardListPageProps> = ({}) => {
   return (
-    <div>
+    <MaxWidthWrapper>
       <PageTitle title="물건 목록" />
       <CardListContent />
-    </div>
+    </MaxWidthWrapper>
   )
 }
 

src/app/(root)/(routes)/mypage/histories/components/my-trade-history-list-content/MyTradeHistoryListContent.tsx

@@ -2,7 +2,6 @@
 
 import { useEffect, useRef, Fragment } from 'react'
 import ExceptionBoundary from '@/components/domain/exception-boundary'
-import MaxWidthWrapper from '@/components/domain/max-width-wrapper'
 import { useMyTradeHistoryQuery } from '@/hooks/api/queries/useMyTradeHistoriesQuery'
 import { useIntersectionObserver } from '@/hooks/useIntersectionObserver'
 import MyTradeHistoryList from '../my-trade-history-list/MyTradeHistoryList'
@@ -27,7 +26,7 @@ const MyTradeHistoryListContent = () => {
   const isEmpty = data?.pages[0].data.historyList.length === 0
 
   return (
-    <MaxWidthWrapper>
+    <>
       <div>
         <ExceptionBoundary
           isLoading={isLoading}
@@ -40,7 +39,7 @@ const MyTradeHistoryListContent = () => {
       </div>
 
       <div ref={lastElementRef} />
-    </MaxWidthWrapper>
+    </>
   )
 }
 export default MyTradeHistoryListContent

src/app/(root)/(routes)/mypage/histories/page.tsx

@@ -1,17 +1,16 @@
 import { FunctionComponent } from 'react'
+import MaxWidthWrapper from '@/components/domain/max-width-wrapper'
 import PageTitle from '@/components/domain/page-title'
 import MyTradeHistoryList from './components/my-trade-history-list-content'
 
 interface MyHistoryListPageProps {}
 
 const MyHistoryListPage: FunctionComponent<MyHistoryListPageProps> = ({}) => {
   return (
-    <div>
-      <div className="mb-8">
-        <PageTitle title="내 거래 완료 내역" />
-      </div>
+    <MaxWidthWrapper>
+      <PageTitle title="내 거래 완료 내역" />
       <MyTradeHistoryList />
-    </div>
+    </MaxWidthWrapper>
   )
 }
 

src/app/(root)/(routes)/mypage/mycards/components/my-card-list-content/MyCardListContent.tsx

@@ -32,7 +32,7 @@ const MyCardListContent = () => {
 
   const isEmpty = data?.pages[0].data.cardList.length === 0
   return (
-    <MaxWidthWrapper>
+    <>
       <div className="h-9 flex justify-center items-center my-12">
         <TradeStatusTabs
           tradeStatus={tradeStatus}
@@ -51,7 +51,7 @@ const MyCardListContent = () => {
       </div>
 
       <div ref={lastElementRef} />
-    </MaxWidthWrapper>
+    </>
   )
 }
 export default MyCardListContent

src/app/(root)/(routes)/mypage/mycards/components/my-card/MyCard.tsx

@@ -18,7 +18,7 @@ const MoveToItemListPageButton = ({ priceRange }: { priceRange: string }) => (
 )
 
 const MoveToSuggestCheckPageButton = ({ cardId }: { cardId: number }) => (
-  <Link href={`${AppPath.suggestChecks()}?cardId=${cardId}`}>
+  <Link href={`${AppPath.mySuggestions()}/${cardId}`}>
     <CardFlex align={'center'} gap={'space'}>
       <Image src={Assets.arrowCircleRight} alt="arrow-circle-right" />{' '}
       <CardText>제안 확인</CardText>

src/app/(root)/(routes)/mypage/mycards/page.tsx

@@ -1,15 +1,16 @@
 import { FunctionComponent } from 'react'
+import MaxWidthWrapper from '@/components/domain/max-width-wrapper'
 import PageTitle from '@/components/domain/page-title'
 import MyCardListContent from './components/my-card-list-content'
 
 interface MyCardListPageProps {}
 
 const MyCardListPage: FunctionComponent<MyCardListPageProps> = ({}) => {
   return (
-    <div>
+    <MaxWidthWrapper>
       <PageTitle title="내 물건 페이지" />
       <MyCardListContent />
-    </div>
+    </MaxWidthWrapper>
   )
 }
 

src/app/(root)/(routes)/mypage/suggestions/[myCardId]/components/my-card-description-section/MyCardDescriptionSection.tsx

@@ -0,0 +1,70 @@
+import formatDistanceToNow from 'date-fns/formatDistanceToNow'
+import koLocale from 'date-fns/locale/ko'
+import Link from 'next/link'
+import Badge from '@/components/ui/badge'
+import { CardFlex, CardImage, CardText } from '@/components/ui/card'
+import AppPath from '@/config/appPath'
+import { CardDetail } from '@/types/card'
+
+const TradeAvailableBadge = () => <Badge variant={'primary'}>거래가능</Badge>
+const ReservedBadge = () => <Badge variant={'secondary'}>예약중</Badge>
+
+type MyCardDescriptionSection = {
+  card: CardDetail
+}
+
+const MyCardDescriptionSection = ({
+  card: {
+    cardId,
+    thumbnail,
+    cardTitle,
+    status,
+    itemName,
+    priceRange,
+    createdAt,
+  },
+}: MyCardDescriptionSection) => (
+  <Link href={`${AppPath.cards()}/${cardId}`} className="w-full">
+    <div className="flex h-card-lg p-1.5 justify-center w-full">
+      <CardFlex
+        direction={'row'}
+        justify={'start'}
+        align={'center'}
+        gap={'space'}
+        className="w-full h-full"
+      >
+        <div className="relative w-1/3 h-full">
+          <CardImage
+            className="rounded-lg border border-background-secondary-color"
+            src={thumbnail}
+            alt="이미지가 없습니다."
+            layout="fill"
+            objectFit="cover"
+          />
+        </div>
+
+        <CardFlex
+          direction={'col'}
+          justify={'between'}
+          className="w-2/3 h-full"
+        >
+          <CardFlex align={'center'} gap={'space'}>
+            <CardText type={'title'}>{cardTitle}</CardText>
+            {status === 'TRADE_AVAILABLE' ? (
+              <TradeAvailableBadge />
+            ) : (
+              <ReservedBadge />
+            )}
+          </CardFlex>
+          <CardText type={'description'}>{itemName}</CardText>
+          <CardText type={'description'}>{priceRange}</CardText>
+          <CardText type={'date'}>
+            {formatDistanceToNow(new Date(createdAt), { locale: koLocale })}
+          </CardText>
+        </CardFlex>
+      </CardFlex>
+    </div>
+  </Link>
+)
+
+export default MyCardDescriptionSection

src/app/(root)/(routes)/mypage/suggestions/[myCardId]/components/my-card-description-section/index.tsx

@@ -0,0 +1,3 @@
+import MyCardDescriptionSection from './MyCardDescriptionSection'
+
+export default MyCardDescriptionSection

src/app/(root)/(routes)/mypage/suggestions/[cardId]/components/my-suggestion-card/MySuggestionCard.tsx → src/app/(root)/(routes)/mypage/suggestions/[myCardId]/components/my-suggestion-card/MySuggestionCard.tsx

@@ -7,21 +7,16 @@ import { CardFlex, CardText, Card, CardImage } from '@/components/ui/card/Card'
 import Assets from '@/config/assets'
 import { useMySuggestionUpdateMutation } from '@/hooks/api/mutations/useMySuggestionUpdateMutation'
 import { Card as CardInfo } from '@/types/card'
-import {
-  DirectionType,
-  Suggestion,
-  SuggestionStatus,
-  SuggestionType,
-} from '@/types/suggestion'
+import { DirectionType, Suggestion, SuggestionType } from '@/types/suggestion'
 
 const SuggestionButtons = ({
   handleMySuggestionUpdate,
 }: {
-  handleMySuggestionUpdate: (suggestionStatus: SuggestionStatus) => void
+  handleMySuggestionUpdate: (isAccepted: boolean) => void
 }) => (
   <>
     <CardFlex
-      onClick={() => handleMySuggestionUpdate('ACCEPTED')}
+      onClick={() => handleMySuggestionUpdate(true)}
       className="cursor-pointer"
       align={'center'}
       gap={'space'}
@@ -30,7 +25,7 @@ const SuggestionButtons = ({
       <CardText>수락</CardText>
     </CardFlex>
     <CardFlex
-      onClick={() => handleMySuggestionUpdate('REFUSED')}
+      onClick={() => handleMySuggestionUpdate(false)}
       className="cursor-pointer"
       align={'center'}
       gap={'space'}
@@ -70,29 +65,25 @@ type MySuggestionCardProps = {
 }
 const MySuggestionCard = ({
   mySuggestion: {
-    suggestionInfo: {
-      suggestionId,
-      suggestionStatus,
-      directionType,
-      createdAt,
-    },
-    cardInfo: { cardTitle, itemName, priceRange, thumbnail },
+    suggestionInfo: { suggestionStatus, directionType, createdAt },
+    cardInfo: { cardId, cardTitle, itemName, priceRange, thumbnail },
   },
   suggestionTypeState,
   directionTypeState,
 }: MySuggestionCardProps) => {
-  const { cardId } = useParams()
+  const { myCardId } = useParams()
 
   const { mutate } = useMySuggestionUpdateMutation(
     suggestionTypeState,
     directionTypeState,
-    cardId,
+    myCardId,
   )
-  const handleMySuggestionUpdate = (
-    suggestionId: string,
-    suggestionStatus: SuggestionStatus,
-  ) => {
-    mutate({ suggestionId, suggestionStatus })
+  const handleMySuggestionUpdate = (cardId: number, isAccepted: boolean) => {
+    mutate({
+      fromCardId: cardId,
+      toCardId: myCardId,
+      isAccepted,
+    })
   }
 
   return (
@@ -123,10 +114,8 @@ const MySuggestionCard = ({
               {suggestionStatus === 'WAITING' ? (
                 directionType === 'RECEIVE' ? (
                   <SuggestionButtons
-                    handleMySuggestionUpdate={(
-                      suggestionStatus: SuggestionStatus,
-                    ) =>
-                      handleMySuggestionUpdate(suggestionId, suggestionStatus)
+                    handleMySuggestionUpdate={(isAccepted: boolean) =>
+                      handleMySuggestionUpdate(cardId, isAccepted)
                     }
                   />
                 ) : (

src/app/(root)/(routes)/mypage/suggestions/[cardId]/components/my-suggestion-list-content/MySuggestionListContent.tsx → src/app/(root)/(routes)/mypage/suggestions/[myCardId]/components/my-suggestion-list-content/MySuggestionListContent.tsx

@@ -1,9 +1,8 @@
 'use client'
 
 import { useEffect, useRef, useState } from 'react'
-import { useParams, usePathname, useRouter } from 'next/navigation'
+import { useParams } from 'next/navigation'
 import ExceptionBoundary from '@/components/domain/exception-boundary'
-import MaxWidthWrapper from '@/components/domain/max-width-wrapper'
 import { useMySuggestionsQuery } from '@/hooks/api/queries/useMySuggestionsQuery'
 import { useIntersectionObserver } from '@/hooks/useIntersectionObserver'
 import { DirectionType, SuggestionType } from '@/types/suggestion'
@@ -15,10 +14,10 @@ const MySuggestionListContent = () => {
     useState<SuggestionType>('OFFER')
   const [directionTypeState, setDirectionTypeState] =
     useState<DirectionType>('RECEIVE')
-  const { cardId } = useParams()
+  const { myCardId } = useParams()
 
   const { data, fetchNextPage, isLoading, isError, isFetchingNextPage } =
-    useMySuggestionsQuery(suggestionTypeState, directionTypeState, cardId)
+    useMySuggestionsQuery(suggestionTypeState, directionTypeState, myCardId)
 
   const lastElementRef = useRef<HTMLDivElement | null>(null)
   const entry = useIntersectionObserver(lastElementRef, { threshold: 1.0 })
@@ -35,7 +34,7 @@ const MySuggestionListContent = () => {
 
   const isEmpty = data?.pages[0].data.suggestionList.length === 0
   return (
-    <MaxWidthWrapper>
+    <>
       <div className="h-9 flex justify-center items-center my-12">
         <SuggestionStatusTabs
           setSuggestionTypeState={setSuggestionTypeState}
@@ -58,7 +57,7 @@ const MySuggestionListContent = () => {
       </div>
 
       <div ref={lastElementRef} />
-    </MaxWidthWrapper>
+    </>
   )
 }
 export default MySuggestionListContent