From 54f18aec2cbed04981792b6895c99465063cd72b Mon Sep 17 00:00:00 2001 From: MyungJiwoo <1206jiwoo@gmail.com> Date: Mon, 18 Nov 2024 16:20:59 +0900 Subject: [PATCH 1/7] =?UTF-8?q?#113=20feat:=20=EC=B9=9C=EA=B5=AC=20?= =?UTF-8?q?=EC=8B=A0=EC=B2=AD=EC=8B=9C=20=ED=86=A0=EC=8A=A4=ED=8A=B8=20?= =?UTF-8?q?=EC=95=8C=EB=A6=BC=20=EB=9D=84=EC=9A=B0=EA=B8=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/ConnectionApi.tsx | 14 +++++++++----- src/components/Connection/Connection.tsx | 8 ++++++-- 2 files changed, 15 insertions(+), 7 deletions(-) diff --git a/src/api/ConnectionApi.tsx b/src/api/ConnectionApi.tsx index fc7c0b7..92042ba 100644 --- a/src/api/ConnectionApi.tsx +++ b/src/api/ConnectionApi.tsx @@ -1,5 +1,6 @@ import { axiosInstance } from '../utils/apiConfig'; import { FollowersListData } from '../types/ConnectionType'; +import { customErrToast } from '../utils/customErrorToast'; // * 내 친구 목록 get export const getFollowersList = async ( @@ -57,14 +58,17 @@ export const getRecommendedFriendsList = async ( }; // * 친구 신청 post -export const postFollow = async (memberId: string): Promise => { +export const postFollow = async (memberId: string): Promise => { try { - const response = await axiosInstance.post(`/member/follow`, { + await axiosInstance.post(`/member/follow`, { memberId: memberId, }); - return response.data.data; - } catch (error) { - console.error('Error fetching data:', error); + + return true; + + // eslint-disable-next-line @typescript-eslint/no-explicit-any + } catch (error: any) { + if (error.status == 403) customErrToast(error.response.data.message); return null; } }; diff --git a/src/components/Connection/Connection.tsx b/src/components/Connection/Connection.tsx index 6b1fcb3..eb3294c 100644 --- a/src/components/Connection/Connection.tsx +++ b/src/components/Connection/Connection.tsx @@ -1,14 +1,18 @@ import { postFollow } from '../../api/ConnectionApi'; import { FollowInfo } from '../../types/ConnectionType'; import * as S from './ConnectionStyled'; +import { customErrToast } from '../../utils/customErrorToast'; interface ConnectionProps { follower: FollowInfo; } const Connection = ({ follower }: ConnectionProps) => { - const follow = () => { - postFollow(follower.memberId!); // memberId는 항상 존재하기 때문에 !로 검사 생략 + const follow = async () => { + const success = await postFollow(follower.memberId!); // memberId는 항상 존재하기 때문에 !로 검사 생략 + if (success) { + customErrToast(`${follower.name}님에게 친구 신청을 보냈습니다.`); + } }; return ( From 1cf4367112721e20f8b8e7c1c7a454a8ce742dbc Mon Sep 17 00:00:00 2001 From: MyungJiwoo <1206jiwoo@gmail.com> Date: Mon, 18 Nov 2024 16:36:10 +0900 Subject: [PATCH 2/7] =?UTF-8?q?#113=20feat:=20=EC=B6=94=EC=B2=9C=20?= =?UTF-8?q?=EC=B9=9C=EA=B5=AC=20=ED=83=AD=EC=9C=BC=EB=A1=9C=20=EB=B6=84?= =?UTF-8?q?=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.tsx | 11 ++- src/pages/ConnectionsPage/ConnectionsPage.tsx | 3 + .../ConnectionsSearchPage.tsx | 3 + .../RecommendedFriendsPage.tsx | 61 ++++++++++++ .../RecommendedFriendsPageStyled.tsx | 93 +++++++++++++++++++ 5 files changed, 170 insertions(+), 1 deletion(-) create mode 100644 src/pages/RecommendedFriendsPage/RecommendedFriendsPage.tsx create mode 100644 src/pages/RecommendedFriendsPage/RecommendedFriendsPageStyled.tsx diff --git a/src/App.tsx b/src/App.tsx index 2e3efda..0ef1e2a 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -35,7 +35,7 @@ import TeamDashBoard from './components/TeamDashboard'; import { useSSE } from './hooks/useSSE'; import ConnectionsPage from './pages/ConnectionsPage/ConnectionsPage'; import ConnectionsSearchPage from './pages/ConnectionsSearchPage/ConnectionsSearchPage'; - +import RecommendedFriendsPage from './pages/RecommendedFriendsPage/RecommendedFriendsPage'; const queryClient = new QueryClient(); @@ -281,6 +281,15 @@ const App = () => { } /> + + + + + } + /> diff --git a/src/pages/ConnectionsPage/ConnectionsPage.tsx b/src/pages/ConnectionsPage/ConnectionsPage.tsx index ad3c8ba..d09cea7 100644 --- a/src/pages/ConnectionsPage/ConnectionsPage.tsx +++ b/src/pages/ConnectionsPage/ConnectionsPage.tsx @@ -38,6 +38,9 @@ const ConnectionsPage = () => { navigate(`/connectionsSearch`)}>

친구 찾기

 + navigate(`/friends/recommend`)}> +

추천 친구

+ diff --git a/src/pages/ConnectionsSearchPage/ConnectionsSearchPage.tsx b/src/pages/ConnectionsSearchPage/ConnectionsSearchPage.tsx index 9fb9cbf..6801874 100644 --- a/src/pages/ConnectionsSearchPage/ConnectionsSearchPage.tsx +++ b/src/pages/ConnectionsSearchPage/ConnectionsSearchPage.tsx @@ -43,6 +43,9 @@ const ConnectionsPage = () => {

친구 찾기

 + navigate(`/friends/recommend`)}> +

추천 친구

+ navigate(`/connections`)}>

친구 목록

 diff --git a/src/pages/RecommendedFriendsPage/RecommendedFriendsPage.tsx b/src/pages/RecommendedFriendsPage/RecommendedFriendsPage.tsx new file mode 100644 index 0000000..bb391bf --- /dev/null +++ b/src/pages/RecommendedFriendsPage/RecommendedFriendsPage.tsx @@ -0,0 +1,61 @@ +import { Helmet } from 'react-helmet-async'; +import Flex from '../../components/Flex'; +import Navbar from '../../components/Navbar'; +import * as S from './RecommendedFriendsPageStyled'; +import leftarrow from '../../img/leftarrow.png'; +import Connection from '../../components/Connection/Connection'; +import Pagination from '../../components/CustomPagination'; +import { useNavigate } from 'react-router-dom'; +import { useFollowersList, useRecommendFriendsList } from '../../hooks/useFollowersList'; +import { useState } from 'react'; + +const RecommendedFriendsPage = () => { + const navigate = useNavigate(); + + const { data: recommendList } = useRecommendFriendsList(0, 8); + + return ( + <> + + 끄적끄적 | 친구 + + + + + + + navigate(`/mypage`)} /> + +

추천 친구

+ + navigate(`/connections`)}> +

친구 목록

+ + navigate(`/connectionsSearch`)}> +

친구 찾기

+ + + + + +

추천 친구

+ + + + {recommendList?.followInfoResDto.map((follower, index) => ( + + ))} + + + {recommendList?.followInfoResDto.length == 0 && ( + +

추천 친구가 없습니다.

+ + )} + + + + ); +}; + +export default RecommendedFriendsPage; diff --git a/src/pages/RecommendedFriendsPage/RecommendedFriendsPageStyled.tsx b/src/pages/RecommendedFriendsPage/RecommendedFriendsPageStyled.tsx new file mode 100644 index 0000000..ba572e9 --- /dev/null +++ b/src/pages/RecommendedFriendsPage/RecommendedFriendsPageStyled.tsx @@ -0,0 +1,93 @@ +import { styled } from 'styled-components'; +import theme from '../../styles/Theme/Theme'; + +export const MainDashBoardLayout = styled.div` + width: 100vw; + min-width: 100vw; + height: 100vh; + display: flex; +`; + +export const MainDashBoardContainer = styled.section` + width: 100%; + padding: 4.3125rem 2.5rem; + overflow: hidden; + hr { + border: 1px solid #f4f4f4; + } +`; + +export const HeaderLayout = styled.div` + padding-bottom: 13px; + border-bottom: 1px solid #f4f4f4; + display: flex; + align-items: center; + justify-content: space-between; + + img { + width: 1.5rem; + cursor: pointer; + } +`; + +export const TitleWrapper = styled.div` + p { + font-size: 1.5rem; + font-weight: ${theme.font.weight.bold}; + margin-right: 13px; + } +`; + +export const SecondaryTitleWrapper = styled(TitleWrapper)` + p { + font-size: 1rem; + color: ${theme.color.gray}; + cursor: pointer; + } +`; + +export const SectionTitleWrapper = styled.div` + p { + width: 85%; + margin: 0 auto; + margin-top: 2rem; + font-size: 1rem; + color: ${theme.color.gray}; + } +`; + +export const ConnectionsWrapper = styled.div` + width: 100%; + height: fit-content; + margin-top: 1rem; + + display: flex; + flex-wrap: wrap; + justify-content: center; + + overflow: hidden; + + &:after { + content: ''; + flex-basis: calc(100% / 2 - 5rem); /* 빈 공간을 채워서 왼쪽 정렬처럼 보이게 함 */ + } +`; + +export const NoResultWrapper = styled.div` + width: 100%; + margin-top: 1rem; + display: flex; + justify-content: center; + p { + width: fit-content; + color: ${theme.color.gray}; + font-size: ${theme.font.size.caption}; + } +`; + +export const PaginationWrapper = styled.div` + width: 100%; + margin-top: 1rem; + display: flex; + justify-content: center; +`; From 71c8e3eb4d0d72062401cb35b4d63dff69e8337d Mon Sep 17 00:00:00 2001 From: MyungJiwoo <1206jiwoo@gmail.com> Date: Mon, 18 Nov 2024 17:01:24 +0900 Subject: [PATCH 3/7] =?UTF-8?q?#113=20feat:=20=EC=B9=9C=EA=B5=AC=20?= =?UTF-8?q?=EC=82=AD=EC=A0=9C=20=EB=AA=A8=EB=8B=AC,=20api=20=EC=97=B0?= =?UTF-8?q?=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/ConnectionApi.tsx | 14 ++++++ src/components/Connection/Connection.tsx | 59 +++++++++++++++++++----- 2 files changed, 62 insertions(+), 11 deletions(-) diff --git a/src/api/ConnectionApi.tsx b/src/api/ConnectionApi.tsx index 92042ba..f12d815 100644 --- a/src/api/ConnectionApi.tsx +++ b/src/api/ConnectionApi.tsx @@ -72,3 +72,17 @@ export const postFollow = async (memberId: string): Promise => { return null; } }; + +// * 친구 삭제 delete +export const deleteFollow = async (memberId: string): Promise => { + try { + await axiosInstance.delete(`/member/follow/${memberId}`); + + return true; + + // eslint-disable-next-line @typescript-eslint/no-explicit-any + } catch (error: any) { + if (error.status == 403) customErrToast(error.response.data.message); + return null; + } +}; diff --git a/src/components/Connection/Connection.tsx b/src/components/Connection/Connection.tsx index eb3294c..8628596 100644 --- a/src/components/Connection/Connection.tsx +++ b/src/components/Connection/Connection.tsx @@ -1,13 +1,19 @@ -import { postFollow } from '../../api/ConnectionApi'; +import { deleteFollow, postFollow } from '../../api/ConnectionApi'; import { FollowInfo } from '../../types/ConnectionType'; import * as S from './ConnectionStyled'; import { customErrToast } from '../../utils/customErrorToast'; +import CustomModal from '../CustomModal'; +import useModal from '../../hooks/useModal'; +import { useState } from 'react'; interface ConnectionProps { follower: FollowInfo; } const Connection = ({ follower }: ConnectionProps) => { + const { isModalOpen, openModal, handleYesClick, handleNoClick } = useModal(); // 모달창 관련 훅 호출 + const [isDelModalOpen, setIsDelModalOpen] = useState(false); + const follow = async () => { const success = await postFollow(follower.memberId!); // memberId는 항상 존재하기 때문에 !로 검사 생략 if (success) { @@ -15,17 +21,48 @@ const Connection = ({ follower }: ConnectionProps) => { } }; + const unFollow = async () => { + const success = await deleteFollow(follower.memberId!); // memberId는 항상 존재하기 때문에 !로 검사 생략 + if (success) { + customErrToast(`${follower.name}님을 친구 목록에서 제거했습니다.`); + } + }; + + // 친구 삭제를 모달창으로 확인 + const submitUnFollow = () => { + setIsDelModalOpen(true); + const handleModalClose = () => setIsDelModalOpen(false); + openModal('yes', unFollow, handleModalClose); + }; + return ( - - - -

{follower.name}

-

{follower.nickname}

- - -

친구 신청

- - + <> + + + +

{follower.name}

+

{follower.nickname}

+ + {follower.isFollow ? ( + +

친구 삭제

+ + ) : ( + +

친구 신청

+ + )} + + + {isModalOpen && isDelModalOpen && ( + + )} + ); }; From 43203a363c3d5fd155c6e37a5845b7d03e6f111a Mon Sep 17 00:00:00 2001 From: MyungJiwoo <1206jiwoo@gmail.com> Date: Mon, 18 Nov 2024 18:54:05 +0900 Subject: [PATCH 4/7] =?UTF-8?q?#113=20fix:=20=EC=B9=9C=EA=B5=AC=20?= =?UTF-8?q?=EC=8B=A0=EC=B2=AD=EC=8B=9C=20=EB=B2=84=ED=8A=BC=EC=97=90=20?= =?UTF-8?q?=EB=B0=98=EC=98=81=20=EC=95=88=EB=90=98=EB=8A=94=20=EC=98=A4?= =?UTF-8?q?=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/api/ConnectionApi.tsx | 23 ++++++++++----------- src/components/Connection/Connection.tsx | 8 ++++---- src/hooks/useFollowersList.ts | 26 +++++++++++++++++++++++- 3 files changed, 40 insertions(+), 17 deletions(-) diff --git a/src/api/ConnectionApi.tsx b/src/api/ConnectionApi.tsx index f12d815..0fe47e5 100644 --- a/src/api/ConnectionApi.tsx +++ b/src/api/ConnectionApi.tsx @@ -1,6 +1,7 @@ import { axiosInstance } from '../utils/apiConfig'; import { FollowersListData } from '../types/ConnectionType'; import { customErrToast } from '../utils/customErrorToast'; +import { AxiosResponse } from 'axios'; // * 내 친구 목록 get export const getFollowersList = async ( @@ -58,31 +59,29 @@ export const getRecommendedFriendsList = async ( }; // * 친구 신청 post -export const postFollow = async (memberId: string): Promise => { +export const postFollow = async (memberId: string): Promise => { try { - await axiosInstance.post(`/member/follow`, { + const response = await axiosInstance.post(`/member/follow`, { memberId: memberId, }); - return true; + return response; + } catch (error) { + console.log(error); - // eslint-disable-next-line @typescript-eslint/no-explicit-any - } catch (error: any) { - if (error.status == 403) customErrToast(error.response.data.message); return null; } }; // * 친구 삭제 delete -export const deleteFollow = async (memberId: string): Promise => { +export const deleteFollow = async (memberId: string): Promise => { try { - await axiosInstance.delete(`/member/follow/${memberId}`); + const response = await axiosInstance.delete(`/member/follow/${memberId}`); - return true; + return response; + } catch (error) { + console.log(error); - // eslint-disable-next-line @typescript-eslint/no-explicit-any - } catch (error: any) { - if (error.status == 403) customErrToast(error.response.data.message); return null; } }; diff --git a/src/components/Connection/Connection.tsx b/src/components/Connection/Connection.tsx index 8628596..0d7b6e4 100644 --- a/src/components/Connection/Connection.tsx +++ b/src/components/Connection/Connection.tsx @@ -5,6 +5,7 @@ import { customErrToast } from '../../utils/customErrorToast'; import CustomModal from '../CustomModal'; import useModal from '../../hooks/useModal'; import { useState } from 'react'; +import { usePostFollow } from '../../hooks/useFollowersList'; interface ConnectionProps { follower: FollowInfo; @@ -14,11 +15,10 @@ const Connection = ({ follower }: ConnectionProps) => { const { isModalOpen, openModal, handleYesClick, handleNoClick } = useModal(); // 모달창 관련 훅 호출 const [isDelModalOpen, setIsDelModalOpen] = useState(false); + const { mutate: followMutate } = usePostFollow(follower.memberId!, follower.name!); + const follow = async () => { - const success = await postFollow(follower.memberId!); // memberId는 항상 존재하기 때문에 !로 검사 생략 - if (success) { - customErrToast(`${follower.name}님에게 친구 신청을 보냈습니다.`); - } + followMutate(); }; const unFollow = async () => { diff --git a/src/hooks/useFollowersList.ts b/src/hooks/useFollowersList.ts index 84b8bc6..0f9a80e 100644 --- a/src/hooks/useFollowersList.ts +++ b/src/hooks/useFollowersList.ts @@ -1,10 +1,14 @@ -import { useQuery } from '@tanstack/react-query'; +import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'; import { FollowersListData } from '../types/ConnectionType'; import { + deleteFollow, getFollowersList, getRecommendedFriendsList, getSearchFriendsList, + postFollow, } from '../api/ConnectionApi'; +import { customErrToast } from '../utils/customErrorToast'; +import { axiosInstance } from '../utils/apiConfig'; export const useFollowersList = (page: number, size: number) => { return useQuery({ @@ -29,3 +33,23 @@ export const useRecommendFriendsList = (page: number, size: number) => { staleTime: 1000 * 60 * 5, }); }; + +export const usePostFollow = (id: string, name: string) => { + const queryClient = useQueryClient(); + return useMutation({ + mutationFn: () => postFollow(id), + onSuccess: () => { + queryClient.invalidateQueries({ queryKey: ['followersList'] }); + queryClient.invalidateQueries({ queryKey: ['recommendedFriendsList'] }); + customErrToast(`${name}님에게 친구 신청을 보냈습니다.`); + }, + // eslint-disable-next-line @typescript-eslint/no-explicit-any + onError: (error: any) => { + if (error.response && error.response.status === 403) { + customErrToast(error.response.data.message); + } else { + customErrToast('친구 신청 중 오류가 발생했습니다.'); + } + }, + }); +}; From ad41245f556a157ea6dd5fd5f56a02d8c5393e85 Mon Sep 17 00:00:00 2001 From: MyungJiwoo <1206jiwoo@gmail.com> Date: Mon, 18 Nov 2024 19:01:02 +0900 Subject: [PATCH 5/7] =?UTF-8?q?#113=20fix:=20=EC=B9=9C=EA=B5=AC=20?= =?UTF-8?q?=EC=82=AD=EC=A0=9C=EC=8B=9C=20=EB=B2=84=ED=8A=BC=EC=97=90=20?= =?UTF-8?q?=EB=B0=98=EC=98=81=20=EC=95=88=EB=90=98=EB=8A=94=20=EC=98=A4?= =?UTF-8?q?=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/components/Connection/Connection.tsx | 8 +++----- src/hooks/useFollowersList.ts | 20 ++++++++++++++++++++ 2 files changed, 23 insertions(+), 5 deletions(-) diff --git a/src/components/Connection/Connection.tsx b/src/components/Connection/Connection.tsx index 0d7b6e4..17f1e3e 100644 --- a/src/components/Connection/Connection.tsx +++ b/src/components/Connection/Connection.tsx @@ -5,7 +5,7 @@ import { customErrToast } from '../../utils/customErrorToast'; import CustomModal from '../CustomModal'; import useModal from '../../hooks/useModal'; import { useState } from 'react'; -import { usePostFollow } from '../../hooks/useFollowersList'; +import { useDeleteFollow, usePostFollow } from '../../hooks/useFollowersList'; interface ConnectionProps { follower: FollowInfo; @@ -16,16 +16,14 @@ const Connection = ({ follower }: ConnectionProps) => { const [isDelModalOpen, setIsDelModalOpen] = useState(false); const { mutate: followMutate } = usePostFollow(follower.memberId!, follower.name!); + const { mutate: unFollowMutate } = useDeleteFollow(follower.memberId!, follower.name!); const follow = async () => { followMutate(); }; const unFollow = async () => { - const success = await deleteFollow(follower.memberId!); // memberId는 항상 존재하기 때문에 !로 검사 생략 - if (success) { - customErrToast(`${follower.name}님을 친구 목록에서 제거했습니다.`); - } + unFollowMutate(); }; // 친구 삭제를 모달창으로 확인 diff --git a/src/hooks/useFollowersList.ts b/src/hooks/useFollowersList.ts index 0f9a80e..615591c 100644 --- a/src/hooks/useFollowersList.ts +++ b/src/hooks/useFollowersList.ts @@ -53,3 +53,23 @@ export const usePostFollow = (id: string, name: string) => { }, }); }; + +export const useDeleteFollow = (id: string, name: string) => { + const queryClient = useQueryClient(); + return useMutation({ + mutationFn: () => deleteFollow(id), + onSuccess: () => { + queryClient.invalidateQueries({ queryKey: ['followersList'] }); + queryClient.invalidateQueries({ queryKey: ['recommendedFriendsList'] }); + customErrToast(`${name}님을 친구 목록에서 제거했습니다.`); + }, + // eslint-disable-next-line @typescript-eslint/no-explicit-any + onError: (error: any) => { + if (error.response && error.response.status === 403) { + customErrToast(error.response.data.message); + } else { + customErrToast('친구 삭제 중 오류가 발생했습니다.'); + } + }, + }); +}; From 391a2dfabb209c89e1d51a963eff22fb0cd1dfc3 Mon Sep 17 00:00:00 2001 From: MyungJiwoo <1206jiwoo@gmail.com> Date: Mon, 18 Nov 2024 19:06:53 +0900 Subject: [PATCH 6/7] =?UTF-8?q?#113=20refactor:=20=EC=B9=9C=EA=B5=AC=20?= =?UTF-8?q?=EA=B2=80=EC=83=89=EC=8B=9C=20=EC=95=88=EB=82=B4=20=EB=AC=B8?= =?UTF-8?q?=EA=B5=AC=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/ConnectionsSearchPage/ConnectionsSearchPage.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/ConnectionsSearchPage/ConnectionsSearchPage.tsx b/src/pages/ConnectionsSearchPage/ConnectionsSearchPage.tsx index 6801874..b6ea9de 100644 --- a/src/pages/ConnectionsSearchPage/ConnectionsSearchPage.tsx +++ b/src/pages/ConnectionsSearchPage/ConnectionsSearchPage.tsx @@ -57,7 +57,7 @@ const ConnectionsPage = () => { Date: Tue, 19 Nov 2024 16:55:08 +0900 Subject: [PATCH 7/7] =?UTF-8?q?#113=20refactor:=20=EC=9D=B4=EB=A6=84?= =?UTF-8?q?=EC=9D=98=20Connection=EC=9D=84=20Friend=EB=A1=9C=20=EC=9D=BC?= =?UTF-8?q?=EA=B4=84=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.tsx | 12 +++++------ src/api/{ConnectionApi.tsx => FriendApi.tsx} | 3 +-- .../Connection.tsx => Friend/Friend.tsx} | 20 +++++++++---------- .../FriendStyled.tsx} | 4 ++-- src/hooks/useFollowersList.ts | 4 ++-- .../FriendsPage.tsx} | 20 +++++++++---------- .../FriendsPageStyled.tsx} | 2 +- .../FriendsSearchPage.tsx} | 16 +++++++-------- .../FriendsSearchPageStyled.tsx} | 2 +- .../SearchIcon.tsx | 0 src/pages/MyPage.tsx | 2 +- .../RecommendedFriendsPage.tsx | 12 +++++------ .../RecommendedFriendsPageStyled.tsx | 2 +- .../{ConnectionType.ts => FriendType.ts} | 0 14 files changed, 48 insertions(+), 51 deletions(-) rename src/api/{ConnectionApi.tsx => FriendApi.tsx} (94%) rename src/components/{Connection/Connection.tsx => Friend/Friend.tsx} (79%) rename src/components/{Connection/ConnectionStyled.tsx => Friend/FriendStyled.tsx} (92%) rename src/pages/{ConnectionsPage/ConnectionsPage.tsx => FriendsPage/FriendsPage.tsx} (85%) rename src/pages/{ConnectionsPage/ConnectionsPageStyled.tsx => FriendsPage/FriendsPageStyled.tsx} (97%) rename src/pages/{ConnectionsSearchPage/ConnectionsSearchPage.tsx => FriendsSearchPage/FriendsSearchPage.tsx} (90%) rename src/pages/{ConnectionsSearchPage/ConnectionsSearchPageStyled.tsx => FriendsSearchPage/FriendsSearchPageStyled.tsx} (98%) rename src/pages/{ConnectionsSearchPage => FriendsSearchPage}/SearchIcon.tsx (100%) rename src/types/{ConnectionType.ts => FriendType.ts} (100%) diff --git a/src/App.tsx b/src/App.tsx index 0ef1e2a..7c69e6d 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -33,8 +33,8 @@ import RouteChangeTracker from './components/RouteChangeTracker'; import PersonalDashboard from './components/PersonalDashboard'; import TeamDashBoard from './components/TeamDashboard'; import { useSSE } from './hooks/useSSE'; -import ConnectionsPage from './pages/ConnectionsPage/ConnectionsPage'; -import ConnectionsSearchPage from './pages/ConnectionsSearchPage/ConnectionsSearchPage'; +import FriendsPage from './pages/FriendsPage/FriendsPage'; +import FriendsSearchPage from './pages/FriendsSearchPage/FriendsSearchPage'; import RecommendedFriendsPage from './pages/RecommendedFriendsPage/RecommendedFriendsPage'; const queryClient = new QueryClient(); @@ -265,19 +265,19 @@ const App = () => { /> - + } /> - + } /> diff --git a/src/api/ConnectionApi.tsx b/src/api/FriendApi.tsx similarity index 94% rename from src/api/ConnectionApi.tsx rename to src/api/FriendApi.tsx index 0fe47e5..9bdd380 100644 --- a/src/api/ConnectionApi.tsx +++ b/src/api/FriendApi.tsx @@ -1,6 +1,5 @@ import { axiosInstance } from '../utils/apiConfig'; -import { FollowersListData } from '../types/ConnectionType'; -import { customErrToast } from '../utils/customErrorToast'; +import { FollowersListData } from '../types/FriendType'; import { AxiosResponse } from 'axios'; // * 내 친구 목록 get diff --git a/src/components/Connection/Connection.tsx b/src/components/Friend/Friend.tsx similarity index 79% rename from src/components/Connection/Connection.tsx rename to src/components/Friend/Friend.tsx index 17f1e3e..a930003 100644 --- a/src/components/Connection/Connection.tsx +++ b/src/components/Friend/Friend.tsx @@ -1,17 +1,15 @@ -import { deleteFollow, postFollow } from '../../api/ConnectionApi'; -import { FollowInfo } from '../../types/ConnectionType'; -import * as S from './ConnectionStyled'; -import { customErrToast } from '../../utils/customErrorToast'; +import { FollowInfo } from '../../types/FriendType'; +import * as S from './FriendStyled'; import CustomModal from '../CustomModal'; import useModal from '../../hooks/useModal'; import { useState } from 'react'; import { useDeleteFollow, usePostFollow } from '../../hooks/useFollowersList'; -interface ConnectionProps { +interface FriendProps { follower: FollowInfo; } -const Connection = ({ follower }: ConnectionProps) => { +const Friend = ({ follower }: FriendProps) => { const { isModalOpen, openModal, handleYesClick, handleNoClick } = useModal(); // 모달창 관련 훅 호출 const [isDelModalOpen, setIsDelModalOpen] = useState(false); @@ -35,12 +33,12 @@ const Connection = ({ follower }: ConnectionProps) => { return ( <> - + - +

{follower.name}

{follower.nickname}

- + {follower.isFollow ? (

친구 삭제

@@ -50,7 +48,7 @@ const Connection = ({ follower }: ConnectionProps) => {

친구 신청

 )} - + {isModalOpen && isDelModalOpen && ( { ); }; -export default Connection; +export default Friend; diff --git a/src/components/Connection/ConnectionStyled.tsx b/src/components/Friend/FriendStyled.tsx similarity index 92% rename from src/components/Connection/ConnectionStyled.tsx rename to src/components/Friend/FriendStyled.tsx index 748b6f1..882df41 100644 --- a/src/components/Connection/ConnectionStyled.tsx +++ b/src/components/Friend/FriendStyled.tsx @@ -1,7 +1,7 @@ import { styled } from 'styled-components'; import theme from '../../styles/Theme/Theme'; -export const ConnectionLayout = styled.div` +export const FriendLayout = styled.div` width: calc(100% / 2 - 5rem); padding: 1rem; margin-bottom: 1rem; @@ -29,7 +29,7 @@ export const ProfileImageWrapper = styled.img` color: ${theme.color.text}; `; -export const ConnectionUserWrapper = styled.div` +export const FriendUserWrapper = styled.div` width: 60%; .name { diff --git a/src/hooks/useFollowersList.ts b/src/hooks/useFollowersList.ts index 615591c..3e36815 100644 --- a/src/hooks/useFollowersList.ts +++ b/src/hooks/useFollowersList.ts @@ -1,12 +1,12 @@ import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'; -import { FollowersListData } from '../types/ConnectionType'; +import { FollowersListData } from '../types/FriendType'; import { deleteFollow, getFollowersList, getRecommendedFriendsList, getSearchFriendsList, postFollow, -} from '../api/ConnectionApi'; +} from '../api/FriendApi'; import { customErrToast } from '../utils/customErrorToast'; import { axiosInstance } from '../utils/apiConfig'; diff --git a/src/pages/ConnectionsPage/ConnectionsPage.tsx b/src/pages/FriendsPage/FriendsPage.tsx similarity index 85% rename from src/pages/ConnectionsPage/ConnectionsPage.tsx rename to src/pages/FriendsPage/FriendsPage.tsx index d09cea7..1323e24 100644 --- a/src/pages/ConnectionsPage/ConnectionsPage.tsx +++ b/src/pages/FriendsPage/FriendsPage.tsx @@ -1,15 +1,15 @@ +import { useState } from 'react'; import { Helmet } from 'react-helmet-async'; import Flex from '../../components/Flex'; import Navbar from '../../components/Navbar'; -import * as S from './ConnectionsPageStyled'; +import * as S from './FriendsPageStyled'; import leftarrow from '../../img/leftarrow.png'; -import Connection from '../../components/Connection/Connection'; +import Friend from '../../components/Friend/Friend'; import Pagination from '../../components/CustomPagination'; import { useNavigate } from 'react-router-dom'; import { useFollowersList, useRecommendFriendsList } from '../../hooks/useFollowersList'; -import { useState } from 'react'; -const ConnectionsPage = () => { +const FriendsPage = () => { const navigate = useNavigate(); const [currentPage, setCurrentPage] = useState(0); @@ -35,7 +35,7 @@ const ConnectionsPage = () => {

친구 목록

 - navigate(`/connectionsSearch`)}> + navigate(`/friends/search`)}>

친구 찾기

 navigate(`/friends/recommend`)}> @@ -48,15 +48,15 @@ const ConnectionsPage = () => { {followersList?.followInfoResDto.length == 0 ?

추천 친구

:

내 친구 목록

} - + {followersList?.followInfoResDto.length === 0 ? recommendList?.followInfoResDto.map((follower, index) => ( - + )) : followersList?.followInfoResDto.map((follower, index) => ( - + ))} - + {followersList?.followInfoResDto.length !== 0 && ( @@ -73,4 +73,4 @@ const ConnectionsPage = () => { ); }; -export default ConnectionsPage; +export default FriendsPage; diff --git a/src/pages/ConnectionsPage/ConnectionsPageStyled.tsx b/src/pages/FriendsPage/FriendsPageStyled.tsx similarity index 97% rename from src/pages/ConnectionsPage/ConnectionsPageStyled.tsx rename to src/pages/FriendsPage/FriendsPageStyled.tsx index ba572e9..d69e6c4 100644 --- a/src/pages/ConnectionsPage/ConnectionsPageStyled.tsx +++ b/src/pages/FriendsPage/FriendsPageStyled.tsx @@ -56,7 +56,7 @@ export const SectionTitleWrapper = styled.div` } `; -export const ConnectionsWrapper = styled.div` +export const FriendsWrapper = styled.div` width: 100%; height: fit-content; margin-top: 1rem; diff --git a/src/pages/ConnectionsSearchPage/ConnectionsSearchPage.tsx b/src/pages/FriendsSearchPage/FriendsSearchPage.tsx similarity index 90% rename from src/pages/ConnectionsSearchPage/ConnectionsSearchPage.tsx rename to src/pages/FriendsSearchPage/FriendsSearchPage.tsx index b6ea9de..e396f54 100644 --- a/src/pages/ConnectionsSearchPage/ConnectionsSearchPage.tsx +++ b/src/pages/FriendsSearchPage/FriendsSearchPage.tsx @@ -1,9 +1,9 @@ import { Helmet } from 'react-helmet-async'; import Flex from '../../components/Flex'; import Navbar from '../../components/Navbar'; -import * as S from './ConnectionsSearchPageStyled'; +import * as S from './FriendsSearchPageStyled'; import leftarrow from '../../img/leftarrow.png'; -import Connection from '../../components/Connection/Connection'; +import Friend from '../../components/Friend/Friend'; import Pagination from '../../components/CustomPagination'; import { useNavigate } from 'react-router-dom'; import { useState } from 'react'; @@ -11,7 +11,7 @@ import SearchIcon from './SearchIcon'; import { useSearchFriendsList } from '../../hooks/useFollowersList'; import { useDebounce } from '../../hooks/useDebounce'; -const ConnectionsPage = () => { +const FriendsPage = () => { const navigate = useNavigate(); const [keyword, setKeyword] = useState(''); const [currentPage, setCurrentPage] = useState(0); @@ -46,7 +46,7 @@ const ConnectionsPage = () => { navigate(`/friends/recommend`)}>

추천 친구

 - navigate(`/connections`)}> + navigate(`/friends`)}>

친구 목록

 @@ -69,11 +69,11 @@ const ConnectionsPage = () => {

검색 결과

 - + {followersList?.followInfoResDto.map((follower, index) => ( - + ))} - + {followersList?.followInfoResDto.length == 0 && ( @@ -96,4 +96,4 @@ const ConnectionsPage = () => { ); }; -export default ConnectionsPage; +export default FriendsPage; diff --git a/src/pages/ConnectionsSearchPage/ConnectionsSearchPageStyled.tsx b/src/pages/FriendsSearchPage/FriendsSearchPageStyled.tsx similarity index 98% rename from src/pages/ConnectionsSearchPage/ConnectionsSearchPageStyled.tsx rename to src/pages/FriendsSearchPage/FriendsSearchPageStyled.tsx index fa2b376..72211f6 100644 --- a/src/pages/ConnectionsSearchPage/ConnectionsSearchPageStyled.tsx +++ b/src/pages/FriendsSearchPage/FriendsSearchPageStyled.tsx @@ -56,7 +56,7 @@ export const SectionTitleWrapper = styled.div` } `; -export const ConnectionsWrapper = styled.div` +export const FriendsWrapper = styled.div` width: 100%; height: fit-content; margin-top: 1rem; diff --git a/src/pages/ConnectionsSearchPage/SearchIcon.tsx b/src/pages/FriendsSearchPage/SearchIcon.tsx similarity index 100% rename from src/pages/ConnectionsSearchPage/SearchIcon.tsx rename to src/pages/FriendsSearchPage/SearchIcon.tsx diff --git a/src/pages/MyPage.tsx b/src/pages/MyPage.tsx index 33fe4f0..d936918 100644 --- a/src/pages/MyPage.tsx +++ b/src/pages/MyPage.tsx @@ -288,7 +288,7 @@ const MyPage = () => { 자기 소개를 작성해주세요 )} - navigate(`/connections`)}> + navigate(`/friends`)}> 친구 {followersList?.pageInfoResDto.totalItems}명 diff --git a/src/pages/RecommendedFriendsPage/RecommendedFriendsPage.tsx b/src/pages/RecommendedFriendsPage/RecommendedFriendsPage.tsx index bb391bf..59acf25 100644 --- a/src/pages/RecommendedFriendsPage/RecommendedFriendsPage.tsx +++ b/src/pages/RecommendedFriendsPage/RecommendedFriendsPage.tsx @@ -3,7 +3,7 @@ import Flex from '../../components/Flex'; import Navbar from '../../components/Navbar'; import * as S from './RecommendedFriendsPageStyled'; import leftarrow from '../../img/leftarrow.png'; -import Connection from '../../components/Connection/Connection'; +import Friend from '../../components/Friend/Friend'; import Pagination from '../../components/CustomPagination'; import { useNavigate } from 'react-router-dom'; import { useFollowersList, useRecommendFriendsList } from '../../hooks/useFollowersList'; @@ -28,10 +28,10 @@ const RecommendedFriendsPage = () => {

추천 친구

 - navigate(`/connections`)}> + navigate(`/friends`)}>

친구 목록

 - navigate(`/connectionsSearch`)}> + navigate(`/friends/search`)}>

친구 찾기

 @@ -41,11 +41,11 @@ const RecommendedFriendsPage = () => {

추천 친구

- + {recommendList?.followInfoResDto.map((follower, index) => ( - + ))} - + {recommendList?.followInfoResDto.length == 0 && ( diff --git a/src/pages/RecommendedFriendsPage/RecommendedFriendsPageStyled.tsx b/src/pages/RecommendedFriendsPage/RecommendedFriendsPageStyled.tsx index ba572e9..d69e6c4 100644 --- a/src/pages/RecommendedFriendsPage/RecommendedFriendsPageStyled.tsx +++ b/src/pages/RecommendedFriendsPage/RecommendedFriendsPageStyled.tsx @@ -56,7 +56,7 @@ export const SectionTitleWrapper = styled.div` } `; -export const ConnectionsWrapper = styled.div` +export const FriendsWrapper = styled.div` width: 100%; height: fit-content; margin-top: 1rem; diff --git a/src/types/ConnectionType.ts b/src/types/FriendType.ts similarity index 100% rename from src/types/ConnectionType.ts rename to src/types/FriendType.ts