diff --git a/package-lock.json b/package-lock.json
index d9e2f700f0999bf6cc4313a56b7fb75f079efc4b..671b1384fac341a78c5aacd043a28bde7cb447ed 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -30,7 +30,8 @@
"workbox-range-requests": "^6.6.0",
"workbox-routing": "^6.6.0",
"workbox-strategies": "^6.6.0",
- "workbox-streams": "^6.6.0"
+ "workbox-streams": "^6.6.0",
+ "zustand": "^5.0.2"
},
"devDependencies": {
"tailwindcss": "^3.4.15"
@@ -16441,6 +16442,34 @@
"funding": {
"url": "https://github.com/sponsors/sindresorhus"
}
+ },
+ "node_modules/zustand": {
+ "version": "5.0.2",
+ "resolved": "https://registry.npmjs.org/zustand/-/zustand-5.0.2.tgz",
+ "integrity": "sha512-8qNdnJVJlHlrKXi50LDqqUNmUbuBjoKLrYQBnoChIbVph7vni+sY+YpvdjXG9YLd/Bxr6scMcR+rm5H3aSqPaw==",
+ "engines": {
+ "node": ">=12.20.0"
+ },
+ "peerDependencies": {
+ "@types/react": ">=18.0.0",
+ "immer": ">=9.0.6",
+ "react": ">=18.0.0",
+ "use-sync-external-store": ">=1.2.0"
+ },
+ "peerDependenciesMeta": {
+ "@types/react": {
+ "optional": true
+ },
+ "immer": {
+ "optional": true
+ },
+ "react": {
+ "optional": true
+ },
+ "use-sync-external-store": {
+ "optional": true
+ }
+ }
}
}
}
diff --git a/package.json b/package.json
index 032f68fa9ef89e510c9866671e6153657088fa8c..a8aeba3db90e6f50697070e77ecf07e48459d6c1 100644
--- a/package.json
+++ b/package.json
@@ -25,7 +25,8 @@
"workbox-range-requests": "^6.6.0",
"workbox-routing": "^6.6.0",
"workbox-strategies": "^6.6.0",
- "workbox-streams": "^6.6.0"
+ "workbox-streams": "^6.6.0",
+ "zustand": "^5.0.2"
},
"scripts": {
"start": "react-scripts start",
diff --git a/src/App.js b/src/App.js
index 43a9c0d0a112c54c6efe32f76601e253004ffd16..af5e2cb370603b0c49f90b34f74755dacf59d445 100644
--- a/src/App.js
+++ b/src/App.js
@@ -2,7 +2,6 @@ import React from "react";
import "./styles/globals.css";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import LoginPage from "./pages/LoginPage";
-import SignupPage from "./pages/SignUpPage";
import HomePage from "./pages/HomePage";
import ChattingListPage from "./pages/Chatting/ChattingListPage";
import MyPage from "./pages/Mypage";
@@ -25,7 +24,6 @@ const App = () => {
<Route path="/chattinglist" element={<ChattingListPage />} />
<Route path="/mypage" element={<MyPage />} />
<Route path="/login" element={<LoginPage />} />
- <Route path="/signup" element={<SignupPage />} />
</Routes>
</BodyLayout>
<Footer />
diff --git a/src/api/auth.js b/src/api/auth.js
new file mode 100644
index 0000000000000000000000000000000000000000..df4042fded43f14a2b26a97b91014ada20b80025
--- /dev/null
+++ b/src/api/auth.js
@@ -0,0 +1,54 @@
+// src/api/auth.js
+
+/**
+ * Google 로그인 URL 반환
+ * @returns {string} 로그인 엔드포인트 URL
+ */
+export const getLoginUrl = () => {
+ return `${process.env.REACT_APP_BASE_URL}/api/auth/login`;
+};
+
+/**
+ * 로그아웃 API 호출
+ * @returns {Promise<void>}
+ */
+export const logout = async () => {
+ try {
+ const response = await fetch(
+ `${process.env.REACT_APP_BASE_URL}/api/auth/logout`,
+ {
+ method: "GET",
+ credentials: "include", // 세션 쿠키 포함
+ }
+ );
+ if (!response.ok) {
+ throw new Error("Failed to logout");
+ }
+ } catch (error) {
+ console.error("Error during logout:", error);
+ throw error;
+ }
+};
+
+/**
+ * 세션 정보 확인 API 호출
+ * @returns {Promise<Object|null>} 세션이 있으면 사용자 정보 반환, 없으면 null 반환
+ */
+export const getSessionInfo = async () => {
+ try {
+ const response = await fetch(
+ `${process.env.REACT_APP_BASE_URL}/api/session/info`,
+ {
+ method: "GET",
+ credentials: "include", // 세션 쿠키 포함
+ }
+ );
+ if (response.ok) {
+ return await response.json(); // 사용자 정보 반환
+ }
+ return null; // 세션 없음
+ } catch (error) {
+ console.error("Error checking session info:", error);
+ throw error;
+ }
+};
diff --git a/src/api/schedule.js b/src/api/schedule.js
index bb36ad460177c8fe5e8e0aaab245e4dcfd21a78e..c59a852d8b2972383ed8c9b1b2ca6dc002b23d18 100644
--- a/src/api/schedule.js
+++ b/src/api/schedule.js
@@ -1,5 +1,5 @@
// api.js
-const baseURL = process.env.REACT_APP_BACKEND_BASE_URL;
+const baseURL = process.env.REACT_APP_BASE_URL;
// Fetch all schedules
export const fetchAllSchedules = async () => {
diff --git a/src/components/icons/GoogleLogoIcon.jsx b/src/components/icons/GoogleLogoIcon.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..a28ef03b9403b35ff23c1096bbf9a038e47bf848
--- /dev/null
+++ b/src/components/icons/GoogleLogoIcon.jsx
@@ -0,0 +1,28 @@
+export default function GoogleLogo({ className, ...props }) {
+ return (
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ width="20"
+ height="20"
+ viewBox="0 0 20 20"
+ fill="none"
+ >
+ <path
+ d="M16.5883 17.58C18.951 15.3748 20.0011 11.6995 19.371 8.18164H9.97266V12.067H15.3281C15.1181 13.3271 14.3831 14.3772 13.333 15.0598L16.5883 17.58Z"
+ fill="#4285F4"
+ />
+ <path
+ d="M1.04688 14.4824C1.73758 15.843 2.72813 17.0291 3.94387 17.9512C5.15962 18.8733 6.56882 19.5074 8.06526 19.8056C9.5617 20.1039 11.1063 20.0586 12.5827 19.6731C14.0591 19.2876 15.4287 18.572 16.5883 17.5802L13.333 15.06C10.5502 16.8976 5.92982 16.2151 4.35467 11.9097L1.04688 14.4824Z"
+ fill="#34A853"
+ />
+ <path
+ d="M4.35584 11.9095C3.93581 10.5969 3.93581 9.38926 4.35584 8.07664L1.04804 5.50391C-0.159565 7.91912 -0.527099 11.3319 1.04804 14.4822L4.35584 11.9095Z"
+ fill="#FBBC02"
+ />
+ <path
+ d="M4.35467 8.07674C5.50978 4.45391 10.4452 2.35372 13.753 5.4515L16.6408 2.61624C12.5454 -1.32161 4.56469 -1.1641 1.04688 5.50401L4.35467 8.07674Z"
+ fill="#EA4335"
+ />
+ </svg>
+ );
+}
diff --git a/src/components/layout/HeaderLogoBar.jsx b/src/components/layout/HeaderLogoBar.jsx
index 0b8aef801a89cb09855afc002deaa5380165a417..4e08f2d392214ed7a1b08fd7d378b233d9c0a1a2 100644
--- a/src/components/layout/HeaderLogoBar.jsx
+++ b/src/components/layout/HeaderLogoBar.jsx
@@ -1,12 +1,24 @@
+import React from "react";
import LogoIcon from "../icons/LogoIcon";
+import useAuthStore from "../../store/authStore";
const HeaderLogoBar = () => {
+ const { user } = useAuthStore(); // Zustand에서 user 상태 가져오기
+
return (
- <div className="flex items-center justify-start w-full h-16 px-4 bg-white">
+ <div className="flex items-center justify-between w-full h-16 px-4 bg-white">
+ {/* 왼쪽: 로고와 앱 이름 */}
<div className="flex items-center">
<LogoIcon width={32} height={32} />
<span className="title-1">YANAWA</span>
</div>
+
+ {/* 오른쪽: 사용자 이름 */}
+ <div className="flex items-center">
+ <span className="text-gray-600 label-1">
+ {user ? `${user.name}` : "guest"} 님
+ </span>
+ </div>
</div>
);
};
diff --git a/src/components/layout/HeaderNav.jsx b/src/components/layout/HeaderNav.jsx
index e1d5d5d0752f038959b76dfb78d7b77e78e5d0c0..2dba5ad2a38664ba6d05d5462cd1f71d719c40fa 100644
--- a/src/components/layout/HeaderNav.jsx
+++ b/src/components/layout/HeaderNav.jsx
@@ -2,10 +2,12 @@ import React, { useState, useEffect } from "react";
import { useNavigate } from "react-router-dom";
import Button from "../Button";
import LogoIcon from "../icons/LogoIcon";
+import useAuthStore from "../../store/authStore";
export default function HeaderNav() {
const navigate = useNavigate();
const [isMobile, setIsMobile] = useState(false);
+ const { user } = useAuthStore(); // Zustand에서 user 상태 가져오기
useEffect(() => {
const checkMobile = () => setIsMobile(window.innerWidth <= 768);
@@ -18,6 +20,7 @@ export default function HeaderNav() {
const navigateToHome = () => navigate("/");
const navigateToChattingList = () => navigate("/chattinglist");
const navigateToLogin = () => navigate("/login");
+ const navigateToMyPage = () => navigate("/mypage");
return (
<header className="bg-white shadow-md">
@@ -47,20 +50,14 @@ export default function HeaderNav() {
size="icon"
theme="black"
icon={<LogoIcon fillColor="#ffffff" />}
- onClick={navigateToLogin}
+ onClick={user ? navigateToMyPage : navigateToLogin} // 조건부 이동
/>
</>
) : (
<>
- <Button
- size="icon"
- theme="pink"
- icon={<LogoIcon fillColor="#ffffff" />}
- onClick={navigateToHome}
- />
<Button
size="lg"
- theme="purple"
+ theme="pink"
icon={<LogoIcon fillColor="#ffffff" />}
onClick={navigateToHome}
>
@@ -68,7 +65,7 @@ export default function HeaderNav() {
</Button>
<Button
size="lg"
- theme="indigo"
+ theme="purple"
icon={<LogoIcon fillColor="#ffffff" />}
onClick={navigateToTimeTable}
>
@@ -82,14 +79,25 @@ export default function HeaderNav() {
>
번개채팅방
</Button>
- <Button
- size="lg"
- theme="black"
- icon={<LogoIcon fillColor="#ffffff" />}
- onClick={navigateToLogin}
- >
- 로그인
- </Button>
+ {user ? (
+ <Button
+ size="lg"
+ theme="black"
+ icon={<LogoIcon fillColor="#ffffff" />}
+ onClick={navigateToMyPage}
+ >
+ 마이페이지
+ </Button>
+ ) : (
+ <Button
+ size="lg"
+ theme="black"
+ icon={<LogoIcon fillColor="#ffffff" />}
+ onClick={navigateToLogin}
+ >
+ 로그인
+ </Button>
+ )}
</>
)}
</div>
diff --git a/src/pages/LoginPage.jsx b/src/pages/LoginPage.jsx
index f93bbc015c2dde93e0ad319604ba7eceed8a8bd2..00aa8837962405d7eda15644f267a4327879f71c 100644
--- a/src/pages/LoginPage.jsx
+++ b/src/pages/LoginPage.jsx
@@ -1,7 +1,92 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
+import GoogleLogo from "../components/icons/GoogleLogoIcon";
+import Button from "../components/Button";
+import { getLoginUrl } from "../api/auth";
+import useAuthStore from "../store/authStore";
const LoginPage = () => {
- return <></>;
+ const { user, fetchSession, logoutUser } = useAuthStore();
+ const [loading, setLoading] = useState(true);
+
+ // 페이지 로드 시 세션 확인
+ useEffect(() => {
+ const fetchSessionInfo = async () => {
+ setLoading(true);
+ try {
+ await fetchSession(); // 세션 정보 가져오기
+ } catch (error) {
+ console.error("Failed to fetch session info:", error);
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ fetchSessionInfo();
+ }, [fetchSession]);
+
+ // Google 로그인 처리
+ const handleGoogleLogin = () => {
+ const loginUrl = getLoginUrl(); // 로그인 URL 가져오기
+ window.location.href = loginUrl; // 리다이렉트
+ };
+
+ // 로그아웃 처리
+ const handleLogout = async () => {
+ try {
+ setLoading(true);
+ await logoutUser();
+ } catch (error) {
+ console.error("Failed to logout:", error);
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ if (loading) {
+ return (
+ <div className="flex items-center justify-center min-h-screen">
+ <p>Loading...</p>
+ </div>
+ );
+ }
+
+ if (user) {
+ return (
+ <div className="flex items-center justify-center min-h-screen p-4 bg-gray-100">
+ <div className="flex flex-col items-center justify-center min-w-[260px] w-1/2 max-w-md p-8 space-y-4 bg-white rounded-lg shadow-lg">
+ <div>
+ <h2 className="text-center heading-2">환영합니다!</h2>
+ <h2 className="text-center heading-1">
+ <span className="text-primary-500">{user.name}</span>님
+ </h2>
+ </div>
+ <p className="text-center text-gray-700">
+ <span className="text-primary-500 title-1">번개모임</span>을 생성해
+ 보세요!
+ </p>
+ <Button size="md" theme="black" onClick={handleLogout}>
+ 로그아웃
+ </Button>
+ </div>
+ </div>
+ );
+ }
+
+ return (
+ <div className="flex items-center justify-center min-h-screen p-4 bg-gray-100">
+ <div className="flex flex-col items-center min-w-[260px] justify-center w-1/2 max-w-md p-8 space-y-6 bg-white rounded-lg shadow-lg">
+ <h2 className="text-2xl font-bold text-center text-gray-900">로그인</h2>
+ <Button
+ size="md"
+ theme="white"
+ icon={<GoogleLogo />}
+ onClick={handleGoogleLogin}
+ >
+ 구글로 로그인
+ </Button>
+ </div>
+ </div>
+ );
};
export default LoginPage;
diff --git a/src/pages/SignUpPage.jsx b/src/pages/SignUpPage.jsx
deleted file mode 100644
index 4a4bbb513169e5f59948504ea1822233c3e45cc8..0000000000000000000000000000000000000000
--- a/src/pages/SignUpPage.jsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import React from "react";
-
-const SignupPage = () => {
- return <></>;
-};
-
-export default SignupPage;
diff --git a/src/store/authStore.js b/src/store/authStore.js
new file mode 100644
index 0000000000000000000000000000000000000000..1d1223be9a0c5fda04df8865f53e3e606e5a1cbd
--- /dev/null
+++ b/src/store/authStore.js
@@ -0,0 +1,30 @@
+import { create } from "zustand";
+import { getSessionInfo, logout } from "../api/auth";
+
+const useAuthStore = create((set) => ({
+ user: null, // 사용자 정보
+ // user: { name: "윤석찬", email: "ysc0731@ajou.ac.kr" }, // 사용자 정보
+
+ // 세션 정보 가져오기
+ fetchSession: async () => {
+ try {
+ const userInfo = await getSessionInfo();
+ set({ user: userInfo });
+ } catch (error) {
+ console.error("Failed to fetch session info:", error);
+ set({ user: null });
+ }
+ },
+
+ // 로그아웃 처리
+ logoutUser: async () => {
+ try {
+ await logout();
+ set({ user: null });
+ } catch (error) {
+ console.error("Failed to logout:", error);
+ }
+ },
+}));
+
+export default useAuthStore;