feat: add PWA support with service worker, manifest, and responsive design enhancements

snowykte0426 · snowykte0426 · commit d4982f5c64bd · 2025-04-29T20:50:00.000+09:00
diff --git a/build.gradle.kts b/build.gradle.kts
@@ -42,6 +42,9 @@ dependencies {
     implementation("ai.djl:api:0.26.0")
     implementation("ai.djl.pytorch:pytorch-engine:0.26.0")
     implementation("ai.djl.huggingface:tokenizers:0.26.0")
+    implementation("io.jsonwebtoken:jjwt-api:0.12.6")
+    implementation("io.jsonwebtoken:jjwt-impl:0.12.6")
+    implementation("io.jsonwebtoken:jjwt-jackson:0.12.6")
     implementation("org.springframework.cloud:spring-cloud-starter-openfeign")
     runtimeOnly("com.mysql:mysql-connector-j")
     testImplementation("org.springframework.boot:spring-boot-starter-test")
diff --git a/src/main/resources/static/manifest.json b/src/main/resources/static/manifest.json
@@ -0,0 +1,20 @@
+{
+  "name": "ㄹㅈㄷ 맛집탐방",
+  "short_name": "맛집탐방",
+  "start_url": "/index.html",
+  "display": "standalone",
+  "background_color": "#f0f2f5",
+  "theme_color": "#5c6bc0",
+  "icons": [
+    {
+      "src": "/icons/icon-192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/icons/icon-512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ]
+}
diff --git a/src/main/resources/static/service-worker.js b/src/main/resources/static/service-worker.js
@@ -0,0 +1,23 @@
+const CACHE_NAME = "pwa-cache-v1";
+const urlsToCache = [
+    "/",
+    "/index.html",
+    "/manifest.json",
+    "/style.css",
+    "/app.js"
+];
+
+self.addEventListener("install", event => {
+    event.waitUntil(
+        caches.open(CACHE_NAME)
+            .then(cache => cache.addAll(urlsToCache))
+    );
+});
+
+self.addEventListener("fetch", event => {
+    event.respondWith(
+        caches.match(event.request).then(response =>
+            response || fetch(event.request)
+        )
+    );
+});
diff --git a/src/main/resources/templates/index.html b/src/main/resources/templates/index.html
@@ -4,6 +4,14 @@
     <meta charset="UTF-8"/>
     <meta name="viewport" content="width=device-width,initial-scale=1"/>
     <title>ㄹㅈㄷ 맛집탐방</title>
+    <link rel="manifest" href="/manifest.json" />
+    <meta name="theme-color" content="#5c6bc0" />
+    <link rel="icon" href="/icons/icon-192.png" />
+    <script>
+        if ('serviceWorker' in navigator) {
+            navigator.serviceWorker.register('/service-worker.js');
+        }
+    </script>
     <style>
         :root {
             --primary: #5c6bc0;
@@ -294,6 +302,15 @@
                 width: 100%;
             }
         }
+
+        @media (max-width: 414px) {
+            .sidebar {
+                width: 100%;
+            }
+            .cards {
+                grid-template-columns: 1fr;
+            }
+        }
     </style>
 </head>
 <body data-theme="light">
