그룹 내 투표 조회 구현

Author: eunhye-ahn

polling-app-client/src/app/App.js

@@ -1,5 +1,5 @@
 import HomeDashboard from '../components/Dashboard/HomeDashboard';
-
+import GroupPollList from '../components/Dashboard/GroupPollList';
 import React, { Component } from 'react';
 import './App.css';
 import {
@@ -121,7 +121,12 @@ class App extends Component {
                   render={(props) => <Profile isAuthenticated={this.state.isAuthenticated} currentUser={this.state.currentUser} {...props}  />}>
                 </Route>
                 <PrivateRoute authenticated={this.state.isAuthenticated} path="/poll/new" component={NewPoll} handleLogout={this.handleLogout}></PrivateRoute>
-                <Route component={NotFound}></Route>
+<PrivateRoute
+  path="/groups/:groupId/polls"
+  component={GroupPollList}
+  authenticated={this.state.isAuthenticated}
+/>                <Route component={NotFound}></Route>
+                
               </Switch>
             </div>
           </Content>

polling-app-client/src/common/PrivateRoute.js

@@ -1,26 +1,22 @@
 import React from 'react';
-import {
-    Route,
-    Redirect
-  } from "react-router-dom";
-  
-  
-const PrivateRoute = ({ component: Component, authenticated, ...rest }) => (
-    <Route
-      {...rest}
-      render={props =>
-        authenticated ? (
-          <Component {...rest} {...props} />
-        ) : (
-          <Redirect
-            to={{
-              pathname: '/login',
-              state: { from: props.location }
-            }}
-          />
-        )
-      }
-    />
+import { Route, Redirect } from "react-router-dom";
+
+const PrivateRoute = ({ component: Component, render, authenticated, ...rest }) => (
+  <Route
+    {...rest}
+    render={props =>
+      authenticated ? (
+        render ? render(props) : <Component {...props} />
+      ) : (
+        <Redirect
+          to={{
+            pathname: '/login',
+            state: { from: props.location }
+          }}
+        />
+      )
+    }
+  />
 );
-  
-export default PrivateRoute
+
+export default PrivateRoute;

polling-app-client/src/components/Dashboard/GroupPollList.jsx

@@ -0,0 +1,89 @@
+import React, { Component } from 'react';
+import { getPollsByGroupId, castVote } from '../../util/APIUtils';
+import Poll from '../../poll/Poll';
+import LoadingIndicator from '../../common/LoadingIndicator';
+import { notification } from 'antd';
+
+class GroupPollList extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      polls: [],
+      currentVotes: [],
+      isLoading: false
+    };
+  }
+
+  componentDidMount() {
+    const groupId = this.props.match.params.groupId;
+    this.setState({ isLoading: true });
+    getPollsByGroupId(groupId)
+.then(response => {
+  this.setState({
+    polls: response.content,  // ✅ content만 꺼내기
+    currentVotes: Array(response.content.length).fill(null),
+    isLoading: false
+  });
+})
+      .catch(error => {
+        console.error("Error fetching polls:", error);
+        this.setState({ isLoading: false });
+      });
+  }
+
+  handleVoteChange = (event, index) => {
+    const newVotes = [...this.state.currentVotes];
+    newVotes[index] = event.target.value;
+    this.setState({ currentVotes: newVotes });
+  };
+
+  handleVoteSubmit = (event, index) => {
+    event.preventDefault();
+    if (!this.props.isAuthenticated) {
+      this.props.history.push("/login");
+      notification.info({ message: 'Polling App', description: 'Please login to vote.' });
+      return;
+    }
+
+    const voteData = {
+      pollId: this.state.polls[index].id,
+      choiceId: this.state.currentVotes[index]
+    };
+
+    castVote(voteData)
+      .then(response => {
+        const updated = [...this.state.polls];
+        updated[index] = response;
+        this.setState({ polls: updated });
+      })
+      .catch(error => {
+        if (error.status === 401) {
+          this.props.handleLogout('/login', 'error', 'You have been logged out.');
+        } else {
+          notification.error({ message: 'Polling App', description: error.message });
+        }
+      });
+  };
+
+  render() {
+    const { polls, isLoading, currentVotes } = this.state;
+
+    return (
+      <div className="polls-container">
+        {polls.map((poll, index) => (
+          <Poll
+            key={poll.id}
+            poll={poll}
+            currentVote={currentVotes[index]}
+            handleVoteChange={e => this.handleVoteChange(e, index)}
+            handleVoteSubmit={e => this.handleVoteSubmit(e, index)}
+          />
+        ))}
+        {!isLoading && polls.length === 0 && <div>No Polls Found.</div>}
+        {isLoading && <LoadingIndicator />}
+      </div>
+    );
+  }
+}
+
+export default GroupPollList;

polling-app-client/src/components/MyGroups/MyGroupSlider.jsx

@@ -1,6 +1,9 @@
 import React, { Component } from "react";
 import "./MyGroups.css";
+import { withRouter } from 'react-router-dom';
 import { getMyGroups } from '../../util/APIUtils';
+import "slick-carousel/slick/slick.css";
+import "slick-carousel/slick/slick-theme.css";
 
 
 class MyGroups extends Component {
@@ -25,8 +28,13 @@ class MyGroups extends Component {
 
   }
 
+    handleGroupClick = (groupId) => {
+    this.props.history.push(`/groups/${groupId}/polls`);
+  };
+
   render() {
     const { groups, loading, error } = this.state;
+    
 
     return (
       <div className="my-groups-container">
@@ -38,24 +46,28 @@ class MyGroups extends Component {
         ) : groups.length === 0 ? (
           <p>참여한 그룹이 없습니다.</p>
         ) : (
-          <div className="group-card-list">
+              <div className="group-list">
             {groups.map((group) => (
-              <div key={group.id} className="group-card">
-                <div className="group-avatar"> 
-                    <img src={group.imageUrl} alt="Group Avatar" />
+    <div key={group.id}>
+      <div className="group-card"
+      onClick={() => this.handleGroupClick(group.id)}
+      style={{ cursor: "pointer" }}>
+        <div className="group-avatar">
+          <img src={group.imageUrl} alt="Group Avatar" />
+        </div>
+        <div className="group-info">
+          <div className="group-name">{group.name}</div>
+         <div className="group-count">
+멤버 {group.memberCount != null ? group.memberCount : 0}명
 </div>
-                
-                <div className="group-info">
-                  <div className="group-name">{group.name}</div>
-                  <div className="group-count">멤버 {group.memberCount}명</div>
-                </div>
-              </div>
-            ))}
-          </div>
+        </div>
+      </div>
+    </div>
+  ))}
+      </div>
         )}
       </div>
     );
   }
 }
-
-export default MyGroups;
+export default withRouter(MyGroups);

polling-app-client/src/components/MyGroups/MyGroups.jsx

@@ -152,4 +152,11 @@ export function joinGroupByCode(joinCode) {
     method: "POST",
     body: JSON.stringify({ joinCode: String(joinCode) })  // ✅ 필드 이름 수정
   });
-}
+}
+
+export function getPollsByGroupId(groupId) {
+    return request({
+         url: API_BASE_URL + `/groups/${groupId}/polls`,
+        method: 'GET'
+    });
+}