miniproject - 영화페이지 보완하기 (로그인 한 유저는 로그인, 회원가입에 접근 할 수 없게)

머리는 뜯고 있지만, 사고는 긍정적으로..

 

---

1. 이런 문제가 있더라.

로그인 한 유저가 url에 login이나, join 이런걸 입력 할 경우 접근 가능한..

??

 

해결 하는 방법은, 

 

로그인 하지 않은 유저가 mypage에 접근 하는걸 막는 원리랑 같다.

역으로 로직을 이해하면 된다.

 

정확해!! 👏👏
너무 잘 이해했어.
**<LoginRoute>는 일종의 "역방향 ProtectedRoute"**라고 보면 돼.

---

🔐 일반적인 ProtectedRoute

로그인 안 한 사람은 못 들어오게 막는 거야.

const ProtectedRoute = ({ children }) => {
  const { loggedIn } = useUser();

  if (!loggedIn) {
    return <Navigate to="/login" replace />;
  }

  return children;
};

이건 예: 마이페이지, 유저 설정 페이지 같은 데 쓰이겠지.

<Route path="/mypage" element={<ProtectedRoute><MyPage /></ProtectedRoute>} />

---

🚫 LoginRoute

로그인 한 사람은 못 들어오게 막는 거야.
예: 로그인, 회원가입, 비번찾기 페이지

const LoginRoute = ({ children }) => {
  const { loggedIn } = useUser();

  if (loggedIn) {
    return <Navigate to="/mypage" replace />;
  }

  return children;
};

 

예를 들어 다음과 같은 코드가 있다.

const LoginRoute = ({ children }) => {
  const { loggedIn } = useUser();

  if (loggedIn) {
    return <Navigate to="/mypage" replace />;
  }

  return children;
};

로그인 한 사람이라면, 강제로 mypage로 보내버리는 거다. 

 

사용은, 

<Route path="/login" element={<LoginRoute><LoginPage /></LoginRoute>} />

이렇게 한다.

 

그리고, 그 <LoginRoute>안에는 다 원하는 페이지를 다 넣을 수 있는데

<LoginRoute> 안에는 몇 개든 원하는 컴포넌트나 페이지를 넣을 수 있어, 단 로그인한 사용자가 보면 안 되는 페이지여야 해.

---

 예를 들어서

<Route
  path="/login"
  element={
    <LoginRoute>
      <LoginPage />
    </LoginRoute>
  }
/>

<Route
  path="/signup"
  element={
    <LoginRoute>
      <SignupPage />
    </LoginRoute>
  }
/>

<Route
  path="/find-password"
  element={
    <LoginRoute>
      <FindPasswordPage />
    </LoginRoute>
  }
/>

이렇게 하면:

• 로그인 안 한 사용자만 이 페이지들을 볼 수 있고,
• 로그인한 사용자가 /login, /signup, /find-password 같은 URL로 접근하면 → 자동으로 /mypage로 리다이렉트돼요.

---

하나로 묶을 순 없을까?

<LoginRoute>가 하나의 wrapper 역할이니까,
children 안에 여러 컴포넌트를 직접 나열하는 방식은 안 돼요. (React Router에서는 페이지 단위로 라우팅을 하니까.)

하지만 공통된 보호 로직을 공유하는 의미로는 LoginRoute를 여러 곳에 재사용하면 돼요.
→ 즉, "몇 개든 적용 가능"하지만 "한 번에 여러 페이지를 한 라우트에 넣는 건 아님."

---

 핵심 요약

• ✅ <LoginRoute>는 로그인한 사용자에게 숨기고 싶은 페이지를 보호하는 wrapper. 껍데기 ! 
• ✅ 여러 페이지에 각각 <LoginRoute>를 씌워서 재사용하면 돼.
• ❌ <LoginRoute> 하나 안에 여러 페이지를 "동시에" 넣는 건 라우팅 구조상 불가능 (각 페이지는 각자의 Route에서 설정해야 함).

---

사실 "라우트 그룹화는 가능"해.
앞서 언급한 건 한 <Route> 태그 안에 여러 경로를 넣는 건 안 된다는 의미였고,
여러 라우트를 구조적으로 묶어서 관리하는 건 충분히 가능해!

---

예시: 로그인 관련 라우트들을 그룹으로 묶기

<Route element={<LoginRoute />}>
  <Route path="/login" element={<LoginPage />} />
  <Route path="/signup" element={<SignupPage />} />
  <Route path="/find-password" element={<FindPasswordPage />} />
</Route>

🔍 어떻게 동작하냐면:

이렇게 하면 /login, /signup, /find-password에 접근할 때
공통적으로 <LoginRoute>의 로직을 먼저 거치게 돼!

그리고 그 안에서 로그인한 사용자인지 확인하고,
→ 로그인한 유저는 /mypage로 리디렉션,
→ 아닌 유저는 해당 페이지 보여줌.

---

 이를 위한 LoginRoute 구조는 이렇게 바꿔야 해:

// LoginRoute.jsx
import { Navigate, Outlet } from "react-router-dom";
import { useUser } from "../hooks/useUser";

const LoginRoute = () => {
  const { loggedIn } = useUser();

  if (loggedIn) {
    return <Navigate to="/mypage" replace />;
  }

  return <Outlet />; // 여기서 하위 route들을 렌더링
};

export default LoginRoute;

• Outlet은 "이 위치에 자식 라우트 페이지를 보여줘" 라는 의미야.