Room search page (#26)

jylee05 · web-flow · commit 0302a28704a8 · 2026-01-26T09:57:57.000+09:00
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,6 +1,6 @@
 import { useSetAtom } from 'jotai';
 import { useEffect } from 'react';
-import { User, getMe } from './api/auth';
+import { type User, getMe } from './api/auth';
 import {
   emailAtom,
   isLoggedInAtom,
diff --git a/src/api/room.ts b/src/api/room.ts
@@ -41,6 +41,10 @@ export const getCurrentPot = async (): Promise<Pot> => {
   return response.data;
 };
 
-export const deleteRoom = async (roomId: number): Promise<void> => {
-  await apiClient.delete(`/rooms/${roomId}`);
+// export const deleteRoom = async (roomId: number): Promise<void> => {
+//   await apiClient.delete(`/rooms/${roomId}`);
+// };
+
+export const leaveRoom = async (roomId: number): Promise<void> => {
+  await apiClient.post(`/rooms/${roomId}/leave`);
 };
diff --git a/src/pages/MyChat/index.tsx b/src/pages/MyChat/index.tsx
@@ -1,7 +1,7 @@
 import { isAxiosError } from 'axios';
 import { useCallback, useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
-import { Pot, deleteRoom, getCurrentPot } from '../../api/room';
+import { type Pot, getCurrentPot, leaveRoom } from '../../api/room';
 import './MyChat.css';
 
 const landmarks = {
@@ -41,7 +41,7 @@ const MyChat = () => {
       // eslint-disable-next-line no-restricted-globals
       if (confirm('정말로 현재 방에서 나가시겠습니까?')) {
         try {
-          await deleteRoom(currentPot.id);
+          await leaveRoom(currentPot.id);
           alert('방에서 나갔습니다.');
           fetchCurrentPot(); // Refresh pot data
         } catch (error: unknown) {
diff --git a/src/pages/SearchRoom/RoomSearch.tsx b/src/pages/SearchRoom/RoomSearch.tsx
@@ -1,5 +1,10 @@
+import { AxiosError } from 'axios';
+import { useAtomValue } from 'jotai'; // [수정] Jotai 훅 추가
 import { useCallback, useEffect, useRef, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { BACKEND_URL } from '../../api/constants';
 import apiClient from '../../api/index';
+import { isLoggedInAtom } from '../../common/user'; // [수정] atom import로 변경
 import { type RoomData } from '../../types';
 import RoomCard from './RoomCard';
 import './RoomSearch.css';
@@ -27,9 +32,27 @@ const getLandmarkName = (id: number) => {
   return LANDMARKS.find((l) => l.id === id)?.name || '알 수 없음';
 };
 
+// 서버 API 응답 데이터(PotDto)의 타입 정의
+interface PotDto {
+  id: number;
+  ownerId: number;
+  departureId: number;
+  destinationId: number;
+  departureTime: string;
+  minCapacity: number;
+  maxCapacity: number;
+  currentCount: number;
+  estimatedFee: number;
+  status: string;
+}
+
 const RoomSearch = () => {
+  const navigate = useNavigate();
+
+  // [수정] 전역 상태(Atom)에서 로그인 여부 구독
+  const isLoggedIn = useAtomValue(isLoggedInAtom);
+
   // --- 검색 필터 상태 ---
-  // 0은 '전체'를 의미 (초기값 0으로 설정하여 전체 검색 상태로 시작 가능)
   const [departureId, setDepartureId] = useState<number>(0);
   const [destinationId, setDestinationId] = useState<number>(0);
 
@@ -39,6 +62,11 @@ const RoomSearch = () => {
   const [hasMore, setHasMore] = useState(true);
   const [loading, setLoading] = useState(false);
 
+  // --- 모달 상태 ---
+  const [selectedRoomId, setSelectedRoomId] = useState<number | null>(null);
+  const [showLoginModal, setShowLoginModal] = useState(false);
+  const [showJoinModal, setShowJoinModal] = useState(false);
+
   // --- Refs ---
   const loadingRef = useRef(false);
   const observerRef = useRef<IntersectionObserver | null>(null);
@@ -53,90 +81,42 @@ const RoomSearch = () => {
       setLoading(true);
 
       try {
-        // 1. 검색 대상 ID 목록 생성
-        // 0(전체)이면 LANDMARKS의 모든 ID를, 아니면 선택된 ID 하나만 배열에 담음
-        const targetDepIds =
-          departureId === 0 ? LANDMARKS.map((l) => l.id) : [departureId];
-        const targetDestIds =
-          destinationId === 0 ? LANDMARKS.map((l) => l.id) : [destinationId];
-
-        // 2. 요청할 모든 조합 생성 (최악의 경우 15 x 15 = 225개 요청이므로 주의 필요)
-        // 실제로는 사용자가 한쪽만 '전체'로 두는 경우가 많을 것임
-        const requestPromises = [];
-
-        for (const depId of targetDepIds) {
-          for (const destId of targetDestIds) {
-            // 출발지와 도착지가 같으면 굳이 조회할 필요 없음 (서버 로직상 불가능할 수 있음)
-            if (depId === destId) continue;
-
-            requestPromises.push(
-              apiClient.get('/rooms/search', {
-                params: {
-                  departureId: depId,
-                  destinationId: destId,
-                  page: pageNumber,
-                  size: 10, // 각 요청당 10개씩 (합치면 많아질 수 있음)
-                  sort: ['departureTime,asc'],
-                },
-              })
-            );
-          }
-        }
+        const params = {
+          departureId: departureId === 0 ? null : departureId,
+          destinationId: destinationId === 0 ? null : destinationId,
+          page: pageNumber,
+          size: 10,
+          sort: 'departureTime,asc',
+        };
 
-        // 3. 모든 API 요청 병렬 실행
-        const responses = await Promise.all(requestPromises);
-
-        // 4. 결과 취합 및 데이터 매핑
-        let aggregatedRooms: RoomData[] = [];
-        let isAllLast = true; // 모든 요청이 마지막 페이지인지 확인
-
-        for (const res of responses) {
-          const content = res.data.content || [];
-          // 하나라도 마지막 페이지가 아니면(데이터가 더 있으면) hasMore는 true
-          if (res.data.last === false) {
-            isAllLast = false;
-          }
-
-          // biome-ignore lint/suspicious/noExplicitAny: API 응답 처리
-          const mapped = content.map((item: any) => ({
-            roomId: item.id,
-            departure: getLandmarkName(item.departureId),
-            destination: getLandmarkName(item.destinationId),
-            departureTime: item.departureTime,
-            maxCapacity: item.maxCapacity,
-            currentCapacity: item.currentCount,
-            hostName: `학우 ${item.ownerId}`,
-          }));
-          aggregatedRooms = [...aggregatedRooms, ...mapped];
-        }
+        const response = await apiClient.get('/rooms/search', { params });
+        const content = response.data.content || [];
 
-        // 5. 시간순 정렬 (여러 API 결과를 합쳤으므로 순서가 섞여있을 수 있음)
-        aggregatedRooms.sort(
-          (a, b) =>
-            new Date(a.departureTime).getTime() -
-            new Date(b.departureTime).getTime()
-        );
+        const newRooms: RoomData[] = content.map((item: PotDto) => ({
+          roomId: item.id,
+          departure: getLandmarkName(item.departureId),
+          destination: getLandmarkName(item.destinationId),
+          departureTime: item.departureTime,
+          maxCapacity: item.maxCapacity,
+          currentCapacity: item.currentCount,
+          hostName: `학우 ${item.ownerId}`,
+        }));
+
+        const isLast = response.data.last ?? newRooms.length === 0;
 
-        // 6. 상태 업데이트
         if (isNewSearch) {
-          setRooms(aggregatedRooms);
+          setRooms(newRooms);
         } else {
           setRooms((prev) => {
-            // 중복 제거 (여러 페이지 요청 시 겹칠 수 있는 가능성 대비)
             const existingIds = new Set(prev.map((r) => r.roomId));
-            const uniqueNewRooms = aggregatedRooms.filter(
+            const uniqueRooms = newRooms.filter(
               (r) => !existingIds.has(r.roomId)
             );
-            return [...prev, ...uniqueNewRooms].sort(
-              (a, b) =>
-                new Date(a.departureTime).getTime() -
-                new Date(b.departureTime).getTime()
-            );
+            return [...prev, ...uniqueRooms];
           });
         }
 
-        // 데이터가 하나도 없거나, 모든 요청이 마지막 페이지라면 더 이상 불러올 게 없음
-        setHasMore(!isAllLast && aggregatedRooms.length > 0);
+        setHasMore(!isLast);
       } catch (error) {
         console.error('방 목록 불러오기 실패:', error);
       } finally {
@@ -147,14 +127,14 @@ const RoomSearch = () => {
     [departureId, destinationId]
   );
 
-  // --- Effect 1: 필터 변경 시 (페이지 0부터 재검색) ---
+  // --- Effect 1: 필터 변경 시 ---
   useEffect(() => {
     setPage(0);
     setHasMore(true);
     fetchRooms(0, true);
   }, [fetchRooms]);
 
-  // --- Effect 2: 페이지 변경 시 (추가 로드) ---
+  // --- Effect 2: 페이지 변경 시 ---
   useEffect(() => {
     if (page > 0) {
       fetchRooms(page, false);
@@ -185,9 +165,49 @@ const RoomSearch = () => {
     };
   }, [loading, hasMore]);
 
-  const handleRoomClick = (_roomId: number) => {
-    // console.log(`${roomId}번 방 클릭`);
-    // navigate(`/room/${roomId}`);
+  // --- 핸들러: 방 클릭 ---
+  const handleRoomClick = (roomId: number) => {
+    setSelectedRoomId(roomId);
+
+    // [수정] atom 값(isLoggedIn)을 사용하여 분기 처리
+    if (isLoggedIn) {
+      // 로그인 상태 -> 참여 확인 모달
+      setShowJoinModal(true);
+    } else {
+      // 비로그인 상태 -> 로그인 유도 모달
+      setShowLoginModal(true);
+    }
+  };
+
+  // --- 핸들러: 로그인 버튼 클릭 ---
+  const handleLoginConfirm = () => {
+    const frontendRedirectUri = window.location.origin;
+    const encodedUri = encodeURIComponent(frontendRedirectUri);
+    const googleLoginUrl = `${BACKEND_URL}/login?redirect_uri=${encodedUri}`;
+    window.location.href = googleLoginUrl;
+  };
+
+  // --- 핸들러: 참여하기 버튼 클릭 ---
+  const handleJoinConfirm = async () => {
+    if (!selectedRoomId) return;
+
+    try {
+      await apiClient.post(`/rooms/${selectedRoomId}/join`);
+      navigate('/my-chat');
+    } catch (error) {
+      const axiosError = error as AxiosError<{ errMsg: string }>;
+      const errMsg =
+        axiosError.response?.data?.errMsg || '참여에 실패했습니다.';
+
+      alert(errMsg);
+      setShowJoinModal(false);
+    }
+  };
+
+  const closeModals = () => {
+    setShowLoginModal(false);
+    setShowJoinModal(false);
+    setSelectedRoomId(null);
   };
 
   const handleFilterChange = (
@@ -249,8 +269,98 @@ const RoomSearch = () => {
           </div>
         )}
       </div>
+
+      {/* --- 모달 UI (인라인 스타일 적용) --- */}
+      {(showLoginModal || showJoinModal) && (
+        <div style={modalOverlayStyle}>
+          <div style={modalContentStyle}>
+            {showLoginModal && (
+              <>
+                <p>택시팟에 참여하시려면 로그인이 필요합니다.</p>
+                <div style={buttonGroupStyle}>
+                  <button onClick={closeModals} style={cancelButtonStyle}>
+                    뒤로가기
+                  </button>
+                  <button
+                    onClick={handleLoginConfirm}
+                    style={confirmButtonStyle}
+                  >
+                    로그인
+                  </button>
+                </div>
+              </>
+            )}
+            {showJoinModal && (
+              <>
+                <p>택시팟에 참가하시겠습니까?</p>
+                <div style={buttonGroupStyle}>
+                  <button onClick={closeModals} style={cancelButtonStyle}>
+                    뒤로가기
+                  </button>
+                  <button
+                    onClick={handleJoinConfirm}
+                    style={confirmButtonStyle}
+                  >
+                    참여하기
+                  </button>
+                </div>
+              </>
+            )}
+          </div>
+        </div>
+      )}
     </div>
   );
 };
 
+// --- 간단한 모달 스타일 (필요시 CSS 파일로 이동) ---
+const modalOverlayStyle: React.CSSProperties = {
+  position: 'fixed',
+  top: 0,
+  left: 0,
+  width: '100%',
+  height: '100%',
+  backgroundColor: 'rgba(0, 0, 0, 0.5)',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  zIndex: 1000,
+};
+
+const modalContentStyle: React.CSSProperties = {
+  backgroundColor: 'white',
+  padding: '24px',
+  borderRadius: '12px',
+  width: '300px',
+  textAlign: 'center',
+  boxShadow: '0 2px 10px rgba(0,0,0,0.2)',
+};
+
+const buttonGroupStyle: React.CSSProperties = {
+  display: 'flex',
+  justifyContent: 'space-between',
+  marginTop: '20px',
+  gap: '10px',
+};
+
+const cancelButtonStyle: React.CSSProperties = {
+  flex: 1,
+  padding: '10px',
+  borderRadius: '8px',
+  border: '1px solid #ccc',
+  backgroundColor: '#f5f5f5',
+  cursor: 'pointer',
+};
+
+const confirmButtonStyle: React.CSSProperties = {
+  flex: 1,
+  padding: '10px',
+  borderRadius: '8px',
+  border: 'none',
+  backgroundColor: '#3b82f6',
+  color: 'white',
+  cursor: 'pointer',
+  fontWeight: 'bold',
+};
+
 export default RoomSearch;
