├── .gitignore ├── README.md ├── package-lock.json ├── package.json ├── public ├── favicon.ico ├── index.html ├── logo192.png ├── logo512.png ├── manifest.json └── robots.txt ├── server ├── config.json └── database.json └── src ├── App.js ├── assets ├── btn-close.png ├── london-2012.jpg ├── london-flag.png ├── rio-2016.jpg └── rio-flag.jpeg ├── components ├── Bar.js ├── Footer.js ├── Header.js ├── ImageModal.js ├── InfoTable.js ├── SurveyChart.js └── SurveyItem.js ├── index.css └── index.js /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## Lecture-2 2 | 3 | '프론트엔드 개발자를 위한, 실전 웹 성능 최적화(feat. React) - Part. 1' 2번째 강의 소스입니다. 4 | 5 | ### 실행 6 | 7 | 1. download sources 8 | 9 | ``` 10 | $ git clone https://github.com/performance-lecture/lecture-2.git 11 | ``` 12 | 13 | 2. install dependencies 14 | 15 | ``` 16 | $ npm install 17 | or 18 | $ yarn 19 | ``` 20 | 21 | 3. start development server 22 | 23 | ``` 24 | $ npm start 25 | or 26 | $ yarn start 27 | ``` 28 | 29 | 4. start json-server 30 | 31 | ``` 32 | $ npm run server 33 | or 34 | $ yarn server 35 | ``` 36 | *3번의 dev server 와 다른 콘솔에서 띄워줍니다. 37 | 38 | ### 질문 39 | 40 | 궁금하신 부분은 강의 내 질문 & 답변 게시판 또는 해당 레포지토리의 Issues를 이용해주시기 바랍니다. 41 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "lecture-2", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^4.2.4", 7 | "@testing-library/react": "^9.5.0", 8 | "@testing-library/user-event": "^7.2.1", 9 | "react": "^16.13.1", 10 | "react-dom": "^16.13.1", 11 | "react-image-gallery": "^1.0.7", 12 | "react-scripts": "3.4.1", 13 | "styled-components": "^5.1.1" 14 | }, 15 | "scripts": { 16 | "start": "react-scripts start", 17 | "build": "react-scripts build", 18 | "server": "node ./node_modules/json-server/lib/cli/bin.js --watch ./server/database.json -c ./server/config.json" 19 | }, 20 | "eslintConfig": { 21 | "extends": "react-app" 22 | }, 23 | "browserslist": { 24 | "production": [ 25 | ">0.2%", 26 | "not dead", 27 | "not op_mini all" 28 | ], 29 | "development": [ 30 | "last 1 chrome version", 31 | "last 1 firefox version", 32 | "last 1 safari version" 33 | ] 34 | }, 35 | "devDependencies": { 36 | "json-server": "^0.16.1" 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/performance-lecture/lecture-2/6b33d32b80f5029686d5f379ac2f36af6189848e/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | Lecture-2 28 | 29 | 30 | 31 |
32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/performance-lecture/lecture-2/6b33d32b80f5029686d5f379ac2f36af6189848e/public/logo192.png -------------------------------------------------------------------------------- /public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/performance-lecture/lecture-2/6b33d32b80f5029686d5f379ac2f36af6189848e/public/logo512.png -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /server/config.json: -------------------------------------------------------------------------------- 1 | { 2 | "port": 3001 3 | } -------------------------------------------------------------------------------- /server/database.json: -------------------------------------------------------------------------------- 1 | { 2 | "survey": [ 3 | { 4 | "no": 1, 5 | "question": "어떤 올림픽이 더 재밌었나요?", 6 | "items": [ 7 | "리오 올림픽", 8 | "런던 올림픽" 9 | ] 10 | }, 11 | { 12 | "no": 2, 13 | "question": "리오 올림픽에서 가장 재밌었던 종목은 무엇인가요?", 14 | "items": [ 15 | "수영", 16 | "축구", 17 | "양궁", 18 | "배드민턴", 19 | "기타" 20 | ] 21 | }, 22 | { 23 | "no": 3, 24 | "question": "런던 올림픽에서 가장 재밌었던 종목은 무엇인가요?", 25 | "items": [ 26 | "수영", 27 | "축구", 28 | "양궁", 29 | "배드민턴", 30 | "기타" 31 | ] 32 | }, 33 | { 34 | "no": 4, 35 | "question": "리오 올림픽에서 어떤 나라가 가장 잘했다고 생각하시나요?", 36 | "items": [ 37 | "대한민국", 38 | "미국", 39 | "중국", 40 | "기타" 41 | ] 42 | }, 43 | { 44 | "no": 5, 45 | "question": "런던 올림픽에서 어떤 나라가 가장 잘했다고 생각하시나요?", 46 | "items": [ 47 | "대한민국", 48 | "미국", 49 | "중국", 50 | "기타" 51 | ] 52 | }, 53 | { 54 | "no": 6, 55 | "question": "다음 올림픽도 챙겨보실 계획인가요?", 56 | "items": [ 57 | "예", 58 | "아니오", 59 | "잘모르겠다" 60 | ] 61 | } 62 | ], 63 | "answer": { 64 | "data": [[1,3,4,3,1,0],[0,2,0,3,1,0],[0,0,3,1,3,0],[0,0,1,0,1,1],[0,2,1,0,2,2],[0,0,3,1,1,2],[0,0,0,3,0,2],[1,2,0,0,2,1],[0,0,3,1,0,1],[1,2,0,2,1,0],[0,2,3,0,3,0],[1,3,2,1,0,2],[1,4,2,2,0,2],[0,4,1,0,0,2],[1,3,4,1,0,0],[1,2,1,1,2,1],[1,0,4,1,1,0],[0,4,2,1,3,2],[1,4,1,3,2,0],[1,1,1,0,2,2],[0,4,0,2,2,1],[0,3,2,3,0,2],[1,0,2,2,0,0],[1,3,3,2,1,2],[0,0,0,2,1,1],[1,4,3,3,3,1],[0,1,2,1,0,0],[0,3,4,2,2,0],[1,2,3,2,2,0],[1,1,3,2,1,2],[0,1,0,3,0,2],[1,1,0,3,1,2],[0,3,2,0,1,0],[0,4,0,2,1,0],[0,0,2,1,0,1],[0,0,1,1,3,0],[1,4,0,2,0,1],[0,0,0,2,3,0],[1,3,4,2,3,2],[1,1,2,3,1,2],[1,1,2,0,3,1],[1,4,3,3,2,2],[1,0,3,3,3,1],[1,1,4,2,1,2],[1,2,1,2,1,2],[1,1,1,0,3,1],[1,4,2,1,1,1],[1,0,2,2,2,2],[0,0,3,2,2,0],[0,2,2,3,0,1],[0,1,3,0,0,2],[1,1,0,2,1,1],[0,4,2,1,2,1],[0,0,0,3,2,0],[0,1,3,1,2,1],[1,3,3,2,2,0],[1,3,1,0,2,1],[0,3,1,2,3,0],[1,1,1,2,3,0],[1,1,4,3,0,2],[0,3,4,2,0,2],[0,4,2,2,3,1],[0,0,2,2,3,0],[0,2,0,0,1,0],[0,3,3,3,3,1],[0,3,0,3,1,0],[0,3,3,1,2,1],[1,0,1,1,2,0],[0,0,3,3,2,0],[1,4,2,1,3,1],[0,2,0,3,0,1],[0,4,4,1,1,1],[1,3,3,2,3,1],[0,0,4,1,0,2],[1,2,1,1,3,1],[1,1,4,2,0,1],[0,4,3,2,1,0],[0,0,0,0,3,0],[0,1,2,2,0,0],[0,1,1,2,0,2],[0,2,2,2,3,2],[1,0,2,1,0,1],[0,4,3,2,0,1],[1,2,2,2,2,1],[0,0,1,2,1,0],[0,3,0,1,3,2],[0,4,2,3,0,2],[1,2,4,2,2,1],[1,0,4,2,0,1],[1,4,0,3,1,2],[1,4,1,1,2,1],[0,1,3,2,0,2],[1,3,3,0,1,1],[0,1,0,3,3,2],[0,0,3,3,3,2],[1,0,0,2,2,2],[1,4,1,1,1,0],[1,0,2,1,1,1],[0,0,2,1,0,1],[0,3,4,1,1,0],[0,0,0,0,0,0],[0,2,1,0,0,1],[1,4,4,1,2,0],[0,4,2,1,0,2],[1,4,0,3,0,0],[1,0,4,1,2,0],[0,2,4,3,1,2],[1,3,3,1,0,0],[0,4,2,3,1,1],[1,1,0,3,0,1],[1,0,2,1,1,0],[0,1,0,0,1,0],[0,3,1,0,3,2],[1,0,2,1,1,2],[0,3,3,3,1,0],[1,1,2,1,0,0],[1,2,1,1,1,1],[1,1,3,2,3,0],[0,0,4,1,2,1],[0,3,2,3,2,0],[0,4,1,1,2,0],[0,1,1,0,2,0],[0,2,4,0,3,1],[1,2,3,0,2,1],[1,4,3,3,2,1],[0,1,2,3,2,1],[0,0,3,1,3,1],[1,4,4,0,2,2],[1,0,0,3,1,1],[0,0,0,1,2,2],[0,2,4,0,0,2],[0,4,1,2,0,0],[1,2,1,3,3,1],[0,2,2,0,2,0],[0,4,1,1,1,0],[1,4,1,2,2,0],[0,2,1,2,0,2],[1,4,2,0,3,0],[1,1,0,0,1,1],[1,4,3,3,0,0],[0,1,4,3,1,0],[0,0,0,3,3,0],[0,2,1,2,0,0],[0,2,3,0,3,1],[1,2,4,3,2,2],[0,3,0,3,2,2],[1,4,1,2,3,1],[1,3,1,2,3,2],[0,1,2,1,1,1],[0,4,1,2,3,1],[0,2,1,3,1,1],[0,0,4,2,1,1],[1,1,1,0,0,1],[1,2,2,2,0,2],[0,3,3,3,3,1],[0,0,2,1,3,2],[1,1,4,2,1,2],[0,2,1,3,0,0],[0,1,1,3,3,1],[1,3,1,3,2,1],[1,4,2,0,1,0],[0,0,2,1,2,2],[0,1,0,2,3,1],[1,0,1,3,1,1],[1,1,2,1,1,2],[0,4,4,0,2,1],[1,1,4,1,2,2],[0,3,3,3,1,2],[1,2,1,1,3,0],[0,1,4,1,2,0],[0,2,1,2,0,1],[0,2,4,2,3,2],[0,1,3,0,2,1],[1,3,0,0,3,1],[1,4,1,3,2,0],[1,0,3,3,1,1],[1,0,2,3,2,1],[0,1,3,0,2,0],[0,4,3,1,3,1],[1,4,3,2,3,1],[0,0,3,2,1,0],[0,3,1,0,1,0],[0,3,2,3,2,2],[1,2,4,0,2,1],[0,4,2,3,1,2],[0,2,1,0,3,2],[1,0,3,0,2,0],[1,2,4,3,0,2],[1,0,3,2,0,2],[1,3,4,1,3,0],[1,2,1,0,1,0],[1,0,0,3,1,2],[0,2,0,1,1,1],[1,1,4,2,0,2],[1,0,3,2,3,2],[0,3,1,0,0,2],[1,0,3,3,1,0],[0,1,3,3,0,2],[0,2,3,2,1,2],[0,4,3,0,0,1],[1,1,0,3,3,1],[1,3,1,2,2,0],[0,2,3,1,0,1],[0,2,4,1,3,0],[1,0,0,3,2,2],[0,3,3,1,3,0],[1,1,3,3,1,2],[1,4,4,0,1,0],[0,0,1,2,3,1],[1,0,1,0,0,2],[0,4,0,0,1,0],[1,0,1,3,3,2],[0,1,0,2,3,2],[1,0,1,1,3,2],[1,4,0,2,2,0],[1,4,0,0,2,0],[0,4,0,1,1,2],[1,0,2,1,0,2],[1,3,1,3,2,2],[0,2,4,2,0,1],[0,2,3,1,1,0],[1,0,0,0,2,1],[0,2,4,0,0,0],[0,2,1,2,3,2],[0,1,0,0,0,0],[0,4,4,3,3,2],[1,2,4,0,3,2],[0,3,1,0,2,0],[0,2,0,0,1,2],[0,4,3,3,2,1],[0,4,0,3,3,0],[0,2,3,0,2,2],[1,2,3,2,0,0],[0,1,0,2,1,1],[1,2,1,2,3,2],[0,2,1,2,3,1],[1,4,2,2,0,2],[0,3,1,0,2,1],[0,0,4,3,2,0],[0,3,4,0,1,2],[1,2,1,1,1,2],[0,0,4,2,3,1],[0,0,2,0,2,0],[0,4,4,1,0,1],[1,2,0,2,0,0],[1,2,3,1,3,0],[1,2,1,0,1,2],[1,0,3,3,0,2],[1,3,0,1,2,2],[1,0,2,3,1,2],[1,2,0,3,2,1],[1,3,4,3,2,1],[0,1,4,0,3,2],[0,4,3,1,1,2],[0,0,4,2,2,2],[1,3,3,3,2,1],[0,0,3,2,3,0],[1,4,1,2,3,0],[1,1,1,0,0,2],[0,1,2,1,1,1],[0,0,1,1,1,1],[1,4,2,0,3,2],[1,4,4,3,3,1],[0,4,3,2,1,2],[0,0,1,2,0,2],[0,2,3,1,3,2],[1,4,0,1,1,2],[1,4,3,2,3,1],[1,1,0,3,0,1],[1,3,4,3,0,2],[1,2,3,0,0,1],[1,1,0,3,1,1],[1,2,2,2,1,0],[1,4,3,2,1,1],[1,2,3,1,3,1],[1,4,1,3,2,1],[0,4,2,3,0,1],[0,3,0,1,3,1],[1,4,4,2,1,2],[1,1,1,0,2,1],[0,4,1,3,2,2],[1,2,4,1,1,1],[0,3,1,1,3,2],[1,4,4,0,0,1],[1,3,0,0,1,1],[1,2,3,0,0,0],[0,3,2,0,0,0],[1,2,2,2,3,1],[1,3,0,3,0,0],[1,4,2,2,1,1],[0,3,1,2,3,2],[0,0,3,2,2,2],[1,0,2,2,0,2],[0,2,0,1,1,1],[1,4,0,1,3,1],[1,0,4,2,3,0],[0,1,2,1,2,0],[1,4,4,2,3,2],[0,3,0,3,3,2],[1,4,2,0,0,0],[0,4,0,3,2,0],[1,3,2,1,0,0],[1,0,4,3,3,1],[1,4,0,1,0,0],[1,3,2,3,2,2],[1,3,4,3,2,0],[1,2,4,2,1,0],[0,1,1,2,2,2],[0,0,1,2,2,0],[0,1,4,3,2,1],[0,0,0,0,3,2],[0,0,0,1,0,2],[1,0,4,1,2,1],[0,3,3,3,1,2],[0,3,2,2,3,1],[1,4,2,0,1,0],[0,1,0,0,3,1],[0,4,2,3,0,2],[1,2,1,2,1,0],[0,3,3,3,2,1],[0,4,2,2,1,0],[0,4,0,0,3,1],[0,0,0,3,1,1],[1,1,2,3,1,0],[1,4,0,0,1,2],[0,0,3,3,2,1],[0,3,3,2,3,0],[1,4,3,2,3,0],[0,0,4,1,0,0],[1,0,3,0,1,1],[1,1,1,1,1,0],[1,2,1,2,1,1],[0,3,2,2,1,1],[0,2,1,1,0,1],[0,0,3,3,2,0],[0,1,0,3,2,2],[1,3,2,0,3,2],[1,0,4,3,1,1],[0,3,0,1,1,2],[0,0,0,2,3,1],[0,4,0,1,3,2],[0,4,4,3,3,1],[1,3,0,2,2,0],[1,0,2,3,1,1],[1,0,3,0,0,1],[1,3,1,3,2,1],[1,3,3,3,0,2],[0,0,3,3,2,2],[0,1,2,0,3,2],[0,1,4,2,2,2],[1,1,3,3,2,0],[0,3,0,1,1,1],[1,4,1,3,3,2],[1,3,4,1,0,1],[1,4,0,0,2,0],[0,0,2,3,2,1],[1,1,1,2,2,2],[0,4,4,2,3,1],[0,1,1,1,3,0],[0,4,0,0,2,0],[0,3,1,1,3,2],[1,1,4,0,1,2],[1,2,1,2,1,0],[1,2,0,0,2,2],[0,1,3,1,2,2],[0,2,3,3,0,1],[0,4,0,1,2,1],[1,0,4,0,2,2],[0,0,4,3,0,1],[0,4,1,0,3,0],[0,4,0,0,3,0],[1,4,3,0,0,0],[0,3,0,3,3,0],[0,0,1,1,0,1],[1,1,1,1,3,0],[0,0,4,0,3,0],[0,0,3,3,1,0],[1,1,0,2,0,1],[0,3,4,0,0,2],[0,0,0,3,1,0],[0,2,3,0,1,1],[1,2,4,2,0,2],[0,2,2,2,3,0],[1,4,3,2,2,1],[1,2,1,0,0,1],[0,1,3,2,3,2],[1,0,1,1,3,0],[0,4,2,2,3,2],[0,0,2,0,2,1],[1,0,0,2,2,0],[1,4,0,1,3,1],[0,0,0,1,3,2],[1,1,1,2,0,2],[1,4,0,2,2,1],[1,0,2,3,2,1],[1,3,0,0,3,1],[1,1,0,2,0,0],[0,2,2,0,3,2],[0,1,2,1,2,2],[0,0,0,3,2,0],[1,4,0,0,0,2],[0,0,0,1,2,0],[0,4,0,0,3,2],[1,1,3,1,1,1],[1,0,1,2,3,2],[0,3,2,0,3,2],[1,4,0,0,0,1],[0,0,0,0,1,1],[1,2,1,0,0,2],[0,2,2,1,0,1],[0,1,2,2,3,2],[0,3,2,1,0,0],[1,1,4,0,0,0],[0,4,3,1,1,1],[1,2,4,3,3,1],[1,2,3,0,1,0],[0,1,1,0,0,2],[1,2,4,3,2,2],[1,3,2,2,0,0],[1,2,0,1,2,0],[1,2,2,3,1,2],[0,0,3,0,0,0],[1,3,4,0,3,0],[1,0,3,1,0,1],[1,4,1,0,3,2],[1,2,1,3,1,2],[1,3,3,0,3,0],[1,2,3,3,1,1],[1,0,3,3,3,1],[0,2,4,1,3,1],[1,1,4,0,0,1],[1,4,0,3,2,1],[1,2,4,1,3,2],[0,3,0,3,2,2],[1,1,4,3,3,1],[0,0,2,1,2,0],[0,4,0,3,1,2],[1,3,3,2,3,0],[0,3,0,2,3,2],[0,2,3,0,0,0],[1,2,2,3,3,1],[1,1,3,3,3,1],[1,4,3,0,1,0],[1,0,0,3,1,2],[0,1,4,2,1,2],[0,3,4,2,1,1],[1,2,4,1,0,1],[0,2,3,1,0,1],[0,1,4,3,1,0],[0,1,3,3,3,2],[1,2,1,1,0,0],[1,3,2,2,3,2],[1,0,2,3,3,0],[1,4,3,3,0,2],[0,2,4,0,3,2],[0,4,4,0,3,1],[0,0,4,2,2,0],[1,4,1,1,3,1],[0,0,2,0,0,2],[1,4,0,2,1,1],[0,2,4,3,0,1],[0,3,0,3,3,0],[1,2,2,2,0,0],[0,2,1,3,3,1],[0,0,4,0,0,0],[1,3,1,1,1,2],[0,2,2,0,0,1],[1,1,2,1,1,0],[0,1,2,2,2,2],[0,2,1,3,0,2],[0,2,0,0,2,2],[0,4,0,2,1,2],[1,3,4,3,1,1],[1,3,1,3,3,0],[0,3,3,0,0,2],[0,3,0,1,1,2],[1,3,3,2,1,2],[1,3,3,2,3,0],[0,0,0,1,2,1],[0,1,1,0,3,0],[1,1,4,2,3,2],[1,2,1,2,2,2],[1,4,3,2,1,0],[0,1,4,0,2,0],[0,1,4,0,3,2],[0,1,3,3,2,0],[0,3,1,2,1,2],[0,1,0,3,1,2],[1,4,3,0,1,1],[1,2,2,3,1,0],[0,2,0,3,3,1],[0,1,3,2,0,0],[1,0,2,0,0,1],[1,3,3,0,3,2],[1,4,2,3,0,0],[0,2,1,0,2,2],[1,0,0,3,0,0],[1,3,2,2,0,2],[1,1,3,1,2,2],[0,3,2,3,1,0],[0,0,2,1,3,2],[1,4,4,1,3,2],[1,2,2,3,0,0],[1,4,4,2,3,2],[0,4,1,3,2,0],[1,3,3,1,0,2],[1,2,2,0,1,1],[0,2,0,1,3,2],[1,1,0,2,3,0],[0,3,4,2,0,1],[0,4,1,2,2,2],[0,1,2,1,0,1],[0,4,3,1,3,1],[0,4,3,0,2,0],[1,4,2,0,2,2],[0,3,3,3,3,2],[0,4,4,0,0,2],[1,2,1,2,1,0],[1,3,1,3,1,1],[0,3,1,3,2,1],[0,1,0,3,2,1],[1,3,3,2,3,1],[0,4,1,2,0,1],[0,4,0,1,3,1],[1,4,0,1,3,1],[1,1,3,2,2,1],[0,1,1,2,1,1],[0,1,0,3,3,1],[0,2,4,2,2,1],[1,3,0,2,3,1],[1,2,4,0,2,2],[0,3,1,1,3,0],[0,2,2,0,3,1],[0,4,3,2,2,2],[0,4,1,2,2,1],[0,3,3,1,1,0],[1,1,4,1,3,1],[1,2,3,1,3,1],[0,0,0,2,1,2],[1,3,4,2,3,1],[1,1,3,0,3,2],[1,0,2,2,0,2],[0,3,2,1,1,0],[1,2,1,3,2,0],[0,3,0,3,0,2],[1,4,3,3,0,2],[1,1,0,2,1,2],[1,1,3,3,3,1],[0,3,1,0,2,1],[0,2,3,3,1,0],[1,1,4,2,3,0],[0,1,2,2,2,1],[1,3,0,1,0,1],[0,4,1,0,1,1],[1,4,4,0,3,1],[0,1,2,2,2,2],[0,0,0,1,2,1],[0,1,0,2,0,0],[0,3,2,3,0,0],[0,4,1,2,3,2],[0,2,4,0,3,0],[0,2,2,2,0,0],[0,1,4,1,1,2],[1,4,4,2,2,0],[0,1,3,0,2,0],[1,3,2,0,1,0],[1,1,2,2,1,2],[0,4,3,0,1,0],[0,2,3,3,2,0],[0,2,0,3,3,1],[0,3,1,2,1,0],[0,1,1,3,3,1],[1,2,2,2,3,0],[1,1,0,2,2,0],[0,3,2,1,1,0],[0,1,3,1,2,2],[1,1,4,0,2,0],[1,0,1,1,2,0],[1,3,0,2,0,0],[0,3,2,1,0,2],[0,3,4,2,0,2],[1,2,4,3,2,2],[0,4,4,3,0,0],[1,2,4,2,0,2],[1,0,1,1,3,1],[0,1,1,0,0,0],[1,3,4,3,3,0],[1,4,2,2,1,1],[0,4,3,2,3,1],[1,2,4,0,2,1],[1,0,4,1,3,2],[1,1,2,3,2,1],[1,1,0,1,3,1],[0,0,2,2,1,1],[0,2,3,0,2,0],[0,2,1,2,1,0],[1,3,4,1,2,1],[1,4,3,0,0,2],[1,3,3,3,2,2],[1,1,4,3,3,1],[1,4,2,0,2,2],[1,4,3,1,1,2],[0,3,4,2,1,2],[1,0,1,3,3,1],[0,1,3,3,1,1],[1,4,2,1,3,1],[0,0,3,2,2,0],[1,0,0,3,2,1],[0,3,4,1,2,0],[0,1,3,2,1,2],[1,4,1,3,2,2],[0,2,2,3,0,2],[0,3,1,1,2,1],[0,4,3,2,3,1],[0,4,4,2,3,1],[0,2,1,2,1,2],[1,4,2,3,3,2],[1,4,3,0,3,1],[1,4,4,1,1,2],[1,2,4,2,3,1],[0,1,3,2,0,2],[0,0,0,3,1,1],[1,2,0,3,3,0],[1,3,1,0,1,2],[0,1,2,3,1,2],[1,4,2,3,2,2],[0,4,1,1,0,1],[1,4,2,1,3,2],[0,4,4,1,2,0],[1,1,3,2,0,0],[1,1,4,1,1,0],[0,1,0,3,1,1],[0,3,4,1,3,2],[1,4,3,3,0,2],[1,3,4,1,3,2],[1,4,0,0,0,1],[0,1,2,1,1,2],[0,0,4,1,1,0],[1,0,1,3,2,1],[0,0,2,3,0,1],[0,3,1,3,2,2],[1,1,3,0,0,1],[1,4,4,2,3,1],[0,3,0,0,1,0],[0,0,0,0,3,0],[1,0,2,1,1,1],[1,3,2,3,3,1],[1,1,0,0,2,2],[0,3,3,0,0,2],[1,3,0,0,3,2],[1,4,0,3,2,2],[1,3,4,2,2,1],[0,0,2,3,1,1],[0,0,1,2,1,1],[0,0,0,0,2,1],[1,2,2,1,0,2],[1,3,1,1,2,1],[1,2,2,0,2,0],[0,0,4,0,2,2],[1,0,1,2,3,0],[1,1,2,0,2,1],[0,0,2,0,3,2],[0,3,0,0,1,2],[1,1,2,1,2,1],[1,4,3,3,0,0],[0,3,1,3,0,2],[0,1,2,2,1,2],[0,4,4,0,2,0],[0,4,2,3,1,1],[0,0,2,3,2,2],[0,0,3,0,1,2],[0,0,4,3,1,1],[1,2,3,3,0,0],[1,4,3,2,3,1],[0,2,0,2,1,1],[0,4,2,2,1,2],[0,1,4,2,2,0],[0,4,1,1,1,2],[1,4,2,1,1,0],[0,4,0,1,0,1],[1,1,4,0,2,0],[0,2,1,3,1,2],[1,3,4,1,0,0],[1,3,4,1,3,0],[0,2,1,0,1,1],[0,0,1,3,0,0],[1,1,4,3,1,2],[1,4,0,2,0,0],[1,3,1,3,3,2],[1,3,2,0,0,1],[0,2,2,2,2,2],[0,2,0,1,3,1],[0,3,1,3,1,0],[1,2,1,0,1,0],[1,0,3,3,2,2],[1,1,4,0,2,1],[0,3,4,2,1,2],[0,3,2,0,3,1],[1,1,0,3,0,0],[1,2,3,3,1,0],[1,0,3,2,2,0],[1,0,0,0,1,0],[0,1,0,3,2,2],[0,4,0,1,0,0],[0,1,4,1,0,0],[0,2,1,1,1,0],[1,3,1,0,3,1],[1,4,2,0,1,2],[1,0,4,3,0,2],[1,4,2,3,1,1],[1,0,0,3,2,0],[1,4,1,0,3,2],[0,4,3,0,3,0],[1,2,3,0,1,1],[0,4,1,2,0,0],[0,4,0,2,3,1],[1,2,4,3,1,2],[1,0,0,0,1,2],[1,4,3,0,3,0],[0,1,3,2,2,0],[0,1,2,2,2,0],[0,4,2,0,0,2],[1,3,0,0,3,0],[1,1,0,3,2,2],[1,2,2,1,1,2],[1,3,1,0,0,0],[0,4,3,2,2,1],[0,1,0,0,2,0],[0,0,2,2,0,2],[0,0,2,2,3,0],[1,1,3,3,0,2],[0,0,2,3,1,0],[1,2,4,2,0,1],[1,2,0,2,2,2],[0,1,4,2,1,2],[0,3,2,0,2,2],[1,3,3,3,0,1],[1,3,0,2,0,0],[0,1,3,0,0,2],[0,2,4,0,1,0],[1,4,1,1,2,1],[0,1,1,3,0,0],[1,4,1,3,2,0],[1,1,2,1,2,0],[0,3,3,2,2,2],[1,0,3,1,2,1],[1,0,0,3,2,1],[1,1,0,2,3,1],[1,1,2,3,3,0],[0,3,1,1,1,2],[1,2,0,1,1,2],[0,2,0,2,1,2],[1,1,1,1,0,1],[0,1,0,3,2,2],[1,4,1,0,2,1],[1,4,2,0,1,0],[1,4,4,0,1,0],[0,0,3,1,2,0],[0,2,4,3,2,0],[0,0,2,3,1,0],[1,2,4,2,1,1],[1,0,0,1,1,0],[1,4,3,2,3,0],[0,2,2,3,2,1],[1,2,1,1,0,0],[0,2,4,2,2,0],[0,0,4,2,1,1],[0,2,1,1,2,2],[1,3,2,0,3,2],[0,4,4,2,3,2],[0,4,4,2,0,0],[0,1,3,1,1,2],[0,3,2,0,0,1],[1,1,3,1,1,2],[0,0,3,2,3,2],[1,2,1,0,0,2],[0,2,1,1,1,1],[1,2,2,3,0,2],[1,3,1,3,0,0],[1,1,1,2,0,0],[1,4,4,3,3,0],[1,4,2,1,3,1],[1,3,2,2,0,1],[0,3,3,3,2,1],[1,2,0,1,3,0],[0,1,3,2,1,1],[1,4,4,3,2,2],[0,4,2,3,1,2],[0,4,2,2,0,2],[1,2,2,0,0,2],[0,3,3,0,3,0],[1,0,2,1,1,1],[1,3,2,0,3,1],[1,3,3,2,3,1],[1,3,4,1,1,0],[0,4,0,3,3,0],[0,0,3,3,2,1],[0,0,3,3,2,2],[0,1,2,1,1,2],[1,0,2,1,2,2],[1,0,3,2,2,2],[0,3,3,1,1,2],[1,4,1,2,2,1],[1,1,3,0,1,0],[1,1,0,0,1,0],[1,1,4,2,2,2],[0,4,4,3,2,0],[0,3,1,3,0,2],[1,4,0,3,2,1],[0,1,3,2,0,1],[0,2,4,2,1,1],[0,2,1,1,1,1],[1,4,2,1,0,2],[0,1,2,0,1,2],[0,0,1,1,0,1],[1,1,1,3,1,1],[0,2,2,2,3,0],[1,4,3,2,3,2],[1,2,4,2,2,2],[0,3,2,3,1,0],[0,2,2,0,0,2],[1,0,0,2,1,2],[0,0,2,3,0,2],[1,3,2,0,0,1],[1,4,4,1,3,2],[0,1,4,2,0,0],[1,4,4,0,1,2],[1,2,3,3,1,0],[1,4,4,3,1,1],[0,1,4,0,0,1],[0,3,4,0,1,0],[1,4,3,2,1,1],[0,2,1,1,3,1],[1,1,3,3,3,2],[1,2,2,0,1,0],[0,3,3,3,3,0],[1,0,0,3,1,1],[1,1,4,0,1,0],[1,3,0,0,3,1],[1,4,0,3,1,2],[0,2,1,3,1,0],[1,4,4,3,1,2],[1,4,1,1,0,0],[1,0,0,1,3,0],[0,1,2,3,0,0],[0,4,2,2,1,0],[0,0,1,3,0,1],[0,4,2,1,3,1],[1,0,0,2,0,1],[0,3,3,3,2,1],[1,3,3,2,3,2],[1,2,2,3,0,0],[0,1,0,1,1,0],[0,2,3,0,1,0],[1,2,3,3,0,1],[1,4,1,0,3,2],[1,1,2,1,0,2],[1,1,3,3,3,1],[1,0,4,1,0,1],[0,2,0,3,2,1],[0,4,2,3,2,2],[0,1,3,2,0,0],[1,1,1,3,0,1],[1,0,3,2,3,0],[0,3,2,2,3,1],[1,1,4,1,3,0],[1,4,4,2,1,1],[1,2,0,0,0,2],[1,3,0,3,2,1],[0,1,3,0,2,1],[1,3,0,2,1,2],[1,1,2,0,0,0],[0,0,3,1,3,0],[0,4,4,3,1,1],[1,1,2,1,0,0],[1,0,2,1,1,0],[0,1,4,2,3,2],[0,4,1,2,1,0],[1,0,0,0,0,1],[0,1,1,2,3,2],[1,2,1,2,1,1],[0,1,1,2,2,2],[0,1,4,0,0,0],[1,1,1,1,0,1],[0,2,0,2,3,0],[0,0,2,1,0,0],[0,4,2,3,3,1],[1,2,4,3,0,1],[1,3,1,2,2,0],[0,1,4,0,0,1],[1,3,0,1,3,0],[1,1,4,2,1,0],[1,3,4,0,3,2],[1,3,0,0,3,0],[1,4,4,1,3,0],[0,2,4,3,2,0],[1,0,2,0,2,0],[0,2,0,0,1,1],[1,2,1,3,2,1],[1,2,1,1,0,0],[0,1,0,1,0,0],[1,3,1,2,1,2],[0,1,4,3,2,1],[0,4,1,3,0,1],[1,3,1,3,3,0],[0,4,3,0,3,1],[1,4,3,2,2,1],[0,0,4,2,2,2],[1,0,3,0,3,1],[1,0,3,0,2,2],[0,3,0,1,3,2],[0,2,4,3,2,1],[1,4,0,1,2,2],[0,4,0,1,0,1],[0,3,3,1,2,2],[1,1,0,2,2,0],[0,0,2,2,2,0],[0,2,0,0,3,2],[1,2,0,3,1,0],[1,1,2,2,3,2],[0,4,4,1,0,2],[1,3,0,1,0,1],[1,3,4,0,1,1],[1,4,1,1,0,1],[0,4,2,1,2,0],[1,1,4,3,3,1],[0,4,0,0,3,2],[1,3,0,2,2,2],[1,4,2,1,1,0],[1,4,0,2,3,1],[1,2,1,1,3,1],[0,3,3,2,0,2],[1,1,3,1,2,0],[0,4,1,1,2,1],[1,4,1,3,3,1],[0,4,4,3,3,0],[1,0,4,0,0,1],[0,3,1,3,2,0],[1,0,1,1,2,2],[0,1,4,1,3,0],[0,2,0,2,1,0],[0,1,2,3,1,1],[0,2,4,3,1,0],[1,0,1,0,2,0],[0,0,3,2,0,1],[0,3,3,1,3,0],[0,0,1,2,0,1],[0,1,0,1,3,0],[1,2,2,2,2,1],[0,3,1,3,1,2],[0,4,0,3,0,1],[0,2,2,2,3,1],[1,1,4,2,1,1],[1,2,4,0,0,1],[0,0,2,2,1,1],[1,1,4,2,0,1],[1,3,1,3,3,1],[0,0,1,3,1,0],[0,3,3,0,3,2],[1,1,0,3,1,0],[0,0,4,0,1,1],[1,2,0,1,1,1],[0,2,0,3,1,1],[1,2,0,0,0,0],[0,3,0,2,2,2],[0,0,4,3,1,1],[0,2,0,0,3,0],[0,4,2,1,1,0],[1,0,2,2,3,0],[0,1,4,2,3,1],[1,2,3,1,2,2],[0,4,4,3,1,0],[1,1,0,3,2,1],[0,0,1,0,1,0],[0,3,4,2,3,1],[1,1,4,3,2,0],[1,0,1,3,0,2],[0,0,4,0,2,2],[0,2,1,0,3,0],[1,0,0,0,0,1],[1,1,1,1,2,1],[0,3,3,0,1,0],[1,3,2,2,1,1],[1,4,0,0,2,1],[0,3,1,1,3,2],[1,1,0,0,0,1],[1,2,4,0,3,0],[0,4,1,2,2,0],[0,3,1,3,3,0],[0,0,0,0,3,2],[1,4,0,1,3,0],[0,1,2,2,3,0],[0,4,0,1,3,2],[0,2,1,3,2,1],[1,1,1,0,2,2],[0,1,3,1,3,2],[1,2,2,3,1,1],[1,0,4,0,0,2],[1,1,2,1,0,1],[0,4,1,3,3,2],[0,1,2,2,1,0],[1,0,0,3,1,0],[0,4,2,3,1,1],[1,2,3,3,1,0],[1,3,0,2,2,0],[0,3,3,1,2,1],[0,4,0,1,1,0],[1,0,3,3,2,0],[0,1,1,2,2,2],[1,4,2,1,3,2],[1,4,3,1,1,1],[0,4,3,2,0,0],[0,4,0,0,2,0],[0,1,3,3,1,1],[0,3,4,1,3,1],[0,4,3,2,1,1],[0,4,1,1,0,1],[1,1,2,3,0,0],[0,2,2,1,3,0],[1,0,2,1,0,2],[1,2,4,0,2,2],[1,0,2,1,1,0],[1,4,1,2,2,2],[1,2,0,1,0,0],[1,0,2,1,2,1],[1,1,2,1,1,0],[0,3,3,1,3,1],[0,4,1,1,0,0],[1,0,1,0,2,1],[0,1,1,1,3,2],[1,3,4,3,1,2],[0,4,1,3,2,0],[1,3,3,0,3,2],[1,3,3,2,0,2],[0,1,3,0,3,0],[0,0,0,3,3,1],[1,1,3,0,1,2],[1,4,4,2,3,2],[1,1,1,2,0,2],[0,1,0,0,1,1],[0,2,3,2,0,1],[0,3,3,1,3,2],[0,3,2,3,2,2],[1,2,3,3,3,1],[1,4,4,1,1,2],[1,3,3,0,0,0],[1,2,3,0,3,2],[1,0,0,0,0,2],[0,3,0,1,0,1],[1,2,2,1,0,1],[1,3,1,1,3,2],[0,3,4,2,2,0],[1,3,4,0,0,2],[1,0,1,3,3,0],[0,3,0,3,2,0],[1,4,3,0,1,2],[0,1,4,1,0,1],[1,1,4,3,2,1],[0,1,1,1,2,0],[0,1,0,1,2,0],[1,3,3,0,1,0],[1,4,3,2,2,0],[0,4,4,3,3,1],[1,4,3,2,2,0],[0,0,4,3,0,1],[1,1,3,2,2,1],[1,1,2,3,2,2],[0,2,1,1,2,1],[1,3,1,1,2,1],[0,2,4,3,1,1],[0,0,4,1,1,1],[0,2,1,2,1,0],[0,4,1,3,3,0],[1,0,4,0,1,2],[1,4,4,3,2,2],[1,2,3,1,3,1],[1,3,0,3,1,1],[0,0,4,3,3,1],[0,4,1,2,0,0],[0,4,2,3,0,1],[1,4,0,1,0,1],[0,4,4,3,0,2],[1,2,0,0,0,2],[1,3,1,2,2,2],[0,3,0,2,0,1],[1,2,0,0,2,0],[1,3,2,0,1,1],[0,1,2,0,0,1],[1,3,0,0,3,2],[1,2,3,1,0,2],[0,1,0,1,2,1],[1,3,3,1,1,0],[0,0,4,3,2,1],[0,2,1,3,1,1],[0,3,4,0,1,1],[0,1,0,0,3,2],[0,2,1,0,2,0],[0,0,2,0,1,0],[0,0,4,0,1,0],[1,1,0,2,0,1],[0,0,3,0,0,1],[0,0,1,2,1,1],[0,0,2,1,1,1],[0,2,1,1,0,1],[0,0,3,2,1,1],[0,1,3,0,1,1],[0,1,3,0,1,1],[0,2,2,1,1,1],[0,0,1,2,0,1],[0,1,1,2,1,0],[0,2,0,0,0,1],[0,1,0,2,0,1],[0,1,3,1,1,1],[0,0,0,1,1,1],[0,1,2,0,1,0],[0,0,3,2,1,0],[0,2,0,2,0,1],[0,0,3,2,0,0],[0,1,3,1,1,1],[0,1,1,1,1,0],[0,1,3,0,0,0],[0,0,2,0,0,1],[0,1,2,2,0,1],[0,1,3,1,0,0],[0,0,3,1,1,1],[0,1,0,2,0,0],[0,2,1,1,0,1],[0,0,2,0,1,1],[0,2,2,0,0,0],[0,1,1,1,0,0],[0,1,1,1,1,0],[0,0,2,0,0,1],[0,0,1,2,0,1],[0,2,3,0,0,0],[0,2,2,2,1,0],[0,2,2,0,1,0],[0,1,2,2,0,0],[0,2,3,2,1,0],[0,2,3,1,0,1],[0,1,3,2,0,1],[0,2,2,1,1,1],[0,0,3,2,0,0],[0,0,1,0,1,1],[0,2,0,0,0,0],[0,1,0,1,0,1],[0,2,1,2,0,0],[0,1,3,2,0,0],[0,0,1,1,0,0],[0,0,3,2,1,0],[0,0,2,1,0,1],[0,1,2,2,0,1],[0,2,0,1,0,1],[0,0,3,0,0,1],[0,0,2,0,1,1],[0,1,0,1,0,0],[0,0,0,1,0,1],[0,1,2,2,1,1],[0,0,0,2,1,1],[0,0,3,2,0,0],[0,2,2,0,1,0],[0,1,0,1,0,0],[0,2,0,0,1,0],[0,1,3,0,1,0],[0,2,2,1,0,1],[0,2,2,0,1,0],[0,1,1,0,0,0],[0,0,2,0,0,0],[0,2,1,1,0,1],[0,0,3,2,0,0],[0,1,1,1,1,0],[0,0,1,0,1,0],[0,2,2,2,0,0],[0,0,3,1,0,0],[0,2,0,1,1,0],[0,0,1,2,1,1],[0,2,2,0,0,0],[0,1,1,2,1,1],[0,0,1,2,0,1],[0,1,1,0,1,1],[0,2,3,1,0,1],[0,0,0,2,0,1],[0,2,0,2,1,1],[0,2,2,2,1,1],[0,0,1,1,1,1],[0,0,1,0,0,1],[0,2,3,2,1,1],[0,0,1,1,0,1],[0,1,1,2,0,1],[0,2,0,1,1,1],[0,2,1,1,0,0],[0,0,3,0,0,1],[0,1,0,2,1,1],[0,1,2,1,1,0],[0,0,2,0,1,1],[0,0,1,2,0,0],[0,2,3,1,1,0],[0,0,2,1,1,0],[0,0,1,1,1,1],[0,1,2,1,0,0],[0,1,0,0,0,0],[0,0,1,1,1,0],[0,0,2,0,1,1],[0,0,3,2,1,0],[0,2,0,1,1,0],[0,0,2,2,1,0],[0,1,0,2,1,0],[0,1,2,0,0,1],[0,1,1,1,0,0],[0,0,3,2,1,1],[0,1,0,1,1,1],[0,1,1,0,0,1],[0,1,3,2,1,0],[0,1,0,2,0,1],[0,1,3,2,1,0],[0,2,2,0,0,0],[0,1,2,1,1,1],[0,0,2,2,1,1],[0,0,3,0,0,0],[0,1,0,2,0,0],[0,0,1,1,1,1],[0,2,1,0,0,0],[0,2,0,2,0,0],[0,0,0,2,1,0],[0,0,2,0,1,1],[0,2,1,1,0,0],[0,1,2,2,1,0],[0,2,1,0,1,1],[0,2,1,0,0,0],[0,0,0,1,0,1],[0,2,1,0,1,1],[0,2,1,2,0,0],[0,2,3,0,0,1],[0,0,2,0,0,0],[0,0,1,0,0,0],[0,0,2,0,0,0],[0,2,0,0,0,1],[0,0,1,1,1,0],[0,0,0,2,0,0],[0,1,0,2,1,0],[0,2,2,0,1,0],[0,1,1,0,0,1],[0,2,1,0,0,0],[0,2,0,2,1,1],[0,0,0,1,0,0],[0,1,3,2,0,0],[0,2,1,0,1,0],[0,2,2,1,1,0],[0,1,2,0,1,0],[0,0,3,0,0,1],[0,1,1,0,0,1],[0,0,1,2,0,1],[0,2,1,2,1,1],[0,2,3,0,0,1],[0,2,2,1,0,1],[0,0,1,0,1,1],[0,0,2,1,1,1],[0,2,0,2,0,1],[0,1,0,2,1,0],[0,1,0,1,1,0],[0,1,0,1,1,1],[0,1,2,2,0,1],[0,1,2,1,1,0],[0,2,2,0,1,0],[0,0,3,2,0,0],[0,1,0,0,1,1],[0,1,3,0,1,1],[0,0,2,1,0,1],[0,0,1,2,1,1],[0,2,3,1,0,0],[0,0,3,1,0,1],[0,2,1,0,1,1],[0,0,2,1,1,0],[0,1,3,2,0,1],[0,2,2,0,1,1],[0,2,2,0,0,1],[0,1,3,1,1,1],[0,0,3,1,0,1],[0,0,0,1,0,1],[0,2,0,1,1,1],[0,0,0,1,1,1],[0,0,2,0,0,0],[0,1,3,2,1,0],[0,1,2,2,1,1],[0,2,2,2,1,0],[0,0,3,2,1,0],[0,1,0,2,0,1],[0,1,0,0,1,0],[0,1,0,2,1,1],[0,1,3,1,0,1],[0,0,3,2,0,0],[0,2,3,0,1,0],[0,1,2,1,1,1],[0,0,3,1,0,0],[0,1,0,1,0,1],[0,1,1,0,0,1],[0,0,1,1,1,1],[0,1,1,2,1,1],[0,2,0,0,1,0],[0,0,0,2,0,1],[0,2,0,2,1,0],[0,0,2,2,1,1],[0,0,1,2,1,0],[0,1,2,0,1,1],[0,0,3,2,0,0],[0,2,2,2,1,0],[0,0,3,0,0,0],[0,2,0,0,0,1],[0,2,1,0,0,1],[0,1,3,2,0,0],[0,0,2,1,1,1],[0,1,2,1,0,0],[0,0,3,2,1,1],[0,2,1,1,1,0],[0,1,3,2,1,1],[0,1,3,1,1,1],[0,2,2,1,1,0],[0,0,1,0,1,0],[0,0,1,0,0,1],[0,0,0,0,1,0],[0,1,2,2,1,1],[0,0,2,0,0,1],[0,2,1,1,1,1],[0,0,3,0,0,1],[0,1,2,1,0,1],[0,0,1,2,1,1],[0,2,0,1,1,0],[0,0,1,1,0,0],[0,0,2,2,1,1],[0,1,1,0,1,0],[0,0,2,2,1,1],[0,1,3,2,0,0],[0,1,0,1,0,1],[0,2,3,0,0,0],[0,2,3,0,1,0],[0,2,3,0,0,1],[0,0,1,1,0,1],[0,0,2,0,1,1],[0,0,3,0,0,0],[0,1,2,1,0,1],[0,0,2,0,0,0],[0,1,3,2,0,0],[0,2,2,0,0,0],[0,2,0,2,0,0],[0,1,1,0,1,0],[0,0,2,2,1,1],[0,0,1,2,1,1],[0,2,1,2,0,1],[0,0,0,1,1,1],[0,0,1,0,1,0],[0,0,1,2,1,1],[0,2,0,1,0,0],[0,2,0,1,1,1],[0,0,3,2,1,0],[0,2,2,0,0,1],[0,2,1,1,0,0],[0,1,2,2,0,0],[0,0,1,1,1,0],[0,1,0,0,1,0],[0,2,1,2,1,0],[0,2,1,0,1,1],[0,0,0,2,0,0],[0,1,0,1,0,1],[0,1,1,2,0,0],[0,1,3,0,0,1],[0,1,1,0,1,0],[0,0,3,0,0,1],[0,2,2,2,1,1],[0,2,0,1,0,0],[0,0,2,2,1,1],[0,0,1,2,0,1],[0,2,3,2,1,0],[0,0,3,0,0,0],[0,1,3,1,0,0],[0,1,2,1,0,1],[0,2,0,0,0,0],[0,2,2,1,0,1],[0,0,0,2,1,1],[0,2,3,2,0,0],[0,0,1,1,0,0],[0,0,2,0,1,0],[0,2,2,0,1,1],[0,1,1,1,0,1],[0,1,2,0,1,0],[0,0,3,2,1,1],[0,2,3,0,1,0],[0,1,1,2,0,1],[0,0,3,0,0,1],[0,0,0,1,1,1],[0,1,0,0,1,1],[0,1,2,1,1,0],[0,1,2,2,0,1],[0,0,1,1,1,0],[0,2,2,2,0,0],[0,2,1,1,1,0],[0,2,2,1,1,0],[0,2,3,2,0,1],[0,2,0,0,0,0],[0,2,2,1,0,1],[0,0,3,0,0,0],[0,1,1,1,1,0],[0,0,0,0,0,0],[0,1,0,0,0,0],[0,1,0,0,0,0],[0,0,0,1,0,0],[0,0,0,0,0,0],[0,1,0,1,0,0],[0,0,0,0,0,0],[0,0,0,0,0,0],[0,1,0,1,0,0],[0,0,0,0,0,0],[0,1,0,1,0,0],[0,1,0,0,0,0],[0,0,0,0,0,0],[0,1,0,0,0,0],[0,1,0,1,0,0],[0,1,0,0,0,0],[0,0,0,0,0,0],[0,1,0,1,0,0],[0,1,0,0,0,0],[0,1,0,1,0,0],[0,0,0,1,0,0],[0,0,0,0,0,0],[0,1,0,0,0,0],[0,0,0,1,0,0],[0,1,0,1,0,0],[0,1,0,0,0,0],[0,1,0,1,0,0],[0,0,0,1,0,0],[0,1,0,1,0,0],[0,1,0,0,0,0],[0,1,0,0,0,0],[0,1,0,1,0,0],[0,0,0,1,0,0],[0,0,0,0,0,0],[0,0,0,1,0,0],[0,1,0,0,0,0],[0,1,0,1,0,0],[0,0,0,1,0,0],[0,1,0,0,0,0],[0,1,0,1,0,0],[0,1,0,0,0,0],[0,1,0,0,0,0],[0,0,0,1,0,0],[0,1,0,0,0,0],[0,0,0,0,0,0],[0,0,0,0,0,0],[0,1,0,0,0,0],[0,1,0,1,0,0],[0,0,0,0,0,0],[0,1,0,0,0,0],[0,0,0,0,0,0],[0,0,0,0,0,0],[0,0,0,0,0,0],[0,0,0,1,0,0],[0,0,0,1,0,0],[0,1,0,1,0,0],[0,0,0,1,0,0],[0,1,0,1,0,0],[0,0,0,0,0,0],[0,1,0,0,0,0],[0,0,0,1,0,0],[0,1,0,0,0,0],[0,0,0,0,0,0],[0,0,0,1,0,0],[0,0,0,1,0,0],[0,0,0,0,0,0],[0,0,0,0,0,0],[0,1,0,1,0,0],[0,1,0,0,0,0],[0,0,0,0,0,0],[0,0,0,0,0,0],[0,1,0,0,0,0],[0,1,0,1,0,0],[0,1,0,1,0,0],[0,0,0,0,0,0],[0,0,0,1,0,0],[0,1,0,0,0,0],[0,0,0,1,0,0],[0,0,0,0,0,0],[0,1,0,0,0,0],[0,0,0,0,0,0],[0,1,0,1,0,0],[0,0,0,1,0,0],[0,0,0,1,0,0],[0,0,0,1,0,0],[0,0,0,0,0,0],[0,1,0,1,0,0],[0,1,0,1,0,0],[0,0,0,0,0,0],[0,1,0,0,0,0],[0,1,0,0,0,0],[0,0,0,1,0,0],[0,1,0,0,0,0],[0,0,0,1,0,0],[0,0,0,1,0,0],[0,0,0,1,0,0],[0,0,0,0,0,0],[0,0,0,1,0,0],[0,0,0,0,0,0],[0,0,0,0,0,0],[0,1,0,0,0,0],[0,0,0,1,0,0],[0,0,0,1,0,0],[0,1,0,1,0,0],[0,1,0,1,0,0],[0,0,0,0,0,0],[0,0,0,0,0,0],[0,0,0,1,0,0],[0,0,0,1,0,0],[0,0,0,1,0,0],[0,1,0,1,0,0],[0,1,0,0,0,0],[0,0,0,0,0,0],[0,1,0,0,0,0],[0,0,0,1,0,0],[0,1,0,0,0,0],[0,0,0,0,0,0],[0,1,0,0,0,0],[0,1,0,0,0,0],[0,0,0,0,0,0],[0,1,0,0,0,0],[0,0,0,0,0,0],[0,0,0,0,0,0],[0,1,0,1,0,0],[0,0,0,1,0,0],[0,1,0,0,0,0],[0,0,0,1,0,0],[0,1,0,1,0,0],[0,1,0,1,0,0],[0,1,0,0,0,0],[0,0,0,1,0,0],[0,1,0,1,0,0],[0,0,0,0,0,0],[0,1,0,1,0,0],[0,0,0,0,0,0],[0,0,0,1,0,0],[0,1,0,0,0,0],[0,1,0,0,0,0],[0,0,0,1,0,0],[0,0,0,0,0,0],[0,0,0,0,0,0],[0,0,0,0,0,0],[0,0,0,0,0,0],[0,0,0,0,0,0],[0,1,0,1,0,0],[0,0,0,1,0,0],[0,1,0,1,0,0],[0,1,0,1,0,0],[0,0,0,0,0,0],[0,1,0,0,0,0],[0,0,0,0,0,0],[0,1,0,1,0,0],[0,0,0,0,0,0],[0,1,0,0,0,0],[0,1,0,0,0,0],[0,0,0,1,0,0],[0,0,0,0,0,0],[0,1,0,1,0,0],[0,1,0,1,0,0],[0,1,0,0,0,0],[0,1,0,0,0,0],[0,0,0,0,0,0],[0,1,0,0,0,0],[0,1,0,1,0,0],[0,0,0,1,0,0],[0,1,0,0,0,0],[0,0,0,1,0,0],[0,0,0,0,0,0],[0,1,0,1,0,0],[0,0,0,1,0,0],[0,0,0,1,0,0],[0,1,0,1,0,0],[0,1,0,0,0,0],[0,0,0,1,0,0],[0,1,0,0,0,0],[0,0,0,0,0,0],[0,0,0,0,0,0],[0,1,0,1,0,0],[0,1,0,0,0,0],[0,1,0,0,0,0],[0,0,0,0,0,0],[0,0,0,0,0,0],[0,1,0,0,0,0],[0,1,0,1,0,0],[0,1,0,1,0,0],[0,0,0,0,0,0],[0,1,0,1,0,0],[0,0,0,0,0,0],[0,0,0,0,0,0],[0,0,0,0,0,0],[0,1,0,1,0,0],[0,1,0,1,0,0],[0,0,0,0,0,0],[0,0,0,0,0,0],[0,1,0,1,0,0],[0,0,0,1,0,0],[0,1,0,0,0,0],[0,0,0,0,0,0],[0,0,0,1,0,0],[0,0,0,0,0,0],[1,4,3,1,1,2],[1,3,1,1,1,2],[1,2,0,1,1,2],[1,0,0,1,1,2],[1,1,0,1,1,2],[1,4,3,1,1,2],[1,1,0,1,1,2],[1,1,4,1,1,2],[1,4,3,1,1,2],[1,0,2,1,1,2],[1,4,0,1,1,2],[1,3,2,1,1,2],[1,0,1,1,1,2],[1,4,1,1,1,2],[1,1,2,1,1,2],[1,4,0,1,1,2],[1,2,0,1,1,2],[1,2,2,1,1,2],[1,4,0,1,1,2],[1,0,4,1,1,2],[1,0,4,1,1,2],[1,3,3,1,1,2],[1,1,4,1,1,2],[1,0,1,1,1,2],[1,2,3,1,1,2],[1,0,2,1,1,2],[1,0,4,1,1,2],[1,1,4,1,1,2],[1,3,0,1,1,2],[1,4,1,1,1,2],[1,0,0,1,1,2],[1,1,2,1,1,2],[1,4,1,1,1,2],[1,1,3,1,1,2],[1,1,1,1,1,2],[1,1,2,1,1,2],[1,2,4,1,1,2],[1,1,4,1,1,2],[1,4,1,1,1,2],[1,3,2,1,1,2],[1,4,0,1,1,2],[1,4,1,1,1,2],[1,0,4,1,1,2],[1,3,3,1,1,2],[1,2,2,1,1,2],[1,4,2,1,1,2],[1,4,0,1,1,2],[1,4,3,1,1,2],[1,0,2,1,1,2],[1,3,2,1,1,2],[1,2,1,1,1,2],[1,4,2,1,1,2],[1,2,0,1,1,2],[1,3,2,1,1,2],[1,0,4,1,1,2],[1,3,2,1,1,2],[1,4,3,1,1,2],[1,2,1,1,1,2],[1,3,0,1,1,2],[1,2,0,1,1,2],[1,0,0,1,1,2],[1,0,2,1,1,2],[1,3,1,1,1,2],[1,4,1,1,1,2],[1,2,1,1,1,2],[1,3,1,1,1,2],[1,1,1,1,1,2],[1,4,3,1,1,2],[1,2,3,1,1,2],[1,1,0,1,1,2],[1,1,0,1,1,2],[1,2,0,1,1,2],[1,1,0,1,1,2],[1,0,3,1,1,2],[1,0,4,1,1,2],[1,0,4,1,1,2],[1,4,4,1,1,2],[1,3,4,1,1,2],[1,3,2,1,1,2],[1,0,4,1,1,2],[1,2,1,1,1,2],[1,1,2,1,1,2],[1,1,2,1,1,2],[1,3,0,1,1,2],[1,4,1,1,1,2],[1,0,3,1,1,2],[1,4,2,1,1,2],[1,1,3,1,1,2],[1,4,4,1,1,2],[1,3,3,1,1,2],[1,2,4,1,1,2],[1,3,3,1,1,2],[1,0,0,1,1,2],[1,3,2,1,1,2],[1,1,1,1,1,2],[1,4,0,1,1,2],[1,2,4,1,1,2],[1,4,0,1,1,2],[1,1,0,1,1,2],[1,2,2,1,1,2],[1,1,1,1,1,2],[1,3,0,1,1,2],[1,0,0,1,1,2],[1,4,1,1,1,2],[1,4,0,1,1,2],[1,3,2,1,1,2],[1,3,4,1,1,2],[1,0,3,1,1,2],[1,2,4,1,1,2],[1,1,2,1,1,2],[1,2,0,1,1,2],[1,2,0,1,1,2],[1,4,3,1,1,2],[1,4,2,1,1,2],[1,3,3,1,1,2],[1,2,2,1,1,2],[1,3,3,1,1,2],[1,0,2,1,1,2],[1,4,3,1,1,2],[1,3,2,1,1,2],[1,1,2,1,1,2],[1,0,2,1,1,2],[1,4,1,1,1,2],[1,2,0,1,1,2],[1,4,3,1,1,2],[1,3,3,1,1,2],[1,2,4,1,1,2],[1,0,4,1,1,2],[1,2,4,1,1,2],[1,0,4,1,1,2],[1,2,0,1,1,2],[1,1,1,1,1,2],[1,4,4,1,1,2],[1,1,4,1,1,2],[1,4,2,1,1,2],[1,4,3,1,1,2],[1,4,2,1,1,2],[1,2,1,1,1,2],[1,4,3,1,1,2],[1,3,0,1,1,2],[1,3,1,1,1,2],[1,4,0,1,1,2],[1,1,1,1,1,2],[1,1,2,1,1,2],[1,2,0,1,1,2],[1,0,1,1,1,2],[1,3,2,1,1,2],[1,4,4,1,1,2],[1,2,3,1,1,2],[1,4,2,1,1,2],[1,3,0,1,1,2],[1,3,1,1,1,2],[1,0,4,1,1,2],[1,3,1,1,1,2],[1,2,4,1,1,2],[1,3,2,1,1,2],[1,4,1,1,1,2],[1,0,0,1,1,2],[1,0,3,1,1,2],[1,3,1,1,1,2],[1,2,3,1,1,2],[1,2,3,1,1,2],[1,1,2,1,1,2],[1,3,0,1,1,2],[1,4,0,1,1,2],[1,1,3,1,1,2],[1,1,3,1,1,2],[1,4,2,1,1,2],[1,3,2,1,1,2],[1,2,2,1,1,2],[1,1,3,1,1,2],[1,1,2,1,1,2],[1,2,2,1,1,2],[1,1,1,1,1,2],[1,0,0,1,1,2],[1,4,4,1,1,2],[1,4,2,1,1,2],[1,2,2,1,1,2],[1,3,3,1,1,2],[1,0,4,1,1,2],[1,2,1,1,1,2],[1,0,0,1,1,2],[1,2,4,1,1,2],[1,3,4,1,1,2],[1,1,0,1,1,2],[1,1,0,1,1,2],[1,3,2,1,1,2],[1,3,1,1,1,2],[1,3,4,1,1,2],[1,0,1,1,1,2],[1,2,4,1,1,2],[1,2,4,1,1,2],[1,2,4,1,1,2],[1,3,0,1,1,2],[1,2,4,1,1,2],[1,1,1,1,1,2],[1,0,0,1,1,2],[1,3,2,1,1,2],[1,0,1,1,1,2],[1,4,1,1,1,2],[1,1,0,1,1,2],[1,1,3,1,1,2],[1,0,2,1,1,2],[1,1,2,1,1,2],[1,3,4,1,1,2],[1,0,3,1,1,2],[1,2,3,1,1,2],[1,1,0,1,1,2],[1,2,4,1,1,2],[1,2,1,1,1,2],[1,1,0,1,1,2],[1,1,4,1,1,2],[1,3,4,1,1,2],[1,4,1,1,1,2],[1,4,1,1,1,2],[1,2,0,1,1,2],[1,1,3,1,1,2],[1,0,0,1,1,2],[1,3,3,1,1,2],[1,1,1,1,1,2],[1,0,0,1,1,2],[1,1,4,1,1,2],[1,3,3,1,1,2],[1,2,3,1,1,2],[1,3,2,1,1,2],[1,4,0,1,1,2],[1,1,0,1,1,2],[1,3,2,1,1,2],[1,1,0,1,1,2],[1,0,2,1,1,2],[1,4,1,1,1,2],[1,0,1,1,1,2],[1,4,1,1,1,2],[1,4,1,1,1,2],[1,1,4,1,1,2],[1,0,3,1,1,2],[1,3,4,1,1,2],[1,0,2,1,1,2],[1,2,3,1,1,2],[1,0,2,1,1,2],[1,1,0,1,1,2],[1,0,3,1,1,2],[1,0,1,1,1,2],[1,1,0,1,1,2],[1,0,0,1,1,2],[1,0,2,1,1,2],[1,2,2,1,1,2],[1,2,2,1,1,2],[1,2,0,1,1,2],[1,3,2,1,1,2],[1,2,4,1,1,2],[1,1,1,1,1,2],[1,4,1,1,1,2],[1,1,2,1,1,2],[1,2,4,1,1,2],[1,0,3,1,1,2],[1,4,4,1,1,2],[1,0,0,1,1,2],[1,4,2,1,1,2],[1,2,2,1,1,2],[1,2,0,1,1,2],[1,4,4,1,1,2],[1,0,4,1,1,2],[1,0,4,1,1,2],[1,2,3,1,1,2],[1,2,4,1,1,2],[1,0,3,1,1,2],[1,0,3,1,1,2],[1,2,4,1,1,2],[1,0,4,1,1,2],[1,2,3,1,1,2],[1,1,1,1,1,2],[1,2,3,1,1,2],[1,2,1,1,1,2],[1,4,2,1,1,2],[1,1,1,1,1,2],[1,4,0,1,1,2],[1,3,1,1,1,2],[1,0,3,1,1,2],[1,1,1,1,1,2],[1,2,2,1,1,2],[1,0,4,1,1,2],[1,0,3,1,1,2],[1,4,4,1,1,2],[1,2,1,1,1,2],[1,4,1,1,1,2],[1,4,1,1,1,2],[1,3,3,1,1,2],[1,0,1,1,1,2],[1,1,3,1,1,2],[1,4,4,1,1,2],[1,4,3,1,1,2],[1,0,1,1,1,2],[1,0,3,1,1,2],[1,2,1,1,1,2],[1,2,2,1,1,2],[1,4,1,1,1,2],[1,2,4,1,1,2],[1,1,2,1,1,2],[1,2,3,1,1,2]] 65 | } 66 | } -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react' 2 | import styled from 'styled-components' 3 | import Header from './components/Header' 4 | import InfoTable from './components/InfoTable' 5 | import SurveyChart from './components/SurveyChart' 6 | import Footer from './components/Footer' 7 | import ImageModal from './components/ImageModal' 8 | 9 | function App() { 10 | const [showModal, setShowModal] = useState(false) 11 | 12 | return ( 13 |
14 |
15 | 16 | { setShowModal(true) }}>올림픽 사진 보기 17 | 18 |
21 | ) 22 | } 23 | 24 | const ButtonModal = styled.button` 25 | border-radius: 30px; 26 | border: 1px solid #999; 27 | padding: 12px 30px; 28 | background: none; 29 | font-size: 1.1em; 30 | color: #555; 31 | outline: none; 32 | cursor: pointer; 33 | ` 34 | 35 | export default App 36 | -------------------------------------------------------------------------------- /src/assets/btn-close.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/performance-lecture/lecture-2/6b33d32b80f5029686d5f379ac2f36af6189848e/src/assets/btn-close.png -------------------------------------------------------------------------------- /src/assets/london-2012.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/performance-lecture/lecture-2/6b33d32b80f5029686d5f379ac2f36af6189848e/src/assets/london-2012.jpg -------------------------------------------------------------------------------- /src/assets/london-flag.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/performance-lecture/lecture-2/6b33d32b80f5029686d5f379ac2f36af6189848e/src/assets/london-flag.png -------------------------------------------------------------------------------- /src/assets/rio-2016.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/performance-lecture/lecture-2/6b33d32b80f5029686d5f379ac2f36af6189848e/src/assets/rio-2016.jpg -------------------------------------------------------------------------------- /src/assets/rio-flag.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/performance-lecture/lecture-2/6b33d32b80f5029686d5f379ac2f36af6189848e/src/assets/rio-flag.jpeg -------------------------------------------------------------------------------- /src/components/Bar.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import styled from 'styled-components' 3 | 4 | const Bar = (props) => { 5 | return ( 6 | 7 | 8 | {props.percent}% 9 | {props.itemValue} 10 | {props.count} 11 | 12 | 13 | 14 | ) 15 | } 16 | 17 | const BarWrapper = styled.div` 18 | position: relative; 19 | margin-bottom: 3px; 20 | padding: 8px 0; 21 | background: ${({isSelected}) => isSelected ? '#dddddd' : '#f3f3f3'}; 22 | ` 23 | const BarInfo = styled.div` 24 | width: 100%; 25 | display: flex; 26 | z-index: 2; 27 | position: relative; 28 | ` 29 | const Percent = styled.span` 30 | text-align: right; 31 | min-width: 70px; 32 | flex: 0 0 auto; 33 | ` 34 | const ItemVaue = styled.span` 35 | padding-left: 60px; 36 | flex: 1 1 0%; 37 | ` 38 | const Count = styled.span` 39 | padding-right: 20px; 40 | flex: 0 0 auto; 41 | ` 42 | const BarGraph = styled.div` 43 | position: absolute; 44 | left: 0; 45 | top: 0; 46 | width: ${({width}) => width}%; 47 | transition: width 1.5s ease; 48 | height: 100%; 49 | background: ${({isSelected}) => isSelected ? 'rgba(126, 198, 81, 0.7)' : 'rgb(198, 198, 198)'}; 50 | z-index: 1; 51 | ` 52 | 53 | export default Bar 54 | -------------------------------------------------------------------------------- /src/components/Footer.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import styled from 'styled-components' 3 | 4 | function Footer() { 5 | return ( 6 | 7 | ©Performance Optimization Lecture for React 8 | 9 | ) 10 | } 11 | 12 | const FooterWrapper = styled.div` 13 | text-align: center; 14 | padding: 32px 0; 15 | ` 16 | 17 | export default Footer 18 | -------------------------------------------------------------------------------- /src/components/Header.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import styled from 'styled-components' 3 | import rioBg from '../assets/rio-2016.jpg' 4 | import londonBg from '../assets/london-2012.jpg' 5 | import rioFlag from '../assets/rio-flag.jpeg' 6 | import londonFlag from '../assets/london-flag.png' 7 | 8 | const Header = () => { 9 | return ( 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | VS 26 | 27 | ) 28 | } 29 | 30 | const HeaderWrap = styled.div` 31 | display: flex; 32 | justify-content: center; 33 | align-items: center; 34 | position: relative; 35 | width: 100%; 36 | height: 300px; 37 | font-size: 18px; 38 | font-weight: 300; 39 | overflow: hidden; 40 | z-index: 100; 41 | ` 42 | 43 | const Layer = styled.div` 44 | position: absolute; 45 | width: 100%; 46 | min-height: 300px; 47 | overflow: hidden; 48 | z-index: 100; 49 | ` 50 | 51 | const ContentWrap = styled.div` 52 | position: absolute; 53 | width: 100%; 54 | min-height: 300px; 55 | z-index: 100; 56 | ` 57 | 58 | const ContentBody = styled.div` 59 | position: absolute; 60 | top: 50%; 61 | text-align: center; 62 | transform: translate(-50%, -50%); 63 | ` 64 | 65 | const LayerBottom = styled(Layer)` 66 | background: url(${rioBg}) no-repeat; 67 | background-size: cover; 68 | z-index: 101; 69 | ` 70 | 71 | const BottomContent = styled(ContentBody)` 72 | left: 75%; 73 | ` 74 | 75 | const LayerTop = styled(Layer)` 76 | background: url(${londonBg}) no-repeat; 77 | background-size: cover; 78 | background-position: 30% 15%; 79 | color: #222; 80 | z-index: 102; 81 | width: 50vw; 82 | transform: skew(-20deg); 83 | margin-left: -50%; 84 | ` 85 | 86 | const TopContentWrap = styled(ContentWrap)` 87 | transform: skew(20deg); 88 | margin-left: 50%; 89 | width: 100%; 90 | ` 91 | 92 | const TopContent = styled(ContentBody)` 93 | color: #222; 94 | ` 95 | 96 | const Versus = styled.div` 97 | position: absolute; 98 | top: 50%; 99 | left: 50%; 100 | transform: translate(-50%, -50%); 101 | color: #fff; 102 | font-size: 100px; 103 | font-weight: 700; 104 | z-index: 103; 105 | ` 106 | 107 | const FlagImg = styled.img` 108 | width: 140px; 109 | ` 110 | 111 | export default Header 112 | -------------------------------------------------------------------------------- /src/components/ImageModal.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import styled from 'styled-components' 3 | import ImageGallery from 'react-image-gallery' 4 | import 'react-image-gallery/styles/css/image-gallery.css' 5 | import btnClose from '../assets/btn-close.png' 6 | 7 | const ImageModal = (props) => { 8 | const images = [ 9 | { 10 | original: 'https://stillmed.olympic.org/media/Photos/2016/08/20/part-1/20-08-2016-Football-Men-01.jpg?interpolation=lanczos-none&resize=*:800', 11 | thumbnail: 'https://stillmed.olympic.org/media/Photos/2016/08/20/part-1/20-08-2016-Football-Men-01.jpg?interpolation=lanczos-none&resize=*:150', 12 | }, 13 | { 14 | original: 'https://stillmed.olympic.org/media/Photos/2016/08/12/12-08-2016-archery-individual-men-03.jpg?interpolation=lanczos-none&resize=*:800', 15 | thumbnail: 'https://stillmed.olympic.org/media/Photos/2016/08/12/12-08-2016-archery-individual-men-03.jpg?interpolation=lanczos-none&resize=*:150', 16 | }, 17 | { 18 | original: 'https://stillmed.olympic.org/media/Photos/2016/08/20/part-1/20-08-2016-Football-Men-02.jpg?interpolation=lanczos-none&resize=*:800', 19 | thumbnail: 'https://stillmed.olympic.org/media/Photos/2016/08/20/part-1/20-08-2016-Football-Men-02.jpg?interpolation=lanczos-none&resize=*:150', 20 | }, 21 | { 22 | original: 'https://stillmed.olympic.org/media/Photos/2016/08/20/part-2/20-08-2016-Golf-Women-02.jpg?interpolation=lanczos-none&resize=*:800', 23 | thumbnail: 'https://stillmed.olympic.org/media/Photos/2016/08/20/part-2/20-08-2016-Golf-Women-02.jpg?interpolation=lanczos-none&resize=*:150', 24 | }, 25 | { 26 | original: 'https://stillmed.olympic.org/media/Photos/2016/08/14/part-1/14-08-2016-Golf-Individual-Stroke-Play-Men-05.jpg?interpolation=lanczos-none&resize=*:800', 27 | thumbnail: 'https://stillmed.olympic.org/media/Photos/2016/08/14/part-1/14-08-2016-Golf-Individual-Stroke-Play-Men-05.jpg?interpolation=lanczos-none&resize=*:150', 28 | }, 29 | { 30 | original: 'https://stillmed.olympic.org/media/Photos/2016/08/12/12-08-2016-archery-individual-men-02.jpg?interpolation=lanczos-none&resize=*:800', 31 | thumbnail: 'https://stillmed.olympic.org/media/Photos/2016/08/12/12-08-2016-archery-individual-men-02.jpg?interpolation=lanczos-none&resize=*:150', 32 | }, 33 | { 34 | original: 'https://stillmed.olympic.org/media/Photos/2016/08/12/12-08-2016-archery-individual-men-01.jpg?interpolation=lanczos-none&resize=*:800', 35 | thumbnail: 'https://stillmed.olympic.org/media/Photos/2016/08/12/12-08-2016-archery-individual-men-01.jpg?interpolation=lanczos-none&resize=*:150', 36 | }, 37 | { 38 | original: 'https://stillmed.olympic.org/media/Photos/2016/08/20/part-1/20-08-2016-Football-Men-03.jpg?interpolation=lanczos-none&resize=*:800', 39 | thumbnail: 'https://stillmed.olympic.org/media/Photos/2016/08/20/part-1/20-08-2016-Football-Men-03.jpg?interpolation=lanczos-none&resize=*:150', 40 | }, 41 | ] 42 | 43 | return ( 44 | 45 | 46 | 47 | 올림픽 사진 48 | 49 | 50 | 51 | 52 | 53 | ) 54 | } 55 | 56 | const ImageModalWrapper = styled.div` 57 | display: flex; 58 | justify-content: center; 59 | align-items: center; 60 | position: fixed; 61 | left: 0; 62 | top: 0; 63 | width: 100%; 64 | height: 100vh; 65 | background: rgba(0,0,0,0.5); 66 | z-index: 200; 67 | ` 68 | const ImageModalContainer = styled.div` 69 | width: 100%; 70 | max-width: 700px; 71 | margin: auto; 72 | overflow: auto; 73 | background: #fff; 74 | border-radius: 8px; 75 | box-sizing: border-box; 76 | position: relative; 77 | ` 78 | const BtnClose = styled.img` 79 | cursor: pointer; 80 | position: absolute; 81 | z-index: 250; 82 | width: 25px; 83 | top: 18px; 84 | right: 15px; 85 | ` 86 | const ModalHeader = styled.div` 87 | width: 100%; 88 | padding: 20px 10px; 89 | border-bottom: 1px solid #dddddd; 90 | color: #333; 91 | font-size: 1.05em; 92 | font-weight: 500; 93 | box-sizing: border-box; 94 | ` 95 | const Modalbody = styled.div` 96 | width: 100%; 97 | padding: 10px; 98 | box-sizing: border-box; 99 | ` 100 | 101 | export default ImageModal -------------------------------------------------------------------------------- /src/components/InfoTable.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import styled from 'styled-components' 3 | 4 | const InfoTable = () => { 5 | return ( 6 | 7 | 8 | 9 | 10 | 리우 올림픽 11 | 런던 올림픽 12 | 13 | 14 | 15 | 8월 5일 ~ 8월 21일 16 | 7월 27일 ~ 8월 12일 17 | 18 | 19 | 20 | 브라질, 리우 21 | 영국, 런던 22 | 23 | 24 | 25 | 11,238 26 | 10,568 27 | 28 | 29 | 30 | 207 31 | 204 32 | 33 | 34 | 35 | 306 36 | 302 37 | 38 |
기간
개최지
참가 선수
참가국
종목 수
39 | 40 | ) 41 | } 42 | 43 | const InfoTableWrapper = styled.div` 44 | padding 90px 50px 50px 50px; 45 | text-align: center; 46 | max-width: 800px; 47 | margin: auto; 48 | box-sizing: border-box; 49 | ` 50 | const Table = styled.table` 51 | width: 100%; 52 | font-size: 1.05em; 53 | font-weight: 400; 54 | ` 55 | const TR = styled.tr` 56 | ` 57 | const TH = styled.th` 58 | padding: 15px 5px; 59 | font-weight: 600; 60 | background: #e7e7e7; 61 | color: #555; 62 | ` 63 | const RioTH = styled(TH)` 64 | background: #92278f; 65 | color: #fff; 66 | ` 67 | const LondonTH = styled(TH)` 68 | background: #63b330; 69 | color: #fff; 70 | ` 71 | const TD = styled.td` 72 | padding: 15px 5px; 73 | background: #e7e7e7; 74 | ` 75 | const RioTD = styled(TD)` 76 | 77 | ` 78 | const LondonTD = styled(TD)` 79 | 80 | ` 81 | 82 | export default InfoTable 83 | -------------------------------------------------------------------------------- /src/components/SurveyChart.js: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useState } from 'react' 2 | import styled from 'styled-components' 3 | import SurveyItem from './SurveyItem' 4 | 5 | 6 | const SurveyChart = () => { 7 | const [answer, setAnswer] = useState([]) 8 | const [survey, setSurvey] = useState([]) 9 | const [filter, setFilter] = useState({}) 10 | 11 | useEffect(() => { 12 | Promise.all([ 13 | fetch('http://localhost:3001/answer').then((res) => res.json()), 14 | fetch('http://localhost:3001/survey').then((res) => res.json()) 15 | ]) 16 | .then(([answer, survey]) => { 17 | setAnswer(answer.data) 18 | setSurvey(survey) 19 | }) 20 | }, []) 21 | 22 | 23 | const toggleFilter = (questionIndex, itemIndex) => { 24 | let _filter = Object.assign({}, filter); 25 | if(_filter.hasOwnProperty(questionIndex) && _filter[questionIndex] === itemIndex) { 26 | delete _filter[questionIndex] 27 | } else { 28 | _filter[questionIndex] = itemIndex 29 | } 30 | setFilter(_filter) 31 | } 32 | 33 | // 선택한 항목에 대한 답변만 필터링 34 | let filteredAnswer = answer.filter((item) => { 35 | var keys = Object.keys(filter) 36 | for(let i = 0; i < keys.length; i++) { 37 | if(filter[keys[i]] !== item[keys[i]]) 38 | return false 39 | } 40 | return true 41 | }) 42 | 43 | // 답변 정보를 항목별 통계 정보로 재가공 44 | let chartData = {} 45 | for(let i = 0; i < filteredAnswer.length; i++) { 46 | for(let j = 0; j < filteredAnswer[i].length; j++) { 47 | if(!chartData.hasOwnProperty(j)) { 48 | chartData[j] = {} 49 | } 50 | if(!chartData[j].hasOwnProperty(filteredAnswer[i][j])) { 51 | chartData[j][filteredAnswer[i][j]] = 0 52 | } 53 | chartData[j][filteredAnswer[i][j]]++ 54 | } 55 | } 56 | 57 | return ( 58 | 59 | 설문 결과 60 | {survey.map((item, index) => ( 61 | 68 | ))} 69 | 70 | ) 71 | } 72 | 73 | const SurveyChartWrapper = styled.div` 74 | padding: 150px 20px 60px 20px; 75 | max-width: 800px; 76 | margin: auto; 77 | box-sizing: border-box; 78 | ` 79 | 80 | const SurveyChartTitle = styled.div` 81 | text-align: center; 82 | font-size: 2em; 83 | font-weight: 700; 84 | color: rgba(0, 0, 0, 0.5); 85 | padding-bottom: 20px; 86 | ` 87 | 88 | export default SurveyChart 89 | -------------------------------------------------------------------------------- /src/components/SurveyItem.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import styled from 'styled-components' 3 | import Bar from './Bar' 4 | 5 | const SurveyItem = (props) => { 6 | let total = Object.values(props.data).reduce((a, b) => a + b, 0) 7 | return ( 8 |
9 | Q{props.survey.no + 1}. {props.survey.question} 10 |
11 | {props.survey.items.map((item, index) => { 12 | let percent = props.data.hasOwnProperty(index) ? (props.data[index] / total * 100).toFixed(1) : 0 13 | return ( 14 | {props.toggleFilter(props.survey.no - 1, index)}} 20 | isSelected={props.selectedItem === index} 21 | /> 22 | ) 23 | })} 24 |
25 |
26 | ) 27 | } 28 | 29 | const Question = styled.div` 30 | font-weight: 500; 31 | font-size: 1.03em; 32 | padding: 25px 0 8px 0; 33 | text-align: left; 34 | ` 35 | 36 | export default SurveyItem 37 | -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | 9 | min-width: 900px; 10 | text-align: center; 11 | } 12 | 13 | code { 14 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 15 | monospace; 16 | } 17 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom' 3 | import './index.css' 4 | import App from './App' 5 | 6 | ReactDOM.render(, document.getElementById('root')) 7 | --------------------------------------------------------------------------------