Merge pull request #135 from prgrms-fe-devcourse/120-feature/ptrailer…

…-component

120 feature/ptrailer component

src/components/PTrailer/index.tsx

@@ -0,0 +1,19 @@
+import { PTrailerVideo } from '@/components/PTrailerVideo';
+import { PTrailerDesc } from '@/components/PTrailerDesc';
+import * as S from './styles';
+
+interface PTrailerProps {
+  postSrc: string;
+  vId: string;
+  vTitle: string;
+  width?: string;
+}
+
+export const PTrailer = ({ postSrc, vId, vTitle, width = '100%' }: PTrailerProps) => {
+  return (
+    <S.PTrailer width={width}>
+      <PTrailerVideo vId={vId} />
+      <PTrailerDesc src={postSrc} vTitle={vTitle} />
+    </S.PTrailer>
+  );
+};

src/components/PTrailer/styles.ts

@@ -0,0 +1,7 @@
+import { styled } from 'styled-components';
+
+export const PTrailer = styled.div<{ width: string }>`
+  width: ${({ width }) => width};
+  border-radius: 1rem;
+  overflow: hidden;
+`;

src/components/PTrailerDesc/index.tsx

@@ -4,15 +4,15 @@ import { P16 } from '@/components/Text';
 
 interface PTrailerDescProps {
   src: string;
-  videoTitle: string;
+  vTitle: string;
   width?: string;
 }
 
-export const PTrailerDesc = ({ src, videoTitle, width = '100%' }: PTrailerDescProps) => {
+export const PTrailerDesc = ({ src, vTitle, width = '100%' }: PTrailerDescProps) => {
   return (
     <S.PTrailerDesc width={width}>
       <Poster src={src} width="50px"></Poster>
-      <P16>{videoTitle}</P16>
+      <P16>{vTitle}</P16>
     </S.PTrailerDesc>
   );
 };

src/components/PTrailerDesc/styles.ts

@@ -6,7 +6,7 @@ export const PTrailerDesc = styled.div<{ width: string }>`
   align-items: center;
   padding: 1rem;
   border: 1px solid ${({ theme }) => theme.colors.gray};
-  border-radius: 1rem;
+  border-radius: 0 0 1rem 1rem;
 
   & > div {
     border-radius: 0.5rem;

src/components/PTrailerVideo/index.tsx

@@ -1,12 +1,12 @@
 import * as S from './styles';
 interface PTrailerVideoProps {
-  src: string;
+  vId: string;
   width?: string;
 }
-export const PTrailerVideo = ({ src, width = '100%' }: PTrailerVideoProps) => {
+export const PTrailerVideo = ({ vId, width = '100%' }: PTrailerVideoProps) => {
   return (
     <S.PTrailerVideo width={width}>
-      <iframe src={`https://www.youtube.com/embed/${src}`} />
+      <iframe src={`https://www.youtube.com/embed/${vId}`} />
     </S.PTrailerVideo>
   );
 };