#113 refactor: 이름의 Connection을 Friend로 일괄 변경

AJD-Archive · Nov 19, 2024 · 1cfd936 · 1cfd936
1 parent 391a2df
commit 1cfd936
Show file tree

Hide file tree

Showing 14 changed files with 48 additions and 51 deletions.
diff --git 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 = () => {
           />
 
           <Route
-            path="/connections"
+            path="/friends"
             element={
               <ProtectedRoute>
-                <ConnectionsPage />
+                <FriendsPage />
               </ProtectedRoute>
             }
           />
 
           <Route
-            path="/connectionsSearch"
+            path="/friends/search"
             element={
               <ProtectedRoute>
-                <ConnectionsSearchPage />
+                <FriendsSearchPage />
               </ProtectedRoute>
             }
           />

diff --git a/src/api/ConnectionApi.tsx → src/api/FriendApi.tsx b/src/api/ConnectionApi.tsx → 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 → src/components/Friend/Friend.tsx b/src/components/Connection/Connection.tsx → 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<boolean>(false);
 
@@ -35,12 +33,12 @@ const Connection = ({ follower }: ConnectionProps) => {
 
   return (
     <>
-      <S.ConnectionLayout>
+      <S.FriendLayout>
         <S.ProfileImageWrapper src={follower.profileImage} />
-        <S.ConnectionUserWrapper>
+        <S.FriendUserWrapper>
           <p className="name">{follower.name}</p>
           <p className="nickName">{follower.nickname}</p>
-        </S.ConnectionUserWrapper>
+        </S.FriendUserWrapper>
         {follower.isFollow ? (
           <S.FriendRequestButtonWrapper onClick={submitUnFollow}>
             <p>친구 삭제</p>
@@ -50,7 +48,7 @@ const Connection = ({ follower }: ConnectionProps) => {
             <p>친구 신청</p>
           </S.FriendRequestButtonWrapper>
         )}
-      </S.ConnectionLayout>
+      </S.FriendLayout>
 
       {isModalOpen && isDelModalOpen && (
         <CustomModal
@@ -64,4 +62,4 @@ const Connection = ({ follower }: ConnectionProps) => {
   );
 };
 
-export default Connection;
+export default Friend;
diff --git a/...omponents/Connection/ConnectionStyled.tsx → src/components/Friend/FriendStyled.tsx b/...omponents/Connection/ConnectionStyled.tsx → 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
@@ -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/...pages/ConnectionsPage/ConnectionsPage.tsx → src/pages/FriendsPage/FriendsPage.tsx b/...pages/ConnectionsPage/ConnectionsPage.tsx → 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<number>(0);
 
@@ -35,7 +35,7 @@ const ConnectionsPage = () => {
               <S.TitleWrapper>
                 <p>친구 목록</p>
               </S.TitleWrapper>
-              <S.SecondaryTitleWrapper onClick={() => navigate(`/connectionsSearch`)}>
+              <S.SecondaryTitleWrapper onClick={() => navigate(`/friends/search`)}>
                 <p>친구 찾기</p>
               </S.SecondaryTitleWrapper>
               <S.SecondaryTitleWrapper onClick={() => navigate(`/friends/recommend`)}>
@@ -48,15 +48,15 @@ const ConnectionsPage = () => {
             {followersList?.followInfoResDto.length == 0 ? <p>추천 친구</p> : <p>내 친구 목록</p>}
           </S.SectionTitleWrapper>
 
-          <S.ConnectionsWrapper>
+          <S.FriendsWrapper>
             {followersList?.followInfoResDto.length === 0
               ? recommendList?.followInfoResDto.map((follower, index) => (
-                  <Connection key={index} follower={follower} />
+                  <Friend key={index} follower={follower} />
                 ))
               : followersList?.followInfoResDto.map((follower, index) => (
-                  <Connection key={index} follower={follower} />
+                  <Friend key={index} follower={follower} />
                 ))}
-          </S.ConnectionsWrapper>
+          </S.FriendsWrapper>
 
           {followersList?.followInfoResDto.length !== 0 && (
             <S.PaginationWrapper>
@@ -73,4 +73,4 @@ const ConnectionsPage = () => {
   );
 };
 
-export default ConnectionsPage;
+export default FriendsPage;
diff --git a/...ConnectionsPage/ConnectionsPageStyled.tsx → src/pages/FriendsPage/FriendsPageStyled.tsx b/...ConnectionsPage/ConnectionsPageStyled.tsx → 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/...tionsSearchPage/ConnectionsSearchPage.tsx → ...s/FriendsSearchPage/FriendsSearchPage.tsx b/...tionsSearchPage/ConnectionsSearchPage.tsx → ...s/FriendsSearchPage/FriendsSearchPage.tsx
@@ -1,17 +1,17 @@
 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';
 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<string>('');
   const [currentPage, setCurrentPage] = useState<number>(0);
@@ -46,7 +46,7 @@ const ConnectionsPage = () => {
               <S.SecondaryTitleWrapper onClick={() => navigate(`/friends/recommend`)}>
                 <p>추천 친구</p>
               </S.SecondaryTitleWrapper>
-              <S.SecondaryTitleWrapper onClick={() => navigate(`/connections`)}>
+              <S.SecondaryTitleWrapper onClick={() => navigate(`/friends`)}>
                 <p>친구 목록</p>
               </S.SecondaryTitleWrapper>
             </Flex>
@@ -69,11 +69,11 @@ const ConnectionsPage = () => {
           <S.SectionTitleWrapper>
             <p>검색 결과</p>
           </S.SectionTitleWrapper>
-          <S.ConnectionsWrapper>
+          <S.FriendsWrapper>
             {followersList?.followInfoResDto.map((follower, index) => (
-              <Connection key={index} follower={follower} />
+              <Friend key={index} follower={follower} />
             ))}
-          </S.ConnectionsWrapper>
+          </S.FriendsWrapper>
 
           {followersList?.followInfoResDto.length == 0 && (
             <S.NoResultWrapper>
@@ -96,4 +96,4 @@ const ConnectionsPage = () => {
   );
 };
 
-export default ConnectionsPage;
+export default FriendsPage;
diff --git a/...earchPage/ConnectionsSearchPageStyled.tsx → ...ndsSearchPage/FriendsSearchPageStyled.tsx b/...earchPage/ConnectionsSearchPageStyled.tsx → ...ndsSearchPage/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/...ages/ConnectionsSearchPage/SearchIcon.tsx → src/pages/FriendsSearchPage/SearchIcon.tsx b/...ages/ConnectionsSearchPage/SearchIcon.tsx → src/pages/FriendsSearchPage/SearchIcon.tsx
diff --git a/src/pages/MyPage.tsx b/src/pages/MyPage.tsx
@@ -288,7 +288,7 @@ const MyPage = () => {
                       <span>자기 소개를 작성해주세요</span>
                     )}
                   </S.CaptionText>
-                  <S.CaptionText onClick={() => navigate(`/connections`)}>
+                  <S.CaptionText onClick={() => navigate(`/friends`)}>
                     <span>친구 {followersList?.pageInfoResDto.totalItems}명</span>
                   </S.CaptionText>
                 </Flex>

diff --git 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 = () => {
               <S.TitleWrapper>
                 <p>추천 친구</p>
               </S.TitleWrapper>
-              <S.SecondaryTitleWrapper onClick={() => navigate(`/connections`)}>
+              <S.SecondaryTitleWrapper onClick={() => navigate(`/friends`)}>
                 <p>친구 목록</p>
               </S.SecondaryTitleWrapper>
-              <S.SecondaryTitleWrapper onClick={() => navigate(`/connectionsSearch`)}>
+              <S.SecondaryTitleWrapper onClick={() => navigate(`/friends/search`)}>
                 <p>친구 찾기</p>
               </S.SecondaryTitleWrapper>
             </Flex>
@@ -41,11 +41,11 @@ const RecommendedFriendsPage = () => {
             <p>추천 친구</p>
           </S.SectionTitleWrapper>
 
-          <S.ConnectionsWrapper>
+          <S.FriendsWrapper>
             {recommendList?.followInfoResDto.map((follower, index) => (
-              <Connection key={index} follower={follower} />
+              <Friend key={index} follower={follower} />
             ))}
-          </S.ConnectionsWrapper>
+          </S.FriendsWrapper>
 
           {recommendList?.followInfoResDto.length == 0 && (
             <S.NoResultWrapper>

diff --git 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 → src/types/FriendType.ts b/src/types/ConnectionType.ts → src/types/FriendType.ts