From d08be0bc00e1fad47908e88a97b5b5ad94b78715 Mon Sep 17 00:00:00 2001
From: Minsoo Park <sparkm0128@gmail.com>
Date: Fri, 9 Feb 2024 15:57:51 +0900
Subject: [PATCH] =?UTF-8?q?[NO-ISSUE]=20Fix:=20=ED=83=AD=20=EC=9D=B4?=
 =?UTF-8?q?=EB=8F=99=20=EC=8B=9C=EB=9D=BC=EC=9A=B0=ED=8C=85=20=EC=A0=81?=
 =?UTF-8?q?=EC=9A=A9=20=EB=B0=8F=20=EC=83=88=EB=A1=9C=EA=B3=A0=EC=B9=A8=20?=
 =?UTF-8?q?=EC=8B=9C=20=ED=83=AD=20=EC=9C=A0=EC=A7=80=20=EA=B5=AC=ED=98=84?=
 =?UTF-8?q?=20(#139)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/MainPage.fallback.tsx       |  2 +-
 src/pages/MainPage.tsx                | 21 ++++++++++++++++++---
 src/pages/MyActivityPage.fallback.tsx |  2 +-
 src/pages/MyActivityPage.tsx          | 21 ++++++++++++++++++---
 4 files changed, 38 insertions(+), 8 deletions(-)

diff --git a/src/pages/MainPage.fallback.tsx b/src/pages/MainPage.fallback.tsx
index 315b649..1c23970 100644
--- 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
index f1af6cb..cc3a9c0 100644
--- 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
index 181da0b..3d45e6e 100644
--- 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
index 9b6e48e..954b963 100644
--- 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) })}>
               받은 떡국 재료