From 61146c5c6c4f20397d2716101f193e34ab51c593 Mon Sep 17 00:00:00 2001 From: CBWDG Date: Tue, 14 Nov 2023 14:37:35 +0900 Subject: [PATCH 1/7] =?UTF-8?q?fix(#83):=20chatList=20CollapseButton=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../molecules/chat-list/ChatDMFriendList.tsx | 56 ++++++++++--------- .../molecules/chat-list/ChatDMList.tsx | 34 ++++++++--- src/components/molecules/chat-list/styles.ts | 38 +++++-------- .../organisms/chats/chat-space/ChatSpace.tsx | 14 +++-- .../organisms/chats/chat-space/styled.ts | 7 ++- 5 files changed, 83 insertions(+), 66 deletions(-) diff --git a/src/components/molecules/chat-list/ChatDMFriendList.tsx b/src/components/molecules/chat-list/ChatDMFriendList.tsx index 974f4ff..f222dc9 100644 --- a/src/components/molecules/chat-list/ChatDMFriendList.tsx +++ b/src/components/molecules/chat-list/ChatDMFriendList.tsx @@ -1,51 +1,53 @@ -import React, { FC, useCallback, useState } from 'react'; -import { BiSolidRightArrow } from 'react-icons/bi'; +import React, { FC, useCallback, useState, useEffect, useRef } from 'react'; import * as S from './styles'; -// import ChatModal from '../chat-modal/ChatModal'; -// import { useRouter } from 'next/router'; -// import Link from 'next/link'; -import { useRecoilState, useRecoilValue } from 'recoil'; +import { useRecoilValue } from 'recoil'; import { FriendsAtom } from '@/recoil/atoms/FriendsAtom'; import { useRouter } from 'next/router'; -// import useSocket from '@/hooks/useSocket'; -// import ChatSpace from '../chat-modal/ChatSpace'; +import { BiSolidDownArrow } from 'react-icons/bi'; -const DMFriendList = () => { +interface DMFriendListProps {} + +const DMFriendList: FC = () => { const [friendListCollapse, setFriendListCollapse] = useState(false); const friendsData = useRecoilValue(FriendsAtom); - const [onlineList, setOnlineList] = useState([]); + const router = useRouter(); + const collapsibleRef = useRef(null); + const toggleFriendListCollapse = useCallback(() => { setFriendListCollapse((prev) => !prev); }, []); - // console.log(friendListCollapse); - const router = useRouter(); - const handleRoomRouter = (id: number) => { - router.push({ - pathname: `/${id}`, - query: { - roomId: id, - }, - }); - }; + + useEffect(() => { + if (collapsibleRef.current) { + collapsibleRef.current.style.maxHeight = friendListCollapse + ? '0' + : `${collapsibleRef.current.scrollHeight}px`; + } + }, [friendListCollapse]); + + // const handleRoomRouter = (id: number) => {}; + return (
- - - + + Friend -
+ {friendsData?.map((friend) => ( handleRoomRouter(friend.id)}> - {friend.name} + className={friendListCollapse ? 'hidden' : ''}> + {friendListCollapse ? '' : friend.name} ))} -
+
); }; diff --git a/src/components/molecules/chat-list/ChatDMList.tsx b/src/components/molecules/chat-list/ChatDMList.tsx index ba400b5..bdc9dfd 100644 --- a/src/components/molecules/chat-list/ChatDMList.tsx +++ b/src/components/molecules/chat-list/ChatDMList.tsx @@ -1,31 +1,47 @@ -import React, { useCallback, useState } from 'react'; -import { BiSolidRightArrow } from 'react-icons/bi'; +import React, { FC, useCallback, useState, useEffect, useRef } from 'react'; +import { BiSolidDownArrow } from 'react-icons/bi'; import * as S from './styles'; import { useRecoilValue } from 'recoil'; import { DMDummyAtom } from '@/recoil/atoms/DMUserAtom'; -const DMList = () => { +interface DMListProps {} + +const DMList: FC = () => { const [DMListCollapse, setDMListCollapse] = useState(false); const DMUserData = useRecoilValue(DMDummyAtom); const [onlineList, setOnlineList] = useState([]); + const collapsibleRef = useRef(null); + const toggleDMUserListCollapse = useCallback(() => { setDMListCollapse((prev) => !prev); }, []); + useEffect(() => { + if (collapsibleRef.current) { + collapsibleRef.current.style.maxHeight = DMListCollapse + ? '0' + : `${collapsibleRef.current.scrollHeight}px`; + } + }, [DMListCollapse]); + return (
- - - + + Direct Message -
+ {DMUserData?.map((DMUser) => ( - {DMUser.name} + + {DMListCollapse ? '' : DMUser.name} + ))} -
+
); }; diff --git a/src/components/molecules/chat-list/styles.ts b/src/components/molecules/chat-list/styles.ts index b269c92..4d075af 100644 --- a/src/components/molecules/chat-list/styles.ts +++ b/src/components/molecules/chat-list/styles.ts @@ -1,8 +1,11 @@ import styled from 'styled-components'; -//확실히 slack을 따온거라 불편함도 있고, CollapseButton 코드 자체가 -//에러도 많이 뿜는 상태. 좀더 간결하고 효율적으로 리팩토링할 필요가 있음. -export const CollapseButton = styled.div<{ collapse: boolean }>` +interface ButtonContainerProps { + collapse: boolean; + onClick: () => void; +} + +export const ButtonContainer = styled.button` background: transparent; font-size: 12px; border: none; @@ -14,12 +17,10 @@ export const CollapseButton = styled.div<{ collapse: boolean }>` color: black; margin-left: -24px; cursor: pointer; - & > svg { - transition: transform 0.2s; - color: gray; - transform: rotate(${(props) => (props.collapse ? '90deg' : '0')}); - } + transition: transform 0.3s; + transform: rotate(${(props) => (props.collapse ? '-90deg' : '0')}); `; + export const CategoryBox = styled.div` margin-top: 10px; display: flex; @@ -32,21 +33,12 @@ export const Category = styled.div` color: #0073e6; `; -// interface ColumnAndRow { -// direction?: string; -// } -// /** -// * @params : direction="column" | "row": string -// * @returns : direction="column" | "row" -// */ -// // flexible box -// export const FlexBox = styled.div` -// display: flex; -// flex-direction: ${(props) => -// props.direction === 'column' ? 'column' : 'row'}; -// justify-content: center; -// align-items: center; -// `; +export const CollapsibleContainer = styled.div` + overflow: hidden; + transition: + max-height 0.4s ease-in-out, + opacity 0.4s ease-in-out; +`; export const ListBox = styled.div` display: flex; diff --git a/src/components/organisms/chats/chat-space/ChatSpace.tsx b/src/components/organisms/chats/chat-space/ChatSpace.tsx index d60073c..e995a70 100644 --- a/src/components/organisms/chats/chat-space/ChatSpace.tsx +++ b/src/components/organisms/chats/chat-space/ChatSpace.tsx @@ -12,12 +12,14 @@ const ChatSpace = (): JSX.Element => { CrabChat - - -
- -
- + + + +
+ +
+ + diff --git a/src/components/organisms/chats/chat-space/styled.ts b/src/components/organisms/chats/chat-space/styled.ts index ba58729..fd61f35 100644 --- a/src/components/organisms/chats/chat-space/styled.ts +++ b/src/components/organisms/chats/chat-space/styled.ts @@ -92,10 +92,15 @@ export const ChatSpaceName = styled.div` white-space: nowrap; `; +export const ChatListContainer = styled.div` + height: 451px; + overflow-y: auto; +`; + // MenuScroll export const ChatListScroll = styled.div` height: 451px; - overflow-y: auto; + overflow-y: scroll; `; export const Chats = styled.div` From 11fad580628c16eafeba3664b0671eb49ffb535e Mon Sep 17 00:00:00 2001 From: CBWDG Date: Tue, 14 Nov 2023 15:13:55 +0900 Subject: [PATCH 2/7] =?UTF-8?q?feat(#83):=20=EB=AF=B8=EB=A1=9C=EA=B7=B8?= =?UTF-8?q?=EC=9D=B8=20=EC=8B=9C=20403=EC=97=90=EB=9F=AC=20=ED=95=B8?= =?UTF-8?q?=EB=93=A4=EB=A7=81=20=EC=8B=9C=EB=8F=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/apis/user.ts | 13 +++++++++++-- .../organisms/common/floatingbar/FloatingBar.tsx | 14 +++++++++++--- 2 files changed, 22 insertions(+), 5 deletions(-) diff --git a/src/apis/user.ts b/src/apis/user.ts index fbf871b..df6e43e 100644 --- a/src/apis/user.ts +++ b/src/apis/user.ts @@ -16,8 +16,17 @@ const USERS = { //유저정보조회api async getUserProfile(): Promise { - const result: AxiosResponse = await instance.get(`${USERS.path}/my-info`); - return result.data; + try { + const result: AxiosResponse = await instance.get(`${USERS.path}/my-info`); + return result.data; + } catch (error: any) { + if (error.response && error.response.status === 403) { + // 403 에러 발생 시 로그인하지 않은 상태로 간주하고 빈 객체 반환 + return {} as UserInfo; + } + // 다른 에러는 그대로 throw + throw error; + } }, }; diff --git a/src/components/organisms/common/floatingbar/FloatingBar.tsx b/src/components/organisms/common/floatingbar/FloatingBar.tsx index 8eecb1a..b479a01 100644 --- a/src/components/organisms/common/floatingbar/FloatingBar.tsx +++ b/src/components/organisms/common/floatingbar/FloatingBar.tsx @@ -34,9 +34,16 @@ const FloatingBar = () => { const router = useRouter(); const handleGetMyId = async () => { - const response = await USERS.getUserProfile(); - console.log(response); - setMyInfo(response.userId); + try { + const response = await USERS.getUserProfile(); + console.log(response); + setMyInfo(response.userId); + } catch (error: any) { + // 에러가 403일 때는 에러를 출력하지 않도록 조건 추가 + if (error.response && error.response.status !== 403) { + console.error(error); + } + } }; useEffect(() => { @@ -52,6 +59,7 @@ const FloatingBar = () => { window.addEventListener('resize', handleResize); handleGetMyId(); + return () => { window.removeEventListener('scroll', handleScroll); window.removeEventListener('resize', handleResize); From 94ee9348359e01a947b8a46e73f6c67381bf85a0 Mon Sep 17 00:00:00 2001 From: CBWDG Date: Tue, 14 Nov 2023 16:08:03 +0900 Subject: [PATCH 3/7] =?UTF-8?q?feat(#83):=20=EA=B1=B0=EC=A0=88=20=EB=AA=A9?= =?UTF-8?q?=EB=A1=9D=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/apis/friend-api/friendList.ts | 21 ------- src/apis/friend-api/friendReject.ts | 45 ++++++++++++++ src/apis/friend-api/friendResponse.ts | 1 - .../organisms/friend-list/ListFriend.tsx | 3 + .../organisms/friend-list/ListRejected.tsx | 59 +++++++++++-------- .../organisms/friend-list/ListResponsed.tsx | 1 + 6 files changed, 83 insertions(+), 47 deletions(-) create mode 100644 src/apis/friend-api/friendReject.ts diff --git a/src/apis/friend-api/friendList.ts b/src/apis/friend-api/friendList.ts index b264e50..20b97a9 100644 --- a/src/apis/friend-api/friendList.ts +++ b/src/apis/friend-api/friendList.ts @@ -45,27 +45,6 @@ const FRIENDS = { return result.data; }, - // 차단 목록(영구 거절) api(get) - async rejectList(): Promise> { - const result: AxiosResponse = await instance.get( - `${FRIENDS.path}/responses/reject/permanent`, - ); - return result; - }, - - // 친구 요청 영구 거절 취소 api(delete) - async cancelPermanent(friendId: number): Promise> { - const result: AxiosResponse = await instance.delete( - `${FRIENDS.path}/reponses/reject/permanent/${friendId}`, - { - data: { - friendId: friendId, - }, - }, - ); - return result; - }, - // 친구 삭제 api(delete) async deleteFriend(friendId: number): Promise> { const result: AxiosResponse = await instance.delete( diff --git a/src/apis/friend-api/friendReject.ts b/src/apis/friend-api/friendReject.ts new file mode 100644 index 0000000..60aa394 --- /dev/null +++ b/src/apis/friend-api/friendReject.ts @@ -0,0 +1,45 @@ +import instance from '../axiosInstance'; +import { AxiosResponse } from 'axios'; + +export interface RejectFriend { + data: { + id: number; + requesterId: number; + respondentId: number; + status: string; + createdAt: string; + requester: { + name: string; + userImage: { + imageUrl: string; + }; + }; + }[]; +} + +const REJECT = { + path: '/friends', + + // 차단 목록(영구 거절) api(get) + async rejectList(): Promise { + const result: AxiosResponse = await instance.get( + `${REJECT.path}/responses/reject/permanent`, + ); + return result.data; + }, + + // 친구 요청 영구 거절 취소 api(delete) + async cancelPermanent(friendId: number): Promise { + const result: AxiosResponse = await instance.delete( + `${REJECT.path}/reponses/reject/permanent/${friendId}`, + { + params: { + friendId: friendId, + }, + }, + ); + return result; + }, +}; + +export default REJECT; diff --git a/src/apis/friend-api/friendResponse.ts b/src/apis/friend-api/friendResponse.ts index 351df29..5137cab 100644 --- a/src/apis/friend-api/friendResponse.ts +++ b/src/apis/friend-api/friendResponse.ts @@ -24,7 +24,6 @@ const RESPONSE = { const result: AxiosResponse = await instance.get( `${RESPONSE.path}/responses/pending`, ); - console.log(result); return result.data; }, diff --git a/src/components/organisms/friend-list/ListFriend.tsx b/src/components/organisms/friend-list/ListFriend.tsx index ad22ab4..d19f12b 100644 --- a/src/components/organisms/friend-list/ListFriend.tsx +++ b/src/components/organisms/friend-list/ListFriend.tsx @@ -4,6 +4,7 @@ import FRIENDS, { Friend } from '@/apis/friend-api/friendList'; const FriendList = () => { const [friend, setFriend] = useState([]); + const getFreindList = async () => { try { const response = await FRIENDS.friendList(); @@ -12,6 +13,7 @@ const FriendList = () => { console.error('친구 목록을 가져오는 중 오류 발생:', error); } }; + useEffect(() => { getFreindList(); }, []); @@ -32,6 +34,7 @@ const FriendList = () => { // } // } // }; + return (
친구 목록 diff --git a/src/components/organisms/friend-list/ListRejected.tsx b/src/components/organisms/friend-list/ListRejected.tsx index ea98aaf..a481999 100644 --- a/src/components/organisms/friend-list/ListRejected.tsx +++ b/src/components/organisms/friend-list/ListRejected.tsx @@ -1,36 +1,45 @@ -import React, { useState } from 'react'; +import React, { useState, useEffect } from 'react'; import * as S from './styled'; -import FRIENDS from '@/apis/friend-api/friendList'; +import REJECT, { RejectFriend } from '@/apis/friend-api/friendReject'; -interface UserRejected { - id: number; - name: string; -} +const ListRejected = () => { + const [rejectedFriends, setRejectedFriends] = useState( + [], + ); -const UserRejected = (props: UserRejected) => { - const [isRejectCancel, setIsRejectCancel] = useState(false); - // 영구 거절 취소 핸들러 - const handleCancelReject = async () => { - const isConfirmed = window.confirm( - `${props.name}님의 영구 거절을 취소하시겠습니까?`, - ); - if (isConfirmed) { - try { - await FRIENDS.cancelPermanent(props.id); - console.log('영구 거절을 취소하셨습니다.'); - setIsRejectCancel(true); - } catch (error) { - console.error('영구 거절 취소 중 오류가 발생했습니다:', error); - } + const friendReject = async () => { + try { + const response = await REJECT.rejectList(); + setRejectedFriends(response); + } catch (error) { + console.error('영구 거절한 유저 목록을 가져오는 중 오류 발생:', error); } }; + useEffect(() => { + friendReject(); + }, []); + return (
- 차단 목록 - 박준혁 + 영구 거절 목록 + {rejectedFriends.map((data, index) => ( + + {data.requester ? ( + <> + {`${data.requester.name}의 +
{data.requester.name}
+ 영구 거절 취소 + + ) : ( +
영구 거절 목록이 없습니다!!
+ )} + + ))}
); }; - -export default UserRejected; diff --git a/src/components/organisms/friend-list/ListResponsed.tsx b/src/components/organisms/friend-list/ListResponsed.tsx index 92fa93f..dd0e24f 100644 --- a/src/components/organisms/friend-list/ListResponsed.tsx +++ b/src/components/organisms/friend-list/ListResponsed.tsx @@ -28,6 +28,7 @@ const FriendResponse = () => { console.error('요청 받은 친구 목록을 가져오는 중 오류 발생:', error); } }; + useEffect(() => { friendResponse(); // setAcceptFriend((prev) => { From 2ed0c6fbce43beb79c5da0d2ac891821a9afe395 Mon Sep 17 00:00:00 2001 From: CBWDG Date: Tue, 14 Nov 2023 17:33:45 +0900 Subject: [PATCH 4/7] =?UTF-8?q?feat(#83):=20=EC=B9=9C=EA=B5=AC=EC=9A=94?= =?UTF-8?q?=EC=B2=AD=20=EC=88=98=EB=9D=BD,=20=EA=B1=B0=EC=A0=88=20?= =?UTF-8?q?=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/apis/friend-api/friendList.ts | 6 +- src/apis/friend-api/friendReject.ts | 4 +- src/apis/friend-api/friendResponse.ts | 20 +++--- .../organisms/friend-list/ListRequested.tsx | 2 +- .../organisms/friend-list/ListResponsed.tsx | 61 +++++++------------ 5 files changed, 43 insertions(+), 50 deletions(-) diff --git a/src/apis/friend-api/friendList.ts b/src/apis/friend-api/friendList.ts index 20b97a9..93409af 100644 --- a/src/apis/friend-api/friendList.ts +++ b/src/apis/friend-api/friendList.ts @@ -33,7 +33,9 @@ const FRIENDS = { const result: AxiosResponse = await instance.post( `${FRIENDS.path}/requests/${friendId}`, { - friendId: friendId, + params: { + friend_id: friendId, + }, }, ); return result; @@ -51,7 +53,7 @@ const FRIENDS = { `${FRIENDS.path}/${friendId}`, { data: { - friendId: friendId, + friend_Id: friendId, }, }, ); diff --git a/src/apis/friend-api/friendReject.ts b/src/apis/friend-api/friendReject.ts index 60aa394..606902e 100644 --- a/src/apis/friend-api/friendReject.ts +++ b/src/apis/friend-api/friendReject.ts @@ -31,10 +31,10 @@ const REJECT = { // 친구 요청 영구 거절 취소 api(delete) async cancelPermanent(friendId: number): Promise { const result: AxiosResponse = await instance.delete( - `${REJECT.path}/reponses/reject/permanent/${friendId}`, + `${REJECT.path}/responses/reject/permanent/${friendId}`, { params: { - friendId: friendId, + friend_Id: friendId, }, }, ); diff --git a/src/apis/friend-api/friendResponse.ts b/src/apis/friend-api/friendResponse.ts index 5137cab..86ea726 100644 --- a/src/apis/friend-api/friendResponse.ts +++ b/src/apis/friend-api/friendResponse.ts @@ -28,11 +28,13 @@ const RESPONSE = { }, // 친구 요청 수락 api(patch) - async friendAccept(requesterId: number): Promise { + async friendAccept(friendId: number): Promise { const result: AxiosResponse = await instance.patch( - `${RESPONSE.path}/reponses/accept/${requesterId}`, + `${RESPONSE.path}/responses/accept/${friendId}`, { - requesterId: requesterId, + params: { + friend_id: friendId, + }, }, ); return result; @@ -41,9 +43,11 @@ const RESPONSE = { // 친구 요청 거절 api(patch) async friendRefuse(friendId: number): Promise { const result: AxiosResponse = await instance.patch( - `${RESPONSE.path}/reponses/reject/${friendId}`, + `${RESPONSE.path}/responses/reject/${friendId}`, { - friendId: friendId, + params: { + friend_Id: friendId, + }, }, ); return result; @@ -52,9 +56,11 @@ const RESPONSE = { // 친구 요청 영구 거절 api(patch) async friendReject(friendId: number): Promise { const result: AxiosResponse = await instance.patch( - `${RESPONSE.path}/reponses/reject/permanent/${friendId}`, + `${RESPONSE.path}/responses/reject/permanent/${friendId}`, { - friendId: friendId, + params: { + friend_Id: friendId, + }, }, ); return result; diff --git a/src/components/organisms/friend-list/ListRequested.tsx b/src/components/organisms/friend-list/ListRequested.tsx index 75a10cc..7cda923 100644 --- a/src/components/organisms/friend-list/ListRequested.tsx +++ b/src/components/organisms/friend-list/ListRequested.tsx @@ -11,11 +11,11 @@ const ListRequested = () => { try { const response = await REQUEST.requestedList(); setRequestedFriends(response); - console.log(response); } catch (error) { console.error('요청 보낸 친구 목록을 가져오는 중 오류 발생:', error); } }; + // 보낸 요청 취소 추가 예정 useEffect(() => { friendRequest(); diff --git a/src/components/organisms/friend-list/ListResponsed.tsx b/src/components/organisms/friend-list/ListResponsed.tsx index dd0e24f..5eda8f3 100644 --- a/src/components/organisms/friend-list/ListResponsed.tsx +++ b/src/components/organisms/friend-list/ListResponsed.tsx @@ -31,16 +31,14 @@ const FriendResponse = () => { useEffect(() => { friendResponse(); - // setAcceptFriend((prev) => { - // return { - // ...prev, - // id: acceptFriend.requesterId, - // name: acceptFriend.name, - // }; - // }); - // console.log(acceptFriend.requesterId); + setAcceptFriend((prev) => { + return { + ...prev, + id: acceptFriend.requesterId, + name: acceptFriend.name, + }; + }); }, []); - // 토큰 에러 핸들링 완료 후 작업 // 요청 수락 핸들러 -> 요청 수락하면 요청 수락 버튼 삭제 // -> 삭제 버튼 있는 자리에 '요청을 수락하였습니다.' -> 친구 목록으로 GO @@ -61,36 +59,23 @@ const FriendResponse = () => { }; //요청 거절 핸들러 - // const handleRefuse = async () => { - // const isConfirmed = window.confirm( - // `${props.name}님의 친구 요청을 거절하시겠습니까?`, - // ); - // if (isConfirmed) { - // try { - // await FRIENDS.friendRefuse(props.id); - // console.log('친구 요청을 거절하셨습니다.'); - // setIsRefuse(true); - // } catch (error) { - // console.error('친구 요청 거절 중 오류가 발생했습니다:', error); - // } - // } - // }; + const handleRefuse = async () => { + const isConfirmed = window.confirm( + `${acceptFriend.name}님의 요청을 거절하시겠습니까?`, + ); + if (isConfirmed) { + try { + await RESPONSE.friendRefuse(acceptFriend.requesterId); + setIsRefuse(true); + alert(`${acceptFriend.name}님의 요청을 거절하였습니다.`); + router.reload(); + } catch (error) { + console.error('친구 요청 거절 중 오류 발생'); + } + } + }; //영구 거절 핸들러 - // const handleReject = async () => { - // const isConfirmed = window.confirm( - // `${props.name}님의 요청을 영구 거절하시겠습니까?`, - // ); - // if (isConfirmed) { - // try { - // await FRIENDS.friendReject(props.id); - // console.log('친구 요청을 영구 거절하셨습니다.'); - // setIsReject(true); - // } catch (error) { - // console.error('친구 요청 영구 거절 중 오류가 발생했습니다:', error); - // } - // } - // }; return (
@@ -106,7 +91,7 @@ const FriendResponse = () => { />
{data.requester.name}
수락 - 거절 + 거절 영구 거절 ) : ( From e6150986dba5163bb04fc45c8e10338e99e468e7 Mon Sep 17 00:00:00 2001 From: CBWDG Date: Tue, 14 Nov 2023 17:43:58 +0900 Subject: [PATCH 5/7] =?UTF-8?q?feat(#83):=20=EC=BB=B4=ED=8F=AC=EB=84=8C?= =?UTF-8?q?=ED=8A=B8=EB=AA=85=20=EB=B3=80=EA=B2=BD=20=EB=B0=8F=20Vercel?= =?UTF-8?q?=EC=98=A4=EB=A5=98=20=EC=B2=98=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../organisms/friend-list/ListRejected.tsx | 4 +++- .../organisms/friend-list/ListRequested.tsx | 4 ++-- .../organisms/friend-list/ListResponsed.tsx | 4 ++-- .../templates/relation-list/RelatioinLists.tsx | 12 ++++++------ 4 files changed, 13 insertions(+), 11 deletions(-) diff --git a/src/components/organisms/friend-list/ListRejected.tsx b/src/components/organisms/friend-list/ListRejected.tsx index a481999..446ed0c 100644 --- a/src/components/organisms/friend-list/ListRejected.tsx +++ b/src/components/organisms/friend-list/ListRejected.tsx @@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react'; import * as S from './styled'; import REJECT, { RejectFriend } from '@/apis/friend-api/friendReject'; -const ListRejected = () => { +const RejectedList = () => { const [rejectedFriends, setRejectedFriends] = useState( [], ); @@ -43,3 +43,5 @@ const ListRejected = () => {
); }; + +export default RejectedList; diff --git a/src/components/organisms/friend-list/ListRequested.tsx b/src/components/organisms/friend-list/ListRequested.tsx index 7cda923..da2591f 100644 --- a/src/components/organisms/friend-list/ListRequested.tsx +++ b/src/components/organisms/friend-list/ListRequested.tsx @@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react'; import * as S from './styled'; import REQUEST, { RequestFriend } from '@/apis/friend-api/friendRequest'; -const ListRequested = () => { +const RequestedList = () => { const [requestedFriends, setRequestedFriends] = useState< RequestFriend['data'] >([]); @@ -44,4 +44,4 @@ const ListRequested = () => { ); }; -export default ListRequested; +export default RequestedList; diff --git a/src/components/organisms/friend-list/ListResponsed.tsx b/src/components/organisms/friend-list/ListResponsed.tsx index 5eda8f3..21cc398 100644 --- a/src/components/organisms/friend-list/ListResponsed.tsx +++ b/src/components/organisms/friend-list/ListResponsed.tsx @@ -3,7 +3,7 @@ import * as S from './styled'; import RESPONSE, { ResponseFriend } from '@/apis/friend-api/friendResponse'; import { useRouter } from 'next/router'; -const FriendResponse = () => { +const ResponsedList = () => { const router = useRouter(); const [responsedFriends, setResponsedFriends] = useState< ResponseFriend['data'] @@ -103,4 +103,4 @@ const FriendResponse = () => { ); }; -export default FriendResponse; +export default ResponsedList; diff --git a/src/components/templates/relation-list/RelatioinLists.tsx b/src/components/templates/relation-list/RelatioinLists.tsx index 4899b87..8f7156e 100644 --- a/src/components/templates/relation-list/RelatioinLists.tsx +++ b/src/components/templates/relation-list/RelatioinLists.tsx @@ -2,18 +2,18 @@ import { useEventCallback } from '@mui/material'; import * as S from './styled'; import React, { useState, useEffect } from 'react'; import FriendList from '@/components/organisms/friend-list/ListFriend'; -import FriendResponse from '@/components/organisms/friend-list/ListResponsed'; -import FriendRequest from '@/components/organisms/friend-list/ListRequested'; -import UserRejected from '@/components/organisms/friend-list/ListRejected'; +import ResponsedList from '@/components/organisms/friend-list/ListResponsed'; +import RequestedList from '@/components/organisms/friend-list/ListRequested'; +import RejectedList from '@/components/organisms/friend-list/ListRejected'; const RelationLists = () => { return ( - - - {/* */} + + + ); From 4f9011fef5254e2e77805f4d5be2a465cb3a8e68 Mon Sep 17 00:00:00 2001 From: CBWDG Date: Wed, 15 Nov 2023 14:20:17 +0900 Subject: [PATCH 6/7] =?UTF-8?q?fix(#83):=20=ED=94=BC=EB=93=9C=EB=B0=B1=20?= =?UTF-8?q?=EB=B0=98=EC=98=81=20=EB=B0=8F=20=EC=98=81=EA=B5=AC=20=EA=B1=B0?= =?UTF-8?q?=EC=A0=88=20=ED=95=B8=EB=93=A4=EB=9F=AC=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/apis/friend-api/friendList.ts | 50 +++++++------- src/apis/friend-api/friendListDummy.ts | 8 --- src/apis/friend-api/friendReject.ts | 45 ------------ src/apis/friend-api/friendRejectPermanent.ts | 47 +++++++++++++ src/apis/friend-api/friendRequest.ts | 36 +++++----- src/apis/friend-api/friendResponse.ts | 45 ++++++------ .../organisms/friend-list/ListFriend.tsx | 69 ++++++++++++------- ...istRejected.tsx => ListFriendRejected.tsx} | 23 ++++--- ...tRequested.tsx => ListFriendRequested.tsx} | 11 +-- ...tResponsed.tsx => ListFriendResponsed.tsx} | 63 ++++++++++------- .../relation-list/RelatioinLists.tsx | 12 ++-- 11 files changed, 227 insertions(+), 182 deletions(-) delete mode 100644 src/apis/friend-api/friendListDummy.ts delete mode 100644 src/apis/friend-api/friendReject.ts create mode 100644 src/apis/friend-api/friendRejectPermanent.ts rename src/components/organisms/friend-list/{ListRejected.tsx => ListFriendRejected.tsx} (69%) rename src/components/organisms/friend-list/{ListRequested.tsx => ListFriendRequested.tsx} (82%) rename src/components/organisms/friend-list/{ListResponsed.tsx => ListFriendResponsed.tsx} (55%) diff --git a/src/apis/friend-api/friendList.ts b/src/apis/friend-api/friendList.ts index 93409af..7c2dd85 100644 --- a/src/apis/friend-api/friendList.ts +++ b/src/apis/friend-api/friendList.ts @@ -1,28 +1,30 @@ import instance from '../axiosInstance'; import { Axios, AxiosResponse, AxiosError } from 'axios'; -export interface Friend { - data: { - id: number; - requesterId: number; //요청 보낸 자 - respondentId: number; // 요청 받은 자 - status: string; // 서로의 상태값(수락, 대기, 영구거절 등) - createAt: string; // 상태가 변경된 때. - requester: { - // 요청 보낸 자 - name: string; - userImage: { - imageUrl: string; - }; +interface FriendData { + id: number; + requesterId: number; //요청 보낸 자 + respondentId: number; // 요청 받은 자 + status: string; // 서로의 상태값(수락, 대기, 영구거절 등) + createAt: string; // 상태가 변경된 때. + requester: { + // 요청 보낸 자 + name: string; + userImage: { + imageUrl: string; }; - respondent: { - // 요청 받은 자 - name: string; - userImage: { - imageUrl: string; - }; + }; + respondent: { + // 요청 받은 자 + name: string; + userImage: { + imageUrl: string; }; - }[]; + }; +} + +export interface Friend { + data: FriendData[]; } const FRIENDS = { @@ -42,17 +44,17 @@ const FRIENDS = { }, // 친구 목록 조회 api(get) - async friendList(): Promise { + async getFriendList(): Promise { const result: AxiosResponse = await instance.get(`${FRIENDS.path}`); return result.data; }, // 친구 삭제 api(delete) - async deleteFriend(friendId: number): Promise> { - const result: AxiosResponse = await instance.delete( + async deleteFriend(friendId: number): Promise { + const result: AxiosResponse = await instance.delete( `${FRIENDS.path}/${friendId}`, { - data: { + params: { friend_Id: friendId, }, }, diff --git a/src/apis/friend-api/friendListDummy.ts b/src/apis/friend-api/friendListDummy.ts deleted file mode 100644 index 8f9b91d..0000000 --- a/src/apis/friend-api/friendListDummy.ts +++ /dev/null @@ -1,8 +0,0 @@ -export const friendListDummy = [ - { - id: 1, - requestedId: 63, - respondentId: 62, - status: '친구 수락', - }, -]; diff --git a/src/apis/friend-api/friendReject.ts b/src/apis/friend-api/friendReject.ts deleted file mode 100644 index 606902e..0000000 --- a/src/apis/friend-api/friendReject.ts +++ /dev/null @@ -1,45 +0,0 @@ -import instance from '../axiosInstance'; -import { AxiosResponse } from 'axios'; - -export interface RejectFriend { - data: { - id: number; - requesterId: number; - respondentId: number; - status: string; - createdAt: string; - requester: { - name: string; - userImage: { - imageUrl: string; - }; - }; - }[]; -} - -const REJECT = { - path: '/friends', - - // 차단 목록(영구 거절) api(get) - async rejectList(): Promise { - const result: AxiosResponse = await instance.get( - `${REJECT.path}/responses/reject/permanent`, - ); - return result.data; - }, - - // 친구 요청 영구 거절 취소 api(delete) - async cancelPermanent(friendId: number): Promise { - const result: AxiosResponse = await instance.delete( - `${REJECT.path}/responses/reject/permanent/${friendId}`, - { - params: { - friend_Id: friendId, - }, - }, - ); - return result; - }, -}; - -export default REJECT; diff --git a/src/apis/friend-api/friendRejectPermanent.ts b/src/apis/friend-api/friendRejectPermanent.ts new file mode 100644 index 0000000..3b69403 --- /dev/null +++ b/src/apis/friend-api/friendRejectPermanent.ts @@ -0,0 +1,47 @@ +import instance from '../axiosInstance'; +import { AxiosResponse } from 'axios'; + +interface RejectPermanentFriendData { + id: number; + requesterId: number; + respondentId: number; + status: string; + createdAt: string; + requester: { + name: string; + userImage: { + imageUrl: string; + }; + }; +} + +export interface RejectPermanentFriend { + data: RejectPermanentFriendData[]; +} + +const PermanentREJECT = { + path: '/friends', + + // 영구 거절한 목록 api(get) + async getRejectPermanentFriendList(): Promise { + const result: AxiosResponse = await instance.get( + `${PermanentREJECT.path}/responses/reject/permanent`, + ); + return result.data; + }, + + // 친구 요청 영구 거절 취소 api(delete) + async cancelPermanentRejectFriend(friendId: number): Promise { + const result: AxiosResponse = await instance.delete( + `${PermanentREJECT.path}/responses/reject/permanent/${friendId}`, + { + params: { + friend_Id: friendId, + }, + }, + ); + return result; + }, +}; + +export default PermanentREJECT; diff --git a/src/apis/friend-api/friendRequest.ts b/src/apis/friend-api/friendRequest.ts index 8d1a613..bd313b3 100644 --- a/src/apis/friend-api/friendRequest.ts +++ b/src/apis/friend-api/friendRequest.ts @@ -1,31 +1,33 @@ import instance from '../axiosInstance'; import { AxiosResponse } from 'axios'; -export interface RequestFriend { - data: { - id: number; - requesterId: number; - respondentId: number; - status: string; - createdAt: string; - respondent: { - name: string; - userImage: { - imageUrl: string; - }; +interface RequestFriendData { + id: number; + requesterId: number; + respondentId: number; + status: string; + createdAt: string; + respondent: { + name: string; + userImage: { + imageUrl: string; }; - }[]; + }; +} + +export interface RequestFriend { + data: RequestFriendData[]; } -const REQUEST = { +const FriendREQUEST = { path: '/friends', // 내가 요청 보낸 친구 목록 api(get) - async requestedList(): Promise { + async getRequestedList(): Promise { const result: AxiosResponse = await instance.get( - `${REQUEST.path}/requests/pending`, + `${FriendREQUEST.path}/requests/pending`, ); return result.data; }, }; -export default REQUEST; +export default FriendREQUEST; diff --git a/src/apis/friend-api/friendResponse.ts b/src/apis/friend-api/friendResponse.ts index 86ea726..53e0bef 100644 --- a/src/apis/friend-api/friendResponse.ts +++ b/src/apis/friend-api/friendResponse.ts @@ -1,28 +1,29 @@ import instance from '../axiosInstance'; import { AxiosResponse } from 'axios'; -export interface ResponseFriend { - data: { - id: number; - requesterId: number; - respondentId: number; - status: string; - createdAt: string; - requester: { - name: string; - userImage: { - imageUrl: string; - }; +export interface ResponseFriendData { + id: number; + requesterId: number; + respondentId: number; + status: string; + createdAt: string; + requester: { + name: string; + userImage: { + imageUrl: string; }; - }[]; + }; +} +export interface ResponseFriend { + data: ResponseFriendData[]; } -const RESPONSE = { +const FriendRESPONSE = { path: '/friends', // 내가 요청 받은 친구 목록 api(get) - async responsedList(): Promise { + async getResponsedList(): Promise { const result: AxiosResponse = await instance.get( - `${RESPONSE.path}/responses/pending`, + `${FriendRESPONSE.path}/responses/pending`, ); return result.data; }, @@ -30,7 +31,7 @@ const RESPONSE = { // 친구 요청 수락 api(patch) async friendAccept(friendId: number): Promise { const result: AxiosResponse = await instance.patch( - `${RESPONSE.path}/responses/accept/${friendId}`, + `${FriendRESPONSE.path}/responses/accept/${friendId}`, { params: { friend_id: friendId, @@ -41,9 +42,9 @@ const RESPONSE = { }, // 친구 요청 거절 api(patch) - async friendRefuse(friendId: number): Promise { + async friendReject(friendId: number): Promise { const result: AxiosResponse = await instance.patch( - `${RESPONSE.path}/responses/reject/${friendId}`, + `${FriendRESPONSE.path}/responses/reject/${friendId}`, { params: { friend_Id: friendId, @@ -54,9 +55,9 @@ const RESPONSE = { }, // 친구 요청 영구 거절 api(patch) - async friendReject(friendId: number): Promise { + async friendRejectPermanent(friendId: number): Promise { const result: AxiosResponse = await instance.patch( - `${RESPONSE.path}/responses/reject/permanent/${friendId}`, + `${FriendRESPONSE.path}/responses/reject/permanent/${friendId}`, { params: { friend_Id: friendId, @@ -67,4 +68,4 @@ const RESPONSE = { }, }; -export default RESPONSE; +export default FriendRESPONSE; diff --git a/src/components/organisms/friend-list/ListFriend.tsx b/src/components/organisms/friend-list/ListFriend.tsx index d19f12b..4090446 100644 --- a/src/components/organisms/friend-list/ListFriend.tsx +++ b/src/components/organisms/friend-list/ListFriend.tsx @@ -1,53 +1,74 @@ import React, { useState, useEffect } from 'react'; +import { useRouter } from 'next/router'; import * as S from './styled'; import FRIENDS, { Friend } from '@/apis/friend-api/friendList'; -const FriendList = () => { +const ListFriend = () => { + const router = useRouter(); const [friend, setFriend] = useState([]); + const [isDelete, setIsDelete] = useState(false); + const [friendInfo, setFriendInfo] = useState({ + requesterId: 0, + name: '', + }); - const getFreindList = async () => { + const getListFriend = async () => { try { - const response = await FRIENDS.friendList(); + const response = await FRIENDS.getFriendList(); setFriend(response); + setFriendInfo({ + requesterId: response[0]?.requesterId || 0, + name: response[0]?.requester?.name || '', + }); } catch (error) { console.error('친구 목록을 가져오는 중 오류 발생:', error); } }; useEffect(() => { - getFreindList(); + getListFriend(); + setFriendInfo((prev) => { + return { + ...prev, + id: friendInfo.requesterId, + name: friendInfo.name, + }; + }); }, []); - // const [isDelete, setIsDelete] = useState(false); - // // 친구 삭제 핸들러 - // const handleDelete = async () => { - // const isConfirmed = window.confirm( - // `${props.name}님을 친구 목록에서 삭제하시겠습니까?`, - // ); - // if (isConfirmed) { - // try { - // await FRIENDS.deleteFriend(props.id); - // console.log('친구 요청을 수락하셨습니다.'); - // setIsDelete(true); - // } catch (error) { - // console.error('친구 삭제 중 오류가 발생했습니다.:', error); - // } - // } - // }; + // 친구 삭제 핸들러 + const handleDelete = async () => { + const isConfirmed = window.confirm( + `${friendInfo.name}님을 친구에서 삭제하시겠습니까?`, + ); + if (isConfirmed) { + try { + await FRIENDS.deleteFriend(friendInfo.requesterId); + setIsDelete(true); + alert(`${friendInfo.name}님을 친구에서 삭제하였습니다.`); + router.reload(); + } catch (error) { + console.error('친구 삭제 중 오류 발생'); + } + } + }; + + // 친구 차단(or 유저 차단) 추가 예정 return (
친구 목록 {friend.map((data, index) => ( - {data.respondent ? ( + {data.requester ? ( <> User Image -
{data.respondent.name}
+
{data.requester.name}
+ 삭제 ) : (
친구 목록이 없습니다!!
@@ -58,4 +79,4 @@ const FriendList = () => { ); }; -export default FriendList; +export default ListFriend; diff --git a/src/components/organisms/friend-list/ListRejected.tsx b/src/components/organisms/friend-list/ListFriendRejected.tsx similarity index 69% rename from src/components/organisms/friend-list/ListRejected.tsx rename to src/components/organisms/friend-list/ListFriendRejected.tsx index 446ed0c..2c4bbbf 100644 --- a/src/components/organisms/friend-list/ListRejected.tsx +++ b/src/components/organisms/friend-list/ListFriendRejected.tsx @@ -1,15 +1,18 @@ import React, { useState, useEffect } from 'react'; import * as S from './styled'; -import REJECT, { RejectFriend } from '@/apis/friend-api/friendReject'; -const RejectedList = () => { - const [rejectedFriends, setRejectedFriends] = useState( - [], - ); +import PermanentREJECT, { + RejectPermanentFriend, +} from '@/apis/friend-api/friendRejectPermanent'; + +const ListRejected = () => { + const [rejectedFriends, setRejectedFriends] = useState< + RejectPermanentFriend['data'] + >([]); - const friendReject = async () => { + const getListReject = async () => { try { - const response = await REJECT.rejectList(); + const response = await PermanentREJECT.getRejectPermanentFriendList(); setRejectedFriends(response); } catch (error) { console.error('영구 거절한 유저 목록을 가져오는 중 오류 발생:', error); @@ -17,9 +20,11 @@ const RejectedList = () => { }; useEffect(() => { - friendReject(); + getListReject(); }, []); + //영구 거절 취소 핸들러 + return (
영구 거절 목록 @@ -44,4 +49,4 @@ const RejectedList = () => { ); }; -export default RejectedList; +export default ListRejected; diff --git a/src/components/organisms/friend-list/ListRequested.tsx b/src/components/organisms/friend-list/ListFriendRequested.tsx similarity index 82% rename from src/components/organisms/friend-list/ListRequested.tsx rename to src/components/organisms/friend-list/ListFriendRequested.tsx index da2591f..d268c9d 100644 --- a/src/components/organisms/friend-list/ListRequested.tsx +++ b/src/components/organisms/friend-list/ListFriendRequested.tsx @@ -1,15 +1,16 @@ import React, { useState, useEffect } from 'react'; import * as S from './styled'; import REQUEST, { RequestFriend } from '@/apis/friend-api/friendRequest'; +import FriendREQUEST from '@/apis/friend-api/friendRequest'; -const RequestedList = () => { +const ListRequested = () => { const [requestedFriends, setRequestedFriends] = useState< RequestFriend['data'] >([]); - const friendRequest = async () => { + const getListRequested = async () => { try { - const response = await REQUEST.requestedList(); + const response = await FriendREQUEST.getRequestedList(); setRequestedFriends(response); } catch (error) { console.error('요청 보낸 친구 목록을 가져오는 중 오류 발생:', error); @@ -18,7 +19,7 @@ const RequestedList = () => { // 보낸 요청 취소 추가 예정 useEffect(() => { - friendRequest(); + getListRequested(); }, []); return ( @@ -44,4 +45,4 @@ const RequestedList = () => { ); }; -export default RequestedList; +export default ListRequested; diff --git a/src/components/organisms/friend-list/ListResponsed.tsx b/src/components/organisms/friend-list/ListFriendResponsed.tsx similarity index 55% rename from src/components/organisms/friend-list/ListResponsed.tsx rename to src/components/organisms/friend-list/ListFriendResponsed.tsx index 21cc398..70ef2c1 100644 --- a/src/components/organisms/friend-list/ListResponsed.tsx +++ b/src/components/organisms/friend-list/ListFriendResponsed.tsx @@ -2,25 +2,26 @@ import React, { useState, useEffect } from 'react'; import * as S from './styled'; import RESPONSE, { ResponseFriend } from '@/apis/friend-api/friendResponse'; import { useRouter } from 'next/router'; +import FriendRESPONSE from '@/apis/friend-api/friendResponse'; -const ResponsedList = () => { +const ListResponsed = () => { const router = useRouter(); const [responsedFriends, setResponsedFriends] = useState< ResponseFriend['data'] >([]); - const [acceptFriend, setAcceptFriend] = useState({ + const [friendInfo, setFriendInfo] = useState({ requesterId: 0, name: '', }); const [isAccept, setIsAccept] = useState(false); - const [isRefuse, setIsRefuse] = useState(false); const [isReject, setIsReject] = useState(false); + const [isRejectPermanent, setIsRejectPermament] = useState(false); - const friendResponse = async () => { + const getListResponsed = async () => { try { - const response = await RESPONSE.responsedList(); + const response = await FriendRESPONSE.getResponsedList(); setResponsedFriends(response); - setAcceptFriend({ + setFriendInfo({ requesterId: response[0]?.requesterId || 0, name: response[0]?.requester?.name || '', }); @@ -30,27 +31,26 @@ const ResponsedList = () => { }; useEffect(() => { - friendResponse(); - setAcceptFriend((prev) => { + getListResponsed(); + setFriendInfo((prev) => { return { ...prev, - id: acceptFriend.requesterId, - name: acceptFriend.name, + id: friendInfo.requesterId, + name: friendInfo.name, }; }); }, []); - // 토큰 에러 핸들링 완료 후 작업 - // 요청 수락 핸들러 -> 요청 수락하면 요청 수락 버튼 삭제 - // -> 삭제 버튼 있는 자리에 '요청을 수락하였습니다.' -> 친구 목록으로 GO + + //요청 수락 핸들러 const handleAccept = async () => { const isConfirmed = window.confirm( - `${acceptFriend.name}님을 친구로 추가하시겠습니까?`, + `${friendInfo.name}님을 친구로 추가하시겠습니까?`, ); if (isConfirmed) { try { - await RESPONSE.friendAccept(acceptFriend.requesterId); + await FriendRESPONSE.friendAccept(friendInfo.requesterId); setIsAccept(true); - alert(`${acceptFriend.name}님을 친구로 추가하였습니다.`); + alert(`${friendInfo.name}님을 친구로 추가하였습니다.`); router.reload(); } catch (error) { console.error('친구 요청 수락 중 오류 발생'); @@ -59,15 +59,15 @@ const ResponsedList = () => { }; //요청 거절 핸들러 - const handleRefuse = async () => { + const handleReject = async () => { const isConfirmed = window.confirm( - `${acceptFriend.name}님의 요청을 거절하시겠습니까?`, + `${friendInfo.name}님의 요청을 거절하시겠습니까?`, ); if (isConfirmed) { try { - await RESPONSE.friendRefuse(acceptFriend.requesterId); - setIsRefuse(true); - alert(`${acceptFriend.name}님의 요청을 거절하였습니다.`); + await FriendRESPONSE.friendReject(friendInfo.requesterId); + setIsReject(true); + alert(`${friendInfo.name}님의 요청을 거절하였습니다.`); router.reload(); } catch (error) { console.error('친구 요청 거절 중 오류 발생'); @@ -76,6 +76,21 @@ const ResponsedList = () => { }; //영구 거절 핸들러 + const handleRejectPermanet = async () => { + const isConfirmed = window.confirm( + `${friendInfo.name}님의 요청을 영구 거절하시겠습니까?`, + ); + if (isConfirmed) { + try { + await FriendRESPONSE.friendRejectPermanent(friendInfo.requesterId); + setIsRejectPermament(true); + alert(`${friendInfo.name}님의 요청을 영구 거절하였습니다.`); + router.reload(); + } catch (error) { + console.error('친구 요청 영구 거절 중 오류 발생'); + } + } + }; return (
@@ -91,8 +106,8 @@ const ResponsedList = () => { />
{data.requester.name}
수락 - 거절 - 영구 거절 + 거절 + 영구 거절 ) : (
요청 받은 목록이 없습니다!!
@@ -103,4 +118,4 @@ const ResponsedList = () => { ); }; -export default ResponsedList; +export default ListResponsed; diff --git a/src/components/templates/relation-list/RelatioinLists.tsx b/src/components/templates/relation-list/RelatioinLists.tsx index 8f7156e..0245db9 100644 --- a/src/components/templates/relation-list/RelatioinLists.tsx +++ b/src/components/templates/relation-list/RelatioinLists.tsx @@ -5,15 +5,19 @@ import FriendList from '@/components/organisms/friend-list/ListFriend'; import ResponsedList from '@/components/organisms/friend-list/ListResponsed'; import RequestedList from '@/components/organisms/friend-list/ListRequested'; import RejectedList from '@/components/organisms/friend-list/ListRejected'; +import ListFriend from '@/components/organisms/friend-list/ListFriend'; +import ListResponsed from '@/components/organisms/friend-list/ListResponsed'; +import ListRequested from '@/components/organisms/friend-list/ListRequested'; +import ListRejected from '@/components/organisms/friend-list/ListRejected'; const RelationLists = () => { return ( - - - - + + + + ); From 9aeca22ae4aeaeab5da2b32b7cf532c57516cbd4 Mon Sep 17 00:00:00 2001 From: CBWDG Date: Wed, 15 Nov 2023 15:45:53 +0900 Subject: [PATCH 7/7] =?UTF-8?q?feat(#83):=20=EC=98=81=EA=B5=AC=20=EA=B1=B0?= =?UTF-8?q?=EC=A0=88=20=EC=B7=A8=EC=86=8C=20=ED=95=B8=EB=93=A4=EB=9F=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../molecules/chat-list/ChatDMFriendList.tsx | 2 +- .../molecules/chat-list/ChatDMList.tsx | 2 +- .../friend-list/ListFriendRejected.tsx | 79 ++++++++++++++----- .../friend-list/ListFriendRequested.tsx | 34 ++++---- .../friend-list/ListFriendResponsed.tsx | 40 +++++----- .../relation-list/RelatioinLists.tsx | 13 +-- 6 files changed, 103 insertions(+), 67 deletions(-) diff --git a/src/components/molecules/chat-list/ChatDMFriendList.tsx b/src/components/molecules/chat-list/ChatDMFriendList.tsx index f222dc9..d916829 100644 --- a/src/components/molecules/chat-list/ChatDMFriendList.tsx +++ b/src/components/molecules/chat-list/ChatDMFriendList.tsx @@ -7,7 +7,7 @@ import { BiSolidDownArrow } from 'react-icons/bi'; interface DMFriendListProps {} -const DMFriendList: FC = () => { +const DMFriendList = ({}: DMFriendListProps) => { const [friendListCollapse, setFriendListCollapse] = useState(false); const friendsData = useRecoilValue(FriendsAtom); const router = useRouter(); diff --git a/src/components/molecules/chat-list/ChatDMList.tsx b/src/components/molecules/chat-list/ChatDMList.tsx index bdc9dfd..8b56b7f 100644 --- a/src/components/molecules/chat-list/ChatDMList.tsx +++ b/src/components/molecules/chat-list/ChatDMList.tsx @@ -6,7 +6,7 @@ import { DMDummyAtom } from '@/recoil/atoms/DMUserAtom'; interface DMListProps {} -const DMList: FC = () => { +const DMList = ({}: DMListProps) => { const [DMListCollapse, setDMListCollapse] = useState(false); const DMUserData = useRecoilValue(DMDummyAtom); const [onlineList, setOnlineList] = useState([]); diff --git a/src/components/organisms/friend-list/ListFriendRejected.tsx b/src/components/organisms/friend-list/ListFriendRejected.tsx index 2c4bbbf..e6f9871 100644 --- a/src/components/organisms/friend-list/ListFriendRejected.tsx +++ b/src/components/organisms/friend-list/ListFriendRejected.tsx @@ -1,50 +1,87 @@ import React, { useState, useEffect } from 'react'; import * as S from './styled'; - import PermanentREJECT, { RejectPermanentFriend, } from '@/apis/friend-api/friendRejectPermanent'; +import { useRouter } from 'next/router'; const ListRejected = () => { + const router = useRouter(); const [rejectedFriends, setRejectedFriends] = useState< RejectPermanentFriend['data'] >([]); - - const getListReject = async () => { + const [isCancelRejectPermanent, setIsCancelRejectPermanent] = useState(false); + const [friendInfo, setFriendInfo] = useState({ + requesterId: 0, + name: '', + }); + const getListRejectPermannet = async () => { try { const response = await PermanentREJECT.getRejectPermanentFriendList(); setRejectedFriends(response); + setFriendInfo({ + requesterId: response[0]?.requesterId || 0, + name: response[0]?.requester?.name || '', + }); } catch (error) { console.error('영구 거절한 유저 목록을 가져오는 중 오류 발생:', error); } }; useEffect(() => { - getListReject(); + getListRejectPermannet(); + setFriendInfo((prev) => { + return { + ...prev, + id: friendInfo.requesterId, + name: friendInfo.name, + }; + }); }, []); //영구 거절 취소 핸들러 + const handleCancelRejectPermanent = async () => { + const isConfirmed = window.confirm( + `${friendInfo.name}님에 대한 영구 거절을 취소하겠습니까?`, + ); + if (isConfirmed) { + try { + await PermanentREJECT.cancelPermanentRejectFriend( + friendInfo.requesterId, + ); + setIsCancelRejectPermanent(true); + alert(`이제 ${friendInfo.name}님에게 친구요청을 받을 수 있습니다!`); + router.reload(); + } catch (error) { + console.error('영구 거절 취소 중 오류 발생'); + } + } + }; return (
영구 거절 목록 - {rejectedFriends.map((data, index) => ( - - {data.requester ? ( - <> - {`${data.requester.name}의 -
{data.requester.name}
- 영구 거절 취소 - - ) : ( -
영구 거절 목록이 없습니다!!
- )} - - ))} + {rejectedFriends.length > 0 ? ( + rejectedFriends.map((data, index) => ( + + {data.requester ? ( + <> + {`${data.requester.name}의 +
{data.requester.name}
+ + 영구 거절 취소 + + + ) : null} + + )) + ) : ( +
영구 거절한 요청이 없습니다!!
+ )}
); }; diff --git a/src/components/organisms/friend-list/ListFriendRequested.tsx b/src/components/organisms/friend-list/ListFriendRequested.tsx index d268c9d..8348758 100644 --- a/src/components/organisms/friend-list/ListFriendRequested.tsx +++ b/src/components/organisms/friend-list/ListFriendRequested.tsx @@ -25,22 +25,24 @@ const ListRequested = () => { return (
요청 보낸 목록 - {requestedFriends.map((data, index) => ( - - {data.respondent ? ( - <> - {`${data.respondent.name}의 -
{data.respondent.name}
- - ) : ( -
요청 보낸 목록이 없습니다!!
- )} - - ))} + {requestedFriends.length > 0 ? ( + requestedFriends.map((data, index) => ( + + {data.respondent ? ( + <> + {`${data.respondent.name}'s +
{data.respondent.name}
+ + ) : null} + + )) + ) : ( +
보낸 친구 요청이 없습니다!!
+ )}
); }; diff --git a/src/components/organisms/friend-list/ListFriendResponsed.tsx b/src/components/organisms/friend-list/ListFriendResponsed.tsx index 70ef2c1..bac3219 100644 --- a/src/components/organisms/friend-list/ListFriendResponsed.tsx +++ b/src/components/organisms/friend-list/ListFriendResponsed.tsx @@ -95,25 +95,27 @@ const ListResponsed = () => { return (
요청 받은 목록 - {responsedFriends.map((data, index) => ( - - {data.requester ? ( - <> - {`${data.requester.name}의 -
{data.requester.name}
- 수락 - 거절 - 영구 거절 - - ) : ( -
요청 받은 목록이 없습니다!!
- )} - - ))} + {responsedFriends.length > 0 ? ( + responsedFriends.map((data, index) => ( + + {data.requester ? ( + <> + {`${data.requester.name}의 +
{data.requester.name}
+ 수락 + 거절 + 영구 거절 + + ) : null} + + )) + ) : ( +
받은 친구 요청이 없습니다!!
+ )}
); }; diff --git a/src/components/templates/relation-list/RelatioinLists.tsx b/src/components/templates/relation-list/RelatioinLists.tsx index 0245db9..170ddf6 100644 --- a/src/components/templates/relation-list/RelatioinLists.tsx +++ b/src/components/templates/relation-list/RelatioinLists.tsx @@ -1,14 +1,9 @@ -import { useEventCallback } from '@mui/material'; import * as S from './styled'; -import React, { useState, useEffect } from 'react'; -import FriendList from '@/components/organisms/friend-list/ListFriend'; -import ResponsedList from '@/components/organisms/friend-list/ListResponsed'; -import RequestedList from '@/components/organisms/friend-list/ListRequested'; -import RejectedList from '@/components/organisms/friend-list/ListRejected'; +import React from 'react'; import ListFriend from '@/components/organisms/friend-list/ListFriend'; -import ListResponsed from '@/components/organisms/friend-list/ListResponsed'; -import ListRequested from '@/components/organisms/friend-list/ListRequested'; -import ListRejected from '@/components/organisms/friend-list/ListRejected'; +import ListResponsed from '@/components/organisms/friend-list/ListFriendResponsed'; +import ListRequested from '@/components/organisms/friend-list/ListFriendRequested'; +import ListRejected from '@/components/organisms/friend-list/ListFriendRejected'; const RelationLists = () => { return (