Skip to content

GitLab

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

test

parent 2b496d1c
Hide whitespace changes
Inline Side-by-side
frontend/src/App.tsx
View file @ b2cc9167
......@@ -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 = () => {
<Route path="login" element={<Login />} />
<Route path="signup" element={<Signup />} />
<Route index element={<Body />} />
<Route
{/* <Route
path="posting"
element={
<RequireAuth>
......@@ -28,7 +28,29 @@ export const App = () => {
/>
<Route path="board" element={<Board />} />
<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
path="profile"
element={
......
frontend/src/auth/profile.tsx
View file @ b2cc9167
......@@ -69,8 +69,8 @@ export default function Profile() {
return (
<div>
<div className="grid bg-white rounded shadow-lg mb-5">
<form className="mx-24 " onSubmit={handleSubmit}>
<div className="mx-6 grid bg-white rounded shadow-lg mb-5">
<form className=" md:mx-24 " onSubmit={handleSubmit}>
<div className=" mt-7 text-2xl">프로필 수정</div>
<div className=" mt-10 border-0 border-y-2 border-gray-400">
<div className="flex h-20">
......@@ -102,22 +102,24 @@ export default function Profile() {
)
)}
</div>
<input
type="file"
name="avatar"
id="avatar"
className="hidden"
onChange={handleChange}
></input>
<label
htmlFor="avatar"
className="border-2 m-5 whitespace-nowrap "
>
이미지 선택
</label>
</div>
<div className="pl-10 flex place-self-center text-gray-400 text-sm whitespace-nowrap">
{"<새로운 이미지를 넣어보세요!>"}
<div className="flex">
<input
type="file"
name="avatar"
id="avatar"
className="hidden"
onChange={handleChange}
></input>
<label
htmlFor="avatar"
className="border-2 m-5 whitespace-nowrap "
>
이미지 선택
</label>
<div className=" flex place-self-center text-gray-400 text-sm whitespace-nowrap">
{"<새로운 이미지를 넣어보세요!>"}
</div>
</div>
</div>
</div>
</div>
......
frontend/src/auth/signup.tsx
View file @ b2cc9167
......@@ -75,13 +75,13 @@ export default function Signup() {
</div>
<form onSubmit={handleSubmit} className="flex flex-col mt-16 gap-y-4">
<div className="flex flex-col px-32 pb-5">
<div className="border-0 border-y-2 border-black">
<div className="h-16 flex">
<div className="flex flex-col px-8 sm:px-32 pb-5">
<div className="border-0 border-y-2 border-black ">
<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>
<div className="flex items-center mx-5">
<div className="flex items-center mx-5 ">
<input
className="h-10 w-4/5 lg:w-60 border-2 focus:border-black"
type="text"
......
frontend/src/board/board.tsx
View file @ b2cc9167
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,49 +21,24 @@ 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 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<HTMLButtonElement>) => {
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<HTMLButtonElement>) => {
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() {
<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>
......@@ -94,11 +76,12 @@ export default function BoardPage() {
</div>
<div className="whitespace-nowrap">
{posts?.map((post, i) => (
<Post key={i} post={post} handleClick={titleHandleClick} />
<Post key={i} post={post} handleClick={handleClick} />
))}
</div>
</div>
</div>
<Outlet />
</div>
);
}
frontend/src/board/index.tsx
View file @ b2cc9167
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() {
<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/editpost.tsx
View file @ b2cc9167
......@@ -54,9 +54,9 @@ export function EditPost() {
for (var i = 0; i < filelist.length; 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);
console.log("one file update", res);
// console.log("one file update", res);
return res;
}
};
......@@ -72,7 +72,7 @@ export function EditPost() {
const updateRes = await updateImg2Db(file);
// console.log("find newfilename", updateRes);
navigate(
{ pathname: `/post/${post._id}` },
{ pathname: `/posts/${post._id}` },
{ replace: true, state: updateRes }
);
......
frontend/src/post/intopost.tsx
View file @ b2cc9167
......@@ -28,10 +28,10 @@ export function IntoPost() {
const handleDeleteClick = async (event: MouseEvent<HTMLButtonElement>) => {
try {
if (confirm("삭제하시겠습니까?") == true) {
const postId = event.currentTarget.id;
const res = await postApi.deletePost(postId);
navigate("/board");
console.log("delete post", res);
// const postId = event.currentTarget.id;
// const res = await postApi.deletePost(postId);
navigate("/posts");
// console.log("delete post", res);
} else {
return false;
}
......@@ -54,11 +54,11 @@ export function IntoPost() {
>
삭제
</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 className="flex h-10 border-t-2 border-sky-500 items-center text-2xl font-medium md:text-2xl">
{posts?.title}
......
frontend/src/post/post.tsx
View file @ b2cc9167
......@@ -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="basis-full">
<button id={post._id} onClick={handleClick}>
<Link to={`/post/${post._id}`} state={post}>
<Link to={`${post._id}`} state={post}>
{post.title}
</Link>
</button>
......
frontend/src/post/posting.tsx
View file @ b2cc9167
......@@ -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<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 };
const selectChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
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<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 maxImg = 10;
const { files } = event.target;
......@@ -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 "
......
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