From 483aca4693eacd3a93da3b07a7dd84289118936e Mon Sep 17 00:00:00 2001 From: Clara Date: Tue, 15 Oct 2024 18:17:43 +0900 Subject: [PATCH 1/3] =?UTF-8?q?fix(#128):=20=EA=B2=8C=EC=8B=9C=EA=B8=80?= =?UTF-8?q?=EC=97=90=EC=84=9C=20=EB=B9=84=ED=9A=8C=EC=9B=90=EC=9D=B4=20?= =?UTF-8?q?=EB=B2=84=ED=8A=BC=20=ED=81=B4=EB=A6=AD=EC=8B=9C=20=ED=85=8D?= =?UTF-8?q?=EC=8A=A4=ED=8A=B8,=20=EB=8F=99=EC=9E=91=20=EB=8F=99=EC=9D=BC?= =?UTF-8?q?=ED=95=98=EA=B2=8C=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/readBoard/ReadBoard.tsx | 19 +++++++++---------- 1 file changed, 9 insertions(+), 10 deletions(-) diff --git a/src/components/readBoard/ReadBoard.tsx b/src/components/readBoard/ReadBoard.tsx index 4f95f48b..53f804b7 100644 --- a/src/components/readBoard/ReadBoard.tsx +++ b/src/components/readBoard/ReadBoard.tsx @@ -153,7 +153,7 @@ const ReadBoard = (props: ReadBoardProps) => { if (!isUser.gameName) { return showAlertWithContent( logoutMessage, - () => router.push("/"), + () => router.push("/login"), "로그인하기" ); } @@ -167,7 +167,7 @@ const ReadBoard = (props: ReadBoardProps) => { if (!isUser.gameName) { return showAlertWithContent( logoutMessage, - () => router.push("/"), + () => router.push("/login"), "로그인하기" ); } @@ -215,7 +215,7 @@ const ReadBoard = (props: ReadBoardProps) => { if (!isUser.gameName) { return showAlertWithContent( logoutMessage, - () => router.push("/"), + () => router.push("/login"), "로그인하기" ); } @@ -241,7 +241,7 @@ const ReadBoard = (props: ReadBoardProps) => { if (!isUser.gameName) { return showAlertWithContent( logoutMessage, - () => router.push("/"), + () => router.push("/login"), "로그인하기" ); } @@ -265,7 +265,7 @@ const ReadBoard = (props: ReadBoardProps) => { if (!isUser.gameName) { return showAlertWithContent( logoutMessage, - () => router.push("/"), + () => router.push("/login"), "로그인하기" ); } @@ -313,7 +313,7 @@ const ReadBoard = (props: ReadBoardProps) => { if (!isUser.gameName) { return showAlertWithContent( logoutMessage, - () => router.push("/"), + () => router.push("/login"), "로그인하기" ); } @@ -333,7 +333,7 @@ const ReadBoard = (props: ReadBoardProps) => { if (!isUser.gameName) { return showAlertWithContent( logoutMessage, - () => router.push("/"), + () => router.push("/login"), "로그인하기" ); } @@ -354,8 +354,8 @@ const ReadBoard = (props: ReadBoardProps) => { if (!isUser.gameName) { return showAlertWithContent( loginRequiredMessage, - () => router.push("/"), - "로그인하기" + () => setShowAlert(false), + "확인" ); } @@ -676,7 +676,6 @@ const UserSection = styled.div` align-items: center; justify-content: space-between; white-space: nowrap; - /* gap:90px; */ `; const UserLeft = styled.div` From 552f117a97e441e88f483ca6dfac843588ad12f9 Mon Sep 17 00:00:00 2001 From: Clara Date: Tue, 15 Oct 2024 18:34:18 +0900 Subject: [PATCH 2/3] =?UTF-8?q?fix(#128):=20=EA=B2=8C=EC=8B=9C=ED=8C=90=20?= =?UTF-8?q?=EB=AC=B4=ED=95=9C=20=EB=A1=9C=EB=94=A9=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/page.tsx | 6 ++--- src/components/createBoard/PostBoard.tsx | 22 ++++++++++------- src/components/readBoard/ReadBoard.tsx | 31 ++++++++++++++---------- 3 files changed, 34 insertions(+), 25 deletions(-) diff --git a/src/app/board/page.tsx b/src/app/board/page.tsx index cec3544b..137d5a5e 100644 --- a/src/app/board/page.tsx +++ b/src/app/board/page.tsx @@ -280,10 +280,10 @@ const BoardPage = () => { icon="exclamation" width={68} height={58} - content="로그아웃 되었습니다. 다시 로그인 해주세요." + content="로그인이 필요한 서비스입니다." alt="로그인 필요" - onClose={() => router.push("/login")} - buttonText="로그인하기" + onClose={() => setShowAlert(false)} + buttonText="확인" /> )} {isPostingModal && ( diff --git a/src/components/createBoard/PostBoard.tsx b/src/components/createBoard/PostBoard.tsx index f30dab7b..a49d99b4 100644 --- a/src/components/createBoard/PostBoard.tsx +++ b/src/components/createBoard/PostBoard.tsx @@ -25,6 +25,7 @@ import { useRouter } from "next/navigation"; import { getProfile } from "@/api/user"; import { setUserProfile } from "@/redux/slices/userSlice"; import { theme } from "@/styles/theme"; +import { setClosePostingModal } from "@/redux/slices/modalSlice"; interface PostBoardProps { onClose: () => void; @@ -81,17 +82,20 @@ const PostBoard = (props: PostBoardProps) => { const [isFocused, setIsFocused] = useState(false); const [showAlert, setShowAlert] = useState(false); - useEffect(() => { - const fetchProfile = async () => { - try { - const response = await getProfile(); - dispatch(setUserProfile(response)); - } catch (error) { - console.error(error); - } - }; + const fetchProfile = async () => { + try { + const response = await getProfile(); + dispatch(setUserProfile(response)); + } catch (error) { + console.error(error); + } + }; + useEffect(() => { fetchProfile(); + return () => { + dispatch(setClosePostingModal()); + } }, []); /* 유저가 게시판에 올린 글에 대한 데이터 */ diff --git a/src/components/readBoard/ReadBoard.tsx b/src/components/readBoard/ReadBoard.tsx index 53f804b7..80068544 100644 --- a/src/components/readBoard/ReadBoard.tsx +++ b/src/components/readBoard/ReadBoard.tsx @@ -87,25 +87,30 @@ const ReadBoard = (props: ReadBoardProps) => { /* 게시글 api */ const getPostData = async () => { - setLoading(true); - if (!!isUser.gameName && postId) { - const memberData = await getMemberPost(postId); - setIsPost(memberData.result); - setGameMode(memberData.result.gameMode); - setIsBlockedStatus(memberData.result.isBlocked); - setLoading(false); - } - - if (!isUser.gameName && postId) { - const nonMember = await getNonMemberPost(postId); - - setIsPost(nonMember.result); + try { + setLoading(true); + + if (!!isUser.gameName && postId) { + const memberData = await getMemberPost(postId); + setIsPost(memberData.result); + setGameMode(memberData.result.gameMode); + setIsBlockedStatus(memberData.result.isBlocked); + } else if (!isUser.gameName && postId) { + const nonMember = await getNonMemberPost(postId); + setIsPost(nonMember.result); + } + } catch (error) { + console.error(error); + } finally { setLoading(false); } }; useEffect(() => { getPostData(); + return () => { + dispatch(setCloseReadingModal()); + } }, [isBlockedStatus, isFriendStatus, isUser.gameName, postId]); /* MannerLevelBox 외부 클릭 시 닫힘 */ From 4caa3cd1f250e6da69a902b2e63933894331d680 Mon Sep 17 00:00:00 2001 From: Clara Date: Tue, 15 Oct 2024 20:22:37 +0900 Subject: [PATCH 3/3] =?UTF-8?q?fix(#128):=20=EC=B1=84=ED=8C=85,=20?= =?UTF-8?q?=EA=B2=8C=EC=8B=9C=ED=8C=90=20=EB=8D=94=EB=B3=B4=EA=B8=B0=20?= =?UTF-8?q?=EB=B2=84=ED=8A=BC=20=EC=98=A4=EB=A5=98=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/login/page.tsx | 4 ++ src/components/chat/ChatLayout.tsx | 6 ++- src/components/chat/ChatRoomList.tsx | 58 ++---------------------- src/components/chat/MessageHeader.tsx | 1 - src/components/common/Header.tsx | 8 +++- src/components/createBoard/PostBoard.tsx | 5 +- src/components/readBoard/ReadBoard.tsx | 51 ++++++++++++--------- src/utils/storage.ts | 18 ++++++++ 8 files changed, 71 insertions(+), 80 deletions(-) diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx index fc54e8ca..3558874f 100644 --- a/src/app/login/page.tsx +++ b/src/app/login/page.tsx @@ -13,6 +13,7 @@ import { clearUserProfile, setUserName, setUserProfileImg, + setUserId } from "@/redux/slices/userSlice"; import { connectSocket, socket } from "@/socket"; import { theme } from "@/styles/theme"; @@ -22,6 +23,7 @@ import { setName, setProfileImg, setToken, + setId } from "@/utils/storage"; import { AxiosError } from "axios"; import Image from "next/image"; @@ -81,8 +83,10 @@ const Login = () => { dispatch(setUserName(response.result.name)); dispatch(setUserProfileImg(response.result.profileImage)); + dispatch(setUserId(response.result.id)); setName(response.result.name, autoLogin); setProfileImg(response.result.profileImage, autoLogin); + setId(response.result.id, autoLogin); router.push("/"); diff --git a/src/components/chat/ChatLayout.tsx b/src/components/chat/ChatLayout.tsx index 98983aac..7a910f21 100644 --- a/src/components/chat/ChatLayout.tsx +++ b/src/components/chat/ChatLayout.tsx @@ -55,6 +55,8 @@ const ChatLayout = (props: ChatLayoutProps) => { const isChatRoomOpen = useSelector((state: RootState) => state.chat.isChatRoomOpen); const isChatUuid = useSelector((state: RootState) => state.chat.isChatRoomUuid); const isModalType = useSelector((state: RootState) => state.modal.modalType); + const isUser = useSelector((state: RootState) => state.user); + /* 채팅창이 닫힐 때 store에서 채팅창 닫힘 처리 */ useEffect(() => { @@ -431,13 +433,13 @@ const ChatLayout = (props: ChatLayoutProps) => { : [ { text: '채팅방 나가기', onClick: (e: React.MouseEvent) => handleModalChange(e, 'leave') }, // 친구 추가 조건: 친구가 아니고, 친구 요청도 하지 않은 경우 - !chatEnterData?.friend && !chatEnterData?.friendRequestMemberId && + !chatEnterData?.friend && chatEnterData?.friendRequestMemberId !== isUser.id && { text: '친구 추가', onClick: handleFriendAdd }, // 친구 취소 조건: 친구인 경우 chatEnterData?.friend && { text: '친구 삭제', onClick: handleFriendDelete }, // 친구 요청 취소 조건: 친구가 아니고, 친구 요청을 이미 한 경우 - !chatEnterData?.friend && chatEnterData?.friendRequestMemberId && + !chatEnterData?.friend && chatEnterData?.friendRequestMemberId === isUser.id && { text: '친구 요청 취소', onClick: handleCancelFriendReq }, { text: '차단하기', onClick: (e: React.MouseEvent) => handleModalChange(e, 'block') }, diff --git a/src/components/chat/ChatRoomList.tsx b/src/components/chat/ChatRoomList.tsx index d21c0164..191ef465 100644 --- a/src/components/chat/ChatRoomList.tsx +++ b/src/components/chat/ChatRoomList.tsx @@ -26,8 +26,8 @@ const ChatRoomList = (props: ChatRoomListProps) => { const dispatch = useDispatch(); - const isUser = useSelector((state: RootState) => state.user); const isModalType = useSelector((state: RootState) => state.modal.modalType); + const isUser = useSelector((state: RootState) => state.user); const [chatrooms, setChatrooms] = useState([]); const [reloadChatrooms, setReloadChatrooms] = useState(false); @@ -114,7 +114,7 @@ const ChatRoomList = (props: ChatRoomListProps) => { if (room.friend) { // 친구 삭제 handleFriendDelete(e, room.targetMemberId); - } else if (!room.friend && room.friendRequestMemberId) { + } else if (!room.friend && room.friendRequestMemberId === isUser.id) { //친구 요청 취소 handleCancelFriendReq(e, room.targetMemberId); } else if (!room.friend) { @@ -137,9 +137,9 @@ const ChatRoomList = (props: ChatRoomListProps) => { if (room.friend) { friendText = '친구 삭제'; - } else if (!room.friend && room.friendRequestMemberId) { + } else if (!room.friend && room.friendRequestMemberId === isUser.id) { friendText = '친구 요청 취소'; - } else if (!room.friend && !room.friendRequestMemberId) { + } else if (!room.friend) { friendText = '친구 추가'; } @@ -228,54 +228,4 @@ const NoData = styled.p` margin-top:50%; `; -const CheckContent = styled.div` - display: flex; - flex-direction: column; - align-items: flex-start; - gap: 20px; -`; - -const ModalSubmitBtn = styled.div` - margin-top:52px; -`; - -const ReportLabel = styled.p` - color: ${theme.colors.gray600}; - ${(props) => props.theme.fonts.semiBold18}; - margin-bottom: 12px; -`; - -const ReportContent = styled.div` - display: flex; - flex-direction: column; - align-items: flex-start; - gap: 20px; -`; - -const ReportReasonContent = styled(ReportContent)` - margin-bottom: 38px; -`; - -const ReportButton = styled.div` - margin-top:21px; -`; - -const Text = styled.div` - text-align: center; - color: ${theme.colors.gray600}; - ${(props) => props.theme.fonts.regular20}; - margin: 28px 0; -`; - -const SmallText = styled.div` - text-align: center; - color: ${theme.colors.gray200}; - ${(props) => props.theme.fonts.regular14}; - margin-top: 13px; -`; - -const MsgConfirm = styled(Text)` - ${(props) => props.theme.fonts.regular25}; - margin: 80px 0; -`; diff --git a/src/components/chat/MessageHeader.tsx b/src/components/chat/MessageHeader.tsx index a8fa6228..10e644d9 100644 --- a/src/components/chat/MessageHeader.tsx +++ b/src/components/chat/MessageHeader.tsx @@ -9,7 +9,6 @@ import { getProfileBgColor } from "@/utils/profile"; import { useRouter } from "next/navigation"; import { RootState } from "@/redux/store"; import { MoreBoxMenuItems } from "@/interface/moreBox"; -import { useEffect } from "react"; interface MessageHeaderProps { isMoreBoxOpen: boolean; diff --git a/src/components/common/Header.tsx b/src/components/common/Header.tsx index d0779e2b..bf0ac2dd 100644 --- a/src/components/common/Header.tsx +++ b/src/components/common/Header.tsx @@ -12,10 +12,12 @@ import { getAccessToken, getName, getProfileImg, + getUserId, } from "@/utils/storage"; import { getProfileBgColor } from "@/utils/profile"; import { clearUserProfile, + setUserId, setUserName, setUserProfileImg, } from "@/redux/slices/userSlice"; @@ -48,6 +50,7 @@ const Header = () => { const storedName = getName(); const storedProfileImg = Number(getProfileImg()); + const storedUserId = Number(getUserId()); const isFirstRender = useRef(true); @@ -58,6 +61,9 @@ const Header = () => { if (storedProfileImg) { dispatch(setUserProfileImg(storedProfileImg)); } + if (storedUserId) { + dispatch(setUserId(storedUserId)); + } }, []); /* 알림창 열고 닫는 함수 */ @@ -105,7 +111,7 @@ const Header = () => { } }, [storedName]); - useEffect(() => {}, [notiCount]); + useEffect(() => { }, [notiCount]); return ( diff --git a/src/components/createBoard/PostBoard.tsx b/src/components/createBoard/PostBoard.tsx index a49d99b4..15e86099 100644 --- a/src/components/createBoard/PostBoard.tsx +++ b/src/components/createBoard/PostBoard.tsx @@ -93,10 +93,13 @@ const PostBoard = (props: PostBoardProps) => { useEffect(() => { fetchProfile(); + }, []); + + useEffect(() => { return () => { dispatch(setClosePostingModal()); } - }, []); + }, []) /* 유저가 게시판에 올린 글에 대한 데이터 */ useEffect(() => { diff --git a/src/components/readBoard/ReadBoard.tsx b/src/components/readBoard/ReadBoard.tsx index 80068544..b5d9f491 100644 --- a/src/components/readBoard/ReadBoard.tsx +++ b/src/components/readBoard/ReadBoard.tsx @@ -90,12 +90,12 @@ const ReadBoard = (props: ReadBoardProps) => { try { setLoading(true); - if (!!isUser.gameName && postId) { + if (!!isUser.id && postId) { const memberData = await getMemberPost(postId); setIsPost(memberData.result); setGameMode(memberData.result.gameMode); setIsBlockedStatus(memberData.result.isBlocked); - } else if (!isUser.gameName && postId) { + } else if (!isUser.id && postId) { const nonMember = await getNonMemberPost(postId); setIsPost(nonMember.result); } @@ -108,10 +108,13 @@ const ReadBoard = (props: ReadBoardProps) => { useEffect(() => { getPostData(); + }, [isBlockedStatus, isFriendStatus, isUser, postId]); + + useEffect(() => { return () => { dispatch(setCloseReadingModal()); } - }, [isBlockedStatus, isFriendStatus, isUser.gameName, postId]); + }, []) /* MannerLevelBox 외부 클릭 시 닫힘 */ useEffect(() => { @@ -177,7 +180,7 @@ const ReadBoard = (props: ReadBoardProps) => { ); } - if (!isPost || isUser?.gameName === isPost?.gameName) return; + if (!isPost || isUser.id === isPost?.memberId) return; const params = { targetMemberId: isPost.memberId, @@ -201,6 +204,16 @@ const ReadBoard = (props: ReadBoardProps) => { }; const handleRunBlock = async () => { + if (!isUser.id) { + return showAlertWithContent( + logoutMessage, + () => router.push("/login"), + "로그인하기" + ); + } + + if (!isPost || isUser.id === isPost?.memberId) return; + // 차단하기 api setIsBlockBoxOpen(false); if (isPost) { @@ -217,7 +230,7 @@ const ReadBoard = (props: ReadBoardProps) => { /* 친구 추가 */ const handleFriendAdd = async () => { - if (!isUser.gameName) { + if (!isUser.id) { return showAlertWithContent( logoutMessage, () => router.push("/login"), @@ -225,9 +238,7 @@ const ReadBoard = (props: ReadBoardProps) => { ); } - if (!isPost || isUser?.gameName === isPost?.gameName) return; - - if (isPost?.isFriend || isPost?.friendRequestMemberId) return; + if (!isPost || isUser.id === isPost?.memberId) return; try { await reqFriend(isPost.memberId); @@ -243,7 +254,7 @@ const ReadBoard = (props: ReadBoardProps) => { /* 친구 요청 취소 */ const handleCancelFriendReq = async () => { - if (!isUser.gameName) { + if (!isUser.id) { return showAlertWithContent( logoutMessage, () => router.push("/login"), @@ -251,7 +262,7 @@ const ReadBoard = (props: ReadBoardProps) => { ); } - if (!isPost || isUser?.gameName === isPost?.gameName) return; + if (!isPost || isUser.id === isPost?.memberId) return; try { await cancelFriendReq(isPost.memberId); @@ -267,7 +278,7 @@ const ReadBoard = (props: ReadBoardProps) => { /* 친구 삭제 */ const handleFriendDelete = async () => { - if (!isUser.gameName) { + if (!isUser.id) { return showAlertWithContent( logoutMessage, () => router.push("/login"), @@ -275,9 +286,7 @@ const ReadBoard = (props: ReadBoardProps) => { ); } - if (!isPost || isUser?.gameName === isPost?.gameName) return; - - if (!isPost?.isFriend) return; + if (!isPost || isUser.id === isPost?.memberId) return; try { await deleteFriend(isPost.memberId); @@ -293,7 +302,7 @@ const ReadBoard = (props: ReadBoardProps) => { /* 매너레벨 박스 열기 */ const handleMannerLevelBoxOpen = () => { - if (!isUser.gameName) { + if (!isUser.id) { return showAlertWithContent( loginRequiredMessage, () => setShowAlert(false), @@ -315,7 +324,7 @@ const ReadBoard = (props: ReadBoardProps) => { /* 게시글 수정 */ const handleEdit = async () => { - if (!isUser.gameName) { + if (!isUser.id) { return showAlertWithContent( logoutMessage, () => router.push("/login"), @@ -335,7 +344,7 @@ const ReadBoard = (props: ReadBoardProps) => { /* 게시글 삭제 */ const handleDelete = async () => { - if (!isUser.gameName) { + if (!isUser.id) { return showAlertWithContent( logoutMessage, () => router.push("/login"), @@ -356,7 +365,7 @@ const ReadBoard = (props: ReadBoardProps) => { /* 더보기 버튼 토글 */ const handleMoreBoxToggle = () => { - if (!isUser.gameName) { + if (!isUser.id) { return showAlertWithContent( loginRequiredMessage, () => setShowAlert(false), @@ -398,10 +407,10 @@ const ReadBoard = (props: ReadBoardProps) => { friendText = "친구 삭제"; friendFunc = handleFriendDelete; } else { - if (!isPost?.friendRequestMemberId) { + if (!isPost?.isFriend && isPost?.friendRequestMemberId !== isUser.id) { friendText = "친구 추가"; friendFunc = handleFriendAdd; - } else { + } if (!isPost?.isFriend && isPost?.friendRequestMemberId === isUser.id) { friendText = "친구 요청 취소"; friendFunc = handleCancelFriendReq; } @@ -439,7 +448,7 @@ const ReadBoard = (props: ReadBoardProps) => { /* 채팅방 연결 */ const handleChatStart = async () => { - if (!isUser.gameName) { + if (!isUser.id) { return showAlertWithContent( loginRequiredMessage, () => setShowAlert(false), diff --git a/src/utils/storage.ts b/src/utils/storage.ts index 1d38d4c3..e9deeb3a 100644 --- a/src/utils/storage.ts +++ b/src/utils/storage.ts @@ -25,6 +25,14 @@ export const setProfileImg = (profileImg: string, autoLogin: boolean) => { return null; }; +export const setId = (id: number, autoLogin: boolean) => { + if (typeof window !== 'undefined') { + const storage = autoLogin ? localStorage : sessionStorage; + storage.setItem('userId', id.toString()); + } + return null; +}; + /* 토큰 사용 */ export const getAccessToken = () => { if (typeof window !== 'undefined') { @@ -56,6 +64,14 @@ export const getProfileImg = () => { return null; }; +/* 유저 id 사용 */ +export const getUserId = () => { + if (typeof window !== 'undefined') { + return localStorage.getItem('userId') || sessionStorage.getItem('userId'); + } + return null; +}; + /* 토큰 제거 */ export const clearTokens = () => { @@ -67,6 +83,8 @@ export const clearTokens = () => { sessionStorage.removeItem('refreshToken'); sessionStorage.removeItem('name'); sessionStorage.removeItem('profileImg'); + sessionStorage.removeItem('userId'); + sessionStorage.removeItem('userId'); }; /* 매칭 완료 여부 */