[Enhancement] ProtectedRoute 컴포넌트 추가로 인증 가드 일관성 확보

[seorinn]

배경

인증이 필요한 페이지(/mypage, /edit/user 등)에 라우트 레벨 가드가 없습니다. 현재는 각 페이지 내부에서 모달로 차단하는 방식으로, 비로그인 유저가 URL을 직접 입력하면 페이지 일부가 노출됩니다.

현재 코드

// src/App.tsx - 모든 라우트가 동일한 레벨
<Routes>
  <Route path="/" element={<MainHome />} />
  <Route path="/mypage" element={<MyPage />} />         {/* 인증 필요 */}
  <Route path="/edit/user" element={<EditUserProfile />} /> {/* 인증 필요 */}
  <Route path="/edit/photographer" element={<EditPhotographerProfile />} /> {/* 인증 필요 */}
  <Route path="/*" element={<NotFoundPage />} />
</Routes>

개선 방향

// src/components/ProtectedRoute.tsx
function ProtectedRoute({ element }: { element: ReactNode }) {
  const token = localStorage.getItem("accessToken");
  return token ? <>{element}</> : <Navigate to="/" replace />;
}

// src/App.tsx
<Routes>
  <Route path="/" element={<MainHome />} />
  <Route path="/mypage" element={<ProtectedRoute element={<MyPage />} />} />
  <Route path="/edit/user" element={<ProtectedRoute element={<EditUserProfile />} />} />
  <Route path="/edit/photographer" element={<ProtectedRoute element={<EditPhotographerProfile />} />} />
  <Route path="/new-event" element={<ProtectedRoute element={<NewEvent />} />} />
  <Route path="/*" element={<NotFoundPage />} />
</Routes>

토큰을 localStorage에서 가져오는 방식은 토큰 보안 이슈(#13)와 함께 개선 필요

관련 파일

• src/App.tsx
• (신규) src/components/ProtectedRoute.tsx