From f33cada52f37bff04d4b3983a82a0e83907b32c8 Mon Sep 17 00:00:00 2001 From: kimdaae328 Date: Wed, 12 Feb 2025 17:39:35 +0900 Subject: [PATCH 01/60] =?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="주제에 대한 생각을 자유롭게 댓글로 표현해 주세요. 여러분의 다양한 의견을 기다립니다." rows="3" + v-model="comment" > @@ -23,7 +24,7 @@
-
+
-
@@ -57,6 +59,41 @@ 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 @@ --> - - + + -
+
diff --git a/src/components/board/BoardCommentList.vue b/src/components/board/BoardCommentList.vue index 319345c..f1c7116 100644 --- a/src/components/board/BoardCommentList.vue +++ b/src/components/board/BoardCommentList.vue @@ -11,38 +11,48 @@ diff --git a/src/components/board/BoardProfile.vue b/src/components/board/BoardProfile.vue index 5f77e63..aaf328a 100644 --- a/src/components/board/BoardProfile.vue +++ b/src/components/board/BoardProfile.vue @@ -1,7 +1,7 @@
@@ -25,7 +25,7 @@ -
+
diff --git a/src/views/board/BoardView.vue b/src/views/board/BoardView.vue index 3e1e243..2304993 100644 --- a/src/views/board/BoardView.vue +++ b/src/views/board/BoardView.vue @@ -68,6 +68,7 @@ +
@@ -104,6 +105,7 @@ const likeClicked = ref(false); const dislikeClicked = ref(false); const commentNum = ref(0); const attachment = ref(false); +const comments = ref([]); const route = useRoute(); const currentBoardId = ref(Number(route.params.id)); @@ -206,17 +208,36 @@ const handleCommentSubmit = async ({ comment, password }) => { }; // 댓글 목록 조회 -// const fetchComments = async () => { -// try { -// const response = await axios.get(`board/${currentBoardId.value}/comments`); -// if (response.status === 200) { -// comments.value = response.data.data || []; -// console.log('📋 댓글 목록:', comments.value); -// } -// } catch (error) { -// console.error('댓글 목록 불러오기 오류:', error); -// } -// }; +const fetchComments = async () => { + console.log("🚀 fetchComments() 실행됨"); // ✅ 함수 실행 여부 확인 + + try { + const response = await axios.get(`board/${currentBoardId.value}/comments`, { + params: { LOCBRDSEQ: currentBoardId.value } + }); + console.log("📥 API 응답 데이터:", response.data); + + comments.value = response.data.data.map(comment => ({ + id: comment.LOCCMTSEQ, // 고유 ID + // author: comment.LOCCMTWRITER || "익명 사용자", // 작성자 + content: comment.LOCCMTRPY, // 댓글 내용 + createdAt: comment.LOCCMTUDT, // 생성 날짜 + children: comment.children ? comment.children.map(child => ({ + id: child.LOCCMTSEQ, + // author: child.LOCCMTWRITER || "익명 사용자", + content: child.LOCCMTRPY, + createdAt: child.LOCCMTUDT, + })) : [] + })); + + // comments.value.sort((a, b) => b.createdAt - a.createdAt); + + console.log("📌 변환된 comments 데이터:", comments.value); + + } catch (error) { + console.error('❌ 댓글 목록 불러오기 오류:', error); + } +}; // 날짜 @@ -228,5 +249,6 @@ const formattedBoardDate = computed(() => { // 컴포넌트 마운트 시 데이터 로드 onMounted(() => { fetchBoardDetails() + fetchComments() }); From 7774bfe80a30a7375434d82e0203aa8741d09740 Mon Sep 17 00:00:00 2001 From: kimdaae328 Date: Thu, 13 Feb 2025 13:20:11 +0900 Subject: [PATCH 05/60] =?UTF-8?q?=EB=8C=80=EB=8C=93=EA=B8=80=20=EC=A7=84?= =?UTF-8?q?=ED=96=89=EC=A4=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/board/BoardComentArea.vue | 2 +- src/components/board/BoardComment.vue | 10 +++++--- src/components/board/BoardCommentList.vue | 5 +++- src/views/board/BoardView.vue | 30 +++++++++++------------ 4 files changed, 27 insertions(+), 20 deletions(-) diff --git a/src/components/board/BoardComentArea.vue b/src/components/board/BoardComentArea.vue index b437a87..84bd0c3 100644 --- a/src/components/board/BoardComentArea.vue +++ b/src/components/board/BoardComentArea.vue @@ -13,7 +13,7 @@
diff --git a/src/components/board/BoardComment.vue b/src/components/board/BoardComment.vue index d2a92fd..2883a12 100644 --- a/src/components/board/BoardComment.vue +++ b/src/components/board/BoardComment.vue @@ -1,6 +1,6 @@ diff --git a/src/views/board/BoardView.vue b/src/views/board/BoardView.vue index 2304993..bf59370 100644 --- a/src/views/board/BoardView.vue +++ b/src/views/board/BoardView.vue @@ -193,12 +193,12 @@ const handleCommentSubmit = async ({ comment, password }) => { LOCCMTPWD: password || null, LOCCMTPNT: 1 }); - console.log('📥 서버 응답 전체:', response.data); + // console.log('📥 서버 응답 전체:', response.data); if (response.status === 200) { console.log('댓글 작성 성공:', response.data.message); - // await fetchComments(); // 댓글 작성 후 목록 갱신 + await fetchComments(); } else { console.error('댓글 작성 실패:', response.data.message); } @@ -209,28 +209,26 @@ const handleCommentSubmit = async ({ comment, password }) => { // 댓글 목록 조회 const fetchComments = async () => { - console.log("🚀 fetchComments() 실행됨"); // ✅ 함수 실행 여부 확인 - try { const response = await axios.get(`board/${currentBoardId.value}/comments`, { params: { LOCBRDSEQ: currentBoardId.value } }); - console.log("📥 API 응답 데이터:", response.data); - + // console.log("📥 API 응답 데이터:", response.data); + comments.value = response.data.data.map(comment => ({ id: comment.LOCCMTSEQ, // 고유 ID - // author: comment.LOCCMTWRITER || "익명 사용자", // 작성자 + author: comment.MEMBERSEQ || "익명 사용자", // 작성자 content: comment.LOCCMTRPY, // 댓글 내용 - createdAt: comment.LOCCMTUDT, // 생성 날짜 + createdAt: formattedDate(comment.LOCCMTRDT), // 생성 날짜 children: comment.children ? comment.children.map(child => ({ id: child.LOCCMTSEQ, - // author: child.LOCCMTWRITER || "익명 사용자", + author: child.MEMBERSEQ || "익명 사용자", content: child.LOCCMTRPY, - createdAt: child.LOCCMTUDT, + createdAt: formattedDate(child.LOCCMTRDT), })) : [] })); - // comments.value.sort((a, b) => b.createdAt - a.createdAt); + comments.value.sort((a, b) => b.id - a.id); console.log("📌 변환된 comments 데이터:", comments.value); @@ -239,12 +237,14 @@ const fetchComments = async () => { } }; - // 날짜 -const formattedBoardDate = computed(() => { - const dateObj = new Date(date.value); +const formattedDate = (dateString) => { + if (!dateString) return "날짜 없음"; + const dateObj = new Date(dateString); 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')}`; -}); +}; + +const formattedBoardDate = computed(() => formattedDate(date.value)); // 컴포넌트 마운트 시 데이터 로드 onMounted(() => { From 737481cbae45f9e6cbeff6edab00022caf20c1a8 Mon Sep 17 00:00:00 2001 From: kimdaae328 Date: Fri, 14 Feb 2025 03:01:30 +0900 Subject: [PATCH 06/60] =?UTF-8?q?=EB=8C=80=EB=8C=93=EA=B8=80=EC=99=84?= =?UTF-8?q?=EB=A3=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/board/BoardComentArea.vue | 4 +- src/components/board/BoardComment.vue | 46 +++------ src/components/board/BoardCommentList.vue | 10 +- src/views/board/BoardView.vue | 114 ++++++++++++++-------- 4 files changed, 95 insertions(+), 79 deletions(-) diff --git a/src/components/board/BoardComentArea.vue b/src/components/board/BoardComentArea.vue index 84bd0c3..703320b 100644 --- a/src/components/board/BoardComentArea.vue +++ b/src/components/board/BoardComentArea.vue @@ -76,7 +76,7 @@ const comment = ref(''); const password = ref(''); const isCheck = ref(false); -const emit = defineEmits(['submit']); +const emit = defineEmits(['submitComment']); watch(() => props.unknown, (newVal) => { if (!newVal) { @@ -85,7 +85,7 @@ watch(() => props.unknown, (newVal) => { }); function handleCommentSubmit() { - emit('submit', { + emit('submitComment', { comment: comment.value, password: password.value, }); diff --git a/src/components/board/BoardComment.vue b/src/components/board/BoardComment.vue index 2883a12..5c591e3 100644 --- a/src/components/board/BoardComment.vue +++ b/src/components/board/BoardComment.vue @@ -5,16 +5,22 @@

{{ comment.content }}

- +
  • - +
- +
- +
@@ -173,20 +173,54 @@ const handleUpdateReaction = async ({ boardId, commentId, isLike, isDislike }) = } }; +// 댓글 목록 조회 +const fetchComments = async () => { + try { + const response = await axios.get(`board/${currentBoardId.value}/comments`, { + params: { LOCBRDSEQ: currentBoardId.value } + }); + console.log("📥 API 응답 데이터:", response.data); + + let allComments = response.data.data.map(comment => ({ + id: comment.LOCCMTSEQ, // 댓글 id + parentId: comment.LOCCMTPNT, // 부모 id + author: comment.MEMBERSEQ || "익명 사용자", // 작성자 + content: comment.LOCCMTRPY, // 댓글 내용 + createdAt: formattedDate(comment.LOCCMTRDT), // 생성 날짜 + children: [] + })); + + allComments.sort((a, b) => b.id - a.id); + + let commentMap = {}; + let rootComments = []; + + allComments.forEach(comment => { + commentMap[comment.id] = comment; // 모든 댓글을 객체 형태로 저장 + }); + + allComments.forEach(comment => { + if (comment.parentId && commentMap[comment.parentId]) { + // 부모 댓글이 존재하면, 부모의 children에 추가 + commentMap[comment.parentId].children.push(comment); + } else { + // 부모 ID가 없으면 최상위 댓글 + rootComments.push(comment); + } + }); + + comments.value = rootComments; + + // console.log("변환된 comments 데이터:", comments.value); + + } catch (error) { + console.error('댓글 목록 불러오기 오류:', error); + } +}; + // 댓글 작성 const handleCommentSubmit = async ({ comment, password }) => { - try { - // const payload = { - // LOCBRDSEQ: currentBoardId.value, - // LOCCMTRPY: comment, - // LOCCMTPWD: password || null, - // LOCCMTPNT: 1 - // }; - // alert(`댓글 내용: ${comment}`); - - // console.log('📤 서버로 전송되는 데이터:', payload); // 서버로 보내는 데이터 확인 - // const response = await axios.post(`board/${currentBoardId.value}/comment`, payload); - + try { const response = await axios.post(`board/${currentBoardId.value}/comment`, { LOCBRDSEQ: currentBoardId.value, LOCCMTRPY: comment, @@ -207,35 +241,33 @@ const handleCommentSubmit = async ({ comment, password }) => { } }; -// 댓글 목록 조회 -const fetchComments = async () => { - try { - const response = await axios.get(`board/${currentBoardId.value}/comments`, { - params: { LOCBRDSEQ: currentBoardId.value } +const handleCommentReply = async (reply) => { + // console.log("BoardView에서 대댓글 확인~~~~~~~~~~~~~~~~:", reply); + + // 부모 댓글 찾기 + // const parentComment = comments.value.find(comment => comment.id === reply.parentId); + + // console.log(parentComment) + // if (parentComment) { + // console.log('되는거??') + + const response = await axios.post(`board/${currentBoardId.value}/comment`, { + LOCBRDSEQ: currentBoardId.value, + LOCCMTRPY: reply.comment, + LOCCMTPWD: reply.password || null, + LOCCMTPNT: reply.parentId }); - // console.log("📥 API 응답 데이터:", response.data); - comments.value = response.data.data.map(comment => ({ - id: comment.LOCCMTSEQ, // 고유 ID - author: comment.MEMBERSEQ || "익명 사용자", // 작성자 - content: comment.LOCCMTRPY, // 댓글 내용 - createdAt: formattedDate(comment.LOCCMTRDT), // 생성 날짜 - children: comment.children ? comment.children.map(child => ({ - id: child.LOCCMTSEQ, - author: child.MEMBERSEQ || "익명 사용자", - content: child.LOCCMTRPY, - createdAt: formattedDate(child.LOCCMTRDT), - })) : [] - })); - - comments.value.sort((a, b) => b.id - a.id); - - console.log("📌 변환된 comments 데이터:", comments.value); - - } catch (error) { - console.error('❌ 댓글 목록 불러오기 오류:', error); - } -}; + if (response.status === 200) { + console.log('대댓글 작성 성공!!!!!!:', response.data.message); + await fetchComments(); + } else { + console.error('대댓글 작성 실패ㅜㅜㅜ:', response.data.message); + } + // } else { + // console.error(`부모 댓글을 찾을 수 없음: ${reply.parentId}`); + // } +} // 날짜 const formattedDate = (dateString) => { From af36b11b6e12c4a9d6f69e8ae0f3d833bccabcda Mon Sep 17 00:00:00 2001 From: kimdaae328 Date: Fri, 14 Feb 2025 03:02:38 +0900 Subject: [PATCH 07/60] . --- src/components/board/BoardComment.vue | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/board/BoardComment.vue b/src/components/board/BoardComment.vue index 5c591e3..75394b3 100644 --- a/src/components/board/BoardComment.vue +++ b/src/components/board/BoardComment.vue @@ -12,8 +12,7 @@
  • Date: Fri, 14 Feb 2025 12:47:39 +0900 Subject: [PATCH 08/60] =?UTF-8?q?=ED=94=84=EB=A1=9C=ED=95=84=20=EB=B6=80?= =?UTF-8?q?=EB=B6=84=20=EC=A0=95=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/board/BoardComment.vue | 12 +++-- src/components/board/BoardProfile.vue | 76 +++++++++++---------------- src/views/board/BoardView.vue | 5 +- 3 files changed, 41 insertions(+), 52 deletions(-) diff --git a/src/components/board/BoardComment.vue b/src/components/board/BoardComment.vue index 75394b3..90a78bb 100644 --- a/src/components/board/BoardComment.vue +++ b/src/components/board/BoardComment.vue @@ -1,6 +1,12 @@