Skip to content

Commit

Permalink
[Feat] browserslist 추가 (#452)
Browse files Browse the repository at this point in the history
* feat: browserslist 추가

* feat: 지원되는 browser 파악하는 regex 생성

* design: 지원 안 되는 브라우저 안내 페이지 생성

* feat: browser 판단 로직 구현

* fix: supported browsers ts로 변경
  • Loading branch information
eonseok-jeon authored Oct 8, 2024
1 parent f6b0527 commit af31566
Show file tree
Hide file tree
Showing 7 changed files with 119 additions and 2 deletions.
1 change: 1 addition & 0 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -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>
17 changes: 15 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -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",
Expand All @@ -68,4 +81,4 @@
"vite": "^5.2.0",
"vitest": "^2.0.5"
}
}
}
2 changes: 2 additions & 0 deletions src/App.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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(() =>
Expand Down Expand Up @@ -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} /> },
],
},
Expand Down
41 changes: 41 additions & 0 deletions src/views/UnsupportedPage/index.tsx
Original file line number Diff line number Diff line change
@@ -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;
1 change: 1 addition & 0 deletions src/views/UnsupportedPage/supportedBrowsers.ts
Original file line number Diff line number Diff line change
@@ -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+/;
5 changes: 5 additions & 0 deletions src/views/UnsupportedPage/utils/checkBrowser.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
import supportedBrowsers from '../supportedBrowsers';

if (!supportedBrowsers.test(navigator.userAgent)) {
if (window.location.pathname !== '/unsupported') window.location.href = '/unsupported';
}
54 changes: 54 additions & 0 deletions yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down

0 comments on commit af31566

Please sign in to comment.