feat: create searchroom page (#8)

방 검색 페이지 구현
mock data로 구현함

Author: jylee05

src/App.tsx

@@ -1,7 +1,13 @@
+import RoomSearch from './pages/SearchRoom/RoomSearch';
 import Router from './router/Router';
 
 const App = () => {
-  return <Router />;
+  return (
+    <div>
+      <Router />
+      <RoomSearch />
+    </div>
+  );
 };
 
 export default App;

src/pages/SearchRoom/RoomCard.css

@@ -0,0 +1,55 @@
+/* RoomCard.css */
+.room-card {
+  background-color: white;
+  border: 1px solid #ddd;
+  border-radius: 8px;
+  padding: 15px;
+  margin-bottom: 12px;
+  cursor: pointer;
+  transition: box-shadow 0.2s;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.room-card:hover {
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  border-color: #aaa;
+}
+
+.room-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.room-name {
+  font-weight: bold;
+  font-size: 1.1rem;
+}
+
+.room-user {
+  font-size: 0.8rem;
+  color: #666;
+}
+
+.room-route {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  background-color: #f9f9f9;
+  padding: 8px;
+  border-radius: 4px;
+}
+
+.room-details {
+  display: flex;
+  justify-content: space-between;
+  font-size: 0.9rem;
+  margin-top: 5px;
+}
+
+.room-headcount.full {
+  color: red;
+  font-weight: bold;
+}

src/pages/SearchRoom/RoomCard.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import './RoomCard.css'; // 스타일은 별도 파일 또는 기존 CSS 활용
+import { type RoomData } from '../../types'; // 위에서 정의한 타입 import
+
+interface RoomCardProps {
+  room: RoomData;
+  onClick: (roomId: number) => void;
+}
+
+const RoomCard: React.FC<RoomCardProps> = ({ room, onClick }) => {
+  // 날짜 포맷팅 (보기 좋게 변환)
+  const formattedDate = new Date(room.time).toLocaleString('ko-KR', {
+    month: 'long',
+    day: 'numeric',
+    hour: '2-digit',
+    minute: '2-digit',
+  });
+
+  return (
+    <div className="room-card" onClick={() => onClick(room.roomId)}>
+      <div className="room-header">
+        <span className="room-name">{room.name}</span>
+        <span className="room-user">방장: {room.user}</span>
+      </div>
+
+      <div className="room-route">
+        <span className="location">{room.from}</span>
+        <span className="arrow">→</span>
+        <span className="location">{room.to}</span>
+      </div>
+
+      <div className="room-details">
+        <span className="room-time">🕒 {formattedDate}</span>
+        <span
+          className={`room-headcount ${room.currentHeadcount === room.maxHeadcount ? 'full' : ''}`}
+        >
+          👤 {room.currentHeadcount} / {room.maxHeadcount}
+        </span>
+      </div>
+    </div>
+  );
+};
+
+export default RoomCard;

src/pages/SearchRoom/RoomSearch.css

@@ -0,0 +1,74 @@
+/* RoomSearch.css */
+.search-filter-card {
+  background: #fff;
+  padding: 20px;
+  border-radius: 10px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  margin-bottom: 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+}
+
+.filter-row {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+}
+
+.filter-row select,
+.filter-row input {
+  padding: 10px;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  flex: 1;
+}
+
+.search-btn {
+  background-color: #007bff;
+  color: white;
+  border: none;
+  padding: 10px 20px;
+  border-radius: 5px;
+  cursor: pointer;
+  white-space: nowrap;
+}
+
+.room-list {
+  display: flex;
+  flex-direction: column;
+}
+
+.no-result {
+  text-align: center;
+  padding: 40px;
+  color: #666;
+}
+
+.pagination {
+  display: flex;
+  justify-content: center;
+  gap: 5px;
+  margin-top: 20px;
+  margin-bottom: 40px;
+}
+
+.pagination button {
+  padding: 8px 12px;
+  border: 1px solid #ddd;
+  background: white;
+  cursor: pointer;
+  border-radius: 4px;
+}
+
+.pagination button.active {
+  background-color: #007bff;
+  color: white;
+  border-color: #007bff;
+}
+
+.pagination button:disabled {
+  background-color: #f0f0f0;
+  cursor: not-allowed;
+  color: #aaa;
+}