App.js

import React, { useState, useEffect } from 'react';
import { Link, Redirect } from 'react-router-dom';
import ohuh from '../ohuh.PNG';
import { Container, Row, Form, Image, InputGroup, Button, Col, Card, Nav } from 'react-bootstrap';
import axios from 'axios';
import { handleLogout, isAuthenticated } from '../utils/auth.js'

function App() {
  const [state, setState] = useState(false);
  const [search, setSearch] = useState("");
  const [recommend, setRecommend] = useState([{ name: " ", address: " ", img: " " }]);
  const [latest, setLatest] = useState([{ name: " ", address: " ", img: " " }]);


  useEffect(() => {
    getRecommend()
    getLatest()
  }, []);
  const user = isAuthenticated()

  if (state !== false) {
    return <Redirect to={`/search?keyword=${search}`} />;
  }

  const handleChange = (e) => {
    setSearch(e.target.value);
  } //바뀌는 것이 있을때 이벤트 발생

  const handleSubmit = () => {
    setState(true);
  } //submit 버튼을 누르면 state 값을 true로 바뀐다

  const getRecommend = () => {
    axios.get(`/api/app/recommend`)
      .then(res => {
        setRecommend(res.data)
      })
      .catch(err => {
        console.log("APP RECOMMEND ERROR", err)
      })
  }

  const getLatest = () => {
    axios.get(`/api/app/lastest`)
      .then(res => {
        setLatest(res.data)
      })
      .catch(err => {
        console.log("APP LATEST ERROR", err)
      })
  }



  return (
    <>
      <style type="text/css">
        {`
                   @font-face {
                    font-family: 'Jal_Onuel';
                    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-10-21@1.0/Jal_Onuel.woff') format('woff');
                    font-weight: normal;
                    font-style: normal;
                }
                body{font-family:'Jal_Onuel'}
                

                Nav{
                  font-color: 'red';
                }
              
                `}
      </style>
      <Container className="vh-100 ">
        <Col xs={12} >
          <Nav className="justify-content-end" bg="#fff" variant="light" style={{}} >
            {user ? <>
              <Nav.Link onClick={() => handleLogout()}>로그아웃</Nav.Link>
              <Nav.Link href='/bookmark'>북마크</Nav.Link>
            </>
              : (
                <>
                  <Nav.Link href="/signup">회원가입</Nav.Link>
                  <Nav.Link href="/login">로그인</Nav.Link>
                </>
              )}
          </Nav>
          <Row className="justify-content-center" md={2}>
            <Col className="d-flex justify-content-center">
              <Image src={ohuh} style={{ margin: "3%", marginTop: "3%" }} fluid />
            </Col>
          </Row>
          <Row style={{ marginBottom: "5%" }}>
            <Form className="vw-100" onSubmit={handleSubmit}>
              <InputGroup >
                <Form.Control
                  size="lg"
                  placeholder="검색어를 입력하세요."
                  aria-label="Large"
                  aria-describedby="inputGroup-sizing-sm"
                  onChange={handleChange}
                />
                <InputGroup.Append>
                  <Button type='submit' variant="outline-secondary">검색</Button>
                </InputGroup.Append>
              </InputGroup>
            </Form>
          </Row>
          <div class="row mb-2">
            <div class="col-md-6">
              <div class="row g-0 border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative">
                <div class="col p-4 d-flex flex-column position-static">
                  <strong class="d-inline-block mb-2 text-info">인기관광지</strong>
                  <h3 class="mb-0">{recommend.name}</h3>
                  <Image variant="top" style={{ padding: "5%", width: "100%", height: "340px" }} src={recommend.img} />
                  <p class="card-text mb-auto">{recommend.address}</p>
                  <Link to={`/place?name=${recommend.name}&src=${recommend.img}&address=${recommend.address}`} >
                    <Button variant="info"> {recommend.name} 자세히 살펴보기</Button>
                  </Link>
                </div>
                <div class="col-auto d-none d-lg-block">

                </div>
              </div>
            </div>
            <div class="col-md-6">
              <div class="row g-0 border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative">
                <div class="col p-4 d-flex flex-column position-static">
                  <strong class="d-inline-block mb-2 text-success">최근검색 관광지</strong>
                  <h3 class="mb-0">{latest.name}</h3>
                  <Image variant="top" style={{ padding: "5%", width: "100%", height: "340px" }} src={latest.img} />
                  <p class="mb-auto">{latest.address}</p>
                  <Link to={`/place?name=${latest.name}&src=${latest.img}&address=${latest.address}`} >
                    <Button variant="info"> {latest.name} 자세히 살펴보기</Button>
                  </Link>
                </div>
                <div class="col-auto d-none d-lg-block">

                </div>
              </div>
            </div>
          </div>


          {/* <Row  xs={6}>
          <Col md={6} xs={12}>
            <h1 className=" d-flex justify-content-center" style={{ marginBottom: "7%" ,marginTop:"30%" }}>인기관광지</h1>
            <Card align="center" border="info" style={{ margin: "3%" }}>
              <Card.Header style={{  margin: "0",fontSize: '200%', fontWeight: 'bold' }} >{recommend.name}</Card.Header>
              <Card.Img variant="top" style={{ padding: "5%", width: "100%", height: "340px" }} src={recommend.img} />
              <Card.Body >
                <Card.Text style={{ overflow: 'auto', fontSize: '25px', width: '100%', height: "80px" }} >
                  {recommend.address} </Card.Text>
                  <Link to={`/place?id=${1}&place=${recommend.name}`} >
                  <Button variant="info"> {recommend.name} 자세히 살펴보기</Button>
                </Link>
              </Card.Body>
            </Card>
          </Col>

          <Col md={6} xs={12}>
            <h1 className=" d-flex justify-content-center" style={{ marginBottom: "7%",marginTop:"30%" }}>최근 검색관광지</h1>
            <Card align="center" border="info" style={{ margin: "3%" }} >
              <Card.Header style={{  margin: "0", fontSize: '200%', fontWeight: 'bold'}} bg="danger">{latest.name}</Card.Header>
              <Card.Img variant="top" style={{ padding: "5%", width: "100%", height: "340px" }} src={latest.img} />
              <Card.Body >
                <Card.Text style={{ overflow: 'auto', fontSize: '25px', width: '100%', height: "80px" }} >
                  {latest.address} </Card.Text>
                <Link to={`/place?id=${1}&place=${latest.name}`} >
                  <Button variant="info"> {latest.name} 자세히 살펴보기</Button>
                </Link>
              </Card.Body>
            </Card>
          </Col>
        </Row> */}
        </Col>
      </Container>
    </>
  );
}

export default App;