🎉 리다이랙트 및 라우팅 추가 + 버그 수정

team-nabi · Nov 28, 2023 · 32285bf · 32285bf
1 parent 6964fe1
commit 32285bf
Show file tree

Hide file tree

Showing 7 changed files with 73 additions and 19 deletions.
diff --git a/src/app/(root)/(routes)/cards/[cardId]/components/description-section/DescriptionSection.tsx b/src/app/(root)/(routes)/cards/[cardId]/components/description-section/DescriptionSection.tsx
@@ -1,6 +1,8 @@
 import formatDistanceToNow from 'date-fns/formatDistanceToNow'
 import koLocale from 'date-fns/locale/ko'
+import { useRouter } from 'next/navigation'
 import Badge from '@/components/ui/badge'
+import AppPath from '@/config/appPath'
 import { CATEGORY_OBJS, TRADE_STATUS_OBJS } from '@/constants/card'
 import { useAuth } from '@/contexts/AuthProvider'
 import { TYPOGRAPHY } from '@/styles/sizes'
@@ -36,6 +38,7 @@ const DescriptionSection = ({
 }: DescriptionSectionProps) => {
   const { isLoggedIn } = useAuth()
   const { currentUser } = useAuth()
+  const router = useRouter()
 
   const isMyItem = currentUser?.userId === authorId
 
@@ -68,7 +71,14 @@ const DescriptionSection = ({
             TYPOGRAPHY.description,
           )}
         >
-          <u>{getValueByKey(CATEGORY_OBJS, category)}</u>
+          <u
+            className="cursor-pointer"
+            onClick={() =>
+              router.push(`${AppPath.cards()}?category=${category}`)
+            }
+          >
+            {getValueByKey(CATEGORY_OBJS, category)}
+          </u>
         </p>
         <p className={cn('text-text-secondary-color', TYPOGRAPHY.description)}>
           {formatDistanceToNow(new Date(createdAt), {

diff --git a/src/app/(root)/(routes)/cards/[cardId]/components/trade-section/SuggestList.tsx b/src/app/(root)/(routes)/cards/[cardId]/components/trade-section/SuggestList.tsx
@@ -1,4 +1,6 @@
+import { Suspense } from 'react'
 import { useRouter } from 'next/navigation'
+import Loading from '@/app/loading'
 import SuggestCard from '@/components/domain/card/suggest-card'
 import NoData from '@/components/domain/no-data'
 import { Tabs, TabsTrigger, TabsList, TabsContent } from '@/components/ui/tabs'
@@ -51,19 +53,21 @@ const SuggestList = ({ pokeAvailable, toCardId }: SuggestListProps) => {
         <TabsTrigger value="OFFER">오퍼하기</TabsTrigger>
         <TabsTrigger value="POKE">찔러보기</TabsTrigger>
       </TabsList>
-      {['OFFER', 'POKE'].map((type) => (
-        <TabsContent
-          key={type}
-          value={type}
-          className="flex flex-col data-[state=inactive]:hidden h-[402px] overflow-y-auto pr-2"
-        >
-          {!pokeAvailable && type === 'POKE' ? (
-            <PokeUnavailableInfo />
-          ) : (
-            filterData(type)
-          )}
-        </TabsContent>
-      ))}
+      <Suspense fallback={<Loading />}>
+        {['OFFER', 'POKE'].map((type) => (
+          <TabsContent
+            key={type}
+            value={type}
+            className="flex flex-col data-[state=inactive]:hidden h-[402px] overflow-y-auto pr-2"
+          >
+            {!pokeAvailable && type === 'POKE' ? (
+              <PokeUnavailableInfo />
+            ) : (
+              filterData(type)
+            )}
+          </TabsContent>
+        ))}
+      </Suspense>
     </Tabs>
   )
 }

diff --git a/src/app/(root)/(routes)/chatrooms/[chatRoomId]/loading.tsx b/src/app/(root)/(routes)/chatrooms/[chatRoomId]/loading.tsx
@@ -0,0 +1,25 @@
+'use client'
+
+import Lottie from 'react-lottie-player'
+import lottieJson from '../../../../../../public/loading.json'
+
+const Loading = () => {
+  return (
+    <div className="w-full h-full text-center">
+      <div className="flex flex-col items-center w-[320px] h-[360px] absolute left-1/2 translate-y-[50%] translate-x-[-50%] ">
+        <Lottie
+          loop
+          animationData={lottieJson}
+          play
+          style={{
+            width: '100%',
+            height: '100%',
+          }}
+        />
+        <p className="font- text-[20px]">채팅방을 불러오는 중입니다.</p>
+      </div>
+    </div>
+  )
+}
+
+export default Loading
diff --git a/src/app/(root)/(routes)/notifications/components/notification-card/NotificationCard.tsx b/src/app/(root)/(routes)/notifications/components/notification-card/NotificationCard.tsx
@@ -11,8 +11,15 @@ type NotificationCardProps = {
 const NotificationCard = ({
   notification: { content, cardId, read },
 }: NotificationCardProps) => {
+  const isCompleteRequestNotification = content.includes('성사')
   return (
-    <Link href={`${AppPath.mySuggestions(cardId)}`}>
+    <Link
+      href={
+        isCompleteRequestNotification
+          ? `${AppPath.chatRooms()}`
+          : `${AppPath.mySuggestions(cardId)}`
+      }
+    >
       <Card size={'xs'} className="p-4">
         <CardFlex justify={'between'} align={'center'} className="h-full">
           <CardFlex gap={'space'} align={'center'} className="h-full w-2/3">

diff --git a/src/app/loading.tsx b/src/app/loading.tsx
@@ -5,7 +5,7 @@ import lottieJson from '../../public/loading.json'
 
 const Loading = () => {
   return (
-    <div className="w-full h-screen text-center">
+    <div className="w-full h-full text-center">
       <div className="flex flex-col items-center w-[320px] h-[360px] absolute left-1/2 translate-y-[50%] translate-x-[-50%] ">
         <Lottie
           loop

diff --git a/src/components/domain/card/suggest-card/SuggestCard.tsx b/src/components/domain/card/suggest-card/SuggestCard.tsx
@@ -1,8 +1,10 @@
 'use client'
 
+import { useRouter } from 'next/navigation'
 import Button from '@/components/ui/button'
 import Card from '@/components/ui/card'
 import { CardFlex, CardImage, CardText } from '@/components/ui/card/Card'
+import AppPath from '@/config/appPath'
 import { PRICE_RANGE_OBJS } from '@/constants/card'
 import { DEFAULT_ITEM_THUMBNAIL_IMG } from '@/constants/image'
 import useSuggestionCreateMutation from '@/hooks/api/mutations/useSuggestionCreateMutation'
@@ -31,7 +33,7 @@ const SuggestCard = ({
   suggestionStatus,
 }: SuggestCardProps) => {
   const { mutate } = useSuggestionCreateMutation(toCardId, fromCardId)
-
+  const router = useRouter()
   const onClickSuggest = async (suggestionType: SuggestionType) => {
     mutate({ suggestionType, fromCardId, toCardId })
   }
@@ -44,12 +46,13 @@ const SuggestCard = ({
         gap={'space'}
         className="h-full"
       >
-        <div className="h-full w-36 relative">
+        <div className="h-full w-36 relative cursor-pointer">
           <CardImage
             src={thumbnail}
             alt="thumbnail"
             layout="fill"
             objectFit="cover"
+            onClick={() => router.push(AppPath.card(String(fromCardId)))}
           />
         </div>
         <CardFlex direction={'col'} justify={'between'} className="h-full grow">

diff --git a/src/hooks/useDibs.ts b/src/hooks/useDibs.ts
@@ -1,10 +1,15 @@
 'use client'
 
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 import { deleteCardDibs, postCardDibs } from '@/services/card/card'
 import { toast } from './useToast'
 
 const useDibs = (isMyDib: boolean, count: number) => {
+  useEffect(() => {
+    setIsDibsActive(isMyDib)
+    setDibsCount(count)
+  }, [count, isMyDib])
+
   const [isDibsActive, setIsDibsActive] = useState(isMyDib)
   const [dibsCount, setDibsCount] = useState(count)