Merge pull request #12 from NewMillenniumWorkout/dev/backend-sync

[DEV] login 테스트 추가

package.json

@@ -12,6 +12,7 @@
     "@types/node": "^16.18.113",
     "@types/react": "^18.3.11",
     "@types/react-dom": "^18.3.0",
+    "axios": "^1.7.8",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "date-fns": "^3.6.0",

src/App.tsx

@@ -16,9 +16,12 @@ import { useEffect, useState } from "react";
 import { ChatPageProvider } from "./components/Chat/ChatPageContext";
 import EmotionSelectPage from "./components/EmotionSelect/EmotionSelectPage";
 import { EmotionSelectPageProvider } from "./components/EmotionSelect/EmotionSelectPageContext";
+import { DataProvider, useDataContext } from "./DataContext";
+import LoginPage from "./components/Login/LoginPage";
 
 function App() {
 	const location = useLocation();
+	const { userToken } = useDataContext();
 
 	useEffect(() => {
 		const updateVh = () => {
@@ -48,36 +51,55 @@ function App() {
 	}, []);
 
 	return (
-		<div className="flex h-screen-dynamic w-screen justify-center items-center bg-gray-200 flex-col">
-			<div className="relative flex flex-col h-screen-dynamic w-screen sm:max-w-[440px] sm:max-h-[940px] bg-white justify-center items-center">
-				<div className="relative flex-grow w-full h-full">
-					<Routes>
-						<Route path="/calendar" element={<CalendarPage />} />
-						<Route path="/chart" element={<ChartPage />} />
-						<Route path="/profile" element={<ProfilePage />} />
-					</Routes>
-					<FloatingActionButton />
+		<DataProvider>
+			<div className="flex h-screen-dynamic w-screen justify-center items-center bg-gray-200 flex-col">
+				<div className="relative flex flex-col h-screen-dynamic w-screen sm:max-w-[440px] sm:max-h-[940px] bg-white justify-center items-center">
+					{userToken === null ? (
+						<LoginPage />
+					) : (
+						<>
+							<div className="relative flex-grow w-full h-full">
+								<Routes>
+									<Route
+										path="/calendar"
+										element={<CalendarPage />}
+									/>
+									<Route
+										path="/chart"
+										element={<ChartPage />}
+									/>
+									<Route
+										path="/profile"
+										element={<ProfilePage />}
+									/>
+								</Routes>
+								<FloatingActionButton />
+							</div>
+							{location.pathname === "/chat" && (
+								<ChatPageProvider>
+									<ChatPage />
+								</ChatPageProvider>
+							)}
+							{location.pathname === "/emotion-select" && (
+								<EmotionSelectPageProvider>
+									<EmotionSelectPage />
+								</EmotionSelectPageProvider>
+							)}
+							<BottomAppBar />
+						</>
+					)}
 				</div>
-				{location.pathname === "/chat" && (
-					<ChatPageProvider>
-						<ChatPage />
-					</ChatPageProvider>
-				)}
-				{location.pathname === "/emotion-select" && (
-					<EmotionSelectPageProvider>
-						<EmotionSelectPage />
-					</EmotionSelectPageProvider>
-				)}
-				<BottomAppBar />
 			</div>
-		</div>
+		</DataProvider>
 	);
 }
 
 export default function WrappedApp() {
 	return (
 		<Router>
-			<App />
+			<DataProvider>
+				<App />
+			</DataProvider>
 		</Router>
 	);
 }

src/DataContext.tsx

@@ -0,0 +1,35 @@
+import React, { createContext, ReactNode, useContext, useState } from "react";
+
+interface DataContextType {
+	userToken: string | null;
+	setUserToken: React.Dispatch<React.SetStateAction<string | null>>;
+}
+
+const DataContext = createContext<DataContextType | undefined>(undefined);
+
+export const useDataContext = () => {
+	const context = useContext(DataContext);
+	if (!context) {
+		throw new Error("useDataContext must be used within DataProvider");
+	}
+	return context;
+};
+
+interface DataProviderProps {
+	children: ReactNode;
+}
+
+export const DataProvider: React.FC<DataProviderProps> = ({ children }) => {
+	const [userToken, setUserToken] = useState<string | null>(null);
+
+	return (
+		<DataContext.Provider
+			value={{
+				userToken,
+				setUserToken,
+			}}
+		>
+			{children}
+		</DataContext.Provider>
+	);
+};

src/components/Login/LoginPage.tsx

@@ -0,0 +1,57 @@
+import React, { useState } from "react";
+import IconButton from "../IconButton";
+import axios from "axios";
+import { IconProvider } from "../../utils/IconProvider";
+
+const LoginPage = () => {
+	const path = "http://10.210.60.64:7010";
+	const sendGetRequest = async () => {
+		try {
+			const response = await axios.get(`${path}/login/oauth2/code/naver`);
+
+			console.log("응답 데이터:", response.data);
+		} catch (error) {
+			console.error("API 요청 실패:", error);
+		}
+	};
+
+	return (
+		<div className="flex flex-col justify-center items-center w-full h-full p-8">
+			<div className="flex flex-col w-full space-y-2">
+				<button
+					className="bg-green-500 text-white w-full h-11 rounded-lg"
+					onClick={sendGetRequest}
+				>
+					네이버 로그인
+				</button>
+
+				<button className="bg-yellow-400 text-amber-950 w-full h-10 rounded-xl">
+					카카오 로그인
+				</button>
+
+				<button className="bg-white border-2 w-full h-10 rounded-xl">
+					구글 로그인
+				</button>
+			</div>
+		</div>
+	);
+};
+
+interface SocialLoginButtonProps {
+	handleLogin: () => void;
+}
+
+const SocialLoginButton: React.FC<SocialLoginButtonProps> = ({
+	handleLogin,
+}) => {
+	return (
+		<button
+			className="bg-green-500 text-white w-full h-11 rounded-lg"
+			onClick={handleLogin}
+		>
+			네이버 로그인
+		</button>
+	);
+};
+
+export default LoginPage;