feat : filter 기능 구현

yam-view/src/components/Data/markerData.js

@@ -49,8 +49,8 @@ export const dummyData = [
     restaurantId: 1,
     restaurantName: "카페", // 이름
     restaurantNumber: "010-1111-1111", // 전화번호
-    y_coordinate: 37.62197524055062, // 위도
-    x_coordinate: 127.16017523675508, // 경도
+    y_coordinate: 37.620842424005616, // 위도
+    x_coordinate: 127.1583774403176, // 경도
     address: "대전광역시 00구 00동",
     heart: 3,
     category: "cafe",
@@ -68,8 +68,8 @@ export const dummyData = [
     restaurantId: 1,
     restaurantName: "일본집", // 이름
     restaurantNumber: "010-1111-1111", // 전화번호
-    y_coordinate: 37.62197524055062, // 위도
-    x_coordinate: 127.16017523675508, // 경도
+    y_coordinate: 37.624915253753194, // 위도
+    x_coordinate: 127.15122688059974, // 경도
     address: "대전광역시 00구 00동",
     heart: 3,
     category: "japan",
@@ -87,8 +87,8 @@ export const dummyData = [
     restaurantId: 1,
     restaurantName: "중국집", // 이름
     restaurantNumber: "010-1111-1111", // 전화번호
-    y_coordinate: 37.62197524055062, // 위도
-    x_coordinate: 127.16017523675508, // 경도
+    y_coordinate: 37.62456273069659, // 위도
+    x_coordinate: 127.15211256646381, // 경도
     address: "대전광역시 00구 00동",
     heart: 3,
     category: "china",

yam-view/src/pages/WebView.js

@@ -4,6 +4,7 @@ import { dummyData, markerdata } from "../components/Data/markerData";
 import "./WebView.css";
 import $ from "jquery";
 import { filterTag } from "../utils/filterTag";
+import { findCategoryEtoK, findCategoryKtoE } from "../utils/findCategory";
 
 const { kakao } = window;
 
@@ -41,7 +42,11 @@ const requestPermission = () => {
     DATE_CREATED: Date(), */
 
 const WebView = () => {
-  const [result, setResult] = useState({});
+  const [result, setResult] = useState({
+    tagList: "",
+    openTime: "",
+    dist: "",
+  });
 
   /** react native 환경에서만 가능 */
   const onMessageHandler = (e) => {
@@ -128,16 +133,23 @@ const WebView = () => {
     var zoomControl = new kakao.maps.ZoomControl();
     map.addControl(zoomControl, kakao.maps.ControlPosition.BOTTOMLEFT);
 
+    let data;
     // 음식점 data map
     if (result.tagList) {
-      let filterData = filterTag(dummyData, result.tagList.split(","));
-      console.log(filterData);
+      let categoryList = result.tagList
+        .split(",")
+        .map((el) => findCategoryKtoE(el));
+      let filterData = filterTag(dummyData, categoryList);
+
+      data = [...filterData];
+    } else {
+      data = [...dummyData];
     }
 
-    markerdata.map((el, index) => {
+    data.map((el, index) => {
       var markerPosition = new kakao.maps.LatLng(
-        el.Y_COORDINATE,
-        el.X_COORDINATE
+        el.y_coordinate,
+        el.x_coordinate
       );
 
       var marker = createImageMarker(
@@ -152,10 +164,10 @@ const WebView = () => {
                 <div class="title" >
                     <div class="yellowLine"></div>
                      <div class="name">
-        ${el.NAME} 
+        ${el.restaurantName} 
         </div>
         <div class="sector">
-        ${el.SECTOR}
+        ${findCategoryEtoK(el.category)}
         </div>
         </div>
                 <div class="body">
@@ -165,27 +177,29 @@ const WebView = () => {
                         연락처
                         </div>
                         <div class="phone_number">
-                          ${el.PHONE_NUMBER}
+                          ${el.restaurantNumber}
                           </div>
                         </div>
                       <div class = "open row">
                         <div class="open text bold">
                         영업시간
                         </div>
                         <div class="open_time">
-                        ${el.OPEN_TIME}
+                        ${`오전 9시 ~ 오후 6시`}
                         </div>
                       </div>
                       <div class = "menu row">
                         <div class="menu text bold">
                         대표메뉴
                         </div>
                         <div class="main_menu">
-                        ${el.MAIN_MENU}
+                        ${el.menus.map((el) => el.menuName).join(" , ")}
                         </div>
                       </div>
                       <div class="detail">
-                      <a herf="${el.DETAIL_URL}" target="_blank">가게 자세히 보러가기</a>
+                      <a herf="${
+                        el.DETAIL_URL
+                      }" target="_blank">가게 자세히 보러가기</a>
                       </div>
                     </div>
                 </div>

yam-view/src/utils/filterTag.js

@@ -1,3 +1,3 @@
 export const filterTag = (arr, tagList) => {
-  return arr.filter((item) => tagList.includes(item.tag));
+  return arr.filter((item) => tagList.includes(item.category));
 };

yam-view/src/utils/findCategory.js

@@ -1,4 +1,4 @@
-export const findCategory = (category) => {
+export const findCategoryEtoK = (category) => {
   switch (category) {
     case "korea":
       return "한식";
@@ -20,6 +20,45 @@ export const findCategory = (category) => {
       return "레스토랑";
     case "bar":
       return "바";
+    case "asian":
+      return "아시안";
+    case "dessert":
+      return "디저트";
+    case "convenience":
+      return "편의점";
+    default:
+      return "기타";
+  }
+};
+
+export const findCategoryKtoE = (category) => {
+  switch (category) {
+    case "한식":
+      return "korea";
+    case "일식":
+      return "japan";
+    case "중식":
+      return "china";
+    case "양식":
+      return "western";
+    case "분식":
+      return "snack";
+    case "패스트푸드":
+      return "fastfood";
+    case "베이커리":
+      return "bakery";
+    case "카페":
+      return "cafe";
+    case "레스토랑":
+      return "restaurant";
+    case "바":
+      return "bar";
+    case "아시안":
+      return "asian";
+    case "디저트":
+      return "dessert";
+    case "편의점":
+      return "convenience";
     default:
       return "기타";
   }