localnet/localhost-front
10
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

비밀번호 경고문 input 아래에

Browse Source
This commit is contained in:
nevermoregb 2025-03-14 10:52:30 +09:00
parent 2ec81f274d
commit f761e3e15e
1 changed files with 42 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

67
src/components/board/BoardCommentArea.vue
View File

@ -12,50 +12,62 @@
<!-- 텍스트박스 --> <!-- 텍스트박스 -->
<div class="w-100"> <div class="w-100">
<textarea <textarea
class="form-control" class="form-control mb-2"
placeholder="댓글 달기" placeholder="댓글 달기"
rows="3" rows="3"
:maxlength="maxLength" :maxlength="maxLength"
v-model="comment" v-model="comment"
@input="alertTextHandler" @input="alertTextHandler"
></textarea> ></textarea>
<span v-if="commentAlert" class="invalid-feedback d-block text-start ms-2">{{ commentAlert }}</span> <span v-if="commentAlert" class="invalid-feedback d-inline text-start ms-2 mb-2">{{ commentAlert }}</span>
<span v-else class="invalid-feedback d-block text-start ms-2">{{ textAlert }}</span> <span v-else class="invalid-feedback d-inline text-start ms-2">{{ textAlert }}</span>
</div> </div>
</div> </div>
<!-- 옵션 및 버튼 섹션 --> <!-- 옵션 및 버튼 섹션 -->
<div class="d-flex justify-content-between flex-wrap mt-4"> <div class="d-flex justify-content-between mt-1">
<div class="d-flex flex-wrap align-items-center"> <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"> <!-- 익명 체크박스 (익명게시판일 경우에만)-->
<input class="form-check-input" type="checkbox" :id="`checkboxAnnonymous${commnetId}`" v-model="isCheck" /> <div v-if="unknown" class="form-check form-check-inline mb-0 me-4 d-flex align-items-center">
<label class="form-check-label" :for="`checkboxAnnonymous${commnetId}`">익명</label>
</div>
<!-- 비밀번호 입력 필드 (익명이 선택된 경우에만 표시) -->
<template v-if="isCheck">
<div class="d-flex align-items-center flex-grow-1">
<label class="form-label mb-0 me-3" for="basic-default-password">비밀번호</label>
<input <input
type="password" class="form-check-input me-2"
id="basic-default-password" type="checkbox"
class="form-control flex-grow-1" :id="`checkboxAnnonymous${commnetId}`"
autocomplete="new-password" v-model="isCheck"
v-model="password" @change="pwd2AlertHandler"
placeholder="비밀번호 입력"
@input="passwordAlertTextHandler"
/> />
<label class="form-check-label" :for="`checkboxAnnonymous${commnetId}`">익명</label>
</div> </div>
</template>
<!-- 비밀번호 입력 필드 (익명이 선택된 경우에만 표시) -->
<template v-if="isCheck">
<div class="d-flex align-items-center col">
<input
type="password"
id="basic-default-password"
class="form-control w-80"
autocomplete="new-password"
v-model="password"
placeholder="비밀번호 입력"
@input="passwordAlertTextHandler"
/>
</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> </div>
<!-- 답변 쓰기 버튼 --> <!-- 답변 쓰기 버튼 -->
<div class="ms-auto mt-3 mt-md-0"> <div class="ms-auto mt-3 mt-md-0">
<SaveBtn class="btn btn-primary" @click="handleCommentSubmit"></SaveBtn> <SaveBtn class="btn btn-primary" @click="handleCommentSubmit"></SaveBtn>
</div> </div>
<span v-if="passwordAlert" class="invalid-feedback d-block text-start ms-2">{{ passwordAlert }}</span>
<span v-else class="invalid-feedback d-block text-start ms-2">{{ passwordAlert2 }}</span>
</div> </div>
</div> </div>
</div> </div>
@ -136,6 +148,11 @@
resetCommentForm(); resetCommentForm();
}; };
// 비밀번호 경고 초기화
const pwd2AlertHandler = () => {
if (isCheck.value === false) passwordAlert2.value = '';
};
// 입력 필드 리셋 함수 추가 // 입력 필드 리셋 함수 추가
const resetCommentForm = () => { const resetCommentForm = () => {
comment.value = ''; comment.value = '';