diff --git a/client/src/app/video/page.tsx b/client/src/app/video/page.tsx
new file mode 100644
index 0000000..578f76f
--- /dev/null
+++ b/client/src/app/video/page.tsx
@@ -0,0 +1,39 @@
+"use client";
+
+import { useState } from "react";
+import { VideoContext } from "@/contexts/VideoContext";
+import VideoController from "@/components/VideoController";
+import { Clip } from "@/contexts/VideoContext";
+
+export default function Video() {
+  const [currClip, setCurrClip] = useState<Clip | null>(null);
+  const [currFrame, setCurrFrame] = useState<number | null>(null); //useRef로 변경 가능
+
+  // DB fetch pseudo code
+  const baseURL = "https://d2yo7lrb9dagdw.cloudfront.net/";
+  const getV2 = (id: string): string => `${baseURL}v2/v2_${id}.mp4`;
+
+  const V2_A = getV2("A");
+  const V2_A2 = getV2("A2");
+
+  const DB = [
+    {
+      id: "A",
+      url: V2_A,
+      next: ["A2"],
+    },
+    {
+      id: "A2",
+      url: V2_A2,
+      next: [],
+    },
+  ];
+
+  return (
+    <VideoContext.Provider
+      value={{ DB, currClip, setCurrClip, currFrame, setCurrFrame }}
+    >
+      <VideoController />
+    </VideoContext.Provider>
+  );
+}
diff --git a/client/src/components/Player/index.tsx b/client/src/components/Player/index.tsx
new file mode 100644
index 0000000..6046e8b
--- /dev/null
+++ b/client/src/components/Player/index.tsx
@@ -0,0 +1,8 @@
+export default function Player({ url }: { url: string }) {
+  return (
+    <>
+      {" "}
+      <video controls src={url}></video>
+    </>
+  );
+}
diff --git a/client/src/components/VideoController/index.tsx b/client/src/components/VideoController/index.tsx
new file mode 100644
index 0000000..3ffa33d
--- /dev/null
+++ b/client/src/components/VideoController/index.tsx
@@ -0,0 +1,15 @@
+import { useVideoContext } from "@/contexts/VideoContext";
+import Player from "../Player";
+
+export default function VideoController() {
+  //   const context = useVideoContext();
+  const { DB, currClip, setCurrClip } = useVideoContext();
+  if (!currClip) {
+    // currClip이 없을 경우 초기 클립 설정
+    setCurrClip(DB[0]);
+  }
+
+  const nextClips = currClip?.next || [];
+
+  return <>{currClip && <Player url={currClip.url} />}</>;
+}
diff --git a/client/src/contexts/VideoContext.tsx b/client/src/contexts/VideoContext.tsx
new file mode 100644
index 0000000..3b49769
--- /dev/null
+++ b/client/src/contexts/VideoContext.tsx
@@ -0,0 +1,27 @@
+import { createContext, useContext } from "react";
+import { SetStateAction, Dispatch } from "react";
+
+type ClipID = string;
+export type Clip = { id: ClipID; url: string; next: ClipID[] };
+
+type ContextType = {
+  DB: Clip[];
+  currClip: Clip | null;
+  setCurrClip: Dispatch<SetStateAction<Clip | null>>;
+  currFrame: number | null;
+  setCurrFrame: Dispatch<SetStateAction<number | null>>;
+};
+
+const initialContext: ContextType = {
+  DB: [],
+  currClip: null,
+  setCurrClip: () => {}, // no-op
+  currFrame: null,
+  setCurrFrame: () => {}, // no-op
+};
+
+const VideoContext = createContext<ContextType>(initialContext);
+
+const useVideoContext = () => useContext(VideoContext);
+
+export { VideoContext, useVideoContext };