+
+ + 새로운 그룹 만들기
+그룹을 만들어 보세요
의견, 일정을 한 곳에 모을 수 있어요
+
+
+
+
+
+
+ );
+}
+
+export default HomeDashboard;
diff --git a/polling-app-client/src/components/Dashboard/Notifications.css b/polling-app-client/src/components/Dashboard/Notifications.css
new file mode 100644
index 00000000..ae4588f9
--- /dev/null
+++ b/polling-app-client/src/components/Dashboard/Notifications.css
@@ -0,0 +1,25 @@
+.notifications-box {
+ background-color: #fff;
+ padding: 20px;
+ border-radius: 12px;
+ box-shadow: 0 2px 10px rgba(0,0,0,0.05);
+ min-height: 180px;
+}
+
+.notifications-box h3 {
+ margin-bottom: 12px;
+ font-size: 1.2rem;
+ font-weight: bold;
+}
+
+.notification-list {
+ list-style: none;
+ padding-left: 0;
+ font-size: 0.9rem;
+ color: #444;
+}
+
+.notification-list li {
+ margin-bottom: 10px;
+ line-height: 1.3;
+}
diff --git a/polling-app-client/src/components/Dashboard/Notifications.jsx b/polling-app-client/src/components/Dashboard/Notifications.jsx
new file mode 100644
index 00000000..2e378fb9
--- /dev/null
+++ b/polling-app-client/src/components/Dashboard/Notifications.jsx
@@ -0,0 +1,68 @@
+import React, { Component } from 'react';
+import './Notifications.css';
+import { ACCESS_TOKEN } from '../../constants';
+
+class Notifications extends Component {
+ constructor(props) {
+ super(props);
+ this.state = {
+ notifications: [],
+ loading: true
+ };
+ }
+
+ componentDidMount() {
+ const token = localStorage.getItem(ACCESS_TOKEN);
+
+ fetch('/api/notifications', {
+ headers: {
+ Authorization: `Bearer ${token}`,
+ },
+ })
+ .then(res => res.json())
+ .then(data => {
+ this.setState({
+ notifications: data.slice(0, 2),
+ loading: false
+ });
+ })
+ .catch(() => {
+ this.setState({ notifications: [], loading: false });
+ });
+ }
+
+ formatDate = (isoString) => {
+ const date = new Date(isoString);
+ return date.toLocaleDateString('ko-KR', {
+ year: 'numeric',
+ month: 'short',
+ day: 'numeric',
+ });
+ }
+
+ render() {
+ const { notifications, loading } = this.state;
+
+ return (
+
+
+
+
+
+
+
+ );
+ }
+}
+
+export default Notifications;
diff --git a/polling-app-client/src/components/MyGroups/MyGroups.css b/polling-app-client/src/components/MyGroups/MyGroups.css
new file mode 100644
index 00000000..6719ca07
--- /dev/null
+++ b/polling-app-client/src/components/MyGroups/MyGroups.css
@@ -0,0 +1,54 @@
+.my-groups-container {
+ background-color: #fff;
+ padding: 20px;
+ border-radius: 12px;
+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
+ margin-bottom: 24px;
+ min-height: 180px;
+}
+
+.my-groups-container h3 {
+ margin-bottom: 16px;
+ font-size: 1.2rem;
+ font-weight: bold;
+}
+
+.group-card-list {
+ display: flex;
+ gap: 16px;
+ justify-content: flex-start;
+ flex-wrap: wrap;
+}
+
+.group-card {
+ width: 100px;
+ padding: 16px 12px;
+ background-color: #f8f8f8;
+ border-radius: 8px;
+ text-align: center;
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+ transition: transform 0.2s;
+}
+
+.group-card:hover {
+ transform: translateY(-3px);
+}
+
+.group-avatar {
+ width: 60px;
+ height: 60px;
+ background-color: #dcdcdc;
+ border-radius: 50%;
+ margin: 0 auto 10px;
+}
+
+.group-name {
+ font-weight: 600;
+ font-size: 0.95rem;
+ margin-bottom: 4px;
+}
+
+.group-count {
+ font-size: 0.8rem;
+ color: #777;
+}
diff --git a/polling-app-client/src/components/MyGroups/MyGroups.jsx b/polling-app-client/src/components/MyGroups/MyGroups.jsx
new file mode 100644
index 00000000..dfc027b3
--- /dev/null
+++ b/polling-app-client/src/components/MyGroups/MyGroups.jsx
@@ -0,0 +1,65 @@
+import React, { Component } from "react";
+import { ACCESS_TOKEN } from '../../constants';
+import "./MyGroups.css";
+
+class MyGroups extends Component {
+ constructor(props) {
+ super(props);
+ this.state = {
+ groups: [],
+ loading: true,
+ error: null,
+ };
+ }
+
+ componentDidMount() {
+ const token = localStorage.getItem(ACCESS_TOKEN);
+
+ fetch("/api/groups/my", {
+ headers: {
+ Authorization: `Bearer ${token}`,
+ },
+ })
+ .then((res) => {
+ if (!res.ok) throw new Error("그룹 목록을 불러오지 못했어요.");
+ return res.json();
+ })
+ .then((data) => {
+ this.setState({ groups: data, loading: false });
+ })
+ .catch((error) => {
+ this.setState({ error: error.message, loading: false });
+ });
+ }
+
+ render() {
+ const { groups, loading, error } = this.state;
+
+ return (
+ 알림 요약
+ {loading ? ( +불러오는 중...
+ ) : notifications.length === 0 ? ( +새 알림이 없습니다.
+ ) : ( +-
+ {notifications.map(n => (
+
-
+ {this.formatDate(n.created_at)}+{n.message}+
+ ))}
+
+
+ );
+ }
+}
+
+export default MyGroups;
diff --git a/polling-app-client/src/index.js b/polling-app-client/src/index.js
index 3d915ccf..9dde1a8d 100644
--- a/polling-app-client/src/index.js
+++ b/polling-app-client/src/index.js
@@ -8,8 +8,9 @@ import { BrowserRouter as Router } from 'react-router-dom';
ReactDOM.render(
참여 중인 그룹
+ {loading ? ( +로딩 중...
+ ) : error ? ( +{error}
+ ) : groups.length === 0 ? ( +참여한 그룹이 없습니다.
+ ) : ( +
+ {groups.map((group) => (
+
+ )}
+
+
+
+ ))}
+
+
+ {group.name}
+ 멤버 {group.memberCount}명
+