Skip to content

Commit 509846a

Browse files
seoyeonsonseoyeonson
authored
Merge pull request #19 from CommitField/feat/#18
feat : 알림 모달창 구현, 알림 데이터 가져오기
2 parents 7b89386 + 8d6bad3 commit 509846a

File tree

7 files changed

+429
-138
lines changed

7 files changed

+429
-138
lines changed

‎package-lock.json‎

Lines changed: 9 additions & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@
1616
"lucide-react": "^0.475.0",
1717
"react": "^19.0.0",
1818
"react-dom": "^19.0.0",
19+
"react-icons": "^5.5.0",
1920
"react-router-dom": "^7.2.0",
2021
"sockjs-client": "^1.6.1"
2122
},

‎src/components/Login.css‎

Lines changed: 76 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -1,78 +1,78 @@
11
/* Login.css */
22
.login-container {
3-
display: flex;
4-
flex-direction: column;
5-
align-items: center;
6-
justify-content: center;
7-
min-height: 100vh;
8-
background-color: #f5f5f5;
9-
}
10-
11-
.login-card {
12-
background-color: white;
13-
border-radius: 24px;
14-
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
15-
padding: 48px;
16-
width: 360px;
17-
max-width: 90%;
18-
text-align: center;
19-
border: 1px solid #e0e0e0;
20-
}
21-
22-
.login-title {
23-
color: #3fb27f;
24-
font-size: 36px;
25-
font-weight: bold;
26-
margin-bottom: 32px;
27-
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
28-
}
29-
30-
.github-button {
31-
background-color: #3fb27f;
32-
color: white;
33-
border: none;
34-
border-radius: 12px;
35-
padding: 12px 24px;
36-
font-size: 16px;
37-
font-weight: 600;
38-
cursor: pointer;
39-
display: flex;
40-
align-items: center;
41-
justify-content: center;
42-
width: 100%;
43-
transition: all 0.2s ease;
44-
}
45-
46-
.github-button:hover {
47-
background-color: #35a070;
48-
transform: translateY(-2px);
49-
box-shadow: 0 4px 12px rgba(63, 178, 127, 0.3);
50-
}
51-
52-
.github-icon {
53-
margin-right: 10px;
54-
}
55-
56-
.loading {
57-
display: flex;
58-
justify-content: center;
59-
align-items: center;
60-
height: 100vh;
61-
font-size: 18px;
62-
color: #3fb27f;
63-
}
64-
65-
/* Dark theme */
66-
.dark-theme {
67-
background-color: #212121;
68-
color: white;
69-
}
70-
71-
.dark-theme .login-card {
72-
background-color: #333;
73-
border-color: #444;
74-
}
75-
76-
.dark-theme .login-title {
77-
color: #4fd792;
78-
}
3+
display: flex;
4+
flex-direction: column;
5+
align-items: center;
6+
justify-content: center;
7+
min-height: 100vh;
8+
background-color: #f5f5f5;
9+
}
10+
11+
.login-card {
12+
background-color: white;
13+
border-radius: 24px;
14+
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
15+
padding: 48px;
16+
width: 360px;
17+
max-width: 90%;
18+
text-align: center;
19+
border: 1px solid #e0e0e0;
20+
}
21+
22+
.login-title {
23+
color: #3fb27f;
24+
font-size: 36px;
25+
font-weight: bold;
26+
margin-bottom: 32px;
27+
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
28+
}
29+
30+
.github-button {
31+
background-color: #3fb27f;
32+
color: white;
33+
border: none;
34+
border-radius: 12px;
35+
padding: 12px 24px;
36+
font-size: 16px;
37+
font-weight: 600;
38+
cursor: pointer;
39+
display: flex;
40+
align-items: center;
41+
justify-content: center;
42+
width: 100%;
43+
transition: all 0.2s ease;
44+
}
45+
46+
.github-button:hover {
47+
background-color: #35a070;
48+
transform: translateY(-2px);
49+
box-shadow: 0 4px 12px rgba(63, 178, 127, 0.3);
50+
}
51+
52+
.github-icon {
53+
margin-right: 10px;
54+
}
55+
56+
.loading {
57+
display: flex;
58+
justify-content: center;
59+
align-items: center;
60+
height: 100vh;
61+
font-size: 18px;
62+
color: #3fb27f;
63+
}
64+
65+
/* Dark theme */
66+
.dark-theme {
67+
background-color: #212121;
68+
color: white;
69+
}
70+
71+
.dark-theme .login-card {
72+
background-color: #333;
73+
border-color: #444;
74+
}
75+
76+
.dark-theme .login-title {
77+
color: #4fd792;
78+
}

‎src/modals/NotificationModal.jsx‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import React, { useEffect, useRef } from "react";
2+
3+
const NotificationModal = ({ notifications, onClose }) => {
4+
const modalRef = useRef(null);
5+
6+
useEffect(() => {
7+
const handleClickOutside = (event) => {
8+
if (modalRef.current && !modalRef.current.contains(event.target)) {
9+
onClose();
10+
}
11+
};
12+
13+
document.addEventListener("mousedown", handleClickOutside);
14+
return () => {
15+
document.removeEventListener("mousedown", handleClickOutside);
16+
};
17+
}, [onClose]);
18+
19+
return (
20+
<div ref={modalRef} className="notification-modal">
21+
<div className="modal-content">
22+
<div className="notification-list">
23+
{notifications.length > 0 ? (
24+
notifications.map((notif) => (
25+
<div key={notif.id} className="notification-item">
26+
<p>{notif.message}</p>
27+
<span>{notif.createdAt}</span>
28+
</div>
29+
))
30+
) : (
31+
<div className="no-notifications">새로운 알림이 없습니다.</div>
32+
)}
33+
{notifications.length > 3 && <div className="noti-more">더보기</div>}
34+
</div>
35+
</div>
36+
</div>
37+
);
38+
};
39+
40+
export default NotificationModal;

‎src/modals/notificationModal.css‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
/* 헤더 스타일 수정 */
2+
.header-content {
3+
max-width: 1200px;
4+
margin: 0 auto;
5+
display: flex;
6+
justify-content: space-between;
7+
align-items: center;
8+
padding: 0 16px;
9+
}
10+
11+
/* 알림 버튼 스타일 */
12+
.notification-btn {
13+
background: none;
14+
border: none;
15+
border-radius: 6px;
16+
cursor: pointer;
17+
transition: all 0.2s;
18+
color: white;
19+
}
20+
21+
.notification-btn:hover {
22+
background-color: rgba(255, 255, 255, 0.1);
23+
}
24+
25+
/* .notification-icon {
26+
color: white;
27+
} */
28+
29+
.logout-btn:hover {
30+
background-color: rgba(0, 0, 0, 0.7);
31+
}
32+
33+
/* 모달 스타일 */
34+
.modal-content {
35+
background-color: white;
36+
color: #1f2937;
37+
border-radius: 0.5rem;
38+
padding: 1.2rem 1.5rem;
39+
max-height: 80vh;
40+
overflow-y: auto;
41+
position: relative;
42+
}
43+
44+
.notification-modal {
45+
position: absolute;
46+
top: 60px;
47+
right: 100px;
48+
width: 300px;
49+
background: white;
50+
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
51+
border-radius: 8px;
52+
padding: 0px 16px;
53+
z-index: 1000;
54+
}
55+
56+
.notification-item {
57+
align-items: center;
58+
padding: 0 8px 4px 4px;
59+
}
60+
61+
.notification-item span {
62+
font-size: 14px;
63+
color: #878787;
64+
}
65+
66+
.noti-more {
67+
padding-top: 20px;
68+
text-align: center;
69+
color: #878787;
70+
}

0 commit comments

Comments
 (0)