Commit 77421aac authored by Kim, Chaerin's avatar Kim, Chaerin
Browse files

Q. 모달 뜨는게 너무 느리다

parent 5f3b1727
[{"C:\\Users\\sag06\\Desktop\\project\\search-page\\client\\src\\Search.js":"1","C:\\Users\\sag06\\Desktop\\project\\search-page\\client\\src\\Components\\Place.js":"2","C:\\Users\\sag06\\Desktop\\project\\search-page\\client\\src\\App.js":"3"},{"size":6652,"mtime":1609140172008,"results":"4","hashOfConfig":"5"},{"size":2142,"mtime":1609137618631,"results":"6","hashOfConfig":"5"},{"size":1360,"mtime":1609139575316,"results":"7","hashOfConfig":"5"},{"filePath":"8","messages":"9","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":"10"},"1n20xnc",{"filePath":"11","messages":"12","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":"13"},{"filePath":"14","messages":"15","errorCount":0,"warningCount":2,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},"C:\\Users\\sag06\\Desktop\\project\\search-page\\client\\src\\Search.js",["16"],"import React, { useState } from 'react';\r\nimport { Link, Redirect } from 'react-router-dom';\r\nimport ohuh from './ohuh-sm.PNG';\r\nimport Place from './Components/Place';\r\nimport { Container, Form, Row, Col, Card, Image, InputGroup, FormControl, Button, Pagination } from 'react-bootstrap';\r\n\r\nfunction Search(props) {\r\n const [state, setState] = useState(false);\r\n const [search, setSearch] = useState(props.location.state.id);\r\n const [modalShow, setModalShow] = useState(false);\r\n\r\n const places = [{\r\n name: \"한라산(hallasan)\",\r\n address: \"제주 서귀포시 토평동 산15-1\",\r\n 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\",\r\n }, {\r\n name: \"성산일출봉(sungsan)\",\r\n address: \"제주 서귀포시 성산읍 성산리 1\",\r\n 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\",\r\n }, {\r\n name: \"해녀의 집(haenyeo)\",\r\n address: \"제주 서귀포시 성산읍 한도로 141-13지번오조리 3 오조해녀의집\",\r\n img: \"https://mblogthumb-phinf.pstatic.net/MjAxNjExMTdfMTc0/MDAxNDc5MzU3ODU0ODQy.KZYXCjzsXT3rCsE4HXBfxyCg2buvluBvN_7NxVp7BSwg.loJc89d8JjGXdNCn-4yMd7aMWPjfrZn21TI9Hyzemkog.JPEG.icocam11/20161010_100205.jpg?type=w800\",\r\n }, {\r\n name: \"오설록 티 뮤지엄(osulloc)\",\r\n address: \"제주 서귀포시 안덕면 신화역사로 15 오설록지번서광리 1235-1 오설록\",\r\n img: \"https://lh3.googleusercontent.com/proxy/4u4wDLh1sQwCUQsLQbyAUND9Y9x_gBL_Ikw5sbE8SKBF3yd0k_xgac58yPIkzfplB8RNHpvEcEROoVyzWx4SO9QnKj78SF8DKgAQMcAo_anM9CIKtt-zN-ZN5E2WqKJNah4zj205kUdMMEXL36HEk5SZp98oymRGhrBMNlZYsuCMSgB2hkI4F0JOWdTIYz8i8x1Y8YPOwGDbde18dO-gU_Ylu_J360jXO8m-Kr1Xi91vtFthfVWVC4QOHgJF01AWF_dSAOpSDQFTNlVwI0sFK9XInojCuKh2Z_xd0UhtV2TOqvOXsOxq2355QDzveD1y6fpmi5RI\",\r\n }, {\r\n name: \"오설록 티 뮤지엄(osulloc)\",\r\n address: \"제주 서귀포시 안덕면 신화역사로 15 오설록지번서광리 1235-1 오설록\",\r\n img: \"https://lh3.googleusercontent.com/proxy/4u4wDLh1sQwCUQsLQbyAUND9Y9x_gBL_Ikw5sbE8SKBF3yd0k_xgac58yPIkzfplB8RNHpvEcEROoVyzWx4SO9QnKj78SF8DKgAQMcAo_anM9CIKtt-zN-ZN5E2WqKJNah4zj205kUdMMEXL36HEk5SZp98oymRGhrBMNlZYsuCMSgB2hkI4F0JOWdTIYz8i8x1Y8YPOwGDbde18dO-gU_Ylu_J360jXO8m-Kr1Xi91vtFthfVWVC4QOHgJF01AWF_dSAOpSDQFTNlVwI0sFK9XInojCuKh2Z_xd0UhtV2TOqvOXsOxq2355QDzveD1y6fpmi5RI\",\r\n }, {\r\n name: \"해녀의 집(haenyeo)\",\r\n address: \"제주 서귀포시 성산읍 한도로 141-13지번오조리 3 오조해녀의집\",\r\n img: \"https://mblogthumb-phinf.pstatic.net/MjAxNjExMTdfMTc0/MDAxNDc5MzU3ODU0ODQy.KZYXCjzsXT3rCsE4HXBfxyCg2buvluBvN_7NxVp7BSwg.loJc89d8JjGXdNCn-4yMd7aMWPjfrZn21TI9Hyzemkog.JPEG.icocam11/20161010_100205.jpg?type=w800\",\r\n }, {\r\n name: \"성산일출봉(sungsan)\",\r\n address: \"제주 서귀포시 성산읍 성산리 1\",\r\n 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\",\r\n }, {\r\n name: \"한라산(hallasan)\",\r\n address: \"제주 서귀포시 토평동 산15-1\",\r\n 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\",\r\n }]\r\n\r\n if (state !== false) {\r\n return <Redirect to={{\r\n pathname: `/search/${search}`,\r\n state: { id: search },\r\n }} />;\r\n }\r\n\r\n const handleChange = (e) => {\r\n setSearch(e.target.value);\r\n }\r\n\r\n const handleSubmit = (e) => {\r\n setState(true);\r\n }\r\n return (\r\n <Container>\r\n <Row className=\"mt-2 mb-2\">\r\n <Form className=\"vw-100\" onSubmit={handleSubmit}>\r\n <InputGroup size=\"lg\">\r\n <Link to=\"/\"><Image src={ohuh} /></Link>\r\n <FormControl\r\n placeholder=\"검색어를 입력하세요.\"\r\n value={search}\r\n aria-label=\"Large\"\r\n aria-describedby=\"inputGroup-sizing-sm\"\r\n onChange={handleChange}\r\n />\r\n <InputGroup.Append>\r\n <Button type=\"submit\" variant=\"outline-secondary\" >검색</Button>\r\n </InputGroup.Append>\r\n </InputGroup>\r\n </Form>\r\n </Row>\r\n <div>\r\n <Row className=\"d-flex flex-wrap\">\r\n {places.map((place, index) => (\r\n <Col key={index} md={6}>\r\n <Card>\r\n <Card.Img variant=\"top\" src={place.img} />\r\n <Card.Body>\r\n <Card.Title>{place.name}</Card.Title>\r\n <Card.Text>\r\n {place.address} </Card.Text>\r\n <Button variant=\"primary\" onClick={() => setModalShow(true)}>{place.name} 자세히 살펴보기</Button>\r\n <Place search={place.name} show={modalShow} onHide={() => setModalShow(false)} />\r\n </Card.Body>\r\n </Card>\r\n </Col>\r\n ))}\r\n </Row>\r\n </div>\r\n <Row className=\"mt-2 d-flex justify-content-center\">\r\n <Pagination>\r\n <Pagination.First />\r\n <Pagination.Prev />\r\n {1 === 1 ? \"\" : <Pagination.Ellipsis />}\r\n <Pagination.Item active>{1}</Pagination.Item>\r\n\r\n <Pagination.Item>{2}</Pagination.Item>\r\n <Pagination.Item>{3}</Pagination.Item>\r\n <Pagination.Item>{4}</Pagination.Item>\r\n <Pagination.Item>{5}</Pagination.Item>\r\n\r\n <Pagination.Ellipsis />\r\n <Pagination.Next />\r\n <Pagination.Last />\r\n </Pagination>\r\n </Row>\r\n </Container>\r\n );\r\n}\r\n\r\nexport default Search;","C:\\Users\\sag06\\Desktop\\project\\search-page\\client\\src\\Components\\Place.js",["17"],"import React from 'react';\r\nimport { Modal, Container, Row, Col, Button } from 'react-bootstrap';\r\n\r\nfunction Place(props) {\r\n return (\r\n <Modal {...props}\r\n size=\"lg\"\r\n // show={lgShow}\r\n // onHide={() => setLgShow(false)}\r\n aria-labelledby=\"example-modal-sizes-title-lg\">\r\n <Modal.Header closeButton>\r\n <Modal.Title id=\"contained-modal-title-vcenter\">\r\n {props.search} \r\n </Modal.Title>\r\n </Modal.Header>\r\n <Modal.Body className=\"show-grid\">\r\n <Container>\r\n <Row className=\"mt-4\">\r\n <div>주도 전역을 지배하는 한라산은 남한에서 가장 높은 산으로 높이는 1,947.3m이다. 한라산이라는 이름은 산이 높아 산정에 서면 은하수를 잡아당길 수 있다는 뜻이며, 부악·원산·선산·두무악·영주산·부라산·혈망봉·여장군 등으로도 불려왔다.</div>\r\n <a href=\"https://www.daum.net\">다음의 블로그</a>\r\n </Row>\r\n <Row className=\"mt-4\">\r\n <div>한라산은 1966년 한라산 천연보호구역으로, 1970년 국립공원으로 지정되었다. 그리고 2002년에는 유네스코 생물권보전지역으로 지정되었으며 2007년에는 유네스코 세계자연유산으로 등재되었다. 2008년에는 물장오리오름 산정화구호 습지가 람사르 습지로 등록되어 보호 관리되고 있다</div>\r\n <a href=\"https://www.naver.com/\">네이버의 블로그</a>\r\n </Row>\r\n <Row className=\"mt-4\">\r\n <div>한라산은 제주도에 있는 해발 1,947.06m, 면적 약 1,820km²의 화산으로, 제주도의 면적 대부분을 차지하고 있다. 정상에 백록담이라는 화산호가 있는데, 백록담이라는 이름은 흰 사슴이 물을 먹는 곳이라는 뜻에서 왔다고 전해진다.</div>\r\n <a href=\"https://www.google.com/\">구글의 블로그</a></Row>\r\n </Container>\r\n </Modal.Body>\r\n <Modal.Footer>\r\n <Button onClick={props.onHide}>Close</Button>\r\n </Modal.Footer>\r\n </Modal>\r\n );\r\n}\r\n\r\nexport default Place;","C:\\Users\\sag06\\Desktop\\project\\search-page\\client\\src\\App.js",["18","19"],{"ruleId":"20","severity":1,"message":"21","line":101,"column":22,"nodeType":"22","messageId":"23","endLine":101,"endColumn":29},{"ruleId":"24","severity":1,"message":"25","line":2,"column":33,"nodeType":"26","messageId":"27","endLine":2,"endColumn":36},{"ruleId":"24","severity":1,"message":"28","line":1,"column":17,"nodeType":"26","messageId":"27","endLine":1,"endColumn":26},{"ruleId":"24","severity":1,"message":"29","line":2,"column":10,"nodeType":"26","messageId":"27","endLine":2,"endColumn":14},"no-self-compare","Comparing to itself is potentially pointless.","BinaryExpression","comparingToSelf","no-unused-vars","'Col' is defined but never used.","Identifier","unusedVar","'useEffect' is defined but never used.","'Link' is defined but never used."]
\ No newline at end of file
[{"C:\\Users\\sag06\\Desktop\\project\\search-page\\client\\src\\Search.js":"1"},{"size":45871,"mtime":1609149857806,"results":"2","hashOfConfig":"3"},{"filePath":"4","messages":"5","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},"1n20xnc","C:\\Users\\sag06\\Desktop\\project\\search-page\\client\\src\\Search.js",["6"],{"ruleId":"7","severity":1,"message":"8","line":10,"column":18,"nodeType":"9","messageId":"10","endLine":10,"endColumn":25},"no-unused-vars","'setShow' is assigned a value but never used.","Identifier","unusedVar"]
\ No newline at end of file
......@@ -10,7 +10,7 @@ function Place(props) {
aria-labelledby="example-modal-sizes-title-lg">
<Modal.Header closeButton>
<Modal.Title id="contained-modal-title-vcenter">
{props.search}
{props.search.name}
</Modal.Title>
</Modal.Header>
<Modal.Body className="show-grid">
......
This diff is collapsed.
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment