프로필 변경 이미지 업로드

.github/workflows/deploy.yml

@@ -11,22 +11,31 @@ jobs:
         uses: actions/checkout@v2
       - name: Check Node v
         run: node -v
+
       - name: Install Dependencies
         run: npm install --frozen-lockfile
       - name: Build
         run: CI='false' npm run build
-      - name: zip create
-        run: zip -qq -r ./test-build.zip .
-        shell: bash
+
+      - name: Prepare files for upload
+        run: |
+          mkdir upload-build
+          cp -r build/* upload-build/
+
+      - name: Create zip
+        run: zip -qq -r ./build.zip ./upload-build
+
       - name: Configure AWS credentials
         uses: aws-actions/configure-aws-credentials@v1
         with:
           aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY }}
           aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }} 
           aws-region: ${{ secrets.AWS_REGION }}
+
       - name: Upload to S3
         run: | 
-          aws s3 cp --region us-east-1 ./test-build.zip s3://kea3-006-s3-test/test-build.zip
+            aws s3 cp --region us-east-1 ./build.zip s3://kea3-006-s3-test/build.zip
+
       - name: Deplo
         run: aws deploy create-deployment
           --application-name test-codeDeploy

appspec.yml

@@ -1,16 +1,16 @@
 version: 0.0
 os: linux
 files:
-  - source: /
+  - source: /build
     destination: /home/ubuntu/deploy
     overwrite: yes
 permissions:
   - object: /home/ubuntu/deploy
-    owner: root
-    group: root
+    owner: ubuntu
+    group: ubuntu
     mode: 755
 hooks:
   AfterInstall:
-    - location: deploy.sh 
-      timeout: 1000
-      runas: root
+    - location: deploy.sh
+      timeout: 300
+      runas: ubuntu

deploy.sh

@@ -2,15 +2,15 @@
 # 디렉토리로 이동
 cd /home/ubuntu/deploy
 
-# Yarn을 사용하여 종속성 설치
-sudo npm install
+# 종속성 설치
+npm install
 
 # 리액트 애플리케이션 빌드
-sudo npm run build
+npm run build
 
 # 빌드된 파일들을 웹 루트 디렉토리로 이동
-sudo mv /home/ubuntu/deploy/build/* /var/www/html/
+rsync -av --delete /home/ubuntu/deploy/build/ /var/www/html/
 
 # PM2와 Nginx 재시작
 sudo npx pm2 reload all
-sudo service nginx restart
+sudo service nginx restart

package.json

@@ -7,7 +7,7 @@
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
-    "aws-sdk": "^2.1507.0",
+    "aws-sdk": "^2.1515.0",
     "axios": "^1.5.1",
     "date-fns": "^2.30.0",
     "http-proxy-middleware": "^2.0.6",

src/component/ui/comment/CommentList.jsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { useParams, useNavigate } from "react-router-dom";
-import { useRecoilState, useRecoilValue } from 'recoil';
+import { useRecoilState } from 'recoil';
 import { bookmarkResultState, nickNameState } from '../../common/AuthState';
 import axios from 'axios';
 import CommentWrite from './CommentWrite';

src/component/ui/personal/UserProfileChange.jsx

@@ -1,9 +1,11 @@
-import React, { useState } from 'react';
+import React, { useState, useCallback } from 'react';
 import axios from "axios";
 import { FaCog } from 'react-icons/fa';
 import { BiUserCircle } from "react-icons/bi";
 import { useRecoilValue } from 'recoil';
 import { memberIdState } from '../../common/AuthState';
+import AWS from 'aws-sdk';
+import { v1 as uuidv1 } from 'uuid';
 import '../../../styles/component/UserProfileChange.css';
 
 const UserProfileChange = ({ onSaveChanges }) => {
@@ -20,6 +22,35 @@ const UserProfileChange = ({ onSaveChanges }) => {
     const [confirmPassword, setConfirmPassword] = useState(''); // 비밀번호 확인 상태 변수
     const [passwordChangeUrl, setPasswordChangeUrl] = useState('');
 
+    const onFileChange = useCallback(async (e) => {
+        const file = e.target.files[0];
+
+        if (file) {
+            const s3 = new AWS.S3({
+                region: process.env.REACT_APP_AWS_DEFAULT_REGION,
+                accessKeyId: process.env.REACT_APP_AWS_ACCESS_KEY_ID,
+                secretAccessKey: process.env.REACT_APP_AWS_SECRET_ACCESS_KEY
+            });
+
+            const params = {
+                Bucket: process.env.REACT_APP_AWS_BUCKET, // 버킷 이름
+                Key: `profile/${uuidv1()}.${file.type.split("/")[1]}`, 
+                Body: file,
+                ContentType: file.type,
+                ACL: "public-read"
+            };
+
+            try {
+                const uploadResult = await s3.upload(params).promise();
+                console.log('Image uploaded to S3 successfully', uploadResult);
+                // 업로드된 이미지의 URL을 상태에 저장
+                setProfileImage(uploadResult.Location);
+            } catch (error) {
+                console.error('Error uploading image to S3:', error);
+            }
+        }
+    }, []);
+
     const formatDate = (dateString) => {
         const date = new Date(dateString);
         return `${date.getFullYear()}년 ${date.getMonth() + 1}월 ${date.getDate()}일`;
@@ -84,12 +115,16 @@ const UserProfileChange = ({ onSaveChanges }) => {
 
     return (
         <div className="userProfileChange">
-            <div className="profileImage">
-                <BiUserCircle size={200} className="userIcon" />
+             <div className="profileImage">
+                {profileImage ? (
+                    <img src={profileImage} alt="Profile" className="userImage" />
+                ) : (
+                    <BiUserCircle size={200} className="userIcon" />
+                )}
                 <label htmlFor="image-upload" className="imageEdit">
                     <FaCog size={30} />
                 </label>
-                <input id="image-upload" type="file" onChange={handleImageChange} style={{ display: 'none' }} />
+                <input id="image-upload" type="file" onChange={onFileChange} style={{ display: 'none' }} />
             </div>
             <div className="profileChangeBox">
                 <div className="profileField">

src/pages/main/Main.jsx

@@ -182,7 +182,7 @@ export default function MainPage() {
                             <div className="mainContent">
                                 <p>
                                     떠나고 싶은 곳을<br/>
-                                    선택해보세요! 제발 ㅠㅠ
+                                    선택해보세요!!
                                 </p>
                                 <h>국내 여행 기록 Travelog</h>
                                 <div className="searchContainer">

src/styles/component/Footer.css

@@ -3,7 +3,7 @@
     text-align: center;
     position: sticky;
     /* bottom: 0; */
-    z-index: -1;
+    /* z-index: -1; */
 }
 
 .footer-content {