feat: 방 검색 기능, 검색어 리셋, 퀴즈 수정 기능 구현

Author: tech-kms-jake

src/layout/game/components/GameSettings.js

@@ -36,9 +36,8 @@ function GameSettings({ roomId }) {
                   className="w-full px-4 py-3 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors font-medium"
                   onClick={() => setQuizSelectModalOpen(true)}
               >
-                {selectedQuiz ? selectedQuiz.title : "퀴즈 선택"}
+                {"퀴즈 선택"}
               </button>
-              {selectedQuiz && <p className="text-sm text-gray-600 mt-2">{selectedQuiz.description}</p>}
             </div>
             <div className="grid grid-cols-2 gap-4">
               <div>

src/pages/quiz/EditQuiz.js

@@ -1,9 +1,7 @@
 import styles from './quiz.module.scss';
 import {Image, Stack} from "react-bootstrap";
-import sample from '../../assets/images/sample.png';
 
 const QuizCard = ({ quiz, onClick }) => {
-    console.log(quiz)
     return (
         <div 
             className={`${styles.quizCard} position-relative`} 

src/pages/quiz/QuizCard.js

@@ -101,7 +101,7 @@ const QuizDetailModal = ({ isOpen, onClose, quiz }) => {
                 <Stack direction="horizontal" gap={3}>
                     <Button 
                         variant="outline-primary"
-                        onClick={() => navigate(`${quiz.id}/edit`)}
+                        onClick={() => navigate(`${quiz.quizId}/edit`)}
                         className="px-4 py-2 fw-medium rounded-3"
                     >
                         퀴즈 수정

src/pages/quiz/QuizDetailModal.js

@@ -15,7 +15,7 @@ const options = [
     { value: 'creator', label: '제작자' },
 ];
 
-const quizRequest = async (params = {}) => {
+const quizListRequest = async (params = {}) => {
     const response = await axios.get('/quizzes', { params });
     return response.data;
 };
@@ -33,7 +33,7 @@ const QuizList = () => {
     });
     const { data, refetch } = useApiQuery(
         ['quizList', queryParams],
-        () => quizRequest(queryParams),
+        () => quizListRequest(queryParams),
         {
             keepPreviousData: true,
             staleTime: 1000 * 60 * 5,
@@ -85,6 +85,17 @@ const QuizList = () => {
         window.scrollTo({ top: 0, behavior: 'smooth' });
     };
 
+    const handleReset = () => {
+        setKeyword('');
+        setQueryParams({
+            page: 1,
+            size: 8,
+            title: '',
+            creator: '',
+        });
+        // setSearchOn(false);
+    };
+
     return (
         <Container fluid className="px-4">
             {/* 검색 영역과 퀴즈 생성 버튼 */}
@@ -99,14 +110,21 @@ const QuizList = () => {
                                                   onChange={handleSearchTypeChange}
                                 />
                             </div>
-                            <Form.Control
-                                type="text"
-                                placeholder="검색어를 입력하세요..."
-                                value={keyword}
-                                onChange={(e) => setKeyword(e.target.value)}
-                                onKeyDown={handleKeyDown}
-                                className={`flex-fill ${styles.searchInput}`}
-                            />
+                            <div className={styles.searchInputWrapper}>
+                                <Form.Control
+                                    type="text"
+                                    placeholder="검색어를 입력하세요..."
+                                    value={keyword}
+                                    onChange={(e) => setKeyword(e.target.value)}
+                                    onKeyDown={handleKeyDown}
+                                    className={`flex-fill ${styles.searchInput}`}
+                                />
+                                {keyword && (
+                                    <button className={styles.clearButton} onClick={handleReset}>
+                                        ✕
+                                    </button>
+                                )}
+                            </div>
                             <Button variant="danger" type="submit" className={`${styles.buttonBase} ${styles.searchButton}`}>
                                 검색
                             </Button>

src/pages/quiz/QuizList.js

@@ -51,6 +51,7 @@
 
 .createButton {
   min-width: 140px;
+  margin-top: 2px;
   background: linear-gradient(145deg, #ffd700, #ffb300);
   color: #333;
   box-shadow: 0 2px 8px rgba(255, 215, 0, 0.25);
@@ -63,4 +64,21 @@
   border-radius: 12px;
   font-size: 14px;
   padding: 0 16px;
-}
+}
+
+.searchInputWrapper {
+  position: relative;
+  display: flex;
+  align-items: center;
+  flex: 1;
+}
+
+.clearButton {
+  position: absolute;
+  right: 8px;
+  background: transparent;
+  border: none;
+  font-size: 16px;
+  cursor: pointer;
+  color: #aaa;
+}

src/pages/quiz/quiz.module.scss

@@ -28,14 +28,15 @@ const enterRoomRequest = async (params) => {
 }
 
 const RoomList = () => {
-  const [searchTerm, setSearchTerm] = useState("")
-  const [currentPage, setCurrentPage] = useState(1)
-  const [rooms, setRooms] = useState([])
-  const [filteredRooms, setFilteredRooms] = useState([])
-  const [isModalOpen, setIsModalOpen] = useState(false)
-  const [isFullModalOpen, setIsFullModalOpen] = useState(false)
-  const [isPasswordModalOpen, setIsPasswordModalOpen] = useState(false)
-  const [selectedRoom, setSelectedRoom] = useState(null)
+  const [searchTerm, setSearchTerm] = useState("");
+  const [currentPage, setCurrentPage] = useState(1);
+  const [rooms, setRooms] = useState([]);
+  const [filteredRooms, setFilteredRooms] = useState([]);
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [isFullModalOpen, setIsFullModalOpen] = useState(false);
+  const [isPasswordModalOpen, setIsPasswordModalOpen] = useState(false);
+  const [selectedRoom, setSelectedRoom] = useState(null);
+  const [searchOn, setSearchOn] = useState(false);
   const navigate = useNavigate();
   const ROOMS_PER_PAGE = 8 // 한 페이지당 8개
 
@@ -61,18 +62,25 @@ const RoomList = () => {
 
   useEffect(() => {
     if (data) {
-      setRooms(data.rooms)
-      setFilteredRooms(data.rooms)
+      setRooms(data.rooms);
+      setFilteredRooms(data.rooms);
     }
   }, [data])
 
   const handleSearch = () => {
-    // 검색 로직 구현
-    const filtered = rooms.filter((room) => room.title.toLowerCase().includes(searchTerm.toLowerCase()))
-    setFilteredRooms(filtered)
-    setCurrentPage(1) // 검색 시 첫 페이지로 이동
+    const filtered = rooms.filter((room) => room.roomName.toLowerCase().includes(searchTerm.toLowerCase()));
+    setFilteredRooms(filtered);
+    setCurrentPage(1); // 검색 시 첫 페이지로 이동
+    setSearchOn(true);
   }
 
+  const handleReset = () => {
+    setSearchTerm('');
+    setFilteredRooms(rooms);
+    setCurrentPage(1); // 검색 시 첫 페이지로 이동
+    setSearchOn(false);
+  };
+
   const handleCreateRoom = (newRoomData) => {
     createRoomMutate(newRoomData);
     setIsModalOpen(false);
@@ -91,10 +99,6 @@ const RoomList = () => {
     enterRoomMutate({ roomId: room.roomId, password: password });
   }
 
-  const handlePageChange = (page) => {
-    setCurrentPage(page)
-  }
-
   const handleKeyPress = (e) => {
     if (e.key === "Enter") {
       handleSearch()
@@ -117,14 +121,24 @@ const RoomList = () => {
         {/* Search Section */}
         <section className={styles.searchSection}>
           <div className={styles.searchInputGroup}>
-            <input
-              type="text"
-              className={styles.searchInput}
-              placeholder="방 제목을 입력하세요..."
-              value={searchTerm}
-              onChange={(e) => setSearchTerm(e.target.value)}
-              onKeyPress={handleKeyPress}
-            />
+            <div className={styles.searchInputWrapper}>
+              <input
+                  type="text"
+                  className={styles.searchInput}
+                  placeholder="방 제목을 입력하세요..."
+                  value={searchTerm}
+                  onChange={(e) => {
+                    setSearchTerm(e.target.value);
+                    setSearchOn(false);
+                  }}
+                  onKeyPress={handleKeyPress}
+              />
+              {searchTerm && (
+                  <button className={styles.clearButton} onClick={handleReset}>
+                    ✕
+                  </button>
+              )}
+            </div>
             <button className={styles.searchButton} onClick={handleSearch}>
               검색
             </button>
@@ -135,7 +149,7 @@ const RoomList = () => {
         </section>
 
         {/* 검색 결과 정보 */}
-        {searchTerm && (
+        {searchTerm && searchOn && (
           <div className={styles.searchInfo}>
             <p>
               "{searchTerm}" 검색 결과: {filteredRooms.length}개의 방

src/pages/room/RoomList.js

@@ -103,6 +103,27 @@ body {
   gap: 15px;
 }
 
+.searchInputWrapper {
+  position: relative;
+  display: flex;
+  align-items: center;
+  flex: 1;
+}
+
+//.searchInput {
+//  padding-right: 30px; /* X 버튼 영역 확보 */
+//}
+
+.clearButton {
+  position: absolute;
+  right: 8px;
+  background: transparent;
+  border: none;
+  font-size: 16px;
+  cursor: pointer;
+  color: #aaa;
+}
+
 .searchLabel {
   font-size: 16px;
   font-weight: bold;
@@ -892,3 +913,4 @@ body {
     }
   }
 }
+

src/pages/room/room.module.scss

@@ -12,6 +12,7 @@ import Rank from "../pages/rank/Rank";
 import MyPage from "../pages/mypage/MyPage";
 import HostPage from "../pages/game/HostPage";
 import ParticipantPage from "../pages/game/ParticipantPage";
+import EditQuiz from "../pages/quiz/EditQuiz";
 
 const BaseRoutes = () => {
     return (
@@ -30,7 +31,7 @@ const BaseRoutes = () => {
             <Route path="/quiz" element={<Layout />}>
                 <Route index element={<QuizList />} />
                 <Route path={"create"} element={<CreateQuiz />} />
-                <Route path={":id/edit"} element={<CreateQuiz />} />
+                <Route path={":id/edit"} element={<EditQuiz />} />
             </Route>
             <Route path="/rank" element={<Layout />}>
                 <Route index element={<Rank />} />