Overnap

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

1 +import React from 'react';
2 +import { Footer } from './Footer';
3 +
4 +export const Main: React.FC = ({ children }) => {
5 + return (
6 + <div className="flex flex-col items-center w-screen h-screen">
7 + {children}
8 + <Footer/>
9 + </div>
10 + );
11 +}
...\ No newline at end of file ...\ No newline at end of file
1 import React, { useContext, useState } from 'react'; 1 import React, { useContext, useState } from 'react';
2 import { RouteComponentProps } from 'react-router'; 2 import { RouteComponentProps } from 'react-router';
3 -import { Footer } from '../components/common/Footer'; 3 +import { Main } from '../components/common/Main';
4 import { MessageResponse, MessageType } from '../components/common/types'; 4 import { MessageResponse, MessageType } from '../components/common/types';
5 import SocketContext from '../contexts/SocketContext'; 5 import SocketContext from '../contexts/SocketContext';
6 6
...@@ -19,7 +19,7 @@ export const Login: React.FC<RouteComponentProps> = ({ history }) => { ...@@ -19,7 +19,7 @@ export const Login: React.FC<RouteComponentProps> = ({ history }) => {
19 } 19 }
20 20
21 return ( 21 return (
22 - <div className="flex flex-col items-center w-screen h-screen"> 22 + <Main>
23 <div className="mt-auto flex flex-col items-center"> 23 <div className="mt-auto flex flex-col items-center">
24 <img className="m-7" src="./logo192.png"/> 24 <img className="m-7" src="./logo192.png"/>
25 <div> 25 <div>
...@@ -40,7 +40,6 @@ export const Login: React.FC<RouteComponentProps> = ({ history }) => { ...@@ -40,7 +40,6 @@ export const Login: React.FC<RouteComponentProps> = ({ history }) => {
40 onClick={() => login()}>Login</button> 40 onClick={() => login()}>Login</button>
41 </div> 41 </div>
42 </div> 42 </div>
43 - <Footer/> 43 + </Main>
44 - </div>
45 ) 44 )
46 } 45 }
......
1 import React, { useContext, useEffect, useState } from 'react'; 1 import React, { useContext, useEffect, useState } from 'react';
2 import { RouteComponentProps } from 'react-router'; 2 import { RouteComponentProps } from 'react-router';
3 -import { Footer } from '../components/common/Footer'; 3 +import { Main } from '../components/common/Main';
4 import { MessageResponse, MessageType } from '../components/common/types'; 4 import { MessageResponse, MessageType } from '../components/common/types';
5 import { RoomInfo } from '../components/rooms/RoomInfo'; 5 import { RoomInfo } from '../components/rooms/RoomInfo';
6 import { Room } from '../components/rooms/types'; 6 import { Room } from '../components/rooms/types';
...@@ -42,11 +42,10 @@ export const Rooms: React.FC<RouteComponentProps> = ({ history }) => { ...@@ -42,11 +42,10 @@ export const Rooms: React.FC<RouteComponentProps> = ({ history }) => {
42 // useEffect(refreshRooms, []); 42 // useEffect(refreshRooms, []);
43 43
44 return ( 44 return (
45 - <div className='flex flex-col items-center w-screen h-screen'> 45 + <Main>
46 <div className='mt-auto w-screen flex flex-col items-center'> 46 <div className='mt-auto w-screen flex flex-col items-center'>
47 {rooms.map((room) => (<RoomInfo key={room.uuid} room={room} />))} 47 {rooms.map((room) => (<RoomInfo key={room.uuid} room={room} />))}
48 </div> 48 </div>
49 - <Footer /> 49 + </Main>
50 - </div>
51 ) 50 )
52 } 51 }
......