Merge pull request #98 from LikeLionHGU/hwan_#78/자잘한-에러-잡기

Hwan #78/자잘한 에러 잡기

src/components/ImgUpLoad.jsx

@@ -1,15 +1,15 @@
-import { useState, useEffect } from "react";
+import { useState } from "react";
 import ImgNone from "../imgs/img_none.svg";
 import "../styles/ImgUpLoad.css";
 
-export default function ImgUpLoad({ onImageUpload, initialImage }) {
+export default function ImgUpLoad({ onImageUpload }) {
   const [imageSrc, setImageSrc] = useState(`${ImgNone}`);
 
-  useEffect(() => {
-    if (initialImage) {
-      setImageSrc(initialImage);
-    }
-  }, [initialImage]);
+  // useEffect(() => {
+  //   if (initialImage) {
+  //     setImageSrc(initialImage);
+  //   }
+  // }, [initialImage]);
 
   const encodeFileToBase64 = (fileBlob) => {
     const reader = new FileReader();
@@ -19,21 +19,32 @@ export default function ImgUpLoad({ onImageUpload, initialImage }) {
     return new Promise((resolve) => {
       reader.onload = () => {
         setImageSrc(reader.result);
-        resolve(reader.result); // Base64 인코딩된 파일 반환
+        resolve(reader.result);
       };
     });
   };
 
+  // const handleClick = () => {
+  //   if (fileInputRef.current) {
+  //     fileInputRef.current.click();
+  //   }
+  // };
+
+  const handleClick = () => {
+    document.getElementById("fileInput").click();
+  };
   return (
     <main className="img-container">
-      <div className="img-preview">
+      <div className="img-preview" onClick={handleClick}>
         {imageSrc && (
           <img className="img-image" src={imageSrc} alt="preview-img" />
         )}
       </div>
 
       <input
+        id="fileInput"
         type="file"
+        style={{ display: "none" }}
         onChange={(e) => {
           const file = e.target.files[0];
           encodeFileToBase64(file).then(() => {

src/pages/Create.jsx

@@ -21,8 +21,9 @@ export default function Create() {
   const [bigCategory, setBigCategory] = useState("");
   const [category, setcategory] = useState("");
   const [visibility, setVisibility] = useState("공개");
-  const [people, setPeople] = useState(0);
-  const [image, setImage] = useState(`${ImgNone}`);
+  const [people, setPeople] = useState(1);
+  const [image, setImage] = useState();
+  const [imageSrc, setImageSrc] = useState(ImgNone);
 
   const navigate = useNavigate();
 
@@ -43,6 +44,7 @@ export default function Create() {
 
   const handleImageUpload = (file) => {
     setImage(file);
+    setImageSrc(URL.createObjectURL(file));
   };
 
   const storedToken = localStorage.getItem("token");
@@ -55,6 +57,27 @@ export default function Create() {
   const handleSubmit = async (event) => {
     event.preventDefault();
 
+    if (!title) {
+      alert("제목을 입력해 주세요!");
+      return;
+    }
+    console.log(image);
+    if (!category) {
+      alert("카테고리를 선택해 주세요!");
+      return;
+    }
+    if (!description) {
+      alert("책의 한 줄 소개를 입력해 주세요!");
+      return;
+    }
+    if (!description) {
+      alert("책의 한 줄 소개를 입력해 주세요!");
+      return;
+    }
+    if (!information) {
+      alert("책의 줄거리를 입력해 주세요!");
+      return;
+    }
     // category 객체의 값만 추출하여 문자열로 변환
     // const categoriesString = Object.values(category).join(", ");
 
@@ -71,7 +94,14 @@ export default function Create() {
     };
 
     const formData = new FormData();
-    formData.append("file", image);
+    formData.append(
+      "file",
+      image ||
+        new Blob([await fetch(ImgNone).then((res) => res.blob())], {
+          type: "image/svg+xml",
+        })
+    );
+
     formData.append(
       "post",
       new Blob([JSON.stringify(value)], {

src/pages/project/Detail.jsx

@@ -1,6 +1,5 @@
 import Header from "../../components/Header";
 import PeopleSlide from "../../components/PeopleSlide";
-
 import TestImg from "../../imgs/test5.png";
 import LikeImg from "../../imgs/like.svg";
 import WhiteLikeImg from "../../imgs/whiteLike.svg";

src/styles/ImgUpLoad.css

@@ -3,3 +3,7 @@
   max-height: 275px;
   object-fit: "cover";
 }
+
+.img-container {
+  width: 200px;
+}