좋아요.싫어요 반응 확인, 비밀번호 인풋

src/components/board/BoardProfile.vue

@@ -21,8 +21,28 @@
         </div>
         <div class="ms-auto btn-area">
             <template v-if="showDetail">
-                <EditButton @click="handleEdit" />
+                <div class="text-end">
-                <DeleteButton @click="handleDelete" />
+                    <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>
+                </div>
             </template>
             <template v-else>
                 <template v-if="author">
@@ -42,7 +62,7 @@
 </template>
 
 <script setup>
-import { computed, defineProps } from 'vue';
+import { ref, onMounted, defineProps } from 'vue';
 import { useRouter } from 'vue-router';
 import axios from '@api';
 import DeleteButton from '../button/DeleteBtn.vue';
@@ -54,6 +74,10 @@ const router = useRouter();
 
 // Props 정의
 const props = defineProps({
+    boardId: { 
+        type: Number, 
+        required: true 
+    },
     profileName: {
         type: String,
         default: '익명',
@@ -88,26 +112,82 @@ const props = defineProps({
     }
 });
 
-const boardId = 100; //수정필요!!
+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 } });
+    // router.push({ name: 'BoardEdit', params: { id: boardId } });
+
+    if (props.unknown) {
+        togglePassword('edit'); 
+    } else {
+        router.push({ name: 'BoardEdit', params: { id: 100 } }); // 로그인한 경우 바로 편집
+    }
 };
 
-// 삭제 버튼 핸들러
+// 삭제 버튼
-const handleDelete = async () => {
+const handleDelete = () => {
-    if (confirm('정말 이 게시물을 삭제하시겠습니까?')) {
+    if (props.unknown) {
+        togglePassword('delete');
+    } else {
+        deletePost(); // 로그인한 경우 바로 삭제
+    }
+};
+
+// 비밀번호 입력 토글
+const togglePassword = (button) => {
+    if (lastClickedButton.value === button) {
+        isPassword.value = !isPassword.value;
+    } else {
+        isPassword.value = true;
+    }
+    lastClickedButton.value = button;
+};
+
+// 비밀번호 확인
+const handlePasswordSubmit = () => {
+    isPassword.value = false;
+    lastClickedButton.value = null;
+    
+    console.log('비밀번호:', password.value);
+
+    
+    
+
+    // router.push({ name: 'BoardEdit', params: { id: props.boardId } }); // 편집 예시
+};
+
+const deletePost = async () => {
+    if (confirm('정말 삭제하시겠습니까?')) {
         try {
-            await axios.delete(`board/${boardId}`);
+            await axios.delete(`board/100`);
-            alert('게시물이 성공적으로 삭제되었습니다.');
+            alert('게시물이 삭제되었습니다.');
             router.push({ name: 'BoardList' });
         } catch (error) {
-            console.error('게시물 삭제 중 오류 발생:', error);
+            alert('삭제 중 오류 발생');
-            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/button/BoardRecommendBtn.vue

@@ -62,28 +62,17 @@ watch(() => props.dislikeCount, (newVal) => {
 });
 
 const handleLike = () => {
-    // console.log('adadasd')
+    console.log('좋아요',likeCount.value)
-    // likeClicked.value = !likeClicked.value;
+    // emit('updateReaction', { type: 'like', boardId: props.boardId, commentId: props.commentId });
-    // likeCount.value += likeClicked.value ? 1 : -1;
+    // likeClicked.value = true;
-    emit('updateReaction', { type: 'like', boardId: props.boardId, commentId: props.commentId });
+    emit('updateReaction', { boardId: props.boardId, commentId: props.commentId, isLike: true, isDislike: false });
-    // if(likeClicked.value === true){
-    //     if(dislikeClicked.value ===  true) {
-    //         dislikeClicked.value = false;
-    //         dislikeCount.value += -1
-    //     }
-    // }
 };
 
 const handleDislike = () => {
-    // dislikeClicked.value = !dislikeClicked.value;
+    console.log('싫어요')
-    // dislikeCount.value += dislikeClicked.value ? 1 : -1;
+    // emit('updateReaction', { type: 'dislike', boardId: props.boardId, commentId: props.commentId });
-    emit('updateReaction', { type: 'dislike', boardId: props.boardId, commentId: props.commentId });
+    // dislikeClicked.value = true;
-    // if(dislikeClicked.value === true){
+    emit('updateReaction', { boardId: props.boardId, commentId: props.commentId, isLike: false, isDislike: true });
-    //     if(likeClicked.value ===  true) {
-    //         likeClicked.value = false;
-    //         likeCount.value += -1
-    //     }
-    // }
 };
 
 </script>

src/views/board/BoardView.vue

@@ -24,7 +24,7 @@
                             </div>
 
                             <!-- 첨부파일 섹션 -->
-                            <div v-if="attachments" class="btn-group">
+                            <div v-if="attachment" class="btn-group">
                                 <button type="button" class="btn btn-label-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
                                     <i class="fa-solid fa-download me-2"></i>
                                     첨부파일
@@ -51,6 +51,8 @@
                                 :commentId="null"
                                 :likeCount="likes"
                                 :dislikeCount="dislikes"
+                                :likeClicked="likeClicked"
+                                :dislikeClicked="dislikeClicked"
                                 @updateReaction="handleUpdateReaction"
                             />
                         </div>
@@ -95,7 +97,6 @@ import axios from '@api';
 const profileName = ref('익명 사용자');
 const boardTitle = ref('제목 없음');
 const boardContent = ref('');
-const attachments = ref([]);
 const date = ref('');
 const views = ref(0);
 const likes = ref(0);
@@ -107,7 +108,6 @@ const attachment = ref(false);
 
 // 라우트에서 ID 가져오기
 const route = useRoute();
-const router = useRouter();
 const currentBoardId = ref(Number(route.params.id));
 
 // 글 수정 페이지로 이동
@@ -124,8 +124,6 @@ const fetchBoardDetails = async () => {
         // API 응답 데이터 반영
         // const boardDetail = data.boardDetail || {};
 
-        // console.log('API Response:', response.data);
-
         profileName.value = data.author || '익명 사용자';
         boardTitle.value = data.title || '제목 없음';
         boardContent.value = data.content || '';
@@ -135,42 +133,47 @@ const fetchBoardDetails = async () => {
         dislikes.value = data.dislikeCount || 0;
         attachment.value = data.hasAttachment || null;
         comments.value = data.commentCount || 0;
-        
+
+        // const response2 = await axios.post(`board/${currentBoardId.value}/password`);
+        // console.log(response2)
+
     } catch (error) {
         alert('게시물 데이터를 불러오는 중 오류가 발생했습니다.');
     }
 };
 
 // 좋아요, 싫어요
-const handleUpdateReaction = async ({ type, boardId, commentId }) => {
+const handleUpdateReaction = async ({ boardId, commentId, isLike, isDislike }) => {
+    // console.log(type, boardId)
     try {
-        //이거 왜 한건지 찾아보자
-        const response = await axios.post(`/board/${boardId}/${commentId}/reaction`, { type });
 
-        // console.log('API 응답:', response.data);
+        const requestData = {
-        // console.log(commentId)
+            LOCBRDSEQ: boardId,
+            LOCCMTSEQ: commentId,
+            MEMBERSEQ: 1, // 멤버아이디 지금은 1 나중에 수정해야함
+            LOCGOBGOD: isLike ? 'T' : 'F',
+            LOCGOBBAD: isDislike ? 'T' : 'F'
+        };
 
-        if (response.data.code === 200) {
+        console.log(requestData)
-            if (type === 'like') {
-                likeClicked.value = !likeClicked.value;
-                likes.value += likeClicked.value ? 1 : -1;
-            } else if (type === 'dislike') {
-                dislikeClicked.value = !dislikeClicked.value;
-                dislikes.value += dislikeClicked.value ? 1 : -1;
-            }
-        } else {
-            alert('반응 업데이트 실패');
-        }
-        // likes.value = response.data.likeCount;
-        // dislikes.value = response.data.dislikeCount;
 
-        // if (type === 'like') {
+        const postResponse = await axios.post(`/board/${boardId}/${commentId}/reaction`, { requestData });
-        //     likeClicked.value = !likeClicked.value;
+        // await axios.post(`board/${boardId}/${commentId}/reaction`, { type });
-        //     console.log('aaaa' ,response.data)
+
+        const response = await axios.get(`board/${boardId}`);
+        const updatedData = response.data.data;
+
+        console.log('post요청 결과:', postResponse.data);
+        console.log('get요청 결과(좋아요):', response.data.data.likeCount);
+
+        likes.value = updatedData.likeCount;
+        dislikes.value = updatedData.dislikeCount;
+
+        likeClicked.value = isLike;
+        dislikeClicked.value = isDislike;
+
+        console.log('반응 결과:', postResponse.data);
 
-        // } else if (type === 'dislike') {
-        //     console.log('싫어')
-        // }
     } catch (error) {
         alert('반응을 업데이트하는 중 오류 발생');
     }
@@ -182,6 +185,7 @@ const formattedBoardDate = computed(() => {
     return `${dateObj.getFullYear()}-${String(dateObj.getMonth() + 1).padStart(2, '0')}-${String(dateObj.getDate()).padStart(2, '0')} ${String(dateObj.getHours()).padStart(2, '0')}:${String(dateObj.getMinutes()).padStart(2, '0')}`;
 });
 
+
 // 컴포넌트 마운트 시 데이터 로드
 onMounted(() => {
     fetchBoardDetails();