#22/feat/connect play api

docs/api.md

@@ -46,7 +46,7 @@
   };
   ```
 
-**GET** `/api/content/:content_id`
+**GET** `/api/contents/:content_id`
 
 - response
   ```JSON

src/app/api/contents/[content_id]/route.js

@@ -5,7 +5,7 @@ export async function GET(req, { params }) {
   const db = await getDB();
   const item = await db
     .collection("content")
-    .findOne({ id: params.content_id });
+    .findOne({ id: Number(params.content_id) });
   if (!item) {
     return NextResponse.json(
       { code: 20, message: "Content not found" },

src/app/play/[contents_id]/page.js → src/app/play/[content_id]/page.js

@@ -1,11 +1,11 @@
 import PlayContainer from "src/components/Play/PlayContainer/PlayContainer.js";
 
 export default function Play(props) {
-  var contentId = props.params.contents_id;
+  const contentNumber = props.params.content_id;
 
   return (
     <div>
-      <PlayContainer id={contentId} />
+      <PlayContainer contentId={contentNumber} />
     </div>
   );
 }

src/components/Play/Comments/Comments.js

@@ -5,9 +5,9 @@ import { useState } from "react";
 import "./Comments.css";
 
 export default function Comments(props) {
-  // var commentsId = props.commentsId;
-  var content = contentsData[props.commentsId];
-  var comments = content.comments;
+  var comments = props.content.comments;
+  // var content = contentsData[props.commentsId];
+  // var comments = content.comments;
 
   var [newComment, setNewComment] = useState("");
 
@@ -20,7 +20,7 @@ export default function Comments(props) {
           placeholder="댓글을 작성하세요"
           value={newComment}
           onChange={(e) => {
-            setComment(e.target.value);
+            setNewComment(e.target.value);
           }}
         ></input>
       </div>
@@ -35,7 +35,7 @@ export default function Comments(props) {
         placeholder="댓글을 작성하세요"
         value={newComment}
         onChange={(e) => {
-          setComment(e.target.value);
+          setNewComment(e.target.value);
         }}
       ></input>
       {comments.map((a, index) => {

src/components/Play/PlayContainer/PlayContainer.js

@@ -1,20 +1,38 @@
+"use client";
+
 import Player from "src/components/Play/Player/Player.js";
 import Comments from "src/components/Play/Comments/Comments.js";
 import "./PlayContainer.css";
-import contentsData from "src/mock/contents.json";
+import { useState, useEffect } from "react";
 
 export default function PlayContainer(props) {
-  var id = props.id;
-  let content = contentsData[id];
+  const [contentData, setContentData] = useState(null);
+
+  useEffect(() => {
+    const id = props.contentId;
+    const apiUrl = `/api/contents/${id}`; // 서버 API 엔드포인트 URL
+
+    fetch(apiUrl)
+      .then((response) => response.json())
+      .then((parsedResponse) => {
+        setContentData(parsedResponse);
+        console.log(contentData);
+      })
+      .catch((error) => {
+        console.error("Error fetching data:", error);
+      });
+  }, []);
 
-  if (content.type != "youtube") {
+  if (contentData === undefined) {
+    return <p>Loading..</p>;
+  } else if (contentData && contentData.type !== "youtube") {
     return <div>잘못된 접근입니다</div>;
   }
 
   return (
     <div className="play-container">
-      <Player playerId={id} className="player-component" />
-      <Comments commentsId={id} className="comments-component" />
+      <Player content={contentData} className="player-component" />
+      <Comments content={contentData} className="comments-component" />
     </div>
   );
 }

src/components/Play/Player/Player.js

@@ -1,9 +1,9 @@
-import contentsData from "src/mock/contents.json";
 import "./Player.css";
 
 export default function Player(props) {
-  var playerId = props.playerId;
-  var video = contentsData[playerId];
+  var video = props.content;
+  // var playerId = props.playerId;
+  // var video = contentsData[playerId];
 
   return (
     <div className="video-container">
@@ -17,7 +17,7 @@ export default function Player(props) {
         allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
         allowFullScreen
       ></iframe>
-      <h2>{video.title}</h2>
+      <h2>{props.content.title}</h2>
     </div>
   );
 }