[#246]: 이미지 업로드 (#269)

* fix[#29]: 디자인 검수 수정 * style:main css 수정 * fix:메인 css 수정 * fix:메인 css 수정 * main css 수정 * 북마크 css 수정 * resolve login error * feat[#246]: 사진업로드 * [#246]: 이미지 업로드
RE-BON · Aug 12, 2022 · dff4840 · dff4840
1 parent 4828bf6
commit dff4840
Show file tree

Hide file tree

Showing 6 changed files with 120 additions and 16 deletions.
diff --git a/FrontEnd/rebon-frontend/src/pages/Mypage/Bookmark/BookmarkCard/index.js b/FrontEnd/rebon-frontend/src/pages/Mypage/Bookmark/BookmarkCard/index.js
@@ -10,15 +10,17 @@ export default function BookmarkCard() {
         <div className="bookmarkCard-img">
           <FiHeart md={8} size="22" />
         </div>
-        <div className="titleRow">
-          <div className="placeName">Place one</div>
-          <div className="starNum">4.9</div>
+        <div className="bookmarkCard-bottom">
+          <div className="titleRow">
+            <div className="placeName">Place one</div>
+            <div className="starNum">4.9</div>
+          </div>
+          <ul className="tag-wrapper">
+            <li className="tag">칠포해수욕장</li>
+            <li className="tag">칠포읍</li>
+            <li className="tag">한식</li>
+          </ul>
         </div>
-        <ul className="tag-wrapper">
-          <li className="tag">칠포해수욕장</li>
-          <li className="tag">칠포읍</li>
-          <li className="tag">한식</li>
-        </ul>
       </div>
       {/* /////////////////////// 모바일 /////////////////////// */}
       <div className="bookmarkCard-mobile">

diff --git a/FrontEnd/rebon-frontend/src/pages/Post/PostModal/index.js b/FrontEnd/rebon-frontend/src/pages/Post/PostModal/index.js
@@ -5,6 +5,8 @@ import Modal, { ModalProvider, BaseModalBackground } from 'styled-react-modal';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faXmark } from '@fortawesome/free-solid-svg-icons';
 import '../../../styles/post-modal.css';
+import AWS from 'aws-sdk';
+
 export default function PostModal() {
   const [isOpen, setIsOpen] = useState(false);
   const [opacity, setOpacity] = useState(0);
@@ -34,9 +36,9 @@ export default function PostModal() {
 
   return (
     <ModalProvider backgroundComponent={FadingBackground}>
-      <div className="post-modal-click" onClick={toggleModal}>
+      {/* <div className="post-modal-click" onClick={toggleModal}>
         작성완료
-      </div>
+      </div> */}
 
       <StyledModal
         isOpen={isOpen}

diff --git a/FrontEnd/rebon-frontend/src/pages/Post/index.js b/FrontEnd/rebon-frontend/src/pages/Post/index.js
@@ -8,6 +8,10 @@ import PostModal from './PostModal';
 import { useState, useNavigate } from 'react';
 import axios from 'axios';
 import AWS from 'aws-sdk';
+import styled from 'styled-components';
+import Modal, { ModalProvider, BaseModalBackground } from 'styled-react-modal';
+import { Link } from 'react-router-dom';
+import { faXmark } from '@fortawesome/free-solid-svg-icons';
 
 export default function Post() {
   //별 state
@@ -29,8 +33,13 @@ export default function Post() {
 
   //이미지 state
   const [imageSrc, setImageSrc] = useState('');
-  const region = 'us-east-1';
-  const bucket = 'elice-boardgame-project';
+  const [file, setFile] = useState();
+  const [fileName, setFileName] = useState();
+  const [isOpen, setIsOpen] = useState(false);
+  const [opacity, setOpacity] = useState(0);
+
+  const region = 'ap-northeast-2';
+  const bucket = 'rebon';
 
   AWS.config.update({
     region: region,
@@ -54,6 +63,29 @@ export default function Post() {
     });
   };
 
+  const imgUpload = async (e) => {
+    const upload = new AWS.S3.ManagedUpload({
+      params: {
+        Bucket: bucket, // 버킷 이름
+        Key: fileName,
+        Body: file, // 파일 객체
+      },
+    });
+
+    const promise = upload.promise();
+    promise.then(
+      function () {
+        // 이미지 업로드 성공
+        setOpacity(0);
+        setIsOpen(!isOpen);
+      },
+      function (err) {
+        // 이미지 업로드 실패
+        alert('이미지 업로드 실패');
+      }
+    );
+  };
+
   const [token, setToken] = useState(window.sessionStorage.getItem('token'));
   const postSubmit = () => {
     const config = {
@@ -78,6 +110,29 @@ export default function Post() {
       });
   };
 
+  function toggleModal(e) {
+    setOpacity(0);
+    setIsOpen(!isOpen);
+  }
+
+  function afterOpen() {
+    setTimeout(() => {
+      setOpacity(1);
+    }, 100);
+  }
+
+  function beforeClose() {
+    return new Promise((resolve) => {
+      setOpacity(0);
+      setTimeout(resolve, 300);
+    });
+  }
+
+  const FadingBackground = styled(BaseModalBackground)`
+    opacity: ${(props) => props.opacity};
+    transition: all 0.3s ease-in-out;
+  `;
+
   return (
     <>
       {isMobile ? <div></div> : <Header />}
@@ -175,6 +230,8 @@ export default function Post() {
             hidden
             onChange={(e) => {
               preview(e.target.files[0]);
+              setFile(e.target.files[0]);
+              setFileName(e.target.files[0].name);
             }}
           />
           <div className="post-attach-contents">
@@ -191,11 +248,44 @@ export default function Post() {
         </div>
         <div className="post-button">
           <div className="post-button-cancel">취소</div>
-          <div className="post-button-finish" onClick={postSubmit}>
-            <PostModal />
+          <div className="post-button-finish">
+            <div className="post-modal-click" onClick={imgUpload}>
+              작성완료
+            </div>
+            {/* <PostModal /> */}
+            <ModalProvider backgroundComponent={FadingBackground}>
+              <StyledModal
+                isOpen={isOpen}
+                afterOpen={afterOpen}
+                beforeClose={beforeClose}
+                onBackgroundClick={toggleModal}
+                onEscapeKeydown={toggleModal}
+                opacity={opacity}
+                backgroundProps={{ opacity }}
+              >
+                <div className="post-modal-wrapper">
+                  <button className="close" onClick={toggleModal}>
+                    <Link to="/mypage/footprint" style={{ color: 'inherit', textDecoration: 'none' }}>
+                      <FontAwesomeIcon icon={faXmark} />
+                    </Link>
+                  </button>
+                  <img className="post-modal-image" alt="review-image" src="image/reviewLogo.png" />
+                  <div className="post-modal-notice">리뷰가 등록되었습니다.</div>
+                </div>
+              </StyledModal>
+            </ModalProvider>
           </div>
         </div>
       </div>
     </>
   );
 }
+
+const StyledModal = Modal.styled`
+  width: 21rem;
+  height: 16rem;
+  padding : 20px;
+  border-radius:20px;
+  background-color: white;
+  opacity: ${(props) => props.opacity};
+  transition : all 0.3s ease-in-out;`;
diff --git a/FrontEnd/rebon-frontend/src/styles/bookmark-card.css b/FrontEnd/rebon-frontend/src/styles/bookmark-card.css
@@ -7,10 +7,19 @@
 .bookmarkCard-img {
   height: 150px;
   background-color: #f5f5f5;
-  border-radius: 16px;
+  border: 1px solid #c4c4c4;
+  border-radius: 16px 16px 0 0 !important;
   text-align: end;
   padding: 4%;
   color: #ff6b6c;
+  border-bottom: none;
+}
+
+.bookmarkCard-bottom {
+  border-radius: 0 0 15px 15px;
+  border: 1px solid #c4c4c4;
+  overflow: auto;
+  padding: 0 10px 10px 10px;
 }
 
 .mainCard-wrapper {

diff --git a/FrontEnd/rebon-frontend/src/styles/main.css b/FrontEnd/rebon-frontend/src/styles/main.css
@@ -157,6 +157,7 @@
 .mainCard {
   position: relative;
   width: 30%;
+  min-width: 15.5rem;
   margin-bottom: 35px;
 }
 

diff --git a/FrontEnd/rebon-frontend/src/styles/mypage.css b/FrontEnd/rebon-frontend/src/styles/mypage.css
@@ -283,7 +283,7 @@
   .mypage-tab {
     padding-top: 1rem;
     position: absolute;
-    min-width: 35rem;
+    min-width: 32rem;
     height: 100vh;
     display: flex;
     justify-content: end;