기본 구조 컴포넌트 추가 및 적용

+import React from 'react';
+import { Footer } from './Footer';
+
+export const Main: React.FC = ({ children }) => {
+  return (
+    <div className="flex flex-col items-center w-screen h-screen">
+      {children}
+      <Footer/>
+    </div>
+  );
+}
\ No newline at end of file

 import React, { useContext, useState } from 'react';
 import React, { useContext, useState } from 'react';
 import { RouteComponentProps } from 'react-router';
 import { RouteComponentProps } from 'react-router';
-import { Footer } from '../components/common/Footer';
+import { Main } from '../components/common/Main';
 import { MessageResponse, MessageType } from '../components/common/types';
 import { MessageResponse, MessageType } from '../components/common/types';
 import SocketContext from '../contexts/SocketContext';
 import SocketContext from '../contexts/SocketContext';
 
 
@@ -19,7 +19,7 @@ export const Login: React.FC<RouteComponentProps> = ({ history }) => {
     }
     }
 
 
     return (
     return (
-      <div className="flex flex-col items-center w-screen h-screen">
+      <Main>
         <div className="mt-auto flex flex-col items-center">
         <div className="mt-auto flex flex-col items-center">
           <img className="m-7" src="./logo192.png"/>
           <img className="m-7" src="./logo192.png"/>
           <div>
           <div>
@@ -40,7 +40,6 @@ export const Login: React.FC<RouteComponentProps> = ({ history }) => {
                     onClick={() => login()}>Login</button>
                     onClick={() => login()}>Login</button>
           </div>
           </div>
         </div>
         </div>
-        <Footer/>
-      </div>
+      </Main>
     )
     )
 }
 }

 import React, { useContext, useEffect, useState } from 'react';
 import React, { useContext, useEffect, useState } from 'react';
 import { RouteComponentProps } from 'react-router';
 import { RouteComponentProps } from 'react-router';
-import { Footer } from '../components/common/Footer';
+import { Main } from '../components/common/Main';
 import { MessageResponse, MessageType } from '../components/common/types';
 import { MessageResponse, MessageType } from '../components/common/types';
 import { RoomInfo } from '../components/rooms/RoomInfo';
 import { RoomInfo } from '../components/rooms/RoomInfo';
 import { Room } from '../components/rooms/types';
 import { Room } from '../components/rooms/types';
@@ -42,11 +42,10 @@ export const Rooms: React.FC<RouteComponentProps> = ({ history }) => {
   // useEffect(refreshRooms, []);
   // useEffect(refreshRooms, []);
 
 
   return (
   return (
-    <div className='flex flex-col items-center w-screen h-screen'>
+    <Main>
       <div className='mt-auto w-screen flex flex-col items-center'>
       <div className='mt-auto w-screen flex flex-col items-center'>
         {rooms.map((room) => (<RoomInfo key={room.uuid} room={room} />))}
         {rooms.map((room) => (<RoomInfo key={room.uuid} room={room} />))}
       </div>
       </div>
-      <Footer />
-    </div>
+    </Main>
   )
   )
 }
 }