css
This commit is contained in:
yoon
parent
d2560bff1a
commit
32bd8998d4
@ -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"
|
||||||
|
|||||||
@ -18,55 +18,56 @@
|
|||||||
</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">
|
<input
|
||||||
<!-- 익명 체크박스 -->
|
class="form-check-input"
|
||||||
<div v-if="unknown" class="form-check me-4">
|
type="checkbox"
|
||||||
<input
|
:id="`checkboxAnnonymous${commnetId}`"
|
||||||
class="form-check-input"
|
v-model="isCheck"
|
||||||
type="checkbox"
|
@change="pwd2AlertHandler"
|
||||||
:id="`checkboxAnnonymous${commnetId}`"
|
/>
|
||||||
v-model="isCheck"
|
<label class="form-check-label text-nowrap" :for="`checkboxAnnonymous${commnetId}`">익명</label>
|
||||||
@change="pwd2AlertHandler"
|
</div>
|
||||||
/>
|
|
||||||
<label class="form-check-label" :for="`checkboxAnnonymous${commnetId}`">익명</label>
|
<!-- 중앙: 닉네임 & 비밀번호 입력 필드 (가로 정렬) -->
|
||||||
|
<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>
|
||||||
|
|
||||||
<!-- 닉네임 & 비밀번호 입력 필드 (가로 정렬) -->
|
<!-- 비밀번호 입력 영역 -->
|
||||||
<div v-if="isCheck" class="d-flex flex-wrap w-80 gap-2">
|
<div class="position-relative">
|
||||||
<!-- 닉네임 입력 필드 -->
|
<input
|
||||||
<div class="flex-grow-1">
|
type="password"
|
||||||
<input
|
id="basic-default-password"
|
||||||
type="text"
|
class="form-control mb-1"
|
||||||
class="form-control mb-1"
|
autocomplete="new-password"
|
||||||
v-model="nickname"
|
v-model="password"
|
||||||
placeholder="닉네임"
|
placeholder="비밀번호"
|
||||||
@input="clearAlert('nickname')"
|
@input="clearAlert('password')"
|
||||||
/>
|
/>
|
||||||
<span v-if="nicknameAlert" class="invalid-feedback d-inline">{{ nicknameAlert }}</span>
|
<!-- 비밀번호 경고 메시지 -->
|
||||||
</div>
|
<div v-if="passwordAlert2" class="position-absolute text-danger small top-100 start-0">
|
||||||
|
{{ passwordAlert2 }}
|
||||||
<!-- 비밀번호 입력 필드 -->
|
|
||||||
<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>
|
</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 = '';
|
||||||
|
|||||||
@ -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"
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user