Skip to content
25 changes: 14 additions & 11 deletions src/components/common/EditInformation.vue
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@
<input
:class="[
'block w-full px-4 py-4 border rounded focus:outline-none h-11 mt-2 text-black',
isInvalid ? 'border-red-1' : 'border-border-1'
isInvalid || isFull ? 'border-red-1' : 'border-border-1'
]"
placeholder="이름을 입력해주세요"
v-model="name"
Expand All @@ -64,6 +64,11 @@
class="text-red-1 text-xs font-bold mt-1"
>이름에는 특수문자가 포함될 수 없습니다.</span
>
<span
v-show="isFull"
class="text-red-1 text-xs font-bold mt-1"
>이름은 1글자 이상, 10글자이하만 가능합니다.</span
>
</div>
<div class="flex flex-col">
<p class="text-body text-xs font-bold">아이디</p>
Expand All @@ -86,10 +91,6 @@
<div>
<p class="text-body text-xs font-bold">알림 수신 여부</p>
<div class="flex flex-col mt-2 gap-2">
<FormCheckbox
v-model="agitCheck"
:checkButtonName="'아지트'"
:isChecked="agitCheck" />
<FormCheckbox
v-model="kakaoWorkCheck"
:checkButtonName="'카카오워크'"
Expand Down Expand Up @@ -134,7 +135,6 @@ const memberStore = useMemberStore()
const { info } = storeToRefs(memberStore)

const name = ref(info.value.name)
const agitCheck = ref(info.value.notificationSettingInfo.agit)
const emailCheck = ref(info.value.notificationSettingInfo.email)
const kakaoWorkCheck = ref(info.value.notificationSettingInfo.kakaoWork)
const imageDelete = ref(info.value.profileImageUrl == null ? true : false)
Expand All @@ -143,6 +143,7 @@ const selectedFile = ref<File | null>(null)
const previewUrl = ref<string | null>(null)

const isInvalid = ref(false)
const isFull = ref(false)
const nameInput = ref<HTMLInputElement | null>(null)

const isModalVisible = ref(false)
Expand All @@ -151,7 +152,6 @@ const isWarnningModalVisible = ref(false)
watchEffect(() => {
if (info.value) {
name.value = info.value.name
agitCheck.value = info.value.notificationSettingInfo.agit
emailCheck.value = info.value.notificationSettingInfo.email
kakaoWorkCheck.value = info.value.notificationSettingInfo.kakaoWork
}
Expand All @@ -160,8 +160,13 @@ watchEffect(() => {
const validateName = () => {
const regex = /[!@#$%^&*(),.?":{}|<>]/g
isInvalid.value = regex.test(name.value)
if (name.value.length > 10 || name.value.length < 1) {
isFull.value = true
} else {
isFull.value = false
}

if (isInvalid.value) {
if (isInvalid.value || isFull.value) {
nextTick(() => {
nameInput.value?.focus()
})
Expand All @@ -175,7 +180,6 @@ const handlePwChange = () => {
if (
selectedFile.value ||
info.value.name != name.value ||
info.value.notificationSettingInfo.agit != agitCheck.value ||
info.value.notificationSettingInfo.kakaoWork != kakaoWorkCheck.value ||
info.value.notificationSettingInfo.email != emailCheck.value
) {
Expand Down Expand Up @@ -209,12 +213,11 @@ const handleFileDelete = () => {
}

const handleSubmit = async () => {
if (isInvalid.value == false) {
if (isInvalid.value == false && isFull.value == false) {
const formData = new FormData()
const memberInfo = {
name: name.value,
isProfileImageDeleted: imageDelete.value,
agitNotification: agitCheck.value,
emailNotification: emailCheck.value,
kakaoWorkNotification: kakaoWorkCheck.value
}
Expand Down
2 changes: 1 addition & 1 deletion src/components/common/ModalView.vue
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@

<div
v-if="type != 'inputType'"
class="flex text-sm font-bold text-body justify-center">
class="flex text-sm font-bold text-body justify-center whitespace-pre-line text-center">
<slot name="body"></slot>
</div>
</div>
Expand Down
23 changes: 21 additions & 2 deletions src/views/LoginView.vue
Original file line number Diff line number Diff line change
Expand Up @@ -102,15 +102,34 @@ const handleLogin = async () => {
switch (error.response?.status) {
case 401:
isModalVisible.value = !isModalVisible.value
messageHeader.value = '일치하는 정보가 없습니다'
messageBody.value = '닉네임과 비밀번호를 다시 확인해 주세요'
console.log(error.response?.data)
if (error.response?.data == 'AUTH_015') {
messageHeader.value = '정지된 계정입니다'
messageBody.value =
'로그인 시도 5회 초과로 계정이 정지되었습니다\n30분 후 다시 시도해주세요'
} else {
messageHeader.value = '일치하는 정보가 없습니다'
messageBody.value = '닉네임과 비밀번호를 다시 확인해주세요'
}
break

case 404:
isModalVisible.value = !isModalVisible.value
messageHeader.value = '활성화 되어있지 않은 계정입니다'
messageBody.value = '접근 상태를 다시 확인하여주세요'
break

case 500:
isModalVisible.value = !isModalVisible.value
messageHeader.value = '서버에 문제가 발생했습니다'
messageBody.value = '잠시후 다시 이용해주세요'
break

default:
isModalVisible.value = !isModalVisible.value
messageHeader.value = '문제가 발생했습니다'
messageBody.value = '잠시후 다시 이용해주세요'
break
}
}
}
Expand Down
6 changes: 3 additions & 3 deletions src/views/PwChangeView.vue
Original file line number Diff line number Diff line change
Expand Up @@ -31,8 +31,7 @@
:class="[
'block w-full px-4 py-4 border rounded focus:outline-none',
isInvalid ? 'border-red-1' : 'border-border-1'
]"
@blur="validatePassword" />
]" />
<p
v-show="isInvalid"
class="text-red-1 text-xs font-bold mt-1">
Expand Down Expand Up @@ -110,7 +109,8 @@ const closeModal = () => {
}

const handleChange = () => {
if (newPw.value === checkPw.value) {
validatePassword()
if (isInvalid.value == false && newPw.value === checkPw.value) {
patchPassword(newPw.value)
pwChange()
openModal()
Expand Down