chore: 이미지 업로드 기능 및 코드 개선 (#249)

JNU-Parking-Ticket-Project · Oct 25, 2024 · 2860a63 · 2860a63
2 parents fde5db8 + 39b104c
commit 2860a63
Show file tree

Hide file tree

Showing 7 changed files with 102 additions and 54 deletions.
diff --git a/.github/workflows/dev-deploy.yaml b/.github/workflows/dev-deploy.yaml
@@ -13,9 +13,9 @@ jobs:
     steps:
       - uses: actions/checkout@v3
 
-####################################################################################################
-# APPLY MODULE
-####################################################################################################          
+      ####################################################################################################
+      # APPLY MODULE
+      ####################################################################################################
       - name: Apply 모듈 배포 스크립트 실행
         uses: appleboy/ssh-action@master
         with:
@@ -25,7 +25,8 @@ jobs:
           port: ${{ secrets.DEV_SSH_PORT }}
           script: |
             cd ~/jnu-parking/Parking-Ticket-FE
-            pnpm install --frozen-lockfile --strict-peerp-dependencies --ignore-scripts
+            git pull origin dev
+            pnpm install --frozen-lockfile --strict-peer-dependencies --ignore-scripts
             pnpm build:apply
 
       - name: Apply 모듈 Slack 성공 알림
@@ -104,9 +105,9 @@ jobs:
         env:
           SLACK_WEBHOOK_URL: ${{ secrets.SLACK_DEPLOY_WEBHOOK_URL }}
 
-####################################################################################################
-# MANAGER MODULE
-####################################################################################################
+      ####################################################################################################
+      # MANAGER MODULE
+      ####################################################################################################
       - name: Manager 모듈 배포 스크립트 실행
         uses: appleboy/ssh-action@master
         with:
@@ -116,7 +117,8 @@ jobs:
           port: ${{ secrets.DEV_SSH_PORT }}
           script: |
             cd ~/jnu-parking/Parking-Ticket-FE
-            pnpm install --frozen-lockfile --strict-peerp-dependencies --ignore-scripts
+            git pull origin dev
+            pnpm install --frozen-lockfile --strict-peer-dependencies --ignore-scripts
             pnpm build:manager
 
       - name: Manager 모듈 Slack 성공 알림

diff --git a/.github/workflows/prod-deploy.yaml b/.github/workflows/prod-deploy.yaml
@@ -6,7 +6,7 @@ on:
 
 env:
   ENVIRONMENT: prod
-      
+
 jobs:
   build:
     runs-on: ubuntu-latest
@@ -31,14 +31,13 @@ jobs:
           touch .env
           echo VITE_REACT_APP_GA_KEY=${{ secrets.VITE_REACT_APP_GA_KEY }} >> .env
           echo VITE_PUBLIC_API_URL=${{ secrets.VITE_PUBLIC_API_URL }} >> .env
-          echo VITE_IMAGE_UPLOAD_LAMBDA_URL=${{ secrets.VITE_IMAGE_UPLOAD_LAMBDA_URL }} >> .env
-          echo VITE_IMAGE_BASE_URL=${{ secrets.VITE_IMAGE_BASE_URL }} >> .env
+          echo VITE_IMAGE_UPLOAD_LAMBDA_URL=${{secrets.VITE_IMAGE_UPLOAD_LAMBDA_URL}} >> .env
+          echo VITE_IMAGE_BASE_URL=${{secrets.VITE_IMAGE_BASE_URL}} >> .env
           cat .env
 
-
-####################################################################################################
-# APPLY MODULE
-####################################################################################################          
+      ####################################################################################################
+      # APPLY MODULE
+      ####################################################################################################
       - name: Apply 모듈 pnpm 빌드
         run: |
           pnpm build:apply
@@ -127,9 +126,9 @@ jobs:
         env:
           SLACK_WEBHOOK_URL: ${{ secrets.SLACK_DEPLOY_WEBHOOK_URL }}
 
-####################################################################################################
-# MANAGER MODULE
-####################################################################################################
+      ####################################################################################################
+      # MANAGER MODULE
+      ####################################################################################################
       - name: Manager 모듈 pnpm 빌드
         run: |
           pnpm build:manager

diff --git a/service-manager/src/apis/image.apis.ts b/service-manager/src/apis/image.apis.ts
@@ -0,0 +1,34 @@
+export const getPresignedUrl = async (extension: string) => {
+  const response = await fetch(
+    new URL(
+      '/api/frontend-image-upload-lambda',
+      import.meta.env.VITE_IMAGE_UPLOAD_LAMBDA_URL,
+    ),
+    {
+      method: 'GET',
+      headers: {
+        'Content-Type': `application/${extension}`,
+        'x-extension': extension,
+      },
+      mode: 'cors',
+    },
+  );
+
+  const requestBody = await response.json();
+
+  return requestBody as { presignedUrl: string };
+};
+
+export const putImageToS3 = async (
+  presignedUrl: string,
+  file: File,
+  extension: string,
+) => {
+  const response = await fetch(presignedUrl, {
+    method: 'PUT',
+    headers: {
+      'Content-Type': `application/${extension}`,
+    },
+    body: file,
+  });
+};
diff --git a/service-manager/src/components/announcement/AnnouncementCreate.tsx b/service-manager/src/components/announcement/AnnouncementCreate.tsx
@@ -1,8 +1,9 @@
 import { Button, InputText } from '@quokka/design-system';
 import { Editor } from '@toast-ui/react-editor';
-import { useRef, lazy, Suspense, useState, useEffect } from 'react';
+import { useRef, lazy, Suspense, useState } from 'react';
 import { useCreateAnnouncement } from '../../hooks/react-query/useAnnounceForm';
 import ErrorBoundary from '../common/ErrorBoundary';
+import { getPresignedUrl, putImageToS3 } from '../../apis/image.apis';
 
 const ToastEditor = lazy(() =>
   import('@toast-ui/react-editor').then((module) => ({
@@ -33,7 +34,28 @@ export const AnnouncementCreate = () => {
   };
 
   const onAddImageBlobHook = (blob: Blob, callback: (url: string) => void) => {
-    alert('이미지를 올릴 수 없습니다.');
+    const extension = blob.name.split('.')[1];
+
+    getPresignedUrl(extension)
+      .then((res) => {
+        putImageToS3(res.presignedUrl, new File([blob], blob.name), extension)
+          .then(() => {
+            const url = new URL(res.presignedUrl);
+            const fileName = url.pathname.slice(1);
+            callback(
+              new URL(fileName, import.meta.env.VITE_IMAGE_BASE_URL).toString(),
+            );
+          })
+          .catch(() => {
+            alert('이미지 업로드에 실패했습니다.');
+          });
+      })
+      .catch(() => {
+        alert(
+          '이미지 업로드를 위한 URL 발급에 실패했습니다. 파일은 <파일명.확장자> 형식으로 업로드 되어야 합니다.',
+        );
+      });
+
     return;
   };
 

diff --git a/service-manager/src/components/announcement/AnnouncementUpdate.tsx b/service-manager/src/components/announcement/AnnouncementUpdate.tsx
@@ -1,9 +1,10 @@
 import { Button } from '@quokka/design-system';
 import { Editor } from '@toast-ui/react-editor';
-import { useRef, lazy, Suspense, FormEvent, useState } from 'react';
+import { useRef, lazy, Suspense, useState } from 'react';
 import { useAnnounceUpdate } from '../../hooks/react-query/useAnnounceForm';
 import { useAnnounceDetailQuery } from '../../hooks/react-query/useAnnounce';
 import ErrorBoundary from '../common/ErrorBoundary';
+import { getPresignedUrl, putImageToS3 } from '../../apis/image.apis';
 
 interface AnnouncementUpdateProps {
   announceId: number;
@@ -38,7 +39,28 @@ export const AnnouncementUpdate = ({ announceId }: AnnouncementUpdateProps) => {
   };
 
   const onAddImageBlobHook = (blob: Blob, callback: (url: string) => void) => {
-    alert('이미지를 올릴 수 없습니다.');
+    const extension = blob.name.split('.')[1];
+
+    getPresignedUrl(extension)
+      .then((res) => {
+        putImageToS3(res.presignedUrl, new File([blob], blob.name), extension)
+          .then(() => {
+            const url = new URL(res.presignedUrl);
+            const fileName = url.pathname.slice(1);
+            callback(
+              new URL(fileName, import.meta.env.VITE_IMAGE_BASE_URL).toString(),
+            );
+          })
+          .catch(() => {
+            alert('이미지 업로드에 실패했습니다.');
+          });
+      })
+      .catch(() => {
+        alert(
+          '이미지 업로드를 위한 URL 발급에 실패했습니다. 파일은 <파일명.확장자> 형식으로 업로드 되어야 합니다.',
+        );
+      });
+
     return;
   };
 

diff --git a/service-manager/src/hooks/react-query/useNoticeForm.tsx b/service-manager/src/hooks/react-query/useNoticeForm.tsx
diff --git a/service-manager/src/hooks/useNoticeForm.tsx b/service-manager/src/hooks/useNoticeForm.tsx
@@ -7,7 +7,6 @@ export interface NoticeFormProps {
 }
 
 export const useNoticeForm = () => {
-  const [content] = useState<string>('');
   const { putNotice } = useNoticeMutate();
   const navigate = useNavigate();
 
@@ -26,5 +25,5 @@ export const useNoticeForm = () => {
       },
     );
   };
-  return { content, onUpdate };
+  return { onUpdate };
 };