게시판 익명 닉네임, 경고문구css 수정

src/components/board/BoardComment.vue

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

src/components/board/BoardCommentArea.vue

@@ -3,35 +3,29 @@
         <div class="card-body">
             <!-- 댓글 입력 섹션 -->
             <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">
                     <textarea
-                        class="form-control mb-2"
+                        class="form-control mb-1"
                         placeholder="댓글 달기"
                         rows="3"
                         :maxlength="maxLength"
                         v-model="comment"
-                        @input="alertTextHandler"
+                        @input="clearAlert('comment')"
                     ></textarea>
                     <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 class="d-flex justify-content-between mt-1">
-                <div class="row g-2">
+                <div class="row g-2 w-100 align-items-center">
-                    <div class="d-flex flex-wrap align-items-center mb-2">
+                    <!-- 익명 체크박스 & 닉네임/비밀번호 입력 필드 -->
-                        <!-- 익명 체크박스 (익명게시판일 경우에만)-->
+                    <div class="d-flex align-items-center w-100">
-                        <div v-if="unknown" class="form-check form-check-inline mb-0 me-4 d-flex align-items-center">
+                        <!-- 익명 체크박스 -->
+                        <div v-if="unknown" class="form-check me-4">
                             <input
-                                class="form-check-input me-2"
+                                class="form-check-input"
                                 type="checkbox"
                                 :id="`checkboxAnnonymous${commnetId}`"
                                 v-model="isCheck"
@@ -40,26 +34,33 @@
                             <label class="form-check-label" :for="`checkboxAnnonymous${commnetId}`">익명</label>
                         </div>
 
-                        <!-- 비밀번호 입력 필드 (익명이 선택된 경우에만 표시) -->
+                        <!-- 닉네임 & 비밀번호 입력 필드 (가로 정렬) -->
-                        <template v-if="isCheck">
+                        <div v-if="isCheck" class="d-flex flex-wrap w-80 gap-2">
-                            <div class="d-flex align-items-center col">
+                            <!-- 닉네임 입력 필드 -->
+                            <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 w-80"
+                                    class="form-control mb-1"
                                     autocomplete="new-password"
                                     v-model="password"
-                                    placeholder="비밀번호 입력"
+                                    placeholder="비밀번호"
-                                    @input="passwordAlertTextHandler"
+                                    @input="clearAlert('password')"
                                 />
+                                <span v-if="passwordAlert2" class="invalid-feedback d-inline">{{ passwordAlert2 }}</span>
                             </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>
@@ -108,37 +109,54 @@
     const password = ref('');
     const isCheck = ref(false);
     const textAlert = ref('');
+    const nicknameAlert = ref('');
     const passwordAlert2 = ref('');
+    const nickname = ref('');
 
     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 = () => {
+        let isValid = true;
+
+        // 댓글 공백 체크
         if (!$common.isNotEmpty(comment.value)) {
             textAlert.value = '댓글을 입력하세요';
-            return false;
+            isValid = false;
         } else {
             textAlert.value = '';
         }
 
-        if (isCheck.value && !$common.isNotEmpty(password.value)) {
+        // 익명 선택 시 닉네임 & 비밀번호 체크
+        if (isCheck.value) {
+            if (!$common.isNotEmpty(nickname.value)) {
+                nicknameAlert.value = '닉네임을 입력하세요';
+                isValid = false;
+            } else {
+                nicknameAlert.value = '';
+            }
+
+            if (!$common.isNotEmpty(password.value)) {
                 passwordAlert2.value = '비밀번호를 입력하세요';
-            return false;
+                isValid = false;
             } else {
                 passwordAlert2.value = '';
             }
+        }
+
+        // 모든 입력값이 유효할 경우만 제출
+        if (!isValid) return;
 
         // 댓글 제출
         emit('submitComment', {
             comment: comment.value,
+            nickname: isCheck.value ? nickname.value : '',
             password: isCheck.value ? password.value : '',
             isCheck: isCheck.value,
             LOCBRDTYP: isCheck.value ? '300102' : null, // 익명일 경우 '300102' 설정
@@ -148,15 +166,19 @@
         resetCommentForm();
     };
 
-    // 비밀번호 경고 초기화
+    // 비밀번호 & 닉네임 경고 초기화
     const pwd2AlertHandler = () => {
-        if (isCheck.value === false) passwordAlert2.value = '';
+        if (!isCheck.value) {
+            passwordAlert2.value = '';
+            nicknameAlert.value = '';
+        }
     };
 
     // 입력 필드 리셋 함수 추가
     const resetCommentForm = () => {
         comment.value = '';
         password.value = '';
+        nickname.value = '';
         isCheck.value = false;
     };
 

src/views/board/BoardView.vue

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