0816

frontend/src/board/board.tsx

 import React, { useState, MouseEvent, useEffect } from "react";
-import { Link, useLocation, useNavigate } from "react-router-dom";
+import {
+  Link,
+  Outlet,
+  useLocation,
+  useNavigate,
+  useOutletContext,
+} from "react-router-dom";
 import { PostType } from "../types";
 import Post from "../post/post";
 import { postApi } from "../apis";
 import { useAuth } from "../auth/auth.context";
 
-interface Posts {
+interface Props {
   posts: PostType[];
 }
 
@@ -14,36 +20,13 @@ interface Newpost {
 }
 
 export default function BoardPage() {
-  const [posts, setPosts] = useState<PostType[]>();
+  const posts = useOutletContext<PostType[]>();
   const location = useLocation() as Newpost;
   const newPost = location.state;
-  const deletePostId = location.state._id;
   const navigate = useNavigate();
   const { user } = useAuth();
 
-  // console.log("get newPost Info", newPost);
-
-  const setNewPosts = (newpost: PostType) => {
-    const postArr = posts?.splice(-1, 0, newPost);
-    if (!(postArr === undefined)) {
-      setPosts(postArr);
-    }
-  };
-
-  useEffect(() => {
-    getDataList();
-    setNewPosts(newPost);
-  }, []);
-
-  const getDataList = async () => {
-    const res = await postApi.getData();
-    setPosts(res); //posts = res
-  };
-
-  const deletePost = async (postId: string) => {
-    const res = await postApi.deletePost(postId);
-    return res;
-  };
+  console.log("posts", posts);
 
   const handleClick = async (event: MouseEvent<HTMLButtonElement>) => {
     const postId = event.currentTarget.id;
@@ -55,8 +38,6 @@ export default function BoardPage() {
     if (!(newpost?._id === undefined)) {
       const post = newpost;
       const res = await postApi.addCounts(post._id, post.counts);
-      // console.log(res);
-      // setPosts(res);
     }
   };
 
@@ -82,7 +63,7 @@ export default function BoardPage() {
         <div className="flex justify-end">
           <div className="border-2 border-blue-500 rounded mb-2 whitespace-nowrap">
             <button onClick={GoLogin}>
-              <Link to="/posting">글쓰기</Link>
+              <Link to="posting">글쓰기</Link>
             </button>
           </div>
         </div>
@@ -99,6 +80,8 @@ export default function BoardPage() {
           </div>
         </div>
       </div>
+
+      <Outlet />
     </div>
   );
 }

frontend/src/board/posts.tsx

-import React, { ReactNode } from "react";
-import { Outlet } from "react-router-dom";
+import React, { ReactNode, useState, useEffect } from "react";
+import { Outlet, useLocation } from "react-router-dom";
+import { postApi } from "../apis";
+import { PostType } from "../types";
+
+interface FormType {
+  state: FormData;
+}
 
 export default function Posts() {
-  return <Outlet />;
+  const [posts, setPosts] = useState<PostType[]>([]);
+  const location = useLocation() as FormType;
+  const formdata = location.state;
+
+  useEffect(() => {
+    getDataList();
+  }, []);
+
+  //Read
+  const getDataList = async () => {
+    const res = await postApi.getData();
+    setPosts(res);
+  };
+
+  //Create
+  const createPost = async (filelist: FileList) => {
+    if (!(filelist === undefined || filelist === null)) {
+      if (filelist.length === 1) {
+        formdata.append("picture", filelist?.[0]);
+
+        const res = await postApi.createFileAndPost(formdata);
+
+        return res;
+      } else {
+        for (var i = 0; i < filelist.length; i++) {
+          formdata.append("picture", filelist?.[i]);
+        }
+        const res = await postApi.createFileAndPost(formdata);
+
+        return res;
+      }
+    }
+  };
+  //Delete
+  const deletePost = async (postId: string) => {
+    const res = await postApi.deletePost(postId);
+    return res;
+  };
+  console.log("sdfa", posts);
+  return <Outlet context={{ posts, createPost, deletePost }} />;
 }

frontend/src/home/header.tsx

@@ -73,7 +73,7 @@ export default function Header() {
             <div></div>
             <button className="shrink-0 mr-3 text-xs ">
               <Link
-                to="/board"
+                to="/posts"
                 className="hover:text-sky-300 focus:text-purple-500 mx-2 grid items-center"
               >
                 게시판

frontend/src/post/intopost.tsx

@@ -30,9 +30,9 @@ export function IntoPost() {
     try {
       if (confirm("삭제하시겠습니까?") == true) {
         const postId = event.currentTarget.id;
-        const res = await postApi.deletePost(postId);
-        navigate("/board");
-        console.log("delete post", res);
+        // const res = await postApi.deletePost(postId);
+        navigate("/posts");
+        // console.log("delete post", res);
       } else {
         return false;
       }

frontend/src/post/posting.tsx

@@ -45,29 +45,29 @@ export default function Posting() {
 
   const imgArr = new Array();
 
-  const sendImg2Db = async (filelist: FileList) => {
-    const formdata = new FormData();
-    formdata.append("title", user.title);
-    formdata.append("text", user.text);
-    formdata.append("theme", user.theme);
-    formdata.append("city", user.city);
-    if (!(filelist === undefined || filelist === null)) {
-      if (filelist.length === 1) {
-        formdata.append("picture", filelist?.[0]);
+  // const sendImg2Db = async (filelist: FileList) => {
+  //   const formdata = new FormData();
+  //   formdata.append("title", user.title);
+  //   formdata.append("text", user.text);
+  //   formdata.append("theme", user.theme);
+  //   formdata.append("city", user.city);
+  //   if (!(filelist === undefined || filelist === null)) {
+  //     if (filelist.length === 1) {
+  //       formdata.append("picture", filelist?.[0]);
 
-        const res = await postApi.createFileAndPost(formdata);
+  //       const res = await postApi.createFileAndPost(formdata);
 
-        return res;
-      } else {
-        for (var i = 0; i < filelist.length; i++) {
-          formdata.append("picture", filelist?.[i]);
-        }
-        const res = await postApi.createFileAndPost(formdata);
+  //       return res;
+  //     } else {
+  //       for (var i = 0; i < filelist.length; i++) {
+  //         formdata.append("picture", filelist?.[i]);
+  //       }
+  //       const res = await postApi.createFileAndPost(formdata);
 
-        return res;
-      }
-    }
-  };
+  //       return res;
+  //     }
+  //   }
+  // };
 
   async function handlePostSubmit(event: FormEvent) {
     event.preventDefault();
@@ -77,8 +77,13 @@ export default function Posting() {
         if (postingFormMatch(user, file)) {
           setLoading(true);
           if (file) {
-            const postRes = await sendImg2Db(file);
-            navigate("/posts", { replace: true, state: postRes });
+            const formdata = new FormData();
+            formdata.append("title", user.title);
+            formdata.append("text", user.text);
+            formdata.append("theme", user.theme);
+            formdata.append("city", user.city);
+            // const postRes = await createPost(file, formdata);
+            navigate("/posts", { replace: true, state: formdata });
           }
           setSuccess(true);
           setError("");
@@ -120,33 +125,17 @@ export default function Posting() {
     }
   }
 
-  const titleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
-    const title = event.currentTarget.value;
-    const newUser = { ...user, title: title };
+  const stringChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
+    const { name, value } = event.currentTarget;
+    const newUser = { ...user, [name]: value };
     console.log(event.currentTarget.value);
     setTitle(event.currentTarget.value);
     setUser(newUser);
   };
 
-  const textChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
-    const text = event.currentTarget.value;
-    const newUser = { ...user, text: text };
-    console.log(event.currentTarget.value);
-    setText(event.currentTarget.value);
-    setUser(newUser);
-  };
-
-  const cityChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
-    const city = event.currentTarget.value;
-    const newUser = { ...user, city: city };
-    console.log(event.currentTarget.value);
-    setCity(event.currentTarget.value);
-    setUser(newUser);
-  };
-
-  const themeChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
-    const theme = event.currentTarget.value;
-    const newUser = { ...user, theme: theme };
+  const selectChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
+    const { name, value } = event.currentTarget;
+    const newUser = { ...user, [name]: value };
     console.log(event.currentTarget.value);
     setTheme(event.currentTarget.value);
     setUser(newUser);
@@ -206,7 +195,7 @@ export default function Posting() {
           <select
             name="city"
             className="border-2 border-sky-400 text-xs h-6 place-self-center"
-            onChange={cityChange}
+            onChange={selectChange}
             defaultValue="city"
           >
             <option value="city">도시</option>
@@ -225,7 +214,7 @@ export default function Posting() {
           <select
             name="theme"
             className="border-2 border-sky-400  text-xs h-6 place-self-center"
-            onChange={themeChange}
+            onChange={selectChange}
             defaultValue="theme"
           >
             <option value="theme">테마</option>
@@ -254,7 +243,7 @@ export default function Posting() {
         <div className="flex flex-col w-full border-y-2 border-sky-500">
           <textarea
             name="title"
-            onChange={titleChange}
+            onChange={stringChange}
             placeholder="제목을 입력해 주세요!"
             className="flex focus:outline-none"
           />
@@ -266,7 +255,7 @@ export default function Posting() {
             </div>
           </div>
           <textarea
-            onChange={textChange}
+            onChange={stringChange}
             name="text"
             placeholder="여행 후기를 알려주세요!"
             className="flex h-44 border-t-2 border-sky-200 focus:outline-none "