From af8d94c5b46dcf5351843f54da61563535b284fb Mon Sep 17 00:00:00 2001 From: Xoeon Date: Mon, 6 Nov 2023 23:36:43 +0900 Subject: [PATCH 01/25] =?UTF-8?q?(#75)Feat:=20=EC=9D=B4=EB=AF=B8=EC=A7=80?= =?UTF-8?q?=20=EC=A0=88=EB=8C=80=20=EA=B2=BD=EB=A1=9C=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/NewApp.js | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/src/NewApp.js b/src/NewApp.js index fc3d270..f3b30ed 100644 --- a/src/NewApp.js +++ b/src/NewApp.js @@ -24,11 +24,11 @@ const NewApp = () => { )} @@ -40,10 +40,7 @@ const NewApp = () => { } /> } /> } /> - } // 추후 '/video/:id' 형식으로 바꿀 예정 - /> + } /> ); From a14046dff5122a535d1ee9faee25b7e67b3ee85d Mon Sep 17 00:00:00 2001 From: Xoeon Date: Mon, 6 Nov 2023 23:39:56 +0900 Subject: [PATCH 02/25] =?UTF-8?q?[#75]Feat:=20videoItem=20url=20=EC=97=B0?= =?UTF-8?q?=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/component/ new-portal/VideoItem.jsx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/src/component/ new-portal/VideoItem.jsx b/src/component/ new-portal/VideoItem.jsx index fb1330a..584b942 100644 --- a/src/component/ new-portal/VideoItem.jsx +++ b/src/component/ new-portal/VideoItem.jsx @@ -2,6 +2,7 @@ import React, { useState, useEffect } from "react"; import "../../../src/styles/tailwind.css"; import axios from "axios"; import { HOST_URL } from "../../lib/HostUrl"; +import { Link, useNavigate } from "react-router-dom"; const VideoItem = ({ item }) => { const [data, setData] = useState(null); @@ -21,6 +22,8 @@ const VideoItem = ({ item }) => { const category2Color = categoryColors[item.category2] || "#c7c7c7"; const [createDate, setCreateDate] = useState(null); + const navigate = useNavigate(); + useEffect(() => { const jwtToken = sessionStorage.getItem("jwtAuthToken"); // 세션 스토리지에서 토큰 가져오기 const boardId = item.id; @@ -50,7 +53,10 @@ const VideoItem = ({ item }) => { }, [item]); return ( -
+
navigate(`/new-portal/boards/${item.id}`)} + >
From 4554a4fa5078367caebfa7b6e2d5e9a1b8fb25af Mon Sep 17 00:00:00 2001 From: Xoeon Date: Tue, 7 Nov 2023 00:27:33 +0900 Subject: [PATCH 03/25] =?UTF-8?q?[#75]Feat:=20=EB=B0=B0=EA=B2=BD=20?= =?UTF-8?q?=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/component/ new-portal/VideoList.jsx | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/src/component/ new-portal/VideoList.jsx b/src/component/ new-portal/VideoList.jsx index c6f2575..6cfe71e 100644 --- a/src/component/ new-portal/VideoList.jsx +++ b/src/component/ new-portal/VideoList.jsx @@ -27,11 +27,9 @@ const VideoList = () => { return (
-
+
{items.map((item) => ( -
- {/* boardId를 props로 전달합니다. */} -
+ ))}
From b6eabef637bcfb40dd5c6566020c53ace62b244e Mon Sep 17 00:00:00 2001 From: Xoeon Date: Tue, 7 Nov 2023 00:27:49 +0900 Subject: [PATCH 04/25] =?UTF-8?q?[#75]Feat:=20=EA=B2=8C=EC=8B=9C=EB=AC=BC?= =?UTF-8?q?=20=EC=A1=B0=ED=9A=8C=20API=20=EC=97=B0=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/NewApp.js | 2 +- src/page/new-portal/Detail.jsx | 101 +++++++++++++++++++++++---------- 2 files changed, 73 insertions(+), 30 deletions(-) diff --git a/src/NewApp.js b/src/NewApp.js index f3b30ed..ff9840f 100644 --- a/src/NewApp.js +++ b/src/NewApp.js @@ -40,7 +40,7 @@ const NewApp = () => { } /> } /> } /> - } /> + } /> ); diff --git a/src/page/new-portal/Detail.jsx b/src/page/new-portal/Detail.jsx index ccb9d8a..64bb93d 100644 --- a/src/page/new-portal/Detail.jsx +++ b/src/page/new-portal/Detail.jsx @@ -1,5 +1,9 @@ -import { useState } from "react"; +import { useEffect, useState } from "react"; import { format } from "date-fns"; +import { useParams } from "react-router-dom"; + +import axios from "axios"; +import { HOST_URL } from "../../lib/HostUrl"; const comments = [ { @@ -76,6 +80,7 @@ const CommentBox = ({ activeId, setActiveId, comment }) => {
); }; + const SubCommentBox = ({ subcomment, isActive }) => { if (isActive) return ( @@ -129,20 +134,78 @@ const Comment = ({ comments }) => { }; const Detail = () => { + const [title, setTitle] = useState(""); + const [content, setContent] = useState(""); + const [category1, setCategory1] = useState(""); + const [category2, setCategory2] = useState(""); + const [date, setDate] = useState(""); + const [videoUrl, setVideoUrl] = useState(""); + + const [isLoading, setIsLoading] = useState(false); + + const token = sessionStorage.getItem("jwtAuthToken"); + const { boardId } = useParams(); + + useEffect(() => { + setIsLoading(true); + + if (!token || !boardId) return; + + const getBoardData = async () => { + try { + const response = await axios.get( + `${HOST_URL}/api/v1/boards/${boardId}`, + { + headers: { Authorization: `Bearer ${token}` }, + } + ); + + setTitle(response.data.data.title); + setContent(response.data.data.content); + setCategory1(response.data.data.category1); + setCategory2(response.data.data.category2); + setDate(response.data.data.createAt); + setVideoUrl(response.data.data.videoUrl); + + console.log(response); + } catch (error) { + console.log(error); + } finally { + setIsLoading(false); + } + }; + + getBoardData(); + }, [token, boardId]); + return (
-
+
-
Title
+
{title}
-
2023.10.7
+
+ {format(new Date(date), "yyyy.M.d")} +
- 카테고리 + {category1} +
+
+ {category2}
-
이미지
+
+ {videoUrl && ( +