From ded7f980bb74e8729e7dddbb24931c8129970fa8 Mon Sep 17 00:00:00 2001
From: YeaJin Ha <hyj1004mu@naver.com>
Date: Tue, 3 Nov 2020 20:58:42 +0900
Subject: [PATCH] =?UTF-8?q?=EB=B9=84=EC=97=BC=20=EB=84=88=EB=AC=B4=20?=
 =?UTF-8?q?=ED=9E=98=EB=93=9C=EB=9F=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 server/client/src/Components/Menu.js  |   2 +-
 server/client/src/Pages/ApplyPage.js  | 335 +++++++++++++-------------
 server/client/src/Pages/SignupPage.js |  11 +-
 server/client/src/Pages/WritePage.js  |  27 ++-
 4 files changed, 191 insertions(+), 184 deletions(-)

diff --git a/server/client/src/Components/Menu.js b/server/client/src/Components/Menu.js
index d529b6d..ec8d517 100644
--- a/server/client/src/Components/Menu.js
+++ b/server/client/src/Components/Menu.js
@@ -41,7 +41,7 @@ function Menu() {
     if (state) return <Redirect to="/" />
     return (
         <MENU expand="md" variant="dark">
-            <Navbar.Brand href="#">대관 서비스</Navbar.Brand>
+            <Navbar.Brand as={Link} to="/home">대관 서비스</Navbar.Brand>
             <Navbar.Toggle aria-controls="basic-navbar-nav" />
             <Navbar.Collapse id="basic-navbar-nav">
                 <Nav className="mr-auto">
diff --git a/server/client/src/Pages/ApplyPage.js b/server/client/src/Pages/ApplyPage.js
index 251245f..5eea217 100644
--- a/server/client/src/Pages/ApplyPage.js
+++ b/server/client/src/Pages/ApplyPage.js
@@ -2,9 +2,9 @@ import React, { useState, useEffect } from 'react';
 import { Formik, Field, ErrorMessage, FieldArray } from 'formik';
 import Menu from '../Components/Menu';
 import axios from 'axios';
-import 'bootstrap/dist/css/bootstrap.css';
 import * as Yup from 'yup';
 import { Redirect } from 'react-router-dom';
+import { Col, Container, Row } from 'react-bootstrap';
 
 function Apply(props) {
     const [state, setState] = useState();
@@ -41,7 +41,6 @@ function Apply(props) {
             <option value="2">2시간</option>
             <option value="3">3시간</option>
         </Field>)
-
     }
 
     function getUser() {
@@ -63,175 +62,175 @@ function Apply(props) {
     return (
         <div>
             <Menu />
-            <Formik
-                initialValues={{
-                    _id: `${props.match.params.id}`,
-                    date: '',
-                    starttime: '',
-                    usetime: '',
-                    room: '',
-                    reason: '',
-                    students: [
-                        {
-                            member: '',
-                        },
-                    ],
-                }}
-                validationSchema={Yup.object({
-                    date: Yup.string()
-                        .required('날짜를 입력해주세요.'),
-                    room: Yup.string()
-                        .required('강의실 번호를 입력해주세요.'),
-                    reason: Yup.string()
-                        .required('대관목적을 입력해주세요.'),
-                })}
-                onSubmit={(values, { setSubmitting }) => {
-                    console.log(values)
-                    axios({
-                        method: 'post',
-                        url: '/reserves',
-                        data: values
-                    }).then(res => {
-                        if (res.status === 404) {
-                            alert(res.data.error)
-                            return window.location.reload();
-                        }
-                        alert("신청이 완료되었습니다!");
-                        setState(true);
-                        console.log("res.data", res.data)
-                    })
-                        .catch(err => {
-                            alert(err.error)
-                        });
-
-                    setTimeout(() => {
-                        setSubmitting(false);
-                    }, 400);  // finish the cycle in handler
-                }}
-            >
-                {({
-                    errors,
-                    touched,
-                    values,
-                    handleSubmit,
-                    getFieldProps,
-                    isSubmitting,
-                }) => (
-                        <div className="row justify-content-center align-items-center">
-                            <form onSubmit={handleSubmit} className="col-sm-3">
-                                <div className="form-group mb-4">
-                                    <label>대표자</label>
-                                    <div>{user.name}</div>
-                                </div>
-                                <div className="form-group mb-4">
-                                    <label>신청날짜</label>
-                                    <input
-                                        className={(touched.date && errors.date ? 'form-control is-invalid' : "form-control")}
-                                        type="text"
-                                        name="date"
-                                        {...getFieldProps('date')}
-                                        placeholder="yyyy-mm-dd"
-                                    />
-                                    {touched.date && errors.date ? (
-                                        <div className="invalid-feedback text-left">{errors.date}</div>
-                                    ) : null}
-                                </div>
-                                <div className="form-group mb-4">
-                                    <label>이용시작시간</label>
-                                    <Field as="select" name="starttime">
-                                        <option value="">이용시작시간</option>
-                                        <option value="9">9시</option>
-                                        <option value="10">10시</option>
-                                        <option value="11">11시</option>
-                                        <option value="12">12시</option>
-                                        <option value="13">13시</option>
-                                        <option value="14">14시</option>
-                                        <option value="15">15시</option>
-                                        <option value="16">16시</option>
-                                        <option value="17">17시</option>
-                                        <option value="18">18시</option>
-                                        <option value="19">19시</option>
-                                        <option value="20">20시</option>
-                                        <option value="21">21시</option>
-                                    </Field>
-                                </div>
-                                <div className="form-group mb-4">
-                                    <label>이용시간</label>
-                                    {time(values.starttime)}
-                                </div>
-                                <div className="form-group mb-4">
-                                    <label>강의실</label>
-                                    <input
-                                        className={(touched.room && errors.room ? 'form-control is-invalid' : "form-control")}
-                                        type="text"
-                                        name="room"
-                                        {...getFieldProps('room')}
-                                        placeholder="bn-nnn"
-                                    />
-                                    {touched.room && errors.room ? (
-                                        <div className="invalid-feedback text-left">{errors.room}</div>
-                                    ) : null}
-                                </div>
-                                <div className="form-group mb-4">
-                                    <label>대관목적</label>
-                                    <input
-                                        className={(touched.reason && errors.reason ? 'form-control is-invalid' : "form-control")}
-                                        type="text"
-                                        name="reason"
-                                        {...getFieldProps('reason')}
-                                        placeholder="대관목적을 입력해 주세요."
-                                    />
-                                    {touched.reason && errors.reason ? (
-                                        <div className="invalid-feedback text-left">{errors.reason}</div>
-                                    ) : null}
-                                </div>
-                                <div className="form-group mb-4">
-                                    <FieldArray name="students">
-                                        {({ insert, remove, push }) => (
+            <Container fluid>
+                <Row className="justify-content-center">
+                    <Col md={5}>
+                        <Formik
+                            initialValues={{
+                                _id: `${props.match.params.id}`,
+                                date: '',
+                                starttime: '',
+                                usetime: '',
+                                room: '',
+                                reason: '',
+                                students: [
+                                    {
+                                        member: '',
+                                    },
+                                ],
+                            }}
+                            validationSchema={Yup.object({
+                                date: Yup.string()
+                                    .required('날짜를 입력해주세요.'),
+                                room: Yup.string()
+                                    .required('강의실 번호를 입력해주세요.'),
+                                reason: Yup.string()
+                                    .required('대관목적을 입력해주세요.'),
+                            })}
+                            onSubmit={(values, { setSubmitting }) => {
+                                console.log(values)
+                                axios({
+                                    method: 'post',
+                                    url: '/reserves',
+                                    data: values
+                                }).then(res => {
+                                    if (res.status === 404) {
+                                        alert(res.data.error)
+                                        return window.location.reload();
+                                    }
+                                    alert("신청이 완료되었습니다!");
+                                    setState(true);
+                                    console.log("res.data", res.data)
+                                })
+                                    .catch(err => {
+                                        alert(err.error)
+                                    });
+
+                                setTimeout(() => {
+                                    setSubmitting(false);
+                                }, 400);  // finish the cycle in handler
+                            }}
+                        >
+                            {({
+                                errors,
+                                touched,
+                                values,
+                                handleSubmit,
+                                getFieldProps,
+                                isSubmitting,
+                            }) => (
+                                    <form onSubmit={handleSubmit} className="d-flex flex-column">
+                                        <h3 className="form-group font-weight-bold">
+                                            <label className="pr-2 ">대표자 :</label>{user.name}
+                                        </h3>
+
+                                        <div className="form-group">
+
+                                            <div className={touched.date && errors.date ? "text-danger" : ""}>신청날짜</div>
+                                            <input
+                                                className={(touched.date && errors.date ? 'form-control is-invalid' : "form-control")}
+                                                type="text"
+                                                name="date"
+                                                {...getFieldProps('date')}
+                                                placeholder="yyyy-mm-dd"
+                                            />
+                                        </div>
+
+                                        <div className="form-group mb-4">
+                                            <label>이용시작시간</label>
+                                            <div>
+                                                <Field as="select" name="starttime">
+                                                    <option value="">이용시작시간</option>
+                                                    <option value="9">9시</option>
+                                                    <option value="10">10시</option>
+                                                    <option value="11">11시</option>
+                                                    <option value="12">12시</option>
+                                                    <option value="13">13시</option>
+                                                    <option value="14">14시</option>
+                                                    <option value="15">15시</option>
+                                                    <option value="16">16시</option>
+                                                    <option value="17">17시</option>
+                                                    <option value="18">18시</option>
+                                                    <option value="19">19시</option>
+                                                    <option value="20">20시</option>
+                                                    <option value="21">21시</option>
+                                                </Field>
+                                            </div>
+                                        </div>
+
+                                        <div className="form-group mb-4">
+                                            <label>이용시간</label>
                                             <div>
-                                                <label>이용자</label>
-                                                {
-                                                    values.students.map((student, index) => (
-                                                        <div className="row" key={index}>
-                                                            <div className="col">
-                                                                <Field
-                                                                    name={`students.${index}.member`}
-                                                                    placeholder="이용자 성함을 입력하세요."
-                                                                    type="text"
-                                                                />
-                                                                <ErrorMessage
-                                                                    name={`friends.${index}.name`}
-                                                                    component="div"
-                                                                    className="field-error"
-                                                                />
-                                                                <button
-                                                                    type="button"
-                                                                    className="secondary"
-                                                                    onClick={() => remove(index)}
-                                                                >
-                                                                    X
-                                                                        </button>
-                                                            </div>
-                                                        </div>
-                                                    ))}
-                                                <button
-                                                    type="button"
-                                                    className="btn btn-primary"
-                                                    onClick={() => push({ member: '' })}
-                                                >
-                                                    추가
-                                                </button>
+                                                {time(values.starttime)}
                                             </div>
-                                        )}
-                                    </FieldArray>
-                                </div>
-                                <button type="submit" className="btn btn-dark" disabled={isSubmitting}>
-                                    신청하기
+                                        </div>
+
+                                        <div className="form-group mb-4">
+                                            <div className={touched.room && errors.room ? "text-danger" : ""}>강의실</div>
+                                            <input
+                                                className={(touched.room && errors.room ? 'form-control is-invalid' : "form-control")}
+                                                type="text"
+                                                name="room"
+                                                {...getFieldProps('room')}
+                                                placeholder="bn-nnn"
+                                            />
+                                        </div>
+
+                                        <div className="form-group mb-4">
+                                            <div className={touched.reason && errors.reason ? "text-danger" : ""}>대관 목적</div>
+                                            <input
+                                                className={(touched.reason && errors.reason ? 'form-control is-invalid' : "form-control")}
+                                                type="text"
+                                                name="reason"
+                                                {...getFieldProps('reason')}
+                                                placeholder="대관목적을 입력해 주세요."
+                                            />
+                                        </div>
+
+                                        <div className="form-group mb-4">
+                                            <FieldArray name="students">
+                                                {({ insert, remove, push }) => (
+                                                    <div>
+                                                        <label>이용자</label>
+                                                        {
+                                                            values.students.map((student, index) => (
+                                                                <Row key={index}>
+                                                                        <Field
+                                                                            name={`students.${index}.member`}
+                                                                            placeholder="이용자 성함을 입력하세요."
+                                                                            type="text"
+                                                                        />
+                                                                        <ErrorMessage
+                                                                            name={`friends.${index}.name`}
+                                                                            component="div"
+                                                                            className="field-error"
+                                                                        />
+                                                                        <button
+                                                                            type="button"
+                                                                            className="secondary"
+                                                                            onClick={() => remove(index)}
+                                                                        >X</button>
+                                                                </Row>
+                                                            ))}
+                                                        <button
+                                                            type="button"
+                                                            className="btn btn-primary"
+                                                            onClick={() => push({ member: '' })}
+                                                        >추가</button>
+                                                    </div>
+                                                )}
+                                            </FieldArray>
+                                        </div>
+                                        <button type="submit" className="btn btn-dark" disabled={isSubmitting}>
+                                            신청하기
                                 </button>
-                            </form>
-                        </div>
-                    )}
-            </Formik>
+                                    </form>
+                                )}
+
+                        </Formik>
+                    </Col>
+                </Row>
+            </Container>
         </div>
     )
 }
diff --git a/server/client/src/Pages/SignupPage.js b/server/client/src/Pages/SignupPage.js
index fd8c7bb..c2010f4 100644
--- a/server/client/src/Pages/SignupPage.js
+++ b/server/client/src/Pages/SignupPage.js
@@ -25,11 +25,6 @@ const Wow = styled.div`
         content: '비밀번호가 일치하지 않습니다.';
         color: red;
     }
-
-    & .asd {
-        display: flex;
-        flex-direction: column;
-    }
 `
 
 function Signup() {
@@ -46,7 +41,7 @@ function Signup() {
             </Menu>
             <Container fluid>
                 <Wow className="row justify-content-center">
-                <Col md={3} xs={11} className="p-0">
+                    <Col md={3} xs={11} className="p-0">
                         <Formik
                             initialValues={{ name: '', id: '', password: '', password2: '', question: '', answer: '' }}
                             validationSchema={Yup.object({
@@ -91,7 +86,7 @@ function Signup() {
                                 getFieldProps,  // contain values, handleChange, handleBlur
                                 isSubmitting,
                             }) => (
-                                    < form onSubmit={handleSubmit} className="asd">
+                                    <form onSubmit={handleSubmit} className="d-flex flex-column pt-3">
                                         <div className="form-group ">
                                             <div className={touched.name && errors.name ? "text-danger" : ""}>이름을 입력하세요</div>
                                             <input
@@ -154,7 +149,7 @@ function Signup() {
                                                 {...getFieldProps('answer')}
                                                 placeholder="Input answer" />
                                         </div>
-                                        <Button type="submit" variant="secondary" disabled={isSubmitting}>회원가입</Button>
+                                        <Button type="submit" variant="secondary" className="mb-2" disabled={isSubmitting}>회원가입</Button>
                                         <Button variant="outline-secondary" as={Link} to="/login">로그인하러 가기</Button>
                                     </form>
                                 )}
diff --git a/server/client/src/Pages/WritePage.js b/server/client/src/Pages/WritePage.js
index b9bac36..b172ed5 100644
--- a/server/client/src/Pages/WritePage.js
+++ b/server/client/src/Pages/WritePage.js
@@ -3,7 +3,7 @@ import { Link, Redirect } from 'react-router-dom';
 import Menu from '../Components/Menu';
 import * as Yup from 'yup';
 import axios from 'axios';
-import { Container, Row, Col } from 'react-bootstrap';
+import { Container, Row, Col, Form } from 'react-bootstrap';
 import { Field, Formik } from 'formik';
 
 function Write() {
@@ -18,7 +18,7 @@ function Write() {
             <Menu />
             <Container fluid>
                 <Row className="justify-content-center">
-                    <Col md={12} xl={8} style={{ height: "35em" }}>
+                    <Col md={5} xs={11} className="pt-3" >
                         <Formik
                             initialValues={{ title: '', content: '' }}
                             validationSchema={Yup.object({
@@ -52,11 +52,23 @@ function Write() {
                             getFieldProps,  // contain values, handleChange, handleBlur
                             isSubmitting,
                         }) => (
-                                <form onSubmit={handleSubmit} className="asd">
-                                    {/* col-sm-3 */}
+                                // <Form onSubmit={handleSubmit}>
+                                //     <Form.Group>
+                                //         <Form.Label variant={touched.name && errors.name ? "danger" : ""}>제목</Form.Label>
+                                //         <Form.Control className={(touched.name && errors.name ? 'form-control is-invalid' : "form-control")}
+                                //             type="text"
+                                //             placeholder="제목"
+                                //             title="title"
+                                //             {...getFieldProps('title')} />
+                                //     </Form.Group>
+                                //     <Form.Group>
+                                //         <Form.Label>내용</Form.Label>
+                                //         <Form.Control as="textarea" rows={10} />
+                                //     </Form.Group>
+                                // </Form>
 
+                                <form onSubmit={handleSubmit}>
                                     <div className="form-group">
-                                        {/*  mb-4 */}
                                         <div className={touched.name && errors.name ? "text-danger" : ""}>제목</div>
                                         <input className={(touched.name && errors.name ? 'form-control is-invalid' : "form-control")}
                                             type="text"
@@ -64,8 +76,8 @@ function Write() {
                                             {...getFieldProps('title')}
                                             placeholder="제목" />
                                     </div>
+
                                     <div className="form-group ">
-                                        {/*  mb-4 */}
                                         <div className={touched.name && errors.name ? "text-danger" : ""}>내용</div>
                                         <input className={(touched.name && errors.name ? 'form-control is-invalid' : "form-control")}
                                             type="text"
@@ -73,6 +85,7 @@ function Write() {
                                             {...getFieldProps('content')}
                                             placeholder="내용" />
                                     </div>
+
                                     <button type="submit" className="btn btn-dark" disabled={isSubmitting}>공지 등록</button>
                                 </form>
                             )}
@@ -83,5 +96,5 @@ function Write() {
         </div>
     )
 }
- 
+
 export default Write
-- 
GitLab