feat: 썸네일 이미지 업로드 api 연동

hyundai-autoever-first-project-team3 · Oct 25, 2024 · 4233abb · 4233abb
1 parent fefbbaf
commit 4233abb
Show file tree

Hide file tree

Showing 8 changed files with 75 additions and 27 deletions.
diff --git a/src/api/detail.js b/src/api/detail.js
@@ -58,3 +58,21 @@ export const postComment = async ({ tilId, content }) => {
     }
   );
 };
+
+// 좋아요 추가
+export const postLike = async () => {
+  return await client.post(`/api/like`, {
+    headers: {
+      Authorization: `Bearer ${token}`,
+    },
+  });
+};
+
+// 좋아요 삭제
+export const deleteLike = async () => {
+  return await client.delete(`/api/like`, {
+    headers: {
+      Authorization: `Bearer ${token}`,
+    },
+  });
+};
diff --git a/src/api/write.js b/src/api/write.js
@@ -0,0 +1,14 @@
+import client from "./client";
+import { getCookie } from "./cookie";
+
+const token = getCookie("accessToken");
+
+// 이미지 업로드
+export const postImageUpload = async (formData) => {
+  return await client.post(`/api/upload`, formData, {
+    headers: {
+      "Content-Type": "multipart/form-data",
+      Authorization: `Bearer ${token}`,
+    },
+  });
+};
diff --git a/src/components/EditorPage/MdEditor.jsx b/src/components/EditorPage/MdEditor.jsx
@@ -9,6 +9,7 @@ import "../../styles/Editor.css";
 import { getAlgorithms, postTIL } from "../../api/detail";
 import { useNavigate } from "react-router-dom";
 import ThumbnailModal from "./ThumbnailModal";
+import { postImageUpload } from "../../api/write";
 
 function MdEditor() {
   const navigate = useNavigate();
@@ -27,8 +28,8 @@ function MdEditor() {
   const [isModalOpen, setIsModalOpen] = useState(false);
   const algorithmNames = algorithmOptions.map((item) => item.korClassification);
 
-  const handlePostData = () => {
-    postTIL(postData).then((res) => navigate(`/posts/${res.data.id}`));
+  const handlePostData = (data) => {
+    postTIL(data).then((res) => navigate(`/posts/${res.data.id}`));
   };
 
   const handleDrop = async (event) => {
@@ -45,9 +46,14 @@ function MdEditor() {
   };
 
   const handleModalSave = (thumbnail) => {
-    setPostData((prev) => ({ ...prev, thumbnail }));
-    setIsModalOpen(false);
-    handlePostData();
+    postImageUpload({ img: thumbnail }).then((res) => {
+      const addedPostData = {
+        ...postData,
+        thumbnailImage: res.data.uploadedUrl,
+      };
+      handlePostData(addedPostData);
+      setIsModalOpen(false);
+    });
   };
 
   useEffect(() => {
@@ -121,4 +127,4 @@ function MdEditor() {
   );
 }
 
-export default MdEditor;
+export default MdEditor;
diff --git a/src/components/EditorPage/ThumbnailModal.jsx b/src/components/EditorPage/ThumbnailModal.jsx
@@ -1,22 +1,20 @@
-import React from 'react';
-import { Modal, Box, IconButton, Button } from '@mui/material';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faX } from '@fortawesome/free-solid-svg-icons';
-import { useMediaQuery } from '@mui/material';
+import React from "react";
+import { Modal, Box, IconButton, Button } from "@mui/material";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faX } from "@fortawesome/free-solid-svg-icons";
+import { useMediaQuery } from "@mui/material";
 
 const ThumbnailModal = ({ isOpen, onClose, onSave }) => {
   const [thumbnail, setThumbnail] = React.useState(null);
-  const isMobile = useMediaQuery('(max-width:550px)');
+  const isMobile = useMediaQuery("(max-width:550px)");
 
   const handleFileChange = (event) => {
     const file = event.target.files[0];
-    if (file) {
-      setThumbnail(URL.createObjectURL(file));
-    }
+    setThumbnail(file);
   };
 
   const handleCustomButtonClick = () => {
-    document.getElementById('file-input').click();
+    document.getElementById("file-input").click();
   };
 
   return (
@@ -55,8 +53,12 @@ const ThumbnailModal = ({ isOpen, onClose, onSave }) => {
               className="hidden"
             />
             {thumbnail && (
-              <img src={thumbnail} alt="Thumbnail Preview" className="my-3"
-              style={{ height: '200px', objectFit: 'cover' }} />
+              <img
+                src={URL.createObjectURL(thumbnail)}
+                alt="Thumbnail Preview"
+                className="my-3"
+                style={{ height: "200px", objectFit: "cover" }}
+              />
             )}
             <Button
               variant="contained"
@@ -80,4 +82,4 @@ const ThumbnailModal = ({ isOpen, onClose, onSave }) => {
   );
 };
 
-export default ThumbnailModal;
+export default ThumbnailModal;
diff --git a/src/components/common/Card.jsx b/src/components/common/Card.jsx
@@ -20,17 +20,25 @@ const Card = ({
     day: "numeric",
   });
 
+  const addDefaultThumbnail = (e) => {
+    e.currentTarget.src =
+      "https://velog.velcdn.com/images/k-svelte-master/post/43c86caf-fed8-4ab2-a98a-990b565efe0a/image.gif";
+  };
+
   return (
     <div
       id={id}
       className="flex flex-col w-full h-full px-2 min-w-[320px] max-w-[720px] shadow-md border hover:bg-gray-100 hover:shadow-lg transition duration-300 ease-in-out transform hover:-translate-y-1"
       onClick={onClick}
     >
       <img
-        src="https://velog.velcdn.com/images/k-svelte-master/post/43c86caf-fed8-4ab2-a98a-990b565efe0a/image.gif
-"
+        src={
+          thumbnail ||
+          "https://velog.velcdn.com/images/k-svelte-master/post/43c86caf-fed8-4ab2-a98a-990b565efe0a/image.gif"
+        }
         alt="dummy"
         className="w-full object-cover max-h-60 mb-2"
+        onError={addDefaultThumbnail}
       />
       <div className="text-lg font-black truncate w-full px-1 mb-1">
         {title}

diff --git a/src/components/postdetail/InfoBar.jsx b/src/components/postdetail/InfoBar.jsx
@@ -2,8 +2,6 @@ import React from "react";
 import { Button } from "@mui/material";
 import FavoriteIcon from "@mui/icons-material/Favorite";
 import { useAuth } from "../../hooks/useAuth";
-import { useGetUserInfo } from "../../hooks/useGetUserInfo";
-import { getCookie } from "../../api/cookie";
 import { deleteTIL } from "../../api/detail";
 import { useNavigate } from "react-router-dom";
 

diff --git a/src/pages/MainPage.jsx b/src/pages/MainPage.jsx
@@ -19,6 +19,10 @@ const MainPage = () => {
   };
 
   useEffect(() => {
+    setCookie(
+      "accessToken",
+      "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJyb2xlIjoiTUVNQkVSIiwicHJvZmlsZUltYWdlIjoiaHR0cDovL2sua2FrYW9jZG4ubmV0L2RuL2RmQVd6Zy9idHNKbjdtWWZmby9jN2FncWtvY1lONDVmN3hIQjIxc3ZLL2ltZ182NDB4NjQwLmpwZyIsImVtYWlsIjoieW1qMDcxNjhAbmF2ZXIuY29tIiwic29jaWFsIjoia2FrYW8iLCJuYW1lIjoi7J207Zqo7JuQIiwiaWF0IjoxNzI5ODI0NTk1LCJleHAiOjE3Mjk4NjA1OTV9.aLplzRNPNM18uJIp1Yu9KNK6c8bhY0iOkou9qPP_I_Q"
+    );
     getTIL({ pageNumber: 0 }).then((res) => setPosts(res.data.content));
     getChallenges({ pageSize: 0 }).then((res) =>
       setChallenges(res.data.content)
@@ -37,7 +41,7 @@ const MainPage = () => {
                 id={item.tilId}
                 title={item.title}
                 content={item.content}
-                thumbnail={item.thumbnail}
+                thumbnail={item.thumbnailImage}
                 likeCount={item.likeCount}
                 createdAt={item.createdAt}
                 writerNickname={item.writerNickname}

diff --git a/src/pages/PostDetailPage.jsx b/src/pages/PostDetailPage.jsx
@@ -6,8 +6,6 @@ import Pagination from "@mui/material/Pagination";
 import Chip from "@mui/material/Chip";
 import Footer from "../components/postdetail/Footer";
 import { Tag } from "@mui/icons-material";
-import { setCookie } from "../api/cookie";
-import { getTILDetail } from "../api/main";
 import { useParams } from "react-router-dom";
 import PostComment from "../components/postdetail/PostComment";
 import MDEditor from "@uiw/react-md-editor/nohighlight";
@@ -84,7 +82,7 @@ const PostDetailPage = () => {
         </div>
         <div className="mt-10">
           <MDEditor.Markdown
-            source={postsDetail?.content}
+            source={postsDetail?.til.content}
             style={{ whiteSpace: "pre-wrap" }}
           />
         </div>