posting css

frontend/src/board/board.tsx

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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);