Merge pull request #6 from MOVIEJOJO7/Feature/#5

Feat : 모든 오픈 채팅방 목록 불러오기
MOVIEJOJO7 · Nov 9, 2023 · e6f751b · e6f751b
2 parents c6b95f1 + 5265eee
commit e6f751b
Show file tree

Hide file tree

Showing 13 changed files with 169 additions and 1 deletion.
diff --git a/Components/Wrapper.tsx b/Components/Wrapper.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+
+const Wrapper = ({ children }: { children: React.ReactNode }) => {
+	return (
+		<section className="w-full sm:w-[425px] md:w-[645px] px-5 h-screen flex flex-col mx-auto bg-orange-300">
+			<header className="flex h-10 justify-between items-center bg-blue-700">
+				헤더
+			</header>
+			{children}
+		</section>
+	);
+};
+
+export default Wrapper;
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -2,6 +2,7 @@ import type { Metadata } from 'next';
 import { Inter } from 'next/font/google';
 import './globals.css';
 import ClientProviders from '@/Components/Provider/ClientProvider';
+import Wrapper from '@/Components/Wrapper';
 
 const inter = Inter({ subsets: ['latin'] });
 
@@ -18,7 +19,11 @@ export default function RootLayout({
 	return (
 		<html lang="en">
 			<body className={inter.className}>
-				<ClientProviders>{children}</ClientProviders>
+				<ClientProviders>
+					<div className="bg-gray-500 h-screen">
+						<Wrapper>{children}</Wrapper>
+					</div>
+				</ClientProviders>
 			</body>
 		</html>
 	);

diff --git a/app/open/open.constant.ts b/app/open/open.constant.ts
@@ -0,0 +1 @@
+export const 문자열 = '문자열';
diff --git a/app/open/open.type.ts b/app/open/open.type.ts
@@ -0,0 +1,3 @@
+export type 모든것 = {
+	name: string;
+};
diff --git a/app/open/open.utils.ts b/app/open/open.utils.ts
@@ -0,0 +1,12 @@
+export const fetchAllChat = async (token: string, userId: string) => {
+	const res = await fetch('https://fastcampus-chat.net/chat', {
+		method: 'GET',
+		headers: {
+			'Content-Type': 'application/json',
+			Authorization: `Bearer ${token}`,
+			serverId: process.env.SERVER_KEY as string,
+		},
+	});
+	const data = await res.json();
+	return data;
+};
diff --git a/app/open/page.tsx b/app/open/page.tsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import { fetchAllChat } from './open.utils';
+
+type ChatData = {
+	id: string;
+	name: string;
+	users: string[];
+	isPrivate: boolean;
+	latestMessage: string;
+	updatedAt: string;
+};
+
+const Open = async () => {
+	const accessToken = process.env.ACCESS_TOKEN as string;
+	const result = await fetchAllChat(accessToken, 'minseob');
+	console.log(result);
+	return (
+		<div className="flex flex-col bg-red-300">
+			{result.chats.map((chat: ChatData) => {
+				return (
+					<div key={chat.id}>
+						<div>{chat.name}</div>
+					</div>
+				);
+			})}
+		</div>
+	);
+};
+
+export default Open;
diff --git a/app/search/page.tsx b/app/search/page.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import { fetchAllOpenChat } from './search.utils';
+
+const accessToken = process.env.ACCESSTOKEN as string; // 임시 access token
+
+const Search = async () => {
+	const allOpenChat = await fetchAllOpenChat(accessToken);
+	console.log(allOpenChat);
+
+	return (
+		<>
+			<h1>Search 페이지</h1>
+		</>
+	);
+};
+
+export default Search;
diff --git a/app/search/search.constant.ts b/app/search/search.constant.ts
@@ -0,0 +1,9 @@
+// http Method
+export const GET = 'GET';
+
+// API URL
+export const BASE_URL = 'https://fastcampus-chat.net/';
+export const GET_CHAT_ALL = 'chat/all';
+
+// API Request 조건 정보
+export const CONTENT_TYPE = 'application/json';
diff --git a/app/search/search.type.ts b/app/search/search.type.ts
@@ -0,0 +1,36 @@
+export type AllOpenChat = Chat[];
+
+export type AllOpenChatJSON = {
+	chats: AllOpenChat;
+};
+
+type Chat = {
+	id: string;
+	name: string;
+	users: User[];
+	isPrivate: boolean;
+	latestMessage: Message | null;
+	updatedAt: Date;
+};
+
+type User = {
+	id: string;
+	name: string;
+	picture: string;
+};
+
+type Message = {
+	id: string;
+	text: string;
+	userId: string;
+	createAt: Date;
+};
+
+export type Request = {
+	method: string;
+	headers: {
+		'content-type': string;
+		serverId: string;
+		Authorization: string;
+	};
+};
diff --git a/app/search/search.utils.ts b/app/search/search.utils.ts
@@ -0,0 +1,19 @@
+import { Request, AllOpenChatJSON, AllOpenChat } from './search.type';
+import { GET, CONTENT_TYPE, BASE_URL, GET_CHAT_ALL } from './search.constant';
+
+export const fetchAllOpenChat = async (accessToken: string) => {
+	const Request: Request = {
+		method: GET,
+		headers: {
+			'content-type': CONTENT_TYPE,
+			serverId: process.env.SERVER_ID as string, // 서버 아이디 임시 사용
+			Authorization: `Bearer ${accessToken}`,
+		},
+	};
+
+	const res = await fetch(`${BASE_URL}${GET_CHAT_ALL}`, Request);
+	const resJson: AllOpenChatJSON = await res.json();
+	const allOpenChat: AllOpenChat = resJson.chats;
+
+	return allOpenChat;
+};
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -18,6 +18,7 @@
     "next": "14.0.1",
     "react": "^18",
     "react-dom": "^18",
+    "react-hook-form": "^7.48.2",
     "recoil": "^0.7.7",
     "socket.io": "^4.7.2"
   },

diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -11,6 +11,11 @@ const config: Config = withMT({
 		'path-to-your-node_modules/@material-tailwind/react/theme/components/**/*.{js,ts,jsx,tsx}',
 	],
 	theme: {
+		screens: {
+			sm: '425px',
+			md: '768px',
+			lg: '1024px',
+		},
 		extend: {
 			colors: {
 				primary: '#FF6363',