From 0e933f918c3b3d23b6305ac4ded7bd8fe677cd25 Mon Sep 17 00:00:00 2001 From: nebulaBdj Date: Mon, 4 Dec 2023 20:35:35 +0900 Subject: [PATCH] =?UTF-8?q?[Feat]=20=EC=A2=8B=EC=95=84=EC=9A=94=20?= =?UTF-8?q?=EA=B8=B0=EB=8A=A5=20=ED=94=BC=EB=93=9C=ED=8E=98=EC=9D=B4?= =?UTF-8?q?=EC=A7=80=20=EB=94=94=ED=85=8C=EC=9D=BC=20=ED=8E=98=EC=9D=B4?= =?UTF-8?q?=EC=A7=80=20=EA=B5=AC=ED=98=84=20=EC=99=84=EB=A3=8C(#10)=20[Fix?= =?UTF-8?q?]=20=EB=94=94=ED=85=8C=EC=9D=BC=20=ED=8E=98=EC=9D=B4=EC=A7=80?= =?UTF-8?q?=20=ED=98=B8=EC=B6=9C=20=EC=97=90=EB=9F=AC(#56)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/detail/page.tsx | 35 ++++++++++---- src/component/CommentIcon.tsx | 2 +- src/component/CommentTest.tsx | 2 +- src/component/FeedContents.tsx | 15 ++++-- src/component/Like.tsx | 87 ++++++++++++++++++++++------------ 5 files changed, 95 insertions(+), 46 deletions(-) diff --git a/src/app/detail/page.tsx b/src/app/detail/page.tsx index f1c24d0..9fdcdeb 100644 --- a/src/app/detail/page.tsx +++ b/src/app/detail/page.tsx @@ -30,19 +30,25 @@ interface boardCommentType { status: number; } +interface LIKE { + likeId : number; + nickName: string; +} export default function Detail(): JSX.Element { const [boardDetail, setBoardDetail] = useState(null); const [dropdownVisible, setDropdownVisible] = useState(false); - const [localBoardId, setLocalBoardId] = useState(0); + const [localBoardId, setLocalBoardId] = useState(); const [editBoardId, setEditBoardId] = useRecoilState(editBoardIdState); const [comment, setComment] = useState([]); + const [likelist, setLikelist] = useState([]);//리코일로 만드는게 나을듯 일단은 이대로 ㄱㄱ + const [likeCount, setLikeCount] = useState(); const router = useRouter(); - console.log(router); + // console.log(router); const accessToken = Cookies.get("accessToken"); - console.log("accessToken 값: ", accessToken); + // console.log("accessToken 값: ", accessToken); // const expirationTime = 3 * 60 * 60 * 1000; // const currentTime = new Date().getTime(); @@ -59,7 +65,7 @@ export default function Detail(): JSX.Element { ? (jwt.decode(accessToken) as { [key: string]: any }) : null; const decoded_nickName = decodedToken?.sub; - console.log("디코딩", decodedToken); + // console.log("디코딩", decodedToken); useEffect(() => { //여기서 localStorae의 값을 가져와 정수로 바꾸기 @@ -67,28 +73,32 @@ export default function Detail(): JSX.Element { const boardIdNumber = boardId_in ? parseInt(boardId_in) : null; setLocalBoardId(boardIdNumber); - console.log("정수 변환", boardIdNumber); - console.log("로컬에서 불러온 아이디", localBoardId); - }, [localBoardId]); + // console.log("정수 변환", boardIdNumber); + // console.log("로컬에서 불러온 아이디", localBoardId); - useEffect(() => { + }, []); + + useEffect(()=>{ const fetchData = async () => { + if (!localBoardId) return; try { const response = await axios.get( `https://www.jerneithe.site/board/detail/${localBoardId}`, ); console.log("detail response: ", response.data); console.log("댓글: ", response.data.comments); + setLikelist(response.data.likelist); + setLikeCount(response.data.likeCount); setBoardDetail(response.data); setComment(response.data.comments); - console.log(response); + // console.log(response); } catch (error) { console.error("Error fetching data:", error); } }; fetchData(); - }, [localBoardId]); + },[localBoardId, setLocalBoardId]) const handleClick = () => { router.push("/"); @@ -120,6 +130,8 @@ export default function Detail(): JSX.Element { } }; + console.log("보낼 좋아요 카운트와 리스트", likeCount, likelist); + return (
@@ -194,6 +206,9 @@ export default function Detail(): JSX.Element { like.nickName !== decodeNick) : decodeNick // decodeNick이 undefined가 아닐 때만 추가 - ? [...myarr.likelist, { likeId: -1, nickName: decodeNick }] + ? [...(Array.isArray(myarr.likelist) ? myarr.likelist : []), { likeId: -1, nickName: decodeNick }] : myarr.likelist, }; } @@ -140,10 +140,17 @@ export default function FeedContents() { router.push('/detail'); }; - const isUserLiked = (likelist:LIKE[], userNickname:string | undefined) => { + // const isUserLiked = (likelist:LIKE[], userNickname:string | undefined) => { + + // if (!likelist) return false; + // return likelist.some((like) => like.nickName === userNickname); + // // some: 위의 조건을 만족할 경우 순회를 중단 한다 즉, true 값을 리턴한다. + // // 만족 못한다면 false를 보냄 + // }; + + const isUserLiked = (likelist:LIKE[] | undefined, userNickname:string | undefined) => { + if (!likelist || !Array.isArray(likelist)) return false; return likelist.some((like) => like.nickName === userNickname); - // some: 위의 조건을 만족할 경우 순회를 중단 한다 즉, true 값을 리턴한다. - // 만족 못한다면 false를 보냄 }; console.log("리코일스테이트로 잘 들어왔는지 확인", feedata); diff --git a/src/component/Like.tsx b/src/component/Like.tsx index 1df2ae0..3abdb4e 100644 --- a/src/component/Like.tsx +++ b/src/component/Like.tsx @@ -2,51 +2,78 @@ import axios from "axios"; import Image from "next/image"; import { useEffect, useState } from "react"; +interface LIKE { + likeId : number; + nickName: string; +} + + export default function Like({ boardId, accessToken, + nickname, + likelist, + likeCount, }: { boardId: number; accessToken: string; + nickname: string; + likelist: LIKE[]; + likeCount: number | undefined; }): JSX.Element { const [isLiked, setIsLiked] = useState(false); + const [likeCountState, setLikeCountState] = useState(likeCount || 0); + + // // boardId나 accessToken이 변경될 때 isLiked를 초기화 + // useEffect(() => { + // setIsLiked(false); + // }, [boardId, accessToken]); + + useEffect(()=>{ + setIsLiked(isUserLiked(likelist, nickname)); + },[]); - // boardId나 accessToken이 변경될 때 isLiked를 초기화 - useEffect(() => { - setIsLiked(false); - }, [boardId, accessToken]); + const updateLikeStatus = async (boardId : number) => { + const url = `https://www.jerneithe.site/board/like/${boardId}`; + + try { + await axios({ + method: "post", + url: url, + headers: { Authorization: "Bearer " + accessToken }, + }); + } catch (error) { + console.error("좋아요 변경 실패:", error); + } + }; + + const isUserLiked = (likelist:LIKE[] | undefined, userNickname:string | undefined) => { + if (!likelist || !Array.isArray(likelist)) return false; + return likelist.some((like) => like.nickName === userNickname); + }; const handleLikeClick = async () => { - if (isLiked) { - // 좋아요 취소 - try { - await axios({ - method: "DELETE", - url: `https://www.jerneithe.site/board/like/${boardId}`, - headers: { Authorization: "Bearer " + accessToken }, - }); - setIsLiked(false); - } catch (error) { - console.error("좋아요 취소 실패:", error); - } - } else { - // 좋아요 추가 - try { - await axios({ - method: "post", - url: `https://www.jerneithe.site/board/like/${boardId}`, - headers: { Authorization: "Bearer " + accessToken }, - }); - setIsLiked(true); - } catch (error) { - console.error("좋아요 실패:", error); - } + try { + await updateLikeStatus(boardId); + setIsLiked(!isLiked); + setLikeCountState(isLiked ? likeCountState - 1 : likeCountState + 1); + } catch (error) { + console.error('좋아요 변경 실패:', error); } }; return ( <> - {isLiked ? ( + + 좋아요 +

{likeCountState}

+ {/* {isLiked ? ( like - )} + )} */} ); }