Post video

src/api/addVideo.ts

@@ -2,10 +2,8 @@ import axios from 'axios';
 
 export type Video = {
   id: string,
-  snippet: {
-    title: string,
-    description: string,
-  }
+  title: string,
+  description: string,
 };
 
 export type PlayList = {
@@ -22,6 +20,7 @@ type VideosResponse = {
     totalResults: number,
     resultsPerPage: number,
   },
+  nextPageToken: string | undefined,
 };
 
 type PlayListsResponse = {
@@ -30,9 +29,47 @@ type PlayListsResponse = {
     totalResults: number,
     resultsPerPage: number,
   },
+  nextPageToken: string | undefined,
+};
+
+type PlaylistVideo = {
+  snippet: {
+    title: string,
+    description: string,
+    resourceId: {
+      videoId: string,
+    },
+  },
+};
+
+type LikeVideo = {
+  id: string,
+  snippet: {
+    title: string,
+    description: string,
+  },
+};
+
+type SearchVideo = {
+  id: {
+    videoId: string,
+  },
+  snippet: {
+    title: string,
+    description: string,
+  },
+};
+
+type AxiosVideoResponse<T> = {
+  items: Array<T>,
+  pageInfo: {
+    totalResults: number,
+    resultsPerPage: number,
+  },
+  nextPageToken: string | undefined,
 };
 
-const getPlayLists = async (pageToken = ""): Promise<PlayListsResponse> => {
+const getPlayLists = async (pageToken: string|undefined = undefined): Promise<PlayListsResponse> => {
   const res = await axios.request<PlayListsResponse>({
     baseURL: API_URL,
     url: '/v1/contents/playlists',
@@ -44,8 +81,8 @@ const getPlayLists = async (pageToken = ""): Promise<PlayListsResponse> => {
   return res.data;
 };
 
-const getPlayList = async (playListId: string, pageToken = ""): Promise<VideosResponse> => {
-  const res = await axios.request<VideosResponse>({
+const getPlayList = async (playListId: string, pageToken: string|undefined = undefined): Promise<VideosResponse> => {
+  const res = await axios.request<AxiosVideoResponse<PlaylistVideo>>({
     baseURL: API_URL,
     url: '/v1/contents/playlist',
     method: 'get',
@@ -54,23 +91,43 @@ const getPlayList = async (playListId: string, pageToken = ""): Promise<VideosRe
       pageToken: pageToken,
     },
   });
-  return res.data;
+
+  const videos = res.data.items.map(val => ({
+    id: val.snippet.resourceId.videoId,
+    title: val.snippet.title,
+    description: val.snippet.description,
+  }));
+  return {
+    items: videos,
+    pageInfo: res.data.pageInfo,
+    nextPageToken: res.data.nextPageToken,
+  }
 };
 
-const getLikeList = async (pageToken = ""): Promise<VideosResponse> => {
-  const res = await axios.request<VideosResponse>({
+const getLikeList = async (pageToken: string|undefined = undefined): Promise<VideosResponse> => {
+  const res = await axios.request<AxiosVideoResponse<LikeVideo>>({
     baseURL: API_URL,
     url: '/v1/contents/likelist',
     method: 'get',
     params: {
       pageToken: pageToken,
     },
   });
-  return res.data;
+
+  const videos = res.data.items.map(val => ({
+    id: val.id,
+    title: val.snippet.title,
+    description: val.snippet.description,
+  }));
+  return {
+    items: videos,
+    pageInfo: res.data.pageInfo,
+    nextPageToken: res.data.nextPageToken,
+  }
 };
 
-const getSearchList = async (keyword: string, pageToken = ""): Promise<VideosResponse> => {
-  const res = await axios.request<VideosResponse>({
+const getSearchList = async (keyword: string, pageToken: string|undefined = undefined): Promise<VideosResponse> => {
+  const res = await axios.request<AxiosVideoResponse<SearchVideo>>({
     baseURL: API_URL,
     url: '/v1/contents/search',
     method: 'get',
@@ -79,12 +136,38 @@ const getSearchList = async (keyword: string, pageToken = ""): Promise<VideosRes
       pageToken: pageToken,
     },
   });
-  return res.data;
+
+  const videos = res.data.items.map(val => ({
+    id: val.id.videoId,
+    title: val.snippet.title,
+    description: val.snippet.description,
+  }));
+  return {
+    items: videos,
+    pageInfo: res.data.pageInfo,
+    nextPageToken: res.data.nextPageToken,
+  }
 };
 
+const postVideo = async (videoId: string, title: string, description: string, tags: Array<string>): Promise<boolean> => {
+  const res = await axios.request({
+    baseURL: API_URL,
+    url: '/v1/post/video',
+    method: 'post',
+    data: {
+      videoId: videoId,
+      title: title,
+      description: description,
+      tags: tags,
+    },
+  });
+  return res.status == 200;
+}
+
 export {
   getPlayLists,
   getPlayList,
   getLikeList,
   getSearchList,
+  postVideo,
 };

src/component/content/Add/AddVideo.css

@@ -62,4 +62,9 @@
 .add-video-submit-button {
   font-size: 20px;
   width: 100px;
+}
+
+.add-video-youtube-video {
+  width: 100%;
+  height: 100%;
 }

src/component/content/Add/AddVideo.tsx

@@ -1,24 +1,40 @@
 import React, { useEffect, useState } from "react";
 import AddVideoHook from "../../../hooks/AddVideo";
-
 import AddVideoModal from "./AddVideoModal";
+import GetLogin from "../../../hooks/GetLogin";
 import { FaTimes } from 'react-icons/fa';
 import "./AddVideo.css";
+import { Redirect } from "react-router-dom";
+import { postVideo } from "../../../api/addVideo";
+import { maxTagCount, maxTagLength, titleMaxLength, titleMinLength, descriptionMaxLength, tagAllowedPattern } from "../../../constant/Addvideo";
 
-const getYoutubeThumbnailUrl = (id: string) => {
-  return `https://img.youtube.com/vi/${id}/0.jpg`;
+const getYoutubeiframe = (id: string) => (
+  <iframe src={`https://www.youtube.com/embed/${id}`}
+        frameBorder='0'
+        allow='autoplay; encrypted-media'
+        allowFullScreen
+        title='video'
+        className='add-video-youtube-video'
+  />
+);
+const setYoutubeId = (id: string) => {
+  return `https://www.youtube.com/watch?v=${id}`
 }
-const maxTagCount = 5;
 
 const AddVideo: React.FC = () => {
+  const { userInfo } = GetLogin();
   const { id, url, title, description, tags, init, setUrl, setTitle, setDescription, addTag, deleteTag } = AddVideoHook();
   const [tag, setTag] = useState("");
 
   // mount될 때만 init함수가 실행되도록 하고 싶어서 lint warning을 없앴습니다.
   // eslint-disable-next-line react-hooks/exhaustive-deps
   useEffect(init, []);
 
-  // TODO: implement debounce
+  if(userInfo == null) {
+    alert("로그인이 필요한 페이지입니다.");
+    return <Redirect to="/"/>;
+  }
+
   const handleUrlChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     setUrl(e.target.value);
   };
@@ -31,7 +47,7 @@ const AddVideo: React.FC = () => {
 
   // is memoization needed?
   const thumbnailView = (id != "") ? (<div className="add-video-thumbnail-container">
-    <img src={getYoutubeThumbnailUrl(id)} />
+    {getYoutubeiframe(id)}
   </div>) : (<div className="add-video-thumbnail-container">
     <div>
       <FaTimes className="add-video-thumbnail-times" />
@@ -72,18 +88,31 @@ const AddVideo: React.FC = () => {
       if(tag == "") {
         return;
       }
+      if(!tagAllowedPattern.test(tag)) {
+        alert("태그에는 한글, 영어, 숫자만 입력 가능합니다.");
+        return;
+      }
+      if(tag.length >= maxTagLength) {
+        alert(`한 태그의 길이는 ${maxTagLength}자까지 가능합니다.`);
+        return;
+      }
       if(tags.some((val) => (val==tag))) {
         alert("같은이름의 태그가 존재합니다.");
         return;
       }
       if(tags.length >= maxTagCount) {
-        alert("태그는 5개까지 등록이 가능합니다.");
+        alert(`태그는 ${maxTagCount}개까지 등록이 가능합니다.`);
         return;
       }
       addTag(tag);
       setTag("");
     }
   }
+
+  const setVideo = (id: string) => {
+    setUrl(setYoutubeId(id));
+  }
+
   const tagsInput = (
     <div className="add-video-input-container">
       <span className="badge bg-primary">태그</span>
@@ -97,8 +126,35 @@ const AddVideo: React.FC = () => {
     </div>);
   };
 
+  const handleSubmit = async (): Promise<void> => {
+    if(id == "") {
+      alert("정상적인 유튜브 동영상을 입력해주세요.");
+      return;
+    }
+    if(title == "") {
+      alert("제목이 없습니다.");
+      return;
+    }
+    if(title.length < titleMinLength || title.length > titleMaxLength) {
+      alert(`제목은 ${titleMinLength}~${titleMaxLength}자까지 가능합니다.`);
+      return;
+    }
+    if(description.length > descriptionMaxLength) {
+      alert(`설명은 ${descriptionMaxLength}자까지 가능합니다.`);
+      return;
+    }
+
+    const ok = await postVideo(id, title, description, tags);
+    if(!ok) {
+      alert("알 수 없는 에러가 발생하였습니다.");
+      return;
+    }
+
+    alert("gooood");
+  }
+
   return (<div className="add-video-container">
-    <AddVideoModal />
+    <AddVideoModal setVideo={setVideo}/>
     {urlInput}
     {thumbnailView}
     {titleInput}
@@ -107,7 +163,7 @@ const AddVideo: React.FC = () => {
     <div className="add-video-tags-container">
       {tags.map((tag, idx) => tagInput(tag, idx))}
     </div>
-    <button type="button" className="btn btn-success add-video-submit-button">등록</button>
+    <button type="button" className="btn btn-success add-video-submit-button" onClick={handleSubmit}>등록</button>
   </div>);
 }