diff --git a/Frontend/wb-project/public/favicon.ico b/Frontend/wb-project/public/favicon.ico deleted file mode 100644 index a11777c..0000000 Binary files a/Frontend/wb-project/public/favicon.ico and /dev/null differ diff --git a/Frontend/wb-project/public/index.html b/Frontend/wb-project/public/index.html index 521f652..bac8b2a 100644 --- a/Frontend/wb-project/public/index.html +++ b/Frontend/wb-project/public/index.html @@ -3,12 +3,8 @@ - - - - - React App + 어디서볼? - 예메할 자리를 미리 보고싶을 때 diff --git a/Frontend/wb-project/src/App.js b/Frontend/wb-project/src/App.js index 2439514..a64de8a 100644 --- a/Frontend/wb-project/src/App.js +++ b/Frontend/wb-project/src/App.js @@ -14,6 +14,7 @@ const router = createBrowserRouter([ element: , children: [ { path: '/', element: }, + { path: '/upload', element: }, { path: '/daejeon-worldcup', element: }, { path: '/hanwha-eagles', element: }, { path: '/review-test', element: }, diff --git a/Frontend/wb-project/src/components/Header/Navbar.jsx b/Frontend/wb-project/src/components/Header/Navbar.jsx index 771fefe..2ac8f11 100644 --- a/Frontend/wb-project/src/components/Header/Navbar.jsx +++ b/Frontend/wb-project/src/components/Header/Navbar.jsx @@ -1,7 +1,8 @@ import React from 'react'; import styled from 'styled-components'; -import LoginButton from './LoginButton'; +// import LoginButton from './LoginButton'; import SearchButton from './SearchButton/SearchButton'; +import UploadButton from './UploadButton'; const Nav = styled.div` display: flex; @@ -11,7 +12,8 @@ export default function Navbar() { return ( ); } diff --git a/Frontend/wb-project/src/components/Header/UploadButton.jsx b/Frontend/wb-project/src/components/Header/UploadButton.jsx new file mode 100644 index 0000000..59fbc62 --- /dev/null +++ b/Frontend/wb-project/src/components/Header/UploadButton.jsx @@ -0,0 +1,15 @@ +import React from 'react'; +import { Button } from '../UI/Button'; +import { FiUpload } from 'react-icons/fi'; +import StyledLink from '../UI/StyledLink'; + +export default function UploadButton() { + return ( + + + + ); +} + diff --git a/Frontend/wb-project/src/components/Upload/UploadForm.jsx b/Frontend/wb-project/src/components/Upload/UploadForm.jsx index ed66ddc..f9b1704 100644 --- a/Frontend/wb-project/src/components/Upload/UploadForm.jsx +++ b/Frontend/wb-project/src/components/Upload/UploadForm.jsx @@ -1,16 +1,15 @@ import axios from "axios"; -import React, { useState } from "react"; +import React from "react"; import styled from "styled-components"; import useForm from "../../hooks/useForm"; import { Section } from "../Section/Section"; import Text from "../Text/Text"; +import Uploader from './Uploader'; const Form = styled.form` display: flex; flex-direction: column; align-items: center; - border: 1px solid black; - border-radius: 20px; padding: 10px; width: 700px; margin: 10px; @@ -36,22 +35,13 @@ const Input = styled.input` width: 500px; `; -const PreviewImg = styled.img` - width: 100%; - height: 400px; -`; - -const Label = styled.label` - background-color: #80a9db; - color: white; - padding: 5px 25px; - border-radius: 20px; - margin: 10px 0; - font-size: 24px; - - &:hover { - cursor: pointer; - } +const Select = styled.select` + margin: 5px; + font-size: 32px; + border: 1px solid black; + border-radius: 10px; + width: 520px; + padding: 5px 10px; `; const WarningMessage = styled.span` @@ -86,29 +76,17 @@ const sleep = () => { }; export default function UploadForm() { - const [previewImg, setPreviewImg] = useState( - "https://www.pngall.com/wp-content/uploads/7/Gallery.png" - ); - const insertImg = (e) => { - const reader = new FileReader(); - const img = e.target.files[0]; - if (img) { - reader.readAsDataURL(img); - } - - reader.onloadend = () => { - const previewImgUrl = reader.result; - - setPreviewImg(previewImgUrl); - }; - }; - const { isLoading, errors, handleChange, handleSubmit } = useForm({ initialValues: { + nickname: "", + password: "", title: "", content: "", - seatId: "", - memberId: "1", + venue: "", + sector: "", + seatNumber: "", + // seatId: "", + // memberId: "1", imageFile: null, }, @@ -121,10 +99,14 @@ export default function UploadForm() { // FormData 객체를 생성하고 데이터를 추가합니다. const formData = new FormData(); + formData.append("nickname", values.nickname); + formData.append("password", values.password); formData.append("title", values.title); formData.append("content", values.content); - formData.append("seatId", values.seatId); - formData.append("memberId", values.memberId); + formData.append("venue", values.venue); + formData.append("seat", values.seat); + // formData.append("seatId", values.seatId); + // formData.append("memberId", values.memberId); formData.append("imageFile", values.imageFile); // 파일 추가 axios @@ -139,10 +121,15 @@ export default function UploadForm() { // alert(data); alert(data); }, - validate: ({ seatId, imageFile }) => { + validate: ({ seatId, venue, seat, imageFile, nickname, password }) => { const errors = {}; - if (!seatId) errors.seatId = "⬆️ 좌석 정보를 입력해주세요!"; + // if (!seatId) errors.seatId = "⬆️ 좌석 정보를 입력해주세요!"; + if (!venue) errors.venue = "⬆️ 경기장 혹은 공연장을 선택해주세요!"; + if (!seat) errors.seat = "⬆️ 좌석정보를 입력해주세요!"; if (!imageFile) errors.imageFile = "⬆️ 좌석 이미지를 업로드해주세요!"; + if (!nickname) errors.nickname = "⬆️ 닉네임을 입력해주세요!"; + if (!password) errors.password = "⬆️ 비밀번호를 입력해주세요!"; + return errors; }, }); @@ -158,31 +145,62 @@ export default function UploadForm() {
- - { - handleChange(e); - insertImg(e); - }} + onHandleChange={handleChange} /> - {errors.imageFile} - +
+ + + {errors.nickname} + + + + {errors.password} + +
- + + + + + + {errors.venue} + + + - {errors.seatId} + {errors.seat} - - {/* hidden or disabled */} + + {/* + hidden or disabled - + */} diff --git a/Frontend/wb-project/src/components/Upload/Uploader.jsx b/Frontend/wb-project/src/components/Upload/Uploader.jsx new file mode 100644 index 0000000..a277e90 --- /dev/null +++ b/Frontend/wb-project/src/components/Upload/Uploader.jsx @@ -0,0 +1,134 @@ +import React, { useRef, useState } from 'react'; +import styled from 'styled-components'; +import Text from '../Text/Text'; + +const Input = styled.input` + display: none; +`; + +const UploaderContainer = styled.div` + display: inline-block; + cursor: pointer; +`; + +const PreviewImg = styled.img` + object-fit: contain; + width: 100%; + height: 100%; +`; + +export default function Uploader({ children, droppable, onHandleChange, type, name, accept, value, onChange, ...props }) { + const [previewImg, setPreviewImg] = useState(''); + const insertImg = (e) => { + const reader = new FileReader(); + const img = e.target.files[0]; + if (img) { + reader.readAsDataURL(img); + } + + reader.onloadend = () => { + const previewImgUrl = reader.result; + setPreviewImg(previewImgUrl); + }; + }; + + const inputRef = useRef(null); + + const handleChooseFile = () => { + inputRef.current.click(); + }; + + // const [dragging, setDragging] = useState(false); + // const handleDragEnter = (e) => { + // if (!droppable) return; + // e.preventDefault(); + // e.stopPropagation(); + + // if (e.dataTransfer.items && e.dataTransfer.items.length > 0) { + // setDragging(true); + // } + // }; + + // const handleDragLeave = (e) => { + // if (!droppable) return; + // e.preventDefault(); + // e.stopPropagation(); + + // setDragging(false); + // }; + + // const handleDragOver = (e) => { + // if (!droppable) return; + // e.preventDefault(); + // e.stopPropagation(); + // }; + + // const handleFileDrop = (e) => { + // if (!droppable) return; + // e.preventDefault(); + // e.stopPropagation(); + + // const files = e.dataTransfer.files; + // const changedFile = files[0]; + + // const reader = new FileReader(); + // const img = changedFile; + // if (img) { + // reader.readAsDataURL(img); + // } + + // reader.onloadend = () => { + // const previewImgUrl = reader.result; + // setPreviewImg(previewImgUrl); + // }; + + // const draggedFileData = { [e.dataTransfer.files[0].name]: e.dataTransfer.files[0] }; + // onHandleChange(e, draggedFileData); + + // setDragging(false); + // }; + + return ( + { + // handleFileDrop(e); + // }} + // onDragEnter={handleDragEnter} + // onDragLeave={handleDragLeave} + // onDragOver={handleDragOver} + {...props} + > + { + insertImg(e); + onHandleChange(e); + }} /> +
+ {previewImg ? + : + 클릭해서 사진을 업로드 해주세요. + } +
+ + ); +} \ No newline at end of file