Skip to content
Snippets Groups Projects
Commit 0d32988d authored by 석찬 윤's avatar 석찬 윤
Browse files

Merge branch 'develop' into 'main'

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

See merge request !55
parents 4f8f51be 8c4b8f55
Branches
No related tags found
1 merge request!55design: 홈페이지 및 채팅리스트 디자인 수정
Pipeline #11040 passed
import React, { useState, useEffect, useRef, useCallback } from "react"; import React, { useState, useEffect, useRef, useCallback } from "react";
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
import useAuthStore from "../store/authStore"; import useAuthStore from "../store/authStore";
import LogoIcon from "./icons/LogoIcon";
// 웹소켓 서버 연결 URL // 웹소켓 서버 연결 URL
const WS_URL = process.env.REACT_APP_WS_URL; const WS_URL = process.env.REACT_APP_WS_URL;
...@@ -21,14 +22,14 @@ function ChattingList() { ...@@ -21,14 +22,14 @@ function ChattingList() {
ws.current = new WebSocket(WS_URL); ws.current = new WebSocket(WS_URL);
ws.current.onopen = () => { ws.current.onopen = () => {
console.log('WebSocket 연결 성공'); console.log("WebSocket 연결 성공");
}; };
ws.current.onmessage = (event) => { ws.current.onmessage = (event) => {
try { try {
const messageData = JSON.parse(event.data); const messageData = JSON.parse(event.data);
if (messageData.type === 'message') { if (messageData.type === "message") {
const { chatRoomId, sender, message, timestamp } = messageData; const { chatRoomId, sender, message, timestamp } = messageData;
// 마지막 메시지 업데이트 // 마지막 메시지 업데이트
...@@ -50,7 +51,7 @@ function ChattingList() { ...@@ -50,7 +51,7 @@ function ChattingList() {
})); }));
} }
} catch (error) { } catch (error) {
console.error('Error parsing WebSocket message:', error); console.error("Error parsing WebSocket message:", error);
} }
}; };
...@@ -59,7 +60,7 @@ function ChattingList() { ...@@ -59,7 +60,7 @@ function ChattingList() {
}; };
ws.current.onerror = (error) => { ws.current.onerror = (error) => {
console.error('WebSocket 오류:', error); console.error("WebSocket 오류:", error);
if (error.target) { if (error.target) {
console.error("WebSocket 오류 대상:", error.target); console.error("WebSocket 오류 대상:", error.target);
...@@ -69,13 +70,16 @@ function ChattingList() { ...@@ -69,13 +70,16 @@ function ChattingList() {
const fetchRooms = async () => { const fetchRooms = async () => {
try { 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", method: "GET",
credentials: "include", credentials: "include",
headers: { headers: {
"Content-Type": "application/json", "Content-Type": "application/json",
}, },
}); }
);
if (!response.ok) throw new Error("Failed to fetch rooms"); if (!response.ok) throw new Error("Failed to fetch rooms");
const data = await response.json(); const data = await response.json();
setRooms(data); setRooms(data);
...@@ -102,14 +106,16 @@ function ChattingList() { ...@@ -102,14 +106,16 @@ function ChattingList() {
// }; // };
const fetchUnreadMessages = useCallback(async () => { const fetchUnreadMessages = useCallback(async () => {
try { try {
const response = await fetch(
const response = await fetch(`${process.env.REACT_APP_BASE_URL}/api/chat/unread-messages/${nickname}`, { `${process.env.REACT_APP_BASE_URL}/api/chat/unread-messages/${nickname}`,
{
method: "GET", method: "GET",
credentials: "include", credentials: "include",
headers: { headers: {
"Content-Type": "application/json", "Content-Type": "application/json",
}, },
}); }
);
if (!response.ok) throw new Error("Failed to fetch unread messages"); if (!response.ok) throw new Error("Failed to fetch unread messages");
const data = await response.json(); const data = await response.json();
const joinedChatRoomIds = data.map((chatRoom) => chatRoom.chatRoomId); const joinedChatRoomIds = data.map((chatRoom) => chatRoom.chatRoomId);
...@@ -129,7 +135,9 @@ function ChattingList() { ...@@ -129,7 +135,9 @@ function ChattingList() {
...prevUnreadCounts, ...prevUnreadCounts,
[chatRoomId]: 0, [chatRoomId]: 0,
})); }));
navigate(`/chat/chatRoom/${chatRoomId}`, { state: { nickname, chatRoomId, chatRoomName } }); navigate(`/chat/chatRoom/${chatRoomId}`, {
state: { nickname, chatRoomId, chatRoomName },
});
}; };
useEffect(() => { useEffect(() => {
...@@ -161,46 +169,47 @@ function ChattingList() { ...@@ -161,46 +169,47 @@ function ChattingList() {
if (!user) { if (!user) {
return ( return (
<div className="max-w-6xl mx-auto p-6 font-sans"> <div className="max-w-6xl p-6 mx-auto font-sans">
<h1 className="text-3xl font-bold mb-6">번개 채팅방 목록</h1> <h1 className="mb-6 text-3xl font-bold">번개 채팅방 목록</h1>
<p className="text-center text-gray-500">로그인이 필요합니다. 로그인 페이지로 이동해주세요.</p> <p className="text-center text-gray-500">
로그인이 필요합니다. 로그인 페이지로 이동해주세요.
</p>
</div> </div>
); );
} }
return ( return (
<div className="max-w-6xl mx-auto p-6 font-sans"> <div className="max-w-6xl p-6 mx-auto font-sans">
<h1 className="text-3xl font-bold mb-6">번개 채팅방 목록</h1> <h1 className="mb-6 text-3xl font-bold">번개 채팅방 목록</h1>
<div className="flex justify-start mb-4"> <div className="flex justify-start mb-4"></div>
</div> <div className="overflow-hidden bg-white rounded-lg shadow-lg">
<div className="bg-white shadow-lg rounded-lg overflow-hidden">
{rooms.length === 0 ? ( {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"> <ul className="divide-y divide-gray-200">
{rooms.map((chatRoom) => ( {rooms.map((chatRoom) => (
<li <li
key={chatRoom.chatRoomId} key={chatRoom.chatRoomId}
className="flex items-center justify-between w-full p-4 hover:bg-gray-50 cursor-pointer" className="flex items-center justify-between w-full p-4 cursor-pointer hover:bg-gray-50"
onClick={() => joinRoom(chatRoom.chatRoomId, chatRoom.chatRoomName)} // 클릭하면 상세 페이지로 이동 onClick={() =>
joinRoom(chatRoom.chatRoomId, chatRoom.chatRoomName)
} // 클릭하면 상세 페이지로 이동
> >
<div className="flex items-center w-full"> <div className="flex items-center w-full">
<div className="w-14 h-14 rounded-full bg-gray-300 overflow-hidden mr-4"> <LogoIcon className="mr-4 rounded-full w-14 h-14" />
<img
src="https://via.placeholder.com/50"
alt="프로필"
className="w-full h-full object-cover"
/>
</div>
<div className="flex-grow"> <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"> <div className="text-sm text-gray-600">
<strong>{chatRoom.lastMessage?.sender || "없음"}:</strong>{" "} <strong>{chatRoom.lastMessage?.sender || "없음"}:</strong>{" "}
{chatRoom.lastMessage?.message || "메시지 없음"} {chatRoom.lastMessage?.message || "메시지 없음"}
</div> </div>
</div> </div>
{joinedRooms.includes(chatRoom.chatRoomId) && ( {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} {unreadCounts[chatRoom.chatRoomId] || 0}
</div> </div>
)} )}
......
...@@ -22,15 +22,6 @@ const HomePage = () => { ...@@ -22,15 +22,6 @@ const HomePage = () => {
useState(false); useState(false);
const features = [ const features = [
{
title: "Google OAuth 간편 로그인",
description: "Google 계정을 통해 빠르고 간편하게 로그인하세요.",
component: (
<Button size="md" theme="white" icon={<GoogleLogoIcon />}>
구글로 로그인
</Button>
),
},
{ {
title: "고정 및 유동적인 시간표 관리", title: "고정 및 유동적인 시간표 관리",
description: description:
...@@ -77,13 +68,24 @@ const HomePage = () => { ...@@ -77,13 +68,24 @@ const HomePage = () => {
</div> </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 navigate = useNavigate();
const handleStartNow = () => { const handleStartNow = () => {
if (user) { if (user) {
navigate("/chattinglist"); // 번개 채팅방으로 리다이렉션 navigate("/meeting"); // 번개 채팅방으로 리다이렉션
} else { } else {
navigate("/login"); // 로그인 페이지로 리다이렉션 navigate("/login"); // 로그인 페이지로 리다이렉션
} }
......
...@@ -106,7 +106,7 @@ const MeetingPage = () => { ...@@ -106,7 +106,7 @@ const MeetingPage = () => {
}; };
const handleJoinButtonClick = async (e, meetingId) => { const handleJoinButtonClick = async (e, meetingId) => {
e.stopPropagation(); // e.stopPropagation();
try { try {
await joinMeeting(meetingId); await joinMeeting(meetingId);
alert("번개 모임에 성공적으로 참가했습니다!"); alert("번개 모임에 성공적으로 참가했습니다!");
...@@ -137,7 +137,7 @@ const MeetingPage = () => { ...@@ -137,7 +137,7 @@ const MeetingPage = () => {
}; };
const handleDeleteButtonClick = async (e, meetingId) => { const handleDeleteButtonClick = async (e, meetingId) => {
e.stopPropagation(); // e.stopPropagation();
try { try {
await deleteMeeting(meetingId); await deleteMeeting(meetingId);
alert("번개 모임을 삭제했습니다!"); alert("번개 모임을 삭제했습니다!");
...@@ -157,7 +157,7 @@ const MeetingPage = () => { ...@@ -157,7 +157,7 @@ const MeetingPage = () => {
}; };
const handleLeaveButtonClick = async (e, meetingId) => { const handleLeaveButtonClick = async (e, meetingId) => {
e.stopPropagation(); // e.stopPropagation();
try { try {
await leaveMeeting(meetingId); await leaveMeeting(meetingId);
alert("번개 모임을 나갔습니다!"); alert("번개 모임을 나갔습니다!");
...@@ -177,7 +177,7 @@ const MeetingPage = () => { ...@@ -177,7 +177,7 @@ const MeetingPage = () => {
}; };
const handleCloseButtonClick = async (e, meetingId) => { const handleCloseButtonClick = async (e, meetingId) => {
e.stopPropagation(); // e.stopPropagation();
try { try {
await closeMeeting(meetingId); await closeMeeting(meetingId);
alert("번개 모임을 마감했습니다!"); alert("번개 모임을 마감했습니다!");
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment