From e811ad32de9db82be763a337495f7029127efdb6 Mon Sep 17 00:00:00 2001
From: boeunLee <bounjaeun@gmail.com>
Date: Sun, 9 Jun 2024 20:34:00 +0900
Subject: [PATCH] =?UTF-8?q?[FEAT]=20s3=20url=20=EB=B0=9B=EC=95=84=EC=98=A4?=
 =?UTF-8?q?=EA=B8=B0=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

image bucket base url 변경, magazine폴더 생김에 따라, s3 url을 get하는 방식을 변경합니다.
---
 src/components/ImageUploader.tsx    | 13 +++++--------
 src/components/MagazineImage.tsx    |  4 +---
 src/components/MagazineQuestion.tsx |  2 +-
 src/lib/api/image.ts                |  2 +-
 4 files changed, 8 insertions(+), 13 deletions(-)

diff --git a/src/components/ImageUploader.tsx b/src/components/ImageUploader.tsx
index 7efe64f..f3518af 100644
--- a/src/components/ImageUploader.tsx
+++ b/src/components/ImageUploader.tsx
@@ -13,7 +13,7 @@ interface containerSize {
   onDelete?: () => void;
 }
 
-const baseURL = 'https://s3.ap-northeast-2.amazonaws.com/dev.statics.team-gam-api.com/work/';
+const baseURL = import.meta.env.VITE_IMAGE_URL;
 
 const ImageUploader = (props: containerSize) => {
   const { setValue, width, height, target, watch, onDelete } = props;
@@ -50,7 +50,6 @@ const ImageUploader = (props: containerSize) => {
       if (files == null || files.length === 0) return;
 
       const file = files[0];
-      console.log(file.size);
 
       if (file.size > 10 * 1024 * 1024) {
         window.alert('이미지 크기는 10MB 이하여야 합니다.');
@@ -67,7 +66,6 @@ const ImageUploader = (props: containerSize) => {
       try {
         const res = await getPresignedUrl(file.name);
         const { preSignedUrl, fileName } = res.data;
-        console.log(preSignedUrl);
         if (!preSignedUrl) {
           throw new Error('presigned-url을 받아오는데 실패하였습니다.');
         }
@@ -81,14 +79,13 @@ const ImageUploader = (props: containerSize) => {
 
         await putPresignedUrl(compressedFile, decodeURIComponent(preSignedUrl));
 
-        // 기존의 fileName 형식: work/.. 형태
-        const formatFileName = fileName.substring(fileName.indexOf('/') + 1);
-        console.log(formatFileName);
+        // 기존의 fileName 형식: magazine/.. 형태
+        const formatFileName = `/${fileName}`;
 
-        const s3Url = `${baseURL}${formatFileName}`;
         // 이미지를 띄울때는 baseURL을 포함한 경로로 띄우기
+        const s3Url = `${baseURL}${formatFileName}`;
         setPreviewImage(s3Url);
-        // 폼에 이미지를 저장할때는 baseURL을 제외하고 올리기
+        // 폼에 이미지를 저장할때는 /magazine/... 형태로 저장
         setValue(target, formatFileName);
       } catch (e) {
         console.error(e);
diff --git a/src/components/MagazineImage.tsx b/src/components/MagazineImage.tsx
index 0e89a1b..014925d 100644
--- a/src/components/MagazineImage.tsx
+++ b/src/components/MagazineImage.tsx
@@ -4,7 +4,7 @@ import Slider from 'react-slick';
 import 'slick-carousel/slick/slick.css';
 import 'slick-carousel/slick/slick-theme.css';
 
-const baseURL = 'https://s3.ap-northeast-2.amazonaws.com/dev.statics.team-gam-api.com/work/';
+const baseURL = import.meta.env.VITE_IMAGE_URL;
 
 const MagazineImage = ({ magazinePhotos }: { magazinePhotos: string[] }) => {
   const settings = {
@@ -12,8 +12,6 @@ const MagazineImage = ({ magazinePhotos }: { magazinePhotos: string[] }) => {
     arrows: false,
   };
 
-  console.log(baseURL, magazinePhotos);
-
   return (
     <St.MagazineImages>
       <Slider {...settings}>
diff --git a/src/components/MagazineQuestion.tsx b/src/components/MagazineQuestion.tsx
index cb107cb..5113788 100644
--- a/src/components/MagazineQuestion.tsx
+++ b/src/components/MagazineQuestion.tsx
@@ -6,7 +6,7 @@ import AccordionDetails from '@mui/material/AccordionDetails';
 import { makeStyles } from '@material-ui/core';
 import { magazineQuestionInfo } from '../types/magazine';
 
-const baseURL = 'https://s3.ap-northeast-2.amazonaws.com/dev.statics.team-gam-api.com/work/';
+const baseURL = import.meta.env.VITE_IMAGE_URL;
 
 const useStyles = makeStyles({
   customIconRotation: {
diff --git a/src/lib/api/image.ts b/src/lib/api/image.ts
index 15db7e3..717fbd9 100644
--- a/src/lib/api/image.ts
+++ b/src/lib/api/image.ts
@@ -3,7 +3,7 @@ import { client } from '../axios';
 
 export const getPresignedUrl = async (fileName: string) => {
   try {
-    const { data } = await client.get(`/api/v1/s3/image?fileName=${fileName}&type=work`);
+    const { data } = await client.get(`/api/v1/s3/image?fileName=${fileName}&type=magazine`);
     return data;
   } catch (e) {
     console.error(e);