From 41f99e54525d8be2fe5182bc165dcece48fd4537 Mon Sep 17 00:00:00 2001
From: lovefield <hho1993@gmail.com>
Date: Tue, 27 Aug 2024 17:44:35 +0900
Subject: [PATCH] feat: default layout set

---
 assets/scss/_reset.scss    |  84 +++++++++++++++++++++++++++++++++++++
 assets/scss/common.scss    |  29 +++++++++++++
 assets/scss/variables.scss |   8 ++++
 components/SiteAside.vue   |  24 ++++++++++-
 components/SiteHeader.vue  |  36 ++++++++++++++--
 nuxt.config.ts             |  12 +++++-
 pages/index.vue            |   5 ++-
 public/favicon.ico         | Bin 4286 -> 0 bytes
 public/robots.txt          |   1 -
 9 files changed, 191 insertions(+), 8 deletions(-)
 create mode 100644 assets/scss/_reset.scss
 create mode 100644 assets/scss/variables.scss
 delete mode 100644 public/favicon.ico
 delete mode 100644 public/robots.txt

diff --git a/assets/scss/_reset.scss b/assets/scss/_reset.scss
new file mode 100644
index 0000000..d692e68
--- /dev/null
+++ b/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);
+}
diff --git a/assets/scss/common.scss b/assets/scss/common.scss
index e69de29..b256e25 100644
--- a/assets/scss/common.scss
+++ b/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);
+    }
+}
diff --git a/assets/scss/variables.scss b/assets/scss/variables.scss
new file mode 100644
index 0000000..9624665
--- /dev/null
+++ b/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;
+}
diff --git a/components/SiteAside.vue b/components/SiteAside.vue
index b01a815..97dc0c5 100644
--- a/components/SiteAside.vue
+++ b/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>
diff --git a/components/SiteHeader.vue b/components/SiteHeader.vue
index a493ed5..afe41da 100644
--- a/components/SiteHeader.vue
+++ b/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>
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 685801d..583df09 100644
--- a/nuxt.config.ts
+++ b/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";`,
+                },
+            },
+        },
+    },
 });
diff --git a/pages/index.vue b/pages/index.vue
index c45186e..7cdb40c 100644
--- a/pages/index.vue
+++ b/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>
diff --git a/public/favicon.ico b/public/favicon.ico
deleted file mode 100644
index 18993ad91cfd43e03b074dd0b5cc3f37ab38e49c..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 4286
zcmeHLOKuuL5PjK%MHWVi6lD<!mRb4$mdFuu1m7S&L72}0%nh7nb{xS*IY7K-1~WG>
zOGiR<sv2rs-P1h`ut*jRDypfj@9U}_3E&NVhC}c-e)fS606r6u2w#X;ZXeov|87fL
z!TI})z`sQxSz?%$m}Cpw?WF=YNnu;Mk#t%h*=w(2a7>EbCw`xmFozJ^aNatJY>w+g
ze6a2@u~m#^BZm@8wco9#Crlli0uLb^3E$t2-WIc^#(?t)*@`UpuofJ(Uyh@F>b3Ph
z$D^m8Xq~pTkGJ4Q`Q2)te3mgkWYZ^Ijq|hkiP^9`De={bQQ%heZC$QU2UpP(-tbl8
zPWD2abEew;oat@w`uP3J^YpsgT%~jT(Dk%oU}sa$7|n6hBjDj`+I;RX(>)%<Y^V1u
zxpEJLVzZ2NFGX+1TXChn89VxczG?Ja<o=SJ8n{y5$ezyw`8sz3-<3{&C8oX)|94kh
z+0M_EV^O^m@tH21JEPN_ux%Gy1GUw?U~8Zr)3xvGXUSPO+3I<5aAh6uT<iYgm~_ug
ziEA0#JM$)SV%(oc@>lm_7N{+B7Mu%H?422lE%MBJH!!YTN2oT7xr>>N-8OF$C&qU^
z>vLsa{$0X%q1fjOe3P1mCv#lN{xQ4_*HCSAZjTb1`}mlc+9rl8$B3OP%VT@mch_~G
z7Y+4b{r>9e=M+7vSI;BgB?ryZDY4m>&w<W+!o=%S{hjU42>cHSn81VH1N~`0gvwH{
z8dv#hG|OK`>1;j7tM#B)Z7zDN?{6=dUal}$e<J#b(FPcAa6L9y8G}E@q!eIA^eYgE
GM1KL3x?{8e

diff --git a/public/robots.txt b/public/robots.txt
deleted file mode 100644
index 8b13789..0000000
--- a/public/robots.txt
+++ /dev/null
@@ -1 +0,0 @@
-