Login (#20)

Author: Daniel-Na118

package-lock.json

@@ -13,9 +13,7 @@
     "check-all": "yarn check:types && yarn check:format && yarn check:unused"
   },
   "dependencies": {
-    "@react-oauth/google": "^0.13.4",
     "axios": "^1.13.2",
-    "jwt-decode": "^4.0.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "react-icons": "^5.5.0",

package.json

@@ -1,6 +1,44 @@
+// import { useEffect } from 'react';
+// import apiClient from './api';
+// import { getMe } from './api/auth';
+// import { userState } from './common/user';
 import Router from './router/Router';
 
 const App = () => {
+  /*
+  useEffect(() => {
+    const checkUser = async () => {
+      const searchParams = new URLSearchParams(window.location.search);
+      const urlToken = searchParams.get('token');
+
+      if (urlToken) {
+        localStorage.setItem('accessToken', urlToken);
+        apiClient.defaults.headers.common['Authorization'] =
+          `Bearer ${urlToken}`;
+        // Clean up the URL
+        window.history.replaceState({}, document.title, '/');
+      }
+
+      
+      const token = localStorage.getItem('accessToken');
+      if (token) {
+        apiClient.defaults.headers.common['Authorization'] = `Bearer ${token}`;
+        try {
+          const user = await getMe();
+          userState.isLoggedIn = true;
+          userState.email = user.email;
+          userState.nickname = user.username; // Changed from nickname to username
+          userState.profileImage = user.profileImageUrl; // Changed from profileImage to profileImageUrl
+        } catch (error) {
+          console.error('Failed to fetch user:', error);
+          localStorage.removeItem('accessToken');
+        }
+      }
+    };
+    checkUser();
+  }, []);
+  */
+
   return <Router />;
 };
 

src/App.tsx

@@ -0,0 +1,19 @@
+import apiClient from './index';
+
+// export interface User {
+//   email: string;
+//   username: string;
+//   profileImageUrl: string | null;
+//   role: 'USER';
+// }
+
+// export const getMe = async (): Promise<User> => {
+//   const response = await apiClient.get<User>('/user/profile');
+//   return response.data;
+// };
+
+export const logout = async () => {
+  await apiClient.post('/logout');
+  localStorage.removeItem('accessToken');
+  delete apiClient.defaults.headers.common['Authorization'];
+};

src/api/auth.ts

@@ -0,0 +1 @@
+export const BACKEND_URL = 'http://3.39.210.8.nip.io:8080';

src/api/constants.ts

@@ -0,0 +1,7 @@
+import axios from 'axios';
+
+const apiClient = axios.create({
+  baseURL: 'http://3.39.210.8.nip.io:8080',
+});
+
+export default apiClient;

src/api/index.ts

@@ -0,0 +1,24 @@
+import apiClient from './index';
+
+interface RoomCreationRequest {
+  departureId: number;
+  destinationId: number;
+  departureTime: string;
+  minCapacity: number;
+  maxCapacity: number;
+  estimatedFee: number;
+}
+
+interface RoomCreationResponse {
+  createdPotId: number;
+}
+
+export const createRoom = async (
+  roomDetails: RoomCreationRequest
+): Promise<RoomCreationResponse> => {
+  const response = await apiClient.post<RoomCreationResponse>(
+    '/room',
+    roomDetails
+  );
+  return response.data;
+};

src/api/room.ts

@@ -1,5 +1,8 @@
 import { FaComment, FaPlus, FaSearch, FaUser } from 'react-icons/fa';
 import { Link, useLocation } from 'react-router-dom';
+import { logout } from '../../api/auth';
+import { BACKEND_URL } from '../../api/constants';
+import { userState } from '../../common/user';
 import './navBar.css';
 
 const NavBar = () => {
@@ -19,6 +22,29 @@ const NavBar = () => {
     return location.pathname === path;
   };
 
+  const handleGoogleLogin = () => {
+    const frontendRedirectUri = window.location.origin;
+
+    const encodedUri = encodeURIComponent(frontendRedirectUri);
+    const googleLoginUrl = `${BACKEND_URL}/login?redirect_uri=${encodedUri}`;
+
+    window.location.href = googleLoginUrl;
+  };
+
+  const handleLogout = async () => {
+    try {
+      await logout();
+      userState.isLoggedIn = false;
+      userState.email = null;
+      userState.nickname = '학부생';
+      userState.profileImage = null;
+      localStorage.removeItem('accessToken');
+      window.location.href = '/';
+    } catch (error) {
+      console.error('Logout failed:', error);
+    }
+  };
+
   return (
     <div className="nav-wrapper">
       <nav className="navBar">
@@ -40,9 +66,23 @@ const NavBar = () => {
           ))}
         </div>
         <div className="login">
-          <Link to="/login" className="login-button">
-            로그인
-          </Link>
+          {userState.isLoggedIn ? (
+            <button
+              type="button"
+              onClick={handleLogout}
+              className="login-button"
+            >
+              로그아웃
+            </button>
+          ) : (
+            <button
+              type="button"
+              onClick={handleGoogleLogin}
+              className="login-button"
+            >
+              로그인
+            </button>
+          )}
         </div>
       </nav>
     </div>

src/components/NavBar/index.tsx

@@ -65,4 +65,9 @@
 .login-button {
   color: #333;
   text-decoration: none;
+  background: none;
+  border: none;
+  cursor: pointer;
+  font: inherit;
+  padding: 0;
 }

src/components/NavBar/navBar.css

@@ -1,60 +1,58 @@
-import axios from 'axios';
 import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { createRoom } from '../../api/room';
 import { userState } from '../../common/user';
 import './CreateRoom.css';
 
 const landmarks = ['서울대입구역', '낙성대역', '자연대', '행정관'];
 
 const CreateRoom = () => {
+  const navigate = useNavigate();
   const [start, setStart] = useState('');
   const [end, setEnd] = useState('');
-  const [dateTime, setDateTime] = useState('');
-  const [roomName, setRoomName] = useState('');
-  const [minParticipants, setMinParticipants] = useState(2);
+  const [departureTime, setDepartureTime] = useState('');
+  const [minCapacity, setMinCapacity] = useState(2);
 
-  const handleParticipantChange = (amount: number) => {
-    setMinParticipants((prev) => {
+  const handleCapacityChange = (amount: number) => {
+    setMinCapacity((prev) => {
       const newValue = prev + amount;
-      if (newValue >= 2 && newValue <= 4) {
+      if (newValue >= 1 && newValue <= 4) {
         return newValue;
       }
       return prev;
     });
   };
 
   const handleCreateRoom = async () => {
-    if (!start || !end || !dateTime || !roomName) {
+    // Adjusted validation
+    if (!start || !end || !departureTime || !minCapacity) {
       alert('모든 필드를 채워주세요.');
       return;
     }
 
-    // check for development
     if (!userState.isLoggedIn) {
       alert('로그인이 필요합니다.');
-      window.location.href = '/login';
+      window.location.href = '/';
       return;
     }
-    if (import.meta.env.DEV) {
-      userState.email = 'dev@snu.ac.kr';
-    }
+
+    const departureId = landmarks.indexOf(start) + 1;
+    const destinationId = landmarks.indexOf(end) + 1;
+
+    const departureTimeISO = new Date(departureTime).toISOString();
 
     try {
-      const response = await axios.post('/room', {
-        name: roomName,
-        from: start,
-        to: end,
-        time: dateTime,
-        minHeadcount: minParticipants,
-        user: userState.email, // Send user's email
+      await createRoom({
+        departureId,
+        destinationId,
+        departureTime: departureTimeISO,
+        minCapacity,
+        maxCapacity: 4,
+        estimatedFee: 0, // Hardcoded placeholder for estimatedFee
       });
 
-      if (response.status === 201 || response.status === 200) {
-        alert('방이 성공적으로 개설되었습니다!');
-        // Redirect to the new room's page?
-        // window.location.href = `/rooms/${response.data.roomId}`;
-      } else {
-        alert('방 개설에 실패했습니다.');
-      }
+      alert('방이 성공적으로 개설되었습니다!');
+      navigate('/search-room');
     } catch (error) {
       console.error('Error creating room:', error);
       alert('방 개설 중 오류가 발생했습니다.');
@@ -94,20 +92,8 @@ const CreateRoom = () => {
           <label>날짜 및 시간</label>
           <input
             type="datetime-local"
-            value={dateTime}
-            onChange={(e) => setDateTime(e.target.value)}
-          />
-        </div>
-      </div>
-
-      <div className="card">
-        <div className="input-group">
-          <label>방 이름</label>
-          <input
-            type="text"
-            placeholder="방 이름을 입력하세요"
-            value={roomName}
-            onChange={(e) => setRoomName(e.target.value)}
+            value={departureTime}
+            onChange={(e) => setDepartureTime(e.target.value)}
           />
         </div>
       </div>
@@ -116,9 +102,9 @@ const CreateRoom = () => {
         <div className="input-group">
           <label>최소 인원</label>
           <div className="participant-control">
-            <button onClick={() => handleParticipantChange(-1)}>-</button>
-            <span>{minParticipants}명</span>
-            <button onClick={() => handleParticipantChange(1)}>+</button>
+            <button onClick={() => handleCapacityChange(-1)}>-</button>
+            <span>{minCapacity}명</span>
+            <button onClick={() => handleCapacityChange(1)}>+</button>
           </div>
         </div>
       </div>