Merge branch 'develop' of https://github.com/team-nabi/nabi-market-cl…

…ient into NABI-359

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

src/app/(root)/(routes)/cards/components/filter-form-dialog/FilterFormDialog.tsx

@@ -6,7 +6,6 @@ import {
   Dialog,
   DialogContent,
   DialogDescription,
-  DialogFooter,
   DialogHeader,
   DialogTitle,
   DialogTrigger,
@@ -21,24 +20,37 @@ import {
 import AppPath from '@/config/appPath'
 import Assets from '@/config/assets'
 import { CATEGORY_OBJS, PRICE_RANGE_OBJS } from '@/constants/card'
-import useCreateQueryString from '@/hooks/useCreateQueryString'
 import { CategoryObjs, PriceRangeObjs } from '@/types/card'
+import { getQueryParams } from '@/utils/getQueryParams'
 import { getValueByKey } from '@/utils/getValueByKey'
 
 const FilterFormDialog = () => {
+  const router = useRouter()
+  const searchParams = useSearchParams()
+  const priceRange = searchParams.get('priceRange') || undefined
+  const category = searchParams.get('category') || undefined
+  const [priceRangeState, setPriceRangeState] = useState(priceRange)
+  const [categoryState, setCategoryState] = useState(category)
   const [isOpen, setIsOpen] = useState(false)
   const openModal = () => {
     setIsOpen(true)
   }
   const closeModal = () => {
     setIsOpen(false)
   }
-  const searchParams = useSearchParams()
-  const router = useRouter()
-
-  const { createQueryString } = useCreateQueryString()
-  const priceRange = searchParams.get('priceRange') || undefined
-  const category = searchParams.get('category') || undefined
+  const handleApplyFilter = () => {
+    router.push(
+      `${AppPath.cards()}?${getQueryParams({
+        priceRange: priceRangeState,
+        category: categoryState,
+      })}`,
+    )
+    closeModal()
+  }
+  const handleResetFilter = () => {
+    setPriceRangeState(undefined)
+    setCategoryState(undefined)
+  }
 
   const hasNoFilter = priceRange !== undefined || category !== undefined
 
@@ -70,15 +82,13 @@ const FilterFormDialog = () => {
               가격대
             </DialogDescription>
             <Select
-              value={priceRange}
+              value={priceRangeState}
               onValueChange={(value: PriceRangeObjs['key']) => {
-                router.push(
-                  '/cards' + '?' + createQueryString('priceRange', value),
-                )
+                setPriceRangeState(value)
               }}
             >
               <SelectTrigger>
-                {getValueByKey(PRICE_RANGE_OBJS, priceRange) ||
+                {getValueByKey(PRICE_RANGE_OBJS, priceRangeState) ||
                   '가격대를 선택해주세요'}
               </SelectTrigger>
               <SelectContent>
@@ -97,7 +107,6 @@ const FilterFormDialog = () => {
           </DialogDescription>
           <DialogDescription className="mb-6 border-t border-solid border-background-secondary-color"></DialogDescription>
 
-          {/*TODO: 현재 SelectItem의 value와 textContent가 동일 실 API를 받을 경우, 어떤 값을 줄지 정한후 map 객체로 파싱하여 요청 */}
           <DialogDescription className="mb-6">
             <DialogDescription className="mb-2 text-sm">
               카테고리
@@ -107,39 +116,29 @@ const FilterFormDialog = () => {
                 key={currentCategory.key}
                 data-category-key={currentCategory.key}
                 className={`border rounded-[10px] text-[10px] h-[25px] px-3 m-1 ${
-                  category === currentCategory.key
+                  categoryState === currentCategory.key
                     ? 'border-primary-color text-primary-color'
                     : 'border-background-secondary-color text-background-secondary-color'
                 }`}
                 onClick={(e) =>
-                  router.push(
-                    '/cards' +
-                      '?' +
-                      createQueryString(
-                        'category',
-                        e.currentTarget.getAttribute(
-                          'data-category-key',
-                        ) as CategoryObjs['key'],
-                      ),
+                  setCategoryState(
+                    e.currentTarget.getAttribute(
+                      'data-category-key',
+                    ) as CategoryObjs['key'],
                   )
                 }
               >
                 {getValueByKey(CATEGORY_OBJS, currentCategory.key)}
               </button>
             ))}
           </DialogDescription>
-          <DialogDescription>
-            <DialogFooter className="pb-6">
-              <Button
-                variant={'gradation'}
-                onClick={() => {
-                  router.push(AppPath.cards())
-                  closeModal()
-                }}
-              >
-                필터 초기화
-              </Button>
-            </DialogFooter>
+          <DialogDescription className="flex justify-end gap-2">
+            <Button variant={'secondary'} onClick={handleResetFilter}>
+              초기화
+            </Button>
+            <Button variant={'gradation'} onClick={handleApplyFilter}>
+              적용하기
+            </Button>
           </DialogDescription>
         </DialogContent>
       </Dialog>