Skip to content

Commit

Permalink
refactor: 릴레이 질문 생성 완료 및 카카오톡 공유하기 백그라운드 수정
Browse files Browse the repository at this point in the history
  • Loading branch information
@semnil5202
semnil5202 committed Aug 22, 2024
1 parent 004a2ef commit 7869ff4
Show file tree
Hide file tree
Showing 5 changed files with 66 additions and 62 deletions.
115 changes: 59 additions & 56 deletions packages/web-domains/src/relay-question/assets/ShareGroupBackground.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,9 @@ interface ShareGroupBackgroundProps extends React.SVGProps<SVGSVGElement> {
export const ShareGroupBackground = ({ css, ...rest }: ShareGroupBackgroundProps) => {
return (
<svg
width="375"
height="302"
viewBox="0 0 375 302"
width="600"
height="372"
viewBox="98 0 600 372"
fill="none"
xmlns="http://www.w3.org/2000/svg"
css={css}
Expand All @@ -18,97 +18,100 @@ export const ShareGroupBackground = ({ css, ...rest }: ShareGroupBackgroundProps
<path
fillRule="evenodd"
clipRule="evenodd"
d="M305.263 100.313C300.273 99.3621 295.062 98.3093 289.622 97.1474C284.133 95.9751 278.872 94.6901 273.821 93.304L274.35 91.3753C279.363 92.7511 284.587 94.027 290.04 95.1915C295.466 96.3504 300.663 97.4003 305.637 98.3485L305.263 100.313Z"
d="M545.115 129.306C539.127 128.165 532.874 126.902 526.346 125.507C519.758 124.101 513.445 122.559 507.385 120.895L508.02 118.581C514.035 120.232 520.304 121.763 526.847 123.16C533.359 124.551 539.595 125.811 545.564 126.949L545.115 129.306Z"
fill="black"
/>
<rect
x="96.6758"
y="61.877"
width="183.476"
height="219.328"
rx="17.9258"
transform="rotate(1.20052 96.6758 61.877)"
<path
d="M300.002 103.025C300.238 91.7611 309.561 82.821 320.825 83.0571L488.788 86.5769C500.052 86.813 508.993 96.1358 508.756 107.4L504.382 316.156C504.146 327.42 494.823 336.36 483.559 336.124L315.596 332.604C304.332 332.368 295.392 323.045 295.628 311.781L300.002 103.025Z"
fill="#FF7664"
/>
<rect
x="94.0801"
y="60.4336"
width="183.476"
height="219.328"
rx="17.9258"
transform="rotate(-1.33038 94.0801 60.4336)"
<path
d="M297.95 101.38C297.689 90.1161 306.607 80.7731 317.871 80.5115L485.826 76.6109C497.089 76.3493 506.432 85.2683 506.694 96.532L511.542 305.277C511.803 316.541 502.884 325.884 491.621 326.146L323.666 330.046C312.403 330.308 303.06 321.389 302.798 310.125L297.95 101.38Z"
fill="#FF967C"
/>
<rect x="93.1348" y="53" width="183.476" height="219.328" rx="17.9258" fill="#FFBBA2" />
<circle cx="187.5" cy="71.5" r="6.5" fill="white" />
<circle cx="296" cy="49.9316" r="4" fill="#FDE582" />
<path
d="M273.311 0.977732L271.425 17.2939C271.327 18.1374 270.354 18.5601 269.671 18.0555L264.86 14.5012C263.883 13.7789 262.625 14.9355 263.264 15.9698L266.73 21.5837C267.158 22.2772 266.713 23.1797 265.902 23.2627L249.992 24.8916C248.701 25.0238 248.656 26.8884 249.939 27.0826L265.411 29.4231C266.194 29.5416 266.602 30.4215 266.186 31.0955L262.483 37.0932C261.853 38.1145 263.074 39.2668 264.057 38.5779L269.687 34.6314C270.373 34.1511 271.322 34.5777 271.419 35.4091L273.311 51.7787C273.462 53.0892 275.369 53.0793 275.506 51.7673L277.225 35.4081C277.313 34.5765 278.257 34.1398 278.947 34.6116L284.956 38.7182C285.941 39.3913 287.146 38.2412 286.519 37.2261L282.735 31.0955C282.319 30.4215 282.726 29.5416 283.509 29.4231L299.061 27.0705C300.342 26.8766 300.3 25.0149 299.01 24.8798L283.605 23.2664C282.795 23.1816 282.353 22.2802 282.78 21.5876L286.519 15.5304C287.146 14.5152 285.941 13.3651 284.956 14.0382L278.947 18.1448C278.257 18.6166 277.313 18.1799 277.225 17.3483L275.506 0.989134C275.369 -0.322839 273.462 -0.332739 273.311 0.977732Z"
fill="#FCD959"
d="M296.406 92.9282C296.406 81.6615 305.54 72.5281 316.806 72.5281H484.806C496.073 72.5281 505.206 81.6615 505.206 92.9282V301.73C505.206 312.997 496.073 322.13 484.806 322.13H316.806C305.54 322.13 296.406 312.997 296.406 301.73V92.9282Z"
fill="#FFBBA2"
/>
<circle cx="96" cy="298" r="4" fill="#FDE582" />
<circle cx="71.5" cy="278.5" r="6.5" fill="#FDE582" />
<path
fillRule="evenodd"
clipRule="evenodd"
d="M0 259.762L22.0595 262.189C31.392 263.217 39.7901 256.484 40.8172 247.151L59.8519 74.1955C60.879 64.863 54.1461 56.4649 44.8136 55.4378L0 50.5059V259.762Z"
d="M746.21 69.7236C744.299 58.6201 733.749 51.1679 722.646 53.0786L557.079 81.5704C545.976 83.4811 538.524 94.0313 540.434 105.135L575.845 310.912C577.756 322.015 588.306 329.468 599.409 327.557L764.976 299.065C776.079 297.154 783.531 286.604 781.621 275.501L746.21 69.7236Z"
fill="#CACACA"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M0 260.219L10.0181 262.05C19.254 263.738 28.1095 257.62 29.7976 248.384L61.0825 77.2195C62.7706 67.9837 56.6519 59.1281 47.4161 57.44L0 48.7734V260.219Z"
d="M753.942 67.0563C752.304 55.9093 741.94 48.2003 730.793 49.8379L564.577 74.2562C553.43 75.8937 545.721 86.2577 547.359 97.4048L577.707 303.989C579.345 315.136 589.708 322.845 600.855 321.208L767.071 296.789C778.218 295.152 785.927 284.788 784.29 273.641L753.942 67.0563Z"
fill="#E1E1E1"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M0 254.962L4.89636 255.95C14.0996 257.808 23.0662 251.853 24.9237 242.65L59.3494 72.0894C61.207 62.8861 55.2521 53.9196 46.0489 52.062L0 42.7676V254.962Z"
d="M751.106 54.1275C748.877 43.0835 738.117 35.9377 727.074 38.1668L562.394 71.4056C551.351 73.6347 544.205 84.3947 546.434 95.4386L587.745 300.113C589.974 311.157 600.734 318.303 611.777 316.074L776.457 282.835C787.5 280.606 794.646 269.846 792.417 258.802L751.106 54.1275Z"
fill="#EEEEEE"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M0.000118264 112.52L19.8085 115.995C30.96 117.951 38.4141 128.577 36.4577 139.729C34.5013 150.88 23.8753 158.334 12.7238 156.378L0.000118264 154.146V112.52Z"
fill="#E1E1E1"
d="M611.244 127.305C610.552 127.434 609.881 127.383 609.23 127.153C608.577 126.909 608.028 126.532 607.581 126.02C607.148 125.506 606.867 124.904 606.739 124.211C606.615 123.546 606.663 122.895 606.882 122.26C607.115 121.622 607.495 121.085 608.022 120.65C608.546 120.201 609.155 119.912 609.847 119.784C610.513 119.66 611.164 119.714 611.802 119.947C612.437 120.167 612.984 120.531 613.444 121.04C613.916 121.547 614.214 122.133 614.338 122.799C614.467 123.491 614.402 124.158 614.143 124.801C613.897 125.441 613.52 125.991 613.011 126.45C612.499 126.896 611.91 127.181 611.244 127.305Z"
fill="#CACACA"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M0 61.0321C13.3562 48.2884 43.5977 32.313 89.9319 35.4963C109.194 36.8196 126.801 43.9982 143.723 52.1872C147.926 54.2212 152.093 56.321 156.233 58.4075L156.233 58.4076C168.702 64.6915 180.931 70.8545 193.199 74.7367L193.802 72.8299C181.701 69.0006 169.679 62.9425 157.251 56.6794C153.084 54.5796 148.871 52.4566 144.594 50.3869C127.621 42.1732 109.729 34.8517 90.069 33.501C44.7712 30.3889 14.4362 45.3797 0 58.3091V61.0321Z"
fill="black"
d="M592.721 119.526L595.478 121.931L599.703 125.259L605.56 130.169L598.92 131.403L594.793 128.057L592.017 125.33L586.884 120.611L592.721 119.526ZM602.524 113.834C603.089 116.876 602.977 119.612 602.185 122.042C601.405 124.457 600.075 126.426 598.197 127.951C596.332 129.472 594.101 130.475 591.502 130.958C588.904 131.441 586.461 131.307 584.173 130.557C581.886 129.807 579.937 128.44 578.325 126.457C576.727 124.471 575.646 121.963 575.083 118.934C574.513 115.865 574.618 113.123 575.399 110.709C576.192 108.292 577.523 106.329 579.39 104.82C581.255 103.298 583.487 102.296 586.086 101.813C588.684 101.33 591.127 101.464 593.414 102.214C595.712 102.948 597.659 104.302 599.255 106.275C600.864 108.246 601.954 110.765 602.524 113.834ZM594.866 115.257C594.543 113.52 594.035 112.095 593.341 110.981C592.661 109.865 591.807 109.084 590.779 108.641C589.761 108.181 588.6 108.073 587.294 108.316C585.988 108.558 584.943 109.077 584.159 109.871C583.372 110.652 582.855 111.687 582.608 112.976C582.374 114.262 582.419 115.774 582.742 117.51C583.064 119.247 583.566 120.673 584.246 121.79C584.94 122.904 585.795 123.69 586.812 124.15C587.827 124.596 588.988 124.698 590.294 124.455C591.599 124.212 592.646 123.7 593.433 122.919C594.23 122.123 594.746 121.081 594.98 119.795C595.226 118.506 595.188 116.994 594.866 115.257Z"
fill="#CACACA"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M375 50.25L315.235 60.5346C305.982 62.1269 299.772 70.9186 301.364 80.1715L330.873 251.651C332.466 260.904 341.257 267.114 350.51 265.522L375 261.307V50.25Z"
d="M584.157 178.919C581.641 164.558 591.244 150.876 605.606 148.36L717.896 128.69C732.257 126.174 745.939 135.777 748.455 150.139V150.139C750.971 164.501 741.368 178.183 727.006 180.698L614.716 200.368C600.354 202.884 586.672 193.281 584.157 178.919V178.919Z"
fill="#E1E1E1"
/>
<path
d="M43.073 75.1271C44.3055 63.928 54.3833 55.8485 65.5823 57.081L232.574 75.4595C243.773 76.692 251.852 86.7698 250.62 97.9689L227.778 305.517C226.546 316.717 216.468 324.796 205.269 323.563L38.2773 305.185C27.0783 303.953 18.9989 293.875 20.2314 282.676L43.073 75.1271Z"
fill="#CACACA"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M374.999 46.5742L321.483 54.4361C312.193 55.8007 305.769 64.4373 307.134 73.7264L332.424 245.879C333.789 255.168 342.425 261.592 351.714 260.227L374.999 256.807V46.5742Z"
d="M46.6993 64.0499C48.725 52.9668 59.3517 45.6244 70.4347 47.6501L235.697 77.8564C246.78 79.8821 254.122 90.5089 252.097 101.592L214.555 306.991C212.529 318.074 201.902 325.417 190.819 323.391L25.5572 293.185C14.4742 291.159 7.13179 280.532 9.15751 269.449L46.6993 64.0499Z"
fill="#E1E1E1"
/>
<path
d="M45.3467 54.1275C47.5758 43.0835 58.3357 35.9377 69.3796 38.1668L234.059 71.4056C245.103 73.6347 252.248 84.3947 250.019 95.4386L208.708 300.113C206.479 311.157 195.72 318.303 184.676 316.074L19.9966 282.835C8.95265 280.606 1.80684 269.846 4.03592 258.802L45.3467 54.1275Z"
fill="#EEEEEE"
/>
<path
d="M51.7594 146.462C54.4984 132.142 68.3281 122.753 82.6489 125.492L194.619 146.907C208.94 149.646 218.329 163.476 215.59 177.797V177.797C212.851 192.118 199.021 201.506 184.7 198.767L72.7303 177.352C58.4095 174.613 49.0205 160.783 51.7594 146.462V146.462Z"
fill="#E1E1E1"
/>
<path
d="M411.6 94.7298C411.6 99.0376 408.108 102.53 403.8 102.53C399.492 102.53 396 99.0376 396 94.7298C396 90.4219 399.492 86.9297 403.8 86.9297C408.108 86.9297 411.6 90.4219 411.6 94.7298Z"
fill="white"
/>
<path
d="M661.202 79.1282C661.202 83.436 657.709 86.9283 653.402 86.9283C649.094 86.9283 645.602 83.436 645.602 79.1282C645.602 74.8203 649.094 71.3281 653.402 71.3281C657.709 71.3281 661.202 74.8203 661.202 79.1282Z"
fill="white"
/>
<path
d="M154.803 76.7298C154.803 81.0376 151.311 84.5298 147.003 84.5298C142.695 84.5298 139.203 81.0376 139.203 76.7298C139.203 72.4219 142.695 68.9297 147.003 68.9297C151.311 68.9297 154.803 72.4219 154.803 76.7298Z"
fill="white"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M374.999 40.8945L319.665 52.0631C310.462 53.9206 304.507 62.8872 306.365 72.0904L340.79 242.651C342.648 251.854 351.615 257.809 360.818 255.951L374.999 253.089V40.8945Z"
fill="#EEEEEE"
d="M267.963 51.4478C195.884 47.1145 156.994 67.5587 142.8 83.3312L141 82.1311C155.846 65.6351 195.308 44.6541 268.152 49.0333C295.338 50.6677 320.081 59.5273 343.552 69.4665C349.467 71.971 355.292 74.5399 361.055 77.0809C378.242 84.6597 394.866 91.9904 411.6 96.6241L410.765 98.9315C393.8 94.2337 376.889 86.776 359.647 79.1721C353.922 76.6473 348.16 74.1063 342.348 71.6449C318.947 61.7357 294.599 53.0491 267.963 51.4478Z"
fill="black"
/>
<path
d="M360.372 98.6401C359.796 98.7473 359.236 98.7049 358.694 98.513C358.15 98.3102 357.692 97.9957 357.32 97.5695C356.959 97.1413 356.725 96.6388 356.617 96.0621C356.514 95.5072 356.554 94.965 356.737 94.4357C356.931 93.9043 357.248 93.4571 357.687 93.0941C358.124 92.7202 358.631 92.4796 359.207 92.3724C359.762 92.2693 360.306 92.3147 360.837 92.5086C361.366 92.6917 361.822 92.9953 362.205 93.4195C362.599 93.8416 362.847 94.3302 362.95 94.8851C363.058 95.4618 363.003 96.0179 362.788 96.5533C362.583 97.0867 362.268 97.5448 361.844 97.9276C361.418 98.2995 360.927 98.537 360.372 98.6401Z"
fill="#CACACA"
d="M543.6 65.2461C543.6 67.8971 541.451 70.0461 538.8 70.0461C536.149 70.0461 534 67.8971 534 65.2461C534 62.5951 536.149 60.446 538.8 60.446C541.451 60.446 543.6 62.5951 543.6 65.2461Z"
fill="#FDE582"
/>
<path
d="M344.933 92.1547L347.231 94.1593L350.752 96.9327L355.633 101.024L350.099 102.052L346.66 99.2636L344.346 96.9919L340.069 93.0587L344.933 92.1547ZM353.103 87.4113C353.574 89.9466 353.48 92.2268 352.82 94.2518C352.17 96.2639 351.062 97.9051 349.497 99.1754C347.943 100.444 346.083 101.279 343.918 101.681C341.752 102.084 339.717 101.972 337.811 101.347C335.905 100.722 334.28 99.5832 332.937 97.9303C331.605 96.2754 330.705 94.1857 330.235 91.6612C329.76 89.1041 329.848 86.8195 330.498 84.8074C331.16 82.7932 332.268 81.1575 333.825 79.9001C335.379 78.6319 337.239 77.7966 339.404 77.3941C341.569 76.9917 343.605 77.103 345.511 77.7282C347.426 78.3404 349.049 79.4685 350.379 81.1126C351.719 82.7546 352.627 84.8541 353.103 87.4113ZM346.721 88.5974C346.452 87.1501 346.028 85.9624 345.451 85.0341C344.884 84.1038 344.172 83.4537 343.315 83.0839C342.467 82.7011 341.499 82.6108 340.411 82.8131C339.323 83.0153 338.452 83.4473 337.798 84.1092C337.142 84.7601 336.712 85.6226 336.506 86.6965C336.311 87.7683 336.348 89.0279 336.617 90.4751C336.886 91.9223 337.304 93.1111 337.871 94.0414C338.449 94.9697 339.162 95.6252 340.01 96.008C340.856 96.3798 341.823 96.4647 342.911 96.2624C343.999 96.0602 344.871 95.6336 345.527 94.9826C346.191 94.3188 346.621 93.4509 346.816 92.379C347.021 91.3051 346.99 90.0446 346.721 88.5974Z"
fill="#CACACA"
d="M511.571 6.50215L509.308 26.0818C509.191 27.094 508.023 27.6011 507.204 26.9957L501.431 22.7305C500.257 21.8637 498.749 23.2515 499.515 24.4928L503.674 31.2295C504.188 32.0618 503.654 33.1448 502.681 33.2444L483.589 35.1991C482.04 35.3577 481.986 37.5953 483.526 37.8282L502.091 40.6369C503.031 40.7791 503.52 41.835 503.021 42.6438L498.578 49.841C497.821 51.0666 499.287 52.4494 500.467 51.6227L507.223 46.8869C508.046 46.3105 509.185 46.8225 509.301 47.8201L511.571 67.4638C511.753 69.0364 514.041 69.0245 514.206 67.4501L516.269 47.819C516.374 46.821 517.506 46.297 518.335 46.8631L525.546 51.7911C526.728 52.5989 528.174 51.2187 527.422 50.0005L522.88 42.6438C522.381 41.835 522.87 40.7791 523.81 40.6369L542.471 37.8138C544.009 37.5811 543.958 35.347 542.411 35.1849L523.924 33.2487C522.953 33.147 522.421 32.0653 522.935 31.2342L527.422 23.9655C528.174 22.7473 526.728 21.3671 525.546 22.1748L518.335 27.1028C517.506 27.669 516.374 27.1449 516.269 26.147L514.206 6.51583C514.041 4.94145 511.753 4.92957 511.571 6.50215Z"
fill="#FCD959"
/>
<path
d="M298.803 366.528C298.803 369.179 296.654 371.328 294.003 371.328C291.352 371.328 289.203 369.179 289.203 366.528C289.203 363.877 291.352 361.728 294.003 361.728C296.654 361.728 298.803 363.877 298.803 366.528Z"
fill="#FDE582"
/>
<path
d="M272.405 343.129C272.405 347.437 268.913 350.929 264.605 350.929C260.297 350.929 256.805 347.437 256.805 343.129C256.805 338.821 260.297 335.329 264.605 335.329C268.913 335.329 272.405 338.821 272.405 343.129Z"
fill="#FDE582"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M375 112.52L355.192 115.995C344.04 117.951 336.586 128.577 338.542 139.729C340.499 150.88 351.125 158.334 362.276 156.378L375 154.146V112.52Z"
fill="#E1E1E1"
d="M699.471 57.9589C680.058 72.2572 661.304 81.2941 649.198 85.7327L647.586 84.0062C659.481 79.6448 678.82 70.1884 698.047 56.0265C717.278 41.8619 736.318 23.0483 747.724 0L749.875 1.06444C738.24 24.5765 718.88 43.6632 699.471 57.9589Z"
fill="black"
/>
</svg>
);
Expand Down
8 changes: 4 additions & 4 deletions ...uestion/features/share-group/components/CurrentQuestionInfo/CurrentQuestionInfo.styles.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,10 @@ import { borderRadiusVariants, colors, size } from '@sambad/sds/theme';

export const wrapperCss = css({
width: '100%',
maxWidth: '144px',
maxWidth: '168px',
position: 'absolute',
top: 80,
left: '49.5%',
top: 94,
left: '50.5%',
transform: 'translateX(-50%)',
});

Expand All @@ -17,7 +17,7 @@ export const countWrapperCss = css({
padding: `${size['6xs']} ${size['2xs']}`,
borderRadius: `${borderRadiusVariants.large}`,
backgroundColor: `${colors.primary100}`,
marginBottom: size['2xl'],
marginBottom: size['3xl'],
});

export const profileWrapperCss = css({
Expand Down
2 changes: 1 addition & 1 deletion ...elay-question/features/share-group/components/CurrentQuestionInfo/CurrentQuestionInfo.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ interface CurrentQuestionerInfoProps {
export const CurrentQuestionInfo = ({ questionCount, questioner }: CurrentQuestionerInfoProps) => {
return (
<div css={wrapperCss}>
<Txt color={colors.primary600} style={{ fontWeight: 900, fontSize: '34px' }}>
<Txt color={colors.primary600} style={{ fontWeight: 900, fontSize: '40px' }}>
Q.
</Txt>
<div css={countWrapperCss}>
Expand Down
1 change: 1 addition & 0 deletions ...ontainers/CurrentRelayQuestionCountContainer/CurrentRelayQuestionCountContainer.styles.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ export const wrapperCss = css({
justifyContent: 'space-between',
minHeight: '100dvh',
backgroundColor: colors.primary50,
overflow: 'hidden',
});

export const backgroundWrapperCss = css({
Expand Down
2 changes: 1 addition & 1 deletion ...roup/containers/CurrentRelayQuestionCountContainer/CurrentRelayQuestionCountContainer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ export const CurrentRelayQuestionCountContainer = () => {
</div>

<div css={backgroundWrapperCss}>
<ShareGroupBackground css={{ width: '100%' }} />
<ShareGroupBackground />
<CurrentQuestionInfo
questionCount={activeQuestion.questionNumber}
questioner={{
Expand Down

0 comments on commit 7869ff4

Please sign in to comment.