Mode 페이지 리팩토링

src/pages/play/mode/Matching.tsx

@@ -1,14 +1,13 @@
 import { useNavigate } from 'react-router-dom';
 
+import { deleteMatching } from './api';
 import * as styles from './index.css';
 
 import ColoredButton from '@/components/button/ColoredButton';
 import RoundCornerImageBox from '@/components/image-box';
 
 import { MatchingText } from '@/pages/play/mode/MatchingText';
 
-import { deleteMatching } from '@/services/matching';
-
 import { useWebSocket } from '@/features/websocket';
 import { ROUTE } from '@/shared/constants';
 

src/pages/play/mode/MatchingText.tsx

@@ -1,12 +1,13 @@
 import { useEffect, useRef, useState } from 'react';
 
-import * as constants from '@/pages/play/mode/constants';
 import * as styles from '@/pages/play/mode/index.css';
 
 interface Props {
   isModalOpen: boolean;
 }
 
+const MATCHING_MESSAGES = ['매칭중', '매칭중.', '매칭중..', '매칭중...'];
+
 export const MatchingText = ({ isModalOpen }: Props) => {
   const [matchingMessage, setMatchingMessage] = useState<string>();
   const interval = useRef<ReturnType<typeof setInterval>>();
@@ -17,9 +18,7 @@ export const MatchingText = ({ isModalOpen }: Props) => {
 
       interval.current = setInterval(() => {
         setMatchingMessage(
-          constants.MATCHING_MESSAGES[
-            messageIndex % constants.MATCHING_MESSAGES.length
-          ],
+          MATCHING_MESSAGES[messageIndex % MATCHING_MESSAGES.length],
         );
         messageIndex++;
       }, 500);

src/pages/play/mode/api.ts

@@ -0,0 +1,25 @@
+import { client } from '@/shared/api';
+
+export const getMatching = async () => {
+  return client
+    .get<string>('/play/ranking')
+    .then((response) => {
+      return response.status === 200;
+    })
+    .catch((error) => {
+      console.error(error);
+      return false;
+    });
+};
+
+export const deleteMatching = async () => {
+  return client
+    .delete<string>('/play/ranking')
+    .then((response) => {
+      return response.status === 200;
+    })
+    .catch((error) => {
+      console.error(error);
+      return false;
+    });
+};

src/pages/play/mode/index.tsx

@@ -1,18 +1,14 @@
 import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
-import * as constants from './constants';
+import { getMatching } from './api';
 import * as styles from './index.css';
+import Matching from './Matching';
 
 import ColoredIconButton from '@/components/button/ColoredIconButton';
 import Modal, { useModal } from '@/components/modal';
 import RankingItemBox from '@/components/ranking';
 
-
-import Matching from '@/pages/play/mode/Matching';
-
-import { getMatching } from '@/services/matching';
-
 import { useUserInfo } from '@/models/user';
 import { ROUTE } from '@/shared/constants';
 
@@ -42,19 +38,19 @@ const Mode = () => {
     <>
       <div className={styles.wrapper}>
         <ColoredIconButton
-          icon={constants.FRIENDLY.icon}
+          icon='/images/ui/icon/button/icon-button-modemulti-h50w50.png'
           size='xlarge'
-          text={constants.FRIENDLY.label}
-          color={constants.FRIENDLY.color}
+          text='친선전'
+          color='pink'
           onClick={() => {
             navigate(`${ROUTE.finder}`);
           }}
         />
         <ColoredIconButton
-          icon={constants.RANKING.icon}
+          icon='/images/ui/icon/button/icon-button-moderank-h50w50.png'
           size='xlarge'
-          text={constants.RANKING.label}
-          color={constants.RANKING.color}
+          text='랭킹전'
+          color='yellow'
           onClick={startMatching}
         />
         <div className={styles.myRank}>