049 - 회원정보 수정

server/api/_model/memberModel.js

@@ -1,4 +1,6 @@
 const fs = require('fs');
+const path = require('path');
+
 const db = require('../../plugins/mysql');
 const jwt = require('../../plugins/jwt');
 const sendMailer = require('../../plugins/sendMailer');
@@ -60,8 +62,10 @@ const memberModel = {
 		}
 		// 이미지 업로드 처리
 		delete payload.mb_image;
+		const fileName = jwt.getRandToken(16);
 		if (req.files && req.files.mb_image) {
-			req.files.mb_image.mv(`${MEMBER_PHOTO_PATH}/${payload.mb_id}.jpg`, (err) => {
+			payload.mb_photo = `/upload/memberPhoto/${fileName}.jpg`;
+			req.files.mb_image.mv(`${MEMBER_PHOTO_PATH}/${fileName}.jpg`, (err) => {
 				if (err) {
 					console.log("Member Image Upload Error", err);
 				}
@@ -75,7 +79,69 @@ const memberModel = {
 		return row.affectedRows == 1;
 	},
 	async updateMember(req) {
-		return {body : req.body, file :req.files}
+		// return {body : req.body, file:req.files};
+		const at = moment().format('LT');
+		const ip = getIp(req);
+
+		const payload = {
+			...req.body,
+			mb_update_at : at,
+			mb_update_ip : ip,
+		};
+
+		const admMode = payload.admMode;
+		const mb_id = payload.mb_id;
+		const deleteImage = payload.deleteImage;
+		delete payload.admMode;
+		delete payload.mb_id;
+		delete payload.deleteImage;
+
+		// 비밀번호가 변경 해야 한다
+		if(payload.mb_password) {
+			payload.mb_password = jwt.generatePassword(payload.mb_password);
+		} else {
+			delete payload.mb_password;
+		}
+
+		// 이미지 처리
+		delete payload.mb_image;
+		const mb_photo = payload.mb_photo;
+		const photoPathInfo = path.parse(mb_photo);
+		const oldName = photoPathInfo.name;
+		const oldFile = `${MEMBER_PHOTO_PATH}/${oldName}.jpg`;
+		const cachePath = `${MEMBER_PHOTO_PATH}/.cache`;
+
+		// 기존 이미지 삭제
+		if(deleteImage || (req.files && req.files.mb_image)) {
+			payload.mb_photo = '';
+			try {
+				fs.unlink(oldFile);
+				const cacheDir = fs.readdirSync(cachePath);
+				for(const p of cacheDir) {
+					if(p.startsWith(oldName)) {
+						try {
+							fs.unlinkSync(`${cachePath}/${p}`);
+						} catch(e) {}
+					}
+				}
+			} catch(e) {}
+		}
+
+		// 이미지 업로드 되었으면 처리
+		if(req.files && req.files.mb_image) {
+			const newName = jwt.getRandToken(16);
+			payload.mb_photo = `/upload/memberPhoto/${newName}.jpg`;
+			const newFile = `${MEMBER_PHOTO_PATH}/${newName}.jpg`;
+			req.files.mb_image.mv(newFile, (err)=>{
+				if(err) {
+					console.log('Member Photo 업로드 실패', err);
+				}
+			})
+		}
+
+		const sql = sqlHelper.Update(TABLE.MEMBER, payload, {mb_id});
+		const [row] = await db.execute(sql.query, sql.values);
+		return await memberModel.getMemberBy({mb_id});
 	},
 	async getMemberBy(form, cols = []) {
 		const sql = sqlHelper.SelectSimple(TABLE.MEMBER, form, cols);

src/components/auth/UserUpdateForm.vue

@@ -21,19 +21,21 @@
       :rules="rules.name()"
     />
 
-    <input-password
-      label="비밀번호"
-      v-model="form.mb_password"
-      prepend-icon="mdi-lock"
-      :rules="rules.password({ required: false })"
-    />
+    <template v-if="!member.mb_provider">
+      <input-password
+        label="비밀번호"
+        v-model="form.mb_password"
+        prepend-icon="mdi-lock"
+        :rules="rules.password({ required: false })"
+      />
 
-    <input-password
-      label="비밀번호 확인"
-      v-model="confirmPw"
-      prepend-icon="mdi-lock"
-      :rules="[rules.matchValue(form.mb_password)]"
-    />
+      <input-password
+        label="비밀번호 확인"
+        v-model="confirmPw"
+        prepend-icon="mdi-lock"
+        :rules="[rules.matchValue(form.mb_password)]"
+      />
+    </template>
 
     <input-duplicate-check
       ref="email"
@@ -42,8 +44,8 @@
       prepend-icon="mdi-email"
       :rules="rules.email()"
       :cbCheck="cbCheckEmail"
-			:origin="member.mb_email"
-			:readonly="!admMode"
+      :origin="member.mb_email"
+      :readonly="!admMode"
     />
 
     <input-date
@@ -56,12 +58,13 @@
     <div class="d-flex align-center">
       <display-avatar :member="member" />
       <v-file-input
-				class="ml-2"
+        class="ml-2"
         label="회원이미지"
         v-model="form.mb_image"
         :prepend-icon="null"
         accept="image/jpg,image/png"
       />
+      <v-checkbox v-model="form.deleteImage" label="삭제"> </v-checkbox>
     </div>
 
     <input-radio
@@ -85,9 +88,9 @@
       :addr2.sync="form.mb_addr2"
     />
 
-    <v-btn type="submit" block color="primary" :loading="isLoading"
-      >회원가입</v-btn
-    >
+    <v-btn type="submit" block color="primary" :loading="isLoading">
+      정보 수정
+    </v-btn>
   </v-form>
 </template>
 
@@ -100,7 +103,7 @@ import InputPassword from "../InputForms/InputPassword.vue";
 import InputPhone from "../InputForms/InputPhone.vue";
 import InputPost from "../InputForms/InputPost.vue";
 import InputRadio from "../InputForms/InputRadio.vue";
-import DisplayAvatar from '../layout/DisplayAvatar.vue'
+import DisplayAvatar from "../layout/DisplayAvatar.vue";
 
 export default {
   components: {
@@ -110,7 +113,7 @@ export default {
     InputRadio,
     InputPhone,
     InputPost,
-		DisplayAvatar,
+    DisplayAvatar,
   },
   name: "UserUpdateForm",
   props: {
@@ -144,15 +147,19 @@ export default {
   },
   mounted() {
     this.form = deepCopy(this.member);
-    (this.form.mb_password = ""), (this.form.admMode = this.admMode);
+    this.form.mb_password = "";
+    this.form.admMode = this.admMode;
+    this.form.deleteImage = false;
     delete this.form.mb_create_at;
     delete this.form.mb_create_ip;
     delete this.form.mb_update_at;
     delete this.form.mb_update_ip;
     delete this.form.mb_login_at;
     delete this.form.mb_login_ip;
     delete this.form.mb_leave_at;
-    console.log(this.form);
+  },
+  destroyed() {
+    this.form = null;
   },
   methods: {
     async save() {

src/components/layout/DisplayAvatar.vue

@@ -1,41 +1,46 @@
 <template>
   <v-avatar color="accent" size="32">
-		<template v-if="member">
-			<v-img 
-				v-if="hasImage"
-				:src="memberPhoto"
-				@error="imageError"
-			/>
-			<div v-else>{{ member.mb_name[0] }}</div>
-		</template>
+    <template v-if="member">
+      <v-img v-if="hasImage" :src="memberPhoto" @error="imageError" />
+      <div v-else>{{ member.mb_name[0] }}</div>
+    </template>
     <v-icon v-else>mdi-account</v-icon>
   </v-avatar>
 </template>
 
 <script>
 export default {
   name: "DisplayAvatar",
-	props : {
-		member : {
-			type : Object,
-			default : null,
-		}
-	},
-	data() {
-		return {
-			hasImage : true,
-		}
-	},
-	computed: {
-		memberPhoto() {
-			return this.member.mb_photo || `/upload/memberPhoto/${this.member.mb_id}.jpg?w=32&h=32`;
-		}
-	},
-	methods : {
-		imageError() {
-			this.hasImage = false;
-		}
-	}
+  props: {
+    member: {
+      type: Object,
+      default: null,
+    },
+  },
+  data() {
+    return {
+      hasImage: true,
+    };
+  },
+  computed: {
+    memberPhoto() {
+      if (this.member.mb_photo) {
+				this.hasImage = true;
+        if (this.member.mb_photo.startsWith("/upload")) {
+          return this.member.mb_photo + "?w=32&h=32";
+        } else {
+          return this.member.mb_photo;
+        }
+      } else {
+				this.hasImage = false;
+			}
+    },
+  },
+  methods: {
+    imageError() {
+      this.hasImage = false;
+    },
+  },
 };
 </script>
 

src/components/layout/SiteUser.vue

@@ -32,6 +32,7 @@
         </v-toolbar>
 				<v-card-text>
 					<user-update-form
+						v-if="dialog"
 						:member="member"
 						:isLoading="isLoading"
 						@onSave="save"
@@ -97,8 +98,13 @@ export default {
       this.dialog = false;
     },
 		async save(form) {
+			this.isLoading = true;
 			const data = await this.updateMember(form);
-			console.log(data);
+			if(data) {
+				this.$toast.info(`${this.$store.state.user.member.mb_name}님 정보 수정하였습니다.`);
+				this.closeDialog();
+			}
+			this.isLoading = false;
 		}
   },
 };

src/store/modules/user.js

@@ -76,6 +76,9 @@ export const actions = {
 	async updateMember({commit}, form) {
 		const {$axios} = Vue.prototype;
 		const data = await $axios.patch(`/api/member`, form);
-		return data;
+		if(data) {
+			commit('SET_MEMBER', data);
+		}
+		return !!data;
 	}
 };