From 34ac3e486ece52612379a21625cb2ac29f1a4e16 Mon Sep 17 00:00:00 2001
From: study2895 <144806675+study2895@users.noreply.github.com>
Date: Thu, 28 Nov 2024 23:41:44 +0900
Subject: [PATCH] =?UTF-8?q?Design:=20=EA=B8=80=EB=A1=9C=EB=B2=8C=20?=
 =?UTF-8?q?=EC=8A=A4=ED=83=80=EC=9D=BC=20=EC=9E=91=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                       |  3 +
 src/assets/styles/GlobalStyles.js | 91 +++++++++++++++++++++++++++++++
 2 files changed, 94 insertions(+)
 create mode 100644 src/assets/styles/GlobalStyles.js

diff --git a/src/App.vue b/src/App.vue
index e4e5a04..16d6e3e 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -3,10 +3,13 @@
     <!-- <router-link to="/">Home</router-link> | -->
     <!-- <router-link to="/about">About</router-link> -->
   </nav>
+
   <router-view />
 </template>
 
 <script>
+import './assets/styles/GlobalStyles' // injectGlobal 스타일 적용
+
 import '@/assets/styles/main.css'
 import '@/assets/styles/global.css'
 import MainHeader from '@/components/layout/Header.vue'
diff --git a/src/assets/styles/GlobalStyles.js b/src/assets/styles/GlobalStyles.js
new file mode 100644
index 0000000..9688d83
--- /dev/null
+++ b/src/assets/styles/GlobalStyles.js
@@ -0,0 +1,91 @@
+import { injectGlobal } from 'vue-styled-components'
+
+injectGlobal`
+  /* Pretendard 폰트 임포트 */
+  @import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');
+
+  /* 전역 스타일 */
+  body {
+    background-color: #FFF9F2;
+    font-family: 'Pretendard', sans-serif;
+    min-height: 100vh;
+    margin: 0;
+  }
+
+  .main-container {
+    width: 395px;
+    min-width: 340px;
+    background-color: #FAE8DA;
+    min-height: 100vh;
+    position: relative;
+    margin: 0 auto;
+  }
+
+  input {
+    width: 100%;
+    padding: 0.5rem 0.75rem;
+    background-color: #DDD7D3;
+    border: 1px solid #E5E5E5;
+    border-radius: 9999px;
+    font-size: 0.875rem;
+    outline: none;
+    transition: border-color 0.2s ease, box-shadow 0.2s ease;
+
+    &:focus {
+      border-color: transparent;
+      box-shadow: 0 0 0 2px #F6B87A;
+    }
+  }
+
+  button {
+    padding: 0.5rem 0.75rem;
+    background-color: #F6B87A;
+    color: #FFF;
+    font-size: 0.875rem;
+    border-radius: 9999px;
+    transition: background-color 0.3s ease;
+    cursor: pointer;
+
+    &:hover {
+      background-color: #E5A769;
+    }
+
+    &:disabled {
+      background-color: #CCC;
+      cursor: not-allowed;
+    }
+  }
+
+  .error-message {
+    margin-top: 0.25rem;
+    font-size: 0.75rem;
+    color: #FF6B6B;
+  }
+
+  @font-face {
+    font-family: "NaB";
+    src: url("/public/font/NanumSquareRoundB.ttf") format("truetype");
+  }
+
+  @font-face {
+    font-family: "NaR";
+    src: url("/public/font/NanumSquareRoundR.ttf") format("truetype");
+  }
+
+  @font-face {
+    font-family: "NaL";
+    src: url("/public/font/NanumSquareRoundL.ttf") format("truetype");
+  }
+
+  .font-NaB {
+    font-family: 'NaB', sans-serif;
+  }
+
+  .font-NaL {
+    font-family: 'NaL', sans-serif;
+  }
+
+  .font-NaR {
+    font-family: 'NaR', sans-serif;
+  }
+`