Nav에 user정보

client/src/Components/Menu.js

-// import axios from 'axios';
-import { response } from 'express';
+import axios from 'axios';
 import React, { useState, useEffect } from 'react';
 import { Navbar, Nav, Button } from 'react-bootstrap';
 import { handleLogout, isAuthenticated } from '../utils/auth';
 
-// const INIT_USER = {
-//   username: ''
-// }
+const INIT_USER = {
+  username: ''
+}
 
 
 function Menu() {
-  const userName = "정연우";
   const user = isAuthenticated()
-  // const [userName, setUsername] = useState(INIT_USER)
+  const [userName, setUsername] = useState(INIT_USER)
+
+  async function getLoginedUser() {
+    const userId = localStorage.getItem('user')
+    const response = await axios.get(`/users/${userId}`)
+    console.log(response.data.username)
+    const resName = response.data.username
   
-  // async function getLoginedUser() {
-  //   const userId = localStorage.getItem('user')
-  //   const response = await axios.get(`/users/${userId}`)
-  //   setUsername(response.data)
-  // }
+    // const resName = JSON.stringify(response.data.username)
+    // console.log(resName)
+    setUsername(resName)
+  }
+  console.log(userName)
 
-  // useEffect((user) => {
-  //   if (localStorage.getItem('user')) {
-  //     getLoginedUser(user)
-  //   }
-  // }, [])
+  useEffect((user) => {
+    if (localStorage.getItem('user')) {
+      getLoginedUser(user)
+    }
+  }, [])
 
 
   return (
@@ -33,7 +37,7 @@ function Menu() {
 
       {user ?
         <>
-          <div className='ml-1 mr-2' style={{ color: 'white' }}>{response.data} 님 환영합니다</div>
+          <div className='ml-1 mr-2' style={{ color: 'white' }}>{userName} 님 환영합니다</div>
           <Nav className="mr-auto">
             <Nav.Link href="/home">Home</Nav.Link>
             <Nav.Link href="/profile">Profile</Nav.Link>

client/src/index.js

@@ -12,7 +12,6 @@ import { BrowserRouter as Router, Route, Redirect, Switch } from 'react-router-d
 import Hello from './Hello'
 import HomePage from './Pages/HomePage'
 
-
 ReactDOM.render(
   <Router>
     <Switch>

client/src/utils/auth.js

 import axios from "axios"
 
 //자동으로 localstorage에 login이 생성됨
-export function handleLogin(props) {
-    localStorage.setItem('user', props.email)
+export function handleLogin(userId) {
+    localStorage.setItem('user', userId)
 }
 export async function handleLogout() {
     localStorage.removeItem('user')

package.json

@@ -5,7 +5,7 @@
   "main": "index.js",
   "type": "module",
   "scripts": {
-    "dev": "nodemon server/server.js",
+    "dev": "nodemon --ignore client server/server.js",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "repository": {

server/controllers/user.controller.js

@@ -89,6 +89,34 @@ const changenick = async (req, res) => {
     }
 }
 
+const loginNavbar = async (req, res) => {
+    try {
+        let user = await User.findOne(req.body).select('username').exec()
+        return res.json(user)
+    } catch (error) {
+        alert('올바르지 못한 접근입니다.')
+    }
+}
+
+// const getNav = (req, res) => {
+//     res.json(req.loginNav)
+// }
+
+// const userById = async (req, res, next, id) => {
+//     try {
+//         const user = await User.findById(id)
+//         if (!user) {
+//             res.status(404).send('사용자를 찾을 수 없습니다.')
+//         }
+//         req.loginNav = user
+//         //req에 profile을 만들어서 user를 저장해줌
+//         next()
+//         //다음 middleware로 이동시킴 / 없으면 멈춤
+//     } catch (error) {
+//         console.log(error)
+//         res.status(500).send('사용자 아이디 검색 실패')
+//     }
+// }
 
-export default { signup, hello, logineduser, changenick }
+export default { signup, hello, logineduser, changenick, loginNavbar }
 // {} : 객체로 return함
\ No newline at end of file

server/routes/user.routes.js

@@ -11,8 +11,9 @@ router.route('/users/signup')
 router.route(`/users/:userId`)
     .post(userCtrl.logineduser)
     .put(userCtrl.changenick)
+    .get(userCtrl.loginNavbar)
 
-
+// router.param('userId', userCtrl.userById)
 
 // router.route('/api/users/signup/:userId')    //로그인한 사람의 정보만 가져오도록
 //     .get