board-view-content 머지

src/components/board/BoardProfile.vue

@@ -25,22 +25,17 @@
                     <EditButton @click="handleEdit" />
                     <DeleteButton @click="handleDelete" />
 
-                    <div class="input-group mt-3" v-if="isPassword && unknown">
-                        <input
-                          type="password"
-                          v-model="password"
-                          class="form-control"
-                          placeholder="비밀번호 입력"
-                        />
-                        <!-- <input
-                          type="password"
-                          class="form-control"
-                          placeholder="비밀번호 입력"
-                          :is-alert="idAlert"
-                          @update:data="handleIdChange"
-                          :value="id"
-                        /> -->
-                        <button class="btn btn-primary" type="button" @click="handlePasswordSubmit">확인</button>
+                    <div class="mt-3" v-if="isPassword && unknown">
+                        <div class="input-group">
+                            <input
+                                type="password"
+                                class="form-control"
+                                v-model="password"
+                                placeholder="비밀번호 입력"
+                            />
+                            <button class="btn btn-primary" type="button" @click="handleSubmit">확인</button>
+                        </div>
+                        <span v-if="passwordAlert" class="invalid-feedback d-block text-start">{{ passwordAlert }}</span>
                     </div>
                 </div>
             </template>
@@ -71,6 +66,10 @@ import BoardRecommendBtn from '../button/BoardRecommendBtn.vue';
 
 // Vue Router 인스턴스
 const router = useRouter();
+const isPassword = ref(false);
+const password = ref('');
+const passwordAlert = ref(false);
+const lastClickedButton = ref('');
 
 // Props 정의
 const props = defineProps({
@@ -112,22 +111,14 @@ const props = defineProps({
     }
 });
 
-const isPassword = ref(false);
-const password = ref('');
-const lastClickedButton = ref('');
-
-const boardId = 100; //수정필요!
-
 const emit = defineEmits(['togglePasswordInput']);
 
 // 수정 버튼
 const handleEdit = () => {
-    // router.push({ name: 'BoardEdit', params: { id: boardId } });
-
     if (props.unknown) {
         togglePassword('edit');
     } else {
-        router.push({ name: 'BoardEdit', params: { id: 100 } }); // 로그인한 경우 바로 편집
+        router.push({ name: 'BoardEdit', params: { id: props.boardId } });
     }
 };
 
@@ -136,7 +127,7 @@ const handleDelete = () => {
     if (props.unknown) {
         togglePassword('delete');
     } else {
-        deletePost(); // 로그인한 경우 바로 삭제
+        deletePost();
     }
 };
 
@@ -151,12 +142,11 @@ const togglePassword = (button) => {
 };
 
 // 비밀번호 확인
-const handlePasswordSubmit = async () => {
-    isPassword.value = false;
-    lastClickedButton.value = null;
-
-    console.log('비밀번호:', password.value);
-    console.log(props.boardId)
+const handleSubmit = async () => {
+    if (!password.value) {
+        passwordAlert.value = '비밀번호를 입력해주세요.';
+        return;
+    }
 
     try {
         const requestData = {
@@ -164,47 +154,61 @@ const handlePasswordSubmit = async () => {
             LOCBRDSEQ: 288
         }
 
-        console.log(requestData)
-
         const postResponse = await axios.post(`board/${props.boardId}/password`, requestData);
 
-        console.log('post결과:', postResponse.data)
+        if (postResponse.data.code === 200) {
+            if (postResponse.data.data === true) {
+                isPassword.value = false;
+                
 
-        // if (response.data.code === 200 && response.data.data === true) {
-        //     console.log("완료"); // 비밀번호가 맞으면 출력
-        // } else {
-        //     console.log("비밀번호가 틀립니다.");
-        // }
+                if (lastClickedButton.value === 'edit') {
+                    router.push({ name: 'BoardEdit', params: { id: props.boardId } });
+                } else if (lastClickedButton.value === 'delete') {
+                    await deletePost();
+                }
+
+                lastClickedButton.value = null;
+            } else {
+                passwordAlert.value = '비밀번호가 일치하지 않습니다.';
+            }
+        } else {
+            passwordAlert.value = '비밀번호가 일치하지 않습니다.';
+        }
     } catch (error) {
-        console.error('비밀번호 확인 중 오류 발생:', error);
+       // 401 오류
+       if (error.response && error.response.status === 401) {
+            passwordAlert.value = '비밀번호가 일치하지 않습니다.';
+        } else if (error.response) {
+            alert(`오류 발생: ${error.response.data.message || '서버 오류'}`);
+        } else {
+            alert('네트워크 오류가 발생했습니다. 다시 시도해주세요.');
+        }
     }
 };
 
 const deletePost = async () => {
     if (confirm('정말 삭제하시겠습니까?')) {
         try {
-            await axios.delete(`board/100`);
-            alert('게시물이 삭제되었습니다.');
-            router.push({ name: 'BoardList' });
+            const response = await axios.delete(`board/${props.boardId}`, {
+                data: { LOCBRDSEQ: props.boardId }
+            });
+
+            if (response.data.code === 200) {
+                alert('게시물이 삭제되었습니다.');
+                router.push({ name: 'BoardList' });
+            } else {
+                alert('삭제 실패: ' + response.data.message);
+            }
         } catch (error) {
-            alert('삭제 중 오류 발생');
+            if (error.response) {
+                alert(`삭제 실패: ${error.response.data.message || '서버 오류'}`);
+            } else {
+                alert('네트워크 오류가 발생했습니다. 다시 시도해주세요.');
+            }
         }
     }
 };
 
-// const fetchBoardDetails = async () => {
-//   try {
-//     const response = await axios.get(`board/${props.boardId}`);
-//     console.log(response.data);
-//   } catch (error) {
-//     console.error('게시물 데이터 불러오기 오류:', error);
-//   }
-// };
-
-// onMounted(() => {
-// //   fetchBoardDetails();
-// });
-
 </script>
 
 <style scoped>

src/components/input/FormInputBtn.vue

@@ -0,0 +1,92 @@
+<template>
+    <div class="input-group">
+        <input
+            :id="name"
+            class="form-control"
+            :type="type"
+            v-model="inputValue"
+            :maxLength="maxlength"
+            :placeholder="isLabel ? '' : title"
+        />
+        <button class="btn btn-primary" type="button" @click="handleSubmit">확인</button>
+    </div>
+    <div class="invalid-feedback" :class="isAlert ? 'display-block' : ''">
+        {{ title }}을 확인해주세요.
+    </div>
+</template>
+
+<script setup>
+import { ref, watch } from 'vue';
+
+// Props 정의
+const props = defineProps({
+    title: {
+        type: String,
+        default: '라벨',
+    },
+    name: {
+        type: String,
+        default: 'nameplz',
+    },
+    isEssential: {
+        type: Boolean,
+        default: false,
+    },
+    type: {
+        type: String,
+        default: 'text',
+    },
+    modelValue: {
+        type: String,
+        default: '',
+    },
+    maxlength: {
+        type: Number,
+        default: 30,
+    },
+    isAlert: {
+        type: Boolean,
+        default: false,
+    },
+    isLabel: {
+        type: Boolean,
+        default: true,
+    },
+});
+
+// Emits 정의
+const emits = defineEmits(['update:modelValue', 'submit']);
+
+// 로컬 상태로 사용하기 위한 `inputValue`
+const inputValue = ref(props.modelValue);
+
+// 부모로 데이터 업데이트
+watch(inputValue, (newValue) => {
+    emits('update:modelValue', newValue);
+});
+
+// 초기값 동기화
+watch(() => props.modelValue, (newValue) => {
+    if (inputValue.value !== newValue) {
+        inputValue.value = newValue;
+    }
+});
+
+// 버튼 클릭 시 부모로 submit 이벤트 전달
+const handleSubmit = () => {
+    emits('submit', inputValue.value);
+};
+</script>
+
+<style scoped>
+.invalid-feedback {
+    display: none;
+    color: red;
+    font-size: 0.875rem;
+    margin-top: 4px;
+}
+
+.display-block {
+    display: block;
+}
+</style>