jiwoo 3week

.gitignore

@@ -4,6 +4,7 @@
 README.md
 /assets
 */node_modules
+node_modules/
 
 # dependencies
 

3week/class/src/App.js

@@ -6,6 +6,8 @@ import Navbar from './component/navbar/Navbar.js';
 import MainView from './container/MainView.js';
 import ContentView from './component/contentView/ContentView.js';
 import {Switch, Route } from 'react-router-dom'//router를 사용하기 위해서 react router dom 불러옵니다.
+import Search from './container/Search';
+import Game from './container/Game';
 
 //router를 감싸고 있는 함수형 컴포넌트
 const Main =()=>(//라우팅할때 url이 중복되는것을 막기 위해서 switch 사용
@@ -21,7 +23,8 @@ const Main =()=>(//라우팅할때 url이 중복되는것을 막기 위해서 sw
           ":이름"" 이렇게 설정하면 url을 /view/123, /view/555 라고 해도 ContetnView 컴포넌트를 렌더링하게됩니다.
       */}
 			<Route  path="/view/:id" component={ContentView}></Route>
-
+      <Route path="/search" component={Search}></Route>
+      <Route path="/game" component={Game}></Route>
 		</Switch>
 	)
 

3week/class/src/component/contentList/ContentList.js

@@ -8,7 +8,7 @@ class ContentList extends Component {
 
   //한줄에 4개의 콘텐츠를 출력 하기 위해서 컴포넌트를 구성해주는 함수
   listRender() {
-    console.log(this.props.contents)
+    // console.log(this.props.contents)
   	var count = Math.ceil(this.props.contents.length/4)//현재 콘텐츠를 한줄에 4개씩 보여주면 몇줄이 나오는지를 구함
   	let component = [] //컴포넌트를 담을 배열 선언
   	for(let i =0;i<count;i++) {//반복문을 이용해서 한줄씩 컴포넌트를 만들어줌

3week/class/src/component/navbar/Navbar.js

@@ -21,6 +21,18 @@ class Navbar extends Component {
 		        */}
 		        <Link className="nav-link" to="/">Home</Link>
 		      </li>
+		      <li className="nav-item active">
+		        {/* 
+					Link 컴포넌트를 이용해 url을 "/"로 변경하고 홈 화면을 렌더링
+		        */}
+		        <Link className="nav-link" to="/search">Search</Link>
+		      </li>
+		      <li className="nav-item active">
+		        {/* 
+					Link 컴포넌트를 이용해 url을 "/"로 변경하고 홈 화면을 렌더링
+		        */}
+		        <Link className="nav-link" to="/game">Game</Link>
+		      </li>
 		    </ul>
 		  </div>
 		</nav>

3week/class/src/container/Game.js

@@ -0,0 +1,57 @@
+import React, { Component } from 'react'
+import ContentList from '../component/contentList/ContentList.js';
+import axios from 'axios';
+
+export default class Game extends Component{
+    state = {
+        keyword:null,
+        contents: []
+    };
+
+    fetchSearch = async keyword =>{
+        let maxResults = 30;
+        let token = 'AIzaSyC-v1sIG2Wn3YnoD_7_bBS4zPDceDLKmLY';
+
+        try{
+            let {data} = await axios.get(
+                'https://www.googleapis.com/youtube/v3/search?q='+
+                keyword+
+                '&part=snippet&key='+
+                token+
+                '&maxResults='+
+                maxResults
+                );
+                // console.log(this.setContents(data));
+                this.setState({ contents : this.setContents(data) });
+        }catch{
+
+        }
+    };
+
+    componentDidMount (){
+        this.fetchSearch("게임");
+    }
+
+    setContents = (data) => {
+        let list = []
+         data.items.forEach((item, index) => {
+           if(item.id.videoId) {
+             list.push({id:item.id.videoId,name:item.snippet.title})
+           }
+         })
+         return list
+     }
+
+    render(){
+        const {keyword, contents} = this.state;
+        const {handleChange, handleSubmit} = this;
+
+        return(
+            <div>
+                <div className="content">
+                    <ContentList contents={contents} />
+                </div>
+            </div>
+        );
+    }
+}

3week/class/src/container/Search.js

@@ -0,0 +1,71 @@
+import React, { Component } from 'react'
+import ContentList from '../component/contentList/ContentList.js';
+import axios from 'axios';
+
+export default class Search extends Component{
+    state = {
+        keyword:null,
+        contents: []
+    };
+
+    handleChange = (e) =>{
+        this.setState({
+            keyword: e.target.value
+        });
+        e.preventDefault();
+    };
+
+    handleSubmit = e =>{
+        this.fetchSearch(this.state.keyword);
+        e.preventDefault();
+    };
+
+    fetchSearch = async keyword =>{
+        let maxResults = 30;
+        let token = 'AIzaSyC-v1sIG2Wn3YnoD_7_bBS4zPDceDLKmLY';
+
+        try{
+            let {data} = await axios.get(
+                'https://www.googleapis.com/youtube/v3/search?q='+
+                keyword+
+                '&part=snippet&key='+
+                token+
+                '&maxResults='+
+                maxResults
+                );
+                // console.log(this.setContents(data));
+                this.setState({ contents : this.setContents(data) });
+        }catch{
+
+        }
+    };
+
+    setContents = (data) => {
+        let list = []
+         data.items.forEach((item, index) => {
+           if(item.id.videoId) {
+             list.push({id:item.id.videoId,name:item.snippet.title})
+           }
+         })
+         return list
+     }
+
+    render(){
+        const {keyword, contents} = this.state;
+        const {handleChange, handleSubmit} = this;
+
+        return(
+            <div>
+                <div>
+                    <form onSubmit={handleSubmit}>
+                        <input type="text" value={keyword} onChange={handleChange} />
+                    </form>
+                </div>
+                {keyword}
+                <div className="content">
+                    <ContentList contents={contents} />
+                </div>
+            </div>
+        );
+    }
+}