Merge pull request #12 from MOVIEJOJO7/Feature/#11

Feat : 오픈 채팅방 목록 검색 기능

Components/Search/SearchOpenChat.tsx

@@ -1,12 +1,27 @@
-import React from 'react';
+'use client';
+
+import React, { useState } 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 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 SearchOpenChat = ({ initialData }: { initialData: AllOpenChat }) => {
-	console.log(initialData);
 	return (
 		<>
-			<hr />
-			<h2>SearchOpenChat</h2>
+			<input onChange={getUserInput} />
+			{searched.map((item) => (
+				<ShowAllOpenChat key={item.id} openChat={item} />
+			))}
 		</>
 	);
 };

Components/Search/ShowAllOpenChat.tsx

@@ -1,18 +1,17 @@
 import React from 'react';
-import { AllOpenChat } from '@/app/search/search.type';
+import { Chat } from '@/app/search/search.type';
 import OpenChatText from './OpenChatText';
 import OpenChatPicture from './OpenChatPicture';
 
-// 채팅방 이름, 채팅방 참여자 수, 최근 대화 시간
-const ShowAllOpenChat = ({ allOpenChat }: { allOpenChat: AllOpenChat }) => {
+const ShowAllOpenChat = ({ openChat }: { openChat: Chat }) => {
 	return (
 		<ul>
-			{allOpenChat.map((openChat) => (
+			{
 				<li key={openChat.id}>
 					<OpenChatText openChat={openChat} />
 					<OpenChatPicture openChatUsers={openChat.users} />
 				</li>
-			))}
+			}
 		</ul>
 	);
 };

app/search/page.tsx

@@ -1,8 +1,6 @@
 import React from 'react';
 import { fetchAllOpenChat } from './search.utils';
 import SearchOpenChat from '../../Components/Search/SearchOpenChat';
-import FilterOpenChat from '../../Components/Search/FilterOpenChat';
-import ShowAllOpenChat from '../../Components/Search/ShowAllOpenChat';
 
 const accessToken = process.env.NEXT_PUBLIC_ACCESSTOKEN as string; // 임시 access token
 
@@ -11,9 +9,7 @@ const Search = async () => {
 
 	return (
 		<>
-			<SearchOpenChat initialData={allOpenChat} />
-			<FilterOpenChat initialData={allOpenChat} />
-			<ShowAllOpenChat allOpenChat={allOpenChat} />
+			<SearchOpenChat allOpenChat={allOpenChat} />
 		</>
 	);
 };