[18기 송나은] React-Westagram 로그인, 메인페이지 필수기능 구현 완료

[songbetter]

수정 사항 간략한 한줄 요약

• 초기세팅 | sass nesting 기능 적용. 메인 페이지 컴포넌트 분리생성.
• Login | 사용자 입력 데이터 저장 기능 구현
• Login | 로그인 버튼 활성화 기능 구현
• Login | 로그인 인증 (API 통신)
• Main | 댓글 기능 구현
• Main | 댓글 컴포넌트화 + props로 데이터 전달
• Main | 피드, 댓글, 추천영역 컴포넌트화 + 데이터 렌더링

수정 사항들 자세한 내용

• 초기세팅 | sass nesting 기능 적용. 메인 페이지 컴포넌트 분리생성.
  : 컴포넌트별로 scss 파일도 함께 분리. 메인 페이지 컴포넌트-Header, Feeds, MainRight로 분리
• Login | 사용자 입력 데이터 저장 기능 구현
  : Input창에 입력된 ID와 PW를 state에 저장하는 기능.
• Login | 로그인 버튼 활성화 기능 구현
  : ID에 '@' 포함, PW가 5자 이상일 때 버튼이 활성화 되는 기능.
• Login | 로그인 인증 (API 통신)
  : 인증 과정을 거쳐 인증된 사용자만 main 페이지로 이동할 수 있도록 함.
• Main | 댓글 기능 구현
  : 댓글창에 댓글 입력 후 엔터를 누르거나 게시 버튼을 클릭하면 댓글이 추가되는 기능.
• Main | 댓글 컴포넌트화 + props로 데이터 전달
  : JSX로 작성한 댓글 영역 컴포넌트화. 부모 컴포넌트에서 데이터 전달.
• Main | 피드, 댓글, 추천영역 컴포넌트화 + 데이터 렌더링
  : Feeds > Feed > Comment / MainRight > Recommend > RecommendInfo 컴포넌트 분리.
  : Mock Data 활용하여 UI 최소화

기타 질문 및 특이 사항

• Login할 때 받은 token을 localStorage에 저장해서 사용자 아이디를 계속 사용할 수 있도록 하고 싶어 아래 내용 주석으로 남겨놓았습니다.

// Login Page
 goToMain = (e) => {
    e.preventDefault();
    fetch("http://10.58.3.143:8000/user/signin",{
      method:"POST",
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        email: this.state.userId,
        password: this.state.userPassword
      })
    })
    .then(res => res.json())
    .then(result => result.message === "SUCCESS" ? 
    this.props.history.push('/main-naeunsong') && result.token && localStorage.setItem('wtw-token',result.token)
    : alert("아이디와 비밀번호를 확인해주세요"))

// Main Feed
componentDidMount(){
    fetch('http://10.58.3.143:8000/posting/upload',{
      method:"POST",
      headers: {
        'Authorization': localStorage.getItem('wtw.token')
           },
      body: JSON.stringify({
        image : '',
        content :''
    })
  })

체크 리스트

• 필요한 test들을 완료하였고 기능이 제대로 실행되는지 확인 하였습니다.
• Wecode의 코드 스타일 가이드에 맞추어 코드를 작성 하였습니다.
• 제가 의도한 파일들과 수정 사항들만 커밋이 된 것을 확인 하였습니다.
• 본 수정 사항들을 팀원들과 사전에 상의하였고 팀원들 모두 해당 PR에 대하여 알고 있습니다.

[bonbon0202]

나은님! 수고 많으셨습니다 :)
코드가 전체적으로 깔끔하네요!
리뷰 보시고 리팩토링해주세요!