0111

client/package.json

@@ -39,5 +39,6 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
-  }
+  },
+  "proxy": "http://localhost:3001"
 }

client/src/App.js

 import React, { useEffect, useState } from 'react';
 import { Link, Redirect } from 'react-router-dom';
 import ohuh from './ohuh.PNG';
-import { Col, FormControl, Container, Row, Form, Image, InputGroup, Button } from 'react-bootstrap';
-
+import { Col, FormControl, Container, Row, Form, Image, InputGroup, Button, Navbar, Nav } from 'react-bootstrap';
+import { handleLogout, isAuthenticated } from './utils/auth'
 
 
 function App() {
   const [state, setState] = useState(false);
   const [search, setSearch] = useState("");
+  const user = isAuthenticated()
 
   if (state !== false) {
     return <Redirect to={{
@@ -33,6 +34,19 @@ function App() {
         <Col md={6} className="mt-5">
           <Image src={ohuh} fluid />
         </Col>
+        <Col md={9} className='mr-6'>
+          <Navbar bg="#fff" variant="light">
+            <Nav className="mr-auto">
+              {user ? <Nav.Link onClick={() => handleLogout()}>로그아웃</Nav.Link>
+                : (
+                  <>
+                    <Nav.Link href="/signup">회원가입</Nav.Link>
+                    <Nav.Link href="/login">로그인</Nav.Link>
+                  </>
+                )}
+            </Nav>
+          </Navbar>
+        </Col>
         {/* </Row> */}
         <Col lg={{ span: 10, offset: 1 }} > {/*xs={{ span: 12, offset: 3 }} */}
           <InputGroup size="lg" lg={6} xs={4} fluid>

client/src/Components/Login.js

+import React, { useState, useEffect } from 'react'
+import { Alert, Col, Container, Form, Row, Button, Spinner } from "react-bootstrap";
+import axios from "axios";
+import catchErrors from '../utils/catchErrors';
+import { Redirect } from 'react-router-dom';
+import { handleLogin } from '../utils/auth';
+
+
+const INIT_USER = {
+    email: '',
+    password: ''
+}
+
+function Login() {
+    const [user, setUser] = useState(INIT_USER)
+    const [disabled, setDisabled] = useState(true)
+    const [error, setError] = useState('')
+    const [success, setSuccess] = useState(false)
+    const [loading, setLoading] = useState(false)
+
+    useEffect(() => {
+        const isUser = Object.values(user).every(el => Boolean(el))
+        isUser ? setDisabled(false) : setDisabled(true)
+    }, [user])
+
+    function handleChange(event) {
+        const {name, value} = event.target
+        setUser({...user, [name]: value})
+    }
+
+    async function handleSubmit(event) {
+        event.preventDefault()
+        try {
+            setLoading(true)
+            setError('')
+            const response = await axios.post('/api/auth/login', user)
+            console.log(response.data)
+            handleLogin(response.data.userId)
+            setSuccess(true)
+        } catch (error) {
+            catchErrors(error, setError)
+        } finally {
+            setLoading(false)
+        }
+    }
+
+    if (success) {
+        console.log('success', success)
+        return <Redirect to= '/'/>
+    }
+
+    return (
+        <Container>
+            <Row className= 'vh-100 flex-column align-items-center justify-content-center'>
+            <h2>로그인</h2>
+                <Col md={6}>
+            {error && <Alert variant='danger'>
+                {error}
+            </Alert>}
+                <Form onSubmit={handleSubmit}>
+                    <Form.Group>
+                        <Form.Label>이메일</Form.Label>
+                        <Form.Control name='email' type='email'value={user.email} onChange={handleChange}/>
+                    </Form.Group>
+                    <Form.Group>
+                        <Form.Label>비밀번호</Form.Label>
+                        <Form.Control name='password' type='password' value={user.password} onChange={handleChange}/>
+                    </Form.Group>
+                    <Button disabled={disabled || setLoading} type='submit' 
+                    block>
+                        {loading && <Spinner as= 'span' animation= 'border' size='sm' 
+                        role= 'status' aria-hidden=  'true' />}{' '}확인</Button>
+                </Form>
+                </Col>
+            </Row>
+        </Container>
+    )
+}
+
+export default Login

client/src/Components/Signup.js

+import React, { useState, useEffect } from 'react'
+import { Alert, Col, Container, Form, Row, Button } from "react-bootstrap";
+import axios from "axios";
+import catchErrors from '../utils/catchErrors';
+import { Link, Redirect} from 'react-router-dom';
+
+const INIT_USER = {
+    name: '',
+    email: '',
+    password: ''
+}
+
+function Signup() {
+    const [user, setUser] = useState(INIT_USER)
+    const [disabled, setDisabled] = useState(true)
+    const [error, setError] = useState('')
+    const [success, setSuccess] = useState(false)
+
+    useEffect(() => {
+        const isUser = Object.values(user).every(el => Boolean(el))
+        isUser ? setDisabled(false) : setDisabled(true)
+    }, [user])
+
+    function handleChange(event) {
+        const {name, value} = event.target
+        setUser({...user, [name]: value})
+    }
+
+    async function handleSubmit(event) {
+        event.preventDefault()
+        try {
+            setError('')
+            const response = await axios.post('/api/users/signup', user)
+            console.log(response.data)
+            setUser(INIT_USER)
+        } catch (error) {
+            catchErrors(error, setError)
+        }
+    }
+
+    if (success) {
+        return <Redirect to='/'/>
+    }
+
+    return (
+        <Container>
+            <Row className= 'vh-100 flex-column align-items-center justify-content-center'>
+            <h2>회원가입</h2>
+                <Col md={5}>
+            {error && <Alert variant='danger'>
+                {error}
+            </Alert>}
+                <Form onSubmit={handleSubmit}>
+                    <Form.Group>
+                        <Form.Label>이름</Form.Label>              
+                        <Form.Control name='name' value={user.name} onChange={handleChange}/>
+                    </Form.Group>
+                    <Form.Group>
+                        <Form.Label>이메일</Form.Label>
+                        <Form.Control name='email' type='email'value={user.email} onChange={handleChange}/>
+                    </Form.Group>
+                    <Form.Group>
+                        <Form.Label>비밀번호</Form.Label>
+                        <Form.Control name='password' type='password' value={user.password} onChange={handleChange}/>
+                    </Form.Group>
+                    <Button disabled={disabled} type='submit' block>확인</Button>
+                </Form>
+                </Col>
+            </Row>
+        </Container>
+    )
+}
+
+export default Signup
\ No newline at end of file

client/src/Search.js

@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import { Link, Redirect } from 'react-router-dom';
 import ohuh from './ohuh-sm.PNG';
 import Place from './Components/Place';
-import { Container, Form, Row, Col, Card, Image, InputGroup, FormControl, Button, Pagination } from 'react-bootstrap';
+import { Container, Form, Row, Col, Card, Image, InputGroup, FormControl, Button, Pagination, Nav, Navbar } from 'react-bootstrap';
 import Paginations from './pagination.js';
 
 function Search(props) {
@@ -443,16 +443,24 @@ function Search(props) {
 
     return (
         <Container >
-            <Link to="/" className="d-flex justify-content-center"><Image  src={ohuh} /></Link>
+            <Link to="/" className="d-flex justify-content-center"><Image src={ohuh} /></Link>
+            {/* <Row className='d-flex justify-content-flex-start'>
+                <Navbar bg="#fff" variant="light">
+                    <Nav className="mr-auto">
+                        <Nav.Link href="#home">회원가입</Nav.Link>
+                        <Nav.Link href="#features">로그인</Nav.Link>
+                        <Nav.Link href="#pricing">로그아웃</Nav.Link>
+                    </Nav>
+                </Navbar>
+            </Row> */}
             <Row className="mb-2" className="d-flex justify-content-center">
-                <Form style={{width:"90vw"}} onSubmit={handleSubmit}>
+                <Form style={{ width: "90vw" }} onSubmit={handleSubmit}>
                     <InputGroup size="lg">
                         <Link to="/">
-                        <Col>
-                            <Image src={ohuh} fluid width="130px" />
-                        </Col> 
+                            <Col>
+                                {/* <Image src={ohuh} fluid width="130px" /> */}
+                            </Col>
                         </Link>
-                        <Col>
                         <FormControl
                             placeholder="검색어를 입력하세요."
                             value={search}
@@ -461,9 +469,8 @@ function Search(props) {
                             onChange={handleChange}
                         />
                         <InputGroup.Append>
-                            <Button type="submit" variant="outline-secondary" style={{maxHeight: "8vh", maxWidth: "14vh" }} >검색</Button>
+                            <Button type="submit" variant="outline-secondary" style={{ maxHeight: "8vh", maxWidth: "14vh" }} >검색</Button>
                         </InputGroup.Append>
-                        </Col>
                     </InputGroup>
                 </Form>
             </Row>
@@ -471,11 +478,11 @@ function Search(props) {
                 {pagePlace.map((place, index) => {
                     return (
                         <Col key={index} md={6} >
-                            <Card align="center" border="info" style={{margin:"3%"}}>
-                                <Card.Title style={{margin:"3%", fontSize:'200%', fontWeight:'bold'}} >{place.name}</Card.Title>
-                                <Card.Img variant="top" style={{padding:"5%" ,width:"100%", height:"340px"}} src={place.img}  />
+                            <Card align="center" border="info" style={{ margin: "3%" }}>
+                                <Card.Title style={{ margin: "3%", fontSize: '200%', fontWeight: 'bold' }} >{place.name}</Card.Title>
+                                <Card.Img variant="top" style={{ padding: "5%", width: "100%", height: "340px" }} src={place.img} />
                                 <Card.Body >
-                                    <Card.Text style={{overflow:'auto', fontSize:'25px', width: '100%', height:"80px"}} >
+                                    <Card.Text style={{ overflow: 'auto', fontSize: '25px', width: '100%', height: "80px" }} >
                                         {place.address} </Card.Text>
                                     <Button variant="primary" onClick={() => setShow(true)}>{place.name} 자세히 살펴보기</Button>
                                     <Place search={place} show={show} onHide={() => setShow(false)} />

client/src/index.js

@@ -5,6 +5,8 @@ import 'bootstrap/dist/css/bootstrap.min.css';
 import App from './App';
 import Search from './Search';
 import reportWebVitals from './reportWebVitals';
+import Signup from './Components/Signup'
+import Login from './Components/Login'
 import {
   BrowserRouter as Router,
   Switch,
@@ -14,7 +16,7 @@ import {
 import axios from 'axios';
 
 axios.defaults.validateStatus = function (status){
-  return status < 500; //default
+  return status < 500;
 }
 
 ReactDOM.render(
@@ -24,6 +26,8 @@ ReactDOM.render(
         <Route exact path="/" component={App} />
         <Route path="/search" component={Search} />
         <Redirect path="/search/:id" to="/search" />
+        <Route path='/signup' component={Signup}/>
+        <Route path='/login' component={Login} />
       </Switch>
     </Router>
   </React.StrictMode>,

client/src/utils/auth.js

+import axios from "axios"
+
+export function handleLogin(userId) {
+    localStorage.setItem('loginStatus', userId)
+}
+
+export async function handleLogout() {
+    localStorage.removeItem('loginStatus')
+    await axios.get('/api/auth/logout')
+    window.location.href='/'
+}
+
+export function isAuthenticated() {
+    const userId = localStorage.getItem('loginStatus')
+    if (userId) {
+        return userId
+    }else{
+        return false
+    }
+}
\ No newline at end of file

client/src/utils/catchErrors.js

+function catchErrors(error, displayError) {
+    let errorMsg
+
+    if (error.response) {
+        errorMsg = error.response.data
+        console.log(errorMsg)
+    }else if (error.requset) {
+        errorMsg = error.requset
+        console.log(errorMsg)
+    } else {
+        errorMsg = error.message
+        console.log(errorMsg)
+    }
+    displayError(errorMsg)
+}
+
+export default catchErrors
\ No newline at end of file

package.json

@@ -5,10 +5,18 @@
   "main": "index.js",
   "type": "module",
   "dependencies": {
-    "express": "^4.17.1"
+    "axios": "^0.21.1",
+    "bcryptjs": "^2.4.3",
+    "express": "^4.17.1",
+    "jsonwebtoken": "^8.5.1",
+    "mongoose": "^5.11.11",
+    "multer": "^1.4.2",
+    "nodemon": "^2.0.7",
+    "validator": "^13.5.2"
   },
   "devDependencies": {},
   "scripts": {
+    "dev": "nodemon server/server.js",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "repository": {

server/config.js

+const config = {
+    env: process.env.NODE_ENV || 'development',
+    port: process.env.PORT || 3001,
+    jwtSecret: process.env.JWT_SECRET || 'My_Secret_Key',
+    mongoDbUri: process.env.MONGODB_URI || 'mongodb://localhost/react_test',
+    cookieMaxAge: 60 * 60 * 24 * 7 * 1000
+}
+
+export default config
\ No newline at end of file

server/controllers/auth.controller.js

+import User from "../models/User.js"
+import bcrypt from "bcryptjs"
+import jwt from "jsonwebtoken";
+import config from "../config.js";
+
+const login = async (req, res) => {
+    const { email, password } = req.body //구조분해해서 하나씩
+    console.log( email, password)
+    try {             //적어도 3개 맥시멈 10개 가 아니면 
+        // 1) 사용자 확인
+        const user = await User.findOne({email}).select('+password')
+        // 2) 이메일 사용자가 없으면 에러 반환
+        if (!user) {
+            return res.status(404).send(`${email}이 없습니다`)
+        }
+        // 3) 비밀번호 일치 확인
+        const passwordMatch = await bcrypt.compare(password, user.password)
+        // 4) 비밀번호가 맞으면 토큰 생성 후 쿠키에 저장
+        if (passwordMatch) {                             //비밀스럽게 한다 노출되면 안된다 문자열
+            const token = jwt.sign({userId: user._id}, config.jwtSecret,{
+                expiresIn: '7d' //만기날짜 
+            })
+            // 쿠키의 이름, 쿠키의 value
+            res.cookie('token', token, {
+                maxAge: config.cookieMaxAge, //쿠키 얼마동안 살아있을지 생성일이 지나면 자동으로 사라짐
+                httpOnly: true, //client쪽에서 자바스크립트에서 쿠키 접근 불가
+                secure: config.env === 'production' //true가되면 https로만 접근가능
+            })
+            res.json({userId: user._id})
+            // 5) 비밀번호가 틀리면 에러 반환
+        } else {
+            res.status(401).send('비밀번호가 일치하지 않습니다')
+        }
+        
+    } catch (error) { //다른 과정에서 에러가 나면 실행 
+        console.log(error)
+        res.status(500).send('로그인 에러')
+    }
+}
+
+const logout = (req, res) => {
+    res.clearCookie('token')
+    res.send('Logout Successful')
+}
+
+export default { login, logout}
\ No newline at end of file

server/controllers/user.controller.js

+import User from "../models/User.js"
+import isLength from 'validator/lib/isLength.js'
+import isEmail from "validator/lib/isEmail.js"
+import bcrypt from "bcryptjs";
+import multer from "multer";
+
+const upload = multer({ dest: 'uploads/' })
+
+const profileUpload = upload.fields([
+    {name: 'avatar', maxCount: 1},
+    {name: 'gallery', maxCount: 10},
+])
+
+const signup = async (req, res) => {
+    const { name, email, password } = req.body 
+    console.log(name, email, password)
+    try {             
+        if (!isLength(name, {min: 3, max: 10})) {
+            return res.status(422).send('이름은 3-10자 사이입니다')
+        }else if (!isLength(password, {min: 6})) {
+            return res.status(422).send('비밀번호는 6자 이상입니다')
+        }else if (!isEmail(email)) {
+            return res.status(422).send('유효하지 않은 이메일 형식입니다')
+        }
+        const user = await User.findOne({email})
+        if (user) {
+            return res.status(422).send(`${email}이 이미 사용중입니다`)
+        }
+        const hash = await bcrypt.hash(password, 10)
+        const newUser = await new User ({
+            name,
+            email,
+            password: hash
+        }).save()
+        console.log(newUser)
+        res.json(newUser)
+    } catch (error) { 
+        console.log(error)
+        res.status(500).send('회원가입 에러')
+    }
+}
+
+const update = async (req, res) => {
+    try {
+        const {name} = req.body
+        console.log(req.files)
+        const avatar = req.files['avatar'][0]
+        const gallery = req.files['gallery']
+        const user = req.profile
+        user.avatarUrl = avatar.filename
+        gallery.forEach(file => {
+            user.galleryUrls.push(file.filename)
+        });
+        const updatedUser = await user.save()
+        res.json(updatedUser)
+    } catch (error) {
+        console.log(error)
+        res.status(500).send('프로파일 업데이트 실패')
+    }
+}
+
+const getProfile = (req, res) => {
+    res.json(req.profile)
+}
+
+const userById = async (req, res, next, id) => {
+    try {
+        const user = await User.findById(id)
+        if (!user) {
+            res.status(404).send('사용자를 찾을 수 없습니다')
+        }
+        req.profile = user
+        next()
+    } catch (error) {
+        console.log(error)
+        res.status(500).send('사용자 아이디 검색 실패')
+    }
+}
+
+export default { signup, profileUpload, update, getProfile, userById }
\ No newline at end of file

server/models/User.js

+import mongoose from "mongoose";
+
+const { String } = mongoose.Schema.Types
+
+const UserSchema = new mongoose.Schema({
+    name: {
+        type: String,
+        required: true,
+    },
+    email: {
+        type: String,
+        required: true,
+        unique: true,
+    },
+    password: {
+        type: String,
+        required: true,
+        select: false,
+    },
+    role: {
+        type: String,
+        required: true,
+        default: 'user',
+        enum: ['user', 'admin', 'root']
+    },
+    avatarUrl: {
+        type: String
+    },
+    galleryUrls: {
+        type: [String]
+    }
+}, {
+    timestamps: true
+})
+
+export default mongoose.models.User || mongoose.model('User', UserSchema)

server/routes/auth.routes.js

+import express from "express"
+import authCtrl from "../controllers/auth.controller.js";
+
+const router = express.Router()
+
+router.route('/api/auth/login')
+        .post(authCtrl.login)
+
+
+router.route('/api/auth/logout')
+        .get(authCtrl.logout)
+   
+export default router
\ No newline at end of file

server/routes/user.routes.js

+import express from "express";
+import userCtrl from "../controllers/user.controller.js";
+
+const router = express.Router()
+
+router.route('/api/users/signup')
+        .post(userCtrl.signup)
+
+router.route('/api/users/profile/:userId')
+        .get(userCtrl.getProfile)
+        .put(userCtrl.profileUpload, userCtrl.update)
+
+router.param('userId', userCtrl.userById)
+
+export default router
\ No newline at end of file

server/server.js

 import express from 'express'
+import connectDb from "./utils/connectDb.js"
+import userRouter from "./routes/user.routes.js"
+import authRouter from "./routes/auth.routes.js"
+
+connectDb()
 
 const app = express()
 
-// app.use(express.static('../client/build'))
+app.use('/images', express.static('uploads/'))
 
-app.get('/', (req,res) => {
-    res.send('Hello')
-})
+app.use(express.json())
 
-app.get('/home', (req,res) => {
-    res.send('Home page')
-})
+app.use(userRouter)
+app.use(authRouter)
 
-app.put('/signin', (req,res) => {
-    res.send('Sign in')
+app.get('/', (req,res) => {
+    res.send('Hello world, 안녕하세요.')
 })
 
-app.listen(3001, () =>{
-    console.log(('Server is listening on port 3001'))
+app.listen(3001, () => {
+    console.log('Listening on port 3001')
 })
\ No newline at end of file

server/utils/connectDb.js

@@ -8,7 +8,7 @@ async function connectDb() {
         return
     }
 
-    const db = await mongoose.connect(config.mongoDburi, {
+    const db = await mongoose.connect(config.mongoDbUri, {
         useNewUrlParser: true,
         useUnifiedTopology: true,
         useFindAndModify: false,