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"

pnpm-lock.yaml

@@ -155,6 +155,9 @@ importers:
       '@nuxtjs/color-mode':
         specifier: 3.5.2
         version: 3.5.2(magicast@0.3.5)
+      '@nuxtjs/google-fonts':
+        specifier: 3.2.0
+        version: 3.2.0(magicast@0.3.5)
       '@pompydev/prettier-config':
         specifier: workspace:*
         version: link:../../packages/prettier-config
@@ -1559,6 +1562,9 @@ packages:
   '@nuxtjs/color-mode@3.5.2':
     resolution: {integrity: sha512-cC6RfgZh3guHBMLLjrBB2Uti5eUoGM9KyauOaYS9ETmxNWBMTvpgjvSiSJp1OFljIXPIqVTJ3xtJpSNZiO3ZaA==}
 
+  '@nuxtjs/google-fonts@3.2.0':
+    resolution: {integrity: sha512-cGAjDJoeQ2jm6VJCo4AtSmKO6KjsbO9RSLj8q261fD0lMVNMZCxkCxBkg8L0/2Vfgp+5QBHWVXL71p1tiybJFw==}
+
   '@nuxtjs/tailwindcss@6.13.2':
     resolution: {integrity: sha512-knCmVe1I0div4tWj6f9GRaHX97zqD257gOeG4JIcWsC0yRfoiT34GBAyqK8Sc15qiKKMB/lZK6Z3skQRYRk/1Q==}
 
@@ -3889,6 +3895,9 @@ packages:
   globrex@0.1.2:
     resolution: {integrity: sha512-uHJgbwAMwNFf5mLst7IWLNg14x1CkeqglJb/K3doi4dw6q2IvAAmM/Y81kevy83wP+Sst+nutFTYOGg3d1lsxg==}
 
+  google-fonts-helper@3.7.3:
+    resolution: {integrity: sha512-dENZeK6RMvkCOFoKbLbS+pyoDgpmk4U6BYmfXnztMar2d8SjEG6valxql/Lkyi7bu5F+3FTdE+gAEYSYZ5zzMA==}
+
   gopd@1.0.1:
     resolution: {integrity: sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==}
 
@@ -8823,6 +8832,14 @@ snapshots:
     transitivePeerDependencies:
       - magicast
 
+  '@nuxtjs/google-fonts@3.2.0(magicast@0.3.5)':
+    dependencies:
+      '@nuxt/kit': 3.16.0(magicast@0.3.5)
+      google-fonts-helper: 3.7.3
+      pathe: 1.1.2
+    transitivePeerDependencies:
+      - magicast
+
   '@nuxtjs/tailwindcss@6.13.2(magicast@0.3.5)':
     dependencies:
       autoprefixer: 10.4.21(postcss@8.5.3)
@@ -11526,6 +11543,13 @@ snapshots:
 
   globrex@0.1.2: {}
 
+  google-fonts-helper@3.7.3:
+    dependencies:
+      deepmerge: 4.3.1
+      hookable: 5.5.3
+      ofetch: 1.4.1
+      ufo: 1.5.4
+
   gopd@1.0.1:
     dependencies:
       get-intrinsic: 1.2.4