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
No related branches found
No related tags found
1 merge request!55design: 홈페이지 및 채팅리스트 디자인 수정
Pipeline #11040 passed
Stage: build
Stage: deploy
Show whitespace changes
Inline Side-by-side
src/components/ChattingList.jsx
+ 50
− 41
View file @ 0d32988d
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
+ 12
− 10
View file @ 0d32988d
......@@ -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
+ 4
− 4
View file @ 0d32988d
......@@ -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("번개 모임을 마감했습니다!");
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment

feedback to tooltime@ajou.ac.kr or hwan@ajou.ac.kr