css 수정

frontend/src/auth/signup.tsx

@@ -77,12 +77,12 @@ export default function Signup() {
         <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 className="whitespace-nowrap grid place-items-center w-32 lg:basis-1/5 shrink-0 border-0 border-r-2">
                 이름
               </div>
-              <div className="grid place-items-center mx-5">
+              <div className="flex items-center mx-5">
                 <input
-                  className="h-10 basis-1/5 border-2 focus:border-black"
+                  className="h-10 w-4/5 lg:w-60 border-2 focus:border-black"
                   type="text"
                   name="name"
                   onChange={handleChange}
@@ -90,12 +90,12 @@ export default function Signup() {
               </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 className="whitespace-nowrap grid place-items-center w-32 lg:basis-1/5 shrink-0 border-0 border-r-2">
                 이메일
               </div>
-              <div className="grid place-items-center mx-5">
+              <div className="flex items-center mx-5">
                 <input
-                  className=" grid place-items-center h-10 basis-1/5 border-2 focus:border-black"
+                  className=" w-4/5 h-10 lg:w-60  border-2 focus:border-black"
                   type="email"
                   name="email"
                   onChange={handleChange}
@@ -103,12 +103,12 @@ export default function Signup() {
               </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 className="whitespace-nowrap grid place-items-center w-32 lg:basis-1/5 shrink-0 border-0 border-r-2">
                 비밀번호
               </div>
-              <div className="grid place-items-center  mx-5">
+              <div className="flex items-center  mx-5">
                 <input
-                  className="grid place-items-center h-10 basis-1/5 border-2 focus:border-black"
+                  className="w-4/5 h-10  lg:w-60  border-2 focus:border-black"
                   type="password"
                   name="password"
                   onChange={handleChange}
@@ -117,13 +117,13 @@ export default function Signup() {
             </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 className="whitespace-nowrap grid place-items-center w-32 lg:basis-1/5 shrink-0 border-0 border-r-2">
                 비밀번호 확인
               </div>
 
-              <div className="grid place-items-center mx-5">
+              <div className="flex items-center mx-5">
                 <input
-                  className="grid place-items-center h-10 basis-1/5 border-2 focus:border-black"
+                  className="w-4/5 h-10 lg:w-60  border-2 focus:border-black"
                   type="password"
                   name="password2"
                   onChange={handleChange}

frontend/src/board/board.tsx

 import React, { useState, MouseEvent, useEffect } from "react";
-import { Link } from "react-router-dom";
+import { Link, useNavigate } from "react-router-dom";
 import { PostType } from "../types";
 import Post from "../post/post";
 import { postApi } from "../apis";
+import { useAuth } from "../auth/auth.context";
 
 interface Posts {
   posts: PostType[];
@@ -10,6 +11,8 @@ interface Posts {
 
 export default function BoardPage() {
   const [posts, setPosts] = useState<PostType[]>();
+  const navigate = useNavigate();
+  const { user } = useAuth();
 
   useEffect(() => {
     getDataList();
@@ -36,29 +39,37 @@ export default function BoardPage() {
     }
   };
 
+  const goLogin = async (event: React.MouseEvent) => {
+    if (!user.isLoggedIn) {
+      alert("로그인이 필요합니다.");
+      navigate("/login", { replace: true });
+    }
+  };
+
   return (
     <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 className="text-2xl 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 justify-end">
-          <div className="border-2 border-blue-500 rounded mb-2">
-            <Link to="/posting">
-              <button>글쓰기</button>
-            </Link>
-          </div>{" "}
-          {/* Link */}
+          <div className="border-2 border-blue-500 rounded mb-2 whitespace-nowrap">
+            <button onClick={goLogin}>
+              <Link to="/posting">글쓰기</Link>
+            </button>
+          </div>
         </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="whitespace-nowrap 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 className="">
+          <div className="whitespace-nowrap">
             {posts?.map((post, i) => (
               <Post key={i} post={post} handleClick={titleHandleClick} />
             ))}

frontend/src/home/body.tsx

@@ -21,10 +21,10 @@ export default function Body() {
     imgsData();
   }, []);
 
-  useEffect(() => {
-    console.log(searchParams.get("theme"), searchParams.get("city"));
-    setSearchParams(searchParams);
-  }, []);
+  // useEffect(() => {
+  //   console.log(searchParams.get("theme"), searchParams.get("city"));
+  //   setSearchParams(searchParams);
+  // }, []);
 
   const themeHandleClick = (event: MouseEvent<HTMLButtonElement>) => {
     console.log(`theme id= ${event.currentTarget.id}`);

frontend/src/home/header.tsx

@@ -14,20 +14,20 @@ export default function Header() {
   };
 
   return (
-    <div className="flex flex-col lg:px-56 ">
+    <div className="flex flex-col md: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">
+          <button className="ml-3 shrink-0  md:text-2xl">
             <Link to="/" className="hover:text-sky-300 active:text-purple-500">
               Travel Report
             </Link>
           </button>
           <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"
+              className="ml-10 focus:outline-none focus:border-y-4 focus:border-l-4 focus:border-sky-500 w-3/5 md:w-4/5 border-y-4 border-l-4 border-sky-300 pl-9 rounded-l-full focus:border-0"
               onChange={handleChange}
             />
-            <button className="shrink-0 bg-white border-y-4  border-r-4 border-sky-500 rounded-r-full pr-4">
+            <button className="whitespace-nowrap bg-white border-y-4  border-r-4 border-sky-500 rounded-r-full pr-4">
               검색
             </button>
           </div>

frontend/src/home/theme.tsx

-import React, { MouseEventHandler } from "react";
+import React, { MouseEventHandler, useState } from "react";
 
 type ThemeProps = {
   handleClick: MouseEventHandler;
 };
 
 export default function Theme({ handleClick }: ThemeProps) {
+  const [active, setActive] = useState(0);
+
+  const onactive = "whitespace-nowrap px-5 text-sky-300 ";
+  const offactive = "whitespace-nowrap px-5 ";
+
+  const clickActive = (a: number) => {
+    setActive(a);
+  };
+
   return (
-    <div className="overflow-x-auto flex rounded md:justify-center py-2 border-b-2 divide-x-2">
+    <div className="overflow-x-auto flex rounded py-2 md:p-2 border-b-2 divide-x-2">
+      <div onClick={() => clickActive(1)}>
         <button
           id={"surfing"}
           onClick={handleClick}
-        className="shrink-0 px-5 hover:text-sky-300 "
+          className={active === 1 ? onactive : offactive}
         >
           서핑
         </button>
+      </div>
+      <div onClick={() => clickActive(2)}>
         <button
           id={"activity"}
           onClick={handleClick}
-        className="shrink-0 px-5 hover:text-sky-300"
+          className={active === 2 ? onactive : offactive}
         >
           액티비티
         </button>
+      </div>
+      <div onClick={() => clickActive(3)}>
         <button
           id={"camping"}
           onClick={handleClick}
-        className="shrink-0 px-5 hover:text-sky-300 "
+          className={active === 3 ? onactive : offactive}
         >
           캠핑
         </button>
+      </div>
+      <div onClick={() => clickActive(4)}>
         <button
           id={"skiing"}
           onClick={handleClick}
-        className="shrink-0 px-5 hover:text-sky-300"
+          className={active === 4 ? onactive : offactive}
         >
           스키
         </button>
+      </div>
+      <div onClick={() => clickActive(5)}>
         <button
           id={"boat"}
           onClick={handleClick}
-        className="shrink-0 px-5 hover:text-sky-300"
+          className={active === 5 ? onactive : offactive}
         >
           보트
         </button>
+      </div>
+      <div onClick={() => clickActive(6)}>
         <button
           id={"desert"}
           onClick={handleClick}
-        className="shrink-0 px-5 hover:text-sky-300"
+          className={active === 6 ? onactive : offactive}
         >
           사막
         </button>
+      </div>
+      <div onClick={() => clickActive(7)}>
         <button
           id={"golf"}
           onClick={handleClick}
-        className="shrink-0 px-5 hover:text-sky-300"
+          className={active === 7 ? onactive : offactive}
         >
           골프
         </button>
+      </div>
+      <div onClick={() => clickActive(8)}>
         <button
           id={"cave"}
           onClick={handleClick}
-        className="shrink-0 px-5 hover:text-sky-300"
+          className={active === 8 ? onactive : offactive}
         >
           동굴
         </button>
+      </div>
+      <div onClick={() => clickActive(9)}>
         <button
           id={"history"}
           onClick={handleClick}
-        className="shrink-0 px-5 hover:text-sky-300"
+          className={active === 9 ? onactive : offactive}
         >
           문화재
         </button>
+      </div>
+      <div onClick={() => clickActive(10)}>
         <button
           id={"zoo"}
           onClick={handleClick}
-        className="shrink-0 px-5 hover:text-sky-300"
+          className={active === 10 ? onactive : offactive}
         >
           동물원
         </button>
+      </div>
+      <div onClick={() => clickActive(11)}>
         <button
           id={"cycling"}
           onClick={handleClick}
-        className="shrink-0 px-5 hover:text-sky-300"
+          className={active === 11 ? onactive : offactive}
         >
           사이클링
         </button>
       </div>
+    </div>
   );
 }

frontend/src/pages/citylist.tsx

-import React, { MouseEventHandler } from "react";
+import React, { MouseEventHandler, useState } from "react";
 
 type CityProps = {
   handleClick: MouseEventHandler;
 };
 
 export default function Citylist({ handleClick }: CityProps) {
+  const [active, setActive] = useState(0);
+
+  const onactive = "text-start  px-5 py-2 underline whitespace-nowrap";
+  const offactive = "text-start  px-5 py-2 whitespace-nowrap";
+
+  const clickActive = (a: number) => {
+    setActive(a);
+  };
+
   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 whitespace-nowrap">
         도시
       </div>
+      <div onClick={() => clickActive(1)}>
         <button
           id={"Seoul"}
           onClick={handleClick}
-        className="text-start  px-5 py-2 hover:underline whitespace-nowrap"
+          className={active === 1 ? onactive : offactive}
         >
           서울
         </button>
+      </div>
+      <div onClick={() => clickActive(2)}>
         <button
           id={"Busan"}
           onClick={handleClick}
-        className="text-start px-5 py-2 hover:underline whitespace-nowrap"
+          className={active === 2 ? onactive : offactive}
         >
           부산
         </button>
+      </div>
+      <div onClick={() => clickActive(3)}>
         <button
           id={"Incheon"}
           onClick={handleClick}
-        className="text-start px-5 py-2 hover:underline whitespace-nowrap"
+          className={active === 3 ? onactive : offactive}
         >
           인천
         </button>
+      </div>
+      <div onClick={() => clickActive(4)}>
         <button
           id={"Daegoo"}
           onClick={handleClick}
-        className="text-start px-5 py-2 hover:underline whitespace-nowrap"
+          className={active === 4 ? onactive : offactive}
         >
           대구
         </button>
+      </div>
+      <div onClick={() => clickActive(5)}>
         <button
           id={"Gwangjoo"}
           onClick={handleClick}
-        className="text-start px-5 py-2 hover:underline whitespace-nowrap"
+          className={active === 5 ? onactive : offactive}
         >
           광주
         </button>
+      </div>
+      <div onClick={() => clickActive(6)}>
         <button
           id={"Daejeon"}
           onClick={handleClick}
-        className="text-start px-5 py-2 hover:underline whitespace-nowrap"
+          className={active === 6 ? onactive : offactive}
         >
           대전
         </button>
+      </div>
+      <div onClick={() => clickActive(7)}>
         <button
           id={"Woolsan"}
           onClick={handleClick}
-        className="text-start px-5 py-2 hover:underline whitespace-nowrap"
+          className={active === 7 ? onactive : offactive}
         >
           울산
         </button>
+      </div>
+      <div onClick={() => clickActive(8)}>
         <button
           id={"Sejong"}
           onClick={handleClick}
-        className="text-start px-5 py-2 hover:underline whitespace-nowrap"
+          className={active === 8 ? onactive : offactive}
         >
           세종
         </button>
+      </div>
+      <div onClick={() => clickActive(9)}>
         <button
           id={"Dokdo"}
           onClick={handleClick}
-        className="text-start px-5 py-2 hover:underline whitespace-nowrap"
+          className={active === 9 ? onactive : offactive}
         >
           독도
         </button>
+      </div>
+      <div onClick={() => clickActive(10)}>
         <button
           id={"Jeju"}
           onClick={handleClick}
-        className="text-start px-5 py-2 hover:underline whitespace-nowrap"
+          className={active === 10 ? onactive : offactive}
         >
           제주
         </button>
-      {/* citylist */}
+      </div>
     </div>
     // Citylist Page
   );

frontend/src/types/index.tsx

@@ -39,7 +39,8 @@ export interface SignupUser {
 export interface Profile {
   _id: string;
   email: string;
-  fileInfo: {
+  name: string;
+  avatar: {
     originalfilename: string;
     newfilename: string;
     picturepath: string;

src/controllers/fileinfo.controller.ts

@@ -4,7 +4,11 @@ import { TypedRequest } from "../types";
 
 export const uploadFile = asyncWrap(async (reqExp, res, next) => {
   const req = reqExp as TypedRequest;
-  const form = formidable({ multiples: false, uploadDir: "uploads" });
+  const form = formidable({
+    multiples: false,
+    uploadDir: "uploads",
+    keepExtensions: true,
+  });
 
   await new Promise((resolve, reject) => {
     form.parse(req, (err, fields, files) => {
@@ -25,7 +29,11 @@ export const uploadFile = asyncWrap(async (reqExp, res, next) => {
 
 export const uploadFiles = asyncWrap(async (reqExp, res, next) => {
   const req = reqExp as TypedRequest;
-  const form = formidable({ multiples: true, uploadDir: "uploads" });
+  const form = formidable({
+    multiples: true,
+    uploadDir: "uploads",
+    keepExtensions: true,
+  });
 
   await new Promise((resolve, reject) => {
     form.parse(req, (err, fields, files) => {

src/db/index.ts

 export * as roleDb from "./role.db";
 export * as postDb from "./post.db";
 export * as userDb from "./user.db";
-export * as mainimgDb from "./mainimg.db"
\ No newline at end of file
+export * as mainimgDb from "./mainimg.db";