Merge pull request #107 from Na-o-man/fix/#105

Fix/#105 다운로드
Na-o-man · Aug 23, 2024 · b20f905 · b20f905
2 parents 2152eb1 + 9949fae
commit b20f905
Show file tree

Hide file tree

Showing 19 changed files with 167 additions and 45 deletions.
diff --git a/src/apis/getMyShareGroup.ts b/src/apis/getMyShareGroup.ts
@@ -21,7 +21,6 @@ export async function getShareGroupMembers(
   try {
     const response = await authInstance().get(`/shareGroups/${shareGroupId}`);
     if (response.status === 200) {
-      console.log(response.data);
       return response.data;
     } else {
       throw new Error('Failed to fetch share group members');

diff --git a/src/apis/getPhotosDownload.ts b/src/apis/getPhotosDownload.ts
@@ -70,3 +70,21 @@ export const getPhotosAlbumDownload = async (
     throw error;
   }
 };
+
+export const getPhotosDownload = async (
+  shareGroupId: number,
+  photoIdList: number[],
+): Promise<AxiosResponse> => {
+  try {
+    const queryParams = photoIdList
+      .map((photoId) => `photoIdList=${photoId}`)
+      .join('&');
+    const res = await authInstance().get(
+      `/photos/download?${queryParams}&shareGroupId=${shareGroupId}`,
+    );
+    return res;
+  } catch (error) {
+    console.error('Error: ', error);
+    throw error;
+  }
+};
diff --git a/src/components/Common/DropDown/DropDown.tsx b/src/components/Common/DropDown/DropDown.tsx
@@ -9,7 +9,11 @@ import {
 } from 'recoil/states/share_group';
 import * as S from './Styles';
 
-const DropDown: React.FC = () => {
+interface DropDownProp {
+  disable?: boolean;
+}
+
+const DropDown: React.FC<DropDownProp> = ({ disable }) => {
   const shareGroupList = useRecoilValue(shareGroupListState);
   const [title, setTitle] = useRecoilState(dropDownTitle);
   const [selectedId, setSelectedId] = useRecoilState(shareGroupId);
@@ -23,6 +27,7 @@ const DropDown: React.FC = () => {
   }, [shareGroupList, setTitle, setSelectedId]);
 
   const handleClick = () => {
+    if (disable) return;
     setIsClicked(!isClicked);
   };
 
@@ -69,7 +74,7 @@ const DropDown: React.FC = () => {
         <S.Layout onClick={handleClick} txtlen={txtlen}>
           <IndexTag transform="scale(1.2)" />
           <S.TextLayout txtlen={txtlen}>
-            <DownArrow />
+            {!disable && <DownArrow />}
             {title}
           </S.TextLayout>
         </S.Layout>

diff --git a/src/components/MainScreen.tsx b/src/components/MainScreen.tsx
@@ -16,9 +16,9 @@ const PhoneScreen = styled.div`
   background-color: white;
   overflow: hidden;
   position: relative;
-  aspect-ratio: 430 / 932;
+  aspect-ratio: 353 / 852;
   //모바일 환경
-  @media only screen and (max-width: 430px) {
+  @media only screen and (max-width: 353px) {
     width: 100%;
     height: 100%;
     aspect-ratio: auto;

diff --git a/src/components/ShareGroup/ShareGroupBottomBar/ShareGroupBottomBar.tsx b/src/components/ShareGroup/ShareGroupBottomBar/ShareGroupBottomBar.tsx
@@ -2,13 +2,18 @@ import React from 'react';
 import * as S from './Styles';
 import logo from '../../../assets/design/logo/symbol.png';
 import imageZipDownloader from 'utils/ImageZipDownloader';
+import { getPhotosDownload } from 'apis/getPhotosDownload';
+import { useRecoilValue } from 'recoil';
+import { shareGroupId } from 'recoil/states/share_group';
 
 interface BottomBarProps {
   symbol?: boolean;
   button?: boolean;
   delButton?: boolean;
   onDelete?: () => void; // 삭제하기 버튼 클릭 시 호출될 함수
   srcs: string[];
+  profileId?: number;
+  photoList?: number[];
 }
 
 const ShareGroupBottomBar: React.FC<BottomBarProps> = ({
@@ -17,11 +22,27 @@ const ShareGroupBottomBar: React.FC<BottomBarProps> = ({
   delButton,
   onDelete,
   srcs,
+  photoList,
 }) => {
   // 선택한 이미지들의 URL을 다운로드함
   const imageUrls: string[] = srcs;
+  const groupId = useRecoilValue(shareGroupId);
+
   const handleDownload = async (): Promise<void> => {
-    await imageZipDownloader(imageUrls);
+    console.log(photoList);
+    if (groupId && srcs && photoList && !photoList?.includes(0)) {
+      try {
+        const response = await getPhotosDownload(groupId, photoList);
+        console.log(response);
+        if (response.status === 200) {
+          await imageZipDownloader(imageUrls);
+          alert('다운로드가 완료되었습니다.');
+        }
+      } catch (error) {
+        console.log(error);
+        alert('다운로드 중 오류가 발생했습니다.');
+      }
+    }
   };
   return (
     <S.Layout>

diff --git a/src/components/ShareGroup/ShareGroupCarousel/ShareGroupCarousel.tsx b/src/components/ShareGroup/ShareGroupCarousel/ShareGroupCarousel.tsx
@@ -2,6 +2,7 @@ import React, { useRef, useCallback } from 'react';
 import * as S from './Styles';
 import ShareGroupCarouselItem from '../ShareGroupCarouselItem/ShareGroupCarouselItem';
 import { useCarousel } from 'utils/UseCarousel';
+import emptyProfile from '../../../assets/samples/emptyProfile.png';
 
 interface profile {
   profileId: number; // 프로필 id
@@ -37,7 +38,7 @@ const ShareGroupCarousel: React.FC<CarouselProps> = ({ items }) => {
         key={index}
         profileId={item.profileId}
         active={index === currentIndex}
-        profileImage={item.image || ''}
+        profileImage={item.image || emptyProfile}
         name={item.name}
         isAllPhoto={item.isAllPhoto || false}
         isEtcPhoto={item.isEtcPhoto || false}

diff --git a/src/components/ShareGroup/ShareGroupCarouselItem/ShareGroupCarouselItem.tsx b/src/components/ShareGroup/ShareGroupCarouselItem/ShareGroupCarouselItem.tsx
@@ -52,6 +52,7 @@ const ShareGroupCarouselItem: React.FC<CarouselItemProps> = ({
     navigatte(`/group/detail`, {
       state: {
         shareGroupId: id,
+        profileId: profileId,
         name: name,
       },
     });

diff --git a/src/components/ShareGroup/ShareGroupImageList/ShareGroupImageList.tsx b/src/components/ShareGroup/ShareGroupImageList/ShareGroupImageList.tsx
@@ -12,6 +12,7 @@ import ShareGroupBottomBar from '../ShareGroupBottomBar/ShareGroupBottomBar';
 import { deletePhoto } from 'apis/deletePhoto';
 import { useLocation, useNavigate } from 'react-router-dom';
 import { getPhotos, getPhotosAll, getPhotosEtc } from 'apis/getPhotos';
+import { addedAgendaPhotos, addedAgendaSrcs } from 'recoil/states/vote';
 
 export interface itemProp {
   createdAt: string;
@@ -41,6 +42,7 @@ const ShareGroupImageList = ({
   const { state } = useLocation();
   const [isModal, setIsModal] = useRecoilState(isModalState);
   const [selectedImage, setSelectedImage] = useRecoilState(selectedImageState);
+  const [imgId, setImgId] = useState<number>(0);
   const [date, setDate] = useState<string>();
   // infinite scroll을 위한 state
   const [page, setPage] = useState<number>(0);
@@ -53,6 +55,8 @@ const ShareGroupImageList = ({
   const containerRef = useRef<HTMLDivElement>(null);
   const choiceMode = state.choiceMode;
   const nav = useNavigate();
+  const [photos, setPhotos] = useRecoilState(addedAgendaPhotos);
+  const [sources, setSources] = useRecoilState(addedAgendaSrcs);
 
   const handleImageClick = (i: number, id: number, src: string) => {
     if (isChecked) {
@@ -63,18 +67,35 @@ const ShareGroupImageList = ({
         setCheckedImg((prev) => [...prev, id]);
         setSrcs((prev) => [...prev, src]);
       }
+      const newPhotos = [
+        ...photos,
+        ...srcs.filter((src) => !photos.includes(src)),
+      ];
+      const newSourcs = [
+        ...sources,
+        ...checkedImg.filter((id) => !sources.includes(id)),
+      ];
+      if (choiceMode && newPhotos.length > 6) {
+        alert('사진의 최대 등록 개수는 6장입니다');
+        nav(-1);
+        return;
+      }
+      setPhotos(newPhotos);
+      setSources(newSourcs);
       return;
     }
     setCheckedImg([]);
     console.log(localItems[i].rawPhotoUrl);
     setSelectedImage(localItems[i].rawPhotoUrl);
+    setImgId(localItems[i].photoId);
     const newDate = localItems[i].createdAt.split(' ')[0];
     setDate(newDate);
     setIsModal(true);
   };
 
   const handleCloseModal = () => {
     setSelectedImage(null);
+    setImgId(0);
     setIsModal(false);
   };
 
@@ -98,6 +119,7 @@ const ShareGroupImageList = ({
         console.error('Failed to delete photo:', error);
       } finally {
         setSelectedImage(null);
+        setImgId(0);
         setIsChecked(false);
         setIsModal(false);
       }
@@ -248,21 +270,25 @@ const ShareGroupImageList = ({
             onClose={handleCloseModal}
           />
           <ShareGroupBottomBar
+            profileId={profileId}
             button
             delButton
             onDelete={handleDelete}
-            srcs={srcs}
+            srcs={[selectedImage]}
+            photoList={[imgId]}
           />
         </>
       ) : checkedImg.length > 0 ? (
         <ShareGroupBottomBar
+          profileId={profileId}
           button
           delButton
           onDelete={handleDelete}
           srcs={srcs}
+          photoList={checkedImg}
         />
       ) : (
-        <ShareGroupBottomBar symbol srcs={srcs} />
+        <ShareGroupBottomBar symbol srcs={srcs} profileId={profileId} />
       )}
     </>
   );

diff --git a/src/components/ShareGroup/ShareGroupTopButton/ShareGroupTopButton.tsx b/src/components/ShareGroup/ShareGroupTopButton/ShareGroupTopButton.tsx
@@ -18,15 +18,15 @@ const ShareGroupTopButton: React.FC = () => {
     <S.Layout>
       <S.TopBtn />
       <S.Container>
-        <S.Title>{group?.name || newGroup.name}</S.Title>
+        <S.Title>{group?.name || newGroup?.name}</S.Title>
         <S.DateBox>
           <S.PeopleCountBox>
             <S.PeopleIcon />
             <S.DateText>
-              {group?.memberCount || newGroup.memberCount}
+              {group?.memberCount || newGroup?.memberCount}
             </S.DateText>
           </S.PeopleCountBox>
-          <S.DateText>{group?.createdAt || newGroup.createdAt}</S.DateText>
+          <S.DateText>{group?.createdAt || newGroup?.createdAt}</S.DateText>
         </S.DateBox>
       </S.Container>
     </S.Layout>

diff --git a/src/components/Vote/PhotoContainer/PhotoContainer.tsx b/src/components/Vote/PhotoContainer/PhotoContainer.tsx
@@ -1,17 +1,20 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { BoxBig, BoxMiddle, EmptyPic, Fly } from 'assets/icon';
 import * as S from './Styles';
 import PhotoAddBtn from './PhotoAddBtn';
 import { useLocation } from 'react-router-dom';
 import { useSwipeable } from 'react-swipeable';
+import { useRecoilState } from 'recoil';
+import { addedAgendaPhotos, addedAgendaSrcs } from 'recoil/states/vote';
 
 const PhotoContainer = () => {
   const { state } = useLocation();
   const [currentPage, setCurrentPage] = useState(0);
   const photoPerPage = 4;
   const hasPhotos = state && state.srcs && Array.isArray(state.srcs);
-
-  const pageCount = hasPhotos ? Math.ceil(state.srcs.length / photoPerPage) : 0;
+  const [photos, setPhotos] = useRecoilState(addedAgendaPhotos);
+  const [srcs, setSrcs] = useRecoilState(addedAgendaSrcs);
+  const pageCount = hasPhotos ? Math.ceil(photos.length / photoPerPage) : 0;
 
   const handleSwipedLeft = () => {
     if (currentPage < pageCount - 1) {
@@ -29,26 +32,59 @@ const PhotoContainer = () => {
     trackMouse: true,
   });
 
-  const displayPhotos = hasPhotos
-    ? state.srcs.slice(
-        currentPage * photoPerPage,
-        (currentPage + 1) * photoPerPage,
-      )
-    : [];
+  const displayPhotos =
+    photos.length > 0
+      ? photos.slice(
+          currentPage * photoPerPage,
+          (currentPage + 1) * photoPerPage,
+        )
+      : [];
+
+  useEffect(() => {
+    console.log(state);
+    if (hasPhotos) {
+      if (state && state.scr && photos.length + state.srcs.length > 6) {
+        alert('최대 사진 등록 개수는 6장입니다');
+        return;
+      } else {
+        const newPhotos = [
+          ...photos,
+          ...state.srcs.filter((src: string) => !photos.includes(src)),
+        ];
+        const newSources = [
+          ...srcs,
+          ...state.photos.filter((id: number) => !srcs.includes(id)),
+        ];
+        if (newPhotos.length > 6) {
+          return;
+        }
+        setPhotos(newPhotos);
+        setSrcs(newSources);
+      }
+    } else {
+      setPhotos([]);
+      setSrcs([]);
+    }
+    console.log(srcs);
+  }, [hasPhotos]);
+
+  useEffect(() => {
+    setCurrentPage(0); // 새 사진이 추가될 때마다 페이지를 초기화할 수 있습니다.
+  }, [photos]);
 
   return (
     <>
       {hasPhotos ? (
         <S.Layout>
-          {state?.srcs.length > 2 ? (
+          {photos.length > 2 ? (
             <>
               <BoxBig style={{ position: 'absolute', width: '100%' }} />
               <S.PicContainer {...swipeHandlers}>
                 {displayPhotos.map((src: string, i: number) => (
                   <S.PicImg key={i} src={src} />
                 ))}
               </S.PicContainer>
-              {state?.srcs.length > 4 && (
+              {photos.length > 4 && (
                 <S.Pagination>
                   {Array.from({ length: pageCount }).map((_, index) => (
                     <S.PageDot key={index} active={index === currentPage} />

diff --git a/src/components/Vote/VoteInput/VoteInput.tsx b/src/components/Vote/VoteInput/VoteInput.tsx
@@ -4,7 +4,7 @@ import { BoxSmall } from 'assets/icon';
 import VoteAddBtn from '../VoteAddBtn/VoteAddBtn';
 import { useLocation, useNavigate } from 'react-router-dom';
 import { useRecoilState, useRecoilValue } from 'recoil';
-import { agendaTitle } from 'recoil/states/vote';
+import { addedAgendaSrcs, agendaTitle } from 'recoil/states/vote';
 import { shareGroupId } from 'recoil/states/share_group';
 import { createAgenda } from 'apis/postAgenda';
 
@@ -16,6 +16,7 @@ const VoteInput = () => {
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     setTitle(e.target.value);
   };
+  const sources = useRecoilValue(addedAgendaSrcs);
 
   const handleClickBtn = async () => {
     if (groupId) {
@@ -34,20 +35,16 @@ const VoteInput = () => {
         const { status, data } = await createAgenda({
           shareGroupId: groupId,
           title: title,
-          photos: state.photos,
+          photos: sources,
         });
         if (status === 200) {
-          const agendaId = data.agendaId;
-          nav('/vote/excute', { state: { agendaId: agendaId } });
+          nav('/vote/list');
         }
       } catch (error) {
         console.error(error);
       }
     }
   };
-  useEffect(() => {
-    setTitle('');
-  }, []);
   return (
     <S.Layout>
       <S.TitleContainer>안건</S.TitleContainer>