From b2cc91673df083177809de53cad033fabddbbad6 Mon Sep 17 00:00:00 2001 From: "Kim, MinGyu" Date: Thu, 18 Aug 2022 11:31:27 +0900 Subject: [PATCH] test --- frontend/src/App.tsx | 28 +++++++++-- frontend/src/auth/profile.tsx | 38 ++++++++------- frontend/src/auth/signup.tsx | 8 ++-- frontend/src/board/board.tsx | 65 ++++++++++---------------- frontend/src/board/index.tsx | 1 + frontend/src/board/posts.tsx | 51 ++++++++++++++++++++ frontend/src/home/header.tsx | 2 +- frontend/src/post/editpost.tsx | 6 +-- frontend/src/post/intopost.tsx | 16 +++---- frontend/src/post/post.tsx | 2 +- frontend/src/post/posting.tsx | 85 +++++++++++++++------------------- 11 files changed, 175 insertions(+), 127 deletions(-) create mode 100644 frontend/src/board/posts.tsx diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index a80fe91..ccdebad 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -4,7 +4,7 @@ import "tailwindcss/tailwind.css"; import { IntoPost } from "./post/intopost"; import { Login, Profile, RequireAuth, Signup, Admin, ImgRewrite } from "./auth"; import { Header, Body } from "./home"; -import { Board } from "./board"; +import { Board, Posts } from "./board"; import Posting from "./post/posting"; import { Layout } from "./commons"; import { EditPost } from "./post/editpost"; @@ -18,7 +18,7 @@ export const App = () => { } /> } /> } /> - @@ -28,7 +28,29 @@ export const App = () => { /> } /> } /> - } /> + } /> */} + + }> + + + + } + /> + + + + } + /> + } /> + } /> + + -
-
+
+
프로필 수정
@@ -102,22 +102,24 @@ export default function Profile() { ) )}
- - -
-
- {"<새로운 이미지를 넣어보세요!>"} +
+ + +
+ {"<새로운 이미지를 넣어보세요!>"} +
+
diff --git a/frontend/src/auth/signup.tsx b/frontend/src/auth/signup.tsx index dd13a26..1b1df94 100644 --- a/frontend/src/auth/signup.tsx +++ b/frontend/src/auth/signup.tsx @@ -75,13 +75,13 @@ export default function Signup() { -
-
-
+
+
+
이름
-
+
(); + const posts = useOutletContext(); const location = useLocation() as Newpost; const newPost = location.state; 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); - }, []); - - // posts - const getDataList = async () => { - const res = await postApi.getData(); - setPosts(res); //posts = res - }; - - const titleHandleClick = async (event: MouseEvent) => { - if (!user.isLoggedIn) { - alert("로그인이 필요합니다."); - navigate("/login", { replace: true }); - } else { - const postId = event.currentTarget.id; - const newpost = posts?.find((element) => { - if (element._id === postId) { - return element; - } - }); - if (!(newpost?._id === undefined)) { - const post = newpost; - const res = await postApi.addCounts(post._id, post.counts); - // console.log(res); - setPosts(res); + const handleClick = async (event: MouseEvent) => { + const postId = event.currentTarget.id; + const newpost = posts?.find((element) => { + if (element._id === postId) { + return element; } + }); + if (!(newpost?._id === undefined)) { + const post = newpost; + const res = await postApi.addCounts(post._id, post.counts); + // console.log(res); + // setPosts(res); } }; @@ -82,7 +64,7 @@ export default function BoardPage() {
@@ -94,11 +76,12 @@ export default function BoardPage() {
{posts?.map((post, i) => ( - + ))}
+
); } diff --git a/frontend/src/board/index.tsx b/frontend/src/board/index.tsx index fbaac8a..602b25a 100644 --- a/frontend/src/board/index.tsx +++ b/frontend/src/board/index.tsx @@ -1 +1,2 @@ export { default as Board } from "./board"; +export { default as Posts } from "./board"; diff --git a/frontend/src/board/posts.tsx b/frontend/src/board/posts.tsx new file mode 100644 index 0000000..dca8a7c --- /dev/null +++ b/frontend/src/board/posts.tsx @@ -0,0 +1,51 @@ +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() { + const [posts, setPosts] = useState([]); + 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 ; +} diff --git a/frontend/src/home/header.tsx b/frontend/src/home/header.tsx index 0a15344..b56fd4c 100644 --- a/frontend/src/home/header.tsx +++ b/frontend/src/home/header.tsx @@ -73,7 +73,7 @@ export default function Header() {
- - - + +
{posts?.title} diff --git a/frontend/src/post/post.tsx b/frontend/src/post/post.tsx index 15691e2..7767d3b 100644 --- a/frontend/src/post/post.tsx +++ b/frontend/src/post/post.tsx @@ -13,7 +13,7 @@ export default function Post({ handleClick, post }: Props) {
diff --git a/frontend/src/post/posting.tsx b/frontend/src/post/posting.tsx index 8a1a89d..11a2d94 100644 --- a/frontend/src/post/posting.tsx +++ b/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("/board", { 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,38 +125,22 @@ export default function Posting() { } } - const titleChange = (event: React.ChangeEvent) => { - const title = event.currentTarget.value; - const newUser = { ...user, title: title }; + const stringChange = (event: React.ChangeEvent) => { + 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) => { - const text = event.currentTarget.value; - const newUser = { ...user, text: text }; + const selectChange = (event: React.ChangeEvent) => { + const { name, value } = event.currentTarget; + const newUser = { ...user, [name]: value }; console.log(event.currentTarget.value); setText(event.currentTarget.value); setUser(newUser); }; - const cityChange = (event: React.ChangeEvent) => { - 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) => { - const theme = event.currentTarget.value; - const newUser = { ...user, theme: theme }; - console.log(event.currentTarget.value); - setTheme(event.currentTarget.value); - setUser(newUser); - }; - const handleInputPic = async (event: React.ChangeEvent) => { const maxImg = 10; const { files } = event.target; @@ -206,7 +195,7 @@ export default function Posting() { @@ -254,7 +243,7 @@ export default function Posting() {