3week HW

3week/class/src/App.js

@@ -4,26 +4,30 @@ import './App.css';
 import 'bootstrap/dist/css/bootstrap.min.css';//bootstrap css를 사용하기 위해서 불러옵니다.
 import Navbar from './component/navbar/Navbar.js';
 import MainView from './container/MainView.js';
+import Search from "./container/Search.js"
 import ContentView from './component/contentView/ContentView.js';
 import {Switch, Route } from 'react-router-dom'//router를 사용하기 위해서 react router dom 불러옵니다.
 
+
 //router를 감싸고 있는 함수형 컴포넌트
-const Main =()=>(//라우팅할때 url이 중복되는것을 막기 위해서 switch 사용
-		<Switch>
-      {/* 
+const Main = () => (//라우팅할때 url이 중복되는것을 막기 위해서 switch 사용
+    <Switch>
+        {/*
           "/" 을 가지는 /serach, /view/:id로 이동을 하면 "/"이 포함되어있기 때문에 MainView또한 렌더링이 됩니다.
           이것을 막기 위해서 exact속성을 추가 합니다.
       */}
-			<Route exact path="/" component={MainView}></Route>
-      {/*
+        <Route exact path="/" component={MainView}></Route>
+        {/*
           "/view/:id"에 url이 이동했을때 ContentView 컴포넌트를 렌더링합니다.
           여기에서 ":id" 이 부분은 url에 변화가 필요할때 사용하는 방식 입니다.
           ":이름"" 이렇게 설정하면 url을 /view/123, /view/555 라고 해도 ContetnView 컴포넌트를 렌더링하게됩니다.
       */}
-			<Route  path="/view/:id" component={ContentView}></Route>
+        <Route path="/view/:id" component={ContentView}></Route>
+
+        <Route path="/search" component={Search}/>
 
-		</Switch>
-	)
+    </Switch>
+)
 
 class App extends Component {
   render() { 

3week/class/src/component/content/Content.js

@@ -39,7 +39,10 @@ class Content extends Component {
 
   displayImg = () => {
     let imgSrc = "https://img.youtube.com/vi/"+this.props.content.id+"/0.jpg"
-    let imgComponent = (<div><img className="thumbnail" src={imgSrc} />{this.state.isShow?(<div className="middle"><div className="text"> {this.props.content.name} </div></div>):""}</div>);
+    let imgComponent = (
+        <div>
+            <img className="thumbnail" src={imgSrc} />
+            {this.state.isShow ? (<div className="middle"><div className="text"> {this.props.content.name} </div></div>):""}</div>);
 
     return imgComponent
   }

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

@@ -21,6 +21,12 @@ 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>
 		    </ul>
 		  </div>
 		</nav>

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

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

3week/route/.gitignore

@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/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*