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

Merge branch 'main' into vacation

Browse Source
This commit is contained in:
dyhj625 2025-03-20 13:40:40 +09:00
commit c3ef423b16
3 changed files with 91 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/board/BoardComment.vue
View File

@ -4,7 +4,7 @@
:unknown="comment.author === '익명'" :unknown="comment.author === '익명'"
:isCommentAuthor="isCommentAuthor" :isCommentAuthor="isCommentAuthor"
:boardId="comment.boardId" :boardId="comment.boardId"
:profileName="comment.author" :profileName="comment.nickname ? comment.nickname : comment.author"
:date="comment.createdAt" :date="comment.createdAt"
:comment="comment" :comment="comment"
:profileImg="comment.profileImg" :profileImg="comment.profileImg"
@ -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"

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

@ -3,69 +3,71 @@
<div class="card-body"> <div class="card-body">
<!-- 댓글 입력 섹션 --> <!-- 댓글 입력 섹션 -->
<div class="d-flex justify-content-start align-items-top"> <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"> <div class="w-100">
<textarea <textarea
class="form-control mb-2" class="form-control mb-1"
placeholder="댓글 달기" placeholder="댓글 달기"
rows="3" rows="3"
:maxlength="maxLength" :maxlength="maxLength"
v-model="comment" v-model="comment"
@input="alertTextHandler" @input="clearAlert('comment')"
></textarea> ></textarea>
<span v-if="commentAlert" class="invalid-feedback d-inline text-start ms-2 mb-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-inline text-start ms-2">{{ textAlert }}</span> <span v-else class="invalid-feedback d-inline">{{ textAlert }}</span>
</div> </div>
</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"> <!-- 왼쪽: 익명 체크박스 -->
<div class="d-flex flex-wrap align-items-center mb-2"> <div v-if="unknown" class="form-check form-check-inline mb-0 me-2">
<!-- 익명 체크박스 (익명게시판일 경우에만)--> <input
<div v-if="unknown" class="form-check form-check-inline mb-0 me-4 d-flex align-items-center"> class="form-check-input"
<input type="checkbox"
class="form-check-input me-2" :id="`checkboxAnnonymous${commnetId}`"
type="checkbox" v-model="isCheck"
:id="`checkboxAnnonymous${commnetId}`" @change="pwd2AlertHandler"
v-model="isCheck" />
@change="pwd2AlertHandler" <label class="form-check-label text-nowrap" :for="`checkboxAnnonymous${commnetId}`">익명</label>
/> </div>
<label class="form-check-label" :for="`checkboxAnnonymous${commnetId}`">익명</label>
</div>
<!-- 비밀번호 입력 필드 (익명이 선택된 경우에만 표시) --> <!-- 중앙: 닉네임 & 비밀번호 입력 필드 (가로 정렬) -->
<template v-if="isCheck"> <div v-if="isCheck" class="d-flex flex-grow-1 gap-2">
<div class="d-flex align-items-center col"> <!-- 닉네임 입력 영역 -->
<input <div class="position-relative">
type="password" <input
id="basic-default-password" type="text"
class="form-control w-80" class="form-control mb-1"
autocomplete="new-password" v-model="nickname"
v-model="password" placeholder="닉네임"
placeholder="비밀번호 입력" @input="clearAlert('nickname')"
@input="passwordAlertTextHandler" />
/> <!-- 닉네임 경고 메시지 -->
</div> <div v-if="nicknameAlert" class="position-absolute text-danger small top-100 start-0" >
</template> {{ nicknameAlert }}
</div>
</div> </div>
<div class="row">
<div style="width: 70px"></div> <!-- 비밀번호 입력 영역 -->
<div class="col"> <div class="position-relative">
<span v-if="passwordAlert" class="invalid-feedback d-inline">{{ passwordAlert }}</span> <input
<span v-else class="invalid-feedback d-inline">{{ passwordAlert2 }}</span> 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>
</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>
@ -108,37 +110,54 @@
const password = ref(''); const password = ref('');
const isCheck = ref(false); const isCheck = ref(false);
const textAlert = ref(''); const textAlert = ref('');
const nicknameAlert = ref('');
const passwordAlert2 = ref(''); const passwordAlert2 = ref('');
const nickname = ref('');
const emit = defineEmits(['submitComment']); const emit = defineEmits(['submitComment']);
const alertTextHandler = () => { // 입력 필드별 경고 메시지 초기화
textAlert.value = ''; const clearAlert = field => {
}; if (field === 'comment') textAlert.value = '';
if (field === 'nickname') nicknameAlert.value = '';
const passwordAlertTextHandler = event => { if (field === 'password') passwordAlert2.value = '';
event.target.value = event.target.value.replace(/\s/g, '');
passwordAlert2.value = '';
}; };
const handleCommentSubmit = () => { const handleCommentSubmit = () => {
let isValid = true;
// 댓글 공백 체크
if (!$common.isNotEmpty(comment.value)) { if (!$common.isNotEmpty(comment.value)) {
textAlert.value = '댓글을 입력하세요'; textAlert.value = '댓글을 입력해주세요.';
return false; isValid = false;
} else { } else {
textAlert.value = ''; textAlert.value = '';
} }
if (isCheck.value && !$common.isNotEmpty(password.value)) { // 익명 선택 시 닉네임 & 비밀번호 체크
passwordAlert2.value = '비밀번호를 입력하세요'; if (isCheck.value) {
return false; if (!$common.isNotEmpty(nickname.value)) {
} else { nicknameAlert.value = '닉네임을 입력해주세요.';
passwordAlert2.value = ''; isValid = false;
} else {
nicknameAlert.value = '';
}
if (!$common.isNotEmpty(password.value)) {
passwordAlert2.value = '비밀번호를 입력해주세요.';
isValid = false;
} else {
passwordAlert2.value = '';
}
} }
// 모든 입력값이 유효할 경우만 제출
if (!isValid) return;
// 댓글 제출 // 댓글 제출
emit('submitComment', { emit('submitComment', {
comment: comment.value, comment: comment.value,
nickname: isCheck.value ? nickname.value : '',
password: isCheck.value ? password.value : '', password: isCheck.value ? password.value : '',
isCheck: isCheck.value, isCheck: isCheck.value,
LOCBRDTYP: isCheck.value ? '300102' : null, // 익명일 경우 '300102' 설정 LOCBRDTYP: isCheck.value ? '300102' : null, // 익명일 경우 '300102' 설정
@ -148,15 +167,19 @@
resetCommentForm(); resetCommentForm();
}; };
// 비밀번호 경고 초기화 // 비밀번호 & 닉네임 경고 초기화
const pwd2AlertHandler = () => { const pwd2AlertHandler = () => {
if (isCheck.value === false) passwordAlert2.value = ''; if (!isCheck.value) {
passwordAlert2.value = '';
nicknameAlert.value = '';
}
}; };
// 입력 필드 리셋 함수 추가 // 입력 필드 리셋 함수 추가
const resetCommentForm = () => { const resetCommentForm = () => {
comment.value = ''; comment.value = '';
password.value = ''; password.value = '';
nickname.value = '';
isCheck.value = false; isCheck.value = false;
}; };

6
src/views/board/BoardView.vue
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"
@ -322,6 +322,7 @@
likeCount: comment.likeCount || 0, likeCount: comment.likeCount || 0,
dislikeCount: comment.dislikeCount || 0, dislikeCount: comment.dislikeCount || 0,
profileImg: comment.profileImg || '', profileImg: comment.profileImg || '',
nickname: comment.LOCCMTNIC,
likeClicked: comment.likeClicked || false, likeClicked: comment.likeClicked || false,
dislikeClicked: comment.dislikeClicked || false, dislikeClicked: comment.dislikeClicked || false,
createdAtRaw: comment.LOCCMTRDT, // 작성일 createdAtRaw: comment.LOCCMTRDT, // 작성일
@ -351,6 +352,7 @@
parentId: reply.LOCCMTPNT, // 부모 댓글 ID parentId: reply.LOCCMTPNT, // 부모 댓글 ID
content: reply.LOCCMTRPY || '내용 없음', content: reply.LOCCMTRPY || '내용 없음',
createdAtRaw: reply.LOCCMTRDT, createdAtRaw: reply.LOCCMTRDT,
nickname: reply.LOCCMTNIC,
// createdAt: formattedDate(reply.LOCCMTRDT), // createdAt: formattedDate(reply.LOCCMTRDT),
//createdAtRaw: new Date(reply.LOCCMTUDT), //createdAtRaw: new Date(reply.LOCCMTUDT),
createdAt: formattedDate(reply.LOCCMTUDT) + (reply.LOCCMTUDT !== reply.LOCCMTRDT ? ' (수정됨)' : ''), createdAt: formattedDate(reply.LOCCMTUDT) + (reply.LOCCMTUDT !== reply.LOCCMTRDT ? ' (수정됨)' : ''),
@ -413,6 +415,7 @@
LOCCMTRPY: comment, LOCCMTRPY: comment,
LOCCMTPWD: isCheck ? password : '', LOCCMTPWD: isCheck ? password : '',
LOCCMTPNT: 1, LOCCMTPNT: 1,
LOCCMTNIC: data.isCheck ? data.nickname : null,
LOCBRDTYP: isCheck ? '300102' : null, LOCBRDTYP: isCheck ? '300102' : null,
}); });
@ -432,6 +435,7 @@
LOCCMTRPY: reply.comment, LOCCMTRPY: reply.comment,
LOCCMTPWD: reply.password || null, LOCCMTPWD: reply.password || null,
LOCCMTPNT: reply.parentId, LOCCMTPNT: reply.parentId,
LOCCMTNIC: data.isCheck ? data.nickname : null,
LOCBRDTYP: reply.isCheck ? '300102' : null, LOCBRDTYP: reply.isCheck ? '300102' : null,
}); });