이준성 / khuwitch

Go to a project
Toggle navigation Toggle navigation pinning
박진수
1be42d65 2 parents 417c9421 922e5cf4

Merge branch 'react' into 'master' 

React

Add some files and dir for react-app

See merge request !1
Inline Side-by-side
Showing 22 changed files with 515 additions and 2 deletions
.idea
node_modules
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
# dependencies
/frontend/node_modules
/.pnp
.pnp.js
# testing
/coverage
# production
/build
# misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local
npm-debug.log*
yarn-debug.log*
yarn-error.log*
......
This diff could not be displayed because it is too large.
{
"name": "khuwitch",
"version": "0.1.0",
"private": true,
"dependencies": {
"@material-ui/core": "^4.11.1",
"@material-ui/icons": "^4.9.1",
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-scripts": "4.0.1",
"web-vitals": "^0.2.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
No preview for this file type
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>Khuwitch</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>
{
"short_name": "React App",
"name": "Create React App Sample",
"icons": [
{
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
},
{
"src": "logo192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "logo512.png",
"type": "image/png",
"sizes": "512x512"
}
],
"start_url": ".",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}
# https://www.robotstxt.org/robotstxt.html
User-agent: *
Disallow:
.App {
text-align: center;
}
.App-logo {
height: 40vmin;
pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
.App-logo {
animation: App-logo-spin infinite 20s linear;
}
}
.App-header {
background-color: #282c34;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
}
.App-link {
color: #61dafb;
}
@keyframes App-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
import './App.css';
import Login from "./Login";
import Body from "./Body";
function App() {
let accessToken = null;
return (
<div className="app">
{!accessToken && <Login />}
{accessToken && <Body />}
</div>
);
}
export default App;
import { render, screen } from '@testing-library/react';
import App from './App';
test('renders learn react link', () => {
render(<App />);
const linkElement = screen.getByText(/learn react/i);
expect(linkElement).toBeInTheDocument();
});
.body {
display: flex;
justify-content: center;
background-color: #14141e;
}
\ No newline at end of file
import React from "react";
import "./Body.css";
import {ChannelList} from "./Channel.js"
function Body(){
return (
<div className="body">
<ChannelList />
</div>
);
}
export default Body;
\ No newline at end of file
.channel__list {
display: flex;
flex-grow: 1;
flex-direction: column;
flex: 0.3;
min-width: 500px;
height: 100vh;
color: white;
background-color: #0e0e0e;
box-sizing: border-box;
}
.channel__list__title {
display: flex;
padding: 25px;
width: 30vw;
min-width: 500px;
background-color: #0e0e0e;
font-size: 20px;
font-weight: bold;
position: fixed;
box-sizing: border-box;
}
.channel__list > ul {
list-style: none;
overflow: auto;
padding-top: 50px;
}
.channel__list > ul > li > hr {
border: 2px solid #282828;
}
.channel {
display: flex;
align-items: center;
flex-direction: row;
height: 100px;
background-color: #0e0e0e;
}
.channel__url {
display: flex;
align-items: center;
flex-grow: 1;
text-decoration: none;
font-size: 14px;
color:white;
box-sizing: border-box;
padding-top: 20px;
padding-bottom: 20px;
}
.channel__box {
display: flex;
flex-basis: 80%;
flex-direction: row;
justify-content: space-between;
}
.channel__thumbnail {
height: 25px;
width: 25px;
border-radius: 70%;
overflow: hidden;
margin-right: 30px;
background-color: white;
}
.channel__icon {
height: 25px;
width: 25px;
border-radius: 70%;
overflow: hidden;
margin-right: 30px;
}
.channel__info {
flex-basis: 70%;
margin-right: 20px;
}
.channel__name {
align-content: center;
font-size: 16px;
}
.channel__game {
font-size: 12px;
color: gray;
}
.channel__view {
text-align: right;
}
.play__icon {
margin-left: 10px;
margin-right: 10px;
}
.pause__icon {
margin-left: 10px;
margin-right: 10px;
}
import React from "react";
import "./Channel.css";
import "@material-ui/icons"
import PersonIcon from "@material-ui/icons/Person";
import PlayArrowIcon from '@material-ui/icons/PlayArrow';
import PauseIcon from '@material-ui/icons/Pause';
import { WatchOutlined } from "@material-ui/icons";
export function Channel(props) {
const channel = props.channel;
return (
<div className="channel">
<a href={channel.url} className="channel__url">
{channel.thumbnail && <img className="channel__thumbnail" src={channel.thumbnail} alt=""></img>}
{!channel.thumbnail && <PersonIcon className="channel__icon"/>}
<div className="channel__box">
<div className="channel__info">
<div className="channel__name">{channel.name}</div>
<div className="channel__game">{channel.game}</div>
</div>
<div className="channel__view">{channel.view}</div>
</div>
</a>
{channel.isPlay && <PauseIcon className="pause__icon" onClick={props.onClick} />}
{!channel.isPlay && <PlayArrowIcon className="play__icon" onClick={props.onClick} />}
</div>
);
}
export class ChannelList extends React.Component {
constructor(props) {
super(props);
// data for test
const test = [
{"name": "name1", "view": 999, "game": "game1" ,"url": "https://www.twitch.tv", "thumbnail": "https://upload.wikimedia.org/wikipedia/commons/2/26/Twitch_logo.svg"},
{"name": "name2", "view": 123124124, "game": "game2" , "url": "https://www.twitch.tv"},
{"name": "name1", "view": 999, "game": "game1" ,"url": "https://www.twitch.tv", "thumbnail": "https://upload.wikimedia.org/wikipedia/commons/2/26/Twitch_logo.svg"},
{"name": "name2", "view": 123124124, "game": "game2" , "url": "https://www.twitch.tv"},
{"name": "name1", "view": 999, "game": "game1" ,"url": "https://www.twitch.tv", "thumbnail": "https://upload.wikimedia.org/wikipedia/commons/2/26/Twitch_logo.svg"},
{"name": "name2", "view": 123124124, "game": "game2" , "url": "https://www.twitch.tv"},
{"name": "name1", "view": 999, "game": "game1" ,"url": "https://www.twitch.tv", "thumbnail": "https://upload.wikimedia.org/wikipedia/commons/2/26/Twitch_logo.svg"},
{"name": "name2", "view": 123124124, "game": "game2" , "url": "https://www.twitch.tv"},
{"name": "name1", "view": 999, "game": "game1" ,"url": "https://www.twitch.tv", "thumbnail": "https://upload.wikimedia.org/wikipedia/commons/2/26/Twitch_logo.svg"},
{"name": "name2", "view": 123124124, "game": "game2" , "url": "https://www.twitch.tv"},
]
this.state = {
channels: test,
xisPlaying: null,
}
}
changeState(channel, index){
const channels = this.state.channels;
// 버튼을 누른 채널이 재생중일때
if (channel.isPlay === true) {
channels[index].isPlay = false;
this.setState({
channels: channels,
xisPlaying: null,
});
}
// 버튼을 누른 채널이 재생중이 아닐 때
else {
// xisPlaying이 null이 아닐 때
if (this.state.xisPlaying !== null) {
// 기존에 재생되던 채널의 isPlay를 false로, 클릭 이벤트가 발생한 채널의 isPlay를 true로 변경
channels[this.state.xisPlaying].isPlay = false;
channels[index].isPlay = true;
}
// xisPlaying이 null일 때
else {
channels[index].isPlay = true;
}
this.setState({
channels: channels,
xisPlaying: index,
});
}
}
render() {
return (
<div className="channel__list">
<div className="channel__list__title"> CHANNEL LIST</div>
<ul>
{this.state.channels.map((channel, index) => (
<li key={index}>
<Channel
channel={channel}
onClick={ () => this.changeState(channel, index)}
/>
<hr />
</li>
))}
</ul>
</div>
);
}
}
\ No newline at end of file
.login {
display: grid;
background-color: #0e0e10;
height: 100vh;
place-items: center;
}
.login > img {
height: 300px;
}
.login > a {
color: white;
padding: 30px;
border-radius: 100px;
text-decoration: none;
font-size: 30px;
font-weight: bold;
background-color: #9147ff;
}
\ No newline at end of file
import React from "react";
import "./Login.css";
function Login(){
const OAuthUrl = ""; // oauth 인증용 url
return (
<div className="login">
<img
src="https://upload.wikimedia.org/wikipedia/commons/2/26/Twitch_logo.svg"
alt=""
/>
<a href={OAuthUrl}>Login to Twitch</a>
</div>
);
}
export default Login;
\ No newline at end of file
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace;
}
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
const reportWebVitals = onPerfEntry => {
if (onPerfEntry && onPerfEntry instanceof Function) {
import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
getCLS(onPerfEntry);
getFID(onPerfEntry);
getFCP(onPerfEntry);
getLCP(onPerfEntry);
getTTFB(onPerfEntry);
});
}
};
export default reportWebVitals;
// jest-dom adds custom jest matchers for asserting on DOM nodes.
// allows you to do things like:
// expect(element).toHaveTextContent(/react/i)
// learn more: https://github.com/testing-library/jest-dom
import '@testing-library/jest-dom';