Merge pull request #14 from MOVIEJOJO7/Feature/#13

Feat : 오픈 채팅방 목록 검색 세부 기능 추가

Components/Search/SearchOpenChat.tsx

@@ -1,27 +1,40 @@
 'use client';
 
-import React, { useState } from 'react';
+import React, { useState, useCallback } from 'react';
 import { AllOpenChat } from '@/app/search/search.type';
 import ShowAllOpenChat from './ShowAllOpenChat';
 
 const SearchOpenChat = ({ allOpenChat }: { allOpenChat: AllOpenChat }) => {
 	const [userInput, setUserInput] = useState('');
-	const [openChats] = useState<AllOpenChat>(allOpenChat);
+	const [searched, setSearched] = useState<AllOpenChat>(allOpenChat);
 
 	const getUserInput = (e: React.ChangeEvent<HTMLInputElement>) => {
 		setUserInput(e.target.value.toLowerCase().replace(/(\s*)/g, ''));
 	};
 
-	const searched = openChats.filter((item) =>
-		item.name.toLowerCase().replace(/(\s*)/g, '').includes(userInput),
-	);
+	const handleKeyPress = (e: React.KeyboardEvent<HTMLInputElement>) => {
+		if (e.key === 'Enter') {
+			search();
+		}
+	};
+
+	const search = useCallback(() => {
+		const result = allOpenChat.filter((item) =>
+			item.name.toLowerCase().replace(/(\s*)/g, '').includes(userInput),
+		);
+		setSearched(result);
+	}, [userInput, allOpenChat]);
 
 	return (
 		<>
-			<input onChange={getUserInput} />
-			{searched.map((item) => (
-				<ShowAllOpenChat key={item.id} openChat={item} />
-			))}
+			<input onChange={getUserInput} onKeyPress={handleKeyPress} />
+			{searched.length ? (
+				searched.map((item) => (
+					<ShowAllOpenChat key={item.id} openChat={item} />
+				))
+			) : (
+				<h1>검색 결과가 없습니다.</h1>
+			)}
 		</>
 	);
 };