Place.js 9.86 KB
Newer Older
1
<<<<<<< HEAD
Kim, Chaerin's avatar
Kim, Chaerin committed
2
import React from 'react';
baesangjune's avatar
modal    
baesangjune committed
3
import { Modal, Container, Row, Col, Button, Badge, Card, Accordion, Carousel } from 'react-bootstrap';
Kim, Chaerin's avatar
Kim, Chaerin committed
4
5

function Place(props) {
baesangjune's avatar
modal    
baesangjune committed
6
7


Kim, Chaerin's avatar
Kim, Chaerin committed
8
  return (
Kim, Chaerin's avatar
Kim, Chaerin committed
9
    <>
baesangjune's avatar
modal    
baesangjune committed
10

Kim, Chaerin's avatar
Kim, Chaerin committed
11
12
13
14
15
16
17
18
      <style type="text/css">
        {`
        .modal-backdrop.in {
          opacity: 0;
        }
    `}
      </style>
      <Modal {...props}
baesangjune's avatar
s    
baesangjune committed
19
        size="xl"
Kim, Chaerin's avatar
Kim, Chaerin committed
20
21
22
23
24
25
        keyboard="true"
        variant="backdrop.in"
        // show={lgShow}
        // onHide={() => setLgShow(false)}
        aria-labelledby="example-modal-sizes-title-lg">
        <Modal.Header closeButton>
baesangjune's avatar
modal    
baesangjune committed
26
          <Modal.Title id="contained-modal-title-vcenter" style={{ fontSize: '40px' }}>
baesangjune's avatar
modal    
baesangjune committed
27
          {props.index+1}. {props.search.name}
Kim, Chaerin's avatar
Kim, Chaerin committed
28
          </Modal.Title>
Kim, Chaerin's avatar
Kim, Chaerin committed
29
30
        </Modal.Header>
        <Modal.Body className="show-grid">
baesangjune's avatar
modal    
baesangjune committed
31

baesangjune's avatar
modal    
baesangjune committed
32
          <Container style={{ fontSize: '40px' }}>
baesangjune's avatar
modal    
baesangjune committed
33

baesangjune's avatar
modal    
baesangjune committed
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
            <Accordion defaultActiveKey="0">
              <Accordion.Toggle as={Button} variant="link" eventKey="0">
                <a className="mb-2">다음의 블로그 보기</a>
              </Accordion.Toggle>
              <Accordion.Collapse eventKey="0">
                <Card.Body><div>주도 전역을 지배하는 한라산은 남한에서 가장 높은 산으로 높이는 1,947.3m이다. 한라산이라는 이름은 산이 높아 산정에 서면 은하수를 잡아당길  있다는 뜻이며, 부악·원산·선산·두무악·영주산·부라산·혈망봉·여장군 등으로도 불려왔다.</div></Card.Body>
              </Accordion.Collapse>
              <Row>
                <Accordion.Toggle as={Button} variant="link" eventKey="1">
                  <a className="mb-2">네이버의 블로그 보기</a>
                </Accordion.Toggle>
                <Accordion.Collapse eventKey="1">
                  <Card.Body><div>한라산은 1966 한라산 천연보호구역으로, 1970 국립공원으로 지정되었다. 그리고 2002년에는 유네스코 생물권보전지역으로 지정되었으며 2007년에는 유네스코 세계자연유산으로 등재되었다. 2008년에는 물장오리오름 산정화구호 습지가 람사르 습지로 등록되어 보호 관리되고 있다</div></Card.Body>
                </Accordion.Collapse>
              </Row>
              <Row>
                <Accordion.Toggle as={Button} variant="link" eventKey="2">
                  <a className="mb-2">구글의 블로그 보기</a>
                </Accordion.Toggle>
                <Accordion.Collapse eventKey="2">
                  <Card.Body><div>한라산은 제주도에 있는 해발 1,947.06m, 면적  1,820km² 화산으로, 제주도의 면적 대부분을 차지하고 있다. 정상에 백록담이라는 화산호가 있는데, 백록담이라는 이름은  사슴이 물을 먹는 곳이라는 뜻에서 왔다고 전해진다.</div></Card.Body>
                </Accordion.Collapse>
baesangjune's avatar
modal    
baesangjune committed
56
              </Row>
baesangjune's avatar
modal    
baesangjune committed
57
            </Accordion>
baesangjune's avatar
modal    
baesangjune committed
58
59
60
            <Row style={{ color: 'white' }}>
              <a href="https://www.daum.net/" className="mb-2">다음</a><a href="https://www.naver.com/" className="mb-2">네이버</a><a href="https://www.google.com/" className="mb-2">구글</a>
            </Row>
Kim, Chaerin's avatar
Kim, Chaerin committed
61
          </Container>
baesangjune's avatar
modal    
baesangjune committed
62
63
64
65
66
67
68
69
70
71
72
73
74
75
          <Carousel>
            <Carousel.Item interval={1000}>
              <h3>다음 블로그</h3>
              <div>주도 전역을 지배하는 한라산은 남한에서 가장 높은 산으로 높이는 1,947.3m이다. 한라산이라는 이름은 산이 높아 산정에 서면 은하수를 잡아당길  있다는 뜻이며, 부악·원산·선산·두무악·영주산·부라산·혈망봉·여장군 등으로도 불려왔다.</div>
            </Carousel.Item>
            <Carousel.Item interval={1000}>
              <h3>네이버 블로그</h3>
              <div>한라산은 1966 한라산 천연보호구역으로, 1970 국립공원으로 지정되었다. 그리고 2002년에는 유네스코 생물권보전지역으로 지정되었으며 2007년에는 유네스코 세계자연유산으로 등재되었다. 2008년에는 물장오리오름 산정화구호 습지가 람사르 습지로 등록되어 보호 관리되고 있다</div>
            </Carousel.Item>
            <Carousel.Item interval={1000}>
              <h3>구글 블로그</h3>
              <div>한라산은 제주도에 있는 해발 1,947.06m, 면적  1,820km² 화산으로, 제주도의 면적 대부분을 차지하고 있다. 정상에 백록담이라는 화산호가 있는데, 백록담이라는 이름은  사슴이 물을 먹는 곳이라는 뜻에서 왔다고 전해진다.</div>
            </Carousel.Item>
          </Carousel>
Kim, Chaerin's avatar
Kim, Chaerin committed
76
77
        </Modal.Body>
        <Modal.Footer>
baesangjune's avatar
s    
baesangjune committed
78
          <Button block onClick={props.onHide}>Close</Button>
Kim, Chaerin's avatar
Kim, Chaerin committed
79
80
81
        </Modal.Footer>
      </Modal>
    </>
82
=======
83
84
85
import axios from 'axios';
import React, { useEffect, useState } from 'react';
import { Modal, Container, Row, Col, Button, Badge, Card, Accordion, Carousel } from 'react-bootstrap';
Kim, Chaerin's avatar
Kim, Chaerin committed
86
87

function Place(props) {
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
  const [reviews, setReviews] = useState([])
  const getReview = () => {
    axios.get(`/api/review/${props.search.name}`)
      .then(res => {
        setReviews(res.data)
      })
      .catch(err => {
        console.log(err)
      })
  }

  useEffect(() => {
    getReview();
  }, [])


Kim, Chaerin's avatar
Kim, Chaerin committed
104
  return (
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
    <Modal {...props}
      size="xl"
      keyboard="true"
      variant="backdrop.in"
      // show={lgShow}
      // onHide={() => setLgShow(false)}
      aria-labelledby="example-modal-sizes-title-lg">
      <Modal.Header closeButton>
        <Modal.Title id="contained-modal-title-vcenter" style={{ fontSize: '40px' }}>
          {props.index + 1}. {props.search.name}
        </Modal.Title>
      </Modal.Header>
      <Modal.Body className="show-grid">
        <Container style={{ fontSize: '40px' }}>
          {reviews.map((review, index) => {
            return (
              <Row className="mt-4">
                <a href={review.link}>{review.title}</a>
                <div>{review.summary}</div>
              </Row>
            )
          })}
          </Container>

          {/* <Accordion defaultActiveKey="0">
            <Accordion.Toggle as={Button} variant="link" eventKey="0">
              <a className="mb-2">다음의 블로그 보기</a>
            </Accordion.Toggle>
            <Accordion.Collapse eventKey="0">
              <Card.Body><div>주도 전역을 지배하는 한라산은 남한에서 가장 높은 산으로 높이는 1,947.3m이다. 한라산이라는 이름은 산이 높아 산정에 서면 은하수를 잡아당길 수 있다는 뜻이며, 부악·원산·선산·두무악·영주산·부라산·혈망봉·여장군 등으로도 불려왔다.</div></Card.Body>
            </Accordion.Collapse>
            <Row>
              <Accordion.Toggle as={Button} variant="link" eventKey="1">
                <a className="mb-2">네이버의 블로그 보기</a>
              </Accordion.Toggle>
              <Accordion.Collapse eventKey="1">
                <Card.Body><div>한라산은 1966년 한라산 천연보호구역으로, 1970년 국립공원으로 지정되었다. 그리고 2002년에는 유네스코 생물권보전지역으로 지정되었으며 2007년에는 유네스코 세계자연유산으로 등재되었다. 2008년에는 물장오리오름 산정화구호 습지가 람사르 습지로 등록되어 보호 관리되고 있다</div></Card.Body>
              </Accordion.Collapse>
Kim, Chaerin's avatar
Kim, Chaerin committed
143
            </Row>
144
145
146
147
148
149
150
            <Row>
              <Accordion.Toggle as={Button} variant="link" eventKey="2">
                <a className="mb-2">구글의 블로그 보기</a>
              </Accordion.Toggle>
              <Accordion.Collapse eventKey="2">
                <Card.Body><div>한라산은 제주도에 있는 해발 1,947.06m, 면적 약 1,820km²의 화산으로, 제주도의 면적 대부분을 차지하고 있다. 정상에 백록담이라는 화산호가 있는데, 백록담이라는 이름은 흰 사슴이 물을 먹는 곳이라는 뜻에서 왔다고 전해진다.</div></Card.Body>
              </Accordion.Collapse>
Kim, Chaerin's avatar
Kim, Chaerin committed
151
            </Row>
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
          </Accordion>
          <Row style={{ color: 'white' }}>
            <a href="https://www.daum.net/" className="mb-2">다음</a><a href="https://www.naver.com/" className="mb-2">네이버</a><a href="https://www.google.com/" className="mb-2">구글</a>
          </Row>
        // </Container>
        <Carousel>
          <Carousel.Item interval={1000}>
            <h3>다음 블로그</h3>
            <div>주도 전역을 지배하는 한라산은 남한에서 가장 높은 산으로 높이는 1,947.3m이다. 한라산이라는 이름은 산이 높아 산정에 서면 은하수를 잡아당길 수 있다는 뜻이며, 부악·원산·선산·두무악·영주산·부라산·혈망봉·여장군 등으로도 불려왔다.</div>
          </Carousel.Item>
          <Carousel.Item interval={1000}>
            <h3>네이버 블로그</h3>
            <div>한라산은 1966년 한라산 천연보호구역으로, 1970년 국립공원으로 지정되었다. 그리고 2002년에는 유네스코 생물권보전지역으로 지정되었으며 2007년에는 유네스코 세계자연유산으로 등재되었다. 2008년에는 물장오리오름 산정화구호 습지가 람사르 습지로 등록되어 보호 관리되고 있다</div>
          </Carousel.Item>
          <Carousel.Item interval={1000}>
            <h3>구글 블로그</h3>
            <div>한라산은 제주도에 있는 해발 1,947.06m, 면적 약 1,820km²의 화산으로, 제주도의 면적 대부분을 차지하고 있다. 정상에 백록담이라는 화산호가 있는데, 백록담이라는 이름은 흰 사슴이 물을 먹는 곳이라는 뜻에서 왔다고 전해진다.</div>
          </Carousel.Item>
        </Carousel> */}
      </Modal.Body>
      <Modal.Footer>
        <Button block onClick={props.onHide}>Close</Button>
      </Modal.Footer>
    </Modal>
176
>>>>>>> origin/cherry
Kim, Chaerin's avatar
Kim, Chaerin committed
177
178
179
  );
}

180
export default Place;