feat: 채널 페이지 제작 #116

Kernel360 · Jan 23, 2024 · 2becdd2 · 2becdd2
1 parent 6c37cbf
commit 2becdd2
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 23 deletions.
diff --git a/src/app/channel/page.tsx b/src/app/channel/page.tsx
@@ -1,8 +1,47 @@
-import BottomNav from '@/components/shared/bottom-nav/BottomNav';
+import classNames from 'classnames/bind';
+
+import ChannelArticle from '@/components/shared/channel-article/ChannelArticle';
+import Header from '@/components/shared/header/Header';
+import BottomNav from '@shared/bottom-nav/BottomNav';
+
+import styles from './page.module.scss';
+
+const cx = classNames.bind(styles);
+
+const dataList = [{
+  id: 1,
+  src: 'https://www.youtube.com/embed/DNJ5JqLw9YM?si=6hCG8Rz87EMX-LQE',
+  alt: 'YouTube video player',
+  profile: '/assets/profile.JPG',
+  title: '일을 위해 2 시간 지브리 bmg 🚖 편안한 지브리 음악, 지브리 스튜디오',
+  description: '일을 위해 2 시간 지브리 bmg 🚖 편안한 지브리 음악, 지브리 스튜디오',
+}, {
+  id: 2,
+  src: 'https://www.youtube.com/embed/m6XwKBMsZk0?si=K3BkPDtIoelv-ZI5',
+  alt: 'YouTube video player',
+  profile: '/assets/video.png',
+  title: 'Teddy Swims - Cruel Summer (Taylor Swift cover) in the Live Lounge',
+  description: 'Teddy Swims - Cruel Summer (Taylor Swift cover) in the Live Lounge',
+}, {
+  id: 3,
+  src: 'https://www.youtube.com/embed/_QWZQh0YYWA?si=gGqweAyaiuSp9sBN',
+  alt: 'YouTube video player',
+  profile: '/assets/video.png',
+  title: 'Teddy Swims - You\'re Still The One (Shania Twain Cover)',
+  description: 'Teddy Swims - You\'re Still The One (Shania Twain Cover)',
+}];
 
 function ChannelPage() {
   return (
     <div>
+      <Header className={cx('header')} isDisplayLogo={false} />
+      <main className={cx('mainContainer')}>
+        {dataList.map((data) => {
+          return (
+            <ChannelArticle key={data.id} data={data} />
+          );
+        })}
+      </main>
       <BottomNav />
     </div>
   );

diff --git a/src/components/shared/channel-article/ChannelArticle.tsx b/src/components/shared/channel-article/ChannelArticle.tsx
@@ -5,49 +5,43 @@ import Text from '@shared/text/Text';
 
 import styles from './ChannelArticle.module.scss';
 import ChannelMoreBtn from './ChannelMoreBtn';
-// import { IVideoData } from './types/ChannelArticleType';
+import { IVideoData } from './types/ChannelArticleType';
 
-// interface ChannelArticleProps {
-//   data: IVideoData;
-// }
+interface ChannelArticleProps {
+  data: IVideoData;
+}
 /*
  * data는 백엔드에서 넘어오는 데이터를 참고해서 다시 바뀔 수 있음
- * Channel 페이지 구현시 data에 맞게 값 넣어줄 것
 */
 const cx = classNames.bind(styles);
 
-// function ChannelArticle({ data }: ChannelArticleProps) {
-function ChannelArticle() {
+function ChannelArticle({ data }: ChannelArticleProps) {
   return (
     <article className={cx('article')}>
       <div className={cx('videoContainer')}>
-        <iframe
-        //   src={data.src}
-          src="https://www.youtube.com/embed/DNJ5JqLw9YM?si=6hCG8Rz87EMX-LQE"
-          title="YouTube video player"
-          allowFullScreen
+        <object
+          data={data.src}
+          type="text/html"
+          aria-label={data.title}
         />
       </div>
       <div className={cx('videoInfoContainer')}>
         <div className={cx('imgBox')}>
           <Image
-            // src={data.profile}
-            src="/assets/video.png"
+            src={data.profile}
             alt="유튜버 프로필 이미지"
             width={0}
             height={0}
             layout="responsive"
           />
         </div>
         <div className={cx('infoBox')}>
-          {/* <Text className="ellipsis" typography="t6" whiteSpace="nowrap">
-          {data.title}
-          </Text> */}
-          <Text className="ellipsis" typography="t6" whiteSpace="nowrap">title</Text>
-          {/* <Text className="ellipsis" typography="t7" color="gray300" whiteSpace="nowrap">
-          {data.description}
-          </Text> */}
-          <Text className="ellipsis" typography="t7" color="gray300" whiteSpace="nowrap">description</Text>
+          <Text className="ellipsis" typography="t6" whiteSpace="nowrap">
+            {data.title}
+          </Text>
+          <Text className="ellipsis" typography="t7" color="gray300" whiteSpace="nowrap">
+            {data.description}
+          </Text>
         </div>
         <ChannelMoreBtn />
       </div>