Feat : 모든 오픈 채팅방 목록 화면에 보여주기

Components/Search/FilterOpenChat.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { AllOpenChat } from '@/app/search/search.type';
+
+const FilterOpenChat = ({ initialData }: { initialData: AllOpenChat }) => {
+	console.log(initialData);
+	return (
+		<>
+			<hr />
+			<h2>FilterOpenChat</h2>
+			<hr />
+		</>
+	);
+};
+
+export default FilterOpenChat;

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,14 @@
+import React from 'react';
+import { AllOpenChat } from '@/app/search/search.type';
+
+const SearchOpenChat = ({ initialData }: { initialData: AllOpenChat }) => {
+	console.log(initialData);
+	return (
+		<>
+			<hr />
+			<h2>SearchOpenChat</h2>
+		</>
+	);
+};
+
+export default SearchOpenChat;

Components/Search/ShowAllOpenChat.tsx

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

app/search/page.tsx

@@ -1,15 +1,19 @@
 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.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 initialData={allOpenChat} />
+			<FilterOpenChat initialData={allOpenChat} />
+			<ShowAllOpenChat 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}`,
 		},
 	};