Search.js 11.1 KB
Newer Older
1
import React, { useState, useEffect } from 'react';
Kim, Chaerin's avatar
Kim, Chaerin committed
2
import { Link, Redirect } from 'react-router-dom';
Kim, Chaerin's avatar
?    
Kim, Chaerin committed
3
4
import ohuh from '../ohuh-sm.PNG';
import Place from '../Components/Place';
5
import { Container, Form, Row, Col, Card, Image, InputGroup, FormControl, Button, Pagination } from 'react-bootstrap';
Kim, Chaerin's avatar
?    
Kim, Chaerin committed
6
import Paginations from '../Components/Paginations';
baesangjune's avatar
.    
baesangjune committed
7
import axios from 'axios';
Kim, Chaerin's avatar
Kim, Chaerin committed
8
9

function Search(props) {
baesangjune's avatar
style    
baesangjune committed
10
    const endPage = 10;
Kim, Chaerin's avatar
Kim, Chaerin committed
11
    const [state, setState] = useState(false);
12
    const [index, setIndex] = useState(1);
13
    const [showSet, setShowSet] = useState([false, false, false, false]);
Kim, Chaerin's avatar
Kim, Chaerin committed
14
    const [search, setSearch] = useState(props.location.state.id);
15
    const [mobile, setMobile] = useState();
baesangjune's avatar
.    
baesangjune committed
16
    const [place, setPlace] = useState([{name:"", category:"", address:""}])
baesangjune's avatar
.    
baesangjune committed
17
    const [imgUrl, setImgUrl] = useState([])
18

baesangjune's avatar
.    
baesangjune committed
19
20
21
22
23
24
25
26
27
28
    const getImg = () => {
        axios.get(`/api/search/imges/${search}`)
            .then(res => {
                console.log("images=", res.data)
                setImgUrl(res.data)
            })
            .catch(err => {
                console.log('search.images발생', err)
            })
    }
baesangjune's avatar
.    
baesangjune committed
29

baesangjune's avatar
.    
baesangjune committed
30
31
32
33
34
35
36
37
38
39
    const getPlace = () => {
        axios.get(`/api/search/places/${search}`)
            .then(res => {
                console.log("places=", res.data)
                setPlace(res.data)
            })
            .catch(err => {
                console.log('search.places발생', err)
            })
    }
baesangjune's avatar
.    
baesangjune committed
40
41
42



43
    useEffect(() => {
baesangjune's avatar
.    
baesangjune committed
44
45
        getImg()
        getPlace()
46
47
48
49
50
51
        if (window.innerWidth < 960) {
            setMobile(true)
        } else {
            setMobile(false)
        }
    }, []);
Kim, Chaerin's avatar
Kim, Chaerin committed
52

baesangjune's avatar
.    
baesangjune committed
53
54
55
56
57





58
59
60
    const places = [{
        name: "한라산(hallasan)",
        address: "제주 서귀포시 토평동 산15-1",
Kim, Chaerin's avatar
Kim, Chaerin committed
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
        img: "data:image/png;base64,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",
        // img: "https://upload.wikimedia.org/wikipedia/commons/thumb/e/eb/KOCIS_Halla_Mountain_in_Jeju-do_%286387785543%29.jpg/269px-KOCIS_Halla_Mountain_in_Jeju-do_%286387785543%29.jpg?size=200x200",
    // }, {
    //     name: "성산일출봉(sungsan)",
    //     address: "제주 서귀포시 성산읍 성산리 1",
    //     img: "https://www.jeju.go.kr/pub/site/geopark/images/sub/sub03/02%EC%A7%80%EC%A7%88%EB%A7%88%EC%9D%84%EC%9D%B4%EC%95%BC%EA%B8%B0/%EC%A7%80%EC%A7%88%EB%A7%88%EC%9D%84/%EC%A7%80%EC%A7%88%EB%A7%88%EC%9D%84_%EC%84%B1%EC%82%B0%EC%9D%BC%EC%B6%9C%EB%B4%89/1412402261.jpg?400/400",
    // }, {
    //     name: "해녀의 집(haenyeo)",
    //     address: "제주 서귀포시 성산읍 한도로 141-13지번오조리 3 오조해녀의집",
    //     img: "https://mblogthumb-phinf.pstatic.net/MjAxNjExMTdfMTc0/MDAxNDc5MzU3ODU0ODQy.KZYXCjzsXT3rCsE4HXBfxyCg2buvluBvN_7NxVp7BSwg.loJc89d8JjGXdNCn-4yMd7aMWPjfrZn21TI9Hyzemkog.JPEG.icocam11/20161010_100205.jpg?type=w800",
    // }, {
    //     name: "오설록 티 뮤지엄(osulloc)",
    //     address: "제주 서귀포시 안덕면 신화역사로 15 오설록지번서광리 1235-1 오설록",
    //     img: "https://cdnweb01.wikitree.co.kr/webdata/editor/202007/01/img_20200701143323_2ced7627.webp",
    // }, {
    //     name: "오설록 티 뮤지엄(osulloc)",
    //     address: "제주 서귀포시 안덕면 신화역사로 15 오설록지번서광리 1235-1 오설록",
    //     img: "https://upload.wikimedia.org/wikipedia/commons/thumb/e/eb/KOCIS_Halla_Mountain_in_Jeju-do_%286387785543%29.jpg/269px-KOCIS_Halla_Mountain_in_Jeju-do_%286387785543%29.jpg",
79
80
    }]

Kim, Chaerin's avatar
Kim, Chaerin committed
81
82
    if (state !== false) {
        return <Redirect to={{
83
84
            pathname: `/search/${search}`,
            state: { id: search },
Kim, Chaerin's avatar
Kim, Chaerin committed
85
        }} />;
86
    }
Kim, Chaerin's avatar
Kim, Chaerin committed
87

baesangjune's avatar
style    
baesangjune committed
88
89
90
91
92
    const handlePage = (num) => {
        setIndex(num);
    }


Kim, Chaerin's avatar
Kim, Chaerin committed
93
94
95
    const handleChange = (e) => {
        setSearch(e.target.value);
    }
Kim, Chaerin's avatar
Kim, Chaerin committed
96

Kim, Chaerin's avatar
Kim, Chaerin committed
97
    const handleSubmit = (e) => {
Kim, Chaerin's avatar
Kim, Chaerin committed
98
        setState(true);
Kim, Chaerin's avatar
Kim, Chaerin committed
99
    }
100

baesangjune's avatar
.    
baesangjune committed
101
    function paginate(items, pageNumber, itemNumber) {
102
        const page = [];
baesangjune's avatar
.    
baesangjune committed
103
        const startIndex = (pageNumber - 1) * itemNumber
Kim, Chaerin's avatar
Kim, Chaerin committed
104
        for (var i = 0; i < itemNumber; i++) {
105
106
107
108
109
            page.push(items[(startIndex + i)])
        }
        return page
    }

baesangjune's avatar
.    
baesangjune committed
110
    const pagePlace = paginate(places, index, 1)
111

Kim, Chaerin's avatar
Kim, Chaerin committed
112
    return (
baesangjune's avatar
s    
baesangjune committed
113
        <Container >
114
115
116
            <Link to="/" className="d-flex justify-content-center"><Image src={ohuh} /></Link>
            <Row className="mb-2" className="d-flex justify-content-center">
                <Form style={{ width: "90vw" }} onSubmit={handleSubmit}>
117
118
119
120
121
122
123
124
125
126
127
128
                    <InputGroup size="lg">
                        <FormControl
                            placeholder="검색어를 입력하세요."
                            value={search}
                            aria-label="Large"
                            aria-describedby="inputGroup-sizing-sm"
                            onChange={handleChange}
                        />
                        <InputGroup.Append>
                            <Button type="submit" variant="outline-secondary" >검색</Button>
                        </InputGroup.Append>
                    </InputGroup>
129
                </Form>
Kim, Chaerin's avatar
Kim, Chaerin committed
130
            </Row>
baesangjune's avatar
.    
baesangjune committed
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149

            <Col md={6} >
                            <Card align="center" border="info" style={{ margin: "3%" }}>
                                <Card.Title style={{ margin: "3%", fontSize: '200%', fontWeight: 'bold' }} >{place[0].name}</Card.Title>
                                <Card.Img variant="top" style={{ padding: "5%", width: "100%", height: "340px" }} src={imgUrl} />
                                <Card.Body >
                                    <Card.Text style={{ overflow: 'auto', fontSize: '25px', width: '100%', height: "80px" }} >
                                        {place[0].address}{place[0].category} </Card.Text>
                                    <Button variant="primary" onClick={() => {
                                        // const showArr = [false, false, false, false]
                                        // showArr[index] = true
                                        // setShowSet(showArr)
                                    }}>{place[0].name} 자세히 살펴보기</Button>
                                    {/* <Place search={place}  show={show} onHide={() => setShowSet([false, false, false, false])} /> */}
                                </Card.Body>
                            </Card>
                        </Col>

 
150
151
152
            <Row className="d-flex flex-wrap">
                {pagePlace.map((place, index) => {
                    return (
baesangjune's avatar
style    
baesangjune committed
153
                        <Col key={index} md={6} >
154
155
156
157
158
                            <Card align="center" border="info" style={{ margin: "3%" }}>
                                <Card.Title style={{ margin: "3%", fontSize: '200%', fontWeight: 'bold' }} >{place.name}</Card.Title>
                                <Card.Img variant="top" style={{ padding: "5%", width: "100%", height: "340px" }} src={place.img} />
                                <Card.Body >
                                    <Card.Text style={{ overflow: 'auto', fontSize: '25px', width: '100%', height: "80px" }} >
159
                                        {place.address} </Card.Text>
160
161
162
163
164
165
                                    <Button variant="primary" onClick={() => {
                                        const showArr = [false, false, false, false]
                                        showArr[index] = true
                                        setShowSet(showArr)
                                    }}>{place.name} 자세히 살펴보기</Button>
                                    <Place search={place} index={index} show={showSet[index]} onHide={() => setShowSet([false, false, false, false])} />
166
167
168
                                </Card.Body>
                            </Card>
                        </Col>
169
170
171
                    )
                })}
            </Row>
baesangjune's avatar
.    
baesangjune committed
172
            {/* {console.log(showSet)} */}
baesangjune's avatar
modal    
baesangjune committed
173
            {/* show가 전부 true로 바뀌어서 전부 다 보이게 되는 것이다. */}
174
            <Row className="mt-2 d-flex justify-content-center">
baesangjune's avatar
style    
baesangjune committed
175
                <Paginations index={index} endPage={endPage} handlePage={handlePage}></Paginations>
176
            </Row>
Kim, Chaerin's avatar
Kim, Chaerin committed
177
178
179
180
        </Container>
    );
}

181
export default Search;