diff --git a/Components/Search/FilterOpenChat.tsx b/Components/Search/FilterOpenChat.tsx
deleted file mode 100644
index c98f940..0000000
--- a/Components/Search/FilterOpenChat.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import React from 'react';
-import { AllOpenChat } from '@/app/search/search.type';
-
-const FilterOpenChat = ({ initialData }: { initialData: AllOpenChat }) => {
- console.log(initialData);
- return (
- <>
-
- FilterOpenChat
-
- >
- );
-};
-
-export default FilterOpenChat;
diff --git a/Components/Search/SearchOpenChat.tsx b/Components/Search/SearchOpenChat.tsx
index 7185aac..d64a248 100644
--- a/Components/Search/SearchOpenChat.tsx
+++ b/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);
+
+ const getUserInput = (e: React.ChangeEvent) => {
+ 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 (
<>
-
- SearchOpenChat
+
+ {searched.map((item) => (
+
+ ))}
>
);
};
diff --git a/Components/Search/ShowAllOpenChat.tsx b/Components/Search/ShowAllOpenChat.tsx
index 15e91d3..0a8d552 100644
--- a/Components/Search/ShowAllOpenChat.tsx
+++ b/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 (
- {allOpenChat.map((openChat) => (
+ {
-
- ))}
+ }
);
};
diff --git a/app/search/page.tsx b/app/search/page.tsx
index c1d1d4f..4a09e7b 100644
--- a/app/search/page.tsx
+++ b/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 (
<>
-
-
-
+
>
);
};