From 10281141c2607541986843a0645b4f8b9449c17b Mon Sep 17 00:00:00 2001 From: thsk3 Date: Wed, 2 Oct 2024 15:29:38 +0900 Subject: [PATCH 1/4] =?UTF-8?q?Feat:=20PTrailer=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EA=B5=AC=ED=98=84=20-=20=ED=8F=B4?= =?UTF-8?q?=EB=8D=94=20=EC=83=9D=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/PTrailer/index.tsx | 19 +++++++++++++++++++ src/components/PTrailer/styles.ts | 7 +++++++ 2 files changed, 26 insertions(+) create mode 100644 src/components/PTrailer/index.tsx create mode 100644 src/components/PTrailer/styles.ts diff --git a/src/components/PTrailer/index.tsx b/src/components/PTrailer/index.tsx new file mode 100644 index 0000000..d272172 --- /dev/null +++ b/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 { + src: string; + vId: string; + vTitle: string; + width?: string; +} + +export const PTrailer = ({ src, vId, vTitle, width = '100%' }: PTrailerProps) => { + return ( + + + + + ); +}; diff --git a/src/components/PTrailer/styles.ts b/src/components/PTrailer/styles.ts new file mode 100644 index 0000000..4dcd87a --- /dev/null +++ b/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; +`; From 22e6aa8c709199a22e03a2cf21cad006d8d80000 Mon Sep 17 00:00:00 2001 From: thsk3 Date: Wed, 2 Oct 2024 15:30:04 +0900 Subject: [PATCH 2/4] =?UTF-8?q?Refactor:=20PTrailerDesc=20props=20?= =?UTF-8?q?=EC=9D=B4=EB=A6=84=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/PTrailerDesc/index.tsx | 6 +++--- src/components/PTrailerDesc/styles.ts | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/PTrailerDesc/index.tsx b/src/components/PTrailerDesc/index.tsx index 2585904..f743178 100644 --- a/src/components/PTrailerDesc/index.tsx +++ b/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 ( - {videoTitle} + {vTitle} ); }; diff --git a/src/components/PTrailerDesc/styles.ts b/src/components/PTrailerDesc/styles.ts index a21eb75..78d2e80 100644 --- a/src/components/PTrailerDesc/styles.ts +++ b/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; From bc97e1149ade7e8273d5747087ee603b45d4860c Mon Sep 17 00:00:00 2001 From: thsk3 Date: Wed, 2 Oct 2024 15:32:11 +0900 Subject: [PATCH 3/4] =?UTF-8?q?Refactor:=20PTrailerVideo=20props=EC=9D=B4?= =?UTF-8?q?=EB=A6=84=20=EC=88=98=EC=A0=95=20-=20ptrailer=EC=97=90=EC=84=9C?= =?UTF-8?q?=20=EC=9D=B4=EB=A6=84=EC=9D=84=20=EC=A2=80=20=EB=8D=94=20?= =?UTF-8?q?=EB=AA=85=ED=99=95=ED=95=98=EA=B2=8C=20=EB=B3=80=EA=B2=BD?= =?UTF-8?q?=ED=95=B4=EC=84=9C=20=EA=B0=99=EC=9D=B4=20=EB=B0=94=EA=BF=94?= =?UTF-8?q?=EC=A4=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/PTrailerVideo/index.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/PTrailerVideo/index.tsx b/src/components/PTrailerVideo/index.tsx index ac9925f..c666a12 100644 --- a/src/components/PTrailerVideo/index.tsx +++ b/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 ( -