Merge pull request #133 from prgrms-fe-devcourse/119-feature/ptrailer…

…desc-component

Feat: PTrailerDesc 컴포넌트 구현

src/components/PTrailerDesc/index.tsx

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

src/components/PTrailerDesc/styles.ts

@@ -0,0 +1,25 @@
+import { styled } from 'styled-components';
+
+export const PTrailerDesc = styled.div<{ width: string }>`
+  width: ${({ width }) => width};
+  display: flex;
+  align-items: center;
+  padding: 1rem;
+  border: 1px solid ${({ theme }) => theme.colors.gray};
+  border-radius: 1rem;
+
+  & > div {
+    border-radius: 0.5rem;
+    overflow: hidden;
+    flex-shrink: 0;
+  }
+  & > p {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    padding-left: 1rem;
+    font-weight: 700;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+`;