From 74aafd3870d4b8461c5e37b9456b8d141b695127 Mon Sep 17 00:00:00 2001
From: seohyun319 <tjguselly0319@gmail.com>
Date: Sat, 26 Mar 2022 18:44:24 +0900
Subject: [PATCH 1/9] FEAT: set review sorting

---
 .../src/components/DetailPage/DetailPage.css  |  9 +++++++
 .../src/components/DetailPage/ReviewPage.js   | 25 +++++++++++++------
 thisable/src/services/user.service.js         | 10 +++++---
 3 files changed, 32 insertions(+), 12 deletions(-)

diff --git a/thisable/src/components/DetailPage/DetailPage.css b/thisable/src/components/DetailPage/DetailPage.css
index d9b6e96..0e6f33c 100644
--- a/thisable/src/components/DetailPage/DetailPage.css
+++ b/thisable/src/components/DetailPage/DetailPage.css
@@ -168,6 +168,15 @@
 
 .reviewlistsort {
   font-size: 1rem;
+  display: flex;
+}
+
+.reviewlistsort > div {
+  cursor: pointer;
+}
+
+.reviewlistsort > div:last-child {
+  margin-left: 5px;
 }
 
 .review {
diff --git a/thisable/src/components/DetailPage/ReviewPage.js b/thisable/src/components/DetailPage/ReviewPage.js
index aa985bb..cb63af8 100644
--- a/thisable/src/components/DetailPage/ReviewPage.js
+++ b/thisable/src/components/DetailPage/ReviewPage.js
@@ -13,6 +13,7 @@ function ReviewPage({ locationId }) {
   const [reviews, setReviews] = useState("");
   const [rating, setRating] = useState(0);
   const [reviewNum, setReviewNum] = useState("");
+  const [sort, setSort] = useState("recommended");
 
   const handleRating = (rate) => {
     setRating(rate / 20);
@@ -20,11 +21,11 @@ function ReviewPage({ locationId }) {
   };
 
   useEffect(async () => {
-    const reviewList = await getReview(locationId);
+    const reviewList = await getReview(locationId, sort);
     const averageNum = await getReviewAverage(locationId);
     setReviews(reviewList);
     setReviewNum(averageNum.count);
-  }, [locationId]);
+  }, [locationId, sort]);
 
   const [inputValue, setInputValue] = useState("");
   console.log("input: ", inputValue);
@@ -40,9 +41,9 @@ function ReviewPage({ locationId }) {
   const renderReviews =
     reviews &&
     reviews.response.map((review) => {
-      var good = review.good
-      var bad = review.bad
-      
+      var good = review.good;
+      var bad = review.bad;
+
       return (
         <div className="review">
           <div className="reviewtop">
@@ -55,10 +56,15 @@ function ReviewPage({ locationId }) {
           <div className="reviewcontent">{review.detail}</div>
           <div className="helpbuttoncontainer">
             <button className="helpbutton">
-              <div onClick={() => postReviewRecommend(review._id) && setRecommend(good+1)}>
+              <div
+                onClick={() =>
+                  postReviewRecommend(review._id) && setRecommend(good + 1)
+                }
+              >
                 도움이 돼요
               </div>
-              <div className="helpbuttonnum">{recommend}</div>
+              {/* <div className="helpbuttonnum">{recommend}</div> */}
+              <div className="helpbuttonnum">{review.good}</div>
             </button>
             <button className="helpbutton">
               <div onClick={() => postReviewDiscourage(review._id)}>
@@ -94,7 +100,10 @@ function ReviewPage({ locationId }) {
       <div className="reviewlist">
         <div className="reviewlisttitle">
           <div className="reviewlistnum">후기 {reviewNum}개</div>
-          <div className="reviewlistsort">사용자 추천순 | 최근 작성순</div>
+          <div className="reviewlistsort">
+            <div onClick={() => setSort("recommended")}>사용자 추천순 |</div>
+            <div onClick={() => setSort("createdAt")}>최근 작성순</div>
+          </div>
         </div>
         {renderReviews}
       </div>
diff --git a/thisable/src/services/user.service.js b/thisable/src/services/user.service.js
index 84e889b..b30e2aa 100644
--- a/thisable/src/services/user.service.js
+++ b/thisable/src/services/user.service.js
@@ -22,10 +22,12 @@ export const getPlaceDetailCharger = (id) => {
   });
 };
 
-export const getReview = (id) => {
-  return axios.get(baseUrl + "/" + id + "/review").then((response) => {
-    return response.data;
-  });
+export const getReview = (id, sort) => {
+  return axios
+    .get(baseUrl + "/" + id + "/review?sort=" + sort)
+    .then((response) => {
+      return response.data;
+    });
 };
 
 export const getReviewAverage = (id) => {

From bec23ed627c66b60675fc8113167e1a1353ca918 Mon Sep 17 00:00:00 2001
From: seohyun319 <tjguselly0319@gmail.com>
Date: Sat, 26 Mar 2022 19:07:47 +0900
Subject: [PATCH 2/9] FEAT: review DateTimeFormat

---
 thisable/src/components/DetailPage/ReviewPage.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/thisable/src/components/DetailPage/ReviewPage.js b/thisable/src/components/DetailPage/ReviewPage.js
index cb63af8..078d0c1 100644
--- a/thisable/src/components/DetailPage/ReviewPage.js
+++ b/thisable/src/components/DetailPage/ReviewPage.js
@@ -51,7 +51,9 @@ function ReviewPage({ locationId }) {
               <Rating ratingValue={review.star * 20} readonly />
               <div className="reviewuser">{review.userType}</div>
             </div>
-            <div className="reviewdate">{review.createdAt}</div>
+            <div className="reviewdate">
+              {review.createdAt.replace("T", " ").substring(0, 10)}
+            </div>
           </div>
           <div className="reviewcontent">{review.detail}</div>
           <div className="helpbuttoncontainer">

From 4d64270e449a866eb0a2cfb635c44f703bb85dca Mon Sep 17 00:00:00 2001
From: heleneunji <heleneunji@gmail.com>
Date: Sat, 26 Mar 2022 19:24:55 +0900
Subject: [PATCH 3/9] fix review list star size

---
 thisable/src/components/DetailPage/DetailPage.css |  2 ++
 thisable/src/components/DetailPage/DetailPage.js  |  4 +++-
 thisable/src/components/DetailPage/ReviewPage.js  | 10 +++++++++-
 3 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/thisable/src/components/DetailPage/DetailPage.css b/thisable/src/components/DetailPage/DetailPage.css
index d9b6e96..cd8846e 100644
--- a/thisable/src/components/DetailPage/DetailPage.css
+++ b/thisable/src/components/DetailPage/DetailPage.css
@@ -203,6 +203,8 @@
 .reviewcontent {
   font-size: 1rem;
   align-items: center;
+  margin-left: 0.5rem;
+  margin-top: 0.5rem;
 }
 
 .helpbuttoncontainer {
diff --git a/thisable/src/components/DetailPage/DetailPage.js b/thisable/src/components/DetailPage/DetailPage.js
index b87d276..e3dc978 100644
--- a/thisable/src/components/DetailPage/DetailPage.js
+++ b/thisable/src/components/DetailPage/DetailPage.js
@@ -9,6 +9,7 @@ import chargerImg from "../../assets/images/charger.svg";
 import toiletImg from "../../assets/images/toilet.svg";
 import elevatorImg from "../../assets/images/elevator.svg";
 import "./DetailPage.css";
+import { Rating } from "react-simple-star-rating";
 
 function DetailPage() {
   const [place, setPlace] = useState("");
@@ -31,7 +32,8 @@ function DetailPage() {
         </div>
         <div className="placeaddress">{place.address}</div>
         <div className="placerate">
-          {reviewCount.average} ({reviewCount.count})
+        <Rating ratingValue={reviewCount.average * 20} readonly />
+         ({reviewCount.count})
         </div>
         <div className="placeiconlist">
           {place.isToiletExists && (
diff --git a/thisable/src/components/DetailPage/ReviewPage.js b/thisable/src/components/DetailPage/ReviewPage.js
index aa985bb..2c530d5 100644
--- a/thisable/src/components/DetailPage/ReviewPage.js
+++ b/thisable/src/components/DetailPage/ReviewPage.js
@@ -47,7 +47,7 @@ function ReviewPage({ locationId }) {
         <div className="review">
           <div className="reviewtop">
             <div className="reviewtopleft">
-              <Rating ratingValue={review.star * 20} readonly />
+              <Rating ratingValue={review.star * 20} readonly size={20,20}/>
               <div className="reviewuser">{review.userType}</div>
             </div>
             <div className="reviewdate">{review.createdAt}</div>
@@ -78,6 +78,14 @@ function ReviewPage({ locationId }) {
           <div className="reviewtitle">후기를 남겨주세요</div>
           <Rating onClick={handleRating} ratingValue={rating} />
         </div>
+        <div>
+          <input type="radio" name="radio-group" value="2" />
+          <label>장애인 이용자</label>
+          <input type="radio" name="radio-group" value="2" />
+          <label>비장애인 이용자</label>
+          <input type="radio" name="radio-group" value="1" defaultChecked />
+          <label>익명</label>
+        </div>
         <textarea
           className="reviewinput"
           onChange={(event) => setInputValue(event.target.value)}

From d088de86d2e6535cf12a7af862eef7e39aa82fb6 Mon Sep 17 00:00:00 2001
From: heleneunji <heleneunji@gmail.com>
Date: Sat, 26 Mar 2022 22:06:25 +0900
Subject: [PATCH 4/9] fix reviewpage ui

---
 thisable/src/assets/images/thumbs_down.svg    |  3 ++
 thisable/src/assets/images/thumbs_up.svg      | 10 +++++++
 .../src/components/DetailPage/DetailPage.css  | 29 +++++++++++++++----
 .../src/components/DetailPage/ReviewPage.js   | 29 ++++++++++++-------
 thisable/src/services/user.service.js         |  3 +-
 5 files changed, 56 insertions(+), 18 deletions(-)
 create mode 100644 thisable/src/assets/images/thumbs_down.svg
 create mode 100644 thisable/src/assets/images/thumbs_up.svg

diff --git a/thisable/src/assets/images/thumbs_down.svg b/thisable/src/assets/images/thumbs_down.svg
new file mode 100644
index 0000000..e1eed21
--- /dev/null
+++ b/thisable/src/assets/images/thumbs_down.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.864 15.674C7.908 15.914 7.021 15.19 6.956 14.254C6.884 13.204 6.726 12.239 6.528 11.664C6.403 11.304 6.049 10.652 5.488 10.026C4.931 9.402 4.206 8.847 3.357 8.616C2.685 8.432 2 7.85 2 7V3C2 2.155 2.682 1.536 3.448 1.454C4.518 1.341 5.012 1.039 5.516 0.731L5.564 0.702C5.836 0.536 6.142 0.353 6.534 0.218C6.931 0.08 7.395 0 8 0H11.5C12.437 0 13.099 0.478 13.434 1.064C13.598 1.351 13.688 1.671 13.688 1.977C13.688 2.129 13.665 2.289 13.611 2.441C13.812 2.703 13.991 3.018 14.099 3.341C14.209 3.671 14.271 4.103 14.103 4.491C14.172 4.621 14.223 4.759 14.262 4.894C14.339 5.164 14.375 5.461 14.375 5.75C14.375 6.039 14.339 6.336 14.262 6.606C14.227 6.726 14.182 6.85 14.124 6.969C14.518 7.54 14.542 8.169 14.358 8.702C14.152 9.294 13.676 9.802 13.158 9.974C12.311 10.257 11.355 10.25 10.642 10.185C10.494 10.1717 10.3463 10.155 10.199 10.135C10.5461 11.6209 10.5248 13.1692 10.137 14.645C9.999 15.153 9.587 15.493 9.125 15.609L8.864 15.674ZM11.5 1H8C7.49 1 7.137 1.068 6.86 1.163C6.579 1.26 6.354 1.392 6.084 1.556L6.044 1.581C5.489 1.919 4.846 2.311 3.554 2.449C3.221 2.484 3 2.739 3 2.999V7C3 7.255 3.226 7.543 3.62 7.65C4.715 7.95 5.597 8.647 6.234 9.359C6.869 10.069 7.298 10.834 7.472 11.336C7.715 12.036 7.879 13.104 7.954 14.186C7.979 14.548 8.314 14.781 8.621 14.704L8.883 14.639C9.043 14.599 9.141 14.495 9.171 14.384C9.57958 12.8277 9.52923 11.1864 9.026 9.658C8.99776 9.57307 8.99284 9.48212 9.01175 9.39464C9.03065 9.30716 9.07269 9.22635 9.13348 9.16066C9.19427 9.09497 9.27157 9.0468 9.35732 9.02118C9.44308 8.99556 9.53414 8.99342 9.621 9.015H9.624L9.638 9.019L9.696 9.032C10.038 9.10461 10.3839 9.15703 10.732 9.189C11.395 9.249 12.189 9.243 12.842 9.026C13.017 8.967 13.292 8.725 13.412 8.375C13.519 8.067 13.499 7.705 13.146 7.354L12.793 7L13.146 6.646C13.189 6.604 13.251 6.506 13.3 6.331C13.348 6.164 13.375 5.961 13.375 5.75C13.375 5.539 13.348 5.336 13.3 5.169C13.25 4.995 13.189 4.896 13.146 4.854L12.793 4.5L13.146 4.146C13.193 4.099 13.255 3.97 13.151 3.658C13.0425 3.35677 12.8702 3.08253 12.646 2.854L12.293 2.5L12.646 2.146C12.652 2.141 12.687 2.096 12.687 1.976C12.6824 1.82966 12.6408 1.68688 12.566 1.561C12.4 1.272 12.063 1 11.5 1Z" fill="black"/>
+</svg>
diff --git a/thisable/src/assets/images/thumbs_up.svg b/thisable/src/assets/images/thumbs_up.svg
new file mode 100644
index 0000000..860b520
--- /dev/null
+++ b/thisable/src/assets/images/thumbs_up.svg
@@ -0,0 +1,10 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_273_3)">
+<path d="M8.864 0.0460003C7.908 -0.193 7.02 0.53 6.956 1.466C6.884 2.517 6.726 3.482 6.528 4.056C6.403 4.416 6.049 5.069 5.488 5.695C4.931 6.318 4.206 6.873 3.357 7.105C2.685 7.288 2 7.87 2 8.72V12.721C2 13.566 2.682 14.185 3.448 14.266C4.518 14.38 5.012 14.681 5.516 14.989L5.564 15.019C5.836 15.184 6.142 15.367 6.534 15.503C6.931 15.639 7.395 15.72 8 15.72H11.5C12.437 15.72 13.099 15.243 13.434 14.656C13.5959 14.379 13.6834 14.0648 13.688 13.744C13.688 13.592 13.665 13.432 13.611 13.28C13.812 13.017 13.991 12.702 14.099 12.379C14.209 12.049 14.271 11.617 14.103 11.23C14.172 11.1 14.223 10.961 14.262 10.827C14.339 10.557 14.375 10.259 14.375 9.97C14.375 9.682 14.339 9.385 14.262 9.114C14.227 8.98942 14.1808 8.86825 14.124 8.752C14.2991 8.50287 14.4118 8.21531 14.4525 7.91354C14.4932 7.61177 14.4608 7.30463 14.358 7.018C14.152 6.426 13.676 5.918 13.158 5.746C12.311 5.464 11.355 5.47 10.642 5.535C10.494 5.54832 10.3463 5.56499 10.199 5.585C10.5459 4.09939 10.5246 2.55151 10.137 1.076C10.0696 0.839589 9.9402 0.625485 9.76228 0.45583C9.58436 0.286175 9.36435 0.167128 9.125 0.111L8.864 0.0460003ZM11.5 14.721H8C7.49 14.721 7.137 14.652 6.86 14.557C6.579 14.46 6.354 14.329 6.084 14.164L6.044 14.14C5.489 13.801 4.846 13.409 3.554 13.272C3.221 13.236 3 12.982 3 12.722V8.72C3 8.466 3.226 8.177 3.62 8.07C4.715 7.77 5.597 7.074 6.234 6.362C6.869 5.652 7.298 4.887 7.472 4.384C7.715 3.684 7.879 2.616 7.954 1.534C7.979 1.172 8.314 0.94 8.621 1.016L8.883 1.082C9.043 1.122 9.141 1.225 9.171 1.337C9.57939 2.89302 9.52903 4.53395 9.026 6.062C8.99753 6.14699 8.99242 6.23807 9.01122 6.3257C9.03002 6.41334 9.07203 6.49431 9.13285 6.56014C9.19368 6.62598 9.27108 6.67425 9.35695 6.69991C9.44283 6.72557 9.53403 6.72767 9.621 6.706L9.624 6.705L9.638 6.702L9.696 6.688C10.038 6.61538 10.3839 6.56296 10.732 6.531C11.395 6.471 12.189 6.477 12.842 6.695C13.017 6.753 13.292 6.995 13.412 7.345C13.519 7.653 13.499 8.015 13.146 8.367L12.793 8.72L13.146 9.074C13.189 9.117 13.251 9.215 13.3 9.389C13.348 9.556 13.375 9.759 13.375 9.97C13.375 10.182 13.348 10.384 13.3 10.552C13.25 10.726 13.189 10.824 13.146 10.867L12.793 11.22L13.146 11.574C13.193 11.621 13.255 11.751 13.151 12.062C13.0426 12.3636 12.8704 12.6382 12.646 12.867L12.293 13.22L12.646 13.574C12.652 13.579 12.687 13.624 12.687 13.744C12.6826 13.8907 12.6409 14.0338 12.566 14.16C12.401 14.448 12.063 14.72 11.5 14.72V14.721Z" fill="black"/>
+</g>
+<defs>
+<clipPath id="clip0_273_3">
+<rect width="16" height="16" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/thisable/src/components/DetailPage/DetailPage.css b/thisable/src/components/DetailPage/DetailPage.css
index 2a9720f..b4b3725 100644
--- a/thisable/src/components/DetailPage/DetailPage.css
+++ b/thisable/src/components/DetailPage/DetailPage.css
@@ -112,12 +112,14 @@
 .reviewinputtop {
   display: flex;
   flex-direction: row;
-  justify-content: space-evenly;
-  align-items: flex-end;
+  justify-content: space-around;
+  align-items: center;
+  margin-bottom: 1rem;
 }
 
 .reviewtitle {
-  font-size: 1rem;
+  font-size: 1.2rem;
+  font-weight: bold;
 }
 
 .reviewinputstar {
@@ -186,6 +188,7 @@
 .reviewtop {
   display: flex;
   justify-content: space-between;
+  align-items: center;
 }
 
 .reviewtopleft {
@@ -199,9 +202,17 @@
   margin-right: 1rem;
 }
 
+.userinfo {
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+}
+
 .reviewuser {
   position: relative;
   font-size: 0.9rem;
+  margin-left: 0.5rem;
+  color: #f0a044;
 }
 
 .reviewdate {
@@ -224,9 +235,9 @@
 .helpbutton {
   display: flex;
   font-weight: bold;
-  font-size: 0.5rem;
+  font-size: 0.8rem;
   margin-top: 1rem;
-  height: 1.3rem;
+  height: 1.7rem;
   align-items: center;
   border-radius: 10px;
   border-color: #f0a044;
@@ -235,9 +246,15 @@
   padding-right: 1rem;
 }
 
+.buttondisplay {
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+}
+
 .helpbuttonnum {
   color: #cb3267;
-  font-size: 0.8rem;
+  font-size: 01rem;
   font-weight: bold;
   margin-left: 0.6rem;
 }
diff --git a/thisable/src/components/DetailPage/ReviewPage.js b/thisable/src/components/DetailPage/ReviewPage.js
index 98c3e5b..7214e01 100644
--- a/thisable/src/components/DetailPage/ReviewPage.js
+++ b/thisable/src/components/DetailPage/ReviewPage.js
@@ -8,12 +8,15 @@ import {
   postReviewRecommend,
   postReviewDiscourage,
 } from "../../services/user.service";
+import thumbsup from "../../assets/images/thumbs_up.svg"
+import thumbsdown from "../../assets/images/thumbs_down.svg"
 
 function ReviewPage({ locationId }) {
   const [reviews, setReviews] = useState("");
   const [rating, setRating] = useState(0);
   const [reviewNum, setReviewNum] = useState("");
   const [sort, setSort] = useState("recommended");
+  const [userType, setUserType] = useState("anonymous");
 
   const handleRating = (rate) => {
     setRating(rate / 20);
@@ -48,7 +51,7 @@ function ReviewPage({ locationId }) {
         <div className="review">
           <div className="reviewtop">
             <div className="reviewtopleft">
-              <Rating ratingValue={review.star * 20} readonly size={20,20}/>
+              <Rating ratingValue={review.star * 20} readonly size={25}/>
               <div className="reviewuser">{review.userType}</div>
             </div>
             <div className="reviewdate">
@@ -58,18 +61,21 @@ function ReviewPage({ locationId }) {
           <div className="reviewcontent">{review.detail}</div>
           <div className="helpbuttoncontainer">
             <button className="helpbutton">
-              <div
+              <div className="buttondisplay"
                 onClick={() =>
                   postReviewRecommend(review._id) && setRecommend(good + 1)
                 }
               >
+                <img src={thumbsup} style={{width:"1rem", marginRight:"0.4rem", marginTop:"0.3rem", marginBottom:"0.3rem"}}></img>
                 도움이 돼요
               </div>
               {/* <div className="helpbuttonnum">{recommend}</div> */}
               <div className="helpbuttonnum">{review.good}</div>
             </button>
             <button className="helpbutton">
-              <div onClick={() => postReviewDiscourage(review._id)}>
+              <div  className="buttondisplay"
+              onClick={() => postReviewDiscourage(review._id)}>
+              <img src={thumbsdown} style={{width:"1rem", marginRight:"0.4rem", marginTop:"0.3rem", marginBottom:"0.3rem"}}></img>
                 도움이 안돼요
               </div>
               <div className="helpbuttonnum">{bad}</div>
@@ -83,15 +89,15 @@ function ReviewPage({ locationId }) {
     <div>
       <div className="reviewcontainer">
         <div className="reviewinputtop">
-          <div className="reviewtitle">후기를 남겨주세요</div>
+          <div className="reviewtitle">후기</div>
           <Rating onClick={handleRating} ratingValue={rating} />
         </div>
-        <div>
-          <input type="radio" name="radio-group" value="2" />
+        <div className="userinfo">
+          <input type="radio" name="radio-group" value="disabled" onClick={() => setUserType("disabled")}/>
           <label>장애인 이용자</label>
-          <input type="radio" name="radio-group" value="2" />
+          <input type="radio" name="radio-group" value="abled" onClick={() => setUserType("abled")}/>
           <label>비장애인 이용자</label>
-          <input type="radio" name="radio-group" value="1" defaultChecked />
+          <input type="radio" name="radio-group" value="anonymous" defaultChecked onClick={() => setUserType("anonymous")}/>
           <label>익명</label>
         </div>
         <textarea
@@ -102,7 +108,7 @@ function ReviewPage({ locationId }) {
         />
         <button
           className="reviewinputbutton"
-          onClick={() => postReview(locationId, inputValue, rating) && clear()}
+          onClick={() => postReview(userType, locationId, inputValue, rating) && clear()}
         >
           등록
         </button>
@@ -111,8 +117,9 @@ function ReviewPage({ locationId }) {
         <div className="reviewlisttitle">
           <div className="reviewlistnum">후기 {reviewNum}개</div>
           <div className="reviewlistsort">
-            <div onClick={() => setSort("recommended")}>사용자 추천순 |</div>
-            <div onClick={() => setSort("createdAt")}>최근 작성순</div>
+            <div onClick={() => setSort("recommended")} style={ sort == "recommended" ? {fontWeight:"bold"} : {fontWeight:"normal"}}>사용자 추천순</div>
+            <div>&nbsp;|</div>
+            <div onClick={() => setSort("createdAt")} style={ sort == "createdAt" ? {fontWeight:"bold"} : {fontWeight:"normal"}}>최근 작성순</div>
           </div>
         </div>
         {renderReviews}
diff --git a/thisable/src/services/user.service.js b/thisable/src/services/user.service.js
index b30e2aa..1fee2de 100644
--- a/thisable/src/services/user.service.js
+++ b/thisable/src/services/user.service.js
@@ -36,9 +36,10 @@ export const getReviewAverage = (id) => {
   });
 };
 
-export const postReview = (locationId, detail, star) => {
+export const postReview = (userType, locationId, detail, star) => {
   return axios
     .post(baseUrl + "/review", {
+      userType:userType,
       locationId: locationId,
       detail: detail,
       star: star,

From 667328babee22844ded248ddc08564b8a2f1ea5a Mon Sep 17 00:00:00 2001
From: seohyun319 <tjguselly0319@gmail.com>
Date: Sat, 26 Mar 2022 23:19:39 +0900
Subject: [PATCH 5/9] BUILD: set chatbot package

---
 thisable/package.json | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/thisable/package.json b/thisable/package.json
index ec6b9f5..427cd6f 100644
--- a/thisable/package.json
+++ b/thisable/package.json
@@ -8,7 +8,9 @@
     "@testing-library/jest-dom": "^5.16.2",
     "@testing-library/react": "^12.1.3",
     "@testing-library/user-event": "^13.5.0",
+    "antd": "^3.26.5",
     "axios": "^0.26.1",
+    "prop-types": "^15.7.2",
     "bootstrap": "^5.1.3",
     "dotenv": "^16.0.0",
     "geolocation": "^0.2.0",
@@ -16,11 +18,16 @@
     "react": "^17.0.2",
     "react-bootstrap": "^2.1.2",
     "react-dom": "^17.0.2",
+    "react-redux": "^7.1.3",
     "react-geolocated": "^3.2.0",
     "react-router-dom": "^6.2.2",
     "react-scripts": "5.0.0",
     "react-simple-star-rating": "^4.0.5",
     "react-star-ratings": "^2.3.0",
+    "redux": "^4.0.5",
+    "redux-promise": "^0.6.0",
+    "redux-thunk": "^2.3.0",
+    "uuid": "^3.3.2",
     "web-vitals": "^2.1.4"
   },
   "scripts": {
@@ -46,5 +53,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "http-proxy-middleware": "^0.19.1"
   }
 }

From f5ff9043e07f370c8f1e6b9c6228733eb5fa2d2e Mon Sep 17 00:00:00 2001
From: seohyun319 <tjguselly0319@gmail.com>
Date: Sat, 26 Mar 2022 23:47:21 +0900
Subject: [PATCH 6/9] FEAT: add new file about chatbot, reducers

---
 thisable/src/_actions/message_actions.js      |   8 +
 thisable/src/_actions/types.js                |   1 +
 thisable/src/_reducers/index.js               |   8 +
 thisable/src/_reducers/message_reducer.js     |  13 ++
 thisable/src/components/Chatbot/Chatbot.js    | 179 ++++++++++++++++++
 .../src/components/Chatbot/Sections/Card.js   |  36 ++++
 .../components/Chatbot/Sections/Message.js    |  19 ++
 thisable/src/serviceWorker.js                 | 135 +++++++++++++
 thisable/src/setupProxy.js                    |   5 +
 9 files changed, 404 insertions(+)
 create mode 100644 thisable/src/_actions/message_actions.js
 create mode 100644 thisable/src/_actions/types.js
 create mode 100644 thisable/src/_reducers/index.js
 create mode 100644 thisable/src/_reducers/message_reducer.js
 create mode 100644 thisable/src/components/Chatbot/Chatbot.js
 create mode 100644 thisable/src/components/Chatbot/Sections/Card.js
 create mode 100644 thisable/src/components/Chatbot/Sections/Message.js
 create mode 100644 thisable/src/serviceWorker.js
 create mode 100644 thisable/src/setupProxy.js

diff --git a/thisable/src/_actions/message_actions.js b/thisable/src/_actions/message_actions.js
new file mode 100644
index 0000000..79aa12b
--- /dev/null
+++ b/thisable/src/_actions/message_actions.js
@@ -0,0 +1,8 @@
+import { SAVE_MESSAGE } from "./types";
+
+export function saveMessage(dataToSubmit) {
+  return {
+    type: SAVE_MESSAGE,
+    payload: dataToSubmit,
+  };
+}
diff --git a/thisable/src/_actions/types.js b/thisable/src/_actions/types.js
new file mode 100644
index 0000000..96c94b5
--- /dev/null
+++ b/thisable/src/_actions/types.js
@@ -0,0 +1 @@
+export const SAVE_MESSAGE = "save_message";
diff --git a/thisable/src/_reducers/index.js b/thisable/src/_reducers/index.js
new file mode 100644
index 0000000..0ea56ac
--- /dev/null
+++ b/thisable/src/_reducers/index.js
@@ -0,0 +1,8 @@
+import { combineReducers } from "redux";
+import message from "./message_reducer";
+
+const rootReducer = combineReducers({
+  message,
+});
+
+export default rootReducer;
diff --git a/thisable/src/_reducers/message_reducer.js b/thisable/src/_reducers/message_reducer.js
new file mode 100644
index 0000000..c7421e6
--- /dev/null
+++ b/thisable/src/_reducers/message_reducer.js
@@ -0,0 +1,13 @@
+import { SAVE_MESSAGE } from "../_actions/types";
+
+export default function (state = { messages: [] }, action) {
+  switch (action.type) {
+    case SAVE_MESSAGE:
+      return {
+        ...state,
+        messages: state.messages.concat(action.payload),
+      };
+    default:
+      return state;
+  }
+}
diff --git a/thisable/src/components/Chatbot/Chatbot.js b/thisable/src/components/Chatbot/Chatbot.js
new file mode 100644
index 0000000..2a1948c
--- /dev/null
+++ b/thisable/src/components/Chatbot/Chatbot.js
@@ -0,0 +1,179 @@
+import React, { useEffect } from "react";
+import Axios from "axios";
+import { useDispatch, useSelector } from "react-redux";
+import { saveMessage } from "../../_actions/message_actions";
+import Message from "./Sections/Message";
+import { List, Icon, Avatar } from "antd";
+import Card from "./Sections/Card";
+
+function Chatbot() {
+  const dispatch = useDispatch();
+  const messagesFromRedux = useSelector((state) => state.message.messages);
+
+  useEffect(() => {
+    eventQuery("welcomeToMyWebsite");
+  }, []);
+
+  const textQuery = async (text) => {
+    //  First  Need to  take care of the message I sent
+    let conversation = {
+      who: "user",
+      content: {
+        text: {
+          text: text,
+        },
+      },
+    };
+
+    dispatch(saveMessage(conversation));
+    // console.log('text I sent', conversation)
+
+    // We need to take care of the message Chatbot sent
+    const textQueryVariables = {
+      text, //== text: text
+    };
+    try {
+      //I will send request to the textQuery ROUTE
+      const response = await Axios.post(
+        "/api/dialogflow/textQuery",
+        textQueryVariables
+      );
+
+      for (let content of response.data.fulfillmentMessages) {
+        conversation = {
+          who: "bot",
+          content: content,
+        };
+
+        dispatch(saveMessage(conversation));
+      }
+    } catch (error) {
+      conversation = {
+        who: "bot",
+        content: {
+          text: {
+            text: " Error just occured, please check the problem",
+          },
+        },
+      };
+      dispatch(saveMessage(conversation));
+    }
+  };
+
+  const eventQuery = async (event) => {
+    // We need to take care of the message Chatbot sent
+    const eventQueryVariables = {
+      event,
+    };
+    try {
+      //I will send request to the textQuery ROUTE
+      const response = await Axios.post(
+        "/api/dialogflow/eventQuery",
+        eventQueryVariables
+      );
+      for (let content of response.data.fulfillmentMessages) {
+        let conversation = {
+          who: "bot",
+          content: content,
+        };
+        dispatch(saveMessage(conversation));
+      }
+    } catch (error) {
+      let conversation = {
+        who: "bot",
+        content: {
+          text: {
+            text: " Error just occured, please check the problem",
+          },
+        },
+      };
+      dispatch(saveMessage(conversation));
+    }
+  };
+
+  const keyPressHanlder = (e) => {
+    if (e.key === "Enter") {
+      if (!e.target.value) {
+        return alert("you need to type somthing first");
+      }
+
+      //we will send request to text query route
+      textQuery(e.target.value);
+      e.target.value = "";
+    }
+  };
+
+  const renderCards = (cards) => {
+    return cards.map((card, i) => <Card key={i} cardInfo={card.structValue} />);
+  };
+
+  const renderOneMessage = (message, i) => {
+    console.log("message", message);
+    // we need to give some condition here to separate message kinds
+
+    // template for normal text
+    if (message.content && message.content.text && message.content.text.text) {
+      return (
+        <Message key={i} who={message.who} text={message.content.text.text} />
+      );
+    } else if (message.content && message.content.payload.fields.card) {
+      const AvatarSrc =
+        message.who === "bot" ? <Icon type="robot" /> : <Icon type="smile" />;
+
+      return (
+        <div>
+          <List.Item style={{ padding: "1rem" }}>
+            <List.Item.Meta
+              avatar={<Avatar icon={AvatarSrc} />}
+              title={message.who}
+              description={renderCards(
+                message.content.payload.fields.card.listValue.values
+              )}
+            />
+          </List.Item>
+        </div>
+      );
+    }
+    // template for card message
+  };
+
+  const renderMessage = (returnedMessages) => {
+    if (returnedMessages) {
+      return returnedMessages.map((message, i) => {
+        return renderOneMessage(message, i);
+      });
+    } else {
+      return null;
+    }
+  };
+
+  return (
+    <div
+      style={{
+        height: 450,
+        width: 450,
+        border: "5px solid black",
+        borderRadius: "7px",
+      }}
+    >
+      <div style={{ height: 390, width: "100%", overflow: "auto" }}>
+        {renderMessage(messagesFromRedux)}
+      </div>
+      <input
+        style={{
+          margin: 0,
+          width: "100%",
+          height: 50,
+          borderRadius: "1px",
+          padding: "5px",
+          fontSize: "1rem",
+        }}
+        placeholder="Send a message..."
+        onKeyPress={keyPressHanlder}
+        type="text"
+      />
+    </div>
+  );
+}
+
+export default Chatbot;
diff --git a/thisable/src/components/Chatbot/Sections/Card.js b/thisable/src/components/Chatbot/Sections/Card.js
new file mode 100644
index 0000000..bf4b33a
--- /dev/null
+++ b/thisable/src/components/Chatbot/Sections/Card.js
@@ -0,0 +1,36 @@
+import React from "react";
+import { Card, Icon } from "antd";
+
+const { Meta } = Card;
+
+function CardComponent(props) {
+  const cardwidth = props.cardInfo.fields.cardWidth.stringValue;
+  return (
+    <Card
+      style={{ width: "300px" }}
+      cover={
+        <a
+          target="_blank"
+          rel="noopener noreferrer"
+          href={props.cardInfo.fields.link.stringValue}
+        >
+          <img
+            alt={props.cardInfo.fields.description.stringValue}
+            src={props.cardInfo.fields.image.stringValue}
+            style={{ width: cardwidth, height: "150px", objectFit: "cover" }}
+          />
+        </a>
+      }
+      // actions={[
+      //         <Icon type="ellipsis" key="ellipsis" />
+      // ]}
+    >
+      <Meta
+        title={props.cardInfo.fields.stack.stringValue}
+        description={props.cardInfo.fields.description.stringValue}
+      />
+    </Card>
+  );
+}
+
+export default CardComponent;
diff --git a/thisable/src/components/Chatbot/Sections/Message.js b/thisable/src/components/Chatbot/Sections/Message.js
new file mode 100644
index 0000000..5f0a2f2
--- /dev/null
+++ b/thisable/src/components/Chatbot/Sections/Message.js
@@ -0,0 +1,19 @@
+import React from "react";
+import { List, Icon, Avatar } from "antd";
+
+function Message(props) {
+  const AvatarSrc =
+    props.who === "bot" ? <Icon type="robot" /> : <Icon type="smile" />;
+
+  return (
+    <List.Item style={{ padding: "1rem" }}>
+      <List.Item.Meta
+        avatar={<Avatar icon={AvatarSrc} />}
+        title={props.who}
+        description={props.text}
+      />
+    </List.Item>
+  );
+}
+
+export default Message;
diff --git a/thisable/src/serviceWorker.js b/thisable/src/serviceWorker.js
new file mode 100644
index 0000000..b719ab4
--- /dev/null
+++ b/thisable/src/serviceWorker.js
@@ -0,0 +1,135 @@
+// This optional code is used to register a service worker.
+// register() is not called by default.
+
+// This lets the app load faster on subsequent visits in production, and gives
+// it offline capabilities. However, it also means that developers (and users)
+// will only see deployed updates on subsequent visits to a page, after all the
+// existing tabs open on the page have been closed, since previously cached
+// resources are updated in the background.
+
+// To learn more about the benefits of this model and instructions on how to
+// opt-in, read https://bit.ly/CRA-PWA
+
+const isLocalhost = Boolean(
+  window.location.hostname === "localhost" ||
+    // [::1] is the IPv6 localhost address.
+    window.location.hostname === "[::1]" ||
+    // 127.0.0.1/8 is considered localhost for IPv4.
+    window.location.hostname.match(
+      /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
+    )
+);
+
+export function register(config) {
+  if (process.env.NODE_ENV === "production" && "serviceWorker" in navigator) {
+    // The URL constructor is available in all browsers that support SW.
+    const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
+    if (publicUrl.origin !== window.location.origin) {
+      // Our service worker won't work if PUBLIC_URL is on a different origin
+      // from what our page is served on. This might happen if a CDN is used to
+      // serve assets; see https://github.com/facebook/create-react-app/issues/2374
+      return;
+    }
+
+    window.addEventListener("load", () => {
+      const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
+
+      if (isLocalhost) {
+        // This is running on localhost. Let's check if a service worker still exists or not.
+        checkValidServiceWorker(swUrl, config);
+
+        // Add some additional logging to localhost, pointing developers to the
+        // service worker/PWA documentation.
+        navigator.serviceWorker.ready.then(() => {
+          console.log(
+            "This web app is being served cache-first by a service " +
+              "worker. To learn more, visit https://bit.ly/CRA-PWA"
+          );
+        });
+      } else {
+        // Is not localhost. Just register service worker
+        registerValidSW(swUrl, config);
+      }
+    });
+  }
+}
+
+function registerValidSW(swUrl, config) {
+  navigator.serviceWorker
+    .register(swUrl)
+    .then((registration) => {
+      registration.onupdatefound = () => {
+        const installingWorker = registration.installing;
+        if (installingWorker == null) {
+          return;
+        }
+        installingWorker.onstatechange = () => {
+          if (installingWorker.state === "installed") {
+            if (navigator.serviceWorker.controller) {
+              // At this point, the updated precached content has been fetched,
+              // but the previous service worker will still serve the older
+              // content until all client tabs are closed.
+              console.log(
+                "New content is available and will be used when all " +
+                  "tabs for this page are closed. See https://bit.ly/CRA-PWA."
+              );
+
+              // Execute callback
+              if (config && config.onUpdate) {
+                config.onUpdate(registration);
+              }
+            } else {
+              // At this point, everything has been precached.
+              // It's the perfect time to display a
+              // "Content is cached for offline use." message.
+              console.log("Content is cached for offline use.");
+
+              // Execute callback
+              if (config && config.onSuccess) {
+                config.onSuccess(registration);
+              }
+            }
+          }
+        };
+      };
+    })
+    .catch((error) => {
+      console.error("Error during service worker registration:", error);
+    });
+}
+
+function checkValidServiceWorker(swUrl, config) {
+  // Check if the service worker can be found. If it can't reload the page.
+  fetch(swUrl)
+    .then((response) => {
+      // Ensure service worker exists, and that we really are getting a JS file.
+      const contentType = response.headers.get("content-type");
+      if (
+        response.status === 404 ||
+        (contentType != null && contentType.indexOf("javascript") === -1)
+      ) {
+        // No service worker found. Probably a different app. Reload the page.
+        navigator.serviceWorker.ready.then((registration) => {
+          registration.unregister().then(() => {
+            window.location.reload();
+          });
+        });
+      } else {
+        // Service worker found. Proceed as normal.
+        registerValidSW(swUrl, config);
+      }
+    })
+    .catch(() => {
+      console.log(
+        "No internet connection found. App is running in offline mode."
+      );
+    });
+}
+
+export function unregister() {
+  if ("serviceWorker" in navigator) {
+    navigator.serviceWorker.ready.then((registration) => {
+      registration.unregister();
+    });
+  }
+}
diff --git a/thisable/src/setupProxy.js b/thisable/src/setupProxy.js
new file mode 100644
index 0000000..5863eb8
--- /dev/null
+++ b/thisable/src/setupProxy.js
@@ -0,0 +1,5 @@
+const proxy = require("http-proxy-middleware");
+
+module.exports = function (app) {
+  app.use(proxy("/api", { target: "http://localhost:5000/" }));
+};

From 991f1e985ecd6175adfa9430aafbb20bd008fcae Mon Sep 17 00:00:00 2001
From: seohyun319 <tjguselly0319@gmail.com>
Date: Sun, 27 Mar 2022 00:25:43 +0900
Subject: [PATCH 7/9] FEAT: chatbot index setting

---
 thisable/src/components/Chatbot/Chatbot.css | 19 +++++++++++
 thisable/src/index.css                      |  6 ++--
 thisable/src/index.js                       | 38 ++++++++++++++++-----
 3 files changed, 51 insertions(+), 12 deletions(-)
 create mode 100644 thisable/src/components/Chatbot/Chatbot.css

diff --git a/thisable/src/components/Chatbot/Chatbot.css b/thisable/src/components/Chatbot/Chatbot.css
new file mode 100644
index 0000000..0c40bcb
--- /dev/null
+++ b/thisable/src/components/Chatbot/Chatbot.css
@@ -0,0 +1,19 @@
+* {
+  word-break: keep-all;
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+}
+
+.ant-list-item-meta-content {
+  max-width: 500px;
+  overflow-x: none;
+}
+
+.ant-list-item-meta-title {
+  font-size: 20px !important;
+}
+
+.ant-list-item-meta-description {
+  display: flex;
+  color: black !important;
+}
diff --git a/thisable/src/index.css b/thisable/src/index.css
index ec2585e..4a1df4d 100644
--- a/thisable/src/index.css
+++ b/thisable/src/index.css
@@ -1,13 +1,13 @@
 body {
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
     monospace;
 }
diff --git a/thisable/src/index.js b/thisable/src/index.js
index ef2edf8..1532c7d 100644
--- a/thisable/src/index.js
+++ b/thisable/src/index.js
@@ -1,14 +1,34 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import './index.css';
-import App from './App';
-import reportWebVitals from './reportWebVitals';
+import React from "react";
+import ReactDOM from "react-dom";
+import "./index.css";
+import "antd/dist/antd.css";
+import App from "./App";
+import * as serviceWorker from "./serviceWorker";
+import Reducer from "./_reducers";
+import { Provider } from "react-redux";
+import { createStore, applyMiddleware } from "redux";
+import promiseMiddleware from "redux-promise";
+import ReduxThunk from "redux-thunk";
+
+import reportWebVitals from "./reportWebVitals";
+const createStoreWithMiddleware = applyMiddleware(
+  promiseMiddleware,
+  ReduxThunk
+)(createStore);
 
 ReactDOM.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
-  document.getElementById('root')
+  <Provider
+    store={createStoreWithMiddleware(
+      Reducer,
+      window.__REDUX_DEVTOOLS_EXTENSION__ &&
+        window.__REDUX_DEVTOOLS_EXTENSION__()
+    )}
+  >
+    <React.StrictMode>
+      <App />
+    </React.StrictMode>
+  </Provider>,
+  document.getElementById("root")
 );
 
 // If you want to start measuring performance in your app, pass a function

From 43d940078659a343a6a2e9f7a4e46d44bba2bb8e Mon Sep 17 00:00:00 2001
From: heleneunji <heleneunji@gmail.com>
Date: Sun, 27 Mar 2022 00:33:19 +0900
Subject: [PATCH 8/9] ui change

---
 .../src/components/DetailPage/DetailPage.css  | 38 ++++++++++++++++++-
 .../src/components/DetailPage/DetailPage.js   |  4 +-
 thisable/src/components/MapPage/MapPage.js    |  2 +-
 thisable/src/components/NavBar/NavBar.css     | 18 ++++++++-
 thisable/src/components/NavBar/NavBar.js      |  6 ++-
 5 files changed, 62 insertions(+), 6 deletions(-)

diff --git a/thisable/src/components/DetailPage/DetailPage.css b/thisable/src/components/DetailPage/DetailPage.css
index b4b3725..abd6683 100644
--- a/thisable/src/components/DetailPage/DetailPage.css
+++ b/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;
+  }
+}
\ No newline at end of file
diff --git a/thisable/src/components/DetailPage/DetailPage.js b/thisable/src/components/DetailPage/DetailPage.js
index e3dc978..ef9bcf5 100644
--- a/thisable/src/components/DetailPage/DetailPage.js
+++ b/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>
diff --git a/thisable/src/components/MapPage/MapPage.js b/thisable/src/components/MapPage/MapPage.js
index 7b018ad..fc98d9a 100644
--- a/thisable/src/components/MapPage/MapPage.js
+++ b/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>
     );
   };
diff --git a/thisable/src/components/NavBar/NavBar.css b/thisable/src/components/NavBar/NavBar.css
index 5f0177c..85febba 100644
--- a/thisable/src/components/NavBar/NavBar.css
+++ b/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;
+  }
+}
\ No newline at end of file
diff --git a/thisable/src/components/NavBar/NavBar.js b/thisable/src/components/NavBar/NavBar.js
index cb58400..3986e06 100644
--- a/thisable/src/components/NavBar/NavBar.js
+++ b/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>

From 0c24e642772dccee1ab0fdfc13022cfbf625ae8e Mon Sep 17 00:00:00 2001
From: seohyun319 <tjguselly0319@gmail.com>
Date: Sun, 27 Mar 2022 01:25:35 +0900
Subject: [PATCH 9/9] FEAT: make chatbotModal

---
 thisable/src/components/Chatbot/Chatbot.css   | 20 ++++++++++++
 thisable/src/components/Chatbot/Chatbot.js    |  1 +
 .../src/components/Chatbot/ChatbotModal.js    | 32 +++++++++++++++++++
 thisable/src/components/MainPage/MainPage.js  |  2 ++
 4 files changed, 55 insertions(+)
 create mode 100644 thisable/src/components/Chatbot/ChatbotModal.js

diff --git a/thisable/src/components/Chatbot/Chatbot.css b/thisable/src/components/Chatbot/Chatbot.css
index 0c40bcb..e9a3e5c 100644
--- a/thisable/src/components/Chatbot/Chatbot.css
+++ b/thisable/src/components/Chatbot/Chatbot.css
@@ -4,6 +4,26 @@
   word-wrap: break-word;
 }
 
+.chatbotModal {
+  background-color: #e599b3;
+  width: 5rem;
+  height: 5rem;
+  border-radius: 10px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: fixed;
+  right: 50px;
+  bottom: 50px;
+  box-shadow: 0 10px 10px rgb(0 0 0 / 30%);
+}
+
+.robotBtn > svg {
+  width: 4rem;
+  height: 4rem;
+}
+
 .ant-list-item-meta-content {
   max-width: 500px;
   overflow-x: none;
diff --git a/thisable/src/components/Chatbot/Chatbot.js b/thisable/src/components/Chatbot/Chatbot.js
index 2a1948c..e5631ab 100644
--- a/thisable/src/components/Chatbot/Chatbot.js
+++ b/thisable/src/components/Chatbot/Chatbot.js
@@ -5,6 +5,7 @@ import { saveMessage } from "../../_actions/message_actions";
 import Message from "./Sections/Message";
 import { List, Icon, Avatar } from "antd";
 import Card from "./Sections/Card";
+import "./Chatbot.css";
 
 function Chatbot() {
   const dispatch = useDispatch();
diff --git a/thisable/src/components/Chatbot/ChatbotModal.js b/thisable/src/components/Chatbot/ChatbotModal.js
new file mode 100644
index 0000000..41dc3c7
--- /dev/null
+++ b/thisable/src/components/Chatbot/ChatbotModal.js
@@ -0,0 +1,32 @@
+import React, { useState } from "react";
+import { Modal } from "react-bootstrap";
+import { Icon, Avatar } from "antd";
+import Chatbot from "./Chatbot";
+
+function ChatbotModal() {
+  const [modalShow, setModalShow] = useState(false);
+
+  return (
+    <>
+      <div onClick={() => setModalShow(true)} className="chatbotModal">
+        <Icon type="robot" className="robotBtn" />
+      </div>
+      <Modal show={modalShow} onHide={() => setModalShow(false)}>
+        <Modal.Header closeButton>thisABLE Chatbot</Modal.Header>
+        <Modal.Body>
+          <div
+            style={{
+              display: "flex",
+              justifyContent: "center",
+            }}
+          ></div>
+          <div style={{ display: "flex", justifyContent: "center" }}>
+            <Chatbot />
+          </div>
+        </Modal.Body>
+      </Modal>
+    </>
+  );
+}
+
+export default ChatbotModal;
diff --git a/thisable/src/components/MainPage/MainPage.js b/thisable/src/components/MainPage/MainPage.js
index d48933c..d8614d7 100644
--- a/thisable/src/components/MainPage/MainPage.js
+++ b/thisable/src/components/MainPage/MainPage.js
@@ -1,5 +1,6 @@
 import React from "react";
 import { Outlet } from "react-router-dom";
+import ChatbotModal from "../Chatbot/ChatbotModal";
 import MapPage from "../MapPage/MapPage";
 import "./MainPage.css";
 
@@ -10,6 +11,7 @@ function MainPage() {
       <div className="MainPageList">
         <Outlet />
       </div>
+      <ChatbotModal />
     </div>
   );
 }