Skip to content

Commit

Permalink
Merge pull request #92 from kookmin-sw/feature/myAssetPage
Browse files Browse the repository at this point in the history 
Feature/my asset page
  • Loading branch information
@2do1
2do1 authored May 24, 2022
2 parents 35d1ec8 + e47669a commit 07027e1
Show file tree
Hide file tree
Showing 5 changed files with 300 additions and 124 deletions.
4 changes: 2 additions & 2 deletions exhibit/src/routes/BuyPage.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -108,7 +108,7 @@ function BuyPage(tokenId) {
/>
</div>

// <div class="Cbody">
{/* // <div class="Cbody">
// <div
// style={{
// minHeight: "80%",
Expand All @@ -134,7 +134,7 @@ function BuyPage(tokenId) {
// thumbnailHandler={(thumbnail) => console.log(thumbnail)}
// alt={video_title}
// />
// </div>
// </div> */}

{/* <img src={poster_url} width="100" height="100" alt="image" /> */}
{/* <label> 포스터 제목 : {poster_title}</label> */}
Expand Down
72 changes: 45 additions & 27 deletions exhibit/src/routes/ContestPage.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,12 +10,12 @@ import Footer from "../components/Footer"
import { Modal } from "react-bootstrap";
import "./page.css";
import VideoImageThumbnail from "react-video-thumbnail-image";
import styles from "./ContestPage.module.css";


function Exhibition({ exhibition }) {
const navigate = useNavigate();
const [video, setVideo] = useState([]);
const [allVideo, setAllVideo] = useState([]);
const [show, setShow] = useState(false);

const handleClose = () => {
Expand Down Expand Up @@ -51,12 +51,13 @@ function Exhibition({ exhibition }) {
setVideo(video_result.data);
console.log("video!!!!!!!", video);
};
let random_index = Math.floor(Math.random() * allVideo.length);
// let random_index = Math.floor(Math.random() * allVideo.length);

return (
<span>
<h4 class='Text2'>{exhibition.userNick}님의 전시회</h4>
<ImgBox
id={exhibition.id}
id={exhibition.userNick}
src={exhibition.poster_url}
alt={exhibition.title}
onClick={() => handleShow(exhibition.id)}
Expand Down Expand Up @@ -95,8 +96,7 @@ function Exhibition({ exhibition }) {
creator_nick: video.userNick,
},})}
>
<VideoImageThumbnail

<VideoImageThumbnail
videoUrl={video.url}
width={160}
height={120}
Expand Down Expand Up @@ -144,11 +144,25 @@ function Exhibition({ exhibition }) {
}

function ContestPage() {

const navigate = useNavigate();
const [exhibition, setExhibition] = useState([]);
const [allVideo, setAllVideo] = useState([]);
// const [video, setVideo] = useState([]);

const moveBuyPage = (video) => {
navigate("/buy", {
state: {
title: video.title,
description: video.description,
url: video.url,
poster_url: exhibition.poster_url,
poster_title: exhibition.title,
token: video.tokenId,
creator_nick: video.userNick,
},
});
};

useEffect(async () => {
// const exhibition_result = await axios.get(
// "http://localhost:8000/video/get_art",{
Expand All @@ -162,46 +176,51 @@ function ContestPage() {
);
const all_video_result = await axios.get(
"http://3.39.32.4:8000/video/get_all_video"
// "http://localhost:8000/video/get_all_video"
);

setExhibition(exhibition_result.data);
setAllVideo(all_video_result.data);
console.log(exhibition_result);
}, []);

// let random_index = Math.floor(Math.random() * video.length);
let random_index = Math.floor(Math.random() * allVideo.length);

return (
<div class="page">
<LoginNavigationBar />
<div class="Cbody">
<header
class="banner"
style={{backgroundSize:'cover',
backgroundImage: `url("https://cdn.pixabay.com/photo/2018/08/14/13/23/ocean-3605547_1280.jpg")`,
backgroundPosition:'center center',}}>
<div class='banner__contents'>
<h1 class='banner__title'>title</h1>
<button class="banner__btn">Play</button>
<button class="banner__btn">구매하기</button>

<header class="banner">
<body>
<div class={styles.bg}>
<video src={allVideo[random_index]?.url} autoplay="autoplay" loop="loop" muted></video>
<div class={styles.text}>
<p>{allVideo[random_index]?.title}</p>
<button class="banner__btn" onClick={() => navigate("/video", {
state: {
title: allVideo[random_index]?.title,
description: allVideo[random_index]?.description,
url: allVideo[random_index]?.url,
creator_nick: allVideo[random_index]?.userNick,
},
})}>Play</button>
<button class="banner__btn" onClick={() => moveBuyPage(allVideo[random_index])}>Buy</button>
</div>
<div class={styles.description}>
<p>{allVideo[random_index]?.description}</p>
</div>
</div>

<h1 class="banner__description">
description description description description description description description description description description description description description description description description description
description description description description description description description description description description description
</h1>
<div className="banner--Bottom"/>
</body>
</header>
<div style={{minHeight: '200px'}}>
<h4 class='Text2'>김하연님의 전시회</h4>

<div class="row__posters">

{exhibition.map(
exhibition => (<Exhibition class='row__poster' exhibition={exhibition} key={exhibition.id}/>))}
exhibition => (<Exhibition class='row__poster' exhibition={exhibition} key={exhibition.userNick}/>))}

</div>
</div>
</div>
</div>
<Footer/>
Expand All @@ -217,11 +236,10 @@ const ImgBox = styled.img`
margin: 10px;
cursor: pointer;
&:hover {
transform: scale(1.1);
transition: transform 0.35s;
}
`;

export default Auth(ContestPage, true);
export default Auth(ContestPage, true);
54 changes: 54 additions & 0 deletions exhibit/src/routes/ContestPage.module.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
body {
padding: 0px;
margin: 0px;
}
.bg {
width: 100%;
height: 100%;
overflow: hidden;
margin: 0px auto;
position: relative;
}
video {
width: 100%;
}
.text {
position: absolute;
width: 100%;
top: 50%;
left: 51%;
transform: translate(-50%,-50%);
}
.text p {
text-align: left;
font-size: 48px;
color: #ffffff;
}
.description {
position: absolute;
width: 100%;
top: 80%;
left: 51%;
transform: translate(-50%,-50%);
}
.description p {
text-align: left;
font-size: 24px;
color: #ffffff;
}


/*------------------*/
/* Layout (No Edit) */
/*------------------*/
@media(max-width:664px) {
.bg {
height: auto;
}
video {
height: 400px;
}
.text p {
font-size: 24px;
}
}
118 changes: 111 additions & 7 deletions exhibit/src/routes/MyArtPage.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,14 +6,119 @@ import axios from "axios";
import styled from "styled-components";
import Layout from "../components/Layout";
import Footer from "../components/Footer"
import { Modal, ModalTitle, Row } from "react-bootstrap";
import "./page.css";
// import "../css/bgs.css"
import VideoImageThumbnail from "react-video-thumbnail-image";
import { useNavigate } from "react-router-dom";

function MyArt({ myArt }) {
const navigate = useNavigate();
const [video, setVideo] = useState([]);
const [show, setShow] = useState(false);

const handleClose = () => {
setShow(false);
};

const handleShow = async (id) => {
setShow(true);
// const video_result = await axios.get(
// "http://localhost:8000/video/get_video",
const video_result = await axios.get(
"http://3.39.32.4:8000/video/get_video",
{
headers: {
exhibition: id,
},
}
);
console.log("video_result가 들어왔어요~~~~~~~~", video_result);
setVideo(video_result.data);
console.log("video!!!!!!!", video);
};
return (
<ImgBox
id={myArt.id}
src={myArt.poster_url}
alt={myArt.title}
/>
<span>
<ImgBox
id={myArt.id}
src={myArt.poster_url}
alt={myArt.title}
onClick={() => handleShow(myArt.id)}
/>

<Modal
show={show}
onHide={handleClose}
size="lg"
aria-labelledby="contained-modal-title-vcenter"
centered
>

<Modal.Header closeButton className='modal_header'>
상세정보
</Modal.Header>
<Modal.Body className='modal_body'>
<img class="poster" id={myArt.id} src={myArt.poster_url} />
<br />
<h1 class="title">{myArt.title}</h1>
<br />

<div class="title"> {myArt.description}</div>
</Modal.Body>
<Modal.Body className='modal_body'>
{video.map((video) => (
<div class="FrameRoot">
<div style={{ display: "flex", flexDirection: "row" }}>
{/* <img class="video" src={video.url} alt={video.title}/> */}
<div
class="video"
onClick={() => navigate("/video", {
state: {
title: video.title,
description: video.description,
url: video.url,
creator_nick: video.userNick,
},
})}
>
<VideoImageThumbnail
videoUrl={video.url}
width={160}
height={120}
borderRadius={7}
thumbnailHandler={(thumbnail) => console.log(thumbnail)}
alt={video.title}
/>
</div>
{/* <img class="image" src={video.url} alt={video.title}/> */}
<div>
<h4 class="Text2"> {video.title} </h4>
<span class="Text1"> {video.description} </span>
</div>
</div>
</div>
))}
</Modal.Body>
</Modal>
</span>

// <Modal
// show={show}
// onHide={handleClose}
// size="lg"
// aria-labelledby="contained-modal-title-vcenter"
// centered
// >
// <Modal.Header closeButton>
// {exhibition.title}
// <ImgBox class="img-responsive center-block" id={exhibition.id} src={exhibition.poster_url}/>
// </Modal.Header>
// <Modal.Body>
// {exhibition.description}
// </Modal.Body>
// <Modal.Footer>
// </Modal.Footer>
// </Modal>
);
}

Expand Down Expand Up @@ -67,11 +172,10 @@ const ImgBox = styled.img`
margin: 10px;
cursor: pointer;
&:hover {
transform: scale(1.1);
transition: transform 0.35s;
}
`;

export default Auth(MyArtPage, true);
export default Auth(MyArtPage, true);
Loading

0 comments on commit 07027e1

Please sign in to comment.