Merge branch 'develop' into 'main'

design: 홈페이지 및 채팅리스트 디자인 수정

See merge request !55

src/components/ChattingList.jsx

 import React, { useState, useEffect, useRef, useCallback } from "react";
 import { useNavigate } from "react-router-dom";
 import useAuthStore from "../store/authStore";
+import LogoIcon from "./icons/LogoIcon";
 
 // 웹소켓 서버 연결 URL
 const WS_URL = process.env.REACT_APP_WS_URL;
@@ -21,14 +22,14 @@ function ChattingList() {
     ws.current = new WebSocket(WS_URL);
 
     ws.current.onopen = () => {
-      console.log('WebSocket 연결 성공');
+      console.log("WebSocket 연결 성공");
     };
 
     ws.current.onmessage = (event) => {
       try {
         const messageData = JSON.parse(event.data);
 
-        if (messageData.type === 'message') {
+        if (messageData.type === "message") {
           const { chatRoomId, sender, message, timestamp } = messageData;
 
           // 마지막 메시지 업데이트
@@ -50,7 +51,7 @@ function ChattingList() {
           }));
         }
       } catch (error) {
-        console.error('Error parsing WebSocket message:', error);
+        console.error("Error parsing WebSocket message:", error);
       }
     };
 
@@ -59,7 +60,7 @@ function ChattingList() {
     };
 
     ws.current.onerror = (error) => {
-      console.error('WebSocket 오류:', error);
+      console.error("WebSocket 오류:", error);
 
       if (error.target) {
         console.error("WebSocket 오류 대상:", error.target);
@@ -69,13 +70,16 @@ function ChattingList() {
 
   const fetchRooms = async () => {
     try {
-      const response = await fetch(`${process.env.REACT_APP_BASE_URL}/api/chat/rooms`, {
+      const response = await fetch(
+        `${process.env.REACT_APP_BASE_URL}/api/chat/rooms`,
+        {
           method: "GET",
           credentials: "include",
           headers: {
             "Content-Type": "application/json",
           },
-      });
+        }
+      );
       if (!response.ok) throw new Error("Failed to fetch rooms");
       const data = await response.json();
       setRooms(data);
@@ -102,14 +106,16 @@ function ChattingList() {
   // };
   const fetchUnreadMessages = useCallback(async () => {
     try {
-
-      const response = await fetch(`${process.env.REACT_APP_BASE_URL}/api/chat/unread-messages/${nickname}`, {
+      const response = await fetch(
+        `${process.env.REACT_APP_BASE_URL}/api/chat/unread-messages/${nickname}`,
+        {
           method: "GET",
           credentials: "include",
           headers: {
             "Content-Type": "application/json",
           },
-      });
+        }
+      );
       if (!response.ok) throw new Error("Failed to fetch unread messages");
       const data = await response.json();
       const joinedChatRoomIds = data.map((chatRoom) => chatRoom.chatRoomId);
@@ -129,7 +135,9 @@ function ChattingList() {
       ...prevUnreadCounts,
       [chatRoomId]: 0,
     }));
-    navigate(`/chat/chatRoom/${chatRoomId}`, { state: { nickname, chatRoomId, chatRoomName } });
+    navigate(`/chat/chatRoom/${chatRoomId}`, {
+      state: { nickname, chatRoomId, chatRoomName },
+    });
   };
 
   useEffect(() => {
@@ -161,46 +169,47 @@ function ChattingList() {
 
   if (!user) {
     return (
-      <div className="max-w-6xl mx-auto p-6 font-sans">
-        <h1 className="text-3xl font-bold mb-6">번개 채팅방 목록</h1>
-        <p className="text-center text-gray-500">로그인이 필요합니다. 로그인 페이지로 이동해주세요.</p>
+      <div className="max-w-6xl p-6 mx-auto font-sans">
+        <h1 className="mb-6 text-3xl font-bold">번개 채팅방 목록</h1>
+        <p className="text-center text-gray-500">
+          로그인이 필요합니다. 로그인 페이지로 이동해주세요.
+        </p>
       </div>
     );
   }
 
   return (
-    <div className="max-w-6xl mx-auto p-6 font-sans">
-      <h1 className="text-3xl font-bold mb-6">번개 채팅방 목록</h1>
-      <div className="flex justify-start mb-4">
-      </div>
-      <div className="bg-white shadow-lg rounded-lg overflow-hidden">
+    <div className="max-w-6xl p-6 mx-auto font-sans">
+      <h1 className="mb-6 text-3xl font-bold">번개 채팅방 목록</h1>
+      <div className="flex justify-start mb-4"></div>
+      <div className="overflow-hidden bg-white rounded-lg shadow-lg">
         {rooms.length === 0 ? (
-          <p className="text-gray-500 p-6 text-center">생성된 채팅방이 없습니다.</p>
+          <p className="p-6 text-center text-gray-500">
+            생성된 채팅방이 없습니다.
+          </p>
         ) : (
           <ul className="divide-y divide-gray-200">
             {rooms.map((chatRoom) => (
               <li
                 key={chatRoom.chatRoomId}
-                className="flex items-center justify-between w-full p-4 hover:bg-gray-50 cursor-pointer"
-                onClick={() => joinRoom(chatRoom.chatRoomId, chatRoom.chatRoomName)} // 클릭하면 상세 페이지로 이동
+                className="flex items-center justify-between w-full p-4 cursor-pointer hover:bg-gray-50"
+                onClick={() =>
+                  joinRoom(chatRoom.chatRoomId, chatRoom.chatRoomName)
+                } // 클릭하면 상세 페이지로 이동
               >
                 <div className="flex items-center w-full">
-                  <div className="w-14 h-14 rounded-full bg-gray-300 overflow-hidden mr-4">
-                    <img
-                      src="https://via.placeholder.com/50"
-                      alt="프로필"
-                      className="w-full h-full object-cover"
-                    />
-                  </div>
+                  <LogoIcon className="mr-4 rounded-full w-14 h-14" />
                   <div className="flex-grow">
-                    <div className="font-semibold text-gray-800">{chatRoom.chatRoomName}</div>
+                    <div className="font-semibold text-gray-800">
+                      {chatRoom.chatRoomName}
+                    </div>
                     <div className="text-sm text-gray-600">
                       <strong>{chatRoom.lastMessage?.sender || "없음"}:</strong>{" "}
                       {chatRoom.lastMessage?.message || "메시지 없음"}
                     </div>
                   </div>
                   {joinedRooms.includes(chatRoom.chatRoomId) && (
-                    <div className="bg-red-500 text-white text-xs px-2 py-1 rounded-full">
+                    <div className="px-2 py-1 text-xs text-white bg-red-500 rounded-full">
                       {unreadCounts[chatRoom.chatRoomId] || 0}
                     </div>
                   )}

src/pages/HomePage.jsx

@@ -22,15 +22,6 @@ const HomePage = () => {
     useState(false);
 
   const features = [
-    {
-      title: "Google OAuth 간편 로그인",
-      description: "Google 계정을 통해 빠르고 간편하게 로그인하세요.",
-      component: (
-        <Button size="md" theme="white" icon={<GoogleLogoIcon />}>
-          구글로 로그인
-        </Button>
-      ),
-    },
     {
       title: "고정 및 유동적인 시간표 관리",
       description:
@@ -77,13 +68,24 @@ const HomePage = () => {
         </div>
       ),
     },
+    {
+      title: "Google OAuth 간편 로그인",
+      description: "Google 계정을 통해 빠르고 간편하게 로그인하세요.",
+      component: (
+        <div className="flex flex-col items-center justify-center h-40 p-4 bg-white border rounded-lg shadow-lg border-grayscale-300 w-60">
+          <Button size="md" theme="white" icon={<GoogleLogoIcon />}>
+            구글로 로그인
+          </Button>
+        </div>
+      ),
+    },
   ];
 
   const navigate = useNavigate();
 
   const handleStartNow = () => {
     if (user) {
-      navigate("/chattinglist"); // 번개 채팅방으로 리다이렉션
+      navigate("/meeting"); // 번개 채팅방으로 리다이렉션
     } else {
       navigate("/login"); // 로그인 페이지로 리다이렉션
     }

src/pages/MeetingPage.jsx

@@ -106,7 +106,7 @@ const MeetingPage = () => {
   };
 
   const handleJoinButtonClick = async (e, meetingId) => {
-    e.stopPropagation();
+    // e.stopPropagation();
     try {
       await joinMeeting(meetingId);
       alert("번개 모임에 성공적으로 참가했습니다!");
@@ -137,7 +137,7 @@ const MeetingPage = () => {
   };
 
   const handleDeleteButtonClick = async (e, meetingId) => {
-    e.stopPropagation();
+    // e.stopPropagation();
     try {
       await deleteMeeting(meetingId);
       alert("번개 모임을 삭제했습니다!");
@@ -157,7 +157,7 @@ const MeetingPage = () => {
   };
 
   const handleLeaveButtonClick = async (e, meetingId) => {
-    e.stopPropagation();
+    // e.stopPropagation();
     try {
       await leaveMeeting(meetingId);
       alert("번개 모임을 나갔습니다!");
@@ -177,7 +177,7 @@ const MeetingPage = () => {
   };
 
   const handleCloseButtonClick = async (e, meetingId) => {
-    e.stopPropagation();
+    // e.stopPropagation();
     try {
       await closeMeeting(meetingId);
       alert("번개 모임을 마감했습니다!");