🚚 merge develop (#155)

* ✨ 로딩 개선 (#154) * ✨ 로딩 개선 * 🎉 필터링 리스트 페이지 로딩 fallback 변경 --------- Co-authored-by: doggopawer <[email protected]> * 🎉 sitemap 및 robots 추가 (#156) --------- Co-authored-by: 정재희 <[email protected]>
team-nabi · Dec 2, 2023 · e23b71e · e23b71e
1 parent a222e0f
commit e23b71e
Show file tree

Hide file tree

Showing 18 changed files with 177 additions and 20 deletions.
diff --git a/src/app/(root)/(routes)/cards/[cardId]/modify/loading.tsx b/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
diff --git a/src/app/(root)/(routes)/cards/components/card-list-content/CardListContent.tsx b/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>

diff --git a/src/app/(root)/(routes)/cards/my/components/my-card-list-content/MyCardListContent.tsx b/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>

diff --git a/src/app/(root)/(routes)/chatrooms/[chatRoomId]/components/ChatList.tsx b/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>
     )

diff --git a/src/app/(root)/(routes)/chatrooms/[chatRoomId]/loading.tsx b/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

diff --git a/src/app/(root)/(routes)/mypage/loading.tsx b/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
diff --git a/...)/(routes)/notifications/components/notification-list-content/NotificationListContent.tsx b/...)/(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>

diff --git a/.../suggestions/[myCardId]/components/my-suggestion-list-content/MySuggestionListContent.tsx b/.../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}

diff --git a/src/app/@authModal/(...)login/loading.tsx b/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
diff --git a/src/app/loading.tsx b/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}

diff --git a/src/app/robots.ts b/src/app/robots.ts
@@ -0,0 +1,13 @@
+import type { MetadataRoute } from 'next'
+import { Environment } from '@/config/environment'
+
+export default function robots(): MetadataRoute.Robots {
+  return {
+    rules: {
+      userAgent: '*',
+      allow: '/',
+    },
+    sitemap: `${Environment.currentAddress()}/sitemap.xml`,
+    host: Environment.currentAddress(),
+  }
+}
diff --git a/src/app/sitemap.ts b/src/app/sitemap.ts
@@ -0,0 +1,12 @@
+import type { MetadataRoute } from 'next'
+import AppPath from '@/config/appPath'
+import { Environment } from '@/config/environment'
+
+export default function sitemap(): MetadataRoute.Sitemap {
+  const routes = Object.values(AppPath).map((route) => ({
+    url: `${Environment.currentAddress()}${route('' as never)}`,
+    lastModified: new Date().toISOString().split('T')[0],
+  }))
+
+  return [...routes]
+}
diff --git a/src/components/domain/header/components/AvatarWithDropdown.tsx b/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()
   }

diff --git a/src/components/domain/header/sections/RightSide.tsx b/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>
   )
 }

diff --git a/src/components/domain/infinite-scroll-loading/InfiniteScrollLoading.tsx b/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
diff --git a/src/components/domain/infinite-scroll-loading/index.tsx b/src/components/domain/infinite-scroll-loading/index.tsx
@@ -0,0 +1,3 @@
+import InfiniteScrollLoading from './InfiniteScrollLoading'
+
+export default InfiniteScrollLoading
diff --git a/src/types/declaration.d.ts b/src/types/declaration.d.ts
@@ -0,0 +1,4 @@
+declare module '*.json' {
+  const value: any
+  export default value
+}
diff --git a/src/types/metadata-interface.d.ts b/src/types/metadata-interface.d.ts
@@ -0,0 +1,31 @@
+type Robots = {
+  rules:
+    | {
+        userAgent?: string | string[]
+        allow?: string | string[]
+        disallow?: string | string[]
+        crawlDelay?: number
+      }
+    | Array<{
+        userAgent: string | string[]
+        allow?: string | string[]
+        disallow?: string | string[]
+        crawlDelay?: number
+      }>
+  sitemap?: string | string[]
+  host?: string
+}
+
+type Sitemap = Array<{
+  url: string
+  lastModified?: string | Date
+  changeFrequency?:
+    | 'always'
+    | 'hourly'
+    | 'daily'
+    | 'weekly'
+    | 'monthly'
+    | 'yearly'
+    | 'never'
+  priority?: number
+}>
-Original file line number
+Diff line change
@@ Expand Up / @@ -26,9 +26,6 @@ const ChatList = forwardRef<HTMLDivElement, ChatListProps>( @@
                 />
               )
             })}
-            {messages.length === 0 && (
-              <h1 className="text-red-500">채팅을 시작해보세요!</h1>
-            )}
             <div className="invisible" ref={ref} />
           </ul>
         )
@@ Expand Down @@
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import InfiniteScrollLoading from './InfiniteScrollLoading'

		export default InfiniteScrollLoading