Feat/EditProfile and MyReservation Page

src/App.tsx

@@ -9,7 +9,10 @@ import HostingImage from '@/routes/HostingImageUpload';
 import Redirect from '@/routes/Redirect';
 
 import RegisterPage from './components/home/Topbar/Menu/RegisterPage';
+import MyReservationDetails from './components/profile/MyReservationDetails';
+import MyReservations from './routes/MyReservations';
 import Profile from './routes/Profile';
+import ProfileEdit from './routes/ProfileEdit';
 import { Roomdetail } from './routes/roomDetail';
 
 export const App = () => {
@@ -25,7 +28,13 @@ export const App = () => {
           <Route path="/hosting" element={<Hosting />} />
           <Route path="/hosting/images" element={<HostingImage />} />
           <Route path="/profile" element={<Profile />} />
+          <Route path="/profile/edit" element={<ProfileEdit />} />
           <Route path="/register" element={<RegisterPage />} />
+          <Route path="/MyReservations" element={<MyReservations />} />
+          <Route
+            path="/reservations/:reservationId"
+            element={<MyReservationDetails />}
+          />
           <Route path="*" element={<h1>404 Not Found</h1>} />
         </Routes>
       </SearchProvider>

src/components/home/Topbar/Header.tsx

@@ -41,6 +41,7 @@ const Topbar = () => {
     setDropdownOpen(false);
     localStorage.removeItem('token');
     alert('로그아웃 되었습니다.');
+    void navigate('/');
   };
 
   return (

src/components/home/Topbar/Menu/RegisterPage.tsx

@@ -13,6 +13,7 @@ const RegisterPage: React.FC = () => {
     bio: '',
     showMyReviews: false,
     showMyReservations: false,
+    showMyWishlist: false,
   });
   const [profileImage, setProfileImage] = useState<File | null>(null);
   const [showPassword, setShowPassword] = useState(false);
@@ -61,12 +62,13 @@ const RegisterPage: React.FC = () => {
       'showMyReservations',
       formData.showMyReservations.toString(),
     );
+    formDataToSend.append('showMyWishlist', formData.showMyWishlist.toString());
     if (profileImage !== null) {
       formDataToSend.append('profileImage', profileImage);
     }
 
     type RegisterResponseData = {
-      imageUploadurl: string;
+      imageUploadUrl: string;
     };
 
     try {
@@ -82,7 +84,7 @@ const RegisterPage: React.FC = () => {
 
       alert('회원가입 성공');
 
-      const presignedUrl = RegisterResponse.data.imageUploadurl;
+      const presignedUrl = RegisterResponse.data.imageUploadUrl;
 
       if (profileImage !== null && presignedUrl !== '') {
         const uploadSuccess = await uploadImageWithPresignedUrl(

src/components/profile/MyReservationDetails.tsx

@@ -0,0 +1,91 @@
+import axios from 'axios';
+import { useEffect, useState } from 'react';
+import { useParams } from 'react-router-dom';
+
+type ReservationDetail = {
+  reservationId: number;
+  roomId: number;
+  startDate: string;
+  endDate: string;
+  place: string;
+  numberOfGuests: number;
+  imageUrl: string;
+};
+
+const MyReservationDetails = () => {
+  const { reservationId } = useParams<{ reservationId: string }>();
+  const [reservation, setReservation] = useState<ReservationDetail | null>(
+    null,
+  );
+  const [error, setError] = useState<string | null>(null);
+  const [loading, setLoading] = useState<boolean>(true);
+
+  useEffect(() => {
+    const fetchReservationDetail = async () => {
+      const token = localStorage.getItem('token');
+      if (token === null || (typeof token === 'string' && token === '')) {
+        setError('로그인되지 않았습니다.');
+        return;
+      }
+
+      if (reservationId === undefined) {
+        setError('예약 ID가 유효하지 않습니다.');
+        setLoading(false);
+        return;
+      }
+
+      try {
+        const response = await axios.get<ReservationDetail>(
+          `/api/v1/reservations/${reservationId}`,
+          {
+            headers: {
+              Authorization: `Bearer ${token}`,
+            },
+          },
+        );
+        setReservation(response.data);
+      } catch (err) {
+        console.error(err);
+        setError('예약 정보를 가져오는 데 실패했습니다.');
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    void fetchReservationDetail();
+  }, [reservationId]);
+
+  if (loading) {
+    return <p>로딩 중...</p>;
+  }
+
+  if (error !== null) {
+    return <p className="text-red-500">{error}</p>;
+  }
+
+  if (reservation === null) {
+    return <p>예약 정보를 찾을 수 없습니다.</p>;
+  }
+
+  return (
+    <div className="flex flex-col items-center min-h-screen bg-gray-100">
+      <h1 className="text-2xl font-bold my-4">{reservation.place}</h1>
+      <img
+        src={reservation.imageUrl}
+        alt={reservation.place}
+        className="w-3/4 h-64 object-cover rounded-lg shadow-md"
+      />
+      <div className="mt-4 p-4 bg-white rounded-lg shadow-md w-3/4">
+        <p className="text-lg font-semibold">
+          여행 기간: {reservation.startDate} ~ {reservation.endDate}
+        </p>
+        <p className="mt-2 text-gray-700">
+          게스트 수: {reservation.numberOfGuests}명
+        </p>
+        <p className="mt-2 text-gray-700">객실 ID: {reservation.roomId}</p>
+      </div>
+    </div>
+  );
+};
+
+export default MyReservationDetails;

src/components/profile/MyReservationItems.tsx

@@ -0,0 +1,170 @@
+import axios from 'axios';
+import { useEffect, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+type Reservation = {
+  reservationId: number;
+  place: string;
+  startDate: string;
+  endDate: string;
+  imageUrl: string;
+};
+
+type MyReservationItemsResponse = {
+  content: Reservation[];
+};
+
+type ProfileInfo = {
+  userId: number;
+  nickname: string;
+};
+
+const MyReservationItems = () => {
+  const navigate = useNavigate();
+  const [pastMyReservationItems, setPastMyReservationItems] = useState<
+    Reservation[]
+  >([]);
+  const [upcomingMyReservationItems, setUpcomingMyReservationItems] = useState<
+    Reservation[]
+  >([]);
+  const [error, setError] = useState<string | null>(null);
+  const [loading, setLoading] = useState<boolean>(true);
+
+  useEffect(() => {
+    const fetchMyReservationItems = async () => {
+      const token = localStorage.getItem('token');
+      if (token === null || (typeof token === 'string' && token === '')) {
+        setError('로그인되지 않았습니다.');
+        return;
+      }
+
+      try {
+        const profileResponse = await axios.get<ProfileInfo>(
+          '/api/v1/profile',
+          {
+            headers: { Authorization: `Bearer ${token}` },
+          },
+        );
+        const userId = profileResponse.data.userId;
+
+        const MyReservationItemsResponse =
+          await axios.get<MyReservationItemsResponse>(
+            `/api/v1/reservations/user/${userId}`,
+            { headers: { Authorization: `Bearer ${token}` } },
+          );
+
+        const now = new Date();
+
+        // 지난 예약: endDate가 현재 날짜보다 이전
+        const past = MyReservationItemsResponse.data.content.filter(
+          (reservation) => {
+            return new Date(reservation.endDate) < now;
+          },
+        );
+
+        // 다가오는 여행: startDate가 현재 날짜와 같거나 이후
+        const upcoming = MyReservationItemsResponse.data.content.filter(
+          (reservation) => {
+            return new Date(reservation.startDate) >= now;
+          },
+        );
+
+        // 정렬 (startDate 기준 최신순)
+        setPastMyReservationItems(
+          past.sort(
+            (a, b) =>
+              new Date(b.startDate).getTime() - new Date(a.startDate).getTime(),
+          ),
+        );
+        setUpcomingMyReservationItems(
+          upcoming.sort(
+            (a, b) =>
+              new Date(a.startDate).getTime() - new Date(b.startDate).getTime(),
+          ),
+        );
+
+        setLoading(false);
+      } catch (err) {
+        console.error(err);
+        setError('데이터를 가져오는 데 실패했습니다.');
+        setLoading(false);
+      }
+    };
+
+    void fetchMyReservationItems();
+  }, []);
+
+  if (loading) {
+    return <p>로딩 중...</p>;
+  }
+
+  if (error !== null) {
+    return <p className="text-red-500">{error}</p>;
+  }
+
+  return (
+    <div className="flex flex-col items-center min-h-screen bg-gray-100">
+      <h1 className="text-2xl font-bold my-4">예약 내역</h1>
+
+      {/* 다가오는 여행 */}
+      <div className="w-3/4 mb-8">
+        <h2 className="text-xl font-semibold mb-4">다가오는 여행</h2>
+        {upcomingMyReservationItems.length > 0 ? (
+          <div className="grid gap-4 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3">
+            {upcomingMyReservationItems.map((reservation) => (
+              <div
+                key={reservation.reservationId}
+                onClick={(e) => {
+                  e.preventDefault();
+                  void navigate(`/reservations/${reservation.reservationId}`);
+                }}
+                className="p-4 bg-white rounded-lg shadow-md"
+              >
+                <img
+                  src={reservation.imageUrl}
+                  alt={reservation.place}
+                  className="w-full h-40 object-cover rounded-md mb-2"
+                />
+                <h2 className="text-lg font-semibold">{reservation.place}</h2>
+                <p className="text-sm text-gray-500">
+                  {reservation.startDate} ~ {reservation.endDate}
+                </p>
+              </div>
+            ))}
+          </div>
+        ) : (
+          <p>다가오는 여행이 없습니다.</p>
+        )}
+      </div>
+
+      {/* 지난 예약 */}
+      <div className="w-3/4">
+        <h2 className="text-xl font-semibold mb-4">지난 예약</h2>
+        {pastMyReservationItems.length > 0 ? (
+          <div className="grid gap-4 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3">
+            {pastMyReservationItems.map((reservation) => (
+              <div
+                key={reservation.reservationId}
+                className="p-4 bg-white rounded-lg shadow-md"
+              >
+                <img
+                  src={reservation.imageUrl}
+                  alt={reservation.place}
+                  className="w-full h-40 object-cover rounded-md mb-2"
+                />
+                <h2 className="text-lg font-semibold">{reservation.place}</h2>
+                <p className="text-sm text-gray-500">
+                  {reservation.startDate} ~ {reservation.endDate}
+                </p>
+              </div>
+            ))}
+          </div>
+        ) : (
+          <p>지난 예약이 없습니다.</p>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default MyReservationItems;