Merge pull request #144 from team-nabi/develop

🚚 merge develop

package.json

@@ -38,6 +38,7 @@
     "next-themes": "^0.2.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-error-boundary": "^4.0.11",
     "react-hook-form": "^7.47.0",
     "react-lottie-player": "^1.5.5",
     "sharp": "^0.32.6",

src/app/(root)/(routes)/(auth)/login/components/RouteCallback.tsx

@@ -26,11 +26,13 @@ const RouteCallback = ({ tokenResponse }: RouteCallbackProps) => {
 
   useEffect(() => {
     if (tokenResponse?.data) {
+      let inHour = new Date()
+      inHour.setHours(inHour.getHours() + 1)
       Cookies.set(
         Environment.tokenName(),
         tokenResponse?.data?.token?.accessToken,
         {
-          expires: 60 * 60 * 24 * 7,
+          expires: inHour,
         },
       )
       window.location.href = AppPath.home()

src/app/(root)/(routes)/(home)/components/CategorySection.tsx

@@ -1,35 +1,25 @@
-'use client'
-
 import Image from 'next/image'
-import { useRouter } from 'next/navigation'
-import Button from '@/components/ui/button'
+import Link from 'next/link'
 import AppPath from '@/config/appPath'
 import { CATEGORY_BUTTON_LIST } from '@/constants/card'
 import { TYPOGRAPHY } from '@/styles/sizes'
 
 const CategorySection = () => {
-  const router = useRouter()
-
-  const handleClick = (name: string) => {
-    if (name === 'ALL_CARD') {
-      router.push(`${AppPath.cards()}`)
-    } else {
-      router.push(`${AppPath.cards()}?category=${name}`)
-    }
-  }
   return (
     <div className="grid items-center w-full grid-cols-5 gap-y-4">
       {CATEGORY_BUTTON_LIST.map((v) => (
-        <Button
+        <Link
           key={v.key}
-          variant={null}
-          size={'icon_md'}
-          className="flex flex-col gap-2 h-[61px] w-auto"
-          onClick={() => handleClick(v.key)}
+          className="flex flex-col gap-2 h-[61px] w-auto justify-center items-center"
+          href={
+            v.key === 'ALL_CARD'
+              ? `${AppPath.cards()}`
+              : `${AppPath.cards()}?category=${v.key}`
+          }
         >
-          <Image className="w-8 h-8" alt={'category-image'} src={v.image} />
+          <Image className="w-8 h-8" alt={`category-${v.key}`} src={v.image} />
           <p className={` w-max ${TYPOGRAPHY.description}`}>{v.value}</p>
-        </Button>
+        </Link>
       ))}
     </div>
   )

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

@@ -5,7 +5,7 @@ import PopularCardSection from './components/PopularCardSection'
 
 function HomePage() {
   return (
-    <main className="flex flex-col items-center min-h-screen gap-12 bg-background-color">
+    <main className="flex flex-col items-center min-h-screen gap-12 bg-background-color pb-8">
       <BannerSection />
       <CategorySection />
       <PopularCardSection />

src/app/(root)/(routes)/cards/[cardId]/components/ProfileSection/ProfileSection.tsx

@@ -12,7 +12,7 @@ const ProfileSection = ({ profileImg, userName }: ProfileSectionProps) => {
       <Avatar size="md">
         <AvatarImage imgUrl={profileImg} />
       </Avatar>
-      <div className={`ml-9 ${TYPOGRAPHY.profile}`}>{userName}</div>
+      <div className={`ml-4 ${TYPOGRAPHY.profile}`}>{userName}</div>
     </section>
   )
 }

src/app/(root)/(routes)/cards/[cardId]/components/description-section/DescriptionSection.tsx

@@ -1,11 +1,14 @@
 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'
 import { CardDetail } from '@/types/card'
 import { cn } from '@/utils'
+import { getQueryParams } from '@/utils/getQueryParams'
 import { getValueByKey } from '@/utils/getValueByKey'
 import Dibs from './Dibs'
 import MoreButton from './MoreButton'
@@ -36,6 +39,7 @@ const DescriptionSection = ({
 }: DescriptionSectionProps) => {
   const { isLoggedIn } = useAuth()
   const { currentUser } = useAuth()
+  const router = useRouter()
 
   const isMyItem = currentUser?.userId === authorId
 
@@ -68,7 +72,14 @@ const DescriptionSection = ({
             TYPOGRAPHY.description,
           )}
         >
-          <u>{getValueByKey(CATEGORY_OBJS, category)}</u>
+          <u
+            className="cursor-pointer"
+            onClick={() =>
+              router.push(`${AppPath.cards()}?${getQueryParams({ category })}`)
+            }
+          >
+            {getValueByKey(CATEGORY_OBJS, category)}
+          </u>
         </p>
         <p className={cn('text-text-secondary-color', TYPOGRAPHY.description)}>
           {formatDistanceToNow(new Date(createdAt), {

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

src/app/(root)/(routes)/cards/[cardId]/components/trade-section/TradeInfo.tsx

@@ -14,7 +14,7 @@ const TradeInfo = ({ title, content, variant, icon }: TradeInfoProps) => {
       <Image src={icon} alt="infoImg" />
       <div className="text-sm ml-2 font-normal">{title}</div>
       <Badge size={'lg'} variant={variant} className="ml-auto">
-        {content}
+        {content === '' ? '미입력' : content}
       </Badge>
     </div>
   )

src/app/(root)/(routes)/cards/[cardId]/modify/CardModifyTemplate.tsx

@@ -68,7 +68,7 @@ const CardModifyTemplate = ({ cardInfo, cardId }: CardModifyTemplateProps) => {
                 variant={'gradation'}
                 disabled={isSubmitting}
               >
-                등록하기
+                수정하기
               </Button>
             </div>
           </section>

src/app/(root)/(routes)/cards/[cardId]/page.tsx

@@ -1,6 +1,10 @@
 'use client'
 
+import Image from 'next/image'
+import { useRouter } from 'next/navigation'
 import Slider from '@/components/domain/slider'
+import Button from '@/components/ui/button'
+import Assets from '@/config/assets'
 import { useAuth } from '@/contexts/AuthProvider'
 import useCardInfoQuery from '@/hooks/api/queries/useCardInfoQuery'
 import ProfileSection from './components/ProfileSection'
@@ -15,13 +19,26 @@ type CardPageProps = {
 
 const CardPage = ({ params }: CardPageProps) => {
   const { isLoggedIn } = useAuth()
+  const router = useRouter()
   const { data } = useCardInfoQuery(Number(params.cardId), isLoggedIn)
   const cardData = data?.data
 
   return (
     <main className="flex-col min-h-screen bg-background-color">
       {cardData && (
         <>
+          <Button
+            className="absolute top-[66px] z-10"
+            variant={null}
+            size={'icon'}
+            onClick={() => router.back()}
+          >
+            <Image
+              className="w-10 h-10"
+              alt={'arrow-button'}
+              src={Assets.chevronLeftGray}
+            />
+          </Button>
           <Slider
             imageData={cardData.cardInfo.images}
             imageAspectRatio="square"

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

@@ -1,6 +1,7 @@
 'use client'
 
 import { useEffect, useRef } from 'react'
+import { ErrorBoundary } from 'react-error-boundary'
 import { useSearchParams } from 'next/navigation'
 import ExceptionBoundary from '@/components/domain/exception-boundary'
 import { useCardsQuery } from '@/hooks/api/queries/useCardsQuery'
@@ -13,27 +14,33 @@ const CardListContent = () => {
   const searchParams = useSearchParams()
 
   // TODO: 현재 API 명세에 status에 어떤 값을 줘야하는지에 대한 정의가 되어 있지 않기 때문에 임시로 상수 값을 전달함 => 추후에 실제 동작 값으로 고치기
-  const { data, fetchNextPage, isError, isFetchingNextPage, isLoading } =
-    useCardsQuery({
-      category:
-        (searchParams.get('category') as CategoryObjs['key']) || undefined,
-      priceRange:
-        (searchParams.get('priceRange') as PriceRangeObjs['key']) || undefined,
-      cardTitle: searchParams.get('cardTitle' as string) || '',
-    })
+  const {
+    data,
+    fetchNextPage,
+    isError,
+    isFetchingNextPage,
+    isLoading,
+    hasNextPage,
+  } = useCardsQuery({
+    category:
+      (searchParams.get('category') as CategoryObjs['key']) || undefined,
+    priceRange:
+      (searchParams.get('priceRange') as PriceRangeObjs['key']) || undefined,
+    cardTitle: searchParams.get('cardTitle' as string) || '',
+  })
 
   const lastElementRef = useRef<HTMLDivElement | null>(null)
   const entry = useIntersectionObserver(lastElementRef, { threshold: 1.0 })
 
   useEffect(() => {
-    if (isFetchingNextPage) {
+    if (isFetchingNextPage || !hasNextPage) {
       return
     }
 
     if (entry?.isIntersecting) {
       fetchNextPage()
     }
-  }, [entry?.isIntersecting, fetchNextPage, isFetchingNextPage])
+  }, [entry?.isIntersecting, fetchNextPage, isFetchingNextPage, hasNextPage])
 
   // TODO: 아이템이 없을시 어떤 UI를 보여줄지 차후에 결정
 
@@ -48,7 +55,9 @@ const CardListContent = () => {
         isEmpty={isEmpty}
         isFetchingNextPage={isFetchingNextPage}
       >
-        <CardList />
+        <ErrorBoundary fallback={<div>렌더링 중 문제가 발생했습니다.</div>}>
+          <CardList />
+        </ErrorBoundary>
       </ExceptionBoundary>
       <div ref={lastElementRef} />
     </>