Merge pull request #85 from Na-o-man/feat/#79

[Feat] 안건조회 api 구현

src/components/Common/DropDown/DropDown.tsx

@@ -1,28 +1,46 @@
 import { DownArrow, IndexTag } from 'assets/icon';
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
+import { useRecoilValue, useRecoilState } from 'recoil';
+import {
+  shareGroupListState,
+  dropDownTitle,
+  selectedShareGroupId,
+} from 'recoil/states/share_group';
 import * as S from './Styles';
-import { useRecoilValue } from 'recoil';
-import { ShareGroup, shareGroupId } from 'recoil/states/share_group';
-import { dropdownData } from 'recoil/states/vote';
 
 interface DropDownProps {
   noIndexTag?: boolean;
 }
 
 const DropDown: React.FC<DropDownProps> = ({ noIndexTag }) => {
-  const groupData = useRecoilValue<ShareGroup[]>(dropdownData);
-  const groupID = useRecoilValue(shareGroupId);
-  const Idx = groupData.findIndex((data) => data.shareGroupId === groupID);
+  const shareGroupList = useRecoilValue(shareGroupListState);
+  const [title, setTitle] = useRecoilState(dropDownTitle);
+  const [selectedId, setSelectedId] = useRecoilState(selectedShareGroupId);
   const [isClicked, setIsClicked] = useState(false);
-  const [title, setTitle] = useState<string>(groupData[Idx].name);
-  const txtlen = title.length;
+
+  useEffect(() => {
+    if (shareGroupList.length > 0) {
+      setTitle(shareGroupList[0].name);
+      setSelectedId(shareGroupList[0].shareGroupId);
+    }
+  }, [shareGroupList, setTitle, setSelectedId]);
+
   const handleClick = () => {
     setIsClicked(!isClicked);
   };
+
   const handleItemClick = (index: number) => {
-    setTitle(groupData[index].name);
-    setIsClicked(false);
+    const selectedGroup = shareGroupList[index];
+    setTitle(selectedGroup.name);
+    setSelectedId(selectedGroup.shareGroupId);
   };
+
+  useEffect(() => {
+    console.log('Selected ShareGroupId:', selectedId);
+  }, [selectedId]);
+
+  const txtlen = title.length;
+
   return (
     <>
       {isClicked ? (
@@ -31,29 +49,29 @@ const DropDown: React.FC<DropDownProps> = ({ noIndexTag }) => {
             <DownArrow />
           </S.IconLayout>
           <S.ListLayout>
-            {groupData.map((data, i) =>
-              groupData[i].name === title ? (
+            {shareGroupList.map((group, i) =>
+              group.name === title ? (
                 <S.ItemLayout
                   key={i}
                   style={{ fontWeight: '700' }}
                   onClick={() => handleItemClick(i)}
                 >
-                  {data.name}
+                  {group.name}
                 </S.ItemLayout>
               ) : (
                 <S.ItemLayout key={i} onClick={() => handleItemClick(i)}>
-                  {data.name}
+                  {group.name}
                 </S.ItemLayout>
               ),
             )}
           </S.ListLayout>
         </S.ExpendLayout>
       ) : (
         <S.Layout onClick={handleClick} txtlen={txtlen}>
-          {noIndexTag ? null : <IndexTag style={{ transform: 'scale(1.3)' }} />}
+          {noIndexTag ? null : <IndexTag />}
           <S.TextLayout txtlen={txtlen}>
             <DownArrow />
-            {title}
+            {title || 'Select Group'}
           </S.TextLayout>
         </S.Layout>
       )}

src/components/Vote/VoteContainer/VoteContainer.tsx

@@ -31,13 +31,6 @@ const VoteContainer = ({ data }: props) => {
                   : 'none',
             }}
           />
-          <S.VoterLayout>
-            {d.votesList.map((v) => (
-              <S.VoterContainer key={v.profileInfo.memberId}>
-                <S.VoterBox src={v.profileInfo.profileImage} />
-              </S.VoterContainer>
-            ))}
-          </S.VoterLayout>
         </S.Container>
       ))}
     </S.Layout>

src/components/Vote/VoteList/VoteList.tsx

@@ -2,41 +2,47 @@ import React, { useEffect, useState } from 'react';
 import * as S from './Styles';
 import VoteContainer from '../VoteContainer/VoteContainer';
 import { useNavigate } from 'react-router-dom';
-import { useRecoilValue, useSetRecoilState } from 'recoil';
-import { agendasList, selectedAgendaId } from 'recoil/states/vote';
+import { useRecoilState } from 'recoil';
+import { agendasList } from 'recoil/states/vote';
+import { selectedShareGroupId } from 'recoil/states/share_group';
 import { useSwipeable } from 'react-swipeable';
 import axios from 'axios';
-import { deleteAgenda } from 'apis/deleteAgenda';
 
 const SERVER_URL = process.env.REACT_APP_SERVER_URL;
+const token = process.env.REACT_APP_REFRESH_TOKEN;
 
-const VoteList = () => {
-  // Recoil 상태에서 미리 설정된 값을 가져옵니다
-  const agendas = useRecoilValue(agendasList);
+const VoteList: React.FC = () => {
   const navigate = useNavigate();
-
+  const [shareGroupId] = useRecoilState(selectedShareGroupId);
+  const [agendas, setAgendas] = useRecoilState(agendasList);
   const [currentPage, setCurrentPage] = useState(0);
-  const [totalPages, setTotalPages] = useState(Math.ceil(agendas.length / 5)); // 총 페이지 수를 설정합니다
+  const [totalPages, setTotalPages] = useState(0);
+  const itemsPerPage = 5;
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
 
-  const itemsPerPage = 5; // 한 페이지에 표시할 안건 개수
+  // 안건 목록 조회 API 함수
+  const fetchAgendas = async (page: number) => {
+    if (!shareGroupId) return;
 
-  const currentAgendas = agendas.slice(
-    currentPage * itemsPerPage,
-    (currentPage + 1) * itemsPerPage,
-  );
+    setIsLoading(true);
+    setError(null);
 
-  // API 호출 주석 처리
-  /*
-  const fetchAgendas = async (page: number) => {
     try {
       const response = await axios.get(`${SERVER_URL}/agendas`, {
         params: {
-          sharegroupid: 'your-sharegroup-id', // 실제 값으로 변경
-          page: page,
+          shareGroupId,
+          page,
           size: itemsPerPage,
         },
+        headers: {
+          'Content-Type': 'application/json',
+          Authorization: `Bearer ${token}`,
+        },
       });
       const { agendaDetailInfoList, totalPages } = response.data.data;
+      console.log('Fetched Agendas:', agendaDetailInfoList);
+
       setAgendas(agendaDetailInfoList);
       setTotalPages(totalPages);
     } catch (error: any) {
@@ -46,51 +52,66 @@ const VoteList = () => {
     }
   };
 
+  //투표현황 조회 api
+  const fetchVoteInfo = async (agendaId: number) => {
+    try {
+      const response = await axios.get(
+        `${SERVER_URL}/agendas/${agendaId}/vote`,
+        {
+          headers: {
+            'Content-Type': 'application/json',
+            Authorization: `Bearer ${token}`,
+          },
+        },
+      );
+
+      return response.data.data; // voteInfoList 반환
+    } catch (error: any) {
+      console.error('Error fetching vote info:', error.message || error);
+      return [];
+    }
+  };
+
   useEffect(() => {
     fetchAgendas(currentPage);
-  }, [currentPage]);
-  */
+  }, [shareGroupId, currentPage]);
 
-  //delete api 호출 주석처리
-  /*
-  const handleDelete = async (id: number) => {
-    try {
-      await deleteAgenda({ agendaId: id }); // 객체 형태로 전달
-      // 삭제 후 상태를 새로 고칩니다
-      fetchAgendas(currentPage);
-    } catch (error) {
-      console.error('Error deleting agenda:', error);
-      setError('Failed to delete agenda');
+  const handleSwipeLeft = () => {
+    if (currentPage < totalPages - 1) {
+      setCurrentPage(currentPage + 1);
+    }
+  };
+
+  const handleSwipeRight = () => {
+    if (currentPage > 0) {
+      setCurrentPage(currentPage - 1);
     }
   };
-  */
+
+  const handlers = useSwipeable({
+    onSwipedLeft: handleSwipeLeft,
+    onSwipedRight: handleSwipeRight,
+
+    trackMouse: true,
+  });
+
   const handleClickBtn = (id: number) => {
-    // setAgendaId(id);
     navigate('/vote/detail');
     console.log(id);
   };
 
-  // 스와이프 핸들러 설정
-  const handlers = useSwipeable({
-    onSwipedLeft: () => {
-      if (currentPage < totalPages - 1) {
-        setCurrentPage(currentPage + 1);
-      }
-    },
-    onSwipedRight: () => {
-      if (currentPage > 0) {
-        setCurrentPage(currentPage - 1);
-      }
-    },
-  });
+  if (isLoading) return <div>Loading...</div>;
+  if (error) return <div>Error: {error}</div>;
+
+  if (agendas.length === 0) return <div>No agendas available</div>;
 
   return (
     <div {...handlers}>
-      {currentAgendas.map((ag) => (
+      {agendas.map((ag) => (
         <S.Layout key={ag.agendaId} onClick={() => handleClickBtn(ag.agendaId)}>
           <S.TextLayout>{ag.title}</S.TextLayout>
           <S.VoteContainer>
-            <VoteContainer data={ag.agendaPhotosList} />
+            <VoteContainer data={ag.agendaPhotoInfoList} />
           </S.VoteContainer>
         </S.Layout>
       ))}

src/pages/Vote/VoteDetailPage/VoteDetailPage.tsx

@@ -79,7 +79,7 @@ const VoteDetailPage = () => {
       {agendaData && (
         <S.Layout key={agendaData.agendaId}>
           <VoteTitle title={agendaData.title} />
-          {agendaData.agendaPhotosList.map((photo, i) => (
+          {agendaData.agendaPhotoInfoList.map((photo, i) => (
             <S.ImgLayout key={photo.agendaPhotoId}>
               <S.ImgBox
                 src={photo.url}

src/pages/Vote/VotePage/VotePage.tsx

@@ -29,6 +29,7 @@ const VotePage = () => {
         },
       ];
       await ParticularAgendaVote(selectedPicture.agendaId, voteData);
+
       console.log('Vote successfully submitted!');
       navigate('/vote/list'); // Navigate after successful submission
     } catch (error) {

src/recoil/selectors/vote.ts

@@ -5,7 +5,7 @@ export const agendaPhotosList = selector({
   key: 'agendaPhotosList',
   get: ({ get }) => {
     const photoList = get(agendasList);
-    photoList.map((list) => list.agendaPhotosList);
+    photoList.map((list) => list.agendaPhotoInfoList);
     return photoList;
   },
 });

src/recoil/states/share_group.ts

@@ -73,3 +73,9 @@ export const checkModeState = atom<boolean>({
   key: 'checkModeState',
   default: false,
 });
+
+export const selectedShareGroupId = atom<number | null>({
+  key: 'selectedShareGroupId',
+  default: null,
+  effects_UNSTABLE: [persistAtom],
+});