Feat: '/detail' 공공api 연결 (#59)

* feat: 공통정보조회, 소개정보조회 공공api 연결

* feat: 이미지조회 api 연결

* feat: 지도탭 카카오맵 연결

* feat: 상세정보 api 연결

* chore: api 관련 type 수정

* feat: 무장애조회 api 연결, 유니버설 필터링

* chore: 기본 값 수정('-')

* fix: 공통api 구조 변경에 따른 타입 수정

* fix: api response 타입 수정

* feat: useParams 이용해 contetnID 각 함수에 전달

* feat: 헤더 뒤로가기 구현

* feat: contentId와 detailPage 연결

* fix: 라우터 재설정

* fix: 라우터 재설정

* feat: 운영시간 토글 구현

* fix: props 수정 및 useFee 조건 수정

src/Router.tsx

@@ -1,7 +1,7 @@
 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';
@@ -19,18 +19,37 @@ const router = createBrowserRouter([
     children: [
       { path: '/', element: <MainPage /> },
       { path: '/auth/callback', element: <LoginCallBack /> },
-      { path: '/detail', element: <DetailPage /> },
       { path: '/sign-up', element: <SignUpPage /> },
-      { path: '/detail', element: <DetailPage /> },
-      { path: '/detail/review/write', element: <WriteReviewPage /> },
-      { path: '/search', element: <SearchPage /> },
-      { path: '/search/:word', element: <SearchResultPage /> },
-      { path: '/mypage', element: <Mypage /> },
-      { path: '/error-report', element: <ErrorReportPage /> },
-      { path: '/map', element: <MapPage /> },
-      { path: '/error', element: <Error /> },
     ],
   },
+  {
+    path: '/:contentId',
+    element: <DetailPage />,
+    children: [{ path: 'review', element: <Review /> }],
+  },
+  { path: '/:contentId/review/write', element: <WriteReviewPage /> },
+  {
+    path: '/search',
+    element: <SearchPage />,
+    children: [{}],
+  },
+  {
+    path: '/search/:word',
+    element: <SearchResultPage />,
+  },
+  {
+    path: '/mypage',
+    element: <Mypage />,
+  },
+  { path: '/error-report', element: <ErrorReportPage /> },
+  {
+    path: '/map',
+    element: <MapPage />,
+  },
+  // {
+  //   path: "*",
+  //   element: <ErrorPage />,
+  // },
 ]);
 
 const Router = () => {

src/apis/public/detailImage1.ts

@@ -0,0 +1,35 @@
+/** 이미지정보 조회 API */
+
+import { detailImage1ResItem } from '@/types/detailImage1';
+import { Response } from '@/types/public';
+
+import { publicDataClient } from '..';
+
+interface detailImage1Params {
+  numOfRows: number;
+  pageNo: number;
+  MobileOS: 'IOS' | 'AND' | 'WIN' | 'ETC';
+  contentId: number;
+  imageYN: 'Y' | 'N';
+  subImageYN: 'Y' | 'N';
+}
+
+export const getDetailImage1 = async (paramsInfo: detailImage1Params) => {
+  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<detailImage1ResItem[]>>(
+    `/detailImage1?${params}`,
+  );
+
+  return items;
+};

src/apis/public/detailIntro1.ts

@@ -0,0 +1,34 @@
+/** 소개정보 조회 API */
+
+import { detailIntro1ResItem } from '@/types/detailIntro1';
+import { Response } from '@/types/public';
+
+import { publicDataClient } from '..';
+
+interface detailIntro1Params {
+  numOfRows: number;
+  pageNo: number;
+  MobileOS: 'IOS' | 'AND' | 'WIN' | 'ETC';
+  contentId: number;
+  contentTypeId: string;
+}
+
+export const getdetailIntro1 = async (paramsInfo: detailIntro1Params) => {
+  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<detailIntro1ResItem[]>>(
+    `/detailIntro1?${params}`,
+  );
+
+  return items;
+};

src/apis/public/detailWithTour1.ts

@@ -0,0 +1,32 @@
+/** 무장애정보 조회 API */
+import { detailWithTour1ResItem } from '@/types/detailWithTour1';
+import { Response } from '@/types/public';
+
+import { publicDataClient } from '..';
+
+interface detailWithTour1Params {
+  numOfRows: number;
+  pageNo: number;
+  MobileOS: 'IOS' | 'AND' | 'WIN' | 'ETC';
+  contentId: number;
+}
+
+export const getDetailWithTour1 = async (paramsInfo: detailWithTour1Params) => {
+  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<detailWithTour1ResItem[]>>(
+    `/detailWithTour1?${params}`,
+  );
+
+  return items;
+};

src/assets/image/index.ts

@@ -1,15 +1,3 @@
-export { default as Sample01Image } from './img01.jpeg';
-export { default as Sample02Image } from './img02.jpeg';
-export { default as Sample03Image } from './img03.jpeg';
-export { default as Sample04Image } from './img04.jpeg';
-export { default as Sample05Image } from './img05.jpeg';
-export { default as Sample06Image } from './img06.jpeg';
-export { default as Sample07Image } from './img07.jpeg';
-export { default as Sample08Image } from './img08.jpeg';
-export { default as Sample09Image } from './img09.jpeg';
-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';

src/types/detailImage1.ts

@@ -0,0 +1,8 @@
+export interface detailImage1ResItem {
+  serialnum: string;
+  smallimageurl: string;
+  cpyrhtDivCd: string;
+  contentid: string;
+  imgname: string;
+  originimgurl: string;
+}

src/types/detailIntro1.ts

@@ -0,0 +1,127 @@
+export interface detailIntro1ResItem {
+  reservationlodging: string;
+  chkcreditcardleports: string;
+  chkcooking: string;
+  foodplace: string;
+  goodstay: string;
+  hanok: string;
+  infocenterlodging: string;
+  eventhomepage: string;
+  reservationfood: string;
+  chkcreditcardfood: string;
+  discountinfofood: string;
+  firstmenu: string;
+  chkcreditcardshopping: string;
+  chkpetshopping: string;
+  culturecenter: string;
+  fairday: string;
+  infocentershopping: string;
+  opendateshopping: string;
+  opentime: string;
+  parkingshopping: string;
+  restdateshopping: string;
+  restroom: string;
+  usetimefestival: string;
+  placeinfo: string;
+  eventplace: string;
+  eventstartdate: string;
+  infocenterculture: string;
+  festivalgrade: string;
+  restdateculture: string;
+  usefee: string;
+  usetimeculture: string;
+  scale: string;
+  parkingculture: string;
+  parkingfee: string;
+  smoking: string;
+  treatmenu: string;
+  scalelodging: string;
+  subfacility: string;
+  barbecue: string;
+  beauty: string;
+  beverage: string;
+  bicycle: string;
+  campfire: string;
+  fitness: string;
+  karaoke: string;
+  publicbath: string;
+  publicpc: string;
+  sauna: string;
+  seminar: string;
+  chkpetleports: string;
+  opentimefood: string;
+  packing: string;
+  spendtime: string;
+  agelimit: string;
+  taketime: string;
+  seat: string;
+  chkbabycarriage: string;
+  chkcreditcard: string;
+  chkpet: string;
+  expagerange: string;
+  expguide: string;
+  restdatefood: string;
+  scalefood: string;
+  opendatefood: string;
+  infocentertourcourse: string;
+  infocenterfood: string;
+  kidsfacility: string;
+  distance: string;
+  heritage1: string;
+  heritage2: string;
+  heritage3: string;
+  infocenter: string;
+  opendate: string;
+  parking: string;
+  restdate: string;
+  expagerangeleports: string;
+  infocenterleports: string;
+  openperiod: string;
+  parkingfeeleports: string;
+  parkingleports: string;
+  reservation: string;
+  restdateleports: string;
+  scaleleports: string;
+  discountinfofestival: string;
+  eventenddate: string;
+  spendtimefestival: string;
+  useseason: string;
+  chkpetculture: string;
+  discountinfo: string;
+  sponsor2tel: string;
+  sponsor1: string;
+  sponsor1tel: string;
+  sponsor2: string;
+  parkinglodging: string;
+  pickup: string;
+  roomcount: string;
+  reservationurl: string;
+  roomtype: string;
+  subevent: string;
+  chkbabycarriageleports: string;
+  checkouttime: string;
+  usetime: string;
+  accomcountleports: string;
+  benikia: string;
+  checkintime: string;
+  usefeeleports: string;
+  usetimeleports: string;
+  accomcountlodging: string;
+  saleitem: string;
+  saleitemcost: string;
+  scaleshopping: string;
+  shopguide: string;
+  accomcountculture: string;
+  parkingfood: string;
+  sports: string;
+  refundregulation: string;
+  contentid: string;
+  contenttypeid: string;
+  accomcount: string;
+  chkbabycarriageculture: string;
+  chkcreditcardculture: string;
+  program: string;
+  chkbabycarriageshopping: string;
+  bookingplace: string;
+  playtime: string;
+}

src/types/detailWithTour1.ts

@@ -0,0 +1,31 @@
+export interface detailWithTour1ResItem {
+  wheelchair: string;
+  exit: string;
+  elevator: string;
+  restroom: string;
+  guidesystem: string;
+  blindhandicapetc: string;
+  signguide: string;
+  videoguide: string;
+  hearingroom: string;
+  hearinghandicapetc: string;
+  stroller: string;
+  lactationroom: string;
+  babysparechair: string;
+  infantsfamilyetc: string;
+  auditorium: string;
+  room: string;
+  handicapetc: string;
+  braileblock: string;
+  helpdog: string;
+  guidehuman: string;
+  audioguide: string;
+  bigprint: string;
+  brailepromotion: string;
+  contentid: string;
+  parking: string;
+  route: string;
+  publictransport: string;
+  ticketoffice: string;
+  promotion: string;
+}

src/views/Detail/components/DetailInfo.tsx

@@ -2,24 +2,38 @@ import { css } from '@emotion/react';
 
 import { COLORS, FONTS } from '@/styles/constants';
 
-function DetailInfo() {
+import { detailInfoType } from '../pages/DetailPage';
+
+interface detailInfoProps {
+  detailInfo: detailInfoType;
+}
+
+const DetailInfo = (props: detailInfoProps) => {
+  const { detailInfo } = props;
+
   return (
     <section css={detailInfoContainer}>
       <div css={infoItem}>
         <span css={title}>휴무일</span>
-        <p css={content}>연중무휴</p>
+        <span
+          css={content}
+          dangerouslySetInnerHTML={{ __html: detailInfo.restDate }}></span>
       </div>
       <div css={infoItem}>
         <span css={title}>이용시간</span>
-        <p css={content}>주중 10:30~22:30 (매표마감 21:30)</p>
+        <span
+          dangerouslySetInnerHTML={{ __html: detailInfo.useTime }}
+          css={content}></span>
       </div>
       <div css={infoItem}>
         <span css={title}>이용요금</span>
-        <p css={content}>-</p>
+        <span
+          dangerouslySetInnerHTML={{ __html: detailInfo.useFee }}
+          css={content}></span>
       </div>
     </section>
   );
-}
+};
 
 export default DetailInfo;