diff --git a/frontend/src/auth/signup.tsx b/frontend/src/auth/signup.tsx
index c08d1907c92d431cb3e1c3af8737b7db26acad6b..570734852b02e2f218a8e4ed64b9fec597c13c39 100644
--- a/frontend/src/auth/signup.tsx
+++ b/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}
diff --git a/frontend/src/board/board.tsx b/frontend/src/board/board.tsx
index 2f1c7865c5b3bb0321e2e4f787ef6440809da97f..10a050c57b82dc2e0f3c4de1f01bb251c04ea8fc 100644
--- a/frontend/src/board/board.tsx
+++ b/frontend/src/board/board.tsx
@@ -1,8 +1,9 @@
 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} />
             ))}
diff --git a/frontend/src/home/body.tsx b/frontend/src/home/body.tsx
index a3be100083d390a158592ba35bf0ad4a5a2ef1f9..4ae59e2a04b77b72f95588152ec9ce4d9b1d77f6 100644
--- a/frontend/src/home/body.tsx
+++ b/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}`);
diff --git a/frontend/src/home/header.tsx b/frontend/src/home/header.tsx
index ff3c9c08dcec4f89921e3476ab8c0c33b771608f..f0be7f926c27b2b5a2763c2af55607c40c5f003a 100644
--- a/frontend/src/home/header.tsx
+++ b/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>
diff --git a/frontend/src/home/theme.tsx b/frontend/src/home/theme.tsx
index 1b70b00b1422d5577092b8ca3bbfab542c8638d3..058ed3915f5095f5ca7bcee28fca5d3d348add08 100644
--- a/frontend/src/home/theme.tsx
+++ b/frontend/src/home/theme.tsx
@@ -1,89 +1,120 @@
-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">
-      <button
-        id={"surfing"}
-        onClick={handleClick}
-        className="shrink-0 px-5 hover:text-sky-300 "
-      >
-        서핑
-      </button>
-      <button
-        id={"activity"}
-        onClick={handleClick}
-        className="shrink-0 px-5 hover:text-sky-300"
-      >
-        액티비티
-      </button>
-      <button
-        id={"camping"}
-        onClick={handleClick}
-        className="shrink-0 px-5 hover:text-sky-300 "
-      >
-        캠핑
-      </button>
-      <button
-        id={"skiing"}
-        onClick={handleClick}
-        className="shrink-0 px-5 hover:text-sky-300"
-      >
-        스키
-      </button>
-      <button
-        id={"boat"}
-        onClick={handleClick}
-        className="shrink-0 px-5 hover:text-sky-300"
-      >
-        보트
-      </button>
-      <button
-        id={"desert"}
-        onClick={handleClick}
-        className="shrink-0 px-5 hover:text-sky-300"
-      >
-        사막
-      </button>
-      <button
-        id={"golf"}
-        onClick={handleClick}
-        className="shrink-0 px-5 hover:text-sky-300"
-      >
-        골프
-      </button>
-      <button
-        id={"cave"}
-        onClick={handleClick}
-        className="shrink-0 px-5 hover:text-sky-300"
-      >
-        동굴
-      </button>
-      <button
-        id={"history"}
-        onClick={handleClick}
-        className="shrink-0 px-5 hover:text-sky-300"
-      >
-        문화재
-      </button>
-      <button
-        id={"zoo"}
-        onClick={handleClick}
-        className="shrink-0 px-5 hover:text-sky-300"
-      >
-        동물원
-      </button>
-      <button
-        id={"cycling"}
-        onClick={handleClick}
-        className="shrink-0 px-5 hover:text-sky-300"
-      >
-        사이클링
-      </button>
+    <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={active === 1 ? onactive : offactive}
+        >
+          서핑
+        </button>
+      </div>
+      <div onClick={() => clickActive(2)}>
+        <button
+          id={"activity"}
+          onClick={handleClick}
+          className={active === 2 ? onactive : offactive}
+        >
+          액티비티
+        </button>
+      </div>
+      <div onClick={() => clickActive(3)}>
+        <button
+          id={"camping"}
+          onClick={handleClick}
+          className={active === 3 ? onactive : offactive}
+        >
+          캠핑
+        </button>
+      </div>
+      <div onClick={() => clickActive(4)}>
+        <button
+          id={"skiing"}
+          onClick={handleClick}
+          className={active === 4 ? onactive : offactive}
+        >
+          스키
+        </button>
+      </div>
+      <div onClick={() => clickActive(5)}>
+        <button
+          id={"boat"}
+          onClick={handleClick}
+          className={active === 5 ? onactive : offactive}
+        >
+          보트
+        </button>
+      </div>
+      <div onClick={() => clickActive(6)}>
+        <button
+          id={"desert"}
+          onClick={handleClick}
+          className={active === 6 ? onactive : offactive}
+        >
+          사막
+        </button>
+      </div>
+      <div onClick={() => clickActive(7)}>
+        <button
+          id={"golf"}
+          onClick={handleClick}
+          className={active === 7 ? onactive : offactive}
+        >
+          골프
+        </button>
+      </div>
+      <div onClick={() => clickActive(8)}>
+        <button
+          id={"cave"}
+          onClick={handleClick}
+          className={active === 8 ? onactive : offactive}
+        >
+          동굴
+        </button>
+      </div>
+      <div onClick={() => clickActive(9)}>
+        <button
+          id={"history"}
+          onClick={handleClick}
+          className={active === 9 ? onactive : offactive}
+        >
+          문화재
+        </button>
+      </div>
+      <div onClick={() => clickActive(10)}>
+        <button
+          id={"zoo"}
+          onClick={handleClick}
+          className={active === 10 ? onactive : offactive}
+        >
+          동물원
+        </button>
+      </div>
+      <div onClick={() => clickActive(11)}>
+        <button
+          id={"cycling"}
+          onClick={handleClick}
+          className={active === 11 ? onactive : offactive}
+        >
+          사이클링
+        </button>
+      </div>
     </div>
   );
 }
diff --git a/frontend/src/pages/citylist.tsx b/frontend/src/pages/citylist.tsx
index a6fa3de76f845f0c3d986759106542e28f1e94d0..7f498db54a301099f1b5df42b8b8e123bd9110c6 100644
--- a/frontend/src/pages/citylist.tsx
+++ b/frontend/src/pages/citylist.tsx
@@ -1,86 +1,114 @@
-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>
-      <button
-        id={"Seoul"}
-        onClick={handleClick}
-        className="text-start  px-5 py-2 hover:underline whitespace-nowrap"
-      >
-        서울
-      </button>
-      <button
-        id={"Busan"}
-        onClick={handleClick}
-        className="text-start px-5 py-2 hover:underline whitespace-nowrap"
-      >
-        부산
-      </button>
-      <button
-        id={"Incheon"}
-        onClick={handleClick}
-        className="text-start px-5 py-2 hover:underline whitespace-nowrap"
-      >
-        인천
-      </button>
-      <button
-        id={"Daegoo"}
-        onClick={handleClick}
-        className="text-start px-5 py-2 hover:underline whitespace-nowrap"
-      >
-        대구
-      </button>
-      <button
-        id={"Gwangjoo"}
-        onClick={handleClick}
-        className="text-start px-5 py-2 hover:underline whitespace-nowrap"
-      >
-        광주
-      </button>
-      <button
-        id={"Daejeon"}
-        onClick={handleClick}
-        className="text-start px-5 py-2 hover:underline whitespace-nowrap"
-      >
-        대전
-      </button>
-      <button
-        id={"Woolsan"}
-        onClick={handleClick}
-        className="text-start px-5 py-2 hover:underline whitespace-nowrap"
-      >
-        울산
-      </button>
-      <button
-        id={"Sejong"}
-        onClick={handleClick}
-        className="text-start px-5 py-2 hover:underline whitespace-nowrap"
-      >
-        세종
-      </button>
-      <button
-        id={"Dokdo"}
-        onClick={handleClick}
-        className="text-start px-5 py-2 hover:underline whitespace-nowrap"
-      >
-        독도
-      </button>
-      <button
-        id={"Jeju"}
-        onClick={handleClick}
-        className="text-start px-5 py-2 hover:underline whitespace-nowrap"
-      >
-        제주
-      </button>
-      {/* citylist */}
+      <div onClick={() => clickActive(1)}>
+        <button
+          id={"Seoul"}
+          onClick={handleClick}
+          className={active === 1 ? onactive : offactive}
+        >
+          서울
+        </button>
+      </div>
+      <div onClick={() => clickActive(2)}>
+        <button
+          id={"Busan"}
+          onClick={handleClick}
+          className={active === 2 ? onactive : offactive}
+        >
+          부산
+        </button>
+      </div>
+      <div onClick={() => clickActive(3)}>
+        <button
+          id={"Incheon"}
+          onClick={handleClick}
+          className={active === 3 ? onactive : offactive}
+        >
+          인천
+        </button>
+      </div>
+      <div onClick={() => clickActive(4)}>
+        <button
+          id={"Daegoo"}
+          onClick={handleClick}
+          className={active === 4 ? onactive : offactive}
+        >
+          대구
+        </button>
+      </div>
+      <div onClick={() => clickActive(5)}>
+        <button
+          id={"Gwangjoo"}
+          onClick={handleClick}
+          className={active === 5 ? onactive : offactive}
+        >
+          광주
+        </button>
+      </div>
+      <div onClick={() => clickActive(6)}>
+        <button
+          id={"Daejeon"}
+          onClick={handleClick}
+          className={active === 6 ? onactive : offactive}
+        >
+          대전
+        </button>
+      </div>
+      <div onClick={() => clickActive(7)}>
+        <button
+          id={"Woolsan"}
+          onClick={handleClick}
+          className={active === 7 ? onactive : offactive}
+        >
+          울산
+        </button>
+      </div>
+      <div onClick={() => clickActive(8)}>
+        <button
+          id={"Sejong"}
+          onClick={handleClick}
+          className={active === 8 ? onactive : offactive}
+        >
+          세종
+        </button>
+      </div>
+      <div onClick={() => clickActive(9)}>
+        <button
+          id={"Dokdo"}
+          onClick={handleClick}
+          className={active === 9 ? onactive : offactive}
+        >
+          독도
+        </button>
+      </div>
+      <div onClick={() => clickActive(10)}>
+        <button
+          id={"Jeju"}
+          onClick={handleClick}
+          className={active === 10 ? onactive : offactive}
+        >
+          제주
+        </button>
+      </div>
     </div>
     // Citylist Page
   );
diff --git a/frontend/src/types/index.tsx b/frontend/src/types/index.tsx
index a4617babb5c9a57d4a569a1f07c2bc3f06ff91b2..48ee863c6a3aa2d3c7a94d337b9530fee6e8462f 100644
--- a/frontend/src/types/index.tsx
+++ b/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;
diff --git a/src/controllers/fileinfo.controller.ts b/src/controllers/fileinfo.controller.ts
index a3d1c435950c8bc3dc95028830431aaab84f38f6..330b21c0cef35c7f1b42cf6cbd459ca5c6a989ac 100644
--- a/src/controllers/fileinfo.controller.ts
+++ b/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) => {
diff --git a/src/db/index.ts b/src/db/index.ts
index b714af5b043b5377b84b3ba8e213d349e63d09a8..b4f157f405dc90a9f347269d84915fbe69e0bb93 100644
--- a/src/db/index.ts
+++ b/src/db/index.ts
@@ -1,4 +1,4 @@
 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";