diff --git a/src/components/board/BoardComment.vue b/src/components/board/BoardComment.vue index 906d5cf..1d4a85c 100644 --- a/src/components/board/BoardComment.vue +++ b/src/components/board/BoardComment.vue @@ -4,7 +4,7 @@ :unknown="comment.author === '익명'" :isCommentAuthor="isCommentAuthor" :boardId="comment.boardId" - :profileName="comment.author" + :profileName="comment.nickname ? comment.nickname : comment.author" :date="comment.createdAt" :comment="comment" :profileImg="comment.profileImg" @@ -17,7 +17,7 @@ @updateReaction="handleUpdateReaction" /> -
+
- - -
{{ commentAlert }} - {{ textAlert }} + {{ textAlert }}
-
-
-
- -
- - -
+
+ +
+ + +
- - + +
+ +
+ + +
+ {{ nicknameAlert }} +
-
-
-
- {{ passwordAlert }} - {{ passwordAlert2 }} + + +
+ + +
+ {{ passwordAlert2 }}
- -
+ +
@@ -108,37 +110,54 @@ const password = ref(''); const isCheck = ref(false); const textAlert = ref(''); + const nicknameAlert = ref(''); const passwordAlert2 = ref(''); + const nickname = ref(''); const emit = defineEmits(['submitComment']); - const alertTextHandler = () => { - textAlert.value = ''; - }; - - const passwordAlertTextHandler = event => { - event.target.value = event.target.value.replace(/\s/g, ''); - passwordAlert2.value = ''; + // 입력 필드별 경고 메시지 초기화 + const clearAlert = field => { + if (field === 'comment') textAlert.value = ''; + if (field === 'nickname') nicknameAlert.value = ''; + if (field === 'password') passwordAlert2.value = ''; }; const handleCommentSubmit = () => { + let isValid = true; + + // 댓글 공백 체크 if (!$common.isNotEmpty(comment.value)) { - textAlert.value = '댓글을 입력하세요'; - return false; + textAlert.value = '댓글을 입력해주세요.'; + isValid = false; } else { textAlert.value = ''; } - if (isCheck.value && !$common.isNotEmpty(password.value)) { - passwordAlert2.value = '비밀번호를 입력하세요'; - return false; - } else { - passwordAlert2.value = ''; + // 익명 선택 시 닉네임 & 비밀번호 체크 + if (isCheck.value) { + if (!$common.isNotEmpty(nickname.value)) { + nicknameAlert.value = '닉네임을 입력해주세요.'; + isValid = false; + } else { + nicknameAlert.value = ''; + } + + if (!$common.isNotEmpty(password.value)) { + passwordAlert2.value = '비밀번호를 입력해주세요.'; + isValid = false; + } else { + passwordAlert2.value = ''; + } } + // 모든 입력값이 유효할 경우만 제출 + if (!isValid) return; + // 댓글 제출 emit('submitComment', { comment: comment.value, + nickname: isCheck.value ? nickname.value : '', password: isCheck.value ? password.value : '', isCheck: isCheck.value, LOCBRDTYP: isCheck.value ? '300102' : null, // 익명일 경우 '300102' 설정 @@ -148,15 +167,19 @@ resetCommentForm(); }; - // 비밀번호 경고 초기화 + // 비밀번호 & 닉네임 경고 초기화 const pwd2AlertHandler = () => { - if (isCheck.value === false) passwordAlert2.value = ''; + if (!isCheck.value) { + passwordAlert2.value = ''; + nicknameAlert.value = ''; + } }; // 입력 필드 리셋 함수 추가 const resetCommentForm = () => { comment.value = ''; password.value = ''; + nickname.value = ''; isCheck.value = false; }; diff --git a/src/views/board/BoardView.vue b/src/views/board/BoardView.vue index b3cdfe2..43089f7 100644 --- a/src/views/board/BoardView.vue +++ b/src/views/board/BoardView.vue @@ -21,7 +21,7 @@ /> -
+