Feat: DetailPage

prgrms-fe-devcourse · Oct 7, 2024 · 676d576 · 676d576
1 parent a1495c3
commit 676d576
Show file tree

Hide file tree

Showing 9 changed files with 65 additions and 109 deletions.
diff --git a/src/components/DetailImageContainer/index.tsx b/src/components/DetailImageContainer/index.tsx
@@ -2,14 +2,14 @@ import { DetailImage } from '@/components/DetailImage';
 import * as S from './styles';
 
 interface DetailImageContainerProps {
-  detailImgList: { src: string }[];
+  detailImgUrlList: string[];
 }
 
-export const DetailImageContainer = ({ detailImgList }: DetailImageContainerProps) => {
+export const DetailImageContainer = ({ detailImgUrlList: detailImgList }: DetailImageContainerProps) => {
   return (
     <S.DetailImageContainer>
-      {detailImgList.map((detailImg, index) => (
-        <DetailImage key={index} src={detailImg.src} />
+      {detailImgList.map((detailImgUrl, index) => (
+        <DetailImage key={index} src={detailImgUrl} />
       ))}
     </S.DetailImageContainer>
   );

diff --git a/src/components/DetailInfoPanel/index.tsx b/src/components/DetailInfoPanel/index.tsx
@@ -15,17 +15,11 @@ interface DetailInfoPanelProps extends PDetailType {
   onUpdateScore?: (newScore: number) => void;
 }
 
-export const DetailInfoPanel = ({
-  title,
-  width = '70%',
-  posterWidth = '30%',
-  placeInfo,
-  ...rest
-}: DetailInfoPanelProps) => {
+export const DetailInfoPanel = ({ title, width = '70%', posterWidth = '30%', ...rest }: DetailInfoPanelProps) => {
   return (
     <S.DetailInfoPanel>
       <PTitle title={title ?? ''} {...rest} />
-      <PosterWithDetailInfo width={width} posterWidth={posterWidth} placeInfo={placeInfo} {...rest} />
+      <PosterWithDetailInfo width={width} posterWidth={posterWidth} {...rest} />
     </S.DetailInfoPanel>
   );
 };
diff --git a/src/components/MapModal/index.tsx b/src/components/MapModal/index.tsx
@@ -3,17 +3,20 @@ import * as S from './styles';
 import ReactDOM from 'react-dom';
 import { H16, P16 } from '@/components/Text';
 import { Map, MapMarker } from 'react-kakao-maps-sdk';
-import { PlaceInfoType } from '@/types/placeInfo';
+import useFacilityDetail from '@/hooks/useFacilityDetail';
+import { Loader } from '@/components/Loader';
 
-interface MapModalProps extends PlaceInfoType {
+interface MapModalProps {
   place: string;
   visible: boolean;
   width?: number;
   height?: number;
   onClose: () => void;
+  id: string;
 }
 
-export const MapModal = ({ place, phone, address, shareUrl, visible, latitude, longitude, onClose }: MapModalProps) => {
+export const MapModal = ({ place, visible, onClose, id }: MapModalProps) => {
+  const { data, isLoading } = useFacilityDetail({ mt10id: id });
   const el = useMemo(() => document.createElement('div'), []);
 
   useEffect(() => {
@@ -32,16 +35,22 @@ export const MapModal = ({ place, phone, address, shareUrl, visible, latitude, l
           <H16>공연장 정보</H16>
           <S.ModalCloseBtn onClick={onClose}>X</S.ModalCloseBtn>
         </S.ModalHeader>
-
-        <S.ModalPlaceInfo>
-          <H16>{place}</H16>
-          <P16>전화번호 : {phone}</P16>
-          <P16>주소 : {address}</P16>
-          <P16>홈페이지 : {shareUrl}</P16>
-          <Map center={{ lat: latitude, lng: longitude }} style={{ width: '100%', height: '100%' }}>
-            <MapMarker position={{ lat: latitude, lng: longitude }}></MapMarker>
-          </Map>
-        </S.ModalPlaceInfo>
+        {isLoading ? (
+          <Loader />
+        ) : (
+          <S.ModalPlaceInfo>
+            <H16>{place}</H16>
+            <P16>전화번호 : {data?.dbs?.db.telno}</P16>
+            <P16>주소 : {data?.dbs?.db.adres}</P16>
+            {/* <P16>홈페이지 : {data?.dbs?.db.relateurl || ''}</P16> */}
+            <Map
+              center={{ lat: data?.dbs?.db.la || 37, lng: data?.dbs?.db.lo || 127 }}
+              style={{ width: '100%', height: '100%' }}
+            >
+              <MapMarker position={{ lat: data?.dbs?.db.la || 37, lng: data?.dbs?.db.lo || 127 }}></MapMarker>
+            </Map>
+          </S.ModalPlaceInfo>
+        )}
       </S.ModalContainer>
     </S.MapModal>,
     el,

diff --git a/src/components/PDetailInfo/index.tsx b/src/components/PDetailInfo/index.tsx
@@ -23,8 +23,8 @@ export const PDetailInfo = ({
   width = '400px',
   height = '250px',
   isNameInclude = false,
+  id,
   onUpdateScore,
-  placeInfo,
 }: PDetailInfoProps) => {
   const [isMapModalVisible, setIsMapModalVisible] = useState(false);
   const [currentScore, setCurrentScore] = useState(score);
@@ -63,7 +63,7 @@ export const PDetailInfo = ({
       <S.Value>{price}</S.Value>
       <S.Title>평점</S.Title>
       <StarIconContainer initialRate={currentScore} updateStarRating={onClickStarButtons} />
-      <MapModal {...placeInfo} place={place} visible={isMapModalVisible} onClose={toggleMapModal} />
+      <MapModal place={place} visible={isMapModalVisible} onClose={toggleMapModal} id={id} />
     </S.PDetailInfo>
   );
 };
diff --git a/src/components/Poster/index.tsx b/src/components/Poster/index.tsx
@@ -12,9 +12,8 @@ interface PosterProps {
 export const Poster = ({ id, src, width = '100%', rank }: PosterProps) => {
   const navigate = useNavigate();
   const navigatePDetail = () => {
-    console.log(id);
     if (!id) return;
-    navigate(`/detail/:${id}`);
+    navigate(`/detail/${id}`);
   };
   const height = (4 / 3) * extractNumber(width) + width.replace(extractNumber(width).toString(), '');
   return (

diff --git a/src/components/PosterWithDetailInfo/index.tsx b/src/components/PosterWithDetailInfo/index.tsx
@@ -14,17 +14,12 @@ interface PosterWithDetailInfoProps extends PDetailType {
   onUpdateScore?: (newScore: number) => void;
 }
 
-export const PosterWithDetailInfo = ({
-  width = '70%',
-  posterWidth = '30%',
-  placeInfo,
-  ...rest
-}: PosterWithDetailInfoProps) => {
+export const PosterWithDetailInfo = ({ width = '70%', posterWidth = '30%', ...rest }: PosterWithDetailInfoProps) => {
   return (
     <S.PosterWithDetailInfo width={width}>
-      <S.StyledPosterWithButtons width={posterWidth} shareUrl={placeInfo.shareUrl} {...rest} />
+      <S.StyledPosterWithButtons width={posterWidth} shareUrl={window.location.href} {...rest} />
       <S.PDetailContainer>
-        <PDetailInfo width="100%" placeInfo={placeInfo} {...rest} />
+        <PDetailInfo width="100%" {...rest} />
         <PDetailReviewForm />
       </S.PDetailContainer>
     </S.PosterWithDetailInfo>

diff --git a/src/pages/DetailPage/index.tsx b/src/pages/DetailPage/index.tsx
@@ -3,100 +3,50 @@ 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';
+import { Loader } from '@/components/Loader';
+import { convertEmptyObject, convertToArray } from '@/utils/ConvertToArray';
 
 export default function DetailPage() {
   const { id } = useParams<{ id: string }>();
-
-  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 { data, isLoading } = usePDetail({ mt20id: id });
 
   const videoList = useYoutube({
-    id: performanceDb?.mt20id ?? '',
-    name: performanceDb?.prfnm ?? '',
-    poster: performanceDb?.poster ?? '',
+    id: data?.dbs?.db.mt20id ?? '',
+    name: data?.dbs?.db.prfnm ?? '',
+    poster: data?.dbs?.db.poster ?? '',
   });
 
   const onHeartClick = () => {};
-
   const onUpdateScore = () => {};
-
+  console.log(data?.dbs?.db);
+  if (isLoading) return <Loader />;
   return (
     <S.DetailPage>
       <DetailInfoPanel
-        title={pDetailValue?.name as string}
-        posterSrc={performanceData?.dbs?.db.poster as string}
-        initialIsHeartFilled={false}
+        title={data?.dbs?.db.prfnm || ''}
+        posterSrc={data?.dbs?.db.poster || ''}
         posterWidth="30%"
-        isNameInclude={false}
         onHeartClick={onHeartClick}
         onUpdateScore={onUpdateScore}
-        {...pDetailValue}
+        name={data?.dbs?.db.prfnm || ''}
+        category={data?.dbs?.db.genrenm || ''}
+        place={data?.dbs?.db.fcltynm || ''}
+        duration={data?.dbs?.db.prfpdfrom + '~' + data?.dbs?.db.prfpdto}
+        time={convertEmptyObject(data?.dbs?.db.prfruntime)}
+        spectator={data?.dbs?.db.prfage || ''}
+        price={data?.dbs?.db.pcseguidance || ''}
+        score={2}
+        id={data?.dbs?.db.mt10id || ''}
       />
       <S.Panel>
         <S.Title>공연 예고편</S.Title>
         <PTrailerVideo vId={videoList.vItem?.vId ?? ''} />
       </S.Panel>
       <S.Panel>
         <S.Title>상세 이미지</S.Title>
-        <DetailImageContainer detailImgList={performanceDb?.styurls.styurl.map(styurl => ({ src: styurl })) || []} />
+        <DetailImageContainer detailImgUrlList={convertToArray(data?.dbs?.db.styurls.styurl)} />
       </S.Panel>
     </S.DetailPage>
   );

diff --git a/src/types/pDetail.ts b/src/types/pDetail.ts
@@ -1,4 +1,3 @@
-import { PlaceInfoType } from '@/types/placeInfo';
 export type PDetailType = {
   name: string;
   category: string;
@@ -8,6 +7,5 @@ export type PDetailType = {
   spectator: string;
   price: string;
   score: number;
-  placeInfo: PlaceInfoType;
   id: string;
 };
diff --git a/src/utils/ConvertToArray.ts b/src/utils/ConvertToArray.ts
@@ -17,3 +17,14 @@ export default function FillterGenreRank(pList: Boxof[] | Boxof | undefined, sli
   }
   return copy;
 }
+
+export const convertToArray = (arg: unknown) => {
+  if (Array.isArray(arg)) return arg;
+  // Array가 아님
+  return [arg];
+};
+
+export const convertEmptyObject = (obj: unknown) => {
+  const json = JSON.stringify(obj);
+  return json === '{}' ? '' : (obj as string);
+};