Feat: DetailPage 기본 구조

src/pages/DetailPage/index.tsx

@@ -1,8 +1,24 @@
 import { useParams } from 'react-router-dom';
 import * as S from './styles';
+import usePDetail from '@/hooks/usePDetail';
+import { DetailImageContainer } from '@/components/DetailImageContainer';
 
 export default function DetailPage() {
   const { id } = useParams<{ id: string }>();
+  const { data } = usePDetail({ mt20id: id });
 
-  return <S.DetailPage>DetailPage {id}</S.DetailPage>;
+  return (
+    <S.DetailPage>
+      DetailPage {id}
+      {/* DetailInfoPanel 넣기 */}
+      <S.Panel>
+        <S.Title>공연 예고편</S.Title>
+        {/* Trailer 넣기 */}
+      </S.Panel>
+      <S.Panel>
+        <S.Title>상세 이미지</S.Title>
+        <DetailImageContainer detailImgList={data?.dbs?.db.styurls.styurl.map(styurl => ({ src: styurl })) || []} />
+      </S.Panel>
+    </S.DetailPage>
+  );
 }

src/pages/DetailPage/styles.ts

@@ -1,6 +1,15 @@
+import { H24 } from '@/components/Text';
 import { styled } from 'styled-components';
 
 export const DetailPage = styled.div`
   margin: 0 auto;
   max-width: ${({ theme }) => theme.layout.max_width};
 `;
+
+export const Title = styled(H24)`
+  margin-bottom: 20px;
+`;
+
+export const Panel = styled.div`
+  margin-bottom: 100px;
+`;