diff --git a/src/pages/Results.tsx b/src/pages/Results.tsx index c8c442c..23679bf 100644 --- a/src/pages/Results.tsx +++ b/src/pages/Results.tsx @@ -56,7 +56,7 @@ function Results() { password: "", }); - const [editComment, setEditComment] = useState(null); // 수정 상태 관리 + const [editCommentId, setEditCommentId] = useState(null); // 수정 상태 관리 const navigate = useNavigate(); const maxValue = Math.max(...data.map((item) => item.value)); @@ -134,18 +134,46 @@ useEffect(() => { // 페이지 변경 함수 // const paginate = (pageNumber: number) => setCurrentPage(pageNumber); - function handleSubmit(e: React.FormEvent) { + async function handleSubmit(e: React.FormEvent) { e.preventDefault(); - postData(`/comment/${id}`, formData).then(()=>{ - window.alert("댓글이 등록되었습니다."); - }).catch((error) => { - window.alert("댓글 등록을 실패했습니다."); - console.error("Error posting data:", error); - }).finally(() => { - window.location.reload(); - }); + + if (editCommentId) { + // 수정 모드일 때 + try { + const result = await updateData(`/comment/update/${formData.userID}/${editCommentId}`, { + password: formData.password, + content: formData.content, + }); + + if (result) { + setCommentData( + commentData.map((comment) => + comment.commentID === editCommentId + ? { ...comment, content: formData.content } + : comment + ) + ); + alert("댓글이 성공적으로 수정되었습니다."); + } else { + alert("댓글 수정에 실패했습니다. 비밀번호를 확인하세요."); + } + } catch (error) { + console.error("댓글 수정 오류:", error); + alert("서버와의 통신 중 오류가 발생했습니다."); + } + } else { + // 새로운 댓글 작성 모드일 때 + try { + await postData(`/comment/${id}`, formData); + setFormData({ userID: id || "", nickname: "", content: "", password: "" }); + } catch (error) { + console.error("댓글 작성 오류:", error); + alert("댓글 작성 중 오류가 발생했습니다."); + } + } + + setEditCommentId(null); // 수정 완료 후 수정 모드 해제 } - function handleChange(e: React.ChangeEvent) { setFormData({ ...formData, [e.target.name]: e.target.value }); } @@ -176,36 +204,17 @@ useEffect(() => { } } - // 댓글 수정 함수 - async function handleUpdate(userId: string, commentId: number) { - const password = prompt("댓글 수정을 위해 비밀번호를 입력하세요:"); - const content = prompt("새로운 내용을 입력하세요:"); - - if (password && content) { - try { - const result = await updateData(`/comment/update/${userId}/${commentId}`, { - password: password, - content: content - }); - - if (result) { - setCommentData( - commentData.map((comment) => - comment.commentID === commentId ? { ...comment, content: content } : comment - ) - ); - alert("댓글이 성공적으로 수정되었습니다."); - } else { - alert("댓글 수정에 실패했습니다. 비밀번호를 확인하세요."); - } - } catch (error) { - console.error("댓글 수정 오류:", error); - alert("서버와의 통신 중 오류가 발생했습니다."); - } - } else { - alert("수정하려는 내용과 비밀번호를 모두 입력하세요."); - } - } + + // 수정 버튼 클릭 시 호출되는 함수 +function handleEditClick(comment: Comment) { + setFormData({ + userID: comment.userID, + nickname: comment.nickname, + content: comment.content, + password: "", + }); + setEditCommentId(comment.commentID); +} return (
@@ -355,11 +364,11 @@ useEffect(() => { />
+ type="submit" + className="w-full bg-yellow-300 py-2 px-4 text-gray-900 font-bold hover:bg-yellow-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2" +> + {editCommentId ? "수정" : "✏️ 작성"} +
@@ -376,12 +385,12 @@ useEffect(() => { {/* 수정 및 삭제 버튼 추가 */}
- +