[Feat] browserslist 추가

index.html

@@ -24,5 +24,6 @@
     <div id="root"></div>
     <script type="module" src="/src/main.tsx"></script>
     <script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
+    <script type="module" src="./src/views/UnsupportedPage/utils/checkBrowser.ts"></script>
   </body>
 </html>

package.json

@@ -12,8 +12,20 @@
     "build:sopt": "tsc && NODE_ENV=sopt vite build --mode sopt",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview",
-    "test": "vitest"
+    "test": "vitest",
+    "supportedBrowsers": "echo \"export default $(browserslist-useragent-regexp --allowHigherVersions);\" > ./src/views/UnsupportedPage/supportedBrowsers.ts"
   },
+  "browserslist": [
+    "> 0.3%",
+    "chrome >0 and last 2.5 years",
+    "edge >0 and last 2.5 years",
+    "safari >0 and last 2.5 years",
+    "firefox >0 and last 2.5 years",
+    "and_chr >0 and last 2.5 years",
+    "and_ff >0 and last 2.5 years",
+    "ios >0 and last 2.5 years",
+    "not dead"
+  ],
   "dependencies": {
     "@amplitude/analytics-browser": "^2.9.3",
     "@amplitude/plugin-session-replay-browser": "^1.6.13",
@@ -50,6 +62,7 @@
     "@typescript-eslint/parser": "^7.2.0",
     "@vanilla-extract/vite-plugin": "^4.0.9",
     "@vitejs/plugin-react": "^4.2.1",
+    "browserslist-useragent-regexp": "^4.1.3",
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-import-resolver-typescript": "^3.6.1",
@@ -68,4 +81,4 @@
     "vite": "^5.2.0",
     "vitest": "^2.0.5"
   }
-}
+}

src/App.tsx

@@ -15,6 +15,7 @@ import BigLoading from 'views/loadings/BigLoding';
 
 import 'styles/reset.css';
 import useDialog from '@hooks/useDialog';
+import UnsupportedPage from 'views/UnsupportedPage';
 import { HelmetProvider } from 'react-helmet-async';
 
 const SessionExpiredDialog = lazy(() =>
@@ -43,6 +44,7 @@ const router = createBrowserRouter([
       { path: '/result', element: <ResultPage /> },
       { path: '/review', element: <ReviewPage /> },
       { path: '/error', element: <ErrorPage code={500} /> },
+      { path: '/unsupported', element: <UnsupportedPage /> },
       { path: '*', element: <ErrorPage code={404} /> },
     ],
   },

src/views/UnsupportedPage/index.tsx

@@ -0,0 +1,41 @@
+const UnsupportedPage = () => {
+  return (
+    <section>
+      <article>
+        <p>지원되지 않는 브라우저예요</p>
+        <p>지원 안되는 브라우저 목록들</p>
+        <ol>
+          <li>1. 서비스가 종료된 브라우저</li>
+          <li>2. 업데이트된지 2.5년이 지난 브라우저</li>
+          <li>3. 전 세계 0.3% 미만의 유저를 보유한 브라우저</li>
+        </ol>
+        <br />
+        <p>업데이트 하러 가기</p>
+        <a href="https://www.google.com/chrome/update/" target="_blank" rel="noreferrer noopener">
+          Chrome
+        </a>
+        <a href="https://support.apple.com/en-us/102665" target="_blank" rel="noreferrer noopener">
+          Safari
+        </a>
+        <a
+          href="https://support.microsoft.com/en-au/topic/microsoft-edge-update-settings-af8aaca2-1b69-4870-94fe-18822dbb7ef1"
+          target="_blank"
+          rel="noreferrer noopener">
+          Edge
+        </a>
+        <a
+          href="https://support.mozilla.org/en-US/kb/update-firefox-latest-release"
+          target="_blank"
+          rel="noreferrer noopener">
+          Firefox
+        </a>
+      </article>
+      <p>{`문의사항이 있다면\n아래 ‘문의하기’를 이용해 주세요`}</p>
+      <a id="chat-channel-button" href="https://pf.kakao.com/_JdTKd" target="_blank" rel="noreferrer noopener">
+        문의하기
+      </a>
+    </section>
+  );
+};
+
+export default UnsupportedPage;

src/views/UnsupportedPage/supportedBrowsers.ts

@@ -0,0 +1 @@
+export default /Edge?\/([1-9]\d{2}|\d{4,})\.\d+(\.\d+|)|Firefox\/(9{2}|\d{3,})\.\d+(\.\d+|)|Chrom(ium|e)\/([1-9]\d{2}|\d{4,})\.\d+(\.\d+|)|(Maci|X1{2}).+ Version\/(15\.([5-9]|\d{2,})|(1[6-9]|[2-9]\d|\d{3,})\.\d+)([,.]\d+|)( \(\w+\)|)( Mobile\/\w+|) Safari\/|Chrome.+OPR\/(10[7-9]|1[1-9]\d|[2-9]\d{2}|\d{4,})\.\d+\.\d+|(CPU[ +]OS|iPhone[ +]OS|CPU[ +]iPhone|CPU IPhone OS|CPU iPad OS)[ +]+(15[._]([5-9]|\d{2,})|(1[6-9]|[2-9]\d|\d{3,})[._]\d+)([._]\d+|)|Android:?[ /-](12[4-9]|1[3-9]\d|[2-9]\d{2}|\d{4,})(\.\d+|)(\.\d+|)|Mobile Safari.+OPR\/([89]\d|\d{3,})\.\d+\.\d+|Android.+Firefox\/(12[5-9]|1[3-9]\d|[2-9]\d{2}|\d{4,})\.\d+(\.\d+|)|Android.+Chrom(ium|e)\/(12[4-9]|1[3-9]\d|[2-9]\d{2}|\d{4,})\.\d+(\.\d+|)|Android.+(UC? ?Browser|UCWEB|U3)[ /]?(15\.([5-9]|\d{2,})|(1[6-9]|[2-9]\d|\d{3,})\.\d+)\.\d+|SamsungBrowser\/(2[4-9]|[3-9]\d|\d{3,})\.\d+/;

src/views/UnsupportedPage/utils/checkBrowser.ts

@@ -0,0 +1,5 @@
+import supportedBrowsers from '../supportedBrowsers';
+
+if (!supportedBrowsers.test(navigator.userAgent)) {
+  if (window.location.pathname !== '/unsupported') window.location.href = '/unsupported';
+}

yarn.lock

@@ -2069,6 +2069,11 @@ argparse@^2.0.1:
   resolved "https://registry.yarnpkg.com/argparse/-/argparse-2.0.1.tgz#246f50f3ca78a3240f6c997e8a9bd1eac49e4b38"
   integrity sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==
 
+argue-cli@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/argue-cli/-/argue-cli-2.1.0.tgz#e05b54cb913a80e2e29440611023ac9357f0e4de"
+  integrity sha512-dgojXfc4SiqmNwe38PnbT3zJasrz7g62dLAPD+VFT5RJb8W7LGRqw2IFd2ES+plnhsp4HYNJmFqMU1tCThdCww==
+
 aria-query@5.3.0, aria-query@^5.0.0:
   version "5.3.0"
   resolved "https://registry.yarnpkg.com/aria-query/-/aria-query-5.3.0.tgz#650c569e41ad90b51b3d7df5e5eed1c7549c103e"
@@ -2247,6 +2252,17 @@ braces@^3.0.2:
   dependencies:
     fill-range "^7.0.1"
 
+browserslist-useragent-regexp@^4.1.3:
+  version "4.1.3"
+  resolved "https://registry.yarnpkg.com/browserslist-useragent-regexp/-/browserslist-useragent-regexp-4.1.3.tgz#a8fad3530eb1e3e627530a034ec447f7e4ca98e1"
+  integrity sha512-+KteEIVlrE2eJOmtteWhcs3wYKjbFd9fVPzPlj4VGggKMyf9orf+zjmlNt91ekInZ2zqox5ArEZD/tKXDj0v9Q==
+  dependencies:
+    argue-cli "^2.1.0"
+    easy-table "^1.2.0"
+    picocolors "^1.0.0"
+    regexp-tree "^0.1.24"
+    ua-regexes-lite "^1.2.1"
+
 browserslist@^4.22.2:
   version "4.23.0"
   resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.23.0.tgz#8f3acc2bbe73af7213399430890f86c63a5674ab"
@@ -2333,6 +2349,11 @@ cliui@^8.0.1:
     strip-ansi "^6.0.1"
     wrap-ansi "^7.0.0"
 
+clone@^1.0.2:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/clone/-/clone-1.0.4.tgz#da309cc263df15994c688ca902179ca3c7cd7c7e"
+  integrity sha512-JQHZ2QMW6l3aH/j6xCqQThY/9OH4D/9ls34cgkUBiEeocRTU04tHfKPBsUK1PqZCUQM7GiA0IIXJSuXHI64Kbg==
+
 color-convert@^1.9.0:
   version "1.9.3"
   resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
@@ -2527,6 +2548,13 @@ deepmerge@^4.2.2:
   resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-4.3.1.tgz#44b5f2147cd3b00d4b56137685966f26fd25dd4a"
   integrity sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==
 
+defaults@^1.0.3:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/defaults/-/defaults-1.0.4.tgz#b0b02062c1e2aa62ff5d9528f0f98baa90978d7a"
+  integrity sha512-eFuaLoy/Rxalv2kr+lqMlUnrDWV+3j4pljOIJgLIhI058IQfWJ7vXhyEIHu+HtC738klGALYxOKDO0bQP3tg8A==
+  dependencies:
+    clone "^1.0.2"
+
 define-data-property@^1.0.1, define-data-property@^1.1.4:
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/define-data-property/-/define-data-property-1.1.4.tgz#894dc141bb7d3060ae4366f6a0107e68fbe48c5e"
@@ -2591,6 +2619,15 @@ dom-accessibility-api@^0.6.3:
   resolved "https://registry.yarnpkg.com/dom-accessibility-api/-/dom-accessibility-api-0.6.3.tgz#993e925cc1d73f2c662e7d75dd5a5445259a8fd8"
   integrity sha512-7ZgogeTnjuHbo+ct10G9Ffp0mif17idi0IyWNVA/wcwcm7NPOD/WEHVP3n7n3MhXqxoIYm8d6MuZohYWIZ4T3w==
 
+easy-table@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/easy-table/-/easy-table-1.2.0.tgz#ba9225d7138fee307bfd4f0b5bc3c04bdc7c54eb"
+  integrity sha512-OFzVOv03YpvtcWGe5AayU5G2hgybsg3iqA6drU8UaoZyB9jLGMTrz9+asnLp/E+6qPh88yEI1gvyZFZ41dmgww==
+  dependencies:
+    ansi-regex "^5.0.1"
+  optionalDependencies:
+    wcwidth "^1.0.1"
+
 electron-to-chromium@^1.4.668:
   version "1.4.774"
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.774.tgz#1017d1758aaeeefe5423aa9d67b4b1e5d1d0a856"
@@ -4477,6 +4514,11 @@ regenerator-runtime@^0.14.0:
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz#356ade10263f685dda125100cd862c1db895327f"
   integrity sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==
 
+regexp-tree@^0.1.24:
+  version "0.1.27"
+  resolved "https://registry.yarnpkg.com/regexp-tree/-/regexp-tree-0.1.27.tgz#2198f0ef54518ffa743fe74d983b56ffd631b6cd"
+  integrity sha512-iETxpjK6YoRWJG5o6hXLwvjYAoW+FEZn9os0PD/b6AP6xQwsa/Y7lCVgIixBbUPMfhu+i2LtdeAqVTgGlQarfA==
+
 regexp.prototype.flags@^1.5.2:
   version "1.5.2"
   resolved "https://registry.yarnpkg.com/regexp.prototype.flags/-/regexp.prototype.flags-1.5.2.tgz#138f644a3350f981a858c44f6bb1a61ff59be334"
@@ -5034,6 +5076,11 @@ typescript@^5.2.2:
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.4.5.tgz#42ccef2c571fdbd0f6718b1d1f5e6e5ef006f611"
   integrity sha512-vcI4UpRgg81oIRUFwR0WSIHKt11nJ7SAVlYNIu+QpqeyXP+gpQJy/Z4+F0aGxSE4MqwjyXvW/TzgkLAx2AGHwQ==
 
+ua-regexes-lite@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/ua-regexes-lite/-/ua-regexes-lite-1.2.1.tgz#4ffa818855fb343cb68675f882a6b257f232deab"
+  integrity sha512-ling4WX4ZtxXjmSMHzuI8PGos2brw/6gG3YuVWn5RunHoQjeCokpFeMe/ti+R8E7kOTLE2FqBG4bMdFQLFwcJQ==
+
 ufo@^1.5.3:
   version "1.5.3"
   resolved "https://registry.yarnpkg.com/ufo/-/ufo-1.5.3.tgz#3325bd3c977b6c6cd3160bf4ff52989adc9d3344"
@@ -5167,6 +5214,13 @@ w3c-xmlserializer@^5.0.0:
   dependencies:
     xml-name-validator "^5.0.0"
 
+wcwidth@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/wcwidth/-/wcwidth-1.0.1.tgz#f0b0dcf915bc5ff1528afadb2c0e17b532da2fe8"
+  integrity sha512-XHPEwS0q6TaxcvG85+8EYkbiCux2XtWG2mkc47Ng2A77BQu9+DqIOJldST4HgPkuea7dvKSj5VgX3P1d4rW8Tg==
+  dependencies:
+    defaults "^1.0.3"
+
 webidl-conversions@^7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-7.0.0.tgz#256b4e1882be7debbf01d05f0aa2039778ea080a"