Commit f15e7778 authored by baesangjune's avatar baesangjune
Browse files

modal

parent 1904f9bf
[{"C:\\Users\\Korea\\Desktop\\2020winter\\search-page\\client\\src\\index.js":"1","C:\\Users\\Korea\\Desktop\\2020winter\\search-page\\client\\src\\reportWebVitals.js":"2","C:\\Users\\Korea\\Desktop\\2020winter\\search-page\\client\\src\\App.js":"3","C:\\Users\\Korea\\Desktop\\2020winter\\search-page\\client\\src\\Search.js":"4","C:\\Users\\Korea\\Desktop\\2020winter\\search-page\\client\\src\\Components\\Place.js":"5","C:\\Users\\Korea\\Desktop\\2020winter\\search-page\\client\\src\\pagination.js":"6","C:\\Users\\Korea\\Desktop\\2020winter\\search-page\\client\\src\\quadrant.js":"7"},{"size":1022,"mtime":1609858198940,"results":"8","hashOfConfig":"9"},{"size":375,"mtime":1609072355927,"results":"10","hashOfConfig":"9"},{"size":1411,"mtime":1609294197036,"results":"11","hashOfConfig":"9"},{"size":38086,"mtime":1610300438144,"results":"12","hashOfConfig":"9"},{"size":3424,"mtime":1610294679695,"results":"13","hashOfConfig":"9"},{"size":2214,"mtime":1610289121341,"results":"14","hashOfConfig":"9"},{"size":3929,"mtime":1610296061310,"results":"15","hashOfConfig":"9"},{"filePath":"16","messages":"17","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"18"},"zqc0qw",{"filePath":"19","messages":"20","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"18"},{"filePath":"21","messages":"22","errorCount":0,"warningCount":2,"fixableErrorCount":0,"fixableWarningCount":0,"source":"23","usedDeprecatedRules":"18"},{"filePath":"24","messages":"25","errorCount":0,"warningCount":2,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"26","messages":"27","errorCount":0,"warningCount":5,"fixableErrorCount":0,"fixableWarningCount":0,"source":"28","usedDeprecatedRules":"18"},{"filePath":"29","messages":"30","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"31","messages":"32","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"C:\\Users\\Korea\\Desktop\\2020winter\\search-page\\client\\src\\index.js",[],["33","34"],"C:\\Users\\Korea\\Desktop\\2020winter\\search-page\\client\\src\\reportWebVitals.js",[],"C:\\Users\\Korea\\Desktop\\2020winter\\search-page\\client\\src\\App.js",["35","36"],"import React, { useEffect, useState } from 'react';\r\nimport { Link, Redirect } from 'react-router-dom';\r\nimport ohuh from './ohuh.PNG';\r\nimport { Container, Row, Form, Image, InputGroup, Button } from 'react-bootstrap';\r\n\r\nfunction App() {\r\n const [state, setState] = useState(false);\r\n const [search, setSearch] = useState(\"\");\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 = () => {\r\n setState(true);\r\n }\r\n\r\n\r\n\r\n return (\r\n <Container className=\"vh-100\">\r\n <Row className=\"d-flex justify-content-md-center\">\r\n <Image src={ohuh} />\r\n </Row>\r\n <Row className=\"d-flex justify-content-md-center\">\r\n <Form className=\"vw-100\" onSubmit={handleSubmit}>\r\n <InputGroup>\r\n <Form.Control\r\n size=\"lg\"\r\n placeholder=\"검색어를 입력하세요.\"\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 </Container>\r\n );\r\n}\r\n\r\nexport default App;\r\n","C:\\Users\\Korea\\Desktop\\2020winter\\search-page\\client\\src\\Search.js",["37","38"],"C:\\Users\\Korea\\Desktop\\2020winter\\search-page\\client\\src\\Components\\Place.js",["39","40","41","42","43"],"import React from 'react';\r\nimport { Modal, Container, Row, Col, Button, Badge, Card, Accordion } from 'react-bootstrap';\r\n\r\nfunction Place(props) {\r\n\r\n\r\n return (\r\n <>\r\n\r\n <style type=\"text/css\">\r\n {`\r\n .modal-backdrop.in {\r\n opacity: 0;\r\n }\r\n `}\r\n </style>\r\n <Modal {...props}\r\n size=\"xl\"\r\n keyboard=\"true\"\r\n variant=\"backdrop.in\"\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\" style={{ fontSize: '40px' }}>\r\n {props.search.name}{props.index}\r\n </Modal.Title>\r\n </Modal.Header>\r\n <Modal.Body className=\"show-grid\">\r\n <Container style={{ fontSize: '40px' }}>\r\n <Accordion defaultActiveKey=\"0\">\r\n <Accordion.Toggle as={Button} variant=\"link\" eventKey=\"0\">\r\n <a className=\"mb-2\">다음의 블로그 보기</a>\r\n </Accordion.Toggle>\r\n <a href= \"https://www.daum.net/\" className=\"mb-2\">다음</a>\r\n <Accordion.Collapse eventKey=\"0\">\r\n <Card.Body><div>주도 전역을 지배하는 한라산은 남한에서 가장 높은 산으로 높이는 1,947.3m이다. 한라산이라는 이름은 산이 높아 산정에 서면 은하수를 잡아당길 수 있다는 뜻이며, 부악·원산·선산·두무악·영주산·부라산·혈망봉·여장군 등으로도 불려왔다.</div></Card.Body>\r\n </Accordion.Collapse>\r\n <Row>\r\n <Accordion.Toggle as={Button} variant=\"link\" eventKey=\"1\">\r\n <a className=\"mb-2\">네이버의 블로그 보기</a>\r\n </Accordion.Toggle>\r\n <a href=\"https://www.naver.com/\" className=\"mb-2\">네이버</a>\r\n <Accordion.Collapse eventKey=\"1\">\r\n <Card.Body><div>한라산은 1966년 한라산 천연보호구역으로, 1970년 국립공원으로 지정되었다. 그리고 2002년에는 유네스코 생물권보전지역으로 지정되었으며 2007년에는 유네스코 세계자연유산으로 등재되었다. 2008년에는 물장오리오름 산정화구호 습지가 람사르 습지로 등록되어 보호 관리되고 있다</div></Card.Body>\r\n </Accordion.Collapse>\r\n </Row>\r\n <Row>\r\n <Accordion.Toggle as={Button} variant=\"link\" eventKey=\"2\">\r\n <a className=\"mb-2\">구글의 블로그 보기</a>\r\n </Accordion.Toggle>\r\n <a href=\"https://www.google.com/\" className=\"mb-2\">구글</a>\r\n <Accordion.Collapse eventKey=\"2\">\r\n <Card.Body><div>한라산은 제주도에 있는 해발 1,947.06m, 면적 약 1,820km²의 화산으로, 제주도의 면적 대부분을 차지하고 있다. 정상에 백록담이라는 화산호가 있는데, 백록담이라는 이름은 흰 사슴이 물을 먹는 곳이라는 뜻에서 왔다고 전해진다.</div></Card.Body>\r\n </Accordion.Collapse>\r\n </Row>\r\n </Accordion>\r\n </Container>\r\n </Modal.Body>\r\n <Modal.Footer>\r\n <Button block onClick={props.onHide}>Close</Button>\r\n </Modal.Footer>\r\n </Modal>\r\n </>\r\n );\r\n}\r\n\r\nexport default Place;","C:\\Users\\Korea\\Desktop\\2020winter\\search-page\\client\\src\\pagination.js",[],"C:\\Users\\Korea\\Desktop\\2020winter\\search-page\\client\\src\\quadrant.js",[],{"ruleId":"44","replacedBy":"45"},{"ruleId":"46","replacedBy":"47"},{"ruleId":"48","severity":1,"message":"49","line":1,"column":17,"nodeType":"50","messageId":"51","endLine":1,"endColumn":26},{"ruleId":"48","severity":1,"message":"52","line":2,"column":10,"nodeType":"50","messageId":"51","endLine":2,"endColumn":14},{"ruleId":"48","severity":1,"message":"53","line":5,"column":83,"nodeType":"50","messageId":"51","endLine":5,"endColumn":93},{"ruleId":"54","severity":1,"message":"55","line":451,"column":35,"nodeType":"56","endLine":451,"endColumn":76},{"ruleId":"48","severity":1,"message":"57","line":2,"column":33,"nodeType":"50","messageId":"51","endLine":2,"endColumn":36},{"ruleId":"48","severity":1,"message":"58","line":2,"column":46,"nodeType":"50","messageId":"51","endLine":2,"endColumn":51},{"ruleId":"59","severity":1,"message":"60","line":33,"column":17,"nodeType":"61","endLine":33,"endColumn":37},{"ruleId":"59","severity":1,"message":"60","line":41,"column":19,"nodeType":"61","endLine":41,"endColumn":39},{"ruleId":"59","severity":1,"message":"60","line":50,"column":19,"nodeType":"61","endLine":50,"endColumn":39},"no-native-reassign",["62"],"no-negated-in-lhs",["63"],"no-unused-vars","'useEffect' is defined but never used.","Identifier","unusedVar","'Link' is defined but never used.","'Pagination' is defined but never used.","react/jsx-no-duplicate-props","No duplicate props allowed","JSXAttribute","'Col' is defined but never used.","'Badge' is defined but never used.","jsx-a11y/anchor-is-valid","The href attribute is required for an anchor to be keyboard accessible. Provide a valid, navigable address as the href value. If you cannot provide an href, but still need the element to resemble a link, use a button and change it with appropriate styles. Learn more: https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/anchor-is-valid.md","JSXOpeningElement","no-global-assign","no-unsafe-negation"]
\ No newline at end of file
[{"C:\\Users\\Korea\\Desktop\\2020winter\\search-page\\client\\src\\index.js":"1","C:\\Users\\Korea\\Desktop\\2020winter\\search-page\\client\\src\\reportWebVitals.js":"2","C:\\Users\\Korea\\Desktop\\2020winter\\search-page\\client\\src\\App.js":"3","C:\\Users\\Korea\\Desktop\\2020winter\\search-page\\client\\src\\Search.js":"4","C:\\Users\\Korea\\Desktop\\2020winter\\search-page\\client\\src\\Components\\Place.js":"5","C:\\Users\\Korea\\Desktop\\2020winter\\search-page\\client\\src\\pagination.js":"6","C:\\Users\\Korea\\Desktop\\2020winter\\search-page\\client\\src\\quadrant.js":"7"},{"size":1022,"mtime":1609858198940,"results":"8","hashOfConfig":"9"},{"size":375,"mtime":1609072355927,"results":"10","hashOfConfig":"9"},{"size":1411,"mtime":1609294197036,"results":"11","hashOfConfig":"9"},{"size":38086,"mtime":1610300438144,"results":"12","hashOfConfig":"9"},{"size":4940,"mtime":1610303597999,"results":"13","hashOfConfig":"9"},{"size":2275,"mtime":1610303504276,"results":"14","hashOfConfig":"9"},{"size":3929,"mtime":1610296061310,"results":"15","hashOfConfig":"9"},{"filePath":"16","messages":"17","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"18"},"zqc0qw",{"filePath":"19","messages":"20","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"18"},{"filePath":"21","messages":"22","errorCount":0,"warningCount":2,"fixableErrorCount":0,"fixableWarningCount":0,"source":"23","usedDeprecatedRules":"18"},{"filePath":"24","messages":"25","errorCount":0,"warningCount":2,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"26","messages":"27","errorCount":0,"warningCount":5,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"28","messages":"29","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"30","messages":"31","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"C:\\Users\\Korea\\Desktop\\2020winter\\search-page\\client\\src\\index.js",[],["32","33"],"C:\\Users\\Korea\\Desktop\\2020winter\\search-page\\client\\src\\reportWebVitals.js",[],"C:\\Users\\Korea\\Desktop\\2020winter\\search-page\\client\\src\\App.js",["34","35"],"import React, { useEffect, useState } from 'react';\r\nimport { Link, Redirect } from 'react-router-dom';\r\nimport ohuh from './ohuh.PNG';\r\nimport { Container, Row, Form, Image, InputGroup, Button } from 'react-bootstrap';\r\n\r\nfunction App() {\r\n const [state, setState] = useState(false);\r\n const [search, setSearch] = useState(\"\");\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 = () => {\r\n setState(true);\r\n }\r\n\r\n\r\n\r\n return (\r\n <Container className=\"vh-100\">\r\n <Row className=\"d-flex justify-content-md-center\">\r\n <Image src={ohuh} />\r\n </Row>\r\n <Row className=\"d-flex justify-content-md-center\">\r\n <Form className=\"vw-100\" onSubmit={handleSubmit}>\r\n <InputGroup>\r\n <Form.Control\r\n size=\"lg\"\r\n placeholder=\"검색어를 입력하세요.\"\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 </Container>\r\n );\r\n}\r\n\r\nexport default App;\r\n","C:\\Users\\Korea\\Desktop\\2020winter\\search-page\\client\\src\\Search.js",["36","37"],"C:\\Users\\Korea\\Desktop\\2020winter\\search-page\\client\\src\\Components\\Place.js",["38","39","40","41","42"],"C:\\Users\\Korea\\Desktop\\2020winter\\search-page\\client\\src\\pagination.js",[],"C:\\Users\\Korea\\Desktop\\2020winter\\search-page\\client\\src\\quadrant.js",[],{"ruleId":"43","replacedBy":"44"},{"ruleId":"45","replacedBy":"46"},{"ruleId":"47","severity":1,"message":"48","line":1,"column":17,"nodeType":"49","messageId":"50","endLine":1,"endColumn":26},{"ruleId":"47","severity":1,"message":"51","line":2,"column":10,"nodeType":"49","messageId":"50","endLine":2,"endColumn":14},{"ruleId":"47","severity":1,"message":"52","line":5,"column":83,"nodeType":"49","messageId":"50","endLine":5,"endColumn":93},{"ruleId":"53","severity":1,"message":"54","line":451,"column":35,"nodeType":"55","endLine":451,"endColumn":76},{"ruleId":"47","severity":1,"message":"56","line":2,"column":33,"nodeType":"49","messageId":"50","endLine":2,"endColumn":36},{"ruleId":"47","severity":1,"message":"57","line":2,"column":46,"nodeType":"49","messageId":"50","endLine":2,"endColumn":51},{"ruleId":"58","severity":1,"message":"59","line":35,"column":17,"nodeType":"60","endLine":35,"endColumn":37},{"ruleId":"58","severity":1,"message":"59","line":42,"column":19,"nodeType":"60","endLine":42,"endColumn":39},{"ruleId":"58","severity":1,"message":"59","line":50,"column":19,"nodeType":"60","endLine":50,"endColumn":39},"no-native-reassign",["61"],"no-negated-in-lhs",["62"],"no-unused-vars","'useEffect' is defined but never used.","Identifier","unusedVar","'Link' is defined but never used.","'Pagination' is defined but never used.","react/jsx-no-duplicate-props","No duplicate props allowed","JSXAttribute","'Col' is defined but never used.","'Badge' is defined but never used.","jsx-a11y/anchor-is-valid","The href attribute is required for an anchor to be keyboard accessible. Provide a valid, navigable address as the href value. If you cannot provide an href, but still need the element to resemble a link, use a button and change it with appropriate styles. Learn more: https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/anchor-is-valid.md","JSXOpeningElement","no-global-assign","no-unsafe-negation"]
\ No newline at end of file
import React from 'react';
import { Modal, Container, Row, Col, Button, Badge, Card, Accordion } from 'react-bootstrap';
import { Modal, Container, Row, Col, Button, Badge, Card, Accordion, Carousel } from 'react-bootstrap';
function Place(props) {
......@@ -23,16 +23,17 @@ function Place(props) {
aria-labelledby="example-modal-sizes-title-lg">
<Modal.Header closeButton>
<Modal.Title id="contained-modal-title-vcenter" style={{ fontSize: '40px' }}>
{props.search.name}{props.index}
{props.index+1}. {props.search.name}
</Modal.Title>
</Modal.Header>
<Modal.Body className="show-grid">
<Container style={{ fontSize: '40px' }}>
<Accordion defaultActiveKey="0">
<Accordion.Toggle as={Button} variant="link" eventKey="0">
<a className="mb-2">다음의 블로그 보기</a>
</Accordion.Toggle>
<a href= "https://www.daum.net/" className="mb-2">다음</a>
<Accordion.Collapse eventKey="0">
<Card.Body><div>주도 전역을 지배하는 한라산은 남한에서 가장 높은 산으로 높이는 1,947.3m이다. 한라산이라는 이름은 산이 높아 산정에 서면 은하수를 잡아당길 있다는 뜻이며, 부악·원산·선산·두무악·영주산·부라산·혈망봉·여장군 등으로도 불려왔다.</div></Card.Body>
</Accordion.Collapse>
......@@ -40,7 +41,6 @@ function Place(props) {
<Accordion.Toggle as={Button} variant="link" eventKey="1">
<a className="mb-2">네이버의 블로그 보기</a>
</Accordion.Toggle>
<a href="https://www.naver.com/" className="mb-2">네이버</a>
<Accordion.Collapse eventKey="1">
<Card.Body><div>한라산은 1966 한라산 천연보호구역으로, 1970 국립공원으로 지정되었다. 그리고 2002년에는 유네스코 생물권보전지역으로 지정되었으며 2007년에는 유네스코 세계자연유산으로 등재되었다. 2008년에는 물장오리오름 산정화구호 습지가 람사르 습지로 등록되어 보호 관리되고 있다</div></Card.Body>
</Accordion.Collapse>
......@@ -49,13 +49,29 @@ function Place(props) {
<Accordion.Toggle as={Button} variant="link" eventKey="2">
<a className="mb-2">구글의 블로그 보기</a>
</Accordion.Toggle>
<a href="https://www.google.com/" className="mb-2">구글</a>
<Accordion.Collapse eventKey="2">
<Card.Body><div>한라산은 제주도에 있는 해발 1,947.06m, 면적 1,820km² 화산으로, 제주도의 면적 대부분을 차지하고 있다. 정상에 백록담이라는 화산호가 있는데, 백록담이라는 이름은 사슴이 물을 먹는 곳이라는 뜻에서 왔다고 전해진다.</div></Card.Body>
</Accordion.Collapse>
</Row>
</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>
......
......@@ -10,7 +10,7 @@ function Paginations(props) {
return (
<Pagination>
<Pagination.First onClick={() => props.handlePage(1)} />
{props.index === 1 ? "" : <Pagination.Prev onClick={()=>props.handlePage(props.index - 1)} />}
{props.index === 1 ? <Pagination.Prev onClick={()=>props.handlePage(props.index)} /> : <Pagination.Prev onClick={()=>props.handlePage(props.index - 1)} />}
{props.index === props.endPage-1 ? <Pagination.Item onClick={()=>props.handlePage(props.index - 3)}>{props.index - 3}</Pagination.Item> : ""}
{props.index === props.endPage ? <Pagination.Item onClick={()=>props.handlePage(props.index - 4)}>{props.index - 4}</Pagination.Item> : ""}
{props.index === props.endPage ? <Pagination.Item onClick={()=>props.handlePage(props.index - 3)}>{props.index - 3}</Pagination.Item> : ""}
......
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