[NO-ISSUE] Fix: 탭 이동 시라우팅 적용 및 새로고침 시 탭 유지 구현 (#139)

tteokguk-please · Feb 9, 2024 · d08be0b · d08be0b
1 parent 42b65eb
commit d08be0b
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 8 deletions.
diff --git a/src/pages/MainPage.fallback.tsx b/src/pages/MainPage.fallback.tsx
@@ -17,7 +17,7 @@ const MainPageFallback = () => {
           </Link>
         </Header>
         <div className={styles.tabContainer}>
-          <Tabs selectedIndex={0}>
+          <Tabs selectedIndex={0} onSelect={() => {}}>
             <TabList className={styles.tabList}>
               <Tab className={styles.selectedTab}>새로운 떡국</Tab>
               <Tab>완성된 떡국</Tab>

diff --git a/src/pages/MainPage.tsx b/src/pages/MainPage.tsx
@@ -1,5 +1,6 @@
-import { useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { Tab, Tabs, TabList, TabPanel } from "react-tabs";
+import { useSearchParams } from "react-router-dom";
 
 import classNames from "classnames";
 import { useAtomValue } from "jotai";
@@ -20,7 +21,12 @@ import HeaderLogo from "@/assets/svg/header-logo.svg";
 import Loading from "@/components/common/Loading";
 
 const MainPage = () => {
-  const [tabIndex, setTabIndex] = useState(0);
+  const tabParams = ["new", "complete"];
+
+  const [searchParams, setSearchParams] = useSearchParams();
+  const tabParam = searchParams.get("tab") ?? "";
+  const tabIndexByParam = tabParams.indexOf(tabParam);
+  const [tabIndex, setTabIndex] = useState(tabIndexByParam === -1 ? 0 : tabIndexByParam);
   const isSelectedTab = (index: number) => index === tabIndex;
   const fetchMoreRef = useRef(null);
 
@@ -33,11 +39,20 @@ const MainPage = () => {
     }
   };
 
+  const handleSelectTab = (index: number) => {
+    setSearchParams({ tab: tabParams[index] });
+    setTabIndex(index);
+  };
+
   useIntersectionObserver({
     target: fetchMoreRef,
     handleIntersect,
   });
 
+  useEffect(() => {
+    setTabIndex(tabIndexByParam === -1 ? 0 : tabIndexByParam);
+  }, [tabIndexByParam, setTabIndex]);
+
   if (!tteokguks || isError) {
     return <ErrorFallbackPage retry={refetch} />;
   }
@@ -51,7 +66,7 @@ const MainPage = () => {
       </Header>
       <div className={styles.container}>
         <>
-          <Tabs selectedIndex={tabIndex} onSelect={(index: number) => setTabIndex(index)}>
+          <Tabs selectedIndex={tabIndex} onSelect={handleSelectTab}>
             <TabList className={styles.tabList}>
               <Tab className={classNames(styles.tab, { [styles.selectedTab]: isSelectedTab(0) })}>
                 새로운 떡국

diff --git a/src/pages/MyActivityPage.fallback.tsx b/src/pages/MyActivityPage.fallback.tsx
@@ -11,7 +11,7 @@ const MyActivityPageFallback = () => {
       <main className={styles.main}>
         <Header showBackButton>활동 내역</Header>
         <div className={styles.tabContainer}>
-          <Tabs selectedIndex={0}>
+          <Tabs selectedIndex={0} onSelect={() => {}}>
             <TabList className={styles.tabList}>
               <Tab className={styles.selectedTab}>받은 떡국 재료</Tab>
               <Tab>내가 응원한 떡국</Tab>

diff --git a/src/pages/MyActivityPage.tsx b/src/pages/MyActivityPage.tsx
@@ -1,5 +1,6 @@
-import { Fragment, useRef, useState } from "react";
+import { Fragment, useEffect, useRef, useState } from "react";
 import { Tab, Tabs, TabList, TabPanel } from "react-tabs";
+import { useSearchParams } from "react-router-dom";
 
 import classNames from "classnames";
 import { useAtomValue } from "jotai";
@@ -15,7 +16,12 @@ import Loading from "@/components/common/Loading";
 import MySupportedTteokgukCardList from "@/components/MyActivity/MySupportedTteokgukCardList";
 
 const MyActivityPage = () => {
-  const [tabIndex, setTabIndex] = useState(0);
+  const tabParams = ["ingredient", "support"];
+
+  const [searchParams, setSearchParams] = useSearchParams();
+  const tabParam = searchParams.get("tab") ?? "";
+  const tabIndexByParam = tabParams.indexOf(tabParam);
+  const [tabIndex, setTabIndex] = useState(tabIndexByParam === -1 ? 0 : tabIndexByParam);
   const isSelectedTab = (index: number) => index === tabIndex;
   const {
     mySupportedTteokguks,
@@ -36,6 +42,11 @@ const MyActivityPage = () => {
   const isFetchingNextPage =
     isReceivedTteokgukFetchingNextPage || isMySupportedTteokgukFetchingNextPage;
 
+  const handleSelectTab = (index: number) => {
+    setSearchParams({ tab: tabParams[index] });
+    setTabIndex(index);
+  };
+
   useIntersectionObserver({
     target: fetchMoreRef,
     handleIntersect:
@@ -44,11 +55,15 @@ const MyActivityPage = () => {
         : () => handleSupportedTtoekguksIntersect({ enabled: isSelectedTab(1) }),
   });
 
+  useEffect(() => {
+    setTabIndex(tabIndexByParam === -1 ? 0 : tabIndexByParam);
+  }, [tabIndexByParam, setTabIndex]);
+
   return (
     <Fragment>
       <Header showBackButton>활동 내역</Header>
       <div className={styles.container}>
-        <Tabs selectedIndex={tabIndex} onSelect={(index) => setTabIndex(index)}>
+        <Tabs selectedIndex={tabIndex} onSelect={handleSelectTab}>
           <TabList className={styles.tabList}>
             <Tab className={classNames(styles.tab, { [styles.selectedTab]: isSelectedTab(0) })}>
               받은 떡국 재료