From 1eed3a64f647e831c2e8d5b18a1db6bf9f5a1672 Mon Sep 17 00:00:00 2001 From: IGhos-P Date: Thu, 23 Jun 2022 19:08:35 +0900 Subject: [PATCH] =?UTF-8?q?feat=20:=20filter=20=EA=B8=B0=EB=8A=A5=20?= =?UTF-8?q?=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- yam-view/src/components/Data/markerData.js | 12 +++---- yam-view/src/pages/WebView.js | 38 +++++++++++++------- yam-view/src/utils/filterTag.js | 2 +- yam-view/src/utils/findCategory.js | 41 +++++++++++++++++++++- 4 files changed, 73 insertions(+), 20 deletions(-) diff --git a/yam-view/src/components/Data/markerData.js b/yam-view/src/components/Data/markerData.js index e50c8fb..d2de912 100644 --- a/yam-view/src/components/Data/markerData.js +++ b/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", diff --git a/yam-view/src/pages/WebView.js b/yam-view/src/pages/WebView.js index 68c4348..21bdb6c 100644 --- a/yam-view/src/pages/WebView.js +++ b/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 = () => {
- ${el.NAME} + ${el.restaurantName}
- ${el.SECTOR} + ${findCategoryEtoK(el.category)}
@@ -165,7 +177,7 @@ const WebView = () => { 연락처
- ${el.PHONE_NUMBER} + ${el.restaurantNumber}
@@ -173,7 +185,7 @@ const WebView = () => { 영업시간
- ${el.OPEN_TIME} + ${`오전 9시 ~ 오후 6시`}
@@ -181,11 +193,13 @@ const WebView = () => { 대표메뉴
- ${el.MAIN_MENU} + ${el.menus.map((el) => el.menuName).join(" , ")}
- 가게 자세히 보러가기 + 가게 자세히 보러가기
diff --git a/yam-view/src/utils/filterTag.js b/yam-view/src/utils/filterTag.js index 6d78272..8911b61 100644 --- a/yam-view/src/utils/filterTag.js +++ b/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)); }; diff --git a/yam-view/src/utils/findCategory.js b/yam-view/src/utils/findCategory.js index 6b62805..c40fbd9 100644 --- a/yam-view/src/utils/findCategory.js +++ b/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 "기타"; }