Feat: '/map' 저장한 여행지 목록 연결 (#63)

* chore: 어셋 추가

* chore: 더미 쌓기

* chore: 바텀시트 중앙정렬

* feat: 공공api 연결 및 에러 throw

* feat: emptyview 공통컴포넌트 분리

* feat: emptyview 공통컴포넌트 분리(2)

* chore: 바텀시트 스타일 수정

* feat: 저장한 여행지 버튼 클릭 플로우 구현

* feat: 바텀시트 공통(content 1개)빼기, 저장한여행지 목록 구현

* chore: 바텀시트 애니메이션 추가

* fix: 타입 에러 해결

* fix: 타입 에러 해결

* fix: api response type 변경에 따른 타입 수정

* feat: 저장한 여행지 마커 초기화 로직

src/Router.tsx

@@ -2,7 +2,6 @@ import { createBrowserRouter, RouterProvider } from 'react-router-dom';
 
 import Error from './components/Error';
 import Settings from './components/Settings';
-import Review from './views/Detail/components/Review';
 import DetailPage from './views/Detail/pages/DetailPage';
 import WriteReviewPage from './views/Detail/pages/WriteReviewPage';
 import ErrorReportPage from './views/ErrorReport/pages/ErrorReportPage';

src/apis/public/detailCommon1.ts

@@ -0,0 +1,37 @@
+/** 공통정보 조회 API */
+
+import { detailCommon1Res } from '@/types/detailCommon1';
+import { Response } from '@/types/public';
+
+import { publicDataClient } from '..';
+
+interface detailCommon1Params {
+  numOfRows: number;
+  pageNo: number;
+  MobileOS: 'IOS' | 'AND' | 'WIN' | 'ETC';
+  contentId: number;
+  defaultYN: 'Y' | 'N';
+  firstImageYN: 'Y' | 'N';
+  addrinfoYN: 'Y' | 'N';
+  mapinfoYN: 'Y' | 'N';
+}
+
+export const getDetailCommon1 = async (paramsInfo: detailCommon1Params) => {
+  let params = `MobileApp=UNITRIP&_type=json&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<detailCommon1Res[]>>(
+    `/detailCommon1?${params}`,
+  );
+
+  return items;
+};

src/apis/public/locationBasedList1.ts

@@ -1,5 +1,5 @@
 /** 위치기반 관광정보 조회 API */
-import { getLocationBasedList1Res } from '@/types/locationBasedList1';
+import { locationBasedList1Res } from '@/types/locationBasedList1';
 import { Response } from '@/types/public';
 
 import { publicDataClient } from '..';
@@ -17,7 +17,7 @@ interface locationBasedList1Params {
 export const getLocationBasedList1 = async (
   paramsInfo: locationBasedList1Params,
 ) => {
-  let params = `MobileApp=UNITRIP&_type=json&arrange=O&serviceKey=${import.meta.env.VITE_PUBLIC_DATA_SERVICE_KEY}`;
+  let params = `MobileApp=UNITRIP&_type=json&arrange=S&serviceKey=${import.meta.env.VITE_PUBLIC_DATA_SERVICE_KEY}`;
 
   for (const [key, value] of Object.entries(paramsInfo)) {
     params += `&${key}=${value}`;
@@ -29,8 +29,9 @@ export const getLocationBasedList1 = async (
         body: { items },
       },
     },
-  } = await publicDataClient.get<Response<getLocationBasedList1Res>>(
+  } = await publicDataClient.get<Response<locationBasedList1Res[]>>(
     `/locationBasedList1?${params}`,
   );
+
   return items;
 };

src/assets/icon/index.ts

@@ -34,22 +34,22 @@ export { default as SearchSetIcon } from './icon-search-set.svg?react';
 export { default as ResetXIcon } from './reset-x.svg?react';
 export { default as ToggleXIcon } from './toggle-x.svg?react';
 
+export { default as ErrorIcon } from './error_icon.svg?react';
 export { default as ArrowRightIcon } from './icon-arrow-right.svg?react';
 export { default as HeaderBackIcon } from './icon_header_back.svg?react';
 export { default as MypageHeartIcon } from './icon_mypage_heart.svg?react';
-export { default as ErrorIcon } from './error_icon.svg?react';
 
 export { default as CheckEmptyIcon } from './icon-check-empty.svg?react';
 export { default as CheckFilledYellowIcon } from './icon-check-fill-yellow.svg?react';
 export { default as CheckFilledIcon } from './icon-check-filled.svg?react';
+export { default as HeartFillMonoIcon } from './icon-heart-fill-mono.svg?react';
 export { default as MapMonoGrayIcon } from './icon-map-mono-gray.svg?react';
+export { default as BigInfoIcon } from './icon_big_info.svg?react';
 export { default as BlindTypeIcon } from './icon_blind_type.svg?react';
 export { default as HearingTypeIcon } from './icon_hearing_type.svg?react';
 export { default as InfantTypeIcon } from './icon_infant_type.svg?react';
 export { default as NoneTypeIcon } from './icon_none_type.svg?react';
 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';
 
 //Map
 export { default as RefreshMonoIcon } from './icon-refresh-mono.svg?react';
@@ -103,13 +103,13 @@ export { default as VideoGuideInActiveIcon } from './icon_videoguide_inactive.sv
 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 PencilMonoIcon } from './icon-pencil-mono.svg?react';
-export { default as SmallStarIcon } from './small_star.svg?react';
-export { default as BigStarIcon } from './icon-big-star.svg?react';
-export { default as BigStarFillIcon } from './icon-big-star-fill.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 BigStarFillIcon } from './icon-big-star-fill.svg?react';
+export { default as BigStarIcon } from './icon-big-star.svg?react';
+export { default as PencilMonoIcon } from './icon-pencil-mono.svg?react';
+export { default as EmptyPhotoIcon } from './icon_empty_photo.svg?react';
+export { default as SmallStarIcon } from './small_star.svg?react';
 
 //Universal Filter
 export { default as AudioGuideDefaultIcon } from './audioguide_default.svg?react';
@@ -135,10 +135,10 @@ export { default as GuideSystemSelectedIcon } from './guidesystem_selected.svg?r
 export { default as HelpDogDefaultIcon } from './helpdog_default.svg?react';
 export { default as HelpDogSelectedIcon } from './helpdog_selected.svg?react';
 export { default as CameraIcon } from './icon-camera.svg?react';
-export { default as ToggleXFillIcon } from './toggle-fill-x.svg?react';
-export { default as NoReviewIcon } from './no_reveiw_image.svg?react';
+export { default as StarGrayIcon } from './icon-star-gray.svg?react';
 export { default as LactationRoomDefaultIcon } from './lactationroom_default.svg?react';
 export { default as LactationRoomSelectedIcon } from './lactationroom_selected.svg?react';
+export { default as NoReviewIcon } from './no_reveiw_image.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';
@@ -155,8 +155,10 @@ 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 ToggleXFillIcon } from './toggle-fill-x.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';
-export { default as StarGrayIcon } from './icon-star-gray.svg?react';
+
+export { default as CloseBottomSheetIcon } from './icon_close_bottomSheet.svg?react';

src/assets/image/index.ts

@@ -13,6 +13,7 @@ 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 FavPinImage } from './img_favPin.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';

src/components/BottomSheet.tsx

@@ -1,4 +1,4 @@
-import { css, SerializedStyles } from '@emotion/react';
+import { css, keyframes, SerializedStyles } from '@emotion/react';
 import { MouseEvent, ReactNode, useRef } from 'react';
 import { createPortal } from 'react-dom';
 
@@ -84,12 +84,20 @@ const BottomSheet = (props: BottomSheetProps) => {
 
 export default BottomSheet;
 
+const slideUp = keyframes`
+  0% { transform: translateY(100%)}
+  100% { transform: translateY(0)}
+`;
+
 const backgroundCss = css`
   display: flex;
   justify-content: center;
   align-items: center;
   position: fixed;
   top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+
   z-index: 999;
 
   width: 100vw;
@@ -109,6 +117,8 @@ const containerCss = (height: string) => css`
   border-radius: 1.2rem 1.2rem 0 0;
 
   background-color: white;
+
+  animation: ${slideUp} 0.25s cubic-bezier(0.5, 0, 0.5, 0.7);
 `;
 
 const buttonCotainerCss = css`

src/components/EmptyFavList.tsx

@@ -0,0 +1,34 @@
+import { css } from '@emotion/react';
+
+import { MypageHeartIcon } from '@/assets/icon';
+import { COLORS, FONTS } from '@/styles/constants';
+
+const EmptyFavList = () => {
+  return (
+    <div css={emptyContainer}>
+      <MypageHeartIcon />
+      <p css={emptyText}>
+        아직 저장한 여행지가 없어요
+        <br />
+        유니트립 여행지를 더 둘러볼까요?
+      </p>
+    </div>
+  );
+};
+
+export default EmptyFavList;
+
+const emptyContainer = css`
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+`;
+
+const emptyText = css`
+  padding: 1.6rem 0 2.8rem;
+
+  color: ${COLORS.gray9};
+  text-align: center;
+
+  ${FONTS.Body4};
+`;

src/types/detailCommon1.ts

@@ -0,0 +1,22 @@
+export interface detailCommon1Res {
+  cat2: string;
+  cat3: string;
+  tel: string;
+  modifiedtime: string;
+  sigungucode: string;
+  contentid: string;
+  mlevel: string;
+  title: string;
+  addr1: string;
+  addr2: string;
+  areacode: string;
+  booktour: string;
+  cat1: string;
+  firstimage2: string;
+  mapx: string;
+  mapy: string;
+  cpyrhtDivCd: string;
+  contenttypeid: string;
+  createdtime: string;
+  firstimage: string;
+}

src/types/locationBasedList1.ts

@@ -1,39 +1,23 @@
 export interface locationBasedList1Res {
-  tel: 'string';
-  title: 'string';
-  firstimage: 'string';
-  createdtime: 'string';
-  dist: 'string';
-  cat2: 'string';
-  contentid: 'string';
-  contenttypeid: 'string';
-  addr1: 'string';
-  addr2: 'string';
-  areacode: 'string';
-  booktour: 'string';
-  cat1: 'string';
-  mlevel: 'string';
-  modifiedtime: 'string';
-  sigungucode: 'string';
-  cpyrhtDivCd: 'string';
-  firstimage2: 'string';
-  mapx: 'string';
-  mapy: 'string';
-  cat3: 'string';
-}
-
-export interface getLocationBasedList1Res {
-  header: {
-    resultMsg: 'string';
-    resultCode: 'string';
-  };
-  body: {
-    pageNo: number;
-    totalCount: number;
-    items:
-      | {
-          item: locationBasedList1Res[];
-        }
-      | '';
-  };
+  tel: string;
+  title: string;
+  firstimage: string;
+  createdtime: string;
+  dist: string;
+  cat2: string;
+  contentid: string;
+  contenttypeid: string;
+  addr1: string;
+  addr2: string;
+  areacode: string;
+  booktour: string;
+  cat1: string;
+  mlevel: string;
+  modifiedtime: string;
+  sigungucode: string;
+  cpyrhtDivCd: string;
+  firstimage2: string;
+  mapx: string;
+  mapy: string;
+  cat3: string;
 }

src/views/Map/components/BottomSheetContent.tsx

@@ -16,8 +16,15 @@ const BottomSheetContent = (props: contentProps) => {
   const { title, address, image, contentId } = props;
   const isImageNone = image === '';
 
+  // const navigate = useNavigate();
+
+  const onClickContent = () => {
+    console.log(contentId);
+    // navigate('/detail');
+  };
+
   return (
-    <div css={contentContainer} onClick={() => console.log(contentId)}>
+    <div css={contentContainer} onClick={onClickContent}>
       <section css={textSection}>
         <div css={titleSectionCss}>
           <h1 css={titleText('title')}>{title}</h1>
@@ -42,14 +49,15 @@ const contentContainer = css`
   justify-content: space-between;
 
   width: 100%;
-  padding: 4rem 1.7rem 10.5rem;
 `;
 
 const textSection = css`
   display: flex;
   gap: 0.2rem;
   flex-direction: column;
   max-width: 22.9rem;
+
+  padding-top: 0.35rem;
 `;
 
 const titleSectionCss = css`