feat : #40

src/components/elements/videoInfo.tsx

@@ -19,8 +19,8 @@ function VideoInfo({ data, ...props }: IProps) {
         <div className="line-clamp-1 text-base text-blackberry-lightest leading-8">{data?.uploadedAt}</div>
       </div>
       <div className="flex gap-2">
-        {data?.channelImg !== undefined && data?.channelImg !== '' && (
-          <img src={data.channelImg} alt="channel" className="w-8 h-8 rounded-full" />
+        {data?.channelImage !== undefined && data?.channelImage !== '' && (
+          <img src={data.channelImage} alt="channel" className="w-8 h-8 rounded-full" />
         )}
         <div className="text-base leading-8  line-clamp-1">{data?.channelTitle}</div>
       </div>

src/components/play/index.tsx

@@ -62,10 +62,12 @@ export default function Play({ video }: IProps) {
    */
   const onClickDelete = useCallback(
     (item: IVideoInPlaylist) => {
-      dispatch(deleteVideoAsync.request(item.id))
-      setIsPendingDeleteVideo(true)
+      if (video.playlistId !== null) {
+        setIsPendingDeleteVideo(true)
+        dispatch(deleteVideoAsync.request({ playlistId: video.playlistId, playId: item.id }))
+      }
     },
-    [dispatch],
+    [dispatch, video],
   )
 
   useEffect(() => {
@@ -76,8 +78,11 @@ export default function Play({ video }: IProps) {
           if (videoList.length === 0) {
             navigate(Constants.NavAbsolutePathItems.LIST)
           }
+          setIsPendingDeleteVideo(false)
+          break
+        case 'ERROR':
+          setIsPendingDeleteVideo(false)
       }
-      setIsPendingDeleteVideo(false)
     }
   }, [navigate, status, isPendingDeleteVideo, videoList])
 

src/components/videoAdd/index.tsx

@@ -54,7 +54,17 @@ function VideoAdd({ video }: IProps) {
   // 비디오 추가 및 isFirst 초기화
   const onClickPlaylist = async (item: IPlaylist) => {
     dispatch(clearIsFirst(isFirstConstants.ADD_FIRST))
-    dispatch(addVideoAsync.request({ playlistId: item.id, video: videoState }))
+    dispatch(
+      addVideoAsync.request({
+        playlistId: item.id,
+        video: {
+          ...videoState,
+          startTime: videoState.start,
+          endTime: videoState.end,
+          channelImg: videoState.channelImage,
+        },
+      }),
+    )
   }
 
   const playerPropsMemo = useMemo(

src/components/videoTimeChange/index.tsx

@@ -34,8 +34,17 @@ function VideoTimeChange({ video }: IProps) {
   }, [])
 
   const onClickEdit = useCallback(() => {
-    dispatch(editTimeRangeAsync.request({ id: videoState.id, start: videoState.start, end: videoState.end }))
-  }, [videoState, dispatch])
+    if (videoModule.playlistId !== null) {
+      dispatch(
+        editTimeRangeAsync.request({
+          playlistId: videoModule.playlistId,
+          playId: videoState.id,
+          startTime: videoState.start,
+          endTime: videoState.end,
+        }),
+      )
+    }
+  }, [videoState, dispatch, videoModule])
 
   const applyButtonProps = useMemo(() => ({ onClick: onClickApply }), [onClickApply])
   const completeButtonProps = useMemo(() => ({ onClick: onClickEdit, text: '수정' }), [onClickEdit])

src/lib/api/auth.ts

@@ -39,6 +39,7 @@ export const login = async (id: string, pw: string) => {
 }
 
 export const reissue = async (tokens: IToken) => {
+  console.log(tokens)
   const res = await axios.post<IReissueSuccess>(`${Address}/api/user/auth/reissue`, {
     ...tokens,
     isPC: true,

src/lib/api/types.ts

@@ -96,6 +96,10 @@ export interface IEditPlaylistTitleSuccess {
 
 // 플레이리스트 삭제 타입
 export type TDeletePlaylistRequest = number
+export interface IDeletePlaylistRequest {
+  playlistId: number
+  playId: number
+}
 export interface IDeletePlaylistSuccess {
   status: number
   message: string
@@ -104,23 +108,27 @@ export interface IDeletePlaylistSuccess {
 
 // 플레이리스트 안의 비디오 순서 변경 api 타입
 export interface ISeqListItem {
-  id: number
+  playId: number
   sequence: number
 }
 export interface IChangeVideoOrderInPlaylistRequest {
   playlistId: number
-  seqList: ISeqListItem[]
+  list: ISeqListItem[]
 }
 export interface IChangeVIdeoOrderInPlaylistSuccess {
-  success: boolean
-  error: null
-  response: ISeqListItem[]
+  status: number
+  message: string
+  data: null
 }
 
 // 비디오를 플레이리스트에 추가하는 api 타입
 export interface IAddVideoToPlaylistRequest {
   playlistId: number
-  video: IVideoHasRange
+  video: Omit<IVideoHasRange, 'start' & 'end' & 'channelImage'> & {
+    startTime: number
+    endTime: number
+    channelImg?: string
+  }
 }
 export interface IAddVideoToPlaylistSuccess {
   success: boolean
@@ -137,23 +145,22 @@ export interface IGetVideoListSuccess {
 
 // 비디오 삭제 성공 반환 타입
 export interface IDeleteVideoSuccess {
-  success: boolean
-  error: null
-  id: number
-  deleted: boolean
+  status: number
+  message: string
+  data: null
 }
 
 // 비디오 timelapse 변경 타입
 export interface IEditVideoTimeRangeRequest {
-  id: number
-  start: number
-  end: number
+  playlistId: number
+  playId: number
+  startTime: number
+  endTime: number
 }
 export interface IEditVideoTimeRangeSuccess {
-  success: boolean
-  error: null
-  id: number
-  edited: boolean
+  status: number
+  message: string
+  data: null
 }
 
 // 인기 동영상 파이어베이스 반환 타입

src/lib/api/videos.ts

@@ -5,6 +5,7 @@ import {
   IAddVideoToPlaylistSuccess,
   IChangeVideoOrderInPlaylistRequest,
   IChangeVIdeoOrderInPlaylistSuccess,
+  IDeletePlaylistRequest,
   IDeleteVideoSuccess,
   IEditVideoTimeRangeRequest,
   IEditVideoTimeRangeSuccess,
@@ -17,7 +18,6 @@ import { db } from '../../firebaseInit'
 
 export const getVideoList = async (id: number) => {
   const res = await axios.get<IGetVideoListSuccess>(`${Address}/api/play/${id}`)
-  console.log(res)
   return res.data
 }
 
@@ -29,19 +29,18 @@ export const addVideo = async (request: IAddVideoToPlaylistRequest) => {
   return { id: request.playlistId, thumbnail: request.video.thumbnail }
 }
 
-export const deleteVideo = async (id: number) => {
-  const res = await axios.delete<IDeleteVideoSuccess>(`${Address}/api/play/delete/${id}`)
-  return res.data
+export const deleteVideo = async (request: IDeletePlaylistRequest) => {
+  await axios.delete<IDeleteVideoSuccess>(`${Address}/api/play`, {
+    data: request,
+  })
 }
 
 export const changeVideoOrder = async (request: IChangeVideoOrderInPlaylistRequest) => {
-  const res = await axios.put<IChangeVIdeoOrderInPlaylistSuccess>(`${Address}/api/play/edit/seq`, request)
-  return res.data
+  await axios.patch<IChangeVIdeoOrderInPlaylistSuccess>(`${Address}/api/play/sequence`, request)
 }
 
 export const editVideoTimeRange = async (request: IEditVideoTimeRangeRequest) => {
-  const res = await axios.put<IEditVideoTimeRangeSuccess>(`${Address}/api/play/edit/time`, request)
-  return res.data
+  await axios.patch<IEditVideoTimeRangeSuccess>(`${Address}/api/play/time`, request)
 }
 
 export const getPopularVideos = async () => {

src/lib/tempData.ts

@@ -34,7 +34,7 @@ export const temp_videos: IVideo[] = [
     thumbnail: 'thumbnail',
     channelTitle: 'channelTitle',
     duration: 'duration',
-    channelImg: 'channelAvatar',
+    channelImage: 'channelAvatar',
     views: 1,
     uploadedAt: 'uploadedAt',
   },
@@ -125,7 +125,8 @@ export const temp_popularVideo_parsed: IVideo[] = [
     title: 'Harry Kane MASTERCLASS! 🔥 Spurs beat Man City at the death! | HIGHLIGHTS | Man City 2-3 Spurs',
     thumbnail: 'https://i.ytimg.com/vi/SQ-FAQZSV6w/mqdefault.jpg',
     channelTitle: 'Tottenham Hotspur',
-    channelImg: 'https://yt3.ggpht.com/ytc/AKedOLQeu53EoiRWPEDO3Ucq8Z-qPcswHk34rBGFAEGTxro=s240-c-k-c0x00ffffff-no-rj',
+    channelImage:
+      'https://yt3.ggpht.com/ytc/AKedOLQeu53EoiRWPEDO3Ucq8Z-qPcswHk34rBGFAEGTxro=s240-c-k-c0x00ffffff-no-rj',
     duration: '02:15',
     views: 1819232,
     uploadedAt: '2022-02-19',
@@ -135,7 +136,7 @@ export const temp_popularVideo_parsed: IVideo[] = [
     title: '[ENG] 꼴값 떨고 남 연애 참견하다가 이용진의 참한 犬 돼버린 주우재 편 | 터키즈온더블럭 EP.36',
     thumbnail: 'https://i.ytimg.com/vi/0R5YYHdFOAY/mqdefault.jpg',
     channelTitle: '스튜디오 와플 - STUDIO WAFFLE',
-    channelImg: 'https://yt3.ggpht.com/ytc/AKedOLSZmhVSQtTtir5RU8Pi-7y_K84BP9ij7HzJHEM=s240-c-k-c0x00ffffff-no-rj',
+    channelImage: 'https://yt3.ggpht.com/ytc/AKedOLSZmhVSQtTtir5RU8Pi-7y_K84BP9ij7HzJHEM=s240-c-k-c0x00ffffff-no-rj',
     duration: '13:45',
     views: 1756788,
     uploadedAt: '2022-02-18',

src/modules/playlist/index.test.ts

@@ -121,7 +121,15 @@ describe('test playlistReducer', () => {
   test('ADD_VIDEO', () => {
     state = playlistReducer(
       state,
-      actions.addVideoAsync.request({ playlistId: temp_playlist[1].id, video: temp_videoHasRange }),
+      actions.addVideoAsync.request({
+        playlistId: temp_playlist[1].id,
+        video: {
+          ...temp_videoHasRange,
+          startTime: temp_videoHasRange.start,
+          endTime: temp_videoHasRange.end,
+          channelImg: temp_videoHasRange.channelImage,
+        },
+      }),
     )
     expect(state).toEqual({
       ...state,

src/modules/playlist/saga.test.ts

@@ -91,10 +91,30 @@ describe('test createPlaylistSaga', () => {
 
 describe('test addVideoSaga', () => {
   test('should yield put properly', () => {
-    const generator = sagas.addVideoSaga(actions.addVideoAsync.request({ playlistId: 1, video: temp_videoHasRange }))
+    const generator = sagas.addVideoSaga(
+      actions.addVideoAsync.request({
+        playlistId: 1,
+        video: {
+          ...temp_videoHasRange,
+          startTime: temp_videoHasRange.start,
+          endTime: temp_videoHasRange.end,
+          channelImg: temp_videoHasRange.channelImage,
+        },
+      }),
+    )
     const mocked_toast_success = jest.spyOn(toast, 'success')
 
-    expect(generator.next().value).toEqual(call(addVideo, { playlistId: 1, video: temp_videoHasRange }))
+    expect(generator.next().value).toEqual(
+      call(addVideo, {
+        playlistId: 1,
+        video: {
+          ...temp_videoHasRange,
+          startTime: temp_videoHasRange.start,
+          endTime: temp_videoHasRange.end,
+          channelImg: temp_videoHasRange.channelImage,
+        },
+      }),
+    )
     expect(
       generator.next({
         id: 1,
@@ -113,9 +133,29 @@ describe('test addVideoSaga', () => {
     expect(mocked_toast_success).toBeCalledWith(Strings.addVideoSuccess)
   })
   test('when api fail, call handleSagaError', () => {
-    const generator = sagas.addVideoSaga(actions.addVideoAsync.request({ playlistId: 1, video: temp_videoHasRange }))
+    const generator = sagas.addVideoSaga(
+      actions.addVideoAsync.request({
+        playlistId: 1,
+        video: {
+          ...temp_videoHasRange,
+          startTime: temp_videoHasRange.start,
+          endTime: temp_videoHasRange.end,
+          channelImg: temp_videoHasRange.channelImage,
+        },
+      }),
+    )
 
-    expect(generator.next().value).toEqual(call(addVideo, { playlistId: 1, video: temp_videoHasRange }))
+    expect(generator.next().value).toEqual(
+      call(addVideo, {
+        playlistId: 1,
+        video: {
+          ...temp_videoHasRange,
+          startTime: temp_videoHasRange.start,
+          endTime: temp_videoHasRange.end,
+          channelImg: temp_videoHasRange.channelImage,
+        },
+      }),
+    )
     generator.throw(tempError)
     expect(handleSagaError).toHaveBeenCalled()
     expect(handleSagaError).toBeCalledWith(tempError, actions.addVideoAsync.failure)

src/modules/popularVideos/saga.ts

@@ -15,7 +15,7 @@ export function* getPopularVideoSaga() {
       title: item.snippet.title,
       thumbnail: item.snippet.thumbnails.medium.url,
       channelTitle: item.snippet.channelTitle,
-      channelImg: item.channelAvatar,
+      channelImage: item.channelAvatar,
       duration: secondsToHHMMSS(moment.duration(item.contentDetails.duration).asSeconds()),
       views: parseInt(item.statistics.viewCount),
       uploadedAt: item.snippet.publishedAt.slice(0, 10),

src/modules/searchResult/saga.ts

@@ -14,7 +14,7 @@ export function* getSearchResultSaga(action: ReturnType<typeof getSearchResult.r
       title: item.title,
       thumbnail: (item.thumbnails && item.thumbnails[0].url) || item.bestThumbnail.url,
       channelTitle: item.author.name,
-      channelAvatar: item.author.bestAvatar.url,
+      channelImage: item.author.bestAvatar.url,
       duration: item.duration,
       views: item.views,
       uploadedAt: item.uploadedAt,

src/modules/video/actions.ts

@@ -1,5 +1,5 @@
 import { createAction, createAsyncAction } from 'typesafe-actions'
-import { IEditVideoTimeRangeRequest, ISeqListItem } from '../../lib/api/types'
+import { IDeletePlaylistRequest, IEditVideoTimeRangeRequest, ISeqListItem } from '../../lib/api/types'
 import { IVideoInPlaylist } from '../../types'
 import { IChangeVideoOrderAsyncRequest, IDeleteVideoSuccess } from './types'
 
@@ -43,7 +43,7 @@ export const getVideoAsync = createAsyncAction(GET_VIDEO, GET_VIDEO_SUCCESS, GET
 >()
 
 export const deleteVideoAsync = createAsyncAction(DELETE_VIDEO, DELETE_VIDEO_SUCCESS, DELETE_VIDEO_ERROR)<
-  number,
+  IDeletePlaylistRequest,
   IDeleteVideoSuccess,
   string
 >()

src/modules/video/index.ts

@@ -59,8 +59,8 @@ const videoReducer = createReducer<TVideoStoreType, TVideo_Action>(initialState,
     success: true,
     pending: false,
     items: state.items.map(item => {
-      if (item.id === action.payload.id) {
-        return { ...item, start: action.payload.start, end: action.payload.end }
+      if (item.id === action.payload.playId) {
+        return { ...item, start: action.payload.startTime, end: action.payload.endTime }
       }
       return item
     }),
@@ -86,7 +86,7 @@ const videoReducer = createReducer<TVideoStoreType, TVideo_Action>(initialState,
     pending: false,
     success: true,
     items: state.items
-      .map(item => ({ ...item, sequence: action.payload.find(s => s.id === item.id)?.sequence || item.sequence }))
+      .map(item => ({ ...item, sequence: action.payload.find(s => s.playId === item.id)?.sequence || item.sequence }))
       .sort(sortPlaylistBySequence),
   }),
   [videoActionTypes.CHANGE_VIDEO_ORDER_ERROR]: (state, action) => ({