[Fix/BAR-252] 메인 페이지의 type searchParam에 저장 (#80)

* fix: main 페이지의 type url에 저장

* refactor: 쿼리파람 tab으로 변경

middleware.ts

@@ -1,6 +1,7 @@
 import type { NextRequest } from 'next/server';
 import { NextResponse } from 'next/server';
 
+import { ROUTES } from '@constants/routes';
 import { STORAGE_KEY } from '@models/storage';
 
 export const middleware = async (request: NextRequest) => {
@@ -9,15 +10,17 @@ export const middleware = async (request: NextRequest) => {
   if (request.nextUrl.pathname.startsWith('/terms')) return;
 
   if (refreshToken?.value && request.nextUrl.pathname === '/') {
-    return NextResponse.redirect(new URL('/main', request.url));
+    return NextResponse.redirect(
+      new URL(`${ROUTES.MAIN}?tab=write`, request.url),
+    );
   }
 
   if (
     !refreshToken &&
     request.nextUrl.pathname !== '/' &&
     !request.nextUrl.pathname.startsWith('/redirect')
   ) {
-    return NextResponse.redirect(new URL('/', request.url));
+    return NextResponse.redirect(new URL(ROUTES.LANDING, request.url));
   }
 };
 

pages/main/index.tsx

@@ -1,8 +1,10 @@
-import { useEffect, useRef, useState } from 'react';
+import { useRouter, useSearchParams } from 'next/navigation';
+import { useEffect, useRef } from 'react';
 
 import WriteInput from '@components/Input/WriteInput';
 import Layout from '@components/Layout';
 import MainPageTab from '@components/Layout/MainPageTab';
+import { ROUTES } from '@constants/routes';
 import WriteGuide from '@domain/끄적이는/components/Guide';
 import TemporalMemoHistoryTable from '@domain/끄적이는/components/History';
 import TodayTemoralMemos from '@domain/끄적이는/components/Today';
@@ -16,6 +18,9 @@ import useGetMyProfile from '@queries/useGetMyProfile';
 import { COLORS } from '@styles/tokens';
 
 const MainPage = () => {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+
   useGetMyProfile();
 
   const writeContentRef = useRef<HTMLDivElement>(null);
@@ -24,7 +29,7 @@ const MainPage = () => {
   const { mutate: submitTemporalMemo } = useCreateTemporalMemo();
   const { data: memoFolders } = useGetMemoFolders();
 
-  const [selectedTab, setSelectedTab] = useState('끄적이는');
+  const selectedTab = searchParams.get('tab') || 'write';
 
   useEffect(() => {
     handleScroll();
@@ -37,7 +42,7 @@ const MainPage = () => {
   };
 
   const handleTabSelect = (selectedTab: string) => {
-    setSelectedTab(selectedTab);
+    router.push(`${ROUTES.MAIN}?tab=${selectedTab}`);
   };
 
   const handleSubmit = () => {
@@ -48,7 +53,7 @@ const MainPage = () => {
   };
 
   const backgroundColor =
-    selectedTab === '참고하는' ? COLORS['Grey/100'] : undefined;
+    selectedTab === 'refer' ? COLORS['Grey/100'] : undefined;
 
   return (
     <Layout backgroundColor={backgroundColor}>

pages/redirect/[authType]/index.tsx

@@ -31,7 +31,7 @@ const Bridge = () => {
       saveToken({ accessToken, refreshToken });
       localStorage.setItem(STORAGE_KEY.RECENT_LOGIN_TYPE, authType);
 
-      router.replace(ROUTES.MAIN);
+      router.replace(`${ROUTES.MAIN}?tab=write`);
     })();
   }, [router.query, router]);
 

src/components/Layout/MainPageTab.tsx

@@ -29,7 +29,7 @@ const MainPageTab = ({
           <Tooltip hasArrow>
             <Tooltip.Trigger>
               <Tabs.Trigger
-                value="끄적이는"
+                value="write"
                 icon={{ default: 'pencilDefault', active: 'pencilActive' }}
               >
                 끄적이는
@@ -40,7 +40,7 @@ const MainPageTab = ({
           <Tooltip hasArrow>
             <Tooltip.Trigger>
               <Tabs.Trigger
-                value="참고하는"
+                value="refer"
                 icon={{ default: 'templateDefault', active: 'templateActive' }}
               >
                 참고하는
@@ -52,8 +52,8 @@ const MainPageTab = ({
       </div>
 
       <section className={styles.tabWrapper}>
-        <Tabs.Content value="끄적이는">{write}</Tabs.Content>
-        <Tabs.Content value="참고하는">{refer}</Tabs.Content>
+        <Tabs.Content value="write">{write}</Tabs.Content>
+        <Tabs.Content value="refer">{refer}</Tabs.Content>
       </section>
     </Tabs>
   );

src/components/Layout/components/Header.tsx

@@ -23,7 +23,7 @@ const Header = ({ type }: HeaderProps) => {
   return (
     <header className={styles.header}>
       <Link
-        href={refreshToken ? ROUTES.MAIN : ROUTES.LANDING}
+        href={refreshToken ? `${ROUTES.MAIN}?tab=write` : ROUTES.LANDING}
         className={styles.logo}
       >
         <Logo />

src/domain/저장하는/components/NotFoundArchiveCard/index.tsx

@@ -18,7 +18,11 @@ const NotFoundArchiveCard = () => {
           자주 사용하는 글과 템플릿을 저장해보세요.
         </span>
       </div>
-      <Button state="enabled" size="M" onClick={() => router.push(ROUTES.MAIN)}>
+      <Button
+        state="enabled"
+        size="M"
+        onClick={() => router.push(`${ROUTES.MAIN}?tab=refer`)}
+      >
         문장 템플릿 보러가기
       </Button>
     </div>