feat: 내 비디오 불러오는 로직

MyPage에서 비디오 불러오기

Author: jhj2713

.gitattributes

@@ -0,0 +1 @@
+*.mp4 filter=lfs diff=lfs merge=lfs -text

src/lib/api/media.js

@@ -0,0 +1,62 @@
+export const load = (user) => {
+  return {
+    data: [
+      {
+        src: "",
+        userId: "",
+        videoName: "제목제목",
+        videoUrl: "",
+        videoType: "",
+        videoLanguage: "",
+      },
+      {
+        src: "",
+        userId: "",
+        videoName: "제목제목",
+        videoUrl: "",
+        videoType: "",
+        videoLanguage: "",
+      },
+      {
+        src: "",
+        userId: "",
+        videoName: "제목제목",
+        videoUrl: "",
+        videoType: "",
+        videoLanguage: "",
+      },
+      {
+        src: "",
+        userId: "",
+        videoName: "제목제목",
+        videoUrl: "",
+        videoType: "",
+        videoLanguage: "",
+      },
+      {
+        src: "",
+        userId: "",
+        videoName: "제목제목",
+        videoUrl: "",
+        videoType: "",
+        videoLanguage: "",
+      },
+      {
+        src: "",
+        userId: "",
+        videoName: "제목제목",
+        videoUrl: "",
+        videoType: "",
+        videoLanguage: "",
+      },
+      {
+        src: "",
+        userId: "",
+        videoName: "제목제목",
+        videoUrl: "",
+        videoType: "",
+        videoLanguage: "",
+      },
+    ],
+  };
+};

src/modules/index.js

@@ -1,8 +1,10 @@
 import { combineReducers } from "redux";
 import user from "./user";
+import media from "./media";
 
 const rootReducer = combineReducers({
   user,
+  media,
 });
 
 export default rootReducer;

src/modules/media.js

@@ -0,0 +1,30 @@
+import { handleActions } from "redux-actions";
+import * as mediaAPI from "../lib/api/media";
+import createRequestThunk, {
+  createRequestActionTypes,
+} from "../lib/createRequestThunk";
+
+const [LOAD, LOAD_SUCCESS, LOAD_FAILURE] =
+  createRequestActionTypes("media/LOAD");
+
+export const load = createRequestThunk(LOAD, mediaAPI.load);
+
+const initialState = {
+  media: null,
+};
+
+export default handleActions(
+  {
+    [LOAD_SUCCESS]: (state, { payload: media }) => ({
+      ...state,
+      media,
+      error: null,
+    }),
+    [LOAD_FAILURE]: (state, { payload: error }) => ({
+      ...state,
+      media: null,
+      error,
+    }),
+  },
+  initialState,
+);

src/pages/Mypage.js

@@ -1,6 +1,8 @@
 import { Col, Row } from "antd";
 import { useState, useEffect } from "react";
 import { Link } from "react-router-dom";
+import { useDispatch, useSelector } from "react-redux";
+import { load } from "../modules/media";
 import styled from "styled-components";
 
 const Container = styled.div`
@@ -19,35 +21,33 @@ const StyledLink = styled(Link)`
 `;
 
 function Mypage() {
-  const [videos, setVideos] = useState([]);
+  const dispatch = useDispatch();
+  const { media, user } = useSelector(({ media, user }) => ({
+    media: media.media,
+    user: user.user,
+  }));
 
   useEffect(() => {
-    setVideos([
-      { id: 1, title: "Video1", thumbnail: "" },
-      { id: 2, title: "Video2", thumbnail: "" },
-      { id: 3, title: "Video3", thumbnail: "" },
-      { id: 4, title: "Video4", thumbnail: "" },
-      { id: 5, title: "Video5", thumbnail: "" },
-      { id: 6, title: "Video6", thumbnail: "" },
-    ]);
-  }, []);
+    dispatch(load(user));
+  }, [dispatch, user]);
 
   return (
     <Container>
       <h2 style={{ fontWeight: "bold" }}>자막이 생성된 미디어</h2>
       <Row gutter={[16, 16]} style={{ marginTop: "30px" }}>
-        {videos.map((video) => (
-          <StyledLink to="/result">
-            <Col id={video.id} style={{ display: "flex", width: 460 }}>
-              <img
-                alt={video.id}
-                height="160"
-                src="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fvckff%2FbtqCjeJmBHM%2FtMVpe4aUIMfH4nKS4aO3tK%2Fimg.jpg"
-              />
-              <VideoTitle>{video.title}</VideoTitle>
-            </Col>
-          </StyledLink>
-        ))}
+        {media &&
+          media.map((video) => (
+            <StyledLink to="/result">
+              <Col id={video.id} style={{ display: "flex", width: 460 }}>
+                <img
+                  alt={video.id}
+                  height="160"
+                  src="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fvckff%2FbtqCjeJmBHM%2FtMVpe4aUIMfH4nKS4aO3tK%2Fimg.jpg"
+                />
+                <VideoTitle>{video.videoName}</VideoTitle>
+              </Col>
+            </StyledLink>
+          ))}
       </Row>
     </Container>
   );