OneEpitome · jinnkimm7 · Apr 13, 2023 · Apr 24, 2023 · Apr 24, 2023 · Apr 24, 2023
diff --git a/Frontend/wb-project/public/favicon.ico b/Frontend/wb-project/public/favicon.ico
diff --git a/Frontend/wb-project/public/index.html b/Frontend/wb-project/public/index.html
@@ -3,12 +3,8 @@
 
 <head>
   <meta charset="utf-8" />
-  <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <meta name="theme-color" content="#000000" />
-  <meta name="description" content="Web site created using create-react-app" />
-  <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-  <title>React App</title>
+  <title>어디서볼? - 예메할 자리를 미리 보고싶을 때</title>
 </head>
 
 <body>

diff --git a/Frontend/wb-project/src/App.js b/Frontend/wb-project/src/App.js
@@ -14,6 +14,7 @@ const router = createBrowserRouter([
     element: <RootLayout />,
     children: [
       { path: '/', element: <HomePage /> },
+      { path: '/upload', element: <UploadForm /> },
       { path: '/daejeon-worldcup', element: <VenueDaejeonW /> },
       { path: '/hanwha-eagles', element: <VenueHanhwa /> },
       { path: '/review-test', element: <UploadForm /> },

diff --git 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 (
     <Nav>
       <SearchButton />
-      <LoginButton />
+      <UploadButton />
+      {/* <LoginButton /> */}
     </Nav>
   );
 }

diff --git a/Frontend/wb-project/src/components/Header/UploadButton.jsx 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 (
+    <StyledLink to='/upload'>
+      <Button>
+        <FiUpload />
+      </Button>
+    </StyledLink>
+  );
+}
+
diff --git 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() {
       </Text>
       <Form onSubmit={handleSubmit}>
         <ImgBox>
-          <PreviewImg src={previewImg} alt="좌석 이미지" />
-          <Input
+          <Uploader
+            droppable
             type="file"
-            id="file"
             name="imageFile"
-            style={{
-              display: "none",
-            }}
-            onChange={(e) => {
-              handleChange(e);
-              insertImg(e);
-            }}
+            onHandleChange={handleChange}
           />
-          <Label htmlFor="file">좌석 이미지 업로드 하기</Label>
           <WarningMessage>{errors.imageFile}</WarningMessage>
         </ImgBox>
-
+        <div style={{
+          display: 'flex',
+          width: '532px',
+        }}>
+          <InputBox>
+            <Input
+              type="text"
+              name="nickname"
+              placeholder="닉네임"
+              onChange={handleChange}
+              style={{
+                width: '235px'
+              }}
+            />
+            <WarningMessage>{errors.nickname}</WarningMessage>
+          </InputBox>
+          <InputBox>
+            <Input
+              type="password"
+              name="password"
+              placeholder="비밀번호"
+              onChange={handleChange}
+              style={{
+                width: '235px'
+              }}
+            />
+            <WarningMessage>{errors.password}</WarningMessage>
+          </InputBox>
+        </div>
         <InputBox>
-          <Input
-            type="number"
-            name="seatId"
-            placeholder="좌석 정보를 입력해주세요."
+          <Select
+            name='venue'
             onChange={handleChange}
+          >
+            <option value="">경기장 혹은 공연장을 선택해주세요.</option>
+            <option value="대전월드컵경기장">대전월드컵경기장</option>
+            <option value="한화생명이글스파크" disabled>한화생명이글스파크</option>
+            <option value="정심화홀" disabled>정심화홀</option>
+          </Select>
+          <WarningMessage>{errors.venue}</WarningMessage>
+        </InputBox>
+        <InputBox>
+          <Input
+            type='string'
+            name='seat'
+            placeholder='좌석을 입력해주세요. 예) S23 20열 23'
           />
-          <WarningMessage>{errors.seatId}</WarningMessage>
+          <WarningMessage>{errors.seat}</WarningMessage>
         </InputBox>
         <InputBox>
           <Input
@@ -200,16 +218,17 @@ export default function UploadForm() {
             onChange={handleChange}
           />
         </InputBox>
-        <InputBox>
-          {/* hidden or disabled */}
+
+        {/* <InputBox>
+          hidden or disabled
           <Input
             type="text"
             name="memberId"
             value="멤버아이디받아와야함"
             disabled
             onChange={handleChange}
           />
-        </InputBox>
+        </InputBox> */}
         <Button type="submit" disabled={isLoading}>
           {isLoading ? "Loading.." : "공유하기"}
         </Button>