Protected route 설정 / MyPage 이메일 변경칸 삭제

src/App.tsx

@@ -15,7 +15,7 @@ import PostWrite from "./pages/Post/PostWritePage.tsx";
 import PostSuccess from "./pages/Post/PostSuccess.tsx";
 import RandomFeedPage from "./pages/RandomFeedPage.tsx";
 import LuckyDrawPage from "./pages/LuckyDrawPage.tsx";
-import  MyPageLayout  from "./pages/MyPage/MyPageLayout.tsx";
+import MyPageLayout from "./pages/MyPage/MyPageLayout.tsx";
 import PostDetailPage from "./pages/Post/PostDetailPage.tsx";
 import FavoriteFeedPage from "./pages/FavoriteFeedPage.tsx";
 import CategoryFeedPage from "./pages/CategoryFeedPage.tsx";
@@ -31,6 +31,8 @@ import FindPasswordPage from "./pages/FindPasswordPage.tsx";
 import SetNewPassWordPage from "./pages/SetNewPasswordPage.tsx";
 import PostEditPage from "./pages/Post/PostEditPage.tsx";
 
+import { ProtectedRoute } from "./components/ProtectedRoute.tsx";
+
 //로그인 구현 필요 없이 들어가는 페이지 라우터
 const publicRoutes: RouteObject[] = [
   {
@@ -46,7 +48,6 @@ const publicRoutes: RouteObject[] = [
         path: "login",
         element: <LoginPage />,
       },
-      //TODO: login 사항 없도록 라우터 분리
       {
         path: "terms1",
         element: <ServiceTerm />,
@@ -59,18 +60,17 @@ const publicRoutes: RouteObject[] = [
         path: "terms3",
         element: <MarketingTerm />,
       },
-      /////////////////////////
       {
         path: "signup",
         element: <SignUpPage />,
       },
       {
         path: "find-password",
-        element: <FindPasswordPage />
+        element: <FindPasswordPage />,
       },
       {
         path: "set-password",
-        element: <SetNewPassWordPage />
+        element: <SetNewPassWordPage />,
       },
       {
         path: "search",
@@ -98,7 +98,11 @@ const publicRoutes: RouteObject[] = [
       },
       {
         path: "my-profile",
-        element: <MyPageLayout />,
+        element: (
+          <ProtectedRoute>
+            <MyPageLayout />
+          </ProtectedRoute>
+        ),
         children: [
           { index: true, element: <Navigate to="profile" replace /> },
           { path: "profile", element: <ProfileEditPage /> },
@@ -111,22 +115,38 @@ const publicRoutes: RouteObject[] = [
         path: "*",
         element: <ErrorPage />,
       },
+      // 로그인이 필요한 PostPage들
       {
         path: "post",
-        element: <PostWrite />,
+        element: (
+          <ProtectedRoute>
+            <PostWrite />
+          </ProtectedRoute>
+        ),
       },
       {
         path: "posts/edit/:postId",
-        element: <PostEditPage />
+        element: (
+          <ProtectedRoute>
+            <PostEditPage />
+          </ProtectedRoute>
+        ),
       },
 
       {
         path: "post/success",
-        element: <PostSuccess />,
+        element: (
+          <ProtectedRoute>
+            <PostSuccess />
+          </ProtectedRoute>
+        ),
       },
+      // 게시글 상세는 로그인안해도 볼 수 있도록? 
       {
         path: "posts/:postId",
-        element: <PostDetailPage />,
+        element: (
+            <PostDetailPage />
+        ),
       },
     ],
   },
@@ -145,9 +165,9 @@ function App() {
   return (
     <>
       <AuthProvider>
-      {/* <QueryClientProvider client={queryClient} */}
+        {/* <QueryClientProvider client={queryClient} */}
         <RouterProvider router={router} />
-      {/* </QueryClientProvider> */}
+        {/* </QueryClientProvider> */}
       </AuthProvider>
     </>
   );

src/apis/mypage.ts

@@ -41,7 +41,6 @@ export const editMyProfile = async ({
       "Content-Type": "multipart/form-data",
     },
   });
-
   return data;
 };
 

src/components/ProtectedRoute.tsx

@@ -0,0 +1,15 @@
+import { Navigate } from "react-router-dom";
+import { useAuth } from "../context/AuthContext";
+
+export const ProtectedRoute = ({ children }: { children: React.ReactNode }) => {
+  const { isAuthenticated, isLoading } = useAuth();
+
+  if (isLoading) return <div>로딩 중...</div>;
+
+  if (!isAuthenticated) {
+    alert("로그인이 필요한 서비스입니다.");
+    return <Navigate to="/login" replace />;
+  }
+
+  return <>{children}</>;
+};

src/hooks/post/usePostDetail.ts

@@ -1,12 +1,15 @@
 import { useEffect, useState } from "react";
 import { getPostDetail } from "../../apis/Post/getPostDetail";
 import { PostDetailResponse } from "../../types/post";
+import { useNavigate } from "react-router-dom";
 
 export const usePostDetail = (postId: number) => {
   const [data, setData] = useState<PostDetailResponse | null>(null);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<unknown>(null);
 
+  const navigate = useNavigate();
+
   useEffect(() => {
     if (!postId) return;
 
@@ -18,8 +21,19 @@ export const usePostDetail = (postId: number) => {
         setError(null);
         const result = await getPostDetail(postId);
         if (mounted) setData(result);
-      } catch (e) {
-        if (mounted) setError(e);
+      } catch (e: any) {
+        if (!mounted) return;
+
+        // 에러 분기 처리
+        const status = e?.response?.status || e?.status;
+
+        if (status === 403) {
+          alert("로그인이 필요합니다");
+          navigate("/login");
+          return; // 에러 상태를 굳이 set 하지 않고 종료 가능
+        }
+
+        setError(e);
       } finally {
         if (mounted) setLoading(false);
       }

src/pages/MyPage/MyPageLayout.tsx

@@ -3,7 +3,7 @@ import  MyPageSidebar  from "../../components/MyPage/EditProfilePage/MyPageSideb
 
 export default function MyPageLayout() {
   return (
-    <div className="">
+    <div className="w-full">
       <h1 className="text-xl font-semibold mb-6">마이 페이지</h1>
 
       <div className="flex gap-[1.88rem]">

src/pages/MyPage/ProfileEditPage.tsx

@@ -5,7 +5,7 @@ import type { GetMyProfileResponse } from "../../types/MyPage";
 
 import ProfileAvatarSection from "../../components/MyPage/EditProfilePage/ProfileAvatarSection";
 import NicknameField from "../../components/MyPage/EditProfilePage/NicknameField";
-import EmailField from "../../components/MyPage/EditProfilePage/EmailField";
+// import EmailField from "../../components/MyPage/EditProfilePage/EmailField";
 import ProfileSaveSection from "../../components/MyPage/EditProfilePage/ProfileSaveSection";
 
 const ProfileEditPage = () => {
@@ -20,15 +20,15 @@ const ProfileEditPage = () => {
 
   // 폼 상태
   const [userName, setUserName] = useState("");
-  const [emailDraft, setEmailDraft] = useState(""); // 아직 저장 로직 없음
+  // const [emailDraft, setEmailDraft] = useState(""); // 아직 저장 로직 없음
   const [file, setFile] = useState<File | null>(null);
   const [previewUrl, setPreviewUrl] = useState<string | null>(null);
 
   // 조회 성공 시 초기값 세팅
   useEffect(() => {
     if (!profile) return;
     setUserName(profile.userName ?? "");
-    setEmailDraft(profile.email ?? "");
+    // setEmailDraft(profile.email ?? "");
     // 이미지 preview는 "선택한 파일"이 우선이라, 여기서 previewUrl은 건드리지 않음
   }, [profile?.userName, profile?.email]); // profile 전체 의존성 걸면 불필요 렌더 가능
 
@@ -107,7 +107,7 @@ const ProfileEditPage = () => {
 
     <NicknameField value={userName} onChange={setUserName} />
 
-    <EmailField value={emailDraft} onChange={setEmailDraft} />
+    {/* <EmailField value={emailDraft} onChange={setEmailDraft} /> */}
 
     <ProfileSaveSection
       onSave={onSave}

src/pages/Post/PostDetailPage.tsx

@@ -121,9 +121,7 @@ export default function PostDetailPage() {
       <div className="py-10 text-center text-[#b2b2b2]">불러오는 중...</div>
     );
   if (error || !data || !stageMap)
-    return (
-      <div className="py-10 text-center text-[#b2b2b2]">불러오기 실패</div>
-    );
+    return;
 
   return (
     <div className="w-full flex flex-col px-[3.63rem] gap-[2.5rem]">