Routing 오류 해결

src/routes/+layout.svelte

@@ -1,24 +1,27 @@
 <script>
+	import {Router,Link,Route} from 'svelte-routing';
 	import Header from './Header.svelte';
-	import Page from './+page.svelte';
+	import MainPage from './+page.svelte';
+	import AboutPage from './about/+page.svelte';
+	import HelpPage from './help/+page.svelte';
 	import Footer from './Footer.svelte';
+	export let url = 'localhost';
 </script>
 
-<div class="app">
 <Header />
 
-	<main>
-		<Page />
-	</main>
-
+<Router url="{url}">
+	<Route path="about" component="{AboutPage}" />
+	<Route path="help" component="{HelpPage}" />
+	<Route path="/" component="{MainPage}" />
+</Router>
+<slot />
 <footer>
 	<Footer />
 </footer>
-</div>
 
 <style>
 	:global(body) {
 		background-color: #181818;
 	}
-
 </style>

src/routes/Footer.svelte

@@ -1,6 +1,7 @@
 <script>
 
 </script>
+
 <footer>
     <p>Made By Pma</p>
 </footer>
@@ -9,7 +10,7 @@
 <style>
     @import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css");
     footer{
-        margin-top: 8em;
+        margin-top: 32em;
         font-family: 'Pretendard Variable';
         font-weight: 400;
         color: #FFFFFF;

src/routes/about/+page.svelte

@@ -0,0 +1,20 @@
+<script>
+
+</script>
+
+<svelte:head>
+	<title>About</title>
+	<meta name="description" content="Svelte demo app" />
+</svelte:head>
+
+<h1>찾아보기</h1>
+<h2>뭘 찾아보지</h2>
+<style>
+	h1 , h2{
+		color: #e6e7eb;
+		text-align: center;
+	}
+	::selection{
+		background: rgb(168, 166, 166);
+	}
+</style>

src/routes/help/+page.svelte

@@ -0,0 +1,21 @@
+<script>
+
+</script>
+
+<svelte:head>
+	<title>도움</title>
+	<meta name="description" content="Svelte demo app" />
+</svelte:head>
+
+<h1>도움이 필요하신가요?</h1>
+<p>그렇군요</p>
+
+<style>
+	h1 , p{
+		color: #e6e7eb;
+		text-align: center;
+	}
+	::selection{
+		background: rgb(168, 166, 166);
+	}
+</style>

src/routes/styles.css

@@ -1,107 +0,0 @@
-@import '@fontsource/fira-mono';
-
-:root {
-	--font-body: Arial, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
-		Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
-	--font-mono: 'Fira Mono', monospace;
-	--color-bg-0: rgb(202, 216, 228);
-	--color-bg-1: hsl(209, 36%, 86%);
-	--color-bg-2: hsl(224, 44%, 95%);
-	--color-theme-1: #ff3e00;
-	--color-theme-2: #4075a6;
-	--color-text: rgba(0, 0, 0, 0.7);
-	--column-width: 42rem;
-	--column-margin-top: 4rem;
-	font-family: var(--font-body);
-	color: var(--color-text);
-}
-
-body {
-	min-height: 100vh;
-	margin: 0;
-	background-attachment: fixed;
-	background-color: var(--color-bg-1);
-	background-size: 100vw 100vh;
-	background-image: radial-gradient(
-			50% 50% at 50% 50%,
-			rgba(255, 255, 255, 0.75) 0%,
-			rgba(255, 255, 255, 0) 100%
-		),
-		linear-gradient(180deg, var(--color-bg-0) 0%, var(--color-bg-1) 15%, var(--color-bg-2) 50%);
-}
-
-h1,
-h2,
-p {
-	font-weight: 400;
-}
-
-p {
-	line-height: 1.5;
-}
-
-a {
-	color: var(--color-theme-1);
-	text-decoration: none;
-}
-
-a:hover {
-	text-decoration: underline;
-}
-
-h1 {
-	font-size: 2rem;
-	text-align: center;
-}
-
-h2 {
-	font-size: 1rem;
-}
-
-pre {
-	font-size: 16px;
-	font-family: var(--font-mono);
-	background-color: rgba(255, 255, 255, 0.45);
-	border-radius: 3px;
-	box-shadow: 2px 2px 6px rgb(255 255 255 / 25%);
-	padding: 0.5em;
-	overflow-x: auto;
-	color: var(--color-text);
-}
-
-.text-column {
-	display: flex;
-	max-width: 48rem;
-	flex: 0.6;
-	flex-direction: column;
-	justify-content: center;
-	margin: 0 auto;
-}
-
-input,
-button {
-	font-size: inherit;
-	font-family: inherit;
-}
-
-button:focus:not(:focus-visible) {
-	outline: none;
-}
-
-@media (min-width: 720px) {
-	h1 {
-		font-size: 2.4rem;
-	}
-}
-
-.visually-hidden {
-	border: 0;
-	clip: rect(0 0 0 0);
-	height: auto;
-	margin: 0;
-	overflow: hidden;
-	padding: 0;
-	position: absolute;
-	width: 1px;
-	white-space: nowrap;
-}