qwe

client/package.json

@@ -8,6 +8,7 @@
     "@testing-library/user-event": "^12.6.0",
     "axios": "^0.21.1",
     "bootstrap": "^4.5.3",
+    "multer": "^1.4.2",
     "react": "^17.0.1",
     "react-bootstrap": "^1.4.0",
     "react-daum-postcode": "^2.0.2",

client/src/Pages/Mypage.js

@@ -4,10 +4,12 @@ import { Link } from 'react-router-dom';
 import person from '../person.svg';
 import mypagetiger from '../mypagetiger.svg';
 import catchErrors from '../utils/catchErrors';
-import { isAuthenticated } from '../utils/auth'
+import { isAuthenticated } from '../utils/Auth'
+import axios from 'axios';
 
 const INIT_PROFILE = {
   name: "",
+  avatar: "",
   tel: ""
 }
 
@@ -20,8 +22,8 @@ function Mypage() {
 
   async function getProfile(user) {
     try {
-      const response = await axios.get(`/api/users/profile/${user}`)
-      setProfile(response, data)
+      const response = await axios.get(`/api/users/Mypage/${user}`)
+      setProfile(response.data)
     } catch (error) {
       catchErrors(error, setError)
     }
@@ -38,13 +40,13 @@ function Mypage() {
       <Card md={3} className="pt-3 mb-4" style={{ background: '#F7F3F3' }}>
         <Row>
           <Col md={4} className="text-center">
-            <Image src={person} roundedCircle className="img-thumbnail" width={"170rem"} />
+            <Image src={person && `/image/${profile.avatarUrl}`} roundedCircle className="img-thumbnail" width={"170rem"} />
           </Col>
           <Col>
             <Row className="mt-4 text-center">
               <Col>
                 <h2>
-                  <strong>@Login.user</strong> <small>님</small>
+                  <strong>{user.name}</strong> <small>님</small>
                 </h2>
               </Col>
             </Row>
@@ -57,7 +59,7 @@ function Mypage() {
                   </strong>
                 </Link>
                   {/* 홈페이지로 돌아가기 */}
-                  에 오신 <em>@Login.user</em> 님,<br></br>
+                  에 오신 <em>{user.name}</em> 님,<br></br>
                 진심으로 환영합니다! 즐거운 쇼핑 되세요.</h4>
                 <Row className="mr-1 text-muted d-flex justify-content-end">
                   <a href="mailto:shoppingmall_KU@korea.ac.kr">

server/app.js

@@ -13,6 +13,7 @@ connectDb()
 
 const app = express();
 
+app.use('/images', express.static('uploads/')) 
 
 app.use(express.json());
 app.use(cors())

server/controllers/user.controller.js

 import User from "../models/User.js";
 import isLength from 'validator/lib/isLength.js';
 import bcrypt from 'bcryptjs';
+import multer from "multer";
+
+const upload = multer({ dest: 'uploads/' }) //multer 홈페이지 참고 // uploads가 어디인지 dest에 저장함.
+
+const profileUpload = upload.fields([ //.single 한개, .fileds 여러개
+    { name: 'avatar', maxCount: 1 },
+])
 
 const signup = async (req, res) => {
     console.log(req.body)
@@ -38,8 +45,37 @@ const signup = async (req, res) => {
     }
 }
 
-const hello = (req, res) => {
-    res.send('Hello from users contriller')
+
+const update = async (req, res) => {
+    try {
+        const { name } = req.body
+        const avatar = req.files['avatar'][0]
+        const user = req.profile
+        user.avatarUrl = avatar.filename
+        const updateUser = await user.save()
+        res.json(updateUser)
+    } 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, hello }
+export default { signup, profileUpload, update, getProfile, userById}
\ No newline at end of file

server/models/User.js

@@ -16,28 +16,31 @@ const UserSchema = new mongoose.Schema({
         type: String,
         required: true,
     },
-    number1:{
-        type:String,
-        required:true,
-        unique:true
+    number1: {
+        type: String,
+        required: true,
+        unique: true
     },
-    number2:{
-        type:String,
-        required:true,
-        unique:true
+    number2: {
+        type: String,
+        required: true,
+        unique: true
     },
-    tel:{
-        type:String,
-        required:true,
-        unique:true
+    tel: {
+        type: String,
+        required: true,
+        unique: true
     },
     role: {
         type: String,
         required: true,
         default: 'user',
         enum: ['user', 'admin', 'root']
-    }
-}, {
+    },
+    avatarUrl: {
+        type: String
+
+    }, 
     timestamps: true
 })
 

server/routes/user.routes.js

@@ -5,6 +5,12 @@ const router = express.Router()
 
 router.route('/signup')
     .post(userCtrl.signup)
-    .get(userCtrl.hello)
+
+router.route('/api/users/Mypage/:userId')
+    .get(userCtrl.getProfile)
+    .put(userCtrl.profileUpload, userCtrl.update)
+
+router.param('userId', userCtrl.userById)
+
 
 export default router
\ No newline at end of file