refactor: 릴레이 질문 시작 오프닝 페이지 백그라운드 svg 600px 대응

packages/web-domains/src/relay-question/assets/RelayStartBackground.tsx

@@ -8,9 +8,9 @@ interface RelayStartBackgroundProps extends HTMLAttributes<SVGSVGElement> {
 export const RelayStartBackground = ({ css, ...rest }: RelayStartBackgroundProps) => {
   return (
     <svg
-      width="375"
-      height="172"
-      viewBox="0 0 375 172"
+      width="600"
+      height="245"
+      viewBox="0 0 600 245"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
       css={css}
@@ -19,25 +19,25 @@ export const RelayStartBackground = ({ css, ...rest }: RelayStartBackgroundProps
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M397.429 1.05132C373.681 -4.11888 349.822 10.2429 343.464 33.9678C341.919 39.7364 334.409 43.9255 328.687 42.2161C328.264 42.0896 327.837 41.9687 327.407 41.8536C302.967 35.3049 277.845 49.8088 271.296 74.249C264.747 98.6892 279.251 123.811 303.692 130.359C304.609 130.605 305.528 130.821 306.446 131.009C311.66 132.071 315.513 138.285 314.135 143.425C311.55 153.072 312.246 162.825 315.537 171.5H397.429V1.05132Z"
+        d="M600 1.49879C566.143 -5.87208 532.128 14.6029 523.065 48.4268C520.861 56.6508 510.156 62.623 501.997 60.186C501.394 60.0056 500.786 59.8333 500.173 59.6692C465.329 50.3329 429.514 71.0106 420.177 105.854C410.841 140.698 431.519 176.513 466.363 185.849C467.671 186.199 468.98 186.508 470.29 186.774C477.722 188.288 483.215 197.149 481.252 204.475C477.567 218.229 478.558 232.134 483.251 244.502H600V1.49879Z"
         fill="#C9F33C"
       />
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M320.576 171.498C319.942 169.685 319.15 167.946 318.217 166.298C316.689 163.602 318.452 159.406 321.445 158.605C335.111 154.949 345.174 142.481 345.174 127.663C345.174 112.844 335.11 100.376 321.444 96.72C318.449 95.9191 316.686 91.721 318.214 89.0242C320.852 84.3692 322.358 78.9885 322.358 73.2559C322.358 55.5673 308.019 41.2278 290.33 41.2278C284.487 41.2278 279.01 42.7922 274.294 45.525C271.65 47.0571 267.559 45.4044 266.716 42.4672C262.876 29.084 250.545 19.291 235.927 19.291C221.308 19.291 208.978 29.0842 205.137 42.4677C204.294 45.4052 200.202 47.0583 197.558 45.5259C192.842 42.7925 187.364 41.2278 181.521 41.2278C163.832 41.2278 149.492 55.5673 149.492 73.2559C149.492 78.9887 150.998 84.3697 153.637 89.0247C155.165 91.7214 153.402 95.9193 150.407 96.7203C136.741 100.376 126.678 112.844 126.678 127.663C126.678 142.481 136.741 154.949 150.407 158.605C153.401 159.406 155.163 163.602 153.635 166.298C152.702 167.946 151.91 169.685 151.277 171.498H320.576Z"
+        d="M490.433 244.504C489.53 241.92 488.401 239.442 487.071 237.094C484.892 233.25 487.405 227.268 491.674 226.126C511.156 220.914 525.504 203.138 525.504 182.012C525.504 160.885 511.155 143.11 491.672 137.898C487.403 136.756 484.889 130.772 487.067 126.927C490.828 120.291 492.975 112.62 492.975 104.447C492.975 79.2291 472.531 58.7858 447.313 58.7858C438.983 58.7858 431.175 61.0161 424.452 64.9121C420.682 67.0964 414.85 64.74 413.648 60.5525C408.173 41.4721 390.593 27.5103 369.752 27.5103C348.911 27.5103 331.331 41.4724 325.856 60.5531C324.654 64.741 318.821 67.0978 315.051 64.9131C308.328 61.0165 300.518 58.7858 292.188 58.7858C266.969 58.7858 246.526 79.2291 246.526 104.447C246.526 112.62 248.673 120.291 252.434 126.928C254.613 130.772 252.099 136.757 247.83 137.899C228.347 143.111 214 160.886 214 182.012C214 203.138 228.347 220.914 247.83 226.126C252.098 227.268 254.611 233.25 252.433 237.094C251.102 239.442 249.974 241.92 249.071 244.504H490.433Z"
         fill="#FDE582"
       />
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M184.202 171.506C191.349 158.621 195.419 143.794 195.419 128.016C195.419 78.431 155.222 38.2344 105.636 38.2344C56.0507 38.2344 15.8535 78.431 15.8535 128.016C15.8535 143.794 19.9236 158.621 27.071 171.506H184.202Z"
+        d="M296.012 244.51C306.201 226.142 312.003 205.004 312.003 182.511C312.003 111.82 254.695 54.5127 184.002 54.5127C113.31 54.5127 56.002 111.82 56.002 182.511C56.002 205.004 61.8039 226.142 71.9929 244.51H296.012Z"
         fill="#FFA18A"
       />
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M-23.4277 171.503H30.1475C31.8401 170.002 33.4529 168.371 34.9718 166.611C43.3418 156.914 47.4279 144.972 47.3999 133.094C47.3821 125.593 53.9065 118.034 61.3295 116.955C73.084 115.247 84.3008 109.459 92.671 99.7614C111.128 78.3775 108.754 46.0805 87.37 27.6242C70.1751 12.7836 45.9241 11.4107 27.4866 22.5598C21.224 26.3468 11.8117 24.8039 7.08552 19.216C5.37188 17.1899 3.47804 15.2713 1.40566 13.4826C-5.92259 7.15775 -14.5325 3.27909 -23.4277 1.77344V171.503Z"
+        d="M0 244.51H76.3815C78.7943 242.37 81.0932 240.045 83.2585 237.536C95.1916 223.71 101.017 206.684 100.977 189.75C100.951 179.056 110.253 168.279 120.836 166.741C137.594 164.305 153.585 156.054 165.518 142.228C191.831 111.742 188.448 65.697 157.961 39.3845C133.446 18.2266 98.8723 16.2694 72.5866 32.1647C63.6582 37.5638 50.2395 35.3643 43.5015 27.3979C41.0585 24.5096 38.3587 21.7745 35.4044 19.2247C24.9567 10.2074 12.6818 4.67776 0 2.53125V244.51Z"
         fill="#AF8CF9"
       />
     </svg>

packages/web-domains/src/relay-question/features/start-relay-question/containers/StartQuestionContainer/StartQuestionContainer.styles.ts

@@ -17,7 +17,7 @@ export const startQuestionContentCss = css({
 
 export const startQuestionBackgroundCss = css({
   width: '100%',
-  maxWidth: '430px',
+  maxWidth: '600px',
   height: 'max-content',
   padding: `${size['2xs']} ${size['2xs']} ${size.xl} ${size['2xs']}`,
   position: 'relative',

packages/web-domains/src/relay-question/features/start-relay-question/containers/StartQuestionContainer/StartQuestionContainer.tsx

@@ -38,7 +38,7 @@ export const StartQuestionContainer = () => {
             >
               시작하기
             </Button>
-            <RelayStartBackground css={{ width: '100%', position: 'absolute', bottom: 0 }} />
+            <RelayStartBackground css={{ width: '100%', height: 'auto', position: 'absolute', bottom: 0 }} />
           </section>
         </div>
       </div>