전체적인 css 개선

frontend/src/auth/login.tsx

@@ -89,7 +89,7 @@ export default function Login() {
           <button
             disabled={disabled}
             type="submit"
-            className="my-4 md:my-0 bg-sky-600 hover:bg-sky-700 rounded-xl text-xl py-4 md:px-4"
+            className="my-4 md:my-0 bg-sky-500 hover:bg-sky-400 rounded-xl text-xl py-4 md:px-4 text-white"
           >
             {" "}
             {loading && (

frontend/src/auth/profile.tsx

@@ -2,6 +2,7 @@ import React, { useEffect, useState } from "react";
 import { Profile } from "../types";
 import { profileApi } from "../apis";
 import { useAuth } from "../auth/auth.context";
+import { Link } from "react-router-dom";
 
 export default function Profile() {
   // 로컬 저장소에는 로그인 여부만 저장
@@ -88,8 +89,8 @@ export default function Profile() {
 
   return (
     <div className="grid ">
-      <form className="justify-items-center">
-        <div className=" mt-10">프로필 수정</div>
+      <form className="">
+        <div className=" mt-10 text-2xl">프로필 수정</div>
         <div className="grid mt-10 border-0 border-y-2 border-gray-400 ">
           <div className="flex h-20">
             <div className=" basis-1/5 border-0 border-r-2 bg-gray-100 grid place-items-center shrink-0">
@@ -104,7 +105,7 @@ export default function Profile() {
               사진
             </div>
             <div className="basis-full py-4 ">
-              <div className="overflow-hidden w-28 h-28 rounded-full border-2 m-5">
+              <div className="overflow-hidden w-28 h-28 rounded-full border-2 mx-3 mb-3">
                 {imageSrc ? (
                   <img
                     src={imageSrc}
@@ -140,16 +141,21 @@ export default function Profile() {
             />
           </div>
         </div>
-        <div className="grid grid-cols-2 my-4 md:mb-20 justify-items-center">
+        <div className="flex  md:mb-20 justify-center gap-x-3">
           <button
             onClick={handleClick}
-            className="w-20 border-2 shrink-0 ml-10"
+            className=" mt-5 h-12 w-40 border-2 border-blue-400 text-lg  place-self-center"
           >
             저장하기
           </button>
+
+          <button className=" mt-5 h-12 w-40  text-lg border-2 border-orange-400 place-self-center">
+            <Link to="/">취소</Link>
+          </button>
+
           <button
             onClick={deleteClick}
-            className="w-20 border-2 shrink-0 mr-10"
+            className=" mt-5 h-12 w-40  text-lg border-2 border-red-400 place-self-center"
           >
             계정 삭제
           </button>

frontend/src/auth/signup.tsx

@@ -68,56 +68,79 @@ export default function Signup() {
   }
 
   return (
-    <div className="flex flex-col items-center">
-      <div className=" md:w-40 mt-8 text-center text-2xl rounded-2xl">
+    <div className="flex flex-col">
+      <div className="flex place-items-strat ml-2 mt-8 text-center text-2xl ">
         <Link to="/">회원가입</Link>
       </div>
 
       <form onSubmit={handleSubmit} className="flex flex-col  mt-16 gap-y-4">
-        <div className="flex flex-col">
-          <div className="flex">
-            <div className="basis-1/5 shrink-0">이름</div>
+        <div className="flex flex-col ">
+          <div className="border-0 border-y-2 border-black">
+            <div className="h-16 flex ">
+              <div className="whitespace-nowrap grid place-items-center basis-1/5 shrink-0 border-0 border-r-2">
+                이름
+              </div>
+              <div className="grid place-items-center mx-5">
                 <input
-              className="border-2 focus:border-black"
+                  className="h-10 basis-1/5 border-2 focus:border-black"
                   type="text"
                   name="name"
                   onChange={handleChange}
                 />
               </div>
-          <div className="flex">
-            <div className="basis-1/5 shrink-0">이메일</div>
+            </div>
+            <div className="h-16 flex border-0 border-t-2">
+              <div className="whitespace-nowrap grid place-items-center basis-1/5 shrink-0 border-0 border-r-2">
+                이메일
+              </div>
+              <div className="grid place-items-center mx-5">
                 <input
-              className="border-2 focus:border-black"
+                  className=" grid place-items-center h-10 basis-1/5 border-2 focus:border-black"
                   type="email"
                   name="email"
                   onChange={handleChange}
                 />
               </div>
-          <div className="flex">
-            <div className="basis-1/5 shrink-0">비밀번호</div>
+            </div>
+            <div className="h-16 flex border-0 border-t-2">
+              <div className="whitespace-nowrap grid place-items-center basis-1/5 shrink-0 border-0 border-r-2">
+                비밀번호
+              </div>
+              <div className="grid place-items-center  mx-5">
                 <input
-              className="border-2 focus:border-black"
+                  className="grid place-items-center h-10 basis-1/5 border-2 focus:border-black"
                   type="password"
                   name="password"
                   onChange={handleChange}
                 />
               </div>
-          <div className="flex">
-            <div className="basis-1/5 shrink-0">비밀번호 확인</div>
+            </div>
+
+            <div className="h-16 flex border-0 border-t-2">
+              <div className="whitespace-nowrap grid place-items-center basis-1/5 shrink-0 border-0 border-r-2">
+                비밀번호 확인
+              </div>
+
+              <div className="grid place-items-center mx-5">
                 <input
-              className="border-2 focus:border-black"
+                  className="grid place-items-center h-10 basis-1/5 border-2 focus:border-black"
                   type="password"
                   name="password2"
                   onChange={handleChange}
                 />
               </div>
+            </div>
+          </div>
           {error && (
             <div className="text-red-500 text-sm">
               <p>{error}</p>
             </div>
           )}
 
-          <button disabled={disabled} className="border-b border-white">
+          <button
+            disabled={disabled}
+            className="border-b border-white mt-5 h-12 w-52 text-white text-lg bg-amber-400 place-self-center"
+          >
             {loading && (
               <SpinnerIcon className="animate-spin h-5 w-5 mr-1 text-slate" />
             )}

frontend/src/board/board.tsx

@@ -36,13 +36,13 @@ export default function BoardPage() {
   };
 
   return (
-    <div className="flex flex-col items-center">
-      <div className="flex flex-col w-10/12 items-center mt-6">
-        <div>`Travel Report's Board`</div>
-        <div>`여행지 후기를 남겨주세요!`</div>
+    <div className="flex flex-col ">
+      <div className="flex flex-col  mt-6">
+        <div className="text-2xl">자유 게시판</div>
+        <div className="text-sm mt-5">여행지 후기를 남겨주세요!</div>
       </div>
 
-      <div className="flex flex-col w-10/12 mt-16">
+      <div className="flex flex-col w-full mt-16">
         <div className="flex justify-end">
           <div className="border-2 border-blue-500 rounded mb-2">
             <Link to="/posting">
@@ -51,13 +51,13 @@ export default function BoardPage() {
           </div>{" "}
           {/* Link */}
         </div>
-        <div className="sm:overflow-y-scroll">
-          <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>
+        <div className="sm:overflow-y-auto">
+          <div className="flex place-items-center 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">제목</div>
+            <div className="basis-3/12">게시 날짜</div>
+            <div className="basis-2/12">조회수</div>
           </div>
-          <div>
+          <div className="">
             {posts?.map((post, i) => (
               <Post key={i} post={post} handleClick={titleHandleClick} />
             ))}

frontend/src/home/body.tsx

@@ -15,8 +15,8 @@ export default function Body() {
 
   async function imgsData() {
     const imgs = await mainimgApi.getmainimg();
-    setGetimgs(imgs)
-  };
+    setGetimgs(imgs);
+  }
   useEffect(() => {
     imgsData();
   }, []);
@@ -59,22 +59,26 @@ export default function Body() {
   let limit = 4;
   const numPages = Math.ceil(Idpics.length / limit);
 
-  const slides = []
+  const slides = [];
   for (let i = 0; i < numPages; i++) {
     const k = [
-      Idpics.slice(i * limit, i * limit + limit).map((picture, index: number) => (
+      Idpics.slice(i * limit, i * limit + limit).map(
+        (picture, index: number) => (
           <div
             className={`m-1 shrink-0 rounded shadow-md h-45 relative overflow-hidden`}
-          key={index}>
+            key={index}
+          >
             <img
               src={"http://localhost:3000/images/" + picture.pic.newfilename}
               className="w-full h-40 object-cover hover:scale-110 transition duration-0 hover:duration-500"
             />
             <div className="bg-transparent text-neutral-50 text-xs rounded-full absolute bottom-0 ml-1 mb-1 hover:scale-110 transition duration-0 hover:duration-500">
-            <span >{picture.title}</span>
+              <span>{picture.title}</span>
             </div>
           </div>
-      ))]
+        )
+      ),
+    ];
     slides.push(k);
   }
 
@@ -82,13 +86,11 @@ export default function Body() {
     <div className="flex flex-col">
       <Theme handleClick={themeHandleClick} />
       <div className="flex flex-col md:flex-row py-5 ">
-        <div className="w-50">
+        <div className="md:w-1/5 lg:w-1/6">
           <Citylist handleClick={cityHandleClick} />
         </div>
         <div className="flex flex-col">
-          <MySlide key={Math.random()}
-            slides={slides}
-          />
+          <MySlide key={Math.random()} slides={slides} />
         </div>
       </div>
       <Outlet />

frontend/src/home/header.tsx

@@ -14,15 +14,15 @@ export default function Header() {
   };
 
   return (
-    <div className="flex flex-col md:px-56 ">
-      <div className="flex flex-col-reverse pt-3 pb-12 border-b-2 ">
+    <div className="flex flex-col lg:px-56 ">
+      <div className="flex flex-col-reverse pt-3 pb-12 border-b-2 border-sky-200 bg-gradient-to-t from-sky-200">
         <div className="flex mt-5 justify-between pr-3">
           <button className="ml-3 shrink-0 text-2xl">
             <Link to="/" className="hover:text-sky-300 active:text-purple-500">
               Travel Report
             </Link>
           </button>
-          <div className="flex  ">
+          <div className="flex h-12">
             <input
               className="ml-10 focus:outline-none focus:border-y-4 focus:border-l-4 focus:border-sky-500 w-20 w-40 md:w-4/5 border-y-4 border-l-4 border-sky-300 pl-9 rounded-l-full focus:border-0"
               onChange={handleChange}
@@ -32,8 +32,7 @@ export default function Header() {
             </button>
           </div>
         </div>
-        <div className="flex justify-end">
-          <div className=" p-3 bg-transparent ">
+        <div className="flex justify-end ">
           {useAuth().user.isLoggedIn ? (
             <div className="flex text-xs">
               <Link to="/profile" className="mr-2 ">
@@ -42,31 +41,30 @@ export default function Header() {
               <div className="border-0 border-r-2 border-black "></div>
               <div></div>
               <button
-                  className="ml-2 mr-2 text-xs"
+                className="ml-2 text-xs"
                 onClick={() => {
                   logout();
                 }}
               >
                 로그아웃
               </button>
-                <div className="border-0 border-r-2 border-black"></div>
-                <div></div>
             </div>
           ) : (
-              <button className="shrink-0 bg-transparent pb-1">
+            <button className="shrink-0 ">
               <Link
-                  className="hover:text-sky-300 focus:text-purple-500 text-xs"
+                className="hover:text-sky-300 focus:text-purple-500 text-xs grid items-center"
                 to="/login"
               >
                 로그인
               </Link>
             </button>
           )}
-          </div>
-          <button className="shrink-0 bg-transparent pr-3 text-xs">
+          <div className="ml-2 border-0 border-r-2 border-black "></div>
+          <div></div>
+          <button className="shrink-0 mr-3 text-xs ">
             <Link
               to="/board"
-              className="hover:text-sky-300 focus:text-purple-500"
+              className="hover:text-sky-300 focus:text-purple-500 mx-2 grid items-center"
             >
               게시판
             </Link>

frontend/src/home/theme.tsx

@@ -10,7 +10,7 @@ export default function Theme({ handleClick }: ThemeProps) {
       <button
         id={"surfing"}
         onClick={handleClick}
-        className="shrink-0 px-5 hover:text-sky-300"
+        className="shrink-0 px-5 hover:text-sky-300 "
       >
         서핑
       </button>

frontend/src/pages/citylist.tsx

@@ -7,74 +7,76 @@ type CityProps = {
 export default function Citylist({ handleClick }: CityProps) {
   return (
     <div className="overflow-auto w-full  flex flex-row md:flex-col md:mr-24 bg-sky-100">
-      <div className="text-start px-5 py-2 bg-white shrink-0">도시</div>
+      <div className="text-start px-5 py-2 bg-white whitespace-nowrap">
+        도시
+      </div>
       <button
         id={"서울"}
         onClick={handleClick}
-        className="text-start  px-5 py-2 hover:underline shrink-0"
+        className="text-start  px-5 py-2 hover:underline whitespace-nowrap"
       >
         서울
       </button>
       <button
         id={"부산"}
         onClick={handleClick}
-        className="text-start px-5 py-2 hover:underline shrink-0"
+        className="text-start px-5 py-2 hover:underline whitespace-nowrap"
       >
         부산
       </button>
       <button
         id={"인천"}
         onClick={handleClick}
-        className="text-start px-5 py-2 hover:underline shrink-0"
+        className="text-start px-5 py-2 hover:underline whitespace-nowrap"
       >
         인천
       </button>
       <button
         id={"대구"}
         onClick={handleClick}
-        className="text-start px-5 py-2 hover:underline shrink-0"
+        className="text-start px-5 py-2 hover:underline whitespace-nowrap"
       >
         대구
       </button>
       <button
         id={"광주"}
         onClick={handleClick}
-        className="text-start px-5 py-2 hover:underline shrink-0"
+        className="text-start px-5 py-2 hover:underline whitespace-nowrap"
       >
         광주
       </button>
       <button
         id={"대전"}
         onClick={handleClick}
-        className="text-start px-5 py-2 hover:underline shrink-0"
+        className="text-start px-5 py-2 hover:underline whitespace-nowrap"
       >
         대전
       </button>
       <button
         id={"울산"}
         onClick={handleClick}
-        className="text-start px-5 py-2 hover:underline shrink-0"
+        className="text-start px-5 py-2 hover:underline whitespace-nowrap"
       >
         울산
       </button>
       <button
         id={"세종"}
         onClick={handleClick}
-        className="text-start px-5 py-2 hover:underline shrink-0"
+        className="text-start px-5 py-2 hover:underline whitespace-nowrap"
       >
         세종
       </button>
       <button
         id={"독도"}
         onClick={handleClick}
-        className="text-start px-5 py-2 hover:underline shrink-0"
+        className="text-start px-5 py-2 hover:underline whitespace-nowrap"
       >
         독도
       </button>
       <button
         id={"제주"}
         onClick={handleClick}
-        className="text-start px-5 py-2 hover:underline shrink-0"
+        className="text-start px-5 py-2 hover:underline whitespace-nowrap"
       >
         제주
       </button>

frontend/src/post/editpost.tsx

@@ -171,13 +171,9 @@ export function EditPost() {
   };
 
   return (
-    <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">
+    <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">
           <input
             id="files"
             type="file"
@@ -185,15 +181,14 @@ export function EditPost() {
             onChange={handleInputPic}
             className="hidden"
           />
-            <label htmlFor="files" className="text-xs mt-1.5 ml-1 ">
+          <label htmlFor="files" className="text-xs grid place-items-center">
             파일 선택
           </label>
         </div>
 
-          <div className="flex w-20">
         <select
           name="city"
-              className="border-2 border-sky-400 rounded-full w-20 text-xs"
+          className="border-2 border-sky-400  text-xs h-6 place-self-center"
           onChange={cityChange}
           defaultValue={post.city}
         >
@@ -209,12 +204,10 @@ export function EditPost() {
           <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"
+          className="border-2 border-sky-400  text-xs h-6 place-self-center"
           onChange={themeChange}
           defaultValue={post.theme}
         >
@@ -232,27 +225,24 @@ export function EditPost() {
           <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 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:scale-110 hover:bg-sky-300 duration-300"
         >
           수정
         </button>
       </div>
-        </div>
 
-        <div className="flex flex-col">
+      <div className="flex flex-col w-full border-y-2 border-sky-500">
         <textarea
           name="title"
           onChange={titleChange}
           placeholder="제목을 입력해 주세요!"
-            className="flex w-96 border-2 border-sky-500 rounded"
+          className="flex focus:outline-none"
         />
-          <div className="flex flex-col mt-1 mb-1">
-            <div className="flex gap-x-2 h-48 overflow-x-scroll">
+        <div className="flex flex-col mt-1 mb-1 border-t-2 border-sky-200">
+          <div className="flex gap-x-2 h-44 overflow-x-auto ">
             {filesList?.map((file, i) => (
               <img
                 key={i}
@@ -267,10 +257,9 @@ export function EditPost() {
           onChange={textChange}
           name="text"
           placeholder="여행 후기를 알려주세요!"
-            className="flex w-96 h-96 border-2 border-sky-500 rounded"
+          className="flex h-44 border-t-2 border-sky-200 focus:outline-none "
         />
       </div>
     </form>
-    </div>
   );
 }

frontend/src/post/intopost.tsx

@@ -59,56 +59,43 @@ export function IntoPost() {
   };
 
   return (
-    <div>
-      <div>
-        <div>
-          <div className="flex flex-row h-8 gap-x-1 place-content-end">
-            <div className="w-8">
+    <div className="flex flex-col">
+      <div className="flex h-8 gap-x-1 place-content-end place-items-center">
         <button
           id={post._id}
           onClick={handleDeleteClick}
-                className="border-2 border-sky-100 rounded-full h-8 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:scale-110 hover:bg-red-300 duration-300"
         >
           삭제
         </button>
-            </div>
-            <div className="w-8">
         <Link to="/edit" state={post}>
-                <button className="border-2 border-sky-100 rounded-full h-8 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:scale-110 hover:bg-sky-300 duration-300">
             수정
           </button>
         </Link>
       </div>
+      <div className="flex h-10 border-t-2 border-sky-500 items-center font-semibold">
+        {post.title}
       </div>
-          <div className="flex flex-col h-16 md:h-8 md:flex-row">
-            <div className="flex basis-1/2 place-content-between h-8">
-              <div className="flex basis-1/2 border-2 border-sky-200 rounded h-8">
+
+      <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 ">
           작성자: {post.user.slice(0, 8)}
         </div>
-              <div className="flex basis-1/2 border-2 border-sky-200 rounded h-8">
-                작성일: {post.date.slice(0, 10)}
-              </div>
-            </div>
-            <div className="flex basis-1/2 place-content-between h-8">
-              <div className="flex basis-1/3 border-2 border-sky-300 rounded">
-                도시: {post.city}
-              </div>
-              <div className="flex basis-1/3 border-2 border-sky-300 rounded">
-                테마: {post.theme}
-              </div>
-              <div className="flex basis-1/3 border-2 border-sky-300 rounded">
-                조회수: {post.counts}
-              </div>
-            </div>
+
+        <div className="flex divide-x divide-slate-300 ">
+          <div className="flex basis-1/2 whitespace-nowrap px-2">
+            작성일 : {post.date.slice(0, 10)}
           </div>
-          <div className="flex flex-row h-8 gap-x-1 ">
-            <div className="flex w-full border-2 border-sky-200 rounded">
-              제목: {post.title}
+          <div className="flex whitespace-nowrap px-2"> {post.city}</div>
+          <div className="flex whitespace-nowrap px-2"> {post.theme}</div>
+          <div className="flex whitespace-nowrap px-2">
+            조회수 : {post.counts}
           </div>
         </div>
       </div>
-        <div className="flex-row border-2 border-sky-400 rounded h-48 gap-x-2 ">
-          <div className="flex gap-x-2 h-48 overflow-x-scroll">
+
+      <div className="flex border-t-2 border-sky-200 h-44 p-2 overflow-auto mb-5 ">
         {filesList?.map((file, i) => (
           <img
             key={i}
@@ -118,9 +105,7 @@ export function IntoPost() {
           />
         ))}
       </div>
-        </div>
-        <div className="border-2 border-sky-500 rounded h-96">{post.text}</div>
-      </div>
+      <div className="border-b-2 border-sky-500 h-44 mb-10">{post.text}</div>
     </div>
   );
 }

frontend/src/post/posting.tsx

@@ -166,13 +166,9 @@ export default function Posting() {
   };
 
   return (
-    <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 delay-150 bg-white-400 hover:-translate-y-1 hover:scale-110 hover:bg-gray-300 duration-300">
+    <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">
           <input
             id="files"
             type="file"
@@ -180,15 +176,14 @@ export default function Posting() {
             onChange={handleInputPic}
             className="hidden"
           />
-            <label htmlFor="files" className="text-xs text-center mt-1.5 ml-1 ">
+          <label htmlFor="files" className="text-xs grid place-items-center">
             파일 선택
           </label>
         </div>
 
-          <div className="flex w-20">
         <select
           name="city"
-              className="border-2 border-sky-400 rounded-full w-20 text-xs"
+          className="border-2 border-sky-400  text-xs h-6 place-self-center"
           onChange={cityChange}
           defaultValue="질문종류"
         >
@@ -204,12 +199,10 @@ export default function Posting() {
           <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"
+          className="border-2 border-sky-400  text-xs h-6 place-self-center"
           onChange={themeChange}
           defaultValue="질문종류"
         >
@@ -227,27 +220,24 @@ 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-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"
+          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"
         >
           글쓰기
         </button>
       </div>
-        </div>
 
-        <div className="flex flex-col">
+      <div className="flex flex-col w-full border-y-2 border-sky-500">
         <textarea
           name="title"
           onChange={titleChange}
           placeholder="제목을 입력해 주세요!"
-            className="flex w-96 border-2 border-sky-500 rounded"
+          className="flex focus:outline-none"
         />
-          <div className="flex flex-col mt-1 mb-1">
-            <div className="flex gap-x-2 h-48 overflow-x-scroll">
+        <div className="flex flex-col mt-1 mb-1 border-t-2 border-sky-200">
+          <div className="flex gap-x-2 h-44 overflow-x-auto">
             {imgSrc?.map((img, i) => (
               <img key={i} src={img} width={200} height={200} />
             ))}
@@ -257,10 +247,9 @@ export default function Posting() {
           onChange={textChange}
           name="text"
           placeholder="여행 후기를 알려주세요!"
-            className="flex w-96 h-96 border-2 border-sky-500 rounded"
+          className="flex h-44 border-t-2 border-sky-200 focus:outline-none "
         />
       </div>
     </form>
-    </div>
   );
 }

src/db/mainimg.db.ts

@@ -18,7 +18,7 @@ export const createMainimg = async (mainimg: MainimgType, pic: IFileInfo) => {
 };
 
 export const getMainimg = async () => {
-  const img = await Mainimg.find({}).populate("pic");
+  const img = await Mainimg.find({}).populate("fileInfo");
 
   return img;
 };