diff --git a/.github/workflows/prBuildCI.yml b/.github/workflows/prBuildCI.yml index 921a2d21..daba1918 100644 --- a/.github/workflows/prBuildCI.yml +++ b/.github/workflows/prBuildCI.yml @@ -20,7 +20,7 @@ jobs: - name: Build # 빌드 run: yarn build - - name: Close PR, if build fails + - name: Comment and Request changes, if build fails if: ${{ failure() }} uses: actions/github-script@v6 with: @@ -40,6 +40,5 @@ jobs: repo: context.repo.repo, pull_number: pull_number, title: updated_title, - state: 'closed' }) diff --git a/.github/workflows/push-buildRepo.yml b/.github/workflows/push-buildRepo.yml index c43ecfee..d67bc1fe 100644 --- a/.github/workflows/push-buildRepo.yml +++ b/.github/workflows/push-buildRepo.yml @@ -1,4 +1,4 @@ -name: Push Main +name: Push Main on: push: diff --git a/.stylelintrc b/.stylelintrc index 3247107f..2d470d8d 100644 --- a/.stylelintrc +++ b/.stylelintrc @@ -3,7 +3,6 @@ "extends": [ "stylelint-config-recommended", "stylelint-config-styled-components", - "stylelint-config-prettier", "stylelint-config-concentric-order" ], "overrides": [ diff --git a/package-lock.json b/package-lock.json index b8ba7a6a..2fa6fbc7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,26 +8,35 @@ "name": "asap", "version": "0.0.0", "dependencies": { + "@tanstack/react-query": "^5.45.1", + "@tanstack/react-query-devtools": "^5.45.1", + "@types/axios": "^0.14.0", + "@types/react-copy-to-clipboard": "^5.0.4", "axios": "^1.4.0", "copy-text-to-clipboard": "^3.2.0", "html2canvas": "^1.4.1", "postcss-syntax": "^0.36.2", "prettier": "1.13", "react": "^18.2.0", + "react-copy-to-clipboard": "^5.1.0", "react-dom": "^18.2.0", "react-error-boundary": "^4.0.10", + "react-lottie": "^1.2.4", + "react-multi-date-picker": "^4.1.2", "react-router-dom": "6", + "react-toastify": "^9.1.3", "recoil": "^0.7.7", + "recoil-persist": "^5.1.0", "styled-reset": "^4.5.1", "swiper": "^10.0.4", "vite-plugin-svgr": "^3.2.0" }, "devDependencies": { "@stylelint/postcss-css-in-js": "^0.38.0", - "@types/axios": "^0.14.0", "@types/node": "^20.3.2", "@types/react": "^18.0.37", "@types/react-dom": "^18.0.11", + "@types/react-lottie": "^1.2.10", "@types/styled-components": "^5.1.26", "@typescript-eslint/eslint-plugin": "^5.60.1", "@typescript-eslint/parser": "^5.60.1", @@ -79,6 +88,7 @@ "version": "7.22.5", "resolved": "https://registry.npmjs.org/@babel/cli/-/cli-7.22.5.tgz", "integrity": "sha512-N5d7MjzwsQ2wppwjhrsicVDhJSqF9labEP/swYiHhio4Ca2XjEehpgPmerjnLQl7BPE59BLud0PTWGYwqFl/cQ==", + "dev": true, "license": "MIT", "dependencies": { "@jridgewell/trace-mapping": "^0.3.17", @@ -120,6 +130,7 @@ "version": "7.22.5", "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.22.5.tgz", "integrity": "sha512-4Jc/YuIaYqKnDDz892kPIledykKg12Aw1PYX5i/TY28anJtacvM1Rrr8wbieB9GfEJwlzqT0hUEao0CxEebiDA==", + "dev": true, "license": "MIT", "engines": { "node": ">=6.9.0" @@ -129,6 +140,7 @@ "version": "7.22.5", "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.22.5.tgz", "integrity": "sha512-SBuTAjg91A3eKOvD+bPEz3LlhHZRNu1nFOVts9lzDJTXshHTjII0BAtDS3Y2DAkdZdDKWVZGVwkDfc4Clxn1dg==", + "dev": true, "license": "MIT", "dependencies": { "@ampproject/remapping": "^2.2.0", @@ -174,6 +186,7 @@ "version": "7.22.5", "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.22.5.tgz", "integrity": "sha512-LvBTxu8bQSQkcyKOU+a1btnNFQ1dMAd0R6PyW3arXes06F6QLWLIrd681bxRPIXlrMGR3XYnW9JyML7dP3qgxg==", + "dev": true, "license": "MIT", "dependencies": { "@babel/types": "^7.22.5" @@ -186,6 +199,7 @@ "version": "7.22.5", "resolved": "https://registry.npmjs.org/@babel/helper-builder-binary-assignment-operator-visitor/-/helper-builder-binary-assignment-operator-visitor-7.22.5.tgz", "integrity": "sha512-m1EP3lVOPptR+2DwD125gziZNcmoNSHGmJROKoy87loWUQyJaVXDgpmruWqDARZSmtYQ+Dl25okU8+qhVzuykw==", + "dev": true, "license": "MIT", "dependencies": { "@babel/types": "^7.22.5" @@ -198,6 +212,7 @@ "version": "7.22.5", "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.22.5.tgz", "integrity": "sha512-Ji+ywpHeuqxB8WDxraCiqR0xfhYjiDE/e6k7FuIaANnoOFxAHskHChz4vA1mJC9Lbm01s1PVAGhQY4FUKSkGZw==", + "dev": true, "license": "MIT", "dependencies": { "@babel/compat-data": "^7.22.5", @@ -217,6 +232,7 @@ "version": "7.22.5", "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.22.5.tgz", "integrity": "sha512-xkb58MyOYIslxu3gKmVXmjTtUPvBU4odYzbiIQbWwLKIHCsx6UGZGX6F1IznMFVnDdirseUZopzN+ZRt8Xb33Q==", + "dev": true, "license": "MIT", "dependencies": { "@babel/helper-annotate-as-pure": "^7.22.5", @@ -240,6 +256,7 @@ "version": "7.22.5", "resolved": "https://registry.npmjs.org/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.22.5.tgz", "integrity": "sha512-1VpEFOIbMRaXyDeUwUfmTIxExLwQ+zkW+Bh5zXpApA3oQedBx9v/updixWxnx/bZpKw7u8VxWjb/qWpIcmPq8A==", + "dev": true, "license": "MIT", "dependencies": { "@babel/helper-annotate-as-pure": "^7.22.5", @@ -257,6 +274,7 @@ "version": "0.4.0", "resolved": "https://registry.npmjs.org/@babel/helper-define-polyfill-provider/-/helper-define-polyfill-provider-0.4.0.tgz", "integrity": "sha512-RnanLx5ETe6aybRi1cO/edaRH+bNYWaryCEmjDDYyNr4wnSzyOp8T0dWipmqVHKEY3AbVKUom50AKSlj1zmKbg==", + "dev": true, "license": "MIT", "dependencies": { "@babel/helper-compilation-targets": "^7.17.7", @@ -308,6 +326,7 @@ "version": "7.22.5", "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.22.5.tgz", "integrity": "sha512-aBiH1NKMG0H2cGZqspNvsaBe6wNGjbJjuLy29aU+eDZjSbbN53BaxlpB02xm9v34pLTZ1nIQPFYn2qMZoa5BQQ==", + "dev": true, "license": "MIT", "dependencies": { "@babel/types": "^7.22.5" @@ -351,6 +370,7 @@ "version": "7.22.5", "resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.22.5.tgz", "integrity": "sha512-HBwaojN0xFRx4yIvpwGqxiV2tUfl7401jlok564NgB9EHS1y6QT17FmKWm4ztqjeVdXLuC4fSvHc5ePpQjoTbw==", + "dev": true, "license": "MIT", "dependencies": { "@babel/types": "^7.22.5" @@ -363,6 +383,7 @@ "version": "7.22.5", "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz", "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg==", + "dev": true, "license": "MIT", "engines": { "node": ">=6.9.0" @@ -372,6 +393,7 @@ "version": "7.22.5", "resolved": "https://registry.npmjs.org/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.22.5.tgz", "integrity": "sha512-cU0Sq1Rf4Z55fgz7haOakIyM7+x/uCFwXpLPaeRzfoUtAEAuUZjZvFPjL/rk5rW693dIgn2hng1W7xbT7lWT4g==", + "dev": true, "license": "MIT", "dependencies": { "@babel/helper-annotate-as-pure": "^7.22.5", @@ -390,6 +412,7 @@ "version": "7.22.5", "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.22.5.tgz", "integrity": "sha512-aLdNM5I3kdI/V9xGNyKSF3X/gTyMUBohTZ+/3QdQKAA9vxIiy12E+8E2HoOP1/DjeqU+g6as35QHJNMDDYpuCg==", + "dev": true, "license": "MIT", "dependencies": { "@babel/helper-environment-visitor": "^7.22.5", @@ -419,6 +442,7 @@ "version": "7.22.5", "resolved": "https://registry.npmjs.org/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.22.5.tgz", "integrity": "sha512-tK14r66JZKiC43p8Ki33yLBVJKlQDFoA8GYN67lWCDCqoL6EMMSuM9b+Iff2jHaM/RRFYl7K+iiru7hbRqNx8Q==", + "dev": true, "license": "MIT", "dependencies": { "@babel/types": "^7.22.5" @@ -470,6 +494,7 @@ "version": "7.22.5", "resolved": "https://registry.npmjs.org/@babel/helper-wrap-function/-/helper-wrap-function-7.22.5.tgz", "integrity": "sha512-bYqLIBSEshYcYQyfks8ewYA8S30yaGSeRslcvKMvoUk6HHPySbxHq9YRi6ghhzEU+yhQv9bP/jXnygkStOcqZw==", + "dev": true, "license": "MIT", "dependencies": { "@babel/helper-function-name": "^7.22.5", @@ -485,6 +510,7 @@ "version": "7.22.5", "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.22.5.tgz", "integrity": "sha512-pSXRmfE1vzcUIDFQcSGA5Mr+GxBV9oiRKDuDxXvWQQBCh8HoIjs/2DlDB7H8smac1IVrB9/xdXj2N3Wol9Cr+Q==", + "dev": true, "license": "MIT", "dependencies": { "@babel/template": "^7.22.5", @@ -596,6 +622,7 @@ "version": "7.22.5", "resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression/-/plugin-bugfix-safari-id-destructuring-collision-in-function-expression-7.22.5.tgz", "integrity": "sha512-NP1M5Rf+u2Gw9qfSO4ihjcTGW5zXTi36ITLd4/EoAcEhIZ0yjMqmftDNl3QC19CX7olhrjpyU454g/2W7X0jvQ==", + "dev": true, "license": "MIT", "dependencies": { "@babel/helper-plugin-utils": "^7.22.5" @@ -611,6 +638,7 @@ "version": "7.22.5", "resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining/-/plugin-bugfix-v8-spread-parameters-in-optional-chaining-7.22.5.tgz", "integrity": "sha512-31Bb65aZaUwqCbWMnZPduIZxCBngHFlzyN6Dq6KAJjtx+lx6ohKHubc61OomYi7XwVD4Ol0XCVz4h+pYFR048g==", + "dev": true, "license": "MIT", "dependencies": { "@babel/helper-plugin-utils": "^7.22.5", @@ -628,6 +656,7 @@ "version": "7.22.5", "resolved": "https://registry.npmjs.org/@babel/plugin-external-helpers/-/plugin-external-helpers-7.22.5.tgz", "integrity": "sha512-ngnNEWxmykPk82mH4ajZT0qTztr3Je6hrMuKAslZVM8G1YZTENJSYwrIGtt6KOtznug3exmAtF4so/nPqJuA4A==", + "dev": true, "license": "MIT", "dependencies": { "@babel/helper-plugin-utils": "^7.22.5" @@ -643,6 +672,7 @@ "version": "7.18.6", "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.18.6.tgz", "integrity": "sha512-cumfXOF0+nzZrrN8Rf0t7M+tF6sZc7vhQwYQck9q1/5w2OExlD+b4v4RpMJFaV1Z7WcDRgO6FqvxqxGlwo+RHQ==", + "dev": true, "license": "MIT", "dependencies": { "@babel/helper-create-class-features-plugin": "^7.18.6", @@ -659,6 +689,7 @@ "version": "7.20.7", "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.20.7.tgz", "integrity": "sha512-d2S98yCiLxDVmBmE8UjGcfPvNEUbA1U5q5WxaWFUGRzJSVAZqm5W6MbPct0jxnegUZ0niLeNX+IOzEs7wYg9Dg==", + "dev": true, "license": "MIT", "dependencies": { "@babel/compat-data": "^7.20.5", @@ -678,6 +709,7 @@ "version": "7.21.0-placeholder-for-preset-env.2", "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.0-placeholder-for-preset-env.2.tgz", "integrity": "sha512-SOSkfJDddaM7mak6cPEpswyTRnuRltl429hMraQEglW+OkovnCzsiszTmsrlY//qLFjCpQDFRvjdm2wA5pPm9w==", + "dev": true, "license": "MIT", "engines": { "node": ">=6.9.0" @@ -690,6 +722,7 @@ "version": "7.18.6", "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-unicode-property-regex/-/plugin-proposal-unicode-property-regex-7.18.6.tgz", "integrity": "sha512-2BShG/d5yoZyXZfVePH91urL5wTG6ASZU9M4o03lKK8u8UW1y08OMttBSOADTcJrnPMpvDXRG3G8fyLh4ovs8w==", + "dev": true, "license": "MIT", "dependencies": { "@babel/helper-create-regexp-features-plugin": "^7.18.6", @@ -706,6 +739,7 @@ "version": "7.8.4", "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-async-generators/-/plugin-syntax-async-generators-7.8.4.tgz", "integrity": "sha512-tycmZxkGfZaxhMRbXlPXuVFpdWlXpir2W4AMhSJgRKzk/eDlIXOhb2LHWoLpDF7TEHylV5zNhykX6KAgHJmTNw==", + "dev": true, "license": "MIT", "dependencies": { "@babel/helper-plugin-utils": "^7.8.0" @@ -718,6 +752,7 @@ "version": "7.12.13", "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-class-properties/-/plugin-syntax-class-properties-7.12.13.tgz", "integrity": "sha512-fm4idjKla0YahUNgFNLCB0qySdsoPiZP3iQE3rky0mBUtMZ23yDJ9SJdg6dXTSDnulOVqiF3Hgr9nbXvXTQZYA==", + "dev": true, "license": "MIT", "dependencies": { "@babel/helper-plugin-utils": "^7.12.13" @@ -730,6 +765,7 @@ "version": "7.14.5", "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-class-static-block/-/plugin-syntax-class-static-block-7.14.5.tgz", "integrity": "sha512-b+YyPmr6ldyNnM6sqYeMWE+bgJcJpO6yS4QD7ymxgH34GBPNDM/THBh8iunyvKIZztiwLH4CJZ0RxTk9emgpjw==", + "dev": true, "license": "MIT", "dependencies": { "@babel/helper-plugin-utils": "^7.14.5" @@ -745,6 +781,7 @@ "version": "7.8.3", "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-dynamic-import/-/plugin-syntax-dynamic-import-7.8.3.tgz", "integrity": "sha512-5gdGbFon+PszYzqs83S3E5mpi7/y/8M9eC90MRTZfduQOYW76ig6SOSPNe41IG5LoP3FGBn2N0RjVDSQiS94kQ==", + "dev": true, "license": "MIT", "dependencies": { "@babel/helper-plugin-utils": "^7.8.0" @@ -757,6 +794,7 @@ "version": "7.8.3", "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-export-namespace-from/-/plugin-syntax-export-namespace-from-7.8.3.tgz", "integrity": "sha512-MXf5laXo6c1IbEbegDmzGPwGNTsHZmEy6QGznu5Sh2UCWvueywb2ee+CCE4zQiZstxU9BMoQO9i6zUFSY0Kj0Q==", + "dev": true, "license": "MIT", "dependencies": { "@babel/helper-plugin-utils": "^7.8.3" @@ -769,6 +807,7 @@ "version": "7.22.5", "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-import-assertions/-/plugin-syntax-import-assertions-7.22.5.tgz", "integrity": "sha512-rdV97N7KqsRzeNGoWUOK6yUsWarLjE5Su/Snk9IYPU9CwkWHs4t+rTGOvffTR8XGkJMTAdLfO0xVnXm8wugIJg==", + "dev": true, "license": "MIT", "dependencies": { "@babel/helper-plugin-utils": "^7.22.5" @@ -784,6 +823,7 @@ "version": "7.22.5", "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-import-attributes/-/plugin-syntax-import-attributes-7.22.5.tgz", "integrity": "sha512-KwvoWDeNKPETmozyFE0P2rOLqh39EoQHNjqizrI5B8Vt0ZNS7M56s7dAiAqbYfiAYOuIzIh96z3iR2ktgu3tEg==", + "dev": true, "license": "MIT", "dependencies": { "@babel/helper-plugin-utils": "^7.22.5" @@ -799,6 +839,7 @@ "version": "7.10.4", "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-import-meta/-/plugin-syntax-import-meta-7.10.4.tgz", "integrity": "sha512-Yqfm+XDx0+Prh3VSeEQCPU81yC+JWZ2pDPFSS4ZdpfZhp4MkFMaDC1UqseovEKwSUpnIL7+vK+Clp7bfh0iD7g==", + "dev": true, "license": "MIT", "dependencies": { "@babel/helper-plugin-utils": "^7.10.4" @@ -811,6 +852,7 @@ "version": "7.8.3", "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-json-strings/-/plugin-syntax-json-strings-7.8.3.tgz", "integrity": "sha512-lY6kdGpWHvjoe2vk4WrAapEuBR69EMxZl+RoGRhrFGNYVK8mOPAW8VfbT/ZgrFbXlDNiiaxQnAtgVCZ6jv30EA==", + "dev": true, "license": "MIT", "dependencies": { "@babel/helper-plugin-utils": "^7.8.0" @@ -823,6 +865,7 @@ "version": "7.22.5", "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.22.5.tgz", "integrity": "sha512-gvyP4hZrgrs/wWMaocvxZ44Hw0b3W8Pe+cMxc8V1ULQ07oh8VNbIRaoD1LRZVTvD+0nieDKjfgKg89sD7rrKrg==", + "dev": true, "license": "MIT", "dependencies": { "@babel/helper-plugin-utils": "^7.22.5" @@ -838,6 +881,7 @@ "version": "7.10.4", "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-logical-assignment-operators/-/plugin-syntax-logical-assignment-operators-7.10.4.tgz", "integrity": "sha512-d8waShlpFDinQ5MtvGU9xDAOzKH47+FFoney2baFIoMr952hKOLp1HR7VszoZvOsV/4+RRszNY7D17ba0te0ig==", + "dev": true, "license": "MIT", "dependencies": { "@babel/helper-plugin-utils": "^7.10.4" @@ -850,6 +894,7 @@ "version": "7.8.3", "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-nullish-coalescing-operator/-/plugin-syntax-nullish-coalescing-operator-7.8.3.tgz", "integrity": "sha512-aSff4zPII1u2QD7y+F8oDsz19ew4IGEJg9SVW+bqwpwtfFleiQDMdzA/R+UlWDzfnHFCxxleFT0PMIrR36XLNQ==", + "dev": true, "license": "MIT", "dependencies": { "@babel/helper-plugin-utils": "^7.8.0" @@ -862,6 +907,7 @@ "version": "7.10.4", "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-numeric-separator/-/plugin-syntax-numeric-separator-7.10.4.tgz", "integrity": "sha512-9H6YdfkcK/uOnY/K7/aA2xpzaAgkQn37yzWUMRK7OaPOqOpGS1+n0H5hxT9AUw9EsSjPW8SVyMJwYRtWs3X3ug==", + "dev": true, "license": "MIT", "dependencies": { "@babel/helper-plugin-utils": "^7.10.4" @@ -874,6 +920,7 @@ "version": "7.8.3", "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-object-rest-spread/-/plugin-syntax-object-rest-spread-7.8.3.tgz", "integrity": "sha512-XoqMijGZb9y3y2XskN+P1wUGiVwWZ5JmoDRwx5+3GmEplNyVM2s2Dg8ILFQm8rWM48orGy5YpI5Bl8U1y7ydlA==", + "dev": true, "license": "MIT", "dependencies": { "@babel/helper-plugin-utils": "^7.8.0" @@ -886,6 +933,7 @@ "version": "7.8.3", "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-optional-catch-binding/-/plugin-syntax-optional-catch-binding-7.8.3.tgz", "integrity": "sha512-6VPD0Pc1lpTqw0aKoeRTMiB+kWhAoT24PA+ksWSBrFtl5SIRVpZlwN3NNPQjehA2E/91FV3RjLWoVTglWcSV3Q==", + "dev": true, "license": "MIT", "dependencies": { "@babel/helper-plugin-utils": "^7.8.0" @@ -898,6 +946,7 @@ "version": "7.8.3", "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-optional-chaining/-/plugin-syntax-optional-chaining-7.8.3.tgz", "integrity": "sha512-KoK9ErH1MBlCPxV0VANkXW2/dw4vlbGDrFgz8bmUsBGYkFRcbRwMh6cIJubdPrkxRwuGdtCk0v/wPTKbQgBjkg==", + "dev": true, "license": "MIT", "dependencies": { "@babel/helper-plugin-utils": "^7.8.0" @@ -910,6 +959,7 @@ "version": "7.14.5", "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-private-property-in-object/-/plugin-syntax-private-property-in-object-7.14.5.tgz", "integrity": "sha512-0wVnp9dxJ72ZUJDV27ZfbSj6iHLoytYZmh3rFcxNnvsJF3ktkzLDZPy/mA17HGsaQT3/DQsWYX1f1QGWkCoVUg==", + "dev": true, "license": "MIT", "dependencies": { "@babel/helper-plugin-utils": "^7.14.5" @@ -925,6 +975,7 @@ "version": "7.14.5", "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-top-level-await/-/plugin-syntax-top-level-await-7.14.5.tgz", "integrity": "sha512-hx++upLv5U1rgYfwe1xBQUhRmU41NEvpUvrp8jkrSCdvGSnM5/qdRMtylJ6PG5OFkBaHkbTAKTnd3/YyESRHFw==", + "dev": true, "license": "MIT", "dependencies": { "@babel/helper-plugin-utils": "^7.14.5" @@ -940,6 +991,7 @@ "version": "7.22.5", "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.22.5.tgz", "integrity": "sha512-1mS2o03i7t1c6VzH6fdQ3OA8tcEIxwG18zIPRp+UY1Ihv6W+XZzBCVxExF9upussPXJ0xE9XRHwMoNs1ep/nRQ==", + "dev": true, "license": "MIT", "dependencies": { "@babel/helper-plugin-utils": "^7.22.5" @@ -955,6 +1007,7 @@ "version": "7.18.6", "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-unicode-sets-regex/-/plugin-syntax-unicode-sets-regex-7.18.6.tgz", "integrity": "sha512-727YkEAPwSIQTv5im8QHz3upqp92JTWhidIC81Tdx4VJYIte/VndKf1qKrfnnhPLiPghStWfvC/iFaMCQu7Nqg==", + "dev": true, "license": "MIT", "dependencies": { "@babel/helper-create-regexp-features-plugin": "^7.18.6", @@ -971,6 +1024,7 @@ "version": "7.22.5", "resolved": "https://registry.npmjs.org/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.22.5.tgz", "integrity": "sha512-26lTNXoVRdAnsaDXPpvCNUq+OVWEVC6bx7Vvz9rC53F2bagUWW4u4ii2+h8Fejfh7RYqPxn+libeFBBck9muEw==", + "dev": true, "license": "MIT", "dependencies": { "@babel/helper-plugin-utils": "^7.22.5" @@ -986,6 +1040,7 @@ "version": "7.22.5", "resolved": "https://registry.npmjs.org/@babel/plugin-transform-async-generator-functions/-/plugin-transform-async-generator-functions-7.22.5.tgz", "integrity": "sha512-gGOEvFzm3fWoyD5uZq7vVTD57pPJ3PczPUD/xCFGjzBpUosnklmXyKnGQbbbGs1NPNPskFex0j93yKbHt0cHyg==", + "dev": true, "license": "MIT", "dependencies": { "@babel/helper-environment-visitor": "^7.22.5", @@ -1004,6 +1059,7 @@ "version": "7.22.5", "resolved": "https://registry.npmjs.org/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.22.5.tgz", "integrity": "sha512-b1A8D8ZzE/VhNDoV1MSJTnpKkCG5bJo+19R4o4oy03zM7ws8yEMK755j61Dc3EyvdysbqH5BOOTquJ7ZX9C6vQ==", + "dev": true, "license": "MIT", "dependencies": { "@babel/helper-module-imports": "^7.22.5", @@ -1021,6 +1077,7 @@ "version": "7.22.5", "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoped-functions/-/plugin-transform-block-scoped-functions-7.22.5.tgz", "integrity": "sha512-tdXZ2UdknEKQWKJP1KMNmuF5Lx3MymtMN/pvA+p/VEkhK8jVcQ1fzSy8KM9qRYhAf2/lV33hoMPKI/xaI9sADA==", + "dev": true, "license": "MIT", "dependencies": { "@babel/helper-plugin-utils": "^7.22.5" @@ -1036,6 +1093,7 @@ "version": "7.22.5", "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.22.5.tgz", "integrity": "sha512-EcACl1i5fSQ6bt+YGuU/XGCeZKStLmyVGytWkpyhCLeQVA0eu6Wtiw92V+I1T/hnezUv7j74dA/Ro69gWcU+hg==", + "dev": true, "license": "MIT", "dependencies": { "@babel/helper-plugin-utils": "^7.22.5" @@ -1051,6 +1109,7 @@ "version": "7.22.5", "resolved": "https://registry.npmjs.org/@babel/plugin-transform-class-properties/-/plugin-transform-class-properties-7.22.5.tgz", "integrity": "sha512-nDkQ0NfkOhPTq8YCLiWNxp1+f9fCobEjCb0n8WdbNUBc4IB5V7P1QnX9IjpSoquKrXF5SKojHleVNs2vGeHCHQ==", + "dev": true, "license": "MIT", "dependencies": { "@babel/helper-create-class-features-plugin": "^7.22.5", @@ -1067,6 +1126,7 @@ "version": "7.22.5", "resolved": "https://registry.npmjs.org/@babel/plugin-transform-class-static-block/-/plugin-transform-class-static-block-7.22.5.tgz", "integrity": "sha512-SPToJ5eYZLxlnp1UzdARpOGeC2GbHvr9d/UV0EukuVx8atktg194oe+C5BqQ8jRTkgLRVOPYeXRSBg1IlMoVRA==", + "dev": true, "license": "MIT", "dependencies": { "@babel/helper-create-class-features-plugin": "^7.22.5", @@ -1084,6 +1144,7 @@ "version": "7.22.5", "resolved": "https://registry.npmjs.org/@babel/plugin-transform-classes/-/plugin-transform-classes-7.22.5.tgz", "integrity": "sha512-2edQhLfibpWpsVBx2n/GKOz6JdGQvLruZQfGr9l1qes2KQaWswjBzhQF7UDUZMNaMMQeYnQzxwOMPsbYF7wqPQ==", + "dev": true, "license": "MIT", "dependencies": { "@babel/helper-annotate-as-pure": "^7.22.5", @@ -1107,6 +1168,7 @@ "version": "7.22.5", "resolved": "https://registry.npmjs.org/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.22.5.tgz", "integrity": "sha512-4GHWBgRf0krxPX+AaPtgBAlTgTeZmqDynokHOX7aqqAB4tHs3U2Y02zH6ETFdLZGcg9UQSD1WCmkVrE9ErHeOg==", + "dev": true, "license": "MIT", "dependencies": { "@babel/helper-plugin-utils": "^7.22.5", @@ -1123,6 +1185,7 @@ "version": "7.22.5", "resolved": "https://registry.npmjs.org/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.22.5.tgz", "integrity": "sha512-GfqcFuGW8vnEqTUBM7UtPd5A4q797LTvvwKxXTgRsFjoqaJiEg9deBG6kWeQYkVEL569NpnmpC0Pkr/8BLKGnQ==", + "dev": true, "license": "MIT", "dependencies": { "@babel/helper-plugin-utils": "^7.22.5" @@ -1138,6 +1201,7 @@ "version": "7.22.5", "resolved": "https://registry.npmjs.org/@babel/plugin-transform-dotall-regex/-/plugin-transform-dotall-regex-7.22.5.tgz", "integrity": "sha512-5/Yk9QxCQCl+sOIB1WelKnVRxTJDSAIxtJLL2/pqL14ZVlbH0fUQUZa/T5/UnQtBNgghR7mfB8ERBKyKPCi7Vw==", + "dev": true, "license": "MIT", "dependencies": { "@babel/helper-create-regexp-features-plugin": "^7.22.5", @@ -1154,6 +1218,7 @@ "version": "7.22.5", "resolved": "https://registry.npmjs.org/@babel/plugin-transform-duplicate-keys/-/plugin-transform-duplicate-keys-7.22.5.tgz", "integrity": "sha512-dEnYD+9BBgld5VBXHnF/DbYGp3fqGMsyxKbtD1mDyIA7AkTSpKXFhCVuj/oQVOoALfBs77DudA0BE4d5mcpmqw==", + "dev": true, "license": "MIT", "dependencies": { "@babel/helper-plugin-utils": "^7.22.5" @@ -1169,6 +1234,7 @@ "version": "7.22.5", "resolved": "https://registry.npmjs.org/@babel/plugin-transform-dynamic-import/-/plugin-transform-dynamic-import-7.22.5.tgz", "integrity": "sha512-0MC3ppTB1AMxd8fXjSrbPa7LT9hrImt+/fcj+Pg5YMD7UQyWp/02+JWpdnCymmsXwIx5Z+sYn1bwCn4ZJNvhqQ==", + "dev": true, "license": "MIT", "dependencies": { "@babel/helper-plugin-utils": "^7.22.5", @@ -1185,6 +1251,7 @@ "version": "7.22.5", "resolved": "https://registry.npmjs.org/@babel/plugin-transform-exponentiation-operator/-/plugin-transform-exponentiation-operator-7.22.5.tgz", "integrity": "sha512-vIpJFNM/FjZ4rh1myqIya9jXwrwwgFRHPjT3DkUA9ZLHuzox8jiXkOLvwm1H+PQIP3CqfC++WPKeuDi0Sjdj1g==", + "dev": true, "license": "MIT", "dependencies": { "@babel/helper-builder-binary-assignment-operator-visitor": "^7.22.5", @@ -1201,6 +1268,7 @@ "version": "7.22.5", "resolved": "https://registry.npmjs.org/@babel/plugin-transform-export-namespace-from/-/plugin-transform-export-namespace-from-7.22.5.tgz", "integrity": "sha512-X4hhm7FRnPgd4nDA4b/5V280xCx6oL7Oob5+9qVS5C13Zq4bh1qq7LU0GgRU6b5dBWBvhGaXYVB4AcN6+ol6vg==", + "dev": true, "license": "MIT", "dependencies": { "@babel/helper-plugin-utils": "^7.22.5", @@ -1217,6 +1285,7 @@ "version": "7.22.5", "resolved": "https://registry.npmjs.org/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.22.5.tgz", "integrity": "sha512-3kxQjX1dU9uudwSshyLeEipvrLjBCVthCgeTp6CzE/9JYrlAIaeekVxRpCWsDDfYTfRZRoCeZatCQvwo+wvK8A==", + "dev": true, "license": "MIT", "dependencies": { "@babel/helper-plugin-utils": "^7.22.5" @@ -1232,6 +1301,7 @@ "version": "7.22.5", "resolved": "https://registry.npmjs.org/@babel/plugin-transform-function-name/-/plugin-transform-function-name-7.22.5.tgz", "integrity": "sha512-UIzQNMS0p0HHiQm3oelztj+ECwFnj+ZRV4KnguvlsD2of1whUeM6o7wGNj6oLwcDoAXQ8gEqfgC24D+VdIcevg==", + "dev": true, "license": "MIT", "dependencies": { "@babel/helper-compilation-targets": "^7.22.5", @@ -1249,6 +1319,7 @@ "version": "7.22.5", "resolved": "https://registry.npmjs.org/@babel/plugin-transform-json-strings/-/plugin-transform-json-strings-7.22.5.tgz", "integrity": "sha512-DuCRB7fu8MyTLbEQd1ew3R85nx/88yMoqo2uPSjevMj3yoN7CDM8jkgrY0wmVxfJZyJ/B9fE1iq7EQppWQmR5A==", + "dev": true, "license": "MIT", "dependencies": { "@babel/helper-plugin-utils": "^7.22.5", @@ -1265,6 +1336,7 @@ "version": "7.22.5", "resolved": "https://registry.npmjs.org/@babel/plugin-transform-literals/-/plugin-transform-literals-7.22.5.tgz", "integrity": "sha512-fTLj4D79M+mepcw3dgFBTIDYpbcB9Sm0bpm4ppXPaO+U+PKFFyV9MGRvS0gvGw62sd10kT5lRMKXAADb9pWy8g==", + "dev": true, "license": "MIT", "dependencies": { "@babel/helper-plugin-utils": "^7.22.5" @@ -1280,6 +1352,7 @@ "version": "7.22.5", "resolved": "https://registry.npmjs.org/@babel/plugin-transform-logical-assignment-operators/-/plugin-transform-logical-assignment-operators-7.22.5.tgz", "integrity": "sha512-MQQOUW1KL8X0cDWfbwYP+TbVbZm16QmQXJQ+vndPtH/BoO0lOKpVoEDMI7+PskYxH+IiE0tS8xZye0qr1lGzSA==", + "dev": true, "license": "MIT", "dependencies": { "@babel/helper-plugin-utils": "^7.22.5", @@ -1296,6 +1369,7 @@ "version": "7.22.5", "resolved": "https://registry.npmjs.org/@babel/plugin-transform-member-expression-literals/-/plugin-transform-member-expression-literals-7.22.5.tgz", "integrity": "sha512-RZEdkNtzzYCFl9SE9ATaUMTj2hqMb4StarOJLrZRbqqU4HSBE7UlBw9WBWQiDzrJZJdUWiMTVDI6Gv/8DPvfew==", + "dev": true, "license": "MIT", "dependencies": { "@babel/helper-plugin-utils": "^7.22.5" @@ -1311,6 +1385,7 @@ "version": "7.22.5", "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.22.5.tgz", "integrity": "sha512-R+PTfLTcYEmb1+kK7FNkhQ1gP4KgjpSO6HfH9+f8/yfp2Nt3ggBjiVpRwmwTlfqZLafYKJACy36yDXlEmI9HjQ==", + "dev": true, "license": "MIT", "dependencies": { "@babel/helper-module-transforms": "^7.22.5", @@ -1327,6 +1402,7 @@ "version": "7.22.5", "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.22.5.tgz", "integrity": "sha512-B4pzOXj+ONRmuaQTg05b3y/4DuFz3WcCNAXPLb2Q0GT0TrGKGxNKV4jwsXts+StaM0LQczZbOpj8o1DLPDJIiA==", + "dev": true, "license": "MIT", "dependencies": { "@babel/helper-module-transforms": "^7.22.5", @@ -1344,6 +1420,7 @@ "version": "7.22.5", "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.22.5.tgz", "integrity": "sha512-emtEpoaTMsOs6Tzz+nbmcePl6AKVtS1yC4YNAeMun9U8YCsgadPNxnOPQ8GhHFB2qdx+LZu9LgoC0Lthuu05DQ==", + "dev": true, "license": "MIT", "dependencies": { "@babel/helper-hoist-variables": "^7.22.5", @@ -1362,6 +1439,7 @@ "version": "7.22.5", "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-umd/-/plugin-transform-modules-umd-7.22.5.tgz", "integrity": "sha512-+S6kzefN/E1vkSsKx8kmQuqeQsvCKCd1fraCM7zXm4SFoggI099Tr4G8U81+5gtMdUeMQ4ipdQffbKLX0/7dBQ==", + "dev": true, "license": "MIT", "dependencies": { "@babel/helper-module-transforms": "^7.22.5", @@ -1378,6 +1456,7 @@ "version": "7.22.5", "resolved": "https://registry.npmjs.org/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.22.5.tgz", "integrity": "sha512-YgLLKmS3aUBhHaxp5hi1WJTgOUb/NCuDHzGT9z9WTt3YG+CPRhJs6nprbStx6DnWM4dh6gt7SU3sZodbZ08adQ==", + "dev": true, "license": "MIT", "dependencies": { "@babel/helper-create-regexp-features-plugin": "^7.22.5", @@ -1394,6 +1473,7 @@ "version": "7.22.5", "resolved": "https://registry.npmjs.org/@babel/plugin-transform-new-target/-/plugin-transform-new-target-7.22.5.tgz", "integrity": "sha512-AsF7K0Fx/cNKVyk3a+DW0JLo+Ua598/NxMRvxDnkpCIGFh43+h/v2xyhRUYf6oD8gE4QtL83C7zZVghMjHd+iw==", + "dev": true, "license": "MIT", "dependencies": { "@babel/helper-plugin-utils": "^7.22.5" @@ -1409,6 +1489,7 @@ "version": "7.22.5", "resolved": "https://registry.npmjs.org/@babel/plugin-transform-nullish-coalescing-operator/-/plugin-transform-nullish-coalescing-operator-7.22.5.tgz", "integrity": "sha512-6CF8g6z1dNYZ/VXok5uYkkBBICHZPiGEl7oDnAx2Mt1hlHVHOSIKWJaXHjQJA5VB43KZnXZDIexMchY4y2PGdA==", + "dev": true, "license": "MIT", "dependencies": { "@babel/helper-plugin-utils": "^7.22.5", @@ -1425,6 +1506,7 @@ "version": "7.22.5", "resolved": "https://registry.npmjs.org/@babel/plugin-transform-numeric-separator/-/plugin-transform-numeric-separator-7.22.5.tgz", "integrity": "sha512-NbslED1/6M+sXiwwtcAB/nieypGw02Ejf4KtDeMkCEpP6gWFMX1wI9WKYua+4oBneCCEmulOkRpwywypVZzs/g==", + "dev": true, "license": "MIT", "dependencies": { "@babel/helper-plugin-utils": "^7.22.5", @@ -1441,6 +1523,7 @@ "version": "7.22.5", "resolved": "https://registry.npmjs.org/@babel/plugin-transform-object-rest-spread/-/plugin-transform-object-rest-spread-7.22.5.tgz", "integrity": "sha512-Kk3lyDmEslH9DnvCDA1s1kkd3YWQITiBOHngOtDL9Pt6BZjzqb6hiOlb8VfjiiQJ2unmegBqZu0rx5RxJb5vmQ==", + "dev": true, "license": "MIT", "dependencies": { "@babel/compat-data": "^7.22.5", @@ -1460,6 +1543,7 @@ "version": "7.22.5", "resolved": "https://registry.npmjs.org/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.22.5.tgz", "integrity": "sha512-klXqyaT9trSjIUrcsYIfETAzmOEZL3cBYqOYLJxBHfMFFggmXOv+NYSX/Jbs9mzMVESw/WycLFPRx8ba/b2Ipw==", + "dev": true, "license": "MIT", "dependencies": { "@babel/helper-plugin-utils": "^7.22.5", @@ -1476,6 +1560,7 @@ "version": "7.22.5", "resolved": "https://registry.npmjs.org/@babel/plugin-transform-optional-catch-binding/-/plugin-transform-optional-catch-binding-7.22.5.tgz", "integrity": "sha512-pH8orJahy+hzZje5b8e2QIlBWQvGpelS76C63Z+jhZKsmzfNaPQ+LaW6dcJ9bxTpo1mtXbgHwy765Ro3jftmUg==", + "dev": true, "license": "MIT", "dependencies": { "@babel/helper-plugin-utils": "^7.22.5", @@ -1492,6 +1577,7 @@ "version": "7.22.5", "resolved": "https://registry.npmjs.org/@babel/plugin-transform-optional-chaining/-/plugin-transform-optional-chaining-7.22.5.tgz", "integrity": "sha512-AconbMKOMkyG+xCng2JogMCDcqW8wedQAqpVIL4cOSescZ7+iW8utC6YDZLMCSUIReEA733gzRSaOSXMAt/4WQ==", + "dev": true, "license": "MIT", "dependencies": { "@babel/helper-plugin-utils": "^7.22.5", @@ -1509,6 +1595,7 @@ "version": "7.22.5", "resolved": "https://registry.npmjs.org/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.22.5.tgz", "integrity": "sha512-AVkFUBurORBREOmHRKo06FjHYgjrabpdqRSwq6+C7R5iTCZOsM4QbcB27St0a4U6fffyAOqh3s/qEfybAhfivg==", + "dev": true, "license": "MIT", "dependencies": { "@babel/helper-plugin-utils": "^7.22.5" @@ -1524,6 +1611,7 @@ "version": "7.22.5", "resolved": "https://registry.npmjs.org/@babel/plugin-transform-private-methods/-/plugin-transform-private-methods-7.22.5.tgz", "integrity": "sha512-PPjh4gyrQnGe97JTalgRGMuU4icsZFnWkzicB/fUtzlKUqvsWBKEpPPfr5a2JiyirZkHxnAqkQMO5Z5B2kK3fA==", + "dev": true, "license": "MIT", "dependencies": { "@babel/helper-create-class-features-plugin": "^7.22.5", @@ -1540,6 +1628,7 @@ "version": "7.22.5", "resolved": "https://registry.npmjs.org/@babel/plugin-transform-private-property-in-object/-/plugin-transform-private-property-in-object-7.22.5.tgz", "integrity": "sha512-/9xnaTTJcVoBtSSmrVyhtSvO3kbqS2ODoh2juEU72c3aYonNF0OMGiaz2gjukyKM2wBBYJP38S4JiE0Wfb5VMQ==", + "dev": true, "license": "MIT", "dependencies": { "@babel/helper-annotate-as-pure": "^7.22.5", @@ -1558,6 +1647,7 @@ "version": "7.22.5", "resolved": "https://registry.npmjs.org/@babel/plugin-transform-property-literals/-/plugin-transform-property-literals-7.22.5.tgz", "integrity": "sha512-TiOArgddK3mK/x1Qwf5hay2pxI6wCZnvQqrFSqbtg1GLl2JcNMitVH/YnqjP+M31pLUeTfzY1HAXFDnUBV30rQ==", + "dev": true, "license": "MIT", "dependencies": { "@babel/helper-plugin-utils": "^7.22.5" @@ -1573,6 +1663,7 @@ "version": "7.22.5", "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-display-name/-/plugin-transform-react-display-name-7.22.5.tgz", "integrity": "sha512-PVk3WPYudRF5z4GKMEYUrLjPl38fJSKNaEOkFuoprioowGuWN6w2RKznuFNSlJx7pzzXXStPUnNSOEO0jL5EVw==", + "dev": true, "license": "MIT", "dependencies": { "@babel/helper-plugin-utils": "^7.22.5" @@ -1588,6 +1679,7 @@ "version": "7.22.5", "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.22.5.tgz", "integrity": "sha512-rog5gZaVbUip5iWDMTYbVM15XQq+RkUKhET/IHR6oizR+JEoN6CAfTTuHcK4vwUyzca30qqHqEpzBOnaRMWYMA==", + "dev": true, "license": "MIT", "dependencies": { "@babel/helper-annotate-as-pure": "^7.22.5", @@ -1607,6 +1699,7 @@ "version": "7.22.5", "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-development/-/plugin-transform-react-jsx-development-7.22.5.tgz", "integrity": "sha512-bDhuzwWMuInwCYeDeMzyi7TaBgRQei6DqxhbyniL7/VG4RSS7HtSL2QbY4eESy1KJqlWt8g3xeEBGPuo+XqC8A==", + "dev": true, "license": "MIT", "dependencies": { "@babel/plugin-transform-react-jsx": "^7.22.5" @@ -1654,6 +1747,7 @@ "version": "7.22.5", "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-pure-annotations/-/plugin-transform-react-pure-annotations-7.22.5.tgz", "integrity": "sha512-gP4k85wx09q+brArVinTXhWiyzLl9UpmGva0+mWyKxk6JZequ05x3eUcIUE+FyttPKJFRRVtAvQaJ6YF9h1ZpA==", + "dev": true, "license": "MIT", "dependencies": { "@babel/helper-annotate-as-pure": "^7.22.5", @@ -1670,6 +1764,7 @@ "version": "7.22.5", "resolved": "https://registry.npmjs.org/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.22.5.tgz", "integrity": "sha512-rR7KePOE7gfEtNTh9Qw+iO3Q/e4DEsoQ+hdvM6QUDH7JRJ5qxq5AA52ZzBWbI5i9lfNuvySgOGP8ZN7LAmaiPw==", + "dev": true, "license": "MIT", "dependencies": { "@babel/helper-plugin-utils": "^7.22.5", @@ -1686,6 +1781,7 @@ "version": "7.22.5", "resolved": "https://registry.npmjs.org/@babel/plugin-transform-reserved-words/-/plugin-transform-reserved-words-7.22.5.tgz", "integrity": "sha512-DTtGKFRQUDm8svigJzZHzb/2xatPc6TzNvAIJ5GqOKDsGFYgAskjRulbR/vGsPKq3OPqtexnz327qYpP57RFyA==", + "dev": true, "license": "MIT", "dependencies": { "@babel/helper-plugin-utils": "^7.22.5" @@ -1701,6 +1797,7 @@ "version": "7.22.5", "resolved": "https://registry.npmjs.org/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.22.5.tgz", "integrity": "sha512-vM4fq9IXHscXVKzDv5itkO1X52SmdFBFcMIBZ2FRn2nqVYqw6dBexUgMvAjHW+KXpPPViD/Yo3GrDEBaRC0QYA==", + "dev": true, "license": "MIT", "dependencies": { "@babel/helper-plugin-utils": "^7.22.5" @@ -1716,6 +1813,7 @@ "version": "7.22.5", "resolved": "https://registry.npmjs.org/@babel/plugin-transform-spread/-/plugin-transform-spread-7.22.5.tgz", "integrity": "sha512-5ZzDQIGyvN4w8+dMmpohL6MBo+l2G7tfC/O2Dg7/hjpgeWvUx8FzfeOKxGog9IimPa4YekaQ9PlDqTLOljkcxg==", + "dev": true, "license": "MIT", "dependencies": { "@babel/helper-plugin-utils": "^7.22.5", @@ -1732,6 +1830,7 @@ "version": "7.22.5", "resolved": "https://registry.npmjs.org/@babel/plugin-transform-sticky-regex/-/plugin-transform-sticky-regex-7.22.5.tgz", "integrity": "sha512-zf7LuNpHG0iEeiyCNwX4j3gDg1jgt1k3ZdXBKbZSoA3BbGQGvMiSvfbZRR3Dr3aeJe3ooWFZxOOG3IRStYp2Bw==", + "dev": true, "license": "MIT", "dependencies": { "@babel/helper-plugin-utils": "^7.22.5" @@ -1747,6 +1846,7 @@ "version": "7.22.5", "resolved": "https://registry.npmjs.org/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.22.5.tgz", "integrity": "sha512-5ciOehRNf+EyUeewo8NkbQiUs4d6ZxiHo6BcBcnFlgiJfu16q0bQUw9Jvo0b0gBKFG1SMhDSjeKXSYuJLeFSMA==", + "dev": true, "license": "MIT", "dependencies": { "@babel/helper-plugin-utils": "^7.22.5" @@ -1762,6 +1862,7 @@ "version": "7.22.5", "resolved": "https://registry.npmjs.org/@babel/plugin-transform-typeof-symbol/-/plugin-transform-typeof-symbol-7.22.5.tgz", "integrity": "sha512-bYkI5lMzL4kPii4HHEEChkD0rkc+nvnlR6+o/qdqR6zrm0Sv/nodmyLhlq2DO0YKLUNd2VePmPRjJXSBh9OIdA==", + "dev": true, "license": "MIT", "dependencies": { "@babel/helper-plugin-utils": "^7.22.5" @@ -1777,6 +1878,7 @@ "version": "7.22.5", "resolved": "https://registry.npmjs.org/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.22.5.tgz", "integrity": "sha512-SMubA9S7Cb5sGSFFUlqxyClTA9zWJ8qGQrppNUm05LtFuN1ELRFNndkix4zUJrC9F+YivWwa1dHMSyo0e0N9dA==", + "dev": true, "license": "MIT", "dependencies": { "@babel/helper-annotate-as-pure": "^7.22.5", @@ -1795,6 +1897,7 @@ "version": "7.22.5", "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-escapes/-/plugin-transform-unicode-escapes-7.22.5.tgz", "integrity": "sha512-biEmVg1IYB/raUO5wT1tgfacCef15Fbzhkx493D3urBI++6hpJ+RFG4SrWMn0NEZLfvilqKf3QDrRVZHo08FYg==", + "dev": true, "license": "MIT", "dependencies": { "@babel/helper-plugin-utils": "^7.22.5" @@ -1810,6 +1913,7 @@ "version": "7.22.5", "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-property-regex/-/plugin-transform-unicode-property-regex-7.22.5.tgz", "integrity": "sha512-HCCIb+CbJIAE6sXn5CjFQXMwkCClcOfPCzTlilJ8cUatfzwHlWQkbtV0zD338u9dZskwvuOYTuuaMaA8J5EI5A==", + "dev": true, "license": "MIT", "dependencies": { "@babel/helper-create-regexp-features-plugin": "^7.22.5", @@ -1826,6 +1930,7 @@ "version": "7.22.5", "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.22.5.tgz", "integrity": "sha512-028laaOKptN5vHJf9/Arr/HiJekMd41hOEZYvNsrsXqJ7YPYuX2bQxh31fkZzGmq3YqHRJzYFFAVYvKfMPKqyg==", + "dev": true, "license": "MIT", "dependencies": { "@babel/helper-create-regexp-features-plugin": "^7.22.5", @@ -1842,6 +1947,7 @@ "version": "7.22.5", "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-sets-regex/-/plugin-transform-unicode-sets-regex-7.22.5.tgz", "integrity": "sha512-lhMfi4FC15j13eKrh3DnYHjpGj6UKQHtNKTbtc1igvAhRy4+kLhV07OpLcsN0VgDEw/MjAvJO4BdMJsHwMhzCg==", + "dev": true, "license": "MIT", "dependencies": { "@babel/helper-create-regexp-features-plugin": "^7.22.5", @@ -1858,6 +1964,7 @@ "version": "7.22.5", "resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.22.5.tgz", "integrity": "sha512-fj06hw89dpiZzGZtxn+QybifF07nNiZjZ7sazs2aVDcysAZVGjW7+7iFYxg6GLNM47R/thYfLdrXc+2f11Vi9A==", + "dev": true, "license": "MIT", "dependencies": { "@babel/compat-data": "^7.22.5", @@ -1952,6 +2059,7 @@ "version": "0.1.5", "resolved": "https://registry.npmjs.org/@babel/preset-modules/-/preset-modules-0.1.5.tgz", "integrity": "sha512-A57th6YRG7oR3cq/yt/Y84MvGgE0eJG2F1JLhKuyG+jFxEgrd/HAMJatiFtmOiZurz+0DkrvbheCLaV5f2JfjA==", + "dev": true, "license": "MIT", "dependencies": { "@babel/helper-plugin-utils": "^7.0.0", @@ -1968,6 +2076,7 @@ "version": "7.22.5", "resolved": "https://registry.npmjs.org/@babel/preset-react/-/preset-react-7.22.5.tgz", "integrity": "sha512-M+Is3WikOpEJHgR385HbuCITPTaPRaNkibTEa9oiofmJvIsrceb4yp9RL9Kb+TE8LznmeyZqpP+Lopwcx59xPQ==", + "dev": true, "license": "MIT", "dependencies": { "@babel/helper-plugin-utils": "^7.22.5", @@ -1988,6 +2097,7 @@ "version": "7.22.5", "resolved": "https://registry.npmjs.org/@babel/preset-typescript/-/preset-typescript-7.22.5.tgz", "integrity": "sha512-YbPaal9LxztSGhmndR46FmAbkJ/1fAsw293tSU+I5E5h+cnJ3d4GTwyUgGYmOXJYdGA+uNePle4qbaRzj2NISQ==", + "dev": true, "license": "MIT", "dependencies": { "@babel/helper-plugin-utils": "^7.22.5", @@ -2007,6 +2117,7 @@ "version": "0.8.0", "resolved": "https://registry.npmjs.org/@babel/regjsgen/-/regjsgen-0.8.0.tgz", "integrity": "sha512-x/rqGMdzj+fWZvCOYForTghzbtqPDZ5gPwaoNGHdgDfF2QA/XZbCBp4Moo5scrkAMPhB7z26XM/AaHuIJdgauA==", + "dev": true, "license": "MIT" }, "node_modules/@babel/runtime": { @@ -2152,6 +2263,7 @@ "version": "1.2.1", "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.1.tgz", "integrity": "sha512-61Mf7Ufx4aDxx1xlDeOm8aFFigGHE4z+0sKCa+IHCeZKiyP9RLD0Mmx7m8b9/Cf37f7NAvQOOJAbQQGVr5uERw==", + "dev": true, "license": "MIT", "dependencies": { "@emotion/memoize": "^0.8.1" @@ -2161,12 +2273,14 @@ "version": "0.8.1", "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.1.tgz", "integrity": "sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA==", + "dev": true, "license": "MIT" }, "node_modules/@emotion/unitless": { "version": "0.8.1", "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.1.tgz", "integrity": "sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ==", + "dev": true, "license": "MIT" }, "node_modules/@esbuild/darwin-arm64": { @@ -2176,6 +2290,7 @@ "cpu": [ "arm64" ], + "dev": true, "license": "MIT", "optional": true, "os": [ @@ -2368,6 +2483,7 @@ "version": "2.1.8-no-fsevents.3", "resolved": "https://registry.npmjs.org/@nicolo-ribaudo/chokidar-2/-/chokidar-2-2.1.8-no-fsevents.3.tgz", "integrity": "sha512-s88O1aVtXftvp5bCPB7WnmXc5IwOZZ7YPuwNPt+GtOOXpPvad1LfbmjYv+qII7zP6RU2QGnqve27dnLycEnyEQ==", + "dev": true, "license": "MIT", "optional": true }, @@ -3060,12 +3176,60 @@ "@babel/core": "^7.0.0-0" } }, + "node_modules/@tanstack/query-core": { + "version": "5.51.21", + "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.51.21.tgz", + "integrity": "sha512-POQxm42IUp6n89kKWF4IZi18v3fxQWFRolvBA6phNVmA8psdfB1MvDnGacCJdS+EOX12w/CyHM62z//rHmYmvw==", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/tannerlinsley" + } + }, + "node_modules/@tanstack/query-devtools": { + "version": "5.51.16", + "resolved": "https://registry.npmjs.org/@tanstack/query-devtools/-/query-devtools-5.51.16.tgz", + "integrity": "sha512-ajwuq4WnkNCMj/Hy3KR8d3RtZ6PSKc1dD2vs2T408MdjgKzQ3klVoL6zDgVO7X+5jlb5zfgcO3thh4ojPhfIaw==", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/tannerlinsley" + } + }, + "node_modules/@tanstack/react-query": { + "version": "5.51.21", + "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.51.21.tgz", + "integrity": "sha512-Q/V81x3sAYgCsxjwOkfLXfrmoG+FmDhLeHH5okC/Bp8Aaw2c33lbEo/mMcMnkxUPVtB2FLpzHT0tq3c+OlZEbw==", + "dependencies": { + "@tanstack/query-core": "5.51.21" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/tannerlinsley" + }, + "peerDependencies": { + "react": "^18.0.0" + } + }, + "node_modules/@tanstack/react-query-devtools": { + "version": "5.51.21", + "resolved": "https://registry.npmjs.org/@tanstack/react-query-devtools/-/react-query-devtools-5.51.21.tgz", + "integrity": "sha512-mi5ef8dvsS48GsG6/8M60O2EgrzPK1kNPngOcHBTlIUrB5dGkxP9fuHf05GQRxtSp5W5GlyeUpzOmtkKNpf9dQ==", + "dependencies": { + "@tanstack/query-devtools": "5.51.16" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/tannerlinsley" + }, + "peerDependencies": { + "@tanstack/react-query": "^5.51.21", + "react": "^18 || ^19" + } + }, "node_modules/@types/axios": { "version": "0.14.0", "resolved": "https://registry.npmjs.org/@types/axios/-/axios-0.14.0.tgz", "integrity": "sha512-KqQnQbdYE54D7oa/UmYVMZKq7CO4l8DEENzOKc4aBRwxCXSlJXGz83flFx5L7AWrOQnmuN3kVsRdt+GZPPjiVQ==", "deprecated": "This is a stub types definition for axios (https://github.com/mzabriskie/axios). axios provides its own type definitions, so you don't need @types/axios installed!", - "dev": true, "dependencies": { "axios": "*" } @@ -3157,7 +3321,7 @@ "version": "20.3.2", "resolved": "https://registry.npmjs.org/@types/node/-/node-20.3.2.tgz", "integrity": "sha512-vOBLVQeCQfIcF/2Y7eKFTqrMnizK5lRNQ7ykML/5RuwVXVWxYkgwS7xbt4B6fKCUPgbSL5FSsjHQpaGQP/dQmw==", - "devOptional": true, + "dev": true, "license": "MIT" }, "node_modules/@types/normalize-package-data": { @@ -3178,14 +3342,12 @@ "version": "15.7.5", "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz", "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==", - "dev": true, "license": "MIT" }, "node_modules/@types/react": { "version": "18.2.14", "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.14.tgz", "integrity": "sha512-A0zjq+QN/O0Kpe30hA1GidzyFjatVvrpIvWLxD+xv67Vt91TWWgco9IvrJBkeyHm1trGaFS/FSGqPlhyeZRm0g==", - "dev": true, "license": "MIT", "dependencies": { "@types/prop-types": "*", @@ -3193,6 +3355,14 @@ "csstype": "^3.0.2" } }, + "node_modules/@types/react-copy-to-clipboard": { + "version": "5.0.7", + "resolved": "https://registry.npmjs.org/@types/react-copy-to-clipboard/-/react-copy-to-clipboard-5.0.7.tgz", + "integrity": "sha512-Gft19D+as4M+9Whq1oglhmK49vqPhcLzk8WfvfLvaYMIPYanyfLy0+CwFucMJfdKoSFyySPmkkWn8/E6voQXjQ==", + "dependencies": { + "@types/react": "*" + } + }, "node_modules/@types/react-dom": { "version": "18.2.6", "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.6.tgz", @@ -3203,11 +3373,19 @@ "@types/react": "*" } }, + "node_modules/@types/react-lottie": { + "version": "1.2.10", + "resolved": "https://registry.npmjs.org/@types/react-lottie/-/react-lottie-1.2.10.tgz", + "integrity": "sha512-rCd1p3US4ELKJlqwVnP0h5b24zt5p9OCvKUoNpYExLqwbFZMWEiJ6EGLMmH7nmq5V7KomBIbWO2X/XRFsL0vCA==", + "dev": true, + "dependencies": { + "@types/react": "*" + } + }, "node_modules/@types/scheduler": { "version": "0.16.3", "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.3.tgz", "integrity": "sha512-5cJ8CB4yAx7BH1oMvdU0Jh9lrEXyPkar6F9G/ERswkCuvP4KQZfZkSjcMbAICCpQTN4OuZn8tz0HiKv9TGZgrQ==", - "dev": true, "license": "MIT" }, "node_modules/@types/semver": { @@ -3233,6 +3411,7 @@ "version": "4.2.0", "resolved": "https://registry.npmjs.org/@types/stylis/-/stylis-4.2.0.tgz", "integrity": "sha512-n4sx2bqL0mW1tvDf/loQ+aMX7GQD3lc3fkCMC55VFNDu/vBOabO+LTIeXKM14xK0ppk5TUGcWRjiSpIlUpghKw==", + "dev": true, "license": "MIT" }, "node_modules/@typescript-eslint/eslint-plugin": { @@ -3652,6 +3831,7 @@ "version": "3.1.3", "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz", "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==", + "dev": true, "license": "ISC", "optional": true, "dependencies": { @@ -3888,6 +4068,7 @@ "version": "0.4.3", "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.4.3.tgz", "integrity": "sha512-bM3gHc337Dta490gg+/AseNB9L4YLHxq1nGKZZSHbhXv4aTYU2MD2cjza1Ru4S6975YLTaL1K8uJf6ukJhhmtw==", + "dev": true, "license": "MIT", "dependencies": { "@babel/compat-data": "^7.17.7", @@ -3902,6 +4083,7 @@ "version": "0.8.1", "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.8.1.tgz", "integrity": "sha512-ikFrZITKg1xH6pLND8zT14UPgjKHiGLqex7rGEZCH2EvhsneJaJPemmpQaIZV5AL03II+lXylw3UmddDK8RU5Q==", + "dev": true, "license": "MIT", "dependencies": { "@babel/helper-define-polyfill-provider": "^0.4.0", @@ -3915,6 +4097,7 @@ "version": "0.5.0", "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-regenerator/-/babel-plugin-polyfill-regenerator-0.5.0.tgz", "integrity": "sha512-hDJtKjMLVa7Z+LwnTCxoDLQj6wdc+B8dun7ayF2fYieI6OzfuvcLMB32ihJZ4UhCBwNYGl5bg/x/P9cMdnkc2g==", + "dev": true, "license": "MIT", "dependencies": { "@babel/helper-define-polyfill-provider": "^0.4.0" @@ -3927,7 +4110,7 @@ "version": "2.1.4", "resolved": "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-2.1.4.tgz", "integrity": "sha512-Xgp9g+A/cG47sUyRwwYxGM4bR/jDRg5N6it/8+HxCnbT5XNKSKDT9xm4oag/osgqjC2It/vH0yXsomOG6k558g==", - "devOptional": true, + "dev": true, "license": "MIT", "dependencies": { "@babel/helper-annotate-as-pure": "^7.22.5", @@ -3940,6 +4123,20 @@ "styled-components": ">= 2" } }, + "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==", + "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==" + }, "node_modules/balanced-match": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-2.0.0.tgz", @@ -3960,6 +4157,7 @@ "version": "2.2.0", "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz", "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==", + "dev": true, "license": "MIT", "optional": true, "engines": { @@ -3970,6 +4168,7 @@ "version": "1.1.11", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==", + "dev": true, "license": "MIT", "dependencies": { "balanced-match": "^1.0.0", @@ -3980,13 +4179,14 @@ "version": "1.0.2", "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz", "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==", + "dev": true, "license": "MIT" }, "node_modules/braces": { "version": "3.0.2", "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz", "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==", - "devOptional": true, + "dev": true, "license": "MIT", "dependencies": { "fill-range": "^7.0.1" @@ -4107,6 +4307,7 @@ "version": "1.0.1", "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.1.tgz", "integrity": "sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ==", + "dev": true, "license": "MIT", "funding": { "url": "https://github.com/sponsors/ljharb" @@ -4153,6 +4354,7 @@ "version": "3.5.3", "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz", "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==", + "dev": true, "funding": [ { "type": "individual", @@ -4177,6 +4379,14 @@ "fsevents": "~2.3.2" } }, + "node_modules/clsx": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz", + "integrity": "sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==", + "engines": { + "node": ">=6" + } + }, "node_modules/color-convert": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", @@ -4220,6 +4430,7 @@ "version": "4.1.1", "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz", "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==", + "dev": true, "license": "MIT", "engines": { "node": ">= 6" @@ -4229,6 +4440,7 @@ "version": "0.0.1", "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz", "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==", + "dev": true, "license": "MIT" }, "node_modules/convert-source-map": { @@ -4249,10 +4461,26 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/copy-to-clipboard": { + "version": "3.3.3", + "resolved": "https://registry.npmjs.org/copy-to-clipboard/-/copy-to-clipboard-3.3.3.tgz", + "integrity": "sha512-2KV8NhB5JqC3ky0r9PMCAZKbUHSwtEo4CwCs0KXgruG43gX5PMqDEBbVU4OUzw2MuAWUfsuFmWvEKG5QRfSnJA==", + "dependencies": { + "toggle-selection": "^1.0.6" + } + }, + "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.", + "hasInstallScript": true + }, "node_modules/core-js-compat": { "version": "3.31.0", "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.31.0.tgz", "integrity": "sha512-hM7YCu1cU6Opx7MXNu0NuumM0ezNeAeRKadixyiQELWY3vT3De9S4J5ZBMraWV2vZnrE1Cirl0GtFtDtMUXzPw==", + "dev": true, "license": "MIT", "dependencies": { "browserslist": "^4.21.5" @@ -4299,6 +4527,7 @@ "version": "1.0.0", "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz", "integrity": "sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg==", + "dev": true, "license": "ISC", "engines": { "node": ">=4" @@ -4327,6 +4556,7 @@ "version": "3.2.0", "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.2.0.tgz", "integrity": "sha512-e8RKaLXMOFii+02mOlqwjbD00KSEKqblnpO9e++1aXS1fPQOpS1YoqdVHBqPjHNoxeF2mimzVqawm2KCbEdtHQ==", + "dev": true, "license": "MIT", "dependencies": { "camelize": "^1.0.0", @@ -4617,6 +4847,7 @@ "version": "0.17.19", "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.17.19.tgz", "integrity": "sha512-XQ0jAPFkK/u3LcVRcvVHQcTIqD6E2H1fvZMA5dQPSOWb3suUbWbfbRf94pjc0bNzRYLfIrDRQXr7X+LHIm5oHw==", + "dev": true, "hasInstallScript": true, "license": "MIT", "bin": { @@ -5091,6 +5322,7 @@ "version": "2.0.3", "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz", "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==", + "dev": true, "license": "BSD-2-Clause", "engines": { "node": ">=0.10.0" @@ -5171,7 +5403,7 @@ "version": "7.0.1", "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz", "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==", - "devOptional": true, + "dev": true, "license": "MIT", "dependencies": { "to-regex-range": "^5.0.1" @@ -5266,18 +5498,21 @@ "version": "1.1.0", "resolved": "https://registry.npmjs.org/fs-readdir-recursive/-/fs-readdir-recursive-1.1.0.tgz", "integrity": "sha512-GNanXlVr2pf02+sPN40XN8HG+ePaNcvM0q5mZBd668Obwb0yD5GiUbZOFgwn8kGMY6I3mdyDJzieUy3PTYyTRA==", + "dev": true, "license": "MIT" }, "node_modules/fs.realpath": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz", "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==", + "dev": true, "license": "ISC" }, "node_modules/fsevents": { "version": "2.3.2", "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz", "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==", + "dev": true, "license": "MIT", "optional": true, "os": [ @@ -5291,6 +5526,7 @@ "version": "1.1.1", "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz", "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==", + "dev": true, "license": "MIT" }, "node_modules/function.prototype.name": { @@ -5368,6 +5604,7 @@ "version": "7.2.3", "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz", "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==", + "dev": true, "license": "ISC", "dependencies": { "fs.realpath": "^1.0.0", @@ -5388,7 +5625,7 @@ "version": "5.1.2", "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz", "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==", - "devOptional": true, + "dev": true, "license": "ISC", "dependencies": { "is-glob": "^4.0.1" @@ -5565,6 +5802,7 @@ "version": "1.0.3", "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz", "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==", + "dev": true, "license": "MIT", "dependencies": { "function-bind": "^1.1.1" @@ -5786,6 +6024,7 @@ "version": "1.0.6", "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz", "integrity": "sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==", + "dev": true, "license": "ISC", "dependencies": { "once": "^1.3.0", @@ -5796,6 +6035,7 @@ "version": "2.0.4", "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz", "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==", + "dev": true, "license": "ISC" }, "node_modules/ini": { @@ -5858,6 +6098,7 @@ "version": "2.1.0", "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz", "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==", + "dev": true, "license": "MIT", "optional": true, "dependencies": { @@ -5901,6 +6142,7 @@ "version": "2.12.1", "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.12.1.tgz", "integrity": "sha512-Q4ZuBAe2FUsKtyQJoQHlvP8OvBERxO3jEmy1I7hcRXcJBGGHFh/aJBswbXuS9sgrDH2QUO8ilkwNPHvHMd8clg==", + "dev": true, "license": "MIT", "dependencies": { "has": "^1.0.3" @@ -5929,7 +6171,7 @@ "version": "2.1.1", "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz", "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==", - "devOptional": true, + "dev": true, "license": "MIT", "engines": { "node": ">=0.10.0" @@ -5949,7 +6191,7 @@ "version": "4.0.3", "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz", "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==", - "devOptional": true, + "dev": true, "license": "MIT", "dependencies": { "is-extglob": "^2.1.1" @@ -5975,7 +6217,7 @@ "version": "7.0.0", "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz", "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==", - "devOptional": true, + "dev": true, "license": "MIT", "engines": { "node": ">=0.12.0" @@ -6281,13 +6523,14 @@ "version": "4.17.21", "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz", "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==", - "devOptional": true, + "dev": true, "license": "MIT" }, "node_modules/lodash.debounce": { "version": "4.0.8", "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz", "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==", + "dev": true, "license": "MIT" }, "node_modules/lodash.merge": { @@ -6316,6 +6559,11 @@ "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==" + }, "node_modules/lru-cache": { "version": "5.1.1", "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz", @@ -6329,6 +6577,7 @@ "version": "2.1.0", "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-2.1.0.tgz", "integrity": "sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==", + "dev": true, "license": "MIT", "dependencies": { "pify": "^4.0.1", @@ -6342,6 +6591,7 @@ "version": "5.7.1", "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz", "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==", + "dev": true, "license": "ISC", "bin": { "semver": "bin/semver" @@ -6461,6 +6711,7 @@ "version": "3.1.2", "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz", "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==", + "dev": true, "license": "ISC", "dependencies": { "brace-expansion": "^1.1.7" @@ -6504,6 +6755,7 @@ "version": "3.3.6", "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.6.tgz", "integrity": "sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==", + "dev": true, "funding": [ { "type": "github", @@ -6594,7 +6846,7 @@ "version": "3.0.0", "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz", "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==", - "devOptional": true, + "dev": true, "license": "MIT", "engines": { "node": ">=0.10.0" @@ -6604,7 +6856,6 @@ "version": "4.1.1", "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==", - "dev": true, "license": "MIT", "engines": { "node": ">=0.10.0" @@ -6718,6 +6969,7 @@ "version": "1.4.0", "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz", "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==", + "dev": true, "license": "ISC", "dependencies": { "wrappy": "1" @@ -6827,6 +7079,7 @@ "version": "1.0.1", "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz", "integrity": "sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==", + "dev": true, "license": "MIT", "engines": { "node": ">=0.10.0" @@ -6846,6 +7099,7 @@ "version": "1.0.7", "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz", "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==", + "dev": true, "license": "MIT" }, "node_modules/path-type": { @@ -6879,6 +7133,7 @@ "version": "4.0.1", "resolved": "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz", "integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==", + "dev": true, "license": "MIT", "engines": { "node": ">=6" @@ -6888,6 +7143,7 @@ "version": "8.4.24", "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.24.tgz", "integrity": "sha512-M0RzbcI0sO/XJNucsGjvWU9ERWxb/ytp1w6dKtxTKgixdtQDq4rmx/g8W1hnaheq9jgwL/oyEdH5Bc4WwJKMqg==", + "dev": true, "funding": [ { "type": "opencollective", @@ -7009,6 +7265,7 @@ "version": "4.2.0", "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz", "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==", + "dev": true, "license": "MIT" }, "node_modules/prelude-ls": { @@ -7051,7 +7308,6 @@ "version": "15.8.1", "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz", "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==", - "dev": true, "license": "MIT", "dependencies": { "loose-envify": "^1.4.0", @@ -7118,6 +7374,23 @@ "node": ">=0.10.0" } }, + "node_modules/react-copy-to-clipboard": { + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/react-copy-to-clipboard/-/react-copy-to-clipboard-5.1.0.tgz", + "integrity": "sha512-k61RsNgAayIJNoy9yDsYzDe/yAZAzEbEgcz3DZMhF686LEyukcE1hzurxe85JandPUG+yTfGVFzuEw3xt8WP/A==", + "dependencies": { + "copy-to-clipboard": "^3.3.1", + "prop-types": "^15.8.1" + }, + "peerDependencies": { + "react": "^15.3.0 || 16 || 17 || 18" + } + }, + "node_modules/react-date-object": { + "version": "2.1.9", + "resolved": "https://registry.npmjs.org/react-date-object/-/react-date-object-2.1.9.tgz", + "integrity": "sha512-BHxD/quWOTo9fLKV/cfL/M31ePoj4a1JaJ/CnOf8Ndg3mrkh4x9wEMMkCfTrzduxDOgU8ZgR8uarhqI5G71sTg==" + }, "node_modules/react-dom": { "version": "18.2.0", "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz", @@ -7131,6 +7404,15 @@ "react": "^18.2.0" } }, + "node_modules/react-element-popper": { + "version": "2.1.7", + "resolved": "https://registry.npmjs.org/react-element-popper/-/react-element-popper-2.1.7.tgz", + "integrity": "sha512-tuM2OxKlW32h+6uFSK6EENHPeZ2OGgOipHfOAl+VLWEv9/j3QkSGbD+ADX3A9uJlmq24i37n28RjJmAbGTfpEg==", + "peerDependencies": { + "react": ">=16.8.0", + "react-dom": ">=16.8.0" + } + }, "node_modules/react-error-boundary": { "version": "4.0.10", "resolved": "https://registry.npmjs.org/react-error-boundary/-/react-error-boundary-4.0.10.tgz", @@ -7147,9 +7429,36 @@ "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==", - "dev": true, "license": "MIT" }, + "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==", + "dependencies": { + "babel-runtime": "^6.26.0", + "lottie-web": "^5.1.3" + }, + "engines": { + "npm": "^3.0.0" + }, + "peerDependencies": { + "react": ">=15.0.0" + } + }, + "node_modules/react-multi-date-picker": { + "version": "4.5.2", + "resolved": "https://registry.npmjs.org/react-multi-date-picker/-/react-multi-date-picker-4.5.2.tgz", + "integrity": "sha512-FgWjZB3Z6IA6XpcWiLPk85PwcRUhOiYhKK42o5k672gD/n2I6rzPfQ8bUrldOIiF/Z7FfOCdH7a6FeubzqteLg==", + "dependencies": { + "react-date-object": "^2.1.8", + "react-element-popper": "^2.1.6" + }, + "peerDependencies": { + "react": ">=16.8.0", + "react-dom": ">=16.8.0" + } + }, "node_modules/react-refresh": { "version": "0.14.0", "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.0.tgz", @@ -7192,6 +7501,18 @@ "react-dom": ">=16.8" } }, + "node_modules/react-toastify": { + "version": "9.1.3", + "resolved": "https://registry.npmjs.org/react-toastify/-/react-toastify-9.1.3.tgz", + "integrity": "sha512-fPfb8ghtn/XMxw3LkxQBk3IyagNpF/LIKjOBflbexr2AWxAH1MJgvnESwEwBn9liLFXgTKWgBSdZpw9m4OTHTg==", + "dependencies": { + "clsx": "^1.1.1" + }, + "peerDependencies": { + "react": ">=16", + "react-dom": ">=16" + } + }, "node_modules/read-pkg": { "version": "5.2.0", "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-5.2.0.tgz", @@ -7336,6 +7657,7 @@ "version": "3.6.0", "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz", "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==", + "dev": true, "license": "MIT", "optional": true, "dependencies": { @@ -7365,6 +7687,14 @@ } } }, + "node_modules/recoil-persist": { + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/recoil-persist/-/recoil-persist-5.1.0.tgz", + "integrity": "sha512-sew4k3uBVJjRWKCSFuBw07Y1p1pBOb0UxLJPxn4G2bX/9xNj+r2xlqYy/BRfyofR/ANfqBU04MIvulppU4ZC0w==", + "peerDependencies": { + "recoil": "^0.7.2" + } + }, "node_modules/redent": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/redent/-/redent-3.0.0.tgz", @@ -7383,12 +7713,14 @@ "version": "1.4.2", "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz", "integrity": "sha512-zrceR/XhGYU/d/opr2EKO7aRHUeiBI8qjtfHqADTwZd6Szfy16la6kqD0MIUs5z5hx6AaKa+PixpPrR289+I0A==", + "dev": true, "license": "MIT" }, "node_modules/regenerate-unicode-properties": { "version": "10.1.0", "resolved": "https://registry.npmjs.org/regenerate-unicode-properties/-/regenerate-unicode-properties-10.1.0.tgz", "integrity": "sha512-d1VudCLoIGitcU/hEg2QqvyGZQmdC0Lf8BqdOMXGFSvJP4bNV1+XqbPQeHHLD51Jh4QJJ225dlIFvY4Ly6MXmQ==", + "dev": true, "license": "MIT", "dependencies": { "regenerate": "^1.4.2" @@ -7407,6 +7739,7 @@ "version": "0.15.1", "resolved": "https://registry.npmjs.org/regenerator-transform/-/regenerator-transform-0.15.1.tgz", "integrity": "sha512-knzmNAcuyxV+gQCufkYcvOqX/qIIfHLv0u5x79kRxuGojfYVky1f15TzZEu2Avte8QGepvUNTnLskf8E6X6Vyg==", + "dev": true, "license": "MIT", "dependencies": { "@babel/runtime": "^7.8.4" @@ -7434,6 +7767,7 @@ "version": "5.3.2", "resolved": "https://registry.npmjs.org/regexpu-core/-/regexpu-core-5.3.2.tgz", "integrity": "sha512-RAM5FlZz+Lhmo7db9L298p2vHP5ZywrVXmVXpmAD9GuL5MPH6t9ROw1iA/wfHkQ76Qe7AaPF0nGuim96/IrQMQ==", + "dev": true, "license": "MIT", "dependencies": { "@babel/regjsgen": "^0.8.0", @@ -7451,6 +7785,7 @@ "version": "0.9.1", "resolved": "https://registry.npmjs.org/regjsparser/-/regjsparser-0.9.1.tgz", "integrity": "sha512-dQUtn90WanSNl+7mQKcXAgZxvUe7Z0SqXlgzv0za4LwiUhyzBC58yQO3liFoUgu8GiJVInAhJjkj1N0EtQ5nkQ==", + "dev": true, "license": "BSD-2-Clause", "dependencies": { "jsesc": "~0.5.0" @@ -7463,6 +7798,7 @@ "version": "0.5.0", "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-0.5.0.tgz", "integrity": "sha512-uZz5UnB7u4T9LvwmFqXii7pZSouaRPorGs5who1Ip7VO0wxanFvBL7GkM6dTHlgX+jhBApRetaWpnDabOeTcnA==", + "dev": true, "bin": { "jsesc": "bin/jsesc" } @@ -7481,6 +7817,7 @@ "version": "1.22.2", "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.2.tgz", "integrity": "sha512-Sb+mjNHOULsBv818T40qSPeRiuWLyaGMa5ewydRLFimneixmVy2zdivRl+AF6jaYPC8ERxGDmFSiqui6SfPd+g==", + "dev": true, "license": "MIT", "dependencies": { "is-core-module": "^2.11.0", @@ -7548,6 +7885,7 @@ "version": "3.25.3", "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.25.3.tgz", "integrity": "sha512-ZT279hx8gszBj9uy5FfhoG4bZx8c+0A1sbqtr7Q3KNWIizpTdDEPZbV2xcbvHsnFp4MavCQYZyzApJ+virB8Yw==", + "dev": true, "license": "MIT", "bin": { "rollup": "dist/bin/rollup" @@ -7612,6 +7950,7 @@ "version": "6.3.0", "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz", "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==", + "dev": true, "license": "ISC", "bin": { "semver": "bin/semver.js" @@ -7621,6 +7960,7 @@ "version": "1.1.0", "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz", "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==", + "dev": true, "license": "MIT" }, "node_modules/shebang-command": { @@ -7678,6 +8018,7 @@ "version": "2.0.0", "resolved": "https://registry.npmjs.org/slash/-/slash-2.0.0.tgz", "integrity": "sha512-ZYKh3Wh2z1PpEXWr0MpSBZ0V6mZHAQfYevttO11c51CaWjGTaadiKZ+wVt1PbMlDV5qhMFslpZCemhwOK7C89A==", + "dev": true, "license": "MIT", "engines": { "node": ">=6" @@ -7715,6 +8056,7 @@ "version": "1.0.2", "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz", "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==", + "dev": true, "license": "BSD-3-Clause", "engines": { "node": ">=0.10.0" @@ -7906,6 +8248,7 @@ "version": "6.0.1", "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-6.0.1.tgz", "integrity": "sha512-6VAlf5A9KZJOnX54becRCLnBFSfeqP+q3raTCdPDPFg4HOy7MNlnWFqAq3sHlQVDdZh5jcsDwK06vTU3NMO6yQ==", + "dev": true, "license": "MIT", "dependencies": { "@babel/cli": "^7.21.0", @@ -8091,6 +8434,7 @@ "version": "4.3.0", "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.3.0.tgz", "integrity": "sha512-E87pIogpwUsUwXw7dNyU4QDjdgVMy52m+XEOPEKUn161cCzWjjhPSQhByfd1CcNvrOLnXQ6OnnZDwnJrz/Z4YQ==", + "dev": true, "license": "MIT" }, "node_modules/supports-color": { @@ -8124,6 +8468,7 @@ "version": "1.0.0", "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz", "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==", + "dev": true, "license": "MIT", "engines": { "node": ">= 0.4" @@ -8233,7 +8578,7 @@ "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==", - "devOptional": true, + "dev": true, "license": "MIT", "dependencies": { "is-number": "^7.0.0" @@ -8242,6 +8587,11 @@ "node": ">=8.0" } }, + "node_modules/toggle-selection": { + "version": "1.0.6", + "resolved": "https://registry.npmjs.org/toggle-selection/-/toggle-selection-1.0.6.tgz", + "integrity": "sha512-BiZS+C1OS8g/q2RRbJmy59xpyghNBqrr6k5L/uKBGRsTfxmu3ffiRnd8mlGPUVayg8pvfi5urfnu8TU7DVOkLQ==" + }, "node_modules/trim-newlines": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/trim-newlines/-/trim-newlines-3.0.1.tgz", @@ -8282,6 +8632,7 @@ "version": "2.6.0", "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.0.tgz", "integrity": "sha512-7At1WUettjcSRHXCyYtTselblcHl9PJFFVKiCAy/bY97+BPZXSQ2wbq0P9s8tK2G7dFQfNnlJnPAiArVBVBsfA==", + "dev": true, "license": "0BSD" }, "node_modules/tsutils": { @@ -8382,6 +8733,7 @@ "version": "2.0.0", "resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-2.0.0.tgz", "integrity": "sha512-yY5PpDlfVIU5+y/BSCxAJRBIS1Zc2dDG3Ujq+sR0U+JjUevW2JhocOF+soROYDSaAezOzOKuyyixhD6mBknSmQ==", + "dev": true, "license": "MIT", "engines": { "node": ">=4" @@ -8391,6 +8743,7 @@ "version": "2.0.0", "resolved": "https://registry.npmjs.org/unicode-match-property-ecmascript/-/unicode-match-property-ecmascript-2.0.0.tgz", "integrity": "sha512-5kaZCrbp5mmbz5ulBkDkbY0SsPOjKqVS35VpL9ulMPfSl0J0Xsm+9Evphv9CoIZFwre7aJoa94AY6seMKGVN5Q==", + "dev": true, "license": "MIT", "dependencies": { "unicode-canonical-property-names-ecmascript": "^2.0.0", @@ -8404,6 +8757,7 @@ "version": "2.1.0", "resolved": "https://registry.npmjs.org/unicode-match-property-value-ecmascript/-/unicode-match-property-value-ecmascript-2.1.0.tgz", "integrity": "sha512-qxkjQt6qjg/mYscYMC0XKRn3Rh0wFPlfxB0xkt9CfyTvpX1Ra0+rAmdX2QyAobptSEvuy4RtpPRui6XkV+8wjA==", + "dev": true, "license": "MIT", "engines": { "node": ">=4" @@ -8413,6 +8767,7 @@ "version": "2.1.0", "resolved": "https://registry.npmjs.org/unicode-property-aliases-ecmascript/-/unicode-property-aliases-ecmascript-2.1.0.tgz", "integrity": "sha512-6t3foTQI9qne+OZoVQB/8x8rk2k1eVy1gRXhV3oFQ5T6R1dqQ1xtin3XqSlx3+ATBkliTaR/hHyJBm+LVPNM8w==", + "dev": true, "license": "MIT", "engines": { "node": ">=4" @@ -8496,6 +8851,7 @@ "version": "4.3.9", "resolved": "https://registry.npmjs.org/vite/-/vite-4.3.9.tgz", "integrity": "sha512-qsTNZjO9NoJNW7KnOrgYwczm0WctJ8m/yqYAMAK9Lxt4SoySUfS5S8ia9K7JHpa3KEeMfyF8LoJ3c5NeBJy6pg==", + "dev": true, "license": "MIT", "dependencies": { "esbuild": "^0.17.5", @@ -8632,6 +8988,7 @@ "version": "1.0.2", "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz", "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==", + "dev": true, "license": "ISC" }, "node_modules/write-file-atomic": { diff --git a/package.json b/package.json index 5826cc24..6d8adc13 100644 --- a/package.json +++ b/package.json @@ -24,6 +24,7 @@ "react-copy-to-clipboard": "^5.1.0", "react-dom": "^18.2.0", "react-error-boundary": "^4.0.10", + "react-lottie": "^1.2.4", "react-multi-date-picker": "^4.1.2", "react-router-dom": "6", "react-toastify": "^9.1.3", @@ -38,6 +39,7 @@ "@types/node": "^20.3.2", "@types/react": "^18.0.37", "@types/react-dom": "^18.0.11", + "@types/react-lottie": "^1.2.10", "@types/styled-components": "^5.1.26", "@typescript-eslint/eslint-plugin": "^5.60.1", "@typescript-eslint/parser": "^5.60.1", @@ -54,7 +56,6 @@ "styled-components": "^6.0.1", "stylelint": "15.5.0", "stylelint-config-concentric-order": "^5.1.0", - "stylelint-config-prettier": "^9.0.5", "stylelint-config-recommended": "^12.0.0", "stylelint-config-styled-components": "^0.1.1", "typescript": "^5.0.2", diff --git a/src/App.tsx b/src/App.tsx index 06c8d8f8..efd8517e 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,14 +1,12 @@ /**카카오톡 인앱브라우저 종료후 크롬 및 사파리로 오픈하는 utils file */ -import './utils/changeBrowser'; import 'react-toastify/dist/ReactToastify.css'; import './App.css'; +import './utils/changeBrowser'; import { useEffect } from 'react'; import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; -import { ReactQueryDevtools } from '@tanstack/react-query-devtools'; -import { ThemeProvider } from 'styled-components'; -import styled from 'styled-components/macro'; +import styled, { ThemeProvider } from 'styled-components'; import ToastContainerBox from 'utils/toast/ToastContainer'; import Router from './Router'; @@ -27,7 +25,7 @@ const MobileWrapper = styled.div` padding-right: 2rem; padding-left: 2rem; - max-width: var(--app-max-width, 37.5rem); + max-width: var(--app-max-width, 43.5rem); min-height: calc(var(--vh, 1vh) * 100); `; @@ -37,7 +35,8 @@ function App() { document.documentElement.style.setProperty('--vh', `${vh}px`); const windowWidth = window.innerWidth || document.documentElement.clientWidth; - const maxWidth = Math.min(37.5, windowWidth); + + const maxWidth = Math.min(43, windowWidth); document.documentElement.style.setProperty('--app-max-width', `${maxWidth}rem`); }; @@ -60,7 +59,7 @@ function App() { - + {/* */} diff --git a/src/Router.tsx b/src/Router.tsx index 56fe5ea9..f9a49601 100644 --- a/src/Router.tsx +++ b/src/Router.tsx @@ -1,4 +1,5 @@ import ChooseBestTime from 'pages/bestMeetTime/ChooseBestTime'; +import CompleteCreateMeeting from 'pages/completeCreateMeeting/CompleteCreateMeeting'; import CreateMeeting from 'pages/createMeeting/CreateMeeting'; import CueCard from 'pages/cueCard/CueCard'; import ErrorPage404 from 'pages/errorLoading/ErrorPage404'; @@ -15,7 +16,7 @@ const Router = () => { } /> } /> - } /> + } /> } /> + + diff --git a/src/assets/svgs/arrowTop.svg b/src/assets/svgs/arrowTop.svg new file mode 100644 index 00000000..bdc391cc --- /dev/null +++ b/src/assets/svgs/arrowTop.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/svgs/close.svg b/src/assets/svgs/close.svg new file mode 100644 index 00000000..f9f186f8 --- /dev/null +++ b/src/assets/svgs/close.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/svgs/dropdown.svg b/src/assets/svgs/dropdown.svg new file mode 100644 index 00000000..9db502db --- /dev/null +++ b/src/assets/svgs/dropdown.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/svgs/dropup.svg b/src/assets/svgs/dropup.svg new file mode 100644 index 00000000..cc22f537 --- /dev/null +++ b/src/assets/svgs/dropup.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/svgs/linkTooltip.svg b/src/assets/svgs/linkTooltip.svg new file mode 100644 index 00000000..ce9098b6 --- /dev/null +++ b/src/assets/svgs/linkTooltip.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/assets/svgs/member.svg b/src/assets/svgs/member.svg new file mode 100644 index 00000000..93c67214 --- /dev/null +++ b/src/assets/svgs/member.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/assets/svgs/tooltipArrow.svg b/src/assets/svgs/tooltipArrow.svg new file mode 100644 index 00000000..2a0ea213 --- /dev/null +++ b/src/assets/svgs/tooltipArrow.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/atoms/atom.ts b/src/atoms/atom.ts index 973d8dc3..a5d64564 100644 --- a/src/atoms/atom.ts +++ b/src/atoms/atom.ts @@ -1,5 +1,6 @@ import { ScheduleStates } from 'pages/legacy/selectSchedule/types/Schedule'; import { atom } from 'recoil'; +import { recoilPersist } from 'recoil-persist'; export const methodStateAtom = atom({ key: 'methodStateAtom', @@ -29,7 +30,10 @@ export const clickedTimeSlotAtom = atom({ default: undefined, }); +const { persistAtom } = recoilPersist(); + export const userNameAtom = atom({ key: 'userNameAtom', default: '', + effects_UNSTABLE: [persistAtom], }); diff --git a/src/components/Icon/icon.ts b/src/components/Icon/icon.ts index f99ea325..e2572dd2 100644 --- a/src/components/Icon/icon.ts +++ b/src/components/Icon/icon.ts @@ -1,10 +1,15 @@ +import { ReactComponent as ArrowBottomIc } from 'assets/svgs/arrowBottom.svg'; +import { ReactComponent as ArrowTopIc } from 'assets/svgs/arrowTop.svg'; import { ReactComponent as BackIc } from 'assets/svgs/backBtn.svg'; import { ReactComponent as Circle1Ic } from 'assets/svgs/circle1.svg'; import { ReactComponent as Circle2Ic } from 'assets/svgs/circle2.svg'; import { ReactComponent as Circle3Ic } from 'assets/svgs/circle3.svg'; import { ReactComponent as ClockIc } from 'assets/svgs/clock.svg'; +import { ReactComponent as CloseIc } from 'assets/svgs/close.svg'; +import { ReactComponent as DropDown } from 'assets/svgs/dropdown.svg'; import { ReactComponent as DropDownIc } from 'assets/svgs/dropDownBtn.svg'; import { ReactComponent as DropdownWhite } from 'assets/svgs/dropdownWhite.svg'; +import { ReactComponent as DropUp } from 'assets/svgs/dropup.svg'; import { ReactComponent as DropUpIc } from 'assets/svgs/dropUpBtn.svg'; import { ReactComponent as DropupWhite } from 'assets/svgs/dropupWhite.svg'; import { ReactComponent as ExitIc } from 'assets/svgs/exitIcon.svg'; @@ -12,7 +17,9 @@ import { ReactComponent as HambergerIc } from 'assets/svgs/hambergerIcon.svg'; import { ReactComponent as InputCancelIc } from 'assets/svgs/inputCancelBtn.svg'; import { ReactComponent as InputErrorIc } from 'assets/svgs/inputErrorBtn.svg'; import { ReactComponent as LinkIc } from 'assets/svgs/linkIcon.svg'; +import { ReactComponent as LinkTooltipIc } from 'assets/svgs/linkTooltip.svg'; import { ReactComponent as MainLogoIc } from 'assets/svgs/mainLogo.svg'; +import { ReactComponent as Member } from 'assets/svgs/member.svg'; import { ReactComponent as OfflinePlaceIc } from 'assets/svgs/offlinePlace.svg'; import { ReactComponent as OnlinePlaceIc } from 'assets/svgs/onlinePlace.svg'; import { ReactComponent as PasswordEyeIc } from 'assets/svgs/passwordEye.svg'; @@ -23,33 +30,43 @@ import { ReactComponent as RadioCheckIc } from 'assets/svgs/radioCheck.svg'; import { ReactComponent as RadioCheckedIc } from 'assets/svgs/radioChecked.svg'; import { ReactComponent as SpeechBubbleIc } from 'assets/svgs/speechBubble.svg'; import { ReactComponent as TimeIc } from 'assets/svgs/time.svg'; +import { ReactComponent as TooltipArrowIc } from 'assets/svgs/tooltipArrow.svg'; import { ReactComponent as Wave } from 'assets/svgs/wave.svg'; +//git test export { - MainLogoIc, - HambergerIc, - ExitIc, - InputCancelIc, - RadioCheckIc, - RadioCheckedIc, + ArrowBottomIc, + ArrowTopIc, BackIc, - PlusIc, - InputErrorIc, + Circle1Ic, + Circle2Ic, + Circle3Ic, + ClockIc, + CloseIc, + DropDown, DropDownIc, + DropdownWhite, + DropUp, DropUpIc, - PasswordOpenEyeIc, - PasswordEyeIc, + DropupWhite, + ExitIc, + HambergerIc, + InputCancelIc, + InputErrorIc, LinkIc, - PlaceIc, - ClockIc, - OnlinePlaceIc, + LinkTooltipIc, + MainLogoIc, + Member, OfflinePlaceIc, - TimeIc, - DropdownWhite, - DropupWhite, + OnlinePlaceIc, + PasswordEyeIc, + PasswordOpenEyeIc, + PlaceIc, + PlusIc, + RadioCheckedIc, + RadioCheckIc, SpeechBubbleIc, + TimeIc, Wave, - Circle1Ic, - Circle2Ic, - Circle3Ic, + TooltipArrowIc, }; diff --git a/src/components/common/BottomSheet/BottomSheet.tsx b/src/components/common/BottomSheet/BottomSheet.tsx new file mode 100644 index 00000000..3e5d7ea5 --- /dev/null +++ b/src/components/common/BottomSheet/BottomSheet.tsx @@ -0,0 +1,52 @@ +import { HTMLAttributes, PropsWithChildren, ReactNode } from 'react'; + +import styled from 'styled-components'; + +interface BottomSheetProps extends PropsWithChildren> { + children?: ReactNode; + isOpen: boolean; + onClose?: () => void; +} + +function BottomSheet({ children, isOpen }: BottomSheetProps) { + return ( + <> + {children} + + + ); +} + +export default BottomSheet; + +const BottomSheetModal = styled.div<{ $isModalOpen: boolean }>` + display: flex; + position: fixed; + bottom: 0; + transform: translateY(${({ $isModalOpen }) => ($isModalOpen ? 0 : '100%')}); + flex-direction: column; + gap: 0.8rem; + transition: transform 600ms cubic-bezier(0.86, 0, 0.07, 1); + z-index: 1; + border-top-left-radius: 1.8rem; + border-top-right-radius: 1.8rem; + background-color: ${({ theme }) => theme.colors.grey8}; + + padding: 3.6rem 2rem 4.8rem; + width: 100%; + max-width: 43rem; + + & button { + width: 100%; + } +`; + +const ModalOverlay = styled.div<{ $isModalOpen: boolean }>` + display: ${({ $isModalOpen }) => ($isModalOpen ? 'block' : 'none')}; + position: fixed; + top: 0; + + background-color: ${({ theme }) => theme.colors.black60}; + width: 100%; + height: 100%; +`; diff --git a/src/components/common/Modal/hooks/useModalState.tsx b/src/components/common/Modal/hooks/useModalState.tsx new file mode 100644 index 00000000..8a326e03 --- /dev/null +++ b/src/components/common/Modal/hooks/useModalState.tsx @@ -0,0 +1,16 @@ +import { useState } from 'react'; + +function useModalState(initialState = false) { + const [isOpen, setIsOpen] = useState(initialState); + + const onOpen = () => { + setIsOpen(true); + }; + const onClose = () => { + setIsOpen(false); + }; + + return { isOpen, onOpen, onClose }; +} + +export default useModalState; diff --git a/src/components/atomComponents/Button.tsx b/src/components/common/atomComponents/Button.tsx similarity index 93% rename from src/components/atomComponents/Button.tsx rename to src/components/common/atomComponents/Button.tsx index 34f99cd2..9cf8e0d3 100644 --- a/src/components/atomComponents/Button.tsx +++ b/src/components/common/atomComponents/Button.tsx @@ -1,7 +1,7 @@ -import { css, styled } from 'styled-components'; - import React from 'react'; +import { css, styled } from 'styled-components'; + interface ButtonProps { children: React.ReactNode; typeState: string; @@ -27,10 +27,11 @@ const buttonDefaultCSS = { border-radius: 0.8rem; padding: 1.6rem; - width: 33.5rem; + width: 100%; + max-width: 39rem; height: 5.4rem; letter-spacing: -0.032rem; - + /* margin: 0 2rem; */ pointer-events: auto; `, }; @@ -44,19 +45,22 @@ const buttonCSS = { halfPrimaryActive: css` ${buttonDefaultCSS.basicCss}; background: ${({ theme }) => theme.colors.main1}; - width: 15.2rem; + width: 100%; + max-width: 18.8rem; color: ${({ theme }) => theme.colors.white}; `, halfPrimaryDisabled: css` ${buttonDefaultCSS.basicCss}; background: ${({ theme }) => theme.colors.grey7}; - width: 15.2rem; + max-width: 18.8rem; + width: 100%; color: ${({ theme }) => theme.colors.grey4}; `, primaryDisabled: css` ${buttonDefaultCSS.basicCss}; background: ${({ theme }) => theme.colors.grey7}; color: ${({ theme }) => theme.colors.grey4}; + cursor: default; `, secondaryActive: css` ${buttonDefaultCSS.basicCss}; @@ -66,7 +70,7 @@ const buttonCSS = { halfSecondaryActive: css` ${buttonDefaultCSS.basicCss}; background: ${({ theme }) => theme.colors.main5}; - width: 15.2rem; + max-width: 18.8rem; color: ${({ theme }) => theme.colors.grey9}; `, secondaryDisabled: css` @@ -74,11 +78,12 @@ const buttonCSS = { background: ${({ theme }) => theme.colors.grey7}; color: ${({ theme }) => theme.colors.grey5}; pointer-events: none; + cursor: default; `, halfsecondaryDisabled: css` ${buttonDefaultCSS.basicCss}; background: ${({ theme }) => theme.colors.grey7}; - width: 15.2rem; + max-width: 18.8rem; color: ${({ theme }) => theme.colors.grey5}; `, tertiaryActive: css` @@ -91,7 +96,7 @@ const buttonCSS = { ${buttonDefaultCSS.basicCss}; border: 1px solid ${({ theme }) => theme.colors.main3}; background-color: ${({ theme }) => theme.colors.grey10}; - width: 15.2rem; + max-width: 18.8rem; color: ${({ theme }) => theme.colors.main3}; `, tertiaryDisabled: css` diff --git a/src/components/atomComponents/PasswordInput.tsx b/src/components/common/atomComponents/PasswordInput.tsx similarity index 71% rename from src/components/atomComponents/PasswordInput.tsx rename to src/components/common/atomComponents/PasswordInput.tsx index 20680980..e0f02082 100644 --- a/src/components/atomComponents/PasswordInput.tsx +++ b/src/components/common/atomComponents/PasswordInput.tsx @@ -1,8 +1,8 @@ import React, { useState } from 'react'; -import Text from 'components/atomComponents/Text'; +import Text from 'components/common/atomComponents/Text'; import { PasswordEyeIc, PasswordOpenEyeIc } from 'components/Icon/icon'; -import styled from 'styled-components/macro'; +import styled from 'styled-components'; import { theme } from 'styles/theme'; interface ValueProps { @@ -25,7 +25,7 @@ function PasswordInput({ value, placeholder, passWordOnChange, page }: ValueProp placeholder={placeholder} value={value} onChange={passWordOnChange} - $iserror={value.length < 4} + $iserror={value.length < 4 || value.length > 8} type={inputType ? 'password' : `number`} inputMode="numeric" /> @@ -34,15 +34,25 @@ function PasswordInput({ value, placeholder, passWordOnChange, page }: ValueProp {page === 'createMeeting' ? ( - - - * - - - 확정 후 비밀번호는 수정할 수 없으며, 비밀번호가 있어야 방장 페이지에 접속할 수 있으니 - 반드시 기억해주세요! - - + <> + {value.length > 8 && ( + + + 최대 8자리까지 입력 가능해요{' '} + + + )} + + + + * + + + 확정 후 비밀번호는 수정할 수 없으며, 비밀번호가 있어야 방장 페이지에 접속할 수 있으니 + 반드시 기억해주세요! + + + ) : ( undefined )} @@ -78,7 +88,7 @@ const StyledPasswordInput = styled.input<{ $iserror: boolean }>` background: ${({ theme }) => theme.colors.grey7}; padding: 1rem 1.6rem; - width: 33.5rem; + width: 100%; height: 5.2rem; caret-color: ${({ theme }) => theme.colors.main1}; @@ -117,3 +127,11 @@ const SubTextSection = styled.div` font-weight: 600; } `; + +const InvalidPWTextSection = styled.div` + margin-top: 0.9rem; + + span { + font-weight: 600; + } +`; diff --git a/src/components/atomComponents/PlaceInput.tsx b/src/components/common/atomComponents/PlaceInput.tsx similarity index 92% rename from src/components/atomComponents/PlaceInput.tsx rename to src/components/common/atomComponents/PlaceInput.tsx index ddc502e7..a708b12b 100644 --- a/src/components/atomComponents/PlaceInput.tsx +++ b/src/components/common/atomComponents/PlaceInput.tsx @@ -1,8 +1,8 @@ import React, { Dispatch, SetStateAction, useState } from 'react'; -import { InputCancelIc ,InputErrorIc } from 'components/Icon/icon'; +import { InputCancelIc, InputErrorIc } from 'components/Icon/icon'; import { MeetingInfo } from 'pages/createMeeting/types/useFunnelInterface'; -import styled from 'styled-components/macro'; +import styled from 'styled-components'; interface ValueProps { data: string; @@ -51,7 +51,9 @@ function PlaceInput({ value, setValue, placeholder }: ValueProps) { export default PlaceInput; -const PlaceInputWrapper = styled.div``; +const PlaceInputWrapper = styled.div` + width: 100%; +`; const InputSection = styled.div` display: flex; @@ -61,9 +63,9 @@ const InputSection = styled.div` input:focus + div { display: flex; svg { - cursor: pointer; width: 2rem; height: 2rem; + cursor: pointer; } } `; @@ -78,7 +80,7 @@ const StyledTextInput = styled.input<{ $iserror: boolean }>` padding: 1rem 1.6rem; - width: 33.5rem; + width: 100%; height: 5.2rem; color: ${({ theme }) => theme.colors.white}; @@ -87,9 +89,9 @@ const StyledTextInput = styled.input<{ $iserror: boolean }>` caret-color: ${({ theme }) => theme.colors.main1}; &:focus { - outline: none; border-bottom: 2px solid ${({ $iserror, theme }) => ($iserror ? theme.colors.red : theme.colors.main1)}; + outline: none; } `; diff --git a/src/components/atomComponents/Text.tsx b/src/components/common/atomComponents/Text.tsx similarity index 96% rename from src/components/atomComponents/Text.tsx rename to src/components/common/atomComponents/Text.tsx index ca1dd2d0..064d3a5e 100644 --- a/src/components/atomComponents/Text.tsx +++ b/src/components/common/atomComponents/Text.tsx @@ -1,4 +1,4 @@ -import styled from 'styled-components/macro'; +import styled from 'styled-components'; interface ValueProps { children: string | string[] | number; diff --git a/src/components/atomComponents/TextAreaInput.tsx b/src/components/common/atomComponents/TextAreaInput.tsx similarity index 89% rename from src/components/atomComponents/TextAreaInput.tsx rename to src/components/common/atomComponents/TextAreaInput.tsx index 694bdf02..d559151d 100644 --- a/src/components/atomComponents/TextAreaInput.tsx +++ b/src/components/common/atomComponents/TextAreaInput.tsx @@ -1,7 +1,7 @@ import React from 'react'; -import Text from 'components/atomComponents/Text'; -import styled from 'styled-components/macro'; +import Text from 'components/common/atomComponents/Text'; +import styled from 'styled-components'; import { theme } from 'styles/theme'; interface ValueProps { @@ -24,6 +24,7 @@ function TextAreaInput({ value, setValue, placeholder }: ValueProps) { export default TextAreaInput; const TextAreaWrapper = styled.div` + width: 100%; position: relative; `; @@ -32,7 +33,7 @@ const StyledTextArea = styled.textarea` border-radius: 1rem; background-color: ${({ theme }) => theme.colors.grey8}; padding: 1.8rem; - width: 33.5rem; + width: 100%; height: 20.8rem; resize: none; color: ${({ theme }) => theme.colors.white}; diff --git a/src/components/atomComponents/TextInput.tsx b/src/components/common/atomComponents/TextInput.tsx similarity index 78% rename from src/components/atomComponents/TextInput.tsx rename to src/components/common/atomComponents/TextInput.tsx index 74e4da53..62c4c6b6 100644 --- a/src/components/atomComponents/TextInput.tsx +++ b/src/components/common/atomComponents/TextInput.tsx @@ -1,18 +1,19 @@ import React, { useState } from 'react'; -import Text from 'components/atomComponents/Text'; +import Text from 'components/common/atomComponents/Text'; import { InputCancelIc, InputErrorIc } from 'components/Icon/icon'; -import styled from 'styled-components/macro'; +import styled from 'styled-components'; import { theme } from 'styles/theme'; interface ValueProps { value: string; setValue: (e: React.ChangeEvent) => void; resetValue: () => void; + max: number; placeholder: string; } -function TextInput({ value, setValue, resetValue, placeholder }: ValueProps) { +function TextInput({ value, setValue, resetValue, max, placeholder }: ValueProps) { const [focus, setFocus] = useState(false); const resetOnClick = () => { @@ -20,7 +21,7 @@ function TextInput({ value, setValue, resetValue, placeholder }: ValueProps) { setFocus(false); }; return ( - <> + setFocus(true)} - $iserror={value?.length > 15} + $iserror={value?.length > max} /> {focus && ( - {value && value.length > 15 ? : } + {value && value.length > max ? : } )} {value && - value.length > 15 && ( + value.length > max && ( - 공백포함 최대 15자까지 입력가능해요 + {`공백포함 최대 ${String(max)}자까지 입력가능해요`} )} - + ); } export default TextInput; -const TextInputWrapper = styled.div``; +const TextInputWrapper = styled.div` + display: flex; + flex-direction: column; + width: 100%; +`; const InputSection = styled.div` display: flex; position: relative; flex-direction: column; - +width: 100%; input:focus + div { display: flex; svg { @@ -77,7 +82,8 @@ const StyledTextInput = styled.input<{ $iserror: boolean }>` background: ${({ theme }) => theme.colors.grey7}; padding: 1rem 1.6rem; - width: 33.5rem; + width: 100%; + max-width: 39rem; height: 5.2rem; color: ${({ theme }) => theme.colors.white}; diff --git a/src/components/common/moleculesComponents/BottomBtnSection.tsx b/src/components/common/moleculesComponents/BottomBtnSection.tsx new file mode 100644 index 00000000..83652dff --- /dev/null +++ b/src/components/common/moleculesComponents/BottomBtnSection.tsx @@ -0,0 +1,22 @@ +import { ReactNode } from 'react'; + +import styled from 'styled-components'; + +interface BottomBtnProps { + children: ReactNode; +} + +const BottomBtnSection = ({ children }: BottomBtnProps) => { + return {children}; +}; + +const ButtomBtnWrapper = styled.div` + display: flex; + justify-content: center; + width: 100%; + position: fixed; + bottom: 1.2rem; + padding: 0 2rem; + gap: 1.4rem; +`; +export default BottomBtnSection; diff --git a/src/components/common/moleculesComponents/CheckPoint.tsx b/src/components/common/moleculesComponents/CheckPoint.tsx new file mode 100644 index 00000000..fd3d0f48 --- /dev/null +++ b/src/components/common/moleculesComponents/CheckPoint.tsx @@ -0,0 +1,50 @@ +import styled from 'styled-components'; +import { theme } from 'styles/theme'; + +import Text from '../atomComponents/Text'; +/** + * 이미지, 메인텍스트, 서브텍스트로 이루어진 재사용 컴포넌트 + * @returns asap 페이지에 기본이 되는 컴포넌트 + * @param {imgURL} : image + * @param {mainText} + * @param {subText} + */ +interface CheckPointProps { + imgURL: string; + mainText: string; + subText: string; +} + +const CheckPoint = ({ imgURL, mainText, subText }: CheckPointProps) => { + return ( + <> + + + + {mainText} + + + {subText} + + + + ); +}; + +export default CheckPoint; + +const ImageSection = styled.img` + margin-top: 10.7rem; + + width: 21.3rem; + height: 19.9rem; +`; + +const TextWrapper = styled.div` + display: flex; + flex-direction: column; + gap: 2.5rem; + align-items: center; + justify-content: center; + margin-top: 2.5rem; +`; diff --git a/src/components/moleculesComponents/Header.tsx b/src/components/common/moleculesComponents/Header.tsx similarity index 82% rename from src/components/moleculesComponents/Header.tsx rename to src/components/common/moleculesComponents/Header.tsx index 0ac32bf3..2da0954d 100644 --- a/src/components/moleculesComponents/Header.tsx +++ b/src/components/common/moleculesComponents/Header.tsx @@ -1,21 +1,22 @@ import { Dispatch, SetStateAction, useState } from 'react'; -import Text from 'components/atomComponents/Text'; +import Text from 'components/common/atomComponents/Text'; import { BackIc, ExitIc, HambergerIc, LinkIc, MainLogoIc } from 'components/Icon/icon'; import { useScheduleStepContext } from 'pages/selectSchedule/contexts/useScheduleStepContext'; import { ScheduleStepType } from 'pages/selectSchedule/types'; import CopyToClipboard from 'react-copy-to-clipboard'; import { useParams } from 'react-router'; import { useNavigate } from 'react-router-dom'; -import styled from 'styled-components/macro'; +import styled from 'styled-components'; import { theme } from 'styles/theme'; -import { notify } from 'utils/toast/copyLink'; +import { notify } from 'utils/toast/copyLinkToast'; import Navigation from './Navigation'; +import Tooltip from '../../../pages/completeCreateMeeting/components/Tooltip'; interface HeaderProps { - position: string; + position?: string; setFunnelStep?: Dispatch>; setSelectScheduleStep?: Dispatch>; } @@ -24,7 +25,7 @@ function Header({ position, setFunnelStep }: HeaderProps) { const { scheduleStep, setScheduleStep } = useScheduleStepContext(); const navigationOptions = [ { - title: '약속 생성하기', + title: '회의 일정 정하기', url: '/meet/create', }, { @@ -79,11 +80,6 @@ function Header({ position, setFunnelStep }: HeaderProps) { window.history.back()}> - - - - - ) : position === 'schedule' ? ( @@ -94,7 +90,7 @@ function Header({ position, setFunnelStep }: HeaderProps) { ) : undefined} {position === 'createMeeting' ? ( - 회의정보입력 + 회의 정보 입력 ) : position === 'confirmMeet' ? ( @@ -107,16 +103,29 @@ function Header({ position, setFunnelStep }: HeaderProps) { ) : ( )} + + {(position==="completeCreateMeeting" || position==="cueCard" || position==="confirmMeet") && + + + + + + + {position==="completeCreateMeeting" && } + + } setIsNaviOpen((prev) => !prev)}> + + {isNaviOpen ? ( + setIsNaviOpen((prev) => !prev)}> - @@ -128,6 +137,14 @@ function Header({ position, setFunnelStep }: HeaderProps) { export default Header; +const LinkIcWrapper=styled.div` + position:relative; +` + +const IconWrapper= styled.div` + display:flex; + align-items: center; +` const HeaderWrapper = styled.div` width: 100%; `; @@ -153,6 +170,7 @@ const IconSection = styled.button` display: flex; align-items: center; justify-content: center; + width:4.2rem; height: 4.2rem; `; @@ -160,7 +178,7 @@ const NavigationSection = styled.section` position: absolute; top: 0; right: 0; - z-index: 1; + z-index: 2; background-color: rgba(0, 0, 0, 0.7); width: 100%; height: 100vh; diff --git a/src/components/moleculesComponents/Navigation.tsx b/src/components/common/moleculesComponents/Navigation.tsx similarity index 92% rename from src/components/moleculesComponents/Navigation.tsx rename to src/components/common/moleculesComponents/Navigation.tsx index 347387ac..c570695d 100644 --- a/src/components/moleculesComponents/Navigation.tsx +++ b/src/components/common/moleculesComponents/Navigation.tsx @@ -1,6 +1,6 @@ import React from 'react'; -import Text from 'components/atomComponents/Text'; +import Text from 'components/common/atomComponents/Text'; import { Link } from 'react-router-dom'; import { theme } from 'styles/theme'; diff --git a/src/components/moleculesComponents/TitleComponents.tsx b/src/components/common/moleculesComponents/TitleComponents.tsx similarity index 88% rename from src/components/moleculesComponents/TitleComponents.tsx rename to src/components/common/moleculesComponents/TitleComponents.tsx index 66ff3363..0de95de5 100644 --- a/src/components/moleculesComponents/TitleComponents.tsx +++ b/src/components/common/moleculesComponents/TitleComponents.tsx @@ -1,5 +1,5 @@ -import Text from 'components/atomComponents/Text'; -import styled from 'styled-components/macro'; +import Text from 'components/common/atomComponents/Text'; +import styled from 'styled-components'; import { theme } from 'styles/theme'; interface TextProps { diff --git a/src/components/timetableComponents/Timetable.tsx b/src/components/common/timetableComponents/Timetable.tsx similarity index 87% rename from src/components/timetableComponents/Timetable.tsx rename to src/components/common/timetableComponents/Timetable.tsx index aa2b904e..53dbe72a 100644 --- a/src/components/timetableComponents/Timetable.tsx +++ b/src/components/common/timetableComponents/Timetable.tsx @@ -6,20 +6,21 @@ import DateTitle from './parts/ColumnTitle'; import SlotTitle from './parts/SlotTitle'; import { ColumnStructure, DateType } from './types'; -interface TimetableProps { +export interface TimetableProps { timeSlots: string[]; availableDates: DateType[]; + slotUnit: 'HALF' | 'HOUR'; children: (props: ColumnStructure) => ReactNode; bottomItem?: ReactNode; } -function Timetable({ timeSlots, availableDates, children, bottomItem }: TimetableProps) { +function Timetable({ timeSlots, availableDates, slotUnit, children, bottomItem }: TimetableProps) { const emptyDates = Array.from({ length: 7 - availableDates.length }, (_, i) => `empty${i + 1}`); return ( <> - + @@ -44,7 +45,9 @@ export default Timetable; const TimetableWrapper = styled.div` display: flex; - gap: 0.75rem; + justify-content: center; + width: 100%; + gap: 1.1rem; `; const TableWithDateWrapper = styled.div` diff --git a/src/components/timetableComponents/parts/ColumnTitle.tsx b/src/components/common/timetableComponents/parts/ColumnTitle.tsx similarity index 92% rename from src/components/timetableComponents/parts/ColumnTitle.tsx rename to src/components/common/timetableComponents/parts/ColumnTitle.tsx index 74dd699a..ab9a700a 100644 --- a/src/components/timetableComponents/parts/ColumnTitle.tsx +++ b/src/components/common/timetableComponents/parts/ColumnTitle.tsx @@ -1,4 +1,4 @@ -import Text from 'components/atomComponents/Text'; +import Text from 'components/common/atomComponents/Text'; import styled from 'styled-components'; import { theme } from 'styles/theme'; @@ -39,7 +39,7 @@ const Date = styled.div` flex-direction: column; gap: 0.13rem; align-items: center; - width: 4.4rem; + width: 4.3rem; `; export default ColumnTitle; diff --git a/src/components/common/timetableComponents/parts/Slot.tsx b/src/components/common/timetableComponents/parts/Slot.tsx new file mode 100644 index 00000000..aefd7b72 --- /dev/null +++ b/src/components/common/timetableComponents/parts/Slot.tsx @@ -0,0 +1,47 @@ +import { ReactNode } from 'react'; + +import styled from 'styled-components'; + +interface SlotProps { + customSlotStyle?: string; + onClick?: () => void; + children?: ReactNode; +} + +function Slot({ customSlotStyle, onClick, children }: SlotProps) { + const defaultSlotStyle = ` + width: 4.3rem; + height: 2.2rem; + display: flex; + justify-content: center; + `; + + return ( + + {children} + + ); +} + +export default Slot; + +const SlotWrapper = styled.div<{ + $defaultSlotStyle: string; + $customSlotStyle?: string; +}>` + ${({ $defaultSlotStyle }) => $defaultSlotStyle}; + ${({ $customSlotStyle }) => $customSlotStyle}; +`; + +const PriorityNumber = styled.div` + display: flex; + position: relative; + top: 6px; + justify-content: center; + width: 100%; + height: 100%; +`; diff --git a/src/components/timetableComponents/parts/SlotTitle.tsx b/src/components/common/timetableComponents/parts/SlotTitle.tsx similarity index 50% rename from src/components/timetableComponents/parts/SlotTitle.tsx rename to src/components/common/timetableComponents/parts/SlotTitle.tsx index 963c63b4..d93ac8f9 100644 --- a/src/components/timetableComponents/parts/SlotTitle.tsx +++ b/src/components/common/timetableComponents/parts/SlotTitle.tsx @@ -1,27 +1,27 @@ import { Fragment } from 'react'; -import Text from 'components/atomComponents/Text'; +import Text from 'components/common/atomComponents/Text'; import styled from 'styled-components'; import { theme } from 'styles/theme'; -interface SlotTitleProps { - timeSlots: string[]; -} +import { TimetableProps } from '../Timetable'; + +type SlotTitleProps = Pick; -function SlotTitle({ timeSlots }: SlotTitleProps) { +function SlotTitle({ timeSlots, slotUnit }: SlotTitleProps) { const parsedTimeSlots = timeSlots .filter((slot) => !slot.endsWith('30')) .map((slot) => parseInt(slot.split(':')[0])); parsedTimeSlots.push(24); return ( - + {parsedTimeSlots.map((slot) => ( - + {slot} - + {''} @@ -32,9 +32,9 @@ function SlotTitle({ timeSlots }: SlotTitleProps) { export default SlotTitle; -const SlotTitleWrapper = styled.div` +const SlotTitleWrapper = styled.div<{ $slotUnit: 'HALF' | 'HOUR' }>` display: flex; flex-direction: column; - gap: 1.4rem; - margin-top: 3.3rem; + gap: ${({ $slotUnit }) => ($slotUnit === 'HALF' ? '1.4rem' : '0.4rem')}; + margin-top: 3.5rem; `; diff --git a/src/components/timetableComponents/types.ts b/src/components/common/timetableComponents/types.ts similarity index 100% rename from src/components/timetableComponents/types.ts rename to src/components/common/timetableComponents/types.ts diff --git a/src/components/timetableComponents/utils.ts b/src/components/common/timetableComponents/utils.ts similarity index 100% rename from src/components/timetableComponents/utils.ts rename to src/components/common/timetableComponents/utils.ts diff --git a/src/components/legacy/scheduleComponents/components/PriorityDropdown.tsx b/src/components/legacy/scheduleComponents/components/PriorityDropdown.tsx index 4e154fb5..c3340853 100644 --- a/src/components/legacy/scheduleComponents/components/PriorityDropdown.tsx +++ b/src/components/legacy/scheduleComponents/components/PriorityDropdown.tsx @@ -1,11 +1,11 @@ -import { useEffect, useState } from 'react'; +import { useState } from 'react'; import { scheduleAtom } from 'atoms/atom'; -import Text from 'components/atomComponents/Text'; +import Text from 'components/common/atomComponents/Text'; import { Circle1Ic, Circle2Ic, Circle3Ic, DropDownIc, DropUpIc } from 'components/Icon/icon'; import { ScheduleStates } from 'pages/legacy/selectSchedule/types/Schedule'; import { useRecoilState } from 'recoil'; -import styled from 'styled-components/macro'; +import styled from 'styled-components'; import { theme } from 'styles/theme'; function PriorityDropdown() { diff --git a/src/components/legacy/scheduleComponents/components/Row.tsx b/src/components/legacy/scheduleComponents/components/Row.tsx index fe482553..f840178c 100644 --- a/src/components/legacy/scheduleComponents/components/Row.tsx +++ b/src/components/legacy/scheduleComponents/components/Row.tsx @@ -1,4 +1,4 @@ -import Text from 'components/atomComponents/Text'; +import Text from 'components/common/atomComponents/Text'; import styled from 'styled-components'; import { theme } from 'styles/theme'; diff --git a/src/components/legacy/scheduleComponents/components/TimeTable.tsx b/src/components/legacy/scheduleComponents/components/TimeTable.tsx index 591775d0..3c817a87 100644 --- a/src/components/legacy/scheduleComponents/components/TimeTable.tsx +++ b/src/components/legacy/scheduleComponents/components/TimeTable.tsx @@ -2,7 +2,7 @@ import { PreferTime, SelectedSchedule } from '../types/AvailableScheduleType'; import { DateStates } from 'pages/legacy/selectSchedule/types/Schedule'; import Row from './Row'; -import Text from 'components/atomComponents/Text'; +import Text from 'components/common/atomComponents/Text'; import getTimeSlots from '../utils/getTimeSlots'; import { styled } from 'styled-components'; import { theme } from 'styles/theme'; diff --git a/src/components/timetableComponents/parts/Slot.tsx b/src/components/timetableComponents/parts/Slot.tsx deleted file mode 100644 index 355fd68a..00000000 --- a/src/components/timetableComponents/parts/Slot.tsx +++ /dev/null @@ -1,36 +0,0 @@ -import { ReactNode } from 'react'; -import styled from 'styled-components'; - -interface SlotProps { - slotId: string; - slotStyle?: string; - onClick?: () => void; - children?: ReactNode; -} - -function Slot({ slotId, slotStyle, onClick, children }: SlotProps) { - const borderStyle = slotId.endsWith(':30') ? 'dashed' : 'solid'; - - return ( - - {children} - - ); -} - -export default Slot; - -const DefaultSlot = styled.div<{ - $borderStyle: string; - $slotStyle?: string; -}>` - border-top: 1px solid ${({ theme }) => theme.colors.grey7}; - border-top-style: ${({ $borderStyle }) => $borderStyle}; - ${({ $slotStyle }) => $slotStyle}; - - width: 4.4rem; - height: 2.2rem; - - display: flex; - justify-content: center; -`; diff --git a/src/pages/ComponentTesting.tsx b/src/pages/ComponentTesting.tsx index 666cb12a..ffaeb68e 100644 --- a/src/pages/ComponentTesting.tsx +++ b/src/pages/ComponentTesting.tsx @@ -1,5 +1,5 @@ -import Button from 'components/atomComponents/Button'; -import Text from 'components/atomComponents/Text'; +import Button from 'components/common/atomComponents/Button'; +import Text from 'components/common/atomComponents/Text'; import { BackIc, ClockIc, @@ -21,7 +21,7 @@ import { RadioCheckedIc, TimeIc, } from 'components/Icon/icon'; -import styled from 'styled-components/macro'; +import styled from 'styled-components'; import { theme } from 'styles/theme'; const buttonType: string[] = [ diff --git a/src/pages/bestMeetTime/ChooseBestTime.tsx b/src/pages/bestMeetTime/ChooseBestTime.tsx index 4dbe60d4..8a456ff2 100644 --- a/src/pages/bestMeetTime/ChooseBestTime.tsx +++ b/src/pages/bestMeetTime/ChooseBestTime.tsx @@ -1,6 +1,6 @@ -import React, { useState } from 'react'; +import { useState } from 'react'; -import Header from 'components/moleculesComponents/Header'; +import Header from 'components/common/moleculesComponents/Header'; import BestMeetTime from 'pages/bestMeetTime/components/BestMeetTime'; import OverallSchedule from 'pages/overallSchedule/OverallSchedule'; import { styled } from 'styled-components'; @@ -38,31 +38,44 @@ const ViewPickerWrapper = styled.div` `; const ChangeViewPicker = styled.div<{ $isClicked: boolean }>` + cursor: pointer; display: flex; justify-content: center; margin-top: 2.5rem; ${({ theme }) => theme.fonts.body2}; border-bottom: 2px solid; + border-color: ${({ $isClicked, theme, id }) => + id === 'best' + ? $isClicked + ? theme.colors.main1 + : theme.colors.grey5 + : $isClicked + ? theme.colors.grey5 + : theme.colors.main1}; width: 18.7rem; height: 3.5rem; color: ${({ $isClicked, theme, id }) => id === 'best' ? $isClicked - ? theme.colors.main1 - : theme.colors.grey4 + ? theme.colors.white + : theme.colors.grey5 : $isClicked - ? theme.colors.grey4 - : theme.colors.main1}; + ? theme.colors.grey5 + : theme.colors.white}; ${({ $isClicked, theme, id }) => id === 'best' ? $isClicked - ? theme.colors.main1 + ? theme.colors.white : theme.colors.grey4 : $isClicked ? theme.colors.grey4 - : theme.colors.main1}; + : theme.colors.white}; `; const ViewContainer = styled.div` display: flex; align-items: center; + justify-content: center; + width: 100%; + margin-top: 3.6rem; + margin-bottom: 16.4rem; `; diff --git a/src/pages/bestMeetTime/components/AlternativeCard.tsx b/src/pages/bestMeetTime/components/AlternativeCard.tsx deleted file mode 100644 index 34da3255..00000000 --- a/src/pages/bestMeetTime/components/AlternativeCard.tsx +++ /dev/null @@ -1,95 +0,0 @@ -import Text from 'components/atomComponents/Text'; -import { BestDataProps } from 'pages/bestMeetTime/types/meetCardData'; -import styled from 'styled-components/macro'; -import { theme } from 'styles/theme'; - -function AlternativeCard({ rank, carddata, chooseMeetime, selected }: BestDataProps) { - const checkingCheck = () => { - chooseMeetime(rank); - }; - - if (carddata) { - return ( - - - - - - - {carddata.users.map((member, i) => ( - - {member.name} - {i !== carddata.users.length - 1 ? ',' : ''}  - - ))} - - - - ); - } else { - return null; - } -} - -export default AlternativeCard; - -const AlternativeCardWrapper = styled.article<{ $rank: number; $selected: number }>` - display: flex; - position: relative; - flex-direction: row; - border: 1px solid - ${({ $rank, $selected, theme }) => - $rank === $selected ? theme.colors.main1 : theme.colors.grey5}; - border-radius: 10px; - padding: 2rem; - height: fit-content; -`; - -const InfoContainer = styled.div` - display: flex; - flex-direction: column; - color: ${({ theme }) => theme.colors.white}; -`; -const Input = styled.input` - appearance: none; - margin: 0 2.274rem 0 0; - background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='10' cy='10' r='9' stroke='%23D9D9D9' stroke-width='2'/%3E%3C/svg%3E%0A"); - background-repeat: no-repeat; - cursor: pointer; - width: 2rem; - height: 2rem; - - &:checked { - background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='10' cy='10' r='10' fill='%233C49FF'/%3E%3Ccircle cx='9.99965' cy='10.0001' r='3.63636' fill='white'/%3E%3C/svg%3E "); - } - &:checked + label { - color: ${({ theme }) => theme.colors.white}; - } -`; -const Label = styled.label` - display: flex; - flex-direction: column; - align-items: flex-start; - cursor: pointer; -`; - -const MemeberContainer = styled.div` - display: flex; - flex-direction: row; - flex-wrap: wrap; - margin-top: 1.2rem; - width: 23rem; - height: fit-content; -`; diff --git a/src/pages/bestMeetTime/components/BestMeetTime.tsx b/src/pages/bestMeetTime/components/BestMeetTime.tsx index 95ec15a9..d30a127b 100644 --- a/src/pages/bestMeetTime/components/BestMeetTime.tsx +++ b/src/pages/bestMeetTime/components/BestMeetTime.tsx @@ -1,9 +1,9 @@ -import React, { useState } from 'react'; +import { useState } from 'react'; -import Button from 'components/atomComponents/Button'; -import Text from 'components/atomComponents/Text'; -import { DropdownWhite, DropupWhite } from 'components/Icon/icon'; -import AlternativeCard from 'pages/bestMeetTime/components/AlternativeCard'; +import Button from 'components/common/atomComponents/Button'; +import Text from 'components/common/atomComponents/Text'; +import BottomBtnSection from 'components/common/moleculesComponents/BottomBtnSection'; +import { DropDown, DropUp } from 'components/Icon/icon'; import BestTimeCard from 'pages/bestMeetTime/components/BestTimeCard'; import ConfirmModal from 'pages/bestMeetTime/components/ConfirmModal'; import GetBestMeetimeListHooks from 'pages/bestMeetTime/hooks/getBestMeetimeList'; @@ -11,51 +11,60 @@ import { whatisBestMeetime } from 'pages/bestMeetTime/utils/whatisBestMeetime'; import LoadingPage from 'pages/errorLoading/LoadingPage'; import { useParams } from 'react-router'; import { useNavigate } from 'react-router-dom'; -import styled from 'styled-components/macro'; +import styled from 'styled-components'; import { theme } from 'styles/theme'; import BlankMeetCard from './BlankMeetCard'; +import BlankOtherMeetCard from './BlankOtherMeetCard'; function BestMeetTime() { const [isalternativeCardOpen, setIsalternativeCardOpen] = useState(false); const [selected, setSelected] = useState(0); const [showModal, setShowModal] = useState(false); const { meetingId } = useParams(); - const { isloading, bestTimeData, isError } = GetBestMeetimeListHooks( + const { isLoading, bestTimeData, isError } = GetBestMeetimeListHooks( (meetingId as unknown) as string, ); const navigate = useNavigate(); if (isError) { navigate(`/*`); - } else if (!isloading && bestTimeData) { - const bestMeetimeObj = whatisBestMeetime(bestTimeData, selected); - if (bestMeetimeObj) { - return ( - - - - - - 현재까지 모인  - - - {bestTimeData.data.memberCount} - - - 명 - - - 을 위한 - - - - 최적의 회의시간이에요 - - - - 박스를 클릭하여 회의시간을 확정해주세요 + } + if (isLoading) { + return ( + + + + ); + } + const bestMeetimeObj = bestTimeData && whatisBestMeetime(bestTimeData, selected); + return ( + + + + + + 현재까지 모인  + + + {bestTimeData ? bestTimeData.data.memberCount : ''} + + + 명 + + + 을 위한 - + + + 최적의 회의시간이에요 + + + + 박스를 클릭하여 회의시간을 확정해주세요 + + + {bestMeetimeObj ? ( + <> {bestTimeData.data.bestDateTime ? ( ) : null} - - setIsalternativeCardOpen((prev) => !prev)}> - - 다른 시간대 확인하기 - - - {isalternativeCardOpen ? : } - - - {isalternativeCardOpen ? ( - - {bestTimeData.data.otherDateTimes[0] ? ( - - ) : ( - - )} - {bestTimeData.data.otherDateTimes[1] ? ( - - ) : null} - + + ) : ( + + )} + setIsalternativeCardOpen((prev) => !prev)}> + + 다른 시간대 확인하기 + + {isalternativeCardOpen ? : } + + {isalternativeCardOpen && bestTimeData ? ( + + {bestTimeData.data.otherDateTimes[0] ? ( + ) : ( - undefined + )} - - - - {showModal && ( - - )} - - ); - } - } else { - return ( - - - - ); - } + ) : null} + + ) : null} + + + + {showModal && + bestMeetimeObj && ( + + )} + + ); } export default BestMeetTime; const LoadingWrapper = styled.div` + display: flex; + justify-content: center; position: relative; top: 25rem; width: 100%; `; const BestMeetTimeWrapper = styled.div<{ $state: boolean }>` + display: flex; + flex-direction: column; width: 100%; + align-items: center; `; const TitleSection = styled.article` display: flex; flex-direction: column; - margin: 4rem 10.8rem 3rem 0rem; + width: 100%; + margin-bottom: 3.6rem; `; const HeaderContainer = styled.div` margin-bottom: 1.2rem; @@ -151,11 +158,13 @@ const AnotherTimeBtnSection = styled.div` justify-content: flex-end; margin: 2rem 0 1.6rem 0; padding-right: 1rem; + cursor: pointer; `; const AlternativeSection = styled.section` display: flex; flex-direction: column; - gap: 1rem; + gap: 1.6rem; + width: 100%; `; const BasicIconContainer = styled.div` display: flex; @@ -166,7 +175,9 @@ const BasicIconContainer = styled.div` height: 3rem; `; const BtnWrapper = styled.div` + display: flex; + justify-content: center; + width: 100%; position: fixed; bottom: 1.2rem; - border-radius: 50%; `; diff --git a/src/pages/bestMeetTime/components/BestTimeCard.tsx b/src/pages/bestMeetTime/components/BestTimeCard.tsx index 1c90be22..d9cae088 100644 --- a/src/pages/bestMeetTime/components/BestTimeCard.tsx +++ b/src/pages/bestMeetTime/components/BestTimeCard.tsx @@ -1,22 +1,18 @@ -import React, { useState } from 'react'; - -import Text from 'components/atomComponents/Text'; -import { DropdownWhite, DropupWhite } from 'components/Icon/icon'; +import Text from 'components/common/atomComponents/Text'; +import { Member } from 'components/Icon/icon'; import { BestDataProps } from 'pages/bestMeetTime/types/meetCardData'; -import styled from 'styled-components/macro'; +import styled from 'styled-components'; import { theme } from 'styles/theme'; +import MemberTooltip from './MemberTooltip'; + function BestTimeCard({ rank, carddata, chooseMeetime, selected }: BestDataProps) { - const [isMember, setIsMember] = useState(false); const checkingCheck = () => { chooseMeetime(rank); }; if (carddata) { return ( - setIsMember((prev) => !prev)}> - {isMember ? : } - - {isMember ? ( - - {carddata.users.map((member, i) => ( - - {member.name} - {i !== carddata.users.length - 1 ? ',' : ''}  - - ))} - - ) : ( - undefined - )} + + + + {carddata.users.length} + + + user.name)} /> ); - } else { - return undefined; } } @@ -58,11 +47,12 @@ const BestTimeCardWrapper = styled.article<{ $rank: number; $selected: number }> display: flex; position: relative; flex-direction: row; + align-items: center; border: 1px solid ${({ $rank, $selected, theme }) => - $rank === $selected ? theme.colors.main1 : theme.colors.grey5}; + $rank === $selected ? theme.colors.main1 : theme.colors.grey7}; border-radius: 10px; - padding: 2rem; + padding: 1.8rem 1.5rem; width: 100%; height: fit-content; `; @@ -74,7 +64,7 @@ const InfoContainer = styled.div` const Input = styled.input` appearance: none; margin: 0 2.274rem 0 0; - background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='10' cy='10' r='9' stroke='%23D9D9D9' stroke-width='2'/%3E%3C/svg%3E%0A"); + background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='10' cy='10' r='9' stroke='%23555555' stroke-width='2'/%3E%3C/svg%3E%0A"); background-repeat: no-repeat; cursor: pointer; width: 2rem; @@ -94,25 +84,27 @@ const Label = styled.label` cursor: pointer; `; -const MemeberContainer = styled.div` - display: flex; - flex-direction: row; - flex-wrap: wrap; - margin-top: 1.2rem; - width: 23rem; - height: fit-content; -`; - -const BasicIconContainer = styled.div` +const MemberCountChip = styled.div` display: flex; - align-items: center; justify-content: center; - width: 3rem; + align-items: center; + min-width: 5.6rem; height: 3rem; -`; + padding: 0.6rem 1rem; + gap: 0.6rem; + border-radius: 10rem; + background-color: ${theme.colors.grey8}; + align-self: flex-end; + margin-left: auto; + cursor: pointer; + &:hover { + background-color: ${theme.colors.grey5}; + } + &:focus { + background-color: ${theme.colors.grey6}; + } -const IconContainer = styled(BasicIconContainer)` - position: absolute; - top: 1.2rem; - right: 1.2rem; + &:hover + .tooltip { + visibility: visible; + } `; diff --git a/src/pages/bestMeetTime/components/BlankMeetCard.tsx b/src/pages/bestMeetTime/components/BlankMeetCard.tsx index a2629bc7..d354c9f2 100644 --- a/src/pages/bestMeetTime/components/BlankMeetCard.tsx +++ b/src/pages/bestMeetTime/components/BlankMeetCard.tsx @@ -1,14 +1,12 @@ -import React from 'react'; - -import Text from 'components/atomComponents/Text'; -import styled from 'styled-components/macro'; +import Text from 'components/common/atomComponents/Text'; +import styled from 'styled-components'; import { theme } from 'styles/theme'; function BlankMeetCard() { return ( - - 입력된 다른 시간대가 없어요! + + 산출된 회의 시간이 없어요! ); @@ -17,11 +15,11 @@ function BlankMeetCard() { export default BlankMeetCard; const BlankMeetCardWrapper = styled.div` + width: 100%; display: flex; align-items: center; justify-content: center; - border: 1px solid ${({ theme }) => theme.colors.grey5}; + border: 1px solid ${({ theme }) => theme.colors.grey7}; border-radius: 1rem; - width: 33.5rem; - height: 5.2rem; + padding: 3.4rem 0; `; diff --git a/src/pages/bestMeetTime/components/BlankOtherMeetCard.tsx b/src/pages/bestMeetTime/components/BlankOtherMeetCard.tsx new file mode 100644 index 00000000..efe46c45 --- /dev/null +++ b/src/pages/bestMeetTime/components/BlankOtherMeetCard.tsx @@ -0,0 +1,24 @@ +import Text from 'components/common/atomComponents/Text'; +import styled from 'styled-components'; +import { theme } from 'styles/theme'; + +function BlankOtherMeetCard() { + return ( + + + 산출된 회의 시간이 없어요! + + + ); +} + +export default BlankOtherMeetCard; + +const BlankOtherMeetCardWrapper = styled.div` + display: flex; + align-items: center; + justify-content: center; + border: 1px solid ${({ theme }) => theme.colors.grey7}; + border-radius: 1rem; + padding: 1.8rem 0; +`; diff --git a/src/pages/bestMeetTime/components/ConfirmModal.tsx b/src/pages/bestMeetTime/components/ConfirmModal.tsx index a13ea969..cba9684c 100644 --- a/src/pages/bestMeetTime/components/ConfirmModal.tsx +++ b/src/pages/bestMeetTime/components/ConfirmModal.tsx @@ -1,11 +1,11 @@ import React, { Dispatch, SetStateAction, useState } from 'react'; -import Text from 'components/atomComponents/Text'; +import Text from 'components/common/atomComponents/Text'; import { ExitIc } from 'components/Icon/icon'; import { BestMeetFinished } from 'pages/bestMeetTime/types/meetCardData'; import LoadingPage from 'pages/errorLoading/LoadingPage'; import { useNavigate, useParams } from 'react-router-dom'; -import styled from 'styled-components/macro'; +import styled from 'styled-components'; import { theme } from 'styles/theme'; import { authClient } from 'utils/apis/axios'; diff --git a/src/pages/bestMeetTime/components/MemberTooltip.tsx b/src/pages/bestMeetTime/components/MemberTooltip.tsx new file mode 100644 index 00000000..f1fa0728 --- /dev/null +++ b/src/pages/bestMeetTime/components/MemberTooltip.tsx @@ -0,0 +1,55 @@ +import Text from 'components/common/atomComponents/Text'; +import { TooltipArrowIc } from 'components/Icon/icon'; +import styled from 'styled-components'; +import { theme } from 'styles/theme'; + +interface MemberTooltipProps { + members: string[]; +} + +function MemberTooltip({ members }: MemberTooltipProps) { + return ( + + + + + {members.join(', ')} + + + + ); +} + +export default MemberTooltip; +const MemberTooltipWrapper = styled.div` + visibility: hidden; + z-index: 1; + position: absolute; + width: fit-content; + right: 4%; + top: 90%; +`; + +const TooltipArrowIcon = styled(TooltipArrowIc)` + position: absolute; + top: -0.6rem; + right: 1.3rem; + + path { + fill: ${({ theme }) => theme.colors.grey3}; + } +`; +const TooltipContent = styled.div` + display: flex; + justify-content: center; + align-items: center; + padding: 0.4rem 0.8rem; + border-radius: 0.6rem; + background-color: ${theme.colors.grey3}; + width: fit-content; + text-align: center; + span { + white-space: pre; + word-break: unset; + } +`; diff --git a/src/pages/bestMeetTime/hooks/getBestMeetimeList.ts b/src/pages/bestMeetTime/hooks/getBestMeetimeList.ts index 1ab9c09b..2fbec504 100644 --- a/src/pages/bestMeetTime/hooks/getBestMeetimeList.ts +++ b/src/pages/bestMeetTime/hooks/getBestMeetimeList.ts @@ -6,7 +6,7 @@ import { DateTimeData } from '../types/meetCardData'; const GetBestMeetimeListHooks = (meetingId: string) => { const [isError, setIsError] = useState(false); - const [isloading, setIsloading] = useState(true); + const [isLoading, setIsloading] = useState(true); const [bestTimeData, setBestTimeData] = useState(); const getBestMeetimeList = async () => { @@ -27,7 +27,7 @@ const GetBestMeetimeListHooks = (meetingId: string) => { }, [meetingId], ); - return { isloading, bestTimeData, isError }; + return { isLoading, bestTimeData, isError }; }; export default GetBestMeetimeListHooks; diff --git a/src/pages/completeCreateMeeting/CompleteCreateMeeting.tsx b/src/pages/completeCreateMeeting/CompleteCreateMeeting.tsx new file mode 100644 index 00000000..2b7a3c36 --- /dev/null +++ b/src/pages/completeCreateMeeting/CompleteCreateMeeting.tsx @@ -0,0 +1,47 @@ +import stepingCheck from 'assets/images/steppingCheck.png'; +import Button from 'components/common/atomComponents/Button'; +import Text from 'components/common/atomComponents/Text'; +import BottomBtnSection from 'components/common/moleculesComponents/BottomBtnSection'; +import CheckPoint from 'components/common/moleculesComponents/CheckPoint'; +import Header from 'components/common/moleculesComponents/Header'; +import { useNavigate, useParams } from 'react-router-dom'; +import styled from 'styled-components'; + +import CreateMeetingBottomSheet from './components/CreateMeetingBottomSheet'; + +const CompleteCreateMeeting = () => { + const { meetingId } = useParams(); + + const navigate = useNavigate(); + const navigateSelectSchedule = () => { + navigate(`/host/select/${meetingId}`); + }; + + return ( + +
+ + + + + + + ); +}; + +export default CompleteCreateMeeting; + +const CompleteCreateMeetingWrapper = styled.div` + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + width: 100%; + height: 100%; +`; diff --git a/src/pages/completeCreateMeeting/components/CreateMeetingBottomSheet.tsx b/src/pages/completeCreateMeeting/components/CreateMeetingBottomSheet.tsx new file mode 100644 index 00000000..39fbd13e --- /dev/null +++ b/src/pages/completeCreateMeeting/components/CreateMeetingBottomSheet.tsx @@ -0,0 +1,49 @@ +import { useEffect } from 'react'; + +import Button from 'components/common/atomComponents/Button'; +import Text from 'components/common/atomComponents/Text'; +import BottomSheet from 'components/common/BottomSheet/BottomSheet'; +import useModalState from 'components/common/Modal/hooks/useModalState'; +import CopyToClipboard from 'react-copy-to-clipboard'; +import { useParams } from 'react-router-dom'; +import styled from 'styled-components'; +import { theme } from 'styles/theme'; + +function CreateMeetingBottomSheet() { + const { meetingId } = useParams(); + + const {isOpen, onOpen, onClose}= useModalState(false); + + useEffect(()=>{ + onOpen(); + },[]) + + return ( + <> + + + 회의방 링크가 생성되었어요! + 링크를 복사하여 팀원에게 공유해주세요 + + + + + + + + ) +} + +export default CreateMeetingBottomSheet; + +const BottomSheetDescription = styled.div` + display: flex; + flex-direction: column; + gap: 0.8rem; + margin-bottom: 2.4rem; + padding-left: 0.9rem; +`; \ No newline at end of file diff --git a/src/pages/completeCreateMeeting/components/Tooltip.tsx b/src/pages/completeCreateMeeting/components/Tooltip.tsx new file mode 100644 index 00000000..2aa68f66 --- /dev/null +++ b/src/pages/completeCreateMeeting/components/Tooltip.tsx @@ -0,0 +1,50 @@ +import { TooltipArrowIc } from 'components/Icon/icon'; +import styled from 'styled-components'; +import { theme } from 'styles/theme'; + +import Text from '../../../components/common/atomComponents/Text'; + +interface TooltipPropTypes { + tooltipText: string; +} +const Tooltip = ({ tooltipText }: TooltipPropTypes) => { + return ( + + + + + {tooltipText} + + + + ); +}; + +const TooltipWrapper = styled.div` + cursor: default; + position: absolute; + + top: 6rem; + width: 8.1rem; + height: 2.8rem; + left: 50%; + transform: translate(-50%, -50%); +`; +const TooltioArrowIcon = styled(TooltipArrowIc)` + position: absolute; + left: 50%; + transform: translate(-50%, -50%); +`; + +const ToolTipTextWrapper = styled.div` + position: absolute; + display: flex; + justify-content: center; + align-items: center; + width: 8.1rem; + height: 2.8rem; + + border-radius: 6px; + background-color: ${({ theme }) => theme.colors.grey9}; +`; +export default Tooltip; diff --git a/src/pages/createMeeting/CreateMeeting.tsx b/src/pages/createMeeting/CreateMeeting.tsx index aad025b3..d56813ec 100644 --- a/src/pages/createMeeting/CreateMeeting.tsx +++ b/src/pages/createMeeting/CreateMeeting.tsx @@ -1,9 +1,10 @@ -import { useState } from 'react'; +import { useEffect, useState } from 'react'; -import Header from 'components/moleculesComponents/Header'; +import Header from 'components/common/moleculesComponents/Header'; import ReturnBodyComponent from 'pages/createMeeting/components/ReturnBodyComponent'; import ReturnTitleComponent from 'pages/createMeeting/components/ReturnTitleComponent'; -import styled from 'styled-components/macro'; +import { useLocation, useNavigate } from 'react-router-dom'; +import styled from 'styled-components'; import { funnelStep } from './data/meetingInfoData'; import { MeetingInfo } from './types/useFunnelInterface'; @@ -23,17 +24,49 @@ function CreateMeeting() { const [step, setStep] = useState(0); const [meetingInfo, setMeetingInfo] = useState(initialMeetingInfo); const currentStep = funnelStep[step]; + const location = useLocation(); + const navigate = useNavigate(); + + useEffect( + () => { + const goBackFunnel = () => { + setStep((prev) => { + if (prev === 0) { + navigate('/'); + return prev; + } else { + return prev - 1; + } + }); + }; + + window.addEventListener('popstate', goBackFunnel); + + return () => { + window.removeEventListener('popstate', goBackFunnel); + }; + }, + [setStep, navigate], + ); + + const setStepRouter = () => { + navigate(`${location.pathname}?step=${funnelStep[step + 1]}`); + setStep((prev) => prev + 1); + }; return ( <>
+ + + @@ -42,6 +75,18 @@ function CreateMeeting() { export default CreateMeeting; +const StepBar = styled.div<{ step: number }>` + width: ${({ step }) => `calc(100%* ${step}/6)`}; + height: 0.3rem; + background-color: ${({ theme }) => theme.colors.main1}; + transition: width 0.3s; +`; +const ProgressBar = styled.div` + margin-top: 0.8rem; + width: 100%; + height: 0.3rem; + background-color: ${({ theme }) => theme.colors.grey6}; +`; const CreateMeetingWrapper = styled.div` display: flex; flex-direction: column; diff --git a/src/pages/createMeeting/components/ReturnBodyComponent.tsx b/src/pages/createMeeting/components/ReturnBodyComponent.tsx index bd4b1784..2fa4992f 100644 --- a/src/pages/createMeeting/components/ReturnBodyComponent.tsx +++ b/src/pages/createMeeting/components/ReturnBodyComponent.tsx @@ -1,6 +1,6 @@ import React, { Dispatch, SetStateAction } from 'react'; -import styled from 'styled-components/macro'; +import styled from 'styled-components'; import SetAdditionalInfo from './useFunnel/SetAdditionalInfo'; import SetDates from './useFunnel/SetDates'; @@ -8,6 +8,7 @@ import SetDuration from './useFunnel/SetDuration'; import SetHostInfo from './useFunnel/SetHostInfo'; import SetPlace from './useFunnel/SetPlace'; import SetTitle from './useFunnel/SetTitle'; + import { MeetingInfo } from '../types/useFunnelInterface'; interface BodyProps { diff --git a/src/pages/createMeeting/components/ReturnTitleComponent.tsx b/src/pages/createMeeting/components/ReturnTitleComponent.tsx index 1e791cb5..bcdcbeb7 100644 --- a/src/pages/createMeeting/components/ReturnTitleComponent.tsx +++ b/src/pages/createMeeting/components/ReturnTitleComponent.tsx @@ -1,4 +1,4 @@ -import TitleComponents from 'components/moleculesComponents/TitleComponents'; +import TitleComponents from 'components/common/moleculesComponents/TitleComponents'; interface FunnelSteps { [key: string]: { @@ -25,7 +25,7 @@ const funnelSteps: FunnelSteps = { }, hostInfo: { main: '방장 정보를 입력해주세요', - sub: '관리자 페이지에 접속할 때 필요해요', + sub: '방장 페이지에 접속할 때 필요해요', }, additionalInfo: { main: '더 알리고 싶은 내용이 있나요?', diff --git a/src/pages/createMeeting/components/useFunnel/SetAdditionalInfo.tsx b/src/pages/createMeeting/components/useFunnel/SetAdditionalInfo.tsx index b980cd42..35e5eae4 100644 --- a/src/pages/createMeeting/components/useFunnel/SetAdditionalInfo.tsx +++ b/src/pages/createMeeting/components/useFunnel/SetAdditionalInfo.tsx @@ -1,16 +1,23 @@ import React from 'react'; import { isAxiosError } from 'axios'; -import Button from 'components/atomComponents/Button'; -import Text from 'components/atomComponents/Text'; -import TextAreaInput from 'components/atomComponents/TextAreaInput'; +import Button from 'components/common/atomComponents/Button'; +import Text from 'components/common/atomComponents/Text'; +import TextAreaInput from 'components/common/atomComponents/TextAreaInput'; +import BottomSheet from 'components/common/BottomSheet/BottomSheet'; +import useModalState from 'components/common/Modal/hooks/useModalState'; +import BottomBtnSection from 'components/common/moleculesComponents/BottomBtnSection'; +import { durationType, placeType, weekDayType } from 'pages/createMeeting/data/meetingInfoData'; import { FunnelProps, MeetingInfo } from 'pages/createMeeting/types/useFunnelInterface'; import { useNavigate } from 'react-router-dom'; -import styled from 'styled-components/macro'; +import styled from 'styled-components'; +import { theme } from 'styles/theme'; import { createMeetingApi } from 'utils/apis/legacy/createMeetingApi'; function SetAdditionalInfo({ meetingInfo, setMeetingInfo }: FunnelProps) { const navigate = useNavigate(); + const { isOpen, onOpen, onClose } = useModalState(false); + const textAreaOnChange = (e: React.ChangeEvent) => { if (e.target.value.length < 51) { setMeetingInfo((prev: MeetingInfo) => { @@ -24,11 +31,7 @@ function SetAdditionalInfo({ meetingInfo, setMeetingInfo }: FunnelProps) { data: { data }, } = await createMeetingApi(meetingInfo); localStorage.setItem('hostToken', data.accessToken); - navigate('/meet/complete', { - state: { - meetingId: data.url, - }, - }); + navigate(`/meet/complete/${data.url}`); } catch (err) { if (isAxiosError(err) && err.response) { if (err.response.status === (400 || 500)) { @@ -41,35 +44,206 @@ function SetAdditionalInfo({ meetingInfo, setMeetingInfo }: FunnelProps) { } }; + const formatDate = (dateString: string) => { + const [, month, day, dayOfWeek] = dateString.split('/'); + const formattedMonth = parseInt(month, 10); + const formattedDay = parseInt(day, 10); + return `${formattedMonth}/${formattedDay} (${weekDayType[dayOfWeek]})`; + }; + + const parseAvailableDates = (availableDates: string[]) => { + const sortedDates = availableDates.sort(); + const [firstDate, lastDate] = [sortedDates[0], sortedDates[sortedDates.length - 1]]; + + return `${formatDate(firstDate)} ~ ${formatDate(lastDate)}`; + }; + return ( - - - - + + + + + + 회의방을 생성하시겠어요? + + + 입력한 회의 정보가 맞는지 확인해주세요 + + + + + + {meetingInfo.title} + + + + + + {placeType[meetingInfo.place]} + + + + + + {parseAvailableDates(meetingInfo.availableDates)} + + + + + + {durationType.find((item) => item.enum === meetingInfo.duration)?.time || ''} + + + + + + + + {'방장'.padEnd(5, 'ㅤ')} + {meetingInfo.name} + + + {'비밀번호'.padEnd(5, 'ㅤ')} + {meetingInfo.password} + + + + + + - - + + ); } export default SetAdditionalInfo; const SetAdditionalInfoWrapper = styled.div` +width:100%; display: flex; align-items: center; justify-content: center; `; -const StyledBtnWrapper = styled.section` - position: fixed; - bottom: 1.2rem; - border-radius: 50%; +const BottomSheetDescription = styled.div` + display: flex; + flex-direction: column; + gap: 0.8rem; + margin-bottom: 2.4rem; `; + +const BottomSheetContents = styled.div` +display:flex; +flex-direction:column; +gap:1.2rem; + margin-bottom:28px; + ` + +const MeetingInfoWrapper = styled.div` + width: 100%; + display: flex; + flex-direction: column; + gap: 1.2rem; + padding: 1.8rem 2.4rem; + background-color:${theme.colors.grey7}; + border-radius:0.8rem; + justify-content: center; + +`; + +const MeetingInfoDetail = styled.ul` + display: flex; + flex-direction: column; + gap: 4px; + justify-content: center; + padding:0; +`; + +const MeetingInfoLine = styled.li` + display: flex; + align-items: center; + gap: 0.8rem; +`; + +const HostInfoDetail = styled.ul` +display:flex; +flex-direction:column; +gap:4px; +justify-content:center; +padding:0; +` + +const HostInfoLine = styled.li` + display: flex; + align-items: center; + gap: 0.8rem; +` + +const PlaceIcon = () => { + return ( + + + + ); +}; + +const DateIcon = () => { + return ( + + + + + + ); +}; + +const TimeIcon = () => { + return ( + + + + ); +}; diff --git a/src/pages/createMeeting/components/useFunnel/SetDates.css b/src/pages/createMeeting/components/useFunnel/SetDates.css index 5765289d..dba47b97 100644 --- a/src/pages/createMeeting/components/useFunnel/SetDates.css +++ b/src/pages/createMeeting/components/useFunnel/SetDates.css @@ -29,7 +29,7 @@ } .rmdp-calendar { - width: 36rem; + width: 100%; height: 37.9rem; } @@ -38,12 +38,12 @@ } .rmdp-day-picker > div { - width: 36rem; + width: 100%; } .rmdp-day-picker > div > div:first-child { margin-bottom: 0.7rem; - border-bottom: 0.5px solid white; + /* border-bottom: 0.5px solid white; */ } /* .rmdp-week { @@ -154,10 +154,10 @@ pointer-events: none !important; } .rmdp-day { - width: 4rem; - height: 4rem; + width: 5rem; + height: 5rem; /*날짜*/ - padding: 2.5rem 2.5rem; + padding: 2.7rem 2.7rem; } .rmdp-day span { font-weight: 400; @@ -173,7 +173,7 @@ .rmdp-week-day { /*요일*/ - width: 4rem; + width: 5.4rem !important; height: 4rem; padding: 0 0.4rem; } @@ -197,3 +197,7 @@ .rmdp-day.rmdp-disabled.rmdp-deactive { color: var(--rmdp-grey10) !important; } + +.rmdp-header-values.rmdp-header-values span { + padding: 0px; +} diff --git a/src/pages/createMeeting/components/useFunnel/SetDates.tsx b/src/pages/createMeeting/components/useFunnel/SetDates.tsx index 25cee7fe..fa408993 100644 --- a/src/pages/createMeeting/components/useFunnel/SetDates.tsx +++ b/src/pages/createMeeting/components/useFunnel/SetDates.tsx @@ -3,12 +3,13 @@ import './SetDates.css'; import { methodStateAtom } from 'atoms/atom'; -import Button from 'components/atomComponents/Button'; -import Text from 'components/atomComponents/Text'; +import Button from 'components/common/atomComponents/Button'; +import Text from 'components/common/atomComponents/Text'; +import BottomBtnSection from 'components/common/moleculesComponents/BottomBtnSection'; import { FunnelProps, MeetingInfo } from 'pages/createMeeting/types/useFunnelInterface'; import { Calendar, DateObject, getAllDatesInRange } from 'react-multi-date-picker'; import { useRecoilState } from 'recoil'; -import styled from 'styled-components/macro'; +import styled from 'styled-components'; const months = [ '1월', @@ -27,7 +28,6 @@ const months = [ const weekDays = ['일', '월', '화', '수', '목', '금', '토']; const dateRangeFormat = 'YYYY/MM/DD/ddd'; function SetDates({ meetingInfo, setMeetingInfo, setStep }: FunnelProps) { - // const [multiple, setMultiple] = useState(false); const [multiple, setMultiple] = useRecoilState(methodStateAtom); return ( @@ -76,6 +76,8 @@ function SetDates({ meetingInfo, setMeetingInfo, setStep }: FunnelProps) { shadow={false} showOtherDays weekDays={weekDays} + headerOrder={['LEFT_BUTTON', 'YEAR_MONTH', 'RIGHT_BUTTON']} + monthYearSeparator={'년 '} className="bg-dark" range={!multiple} multiple={multiple} @@ -117,7 +119,7 @@ function SetDates({ meetingInfo, setMeetingInfo, setStep }: FunnelProps) { /> - + - + ); } @@ -155,18 +157,15 @@ const SetDatesWrapper = styled.div` display: flex; align-items: center; justify-content: center; + width: 100%; `; -const StyledBtnSection = styled.section` - position: fixed; - bottom: 1.2rem; - z-index: 3; -`; const DateSelectorWrapper = styled.div` display: flex; flex-direction: column; align-items: center; justify-content: center; + width: 100%; `; const RangeInputBox = styled.div<{ $isClicked: boolean }>` @@ -177,19 +176,20 @@ const RangeInputBox = styled.div<{ $isClicked: boolean }>` border-radius: 0.8rem; border-color: ${({ $isClicked, theme }) => $isClicked ? theme.colors.grey5 : theme.colors.main1}; - width: 33.5rem; + width: 100%; height: 5.2rem; + cursor: pointer; color: ${({ theme }) => theme.colors.white}; `; const Input = styled.input` appearance: none; - margin: 1.5rem 0 1.5rem 1.6rem; background-image: url("data:image/svg+xml,%3Csvg width='22' height='22' viewBox='0 0 22 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='11' cy='11' r='10' stroke='%23D9D9D9' stroke-width='2'/%3E%3C/svg%3E%0A"); background-repeat: no-repeat; - width: 2.2rem; + width: 3.2rem; height: 2.2rem; - + margin-left: 1.5rem; + cursor: pointer; &:checked { background-image: url("data:image/svg+xml,%3Csvg width='22' height='22' viewBox='0 0 22 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='11' cy='11' r='11' fill='%233C49FF'/%3E%3Ccircle cx='11' cy='11' r='4' fill='white'/%3E%3C/svg%3E "); } @@ -200,9 +200,10 @@ const Input = styled.input` const Label = styled.label` display: flex; align-items: center; - margin-left: 1.2rem; + padding: 0 1.2rem; height: 5rem; - width: 28rem; + width: 100%; + cursor: pointer; ${({ theme }) => theme.fonts.button1}; color: ${({ theme }) => theme.colors.grey6}; `; @@ -216,7 +217,7 @@ const MultipleInputBox = styled.div<{ $isClicked: boolean }>` border-color: ${({ $isClicked, theme }) => $isClicked ? theme.colors.main1 : theme.colors.grey5}; background-color: transparent; - width: 33.5rem; + width: 100%; height: 5.2rem; color: ${({ theme }) => theme.colors.white}; `; @@ -224,7 +225,7 @@ const MultipleInputBox = styled.div<{ $isClicked: boolean }>` const InputContianer = styled.div` display: flex; flex-direction: column; - align-items: left; + width: 100%; margin-bottom: 3rem; div:first-child { margin-bottom: 1.1rem; diff --git a/src/pages/createMeeting/components/useFunnel/SetDuration.tsx b/src/pages/createMeeting/components/useFunnel/SetDuration.tsx index 44d2b9df..02c7f1a2 100644 --- a/src/pages/createMeeting/components/useFunnel/SetDuration.tsx +++ b/src/pages/createMeeting/components/useFunnel/SetDuration.tsx @@ -1,8 +1,9 @@ -import Button from 'components/atomComponents/Button'; -import Text from 'components/atomComponents/Text'; +import Button from 'components/common/atomComponents/Button'; +import Text from 'components/common/atomComponents/Text'; +import BottomBtnSection from 'components/common/moleculesComponents/BottomBtnSection'; import { durationType } from 'pages/createMeeting/data/meetingInfoData'; import { FunnelProps, MeetingInfo } from 'pages/createMeeting/types/useFunnelInterface'; -import styled from 'styled-components/macro'; +import styled from 'styled-components'; function SetDuration({ meetingInfo, setMeetingInfo, setStep }: FunnelProps) { return ( @@ -26,7 +27,7 @@ function SetDuration({ meetingInfo, setMeetingInfo, setStep }: FunnelProps) { ); })} - + - + ); } @@ -54,16 +55,14 @@ const SetAdditionalInfoWrapper = styled.div` display: flex; align-items: center; justify-content: center; -`; - -const StyledBtnWrapper = styled.section` - position: fixed; - bottom: 1.2rem; + width: 100%; `; const DurationWrapper = styled.div` - display: flex; - flex-wrap: wrap; + display: grid; + grid-template-columns: repeat(2, 1fr); /* 3열로 나누기 */ + grid-template-rows: repeat(3, 1fr); /* 2행으로 나누기 */ + width: 100%; gap: 1.1rem; justify-content: center; diff --git a/src/pages/createMeeting/components/useFunnel/SetHostInfo.tsx b/src/pages/createMeeting/components/useFunnel/SetHostInfo.tsx index ab3da45e..20726fe4 100644 --- a/src/pages/createMeeting/components/useFunnel/SetHostInfo.tsx +++ b/src/pages/createMeeting/components/useFunnel/SetHostInfo.tsx @@ -1,11 +1,12 @@ import React from 'react'; -import Button from 'components/atomComponents/Button'; -import PasswordInput from 'components/atomComponents/PasswordInput'; -import Text from 'components/atomComponents/Text'; -import TextInput from 'components/atomComponents/TextInput'; +import Button from 'components/common/atomComponents/Button'; +import PasswordInput from 'components/common/atomComponents/PasswordInput'; +import Text from 'components/common/atomComponents/Text'; +import TextInput from 'components/common/atomComponents/TextInput'; +import BottomBtnSection from 'components/common/moleculesComponents/BottomBtnSection'; import { FunnelProps, MeetingInfo } from 'pages/createMeeting/types/useFunnelInterface'; -import styled from 'styled-components/macro'; +import styled from 'styled-components'; import { theme } from 'styles/theme'; function SetHostInfo({ meetingInfo, setMeetingInfo, setStep }: FunnelProps) { @@ -22,11 +23,7 @@ function SetHostInfo({ meetingInfo, setMeetingInfo, setStep }: FunnelProps) { const passWordOnChange = (e: React.ChangeEvent) => { setMeetingInfo((prev: MeetingInfo) => { - if (e.target.value.length < 9) { - return { ...prev, password: e.target.value }; - } - alert('비밀번호는 8자리 이하로 말해주세요'); - return { ...prev }; + return { ...prev, password: e.target.value }; }); }; @@ -44,6 +41,15 @@ function SetHostInfo({ meetingInfo, setMeetingInfo, setStep }: FunnelProps) { } }; + const validateForm = () => { + return ( + meetingInfo.name && + meetingInfo.name.length <= 15 && + meetingInfo.password.length >= 4 && + meetingInfo.password.length <= 8 + ); + }; + return ( @@ -55,6 +61,7 @@ function SetHostInfo({ meetingInfo, setMeetingInfo, setStep }: FunnelProps) { value={meetingInfo.name} setValue={hostOnChange} resetValue={resetHost} + max={8} placeholder={'방장 이름'} /> @@ -64,28 +71,20 @@ function SetHostInfo({ meetingInfo, setMeetingInfo, setStep }: FunnelProps) { - + - + ); } @@ -98,12 +97,6 @@ const SetHostInfoWrapper = styled.div` justify-content: center; `; -const StyledBtnSection = styled.section` - position: fixed; - bottom: 1.2rem; - border-radius: 50%; -`; - const HostNameSection = styled.section` display: flex; flex-direction: column; @@ -113,5 +106,4 @@ const HostInfoSection = styled.div` display: flex; flex-direction: column; gap: 3.4rem; - padding: 0 2rem; `; diff --git a/src/pages/createMeeting/components/useFunnel/SetPlace.tsx b/src/pages/createMeeting/components/useFunnel/SetPlace.tsx index 3384efd6..55bc9d32 100644 --- a/src/pages/createMeeting/components/useFunnel/SetPlace.tsx +++ b/src/pages/createMeeting/components/useFunnel/SetPlace.tsx @@ -1,9 +1,10 @@ -import Button from 'components/atomComponents/Button'; -import PlaceInput from 'components/atomComponents/PlaceInput'; -import Text from 'components/atomComponents/Text'; +import Button from 'components/common/atomComponents/Button'; +import PlaceInput from 'components/common/atomComponents/PlaceInput'; +import Text from 'components/common/atomComponents/Text'; +import BottomBtnSection from 'components/common/moleculesComponents/BottomBtnSection'; import { placeType } from 'pages/createMeeting/data/meetingInfoData'; import { FunnelProps } from 'pages/createMeeting/types/useFunnelInterface'; -import styled from 'styled-components/macro'; +import styled from 'styled-components'; function SetPlace({ meetingInfo, setMeetingInfo, setStep }: FunnelProps) { const setPlaceDetail = (place: string) => { @@ -12,7 +13,7 @@ function SetPlace({ meetingInfo, setMeetingInfo, setStep }: FunnelProps) { return ( - {placeType.map((type, i) => { + {Object.keys(placeType).map((type, i) => { return ( - + ); } export default SetPlace; -const SetPlaceWrapper = styled.div``; +const SetPlaceWrapper = styled.div` + display: flex; + justify-content: center; -const StyledBtnSection = styled.section` - position: fixed; - bottom: 1.2rem; - border-radius: 50%; + width: 100%; `; const PlaceInfoSection = styled.section` display: flex; flex-direction: column; gap: 1rem; + width: 100%; `; const PlaceSection = styled.section``; diff --git a/src/pages/createMeeting/components/useFunnel/SetTitle.tsx b/src/pages/createMeeting/components/useFunnel/SetTitle.tsx index 4768311a..f018df72 100644 --- a/src/pages/createMeeting/components/useFunnel/SetTitle.tsx +++ b/src/pages/createMeeting/components/useFunnel/SetTitle.tsx @@ -1,10 +1,11 @@ import React from 'react'; -import Button from 'components/atomComponents/Button'; -import Text from 'components/atomComponents/Text'; -import TextInput from 'components/atomComponents/TextInput'; +import Button from 'components/common/atomComponents/Button'; +import Text from 'components/common/atomComponents/Text'; +import TextInput from 'components/common/atomComponents/TextInput'; +import BottomBtnSection from 'components/common/moleculesComponents/BottomBtnSection'; import { FunnelProps, MeetingInfo } from 'pages/createMeeting/types/useFunnelInterface'; -import styled from 'styled-components/macro'; +import styled from 'styled-components'; function SetTitle({ meetingInfo, setMeetingInfo, setStep }: FunnelProps) { const titleOnChange = (e: React.ChangeEvent) => { @@ -24,9 +25,10 @@ function SetTitle({ meetingInfo, setMeetingInfo, setStep }: FunnelProps) { value={meetingInfo.title} setValue={titleOnChange} resetValue={resetTitle} + max={15} placeholder={'서비스 기획 1차 회의'} /> - + - + ); } @@ -56,10 +58,14 @@ const SetTitleWrapper = styled.div` display: flex; align-items: center; justify-content: center; + width: 100%; `; -const StyledBtnSection = styled.section` - position: fixed; - bottom: 1.2rem; - border-radius: 50%; -`; +// const StyledBtnSection = styled.section` +// position: absolute; +// width: 100%; +// display: flex; +// justify-content: center; +// bottom: 1.2rem; +// border-radius: 50%; +// `; diff --git a/src/pages/createMeeting/data/meetingInfoData.ts b/src/pages/createMeeting/data/meetingInfoData.ts index c55b84b3..b11e66bc 100644 --- a/src/pages/createMeeting/data/meetingInfoData.ts +++ b/src/pages/createMeeting/data/meetingInfoData.ts @@ -7,7 +7,27 @@ export const durationType = [ { time: '3시간', enum: 'THREE_HOUR' }, ]; -export const placeType = ['ONLINE', 'OFFLINE', 'UNDEFINED']; +type PlaceType = { + [key: string]: string; +}; +export const placeType: PlaceType = { + ONLINE: '온라인', + OFFLINE: '오프라인', + UNDEFINED: '미정', +}; + +type weekDayType = { + [key: string]: string; +}; +export const weekDayType: weekDayType = { + MON: '월', + TUE: '화', + WED: '수', + THU: '목', + FRI: '금', + SAT: '토', + SUN: '일', +}; export const preferTimeType = [ { diff --git a/src/pages/cueCard/CueCard.tsx b/src/pages/cueCard/CueCard.tsx index c406c1fa..db5b5519 100644 --- a/src/pages/cueCard/CueCard.tsx +++ b/src/pages/cueCard/CueCard.tsx @@ -1,13 +1,14 @@ import { useRef } from 'react'; -import Button from 'components/atomComponents/Button'; -import Text from 'components/atomComponents/Text'; -import Header from 'components/moleculesComponents/Header'; +import Button from 'components/common/atomComponents/Button'; +import Text from 'components/common/atomComponents/Text'; +import BottomBtnSection from 'components/common/moleculesComponents/BottomBtnSection'; +import Header from 'components/common/moleculesComponents/Header'; import html2canvas from 'html2canvas'; import CueCardTitle from 'pages/cueCard/components/CueCardTitle'; import CopyToClipboard from 'react-copy-to-clipboard'; -import styled from 'styled-components/macro'; -import { downLoadNotify, notify } from 'utils/toast/copyLink'; +import styled from 'styled-components'; +import { downLoadNotify, notify } from 'utils/toast/copyLinkToast'; import Qcard from './components/Qcard'; @@ -32,7 +33,7 @@ function CueCard() {
- + - + ); } @@ -62,12 +63,3 @@ const CueCardWrapper = styled.div` width: 100%; `; - -const ButtonSection = styled.section` - display: flex; - position: fixed; - bottom: 1.2rem; - flex-direction: row; - gap: 1.4rem; - justify-content: center; -`; diff --git a/src/pages/cueCard/components/CueCardTitle.tsx b/src/pages/cueCard/components/CueCardTitle.tsx index 9dcfa057..e3d0dc89 100644 --- a/src/pages/cueCard/components/CueCardTitle.tsx +++ b/src/pages/cueCard/components/CueCardTitle.tsx @@ -1,5 +1,5 @@ -import Text from 'components/atomComponents/Text'; -import styled from 'styled-components/macro'; +import Text from 'components/common/atomComponents/Text'; +import styled from 'styled-components'; import { theme } from 'styles/theme'; interface TextProps { diff --git a/src/pages/cueCard/components/Qcard.tsx b/src/pages/cueCard/components/Qcard.tsx index a03bd3b2..086ba480 100644 --- a/src/pages/cueCard/components/Qcard.tsx +++ b/src/pages/cueCard/components/Qcard.tsx @@ -1,11 +1,11 @@ import { ForwardedRef, forwardRef } from 'react'; -import Text from 'components/atomComponents/Text'; +import Text from 'components/common/atomComponents/Text'; import { OfflinePlaceIc, OnlinePlaceIc, TimeIc } from 'components/Icon/icon'; import LoadingPage from 'pages/errorLoading/LoadingPage'; import { useParams } from 'react-router'; import { useNavigate } from 'react-router-dom'; -import styled from 'styled-components/macro'; +import styled from 'styled-components'; import { theme } from 'styles/theme'; import GetQcardDataHooks from '../hooks/getQCardData'; diff --git a/src/pages/errorLoading/ErrorPage404.tsx b/src/pages/errorLoading/ErrorPage404.tsx index 337a4b61..bd3e90f3 100644 --- a/src/pages/errorLoading/ErrorPage404.tsx +++ b/src/pages/errorLoading/ErrorPage404.tsx @@ -1,11 +1,13 @@ import Error404 from 'assets/images/Error404.png'; -import Button from 'components/atomComponents/Button'; -import Text from 'components/atomComponents/Text'; -import { Link } from 'react-router-dom'; -import styled from 'styled-components/macro'; +import Button from 'components/common/atomComponents/Button'; +import Text from 'components/common/atomComponents/Text'; +import BottomBtnSection from 'components/common/moleculesComponents/BottomBtnSection'; +import { useNavigate } from 'react-router-dom'; +import styled from 'styled-components'; import { theme } from 'styles/theme'; function ErrorPage404() { + const navigate = useNavigate(); return ( @@ -27,13 +29,16 @@ function ErrorPage404() { - - - - - + + + ); } diff --git a/src/pages/errorLoading/LoadingPage.tsx b/src/pages/errorLoading/LoadingPage.tsx index d0f5018f..3a46a767 100644 --- a/src/pages/errorLoading/LoadingPage.tsx +++ b/src/pages/errorLoading/LoadingPage.tsx @@ -1,4 +1,4 @@ -import styled from 'styled-components/macro'; +import styled from 'styled-components'; function LoadingPage() { return ( diff --git a/src/pages/legacy/selectSchedule/SelectModal.tsx b/src/pages/legacy/selectSchedule/SelectModal.tsx index 4162ff7f..35d967af 100644 --- a/src/pages/legacy/selectSchedule/SelectModal.tsx +++ b/src/pages/legacy/selectSchedule/SelectModal.tsx @@ -1,12 +1,12 @@ import { userNameAtom } from 'atoms/atom'; import { isAxiosError } from 'axios'; -import Text from 'components/atomComponents/Text'; +import Text from 'components/common/atomComponents/Text'; import { ExitIc } from 'components/Icon/icon'; import { useSelectContext } from 'pages/selectSchedule/contexts/useSelectContext'; import { formatHostScheduleScheme, formatMemberScheduleScheme } from 'pages/selectSchedule/utils'; import { useNavigate, useParams } from 'react-router'; import { useRecoilValue } from 'recoil'; -import styled from 'styled-components/macro'; +import styled from 'styled-components'; import { theme } from 'styles/theme'; import { hostAvailableApi, userAvailableApi } from 'utils/apis/legacy/createHostAvailableSchedule'; @@ -40,6 +40,9 @@ function SelectModal({ setShowModal }: ModalProps) { if (isAxiosError(e) && e.response) { if (e.response.status === 400) { alert(`${e.response.data.message}`); + } else if (e.response.status === 409) { + alert(`${e.response.data.message}`); + navigate(`/host/${meetingId}`); } else { alert(`${e.response.data.message}`); console.error(e); diff --git a/src/pages/loginEntrance/LoginEntrance.tsx b/src/pages/loginEntrance/LoginEntrance.tsx index 09544337..9f08703a 100644 --- a/src/pages/loginEntrance/LoginEntrance.tsx +++ b/src/pages/loginEntrance/LoginEntrance.tsx @@ -1,6 +1,6 @@ import { useState } from 'react'; -import styled from 'styled-components/macro'; +import styled from 'styled-components'; import HostComponent from './components/HostComponent'; import MemberComponent from './components/MemberComponent'; @@ -38,5 +38,6 @@ export default LoginEntrance; const LoginEntranceWrapper = styled.div` display: flex; flex-direction: column; + align-items: center; width: 100%; `; diff --git a/src/pages/loginEntrance/components/HostComponent.tsx b/src/pages/loginEntrance/components/HostComponent.tsx index 8c88a46c..962b961a 100644 --- a/src/pages/loginEntrance/components/HostComponent.tsx +++ b/src/pages/loginEntrance/components/HostComponent.tsx @@ -1,14 +1,15 @@ import React, { Dispatch, SetStateAction, useState } from 'react'; import { isAxiosError } from 'axios'; -import Button from 'components/atomComponents/Button'; -import PasswordInput from 'components/atomComponents/PasswordInput'; -import Text from 'components/atomComponents/Text'; -import TextInput from 'components/atomComponents/TextInput'; -import Header from 'components/moleculesComponents/Header'; -import TitleComponent from 'components/moleculesComponents/TitleComponents'; +import Button from 'components/common/atomComponents/Button'; +import PasswordInput from 'components/common/atomComponents/PasswordInput'; +import Text from 'components/common/atomComponents/Text'; +import TextInput from 'components/common/atomComponents/TextInput'; +import BottomBtnSection from 'components/common/moleculesComponents/BottomBtnSection'; +import Header from 'components/common/moleculesComponents/Header'; +import TitleComponent from 'components/common/moleculesComponents/TitleComponents'; import { useNavigate, useParams } from 'react-router-dom'; -import styled from 'styled-components/macro'; +import styled from 'styled-components'; import { theme } from 'styles/theme'; import { client } from 'utils/apis/axios'; @@ -75,7 +76,7 @@ function HostComponent({ hostInfo, setHostInfo }: HostProps) { } }; return ( - <> +
@@ -87,6 +88,7 @@ function HostComponent({ hostInfo, setHostInfo }: HostProps) { value={hostInfo.name} setValue={hostOnChange} resetValue={resetHostId} + max={8} placeholder={'방장 이름'} /> @@ -96,13 +98,13 @@ function HostComponent({ hostInfo, setHostInfo }: HostProps) { - + - + {ismodalOpen ? : undefined} {isLoginModalOpen ? ( ) : ( undefined )} - + ); } export default HostComponent; -const StyledBtnSection = styled.section` - position: fixed; - bottom: 1.2rem; - border-radius: 50%; +const HostComponentWrapper = styled.div` + display: flex; + flex-direction: column; + + align-items: center; + width: 100%; `; const HostNameSection = styled.section` display: flex; flex-direction: column; gap: 1rem; + width: 100%; `; const HostInfoSection = styled.div` display: flex; flex-direction: column; gap: 3.4rem; + + width: 100%; `; diff --git a/src/pages/loginEntrance/components/IncorrectInfoModal.tsx b/src/pages/loginEntrance/components/IncorrectInfoModal.tsx index 232ce6b2..ebe7af8e 100644 --- a/src/pages/loginEntrance/components/IncorrectInfoModal.tsx +++ b/src/pages/loginEntrance/components/IncorrectInfoModal.tsx @@ -1,9 +1,8 @@ -import { Link, useParams } from 'react-router-dom'; -import React, { Dispatch, SetStateAction, useState } from 'react'; +import { Dispatch, SetStateAction } from 'react'; +import Text from 'components/common/atomComponents/Text'; import { ExitIc } from 'components/Icon/icon'; -import Text from 'components/atomComponents/Text'; -import styled from 'styled-components/macro'; +import styled from 'styled-components'; import { theme } from 'styles/theme'; interface ModalProps { @@ -17,7 +16,7 @@ function IncorrectInfoModal({ setIsLoginModalOpen }: ModalProps) { setIsLoginModalOpen(false)}> - + 유효하지 않은 사용자 이름 @@ -26,11 +25,11 @@ function IncorrectInfoModal({ setIsLoginModalOpen }: ModalProps) { 또는 비밀번호 입니다. - setIsLoginModalOpen(false)}> - - 다시 입력하기 - - + setIsLoginModalOpen(false)}> + + 다시 입력하기 + + ); diff --git a/src/pages/loginEntrance/components/MemberComponent.tsx b/src/pages/loginEntrance/components/MemberComponent.tsx index a87ea7ac..22cac341 100644 --- a/src/pages/loginEntrance/components/MemberComponent.tsx +++ b/src/pages/loginEntrance/components/MemberComponent.tsx @@ -1,16 +1,17 @@ import React, { Dispatch, SetStateAction } from 'react'; -import Button from 'components/atomComponents/Button'; -import Header from 'components/moleculesComponents/Header'; -import Text from 'components/atomComponents/Text'; -import TextInput from 'components/atomComponents/TextInput'; -import TitleComponent from 'components/moleculesComponents/TitleComponents'; -import styled from 'styled-components/macro'; -import { theme } from 'styles/theme'; -import { useNavigate } from 'react-router-dom'; +import { userNameAtom } from 'atoms/atom'; +import Button from 'components/common/atomComponents/Button'; +import Text from 'components/common/atomComponents/Text'; +import TextInput from 'components/common/atomComponents/TextInput'; +import BottomBtnSection from 'components/common/moleculesComponents/BottomBtnSection'; +import Header from 'components/common/moleculesComponents/Header'; +import TitleComponent from 'components/common/moleculesComponents/TitleComponents'; import { useParams } from 'react-router'; +import { useNavigate } from 'react-router-dom'; import { useRecoilState } from 'recoil'; -import { userNameAtom } from 'atoms/atom'; +import styled from 'styled-components'; +import { theme } from 'styles/theme'; interface HostInfoProps { name: string; @@ -38,7 +39,7 @@ function MemberComponent({ hostInfo, setHostInfo }: HostProps) { const loginMember = () => { setUserName(hostInfo.name); - navigate(`/member/select/${meetingId}`); + navigate(`/member/select/${meetingId}?step=selectSchedule`); }; return ( @@ -57,37 +58,35 @@ function MemberComponent({ hostInfo, setHostInfo }: HostProps) { value={hostInfo.name} setValue={hostOnChange} resetValue={resetHostId} + max={8} placeholder={'참여자 이름'} /> - + - + ); } export default MemberComponent; -const StyledBtnSection = styled.section` - position: fixed; - bottom: 1.2rem; - border-radius: 50%; -`; - const HostNameSection = styled.section` display: flex; flex-direction: column; gap: 1rem; + width: 100%; `; const HostInfoSection = styled.div` display: flex; flex-direction: column; gap: 3.4rem; + + width: 100%; `; diff --git a/src/pages/loginEntrance/components/NoAvailableTimeModal.tsx b/src/pages/loginEntrance/components/NoAvailableTimeModal.tsx index 0b82b270..2904a546 100644 --- a/src/pages/loginEntrance/components/NoAvailableTimeModal.tsx +++ b/src/pages/loginEntrance/components/NoAvailableTimeModal.tsx @@ -1,9 +1,8 @@ -import { Link, useParams } from 'react-router-dom'; -import React, { Dispatch, SetStateAction, useState } from 'react'; +import { Dispatch, SetStateAction } from 'react'; -import { ExitIc } from 'components/Icon/icon'; -import Text from 'components/atomComponents/Text'; -import styled from 'styled-components/macro'; +import Text from 'components/common/atomComponents/Text'; +import { useNavigate, useParams } from 'react-router-dom'; +import styled from 'styled-components'; import { theme } from 'styles/theme'; interface ModalProps { @@ -12,30 +11,26 @@ interface ModalProps { function NoAvailableTimeModal({ setIsModalOpen }: ModalProps) { const { meetingId } = useParams(); + const navigate = useNavigate(); + return ( - + setIsModalOpen(false)}> - setIsModalOpen(false)}> - - - - 잠깐! - - - 나의 가능 시간을 입력해야 + + 가능 시간을 입력하지 않으셨나요? + + + 나의 가능 시간을 입력해야
방장 페이지에 접속할 수 있어요 + + + + navigate(`/host/select/${meetingId}?step=selectSchedule`)}> - 방장 페이지에 접속할 수 있어요! + 가능 시간 입력하러 가기 - - - - - 가능 시간 입력하러 가기 - - - + ); @@ -43,6 +38,11 @@ function NoAvailableTimeModal({ setIsModalOpen }: ModalProps) { export default NoAvailableTimeModal; +const ModalText = styled.span` + ${({ theme }) => theme.fonts.body2}; + color: ${({ theme }) => theme.colors.grey3}; +`; + const ReturnModalWrpper = styled.div` display: flex; position: absolute; @@ -57,14 +57,16 @@ const ReturnModalWrpper = styled.div` const ModalSection = styled.article` display: flex; - position: relative; + /* position: relative; */ flex-direction: column; align-items: center; justify-content: center; + gap: 2.4rem; border-radius: 0.8rem; background-color: ${({ theme }) => theme.colors.grey8}; - width: 28.8rem; - height: 21.2rem; + width: 32.4rem; + height: 18.4rem; + padding: 2.4rem 2rem; `; const IconCatainer = styled.div` @@ -83,15 +85,17 @@ const MentContainer = styled.div` display: flex; flex-direction: column; align-items: center; - margin-top: 1.2rem; + justify-content: center; + gap: 0.8rem; + text-align: center; `; const ModalBtn = styled.button` display: flex; align-items: center; justify-content: center; - margin-top: 2.4rem; + border-radius: 0.6rem; background-color: ${({ theme }) => theme.colors.main1}; - width: 17.6rem; + width: 100%; height: 4.2rem; `; diff --git a/src/pages/onBoarding/OnBoarding.tsx b/src/pages/onBoarding/OnBoarding.tsx index c3da3016..382553c6 100644 --- a/src/pages/onBoarding/OnBoarding.tsx +++ b/src/pages/onBoarding/OnBoarding.tsx @@ -6,11 +6,12 @@ import CardPng from 'assets/images/card.png'; import InsertPng from 'assets/images/insert.png'; import MakePng from 'assets/images/make.png'; import PointPng from 'assets/images/point.png'; -import Button from 'components/atomComponents/Button'; -import Text from 'components/atomComponents/Text'; -import Header from 'components/moleculesComponents/Header'; -import { Link } from 'react-router-dom'; -import styled from 'styled-components/macro'; +import Button from 'components/common/atomComponents/Button'; +import Text from 'components/common/atomComponents/Text'; +import BottomBtnSection from 'components/common/moleculesComponents/BottomBtnSection'; +import Header from 'components/common/moleculesComponents/Header'; +import { useNavigate } from 'react-router-dom'; +import styled from 'styled-components'; import { Autoplay, Navigation, Pagination } from 'swiper/modules'; import { Swiper, SwiperSlide } from 'swiper/react'; @@ -44,11 +45,14 @@ const slides = [ ]; function OnBoarding() { + const navigate = useNavigate(); + const handleCreateMeeting = () => { + navigate('/meet/create?step=title'); + }; return ( <>
- {slide.icon} */} {/* 로딩 속도로 차선책 png code */} {slide.icon} - + <> - + ))} - - - - - - + + + ); @@ -92,6 +93,10 @@ function OnBoarding() { export default OnBoarding; const OnboardingWrapper = styled.div` + display: flex; + flex-direction: column; + + align-items: center; width: 100%; `; @@ -100,8 +105,6 @@ const SwiperContext = styled.div` height: 50rem; `; -const SwiperSection = styled.section``; - const StyledSwiperSlide = styled(SwiperSlide)` display: flex; flex-direction: column; @@ -113,10 +116,3 @@ const SvgContainer = styled.section` height: 33rem; } `; - -const ExplainContainer = styled.section``; - -const ButtonSection = styled.section` - position: fixed; - bottom: 1.2rem; -`; diff --git a/src/pages/onBoarding/components/Explain.tsx b/src/pages/onBoarding/components/Explain.tsx index b956af05..4207b729 100644 --- a/src/pages/onBoarding/components/Explain.tsx +++ b/src/pages/onBoarding/components/Explain.tsx @@ -1,5 +1,5 @@ -import Text from 'components/atomComponents/Text'; -import styled from 'styled-components/macro'; +import Text from 'components/common/atomComponents/Text'; +import styled from 'styled-components'; import { theme } from 'styles/theme'; interface ExplainProps { @@ -40,5 +40,5 @@ const SubTextSection = styled.section` flex-direction: column; align-items: center; justify-content: center; - margin-top: 2.4rem; + margin-top: 2.4rem; `; diff --git a/src/pages/overallSchedule/OverallSchedule.tsx b/src/pages/overallSchedule/OverallSchedule.tsx index 84a2d4ef..d3bbf0b9 100644 --- a/src/pages/overallSchedule/OverallSchedule.tsx +++ b/src/pages/overallSchedule/OverallSchedule.tsx @@ -1,4 +1,4 @@ -import { getAvailableTimes } from 'components/timetableComponents/utils'; +import { getAvailableTimes } from 'components/common/timetableComponents/utils'; import { useParams } from 'react-router-dom'; import styled from 'styled-components'; import { useGetOverallSchedule } from 'utils/apis/useGetOverallSchedule'; diff --git a/src/pages/overallSchedule/components/OverallScheduleColumn.tsx b/src/pages/overallSchedule/components/OverallScheduleColumn.tsx index 96853a6d..709c276a 100644 --- a/src/pages/overallSchedule/components/OverallScheduleColumn.tsx +++ b/src/pages/overallSchedule/components/OverallScheduleColumn.tsx @@ -1,5 +1,5 @@ -import Slot from 'components/timetableComponents/parts/Slot'; -import { ColumnStructure } from 'components/timetableComponents/types'; +import Slot from 'components/common/timetableComponents/parts/Slot'; +import { ColumnStructure } from 'components/common/timetableComponents/types'; import { theme } from 'styles/theme'; import { TimeSlot } from 'utils/apis/useGetOverallSchedule'; @@ -23,9 +23,19 @@ function OverallScheduleColumn({ date, timeSlots, availableSlotInfo }: OverallSc 5: theme.colors.level5, }; + /** + * 종합일정 시간표 스타일링 + * 1. border-top: 선택된 시간이라면 none, 선택되지 않은 시간이라면 30분 단위는 점선, 1시간 단위는 실선 + * 2. background-color: 선택된 시간이라면 colorLevel에 따른 색상 + */ + const borderTopStyle = slotId.endsWith(':30') ? 'dashed' : 'solid'; + const borderTop = `1px ${borderTopStyle} ${theme.colors.grey7} `; const isClickedSlot = clickedSlot === slotId; + const backgroundColor = isClickedSlot && colorLevel !== 0 ? theme.colors.sub1 : COLOR[colorLevel]; + return ` - background-color: ${isClickedSlot && colorLevel!==0 ? theme.colors.sub1 : COLOR[colorLevel]}; + border-top: ${borderTop}; + background-color: ${backgroundColor}; cursor: ${colorLevel !== 0 ? 'pointer' : 'default'}; ` } @@ -36,7 +46,7 @@ function OverallScheduleColumn({ date, timeSlots, availableSlotInfo }: OverallSc const { colorLevel = 0, userNames = [] } = availableSlotInfo.find((info) => info.time === timeSlot) ?? {}; const slotId = `${date}/${timeSlot}`; - return onClickSlot(slotId, userNames)}/>; + return onClickSlot(slotId, userNames)}/>; })} ); diff --git a/src/pages/overallSchedule/components/OverallScheduleTable.tsx b/src/pages/overallSchedule/components/OverallScheduleTable.tsx index 716b1038..522424f8 100644 --- a/src/pages/overallSchedule/components/OverallScheduleTable.tsx +++ b/src/pages/overallSchedule/components/OverallScheduleTable.tsx @@ -1,7 +1,7 @@ import { useState } from 'react'; -import Timetable from 'components/timetableComponents/Timetable'; -import { ColumnStructure, TimetableStructure } from 'components/timetableComponents/types'; +import Timetable from 'components/common/timetableComponents/Timetable'; +import { ColumnStructure, TimetableStructure } from 'components/common/timetableComponents/types'; import { AvailableDateTime, TimeSlot, @@ -47,7 +47,12 @@ function OverallScheduleTable({ setClickedUserNames, }} > - }> + } + > {({ date, timeSlots }: ColumnStructure) => ( {totalUserNames && ( - {totalUserNames.join(',')} + {totalUserNames.join(', ')} )} @@ -37,7 +37,6 @@ export default Title; const TextOneLine = styled.div` display: flex; flex-wrap: wrap; - margin-top: 3.7rem; width: 100%; `; diff --git a/src/pages/overallSchedule/components/UserNames.tsx b/src/pages/overallSchedule/components/UserNames.tsx index b751f86d..fa0558ff 100644 --- a/src/pages/overallSchedule/components/UserNames.tsx +++ b/src/pages/overallSchedule/components/UserNames.tsx @@ -1,4 +1,4 @@ -import Text from 'components/atomComponents/Text'; +import Text from 'components/common/atomComponents/Text'; import { styled } from 'styled-components'; import { theme } from 'styles/theme'; @@ -8,22 +8,24 @@ function UserNames() { const { clickedUserNames } = useClickContext(); return ( - - {clickedUserNames.length === 0 ? ( - - - 블럭을 선택하면 해당 시간대에 참여가능한 + + + {clickedUserNames.length === 0 ? ( + + + 블럭을 선택하면 해당 시간대에 참여가능한 + + + 인원을 확인할 수 있어요 + + + ) : ( + + {clickedUserNames.join(', ')} - - 인원을 확인할 수 있어요 - - - ) : ( - - {clickedUserNames.join(', ')} - - )} - + )} + + ); } @@ -31,7 +33,7 @@ export default UserNames; const UserNamesWrapper = styled.aside` display: flex; - position: fixed; + bottom: 4.4rem; flex-wrap: wrap; justify-content: center; @@ -50,3 +52,22 @@ const Texts = styled.div` align-items: center; justify-content: center; `; + +const Dim = styled.div` + display: flex; + position: fixed; + bottom: 0; + gap: 1rem; + align-items: end; + justify-content: center; + z-index: 2; + height: 16.4rem; + + margin-top: 3rem; + background: ${({ theme }) => theme.colors.dim_gradient}; + padding-bottom: 2.9rem; + + width: 100%; + + pointer-events: none; +`; diff --git a/src/pages/selectSchedule/SelectSchedule.tsx b/src/pages/selectSchedule/SelectSchedule.tsx index b6eff814..e6ab6ccc 100644 --- a/src/pages/selectSchedule/SelectSchedule.tsx +++ b/src/pages/selectSchedule/SelectSchedule.tsx @@ -1,14 +1,16 @@ -import { useState } from 'react'; +import { useEffect, useState } from 'react'; -import Header from 'components/moleculesComponents/Header'; -import TitleComponents from 'components/moleculesComponents/TitleComponents'; -import { getAvailableTimes } from 'components/timetableComponents/utils'; -import { useParams } from 'react-router-dom'; +import useModalState from 'components/common/Modal/hooks/useModalState'; +import Header from 'components/common/moleculesComponents/Header'; +import TitleComponents from 'components/common/moleculesComponents/TitleComponents'; +import { getAvailableTimes } from 'components/common/timetableComponents/utils'; +import { useNavigate, useParams } from 'react-router-dom'; import styled from 'styled-components'; import { useGetTimetable } from 'utils/apis/useGetTimetable'; import Description from './components/Description'; import SelectScheduleTable from './components/SelectScheduleTable'; +import OnboardingLottie from './components/selectTimeSlot/OnboardingLottie'; import { ScheduleStepContext } from './contexts/useScheduleStepContext'; import { ScheduleStepType } from './types'; import { TITLES } from './utils'; @@ -17,11 +19,38 @@ function SelectSchedule() { const [scheduleStep, setScheduleStep] = useState('selectTimeSlot'); const { meetingId } = useParams(); const { data, isLoading } = useGetTimetable(meetingId); + const { isOpen: isLottieOpen, onClose: onLottieClose } = useModalState(true); + + const navigate = useNavigate(); + const params = useParams(); + + useEffect( + () => { + const goBackFunnel = () => { + setScheduleStep((prev) => { + if (prev === 'selectTimeSlot') { + navigate(`/meet/${params.meetingId}`); + return prev; + } else { + return 'selectTimeSlot'; + } + }); + }; + + window.addEventListener('popstate', goBackFunnel); + + return () => { + window.removeEventListener('popstate', goBackFunnel); + }; + }, + [setScheduleStep, navigate], + ); return (
+ {!isLoading && data && ( <> @@ -37,6 +66,12 @@ function SelectSchedule() { sub={TITLES[scheduleStep].sub} padding={scheduleStep === 'selectTimeSlot' ? `0 0 2.6rem` : `4.4rem 0 3.2rem 0`} /> + {isLottieOpen && ( + + )} ( @@ -48,7 +51,12 @@ function SelectScheduleTable({ timeSlots, availableDates }: TimetableStructure) setSelectedSlots, }} > - + {stepColumn} diff --git a/src/pages/selectSchedule/components/selectPriority/PriorityColumn.tsx b/src/pages/selectSchedule/components/selectPriority/PriorityColumn.tsx index 0859d7c6..578bdf35 100644 --- a/src/pages/selectSchedule/components/selectPriority/PriorityColumn.tsx +++ b/src/pages/selectSchedule/components/selectPriority/PriorityColumn.tsx @@ -1,9 +1,9 @@ -import Text from 'components/atomComponents/Text'; -import { ColumnStructure } from 'components/timetableComponents/types'; +import Text from 'components/common/atomComponents/Text'; +import { ColumnStructure } from 'components/common/timetableComponents/types'; import { useSelectContext } from 'pages/selectSchedule/contexts/useSelectContext'; import { theme } from 'styles/theme'; -import Slot from '../../../../components/timetableComponents/parts/Slot'; +import Slot from '../../../../components/common/timetableComponents/parts/Slot'; function PriorityColumn({ date, timeSlots }: ColumnStructure) { const { selectedSlots } = useSelectContext(); @@ -24,8 +24,12 @@ function PriorityColumn({ date, timeSlots }: ColumnStructure) { throw Error(`올바르지않은 priority ${priority}`); } }; - const getPriorityColumnStyle = (priority: number, selectedEntryId: number | null) => { - const isSelectedSlot = selectedEntryId; + const getPriorityColumnStyle = ( + slotId: string, + priority: number, + selectedEntryId: number | null, + ) => { + const isSelectedSlot = selectedEntryId !== null; const slotColor = priority === 3 @@ -36,12 +40,20 @@ function PriorityColumn({ date, timeSlots }: ColumnStructure) { ? theme.colors.main3 : theme.colors.grey6; + /** + * 우선순위 입력 스타일링 + * 1. border-top: 선택된 시간이라면 none, 선택되지 않은 시간이라면 30분 단위는 none, 1시간 단위는 실선 + * 2. background-color: 선택된 시간이라면 우선순위에 따른 slotColor + */ + const borderTopStyle = slotId.endsWith(':30') ? 'none' : 'solid'; + const borderTop = isSelectedSlot ? 'none' : `1px ${borderTopStyle} ${theme.colors.grey7}`; + const backgroundColor = isSelectedSlot ? slotColor : 'transparent'; + const height = '1.2rem'; + return ` - ${ - isSelectedSlot !== null - ? `background-color:${slotColor}` - : `background-color: transparent` - } + border-top: ${borderTop}; + background-color: ${backgroundColor}; + height: ${height}; `; }; @@ -66,8 +78,7 @@ function PriorityColumn({ date, timeSlots }: ColumnStructure) { return ( {isFirstSlot && priority !== 0 ? changePriorityValue(priority) : ''} diff --git a/src/pages/selectSchedule/components/selectPriority/PriorityCta.tsx b/src/pages/selectSchedule/components/selectPriority/PriorityCta.tsx index 61709cdd..cc5f7fbd 100644 --- a/src/pages/selectSchedule/components/selectPriority/PriorityCta.tsx +++ b/src/pages/selectSchedule/components/selectPriority/PriorityCta.tsx @@ -1,12 +1,13 @@ import { useState } from 'react'; -import Button from 'components/atomComponents/Button'; -import Text from 'components/atomComponents/Text'; +import Button from 'components/common/atomComponents/Button'; +import Text from 'components/common/atomComponents/Text'; import SelectModal from 'pages/legacy/selectSchedule/SelectModal'; import styled from 'styled-components'; function PriorityCta() { const [isModalOpen, setIsModalOpen] = useState(false); + return ( <> @@ -41,14 +42,13 @@ const BtnDim = styled.div` gap: 1rem; align-items: end; justify-content: center; - z-index: 2; + z-index: 1; margin-top: 3rem; background: ${({ theme }) => theme.colors.dim_gradient}; padding-bottom: 2.9rem; width: 100%; - height: 16.4rem; pointer-events: none; `; diff --git a/src/pages/selectSchedule/components/selectPriority/PriorityDropdown.tsx b/src/pages/selectSchedule/components/selectPriority/PriorityDropdown.tsx index 83b5b9fd..f1dda7c5 100644 --- a/src/pages/selectSchedule/components/selectPriority/PriorityDropdown.tsx +++ b/src/pages/selectSchedule/components/selectPriority/PriorityDropdown.tsx @@ -1,16 +1,22 @@ import { useState } from 'react'; -import Text from 'components/atomComponents/Text'; -import { Circle1Ic, Circle2Ic, Circle3Ic, DropDownIc, DropUpIc } from 'components/Icon/icon'; -import { addMinutes } from 'components/timetableComponents/utils'; +import Text from 'components/common/atomComponents/Text'; +import { addMinutes } from 'components/common/timetableComponents/utils'; +import { + ArrowBottomIc, + ArrowTopIc, + Circle1Ic, + Circle2Ic, + Circle3Ic, + InputCancelIc, +} from 'components/Icon/icon'; import { SelectedSlotType, SelectSlotType, useSelectContext, } from 'pages/selectSchedule/contexts/useSelectContext'; -import styled from 'styled-components/macro'; +import styled from 'styled-components'; import { theme } from 'styles/theme'; - /** * * @desc 기존의 우선순위 Dropdown 컴포넌트를 그대로 가져와서, 따로 리팩토링 없이 새로운 시간표 컴포넌트에 맞게 적용되도록 수정한 컴포넌트입니다. @@ -19,28 +25,36 @@ import { theme } from 'styles/theme'; function PriorityDropdown() { const { selectedSlots, setSelectedSlots } = useSelectContext(); const [isOpenDropDown, setIsOpenDropDown] = useState([false, false, false]); + const defaultInputs = Array(3).fill(''); + + const [input_, setInput] = useState(defaultInputs); + + //우선 순위 시간순 정렬을 위한 날짜 시간 파싱함수 + const parseDateTime = (dateStr: string, timeStr: string) => { + const [month, day] = dateStr.split('/'); + const formatDay = day.padStart(2, '0'); + const [hour, minute] = timeStr.split(':'); + return Number(month + formatDay + hour + minute); + }; + + const sortedSlots = Object.entries(selectedSlots) + .slice() + .sort( + (a, b) => parseDateTime(a[1].date, a[1].startSlot) - parseDateTime(b[1].date, b[1].startSlot), + ); const formatDate = (date: string) => { const [month, day, dayOfWeek] = date.split('/'); return `${month}/${day}(${dayOfWeek})`; }; - let defaultInput1 = ''; - let defaultInput2 = ''; - let defaultInput3 = ''; - for (const key in selectedSlots) { - const item = selectedSlots[key]; + Object.values(selectedSlots).forEach((item) => { const date = formatDate(item.date); const endSlot = addMinutes(item.endSlot, 30); - if (item.priority === 3) { - defaultInput1 = `${date} ${item.startSlot}~${endSlot}`; - } else if (item.priority === 2) { - defaultInput2 = `${date} ${item.startSlot}~${endSlot}`; - } else if (item.priority === 1) { - defaultInput3 = `${date} ${item.startSlot}~${endSlot}`; + if (item.priority > 0) { + defaultInputs[3 - item.priority] = `${date} ${item.startSlot}~${endSlot}`; } - } - const [input_, setInput] = useState([defaultInput1, defaultInput2, defaultInput3]); + }); const handleDropdown = (idx: number) => { //dropdown이 열려있을 때 @@ -62,28 +76,13 @@ function PriorityDropdown() { const handlePriority = (idx: number, item: SelectSlotType, stringSelectedSlotKey: string) => { const selectedSlotKey = parseInt(stringSelectedSlotKey); - let selectedPriority: 0 | 1 | 2 | 3 = 0; - switch (idx) { - case 0: - selectedPriority = 3; - break; - case 1: - selectedPriority = 2; - break; - case 2: - selectedPriority = 1; - break; - default: - selectedPriority = 0; - break; - } - + const selectedPriority = 3 - idx; //이전 상태를 순회하면서 선택된 우선순위를 가지고 있는 데이터를 우선순위 0으로 초기화 setSelectedSlots((prev: SelectedSlotType) => { const updatedSelectedSlots = Object.entries(prev).reduce( (acc, [key, value]) => { const prevSelectedSlotKey = parseInt(key); - //선택된 우선순위가 기존에 존재할 경우 0으로 초기화 + //우선순위를 선택한 후 다시 설정할 경우 기존 priority 0으로 초기화 if (value.priority === selectedPriority) { acc[prevSelectedSlotKey] = { ...value, priority: 0 }; } else { @@ -109,97 +108,94 @@ function PriorityDropdown() { const updatedInput = [...prev]; const endSlot = addMinutes(item.endSlot, 30); const date = formatDate(item.date); - if (idx === 0) { - updatedInput[idx] = `${date} ${item.startSlot}~${endSlot}`; - } else if (idx === 1) { - updatedInput[idx] = `${date} ${item.startSlot}~${endSlot}`; - } else if (idx === 2) { - updatedInput[idx] = `${date} ${item.startSlot}~${endSlot}`; - } else { - updatedInput[idx] = 'error'; - } + + updatedInput[idx] = `${date} ${item.startSlot}~${endSlot}`; return updatedInput; }); handleDropdown(idx); }; + const deletePriority = (idx: number) => { + setSelectedSlots((prevSelectedSlots: SelectedSlotType) => { + const updateSlots = { ...prevSelectedSlots }; + Object.values(updateSlots).map((item) => { + if (item.priority === 3 - idx) { + item.priority = 0; + } + }); + return updateSlots; + }); + + setInput((prev) => { + const updatedInput = [...prev]; + updatedInput[idx] = ''; + return updatedInput; + }); + }; return ( - {Object.entries(selectedSlots).map(([key, _], idx) => { - return idx < 3 ? ( - - - - - {`${idx + 1}`}순위 - - - {idx === 0 ? ( - - ) : idx === 1 ? ( - - ) : idx === 2 ? ( - - ) : ( -
- )} - - - handleDropdown(idx)} - value={input_[idx]} - /> - - {isOpenDropDown[idx] ? ( - - {' '} - + {isOpenDropDown.map((item, idx) => ( + + + + + {`${idx + 1}`}순위 + + + {idx === 0 ? : idx === 1 ? : } + + + handleDropdown(idx)} + value={input_[idx]} + /> + + {defaultInputs[idx] ? ( + deletePriority(idx)} /> + ) : item ? ( + ) : ( - - - - )} - - {isOpenDropDown[idx] && ( - - {Object.entries(selectedSlots).map( - ([key, value]) => - !value.priority && ( - handlePriority(idx, value, key)}> - - {formatDate(value.date)} {value.startSlot}~{addMinutes( - value.endSlot, - 30, - )} - - - ), - )} - + )} - - - ) : ( -
- ); - })} + + {item && ( + + {sortedSlots.map( + ([key, value]) => + !value.priority && ( + handlePriority(idx, value, key)}> + + {formatDate(value.date)} {value.startSlot}~{addMinutes(value.endSlot, 30)} + + + ), + )} + + )} + + + ))} ); } + +const InputCancelIcon = styled(InputCancelIc)` + cursor: pointer; +`; const PriorityDropdownWrapper = styled.div` display: flex; flex-direction: column; gap: 1.2rem; justify-content: start; - + align-items: center; margin-top: 3rem; margin-bottom: 7.5rem; - width: 100%; + width: 33.5rem; height: 18rem; `; @@ -222,9 +218,6 @@ const TextWrapper = styled.div` left: 50%; transform: translate(-50%, -50%); `; -const Circle1Icon = styled(Circle1Ic)``; -const Circle2Icon = styled(Circle2Ic)``; -const Circle3Icon = styled(Circle3Ic)``; const InputWrapper = styled.div` position: relative; @@ -247,8 +240,9 @@ const TimeInput = styled.input<{ $drop: boolean }>` `; const DropDownIconWrapper = styled.div` position: absolute; - top: 36%; - right: 1rem; + top: 50%; + transform: translate(0, -50%); + right: 1.6rem; cursor: pointer; `; const DropdownWrapper = styled.div` @@ -259,7 +253,7 @@ const DropdownWrapper = styled.div` background-color: ${({ theme }) => theme.colors.grey6}; width: 27.4rem; height: fit-content; - max-height: 15.6rem; + max-height: 18.3rem; overflow-x: hidden; overflow-y: auto; diff --git a/src/pages/selectSchedule/components/selectTimeSlot/OnboardingLottie.tsx b/src/pages/selectSchedule/components/selectTimeSlot/OnboardingLottie.tsx new file mode 100644 index 00000000..101817c2 --- /dev/null +++ b/src/pages/selectSchedule/components/selectTimeSlot/OnboardingLottie.tsx @@ -0,0 +1,56 @@ +import { CloseIc } from 'components/Icon/icon'; +import Lottie from 'react-lottie'; +import taptotapOnboarding from 'src/assets/lotties/taptotap_onboarding.json'; +import styled from 'styled-components'; + +interface OnboardingLottieProps { + onClose: () => void; + top: number; +} + +function OnboardingLottie({ onClose, top }: OnboardingLottieProps) { + const defaultOptions = { + loop: true, + autoplay: true, + animationData: taptotapOnboarding, + rendererSettings: { + preserveAspectRatio: 'xMidYMid slice', + }, + }; + return ( + <> + + + + + + + ); +} + +export default OnboardingLottie; + +const OnboardingLottieWrapper = styled.aside<{ $top: number }>` + position: absolute; + top: ${({ $top }) => $top}rem; + z-index: 1; +`; + +const CloseIcWrapper = styled(CloseIc)` + position: absolute; + right: 1.5rem; + z-index: 1; + cursor: pointer; +`; + +const LottieWrapper = styled(Lottie)` + position: absolute; +`; + +const LottieBackground = styled.div` + position: fixed; + top: 0; + width: 100%; + height: 100%; + background: ${({ theme }) => theme.colors.black60}; +`; diff --git a/src/pages/selectSchedule/components/selectTimeSlot/SelectionColumn.tsx b/src/pages/selectSchedule/components/selectTimeSlot/SelectionColumn.tsx index 17f97f40..eb1fe6a3 100644 --- a/src/pages/selectSchedule/components/selectTimeSlot/SelectionColumn.tsx +++ b/src/pages/selectSchedule/components/selectTimeSlot/SelectionColumn.tsx @@ -1,28 +1,43 @@ -import { ColumnStructure } from 'components/timetableComponents/types'; +import { ColumnStructure } from 'components/common/timetableComponents/types'; import { useSelectContext } from 'pages/selectSchedule/contexts/useSelectContext'; import { theme } from 'styles/theme'; import useSlotSeletion from './hooks/useSlotSelection'; -import Slot from '../../../../components/timetableComponents/parts/Slot'; + +import Slot from '../../../../components/common/timetableComponents/parts/Slot'; function SelectionColumn({ date, timeSlots }: ColumnStructure) { const { selectedSlots } = useSelectContext(); + const selectedSlotsPerDate = Object.entries(selectedSlots).filter( ([, slot]) => slot.date === date, ); - + //test const { startSlot, onClickSlot } = useSlotSeletion(); const getTimeSlotStyle = (slotId: string, selectedEntryId?: number) => { const isStartSlot = slotId === startSlot; const isSelectedSlot = selectedEntryId !== undefined; + const isFirstSlot = + selectedEntryId !== undefined && + selectedSlots[selectedEntryId].startSlot === slotId.split('/')[3]; + + /** + * 가능시간 입력 시간표 스타일링 + * 1. border-top: 30분 단위는 dashed, 1시간 단위는 solid + * 2. border: 탭투탭 시 startSlot에 dashed + * 3. background-color: 선택된 시간이라면 main1, 선택된 시간이 아니면 transparent; + */ + const borderStyle = slotId.endsWith(':30') ? 'dashed' : 'solid'; + const border = isStartSlot && `1px dashed ${theme.colors.main5}`; + const borderTop = `1px ${borderStyle} ${theme.colors.grey7}`; + const background = isSelectedSlot ? theme.colors.main1 : 'transparent'; return ` cursor:pointer; - ${isStartSlot && `border: 1px dashed ${theme.colors.main5}`}; - ${ - isSelectedSlot ? `background-color: ${theme.colors.main1}` : `background-color: transparent` - }; + border-top: ${borderTop}; + ${isStartSlot && `border: ${border}`}; + background: ${background}; `; }; @@ -38,8 +53,7 @@ function SelectionColumn({ date, timeSlots }: ColumnStructure) { return ( onClickSlot(slotId, selectedEntryId)} /> ); diff --git a/src/pages/selectSchedule/components/selectTimeSlot/TimeSlotCta.tsx b/src/pages/selectSchedule/components/selectTimeSlot/TimeSlotCta.tsx index d021e1aa..01c25098 100644 --- a/src/pages/selectSchedule/components/selectTimeSlot/TimeSlotCta.tsx +++ b/src/pages/selectSchedule/components/selectTimeSlot/TimeSlotCta.tsx @@ -1,19 +1,36 @@ -import Button from 'components/atomComponents/Button'; -import Text from 'components/atomComponents/Text'; +import Button from 'components/common/atomComponents/Button'; +import Text from 'components/common/atomComponents/Text'; import { useScheduleStepContext } from 'pages/selectSchedule/contexts/useScheduleStepContext'; -import { useSelectContext } from 'pages/selectSchedule/contexts/useSelectContext'; +import { SelectedSlotType, useSelectContext } from 'pages/selectSchedule/contexts/useSelectContext'; +import { useNavigate } from 'react-router-dom'; import styled from 'styled-components'; function TimeSlotCta() { + const { selectedSlots, setSelectedSlots } = useSelectContext(); const { setScheduleStep } = useScheduleStepContext(); - const { selectedSlots } = useSelectContext(); const isValidSelection = Object.keys(selectedSlots).length !== 0; + + const navigate = useNavigate(); + + const resetPriorities = (selectedSlots: SelectedSlotType) => { + const updatedSelectedSlots: SelectedSlotType = {}; + for (const key in selectedSlots) { + updatedSelectedSlots[key] = { + ...selectedSlots[key], + priority: 0, + }; + } + setSelectedSlots(updatedSelectedSlots); + }; + return ( - - - - - - - - - - ), hostScheduleComplete: ( <> - - - @@ -71,30 +39,24 @@ function SteppingBtnSection({ steppingType }: SteppingProps) { ), meetEntrance: ( <> - - - - - - ), memberScheduleComplete: ( <> - - - ), }[steppingType] } - + ); } @@ -113,41 +75,4 @@ const StyledBtnSection = styled.section` `; -const BottomSheetModal = styled.div<{$isModalOpen:boolean;}>` - display:flex; - position:fixed; - bottom:${({$isModalOpen})=>$isModalOpen?0:-27.5}rem; - flex-direction:column; - gap:0.8rem; - transition: bottom 600ms cubic-bezier(0.86, 0, 0.07, 1); - z-index:1; - border-top-left-radius: 1.2rem; - border-top-right-radius: 1.2rem; - background-color: ${({ theme }) => theme.colors.grey8}; - - padding: 2.8rem 2rem 4rem; - width:37.5rem; - - & button { - width:100%; - } - -` - -const ModalOverlay = styled.div<{$isModalOpen:boolean;}>` - display:${({$isModalOpen})=>($isModalOpen?'block':'none')}; - position:fixed; - top: 0; - - background-color: rgba(0, 0, 0, 0.50); - width:100%; - height:100%; -` -const BottomSheetDescription = styled.div` - display:flex; - flex-direction:column; - gap:0.8rem; - margin-bottom:2.4rem; - padding-left:0.9rem; -` \ No newline at end of file diff --git a/src/styles/globalStyles.ts b/src/styles/globalStyles.ts index 5209820c..29b2e69d 100644 --- a/src/styles/globalStyles.ts +++ b/src/styles/globalStyles.ts @@ -12,7 +12,9 @@ const GlobalStyle = createGlobalStyle` } - +input { + margin:0; +} html, body { margin: 0 auto; diff --git a/src/styles/theme.ts b/src/styles/theme.ts index 70ae18ec..d23ef0b7 100644 --- a/src/styles/theme.ts +++ b/src/styles/theme.ts @@ -22,6 +22,7 @@ const colors = { grey9: '#252525', grey10: '#141414', black: '#000000', + black60: '#00000099', red: '#F45D56', yellow: '#FFE14D', diff --git a/src/utils/toast/ToastContainer.tsx b/src/utils/toast/ToastContainer.tsx index ddf2bb40..14edeb94 100644 --- a/src/utils/toast/ToastContainer.tsx +++ b/src/utils/toast/ToastContainer.tsx @@ -1,5 +1,5 @@ import { ToastContainer } from 'react-toastify'; -import styled from 'styled-components/macro'; +import styled from 'styled-components'; function ToastContainerBox() { return ( @@ -27,22 +27,27 @@ const StyledToastContainer = styled(ToastContainer)` bottom: 6rem; align-items: center; justify-content: center; + overflow: hidden; - .Toastify__toast { + .Toastify__toast.Toastify__toast { width: 19rem; - height: 4rem !important; - min-height: 0; - margin-bottom: 2.4rem; + + min-height: 4rem; + margin-bottom: 1.4rem; background-color: #2e2e2e; border-radius: 5rem; } - + .Toastify__toast-body { + } .Toastify__toast-body div { display: flex; align-items: center; justify-content: center; color: #d1ff38; + font-weight: 500; font-size: 1.2rem; + font-family: 'Pretendard Variable'; + line-height: 1.6; } svg { display: none; diff --git a/src/utils/toast/copyLink.ts b/src/utils/toast/copyLinkToast.ts similarity index 82% rename from src/utils/toast/copyLink.ts rename to src/utils/toast/copyLinkToast.ts index 72e1267f..65dc74a7 100644 --- a/src/utils/toast/copyLink.ts +++ b/src/utils/toast/copyLinkToast.ts @@ -1,6 +1,6 @@ import { toast } from 'react-toastify'; -export const notify = () => toast('링크 복사가 완료되었습니다', {toastId: "link"}); +export const notify = () => toast('링크 복사가 완료되었습니다', { toastId: 'link' }); export const downLoadNotify = () => toast('이미지 다운로드를 시작합니다'); -//test \ No newline at end of file +//test diff --git a/vite.config.ts b/vite.config.ts index 96c7208f..4a54b7af 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -12,6 +12,7 @@ export default defineConfig({ resolve: { alias: [ // { find: '/', replacement: path.resolve(__dirname, '/') }, + { find: 'src', replacement: path.resolve(__dirname, 'src') }, { find: 'pages', replacement: path.resolve(__dirname, 'src/pages') }, { find: 'components', replacement: path.resolve(__dirname, 'src/components') }, { find: 'assets', replacement: path.resolve(__dirname, 'src/assets') }, diff --git a/yarn.lock b/yarn.lock index 35168db7..dad7343b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1536,33 +1536,33 @@ "@svgr/hast-util-to-babel-ast" "^7.0.0" svg-parser "^2.0.4" -"@tanstack/query-core@5.45.0": - version "5.45.0" - resolved "https://registry.yarnpkg.com/@tanstack/query-core/-/query-core-5.45.0.tgz#47a662d311c2588867341238960ec21dc7f0714e" - integrity sha512-RVfIZQmFUTdjhSAAblvueimfngYyfN6HlwaJUPK71PKd7yi43Vs1S/rdimmZedPWX/WGppcq/U1HOj7O7FwYxw== +"@tanstack/query-core@5.51.21": + version "5.51.21" + resolved "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.51.21.tgz" + integrity sha512-POQxm42IUp6n89kKWF4IZi18v3fxQWFRolvBA6phNVmA8psdfB1MvDnGacCJdS+EOX12w/CyHM62z//rHmYmvw== -"@tanstack/query-devtools@5.37.1": - version "5.37.1" - resolved "https://registry.yarnpkg.com/@tanstack/query-devtools/-/query-devtools-5.37.1.tgz#8dcfa1488b4f2e353be7eede6691b0ad9197183b" - integrity sha512-XcG4IIHIv0YQKrexTqo2zogQWR1Sz672tX2KsfE9kzB+9zhx44vRKH5si4WDILE1PIWQpStFs/NnrDQrBAUQpg== +"@tanstack/query-devtools@5.51.16": + version "5.51.16" + resolved "https://registry.npmjs.org/@tanstack/query-devtools/-/query-devtools-5.51.16.tgz" + integrity sha512-ajwuq4WnkNCMj/Hy3KR8d3RtZ6PSKc1dD2vs2T408MdjgKzQ3klVoL6zDgVO7X+5jlb5zfgcO3thh4ojPhfIaw== "@tanstack/react-query-devtools@^5.45.1": - version "5.45.1" - resolved "https://registry.yarnpkg.com/@tanstack/react-query-devtools/-/react-query-devtools-5.45.1.tgz#bea7ba0ffd509f0930237c2df7feba9209f76aa6" - integrity sha512-4mrbk1g5jqlqh0pifZNsKzy7FtgeqgwzMICL4d6IJGayrrcrKq9K4N/OzRNbgRWrTn6YTY63qcAcKo+NJU2QMw== + version "5.51.21" + resolved "https://registry.npmjs.org/@tanstack/react-query-devtools/-/react-query-devtools-5.51.21.tgz" + integrity sha512-mi5ef8dvsS48GsG6/8M60O2EgrzPK1kNPngOcHBTlIUrB5dGkxP9fuHf05GQRxtSp5W5GlyeUpzOmtkKNpf9dQ== dependencies: - "@tanstack/query-devtools" "5.37.1" + "@tanstack/query-devtools" "5.51.16" "@tanstack/react-query@^5.45.1": - version "5.45.1" - resolved "https://registry.yarnpkg.com/@tanstack/react-query/-/react-query-5.45.1.tgz#a0ac6bb89b4a2c2b0251f6647a0a370d86f05347" - integrity sha512-mYYfJujKg2kxmkRRjA6nn4YKG3ITsKuH22f1kteJ5IuVQqgKUgbaSQfYwVP0gBS05mhwxO03HVpD0t7BMN7WOA== + version "5.51.21" + resolved "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.51.21.tgz" + integrity sha512-Q/V81x3sAYgCsxjwOkfLXfrmoG+FmDhLeHH5okC/Bp8Aaw2c33lbEo/mMcMnkxUPVtB2FLpzHT0tq3c+OlZEbw== dependencies: - "@tanstack/query-core" "5.45.0" + "@tanstack/query-core" "5.51.21" "@types/axios@^0.14.0": version "0.14.0" - resolved "https://registry.yarnpkg.com/@types/axios/-/axios-0.14.0.tgz#ec2300fbe7d7dddd7eb9d3abf87999964cafce46" + resolved "https://registry.npmjs.org/@types/axios/-/axios-0.14.0.tgz" integrity sha512-KqQnQbdYE54D7oa/UmYVMZKq7CO4l8DEENzOKc4aBRwxCXSlJXGz83flFx5L7AWrOQnmuN3kVsRdt+GZPPjiVQ== dependencies: axios "*" @@ -1649,9 +1649,9 @@ integrity sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w== "@types/react-copy-to-clipboard@^5.0.4": - version "5.0.4" - resolved "https://registry.yarnpkg.com/@types/react-copy-to-clipboard/-/react-copy-to-clipboard-5.0.4.tgz#558f2c38a97f53693e537815f6024f1e41e36a7e" - integrity sha512-otTJsJpofYAeaIeOwV5xBUGpo6exXG2HX7X4nseToCB2VgPEBxGBHCm/FecZ676doNR7HCSTVtmohxfG2b3/yQ== + version "5.0.7" + resolved "https://registry.npmjs.org/@types/react-copy-to-clipboard/-/react-copy-to-clipboard-5.0.7.tgz" + integrity sha512-Gft19D+as4M+9Whq1oglhmK49vqPhcLzk8WfvfLvaYMIPYanyfLy0+CwFucMJfdKoSFyySPmkkWn8/E6voQXjQ== dependencies: "@types/react" "*" @@ -1662,6 +1662,13 @@ dependencies: "@types/react" "*" +"@types/react-lottie@^1.2.10": + version "1.2.10" + resolved "https://registry.npmjs.org/@types/react-lottie/-/react-lottie-1.2.10.tgz" + integrity sha512-rCd1p3US4ELKJlqwVnP0h5b24zt5p9OCvKUoNpYExLqwbFZMWEiJ6EGLMmH7nmq5V7KomBIbWO2X/XRFsL0vCA== + dependencies: + "@types/react" "*" + "@types/react@*", "@types/react@^18.0.37": version "18.2.14" resolved "https://registry.npmjs.org/@types/react/-/react-18.2.14.tgz" @@ -1945,7 +1952,7 @@ axe-core@^4.6.2: axios@*, axios@^1.4.0: version "1.4.0" - resolved "https://registry.yarnpkg.com/axios/-/axios-1.4.0.tgz#38a7bf1224cd308de271146038b551d725f0be1f" + resolved "https://registry.npmjs.org/axios/-/axios-1.4.0.tgz" integrity sha512-S4XCWMEmzvo64T9GfvQDOXgYRDJ/wsSZc7Jvdgx5u1sd0JwsuPLqb3SYmusag+edF6ziyMensPVqLTSc1PiSEA== dependencies: follow-redirects "^1.15.0" @@ -2003,6 +2010,14 @@ babel-plugin-styled-components@^2.1.4: lodash "^4.17.21" picomatch "^2.3.1" +babel-runtime@^6.26.0: + version "6.26.0" + resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.26.0.tgz#965c7058668e82b55d7bfe04ff2337bc8b5647fe" + integrity sha512-ITKNuq2wKlW1fJg9sSW52eepoYgZBggvOAHC0u/CYu/qxQ9EVzThCgR69BnSXLHjy2f7SY5zaQ4yt7H9ZVxY2g== + dependencies: + core-js "^2.4.0" + regenerator-runtime "^0.11.0" + balanced-match@^1.0.0: version "1.0.2" resolved "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz" @@ -2124,7 +2139,7 @@ chokidar@^3.4.0: clsx@^1.1.1: version "1.2.1" - resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.2.1.tgz#0ddc4a20a549b59c93a4116bb26f5294ca17dc12" + resolved "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz" integrity sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg== color-convert@^1.9.0: @@ -2185,7 +2200,7 @@ copy-text-to-clipboard@^3.2.0: copy-to-clipboard@^3.3.1: version "3.3.3" - resolved "https://registry.yarnpkg.com/copy-to-clipboard/-/copy-to-clipboard-3.3.3.tgz#55ac43a1db8ae639a4bd99511c148cdd1b83a1b0" + resolved "https://registry.npmjs.org/copy-to-clipboard/-/copy-to-clipboard-3.3.3.tgz" integrity sha512-2KV8NhB5JqC3ky0r9PMCAZKbUHSwtEo4CwCs0KXgruG43gX5PMqDEBbVU4OUzw2MuAWUfsuFmWvEKG5QRfSnJA== dependencies: toggle-selection "^1.0.6" @@ -2197,6 +2212,11 @@ core-js-compat@^3.30.1, core-js-compat@^3.30.2: dependencies: browserslist "^4.21.5" +core-js@^2.4.0: + version "2.6.12" + resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.6.12.tgz#d9333dfa7b065e347cc5682219d6f690859cc2ec" + integrity sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ== + cosmiconfig@^7.0.0: version "7.1.0" resolved "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.1.0.tgz" @@ -3386,6 +3406,11 @@ loose-envify@^1.1.0, loose-envify@^1.4.0: dependencies: js-tokens "^3.0.0 || ^4.0.0" +lottie-web@^5.1.3: + version "5.12.2" + resolved "https://registry.yarnpkg.com/lottie-web/-/lottie-web-5.12.2.tgz#579ca9fe6d3fd9e352571edd3c0be162492f68e5" + integrity sha512-uvhvYPC8kGPjXT3MyKMrL3JitEAmDMp30lVkuq/590Mw9ok6pWcFCwXJveo0t5uqYw1UREQHofD+jVpdjBv8wg== + lru-cache@^5.1.1: version "5.1.1" resolved "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz" @@ -3838,16 +3863,16 @@ quick-lru@^4.0.1: react-copy-to-clipboard@^5.1.0: version "5.1.0" - resolved "https://registry.yarnpkg.com/react-copy-to-clipboard/-/react-copy-to-clipboard-5.1.0.tgz#09aae5ec4c62750ccb2e6421a58725eabc41255c" + resolved "https://registry.npmjs.org/react-copy-to-clipboard/-/react-copy-to-clipboard-5.1.0.tgz" integrity sha512-k61RsNgAayIJNoy9yDsYzDe/yAZAzEbEgcz3DZMhF686LEyukcE1hzurxe85JandPUG+yTfGVFzuEw3xt8WP/A== dependencies: copy-to-clipboard "^3.3.1" prop-types "^15.8.1" -react-date-object@^2.1.5: - version "2.1.7" - resolved "https://registry.yarnpkg.com/react-date-object/-/react-date-object-2.1.7.tgz#a21fff40ef18344fee3616f40ee86169c1e83f5e" - integrity sha512-810eaGk/xvQBJNncPvhwXaKcSwPRKX48jtY/5U5T1bSUnGFqmBdMvl4EVl76cyzQ8U3KX6hpF6xZ1c0eY9vvJA== +react-date-object@^2.1.8: + version "2.1.9" + resolved "https://registry.npmjs.org/react-date-object/-/react-date-object-2.1.9.tgz" + integrity sha512-BHxD/quWOTo9fLKV/cfL/M31ePoj4a1JaJ/CnOf8Ndg3mrkh4x9wEMMkCfTrzduxDOgU8ZgR8uarhqI5G71sTg== react-dom@^18.2.0: version "18.2.0" @@ -3858,9 +3883,9 @@ react-dom@^18.2.0: scheduler "^0.23.0" react-element-popper@^2.1.6: - version "2.1.6" - resolved "https://registry.yarnpkg.com/react-element-popper/-/react-element-popper-2.1.6.tgz#4afb912287d57de5d442fb85e76f4d7b94fde879" - integrity sha512-8va7mUmrKIkUnaM2t5Dyctd8cjgVgVcrv5vVD0FRay0sN6EPBCKa0bDi1/KmVDAjfgSIn7zQnjtc4VojcGrkgQ== + version "2.1.7" + resolved "https://registry.npmjs.org/react-element-popper/-/react-element-popper-2.1.7.tgz" + integrity sha512-tuM2OxKlW32h+6uFSK6EENHPeZ2OGgOipHfOAl+VLWEv9/j3QkSGbD+ADX3A9uJlmq24i37n28RjJmAbGTfpEg== react-error-boundary@^4.0.10: version "4.0.10" @@ -3874,12 +3899,20 @@ react-is@^16.13.1, react-is@^16.7.0: resolved "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz" integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ== +react-lottie@^1.2.4: + version "1.2.4" + resolved "https://registry.yarnpkg.com/react-lottie/-/react-lottie-1.2.4.tgz#999ccabff8afc82074588bc50bd75be6f8945161" + integrity sha512-kBGxI+MIZGBf4wZhNCWwHkMcVP+kbpmrLWH/SkO0qCKc7D7eSPcxQbfpsmsCo8v2KCBYjuGSou+xTqK44D/jMg== + dependencies: + babel-runtime "^6.26.0" + lottie-web "^5.1.3" + react-multi-date-picker@^4.1.2: - version "4.1.2" - resolved "https://registry.yarnpkg.com/react-multi-date-picker/-/react-multi-date-picker-4.1.2.tgz#a8ce21946d3b9785e3aab0b7ab48b5a72bd3ebde" - integrity sha512-slpfl4uzXs9mA31WvJQGqbOVbFVUR+dogSya2SEjC2AVvIKPMHf3fAaEmF6OKpgd7NDldlSpfVG7Ubhju/wB8w== + version "4.5.2" + resolved "https://registry.npmjs.org/react-multi-date-picker/-/react-multi-date-picker-4.5.2.tgz" + integrity sha512-FgWjZB3Z6IA6XpcWiLPk85PwcRUhOiYhKK42o5k672gD/n2I6rzPfQ8bUrldOIiF/Z7FfOCdH7a6FeubzqteLg== dependencies: - react-date-object "^2.1.5" + react-date-object "^2.1.8" react-element-popper "^2.1.6" react-refresh@^0.14.0: @@ -3904,7 +3937,7 @@ react-router@6.14.1: react-toastify@^9.1.3: version "9.1.3" - resolved "https://registry.yarnpkg.com/react-toastify/-/react-toastify-9.1.3.tgz#1e798d260d606f50e0fab5ee31daaae1d628c5ff" + resolved "https://registry.npmjs.org/react-toastify/-/react-toastify-9.1.3.tgz" integrity sha512-fPfb8ghtn/XMxw3LkxQBk3IyagNpF/LIKjOBflbexr2AWxAH1MJgvnESwEwBn9liLFXgTKWgBSdZpw9m4OTHTg== dependencies: clsx "^1.1.1" @@ -3944,7 +3977,7 @@ readdirp@~3.6.0: recoil-persist@^5.1.0: version "5.1.0" - resolved "https://registry.yarnpkg.com/recoil-persist/-/recoil-persist-5.1.0.tgz#c4232fe04f2e4b6afcc815baff56f2521f6dcde1" + resolved "https://registry.npmjs.org/recoil-persist/-/recoil-persist-5.1.0.tgz" integrity sha512-sew4k3uBVJjRWKCSFuBw07Y1p1pBOb0UxLJPxn4G2bX/9xNj+r2xlqYy/BRfyofR/ANfqBU04MIvulppU4ZC0w== recoil@^0.7.7: @@ -3974,6 +4007,11 @@ regenerate@^1.4.2: resolved "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz" integrity sha512-zrceR/XhGYU/d/opr2EKO7aRHUeiBI8qjtfHqADTwZd6Szfy16la6kqD0MIUs5z5hx6AaKa+PixpPrR289+I0A== +regenerator-runtime@^0.11.0: + version "0.11.1" + resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz#be05ad7f9bf7d22e056f9726cee5017fbf19e2e9" + integrity sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg== + regenerator-runtime@^0.13.11: version "0.13.11" resolved "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz" @@ -4315,11 +4353,6 @@ stylelint-config-concentric-order@^5.1.0: dependencies: stylelint-order "^5.0.0" -stylelint-config-prettier@^9.0.5: - version "9.0.5" - resolved "https://registry.npmjs.org/stylelint-config-prettier/-/stylelint-config-prettier-9.0.5.tgz" - integrity sha512-U44lELgLZhbAD/xy/vncZ2Pq8sh2TnpiPvo38Ifg9+zeioR+LAkHu0i6YORIOxFafZoVg0xqQwex6e6F25S5XA== - stylelint-config-recommended@^12.0.0: version "12.0.0" resolved "https://registry.npmjs.org/stylelint-config-recommended/-/stylelint-config-recommended-12.0.0.tgz" @@ -4470,7 +4503,7 @@ to-regex-range@^5.0.1: toggle-selection@^1.0.6: version "1.0.6" - resolved "https://registry.yarnpkg.com/toggle-selection/-/toggle-selection-1.0.6.tgz#6e45b1263f2017fa0acc7d89d78b15b8bf77da32" + resolved "https://registry.npmjs.org/toggle-selection/-/toggle-selection-1.0.6.tgz" integrity sha512-BiZS+C1OS8g/q2RRbJmy59xpyghNBqrr6k5L/uKBGRsTfxmu3ffiRnd8mlGPUVayg8pvfi5urfnu8TU7DVOkLQ== trim-newlines@^3.0.0: