diff --git a/components/modal/tournament/TournamentRegistryModal.tsx b/components/modal/tournament/TournamentRegistryModal.tsx
index cfc322184..cf3d0a8a1 100644
--- a/components/modal/tournament/TournamentRegistryModal.tsx
+++ b/components/modal/tournament/TournamentRegistryModal.tsx
@@ -4,8 +4,8 @@ import { useSetRecoilState } from 'recoil';
 import { MdPeopleAlt } from 'react-icons/md';
 import { QUILL_FORMATS } from 'types/quillTypes';
 import { TournamentInfo } from 'types/tournamentTypes';
-import { dateToString } from 'utils/handleTime';
-import { mockInstance } from 'utils/mockAxios';
+import { instance } from 'utils/axios';
+import { dateToKRLocaleTimeString } from 'utils/handleTime';
 import { errorState } from 'utils/recoil/error';
 import { modalState } from 'utils/recoil/modal';
 import { toastState } from 'utils/recoil/toast';
@@ -34,53 +34,48 @@ export default function TournamentRegistryModal({
   const setSnackbar = useSetRecoilState(toastState);
   const setModal = useSetRecoilState(modalState);
   const setError = useSetRecoilState(errorState);
-  const [registState, setRegistState] = useState<boolean | null>(true);
+  const [registState, setRegistState] = useState<string>('LOADING');
   const [openDate, setOpenDate] = useState<string>('미정');
   const [loading, setLoading] = useState<boolean>(false);
   const [playerCount, setPlayerCount] = useState<number>(player_cnt);
 
   const registTournament = useCallback(() => {
     setLoading(true);
-    return mockInstance
-      .post(`tournament/${tournamentId}/users?users=1`)
+    return instance
+      .post(`/pingpong/tournaments/${tournamentId}/users`)
       .then((res) => {
-        console.log(res.data.status);
-        if (res.data.status) {
-          setSnackbar({
-            toastName: `토너먼트 등록 신청`,
-            severity: 'success',
-            message: `토너먼트 신청이 완료됐습니다`,
-            clicked: true,
-          });
-        }
-        if (res.data.status == false) {
-          setSnackbar({
-            toastName: `토너먼트 등록취소 신청`,
-            severity: 'success',
-            message: `토너먼트 신청이 취소됐습니다`,
-            clicked: true,
-          });
-        }
-
-        setRegistState(res.data.status);
+        alert('토너먼트 신청이 완료됐습니다');
+        setModal({ modalName: null });
+        return res.data.status;
+      })
+      .catch((error) => {
+        alert('토너먼트 신청 중 에러가 발생했습니다.');
         setLoading(false);
+      });
+  }, []);
+
+  const unRegistTournament = useCallback(() => {
+    setLoading(true);
+    return instance
+      .delete(`/pingpong/tournaments/${tournamentId}/users`)
+      .then((res) => {
+        if (registState === 'WAIT') {
+          alert('토너먼트 대기가 취소 되었습니다');
+        } else {
+          alert('토너먼트 등록이 취소 되었습니다');
+        }
         setModal({ modalName: null });
         return res.data.status;
       })
       .catch((error) => {
-        setSnackbar({
-          toastName: `토너먼트 등록 신청`,
-          severity: 'error',
-          message: `토너먼트 신청 중 에러가 발생했습니다`,
-          clicked: true,
-        });
+        alert('토너먼트 등록취소 중 에러가 발생했습니다');
         setLoading(false);
       });
   }, []);
 
   const getStatus = useCallback(() => {
-    return mockInstance
-      .get(`tournament/${tournamentId}/users?users=1`)
+    return instance
+      .get(`/pingpong/tournaments/${tournamentId}/users`)
       .then((res) => {
         setRegistState(res.data.status);
         return res.data.status;
@@ -93,13 +88,32 @@ export default function TournamentRegistryModal({
   useEffect(() => {
     getStatus();
     const date = new Date(startTime);
-    setOpenDate(dateToString(date));
+    setOpenDate(dateToKRLocaleTimeString(date));
   }, []);
 
   const closeModalButtonHandler = () => {
     setModal({ modalName: null });
   };
 
+  const buttonContents: Record<string, string> = {
+    LOADING: '로딩중...',
+    BEFORE: '등록',
+    WAIT: '대기 취소',
+    PLAYER: '등록 취소',
+  };
+
+  const buttonAction: Record<string, any> = {
+    BEFORE: registTournament,
+    WAIT: unRegistTournament,
+    PLAYER: unRegistTournament,
+    LOADING: () => {
+      console.log('loading..');
+    },
+  };
+
+  const buttonContent = buttonContents[registState];
+  const buttonHandler = buttonAction[registState];
+
   return (
     <div className={styles.container}>
       <div className={styles.closeButtonContainer}>
@@ -129,13 +143,11 @@ export default function TournamentRegistryModal({
       <div>
         <ModalButtonContainer>
           <ModalButton
-            onClick={registTournament}
+            onClick={buttonHandler}
             value={
-              registState === true
-                ? '등록 취소'
-                : player_cnt === 8
+              player_cnt === 8 && registState === 'BEFORE'
                 ? '대기 등록'
-                : '등록'
+                : buttonContent
             }
             style={'positive'}
             isLoading={loading}
diff --git a/pages/tournament.tsx b/pages/tournament.tsx
index e1b372147..ebdeea955 100644
--- a/pages/tournament.tsx
+++ b/pages/tournament.tsx
@@ -1,23 +1,17 @@
-import { start } from 'repl';
 import { Match } from '@g-loot/react-tournament-brackets/dist/src/types';
 import React, { useState, useEffect, useCallback, useRef } from 'react';
 import { useQuery } from 'react-query';
 import { useSetRecoilState } from 'recoil';
 import { TournamentData, TournamentGame } from 'types/tournamentTypes';
+import { instance } from 'utils/axios';
 import { convertTournamentGamesToBracketMatchs } from 'utils/handleTournamentGame';
-import { mockInstance } from 'utils/mockAxios';
 import { errorState } from 'utils/recoil/error';
-import { clickedTournamentState } from 'utils/recoil/tournament';
 import TournamentBraket from 'components/tournament/TournamentBraket';
 import TournamentCard from 'components/tournament/TournamentCard';
 import styles from 'styles/tournament/TournamentContainer.module.scss';
 
 export default function Tournament() {
   const setError = useSetRecoilState(errorState);
-  const sethighLightUser = useSetRecoilState(clickedTournamentState);
-  const [waitTournament, setWaitTournament] = useState<TournamentData | null>(
-    null
-  );
   const [openTournamentId, setOpenTournamentId] = useState<number>(0);
   const [openTournament, setOpenTournament] = useState<Match[]>([]);
   const [containerSize, setContainerSize] = useState({ width: 0, height: 0 });
@@ -26,26 +20,42 @@ export default function Tournament() {
   const openInfo = useQuery<TournamentData>(
     'openTorunamentInfo',
     () =>
-      mockInstance.get('tournament?page=1&status=BEFORE').then((res) => {
-        setOpenTournamentId(res.data.tournamentId);
-        return res.data.tournamentId;
-      }),
-    { retry: 1, staleTime: 60000 /* 60초 */ }
+      instance
+        .get('/pingpong/tournaments?size=20&page=1&status=LIVE')
+        .then((res) => {
+          console.log(res.data.tournaments[0].tournamentId);
+          setOpenTournamentId(res.data.tournaments[0].tournamentId);
+          return res.data;
+        }),
+    {
+      onError: (error) => {
+        setError('JHH02');
+      },
+      retry: 1,
+      staleTime: 60000 /* 60초 */,
+    }
   );
 
-  const fetchWaitTournamentData = (page: number) => {
-    return mockInstance
-      .get(`tournament?page=${page}&status=BEFORE&size=4`)
-      .then((res) => {
-        return res.data;
-      });
-  };
+  const waitInfo = useQuery<TournamentData>(
+    'waitTournamentInfo',
+    () =>
+      instance
+        .get(`/pingpong/tournaments?size=20&page=1&status=BEFORE`)
+        .then((res) => {
+          return res.data;
+        }),
+    {
+      onError: (error) => {
+        setError('JHH02');
+      },
+    }
+  );
 
   const fetchTournamentGames = useCallback(async () => {
     console.log('Fetching more data...');
     try {
-      const res = await mockInstance.get(
-        `/tournament/${openTournamentId}/games`
+      const res = await instance.get(
+        `pingpong/tournaments/${openTournamentId}/games`
       );
       const data: TournamentGame[] = res.data.games;
       const bracketMatchs = convertTournamentGamesToBracketMatchs(data);
@@ -54,40 +64,30 @@ export default function Tournament() {
     } catch (error) {
       console.error('Error fetching data:', error);
     }
-  }, [openTournament]);
-
-  useEffect(() => {
-    fetchWaitTournamentData(1)
-      .then((data) => {
-        setWaitTournament(data);
-      })
-      .catch(() => {
-        setError('JHH02');
-      });
-    fetchTournamentGames();
-  }, []);
+  }, [openTournamentId]);
 
   useEffect(() => {
+    if (openTournamentId !== undefined) fetchTournamentGames();
     if (containerRef.current) {
       const width = containerRef.current.clientWidth;
       const height = containerRef.current.clientHeight;
       setContainerSize({ width, height });
     }
-  }, []);
+  }, [openTournamentId]);
 
   return (
     <div className={styles.pageWrap}>
       <h1 className={styles.title}>Tournament</h1>
       <div className={styles.tournamentContainer}>
         <div className={styles.tournamentText}> 예정된 토너먼트 </div>
-        {waitTournament?.tournaments.map((tournament) => (
+        {waitInfo.data?.tournaments.map((tournament) => (
           <div className={styles.cardContainer} key={tournament.tournamentId}>
             <TournamentCard key={tournament.tournamentId} {...tournament} />
           </div>
         ))}
         <div className={styles.tournamentText}> 진행중인 토너먼트 </div>
         <div className={styles.openTournamentBox} ref={containerRef}>
-          {openInfo.data && openInfo.data.tournaments.length === 0 ? (
+          {openInfo.data && openInfo.data.tournaments?.length === 0 ? (
             <div className={styles.tournamentText}>
               진행중인 토너먼트가 없습니다
             </div>