From 32bd8998d48000ea42c4fd8eef868c34541fc012 Mon Sep 17 00:00:00 2001
From: yoon <nmjk0123@gmail.com>
Date: Thu, 20 Mar 2025 13:32:24 +0900
Subject: [PATCH] css

---
 src/components/board/BoardComment.vue     |  2 +-
 src/components/board/BoardCommentArea.vue | 93 ++++++++++++-----------
 src/views/board/BoardView.vue             |  2 +-
 3 files changed, 49 insertions(+), 48 deletions(-)

diff --git a/src/components/board/BoardComment.vue b/src/components/board/BoardComment.vue
index cff6256..1d4a85c 100644
--- a/src/components/board/BoardComment.vue
+++ b/src/components/board/BoardComment.vue
@@ -17,7 +17,7 @@
             @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">
                 <input
                     type="password"
diff --git a/src/components/board/BoardCommentArea.vue b/src/components/board/BoardCommentArea.vue
index 1add6aa..84783bd 100644
--- a/src/components/board/BoardCommentArea.vue
+++ b/src/components/board/BoardCommentArea.vue
@@ -18,55 +18,56 @@
             </div>
 
             <!-- 옵션 및 버튼 섹션 -->
-            <div class="d-flex justify-content-between mt-1">
-                <div class="row g-2 w-100 align-items-center">
-                    <!-- 익명 체크박스 & 닉네임/비밀번호 입력 필드 -->
-                    <div class="d-flex align-items-center w-100">
-                        <!-- 익명 체크박스 -->
-                        <div v-if="unknown" class="form-check me-4">
-                            <input
-                                class="form-check-input"
-                                type="checkbox"
-                                :id="`checkboxAnnonymous${commnetId}`"
-                                v-model="isCheck"
-                                @change="pwd2AlertHandler"
-                            />
-                            <label class="form-check-label" :for="`checkboxAnnonymous${commnetId}`">익명</label>
+            <div class="d-flex justify-content-between align-items-center mt-1 pb-4">
+                <!-- 왼쪽: 익명 체크박스 -->
+                <div v-if="unknown" class="form-check form-check-inline mb-0 me-2">
+                    <input
+                        class="form-check-input"
+                        type="checkbox"
+                        :id="`checkboxAnnonymous${commnetId}`"
+                        v-model="isCheck"
+                        @change="pwd2AlertHandler"
+                    />
+                    <label class="form-check-label text-nowrap" :for="`checkboxAnnonymous${commnetId}`">익명</label>
+                </div>
+
+                <!-- 중앙: 닉네임 & 비밀번호 입력 필드 (가로 정렬) -->
+                <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 v-if="isCheck" class="d-flex flex-wrap w-80 gap-2">
-                            <!-- 닉네임 입력 필드 -->
-                            <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 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 class="position-relative">
+                        <input
+                            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 class="ms-auto mt-3 mt-md-0">
+                <!-- 오른쪽: 답변 쓰기 버튼 -->
+                <div class="ms-auto">
                     <SaveBtn class="btn btn-primary" @click="handleCommentSubmit"></SaveBtn>
                 </div>
             </div>
@@ -127,7 +128,7 @@
 
         // 댓글 공백 체크
         if (!$common.isNotEmpty(comment.value)) {
-            textAlert.value = '댓글을 입력하세요';
+            textAlert.value = '댓글을 입력해주세요.';
             isValid = false;
         } else {
             textAlert.value = '';
@@ -136,14 +137,14 @@
         // 익명 선택 시 닉네임 & 비밀번호 체크
         if (isCheck.value) {
             if (!$common.isNotEmpty(nickname.value)) {
-                nicknameAlert.value = '닉네임을 입력하세요';
+                nicknameAlert.value = '닉네임을 입력해주세요.';
                 isValid = false;
             } else {
                 nicknameAlert.value = '';
             }
 
             if (!$common.isNotEmpty(password.value)) {
-                passwordAlert2.value = '비밀번호를 입력하세요';
+                passwordAlert2.value = '비밀번호를 입력해주세요.';
                 isValid = false;
             } else {
                 passwordAlert2.value = '';
diff --git a/src/views/board/BoardView.vue b/src/views/board/BoardView.vue
index 4d45f11..43089f7 100644
--- a/src/views/board/BoardView.vue
+++ b/src/views/board/BoardView.vue
@@ -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">
                                     <input
                                         type="password"