Skip to content

Commit

Permalink
[feat] #68 댓글 서버 연결 후 기능 구현 중
Browse files Browse the repository at this point in the history 
[feat] #68 댓글 서버 연결 후 기능 구현 중
  • Loading branch information
@kr-nius
kr-nius authored Dec 2, 2023
2 parents 8f21362 + a8fd14e commit dbf970a
Show file tree
Hide file tree
Showing 7 changed files with 407 additions and 75 deletions.
20 changes: 19 additions & 1 deletion src/app/detail/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,11 +18,22 @@ import CategoryDetail from "@/component/CategoryDetail";
import { useRouter } from "next/navigation";
import { editBoardIdState } from "@/recoilAtom/EditDetail";

interface boardCommentType {
id: number;
boardId: number;
nickname: string;
content: string;
createdDate: string;
createdTime: string;
replyList: [];
}

export default function Detail(): JSX.Element {
const [boardDetail, setBoardDetail] = useState<any>(null);
const [dropdownVisible, setDropdownVisible] = useState<boolean>(false);
const [localBoardId, setLocalBoardId] = useState<number | null>(0);
const [editBoardId, setEditBoardId] = useRecoilState(editBoardIdState);
const [comment, setComment] = useState<boardCommentType[]>([]);

const router = useRouter();

Expand Down Expand Up @@ -52,7 +63,10 @@ export default function Detail(): JSX.Element {
`https://www.jerneithe.site/board/detail/${localBoardId}`,
// `https://www.jerneithe.site/board/detail/3`,
);
console.log("detail response: ", response.data);
console.log("댓글: ", response.data.comments);
setBoardDetail(response.data);
setComment(response.data.comments);
console.log(response);
} catch (error) {
console.error("Error fetching data:", error);
Expand Down Expand Up @@ -164,7 +178,11 @@ export default function Detail(): JSX.Element {
</div>
<div className="button flex w-full px-3">
<Like />
<CommentIcon />
<CommentIcon
accessToken={accessToken}
boardComment={comment}
decoded_nickName={decoded_nickName}
/>
</div>
<CategoryDetail category={boardDetail.category} />
</>
Expand Down
39 changes: 37 additions & 2 deletions src/component/CommentIcon.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,29 @@
import React, { useState } from "react";
import Image from "next/image";
import CommentModal from "@/component/CommentModal";
import CommentTest from "./CommentTest";

interface CommentIconProps {
accessToken: string | undefined;
boardComment: boardCommentType[];
decoded_nickName: string;
}

interface boardCommentType {
id: number;
boardId: number;
nickname: string;
content: string;
createdDate: string;
createdTime: string;
replyList: [];
}

export default function CommentIcon(props: CommentIconProps) {
const { accessToken, boardComment, decoded_nickName } = props;

console.log("아이콘 눌렀을 때 댓글: ", boardComment);

export default function CommentIcon() {
// 댓글 모달
const [showCommentsModal, setShowCommentsModal] = useState<boolean>(false);

Expand All @@ -23,8 +44,22 @@ export default function CommentIcon() {
onClick={handleCommentClick}
/>
{showCommentsModal && (
<CommentModal handleModalToggle={handleCommentClick} />
<CommentTest
handleModalToggle={handleCommentClick}
accessToken={accessToken}
boardComment={boardComment}
decoded_nickName={decoded_nickName}
/>
)}
</>
);
}

{
/* <CommentModal
handleModalToggle={handleCommentClick}
accessToken={accessToken}
boardComment={boardComment}
decoded_nickName={decoded_nickName}
/> */
}
164 changes: 93 additions & 71 deletions src/component/CommentModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,11 @@ import Reply from "./Reply";
import axios from "axios";
import { Result } from "postcss";

// interface handleCommentClickProps {
// handleCommentClick: () => void;
// }

interface CommentModalProps {
handleModalToggle: () => void;
accessToken: string | undefined;
boardComment: boardCommentType[];
decoded_nickName: string;
}

interface ReplyType {
Expand All @@ -20,21 +19,46 @@ interface ReplyType {
}

interface CommentType {
id: number;
id: number; // id
nickname: string;
comment: string;
reply: ReplyType[];
comment: string; // 댓글 내용
reply: ReplyType[]; // 답글
showReplyInput: boolean;
isDeleted: boolean;
createdAt: Date;
}

interface boardCommentType {
id: number;
boardId: number;
nickname: string;
content: string;
createdDate: string;
createdTime: string;
replyList: replyListType[];
}

interface replyListType {
id: number;
content: string;
createdDate: string;
createdTime: string;
nickname: string;
}

export default function CommentModal(props: CommentModalProps) {
const { handleModalToggle } = props;
const { handleModalToggle, accessToken, boardComment, decoded_nickName } =
props;

console.log("모달 댓글: ", boardComment);

const [comment, setComment] = useState("");
const [reply, setReply] = useState<ReplyType[]>([]);
const [comments, setComments] = useState<CommentType[]>([]);
const [boardCommentList, setBoardCommentList] = useState<boardCommentType[]>(
[]
);

const [comment, setComment] = useState(""); // 댓글 내용
const [reply, setReply] = useState<ReplyType[]>([]); // 답글 내용
const [comments, setComments] = useState<CommentType[]>([]); // 댓글 목록
const [editing, setEditing] = useState<
| {
index: number;
Expand All @@ -45,10 +69,12 @@ export default function CommentModal(props: CommentModalProps) {
>(undefined);
const [editText, setEditText] = useState("");

// 댓글 input 값
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
setComment(e.target.value);
};

// 답글 input 값
const handleReplyChange = (
e: React.ChangeEvent<HTMLInputElement>,
index: number
Expand All @@ -58,6 +84,7 @@ export default function CommentModal(props: CommentModalProps) {
setReply(newReply);
};

// 댓글 작성
const handleFormSubmit = async (e: React.FormEvent) => {
e.preventDefault();

Expand All @@ -71,11 +98,10 @@ export default function CommentModal(props: CommentModalProps) {
method: "POST",
url: "https://www.jerneithe.site/comment/write",
headers: {
Authorization:
"Bearer eyJhbGciOiJIUzI1NiJ9.eyJpYXQiOjE3MDEzOTI0NTUsImV4cCI6MTcwMTQwMzI1NSwic3ViIjoi7YWM7Iqk7YSwIn0.IW2xr6LD3aq0Wsxl1kBqce-YtxQBn4whGBAsrTDKNc0",
Authorization: "Bearer " + accessToken,
},
data: {
boardId: 4,
boardId: 5,
content: comment,
},
});
Expand All @@ -100,26 +126,9 @@ export default function CommentModal(props: CommentModalProps) {
} catch (err) {
console.log("댓글 작성 에러: ", err);
}

// 기존 코드
// if (comment.trim() === "") {
// alert("댓글을 입력해주세요");
// return;
// }
// setComments([
// ...comments,
// {
// nickname: user.nickname,
// comment: comment,
// reply: [],
// showReplyInput: false,
// isDeleted: false,
// createdAt: new Date(),
// },
// ]);
// setComment("");
};

// 답글 작성
const handleReplySubmit = async (e: React.FormEvent, index: number) => {
e.preventDefault();
if (!reply[index]?.text || reply[index]?.text.trim() === "") {
Expand All @@ -132,8 +141,7 @@ export default function CommentModal(props: CommentModalProps) {
method: "POST",
url: "https://www.jerneithe.site/comment/reply",
headers: {
Authorization:
"Bearer eyJhbGciOiJIUzI1NiJ9.eyJpYXQiOjE3MDEzOTI0NTUsImV4cCI6MTcwMTQwMzI1NSwic3ViIjoi7YWM7Iqk7YSwIn0.IW2xr6LD3aq0Wsxl1kBqce-YtxQBn4whGBAsrTDKNc0",
Authorization: "Bearer " + accessToken,
},
data: {
commentId: comments[index].id, // 답글을 작성할 댓글 ID
Expand All @@ -160,15 +168,6 @@ export default function CommentModal(props: CommentModalProps) {
} catch (err) {
console.log(err);
}

// 기존 코드
// comments[index].reply.push(reply[index]);
// setComments([...comments]);
// setReply([
// ...reply.slice(0, index),
// { text: "", createdAt: new Date() },
// ...reply.slice(index + 1),
// ]);
};

const handleReplyClick = (index: number) => {
Expand Down Expand Up @@ -209,8 +208,7 @@ export default function CommentModal(props: CommentModalProps) {
method: "PATCH",
url: "https://www.jerneithe.site/comment/modify",
headers: {
Authorization:
"Bearer eyJhbGciOiJIUzI1NiJ9.eyJpYXQiOjE3MDEzOTI0NTUsImV4cCI6MTcwMTQwMzI1NSwic3ViIjoi7YWM7Iqk7YSwIn0.IW2xr6LD3aq0Wsxl1kBqce-YtxQBn4whGBAsrTDKNc0",
Authorization: "Bearer " + accessToken,
},
data: {
id: comments[editing.index].id, // 수정할 댓글 ID
Expand All @@ -237,8 +235,7 @@ export default function CommentModal(props: CommentModalProps) {
method: "PATCH",
url: "https://www.jerneithe.site/comment/modify/reply",
headers: {
Authorization:
"Bearer eyJhbGciOiJIUzI1NiJ9.eyJpYXQiOjE3MDEzOTI0NTUsImV4cCI6MTcwMTQwMzI1NSwic3ViIjoi7YWM7Iqk7YSwIn0.IW2xr6LD3aq0Wsxl1kBqce-YtxQBn4whGBAsrTDKNc0",
Authorization: "Bearer " + accessToken,
},
data: {
id: comments[editing.index].reply[editing.replyIndex].id, // 수정할 답글 ID
Expand All @@ -256,36 +253,60 @@ export default function CommentModal(props: CommentModalProps) {
console.log(err);
}
}
// 나머지 코드...
}
}

// 기존 코드
// if (editing) {
// if (editing.type === "comment") {
// comments[editing.index].comment = editText;
// } else if (editing.type === "reply" && editing.replyIndex !== undefined) {
// comments[editing.index].reply[editing.replyIndex].text = editText;
// }
// setComments([...comments]);
// setEditing(undefined);
// setEditText("");
// }
};

const handleDelete = (index: number) => {
if (comments[index].reply.length > 0) {
comments[index].comment = "삭제된 댓글입니다.";
comments[index].isDeleted = true;
} else {
comments.splice(index, 1);
// 댓글 삭제
const handleDelete = async (index: number) => {
const commentId = comments[index].id;
console.log("delete commentId: ", commentId);

try {
const result = await axios({
method: "DELETE",
url: `https://www.jerneithe.site/comment/remove?commentId=${commentId}`,
headers: {
Authorization: "Bearer " + accessToken,
},
});

if (result.status === 200) {
if (comments[index].reply.length > 0) {
comments[index].comment = "삭제된 댓글입니다.";
comments[index].isDeleted = true;
} else {
comments.splice(index, 1);
}
setComments([...comments]);
}
} catch (err) {
console.log("댓글 삭제 에러: ", err);
}
setComments([...comments]);
};

const handleReplyDelete = (index: number, replyIndex: number) => {
comments[index].reply.splice(replyIndex, 1);
setComments([...comments]);
// 답글 삭제
const handleReplyDelete = async (index: number, replyIndex: number) => {
const replyId = comments[index].reply[replyIndex].id;

console.log("delete replyId: ", replyId);

try {
const result = await axios({
method: "DELETE",
url: `https://www.jerneithe.site/comment/remove/reply?replyId=${replyId}`,
headers: {
Authorization: "Bearer " + accessToken,
},
});

if (result.status === 200) {
comments[index].reply.splice(replyIndex, 1);
setComments([...comments]);
}
} catch (err) {
console.log("답글 삭제 에러: ", err);
}
};

// 시간 표시 데이터
Expand All @@ -312,6 +333,7 @@ export default function CommentModal(props: CommentModalProps) {
nickname: "김똥이",
};

console.log("comment: ", comments);
// ----------------------------------------------------------------------------------------------------------------------

return (
Expand Down Expand Up @@ -376,7 +398,7 @@ export default function CommentModal(props: CommentModalProps) {
))}
</div>
<form className="comment_form" onSubmit={handleFormSubmit}>
<p>{user.nickname}</p>
<p>{decoded_nickName}</p>
<input
type="text"
placeholder="댓글을 입력하세요."
Expand Down
Loading

0 comments on commit dbf970a

Please sign in to comment.