Skip to content

GitLab

Commit b2cc9167 authored by Kim, MinGyu's avatar Kim, MinGyu
Browse files

test

parent 2b496d1c
Show whitespace changes
Inline Side-by-side
frontend/src/App.tsx
View file @ b2cc9167
...@@ -4,7 +4,7 @@ import "tailwindcss/tailwind.css"; ...@@ -4,7 +4,7 @@ import "tailwindcss/tailwind.css";
import { IntoPost } from "./post/intopost"; import { IntoPost } from "./post/intopost";
import { Login, Profile, RequireAuth, Signup, Admin, ImgRewrite } from "./auth"; import { Login, Profile, RequireAuth, Signup, Admin, ImgRewrite } from "./auth";
import { Header, Body } from "./home"; import { Header, Body } from "./home";
import { Board } from "./board"; import { Board, Posts } from "./board";
import Posting from "./post/posting"; import Posting from "./post/posting";
import { Layout } from "./commons"; import { Layout } from "./commons";
import { EditPost } from "./post/editpost"; import { EditPost } from "./post/editpost";
...@@ -18,7 +18,7 @@ export const App = () => { ...@@ -18,7 +18,7 @@ export const App = () => {
<Route path="login" element={<Login />} /> <Route path="login" element={<Login />} />
<Route path="signup" element={<Signup />} /> <Route path="signup" element={<Signup />} />
<Route index element={<Body />} /> <Route index element={<Body />} />
<Route {/* <Route
path="posting" path="posting"
element={ element={
<RequireAuth> <RequireAuth>
...@@ -28,7 +28,29 @@ export const App = () => { ...@@ -28,7 +28,29 @@ export const App = () => {
/> />
<Route path="board" element={<Board />} /> <Route path="board" element={<Board />} />
<Route path="post/:postId" element={<IntoPost />} /> <Route path="post/:postId" element={<IntoPost />} />
<Route path="edit" element={<EditPost />} /> <Route path="edit" element={<EditPost />} /> */}
<Route path="posts" element={<Posts />}>
<Route
path="posting"
element={
<RequireAuth>
<Posting />
</RequireAuth>
}
/>
<Route
path=":postId"
element={
<RequireAuth>
<IntoPost />
</RequireAuth>
}
/>
<Route path=":postId/edit" element={<EditPost />} />
<Route index element={<Board />} />
</Route>
<Route <Route
path="profile" path="profile"
element={ element={
......
frontend/src/auth/profile.tsx
View file @ b2cc9167
...@@ -69,8 +69,8 @@ export default function Profile() { ...@@ -69,8 +69,8 @@ export default function Profile() {
return ( return (
<div> <div>
<div className="grid bg-white rounded shadow-lg mb-5"> <div className="mx-6 grid bg-white rounded shadow-lg mb-5">
<form className="mx-24 " onSubmit={handleSubmit}> <form className=" md:mx-24 " onSubmit={handleSubmit}>
<div className=" mt-7 text-2xl">프로필 수정</div> <div className=" mt-7 text-2xl">프로필 수정</div>
<div className=" mt-10 border-0 border-y-2 border-gray-400"> <div className=" mt-10 border-0 border-y-2 border-gray-400">
<div className="flex h-20"> <div className="flex h-20">
...@@ -102,6 +102,7 @@ export default function Profile() { ...@@ -102,6 +102,7 @@ export default function Profile() {
) )
)} )}
</div> </div>
<div className="flex">
<input <input
type="file" type="file"
name="avatar" name="avatar"
...@@ -115,12 +116,13 @@ export default function Profile() { ...@@ -115,12 +116,13 @@ export default function Profile() {
> >
이미지 선택 이미지 선택
</label> </label>
</div> <div className=" flex place-self-center text-gray-400 text-sm whitespace-nowrap">
<div className="pl-10 flex place-self-center text-gray-400 text-sm whitespace-nowrap">
{"<새로운 이미지를 넣어보세요!>"} {"<새로운 이미지를 넣어보세요!>"}
</div> </div>
</div> </div>
</div> </div>
</div>
</div>
<div className="flex border-0 border-t-2 h-20"> <div className="flex border-0 border-t-2 h-20">
<div className="w-24 border-0 border-r-2 bg-gray-100 grid place-items-center whitespace-nowrap"> <div className="w-24 border-0 border-r-2 bg-gray-100 grid place-items-center whitespace-nowrap">
이름 이름
......
frontend/src/auth/signup.tsx
View file @ b2cc9167
...@@ -75,13 +75,13 @@ export default function Signup() { ...@@ -75,13 +75,13 @@ export default function Signup() {
</div> </div>
<form onSubmit={handleSubmit} className="flex flex-col mt-16 gap-y-4"> <form onSubmit={handleSubmit} className="flex flex-col mt-16 gap-y-4">
<div className="flex flex-col px-32 pb-5"> <div className="flex flex-col px-8 sm:px-32 pb-5">
<div className="border-0 border-y-2 border-black"> <div className="border-0 border-y-2 border-black ">
<div className="h-16 flex"> <div className="h-16 flex ">
<div className="whitespace-nowrap grid place-items-center w-32 lg:basis-1/5 shrink-0 border-0 border-r-2"> <div className="whitespace-nowrap grid place-items-center w-32 lg:basis-1/5 shrink-0 border-0 border-r-2">
이름 이름
</div> </div>
<div className="flex items-center mx-5"> <div className="flex items-center mx-5 ">
<input <input
className="h-10 w-4/5 lg:w-60 border-2 focus:border-black" className="h-10 w-4/5 lg:w-60 border-2 focus:border-black"
type="text" type="text"
......
frontend/src/board/board.tsx
View file @ b2cc9167
import React, { useState, MouseEvent, useEffect } from "react"; 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 { PostType } from "../types";
import Post from "../post/post"; import Post from "../post/post";
import { postApi } from "../apis"; import { postApi } from "../apis";
import { useAuth } from "../auth/auth.context"; import { useAuth } from "../auth/auth.context";
interface Posts { interface Props {
posts: PostType[]; posts: PostType[];
} }
...@@ -14,37 +21,13 @@ interface Newpost { ...@@ -14,37 +21,13 @@ interface Newpost {
} }
export default function BoardPage() { export default function BoardPage() {
const [posts, setPosts] = useState<PostType[]>(); const posts = useOutletContext<PostType[]>();
const location = useLocation() as Newpost; const location = useLocation() as Newpost;
const newPost = location.state; const newPost = location.state;
const navigate = useNavigate(); const navigate = useNavigate();
const { user } = useAuth(); const { user } = useAuth();
// console.log("get newPost Info", newPost); const handleClick = async (event: MouseEvent<HTMLButtonElement>) => {
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<HTMLButtonElement>) => {
if (!user.isLoggedIn) {
alert("로그인이 필요합니다.");
navigate("/login", { replace: true });
} else {
const postId = event.currentTarget.id; const postId = event.currentTarget.id;
const newpost = posts?.find((element) => { const newpost = posts?.find((element) => {
if (element._id === postId) { if (element._id === postId) {
...@@ -55,8 +38,7 @@ export default function BoardPage() { ...@@ -55,8 +38,7 @@ export default function BoardPage() {
const post = newpost; const post = newpost;
const res = await postApi.addCounts(post._id, post.counts); const res = await postApi.addCounts(post._id, post.counts);
// console.log(res); // console.log(res);
setPosts(res); // setPosts(res);
}
} }
}; };
...@@ -82,7 +64,7 @@ export default function BoardPage() { ...@@ -82,7 +64,7 @@ export default function BoardPage() {
<div className="flex justify-end"> <div className="flex justify-end">
<div className="border-2 border-blue-500 rounded mb-2 whitespace-nowrap"> <div className="border-2 border-blue-500 rounded mb-2 whitespace-nowrap">
<button onClick={GoLogin}> <button onClick={GoLogin}>
<Link to="/posting">글쓰기</Link> <Link to="posting">글쓰기</Link>
</button> </button>
</div> </div>
</div> </div>
...@@ -94,11 +76,12 @@ export default function BoardPage() { ...@@ -94,11 +76,12 @@ export default function BoardPage() {
</div> </div>
<div className="whitespace-nowrap"> <div className="whitespace-nowrap">
{posts?.map((post, i) => ( {posts?.map((post, i) => (
<Post key={i} post={post} handleClick={titleHandleClick} /> <Post key={i} post={post} handleClick={handleClick} />
))} ))}
</div> </div>
</div> </div>
</div> </div>
<Outlet />
</div> </div>
); );
} }
frontend/src/board/index.tsx
View file @ b2cc9167
export { default as Board } from "./board"; export { default as Board } from "./board";
export { default as Posts } from "./board";
frontend/src/board/posts.tsx 0 → 100644
View file @ b2cc9167
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<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
View file @ b2cc9167
...@@ -73,7 +73,7 @@ export default function Header() { ...@@ -73,7 +73,7 @@ export default function Header() {
<div></div> <div></div>
<button className="shrink-0 mr-3 text-xs "> <button className="shrink-0 mr-3 text-xs ">
<Link <Link
to="/board" to="/posts"
className="hover:text-sky-300 focus:text-purple-500 mx-2 grid items-center" className="hover:text-sky-300 focus:text-purple-500 mx-2 grid items-center"
> >
게시판 게시판
......
frontend/src/post/editpost.tsx
View file @ b2cc9167
...@@ -54,9 +54,9 @@ export function EditPost() { ...@@ -54,9 +54,9 @@ export function EditPost() {
for (var i = 0; i < filelist.length; i++) { for (var i = 0; i < filelist.length; i++) {
formdata.append("picture", filelist?.[i]); formdata.append("picture", filelist?.[i]);
} }
console.log("one file update before"); // console.log("one file update before");
const res = await postApi.updateImgAndPost(user._id, formdata); const res = await postApi.updateImgAndPost(user._id, formdata);
console.log("one file update", res); // console.log("one file update", res);
return res; return res;
} }
}; };
...@@ -72,7 +72,7 @@ export function EditPost() { ...@@ -72,7 +72,7 @@ export function EditPost() {
const updateRes = await updateImg2Db(file); const updateRes = await updateImg2Db(file);
// console.log("find newfilename", updateRes); // console.log("find newfilename", updateRes);
navigate( navigate(
{ pathname: `/post/${post._id}` }, { pathname: `/posts/${post._id}` },
{ replace: true, state: updateRes } { replace: true, state: updateRes }
); );
......
frontend/src/post/intopost.tsx
View file @ b2cc9167
...@@ -28,10 +28,10 @@ export function IntoPost() { ...@@ -28,10 +28,10 @@ export function IntoPost() {
const handleDeleteClick = async (event: MouseEvent<HTMLButtonElement>) => { const handleDeleteClick = async (event: MouseEvent<HTMLButtonElement>) => {
try { try {
if (confirm("삭제하시겠습니까?") == true) { if (confirm("삭제하시겠습니까?") == true) {
const postId = event.currentTarget.id; // const postId = event.currentTarget.id;
const res = await postApi.deletePost(postId); // const res = await postApi.deletePost(postId);
navigate("/board"); navigate("/posts");
console.log("delete post", res); // console.log("delete post", res);
} else { } else {
return false; return false;
} }
...@@ -54,11 +54,11 @@ export function IntoPost() { ...@@ -54,11 +54,11 @@ export function IntoPost() {
> >
삭제 삭제
</button> </button>
<Link to="/edit" state={posts}>
<button className="whitespace-nowrap flex border-2 border-sky-100 place-self-center h-6 w-8 text-xs transition delay-150 bg-white-400 hover:-translate-y-1 hover:bg-sky-300 duration-300"> <button className="whitespace-nowrap flex border-2 border-sky-100 place-self-center h-6 w-8 text-xs transition delay-150 bg-white-400 hover:-translate-y-1 hover:bg-sky-300 duration-300">
<Link to="edit" state={posts}>
수정 수정
</button>
</Link> </Link>
</button>
</div> </div>
<div className="flex h-10 border-t-2 border-sky-500 items-center text-2xl font-medium md:text-2xl"> <div className="flex h-10 border-t-2 border-sky-500 items-center text-2xl font-medium md:text-2xl">
{posts?.title} {posts?.title}
......
frontend/src/post/post.tsx
View file @ b2cc9167
...@@ -13,7 +13,7 @@ export default function Post({ handleClick, post }: Props) { ...@@ -13,7 +13,7 @@ export default function Post({ handleClick, post }: Props) {
<div className="flex flex-row h-16 divide-x-2 border-2 border-solid"> <div className="flex flex-row h-16 divide-x-2 border-2 border-solid">
<div className="basis-full"> <div className="basis-full">
<button id={post._id} onClick={handleClick}> <button id={post._id} onClick={handleClick}>
<Link to={`/post/${post._id}`} state={post}> <Link to={`${post._id}`} state={post}>
{post.title} {post.title}
</Link> </Link>
</button> </button>
......
frontend/src/post/posting.tsx
View file @ b2cc9167
...@@ -45,29 +45,29 @@ export default function Posting() { ...@@ -45,29 +45,29 @@ export default function Posting() {
const imgArr = new Array(); const imgArr = new Array();
const sendImg2Db = async (filelist: FileList) => { // const sendImg2Db = async (filelist: FileList) => {
const formdata = new FormData(); // const formdata = new FormData();
formdata.append("title", user.title); // formdata.append("title", user.title);
formdata.append("text", user.text); // formdata.append("text", user.text);
formdata.append("theme", user.theme); // formdata.append("theme", user.theme);
formdata.append("city", user.city); // formdata.append("city", user.city);
if (!(filelist === undefined || filelist === null)) { // if (!(filelist === undefined || filelist === null)) {
if (filelist.length === 1) { // if (filelist.length === 1) {
formdata.append("picture", filelist?.[0]); // formdata.append("picture", filelist?.[0]);
const res = await postApi.createFileAndPost(formdata); // const res = await postApi.createFileAndPost(formdata);
return res; // return res;
} else { // } else {
for (var i = 0; i < filelist.length; i++) { // for (var i = 0; i < filelist.length; i++) {
formdata.append("picture", filelist?.[i]); // formdata.append("picture", filelist?.[i]);
} // }
const res = await postApi.createFileAndPost(formdata); // const res = await postApi.createFileAndPost(formdata);
return res; // return res;
} // }
} // }
}; // };
async function handlePostSubmit(event: FormEvent) { async function handlePostSubmit(event: FormEvent) {
event.preventDefault(); event.preventDefault();
...@@ -77,8 +77,13 @@ export default function Posting() { ...@@ -77,8 +77,13 @@ export default function Posting() {
if (postingFormMatch(user, file)) { if (postingFormMatch(user, file)) {
setLoading(true); setLoading(true);
if (file) { if (file) {
const postRes = await sendImg2Db(file); const formdata = new FormData();
navigate("/board", { replace: true, state: postRes }); 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); setSuccess(true);
setError(""); setError("");
...@@ -120,38 +125,22 @@ export default function Posting() { ...@@ -120,38 +125,22 @@ export default function Posting() {
} }
} }
const titleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => { const stringChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
const title = event.currentTarget.value; const { name, value } = event.currentTarget;
const newUser = { ...user, title: title }; const newUser = { ...user, [name]: value };
console.log(event.currentTarget.value); console.log(event.currentTarget.value);
setTitle(event.currentTarget.value); setTitle(event.currentTarget.value);
setUser(newUser); setUser(newUser);
}; };
const textChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => { const selectChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
const text = event.currentTarget.value; const { name, value } = event.currentTarget;
const newUser = { ...user, text: text }; const newUser = { ...user, [name]: value };
console.log(event.currentTarget.value); console.log(event.currentTarget.value);
setText(event.currentTarget.value); setText(event.currentTarget.value);
setUser(newUser); 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 };
console.log(event.currentTarget.value);
setTheme(event.currentTarget.value);
setUser(newUser);
};
const handleInputPic = async (event: React.ChangeEvent<HTMLInputElement>) => { const handleInputPic = async (event: React.ChangeEvent<HTMLInputElement>) => {
const maxImg = 10; const maxImg = 10;
const { files } = event.target; const { files } = event.target;
...@@ -206,7 +195,7 @@ export default function Posting() { ...@@ -206,7 +195,7 @@ export default function Posting() {
<select <select
name="city" name="city"
className="border-2 border-sky-400 text-xs h-6 place-self-center" className="border-2 border-sky-400 text-xs h-6 place-self-center"
onChange={cityChange} onChange={selectChange}
defaultValue="city" defaultValue="city"
> >
<option value="city">도시</option> <option value="city">도시</option>
...@@ -225,7 +214,7 @@ export default function Posting() { ...@@ -225,7 +214,7 @@ export default function Posting() {
<select <select
name="theme" name="theme"
className="border-2 border-sky-400 text-xs h-6 place-self-center" className="border-2 border-sky-400 text-xs h-6 place-self-center"
onChange={themeChange} onChange={selectChange}
defaultValue="theme" defaultValue="theme"
> >
<option value="theme">테마</option> <option value="theme">테마</option>
...@@ -254,7 +243,7 @@ export default function Posting() { ...@@ -254,7 +243,7 @@ export default function Posting() {
<div className="flex flex-col w-full border-y-2 border-sky-500"> <div className="flex flex-col w-full border-y-2 border-sky-500">
<textarea <textarea
name="title" name="title"
onChange={titleChange} onChange={stringChange}
placeholder="제목을 입력해 주세요!" placeholder="제목을 입력해 주세요!"
className="flex focus:outline-none" className="flex focus:outline-none"
/> />
...@@ -266,7 +255,7 @@ export default function Posting() { ...@@ -266,7 +255,7 @@ export default function Posting() {
</div> </div>
</div> </div>
<textarea <textarea
onChange={textChange} onChange={stringChange}
name="text" name="text"
placeholder="여행 후기를 알려주세요!" placeholder="여행 후기를 알려주세요!"
className="flex h-44 border-t-2 border-sky-200 focus:outline-none " className="flex h-44 border-t-2 border-sky-200 focus:outline-none "
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment