1. 로그인 기능 구현

• state 설정

  class Login extends Component {
    state = {
      userId: "",    
      userPw: "",
      idValue: false,
      pwValue: false,
      btnColor: "#ccdefc",
      setId: "[email protected]",
      setPw: "123456789",
    };

• input에서 들어온 id의 value 안에 @유무를 조건에 맞게 btnChange 함수 호출

  
  getIdValue = (e) => {
  this.setState({ userId: e.target.value });
  if (e.target.value.includes("@")) {
  this.setState({ idValue: true }, () => {
  this.btnChange();
  });
  } else {
  this.setState({ idValue: false }, () => {
  this.btnChange();
  });
  }
  };

• id와 마찬가지로 비밀번호의 길이가 5자리 이상인지 확인하고 btnChange 함수 호출

  getPwValue = (e) => {
  this.setState({ userPw: e.target.value });
  if (e.target.value.length >= 5) {
  this.setState({ pwValue: true }, () => this.btnChange());
  } else {
  this.setState({ pwValue: false }, () => this.btnChange());
  }
  };

• 조건에 맞으면 버튼색 변화.

  btnChange = () => {
  if (this.state.pwValue && this.state.idValue) {
  this.setState({ btnColor: "#2d58da" });
  } else {
  this.setState({ btnColor: "#ccdefc" });
  }
  };

• 셋팅해놓은 아이디와 비밀번호랑 들어오는 value의 값과 비교해서 로그인 성공시 메인페이지로 이동!

  goToMain = () => {
  if (
  this.state.userId === this.state.setId &&
  this.state.userPw === this.state.setPw
  ) {
  this.props.history.push("/main"); // 내가 이동하고 싶은 path의 경로
  } else if (this.state.userId !== this.state.setId) {
  alert("아이디가 틀렸습니다.");
  } else {
  alert("비밀번호가 틀렸습니다.");
  }
  };

render() {
  return (
    <>
      <header className="LoginHeader">
        <h1>Westagram</h1>
      </header>
      <section>
        <input
          name="idInput"
          type="text"
          id="loginEmail"
          placeholder="전화번호, 사용자 이름 또는 이메일"
          onChange={this.getIdValue}
</input>
        <input
          name="pwInput"
          type="password"
          id="loginPw"
          placeholder="비밀번호"
          onChange={this.getPwValue}
</input>
        <button
          className="logBtn"
          onClick={this.goToMain}  // 메인이로 이동
          style={{ backgroundColor: this.state.btnColor }}  // 버튼색Change

          로그인
        </button>
      </section>
      <footer>
        <a className="LoginPwSearch" href="/">
          비밀번호를 잊으셨나요?
        </a>
      </footer>
    </>
  );
}
}
export default Login;

2. 메인페이지 구현

1. state설정

   import "./Main.scss";
   import React, { Component } from "react";
   import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
   import { faBookmark, faEllipsisV } from "@fortawesome/free-solid-svg-icons";

class Main extends Component {
constructor() {
super();
this.state = {
commentList: [],
comments : ""
};
}

• input value를 comments state에 저장

  getComment = (e) => {
  this.setState({ comments: e.target.value });
  };

• 엔터나 버튼을 누리면 comments를 commentList에다 넣는다. (객체형태로 집어넣기)

  addComment = (e) => {
  e.preventDefault();
  const { commentList, comments} = this.state;
  this.setState({
  commentList:[
  ...commentList,
  {
  id: commentList.length+1,
  comments : comments,
  isLike: false
  }
  ] , comments: "" });
  };

• x버튼 누르면 댓글 삭제하기.

  onRemove = (id) => {
  this.setState({
  commentList :
  this.state.commentList.filter
  ((comment)=> comment.id !== id)
  })
  };

render() {

 return (
  <>
    <header className="navHeader">
      <nav className="nav_bar">
        <div className="nav_container">
          <div className="nav_left">
            <div className="nav_icon">
              <img
                src="../images/younggwang/logo.png"
                alt="main_logo"
                className="nav_logo"
              />
            </div>
            <div className="nav_titile">Westagram</div>
          </div>
          <div className="nav_center">
            <img src="../images/younggwang/search.png" alt="search" id="search" />
            <input type="text" placeholder="검색" className="search_bar" />
          </div>
          <div className="nav_right">
            <div className="nav_right_imgs">
              <img
                src="../images/younggwang/explore.png"
                alt="explore"
                className="nav_right_img"
              />
              <img
                src="../images/younggwang/heart.png"
                alt="like"
                className="nav_right_img"
              />
              <img
                src="../images/younggwang/profile.png"
                alt="myprofile"
                className="nav_right_img"
              />
            </div>
          </div>
        </div>
      </nav>
    </header>
    <main>
      <div className="main_left">
        <div className="story_container">
          <div className="story">
            <div className="story_picture">
              <img
                src="../images/younggwang/pangsu.jpg"
                alt="story-img"
                className="story_img"
              />
            </div>
            <div className="story_name">pengsoo</div>
          </div>
          <div className="story">
            <div className="story_picture">
              <img
                src="../images/younggwang/pangsu.jpg"
                alt="story-img"
                className="story_img"
              />
            </div>
            <div className="story_name">pengsoo</div>
          </div>
        </div>
        <article>
          <div className="header_container">
            <div className="feed_header">
              <div className="header_left">
                <div className="feed_header_imgs">
                  <img
                    src="../images/younggwang/face.jpeg"
                    alt="my-img"
                    className="feed_header_img"
                  />
                </div>
                <p className="feed_header_name">pengsoo</p>
              </div>
              <div className="header_right">
                <div className="addIcon">
                  <FontAwesomeIcon className="far" icon={faEllipsisV} />
                </div>
              </div>
            </div>
          </div>
          <div className="feed_fictures">
            <img
              src="../images/younggwang/pang.jpeg"
              alt="feed-ficture"
              className="feed_ficture"
            />
          </div>
          <div className="feed_icons">
            <div className="feed_ions_left">
              <div>
                <img src="../images/younggwang/heart.png" alt="likeBtn" className="like" />
              </div>
              <div>
                <img
                  src="../images/younggwang/speechbubble.png"
                  alt="comment-btn"
                  className="content"
                />
              </div>
              <div>
                <img
                  src="../images/younggwang/direct.png"
                  alt="direct-btn"
                  className="comment"
                />
              </div>
            </div>
            <div className="feed_icons_right">
              <FontAwesomeIcon className="far" icon={faBookmark} />
            </div>
          </div>
          <dlv className="likeNum">
            <button className="likeNum_btn">좋아요 111,111개</button>
          </dlv>
          <div className="feed_comments">
            <ul className="feed_contents">
            
              {this.state.commentList.map((el) => {
                return(
                <li>
                  {el.comments}
                  <span onClick={()=>this.onRemove(el.id)}>x</span>
                </li>
                )})}
            </ul>
          </div>
          <div className="add_comment">
            <form className="add-form" onSubmit={this.addComment}>
              <input
                type="text"
                placeholder="댓글 달기..."
                className="add_input"
                onChange={this.getComment}
                value={this.state.comments}
              />
              <div className="add-btn">
                <button className="add">게시</button>
              </div>
            </form>
          </div>
        </article>
      </div>
      <div className="main_right">
        <div className="main_right_avator_container">
          <div className="main_right_avator_imgs">
            <img
              src="../images/younggwang/face.jpeg"
              alt="face-img"
              className="avator_img"
            />
          </div>
          <div className="avator_info">
            <div className="main_right_avator_ids">yongjl11</div>
            <div className="main_right_avator_names">펭수</div>
          </div>
        </div>
      </div>
    </main>
  </>
);

}
}
export default Main;