Skip to content

GitLab

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

posting css

parent 1bc1c778
Show whitespace changes
Inline Side-by-side
frontend/src/board/board.tsx
View file @ 715ce2d9
......@@ -37,22 +37,22 @@ export default function BoardPage() {
return (
<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>`여행지 후기를 남겨주세요!`</div>
</div>
<div className="flex flex-col w-10/12 mt-16">
<div className="flex justify-end">
<div className="border-2 mb-2">
<div className="border-2 border-blue-500 rounded mb-2">
<Link to="/posting">
<button>글쓰기+</button>
<button>글쓰기</button>
</Link>
</div>{" "}
{/* Link */}
</div>
<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-3/12">Date</div>
<div className="basis-2/12">Clicks</div>
......
frontend/src/post/editpost.tsx
View file @ 715ce2d9
......@@ -108,18 +108,33 @@ export function EditPost() {
};
return (
<div className="flex flex-col border-3">
<form onSubmit={reWriteSubmit} className="w-full items-center">
<div className="flex flex-row relative">
<p className="basis-1/12 gap-x-8">Id</p>
<p className="basis-8/12 invisible">empty</p>
<div className="flex place-content-center">
<form
onSubmit={reWriteSubmit}
className="flex flex-col w-96 items-center"
>
<div className="flex flex-row h-8 gap-x-1">
<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 mt-1.5 ml-1 ">
파일 선택
</label>
</div>
<div className="flex w-20">
<select
name="city"
className="border border-3 border-black w-1/12"
className="border-2 border-sky-400 rounded-full w-20 text-xs"
onChange={cityChange}
defaultValue={post.city}
defaultValue="질문종류"
>
<option value="city">도시</option>
<option value="질문종류">도시</option>
<option value="Seoul">서울</option>
<option value="Busan">부산</option>
<option value="Incheon">인천</option>
......@@ -131,13 +146,16 @@ export function EditPost() {
<option value="Dokdo">독도</option>
<option value="Jeju">제주</option>
</select>
</div>
<div className="flex w-20">
<select
name="theme"
className="border border-3 border-black w-1/12"
className="border-2 border-sky-400 rounded-full w-20 text-xs"
onChange={themeChange}
defaultValue={post.theme}
defaultValue="질문종류"
>
<option value="theme">테마</option>
<option value="질문종류">테마</option>
<option value="cycling">사이클링</option>
<option value="surfing">서핑</option>
<option value="activity">액티비티</option>
......@@ -151,32 +169,38 @@ export function EditPost() {
<option value="zoo">동물원</option>
<option value="cycling">사이클링</option>
</select>
</div>
<div className="flex w-20">
<button
type="submit"
className="border border-black basis-1/12 gap-x-8"
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"
>
Rewrite
글쓰기
</button>
</div>
</div>
<div className="flex border-4">
<div className="flex flex-col">
<textarea
name="title"
onChange={titleChange}
placeholder="title"
className="w-full h-8"
defaultValue={post.title}
></textarea>
placeholder="제목을 입력해 주세요!"
className="flex w-96 border-2 border-sky-500 rounded"
/>
<div className="flex flex-col mt-1 mb-1">
<div className="flex gap-x-2 h-48 overflow-x-scroll">
{/* {imgSrc?.map((img, i) => (
<img key={i} src={img} width={200} height={200} />
))} */}
</div>
</div>
<div className="flex border-2">
<textarea
onChange={textChange}
name="text"
placeholder="text"
className="w-full h-96"
defaultValue={post.text}
></textarea>
placeholder="여행 후기를 알려주세요!"
className="flex w-96 h-96 border-2 border-sky-500 rounded"
/>
</div>
</form>
</div>
......
frontend/src/post/intopost.tsx
View file @ 715ce2d9
......@@ -24,37 +24,43 @@ export function IntoPost() {
<div>
<div>
<div>
<div className="flex flex-row basis-8 gap-x-1">
<div className="border-2 border-sky-300 border-current rounded">
<button id={post._id} onClick={handleDeleteClick}>
<div className="flex flex-row h-8 gap-x-1 place-content-end">
<div className="w-8">
<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>
</div>
<div className="border-2 border-sky-300 border-current rounded">
<div className="w-8">
<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>
</div>
</div>
<div className="flex flex-row gap-x-1">
<div className="flex basis-3/4 border-2 border-sky-300 rounded">
<div className="flex flex-row h-8 gap-x-1 place-content-between">
<div className="flex basis-3/6 border-2 border-sky-300 rounded">
제목: {post.title}
</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}
</div>
<div className="flex basis-2/6 border-2 border-sky-300 rounded">
작성일: {post.date}
</div>
</div>
<div className="flex flex-row gap-x-1">
<div className="flex basis-1/4 border-2 border-sky-300 rounded">
<div className="flex flex-row h-8 gap-x-1 place-content-start">
<div className="flex basis-1/6 border-2 border-sky-300 rounded">
도시: {post.city}
</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}
</div>
<div className="flex basis-1/4 border-2 border-sky-300 rounded">
작성일: {post.date}
</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.counts}
</div>
</div>
......
frontend/src/post/posting.tsx
View file @ 715ce2d9
......@@ -60,7 +60,8 @@ export default function Posting() {
if (postingFormMatch(user)) {
setLoading(true);
if (file) {
sendImg2Db(file);
const res = sendImg2Db(file);
console.log(res);
}
// const res = await postApi.posting(user);
// console.log("서버연결됬나요", res);
......@@ -153,18 +154,29 @@ export default function Posting() {
};
return (
<div className="flex flex-col border-3 ">
<form onSubmit={handlePostSubmit} className="w-full items-center">
<div className="flex flex-row relative">
<p className="basis-1/12 gap-x-8">Id</p>
<p className="basis-6/12 invisible">empty</p>
<div className="basis-2/12 border-2 border-sky-300">
<input type="file" multiple onChange={handleInputPic} />
<div className="flex place-content-center">
<form
onSubmit={handlePostSubmit}
className="flex flex-col w-96 items-center"
>
<div className="flex flex-row h-8 gap-x-1">
<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"
id="Questions"
className="border-2 border-sky-300 w-1/12"
className="border-2 border-sky-400 rounded-full w-20 text-xs"
onChange={cityChange}
defaultValue="질문종류"
>
......@@ -180,10 +192,12 @@ export default function Posting() {
<option value="Dokdo">독도</option>
<option value="Jeju">제주</option>
</select>
</div>
<div className="flex w-20">
<select
name="theme"
id="Questions"
className="border-2 border-sky-300 w-1/12"
className="border-2 border-sky-400 rounded-full w-20 text-xs"
onChange={themeChange}
defaultValue="질문종류"
>
......@@ -201,35 +215,38 @@ export default function Posting() {
<option value="zoo">동물원</option>
<option value="cycling">사이클링</option>
</select>
</div>
<div className="flex w-20">
<button
type="submit"
className="border-2 border-sky-300 basis-1/12 gap-x-8"
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 className="flex">
<div className="flex flex-col">
<textarea
name="title"
onChange={titleChange}
placeholder="title"
className="w-full h-8 border-2 border-sky-300"
></textarea>
</div>
<div className="flex flex-col">
<div className="flex h-48 overflow-x-scroll">
placeholder="제목을 입력해 주세요!"
className="flex w-96 border-2 border-sky-500 rounded"
/>
<div className="flex flex-col mt-1 mb-1">
<div className="flex gap-x-2 h-48 overflow-x-scroll">
{imgSrc?.map((img, i) => (
<img key={i} src={img} width={200} height={200} />
))}
</div>
</div>
<textarea
onChange={textChange}
name="text"
placeholder="text"
className="w-full h-96 border-2 border-sky-300"
></textarea>
placeholder="여행 후기를 알려주세요!"
className="flex w-96 h-96 border-2 border-sky-500 rounded"
/>
</div>
</form>
</div>
......
src/controllers/post.controller.ts
View file @ 715ce2d9
......@@ -7,10 +7,6 @@ import { TypedRequest } from "../types";
export const createImgAndPost = asyncWrap(async (reqExp, res, next) => {
const req = reqExp as TypedRequestAuth<{ userId: string }>;
// const { date, counts } = req.body as {
// date: "";
// counts: 0;
// };
const { userId } = req.auth;
......@@ -20,17 +16,9 @@ export const createImgAndPost = asyncWrap(async (reqExp, res, next) => {
multiples: true,
});
const fileIdArr = new Array();
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)) {
for (var i = 0; i < files.picture.length; i++) {
if (!(files.picture?.[i].originalFilename === null)) {
const originalfilename = files.picture?.[i].originalFilename;
const newfilename = files.picture?.[i].newFilename;
const filepath = files.picture?.[i].filepath;
......@@ -41,10 +29,16 @@ export const createImgAndPost = asyncWrap(async (reqExp, res, next) => {
filepath
);
}
}
} else {
console.log("업로드한 사진이 없습니다.");
}
} // 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,
......@@ -54,9 +48,11 @@ export const createImgAndPost = asyncWrap(async (reqExp, res, next) => {
date: Date.now(),
counts: 0,
user: userId,
});
console.log("createPostRow", postRes);
}); // create posts
}
}
}
}
});
});
......
src/db/post.db.ts
View file @ 715ce2d9
......@@ -28,6 +28,11 @@ export const createFilesRow = async (
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) => {
const posts = await Post.find({ title: title, userId: usreId });
return posts;
......
src/db/user.db.ts
View file @ 715ce2d9
......@@ -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);
if (user && user.avatar) {
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