From f33cada52f37bff04d4b3983a82a0e83907b32c8 Mon Sep 17 00:00:00 2001
From: kimdaae328 <kimdaae328@gmail.com>
Date: Wed, 12 Feb 2025 17:39:35 +0900
Subject: [PATCH] =?UTF-8?q?=EC=9D=B5=EB=AA=85=EC=9D=BC=EB=95=8C=20?=
 =?UTF-8?q?=EC=BD=94=EB=A9=98=ED=8A=B8=20=EC=9D=B5=EB=AA=85=20=EC=9D=B8?=
 =?UTF-8?q?=ED=92=8B=20=EC=99=84=EB=A3=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/board/BoardComentArea.vue | 47 +++++++++++++++++++++---
 src/views/board/BoardView.vue            | 24 ++++++++----
 2 files changed, 58 insertions(+), 13 deletions(-)

diff --git a/src/components/board/BoardComentArea.vue b/src/components/board/BoardComentArea.vue
index e408ffe..52874c9 100644
--- a/src/components/board/BoardComentArea.vue
+++ b/src/components/board/BoardComentArea.vue
@@ -15,6 +15,7 @@
                         class="form-control"
                         placeholder="주제에 대한 생각을 자유롭게 댓글로 표현해 주세요. &#13;&#10;여러분의 다양한 의견을 기다립니다."
                         rows="3"
+                        v-model="comment"
                     ></textarea>
                 </div>
             </div>
@@ -23,7 +24,7 @@
             <div class="d-flex justify-content-between flex-wrap mt-4">
                 <div class="d-flex flex-wrap align-items-center">
                     <!-- 익명 체크박스 (익명게시판일 경우에만)-->
-                    <div class="form-check form-check-inline mb-0 me-4">
+                    <div v-if="isAnonymous" class="form-check form-check-inline mb-0 me-4">
                         <input
                             class="form-check-input"
                             type="checkbox"
@@ -40,15 +41,16 @@
                             type="password"
                             id="basic-default-password"
                             class="form-control flex-grow-1"
-                            placeholder=""
+                            v-model="password"
                         />
                     </div>
                 </div>
 
                 <!-- 답변 쓰기 버튼 -->
                 <div class="ms-auto mt-3 mt-md-0">
-                    <button class="btn btn-primary">
-                        <i class="icon-base bx bx-check"></i>
+                    <button class="btn btn-primary" @click="handleCommentSubmit">
+                        <!-- <i class="icon-base bx bx-check"></i> -->
+                        확인
                     </button>
                 </div>
             </div>
@@ -57,6 +59,41 @@
 </template>
 
 <script setup>
-import { ref } from 'vue';
+import { ref, defineEmits, defineProps, computed, watchEffect } from 'vue';
+
+const props = defineProps({
+    profileName: {
+        type: String,
+        default: '익명 사용자',
+    },
+});
+
 const isCheck = ref(false);
+const comment = ref('');
+const password = ref('');
+
+const isAnonymous = computed(() => props.profileName === '익명 사용자');
+
+const emit = defineEmits(['submit']);
+
+watchEffect(() => {
+    console.log('📢 부모로부터 전달된 profileName:', props.profileName);
+    console.log('🔐 익명 여부(isAnonymous):', isAnonymous.value);
+
+    if (!isAnonymous.value) {
+        isCheck.value = false;
+    }
+});
+
+function handleCommentSubmit() {
+    console.log('📝 댓글 내용:', comment.value);
+    console.log('🔐 익명 여부:', isAnonymous.value);
+    console.log('🔑 비밀번호:', password.value);
+
+    emit('submit', {
+        comment: comment.value,
+        isAnonymous: isAnonymous.value,
+        password: password.value,
+    });
+}
 </script>
diff --git a/src/views/board/BoardView.vue b/src/views/board/BoardView.vue
index fbb161f..3174991 100644
--- a/src/views/board/BoardView.vue
+++ b/src/views/board/BoardView.vue
@@ -64,8 +64,8 @@
                             </li>
                         </ul> -->
 
-                        <!-- 댓글 영역 -->
-                        <BoardComentArea />
+                        <!-- 댓글 입력 영역 -->
+                        <BoardComentArea :profileName="profileName" @submit="handleCommentSubmit"/>
 
                         <!-- 수정 버튼 -->
                         <!-- <button class="btn btn-primary" @click="goToEditPage">
@@ -94,7 +94,7 @@ import { useRoute, useRouter } from 'vue-router';
 import axios from '@api';
 
 // 게시물 데이터 상태
-const profileName = ref('익명 사용자');
+const profileName = ref('');
 const boardTitle = ref('제목 없음');
 const boardContent = ref('');
 const date = ref('');
@@ -123,8 +123,12 @@ const fetchBoardDetails = async () => {
 
         // API 응답 데이터 반영
         // const boardDetail = data.boardDetail || {};
-
+        
         profileName.value = data.author || '익명 사용자';
+        
+        // 익명확인하고 싶을때
+        // profileName.value = '익명 사용자';
+        
         boardTitle.value = data.title || '제목 없음';
         boardContent.value = data.content || '';
         date.value = data.date || '';
@@ -133,10 +137,7 @@ 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('게시물 데이터를 불러오는 중 오류가 발생했습니다.');
     }
@@ -179,6 +180,13 @@ const handleUpdateReaction = async ({ boardId, commentId, isLike, isDislike }) =
     }
 };
 
+function handleCommentSubmit(payload) {
+    console.log('댓글 내용:', payload.comment);
+    console.log('익명 여부:', payload.isAnonymous);
+    console.log('비밀번호:', payload.password);
+
+}
+
 // 날짜
 const formattedBoardDate = computed(() => {
     const dateObj = new Date(date.value);