Merge pull request #89 from wafflestudio/feat/final

최종

src/App.tsx

@@ -11,10 +11,11 @@ import Redirect from '@/routes/Redirect';
 
 import CompleteProfilePage from './components/home/Topbar/Menu/CompleteProfilePage';
 import RegisterPage from './components/home/Topbar/Menu/RegisterPage';
-import { ReviewProvider } from './components/roomdetail/ReviewContext';
+import { ReviewProvider } from './components/roomdetail/contexts/ReviewContext';
 import MyHosting from './routes/MyHosting';
 import MyReservations from './routes/MyReservations';
 import MyReviews from './routes/MyReviews';
+import { MyWishlist } from './routes/MyWishlist';
 import OtherUserProfilePage from './routes/OtherUserProfilePage';
 import ProfileEdit from './routes/ProfileEdit';
 import ProfilePage from './routes/ProfilePage';
@@ -49,6 +50,7 @@ export const App = () => {
                 <Route path="/register" element={<RegisterPage />} />
                 <Route path="/MyReservations" element={<MyReservations />} />
                 <Route path="/MyReviews" element={<MyReviews />} />
+                <Route path="/MyWishlist" element={<MyWishlist />} />
                 <Route path="/MyHosting" element={<MyHosting />} />
                 <Route path="/EditHosting/:roomId" element={<EditHosting />} />
                 <Route path="/reviews/:reservationId" element={<Review />} />

src/components/roomdetail/PhotoModal.tsx → src/components/roomdetail/modals/PhotoModal.tsx

@@ -2,14 +2,16 @@ import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
 import PhotoSizeSelectActualIcon from '@mui/icons-material/PhotoSizeSelectActual';
 import { useEffect } from 'react';
 
-import { Shareheart } from '@/components/roomdetail/Shareheart';
+import { Shareheart } from '@/components/roomdetail/pages/Shareheart';
+import type { roomType } from '@/types/roomType';
 
 type Props = {
   onClose: () => void;
   UrlList: string[];
+  data: roomType;
 };
 
-const PhotoModal = ({ onClose, UrlList }: Props) => {
+const PhotoModal = ({ onClose, UrlList, data }: Props) => {
   useEffect(() => {
     document.body.style.overflow = 'hidden'; // 배경 스크롤 비활성화
     return () => {
@@ -36,7 +38,7 @@ const PhotoModal = ({ onClose, UrlList }: Props) => {
             사진 투어
           </h2>
           <div className="flex-1 flex justify-end">
-            <Shareheart />
+            <Shareheart data={data} />
           </div>
         </div>
 

src/components/roomdetail/ReviewModal.tsx → src/components/roomdetail/modals/ReviewModal.tsx

@@ -2,20 +2,22 @@ import ChatBubbleOutlineIcon from '@mui/icons-material/ChatBubbleOutline';
 import CloseIcon from '@mui/icons-material/Close';
 import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
 import { useEffect, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
 
 import accuracy from '@/assets/icons/reviews/accuracy.svg';
 import clean from '@/assets/icons/reviews/clean.svg';
 import { CheckinIcon } from '@/components/common/constants/icons';
 import type { roomType } from '@/types/roomType';
 
-import { useReview } from './ReviewContext';
+import { useReview } from '../contexts/ReviewContext';
 
 interface ReviewProps {
   data: roomType;
   onClose: () => void;
 }
 
 const ReviewModal = ({ onClose, data }: ReviewProps) => {
+  const navigate = useNavigate();
   const [selectedOption, setSelectedOption] = useState('최신순');
   const [page, setPage] = useState(0);
   const [isModalOpen, setIsModalOpen] = useState(false);
@@ -157,12 +159,21 @@ const ReviewModal = ({ onClose, data }: ReviewProps) => {
                     key={index}
                     className="rounded-md mx-2 p-5 cursor-pointer hover:bg-gray-100"
                   >
-                    <div className="flex items-center">
-                      <div className="w-8 h-8 rounded-full bg-gray-300 text-center leading-8 text-sm">
-                        {review.profileImage !== ''
-                          ? review.nickname
-                          : review.nickname.charAt(0)}
-                      </div>
+                    <div
+                      className="flex items-center"
+                      onClick={() => void navigate(`/profile/${review.userId}`)}
+                    >
+                      {review.profileImage !== '' ? (
+                        <img
+                          src={review.profileImage}
+                          className="w-8 h-8 rounded-full bg-gray-300 text-center leading-8 text-sm"
+                        />
+                      ) : (
+                        <div className="w-8 h-8 rounded-full bg-gray-300 text-center leading-8 text-sm">
+                          {review.nickname.charAt(0)}
+                        </div>
+                      )}
+
                       <div className="ml-3">
                         <h5 className="font-medium">
                           {review.nickname}&nbsp;&middot;&nbsp;{review.rating}

src/components/roomdetail/Info.tsx → src/components/roomdetail/pages/Info.tsx

@@ -6,15 +6,14 @@ import crownleft from '@/assets/icons/roomdetail/crownleft.svg';
 import crownright from '@/assets/icons/roomdetail/crownright.svg';
 import superhost from '@/assets/icons/superhost.svg';
 import { ACCOMMODATION_TYPES } from '@/components/common/constants/accommodationTypes';
-import ReviewModal from '@/components/roomdetail/ReviewModal';
-import type { roomType } from '@/types/roomType';
-
 import {
   CheckinIcon,
   LuggageIcon,
   TvIcon,
   WifiIcon,
-} from '../common/constants/icons';
+} from '@/components/common/constants/icons';
+import ReviewModal from '@/components/roomdetail/modals/ReviewModal';
+import type { roomType } from '@/types/roomType';
 
 interface InfoProps {
   data: roomType;
@@ -126,7 +125,7 @@ const Info = ({ data }: InfoProps) => {
           <PhotoSizeSelectActualIcon className="text-white" />
         </div>
         <div>
-          <div>호스트: {data.hostId}&nbsp;님</div>
+          <div>호스트: {data.hostName}&nbsp;님</div>
           <div className="text-sm text-gray-600">
             {issuperhost ? '슈퍼호스트' : '훌륭한 호스트'}
           </div>

src/components/roomdetail/Reservation.tsx → src/components/roomdetail/pages/Reservation.tsx

@@ -6,10 +6,10 @@ import axiosInstance from '@/axiosInstance';
 import BaseModal from '@/components/common/Modal/BaseModal';
 import CompactModal from '@/components/common/Modal/CompactModal';
 import { useSearch } from '@/components/home/context/SearchContext';
-import RoomGuestsModal from '@/components/roomdetail/RoomGuestsModal';
+import RoomGuestsModal from '@/components/roomdetail/modals/RoomGuestsModal';
 import type { roomType } from '@/types/roomType';
 
-import RoomCalendarModal from './roomCalendarModal';
+import RoomCalendarModal from '../modals/roomCalendarModal';
 
 interface InfoProps {
   data: roomType;

src/components/roomdetail/pages/Shareheart.tsx

@@ -0,0 +1,90 @@
+import IosShareIcon from '@mui/icons-material/IosShare';
+import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+import HeartIcon from '@/assets/icons/Heart';
+import axiosInstance from '@/axiosInstance';
+import ShareModal from '@/components/roomdetail/modals/ShareModal';
+import type { roomType } from '@/types/roomType';
+
+export const Shareheart = ({ data }: { data: roomType }) => {
+  const [isShareOpen, setIsShareOpen] = useState<boolean>(false);
+  const [isLiked, setIsLiked] = useState<boolean>(data.isLiked);
+  const [error, setError] = useState<string | null>(null);
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+  const navigate = useNavigate();
+  const handleWishList = async (e: React.MouseEvent) => {
+    e.stopPropagation();
+
+    const token = localStorage.getItem('token');
+    if (token == null) {
+      void navigate('/login');
+      return;
+    }
+
+    if (isLoading) return;
+
+    setIsLoading(true);
+    setError(null);
+
+    try {
+      if (isLiked) {
+        const response = await axiosInstance.delete(
+          `/api/v1/rooms/${data.roomId}/like`,
+        );
+        console.debug('Delete response:', response);
+      } else {
+        const response = await axiosInstance.post(
+          `/api/v1/rooms/${data.roomId}/like`,
+        );
+        console.debug('Post response:', response);
+      }
+      setIsLiked(!isLiked);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : '오류가 발생했습니다.');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <div className="flex space-x-[13px]">
+      <div
+        className="flex items-center space-x-[5px] px-2 py-1 rounded-md hover:bg-[#F7F7F7] cursor-pointer"
+        onClick={() => {
+          setIsShareOpen(true);
+        }}
+      >
+        <IosShareIcon style={{ width: 15, height: 15 }} />
+        <div className="text-sm underline">공유하기</div>
+      </div>
+      <div
+        className="flex items-center space-x-[5px] px-2 py-1 rounded-md hover:bg-[#F7F7F7] cursor-pointer"
+        onClick={(e: React.MouseEvent) => {
+          void handleWishList(e);
+        }}
+      >
+        <HeartIcon
+          size={24}
+          filled={isLiked}
+          onClick={(e: React.MouseEvent) => {
+            void handleWishList(e);
+          }}
+        />
+        <div className="text-sm underline">저장하기</div>
+      </div>
+      {isShareOpen && (
+        <ShareModal
+          onClose={() => {
+            setIsShareOpen(false);
+          }}
+        />
+      )}
+      {error != null && (
+        <div className="mt-6 p-4 bg-red-50 text-red-600 rounded-lg">
+          {error}
+        </div>
+      )}
+    </div>
+  );
+};

src/components/user/ReservationUpdateModal.tsx

@@ -7,7 +7,7 @@ import axiosInstance from '@/axiosInstance';
 import BaseModal from '@/components/common/Modal/BaseModal';
 import { useSearch } from '@/components/home/context/SearchContext';
 
-import RoomCalendarModal from '../roomdetail/roomCalendarModal';
+import RoomCalendarModal from '../roomdetail/modals/roomCalendarModal';
 
 type ReservationUpdateModalProps = {
   roomId: number;

src/components/user/profile/Profile.tsx

@@ -9,7 +9,7 @@ import ProfileHeader from './ProfileHeader';
 import UpcomingReservations from './UpcomingReservations';
 import UserReviews from './UserReviews';
 
-type ProfileInfo = {
+export type ProfileInfo = {
   userId: number;
   nickname: string;
   bio: string;