From f761e3e15eecbb5d89c410e84eeb207a397458b8 Mon Sep 17 00:00:00 2001
From: nevermoregb <nevermoregb@local-host.co.kr>
Date: Fri, 14 Mar 2025 10:52:30 +0900
Subject: [PATCH] =?UTF-8?q?=EB=B9=84=EB=B0=80=EB=B2=88=ED=98=B8=20?=
 =?UTF-8?q?=EA=B2=BD=EA=B3=A0=EB=AC=B8=20input=20=EC=95=84=EB=9E=98?=
 =?UTF-8?q?=EC=97=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/board/BoardCommentArea.vue | 67 ++++++++++++++---------
 1 file changed, 42 insertions(+), 25 deletions(-)

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