diff --git a/client/package-lock.json b/client/package-lock.json index 4592df4bbca6f29ed160c3af6c7f2142f2ce8e35..47dbb9b38ae6d412741cedea386ff06e9413b99e 100644 --- a/client/package-lock.json +++ b/client/package-lock.json @@ -10,18 +10,22 @@ "@testing-library/jest-dom": "^5.14.1", "@testing-library/react": "^11.2.7", "@testing-library/user-event": "^12.8.3", + "axios": "^0.21.1", "bootstrap": "^4.6.0", "chart.js": "^3.4.0", "moment": "^2.29.1", + "ngx-spinner": "^12.0.0", "node-sass": "^6.0.1", "react": "^17.0.2", "react-bootstrap": "^1.6.1", "react-chartjs-2": "^3.0.3", + "react-copy-to-clipboard": "^5.0.3", "react-dom": "^17.0.2", "react-google-login": "^5.2.2", "react-kakao-login": "^2.1.0", "react-live-clock": "^5.2.0", "react-moment": "^1.1.1", + "react-redux": "^7.2.4", "react-router-dom": "^5.2.0", "react-scripts": "4.0.3", "react-use": "^17.2.4", @@ -29,6 +33,38 @@ "web-vitals": "^1.1.2" } }, + "node_modules/@angular/common": { + "version": "12.1.1", + "resolved": "https://registry.npmjs.org/@angular/common/-/common-12.1.1.tgz", + "integrity": "sha512-NnRwGMatzjthvDQ4+8tm09Ak5i27Qga8x4BdzINN1RjLmzQ0zW00Mn2AUGYEDZHt9HXVHff5stsZGqj+Ne4QJw==", + "peer": true, + "dependencies": { + "tslib": "^2.2.0" + }, + "engines": { + "node": "^12.14.1 || >=14.0.0" + }, + "peerDependencies": { + "@angular/core": "12.1.1", + "rxjs": "^6.5.3" + } + }, + "node_modules/@angular/core": { + "version": "12.1.1", + "resolved": "https://registry.npmjs.org/@angular/core/-/core-12.1.1.tgz", + "integrity": "sha512-7Q4na8zCXi4ITBG8kgbS+vnnVK0GDU2WXU80/il096+8YPFKfj6MyDWZH79KA3jrIg9/yhLwSQx8x8wnj8dqBA==", + "peer": true, + "dependencies": { + "tslib": "^2.2.0" + }, + "engines": { + "node": "^12.14.1 || >=14.0.0" + }, + "peerDependencies": { + "rxjs": "^6.5.3", + "zone.js": "~0.11.4" + } + }, "node_modules/@babel/code-frame": { "version": "7.14.5", "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.14.5.tgz", @@ -3503,6 +3539,15 @@ "@types/node": "*" } }, + "node_modules/@types/hoist-non-react-statics": { + "version": "3.3.1", + "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz", + "integrity": "sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==", + "dependencies": { + "@types/react": "*", + "hoist-non-react-statics": "^3.3.0" + } + }, "node_modules/@types/html-minifier-terser": { "version": "5.1.1", "resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-5.1.1.tgz", @@ -3608,6 +3653,17 @@ "csstype": "^3.0.2" } }, + "node_modules/@types/react-redux": { + "version": "7.1.16", + "resolved": "https://registry.npmjs.org/@types/react-redux/-/react-redux-7.1.16.tgz", + "integrity": "sha512-f/FKzIrZwZk7YEO9E1yoxIuDNRiDducxkFlkw/GNMGEnK9n4K8wJzlJBghpSuOVDgEUHoDkDF7Gi9lHNQR4siw==", + "dependencies": { + "@types/hoist-non-react-statics": "^3.3.0", + "@types/react": "*", + "hoist-non-react-statics": "^3.3.0", + "redux": "^4.0.0" + } + }, "node_modules/@types/react-transition-group": { "version": "4.4.1", "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.1.tgz", @@ -4606,6 +4662,14 @@ "node": ">=4" } }, + "node_modules/axios": { + "version": "0.21.1", + "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.1.tgz", + "integrity": "sha512-dKQiRHxGD9PPRIUNIWvZhPTPpl1rf/OxTYKsqKUDjBwYylTvV7SjSHJb9ratfyzM6wCdLCOYLzs73qpg5c4iGA==", + "dependencies": { + "follow-redirects": "^1.10.0" + } + }, "node_modules/axobject-query": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz", @@ -14457,6 +14521,18 @@ "resolved": "https://registry.npmjs.org/next-tick/-/next-tick-1.0.0.tgz", "integrity": "sha1-yobR/ogoFpsBICCOPchCS524NCw=" }, + "node_modules/ngx-spinner": { + "version": "12.0.0", + "resolved": "https://registry.npmjs.org/ngx-spinner/-/ngx-spinner-12.0.0.tgz", + "integrity": "sha512-0BIaLQDBwNApdSWfKYnYA4hSpfgd2bZ9ptBTB+1tOYJHULg67TRqVYswR6H4tNqmGfA8KNivTYXcY7/6RkyjyA==", + "dependencies": { + "tslib": "^2.1.0" + }, + "peerDependencies": { + "@angular/common": "^12.0.0", + "@angular/core": "^12.0.0" + } + }, "node_modules/nice-try": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/nice-try/-/nice-try-1.0.5.tgz", @@ -17247,6 +17323,18 @@ "react": "^16.8.0 || ^17.0.0" } }, + "node_modules/react-copy-to-clipboard": { + "version": "5.0.3", + "resolved": "https://registry.npmjs.org/react-copy-to-clipboard/-/react-copy-to-clipboard-5.0.3.tgz", + "integrity": "sha512-9S3j+m+UxDZOM0Qb8mhnT/rMR0NGSrj9A/073yz2DSxPMYhmYFBMYIdI2X4o8AjOjyFsSNxDRnCX6s/gRxpriw==", + "dependencies": { + "copy-to-clipboard": "^3", + "prop-types": "^15.5.8" + }, + "peerDependencies": { + "react": "^15.3.0 || ^16.0.0 || ^17.0.0" + } + }, "node_modules/react-dev-utils": { "version": "11.0.4", "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-11.0.4.tgz", @@ -17498,6 +17586,35 @@ "node": ">=6.9.0" } }, + "node_modules/react-redux": { + "version": "7.2.4", + "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-7.2.4.tgz", + "integrity": "sha512-hOQ5eOSkEJEXdpIKbnRyl04LhaWabkDPV+Ix97wqQX3T3d2NQ8DUblNXXtNMavc7DpswyQM6xfaN4HQDKNY2JA==", + "dependencies": { + "@babel/runtime": "^7.12.1", + "@types/react-redux": "^7.1.16", + "hoist-non-react-statics": "^3.3.2", + "loose-envify": "^1.4.0", + "prop-types": "^15.7.2", + "react-is": "^16.13.1" + }, + "peerDependencies": { + "react": "^16.8.3 || ^17" + }, + "peerDependenciesMeta": { + "react-dom": { + "optional": true + }, + "react-native": { + "optional": true + } + } + }, + "node_modules/react-redux/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==" + }, "node_modules/react-refresh": { "version": "0.8.3", "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.8.3.tgz", @@ -17892,6 +18009,14 @@ "node": ">=8" } }, + "node_modules/redux": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/redux/-/redux-4.1.0.tgz", + "integrity": "sha512-uI2dQN43zqLWCt6B/BMGRMY6db7TTY4qeHHfGeKb3EOhmOKjU3KdWvNLJyqaHRksv/ErdNH7cFZWg9jXtewy4g==", + "dependencies": { + "@babel/runtime": "^7.9.2" + } + }, "node_modules/regenerate": { "version": "1.4.2", "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz", @@ -18495,6 +18620,24 @@ "aproba": "^1.1.1" } }, + "node_modules/rxjs": { + "version": "6.6.7", + "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.6.7.tgz", + "integrity": "sha512-hTdwr+7yYNIT5n4AMYp85KA6yw2Va0FLa3Rguvbpa4W3I5xynaBZo41cM3XM+4Q6fRMj3sBYIR1VAmZMXYJvRQ==", + "peer": true, + "dependencies": { + "tslib": "^1.9.0" + }, + "engines": { + "npm": ">=2.0.0" + } + }, + "node_modules/rxjs/node_modules/tslib": { + "version": "1.14.1", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz", + "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==", + "peer": true + }, "node_modules/safe-buffer": { "version": "5.1.2", "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz", @@ -23370,9 +23513,36 @@ "funding": { "url": "https://github.com/sponsors/sindresorhus" } + }, + "node_modules/zone.js": { + "version": "0.11.4", + "resolved": "https://registry.npmjs.org/zone.js/-/zone.js-0.11.4.tgz", + "integrity": "sha512-DDh2Ab+A/B+9mJyajPjHFPWfYU1H+pdun4wnnk0OcQTNjem1XQSZ2CDW+rfZEUDjv5M19SBqAkjZi0x5wuB5Qw==", + "peer": true, + "dependencies": { + "tslib": "^2.0.0" + } } }, "dependencies": { + "@angular/common": { + "version": "12.1.1", + "resolved": "https://registry.npmjs.org/@angular/common/-/common-12.1.1.tgz", + "integrity": "sha512-NnRwGMatzjthvDQ4+8tm09Ak5i27Qga8x4BdzINN1RjLmzQ0zW00Mn2AUGYEDZHt9HXVHff5stsZGqj+Ne4QJw==", + "peer": true, + "requires": { + "tslib": "^2.2.0" + } + }, + "@angular/core": { + "version": "12.1.1", + "resolved": "https://registry.npmjs.org/@angular/core/-/core-12.1.1.tgz", + "integrity": "sha512-7Q4na8zCXi4ITBG8kgbS+vnnVK0GDU2WXU80/il096+8YPFKfj6MyDWZH79KA3jrIg9/yhLwSQx8x8wnj8dqBA==", + "peer": true, + "requires": { + "tslib": "^2.2.0" + } + }, "@babel/code-frame": { "version": "7.14.5", "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.14.5.tgz", @@ -25805,6 +25975,15 @@ "@types/node": "*" } }, + "@types/hoist-non-react-statics": { + "version": "3.3.1", + "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz", + "integrity": "sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==", + "requires": { + "@types/react": "*", + "hoist-non-react-statics": "^3.3.0" + } + }, "@types/html-minifier-terser": { "version": "5.1.1", "resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-5.1.1.tgz", @@ -25910,6 +26089,17 @@ "csstype": "^3.0.2" } }, + "@types/react-redux": { + "version": "7.1.16", + "resolved": "https://registry.npmjs.org/@types/react-redux/-/react-redux-7.1.16.tgz", + "integrity": "sha512-f/FKzIrZwZk7YEO9E1yoxIuDNRiDducxkFlkw/GNMGEnK9n4K8wJzlJBghpSuOVDgEUHoDkDF7Gi9lHNQR4siw==", + "requires": { + "@types/hoist-non-react-statics": "^3.3.0", + "@types/react": "*", + "hoist-non-react-statics": "^3.3.0", + "redux": "^4.0.0" + } + }, "@types/react-transition-group": { "version": "4.4.1", "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.1.tgz", @@ -26690,6 +26880,14 @@ "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.2.3.tgz", "integrity": "sha512-pXnVMfJKSIWU2Ml4JHP7pZEPIrgBO1Fd3WGx+fPBsS+KRGhE4vxooD8XBGWbQOIVSZsVK7pUDBBkCicNu80yzQ==" }, + "axios": { + "version": "0.21.1", + "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.1.tgz", + "integrity": "sha512-dKQiRHxGD9PPRIUNIWvZhPTPpl1rf/OxTYKsqKUDjBwYylTvV7SjSHJb9ratfyzM6wCdLCOYLzs73qpg5c4iGA==", + "requires": { + "follow-redirects": "^1.10.0" + } + }, "axobject-query": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz", @@ -34251,6 +34449,14 @@ "resolved": "https://registry.npmjs.org/next-tick/-/next-tick-1.0.0.tgz", "integrity": "sha1-yobR/ogoFpsBICCOPchCS524NCw=" }, + "ngx-spinner": { + "version": "12.0.0", + "resolved": "https://registry.npmjs.org/ngx-spinner/-/ngx-spinner-12.0.0.tgz", + "integrity": "sha512-0BIaLQDBwNApdSWfKYnYA4hSpfgd2bZ9ptBTB+1tOYJHULg67TRqVYswR6H4tNqmGfA8KNivTYXcY7/6RkyjyA==", + "requires": { + "tslib": "^2.1.0" + } + }, "nice-try": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/nice-try/-/nice-try-1.0.5.tgz", @@ -36462,6 +36668,15 @@ "lodash": "^4.17.19" } }, + "react-copy-to-clipboard": { + "version": "5.0.3", + "resolved": "https://registry.npmjs.org/react-copy-to-clipboard/-/react-copy-to-clipboard-5.0.3.tgz", + "integrity": "sha512-9S3j+m+UxDZOM0Qb8mhnT/rMR0NGSrj9A/073yz2DSxPMYhmYFBMYIdI2X4o8AjOjyFsSNxDRnCX6s/gRxpriw==", + "requires": { + "copy-to-clipboard": "^3", + "prop-types": "^15.5.8" + } + }, "react-dev-utils": { "version": "11.0.4", "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-11.0.4.tgz", @@ -36654,6 +36869,26 @@ } } }, + "react-redux": { + "version": "7.2.4", + "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-7.2.4.tgz", + "integrity": "sha512-hOQ5eOSkEJEXdpIKbnRyl04LhaWabkDPV+Ix97wqQX3T3d2NQ8DUblNXXtNMavc7DpswyQM6xfaN4HQDKNY2JA==", + "requires": { + "@babel/runtime": "^7.12.1", + "@types/react-redux": "^7.1.16", + "hoist-non-react-statics": "^3.3.2", + "loose-envify": "^1.4.0", + "prop-types": "^15.7.2", + "react-is": "^16.13.1" + }, + "dependencies": { + "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==" + } + } + }, "react-refresh": { "version": "0.8.3", "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.8.3.tgz", @@ -36974,6 +37209,14 @@ "strip-indent": "^3.0.0" } }, + "redux": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/redux/-/redux-4.1.0.tgz", + "integrity": "sha512-uI2dQN43zqLWCt6B/BMGRMY6db7TTY4qeHHfGeKb3EOhmOKjU3KdWvNLJyqaHRksv/ErdNH7cFZWg9jXtewy4g==", + "requires": { + "@babel/runtime": "^7.9.2" + } + }, "regenerate": { "version": "1.4.2", "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz", @@ -37448,6 +37691,23 @@ "aproba": "^1.1.1" } }, + "rxjs": { + "version": "6.6.7", + "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.6.7.tgz", + "integrity": "sha512-hTdwr+7yYNIT5n4AMYp85KA6yw2Va0FLa3Rguvbpa4W3I5xynaBZo41cM3XM+4Q6fRMj3sBYIR1VAmZMXYJvRQ==", + "peer": true, + "requires": { + "tslib": "^1.9.0" + }, + "dependencies": { + "tslib": { + "version": "1.14.1", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz", + "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==", + "peer": true + } + } + }, "safe-buffer": { "version": "5.1.2", "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz", @@ -41351,6 +41611,15 @@ "version": "0.1.0", "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz", "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==" + }, + "zone.js": { + "version": "0.11.4", + "resolved": "https://registry.npmjs.org/zone.js/-/zone.js-0.11.4.tgz", + "integrity": "sha512-DDh2Ab+A/B+9mJyajPjHFPWfYU1H+pdun4wnnk0OcQTNjem1XQSZ2CDW+rfZEUDjv5M19SBqAkjZi0x5wuB5Qw==", + "peer": true, + "requires": { + "tslib": "^2.0.0" + } } } } diff --git a/client/package.json b/client/package.json index 17e6cf80928d0a6f1f8da06915fd5bceba0e512c..2378857d1cec94fe07519b8b35b54b7c8473dac0 100644 --- a/client/package.json +++ b/client/package.json @@ -6,18 +6,22 @@ "@testing-library/jest-dom": "^5.14.1", "@testing-library/react": "^11.2.7", "@testing-library/user-event": "^12.8.3", + "axios": "^0.21.1", "bootstrap": "^4.6.0", "chart.js": "^3.4.0", "moment": "^2.29.1", + "ngx-spinner": "^12.0.0", "node-sass": "^6.0.1", "react": "^17.0.2", "react-bootstrap": "^1.6.1", "react-chartjs-2": "^3.0.3", + "react-copy-to-clipboard": "^5.0.3", "react-dom": "^17.0.2", "react-google-login": "^5.2.2", "react-kakao-login": "^2.1.0", "react-live-clock": "^5.2.0", "react-moment": "^1.1.1", + "react-redux": "^7.2.4", "react-router-dom": "^5.2.0", "react-scripts": "4.0.3", "react-use": "^17.2.4", diff --git a/client/public/index.html b/client/public/index.html index 4c90be487676a2fe005d73fdbd65b12880a0e8ad..c712be6236a73a6c7f7bda3ff202b886bb93d198 100644 --- a/client/public/index.html +++ b/client/public/index.html @@ -7,7 +7,7 @@ - + EUE, make your day - - + + diff --git a/client/public/manifest.json b/client/public/manifest.json index 080d6c77ac21bb2ef88a6992b2b73ad93daaca92..61c5b6fae21fbc2878dc4ebe6e11b4fecbf43220 100644 --- a/client/public/manifest.json +++ b/client/public/manifest.json @@ -8,7 +8,7 @@ "type": "image/x-icon" }, { - "src": "logo192.png", + "src": "images/Kakao.png", "type": "image/png", "sizes": "192x192" }, diff --git a/client/src/App.css b/client/src/App.css index 969040a60c1fd7c9c474a0e056b23d1ea767eea4..efa848dadbf1a8e140ceb8027d814a4006ad3a50 100644 --- a/client/src/App.css +++ b/client/src/App.css @@ -2,13 +2,21 @@ body { font-family: "Noto Sans KR", sans-serif !important; - + } + .a:hover { color: white; } -.btn:active { - color : rgb(250, 220, 0); + +.btn-primary:active { + outline: white !important; + border-color: white !important; +} + +.card .card-title { + color: rgb(109, 110, 109); + /* background-color: ; */ } .form-group .form-control { @@ -19,6 +27,7 @@ body { border-radius: 40px; background-color: rgb(110, 189, 142); border-color: ivory; + color: white; } #logpng { diff --git a/client/src/App.js b/client/src/App.js index f31d140eb4f7cf8821d4d3549c069e81d441911e..529ad22cd5c9dbb52664994fce36ecfa06b76866 100644 --- a/client/src/App.js +++ b/client/src/App.js @@ -2,6 +2,7 @@ import React from 'react'; import { BrowserRouter as Router, Route } from 'react-router-dom'; import './App.css'; import Home from './pages/Home'; +import Oauth from './components/Oauth'; function App() { @@ -10,6 +11,7 @@ function App() { <> + diff --git a/client/src/App.scss b/client/src/App.scss deleted file mode 100644 index fc5b9c4f81131bf864fb2e108128129ec40228c2..0000000000000000000000000000000000000000 --- a/client/src/App.scss +++ /dev/null @@ -1,18 +0,0 @@ -@media (max-width: 767.98px) { - body { - padding-top: 10px; - padding-bottom: 10px; - margin: 'auto' - - } - } - -@media (min-width: 768px) { - body { - padding-top: 20px; - padding-bottom: 20px; - margin: 'auto' - - } - - } \ No newline at end of file diff --git a/client/src/components/ChartDoughnut.js b/client/src/components/ChartDoughnut.js index 0fa24f46f4fcd32cd6a39e1c2c14b606442e7538..489646d12dd6b607f9e5d29aca26bd6ea33c2f80 100644 --- a/client/src/components/ChartDoughnut.js +++ b/client/src/components/ChartDoughnut.js @@ -3,15 +3,16 @@ import { Container, Row, Card, Table, Button } from 'react-bootstrap'; import { Doughnut } from 'react-chartjs-2' function ChartDoughnut() { - const fontstyl = { + const cardstyled = { fontSize: '0.5em', margin: 'auto', padding: '1em', display: 'flex', justifyContent: 'center', width: '100%', - borderWidth: '2px', - borderColor: 'rgba(195, 195, 195, 0.753)', + borderWidth: '1.5px', + borderRadius: '20px', + borderColor: '#04AB70', color: 'rgb(110, 189, 142)' } const btnstyled = { @@ -72,7 +73,7 @@ function ChartDoughnut() { <> - + - + - ) } diff --git a/client/src/components/EueSuggest.js b/client/src/components/EueSuggest.js index f94d3ea1a52a5e4a7aa9be2e1e8949d52df435f6..1406fe3efdb00b14a8fb234432ed7e0d966cc635 100644 --- a/client/src/components/EueSuggest.js +++ b/client/src/components/EueSuggest.js @@ -2,15 +2,16 @@ import React from 'react' import { Container, Row, Card, Table, Button } from 'react-bootstrap'; function EueSuggest() { - const fontstyl = { + const cardstyled = { fontSize: '0.5em', margin: 'auto', padding: '1em', display: 'flex', justifyContent: 'center', width: '100%', - borderWidth: '2px', - borderColor: 'rgba(195, 195, 195, 0.753)', + borderWidth: '1.5px', + borderRadius: '20px', + borderColor: '#04AB70', color: 'rgb(110, 189, 142)' } const btnstyled = { @@ -24,10 +25,8 @@ function EueSuggest() { } return ( - - <> - + EUE 제안 @@ -36,7 +35,6 @@ function EueSuggest() { - ) } diff --git a/client/src/components/Footer copy.js b/client/src/components/Footer copy.js deleted file mode 100644 index 203fc54fcb92e6d59d4a1b915bbcce5c6b6c35cd..0000000000000000000000000000000000000000 --- a/client/src/components/Footer copy.js +++ /dev/null @@ -1,40 +0,0 @@ -import React from 'react' -import { Container, Row, Card, Table, Button } from 'react-bootstrap'; -import { Bar } from 'react-chartjs-2' - -function Footer2() { - const fontstyl = { - fontSize: '0.5em', - margin: 'auto', - padding: '1em', - display: 'flex', - justifyContent: 'center', - width: '100%', - borderWidth: '2px', - borderColor: 'rgba(195, 195, 195, 0.753)', - color: 'rgb(110, 189, 142)' - } - const btnstyled = { - background: 'rgb(110, 189, 142)', - margin: '1px', - maxWidth: '100%', - borderWidth: '2px', - fontSize: '10px', - borderColor: 'rgba(195, 195, 195, 0.753)', - borderRadius: '20px', - } - - - return ( - - <> - - - - - - - ) -} - -export default Footer2; \ No newline at end of file diff --git a/client/src/components/Footer.js b/client/src/components/Footer.js index 131a72b8317c0b07c1466c62956b90586f1e14ea..5189c2cc4eb8d1c2a0ef32efc828d30d04c8c341 100644 --- a/client/src/components/Footer.js +++ b/client/src/components/Footer.js @@ -1,86 +1,121 @@ -import React from 'react' -import { Container, Row, Card, Table, Button } from 'react-bootstrap'; -import { Bar } from 'react-chartjs-2' +import React, { useEffect, useRef, useState } from 'react' +import { Container, Row, Card, Table, Button, Col, Modal, ModalTitle, Overlay, Tooltip } from 'react-bootstrap'; +import { CopyToClipboard } from 'react-copy-to-clipboard'; +import '../App.css' function Footer() { - const fontstyl = { + const cardstyled = { fontSize: '0.5em', margin: 'auto', padding: '1em', display: 'flex', justifyContent: 'center', width: '100%', - borderWidth: '2px', - borderColor: 'rgba(195, 195, 195, 0.753)', + borderWidth: '1.5px', + borderRadius: '20px', + borderColor: '#04AB70', color: 'rgb(110, 189, 142)' } + const btnstyled = { - background: 'rgb(110, 189, 142)', + background: 'white', margin: '1px', - maxWidth: '100%', + maxWidth: 'fit-content', borderWidth: '2px', fontSize: '10px', + color: 'rgb(110, 189, 142)', borderColor: 'rgba(195, 195, 195, 0.753)', borderRadius: '20px', + } - const options = { - legend: { - display: true, // label 보이기 여부 - }, - scales: { - yAxes: [{ - ticks: { - min: 0, // y축 스케일에 대한 최소값 설정 - stepSize: 1, // y축 그리드 한 칸당 수치 - } - }] - }, + const [donateShow, setDonateShow] = useState(false); - // false : 사용자 정의 크기에 따라 그래프 크기가 결정됨. - // true : 크기가 알아서 결정됨. - maintainAspectRatio: false + + function clickAndCopy() { + return new Promise((resolve) => setTimeout(resolve, 2000)) } - const data = { - labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'], - datasets: [ - { - label: '온도', - fill: false, - lineTension: 0.1, - backgroundColor: 'rgba(75,192,192,0.4)', - borderColor: 'rgba(75,192,192,1)', - borderCapStyle: 'butt', - borderDash: [2,10], //점선 - borderDashOffset: 0.0, - borderJoinStyle: 'miter', - pointBorderColor: 'rgba(75,192,192,1)', - pointBackgroundColor: '#fff', - pointBorderWidth: 1, - pointHoverRadius: 5, - pointHoverBackgroundColor: 'rgba(75,192,192,1)', - pointHoverBorderColor: 'rgba(220,220,220,1)', - pointHoverBorderWidth: 2, - pointRadius: 1, - pointHitRadius: 10, - data: [-10, -2, 13, 18, 22, 25, 31, 28, 25, 18, 6, -8] - } - ] - }; + + // function CopyShow() { + const [isCopyshow, setCopyShow] = useState(false); + + useEffect(() => { + if (isCopyshow) { + clickAndCopy().then(() => { + setCopyShow(false); + }); + } + }, [isCopyshow]); + + // } + const handleClick = () => setCopyShow(true); return ( + + + + 서버비용 후원하기 + + + 이용하시는데 불편함이 없도록 광고 없이 운영하고 있습니다.
+ 서버비용 충당 후 후원금이 남을시 UNICEF 에 기부하겠습니다. + + + + setDonateShow(false)} + style={{ top: '80px', left: '1vw' }} + > + + + Thank you for your Donation + + + + +

+ 카카오뱅크 +

+ +

+ 박상호 3333-16-7299769 + +

+ + + + + + + + + TEAM EUE : 안강민, 박상호, 박예은 + + + © 2021 TEAM EUE. All rights reserved + + - <> - - - - - - + + ) } diff --git a/client/src/components/KakaoLogin.js b/client/src/components/KakaoLogin.js deleted file mode 100644 index c8dca62661b26ec8c9880502edf175ce4375b609..0000000000000000000000000000000000000000 --- a/client/src/components/KakaoLogin.js +++ /dev/null @@ -1,26 +0,0 @@ -// import React from 'react' -// import { Image } from 'react-bootstrap' -// import KaKaoLogin from 'react-kakao-login' - -// function KakaoLogin() { -// // Kakao.Auth.login({ -// // success: function (authObj) { -// // alert(JSON.stringify(authObj)) -// // }, -// // fail: function (err) { -// // alert(JSON.stringify(err)) -// // }, -// // }) -// return ( -//
-// -//
-// ) -// } - -// export default KakaoLogin; \ No newline at end of file diff --git a/client/src/components/MainLayer.js b/client/src/components/MainLayer.js index e11895c1fbee05b0b4f1f9c5b81ec9f3e891ff5a..fc40edb423d8d08c4cbad6c55a9d98a282fdb439 100644 --- a/client/src/components/MainLayer.js +++ b/client/src/components/MainLayer.js @@ -15,7 +15,8 @@ function MainLayer() { marginBottom: '1em', width: '100%', backgroundSize: 'contain', - margin: 'auto' + margin: 'auto', + textDecorationColor: 'none' } const btnstyled = { @@ -28,6 +29,8 @@ function MainLayer() { fontSize: '10px', borderColor: 'rgba(195, 195, 195, 0.753)', borderRadius: '20px', + textDecorationColor: 'none', + color: 'white' } const loginstyled = { @@ -47,6 +50,7 @@ function MainLayer() { const [logshow, setLogshow] = useState(false); const [signshow, setSignshow] = useState(false); + const [isLogin, setIsLogin] = useState(false) return ( @@ -57,12 +61,13 @@ function MainLayer() { EUE - + - - - + - + console.log(response)) + + function locateHome() { + window.location.replace('/') + }; + setTimeout(locateHome, 3000) + + return ( + + + 인가코드 : {authorizationCode} +
+ Params : {params} + + + + ) +} +export default Oauth; \ No newline at end of file diff --git a/client/src/components/TimeNow.js b/client/src/components/TimeNow.js index 218ca9e258df8eed2d3715542fabaaab5e1a6187..fe559171de2b52363032ff22712b7b847e44f0bf 100644 --- a/client/src/components/TimeNow.js +++ b/client/src/components/TimeNow.js @@ -5,21 +5,21 @@ import '../App.css' function TimeNow() { - const fontstyl = { - fontSize: '0.5em', - margin: 'auto', - padding: '1em', - display: 'flex', - justifyContent: 'center', - width: '100%', - borderWidth: '2px', - borderColor: 'rgba(195, 195, 195, 0.753)', - color: 'rgb(110, 189, 142)' - } + const cardstyled = { + fontSize: '0.5em', + margin: 'auto', + padding: '1em', + display: 'flex', + justifyContent: 'center', + width: '100%', + borderWidth: '1.5px', + borderRadius: '20px', + borderColor: '#04AB70', + color: 'rgb(110, 189, 142)' + } return ( - <> - + 현재시각 @@ -30,7 +30,6 @@ function TimeNow() { - ) } diff --git a/client/src/components/Trydays.js b/client/src/components/Trydays.js index db1c7e47cfc84d62baa9ffa23791e36049d14b04..bcd2a682d77dc19cf22b3ae61f6366efc4cdb181 100644 --- a/client/src/components/Trydays.js +++ b/client/src/components/Trydays.js @@ -1,16 +1,19 @@ import React from 'react' import { Container, Row, Card, Table, Button } from 'react-bootstrap'; +import '../App.css' + function Trydays() { - const fontstyl = { + const cardstyled = { fontSize: '0.5em', margin: 'auto', padding: '1em', display: 'flex', justifyContent: 'center', width: '100%', - borderWidth: '2px', - borderColor: 'rgba(195, 195, 195, 0.753)', + borderWidth: '1.5px', + borderRadius: '20px', + borderColor: '#04AB70', color: 'rgb(110, 189, 142)' } const btnstyled = { @@ -19,14 +22,14 @@ function Trydays() { maxWidth: '100%', borderWidth: '2px', fontSize: '10px', - borderColor: 'rgba(195, 195, 195, 0.753)', + borderColor: 'rgba(195, 195, 195, 0.712)', borderRadius: '20px', + color: 'white' } return ( - <> - + 유저아이디 @@ -34,7 +37,7 @@ function Trydays() { 지역 울릉면 지역코드 - @@ -45,7 +48,6 @@ function Trydays() { - ) } diff --git a/client/src/pages/Home.js b/client/src/pages/Home.js index fc66e1633f36bfb6153b2f9019cf1d1145e466cd..285efb2fc007c2bbed7d76b4cdf69db95782277f 100644 --- a/client/src/pages/Home.js +++ b/client/src/pages/Home.js @@ -1,5 +1,5 @@ import React from 'react' -import { Container, Row, Col, Button, ButtonGroup, Image, Form, Media } from 'react-bootstrap'; +import { Container, Row, Col } from 'react-bootstrap'; import MainLayer from '../components/MainLayer'; import TimeNow from './../components/TimeNow'; import '../App.css' @@ -8,6 +8,7 @@ import EueSuggest from '../components/EueSuggest'; import ChartLine from '../components/ChartLine'; import ChartDoughnut from '../components/ChartDoughnut'; import Footer from './../components/Footer'; +import { useEffect } from 'react'; function Home() { @@ -31,16 +32,14 @@ function Home() { flexDirection: 'column', padding: '0' } - - const stickybox = { - zIndex: '10', border: 'solid', borderWidth: '1px', borderColor: 'rgba(195, 195, 195, 0.753)', - borderRadius: '10px', padding: '15px', boxShadow: '0.5px 0.5px gray', margin: '5px', boxSizing:'border-box' - } + useEffect(() => { + console.log('마운트 될때마다 실행'); + }, []); return ( - + @@ -48,12 +47,13 @@ function Home() { - + {/* */} + {/* */} - - - -