diff --git a/src/pages/play/mode/Matching.tsx b/src/pages/play/mode/Matching.tsx
index dddd8f59..c530c99f 100644
--- a/src/pages/play/mode/Matching.tsx
+++ b/src/pages/play/mode/Matching.tsx
@@ -1,5 +1,6 @@
 import { useNavigate } from 'react-router-dom';
 
+import { deleteMatching } from './api';
 import * as styles from './index.css';
 
 import ColoredButton from '@/components/button/ColoredButton';
@@ -7,8 +8,6 @@ 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';
 
diff --git a/src/pages/play/mode/MatchingText.tsx b/src/pages/play/mode/MatchingText.tsx
index 92a4bae6..f3bda918 100644
--- a/src/pages/play/mode/MatchingText.tsx
+++ b/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);
diff --git a/src/pages/play/mode/api.ts b/src/pages/play/mode/api.ts
new file mode 100644
index 00000000..b7ca3b17
--- /dev/null
+++ b/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;
+    });
+};
diff --git a/src/pages/play/mode/constants.ts b/src/pages/play/mode/constants.ts
deleted file mode 100644
index 4a601d96..00000000
--- a/src/pages/play/mode/constants.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import type { colorType } from '@/components/button/types';
-
-export const FRIENDLY = {
-  icon: '/images/ui/icon/button/icon-button-modemulti-h50w50.png',
-  label: '친선전',
-  color: 'pink' as colorType,
-};
-
-export const RANKING = {
-  icon: '/images/ui/icon/button/icon-button-moderank-h50w50.png',
-  label: '랭킹전',
-  color: 'yellow' as colorType,
-};
-
-export const MATCHING_MESSAGES = ['매칭중', '매칭중.', '매칭중..', '매칭중...'];
diff --git a/src/pages/play/mode/index.tsx b/src/pages/play/mode/index.tsx
index 6cd53698..ed33f38d 100644
--- a/src/pages/play/mode/index.tsx
+++ b/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}>
diff --git a/src/services/matching.ts b/src/services/matching.ts
deleted file mode 100644
index 1451cbf3..00000000
--- a/src/services/matching.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-import { api } from '@/shared/api';
-
-export const getMatching = async () => {
-  return (
-    api
-      .get<string>(true, '/play/ranking')
-      .then((response) => {
-        // console.log('매칭 요청 성공');
-        return response.status === 200;
-      })
-      // eslint-disable-next-line
-      .catch((error) => {
-        console.error(error);
-        return false;
-      })
-  );
-};
-
-export const deleteMatching = async () => {
-  return (
-    api
-      .delete<string>(true, '/play/ranking')
-      .then((response) => {
-        // console.log('매칭 취소 요청 성공');
-        return response.status === 200;
-      })
-      // eslint-disable-next-line
-      .catch((error) => {
-        console.error(error);
-        return false;
-      })
-  );
-};