Skip to content

Commit f6441a5

Browse files
LJHCSLJHCS
authored
Update LoginSuccessPage.tsx
1 parent 1f72916 commit f6441a5

File tree

1 file changed

+112
-105
lines changed

1 file changed

+112
-105
lines changed

‎src/pages/LoginSuccessPage.tsx‎

Lines changed: 112 additions & 105 deletions
Original file line numberDiff line numberDiff line change
@@ -4,123 +4,130 @@ import { ROUTES } from "../router/routes";
44
import { useAuth } from "../stores/authStore";
55

66
const LoginSuccessPage = () => {
7-
const navigate = useNavigate();
8-
const [searchParams] = useSearchParams();
9-
const { handleOAuthCallback } = useAuth();
10-
const [status, setStatus] = useState<"processing" | "success" | "error">(
11-
"processing"
12-
);
13-
const [errorMessage, setErrorMessage] = useState("");
7+
  const navigate = useNavigate();
8+
  const [searchParams] = useSearchParams();
9+
  const { handleOAuthCallback } = useAuth();
10+
  const [status, setStatus] = useState<"processing" | "success" | "error">(
11+
    "processing"
12+
  );
13+
  const [errorMessage, setErrorMessage] = useState("");
1414

15-
useEffect(() => {
16-
const processOAuthCallback = async () => {
17-
try {
18-
const accessToken = searchParams.get("access");
19-
const userEncoded = searchParams.get("user");
15+
  useEffect(() => {
16+
    const processOAuthCallback = async () => {
17+
      try {
18+
        console.log("--- 1. OAuth 콜백 처리 시작 ---");
19+
20+
        const accessToken = searchParams.get("access");
21+
        const userEncoded = searchParams.get("user");
2022

21-
if (!accessToken || !userEncoded) {
22-
throw new Error("액세스 토큰 또는 사용자 정보가 없습니다.");
23-
}
23+
        if (!accessToken || !userEncoded) {
24+
          console.error("오류: URL에 토큰 또는 사용자 정보 파라미터가 누락됨.");
25+
          throw new Error("액세스 토큰 또는 사용자 정보가 없습니다.");
26+
        }
27+
28+
console.log("액세스 토큰 및 사용자 정보 파라미터 확인 완료.");
2429

25-
// ✅ user 디코딩
26-
const user = JSON.parse(decodeURIComponent(userEncoded));
30+
        const user = JSON.parse(decodeURIComponent(userEncoded));
31+
32+
console.log("사용자 정보 디코딩 및 파싱 성공:", user);
2733

28-
// ✅ AuthStore에 저장 (TokenStorage도 내부에서 자동 호출됨)
29-
await handleOAuthCallback(accessToken, user);
34+
console.log("--- 2. handleOAuthCallback 호출 (API/저장 로직 확인) ---");
35+
        await handleOAuthCallback(accessToken, user);
3036

31-
setStatus("success");
37+
console.log("--- 3. handleOAuthCallback 성공, 대시보드로 이동 준비 ---");
3238

33-
// ✅ /dashboard로 이동
34-
setTimeout(() => {
35-
navigate(ROUTES.DASHBOARD, { replace: true });
36-
}, 1000);
37-
} catch (err) {
38-
console.error("OAuth2 콜백 실패:", err);
39-
setErrorMessage("로그인 처리 중 오류가 발생했습니다.");
40-
setStatus("error");
39+
        setStatus("success");
4140

42-
setTimeout(() => navigate(ROUTES.LOGIN, { replace: true }), 3000);
43-
}
44-
};
41+
        setTimeout(() => {
42+
          navigate(ROUTES.DASHBOARD, { replace: true });
43+
        }, 1000);
44+
      } catch (err) {
45+
        console.error("OAuth2 콜백 실패:", err);
46+
        setErrorMessage("로그인 처리 중 오류가 발생했습니다.");
47+
        setStatus("error");
4548

46-
processOAuthCallback();
47-
}, [searchParams, navigate, handleOAuthCallback]);
49+
        setTimeout(() => navigate(ROUTES.LOGIN, { replace: true }), 3000);
50+
      }
51+
    };
4852

49-
// ✅ 이하 UI 코드는 그대로 유지
50-
if (status === "processing") {
51-
return (
52-
<div className="min-h-screen flex items-center justify-center bg-gray-50">
53-
<div className="text-center">
54-
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto mb-4"></div>
55-
<h2 className="text-xl font-semibold text-gray-900 mb-2">
56-
로그인 처리 중...
57-
</h2>
58-
<p className="text-gray-600">
59-
Google 로그인 정보를 확인하고 있습니다.
60-
</p>
61-
</div>
62-
</div>
63-
);
64-
}
53+
    processOAuthCallback();
54+
  }, [searchParams, navigate, handleOAuthCallback]);
6555

66-
if (status === "success") {
67-
return (
68-
<div className="min-h-screen flex items-center justify-center bg-gray-50">
69-
<div className="text-center">
70-
<div className="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
71-
<svg
72-
className="w-6 h-6 text-green-600"
73-
fill="none"
74-
stroke="currentColor"
75-
viewBox="0 0 24 24"
76-
>
77-
<path
78-
strokeLinecap="round"
79-
strokeLinejoin="round"
80-
strokeWidth={2}
81-
d="M5 13l4 4L19 7"
82-
/>
83-
</svg>
84-
</div>
85-
<h2 className="text-xl font-semibold text-gray-900 mb-2">
86-
로그인 성공!
87-
</h2>
88-
<p className="text-gray-600">대시보드로 이동하고 있습니다...</p>
89-
</div>
90-
</div>
91-
);
92-
}
56+
  if (status === "processing") {
57+
    return (
58+
      <div className="min-h-screen flex items-center justify-center bg-gray-50">
59+
        <div className="text-center">
60+
          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto mb-4"></div>
61+
          <h2 className="text-xl font-semibold text-gray-900 mb-2">
62+
            로그인 처리 중...
63+
          </h2>
64+
          <p className="text-gray-600">
65+
            Google 로그인 정보를 확인하고 있습니다.
66+
          </p>
67+
        </div>
68+
        <p className="text-sm text-gray-500 mt-4">콘솔 로그를 확인하세요.</p>
69+
      </div>
70+
    );
71+
  }
9372

94-
if (status === "error") {
95-
return (
96-
<div className="min-h-screen flex items-center justify-center bg-gray-50">
97-
<div className="text-center max-w-md mx-auto px-6">
98-
<div className="w-12 h-12 bg-red-100 rounded-full flex items-center justify-center mx-auto mb-4">
99-
<svg
100-
className="w-6 h-6 text-red-600"
101-
fill="none"
102-
stroke="currentColor"
103-
viewBox="0 0 24 24"
104-
>
105-
<path
106-
strokeLinecap="round"
107-
strokeLinejoin="round"
108-
strokeWidth={2}
109-
d="M6 18L18 6M6 6l12 12"
110-
/>
111-
</svg>
112-
</div>
113-
<h2 className="text-xl font-semibold text-gray-900 mb-2">
114-
로그인 처리 실패
115-
</h2>
116-
<p className="text-gray-600 mb-4">{errorMessage}</p>
117-
<p className="text-sm text-gray-500">로그인 페이지로 돌아갑니다...</p>
118-
</div>
119-
</div>
120-
);
121-
}
73+
  if (status === "success") {
74+
    return (
75+
      <div className="min-h-screen flex items-center justify-center bg-gray-50">
76+
        <div className="text-center">
77+
          <div className="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
78+
            <svg
79+
              className="w-6 h-6 text-green-600"
80+
              fill="none"
81+
              stroke="currentColor"
82+
              viewBox="0 0 24 24"
83+
            >
84+
              <path
85+
                strokeLinecap="round"
86+
                strokeLinejoin="round"
87+
                strokeWidth={2}
88+
                d="M5 13l4 4L19 7"
89+
              />
90+
            </svg>
91+
          </div>
92+
          <h2 className="text-xl font-semibold text-gray-900 mb-2">
93+
            로그인 성공!
94+
          </h2>
95+
          <p className="text-gray-600">대시보드로 이동하고 있습니다...</p>
96+
        </div>
97+
      </div>
98+
    );
99+
  }
122100

123-
return null;
101+
  if (status === "error") {
102+
    return (
103+
      <div className="min-h-screen flex items-center justify-center bg-gray-50">
104+
        <div className="text-center max-w-md mx-auto px-6">
105+
          <div className="w-12 h-12 bg-red-100 rounded-full flex items-center justify-center mx-auto mb-4">
106+
            <svg
107+
              className="w-6 h-6 text-red-600"
108+
              fill="none"
109+
              stroke="currentColor"
110+
              viewBox="0 0 24 24"
111+
            >
112+
              <path
113+
                strokeLinecap="round"
114+
                strokeLinejoin="round"
115+
                strokeWidth={2}
116+
                d="M6 18L18 6M6 6l12 12"
117+
              />
118+
            </svg>
119+
          </div>
120+
          <h2 className="text-xl font-semibold text-gray-900 mb-2">
121+
            로그인 처리 실패
122+
          </h2>
123+
          <p className="text-gray-600 mb-4">{errorMessage}</p>
124+
          <p className="text-sm text-gray-500">로그인 페이지로 돌아갑니다...</p>
125+
        </div>
126+
      </div>
127+
    );
128+
  }
129+
130+
  return null;
124131
};
125132

126133
export default LoginSuccessPage;

0 commit comments

Comments
 (0)