12453d

client/src/App.js

@@ -38,6 +38,12 @@ function App() {
           <Route path="/payment" component={Payment} />
           <Route path="/mypage" component={Mypage} />
           <Route path='/kakao' component={() => { window.location.href = 'https://compmath.korea.ac.kr'; return null; }} />
+          <PrivateRoute path="/profile">
+            <Profile />
+          </PrivateRoute>
+          <PrivateRoute path="/profile-edit">
+            <EditProfile />
+          </PrivateRoute>
           <Redirect path="/" to="/" />
         </Switch>
       </Router>

client/src/AuthRoute.js

-import React from 'react'
-import {Route, Redirect} from "react-router-dom"
-
-function AuthRoute({})
\ No newline at end of file

client/src/Pages/Login.js

-import React, { useState, useEffect, useRef } from 'react';
+import React, { useState } from 'react';
 import { Link, Redirect } from 'react-router-dom';
 import { Form, Col, Container, Button, Row } from 'react-bootstrap';
 
@@ -63,6 +63,7 @@ function Login() {
                 </Container>
             </div>
         )
+    
 }
 
 export default Login
\ No newline at end of file

client/src/Pages/Logout.js

+// import { Button } from 'bootstrap'
+// import React from 'react'
+// import { handleLogout } from '../utils/auth'
+
+// function logout() {
+//     return (
+//         <div>
+//             <Button onClick={()=>handleLogout()}>Logout</Button>
+//         </div>
+//     )
+// }
+
+// export default logout

client/src/Pages/PrivateRoute.js

+import React from 'react'
+import { Redirect, Route } from 'react-router-dom'
+import { isAuthenticated } from '../utils/auth'
+
+function PrivateRoute({ path, children }) {
+    if (isAuthenticated()) {
+        return (
+            <Route path={path}>
+                {children}
+            </Route>
+        )
+    } else {
+        return (
+            <Redirect to="/login" />
+        )
+    }
+}
+
+export default PrivateRoute

client/src/Pages/Signup.js

-import React, { useState, useEffect, useRef } from 'react';
-import { Redirect } from 'react-router-dom';
+import React, { useState } from 'react';
+import axios from 'axios'
+import Nav1 from '../Components/MainNav';
+import Nav2 from '../Components/SubNav';
 import { Form, Col, Container, Button, Row, Alert } from 'react-bootstrap'
-import axios from 'axios';
+import catchErrors from '../utils/catchErrors'
 
 const INIT_USER = {
     name: '',
@@ -14,20 +16,15 @@ const INIT_USER = {
 
 function Signup() {
     const [user, setUser] = useState(true)
-    //const [disabled, setDisabled] = useState(true)
     const [error, setError] = useState('')
 
-    //useEffect(() => {
-    //    const isUser = Object.values(user).every(el => Boolean(el))
-    //    isUser ? setDisabled(false) : setDisabled(true)
-    //}, user)
+const [validated, setValidated] = useState(false);
 
     function handleChange(event) {
         const { name, value } = event.target
         setUser({ ...user, [name]: value })
     }
 
-    const [validated, setValidated] = useState(false);
 
     async function handleSubmit(event) {
         event.preventDefault()
@@ -42,31 +39,41 @@ function Signup() {
 
         try {
             setError('')
-            // const response = await axios.post('/api/user/signup', user)
-            const response = await fetch('/api/users/signup', {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json'
-                },
-                body: JSON.stringify(user)
-            })
-            const data = await response.json()
-            console.log(data)
+            const response = await axios.post('/api/users/signup', user)
+            console.log(response.data)
         } catch (error) {
-            console.log(error)
-            setError('다시 시도하세요.')
+            catchErrors(error, setError)
         }
+        
+        
+
+    }
+    function checkPassword(event){
+        const p1=user.password
+        const p2=user.password2
+
+        if(p1 !== p2){
+            event.preventDefault();
+            event.stopPropagation();
+            alert('비밀번호가 일치하지 않습니다.')
+            return false
+            
+        }else{
+            return true
         }
+    }
+        
 
     return (
         <div>
             <Container className="my-5">
-                {error && <Alert variant='danger'>
-                    {error}
-                </Alert>}
+
                 <Row className="justify-content-center">
                     <Col md={6} xs={10} className="border" style={{ background: '#F7F3F3' }}>
                         <h2 className="text-center mt-5">Sign Up</h2>
+                        {error && <Alert variant='danger'>
+                            {error}
+                        </Alert>}
                         <Form
                             noValidate validated={validated}
                             onSubmit={handleSubmit}
@@ -134,7 +141,8 @@ function Signup() {
                                         style={{ width: '160px' }}
                                         value={user.password}
                                         required
-                                        onChange={handleChange} />
+                                        onChange={handleChange}
+                                    />
                                     <Form.Control.Feedback className="text-center" type="invalid">
                                         비밀번호를 입력하세요.
                                     </Form.Control.Feedback>
@@ -150,7 +158,8 @@ function Signup() {
                                         style={{ width: '160px' }}
                                         value={user.password2}
                                         required
-                                        onChange={handleChange} />
+                                        onChange={handleChange}
+                                         />
                                     <Form.Control.Feedback type="invalid"> 비밀번호를 한번 더 입력하세요.
                                     </Form.Control.Feedback>
                                 </Form.Row>
@@ -169,7 +178,9 @@ function Signup() {
                                 </Form.Row>
                             </Form.Group>
                             <Button
-                                style={{ background: '#91877F', borderColor: '#91877F' }} type="submit" block>
+                                style={{ background: '#91877F', borderColor: '#91877F' }} type="submit" block
+                                onClick={checkPassword}
+                                >
                                 Sign Up
                             </Button>
                         </Form>

client/src/utils/Auth.js

-const users=[
-    { id:'wodus', password:'123'},
-    {id:'kim', password:'456'},
-]
+import axios from "axios"
 
-export function signIn({id,password}){
-    const user=users.find(user=>user.id===id && user.password===password);
-    if (user===undefined) throw new Error();
-    return user;
+export function handleLogin(){
+    localStorage.setItem('loginStatus','true')
 }
 
-export function isAuthenticated(){
-    const userId = localStorage.getItem("loginStatus")
-    if (userId) {
-        return userId
-    } else {
-        return false
-    }
+export async function handleLogout(){
+    localStorage.removeItem('loginStatus')
+    await axios.get('/api/auth/logout')
 }
\ No newline at end of file

client/src/utils/catchErrors.js

+<<<<<<< HEAD
 // import React from 'react'
 
 function catchErrors(error, displayError) {
@@ -19,3 +20,22 @@ function catchErrors(error, displayError) {
 }
 
 export default catchErrors
+=======
+function catchErrors(error,displayError){ 
+    let errorMsg
+
+    if(error.response){
+        errorMsg=error.response.data
+        console.log(errorMsg)
+    }else if(error.request){
+        errorMsg=error.request
+        console.log(errorMsg)
+    }else{
+        errorMsg=error.message
+        console.log(errorMsg)
+    }
+    displayError(errorMsg)
+}
+
+export default catchErrors
+>>>>>>> origin/jaeyeon

server/app.js

@@ -7,6 +7,7 @@ import cartRouter from './routes/cart.routes.js';
 import path from 'path'
 import kakaopayRoutes from './routes/kakaopay.routes.js'
 import config from './config.js'
+import authRouter from './routes/auth.routes.js'
 import cors from 'cors'
 
 connectDb()
@@ -24,6 +25,7 @@ app.use(express.static(path.join(process.cwd(), 'dist')))
 // app.use('/', indexRouter);
 app.use('/', kakaopayRoutes)
 app.use('/api/users',userRouter)
+app.use('/api/auth',authRouter)
 app.use('/api/product', productRouter)
 app.use('/api/addcart', cartRouter)
 

server/config.js

@@ -3,7 +3,8 @@ const config = {
     port: process.env.PORT || 3001,
     jwtSecret: process.env.JWT_SECRET || 'My_Secret_Key',
     mongoDbUri: process.env.MONGEDB_URI || 'mongodb://localhost/shopping-mall',
-    kakaoAdminKey: 'b2dda7685c5b2990684d813e362cff07'
+    kakaoAdminKey: 'b2dda7685c5b2990684d813e362cff07',
+    cookieMaxAge: 60 * 60 * 24 * 7 * 1000
 }
 
 // const config = {

server/controllers/auth.controller.js

+import User from '../schemas/User.js'
+import bcrypt from 'bcryptjs'
+import jwt from 'jsonwebtoken'
+import config from '../config.js'
+
+const login = async(req,res)=>{
+    const {id, password} =req.body
+    console.log(id,password)
+    try{
+        const user=await User.findOne({id}).select('+password')
+        if(!user){
+            return res.status(404).send(`${id}가 존재하지 않습니다.`)
+
+        }
+        const passwordMatch= await bcrypt.compare(password, user.password)
+
+        if(passwordMatch){
+            const token=jwt.sign({userId:user._id},config.jwtSecret,{
+                expiresIn:'3d'
+            })
+            res.cookie('token',token,{
+                maxAge:config.cookieMaxAge,
+                httpOnly:true,
+                secure:config.env ==='production'
+            })
+            res.send('로그인 되었습니다.')
+        }else{
+            res.status(401).send('비밀번호가 일치하지 않습니다.')
+        }
+    }catch(error){
+        console.log(error)
+        res.status(500).send('로그인 실패. 다시 시도하세요.')
+    }
+}
+
+// const logout =(req,res)=>{
+//     res.clearCookie('token')
+//     res.send('로그아웃 되었습니다.')
+// }
+
+export default {login}
\ No newline at end of file

server/controllers/user.controller.js

@@ -11,37 +11,33 @@ const profileUpload = upload.fields([ //.single 한개, .fileds 여러개
 
 const signup = async (req, res) => {
     console.log(req.body)
-    console.log('req.body.name=', req.body.name)
-    const { name, number1, number2, id, password, password2, tel } = req.body
+    const { name, number1, number2, id, password,  tel } = req.body
     try {
-        if (!isLength(password, { min: 8, max: 15 })) {
-            return res.status(422).json({ message: '비밀번호는 8-15자리로 입력해주세요.' })
+        if(!isLength(password,{min:8, max:15})){
+            return res.status(422).send('비밀번호는 8-15자리로 입력해주세요.')
         }
-        // if (!isLength(name, { min: 3, max: 10 })) {
-        //     return res.status(422).send('이름은 3-10자로 입력해주세요.')
-        // } else if (!isLength(password, { min: 8, max: 15 })){
-        //     return res.status(422).json({message: '비밀번호는 8-15자리로 입력해주세요.'})
-        // }
-        // const user = await User.findOne({id})
-        // if (user) {
-        //     return res.status(422).send(`${id}가 이미 사용중입니다.`)
-        // }
-        const hash = await bcrypt.hash(password, 10)
-        const newUser = await new User({
+        const user=await User.findOne({id})
+        if(user){
+            return res.status(422).send(`${id}가 이미 사용중입니다.`)
+        }
+        
+
+        const hash=await bcrypt.hash(password,10)
+
+        const newUser = await new User ({
             name,
             number1,
             number2,
             id,
-            password: hash,
-            password2,
-            tel
+            password:hash,
+            tel,
         }).save()
         console.log(newUser)
         res.json(newUser)
 
     } catch (error) {
         console.log(error)
-        res.status(500).json({ message: '죄송합니다. 다시 입력해 주십시오.' })
+        res.status(500).send('죄송합니다. 다시 입력해 주십시오.')
     }
 }
 

server/package.json

@@ -15,6 +15,7 @@
     "bcryptjs": "^2.4.3",
     "cors": "^2.8.5",
     "express": "^4.17.1",
+    "jsonwebtoken": "^8.5.1",
     "mongoose": "^5.11.9",
     "multer": "^1.4.2",
     "node-fetch": "^2.6.1",

server/routes/auth.routes.js

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

server/schemas/Product.js

 import mongoose from 'mongoose'
 
-const { String, Number, Array } = mongoose.Schema.Types
+const { String} = mongoose.Schema.Types
 
 const ProductSchema = new mongoose.Schema({
     pro_name: {

server/schemas/User.js

-import mongoose from 'mongoose'
+import mongoose from "mongoose";
 
 const { String } = mongoose.Schema.Types
 
@@ -10,35 +10,30 @@ const UserSchema = new mongoose.Schema({
     id: {
         type: String,
         required: true,
-        unique: true
+        unique: true,
     },
     password: {
         type: String,
         required: true,
-        select: false
     },
-    confirm_password:{
-        type: String,
-        required: true,
-        select: false
-    },
-    phoneNumber: {
+
+    number1: {
         type: String,
         required: true,
     },
-    role: {
+    number2: {
         type: String,
         required: true,
-        default: 'user',
-        enum: ['user', 'admin', 'root']
     },
-    birth: {
+    tel: {
         type: String,
         required: true,
     },
-    sex: {
+    role: {
         type: String,
         required: true,
+        default: 'user',
+        enum: ['user', 'admin', 'root']
     }
 }, {
     timestamps: true