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 @@
"@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"
}
}
}
}
client/package.json
View file @ 09a1f37a
......@@ -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",
......
client/public/index.html
View file @ 09a1f37a
......@@ -7,7 +7,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<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
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
......@@ -24,8 +24,49 @@
-->
<title>EUE, make your day</title>
<script src='https://developers.kakao.com/sdk/js/kakao.min.js'></script>
<script>Kakao.init("29c2c90caed30db77d55580048c53d7b");</script>
<!-- <meta name ="google-signin-client_id" content="217755353555-3msma49ckq4fa47k0tg5tkshatcdh8c9.apps.googleusercontent.com"> -->
<script>
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>
<body>
......
client/public/manifest.json
View file @ 09a1f37a
......@@ -8,7 +8,7 @@
"type": "image/x-icon"
},
{
"src": "logo192.png",
"src": "images/Kakao.png",
"type": "image/png",
"sizes": "192x192"
},
......
client/src/App.css
View file @ 09a1f37a
......@@ -4,11 +4,19 @@ 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 {
......
client/src/App.js
View file @ 09a1f37a
......@@ -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() {
<Router>
<>
<Route exact path='/' component={Home} />
<Route path='/oauth' component={Oauth}/>
</>
</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';
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() {
<>
<Row className='text-center w-100 my-2'>
<Card style={fontstyl}>
<Card style={cardstyled}>
<Doughnut
data={data}
options={options}
......
client/src/components/ChartLine.js
View file @ 09a1f37a
......@@ -3,15 +3,16 @@ import { Container, Row, Card, Table, Button } from 'react-bootstrap';
import { Line } from 'react-chartjs-2'
function ChartLine() {
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 = {
......@@ -50,7 +51,7 @@ function ChartLine() {
backgroundColor: 'rgba(75,192,192,0.4)',
borderColor: 'rgba(75,192,192,1)',
borderCapStyle: 'butt',
borderDash: [2,10], //점선 ex [2,10]
borderDash: [2, 10], //점선 ex [2,10]
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: 'rgba(75,192,192,1)',
......@@ -68,10 +69,8 @@ function ChartLine() {
};
return (
<>
<Row className='text-center w-100 my-2'>
<Card style={fontstyl}>
<Card style={cardstyled}>
<Line
data={data}
options={options}
......@@ -79,7 +78,6 @@ function ChartLine() {
/>
</Card>
</Row>
</>
)
}
......
client/src/components/EueSuggest.js
View file @ 09a1f37a
......@@ -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 (
<>
<Row className='text-center w-100 my-2'>
<Card style={fontstyl}>
<Card style={cardstyled}>
<Card.Title>
EUE 제안
</Card.Title>
......@@ -36,7 +35,6 @@ function EueSuggest() {
</Card.Text>
</Card>
</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 { 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축 그리드 한 칸당 수치
}
}]
},
// false : 사용자 정의 크기에 따라 그래프 크기가 결정됨.
// true : 크기가 알아서 결정됨.
maintainAspectRatio: false
const [donateShow, setDonateShow] = useState(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]);
return (
// }
const handleClick = () => setCopyShow(true);
<>
return (
<Row className='text-center w-100 my-2'>
<Card style={fontstyl}>
<Bar
data={data}
options={options}
height={300}
/>
<Card style={cardstyled}>
<Row className='my-1 d-flex justify-content-center' style={{ fontSize: '15px', color: 'rgb(109, 110, 109)' }}>
서버비용 후원하기
</Row>
<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>
</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() {
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() {
<Image src='/images/EUE11.jpg' alt='EUE' style={boxstyled} />
</Link>
</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>
<Dropdown.Menu className='z-index-10'>
<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
</Button>
<Modal
......@@ -76,7 +81,7 @@ function MainLayer() {
</Dropdown.Item>
<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
</Button>
<Modal
......@@ -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'>
<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
size="sm"
show={logshow}
......@@ -105,7 +110,7 @@ function MainLayer() {
</Modal>
<Button style={btnstyled} onClick={() => setSignshow(true)}>SIGN UP</Button>
<Button variant='light' style={btnstyled} onClick={() => setSignshow(true)}>SIGN UP</Button>
<Modal
size="md"
show={signshow}
......
client/src/components/OAuth.js
View file @ 09a1f37a
const CLIENT_ID = 'a564b730d6339b084ecf7775a9a09284';
const REDIRECT_URI = 'http://localhost:3000/oauth';
import axios from 'axios';
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`;
\ No newline at end of file
// export const KAKAO_AUTH_URL = `https://kauth.kakao.com/oauth/authorize?client_id=${CLIENT_ID}&redirect_uri=${REDIRECT_URI}&response_type=code`;
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'
function TimeNow() {
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)'
}
return (
<>
<Row className='text-center w-100 my-2'>
<Card style={fontstyl}>
<Card style={cardstyled}>
<Card.Title style={{color:'black'}}>
현재시각
</Card.Title>
......@@ -30,7 +30,6 @@ function TimeNow() {
</Card.Text>
</Card>
</Row>
</>
)
}
......
client/src/components/Trydays.js
View file @ 09a1f37a
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 (
<>
<Row className='text-center w-100 my-2'>
<Card style={fontstyl}>
<Card style={cardstyled}>
<Card.Title>
유저아이디
</Card.Title>
......@@ -34,7 +37,7 @@ function Trydays() {
지역
울릉면
지역코드
<Button style={btnstyled}>
<Button variant='light' style={btnstyled}>
변경
</Button>
......@@ -45,7 +48,6 @@ function Trydays() {
</Card.Text>
</Card>
</Row>
</>
)
}
......
client/src/pages/Home.js
View file @ 09a1f37a
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 (
<Container fluid className='d-flex justify-content-center position-relative'>
<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'>
<MainLayer />
</Row>
......@@ -48,12 +47,13 @@ function Home() {
</Col>
<Col md={6} style={col2sty}>
<Row style={constyled} className='d-flex mb-2 w-100'>
<TimeNow />
{/* <KakaoLogin/> */}
{/* <TimeNow /> */}
<Trydays />
<EueSuggest/>
<ChartLine/>
<ChartDoughnut/>
<Footer/>
<EueSuggest />
<ChartLine />
<ChartDoughnut />
<Footer />
</Row>
</Col>
</Row>
......
client/src/pages/LoginwithSocial.js
View file @ 09a1f37a
import React from 'react'
import '../App.css'
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() {
......@@ -15,9 +18,16 @@ function LoginwithSocial() {
}
function loginWithKakao() {
window.Kakao.Auth.authorize({
redirectUri: 'http://localhost:3000/oauth'
})
}
const [isLogin, setIsLogin] = useState(false)
return (
<>
<Modal.Header className='d-flex justify-content-center'>
<Row className='m-auto'>
<Modal.Header className='d-flex justify-content-center w-100'>
<Modal.Title id="example-modal-sizes-title-sm">
LOGIN
</Modal.Title>
......@@ -31,17 +41,24 @@ function LoginwithSocial() {
<Form.Group controlId="formBasicPassword">
<Form.Control type="password" placeholder="Password" />
</Form.Group>
<Button type="submit" id='formbtn'>
<Button variant='light' type="submit" id='formbtn'>
LOGIN
</Button>
</Form>
<hr />
<Row style={{ margin: 'auto', marginBottom: '5px', display: 'flex', justifyContent: 'center' }}>
{/* <KakaoLogin /> */}
<a href={KAKAO_AUTH_URL} target='_blank' id='socialLink' >
<Image src='/images/Kakao1.jpg' id='logpng' />
<a href="#" onClick={loginWithKakao} id='socialLink' >
<img src='/images/Kakao1.jpg' id='logpng' />
KAKAO
</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'>
<Image src='/images/google.png' id='logpng' />
GOOGLE
......@@ -52,7 +69,7 @@ function LoginwithSocial() {
</a>
</Row>
</Modal.Body>
</>
</Row>
)
}
......
client/src/pages/SignUp.js
View file @ 09a1f37a
import React from 'react'
import '../App.css'
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() {
......@@ -43,26 +43,17 @@ function SignUp() {
<Form.Control type="password2" placeholder="Confirm Password" />
</Form.Group>
<Button type="submit" className='' id='formbtn'>
<Button variant='light' type="submit" className='' id='formbtn'>
Sign Up
</Button>
</Form>
<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' }}>
<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' />
KAKAO
</a>
</a> */}
<a href="javascript:loginWithKakao()" id='socialLink'>
<Image src='/images/google.png' id='logpng' />
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