Merge pull request #61 from study2895/main

Design: 글로벌 스타일 작성

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'

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;
+  }
+`