Merge pull request #61 from coconut-thisABLE/feat/#55

ui change

Author: heleneunji

thisable/src/components/DetailPage/DetailPage.css

@@ -13,6 +13,8 @@
 .placenametype {
   display: flex;
   flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: center;
   align-items: flex-end;
   margin-top: 1rem;
 }
@@ -54,7 +56,10 @@
   display: flex;
   flex-direction: column;
   align-content: center;
-  width: 70px;
+}
+
+.placeicon > img {
+  width: 70px
 }
 
 .placeiconname {
@@ -183,6 +188,10 @@
 
 .review {
   margin-top: 1rem;
+  padding-bottom: 1rem;
+  border-bottom: #9d9d9d;
+  border-bottom-width: 0.08rem;
+  border-bottom-style: solid;
 }
 
 .reviewtop {
@@ -258,3 +267,30 @@
   font-weight: bold;
   margin-left: 0.6rem;
 }
+
+.backweb {
+  margin-top: 1rem;
+  margin-left: 1rem;
+  color: black;
+  text-decoration: none;
+}
+
+@media screen and (max-width: 768px) {
+  .backweb {
+    display: none;
+  }
+
+  .backmobile {
+    margin-top: 1rem;
+    margin-left: 1rem;
+    color: black;
+    text-decoration: none;
+  }
+}
+
+@media screen and (min-width: 769px) {
+
+  .backmobile {
+    display: none;
+  }
+}

thisable/src/components/DetailPage/DetailPage.js

@@ -1,6 +1,5 @@
 import React, { useState, useEffect } from "react";
 import { useParams } from "react-router-dom";
-import MapPage from "../MapPage/MapPage";
 import ReviewPage from "./ReviewPage";
 import ToggleView from "./ToggleView";
 import { getPlaceDetail, getReviewAverage } from "../../services/user.service";
@@ -10,6 +9,7 @@ import toiletImg from "../../assets/images/toilet.svg";
 import elevatorImg from "../../assets/images/elevator.svg";
 import "./DetailPage.css";
 import { Rating } from "react-simple-star-rating";
+import {Link} from 'react-router-dom';
 
 function DetailPage() {
   const [place, setPlace] = useState("");
@@ -25,6 +25,8 @@ function DetailPage() {
 
   return (
     <div className="maincontainer">
+      <Link to={`/`} media="screen and (min-width:768px) and (max-width: 1042px)" className="backweb">◀ 뒤로가기</Link>
+      <Link to={`/list`} media="screen and (min-width:0px) and (max-width: 768px)" className="backmobile">◀ 리스트로 가기</Link>
       <div className="placedetail">
         <div className="placenametype">
           <h5 className="placename">{place.name}</h5>

thisable/src/components/MapPage/MapPage.js

@@ -139,7 +139,7 @@ function MapPage() {
           </Link>
         </div>
         {renderMarker}
-        <Marker position={{ lat: +lat, lng: +lng }} />;
+        <Marker position={{ lat: +lat, lng: +lng }} icon={myself}/>;
       </GoogleMap>
     );
   };

thisable/src/components/NavBar/NavBar.css

@@ -54,7 +54,7 @@
 
 .nav-button {
   text-decoration: none;
-  font-size: 15px;
+  font-size: 10px;
   color: black;
   float: left;
   margin-right: 1rem;
@@ -79,3 +79,19 @@
   line-height: 270%;
   align-items: center;
 }
+
+
+
+
+@media screen and (max-width: 768px) {
+  .webnav {
+    display: none;
+  }
+}
+
+@media screen and (min-width: 769px) {
+
+  .mobilenav {
+    display: none;
+  }
+}

thisable/src/components/NavBar/NavBar.js

@@ -11,8 +11,10 @@ function NavBar() {
           <img className="logoimg" alt="logo" src={logoimg}></img>
         </Nav>
         <Nav className="nav-button">
-          <Nav.Link href="/">즐겨찾기</Nav.Link>
-          <Nav.Link href="/videoinput">마이페이지</Nav.Link>
+          <Nav.Link href="/" media="screen and (min-width:768px) and (max-width: 1042px)" className="webnav">지도 보기</Nav.Link>
+          <Nav.Link href="/" media="screen and (min-width:768px) and (max-width: 1042px)" className="webnav">리스트 보기</Nav.Link>
+          <Nav.Link href="/" media="screen and (min-width:0px) and (max-width: 768px)" className="mobilenav">지도 보기</Nav.Link>
+          <Nav.Link href="/list" media="screen and (min-width:0px) and (max-width: 768px)" className="mobilenav">리스트 보기</Nav.Link>
         </Nav>
       </Navbar>
     </div>