[Feat] PWA, react-helmet 작업 사항 반영

generateSitemap.mjs

@@ -16,7 +16,6 @@ const generateSitemap = async () => {
     { url: '/open-consult', changefreq: 'always', priority: 1.0 },
     { url: '/open-consult/likes', changefreq: 'always', priority: 0.8 },
     { url: '/open-consult/recents', changefreq: 'always', priority: 0.8 },
-    { url: '/categorySearch', changefreq: 'daily', priority: 0.7 },
     { url: '/service', changefreq: 'never', priority: 0.8 },
     { url: '/service-unavailable', changefreq: 'monthly', priority: 0.5 },
   ];

package.json

@@ -23,6 +23,7 @@
     "react-cookie": "^7.0.1",
     "react-device-detect": "^2.2.3",
     "react-dom": "^18.2.0",
+    "react-helmet": "^6.1.0",
     "react-microsoft-clarity": "^1.2.0",
     "react-router-dom": "^6.21.1",
     "react-scripts": "5.0.1",
@@ -69,6 +70,7 @@
   },
   "devDependencies": {
     "@types/react-dom": "^18.2.18",
+    "@types/react-helmet": "^6.1.11",
     "husky": "4"
   }
 }

public/index.html

@@ -22,6 +22,56 @@
 
     <meta charset="utf-8" />
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+
+    <!-- ios pwa config -->
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-status-bar-style" content="white" />
+    <link
+      rel="apple-touch-icon"
+      sizes="57x57"
+      href="/ios/apple-icon-57x57.png"
+    />
+    <link
+      rel="apple-touch-icon"
+      sizes="60x60"
+      href="/ios/apple-icon-60x60.png"
+    />
+    <link
+      rel="apple-touch-icon"
+      sizes="72x72"
+      href="/ios/apple-icon-72x72.png"
+    />
+    <link
+      rel="apple-touch-icon"
+      sizes="76x76"
+      href="/ios/apple-icon-76x76.png"
+    />
+    <link
+      rel="apple-touch-icon"
+      sizes="114x114"
+      href="/ios/apple-icon-114x114.png"
+    />
+    <link
+      rel="apple-touch-icon"
+      sizes="120x120"
+      href="/ios/apple-icon-120x120.png"
+    />
+    <link
+      rel="apple-touch-icon"
+      sizes="144x144"
+      href="/ios/apple-icon-144x144.png"
+    />
+    <link
+      rel="apple-touch-icon"
+      sizes="152x152"
+      href="/ios/apple-icon-152x152.png"
+    />
+    <link
+      rel="apple-touch-icon"
+      sizes="180x180"
+      href="/ios/apple-icon-180x180.png"
+    />
+
     <meta
       name="viewport"
       content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"

public/manifest.json

@@ -1,41 +1,47 @@
 {
-  "name": "App",
+  "name": "셰어마인드",
+  "short_name": "셰어마인드",
+  "start_url": ".",
+  "display": "standalone",
+  "background_color": "#ffffff",
+  "theme_color": "#ffffff",
   "icons": [
     {
-      "src": "/android-icon-36x36.png",
+      "src": "/android/android-icon-36x36.png",
       "sizes": "36x36",
       "type": "image/png",
       "density": "0.75"
     },
     {
-      "src": "/android-icon-48x48.png",
+      "src": "/android/android-icon-48x48.png",
       "sizes": "48x48",
       "type": "image/png",
       "density": "1.0"
     },
     {
-      "src": "/android-icon-72x72.png",
+      "src": "/android/android-icon-72x72.png",
       "sizes": "72x72",
       "type": "image/png",
       "density": "1.5"
     },
     {
-      "src": "/android-icon-96x96.png",
+      "src": "/android/android-icon-96x96.png",
       "sizes": "96x96",
       "type": "image/png",
       "density": "2.0"
     },
     {
-      "src": "/android-icon-144x144.png",
+      "src": "/android/android-icon-144x144.png",
       "sizes": "144x144",
       "type": "image/png",
       "density": "3.0"
     },
     {
-      "src": "/android-icon-192x192.png",
+      "src": "/android/android-icon-192x192.png",
       "sizes": "192x192",
       "type": "image/png",
-      "density": "4.0"
+      "density": "4.0",
+      "purpose": "maskable"
     }
   ]
 }

src/before-install-prompt.d.ts

@@ -0,0 +1,29 @@
+/**
+ * The BeforeInstallPromptEvent is fired at the Window.onbeforeinstallprompt handler
+ * before a user is prompted to "install" a web site to a home screen on mobile.
+ *
+ * @deprecated Only supported on Chrome and Android Webview.
+ */
+interface BeforeInstallPromptEvent extends Event {
+  /**
+   * Returns an array of DOMString items containing the platforms on which the event was dispatched.
+   * This is provided for user agents that want to present a choice of versions to the user such as,
+   * for example, "web" or "play" which would allow the user to choose between a web version or
+   * an Android version.
+   */
+  readonly platforms: Array<string>;
+
+  /**
+   * Returns a Promise that resolves to a DOMString containing either "accepted" or "dismissed".
+   */
+  readonly userChoice: Promise<{
+    outcome: 'accepted' | 'dismissed';
+    platform: string;
+  }>;
+
+  /**
+   * Allows a developer to show the install prompt at a time of their own choosing.
+   * This method returns a Promise.
+   */
+  prompt(): Promise<void>;
+}

src/components/Buyer/BuyerOpenConsultDetail/MainQuestionSection.tsx

@@ -18,6 +18,8 @@ import { deletePostLikes, deletePostScraps } from 'api/delete';
 import { formattedMessage } from 'utils/formattedMessage';
 import { Flex } from 'components/Common/Flex';
 
+import { Helmet } from 'react-helmet';
+
 //
 //
 //
@@ -128,40 +130,46 @@ function MainQuestionSection() {
   //
 
   return (
-    <MainQuestionWrapper>
-      <MainQuestionText>
-        <div className="row1">
-          <Body1>{card?.title}</Body1>
-          {!card?.isPublic && (
-            <PrivateSign>
-              <LockIcon />
-              <Caption1 color={Grey3}>비공개</Caption1>
-            </PrivateSign>
-          )}
-        </div>
-        <Space height="1.2rem" />
-        <div className="row2">{formattedMessage(card?.content)}</div>
-        <Space height="0.8rem" />
-        <div className="row3">
-          <Caption2 color={Grey2}>{card?.updatedAt}</Caption2>
-          <Circle />
-          <Caption2 color={Grey2}>{card?.consultCategory}</Caption2>
-        </div>
-        <Space height="1rem" />
-      </MainQuestionText>
-      <Flex gap="1rem" justify="flex-end">
-        <ButtonItem onClick={handleClickLikeButton}>
-          {isLike ? <HeartIcon /> : <HeartEmptyIcon />}
-
-          <Button2 color={Grey2}>{card?.totalLike}</Button2>
-        </ButtonItem>
-        <ButtonItem onClick={handleClickScrapButton}>
-          {isSave ? <SaveIcon /> : <SaveEmptyIcon />}
-
-          <Button2 color={Grey2}>{card?.totalScrap}</Button2>
-        </ButtonItem>
-      </Flex>
-    </MainQuestionWrapper>
+    <>
+      <Helmet>
+        <title>{`${card?.title} | 셰어마인드 공개 상담`}</title>
+        <meta name="description" content={card?.content} />
+      </Helmet>
+      <MainQuestionWrapper>
+        <MainQuestionText>
+          <div className="row1">
+            <Body1>{card?.title}</Body1>
+            {!card?.isPublic && (
+              <PrivateSign>
+                <LockIcon />
+                <Caption1 color={Grey3}>비공개</Caption1>
+              </PrivateSign>
+            )}
+          </div>
+          <Space height="1.2rem" />
+          <div className="row2">{formattedMessage(card?.content)}</div>
+          <Space height="0.8rem" />
+          <div className="row3">
+            <Caption2 color={Grey2}>{card?.updatedAt}</Caption2>
+            <Circle />
+            <Caption2 color={Grey2}>{card?.consultCategory}</Caption2>
+          </div>
+          <Space height="1rem" />
+        </MainQuestionText>
+        <Flex gap="1rem" justify="flex-end">
+          <ButtonItem onClick={handleClickLikeButton}>
+            {isLike ? <HeartIcon /> : <HeartEmptyIcon />}
+
+            <Button2 color={Grey2}>{card?.totalLike}</Button2>
+          </ButtonItem>
+          <ButtonItem onClick={handleClickScrapButton}>
+            {isSave ? <SaveIcon /> : <SaveEmptyIcon />}
+
+            <Button2 color={Grey2}>{card?.totalScrap}</Button2>
+          </ButtonItem>
+        </Flex>
+      </MainQuestionWrapper>
+    </>
   );
 }