feat: progressive web app 구현 (#654)

* feat: 최소단위 manifest.json 작성 및 적용 * design: PWA 적용으로 인한 바텀네브바 높이 수정
woowacourse-teams · Nov 20, 2023 · 4e23cfa · 4e23cfa
1 parent 8e6c57c
commit 4e23cfa
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 2 deletions.
diff --git a/frontend/public/favicon.ico b/frontend/public/favicon.ico
diff --git a/frontend/public/index.html b/frontend/public/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="ko">
   <head>
     <!-- Google tag (gtag.js) -->
@@ -43,6 +43,8 @@
       crossorigin="anonymous"
     ></script>
 
+    <link crossorigin="use-credentials" href="manifest.json" rel="manifest" type="application/manifest+json" />
+
     <title>셀럽잇 - CELUVEAT</title>
   </head>
   <body>

diff --git a/frontend/public/manifest.json b/frontend/public/manifest.json
@@ -0,0 +1,22 @@
+{
+  "name": "Celuveat",
+  "short_name": "Celuveat",
+  "description": "셀럽들이 다녀간 맛집들을 확인해보세요.",
+  "background_color": "#fff",
+  "theme_color": "#fcfcfc",
+  "dir": "ltr",
+  "display": "standalone",
+  "orientation": "portrait",
+  "scope": "/",
+  "start_url": "/",
+  "categories": [
+    {
+      "id": "map",
+      "name": "맛집 지도"
+    }
+  ],
+  "icons": [{ "src": "/favicon.ico", "sizes": "any", "type": "image/x-icon" }],
+  "id": "celuveat",
+  "lang": "ko",
+  "display_override": ["standalone", "window-controls-overlay"]
+}
diff --git a/frontend/src/components/@common/Toast/Toast.tsx b/frontend/src/components/@common/Toast/Toast.tsx
@@ -55,6 +55,7 @@ const StyledToastWrapper = styled.div<StyledToastProps>`
   display: flex;
   justify-content: flex-start;
   align-items: center;
+  gap: 0.8rem;
 
   position: fixed;
   bottom: 0;

diff --git a/frontend/src/components/BottomNavBar/BottomNavBar.tsx b/frontend/src/components/BottomNavBar/BottomNavBar.tsx
@@ -88,9 +88,11 @@ const StyledBottomNavBar = styled.nav<{ isHide: boolean }>`
   z-index: 20;
 
   width: 100vw;
-  height: 48px;
+  height: 52px;
   min-height: 48px;
 
+  padding-bottom: 1.2rem;
+
   background-color: var(--white);
 
   border-top: 1px solid var(--gray-1);