Skip to content

Commit

Permalink
Merge pull request #143 from LikeLionHGU/hwan_#139/board-detail
Browse files Browse the repository at this point in the history 
Hwan #139/board detail
  • Loading branch information
@hwan129
hwan129 authored Aug 6, 2024
2 parents d81cb19 + 03fb010 commit b05fb64
Show file tree
Hide file tree
Showing 6 changed files with 296 additions and 138 deletions.
57 changes: 47 additions & 10 deletions src/components/BoardContents.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import "../styles/board/boardcontents.scss";
import { useNavigate } from "react-router-dom";
import ModalContainer from "./ModalContainer";
import { setDataInElement } from "ckeditor5";
import BoardCreate from "./BoardCreate";

const BoardContents = ({ post, loggedInUser }) => {
const [likeCount, setLikeCount] = useState(0);
Expand Down Expand Up @@ -43,9 +44,10 @@ const BoardContents = ({ post, loggedInUser }) => {
bottom: "auto",
marginRight: "-50%",
transform: "translate(-50%, -50%)",
minWidth: "600px", // 원하는 너비
height: "600px", // 원하는 높이
minWidth: "800px", // 원하는 너비
height: "650px", // 원하는 높이
zIndex: "1001",
borderRadius: "12px",
},
};

Expand Down Expand Up @@ -192,9 +194,9 @@ const BoardContents = ({ post, loggedInUser }) => {
// setShowBoardToggle(!showBoardToggle);
// };

const handleOptionsToggle = () => {
console.log("!!");
setShowBoardToggle((prevState) => !prevState);
const handleOptionsToggle = (e) => {
setShowBoardToggle(!showBoardToggle);
e.stopPropagation();
};

const updatePost = async (postId) => {
Expand Down Expand Up @@ -272,11 +274,46 @@ const BoardContents = ({ post, loggedInUser }) => {
<div className="post-detail">
{
post.writer.id === localStorage.getItem("id") && (
<div>
<img src={More} onClick={handleOptionsToggle} alt="" />
{/* {{ showBoardToggle } ? <BoardToggle /> : <></>} */}
{/* {showBoardToggle && <BoardToggle postId={post.id} />} */}
{/* {showBoardDetail} */}
<div id="board-contents-zumzumzum-btns">
<img
id="board-contents-zumzumzum"
src={More}
onClick={handleOptionsToggle}
alt=""
/>
{showBoardToggle ? (
<div className="board-contents-btns">
<div
id="board-contents-update"
className="board-contents-update-delete"
onClick={(e) => {
e.stopPropagation();
setModalOpen(true);
}}
>
수정
</div>
{modalOpen && (
<BoardCreate
onClose={() => setModalOpen(false)}
// onSubmit={handleCreatePost}
// id={id}
/>
)}
<div
className="board-contents-update-delete"
id="board-contents-delete"
onClick={(e) => {
e.stopPropagation();
deletePost(post.id);
}}
>
삭제
</div>
</div>
) : (
<></>
)}
</div>
)
// :
Expand Down
12 changes: 11 additions & 1 deletion src/components/ModalContainer.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import Modal from "react-modal";
import axios from "axios";
import { useNavigate } from "react-router-dom";
import BoardDetail from "../pages/BoardDetail";
import Delete from "../imgs/delete.png";

// mode === 0: approval, mode === 1: board detail
export default function ModalContainer({
Expand Down Expand Up @@ -99,7 +100,16 @@ export default function ModalContainer({
</div>
</div>
) : (
<BoardDetail id={id} />
<div>
<img
src={Delete}
className="create-close-button"
alt="close"
onClick={closeModal}
style={{ zIndex: "1002", marginRight: "5px" }}
/>
<BoardDetail id={id} />
</div>
)}
</Modal>
);
Expand Down
5 changes: 5 additions & 0 deletions src/imgs/zzumzzumzzum.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
100 changes: 73 additions & 27 deletions src/pages/BoardDetail.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,8 @@ import "../styles/board/boarddetail.scss";
import CommentArrowImg from "../imgs/commentArrow.svg";
import GrayLikeImg from "../imgs/grayLike.svg";
import RedLikeImg from "../imgs/redLike.svg";
import Delete from "../imgs/delete.png";
import More from "../imgs/board_more.svg";
import Zumzumzum from "../imgs/zzumzzumzzum.svg";
import axios from "axios";

export default function BoardDetail({ id }) {
Expand Down Expand Up @@ -99,36 +99,83 @@ export default function BoardDetail({ id }) {
}
};

const Comment = ({ comment }) => (
<div id="detail-comments-container">
<div className="board-detail-comments-header">
<div className="board-detail-comments-name">{comment.user.name}</div>
<div className="board-detail-comments-toggle">
{comment.user.id === localStorage.getItem("id") && (
<div>
<img src={More} alt="more" />
const Comment = ({ comment }) => {
const [toggleDelete, setToggleDelete] = useState(false);

const handleToggleDelete = () => {
setToggleDelete(!toggleDelete);
console.log(toggleDelete);
};
console.log(comment);
return (
<div id="detail-comments-real-container">
<div id="detail-comments-container">
<div className="board-detail-comments-header">
<div className="board-detail-comments-name">
{comment.user.name}
</div>
)}
<div className="board-detail-comments-toggle">
{comment.write === localStorage.getItem("id") && (
<div>
<img src={More} alt="more" />
</div>
)}
</div>
</div>
<div className="board-detail-comments-date">
{comment.createdDate}
</div>
<div className="board-detail-comments-contents">
{comment.contents}
</div>
<div className="board-detail-comments-likebtn">
<img
className="board-detail-comments-like-img"
onClick={() => handleSetCommentsLike(comment.id)}
src={comment.isLike ? RedLikeImg : GrayLikeImg}
alt="like"
/>
<div className="board-detail-comments-likecount">
{comment.likeCount}
</div>
</div>
</div>
</div>
<div className="board-detail-comments-date">{comment.createdDate}</div>
<div className="board-detail-comments-contents">{comment.contents}</div>
<div className="board-detail-comments-likebtn">
<img
className="board-detail-comments-like-img"
onClick={() => handleSetCommentsLike(comment.id)}
src={comment.isLike ? RedLikeImg : GrayLikeImg}
alt="like"
/>
<div className="board-detail-comments-likecount">
{comment.likeCount}
<div id="board-detail-comment-btns">
<div
id="board-detail-comment-zumzumzum-container"
onClick={() => {
handleToggleDelete();
}}
>
<img
src={Zumzumzum}
alt="zumzumzum"
id="board-detail-comment-zumzumzum"
/>
</div>
{toggleDelete ? (
<div
id="board-detail-comment-remove-btn"
onClick={() => {
deleteComment(comment.id);
}}
>
삭제
</div>
) : (
<div
id="board-detail-comment-remove-btn"
style={{ border: "none" }}
></div>
)}
</div>
<div className="board-detail-comments-bottom"></div>
</div>
<div className="board-detail-comments-bottom"></div>
</div>
);
);
};

const handleSubmit = async () => {
console.log(id);
if (comment !== "") {
const token = localStorage.getItem("token");

Expand Down Expand Up @@ -184,9 +231,8 @@ export default function BoardDetail({ id }) {
}, [id, navigate]);

return (
<div className="board-detail-container">
<div className="board-detail-container" style={{ overflowY: "hidden" }}>
<div className="board-modal-detail-content">
<img src={Delete} className="create-close-button" alt="close" />
<div className="board-detail-date">{post.createdDate}</div>
<div className="board-detail-title">{post.title}</div>
<div className="board-detail-content">{post.contents}</div>
Expand Down
Loading

0 comments on commit b05fb64

Please sign in to comment.