├── .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 |
19 | {showModal ? { setShowModal(false) }} /> : null}
20 |
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 |
--------------------------------------------------------------------------------