Merge remote-tracking branch 'origin/sb14' into develop

frontend/src/apis/post.api.ts

@@ -33,3 +33,8 @@ export const updating = async (post: PostType) => {
   const { data } = await axios.put(`${baseUrl}/posts/${post._id}`, post);
   return data;
 };
+
+export const postImg = async (formdata: FormData) => {
+  const { data } = await axios.post(`${baseUrl}/posts`, formdata);
+  return data;
+};

frontend/src/post/intopost.tsx

@@ -27,12 +27,12 @@ export function IntoPost() {
           <div className="flex flex-row basis-8 gap-x-1">
             <div className="border-2 border-sky-300 border-current rounded">
               <button id={post._id} onClick={handleDeleteClick}>
-                delete
+                삭제
               </button>
             </div>
             <div className="border-2 border-sky-300 border-current rounded">
               <Link to="/edit" state={post}>
-                <button>update</button>
+                <button>수정</button>
               </Link>
             </div>
           </div>

frontend/src/post/posting.tsx

-import React, { FormEvent, useState } from "react";
+import React, { FormEvent, useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import isLength from "validator/lib/isLength";
 import equals from "validator/lib/equals";
 import { catchErrors } from "../helpers";
 import { PostType } from "../types";
 import { postApi } from "../apis";
+import { File } from "formidable";
 
 export default function Posting() {
-  const [city, setCity] = useState<string>("질문종류");
-  const [theme, setTheme] = useState<string>("질문종류");
+  const [city, setCity] = useState<string>("city");
+  const [theme, setTheme] = useState<string>("theme");
   const [title, setTitle] = useState<string>("");
   const [text, setText] = useState<string>("");
+  const [file, setFile] = useState<File>();
+  const [imgSrc, setImgSrc] = useState<string[]>();
   const navigate = useNavigate();
 
   const [user, setUser] = useState<PostType>({
@@ -29,6 +32,23 @@ export default function Posting() {
   const [disabled, setDisabled] = useState(false);
   const [success, setSuccess] = useState(false);
 
+  useEffect(() => {
+    console.log("uploaded imgs", imgSrc);
+  }, [imgSrc]);
+
+  const imgArr = new Array();
+
+  const sendImg2Db = async (filelist: FileList) => {
+    const formdata = new FormData();
+    if (!(filelist === undefined || filelist === null)) {
+      for (var i = 0; i < filelist.length; i++) {
+        formdata.append(`picture${i}`, filelist?.[i]);
+      }
+      console.log("formdata", formdata);
+      await postApi.postImg(formdata);
+    }
+  };
+
   async function handlePostSubmit(event: FormEvent) {
     event.preventDefault();
 
@@ -37,6 +57,7 @@ export default function Posting() {
       console.log("user data", user);
       if (postingFormMatch()) {
         setLoading(true);
+        // sendImg2Db();
         const res = await postApi.posting(user);
         console.log("서버연결됬나요", res);
         // console.log("user save");
@@ -102,16 +123,41 @@ export default function Posting() {
     setUser(newUser);
   };
 
+  const handleInputPic = async (event: React.ChangeEvent<HTMLInputElement>) => {
+    event.preventDefault();
+
+    const maxImg = 10;
+    const { files } = event.target;
+    if (!(files?.length === undefined)) {
+      if (files?.length <= maxImg) {
+        for (var i = 0; i < files.length; i++) {
+          const reader = new FileReader();
+          reader.readAsDataURL(files?.[i]);
+
+          reader.onload = (e) => {
+            imgArr.push(e.target?.result);
+            setImgSrc(imgArr);
+          };
+        }
+      } else {
+        alert("사진은 최대 10장까지 업로드 가능합니다!");
+      }
+    }
+  };
+
   return (
-    <div className="flex flex-col border-3">
+    <div className="flex flex-col border-3 ">
       <form onSubmit={handlePostSubmit} className="w-full items-center">
         <div className="flex flex-row relative">
           <p className="basis-1/12 gap-x-8">Id</p>
-          <p className="basis-8/12 invisible">empty</p>
+          <p className="basis-6/12 invisible">empty</p>
+          <div className="basis-2/12 border-2 border-sky-300">
+            <input type="file" multiple onChange={handleInputPic} />
+          </div>
           <select
             name="city"
             id="Questions"
-            className="border border-3 border-black w-1/12"
+            className="border-2 border-sky-300 w-1/12"
             onChange={cityChange}
             defaultValue="질문종류"
           >
@@ -130,7 +176,7 @@ export default function Posting() {
           <select
             name="theme"
             id="Questions"
-            className="border border-3 border-black w-1/12"
+            className="border-2 border-sky-300 w-1/12"
             onChange={themeChange}
             defaultValue="질문종류"
           >
@@ -151,26 +197,31 @@ export default function Posting() {
 
           <button
             type="submit"
-            className="border border-black basis-1/12 gap-x-8"
+            className="border-2 border-sky-300 basis-1/12 gap-x-8"
           >
             글쓰기
           </button>
         </div>
 
-        <div className="flex border-4">
+        <div className="flex">
           <textarea
             name="title"
             onChange={titleChange}
             placeholder="title"
-            className="w-full h-8"
+            className="w-full h-8 border-2 border-sky-300"
           ></textarea>
         </div>
-        <div className="flex border-2">
+        <div className="flex flex-col">
+          <div className="flex h-48 overflow-x-scroll">
+            {imgSrc?.map((img, i) => (
+              <img key={i} src={img} width={200} height={200} />
+            ))}
+          </div>
           <textarea
             onChange={textChange}
             name="text"
             placeholder="text"
-            className="w-full h-96"
+            className="w-full h-96 border-2 border-sky-300"
           ></textarea>
         </div>
       </form>