diff --git a/frontend/package-lock.json b/frontend/package-lock.json index f8cbb67f..3b1a76cd 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -60,6 +60,7 @@ "msw": "2.3.1", "postcss": "8.4.39", "postcss-styled-syntax": "0.6.4", + "react-lottie": "^1.2.4", "storybook": "8.2.4", "stylelint": "16.6.1", "stylelint-config-clean-order": "6.1.0", @@ -70,8 +71,10 @@ "typescript": "5.5.3", "undici": "6.19.2", "webpack": "5.94.0", + "webpack-bundle-analyzer": "^4.10.2", "webpack-cli": "5.1.4", "webpack-dev-server": "5.0.4", + "webpack-font-preload-plugin": "^1.5.0", "webpack-merge": "6.0.1" } }, @@ -4199,6 +4202,12 @@ "node": ">=14" } }, + "node_modules/@polka/url": { + "version": "1.0.0-next.28", + "resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.28.tgz", + "integrity": "sha512-8LduaNlMZGwdZ6qWrKlfa+2M4gahzFkprZiAt2TF8uS0qQgBizKXpXURqvTJ4WtmupWxaLqjRb2UCTe72mu+Aw==", + "dev": true + }, "node_modules/@remix-run/router": { "version": "1.17.1", "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.17.1.tgz", @@ -8446,6 +8455,22 @@ "@babel/core": "^7.0.0" } }, + "node_modules/babel-runtime": { + "version": "6.26.0", + "resolved": "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.26.0.tgz", + "integrity": "sha512-ITKNuq2wKlW1fJg9sSW52eepoYgZBggvOAHC0u/CYu/qxQ9EVzThCgR69BnSXLHjy2f7SY5zaQ4yt7H9ZVxY2g==", + "dev": true, + "dependencies": { + "core-js": "^2.4.0", + "regenerator-runtime": "^0.11.0" + } + }, + "node_modules/babel-runtime/node_modules/regenerator-runtime": { + "version": "0.11.1", + "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz", + "integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==", + "dev": true + }, "node_modules/balanced-match": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz", @@ -8588,6 +8613,12 @@ "integrity": "sha512-nfulgvOR6S4gt9UKCeGJOuSGBPGiFT6oQ/2UBnvTY/5aQ1PnksW72fhZkM30DzoRRv2WpwZf1vHHEr3mtuXIWQ==", "dev": true }, + "node_modules/browser-process-hrtime": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/browser-process-hrtime/-/browser-process-hrtime-1.0.0.tgz", + "integrity": "sha512-9o5UecI3GhkpM6DrXr69PblIuWxPKk9Y0jHBRhdocZ2y7YECBFCsHm79Pr3OyR2AvjhDkabFJaDJMYRazHgsow==", + "dev": true + }, "node_modules/browserslist": { "version": "4.23.2", "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.23.2.tgz", @@ -9359,6 +9390,14 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/core-js": { + "version": "2.6.12", + "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.12.tgz", + "integrity": "sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==", + "deprecated": "core-js@<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js.", + "dev": true, + "hasInstallScript": true + }, "node_modules/core-js-compat": { "version": "3.37.1", "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.37.1.tgz", @@ -9780,6 +9819,12 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/debounce": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/debounce/-/debounce-1.2.1.tgz", + "integrity": "sha512-XRRe6Glud4rd/ZGQfiV1ruXSfbvfJedlV9Y6zOlP+2K04vBYiJEte6stfFkCP03aMnY5tsipamumUjL14fofug==", + "dev": true + }, "node_modules/debug": { "version": "4.3.5", "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.5.tgz", @@ -10205,6 +10250,12 @@ "webpack": "^4 || ^5" } }, + "node_modules/duplexer": { + "version": "0.1.2", + "resolved": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.2.tgz", + "integrity": "sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg==", + "dev": true + }, "node_modules/eastasianwidth": { "version": "0.2.0", "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz", @@ -12280,6 +12331,21 @@ "node": "^12.22.0 || ^14.16.0 || ^16.0.0 || >=17.0.0" } }, + "node_modules/gzip-size": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-6.0.0.tgz", + "integrity": "sha512-ax7ZYomf6jqPTQ4+XCpUGyXKHk5WweS+e05MBO4/y3WJ5RkmPXNKvX+bx1behVILVwr6JSQvZAku021CHPXG3Q==", + "dev": true, + "dependencies": { + "duplexer": "^0.1.2" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/handle-thing": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/handle-thing/-/handle-thing-2.0.1.tgz", @@ -12507,8 +12573,7 @@ "version": "2.0.2", "resolved": "https://registry.npmjs.org/html-escaper/-/html-escaper-2.0.2.tgz", "integrity": "sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==", - "dev": true, - "peer": true + "dev": true }, "node_modules/html-minifier-terser": { "version": "6.1.0", @@ -16388,6 +16453,12 @@ "loose-envify": "cli.js" } }, + "node_modules/lottie-web": { + "version": "5.12.2", + "resolved": "https://registry.npmjs.org/lottie-web/-/lottie-web-5.12.2.tgz", + "integrity": "sha512-uvhvYPC8kGPjXT3MyKMrL3JitEAmDMp30lVkuq/590Mw9ok6pWcFCwXJveo0t5uqYw1UREQHofD+jVpdjBv8wg==", + "dev": true + }, "node_modules/loupe": { "version": "2.3.7", "resolved": "https://registry.npmjs.org/loupe/-/loupe-2.3.7.tgz", @@ -16730,6 +16801,15 @@ "ufo": "^1.5.3" } }, + "node_modules/mrmime": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/mrmime/-/mrmime-2.0.0.tgz", + "integrity": "sha512-eu38+hdgojoyq63s+yTpN4XMBdt5l8HhMhc4VKLO9KM5caLIBvUm4thi7fFaxyTmCKeNnXZ5pAlBwCUnhA09uw==", + "dev": true, + "engines": { + "node": ">=10" + } + }, "node_modules/ms": { "version": "2.1.2", "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", @@ -17444,6 +17524,15 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/opener": { + "version": "1.5.2", + "resolved": "https://registry.npmjs.org/opener/-/opener-1.5.2.tgz", + "integrity": "sha512-ur5UIdyw5Y7yEj9wLzhqXiy6GZ3Mwx0yGI+5sMn2r0N0v3cKJvUmFH5yPP+WXh9e0xfyzyJX95D8l088DNFj7A==", + "dev": true, + "bin": { + "opener": "bin/opener-bin.js" + } + }, "node_modules/optionator": { "version": "0.9.4", "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.4.tgz", @@ -18483,6 +18572,22 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" }, + "node_modules/react-lottie": { + "version": "1.2.4", + "resolved": "https://registry.npmjs.org/react-lottie/-/react-lottie-1.2.4.tgz", + "integrity": "sha512-kBGxI+MIZGBf4wZhNCWwHkMcVP+kbpmrLWH/SkO0qCKc7D7eSPcxQbfpsmsCo8v2KCBYjuGSou+xTqK44D/jMg==", + "dev": true, + "dependencies": { + "babel-runtime": "^6.26.0", + "lottie-web": "^5.1.3" + }, + "engines": { + "npm": "^3.0.0" + }, + "peerDependencies": { + "react": ">=15.0.0" + } + }, "node_modules/react-router": { "version": "6.24.1", "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.24.1.tgz", @@ -19347,6 +19452,20 @@ "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==", "dev": true }, + "node_modules/sirv": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/sirv/-/sirv-2.0.4.tgz", + "integrity": "sha512-94Bdh3cC2PKrbgSOUqTiGPWVZeSiXfKOVZNJniWoqrWrRkB1CJzBU3NEbiTsPcYy1lDsANA/THzS+9WBiy5nfQ==", + "dev": true, + "dependencies": { + "@polka/url": "^1.0.0-next.24", + "mrmime": "^2.0.0", + "totalist": "^3.0.0" + }, + "engines": { + "node": ">= 10" + } + }, "node_modules/sisteransi": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/sisteransi/-/sisteransi-1.0.5.tgz", @@ -20768,6 +20887,15 @@ "node": ">=0.6" } }, + "node_modules/totalist": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/totalist/-/totalist-3.0.1.tgz", + "integrity": "sha512-sf4i37nQ2LBx4m3wB74y+ubopq6W/dIzXg0FDGjsYnZHVa1Da8FH853wlL2gtUhg+xJXjfk3kUZS3BRoQeoQBQ==", + "dev": true, + "engines": { + "node": ">=6" + } + }, "node_modules/tough-cookie": { "version": "4.1.4", "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-4.1.4.tgz", @@ -21488,6 +21616,16 @@ "node": ">= 0.8" } }, + "node_modules/w3c-hr-time": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz", + "integrity": "sha512-z8P5DvDNjKDoFIHK7q8r8lackT6l+jo/Ye3HOle7l9nICP9lf1Ci25fy9vHd0JOWewkIFzXIEig3TdKT7JQ5fQ==", + "deprecated": "Use your platform's native performance.now() and performance.timeOrigin.", + "dev": true, + "dependencies": { + "browser-process-hrtime": "^1.0.0" + } + }, "node_modules/w3c-xmlserializer": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-4.0.0.tgz", @@ -21600,6 +21738,74 @@ } } }, + "node_modules/webpack-bundle-analyzer": { + "version": "4.10.2", + "resolved": "https://registry.npmjs.org/webpack-bundle-analyzer/-/webpack-bundle-analyzer-4.10.2.tgz", + "integrity": "sha512-vJptkMm9pk5si4Bv922ZbKLV8UTT4zib4FPgXMhgzUny0bfDDkLXAVQs3ly3fS4/TN9ROFtb0NFrm04UXFE/Vw==", + "dev": true, + "dependencies": { + "@discoveryjs/json-ext": "0.5.7", + "acorn": "^8.0.4", + "acorn-walk": "^8.0.0", + "commander": "^7.2.0", + "debounce": "^1.2.1", + "escape-string-regexp": "^4.0.0", + "gzip-size": "^6.0.0", + "html-escaper": "^2.0.2", + "opener": "^1.5.2", + "picocolors": "^1.0.0", + "sirv": "^2.0.3", + "ws": "^7.3.1" + }, + "bin": { + "webpack-bundle-analyzer": "lib/bin/analyzer.js" + }, + "engines": { + "node": ">= 10.13.0" + } + }, + "node_modules/webpack-bundle-analyzer/node_modules/acorn-walk": { + "version": "8.3.4", + "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.3.4.tgz", + "integrity": "sha512-ueEepnujpqee2o5aIYnvHU6C0A42MNdsIDeqy5BydrkuC5R1ZuUFnm27EeFJGoEHJQgn3uleRvmTXaJgfXbt4g==", + "dev": true, + "dependencies": { + "acorn": "^8.11.0" + }, + "engines": { + "node": ">=0.4.0" + } + }, + "node_modules/webpack-bundle-analyzer/node_modules/commander": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz", + "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==", + "dev": true, + "engines": { + "node": ">= 10" + } + }, + "node_modules/webpack-bundle-analyzer/node_modules/ws": { + "version": "7.5.10", + "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.10.tgz", + "integrity": "sha512-+dbF1tHwZpXcbOJdVOkzLDxZP1ailvSxM6ZweXTegylPny803bFhA+vqBYw4s31NSAk4S2Qz+AKXK9a4wkdjcQ==", + "dev": true, + "engines": { + "node": ">=8.3.0" + }, + "peerDependencies": { + "bufferutil": "^4.0.1", + "utf-8-validate": "^5.0.2" + }, + "peerDependenciesMeta": { + "bufferutil": { + "optional": true + }, + "utf-8-validate": { + "optional": true + } + } + }, "node_modules/webpack-cli": { "version": "5.1.4", "resolved": "https://registry.npmjs.org/webpack-cli/-/webpack-cli-5.1.4.tgz", @@ -21813,6 +22019,133 @@ "url": "https://github.com/sponsors/isaacs" } }, + "node_modules/webpack-font-preload-plugin": { + "version": "1.5.0", + "resolved": "https://registry.npmjs.org/webpack-font-preload-plugin/-/webpack-font-preload-plugin-1.5.0.tgz", + "integrity": "sha512-/Nh6MNa7/rbu3ZcqSR1SxB+G5XaITu7U2yZO5INTsVRpVlMLQmHQZCoDt4PP+iFyBdvBCDbA0CImRXHarQ0wpQ==", + "dev": true, + "dependencies": { + "jsdom": "^19.0.0", + "webpack-sources": "^3.2.2" + }, + "engines": { + "node": ">= 10.17.0" + }, + "peerDependencies": { + "webpack": "^4.0.0 || ^5.0.0" + } + }, + "node_modules/webpack-font-preload-plugin/node_modules/acorn-globals": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/acorn-globals/-/acorn-globals-6.0.0.tgz", + "integrity": "sha512-ZQl7LOWaF5ePqqcX4hLuv/bLXYQNfNWw2c0/yX/TsPRKamzHcTGQnlCjHT3TsmkOUVEPS3crCxiPfdzE/Trlhg==", + "dev": true, + "dependencies": { + "acorn": "^7.1.1", + "acorn-walk": "^7.1.1" + } + }, + "node_modules/webpack-font-preload-plugin/node_modules/acorn-globals/node_modules/acorn": { + "version": "7.4.1", + "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz", + "integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==", + "dev": true, + "bin": { + "acorn": "bin/acorn" + }, + "engines": { + "node": ">=0.4.0" + } + }, + "node_modules/webpack-font-preload-plugin/node_modules/jsdom": { + "version": "19.0.0", + "resolved": "https://registry.npmjs.org/jsdom/-/jsdom-19.0.0.tgz", + "integrity": "sha512-RYAyjCbxy/vri/CfnjUWJQQtZ3LKlLnDqj+9XLNnJPgEGeirZs3hllKR20re8LUZ6o1b1X4Jat+Qd26zmP41+A==", + "dev": true, + "dependencies": { + "abab": "^2.0.5", + "acorn": "^8.5.0", + "acorn-globals": "^6.0.0", + "cssom": "^0.5.0", + "cssstyle": "^2.3.0", + "data-urls": "^3.0.1", + "decimal.js": "^10.3.1", + "domexception": "^4.0.0", + "escodegen": "^2.0.0", + "form-data": "^4.0.0", + "html-encoding-sniffer": "^3.0.0", + "http-proxy-agent": "^5.0.0", + "https-proxy-agent": "^5.0.0", + "is-potential-custom-element-name": "^1.0.1", + "nwsapi": "^2.2.0", + "parse5": "6.0.1", + "saxes": "^5.0.1", + "symbol-tree": "^3.2.4", + "tough-cookie": "^4.0.0", + "w3c-hr-time": "^1.0.2", + "w3c-xmlserializer": "^3.0.0", + "webidl-conversions": "^7.0.0", + "whatwg-encoding": "^2.0.0", + "whatwg-mimetype": "^3.0.0", + "whatwg-url": "^10.0.0", + "ws": "^8.2.3", + "xml-name-validator": "^4.0.0" + }, + "engines": { + "node": ">=12" + }, + "peerDependencies": { + "canvas": "^2.5.0" + }, + "peerDependenciesMeta": { + "canvas": { + "optional": true + } + } + }, + "node_modules/webpack-font-preload-plugin/node_modules/parse5": { + "version": "6.0.1", + "resolved": "https://registry.npmjs.org/parse5/-/parse5-6.0.1.tgz", + "integrity": "sha512-Ofn/CTFzRGTTxwpNEs9PP93gXShHcTq255nzRYSKe8AkVpZY7e1fpmTfOyoIvjP5HG7Z2ZM7VS9PPhQGW2pOpw==", + "dev": true + }, + "node_modules/webpack-font-preload-plugin/node_modules/saxes": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/saxes/-/saxes-5.0.1.tgz", + "integrity": "sha512-5LBh1Tls8c9xgGjw3QrMwETmTMVk0oFgvrFSvWx62llR2hcEInrKNZ2GZCCuuy2lvWrdl5jhbpeqc5hRYKFOcw==", + "dev": true, + "dependencies": { + "xmlchars": "^2.2.0" + }, + "engines": { + "node": ">=10" + } + }, + "node_modules/webpack-font-preload-plugin/node_modules/w3c-xmlserializer": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-3.0.0.tgz", + "integrity": "sha512-3WFqGEgSXIyGhOmAFtlicJNMjEps8b1MG31NCA0/vOF9+nKMUW1ckhi9cnNHmf88Rzw5V+dwIwsm2C7X8k9aQg==", + "dev": true, + "dependencies": { + "xml-name-validator": "^4.0.0" + }, + "engines": { + "node": ">=12" + } + }, + "node_modules/webpack-font-preload-plugin/node_modules/whatwg-url": { + "version": "10.0.0", + "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-10.0.0.tgz", + "integrity": "sha512-CLxxCmdUby142H5FZzn4D8ikO1cmypvXVQktsgosNy4a4BHrDHeciBBGZhb0bNoR5/MltoCatso+vFjjGx8t0w==", + "dev": true, + "dependencies": { + "tr46": "^3.0.0", + "webidl-conversions": "^7.0.0" + }, + "engines": { + "node": ">=12" + } + }, "node_modules/webpack-hot-middleware": { "version": "2.26.1", "resolved": "https://registry.npmjs.org/webpack-hot-middleware/-/webpack-hot-middleware-2.26.1.tgz", diff --git a/frontend/package.json b/frontend/package.json index d02c373a..55440df2 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -79,6 +79,7 @@ "msw": "2.3.1", "postcss": "8.4.39", "postcss-styled-syntax": "0.6.4", + "react-lottie": "^1.2.4", "storybook": "8.2.4", "stylelint": "16.6.1", "stylelint-config-clean-order": "6.1.0", @@ -89,8 +90,10 @@ "typescript": "5.5.3", "undici": "6.19.2", "webpack": "5.94.0", + "webpack-bundle-analyzer": "^4.10.2", "webpack-cli": "5.1.4", "webpack-dev-server": "5.0.4", + "webpack-font-preload-plugin": "^1.5.0", "webpack-merge": "6.0.1" }, "msw": { diff --git a/frontend/src/assets/fonts/Pretendard-Black.woff2 b/frontend/src/assets/fonts/Pretendard-Black.woff2 deleted file mode 100644 index eafe6835..00000000 Binary files a/frontend/src/assets/fonts/Pretendard-Black.woff2 and /dev/null differ diff --git a/frontend/src/assets/fonts/Pretendard-Bold.subset.woff2 b/frontend/src/assets/fonts/Pretendard-Bold.subset.woff2 new file mode 100644 index 00000000..f80bdb72 Binary files /dev/null and b/frontend/src/assets/fonts/Pretendard-Bold.subset.woff2 differ diff --git a/frontend/src/assets/fonts/Pretendard-Bold.woff2 b/frontend/src/assets/fonts/Pretendard-Bold.woff2 deleted file mode 100644 index 4d40a1ab..00000000 Binary files a/frontend/src/assets/fonts/Pretendard-Bold.woff2 and /dev/null differ diff --git a/frontend/src/assets/fonts/Pretendard-ExtraBold.woff2 b/frontend/src/assets/fonts/Pretendard-ExtraBold.woff2 deleted file mode 100644 index dcd57e75..00000000 Binary files a/frontend/src/assets/fonts/Pretendard-ExtraBold.woff2 and /dev/null differ diff --git a/frontend/src/assets/fonts/Pretendard-ExtraLight.woff2 b/frontend/src/assets/fonts/Pretendard-ExtraLight.woff2 deleted file mode 100644 index e5104022..00000000 Binary files a/frontend/src/assets/fonts/Pretendard-ExtraLight.woff2 and /dev/null differ diff --git a/frontend/src/assets/fonts/Pretendard-Light.subset.woff2 b/frontend/src/assets/fonts/Pretendard-Light.subset.woff2 new file mode 100644 index 00000000..5d4fa6c1 Binary files /dev/null and b/frontend/src/assets/fonts/Pretendard-Light.subset.woff2 differ diff --git a/frontend/src/assets/fonts/Pretendard-Light.woff2 b/frontend/src/assets/fonts/Pretendard-Light.woff2 deleted file mode 100644 index 7f82fe84..00000000 Binary files a/frontend/src/assets/fonts/Pretendard-Light.woff2 and /dev/null differ diff --git a/frontend/src/assets/fonts/Pretendard-Medium.subset.woff2 b/frontend/src/assets/fonts/Pretendard-Medium.subset.woff2 new file mode 100644 index 00000000..94199805 Binary files /dev/null and b/frontend/src/assets/fonts/Pretendard-Medium.subset.woff2 differ diff --git a/frontend/src/assets/fonts/Pretendard-Medium.woff2 b/frontend/src/assets/fonts/Pretendard-Medium.woff2 deleted file mode 100644 index f8c743d6..00000000 Binary files a/frontend/src/assets/fonts/Pretendard-Medium.woff2 and /dev/null differ diff --git a/frontend/src/assets/fonts/Pretendard-Regular.subset.woff2 b/frontend/src/assets/fonts/Pretendard-Regular.subset.woff2 new file mode 100644 index 00000000..6fc8ec42 Binary files /dev/null and b/frontend/src/assets/fonts/Pretendard-Regular.subset.woff2 differ diff --git a/frontend/src/assets/fonts/Pretendard-Regular.woff2 b/frontend/src/assets/fonts/Pretendard-Regular.woff2 deleted file mode 100644 index a9f62319..00000000 Binary files a/frontend/src/assets/fonts/Pretendard-Regular.woff2 and /dev/null differ diff --git a/frontend/src/assets/fonts/Pretendard-SemiBold.woff2 b/frontend/src/assets/fonts/Pretendard-SemiBold.woff2 deleted file mode 100644 index 4c6a32de..00000000 Binary files a/frontend/src/assets/fonts/Pretendard-SemiBold.woff2 and /dev/null differ diff --git a/frontend/src/assets/fonts/Pretendard-Thin.woff2 b/frontend/src/assets/fonts/Pretendard-Thin.woff2 deleted file mode 100644 index 6c9bc960..00000000 Binary files a/frontend/src/assets/fonts/Pretendard-Thin.woff2 and /dev/null differ diff --git a/frontend/src/assets/images/kakao.svg b/frontend/src/assets/images/kakao.svg index 19936ee4..5cb4ce3b 100644 --- a/frontend/src/assets/images/kakao.svg +++ b/frontend/src/assets/images/kakao.svg @@ -4,6 +4,6 @@ - - + + \ No newline at end of file diff --git a/frontend/src/assets/images/logo.svg b/frontend/src/assets/images/logo.svg index e70dce3e..051997a8 100644 --- a/frontend/src/assets/images/logo.svg +++ b/frontend/src/assets/images/logo.svg @@ -1,9 +1,9 @@ - + - - + + - - + + \ No newline at end of file diff --git a/frontend/src/assets/images/logoSunglass.svg b/frontend/src/assets/images/logoSunglass.svg index c6ae2dd6..4df236bc 100644 --- a/frontend/src/assets/images/logoSunglass.svg +++ b/frontend/src/assets/images/logoSunglass.svg @@ -1,14 +1,4 @@ - - - - - - - - - - - - - + + + diff --git a/frontend/src/assets/images/momoCharacter.svg b/frontend/src/assets/images/momoCharacter.svg index 6836768b..a149256a 100644 --- a/frontend/src/assets/images/momoCharacter.svg +++ b/frontend/src/assets/images/momoCharacter.svg @@ -1,10 +1,9 @@ - - + - + diff --git a/frontend/src/assets/images/momoPageLoading.json b/frontend/src/assets/images/momoPageLoading.json new file mode 100644 index 00000000..44481687 --- /dev/null +++ b/frontend/src/assets/images/momoPageLoading.json @@ -0,0 +1,434 @@ +{ + "nm": "Main Scene", + "ddd": 0, + "h": 256, + "w": 256, + "meta": { "g": "@lottiefiles/creator 1.26.0" }, + "layers": [ + { + "ty": 4, + "nm": "Shape Layer 3", + "sr": 1, + "st": 0, + "op": 300.00001221925, + "ip": 0, + "hd": false, + "ddd": 0, + "bm": 0, + "hasMask": false, + "ao": 0, + "ks": { + "a": { "a": 0, "k": [-70, -0.5, 0] }, + "s": { "a": 0, "k": [75, 75, 100] }, + "sk": { "a": 0, "k": 0 }, + "p": { + "a": 1, + "k": [ + { + "o": { "x": 0.333, "y": 0 }, + "i": { "x": 0.667, "y": 1 }, + "s": [208.6, 127.969, 0], + "t": 20 + }, + { + "o": { "x": 0.333, "y": 0 }, + "i": { "x": 0.667, "y": 1 }, + "s": [208.6, 88, 0], + "t": 30 + }, + { "s": [208.6, 128, 0], "t": 40.0000016292334 } + ] + }, + "r": { "a": 0, "k": 0 }, + "sa": { "a": 0, "k": 0 }, + "o": { "a": 0, "k": 100 } + }, + "shapes": [ + { + "ty": "gr", + "bm": 0, + "hd": false, + "mn": "ADBE Vector Group", + "nm": "Ellipse 1", + "ix": 1, + "cix": 2, + "np": 3, + "it": [ + { + "ty": "el", + "bm": 0, + "hd": false, + "mn": "ADBE Vector Shape - Ellipse", + "nm": "Ellipse Path 1", + "d": 1, + "p": { "a": 0, "k": [0, 0] }, + "s": { "a": 0, "k": [33.75, 34.5] } + }, + { + "ty": "fl", + "bm": 0, + "hd": false, + "mn": "ADBE Vector Graphic - Fill", + "nm": "Fill 1", + "c": { "a": 0, "k": [1, 0.2784, 0.4471] }, + "r": 1, + "o": { "a": 0, "k": 100 } + }, + { + "ty": "tr", + "a": { "a": 0, "k": [0.658333333333303, 0.041333333333341216] }, + "s": { "a": 0, "k": [100, 100] }, + "sk": { "a": 0, "k": 0 }, + "p": { "a": 0, "k": [-69.4666666666667, -0.4586666666666588] }, + "r": { "a": 0, "k": 0 }, + "sa": { "a": 0, "k": 0 }, + "o": { "a": 0, "k": 100 } + } + ] + } + ], + "ind": 1 + }, + { + "ty": 4, + "nm": "Shape Layer 2", + "sr": 1, + "st": 0, + "op": 300.00001221925, + "ip": 0, + "hd": false, + "ddd": 0, + "bm": 0, + "hasMask": false, + "ao": 0, + "ks": { + "a": { "a": 0, "k": [-70, -0.5, 0] }, + "s": { "a": 0, "k": [75, 75, 100] }, + "sk": { "a": 0, "k": 0 }, + "p": { + "a": 1, + "k": [ + { + "o": { "x": 0.333, "y": 0 }, + "i": { "x": 0.667, "y": 1 }, + "s": [168.6, 128, 0], + "t": 15 + }, + { + "o": { "x": 0.333, "y": 0 }, + "i": { "x": 0.667, "y": 1 }, + "s": [168.6, 88, 0], + "t": 25 + }, + { "s": [168.6, 128, 0], "t": 35.0000014255792 } + ] + }, + "r": { "a": 0, "k": 0 }, + "sa": { "a": 0, "k": 0 }, + "o": { "a": 0, "k": 100 } + }, + "shapes": [ + { + "ty": "gr", + "bm": 0, + "hd": false, + "mn": "ADBE Vector Group", + "nm": "Ellipse 1", + "ix": 1, + "cix": 2, + "np": 3, + "it": [ + { + "ty": "el", + "bm": 0, + "hd": false, + "mn": "ADBE Vector Shape - Ellipse", + "nm": "Ellipse Path 1", + "d": 1, + "p": { "a": 0, "k": [0, 0] }, + "s": { "a": 0, "k": [33.75, 34.5] } + }, + { + "ty": "fl", + "bm": 0, + "hd": false, + "mn": "ADBE Vector Graphic - Fill", + "nm": "Fill 1", + "c": { "a": 0, "k": [1, 0.4392, 0.5725] }, + "r": 1, + "o": { "a": 0, "k": 100 } + }, + { + "ty": "tr", + "a": { "a": 0, "k": [0, 0] }, + "s": { "a": 0, "k": [100, 100] }, + "sk": { "a": 0, "k": 0 }, + "p": { "a": 0, "k": [-70.125, -0.5] }, + "r": { "a": 0, "k": 0 }, + "sa": { "a": 0, "k": 0 }, + "o": { "a": 0, "k": 100 } + } + ] + } + ], + "ind": 2 + }, + { + "ty": 4, + "nm": "Shape Layer 1", + "sr": 1, + "st": 0, + "op": 300.00001221925, + "ip": 0, + "hd": false, + "ddd": 0, + "bm": 0, + "hasMask": false, + "ao": 0, + "ks": { + "a": { "a": 0, "k": [-70, -0.5, 0] }, + "s": { "a": 0, "k": [75, 75, 100] }, + "sk": { "a": 0, "k": 0 }, + "p": { + "a": 1, + "k": [ + { + "o": { "x": 0.333, "y": 0 }, + "i": { "x": 0.667, "y": 1 }, + "s": [128.594, 127.969, 0], + "t": 10 + }, + { + "o": { "x": 0.333, "y": 0 }, + "i": { "x": 0.667, "y": 1 }, + "s": [128.594, 88, 0], + "t": 20 + }, + { "s": [128.594, 128, 0], "t": 30.0000012219251 } + ] + }, + "r": { "a": 0, "k": 0 }, + "sa": { "a": 0, "k": 0 }, + "o": { "a": 0, "k": 100 } + }, + "shapes": [ + { + "ty": "gr", + "bm": 0, + "hd": false, + "mn": "ADBE Vector Group", + "nm": "Ellipse 1", + "ix": 1, + "cix": 2, + "np": 3, + "it": [ + { + "ty": "el", + "bm": 0, + "hd": false, + "mn": "ADBE Vector Shape - Ellipse", + "nm": "Ellipse Path 1", + "d": 1, + "p": { "a": 0, "k": [0, 0] }, + "s": { "a": 0, "k": [33.75, 34.5] } + }, + { + "ty": "fl", + "bm": 0, + "hd": false, + "mn": "ADBE Vector Graphic - Fill", + "nm": "Fill 1", + "c": { "a": 0, "k": [1, 0.5451, 0.6549] }, + "r": 1, + "o": { "a": 0, "k": 100 } + }, + { + "ty": "tr", + "a": { "a": 0, "k": [0, 0] }, + "s": { "a": 0, "k": [100, 100] }, + "sk": { "a": 0, "k": 0 }, + "p": { "a": 0, "k": [-70.125, -0.5] }, + "r": { "a": 0, "k": 0 }, + "sa": { "a": 0, "k": 0 }, + "o": { "a": 0, "k": 100 } + } + ] + } + ], + "ind": 3 + }, + { + "ty": 4, + "nm": "Shape Layer 4", + "sr": 1, + "st": 0, + "op": 300.00001221925, + "ip": 0, + "hd": false, + "ddd": 0, + "bm": 0, + "hasMask": false, + "ao": 0, + "ks": { + "a": { "a": 0, "k": [-70, -0.5, 0] }, + "s": { "a": 0, "k": [75, 75, 100] }, + "sk": { "a": 0, "k": 0 }, + "p": { + "a": 1, + "k": [ + { + "o": { "x": 0.333, "y": 0 }, + "i": { "x": 0.667, "y": 1 }, + "s": [88.6, 127.969, 0], + "t": 5 + }, + { + "o": { "x": 0.333, "y": 0 }, + "i": { "x": 0.667, "y": 1 }, + "s": [88.6, 88, 0], + "t": 15 + }, + { "s": [88.6, 128, 0], "t": 25.0000010182709 } + ] + }, + "r": { "a": 0, "k": 0 }, + "sa": { "a": 0, "k": 0 }, + "o": { "a": 0, "k": 100 } + }, + "shapes": [ + { + "ty": "gr", + "bm": 0, + "hd": false, + "mn": "ADBE Vector Group", + "nm": "Ellipse 1", + "ix": 1, + "cix": 2, + "np": 3, + "it": [ + { + "ty": "el", + "bm": 0, + "hd": false, + "mn": "ADBE Vector Shape - Ellipse", + "nm": "Ellipse Path 1", + "d": 1, + "p": { "a": 0, "k": [0, 0] }, + "s": { "a": 0, "k": [33.75, 34.5] } + }, + { + "ty": "fl", + "bm": 0, + "hd": false, + "mn": "ADBE Vector Graphic - Fill", + "nm": "Fill 1", + "c": { "a": 0, "k": [1, 0.7608, 0.8157] }, + "r": 1, + "o": { "a": 0, "k": 100 } + }, + { + "ty": "tr", + "a": { "a": 0, "k": [0, 0] }, + "s": { "a": 0, "k": [100, 100] }, + "sk": { "a": 0, "k": 0 }, + "p": { "a": 0, "k": [-70.125, -0.5] }, + "r": { "a": 0, "k": 0 }, + "sa": { "a": 0, "k": 0 }, + "o": { "a": 0, "k": 100 } + } + ] + } + ], + "ind": 4 + }, + { + "ty": 4, + "nm": "Shape Layer 5", + "sr": 1, + "st": 0, + "op": 300.00001221925, + "ip": 0, + "hd": false, + "ddd": 0, + "bm": 0, + "hasMask": false, + "ao": 0, + "ks": { + "a": { "a": 0, "k": [-70, -0.5, 0] }, + "s": { "a": 0, "k": [75, 75, 100] }, + "sk": { "a": 0, "k": 0 }, + "p": { + "a": 1, + "k": [ + { + "o": { "x": 0.333, "y": 0 }, + "i": { "x": 0.667, "y": 1 }, + "s": [48.6, 127.969, 0], + "t": 0 + }, + { + "o": { "x": 0.333, "y": 0 }, + "i": { "x": 0.667, "y": 1 }, + "s": [48.6, 88, 0], + "t": 10 + }, + { "s": [48.6, 128, 0], "t": 20.0000008146167 } + ] + }, + "r": { "a": 0, "k": 0 }, + "sa": { "a": 0, "k": 0 }, + "o": { "a": 0, "k": 100 } + }, + "shapes": [ + { + "ty": "gr", + "bm": 0, + "hd": false, + "mn": "ADBE Vector Group", + "nm": "Ellipse 1", + "ix": 1, + "cix": 2, + "np": 3, + "it": [ + { + "ty": "el", + "bm": 0, + "hd": false, + "mn": "ADBE Vector Shape - Ellipse", + "nm": "Ellipse Path 1", + "d": 1, + "p": { "a": 0, "k": [0, 0] }, + "s": { "a": 0, "k": [33.75, 34.5] } + }, + { + "ty": "fl", + "bm": 0, + "hd": false, + "mn": "ADBE Vector Graphic - Fill", + "nm": "Fill 1", + "c": { "a": 0, "k": [1, 0.8392, 0.8784] }, + "r": 1, + "o": { "a": 0, "k": 100 } + }, + { + "ty": "tr", + "a": { "a": 0, "k": [0, 0] }, + "s": { "a": 0, "k": [100, 100] }, + "sk": { "a": 0, "k": 0 }, + "p": { "a": 0, "k": [-70.125, -0.5] }, + "r": { "a": 0, "k": 0 }, + "sa": { "a": 0, "k": 0 }, + "o": { "a": 0, "k": 100 } + } + ] + } + ], + "ind": 5 + } + ], + "v": "5.7.0", + "fr": 29.9700012207031, + "op": 41, + "ip": 0, + "assets": [] +} diff --git a/frontend/src/assets/images/questionMomoCharacter.svg b/frontend/src/assets/images/questionMomoCharacter.svg index 59e92391..67a23d55 100644 --- a/frontend/src/assets/images/questionMomoCharacter.svg +++ b/frontend/src/assets/images/questionMomoCharacter.svg @@ -1,15 +1,12 @@ - - - - + + - + - - + diff --git a/frontend/src/assets/images/sadMomoCharacter.svg b/frontend/src/assets/images/sadMomoCharacter.svg deleted file mode 100644 index 853ba256..00000000 --- a/frontend/src/assets/images/sadMomoCharacter.svg +++ /dev/null @@ -1,13 +0,0 @@ - - - - - - - - - - - - - diff --git a/frontend/src/components/_common/Header/Header.styles.ts b/frontend/src/components/_common/Header/Header.styles.ts index 5c483d32..4f8c7132 100644 --- a/frontend/src/components/_common/Header/Header.styles.ts +++ b/frontend/src/components/_common/Header/Header.styles.ts @@ -1,5 +1,7 @@ import { css } from '@emotion/react'; +import theme from '@styles/theme'; + // 테이블의 시간 범위가 길어지는 경우, Header가 가리는 문제를 해결하기 위해 z-index 수정(@해리) export const s_header = css` position: sticky; @@ -27,5 +29,5 @@ export const s_logoContainer = css` export const s_title = css` font-size: 2.4rem; - font-weight: 800; + font-weight: ${theme.typography.titleBold}; `; diff --git a/frontend/src/components/_common/PageMoveLoading/PageMoveLoading.style.ts b/frontend/src/components/_common/PageMoveLoading/PageMoveLoading.style.ts new file mode 100644 index 00000000..c1312c10 --- /dev/null +++ b/frontend/src/components/_common/PageMoveLoading/PageMoveLoading.style.ts @@ -0,0 +1,17 @@ +import { css } from '@emotion/react'; + +import { PRIMITIVE_COLORS } from '@styles/tokens/colors'; + +export const s_loadingWrapper = css` + display: flex; + flex-direction: column; + gap: 1rem; + align-items: center; + justify-content: center; + + height: 100%; +`; + +export const s_text = css` + color: ${PRIMITIVE_COLORS.grey[500]}; +`; diff --git a/frontend/src/components/_common/PageMoveLoading/index.tsx b/frontend/src/components/_common/PageMoveLoading/index.tsx new file mode 100644 index 00000000..ea62c749 --- /dev/null +++ b/frontend/src/components/_common/PageMoveLoading/index.tsx @@ -0,0 +1,23 @@ +import Lottie from 'react-lottie'; + +import momoPageLoading from '@assets/images/momoPageLoading.json'; + +import { s_loadingWrapper, s_text } from './PageMoveLoading.style'; + +export default function PageMoveLoading() { + const defaultOptions = { + loop: true, + autoplay: true, + animationData: momoPageLoading, + rendererSettings: { + preserveAspectRatio: 'xMidYMid slice', + }, + }; + + return ( +
+ +
로딩중입니다...
+
+ ); +} diff --git a/frontend/src/pages/FixedMeetingTicketPage/components/UnconfirmedMessage/index.tsx b/frontend/src/pages/FixedMeetingTicketPage/components/UnconfirmedMessage/index.tsx index 080a4089..2faa1be5 100644 --- a/frontend/src/pages/FixedMeetingTicketPage/components/UnconfirmedMessage/index.tsx +++ b/frontend/src/pages/FixedMeetingTicketPage/components/UnconfirmedMessage/index.tsx @@ -2,7 +2,7 @@ import { useNavigate } from 'react-router-dom'; import { Button } from '@components/_common/Buttons/Button'; -import SadMomoCharacter from '@assets/images/sadMomoCharacter.svg'; +import QuestionMomoCharacter from '@assets/images/questionMomoCharacter.svg'; import { s_container } from './UnconfirmedMessage.styles'; @@ -18,7 +18,7 @@ function UnconfirmedMessage({ uuid }: UnconfirmedMessageProps) { return (
- +
약속이 아직 확정되지 않았어요 :(