add quote list

src/App.js

@@ -1,9 +1,13 @@
 import React from 'react';
+import Quote from './quote/Quote'
 
 function App() {
-  return (
-    <div>Welcome To Momentum</div>
-  );
+    return (
+        <div>
+            <div>Welcome To Momentum</div>
+            <Quote/>
+        </div>
+    );
 }
 
 export default App;

src/quote/Data.js → src/quote/Data.jsx

@@ -6,10 +6,6 @@ class Data extends Component {
 
     };
 
-    constructor(props){
-        super(props);
-    }
-
     render() {
         return (
             <div className="quote-data">

src/quote/Quote.js → src/quote/Quote.jsx

@@ -5,19 +5,21 @@ import QuoteList from './QuoteList';
 
 class Quote extends Component {
     state = {
-
+        searchData: ''
     };
 
-    constructor(props){
-        super(props);
-    }
+    getSearchData = (data) =>{
+        this.setState({
+            searchData: data
+        })
+    };
 
     render() {
         return (
             <div className="quote">
-                <QuoteSearch/>
-                <QuoteData quote={}/>
-                <QuoteList/>
+                <QuoteSearch getSearchData={this.getSearchData}/>
+                <QuoteData quote={"I'm happy!"}/>
+                <QuoteList searchString={this.state.searchData}/>
             </div>
         );
     }

src/quote/QuoteList.jsx

@@ -0,0 +1,42 @@
+import React, {Component} from 'react';
+import PropTypes from "prop-types";
+import QuoteListItemClass from "./js/QuoteListItemClass";
+import QuoteListItem from "./QuoteListItem";
+
+class QuoteList extends Component {
+    state = {};
+
+    render() {
+        return (
+            <div className="quote-list">
+                <ul>
+                    {this.props.quoteList.map((value, key) => {
+                        return <QuoteListItem quote={value} searchString={this.props.searchString} key={`quote-list-${key}`}/>
+                    })}
+                </ul>
+            </div>
+        );
+    }
+}
+
+QuoteList.propTypes = {
+    quoteList: PropTypes.arrayOf(PropTypes.instanceOf(QuoteListItemClass)).isRequired,
+    searchString: PropTypes.string
+};
+
+QuoteList.defaultProps = {
+    quoteList: [
+        new QuoteListItemClass('Helen Keller','The best and most beautiful things in the world cannot be seen or even touched - they must be felt with the heart.'),
+        new QuoteListItemClass('Oscar Wilde','Keep love in your heart. A life without it is like a sunless garden when the flowers are dead.'),
+        new QuoteListItemClass('Aristotle','It is during our darkest moments that we must focus to see the light.'),
+        new QuoteListItemClass('Maya Angelou','Try to be a rainbow in someone\'s cloud.'),
+        new QuoteListItemClass('Joseph Campbell\n','Find a place inside where there\'s joy, and the joy will burn out the pain.'),
+        new QuoteListItemClass('Audrey Hepburn','Nothing is impossible, the word itself says \'I\'m possible\'!'),
+        new QuoteListItemClass('Robert Louis Stevenson','Don\'t judge each day by the harvest you reap but by the seeds that you plant.'),
+        new QuoteListItemClass('Buddha','Do not dwell in the past, do not dream of the future, concentrate the mind on the present moment.\n'),
+        new QuoteListItemClass('Edmund Burke','The only thing necessary for the triumph of evil is for good men to do nothing.'),
+        new QuoteListItemClass('Lucius Annaeus Seneca','One of the most beautiful qualities of true friendship is to understand and to be understood.'),
+    ]
+};
+
+export default QuoteList;

src/quote/QuoteListItem.jsx

@@ -0,0 +1,36 @@
+import React, {Component} from 'react';
+import PropTypes from "prop-types";
+import QuoteListItemClass from './js/QuoteListItemClass'
+import './css/QuoteListItem.css'
+
+class QuoteListItem extends Component {
+    state = {};
+
+    setHighlight = () => {
+        const idx = this.props.quote.data.indexOf(this.props.searchString);
+        if (idx !== -1 ) {
+            return (<>
+                <span>{this.props.quote.data.slice(0, idx)}</span>
+                <b>{this.props.quote.data.slice(idx, idx + this.props.searchString.length)}</b>
+                <span>{this.props.quote.data.slice(idx + this.props.searchString.length, this.props.quote.data.length)}</span>
+            </>);
+        } else {
+            return <span>{this.props.quote.data}</span>;
+        }
+    };
+
+    render() {
+        return (
+            <li className="quote-list-item">
+                {this.props.quote.name} - {this.setHighlight()}
+            </li>
+        );
+    }
+}
+
+QuoteListItem.propTypes = {
+    quote: PropTypes.instanceOf(QuoteListItemClass).isRequired,
+    searchString: PropTypes.string
+};
+
+export default QuoteListItem;

src/quote/Search.jsx

@@ -0,0 +1,29 @@
+import React, {Component} from 'react';
+
+class Search extends Component {
+    state = {
+        data: ''
+    };
+
+    handleChange = (e) => {
+        this.props.getSearchData(e.target.value);
+        this.setState({
+            data: e.target.value,
+        })
+    };
+
+    onClick = () => {
+
+    };
+
+    render() {
+        return (
+            <div>
+                <input className="quote-search" onChange={this.handleChange}/>
+                <input type="button" value="검색" onClick={this.onClick}/>
+            </div>
+        );
+    }
+}
+
+export default Search;

src/quote/css/QuoteListItem.css

@@ -0,0 +1,3 @@
+b{
+    background-color: skyblue;
+}