Merge pull request #101 from Na-o-man/feat/#89

Feat/#89 사진 API 리팩토링
Na-o-man · Aug 23, 2024 · dc220c3 · dc220c3
2 parents baea6ab + 6874a15
commit dc220c3
Show file tree

Hide file tree

Showing 15 changed files with 202 additions and 145 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -12,7 +12,6 @@
     "cookie-parser": "^1.4.6",
     "cors": "^2.8.5",
     "express": "^4.19.2",
-    "jszip": "^3.10.1",
     "react": "^18.3.1",
     "react-cookie": "^7.2.0",
     "react-dom": "^18.3.1",

diff --git a/src/apis/getDownloadPhotos.ts b/src/apis/getDownloadPhotos.ts
diff --git a/src/apis/getPhotos.ts b/src/apis/getPhotos.ts
@@ -1,3 +1,4 @@
+import { AxiosResponse } from 'axios';
 import { authInstance } from './instance';
 
 interface requestProp {
@@ -7,6 +8,63 @@ interface requestProp {
   size?: number;
 }
 
+export const getPhotosAll = async (
+  requestData: requestProp,
+): Promise<{ status: number; data: any }> => {
+  try {
+    const { shareGroupId, page, size } = requestData;
+    // 쿼리 문자열 생성
+    const params = new URLSearchParams();
+    params.append('shareGroupId', shareGroupId.toString());
+    if (page !== undefined) {
+      params.append('page', page.toString());
+    }
+    if (size !== undefined) {
+      params.append('size', size.toString());
+    }
+
+    const res = await authInstance().get(`/photos/all?${params.toString()}`);
+    const { status, code, message, data } = res.data;
+    if (status === 200) {
+      return { status, data };
+    } else {
+      throw new Error(`Error ${code}: ${message}`);
+    }
+  } catch (error) {
+    console.error('Error: ', error);
+    throw error;
+  }
+};
+
+export const getPhotosEtc = async (
+  requestData: requestProp,
+): Promise<AxiosResponse> => {
+  try {
+    const { shareGroupId, page, size } = requestData;
+    // 쿼리 문자열 생성
+    const params = new URLSearchParams();
+    params.append('shareGroupId', shareGroupId.toString());
+    if (page !== undefined) {
+      params.append('page', page.toString());
+    }
+    if (size !== undefined) {
+      params.append('size', size.toString());
+    }
+
+    const res = await authInstance().get(`/photos/etc?${params.toString()}`);
+    const { status, code, message, data } = res.data;
+    if (status === 200) {
+      console.log(data);
+      return res.data;
+    } else {
+      throw new Error(`Error ${code}: ${message}`);
+    }
+  } catch (error) {
+    console.error('Error: ', error);
+    throw error;
+  }
+};
+
 export const getPhotos = async (
   requestData: requestProp,
 ): Promise<{ status: number; data: any }> => {

diff --git a/src/apis/getPhotosAll.ts → src/apis/getPhotosDownload.ts b/src/apis/getPhotosAll.ts → src/apis/getPhotosDownload.ts
@@ -1,31 +1,28 @@
 import getApiResponse from 'recoil/types/apis';
 import { authInstance } from './instance';
+import { AxiosResponse } from 'axios';
 
 interface requestProp {
   shareGroupId: number;
   page?: number;
   size?: number;
 }
 
-export const getPhotosAll = async (
-  requestData: requestProp,
-): Promise<{ status: number; data: any }> => {
+export const getPhotosAllDownload = async (
+  shareGroupId: number,
+): Promise<getApiResponse> => {
   try {
-    const { shareGroupId, page, size } = requestData;
     // 쿼리 문자열 생성
     const params = new URLSearchParams();
     params.append('shareGroupId', shareGroupId.toString());
-    if (page !== undefined) {
-      params.append('page', page.toString());
-    }
-    if (size !== undefined) {
-      params.append('size', size.toString());
-    }
 
-    const res = await authInstance().get(`/photos/all?${params.toString()}`);
+    const res = await authInstance().get(
+      `/photos/download/all?${params.toString()}`,
+    );
     const { status, code, message, data } = res.data;
     if (status === 200) {
-      return { status, data };
+      console.log(data);
+      return res.data;
     } else {
       throw new Error(`Error ${code}: ${message}`);
     }
@@ -35,22 +32,17 @@ export const getPhotosAll = async (
   }
 };
 
-export const getPhotosEtc = async (
-  requestData: requestProp,
+export const getPhotosEtcDownload = async (
+  shareGroupId: number,
 ): Promise<getApiResponse> => {
   try {
-    const { shareGroupId, page, size } = requestData;
     // 쿼리 문자열 생성
     const params = new URLSearchParams();
     params.append('shareGroupId', shareGroupId.toString());
-    if (page !== undefined) {
-      params.append('page', page.toString());
-    }
-    if (size !== undefined) {
-      params.append('size', size.toString());
-    }
 
-    const res = await authInstance().get(`/photos/etc?${params.toString()}`);
+    const res = await authInstance().get(
+      `/photos/download/etc?${params.toString()}`,
+    );
     const { status, code, message, data } = res.data;
     if (status === 200) {
       console.log(data);
@@ -63,3 +55,18 @@ export const getPhotosEtc = async (
     throw error;
   }
 };
+
+export const getPhotosAlbumDownload = async (
+  shareGroupId: number,
+  profileId: number,
+): Promise<AxiosResponse> => {
+  try {
+    const res = await authInstance().get(
+      `/photos/download/album?shareGroupId=${shareGroupId}&profileId=${profileId}`,
+    );
+    return res;
+  } catch (error) {
+    console.error('Error: ', error);
+    throw error;
+  }
+};
diff --git a/src/apis/instance.ts b/src/apis/instance.ts
@@ -17,8 +17,8 @@ export const baseInstance = (
 export const authInstance = (
   options: AxiosRequestConfig = {},
 ): AxiosInstance => {
-  const TOKEN = getCookie('access-token');
-  // const TOKEN = process.env.REACT_APP_REFRESH_TOKEN;
+  // const TOKEN = getCookie('access-token');
+  const TOKEN = process.env.REACT_APP_REFRESH_TOKEN;
   return axios.create({
     baseURL: BASE_URL,
     headers: {

diff --git a/src/components/ShareGroup/ShareGroupCarousel/ShareGroupCarousel.tsx b/src/components/ShareGroup/ShareGroupCarousel/ShareGroupCarousel.tsx
@@ -25,6 +25,9 @@ const ShareGroupCarousel: React.FC<CarouselProps> = ({ items }) => {
     handleDragStart,
     handleDragMove,
     handleDragEnd,
+    handleTouchStart,
+    handleTouchMove,
+    handleTouchEnd,
     handleKeyDown,
   } = useCarousel(items.length, containerRef);
 
@@ -45,12 +48,12 @@ const ShareGroupCarousel: React.FC<CarouselProps> = ({ items }) => {
   return (
     <S.CarouselContainer
       ref={containerRef}
-      onTouchStart={(e) => handleDragStart(e.touches[0].clientX)}
-      onTouchMove={(e) => handleDragMove(e.touches[0].clientX)}
-      onTouchEnd={handleDragEnd}
-      onMouseDown={(e) => handleDragStart(e.clientX)}
-      onMouseMove={(e) => handleDragMove(e.clientX)}
+      onMouseDown={(e) => handleDragStart(e.clientX, e.clientY)}
+      onMouseMove={(e) => handleDragMove(e.clientX, e.clientY)}
       onMouseUp={handleDragEnd}
+      onTouchStart={(e) => handleTouchStart(e)}
+      onTouchMove={(e) => handleTouchMove(e)}
+      onTouchEnd={handleTouchEnd}
       onMouseLeave={handleDragEnd}
       tabIndex={0}
       onKeyDown={handleKeyDown}

diff --git a/src/components/ShareGroup/ShareGroupCarouselItem/ShareGroupCarouselItem.tsx b/src/components/ShareGroup/ShareGroupCarouselItem/ShareGroupCarouselItem.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import * as S from './Styles';
 import { useNavigate, useParams } from 'react-router-dom';
-import defaultProfile from '../../../assets/samples/emptyProfile.png';
+import defaultProfile from '../../../assets/samples/emptyProfile.png';
 import { useSetRecoilState } from 'recoil';
 import {
   dropDownTitle,