feat: building 호텔 세부정보 분기 처리

jiohjung98 · Oct 25, 2024 · a0a173c · a0a173c
1 parent f490037
commit a0a173c
Show file tree

Hide file tree

Showing 4 changed files with 64 additions and 14 deletions.
diff --git a/src/app/product/detail/building/[id]/page.tsx b/src/app/product/detail/building/[id]/page.tsx
@@ -220,7 +220,11 @@ const BuildingDetailpage = (props: any) => {
       ) : sort === 'profit' ? (
         <BuildingProfit url={url} />
       ) : sort === 'detail' ? (
-        <BuildingProductDetail url={url} rentType={data?.rentType} />
+        <BuildingProductDetail
+          url={url}
+          rentType={data?.rentType}
+          stayType={data?.stayType}
+        />
       ) : undefined}
     </div>
   );

diff --git a/src/components/product/detail/building/BuildingProductDetail.tsx b/src/components/product/detail/building/BuildingProductDetail.tsx
@@ -4,26 +4,50 @@ import FloatingPopulationChart from './chart/FloatingPopulationChart';
 import PopulationInformationChart from './chart/PopulationInformationChart';
 import PublicTransport from './PublicTransport';
 import OfficialPriceChart from './chart/OfficialPriceChart';
+import AccommodationVisitorsChart from './chart/AccommodationVisitorsChart';
+import AccommoationRateChart from './chart/AccommodationRateChart';
 const BuildingProductDetail = ({
   url,
-  rentType
+  rentType,
+  stayType
 }: {
   url: string;
   rentType: boolean | undefined;
+  stayType: boolean | undefined;
 }) => {
+  console.log(rentType);
+  console.log(stayType);
   return (
     <div className="max-w-[1000px] mx-auto mt-[32px]">
-      <div>
-        <span className=" text-2xl font-bold mb-[20px]"> 상권 임대료 </span>
-        <span className="text-lg ml-4 text-red-500"> (단위: 천원/m&sup2;)</span>
-      </div>
+      {stayType ? (
+        <>
+          <div>
+            <span className=" text-2xl font-bold mb-[20px]">숙박 유형별 방문자 수</span>
+          </div>
 
-      <CommercialRentChart rentType={rentType} />
-      <div>
-        <span className=" text-2xl font-bold mb-[20px]">상권 공실률</span>
-        <span className="text-lg ml-4 text-red-500"> (단위: %)</span>
-      </div>
-      <CommercialVacancyRateChart rentType={rentType} />
+          <AccommodationVisitorsChart />
+          <div>
+            <span className=" text-2xl font-bold mb-[20px]">
+              숙박 방문자 비율 / 평균 숙박일
+            </span>
+          </div>
+          <AccommoationRateChart />
+        </>
+      ) : (
+        <>
+          {' '}
+          <div>
+            <span className=" text-2xl font-bold mb-[20px]"> 상권 임대료 </span>
+            <span className="text-lg ml-4 text-red-500"> (단위: 천원/m&sup2;)</span>
+          </div>
+          <CommercialRentChart rentType={rentType} />
+          <div>
+            <span className=" text-2xl font-bold mb-[20px]">상권 공실률</span>
+            <span className="text-lg ml-4 text-red-500"> (단위: %)</span>
+          </div>
+          <CommercialVacancyRateChart rentType={rentType} />
+        </>
+      )}
 
       <div>
         <span className=" text-2xl font-bold mb-[20px]">공시지가</span>

diff --git a/src/components/product/detail/building/chart/FloatingPopulationChart.tsx b/src/components/product/detail/building/chart/FloatingPopulationChart.tsx
@@ -1,10 +1,8 @@
 import React from 'react';
 import { Bar } from 'react-chartjs-2';
-
 import { useQuery } from '@tanstack/react-query';
 import axios from 'axios';
 import { usePathname } from 'next/navigation';
-import { it } from 'node:test';
 import { ISubwayData } from '@/types/BuildingProductType';
 
 const FloatingPopulationChart = () => {

diff --git a/src/types/BuildingProductType.ts b/src/types/BuildingProductType.ts
@@ -37,6 +37,7 @@ export interface IBuildingProductDetail {
   link: string;
   rentType: boolean;
   bookmark: boolean;
+  stayType: boolean;
 }
 
 export interface IBuildingProductProfitDetail {
@@ -117,3 +118,26 @@ export interface ISubwayData {
   subwayDay: ISubwayDayItem[];
   subwayMonth: ISubwayMonthItem[];
 }
+
+export interface ISaydayItem {
+  day: string;
+  noday: number;
+  oneday: number;
+  twoday: number;
+  threeday: number;
+  total: number;
+}
+
+export interface IStayDayData {
+  object: ISaydayItem[];
+}
+
+export interface IStayRateItem {
+  day: string;
+  rate: number;
+  value: number;
+}
+
+export interface IStayRateData {
+  object: IStayRateItem[];
+}