Merge pull request #109 from Devminjeong-eum/fix/DEV-168

[DEV-168] 메인 로고 클릭시 트렌딩 페이지로 이동되도록 수정

Author: dotory0829

public/sw.js.map

@@ -4,14 +4,14 @@ import HomeToggleZone from './HomeToggleZone';
 import AllPosts from './all-posts';
 import useGetAllPosts from '@/hooks/query/useGetAllPosts';
 import TrendingPosts from './trending-posts';
-import useSyncURLWithState from '@/hooks/useSyncURLWithState';
+import useSyncURLHomeRouteState from '@/hooks/useSyncURLHomeRouteState';
 import { useCallback } from 'react';
 
 export type TrendingType = 'trend' | 'all';
 
 const HomeClientPage = () => {
   const { currentPage, setCurrentPage, isTrending, setIsTrending } =
-    useSyncURLWithState();
+    useSyncURLHomeRouteState();
   const { data: allPostsData } = useGetAllPosts(currentPage).data;
 
   const handleToggle = useCallback(
@@ -24,7 +24,6 @@ const HomeClientPage = () => {
   return (
     <main className="py-5 rounded-[24px] bg-[#FBFCFE] min-h-screen -mt-[20px] z-50 flex flex-col gap-[8px] px-5">
       <HomeToggleZone handleToggle={handleToggle} isTrending={isTrending} />
-
       {isTrending === 'trend' ? (
         <TrendingPosts />
       ) : (

src/components/pages/home/index.tsx

@@ -0,0 +1,36 @@
+import { type TrendingType } from '@/components/pages/home';
+import { useRouter, useSearchParams } from 'next/navigation';
+import { useEffect, useState } from 'react';
+
+const isTrendingType = (value: unknown): value is TrendingType => {
+  return value === 'trend' || value === 'all';
+};
+
+export default function useSyncURLHomeRouteState() {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const page = searchParams.get('page');
+  const view = searchParams.get('view');
+
+  const [currentPage, setCurrentPage] = useState(() => {
+    return page ? Number(page) : 1;
+  });
+
+  const [isTrending, setIsTrending] = useState<TrendingType>(() => {
+    return isTrendingType(view) ? view : 'trend';
+  });
+
+  useEffect(() => {
+    router.push(`/home?view=${isTrending}&page=${currentPage}`);
+  }, [currentPage, isTrending, router]);
+
+  useEffect(() => {
+    const nextPage = page ? Number(page) : 1;
+    const nextView: TrendingType = isTrendingType(view) ? view : 'trend';
+
+    setCurrentPage(nextPage);
+    setIsTrending(nextView);
+  }, [page, view]);
+
+  return { currentPage, setCurrentPage, isTrending, setIsTrending };
+}