chore: 폴더 구조 변경

Co-authored-by: Chan Lee <[email protected]>
Co-authored-by: Minjae Kim <[email protected]>
Co-authored-by: 이진욱 <[email protected]>

.prettierrc

@@ -20,6 +20,7 @@
     "^@contexts/(.*)$",
     "^@type/(.*)$",
     "^@consts/(.*)$",
+    "^@constants/(.*)$",
     "^@utils/(.*)$",
     "^@assets/(.*)$",
     "^@tests/(.*)$",

src/ConnectSSE.tsx

@@ -47,7 +47,6 @@ const invalidateCrewQueries = (
   queryClient: QueryClient,
   newCrewAlarm: CrewAlarm
 ) => {
-
   if (newCrewAlarm.crewAlarmMessage === '크루 가입 수락을 기다리고 있어요') {
     queryClient.invalidateQueries({
       queryKey: ['crew-members', newCrewAlarm.crewId, '대기'],

src/api/axiosInstance.ts

@@ -1,6 +1,6 @@
 import axios from 'axios';
 
-import { BASE_URL } from '@consts/network';
+import { BASE_URL } from '@constants/network';
 
 import { handleAuthError, setAuthorization } from './interceptors';
 

src/components/Header/Badge.tsx

@@ -1,4 +1,4 @@
-import { useAlarmsUnreadQuery } from '@hooks/queries/useAlarmsUnreadQuery';
+import { useAlarmsUnreadQuery } from '@hooks/alarms/useAlarmsUnreadQuery';
 
 import { BadgeIcon } from './Header.style';
 

src/components/Header/Header.tsx

@@ -8,7 +8,7 @@ import { theme } from '@styles/theme';
 
 import { useLoginInfoStore } from '@stores/loginInfo.store';
 
-import { PATH_NAME } from '@consts/pathName';
+import { PATH_NAME } from '@constants/pathName';
 
 import bellIcon from '@assets/bell.svg';
 import leftArrowIcon from '@assets/leftArrow.svg';

src/components/MatchItem/MatchItem.tsx

@@ -5,8 +5,8 @@ import { Text } from '@components/shared/Text';
 
 import { theme } from '@styles/theme';
 
-import { PATH_NAME } from '@consts/pathName';
-import { WEEKDAY } from '@consts/weekday';
+import { PATH_NAME } from '@constants/pathName';
+import { WEEKDAY } from '@constants/weekday';
 
 import { isGameEnded } from '@utils/domain';
 

src/components/Participation/Participation.tsx

@@ -10,7 +10,7 @@ import { theme } from '@styles/theme';
 
 import { Member } from '@type/models';
 
-import { PATH_NAME } from '@consts/pathName';
+import { PATH_NAME } from '@constants/pathName';
 
 import { AllowCardGroup, InformText, Main } from './Participation.style';
 

src/hooks/queries/useAlarmsQuery.ts → src/hooks/alarms/useAlarmsQuery.ts

@@ -2,7 +2,7 @@ import { useSuspenseInfiniteQuery } from '@tanstack/react-query';
 
 import { getAlarms } from '@api/alarms/getAlarms';
 
-import { FETCH_SIZE } from '@consts/network';
+import { FETCH_SIZE } from '@constants/network';
 
 export const useAlarmsQuery = () => {
   return useSuspenseInfiniteQuery({

src/hooks/queries/useNearCrewListQuery.ts → src/hooks/crews/useNearCrewListQuery.ts

@@ -4,7 +4,7 @@ import { getNearCrewList } from '@api/crews/getNearCrewList';
 
 import { GetNearCrewListRequest } from '@type/api/crews';
 
-import { FETCH_SIZE } from '@consts/network';
+import { FETCH_SIZE } from '@constants/network';
 
 export const useNearCrewListQuery = ({
   addressDepth1,

src/hooks/queries/useGamesQuery.ts → src/hooks/games/useGamesQuery.ts

@@ -2,7 +2,7 @@ import { useSuspenseInfiniteQuery } from '@tanstack/react-query';
 
 import { getGames } from '@api/games/getGames';
 
-import { FETCH_SIZE } from '@consts/network';
+import { FETCH_SIZE } from '@constants/network';
 
 /**
  * 장소 기준 => ?category=location&value=서울시+영등포구&page=1&size=10

src/hooks/useChatOnButtonClick.ts

@@ -13,17 +13,17 @@ import {
   enter,
   stompConfig,
   subscribe,
-} from '@pages/ChattingPage/stompApi';
+} from '@pages/ChattingPage/services/stompApi';
 
-import { useCreatePersonalChatRoomMutation } from '@hooks/mutations/useCreatePersonalChatRoomMutation';
+import { useCreatePersonalChatRoomMutation } from '@hooks/chats/useCreatePersonalChatRoomMutation';
 
 import { SendMessageRequest } from '@type/api/chat';
 import { Member } from '@type/models';
 import { ChatMessage } from '@type/models/ChatMessage';
 import { ChatRoom } from '@type/models/ChatRoom';
 
-import { CHAT_ROOM_TAB_TITLE } from '@consts/chat';
-import { PATH_NAME } from '@consts/pathName';
+import { CHAT_ROOM_TAB_TITLE } from '@constants/chat';
+import { PATH_NAME } from '@constants/pathName';
 
 type useChatOnButtonClickProps = {
   targetId: Member['id'];

src/hooks/usePositionToast.tsx

@@ -3,7 +3,7 @@ import toast from 'react-hot-toast';
 import { Flex } from '@components/shared/Flex';
 import { Text } from '@components/shared/Text';
 
-import { usePositionsQuery } from '@hooks/queries/usePositionsQuery';
+import { usePositionsQuery } from '@hooks/data/usePositionsQuery';
 
 import { Position } from '@type/models/Position';
 

src/pages/AllServicesPage/AllServicesPage.tsx

@@ -1,16 +1,9 @@
-import { useNavigate } from 'react-router-dom';
-
-import { axiosInstance } from '@api/axiosInstance';
-
 import { Header } from '@components/Header';
 import { Text } from '@components/shared/Text';
 
 import { theme } from '@styles/theme';
 
-import { useTokenStore } from '@stores/accessToken.store';
-import { useLoginInfoStore } from '@stores/loginInfo.store';
-
-import { PATH_NAME } from '@consts/pathName';
+import { PATH_NAME } from '@constants/pathName';
 
 import Ball from '@assets/ball.svg?react';
 import Chat from '@assets/chat.svg?react';
@@ -29,28 +22,11 @@ import {
   FieldContainer,
   Main,
 } from './AllServicesPage.style';
-import { MenuItem } from './MenuItem';
+import { MenuItem } from './components/MenuItem';
+import { useAllServicesPage } from './hooks/useAllServicesPage';
 
 export const AllServicesPage = () => {
-  const { loginInfo, setLoginInfo } = useLoginInfoStore();
-  const setAccessToken = useTokenStore((state) => state.setAccessToken);
-  const myId = loginInfo?.id ? String(loginInfo?.id) : null;
-
-  const navigate = useNavigate();
-
-  const moveToPage = (pathName: string) => {
-    navigate(pathName);
-  };
-
-  const logout = () => {
-    if (myId) {
-      axiosInstance.delete('/auth/logout').finally(() => {
-        setLoginInfo(null);
-        setAccessToken(null);
-        location.href = '/';
-      });
-    }
-  };
+  const { myId, moveToPage, logout } = useAllServicesPage();
 
   return (
     <AllServicesContainer>

src/pages/AllServicesPage/MenuItem.tsx → src/pages/AllServicesPage/components/MenuItem.tsx

@@ -2,7 +2,7 @@ import { ReactNode } from 'react';
 
 import { Text } from '@components/shared/Text';
 
-import { Item } from './AllServicesPage.style';
+import { Item } from '../AllServicesPage.style';
 
 type MenuItemProps = {
   icon: ReactNode;

src/pages/AllServicesPage/hooks/useAllServicesPage.ts

@@ -0,0 +1,35 @@
+import { useNavigate } from 'react-router-dom';
+
+import { axiosInstance } from '@api/axiosInstance';
+
+import { useTokenStore } from '@stores/accessToken.store';
+import { useLoginInfoStore } from '@stores/loginInfo.store';
+
+export const useAllServicesPage = () => {
+  const { loginInfo, setLoginInfo } = useLoginInfoStore();
+
+  const setAccessToken = useTokenStore((state) => state.setAccessToken);
+  const myId = loginInfo?.id ? String(loginInfo?.id) : null;
+
+  const navigate = useNavigate();
+
+  const moveToPage = (pathName: string) => {
+    navigate(pathName);
+  };
+
+  const logout = () => {
+    if (myId) {
+      axiosInstance.delete('/auth/logout').finally(() => {
+        setLoginInfo(null);
+        setAccessToken(null);
+        location.href = '/';
+      });
+    }
+  };
+
+  return {
+    moveToPage,
+    logout,
+    myId,
+  };
+};

src/pages/AuthErrorPage/AuthErrorPage.tsx

@@ -1,24 +1,10 @@
-import { useCallback, useLayoutEffect } from 'react';
-import { useNavigate } from 'react-router-dom';
-
-import { useQueryClient } from '@tanstack/react-query';
-
 import { Header } from '@components/Header';
 import { Navbar } from '@components/Navbar';
 import { Button } from '@components/shared/Button';
 import { Text } from '@components/shared/Text';
 
-import { usePathnameChange } from '@hooks/usePathnameChange';
-
-import { theme } from '@styles/theme';
-
-import { useTokenStore } from '@stores/accessToken.store';
-import { useLoginInfoStore } from '@stores/loginInfo.store';
-
 import { FallbackProps } from '@type/FallbackProps';
 
-import { PATH_NAME } from '@consts/pathName';
-
 import { isValidServerError } from '@utils/isValidServerError';
 
 import LOGO_SRC from '@assets/logoSvg.svg';
@@ -29,15 +15,8 @@ import {
   PageContent,
   PageWrapper,
 } from './AuthErrorPage.styles';
-
-const buttonProps = {
-  width: '100%',
-  backgroundColor: 'transparent',
-  fontWeight: 500,
-  height: '2rem',
-  textColor: theme.PALETTE.GRAY_400,
-  borderColor: theme.PALETTE.GRAY_400,
-} as const;
+import { AUTH_PAGE_BUTTON_PROPS } from './constants/buttonProps';
+import { useAuthErrorPage } from './hooks/useAuthErrorPage';
 
 export const AuthErrorPage = ({ error, resetErrorBoundary }: FallbackProps) => {
   if (!isValidServerError(error)) {
@@ -48,23 +27,8 @@ export const AuthErrorPage = ({ error, resetErrorBoundary }: FallbackProps) => {
     throw error;
   }
 
-  const setAceessToken = useTokenStore((state) => state.setAccessToken);
-  const setLoginInfo = useLoginInfoStore((state) => state.setLoginInfo);
-
-  const navigate = useNavigate();
-  const queryClient = useQueryClient();
-
-  const reset = useCallback(() => {
-    resetErrorBoundary();
-    queryClient.clear();
-  }, [queryClient, resetErrorBoundary]);
-
-  usePathnameChange(reset);
-
-  useLayoutEffect(() => {
-    setAceessToken(null);
-    setLoginInfo(null);
-  }, [setAceessToken, setLoginInfo]);
+  const { navigateToLoginPage, navigateToMainPage } =
+    useAuthErrorPage(resetErrorBoundary);
 
   return (
     <>
@@ -82,10 +46,10 @@ export const AuthErrorPage = ({ error, resetErrorBoundary }: FallbackProps) => {
             <Text size={40}>만료되었습니다</Text>
           </div>
           <ButtonContainer gap={16}>
-            <Button {...buttonProps} onClick={() => navigate(PATH_NAME.LOGIN)}>
+            <Button {...AUTH_PAGE_BUTTON_PROPS} onClick={navigateToLoginPage}>
               로그인하기
             </Button>
-            <Button {...buttonProps} onClick={() => navigate(PATH_NAME.MAIN)}>
+            <Button {...AUTH_PAGE_BUTTON_PROPS} onClick={navigateToMainPage}>
               홈으로
             </Button>
           </ButtonContainer>

src/pages/AuthErrorPage/constants/buttonProps.ts

@@ -0,0 +1,10 @@
+import { theme } from '@styles/theme';
+
+export const AUTH_PAGE_BUTTON_PROPS = {
+  width: '100%',
+  backgroundColor: 'transparent',
+  fontWeight: 500,
+  height: '2rem',
+  textColor: theme.PALETTE.GRAY_400,
+  borderColor: theme.PALETTE.GRAY_400,
+} as const;

src/pages/AuthErrorPage/hooks/useAuthErrorPage.ts

@@ -0,0 +1,40 @@
+import { useCallback } from 'react';
+import { useLayoutEffect } from 'react';
+import { FallbackProps } from 'react-error-boundary';
+import { useNavigate } from 'react-router-dom';
+
+import { useQueryClient } from '@tanstack/react-query';
+
+import { usePathnameChange } from '@hooks/usePathnameChange';
+
+import { useTokenStore } from '@stores/accessToken.store';
+import { useLoginInfoStore } from '@stores/loginInfo.store';
+
+import { PATH_NAME } from '@constants/pathName';
+
+export const useAuthErrorPage = (
+  resetErrorBoundary: FallbackProps['resetErrorBoundary']
+) => {
+  const setAccessToken = useTokenStore((state) => state.setAccessToken);
+  const setLoginInfo = useLoginInfoStore((state) => state.setLoginInfo);
+
+  const navigate = useNavigate();
+  const queryClient = useQueryClient();
+
+  const reset = useCallback(() => {
+    resetErrorBoundary();
+    queryClient.clear();
+  }, [queryClient, resetErrorBoundary]);
+
+  usePathnameChange(reset);
+
+  useLayoutEffect(() => {
+    setAccessToken(null);
+    setLoginInfo(null);
+  }, [setAccessToken, setLoginInfo]);
+
+  const navigateToLoginPage = () => navigate(PATH_NAME.LOGIN);
+  const navigateToMainPage = () => navigate(PATH_NAME.MAIN);
+
+  return { navigateToLoginPage, navigateToMainPage };
+};

src/pages/ChatRoomListPage/ChatRoomListPage.tsx

@@ -3,20 +3,19 @@ import { Suspense } from 'react';
 import { Header } from '@components/Header';
 import { Flex } from '@components/shared/Flex';
 
-import { useChatRoomTabStore } from '@stores/chatRoomTab.store.ts';
+import { CHAT_ROOM_TAB_TITLE } from '@constants/chat.ts';
 
-import { CHAT_ROOM_TAB_TITLE } from '@consts/chat.ts';
-
-import { ChatRoomList } from './ChatRoomList.tsx';
 import {
   Main,
   MessagePageContainer,
   TabBarButton,
 } from './ChatRoomListPage.style.ts';
-import { SkeletonChatRoomList } from './SkeletonChatRoomList.tsx';
+import { ChatRoomList } from './components/ChatRoomList.tsx';
+import { useChatRoomListPage } from './hooks/useChatRoomListPage.ts';
+import { ChatRoomListSkeleton } from './skeletons/ChatRoomListSkeleton.tsx';
 
 export const ChatRoomListPage = () => {
-  const { chatRoomTab, setChatRoomTab } = useChatRoomTabStore();
+  const { chatRoomTab, setChatRoomTab } = useChatRoomListPage();
 
   return (
     <MessagePageContainer>
@@ -33,7 +32,7 @@ export const ChatRoomListPage = () => {
             </TabBarButton>
           ))}
         </Flex>
-        <Suspense fallback={<SkeletonChatRoomList />}>
+        <Suspense fallback={<ChatRoomListSkeleton />}>
           <ChatRoomList />
         </Suspense>
       </Main>

src/pages/ChatRoomListPage/ChatRoomItem.tsx → src/pages/ChatRoomListPage/components/ChatRoomItem.tsx

@@ -4,7 +4,7 @@ import { theme } from '@styles/theme';
 
 import { ChatRoom } from '@type/models/ChatRoom.ts';
 
-import { CHAT_ROOM_TAB_TITLE } from '@consts/chat.ts';
+import { CHAT_ROOM_TAB_TITLE } from '@constants/chat.ts';
 
 import { convertUTCToKoreanTime } from '@utils/convertUTCToKoreanTime.ts';
 import { createdAtToString } from '@utils/createdAtToString.ts';
@@ -18,7 +18,7 @@ import {
   LastMessage,
   MessageContainer,
   Nickname,
-} from './ChatRoomListPage.style.ts';
+} from '../ChatRoomListPage.style.ts';
 
 type ChatRoomItemProps = {
   chatRoomItem: ChatRoom;