board, post css

frontend/src/board/board.tsx

@@ -63,15 +63,17 @@ export default function BoardPage() {
   };
 
   return (
-    <div className="flex flex-col ">
-      <div className="flex flex-col  mt-6">
-        <div className="text-2xl whitespace-nowrap">자유 게시판</div>
-        <div className="text-sm mt-5 whitespace-nowrap">
-          여행지 후기를 남겨주세요!
+    <div className="flex flex-col shadow-lg bg-white rounded px-8 py-4">
+      <div className="flex flex-col my-6 ">
+        <div className="text-4xl font-semibold whitespace-nowrap">
+          자유 게시판
         </div>
+        {/* <div className="text-sm mt-5 whitespace-nowrap">
+          여행지 후기를 남겨주세요!
+        </div> */}
       </div>
 
-      <div className="flex flex-col w-full mt-16">
+      <div className="flex flex-col w-full">
         <div className="flex justify-end">
           <div className="border-2 border-blue-500 rounded mb-2 whitespace-nowrap">
             <button onClick={GoLogin}>

frontend/src/post/editpost.tsx

@@ -199,10 +199,13 @@ export function EditPost() {
   };
 
   return (
-    <div>
+    <div className="shadow-lg bg-white rounded px-8 py-4">
+      <div className="text-2xl font-semibold md:text-4xl">
+        당신의 여행을 알려주세요!
+      </div>
       <form onSubmit={reWriteSubmit} className="flex flex-col  w-full">
         <div className="flex flex-row h-10 gap-x-1 justify-end">
-          <div className="place-self-center w-16 h-6 border-2 border-sky-400  transition delay-150 bg-white-400 hover:-translate-y-1 hover:scale-110 hover:bg-gray-300 duration-300">
+          <div className="place-self-center w-16 h-6 border-2 border-sky-400  transition delay-150 bg-white-400 hover:-translate-y-1 hover:bg-gray-300 duration-300">
             <input
               id="files"
               type="file"
@@ -257,7 +260,7 @@ export function EditPost() {
 
           <button
             type="submit"
-            className="h-6 w-10 place-self-center place-self-center border-2 border-sky-400   text-xs text-center transition delay-150 bg-white-400 hover:-translate-y-1 hover:scale-110 hover:bg-sky-300 duration-300"
+            className="h-6 w-10 place-self-center place-self-center border-2 border-sky-400   text-xs text-center transition delay-150 bg-white-400 hover:-translate-y-1 hover:bg-sky-300 duration-300"
           >
             수정
           </button>

frontend/src/post/intopost.tsx

@@ -42,42 +42,49 @@ export function IntoPost() {
   };
 
   return (
-    <div className="flex flex-col">
+    <div className="flex flex-col shadow-lg bg-white rounded px-8 py-4">
+      <div className="text-3xl font-semibold md:text-4xl">
+        [{post.city}] / [{post.theme}] Travel Report
+      </div>
       <div className="flex h-8 gap-x-1 place-content-end place-items-center">
         <button
           id={posts?._id}
           onClick={handleDeleteClick}
-          className=" whitespace-nowrap flex border-2 border-sky-100 place-self-center h-6 w-8 text-xs text-center transition delay-150 bg-white-400 hover:-translate-y-1 hover:scale-110 hover:bg-red-300 duration-300"
+          className=" whitespace-nowrap flex border-2 border-sky-100 place-self-center h-6 w-8 text-xs text-center transition delay-150 bg-white-400 hover:-translate-y-1 hover:bg-red-300 duration-300"
         >
           삭제
         </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:scale-110 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">
             수정
           </button>
         </Link>
       </div>
-      <div className="flex h-10 border-t-2 border-sky-500 items-center font-semibold">
+      <div className="flex h-10 border-t-2 border-sky-500 items-center text-2xl font-medium md:text-2xl">
         {posts?.title}
       </div>
-
-      <div className="flex h-10 items-center border-t-2 border-sky-200 md:flex-row justify-between bg-slate-50 text-sm">
-        <div className="flex whitespace-nowrap pr-5 ">
+      <div className="flex h-10 items-center border-t-2 border-sky-200 md:flex-row justify-between bg-slate-50 text-sm divide-x divide-slate-300">
+        <div className="flex whitespace-nowrap px-0.5">
           작성자: {posts?.user.name}
         </div>
 
         <div className="flex divide-x divide-slate-300 ">
-          <div className="flex basis-1/2 whitespace-nowrap px-2">
+          <div className="flex basis-1/2 whitespace-nowrap px-0.5 md:px-2">
             작성일 : {posts?.date.slice(0, 10)}
           </div>
-          <div className="flex whitespace-nowrap px-2"> {posts?.city}</div>
-          <div className="flex whitespace-nowrap px-2"> {posts?.theme}</div>
-          <div className="flex whitespace-nowrap px-2">
+          <div className="flex hidden md:whitespace-nowrap md:px-2 ">
+            {" "}
+            {posts?.city}
+          </div>
+          <div className="flex hidden md:whitespace-nowrap md:px-2">
+            {" "}
+            {posts?.theme}
+          </div>
+          <div className="flex whitespace-nowrap px-0.5 md:px-2">
             조회수 : {posts?.counts}
           </div>
         </div>
       </div>
-
       <div className="flex border-t-2 border-sky-200 h-44 p-2 overflow-auto mb-5 ">
         {posts?.file?.map((file, i) => (
           <img

frontend/src/post/posting.tsx

@@ -184,10 +184,13 @@ export default function Posting() {
   };
 
   return (
-    <div>
+    <div className="shadow-lg bg-white rounded px-8 py-4">
+      <div className="text-2xl font-semibold md:text-4xl">
+        당신의 여행을 알려주세요!
+      </div>
       <form onSubmit={handlePostSubmit} className="flex flex-col w-full">
         <div className="flex flex-row gap-x-1 justify-end h-10 ">
-          <div className="place-self-center w-16 h-6 border-2 border-sky-400  transition delay-150 bg-white-400 hover:-translate-y-1 hover:scale-110 hover:bg-gray-300 duration-300">
+          <div className="place-self-center w-16 h-6 border-2 border-sky-400 transition delay-150 bg-white-400 hover:-translate-y-1 hover:bg-gray-300 duration-300">
             <input
               id="files"
               type="file"
@@ -242,7 +245,7 @@ export default function Posting() {
 
           <button
             type="submit"
-            className="h-6 place-self-center place-self-center border-2 border-sky-400   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"
+            className="h-6 place-self-center place-self-center border-2 border-sky-400 text-xs text-center transition delay-150 bg-white-400 hover:-translate-y-1 hover:bg-sky-300 duration-300"
           >
             글쓰기
           </button>