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 ( <> - - - + ); };