[Design] 지원 안 되는 브라우저 안내 페이지 퍼블리싱

src/common/components/Layout/components/Header/index.tsx

@@ -3,14 +3,13 @@ import { useLocation, useNavigate } from 'react-router-dom';
 
 import MakersDarkLogo from '@assets/MakersDarkLogo';
 import MakersLogo from '@assets/MakersLogo';
-import NowsoptLogo from '@assets/NowsoptLogo';
 import { useDeviceType } from 'contexts/DeviceTypeProvider';
-import { useRecruitingInfo } from 'contexts/RecruitingInfoProvider';
 import { useTheme } from 'contexts/ThemeProvider';
 
 import Nav from './Nav';
 import MenuList from './Nav/MenuList';
 import { containerSizeVer, containerVar, logoVar } from './style.css';
+import SoptLogo from '@assets/SoptLogo';
 
 const Header = () => {
   const { deviceType } = useDeviceType();
@@ -21,11 +20,8 @@ const Header = () => {
 
   const navigate = useNavigate();
   const { pathname } = useLocation();
-
-  const {
-    recruitingInfo: { isMakers },
-  } = useRecruitingInfo();
   const { isLight } = useTheme();
+  const isMakers = import.meta.env.MODE === 'makers';
 
   const handleClickLogo = () => {
     pathname === '/' ? window.location.reload() : navigate('/');
@@ -51,7 +47,7 @@ const Header = () => {
                   <MakersDarkLogo className={logoVariant} />
                 )
               ) : (
-                <NowsoptLogo className={logoVariant} />
+                <SoptLogo className={logoVariant} />
               )}
             </button>
             <Nav isMenuOpen={isMenuOpen} onClickMenuToggle={handleClickMenuToggle} />

src/views/UnsupportedPage/assets/ChromeIcon.tsx

@@ -0,0 +1,58 @@
+const ChromeIcon = ({ className }: { className?: string }) => {
+  return (
+    <svg
+      width="49"
+      height="50"
+      viewBox="0 0 49 50"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}>
+      <path
+        d="M24.4376 0.00434282C24.4376 0.00434282 38.8402 -0.64198 46.4762 13.8349H23.212C23.212 13.8349 18.8216 13.6934 15.0712 19.0196C13.9939 21.2551 12.8359 23.558 14.1354 28.0964C12.2634 24.9248 4.19678 10.879 4.19678 10.879C4.19678 10.879 9.88652 0.576663 24.4374 0.00434282H24.4376Z"
+        fill="#EF3F36"
+      />
+      <path
+        d="M45.7286 36.7556C45.7286 36.7556 39.0826 49.5558 22.7339 48.9229C24.7539 45.4282 34.3692 28.7764 34.3692 28.7764C34.3692 28.7764 36.6923 25.0461 33.9518 19.1341C32.5578 17.0804 31.137 14.9325 26.5585 13.7876C30.2417 13.7542 46.4357 13.7876 46.4357 13.7876C46.4357 13.7876 52.5024 23.8678 45.7286 36.7556Z"
+        fill="#FCD900"
+      />
+      <path
+        d="M3.24746 36.8566C3.24746 36.8566 -4.51625 24.7027 4.21025 10.8588C6.2236 14.3535 15.8389 31.0053 15.8389 31.0053C15.8389 31.0053 17.9129 34.8838 24.3971 35.4626C26.8684 35.2809 29.4405 35.1261 32.7266 31.7392C30.915 34.9444 22.7876 48.9499 22.7876 48.9499C22.7876 48.9499 11.0177 49.1654 3.24727 36.8566H3.24746Z"
+        fill="#61BC5B"
+      />
+      <path
+        d="M22.7275 49.0442L25.9999 35.3888C25.9999 35.3888 29.5956 35.1058 32.6123 31.7998C30.7402 35.0926 22.7275 49.0442 22.7275 49.0442Z"
+        fill="#5AB055"
+      />
+      <path
+        d="M13.4756 24.6757C13.4756 18.6561 18.3574 13.7743 24.377 13.7743C30.3966 13.7743 35.2784 18.6561 35.2784 24.6757C35.2784 30.6955 30.3966 35.5771 24.377 35.5771C18.3574 35.5705 13.4756 30.6955 13.4756 24.6757Z"
+        fill="white"
+      />
+      <path
+        d="M15.3003 24.6757C15.3003 19.6661 19.3607 15.5991 24.3771 15.5991C29.3867 15.5991 33.4537 19.6594 33.4537 24.6757C33.4537 29.6855 29.3936 33.7525 24.3771 33.7525C19.3673 33.7525 15.3003 29.6855 15.3003 24.6757Z"
+        fill="url(#paint0_linear_255_3198)"
+      />
+      <path
+        d="M46.4288 13.7946L32.9551 17.7471C32.9551 17.7471 30.9217 14.764 26.5518 13.7946C30.3427 13.7743 46.4288 13.7946 46.4288 13.7946Z"
+        fill="#EACA05"
+      />
+      <path
+        d="M13.8729 27.5981C11.9806 24.3189 4.19678 10.879 4.19678 10.879L14.1758 20.7502C14.1758 20.7502 13.1522 22.8578 13.5361 25.8743L13.8727 27.5981H13.8729Z"
+        fill="#DF3A32"
+      />
+      <defs>
+        <linearGradient
+          id="paint0_linear_255_3198"
+          x1="24.3766"
+          y1="15.7273"
+          x2="24.3766"
+          y2="33.2061"
+          gradientUnits="userSpaceOnUse">
+          <stop stop-color="#86BBE5" />
+          <stop offset="1" stop-color="#1072BA" />
+        </linearGradient>
+      </defs>
+    </svg>
+  );
+};
+
+export default ChromeIcon;

src/views/UnsupportedPage/assets/EdgeIcon.tsx

@@ -0,0 +1,109 @@
+const EdgeIcon = ({ className }: { className?: string }) => {
+  return (
+    <svg
+      width="50"
+      height="50"
+      viewBox="0 0 50 50"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}>
+      <path
+        d="M44.303 36.4992C43.6486 36.8412 42.9737 37.1425 42.2821 37.4015C40.081 38.2243 37.7492 38.6436 35.399 38.6389C26.3264 38.6389 18.4233 32.4038 18.4233 24.4024C18.4349 23.3292 18.7329 22.2786 19.2867 21.359C19.8405 20.4393 20.6299 19.684 21.5734 19.171C13.3673 19.5158 11.2583 28.0592 11.2583 33.0646C11.2583 47.2169 24.3132 48.6516 27.1259 48.6516C28.6425 48.6516 30.9298 48.211 32.3026 47.7781L32.5538 47.6938C37.8364 45.8692 42.3399 42.3021 45.323 37.5796C45.4143 37.4358 45.4551 37.2657 45.4389 37.0961C45.4227 36.9265 45.3504 36.7672 45.2334 36.6433C45.1164 36.5193 44.9614 36.4379 44.7929 36.4118C44.6244 36.3857 44.452 36.4165 44.303 36.4992Z"
+        fill="url(#paint0_linear_255_3223)"
+      />
+      <path
+        opacity="0.35"
+        d="M44.303 36.4992C43.6486 36.8412 42.9737 37.1425 42.2821 37.4015C40.081 38.2243 37.7492 38.6436 35.399 38.6389C26.3264 38.6389 18.4233 32.4038 18.4233 24.4024C18.4349 23.3292 18.7329 22.2786 19.2867 21.359C19.8405 20.4393 20.6299 19.684 21.5734 19.171C13.3673 19.5158 11.2583 28.0592 11.2583 33.0646C11.2583 47.2169 24.3132 48.6516 27.1259 48.6516C28.6425 48.6516 30.9298 48.211 32.3026 47.7781L32.5538 47.6938C37.8364 45.8692 42.3399 42.3021 45.323 37.5796C45.4143 37.4358 45.4551 37.2657 45.4389 37.0961C45.4227 36.9265 45.3504 36.7672 45.2334 36.6433C45.1164 36.5193 44.9614 36.4379 44.7929 36.4118C44.6244 36.3857 44.452 36.4165 44.303 36.4992Z"
+        fill="url(#paint1_radial_255_3223)"
+      />
+      <path
+        d="M20.272 46.2457C18.5619 45.1853 17.0799 43.7957 15.9121 42.1579C14.5811 40.336 13.6652 38.2452 13.2286 36.0321C12.792 33.8191 12.8453 31.5374 13.3848 29.3471C13.9242 27.1568 14.9368 25.111 16.3515 23.3531C17.7661 21.5952 19.5486 20.1678 21.5739 19.1711C22.1721 18.8895 23.194 18.3799 24.5534 18.4048C25.5111 18.4118 26.4542 18.6403 27.3087 19.0723C28.1633 19.5043 28.9061 20.1282 29.4789 20.8951C30.2532 21.9279 30.6801 23.1793 30.6983 24.4695C30.6983 24.4293 35.388 9.22159 15.3599 9.22159C6.94296 9.22159 0.0215087 17.2019 0.0215087 24.2033C-0.0116915 27.9069 0.781476 31.5714 2.34336 34.9305C4.89592 40.3718 9.35964 44.6871 14.8869 47.057C20.4142 49.4268 26.6201 49.6862 32.3261 47.7859C30.3282 48.4152 28.2174 48.6041 26.1394 48.3396C24.0613 48.075 22.0654 47.3632 20.2893 46.2534L20.272 46.2457Z"
+        fill="url(#paint2_linear_255_3223)"
+      />
+      <path
+        opacity="0.41"
+        d="M20.272 46.2457C18.5619 45.1853 17.0799 43.7957 15.9121 42.1579C14.5811 40.336 13.6652 38.2452 13.2286 36.0321C12.792 33.8191 12.8453 31.5374 13.3848 29.3471C13.9242 27.1568 14.9368 25.111 16.3515 23.3531C17.7661 21.5952 19.5486 20.1678 21.5739 19.1711C22.1721 18.8895 23.194 18.3799 24.5534 18.4048C25.5111 18.4118 26.4542 18.6403 27.3087 19.0723C28.1633 19.5043 28.9061 20.1282 29.4789 20.8951C30.2532 21.9279 30.6801 23.1793 30.6983 24.4695C30.6983 24.4293 35.388 9.22159 15.3599 9.22159C6.94296 9.22159 0.0215087 17.2019 0.0215087 24.2033C-0.0116915 27.9069 0.781476 31.5714 2.34336 34.9305C4.89592 40.3718 9.35964 44.6871 14.8869 47.057C20.4142 49.4268 26.6201 49.6862 32.3261 47.7859C30.3282 48.4152 28.2174 48.6041 26.1394 48.3396C24.0613 48.075 22.0654 47.3632 20.2893 46.2534L20.272 46.2457Z"
+        fill="url(#paint3_radial_255_3223)"
+      />
+      <path
+        d="M29.2062 28.5152C29.0509 28.7163 28.5735 28.9941 28.5735 29.5994C28.5735 30.0994 28.8995 30.5802 29.4785 30.9844C32.2356 32.8999 37.4334 32.6471 37.4468 32.6471C39.4897 32.6422 41.494 32.0898 43.2505 31.0476C45.0225 30.0139 46.4931 28.5352 47.5165 26.7583C48.54 24.9815 49.0806 22.9681 49.0848 20.918C49.1347 16.6252 47.551 13.771 46.9106 12.5068C42.8478 4.56672 34.0781 1.20038e-07 24.5415 1.20038e-07C18.092 -0.000637037 11.9015 2.53525 7.30891 7.05921C2.71629 11.5832 0.0906953 17.7315 0 24.1745C0.0920305 17.175 7.05567 11.5222 15.3384 11.5222C16.0095 11.5222 19.8364 11.5873 23.3911 13.4511C26.5239 15.0947 28.1652 17.0792 29.3059 19.0465C30.4908 21.0904 30.7017 23.6726 30.7017 24.7013C30.7017 25.7299 30.1764 27.2547 29.2062 28.5152Z"
+        fill="url(#paint4_radial_255_3223)"
+      />
+      <path
+        d="M29.2062 28.5152C29.0509 28.7163 28.5735 28.9941 28.5735 29.5994C28.5735 30.0994 28.8995 30.5802 29.4785 30.9844C32.2356 32.8999 37.4334 32.6471 37.4468 32.6471C39.4897 32.6422 41.494 32.0898 43.2505 31.0476C45.0225 30.0139 46.4931 28.5352 47.5165 26.7583C48.54 24.9815 49.0806 22.9681 49.0848 20.918C49.1347 16.6252 47.551 13.771 46.9106 12.5068C42.8478 4.56672 34.0781 1.20038e-07 24.5415 1.20038e-07C18.092 -0.000637037 11.9015 2.53525 7.30891 7.05921C2.71629 11.5832 0.0906953 17.7315 0 24.1745C0.0920305 17.175 7.05567 11.5222 15.3384 11.5222C16.0095 11.5222 19.8364 11.5873 23.3911 13.4511C26.5239 15.0947 28.1652 17.0792 29.3059 19.0465C30.4908 21.0904 30.7017 23.6726 30.7017 24.7013C30.7017 25.7299 30.1764 27.2547 29.2062 28.5152Z"
+        fill="url(#paint5_radial_255_3223)"
+      />
+      <defs>
+        <linearGradient
+          id="paint0_linear_255_3223"
+          x1="11.2583"
+          y1="33.9151"
+          x2="45.4514"
+          y2="33.9151"
+          gradientUnits="userSpaceOnUse">
+          <stop stop-color="#0C59A4" />
+          <stop offset="1" stop-color="#114A8B" />
+        </linearGradient>
+        <radialGradient
+          id="paint1_radial_255_3223"
+          cx="0"
+          cy="0"
+          r="1"
+          gradientUnits="userSpaceOnUse"
+          gradientTransform="translate(30.1437 34.1844) scale(18.2872 17.3572)">
+          <stop offset="0.72" stop-opacity="0" />
+          <stop offset="0.95" stop-opacity="0.53" />
+          <stop offset="1" />
+        </radialGradient>
+        <linearGradient
+          id="paint2_linear_255_3223"
+          x1="29.2853"
+          y1="19.0964"
+          x2="7.94939"
+          y2="42.3572"
+          gradientUnits="userSpaceOnUse">
+          <stop stop-color="#1B9DE2" />
+          <stop offset="0.16" stop-color="#1595DF" />
+          <stop offset="0.67" stop-color="#0680D7" />
+          <stop offset="1" stop-color="#0078D4" />
+        </linearGradient>
+        <radialGradient
+          id="paint3_radial_255_3223"
+          cx="0"
+          cy="0"
+          r="1"
+          gradientUnits="userSpaceOnUse"
+          gradientTransform="translate(13.5355 38.1215) rotate(-81.3767) scale(27.4748 22.2161)">
+          <stop offset="0.76" stop-opacity="0" />
+          <stop offset="0.95" stop-opacity="0.5" />
+          <stop offset="1" />
+        </radialGradient>
+        <radialGradient
+          id="paint4_radial_255_3223"
+          cx="0"
+          cy="0"
+          r="1"
+          gradientUnits="userSpaceOnUse"
+          gradientTransform="translate(4.95862 9.07536) rotate(92.2927) scale(38.808 82.7273)">
+          <stop stop-color="#35C1F1" />
+          <stop offset="0.11" stop-color="#34C1ED" />
+          <stop offset="0.23" stop-color="#2FC2DF" />
+          <stop offset="0.31" stop-color="#2BC3D2" />
+          <stop offset="0.67" stop-color="#36C752" />
+        </radialGradient>
+        <radialGradient
+          id="paint5_radial_255_3223"
+          cx="0"
+          cy="0"
+          r="1"
+          gradientUnits="userSpaceOnUse"
+          gradientTransform="translate(46.0291 14.8277) rotate(73.7259) scale(18.6475 15.1757)">
+          <stop stop-color="#66EB6E" />
+          <stop offset="1" stop-color="#66EB6E" stop-opacity="0" />
+        </radialGradient>
+      </defs>
+    </svg>
+  );
+};
+
+export default EdgeIcon;