✨ feat: 첫 방문 사용자 about페이지로 리다이렉트

client/src/App.tsx

@@ -1,5 +1,5 @@
 import { lazy, Suspense, useEffect } from "react";
-import { Routes, Route, useLocation } from "react-router-dom";
+import { Routes, Route, useLocation, Navigate } from "react-router-dom";
 
 import PostDetail from "@/components/common/Card/PostDetail";
 import { Toaster } from "@/components/ui/toaster";
@@ -15,6 +15,7 @@ import { useMediaQuery } from "@/hooks/common/useMediaQuery";
 import { denamuAscii } from "@/constants/denamuAscii";
 
 import { useMediaStore } from "@/store/useMediaStore";
+import { useVisitStore } from "@/store/useVisitStore";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 
@@ -27,6 +28,7 @@ const queryClient = new QueryClient();
 export default function App() {
   const setIsMobile = useMediaStore((state) => state.setIsMobile);
   const isMobile = useMediaQuery("(max-width: 767px)");
+  const { hasVisited, setVisited } = useVisitStore();
   const location = useLocation();
   const state =
     location.state && location.state.backgroundLocation
@@ -46,7 +48,10 @@ export default function App() {
   useEffect(() => {
     setIsMobile(isMobile);
   }, [isMobile]);
-
+  if (!hasVisited) {
+    setVisited();
+    return <Navigate to="/about" replace />;
+  }
   return (
     <QueryClientProvider client={queryClient}>
       <Routes location={state?.backgroundLocation || location}>

client/src/components/sections/MainContent.tsx

@@ -1,10 +1,15 @@
+import { useEffect } from "react";
+
 import LatestSection from "@/components/sections/LatestSection";
 import TrandingSection from "@/components/sections/TrendingSection";
 
 import { useMediaStore } from "@/store/useMediaStore";
 
 export default function MainContent() {
   const isMobile = useMediaStore((state) => state.isMobile);
+  useEffect(() => {
+    window.scrollTo(0, 0);
+  }, []);
   return (
     <div className="flex flex-col px-4 md:p-8 md:gap-8">
       <TrandingSection />

client/src/store/useVisitStore.ts

@@ -0,0 +1,21 @@
+import { create } from "zustand";
+
+import { persist, createJSONStorage } from "zustand/middleware";
+
+interface VisitState {
+  hasVisited: boolean;
+  setVisited: () => void;
+}
+
+export const useVisitStore = create<VisitState>()(
+  persist(
+    (set) => ({
+      hasVisited: false,
+      setVisited: () => set({ hasVisited: true }),
+    }),
+    {
+      name: "visit-flag",
+      storage: createJSONStorage(() => localStorage),
+    }
+  )
+);