이미 계정이 있으시다구요?
@@ -172,29 +281,300 @@ import passwordEye from '@/img/login/passwordeye.png';
import kakao from '@/img/login/kakaologo.png';
import google from '@/img/login/googlelogo.png';
import naver from '@/img/login/naverlogo.png';
+import { registerUser } from '@/api/index';
+import {
+ checkNicknameDuplicate,
+ checkEmailDuplicate,
+ sendAuthCode,
+ verifyAuthCode,
+} from '@/api/index';
+import {
+ validateName,
+ validateNickname,
+ validateEmail,
+ validatePassword,
+ validatePhone,
+ validateYear,
+ validateMonth,
+ validateDay,
+ validateBirth,
+} from '@/utils/validation';
export default {
data() {
return {
+ name: '',
+ nickname: '',
+ nicknameError: '',
+ nicknameSuccess: '',
+ isNicknameDuplicate: false,
+ nicknameChecked: false,
+ email: '',
+ emailError: '',
+ isEmailDuplicate: false,
+ emailcode: '',
+ emailCodeMessage: '',
+ emailCodeVerified: false,
+ password: '',
+ passwordcheck: '',
+ passwordMatchMessage: '',
passwordEye: passwordEye,
birthYear: '',
birthMonth: '',
birthDay: '',
+ birthYearValid: true,
+ birthMonthValid: true,
+ birthDayValid: true,
+ birthYearValidationMessage: '',
+ birthMonthValidationMessage: '',
+ birthDayValidationMessage: '',
+ birthValidationMessage: '',
+ isBirthValid: true,
+ phone: '',
+ gender: 'choice',
+ agreecheck1: false,
+ agreecheck2: false,
+ formSubmitted: false,
+ formErrorMessage: '',
kakao: kakao,
google: google,
naver: naver,
};
},
+ computed: {
+ isNameValid() {
+ return validateName(this.name);
+ },
+ isNicknameValid() {
+ return validateNickname(this.nickname);
+ },
+ isEmailValid() {
+ return validateEmail(this.email);
+ },
+ isPasswordValid() {
+ return validatePassword(this.password);
+ },
+ isPasswordMatch() {
+ return this.password === this.passwordcheck;
+ },
+ isPhoneValid() {
+ return validatePhone(this.phone);
+ },
+ isFormValid() {
+ return (
+ this.isNameValid &&
+ this.isEmailValid &&
+ this.isNicknameValid &&
+ this.isPasswordValid &&
+ this.isPasswordMatch &&
+ this.isBirthValid &&
+ this.isPhoneValid &&
+ this.gender !== 'choice' &&
+ this.agreecheck1 &&
+ this.agreecheck2 &&
+ !this.nicknameError &&
+ !this.emailError
+ );
+ },
+ },
+ watch: {
+ name() {
+ this.validateName();
+ },
+ nickname() {
+ this.validateNickname();
+ },
+ email() {
+ this.validateEmailWatcher();
+ },
+ password() {
+ this.validatePassword();
+ },
+ passwordcheck() {
+ this.validatePasswordMatch();
+ },
+ birthYear() {
+ this.validateBirthYear();
+ },
+ birthMonth() {
+ this.validateBirthMonth();
+ },
+ birthDay() {
+ this.validateBirthDay();
+ },
+ phone() {
+ this.validatePhone();
+ },
+ },
methods: {
- validateBirthInput(event) {
- // 입력 검증 로직을 여기에 추가하세요.
- // 예: 연도가 4자리인지, 월이 01-12 범위 내에 있는지, 일이 01-31 범위 내에 있는지 등
- const yearInput = event.target.value; // 현재 입력된 연도
- this.birthYearValid = yearInput.length === 4; // 연도가 4자리인지 확인
+ validateName() {
+ return validateName(this.name);
+ },
+ validateNickname() {
+ this.nicknameChecked = false;
+ if (!validateNickname(this.nickname)) {
+ this.nicknameError =
+ '3자 이상 10자 이하로 문자(영어, 한국어), 숫자, 특수문자를 포함해주세요';
+ } else {
+ this.nicknameError = '';
+ }
+ },
+ async validateAndCheckNickname() {
+ this.validateNickname();
+ if (this.nicknameError) {
+ this.nicknameSuccess = '';
+ this.isNicknameDuplicate = false;
+ return;
+ }
+ this.nicknameChecked = true;
+ this.nicknameError = '';
+ this.nicknameSuccess = '';
+ try {
+ const response = await checkNicknameDuplicate(this.nickname);
+ if (response.data) {
+ this.nicknameError = '중복된 닉네임입니다';
+ this.isNicknameDuplicate = true;
+ } else {
+ this.nicknameSuccess = '사용 가능한 닉네임입니다';
+ this.isNicknameDuplicate = false;
+ }
+ } catch (error) {
+ this.nicknameError = '닉네임 중복 체크 중 오류가 발생했습니다';
+ this.isNicknameDuplicate = true;
+ }
+ },
+ validateEmailWatcher() {
+ return validateEmail(this.email);
+ },
+ async validateAndCheckEmail() {
+ if (!validateEmail(this.email)) {
+ this.emailError = '이메일 주소를 확인해주세요';
+ this.isEmailDuplicate = false;
+ return;
+ }
+ this.emailError = '';
+ try {
+ const response = await checkEmailDuplicate(this.email);
+ if (response.data) {
+ this.emailError = '중복된 이메일입니다';
+ this.isEmailDuplicate = true;
+ } else {
+ this.emailError = '인증 코드가 전송되었습니다';
+ this.isEmailDuplicate = false;
+ await sendAuthCode(this.email);
+ }
+ } catch (error) {
+ this.emailError = '이메일 중복 체크 중 오류가 발생했습니다';
+ this.isEmailDuplicate = true;
+ }
+ },
+ async verifyEmailCode() {
+ try {
+ const response = await verifyAuthCode(this.email, this.emailcode);
+ if (response.data) {
+ this.emailCodeMessage = '이메일 인증이 완료되었습니다';
+ this.emailCodeVerified = true;
+ this.emailError = '';
+ } else {
+ this.emailCodeMessage = '인증 코드가 올바르지 않습니다';
+ this.emailCodeVerified = false;
+ }
+ } catch (error) {
+ this.emailCodeMessage = '이메일 인증 코드 검증 중 오류가 발생했습니다';
+ this.emailCodeVerified = false;
+ }
+ },
+ validatePassword() {
+ return validatePassword(this.password);
+ },
+ validatePasswordMatch() {
+ if (this.password === this.passwordcheck) {
+ this.passwordMatchMessage = '비밀번호가 일치합니다';
+ } else {
+ this.passwordMatchMessage = '비밀번호가 일치하지 않습니다';
+ }
+ return this.password === this.passwordcheck;
+ },
+ validateBirthYear() {
+ const isValid = validateYear(this.birthYear);
+ this.birthYearValid = isValid;
+ this.updateBirthValidationMessage();
+ return isValid;
+ },
+ validateBirthMonth() {
+ const isValid = validateMonth(this.birthMonth);
+ this.birthMonthValid = isValid;
+ this.updateBirthValidationMessage();
+ return isValid;
+ },
+ validateBirthDay() {
+ const isValid = validateDay(this.birthDay);
+ this.birthDayValid = isValid;
+ this.updateBirthValidationMessage();
+ return isValid;
+ },
+ updateBirthValidationMessage() {
+ const isValid = validateBirth(
+ this.birthYear,
+ this.birthMonth,
+ this.birthDay,
+ );
+ this.birthValidationMessage = isValid ? '' : '유효한 날짜를 입력해주세요';
+ this.isBirthValid = isValid;
+ },
+ validatePhone() {
+ return validatePhone(this.phone);
},
gotoLogin() {
this.$router.push('/login');
},
+ async submitForm() {
+ this.formSubmitted = true;
+ console.log(this.isFormValid);
+ console.log(this.isNameValid);
+ console.log(this.isEmailValid);
+ console.log(this.isNicknameValid);
+ console.log(this.isPasswordValid);
+ console.log(this.isPasswordMatch);
+ console.log(this.isBirthValid);
+ console.log(this.isPhoneValid);
+ console.log(this.isNicknameValid);
+ console.log(this.gender);
+ console.log(this.agreecheck1);
+ console.log(this.agreecheck2);
+ console.log(this.nicknameError);
+ console.log(this.emailError);
+ if (this.isFormValid) {
+ try {
+ const userData = {
+ name: this.name,
+ nickname: this.nickname,
+ email: this.email,
+ password: this.password,
+ birth: `${this.birthYear}-${this.birthMonth}-${this.birthDay}`,
+ phone: this.phone,
+ gender: this.gender.toUpperCase(),
+ provider_type: 'LOCAL',
+ agreecheck1: this.agreecheck1,
+ agreecheck2: this.agreecheck2,
+ };
+
+ const response = await registerUser(userData);
+ if (response.status === 200) {
+ console.log('회원가입 성공');
+ this.$router.push('/main'); // 회원가입 성공 후 메인 페이지로 이동
+ } else {
+ console.log('회원가입 실패');
+ this.formErrorMessage = '회원가입에 실패했습니다.';
+ }
+ } catch (error) {
+ console.log('API 호출 오류:', error);
+ this.formErrorMessage = '회원가입 중 오류가 발생했습니다.';
+ }
+ } else {
+ this.formErrorMessage = '위에 모든 사항을 입력해주세요';
+ }
+ },
},
};
@@ -211,6 +591,9 @@ export default {
position: relative;
width: 350px;
}
+.input.my-input:focus {
+ border-color: var(--mint-color); /* 원하는 색상으로 변경 */
+}
.nameinput,
.passwordinput,
.passwordcheckinput,
@@ -303,6 +686,20 @@ export default {
border: 0;
padding-left: 10px;
}
+#name:focus,
+#nickname:focus,
+#email:focus,
+#emailcode:focus,
+#password:focus,
+#passwordcheck:focus,
+#birthYear:focus,
+#birthMonth:focus,
+#birthDay:focus,
+#phone:focus,
+#gender:focus {
+ border: 2px solid var(--mint-color) !important;
+ outline: none;
+}
#registerclear {
box-sizing: border-box;
width: 100%;
@@ -394,4 +791,17 @@ export default {
font-weight: bold;
cursor: pointer;
}
+.success {
+ color: var(--mint-color);
+}
+.warning {
+ color: #ff4057;
+}
+.validation-text {
+ margin-top: 5px;
+ font-size: 12.5px;
+ display: flex;
+ flex-direction: row-reverse;
+ justify-content: space-between;
+}
diff --git a/src/views/mypage/MypageEdit.vue b/src/views/mypage/MypageEdit.vue
index 8f987bc..43205f0 100644
--- a/src/views/mypage/MypageEdit.vue
+++ b/src/views/mypage/MypageEdit.vue
@@ -2,8 +2,8 @@
프로필 수정
-
+
매장위치 {{ storeReview.floor }}층
@@ -27,23 +32,26 @@
이런점이 좋았어요!!
-
-
- 재방문 하고 싶어요
- {{ storeReview.revisitCount }}
-
-
- 서비스가 마음에 들어요
- {{ storeReview.serviceSatisfactionCount }}
-
-
- 가격이 합리적입니다
- {{ storeReview.reasonablePriceCount }}
-
-
- 매장이 청결합니다
- {{ storeReview.cleanlinessCount }}
-
+
+
+ 재방문 하고 싶어요
+ {{ storeReview.revisitCount }}
+
+
+ 서비스가 마음에 들어요
+ {{ storeReview.serviceSatisfactionCount }}
+
+
+ 가격이 합리적입니다
+ {{ storeReview.reasonablePriceCount }}
+
+
+ 매장이 청결합니다
+ {{ storeReview.cleanlinessCount }}
+
+
+
+>>>>>>> 6469ff4ac46c00fe8a61e2e23fcb61ad7db6410d
@@ -96,6 +104,7 @@
+
@@ -107,11 +116,16 @@ import reviewcard from '@/components/store/ReviewCard.vue';
import ProgressBar from '@/components/store/ProgressBar.vue';
import reviewbutton from '@/components/review/ReviewButton.vue';
import scrollToTopButton from '@/components/store/ScrollToTopButton.vue';
+
import { Swiper, SwiperSlide } from 'swiper/vue';
import 'swiper/css';
export default {
data() {
+
+ const postData = data.timelinePost;
+ console.log('postData:', postData); // 데이터를 콘솔에 출력합니다.
+
return {
storeReview: { reviews: [], commonReviewStats: {} },
likeReview,
@@ -212,6 +226,7 @@ export default {
\ No newline at end of file
diff --git a/src/views/review/ReviewWrite.vue b/src/views/review/ReviewWrite.vue
index c26abb1..68e8fd5 100644
--- a/src/views/review/ReviewWrite.vue
+++ b/src/views/review/ReviewWrite.vue
@@ -87,13 +87,8 @@ export default {
this.paymentType = this.$route.query.paymentType || '';
this.approvalNumber = this.$route.query.approvalNumber || '';
this.purchaseDate = this.$route.query.purchaseDate || '';
- this.shopName = this.$route.query.shopName || '';
- this.paymentType = this.$route.query.paymentType || '';
- // approvalNumber가 필요하다면, confirmReceipt에서 이를 보내는 로직 추가 필요
- // this.approvalNumber = this.$route.query.approvalNumber || '';
- this.purchaseDate = this.$route.query.selectedDate || '';
this.selectedTime = this.$route.query.selectedTime || '';
- this.fetchSurveyOptions(); // fetchSurveyOptions 메서드 호출
+ this.fetchSurveyOptions();
},
computed: {
currentLength() {
@@ -110,7 +105,7 @@ export default {
this.surveyOptions = response.map(selection => ({
text: selection, selected: false
}));
- console.log("surveyOptions updated:", this.surveyOptions); // 추가된 로그
+ console.log("surveyOptions updated:", this.surveyOptions);
}
else {
console.error('Review selections not found in the response.');
@@ -123,7 +118,14 @@ export default {
const files = event.target.files;
const maxFiles = 3;
- if (files.length > maxFiles) {
+ // 현재 업로드된 이미지의 개수를 확인
+ const currentImageCount = this.uploadedImages.length;
+
+ // 추가로 선택된 이미지 파일 개수를 확인
+ const newFilesCount = files.length;
+
+ // 현재 업로드된 이미지 개수와 추가로 선택된 이미지 파일 개수의 합이 최대 개수를 초과할 경우 경고 메시지 표시
+ if (currentImageCount + newFilesCount > maxFiles) {
alert(`최대 ${maxFiles}개까지 선택할 수 있습니다.`);
event.target.value = '';
return;
@@ -138,9 +140,8 @@ export default {
img.src = reader.result;
img.onload = () => {
const resizedImage = this.resizeImage(img);
- this.uploadedImages.push({ preview: resizedImage });
+ this.uploadedImages.push({ file, preview: resizedImage.toDataURL() });
};
- console.log("uploadimages : " + this.uploadedImages);
};
}
},
@@ -156,71 +157,57 @@ export default {
}
},
resizeImage(img) {
- const MAX_SIZE = 357.85;
+ const canvas = document.createElement('canvas');
+ const max_size = 357.85;
let width = img.width;
let height = img.height;
- let ratio = 1;
if (width > height) {
- ratio = MAX_SIZE / width;
+ if (width > max_size) {
+ height *= max_size / width;
+ width = max_size;
+ }
} else {
- ratio = MAX_SIZE / height;
+ if (height > max_size) {
+ width *= max_size / height;
+ height = max_size;
+ }
}
- width *= ratio;
- height *= ratio;
-
- const canvas = document.createElement('canvas');
canvas.width = width;
canvas.height = height;
const ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0, width, height);
- return canvas.toDataURL('image/jpeg');
+ return canvas;
},
async confirmUpload() {
try {
- // 선택된 필수 설문과 선택 설문 항목들을 필터링해서 배열로 만듭니다.
- const selectedEssentialItems = this.surveyEssential.filter(item => item.selected).map(item => item.text);
- const selectedOptionalItems = this.surveyOptions.filter(item => item.selected).map(item => item.text);
-
- // FormData 객체를 생성합니다.
const formData = new FormData();
- // 리뷰 데이터를 하나의 객체로 묶습니다.
+ // 리뷰 데이터 객체 생성
const reviewData = {
userNickname: this.userNickname,
contents: this.reviewText,
shopName: this.shopName,
- // paymentType: this.paymentType,
paymentNum: this.approvalNumber,
purchaseDate: this.purchaseDate,
selectedTime: this.selectedTime,
surveyData: {
- essential: selectedEssentialItems,
- optional: selectedOptionalItems
+ essential: this.surveyEssential.filter(item => item.selected).map(item => item.text),
+ optional: this.surveyOptions.filter(item => item.selected).map(item => item.text)
}
};
- // 리뷰 데이터를 문자열화하여 FormData에 추가합니다.
formData.append('review', JSON.stringify(reviewData));
- this.uploadedImages.forEach((image, index) => {
-
- // 이미지 데이터를 File 객체로 변환
- const imageFile = new File([image.preview], `image_${index}.jpg`);
-
- // FormData에 File로 첨부
- formData.append('images', imageFile);
+ // 업로드할 이미지 파일 추가
+ this.uploadedImages.forEach((image) => {
+ formData.append('images', image.file);
});
- // FormData의 내용을 확인합니다.
- for (let pair of formData.entries()) {
- console.log(pair[0] + ': ' + pair[1]);
- }
-
// submitSurvey 함수를 호출하여 FormData를 전송합니다.
const response = await submitSurvey(formData);
@@ -240,6 +227,7 @@ export default {
},
};
+
\ No newline at end of file
+
From 017125ca133e742c1adfbd6b3e9bb66fda916096 Mon Sep 17 00:00:00 2001
From: HRiver