Skip to content

Commit 6b4803d

Browse files
seohyun319seohyun319
authored
Merge pull request #56 from coconut-thisABLE/design/#50
Design/#50 responsible list view
2 parents 22c4c03 + f67ae15 commit 6b4803d

File tree

5 files changed

+132
-51
lines changed

5 files changed

+132
-51
lines changed

‎thisable/src/App.js‎

Lines changed: 15 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,29 @@
1-
import React from 'react';
1+
import React from "react";
22
import { BrowserRouter, Route, Routes } from "react-router-dom";
3-
import 'bootstrap/dist/css/bootstrap.min.css';
4-
import DetailPage from './components/DetailPage/DetailPage';
5-
import MainPage from './components/MainPage/MainPage';
6-
import MapPage from './components/MapPage/MapPage';
7-
import NavBar from './components/NavBar/NavBar';
8-
import MainPageList from './components/MainPage/MainPageList';
3+
import "bootstrap/dist/css/bootstrap.min.css";
4+
import DetailPage from "./components/DetailPage/DetailPage";
5+
import MainPage from "./components/MainPage/MainPage";
6+
import MapPage from "./components/MapPage/MapPage";
7+
import NavBar from "./components/NavBar/NavBar";
8+
import MainPageList from "./components/MainPage/MainPageList";
99

1010
function App() {
1111
return (
1212
<div className="App">
1313
<BrowserRouter>
14-
<NavBar/>
15-
<div>
14+
<NavBar />
15+
<div>
1616
<Routes>
17-
<Route exact path="/" element={<MainPage />}>
17+
<Route path="/" element={<MainPage />}>
1818
<Route path="/detail/:id" element={<DetailPage />}></Route>
19-
<Route path="/" element={<MainPageList />}></Route>
19+
<Route path="/" element={<MainPageList />}></Route>
2020
</Route>
21-
<Route path="/map" element={<MapPage />}></Route>
21+
<Route path="/list" element={<MainPageList />}></Route>
22+
<Route path="/list/detail/:id" element={<DetailPage />}></Route>
23+
<Route path="/map" element={<MapPage />}></Route>
2224
</Routes>
2325
</div>
24-
</BrowserRouter>
26+
</BrowserRouter>
2527
</div>
2628
);
2729
}

‎thisable/src/components/MainPage/MainPageList.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import React, { useState, useEffect } from "react";
2+
import { Link } from "react-router-dom";
23
import { getPlaceList } from "../../services/user.service";
34
import PlaceInfo from "../MapPage/PlaceInfo";
45
import PaginationView from "./PaginationView";
@@ -30,6 +31,9 @@ function MainPageList() {
3031

3132
return (
3233
<div>
34+
<Link to="/" style={{ textDecoration: "none", color: "black" }}>
35+
<div className="mapViewBtn">지도 보기</div>
36+
</Link>
3337
{renderPlaces}
3438
<PaginationView page={places} handleCallback={handleCallback} />
3539
</div>

‎thisable/src/components/MainPage/ModalView.js‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import React, { useState } from "react";
2+
import { Modal } from "react-bootstrap";
3+
import DetailPage from "../DetailPage/DetailPage";
4+
import PlaceInfo from "../MapPage/PlaceInfo";
5+
6+
function ModalView({ info }) {
7+
const [modalShow, setModalShow] = useState(false);
8+
9+
return (
10+
<>
11+
<div onClick={() => setModalShow(true)} className="mapModalMobile">
12+
{PlaceInfo(info)}
13+
</div>
14+
<Modal show={modalShow} onHide={() => setModalShow(false)}>
15+
<Modal.Header closeButton />
16+
<Modal.Body>
17+
<DetailPage />
18+
</Modal.Body>
19+
</Modal>
20+
</>
21+
);
22+
}
23+
24+
export default ModalView;

‎thisable/src/components/MapPage/MapPage.css‎

Lines changed: 30 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -25,12 +25,34 @@
2525
box-shadow: 0 4px 4px rgba(0, 0, 0, 0.3);
2626
}
2727

28+
.mapViewBtn {
29+
display: none;
30+
}
31+
.mapModalMobile {
32+
display: none;
33+
}
2834
@media screen and (max-width: 768px) {
35+
.mapViewBtn {
36+
background-color: white;
37+
display: flex;
38+
justify-content: center;
39+
padding: 8px 22px;
40+
width: 200px;
41+
left: 0;
42+
right: 0;
43+
margin: 0 auto;
44+
position: fixed;
45+
bottom: 60px;
46+
cursor: pointer;
47+
font-weight: bold;
48+
border-radius: 15px;
49+
box-shadow: 0 4px 4px rgba(0, 0, 0, 0.7);
50+
}
2951
.listViewBtn {
3052
background-color: white;
3153
display: flex;
3254
justify-content: center;
33-
margin-bottom: 15px;
55+
margin-bottom: 60px;
3456
padding: 8px 22px;
3557
width: 200px;
3658
position: relative;
@@ -39,21 +61,14 @@
3961
border-radius: 15px;
4062
box-shadow: 0 4px 4px rgba(0, 0, 0, 0.7);
4163
}
42-
}
43-
.listViewBtn {
44-
background-color: white;
45-
display: flex;
46-
justify-content: center;
47-
margin-bottom: 50px;
48-
padding: 8px 22px;
49-
width: 200px;
50-
position: relative;
51-
cursor: pointer;
52-
font-weight: bold;
53-
border-radius: 15px;
54-
box-shadow: 0 4px 4px rgba(0, 0, 0, 0.7);
64+
.mapModalMobile {
65+
display: flex;
66+
}
67+
.mapModalPc {
68+
display: none;
69+
}
5570
}
5671

5772
.buttonicon {
5873
width: 20;
59-
}
74+
}

‎thisable/src/components/MapPage/MapPage.js‎

Lines changed: 59 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import slopeImg from "../../assets/images/slope.svg";
1414
import chargerImg from "../../assets/images/charger.svg";
1515
import toiletImg from "../../assets/images/toilet.svg";
1616
import elevatorImg from "../../assets/images/elevator.svg";
17+
import ModalView from "../MainPage/ModalView";
1718
import cafe from "../../assets/images/cafe.svg";
1819
import business from "../../assets/images/business.svg";
1920
import culture from "../../assets/images/culture.svg";
@@ -31,12 +32,12 @@ function MapPage() {
3132
if (!navigator.geolocation) {
3233
console.log("Geolocation is not supported by your browser");
3334
} else {
34-
console.log("Locating...");
35+
// console.log("Locating...");
3536
navigator.geolocation.watchPosition(
3637
(position) => {
3738
setLat(position.coords.latitude);
3839
setLng(position.coords.longitude);
39-
//console.log("lat:", lat, "lng:", lng);
40+
// console.log("lat:", lat, "lng:", lng);
4041
},
4142
() => {
4243
console.log("Unable to retrieve your location");
@@ -90,27 +91,59 @@ function MapPage() {
9091
}
9192

9293
const renderMap = () => {
93-
return <GoogleMap
94-
mapContainerStyle={mapStyle}
95-
zoom={18}
96-
center={{lat: +lat, lng: +lng}}
97-
onClick={() => setActiveMarker(null)}>
98-
<div className='btnCont'>
99-
<div className='filterBtnCont'>
100-
<div onClick={() => setCategory("icon1")}><img width={20} style={{marginRight:"0.5rem"}} src={toiletImg}></img>장애인 화장실</div>
101-
<div onClick={() => setCategory("icon2")}><img width={20} style={{marginRight:"0.5rem"}} src={chargerImg}></img>휠체어 충전기</div>
102-
<div onClick={() => setCategory("icon3")}><img width={20} style={{marginRight:"0.5rem"}} src={elevatorImg}></img>엘리베이터</div>
103-
<div onClick={() => setCategory("icon4")}><img width={20} style={{marginRight:"0.5rem"}} src={slopeImg}></img>슬로프</div>
104-
<div onClick={() => setCategory("")}>모두 보기</div>
94+
return (
95+
<GoogleMap
96+
mapContainerStyle={mapStyle}
97+
zoom={18}
98+
center={{ lat: +lat, lng: +lng }}
99+
onClick={() => setActiveMarker(null)}
100+
>
101+
<div className="btnCont">
102+
<div className="filterBtnCont">
103+
<div onClick={() => setCategory("icon1")}>
104+
<img
105+
width={20}
106+
style={{ marginRight: "0.5rem" }}
107+
src={toiletImg}
108+
></img>
109+
장애인 화장실
110+
</div>
111+
<div onClick={() => setCategory("icon2")}>
112+
<img
113+
width={20}
114+
style={{ marginRight: "0.5rem" }}
115+
src={chargerImg}
116+
></img>
117+
휠체어 충전기
118+
</div>
119+
<div onClick={() => setCategory("icon3")}>
120+
<img
121+
width={20}
122+
style={{ marginRight: "0.5rem" }}
123+
src={elevatorImg}
124+
></img>
125+
엘리베이터
126+
</div>
127+
<div onClick={() => setCategory("icon4")}>
128+
<img
129+
width={20}
130+
style={{ marginRight: "0.5rem" }}
131+
src={slopeImg}
132+
></img>
133+
슬로프
134+
</div>
135+
<div onClick={() => setCategory("")}>모두 보기</div>
136+
</div>
137+
<Link to="/list" style={{ textDecoration: "none", color: "black" }}>
138+
<div className="listViewBtn">리스트 보기</div>
139+
</Link>
105140
</div>
106-
<Link to="/" style={{ textDecoration: "none", color: "black" }}>
107-
<div className="listViewBtn">리스트 보기</div>
108-
</Link>
109-
</div>
110-
{renderMarker}
111-
<Marker position={{lat: +lat, lng:+lng}} icon={myself}/>
112-
</GoogleMap>
113-
}
141+
{renderMarker}
142+
<Marker position={{ lat: +lat, lng: +lng }} />;
143+
</GoogleMap>
144+
);
145+
};
146+
114147

115148
const renderMarker =
116149
places &&
@@ -136,7 +169,10 @@ function MapPage() {
136169
>
137170
{activeMarker === place._id ? (
138171
<InfoWindow onCloseClick={() => setActiveMarker(null)}>
139-
{PlaceInfo(place)}
172+
<>
173+
<ModalView info={place} />
174+
<div className="mapModalPc">{PlaceInfo(place)}</div>
175+
</>
140176
</InfoWindow>
141177
) : null}
142178
</Marker>

0 commit comments

Comments
 (0)