Skip to content

GitLab

Commit 715ce2d9 authored by Lee Soobeom's avatar Lee Soobeom
Browse files

posting css

parent 1bc1c778
Hide whitespace changes
Inline Side-by-side
frontend/src/board/board.tsx
View file @ 715ce2d9
...@@ -37,22 +37,22 @@ export default function BoardPage() { ...@@ -37,22 +37,22 @@ export default function BoardPage() {
return ( return (
<div className="flex flex-col items-center"> <div className="flex flex-col items-center">
<div className="flex flex-col items-center mt-6"> <div className="flex flex-col w-10/12 items-center mt-6">
<div>`Travel Report's Board`</div> <div>`Travel Report's Board`</div>
<div>`여행지 후기를 남겨주세요!`</div> <div>`여행지 후기를 남겨주세요!`</div>
</div> </div>
<div className="flex flex-col w-10/12 mt-16"> <div className="flex flex-col w-10/12 mt-16">
<div className="flex justify-end"> <div className="flex justify-end">
<div className="border-2 mb-2"> <div className="border-2 border-blue-500 rounded mb-2">
<Link to="/posting"> <Link to="/posting">
<button>글쓰기+</button> <button>글쓰기</button>
</Link> </Link>
</div>{" "} </div>{" "}
{/* Link */} {/* Link */}
</div> </div>
<div className="sm:overflow-y-scroll"> <div className="sm:overflow-y-scroll">
<div className="flex flex-row divide-x-2 border-2 border-solid bg-sky-300 border-y-2 h-10 "> <div className="flex flex-row divide-x-2 border-2 border-solid border-y-2 h-10 bg-gradient-to-r from-cyan-500 to-blue-500 ">
<div className="basis-full">Title</div> <div className="basis-full">Title</div>
<div className="basis-3/12">Date</div> <div className="basis-3/12">Date</div>
<div className="basis-2/12">Clicks</div> <div className="basis-2/12">Clicks</div>
......
frontend/src/post/editpost.tsx
View file @ 715ce2d9
...@@ -108,75 +108,99 @@ export function EditPost() { ...@@ -108,75 +108,99 @@ export function EditPost() {
}; };
return ( return (
<div className="flex flex-col border-3"> <div className="flex place-content-center">
<form onSubmit={reWriteSubmit} className="w-full items-center"> <form
<div className="flex flex-row relative"> onSubmit={reWriteSubmit}
<p className="basis-1/12 gap-x-8">Id</p> className="flex flex-col w-96 items-center"
<p className="basis-8/12 invisible">empty</p> >
<select <div className="flex flex-row h-8 gap-x-1">
name="city" <div className="flex border-2 border-sky-400 rounded-full w-20 place-content-center transition ease-in-out delay-150 bg-white-400 hover:-translate-y-1 hover:scale-110 hover:bg-gray-300 duration-300">
className="border border-3 border-black w-1/12" <input
onChange={cityChange} id="files"
defaultValue={post.city} type="file"
> multiple
<option value="city">도시</option> // onChange={handleInputPic}
<option value="Seoul">서울</option> className="hidden"
<option value="Busan">부산</option> />
<option value="Incheon">인천</option> <label htmlFor="files" className="text-xs mt-1.5 ml-1 ">
<option value="Daegoo">대구</option> 파일 선택
<option value="Kwangjoo">광주</option> </label>
<option value="Daejeon">대전</option> </div>
<option value="Woolsan">울산</option>
<option value="Sejong">세종</option> <div className="flex w-20">
<option value="Dokdo">독도</option> <select
<option value="Jeju">제주</option> name="city"
</select> className="border-2 border-sky-400 rounded-full w-20 text-xs"
<select onChange={cityChange}
name="theme" defaultValue="질문종류"
className="border border-3 border-black w-1/12" >
onChange={themeChange} <option value="질문종류">도시</option>
defaultValue={post.theme} <option value="Seoul">서울</option>
> <option value="Busan">부산</option>
<option value="theme">테마</option> <option value="Incheon">인천</option>
<option value="cycling">사이클링</option> <option value="Daegoo">대구</option>
<option value="surfing">서핑</option> <option value="Kwangjoo">광주</option>
<option value="activity">액티비티</option> <option value="Daejeon">대전</option>
<option value="camping">캠핑</option> <option value="Woolsan">울산</option>
<option value="sking">스키</option> <option value="Sejong">세종</option>
<option value="boat">보트</option> <option value="Dokdo">독도</option>
<option value="desert">사막</option> <option value="Jeju">제주</option>
<option value="golf">골프</option> </select>
<option value="cave">동굴</option> </div>
<option value="history">문화재</option>
<option value="zoo">동물원</option> <div className="flex w-20">
<option value="cycling">사이클링</option> <select
</select> name="theme"
className="border-2 border-sky-400 rounded-full w-20 text-xs"
<button onChange={themeChange}
type="submit" defaultValue="질문종류"
className="border border-black basis-1/12 gap-x-8" >
> <option value="질문종류">테마</option>
Rewrite <option value="cycling">사이클링</option>
</button> <option value="surfing">서핑</option>
<option value="activity">액티비티</option>
<option value="camping">캠핑</option>
<option value="sking">스키</option>
<option value="boat">보트</option>
<option value="desert">사막</option>
<option value="golf">골프</option>
<option value="cave">동굴</option>
<option value="history">문화재</option>
<option value="zoo">동물원</option>
<option value="cycling">사이클링</option>
</select>
</div>
<div className="flex w-20">
<button
type="submit"
className="border-2 border-sky-400 rounded-full w-20 text-xs text-center transition ease-in-out delay-150 bg-white-400 hover:-translate-y-1 hover:scale-110 hover:bg-sky-300 duration-300"
>
글쓰기
</button>
</div>
</div> </div>
<div className="flex border-4"> <div className="flex flex-col">
<textarea <textarea
name="title" name="title"
onChange={titleChange} onChange={titleChange}
placeholder="title" placeholder="제목을 입력해 주세요!"
className="w-full h-8" className="flex w-96 border-2 border-sky-500 rounded"
defaultValue={post.title} />
></textarea> <div className="flex flex-col mt-1 mb-1">
</div> <div className="flex gap-x-2 h-48 overflow-x-scroll">
<div className="flex border-2"> {/* {imgSrc?.map((img, i) => (
<img key={i} src={img} width={200} height={200} />
))} */}
</div>
</div>
<textarea <textarea
onChange={textChange} onChange={textChange}
name="text" name="text"
placeholder="text" placeholder="여행 후기를 알려주세요!"
className="w-full h-96" className="flex w-96 h-96 border-2 border-sky-500 rounded"
defaultValue={post.text} />
></textarea>
</div> </div>
</form> </form>
</div> </div>
......
frontend/src/post/intopost.tsx
View file @ 715ce2d9
...@@ -24,37 +24,43 @@ export function IntoPost() { ...@@ -24,37 +24,43 @@ export function IntoPost() {
<div> <div>
<div> <div>
<div> <div>
<div className="flex flex-row basis-8 gap-x-1"> <div className="flex flex-row h-8 gap-x-1 place-content-end">
<div className="border-2 border-sky-300 border-current rounded"> <div className="w-8">
<button id={post._id} onClick={handleDeleteClick}> <button
id={post._id}
onClick={handleDeleteClick}
className="border-2 border-sky-300 rounded-full h-8 w-8 text-xs text-center transition ease-in-out delay-150 bg-white-400 hover:-translate-y-1 hover:scale-110 hover:bg-red-300 duration-300"
>
삭제 삭제
</button> </button>
</div> </div>
<div className="border-2 border-sky-300 border-current rounded"> <div className="w-8">
<Link to="/edit" state={post}> <Link to="/edit" state={post}>
<button>수정</button> <button className="border-2 border-sky-300 rounded-full h-8 w-8 text-xs transition ease-in-out delay-150 bg-white-400 hover:-translate-y-1 hover:scale-110 hover:bg-sky-300 duration-300">
수정
</button>
</Link> </Link>
</div> </div>
</div> </div>
<div className="flex flex-row gap-x-1"> <div className="flex flex-row h-8 gap-x-1 place-content-between">
<div className="flex basis-3/4 border-2 border-sky-300 rounded"> <div className="flex basis-3/6 border-2 border-sky-300 rounded">
제목: {post.title} 제목: {post.title}
</div> </div>
<div className="flex basis-1/4 border-2 border-sky-300 rounded"> <div className="flex basis-2/6 border-2 border-sky-300 rounded">
작성자: {post.user} 작성자: {post.user}
</div> </div>
<div className="flex basis-2/6 border-2 border-sky-300 rounded">
작성일: {post.date}
</div>
</div> </div>
<div className="flex flex-row gap-x-1"> <div className="flex flex-row h-8 gap-x-1 place-content-start">
<div className="flex basis-1/4 border-2 border-sky-300 rounded"> <div className="flex basis-1/6 border-2 border-sky-300 rounded">
도시: {post.city} 도시: {post.city}
</div> </div>
<div className="flex basis-1/4 border-2 border-sky-300 rounded"> <div className="flex basis-1/6 border-2 border-sky-300 rounded">
테마: {post.theme} 테마: {post.theme}
</div> </div>
<div className="flex basis-1/4 border-2 border-sky-300 rounded"> <div className="flex basis-1/6 border-2 border-sky-300 rounded">
작성일: {post.date}
</div>
<div className="flex basis-1/4 border-2 border-sky-300 rounded">
조회수: {post.counts} 조회수: {post.counts}
</div> </div>
</div> </div>
......
frontend/src/post/posting.tsx
View file @ 715ce2d9
...@@ -60,7 +60,8 @@ export default function Posting() { ...@@ -60,7 +60,8 @@ export default function Posting() {
if (postingFormMatch(user)) { if (postingFormMatch(user)) {
setLoading(true); setLoading(true);
if (file) { if (file) {
sendImg2Db(file); const res = sendImg2Db(file);
console.log(res);
} }
// const res = await postApi.posting(user); // const res = await postApi.posting(user);
// console.log("서버연결됬나요", res); // console.log("서버연결됬나요", res);
...@@ -153,83 +154,99 @@ export default function Posting() { ...@@ -153,83 +154,99 @@ export default function Posting() {
}; };
return ( return (
<div className="flex flex-col border-3 "> <div className="flex place-content-center">
<form onSubmit={handlePostSubmit} className="w-full items-center"> <form
<div className="flex flex-row relative"> onSubmit={handlePostSubmit}
<p className="basis-1/12 gap-x-8">Id</p> className="flex flex-col w-96 items-center"
<p className="basis-6/12 invisible">empty</p> >
<div className="basis-2/12 border-2 border-sky-300"> <div className="flex flex-row h-8 gap-x-1">
<input type="file" multiple onChange={handleInputPic} /> <div className="flex border-2 border-sky-400 rounded-full w-20 place-content-center transition ease-in-out delay-150 bg-white-400 hover:-translate-y-1 hover:scale-110 hover:bg-gray-300 duration-300">
<input
id="files"
type="file"
multiple
onChange={handleInputPic}
className="hidden"
/>
<label htmlFor="files" className="text-xs text-center mt-1.5 ml-1 ">
파일 선택
</label>
</div>
<div className="flex w-20">
<select
name="city"
className="border-2 border-sky-400 rounded-full w-20 text-xs"
onChange={cityChange}
defaultValue="질문종류"
>
<option value="질문종류">도시</option>
<option value="Seoul">서울</option>
<option value="Busan">부산</option>
<option value="Incheon">인천</option>
<option value="Daegoo">대구</option>
<option value="Kwangjoo">광주</option>
<option value="Daejeon">대전</option>
<option value="Woolsan">울산</option>
<option value="Sejong">세종</option>
<option value="Dokdo">독도</option>
<option value="Jeju">제주</option>
</select>
</div>
<div className="flex w-20">
<select
name="theme"
className="border-2 border-sky-400 rounded-full w-20 text-xs"
onChange={themeChange}
defaultValue="질문종류"
>
<option value="질문종류">테마</option>
<option value="cycling">사이클링</option>
<option value="surfing">서핑</option>
<option value="activity">액티비티</option>
<option value="camping">캠핑</option>
<option value="sking">스키</option>
<option value="boat">보트</option>
<option value="desert">사막</option>
<option value="golf">골프</option>
<option value="cave">동굴</option>
<option value="history">문화재</option>
<option value="zoo">동물원</option>
<option value="cycling">사이클링</option>
</select>
</div>
<div className="flex w-20">
<button
type="submit"
className="border-2 border-sky-400 rounded-full w-20 text-xs text-center transition ease-in-out delay-150 bg-white-400 hover:-translate-y-1 hover:scale-110 hover:bg-sky-300 duration-300"
>
글쓰기
</button>
</div> </div>
<select
name="city"
id="Questions"
className="border-2 border-sky-300 w-1/12"
onChange={cityChange}
defaultValue="질문종류"
>
<option value="질문종류">도시</option>
<option value="Seoul">서울</option>
<option value="Busan">부산</option>
<option value="Incheon">인천</option>
<option value="Daegoo">대구</option>
<option value="Kwangjoo">광주</option>
<option value="Daejeon">대전</option>
<option value="Woolsan">울산</option>
<option value="Sejong">세종</option>
<option value="Dokdo">독도</option>
<option value="Jeju">제주</option>
</select>
<select
name="theme"
id="Questions"
className="border-2 border-sky-300 w-1/12"
onChange={themeChange}
defaultValue="질문종류"
>
<option value="질문종류">테마</option>
<option value="cycling">사이클링</option>
<option value="surfing">서핑</option>
<option value="activity">액티비티</option>
<option value="camping">캠핑</option>
<option value="sking">스키</option>
<option value="boat">보트</option>
<option value="desert">사막</option>
<option value="golf">골프</option>
<option value="cave">동굴</option>
<option value="history">문화재</option>
<option value="zoo">동물원</option>
<option value="cycling">사이클링</option>
</select>
<button
type="submit"
className="border-2 border-sky-300 basis-1/12 gap-x-8"
>
글쓰기
</button>
</div> </div>
<div className="flex"> <div className="flex flex-col">
<textarea <textarea
name="title" name="title"
onChange={titleChange} onChange={titleChange}
placeholder="title" placeholder="제목을 입력해 주세요!"
className="w-full h-8 border-2 border-sky-300" className="flex w-96 border-2 border-sky-500 rounded"
></textarea> />
</div> <div className="flex flex-col mt-1 mb-1">
<div className="flex flex-col"> <div className="flex gap-x-2 h-48 overflow-x-scroll">
<div className="flex h-48 overflow-x-scroll"> {imgSrc?.map((img, i) => (
{imgSrc?.map((img, i) => ( <img key={i} src={img} width={200} height={200} />
<img key={i} src={img} width={200} height={200} /> ))}
))} </div>
</div> </div>
<textarea <textarea
onChange={textChange} onChange={textChange}
name="text" name="text"
placeholder="text" placeholder="여행 후기를 알려주세요!"
className="w-full h-96 border-2 border-sky-300" className="flex w-96 h-96 border-2 border-sky-500 rounded"
></textarea> />
</div> </div>
</form> </form>
</div> </div>
......
src/controllers/post.controller.ts
View file @ 715ce2d9
...@@ -7,10 +7,6 @@ import { TypedRequest } from "../types"; ...@@ -7,10 +7,6 @@ import { TypedRequest } from "../types";
export const createImgAndPost = asyncWrap(async (reqExp, res, next) => { export const createImgAndPost = asyncWrap(async (reqExp, res, next) => {
const req = reqExp as TypedRequestAuth<{ userId: string }>; const req = reqExp as TypedRequestAuth<{ userId: string }>;
// const { date, counts } = req.body as {
// date: "";
// counts: 0;
// };
const { userId } = req.auth; const { userId } = req.auth;
...@@ -20,43 +16,43 @@ export const createImgAndPost = asyncWrap(async (reqExp, res, next) => { ...@@ -20,43 +16,43 @@ export const createImgAndPost = asyncWrap(async (reqExp, res, next) => {
multiples: true, multiples: true,
}); });
const fileIdArr = new Array();
form.parse(req, (err, fields, files) => { form.parse(req, (err, fields, files) => {
const title = fields.title?.[0];
const text = fields.text?.[0];
const theme = fields.theme?.[0];
const city = fields.city?.[0];
if (Array.isArray(files.picture)) { if (Array.isArray(files.picture)) {
for (var i = 0; i < files.picture.length; i++) { for (var i = 0; i < files.picture.length; i++) {
if (!(files.picture?.[i].originalFilename === null)) { const originalfilename = files.picture?.[i].originalFilename;
const originalfilename = files.picture?.[i].originalFilename; const newfilename = files.picture?.[i].newFilename;
const newfilename = files.picture?.[i].newFilename; const filepath = files.picture?.[i].filepath;
const filepath = files.picture?.[i].filepath;
const filesRes = postDb.createFilesRow(
const filesRes = postDb.createFilesRow( originalfilename,
originalfilename, newfilename,
newfilename, filepath
filepath );
); }
} // create fileinfos row
if (!Array.isArray(fields.title)) {
const title = fields.title;
if (!Array.isArray(fields.text)) {
const text = fields.text;
if (!Array.isArray(fields.theme)) {
const theme = fields.theme;
if (!Array.isArray(fields.city)) {
const city = fields.city;
const postRes = postDb.createPostRow({
title,
text,
theme,
city,
date: Date.now(),
counts: 0,
user: userId,
}); // create posts
}
} }
} }
} else {
console.log("업로드한 사진이 없습니다.");
} }
const postRes = postDb.createPostRow({
title,
text,
theme,
city,
date: Date.now(),
counts: 0,
user: userId,
});
console.log("createPostRow", postRes);
}); });
}); });
......
src/db/post.db.ts
View file @ 715ce2d9
...@@ -28,6 +28,11 @@ export const createFilesRow = async ( ...@@ -28,6 +28,11 @@ export const createFilesRow = async (
return newFileRow; return newFileRow;
}; };
export const findFile = async (postId: string) => {
const fileInfo = await Post.findById({ postId }).populate("file");
return fileInfo;
};
export const findFileByPostInfo = async (title: string, usreId: string) => { export const findFileByPostInfo = async (title: string, usreId: string) => {
const posts = await Post.find({ title: title, userId: usreId }); const posts = await Post.find({ title: title, userId: usreId });
return posts; return posts;
......
src/db/user.db.ts
View file @ 715ce2d9
...@@ -102,7 +102,7 @@ export const postPicture = async ( ...@@ -102,7 +102,7 @@ export const postPicture = async (
} }
}; };
export const deleteUser = async (userId: string) => { export const deleteUser = async (userId: ObjectId) => {
const user = await User.findById(userId); const user = await User.findById(userId);
if (user && user.avatar) { if (user && user.avatar) {
const file = await FileInfo.findById(user.avatar._id); const file = await FileInfo.findById(user.avatar._id);
......
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