App.js 1.47 KB
Newer Older
Kim, Chaerin's avatar
Kim, Chaerin committed
1
2
3
4
5
6
7
import React, { useEffect, useState } from 'react';
import { Link, Redirect } from 'react-router-dom';
import ohuh from './ohuh.PNG';
import { Container, Row, Col, Image, InputGroup, FormControl, Button } from 'react-bootstrap';

function App() {
  const [search, setSearch] = useState("");
Kim, Chaerin's avatar
Kim, Chaerin committed
8
9
10
11
12
13
14
15
  const [state, setState] = useState(false);

  if (state !== false) {
    return <Redirect to={{
      pathname: `/search/${search}`,
      state: { id: search },
    }} />;
  }
Kim, Chaerin's avatar
Kim, Chaerin committed
16
17
18
19
20
21
22
23
24
25

  const handleChange = (e) => {
    setSearch(e.target.value);
    console.log(e.target.value)
  }

  const handleSubmit = (e) => {
    setState(true);
  }

Kim, Chaerin's avatar
Kim, Chaerin committed
26
27


Kim, Chaerin's avatar
Kim, Chaerin committed
28
  return (
Kim, Chaerin's avatar
Kim, Chaerin committed
29
30
    <Container className="vh-100">
      <Row className="d-flex justify-content-md-center">
Kim, Chaerin's avatar
Kim, Chaerin committed
31
        <Image src={ohuh} />
Kim, Chaerin's avatar
Kim, Chaerin committed
32
        <InputGroup size="lg" xs={5}>
Kim, Chaerin's avatar
Kim, Chaerin committed
33
34
35
36
37
38
39
          <FormControl
            placeholder="검색어를 입력하세요."
            aria-label="Large"
            aria-describedby="inputGroup-sizing-sm"
            onChange={handleChange}
          />
          <InputGroup.Append>
Kim, Chaerin's avatar
Kim, Chaerin committed
40
            <Button variant="outline-secondary" onClick={handleSubmit}>검색</Button>
Kim, Chaerin's avatar
Kim, Chaerin committed
41
42
43
44
45
46
47
48
49
50
51
52
          </InputGroup.Append>
        </InputGroup>
        {/* <form onSubmit={handleSubmit}>
          <input className="" name="search" type="text" placeholder="검색어를 입력하세요." onChange={handleChange}></input>
          <Link to="/search"><button type="submit">검색</button></Link>
        </form> */}
      </Row>
    </Container>
  );
}

export default App;