비밀번호 자동입력 제외 추가, 버튼 위치 조정

src/components/board/BoardComment.vue

@@ -17,12 +17,13 @@
             @updateReaction="handleUpdateReaction"
         />
         <!-- 댓글 비밀번호 입력창 (익명일 경우) -->
-        <div v-if="currentPasswordCommentId === comment.commentId && unknown && comment.author == '익명'" class="mt-3 w-25 ms-auto">
+        <div v-if="currentPasswordCommentId === comment.commentId && unknown && comment.author == '익명'" class="mt-3 w-20 ms-auto">
             <div class="input-group">
                 <input
                     type="password"
                     class="form-control"
                     :value="password"
+                    autocomplete="new-password"
                     placeholder="비밀번호 입력"
                     @input="filterInput"
                 />
@@ -122,9 +123,9 @@
         'update:password',
     ]);
 
-    const filterInput = (event) => {
+    const filterInput = event => {
-        event.target.value = event.target.value.replace(/\s/g, ""); // 공백 제거
+        event.target.value = event.target.value.replace(/\s/g, ''); // 공백 제거
-        emit("update:password", event.target.value);
+        emit('update:password', event.target.value);
     };
 
     const localEditedContent = ref(props.comment.content);

src/components/board/BoardCommentArea.vue

@@ -41,6 +41,7 @@
                                 type="password"
                                 id="basic-default-password"
                                 class="form-control flex-grow-1"
+                                autocomplete="new-password"
                                 v-model="password"
                                 placeholder="비밀번호 입력"
                                 @input="passwordAlertTextHandler"
@@ -103,8 +104,8 @@
         textAlert.value = '';
     };
 
-    const passwordAlertTextHandler = (event) => {
+    const passwordAlertTextHandler = event => {
-        event.target.value = event.target.value.replace(/\s/g, "");
+        event.target.value = event.target.value.replace(/\s/g, '');
         passwordAlert2.value = '';
     };
 

src/components/board/BoardProfile.vue

@@ -20,8 +20,10 @@
         <div class="ms-auto text-end">
             <!-- 수정, 삭제 버튼 -->
             <template v-if="!isDeletedComment && (unknown || isCommentAuthor || isAuthor)">
-                <EditButton @click.stop="editClick" />
+                <div class="float-end ms-1">
-                <DeleteButton @click.stop="deleteClick" />
+                    <EditButton @click.stop="editClick" />
+                    <DeleteButton :class="'ms-1'" @click.stop="deleteClick" />
+                </div>
             </template>
 
             <!-- 좋아요, 싫어요 버튼 (댓글에서만 표시) -->

src/components/button/EditBtn.vue

@@ -1,39 +1,40 @@
 <template>
-    <button class="btn btn-label-primary btn-icon float-end" @click="toggleText">
+    <button class="btn btn-label-primary btn-icon" @click="toggleText">
         <i :class="buttonClass"></i>
     </button>
 </template>
 
 <script setup>
-import { ref, watch, defineProps } from 'vue';
+    import { ref, watch, defineProps } from 'vue';
 
-const props = defineProps({
+    const props = defineProps({
-    isToggleEnabled: {
+        isToggleEnabled: {
-        type: Boolean,
+            type: Boolean,
-        default: false,
+            default: false,
-    },
+        },
-    isActive: {
+        isActive: {
-        type: Boolean,
+            type: Boolean,
-        required: false,
+            required: false,
-    },
+        },
-});
+    });
 
-const buttonClass = ref("bx bx-edit-alt");
+    const buttonClass = ref('bx bx-edit-alt');
 
-watch(() => props.isActive, (newVal) => {
+    watch(
-    buttonClass.value = newVal ? "bx bx-x" : "bx bx-edit-alt";
+        () => props.isActive,
-});
+        newVal => {
+            buttonClass.value = newVal ? 'bx bx-x' : 'bx bx-edit-alt';
+        },
+    );
 
-const toggleText = () => {
+    const toggleText = () => {
-    if (props.isToggleEnabled) {
+        if (props.isToggleEnabled) {
-        buttonClass.value = buttonClass.value === "bx bx-edit-alt" ? "bx bx-x" : "bx bx-edit-alt";
+            buttonClass.value = buttonClass.value === 'bx bx-edit-alt' ? 'bx bx-x' : 'bx bx-edit-alt';
-    }
+        }
-};
+    };
-const resetButton = () => {
+    const resetButton = () => {
-    buttonClass.value = "bx bx-edit-alt";
+        buttonClass.value = 'bx bx-edit-alt';
-};
+    };
-
-
-defineExpose({ resetButton });
 
+    defineExpose({ resetButton });
 </script>

src/views/board/BoardView.vue

@@ -26,7 +26,7 @@
                                     <input
                                         type="password"
                                         class="form-control"
-                                        autocomplete="off"
+                                        autocomplete="new-password"
                                         v-model="password"
                                         placeholder="비밀번호 입력"
                                         @input="
@@ -799,8 +799,8 @@
     });
 </script>
 <style>
-.board-content img {
+    .board-content img {
-    max-width: 100%;
+        max-width: 100%;
-    height: auto;
+        height: auto;
-}
+    }
 </style>