Merge branch 'main' of https://github.com/MOVIEJOJO7/cat-talk into Fe…

…ature/#2

Components/Search/OpenChatPicture.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { User } from '@/app/search/search.type';
+
+const OpenChatPicture = ({ openChatUsers }: { openChatUsers: User[] }) => {
+	let userCount = 0;
+
+	return (
+		<>
+			<ol>
+				{openChatUsers.map((user) => {
+					userCount++;
+
+					if (userCount > 4) {
+						return null; // 사진이 4개 이상인 경우 렌더링을 하지 않음
+					}
+
+					return (
+						<li key={user.id}>
+							<img src={user.picture} alt="user picture" />
+						</li>
+					);
+				})}
+			</ol>
+		</>
+	);
+};
+
+export default OpenChatPicture;

Components/Search/OpenChatText.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Chat } from '@/app/search/search.type';
+
+const OpenChatText = ({ openChat }: { openChat: Chat }) => {
+	return (
+		<>
+			<h2>{openChat.name}</h2>
+			<span>{openChat.users.length}</span>
+			<span>{openChat.updatedAt.toString()}</span>
+		</>
+	);
+};
+
+export default OpenChatText;

Components/Search/SearchOpenChat.tsx

@@ -0,0 +1,29 @@
+'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),
+	);
+
+	return (
+		<>
+			<input onChange={getUserInput} />
+			{searched.map((item) => (
+				<ShowAllOpenChat key={item.id} openChat={item} />
+			))}
+		</>
+	);
+};
+
+export default SearchOpenChat;

Components/Search/ShowAllOpenChat.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { Chat } from '@/app/search/search.type';
+import OpenChatText from './OpenChatText';
+import OpenChatPicture from './OpenChatPicture';
+
+const ShowAllOpenChat = ({ openChat }: { openChat: Chat }) => {
+	return (
+		<ul>
+			{
+				<li key={openChat.id}>
+					<OpenChatText openChat={openChat} />
+					<OpenChatPicture openChatUsers={openChat.users} />
+				</li>
+			}
+		</ul>
+	);
+};
+
+export default ShowAllOpenChat;

app/search/page.tsx

@@ -1,15 +1,15 @@
 import React from 'react';
 import { fetchAllOpenChat } from './search.utils';
+import SearchOpenChat from '../../Components/Search/SearchOpenChat';
 
-const accessToken = process.env.ACCESSTOKEN as string; // 임시 access token
+const accessToken = process.env.NEXT_PUBLIC_ACCESSTOKEN as string; // 임시 access token
 
 const Search = async () => {
 	const allOpenChat = await fetchAllOpenChat(accessToken);
-	console.log(allOpenChat);
 
 	return (
 		<>
-			<h1>Search 페이지</h1>
+			<SearchOpenChat allOpenChat={allOpenChat} />
 		</>
 	);
 };

app/search/search.type.ts

@@ -1,10 +1,12 @@
+// search.type.ts
+
 export type AllOpenChat = Chat[];
 
 export type AllOpenChatJSON = {
 	chats: AllOpenChat;
 };
 
-type Chat = {
+export type Chat = {
 	id: string;
 	name: string;
 	users: User[];
@@ -13,7 +15,7 @@ type Chat = {
 	updatedAt: Date;
 };
 
-type User = {
+export type User = {
 	id: string;
 	name: string;
 	picture: string;

app/search/search.utils.ts

@@ -6,7 +6,7 @@ export const fetchAllOpenChat = async (accessToken: string) => {
 		method: GET,
 		headers: {
 			'content-type': CONTENT_TYPE,
-			serverId: process.env.SERVER_ID as string, // 서버 아이디 임시 사용
+			serverId: process.env.NEXT_PUBLIC_SERVER_ID as string, // 서버 아이디 임시 사용
 			Authorization: `Bearer ${accessToken}`,
 		},
 	};