후에 폴더 구조를 더 바꿀 예정
App.js 로 라우팅을 해줌
필요하면 이중라우터도 사용할 예정
터미널에
npm install react-router-dom
입력
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { BrowserRouter } from 'react-router-dom';
import reportWebVitals from './reportWebVitals';
ReactDOM.render(
<BrowserRouter>
<App />
</BrowserRouter>,
document.getElementById('root')
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
BrowserRouter 적용
import './App.css';
import { useState } from 'react';
import { Route } from 'react-router-dom';
import Calendar from './page/calendar/calendar'
const App = () => {
return (
<div className="App">
<div className="ham">
<h2>사이드바</h2>
</div>
<Route path="/" component={Calendar}></Route>
</div>
);
}
export default App;
Route로 Calendar를 표시해줌
라우터를 사용해서 여러 페이지를 구현하기 위해서 사용함
사이드바 메뉴를 만들어서 모든 페이지에서 보여줄려고 하는데
반복적으로 모든페이지에서 렌더링 할 필요없이 계속 보여줄려고함
색만 좀 카카오 색으로 바꿔봤다..
ham.scss
.ham{
width: 10%;
background-color: #f9e000;
margin-top: 2%;
margin-bottom: 2%;
border-radius: 0px 20px 20px 0px;
}
calendar.scss
html, body {
height: 100%;
}
.App {
height:100vh;
width:100vw;
font-size: 1.5vh;
}
.ham{
cursor: pointer;
}
.calendar{
height:100vh;
width:100vw;
font-size: 1.5vh;
}
.calendar_head{
display: flex;
justify-content: center;
height: 5%;
align-items: center;
.calendar_button{
cursor: pointer;
margin:5px;
margin-right: 10px;
margin-left: 10px;
color: whitesmoke;
background: #f9e000;
padding: .375rem .75rem;
border: 1px solid #f9e000;
border-radius: 5px;
}
.calendar_head_text{
font-size: 2vw;
}
}
.calendar_body{
display:flex;
width:100%;
height:90%;
.calendar_body_box{
display:flex;
flex-direction: column;
width: 100%;
height: 100%;
.calendar_body_head{
display: flex;
.calendar_body_head_days{
border:2px solid #f9e000;
border-radius: 5px;
margin: 1px;
padding :1px;
width: 100%;
font-size:2vw;
}
}
.calendar_body_line{
display:flex;
flex-direction: row;
width: 100%;
height: 100%;
margin-bottom: 10px;
.calendar_body_days{
display:flex;
flex-direction: column;
border:2px solid #f9e000;
border-radius: 5px;
margin: 5px;
width: 100%;
height:100%;
text-align: initial;
font-size : 2vw;
padding: 1px;
.calendar_body_days_event{
font-size: 13px;
background: #f9e000;
color: white;
border-radius: 5px;
padding: 2px;
margin: 1px;
}
.calendar_body_day{
display: flex;
justify-content: flex-start;
align-items: flex-start;
}
}
}
}
}