diff --git a/package-lock.json b/package-lock.json
index e26ef39..6e220bf 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,7 @@
"version": "0.1.0",
"hasInstallScript": true,
"dependencies": {
+ "@radix-ui/react-dialog": "^1.0.5",
"@tanstack/react-query": "^5.34.1",
"axios": "^1.6.8",
"dayjs": "^1.11.11",
@@ -19,6 +20,7 @@
"react": "^18",
"react-dom": "^18",
"react-hook-form": "^7.51.4",
+ "react-icons": "^5.2.1",
"styled-components": "^6.1.9"
},
"devDependencies": {
@@ -59,7 +61,6 @@
"version": "7.24.5",
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.24.5.tgz",
"integrity": "sha512-Nms86NXrsaeU9vbBJKni6gXiEXZ4CVpYVzEjDH9Sb8vmZ3UljyA1GSOJl/6LGPO8EHLuSF9H+IxNXHPX8QHJ4g==",
- "dev": true,
"dependencies": {
"regenerator-runtime": "^0.14.0"
},
@@ -606,6 +607,329 @@
"url": "https://opencollective.com/unts"
}
},
+ "node_modules/@radix-ui/primitive": {
+ "version": "1.0.1",
+ "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.0.1.tgz",
+ "integrity": "sha512-yQ8oGX2GVsEYMWGxcovu1uGWPCxV5BFfeeYxqPmuAzUyLT9qmaMXSAhXpb0WrspIeqYzdJpkh2vHModJPgRIaw==",
+ "dependencies": {
+ "@babel/runtime": "^7.13.10"
+ }
+ },
+ "node_modules/@radix-ui/react-compose-refs": {
+ "version": "1.0.1",
+ "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.0.1.tgz",
+ "integrity": "sha512-fDSBgd44FKHa1FRMU59qBMPFcl2PZE+2nmqunj+BWFyYYjnhIDWL2ItDs3rrbJDQOtzt5nIebLCQc4QRfz6LJw==",
+ "dependencies": {
+ "@babel/runtime": "^7.13.10"
+ },
+ "peerDependencies": {
+ "@types/react": "*",
+ "react": "^16.8 || ^17.0 || ^18.0"
+ },
+ "peerDependenciesMeta": {
+ "@types/react": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/@radix-ui/react-context": {
+ "version": "1.0.1",
+ "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.0.1.tgz",
+ "integrity": "sha512-ebbrdFoYTcuZ0v4wG5tedGnp9tzcV8awzsxYph7gXUyvnNLuTIcCk1q17JEbnVhXAKG9oX3KtchwiMIAYp9NLg==",
+ "dependencies": {
+ "@babel/runtime": "^7.13.10"
+ },
+ "peerDependencies": {
+ "@types/react": "*",
+ "react": "^16.8 || ^17.0 || ^18.0"
+ },
+ "peerDependenciesMeta": {
+ "@types/react": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/@radix-ui/react-dialog": {
+ "version": "1.0.5",
+ "resolved": "https://registry.npmjs.org/@radix-ui/react-dialog/-/react-dialog-1.0.5.tgz",
+ "integrity": "sha512-GjWJX/AUpB703eEBanuBnIWdIXg6NvJFCXcNlSZk4xdszCdhrJgBoUd1cGk67vFO+WdA2pfI/plOpqz/5GUP6Q==",
+ "dependencies": {
+ "@babel/runtime": "^7.13.10",
+ "@radix-ui/primitive": "1.0.1",
+ "@radix-ui/react-compose-refs": "1.0.1",
+ "@radix-ui/react-context": "1.0.1",
+ "@radix-ui/react-dismissable-layer": "1.0.5",
+ "@radix-ui/react-focus-guards": "1.0.1",
+ "@radix-ui/react-focus-scope": "1.0.4",
+ "@radix-ui/react-id": "1.0.1",
+ "@radix-ui/react-portal": "1.0.4",
+ "@radix-ui/react-presence": "1.0.1",
+ "@radix-ui/react-primitive": "1.0.3",
+ "@radix-ui/react-slot": "1.0.2",
+ "@radix-ui/react-use-controllable-state": "1.0.1",
+ "aria-hidden": "^1.1.1",
+ "react-remove-scroll": "2.5.5"
+ },
+ "peerDependencies": {
+ "@types/react": "*",
+ "@types/react-dom": "*",
+ "react": "^16.8 || ^17.0 || ^18.0",
+ "react-dom": "^16.8 || ^17.0 || ^18.0"
+ },
+ "peerDependenciesMeta": {
+ "@types/react": {
+ "optional": true
+ },
+ "@types/react-dom": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/@radix-ui/react-dismissable-layer": {
+ "version": "1.0.5",
+ "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.0.5.tgz",
+ "integrity": "sha512-aJeDjQhywg9LBu2t/At58hCvr7pEm0o2Ke1x33B+MhjNmmZ17sy4KImo0KPLgsnc/zN7GPdce8Cnn0SWvwZO7g==",
+ "dependencies": {
+ "@babel/runtime": "^7.13.10",
+ "@radix-ui/primitive": "1.0.1",
+ "@radix-ui/react-compose-refs": "1.0.1",
+ "@radix-ui/react-primitive": "1.0.3",
+ "@radix-ui/react-use-callback-ref": "1.0.1",
+ "@radix-ui/react-use-escape-keydown": "1.0.3"
+ },
+ "peerDependencies": {
+ "@types/react": "*",
+ "@types/react-dom": "*",
+ "react": "^16.8 || ^17.0 || ^18.0",
+ "react-dom": "^16.8 || ^17.0 || ^18.0"
+ },
+ "peerDependenciesMeta": {
+ "@types/react": {
+ "optional": true
+ },
+ "@types/react-dom": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/@radix-ui/react-focus-guards": {
+ "version": "1.0.1",
+ "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-guards/-/react-focus-guards-1.0.1.tgz",
+ "integrity": "sha512-Rect2dWbQ8waGzhMavsIbmSVCgYxkXLxxR3ZvCX79JOglzdEy4JXMb98lq4hPxUbLr77nP0UOGf4rcMU+s1pUA==",
+ "dependencies": {
+ "@babel/runtime": "^7.13.10"
+ },
+ "peerDependencies": {
+ "@types/react": "*",
+ "react": "^16.8 || ^17.0 || ^18.0"
+ },
+ "peerDependenciesMeta": {
+ "@types/react": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/@radix-ui/react-focus-scope": {
+ "version": "1.0.4",
+ "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-scope/-/react-focus-scope-1.0.4.tgz",
+ "integrity": "sha512-sL04Mgvf+FmyvZeYfNu1EPAaaxD+aw7cYeIB9L9Fvq8+urhltTRaEo5ysKOpHuKPclsZcSUMKlN05x4u+CINpA==",
+ "dependencies": {
+ "@babel/runtime": "^7.13.10",
+ "@radix-ui/react-compose-refs": "1.0.1",
+ "@radix-ui/react-primitive": "1.0.3",
+ "@radix-ui/react-use-callback-ref": "1.0.1"
+ },
+ "peerDependencies": {
+ "@types/react": "*",
+ "@types/react-dom": "*",
+ "react": "^16.8 || ^17.0 || ^18.0",
+ "react-dom": "^16.8 || ^17.0 || ^18.0"
+ },
+ "peerDependenciesMeta": {
+ "@types/react": {
+ "optional": true
+ },
+ "@types/react-dom": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/@radix-ui/react-id": {
+ "version": "1.0.1",
+ "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.0.1.tgz",
+ "integrity": "sha512-tI7sT/kqYp8p96yGWY1OAnLHrqDgzHefRBKQ2YAkBS5ja7QLcZ9Z/uY7bEjPUatf8RomoXM8/1sMj1IJaE5UzQ==",
+ "dependencies": {
+ "@babel/runtime": "^7.13.10",
+ "@radix-ui/react-use-layout-effect": "1.0.1"
+ },
+ "peerDependencies": {
+ "@types/react": "*",
+ "react": "^16.8 || ^17.0 || ^18.0"
+ },
+ "peerDependenciesMeta": {
+ "@types/react": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/@radix-ui/react-portal": {
+ "version": "1.0.4",
+ "resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.0.4.tgz",
+ "integrity": "sha512-Qki+C/EuGUVCQTOTD5vzJzJuMUlewbzuKyUy+/iHM2uwGiru9gZeBJtHAPKAEkB5KWGi9mP/CHKcY0wt1aW45Q==",
+ "dependencies": {
+ "@babel/runtime": "^7.13.10",
+ "@radix-ui/react-primitive": "1.0.3"
+ },
+ "peerDependencies": {
+ "@types/react": "*",
+ "@types/react-dom": "*",
+ "react": "^16.8 || ^17.0 || ^18.0",
+ "react-dom": "^16.8 || ^17.0 || ^18.0"
+ },
+ "peerDependenciesMeta": {
+ "@types/react": {
+ "optional": true
+ },
+ "@types/react-dom": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/@radix-ui/react-presence": {
+ "version": "1.0.1",
+ "resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.0.1.tgz",
+ "integrity": "sha512-UXLW4UAbIY5ZjcvzjfRFo5gxva8QirC9hF7wRE4U5gz+TP0DbRk+//qyuAQ1McDxBt1xNMBTaciFGvEmJvAZCg==",
+ "dependencies": {
+ "@babel/runtime": "^7.13.10",
+ "@radix-ui/react-compose-refs": "1.0.1",
+ "@radix-ui/react-use-layout-effect": "1.0.1"
+ },
+ "peerDependencies": {
+ "@types/react": "*",
+ "@types/react-dom": "*",
+ "react": "^16.8 || ^17.0 || ^18.0",
+ "react-dom": "^16.8 || ^17.0 || ^18.0"
+ },
+ "peerDependenciesMeta": {
+ "@types/react": {
+ "optional": true
+ },
+ "@types/react-dom": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/@radix-ui/react-primitive": {
+ "version": "1.0.3",
+ "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-1.0.3.tgz",
+ "integrity": "sha512-yi58uVyoAcK/Nq1inRY56ZSjKypBNKTa/1mcL8qdl6oJeEaDbOldlzrGn7P6Q3Id5d+SYNGc5AJgc4vGhjs5+g==",
+ "dependencies": {
+ "@babel/runtime": "^7.13.10",
+ "@radix-ui/react-slot": "1.0.2"
+ },
+ "peerDependencies": {
+ "@types/react": "*",
+ "@types/react-dom": "*",
+ "react": "^16.8 || ^17.0 || ^18.0",
+ "react-dom": "^16.8 || ^17.0 || ^18.0"
+ },
+ "peerDependenciesMeta": {
+ "@types/react": {
+ "optional": true
+ },
+ "@types/react-dom": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/@radix-ui/react-slot": {
+ "version": "1.0.2",
+ "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.0.2.tgz",
+ "integrity": "sha512-YeTpuq4deV+6DusvVUW4ivBgnkHwECUu0BiN43L5UCDFgdhsRUWAghhTF5MbvNTPzmiFOx90asDSUjWuCNapwg==",
+ "dependencies": {
+ "@babel/runtime": "^7.13.10",
+ "@radix-ui/react-compose-refs": "1.0.1"
+ },
+ "peerDependencies": {
+ "@types/react": "*",
+ "react": "^16.8 || ^17.0 || ^18.0"
+ },
+ "peerDependenciesMeta": {
+ "@types/react": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/@radix-ui/react-use-callback-ref": {
+ "version": "1.0.1",
+ "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.0.1.tgz",
+ "integrity": "sha512-D94LjX4Sp0xJFVaoQOd3OO9k7tpBYNOXdVhkltUbGv2Qb9OXdrg/CpsjlZv7ia14Sylv398LswWBVVu5nqKzAQ==",
+ "dependencies": {
+ "@babel/runtime": "^7.13.10"
+ },
+ "peerDependencies": {
+ "@types/react": "*",
+ "react": "^16.8 || ^17.0 || ^18.0"
+ },
+ "peerDependenciesMeta": {
+ "@types/react": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/@radix-ui/react-use-controllable-state": {
+ "version": "1.0.1",
+ "resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.0.1.tgz",
+ "integrity": "sha512-Svl5GY5FQeN758fWKrjM6Qb7asvXeiZltlT4U2gVfl8Gx5UAv2sMR0LWo8yhsIZh2oQ0eFdZ59aoOOMV7b47VA==",
+ "dependencies": {
+ "@babel/runtime": "^7.13.10",
+ "@radix-ui/react-use-callback-ref": "1.0.1"
+ },
+ "peerDependencies": {
+ "@types/react": "*",
+ "react": "^16.8 || ^17.0 || ^18.0"
+ },
+ "peerDependenciesMeta": {
+ "@types/react": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/@radix-ui/react-use-escape-keydown": {
+ "version": "1.0.3",
+ "resolved": "https://registry.npmjs.org/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-1.0.3.tgz",
+ "integrity": "sha512-vyL82j40hcFicA+M4Ex7hVkB9vHgSse1ZWomAqV2Je3RleKGO5iM8KMOEtfoSB0PnIelMd2lATjTGMYqN5ylTg==",
+ "dependencies": {
+ "@babel/runtime": "^7.13.10",
+ "@radix-ui/react-use-callback-ref": "1.0.1"
+ },
+ "peerDependencies": {
+ "@types/react": "*",
+ "react": "^16.8 || ^17.0 || ^18.0"
+ },
+ "peerDependenciesMeta": {
+ "@types/react": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/@radix-ui/react-use-layout-effect": {
+ "version": "1.0.1",
+ "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.0.1.tgz",
+ "integrity": "sha512-v/5RegiJWYdoCvMnITBkNNx6bCj20fiaJnWtRkU18yITptraXjffz5Qbn05uOiQnOvi+dbkznkoaMltz1GnszQ==",
+ "dependencies": {
+ "@babel/runtime": "^7.13.10"
+ },
+ "peerDependencies": {
+ "@types/react": "*",
+ "react": "^16.8 || ^17.0 || ^18.0"
+ },
+ "peerDependenciesMeta": {
+ "@types/react": {
+ "optional": true
+ }
+ }
+ },
"node_modules/@rushstack/eslint-patch": {
"version": "1.10.2",
"resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.10.2.tgz",
@@ -837,7 +1161,7 @@
"version": "18.3.0",
"resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.0.tgz",
"integrity": "sha512-EhwApuTmMBmXuFOikhQLIBUn6uFg81SwLMOAUgodJF14SOBOCMdU04gDoYi0WOJJHD144TL32z4yDqCW3dnkQg==",
- "dev": true,
+ "devOptional": true,
"dependencies": {
"@types/react": "*"
}
@@ -1212,6 +1536,17 @@
"resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
"integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q=="
},
+ "node_modules/aria-hidden": {
+ "version": "1.2.4",
+ "resolved": "https://registry.npmjs.org/aria-hidden/-/aria-hidden-1.2.4.tgz",
+ "integrity": "sha512-y+CcFFwelSXpLZk/7fMB2mUbGtX9lKycf1MWJ7CaTIERyitVlyQx6C+sxcROU2BAJ24OiZyK+8wj2i8AlBoS3A==",
+ "dependencies": {
+ "tslib": "^2.0.0"
+ },
+ "engines": {
+ "node": ">=10"
+ }
+ },
"node_modules/aria-query": {
"version": "5.3.0",
"resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.0.tgz",
@@ -2073,6 +2408,11 @@
"npm": "1.2.8000 || >= 1.4.16"
}
},
+ "node_modules/detect-node-es": {
+ "version": "1.1.0",
+ "resolved": "https://registry.npmjs.org/detect-node-es/-/detect-node-es-1.1.0.tgz",
+ "integrity": "sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ=="
+ },
"node_modules/dir-glob": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
@@ -3359,6 +3699,14 @@
"url": "https://github.com/sponsors/ljharb"
}
},
+ "node_modules/get-nonce": {
+ "version": "1.0.1",
+ "resolved": "https://registry.npmjs.org/get-nonce/-/get-nonce-1.0.1.tgz",
+ "integrity": "sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==",
+ "engines": {
+ "node": ">=6"
+ }
+ },
"node_modules/get-stream": {
"version": "8.0.1",
"resolved": "https://registry.npmjs.org/get-stream/-/get-stream-8.0.1.tgz",
@@ -3744,6 +4092,14 @@
"node": ">= 0.4"
}
},
+ "node_modules/invariant": {
+ "version": "2.2.4",
+ "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
+ "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==",
+ "dependencies": {
+ "loose-envify": "^1.0.0"
+ }
+ },
"node_modules/ipaddr.js": {
"version": "1.9.1",
"resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz",
@@ -5585,12 +5941,87 @@
"react": "^16.8.0 || ^17 || ^18"
}
},
+ "node_modules/react-icons": {
+ "version": "5.2.1",
+ "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.2.1.tgz",
+ "integrity": "sha512-zdbW5GstTzXaVKvGSyTaBalt7HSfuK5ovrzlpyiWHAFXndXTdd/1hdDHI4xBM1Mn7YriT6aqESucFl9kEXzrdw==",
+ "peerDependencies": {
+ "react": "*"
+ }
+ },
"node_modules/react-is": {
"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
},
+ "node_modules/react-remove-scroll": {
+ "version": "2.5.5",
+ "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.5.5.tgz",
+ "integrity": "sha512-ImKhrzJJsyXJfBZ4bzu8Bwpka14c/fQt0k+cyFp/PBhTfyDnU5hjOtM4AG/0AMyy8oKzOTR0lDgJIM7pYXI0kw==",
+ "dependencies": {
+ "react-remove-scroll-bar": "^2.3.3",
+ "react-style-singleton": "^2.2.1",
+ "tslib": "^2.1.0",
+ "use-callback-ref": "^1.3.0",
+ "use-sidecar": "^1.1.2"
+ },
+ "engines": {
+ "node": ">=10"
+ },
+ "peerDependencies": {
+ "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+ "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+ },
+ "peerDependenciesMeta": {
+ "@types/react": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/react-remove-scroll-bar": {
+ "version": "2.3.6",
+ "resolved": "https://registry.npmjs.org/react-remove-scroll-bar/-/react-remove-scroll-bar-2.3.6.tgz",
+ "integrity": "sha512-DtSYaao4mBmX+HDo5YWYdBWQwYIQQshUV/dVxFxK+KM26Wjwp1gZ6rv6OC3oujI6Bfu6Xyg3TwK533AQutsn/g==",
+ "dependencies": {
+ "react-style-singleton": "^2.2.1",
+ "tslib": "^2.0.0"
+ },
+ "engines": {
+ "node": ">=10"
+ },
+ "peerDependencies": {
+ "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+ "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+ },
+ "peerDependenciesMeta": {
+ "@types/react": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/react-style-singleton": {
+ "version": "2.2.1",
+ "resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.1.tgz",
+ "integrity": "sha512-ZWj0fHEMyWkHzKYUr2Bs/4zU6XLmq9HsgBURm7g5pAVfyn49DgUiNgY2d4lXRlYSiCif9YBGpQleewkcqddc7g==",
+ "dependencies": {
+ "get-nonce": "^1.0.0",
+ "invariant": "^2.2.4",
+ "tslib": "^2.0.0"
+ },
+ "engines": {
+ "node": ">=10"
+ },
+ "peerDependencies": {
+ "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+ "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+ },
+ "peerDependenciesMeta": {
+ "@types/react": {
+ "optional": true
+ }
+ }
+ },
"node_modules/reflect.getprototypeof": {
"version": "1.0.6",
"resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.6.tgz",
@@ -5615,8 +6046,7 @@
"node_modules/regenerator-runtime": {
"version": "0.14.1",
"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
- "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==",
- "dev": true
+ "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw=="
},
"node_modules/regexp.prototype.flags": {
"version": "1.5.2",
@@ -6685,6 +7115,47 @@
"punycode": "^2.1.0"
}
},
+ "node_modules/use-callback-ref": {
+ "version": "1.3.2",
+ "resolved": "https://registry.npmjs.org/use-callback-ref/-/use-callback-ref-1.3.2.tgz",
+ "integrity": "sha512-elOQwe6Q8gqZgDA8mrh44qRTQqpIHDcZ3hXTLjBe1i4ph8XpNJnO+aQf3NaG+lriLopI4HMx9VjQLfPQ6vhnoA==",
+ "dependencies": {
+ "tslib": "^2.0.0"
+ },
+ "engines": {
+ "node": ">=10"
+ },
+ "peerDependencies": {
+ "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+ "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+ },
+ "peerDependenciesMeta": {
+ "@types/react": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/use-sidecar": {
+ "version": "1.1.2",
+ "resolved": "https://registry.npmjs.org/use-sidecar/-/use-sidecar-1.1.2.tgz",
+ "integrity": "sha512-epTbsLuzZ7lPClpz2TyryBfztm7m+28DlEv2ZCQ3MDr5ssiwyOwGH/e5F9CkfWjJ1t4clvI58yF822/GUkjjhw==",
+ "dependencies": {
+ "detect-node-es": "^1.1.0",
+ "tslib": "^2.0.0"
+ },
+ "engines": {
+ "node": ">=10"
+ },
+ "peerDependencies": {
+ "@types/react": "^16.9.0 || ^17.0.0 || ^18.0.0",
+ "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+ },
+ "peerDependenciesMeta": {
+ "@types/react": {
+ "optional": true
+ }
+ }
+ },
"node_modules/utils-merge": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz",
diff --git a/package.json b/package.json
index 02a201a..6e33be1 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
"format:fix": "prettier --write --ignore-path .gitignore ."
},
"dependencies": {
+ "@radix-ui/react-dialog": "^1.0.5",
"@tanstack/react-query": "^5.34.1",
"axios": "^1.6.8",
"dayjs": "^1.11.11",
@@ -24,6 +25,7 @@
"react": "^18",
"react-dom": "^18",
"react-hook-form": "^7.51.4",
+ "react-icons": "^5.2.1",
"styled-components": "^6.1.9"
},
"devDependencies": {
diff --git a/src/components/IbulDialog/IdeaOutline.tsx b/src/components/IbulDialog/IdeaOutline.tsx
new file mode 100644
index 0000000..8b88eb6
--- /dev/null
+++ b/src/components/IbulDialog/IdeaOutline.tsx
@@ -0,0 +1,120 @@
+'use client'
+
+import React from 'react'
+import {
+ DialogClose,
+ DialogContent,
+ DialogDescription,
+ DialogOverlay,
+ DialogPortal,
+ DialogRoot,
+ DialogTitle,
+ DialogTrigger,
+} from '../common/Dialog'
+import styled from 'styled-components'
+import { FaX } from 'react-icons/fa6'
+import { theme } from '@/styles/theme'
+
+const IdeaOutlineContainer = styled.div`
+ display: flex;
+ flex-direction: column;
+ gap: 18px;
+ margin-bottom: 15px;
+`
+const MarketFailureContainer = styled.div`
+ display: flex;
+ flex-direction: column;
+ gap: 7px;
+ margin-bottom: 34px;
+`
+const StyledBottomBtn = styled.button`
+ font-family: inherit;
+ border-radius: 100%;
+ height: 28px;
+ width: 28px;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ color: ${theme.color.grey500};
+ background-color: ${theme.color.grey200};
+ position: absolute;
+ top: 10px;
+ right: 10px;
+ cursor: pointer;
+`
+const StyleBottomClosedBtn = styled.button`
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ height: 54px;
+ width: 353px;
+ background-color: ${theme.color.purple700};
+ color: ${theme.color.white};
+ border-bottom-left-radius: 14px;
+ border-bottom-right-radius: 14px;
+ &:hover {
+ cursor: pointer;
+ }
+`
+const StyledDescriptionWrapper = styled.div`
+ display: flex;
+ flex-direction: column;
+ gap: 5px;
+`
+
+const IdeaOutline = () => {
+ return (
+
+
+
+
+
+
+
+
+ 아이디어 개요
+
+ 해당 파트는 자신이 생각하는 아이디어를 마음껏 펼쳐보는 시간입니다.
+ 아이디어를 펼치기 전 시장 실패의 법칙에 대해 알아볼까요?
+
+
+
+ 시장 실패의 법칙
+
+
+ 실패(Fail)는 출시(Launch), 운영(Operation) 또는 전제(Premise)
+ 때문입니다.
+
+
+ 코카콜라나 디즈니, 구글처럼 전 세계에서 가장 성공한 기업들 조차
+ 신제품이 시장에서 실패하는 이유는 3번째 요인, 전제(Premise)
+ 때문입니다.
+
+
+ 아무리 디자인이 뛰어나고 엔지니어링이 절묘하고 마케팅이 화려해도
+ ‘안 될 놈’이 실패라는 괴수에 잡아먹히는 것을 막을 수 없습니다.
+
+
+ 아이디어의 불패 법칙은 ‘유능하게 실행 했을 경우 성공할 아이디어’
+ 즉, 될놈을 찾아 나서는 과정입니다.
+
+
+
+
+
+
+
+
+
+ 닫기
+
+
+
+
+ )
+}
+
+export default IdeaOutline
diff --git a/src/components/common/Dialog/Close.tsx b/src/components/common/Dialog/Close.tsx
new file mode 100644
index 0000000..0c46293
--- /dev/null
+++ b/src/components/common/Dialog/Close.tsx
@@ -0,0 +1,12 @@
+'use client'
+
+import * as DialogPrimitive from '@radix-ui/react-dialog'
+
+const DialogClose = ({
+ children,
+ ...props
+}: DialogPrimitive.DialogCloseProps) => {
+ return {children}
+}
+
+export default DialogClose
diff --git a/src/components/common/Dialog/Content.tsx b/src/components/common/Dialog/Content.tsx
new file mode 100644
index 0000000..e325f94
--- /dev/null
+++ b/src/components/common/Dialog/Content.tsx
@@ -0,0 +1,45 @@
+'use client'
+
+import * as DialogPrimitive from '@radix-ui/react-dialog'
+import styled from 'styled-components'
+
+const StyledContent = styled(DialogPrimitive.Content)`
+ /* 기본값 */
+ position: relative;
+ background-color: white;
+ border-radius: 14px;
+ box-shadow:
+ hsl(206 22% 7% / 35%) 0px 10px 38px -10px,
+ hsl(206 22% 7% / 20%) 0px 10px 20px -15px;
+ position: fixed;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ width: 90vw;
+ max-width: 353px;
+ min-height: 320px;
+ max-height: 85vh;
+ padding: 60px 20px 54px;
+ outline: none;
+ animation: contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+
+ @keyframes contentShow {
+ from {
+ opacity: 0;
+ transform: translate(-50%, -48%) scale(0.96);
+ }
+ to {
+ opacity: 1;
+ transform: translate(-50%, -50%) scale(1);
+ }
+ }
+`
+
+const DialogContent = ({
+ children,
+ ...props
+}: DialogPrimitive.DialogContentProps) => {
+ return {children}
+}
+
+export default DialogContent
diff --git a/src/components/common/Dialog/Description.tsx b/src/components/common/Dialog/Description.tsx
new file mode 100644
index 0000000..758a34e
--- /dev/null
+++ b/src/components/common/Dialog/Description.tsx
@@ -0,0 +1,88 @@
+'use client'
+
+import { theme } from '@/styles/theme'
+import * as DialogPrimitive from '@radix-ui/react-dialog'
+import styled, { css } from 'styled-components'
+
+const DialogDescriptionSizes: DialogDescriptionSize = {
+ small: {
+ fontSize: '0.75rem',
+ },
+ medium: {
+ fontSize: '0.875rem',
+ },
+ large: {
+ fontSize: '1rem',
+ },
+}
+const DialogDescriptionThemes: DialogDescriptionTheme = {
+ primary: {
+ color: theme.color.black,
+ },
+ red: {
+ color: theme.color.red,
+ },
+}
+
+const sizeStyles = css`
+ ${({ size }) => css`
+ font-size: ${DialogDescriptionSizes[size].fontSize};
+ `}
+`
+const themeStyles = css`
+ ${({ theme }) => css`
+ color: ${DialogDescriptionThemes[theme].color};
+ `}
+`
+
+const StyledDescription = styled(
+ DialogPrimitive.Description,
+)`
+ /* 기본값 */
+ margin: 0;
+ color: ${theme.color.black};
+ line-height: 120%;
+ letter-spacing: -0.05em;
+ white-space: pre-wrap;
+ /* size */
+ ${sizeStyles}
+ /* theme */
+ ${themeStyles}
+`
+
+interface DialogDescriptionSize {
+ [key: string]: {
+ fontSize: string
+ padding?: string
+ }
+}
+interface DialogDescriptionTheme {
+ [key: string]: {
+ color: string
+ backgroundColor?: string
+ bolderColor?: string
+ }
+}
+
+/**
+ * **size**: large, medium, small(default)
+ *
+ * **theme**: primary(default), color
+ */
+interface StyledDescriptionProps {
+ size: string
+ theme: string
+}
+interface DialogDescriptionProps
+ extends DialogPrimitive.DialogDescriptionProps,
+ StyledDescriptionProps {}
+
+const DialogDescription = ({ children, ...props }: DialogDescriptionProps) => {
+ return {children}
+}
+DialogDescription.defaultProps = {
+ size: 'small',
+ theme: 'primary',
+}
+
+export default DialogDescription
diff --git a/src/components/common/Dialog/Overlay.tsx b/src/components/common/Dialog/Overlay.tsx
new file mode 100644
index 0000000..9cda3f3
--- /dev/null
+++ b/src/components/common/Dialog/Overlay.tsx
@@ -0,0 +1,29 @@
+'use client'
+
+import * as DialogPrimitive from '@radix-ui/react-dialog'
+import styled from 'styled-components'
+
+const StyledOverlay = styled(DialogPrimitive.Overlay)`
+ position: fixed;
+ inset: 0;
+ background-color: rgba(0, 0, 0, 0.5);
+ animation: overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+
+ @keyframes overlayShow {
+ from {
+ opacity: 0;
+ }
+ to {
+ opacity: 1;
+ }
+ }
+`
+
+const DialogOverlay = ({
+ children,
+ ...props
+}: DialogPrimitive.DialogOverlayProps) => {
+ return {children}
+}
+
+export default DialogOverlay
diff --git a/src/components/common/Dialog/Portal.tsx b/src/components/common/Dialog/Portal.tsx
new file mode 100644
index 0000000..fd1d193
--- /dev/null
+++ b/src/components/common/Dialog/Portal.tsx
@@ -0,0 +1,12 @@
+'use client'
+
+import * as DialogPrimitive from '@radix-ui/react-dialog'
+
+const DialogPortal = ({
+ children,
+ ...props
+}: DialogPrimitive.DialogPortalProps) => {
+ return {children}
+}
+
+export default DialogPortal
diff --git a/src/components/common/Dialog/Root.tsx b/src/components/common/Dialog/Root.tsx
new file mode 100644
index 0000000..0c44b73
--- /dev/null
+++ b/src/components/common/Dialog/Root.tsx
@@ -0,0 +1,7 @@
+'use client'
+
+import * as DialogPrimitive from '@radix-ui/react-dialog'
+
+const DialogRoot = DialogPrimitive.Root
+
+export default DialogRoot
diff --git a/src/components/common/Dialog/Title.tsx b/src/components/common/Dialog/Title.tsx
new file mode 100644
index 0000000..e956f02
--- /dev/null
+++ b/src/components/common/Dialog/Title.tsx
@@ -0,0 +1,58 @@
+'use client'
+
+import { theme } from '@/styles/theme'
+import * as DialogPrimitive from '@radix-ui/react-dialog'
+import styled, { css } from 'styled-components'
+
+const DialogTitleSizes: DialogTitleSize = {
+ small: {
+ fontSize: '1rem',
+ fontFamily: theme.NanumFontFamily.bold,
+ },
+ medium: {
+ fontSize: '1.25rem',
+ fontFamily: theme.NanumFontFamily.extraBold,
+ },
+ large: { fontSize: '2rem', fontFamily: theme.NanumFontFamily.extraBold },
+}
+
+const DialogTitleSizeStyles = css`
+ ${({ size }) => css`
+ font-size: ${DialogTitleSizes[size].fontSize};
+ font-family: ${DialogTitleSizes[size].fontFamily};
+ `}
+`
+
+const StyledTitle = styled(DialogPrimitive.Title)`
+ line-height: 140%;
+ letter-spacing: -0.05em;
+ color: ${theme.color.black};
+
+ ${DialogTitleSizeStyles}
+`
+
+interface DialogTitleSize {
+ [key: string]: {
+ fontSize: string
+ fontFamily?: string
+ }
+}
+
+/**
+ * **size** : small, medium(default), large
+ */
+interface StyledTitleProps {
+ size: string
+}
+interface DialogTitleProps
+ extends DialogPrimitive.DialogTitleProps,
+ StyledTitleProps {}
+
+const DialogTitle = ({ children, ...props }: DialogTitleProps) => {
+ return {children}
+}
+DialogTitle.defaultProps = {
+ size: 'medium',
+}
+
+export default DialogTitle
diff --git a/src/components/common/Dialog/Trigger.tsx b/src/components/common/Dialog/Trigger.tsx
new file mode 100644
index 0000000..0dde8b3
--- /dev/null
+++ b/src/components/common/Dialog/Trigger.tsx
@@ -0,0 +1,17 @@
+'use client'
+
+import * as DialogPrimitive from '@radix-ui/react-dialog'
+
+const DialogTrigger = ({
+ className,
+ children,
+ ...props
+}: DialogPrimitive.DialogTriggerProps) => {
+ return (
+
+ {children}
+
+ )
+}
+
+export default DialogTrigger
diff --git a/src/components/common/Dialog/index.ts b/src/components/common/Dialog/index.ts
new file mode 100644
index 0000000..5c3f8a7
--- /dev/null
+++ b/src/components/common/Dialog/index.ts
@@ -0,0 +1,19 @@
+import DialogRoot from '@/components/common/Dialog/Root'
+import DialogOverlay from '@/components/common/Dialog/Overlay'
+import DialogPortal from '@/components/common/Dialog/Portal'
+import DialogContent from '@/components/common/Dialog/Content'
+import DialogDescription from '@/components/common/Dialog/Description'
+import DialogTitle from '@/components/common/Dialog/Title'
+import DialogClose from '@/components/common/Dialog/Close'
+import DialogTrigger from '@/components/common/Dialog/Trigger'
+
+export {
+ DialogRoot,
+ DialogClose,
+ DialogContent,
+ DialogDescription,
+ DialogOverlay,
+ DialogPortal,
+ DialogTitle,
+ DialogTrigger,
+}
diff --git a/src/components/common/button/Button.tsx b/src/components/common/button/Button.tsx
index 06747bc..1a81588 100644
--- a/src/components/common/button/Button.tsx
+++ b/src/components/common/button/Button.tsx
@@ -47,7 +47,7 @@ const StyledWrapper = styled.button`
align-items: center;
background-color: ${({ status }) =>
- status === 'Disabled' ? theme.color.grey500 : theme.color.purple700};
+ status === 'Disabled' ? theme.color.grey400 : theme.color.purple700};
color: ${theme.color.white};
width: 350px;
height: 43px;
diff --git a/src/styles/theme.ts b/src/styles/theme.ts
index 67273de..4d53e86 100644
--- a/src/styles/theme.ts
+++ b/src/styles/theme.ts
@@ -6,15 +6,25 @@ export const theme = {
purple100: '#f3f4ff',
purple700: '#6c76f4',
grey100: '#fbfbfb',
+ grey200: '#eeeeee',
grey300: '#ECECEC',
- grey500: '#D9D9D9',
+ grey400: '#D9D9D9',
+ grey500: '#c9c9c9',
+ grey600: '#9f9f9f',
grey700: '#989898',
+ red: '#ff0000',
},
fontWeight: {
light: 300,
- normal: 500,
+ normal: 400, // regular
bold: 700,
- extraBold: 900,
+ extraBold: 800,
+ },
+ NanumFontFamily: {
+ light: 'NanumSquareLight',
+ normal: 'NanumSquare', // regular
+ bold: 'NanumSquareBold',
+ extraBold: 'NanumSquareExtraBold',
},
} as const
diff --git a/src/types/styled.d.ts b/src/types/styled.d.ts
index 771c8c2..918a351 100644
--- a/src/types/styled.d.ts
+++ b/src/types/styled.d.ts
@@ -1,6 +1,11 @@
import { Theme } from '@/styles/theme'
-import 'styled-components'
+import type { CSSProp } from 'styled-components'
+declare module 'react' {
+ interface Attributes {
+ css?: CSSProp
+ }
+}
declare module 'styled-components' {
export interface DefaultTheme extends Theme {}
}