From 1a2dcbbcbec6a7449488441fc65c802a9375538b Mon Sep 17 00:00:00 2001
From: Park Shinhyung <23102009@seoultech.ac.kr>
Date: Wed, 18 Jun 2025 08:11:06 +0900
Subject: [PATCH 1/2] feat: modify building name

---
 back/timetables.json         | 8 ++++----
 front/public/timetables.json | 8 ++++----
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/back/timetables.json b/back/timetables.json
index 08333ae..90954ff 100644
--- a/back/timetables.json
+++ b/back/timetables.json
@@ -2963,7 +2963,7 @@
       {
         "subject": "Chemical Engineering Capstone Design(1)",
         "time": "Thu(10 ~ 12)",
-        "room": "Changjo Hall (Graduate School)(008)-202"
+        "room": "Changjo Hall(008)-202"
       },
       {
         "subject": "Nano Materials",
@@ -3265,12 +3265,12 @@
       {
         "subject": "Food Microbiology and Fermentation Laboratory",
         "time": "Mon(1 ~ 4)",
-        "room": "Changjo Hall (Graduate School)(008)-206"
+        "room": "Changjo Hall(008)-206"
       },
       {
         "subject": "Food Microbiology and Fermentation Laboratory",
         "time": "Mon(6 ~ 9)",
-        "room": "Changjo Hall (Graduate School)(008)-206"
+        "room": "Changjo Hall(008)-206"
       },
       {
         "subject": "Co-peratiove Education Program(3)",
@@ -3350,7 +3350,7 @@
       {
         "subject": "Food Biochemistry Laboratory",
         "time": "Wed(6 ~ 9)",
-        "room": "Changjo Hall (Graduate School)(008)-101"
+        "room": "Changjo Hall(008)-101"
       },
       {
         "subject": "Food Process Engineering 2",
diff --git a/front/public/timetables.json b/front/public/timetables.json
index 08333ae..90954ff 100644
--- a/front/public/timetables.json
+++ b/front/public/timetables.json
@@ -2963,7 +2963,7 @@
       {
         "subject": "Chemical Engineering Capstone Design(1)",
         "time": "Thu(10 ~ 12)",
-        "room": "Changjo Hall (Graduate School)(008)-202"
+        "room": "Changjo Hall(008)-202"
       },
       {
         "subject": "Nano Materials",
@@ -3265,12 +3265,12 @@
       {
         "subject": "Food Microbiology and Fermentation Laboratory",
         "time": "Mon(1 ~ 4)",
-        "room": "Changjo Hall (Graduate School)(008)-206"
+        "room": "Changjo Hall(008)-206"
       },
       {
         "subject": "Food Microbiology and Fermentation Laboratory",
         "time": "Mon(6 ~ 9)",
-        "room": "Changjo Hall (Graduate School)(008)-206"
+        "room": "Changjo Hall(008)-206"
       },
       {
         "subject": "Co-peratiove Education Program(3)",
@@ -3350,7 +3350,7 @@
       {
         "subject": "Food Biochemistry Laboratory",
         "time": "Wed(6 ~ 9)",
-        "room": "Changjo Hall (Graduate School)(008)-101"
+        "room": "Changjo Hall(008)-101"
       },
       {
         "subject": "Food Process Engineering 2",

From b6f29a9692ae686f40d32706b77fc475078554c0 Mon Sep 17 00:00:00 2001
From: Park Shinhyung <23102009@seoultech.ac.kr>
Date: Wed, 18 Jun 2025 08:16:23 +0900
Subject: [PATCH 2/2] feat: modify error code

---
 front/src/components/BuildingCard.js    |   2 +-
 front/src/components/Header.js          |   4 +-
 front/src/components/HotspotCard.js     |   2 -
 front/src/components/PurposeModal.js    |   2 +-
 front/src/components/RoomSelectModal.js |   1 -
 front/src/pages/HotspotPage.js          |  42 ++-----
 front/src/pages/LoginPage.js            |  39 ++++---
 front/src/pages/MyReservationPage.js    |  55 +++------
 front/src/pages/ProfilePage.js          | 140 +++++++++++-----------
 front/src/pages/ReservePage.js          | 148 ++++++++++++------------
 front/src/pages/SignupPage.js           |  35 +++---
 11 files changed, 208 insertions(+), 262 deletions(-)

diff --git a/front/src/components/BuildingCard.js b/front/src/components/BuildingCard.js
index f7ac383..a40d4fb 100644
--- a/front/src/components/BuildingCard.js
+++ b/front/src/components/BuildingCard.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import '../styles/ReservePage.css'; // ReservePage와 동일한 스타일 사용
+import '../styles/ReservePage.css'; 
 import FavoriteButton from './FavoriteButton';
 
 const BuildingCard = ({
diff --git a/front/src/components/Header.js b/front/src/components/Header.js
index 2ed9013..3540097 100644
--- a/front/src/components/Header.js
+++ b/front/src/components/Header.js
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import logo from '../assets/starlogo.png';
-import '../styles/Header.css'; // CSS 분리 후 import
+import '../styles/Header.css'; 
 
 const Header = () => {
   const navigate = useNavigate();
@@ -25,7 +25,7 @@ const Header = () => {
         onClick={() => navigate('/')}
       />
 
-      {/* 모바일 ☰  메뉴 */}
+      {/* mobile ☰  menu */}
       <div className="menu" onClick={() => setMenuOpen(!menuOpen)}>☰</div>
 
       <nav className={`nav ${menuOpen ? 'open' : ''}`}>
diff --git a/front/src/components/HotspotCard.js b/front/src/components/HotspotCard.js
index 5bbdb25..9e0f5fe 100644
--- a/front/src/components/HotspotCard.js
+++ b/front/src/components/HotspotCard.js
@@ -1,11 +1,9 @@
-// src/components/HotspotCard.js
 import React from 'react';
 import '../styles/HotspotCard.css';
 
 const HotspotCard = ({ rank, building, onReserveClick }) => {
   const rankLabel = ['1st', '2nd', '3rd'][rank - 1];
 
-  // 등수에 따라 클래스 이름 분기
   const rankClass =
     rank === 1 ? 'first' :
     rank === 2 ? 'second' :
diff --git a/front/src/components/PurposeModal.js b/front/src/components/PurposeModal.js
index e5b416f..4607cfd 100644
--- a/front/src/components/PurposeModal.js
+++ b/front/src/components/PurposeModal.js
@@ -12,7 +12,7 @@ const PurposeModal = ({ onClose, onSubmit }) => {
     }
 
     onSubmit({
-      peopleCount: Number(peopleCount), // 숫자로 백엔드에 전송
+      peopleCount: Number(peopleCount), 
       purpose,
     });
 
diff --git a/front/src/components/RoomSelectModal.js b/front/src/components/RoomSelectModal.js
index 273e18a..cb815e6 100644
--- a/front/src/components/RoomSelectModal.js
+++ b/front/src/components/RoomSelectModal.js
@@ -1,4 +1,3 @@
-// src/components/RoomSelectModal.js
 import React from 'react';
 import Modal from './Modal';
 
diff --git a/front/src/pages/HotspotPage.js b/front/src/pages/HotspotPage.js
index 6bb39d3..d16bc9e 100644
--- a/front/src/pages/HotspotPage.js
+++ b/front/src/pages/HotspotPage.js
@@ -30,6 +30,7 @@ const HotspotPage = () => {
   const fetchData = async (category) => {
     try {
       let response;
+
       if (category === 'Auditorium Size / Large Hall') {
         response = await axios.get('https://star-isih.onrender.com/api/analytics/popular-buildings/by-large-group');
       } else if (category === 'Study Friendly') {
@@ -57,27 +58,8 @@ const HotspotPage = () => {
 
       setHotspots(matched);
     } catch (err) {
-      console.error('🔥 Fallback to mock data due to error:', err);
-      setHotspots([
-        {
-          id: '32',
-          rank: 1,
-          name: 'Frontier Hall',
-          image: getBuildingImage('32'),
-        },
-        {
-          id: '2',
-          rank: 2,
-          name: 'Dasan Hall',
-          image: getBuildingImage('2'),
-        },
-        {
-          id: '2',
-          rank: 3,
-          name: 'Dasan Hall',
-          image: getBuildingImage('2'),
-        },
-      ]);
+      console.error('[Hotspot Fetch Error] Failed to load hotspot data:', err);
+      setHotspots([]); // fallback 제거: 빈 배열로 처리
     }
   };
 
@@ -90,7 +72,7 @@ const HotspotPage = () => {
       const res = await axios.get(`https://star-isih.onrender.com/api/buildings/rooms?buildingNo=${building.id}`);
       const availableRooms = res.data.rooms.map(room => ({
         room: `Room ${room}`,
-        time: '8:00 - 17:50',
+        time: '08:00 - 17:50',
       }));
 
       setModalBuilding({
@@ -100,18 +82,8 @@ const HotspotPage = () => {
         availableRooms,
       });
     } catch (err) {
-      console.error('Failed to fetch rooms:', err);
-      const mockRooms = [
-        { room: 'Room 101', time: '08:00 - 09:50' },
-        { room: 'Room 202', time: '10:00 - 11:50' },
-      ];
-
-      setModalBuilding({
-        id: building.id,
-        name: building.name,
-        image: building.image,
-        availableRooms: mockRooms,
-      });
+      console.error('[Room Fetch Error] Failed to fetch available rooms:', err);
+      alert('Failed to load available rooms. Please try again later.');
     }
   };
 
@@ -169,4 +141,4 @@ const HotspotPage = () => {
   );
 };
 
-export default HotspotPage;
\ No newline at end of file
+export default HotspotPage;
diff --git a/front/src/pages/LoginPage.js b/front/src/pages/LoginPage.js
index c5dbeb8..c3a0321 100644
--- a/front/src/pages/LoginPage.js
+++ b/front/src/pages/LoginPage.js
@@ -10,6 +10,7 @@ import signstudentnumber from '../assets/signprofile.png';
 const LoginPage = () => {
   const navigate = useNavigate();
   const [form, setForm] = useState({ studentNumber: '', password: '' });
+  const [errorMessage, setErrorMessage] = useState('');
 
   const handleChange = (e) => {
     setForm({ ...form, [e.target.name]: e.target.value });
@@ -20,27 +21,28 @@ const LoginPage = () => {
       const res = await axios.post('https://star-isih.onrender.com/api/users/login', form);
       localStorage.setItem('token', res.data.token);
       localStorage.setItem('user', JSON.stringify(res.data.user));
-      navigate('/'); // ✅ 메인 페이지로 이동
+      navigate('/'); // ✅ redirect to main
     } catch (err) {
-      console.warn('⚠️ 백엔드 로그인 실패 - mock 처리로 우회');
+      console.error('[Login Error]', err);
 
-      const mockUser = {
-        name: '테스트유저',
-        studentNumber: form.studentNumber || '23100000',
-        major: 'ITM',
-        favorites: ['프론티어관', '다산관'],
-      };
-
-      localStorage.setItem('token', 'mock-token');
-      localStorage.setItem('user', JSON.stringify(mockUser));
-      alert('⚠️ 서버 미연결 상태 - mock 로그인 처리됨');
-      navigate('/');
+      if (err.response) {
+        if (err.response.status === 400) {
+          setErrorMessage('User not found. Please check your student number.');
+        } else if (err.response.status === 401) {
+          setErrorMessage('Incorrect password. Please try again.');
+        } else {
+          setErrorMessage('Login failed. Please try again later.');
+        }
+      } else {
+        setErrorMessage('Network error. Please check your internet connection.');
+      }
     }
   };
 
   const handleSubmit = (e) => {
-    e.preventDefault(); // ⛔ 새로고침 방지
-    handleLogin();      // ✅ 로그인 실행
+    e.preventDefault();
+    setErrorMessage('');
+    handleLogin();
   };
 
   return (
@@ -56,7 +58,6 @@ const LoginPage = () => {
           </h1>
         </div>
 
-        {/* ✅ form으로 감싸고 onSubmit 적용 */}
         <form className="login-box" onSubmit={handleSubmit}>
           <h2 className="login-label">Log in</h2>
 
@@ -84,8 +85,10 @@ const LoginPage = () => {
             />
           </div>
 
+          {errorMessage && <p className="error-message">{errorMessage}</p>}
+
           <div className="login-buttons">
-            <button type="submit">Log in</button> {/* ✅ 기본 로그인 버튼 */}
+            <button type="submit">Log in</button>
             <button type="button" onClick={() => navigate('/signup')}>Sign in</button>
           </div>
         </form>
@@ -95,4 +98,4 @@ const LoginPage = () => {
   );
 };
 
-export default LoginPage;
\ No newline at end of file
+export default LoginPage;
diff --git a/front/src/pages/MyReservationPage.js b/front/src/pages/MyReservationPage.js
index 22fc0fa..cf74df7 100644
--- a/front/src/pages/MyReservationPage.js
+++ b/front/src/pages/MyReservationPage.js
@@ -5,37 +5,32 @@ import Footer from '../components/Footer';
 import Modal from '../components/Modal';
 import '../styles/MyReservationPage.css';
 
-// ✅ 이미지 경로 매핑
 const getBuildingImage = (number) => {
   try {
     return require(`../assets/buildings img/${number}.png`);
   } catch {
-    return require('../assets/buildings img/2.png'); // Default: Dasan Hall
+    return require('../assets/buildings img/2.png');
   }
 };
 
 const MyReservationPage = () => {
   const [reservations, setReservations] = useState([]);
-  const [buildings, setBuildings] = useState([]); // 건물 번호 <-> 이름 매핑용
+  const [buildings, setBuildings] = useState([]);
   const [showModal, setShowModal] = useState(false);
   const [modalStep, setModalStep] = useState('confirm');
   const [selectedReservation, setSelectedReservation] = useState(null);
+  const [error, setError] = useState('');
 
-  // 🧭 건물 리스트 받아오기
   const fetchBuildings = async () => {
     try {
       const res = await axios.get('https://star-isih.onrender.com/api/buildings');
       setBuildings(res.data.buildings || []);
     } catch (err) {
-      console.warn('⚠️ 건물 정보 fetch 실패, fallback mock 사용');
-      setBuildings([
-        { buildingNo: 32, buildingName: 'Frontier Hall' },
-        { buildingNo: 2, buildingName: 'Dasan Hall' }
-      ]);
+      console.error('[Error] Failed to load buildings:', err);
+      setError('Failed to load building information. Please try again later.');
     }
   };
 
-  // 🗓️ 예약 정보 불러오기
   const fetchReservations = async () => {
     try {
       const token = localStorage.getItem('token');
@@ -44,25 +39,8 @@ const MyReservationPage = () => {
       });
       setReservations(res.data);
     } catch (err) {
-      console.warn('⚠️ 예약 정보 fetch 실패, mock 사용');
-      setReservations([
-        {
-          _id: 'mock1',
-          building: 'Frontier Hall',
-          room: '107',
-          date: '2024-06-05',
-          startTime: '08:00',
-          endTime: '10:50'
-        },
-        {
-          _id: 'mock2',
-          building: 'Dasan Hall',
-          room: '201',
-          date: '2024-06-06',
-          startTime: '09:00',
-          endTime: '09:50'
-        }
-      ]);
+      console.error('[Error] Failed to fetch reservations:', err);
+      setError('Failed to load reservations. Please try again later.');
     }
   };
 
@@ -88,11 +66,11 @@ const MyReservationPage = () => {
       await axios.delete(`https://star-isih.onrender.com/api/reservations/${selectedReservation._id}`, {
         headers: { Authorization: `Bearer ${token}` }
       });
-      setReservations(reservations.filter(r => r._id !== selectedReservation._id));
+      setReservations(prev => prev.filter(r => r._id !== selectedReservation._id));
       setModalStep('success');
     } catch (err) {
-      console.error('❌ 예약 취소 실패:', err);
-      alert('Reservation cancel failed.');
+      console.error('[Error] Cancel failed:', err);
+      alert('Failed to cancel reservation. Please try again.');
       closeModal();
     }
   };
@@ -108,6 +86,9 @@ const MyReservationPage = () => {
       <Header />
       <main className="my-reservation-content">
         <h2>My reservation ({reservations.length})</h2>
+
+        {error && <p className="error-message">{error}</p>}
+
         <div className="reservation-list">
           {reservations.map((res) => {
             const buildingNo = getBuildingNo(res.building);
@@ -141,17 +122,17 @@ const MyReservationPage = () => {
                   - {selectedReservation.startTime} ~ {selectedReservation.endTime}, {selectedReservation.date}
                 </div>
               </div>
-              <p style={{ marginTop: '24px' }}>Are you sure to cancel your reservation?</p>
+              <p style={{ marginTop: '24px' }}>Are you sure you want to cancel this reservation?</p>
               <div className="modal-buttons">
-                <button onClick={confirmCancel}>Yes!</button>
-                <button onClick={closeModal}>No!</button>
+                <button onClick={confirmCancel}>Yes</button>
+                <button onClick={closeModal}>No</button>
               </div>
             </div>
           ) : (
             <div>
               <p>Reservation canceled successfully!</p>
               <div className="modal-buttons">
-                <button onClick={closeModal}>Check Reservation</button>
+                <button onClick={closeModal}>OK</button>
               </div>
             </div>
           )}
@@ -163,4 +144,4 @@ const MyReservationPage = () => {
   );
 };
 
-export default MyReservationPage;
\ No newline at end of file
+export default MyReservationPage;
diff --git a/front/src/pages/ProfilePage.js b/front/src/pages/ProfilePage.js
index 6603781..940b401 100644
--- a/front/src/pages/ProfilePage.js
+++ b/front/src/pages/ProfilePage.js
@@ -4,7 +4,7 @@ import axios from 'axios';
 import Header from '../components/Header';
 import Footer from '../components/Footer';
 import BuildingCard from '../components/BuildingCard';
-import RoomSelectModal from '../components/RoomSelectModal'; // 모달 추가
+import RoomSelectModal from '../components/RoomSelectModal';
 import profileImg from '../assets/profile.png';
 import '../styles/ProfilePage.css';
 
@@ -16,67 +16,39 @@ const getBuildingImage = (id) => {
   }
 };
 
-const MOCK_BUILDINGS = [
-  {
-    id: '32',
-    name: 'Frontier Hall',
-    image: getBuildingImage('32'),
-    availableRooms: [
-      { room: 'Room 107', time: '8:00 - 10:50' },
-      { room: 'Room 131', time: '11:00 - 12:50' },
-    ],
-  },
-  {
-    id: '2',
-    name: 'Dasan Hall',
-    image: getBuildingImage('2'),
-    availableRooms: [
-      { room: 'Room 201', time: '9:00 - 9:50' },
-      { room: 'Room 105', time: '10:00 - 10:50' },
-    ],
-  },
-];
-
-// ✅ mock 유저 미리 설정
-const MOCK_USER = {
-  name: '홍길동',
-  studentNumber: '202312345',
-  major: '컴퓨터공학과',
-  favorites: ['Frontier Hall', 'Dasan Hall'],
-};
-
 const ProfilePage = () => {
   const navigate = useNavigate();
   const [user, setUser] = useState(null);
   const [favoriteBuildings, setFavoriteBuildings] = useState([]);
   const [showModal, setShowModal] = useState(false);
   const [selectedBuilding, setSelectedBuilding] = useState(null);
+  const [error, setError] = useState('');
 
   useEffect(() => {
     const fetchProfile = async () => {
       try {
         const token = localStorage.getItem('token');
-        if (!token) throw new Error('No token');
+        if (!token) throw new Error('No authentication token');
 
+        // 🧾 사용자 정보 요청
         const res = await axios.get('https://star-isih.onrender.com/api/users/me', {
           headers: { Authorization: `Bearer ${token}` }
         });
-
         const userData = res.data.user;
         setUser(userData);
 
-        // 서버에서 전체 건물 목록 받아오기
-        const buildingsRes = await axios.get('hhttps://star-isih.onrender.com/api/buildings');
+        // 🏢 건물 목록 요청
+        const buildingsRes = await axios.get('https://star-isih.onrender.com/api/buildings');
         const buildingData = buildingsRes.data.buildings;
 
-        // building.name과 userData.favorites를 비교해 매칭
+        // 🧩 즐겨찾기 건물 매칭 + 강의실 정보 병합
         const matched = await Promise.all(
           buildingData
             .filter(b => userData.favorites.includes(b.buildingName))
             .map(async (b) => {
               const roomRes = await axios.get(`https://star-isih.onrender.com/api/buildings/rooms?buildingNo=${b.buildingNo}`);
               const availableRooms = roomRes.data.rooms || [];
-        
+
               return {
                 id: String(b.buildingNo),
                 name: b.buildingName,
@@ -90,14 +62,8 @@ const ProfilePage = () => {
         );
         setFavoriteBuildings(matched);
       } catch (err) {
-        console.warn('⚠️ 서버 연결 실패, mock 유저 사용');
-        localStorage.setItem('user', JSON.stringify(MOCK_USER));
-        setUser(MOCK_USER);
-
-        const matched = MOCK_BUILDINGS.filter(b =>
-          MOCK_USER.favorites.includes(b.name)
-        );
-        setFavoriteBuildings(matched);
+        console.error('[Error] Failed to load user profile or building data:', err);
+        setError('Failed to load profile or building data. Please try again later.');
       }
     };
 
@@ -118,42 +84,70 @@ const ProfilePage = () => {
   const toggleFavorite = async (buildingName) => {
     try {
       const token = localStorage.getItem('token');
-      const isAlreadyFavorite = user?.favorites.includes(buildingName);
+      if (!token || !user) throw new Error('Unauthorized');
+
+      const isAlreadyFavorite = user.favorites.includes(buildingName);
       let updatedFavorites;
 
-      if (token) {
-        if (isAlreadyFavorite) {
-          await axios.delete('https://star-isih.onrender.com/api/users/favorites', {
-            headers: { Authorization: `Bearer ${token}` },
-            data: { building: buildingName },
-          });
-          updatedFavorites = user.favorites.filter((n) => n !== buildingName);
-        } else {
-          await axios.post('https://star-isih.onrender.com/api/users/favorites', { building: buildingName }, {
-            headers: { Authorization: `Bearer ${token}` },
-          });
-          updatedFavorites = [...user.favorites, buildingName];
-        }
+      if (isAlreadyFavorite) {
+        await axios.delete('https://star-isih.onrender.com/api/users/favorites', {
+          headers: { Authorization: `Bearer ${token}` },
+          data: { building: buildingName },
+        });
+        updatedFavorites = user.favorites.filter((n) => n !== buildingName);
       } else {
-        // mock fallback
-        updatedFavorites = isAlreadyFavorite
-          ? user.favorites.filter((n) => n !== buildingName)
-          : [...user.favorites, buildingName];
+        await axios.post('https://star-isih.onrender.com/api/users/favorites', { building: buildingName }, {
+          headers: { Authorization: `Bearer ${token}` },
+        });
+        updatedFavorites = [...user.favorites, buildingName];
       }
 
+      // 업데이트된 사용자 즐겨찾기 정보 반영
       const updatedUser = { ...user, favorites: updatedFavorites };
       setUser(updatedUser);
-      localStorage.setItem('user', JSON.stringify(updatedUser));
 
-      const matched = MOCK_BUILDINGS.filter(b =>
-        updatedFavorites.includes(b.name)
+      // 즐겨찾기 건물 다시 매핑
+      const buildingsRes = await axios.get('https://star-isih.onrender.com/api/buildings');
+      const buildingData = buildingsRes.data.buildings;
+
+      const matched = await Promise.all(
+        buildingData
+          .filter(b => updatedFavorites.includes(b.buildingName))
+          .map(async (b) => {
+            const roomRes = await axios.get(`https://star-isih.onrender.com/api/buildings/rooms?buildingNo=${b.buildingNo}`);
+            const availableRooms = roomRes.data.rooms || [];
+
+            return {
+              id: String(b.buildingNo),
+              name: b.buildingName,
+              image: getBuildingImage(b.buildingNo),
+              availableRooms: availableRooms.map(room => ({
+                room: `Room ${room}`,
+                time: '8:00 - 17:50',
+              }))
+            };
+          })
       );
+
       setFavoriteBuildings(matched);
     } catch (err) {
-      alert('Unable to update your favorites. Please try again.');
+      console.error('[Error] Failed to update favorites:', err);
+      alert('Failed to update favorites. Please try again.');
     }
   };
 
+  if (error) {
+    return (
+      <div className="profile-page">
+        <Header />
+        <main className="profile-content">
+          <p className="error-message">{error}</p>
+        </main>
+        <Footer />
+      </div>
+    );
+  }
+
   if (!user) return <div>Loading...</div>;
 
   return (
@@ -188,15 +182,17 @@ const ProfilePage = () => {
         </div>
       </main>
 
-      <RoomSelectModal
-        building={selectedBuilding}
-        onClose={() => setSelectedBuilding(null)}
-        onSelectRoom={handleRoomSelect}
-      />
+      {showModal && selectedBuilding && (
+        <RoomSelectModal
+          building={selectedBuilding}
+          onClose={() => setSelectedBuilding(null)}
+          onSelectRoom={handleRoomSelect}
+        />
+      )}
 
       <Footer />
     </div>
   );
 };
 
-export default ProfilePage;
\ No newline at end of file
+export default ProfilePage;
diff --git a/front/src/pages/ReservePage.js b/front/src/pages/ReservePage.js
index 57824a1..f350e93 100644
--- a/front/src/pages/ReservePage.js
+++ b/front/src/pages/ReservePage.js
@@ -15,27 +15,6 @@ const getBuildingImage = (id) => {
   }
 };
 
-const MOCK_BUILDINGS = [
-  {
-    id: '32',
-    name: 'Frontier Hall',
-    image: getBuildingImage('32'),
-    availableRooms: [
-      { room: 'Room 107', time: '8:00 - 10:50' },
-      { room: 'Room 131', time: '11:00 - 12:50' },
-    ],
-  },
-  {
-    id: '2',
-    name: 'Dasan Hall',
-    image: getBuildingImage('2'),
-    availableRooms: [
-      { room: 'Room 201', time: '9:00 - 9:50' },
-      { room: 'Room 105', time: '10:00 - 10:50' },
-    ],
-  },
-];
-
 const ReservePage = () => {
   const navigate = useNavigate();
   const [buildings, setBuildings] = useState([]);
@@ -43,6 +22,7 @@ const ReservePage = () => {
   const [searchTerm, setSearchTerm] = useState('');
   const [showModal, setShowModal] = useState(false);
   const [selectedBuilding, setSelectedBuilding] = useState(null);
+  const [error, setError] = useState('');
 
   useEffect(() => {
     const stored = JSON.parse(localStorage.getItem('favorites')) || [];
@@ -53,6 +33,8 @@ const ReservePage = () => {
     const fetchData = async () => {
       try {
         const token = localStorage.getItem('token');
+        if (!token) throw new Error('Authentication token missing');
+
         const [buildingsRes, userRes] = await Promise.all([
           axios.get('https://star-isih.onrender.com/api/buildings'),
           axios.get('https://star-isih.onrender.com/api/users/me', {
@@ -65,7 +47,9 @@ const ReservePage = () => {
 
         const buildingList = await Promise.all(
           buildingData.map(async (b) => {
-            const roomRes = await axios.get(`https://star-isih.onrender.com/api/buildings/rooms?buildingNo=${b.buildingNo}`);
+            const roomRes = await axios.get(
+              `https://star-isih.onrender.com/api/buildings/rooms?buildingNo=${b.buildingNo}`
+            );
             const availableRooms = roomRes.data.rooms || [];
             return {
               id: String(b.buildingNo),
@@ -83,10 +67,8 @@ const ReservePage = () => {
         setFavoriteIds(favoritesFromServer);
         localStorage.setItem('favorites', JSON.stringify(favoritesFromServer));
       } catch (err) {
-        console.warn('⚠️ 서버 연결 실패. mock 데이터 사용');
-        const stored = JSON.parse(localStorage.getItem('favorites')) || [];
-        setBuildings(MOCK_BUILDINGS);
-        setFavoriteIds(stored);
+        console.error('❌ Failed to load building or user data:', err);
+        setError('Failed to load data. Please check your connection or login again.');
       }
     };
 
@@ -98,6 +80,8 @@ const ReservePage = () => {
     const isAlreadyFavorite = favoriteIds.includes(buildingName);
 
     try {
+      if (!token) throw new Error('User not authenticated');
+
       if (isAlreadyFavorite) {
         await axios.delete('https://star-isih.onrender.com/api/users/favorites', {
           headers: { Authorization: `Bearer ${token}` },
@@ -107,16 +91,20 @@ const ReservePage = () => {
         setFavoriteIds(updated);
         localStorage.setItem('favorites', JSON.stringify(updated));
       } else {
-        await axios.post('https://star-isih.onrender.com/api/users/favorites', { building: buildingName }, {
-          headers: { Authorization: `Bearer ${token}` },
-        });
+        await axios.post(
+          'https://star-isih.onrender.com/api/users/favorites',
+          { building: buildingName },
+          {
+            headers: { Authorization: `Bearer ${token}` },
+          }
+        );
         const updated = [...favoriteIds, buildingName];
         setFavoriteIds(updated);
         localStorage.setItem('favorites', JSON.stringify(updated));
       }
     } catch (err) {
-      console.error('❌ 즐겨찾기 동기화 실패', err);
-      alert('로그인이 필요하거나 서버 오류가 발생했습니다.');
+      console.error('❌ Failed to update favorites:', err);
+      alert('Failed to update favorites. Please try again after logging in.');
     }
   };
 
@@ -133,7 +121,7 @@ const ReservePage = () => {
 
   const filteredBuildings = buildings
     .filter(b => b.name.toLowerCase().includes(searchTerm.toLowerCase()))
-    .filter(b => b.availableRooms.length > 0); // ✅ 방이 없는 건물 제외
+    .filter(b => b.availableRooms.length > 0);
 
   const favoriteBuildings = filteredBuildings.filter(b => favoriteIds.includes(b.name));
   const nonFavoriteBuildings = filteredBuildings.filter(b => !favoriteIds.includes(b.name));
@@ -142,57 +130,65 @@ const ReservePage = () => {
     <div className="reserve-page">
       <Header />
       <main className="reserve-content">
-        <div className="search-bar">
-          <input
-            type="text"
-            placeholder="Search a Classroom"
-            value={searchTerm}
-            onChange={(e) => setSearchTerm(e.target.value)}
-          />
-        </div>
-
-        {favoriteBuildings.length > 0 && (
-          <section>
-            <h3>Favorite Classrooms</h3>
-            <div className="building-list">
-              {favoriteBuildings.map((building) => (
-                <BuildingCard
-                  key={building.id}
-                  building={building}
-                  isFavorite={true}
-                  onReserveClick={openRoomModal}
-                  onToggleFavorite={toggleFavorite}
-                />
-              ))}
+        {error ? (
+          <p className="error-message">{error}</p>
+        ) : (
+          <>
+            <div className="search-bar">
+              <input
+                type="text"
+                placeholder="Search a Classroom"
+                value={searchTerm}
+                onChange={(e) => setSearchTerm(e.target.value)}
+              />
             </div>
-          </section>
-        )}
 
-        <section>
-          <h3>Buildings</h3>
-          <div className="building-list">
-            {nonFavoriteBuildings.map((building) => (
-              <BuildingCard
-                key={building.id}
-                building={building}
-                isFavorite={false}
-                onReserveClick={openRoomModal}
-                onToggleFavorite={toggleFavorite}
-              />
-            ))}
-          </div>
-        </section>
+            {favoriteBuildings.length > 0 && (
+              <section>
+                <h3>Favorite Classrooms</h3>
+                <div className="building-list">
+                  {favoriteBuildings.map((building) => (
+                    <BuildingCard
+                      key={building.id}
+                      building={building}
+                      isFavorite={true}
+                      onReserveClick={openRoomModal}
+                      onToggleFavorite={toggleFavorite}
+                    />
+                  ))}
+                </div>
+              </section>
+            )}
+
+            <section>
+              <h3>Buildings</h3>
+              <div className="building-list">
+                {nonFavoriteBuildings.map((building) => (
+                  <BuildingCard
+                    key={building.id}
+                    building={building}
+                    isFavorite={false}
+                    onReserveClick={openRoomModal}
+                    onToggleFavorite={toggleFavorite}
+                  />
+                ))}
+              </div>
+            </section>
+          </>
+        )}
       </main>
 
-      <RoomSelectModal
-        building={selectedBuilding}
-        onClose={() => setSelectedBuilding(null)}
-        onSelectRoom={handleRoomSelect}
-      />
+      {showModal && selectedBuilding && (
+        <RoomSelectModal
+          building={selectedBuilding}
+          onClose={() => setSelectedBuilding(null)}
+          onSelectRoom={handleRoomSelect}
+        />
+      )}
 
       <Footer />
     </div>
   );
 };
 
-export default ReservePage;
\ No newline at end of file
+export default ReservePage;
diff --git a/front/src/pages/SignupPage.js b/front/src/pages/SignupPage.js
index e22cf1d..9569885 100644
--- a/front/src/pages/SignupPage.js
+++ b/front/src/pages/SignupPage.js
@@ -14,7 +14,7 @@ const SignupPage = () => {
 
   const [departments, setDepartments] = useState([]);
 
-  // 학과 데이터 불러오기
+  // Load department list from JSON
   useEffect(() => {
     const fetchDepartments = async () => {
       try {
@@ -23,7 +23,7 @@ const SignupPage = () => {
         const deptList = data.map(d => d.department);
         setDepartments(deptList);
       } catch (err) {
-        console.error('⚠️ 학과 데이터 로딩 실패:', err);
+        console.error('⚠️ Failed to load department data:', err);
       }
     };
     fetchDepartments();
@@ -36,16 +36,14 @@ const SignupPage = () => {
   const handleSignup = async () => {
     try {
       await axios.post('https://star-isih.onrender.com/api/users/register', form);
-      alert('회원가입 성공!');
+      alert('Sign up successful!');
       window.location.href = '/login';
     } catch (err) {
       if (!err.response) {
-        console.warn('⚠️ 서버 연결 실패. 로컬에 mock 회원 저장.');
-        localStorage.setItem('mockUser', JSON.stringify(form));
-        alert('⚠️ 서버 미연결 - 로컬 mock 회원가입 완료');
-        window.location.href = '/login';
+        console.error('⚠️ Failed to connect to the server:', err);
+        alert('Failed to connect to the server. Please try again later.');
       } else {
-        alert(err.response?.data?.message || '회원가입 실패');
+        alert(err.response?.data?.message || 'Sign up failed. Please check your input and try again.');
       }
     }
   };
@@ -55,9 +53,9 @@ const SignupPage = () => {
       <Header />
       <main className="signup-content">
         <div className="signup-box">
-          <h2 className="signup-label">Sign in</h2>
+          <h2 className="signup-label">Sign up</h2>
 
-          {/* 이름 */}
+          {/* Name */}
           <div className="input-wrapper">
             <label>Name</label>
             <input
@@ -65,10 +63,11 @@ const SignupPage = () => {
               type="text"
               placeholder="Enter your name"
               onChange={handleChange}
+              required
             />
           </div>
 
-          {/* 학번 */}
+          {/* Student Number */}
           <div className="input-wrapper">
             <label>Student Number</label>
             <input
@@ -76,10 +75,11 @@ const SignupPage = () => {
               type="text"
               placeholder="Enter your student number"
               onChange={handleChange}
+              required
             />
           </div>
 
-          {/* 비밀번호 */}
+          {/* Password */}
           <div className="input-wrapper">
             <label>Password</label>
             <input
@@ -87,13 +87,14 @@ const SignupPage = () => {
               type="password"
               placeholder="Enter password"
               onChange={handleChange}
+              required
             />
           </div>
 
-          {/* 전공 선택 */}
+          {/* Major */}
           <div className="input-wrapper">
             <label>Major</label>
-            <select name="major" value={form.major} onChange={handleChange}>
+            <select name="major" value={form.major} onChange={handleChange} required>
               <option value="">Select your department</option>
               {departments.map((dept, idx) => (
                 <option key={idx} value={dept}>{dept}</option>
@@ -101,9 +102,9 @@ const SignupPage = () => {
             </select>
           </div>
 
-          {/* 회원가입 버튼 */}
+          {/* Sign Up Button */}
           <div className="signup-button">
-            <button onClick={handleSignup}>Sign in</button>
+            <button onClick={handleSignup}>Sign up</button>
           </div>
         </div>
       </main>
@@ -112,4 +113,4 @@ const SignupPage = () => {
   );
 };
 
-export default SignupPage;
\ No newline at end of file
+export default SignupPage;