diff --git a/package-lock.json b/package-lock.json index a9ef077..6df6890 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,7 +8,8 @@ "name": "mafia-together", "version": "0.0.0", "dependencies": { - "@emotion/react": "^11.11.4", + "@emotion/react": "^11.13.3", + "@emotion/styled": "^11.13.0", "@tanstack/react-query": "^5.32.0", "axios": "^1.6.8", "react": "^18.2.0", @@ -45,50 +46,65 @@ } }, "node_modules/@babel/code-frame": { - "version": "7.24.2", - "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.24.2.tgz", - "integrity": "sha512-y5+tLQyV8pg3fsiln67BVLD1P13Eg4lh5RW9mF0zUuvLrv9uIQ4MCL+CRT+FTsBlBjcIan6PGsLcBN0m3ClUyQ==", + "version": "7.24.7", + "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.24.7.tgz", + "integrity": "sha512-BcYH1CVJBO9tvyIZ2jVeXgSIMvGZ2FDRvDdOIVQyuklNKSsx+eppDEBq/g47Ayw+RqNFE+URvOShmf+f/qwAlA==", "dependencies": { - "@babel/highlight": "^7.24.2", + "@babel/highlight": "^7.24.7", "picocolors": "^1.0.0" }, "engines": { "node": ">=6.9.0" } }, + "node_modules/@babel/generator": { + "version": "7.25.6", + "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.25.6.tgz", + "integrity": "sha512-VPC82gr1seXOpkjAAKoLhP50vx4vGNlF4msF64dSFq1P8RfB+QAuJWGHPXXPc8QyfVWwwB/TNNU4+ayZmHNbZw==", + "dependencies": { + "@babel/types": "^7.25.6", + "@jridgewell/gen-mapping": "^0.3.5", + "@jridgewell/trace-mapping": "^0.3.25", + "jsesc": "^2.5.1" + }, + "engines": { + "node": ">=6.9.0" + } + }, "node_modules/@babel/helper-module-imports": { - "version": "7.24.3", - "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.24.3.tgz", - "integrity": "sha512-viKb0F9f2s0BCS22QSF308z/+1YWKV/76mwt61NBzS5izMzDPwdq1pTrzf+Li3npBWX9KdQbkeCt1jSAM7lZqg==", + "version": "7.24.7", + "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.24.7.tgz", + "integrity": "sha512-8AyH3C+74cgCVVXow/myrynrAGv+nTVg5vKu2nZph9x7RcRwzmh0VFallJuFTZ9mx6u4eSdXZfcOzSqTUm0HCA==", "dependencies": { - "@babel/types": "^7.24.0" + "@babel/traverse": "^7.24.7", + "@babel/types": "^7.24.7" }, "engines": { "node": ">=6.9.0" } }, "node_modules/@babel/helper-string-parser": { - "version": "7.24.1", - "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.24.1.tgz", - "integrity": "sha512-2ofRCjnnA9y+wk8b9IAREroeUP02KHp431N2mhKniy2yKIDKpbrHv9eXwm8cBeWQYcJmzv5qKCu65P47eCF7CQ==", + "version": "7.24.8", + "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.24.8.tgz", + "integrity": "sha512-pO9KhhRcuUyGnJWwyEgnRJTSIZHiT+vMD0kPeD+so0l7mxkMT19g3pjY9GTnHySck/hDzq+dtW/4VgnMkippsQ==", "engines": { "node": ">=6.9.0" } }, "node_modules/@babel/helper-validator-identifier": { - "version": "7.22.20", - "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.20.tgz", - "integrity": "sha512-Y4OZ+ytlatR8AI+8KZfKuL5urKp7qey08ha31L8b3BwewJAoJamTzyvxPR/5D+KkdJCGPq/+8TukHBlY10FX9A==", + "version": "7.24.7", + "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.24.7.tgz", + "integrity": "sha512-rR+PBcQ1SMQDDyF6X0wxtG8QyLCgUB0eRAGguqRLfkCA87l7yAP7ehq8SNj96OOGTO8OBV70KhuFYcIkHXOg0w==", "engines": { "node": ">=6.9.0" } }, "node_modules/@babel/highlight": { - "version": "7.24.2", - "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.24.2.tgz", - "integrity": "sha512-Yac1ao4flkTxTteCDZLEvdxg2fZfz1v8M4QpaGypq/WPDqg3ijHYbDfs+LG5hvzSoqaSZ9/Z9lKSP3CjZjv+pA==", + "version": "7.24.7", + "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.24.7.tgz", + "integrity": "sha512-EStJpq4OuY8xYfhGVXngigBJRWxftKX9ksiGDnmlY3o7B/V7KIAc9X4oiK87uPJSc/vs5L869bem5fhZa8caZw==", "dependencies": { - "@babel/helper-validator-identifier": "^7.22.20", + "@babel/helper-validator-identifier": "^7.24.7", "chalk": "^2.4.2", "js-tokens": "^4.0.0", "picocolors": "^1.0.0" @@ -161,10 +177,24 @@ "node": ">=4" } }, + "node_modules/@babel/parser": { + "version": "7.25.6", + "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.25.6.tgz", + "integrity": "sha512-trGdfBdbD0l1ZPmcJ83eNxB9rbEax4ALFTF7fN386TMYbeCQbyme5cOEXQhbGXKebwGaB/J52w1mrklMcbgy6Q==", + "dependencies": { + "@babel/types": "^7.25.6" + }, + "bin": { + "parser": "bin/babel-parser.js" + }, + "engines": { + "node": ">=6.0.0" + } + }, "node_modules/@babel/runtime": { - "version": "7.24.4", - "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.24.4.tgz", - "integrity": "sha512-dkxf7+hn8mFBwKjs9bvBlArzLVxVbS8usaPUDd5p2a9JCL9tB8OaOVN1isD4+Xyk4ns89/xeOmbQvgdK7IIVdA==", + "version": "7.25.6", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.25.6.tgz", + "integrity": "sha512-VBj9MYyDb9tuLq7yzqjgzt6Q+IBQLrGZfdjOekyEirZPHxXWoTSGUTMrpsfi58Up73d13NfYLv8HT9vmznjzhQ==", "dependencies": { "regenerator-runtime": "^0.14.0" }, @@ -172,13 +202,51 @@ "node": ">=6.9.0" } }, + "node_modules/@babel/template": { + "version": "7.25.0", + "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.25.0.tgz", + "integrity": "sha512-aOOgh1/5XzKvg1jvVz7AVrx2piJ2XBi227DHmbY6y+bM9H2FlN+IfecYu4Xl0cNiiVejlsCri89LUsbj8vJD9Q==", + "dependencies": { + "@babel/code-frame": "^7.24.7", + "@babel/parser": "^7.25.0", + "@babel/types": "^7.25.0" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/traverse": { + "version": "7.25.6", + "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.25.6.tgz", + "integrity": "sha512-9Vrcx5ZW6UwK5tvqsj0nGpp/XzqthkT0dqIc9g1AdtygFToNtTF67XzYS//dm+SAK9cp3B9R4ZO/46p63SCjlQ==", + "dependencies": { + "@babel/code-frame": "^7.24.7", + "@babel/generator": "^7.25.6", + "@babel/parser": "^7.25.6", + "@babel/template": "^7.25.0", + "@babel/types": "^7.25.6", + "debug": "^4.3.1", + "globals": "^11.1.0" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/traverse/node_modules/globals": { + "version": "11.12.0", + "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz", + "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==", + "engines": { + "node": ">=4" + } + }, "node_modules/@babel/types": { - "version": "7.24.0", - "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.24.0.tgz", - "integrity": "sha512-+j7a5c253RfKh8iABBhywc8NSfP5LURe7Uh4qpsh6jc+aLJguvmIUBdjSdEMQv2bENrCR5MfRdjGo7vzS/ob7w==", + "version": "7.25.6", + "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.25.6.tgz", + "integrity": "sha512-/l42B1qxpG6RdfYf343Uw1vmDjeNhneUXtzhojE7pDgfpEypmRhI6j1kr17XCVv4Cgl9HdAiQY2x0GwKm7rWCw==", "dependencies": { - "@babel/helper-string-parser": "^7.23.4", - "@babel/helper-validator-identifier": "^7.22.20", + "@babel/helper-string-parser": "^7.24.8", + "@babel/helper-validator-identifier": "^7.24.7", "to-fast-properties": "^2.0.0" }, "engines": { @@ -186,15 +254,15 @@ } }, "node_modules/@emotion/babel-plugin": { - "version": "11.11.0", - "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.11.0.tgz", - "integrity": "sha512-m4HEDZleaaCH+XgDDsPF15Ht6wTLsgDTeR3WYj9Q/k76JtWhrJjcP4+/XlG8LGT/Rol9qUfOIztXeA84ATpqPQ==", + "version": "11.12.0", + "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.12.0.tgz", + "integrity": "sha512-y2WQb+oP8Jqvvclh8Q55gLUyb7UFvgv7eJfsj7td5TToBrIUtPay2kMrZi4xjq9qw2vD0ZR5fSho0yqoFgX7Rw==", "dependencies": { "@babel/helper-module-imports": "^7.16.7", "@babel/runtime": "^7.18.3", - "@emotion/hash": "^0.9.1", - "@emotion/memoize": "^0.8.1", - "@emotion/serialize": "^1.1.2", + "@emotion/hash": "^0.9.2", + "@emotion/memoize": "^0.9.0", + "@emotion/serialize": "^1.2.0", "babel-plugin-macros": "^3.1.0", "convert-source-map": "^1.5.0", "escape-string-regexp": "^4.0.0", @@ -204,39 +272,47 @@ } }, "node_modules/@emotion/cache": { - "version": "11.11.0", - "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.11.0.tgz", - "integrity": "sha512-P34z9ssTCBi3e9EI1ZsWpNHcfY1r09ZO0rZbRO2ob3ZQMnFI35jB536qoXbkdesr5EUhYi22anuEJuyxifaqAQ==", - "dependencies": { - "@emotion/memoize": "^0.8.1", - "@emotion/sheet": "^1.2.2", - "@emotion/utils": "^1.2.1", - "@emotion/weak-memoize": "^0.3.1", + "version": "11.13.1", + "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.13.1.tgz", + "integrity": "sha512-iqouYkuEblRcXmylXIwwOodiEK5Ifl7JcX7o6V4jI3iW4mLXX3dmt5xwBtIkJiQEXFAI+pC8X0i67yiPkH9Ucw==", + "dependencies": { + "@emotion/memoize": "^0.9.0", + "@emotion/sheet": "^1.4.0", + "@emotion/utils": "^1.4.0", + "@emotion/weak-memoize": "^0.4.0", "stylis": "4.2.0" } }, "node_modules/@emotion/hash": { - "version": "0.9.1", - "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.1.tgz", - "integrity": "sha512-gJB6HLm5rYwSLI6PQa+X1t5CFGrv1J1TWG+sOyMCeKz2ojaj6Fnl/rZEspogG+cvqbt4AE/2eIyD2QfLKTBNlQ==" + "version": "0.9.2", + "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.2.tgz", + "integrity": "sha512-MyqliTZGuOm3+5ZRSaaBGP3USLw6+EGykkwZns2EPC5g8jJ4z9OrdZY9apkl3+UP9+sdz76YYkwCKP5gh8iY3g==" + }, + "node_modules/@emotion/is-prop-valid": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.3.0.tgz", + "integrity": "sha512-SHetuSLvJDzuNbOdtPVbq6yMMMlLoW5Q94uDqJZqy50gcmAjxFkVqmzqSGEFq9gT2iMuIeKV1PXVWmvUhuZLlQ==", + "dependencies": { + "@emotion/memoize": "^0.9.0" + } }, "node_modules/@emotion/memoize": { - "version": "0.8.1", - "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.1.tgz", - "integrity": "sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA==" + "version": "0.9.0", + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.9.0.tgz", + "integrity": "sha512-30FAj7/EoJ5mwVPOWhAyCX+FPfMDrVecJAM+Iw9NRoSl4BBAQeqj4cApHHUXOVvIPgLVDsCFoz/hGD+5QQD1GQ==" }, "node_modules/@emotion/react": { - "version": "11.11.4", - "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.11.4.tgz", - "integrity": "sha512-t8AjMlF0gHpvvxk5mAtCqR4vmxiGHCeJBaQO6gncUSdklELOgtwjerNY2yuJNfwnc6vi16U/+uMF+afIawJ9iw==", + "version": "11.13.3", + "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.13.3.tgz", + "integrity": "sha512-lIsdU6JNrmYfJ5EbUCf4xW1ovy5wKQ2CkPRM4xogziOxH1nXxBSjpC9YqbFAP7circxMfYp+6x676BqWcEiixg==", "dependencies": { "@babel/runtime": "^7.18.3", - "@emotion/babel-plugin": "^11.11.0", - "@emotion/cache": "^11.11.0", - "@emotion/serialize": "^1.1.3", - "@emotion/use-insertion-effect-with-fallbacks": "^1.0.1", - "@emotion/utils": "^1.2.1", - "@emotion/weak-memoize": "^0.3.1", + "@emotion/babel-plugin": "^11.12.0", + "@emotion/cache": "^11.13.0", + "@emotion/serialize": "^1.3.1", + "@emotion/use-insertion-effect-with-fallbacks": "^1.1.0", + "@emotion/utils": "^1.4.0", + "@emotion/weak-memoize": "^0.4.0", "hoist-non-react-statics": "^3.3.1" }, "peerDependencies": { @@ -249,44 +325,66 @@ } }, "node_modules/@emotion/serialize": { - "version": "1.1.4", - "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.1.4.tgz", - "integrity": "sha512-RIN04MBT8g+FnDwgvIUi8czvr1LU1alUMI05LekWB5DGyTm8cCBMCRpq3GqaiyEDRptEXOyXnvZ58GZYu4kBxQ==", - "dependencies": { - "@emotion/hash": "^0.9.1", - "@emotion/memoize": "^0.8.1", - "@emotion/unitless": "^0.8.1", - "@emotion/utils": "^1.2.1", + "version": "1.3.1", + "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.3.1.tgz", + "integrity": "sha512-dEPNKzBPU+vFPGa+z3axPRn8XVDetYORmDC0wAiej+TNcOZE70ZMJa0X7JdeoM6q/nWTMZeLpN/fTnD9o8MQBA==", + "dependencies": { + "@emotion/hash": "^0.9.2", + "@emotion/memoize": "^0.9.0", + "@emotion/unitless": "^0.10.0", + "@emotion/utils": "^1.4.0", "csstype": "^3.0.2" } }, "node_modules/@emotion/sheet": { - "version": "1.2.2", - "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.2.2.tgz", - "integrity": "sha512-0QBtGvaqtWi+nx6doRwDdBIzhNdZrXUppvTM4dtZZWEGTXL/XE/yJxLMGlDT1Gt+UHH5IX1n+jkXyytE/av7OA==" + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.4.0.tgz", + "integrity": "sha512-fTBW9/8r2w3dXWYM4HCB1Rdp8NLibOw2+XELH5m5+AkWiL/KqYX6dc0kKYlaYyKjrQ6ds33MCdMPEwgs2z1rqg==" + }, + "node_modules/@emotion/styled": { + "version": "11.13.0", + "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-11.13.0.tgz", + "integrity": "sha512-tkzkY7nQhW/zC4hztlwucpT8QEZ6eUzpXDRhww/Eej4tFfO0FxQYWRyg/c5CCXa4d/f174kqeXYjuQRnhzf6dA==", + "dependencies": { + "@babel/runtime": "^7.18.3", + "@emotion/babel-plugin": "^11.12.0", + "@emotion/is-prop-valid": "^1.3.0", + "@emotion/serialize": "^1.3.0", + "@emotion/use-insertion-effect-with-fallbacks": "^1.1.0", + "@emotion/utils": "^1.4.0" + }, + "peerDependencies": { + "@emotion/react": "^11.0.0-rc.0", + "react": ">=16.8.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } }, "node_modules/@emotion/unitless": { - "version": "0.8.1", - "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.1.tgz", - "integrity": "sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ==" + "version": "0.10.0", + "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.10.0.tgz", + "integrity": "sha512-dFoMUuQA20zvtVTuxZww6OHoJYgrzfKM1t52mVySDJnMSEa08ruEvdYQbhvyu6soU+NeLVd3yKfTfT0NeV6qGg==" }, "node_modules/@emotion/use-insertion-effect-with-fallbacks": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.0.1.tgz", - "integrity": "sha512-jT/qyKZ9rzLErtrjGgdkMBn2OP8wl0G3sQlBb3YPryvKHsjvINUhVaPFfP+fpBcOkmrVOVEEHQFJ7nbj2TH2gw==", + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.1.0.tgz", + "integrity": "sha512-+wBOcIV5snwGgI2ya3u99D7/FJquOIniQT1IKyDsBmEgwvpxMNeS65Oib7OnE2d2aY+3BU4OiH+0Wchf8yk3Hw==", "peerDependencies": { "react": ">=16.8.0" } }, "node_modules/@emotion/utils": { - "version": "1.2.1", - "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.2.1.tgz", - "integrity": "sha512-Y2tGf3I+XVnajdItskUCn6LX+VUDmP6lTL4fcqsXAv43dnlbZiuW4MWQW38rW/BVWSE7Q/7+XQocmpnRYILUmg==" + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.4.0.tgz", + "integrity": "sha512-spEnrA1b6hDR/C68lC2M7m6ALPUHZC0lIY7jAS/B/9DuuO1ZP04eov8SMv/6fwRd8pzmsn2AuJEznRREWlQrlQ==" }, "node_modules/@emotion/weak-memoize": { - "version": "0.3.1", - "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.3.1.tgz", - "integrity": "sha512-EsBwpc7hBUJWAsNPBmJy4hxWx12v6bshQsldrVmjxJoc3isbxhOrF2IcCpaXxfvq03NwkI7sbsOLXbYuqF/8Ww==" + "version": "0.4.0", + "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.4.0.tgz", + "integrity": "sha512-snKqtPW01tN0ui7yu9rGv69aJXr/a/Ywvl11sUjNtEcRc+ng/mQriFL0wLXMef74iHa/EkftbDzU9F8iFbH+zg==" }, "node_modules/@esbuild/aix-ppc64": { "version": "0.20.2", @@ -789,6 +887,49 @@ "integrity": "sha512-93zYdMES/c1D69yZiKDBj0V24vqNzB/koF26KPaagAfd3P/4gUlh3Dys5ogAK+Exi9QyzlD8x/08Zt7wIKcDcA==", "dev": true }, + "node_modules/@jridgewell/gen-mapping": { + "version": "0.3.5", + "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz", + "integrity": "sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==", + "dependencies": { + "@jridgewell/set-array": "^1.2.1", + "@jridgewell/sourcemap-codec": "^1.4.10", + "@jridgewell/trace-mapping": "^0.3.24" + }, + "engines": { + "node": ">=6.0.0" + } + }, + "node_modules/@jridgewell/resolve-uri": { + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz", + "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==", + "engines": { + "node": ">=6.0.0" + } + }, + "node_modules/@jridgewell/set-array": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.2.1.tgz", + "integrity": "sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==", + "engines": { + "node": ">=6.0.0" + } + }, + "node_modules/@jridgewell/sourcemap-codec": { + "version": "1.5.0", + "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz", + "integrity": "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==" + }, + "node_modules/@jridgewell/trace-mapping": { + "version": "0.3.25", + "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz", + "integrity": "sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==", + "dependencies": { + "@jridgewell/resolve-uri": "^3.1.0", + "@jridgewell/sourcemap-codec": "^1.4.14" + } + }, "node_modules/@nodelib/fs.scandir": { "version": "2.1.5", "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz", @@ -1799,7 +1940,6 @@ "version": "4.3.4", "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz", "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==", - "dev": true, "dependencies": { "ms": "2.1.2" }, @@ -2520,11 +2660,14 @@ "integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==" }, "node_modules/is-core-module": { - "version": "2.13.1", - "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.13.1.tgz", - "integrity": "sha512-hHrIjvZsftOsvKSn2TRYl63zvxsgE0K+0mYMoH6gD4omR5IWB2KynivBQczo3+wF1cCkjzvptnI9Q0sPU66ilw==", + "version": "2.15.1", + "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.15.1.tgz", + "integrity": "sha512-z0vtXSwucUJtANQWldhbtbt7BnL0vxiFjIdDLAatwhDYty2bad6s+rijD6Ri4YuYJubLzIJLUidCh09e1djEVQ==", "dependencies": { - "hasown": "^2.0.0" + "hasown": "^2.0.2" + }, + "engines": { + "node": ">= 0.4" }, "funding": { "url": "https://github.com/sponsors/ljharb" @@ -2592,6 +2735,17 @@ "js-yaml": "bin/js-yaml.js" } }, + "node_modules/jsesc": { + "version": "2.5.2", + "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-2.5.2.tgz", + "integrity": "sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==", + "bin": { + "jsesc": "bin/jsesc" + }, + "engines": { + "node": ">=4" + } + }, "node_modules/json-buffer": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/json-buffer/-/json-buffer-3.0.1.tgz", @@ -2745,8 +2899,7 @@ "node_modules/ms": { "version": "2.1.2", "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", - "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==", - "dev": true + "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==" }, "node_modules/nanoid": { "version": "3.3.7", diff --git a/package.json b/package.json index e69982c..4e78198 100644 --- a/package.json +++ b/package.json @@ -12,7 +12,8 @@ "pretty": "prettier --write \"./**/*.{js,jsx,mjs,cjs,ts,tsx,json}\"" }, "dependencies": { - "@emotion/react": "^11.11.4", + "@emotion/react": "^11.13.3", + "@emotion/styled": "^11.13.0", "@tanstack/react-query": "^5.32.0", "axios": "^1.6.8", "react": "^18.2.0", diff --git a/public/assets/fonts/BalooBhaina-Regular.ttf b/public/assets/fonts/BalooBhaina-Regular.ttf new file mode 100644 index 0000000..c790503 Binary files /dev/null and b/public/assets/fonts/BalooBhaina-Regular.ttf differ diff --git a/public/assets/img/job/citizen.png b/public/assets/img/job/citizen.png new file mode 100644 index 0000000..4872441 Binary files /dev/null and b/public/assets/img/job/citizen.png differ diff --git a/public/assets/img/job/mafia.png b/public/assets/img/job/mafia.png new file mode 100644 index 0000000..0520ccc Binary files /dev/null and b/public/assets/img/job/mafia.png differ diff --git a/src/components/modal/NoticeJobs/NoticeCitizen.tsx b/src/components/modal/NoticeJobs/NoticeCitizen.tsx new file mode 100644 index 0000000..6d8eb08 --- /dev/null +++ b/src/components/modal/NoticeJobs/NoticeCitizen.tsx @@ -0,0 +1,412 @@ +/** @jsxImportSource @emotion/react */ +import { css } from '@emotion/react'; + +import { VariablesCSS } from '../../../styles/VariablesCSS'; + +export default function NoticeCitizen() { + return ( +
+
+

You Are

+

You Are

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 직업 + 후광 +
+

CITIZEN

+

CITIZEN

+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* 별들 */} + + + + + + + + + + + + + + + + + + + + + + +
+ ); +} + +const container = css` + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + color: ${VariablesCSS.day}; + height: 100%; + font-family: 'Baloo-Bhaina'; + background: linear-gradient(158.84deg, #fff46f 3.43%, #f28d26 96.57%); + z-index: 1; +`; + +const job = css` + width: 85%; + max-width: 300px; + z-index: 2; +`; + +// 글자위에 빛들 +const smallLight = css` + position: absolute; + top: 23px; + left: 6px; + width: 15.25px; + height: 15.25px; + border-radius: 100%; + z-index: 5; +`; + +const smallLightTwo = css` + position: absolute; + top: 42px; + left: 75px; + width: 15.25px; + height: 15.25px; + border-radius: 100%; + z-index: 5; +`; +const smallLightThree = css` + position: absolute; + top: 24px; + left: 103px; + width: 15.25px; + height: 15.25px; + border-radius: 100%; + z-index: 5; +`; +const smallLightFour = css` + position: absolute; + top: 31px; + left: 160px; + width: 15.25px; + height: 15.25px; + border-radius: 100%; + z-index: 5; +`; + +const smallLightFive = css` + position: absolute; + top: 24px; + left: 22px; + width: 15.25px; + height: 15.25px; + border-radius: 100%; + z-index: 5; +`; +const smallLightSix = css` + position: absolute; + top: 45px; + left: 89px; + width: 15.25px; + height: 15.25px; + border-radius: 100%; + z-index: 5; +`; +const smallLightSeven = css` + position: absolute; + top: 24px; + left: 162px; + width: 15.25px; + height: 15.25px; + border-radius: 100%; + z-index: 5; +`; + +// 글자 위 빛 점 +const smallLightCore = css` + position: relative; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + width: 3.41px; + height: 3.41px; + border-radius: 100%; + background: rgba(255, 255, 255, 0.7); + z-index: 5; +`; + +// 글자 위 빛 번지는 효과 +const smallLightSpread = css` + position: relative; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + border-radius: 100%; + width: 15.25px; + height: 15.25px; + background: rgba(255, 255, 255, 0.7); + filter: blur(7.5px); +`; + +const youareContainer = css` + position: relative; + width: 181px; + text-align: center; +`; + +const youare = css` + position: relative; + width: 100%; + top: 0; + font-size: 48px; + color: transparent; + -webkit-background-clip: text; + text-shadow: + -3px 0px white, + 0px 3px white, + 3px 0px white, + 0px -3px white; + z-index: 3; +`; + +const youareBackground = css` + position: absolute; + width: 100%; + top: 0; + font-size: 48px; + background: linear-gradient(180deg, rgba(254, 104, 26, 0.7) 45%, rgba(255, 255, 255, 0.7) 100%); + color: transparent; + -webkit-background-clip: text; + z-index: 3; +`; + +const citizenContainer = css` + position: relative; + width: 184px; + text-align: center; +`; + +const citizen = css` + position: relative; + width: 100%; + top: 0; + font-size: 48px; + color: transparent; + -webkit-background-clip: text; + + text-shadow: + -3px 0px white, + 0px 3px white, + 3px 0px white, + 0px -3px white, + 2px 2px 10px rgba(255, 147, 47, 0.61), + 0px 2px 2px rgba(255, 214, 0, 0.2); + z-index: 3; +`; +const citizenBackground = css` + position: absolute; + width: 100%; + top: 0; + font-size: 48px; + + background: #ffe249; + color: transparent; + -webkit-background-clip: text; + z-index: 3; +`; + +const backLight = css` + @keyframes bigAndSmall { + 0% { + transform: scale(0.8); + } + 50% { + transform: scale(1.2); + } + 100% { + transform: scale(0.8); + } + } + + position: absolute; + width: 60%; + height: 60%; + + background: rgba(251, 255, 208, 0.8); + filter: blur(50px); + animation: bigAndSmall 1.5s infinite ease-in-out reverse; + z-index: 1; +`; + +const star1 = css` + @keyframes starAnimation { + 0% { + transform: rotate(0deg) scale(1); + } + 50% { + transform: rotate(180deg) scale(1.3); + } + 100% { + transform: rotate(360deg) scale(1); + } + } + + @keyframes twinkle { + 100% { + transform: rotateY(360deg); + } + } + + position: absolute; + left: 7%; + top: 20%; + width: 4%; + animation: starAnimation 3s infinite linear reverse; +`; +const star2 = css` + position: absolute; + left: 34%; + top: 4%; + width: 7%; + animation: twinkle 8s infinite linear alternate; +`; +const star3 = css` + position: absolute; + right: 35%; + top: 4%; + width: 7%; + animation: twinkle 8s infinite linear alternate; +`; +const star4 = css` + position: absolute; + right: 5%; + top: 11%; + width: 7%; + animation: starAnimation 5s infinite linear; +`; + +const star5 = css` + position: absolute; + left: 16%; + bottom: 9%; + width: 6%; + animation: starAnimation 5s infinite linear; +`; +const star6 = css` + position: absolute; + left: 20%; + bottom: 27%; + width: 6.5%; + animation: twinkle 7s infinite linear alternate; +`; +const star7 = css` + position: absolute; + right: 11%; + bottom: 13%; + width: 5%; + animation: starAnimation 4s infinite linear reverse; +`; diff --git a/src/components/modal/NoticeJobs/NoticeMafia.tsx b/src/components/modal/NoticeJobs/NoticeMafia.tsx new file mode 100644 index 0000000..5c2baf7 --- /dev/null +++ b/src/components/modal/NoticeJobs/NoticeMafia.tsx @@ -0,0 +1,398 @@ +/** @jsxImportSource @emotion/react */ +import { css } from '@emotion/react'; + +import { VariablesCSS } from '../../../styles/VariablesCSS'; + +export default function NoticeMafia() { + return ( +
+
+

You Are

+

You Are

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 직업 + 후광 +
+

MAFIA

+

MAFIA

+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* 별들 */} + + + + + + + + + + + + + + + + + + + + + +
+ ); +} + +const container = css` + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + color: ${VariablesCSS.day}; + height: 100%; + font-family: 'Baloo-Bhaina'; + background: linear-gradient(158.84deg, #1a63ff 3.43%, #f863fa 96.57%); + z-index: 1; +`; + +const job = css` + width: 85%; + max-width: 300px; + z-index: 2; +`; + +// 글자위에 빛들 +const smallLight = css` + position: absolute; + top: 23px; + left: 6px; + width: 15.25px; + height: 15.25px; + border-radius: 100%; + z-index: 5; +`; + +const smallLightTwo = css` + position: absolute; + top: 42px; + left: 75px; + width: 15.25px; + height: 15.25px; + border-radius: 100%; + z-index: 5; +`; +const smallLightThree = css` + position: absolute; + top: 24px; + left: 103px; + width: 15.25px; + height: 15.25px; + border-radius: 100%; + z-index: 5; +`; +const smallLightFour = css` + position: absolute; + top: 31px; + left: 160px; + width: 15.25px; + height: 15.25px; + border-radius: 100%; + z-index: 5; +`; +const smallLightSix = css` + position: absolute; + top: 24px; + left: 53px; + width: 15.25px; + height: 15.25px; + border-radius: 100%; + z-index: 5; +`; +const smallLightSeven = css` + position: absolute; + top: 45px; + left: 74px; + width: 15.25px; + height: 15.25px; + border-radius: 100%; + z-index: 5; +`; + +// 글자 위 빛 점 +const smallLightCore = css` + position: relative; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + width: 3.41px; + height: 3.41px; + border-radius: 100%; + background: rgba(255, 255, 255, 0.7); + z-index: 5; +`; + +// 글자 위 빛 번지는 효과 +const smallLightSpread = css` + position: relative; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + border-radius: 100%; + width: 15.25px; + height: 15.25px; + background: rgba(255, 255, 255, 0.7); + filter: blur(7.5px); +`; + +const youareContainer = css` + position: relative; + width: 181px; + text-align: center; +`; + +const youare = css` + position: relative; + width: 100%; + top: 0; + font-size: 48px; + color: transparent; + -webkit-background-clip: text; + text-shadow: + -3px 0px white, + 0px 3px white, + 3px 0px white, + 0px -3px white; + z-index: 3; +`; + +const youareBackground = css` + position: absolute; + width: 100%; + top: 0; + font-size: 48px; + background: linear-gradient(180deg, rgba(0, 71, 255, 0.7) 45%, rgba(255, 255, 255, 0.7) 100%); + color: transparent; + -webkit-background-clip: text; + z-index: 3; +`; + +const mafiaContainer = css` + position: relative; + width: 149px; + text-align: center; +`; +const mafia = css` + position: relative; + width: 100%; + top: 0; + font-size: 48px; + color: transparent; + -webkit-background-clip: text; + text-shadow: + -3px 0px white, + 0px 3px white, + 3px 0px white, + 0px -3px white, + 2px 2px 10px rgba(255, 85, 187, 0.61), + 0px 2px 2px rgba(171, 0, 133, 0.2); + + z-index: 3; +`; +const mafiaBackground = css` + position: absolute; + width: 100%; + top: 0; + font-size: 48px; + background: #ff48f8; + color: transparent; + -webkit-background-clip: text; + z-index: 3; +`; + +const backLight = css` + @keyframes bigAndSmall { + 0% { + transform: scale(0.8); + } + 50% { + transform: scale(1.2); + } + 100% { + transform: scale(0.8); + } + } + + position: absolute; + width: 60%; + height: 60%; + + background: rgba(179, 250, 255, 0.5); + filter: blur(50px); + animation: bigAndSmall 1.5s infinite ease-in-out reverse; + z-index: 1; +`; + +const star1 = css` + @keyframes starAnimation { + 0% { + transform: rotate(0deg) scale(1); + } + 50% { + transform: rotate(180deg) scale(1.3); + } + 100% { + transform: rotate(360deg) scale(1); + } + } + + @keyframes twinkle { + 100% { + transform: rotateY(360deg); + } + } + + position: absolute; + left: 6%; + top: 5%; + width: 5%; + animation: twinkle 8s infinite linear alternate; +`; +const star2 = css` + position: absolute; + left: 20%; + top: 12%; + width: 5%; + animation: starAnimation 3s infinite linear reverse; +`; +const star3 = css` + position: absolute; + right: 7%; + top: 17%; + width: 7%; + animation: starAnimation 7s infinite linear; +`; +const star4 = css` + position: absolute; + left: 17%; + bottom: 25%; + width: 5%; + animation: twinkle 8s infinite linear alternate; +`; +const star5 = css` + position: absolute; + left: 12%; + bottom: 8%; + width: 6%; + animation: starAnimation 5s infinite linear reverse; +`; +const star6 = css` + position: absolute; + right: 19%; + bottom: 18%; + width: 6.5%; + animation: twinkle 7s infinite linear alternate; +`; +const star7 = css` + position: absolute; + right: 10%; + bottom: 10%; + width: 5.5%; + animation: starAnimation 4s infinite linear reverse; +`; diff --git a/src/components/modal/NoticeMyJob.tsx b/src/components/modal/NoticeMyJob.tsx index db87db6..9c0b2c9 100644 --- a/src/components/modal/NoticeMyJob.tsx +++ b/src/components/modal/NoticeMyJob.tsx @@ -8,6 +8,8 @@ import { myJobState } from '../../recoil/roominfo/atom'; import { VariablesCSS } from '../../styles/VariablesCSS'; import { Job } from '../../type'; import PlayerBig from '../player/PlayerBig'; +import NoticeCitizen from './NoticeJobs/NoticeCitizen'; +import NoticeMafia from './NoticeJobs/NoticeMafia'; type PropsType = { name: string; @@ -35,13 +37,19 @@ export default function NoticeMyJob(props: PropsType) { }, []); return ( -
- -

- 당신은
- {myJob && text[myJob]}입니다. -

-
+ <> + {myJob == 'MAFIA' && } + {myJob == 'CITIZEN' && } + {(myJob == 'DOCTOR' || myJob == 'POLICE') && ( +
+ +

+ 당신은
+ {myJob && text[myJob]}입니다. +

+
+ )} + ); } diff --git a/src/styles/BaseCSS.ts b/src/styles/BaseCSS.ts index 0a3152e..78949b9 100644 --- a/src/styles/BaseCSS.ts +++ b/src/styles/BaseCSS.ts @@ -74,6 +74,13 @@ export const BaseCss = ` font-style: normal; } + @font-face{ + font-family: 'Baloo-Bhaina'; + src: url('/assets/fonts/BalooBhaina-Regular.ttf') format('woff2'); + font-weight: normal; + font-style: normal; + } + // 애니메이션