castad
/
o2o-castad-frontend
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

ui 디자인 수정 .

main
hbyang 2025-12-30 15:09:32 +09:00
parent 24d61f925a
commit 07ba65cca6
27 changed files with 2738 additions and 725 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2219
index.css
View File

File diff suppressed because it is too large Load Diff

BIN
public/assets/images/display-frame-1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.6 KiB

20
public/assets/images/icon-analysis.svg Normal file
View File

@ -0,0 +1,20 @@
<svg width="160" height="160" viewBox="0 0 160 160" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="160" height="160" rx="40" fill="#9BCACC"/>
<path d="M78.9375 92.75C80.3465 92.75 81.6977 92.1903 82.694 91.194C83.6903 90.1977 84.25 88.8465 84.25 87.4375C84.25 86.0285 83.6903 84.6773 82.694 83.681C81.6977 82.6847 80.3465 82.125 78.9375 82.125C77.5285 82.125 76.1773 82.6847 75.181 83.681C74.1847 84.6773 73.625 86.0285 73.625 87.4375C73.625 88.8465 74.1847 90.1977 75.181 91.194C76.1773 92.1903 77.5285 92.75 78.9375 92.75Z" fill="url(#paint0_linear_410_1353)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M61.9375 50.25H71.5C74.3179 50.25 77.0204 51.3694 79.013 53.362C81.0056 55.3546 82.125 58.0571 82.125 60.875V66.1875C82.125 69.1228 84.505 71.5 87.4375 71.5H92.75C95.5679 71.5 98.2704 72.6194 100.263 74.612C102.256 76.6046 103.375 79.3071 103.375 82.125V104.438C103.375 107.37 100.995 109.75 98.0625 109.75H61.9375C60.5285 109.75 59.1773 109.19 58.181 108.194C57.1847 107.198 56.625 105.846 56.625 104.438V55.5625C56.625 52.6272 59.005 50.25 61.9375 50.25ZM78.9375 97C80.8075 97 82.5557 96.4617 84.029 95.5323L86.9983 98.5017C87.4012 98.877 87.934 99.0814 88.4845 99.0717C89.035 99.0619 89.5603 98.8389 89.9496 98.4496C90.3389 98.0603 90.562 97.535 90.5717 96.9845C90.5814 96.434 90.377 95.9012 90.0017 95.4983L87.0352 92.529C88.1642 90.7342 88.6646 88.615 88.4577 86.5047C88.2509 84.3944 87.3485 82.4127 85.8925 80.8712C84.4365 79.3298 82.5094 78.316 80.4144 77.9892C78.3193 77.6625 76.175 78.0413 74.3188 79.0662C72.4625 80.0911 70.9996 81.7039 70.16 83.651C69.3203 85.5981 69.1517 87.769 69.6805 89.8224C70.2094 91.8758 71.4057 93.6952 73.0814 94.9945C74.7571 96.2938 76.8171 96.9993 78.9375 97Z" fill="url(#paint1_linear_410_1353)"/>
<path d="M86.3751 60.8751C86.38 57.3009 85.093 53.8455 82.7512 51.1454C87.4922 52.392 91.817 54.8754 95.2834 58.3417C98.7497 61.8081 101.233 66.1329 102.48 70.8739C99.7797 68.5321 96.3242 67.2451 92.7501 67.2501H87.4376C87.1558 67.2501 86.8855 67.1381 86.6863 66.9389C86.487 66.7396 86.3751 66.4693 86.3751 66.1876V60.8751Z" fill="url(#paint2_linear_410_1353)"/>
<defs>
<linearGradient id="paint0_linear_410_1353" x1="78.9375" y1="82.125" x2="78.9375" y2="92.75" gradientUnits="userSpaceOnUse">
<stop stop-color="#046266"/>
<stop offset="1" stop-color="#379599"/>
</linearGradient>
<linearGradient id="paint1_linear_410_1353" x1="80" y1="50.25" x2="80" y2="109.75" gradientUnits="userSpaceOnUse">
<stop stop-color="#046266"/>
<stop offset="1" stop-color="#379599"/>
</linearGradient>
<linearGradient id="paint2_linear_410_1353" x1="92.6155" y1="51.1454" x2="92.6155" y2="70.8739" gradientUnits="userSpaceOnUse">
<stop stop-color="#046266"/>
<stop offset="1" stop-color="#379599"/>
</linearGradient>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.7 KiB

3
public/assets/images/icon-back.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M6.43327 10.4416C6.31623 10.3244 6.25049 10.1656 6.25049 9.99997C6.25049 9.83434 6.31623 9.67549 6.43327 9.5583L12.6833 3.3083C12.7405 3.24689 12.8095 3.19764 12.8862 3.16348C12.9628 3.12932 13.0456 3.11095 13.1295 3.10947C13.2134 3.10799 13.2968 3.12343 13.3746 3.15486C13.4524 3.1863 13.5231 3.23308 13.5825 3.29243C13.6418 3.35178 13.6886 3.42248 13.72 3.5003C13.7515 3.57812 13.7669 3.66148 13.7654 3.7454C13.7639 3.82932 13.7456 3.91208 13.7114 3.98875C13.6773 4.06541 13.628 4.13441 13.5666 4.19163L7.75827 9.99997L13.5666 15.8083C13.628 15.8655 13.6773 15.9345 13.7114 16.0112C13.7456 16.0878 13.7639 16.1706 13.7654 16.2545C13.7669 16.3384 13.7515 16.4218 13.72 16.4996C13.6886 16.5775 13.6418 16.6481 13.5825 16.7075C13.5231 16.7668 13.4524 16.8136 13.3746 16.8451C13.2968 16.8765 13.2134 16.8919 13.1295 16.8905C13.0456 16.889 12.9628 16.8706 12.8862 16.8364C12.8095 16.8023 12.7405 16.753 12.6833 16.6916L6.43327 10.4416Z" fill="#CFABFB"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

12
public/assets/images/icon-content.svg Normal file
View File

@ -0,0 +1,12 @@
<svg width="160" height="160" viewBox="0 0 160 160" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="160" height="160" rx="40" fill="#DFC7FD"/>
<path d="M58.75 58.75C56.4957 58.75 54.3337 59.6455 52.7396 61.2396C51.1455 62.8337 50.25 64.9957 50.25 67.25V92.75C50.25 95.0043 51.1455 97.1664 52.7396 98.7604C54.3337 100.354 56.4957 101.25 58.75 101.25H82.125C84.3793 101.25 86.5414 100.354 88.1354 98.7604C89.7295 97.1664 90.625 95.0043 90.625 92.75V67.25C90.625 64.9957 89.7295 62.8337 88.1354 61.2396C86.5414 59.6455 84.3793 58.75 82.125 58.75H58.75ZM102.497 99.125L94.875 91.5033V68.4967L102.497 60.875C105.171 58.1975 109.75 60.093 109.75 63.8783V96.1217C109.75 99.907 105.171 101.803 102.497 99.125Z" fill="url(#paint0_linear_410_1359)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M68.2495 73.5C68.3854 73.5 68.5175 73.5443 68.6259 73.6261C68.7343 73.7079 68.8131 73.8228 68.8504 73.9533L69.5279 76.325C69.6738 76.8358 69.9474 77.3009 70.323 77.6765C70.6986 78.0521 71.1638 78.3258 71.6745 78.4717L74.0462 79.1492C74.1767 79.1865 74.2915 79.2654 74.3732 79.3738C74.4549 79.4822 74.4991 79.6143 74.4991 79.75C74.4991 79.8857 74.4549 80.0178 74.3732 80.1262C74.2915 80.2346 74.1767 80.3135 74.0462 80.3508L71.6745 81.0283C71.1638 81.1742 70.6986 81.4479 70.323 81.8235C69.9474 82.1991 69.6738 82.6642 69.5279 83.175L68.8504 85.5467C68.813 85.6772 68.7341 85.7919 68.6257 85.8736C68.5173 85.9554 68.3853 85.9996 68.2495 85.9996C68.1138 85.9996 67.9818 85.9554 67.8734 85.8736C67.765 85.7919 67.6861 85.6772 67.6487 85.5467L66.9712 83.175C66.8253 82.6642 66.5517 82.1991 66.1761 81.8235C65.8005 81.4479 65.3353 81.1742 64.8245 81.0283L62.4529 80.3508C62.3224 80.3135 62.2076 80.2346 62.1259 80.1262C62.0442 80.0178 62 79.8857 62 79.75C62 79.6143 62.0442 79.4822 62.1259 79.3738C62.2076 79.2654 62.3224 79.1865 62.4529 79.1492L64.8245 78.4717C65.3353 78.3258 65.8005 78.0521 66.1761 77.6765C66.5517 77.3009 66.8253 76.8358 66.9712 76.325L67.6487 73.9533C67.686 73.8228 67.7648 73.7079 67.8732 73.6261C67.9816 73.5443 68.1137 73.5 68.2495 73.5ZM75.7496 71C75.889 70.9999 76.0244 71.0465 76.1344 71.1322C76.2443 71.218 76.3224 71.3381 76.3562 71.4733L76.5712 72.3367C76.7679 73.12 77.3795 73.7317 78.1629 73.9283L79.0262 74.1433C79.1617 74.1769 79.2821 74.2549 79.3682 74.3648C79.4542 74.4748 79.5009 74.6104 79.5009 74.75C79.5009 74.8896 79.4542 75.0252 79.3682 75.1352C79.2821 75.2451 79.1617 75.3231 79.0262 75.3567L78.1629 75.5717C77.3795 75.7683 76.7679 76.38 76.5712 77.1633L76.3562 78.0267C76.3226 78.1622 76.2447 78.2826 76.1347 78.3686C76.0248 78.4547 75.8892 78.5014 75.7496 78.5014C75.6099 78.5014 75.4743 78.4547 75.3644 78.3686C75.2544 78.2826 75.1765 78.1622 75.1429 78.0267L74.9279 77.1633C74.8317 76.7787 74.6328 76.4274 74.3525 76.1471C74.0721 75.8667 73.7209 75.6678 73.3362 75.5717L72.4729 75.3567C72.3374 75.3231 72.217 75.2451 72.1309 75.1352C72.0449 75.0252 71.9982 74.8896 71.9982 74.75C71.9982 74.6104 72.0449 74.4748 72.1309 74.3648C72.217 74.2549 72.3374 74.1769 72.4729 74.1433L73.3362 73.9283C73.7209 73.8322 74.0721 73.6333 74.3525 73.3529C74.6328 73.0726 74.8317 72.7213 74.9279 72.3367L75.1429 71.4733C75.1767 71.3381 75.2548 71.218 75.3647 71.1322C75.4747 71.0465 75.6101 70.9999 75.7496 71ZM74.4995 82.25C74.6308 82.2499 74.7588 82.2912 74.8653 82.3679C74.9718 82.4446 75.0514 82.553 75.0929 82.6775L75.4212 83.6633C75.5462 84.0358 75.8379 84.3292 76.2112 84.4533L77.1971 84.7825C77.3212 84.8242 77.4291 84.9038 77.5056 85.0101C77.582 85.1164 77.6231 85.2441 77.6231 85.375C77.6231 85.5059 77.582 85.6336 77.5056 85.7399C77.4291 85.8462 77.3212 85.9258 77.1971 85.9675L76.2112 86.2967C75.8387 86.4217 75.5454 86.7133 75.4212 87.0867L75.0921 88.0725C75.0504 88.1966 74.9708 88.3045 74.8644 88.381C74.7581 88.4575 74.6305 88.4986 74.4995 88.4986C74.3686 88.4986 74.241 88.4575 74.1347 88.381C74.0283 88.3045 73.9487 88.1966 73.907 88.0725L73.5779 87.0867C73.5165 86.9027 73.4132 86.7356 73.2761 86.5985C73.1389 86.4614 72.9718 86.3581 72.7879 86.2967L71.802 85.9675C71.6779 85.9258 71.57 85.8462 71.4935 85.7399C71.4171 85.6336 71.376 85.5059 71.376 85.375C71.376 85.2441 71.4171 85.1164 71.4935 85.0101C71.57 84.9038 71.6779 84.8242 71.802 84.7825L72.7879 84.4533C73.1604 84.3283 73.4537 84.0367 73.5779 83.6633L73.907 82.6775C73.9485 82.5531 74.028 82.4449 74.1343 82.3682C74.2407 82.2914 74.3684 82.2501 74.4995 82.25Z" fill="#DFC7FD"/>
<defs>
<linearGradient id="paint0_linear_410_1359" x1="80" y1="58.75" x2="80" y2="101.25" gradientUnits="userSpaceOnUse">
<stop stop-color="#654D94"/>
<stop offset="0.65" stop-color="#8566C4"/>
<stop offset="1" stop-color="#AE72F9"/>
</linearGradient>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 4.5 KiB

11
public/assets/images/icon-deploy.svg Normal file
View File

@ -0,0 +1,11 @@
<svg width="160" height="160" viewBox="0 0 160 160" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="160" height="160" rx="40" fill="#D4FDF3"/>
<path d="M61.7861 53.25C65.8098 53.2502 69.0713 56.5124 69.0713 60.5361C69.0712 61.9986 68.6383 63.3589 67.8965 64.5L78.4639 75.0674C79.6051 74.3255 80.9661 73.8926 82.4287 73.8926C83.9811 73.8926 85.4186 74.3806 86.6006 75.208L96.2344 66.2168C95.9473 65.5969 95.7861 64.9068 95.7861 64.1787C95.7861 61.4963 97.9602 59.3215 100.643 59.3213C103.325 59.3213 105.5 61.4962 105.5 64.1787C105.5 66.8612 103.325 69.0361 100.643 69.0361C99.7948 69.0361 98.9984 68.8174 98.3047 68.4355L88.6729 77.4248C89.3335 78.5213 89.7148 79.8053 89.7148 81.1787C89.7148 81.8775 89.6134 82.5526 89.4297 83.1924L97.2871 87.3828C98.1591 86.5489 99.3407 86.0362 100.643 86.0361C103.325 86.0361 105.5 88.2102 105.5 90.8926C105.5 93.5751 103.325 95.75 100.643 95.75C97.9602 95.7498 95.7861 93.575 95.7861 90.8926C95.7862 90.6089 95.8107 90.3309 95.8574 90.0605L88.001 85.8701C86.6645 87.4559 84.6649 88.4648 82.4287 88.4648C81.1516 88.4648 79.9519 88.1348 78.9082 87.5576L72.4561 95.002C73.3798 96.223 73.9286 97.7435 73.9287 99.3926C73.9287 103.416 70.6664 106.679 66.6426 106.679C62.619 106.678 59.3574 103.416 59.3574 99.3926C59.3576 95.3691 62.6191 92.1076 66.6426 92.1074C67.9193 92.1074 69.1196 92.4358 70.1631 93.0127L76.6143 85.5684C75.7693 84.4509 75.239 83.0827 75.1553 81.5947L70.9717 80.9512C70.1688 82.527 68.5324 83.6074 66.6426 83.6074C63.9602 83.6072 61.7861 81.4324 61.7861 78.75C61.7862 76.0677 63.9603 73.8928 66.6426 73.8926C69.0529 73.8926 71.0525 75.6489 71.4336 77.9512L75.6152 78.5947C75.8003 78.107 76.0371 77.645 76.3174 77.2139L65.75 66.6465C64.6089 67.3883 63.2486 67.8212 61.7861 67.8213C57.7624 67.8213 54.5002 64.5598 54.5 60.5361C54.5 56.5123 57.7623 53.25 61.7861 53.25Z" fill="url(#paint0_linear_410_1365)"/>
<defs>
<linearGradient id="paint0_linear_410_1365" x1="80" y1="53.25" x2="80" y2="106.679" gradientUnits="userSpaceOnUse">
<stop stop-color="#324B50"/>
<stop offset="0.5" stop-color="#3F5F65"/>
<stop offset="1" stop-color="#657E83"/>
</linearGradient>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB

3
public/assets/images/icon-dropdown.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.35335 10.8533C8.2596 10.9469 8.13252 10.9995 8.00002 10.9995C7.86752 10.9995 7.74044 10.9469 7.64669 10.8533L2.64669 5.85328C2.59756 5.80751 2.55816 5.75231 2.53083 5.69098C2.50351 5.62964 2.48881 5.56343 2.48763 5.4963C2.48644 5.42916 2.49879 5.36248 2.52394 5.30022C2.54909 5.23796 2.58652 5.18141 2.634 5.13393C2.68147 5.08645 2.73803 5.04902 2.80029 5.02387C2.86255 4.99872 2.92923 4.98637 2.99637 4.98756C3.0635 4.98874 3.12971 5.00344 3.19105 5.03076C3.25238 5.05809 3.30758 5.09749 3.35335 5.14662L8.00002 9.79328L12.6467 5.14662C12.6925 5.09749 12.7477 5.05809 12.809 5.03076C12.8703 5.00344 12.9365 4.98874 13.0037 4.98756C13.0708 4.98637 13.1375 4.99872 13.1998 5.02387C13.262 5.04902 13.3186 5.08645 13.366 5.13393C13.4135 5.18141 13.451 5.23796 13.4761 5.30022C13.5013 5.36248 13.5136 5.42916 13.5124 5.4963C13.5112 5.56343 13.4965 5.62964 13.4692 5.69098C13.4419 5.75231 13.4025 5.80751 13.3534 5.85328L8.35335 10.8533Z" fill="#6AB0B3"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

51
public/assets/images/loading-logo.svg Normal file
View File

@ -0,0 +1,51 @@
<svg width="309" height="80" viewBox="0 0 309 80" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0.0055676 31.6841C0.0055676 13.0199 12.6302 0.0112305 30.7489 0.0112305C33.8438 0.0112305 36.5546 0.551171 40.0448 1.71455C42.9115 2.72207 44.6148 3.26201 45.7782 3.26201C46.7857 3.26201 47.6374 2.8 48.0994 1.63662L48.2552 1.24697H49.1848L46.3961 18.8257H45.4665L45.3885 17.3562C45.1547 7.36446 40.2006 1.09111 31.3723 1.09111C18.9815 1.01318 11.3165 17.1224 11.3165 35.9424C11.3165 46.1624 16.0424 52.2854 23.5515 52.2854C32.4578 52.2854 39.6607 44.6205 43.2232 35.8645L43.8411 34.4729L44.7707 34.6288L41.2861 52.2075H40.3565L40.2786 51.8958C40.0448 50.7324 39.349 50.1145 38.2635 50.1145C37.256 50.1145 35.5527 50.6544 32.5301 51.584C28.1159 52.9756 25.1713 53.4432 22.3825 53.4432C8.59454 53.4432 0 46.0065 0 31.6786L0.0055676 31.6841Z" fill="white"/>
<path d="M48.0215 51.2779H48.3333C53.677 51.2779 57.2395 47.7933 60.9579 40.6683L81.793 0.317385H87.4484L96.8167 47.7933C97.2787 50.2704 98.52 51.2779 100.691 51.2779H102.394V52.2075H79.5497V51.2779H82.2605C84.6597 51.2779 85.5113 50.1924 85.0493 47.7933L82.2605 32.7696H66.2293L62.2048 40.5904C58.3305 48.105 59.9615 51.2779 67.3927 51.2779H67.9326V52.2075H48.0271V51.2779H48.0215ZM82.0935 31.6841L77.9911 10.0753L66.7636 31.6841H82.0991H82.0935Z" fill="white"/>
<path d="M117.101 51.1999C115.164 50.3482 113.772 49.8806 112.609 49.8806C111.523 49.8806 110.672 50.4985 110.365 51.5839L110.21 52.2018H109.28L112.147 34.6231H113.076V37.1781C113.154 46.6243 117.724 52.2018 126.241 52.2018C132.904 52.2018 137.858 47.5539 137.858 41.5922C137.858 36.8664 134.913 34.0776 127.71 31.5226C117.719 27.9601 114.312 23.0783 114.312 16.343C114.312 5.81134 122.756 0 132.976 0C137.234 0 140.257 1.00752 142.5 2.09297C144.515 3.10049 145.907 3.64043 146.992 3.64043C148.078 3.64043 148.696 3.02256 149.163 1.78125L149.397 1.24131H150.327L147.46 18.82H146.53L146.375 17.4284C145.523 7.13057 142.5 1.16338 133.75 1.16338C127.165 1.16338 122.289 4.88175 122.289 10.6096C122.289 15.1796 125.233 18.0463 132.898 20.5234C143.124 23.8521 146.992 28.6559 146.992 36.0147C146.992 46.3905 138.548 53.4376 127.009 53.4376C122.829 53.4376 119.65 52.3521 117.095 51.1887L117.101 51.1999Z" fill="white"/>
<path d="M162.562 51.2777H164.655C166.748 51.2777 168.373 49.8861 168.679 47.7932L175.882 2.33228H173.945C166.202 2.33228 160.547 7.28639 157.452 15.2631L156.99 16.5044H156.06L159.623 1.24683H203.302L202.061 16.5044H201.131L200.897 15.2631C199.734 7.20846 196.717 2.33228 188.663 2.33228H186.725L179.522 47.7932C179.211 49.8861 180.374 51.2777 182.545 51.2777H185.1V52.2073H162.562V51.2777Z" fill="white"/>
<path d="M193.767 51.2779H194.079C199.422 51.2779 202.985 47.7933 206.703 40.6683L227.538 0.317385H233.194L242.562 47.7933C243.024 50.2704 244.265 51.2779 246.436 51.2779H248.14V52.2075H225.295V51.2779H228.006C230.405 51.2779 231.257 50.1924 230.795 47.7933L228.006 32.7696H211.975L207.944 40.5904C204.07 48.105 205.701 51.2779 213.132 51.2779H213.672V52.2075H193.767V51.2779ZM227.844 31.6841L223.742 10.0753L212.514 31.6841H227.85H227.844Z" fill="white"/>
<path d="M252.392 51.2777H254.485C256.578 51.2777 258.126 49.8861 258.515 47.7932L265.1 5.661C265.49 3.56802 264.249 2.17642 262.234 2.17642H259.601V1.24683H282.913C298.788 1.24683 308.312 8.68356 308.312 21.6143C308.312 39.7386 294.914 52.2073 274.858 52.2073H252.398V51.2777H252.392ZM273.845 51.1219C287.477 51.1219 297.001 36.7939 297.001 18.5194C297.001 8.22155 291.814 2.33228 281.282 2.33228H276.478L269.119 48.9566C268.963 50.1199 269.815 51.1275 270.978 51.1275H273.845V51.1219Z" fill="white"/>
<path d="M15.9061 76.6215L15.5276 72.1182C15.4719 71.4169 15.4107 70.5708 15.3829 69.8471H15.355C15.0489 70.5596 14.5813 71.4948 14.2473 72.1628L12.0041 76.6827H11.5532L9.28208 72.1628C8.94809 71.5059 8.53618 70.6153 8.20219 69.875H8.17436C8.14653 70.632 8.0853 71.4948 8.02963 72.1182L7.65112 76.6215H6.58793L7.36166 67.32H8.11869L10.6236 72.3186C11.0021 73.0757 11.4808 74.022 11.8204 74.8124H11.8482C12.171 74.0275 12.6052 73.1202 13.0116 72.3075L15.5053 67.32H16.2624L17.0472 76.6215H15.9117H15.9061Z" fill="white"/>
<path d="M23.2537 76.7829C22.8029 76.6827 22.2907 76.2875 22.2017 75.6752C21.9234 76.4489 21.183 76.7829 20.3815 76.7829C19.1012 76.7829 18.2662 75.8644 18.2662 74.7846C18.2662 73.5043 19.3016 72.8196 20.426 72.7139L22.0736 72.5524V72.0292C22.0736 71.3278 21.6061 70.8324 20.6431 70.8324C19.9862 70.8324 19.3183 71.0384 18.8674 71.3445L18.6336 70.4094C19.1902 70.0475 19.9139 69.8527 20.7043 69.8527C22.146 69.8527 23.1981 70.671 23.1981 72.1572V75.0017C23.1981 75.6307 23.5488 75.9758 23.9718 76.0537L23.2593 76.7829H23.2537ZM22.0736 73.4876L20.6598 73.6212C19.7859 73.7102 19.3461 74.2057 19.3461 74.8013C19.3461 75.3969 19.797 75.8199 20.4817 75.8199C21.2999 75.8199 22.0681 75.2076 22.0681 74.2335V73.4876H22.0736Z" fill="white"/>
<path d="M28.4415 71.1385C28.3246 71.1106 28.1354 71.0661 27.9461 71.0661C26.9998 71.0661 26.0647 71.6339 26.0647 73.2648V76.6158H24.9848V70.0141H26.0647V71.4558H26.0814C26.2984 70.5206 27.0555 69.925 28.063 69.925C28.2523 69.925 28.5417 69.9528 28.7031 70.0141L28.4415 71.1385Z" fill="white"/>
<path d="M33.8187 76.6213L30.8908 73.4596H30.8741V76.6213H29.7497V66.2455H30.8741V73.1701H30.8908L33.8187 70.0195H35.1435L32.1544 73.2703L35.2716 76.6213H33.8132H33.8187Z" fill="white"/>
<path d="M41.634 72.8753L41.0217 73.5043H36.7244C36.7244 74.5842 37.6261 75.8367 39.2627 75.8367C40.0809 75.8367 40.7044 75.6029 41.1886 75.2689L41.0551 76.3321C40.5875 76.5937 39.9919 76.783 39.1291 76.783C37.2365 76.783 35.6167 75.3691 35.6167 73.3262C35.6167 71.1553 37.2755 69.8583 38.8396 69.8583C40.6598 69.8583 41.6841 71.1386 41.6841 72.3966C41.6841 72.5859 41.6674 72.7473 41.6395 72.8753H41.634ZM38.8953 70.7935C37.9045 70.7935 36.9693 71.6229 36.7967 72.6304H40.5708C40.5875 72.5748 40.5875 72.4968 40.5875 72.4245C40.5875 71.6507 39.9752 70.7935 38.8953 70.7935Z" fill="white"/>
<path d="M46.9666 70.8936H44.779V74.7567C44.779 75.5305 45.1853 75.8088 45.8422 75.8088C46.0927 75.8088 46.3209 75.7642 46.4823 75.6919L46.3821 76.5658C46.2095 76.6549 45.9312 76.6994 45.6529 76.6994C44.573 76.6994 43.7158 76.0593 43.7158 74.8625V70.8992H42.4021V70.0253H43.7158V68.6281L44.779 68.0715V70.0253H47.167L46.961 70.8992L46.9666 70.8936Z" fill="white"/>
<path d="M48.8925 68.7229C48.6587 68.7229 48.18 68.2275 48.18 67.9937C48.18 67.7432 48.6587 67.2812 48.8925 67.2812C49.143 67.2812 49.6217 67.7488 49.6217 67.9937C49.6217 68.2275 49.143 68.7229 48.8925 68.7229ZM48.3247 76.6216V70.0198H49.4603V76.6216H48.3247Z" fill="white"/>
<path d="M55.8172 76.6215V72.3243C55.8172 71.5227 55.2773 70.838 54.1417 70.838C53.0062 70.838 52.405 71.5227 52.405 72.3243V76.6215H51.2806V70.0198H52.3159V70.9382H52.3326C52.5776 70.3426 53.2233 69.8583 54.4145 69.8583C55.8562 69.8583 56.9361 70.7601 56.9361 72.2185V76.6215H55.8116H55.8172Z" fill="white"/>
<path d="M61.2221 79.989C59.4464 79.989 58.2496 78.9981 58.2496 77.6566C58.2496 76.4766 59.0234 75.8475 59.7192 75.7028L59.0178 75.0015C59.0178 74.506 59.3685 74.0552 59.9195 73.9383C59.2794 73.6488 58.7228 72.992 58.7228 72.0735C58.7228 70.7932 59.7303 69.8581 61.172 69.8581C61.5227 69.8581 61.801 69.9138 62.0292 69.975C62.263 70.0473 62.5692 70.0752 62.9031 70.0752C63.2371 70.0752 63.6602 69.9583 63.894 69.8303L64.1111 70.7654C63.9218 70.8823 63.4821 70.9825 63.1926 70.9714C63.4097 71.1773 63.5989 71.5837 63.5989 72.0791C63.5989 73.2592 62.6805 74.2945 61.1664 74.2945C60.5374 74.2945 60.2034 74.4281 60.2034 74.7343C60.2034 74.8512 60.3203 74.9959 60.5374 75.0682L62.3131 75.6973C63.4487 76.0925 64.1222 76.7048 64.1222 77.857C64.1222 79.0816 62.9421 80.0001 61.2054 80.0001L61.2221 79.989ZM61.9847 76.638L60.6877 76.2428C59.8695 76.2428 59.2905 76.8718 59.2905 77.6566C59.2905 78.3691 59.9585 79.0427 61.1998 79.0427C62.4411 79.0427 63.0813 78.4137 63.0813 77.8348C63.0813 77.2558 62.6861 76.8606 61.9903 76.638H61.9847ZM61.1776 70.7932C60.3593 70.7932 59.7637 71.3777 59.7637 72.0624C59.7637 72.7471 60.3593 73.3427 61.1776 73.3427C61.9346 73.3427 62.5747 72.7749 62.5747 72.0624C62.5747 71.3499 61.9791 70.7932 61.1776 70.7932Z" fill="white"/>
<path d="M75.2439 76.6213L74.2085 74.1164H70.4345L69.4158 76.6213H68.2358L72.1267 67.1918H72.5664L76.4574 76.6213H75.2495H75.2439ZM72.7835 70.5873C72.6388 70.2255 72.4774 69.7412 72.3438 69.3071H72.3159C72.1991 69.7468 72.0098 70.2255 71.8651 70.5873L70.8464 73.1534H73.8077L72.7891 70.5873H72.7835Z" fill="white"/>
<path d="M82.241 76.6215V75.703H82.2243C81.9793 76.2986 81.3336 76.7829 80.1424 76.7829C78.7007 76.7829 77.6208 75.8811 77.6208 74.4227V70.0197H78.7453V74.317C78.7453 75.1185 79.2852 75.8032 80.4207 75.8032C81.5563 75.8032 82.1575 75.1185 82.1575 74.317V70.0197H83.2819V76.6215H82.2465H82.241Z" fill="white"/>
<path d="M88.876 70.8936H86.6884V74.7567C86.6884 75.5305 87.0948 75.8088 87.7516 75.8088C88.0021 75.8088 88.2303 75.7642 88.3917 75.6919L88.2915 76.5658C88.119 76.6549 87.8407 76.6994 87.5623 76.6994C86.4824 76.6994 85.6252 76.0593 85.6252 74.8625V70.8992H84.3115V70.0253H85.6252V68.6281L86.6884 68.0715V70.0253H89.0764L88.8704 70.8992L88.876 70.8936Z" fill="white"/>
<path d="M93.1344 76.783C91.1639 76.783 89.6387 75.3524 89.6387 73.3262C89.6387 71.3 91.1695 69.8583 93.1344 69.8583C95.0994 69.8583 96.619 71.2889 96.619 73.3262C96.619 75.3635 95.1049 76.783 93.1344 76.783ZM93.1344 70.877C91.8375 70.877 90.7743 71.8845 90.7743 73.3541C90.7743 74.8236 91.8375 75.8033 93.1344 75.8033C94.4314 75.8033 95.4835 74.8125 95.4835 73.3541C95.4835 71.8957 94.4203 70.877 93.1344 70.877Z" fill="white"/>
<path d="M106.466 76.6215V72.263C106.466 71.4893 106.115 70.8325 104.935 70.8325C103.755 70.8325 103.349 71.4893 103.349 72.263V76.6215H102.213V72.263C102.213 71.4893 101.879 70.8325 100.699 70.8325C99.519 70.8325 99.096 71.4893 99.096 72.263V76.6215H97.9715V70.0198H99.0236V70.8937H99.0403C99.2741 70.3259 99.8586 69.8583 100.994 69.8583C101.851 69.8583 102.642 70.2202 102.976 70.9104C103.282 70.3259 104.1 69.8583 105.119 69.8583C106.605 69.8583 107.596 70.7323 107.596 72.1628V76.6215H106.471H106.466Z" fill="white"/>
<path d="M113.931 76.7829C113.48 76.6827 112.968 76.2875 112.879 75.6752C112.6 76.4489 111.86 76.7829 111.058 76.7829C109.778 76.7829 108.943 75.8644 108.943 74.7846C108.943 73.5043 109.978 72.8196 111.103 72.7139L112.75 72.5524V72.0292C112.75 71.3278 112.283 70.8324 111.32 70.8324C110.663 70.8324 109.995 71.0384 109.544 71.3445L109.31 70.4094C109.867 70.0475 110.591 69.8527 111.381 69.8527C112.823 69.8527 113.875 70.671 113.875 72.1572V75.0017C113.875 75.6307 114.226 75.9758 114.649 76.0537L113.936 76.7829H113.931ZM112.75 73.4876L111.337 73.6212C110.463 73.7102 110.023 74.2057 110.023 74.8013C110.023 75.3969 110.474 75.8199 111.158 75.8199C111.977 75.8199 112.745 75.2076 112.745 74.2335V73.4876H112.75Z" fill="white"/>
<path d="M119.352 70.8936H117.165V74.7567C117.165 75.5305 117.571 75.8088 118.228 75.8088C118.478 75.8088 118.707 75.7642 118.868 75.6919L118.768 76.5658C118.595 76.6549 118.317 76.6994 118.039 76.6994C116.959 76.6994 116.101 76.0593 116.101 74.8625V70.8992H114.788V70.0253H116.101V68.6281L117.165 68.0715V70.0253H119.553L119.347 70.8992L119.352 70.8936Z" fill="white"/>
<path d="M121.278 68.7229C121.044 68.7229 120.566 68.2275 120.566 67.9937C120.566 67.7432 121.044 67.2812 121.278 67.2812C121.529 67.2812 122.007 67.7488 122.007 67.9937C122.007 68.2275 121.529 68.7229 121.278 68.7229ZM120.71 76.6216V70.0198H121.846V76.6216H120.71Z" fill="white"/>
<path d="M126.861 76.783C124.897 76.783 123.366 75.3524 123.366 73.3262C123.366 71.3 124.897 69.8583 126.861 69.8583C128.826 69.8583 130.346 71.2889 130.346 73.3262C130.346 75.3635 128.832 76.783 126.861 76.783ZM126.861 70.877C125.564 70.877 124.501 71.8845 124.501 73.3541C124.501 74.8236 125.564 75.8033 126.861 75.8033C128.158 75.8033 129.21 74.8125 129.21 73.3541C129.21 71.8957 128.147 70.877 126.861 70.877Z" fill="white"/>
<path d="M136.235 76.6215V72.3243C136.235 71.5227 135.695 70.838 134.56 70.838C133.424 70.838 132.823 71.5227 132.823 72.3243V76.6215H131.699V70.0198H132.734V70.9382H132.751C132.996 70.3426 133.641 69.8583 134.832 69.8583C136.274 69.8583 137.354 70.7601 137.354 72.2185V76.6215H136.23H136.235Z" fill="white"/>
<path d="M146.717 67.3978C146.438 67.2809 146.06 67.1918 145.754 67.1918C144.674 67.1918 144.061 67.8208 144.061 69.1011V70.0195H146.26L146.026 70.9213H144.061V76.6213H142.937V70.9213H141.785V70.0195H142.937V69.0454C142.937 67.1918 144.017 66.2455 145.676 66.2455C146.171 66.2455 146.622 66.3179 146.945 66.4515L146.711 67.3978H146.717Z" fill="white"/>
<path d="M150.201 76.783C148.231 76.783 146.705 75.3524 146.705 73.3262C146.705 71.3 148.236 69.8583 150.201 69.8583C152.166 69.8583 153.686 71.2889 153.686 73.3262C153.686 75.3635 152.172 76.783 150.201 76.783ZM150.201 70.877C148.904 70.877 147.841 71.8845 147.841 73.3541C147.841 74.8236 148.904 75.8033 150.201 75.8033C151.498 75.8033 152.55 74.8125 152.55 73.3541C152.55 71.8957 151.487 70.877 150.201 70.877Z" fill="white"/>
<path d="M158.49 71.1385C158.373 71.1106 158.184 71.0661 157.994 71.0661C157.048 71.0661 156.113 71.6339 156.113 73.2648V76.6158H155.033V70.0141H156.113V71.4558H156.13C156.347 70.5206 157.104 69.925 158.111 69.925C158.3 69.925 158.59 69.9528 158.751 70.0141L158.49 71.1385Z" fill="white"/>
<path d="M163.288 76.6215V67.32H164.485V75.5861H168.698V76.6215H163.293H163.288Z" fill="white"/>
<path d="M172.807 76.783C170.842 76.783 169.311 75.3524 169.311 73.3262C169.311 71.3 170.842 69.8583 172.807 69.8583C174.771 69.8583 176.291 71.2889 176.291 73.3262C176.291 75.3635 174.777 76.783 172.807 76.783ZM172.807 70.877C171.51 70.877 170.446 71.8845 170.446 73.3541C170.446 74.8236 171.51 75.8033 172.807 75.8033C174.104 75.8033 175.156 74.8125 175.156 73.3541C175.156 71.8957 174.092 70.877 172.807 70.877Z" fill="white"/>
<path d="M182.687 71.4169C182.13 71.0662 181.551 70.8936 180.911 70.8936C179.553 70.8936 178.417 71.8678 178.417 73.3429C178.417 74.818 179.57 75.7921 180.922 75.7921C181.59 75.7921 182.119 75.6585 182.698 75.3523L182.581 76.3599C182.102 76.5936 181.501 76.7105 180.833 76.7105C178.996 76.7105 177.338 75.4136 177.338 73.3317C177.338 71.2499 178.985 69.9362 180.833 69.9362C181.679 69.9362 182.381 70.1422 182.904 70.4316L182.687 71.4224V71.4169Z" fill="white"/>
<path d="M188.765 76.7829C188.315 76.6827 187.802 76.2875 187.713 75.6752C187.435 76.4489 186.695 76.7829 185.893 76.7829C184.613 76.7829 183.778 75.8644 183.778 74.7846C183.778 73.5043 184.813 72.8196 185.938 72.7139L187.585 72.5524V72.0292C187.585 71.3278 187.118 70.8324 186.155 70.8324C185.498 70.8324 184.83 71.0384 184.379 71.3445L184.145 70.4094C184.702 70.0475 185.426 69.8527 186.216 69.8527C187.658 69.8527 188.71 70.671 188.71 72.1572V75.0017C188.71 75.6307 189.061 75.9758 189.484 76.0537L188.771 76.7829H188.765ZM187.585 73.4876L186.172 73.6212C185.298 73.7102 184.858 74.2057 184.858 74.8013C184.858 75.3969 185.309 75.8199 185.993 75.8199C186.812 75.8199 187.58 75.2076 187.58 74.2335V73.4876H187.585Z" fill="white"/>
<path d="M194.187 70.8936H192V74.7567C192 75.5305 192.406 75.8088 193.063 75.8088C193.313 75.8088 193.542 75.7642 193.703 75.6919L193.603 76.5658C193.43 76.6549 193.152 76.6994 192.874 76.6994C191.794 76.6994 190.936 76.0593 190.936 74.8625V70.8992H189.623V70.0253H190.936V68.6281L192 68.0715V70.0253H194.388L194.182 70.8992L194.187 70.8936Z" fill="white"/>
<path d="M196.113 68.7229C195.879 68.7229 195.401 68.2275 195.401 67.9937C195.401 67.7432 195.879 67.2812 196.113 67.2812C196.364 67.2812 196.842 67.7488 196.842 67.9937C196.842 68.2275 196.364 68.7229 196.113 68.7229ZM195.545 76.6216V70.0198H196.681V76.6216H195.545Z" fill="white"/>
<path d="M201.696 76.783C199.731 76.783 198.2 75.3524 198.2 73.3262C198.2 71.3 199.731 69.8583 201.696 69.8583C203.661 69.8583 205.181 71.2889 205.181 73.3262C205.181 75.3635 203.667 76.783 201.696 76.783ZM201.696 70.877C200.399 70.877 199.336 71.8845 199.336 73.3541C199.336 74.8236 200.399 75.8033 201.696 75.8033C202.993 75.8033 204.045 74.8125 204.045 73.3541C204.045 71.8957 202.982 70.877 201.696 70.877Z" fill="white"/>
<path d="M211.07 76.6215V72.3243C211.07 71.5227 210.53 70.838 209.394 70.838C208.259 70.838 207.658 71.5227 207.658 72.3243V76.6215H206.533V70.0198H207.569V70.9382H207.585C207.83 70.3426 208.476 69.8583 209.667 69.8583C211.109 69.8583 212.189 70.7601 212.189 72.2185V76.6215H211.064H211.07Z" fill="white"/>
<path d="M220.327 76.6215H217.41V67.32H219.843C221.112 67.32 222.409 68.1661 222.409 69.6969C222.409 70.4094 222.047 71.1274 221.463 71.3723C222.426 71.6061 223.316 72.6137 223.316 73.8216C223.316 75.6585 221.802 76.6215 220.327 76.6215ZM219.67 68.3164H218.546V71.0551H219.681C220.5 71.0551 221.212 70.6153 221.212 69.6969C221.212 68.7784 220.511 68.3108 219.665 68.3108L219.67 68.3164ZM220.049 72.018H218.546V75.6306H220.093C221.156 75.6306 222.119 75.0183 222.119 73.8216C222.119 72.6248 221.145 72.0125 220.049 72.0125V72.018Z" fill="white"/>
<path d="M229.422 76.7829C228.972 76.6827 228.459 76.2875 228.37 75.6752C228.092 76.4489 227.352 76.7829 226.55 76.7829C225.27 76.7829 224.435 75.8644 224.435 74.7846C224.435 73.5043 225.47 72.8196 226.595 72.7139L228.242 72.5524V72.0292C228.242 71.3278 227.775 70.8324 226.812 70.8324C226.155 70.8324 225.487 71.0384 225.036 71.3445L224.802 70.4094C225.359 70.0475 226.083 69.8527 226.873 69.8527C228.315 69.8527 229.367 70.671 229.367 72.1572V75.0017C229.367 75.6307 229.717 75.9758 230.141 76.0537L229.428 76.7829H229.422ZM228.242 73.4876L226.829 73.6212C225.955 73.7102 225.515 74.2057 225.515 74.8013C225.515 75.3969 225.966 75.8199 226.65 75.8199C227.469 75.8199 228.237 75.2076 228.237 74.2335V73.4876H228.242Z" fill="white"/>
<path d="M232.874 76.7105C232.089 76.7105 231.488 76.5045 231.053 76.1984L230.909 75.035C231.387 75.4581 232.117 75.792 232.89 75.792C233.575 75.792 234.087 75.4302 234.087 74.8736C234.087 74.3169 233.681 74.0163 232.996 73.7659C231.755 73.3261 231.059 72.7583 231.059 71.723C231.059 70.6876 231.933 69.9306 233.141 69.9306C233.853 69.9306 234.527 70.1922 234.788 70.3537L234.555 71.2721C234.265 71.055 233.781 70.8324 233.124 70.8324C232.512 70.8324 232.105 71.183 232.105 71.6785C232.105 72.2017 232.467 72.4355 233.157 72.686C234.427 73.1369 235.167 73.738 235.167 74.829C235.167 75.9201 234.338 76.7105 232.879 76.7105H232.874Z" fill="white"/>
<path d="M242.147 72.8753L241.535 73.5043H237.238C237.238 74.5842 238.14 75.8367 239.776 75.8367C240.594 75.8367 241.218 75.6029 241.702 75.2689L241.568 76.3321C241.101 76.5937 240.505 76.783 239.643 76.783C237.75 76.783 236.13 75.3691 236.13 73.3262C236.13 71.1553 237.794 69.8583 239.353 69.8583C241.173 69.8583 242.197 71.1386 242.197 72.3966C242.197 72.5859 242.181 72.7473 242.153 72.8753H242.147ZM239.403 70.7935C238.412 70.7935 237.477 71.6229 237.305 72.6304H241.079C241.095 72.5748 241.095 72.4968 241.095 72.4245C241.095 71.6507 240.483 70.7935 239.403 70.7935Z" fill="white"/>
<path d="M248.532 76.6213V75.8921H248.515C248.209 76.3319 247.541 76.7827 246.472 76.7827C244.914 76.7827 243.238 75.5414 243.238 73.326C243.238 71.2998 244.68 69.8581 246.606 69.8581C247.391 69.8581 248.192 70.181 248.471 70.4871V66.2455H249.595V76.6213H248.532ZM248.471 71.5948C248.209 71.3054 247.613 70.8823 246.706 70.8823C245.409 70.8823 244.374 71.8899 244.374 73.3427C244.374 74.7955 245.409 75.8086 246.706 75.8086C247.563 75.8086 248.176 75.3689 248.471 74.9514V71.6004V71.5948Z" fill="white"/>
<path d="M257.8 76.6215H254.883V67.32H257.316C258.585 67.32 259.882 68.1661 259.882 69.6969C259.882 70.4094 259.52 71.1274 258.936 71.3723C259.899 71.6061 260.789 72.6137 260.789 73.8216C260.789 75.6585 259.275 76.6215 257.8 76.6215ZM257.143 68.3164H256.019V71.0551H257.154C257.973 71.0551 258.685 70.6153 258.685 69.6969C258.685 68.7784 257.984 68.3108 257.138 68.3108L257.143 68.3164ZM257.522 72.018H256.019V75.6306H257.566C258.63 75.6306 259.593 75.0183 259.593 73.8216C259.593 72.6248 258.618 72.0125 257.522 72.0125V72.018Z" fill="white"/>
<path d="M266.84 76.6215V75.703H266.823C266.573 76.2986 265.933 76.7829 264.741 76.7829C263.3 76.7829 262.22 75.8811 262.22 74.4227V70.0197H263.344V74.317C263.344 75.1185 263.884 75.8032 265.02 75.8032C266.155 75.8032 266.757 75.1185 266.757 74.317V70.0197H267.881V76.6215H266.846H266.84Z" fill="white"/>
<path d="M271.254 76.7105C270.469 76.7105 269.868 76.5045 269.434 76.1984L269.289 75.035C269.768 75.4581 270.497 75.792 271.271 75.792C271.955 75.792 272.467 75.4302 272.467 74.8736C272.467 74.3169 272.061 74.0163 271.376 73.7659C270.135 73.3261 269.439 72.7583 269.439 71.723C269.439 70.6876 270.313 69.9306 271.521 69.9306C272.234 69.9306 272.907 70.1922 273.169 70.3537L272.935 71.2721C272.646 71.055 272.161 70.8324 271.504 70.8324C270.892 70.8324 270.486 71.183 270.486 71.6785C270.486 72.2017 270.848 72.4355 271.538 72.686C272.807 73.1369 273.547 73.738 273.547 74.829C273.547 75.9201 272.718 76.7105 271.26 76.7105H271.254Z" fill="white"/>
<path d="M275.613 68.7229C275.379 68.7229 274.9 68.2275 274.9 67.9937C274.9 67.7432 275.379 67.2812 275.613 67.2812C275.863 67.2812 276.342 67.7488 276.342 67.9937C276.342 68.2275 275.863 68.7229 275.613 68.7229ZM275.045 76.6216V70.0198H276.18V76.6216H275.045Z" fill="white"/>
<path d="M282.537 76.6215V72.3243C282.537 71.5227 281.997 70.838 280.862 70.838C279.726 70.838 279.125 71.5227 279.125 72.3243V76.6215H278.001V70.0198H279.036V70.9382H279.053C279.298 70.3426 279.943 69.8583 281.135 69.8583C282.576 69.8583 283.656 70.7601 283.656 72.2185V76.6215H282.532H282.537Z" fill="white"/>
<path d="M291.037 72.8753L290.425 73.5043H286.128C286.128 74.5842 287.029 75.8367 288.666 75.8367C289.484 75.8367 290.108 75.6029 290.592 75.2689L290.458 76.3321C289.991 76.5937 289.395 76.783 288.532 76.783C286.64 76.783 285.02 75.3691 285.02 73.3262C285.02 71.1553 286.684 69.8583 288.243 69.8583C290.063 69.8583 291.087 71.1386 291.087 72.3966C291.087 72.5859 291.071 72.7473 291.043 72.8753H291.037ZM288.293 70.7935C287.302 70.7935 286.367 71.6229 286.194 72.6304H289.968C289.985 72.5748 289.985 72.4968 289.985 72.4245C289.985 71.6507 289.373 70.7935 288.293 70.7935Z" fill="white"/>
<path d="M294.154 76.7105C293.369 76.7105 292.768 76.5045 292.334 76.1984L292.189 75.035C292.668 75.4581 293.397 75.792 294.171 75.792C294.856 75.792 295.368 75.4302 295.368 74.8736C295.368 74.3169 294.961 74.0163 294.277 73.7659C293.035 73.3261 292.34 72.7583 292.34 71.723C292.34 70.6876 293.214 69.9306 294.421 69.9306C295.134 69.9306 295.807 70.1922 296.069 70.3537L295.835 71.2721C295.546 71.055 295.062 70.8324 294.405 70.8324C293.792 70.8324 293.386 71.183 293.386 71.6785C293.386 72.2017 293.748 72.4355 294.438 72.686C295.707 73.1369 296.448 73.738 296.448 74.829C296.448 75.9201 295.618 76.7105 294.16 76.7105H294.154Z" fill="white"/>
<path d="M299.431 76.7105C298.647 76.7105 298.045 76.5045 297.611 76.1984L297.466 75.035C297.945 75.4581 298.674 75.792 299.448 75.792C300.133 75.792 300.645 75.4302 300.645 74.8736C300.645 74.3169 300.238 74.0163 299.554 73.7659C298.313 73.3261 297.617 72.7583 297.617 71.723C297.617 70.6876 298.491 69.9306 299.699 69.9306C300.411 69.9306 301.085 70.1922 301.346 70.3537L301.112 71.2721C300.823 71.055 300.339 70.8324 299.682 70.8324C299.07 70.8324 298.663 71.183 298.663 71.6785C298.663 72.2017 299.025 72.4355 299.715 72.686C300.984 73.1369 301.725 73.738 301.725 74.829C301.725 75.9201 300.895 76.7105 299.437 76.7105H299.431Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 23 KiB

4
public/assets/images/loading-spinner.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="200" height="200" viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="100" cy="100" r="96" stroke="#379599" stroke-width="8"/>
<path d="M32.1177 167.882C18.6919 154.456 9.54879 137.351 5.84461 118.729C2.14043 100.106 4.04155 80.8041 11.3076 63.2624C18.5736 45.7207 30.8781 30.7275 46.6653 20.1789C62.4524 9.6303 81.013 4 100 4" stroke="#94FBE0" stroke-width="8"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 413 B

51
public/assets/images/login-logo.svg Normal file
View File

@ -0,0 +1,51 @@
<svg width="554" height="144" viewBox="0 0 554 144" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0.0100043 56.9324C0.0100043 23.3951 22.6949 0.0200239 55.252 0.0200239C60.8132 0.0200239 65.6842 0.990232 71.9556 3.08069C77.1067 4.89108 80.1674 5.86129 82.2578 5.86129C84.0682 5.86129 85.5986 5.03111 86.4287 2.94066L86.7088 2.24051H88.3792L83.3681 33.8274H81.6977L81.5577 31.1868C81.1376 13.2329 72.2357 1.96044 56.3722 1.96044C34.1074 1.82041 20.3344 30.7667 20.3344 64.584C20.3344 82.948 28.8263 93.9504 42.3192 93.9504C58.3227 93.9504 71.2655 80.1774 77.6668 64.444L78.7771 61.9435L80.4474 62.2235L74.1861 93.8104H72.5157L72.3757 93.2502C71.9556 91.1598 70.7053 90.0495 68.7549 90.0495C66.9445 90.0495 63.8838 91.0197 58.4527 92.6901C50.5209 95.1907 45.2298 96.0308 40.2187 96.0308C15.4433 96.0308 0 82.6679 0 56.9224L0.0100043 56.9324Z" fill="white"/>
<path d="M86.2887 92.1398H86.8489C96.4509 92.1398 102.852 85.8784 109.534 73.0757L146.972 0.569948H157.134L173.968 85.8784C174.798 90.3294 177.028 92.1398 180.929 92.1398H183.99V93.8102H142.941V92.1398H147.812C152.123 92.1398 153.653 90.1894 152.823 85.8784L147.812 58.8826H119.006L111.774 72.9356C104.813 86.4386 107.743 92.1398 121.096 92.1398H122.066V93.8102H86.2987V92.1398H86.2887ZM147.512 56.9322L140.14 18.1037L119.966 56.9322H147.522H147.512Z" fill="white"/>
<path d="M210.416 91.9999C206.935 90.4696 204.434 89.6294 202.344 89.6294C200.394 89.6294 198.863 90.7397 198.313 92.6901L198.033 93.8003H196.363L201.514 62.2135H203.184V66.8045C203.324 83.7782 211.536 93.8003 226.839 93.8003C238.812 93.8003 247.714 85.4485 247.714 74.7362C247.714 66.2444 242.423 61.2333 229.48 56.6423C211.526 50.2409 205.405 41.469 205.405 29.3664C205.405 10.4423 220.578 0 238.942 0C246.594 0 252.025 1.81039 256.056 3.76082C259.676 5.57121 262.177 6.54142 264.127 6.54142C266.078 6.54142 267.188 5.43118 268.028 3.2007L268.448 2.23049H270.119L264.968 33.8173H263.297L263.017 31.3168C261.487 12.8128 256.056 2.09046 240.332 2.09046C228.5 2.09046 219.738 8.77191 219.738 19.0641C219.738 27.2759 225.029 32.427 238.802 36.878C257.176 42.8593 264.127 51.4912 264.127 64.714C264.127 83.3581 248.954 96.0208 228.22 96.0208C220.708 96.0208 214.997 94.0704 210.406 91.9799L210.416 91.9999Z" fill="white"/>
<path d="M292.103 92.1402H295.864C299.625 92.1402 302.546 89.6397 303.096 85.8788L316.039 4.19114H312.558C298.645 4.19114 288.483 13.0931 282.921 27.4262L282.091 29.6567H280.421L286.822 2.24072H365.309L363.079 29.6567H361.408L360.988 27.4262C358.898 12.953 353.477 4.19114 339.004 4.19114H335.523L322.58 85.8788C322.02 89.6397 324.11 92.1402 328.011 92.1402H332.602V93.8106H292.103V92.1402Z" fill="white"/>
<path d="M348.176 92.1398H348.736C358.338 92.1398 364.739 85.8784 371.421 73.0757L408.859 0.569948H419.021L435.855 85.8784C436.685 90.3294 438.915 92.1398 442.816 92.1398H445.877V93.8102H404.828V92.1398H409.699C414.01 92.1398 415.54 90.1894 414.71 85.8784L409.699 58.8826H380.893L373.651 72.9356C366.69 86.4386 369.62 92.1398 382.973 92.1398H383.943V93.8102H348.176V92.1398ZM409.409 56.9322L402.037 18.1037L381.863 56.9322H409.419H409.409Z" fill="white"/>
<path d="M453.518 92.1402H457.279C461.04 92.1402 463.82 89.6397 464.521 85.8788L476.353 10.1724C477.053 6.41162 474.823 3.91108 471.202 3.91108H466.471V2.24072H508.36C536.886 2.24072 554 15.6036 554 38.8387C554 71.4057 529.925 93.8106 493.887 93.8106H453.528V92.1402H453.518ZM492.067 91.8601C516.562 91.8601 533.676 66.1146 533.676 33.2774C533.676 14.7734 524.354 4.19114 505.43 4.19114H496.798L483.575 87.9693C483.295 90.0597 484.825 91.8702 486.916 91.8702H492.067V91.8601Z" fill="white"/>
<path d="M28.5812 137.68L27.901 129.588C27.801 128.328 27.691 126.807 27.641 125.507H27.5909C27.0408 126.787 26.2006 128.468 25.6005 129.668L21.5696 137.79H20.7595L16.6786 129.668C16.0785 128.488 15.3383 126.887 14.7382 125.557H14.6881C14.6381 126.917 14.5281 128.468 14.4281 129.588L13.7479 137.68H11.8375L13.2278 120.966H14.5881L19.0891 129.948C19.7692 131.308 20.6294 133.009 21.2396 134.429H21.2896C21.8697 133.019 22.6499 131.388 23.38 129.928L27.861 120.966H29.2213L30.6316 137.68H28.5912H28.5812Z" fill="white"/>
<path d="M41.784 137.97C40.9738 137.79 40.0536 137.079 39.8936 135.979C39.3935 137.37 38.0632 137.97 36.6229 137.97C34.3224 137.97 32.8221 136.319 32.8221 134.379C32.8221 132.078 34.6825 130.848 36.7029 130.658L39.6635 130.368V129.428C39.6635 128.168 38.8234 127.277 37.093 127.277C35.9127 127.277 34.7125 127.647 33.9023 128.198L33.4822 126.517C34.4824 125.867 35.7827 125.517 37.203 125.517C39.7936 125.517 41.684 126.987 41.684 129.658V134.769C41.684 135.899 42.3141 136.519 43.0743 136.659L41.794 137.97H41.784ZM39.6635 132.048L37.123 132.288C35.5526 132.448 34.7625 133.339 34.7625 134.409C34.7625 135.479 35.5726 136.239 36.8029 136.239C38.2732 136.239 39.6535 135.139 39.6535 133.389V132.048H39.6635Z" fill="white"/>
<path d="M51.1061 127.827C50.896 127.777 50.556 127.697 50.2159 127.697C48.5155 127.697 46.8352 128.718 46.8352 131.648V137.669H44.8947V125.807H46.8352V128.397H46.8652C47.2553 126.717 48.6155 125.647 50.4259 125.647C50.766 125.647 51.2861 125.697 51.5762 125.807L51.1061 127.827Z" fill="white"/>
<path d="M60.7682 137.68L55.5071 131.998H55.4771V137.68H53.4567V119.036H55.4771V131.478H55.5071L60.7682 125.817H63.1488L57.7776 131.658L63.3788 137.68H60.7582H60.7682Z" fill="white"/>
<path d="M74.8111 130.948L73.7108 132.079H65.9892C65.9892 134.019 67.6095 136.27 70.5501 136.27C72.0205 136.27 73.1407 135.849 74.0109 135.249L73.7708 137.16C72.9307 137.63 71.8604 137.97 70.3101 137.97C66.9094 137.97 63.9987 135.429 63.9987 131.759C63.9987 127.858 66.9794 125.527 69.79 125.527C73.0607 125.527 74.9011 127.828 74.9011 130.088C74.9011 130.428 74.8711 130.718 74.8211 130.948H74.8111ZM69.89 127.208C68.1096 127.208 66.4293 128.698 66.1192 130.508H72.9007C72.9307 130.408 72.9307 130.268 72.9307 130.138C72.9307 128.748 71.8304 127.208 69.89 127.208Z" fill="white"/>
<path d="M84.3934 127.387H80.4625V134.329C80.4625 135.719 81.1927 136.219 82.3729 136.219C82.823 136.219 83.2331 136.139 83.5232 136.009L83.3431 137.579C83.0331 137.739 82.533 137.819 82.0328 137.819C80.0924 137.819 78.5521 136.669 78.5521 134.519V127.397H76.1916V125.827H78.5521V123.316L80.4625 122.316V125.827H84.7534L84.3833 127.397L84.3934 127.387Z" fill="white"/>
<path d="M87.854 123.486C87.4339 123.486 86.5737 122.596 86.5737 122.176C86.5737 121.726 87.4339 120.896 87.854 120.896C88.3041 120.896 89.1643 121.736 89.1643 122.176C89.1643 122.596 88.3041 123.486 87.854 123.486ZM86.8338 137.679V125.817H88.8742V137.679H86.8338Z" fill="white"/>
<path d="M100.297 137.68V129.958C100.297 128.518 99.3265 127.288 97.2861 127.288C95.2457 127.288 94.1654 128.518 94.1654 129.958V137.68H92.145V125.817H94.0054V127.468H94.0354C94.4755 126.397 95.6357 125.527 97.7762 125.527C100.367 125.527 102.307 127.148 102.307 129.768V137.68H100.287H100.297Z" fill="white"/>
<path d="M110.009 143.731C106.818 143.731 104.668 141.95 104.668 139.54C104.668 137.419 106.058 136.289 107.308 136.029L106.048 134.769C106.048 133.879 106.678 133.069 107.668 132.859C106.518 132.338 105.518 131.158 105.518 129.508C105.518 127.207 107.328 125.527 109.919 125.527C110.549 125.527 111.049 125.627 111.459 125.737C111.879 125.867 112.429 125.917 113.03 125.917C113.63 125.917 114.39 125.707 114.81 125.477L115.2 127.157C114.86 127.367 114.07 127.547 113.55 127.527C113.94 127.897 114.28 128.628 114.28 129.518C114.28 131.638 112.629 133.499 109.909 133.499C108.779 133.499 108.178 133.739 108.178 134.289C108.178 134.499 108.389 134.759 108.779 134.889L111.969 136.019C114.01 136.729 115.22 137.83 115.22 139.9C115.22 142.101 113.1 143.751 109.979 143.751L110.009 143.731ZM111.379 137.71L109.049 136.999C107.578 136.999 106.538 138.13 106.538 139.54C106.538 140.82 107.738 142.03 109.969 142.03C112.199 142.03 113.35 140.9 113.35 139.86C113.35 138.82 112.639 138.11 111.389 137.71H111.379ZM109.929 127.207C108.459 127.207 107.388 128.258 107.388 129.488C107.388 130.718 108.459 131.788 109.929 131.788C111.289 131.788 112.439 130.768 112.439 129.488C112.439 128.207 111.369 127.207 109.929 127.207Z" fill="white"/>
<path d="M135.204 137.68L133.344 133.179H126.562L124.732 137.68H122.612L129.603 120.736H130.393L137.385 137.68H135.214H135.204ZM130.783 126.837C130.523 126.187 130.233 125.317 129.993 124.537H129.943C129.733 125.327 129.393 126.187 129.133 126.837L127.303 131.448H132.624L130.793 126.837H130.783Z" fill="white"/>
<path d="M147.777 137.679V136.029H147.747C147.307 137.099 146.147 137.969 144.006 137.969C141.416 137.969 139.475 136.349 139.475 133.729V125.817H141.496V133.539C141.496 134.979 142.466 136.209 144.506 136.209C146.547 136.209 147.627 134.979 147.627 133.539V125.817H149.648V137.679H147.787H147.777Z" fill="white"/>
<path d="M159.699 127.387H155.769V134.329C155.769 135.719 156.499 136.219 157.679 136.219C158.129 136.219 158.539 136.139 158.829 136.009L158.649 137.579C158.339 137.739 157.839 137.819 157.339 137.819C155.399 137.819 153.858 136.669 153.858 134.519V127.397H151.498V125.827H153.858V123.316L155.769 122.316V125.827H160.06L159.689 127.397L159.699 127.387Z" fill="white"/>
<path d="M167.351 137.97C163.81 137.97 161.07 135.399 161.07 131.759C161.07 128.118 163.82 125.527 167.351 125.527C170.882 125.527 173.613 128.098 173.613 131.759C173.613 135.419 170.892 137.97 167.351 137.97ZM167.351 127.358C165.021 127.358 163.11 129.168 163.11 131.809C163.11 134.449 165.021 136.21 167.351 136.21C169.682 136.21 171.572 134.429 171.572 131.809C171.572 129.188 169.662 127.358 167.351 127.358Z" fill="white"/>
<path d="M191.306 137.68V129.848C191.306 128.458 190.676 127.278 188.556 127.278C186.435 127.278 185.705 128.458 185.705 129.848V137.68H183.665V129.848C183.665 128.458 183.065 127.278 180.944 127.278C178.824 127.278 178.063 128.458 178.063 129.848V137.68H176.043V125.817H177.933V127.388H177.963C178.384 126.367 179.434 125.527 181.474 125.527C183.015 125.527 184.435 126.177 185.035 127.418C185.585 126.367 187.055 125.527 188.886 125.527C191.556 125.527 193.337 127.098 193.337 129.668V137.68H191.316H191.306Z" fill="white"/>
<path d="M204.719 137.97C203.909 137.79 202.989 137.079 202.829 135.979C202.329 137.37 200.998 137.97 199.558 137.97C197.258 137.97 195.757 136.319 195.757 134.379C195.757 132.078 197.618 130.848 199.638 130.658L202.599 130.368V129.428C202.599 128.168 201.759 127.277 200.028 127.277C198.848 127.277 197.648 127.647 196.838 128.198L196.417 126.517C197.418 125.867 198.718 125.517 200.138 125.517C202.729 125.517 204.619 126.987 204.619 129.658V134.769C204.619 135.899 205.249 136.519 206.01 136.659L204.729 137.97H204.719ZM202.599 132.048L200.058 132.288C198.488 132.448 197.698 133.339 197.698 134.409C197.698 135.479 198.508 136.239 199.738 136.239C201.208 136.239 202.589 135.139 202.589 133.389V132.048H202.599Z" fill="white"/>
<path d="M214.461 127.387H210.531V134.329C210.531 135.719 211.261 136.219 212.441 136.219C212.891 136.219 213.301 136.139 213.591 136.009L213.411 137.579C213.101 137.739 212.601 137.819 212.101 137.819C210.16 137.819 208.62 136.669 208.62 134.519V127.397H206.26V125.827H208.62V123.316L210.531 122.316V125.827H214.821L214.451 127.397L214.461 127.387Z" fill="white"/>
<path d="M217.922 123.486C217.502 123.486 216.642 122.596 216.642 122.176C216.642 121.726 217.502 120.896 217.922 120.896C218.372 120.896 219.233 121.736 219.233 122.176C219.233 122.596 218.372 123.486 217.922 123.486ZM216.902 137.679V125.817H218.942V137.679H216.902Z" fill="white"/>
<path d="M227.954 137.97C224.424 137.97 221.673 135.399 221.673 131.759C221.673 128.118 224.424 125.527 227.954 125.527C231.485 125.527 234.216 128.098 234.216 131.759C234.216 135.419 231.495 137.97 227.954 137.97ZM227.954 127.358C225.624 127.358 223.714 129.168 223.714 131.809C223.714 134.449 225.624 136.21 227.954 136.21C230.285 136.21 232.175 134.429 232.175 131.809C232.175 129.188 230.265 127.358 227.954 127.358Z" fill="white"/>
<path d="M244.798 137.68V129.958C244.798 128.518 243.828 127.288 241.787 127.288C239.747 127.288 238.667 128.518 238.667 129.958V137.68H236.646V125.817H238.507V127.468H238.537C238.977 126.397 240.137 125.527 242.278 125.527C244.868 125.527 246.808 127.148 246.808 129.768V137.68H244.788H244.798Z" fill="white"/>
<path d="M263.632 121.106C263.132 120.896 262.452 120.736 261.902 120.736C259.961 120.736 258.861 121.866 258.861 124.167V125.817H262.812L262.392 127.437H258.861V137.68H256.841V127.437H254.77V125.817H256.841V124.067C256.841 120.736 258.781 119.036 261.762 119.036C262.652 119.036 263.462 119.166 264.042 119.406L263.622 121.106H263.632Z" fill="white"/>
<path d="M269.893 137.97C266.353 137.97 263.612 135.399 263.612 131.759C263.612 128.118 266.363 125.527 269.893 125.527C273.424 125.527 276.155 128.098 276.155 131.759C276.155 135.419 273.434 137.97 269.893 137.97ZM269.893 127.358C267.563 127.358 265.653 129.168 265.653 131.809C265.653 134.449 267.563 136.21 269.893 136.21C272.224 136.21 274.114 134.429 274.114 131.809C274.114 129.188 272.204 127.358 269.893 127.358Z" fill="white"/>
<path d="M284.787 127.827C284.577 127.777 284.237 127.697 283.896 127.697C282.196 127.697 280.516 128.718 280.516 131.648V137.669H278.575V125.807H280.516V128.397H280.546C280.936 126.717 282.296 125.647 284.106 125.647C284.447 125.647 284.967 125.697 285.257 125.807L284.787 127.827Z" fill="white"/>
<path d="M293.409 137.68V120.966H295.559V135.819H303.131V137.68H293.419H293.409Z" fill="white"/>
<path d="M310.512 137.97C306.982 137.97 304.231 135.399 304.231 131.759C304.231 128.118 306.982 125.527 310.512 125.527C314.043 125.527 316.774 128.098 316.774 131.759C316.774 135.419 314.053 137.97 310.512 137.97ZM310.512 127.358C308.182 127.358 306.271 129.168 306.271 131.809C306.271 134.449 308.182 136.21 310.512 136.21C312.843 136.21 314.733 134.429 314.733 131.809C314.733 129.188 312.823 127.358 310.512 127.358Z" fill="white"/>
<path d="M328.266 128.327C327.266 127.697 326.226 127.387 325.075 127.387C322.635 127.387 320.594 129.138 320.594 131.788C320.594 134.439 322.665 136.189 325.095 136.189C326.296 136.189 327.246 135.949 328.286 135.399L328.076 137.209C327.216 137.629 326.136 137.84 324.935 137.84C321.635 137.84 318.654 135.509 318.654 131.768C318.654 128.027 321.615 125.667 324.935 125.667C326.456 125.667 327.716 126.037 328.656 126.557L328.266 128.337V128.327Z" fill="white"/>
<path d="M339.189 137.97C338.378 137.79 337.458 137.079 337.298 135.979C336.798 137.37 335.468 137.97 334.027 137.97C331.727 137.97 330.227 136.319 330.227 134.379C330.227 132.078 332.087 130.848 334.107 130.658L337.068 130.368V129.428C337.068 128.168 336.228 127.277 334.498 127.277C333.317 127.277 332.117 127.647 331.307 128.198L330.887 126.517C331.887 125.867 333.187 125.517 334.608 125.517C337.198 125.517 339.089 126.987 339.089 129.658V134.769C339.089 135.899 339.719 136.519 340.479 136.659L339.199 137.97H339.189ZM337.068 132.048L334.528 132.288C332.957 132.448 332.167 133.339 332.167 134.409C332.167 135.479 332.977 136.239 334.208 136.239C335.678 136.239 337.058 135.139 337.058 133.389V132.048H337.068Z" fill="white"/>
<path d="M348.931 127.387H345V134.329C345 135.719 345.73 136.219 346.91 136.219C347.36 136.219 347.77 136.139 348.061 136.009L347.88 137.579C347.57 137.739 347.07 137.819 346.57 137.819C344.63 137.819 343.089 136.669 343.089 134.519V127.397H340.729V125.827H343.089V123.316L345 122.316V125.827H349.291L348.921 127.397L348.931 127.387Z" fill="white"/>
<path d="M352.391 123.486C351.971 123.486 351.111 122.596 351.111 122.176C351.111 121.726 351.971 120.896 352.391 120.896C352.841 120.896 353.702 121.736 353.702 122.176C353.702 122.596 352.841 123.486 352.391 123.486ZM351.371 137.679V125.817H353.412V137.679H351.371Z" fill="white"/>
<path d="M362.424 137.97C358.893 137.97 356.142 135.399 356.142 131.759C356.142 128.118 358.893 125.527 362.424 125.527C365.954 125.527 368.685 128.098 368.685 131.759C368.685 135.419 365.964 137.97 362.424 137.97ZM362.424 127.358C360.093 127.358 358.183 129.168 358.183 131.809C358.183 134.449 360.093 136.21 362.424 136.21C364.754 136.21 366.644 134.429 366.644 131.809C366.644 129.188 364.734 127.358 362.424 127.358Z" fill="white"/>
<path d="M379.267 137.68V129.958C379.267 128.518 378.297 127.288 376.257 127.288C374.216 127.288 373.136 128.518 373.136 129.958V137.68H371.115V125.817H372.976V127.468H373.006C373.446 126.397 374.606 125.527 376.747 125.527C379.337 125.527 381.278 127.148 381.278 129.768V137.68H379.257H379.267Z" fill="white"/>
<path d="M395.901 137.68H390.66V120.966H395.031C397.311 120.966 399.642 122.487 399.642 125.237C399.642 126.517 398.991 127.808 397.941 128.248C399.672 128.668 401.272 130.478 401.272 132.649C401.272 135.949 398.551 137.68 395.901 137.68ZM394.721 122.757H392.7V127.678H394.741C396.211 127.678 397.491 126.887 397.491 125.237C397.491 123.587 396.231 122.747 394.711 122.747L394.721 122.757ZM395.401 129.408H392.7V135.899H395.481C397.391 135.899 399.121 134.799 399.121 132.649C399.121 130.498 397.371 129.398 395.401 129.398V129.408Z" fill="white"/>
<path d="M412.244 137.97C411.434 137.79 410.514 137.079 410.354 135.979C409.854 137.37 408.523 137.97 407.083 137.97C404.783 137.97 403.282 136.319 403.282 134.379C403.282 132.078 405.143 130.848 407.163 130.658L410.124 130.368V129.428C410.124 128.168 409.284 127.277 407.553 127.277C406.373 127.277 405.173 127.647 404.362 128.198L403.942 126.517C404.943 125.867 406.243 125.517 407.663 125.517C410.254 125.517 412.144 126.987 412.144 129.658V134.769C412.144 135.899 412.774 136.519 413.534 136.659L412.254 137.97H412.244ZM410.124 132.048L407.583 132.288C406.013 132.448 405.223 133.339 405.223 134.409C405.223 135.479 406.033 136.239 407.263 136.239C408.733 136.239 410.114 135.139 410.114 133.389V132.048H410.124Z" fill="white"/>
<path d="M418.446 137.84C417.035 137.84 415.955 137.47 415.175 136.92L414.915 134.829C415.775 135.589 417.085 136.189 418.476 136.189C419.706 136.189 420.626 135.539 420.626 134.539C420.626 133.539 419.896 132.999 418.666 132.549C416.435 131.758 415.185 130.738 415.185 128.878C415.185 127.017 416.755 125.657 418.926 125.657C420.206 125.657 421.416 126.127 421.886 126.417L421.466 128.068C420.946 127.678 420.076 127.277 418.896 127.277C417.796 127.277 417.065 127.908 417.065 128.798C417.065 129.738 417.716 130.158 418.956 130.608C421.236 131.418 422.567 132.499 422.567 134.459C422.567 136.419 421.076 137.84 418.456 137.84H418.446Z" fill="white"/>
<path d="M435.109 130.948L434.009 132.079H426.287C426.287 134.019 427.908 136.27 430.848 136.27C432.319 136.27 433.439 135.849 434.309 135.249L434.069 137.16C433.229 137.63 432.159 137.97 430.608 137.97C427.208 137.97 424.297 135.429 424.297 131.759C424.297 127.858 427.288 125.527 430.088 125.527C433.359 125.527 435.199 127.828 435.199 130.088C435.199 130.428 435.169 130.718 435.119 130.948H435.109ZM430.178 127.208C428.398 127.208 426.718 128.698 426.408 130.508H433.189C433.219 130.408 433.219 130.268 433.219 130.138C433.219 128.748 432.119 127.208 430.178 127.208Z" fill="white"/>
<path d="M446.582 137.68V136.369H446.552C446.002 137.16 444.802 137.97 442.881 137.97C440.081 137.97 437.07 135.739 437.07 131.758C437.07 128.118 439.66 125.527 443.121 125.527C444.531 125.527 445.972 126.107 446.472 126.657V119.036H448.492V137.68H446.582ZM446.472 128.648C446.002 128.128 444.932 127.367 443.301 127.367C440.971 127.367 439.11 129.178 439.11 131.788C439.11 134.399 440.971 136.219 443.301 136.219C444.842 136.219 445.942 135.429 446.472 134.679V128.658V128.648Z" fill="white"/>
<path d="M463.235 137.68H457.994V120.966H462.365C464.646 120.966 466.976 122.487 466.976 125.237C466.976 126.517 466.326 127.808 465.276 128.248C467.006 128.668 468.607 130.478 468.607 132.649C468.607 135.949 465.886 137.68 463.235 137.68ZM462.055 122.757H460.035V127.678H462.075C463.546 127.678 464.826 126.887 464.826 125.237C464.826 123.587 463.566 122.747 462.045 122.747L462.055 122.757ZM462.735 129.408H460.035V135.899H462.815C464.726 135.899 466.456 134.799 466.456 132.649C466.456 130.498 464.706 129.398 462.735 129.398V129.408Z" fill="white"/>
<path d="M479.479 137.679V136.029H479.449C478.999 137.099 477.849 137.969 475.708 137.969C473.118 137.969 471.177 136.349 471.177 133.729V125.817H473.198V133.539C473.198 134.979 474.168 136.209 476.208 136.209C478.249 136.209 479.329 134.979 479.329 133.539V125.817H481.349V137.679H479.489H479.479Z" fill="white"/>
<path d="M487.411 137.84C486 137.84 484.92 137.47 484.14 136.92L483.88 134.829C484.74 135.589 486.05 136.189 487.441 136.189C488.671 136.189 489.591 135.539 489.591 134.539C489.591 133.539 488.861 132.999 487.631 132.549C485.4 131.758 484.15 130.738 484.15 128.878C484.15 127.017 485.72 125.657 487.891 125.657C489.171 125.657 490.381 126.127 490.851 126.417L490.431 128.068C489.911 127.678 489.041 127.277 487.861 127.277C486.76 127.277 486.03 127.908 486.03 128.798C486.03 129.738 486.68 130.158 487.921 130.608C490.201 131.418 491.531 132.499 491.531 134.459C491.531 136.419 490.041 137.84 487.421 137.84H487.411Z" fill="white"/>
<path d="M495.242 123.486C494.822 123.486 493.962 122.596 493.962 122.176C493.962 121.726 494.822 120.896 495.242 120.896C495.692 120.896 496.553 121.736 496.553 122.176C496.553 122.596 495.692 123.486 495.242 123.486ZM494.222 137.679V125.817H496.263V137.679H494.222Z" fill="white"/>
<path d="M507.685 137.68V129.958C507.685 128.518 506.715 127.288 504.674 127.288C502.634 127.288 501.554 128.518 501.554 129.958V137.68H499.533V125.817H501.394V127.468H501.424C501.864 126.397 503.024 125.527 505.165 125.527C507.755 125.527 509.696 127.148 509.696 129.768V137.68H507.675H507.685Z" fill="white"/>
<path d="M522.958 130.948L521.858 132.079H514.136C514.136 134.019 515.757 136.27 518.697 136.27C520.168 136.27 521.288 135.849 522.158 135.249L521.918 137.16C521.078 137.63 520.008 137.97 518.457 137.97C515.057 137.97 512.146 135.429 512.146 131.759C512.146 127.858 515.137 125.527 517.937 125.527C521.208 125.527 523.048 127.828 523.048 130.088C523.048 130.428 523.018 130.718 522.968 130.948H522.958ZM518.027 127.208C516.247 127.208 514.566 128.698 514.256 130.508H521.038C521.068 130.408 521.068 130.268 521.068 130.138C521.068 128.748 519.968 127.208 518.027 127.208Z" fill="white"/>
<path d="M528.56 137.84C527.149 137.84 526.069 137.47 525.289 136.92L525.029 134.829C525.889 135.589 527.199 136.189 528.59 136.189C529.82 136.189 530.74 135.539 530.74 134.539C530.74 133.539 530.01 132.999 528.78 132.549C526.549 131.758 525.299 130.738 525.299 128.878C525.299 127.017 526.869 125.657 529.04 125.657C530.32 125.657 531.53 126.127 532 126.417L531.58 128.068C531.06 127.678 530.19 127.277 529.01 127.277C527.909 127.277 527.179 127.908 527.179 128.798C527.179 129.738 527.829 130.158 529.07 130.608C531.35 131.418 532.681 132.499 532.681 134.459C532.681 136.419 531.19 137.84 528.57 137.84H528.56Z" fill="white"/>
<path d="M538.042 137.84C536.631 137.84 535.551 137.47 534.771 136.92L534.511 134.829C535.371 135.589 536.681 136.189 538.072 136.189C539.302 136.189 540.222 135.539 540.222 134.539C540.222 133.539 539.492 132.999 538.262 132.549C536.031 131.758 534.781 130.738 534.781 128.878C534.781 127.017 536.351 125.657 538.522 125.657C539.802 125.657 541.012 126.127 541.482 126.417L541.062 128.068C540.542 127.678 539.672 127.277 538.492 127.277C537.392 127.277 536.661 127.908 536.661 128.798C536.661 129.738 537.312 130.158 538.552 130.608C540.832 131.418 542.163 132.499 542.163 134.459C542.163 136.419 540.672 137.84 538.052 137.84H538.042Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 23 KiB

8
public/assets/images/logo.svg Normal file
View File

@ -0,0 +1,8 @@
<svg width="93" height="16" viewBox="0 0 93 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0.00166829 9.48505C0.00166829 3.89671 3.78168 0.00170898 9.20667 0.00170898C10.135 0.00170898 10.945 0.163375 11.99 0.511709C12.8483 0.813375 13.3583 0.975047 13.7067 0.975047C14.0083 0.975047 14.2633 0.836716 14.4017 0.488383L14.4483 0.371714H14.7267L13.8917 5.63504H13.6133L13.59 5.19505C13.52 2.20338 12.0367 0.325043 9.39334 0.325043C5.68334 0.301709 3.38834 5.12504 3.38834 10.76C3.38834 13.82 4.80334 15.6534 7.05168 15.6534C9.71834 15.6534 11.875 13.3584 12.9417 10.7367L13.1267 10.32L13.405 10.3667L12.3617 15.63H12.0833L12.06 15.5367C11.99 15.1884 11.7817 15.0034 11.4567 15.0034C11.155 15.0034 10.645 15.165 9.74 15.4434C8.41833 15.86 7.53667 16 6.70167 16C2.57334 16 0 13.7734 0 9.48338L0.00166829 9.48505Z" fill="white"/>
<path d="M14.3765 15.3517H14.4698C16.0698 15.3517 17.1365 14.3084 18.2498 12.1751L24.4881 0.0933838H26.1815L28.9865 14.3084C29.1248 15.0501 29.4965 15.3517 30.1465 15.3517H30.6565V15.6301H23.8165V15.3517H24.6281C25.3465 15.3517 25.6015 15.0267 25.4631 14.3084L24.6281 9.81006H19.8281L18.6215 12.1517C17.4615 14.4017 17.9498 15.3517 20.1748 15.3517H20.3365V15.6301H14.3765V15.3517ZM24.5798 9.48506L23.3515 3.01506L19.9898 9.48506H24.5815H24.5798Z" fill="white"/>
<path d="M35.0601 15.33C34.4801 15.075 34.0635 14.935 33.7151 14.935C33.3901 14.935 33.1351 15.12 33.0418 15.445L32.9951 15.63H32.7168L33.5751 10.3667H33.8535V11.1317C33.8768 13.96 35.2451 15.63 37.7951 15.63C39.7901 15.63 41.2735 14.2383 41.2735 12.4533C41.2735 11.0383 40.3918 10.2033 38.2351 9.43833C35.2435 8.37167 34.2235 6.91001 34.2235 4.89334C34.2235 1.74001 36.7518 0 39.8118 0C41.0868 0 41.9918 0.301668 42.6635 0.626668C43.2668 0.928335 43.6835 1.09001 44.0085 1.09001C44.3335 1.09001 44.5185 0.905002 44.6585 0.533335L44.7285 0.371674H45.0068L44.1485 5.635H43.8701L43.8235 5.21833C43.5685 2.135 42.6635 0.348338 40.0435 0.348338C38.0718 0.348338 36.6118 1.46167 36.6118 3.17667C36.6118 4.545 37.4935 5.40333 39.7885 6.145C42.8501 7.14167 44.0085 8.58 44.0085 10.7833C44.0085 13.89 41.4801 16 38.0251 16C36.7735 16 35.8218 15.675 35.0568 15.3267L35.0601 15.33Z" fill="white"/>
<path d="M48.6718 15.3516H49.2984C49.9251 15.3516 50.4118 14.935 50.5034 14.3083L52.6601 0.696625H52.0801C49.7618 0.696625 48.0684 2.17996 47.1418 4.56996L47.0034 4.94162H46.7251L47.7918 0.373291H60.8701L60.4984 4.94162H60.2201L60.1501 4.56996C59.8018 2.15829 58.8984 0.696625 56.4868 0.696625H55.9068L53.7501 14.3083C53.6568 14.935 54.0051 15.3516 54.6551 15.3516H55.4201V15.63H48.6718V15.3516Z" fill="white"/>
<path d="M58.0166 15.3517H58.1099C59.7099 15.3517 60.7766 14.3084 61.89 12.1751L68.1283 0.0933838H69.8216L72.6266 14.3084C72.7649 15.0501 73.1366 15.3517 73.7866 15.3517H74.2966V15.6301H67.4566V15.3517H68.2683C68.9866 15.3517 69.2416 15.0267 69.1033 14.3084L68.2683 9.81006H63.4683L62.2616 12.1517C61.1016 14.4017 61.5899 15.3517 63.8149 15.3517H63.9766V15.6301H58.0166V15.3517ZM68.2199 9.48506L66.9916 3.01506L63.6299 9.48506H68.2216H68.2199Z" fill="white"/>
<path d="M75.5698 15.3517H76.1965C76.8232 15.3517 77.2865 14.935 77.4032 14.3084L79.3748 1.69337C79.4915 1.0667 79.1198 0.650035 78.5165 0.650035H77.7281V0.371704H84.7081C89.4615 0.371704 92.3132 2.59837 92.3132 6.47003C92.3132 11.8967 88.3015 15.63 82.2965 15.63H75.5715V15.3517H75.5698ZM81.9932 15.3067C86.0748 15.3067 88.9265 11.0167 88.9265 5.54503C88.9265 2.4617 87.3732 0.698364 84.2198 0.698364H82.7815L80.5781 14.6584C80.5315 15.0067 80.7865 15.3084 81.1348 15.3084H81.9932V15.3067Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.5 KiB

BIN
public/assets/images/social-facebook.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 52 KiB

BIN
public/assets/images/social-facebook.svg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 52 KiB

BIN
public/assets/images/social-instagram.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 424 KiB

BIN
public/assets/images/social-instagram.svg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 424 KiB

BIN
public/assets/images/social-youtube.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 122 KiB

BIN
public/assets/images/social-youtube.svg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 122 KiB

3
public/assets/images/star-icon.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M15.0001 7.5C15.2717 7.50006 15.5359 7.58858 15.7527 7.75216C15.9695 7.91575 16.1271 8.14551 16.2017 8.40667L17.5567 13.15C17.8485 14.1715 18.3958 15.1018 19.147 15.853C19.8982 16.6043 20.8285 17.1516 21.8501 17.4433L26.5934 18.7983C26.8544 18.8731 27.084 19.0308 27.2474 19.2476C27.4108 19.4644 27.4992 19.7285 27.4992 20C27.4992 20.2715 27.4108 20.5356 27.2474 20.7524C27.084 20.9692 26.8544 21.1269 26.5934 21.2017L21.8501 22.5567C20.8285 22.8484 19.8982 23.3957 19.147 24.147C18.3958 24.8982 17.8485 25.8285 17.5567 26.85L16.2017 31.5933C16.127 31.8543 15.9693 32.0839 15.7525 32.2473C15.5357 32.4107 15.2716 32.4991 15.0001 32.4991C14.7286 32.4991 14.4645 32.4107 14.2477 32.2473C14.0309 32.0839 13.8732 31.8543 13.7984 31.5933L12.4434 26.85C12.1517 25.8285 11.6043 24.8982 10.8531 24.147C10.1019 23.3957 9.17161 22.8484 8.15008 22.5567L3.40674 21.2017C3.14575 21.1269 2.91619 20.9692 2.75278 20.7524C2.58937 20.5356 2.50098 20.2715 2.50098 20C2.50098 19.7285 2.58937 19.4644 2.75278 19.2476C2.91619 19.0308 3.14575 18.8731 3.40674 18.7983L8.15008 17.4433C9.17161 17.1516 10.1019 16.6043 10.8531 15.853C11.6043 15.1018 12.1517 14.1715 12.4434 13.15L13.7984 8.40667C13.873 8.14551 14.0306 7.91575 14.2475 7.75216C14.4643 7.58858 14.7285 7.50006 15.0001 7.5ZM30.0001 2.5C30.2789 2.49984 30.5498 2.59294 30.7697 2.76448C30.9896 2.93601 31.1457 3.17614 31.2134 3.44667L31.6434 5.17333C32.0367 6.74 33.2601 7.96333 34.8267 8.35667L36.5534 8.78667C36.8245 8.8538 37.0652 9.00976 37.2373 9.22967C37.4094 9.44957 37.5029 9.72077 37.5029 10C37.5029 10.2792 37.4094 10.5504 37.2373 10.7703C37.0652 10.9902 36.8245 11.1462 36.5534 11.2133L34.8267 11.6433C33.2601 12.0367 32.0367 13.26 31.6434 14.8267L31.2134 16.5533C31.1463 16.8244 30.9903 17.0651 30.7704 17.2372C30.5505 17.4093 30.2793 17.5028 30.0001 17.5028C29.7208 17.5028 29.4496 17.4093 29.2297 17.2372C29.0098 17.0651 28.8539 16.8244 28.7867 16.5533L28.3567 14.8267C28.1644 14.0574 27.7667 13.3548 27.2059 12.7941C26.6452 12.2334 25.9427 11.8356 25.1734 11.6433L23.4467 11.2133C23.1757 11.1462 22.9349 10.9902 22.7629 10.7703C22.5908 10.5504 22.4973 10.2792 22.4973 10C22.4973 9.72077 22.5908 9.44957 22.7629 9.22967C22.9349 9.00976 23.1757 8.8538 23.4467 8.78667L25.1734 8.35667C25.9427 8.16435 26.6452 7.76658 27.2059 7.20587C27.7667 6.64517 28.1644 5.94262 28.3567 5.17333L28.7867 3.44667C28.8544 3.17614 29.0106 2.93601 29.2305 2.76448C29.4503 2.59294 29.7212 2.49984 30.0001 2.5ZM27.5001 25C27.7626 24.9999 28.0185 25.0824 28.2315 25.2358C28.4445 25.3893 28.6038 25.6059 28.6867 25.855L29.3434 27.8267C29.5934 28.5717 30.1767 29.1583 30.9234 29.4067L32.8951 30.065C33.1434 30.1484 33.3592 30.3076 33.5121 30.5202C33.665 30.7328 33.7472 30.9881 33.7472 31.25C33.7472 31.5119 33.665 31.7672 33.5121 31.9798C33.3592 32.1924 33.1434 32.3517 32.8951 32.435L30.9234 33.0933C30.1784 33.3433 29.5917 33.9267 29.3434 34.6733L28.6851 36.645C28.6017 36.8933 28.4425 37.1091 28.2299 37.262C28.0172 37.4149 27.762 37.4972 27.5001 37.4972C27.2382 37.4972 26.9829 37.4149 26.7703 37.262C26.5577 37.1091 26.3984 36.8933 26.3151 36.645L25.6567 34.6733C25.534 34.3055 25.3273 33.9712 25.0531 33.697C24.7789 33.4228 24.4446 33.2161 24.0767 33.0933L22.1051 32.435C21.8568 32.3517 21.641 32.1924 21.4881 31.9798C21.3352 31.7672 21.2529 31.5119 21.2529 31.25C21.2529 30.9881 21.3352 30.7328 21.4881 30.5202C21.641 30.3076 21.8568 30.1484 22.1051 30.065L24.0767 29.4067C24.8217 29.1567 25.4084 28.5733 25.6567 27.8267L26.3151 25.855C26.3979 25.6062 26.557 25.3898 26.7696 25.2363C26.9823 25.0829 27.2378 25.0002 27.5001 25Z" fill="#DFC7FD"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.6 KiB

11
src/components/Header.tsx
View File

@ -4,13 +4,12 @@ import React from 'react';
const Header: React.FC = () => {
return (
<header className="landing-header">
<div className="header-logo">CASTAD</div>
<div className="header-avatar">
<img
src="https://picsum.photos/seed/user/100/100"
alt="User Profile"
/>
<div className="header-logo">
<img src="/assets/images/logo.svg" alt="CASTAD" />
</div>
<button className="header-login-btn">
로그인
</button>
</header>
);
};

28
src/pages/Analysis/LoadingSection.tsx
View File

@ -4,20 +4,24 @@ import React from 'react';
const LoadingSection: React.FC = () => {
return (
<div className="loading-container">
<div className="loading-spinner">
{/* Spinning Outer Ring */}
<div className="loading-ring"></div>
{/* Pulsing center icon */}
<div className="loading-dot">
<div className="loading-dot-inner"></div>
</div>
<div className="loading-content">
{/* Logo */}
<div className="loading-logo">
<img src="/assets/images/loading-logo.svg" alt="CASTAD" />
</div>
<div className="loading-text">
<h2 className="loading-title">비즈니스 분석 중</h2>
<p className="loading-description">
AI가 입력하신 정보를 바탕으로 마케팅 핵심 가치를 추출하고 있습니다...
</p>
{/* Loading Spinner and Text */}
<div className="loading-section">
<h2 className="loading-title">브랜드 분석 중</h2>
<div className="loading-spinner-wrapper">
<img
src="/assets/images/loading-spinner.svg"
alt="Loading"
className="loading-spinner-icon"
/>
</div>
</div>
</div>
</div>
);

135
src/pages/Dashboard/AssetManagementContent.tsx
View File

@ -1,5 +1,5 @@
import React, { useRef, useState } from 'react';
import React, { useRef, useState, useEffect } from 'react';
import { ImageItem, ImageUrlItem } from '../../types/api';
import { uploadImages } from '../../utils/api';
@ -11,6 +11,8 @@ interface AssetManagementContentProps {
onAddImages: (files: File[]) => void;
}
type VideoRatio = 'vertical' | 'horizontal';
const AssetManagementContent: React.FC<AssetManagementContentProps> = ({
onBack,
onNext,
@ -22,6 +24,21 @@ const AssetManagementContent: React.FC<AssetManagementContentProps> = ({
const imageListRef = useRef<HTMLDivElement>(null);
const [isUploading, setIsUploading] = useState(false);
const [uploadError, setUploadError] = useState<string | null>(null);
const [videoRatio, setVideoRatio] = useState<VideoRatio>('vertical');
// Load video ratio from localStorage on mount
useEffect(() => {
const savedRatio = localStorage.getItem('castad_video_ratio') as VideoRatio;
if (savedRatio === 'vertical' || savedRatio === 'horizontal') {
setVideoRatio(savedRatio);
}
}, []);
// Save video ratio to localStorage when it changes
const handleVideoRatioChange = (ratio: VideoRatio) => {
setVideoRatio(ratio);
localStorage.setItem('castad_video_ratio', ratio);
};
const getImageSrc = (item: ImageItem): string => {
return item.type === 'url' ? item.url : item.preview;
@ -105,54 +122,60 @@ const AssetManagementContent: React.FC<AssetManagementContentProps> = ({
return (
<main className="page-container">
{/* Back Button */}
<div className="back-button-container">
<button onClick={onBack} className="btn-back">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
{/* Header with Back Button and Progress */}
<div className="asset-header">
<button onClick={onBack} className="btn-back-new">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
<path d="M15 18l-6-6 6-6" />
</svg>
뒤로가기
<span>뒤로가기</span>
</button>
<div className="progress-indicator">
<div className="progress-label">
<span className="progress-text">단계</span>
<div className="progress-numbers">
<span className="progress-current">1</span>
<span className="progress-divider">/</span>
<span className="progress-total">2</span>
</div>
</div>
<div className="progress-bar-wrapper">
<div className="progress-bar-fill" style={{ width: '50%' }}></div>
</div>
</div>
</div>
{/* Header */}
<div className="page-header">
<h1 className="page-title">브랜드 에셋</h1>
<p className="page-subtitle">
쉽고 빠르게, 브랜드 소셜 미디어 캠페인을 만드세요.
</p>
</div>
{/* Title */}
<h1 className="asset-title">브랜드 에셋</h1>
{/* Main Content */}
<div className="main-content">
{/* Selected Images Card */}
<div className="card card-flex card-flex-2 card-overflow-hidden">
<div className="flex-between mb-4 shrink-0">
<h3 className="section-title mb-0">선택된 이미지</h3>
<span className="text-gray-400 text-sm">{imageList.length}장</span>
</div>
{/* Main Content Container */}
<div className="asset-container">
{/* Left Column - Selected Images */}
<div className="asset-column asset-column-left">
<h3 className="asset-section-title">선택된 이미지</h3>
<div
ref={imageListRef}
onWheel={handleImageListWheel}
className="overflow-y-auto flex-1 min-h-0 custom-scrollbar"
className="asset-image-list"
style={{ overscrollBehavior: 'contain' }}
>
{imageList.length > 0 ? (
<div className="image-grid">
<div className="asset-image-grid">
{imageList.map((item, i) => (
<div key={i} className="image-item">
<div key={i} className="asset-image-item">
<img
src={getImageSrc(item)}
alt={`이미지 ${i + 1}`}
/>
{item.type === 'file' && (
<div className="image-item-badge">NEW</div>
<div className="asset-image-badge">업로드</div>
)}
<button
onClick={() => onRemoveImage(i)}
className="image-item-remove"
className="asset-image-remove"
>
<svg className="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
<line x1="18" y1="6" x2="6" y2="18"/>
<line x1="6" y1="6" x2="18" y2="18"/>
</svg>
@ -160,36 +183,24 @@ const AssetManagementContent: React.FC<AssetManagementContentProps> = ({
</div>
))}
</div>
) : (
<div className="flex-center text-gray-500 text-base h-full">
이미지가 없습니다
</div>
)}
) : null}
</div>
</div>
{/* Upload Card */}
<div className="card card-flex card-flex-1" style={{ minHeight: '200px' }}>
<h3 className="section-title">이미지 업로드</h3>
{/* Right Column - Upload and Video Ratio */}
<div className="asset-column asset-column-right">
{/* Image Upload Section */}
<div className="asset-upload-section">
<h3 className="asset-section-title">이미지 업로드</h3>
<div
onClick={handleFileSelect}
onDragOver={handleDragOver}
onDrop={handleDrop}
className="upload-zone"
className="asset-upload-zone"
>
<div className="upload-zone-icon">
<svg className="w-12 h-12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
<polyline points="17 8 12 3 7 8"/>
<line x1="12" y1="3" x2="12" y2="15"/>
</svg>
</div>
<p className="upload-zone-title">
<p className="asset-upload-text">
이미지를 드래그하여<br/>업로드
</p>
<p className="upload-zone-subtitle">
또는 클릭하여 파일 선택
</p>
</div>
<input
ref={fileInputRef}
@ -200,17 +211,43 @@ const AssetManagementContent: React.FC<AssetManagementContentProps> = ({
className="hidden"
/>
</div>
{/* Video Ratio Section */}
<div className="asset-ratio-section">
<h3 className="asset-section-title">영상 비율</h3>
<div className="asset-ratio-buttons">
<button
onClick={() => handleVideoRatioChange('vertical')}
className={`asset-ratio-button ${videoRatio === 'vertical' ? 'active' : ''}`}
>
<div className="asset-ratio-icon asset-ratio-icon-vertical">
<div className="asset-ratio-box"></div>
</div>
<span>9:16</span>
</button>
<button
onClick={() => handleVideoRatioChange('horizontal')}
className={`asset-ratio-button ${videoRatio === 'horizontal' ? 'active' : ''}`}
>
<div className="asset-ratio-icon asset-ratio-icon-horizontal">
<div className="asset-ratio-box"></div>
</div>
<span>16:9</span>
</button>
</div>
</div>
</div>
</div>
{/* Bottom Button */}
<div className="bottom-button-container">
<div className="asset-bottom">
{uploadError && (
<p className="text-red-500 text-sm mb-2">{uploadError}</p>
)}
<button
onClick={handleNextWithUpload}
disabled={imageList.length === 0 || isUploading}
className={`btn-primary ${imageList.length === 0 || isUploading ? 'disabled' : ''}`}
className="asset-next-button"
>
{isUploading ? '업로드 중...' : '다음 단계'}
</button>

173
src/pages/Dashboard/CompletionContent.tsx
View File

@ -5,6 +5,8 @@ import { generateVideo, waitForVideoComplete } from '../../utils/api';
interface CompletionContentProps {
onBack: () => void;
songTaskId: string | null;
onVideoStatusChange?: (status: 'idle' | 'generating' | 'complete' | 'error') => void;
onVideoProgressChange?: (progress: number) => void;
}
type VideoStatus = 'idle' | 'generating' | 'polling' | 'complete' | 'error';
@ -20,17 +22,38 @@ interface SavedVideoState {
timestamp: number;
}
const CompletionContent: React.FC<CompletionContentProps> = ({ onBack, songTaskId }) => {
const CompletionContent: React.FC<CompletionContentProps> = ({
onBack,
songTaskId,
onVideoStatusChange,
onVideoProgressChange
}) => {
const [selectedSocials, setSelectedSocials] = useState<string[]>([]);
const [videoStatus, setVideoStatus] = useState<VideoStatus>('idle');
const [videoUrl, setVideoUrl] = useState<string | null>(null);
const [errorMessage, setErrorMessage] = useState<string | null>(null);
const [statusMessage, setStatusMessage] = useState('');
const [renderProgress, setRenderProgress] = useState(0); // 영상 렌더링 진행률 (0-100)
const [isPlaying, setIsPlaying] = useState(false);
const [progress, setProgress] = useState(0);
const videoRef = useRef<HTMLVideoElement>(null);
const hasStartedGeneration = useRef(false);
// Notify parent of video status changes
useEffect(() => {
if (onVideoStatusChange) {
const mappedStatus = videoStatus === 'polling' ? 'generating' : videoStatus;
onVideoStatusChange(mappedStatus);
}
}, [videoStatus, onVideoStatusChange]);
// Notify parent of progress changes
useEffect(() => {
if (onVideoProgressChange) {
onVideoProgressChange(renderProgress);
}
}, [renderProgress, onVideoProgressChange]);
const saveToStorage = (videoTaskId: string, currentSongTaskId: string, status: VideoStatus, url: string | null) => {
const data: SavedVideoState = {
videoTaskId,
@ -74,7 +97,11 @@ const CompletionContent: React.FC<CompletionContentProps> = ({ onBack, songTaskI
setErrorMessage(null);
try {
const videoResponse = await generateVideo(songTaskId);
// Get video ratio from localStorage (default to 'vertical' if not set)
const savedRatio = localStorage.getItem('castad_video_ratio');
const orientation = (savedRatio === 'horizontal' || savedRatio === 'vertical') ? savedRatio : 'vertical';
const videoResponse = await generateVideo(songTaskId, orientation);
if (!videoResponse.success) {
throw new Error(videoResponse.error_message || '영상 생성 요청에 실패했습니다.');
@ -96,7 +123,7 @@ const CompletionContent: React.FC<CompletionContentProps> = ({ onBack, songTaskI
}
};
// 상태별 한글 메시지 매핑
// 상태별 한글 메시지 및 진행률 매핑
const getStatusMessage = (status: string): string => {
switch (status) {
case 'planned':
@ -114,6 +141,24 @@ const CompletionContent: React.FC<CompletionContentProps> = ({ onBack, songTaskI
}
};
// 상태별 진행률 계산
const getProgressForStatus = (status: string): number => {
switch (status) {
case 'planned':
return 20;
case 'waiting':
return 40;
case 'transcribing':
return 60;
case 'rendering':
return 80;
case 'succeeded':
return 100;
default:
return 0;
}
};
const pollVideoStatus = async (videoTaskId: string, currentSongTaskId: string) => {
try {
// 영상 생성 상태 폴링 (3분 타임아웃, 3초 간격)
@ -121,6 +166,7 @@ const CompletionContent: React.FC<CompletionContentProps> = ({ onBack, songTaskI
videoTaskId,
(status: string) => {
setStatusMessage(getStatusMessage(status));
setRenderProgress(getProgressForStatus(status));
}
);
@ -227,44 +273,54 @@ const CompletionContent: React.FC<CompletionContentProps> = ({ onBack, songTaskI
};
const socials = [
{ id: 'Youtube', email: 'o2ocorp@o2o.kr', color: '#ff0000', icon: <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><path d="M19.615 3.184c-3.604-.246-11.631-.245-15.23 0-3.897.266-4.356 2.62-4.385 8.816.029 6.185.484 8.549 4.385 8.816 3.6.245 11.626.246 15.23 0 3.897-.266 4.356-2.62 4.385-8.816-.029-6.185-.484-8.549-4.385-8.816zm-10.615 12.816v-8l8 4-8 4z"/></svg> },
{ id: 'Instagram', email: 'o2ocorp@o2o.kr', color: '#e4405f', icon: <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259 0 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.791-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.209-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/></svg> },
{ id: 'Youtube', email: 'o2ocorp@o2o.kr', logo: '/assets/images/social-youtube.png' },
{ id: 'Instagram', email: 'o2ocorp@o2o.kr', logo: '/assets/images/social-instagram.png' },
{ id: 'Facebook', email: 'o2ocorp@o2o.kr', logo: '/assets/images/social-facebook.png' },
];
const isLoading = videoStatus === 'generating' || videoStatus === 'polling';
return (
<main className="completion-container">
{/* Back Button */}
<div className="back-button-container">
<button onClick={onBack} className="btn-back">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
<main className="page-container">
{/* Header with Back Button and Progress */}
<div className="asset-header">
<button onClick={onBack} className="btn-back-new">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
<path d="M15 18l-6-6 6-6" />
</svg>
뒤로가기
<span>뒤로가기</span>
</button>
<div className="progress-indicator">
<div className="progress-label">
<span className="progress-text">단계</span>
<div className="progress-numbers">
<span className="progress-current">2</span>
<span className="progress-divider">/</span>
<span className="progress-total">2</span>
</div>
</div>
<div className="progress-bar-wrapper">
<div
className="progress-bar-fill"
style={{ width: videoStatus === 'complete' ? '100%' : `${renderProgress}%` }}
></div>
</div>
</div>
</div>
{/* Header */}
<div className="page-header">
<h1 className="page-title">
{/* Title */}
<h1 className="completion-title">
{isLoading ? '영상 생성 중' : videoStatus === 'error' ? '영상 생성 실패' : '콘텐츠 제작 완료'}
</h1>
<p className="page-subtitle">
{isLoading
? statusMessage || '잠시만 기다려주세요...'
: videoStatus === 'error'
? errorMessage || '오류가 발생했습니다.'
: '인스타그램 릴스 및 틱톡에 최적화된 고성능 영상을 제작했습니다.'}
</p>
</div>
{/* Main Content */}
<div className="completion-content">
{/* Main Content Container */}
<div className="completion-container">
{/* Left: Video Preview */}
<div className="video-preview-card">
<h3 className="section-title mb-4 shrink-0">이미지 및 영상</h3>
<div className="completion-column completion-column-left video-preview-card">
<h3 className="asset-section-title">이미지 및 영상</h3>
<div className="completion-video-wrapper">
<div className="video-container">
{isLoading ? (
/* Loading State */
@ -290,7 +346,8 @@ const CompletionContent: React.FC<CompletionContentProps> = ({ onBack, songTaskI
</button>
</div>
) : videoUrl ? (
/* Video Player */
<>
{/* Video Player */}
<video
ref={videoRef}
src={videoUrl}
@ -299,6 +356,17 @@ const CompletionContent: React.FC<CompletionContentProps> = ({ onBack, songTaskI
onEnded={handleVideoEnded}
onClick={togglePlayPause}
/>
{/* Video Overlay */}
<div className="video-overlay">
<div className="video-overlay-content">
<h3 className="video-overlay-title">
군산, 그 시간 속에 머물다<br/>
스테이, 머뭄
</h3>
<span className="video-overlay-logo">CASTAD</span>
</div>
</div>
</>
) : (
<div className="video-pattern"></div>
)}
@ -321,55 +389,53 @@ const CompletionContent: React.FC<CompletionContentProps> = ({ onBack, songTaskI
</div>
)}
</div>
</div>
{/* Tags - only show when complete */}
{/* AI Optimization Tags - only show when complete */}
{videoStatus === 'complete' && (
<div className="tags-container">
{['AI 최적화', '색상 보정', '다이나믹 자막', '비트 싱크', 'SEO 메타 태그'].map(tag => (
<span key={tag} className="tag-dot">
{tag}
</span>
<div className="ai-optimization-section">
<h3 className="ai-optimization-title">AI 최적화</h3>
<div className="ai-optimization-tags">
{['색상 보정', '다이나믹 자막', '비트 싱크', 'SEO 메타 태그'].map(tag => (
<div key={tag} className="ai-tag">
<div className="ai-tag-dot"></div>
<span className="ai-tag-text">{tag}</span>
</div>
))}
</div>
</div>
)}
</div>
{/* Right: Sharing */}
<div className="sharing-card">
<h3 className="section-title mb-6 shrink-0">공유</h3>
<div className="completion-column completion-column-right sharing-card">
<div className="sharing-content">
<h3 className="asset-section-title">공유</h3>
<div className="social-list custom-scrollbar">
<div className="social-list-new">
{socials.map(social => {
const isSelected = selectedSocials.includes(social.id);
return (
<div
key={social.id}
onClick={() => videoStatus === 'complete' && toggleSocial(social.id)}
className={`social-card ${isSelected ? 'selected' : ''} ${videoStatus !== 'complete' ? 'disabled' : ''}`}
className={`completion-social-card ${videoStatus !== 'complete' ? 'disabled' : ''}`}
>
<div
className="social-icon"
style={{ backgroundColor: social.color }}
>
<div className="social-icon-inner">{social.icon}</div>
{isSelected && (
<div className="social-check">
<svg className="w-3 h-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="4"><polyline points="20 6 9 17 4 12"/></svg>
<div className="completion-social-info">
<img src={social.logo} alt={social.id} className="completion-social-logo" />
<span className="completion-social-name">{social.id}</span>
</div>
)}
</div>
<span className="social-name">
{social.id}
</span>
<span className="social-email">{social.email}</span>
<span className="completion-social-email">{social.email}</span>
</div>
);
})}
</div>
</div>
<div className="sharing-actions">
<button
disabled={selectedSocials.length === 0 || videoStatus !== 'complete'}
className="btn-deploy"
className="btn-completion-deploy"
>
소셜 채널에 배포
</button>
@ -377,12 +443,13 @@ const CompletionContent: React.FC<CompletionContentProps> = ({ onBack, songTaskI
<button
onClick={handleDownload}
disabled={videoStatus !== 'complete' || !videoUrl}
className="btn-download"
className="btn-completion-download"
>
MP4 파일 다운로드
</button>
</div>
</div>
</div>
</main>
);
};

14
src/pages/Dashboard/GenerationFlow.tsx
View File

@ -52,6 +52,8 @@ const GenerationFlow: React.FC<GenerationFlowProps> = ({ onHome, initialActiveIt
const [maxWizardIndex, setMaxWizardIndex] = useState(savedWizardStep ? parseInt(savedWizardStep, 10) : 0);
const [songTaskId, setSongTaskId] = useState<string | null>(savedSongTaskId);
const [imageTaskId, setImageTaskId] = useState<string | null>(savedImageTaskId);
const [videoGenerationStatus, setVideoGenerationStatus] = useState<'idle' | 'generating' | 'complete' | 'error'>('idle');
const [videoGenerationProgress, setVideoGenerationProgress] = useState(0);
// URL 이미지를 ImageItem 형태로 변환하여 초기화
const [imageList, setImageList] = useState<ImageItem[]>(
@ -75,7 +77,8 @@ const GenerationFlow: React.FC<GenerationFlowProps> = ({ onHome, initialActiveIt
file,
preview: URL.createObjectURL(file),
}));
setImageList(prev => [...prev, ...newImages]);
// 새로 업로드된 이미지를 배열 앞에 추가 (최신 이미지가 상단에 표시)
setImageList(prev => [...newImages, ...prev]);
};
// 홈 버튼(로고) 클릭 시 모든 상태 초기화 후 홈으로 이동
@ -177,6 +180,11 @@ const GenerationFlow: React.FC<GenerationFlowProps> = ({ onHome, initialActiveIt
<AssetManagementContent
onBack={() => setActiveItem('대시보드')}
onNext={(taskId: string) => {
// Clear video generation state to start fresh
localStorage.removeItem(VIDEO_GENERATION_KEY);
setVideoGenerationStatus('idle');
setVideoGenerationProgress(0);
setImageTaskId(taskId);
localStorage.setItem(IMAGE_TASK_ID_KEY, taskId);
scrollToWizardSection(1);
@ -197,6 +205,8 @@ const GenerationFlow: React.FC<GenerationFlowProps> = ({ onHome, initialActiveIt
}}
businessInfo={businessInfo}
imageTaskId={imageTaskId}
videoGenerationStatus={videoGenerationStatus}
videoGenerationProgress={videoGenerationProgress}
/>
</div>
{/* Step 2: Completion */}
@ -204,6 +214,8 @@ const GenerationFlow: React.FC<GenerationFlowProps> = ({ onHome, initialActiveIt
<CompletionContent
onBack={() => scrollToWizardSection(1)}
songTaskId={songTaskId}
onVideoStatusChange={setVideoGenerationStatus}
onVideoProgressChange={setVideoGenerationProgress}
/>
</div>
</div>

396
src/pages/Dashboard/SoundStudioContent.tsx
View File

@ -14,6 +14,8 @@ interface SoundStudioContentProps {
onNext: (songTaskId: string) => void;
businessInfo?: BusinessInfo;
imageTaskId: string | null;
videoGenerationStatus?: 'idle' | 'generating' | 'complete' | 'error';
videoGenerationProgress?: number;
}
type GenerationStatus = 'idle' | 'generating_lyric' | 'generating_song' | 'polling' | 'complete' | 'error';
@ -30,10 +32,26 @@ const STORAGE_KEY = 'castad_song_generation';
const STORAGE_EXPIRY = 30 * 60 * 1000;
const MAX_RETRY_COUNT = 3;
const SoundStudioContent: React.FC<SoundStudioContentProps> = ({ onBack, onNext, businessInfo, imageTaskId }) => {
const LANGUAGE_FLAGS: Record<string, string> = {
'한국어': '🇰🇷',
'English': '🇺🇸',
'中文': '🇨🇳',
'日本語': '🇯🇵',
'ไทย': '🇹🇭',
'Tiếng Việt': '🇻🇳',
};
const SoundStudioContent: React.FC<SoundStudioContentProps> = ({
onBack,
onNext,
businessInfo,
imageTaskId,
videoGenerationStatus = 'idle',
videoGenerationProgress = 0
}) => {
const [selectedType, setSelectedType] = useState('보컬');
const [selectedLang, setSelectedLang] = useState('한국어');
const [selectedGenre, setSelectedGenre] = useState('AI 추천');
const [selectedGenre, setSelectedGenre] = useState('자동 선택');
const [progress, setProgress] = useState(0);
const [isDragging, setIsDragging] = useState(false);
const [status, setStatus] = useState<GenerationStatus>('idle');
@ -47,9 +65,11 @@ const SoundStudioContent: React.FC<SoundStudioContentProps> = ({ onBack, onNext,
const [statusMessage, setStatusMessage] = useState('');
const [retryCount, setRetryCount] = useState(0);
const [songTaskId, setSongTaskId] = useState<string | null>(null);
const [isLanguageDropdownOpen, setIsLanguageDropdownOpen] = useState(false);
const progressBarRef = useRef<HTMLDivElement>(null);
const audioRef = useRef<HTMLAudioElement>(null);
const languageDropdownRef = useRef<HTMLDivElement>(null);
const saveToStorage = (taskId: string, sunoTaskId: string, currentLyrics: string, currentStatus: GenerationStatus) => {
const data: SavedGenerationState = {
@ -98,6 +118,23 @@ const SoundStudioContent: React.FC<SoundStudioContentProps> = ({ onBack, onNext,
}
}, []);
// Close language dropdown when clicking outside
useEffect(() => {
const handleClickOutside = (event: MouseEvent) => {
if (languageDropdownRef.current && !languageDropdownRef.current.contains(event.target as Node)) {
setIsLanguageDropdownOpen(false);
}
};
if (isLanguageDropdownOpen) {
document.addEventListener('mousedown', handleClickOutside);
}
return () => {
document.removeEventListener('mousedown', handleClickOutside);
};
}, [isLanguageDropdownOpen]);
const resumePolling = async (taskId: string, sunoTaskId: string, currentLyrics: string, currentRetryCount: number = 0) => {
try {
const downloadResponse = await waitForSongComplete(
@ -153,10 +190,14 @@ const SoundStudioContent: React.FC<SoundStudioContentProps> = ({ onBack, onNext,
try {
const language = LANGUAGE_MAP[selectedLang] || 'Korean';
const genreMap: Record<string, string> = {
'AI 추천': 'pop',
'로파이': 'lofi',
'힙합': 'hip-hop',
'어쿠스틱': 'acoustic',
'자동 선택': 'pop',
'K-POP': 'kpop',
'발라드': 'ballad',
'Hip-Hop': 'hip-hop',
'R&B': 'rnb',
'EDM': 'edm',
'JAZZ': 'jazz',
'ROCK': 'rock',
};
const songResponse = await generateSong(imageTaskId, {
@ -322,10 +363,14 @@ const SoundStudioContent: React.FC<SoundStudioContentProps> = ({ onBack, onNext,
setStatusMessage('음악을 생성하고 있습니다...');
const genreMap: Record<string, string> = {
'AI 추천': 'pop',
'로파이': 'lofi',
'힙합': 'hip-hop',
'어쿠스틱': 'acoustic',
'자동 선택': 'pop',
'K-POP': 'kpop',
'발라드': 'ballad',
'Hip-Hop': 'hip-hop',
'R&B': 'rnb',
'EDM': 'edm',
'JAZZ': 'jazz',
'ROCK': 'rock',
};
const songResponse = await generateSong(imageTaskId, {
@ -369,50 +414,54 @@ const SoundStudioContent: React.FC<SoundStudioContentProps> = ({ onBack, onNext,
const isGenerating = status === 'generating_lyric' || status === 'generating_song' || status === 'polling';
return (
<div className="flex-col h-full overflow-hidden" style={{ display: 'flex' }}>
<main className="page-container">
{audioUrl && (
<audio ref={audioRef} src={audioUrl} preload="metadata" />
)}
{/* Header Section */}
<div className="shrink-0 p-6 md:p-8 pb-0">
<div className="back-button-container">
<button onClick={onBack} className="btn-back">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
{/* Header with Progress */}
<div className="sound-studio-header">
<button onClick={onBack} className="btn-back-new">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
<path d="M15 18l-6-6 6-6" />
</svg>
뒤로가기
</button>
<div className="progress-indicator">
<div className="progress-label">
<span className="progress-text">단계</span>
<div className="progress-numbers">
<span className="progress-current">2</span>
<span className="progress-divider">/</span>
<span className="progress-total">2</span>
</div>
</div>
<div className="progress-bar-wrapper">
<div className="progress-bar-track"></div>
</div>
<div className="page-header">
<h1 className="page-title">사운드 스튜디오</h1>
<p className="page-subtitle">
쉽고 빠르게, 브랜드 소셜 미디어 캠페인을 만드세요.
</p>
</div>
</div>
<div className="flex-1 px-6 md:px-8 min-h-0 overflow-hidden">
<div className="main-content h-full justify-center">
{/* Audio Style Card */}
<div
className={`card card-flex card-overflow-hidden transition-all duration-700 ease-out ${
showLyrics ? 'lg:flex-[1.5]' : 'flex-1 lg:max-w-2xl'
}`}
>
<h3 className="section-title">오디오 스타일</h3>
{/* Page Title */}
<h1 className="sound-studio-title">사운드 스튜디오</h1>
<div className="space-y-5 flex-1 min-h-0 overflow-y-auto custom-scrollbar">
<div>
<p className="text-sm text-gray-400 mb-3 font-medium">AI 사운드 유형 선택</p>
<div className="grid-cols-3 gap-3" style={{ display: 'grid' }}>
{/* Main Content - Two Column Layout */}
<div className="sound-studio-container">
<div className="sound-studio-columns">
{/* Left Column - Sound Settings */}
<div className="sound-column">
<h3 className="column-title">사운드</h3>
{/* Sound Type Selection */}
<div className="sound-studio-section">
<label className="input-label">AI 사운드 유형 선택</label>
<div className="sound-type-grid">
{['보컬', '성우 내레이션', '배경음악'].map(type => (
<button
key={type}
onClick={() => setSelectedType(type)}
disabled={isGenerating}
className={`btn-select ${selectedType === type ? 'active' : ''}`}
className={`sound-type-btn ${selectedType === type ? 'active' : ''}`}
>
{type}
</button>
@ -420,68 +469,155 @@ const SoundStudioContent: React.FC<SoundStudioContentProps> = ({ onBack, onNext,
</div>
</div>
<div>
<p className="text-sm text-gray-400 mb-3 font-medium">언어 선택</p>
<div className="grid-cols-3 gap-3" style={{ display: 'grid' }}>
{[
{ label: '한국어', flag: '🇰🇷' },
{ label: 'English', flag: '🇺🇸' },
{ label: '中文', flag: '🇨🇳' },
{ label: '日本語', flag: '🇯🇵' },
{ label: 'ไทย', flag: '🇹🇭' },
{ label: 'Tiếng Việt', flag: '🇻🇳' }
].map(lang => (
{/* Genre Selection */}
<div className="sound-studio-section">
<label className="input-label">장르 선택</label>
<div className="genre-grid">
<div className="genre-row">
{['자동 선택', 'K-POP', '발라드'].map(genre => (
<button
key={lang.label}
onClick={() => setSelectedLang(lang.label)}
key={genre}
onClick={() => setSelectedGenre(genre)}
disabled={isGenerating}
className={`btn-select flex-col gap-1 ${selectedLang === lang.label ? 'active' : ''}`}
style={{ display: 'flex', alignItems: 'center' }}
className={`genre-btn ${selectedGenre === genre ? 'active' : ''}`}
>
<span className="text-lg">{lang.flag}</span>
<span>{lang.label}</span>
{genre}
</button>
))}
</div>
</div>
<div>
<p className="text-sm text-gray-400 mb-3 font-medium">음악 장르 선택</p>
<select
value={selectedGenre}
onChange={(e) => setSelectedGenre(e.target.value)}
<div className="genre-row">
{['Hip-Hop', 'R&B', 'EDM'].map(genre => (
<button
key={genre}
onClick={() => setSelectedGenre(genre)}
disabled={isGenerating}
className="select-input"
className={`genre-btn ${selectedGenre === genre ? 'active' : ''}`}
>
<option>AI 추천</option>
<option>로파이</option>
<option>힙합</option>
<option>어쿠스틱</option>
</select>
{genre}
</button>
))}
</div>
<div className="genre-row">
{['JAZZ', 'ROCK'].map(genre => (
<button
key={genre}
onClick={() => setSelectedGenre(genre)}
disabled={isGenerating}
className={`genre-btn ${selectedGenre === genre ? 'active' : ''}`}
>
{genre}
</button>
))}
<div className="genre-btn-placeholder"></div>
</div>
</div>
</div>
{errorMessage && (
<div className="error-message">
{errorMessage}
{/* Language Selection */}
<div className="sound-studio-section">
<label className="input-label">언어</label>
<div className="language-selector-wrapper" ref={languageDropdownRef}>
<button
onClick={() => setIsLanguageDropdownOpen(!isLanguageDropdownOpen)}
disabled={isGenerating}
className="language-selector"
>
<div className="language-display">
<span className="language-flag">{LANGUAGE_FLAGS[selectedLang]}</span>
<span className="language-name">{selectedLang}</span>
</div>
<img
src="/assets/images/icon-dropdown.svg"
alt=""
className={`language-dropdown-icon ${isLanguageDropdownOpen ? 'open' : ''}`}
/>
</button>
{isLanguageDropdownOpen && (
<div className="language-dropdown-menu">
{Object.keys(LANGUAGE_MAP).map((lang) => (
<button
key={lang}
onClick={() => {
setSelectedLang(lang);
setIsLanguageDropdownOpen(false);
}}
className={`language-dropdown-item ${selectedLang === lang ? 'active' : ''}`}
>
<span className="language-flag">{LANGUAGE_FLAGS[lang]}</span>
<span className="language-name">{lang}</span>
</button>
))}
</div>
)}
</div>
</div>
</div>
{isGenerating && statusMessage && (
<div className="status-message">
<svg className="animate-spin h-4 w-4" viewBox="0 0 24 24">
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" fill="none"/>
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"/>
{/* Right Column - Lyrics */}
<div className="lyrics-column">
<div className="lyrics-header">
<h3 className="column-title">가사</h3>
<p className="lyrics-subtitle">가사 영역을 선택해서 수정 가능해요</p>
</div>
{/* Audio Player */}
<div className="audio-player">
<button
onClick={togglePlayPause}
disabled={!audioUrl}
className={`play-btn-new ${!audioUrl ? 'disabled' : ''}`}
>
{isPlaying ? (
<svg className="w-6 h-6" viewBox="0 0 24 24" fill="currentColor">
<rect x="6" y="4" width="4" height="16" rx="1" />
<rect x="14" y="4" width="4" height="16" rx="1" />
</svg>
{statusMessage}
) : (
<svg className="w-6 h-6" viewBox="0 0 24 24" fill="currentColor">
<path d="M8 5v14l11-7z"/>
</svg>
)}
</button>
<div
ref={progressBarRef}
onMouseDown={onMouseDown}
className={`audio-progress-container ${!audioUrl ? 'disabled' : ''}`}
>
<div
className="audio-progress-fill"
style={{ width: `${progress}%` }}
></div>
</div>
<span className="audio-time">
{formatTime(Math.max(0, duration - currentTime))}
</span>
</div>
{/* Lyrics Display */}
<div className="lyrics-display">
{lyrics ? (
<textarea
value={lyrics}
onChange={(e) => setLyrics(e.target.value)}
className="lyrics-textarea"
placeholder="사운드 생성 시 가사 표시됩니다."
/>
) : (
<div className="lyrics-placeholder">
사운드 생성 시 가사 표시됩니다.
</div>
)}
</div>
</div>
</div>
<div className="mt-4 shrink-0">
{/* Generate Button */}
<button
onClick={handleGenerateMusic}
disabled={isGenerating}
className={`btn-secondary ${isGenerating ? 'disabled' : ''}`}
className={`btn-generate-sound ${isGenerating ? 'disabled' : ''}`}
>
{isGenerating ? (
<>
@ -492,94 +628,56 @@ const SoundStudioContent: React.FC<SoundStudioContentProps> = ({ onBack, onNext,
생성 중...
</>
) : (
'음악 생성'
'사운드 생성'
)}
</button>
</div>
</div>
{/* Lyrics Card */}
{showLyrics && (
<div
className="card card-flex flex-1 animate-slide-in card-overflow-hidden min-w-280"
>
<h3 className="section-title mb-1">가사</h3>
<p className="text-gray-500 text-sm mb-4 shrink-0">가사 영역을 선택해서 수정 가능해요</p>
{errorMessage && (
<div className="error-message-new">
{errorMessage}
</div>
)}
<div className="card-inner flex-col gap-3 min-h-0 overflow-hidden" style={{ display: 'flex', flex: 1 }}>
{/* Player Bar */}
<div className="player-bar">
<button
onClick={togglePlayPause}
disabled={!audioUrl}
className={`play-btn ${!audioUrl ? 'disabled' : ''}`}
>
{isPlaying ? (
<svg className="w-6 h-6" viewBox="0 0 24 24" fill="currentColor">
<rect x="6" y="4" width="4" height="16" rx="1" />
<rect x="14" y="4" width="4" height="16" rx="1" />
{isGenerating && statusMessage && (
<div className="status-message-new">
<svg className="animate-spin h-4 w-4" viewBox="0 0 24 24">
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" fill="none"/>
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"/>
</svg>
) : (
<svg className="w-6 h-6" viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>
)}
</button>
<div
ref={progressBarRef}
onMouseDown={onMouseDown}
className={`progress-bar-container ${!audioUrl ? 'disabled' : ''}`}
>
<div
className="progress-bar-fill"
style={{ width: `${progress}%` }}
></div>
<div
className="progress-bar-thumb"
style={{ left: `${progress}%` }}
>
<div className="progress-bar-thumb-glow"></div>
<div className="progress-bar-thumb-dot"></div>
</div>
</div>
<span className="time-display">
{formatTime(Math.max(0, duration - currentTime))}
</span>
</div>
{/* Lyrics Textarea */}
<textarea
value={lyrics}
onChange={(e) => setLyrics(e.target.value)}
className="textarea-lyrics custom-scrollbar"
placeholder="가사가 여기에 표시됩니다..."
/>
</div>
<button
onClick={handleRegenerate}
disabled={isGenerating}
className="btn-regenerate"
>
재생성
</button>
{statusMessage}
</div>
)}
</div>
</div>
{/* Bottom Button */}
<div className="bottom-button-container">
<button
onClick={() => songTaskId && onNext(songTaskId)}
disabled={status !== 'complete' || !songTaskId}
className={`btn-primary ${status !== 'complete' || !songTaskId ? 'disabled' : ''}`}
disabled={status !== 'complete' || !songTaskId || videoGenerationStatus === 'generating'}
className={`btn-video-generate ${
videoGenerationStatus === 'generating'
? 'generating'
: status !== 'complete' || !songTaskId
? 'disabled'
: ''
}`}
>
영상 생성하기
{videoGenerationStatus === 'generating' ? (
<>
<span className="video-gen-text">영상 생성 중</span>
<div className="video-gen-progress-bar">
<div
className="video-gen-progress-fill"
style={{ width: `${videoGenerationProgress}%` }}
></div>
</div>
</>
) : (
'영상 생성하기'
)}
</button>
</div>
</div>
</main>
);
};

30
src/pages/Landing/DisplaySection.tsx
View File

@ -7,7 +7,11 @@ interface DisplaySectionProps {
}
const DisplaySection: React.FC<DisplaySectionProps> = ({ onStartClick }) => {
const videoIds = ['dM8_d6Aud68', 'bb8nKmKcT0c', 'dM8_d6Aud68'];
const frames = [
{ id: 1, image: '/assets/images/display-frame-1.png' },
{ id: 2, image: '/assets/images/display-frame-1.png' },
{ id: 3, image: '/assets/images/display-frame-1.png' },
];
return (
<div className="display-section">
@ -15,27 +19,13 @@ const DisplaySection: React.FC<DisplaySectionProps> = ({ onStartClick }) => {
<div className="content-safe-area" style={{ paddingTop: '7rem' }}>
{/* Main visual frames container */}
<div className="video-frames">
{videoIds.map((videoId, index) => (
<div className="display-frames">
{frames.map((frame, index) => (
<div
key={`${videoId}-${index}`}
className={`phone-frame ${index === 2 ? 'hidden-mobile' : ''}`}
key={frame.id}
className={`display-frame ${index === 2 ? 'display-frame-hidden-mobile' : ''}`}
>
{/* YouTube Embed Container */}
<div className="phone-video-container">
<iframe
src={`https://www.youtube.com/embed/${videoId}?autoplay=1&mute=1&loop=1&playlist=${videoId}&controls=0&showinfo=0&rel=0&modestbranding=1&iv_load_policy=3&disablekb=1&playsinline=1`}
title="YouTube video player"
frameBorder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowFullScreen
></iframe>
</div>
{/* Device Bezel/Frame */}
<div className="phone-bezel"></div>
{/* Notch */}
<div className="phone-notch"></div>
<img src={frame.image} alt={`Display ${frame.id}`} />
</div>
))}
</div>

30
src/pages/Landing/WelcomeSection.tsx
View File

@ -12,17 +12,23 @@ const WelcomeSection: React.FC<WelcomeSectionProps> = ({ onStartClick, onNext })
{
id: 1,
title: '비즈니스 핵심 정보 분석',
description: '홈페이지, 네이버 지도, 블로그 등의 URL을 입력하세요',
description: '홈페이지, 네이버 지도, 블로그 등의\nURL을 입력하세요',
icon: '/assets/images/icon-analysis.svg',
iconBg: '#9BCACC'
},
{
id: 2,
title: '홍보 콘텐츠 자동 제작',
description: '분석 정보를 바탕으로 제작합니다',
description: '분석된 정보를 바탕으로\n비즈니스에 맞는 음악, 자막, 노래, 영상을\n자동으로 제작해요',
icon: '/assets/images/icon-content.svg',
iconBg: '#DFC7FD'
},
{
id: 3,
title: '멀티채널 자동 배포',
description: '다운로드 또는 SNS 즉시 업로드',
description: '완성된 영상은 다운로드하거나\n바로 SNS에 업로드 할 수 있어요',
icon: '/assets/images/icon-deploy.svg',
iconBg: '#D4FDF3'
},
];
@ -33,36 +39,30 @@ const WelcomeSection: React.FC<WelcomeSectionProps> = ({ onStartClick, onNext })
<div className="content-safe-area" style={{ paddingTop: '5rem' }}>
<div className="welcome-header">
<div className="welcome-icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
<path d="M12 2l2.4 7.2L22 12l-7.6 2.4L12 22l-2.4-7.2L2 12l7.6-2.4z" />
</svg>
<img src="/assets/images/star-icon.svg" alt="star" />
</div>
<h2 className="welcome-title">CASTAD에 오신 것을 환영합니다.</h2>
<p className="welcome-subtitle">분석, 제작, 배포까지 콘텐츠 마케팅 자동화</p>
<p className="welcome-subtitle">분석, 제작, 배포까지 콘텐츠 마케팅의 전과정을 자동화</p>
</div>
<div className="feature-grid">
{features.map((feature) => (
<div key={feature.id} className="feature-item">
<div className="feature-number">{feature.id}</div>
<div className="feature-content">
<h3 className="feature-title">{feature.title}</h3>
<p className="feature-description">{feature.description}</p>
<div className="feature-icon" style={{ backgroundColor: feature.iconBg }}>
<img src={feature.icon} alt={feature.title} />
</div>
<p className="feature-description">{feature.description}</p>
</div>
))}
</div>
<div className="welcome-buttons">
<button onClick={onStartClick} className="btn-ghost">
처음으로
</button>
<button onClick={onNext} className="btn-cta">
<button onClick={onNext} className="btn-start">
시작하기
</button>
</div>
</div>
</div>
);
};

15
src/pages/Login/LoginSection.tsx
View File

@ -11,18 +11,17 @@ const LoginSection: React.FC<LoginSectionProps> = ({ onBack, onLogin }) => {
<div className="login-container">
{/* Back Button */}
<button onClick={onBack} className="login-back-btn">
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
<path d="M15 18l-6-6 6-6" />
</svg>
뒤로가기
<img src="/assets/images/icon-back.svg" alt="Back" />
<span>뒤로가기</span>
</button>
<div className="login-content">
<h1 className="login-title">CASTAD</h1>
<p className="login-subtitle">
Marketing Automation for Location Based Business
</p>
{/* Logo */}
<div className="login-logo">
<img src="/assets/images/login-logo.svg" alt="CASTAD" />
</div>
{/* Kakao Login Button */}
<button onClick={onLogin} className="btn-kakao">
카카오로 시작하기
</button>