Skip to content

GitLab

Commit 09a1f37a authored by Spark's avatar Spark
Browse files

footer 수정 완료, btn variant='light' 추가, 카카오 토큰 받아오기 추가

parent 6a6d62e6
Show whitespace changes
Inline Side-by-side
client/package-lock.json
View file @ 09a1f37a
...@@ -10,18 +10,22 @@ ...@@ -10,18 +10,22 @@
"@testing-library/jest-dom": "^5.14.1", "@testing-library/jest-dom": "^5.14.1",
"@testing-library/react": "^11.2.7", "@testing-library/react": "^11.2.7",
"@testing-library/user-event": "^12.8.3", "@testing-library/user-event": "^12.8.3",
"axios": "^0.21.1",
"bootstrap": "^4.6.0", "bootstrap": "^4.6.0",
"chart.js": "^3.4.0", "chart.js": "^3.4.0",
"moment": "^2.29.1", "moment": "^2.29.1",
"ngx-spinner": "^12.0.0",
"node-sass": "^6.0.1", "node-sass": "^6.0.1",
"react": "^17.0.2", "react": "^17.0.2",
"react-bootstrap": "^1.6.1", "react-bootstrap": "^1.6.1",
"react-chartjs-2": "^3.0.3", "react-chartjs-2": "^3.0.3",
"react-copy-to-clipboard": "^5.0.3",
"react-dom": "^17.0.2", "react-dom": "^17.0.2",
"react-google-login": "^5.2.2", "react-google-login": "^5.2.2",
"react-kakao-login": "^2.1.0", "react-kakao-login": "^2.1.0",
"react-live-clock": "^5.2.0", "react-live-clock": "^5.2.0",
"react-moment": "^1.1.1", "react-moment": "^1.1.1",
"react-redux": "^7.2.4",
"react-router-dom": "^5.2.0", "react-router-dom": "^5.2.0",
"react-scripts": "4.0.3", "react-scripts": "4.0.3",
"react-use": "^17.2.4", "react-use": "^17.2.4",
...@@ -29,6 +33,38 @@ ...@@ -29,6 +33,38 @@
"web-vitals": "^1.1.2" "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": { "node_modules/@babel/code-frame": {
"version": "7.14.5", "version": "7.14.5",
"resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.14.5.tgz", "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.14.5.tgz",
...@@ -3503,6 +3539,15 @@ ...@@ -3503,6 +3539,15 @@
"@types/node": "*" "@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": { "node_modules/@types/html-minifier-terser": {
"version": "5.1.1", "version": "5.1.1",
"resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-5.1.1.tgz", "resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-5.1.1.tgz",
...@@ -3608,6 +3653,17 @@ ...@@ -3608,6 +3653,17 @@
"csstype": "^3.0.2" "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": { "node_modules/@types/react-transition-group": {
"version": "4.4.1", "version": "4.4.1",
"resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.1.tgz", "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.1.tgz",
...@@ -4606,6 +4662,14 @@ ...@@ -4606,6 +4662,14 @@
"node": ">=4" "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": { "node_modules/axobject-query": {
"version": "2.2.0", "version": "2.2.0",
"resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz", "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz",
...@@ -14457,6 +14521,18 @@ ...@@ -14457,6 +14521,18 @@
"resolved": "https://registry.npmjs.org/next-tick/-/next-tick-1.0.0.tgz", "resolved": "https://registry.npmjs.org/next-tick/-/next-tick-1.0.0.tgz",
"integrity": "sha1-yobR/ogoFpsBICCOPchCS524NCw=" "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": { "node_modules/nice-try": {
"version": "1.0.5", "version": "1.0.5",
"resolved": "https://registry.npmjs.org/nice-try/-/nice-try-1.0.5.tgz", "resolved": "https://registry.npmjs.org/nice-try/-/nice-try-1.0.5.tgz",
...@@ -17247,6 +17323,18 @@ ...@@ -17247,6 +17323,18 @@
"react": "^16.8.0 || ^17.0.0" "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": { "node_modules/react-dev-utils": {
"version": "11.0.4", "version": "11.0.4",
"resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-11.0.4.tgz", "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-11.0.4.tgz",
...@@ -17498,6 +17586,35 @@ ...@@ -17498,6 +17586,35 @@
"node": ">=6.9.0" "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": { "node_modules/react-refresh": {
"version": "0.8.3", "version": "0.8.3",
"resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.8.3.tgz", "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.8.3.tgz",
...@@ -17892,6 +18009,14 @@ ...@@ -17892,6 +18009,14 @@
"node": ">=8" "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": { "node_modules/regenerate": {
"version": "1.4.2", "version": "1.4.2",
"resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz", "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz",
...@@ -18495,6 +18620,24 @@ ...@@ -18495,6 +18620,24 @@
"aproba": "^1.1.1" "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": { "node_modules/safe-buffer": {
"version": "5.1.2", "version": "5.1.2",
"resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz", "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
...@@ -23370,9 +23513,36 @@ ...@@ -23370,9 +23513,36 @@
"funding": { "funding": {
"url": "https://github.com/sponsors/sindresorhus" "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": { "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": { "@babel/code-frame": {
"version": "7.14.5", "version": "7.14.5",
"resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.14.5.tgz", "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.14.5.tgz",
...@@ -25805,6 +25975,15 @@ ...@@ -25805,6 +25975,15 @@
"@types/node": "*" "@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": { "@types/html-minifier-terser": {
"version": "5.1.1", "version": "5.1.1",
"resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-5.1.1.tgz", "resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-5.1.1.tgz",
...@@ -25910,6 +26089,17 @@ ...@@ -25910,6 +26089,17 @@
"csstype": "^3.0.2" "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": { "@types/react-transition-group": {
"version": "4.4.1", "version": "4.4.1",
"resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.1.tgz", "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.1.tgz",
...@@ -26690,6 +26880,14 @@ ...@@ -26690,6 +26880,14 @@
"resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.2.3.tgz", "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.2.3.tgz",
"integrity": "sha512-pXnVMfJKSIWU2Ml4JHP7pZEPIrgBO1Fd3WGx+fPBsS+KRGhE4vxooD8XBGWbQOIVSZsVK7pUDBBkCicNu80yzQ==" "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": { "axobject-query": {
"version": "2.2.0", "version": "2.2.0",
"resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz", "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz",
...@@ -34251,6 +34449,14 @@ ...@@ -34251,6 +34449,14 @@
"resolved": "https://registry.npmjs.org/next-tick/-/next-tick-1.0.0.tgz", "resolved": "https://registry.npmjs.org/next-tick/-/next-tick-1.0.0.tgz",
"integrity": "sha1-yobR/ogoFpsBICCOPchCS524NCw=" "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": { "nice-try": {
"version": "1.0.5", "version": "1.0.5",
"resolved": "https://registry.npmjs.org/nice-try/-/nice-try-1.0.5.tgz", "resolved": "https://registry.npmjs.org/nice-try/-/nice-try-1.0.5.tgz",
...@@ -36462,6 +36668,15 @@ ...@@ -36462,6 +36668,15 @@
"lodash": "^4.17.19" "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": { "react-dev-utils": {
"version": "11.0.4", "version": "11.0.4",
"resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-11.0.4.tgz", "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-11.0.4.tgz",
...@@ -36654,6 +36869,26 @@ ...@@ -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": { "react-refresh": {
"version": "0.8.3", "version": "0.8.3",
"resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.8.3.tgz", "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.8.3.tgz",
...@@ -36974,6 +37209,14 @@ ...@@ -36974,6 +37209,14 @@
"strip-indent": "^3.0.0" "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": { "regenerate": {
"version": "1.4.2", "version": "1.4.2",
"resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz", "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz",
...@@ -37448,6 +37691,23 @@ ...@@ -37448,6 +37691,23 @@
"aproba": "^1.1.1" "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": { "safe-buffer": {
"version": "5.1.2", "version": "5.1.2",
"resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz", "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
...@@ -41351,6 +41611,15 @@ ...@@ -41351,6 +41611,15 @@
"version": "0.1.0", "version": "0.1.0",
"resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz", "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
"integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==" "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"
}
} }
} }
} }
client/package.json
View file @ 09a1f37a
...@@ -6,18 +6,22 @@ ...@@ -6,18 +6,22 @@
"@testing-library/jest-dom": "^5.14.1", "@testing-library/jest-dom": "^5.14.1",
"@testing-library/react": "^11.2.7", "@testing-library/react": "^11.2.7",
"@testing-library/user-event": "^12.8.3", "@testing-library/user-event": "^12.8.3",
"axios": "^0.21.1",
"bootstrap": "^4.6.0", "bootstrap": "^4.6.0",
"chart.js": "^3.4.0", "chart.js": "^3.4.0",
"moment": "^2.29.1", "moment": "^2.29.1",
"ngx-spinner": "^12.0.0",
"node-sass": "^6.0.1", "node-sass": "^6.0.1",
"react": "^17.0.2", "react": "^17.0.2",
"react-bootstrap": "^1.6.1", "react-bootstrap": "^1.6.1",
"react-chartjs-2": "^3.0.3", "react-chartjs-2": "^3.0.3",
"react-copy-to-clipboard": "^5.0.3",
"react-dom": "^17.0.2", "react-dom": "^17.0.2",
"react-google-login": "^5.2.2", "react-google-login": "^5.2.2",
"react-kakao-login": "^2.1.0", "react-kakao-login": "^2.1.0",
"react-live-clock": "^5.2.0", "react-live-clock": "^5.2.0",
"react-moment": "^1.1.1", "react-moment": "^1.1.1",
"react-redux": "^7.2.4",
"react-router-dom": "^5.2.0", "react-router-dom": "^5.2.0",
"react-scripts": "4.0.3", "react-scripts": "4.0.3",
"react-use": "^17.2.4", "react-use": "^17.2.4",
......
client/public/index.html
View file @ 09a1f37a
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" /> <meta name="theme-color" content="#000000" />
<meta name="description" content="Web site created using create-react-app" /> <meta name="description" content="Web site created using create-react-app" />
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /> <link rel="apple-touch-icon" href="%PUBLIC_URL%/images/Kakao.png" />
<!-- <!--
manifest.json provides metadata used when your web app is installed on a manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/ user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
...@@ -24,8 +24,49 @@ ...@@ -24,8 +24,49 @@
--> -->
<title>EUE, make your day</title> <title>EUE, make your day</title>
<script src='https://developers.kakao.com/sdk/js/kakao.min.js'></script> <script src='https://developers.kakao.com/sdk/js/kakao.min.js'></script>
<script>Kakao.init("29c2c90caed30db77d55580048c53d7b");</script> <script>
<!-- <meta name ="google-signin-client_id" content="217755353555-3msma49ckq4fa47k0tg5tkshatcdh8c9.apps.googleusercontent.com"> --> Kakao.init("29c2c90caed30db77d55580048c53d7b");
Kakao.isInitialized();
console.log(Kakao.isInitialized());
function loginWithKakao() {
Kakao.Auth.authorize({
redirectUri: 'http://localhost:3000/oauth'
})
}
// 아래는 데모를 위한 UI 코드입니다.
displayToken()
function displayToken() {
const token = getCookie('authorize-access-token')
if (token) {
Kakao.Auth.setAccessToken(token)
Kakao.Auth.getStatusInfo(({ status }) => {
if (status === 'connected') {
document.getElementById('token-result').innerText = 'login success. token: ' + Kakao.Auth.getAccessToken()
} else {
Kakao.Auth.setAccessToken(null)
}
})
}
}
function getCookie(name) {
const value = "; " + document.cookie;
const parts = value.split("; " + name + "=");
if (parts.length === 2) return parts.pop().split(";").shift();
}
</script>
<script type="text/javascript">
function loginWithKakaoPOP() {
Kakao.Auth.login({
success: function (authObj) {
alert(JSON.stringify(authObj))
},
fail: function (err) {
alert(JSON.stringify(err))
},
})
}
</script>
</head> </head>
<body> <body>
......
client/public/manifest.json
View file @ 09a1f37a
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
"type": "image/x-icon" "type": "image/x-icon"
}, },
{ {
"src": "logo192.png", "src": "images/Kakao.png",
"type": "image/png", "type": "image/png",
"sizes": "192x192" "sizes": "192x192"
}, },
......
client/src/App.css
View file @ 09a1f37a
...@@ -4,11 +4,19 @@ body { ...@@ -4,11 +4,19 @@ body {
font-family: "Noto Sans KR", sans-serif !important; font-family: "Noto Sans KR", sans-serif !important;
} }
.a:hover { .a:hover {
color: white; 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 { .form-group .form-control {
...@@ -19,6 +27,7 @@ body { ...@@ -19,6 +27,7 @@ body {
border-radius: 40px; border-radius: 40px;
background-color: rgb(110, 189, 142); background-color: rgb(110, 189, 142);
border-color: ivory; border-color: ivory;
color: white;
} }
#logpng { #logpng {
......
client/src/App.js
View file @ 09a1f37a
...@@ -2,6 +2,7 @@ import React from 'react'; ...@@ -2,6 +2,7 @@ import React from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom'; import { BrowserRouter as Router, Route } from 'react-router-dom';
import './App.css'; import './App.css';
import Home from './pages/Home'; import Home from './pages/Home';
import Oauth from './components/Oauth';
function App() { function App() {
...@@ -10,6 +11,7 @@ function App() { ...@@ -10,6 +11,7 @@ function App() {
<Router> <Router>
<> <>
<Route exact path='/' component={Home} /> <Route exact path='/' component={Home} />
<Route path='/oauth' component={Oauth}/>
</> </>
</Router> </Router>
......
client/src/App.scss deleted 100644 → 0
View file @ 6a6d62e6
@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
client/src/components/ChartDoughnut.js
View file @ 09a1f37a
...@@ -3,15 +3,16 @@ import { Container, Row, Card, Table, Button } from 'react-bootstrap'; ...@@ -3,15 +3,16 @@ import { Container, Row, Card, Table, Button } from 'react-bootstrap';
import { Doughnut } from 'react-chartjs-2' import { Doughnut } from 'react-chartjs-2'
function ChartDoughnut() { function ChartDoughnut() {
const fontstyl = { const cardstyled = {
fontSize: '0.5em', fontSize: '0.5em',
margin: 'auto', margin: 'auto',
padding: '1em', padding: '1em',
display: 'flex', display: 'flex',
justifyContent: 'center', justifyContent: 'center',
width: '100%', width: '100%',
borderWidth: '2px', borderWidth: '1.5px',
borderColor: 'rgba(195, 195, 195, 0.753)', borderRadius: '20px',
borderColor: '#04AB70',
color: 'rgb(110, 189, 142)' color: 'rgb(110, 189, 142)'
} }
const btnstyled = { const btnstyled = {
...@@ -72,7 +73,7 @@ function ChartDoughnut() { ...@@ -72,7 +73,7 @@ function ChartDoughnut() {
<> <>
<Row className='text-center w-100 my-2'> <Row className='text-center w-100 my-2'>
<Card style={fontstyl}> <Card style={cardstyled}>
<Doughnut <Doughnut
data={data} data={data}
options={options} options={options}
......
client/src/components/ChartLine.js
View file @ 09a1f37a
...@@ -3,15 +3,16 @@ import { Container, Row, Card, Table, Button } from 'react-bootstrap'; ...@@ -3,15 +3,16 @@ import { Container, Row, Card, Table, Button } from 'react-bootstrap';
import { Line } from 'react-chartjs-2' import { Line } from 'react-chartjs-2'
function ChartLine() { function ChartLine() {
const fontstyl = { const cardstyled = {
fontSize: '0.5em', fontSize: '0.5em',
margin: 'auto', margin: 'auto',
padding: '1em', padding: '1em',
display: 'flex', display: 'flex',
justifyContent: 'center', justifyContent: 'center',
width: '100%', width: '100%',
borderWidth: '2px', borderWidth: '1.5px',
borderColor: 'rgba(195, 195, 195, 0.753)', borderRadius: '20px',
borderColor: '#04AB70',
color: 'rgb(110, 189, 142)' color: 'rgb(110, 189, 142)'
} }
const btnstyled = { const btnstyled = {
...@@ -50,7 +51,7 @@ function ChartLine() { ...@@ -50,7 +51,7 @@ function ChartLine() {
backgroundColor: 'rgba(75,192,192,0.4)', backgroundColor: 'rgba(75,192,192,0.4)',
borderColor: 'rgba(75,192,192,1)', borderColor: 'rgba(75,192,192,1)',
borderCapStyle: 'butt', borderCapStyle: 'butt',
borderDash: [2,10], //점선 ex [2,10] borderDash: [2, 10], //점선 ex [2,10]
borderDashOffset: 0.0, borderDashOffset: 0.0,
borderJoinStyle: 'miter', borderJoinStyle: 'miter',
pointBorderColor: 'rgba(75,192,192,1)', pointBorderColor: 'rgba(75,192,192,1)',
...@@ -68,10 +69,8 @@ function ChartLine() { ...@@ -68,10 +69,8 @@ function ChartLine() {
}; };
return ( return (
<>
<Row className='text-center w-100 my-2'> <Row className='text-center w-100 my-2'>
<Card style={fontstyl}> <Card style={cardstyled}>
<Line <Line
data={data} data={data}
options={options} options={options}
...@@ -79,7 +78,6 @@ function ChartLine() { ...@@ -79,7 +78,6 @@ function ChartLine() {
/> />
</Card> </Card>
</Row> </Row>
</>
) )
} }
......
client/src/components/EueSuggest.js
View file @ 09a1f37a
...@@ -2,15 +2,16 @@ import React from 'react' ...@@ -2,15 +2,16 @@ import React from 'react'
import { Container, Row, Card, Table, Button } from 'react-bootstrap'; import { Container, Row, Card, Table, Button } from 'react-bootstrap';
function EueSuggest() { function EueSuggest() {
const fontstyl = { const cardstyled = {
fontSize: '0.5em', fontSize: '0.5em',
margin: 'auto', margin: 'auto',
padding: '1em', padding: '1em',
display: 'flex', display: 'flex',
justifyContent: 'center', justifyContent: 'center',
width: '100%', width: '100%',
borderWidth: '2px', borderWidth: '1.5px',
borderColor: 'rgba(195, 195, 195, 0.753)', borderRadius: '20px',
borderColor: '#04AB70',
color: 'rgb(110, 189, 142)' color: 'rgb(110, 189, 142)'
} }
const btnstyled = { const btnstyled = {
...@@ -24,10 +25,8 @@ function EueSuggest() { ...@@ -24,10 +25,8 @@ function EueSuggest() {
} }
return ( return (
<>
<Row className='text-center w-100 my-2'> <Row className='text-center w-100 my-2'>
<Card style={fontstyl}> <Card style={cardstyled}>
<Card.Title> <Card.Title>
EUE 제안 EUE 제안
</Card.Title> </Card.Title>
...@@ -36,7 +35,6 @@ function EueSuggest() { ...@@ -36,7 +35,6 @@ function EueSuggest() {
</Card.Text> </Card.Text>
</Card> </Card>
</Row> </Row>
</>
) )
} }
......
client/src/components/Footer copy.js deleted 100644 → 0
View file @ 6a6d62e6
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 (
<>
<Row className='text-center w-100 my-2'>
<Card style={fontstyl}>
</Card>
</Row>
</>
)
}
export default Footer2;
\ No newline at end of file
client/src/components/Footer.js
View file @ 09a1f37a
import React from 'react' import React, { useEffect, useRef, useState } from 'react'
import { Container, Row, Card, Table, Button } from 'react-bootstrap'; import { Container, Row, Card, Table, Button, Col, Modal, ModalTitle, Overlay, Tooltip } from 'react-bootstrap';
import { Bar } from 'react-chartjs-2' import { CopyToClipboard } from 'react-copy-to-clipboard';
import '../App.css'
function Footer() { function Footer() {
const fontstyl = { const cardstyled = {
fontSize: '0.5em', fontSize: '0.5em',
margin: 'auto', margin: 'auto',
padding: '1em', padding: '1em',
display: 'flex', display: 'flex',
justifyContent: 'center', justifyContent: 'center',
width: '100%', width: '100%',
borderWidth: '2px', borderWidth: '1.5px',
borderColor: 'rgba(195, 195, 195, 0.753)', borderRadius: '20px',
borderColor: '#04AB70',
color: 'rgb(110, 189, 142)' color: 'rgb(110, 189, 142)'
} }
const btnstyled = { const btnstyled = {
background: 'rgb(110, 189, 142)', background: 'white',
margin: '1px', margin: '1px',
maxWidth: '100%', maxWidth: 'fit-content',
borderWidth: '2px', borderWidth: '2px',
fontSize: '10px', fontSize: '10px',
color: 'rgb(110, 189, 142)',
borderColor: 'rgba(195, 195, 195, 0.753)', borderColor: 'rgba(195, 195, 195, 0.753)',
borderRadius: '20px', borderRadius: '20px',
}
const options = {
legend: {
display: true, // label 보이기 여부
},
scales: {
yAxes: [{
ticks: {
min: 0, // y축 스케일에 대한 최소값 설정
stepSize: 1, // y축 그리드 한 칸당 수치
} }
}]
},
// false : 사용자 정의 크기에 따라 그래프 크기가 결정됨. const [donateShow, setDonateShow] = useState(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'], // function CopyShow() {
datasets: [ const [isCopyshow, setCopyShow] = useState(false);
{
label: '온도', useEffect(() => {
fill: false, if (isCopyshow) {
lineTension: 0.1, clickAndCopy().then(() => {
backgroundColor: 'rgba(75,192,192,0.4)', setCopyShow(false);
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]
} }
] }, [isCopyshow]);
};
return ( // }
const handleClick = () => setCopyShow(true);
<> return (
<Row className='text-center w-100 my-2'> <Row className='text-center w-100 my-2'>
<Card style={fontstyl}> <Card style={cardstyled}>
<Bar <Row className='my-1 d-flex justify-content-center' style={{ fontSize: '15px', color: 'rgb(109, 110, 109)' }}>
data={data} 서버비용 후원하기
options={options} </Row>
height={300} <Row className='my-1 d-flex justify-content-center'>
/> 이용하시는데 불편함이 없도록 광고 없이 운영하고 있습니다. <br />
서버비용 충당 후 후원금이 남을시 UNICEF 에 기부하겠습니다.
</Row>
<Row className='my-1 d-flex justify-content-center'>
<Button variant='light' style={btnstyled} onClick={() => setDonateShow(true)}>
♥ 후원하기
</Button>
<Modal
size='sm'
show={donateShow}
onHide={() => setDonateShow(false)}
style={{ top: '80px', left: '1vw' }}
>
<Modal.Header className='d-flex justify-content-center'>
<Modal.Title style={{fontSize: '1em'}}>
Thank you for your Donation
</Modal.Title>
</Modal.Header>
<Modal.Body>
<Col className='d-flex justify-content-center text-center' style={{ flexDirection: 'column' }}>
<p style={{ color: 'rgb(109, 110, 109)', margin: '1em', fontSize: '15px' }}>
카카오뱅크
</p>
<CopyToClipboard text={'박상호 3333-16-7299769'}>
<p className='m-auto' style={btnstyled} >
박상호 3333-16-7299769
<Button variant='light'
disabled={isCopyshow}
onClick={!isCopyshow ? handleClick : null}
style={{
background: 'lightgray',
margin: '5px',
maxWidth: 'fit-content',
borderWidth: '2px',
fontSize: '10px',
color: 'black',
border: 'none',
whiteSpace: 'nowrap'
}}>
{isCopyshow ? '복사 성공!' : '복사'}
</Button>
</p>
</CopyToClipboard>
</Col>
</Modal.Body>
</Modal>
</Row>
<Row className='my-1 d-flex justify-content-center flex-direction-column' style={{ color: 'rgb(109, 110, 109)', flexDirection: 'column' }}>
<Col>
<a href='https://www.notion.so/EUE-047f1812c6c24096a528dfd3330c227d' style={{ color: 'rgb(110, 189, 142)' }}>TEAM EUE </a> : 안강민, 박상호, 박예은
</Col>
<Col>
© 2021 TEAM EUE. All rights reserved
</Col>
</Row>
</Card> </Card>
</Row> </Row>
</>
) )
} }
......
client/src/components/KakaoLogin.js deleted 100644 → 0
View file @ 6a6d62e6
// 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 (
// <div>
// <KakaoLogin
// token={'JAVASCRIPT KEY를 입력하세요.!!!'}
// onSuccess={console.log}
// onFail={console.error}
// onLogout={console.info}
// />
// </div>
// )
// }
// export default KakaoLogin;
\ No newline at end of file
client/src/components/MainLayer.js
View file @ 09a1f37a
...@@ -15,7 +15,8 @@ function MainLayer() { ...@@ -15,7 +15,8 @@ function MainLayer() {
marginBottom: '1em', marginBottom: '1em',
width: '100%', width: '100%',
backgroundSize: 'contain', backgroundSize: 'contain',
margin: 'auto' margin: 'auto',
textDecorationColor: 'none'
} }
const btnstyled = { const btnstyled = {
...@@ -28,6 +29,8 @@ function MainLayer() { ...@@ -28,6 +29,8 @@ function MainLayer() {
fontSize: '10px', fontSize: '10px',
borderColor: 'rgba(195, 195, 195, 0.753)', borderColor: 'rgba(195, 195, 195, 0.753)',
borderRadius: '20px', borderRadius: '20px',
textDecorationColor: 'none',
color: 'white'
} }
const loginstyled = { const loginstyled = {
...@@ -47,6 +50,7 @@ function MainLayer() { ...@@ -47,6 +50,7 @@ function MainLayer() {
const [logshow, setLogshow] = useState(false); const [logshow, setLogshow] = useState(false);
const [signshow, setSignshow] = useState(false); const [signshow, setSignshow] = useState(false);
const [isLogin, setIsLogin] = useState(false)
return ( return (
...@@ -57,12 +61,13 @@ function MainLayer() { ...@@ -57,12 +61,13 @@ function MainLayer() {
<Image src='/images/EUE11.jpg' alt='EUE' style={boxstyled} /> <Image src='/images/EUE11.jpg' alt='EUE' style={boxstyled} />
</Link> </Link>
</Col> </Col>
<Dropdown className='d-sm-block d-md-none' style={{ fontSize: '1em' }}> <Dropdown className='d-sm-block d-md-none' style={{ fontSize: '1em' }}
>
<Dropdown.Toggle style={btnstyled} id="dropdown-basic"> <Dropdown.Toggle style={btnstyled} id="dropdown-basic">
</Dropdown.Toggle> </Dropdown.Toggle>
<Dropdown.Menu className='z-index-10'> <Dropdown.Menu className='z-index-10'>
<Dropdown.Item href="#/action-1"> <Dropdown.Item href="#/action-1">
<Button className='w-100 m-auto' style={btnstyled} onClick={() => setLogshow(true)}> <Button variant='light' className='w-100 m-auto' style={btnstyled} onClick={() => setLogshow(true)}>
LOGIN LOGIN
</Button> </Button>
<Modal <Modal
...@@ -76,7 +81,7 @@ function MainLayer() { ...@@ -76,7 +81,7 @@ function MainLayer() {
</Dropdown.Item> </Dropdown.Item>
<Dropdown.Item href="#/action-2"> <Dropdown.Item href="#/action-2">
<Button className='w-100 m-auto' style={btnstyled} onClick={() => setSignshow(true)}> <Button variant='light' className='w-100 m-auto' style={btnstyled} onClick={() => setSignshow(true)}>
SIGN UP SIGN UP
</Button> </Button>
<Modal <Modal
...@@ -94,7 +99,7 @@ function MainLayer() { ...@@ -94,7 +99,7 @@ function MainLayer() {
<Row className='d-none d-md-flex justify-content-center align-items-center my-3 mx-auto w-100'> <Row className='d-none d-md-flex justify-content-center align-items-center my-3 mx-auto w-100'>
<ButtonGroup vertical className='m-auto' style={{ width: '100%' }}> <ButtonGroup vertical className='m-auto' style={{ width: '100%' }}>
<Button style={btnstyled} onClick={() => setLogshow(true)}>LOGIN</Button> <Button variant='light' style={btnstyled} onClick={() => setLogshow(true)}>LOGIN</Button>
<Modal <Modal
size="sm" size="sm"
show={logshow} show={logshow}
...@@ -105,7 +110,7 @@ function MainLayer() { ...@@ -105,7 +110,7 @@ function MainLayer() {
</Modal> </Modal>
<Button style={btnstyled} onClick={() => setSignshow(true)}>SIGN UP</Button> <Button variant='light' style={btnstyled} onClick={() => setSignshow(true)}>SIGN UP</Button>
<Modal <Modal
size="md" size="md"
show={signshow} show={signshow}
......
client/src/components/OAuth.js
View file @ 09a1f37a
const CLIENT_ID = 'a564b730d6339b084ecf7775a9a09284'; import axios from 'axios';
const REDIRECT_URI = 'http://localhost:3000/oauth'; import { Spinner, Button, Col, Row } from 'react-bootstrap';
import { KAKAO_AUTH_URL } from './Oauth';
import { Link, Redirect } from 'react-router-dom';
export const KAKAO_AUTH_URL = `https://kauth.kakao.com/oauth/authorize?client_id=${CLIENT_ID}&redirect_uri=${REDIRECT_URI}&response_type=code`; // export const KAKAO_AUTH_URL = `https://kauth.kakao.com/oauth/authorize?client_id=${CLIENT_ID}&redirect_uri=${REDIRECT_URI}&response_type=code`;
\ No newline at end of file
function Oauth() {
const REST_API_KEY = 'a564b730d6339b084ecf7775a9a09284';
const REDIRECT_URI = 'http://localhost:3000/oauth';
const url = new URL(window.location.href)
const authorizationCode = url.searchParams.get('code')
console.log('인가 코드', authorizationCode);
const kakaoAuthURl = `https://kauth.kakao.com/oauth/token`
// const KAKAO_AUTH_URL = `https://kauth.kakao.com/oauth/authorize?client_id=${REST_API_KEY}&redirect_uri=${REDIRECT_URI}&response_type=code`
const payload = {
grant_type: "authorization_code",
client_id: `${REST_API_KEY}`,
redirect_uri: `${REDIRECT_URI}`,
code: `${authorizationCode}`
}
const params = new URLSearchParams();
params.append('grant_type', 'authorization_code')
params.append('client_id', `${REST_API_KEY}`)
params.append('redirect_uri', `${REDIRECT_URI}`)
params.append('code', `${authorizationCode}`)
axios.post(kakaoAuthURl, params).then(response => console.log(response))
function locateHome() {
window.location.replace('/')
};
setTimeout(locateHome, 3000)
return (
<Row className='d-block'>
<Col className='text-center m-auto' style={{ fontSize: '5px' }} >
인가코드 : {authorizationCode}
<br />
Params : {params}
</Col>
<Button id='formbtn' className='d-flex justify-content-center align-items-center m-auto' style={{ width: '200px', height: '200px', flexDirection: 'column' }} disabled>
<Spinner animation="border" role="status">
<span className="sr-only">Loading...</span>
</Spinner>
<br />
Loading...
</Button>
</Row>
)
}
export default Oauth;
\ No newline at end of file
client/src/components/TimeNow.js
View file @ 09a1f37a
...@@ -5,21 +5,21 @@ import '../App.css' ...@@ -5,21 +5,21 @@ import '../App.css'
function TimeNow() { function TimeNow() {
const fontstyl = { const cardstyled = {
fontSize: '0.5em', fontSize: '0.5em',
margin: 'auto', margin: 'auto',
padding: '1em', padding: '1em',
display: 'flex', display: 'flex',
justifyContent: 'center', justifyContent: 'center',
width: '100%', width: '100%',
borderWidth: '2px', borderWidth: '1.5px',
borderColor: 'rgba(195, 195, 195, 0.753)', borderRadius: '20px',
borderColor: '#04AB70',
color: 'rgb(110, 189, 142)' color: 'rgb(110, 189, 142)'
} }
return ( return (
<>
<Row className='text-center w-100 my-2'> <Row className='text-center w-100 my-2'>
<Card style={fontstyl}> <Card style={cardstyled}>
<Card.Title style={{color:'black'}}> <Card.Title style={{color:'black'}}>
현재시각 현재시각
</Card.Title> </Card.Title>
...@@ -30,7 +30,6 @@ function TimeNow() { ...@@ -30,7 +30,6 @@ function TimeNow() {
</Card.Text> </Card.Text>
</Card> </Card>
</Row> </Row>
</>
) )
} }
......
client/src/components/Trydays.js
View file @ 09a1f37a
import React from 'react' import React from 'react'
import { Container, Row, Card, Table, Button } from 'react-bootstrap'; import { Container, Row, Card, Table, Button } from 'react-bootstrap';
import '../App.css'
function Trydays() { function Trydays() {
const fontstyl = { const cardstyled = {
fontSize: '0.5em', fontSize: '0.5em',
margin: 'auto', margin: 'auto',
padding: '1em', padding: '1em',
display: 'flex', display: 'flex',
justifyContent: 'center', justifyContent: 'center',
width: '100%', width: '100%',
borderWidth: '2px', borderWidth: '1.5px',
borderColor: 'rgba(195, 195, 195, 0.753)', borderRadius: '20px',
borderColor: '#04AB70',
color: 'rgb(110, 189, 142)' color: 'rgb(110, 189, 142)'
} }
const btnstyled = { const btnstyled = {
...@@ -19,14 +22,14 @@ function Trydays() { ...@@ -19,14 +22,14 @@ function Trydays() {
maxWidth: '100%', maxWidth: '100%',
borderWidth: '2px', borderWidth: '2px',
fontSize: '10px', fontSize: '10px',
borderColor: 'rgba(195, 195, 195, 0.753)', borderColor: 'rgba(195, 195, 195, 0.712)',
borderRadius: '20px', borderRadius: '20px',
color: 'white'
} }
return ( return (
<>
<Row className='text-center w-100 my-2'> <Row className='text-center w-100 my-2'>
<Card style={fontstyl}> <Card style={cardstyled}>
<Card.Title> <Card.Title>
유저아이디 유저아이디
</Card.Title> </Card.Title>
...@@ -34,7 +37,7 @@ function Trydays() { ...@@ -34,7 +37,7 @@ function Trydays() {
지역 지역
울릉면 울릉면
지역코드 지역코드
<Button style={btnstyled}> <Button variant='light' style={btnstyled}>
변경 변경
</Button> </Button>
...@@ -45,7 +48,6 @@ function Trydays() { ...@@ -45,7 +48,6 @@ function Trydays() {
</Card.Text> </Card.Text>
</Card> </Card>
</Row> </Row>
</>
) )
} }
......
client/src/pages/Home.js
View file @ 09a1f37a
import React from 'react' 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 MainLayer from '../components/MainLayer';
import TimeNow from './../components/TimeNow'; import TimeNow from './../components/TimeNow';
import '../App.css' import '../App.css'
...@@ -8,6 +8,7 @@ import EueSuggest from '../components/EueSuggest'; ...@@ -8,6 +8,7 @@ import EueSuggest from '../components/EueSuggest';
import ChartLine from '../components/ChartLine'; import ChartLine from '../components/ChartLine';
import ChartDoughnut from '../components/ChartDoughnut'; import ChartDoughnut from '../components/ChartDoughnut';
import Footer from './../components/Footer'; import Footer from './../components/Footer';
import { useEffect } from 'react';
function Home() { function Home() {
...@@ -31,16 +32,14 @@ function Home() { ...@@ -31,16 +32,14 @@ function Home() {
flexDirection: 'column', flexDirection: 'column',
padding: '0' padding: '0'
} }
useEffect(() => {
const stickybox = { console.log('마운트 될때마다 실행');
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'
}
return ( return (
<Container fluid className='d-flex justify-content-center position-relative'> <Container fluid className='d-flex justify-content-center position-relative'>
<Row style={constyled}> <Row style={constyled}>
<Col xs={12} md={4} className='d-flex justify-content-center m-2' id='stickyy'> <Col xs={12} md={4} className='d-flex justify-content-center' id='stickyy'>
<Row style={col1sty} className='m-auto'> <Row style={col1sty} className='m-auto'>
<MainLayer /> <MainLayer />
</Row> </Row>
...@@ -48,12 +47,13 @@ function Home() { ...@@ -48,12 +47,13 @@ function Home() {
</Col> </Col>
<Col md={6} style={col2sty}> <Col md={6} style={col2sty}>
<Row style={constyled} className='d-flex mb-2 w-100'> <Row style={constyled} className='d-flex mb-2 w-100'>
<TimeNow /> {/* <KakaoLogin/> */}
{/* <TimeNow /> */}
<Trydays /> <Trydays />
<EueSuggest/> <EueSuggest />
<ChartLine/> <ChartLine />
<ChartDoughnut/> <ChartDoughnut />
<Footer/> <Footer />
</Row> </Row>
</Col> </Col>
</Row> </Row>
......
client/src/pages/LoginwithSocial.js
View file @ 09a1f37a
import React from 'react' import React from 'react'
import '../App.css' import '../App.css'
import { Form, Modal, Button, Row, Col, Image, Alert } from 'react-bootstrap'; import { Form, Modal, Button, Row, Col, Image, Alert } from 'react-bootstrap';
import { KAKAO_AUTH_URL } from './../components/OAuth'; import Oauth from '../components/Oauth';
import { useEffect } from 'react';
import axios from 'axios';
import { useState } from 'react';
function LoginwithSocial() { function LoginwithSocial() {
...@@ -15,9 +18,16 @@ function LoginwithSocial() { ...@@ -15,9 +18,16 @@ function LoginwithSocial() {
} }
function loginWithKakao() {
window.Kakao.Auth.authorize({
redirectUri: 'http://localhost:3000/oauth'
})
}
const [isLogin, setIsLogin] = useState(false)
return ( return (
<> <Row className='m-auto'>
<Modal.Header className='d-flex justify-content-center'> <Modal.Header className='d-flex justify-content-center w-100'>
<Modal.Title id="example-modal-sizes-title-sm"> <Modal.Title id="example-modal-sizes-title-sm">
LOGIN LOGIN
</Modal.Title> </Modal.Title>
...@@ -31,17 +41,24 @@ function LoginwithSocial() { ...@@ -31,17 +41,24 @@ function LoginwithSocial() {
<Form.Group controlId="formBasicPassword"> <Form.Group controlId="formBasicPassword">
<Form.Control type="password" placeholder="Password" /> <Form.Control type="password" placeholder="Password" />
</Form.Group> </Form.Group>
<Button type="submit" id='formbtn'> <Button variant='light' type="submit" id='formbtn'>
LOGIN LOGIN
</Button> </Button>
</Form> </Form>
<hr /> <hr />
<Row style={{ margin: 'auto', marginBottom: '5px', display: 'flex', justifyContent: 'center' }}> <Row style={{ margin: 'auto', marginBottom: '5px', display: 'flex', justifyContent: 'center' }}>
{/* <KakaoLogin /> */} <a href="#" onClick={loginWithKakao} id='socialLink' >
<a href={KAKAO_AUTH_URL} target='_blank' id='socialLink' > <img src='/images/Kakao1.jpg' id='logpng' />
<Image src='/images/Kakao1.jpg' id='logpng' />
KAKAO KAKAO
</a> </a>
<a href="javascript:loginWithKakao()" id='socialLink' >
<img src='/images/Kakao1.jpg' id='logpng' />
KAKAOHTML
</a>
<a href="javascript:loginWithKakaoPOP()" id='socialLink' >
<img src='/images/Kakao1.jpg' id='logpng' />
KAKAOPOP
</a>
<a as='button' href="javascript:loginWithKakao()" id='socialLink'> <a as='button' href="javascript:loginWithKakao()" id='socialLink'>
<Image src='/images/google.png' id='logpng' /> <Image src='/images/google.png' id='logpng' />
GOOGLE GOOGLE
...@@ -52,7 +69,7 @@ function LoginwithSocial() { ...@@ -52,7 +69,7 @@ function LoginwithSocial() {
</a> </a>
</Row> </Row>
</Modal.Body> </Modal.Body>
</> </Row>
) )
} }
......
client/src/pages/SignUp.js
View file @ 09a1f37a
import React from 'react' import React from 'react'
import '../App.css' import '../App.css'
import { Form, Modal, Button, Row, Col, Image } from 'react-bootstrap'; import { Form, Modal, Button, Row, Col, Image } from 'react-bootstrap';
import { KAKAO_AUTH_URL } from './../components/OAuth'; // import { KAKAO_AUTH_URL } from '../components/Oauth';
function SignUp() { function SignUp() {
...@@ -43,26 +43,17 @@ function SignUp() { ...@@ -43,26 +43,17 @@ function SignUp() {
<Form.Control type="password2" placeholder="Confirm Password" /> <Form.Control type="password2" placeholder="Confirm Password" />
</Form.Group> </Form.Group>
<Button type="submit" className='' id='formbtn'> <Button variant='light' type="submit" className='' id='formbtn'>
Sign Up Sign Up
</Button> </Button>
</Form> </Form>
<hr /> <hr />
{/*
<p className='d-flex justify-content-center'>
<a id="custom-login-btn" href="javascript:loginWithKakao()">
<img
src="//k.kakaocdn.net/14/dn/btqCn0WEmI3/nijroPfbpCa4at5EIsjyf0/o.jpg"
width='200em'
/>
</a>
</p> */}
<Row style={{margin: 'auto', marginBottom: '5px', display: 'flex', justifyContent: 'center' }}> <Row style={{margin: 'auto', marginBottom: '5px', display: 'flex', justifyContent: 'center' }}>
<a href={KAKAO_AUTH_URL} target='_blank' id='socialLink' > {/* <a href={KAKAO_AUTH_URL} target='_blank' id='socialLink' >
<Image src='/images/Kakao1.jpg' id='logpng' /> <Image src='/images/Kakao1.jpg' id='logpng' />
KAKAO KAKAO
</a> </a> */}
<a href="javascript:loginWithKakao()" id='socialLink'> <a href="javascript:loginWithKakao()" id='socialLink'>
<Image src='/images/google.png' id='logpng' /> <Image src='/images/google.png' id='logpng' />
GOOGLE GOOGLE
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment