From 3ebb56deb61a4d04b050fe7e533a739191ef0ffe Mon Sep 17 00:00:00 2001 From: toothlessdev Date: Wed, 15 May 2024 21:42:03 +0900 Subject: [PATCH 1/5] =?UTF-8?q?style:=20=EC=82=BC=EC=84=B1=20=EB=B8=8C?= =?UTF-8?q?=EB=9D=BC=EC=9A=B0=EC=A0=80=EC=97=90=EC=84=9C=20BoothListItem?= =?UTF-8?q?=20=EA=B9=A8=EC=A7=80=EB=8A=94=20=ED=98=84=EC=83=81=20=ED=95=B4?= =?UTF-8?q?=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 545 ++++++++++++++++++++++--- src/components/display/.gitkeep | 0 src/components/display/Booth.styled.ts | 39 +- src/components/display/Booth.tsx | 6 +- src/components/typography/.gitkeep | 0 5 files changed, 516 insertions(+), 74 deletions(-) delete mode 100644 src/components/display/.gitkeep delete mode 100644 src/components/typography/.gitkeep diff --git a/package-lock.json b/package-lock.json index 89ec146..ba3a948 100644 --- a/package-lock.json +++ b/package-lock.json @@ -21,9 +21,11 @@ "react-redux": "^9.1.2", "react-router-dom": "^6.23.0", "styled-components": "^6.1.8", + "vite-plugin-html": "^3.2.2", "vite-tsconfig-paths": "^4.3.2" }, "devDependencies": { + "@types/node": "^20.12.11", "@types/react": "^18.2.66", "@types/react-dom": "^18.2.22", "@typescript-eslint/eslint-plugin": "^7.2.0", @@ -366,7 +368,6 @@ "cpu": [ "ppc64" ], - "dev": true, "optional": true, "os": [ "aix" @@ -382,7 +383,6 @@ "cpu": [ "arm" ], - "dev": true, "optional": true, "os": [ "android" @@ -398,7 +398,6 @@ "cpu": [ "arm64" ], - "dev": true, "optional": true, "os": [ "android" @@ -414,7 +413,6 @@ "cpu": [ "x64" ], - "dev": true, "optional": true, "os": [ "android" @@ -430,7 +428,6 @@ "cpu": [ "arm64" ], - "dev": true, "optional": true, "os": [ "darwin" @@ -446,7 +443,6 @@ "cpu": [ "x64" ], - "dev": true, "optional": true, "os": [ "darwin" @@ -462,7 +458,6 @@ "cpu": [ "arm64" ], - "dev": true, "optional": true, "os": [ "freebsd" @@ -478,7 +473,6 @@ "cpu": [ "x64" ], - "dev": true, "optional": true, "os": [ "freebsd" @@ -494,7 +488,6 @@ "cpu": [ "arm" ], - "dev": true, "optional": true, "os": [ "linux" @@ -510,7 +503,6 @@ "cpu": [ "arm64" ], - "dev": true, "optional": true, "os": [ "linux" @@ -526,7 +518,6 @@ "cpu": [ "ia32" ], - "dev": true, "optional": true, "os": [ "linux" @@ -542,7 +533,6 @@ "cpu": [ "loong64" ], - "dev": true, "optional": true, "os": [ "linux" @@ -558,7 +548,6 @@ "cpu": [ "mips64el" ], - "dev": true, "optional": true, "os": [ "linux" @@ -574,7 +563,6 @@ "cpu": [ "ppc64" ], - "dev": true, "optional": true, "os": [ "linux" @@ -590,7 +578,6 @@ "cpu": [ "riscv64" ], - "dev": true, "optional": true, "os": [ "linux" @@ -606,7 +593,6 @@ "cpu": [ "s390x" ], - "dev": true, "optional": true, "os": [ "linux" @@ -622,7 +608,6 @@ "cpu": [ "x64" ], - "dev": true, "optional": true, "os": [ "linux" @@ -638,7 +623,6 @@ "cpu": [ "x64" ], - "dev": true, "optional": true, "os": [ "netbsd" @@ -654,7 +638,6 @@ "cpu": [ "x64" ], - "dev": true, "optional": true, "os": [ "openbsd" @@ -670,7 +653,6 @@ "cpu": [ "x64" ], - "dev": true, "optional": true, "os": [ "sunos" @@ -686,7 +668,6 @@ "cpu": [ "arm64" ], - "dev": true, "optional": true, "os": [ "win32" @@ -702,7 +683,6 @@ "cpu": [ "ia32" ], - "dev": true, "optional": true, "os": [ "win32" @@ -718,7 +698,6 @@ "cpu": [ "x64" ], - "dev": true, "optional": true, "os": [ "win32" @@ -886,6 +865,15 @@ "node": ">=6.0.0" } }, + "node_modules/@jridgewell/source-map": { + "version": "0.3.6", + "resolved": "https://registry.npmjs.org/@jridgewell/source-map/-/source-map-0.3.6.tgz", + "integrity": "sha512-1ZJTZebgqllO79ue2bm3rIGud/bOe0pP5BjSRCRxxYkEZS8STV7zN84UBbiYu7jy+eCKSnVIUgoWWE/tt+shMQ==", + "dependencies": { + "@jridgewell/gen-mapping": "^0.3.5", + "@jridgewell/trace-mapping": "^0.3.25" + } + }, "node_modules/@jridgewell/sourcemap-codec": { "version": "1.4.15", "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz", @@ -975,6 +963,18 @@ "node": ">=14.0.0" } }, + "node_modules/@rollup/pluginutils": { + "version": "4.2.1", + "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-4.2.1.tgz", + "integrity": "sha512-iKnFXr7NkdZAIHiIWE+BX5ULi/ucVFYWD6TbAV+rZctiRTY2PL6tsIKhoIOaoskiWAkgu+VsbXgUVDNLHf+InQ==", + "dependencies": { + "estree-walker": "^2.0.1", + "picomatch": "^2.2.2" + }, + "engines": { + "node": ">= 8.0.0" + } + }, "node_modules/@rollup/rollup-android-arm-eabi": { "version": "4.17.2", "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.17.2.tgz", @@ -982,7 +982,6 @@ "cpu": [ "arm" ], - "dev": true, "optional": true, "os": [ "android" @@ -995,7 +994,6 @@ "cpu": [ "arm64" ], - "dev": true, "optional": true, "os": [ "android" @@ -1008,7 +1006,6 @@ "cpu": [ "arm64" ], - "dev": true, "optional": true, "os": [ "darwin" @@ -1021,7 +1018,6 @@ "cpu": [ "x64" ], - "dev": true, "optional": true, "os": [ "darwin" @@ -1034,7 +1030,6 @@ "cpu": [ "arm" ], - "dev": true, "optional": true, "os": [ "linux" @@ -1047,7 +1042,6 @@ "cpu": [ "arm" ], - "dev": true, "optional": true, "os": [ "linux" @@ -1060,7 +1054,6 @@ "cpu": [ "arm64" ], - "dev": true, "optional": true, "os": [ "linux" @@ -1073,7 +1066,6 @@ "cpu": [ "arm64" ], - "dev": true, "optional": true, "os": [ "linux" @@ -1086,7 +1078,6 @@ "cpu": [ "ppc64" ], - "dev": true, "optional": true, "os": [ "linux" @@ -1099,7 +1090,6 @@ "cpu": [ "riscv64" ], - "dev": true, "optional": true, "os": [ "linux" @@ -1112,7 +1102,6 @@ "cpu": [ "s390x" ], - "dev": true, "optional": true, "os": [ "linux" @@ -1125,7 +1114,6 @@ "cpu": [ "x64" ], - "dev": true, "optional": true, "os": [ "linux" @@ -1138,7 +1126,6 @@ "cpu": [ "x64" ], - "dev": true, "optional": true, "os": [ "linux" @@ -1151,7 +1138,6 @@ "cpu": [ "arm64" ], - "dev": true, "optional": true, "os": [ "win32" @@ -1164,7 +1150,6 @@ "cpu": [ "ia32" ], - "dev": true, "optional": true, "os": [ "win32" @@ -1177,7 +1162,6 @@ "cpu": [ "x64" ], - "dev": true, "optional": true, "os": [ "win32" @@ -1421,8 +1405,7 @@ "node_modules/@types/estree": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz", - "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==", - "devOptional": true + "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==" }, "node_modules/@types/json-schema": { "version": "7.0.15", @@ -1430,6 +1413,15 @@ "integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==", "dev": true }, + "node_modules/@types/node": { + "version": "20.12.12", + "resolved": "https://registry.npmjs.org/@types/node/-/node-20.12.12.tgz", + "integrity": "sha512-eWLDGF/FOSPtAvEqeRAQ4C8LSA7M1I7i0ky1I8U7kD1J5ITyW3AsRhQrKVoWf5pFKZ2kILsEGJhsI9r93PYnOw==", + "devOptional": true, + "dependencies": { + "undici-types": "~5.26.4" + } + }, "node_modules/@types/prop-types": { "version": "15.7.12", "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.12.tgz", @@ -1748,6 +1740,11 @@ "node": ">=8" } }, + "node_modules/async": { + "version": "3.2.5", + "resolved": "https://registry.npmjs.org/async/-/async-3.2.5.tgz", + "integrity": "sha512-baNZyqaaLhyLVKm/DlvdW051MSgO6b8eVfIezl9E5PqWxFgzLm/wQntEW4zOytVburDEr0JlALEpdOFwvErLsg==" + }, "node_modules/asynckit": { "version": "0.4.0", "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz", @@ -1768,11 +1765,15 @@ "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz", "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==" }, + "node_modules/boolbase": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz", + "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==" + }, "node_modules/brace-expansion": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz", "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==", - "dev": true, "dependencies": { "balanced-match": "^1.0.0" } @@ -1781,7 +1782,6 @@ "version": "3.0.2", "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz", "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==", - "dev": true, "dependencies": { "fill-range": "^7.0.1" }, @@ -1789,6 +1789,11 @@ "node": ">=8" } }, + "node_modules/buffer-from": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz", + "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==" + }, "node_modules/callsites": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz", @@ -1797,6 +1802,15 @@ "node": ">=6" } }, + "node_modules/camel-case": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/camel-case/-/camel-case-4.1.2.tgz", + "integrity": "sha512-gxGWBrTT1JuMx6R+o5PTXMmUnhnVzLQ9SNutD4YqKtI6ap897t3tKECYla6gCWEkplXnlNybEkZg9GEGxKFCgw==", + "dependencies": { + "pascal-case": "^3.1.2", + "tslib": "^2.0.3" + } + }, "node_modules/camelize": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.1.tgz", @@ -1820,6 +1834,25 @@ "url": "https://github.com/chalk/chalk?sponsor=1" } }, + "node_modules/clean-css": { + "version": "5.3.3", + "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.3.3.tgz", + "integrity": "sha512-D5J+kHaVb/wKSFcyyV75uCn8fiY4sV38XJoe4CUyGQ+mOU/fMVYUdH1hJC+CJQ5uY3EnW27SbJYS4X8BiLrAFg==", + "dependencies": { + "source-map": "~0.6.0" + }, + "engines": { + "node": ">= 10.0" + } + }, + "node_modules/clean-css/node_modules/source-map": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/color-convert": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", @@ -1836,6 +1869,11 @@ "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==" }, + "node_modules/colorette": { + "version": "2.0.20", + "resolved": "https://registry.npmjs.org/colorette/-/colorette-2.0.20.tgz", + "integrity": "sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==" + }, "node_modules/combined-stream": { "version": "1.0.8", "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz", @@ -1847,11 +1885,32 @@ "node": ">= 0.8" } }, + "node_modules/commander": { + "version": "8.3.0", + "resolved": "https://registry.npmjs.org/commander/-/commander-8.3.0.tgz", + "integrity": "sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==", + "engines": { + "node": ">= 12" + } + }, "node_modules/concat-map": { "version": "0.0.1", "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz", "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==" }, + "node_modules/connect-history-api-fallback": { + "version": "1.6.0", + "resolved": "https://registry.npmjs.org/connect-history-api-fallback/-/connect-history-api-fallback-1.6.0.tgz", + "integrity": "sha512-e54B99q/OUoH64zYYRf3HBP5z24G38h5D3qXu23JGRoigpX5Ss4r9ZnDk3g0Z8uQC2x2lPaJ+UlWBc1ZWBWdLg==", + "engines": { + "node": ">=0.8" + } + }, + "node_modules/consola": { + "version": "2.15.3", + "resolved": "https://registry.npmjs.org/consola/-/consola-2.15.3.tgz", + "integrity": "sha512-9vAdYbHj6x2fLKC4+oPH0kFzY/orMZyG2Aj+kNylHxKGJ/Ed4dpNyAQYwJOdqO4zdM7XpVHmyejQDcQHrnuXbw==" + }, "node_modules/cross-spawn": { "version": "7.0.3", "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz", @@ -1873,6 +1932,21 @@ "node": ">=4" } }, + "node_modules/css-select": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/css-select/-/css-select-4.3.0.tgz", + "integrity": "sha512-wPpOYtnsVontu2mODhA19JrqWxNsfdatRKd64kmpRbQgh1KtItko5sTnEpPdpSaJszTOhEMlF/RPz28qj4HqhQ==", + "dependencies": { + "boolbase": "^1.0.0", + "css-what": "^6.0.1", + "domhandler": "^4.3.1", + "domutils": "^2.8.0", + "nth-check": "^2.0.1" + }, + "funding": { + "url": "https://github.com/sponsors/fb55" + } + }, "node_modules/css-to-react-native": { "version": "3.2.0", "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.2.0.tgz", @@ -1883,6 +1957,17 @@ "postcss-value-parser": "^4.0.2" } }, + "node_modules/css-what": { + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/css-what/-/css-what-6.1.0.tgz", + "integrity": "sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==", + "engines": { + "node": ">= 6" + }, + "funding": { + "url": "https://github.com/sponsors/fb55" + } + }, "node_modules/csstype": { "version": "3.1.3", "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz", @@ -1940,11 +2025,111 @@ "node": ">=6.0.0" } }, + "node_modules/dom-serializer": { + "version": "1.4.1", + "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.4.1.tgz", + "integrity": "sha512-VHwB3KfrcOOkelEG2ZOfxqLZdfkil8PtJi4P8N2MMXucZq2yLp75ClViUlOVwyoHEDjYU433Aq+5zWP61+RGag==", + "dependencies": { + "domelementtype": "^2.0.1", + "domhandler": "^4.2.0", + "entities": "^2.0.0" + }, + "funding": { + "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1" + } + }, + "node_modules/domelementtype": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz", + "integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/fb55" + } + ] + }, + "node_modules/domhandler": { + "version": "4.3.1", + "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-4.3.1.tgz", + "integrity": "sha512-GrwoxYN+uWlzO8uhUXRl0P+kHE4GtVPfYzVLcUxPL7KNdHKj66vvlhiweIHqYYXWlw+T8iLMp42Lm67ghw4WMQ==", + "dependencies": { + "domelementtype": "^2.2.0" + }, + "engines": { + "node": ">= 4" + }, + "funding": { + "url": "https://github.com/fb55/domhandler?sponsor=1" + } + }, + "node_modules/domutils": { + "version": "2.8.0", + "resolved": "https://registry.npmjs.org/domutils/-/domutils-2.8.0.tgz", + "integrity": "sha512-w96Cjofp72M5IIhpjgobBimYEfoPjx1Vx0BSX9P30WBdZW2WIKU0T1Bd0kz2eNZ9ikjKgHbEyKx8BB6H1L3h3A==", + "dependencies": { + "dom-serializer": "^1.0.1", + "domelementtype": "^2.2.0", + "domhandler": "^4.2.0" + }, + "funding": { + "url": "https://github.com/fb55/domutils?sponsor=1" + } + }, + "node_modules/dot-case": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/dot-case/-/dot-case-3.0.4.tgz", + "integrity": "sha512-Kv5nKlh6yRrdrGvxeJ2e5y2eRUpkUosIW4A2AS38zwSz27zu7ufDwQPi5Jhs3XAlGNetl3bmnGhQsMtkKJnj3w==", + "dependencies": { + "no-case": "^3.0.4", + "tslib": "^2.0.3" + } + }, + "node_modules/dotenv": { + "version": "16.4.5", + "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.4.5.tgz", + "integrity": "sha512-ZmdL2rui+eB2YwhsWzjInR8LldtZHGDoQ1ugH85ppHKwpUHL7j7rN0Ti9NCnGiQbhaZ11FpR+7ao1dNsmduNUg==", + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://dotenvx.com" + } + }, + "node_modules/dotenv-expand": { + "version": "8.0.3", + "resolved": "https://registry.npmjs.org/dotenv-expand/-/dotenv-expand-8.0.3.tgz", + "integrity": "sha512-SErOMvge0ZUyWd5B0NXMQlDkN+8r+HhVUsxgOO7IoPDOdDRD2JjExpN6y3KnFR66jsJMwSn1pqIivhU5rcJiNg==", + "engines": { + "node": ">=12" + } + }, + "node_modules/ejs": { + "version": "3.1.10", + "resolved": "https://registry.npmjs.org/ejs/-/ejs-3.1.10.tgz", + "integrity": "sha512-UeJmFfOrAQS8OJWPZ4qtgHyWExa088/MtK5UEyoJGFH67cDEXkZSviOiKRCZ4Xij0zxI3JECgYs3oKx+AizQBA==", + "dependencies": { + "jake": "^10.8.5" + }, + "bin": { + "ejs": "bin/cli.js" + }, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/entities": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/entities/-/entities-2.2.0.tgz", + "integrity": "sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==", + "funding": { + "url": "https://github.com/fb55/entities?sponsor=1" + } + }, "node_modules/esbuild": { "version": "0.20.2", "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.20.2.tgz", "integrity": "sha512-WdOOppmUNU+IbZ0PaDiTst80zjnrOkyJNHoKupIcVyU8Lvla3Ugx94VzkQ32Ijqd7UhHJy75gNWDMUekcrSJ6g==", - "devOptional": true, "hasInstallScript": true, "bin": { "esbuild": "bin/esbuild" @@ -2197,6 +2382,11 @@ "node": ">=4.0" } }, + "node_modules/estree-walker": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz", + "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==" + }, "node_modules/esutils": { "version": "2.0.3", "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz", @@ -2220,7 +2410,6 @@ "version": "3.3.2", "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz", "integrity": "sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==", - "dev": true, "dependencies": { "@nodelib/fs.stat": "^2.0.2", "@nodelib/fs.walk": "^1.2.3", @@ -2236,7 +2425,6 @@ "version": "5.1.2", "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz", "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==", - "dev": true, "dependencies": { "is-glob": "^4.0.1" }, @@ -2273,11 +2461,29 @@ "node": "^10.12.0 || >=12.0.0" } }, + "node_modules/filelist": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/filelist/-/filelist-1.0.4.tgz", + "integrity": "sha512-w1cEuf3S+DrLCQL7ET6kz+gmlJdbq9J7yXCSjK/OZCPA+qEN1WyF4ZAf0YYJa4/shHJra2t/d/r8SV4Ji+x+8Q==", + "dependencies": { + "minimatch": "^5.0.1" + } + }, + "node_modules/filelist/node_modules/minimatch": { + "version": "5.1.6", + "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.6.tgz", + "integrity": "sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==", + "dependencies": { + "brace-expansion": "^2.0.1" + }, + "engines": { + "node": ">=10" + } + }, "node_modules/fill-range": { "version": "7.0.1", "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz", "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==", - "dev": true, "dependencies": { "to-regex-range": "^5.0.1" }, @@ -2374,6 +2580,19 @@ } } }, + "node_modules/fs-extra": { + "version": "10.1.0", + "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-10.1.0.tgz", + "integrity": "sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==", + "dependencies": { + "graceful-fs": "^4.2.0", + "jsonfile": "^6.0.1", + "universalify": "^2.0.0" + }, + "engines": { + "node": ">=12" + } + }, "node_modules/fs.realpath": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz", @@ -2383,7 +2602,6 @@ "version": "2.3.3", "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz", "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==", - "dev": true, "hasInstallScript": true, "optional": true, "os": [ @@ -2482,6 +2700,11 @@ "resolved": "https://registry.npmjs.org/globrex/-/globrex-0.1.2.tgz", "integrity": "sha512-uHJgbwAMwNFf5mLst7IWLNg14x1CkeqglJb/K3doi4dw6q2IvAAmM/Y81kevy83wP+Sst+nutFTYOGg3d1lsxg==" }, + "node_modules/graceful-fs": { + "version": "4.2.11", + "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz", + "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==" + }, "node_modules/graphemer": { "version": "1.4.0", "resolved": "https://registry.npmjs.org/graphemer/-/graphemer-1.4.0.tgz", @@ -2495,6 +2718,34 @@ "node": ">=8" } }, + "node_modules/he": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz", + "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==", + "bin": { + "he": "bin/he" + } + }, + "node_modules/html-minifier-terser": { + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz", + "integrity": "sha512-YXxSlJBZTP7RS3tWnQw74ooKa6L9b9i9QYXY21eUEvhZ3u9XLfv6OnFsQq6RxkhHygsaUMvYsZRV5rU/OVNZxw==", + "dependencies": { + "camel-case": "^4.1.2", + "clean-css": "^5.2.2", + "commander": "^8.3.0", + "he": "^1.2.0", + "param-case": "^3.0.4", + "relateurl": "^0.2.7", + "terser": "^5.10.0" + }, + "bin": { + "html-minifier-terser": "cli.js" + }, + "engines": { + "node": ">=12" + } + }, "node_modules/ignore": { "version": "5.3.1", "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.1.tgz", @@ -2572,7 +2823,6 @@ "version": "7.0.0", "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz", "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==", - "dev": true, "engines": { "node": ">=0.12.0" } @@ -2590,6 +2840,43 @@ "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz", "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==" }, + "node_modules/jake": { + "version": "10.9.1", + "resolved": "https://registry.npmjs.org/jake/-/jake-10.9.1.tgz", + "integrity": "sha512-61btcOHNnLnsOdtLgA5efqQWjnSi/vow5HbI7HMdKKWqvrKR1bLK3BPlJn9gcSaP2ewuamUSMB5XEy76KUIS2w==", + "dependencies": { + "async": "^3.2.3", + "chalk": "^4.0.2", + "filelist": "^1.0.4", + "minimatch": "^3.1.2" + }, + "bin": { + "jake": "bin/cli.js" + }, + "engines": { + "node": ">=10" + } + }, + "node_modules/jake/node_modules/brace-expansion": { + "version": "1.1.11", + "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", + "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==", + "dependencies": { + "balanced-match": "^1.0.0", + "concat-map": "0.0.1" + } + }, + "node_modules/jake/node_modules/minimatch": { + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz", + "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==", + "dependencies": { + "brace-expansion": "^1.1.7" + }, + "engines": { + "node": "*" + } + }, "node_modules/javascript-natural-sort": { "version": "0.7.1", "resolved": "https://registry.npmjs.org/javascript-natural-sort/-/javascript-natural-sort-0.7.1.tgz", @@ -2637,6 +2924,17 @@ "resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz", "integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==" }, + "node_modules/jsonfile": { + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz", + "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==", + "dependencies": { + "universalify": "^2.0.0" + }, + "optionalDependencies": { + "graceful-fs": "^4.1.6" + } + }, "node_modules/keyv": { "version": "4.5.4", "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz", @@ -2692,11 +2990,18 @@ "loose-envify": "cli.js" } }, + "node_modules/lower-case": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz", + "integrity": "sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==", + "dependencies": { + "tslib": "^2.0.3" + } + }, "node_modules/merge2": { "version": "1.4.1", "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz", "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==", - "dev": true, "engines": { "node": ">= 8" } @@ -2705,7 +3010,6 @@ "version": "4.0.5", "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz", "integrity": "sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==", - "dev": true, "dependencies": { "braces": "^3.0.2", "picomatch": "^2.3.1" @@ -2775,6 +3079,35 @@ "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz", "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==" }, + "node_modules/no-case": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/no-case/-/no-case-3.0.4.tgz", + "integrity": "sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==", + "dependencies": { + "lower-case": "^2.0.2", + "tslib": "^2.0.3" + } + }, + "node_modules/node-html-parser": { + "version": "5.4.2", + "resolved": "https://registry.npmjs.org/node-html-parser/-/node-html-parser-5.4.2.tgz", + "integrity": "sha512-RaBPP3+51hPne/OolXxcz89iYvQvKOydaqoePpOgXcrOKZhjVIzmpKZz+Hd/RBO2/zN2q6CNJhQzucVz+u3Jyw==", + "dependencies": { + "css-select": "^4.2.1", + "he": "1.2.0" + } + }, + "node_modules/nth-check": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.1.1.tgz", + "integrity": "sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==", + "dependencies": { + "boolbase": "^1.0.0" + }, + "funding": { + "url": "https://github.com/fb55/nth-check?sponsor=1" + } + }, "node_modules/once": { "version": "1.4.0", "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz", @@ -2827,6 +3160,15 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/param-case": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/param-case/-/param-case-3.0.4.tgz", + "integrity": "sha512-RXlj7zCYokReqWpOPH9oYivUzLYZ5vAPIfEmCTNViosC78F8F0H9y7T7gG2M39ymgutxF5gcFEsyZQSph9Bp3A==", + "dependencies": { + "dot-case": "^3.0.4", + "tslib": "^2.0.3" + } + }, "node_modules/parent-module": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz", @@ -2838,6 +3180,15 @@ "node": ">=6" } }, + "node_modules/pascal-case": { + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/pascal-case/-/pascal-case-3.1.2.tgz", + "integrity": "sha512-uWlGT3YSnK9x3BQJaOdcZwrnV6hPpd8jFH1/ucpiLRPh/2zCVJKS19E4GvYHvaCcACn3foXZ0cLB9Wrx1KGe5g==", + "dependencies": { + "no-case": "^3.0.4", + "tslib": "^2.0.3" + } + }, "node_modules/path-exists": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz", @@ -2871,6 +3222,11 @@ "node": ">=8" } }, + "node_modules/pathe": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/pathe/-/pathe-0.2.0.tgz", + "integrity": "sha512-sTitTPYnn23esFR3RlqYBWn4c45WGeLcsKzQiUpXJAyfcWkolvlYpV8FLo7JishK946oQwMFUCHXQ9AjGPKExw==" + }, "node_modules/picocolors": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz", @@ -2880,7 +3236,6 @@ "version": "2.3.1", "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz", "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==", - "dev": true, "engines": { "node": ">=8.6" }, @@ -3082,6 +3437,14 @@ "redux": "^5.0.0" } }, + "node_modules/relateurl": { + "version": "0.2.7", + "resolved": "https://registry.npmjs.org/relateurl/-/relateurl-0.2.7.tgz", + "integrity": "sha512-G08Dxvm4iDN3MLM0EsP62EDV9IuhXPR6blNz6Utcp7zyV3tr4HVNINt6MpaRWbxoOHT3Q7YN2P+jaHX8vUbgog==", + "engines": { + "node": ">= 0.10" + } + }, "node_modules/reselect": { "version": "5.1.0", "resolved": "https://registry.npmjs.org/reselect/-/reselect-5.1.0.tgz", @@ -3122,7 +3485,6 @@ "version": "4.17.2", "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.17.2.tgz", "integrity": "sha512-/9ClTJPByC0U4zNLowV1tMBe8yMEAxewtR3cUNX5BoEpGH3dQEWpJLr6CLp0fPdYRF/fzVOgvDb1zXuakwF5kQ==", - "devOptional": true, "dependencies": { "@types/estree": "1.0.5" }, @@ -3244,6 +3606,23 @@ "node": ">=0.10.0" } }, + "node_modules/source-map-support": { + "version": "0.5.21", + "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.21.tgz", + "integrity": "sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==", + "dependencies": { + "buffer-from": "^1.0.0", + "source-map": "^0.6.0" + } + }, + "node_modules/source-map-support/node_modules/source-map": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/strip-ansi": { "version": "6.0.1", "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz", @@ -3325,6 +3704,28 @@ "url": "https://opencollective.com/unts" } }, + "node_modules/terser": { + "version": "5.31.0", + "resolved": "https://registry.npmjs.org/terser/-/terser-5.31.0.tgz", + "integrity": "sha512-Q1JFAoUKE5IMfI4Z/lkE/E6+SwgzO+x4tq4v1AyBLRj8VSYvRO6A/rQrPg1yud4g0En9EKI1TvFRF2tQFcoUkg==", + "dependencies": { + "@jridgewell/source-map": "^0.3.3", + "acorn": "^8.8.2", + "commander": "^2.20.0", + "source-map-support": "~0.5.20" + }, + "bin": { + "terser": "bin/terser" + }, + "engines": { + "node": ">=10" + } + }, + "node_modules/terser/node_modules/commander": { + "version": "2.20.3", + "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz", + "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==" + }, "node_modules/text-table": { "version": "0.2.0", "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz", @@ -3342,7 +3743,6 @@ "version": "5.0.1", "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz", "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==", - "dev": true, "dependencies": { "is-number": "^7.0.0" }, @@ -3421,6 +3821,20 @@ "node": ">=14.17" } }, + "node_modules/undici-types": { + "version": "5.26.5", + "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz", + "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==", + "devOptional": true + }, + "node_modules/universalify": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.1.tgz", + "integrity": "sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==", + "engines": { + "node": ">= 10.0.0" + } + }, "node_modules/uri-js": { "version": "4.4.1", "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz", @@ -3441,7 +3855,6 @@ "version": "5.2.11", "resolved": "https://registry.npmjs.org/vite/-/vite-5.2.11.tgz", "integrity": "sha512-HndV31LWW05i1BLPMUCE1B9E9GFbOu1MbenhS58FuK6owSO5qHm7GiCotrNY1YE5rMeQSFBGmT5ZaLEjFizgiQ==", - "devOptional": true, "dependencies": { "esbuild": "^0.20.1", "postcss": "^8.4.38", @@ -3492,6 +3905,28 @@ } } }, + "node_modules/vite-plugin-html": { + "version": "3.2.2", + "resolved": "https://registry.npmjs.org/vite-plugin-html/-/vite-plugin-html-3.2.2.tgz", + "integrity": "sha512-vb9C9kcdzcIo/Oc3CLZVS03dL5pDlOFuhGlZYDCJ840BhWl/0nGeZWf3Qy7NlOayscY4Cm/QRgULCQkEZige5Q==", + "dependencies": { + "@rollup/pluginutils": "^4.2.0", + "colorette": "^2.0.16", + "connect-history-api-fallback": "^1.6.0", + "consola": "^2.15.3", + "dotenv": "^16.0.0", + "dotenv-expand": "^8.0.2", + "ejs": "^3.1.6", + "fast-glob": "^3.2.11", + "fs-extra": "^10.0.1", + "html-minifier-terser": "^6.1.0", + "node-html-parser": "^5.3.3", + "pathe": "^0.2.0" + }, + "peerDependencies": { + "vite": ">=2.0.0" + } + }, "node_modules/vite-tsconfig-paths": { "version": "4.3.2", "resolved": "https://registry.npmjs.org/vite-tsconfig-paths/-/vite-tsconfig-paths-4.3.2.tgz", diff --git a/src/components/display/.gitkeep b/src/components/display/.gitkeep deleted file mode 100644 index e69de29..0000000 diff --git a/src/components/display/Booth.styled.ts b/src/components/display/Booth.styled.ts index 82479f5..970e0b5 100644 --- a/src/components/display/Booth.styled.ts +++ b/src/components/display/Booth.styled.ts @@ -1,45 +1,52 @@ import { motion } from "framer-motion"; import styled from "styled-components"; -export const BoothList = styled(motion.li)` - height: 40px; - padding: 20px 25px; +export const BoothListItem = styled(motion.li)` + height: 70px; + padding: 0px 25px; margin: 12px 0; border-radius: 25px; background-color: #e9e9fb; - align-content: center; `; export const BoothLink = styled.a` - position: relative; - text-decoration: none; + width: 100%; + height: 100%; + display: flex; + justify-content: space-between; align-items: center; + text-decoration: none; + span { - position: absolute; - left: 50px; + display: flex; + align-items: center; + + width: 100%; + + padding-left: 20px; } `; export const Index = styled.div` - position: absolute; - left: 0; + flex-shrink: 0; + width: 30px; height: 30px; border-radius: 10px; - align-content: center; - text-align: center; - font-weight: bolder; - font-size: 20px; + + display: flex; + justify-content: center; + align-items: center; color: #fff; background-color: #9874ff; `; export const Heart = styled.div` - position: absolute; - right: 0; + flex-shrink: 0; + width: 40px; height: 40px; border-radius: 50%; diff --git a/src/components/display/Booth.tsx b/src/components/display/Booth.tsx index 70eb889..f262d08 100644 --- a/src/components/display/Booth.tsx +++ b/src/components/display/Booth.tsx @@ -4,7 +4,7 @@ import { Variants } from "framer-motion"; import { Text } from "@/components/typography/Text"; -import { BoothList, BoothLink, Index, Heart } from "./Booth.styled"; +import { BoothListItem, BoothLink, Index, Heart } from "./Booth.styled"; interface IBooth { index: number; @@ -18,7 +18,7 @@ const itemVariants: Variants = { export const Booth: React.FC = ({ index, name, heart }) => { return ( - + {index + 1} @@ -29,6 +29,6 @@ export const Booth: React.FC = ({ index, name, heart }) => { {heart} - + ); }; diff --git a/src/components/typography/.gitkeep b/src/components/typography/.gitkeep deleted file mode 100644 index e69de29..0000000 From 0bd32cc198ccd1b9ac23070308bd95f56ae47b81 Mon Sep 17 00:00:00 2001 From: toothlessdev Date: Wed, 15 May 2024 22:27:51 +0900 Subject: [PATCH 2/5] =?UTF-8?q?feature:=20Map=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.tsx | 33 +- src/components/map/BoothInfo.tsx | 557 +++++++++++++++++++++++++++ src/components/map/BoothSVGImage.tsx | 17 + src/components/map/BoothSVGIndex.tsx | 206 ++++++++++ src/components/map/BoothSVGPath.tsx | 326 ++++++++++++++++ src/components/map/Map.tsx | 77 ++++ 6 files changed, 1201 insertions(+), 15 deletions(-) create mode 100644 src/components/map/BoothInfo.tsx create mode 100644 src/components/map/BoothSVGImage.tsx create mode 100644 src/components/map/BoothSVGIndex.tsx create mode 100644 src/components/map/BoothSVGPath.tsx create mode 100644 src/components/map/Map.tsx diff --git a/src/App.tsx b/src/App.tsx index b8622b8..5633eff 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -4,14 +4,15 @@ import { Route, Routes } from "react-router-dom"; import { MainLayout } from "@/components/layout/MainLayout"; +import BoothDetailPage from "@/pages/BoothDetailPage"; +import BoothListPage from "@/pages/BoothListPage"; +import ContributorPage from "@/pages/ContributorPage"; import HomePage from "@/pages/HomePage"; +import SpecialGuestPage from "@/pages/SpecialGuestPage"; +import TimeTablePage from "@/pages/TimeTablePage"; -import BoothDetailPage from "./pages/BoothDetailPage"; -import BoothListPage from "./pages/BoothListPage"; -import ContributorPage from "./pages/ContributorPage"; -import SpecialGuestPage from "./pages/SpecialGuestPage"; -import TimeTablePage from "./pages/TimeTablePage"; import { GlobalStyle } from "./styles/globals"; +import { BoothContextProvider } from "@/context/BoothContext"; import { store } from "@/store/store"; const App: React.FC = () => { @@ -19,16 +20,18 @@ const App: React.FC = () => { <> - - }> - } /> - }> - }> - }> - }> - }> - - + + + }> + } /> + }> + }> + }> + }> + }> + + + ); diff --git a/src/components/map/BoothInfo.tsx b/src/components/map/BoothInfo.tsx new file mode 100644 index 0000000..4c47473 --- /dev/null +++ b/src/components/map/BoothInfo.tsx @@ -0,0 +1,557 @@ +import { memo } from "react"; + +export const BoothInfo = memo(() => { + return ( + <> + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +}); diff --git a/src/components/map/BoothSVGImage.tsx b/src/components/map/BoothSVGImage.tsx new file mode 100644 index 0000000..3fac21e --- /dev/null +++ b/src/components/map/BoothSVGImage.tsx @@ -0,0 +1,17 @@ +import { memo } from "react"; + +export const BoothSVGImage = memo(() => ( + <> + + + + + + + +)); diff --git a/src/components/map/BoothSVGIndex.tsx b/src/components/map/BoothSVGIndex.tsx new file mode 100644 index 0000000..c6dc9f1 --- /dev/null +++ b/src/components/map/BoothSVGIndex.tsx @@ -0,0 +1,206 @@ +import { memo } from "react"; + +export const BoothSVGIndex = memo(() => ( + <> + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +)); diff --git a/src/components/map/BoothSVGPath.tsx b/src/components/map/BoothSVGPath.tsx new file mode 100644 index 0000000..d256f84 --- /dev/null +++ b/src/components/map/BoothSVGPath.tsx @@ -0,0 +1,326 @@ +import { memo } from "react"; + +export const BoothSVGPath = memo(() => ( + <> + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +)); diff --git a/src/components/map/Map.tsx b/src/components/map/Map.tsx new file mode 100644 index 0000000..f1059de --- /dev/null +++ b/src/components/map/Map.tsx @@ -0,0 +1,77 @@ +import { useEffect, useRef } from "react"; + +import { useBooth } from "@/hooks/useBooth"; + +import { BoothInfo } from "./BoothInfo"; +import { BoothSVGImage } from "./BoothSVGImage"; +import { BoothSVGIndex } from "./BoothSVGIndex"; +import { BoothSVGPath } from "./BoothSVGPath"; + +const options = { + root: document.querySelector("#map-container"), + rootMargin: "0px", + threshold: 0.5, +}; + +export const Map = (props: React.ComponentProps<"svg">) => { + const { setVisibleBooth } = useBooth(); + + const observer = useRef(null); + + useEffect(() => { + observer.current = new IntersectionObserver((entries) => { + setVisibleBooth((prevVisibleBooth) => { + const newVisibleBooth = new Set(prevVisibleBooth); + + entries.forEach((entry) => { + if (entry.isIntersecting) newVisibleBooth.add(entry.target.id.toString()); + else newVisibleBooth.delete(entry.target.id.toString()); + }); + + return Array.from(newVisibleBooth); + }); + }, options); + + const boothList = document.querySelectorAll(".booth-info"); + + boothList.forEach((booth) => { + observer.current?.observe(booth); + }); + + return () => { + boothList.forEach((booth) => { + observer.current?.unobserve(booth); + }); + }; + }, [setVisibleBooth]); + + return ( + <> + + + + + + + + + + + ); +}; From f121972a535daf82105dbbdfeed869bc5c10ccd2 Mon Sep 17 00:00:00 2001 From: toothlessdev Date: Wed, 15 May 2024 22:28:24 +0900 Subject: [PATCH 3/5] =?UTF-8?q?feat:=20BoothContext,=20useBooth=20?= =?UTF-8?q?=ED=9B=85=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/context/BoothContext.tsx | 24 ++++++++++++++++++++++++ src/hooks/useBooth.ts | 9 +++++++++ src/pages/BoothListPage.tsx | 23 ++++++++++++++--------- 3 files changed, 47 insertions(+), 9 deletions(-) create mode 100644 src/context/BoothContext.tsx create mode 100644 src/hooks/useBooth.ts diff --git a/src/context/BoothContext.tsx b/src/context/BoothContext.tsx new file mode 100644 index 0000000..cc4501d --- /dev/null +++ b/src/context/BoothContext.tsx @@ -0,0 +1,24 @@ +import { createContext, useState } from "react"; + +export const BoothContext = createContext<{ + visibleBooth: string[] | null; + setVisibleBooth: React.Dispatch>; +}>({ + visibleBooth: [], + setVisibleBooth: () => undefined, +}); + +export const BoothContextProvider = ({ children }: { children: React.ReactNode }) => { + const [visibleBooth, setVisibleBooth] = useState([]); + + return ( + + {children} + + ); +}; diff --git a/src/hooks/useBooth.ts b/src/hooks/useBooth.ts new file mode 100644 index 0000000..bf09eca --- /dev/null +++ b/src/hooks/useBooth.ts @@ -0,0 +1,9 @@ +import { useContext } from "react"; + +import { BoothContext } from "@/context/BoothContext"; + +export const useBooth = () => { + const boothContext = useContext(BoothContext); + if (!boothContext) throw new Error("useBooth 는 BoothContext 내부에서 사용되어야 합니다!"); + return { visibleBooth: boothContext.visibleBooth, setVisibleBooth: boothContext.setVisibleBooth }; +}; diff --git a/src/pages/BoothListPage.tsx b/src/pages/BoothListPage.tsx index 7a18a6b..9f9fd98 100644 --- a/src/pages/BoothListPage.tsx +++ b/src/pages/BoothListPage.tsx @@ -3,8 +3,9 @@ import React from "react"; import { Variants } from "framer-motion"; import { Booth } from "@/components/display/Booth"; +import { Map } from "@/components/map/Map"; -import { useVisitor } from "@/hooks/useVisitor"; +import { useBooth } from "@/hooks/useBooth"; // import Map from "./Map"; import { PageContainer, MainContent, VisibleList } from "./BoothListPage.styled"; @@ -23,22 +24,26 @@ const listVariants: Variants = { }; const BoothListPage: React.FC = () => { - const lists = ["컴퓨터학부 주점이름", "전자 주점이름", "토목 주점이름", "기계 주점이름", "식품공학부 주점이름"]; - const heart = 356; - //list랑 index, heart는 받아온 값으로 수정 + const { visibleBooth } = useBooth(); - const { visitorId } = useVisitor(); + /** + * a: 기타 + * b: 복합 + * c: 주막 + */ return ( - {/**/} +
+ +
+ - {lists.map((name, index) => { - return ; + {visibleBooth?.map((booth, index) => { + return ; })} -

{visitorId}

); From ff622a21514eca711f24306f1333e8fd659b4dd4 Mon Sep 17 00:00:00 2001 From: toothlessdev Date: Fri, 17 May 2024 01:26:25 +0900 Subject: [PATCH 4/5] =?UTF-8?q?feat:=20=EB=A7=B5=20pinch=20zoom=20?= =?UTF-8?q?=EA=B8=B0=EB=8A=A5=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 14 ++++ package.json | 1 + src/App.tsx | 23 +++--- src/assets/map.svg | 138 ++++++++++++++++++++++++++++++++++++ src/components/map/Map.tsx | 55 +++----------- src/pages/BoothListPage.tsx | 24 +++---- src/styles/globals.ts | 19 +++++ 7 files changed, 202 insertions(+), 72 deletions(-) create mode 100644 src/assets/map.svg diff --git a/package-lock.json b/package-lock.json index ba3a948..c2cffe6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -20,6 +20,7 @@ "react-icons": "^5.2.0", "react-redux": "^9.1.2", "react-router-dom": "^6.23.0", + "react-zoom-pan-pinch": "^3.4.4", "styled-components": "^6.1.8", "vite-plugin-html": "^3.2.2", "vite-tsconfig-paths": "^4.3.2" @@ -3424,6 +3425,19 @@ "react-dom": ">=16.8" } }, + "node_modules/react-zoom-pan-pinch": { + "version": "3.4.4", + "resolved": "https://registry.npmjs.org/react-zoom-pan-pinch/-/react-zoom-pan-pinch-3.4.4.tgz", + "integrity": "sha512-lGTu7D9lQpYEQ6sH+NSlLA7gicgKRW8j+D/4HO1AbSV2POvKRFzdWQ8eI0r3xmOsl4dYQcY+teV6MhULeg1xBw==", + "engines": { + "node": ">=8", + "npm": ">=5" + }, + "peerDependencies": { + "react": "*", + "react-dom": "*" + } + }, "node_modules/redux": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz", diff --git a/package.json b/package.json index 441e282..568b730 100644 --- a/package.json +++ b/package.json @@ -24,6 +24,7 @@ "react-icons": "^5.2.0", "react-redux": "^9.1.2", "react-router-dom": "^6.23.0", + "react-zoom-pan-pinch": "^3.4.4", "styled-components": "^6.1.8", "vite-plugin-html": "^3.2.2", "vite-tsconfig-paths": "^4.3.2" diff --git a/src/App.tsx b/src/App.tsx index 5633eff..01e3c16 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -12,7 +12,6 @@ import SpecialGuestPage from "@/pages/SpecialGuestPage"; import TimeTablePage from "@/pages/TimeTablePage"; import { GlobalStyle } from "./styles/globals"; -import { BoothContextProvider } from "@/context/BoothContext"; import { store } from "@/store/store"; const App: React.FC = () => { @@ -20,18 +19,16 @@ const App: React.FC = () => { <> - - - }> - } /> - }> - }> - }> - }> - }> - - - + + }> + } /> + }> + }> + }> + }> + }> + + ); diff --git a/src/assets/map.svg b/src/assets/map.svg new file mode 100644 index 0000000..08f4847 --- /dev/null +++ b/src/assets/map.svg @@ -0,0 +1,138 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/components/map/Map.tsx b/src/components/map/Map.tsx index f1059de..0fddd72 100644 --- a/src/components/map/Map.tsx +++ b/src/components/map/Map.tsx @@ -1,59 +1,20 @@ -import { useEffect, useRef } from "react"; - -import { useBooth } from "@/hooks/useBooth"; - import { BoothInfo } from "./BoothInfo"; import { BoothSVGImage } from "./BoothSVGImage"; import { BoothSVGIndex } from "./BoothSVGIndex"; import { BoothSVGPath } from "./BoothSVGPath"; -const options = { - root: document.querySelector("#map-container"), - rootMargin: "0px", - threshold: 0.5, -}; - export const Map = (props: React.ComponentProps<"svg">) => { - const { setVisibleBooth } = useBooth(); - - const observer = useRef(null); - - useEffect(() => { - observer.current = new IntersectionObserver((entries) => { - setVisibleBooth((prevVisibleBooth) => { - const newVisibleBooth = new Set(prevVisibleBooth); - - entries.forEach((entry) => { - if (entry.isIntersecting) newVisibleBooth.add(entry.target.id.toString()); - else newVisibleBooth.delete(entry.target.id.toString()); - }); - - return Array.from(newVisibleBooth); - }); - }, options); - - const boothList = document.querySelectorAll(".booth-info"); - - boothList.forEach((booth) => { - observer.current?.observe(booth); - }); - - return () => { - boothList.forEach((booth) => { - observer.current?.unobserve(booth); - }); - }; - }, [setVisibleBooth]); - return ( - <> +
@@ -72,6 +33,6 @@ export const Map = (props: React.ComponentProps<"svg">) => { - +
); }; diff --git a/src/pages/BoothListPage.tsx b/src/pages/BoothListPage.tsx index 9f9fd98..a562e30 100644 --- a/src/pages/BoothListPage.tsx +++ b/src/pages/BoothListPage.tsx @@ -1,13 +1,10 @@ import React from "react"; +import { TransformComponent, TransformWrapper } from "react-zoom-pan-pinch"; import { Variants } from "framer-motion"; -import { Booth } from "@/components/display/Booth"; import { Map } from "@/components/map/Map"; -import { useBooth } from "@/hooks/useBooth"; - -// import Map from "./Map"; import { PageContainer, MainContent, VisibleList } from "./BoothListPage.styled"; const listVariants: Variants = { @@ -24,25 +21,28 @@ const listVariants: Variants = { }; const BoothListPage: React.FC = () => { - const { visibleBooth } = useBooth(); - /** * a: 기타 * b: 복합 * c: 주막 */ - return ( -
- -
+ + + + + - {visibleBooth?.map((booth, index) => { + {/* {visibleBooth?.map((booth, index) => { return ; - })} + })} */}
diff --git a/src/styles/globals.ts b/src/styles/globals.ts index 8048861..a29e7fd 100644 --- a/src/styles/globals.ts +++ b/src/styles/globals.ts @@ -13,4 +13,23 @@ export const GlobalStyle = createGlobalStyle` padding: 0; font-family: 'Pretendard', sans-serif; } + + #map{ + /* width: 100%; */ + width: auto; + aspect-ratio: 4/3; + } + + #map-wrapper { + display: flex; + align-items: center; + width: 100%; + height: auto; + + border: 1px solid black; + + svg{ + + } + } `; From 904e516c2722ed22cc94060da59391b3c6f16e18 Mon Sep 17 00:00:00 2001 From: toothlessdev Date: Fri, 17 May 2024 01:56:23 +0900 Subject: [PATCH 5/5] =?UTF-8?q?refactor:=20Heart=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EC=B6=A9=EB=8F=8C=20=ED=95=B4=EA=B2=B0=20?= =?UTF-8?q?=EB=B0=8F=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EB=84=A4?= =?UTF-8?q?=EC=9D=B4=EB=B0=8D=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/display/Booth.tsx | 4 ++-- src/components/display/Heart.styled.ts | 2 -- src/pages/BoothListPage.tsx | 4 +++- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/display/Booth.tsx b/src/components/display/Booth.tsx index cbb38e7..cd2cf17 100644 --- a/src/components/display/Booth.tsx +++ b/src/components/display/Booth.tsx @@ -2,7 +2,7 @@ import { Variants } from "framer-motion"; import { Text } from "@/components/typography/Text"; -import { BoothList, BoothLink, Index } from "./Booth.styled"; +import { BoothLink, Index, BoothListItem } from "./Booth.styled"; import { Heart } from "./Heart"; interface IBooth { @@ -18,7 +18,7 @@ const itemVariants: Variants = { export const Booth: React.FC = ({ index, name, num, likable }) => { return ( - + {index + 1} diff --git a/src/components/display/Heart.styled.ts b/src/components/display/Heart.styled.ts index 2e88d79..cc060ba 100644 --- a/src/components/display/Heart.styled.ts +++ b/src/components/display/Heart.styled.ts @@ -4,8 +4,6 @@ interface IHeart { likable: boolean; } export const HeartWrapper = styled.div` - position: absolute; - right: 0; width: 40px; height: 40px; border-radius: 50%; diff --git a/src/pages/BoothListPage.tsx b/src/pages/BoothListPage.tsx index f1135f8..039aa81 100644 --- a/src/pages/BoothListPage.tsx +++ b/src/pages/BoothListPage.tsx @@ -3,8 +3,10 @@ import { TransformComponent, TransformWrapper } from "react-zoom-pan-pinch"; import { Variants } from "framer-motion"; +import { Booth } from "@/components/display/Booth"; import { Map } from "@/components/map/Map"; +// import { useVisitor } from "@/hooks/useVisitor"; import { PageContainer, MainContent, VisibleList } from "./BoothListPage.styled"; const listVariants: Variants = { @@ -30,7 +32,7 @@ const BoothListPage: React.FC = () => { const num = 356; //list랑 index, heart는 받아온 값으로 수정 - const { visitorId } = useVisitor(); + // const { visitorId } = useVisitor(); return (