마이페이지

client/src/apis/auth.api.js

 import axios from "axios";
 import { baseUrl } from "../utils/baseUrl.js";
-import config from "../utils/clientConfig.js";
 
 const getUser = async () => {
   const url = `${baseUrl}/api/auth/user`
@@ -38,8 +37,13 @@ const confirmMbnum = async (id, token) => {
   return data
 }
 
-const getNickName = async (id) => {
-  const url = `${baseUrl}/api/auth/nickname/${id}`
+const profile = async (formData) => {
+  const url = `${baseUrl}/api/auth/profile`
+  const { data } = await axios.post(url, formData)
+  return data
+}
+const getMember = async (id) => {
+  const url = `${baseUrl}/api/auth/member`
   const { data } = await axios.get(url)
   return data
 }
@@ -62,7 +66,8 @@ const authApi = {
   signup,
   compareId,
   confirmMbnum,
-  getNickName,
+  profile,
+  getMember,
   comparePw,
   modifyUser,
 };

client/src/components/MyInfo/my-info.module.scss

@@ -28,13 +28,45 @@ width: 40%;
     padding-right: 8px;
     text-align: left;
   }
-  
+  .input_file_button{
+    padding: 6px 25px;
+    background-color:#FF6600;
+    border-radius: 4px;
+    color: white;
+    cursor: pointer;
+  }
   .inputContent{
     display: flex;
     justify-content: space-around;
     align-items: center;
     margin: 1rem 0;
   }
+  .box{
+    width:12rem;
+    margin: 0px auto;
+    position: relative;
+  }
+  .box:hover{
+    display: block;
+  }
+.hoverTxt{
+  display: none;
+  position:absolute;
+  top:5rem;
+  left:2.5rem;
+  color : #FEDC00;
+  font-size: 1.5rem;
+}
+.box:hover .hoverTxt{
+  display: block;
+}
+.profile{
+  width: 12rem;
+  height: 12rem;
+}
+.profile:hover{
+    opacity: 0.5;
+    }
   .input {
     margin: 0.5rem 0 0 0;
     padding: 0.5rem 0 0.5rem 0;

client/src/components/ReservationDetails/ReservationDetails.js

+import styles from "./reservation-details.module.scss";
+
+const ReservationDetails = () => {
+    return(
+    <div className={`${styles.width}`}>
+        <header className={`${styles.header}`}>나의 예매 내역</header>
+        <main>
+
+        </main>
+    </div>
+    )
+}
+
+export default ReservationDetails
\ No newline at end of file

client/src/components/ReservationDetails/index.js

+export { default } from "./ReservationDetails"
\ No newline at end of file

client/src/components/ReservationDetails/reservation-details.module.scss

+.width{
+    width : 100%;
+    display: flex;
+    margin-top: 5rem;
+    justify-content: center;
+
+}
+.header{
+    display: flex;
+    justify-content: center;
+    background-color: #FEDC00;
+    width: 80%;
+    text-align: center;
+    font-size: 2.5rem;
+
+}
\ No newline at end of file

client/src/pages/MyPage.js

 import MyInfo from "../components/MyInfo/MyInfo"
+import ReservationDetails from "../components/ReservationDetails";
 
 const MyPage = () => {
     return (
-        <div className="d-flex justify-content-center py-4">
+        <div className="d-flex flex-column justify-content-center align-items-center py-4">
             <MyInfo/>
+            <ReservationDetails/>
         </div>
     )
 }

package-lock.json

@@ -666,6 +666,11 @@
       "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
       "integrity": "sha1-PYyt2Q2XZWn6g1qx+OSyOhBWBac="
     },
+    "fs": {
+      "version": "0.0.1-security",
+      "resolved": "https://registry.npmjs.org/fs/-/fs-0.0.1-security.tgz",
+      "integrity": "sha1-invTcYa23d84E/I4WLV+yq9eQdQ="
+    },
     "fsevents": {
       "version": "2.3.2",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",

package.json

@@ -21,6 +21,7 @@
     "cookie-parser": "^1.4.5",
     "dotenv": "^10.0.0",
     "express": "^4.17.1",
+    "fs": "0.0.1-security",
     "jsonwebtoken": "^8.5.1",
     "multer": "^1.4.2",
     "nodemailer": "^6.6.3",

server/app.js

@@ -7,7 +7,7 @@ const app = express()
 app.use(express.json())
 app.use(express.urlencoded({ extended: true }))
 app.use(cookieParser())
-
+app.use('/upload', express.static('upload'))
 app.use('/api', mainRouter)
 
 

server/controllers/user.controller.js

 import jwt from "jsonwebtoken";
 import config from "../config/app.config.js";
 import { User, Role } from '../db/index.js';
+import fs from "fs";
 
 const getUser = async (req, res) => {
     try {
-        if (req.cookies) {
+        if (req.cookies.butterStudio) {
             const token = req.cookies.butterStudio;
             const decoded = jwt.verify(token, config.jwtSecret);
             res.json(decoded);
@@ -109,38 +110,44 @@ const confirmMbnum = async (req, res) => {
 }
 
 const signup = async (req, res) => {
-    const { userId, userEmail, userNickName, userBirthday, userPassword } = req.body;
+    const { userId, userEmail, userNickName, userBirthday, userMbnum, userPassword } = req.body;
     // 휴대폰 중복 확인
-    const userMbnum = String(req.body.userMbnum);
     try {
         const mbnum = await User.findOne({ where: { phoneNumber: userMbnum } });
-        if (mbnum) {
+        const email = await User.findOne({ where: { email: userEmail } });
+
+        if (mbnum && email) {
+            return res.status(422).send(`이미 있는 이메일, 휴대폰번호입니다.`);
+        } else if (!mbnum && email) {
+            return res.status(422).send(`이미 있는 이메일입니다.`);
+        } else if (mbnum && !email) {
             return res.status(422).send(`이미 있는 휴대폰번호입니다.`);
+        } else {
+            const role = await Role.findOne({ where: { name: "member" } })
+            const newUser = await User.create({
+                userId: userId,
+                email: userEmail,
+                nickname: userNickName,
+                birth: userBirthday,
+                phoneNumber: userMbnum,
+                password: userPassword,
+                roleId: role.id
+            });
+            res.json(newUser);
         }
-        const role = await Role.findOne({ where: { name: "member" } })
-        const newUser = await User.create({
-            userId: userId,
-            email: userEmail,
-            nickname: userNickName,
-            birth: userBirthday,
-            phoneNumber: userMbnum,
-            password: userPassword,
-            roleId: role.id
-        });
-        res.json(newUser);
     } catch (error) {
         console.error(error.message);
         res.status(500).send("회원가입 에러. 나중에 다시 시도 해주세요");
     }
 };
 
-const getNickName = async (req, res) => {
+const getMember = async (req, res) => {
     try {
         const token = req.cookies.butterStudio;
         const decoded = jwt.verify(token, config.jwtSecret);
         if (decoded.role === "member") {
-            const user = await User.findOne({ where: { id: decoded.id }, attributes: ["nickname"] });
-            res.json(user.nickname);
+            const user = await User.findOne({ where: { id: decoded.id } });
+            res.json({nickname : user.nickname, img : user.img});
         } else {
             res.status(401).send("잘못된 접근입니다.");
         }
@@ -150,6 +157,34 @@ const getNickName = async (req, res) => {
     }
 }
 
+const uploadProfile = async (req, res) => {
+    try {
+        const image = req.file.filename;
+        console.log(req.file);
+        const token = req.cookies.butterStudio;
+        const decoded = jwt.verify(token, config.jwtSecret);
+
+        if (decoded) {
+            const img = await User.findOne({ where: { id:decoded.id }, attributes : ["img"]});
+            console.log("여기여기");
+            fs.unlink( "upload"+`\\${img.img}`, function(data){ console.log(data);});
+
+            const user = await User.update({
+                img: image
+            }, { where: { id: decoded.id } });
+            if(user){
+                const success = await User.findOne({ where: { id: decoded.id }, attributes: ["img"]});
+                res.json(success)
+            }else{
+                throw new Error("프로필 등록 실패")
+            }
+        }
+    } catch (error) {
+        console.error(error.message);
+        res.status(500).send("프로필 에러");
+    }
+}
+
 const comparePw = async (req, res) => {
     try {
         //쿠키 안 토큰에서 id추출
@@ -171,26 +206,50 @@ const comparePw = async (req, res) => {
     }
 }
 
+const overlap = async (decoded, dataType, data) => {
+    try {
+        let overlap = await User.findOne({ where: { id: decoded.id } });
+        console.log("overlap : ", overlap, "overlap[dataType] :    ", overlap[dataType]);
+        if (overlap[dataType] === data) {
+            console.log("여기여기")
+            return true
+        } else {
+            overlap = await User.findOne({ where: { id: decoded.id }, attributes: [dataType] });
+            if (overlap) {
+                return false
+            } else {
+                return true
+            }
+        }
+    }catch(error){
+        console.error(error.message);
+    }
+}
+
 const modifyUser = async (req, res) => {
     try {
         const token = req.cookies.butterStudio;
         const decoded = jwt.verify(token, config.jwtSecret);
         const { userEmail, userNickName, userMbnum, userPassword } = req.body;
-        const emailOverlap = await User.findOne({ where: { email: userEmail } });
-        
-        if (emailOverlap) {
-            return res.status(422).send(`이미 있는 이메일입니다.`);
+        const overlapEmail = await overlap(decoded, "email", userEmail);
+        const overlapMbnum = await overlap(decoded, "phoneNumber", userMbnum);
+        console.log("overlapEmail", overlapEmail, " overlapMbnum : ", overlapMbnum);
+
+        if (overlapEmail && overlapMbnum) {
+            const user = await User.update({
+                email: userEmail,
+                nickname: userNickName,
+                phoneNumber: userMbnum,
+                password: userPassword,
+            }, { where: { id: decoded.id } });
+            console.log("user22 :", user);
+            res.json(user);
+        } else if (!overlapEmail && overlapMbnum) {
+            res.status(500).send("이미 있는 이메일입니다.");
+        } else if (overlapEmail && !overlapMbnum) {
+            res.status(500).send("이미 있는 이메일입니다.");
         } else {
-            if (decoded) {
-                let user = await User.findOne({ where: { id: decoded.id } });
-                await user.update({
-                    email : userEmail,
-                    nickname : userNickName,
-                    phoneNumber : userMbnum,
-                    password : userPassword,
-                });
-                res.json(user);
-            }
+            res.status(500).send("이미 있는 이메일, 핸드폰번호입니다.");
         }
     } catch (error) {
         console.error(error.message);
@@ -205,7 +264,8 @@ export default {
     compareId,
     confirmMbnum,
     signup,
-    getNickName,
+    getMember,
+    uploadProfile,
     comparePw,
     modifyUser
 }

server/index.js

@@ -19,7 +19,6 @@ sequelize
         );
 
         const adminRole = await Role.findOne({ where: { name: "admin" } });
-        console.log("adminRole :  ", adminRole);
         if (!adminRole) {
             await User.create({
                 userId: "admin",

server/models/user.model.js

@@ -14,23 +14,26 @@ const UserModel = (sequelize) => {
                 autoIncrement: true,
             },
             userId: {
-                type: DataTypes.STRING,
+                type: DataTypes.STRING
             },
             email: {
-                type: DataTypes.STRING,
+                type: DataTypes.STRING
             },
             nickname: {
-                type: DataTypes.STRING,
+                type: DataTypes.STRING
             },
             birth: {
-                type: DataTypes.STRING,
+                type: DataTypes.STRING
             },
             phoneNumber: {
                 type: DataTypes.STRING
             },
             password: {
-                type: DataTypes.STRING,
+                type: DataTypes.STRING
             },
+            img: {
+                type: DataTypes.STRING
+            }
         },
         {
             timestamps: true,

server/routes/user.route.js

 import express from "express";
 import userCtrl from "../controllers/user.controller.js";
+import multer from "multer"
 
 const router = express.Router();
+const upload = multer({
+    dest: "upload/"
+})
 
 router
     .route("/user")
@@ -19,14 +23,16 @@ router
     .route("/signup")
     .post(userCtrl.signup)
 
+router
+    .post("/profile", upload.single("image"), userCtrl.uploadProfile)
     
 router
     .route("/modify")
     .post(userCtrl.modifyUser)
 
 router
-    .route("/nickname/:id")
-    .get(userCtrl.getNickName)
+    .route("/member")
+    .get(userCtrl.getMember)
 
 router
     .route("/pw/:pw")