css
This commit is contained in:
yoon
parent
d2560bff1a
commit
32bd8998d4
@ -17,7 +17,7 @@
|
||||
@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">
|
||||
<input
|
||||
type="password"
|
||||
|
||||
@ -18,55 +18,56 @@
|
||||
</div>
|
||||
|
||||
<!-- 옵션 및 버튼 섹션 -->
|
||||
<div class="d-flex justify-content-between mt-1">
|
||||
<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"
|
||||
type="checkbox"
|
||||
:id="`checkboxAnnonymous${commnetId}`"
|
||||
v-model="isCheck"
|
||||
@change="pwd2AlertHandler"
|
||||
/>
|
||||
<label class="form-check-label" :for="`checkboxAnnonymous${commnetId}`">익명</label>
|
||||
<div class="d-flex justify-content-between align-items-center mt-1 pb-4">
|
||||
<!-- 왼쪽: 익명 체크박스 -->
|
||||
<div v-if="unknown" class="form-check form-check-inline mb-0 me-2">
|
||||
<input
|
||||
class="form-check-input"
|
||||
type="checkbox"
|
||||
:id="`checkboxAnnonymous${commnetId}`"
|
||||
v-model="isCheck"
|
||||
@change="pwd2AlertHandler"
|
||||
/>
|
||||
<label class="form-check-label text-nowrap" :for="`checkboxAnnonymous${commnetId}`">익명</label>
|
||||
</div>
|
||||
|
||||
<!-- 중앙: 닉네임 & 비밀번호 입력 필드 (가로 정렬) -->
|
||||
<div v-if="isCheck" class="d-flex flex-grow-1 gap-2">
|
||||
<!-- 닉네임 입력 영역 -->
|
||||
<div class="position-relative">
|
||||
<input
|
||||
type="text"
|
||||
class="form-control mb-1"
|
||||
v-model="nickname"
|
||||
placeholder="닉네임"
|
||||
@input="clearAlert('nickname')"
|
||||
/>
|
||||
<!-- 닉네임 경고 메시지 -->
|
||||
<div v-if="nicknameAlert" class="position-absolute text-danger small top-100 start-0" >
|
||||
{{ nicknameAlert }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 닉네임 & 비밀번호 입력 필드 (가로 정렬) -->
|
||||
<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 mb-1"
|
||||
autocomplete="new-password"
|
||||
v-model="password"
|
||||
placeholder="비밀번호"
|
||||
@input="clearAlert('password')"
|
||||
/>
|
||||
<span v-if="passwordAlert2" class="invalid-feedback d-inline">{{ passwordAlert2 }}</span>
|
||||
</div>
|
||||
<!-- 비밀번호 입력 영역 -->
|
||||
<div class="position-relative">
|
||||
<input
|
||||
type="password"
|
||||
id="basic-default-password"
|
||||
class="form-control mb-1"
|
||||
autocomplete="new-password"
|
||||
v-model="password"
|
||||
placeholder="비밀번호"
|
||||
@input="clearAlert('password')"
|
||||
/>
|
||||
<!-- 비밀번호 경고 메시지 -->
|
||||
<div v-if="passwordAlert2" class="position-absolute text-danger small top-100 start-0">
|
||||
{{ passwordAlert2 }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 답변 쓰기 버튼 -->
|
||||
<div class="ms-auto mt-3 mt-md-0">
|
||||
<!-- 오른쪽: 답변 쓰기 버튼 -->
|
||||
<div class="ms-auto">
|
||||
<SaveBtn class="btn btn-primary" @click="handleCommentSubmit"></SaveBtn>
|
||||
</div>
|
||||
</div>
|
||||
@ -127,7 +128,7 @@
|
||||
|
||||
// 댓글 공백 체크
|
||||
if (!$common.isNotEmpty(comment.value)) {
|
||||
textAlert.value = '댓글을 입력하세요';
|
||||
textAlert.value = '댓글을 입력해주세요.';
|
||||
isValid = false;
|
||||
} else {
|
||||
textAlert.value = '';
|
||||
@ -136,14 +137,14 @@
|
||||
// 익명 선택 시 닉네임 & 비밀번호 체크
|
||||
if (isCheck.value) {
|
||||
if (!$common.isNotEmpty(nickname.value)) {
|
||||
nicknameAlert.value = '닉네임을 입력하세요';
|
||||
nicknameAlert.value = '닉네임을 입력해주세요.';
|
||||
isValid = false;
|
||||
} else {
|
||||
nicknameAlert.value = '';
|
||||
}
|
||||
|
||||
if (!$common.isNotEmpty(password.value)) {
|
||||
passwordAlert2.value = '비밀번호를 입력하세요';
|
||||
passwordAlert2.value = '비밀번호를 입력해주세요.';
|
||||
isValid = false;
|
||||
} else {
|
||||
passwordAlert2.value = '';
|
||||
|
||||
@ -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">
|
||||
<input
|
||||
type="password"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user