Update

app/Chat/layout.tsx

@@ -0,0 +1,26 @@
+"use client";
+import Footer from "@/components/chatting/Footer";
+import Header from "@/components/chatting/Header";
+import Sidebar from "@/components/chatting/SideBar";
+import { useState } from "react";
+
+const Layout: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  const [isSidebarOpen, setIsSidebarOpen] = useState(true);
+
+  const toggleSidebar = () => {
+    setIsSidebarOpen(!isSidebarOpen);
+  };
+
+  return (
+    <div className="flex flex-col h-screen">
+      <Header />
+      <div className="flex flex-grow overflow-hidden">
+        <Sidebar isOpen={isSidebarOpen} toggleSidebar={toggleSidebar} />
+        <div className="flex-grow flex flex-col">{children}</div>
+      </div>
+      <Footer />
+    </div>
+  );
+};
+
+export default Layout;

app/Chat/page.tsx

@@ -1,10 +1,10 @@
-'use client';
+"use client";
 
-import { useEffect, useState } from 'react';
-import { getChatting } from '@/app/_api/api';
-import { useAuthStore } from '@/app/store';
-import Link from 'next/link';
-import { ChatRoom } from '../types/ChatRoom';
+import { useEffect, useState } from "react";
+import { getChatting } from "@/app/_api/api";
+import { useAuthStore } from "@/app/store";
+import Link from "next/link";
+import { ChatRoom } from "../types/ChatRoom";
 
 const ChatList = () => {
   const [chatRooms, setChatRooms] = useState<ChatRoom[]>([]);
@@ -15,15 +15,15 @@ const ChatList = () => {
   useEffect(() => {
     const fetchChatRooms = async () => {
       if (!accessToken) {
-        setError('No Access');
+        setError("No Access");
         setLoading(false);
         return;
       }
       try {
         const data = await getChatting(accessToken);
         setChatRooms(data);
       } catch (error) {
-        setError('Failed to load chat rooms. Please try again.');
+        setError("Failed to load chat rooms. Please try again.");
       } finally {
         setLoading(false);
       }
@@ -42,7 +42,10 @@ const ChatList = () => {
         {chatRooms.map((room) => (
           <li key={room.cr_id} className="flex justify-between items-center">
             <span>{room.title}</span>
-            <Link href={`/Chat/${room.cr_id}`} className="text-indigo-700 hover:text-indigo-500 font-semibold">
+            <Link
+              href={`/Chat/${room.cr_id}`}
+              className="text-indigo-700 hover:text-indigo-500 font-semibold"
+            >
               Go to Chat
             </Link>
           </li>

app/create/page.tsx

@@ -0,0 +1,74 @@
+// pages/create.tsx
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { getSignUp } from "@/app/_api/api";
+
+const CreateAccount = () => {
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [nickname, setNickname] = useState('');
+  const [error, setError] = useState<string | null>(null);
+  const router = useRouter();
+
+  const handleSubmit = async (event: React.FormEvent) => {
+    event.preventDefault();
+    try {
+      await getSignUp(email, password, nickname);
+      router.push('/login'); 
+    } catch (error) {
+      setError('Failed to create account. Please try again.');
+    }
+  };
+
+  return (
+    <div className="flex flex-col items-center justify-center min-h-screen bg-gray-100">
+      <h2 className="text-3xl font-bold mb-6">Create an Account</h2>
+      <form onSubmit={handleSubmit} className="bg-white p-6 rounded shadow-md w-full max-w-md">
+        <div className="mb-4">
+          <label htmlFor="email" className="block text-sm font-medium text-gray-700">Email</label>
+          <input
+            type="email"
+            id="email"
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+            className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
+            required
+          />
+        </div>
+        <div className="mb-4">
+          <label htmlFor="password" className="block text-sm font-medium text-gray-700">Password</label>
+          <input
+            type="password"
+            id="password"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
+            required
+          />
+        </div>
+        <div className="mb-4">
+          <label htmlFor="nickname" className="block text-sm font-medium text-gray-700">Nickname</label>
+          <input
+            type="text"
+            id="nickname"
+            value={nickname}
+            onChange={(e) => setNickname(e.target.value)}
+            className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
+            required
+          />
+        </div>
+        <button
+          type="submit"
+          className="w-full py-2 px-4 bg-indigo-500 text-white font-semibold rounded-md hover:bg-indigo-600 transition duration-300"
+        >
+          Create Account
+        </button>
+      </form>
+      {error && <p className="mt-4 text-red-500">{error}</p>}
+    </div>
+  );
+};
+
+export default CreateAccount;

app/layout.tsx

@@ -1,7 +1,6 @@
 import type { Metadata } from "next";
 import { Inter } from "next/font/google";
 import "./globals.css";
-import Navbar from "@/components/Navbar";
 
 const inter = Inter({ subsets: ["latin"] });
 
@@ -17,10 +16,7 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en">
-      <body className={`${inter.className} bg-blue-100`}>
-        <Navbar />
-        {children}
-      </body>
+      <body className={`${inter.className} bg-blue-100`}>{children}</body>
     </html>
   );
 }

app/login/page.tsx

@@ -1,4 +1,4 @@
-import AccountForm from "@/components/page/AccountForm";
+import AccountForm from "@/components/login/AccountForm";
 
 export default function page() {
   return (

app/page.tsx

@@ -1,11 +1,92 @@
+"use client";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import { useAuthStore } from "./store";
+import CreateChatRoomForm from "@/components/CreateChatRoom";
+import Nav from "@/components/mainpage/Nav";
+import Bottom from "@/components/mainpage/Bottom";
+
 export default function Home() {
+  const [showModal, setShowModal] = useState(false);
+  const router = useRouter();
+  const { accessToken, clearTokens } = useAuthStore();
+
+  const handleLogout = () => {
+    clearTokens();
+    router.push("/Chat");
+  };
+
+  const handleCreateChat = () => {
+    setShowModal(true);
+  };
+
+  const closeModal = () => {
+    setShowModal(false);
+  };
+
   return (
-    <div className="flex flex-col min-h-screen">
-      <div className="flex flex-grow">
-        <div className="w-1/4 bg-white">Item 1</div>
-        <div className="w-1/2 ">Item 2</div>
-        <div className="w-1/4 bg-white">Item 3</div>
-      </div>
+    <div className="flex flex-col h-screen">
+      <Nav />
+
+      <main className="flex-grow bg-blue-100 bg-cover bg-center flex flex-col justify-between">
+        <div className="flex-grow flex flex-col justify-center items-center gap-4">
+          <h1 className="text-white text-4xl font-bold text-center px-4">
+            IN PURSUIT OF JUSTICE, EVERYDAY
+          </h1>
+
+          <div className="bg-white bg-opacity-50 w-full max-w-[90%] p-4 rounded-lg shadow-lg">
+            <div className="max-w-md mx-auto flex flex-col items-center space-y-4">
+              <div className="bg-blue-300 p-3 rounded-lg flex flex-col w-full">
+                <span className="text-white font-semibold text-center">
+                  새로운 채팅을 만들어 보세요!
+                </span>
+                <button
+                  onClick={handleCreateChat}
+                  className="bg-green-100 p-1 rounded-md font-medium hover:scale-110 transition active:bg-purple-500"
+                >
+                  Create Chat Room
+                </button>
+              </div>
+
+              {accessToken ? (
+                <button
+                  onClick={handleLogout}
+                  className="bg-white p-1 rounded-md font-semibold"
+                >
+                  Logout
+                </button>
+              ) : (
+                <div>
+                  <span className="text-slate-500 mx-4">로그인 하기</span>
+                  <Link
+                    className="bg-white p-1.5 rounded-md font-semibold"
+                    href="/login"
+                  >
+                    Login
+                  </Link>
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+
+        <Bottom />
+      </main>
+
+      {showModal && (
+        <div className="fixed inset-0 bg-black bg-opacity-50 flex justify-center items-center">
+          <div className="bg-white p-6 rounded-md shadow-md w-full max-w-md relative">
+            <button
+              onClick={closeModal}
+              className="absolute top-2 right-2 bg-gray-200 p-2 rounded-full"
+            >
+              X
+            </button>
+            <CreateChatRoomForm onClose={closeModal} />
+          </div>
+        </div>
+      )}
     </div>
   );
 }

components/Navbar.tsx

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 
 import Link from "next/link";
 import { useState } from "react";
@@ -13,7 +13,7 @@ const Navbar = () => {
 
   const handleLogout = () => {
     clearTokens();
-    router.push('/Chat');
+    router.push("/Chat");
   };
 
   const handleCreateChat = () => {

components/ChatInput.tsx → components/chatting/ChatInput.tsx

@@ -1,26 +1,28 @@
-import React, { useState } from 'react';
-import InputBox from './Input';
+import React, { useState } from "react";
+import InputBox from "../shared/Input";
 
 interface ChatInputProps {
   onSend: (message: string) => void;
 }
 
 const ChatInput: React.FC<ChatInputProps> = ({ onSend }) => {
-  const [message, setMessage] = useState('');
+  const [message, setMessage] = useState("");
 
-  const handleChangeMessage: React.ChangeEventHandler<HTMLInputElement> = (e) => {
+  const handleChangeMessage: React.ChangeEventHandler<HTMLInputElement> = (
+    e
+  ) => {
     setMessage(e.target.value);
   };
 
   const handleKeyDown: React.KeyboardEventHandler<HTMLInputElement> = (e) => {
-    if (e.key === 'Enter') {
+    if (e.key === "Enter") {
       sendHandleMessage();
     }
   };
   const sendHandleMessage = () => {
-    if (message.trim() !== '') {
+    if (message.trim() !== "") {
       onSend(message);
-      setMessage('');
+      setMessage("");
     }
   };
   return (