feat: 알림 목록 페이지 구현 (Notification Page) #90

7 changes: 3 additions & 4 deletions polling-app-client/src/app/App.js

Show comments View file Open in desktop

Original file line number	Diff line number	Diff line change
Expand Up		@@ -18,9 +18,7 @@ import AppHeader from '../common/AppHeader';
		import NotFound from '../common/NotFound';
		import LoadingIndicator from '../common/LoadingIndicator';
		import PrivateRoute from '../common/PrivateRoute';

	import { Layout, notification } from 'antd';
	const { Content } = Layout;
	import NewGroupOage from '../frontend/new-group-page/NewGroupPage';

		class App extends Component {
		constructor(props) {
Expand Down Expand Up		@@ -109,9 +107,10 @@ class App extends Component {
		<Route path="/users/:username"
		render={(props) => <Profile isAuthenticated={this.state.isAuthenticated} currentUser={this.state.currentUser} {...props} />}>
		</Route>
	<Route path="/groups/new" component={NewGroupPage} /
		<PrivateRoute authenticated={this.state.isAuthenticated} path="/poll/new" component={NewPoll} handleLogout={this.handleLogout}></PrivateRoute>
		<Route component={NotFound}></Route>
	</Switch>
	</Switch>
		</div>
		</Content>
		</Layout>
Expand Down

43 changes: 43 additions & 0 deletions polling-app-client/src/notification/NotificationPage.jsx

Show comments View file Open in desktop

Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,43 @@
	import React, { useEffect, useState } from 'react';
	import { List, Card, Spin, message } from 'antd';
	import axios from 'axios';

	const NotificationPage = () => {
	const [notifications, setNotifications] = useState([]);
	const [loading, setLoading] = useState(true);

	useEffect(() => {
	// �鿣�� ˸� API ȣ��
	axios.get('/api/notifications')
	// �� API ��η� �� ʿ�
	.then(response => {
	setNotifications(response.data);
	setLoading(false);
	})
	.catch(error => {
	message.error('�˸�� ҷ�� ߽��Θ�.');
	setLoading(false);
	});
	}, []);

	if (loading) return <Spin tip="�ε� ��..." />;

	return (
	<div style={{ padding: 20 }}>
	<h2>�˸� ��</h2>
	<List
	grid={{ gutter: 16, column: 1 }}
	dataSource={notifications}
	renderItem={item => (
	<List.Item>
	<Card title={item.title}>
	{item.message}
	</Card>
	</List.Item>
	)}
	/>
	</div>
	);
	};

	export default NotificationPage;

Navigation Menu