1차 프로젝트

admin.js 수정

import React, { Component } from 'react';
import './Admin.scss';

class Admin extends Component {
  state = {
    // emailAgree: true,
    // phoneAgree: true,
    category: '',
    categorySub: '',
    productName: '',
    cost: '',
    imgUrl: '',
    option: '',
    options: [],
    optionName1: '',
    optionCost1: '',
    optionName2: '',
    optionCost2: '',
    optionName3: '',
    optionCost3: '',
    // address: '',
    // zoneCode: '',
    // fullAddress: '',
    // isDaumPost: false,
    // isRegister: false,
    register: [],
  };

  handleRegister = () => {
    const options = [1, 2, 3].map(i => ({
      name: this.state[`optionName${i}`],
      cost: this.state[`optionCost${i}`],
    }));

    console.log(options);

    this.setState({
      options,
    });

    setTimeout(() => {
      console.log(this.state);
    }, 1000);
  };

  //input 값
  handleInputChange = e => {
    const { name, value } = e.target;

    this.setState({
      [name]: value,
    });
  };

  if() {
    fetch('http://10.58.2.56:8000/user/sign-up', {
      method: 'POST',
      body: JSON.stringify({
        username: this.state.userId,
        password: this.state.password,
        name: this.state.name,
        phone_number: this.state.phone,
        email: this.state.email,
        address: '0000',
        postal_code: '00000',
        detailed_address: '0000',
      }),
    }) //
      .then(res => res.json())
      .then(result => {
        console.log('잘됐음', result);
        // if (response.status === 400) {
        //   alert('다시 한번 확인해주세요');
        // } else {
        //   alert('가입완료!');
        //   this.props.history.push('/login');
        //   window.location.reload();
        // }
      });
  }

  render() {
    // console.log(this.state);
    return (
      <div className="adminComponent">
        <form id="formJoin" name="formJoin" method="post">
          <div className="baseInputBox">
            <h3>상품등록 (관리자 페이지)</h3>
            <div className="baseInformation">
              <table border="0" cellpadding="0" cellspacing="0">
                <colgroup>
                  <col width="25%" />
                  <col width="75%" />
                </colgroup>
                <tbody>
                  {/* <tr>
                    <th>
                      <span className="important">카테고리</span>
                    </th>
                    <td>
                      <div className="memberWarning">
                        <input
                          className="inputEmail"
                          type="text"
                          onChange={this.handleInputChange}
                          name="userId"
                        ></input>
                        <button
                          className="inputAddressButton"
                          onClick={this.idCheck}
                        >
                          아이디확인
                        </button>
                      </div>
                      {this.state.userId ? null : (
                        <div style={{ color: 'red', fontSize: '10px' }}>
                          4~12자 영문소문자, 숫자, 언더라인(_) 사용가능
                        </div>
                      )}
                    </td>
                  </tr> */}

                  <tr>
                    <th>
                      <span className="important">◾ 카테고리</span>
                    </th>
                    <td>
                      <div className="memberWarning">
                        <input
                          type="text"
                          onChange={this.handleInputChange}
                          name="category"
                        ></input>
                      </div>
                    </td>
                  </tr>

                  <tr>
                    <th>
                      <span className="important">◾ sub 카테고리</span>
                    </th>
                    <td>
                      <div className="memberWarning">
                        <input
                          type="text"
                          onChange={this.handleInputChange}
                          name="categorySub"
                        ></input>
                      </div>
                    </td>
                  </tr>

                  <tr>
                    <th>
                      <span className="important">◾금액</span>
                    </th>
                    <td>
                      <div className="memberWarning">
                        <input
                          type="text"
                          onChange={this.handleInputChange}
                          name="cost"
                        ></input>
                      </div>
                    </td>
                  </tr>

                  <tr>
                    <th>
                      <span className="important">◾ 상품명</span>
                    </th>
                    <td>
                      <div className="memberWarning">
                        <input
                          onChange={this.handleInputChange}
                          name="productName"
                        ></input>
                      </div>
                    </td>
                  </tr>

                  <tr>
                    <th>
                      <span className="important">◾이미지 url</span>
                    </th>
                    <td>
                      <div className="memberWarning">
                        <input
                          type="text"
                          onChange={this.handleInputChange}
                          name="imgUrl"
                        ></input>
                      </div>
                    </td>
                  </tr>

                  <tr>
                    <th>
                      <span className="important">◾option</span>
                    </th>
                    <td>
                      <div className="memberWarning">
                        <input
                          type="text"
                          onChange={this.handleInputChange}
                          name="option"
                        ></input>
                      </div>
                    </td>
                  </tr>

                  <tr>
                    <th>
                      <span className="important">◾optionName1</span>
                    </th>
                    <td>
                      <div className="memberWarning">
                        <input
                          type="text"
                          onChange={this.handleInputChange}
                          name="optionName1"
                        ></input>
                      </div>
                    </td>
                  </tr>

                  <tr>
                    <th>
                      <span className="important">◾optionCost1</span>
                    </th>
                    <td>
                      <div className="memberWarning">
                        <input
                          type="text"
                          onChange={this.handleInputChange}
                          name="optionCost1"
                        ></input>
                      </div>
                    </td>
                  </tr>

                  <tr>
                    <th>
                      <span className="important">◾optionName2</span>
                    </th>
                    <td>
                      <div className="memberWarning">
                        <input
                          type="text"
                          onChange={this.handleInputChange}
                          name="optionName2"
                        ></input>
                      </div>
                    </td>
                  </tr>

                  <tr>
                    <th>
                      <span className="important">◾optionCost2</span>
                    </th>
                    <td>
                      <div className="memberWarning">
                        <input
                          type="text"
                          onChange={this.handleInputChange}
                          name="optionCost2"
                        ></input>
                      </div>
                    </td>
                  </tr>

                  <tr>
                    <th>
                      <span className="important">◾optionName3</span>
                    </th>
                    <td>
                      <div className="memberWarning">
                        <input
                          type="text"
                          onChange={this.handleInputChange}
                          name="optionName3"
                        ></input>
                      </div>
                    </td>
                  </tr>

                  <tr>
                    <th>
                      <span className="important">◾optionCost3</span>
                    </th>
                    <td>
                      <div className="memberWarning">
                        <input
                          type="text"
                          onChange={this.handleInputChange}
                          name="optionCost3"
                        ></input>
                      </div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </form>

        <div className="btnFinalBox">
          <button className="btnMemberCancel">취소</button>
          <button className="btnMemberJoin" onClick={this.handleRegister}>
            상품등록
          </button>
        </div>
      </div>
    );
  }
}

export default Admin;

admin.js

import React, { Component } from 'react';
import './Login.scss';

class Login extends Component {
  state = {
    userId: '0',
    password: '0',
    isLogin: false,
  };

  handleInput = e => {
    this.setState({
      [e.target.name]: e.target.value,
    });
  };

  handleLogin = e => {
    e.preventDefault();
    console.log('a');
    fetch('http://10.58.3.162:8000/user/login', {
      method: 'POST',
      body: JSON.stringify({
        username: this.state.userId,
        password: this.state.password,
      }),
    })
      .then(res => res.json())
      .then(result => {
        console.log(result);
        if (result.token) {
          console.log('굿굿구웃이에요');
          localStorage.setItem('token', result.token);
          alert('성공');
          this.props.history.push('/signin');
          // this.setState({
          //   isLogin: true,
          //   email: this.state.userId,
          //   password: this.state.password,
          // });
        } else {
          alert('로그인 실패 ');
        }
      });
  };

  render() {
    return (
      <div class="loginComponent">
        <h3> 회원로그인</h3>
        <div class="loginBox">
          <div class="loginInput">
            <input
              onChange={this.handleInput}
              name="userId"
              className="inputId"
              placeholder="아이디"
            />
            {!this.state.userId && (
              <div style={{ color: 'red', fontSize: '10px' }}>
                아이디를 입력하세요
              </div>
            )}
            <input
              onChange={this.handleInput}
              name="password"
              className="inputPw"
              placeholder="비밀번호"
            />
            {!this.state.password && (
              <div style={{ color: 'red', fontSize: '10px' }}>
                비밀번호를 입력하세요
              </div>
            )}
          </div>
          <div className="idCheck">
            <input type="checkbox" class="saveId" id="saveId" />
            <label for="savdId">아이디 저장</label>
          </div>
          <button type="submit" onClick={this.handleLogin}>
            로그인
          </button>
        </div>
        <div className="btnLoginBox">
          <ul>
            <li>
              <button type="button" className="btnMemberJoisn">
                회원가입
              </button>
            </li>
            <li>
              <button type="button" className="btnFindId">
                아이디 찾기
              </button>
            </li>
            <li>
              <button type="button" className="btnFindPw">
                비밀번호 찾기
              </button>
            </li>
          </ul>
        </div>
      </div>
    );
  }
}

export default Login;

admin.scss

.adminComponent {
width: 700px;
margin: 0 auto;
padding: 50px 0;

//depth2
form {
display: flex;
justify-content: left;
.baseInputBox {
width: 700px;
margin-bottom: 20px;
h3 {
display: inline-block;
margin-right: 380px;
margin-bottom: 40px;
}
span {
font-size: 12px;
text-align: left;
}
.baseInformation {
table {
width: 700px;
colgroup {
}
tbody {
tr:first-child {
border-top: 2px solid #b3b1b1;
}
tr {
border-bottom: 1px solid #dcdcdc;
th {
background: #fbfbfb;
padding: 20px 25px;
font-size: 12px;
font-weight: 800;
text-align: left;
span {
}
}
td {
padding: 10px 25px;
div {
margin-bottom: 5px;

              input {
                outline: none;
                border: 1px solid #d6d6d6;
                height: 31px;
                width: 350px;
              }
              select {
                width: 100px;
                height: 35px;
              }
              .inputAddressButton {
                width: 100px;
                height: 35px;
                background: white;
                color: black;
                outline: none;
                border: 1px solid black;
              }
              .inputEmail {
                width: 240px;
                margin-right: 10px;
              }
              .inputAddress {
                width: 240px;
                margin-right: 10px;
              }

              .inputAddressBottom {
                margin-top: 5px;
              }
            }
            .jsEmail {
            }
            .formElement {
              text-align: left;
              input {
                width: 12px;
                height: 12px;
              }
              label {
                font-size: 10px;
              }
            }
          }
        }
      }
    }
  }
}

}

//depth2
.btnFinalBox {
text-align: center;
.btnMemberCancel {
width: 150px;
height: 45px;
color: #3e3d3c;
font-weight: bold;
cursor: pointer;
background: #fff;
border: 1px solid #cccccc;
margin-right: 10px;
}
.btnMemberJoin {
width: 150px;
height: 45px;
color: #fff;
font-weight: bold;
cursor: pointer;
background: black;
}
}
}