Commit bce2d952 authored by Kim, Subin's avatar Kim, Subin
Browse files

PrivateRouter & ErrorPage 만들었지만 사용불가..

parent ca4e4fc5
...@@ -36,16 +36,15 @@ function App() { ...@@ -36,16 +36,15 @@ function App() {
<Route path="/movielist" component={MovieListPage} /> <Route path="/movielist" component={MovieListPage} />
<Route path="/movie/:movieId" component={MoviePage} /> <Route path="/movie/:movieId" component={MoviePage} />
<Route path="/mypage" component={MyPage} /> <Route path="/mypage" component={MyPage} />
<Route path="/guest" component={GuestPage}/> <Route path="/guest" component={GuestPage} />
<Route path="/ticket/seat" component={TicketingSeatPage} /> <Route path="/ticket/seat" component={TicketingSeatPage} />
<Route path="/ticket" component={TicketingPage} /> <Route path="/ticket" component={TicketingPage} />
<Route path="/payment" component={Payment} /> <Route path="/payment" component={Payment} />
<Route path="/paymentcomplete" component={PaymentCompletePage} /> <Route path="/paymentcomplete" component={PaymentCompletePage} />
<Route path="/theater" component={TheaterPage}/> <Route path="/theater" component={TheaterPage} />
<Route path="/search" component={SearchPage} /> <Route path="/search" component={SearchPage} />
</Switch> </Switch>
</div> </div>
</Switch> </Switch>
</Router> </Router>
</AuthProvider> </AuthProvider>
......
import { Redirect, Route } from "react-router-dom";
import authApi from "../apis/auth.api.js";
import { useAuth } from "../context/auth_context";
import ErrorPage from "../pages/ErrorPage";
const PrivateRoute = ({ component: Component, ...rest }) => {
return (
<Route
{...rest}
render={(props) => {
if (user.id) {
if (rest.role) {
if (rest.role === user.role) {
return <Component {...props} />;
} else {
return <ErrorPage />
}
} else {
return <Component {...props} />
}
} else {
alert("로그인이 필요한 기능입니다.")
return <Redirect to="/login" />;
}
}}
/>
);
};
export default PrivateRoute
\ No newline at end of file
const ErrorPage = () => {
return (
<div className="bg-white" id="notfound">
<div className="notfound">
<div className="notfound-404" style={{ backgroundImage: `url(/images/emoji.png)` }}></div>
<h1>404</h1>
<h2>Oops! Page Not Be Found</h2>
<p>Sorry but the page you are looking for does not exist, have been removed. name changed or is temporarily unavailable</p>
<a href="/">Back to homepage</a>
</div>
</div>
)
}
export default ErrorPage
\ No newline at end of file
...@@ -80,3 +80,94 @@ $theme-colors: map-merge($theme-colors, $custom-colors); ...@@ -80,3 +80,94 @@ $theme-colors: map-merge($theme-colors, $custom-colors);
.page-link:hover, .page-link:focus { .page-link:hover, .page-link:focus {
background-color: #fff; background-color: #fff;
} }
#notfound {
position: relative;
height: 100vh;
}
#notfound .notfound {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.notfound {
max-width: 560px;
width: 100%;
padding-left: 160px;
line-height: 1.1;
}
.notfound .notfound-404 {
position: absolute;
left: 0;
top: 0;
display: inline-block;
width: 140px;
height: 140px;
background-size: cover;
}
.notfound .notfound-404:before {
content: '';
position: absolute;
width: 100%;
height: 100%;
-webkit-transform: scale(2.4);
-ms-transform: scale(2.4);
transform: scale(2.4);
border-radius: 50%;
background-color: #f2f5f8;
z-index: -1;
}
.notfound h1 {
font-family: 'Nunito', sans-serif;
font-size: 65px;
font-weight: 700;
margin-top: 0px;
margin-bottom: 10px;
color: #151723;
text-transform: uppercase;
}
.notfound h2 {
font-family: 'Nunito', sans-serif;
font-size: 21px;
font-weight: 400;
margin: 0;
text-transform: uppercase;
color: #151723;
}
.notfound p {
font-family: 'Nunito', sans-serif;
color: #999fa5;
font-weight: 400;
}
.notfound a {
font-family: 'Nunito', sans-serif;
display: inline-block;
font-weight: 700;
border-radius: 40px;
text-decoration: none;
color: #388dbc;
}
@media screen and (max-width: 767px) {
.notfound .notfound-404 {
width: 110px;
height: 110px;
}
.notfound {
padding-left: 15px;
padding-right: 15px;
padding-top: 110px;
}
}
\ No newline at end of file
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment