This commit is contained in:
yoon 2025-03-20 13:32:24 +09:00
parent d2560bff1a
commit 32bd8998d4
3 changed files with 49 additions and 48 deletions

View File

@ -17,7 +17,7 @@
@updateReaction="handleUpdateReaction" @updateReaction="handleUpdateReaction"
/> />
<!-- 댓글 비밀번호 입력창 (익명일 경우) --> <!-- 댓글 비밀번호 입력창 (익명일 경우) -->
<div v-if="currentPasswordCommentId === comment.commentId && unknown && comment.author == '익명'" class="mt-3 w-20 ms-auto"> <div v-if="currentPasswordCommentId === comment.commentId && unknown && comment.author == '익명'" class="mt-3 w-px-200 ms-auto">
<div class="input-group"> <div class="input-group">
<input <input
type="password" type="password"

View File

@ -18,12 +18,9 @@
</div> </div>
<!-- 옵션 버튼 섹션 --> <!-- 옵션 버튼 섹션 -->
<div class="d-flex justify-content-between mt-1"> <div class="d-flex justify-content-between align-items-center mt-1 pb-4">
<div class="row g-2 w-100 align-items-center"> <!-- 왼쪽: 익명 체크박스 -->
<!-- 익명 체크박스 & 닉네임/비밀번호 입력 필드 --> <div v-if="unknown" class="form-check form-check-inline mb-0 me-2">
<div class="d-flex align-items-center w-100">
<!-- 익명 체크박스 -->
<div v-if="unknown" class="form-check me-4">
<input <input
class="form-check-input" class="form-check-input"
type="checkbox" type="checkbox"
@ -31,13 +28,13 @@
v-model="isCheck" v-model="isCheck"
@change="pwd2AlertHandler" @change="pwd2AlertHandler"
/> />
<label class="form-check-label" :for="`checkboxAnnonymous${commnetId}`">익명</label> <label class="form-check-label text-nowrap" :for="`checkboxAnnonymous${commnetId}`">익명</label>
</div> </div>
<!-- 닉네임 & 비밀번호 입력 필드 (가로 정렬) --> <!-- 중앙: 닉네임 & 비밀번호 입력 필드 (가로 정렬) -->
<div v-if="isCheck" class="d-flex flex-wrap w-80 gap-2"> <div v-if="isCheck" class="d-flex flex-grow-1 gap-2">
<!-- 닉네임 입력 필드 --> <!-- 닉네임 입력 영역 -->
<div class="flex-grow-1"> <div class="position-relative">
<input <input
type="text" type="text"
class="form-control mb-1" class="form-control mb-1"
@ -45,11 +42,14 @@
placeholder="닉네임" placeholder="닉네임"
@input="clearAlert('nickname')" @input="clearAlert('nickname')"
/> />
<span v-if="nicknameAlert" class="invalid-feedback d-inline">{{ nicknameAlert }}</span> <!-- 닉네임 경고 메시지 -->
<div v-if="nicknameAlert" class="position-absolute text-danger small top-100 start-0" >
{{ nicknameAlert }}
</div>
</div> </div>
<!-- 비밀번호 입력 필드 --> <!-- 비밀번호 입력 영역 -->
<div class="flex-grow-1"> <div class="position-relative">
<input <input
type="password" type="password"
id="basic-default-password" id="basic-default-password"
@ -59,14 +59,15 @@
placeholder="비밀번호" placeholder="비밀번호"
@input="clearAlert('password')" @input="clearAlert('password')"
/> />
<span v-if="passwordAlert2" class="invalid-feedback d-inline">{{ passwordAlert2 }}</span> <!-- 비밀번호 경고 메시지 -->
</div> <div v-if="passwordAlert2" class="position-absolute text-danger small top-100 start-0">
{{ passwordAlert2 }}
</div> </div>
</div> </div>
</div> </div>
<!-- 답변 쓰기 버튼 --> <!-- 오른쪽: 답변 쓰기 버튼 -->
<div class="ms-auto mt-3 mt-md-0"> <div class="ms-auto">
<SaveBtn class="btn btn-primary" @click="handleCommentSubmit"></SaveBtn> <SaveBtn class="btn btn-primary" @click="handleCommentSubmit"></SaveBtn>
</div> </div>
</div> </div>
@ -127,7 +128,7 @@
// //
if (!$common.isNotEmpty(comment.value)) { if (!$common.isNotEmpty(comment.value)) {
textAlert.value = '댓글을 입력하세요'; textAlert.value = '댓글을 입력해주세요.';
isValid = false; isValid = false;
} else { } else {
textAlert.value = ''; textAlert.value = '';
@ -136,14 +137,14 @@
// & // &
if (isCheck.value) { if (isCheck.value) {
if (!$common.isNotEmpty(nickname.value)) { if (!$common.isNotEmpty(nickname.value)) {
nicknameAlert.value = '닉네임을 입력하세요'; nicknameAlert.value = '닉네임을 입력해주세요.';
isValid = false; isValid = false;
} else { } else {
nicknameAlert.value = ''; nicknameAlert.value = '';
} }
if (!$common.isNotEmpty(password.value)) { if (!$common.isNotEmpty(password.value)) {
passwordAlert2.value = '비밀번호를 입력하세요'; passwordAlert2.value = '비밀번호를 입력해주세요.';
isValid = false; isValid = false;
} else { } else {
passwordAlert2.value = ''; passwordAlert2.value = '';

View File

@ -21,7 +21,7 @@
/> />
<!-- 비밀번호 입력창 (익명일 경우) --> <!-- 비밀번호 입력창 (익명일 경우) -->
<div v-if="isPassword && unknown" class="mt-3 w-25 ms-auto"> <div v-if="isPassword && unknown" class="mt-3 w-px-200 ms-auto">
<div class="input-group"> <div class="input-group">
<input <input
type="password" type="password"