커피챗 생성 페이지 개선(main)

package.json

@@ -23,6 +23,7 @@
     "@radix-ui/react-select": "^2.0.0",
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-switch": "^1.0.3",
+    "@radix-ui/react-tabs": "^1.0.4",
     "@sentry/nextjs": "^7.101.1",
     "@stomp/stompjs": "^7.0.0",
     "@tailwindcss/container-queries": "^0.1.1",

src/app/chat/_components/guard-page/create-chat/Forbidden.tsx

@@ -0,0 +1,16 @@
+"use client"
+
+import Mentee from "@/components/shared/animation/Mentee"
+
+function CreateChatForbidden() {
+  return (
+    <div className="text-center">
+      <div className="w-[400px] min-h-[266px] m-auto mt-[100px]">
+        <Mentee />
+      </div>
+      <div className="text-xl">멘토에게만 허용된 기능입니다.</div>
+    </div>
+  )
+}
+
+export default CreateChatForbidden

src/app/chat/_components/guard-page/create-chat/Unauthorized.tsx

@@ -0,0 +1,25 @@
+"use client"
+
+import Mentee from "@/components/shared/animation/Mentee"
+import notificationMessage from "@/constants/message/notification"
+import { useClientSession } from "@/hooks/useClientSession"
+import { useEffect } from "react"
+
+function CreateChatPageUnauthorized() {
+  const { clientSessionReset } = useClientSession()
+
+  useEffect(() => {
+    clientSessionReset()
+  }, []) /* eslint-disable-line */
+
+  return (
+    <div className="text-center">
+      <div className="w-[400px] min-h-[266px] m-auto mt-[100px]">
+        <Mentee />
+      </div>
+      <div className="text-xl">{notificationMessage.unauthorized}.</div>
+    </div>
+  )
+}
+
+export default CreateChatPageUnauthorized

src/app/chat/create/page.tsx

@@ -1,9 +1,9 @@
-import Mentee from "@/components/shared/animation/Mentee"
-import notificationMessage from "@/constants/message/notification"
 import CreateCoffeeChatReservationPage from "@/page/coffee-chat/create/CreateCoffeeChatReservationPage"
 import { getServerSession } from "@/util/auth"
 import { Metadata } from "next"
 import { notFound } from "next/navigation"
+import CreateChatPageUnauthorized from "../_components/guard-page/create-chat/Unauthorized"
+import CreateChatForbidden from "../_components/guard-page/create-chat/Forbidden"
 
 export const metadata: Metadata = {
   title: `커피챗 생성`,
@@ -29,31 +29,16 @@ export const metadata: Metadata = {
   },
 }
 
-export default async function CreateCoffeeChatPage() {
+export default function CreateCoffeeChatPage() {
   const { user } = getServerSession()
 
-  // [TODO]
   try {
     if (!user) {
-      return (
-        <div className="text-center">
-          <div className="w-[400px] m-auto mt-[100px]">
-            <Mentee />
-          </div>
-          <div className="text-xl">{notificationMessage.unauthorized}.</div>
-        </div>
-      )
+      return <CreateChatPageUnauthorized />
     }
 
     if (!user.roles.includes("ROLE_MENTOR")) {
-      return (
-        <div className="text-center">
-          <div className="w-[400px] m-auto mt-[100px]">
-            <Mentee />
-          </div>
-          <div className="text-xl">멘토에게만 허용된 기능입니다.</div>
-        </div>
-      )
+      return <CreateChatForbidden />
     }
 
     return <CreateCoffeeChatReservationPage />

src/app/globals.css

@@ -14,6 +14,7 @@
     --colors-success: #198754;
     --colors-info: #ecf5ff;
     --colors-danger: #dc3545;
+    --colors-light-green: #eaf7f0;
     --bg-socialKakao: #fae500;
     --bg-socialGoogle: #f8f8f8;
     --bg-socialGithub: #3c4043;

src/components/LinkToListPage.tsx

@@ -0,0 +1,58 @@
+"use client"
+
+import { getHistorySessionPath } from "@/util/historySession/path"
+import { useRouter } from "next/navigation"
+import { DirectionIcons } from "./icons/Icons"
+
+export type TargetPage = "qna" | "chat"
+
+interface LinkToListPageProps {
+  to: TargetPage
+}
+
+const initialPath: Record<TargetPage, string> = {
+  qna: "/qna?page=0",
+  chat: "/chat?page=0",
+} as const
+
+const targetPathname: Record<TargetPage, string> = {
+  qna: "/qna",
+  chat: "/chat",
+} as const
+
+function LinkToListPage({ to }: LinkToListPageProps) {
+  const { push } = useRouter()
+
+  const viewList = () => {
+    const historySession = getHistorySessionPath()
+
+    if (!historySession) {
+      push(initialPath[to])
+      return
+    }
+
+    const prevURL = new URL(
+      historySession.prevPath ?? "/",
+      process.env.NEXT_PUBLIC_SITE_URL,
+    )
+
+    if (!prevURL.pathname.startsWith(targetPathname[to])) {
+      push(initialPath[to])
+      return
+    }
+
+    push(`${targetPathname[to]}?${prevURL.searchParams.toString()}`)
+  }
+
+  return (
+    <div
+      className="inline-flex align-top gap-1 items-center p-1 cursor-pointer"
+      onClick={viewList}
+    >
+      <DirectionIcons.LeftLine className="text-[28px] text-[#828282]" />
+      <span className="font-semibold text-[#828282]">목록 보기</span>
+    </div>
+  )
+}
+
+export default LinkToListPage

src/components/form/LoginForm.tsx

@@ -21,6 +21,7 @@ import type { LoginFormData } from "@/interfaces/form"
 import { useRouter } from "next/navigation"
 import PasswordFieldController from "../form-fields/login/password/PasswordFieldController"
 import EmailFieldController from "../form-fields/login/email/EmailFieldController"
+import { useQueryClient } from "@tanstack/react-query"
 
 export interface LoginFormProps {
   onSuccess?: (user: NonNullable<SessionPayload>) => void
@@ -30,6 +31,8 @@ export interface LoginFormProps {
 function LoginForm({ onSuccess, continueURL }: LoginFormProps) {
   const { replace, push } = useRouter()
 
+  const queryClient = useQueryClient()
+
   const {
     handleSubmit,
     control,
@@ -90,6 +93,12 @@ function LoginForm({ onSuccess, continueURL }: LoginFormProps) {
         return
       }
 
+      queryClient.invalidateQueries({
+        predicate(query) {
+          return true
+        },
+      })
+
       await revalidatePage("*")
 
       closeModal()

src/components/layout/header/Header.tsx

@@ -11,9 +11,9 @@ import {
 import LogoWithRowText from "@/components/icons/LogoWithRowText"
 import MobileArea from "./area/mobileArea"
 import Area from "./area"
-import LinkToQnaList from "@/page/qna-detail/components/LinkToQnaList"
 import { twMerge } from "tailwind-merge"
-import { isQuestionDetailPage } from "@/util/historySession/path"
+import { pathnameOfBack } from "@/util/historySession/path"
+import LinkToListPage from "@/components/LinkToListPage"
 
 function Header() {
   const currentSegment = useSelectedLayoutSegment()
@@ -28,20 +28,20 @@ function Header() {
 
   const open = matchedLayout ? matchedLayout.containLayout.header : true
 
-  const isQuestionDetail = isQuestionDetailPage(pathname)
+  const targetPage = pathnameOfBack(pathname)
 
   const logoClassNames = twMerge([
-    isQuestionDetail
+    targetPage
       ? "pointer-events-none absolute left-0 top-0 w-full h-full flex justify-center items-center sm:pointer-events-auto sm:static sm:left-[unset] sm:top-[unset] sm:w-auto"
       : "flex justify-center items-center",
   ])
 
   return open ? (
     <header className="bg-white h-16 p-2 sticky top-0 border-b border-b-colorsGray z-header">
       <Inner className="flex justify-between items-center h-full">
-        {isQuestionDetail ? (
+        {targetPage ? (
           <div className="block sm:hidden [&_span]:hidden [&_svg]:text-xl">
-            <LinkToQnaList />
+            <LinkToListPage to={targetPage} />
           </div>
         ) : null}
         {/* logo - click: move Home */}

src/components/layout/header/UserArea.tsx

@@ -14,6 +14,7 @@ import { getAuthCookie } from "@/util/actions/cookie"
 import { revalidatePage } from "@/util/actions/revalidatePage"
 import type { LoginUserPayload } from "@/interfaces/dto/auth/login.dto"
 import Alerm from "./alerm/Alerm"
+import { useQueryClient } from "@tanstack/react-query"
 // import DeleteMemberModal from "@/app/profile/[id]/_components/deleteMember/DeleteMemberModal"
 
 type ProfileDropdownMenu = {
@@ -58,6 +59,7 @@ function NotLoginedUserArea() {
 }
 
 function LoginedUserArea({ user }: { user: LoginUserPayload }) {
+  const queryClient = useQueryClient()
   const { clientSessionLogout } = useClientSession()
 
   const DropDownMenu = () => {
@@ -79,6 +81,11 @@ function LoginedUserArea({ user }: { user: LoginUserPayload }) {
             }
             await clientSessionLogout()
 
+            queryClient.invalidateQueries({
+              predicate(query) {
+                return true
+              },
+            })
             revalidatePage("*")
 
             setTimeout(() => {

src/components/layout/header/area/mobileArea/menu/Navigation.tsx

@@ -17,6 +17,8 @@ import { toast } from "react-toastify"
 import AlermNavItem from "./AlermNavItem"
 import { useSetRecoilState } from "recoil"
 import { HeaderMobileMenuOpenAtom } from "@/recoil/atoms/menu/headerMenu"
+import { useQueryClient } from "@tanstack/react-query"
+import queryKey from "@/constants/queryKey"
 
 function MobileMenuNavigation() {
   const currentSegment = useSelectedLayoutSegment()
@@ -91,6 +93,7 @@ function MobileMenuNavigation() {
 export default MobileMenuNavigation
 
 const AuthButton = () => {
+  const queryClient = useQueryClient()
   const { user, clientSessionLogout } = useClientSession()
 
   const { openModal, closeModal } = useModal()
@@ -109,6 +112,18 @@ const AuthButton = () => {
       }
       await clientSessionLogout()
 
+      queryClient.invalidateQueries({
+        predicate(query) {
+          if (
+            query.queryKey.toString() ===
+            [queryKey.myChatReservation].toString()
+          ) {
+            return true
+          }
+
+          return false
+        },
+      })
       revalidatePage("*")
 
       setTimeout(() => {

src/components/layout/navigation/NavigationTab.tsx

@@ -1,13 +1,14 @@
 "use client"
 
+import LinkToListPage from "@/components/LinkToListPage"
 import Tab from "@/components/shared/tab/Tab"
 import {
   getActiveNavigationItem,
   navigationRoutes,
   profileRoute,
 } from "@/constants/navigationRoute"
 import { useClientSession } from "@/hooks/useClientSession"
-import LinkToQnaList from "@/page/qna-detail/components/LinkToQnaList"
+import { pathnameOfBack } from "@/util/historySession/path"
 import Link from "next/link"
 import {
   useParams,
@@ -29,7 +30,7 @@ function NavigationTab({ hasHeader }: NavigationTabProps) {
   const params = useParams()
 
   const wrapperClassNames = twMerge([
-    "sticky w-full top-[--height-header] z-navigation bg-white hidden tabletDevice:block pc:hidden overflow-auto [&::-webkit-scrollbar]:w-0 [&::-webkit-scrollbar]:h-0 border-b border-colorsGray",
+    "sticky w-full top-[--height-header] z-navigation bg-white hidden sm:block pc:hidden overflow-auto [&::-webkit-scrollbar]:w-0 [&::-webkit-scrollbar]:h-0 border-b border-colorsGray",
     !hasHeader && "top-0",
   ])
 
@@ -65,13 +66,13 @@ function NavigationTab({ hasHeader }: NavigationTabProps) {
 
   const renderTabs = [...navigationRouteTabs, ...profileRouteTabs]
 
-  const isQuestionDetailPage = /^\/question\/[0-9]+$/g.test(pathname)
+  const targetPage = pathnameOfBack(pathname)
 
   return (
     <nav className={wrapperClassNames}>
-      {isQuestionDetailPage ? (
+      {targetPage ? (
         <div className="absolute left-0 top-0 h-full flex items-center text-xs [&_svg]:text-xl">
-          <LinkToQnaList />
+          <LinkToListPage to={targetPage} />
         </div>
       ) : null}
       <Tab