Merge branch 'feature/#1' of https://github.com/MOVIEJOJO7/cat-talk i…

…nto Feature/#2
KDT1-FE · Nov 8, 2023 · 26651a0 · 26651a0
2 parents b68afae + 7173134
commit 26651a0
Show file tree

Hide file tree

Showing 8 changed files with 53 additions and 26 deletions.
diff --git a/Components/Plate.tsx b/Components/Plate.tsx
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.utils.ts b/app/open/open.utils.ts
@@ -1,4 +1,4 @@
-export const fetchAllChat = async (token: string) => {
+export const fetchAllChat = async (token: string, userId: string) => {
 	const res = await fetch('https://fastcampus-chat.net/chat', {
 		method: 'GET',
 		headers: {

diff --git a/app/open/page.tsx b/app/open/page.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import Plate from '@/Components/Plate';
 import { fetchAllChat } from './open.utils';
 
 type ChatData = {
@@ -13,20 +12,18 @@ type ChatData = {
 
 const Open = async () => {
 	const accessToken = process.env.ACCESS_TOKEN as string;
-	const result = await fetchAllChat(accessToken);
+	const result = await fetchAllChat(accessToken, 'minseob');
 	console.log(result);
 	return (
-		<Plate>
-			<div>
-				{result.chats.map((chat: ChatData) => {
-					return (
-						<div key={chat.id}>
-							<div>{chat.name}</div>
-						</div>
-					);
-				})}
-			</div>
-		</Plate>
+		<div className="flex flex-col bg-red-300">
+			{result.chats.map((chat: ChatData) => {
+				return (
+					<div key={chat.id}>
+						<div>{chat.name}</div>
+					</div>
+				);
+			})}
+		</div>
 	);
 };
 

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -17,6 +17,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',