Commit 04541ca7 authored by Kim, Chaerin's avatar Kim, Chaerin
Browse files

UI 첫 병합

parent c8ae80a8
...@@ -5,17 +5,14 @@ import { Container, Row, Col, Image, InputGroup, FormControl, Button } from 'rea ...@@ -5,17 +5,14 @@ import { Container, Row, Col, Image, InputGroup, FormControl, Button } from 'rea
function App() { function App() {
const [search, setSearch] = useState(""); const [search, setSearch] = useState("");
const [state, setState] = useState(); const [state, setState] = useState(false);
useEffect(() => { if (state !== false) {
if (state === true) { return <Redirect to={{
<Redirect to="/search" /> pathname: `/search/${search}`,
// <Redirect to={{ state: { id: search },
// pathname: `/search/${search}`, }} />;
// state: { id: search }, }
// }} />
}
}, [])
const handleChange = (e) => { const handleChange = (e) => {
setSearch(e.target.value); setSearch(e.target.value);
...@@ -26,13 +23,13 @@ function App() { ...@@ -26,13 +23,13 @@ function App() {
setState(true); setState(true);
} }
return ( return (
<Container className="min-height 100vh"> <Container className="vh-100">
<Row className="justify-content-md-center" > <Row className="d-flex justify-content-md-center">
<Image src={ohuh} /> <Image src={ohuh} />
</Row> <InputGroup size="lg" xs={5}>
<Row>
<InputGroup size="lg">
<FormControl <FormControl
placeholder="검색어를 입력하세요." placeholder="검색어를 입력하세요."
aria-label="Large" aria-label="Large"
...@@ -40,7 +37,7 @@ function App() { ...@@ -40,7 +37,7 @@ function App() {
onChange={handleChange} onChange={handleChange}
/> />
<InputGroup.Append> <InputGroup.Append>
<Button variant="outline-secondary" onClick={handleSubmit}><Link to="/search">검색</Link></Button> <Button variant="outline-secondary" onClick={handleSubmit}>검색</Button>
</InputGroup.Append> </InputGroup.Append>
</InputGroup> </InputGroup>
{/* <form onSubmit={handleSubmit}> {/* <form onSubmit={handleSubmit}>
......
import React from 'react';
import { Modal, Container, Row, Col, Button } from 'react-bootstrap';
function Place(props) {
return (
<Modal {...props}
size="lg"
// show={lgShow}
// onHide={() => setLgShow(false)}
aria-labelledby="example-modal-sizes-title-lg">
<Modal.Header closeButton>
<Modal.Title id="contained-modal-title-vcenter">
{props.search}
</Modal.Title>
</Modal.Header>
<Modal.Body className="show-grid">
<Container>
<Row>
<Col xs={12} md={8}>
크롤링 해와서
</Col>
<Col xs={6} md={4}>
내용을 담아주세요.
</Col>
</Row>
<Row className="mt-4">
<div>주도 전역을 지배하는 한라산은 남한에서 가장 높은 산으로 높이는 1,947.3m이다. 한라산이라는 이름은 산이 높아 산정에 서면 은하수를 잡아당길 있다는 뜻이며, 부악·원산·선산·두무악·영주산·부라산·혈망봉·여장군 등으로도 불려왔다.</div>
<a href="https://www.daum.net">다음의 블로그</a>
{/* <Col xs={6} md={4}>
.col-xs-6 .col-md-4
</Col>
<Col xs={6} md={4}>
.col-xs-6 .col-md-4
</Col>
<Col xs={6} md={4}>
.col-xs-6 .col-md-4
</Col> */}
</Row>
<Row className="mt-4">
<div>한라산은 1966 한라산 천연보호구역으로, 1970 국립공원으로 지정되었다. 그리고 2002년에는 유네스코 생물권보전지역으로 지정되었으며 2007년에는 유네스코 세계자연유산으로 등재되었다. 2008년에는 물장오리오름 산정화구호 습지가 람사르 습지로 등록되어 보호 관리되고 있다</div>
<a href="https://www.naver.com/">네이버의 블로그</a>
</Row>
<Row className="mt-4">
<div>한라산은 제주도에 있는 해발 1,947.06m, 면적 1,820km² 화산으로, 제주도의 면적 대부분을 차지하고 있다. 정상에 백록담이라는 화산호가 있는데, 백록담이라는 이름은 사슴이 물을 먹는 곳이라는 뜻에서 왔다고 전해진다.</div>
<a href="https://www.google.com/">구글의 블로그</a></Row>
</Container>
</Modal.Body>
<Modal.Footer>
<Button onClick={props.onHide}>Close</Button>
</Modal.Footer>
</Modal>
);
}
export default Place;
\ No newline at end of file
import React, { useState } from 'react'; import React, { useState } from 'react';
import { Link, Redirect } from 'react-router-dom'; import { Link, Redirect } from 'react-router-dom';
import ohuh from './ohuh-sm.PNG'; import ohuh from './ohuh-sm.PNG';
import { Container, Row, Col, Image, InputGroup, FormControl, Button } from 'react-bootstrap'; import Place from './Components/Place';
import halla from './halla.jpg';
import { Container, Row, Card, Image, InputGroup, FormControl, Button, Form } from 'react-bootstrap';
function Search(props) { function Search(props) {
const [search, setSearch] = useState(""); const [state, setState] = useState(false);
const [search, setSearch] = useState(props.location.state.id);
const [modalShow, setModalShow] = useState(false);
if (state !== false) {
return <Redirect to={{
pathname: `/search/${search}`,
state: { id: search },
}} />;
}
const handleChange = (e) => { const handleChange = (e) => {
setSearch(e.target.value); setSearch(e.target.value);
} }
const handleSubmit = (e) => { const handleSubmit = (e) => {
setState(true);
} }
return ( return (
<Container className=""> <Container className="mt-3">
<Row className="" > <Row className="" >
<InputGroup size="lg"> <InputGroup size="lg">
<Image src={ohuh} /> <Link to="/"><Image src={ohuh} /></Link>
<FormControl <FormControl
placeholder="검색어를 입력하세요." placeholder="검색어를 입력하세요."
value={search}
aria-label="Large" aria-label="Large"
aria-describedby="inputGroup-sizing-sm" aria-describedby="inputGroup-sizing-sm"
onChange={handleChange} onChange={handleChange}
...@@ -25,24 +40,56 @@ function Search(props) { ...@@ -25,24 +40,56 @@ function Search(props) {
<Button variant="outline-secondary" onClick={handleSubmit}><Link to="/search">검색</Link></Button> <Button variant="outline-secondary" onClick={handleSubmit}><Link to="/search">검색</Link></Button>
</InputGroup.Append> </InputGroup.Append>
</InputGroup> </InputGroup>
{/* <form onSubmit={handleSubmit}>
<input className="" name="search" type="text" placeholder="검색어를 입력하세요." onChange={handleChange}></input>
<Link to="/search"><button type="submit">검색</button></Link>
</form> */}
</Row> </Row>
<Link to="/">여기는 검색창이야아아아ㅏㅏ</Link> <Form>
<Row className="d-flex justify-content-between">
<Card style={{ width: '35rem' }}>
<Card.Img variant="top" src={halla} />
<Card.Body>
<Card.Title>한라산(hallasan)</Card.Title>
<Card.Text>
제주 서귀포시 토평동 산15-1 </Card.Text>
<Button variant="primary" onClick={() => setModalShow(true)}>한라산 자세히 살펴보기</Button>
<Place search={search} show={modalShow} onHide={() => setModalShow(false)} />
</Card.Body>
</Card>
<Card style={{ width: '35rem' }}>
<Card.Img variant="top" src={halla} />
<Card.Body>
<Card.Title>성산일출봉(sungsan)</Card.Title>
<Card.Text>
제주 서귀포시 성산읍 성산리 1 </Card.Text>
<Button variant="primary" onClick={() => setModalShow(true)}>성산일출봉 자세히 살펴보기</Button>
<Place search={search} show={modalShow} onHide={() => setModalShow(false)} />
</Card.Body>
</Card>
</Row>
<Row className="d-flex justify-content-between">
<Card style={{ width: '35rem' }}>
<Card.Img variant="top" src={halla} />
<Card.Body>
<Card.Title>해녀의 (haenyeo)</Card.Title>
<Card.Text>
제주 서귀포시 성산읍 한도로 141-13지번오조리 3 오조해녀의집 </Card.Text>
<Button variant="primary" onClick={() => setModalShow(true)}>해녀의 자세히 살펴보기</Button>
<Place search={search} show={modalShow} onHide={() => setModalShow(false)} />
</Card.Body>
</Card>
<Card style={{ width: '35rem' }}>
<Card.Img variant="top" src={halla} />
<Card.Body>
<Card.Title>오설록 뮤지엄(osulloc)</Card.Title>
<Card.Text>
제주 서귀포시 안덕면 신화역사로 15 오설록지번서광리 1235-1 오설록 </Card.Text>
<Button variant="primary" onClick={() => setModalShow(true)}>오설록 뮤지엄 자세히 살펴보기</Button>
<Place search={search} show={modalShow} onHide={() => setModalShow(false)} />
</Card.Body>
</Card>
</Row>
</Form>
</Container> </Container>
// <div className="">
// {console.log(props)}
// <header className="">
// <img src={ohuh} className="" alt="ohuh" />
// <Link to={"/search"}>여기는 검색창이야아아아ㅏㅏ</Link>
// <form onSubmit={handleSubmit}>
// <input className="" name="search" type="text" value={search} onChange={handleChange}></input>
// <button type="submit">검색</button>
// </form>
// </header>
// </div>
); );
} }
......
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