From 74bc05c1fde7f66dc6e9e58de54cb2ae415b3d83 Mon Sep 17 00:00:00 2001
From: jungmyunggi <jmk101711@yu.ac.kr>
Date: Fri, 7 Mar 2025 12:30:54 +0900
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat:=20=EC=B2=AB=20=EB=B0=A9?=
 =?UTF-8?q?=EB=AC=B8=20=EC=82=AC=EC=9A=A9=EC=9E=90=20about=ED=8E=98?=
 =?UTF-8?q?=EC=9D=B4=EC=A7=80=EB=A1=9C=20=EB=A6=AC=EB=8B=A4=EC=9D=B4?=
 =?UTF-8?q?=EB=A0=89=ED=8A=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/src/App.tsx                            |  9 ++++++--
 .../src/components/sections/MainContent.tsx   |  5 +++++
 client/src/store/useVisitStore.ts             | 21 +++++++++++++++++++
 3 files changed, 33 insertions(+), 2 deletions(-)
 create mode 100644 client/src/store/useVisitStore.ts

diff --git a/client/src/App.tsx b/client/src/App.tsx
index f21dc9ac..f28f2525 100644
--- a/client/src/App.tsx
+++ b/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}>
diff --git a/client/src/components/sections/MainContent.tsx b/client/src/components/sections/MainContent.tsx
index 2248ac6b..0d635d9f 100644
--- a/client/src/components/sections/MainContent.tsx
+++ b/client/src/components/sections/MainContent.tsx
@@ -1,3 +1,5 @@
+import { useEffect } from "react";
+
 import LatestSection from "@/components/sections/LatestSection";
 import TrandingSection from "@/components/sections/TrendingSection";
 
@@ -5,6 +7,9 @@ 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 />
diff --git a/client/src/store/useVisitStore.ts b/client/src/store/useVisitStore.ts
new file mode 100644
index 00000000..6da45a3a
--- /dev/null
+++ b/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),
+    }
+  )
+);