feat: default layout set

assets/scss/_reset.scss

@@ -0,0 +1,84 @@
+body,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+dl,
+dd,
+ol,
+ul,
+fieldset,
+legend,
+figure,
+menu {
+    margin: 0;
+    padding: 0;
+    border: 0;
+}
+table,
+th,
+td {
+    border-spacing: 0;
+    border-collapse: collapse;
+}
+ol:not([type]),
+ul,
+ul > li {
+    list-style: none;
+}
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    font-size: 1em;
+    font-weight: normal;
+}
+body,
+input,
+textarea,
+select,
+button {
+    color: #333;
+    font: normal 12px/1.5 "Pretendard", sans-serif;
+}
+input,
+textarea,
+select,
+button {
+    margin: 0;
+    padding: 0;
+    border-radius: 0;
+    color: #333;
+    outline: 0;
+    vertical-align: middle;
+    -webkit-appearance: none;
+}
+a:link,
+a:visited,
+a:hover,
+a:active {
+    text-decoration: none;
+}
+a,
+button,
+input[type="submit"],
+input[type="button"],
+input[type="reset"] {
+    border: 0;
+    background: transparent;
+    cursor: pointer;
+}
+img {
+    border: 0;
+    vertical-align: top;
+}
+input {
+    color: var(--color-text-primary);
+}

assets/scss/common.scss

@@ -0,0 +1,29 @@
+@import "reset";
+
+#de {
+    min-width: 860px;
+}
+
+.container {
+    display: flex;
+    min-height: calc(100vh - 41px);
+
+    .section {
+        display: flex;
+        flex-direction: column;
+        row-gap: 20px;
+        flex: 1;
+        padding: 40px;
+    }
+
+    .page-title {
+        color: var(--color-text-default);
+        font-size: 22px;
+        font-weight: bold;
+    }
+
+    .text {
+        font-size: 14px;
+        color: var(--color-text-default);
+    }
+}

assets/scss/variables.scss

@@ -0,0 +1,8 @@
+:root {
+    --color-text-default: #333;
+    --color-text-sub: #666;
+    --color-border: #f3f3f3;
+    --color-bg: #f9fafc;
+
+    --size-asdie: 200px;
+}

components/SiteAside.vue

@@ -1,3 +1,25 @@
 <template>
-    <aside class="aside">menu</aside>
+    <aside class="aside">
+        <NuxtLink class="link" to="/">Intro</NuxtLink>
+        <NuxtLink class="link">Method</NuxtLink>
+    </aside>
 </template>
+
+<style lang="scss">
+.aside {
+    display: flex;
+    flex-direction: column;
+    row-gap: 10px;
+    width: var(--size-asdie);
+    padding: 20px;
+    background: var(--color-bg);
+    border-right: 1px solid var(--color-border);
+    box-sizing: border-box;
+
+    .link {
+        color: var(--color-text-default);
+        font-size: 14px;
+        font-weight: 500;
+    }
+}
+</style>

components/SiteHeader.vue

@@ -1,16 +1,44 @@
 <template>
     <header class="header">
-        <NuxtLink to="/">Dragon Editor</NuxtLink>
+        <NuxtLink class="logo" to="/">Dragon Editor</NuxtLink>
 
-        <div class="right">
-            <NuxtLink to="https://www.npmjs.com/package/dragon-editor" target="_blank">NPM</NuxtLink>
-            <NuxtLink to="https://github.com/lovefields/dragonEditor" target="_blank">Git Hub</NuxtLink>
+        <div class="right-area">
+            <NuxtLink class="link" to="https://www.npmjs.com/package/dragon-editor" target="_blank">NPM</NuxtLink>
+            <NuxtLink class="link" to="https://github.com/lovefields/dragonEditor" target="_blank">Git Hub</NuxtLink>
         </div>
     </header>
 </template>
 
 <style lang="scss">
 .header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border-bottom: 1px solid var(--color-border);
 
+    .logo {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: var(--size-asdie);
+        height: 40px;
+        color: #5451ac;
+        border-right: 1px solid var(--color-border);
+        font-size: 20px;
+        font-weight: 900;
+        box-sizing: border-box;
+    }
+
+    .right-area {
+        display: flex;
+        column-gap: 20px;
+        padding-right: 20px;
+
+        .link {
+            color: var(--color-text-default);
+            font-size: 14px;
+            font-weight: 500;
+        }
+    }
 }
 </style>

nuxt.config.ts

@@ -3,7 +3,7 @@ export default defineNuxtConfig({
 
     devtools: { enabled: false },
 
-    compatibilityDate: "2024-04-03",
+    compatibilityDate: "2024-08-27",
 
     app: {
         head: {
@@ -19,4 +19,14 @@ export default defineNuxtConfig({
     },
 
     css: ["@/assets/scss/common.scss"],
+
+    vite: {
+        css: {
+            preprocessorOptions: {
+                scss: {
+                    additionalData: `@import "@/assets/scss/variables";`,
+                },
+            },
+        },
+    },
 });

pages/index.vue

@@ -1,3 +1,6 @@
 <template>
-    <div class="section mgin-page">main page</div>
+    <div class="section intro-page">
+        <h1 class="page-title">Intro</h1>
+        <p class="text">Dragon Editor is</p>
+    </div>
 </template>