이준성 / khuwitch

Go to a project
Toggle navigation Toggle navigation pinning
ijunseong
767f6a7f 1 parent 98bc5e27

Add: ./src/ directory for react-app

Inline Side-by-side
Showing 10 changed files with 303 additions and 0 deletions
1 +.App {
2 + text-align: center;
3 +}
4 +
5 +.App-logo {
6 + height: 40vmin;
7 + pointer-events: none;
8 +}
9 +
10 +@media (prefers-reduced-motion: no-preference) {
11 + .App-logo {
12 + animation: App-logo-spin infinite 20s linear;
13 + }
14 +}
15 +
16 +.App-header {
17 + background-color: #282c34;
18 + min-height: 100vh;
19 + display: flex;
20 + flex-direction: column;
21 + align-items: center;
22 + justify-content: center;
23 + font-size: calc(10px + 2vmin);
24 + color: white;
25 +}
26 +
27 +.App-link {
28 + color: #61dafb;
29 +}
30 +
31 +@keyframes App-logo-spin {
32 + from {
33 + transform: rotate(0deg);
34 + }
35 + to {
36 + transform: rotate(360deg);
37 + }
38 +}
1 +import './App.css';
2 +import Login from "./Login";
3 +import Body from "./Body";
4 +
5 +function App() {
6 + let accessToken = null;
7 +
8 + return (
9 + <div className="app">
10 + {!accessToken && <Login />}
11 + {accessToken && <Body />}
12 + </div>
13 + );
14 +}
15 +
16 +export default App;
1 +.body {
2 + display: flex;
3 +}
...\ No newline at end of file ...\ No newline at end of file
1 +import React from "react";
2 +import "./Body.css";
3 +import {ChanelList} from "./Chanel.js"
4 +
5 +function Body(){
6 + return (
7 + <div className="body">
8 + <ChanelList />
9 + </div>
10 + );
11 +}
12 +
13 +export default Body;
...\ No newline at end of file ...\ No newline at end of file
1 +.chanel {
2 + display: flex;
3 + align-items: center;
4 + flex-direction: row;
5 + padding-left: 10px;
6 + height: 100px;
7 + background-color: #0e0e10;
8 + padding-left: 10px;
9 +}
10 +
11 +.chanel__url {
12 + display: flex;
13 + align-items: center;
14 + flex-grow: 1;
15 + text-decoration: none;
16 + font-size: 14px;
17 + color:white;
18 + box-sizing: border-box;
19 + padding-top: 20px;
20 + padding-bottom: 20px;
21 +}
22 +
23 +.chanel__box {
24 + display: flex;
25 + flex-direction: row;
26 + justify-content: space-between;
27 +}
28 +
29 +.chanel__box > input {
30 + margin-right: 10px;
31 +}
32 +
33 +.chanel__info {
34 + width: 5vw;
35 + margin-right: 20px;
36 +}
37 +
38 +.chanel__name {
39 + align-content: center;
40 + font-size: 16px;
41 +}
42 +
43 +.chanel__game {
44 + font-size: 12px;
45 + color: gray;
46 +}
47 +
48 +.chanel__view {
49 + margin-left: 15px;
50 + margin-right: 5px;
51 + width: 4vw;
52 + text-align: right;
53 +}
54 +
55 +.chanel__thumbnail {
56 + height: 25px;
57 + width: 25px;
58 + border-radius: 70%;
59 + overflow: hidden;
60 + margin-right: 30px;
61 + background-color: white;
62 +}
63 +
64 +.chanel__icon {
65 + height: 25px;
66 + width: 25px;
67 + border-radius: 70%;
68 + overflow: hidden;
69 + margin-right: 30px;
70 +}
71 +
72 +
73 +.chanel__list {
74 + display: flex;
75 + flex-grow: 1;
76 + flex-direction: column;
77 + flex: 0.2;
78 + padding-right: 10px;
79 + min-width: 300px;
80 + height: 100vh;
81 + color: white;
82 + background-color: #0e0e10;
83 +}
84 +
85 +.chanel__list > ul {
86 + list-style: none;
87 + overflow: auto;
88 + padding-top: 50px;
89 +}
90 +
91 +.chanel__list > ul > li > hr {
92 + border: 2px solid #282828;
93 +}
94 +
95 +.chanel__list > strong {
96 + padding: 25px;
97 + width: 17%;
98 + background-color: #0e0e0e;
99 + font-size: 20px;
100 + position: fixed;
101 +}
...\ No newline at end of file ...\ No newline at end of file
1 +import React from "react";
2 +import "./Chanel.css";
3 +import "@material-ui/icons"
4 +import PersonIcon from "@material-ui/icons/Person";
5 +import PlayArrowIcon from '@material-ui/icons/PlayArrow';
6 +import StopIcon from '@material-ui/icons/Stop';
7 +import PauseIcon from '@material-ui/icons/Pause';
8 +
9 +export function Chanel(props) {
10 + const chanel = props.chanel;
11 +
12 + return (
13 + <div className="chanel">
14 + <a href={chanel.url} className="chanel__url">
15 + {chanel.thumbnail && <img className="chanel__thumbnail" src={chanel.thumbnail} alt=""></img>}
16 + {!chanel.thumbnail && <PersonIcon className="chanel__icon"/>}
17 + <div className="chanel__box">
18 + <div className="chanel__info">
19 + <div className="chanel__name">{chanel.name}</div>
20 + <div className="chanel__game">{chanel.game}</div>
21 + </div>
22 + <div className="chanel__view">{chanel.view}</div>
23 + <input type="radio" name="chanel"></input>
24 + </div>
25 +
26 + </a>
27 + </div>
28 + );
29 +}
30 +
31 +export class ChanelList extends React.Component {
32 +
33 +
34 + render() {
35 + // data for test
36 + const test = [
37 + {"name": "name1", "view": 999, "game": "game1" ,"url": "https://www.twitch.tv", "thumbnail": "https://upload.wikimedia.org/wikipedia/commons/2/26/Twitch_logo.svg"},
38 + {"name": "name2", "view": 123124124, "game": "game2" , "url": "https://www.twitch.tv"},
39 + {"name": "name1", "view": 999, "game": "game1" ,"url": "https://www.twitch.tv", "thumbnail": "https://upload.wikimedia.org/wikipedia/commons/2/26/Twitch_logo.svg"},
40 + {"name": "name2", "view": 123124124, "game": "game2" , "url": "https://www.twitch.tv"},
41 + {"name": "name1", "view": 999, "game": "game1" ,"url": "https://www.twitch.tv", "thumbnail": "https://upload.wikimedia.org/wikipedia/commons/2/26/Twitch_logo.svg"},
42 + {"name": "name2", "view": 123124124, "game": "game2" , "url": "https://www.twitch.tv"},
43 + {"name": "name1", "view": 999, "game": "game1" ,"url": "https://www.twitch.tv", "thumbnail": "https://upload.wikimedia.org/wikipedia/commons/2/26/Twitch_logo.svg"},
44 + {"name": "name2", "view": 123124124, "game": "game2" , "url": "https://www.twitch.tv"},
45 + {"name": "name1", "view": 999, "game": "game1" ,"url": "https://www.twitch.tv", "thumbnail": "https://upload.wikimedia.org/wikipedia/commons/2/26/Twitch_logo.svg"},
46 + {"name": "name2", "view": 123124124, "game": "game2" , "url": "https://www.twitch.tv"},
47 + ]
48 +
49 + const chanels = test;
50 +
51 + return (
52 + <div className="chanel__list">
53 + <strong>CHANELS</strong>
54 + <ul>
55 + {chanels.map((chanel) => (
56 + <li>
57 + <Chanel chanel={chanel}/>
58 + <hr />
59 + </li>
60 + ))}
61 + </ul>
62 + </div>
63 + );
64 + }
65 +}
...\ No newline at end of file ...\ No newline at end of file
1 +.login {
2 + display: grid;
3 + background-color: #0e0e10;
4 + height: 100vh;
5 + place-items: center;
6 +}
7 +
8 +.login > img {
9 + height: 300px;
10 +}
11 +
12 +.login > a {
13 + color: white;
14 + padding: 30px;
15 + border-radius: 100px;
16 + text-decoration: none;
17 + font-size: 30px;
18 + font-weight: bold;
19 + background-color: #9147ff;
20 +}
...\ No newline at end of file ...\ No newline at end of file
1 +import React from "react";
2 +import "./Login.css";
3 +
4 +function Login(){
5 + const OAuthUrl = ""; // oauth 인증용 url
6 + return (
7 + <div className="login">
8 + <img
9 + src="https://upload.wikimedia.org/wikipedia/commons/2/26/Twitch_logo.svg"
10 + alt=""
11 + />
12 + <a href={OAuthUrl}>Login to Twitch</a>
13 + </div>
14 + );
15 +}
16 +
17 +export default Login;
...\ No newline at end of file ...\ No newline at end of file
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 +
10 +code {
11 + font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
12 + monospace;
13 +}
1 +import React from 'react';
2 +import ReactDOM from 'react-dom';
3 +import './index.css';
4 +import App from './App';
5 +import reportWebVitals from './reportWebVitals';
6 +
7 +ReactDOM.render(
8 + <React.StrictMode>
9 + <App />
10 + </React.StrictMode>,
11 + document.getElementById('root')
12 +);
13 +
14 +// If you want to start measuring performance in your app, pass a function
15 +// to log results (for example: reportWebVitals(console.log))
16 +// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
17 +reportWebVitals();