게시판 익명 닉네임, 경고문구css 수정
This commit is contained in:
parent
c22bfe1660
commit
b67076a3ca
@ -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"
|
||||
|
||||
@ -3,35 +3,29 @@
|
||||
<div class="card-body">
|
||||
<!-- 댓글 입력 섹션 -->
|
||||
<div class="d-flex justify-content-start align-items-top">
|
||||
<!-- 프로필섹션 -->
|
||||
<!-- <div class="avatar-wrapper">
|
||||
<div v-if="!unknown" class="avatar me-4">
|
||||
<img src="/img/avatars/11.png" alt="Avatar" class="rounded-circle">
|
||||
</div>
|
||||
</div> -->
|
||||
<!-- 텍스트박스 -->
|
||||
<div class="w-100">
|
||||
<textarea
|
||||
class="form-control mb-2"
|
||||
class="form-control mb-1"
|
||||
placeholder="댓글 달기"
|
||||
rows="3"
|
||||
:maxlength="maxLength"
|
||||
v-model="comment"
|
||||
@input="alertTextHandler"
|
||||
@input="clearAlert('comment')"
|
||||
></textarea>
|
||||
<span v-if="commentAlert" class="invalid-feedback d-inline text-start ms-2 mb-2">{{ commentAlert }}</span>
|
||||
<span v-else class="invalid-feedback d-inline text-start ms-2">{{ textAlert }}</span>
|
||||
<span v-else class="invalid-feedback d-inline">{{ textAlert }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 옵션 및 버튼 섹션 -->
|
||||
<div class="d-flex justify-content-between mt-1">
|
||||
<div class="row g-2">
|
||||
<div class="d-flex flex-wrap align-items-center mb-2">
|
||||
<!-- 익명 체크박스 (익명게시판일 경우에만)-->
|
||||
<div v-if="unknown" class="form-check form-check-inline mb-0 me-4 d-flex align-items-center">
|
||||
<div class="row g-2 w-100 align-items-center">
|
||||
<!-- 익명 체크박스 & 닉네임/비밀번호 입력 필드 -->
|
||||
<div class="d-flex align-items-center w-100">
|
||||
<!-- 익명 체크박스 -->
|
||||
<div v-if="unknown" class="form-check me-4">
|
||||
<input
|
||||
class="form-check-input me-2"
|
||||
class="form-check-input"
|
||||
type="checkbox"
|
||||
:id="`checkboxAnnonymous${commnetId}`"
|
||||
v-model="isCheck"
|
||||
@ -40,26 +34,33 @@
|
||||
<label class="form-check-label" :for="`checkboxAnnonymous${commnetId}`">익명</label>
|
||||
</div>
|
||||
|
||||
<!-- 비밀번호 입력 필드 (익명이 선택된 경우에만 표시) -->
|
||||
<template v-if="isCheck">
|
||||
<div class="d-flex align-items-center col">
|
||||
<!-- 닉네임 & 비밀번호 입력 필드 (가로 정렬) -->
|
||||
<div v-if="isCheck" class="d-flex flex-wrap w-80 gap-2">
|
||||
<!-- 닉네임 입력 필드 -->
|
||||
<div class="flex-grow-1">
|
||||
<input
|
||||
type="text"
|
||||
class="form-control mb-1"
|
||||
v-model="nickname"
|
||||
placeholder="닉네임"
|
||||
@input="clearAlert('nickname')"
|
||||
/>
|
||||
<span v-if="nicknameAlert" class="invalid-feedback d-inline">{{ nicknameAlert }}</span>
|
||||
</div>
|
||||
|
||||
<!-- 비밀번호 입력 필드 -->
|
||||
<div class="flex-grow-1">
|
||||
<input
|
||||
type="password"
|
||||
id="basic-default-password"
|
||||
class="form-control w-80"
|
||||
class="form-control mb-1"
|
||||
autocomplete="new-password"
|
||||
v-model="password"
|
||||
placeholder="비밀번호 입력"
|
||||
@input="passwordAlertTextHandler"
|
||||
placeholder="비밀번호"
|
||||
@input="clearAlert('password')"
|
||||
/>
|
||||
<span v-if="passwordAlert2" class="invalid-feedback d-inline">{{ passwordAlert2 }}</span>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div style="width: 70px"></div>
|
||||
<div class="col">
|
||||
<span v-if="passwordAlert" class="invalid-feedback d-inline">{{ passwordAlert }}</span>
|
||||
<span v-else class="invalid-feedback d-inline">{{ passwordAlert2 }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -108,37 +109,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;
|
||||
isValid = false;
|
||||
} else {
|
||||
textAlert.value = '';
|
||||
}
|
||||
|
||||
if (isCheck.value && !$common.isNotEmpty(password.value)) {
|
||||
// 익명 선택 시 닉네임 & 비밀번호 체크
|
||||
if (isCheck.value) {
|
||||
if (!$common.isNotEmpty(nickname.value)) {
|
||||
nicknameAlert.value = '닉네임을 입력하세요';
|
||||
isValid = false;
|
||||
} else {
|
||||
nicknameAlert.value = '';
|
||||
}
|
||||
|
||||
if (!$common.isNotEmpty(password.value)) {
|
||||
passwordAlert2.value = '비밀번호를 입력하세요';
|
||||
return false;
|
||||
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 +166,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;
|
||||
};
|
||||
|
||||
|
||||
@ -322,6 +322,7 @@
|
||||
likeCount: comment.likeCount || 0,
|
||||
dislikeCount: comment.dislikeCount || 0,
|
||||
profileImg: comment.profileImg || '',
|
||||
nickname: comment.LOCCMTNIC,
|
||||
likeClicked: comment.likeClicked || false,
|
||||
dislikeClicked: comment.dislikeClicked || false,
|
||||
createdAtRaw: comment.LOCCMTRDT, // 작성일
|
||||
@ -351,6 +352,7 @@
|
||||
parentId: reply.LOCCMTPNT, // 부모 댓글 ID
|
||||
content: reply.LOCCMTRPY || '내용 없음',
|
||||
createdAtRaw: reply.LOCCMTRDT,
|
||||
nickname: reply.LOCCMTNIC,
|
||||
// createdAt: formattedDate(reply.LOCCMTRDT),
|
||||
//createdAtRaw: new Date(reply.LOCCMTUDT),
|
||||
createdAt: formattedDate(reply.LOCCMTUDT) + (reply.LOCCMTUDT !== reply.LOCCMTRDT ? ' (수정됨)' : ''),
|
||||
@ -413,6 +415,7 @@
|
||||
LOCCMTRPY: comment,
|
||||
LOCCMTPWD: isCheck ? password : '',
|
||||
LOCCMTPNT: 1,
|
||||
LOCCMTNIC: data.isCheck ? data.nickname : null,
|
||||
LOCBRDTYP: isCheck ? '300102' : null,
|
||||
});
|
||||
|
||||
@ -432,6 +435,7 @@
|
||||
LOCCMTRPY: reply.comment,
|
||||
LOCCMTPWD: reply.password || null,
|
||||
LOCCMTPNT: reply.parentId,
|
||||
LOCCMTNIC: data.isCheck ? data.nickname : null,
|
||||
LOCBRDTYP: reply.isCheck ? '300102' : null,
|
||||
});
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user