From 4446014b9513d9681f79ec9b45e44e8e0dfb9f2c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9E=84=EC=8A=B9=ED=98=84?= Date: Sun, 3 Sep 2023 17:46:08 +0900 Subject: [PATCH 1/7] =?UTF-8?q?refact:=20=EC=8A=A4=ED=83=80=EC=9D=BC=20?= =?UTF-8?q?=EB=B0=8F=20=EC=98=A4=EB=A5=98=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/play/[contents_id]/page.js | 2 +- src/components/Play/Comments/Comments.js | 4 ++-- src/components/Play/PlayContainer/PlayContainer.js | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/app/play/[contents_id]/page.js b/src/app/play/[contents_id]/page.js index 566ef9a..e6343d5 100644 --- a/src/app/play/[contents_id]/page.js +++ b/src/app/play/[contents_id]/page.js @@ -1,7 +1,7 @@ import PlayContainer from "src/components/Play/PlayContainer/PlayContainer.js"; export default function Play(props) { - var contentId = props.params.contents_id; + const contentId = props.params.contents_id; return (
diff --git a/src/components/Play/Comments/Comments.js b/src/components/Play/Comments/Comments.js index de7cd97..bd718ae 100644 --- a/src/components/Play/Comments/Comments.js +++ b/src/components/Play/Comments/Comments.js @@ -20,7 +20,7 @@ export default function Comments(props) { placeholder="댓글을 작성하세요" value={newComment} onChange={(e) => { - setComment(e.target.value); + setNewComment(e.target.value); }} >
@@ -35,7 +35,7 @@ export default function Comments(props) { placeholder="댓글을 작성하세요" value={newComment} onChange={(e) => { - setComment(e.target.value); + setNewComment(e.target.value); }} > {comments.map((a, index) => { diff --git a/src/components/Play/PlayContainer/PlayContainer.js b/src/components/Play/PlayContainer/PlayContainer.js index c2dbb9e..240523d 100644 --- a/src/components/Play/PlayContainer/PlayContainer.js +++ b/src/components/Play/PlayContainer/PlayContainer.js @@ -5,7 +5,7 @@ import contentsData from "src/mock/contents.json"; export default function PlayContainer(props) { var id = props.id; - let content = contentsData[id]; + const content = contentsData[id]; if (content.type != "youtube") { return
잘못된 접근입니다
; From 64edf5d23e341ef1f15fc303497fdb7dea693bbd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9E=84=EC=8A=B9=ED=98=84?= Date: Sun, 3 Sep 2023 17:55:39 +0900 Subject: [PATCH 2/7] =?UTF-8?q?refact:=20props=20=EB=B0=A9=EC=8B=9D=20?= =?UTF-8?q?=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Play/Comments/Comments.js | 6 +++--- src/components/Play/PlayContainer/PlayContainer.js | 8 ++++---- src/components/Play/Player/Player.js | 5 +++-- 3 files changed, 10 insertions(+), 9 deletions(-) diff --git a/src/components/Play/Comments/Comments.js b/src/components/Play/Comments/Comments.js index bd718ae..505c582 100644 --- a/src/components/Play/Comments/Comments.js +++ b/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(""); diff --git a/src/components/Play/PlayContainer/PlayContainer.js b/src/components/Play/PlayContainer/PlayContainer.js index 240523d..c0bfb33 100644 --- a/src/components/Play/PlayContainer/PlayContainer.js +++ b/src/components/Play/PlayContainer/PlayContainer.js @@ -5,16 +5,16 @@ import contentsData from "src/mock/contents.json"; export default function PlayContainer(props) { var id = props.id; - const content = contentsData[id]; + const contentToPlay = contentsData[id]; - if (content.type != "youtube") { + if (contentToPlay.type != "youtube") { return
잘못된 접근입니다
; } return (
- - + +
); } diff --git a/src/components/Play/Player/Player.js b/src/components/Play/Player/Player.js index e11448e..0c4fadf 100644 --- a/src/components/Play/Player/Player.js +++ b/src/components/Play/Player/Player.js @@ -2,8 +2,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 (
From 709cae5848093313a6e948ae3af471bcb2df0159 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9E=84=EC=8A=B9=ED=98=84?= Date: Tue, 5 Sep 2023 01:27:33 +0900 Subject: [PATCH 3/7] =?UTF-8?q?use=20client=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Play/PlayContainer/PlayContainer.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/components/Play/PlayContainer/PlayContainer.js b/src/components/Play/PlayContainer/PlayContainer.js index c0bfb33..71cb185 100644 --- a/src/components/Play/PlayContainer/PlayContainer.js +++ b/src/components/Play/PlayContainer/PlayContainer.js @@ -1,3 +1,5 @@ +"use client"; + import Player from "src/components/Play/Player/Player.js"; import Comments from "src/components/Play/Comments/Comments.js"; import "./PlayContainer.css"; From d07ba91a3416f8a82c4fc611704b607f177c77e3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9E=84=EC=8A=B9=ED=98=84?= Date: Tue, 5 Sep 2023 04:04:39 +0900 Subject: [PATCH 4/7] =?UTF-8?q?refact:=20=EB=9D=BC=EC=9A=B0=ED=8C=85=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/play/{[contents_id] => [content_id]}/page.js | 2 +- src/components/Play/PlayContainer/PlayContainer.js | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) rename src/app/play/{[contents_id] => [content_id]}/page.js (81%) diff --git a/src/app/play/[contents_id]/page.js b/src/app/play/[content_id]/page.js similarity index 81% rename from src/app/play/[contents_id]/page.js rename to src/app/play/[content_id]/page.js index e6343d5..849f860 100644 --- a/src/app/play/[contents_id]/page.js +++ b/src/app/play/[content_id]/page.js @@ -1,7 +1,7 @@ import PlayContainer from "src/components/Play/PlayContainer/PlayContainer.js"; export default function Play(props) { - const contentId = props.params.contents_id; + const contentId = props.params.content_id; return (
diff --git a/src/components/Play/PlayContainer/PlayContainer.js b/src/components/Play/PlayContainer/PlayContainer.js index 71cb185..0c82102 100644 --- a/src/components/Play/PlayContainer/PlayContainer.js +++ b/src/components/Play/PlayContainer/PlayContainer.js @@ -3,6 +3,7 @@ import Player from "src/components/Play/Player/Player.js"; import Comments from "src/components/Play/Comments/Comments.js"; import "./PlayContainer.css"; +import { useState, useEffect } from "react"; import contentsData from "src/mock/contents.json"; export default function PlayContainer(props) { From 03c84a073170dff867fd2a9610e6868b37aad3c3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9E=84=EC=8A=B9=ED=98=84?= Date: Tue, 5 Sep 2023 14:48:03 +0900 Subject: [PATCH 5/7] feat: trying to route --- src/app/play/[content_id]/page.js | 4 ++-- .../Play/PlayContainer/PlayContainer.js | 24 ++++++++++++++++--- src/components/Play/Player/Player.js | 7 +++--- 3 files changed, 26 insertions(+), 9 deletions(-) diff --git a/src/app/play/[content_id]/page.js b/src/app/play/[content_id]/page.js index 849f860..df4f3c9 100644 --- a/src/app/play/[content_id]/page.js +++ b/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) { - const contentId = props.params.content_id; + const contentNumber = props.params.content_id; return (
- +
); } diff --git a/src/components/Play/PlayContainer/PlayContainer.js b/src/components/Play/PlayContainer/PlayContainer.js index 0c82102..7bc6870 100644 --- a/src/components/Play/PlayContainer/PlayContainer.js +++ b/src/components/Play/PlayContainer/PlayContainer.js @@ -7,10 +7,28 @@ import { useState, useEffect } from "react"; import contentsData from "src/mock/contents.json"; export default function PlayContainer(props) { - var id = props.id; - const contentToPlay = contentsData[id]; + var id = props.contentId; + // const contentToPlay = contentsData[id]; - if (contentToPlay.type != "youtube") { + const [contentData, setContentData] = useState(null); + + useEffect(() => { + const apiUrl = "/api/contents/:contents_id"; // 서버 API 엔드포인트 URL + + fetch(apiUrl) + .then((response) => response.json()) + .then((Content) => { + setContentData(Content); + }) + .catch((error) => { + console.error("Error fetching data:", error); + }); + }, []); + + console.log(contentData); + var contentToPlay = contentData; + + if (contentToPlay.type !== "youtube") { return
잘못된 접근입니다
; } diff --git a/src/components/Play/Player/Player.js b/src/components/Play/Player/Player.js index 0c4fadf..b4776cf 100644 --- a/src/components/Play/Player/Player.js +++ b/src/components/Play/Player/Player.js @@ -1,8 +1,7 @@ -import contentsData from "src/mock/contents.json"; import "./Player.css"; export default function Player(props) { - var video = props.content; + // var video = props.content; // var playerId = props.playerId; // var video = contentsData[playerId]; @@ -12,13 +11,13 @@ export default function Player(props) { className="youtube" width="1134" height="638" - src={video.url} + src={props.content.url} title="YouTube video player" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowFullScreen > -

{video.title}

+

{props.content.title}

); } From eb137432bb749ae8185d26c8bfc78265f8c25b32 Mon Sep 17 00:00:00 2001 From: designDefined Date: Tue, 5 Sep 2023 15:17:57 +0900 Subject: [PATCH 6/7] fix: Fix contents API spec & docs --- docs/api.md | 2 +- src/app/api/contents/[content_id]/route.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/api.md b/docs/api.md index 68b5a4d..061a1a1 100644 --- a/docs/api.md +++ b/docs/api.md @@ -46,7 +46,7 @@ }; ``` -**GET** `/api/content/:content_id` +**GET** `/api/contents/:content_id` - response ```JSON diff --git a/src/app/api/contents/[content_id]/route.js b/src/app/api/contents/[content_id]/route.js index a3d6817..5ab9a05 100644 --- a/src/app/api/contents/[content_id]/route.js +++ b/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" }, From 40c626d962fa492577f778208f1abff9c99f3e11 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9E=84=EC=8A=B9=ED=98=84?= Date: Tue, 5 Sep 2023 17:48:38 +0900 Subject: [PATCH 7/7] fix: still trying --- .../Play/PlayContainer/PlayContainer.js | 23 ++++++++----------- src/components/Play/Player/Player.js | 4 ++-- 2 files changed, 12 insertions(+), 15 deletions(-) diff --git a/src/components/Play/PlayContainer/PlayContainer.js b/src/components/Play/PlayContainer/PlayContainer.js index 7bc6870..131f218 100644 --- a/src/components/Play/PlayContainer/PlayContainer.js +++ b/src/components/Play/PlayContainer/PlayContainer.js @@ -4,38 +4,35 @@ import Player from "src/components/Play/Player/Player.js"; import Comments from "src/components/Play/Comments/Comments.js"; import "./PlayContainer.css"; import { useState, useEffect } from "react"; -import contentsData from "src/mock/contents.json"; export default function PlayContainer(props) { - var id = props.contentId; - // const contentToPlay = contentsData[id]; - const [contentData, setContentData] = useState(null); useEffect(() => { - const apiUrl = "/api/contents/:contents_id"; // 서버 API 엔드포인트 URL + const id = props.contentId; + const apiUrl = `/api/contents/${id}`; // 서버 API 엔드포인트 URL fetch(apiUrl) .then((response) => response.json()) - .then((Content) => { - setContentData(Content); + .then((parsedResponse) => { + setContentData(parsedResponse); + console.log(contentData); }) .catch((error) => { console.error("Error fetching data:", error); }); }, []); - console.log(contentData); - var contentToPlay = contentData; - - if (contentToPlay.type !== "youtube") { + if (contentData === undefined) { + return

Loading..

; + } else if (contentData && contentData.type !== "youtube") { return
잘못된 접근입니다
; } return (
- - + +
); } diff --git a/src/components/Play/Player/Player.js b/src/components/Play/Player/Player.js index b4776cf..0d8a208 100644 --- a/src/components/Play/Player/Player.js +++ b/src/components/Play/Player/Player.js @@ -1,7 +1,7 @@ import "./Player.css"; export default function Player(props) { - // var video = props.content; + var video = props.content; // var playerId = props.playerId; // var video = contentsData[playerId]; @@ -11,7 +11,7 @@ export default function Player(props) { className="youtube" width="1134" height="638" - src={props.content.url} + src={video.url} title="YouTube video player" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"