[읽는다] React로 독서모임 Web 개발일지_05 Landing / Search component

˙GIT HUB https://github.com/daayooung/book_club

daayooung/book_club

[ Landing page ]

 

 

[ Landing component ]

 

Landing .js

import React from 'react';
import "./Landing.css";

function Landing () {
  return (
    <div className="Landing_inner_wrap">
        <h1 className="Landing_title">읽<br/>는<br/>다.</h1>
        <button className="btn_login">로그인</button>
        <a href="/" className="signup">회원이 아니신가요? 회원가입</a>
    </div>
  )
}

export default Landing;

 

 

Landing.css

.Landing {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url(../images/selective-focus-photo-of-thick-books-1090941.jpg);
  background-position: 50%;
  background-size: cover;
  background-repeat: no-repeat;
}

.Landing_inner_wrap {
  height: 100%;
  max-height: 760px;
  min-height: 430px;

  /* 작은 디바이스에서도 button 모양 망가지지 않기 위해 min-height 설정 */

  padding: 80px 0 150px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}


.Landing_inner_wrap .Landing_title {
  margin: 0 auto 50px;
  flex: 1;
  font-family: 'Noto Serif KR', serif;
  font-size: 46px;
  font-weight: 600; 
  color: white;
  
}

.Landing_inner_wrap .btn_login {
  width: 176px;
  height: 42px;
  margin-bottom: 20px;
  border-radius: 50px;
  box-shadow: 0 4px 5px rgba(0, 0, 0, 0.2);
  background: -webkit-linear-gradient(to left, #feb47b, #ff7e5f);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to left, #feb47b, #ff7e5f);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  font-size: 14px;
  font-weight: 600;
  color: white;
}

.Landing_inner_wrap .signup {
  color: white;
}

 

[ Search page ]

 

 

[ Search Component ]

 

Search.js

import React from 'react';
import './Search.css';

class Search extends React.Component {
  state={
    keyword: null,
  }

  //  input의 value값을 keyword로 준다.
  //  keyword는 Home.js 의 getBooks 함수에 query값으로 전달

  keywordSubmitHandler = (e) => {
    console.log(e)
  }

  render () {
    const { keyword } = this.state
    const { keywordSubmitHandler } = this
    return (
      <section className="search">
        <div className="inner_wrap">
          <form onSubmit={keywordSubmitHandler}>

            {/* form 추가하니 css 난리났다 */}

            <input type="text" name="search" value={keyword} placeholder=
            "검색어를 입력하세요."></input>
            <button type="button" className="btn_search">
              <svg data-v-28783d35="" width="24" height="24" viewBox="0 0 24 24"
              fill="none" xmlns="http://www.w3.org/2000/svg">
                <circle data-v-28783d35="" cx="11" cy="11" r="6" stroke="#666666"
                stroke-width="2"></circle>
                <path data-v-28783d35="" d="M16 16L19 19" stroke="#666666" stroke-width="2"
                stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
            </button>
          </form>
        </div>
      </section>
    );
  }
}
export default Search;

 

Search.css

.inner_wrap {
  position: relative;
  padding: 80px 16px 0;
   
}

.inner_wrap input {

  width: 100%;
  height: 32px;
  font-weight: 700;
  font-size: 20px;
  line-height: 32px;
  color: #333;
  padding: 0 28px 11px 0;
  border-bottom: 2px solid #ff7e5f;

}

.inner_wrap .btn_search {
  position: absolute;
  top: 67%;
  right: 13px;
}

 

Home.js

import React from "react";
import axios from "axios";
import Search from "./Search";
import "./Home.css";

class Home extends React.Component {
  state = {
    isloading: true,
    books: []
  };

  getBooks = async() => {
    const {
      data: { documents }
    } = await axios.get(
      'https://dapi.kakao.com/v3/search/book.json',{

      params: {
        query: this.state.keyWord,
        size: 50
      },
      meta: {
        total_count: 100,
        pageable_count: 100,
        is_end: false

        // 여러 page를 받아오고 싶은데, 아직 손을 못댔다.
      },
      headers: {
      Authorization: "KakaoAK da93584ea85aa1a2d72500c3bd9ed51c"
      }
    });
    console.log(documents)
    this.setState({ books : documents, isloading : false })

  }

  componentDidMount() {
    this.getBooks();
  }

  render() {
    return (
      <section className="container">
        <Search />
      </section>
)}}

export default Home;

 

---

// input값 받아와서 state, 다시 props로 전달하기. 역시 혼자 해보니 막힌다. 해보길 잘했다.

 

// 앞으로 만들 component들을 어떻게 App화면에서 보여줘야 할지도 구상해나가야 한다.