From 17f5999a2a2d8af05492135036467505d85aa827 Mon Sep 17 00:00:00 2001 From: 03hoho03 Date: Fri, 10 May 2024 15:44:37 +0900 Subject: [PATCH 01/13] =?UTF-8?q?[#9]=20dialog=20=EB=B0=8F=20icons=20?= =?UTF-8?q?=EA=B4=80=EB=A0=A8=20=ED=8C=A8=ED=82=A4=EC=A7=80=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 479 +++++++++++++++++++++++++++++++++++++++++++++- package.json | 4 +- 2 files changed, 478 insertions(+), 5 deletions(-) diff --git a/package-lock.json b/package-lock.json index adf7401..7071d86 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", @@ -18,6 +19,7 @@ "react": "^18", "react-dom": "^18", "react-hook-form": "^7.51.4", + "react-icons": "^5.2.1", "styled-components": "^6.1.9" }, "devDependencies": { @@ -47,7 +49,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" }, @@ -583,6 +584,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", @@ -795,7 +1119,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": "*" } @@ -1171,6 +1495,17 @@ "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==", "dev": true }, + "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", @@ -2016,6 +2351,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", @@ -3291,6 +3631,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", @@ -3676,6 +4024,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", @@ -5392,12 +5748,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", @@ -5422,8 +5853,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", @@ -6475,6 +6905,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 8c185b6..f52da45 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", @@ -23,6 +24,7 @@ "react": "^18", "react-dom": "^18", "react-hook-form": "^7.51.4", + "react-icons": "^5.2.1", "styled-components": "^6.1.9" }, "devDependencies": { @@ -55,4 +57,4 @@ "public" ] } -} \ No newline at end of file +} From 16a019f45fec576933aaac252d0cf6247faabdbc Mon Sep 17 00:00:00 2001 From: 03hoho03 Date: Fri, 10 May 2024 15:45:15 +0900 Subject: [PATCH 02/13] =?UTF-8?q?[#7]=20=EA=B3=B5=ED=86=B5=20dialog=20?= =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EB=B0=8F=20=EA=B5=AC?= =?UTF-8?q?=EC=84=B1=EC=9A=94=EC=86=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/common/Dialog/Close.tsx | 12 ++++++ src/components/common/Dialog/Content.tsx | 44 ++++++++++++++++++++ src/components/common/Dialog/Description.tsx | 29 +++++++++++++ src/components/common/Dialog/Overlay.tsx | 29 +++++++++++++ src/components/common/Dialog/Portal.tsx | 12 ++++++ src/components/common/Dialog/Root.tsx | 7 ++++ src/components/common/Dialog/Title.tsx | 32 ++++++++++++++ src/components/common/Dialog/Trigger.tsx | 17 ++++++++ src/components/common/Dialog/index.ts | 19 +++++++++ 9 files changed, 201 insertions(+) create mode 100644 src/components/common/Dialog/Close.tsx create mode 100644 src/components/common/Dialog/Content.tsx create mode 100644 src/components/common/Dialog/Description.tsx create mode 100644 src/components/common/Dialog/Overlay.tsx create mode 100644 src/components/common/Dialog/Portal.tsx create mode 100644 src/components/common/Dialog/Root.tsx create mode 100644 src/components/common/Dialog/Title.tsx create mode 100644 src/components/common/Dialog/Trigger.tsx create mode 100644 src/components/common/Dialog/index.ts 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..0600ef3 --- /dev/null +++ b/src/components/common/Dialog/Content.tsx @@ -0,0 +1,44 @@ +'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: 360px; + min-height: 320px; + max-height: 85vh; + padding: 60px 0; + 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..094c70c --- /dev/null +++ b/src/components/common/Dialog/Description.tsx @@ -0,0 +1,29 @@ +'use client' + +import * as DialogPrimitive from '@radix-ui/react-dialog' +import styled from 'styled-components' + +interface StyledDescriptionProps { + fontSize?: number + fontWeight?: 300 | 400 | 500 | 600 | 700 | 800 +} +interface DialogDescriptionProps + extends DialogPrimitive.DialogDescriptionProps, + StyledDescriptionProps {} + +const StyledDescription = styled( + DialogPrimitive.Description, +)` + margin: 0; + color: black; + font-size: ${(props) => (props.fontSize ? `${props.fontSize}px` : '14px')}; + font-weight: ${(props) => (props.fontWeight ? props.fontWeight : 400)}; + line-height: 1.5; + padding: 0 20px; +` + +const DialogDescription = ({ children, ...props }: DialogDescriptionProps) => { + return {children} +} + +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..2f71a27 --- /dev/null +++ b/src/components/common/Dialog/Title.tsx @@ -0,0 +1,32 @@ +'use client' + +import * as DialogPrimitive from '@radix-ui/react-dialog' +import styled from 'styled-components' + +interface StyledTitleProps { + fontSize?: number + fontWeight?: 300 | 400 | 700 | 800 + textAlign?: 'left' | 'center' | 'right' +} +interface DialogTitleProps + extends DialogPrimitive.DialogTitleProps, + StyledTitleProps {} + +const StyledTitle = styled(DialogPrimitive.Title)` + margin: 0; + color: black; + font-size: ${(props) => (props.fontSize ? `${props.fontSize}px` : '20px')}; + font-weight: ${(props) => (props.fontWeight ? props.fontWeight : 800)}; + padding: 0 20px; + text-align: ${(props) => props.textAlign ?? 'left'}; +` + +const DialogTitle = ({ children, textAlign, ...props }: DialogTitleProps) => { + return ( + + {children} + + ) +} + +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..420ba1e --- /dev/null +++ b/src/components/common/Dialog/index.ts @@ -0,0 +1,19 @@ +import DialogRoot from './Root' +import DialogOverlay from './Overlay' +import DialogPortal from './Portal' +import DialogContent from './Content' +import DialogDescription from './Description' +import DialogTitle from './Title' +import DialogClose from './Close' +import DialogTrigger from './Trigger' + +export { + DialogRoot, + DialogClose, + DialogContent, + DialogDescription, + DialogOverlay, + DialogPortal, + DialogTitle, + DialogTrigger, +} From a3fb0aceb58ce5cc7d35a69eb2da3df89dbc4211 Mon Sep 17 00:00:00 2001 From: 03hoho03 Date: Fri, 10 May 2024 15:48:29 +0900 Subject: [PATCH 03/13] =?UTF-8?q?[#7]=20=EC=95=84=EC=9D=B4=EB=94=94?= =?UTF-8?q?=EC=96=B4=20=EA=B0=9C=EC=9A=94=20dialog?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/IbulDialog/IdeaOutline.tsx | 116 ++++++++++++++++++++++ 1 file changed, 116 insertions(+) create mode 100644 src/components/IbulDialog/IdeaOutline.tsx diff --git a/src/components/IbulDialog/IdeaOutline.tsx b/src/components/IbulDialog/IdeaOutline.tsx new file mode 100644 index 0000000..26e4306 --- /dev/null +++ b/src/components/IbulDialog/IdeaOutline.tsx @@ -0,0 +1,116 @@ +'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' + +const StyledDialogMainTitle = styled(DialogTitle)` + margin-bottom: 16px; +` +const StyledBottomBtn = styled.button` + font-family: inherit; + border-radius: 100%; + height: 28px; + width: 28px; + display: inline-flex; + align-items: center; + justify-content: center; + color: #c9c9c9; + background-color: #eeeeee; + position: absolute; + top: 10px; + right: 10px; + &:hover { + background-color: #9f9f9f; + } +` +const StyleBottomClosedBtn = styled.button` + position: absolute; + bottom: 0; + left: 0; + display: flex; + justify-content: center; + align-items: center; + height: 54px; + width: 360px; + background-color: ${(props) => props.theme.color.purple700}; + color: #fff; + border-bottom-left-radius: 14px; + border-bottom-right-radius: 14px; + &:hover { + cursor: pointer; + } +` + +const StyledDescriptionWrapper = styled.div` + display: flex; + flex-direction: column; + gap: 2px; + margin: 8px 0 16px; +` + +const IdeaOutline = () => { + return ( + + + + + + + + + 아이디어 개요 + + + + 해당 파트는 자신이 생각하는 아이디어를 마음껏 펼쳐보는 시간입니다. + 아이디어를 펼치기 전 시장 실패의 법칙에 대해 알아볼까요? + + + + 시장 실패의 법칙 + + + + 실패(Fail)는 출시(Launch), 운영(Operation) 또는 전제(Premise) + 때문입니다. + + + 코카콜라나 디즈니, 구글처럼 전 세계에서 가장 성공한 기업들 조차 + 신제품이 시장에서 실패하는 이유는 3번째 요인, 전제(Premise) + 때문입니다. + + + 아무리 디자인이 뛰어나고 엔지니어링이 절묘하고 마케팅이 화려해도 + ‘안 될 놈’이 실패라는 괴수에 잡아먹히는 것을 막을 수 없습니다. + + + 아이디어의 불패 법칙은 ‘유능하게 실행 했을 경우 성공할 아이디어’ + 즉, 될놈을 찾아 나서는 과정입니다. + + + + + + + + + 닫기 + + + + + ) +} + +export default IdeaOutline From eb395fb3c8622898f8d44d0755fc3e25869b5d1a Mon Sep 17 00:00:00 2001 From: 03hoho03 Date: Sat, 11 May 2024 12:50:59 +0900 Subject: [PATCH 04/13] =?UTF-8?q?[#9]=20component=20props=EC=97=90=20css?= =?UTF-8?q?=20prop=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/types/styled.d.ts | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) 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 {} } From 60e43f252c290a3cd31b1ef39b27cc996f01648a Mon Sep 17 00:00:00 2001 From: 03hoho03 Date: Sat, 11 May 2024 12:52:30 +0900 Subject: [PATCH 05/13] =?UTF-8?q?[#9]=20grey=EC=83=89=20=EC=B6=94=EA=B0=80?= =?UTF-8?q?=20=EB=B0=8F=20=EC=88=98=EC=A0=95=20fontWeight=20=EC=88=98?= =?UTF-8?q?=EC=A0=95,=20NanumFontFamily=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/styles/theme.ts | 16 +++++++++++++--- 1 file changed, 13 insertions(+), 3 deletions(-) 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 From 727a80db6171392f56478fc14f55bccb3f17c301 Mon Sep 17 00:00:00 2001 From: 03hoho03 Date: Sat, 11 May 2024 12:53:24 +0900 Subject: [PATCH 06/13] =?UTF-8?q?[#9]=20css=20=EA=B4=80=EB=A0=A8=20?= =?UTF-8?q?=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/IbulDialog/IdeaOutline.tsx | 79 ++++++++++++----------- 1 file changed, 41 insertions(+), 38 deletions(-) diff --git a/src/components/IbulDialog/IdeaOutline.tsx b/src/components/IbulDialog/IdeaOutline.tsx index 26e4306..a57979e 100644 --- a/src/components/IbulDialog/IdeaOutline.tsx +++ b/src/components/IbulDialog/IdeaOutline.tsx @@ -14,8 +14,17 @@ import { import styled from 'styled-components' import { FaX } from 'react-icons/fa6' -const StyledDialogMainTitle = styled(DialogTitle)` - margin-bottom: 16px; +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; @@ -25,14 +34,12 @@ const StyledBottomBtn = styled.button` display: inline-flex; align-items: center; justify-content: center; - color: #c9c9c9; - background-color: #eeeeee; + color: ${(props) => props.theme.color.grey500}; + background-color: ${(props) => props.theme.color.grey200}; position: absolute; top: 10px; right: 10px; - &:hover { - background-color: #9f9f9f; - } + cursor: pointer; ` const StyleBottomClosedBtn = styled.button` position: absolute; @@ -44,7 +51,7 @@ const StyleBottomClosedBtn = styled.button` height: 54px; width: 360px; background-color: ${(props) => props.theme.color.purple700}; - color: #fff; + color: ${(props) => props.theme.color.white}; border-bottom-left-radius: 14px; border-bottom-right-radius: 14px; &:hover { @@ -55,8 +62,6 @@ const StyleBottomClosedBtn = styled.button` const StyledDescriptionWrapper = styled.div` display: flex; flex-direction: column; - gap: 2px; - margin: 8px 0 16px; ` const IdeaOutline = () => { @@ -68,37 +73,35 @@ const IdeaOutline = () => { - - 아이디어 개요 - - - + + 아이디어 개요 + 해당 파트는 자신이 생각하는 아이디어를 마음껏 펼쳐보는 시간입니다. 아이디어를 펼치기 전 시장 실패의 법칙에 대해 알아볼까요? - - - 시장 실패의 법칙 - - - - 실패(Fail)는 출시(Launch), 운영(Operation) 또는 전제(Premise) - 때문입니다. - - - 코카콜라나 디즈니, 구글처럼 전 세계에서 가장 성공한 기업들 조차 - 신제품이 시장에서 실패하는 이유는 3번째 요인, 전제(Premise) - 때문입니다. - - - 아무리 디자인이 뛰어나고 엔지니어링이 절묘하고 마케팅이 화려해도 - ‘안 될 놈’이 실패라는 괴수에 잡아먹히는 것을 막을 수 없습니다. - - - 아이디어의 불패 법칙은 ‘유능하게 실행 했을 경우 성공할 아이디어’ - 즉, 될놈을 찾아 나서는 과정입니다. - - + + + 시장 실패의 법칙 + + + 실패(Fail)는 출시(Launch), 운영(Operation) 또는 전제(Premise) + 때문입니다. + + + 코카콜라나 디즈니, 구글처럼 전 세계에서 가장 성공한 기업들 조차 + 신제품이 시장에서 실패하는 이유는 3번째 요인, 전제(Premise) + 때문입니다. + + + 아무리 디자인이 뛰어나고 엔지니어링이 절묘하고 마케팅이 화려해도 + ‘안 될 놈’이 실패라는 괴수에 잡아먹히는 것을 막을 수 없습니다. + + + 아이디어의 불패 법칙은 ‘유능하게 실행 했을 경우 성공할 아이디어’ + 즉, 될놈을 찾아 나서는 과정입니다. + + + From 1700440d41c64a51e6b98aeb93598214d2602a51 Mon Sep 17 00:00:00 2001 From: 03hoho03 Date: Sat, 11 May 2024 12:54:49 +0900 Subject: [PATCH 07/13] =?UTF-8?q?[#9]=20size=20style=20=EC=B6=94=EA=B0=80?= =?UTF-8?q?=20=EB=B0=8F=20=EA=B8=B0=EB=B3=B8=20style=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/common/Dialog/Title.tsx | 56 ++++++++++++++++++-------- 1 file changed, 40 insertions(+), 16 deletions(-) diff --git a/src/components/common/Dialog/Title.tsx b/src/components/common/Dialog/Title.tsx index 2f71a27..043c0aa 100644 --- a/src/components/common/Dialog/Title.tsx +++ b/src/components/common/Dialog/Title.tsx @@ -1,32 +1,56 @@ 'use client' +import { theme } from '@/styles/theme' import * as DialogPrimitive from '@radix-ui/react-dialog' -import styled from 'styled-components' +import styled, { css } from 'styled-components' +interface DialogTitleSize { + [key: string]: { + fontSize: string + fontFamily?: string + } +} + +/** + * **size** : small, medium(default), large + */ interface StyledTitleProps { - fontSize?: number - fontWeight?: 300 | 400 | 700 | 800 - textAlign?: 'left' | 'center' | 'right' + size: string } interface DialogTitleProps extends DialogPrimitive.DialogTitleProps, StyledTitleProps {} +const DialogTitleSizes: DialogTitleSize = { + small: { + fontSize: '16px', + fontFamily: theme.NanumFontFamily.bold, + }, + medium: { + fontSize: '20px', + fontFamily: theme.NanumFontFamily.extraBold, + }, + large: { fontSize: '32px', fontFamily: theme.NanumFontFamily.extraBold }, +} + +const DialogTitleSizeStyles = css` + ${({ size }) => css` + font-size: ${DialogTitleSizes[size].fontSize}; + font-family: ${DialogTitleSizes[size].fontFamily}; + `} +` + const StyledTitle = styled(DialogPrimitive.Title)` - margin: 0; - color: black; - font-size: ${(props) => (props.fontSize ? `${props.fontSize}px` : '20px')}; - font-weight: ${(props) => (props.fontWeight ? props.fontWeight : 800)}; - padding: 0 20px; - text-align: ${(props) => props.textAlign ?? 'left'}; + color: ${(props) => props.theme.color.black}; + + ${DialogTitleSizeStyles} ` -const DialogTitle = ({ children, textAlign, ...props }: DialogTitleProps) => { - return ( - - {children} - - ) +const DialogTitle = ({ children, ...props }: DialogTitleProps) => { + return {children} +} +DialogTitle.defaultProps = { + size: 'medium', } export default DialogTitle From f5f6d7ef7969858156b29820d36d68f8b748ed86 Mon Sep 17 00:00:00 2001 From: 03hoho03 Date: Sat, 11 May 2024 13:00:33 +0900 Subject: [PATCH 08/13] =?UTF-8?q?[#9]=20=EA=B8=B0=EC=A1=B4=20props=20?= =?UTF-8?q?=EC=82=AD=EC=A0=9C=20=EB=B0=8F=20size,=20theme=20style=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80,=20=EA=B8=B0=EB=B3=B8=20css=20=EB=B3=80?= =?UTF-8?q?=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/common/Dialog/Description.tsx | 72 ++++++++++++++++++-- 1 file changed, 65 insertions(+), 7 deletions(-) diff --git a/src/components/common/Dialog/Description.tsx b/src/components/common/Dialog/Description.tsx index 094c70c..aebedb2 100644 --- a/src/components/common/Dialog/Description.tsx +++ b/src/components/common/Dialog/Description.tsx @@ -1,29 +1,87 @@ 'use client' +import { theme } from '@/styles/theme' import * as DialogPrimitive from '@radix-ui/react-dialog' -import styled from 'styled-components' +import styled, { css } from 'styled-components' +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 { - fontSize?: number - fontWeight?: 300 | 400 | 500 | 600 | 700 | 800 + size: string + theme: string } interface DialogDescriptionProps extends DialogPrimitive.DialogDescriptionProps, StyledDescriptionProps {} +const DialogDescriptionSizes: DialogDescriptionSize = { + small: { + fontSize: '12px', + }, + medium: { + fontSize: '14px', + }, + large: { + fontSize: '16px', + }, +} +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: black; - font-size: ${(props) => (props.fontSize ? `${props.fontSize}px` : '14px')}; - font-weight: ${(props) => (props.fontWeight ? props.fontWeight : 400)}; - line-height: 1.5; - padding: 0 20px; + line-height: 150%; + letter-spacing: -0.05em; + /* size */ + ${sizeStyles} + /* theme */ + ${themeStyles} ` const DialogDescription = ({ children, ...props }: DialogDescriptionProps) => { return {children} } +DialogDescription.defaultProps = { + size: 'small', + theme: 'primary', +} export default DialogDescription From c720cad534235ed297863a9aee2ca60b33052205 Mon Sep 17 00:00:00 2001 From: 03hoho03 Date: Sat, 11 May 2024 13:01:01 +0900 Subject: [PATCH 09/13] =?UTF-8?q?[#9]=20padding=EA=B0=92=20=EB=B3=80?= =?UTF-8?q?=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/common/Dialog/Content.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/common/Dialog/Content.tsx b/src/components/common/Dialog/Content.tsx index 0600ef3..6bf6c02 100644 --- a/src/components/common/Dialog/Content.tsx +++ b/src/components/common/Dialog/Content.tsx @@ -4,6 +4,7 @@ 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; @@ -18,7 +19,7 @@ const StyledContent = styled(DialogPrimitive.Content)` max-width: 360px; min-height: 320px; max-height: 85vh; - padding: 60px 0; + padding: 60px 20px 54px; outline: none; animation: contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1); From 4c19749f39405d016e7d738e3ecafd3c785c3fba Mon Sep 17 00:00:00 2001 From: 03hoho03 Date: Sat, 11 May 2024 13:01:58 +0900 Subject: [PATCH 10/13] =?UTF-8?q?[#9]=20=EC=A0=84=EC=97=AD=20theme=20grey?= =?UTF-8?q?=20=EB=B2=94=EC=9C=84=20=EB=B3=80=EA=B2=BD=EA=B0=92=20=EC=A0=81?= =?UTF-8?q?=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/common/button/Button.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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; From 96a596ed0ce88d2b7a06fd622f023197bf193d57 Mon Sep 17 00:00:00 2001 From: 03hoho03 Date: Sat, 11 May 2024 13:13:27 +0900 Subject: [PATCH 11/13] =?UTF-8?q?[#9]=20=EC=A0=88=EB=8C=80=EA=B2=BD?= =?UTF-8?q?=EB=A1=9C=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/common/Dialog/index.ts | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/src/components/common/Dialog/index.ts b/src/components/common/Dialog/index.ts index 420ba1e..5c3f8a7 100644 --- a/src/components/common/Dialog/index.ts +++ b/src/components/common/Dialog/index.ts @@ -1,11 +1,11 @@ -import DialogRoot from './Root' -import DialogOverlay from './Overlay' -import DialogPortal from './Portal' -import DialogContent from './Content' -import DialogDescription from './Description' -import DialogTitle from './Title' -import DialogClose from './Close' -import DialogTrigger from './Trigger' +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, From 6bd01d9411c16ebde7a59761f9c512d48df4937d Mon Sep 17 00:00:00 2001 From: 03hoho03 Date: Sun, 12 May 2024 12:39:53 +0900 Subject: [PATCH 12/13] =?UTF-8?q?[#7]=20=EC=9E=91=EC=84=B1=EC=88=9C?= =?UTF-8?q?=EC=84=9C=20=EC=BB=A8=EB=B2=A4=EC=85=98=20=EC=A0=81=EC=9A=A9=20?= =?UTF-8?q?=EB=B0=8F=20fontSize=20=EB=8B=A8=EC=9C=84=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/IbulDialog/IdeaOutline.tsx | 10 ++-- src/components/common/Dialog/Description.tsx | 62 ++++++++++---------- src/components/common/Dialog/Title.tsx | 42 ++++++------- 3 files changed, 57 insertions(+), 57 deletions(-) diff --git a/src/components/IbulDialog/IdeaOutline.tsx b/src/components/IbulDialog/IdeaOutline.tsx index a57979e..a9d2040 100644 --- a/src/components/IbulDialog/IdeaOutline.tsx +++ b/src/components/IbulDialog/IdeaOutline.tsx @@ -13,6 +13,7 @@ import { } 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; @@ -34,8 +35,8 @@ const StyledBottomBtn = styled.button` display: inline-flex; align-items: center; justify-content: center; - color: ${(props) => props.theme.color.grey500}; - background-color: ${(props) => props.theme.color.grey200}; + color: ${theme.color.grey500}; + background-color: ${theme.color.grey200}; position: absolute; top: 10px; right: 10px; @@ -50,15 +51,14 @@ const StyleBottomClosedBtn = styled.button` align-items: center; height: 54px; width: 360px; - background-color: ${(props) => props.theme.color.purple700}; - color: ${(props) => props.theme.color.white}; + 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; diff --git a/src/components/common/Dialog/Description.tsx b/src/components/common/Dialog/Description.tsx index aebedb2..507cbbd 100644 --- a/src/components/common/Dialog/Description.tsx +++ b/src/components/common/Dialog/Description.tsx @@ -4,42 +4,15 @@ import { theme } from '@/styles/theme' import * as DialogPrimitive from '@radix-ui/react-dialog' import styled, { css } from 'styled-components' -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 DialogDescriptionSizes: DialogDescriptionSize = { small: { - fontSize: '12px', + fontSize: '0.75rem', }, medium: { - fontSize: '14px', + fontSize: '0.875rem', }, large: { - fontSize: '16px', + fontSize: '1rem', }, } const DialogDescriptionThemes: DialogDescriptionTheme = { @@ -67,7 +40,7 @@ const StyledDescription = styled( )` /* 기본값 */ margin: 0; - color: black; + color: ${theme.color.black}; line-height: 150%; letter-spacing: -0.05em; /* size */ @@ -76,6 +49,33 @@ const StyledDescription = styled( ${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} } diff --git a/src/components/common/Dialog/Title.tsx b/src/components/common/Dialog/Title.tsx index 043c0aa..07f7649 100644 --- a/src/components/common/Dialog/Title.tsx +++ b/src/components/common/Dialog/Title.tsx @@ -4,33 +4,16 @@ import { theme } from '@/styles/theme' import * as DialogPrimitive from '@radix-ui/react-dialog' import styled, { css } from 'styled-components' -interface DialogTitleSize { - [key: string]: { - fontSize: string - fontFamily?: string - } -} - -/** - * **size** : small, medium(default), large - */ -interface StyledTitleProps { - size: string -} -interface DialogTitleProps - extends DialogPrimitive.DialogTitleProps, - StyledTitleProps {} - const DialogTitleSizes: DialogTitleSize = { small: { - fontSize: '16px', + fontSize: '1rem', fontFamily: theme.NanumFontFamily.bold, }, medium: { - fontSize: '20px', + fontSize: '1.25rem', fontFamily: theme.NanumFontFamily.extraBold, }, - large: { fontSize: '32px', fontFamily: theme.NanumFontFamily.extraBold }, + large: { fontSize: '2rem', fontFamily: theme.NanumFontFamily.extraBold }, } const DialogTitleSizeStyles = css` @@ -41,11 +24,28 @@ const DialogTitleSizeStyles = css` ` const StyledTitle = styled(DialogPrimitive.Title)` - color: ${(props) => props.theme.color.black}; + 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} } From 382b158d9bfdff3b97c9f83782b71415300815f8 Mon Sep 17 00:00:00 2001 From: 03hoho03 Date: Sun, 12 May 2024 17:46:07 +0900 Subject: [PATCH 13/13] =?UTF-8?q?[#7]=20=EC=84=B8=EB=B6=80=20css=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/IbulDialog/IdeaOutline.tsx | 3 ++- src/components/common/Dialog/Content.tsx | 2 +- src/components/common/Dialog/Description.tsx | 3 ++- src/components/common/Dialog/Title.tsx | 2 ++ 4 files changed, 7 insertions(+), 3 deletions(-) diff --git a/src/components/IbulDialog/IdeaOutline.tsx b/src/components/IbulDialog/IdeaOutline.tsx index a9d2040..8b88eb6 100644 --- a/src/components/IbulDialog/IdeaOutline.tsx +++ b/src/components/IbulDialog/IdeaOutline.tsx @@ -50,7 +50,7 @@ const StyleBottomClosedBtn = styled.button` justify-content: center; align-items: center; height: 54px; - width: 360px; + width: 353px; background-color: ${theme.color.purple700}; color: ${theme.color.white}; border-bottom-left-radius: 14px; @@ -62,6 +62,7 @@ const StyleBottomClosedBtn = styled.button` const StyledDescriptionWrapper = styled.div` display: flex; flex-direction: column; + gap: 5px; ` const IdeaOutline = () => { diff --git a/src/components/common/Dialog/Content.tsx b/src/components/common/Dialog/Content.tsx index 6bf6c02..e325f94 100644 --- a/src/components/common/Dialog/Content.tsx +++ b/src/components/common/Dialog/Content.tsx @@ -16,7 +16,7 @@ const StyledContent = styled(DialogPrimitive.Content)` left: 50%; transform: translate(-50%, -50%); width: 90vw; - max-width: 360px; + max-width: 353px; min-height: 320px; max-height: 85vh; padding: 60px 20px 54px; diff --git a/src/components/common/Dialog/Description.tsx b/src/components/common/Dialog/Description.tsx index 507cbbd..758a34e 100644 --- a/src/components/common/Dialog/Description.tsx +++ b/src/components/common/Dialog/Description.tsx @@ -41,8 +41,9 @@ const StyledDescription = styled( /* 기본값 */ margin: 0; color: ${theme.color.black}; - line-height: 150%; + line-height: 120%; letter-spacing: -0.05em; + white-space: pre-wrap; /* size */ ${sizeStyles} /* theme */ diff --git a/src/components/common/Dialog/Title.tsx b/src/components/common/Dialog/Title.tsx index 07f7649..e956f02 100644 --- a/src/components/common/Dialog/Title.tsx +++ b/src/components/common/Dialog/Title.tsx @@ -24,6 +24,8 @@ const DialogTitleSizeStyles = css` ` const StyledTitle = styled(DialogPrimitive.Title)` + line-height: 140%; + letter-spacing: -0.05em; color: ${theme.color.black}; ${DialogTitleSizeStyles}