diff --git a/front/package.json b/front/package.json
index d8c4321..80fb6d2 100644
--- a/front/package.json
+++ b/front/package.json
@@ -1,59 +1,67 @@
 {
-  "name": "front",
-  "version": "0.1.0",
-  "private": true,
-  "dependencies": {
-    "@emotion/react": "^11.9.0",
-    "@emotion/styled": "^11.8.1",
-    "@material-ui/core": "^4.12.4",
-    "@material-ui/icons": "^4.11.3",
-    "@mui/icons-material": "^5.8.3",
-    "@mui/material": "^5.8.2",
-    "@mui/utils": "^5.8.0",
-    "@testing-library/jest-dom": "^5.16.4",
-    "@testing-library/react": "^13.3.0",
-    "@testing-library/user-event": "^13.5.0",
-    "axios": "^0.27.2",
-    "lodash": "^4.17.21",
-    "react": "^18.1.0",
-    "react-burger-menu": "^3.0.8",
-    "react-dom": "^18.1.0",
-    "react-dropzone": "^14.2.1",
-    "react-router-dom": "^6.3.0",
-    "react-scripts": "5.0.1",
-    "recoil": "^0.7.3-alpha.2",
-    "styled-components": "^5.3.5",
-    "styled-reset": "^4.4.1",
-    "swiper": "^8.2.2",
-    "web-vitals": "^2.1.4"
-  },
-  "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
-  },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  },
-  "devDependencies": {
-    "eslint": "^8.16.0",
-    "eslint-config-prettier": "^8.5.0",
-    "prettier": "^2.6.2"
-  }
+    "name": "front",
+    "version": "0.1.0",
+    "private": true,
+    "dependencies": {
+        "@emotion/react": "^11.9.0",
+        "@emotion/styled": "^11.8.1",
+        "@material-ui/core": "^4.12.4",
+        "@material-ui/icons": "^4.11.3",
+        "@mui/icons-material": "^5.8.3",
+        "@mui/material": "^5.8.2",
+        "@mui/utils": "^5.8.0",
+        "@testing-library/jest-dom": "^5.16.4",
+        "@testing-library/react": "^13.3.0",
+        "@testing-library/user-event": "^13.5.0",
+        "axios": "^0.27.2",
+        "lodash": "^4.17.21",
+        "moment": "^2.29.3",
+        "react": "^18.1.0",
+        "react-burger-menu": "^3.0.8",
+        "react-card-flip": "^1.1.5",
+        "react-dom": "^18.1.0",
+        "react-dropzone": "^14.2.1",
+        "react-flippy": "^1.1.0",
+        "react-hook-form": "^7.32.2",
+        "react-lottie": "^1.2.3",
+        "react-router-dom": "^6.3.0",
+        "react-scripts": "5.0.1",
+        "recoil": "^0.7.3",
+        "recoil-persist": "^4.2.0",
+        "styled-components": "^5.3.5",
+        "styled-reset": "^4.4.1",
+        "sweetalert": "^2.1.2",
+        "sweetalert2": "^11.4.17",
+        "swiper": "^8.2.4",
+        "web-vitals": "^2.1.4"
+    },
+    "scripts": {
+        "start": "react-scripts start",
+        "build": "react-scripts build",
+        "test": "react-scripts test",
+        "eject": "react-scripts eject"
+    },
+    "eslintConfig": {
+        "extends": [
+            "react-app",
+            "react-app/jest"
+        ]
+    },
+    "browserslist": {
+        "production": [
+            ">0.2%",
+            "not dead",
+            "not op_mini all"
+        ],
+        "development": [
+            "last 1 chrome version",
+            "last 1 firefox version",
+            "last 1 safari version"
+        ]
+    },
+    "devDependencies": {
+        "eslint": "^8.16.0",
+        "eslint-config-prettier": "^8.5.0",
+        "prettier": "^2.6.2"
+    }
 }
diff --git a/front/public/index.html b/front/public/index.html
index c2dba52..ffca0fd 100644
--- a/front/public/index.html
+++ b/front/public/index.html
@@ -8,10 +8,6 @@
         <meta name="description" content="Web site created using create-react-app" />
         <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
 
-        <script
-            type="text/javascript"
-            src="//dapi.kakao.com/v2/maps/sdk.js?appkey=d5fc6b7b0327cb7f489de9dd0515b04b"
-        ></script>
         <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
@@ -26,21 +22,15 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-<<<<<<< HEAD
-    <title>React App</title>
-    <script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=b1fa53cd34bf7c78644e64819bead127"></script>
-          <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
-  <body style="margin: 0; padding: 0">
-    <div id="root"></div>
-    <!--
-=======
         <title>React App</title>
+        <script
+            type="text/javascript"
+            src="//dapi.kakao.com/v2/maps/sdk.js?appkey=b1fa53cd34bf7c78644e64819bead127"
+        ></script>
             <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
     <body style="margin: 0; padding: 0">
-        <noscript>You need to enable JavaScript to run this app.</noscript>
         <div id="root"></div>
         <!--
->>>>>>> ff2e6fa16c0bf40d101107b57c87d59cc4ec4f67
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.
 
diff --git a/front/src/App.js b/front/src/App.js
index bf3052d..3f80b10 100644
--- a/front/src/App.js
+++ b/front/src/App.js
@@ -1,81 +1,106 @@
 import React, { useState, useEffect, useReducer, createContext, Suspense, lazy } from 'react';
-import { BrowserRouter as Router, Routes, Route, useLocation } from 'react-router-dom';
+import { BrowserRouter as Router, Routes, Route, useLocation, useNavigate } from 'react-router-dom';
 import { ROUTES } from './Route';
+import Lottie from 'react-lottie';
+import loading from './loading.json';
 
 import * as Api from './api';
 import './App.css';
 import { loginReducer } from './reducer';
 
 import { GlobalStyles } from './styledCompo/GlobalStyle';
+import { useRecoilValue } from 'recoil';
+import { userInfoState, tokenState } from './atom';
 
 const Home = lazy(() => import('./components/home/Home'));
 const Login = lazy(() => import('./components/user/Login'));
 const Signin = lazy(() => import('./components/user/Signin'));
+const Password = lazy(() => import('./components/user/Password'));
 const Mypage = lazy(() => import('./components/mypage/Mypage'));
 const Upload = lazy(() => import('./components/upload/Upload'));
 const UploadResult = lazy(() => import('./components/upload/UploadResult'));
+const BoardUpload = lazy(() => import('./components/board/Board'));
+const Board = lazy(() => import('./components/board/Board'));
+const EachBoard = lazy(() => import('./components/board/EachBoard'));
 
 export const UserStateContext = createContext(null);
 export const DispatchContext = createContext(null);
 
 function App() {
+    const navigate = useNavigate();
     const location = useLocation();
-
+    const user = useRecoilValue(tokenState);
     useEffect(() => {
         window.scrollTo({ top: 0 });
     }, [location]);
-    // useReducer 훅을 통해 userState 상태와 dispatch함수를 생성함.
-    const [userState, dispatch] = useReducer(loginReducer, {
-        user: null,
-    });
 
-    // 아래의 fetchCurrentUser 함수가 실행된 다음에 컴포넌트가 구현되도록 함.
-    // 아래 코드를 보면 isFetchCompleted 가 true여야 컴포넌트가 구현됨.
     const [isFetchCompleted, setIsFetchCompleted] = useState(false);
 
-    const fetchCurrentUser = async () => {
-        try {
-            // 이전에 발급받은 토큰이 있다면, 이를 가지고 유저 정보를 받아옴.
-            const res = await Api.get('current/info');
-            const currentUser = res.data;
-            console.log(currentUser);
+    // const fetchCurrentUser = async () => {
+    //     try {
+    //         // 이전에 발급받은 토큰이 있다면, 이를 가지고 유저 정보를 받아옴.
+    //         const res = await Api.get('users/current/info');
+    //         const currentUser = res.data;
+    //         console.log('currentUser:', currentUser);
 
-            // dispatch 함수를 통해 로그인 성공 상태로 만듦.
-            dispatch({
-                type: 'LOGIN_SUCCESS',
-                payload: currentUser,
-            });
-            console.log('%c sessionStorage에 토큰 있음.', 'color: #d93d1a;');
-        } catch (error) {
-            console.log(error);
-            console.log('%c SessionStorage에 토큰 없음.', 'color: #d93d1a;');
-        }
-        // fetchCurrentUser 과정이 끝났으므로, isFetchCompleted 상태를 true로 바꿔줌
-        setIsFetchCompleted(true);
-    };
+    //         console.log('%c sessionStorage에 토큰 있음.', 'color: #d93d1a;');
+    //     } catch (error) {
+    //         console.log(error);
+    //         console.log('%c SessionStorage에 토큰 없음.', 'color: #d93d1a;');
+    //     }
+    //     // fetchCurrentUser 과정이 끝났으므로, isFetchCompleted 상태를 true로 바꿔줌
+    //     setIsFetchCompleted(true);
+    // };
 
     // useEffect함수를 통해 fetchCurrentUser 함수를 실행함.
     // useEffect(() => {
     //     fetchCurrentUser();
     // }, []);
 
-    // if (!isFetchCompleted) {
-    //     return 'loading...';
-    // }
-
+    const defaultOptions = {
+        loop: true,
+        autoplay: true,
+        animationData: loading,
+        rendererSettings: {
+            preserveAspectRatio: 'xMidYMid slice',
+        },
+    };
     return (
         <>
-            <Suspense fallback={<div>Loading...</div>}>
-                <Routes>
-                    <Route path="/" exact element={<Home />} />
-                    <Route path="/login" element={<Login />} />
-                    <Route path="/mypage" element={<Mypage />} />
-                    <Route path="/register" element={<Signin />} />
-                    <Route path="/upload" element={<Upload />} />
-                    <Route path="/uploadResult" element={<UploadResult />} />
-                    <Route path="*" element={<Home />} />
-                </Routes>
-            </Suspense>
+            {user ? (
+                <Suspense
+                    fallback={<Lottie options={defaultOptions} height={100} width={100}></Lottie>}
+                >
+                    <Routes>
+                        <Route path="/" exact element={<Home />} />
+                        <Route path="/login" element={<Login />} />
+                        <Route path="/mypage" element={<Mypage />} />
+                        <Route path="/register" element={<Signin />} />
+                        <Route path="/upload" element={<Upload />} />
+                        <Route path="/uploadResult" element={<UploadResult />} />
+                        <Route path="/boardUpload" element={<BoardUpload />} />
+                        <Route path="/board" element={<Board />} />
+                        <Route path="/Password" element={<Password />} />
+                        <Route path="/board/:board_id" element={<EachBoard />} />
+                        <Route path="*" element={<Home />} />
+                    </Routes>
+                </Suspense>
+            ) : (
+                <Suspense
+                    fallback={<Lottie options={defaultOptions} height={100} width={100}></Lottie>}
+                >
+                    <Routes>
+                        <Route path="/" exact element={<Home />} />
+                        <Route path="/login" element={<Login />} />
+                        <Route path="/register" element={<Signin />} />
+                        <Route path="/upload" element={<Upload />} />
+                        <Route path="/uploadResult" element={<UploadResult />} />
+                        <Route path="/boardUpload" element={<BoardUpload />} />
+                        <Route path="/Board" element={<Board />} />
+                        <Route path="*" element={<Home />} />
+                    </Routes>
+                </Suspense>
+            )}
         </>
     );
 }
diff --git a/front/src/api.js b/front/src/api.js
index dfe3b5e..626e30c 100644
--- a/front/src/api.js
+++ b/front/src/api.js
@@ -1,69 +1,93 @@
-import axios from "axios"
+import axios from 'axios';
 
-const BACKEND_PORT_NUMBER = "5001";
-const serverUrl =
-  "http://" + window.location.hostname + ":" + BACKEND_PORT_NUMBER + "/"
+const BACKEND_PORT_NUMBER = '5001';
+const serverUrl = 'http://' + window.location.hostname + ':' + BACKEND_PORT_NUMBER + '/';
 
 // 어느 요청이나 공통인 baseUrl이므로 구성 기본값으로 설정.
-axios.defaults.baseURL = serverUrl
+axios.defaults.baseURL = serverUrl;
 
-async function get(endpoint, params = "") {
-  console.log(
-    `%cGET 요청 ${serverUrl + endpoint + "/" + params}`,
-    "color: #a25cd1;"
-  )
-    
-  console.log(sessionStorage.getItem("userToken"))
+async function get(endpoint, params = '') {
+    console.log(`%cGET 요청 ${serverUrl + endpoint + '/' + params}`, 'color: #a25cd1;');
 
-  return axios.get(endpoint + "/" + params, {
-    // JWT 토큰을 헤더에 담아 백엔드 서버에 보냄.
-    headers: {
-      Authorization: `Bearer ${sessionStorage.getItem("userToken")}`,
-    },
-  })
+    console.log(sessionStorage.getItem('userToken'));
+
+    return axios.get(endpoint + '/' + params, {
+        // JWT 토큰을 헤더에 담아 백엔드 서버에 보냄.
+        headers: {
+            Authorization: `Bearer ${sessionStorage.getItem('userToken')}`,
+        },
+    });
 }
 
 async function post(endpoint, data) {
-  // JSON.stringify 함수: Javascript 객체를 JSON 형태로 변환함.
-  // 예시: {name: "Kim"} => {"name": "Kim"}
-  const bodyData = JSON.stringify(data)
-  console.log(`%cPOST 요청: ${serverUrl + endpoint}`, "color: #296aba;")
-  console.log(`%cPOST 요청 데이터: ${bodyData}`, "color: #296aba;")
+    // JSON.stringify 함수: Javascript 객체를 JSON 형태로 변환함.
+    // 예시: {name: "Kim"} => {"name": "Kim"}
+    const bodyData = JSON.stringify(data);
+    console.log(`%cPOST 요청: ${serverUrl + endpoint}`, 'color: #296aba;');
+    console.log(`%cPOST 요청 데이터: ${bodyData}`, 'color: #296aba;');
 
-  return axios.post(endpoint, bodyData, {
-    headers: {
-      "Content-Type": "application/json",
-      Authorization: `Bearer ${sessionStorage.getItem("userToken")}`,
-    },
-  })
+    return axios.post(endpoint, bodyData, {
+        headers: {
+            'Content-Type': 'application/json',
+            Authorization: `Bearer ${sessionStorage.getItem('userToken')}`,
+        },
+    });
 }
 
 async function put(endpoint, data) {
-  // JSON.stringify 함수: Javascript 객체를 JSON 형태로 변환함.
-  // 예시: {name: "Kim"} => {"name": "Kim"}
-  const bodyData = JSON.stringify(data)
-  console.log(`%cPUT 요청: ${serverUrl + endpoint}`, "color: #059c4b;")
-  console.log(`%cPUT 요청 데이터: ${bodyData}`, "color: #059c4b;")
+    // JSON.stringify 함수: Javascript 객체를 JSON 형태로 변환함.
+    // 예시: {name: "Kim"} => {"name": "Kim"}
+    const bodyData = JSON.stringify(data);
+    console.log(`%cPUT 요청: ${serverUrl + endpoint}`, 'color: #059c4b;');
+    console.log(`%cPUT 요청 데이터: ${bodyData}`, 'color: #059c4b;');
+    console.log('endpoint:', endpoint);
+
+    return axios.put(endpoint, bodyData, {
+        headers: {
+            'Content-Type': 'application/json',
+            Authorization: `Bearer ${sessionStorage.getItem('userToken')}`,
+        },
+    });
+}
+
+async function sendImage(endpoint, formData) {
+    const bodyData = JSON.stringify(formData);
+    console.log(`%cPOST 요청: ${serverUrl + endpoint}`, 'color: #296aba;');
+    console.log(`%cPOST 요청 데이터: ${bodyData}`, 'color: #296aba;');
+    return axios.post(serverUrl + endpoint, formData, {
+        headers: {
+            'Content-type': 'multipart/form-data',
+            Authorization: `Bearer ${sessionStorage.getItem('userToken')}`,
+        },
+    });
+}
+
+async function getQuery(endpoint, data) {
+    // JSON.stringify 함수: Javascript 객체를 JSON 형태로 변환함.
+    // 예시: {name: "Kim"} => {"name": "Kim"}
+    const bodyData = JSON.stringify(data);
+    console.log(`%cPOST 요청: ${serverUrl + endpoint}`, 'color: #296aba;');
+    console.log(`%cPOST 요청 데이터: ${bodyData}`, 'color: #296aba;');
 
-  return axios.put(endpoint, bodyData, {
-    headers: {
-      "Content-Type": "application/json",
-      Authorization: `Bearer ${sessionStorage.getItem("userToken")}`,
-    },
-  })
+    return axios.post(endpoint, bodyData, {
+        headers: {
+            'Content-Type': 'application/json',
+            Authorization: `Bearer ${sessionStorage.getItem('userToken')}`,
+        },
+    });
 }
 
 // 아래 함수명에 관해, delete 단어는 자바스크립트의 reserved 단어이기에,
-// 여기서는 우선 delete 대신 del로 쓰고 아래 export 시에 delete로 alias 함.
-async function del(endpoint, params = "") {
-  console.log(`DELETE 요청 ${serverUrl + endpoint + "/" + params}`)
-  return axios.delete(endpoint + "/" + params, {
-    headers: {
-      Authorization: `Bearer ${sessionStorage.getItem("userToken")}`,
-    },
-  })
+// 여기서는 우선 delete 대신 del로 쓰고 아래 export 시에 delete로 alias 함
+async function del(endpoint, params = '') {
+    console.log(`DELETE 요청 ${serverUrl + endpoint + '/' + params}`);
+    return axios.delete(endpoint + '/' + params, {
+        headers: {
+            Authorization: `Bearer ${sessionStorage.getItem('userToken')}`,
+        },
+    });
 }
 
 // 아래처럼 export한 후, import * as A 방식으로 가져오면,
 // A.get, A.post 로 쓸 수 있음.
-export { get, post, put, del as delete }
+export { get, post, put, del as delete, sendImage, getQuery };
diff --git a/front/src/atom.js b/front/src/atom.js
index e69de29..411a0f0 100644
--- a/front/src/atom.js
+++ b/front/src/atom.js
@@ -0,0 +1,37 @@
+import { atom } from 'recoil';
+import { recoilPersist } from 'recoil-persist';
+
+const { persistAtom } = recoilPersist();
+
+// 유저 로그인시 받는 데이터 전체
+export const userState = atom({
+    key: 'userState',
+    default: { user: null },
+    effects_UNSTABLE: [persistAtom],
+});
+
+// 유저 로그인시 받는 데이터(토큰이 있는)
+export const tokenState = atom({
+    key: 'tokenState',
+    default: { token: null },
+    // effects_UNSTABLE: [persistAtom],
+});
+
+// 유저 정보
+export const userInfoState = atom({
+    key: 'userInfoState',
+    default: undefined,
+    effects_UNSTABLE: [persistAtom],
+});
+
+// 모든 게시글 정보
+export const allBoardContentState = atom({
+    key: 'allBoardContentState',
+    default: [],
+});
+
+// 검색 랜드마크 정보
+export const searchLandmarkInfoState = atom({
+    key: 'searchLandmarkInfoState',
+    default: [],
+});
diff --git a/front/src/components/Footer.js b/front/src/components/Footer.js
index 019e7f2..d5dd0d0 100644
--- a/front/src/components/Footer.js
+++ b/front/src/components/Footer.js
@@ -18,16 +18,6 @@ const Container = styled.footer`
 `;
 
 function Footer() {
-<<<<<<< HEAD
-  return (
-    <>
-      <Container>
-        Copyright{new Date().getFullYear()} by team-ai-project. All Page content is property of
-        상원 해요
-      </Container>
-    </>
-  );
-=======
     return (
         <>
             <Container>
@@ -36,7 +26,6 @@ function Footer() {
             </Container>
         </>
     );
->>>>>>> ff2e6fa16c0bf40d101107b57c87d59cc4ec4f67
 }
 
 export default Footer;
diff --git a/front/src/components/Menu.js b/front/src/components/Menu.js
index 0378426..ef294f7 100644
--- a/front/src/components/Menu.js
+++ b/front/src/components/Menu.js
@@ -1,6 +1,8 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 import styled from 'styled-components';
+import { useRecoilValue, useSetRecoilState, useRecoilState } from 'recoil';
+import { userInfoState, tokenState, userState } from '../atom';
 
 const StyledMenu = styled.nav`
     display: flex;
@@ -45,20 +47,78 @@ const StyledMenu = styled.nav`
 `;
 
 const Menu = ({ open }) => {
+    const navigate = useNavigate();
+    const [loginState, setLoginState] = useState(false);
+    const userToken = sessionStorage.getItem('userToken');
+
+    const setUserState = useSetRecoilState(userState);
+    const setTokenState = useSetRecoilState(tokenState);
+    const setUserInfostate = useSetRecoilState(userInfoState);
+
+    const [userInfo, setUserInfo] = useRecoilState(userInfoState);
+    const [token, setToken] = useRecoilState(tokenState);
+    const [recoilUser, setRecoilUser] = useRecoilState(userState);
+
+    const stateInitialization = () => {
+        if (!userToken) {
+            setUserState({ user: null });
+            setTokenState({ token: null });
+            setUserInfostate(undefined);
+        } else {
+            setLoginState(true);
+        }
+    };
+    useEffect(stateInitialization, [setTokenState, setUserInfostate, setUserState, userToken]);
+    console.log('loginState', loginState);
+
+    const logout = () => {
+        // sessionStorage 에 저장했던 JWT 토큰을 삭제함.
+        sessionStorage.removeItem('userToken');
+        // dispatch 함수를 이용해 로그아웃함.
+        // dispatch({ type: ‘LOGOUT’ });
+        setRecoilUser(null);
+        setUserInfo(null);
+        setToken(null);
+
+        // 기본 페이지로 돌아감.
+        navigate('/login');
+    };
+
     return (
         <StyledMenu open={open}>
-            <a href="/login">
-                <span role="img" aria-label="about us" />
-                로그인
-            </a>
-            <a href="/register">
-                <span role="img" aria-label="price" />
-                회원가입
-            </a>
-            <a href="/">
-                <span role="img" aria-label="contact" />
-                Contact
-            </a>
+            {loginState ? (
+                <>
+                    {' '}
+                    <a href="/mypage">
+                        <span role="img" aria-label="about us" />
+                        마이페이지
+                    </a>
+                    <a href="/" onClick={logout}>
+                        <span role="img" aria-label="price" />
+                        로그아웃
+                    </a>
+                    <a href="/">
+                        <span role="img" aria-label="contact" />
+                        Contact
+                    </a>
+                </>
+            ) : (
+                <>
+                    {' '}
+                    <a href="/login">
+                        <span role="img" aria-label="about us" />
+                        로그인
+                    </a>
+                    <a href="/register">
+                        <span role="img" aria-label="price" />
+                        회원가입
+                    </a>
+                    <a href="/">
+                        <span role="img" aria-label="contact" />
+                        Contact
+                    </a>
+                </>
+            )}
         </StyledMenu>
     );
 };
diff --git a/front/src/components/board/Board.js b/front/src/components/board/Board.js
new file mode 100644
index 0000000..7675a85
--- /dev/null
+++ b/front/src/components/board/Board.js
@@ -0,0 +1,82 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { useNavigate } from 'react-router-dom';
+import * as API from '../../api';
+import BoardContent from './BoardContent';
+import { Container, Grid } from '@mui/material';
+import {
+    BoardWrapper,
+    BoardSearchContainer,
+    BoardSearchImg,
+    BoardContainer,
+    InputContainer,
+    ToggleButton,
+} from './BoardStyle';
+import { ValidationTextField } from '../upload/MuiCustom';
+import Search from '../../img/Search.png';
+import clear from '../../img/clear.png';
+import { useRecoilState } from 'recoil';
+import { searchLandmarkInfoState } from '../../atom';
+
+const Board = () => {
+    const navigate = useNavigate();
+    const [searchTerm, setSearchTerm] = useState('');
+    const [searchState, setSearchState] = useState(false);
+
+    //검색결과 데이터를 전역으로 저장
+    const [searchResult, setSearchResult] = useRecoilState(searchLandmarkInfoState);
+
+    const searchHandler = async (e) => {
+        e.preventDefault();
+        const res = await API.post(`board/search?keyword=${searchTerm}`);
+        const SearchData = res.data;
+        setSearchResult(SearchData.payloads);
+        setSearchState(true);
+    };
+
+    useEffect(() => {
+        console.log('검색결과', searchResult);
+    }, [searchResult]);
+
+    const clearInput = useRef();
+
+    const clearHandler = () => {
+        setSearchTerm('');
+        clearInput.current.focus();
+        setSearchState(false);
+    };
+
+    return (
+        <>
+            <BoardWrapper>
+                <BoardSearchContainer>
+                    <InputContainer>
+                        <ValidationTextField
+                            id="outlined-basic"
+                            label="검색"
+                            variant="outlined"
+                            value={searchTerm}
+                            onChange={(e) => {
+                                setSearchTerm(e.target.value);
+                            }}
+                            ref={clearInput}
+                            onKeyDown={(e) => {
+                                if (e.key === 'Enter') searchHandler(e);
+                            }}
+                        />
+                        {searchTerm && <ToggleButton src={clear} onClick={clearHandler} />}
+                        <BoardSearchImg src={Search} onClick={searchHandler} />
+                    </InputContainer>
+                </BoardSearchContainer>
+                <BoardContainer>
+                    <Container sx={{ marginTop: 1, flexGrow: 1 }}>
+                        <Grid container>
+                            <BoardContent searchState={searchState} />
+                        </Grid>
+                    </Container>
+                </BoardContainer>
+            </BoardWrapper>
+        </>
+    );
+};
+
+export default Board;
diff --git a/front/src/components/board/BoardContent.js b/front/src/components/board/BoardContent.js
new file mode 100644
index 0000000..0904a2e
--- /dev/null
+++ b/front/src/components/board/BoardContent.js
@@ -0,0 +1,122 @@
+import React, { useState, useEffect, useMemo } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useRecoilValue } from 'recoil';
+import { searchLandmarkInfoState } from '../../atom';
+
+import {
+    BoardContentContainer,
+    ImgContainer,
+    UploadResultContentContainer,
+    UploadResultContentPeopleContainer,
+    UploadResultPeopleImg,
+    UploadResultNameContainer,
+    UploadResultNameImg,
+    UploadResultLocationContainer,
+    UploadResultLocationImg,
+    UploadResultDescriptionContainer,
+    UploadResultDescriptionImg,
+} from './BoardContentStyle';
+import * as API from '../../api';
+
+import description from '../../img/description.png';
+import name from '../../img/name.png';
+import location from '../../img/location.png';
+import Luggage from '../../img/Luggage.png';
+
+const BoardContent = (props) => {
+    const navigate = useNavigate();
+    const [allBoardContent, setAllBoardContent] = useState([]);
+    const searchResult = useRecoilValue(searchLandmarkInfoState);
+
+    useEffect(() => {
+        const getBoardContent = async () => {
+            const res = await API.post('board/list?perPage=50');
+            const content = res.data;
+            setAllBoardContent(content.payloads);
+        };
+        getBoardContent();
+    }, []);
+
+    console.log('searchState', props.searchState);
+    console.log('allBoardContent', allBoardContent);
+
+    return (
+        <>
+            {props.searchState === false
+                ? allBoardContent &&
+                  allBoardContent.map((item, idx) => {
+                      return (
+                          <BoardContentContainer key={idx}>
+                              <ImgContainer
+                                  src={item.landmark_img_id}
+                                  onClick={() =>
+                                      navigate(`/board/${item.board_id}`, {
+                                          state: { allBoardContent },
+                                      })
+                                  }
+                              />
+                              <UploadResultContentContainer>
+                                  <UploadResultNameContainer>
+                                      <UploadResultNameImg src={name} alt={name} />
+                                      랜드마크 이름: {item.landmark_name}
+                                  </UploadResultNameContainer>
+                                  <UploadResultLocationContainer>
+                                      <UploadResultLocationImg src={location} alt={location} />
+                                      랜드마크 주소: {item.location}
+                                  </UploadResultLocationContainer>
+                                  <UploadResultDescriptionContainer>
+                                      <UploadResultDescriptionImg
+                                          src={description}
+                                          alt={description}
+                                      />
+                                      광화문 설명: {item.description}
+                                  </UploadResultDescriptionContainer>
+                              </UploadResultContentContainer>
+                              <UploadResultContentPeopleContainer>
+                                  <UploadResultPeopleImg src={Luggage} />
+                                  24명의 랜드마커들이 다녀갔습니다
+                              </UploadResultContentPeopleContainer>
+                          </BoardContentContainer>
+                      );
+                  })
+                : searchResult &&
+                  searchResult.map((item, idx) => {
+                      return (
+                          <BoardContentContainer key={idx}>
+                              <ImgContainer
+                                  src={item.landmark_img_id}
+                                  onClick={() =>
+                                      navigate(`/board/${item.board_id}`, {
+                                          state: { allBoardContent },
+                                      })
+                                  }
+                              />
+                              <UploadResultContentContainer>
+                                  <UploadResultNameContainer>
+                                      <UploadResultNameImg src={name} alt={name} />
+                                      랜드마크 이름: {item.landmark_name}
+                                  </UploadResultNameContainer>
+                                  <UploadResultLocationContainer>
+                                      <UploadResultLocationImg src={location} alt={location} />
+                                      랜드마크 주소: {item.location}
+                                  </UploadResultLocationContainer>
+                                  <UploadResultDescriptionContainer>
+                                      <UploadResultDescriptionImg
+                                          src={description}
+                                          alt={description}
+                                      />
+                                      광화문 설명: {item.description}
+                                  </UploadResultDescriptionContainer>
+                              </UploadResultContentContainer>
+                              <UploadResultContentPeopleContainer>
+                                  <UploadResultPeopleImg src={Luggage} />
+                                  24명의 랜드마커들이 다녀갔습니다
+                              </UploadResultContentPeopleContainer>
+                          </BoardContentContainer>
+                      );
+                  })}
+        </>
+    );
+};
+
+export default BoardContent;
diff --git a/front/src/components/board/BoardContentStyle.js b/front/src/components/board/BoardContentStyle.js
new file mode 100644
index 0000000..79fa0e8
--- /dev/null
+++ b/front/src/components/board/BoardContentStyle.js
@@ -0,0 +1,112 @@
+import styled from 'styled-components';
+
+export const BoardContentContainer = styled.a`
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    width: 32rem;
+    height: 45rem;
+    margin: 2rem;
+    margin-bottom: 3rem;
+
+    background: #ffffff;
+    box-shadow: 0px 100px 80px rgba(0, 0, 0, 0.02), 0px 64.8148px 46.8519px rgba(0, 0, 0, 0.0151852),
+        0px 38.5185px 25.4815px rgba(0, 0, 0, 0.0121481), 0px 20px 13px rgba(0, 0, 0, 0.01),
+        0px 8.14815px 6.51852px rgba(0, 0, 0, 0.00785185),
+        0px 1.85185px 3.14815px rgba(0, 0, 0, 0.00481481);
+    border-radius: 26px;
+`;
+
+export const ImgContainer = styled.img`
+    width: 28rem;
+    height: 15rem;
+
+    object-fit: cover;
+    border-radius: 3rem;
+    cursor: pointer;
+
+    &:hover {
+        content: '';
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+
+        opacity: 0.7;
+    }
+`;
+
+export const UploadResultContentContainer = styled.section`
+    width: 35rem;
+    height: 15rem;
+    /* margin-bottom: 1rem; */
+    margin-top: 1rem;
+
+    display: flex;
+    flex-direction: column;
+`;
+
+export const UploadResultContentPeopleContainer = styled.section`
+    width: 23rem;
+    height: 3rem;
+
+    margin-left: 5.5rem;
+    margin-top: 2rem;
+    /* background-color: yellow; */
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+`;
+
+export const UploadResultPeopleImg = styled.img`
+    width: 2rem;
+    height: 2rem;
+    margin-left: 4rem;
+`;
+
+export const UploadResultNameContainer = styled.div`
+    width: 45rem;
+    height: 10rem;
+    display: flex;
+    align-items: center;
+    /* background: red; */
+`;
+
+export const UploadResultNameImg = styled.img`
+    width: 3rem;
+    height: 3rem;
+    margin-left: 3.4rem;
+    padding-right: 2rem;
+`;
+
+export const UploadResultLocationContainer = styled.div`
+    width: 45rem;
+    height: 10rem;
+    display: flex;
+    align-items: center;
+    /* background: white; */
+`;
+
+export const UploadResultLocationImg = styled.img`
+    width: 3rem;
+    height: 3rem;
+    margin-left: 3.4rem;
+    padding-right: 2rem;
+`;
+
+export const UploadResultDescriptionContainer = styled.div`
+    width: 45rem;
+    height: 10rem;
+    display: flex;
+    align-items: center;
+    /* background: grey; */
+`;
+
+export const UploadResultDescriptionImg = styled.img`
+    width: 3rem;
+    height: 3rem;
+    margin-left: 3.4rem;
+    padding-right: 2rem;
+`;
diff --git a/front/src/components/board/BoardStyle.js b/front/src/components/board/BoardStyle.js
new file mode 100644
index 0000000..6380ca7
--- /dev/null
+++ b/front/src/components/board/BoardStyle.js
@@ -0,0 +1,73 @@
+import styled from 'styled-components';
+
+export const BoardWrapper = styled.section`
+    align-items: center;
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+
+    min-height: 100vh;
+    min-width: 95vw;
+
+    font-family: 'Jeju Gothic', sans-serif;
+
+    /* background: black; */
+`;
+
+export const BoardSearchContainer = styled.div`
+    align-items: center;
+    display: flex;
+    justify-content: center;
+
+    min-width: 80rem;
+    min-height: 10rem;
+
+    margin-top: 10rem;
+
+    font-family: 'Jeju Gothic', sans-serif;
+
+    /* background: blue; */
+`;
+
+export const InputContainer = styled.div`
+    display: flex;
+
+    width: 80rem;
+    height: 3.5rem;
+
+    margin-top: 10rem;
+
+    font-family: 'Jeju Gothic', sans-serif;
+
+    /* background: blue; */
+`;
+export const ToggleButton = styled.img`
+    margin-top: 1rem;
+    margin-right: 0.2rem;
+    right: 24rem;
+    width: 1.2rem;
+    height: 1.2rem;
+    position: absolute;
+    cursor: pointer;
+    font-family: 'Jeju Gothic', sans-serif;
+`;
+
+export const BoardSearchImg = styled.img`
+    width: 2.3rem;
+    height: 2.3rem;
+
+    margin-left: 1rem;
+    margin-top: 0.5rem;
+    cursor: pointer;
+`;
+
+export const BoardContainer = styled.div`
+    width: 85%;
+    height: auto;
+
+    background: #ffffff;
+    box-shadow: 0px 100px 80px rgba(0, 0, 0, 0.02), 0px 64.8148px 46.8519px rgba(0, 0, 0, 0.0151852),
+        0px 38.5185px 25.4815px rgba(0, 0, 0, 0.0121481), 0px 20px 13px rgba(0, 0, 0, 0.01),
+        0px 8.14815px 6.51852px rgba(0, 0, 0, 0.00785185),
+        0px 1.85185px 3.14815px rgba(0, 0, 0, 0.00481481);
+`;
diff --git a/front/src/components/board/EachBoard.js b/front/src/components/board/EachBoard.js
new file mode 100644
index 0000000..e93615d
--- /dev/null
+++ b/front/src/components/board/EachBoard.js
@@ -0,0 +1,175 @@
+import React, { useRef, useState, useEffect } from 'react';
+import { useRecoilValue } from 'recoil';
+import { landmarkInfoState } from '../../atom';
+import { useNavigate, useLocation } from 'react-router-dom';
+import Flippy, { FrontSide, BackSide } from 'react-flippy';
+
+import * as API from '../../api';
+import { ValidationTextField } from '../upload/MuiCustom';
+
+import {
+    UploadResultWrapper,
+    UploadResultLeft,
+    ImgContainer,
+    UploadResultContentContainer,
+    UploadResultContentInfoTitle,
+    UploadResultContentInfo,
+    UploadResultContentPeopleContainer,
+    UploadResultPeopleImg,
+    UploadResultBtnContainer,
+    UploadResultBtn,
+    UploadResultRight,
+    UploadResultNameContainer,
+    UploadResultNameImg,
+    UploadResultLocationContainer,
+    UploadResultLocationImg,
+    UploadResultDescriptionContainer,
+    UploadResultDescriptionImg,
+} from '../upload/UploadResultStyle';
+
+import description from '../../img/description.png';
+import name from '../../img/name.png';
+import location from '../../img/location.png';
+import Luggage from '../../img/Luggage.png';
+
+import img_4 from '../../img/landMark4.jpg';
+
+const EachBoard = () => {
+    const [eachBoardInfo, setEachBoardInfo] = useState('');
+
+    const ref = useRef();
+    const navigate = useNavigate();
+    const allBoardContent = useLocation();
+    const getBoardId = allBoardContent.pathname.substring(7);
+    console.log('넘겨받은거', allBoardContent);
+
+    useEffect(() => {
+        const getEachBoard = async () => {
+            const res = await API.get(`board/${getBoardId}`);
+            setEachBoardInfo(res.data);
+        };
+        getEachBoard();
+    }, [getBoardId]);
+
+    console.log('게시글 받아온거', eachBoardInfo);
+    //랜드마크 url 변수 저장
+    // let imgSrc = landmarkPicInfo.landmark_img;
+
+    // const handleSubmit = async (e) => {
+    //     e.preventDefault();
+
+    //     const variable = {
+    //         title: title,
+    //         restaurant: restaurant,
+    //         content: content,
+    //         landmark_img_id: landmarkPicInfo.landmark_img,
+    //         landmark_name: landmarkInfo.name,
+    //         location: landmarkInfo.add,
+    //         description: landmarkInfo.description.substring(0, 20),
+    //     };
+
+    //     try {
+    //         await API.post('board', variable);
+    //         navigate('/Board');
+    //     } catch (err) {
+    //         console.log('err');
+    //     }
+    // };
+
+    return (
+        <UploadResultWrapper>
+            <Flippy ref={ref} flipOnClick={false} flipDirection="horizontal">
+                <FrontSide style={{ padding: '0', boxShadow: 'none' }}>
+                    <UploadResultLeft>
+                        <ImgContainer src={eachBoardInfo.landmark_img_id} />
+                        <UploadResultContentContainer>
+                            <UploadResultContentInfoTitle>
+                                <span>사진 제목</span>
+                                <span>Date</span>
+                                <span>ID</span>
+                            </UploadResultContentInfoTitle>
+                            <UploadResultContentInfo>
+                                {' '}
+                                <span>광안대교</span>
+                                <span>22/12/2019</span>
+                                <span>By Elice</span>
+                            </UploadResultContentInfo>
+                            <UploadResultContentPeopleContainer>
+                                <UploadResultPeopleImg src={Luggage} />
+                                24명의 랜드마커들이 다녀갔습니다
+                            </UploadResultContentPeopleContainer>
+                        </UploadResultContentContainer>
+                        <UploadResultBtnContainer>
+                            <UploadResultBtn
+                                onClick={() => {
+                                    ref.current.toggle();
+                                }}
+                            >
+                                게시글 작성하기
+                            </UploadResultBtn>
+                            <UploadResultBtn>기록하기</UploadResultBtn>
+                            <UploadResultBtn onClick={() => navigate('/Upload')}>
+                                뒤로가기
+                            </UploadResultBtn>
+                        </UploadResultBtnContainer>
+                    </UploadResultLeft>
+                </FrontSide>
+                <BackSide style={{ padding: '0', boxShadow: 'none' }}>
+                    <UploadResultLeft>
+                        <ImgContainer src={eachBoardInfo.landmark_img_id} alt="" />
+                        <UploadResultContentContainer>
+                            <ValidationTextField
+                                id="outlined-basic"
+                                label="제목"
+                                variant="outlined"
+                                // value={title}
+                                // onChange={(e) => {
+                                //     setTitle(e.target.value);
+                                // }}
+                            />
+
+                            <ValidationTextField
+                                id="outlined-multiline-static"
+                                label="내용"
+                                // value={content}
+                                multiline
+                                rows={6}
+                                // onChange={(e) => {
+                                //     setContent(e.target.value);
+                                // }}
+                            />
+                        </UploadResultContentContainer>
+                        <UploadResultBtnContainer>
+                            <UploadResultBtn>확인</UploadResultBtn>
+                            <UploadResultBtn
+                                onClick={() => {
+                                    ref.current.toggle();
+                                }}
+                            >
+                                취소
+                            </UploadResultBtn>
+                        </UploadResultBtnContainer>
+                    </UploadResultLeft>
+                </BackSide>
+            </Flippy>
+
+            <UploadResultRight>
+                <UploadResultNameContainer>
+                    <UploadResultNameImg src={name} />
+
+                    {eachBoardInfo.landmark_name}
+                </UploadResultNameContainer>
+                <UploadResultLocationContainer>
+                    <UploadResultLocationImg src={location} />
+                    {eachBoardInfo.location}
+                </UploadResultLocationContainer>
+                <UploadResultDescriptionContainer>
+                    <UploadResultDescriptionImg src={description} />
+                    {eachBoardInfo.description}
+                </UploadResultDescriptionContainer>
+            </UploadResultRight>
+        </UploadResultWrapper>
+    );
+};
+
+export default EachBoard;
diff --git a/front/src/components/home/Home.css b/front/src/components/home/Home.css
index c0c9206..f31c68b 100644
--- a/front/src/components/home/Home.css
+++ b/front/src/components/home/Home.css
@@ -29,3 +29,22 @@
     height: 100%;
     object-fit: cover;
 }
+.mySwiper {
+    background-size: cover;
+}
+.swal2-title {
+    font-family: 'Jeju Gothic', sans-serif;
+    font-size: 2rem;
+}
+.swal2-html-container {
+    font-family: 'Jeju Gothic', sans-serif;
+    font-size: 1rem;
+}
+.swal2-styled.swal2-cancel {
+    font-family: 'Jeju Gothic', sans-serif;
+    font-size: 1rem;
+}
+.swal2-styled.swal2-confirm {
+    font-family: 'Jeju Gothic', sans-serif;
+    font-size: 1rem;
+}
diff --git a/front/src/components/home/Home.js b/front/src/components/home/Home.js
index 4c9d9cd..7513965 100644
--- a/front/src/components/home/Home.js
+++ b/front/src/components/home/Home.js
@@ -1,5 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
+import * as API from '../../api';
+import Swal from 'sweetalert2';
 // Import Swiper React components
 import { Swiper, SwiperSlide } from 'swiper/react';
 // Import Swiper styles
@@ -15,6 +17,9 @@ import Box from '@mui/material/Box';
 import './Home.css';
 import place from '../../img/Place.png';
 import KakaoMap from './kakaoMap';
+import { useRecoilValue, useRecoilState } from 'recoil';
+import { userInfoState, tokenState, userState } from '../../atom';
+
 import {
     StartButton,
     FirstPage,
@@ -43,19 +48,51 @@ import img_1 from '../../img/landMark1.jpg';
 import img_2 from '../../img/landMark2.jpg';
 import img_3 from '../../img/landMark3.jpg';
 import img_4 from '../../img/landMark4.jpg';
-import Logo from '../../img/logo.png';
 
 const Home = () => {
     const navigate = useNavigate();
+    const user = useRecoilValue(userInfoState);
+    console.log('user:', user);
+
+    const [sencondPageImgs, setSecondPageImgs] = useState([]);
+
+    useEffect(() => {
+        const getSecondPageImg = async () => {
+            const res = await API.get('visited/top');
+            setSecondPageImgs(res.data);
+        };
+        getSecondPageImg();
+    }, []);
+
+    console.log('탑4', sencondPageImgs);
+    const start = () => {
+        user
+            ? navigate('/upload')
+            : Swal.fire({
+                  title: '로그인이 필요한 서비스 입니다',
+                  text: '로그인 창으로 이동 하시겠습니까?',
+                  icon: 'warning',
+                  showCancelButton: true, // cancel버튼 보이기. 기본은 원래 없음
+                  confirmButtonColor: '#3085d6', // confrim 버튼 색깔 지정
+                  cancelButtonColor: '#d33', // cancel 버튼 색깔 지정
+                  confirmButtonText: '확인', // confirm 버튼 텍스트 지정
+                  cancelButtonText: '취소', // cancel 버튼 텍스트 지정
+              }).then((result) => {
+                  if (result.isConfirmed) {
+                      // 만약 모달창에서 confirm 버튼을 눌렀다면
+                      navigate('/login');
+                  }
+              });
+    };
+
     const MainImage = [img_1, img_2, img_3, img_4];
     const MainiImageRender = MainImage.map((item, idx) => {
         return (
             <SwiperSlide key={idx}>
-                <StartButton onClick={() => navigate('/upload')}>시작하기</StartButton>
+                <StartButton onClick={start}>시작하기</StartButton>
                 <HeadCopy>
-                    랜드마크를 찾아 사진을 찍으세요.
-                    <br />
-                    서울메이트가 당신의 추억을 기록해드립니다.{' '}
+                    <p>랜드마크를 찾아 사진을 찍으세요.</p>
+                    <p>서울메이트가 당신의 추억을 기록해드립니다.</p>{' '}
                 </HeadCopy>
                 <PhotoContainer>
                     <img src={item} alt="landmark img" />
@@ -72,11 +109,15 @@ const Home = () => {
         );
     });
 
-    const UserImageRender = MainImage.map((item, idx) => {
+    const UserImageRender = sencondPageImgs.map((item, idx) => {
         return (
             <ThirdPageContentWrapper>
                 <ThirdPageImgContainer>
-                    <img src={item} alt="user img" style={{ width: '528px', height: '295px' }} />
+                    <img
+                        src={item.landmark_img}
+                        alt="user img"
+                        style={{ width: '528px', height: '295px' }}
+                    />
                 </ThirdPageImgContainer>
                 <ThirdPageContentDescription>
                     랜드마크 설명 너무 이뻐요 멋있어요 블라블라{' '}
@@ -129,7 +170,7 @@ const Home = () => {
                     <br />
                 </SecondPageBodyCopy>
                 <SecondPageBodyCopy2>지금 바로 카메라를 켜세요 !</SecondPageBodyCopy2>
-                <StartButton2>시작하기</StartButton2>
+                <StartButton2 onClick={start}>시작하기</StartButton2>
             </SecondPage>
             <ThirdPage>
                 <ThirdPageHeadCopy>매력적인 랜드마크 정보</ThirdPageHeadCopy>
@@ -149,7 +190,7 @@ const Home = () => {
                 <FourthPageMapContainer>
                     <KakaoMap></KakaoMap>
                 </FourthPageMapContainer>
-                <StartButton2>시작하기</StartButton2>
+                <StartButton2 onClick={start}>시작하기</StartButton2>
             </FourthPage>
         </>
     );
diff --git a/front/src/components/home/Homestyle.js b/front/src/components/home/Homestyle.js
index 117f837..f57c4ed 100644
--- a/front/src/components/home/Homestyle.js
+++ b/front/src/components/home/Homestyle.js
@@ -13,8 +13,8 @@ export const StartButton = styled.button`
     position: absolute;
     width: 15rem;
     height: 5rem;
-    left: 42%;
-    top: 62%;
+    margin-top: 25rem;
+    justify-content: center;
 
     background: rgba(17, 1, 1, 0.5);
 
@@ -142,10 +142,7 @@ export const HeadCopy = styled.div`
 
     line-height: 60px;
     position: absolute;
-    text-align: center;
-
-    top: 45%;
-    left: 32%;
+    justify-content: center;
 
     z-index: 10;
 `;
diff --git a/front/src/components/kakao/MapContainer.js b/front/src/components/kakao/MapContainer.js
index f43d89f..a8d2cc5 100644
--- a/front/src/components/kakao/MapContainer.js
+++ b/front/src/components/kakao/MapContainer.js
@@ -1,27 +1,96 @@
-// MapContainer.js
-
-import React, { useEffect } from 'react';
-
-const { kakao } = window;
-
-const MapContainer = () => {
-
-    useEffect(() => {
-        const container = document.getElementById('myMap');
-		const options = {
-			center: new kakao.maps.LatLng(33.450701, 126.570667),
-			level: 3
-		};
-        const map = new kakao.maps.Map(container, options);
-    }, []);
-
-    return (
-        <div id='myMap' style={{
-            width: '1000px', 
-            height: '400px',
-            marginLeft: '100px',
-        }}></div>
-    );
+/*global kakao */
+import React, { useEffect, useState } from "react";
+import { markerdata } from "./makerData";
+import * as API from "../../api";
+import { useRecoilValue } from 'recoil';
+import { userInfoState } from '../../atom';
+
+export default function Map() {
+
+
+  const [user, setUser] = useState();
+
+
+
+  const userB = useRecoilValue(userInfoState);
+  const [kakaouser, setkakaoUser] = useState();
+
+//   const mapscript = () => {
+//     let container = document.getElementById("map");
+//     let options = {
+//       center: new kakao.maps.LatLng(37.624915253753194, 127.15122688059974),
+//       level: 5,
+//     };
+
+  
+//     //map
+//     const map = new kakao.maps.Map(container, options);
+    
+//     markerdata.forEach((el) => {
+//       // 마커를 생성합니다
+//       new kakao.maps.Marker({
+//         //마커가 표시 될 지도
+//         map: map,
+//         //마커가 표시 될 위치
+//         position: new kakao.maps.LatLng(el.lat, el.lng),
+//         //마커에 hover시 나타날 title
+//         title: el.title,
+//       });
+//     });
+//   };
+
+  async function getUserData() {
+    try {
+    const res = await API.getQuery(`visited?user_id=${userB.user_id}`);
+    setUser(res.data)
+    } catch (err) {
+    console.log("err");
+    }
 }
 
-export default MapContainer; 
\ No newline at end of file
+useEffect(() => {
+  getUserData();
+}, []);
+
+// useEffect(()=>{
+//   try {
+//     const res = API.get("visited?user_id=d810a62e-7100-4fa8-9383-11c0cf9db695");
+//     setkakaoUser(res.data)
+//     } catch (err) {
+//     console.log("err");
+//     }
+// }, [])
+
+
+function userInfo () {
+  let container = document.getElementById("map");
+  let options = {
+    center: new kakao.maps.LatLng(37.624915253753194, 127.15122688059974),
+    level: 5,
+  };
+  if (user) {
+    const map = new kakao.maps.Map(container, options);
+    const b = {
+      ...user.payloads.forEach((el)=> {
+        new kakao.maps.Marker({
+          //마커가 표시 될 지도
+          map: map,
+          //마커가 표시 될 위치
+          position: new kakao.maps.LatLng(el["landmark"].latitude, el["landmark"].longitude),
+          //마커에 hover시 나타날 title
+          title: el.name,
+        });
+      }
+
+      )
+    }
+    console.log("서울마커:", b)
+  }
+}
+userInfo()
+
+
+
+  return <div id="map" style={{ width: "100vw", height: "100vh" }}></div>;
+  
+}
\ No newline at end of file
diff --git a/front/src/components/kakao/kakaoData.js b/front/src/components/kakao/kakaoData.js
new file mode 100644
index 0000000..e69de29
diff --git a/front/src/components/kakao/makerData.js b/front/src/components/kakao/makerData.js
new file mode 100644
index 0000000..9f3b5e6
--- /dev/null
+++ b/front/src/components/kakao/makerData.js
@@ -0,0 +1,22 @@
+export const markerdata = [
+    {
+      title: "콜드스퀘어",
+      lat: 37.62197524055062,
+      lng: 127.16017523675508,
+    },
+    {
+      title: "하남돼지집",
+      lat: 37.620842424005616,
+      lng: 127.1583774403176,
+    },
+    {
+      title: "수유리우동",
+      lat: 37.624915253753194,
+      lng: 127.15122688059974,
+    },
+    {
+      title: "맛닭꼬",
+      lat: 37.62456273069659,
+      lng: 127.15211256646381,
+    },
+  ];
\ No newline at end of file
diff --git a/front/src/components/mypage/Mypage.js b/front/src/components/mypage/Mypage.js
index 90df5a0..aeda0b4 100644
--- a/front/src/components/mypage/Mypage.js
+++ b/front/src/components/mypage/Mypage.js
@@ -1,71 +1,57 @@
-import { Container, Typography } from "@mui/material"
-import { useContext, useEffect, useState } from "react"
+import { Container, Typography } from '@mui/material';
+import { useContext, useEffect, useState } from 'react';
 import InfoIcon from '@mui/icons-material/Info';
-import Profile from "./Profile"
-import { UserStateContext } from "../../App"
-import * as API from "../../api";
-import MapContainer from "../kakao/MapContainer";
+import Profile from './Profile';
+import { UserStateContext } from '../../App';
+import * as API from '../../api';
+import MapContainer from '../kakao/MapContainer';
 
 function Mypage() {
-  
-const isLoggedin = sessionStorage.getItem("userToken")
-console.log("abc :", isLoggedin)
-const [user, setUser] = useState(null);
-const [editOpen, setEditOpen] = useState(false);
-
-
-const toggleEditForm = () => {
-  setEditOpen((prev) => !prev);
-};
-
-const updateUser = (user) => {
-  setUser(user);
-};
-
-// 여기서 user id 가져오면 될듯?
-
-async function getUserData() {
-  try {
-    const res = await API.get("users/current/info");
-    setUser(res.data);
-    console.log(user)
-  } catch (err) {
-    console.log("err");
-  }
-}
-
-
-useEffect(() => {
-  getUserData();
-}, []);
-
-
-  return (
-    <Container sx={{ py: 7, mt: 12 }}>
-    {/* 회원 프로필 내용 */}
-    <Profile
-      user={user}
-      updateUser={updateUser}
-      editOpen={editOpen}
-      toggleEditForm={toggleEditForm}
-    />
-    
-
-    {/* 회원 설정. 정보 */}
-    <Typography
-      variant="h3"
-      component="div"
-      sx={{ fontSize: "30px", mt: 6, mb: 2 }}
-    >
-      <InfoIcon sx={{ mx: 1.2, my: -1, fontSize: "40px", color: "gray" }} />
-      내가 다녀온 곳
-      
-      <MapContainer>
-        
-      </MapContainer>
-    </Typography>
-
-  </Container>
- )
+    const isLoggedin = sessionStorage.getItem('userToken');
+
+    const [user, setUser] = useState(null);
+    const [editOpen, setEditOpen] = useState(false);
+
+    const toggleEditForm = () => {
+        setEditOpen((prev) => !prev);
+    };
+
+    const updateUser = (user) => {
+        setUser(user);
+    };
+
+    // 여기서 user id 가져오면 될듯?
+
+    async function getUserData() {
+        try {
+            const res = await API.get('users/current/info');
+            setUser(res.data);
+            console.log(user);
+        } catch (err) {
+            console.log('err');
+        }
+    }
+
+    useEffect(() => {
+        getUserData();
+    }, [editOpen]);
+
+    return (
+        <Container sx={{ py: 7, mt: 12 }}>
+            {/* 회원 프로필 내용 */}
+            <Profile
+                user={user}
+                updateUser={updateUser}
+                editOpen={editOpen}
+                toggleEditForm={toggleEditForm}
+            />
+
+            {/* 회원 설정. 정보 */}
+            <Typography variant="h3" component="div" sx={{ fontSize: '30px', mt: 6, mb: 2 }}>
+                <InfoIcon sx={{ mx: 1.2, my: -1, fontSize: '40px', color: 'gray' }} />
+                내가 다녀온 곳<MapContainer></MapContainer>
+            </Typography>
+        </Container>
+    );
 }
-export default Mypage;
\ No newline at end of file
+export default Mypage;
diff --git a/front/src/components/mypage/ProfileEdit.js b/front/src/components/mypage/ProfileEdit.js
index 9867c7c..9e0d21a 100644
--- a/front/src/components/mypage/ProfileEdit.js
+++ b/front/src/components/mypage/ProfileEdit.js
@@ -53,7 +53,7 @@ const CssTextField = withStyles({
           formData,
           config
         ));
-  
+          
       const Edit = async () => {
         try {
           return await Promise.all([UserInfoEdit, ImageEdit]);
@@ -68,7 +68,7 @@ const CssTextField = withStyles({
           const InfoData = res[0].data;
           const ImageData = res[1]?.data?.updatedUser; // 이미지 안넣었을 땐 res[1]이 null 값.
   
-          ImageData ? updateUser(ImageData) : updateUser(InfoData);
+          ImageData ? updateUser(ImageData) : updateUser({name : form.name});
           alert("회원정보가 정상적으로 변경되었습니다!");
   
           toggleEditForm();
diff --git a/front/src/components/mypage/UserInfo.js b/front/src/components/mypage/UserInfo.js
new file mode 100644
index 0000000..c1fab41
--- /dev/null
+++ b/front/src/components/mypage/UserInfo.js
@@ -0,0 +1,112 @@
+import { Button, Stack} from '@mui/material';
+import { useNavigate } from 'react-router-dom';
+import Swal from 'sweetalert2'
+import * as Api from '../../api'
+import { useContext } from 'react';
+import { DispatchContext } from '../../App';
+import { LOGOUT } from '../../reducer';
+import styled from "styled-components";
+
+function UserInfo({updateUser}){
+    const navigate = useNavigate()
+    const dispatch = useContext(DispatchContext)
+    
+    function updatePassword() {
+        Swal.fire({
+            title: '비밀번호 변경',
+            text: "변경하고 싶은 비밀번호를 아래에 작성해주세요!",
+            icon: 'info',
+            input: 'password',
+            inputPlaceholder: "새로운 비밀번호",
+            showConfirmButton: true,
+            confirmButtonText: '변경',
+            showCancelButton: true,
+            cancelButtonText: '취소',
+            showCloseButton: true,
+        }).then(async function(result) {
+            const newPassword = result.value
+
+            if(result.isConfirmed){
+                if(!newPassword)
+                    Swal.fire({
+                        icon: 'error',
+                        title: 'Oops...',
+                        text: '다시한번 확인 해주세요',
+                        
+                    })
+                else{
+                    try{
+                        //password 변경하기 
+                        const res = await Api.put("users/update/password", {password: newPassword})
+                        updateUser(res.data)
+                        Swal.fire({
+                            title: '비밀번호 변경',
+                            icon: 'success'
+                        })
+                    }
+                    catch(err){
+                        console.log('회원 관리 오류')
+                    }
+                }
+                
+            }            
+        })
+    }
+
+    function DeleteUser(){
+        Swal.fire({
+            title: '계정 탈퇴',
+            text: "정말 탈퇴 하시겠습니까?",
+            icon: 'warning',
+            showConfirmButton: true,
+            confirmButtonText: '네',
+            showCancelButton: true,
+            cancelButtonText: '아니요',
+            focusCancel: true,
+            showCloseButton: true,
+        }).then(async function(result) {
+            if(result.isConfirmed){
+                try{
+                    //user 계정 삭제 
+                    await Api.delete("users")
+                    sessionStorage.removeItem("userToken")
+                    dispatch({
+                        type: LOGOUT      
+                    })
+
+                    Swal.fire({
+                        title: '회원 탈퇴되었습니다!',
+                        text: '다음에 만나요',
+                        icon: 'success'
+                    })
+                    
+                    navigate('/')
+                } catch(err){
+                    console.log('회원 관리 오류')
+                }
+            }
+        })
+    }
+
+
+    return (
+        <Stack direction="row" spacing={2}>
+        <Button onClick={() => updatePassword()} variant="contained" color="success" sx={{
+                marginLeft: "190px",
+                width: "100px",
+                height: "50px",
+                verticalAlign: 'top',
+                fontSize: "10px", 
+                }}>비밀번호 변경</Button>
+        <Button onClick={() => DeleteUser()} variant="contained" color="error" sx={{
+                marginLeft: "190px",
+                width: "100px",
+                height: "50px",
+                verticalAlign: 'top', 
+                }}>계정 삭제</Button>
+      </Stack>
+    )
+}
+
+export default UserInfo
+
diff --git a/front/src/components/upload/Upload.css b/front/src/components/upload/Upload.css
new file mode 100644
index 0000000..f54b10d
--- /dev/null
+++ b/front/src/components/upload/Upload.css
@@ -0,0 +1,16 @@
+.swal2-title {
+    font-family: 'Jeju Gothic', sans-serif;
+    font-size: 1rem;
+}
+.swal2-html-container {
+    font-family: 'Jeju Gothic', sans-serif;
+    font-size: 1rem;
+}
+.swal2-styled.swal2-cancel {
+    font-family: 'Jeju Gothic', sans-serif;
+    font-size: 1rem;
+}
+.swal2-styled.swal2-confirm {
+    font-family: 'Jeju Gothic', sans-serif;
+    font-size: 1rem;
+}
diff --git a/front/src/components/upload/Upload.js b/front/src/components/upload/Upload.js
index 0c1bd09..9b318a4 100644
--- a/front/src/components/upload/Upload.js
+++ b/front/src/components/upload/Upload.js
@@ -1,5 +1,13 @@
-import { useRef, useState } from 'react';
+import { useRef, useState, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
+import * as API from '../../api';
+import Swal from 'sweetalert2';
+
+import './Upload.css';
+
+// import recoil
+import { useRecoilState, useRecoilValue } from 'recoil';
+import { userInfoState } from '../../atom';
 
 import {
     UploadWrapper,
@@ -12,11 +20,14 @@ import {
 } from './UploadStyle';
 
 const Upload = () => {
+    const user = useRecoilValue(userInfoState);
     const navigate = useNavigate();
     const [avatar, setAvatar] = useState(null);
-
     const filepickerRef = useRef();
 
+    const [landmarkInfo, setLandmarkInfo] = useState('');
+    const [landmarkPic, setLandmarkPic] = useState('');
+
     const uploadAvatar = (e) => {
         const reader = new FileReader();
         if (e.target.files[0]) {
@@ -25,6 +36,49 @@ const Upload = () => {
         reader.onload = (readerEvent) => {
             setAvatar(readerEvent.target.result);
         };
+
+        API.post('ai')
+            .then((res) => {
+                setLandmarkInfo(() => {
+                    return res.data;
+                });
+
+                const formData = new FormData();
+                formData.append('image', e.target.files[0]);
+                formData.append('user_id', user.user_id);
+                formData.append('landmark_id', res.data.landmark_id);
+                API.sendImage('visited/images', formData)
+                    .then((res) => {
+                        setLandmarkPic(() => {
+                            return res.data;
+                        });
+                    })
+                    .catch((err) => {
+                        console.log(err);
+                    });
+            })
+            .catch((err) => {
+                console.log(err);
+            });
+    };
+
+    useEffect(() => {
+        console.log('info', landmarkInfo);
+        console.log('pic', landmarkPic);
+    }, [landmarkInfo, landmarkPic]);
+
+    const UploadHandler = () => {
+        avatar
+            ? navigate('/uploadResult', {
+                  state: { landmarkInfo: landmarkInfo, landmarkPic: landmarkPic },
+              })
+            : Swal.fire({
+                  title: '먼저 사진을 업로드 하세요',
+                  icon: 'warning',
+                  confirmButtonColor: '#3085d6', // confrim 버튼 색깔 지정
+                  cancelButtonColor: '#d33', // cancel 버튼 색깔 지정
+                  confirmButtonText: '확인', // confirm 버튼 텍스트 지정
+              });
     };
     return (
         <UploadWrapper>
@@ -48,7 +102,7 @@ const Upload = () => {
                 <input hidden onChange={uploadAvatar} ref={filepickerRef} type="file" />
             </UploadContainer>
             <UploadButtonContainer>
-                <UploadButton onClick={() => navigate('/uploadResult')}>업로드</UploadButton>
+                <UploadButton onClick={UploadHandler}>업로드</UploadButton>
                 <UploadCancelButton onClick={() => navigate('/')}>뒤로가기 </UploadCancelButton>
             </UploadButtonContainer>
         </UploadWrapper>
diff --git a/front/src/components/upload/UploadResult.js b/front/src/components/upload/UploadResult.js
index 4eadbb5..ac14772 100644
--- a/front/src/components/upload/UploadResult.js
+++ b/front/src/components/upload/UploadResult.js
@@ -1,4 +1,12 @@
-import React from 'react';
+import React, { useRef, useState, useEffect } from 'react';
+import { useRecoilValue } from 'recoil';
+
+import { useNavigate, useLocation } from 'react-router-dom';
+import Flippy, { FrontSide, BackSide } from 'react-flippy';
+import * as API from '../../api';
+
+import { userInfoState } from '../../atom';
+import { ValidationTextField } from './MuiCustom';
 
 import {
     UploadResultWrapper,
@@ -25,48 +33,159 @@ import name from '../../img/name.png';
 import location from '../../img/location.png';
 import Luggage from '../../img/Luggage.png';
 
-import img_4 from '../../img/landMark4.jpg';
+// import img_4 from '../../img/landMark4.jpg';
 
 const UploadResult = () => {
+    const [title, setTitle] = useState('');
+    const [content, setContent] = useState('');
+    const [restaurant, setRestaurant] = useState('test');
+    // const [landmark_img, setLandmark_img] = useState('test');
+    const [landmarkInfo, setLandmarkInfo] = useState('test');
+    const [landmarkPicInfo, setLandmarkPicInfo] = useState('test');
+    const user = useRecoilValue(userInfoState);
+    const moment = require('moment');
+    const today = moment();
+    const date = today.format('YYYY-MM-DD');
+    const navigate = useNavigate();
+    const landmarkLocation = useLocation();
+    const ref = useRef();
+
+    useEffect(() => {
+        setLandmarkInfo(landmarkLocation.state.landmarkInfo);
+        setLandmarkPicInfo(landmarkLocation.state.landmarkPic);
+        console.log('landmarkInfo 넘어온업로드에서 넘어온 랜드마크 정보', landmarkInfo);
+        console.log('landmarkPicInfo 업로드에서 넘어온 사진 정보', landmarkPicInfo);
+    }, [landmarkInfo, landmarkPicInfo]);
+
+    //랜드마크 url 변수 저장.
+    let imgSrc = landmarkPicInfo.landmark_img;
+
+    //게시글 올리기 버튼 누르면 게시글을 서버에 등록하고 게시판 페이지로 이동.
+    const handleSubmit = async (e) => {
+        e.preventDefault();
+
+        const variable = {
+            title: title,
+            restaurant: restaurant,
+            content: content,
+            landmark_img_id: landmarkPicInfo.landmark_img,
+            landmark_name: landmarkInfo.name,
+            location: landmarkInfo.add,
+            description: landmarkInfo.description.substring(10),
+        };
+
+        try {
+            await API.post('board', variable);
+            navigate('/Board');
+        } catch (err) {
+            console.log('err');
+        }
+    };
+
+    const [contents, setContents] = useState('');
+    useEffect(() => {
+        const getBoardContent = async () => {
+            const res = await API.post('board/list?perPage=100');
+            const content = res.data;
+            setContents(content);
+        };
+        getBoardContent();
+    }, []);
+
+    useEffect(() => {
+        console.log('content.payload', contents);
+    }, [contents]);
+
     return (
         <UploadResultWrapper>
-            <UploadResultLeft>
-                <ImgContainer src={img_4} />
-                <UploadResultContentContainer>
-                    <UploadResultContentInfoTitle>
-                        <div>사진 제목</div>
-                        <div>Date</div>
-                        <div>ID</div>
-                    </UploadResultContentInfoTitle>
-                    <UploadResultContentInfo>
-                        {' '}
-                        <div>블라블라.jpg</div>
-                        <div>22/12/2019</div>
-                        <div>By Elice</div>
-                    </UploadResultContentInfo>
-                    <UploadResultContentPeopleContainer>
-                        <UploadResultPeopleImg src={Luggage} />
-                        24명의 랜드마커들이 다녀갔습니다
-                    </UploadResultContentPeopleContainer>
-                </UploadResultContentContainer>
-                <UploadResultBtnContainer>
-                    <UploadResultBtn>게시하기</UploadResultBtn>
-                    <UploadResultBtn>기록하기</UploadResultBtn>
-                    <UploadResultBtn>뒤로가기</UploadResultBtn>
-                </UploadResultBtnContainer>
-            </UploadResultLeft>
+            <Flippy ref={ref} flipOnClick={false} flipDirection="horizontal">
+                <FrontSide style={{ padding: '0', boxShadow: 'none' }}>
+                    <UploadResultLeft>
+                        <ImgContainer src={imgSrc} />
+                        <UploadResultContentContainer>
+                            <UploadResultContentInfoTitle>
+                                <span>사진 제목</span>
+                                <span>Date</span>
+                                <span>ID</span>
+                            </UploadResultContentInfoTitle>
+                            <UploadResultContentInfo>
+                                {' '}
+                                <span>{landmarkPicInfo.filename}</span>
+                                <span>{date}</span>
+                                <span>{user.email}</span>
+                            </UploadResultContentInfo>
+                            <UploadResultContentPeopleContainer>
+                                <UploadResultPeopleImg src={Luggage} />
+                                {landmarkPicInfo.visitedCount}명의 랜드마커들이 다녀갔습니다
+                            </UploadResultContentPeopleContainer>
+                        </UploadResultContentContainer>
+                        <UploadResultBtnContainer>
+                            <UploadResultBtn
+                                onClick={() => {
+                                    ref.current.toggle();
+                                }}
+                            >
+                                게시글 작성하기
+                            </UploadResultBtn>
+                            <UploadResultBtn>기록하기</UploadResultBtn>
+                            <UploadResultBtn onClick={() => navigate('/Upload')}>
+                                뒤로가기
+                            </UploadResultBtn>
+                        </UploadResultBtnContainer>
+                    </UploadResultLeft>
+                </FrontSide>
+                <BackSide style={{ padding: '0', boxShadow: 'none' }}>
+                    <UploadResultLeft>
+                        <ImgContainer src={imgSrc} alt="" />
+                        <UploadResultContentContainer>
+                            <ValidationTextField
+                                id="outlined-basic"
+                                label="제목"
+                                variant="outlined"
+                                value={title}
+                                onChange={(e) => {
+                                    setTitle(e.target.value);
+                                }}
+                            />
+
+                            <ValidationTextField
+                                id="outlined-multiline-static"
+                                label="내용"
+                                value={content}
+                                multiline
+                                rows={6}
+                                onChange={(e) => {
+                                    setContent(e.target.value);
+                                }}
+                            />
+                        </UploadResultContentContainer>
+                        <UploadResultBtnContainer>
+                            <UploadResultBtn onClick={handleSubmit}>확인</UploadResultBtn>
+                            <UploadResultBtn
+                                onClick={() => {
+                                    ref.current.toggle();
+                                }}
+                            >
+                                취소
+                            </UploadResultBtn>
+                        </UploadResultBtnContainer>
+                    </UploadResultLeft>
+                </BackSide>
+            </Flippy>
+
             <UploadResultRight>
                 <UploadResultNameContainer>
                     <UploadResultNameImg src={name} />
-                    랜드마크 이름: 블라블라
+
+                    {landmarkInfo.name}
                 </UploadResultNameContainer>
                 <UploadResultLocationContainer>
                     <UploadResultLocationImg src={location} />
-                    랜드마크 위치: 블라블라
+                    {landmarkInfo.add}
                 </UploadResultLocationContainer>
                 <UploadResultDescriptionContainer>
                     <UploadResultDescriptionImg src={description} />
-                    랜드마크 설명: 블라블라
+                    {landmarkInfo.description}
                 </UploadResultDescriptionContainer>
             </UploadResultRight>
         </UploadResultWrapper>
diff --git a/front/src/components/upload/UploadResultStyle.js b/front/src/components/upload/UploadResultStyle.js
index 4769509..8b5599e 100644
--- a/front/src/components/upload/UploadResultStyle.js
+++ b/front/src/components/upload/UploadResultStyle.js
@@ -54,10 +54,10 @@ export const UploadResultContentInfoTitle = styled.div`
     width: 35rem;
     height: 4rem;
 
-    font-size: 0.8rem;
-
-    /* background-color: blue; */
+    font-size: 0.6rem;
 
+    background: #ffffff;
+    margin-left: -1.6rem;
     display: flex;
     justify-content: space-around;
     align-items: center;
@@ -68,7 +68,7 @@ export const UploadResultContentInfo = styled.div`
     width: 35rem;
     height: 4rem;
 
-    font-size: 1.2rem;
+    font-size: 1rem;
 
     background: #ffffff;
     border: 1px solid #f0f0f0;
diff --git a/front/src/components/user/Login.js b/front/src/components/user/Login.js
index ddf64d3..61169cf 100644
--- a/front/src/components/user/Login.js
+++ b/front/src/components/user/Login.js
@@ -1,114 +1,147 @@
-import { useContext, useState } from "react";
-import {Box} from '@mui/material';
-import { Link , useNavigate } from "react-router-dom";
+import React, { useContext, useState } from 'react';
+import { Box } from '@mui/material';
+import { Link, useNavigate } from 'react-router-dom';
 import * as Api from '../../api';
-import { DispatchContext } from "../../App.js";
-import {ROUTES} from '../../Route'
+import { DispatchContext } from '../../App.js';
+import { ROUTES } from '../../Route';
 import styled from 'styled-components';
-import style from "../../styledCompo/LoginStyle/Login.moudule.css"
-import CssTextField from "./CssTextField";
+import style from '../../styledCompo/LoginStyle/Login.moudule.css';
+import CssTextField from './CssTextField';
+// import recoil
+import { useSetRecoilState, useRecoilState } from 'recoil';
+import { userState, userInfoState, tokenState } from '../../atom';
 
+function Login() {
+    // 전역 유저 정보
+    const navigate = useNavigate();
 
+    const setUser = useSetRecoilState(userState);
+    const setToken = useSetRecoilState(tokenState);
+    const [userInfo, setUserInfo] = useRecoilState(userInfoState);
 
-
-function Login(){
-    const navigate = useNavigate()
     const dispatch = useContext(DispatchContext);
 
     const [form, setForm] = useState({
         email: '',
-        password: ''
-    })  
+        password: '',
+    });
     const handleSubmit = async (e) => {
-        e.preventDefault()
-
+        e.preventDefault();
 
         try {
             //user 로그인 api 호출!
-            const res = await Api.post("users/login", form)
-            const user = res.data
+            const res = await Api.post('users/login', form);
+            const user = res.data;
+
+            //recoil전역으로 관리할 정보
+            setUser(user);
+            setUserInfo(user);
+            setToken(user.accessToken);
 
-            const jwtToken = user.accessToken
-            sessionStorage.setItem("userToken", jwtToken)
+            console.log(setUser);
+            console.log(setToken);
+            console.log('a');
 
-            navigate('/')
+            const jwtToken = user.accessToken;
+            sessionStorage.setItem('userToken', jwtToken);
+
+            navigate('/');
 
             dispatch({
-                type: "LOGIN_SUCCESS",
+                type: 'LOGIN_SUCCESS',
                 payload: user,
-
             });
-
         } catch (error) {
-            alert(error.response.data)
+            alert(error.response.data);
         }
-    }
-    return(
+    };
+    return (
         <LoginBody onSubmit={handleSubmit}>
-            <LoginBodyUpper>
-                <Box>
-                </Box>
-                <Box>
-                    <LoginTitle>Log In</LoginTitle>
-                    <LoginTitle2>LandMark<span style={{color: "#BBD6FF"}}>travle</span></LoginTitle2>
-                </Box>
-            </LoginBodyUpper>
-            
-            <Box style={{textAlign:"center", marginTop:"20vh"}}>
+            <Box style={{ textAlign: 'center', marginTop: '20vh' }}>
                 <CssTextField
-                    style = {{width: '30%'}}
-                    id="email" 
+                    style={{ width: '30%' }}
+                    id="email"
                     name="email"
-                    label="Email" 
-                    placeholder='Email'
+                    label="Email"
+                    placeholder="Email"
                     variant="standard"
                     InputLabelProps={{
-                        style: {color: '#BBD6FF'}
+                        style: { color: '#BBD6FF' },
                     }}
-                    required   
-                    onChange={(e) => setForm((prev) => ({
-                        ...prev, [e.target.name]: e.target.value
-                    }))}            
+                    required
+                    onChange={(e) =>
+                        setForm((prev) => ({
+                            ...prev,
+                            [e.target.name]: e.target.value,
+                        }))
+                    }
                 />
             </Box>
 
-            <Box style={{textAlign:"center", marginTop:"12vh"}}>
+            <Box style={{ textAlign: 'center', marginTop: '12vh' }}>
                 <CssTextField
-                    style = {{width: '30%'}}
+                    style={{ width: '30%' }}
                     id="standard-basic"
-                    label="Password" 
+                    label="Password"
                     name="password"
-                    type='password'
-                    placeholder='Password'
-                    variant="standard" 
+                    type="password"
+                    placeholder="Password"
+                    variant="standard"
                     InputLabelProps={{
-                        style: {color: '#BBD6FF'}
+                        style: { color: '#BBD6FF' },
                     }}
                     required
-                    onChange={(e) => setForm((prev) => ({
-                        ...prev, [e.target.name]: e.target.value
-                    }))}  
+                    onChange={(e) =>
+                        setForm((prev) => ({
+                            ...prev,
+                            [e.target.name]: e.target.value,
+                        }))
+                    }
                 />
             </Box>
 
-            <div style={{display: "flex", flexDirection: "column", alignItems: "center", marginTop:"5vh"}}>
-                <button type='submit' style={{width: "30vw", borderRadius: "50px", border: "none", backgroundColor: "#BBD6FF", color: "white", padding: "5px", fontSize:"x-large" , cursor: "pointer" }}>LOG IN</button>
+            <div
+                style={{
+                    display: 'flex',
+                    flexDirection: 'column',
+                    alignItems: 'center',
+                    marginTop: '5vh',
+                }}
+            >
+                <button
+                    type="submit"
+                    style={{
+                        width: '30vw',
+                        borderRadius: '50px',
+                        border: 'none',
+                        backgroundColor: '#BBD6FF',
+                        color: 'white',
+                        padding: '5px',
+                        fontSize: 'x-large',
+                        cursor: 'pointer',
+                    }}
+                >
+                    LOG IN
+                </button>
                 <Box class={style.otherButtonbox}>
-                    <Link to={ROUTES.SIGN_IN.link} class={style.createaccountButton}>Create Account</Link>
+                    <Link to={'/register'} class={style.createaccountButton}>
+                        Create Account
+                    </Link>
+                    <Link to={'/Password'} class={style.forgotpasswordButton}>
+                        Forgot password?
+                    </Link>
                 </Box>
             </div>
-            
         </LoginBody>
-    )
+    );
 }
 
 export default Login;
 
-const LoginBody = styled.form`
-`;
+const LoginBody = styled.form``;
 
 const LoginBodyUpper = styled.div`
-    display: flex;  
+    display: flex;
 `;
 
 const LoginTitle = styled.div`
diff --git a/front/src/components/user/Password.js b/front/src/components/user/Password.js
new file mode 100644
index 0000000..5168f6d
--- /dev/null
+++ b/front/src/components/user/Password.js
@@ -0,0 +1,95 @@
+import { Box } from "@mui/material";
+import { useState } from "react";
+import { Link, useNavigate } from "react-router-dom";
+import styled from "styled-components";
+import Swal from "sweetalert2";
+
+import { ROUTES } from "../../Route";
+import style from "../../styledCompo/PasswordStyle/Password.module.css"
+import * as API from "../../api";
+import CssTextField from "./CssTextField";
+
+
+function Password() {
+  const navigate = useNavigate();
+  const [email, setEmail] = useState("");
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+
+    try {
+      const res = await API.post("users/reset/password", {
+        email,
+      });
+      console.log(res);
+      Swal.fire({
+        position: "top-center",
+        title: "비밀번호 리셋 성공!",
+        icon: "success",
+        showConfirmButton: false,
+        timer: 1500,
+      });
+      /* const user = res.data;
+      const jwtToken = user.token;
+      console.log(res.data);
+      sessionStorage.setItem("userToken", jwtToken); */
+      // navigate("/");
+    } catch (error) {
+      console.log("error");
+    }
+  };
+
+  return (
+    <PasswordBody onSubmit={handleSubmit}>
+
+      <Box class={style.inputEmail}>
+        <CssTextField
+          style={{ width: "30%" }}
+          id="standard-basic"
+          label="Email"
+          placeholder="Email"
+          variant="standard"
+          InputLabelProps={{
+            style: { color: "#BBD6FF" },
+          }}
+          required
+          onChange={(e) => setEmail(e.target.value)}
+        />
+      </Box>
+
+      <div class={style.signinButtonbox}>
+        <button type="submit" class={style.signinButton}>
+          비밀번호 재설정
+        </button>
+
+        <Box class={style.otherButtonbox}>
+          <Link to={'/login'} class={style.loginButton}>
+            Back to Login page
+          </Link>
+          <Link to={'/login'} class={style.forgotpasswordButton}>
+            Back to Signin page
+          </Link>
+        </Box>
+      </div>
+    </PasswordBody>
+  );
+}
+
+export default Password;
+
+const PasswordBody = styled.form``;
+
+const PasswordBodyUpper = styled.div`
+  display: flex;
+`;
+
+const PasswordTitle = styled.div`
+  font-size: 20px;
+  font-weight: 600;
+  padding-top: 14px;
+`;
+const PasswordTitle2 = styled.div`
+  font-size: 18px;
+  font-weight: 600;
+  padding-top: 4px;
+`;
diff --git a/front/src/components/user/Signin.js b/front/src/components/user/Signin.js
index 8d1152c..6f0fb19 100644
--- a/front/src/components/user/Signin.js
+++ b/front/src/components/user/Signin.js
@@ -8,6 +8,7 @@ import styled from 'styled-components';
 import style from '../../styledCompo/SigninStyle/Signin.module.css';
 import * as Api from '../../api'
 import CssTextField from './CssTextField'
+import { validateEmail } from './validateEmail';
 
 function Signin() {
     const navigate = useNavigate()
@@ -20,7 +21,15 @@ function Signin() {
 
     const [confirmPassword, setConfirmpassword] = useState("")
     
-    const isPasswordSame = form.password === confirmPassword
+    const isPasswordSame = form.password === confirmPassword;
+    const checkEmail = form.email
+    const isEmailValid = validateEmail(checkEmail);
+    console.log(isEmailValid)
+    // 비밀번호가 4글자 이상인지 여부를 확인함.
+    const isPasswordValid = form.password.length >= 4;
+    // 비밀번호와 확인용 비밀번호가 일치하는지 여부를 확인함.
+    // 이름이 2글자 이상인지 여부를 확인함.
+
 
     const handleSubmit = async (e) => {
         e.preventDefault()
@@ -59,6 +68,11 @@ function Signin() {
                         ...prev, [e.target.name]: e.target.value
                     }))}  
                 />
+                {!isEmailValid && (
+                    <h1 className={style.warning}>
+                        이메일이 유효하지 않습니다.
+                    </h1>
+                )}
             </Box>
 
             <Box class={style.inputNickname}>
@@ -96,6 +110,11 @@ function Signin() {
                         ...prev, [e.target.name]: e.target.value
                     }))}  
                 />
+                {!isPasswordValid && (
+                    <h1 className={style.warning}>
+                        비밀번호는 네글자 이상 입력해 주세요!
+                    </h1>
+                )}
             </Box>
 
             <Box class={style.inputPasswordconfirm}>
@@ -122,7 +141,7 @@ function Signin() {
             </Box>
 
             <div class={style.signinButtonbox}>
-                <button type='submit' class={style.signinButton}>SIGN IN</button>
+                <button type='submit' class={style.signinButton} disabled={!(isEmailValid && isPasswordValid)}>SIGN IN</button>
 
                 <Box class={style.otherButtonbox}>
                    
diff --git a/front/src/components/user/validateEmail.js b/front/src/components/user/validateEmail.js
new file mode 100644
index 0000000..1d80320
--- /dev/null
+++ b/front/src/components/user/validateEmail.js
@@ -0,0 +1,8 @@
+export const validateEmail = (email) => {
+    return email.toLowerCase().match(
+        /([\w-.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/
+    );
+    };
+
+
+  
\ No newline at end of file
diff --git a/front/src/img/clear.png b/front/src/img/clear.png
new file mode 100644
index 0000000..ce31252
Binary files /dev/null and b/front/src/img/clear.png differ
diff --git a/front/src/loading.json b/front/src/loading.json
new file mode 100644
index 0000000..38e897b
--- /dev/null
+++ b/front/src/loading.json
@@ -0,0 +1 @@
+{"v":"4.5.7","fr":25,"ip":0,"op":33,"w":800,"h":600,"ddd":0,"assets":[{"id":"comp_0","layers":[{"ddd":0,"ind":0,"ty":3,"nm":"Null 1","ks":{"o":{"a":0,"k":0},"r":{"a":1,"k":[{"i":{"x":[0.268],"y":[1]},"o":{"x":[0.73],"y":[0]},"n":["0p268_1_0p73_0"],"t":0,"s":[0],"e":[180]},{"t":33}]},"p":{"a":1,"k":[{"i":{"x":0.277,"y":1},"o":{"x":0.721,"y":0},"n":"0p277_1_0p721_0","t":0,"s":[460,304,0],"e":[338,298,0],"to":[-20.3333339691162,-1,0],"ti":[20.3333339691162,1,0]},{"t":33}]},"a":{"a":0,"k":[0,0,0]},"s":{"a":0,"k":[200,200,100]}},"ao":0,"ip":0,"op":33,"st":0,"bm":0,"sr":1},{"ddd":0,"ind":1,"ty":4,"nm":"Shape Layer 4","parent":0,"ks":{"o":{"a":0,"k":100},"r":{"a":0,"k":0},"p":{"a":1,"k":[{"i":{"x":0.26,"y":1},"o":{"x":0.731,"y":0},"n":"0p26_1_0p731_0","t":6,"s":[14.5,-1.375,0],"e":[14.5,28.625,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.267,"y":1},"o":{"x":0.716,"y":0},"n":"0p267_1_0p716_0","t":19,"s":[14.5,28.625,0],"e":[14.5,-1.375,0],"to":[0,0,0],"ti":[0,0,0]},{"t":32}]},"a":{"a":0,"k":[-99.5,-5.375,0]},"s":{"a":1,"k":[{"i":{"x":[0.279,0.279,0.667],"y":[1,1,0.667]},"o":{"x":[0.728,0.728,0.333],"y":[0,0,0.333]},"n":["0p279_1_0p728_0","0p279_1_0p728_0","0p667_0p667_0p333_0p333"],"t":6,"s":[75,75,100],"e":[150,150,100]},{"i":{"x":[0.275,0.275,0.667],"y":[1,1,0.667]},"o":{"x":[0.729,0.729,0.333],"y":[0,0,0.333]},"n":["0p275_1_0p729_0","0p275_1_0p729_0","0p667_0p667_0p333_0p333"],"t":19,"s":[150,150,100],"e":[75,75,100]},{"t":32}]}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[20.969,20.969]},"p":{"a":0,"k":[0,0]},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse"},{"ty":"st","c":{"a":0,"k":[0.64,0.16,0.16,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":0},"lc":1,"lj":1,"ml":4,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke"},{"ty":"fl","c":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":0,"s":[0.84,0.09,0.38,1],"e":[0.18,0.78,0.69,1]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":17,"s":[0.18,0.78,0.69,1],"e":[0.84,0.09,0.38,1]},{"t":33}]},"o":{"a":0,"k":100},"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill"},{"ty":"tr","p":{"a":0,"k":[-99.516,-5.516],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1","np":3,"mn":"ADBE Vector Group"}],"ip":0,"op":33,"st":0,"bm":0,"sr":1},{"ddd":0,"ind":2,"ty":4,"nm":"Shape Layer 3","parent":0,"ks":{"o":{"a":0,"k":100},"r":{"a":0,"k":0},"p":{"a":1,"k":[{"i":{"x":0.281,"y":1},"o":{"x":0.73,"y":0},"n":"0p281_1_0p73_0","t":4,"s":[-15.5,-1.375,0],"e":[-15.5,-31.375,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.266,"y":1},"o":{"x":0.737,"y":0},"n":"0p266_1_0p737_0","t":17,"s":[-15.5,-31.375,0],"e":[-15.5,-1.375,0],"to":[0,0,0],"ti":[0,0,0]},{"t":30}]},"a":{"a":0,"k":[-99.5,-5.375,0]},"s":{"a":1,"k":[{"i":{"x":[0.279,0.279,0.667],"y":[1,1,0.667]},"o":{"x":[0.728,0.728,0.333],"y":[0,0,0.333]},"n":["0p279_1_0p728_0","0p279_1_0p728_0","0p667_0p667_0p333_0p333"],"t":4,"s":[75,75,100],"e":[150,150,100]},{"i":{"x":[0.275,0.275,0.667],"y":[1,1,0.667]},"o":{"x":[0.729,0.729,0.333],"y":[0,0,0.333]},"n":["0p275_1_0p729_0","0p275_1_0p729_0","0p667_0p667_0p333_0p333"],"t":17,"s":[150,150,100],"e":[75,75,100]},{"t":30}]}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[20.969,20.969]},"p":{"a":0,"k":[0,0]},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse"},{"ty":"st","c":{"a":0,"k":[0.64,0.16,0.16,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":0},"lc":1,"lj":1,"ml":4,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke"},{"ty":"fl","c":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":0,"s":[0.84,0.09,0.38,1],"e":[0.61,0.76,0.03,1]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":17,"s":[0.61,0.76,0.03,1],"e":[0.84,0.09,0.38,1]},{"t":33}]},"o":{"a":0,"k":100},"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill"},{"ty":"tr","p":{"a":0,"k":[-99.516,-5.516],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1","np":3,"mn":"ADBE Vector Group"}],"ip":0,"op":33,"st":0,"bm":0,"sr":1},{"ddd":0,"ind":3,"ty":4,"nm":"Shape Layer 2","parent":0,"ks":{"o":{"a":0,"k":100},"r":{"a":0,"k":0},"p":{"a":1,"k":[{"i":{"x":0.28,"y":1},"o":{"x":0.729,"y":0},"n":"0p28_1_0p729_0","t":2,"s":[-45.5,-1.375,0],"e":[-45.5,28.625,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.287,"y":1},"o":{"x":0.714,"y":0},"n":"0p287_1_0p714_0","t":15,"s":[-45.5,28.625,0],"e":[-45.5,-1.375,0],"to":[0,0,0],"ti":[0,0,0]},{"t":28}]},"a":{"a":0,"k":[-99.5,-5.375,0]},"s":{"a":1,"k":[{"i":{"x":[0.279,0.279,0.667],"y":[1,1,0.667]},"o":{"x":[0.728,0.728,0.333],"y":[0,0,0.333]},"n":["0p279_1_0p728_0","0p279_1_0p728_0","0p667_0p667_0p333_0p333"],"t":2,"s":[75,75,100],"e":[150,150,100]},{"i":{"x":[0.275,0.275,0.667],"y":[1,1,0.667]},"o":{"x":[0.729,0.729,0.333],"y":[0,0,0.333]},"n":["0p275_1_0p729_0","0p275_1_0p729_0","0p667_0p667_0p333_0p333"],"t":15,"s":[150,150,100],"e":[75,75,100]},{"t":28}]}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[20.969,20.969]},"p":{"a":0,"k":[0,0]},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse"},{"ty":"st","c":{"a":0,"k":[0.64,0.16,0.16,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":0},"lc":1,"lj":1,"ml":4,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke"},{"ty":"fl","c":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":0,"s":[0.84,0.09,0.38,1],"e":[0.95,0.47,0.36,1]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":17,"s":[0.95,0.47,0.36,1],"e":[0.84,0.09,0.38,1]},{"t":33}]},"o":{"a":0,"k":100},"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill"},{"ty":"tr","p":{"a":0,"k":[-99.516,-5.516],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1","np":3,"mn":"ADBE Vector Group"}],"ip":0,"op":33,"st":0,"bm":0,"sr":1},{"ddd":0,"ind":4,"ty":4,"nm":"Shape Layer 1","parent":0,"ks":{"o":{"a":0,"k":100},"r":{"a":0,"k":0},"p":{"a":1,"k":[{"i":{"x":0.279,"y":1},"o":{"x":0.728,"y":0},"n":"0p279_1_0p728_0","t":0,"s":[-75.5,-1.375,0],"e":[-75.5,-31.375,0],"to":[0,-5,0],"ti":[0,0,0]},{"i":{"x":0.264,"y":1},"o":{"x":0.735,"y":0},"n":"0p264_1_0p735_0","t":13,"s":[-75.5,-31.375,0],"e":[-75.5,-1.375,0],"to":[0,0,0],"ti":[0,-5,0]},{"t":26}]},"a":{"a":0,"k":[-99.5,-5.375,0]},"s":{"a":1,"k":[{"i":{"x":[0.279,0.279,0.667],"y":[1,1,0.667]},"o":{"x":[0.728,0.728,0.333],"y":[0,0,0.333]},"n":["0p279_1_0p728_0","0p279_1_0p728_0","0p667_0p667_0p333_0p333"],"t":0,"s":[75,75,100],"e":[150,150,100]},{"i":{"x":[0.275,0.275,0.667],"y":[1,1,0.667]},"o":{"x":[0.729,0.729,0.333],"y":[0,0,0.333]},"n":["0p275_1_0p729_0","0p275_1_0p729_0","0p667_0p667_0p333_0p333"],"t":13,"s":[150,150,100],"e":[75,75,100]},{"t":26}]}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[20.969,20.969]},"p":{"a":0,"k":[0,0]},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse"},{"ty":"st","c":{"a":0,"k":[0.64,0.16,0.16,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":0},"lc":1,"lj":1,"ml":4,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke"},{"ty":"fl","c":{"a":0,"k":[0.84,0.09,0.38,1]},"o":{"a":0,"k":100},"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill"},{"ty":"tr","p":{"a":0,"k":[-99.516,-5.516],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1","np":3,"mn":"ADBE Vector Group"}],"ip":0,"op":33,"st":0,"bm":0,"sr":1}]}],"layers":[{"ddd":0,"ind":0,"ty":0,"nm":"Komplet","refId":"comp_0","ks":{"o":{"a":0,"k":100},"r":{"a":0,"k":0},"p":{"a":0,"k":[400,300,0]},"a":{"a":0,"k":[400,300,0]},"s":{"a":0,"k":[100,100,100]}},"ao":0,"w":800,"h":600,"ip":0,"op":15,"st":-18,"bm":0,"sr":1},{"ddd":0,"ind":1,"ty":0,"nm":"Komplet","refId":"comp_0","ks":{"o":{"a":0,"k":100},"r":{"a":0,"k":0},"p":{"a":0,"k":[400,300,0]},"a":{"a":0,"k":[400,300,0]},"s":{"a":0,"k":[100,100,100]}},"ao":0,"w":800,"h":600,"ip":15,"op":33,"st":15,"bm":0,"sr":1}]}
\ No newline at end of file
diff --git a/front/src/styledCompo/PasswordStyle/Password.module.css b/front/src/styledCompo/PasswordStyle/Password.module.css
new file mode 100644
index 0000000..8bc34fb
--- /dev/null
+++ b/front/src/styledCompo/PasswordStyle/Password.module.css
@@ -0,0 +1,50 @@
+.inputEmail {
+    margin-top: 5vh;
+    text-align: center;
+}
+.inputNickname,
+.inputPassword,
+.inputPasswordconfirm {
+    margin-top: 5vh;
+    text-align: center;
+}
+
+
+
+.signinButtonbox {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-top: 5vh;
+}
+
+.signinButton {
+    width: 30vw;
+    border-radius: 50px;
+    border: none;
+    background-color: #BBD6FF;
+    color: white;
+    padding: 5px;
+    font-size: x-large;
+    cursor: pointer;
+}
+
+.signinButton:active {
+    background-color: black;
+}
+
+
+.otherButtonbox {
+    width: 40vw;
+    margin-top: 2vh;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-around;
+}
+
+.loginButton,
+.forgotpasswordButton {
+    color: #BBD6FF;
+    text-decoration: none;
+
+}
diff --git a/front/yarn.lock b/front/yarn.lock
index 99e7380..6f53302 100644
--- a/front/yarn.lock
+++ b/front/yarn.lock
@@ -3059,6 +3059,14 @@ babel-preset-react-app@^10.0.1:
     babel-plugin-macros "^3.1.0"
     babel-plugin-transform-react-remove-prop-types "^0.4.24"
 
+babel-runtime@^6.26.0:
+  version "6.26.0"
+  resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.26.0.tgz#965c7058668e82b55d7bfe04ff2337bc8b5647fe"
+  integrity sha512-ITKNuq2wKlW1fJg9sSW52eepoYgZBggvOAHC0u/CYu/qxQ9EVzThCgR69BnSXLHjy2f7SY5zaQ4yt7H9ZVxY2g==
+  dependencies:
+    core-js "^2.4.0"
+    regenerator-runtime "^0.11.0"
+
 balanced-match@^1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.2.tgz#e83e3a7e3f300b34cb9d87f615fa0cbf357690ee"
@@ -3537,6 +3545,11 @@ core-js-pure@^3.20.2, core-js-pure@^3.8.1:
   resolved "https://registry.yarnpkg.com/core-js-pure/-/core-js-pure-3.22.8.tgz#f2157793b58719196ccf9673cc14f3683adc0957"
   integrity sha512-bOxbZIy9S5n4OVH63XaLVXZ49QKicjowDx/UELyJ68vxfCRpYsbyh/WNZNfEfAk+ekA8vSjt+gCDpvh672bc3w==
 
+core-js@^2.4.0:
+  version "2.6.12"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.6.12.tgz#d9333dfa7b065e347cc5682219d6f690859cc2ec"
+  integrity sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==
+
 core-js@^3.19.2:
   version "3.22.8"
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.22.8.tgz#23f860b1fe60797cc4f704d76c93fea8a2f60631"
@@ -6415,6 +6428,11 @@ loose-envify@^1.1.0, loose-envify@^1.4.0:
   dependencies:
     js-tokens "^3.0.0 || ^4.0.0"
 
+lottie-web@^5.1.3:
+  version "5.9.4"
+  resolved "https://registry.yarnpkg.com/lottie-web/-/lottie-web-5.9.4.tgz#c01478ee5dd47f916cb4bb79040c11d427872d57"
+  integrity sha512-bSs1ZTPifnBVejO1MnQHdfrKfcn02YTCmgOh2wcAEICqRA0V7GzDh8FnwXY6+EzT+i8XOunaIloo/5xC5YNbsA==
+
 lower-case@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/lower-case/-/lower-case-2.0.2.tgz#6fa237c63dbdc4a82ca0fd882e4722dc5e634e28"
@@ -6577,6 +6595,11 @@ mkdirp@~0.5.1:
   dependencies:
     minimist "^1.2.6"
 
+moment@^2.29.3:
+  version "2.29.3"
+  resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.3.tgz#edd47411c322413999f7a5940d526de183c031f3"
+  integrity sha512-c6YRvhEo//6T2Jz/vVtYzqBzwvPT95JBQ+smCytzf7c50oMZRsR/a4w88aD34I+/QVSfnoAnSBFPJHItlOMJVw==
+
 ms@2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"
@@ -7784,6 +7807,14 @@ react-is@^18.0.0:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.1.0.tgz#61aaed3096d30eacf2a2127118b5b41387d32a67"
   integrity sha512-Fl7FuabXsJnV5Q1qIOQwx/sagGF18kogb4gpfcG4gjLBWO0WDiiz1ko/ExayuxE7InyQkBLkxRFG5oxY6Uu3Kg==
 
+react-lottie@^1.2.3:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/react-lottie/-/react-lottie-1.2.3.tgz#8544b96939e088658072eea5e12d912cdaa3acc1"
+  integrity sha512-qLCERxUr8M+4mm1LU0Ruxw5Y5Fn/OmYkGfnA+JDM/dZb3oKwVAJCjwnjkj9TMHtzR2U6sMEUD3ZZ1RaHagM7kA==
+  dependencies:
+    babel-runtime "^6.26.0"
+    lottie-web "^5.1.3"
+
 react-refresh@^0.11.0:
   version "0.11.0"
   resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.11.0.tgz#77198b944733f0f1f1a90e791de4541f9f074046"
@@ -7939,6 +7970,11 @@ regenerate@^1.4.2:
   resolved "https://registry.yarnpkg.com/regenerate/-/regenerate-1.4.2.tgz#b9346d8827e8f5a32f7ba29637d398b69014848a"
   integrity sha512-zrceR/XhGYU/d/opr2EKO7aRHUeiBI8qjtfHqADTwZd6Szfy16la6kqD0MIUs5z5hx6AaKa+PixpPrR289+I0A==
 
+regenerator-runtime@^0.11.0:
+  version "0.11.1"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz#be05ad7f9bf7d22e056f9726cee5017fbf19e2e9"
+  integrity sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==
+
 regenerator-runtime@^0.13.4, regenerator-runtime@^0.13.9:
   version "0.13.9"
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz#8925742a98ffd90814988d7566ad30ca3b263b52"
@@ -8744,10 +8780,23 @@ svgo@^2.7.0:
     picocolors "^1.0.0"
     stable "^0.1.8"
 
-swiper@^8.2.2:
-  version "8.2.2"
-  resolved "https://registry.yarnpkg.com/swiper/-/swiper-8.2.2.tgz#d16e9d92ec9b5548399c06f2cda9c400f9f32352"
-  integrity sha512-t7Tts4ZD2ahM3InsHDlZ6YY4gi47zepGHx25cACd6fzgcVdAtYLbUihnEmck0HsDzqtkhciyfKsoUEhummZDEA==
+sweetalert2@^11.4.17:
+  version "11.4.17"
+  resolved "https://registry.yarnpkg.com/sweetalert2/-/sweetalert2-11.4.17.tgz#d51a67d034c97b8a9854ce0c161ee21fdd681c4a"
+  integrity sha512-z0iQW5fDdvtoDNle3iHTKunsuNWgPaMifVu0GPtdguR0uVPrvg9gg9bnSQeJ4tx3C7FwJOEnRshxrs6fFItRvw==
+
+sweetalert@^2.1.2:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/sweetalert/-/sweetalert-2.1.2.tgz#010baaa80d0dbdc86f96bfcaa96b490728594b79"
+  integrity sha512-iWx7X4anRBNDa/a+AdTmvAzQtkN1+s4j/JJRWlHpYE8Qimkohs8/XnFcWeYHH2lMA8LRCa5tj2d244If3S/hzA==
+  dependencies:
+    es6-object-assign "^1.1.0"
+    promise-polyfill "^6.0.2"
+
+swiper@^8.2.4:
+  version "8.2.4"
+  resolved "https://registry.yarnpkg.com/swiper/-/swiper-8.2.4.tgz#2d377bb49ece6b3b21792667c2a8cce28390dee0"
+  integrity sha512-TPq64KiZUt8lZY5ZEg75RjToT+RwfLomfKIpcFLy6+UCUp2kL7hHWslLxjFtcFeiwfG67RHFYbJnq6tsothcJQ==
   dependencies:
     dom7 "^4.0.4"
     ssr-window "^4.0.2"