apply pomp theme to apps/rank

apps/rank/app.vue

@@ -17,3 +17,28 @@ const colorMode = useColorMode()
         <NuxtPage class="mx-auto p-4" />
     </div>
 </template>
+
+<style>
+html,
+body {
+    /* style */
+
+    @apply flex flex-col;
+
+    /* spacing */
+
+    @apply min-h-screen;
+
+    /* text */
+
+    @apply break-words font-noto-sans text-base font-normal leading-8 antialiased;
+
+    /* color */
+
+    @apply bg-light-ui-bg fill-light-text-default text-light-text-default dark:bg-dark-ui-bg dark:fill-dark-text-default dark:text-dark-text-default;
+}
+
+* {
+    @apply m-0;
+}
+</style>

apps/rank/nuxt.config.ts

@@ -5,7 +5,11 @@ export default defineNuxtConfig({
     compatibilityDate: "2024-11-01",
     devServer: { port: 3001 },
     devtools: { enabled: true },
-    modules: ["@nuxtjs/color-mode", "@nuxtjs/tailwindcss"],
+    modules: [
+        "@nuxtjs/color-mode",
+        "@nuxtjs/tailwindcss",
+        "@nuxtjs/google-fonts",
+    ],
     app: {
         head: {
             title, // default fallback title
@@ -20,4 +24,11 @@ export default defineNuxtConfig({
     colorMode: {
         classSuffix: "",
     },
+
+    // https://google-fonts.nuxtjs.org/getting-started/options
+    googleFonts: {
+        families: {
+            "Noto Sans KR": true,
+        },
+    },
 })

apps/rank/package.json

@@ -10,9 +10,10 @@
         "postinstall": "nuxt prepare"
     },
     "dependencies": {
+        "@nuxtjs/color-mode": "3.5.2",
+        "@nuxtjs/google-fonts": "3.2.0",
         "@pompydev/prettier-config": "workspace:*",
         "@pompydev/tailwind-config": "workspace:*",
-        "@nuxtjs/color-mode": "3.5.2",
         "nuxt": "3.16.0",
         "vue": "3.5.13",
         "vue-router": "4.5.0"