Feat:DetailInfoPanel 및 PTrainerVedio 추가

src/components/DetailInfoPanel/index.tsx

@@ -0,0 +1,31 @@
+import { PosterWithDetailInfo } from '@/components/PosterWithDetailInfo';
+import * as S from './styles';
+import { PDetailType } from '@/types/pDetail';
+import { PTitle } from '@/components/PTitle';
+
+interface DetailInfoPanelProps extends PDetailType {
+  posterSrc: string;
+  initialIsHeartFilled?: boolean;
+  posterWidth?: string;
+  width?: string;
+  height?: string;
+  isNameInclude?: boolean;
+  title?: string;
+  onHeartClick?: (isHeartFilled: boolean) => void;
+  onUpdateScore?: (newScore: number) => void;
+}
+
+export const DetailInfoPanel = ({
+  title,
+  width = '70%',
+  posterWidth = '30%',
+  placeInfo,
+  ...rest
+}: DetailInfoPanelProps) => {
+  return (
+    <S.DetailInfoPanel>
+      <PTitle title={title ?? ''} {...rest} />
+      <PosterWithDetailInfo width={width} posterWidth={posterWidth} placeInfo={placeInfo} {...rest} />
+    </S.DetailInfoPanel>
+  );
+};

src/components/DetailInfoPanel/styles.ts

@@ -0,0 +1,3 @@
+import { styled } from 'styled-components';
+
+export const DetailInfoPanel = styled.div``;

src/components/PTitle/index.tsx

@@ -0,0 +1,17 @@
+import * as S from './styles';
+
+interface PTitleProps {
+  title: string;
+  category: string;
+}
+
+export const PTitle = ({ title, category }: PTitleProps) => {
+  return (
+    <S.PTitle>
+      {category}
+      {' <'}
+      {title}
+      {'>'}
+    </S.PTitle>
+  );
+};

src/components/PTitle/styles.ts

@@ -0,0 +1,4 @@
+import { H32 } from './../Text/index';
+import { styled } from 'styled-components';
+
+export const PTitle = styled(H32)``;

src/pages/DetailPage/index.tsx

@@ -2,22 +2,101 @@ import { useParams } from 'react-router-dom';
 import * as S from './styles';
 import usePDetail from '@/hooks/usePDetail';
 import { DetailImageContainer } from '@/components/DetailImageContainer';
+import { DetailInfoPanel } from '@/components/DetailInfoPanel';
+import useFacilityDetail from '@/hooks/useFacilityDetail';
+import { PlaceInfoType } from '@/types/placeInfo';
+import { PDetailType } from '@/types/pDetail';
+import useYoutube from '@/hooks/useYouTube';
+import { PTrailerVideo } from '@/components/PTrailerVideo';
+import { useEffect, useState } from 'react';
 
 export default function DetailPage() {
   const { id } = useParams<{ id: string }>();
-  const { data } = usePDetail({ mt20id: id });
+
+  const defaultPlaceInfo: PlaceInfoType = {
+    phone: '',
+    address: '',
+    shareUrl: '',
+    latitude: 0,
+    longitude: 0,
+  };
+
+  const defaultPDetailValue: PDetailType = {
+    name: '',
+    category: '',
+    place: '',
+    duration: '',
+    time: '',
+    spectator: '',
+    price: '',
+    score: 0,
+    placeInfo: defaultPlaceInfo,
+  };
+
+  const [pDetailValue, setPDetailValue] = useState<PDetailType>(defaultPDetailValue);
+  const [placeInfo, setPlaceInfo] = useState<PlaceInfoType>(defaultPlaceInfo);
+
+  const { data: performanceData, isLoading: isPerformanceLoading } = usePDetail({ mt20id: id });
+  const { data: facilityData, isLoading: isFacilityLoading } = useFacilityDetail({
+    mt10id: performanceData?.dbs?.db.mt10id,
+  });
+
+  const performanceDb = performanceData?.dbs?.db;
+  const facilityDb = facilityData?.dbs?.db;
+
+  useEffect(() => {
+    if (performanceData && facilityData) {
+      setPlaceInfo({
+        phone: facilityDb?.telno ?? '',
+        address: facilityDb?.adres ?? '',
+        shareUrl: facilityDb?.relateurl.length == 0 ? facilityDb?.relateurl[0] : '주소 정보 없음',
+        latitude: facilityDb?.la ?? 0,
+        longitude: facilityDb?.lo ?? 0,
+      });
+
+      setPDetailValue({
+        name: performanceDb?.prfnm as string,
+        category: performanceDb?.genrenm as string,
+        place: performanceDb?.fcltynm as string,
+        duration: `${performanceDb?.prfpdfrom as string}~${performanceDb?.prfpdto as string}`,
+        time: performanceDb?.prfruntime as string,
+        spectator: performanceDb?.prfage as string,
+        price: performanceDb?.pcseguidance as string,
+        score: 1, // 임시값 LocalStorage에서 불러와야함
+        placeInfo: placeInfo as PlaceInfoType,
+      });
+    }
+  }, [performanceData, facilityData]);
+
+  const videoList = useYoutube({
+    id: performanceDb?.mt20id ?? '',
+    name: performanceDb?.prfnm ?? '',
+    poster: performanceDb?.poster ?? '',
+  });
+
+  const onHeartClick = () => {};
+
+  const onUpdateScore = () => {};
 
   return (
     <S.DetailPage>
-      DetailPage {id}
-      {/* DetailInfoPanel 넣기 */}
+      <DetailInfoPanel
+        title={pDetailValue?.name as string}
+        posterSrc={performanceData?.dbs?.db.poster as string}
+        initialIsHeartFilled={false}
+        posterWidth="30%"
+        isNameInclude={false}
+        onHeartClick={onHeartClick}
+        onUpdateScore={onUpdateScore}
+        {...pDetailValue}
+      />
       <S.Panel>
         <S.Title>공연 예고편</S.Title>
-        {/* Trailer 넣기 */}
+        <PTrailerVideo vId={videoList.vItem?.vId ?? ''} />
       </S.Panel>
       <S.Panel>
         <S.Title>상세 이미지</S.Title>
-        <DetailImageContainer detailImgList={data?.dbs?.db.styurls.styurl.map(styurl => ({ src: styurl })) || []} />
+        <DetailImageContainer detailImgList={performanceDb?.styurls.styurl.map(styurl => ({ src: styurl })) || []} />
       </S.Panel>
     </S.DetailPage>
   );

src/types/apis.ts

@@ -388,7 +388,7 @@ export type CommonResponseType = {
    * 티켓가격
    * @example "VIP석 150,000원, R석 120,000원, S석 90,000원, A석 60,000원"
    */
-  pcseguidanc: string;
+  pcseguidance: string;
   /**
    * 주소
    * @example "서울특별시 송파구 올림픽로 424"
@@ -504,7 +504,7 @@ type Db = Pick<
   | 'elevbarrier'
   | 'parkinglot'
   | 'area'
-  | 'pcseguidanc'
+  | 'pcseguidance'
   | 'adres'
 >;