diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index a80fe919c6d663b8bb65e561fe80a8c44fd7aab8..ccdebadb722a4ae6e2cd2dc706edde94dcf37adc 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 dd13a26c4e5c30916ef2e5a9522f5c51ca6d63a9..1b1df94b75c750881fde683da3a377560717eb51 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 fbaac8ada3de3899d426b395edf7c09a0ece5b85..602b25a015abaaef057ef075acac7fce9c72cc9b 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 0000000000000000000000000000000000000000..dca8a7c93d3d5a7e5d916b0d30b8b09372a3b42e --- /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 0a15344798f938cfd1fe042a3a442e369e189dd1..b56fd4ca4e5ecea545227b584bc2b5537514afb7 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 15691e253e9a7b8fe3ad8b02e75edfb4253fbedd..7767d3ba68a61c2c5bcdf5d395faddf86dfa301e 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 8a1a89d82dfce60a66c6fe56d51658cfbb885746..11a2d94cd419a7ff49451675718a3f5b6d6cd882 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() {