From e22ed001c05c74c075f1cdd01f597e9f98a362e5 Mon Sep 17 00:00:00 2001 From: KimSH39 Date: Tue, 11 Oct 2022 17:06:44 +0900 Subject: [PATCH 1/2] =?UTF-8?q?feat:=20=EC=97=85=EB=A1=9C=EB=93=9C=20?= =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=A0=80=EC=9E=91=EA=B6=8C?= =?UTF-8?q?=EC=9E=90=20=EA=B2=80=EC=83=89,=20=EC=A0=95=EC=82=B0=20?= =?UTF-8?q?=EB=B9=84=EC=9C=A8=20=EB=B0=B0=EC=97=B4=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/page/UploadPage.jsx | 358 ++++++++++++++++++++--- src/page/UploadPage/TOSAlert.jsx | 26 -- src/page/UploadPage/UploadPage.jsx | 449 ----------------------------- 3 files changed, 314 insertions(+), 519 deletions(-) delete mode 100644 src/page/UploadPage/TOSAlert.jsx delete mode 100644 src/page/UploadPage/UploadPage.jsx diff --git a/src/page/UploadPage.jsx b/src/page/UploadPage.jsx index fdf6daa..650bc05 100644 --- a/src/page/UploadPage.jsx +++ b/src/page/UploadPage.jsx @@ -1,5 +1,4 @@ import React, { useState, useEffect } from 'react'; - import axios from 'axios'; import { Button, @@ -19,8 +18,8 @@ import { import { createTheme, ThemeProvider } from '@mui/material/styles'; import styled from 'styled-components'; import { useDropzone } from 'react-dropzone'; -// import * as contractApi from '../services/contract'; import { useNavigate } from 'react-router-dom'; +import { InputBase, ListItemButton, Drawer, List, Divider, ListItem, ListItemText } from '@mui/material'; const thumbsContainer = { display: 'flex', @@ -70,7 +69,14 @@ const Boxs = styled(Box)` padding-bottom: 40px !important; `; -function RegisterPage() { +function UploadPage() { + function CheckSession() { + if (localStorage.getItem('jwtToken') == null) { + window.location = 'http://localhost:3000'; + } + } + setInterval(CheckSession(), 100); + const theme = createTheme({ palette: { primary: { @@ -86,20 +92,20 @@ function RegisterPage() { }); const [genre, setGenre] = useState('R&B'); const [checked, setChecked] = useState(false); - const [registerError, setRegisterError] = useState(''); - const token = localStorage.getItem('token'); - // let userId = localStorage.getItem('userId'); - // let sellerContractAddress; + const [musicError, setMusicError] = useState(false); + const [UploadError, setUploadError] = useState(''); + const token = localStorage.getItem('jwtToken'); const onhandlePost = async (data) => { - const { title, album, lylics, file, image } = data; - const postData = { title, album, lylics, genre, file, image }; + console.log('name'); + const { title, album, lylics, file, image, holder, rate } = data; + const postData = { title, album, lylics, genre, file, image, holder, rate }; // post await axios - .post(`http://${process.env.REACT_APP_BACKEND_URL}/api/v1/upload`, { + .post(`http://${process.env.REACT_APP_BACKEND_URL}/api/v1/upload`, postData, { headers: { - authorization: `${token}`, + authorization: token, }, data: postData, }) @@ -110,7 +116,7 @@ function RegisterPage() { }) .catch(function (err) { console.log(err); - setRegisterError('업로드에 실패하였습니다. 다시한번 확인해 주세요.'); + setUploadError('업로드에 실패하였습니다. 다시한번 확인해 주세요.'); }); }; @@ -136,8 +142,34 @@ function RegisterPage() { file: data.get('file'), image: data.get('image'), genre: genreType, + holder: data.get('holder'), + rate: data.get('rate'), }; + //중복곡 체크 + const musicCheck = document.getElementById('file').value; + if (!musicCheck) { + setMusicError('파일을 업로드 해주세요'); + } else { + axios({ + method: 'post', + url: `http://${process.env.REACT_APP_BACKEND_URL}/api/v1/upload/check`, + data: { + music: e.target.value, + }, + }) + .then((res) => { + if (res.data !== null) { + setMusicError(''); + } else { + setMusicError('이미 존재하는 음악입니다.'); + } + }) + .catch((err) => { + console.error(err); + }); + } + // 회원가입 동의 체크 if (!checked) alert('올바른 양식과 함께 업로드 약관에 동의해주세요.'); if (checked) { @@ -184,7 +216,16 @@ function RegisterPage() { let counter = countArr.slice(-1)[0]; counter += 1; countArr.push(counter); // index 사용 X - // countArr[counter] = counter // index 사용 시 윗줄 대신 사용 + // countArr[counter] = counter // index 사용 시 윗줄 대신 사용 + setCountComposerList(countArr); + }; + + const onDeleteComposerDiv = () => { + let countArr = [...countComposerList]; + let counter = countArr.slice(-1)[0]; + counter -= 1; + countArr.pop(counter); // index 사용 X + // countArr[counter] = counter // index 사용 시 윗줄 대신 사용 setCountComposerList(countArr); }; @@ -195,11 +236,28 @@ function RegisterPage() { let counter = countArr.slice(-1)[0]; counter += 1; countArr.push(counter); // index 사용 X - // countArr[counter] = counter // index 사용 시 윗줄 대신 사용 + // countArr[counter] = counter // index 사용 시 윗줄 대신 사용 setCountSingerList(countArr); }; + + const onDeleteSingerDiv = () => { + let countArr = [...countSingerList]; + let counter = countArr.slice(-1)[0]; + counter -= 1; + countArr.pop(counter); // index 사용 X + // countArr[counter] = counter // index 사용 시 윗줄 대신 사용 + setCountSingerList(countArr); + }; + const navigate = useNavigate(); + function clickSubmit() { + if (confirm('한번 업로드 하면 수정이 불가능합니다. 업로드 하시겠습니까?')) { + //form submit + } else { + return; + } + } return ( @@ -286,10 +344,11 @@ function RegisterPage() { + {musicError} @@ -300,6 +359,12 @@ function RegisterPage() { + @@ -312,6 +377,12 @@ function RegisterPage() { + @@ -350,11 +421,12 @@ function RegisterPage() { variant="contained" sx={{ mt: 3, mb: 4 }} style={{ backgroundColor: '#7966ce', height: '60px', fontSize: '20px' }} + onClick={clickSubmit} > 업로드 - {registerError} + {UploadError} @@ -363,7 +435,25 @@ function RegisterPage() { ); } -export default RegisterPage; +export default UploadPage; + +const StyledInputBase = styled(InputBase)(() => ({ + color: 'inherit', + '& .MuiInputBase-input': { + // padding: theme.spacing(1, 1, 1, 0), + // vertical padding + font size from searchIcon + // paddingLeft: `calc(1em + ${theme.spacing(4)})`, + // transition: theme.transitions.create('width'), + backgroundColor: 'white', + height: '85%', + width: '100%', + // [theme.breakpoints.up('md')]: { + // width: '20ch', + // }, + }, +})); + +const ariaLabel = { 'aria-label': 'search' }; //참여자 추가 const DetailDiv = styled.div` @@ -381,26 +471,114 @@ const CreateListDiv = styled.div` `; const ComposerList = (props) => { + const [state, setState] = React.useState({ + bottom: false, + }); + + const anchor = 'bottom'; + + const toggleDrawer = (anchor, open) => (event) => { + handleOnClick(); + + if (event.type === 'keydown' && (event.key === 'Tab' || event.key === 'Shift')) { + return; + } + setState({ ...state, [anchor]: open }); + }; + + // const Navigate = useNavigate(); + const [holder, setholder] = useState([]); + const holderlist = (item) => { + setholder((holder) => { + console.log(holder); + return [...holder, item]; + }); + }; + const list = (anchor) => ( + + + {data.map((item) => ( + + holderlist(item.id)}> + + + + ))} + + + + ); + + const [data, setData] = useState([]); + + const token = localStorage.getItem('jwtToken'); + + const [search, setSearch] = useState(''); + + const [copyright, setcopyright] = useState([]); + + const copyrightlist = (e) => { + setcopyright((copyright) => { + return [...copyright, e.target.value]; + }); + }; + + const handleOnKeyPress = (e) => { + if (e.key == ' ') { + copyrightlist(e); + } + }; + + const onChangeSearch = (e) => { + setSearch(e.target.value); + toggleDrawer(anchor, true); + }; + + const handleOnClick = async () => { + // console.log(token); + + await axios + .get(`http://${process.env.REACT_APP_BACKEND_URL}/api/v1/user?search=${search}`, { + headers: { + authorization: token, + }, + params: { + holder, + }, + }) + .then((res) => { + setData(res.data.data); + console.log(data); + console.log(search); + console.log(holder); + console.log(copyright); + }) + .catch((err) => { + console.log(err); + }); + }; + return ( {props.countComposerList && - props.countComposerList.map((item, i) => ( + props.countComposerList.map((i) => (
- - + { autoComplete="copyright" sx={{ backgroundColor: 'white' }} color="secondary" + onKeyPress={handleOnKeyPress} /> + + + + {list(anchor)} +
))} @@ -421,38 +608,121 @@ const ComposerList = (props) => { }; const SingerList = (props) => { + const [state, setState] = React.useState({ + bottom: false, + }); + + const anchor = 'bottom'; + + const toggleDrawer = (anchor, open) => (event) => { + handleOnClick(); + if (event.type === 'keydown' && (event.key === 'Tab' || event.key === 'Shift')) { + return; + } + setState({ ...state, [anchor]: open }); + }; + const [holder2, setholder2] = useState([]); + const holderlist2 = (item) => { + setholder2((holder2) => { + console.log(holder2); + return [...holder2, item]; + }); + }; + + const list = (anchor) => ( + + + {data.map((item) => ( + + holderlist2(item.id)}> + + + + ))} + + + + ); + + const [data, setData] = useState([]); + + const token = localStorage.getItem('jwtToken'); + + const [search, setSearch] = useState(''); + const [copyright2, setcopyright2] = useState([]); + + const copyrightlist2 = (e) => { + setcopyright2((copyright2) => { + return [...copyright2, e.target.value]; + }); + }; + + const handleOnKeyPress = (e) => { + if (e.key == ' ') { + copyrightlist2(e); + } + }; + + const onChangeSearch = (e) => { + setSearch(e.target.value); + toggleDrawer(anchor, true); + }; + + const handleOnClick = async () => { + await axios + .get(`http://${process.env.REACT_APP_BACKEND_URL}/api/v1/user?search=${search}`, { + headers: { + authorization: token, + }, + }) + .then((res) => { + const data = res.data; + setData(data.data); + console.log(search); + console.log(holder2); + console.log(copyright2); + }) + .catch((err) => { + console.log(err); + }); + }; + return ( {props.countSingerList && - props.countSingerList.map((item, i) => ( + props.countSingerList.map((i) => (
- + - + + + + + {list(anchor)} +
))} diff --git a/src/page/UploadPage/TOSAlert.jsx b/src/page/UploadPage/TOSAlert.jsx deleted file mode 100644 index c10bad6..0000000 --- a/src/page/UploadPage/TOSAlert.jsx +++ /dev/null @@ -1,26 +0,0 @@ -import React, { Component } from "react"; -import Swal from "sweetalert2"; - -export default class TOSAlert extends Component { - - constructor() { - super(); - this.HandleClick = this.HandleClick.bind(this); - } - - HandleClick() { - Swal.fire({ - ...this.props - }); - } - - render() { - return ( -
- -
- ); - } -} \ No newline at end of file diff --git a/src/page/UploadPage/UploadPage.jsx b/src/page/UploadPage/UploadPage.jsx deleted file mode 100644 index deb5eb3..0000000 --- a/src/page/UploadPage/UploadPage.jsx +++ /dev/null @@ -1,449 +0,0 @@ -import React, { useState, useEffect } from 'react'; - -import axios from 'axios'; -import { - Button, - CssBaseline, - TextField, - FormControl, - FormControlLabel, - Checkbox, - FormHelperText, - Grid, - Box, - Typography, - Container, - Select, - MenuItem, -} from '@mui/material/'; -import { createTheme, ThemeProvider } from '@mui/material/styles'; -import styled from 'styled-components'; -import { useDropzone } from "react-dropzone"; - -const thumbsContainer = { - display: "flex", - flexDirection: "row", - flexWrap: "wrap", - marginTop: 0, - padding: 0, - width: 230, - height: 230, - borderRadius: 5, - border: "1px solid lightgray", - backgroundColor:"white" - -}; - -const thumb = { - position: "relative", - display: "inline-flex", - borderRadius: 2, - marginBottom: 8, - marginRight: 8, - width: 230, - height: 230, - padding: 4, - boxSizing: "border-box" -}; - -const thumbInner = { - display: "flex", - minWidth: 0, - overflow: "hidden" -}; - -const img = { - display: "block", - width: 220, - height: 220 -}; - -const FormHelperTexts = styled(FormHelperText)` - width: 100%; - padding-left: 16px; - font-weight: 700 !important; - color: #d32f2f !important; -`; - -const Boxs = styled(Box)` - padding-bottom: 40px !important; -`; - -function RegisterPage() { - const theme = createTheme({ - palette: { - primary: { - main: '#550064', - }, - secondary: { - main: '#7966ce', - }, - header: { - main: 'transparent', - }, - }, - }); - const [genre, setGenre] = useState('R&B'); - const [checked, setChecked] = useState(false); - const [registerError, setRegisterError] = useState(''); - - const onhandlePost = async (data) => { - const {title, album, lylics, file, image } = data; - const postData = { title, album, lylics, genre, file, image }; - - // post - await axios - .post('http://localhost:5000/api/v1/upload', { - headers: { - authorization: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6NywibmFtZSI6IuuwseyYiOumsCIsImlhdCI6MTY2MDgwMTc5NH0.tgaEvAYf_SHqIlZOa1Z0tYgHgEMi2a3BJ7Nsb0k72Wg' - }, - data: postData - }) - .then(function (response) { - console.log(response, '성공'); - alert("업로드 성공!") - location.reload('') - }) - .catch(function (err) { - console.log(err); - setRegisterError('업로드에 실패하였습니다. 다시한번 확인해 주세요.'); - }); - }; - - const handleChange = (event) => { - setGenre(event.target.value); - }; - - const handleAgree = (event) => { - setChecked(event.target.checked); - }; - - const handleSubmit = (e) => { - e.preventDefault(); - - const data = new FormData(e.currentTarget); - const genreType = genre; - const joinData = { - title: data.get('title'), - album: data.get('album'), - name: data.get('name'), - lylics: data.get('lylics'), - file:data.get('file'), - image:data.get('image'), - genre: genreType, - }; - - // 회원가입 동의 체크 - if (!checked) alert('올바른 양식과 함께 업로드 약관에 동의해주세요.'); - - if ( - checked - ) { - onhandlePost(joinData); - } - }; - - //엘범 커버 드래그앤드롭 - const [files, setFiles] = useState([]); - const { getRootProps, getInputProps} = useDropzone({ - - accept: "image/*", - onDrop: (acceptedFiles) => { - setFiles( - acceptedFiles.map((file) => - Object.assign(file, { - preview: URL.createObjectURL(file) - }) - ) - ); - } - }); - - const thumbs = files.map((file) => ( -
-
- -
- -
- )); - - useEffect( - () => () => { - // Make sure to revoke the Object URL to avoid memory leaks - files.forEach((file) => URL.revokeObjectURL(file.preview)); - }, - [files] - ); - - //작곡가, 가수 추가 부분 - const [countComposerList, setCountComposerList] = useState([0]) - - const onAddComposerDiv = () => { - let countArr = [...countComposerList] - let counter = countArr.slice(-1)[0] - counter += 1 - countArr.push(counter) // index 사용 X - // countArr[counter] = counter // index 사용 시 윗줄 대신 사용 - setCountComposerList(countArr) - } - - const [countSingerList, setCountSingerList] = useState([0]) - - const onAddSingerDiv = () => { - let countArr = [...countSingerList] - let counter = countArr.slice(-1)[0] - counter += 1 - countArr.push(counter) // index 사용 X - // countArr[counter] = counter // index 사용 시 윗줄 대신 사용 - setCountSingerList(countArr) - } - - return ( - - - - - - - 회원가입 - - - - - - -
- - - -
- - - - - - - - - - - - - - - - - - - - -
- -
- - - - - -
- - -
- - - - -