Feat: 카카오맵 연결 & 지도 플로우 구현 (#42)

* feat: 카카오맵 연결 * chore: asset 추가 * feat: 행정구역 별 위도, 경도 상수 추가 * feat: 카카오맵 초기세팅(사용자 위치에 따른 중심 설정, geolocation 설정) * feat: default 위도, 경도 지정 함수 * chore: 카카오맵 핀 asset 추가 * feat: 공공api(위치기반 관광정보 조회) 연결 * feat: 카카오맵 연결(화면에 맵 띄우기) * feat: 주변 여행지 찾아보기 기능 구현 * feat: 지도에 pin 생성하기 * feat: 타입 추가 * chore: 기본 이미지 추가 * chore: 바텀시트 배경 관련 props 추가 * feat: 검색 결과 바텀시트 연결 * chore: 주석 수정 * chore: 이미지 Url 반영 코드 수정 * chore: 어셋 수정
TEAM-UNITRIP · Sep 23, 2024 · 0de8ebf · 0de8ebf
1 parent dc162d8
commit 0de8ebf
Show file tree

Hide file tree

Showing 26 changed files with 1,111 additions and 46 deletions.
diff --git a/index.html b/index.html
@@ -3,16 +3,23 @@
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fonts-archive/AppleSDGothicNeo/AppleSDGothicNeo.css" type="text/css"/>
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/gh/fonts-archive/AppleSDGothicNeo/AppleSDGothicNeo.css"
+      type="text/css" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>UNITRIP</title>
+    <script
+      type="text/javascript"
+      src="//dapi.kakao.com/v2/maps/sdk.js?appkey=%VITE_JAVASCRIPT_KEY%"></script>
   </head>
   <body>
     <div id="root"></div>
-    <script src="https://t1.kakaocdn.net/kakao_js_sdk/2.7.2/kakao.min.js"
+    <script
+      src="https://t1.kakaocdn.net/kakao_js_sdk/2.7.2/kakao.min.js"
       integrity="sha384-TiCUE00h649CAMonG018J2ujOgDKW/kVWlChEuu4jK2vxfAAD0eZxzCKakxg55G4"
-      crossorigin="anonymous">
-    </script>
+      crossorigin="anonymous"></script>
+
     <script type="module" src="/src/main.tsx"></script>
   </body>
 </html>
diff --git a/src/Router.tsx b/src/Router.tsx
@@ -6,6 +6,7 @@ import ErrorReportPage from './views/ErrorReport/pages/ErrorReportPage';
 import LoginCallBack from './views/Login/components/LoginCallBack';
 import SignUpPage from './views/Login/pages/SignUpPage';
 import MainPage from './views/Main/pages/MainPage';
+import MapPage from './views/Map/pages/MapPage';
 import Mypage from './views/Mypage/pages/Mypage';
 import SearchPage from './views/Search/pages/SearchPage';
 import SearchResultPage from './views/Search/pages/SearchResultPage';
@@ -35,6 +36,10 @@ const router = createBrowserRouter([
     element: <Mypage />,
   },
   { path: '/error-report', element: <ErrorReportPage /> },
+  {
+    path: '/map',
+    element: <MapPage />,
+  },
   // {
   //   path: "*",
   //   element: <ErrorPage />,

diff --git a/src/apis/index.ts b/src/apis/index.ts
@@ -1,5 +1,4 @@
 import axios, { AxiosInstance } from 'axios';
-
 const client: AxiosInstance = axios.create({
   baseURL: import.meta.env.BASE_URL,
 });

diff --git a/src/apis/public/locationBasedList1.ts b/src/apis/public/locationBasedList1.ts
@@ -0,0 +1,36 @@
+/** 위치기반 관광정보 조회 API */
+import { getLocationBasedList1Res } from '@/types/locationBasedList1';
+import { Response } from '@/types/public';
+
+import { publicDataClient } from '..';
+
+interface locationBasedList1Params {
+  pageNo: number;
+  numOfRows: number;
+  MobileOS: 'IOS' | 'AND' | 'WIN' | 'ETC';
+  mapX: string | undefined;
+  mapY: string | undefined;
+  radius: string;
+  contentTypeId: number;
+}
+
+export const getLocationBasedList1 = async (
+  paramsInfo: locationBasedList1Params,
+) => {
+  let params = `MobileApp=UNITRIP&_type=json&arrange=O&serviceKey=${import.meta.env.VITE_PUBLIC_DATA_SERVICE_KEY}`;
+
+  for (const [key, value] of Object.entries(paramsInfo)) {
+    params += `&${key}=${value}`;
+  }
+
+  const {
+    data: {
+      response: {
+        body: { items },
+      },
+    },
+  } = await publicDataClient.get<Response<getLocationBasedList1Res>>(
+    `/locationBasedList1?${params}`,
+  );
+  return items;
+};
diff --git a/src/assets/icon/icon-refresh-mono.svg b/src/assets/icon/icon-refresh-mono.svg
diff --git a/src/assets/icon/icon_map_favorite.svg b/src/assets/icon/icon_map_favorite.svg
diff --git a/src/assets/icon/icon_map_search_active.svg b/src/assets/icon/icon_map_search_active.svg
diff --git a/src/assets/icon/icon_map_search_inactive.svg b/src/assets/icon/icon_map_search_inactive.svg
diff --git a/src/assets/icon/index.ts b/src/assets/icon/index.ts
@@ -50,7 +50,13 @@ export { default as PhysicalTypeIcon } from './icon_physical_type.svg?react';
 export { default as BigInfoIcon } from './icon_big_info.svg?react';
 export { default as HeartFillMonoIcon } from './icon-heart-fill-mono.svg?react';
 
-// Universal icon
+//Map
+export { default as RefreshMonoIcon } from './icon-refresh-mono.svg?react';
+export { default as MapFavoirteIcon } from './icon_map_favorite.svg?react';
+export { default as MapSearchActiveIcon } from './icon_map_search_active.svg?react';
+export { default as MapSearchInactiveIcon } from './icon_map_search_inactive.svg?react';
+
+// Universal Detail
 export { default as AudioGuideActiveIcon } from './icon_audioguide_active.svg?react';
 export { default as AudioGuideInActiveIcon } from './icon_audioguide_inactive.svg?react';
 export { default as AuditoriumActiveIcon } from './icon_auditorium_active.svg?react';
@@ -81,8 +87,6 @@ export { default as PromotionActiveIcon } from './icon_promotion_active.svg?reac
 export { default as PromotionInActiveIcon } from './icon_promotion_inactive.svg?react';
 export { default as PublicTransportActiveIcon } from './icon_publictransport_active.svg?react';
 export { default as PublicTransportInActiveIcon } from './icon_publictransport_inactive.svg?react';
-export { default as PublicTransportDefaultIcon } from './publictransport_default.svg?react';
-export { default as PublicTransportSelectedIcon } from './publictransport_selected.svg?react';
 export { default as RestroomActiveIcon } from './icon_restroom_active.svg?react';
 export { default as RestroomInActiveIcon } from './icon_restroom_inactive.svg?react';
 export { default as RouteActiveIcon } from './icon_route_active.svg?react';
@@ -93,39 +97,20 @@ export { default as StrollerActiveIcon } from './icon_stroller_active.svg?react'
 export { default as StrollerInActiveIcon } from './icon_stroller_inactive.svg?react';
 export { default as TicketOfficeActiveIcon } from './icon_ticketoffice_active.svg?react';
 export { default as TicketOfficeInActiveIcon } from './icon_ticketoffice_inactive.svg?react';
-export { default as TicketOfficeDefaultIcon } from './ticketoffice_default.svg?react';
-export { default as TicketOfficeSelectedIcon } from './ticketoffice_selected.svg?react';
 export { default as VideoGuideActiveIcon } from './icon_videoguide_active.svg?react';
 export { default as VideoGuideInActiveIcon } from './icon_videoguide_inactive.svg?react';
 export { default as WheelChairAcitveIcon } from './icon_wheelchair_active.svg?react';
 export { default as WheelChairInAcitveIcon } from './icon_wheelchair_inactive.svg?react';
 
-export { default as EmptyPhotoIcon } from './icon_empty_photo.svg?react';
 export { default as ArrowBackIconIosDownIcon } from './icon-arrow-back-ios-down.svg?react';
 export { default as ArrowBackIconIosUpIcon } from './icon-arrow-back-ios-up.svg?react';
+export { default as EmptyPhotoIcon } from './icon_empty_photo.svg?react';
 
-export { default as ParkingDefaultIcon } from './parking_default.svg?react';
-export { default as ParkingSelectedIcon } from './parking_selected.svg?react';
-export { default as PromotionDefaultIcon } from './promotion_default.svg?react';
-export { default as PromotionSelectedIcon } from './promotion_selected.svg?react';
-export { default as RestroomDefaultIcon } from './promotion_default.svg?react';
-export { default as RestroomSelectedIcon } from './promotion_selected.svg?react';
-export { default as RouteDefaultIcon } from './route_default.svg?react';
-export { default as RouteSelectedIcon } from './route_selected.svg?react';
-export { default as WheelChairDefaultIcon } from './wheelchair_default.svg?react';
-export { default as WheelChairSelectedIcon } from './wheelchair_selected.svg?react';
-export { default as LactationRoomDefaultIcon } from './lactationroom_default.svg?react';
-export { default as LactationRoomSelectedIcon } from './lactationroom_selected.svg?react';
-export { default as SignGuideDefaultIcon } from './signguide_default.svg?react';
-export { default as SignGuideSelectedIcon } from './signguide_selected.svg?react';
-export { default as StrollerDefaultIcon } from './stroller_default.svg?react';
-export { default as StrollerSelectedIcon } from './stroller_selected.svg?react';
-export { default as VideoGuideDefaultIcon } from './videoguide_default.svg?react';
-export { default as VideoGuideSelectedIcon } from './videoguide_selected.svg?react';
+//Universal Filter
 export { default as AudioGuideDefaultIcon } from './audioguide_default.svg?react';
-export { default as AudioGuideInSelectedIcon } from './audioguide_selected.svg?react';
+export { default as AudioGuideSelectedIcon } from './audioguide_selected.svg?react';
 export { default as AuditoriumDefaultIcon } from './auditorium_default.svg?react';
-export { default as AuditoriumSelectedIcon } from './audioguide_selected.svg?react';
+export { default as AuditoriumSelectedIcon } from './auditorium_selected.svg?react';
 export { default as BabySpareChairDefaultIcon } from './babysparechair_default.svg?react';
 export { default as BabySpareChairSelectedIcon } from './babysparechair_selected.svg?react';
 export { default as BigPrintDefaultIcon } from './bigprint_default.svg?react';
@@ -140,7 +125,29 @@ export { default as ExitDefaultIcon } from './exit_default.svg?react';
 export { default as ExitSelectedIcon } from './exit_selected.svg?react';
 export { default as GuideHumanDefaultIcon } from './guidehuman_default.svg?react';
 export { default as GuideHumanSelectedIcon } from './guidehuman_selected.svg?react';
-export { default as GuideSystemDefaultIcon } from './guidehuman_default.svg?react';
-export { default as GuideSystemSelectedIcon } from './guidehuman_selected.svg?react';
+export { default as GuideSystemDefaultIcon } from './guidesystem_default.svg?react';
+export { default as GuideSystemSelectedIcon } from './guidesystem_selected.svg?react';
 export { default as HelpDogDefaultIcon } from './helpdog_default.svg?react';
 export { default as HelpDogSelectedIcon } from './helpdog_selected.svg?react';
+export { default as LactationRoomDefaultIcon } from './lactationroom_default.svg?react';
+export { default as LactationRoomSelectedIcon } from './lactationroom_selected.svg?react';
+export { default as ParkingDefaultIcon } from './parking_default.svg?react';
+export { default as ParkingSelectedIcon } from './parking_selected.svg?react';
+export { default as PromotionDefaultIcon } from './promotion_default.svg?react';
+export { default as PromotionSelectedIcon } from './promotion_selected.svg?react';
+export { default as PublicTransportDefaultIcon } from './publictransport_default.svg?react';
+export { default as PublicTransportSelectedIcon } from './publictransport_selected.svg?react';
+export { default as RestroomDefaultIcon } from './restroom_default.svg?react';
+export { default as RestroomSelectedIcon } from './restroom_selected.svg?react';
+export { default as RouteDefaultIcon } from './route_default.svg?react';
+export { default as RouteSelectedIcon } from './route_selected.svg?react';
+export { default as SignGuideDefaultIcon } from './signguide_default.svg?react';
+export { default as SignGuideSelectedIcon } from './signguide_selected.svg?react';
+export { default as StrollerDefaultIcon } from './stroller_default.svg?react';
+export { default as StrollerSelectedIcon } from './stroller_selected.svg?react';
+export { default as TicketOfficeDefaultIcon } from './ticketoffice_default.svg?react';
+export { default as TicketOfficeSelectedIcon } from './ticketoffice_selected.svg?react';
+export { default as VideoGuideDefaultIcon } from './videoguide_default.svg?react';
+export { default as VideoGuideSelectedIcon } from './videoguide_selected.svg?react';
+export { default as WheelChairDefaultIcon } from './wheelchair_default.svg?react';
+export { default as WheelChairSelectedIcon } from './wheelchair_selected.svg?react';
diff --git a/src/assets/image/img_default.png b/src/assets/image/img_default.png
diff --git a/src/assets/image/img_kakaomap_marker.png b/src/assets/image/img_kakaomap_marker.png
diff --git a/src/assets/image/index.ts b/src/assets/image/index.ts
@@ -11,7 +11,9 @@ export { default as Sample10Image } from './img10.jpeg';
 export { default as Sample11Image } from './img11.jpeg';
 export { default as Sample12Image } from './img12.jpeg';
 export { default as BackgroundImage } from './img_background.png';
+export { default as DefaultImage } from './img_default.png';
 export { default as ErrorReportCompleteImage } from './img_error_report_complete.png';
+export { default as KakaoMarkerImage } from './img_kakaomap_marker.png';
 export { default as MapImage } from './img_map.png';
 export { default as ProfileImg } from './img_profile_default.png';
 export { default as RequestImage } from './img_request_outline.png';
diff --git a/src/components/BottomSheet.tsx b/src/components/BottomSheet.tsx
@@ -11,6 +11,7 @@ interface BottomSheetProps {
   buttonText?: string;
   noButton?: boolean;
   bottomSheetCss?: SerializedStyles;
+  sheetBackgroundCss?: SerializedStyles;
   children: ReactNode;
 }
 
@@ -20,6 +21,7 @@ interface BottomSheetProps {
  * @param buttonText button text
  * @param noButton button 여부
  * @param bottomSheetCss 바텀시트 css 오버라이딩
+ * @param sheetBackgroundCss 바텀시트 배경 css 오버라이딩
  */
 const BottomSheet = (props: BottomSheetProps) => {
   const {
@@ -28,6 +30,7 @@ const BottomSheet = (props: BottomSheetProps) => {
     buttonText,
     noButton,
     bottomSheetCss,
+    sheetBackgroundCss,
     children,
   } = props;
 
@@ -42,7 +45,12 @@ const BottomSheet = (props: BottomSheetProps) => {
   };
 
   const portalContent = (
-    <div css={backgroundCss} onClick={handleOnClickBackground}>
+    <div
+      css={css`
+        ${backgroundCss}
+        ${sheetBackgroundCss}
+      `}
+      onClick={handleOnClickBackground}>
       <div
         css={css`
           ${containerCss(height)}
@@ -81,26 +89,25 @@ const backgroundCss = css`
   width: 100vw;
   height: 100vh;
 
-  background-color: rgba(0, 0, 0, 0.3);
+  background-color: rgb(0 0 0 / 30%);
 `;
 
 const containerCss = (height: string) => css`
   position: absolute;
   bottom: 0;
+  overflow: auto;
 
   width: 100vw;
   height: ${height};
-  border-radius: 1.2rem 1.2rem 0rem 0rem;
+  border-radius: 1.2rem 1.2rem 0 0;
 
   background-color: white;
-
-  overflow: auto;
 `;
 
 const buttonCotainerCss = css`
   position: fixed;
-  left: 0;
   bottom: 1.2rem;
+  left: 0;
 
   width: 100vw;
   padding: 0 2rem;
@@ -109,11 +116,11 @@ const buttonCotainerCss = css`
 const buttonCss = css`
   width: 100%;
   padding: 1.4rem 0;
-
   border-radius: 1.2rem;
 
-  color: ${COLORS.brand1};
   background-color: ${COLORS.brand2};
 
+  color: ${COLORS.brand1};
+
   ${FONTS.Body3};
 `;
diff --git a/src/constants/REGION_LIST.ts b/src/constants/REGION_LIST.ts
@@ -105,7 +105,7 @@ export const REGION_LIST = [
       '종촌동',
       '고운동',
       '보람동',
-      ' 대평동',
+      '대평동',
       '소담동',
       '반곡동',
     ],
@@ -244,7 +244,7 @@ export const REGION_LIST = [
       '영암군',
       '무안군',
       '함평군',
-      ' 영광군',
+      '영광군',
       '장성군',
       '완도군',
       '진도군',
@@ -273,7 +273,7 @@ export const REGION_LIST = [
       '성주군',
       '칠곡군',
       '예천군',
-      ' 봉화군',
+      '봉화군',
       '울진군',
       '울릉군',
     ],