diff --git a/src/pages/NotFound.tsx b/src/pages/NotFound.tsx new file mode 100644 index 0000000000000000000000000000000000000000..fe6a99ddfc895b4b2410acc74436fc31940c3caf --- /dev/null +++ b/src/pages/NotFound.tsx @@ -0,0 +1,30 @@ +import { Link } from 'react-router'; +import { House } from 'lucide-react'; +import { Card, CardHeader, CardTitle, CardDescription, CardContent } from '@/components/ui/card'; +import { Button } from '@/components/ui/button'; + +export default function NotFound() { + return ( + <div className="flex w-full justify-center p-6 md:p-10"> + <Card className="w-full max-w-md text-center"> + <CardHeader className="flex-row"> + <div className="flex flex-col space-y-1.5 w-full"> + <CardTitle className="text-xl">페이지를 찾을 수 없습니다</CardTitle> + <CardDescription>404 Not Found</CardDescription> + </div> + </CardHeader> + <CardContent> + <p className="text-sm text-muted-foreground"> + 페이지의 주소가 잘못 입력되었거나, 주소의 변경 혹은 삭제로 인해 사용하실 수 없습니다. 입력하신 주소가 + 정확한지 다시 한번 확인해주세요. + </p> + <Link to="/"> + <Button className="mt-6"> + <House className="mr-2 h-4 w-4" /> 홈으로 + </Button> + </Link> + </CardContent> + </Card> + </div> + ); +} diff --git a/src/routes.tsx b/src/routes.tsx index a8014cf7bb87f56bad0809b85ed686ccd2e806fd..047e98fa5470192fd9facb0403ecc914676d0116 100644 --- a/src/routes.tsx +++ b/src/routes.tsx @@ -1,5 +1,6 @@ import { Routes, Route } from 'react-router'; import Root from '@/pages/Root'; +import NotFound from '@/pages/NotFound'; import Home from '@/pages/Home'; import Login from '@/pages/Login'; import RoutingList from '@/pages/routing/List'; @@ -13,6 +14,7 @@ export default function AppRoutes() { <Route path="routing"> <Route index element={<RoutingList />} /> </Route> + <Route path="*" element={<NotFound />} /> </Route> </Routes> );