Skip to content
GitLab
Explore
Sign in
Register
Primary navigation
Search or go to…
Project
W
WebFront
Manage
Activity
Members
Labels
Plan
Issues
Issue boards
Milestones
Wiki
Code
Merge requests
Repository
Branches
Commits
Tags
Repository graph
Compare revisions
Snippets
Build
Pipelines
Jobs
Pipeline schedules
Artifacts
Deploy
Releases
Package registry
Container registry
Model registry
Operate
Environments
Terraform modules
Monitor
Incidents
Analyze
Value stream analytics
Contributor analytics
CI/CD analytics
Repository analytics
Model experiments
Help
Help
Support
GitLab documentation
Compare GitLab plans
Community forum
Contribute to GitLab
Provide feedback
Terms and privacy
Keyboard shortcuts
?
Snippets
Groups
Projects
Show more breadcrumbs
websystem
WebFront
Commits
0d32988d
Commit
0d32988d
authored
5 months ago
by
석찬 윤
Browse files
Options
Downloads
Plain Diff
Merge branch 'develop' into 'main'
design: 홈페이지 및 채팅리스트 디자인 수정 See merge request
!55
parents
4f8f51be
8c4b8f55
Branches
Branches containing commit
No related tags found
1 merge request
!55
design: 홈페이지 및 채팅리스트 디자인 수정
Pipeline
#11040
passed
5 months ago
Stage: build
Stage: deploy
Changes
3
Pipelines
1
Show whitespace changes
Inline
Side-by-side
Showing
3 changed files
src/components/ChattingList.jsx
+50
-41
50 additions, 41 deletions
src/components/ChattingList.jsx
src/pages/HomePage.jsx
+12
-10
12 additions, 10 deletions
src/pages/HomePage.jsx
src/pages/MeetingPage.jsx
+4
-4
4 additions, 4 deletions
src/pages/MeetingPage.jsx
with
66 additions
and
55 deletions
src/components/ChattingList.jsx
+
50
−
41
View file @
0d32988d
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
>
)
}
)
}
...
...
This diff is collapsed.
Click to expand it.
src/pages/HomePage.jsx
+
12
−
10
View file @
0d32988d
...
@@ -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
"
);
// 로그인 페이지로 리다이렉션
}
}
...
...
This diff is collapsed.
Click to expand it.
src/pages/MeetingPage.jsx
+
4
−
4
View file @
0d32988d
...
@@ -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
(
"
번개 모임을 마감했습니다!
"
);
...
...
This diff is collapsed.
Click to expand it.
Preview
0%
Loading
Try again
or
attach a new file
.
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Save comment
Cancel
Please
register
or
sign in
to comment