From 345fe79dd95276bada9996c8081f4bdbca15d2e2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=84=9D=EC=B0=AC=20=EC=9C=A4?= <ysc0731@ajou.ac.kr>
Date: Tue, 10 Dec 2024 02:53:09 +0900
Subject: [PATCH] =?UTF-8?q?design:=20=EC=A0=84=EB=B0=98=EC=A0=81=EC=9D=B8?=
=?UTF-8?q?=20=EB=94=94=EC=9E=90=EC=9D=B8=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/components/ChattingList.jsx | 91 ++++++++++++++++++---------------
src/pages/HomePage.jsx | 22 ++++----
src/pages/MeetingPage.jsx | 8 +--
3 files changed, 66 insertions(+), 55 deletions(-)
diff --git a/src/components/ChattingList.jsx b/src/components/ChattingList.jsx
index 1290261..0b14871 100644
--- a/src/components/ChattingList.jsx
+++ b/src/components/ChattingList.jsx
@@ -1,6 +1,7 @@
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`, {
- method: "GET",
- credentials: "include",
- headers: {
- "Content-Type": "application/json",
- },
- });
+ 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}`, {
- method: "GET",
- credentials: "include",
- headers: {
- "Content-Type": "application/json",
- },
- });
+ 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>
)}
@@ -214,4 +223,4 @@ function ChattingList() {
);
}
-export default ChattingList;
\ No newline at end of file
+export default ChattingList;
diff --git a/src/pages/HomePage.jsx b/src/pages/HomePage.jsx
index 6465327..7a09e4d 100644
--- a/src/pages/HomePage.jsx
+++ b/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"); // 로그인 페이지로 리다이렉션
}
diff --git a/src/pages/MeetingPage.jsx b/src/pages/MeetingPage.jsx
index 2ec5b9a..98211da 100644
--- a/src/pages/MeetingPage.jsx
+++ b/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("번개 모임을 마감했습니다!");
--
GitLab