chore: 이미지 업로드 api 구현하다가 포기

codeit-bootcamp-frontend · Aug 15, 2024 · a89f1ac · a89f1ac
1 parent 700c063
commit a89f1ac
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 13 deletions.
diff --git a/pages/addboard.tsx b/pages/addboard.tsx
@@ -1,7 +1,7 @@
 import Image from "next/image"
 import { useRouter } from "next/router"
 import { ChangeEvent, MouseEvent, useEffect, useState } from "react"
-import { postArticle } from "@/pages/api/apis"
+import { postArticle, uploadImage } from "@/pages/api/apis"
 import ArticlePost from "@/DTO/articlePost"
 import styles from "@/styles/Addboard.module.css"
 
@@ -13,7 +13,8 @@ const INITIAL_FORM_DATA: ArticlePost = {
 
 export default function Addboard() {
   const [formData, setFormData] = useState(INITIAL_FORM_DATA);
-  const [imageInputValue, setImageInputValue] = useState('');
+  const [imageFile, setImageFile] = useState<File | null>(null);
+  const [imagePreview, setImagePreview] = useState('');
 
   const router = useRouter();
 
@@ -26,26 +27,37 @@ export default function Addboard() {
     }))
   }
 
-  const handleTextChange = (e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+  const handleInputChange = (e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
     handleChange(e.target.name, e.target.value);
   }
 
   const handleImageChange = (e: ChangeEvent<HTMLInputElement>) => {
-    setImageInputValue(e.target.value);
+    handleChange("image", e.target.value);
     if(e.target.files) {
+      setImageFile(e.target.files[0]);
       const imgURL = URL.createObjectURL(e.target.files[0]);
-      handleChange("image", imgURL);
+      setImagePreview(imgURL);
     }
   }
 
-  const handleCancelPreview = (e: MouseEvent) => {
-    setImageInputValue('');
+  const handleCancelPreview = () => {
     handleChange("image", '');
+    setImageFile(null);
+    setImagePreview('');
   }
 
   const handleSubmit = async () => {
     const accessToken = localStorage.getItem("access_token") ?? '';
-    const result = await postArticle(formData, accessToken);
+    let submitForm = formData;
+    if(imageFile) {
+      const imgUploadRes = await uploadImage(imageFile, accessToken);
+      const imgUrl = imgUploadRes.url;
+      submitForm = {
+        ...submitForm,
+        image: imgUrl
+      };
+    }
+    const result = await postArticle(submitForm, accessToken);
     if(!result) {
       alert("게시글 등록 실패");
       return;
@@ -73,27 +85,27 @@ export default function Addboard() {
       <form className={styles.addboardForm}>
         <label className={styles.addboardFormLabel}>
           <h2 className={styles.addboardFormLabelText}>*제목</h2>
-          <input name="title" value={formData.title} className={styles.addboardFormInput} placeholder="제목을 입력해주세요" onChange={handleTextChange} />
+          <input name="title" value={formData.title} className={styles.addboardFormInput} placeholder="제목을 입력해주세요" onChange={handleInputChange} />
         </label>
         <label className={styles.addboardFormLabel}>
           <h2 className={styles.addboardFormLabelText}>*내용</h2>
-          <textarea name="content" value={formData.content} className={styles.addboardFormTextarea} placeholder="내용을 입력해주세요" onChange={handleTextChange} />
+          <textarea name="content" value={formData.content} className={styles.addboardFormTextarea} placeholder="내용을 입력해주세요" onChange={handleInputChange} />
         </label>
         <div className={styles.addboardFormLabel}>
           <h2 className={styles.addboardFormLabelText}>이미지</h2>
           <div className={styles.addboardFormImagesContainer}>
             <label>
-              <input type="file" name="image" value={imageInputValue} className={styles.addboardFormFileInput} onChange={handleImageChange} />
+              <input type="file" name="image" value={formData.image} className={styles.addboardFormFileInput} onChange={handleImageChange} />
               <div className={styles.addboardFormFileInputPlaceholder}>
                 <div className={styles.plusIconContainer}>
                   <Image fill src="/images/ic_plus.svg" alt="추가" />
                 </div>
                 <span>이미지 등록</span>
               </div>
             </label>
-            {formData.image &&
+            {imagePreview &&
               <div className={styles.addboardFormImagePreviewContainer}>
-                <Image fill src={formData.image} style={{objectFit: "contain"}} alt="이미지 미리보기" />
+                <Image fill src={imagePreview} style={{objectFit: "contain"}} alt="이미지 미리보기" />
                 <div className={styles.cancelPreviewIconContainer} onClick={handleCancelPreview}>
                   <Image fill src="/images/ic_X.svg" alt="없애기" />
                 </div>

diff --git a/pages/api/apis.ts b/pages/api/apis.ts
@@ -80,5 +80,20 @@ export async function postArticleComment(articleId: string, commentForm: { conte
   if(!response.ok) throw new Error(`postArticleComment api 실행중 오류 발생: ${response.status}`);
   const result = await response.json();
 
+  return result;
+}
+
+export async function uploadImage(image: File, accessToken: string) {
+  const response = await fetch(`${BASE_URL}/images/upload`, {
+    method: "POST",
+    headers: {
+      "Authorization": `Bearer ${accessToken}`,
+      "Content-Type": "multipart/form-data"
+    },
+    body: image
+  });
+  if(!response.ok) throw new Error(`uploadImage api 실행중 오류 발생: ${response.status}`);
+  const result = await response.json();
+
   return result;
 }
diff --git a/pages/boards/[id].tsx b/pages/boards/[id].tsx
@@ -78,6 +78,7 @@ export default function Article({ id, article, comments: initialComments, nextCu
       alert("댓글 등록 실패");
       return;
     }
+    setCommentForm({ content: '' });
     setComments(prev => [result, ...prev]);
   }
-Original file line number
+Diff line change
@@ Expand Up @@
           alert("댓글 등록 실패");
           return;
         }
+        setCommentForm({ content: '' });
         setComments(prev => [result, ...prev]);
       }
@@ Expand Down @@