From 55ea050bf1d17c6f70c8b87e0d8057005bcb1c94 Mon Sep 17 00:00:00 2001 From: kimkimjunjun Date: Sat, 28 Sep 2024 22:02:58 +0900 Subject: [PATCH] =?UTF-8?q?feat:=20=EB=8B=B5=EA=B8=80=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/board/[boardId]/page.tsx | 196 +++++++++++++++------- src/app/user/[id]/page.tsx | 1 + src/services/board/patch/editComments.tsx | 11 ++ 3 files changed, 152 insertions(+), 56 deletions(-) create mode 100644 src/services/board/patch/editComments.tsx diff --git a/src/app/board/[boardId]/page.tsx b/src/app/board/[boardId]/page.tsx index 683bb27a..cbcc683d 100644 --- a/src/app/board/[boardId]/page.tsx +++ b/src/app/board/[boardId]/page.tsx @@ -38,6 +38,7 @@ import menubars from "@/dummy/menubars.svg" import deleteReply from "@/services/board/delete/deleteReply"; import { PostAirSVG, PostBusSVG, PostBycicleSVG, PostCarSVG, PostTrainSVG } from "@/components/transportsvg/post"; import backbutton from "@/dummy/backbutton.svg" +import { updatePostComment } from "@/services/board/patch/editComments"; export default function BoardPage({ params }: { params: { boardId: number } }) { const accessToken = Cookies.get("accessToken"); @@ -54,6 +55,31 @@ export default function BoardPage({ params }: { params: { boardId: number } }) { const [parentIds, setParentIds] = useState(0); const [soloReply, setSoloReply] = useState(false); const [replyStates, setReplyStates] = useState([]); + const [editingIndexes, setEditingIndexes] = useState<{ [key: number]: boolean }>({}); // 수정 상태를 관리할 객체 + const [updateReply, setUpdateReply] = useState(''); + const [myUpdateReply, setMyUpdateReply] = useState<{ [key: number]: boolean }>({}); + + const toggleEdit = (index: number) => { + setEditingIndexes((prev) => ({ + ...prev, + [index]: !prev[index], // 해당 인덱스의 수정 상태 토글 + })); + }; + + const toggleMyEdit = (index: number) => { + setMyUpdateReply((prev) => ({ + ...prev, + [index]: !prev[index], // 해당 인덱스의 수정 상태 토글 + })); + }; + + const handleEditContent = (index: number, content: string) => { + // 수정된 내용을 처리하는 로직 추가 + setUpdateReply(content); + toggleEdit(index); // 수정 상태 다시 토글 + }; + + console.log(editingIndexes) const { data: postData, refetch: postRefetch } = useQuery({ queryKey: ["postData"], @@ -195,6 +221,15 @@ export default function BoardPage({ params }: { params: { boardId: number } }) { postRefetch(); } catch (e) { } }; + + const commentEditHandler = async (commentIds: number) => { + try { + await updatePostComment(commentIds, updateReply); + toggleEdit(commentIds) + setUpdateReply(''); + commentRefetch(); + } catch (e) { } + } const commentReplyHandler = async (replymemIds: string, replyNicknames: string, mentionCommentIds: number) => { const commentData = { postId: Number(params.boardId), @@ -605,10 +640,10 @@ export default function BoardPage({ params }: { params: { boardId: number } }) { return (
-
+
{coData.member.nickName} + {userInfo?.memberId === coData.member.memberId && ( + + )}
-
+
{coData.content} @@ -653,13 +691,10 @@ export default function BoardPage({ params }: { params: { boardId: number } }) {
- - @{coData.member.nickName} - setReplyComment(e.target.value)} /> @@ -677,9 +712,13 @@ export default function BoardPage({ params }: { params: { boardId: number } }) { {coData?.children.map((childData: any, childIndex: number) => { const createDateTime = new Date(childData.createDateTime); const formattedDateTimes = `${createDateTime.getFullYear()}.${String(createDateTime.getMonth() + 1).padStart(2, "0")}.${String(createDateTime.getDate()).padStart(2, "0")} ${String(createDateTime.getHours()).padStart(2, "0")}:${String(createDateTime.getMinutes()).padStart(2, "0")}`; - console.log(childData); + + const isEditing = editingIndexes[childData.id] || false; + const openEditing = myUpdateReply[childData.id] || false; + + console.log(childData, isEditing); return ( -
+
{childData.member.nickName} + {userInfo?.memberId === childData.member.memberId && ( +
+ toggleMyEdit(childData.id)} /> + {openEditing && ( +
+ { deleteReplyHandler(childData.id); toggleMyEdit(childData.id) }}>삭제 + { handleEditContent(childData.id, childData.content); toggleMyEdit(childData.id) }}>수정 +
+ )} +
+ )} +
- - - @{childData.mentionMemberNickName} - - {childData.content} - -
- {formattedDateTimes} -
-
- {replyOpen[index] && rreplyOpen[childData.id] ? ( - { - toggleReply(index); - toggleRreply(childData.id); - }} + {isEditing ? ( +
+
+
+ setUpdateReply(e.target.value)} + /> +
+
+
+ + +
+
+ ) : ( +
+
+ + @{childData.mentionMemberNickName} - )} - {userInfo?.memberId === childData.member.memberId && ( - deleteReplyHandler(childData.id)}>삭제 - )} - {/* 답글이 열렸을 때 추가적인 요소를 보여줄 수 있습니다 */} - {replyOpen[index] && ( -
- {/* 답글 입력 폼이나 추가적인 내용을 여기에 추가할 수 있습니다 */} + {childData.content} +
+
+ {formattedDateTimes} +
+
+ {replyOpen[index] && rreplyOpen[childData.id] ? ( + { + toggleReply(index); + toggleRreply(childData.id); + }} + > + 답글취소 + + ) : ( + { + toggleReply(index); + toggleRreply(childData.id); + setParentIds(childData.parentId) + setReplyId(childData.id); + setReplyNickname(childData.member.nickName); + setReplyMemId(childData.member.memberId); + }} + > + 답글달기 + + )} + + + {/* 답글이 열렸을 때 추가적인 요소를 보여줄 수 있습니다 */} + {replyOpen[index] && ( +
+ {/* 답글 입력 폼이나 추가적인 내용을 여기에 추가할 수 있습니다 */} +
+ )}
- )} +
-
+ )} + +
); })} @@ -756,17 +840,17 @@ export default function BoardPage({ params }: { params: { boardId: number } }) { {memberDatas?.result.nickName} + {userInfo?.memberId === coData.member.memberId && ( + + )}
- - @{replyNickname} - setReplyComment(e.target.value)} - placeholder="에게 답글쓰기" + placeholder={`${replyNickname}에게 답글쓰기`} />
diff --git a/src/app/user/[id]/page.tsx b/src/app/user/[id]/page.tsx index 46240c94..9340cd28 100644 --- a/src/app/user/[id]/page.tsx +++ b/src/app/user/[id]/page.tsx @@ -235,6 +235,7 @@ const UserPage = ({ params }: { params: { id: string } }) => { className={activeTab === TABS.TICKET ? "text-[#fa3463]" : ""} > 티켓 + {userBoardCount}