✨ 로딩 개선

src/app/(root)/(routes)/cards/[cardId]/modify/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="z-50 flex-1 w-full h-full text-center">
+      <div className="flex flex-col items-center w-[320px] h-[360px] absolute top-0 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

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

@@ -2,8 +2,8 @@
 
 import { Suspense } from 'react'
 import { ErrorBoundary } from 'react-error-boundary'
-import Loading from '@/app/loading'
 import DefaultErrorTemplate from '@/components/domain/errors/DefaultErrorTemplate'
+import InfiniteScrollLoading from '@/components/domain/infinite-scroll-loading'
 import CardFilterSection from '../card-filter-section'
 import CardList from '../card-list/CardList'
 
@@ -16,7 +16,7 @@ const CardListContent = () => {
           <DefaultErrorTemplate onClickButton={() => console.log('재시도')} />
         }
       >
-        <Suspense fallback={<Loading />}>
+        <Suspense fallback={<InfiniteScrollLoading />}>
           <CardList />
         </Suspense>
       </ErrorBoundary>

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

@@ -2,8 +2,8 @@
 
 import { Suspense, useState } from 'react'
 import { ErrorBoundary } from 'react-error-boundary'
-import Loading from '@/app/loading'
 import DefaultErrorTemplate from '@/components/domain/errors/DefaultErrorTemplate'
+import InfiniteScrollLoading from '@/components/domain/infinite-scroll-loading'
 import { TradeStatus } from '@/types/card'
 import MyCardList from '../my-card-list/MyCardList'
 import TradeStatusTabs from '../trade-status-tabs'
@@ -22,7 +22,7 @@ const MyCardListContent = () => {
           <DefaultErrorTemplate onClickButton={() => console.log('재시도')} />
         }
       >
-        <Suspense fallback={<Loading />}>
+        <Suspense fallback={<InfiniteScrollLoading />}>
           <MyCardList tradeStatus={tradeStatus} />
         </Suspense>
       </ErrorBoundary>

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

@@ -26,9 +26,6 @@ const ChatList = forwardRef<HTMLDivElement, ChatListProps>(
             />
           )
         })}
-        {messages.length === 0 && (
-          <h1 className="text-red-500">채팅을 시작해보세요!</h1>
-        )}
         <div className="invisible" ref={ref} />
       </ul>
     )

src/app/(root)/(routes)/chatrooms/[chatRoomId]/loading.tsx

@@ -1,11 +1,11 @@
 'use client'
 
 import Lottie from 'react-lottie-player'
-import lottieJson from '../../../../../../public/loading.json'
+import lottieJson from '/public/loading.json'
 
 const Loading = () => {
   return (
-    <div className="w-full h-full text-center">
+    <div className="z-50 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

src/app/(root)/(routes)/mypage/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="z-50 flex-1 w-full h-full text-center">
+      <div className="flex flex-col items-center w-[320px] h-[360px] absolute top-0 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

src/app/(root)/(routes)/notifications/components/notification-list-content/NotificationListContent.tsx

@@ -2,8 +2,8 @@
 
 import { Suspense, useState } from 'react'
 import { ErrorBoundary } from 'react-error-boundary'
-import Loading from '@/app/loading'
 import DefaultErrorTemplate from '@/components/domain/errors/DefaultErrorTemplate'
+import InfiniteScrollLoading from '@/components/domain/infinite-scroll-loading'
 import NotificationList from '../notification-list'
 import NotificationReadButton from '../notification-read-button'
 import NotificationStatusTabs from '../notification-status-tabs'
@@ -21,7 +21,7 @@ const NotificationListContent = () => {
           <DefaultErrorTemplate onClickButton={() => console.log('재시도')} />
         }
       >
-        <Suspense fallback={<Loading />}>
+        <Suspense fallback={<InfiniteScrollLoading />}>
           <NotificationList isRead={isRead} />
         </Suspense>
       </ErrorBoundary>

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

@@ -2,8 +2,8 @@
 
 import { Suspense, useState } from 'react'
 import { ErrorBoundary } from 'react-error-boundary'
-import Loading from '@/app/loading'
 import DefaultErrorTemplate from '@/components/domain/errors/DefaultErrorTemplate'
+import InfiniteScrollLoading from '@/components/domain/infinite-scroll-loading/InfiniteScrollLoading'
 import { DirectionType, SuggestionType } from '@/types/suggestion'
 import MySuggestionList from '../my-suggestion-list/MySuggestionList'
 import SuggestionStatusTabs from '../suggestion-status-tabs'
@@ -25,7 +25,7 @@ const MySuggestionListContent = () => {
           <DefaultErrorTemplate onClickButton={() => console.log('재시도')} />
         }
       >
-        <Suspense fallback={<Loading />}>
+        <Suspense fallback={<InfiniteScrollLoading />}>
           <MySuggestionList
             suggestionTypeState={suggestionTypeState}
             directionTypeState={directionTypeState}

src/app/@authModal/(...)login/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="z-50 flex-1 w-full h-full text-center">
+      <div className="flex flex-col items-center w-[320px] h-[360px] absolute top-0 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

src/app/loading.tsx

@@ -1,12 +1,12 @@
 'use client'
 
 import Lottie from 'react-lottie-player'
-import lottieJson from '../../public/loading.json'
+import lottieJson from '/public/loading.json'
 
 const Loading = () => {
   return (
-    <div className="w-full h-full text-center flex-1">
-      <div className="flex flex-col items-center w-[320px] h-[360px] absolute top-0 left-1/2 translate-y-[50%] translate-x-[-50%] ">
+    <div className="flex-1 w-full h-full text-center z-[100]">
+      <div className="flex z-[100] flex-col items-center w-[320px] h-[360px] absolute top-0 left-1/2 translate-y-[50%] translate-x-[-50%] ">
         <Lottie
           loop
           animationData={lottieJson}

src/components/domain/header/components/AvatarWithDropdown.tsx

@@ -21,6 +21,7 @@ const AvatarWithDropdown = ({ imageUrl }: { imageUrl?: string }) => {
 
   const onClickLogout = () => {
     Cookies.remove(Environment.tokenName())
+    Cookies.remove(Environment.refreshTokenName())
     apiClient.setDefaultHeader('Authorization', '')
     location.reload()
   }

src/components/domain/header/sections/RightSide.tsx

@@ -2,6 +2,7 @@
 
 import React from 'react'
 import Link from 'next/link'
+import { useRouter } from 'next/navigation'
 import Button from '@/components/ui/button'
 import AppPath from '@/config/appPath'
 import useNotificationCountQuery from '@/hooks/api/queries/useNotificationCountQuery'
@@ -33,17 +34,21 @@ type RightSideProps = {
 
 const RightSide = ({ isLoggedIn, currentUser }: RightSideProps) => {
   const { data } = useNotificationCountQuery({ isLoggedIn })
+  const router = useRouter()
 
   return isLoggedIn ? (
     <>
       <NotificationButton notificationCounts={data?.data.unReadCount ?? 0} />
       <AvatarWithDropdown imageUrl={currentUser?.imageUrl} />
     </>
   ) : (
-    <Button variant={'gradation'}>
-      <Link href={AppPath.login()} scroll={false}>
-        로그인
-      </Link>
+    <Button
+      variant={'gradation'}
+      onClick={() => {
+        router.push(AppPath.login(), { scroll: false })
+      }}
+    >
+      로그인
     </Button>
   )
 }

src/components/domain/infinite-scroll-loading/InfiniteScrollLoading.tsx

@@ -0,0 +1,16 @@
+import Lottie from 'react-lottie-player'
+import lottieJson from '/public/loading.json'
+
+const InfiniteScrollLoading = () => (
+  <Lottie
+    loop
+    animationData={lottieJson}
+    play
+    style={{
+      width: '100%',
+      height: '150px',
+    }}
+  />
+)
+
+export default InfiniteScrollLoading

src/components/domain/infinite-scroll-loading/index.tsx

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

src/types/declaration.d.ts

@@ -0,0 +1,4 @@
+declare module '*.json' {
+  const value: any
+  export default value
+}