[위코드] TIL(Today I am learned) -24(위코드의 마지막 주말)

- 오늘의 해야할 것.

코딩....코딩...코딩....은 농담같지만 진실인것이고~! ༼ つ ◕_◕ ༽つ 

엊그제 해결했다고 생각한 것이 폭탄이 되어 돌아온 Login...엄청나게 많은 코드수정을 요구 받음....

어제 해결해야했으나 주말만 되면 몸이 아프네~(*￣ρ￣)

그래서 오늘 해결하고 있습니다.

 

오늘 이거 로그인 끝내고, 오늘마저 hotelpage에서 평점을 이미지로 등급을 리턴하는 방식을 구현하려고 노력중입니다.

내용은 간단하지만 실제로 구성하기가 어려워서 어찌해야할지....

 

import React, { useState, useEffect } from "react";
import styled from "styled-components";
import { withRouter } from "react-router-dom";
import Apiresource from "../../Config";


function EmailLogin(props, visible) {
    const [ userInfo, setName ] = useState({email:"", password:""});

    const inputValuedetector = (e) => {
        setName({...userInfo, [ e.target.name ] : e.target.value})
    };

    const submit = (userInfo) => {
        fetch(`${Apiresource}/account/sign-in`, {
            method: 'POST',
            body: JSON.stringify({
                email: userInfo.email,
                password: userInfo.password
            }),
        }) 
        .then(res => res.json())
        .then(res => {
            if (res.token) {
                localStorage.setItem("tripadvisor-token", res.token)
                alert("로그인을 환영합니다")
                props.history.push('/main')
            } else {
                alert('이메일과 비밀번호를 확인해주십시오')
            };
        })
    }

    const goSignup = () => {
        props.history.push('/Signup')
    }

    const returnSocialLogin = (e) => {
        props.history.push('/SocialLogin')
    }

    const returnMain = () => {
        props.history.push('/Main')
    }

    const word = '@';
    const isValidEmail = userInfo.email.length && !(userInfo.email.includes(word));

    return(
        <>
            <ModalOverlay visible={visible} />
            <ModalWrapper tabIndex="-1" visible={visible}>
              <ModalIner tabIndex="0">
                  <div className="modalOutline">
                      <LoginImageContainer>
                        <LoginImgtag src="https://static.tacdn.com/img2/brand_refresh/Tripadvisor_lockup_horizontal_registered.svg" />
                      </LoginImageContainer>
                      <SignInnput>
                          <div className="signupContainer">
                              <div className="welcome">환영합니다 - 로그인하세요!</div>
                              <label className="welcome label">이메일 주소</label>
                              <input onChange={inputValuedetector} 
                                  className="inputValue"
                                  type='text' 
                                  name="email" 
                                  placeholder="이메일" />
                              <label className="welcome label">패스워드</label>
                              <input onChange={inputValuedetector} 
                                  className="inputValue" 
                                  type='password' 
                                  name="password" 
                                  placeholder="비밀번호" />
                              <div onClick={ () => submit(userInfo)} className="logIntitle" type="buttton">
                                로그인
                              </div>
                              <div className="passWordFindertitle">
                                <span className="passwordfinder">
                                  패스워드 찾기
                                </span>
                              </div>
                              <div className="passWordFindertitle">
                                계정이 없으신가요?
                                <span onClick={goSignup} className="passwordfinder">
                                  가입하기
                                </span>
                              </div>
                              <div className="passWordFindertitle">
                                대신 카카오톡이나 Google을 사용하고 싶으세요?
                                <span onClick={returnSocialLogin} className="passwordfinder">
                                  돌아가기
                                </span>
                              </div>
                          </div>
                          <ContiNue>계속 진행할 경우, 트립어드바이저의
                            <span className="textDeco">개인정보 취급방침</span>
                              및
                            <span className="textDeco Cookie">쿠키 정책</span>
                              에 동의한 것으로 간주됩니다. 
                          </ContiNue>
                      </SignInnput>
                      <div className={ isValidEmail 
                                       ? 'inputError' 
                                       : 'noneinputError'
                                     } >
                                       이메일 주소로써 유효하지 않거나 저희쪽에서 메일을 발송할 수 없는 문자열을 포함하고있습니다.
                      </div>
                  </div>
                  <button onClick={returnMain} className="returnmain" tabIndex="0">
                    X
                  </button>
              </ModalIner>
          </ModalWrapper>
        </>
    );
}

const ModalOverlay = styled.div`
    box-sizing: border-box;
    display: ${(props) => (props.visible ? 'block' : 'none')};
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 999;
`;

const ModalWrapper = styled.div`
    box-sizing: border-box;
    display: ${(props) => (props.visible ? 'block' : 'none')};
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1000;
    overflow: auto;
    outline: 0;
    display: flex;
    justify-content: center;
    align-items: center;
`;

const ModalIner = styled.div`
    width: 420px;
    height: 666px;
    padding: 40px 45px 30px;
    box-sizing: border-box;
    position: relative;
    box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.5);
    background-color: white;


    .modalOutline {
        width: 100%;

        .inputError {
            position: absolute;
            display: block;
            color: red;
            background-color: white;
            font-family:굴림, gulim, sans-serif;
            font-size: 12px;
            border: 1px solid #e0e0e0;
            box-shadow: 0 2px 12px rgba(0,0,0,.35);
            padding: 18px;
            line-height: 16px;
            width: 316px;
            height: 68px;
            z-index: 5;
            left: 51px;
            right: auto;
            top: 113px;
            bottom: auto;;
        }

        .noneinputError {
            display: none;
            color: white;
        }
    }

    .returnmain {
        position: absolute;
        z-index: 1;
        top: 0;
        right: 0;
        text-align: center;
        width: 48px;
        height: 48px;
        font-size: 25px;
        cursor: pointer;
    }
`;

const LoginImageContainer = styled.div`
    width:328px;
`;

const LoginImgtag = styled.img`
    width: 210px;
    height: 32px;
    margin-right: 20px;
`;

const SignInnput = styled.div`
    .signupContainer {
        width: 328px;
        height: 440px;
        display: flex;
        flex-direction: column;

        .welcome {
            color : black;
            font-size: 16px;
            font-family: '굴림, gulim, sans-serif';
            margin: 36px 0 25px;
        }

        .label {
            font-size: 14px;
            font-weight: 600;
            line-height: 18px;
            text-align: left;
            margin: 0;
        }

        .inputValue {
            background-color: white;
            height: 48px;
            margin: 8px 0 16px;
            padding : 4px 4px 4px 8px;
            border: 2px solid #e0e0e0;
            border-radius: 12px;
        }

        .logIntitle {
            color : white;
            background: black;
            width: 100%;
            height: 48px;
            font-size: 14px;
            font-weight: 700;
            margin: 20px 0;
            padding: 14px 16px 8px;
            border-radius: 12px;
            border: 1px solid transparent;
            line-height: 18px;
            text-align : center;

            &:hover {
                  background: #525252;
                }
        }

        .passWordFindertitle {
            margin-bottom: 12px;
            
            .passwordfinder {
                font-size: 12px;
                font-family: '굴림, gulim, sans-serif';
                font-weight: 600;
                color: black;
                line-height: 16px;
                margin-left: 5px;

                &:hover{
                    text-decoration: underline;
                }
            }
        }
    }
`;

const ContiNue = styled.div`
    width: 328px;
    height: 32px;
    font-size: 12px;
    font-family: '굴림, gulim, sans-serif'; 

    .textDeco {
        text-decoration: underline;
        color: black;
        text-decoration-style: solid;
        font-weight: 600;
        line-height: 16px;
        margin: 0 5px;
    }

    .Cookie {
        margin: 0 0 0 5px;
    }
`;

export default withRouter(EmailLogin);

수정 내용*

hover시에 해당 내용만 추가하는 것을 모르고 이전에는 따로

className에다가 따로 한번 더 작성하여 textdeco:hover로 작성하였으나 그냥 그 안에 호버를 작성하는 것을 알고 진행하였다.

다른 중복되는 클래스의 속성들을 뛰어쓰기로 동시적용하여 처리하였는데,

    const inputValuedetector = (e) => {
        setName({...userInfo, [ e.target.name ] : e.target.value})
    };

 

비구조할당에서

    const inputValuedetector = (e) => {
    	const { e.target } = e.target;
        setName({...userInfo, [ e.target.name ] : e.target.value})
    };

구조분해할당을 위해 변수를 선언하면 에러가 나온다. 왜일까???

아무튼 이러한 에러로 인해서 해당 비구조할당을 진행하지 못 하였음.

const submit = () => {
        const {email, password, name } = userInfo
        fetch(`${Apiresource}/account/sign-up`, {
            method: 'POST',
            body: JSON.stringify({ email, password, name })
        })
        .then(res => res.json)
        .then(res => {
            if (res) {
                alert("회원가입을 환영합니다")
                props.history.push('/main')
            } else {
                alert('이메일과 비밀번호를 확인해주십시오')
            };
        })
    }

하지만 단축할당은 진행하였다.

변경된 부분은

const {email, password, name } = userInfo
        fetch(`${Apiresource}/account/sign-up`, {
            method: 'POST',
            body: JSON.stringify({ email, password, name })
        })

요 부분이다.

 

body: json.stringfy({
		email: userInfo.email
        password: userInfo.password
        name: unserInfo.Name
})

으로 작성하였으나 멘토님의 단축할당을 적용하라는 지시로 이부분을 위의 내용처럼 수정하였다.

 

해당 조언들을 받고 수정한 리팩토링 내용

import React, { useState, useEffect } from "react";
import styled from "styled-components";
import { withRouter } from "react-router-dom";
import Apiresource from "../../Config";


function EmailLogin(props, visible) {
    const [ userInfo, setName ] = useState({email:"", password:""});

    const inputValuedetector = (e) => {
        setName({...userInfo, [ e.target.name ] : e.target.value})
    };

    const submit = () => {
        const { email, password } = userInfo
        fetch(`${Apiresource}/account/sign-in`, {
            method: 'POST',
            body: JSON.stringify({ email, password })

        }) 
        .then(res => res.json())
        .then(res => {
            if (res.token) {
                localStorage.setItem("tripadvisor-token", res.token)
                alert("로그인을 환영합니다")
                props.history.push('/main')
            } else {
                alert('이메일과 비밀번호를 확인해주십시오')
            };
        })
    }

    const goSignup = () => {
        props.history.push('/Signup')
    }

    const returnSocialLogin = (e) => {
        props.history.push('/SocialLogin')
    }

    const returnMain = () => {
        props.history.push('/Main')
    }

    const word = '@';
    const isValidEmail = userInfo.email.length && !(userInfo.email.includes(word));

    return(
        <>
            <ModalOverlay visible={visible} />
            <ModalWrapper tabIndex="-1" visible={visible}>
              <ModalIner tabIndex="0">
                  <div className="modalOutline">
                      <LoginImageContainer>
                        <LoginImgtag src="https://static.tacdn.com/img2/brand_refresh/Tripadvisor_lockup_horizontal_registered.svg" />
                      </LoginImageContainer>
                      <SignInput>
                          <div className="signupContainer">
                              <div className="welcome">환영합니다 - 로그인하세요!</div>
                              <label className="welcome label">이메일 주소</label>
                              <input onChange={inputValuedetector} 
                                  className="inputValue"
                                  type='text' 
                                  name="email" 
                                  placeholder="이메일" />
                              <label className="welcome label">패스워드</label>
                              <input onChange={inputValuedetector} 
                                  className="inputValue" 
                                  type='password' 
                                  name="password" 
                                  placeholder="비밀번호" />
                              <div onClick={submit} className="inputValue logIntitle" type="buttton">
                                로그인
                              </div>
                              <div className="passWordFindertitle">
                                <span className="passwordfinder">
                                  패스워드 찾기
                                </span>
                              </div>
                              <div className="passWordFindertitle">
                                계정이 없으신가요?
                                <span onClick={goSignup} className="passwordfinder">
                                  가입하기
                                </span>
                              </div>
                              <div className="passWordFindertitle">
                                대신 카카오톡이나 Google을 사용하고 싶으세요?
                                <span onClick={returnSocialLogin} className="passwordfinder">
                                  돌아가기
                                </span>
                              </div>
                          </div>
                          <ContiNue>계속 진행할 경우, 트립어드바이저의
                            <span className="textDeco">개인정보 취급방침</span>
                              및
                            <span className="textDeco Cookie">쿠키 정책</span>
                              에 동의한 것으로 간주됩니다. 
                          </ContiNue>
                      </SignInput>
                      <div className={ isValidEmail 
                                       ? 'inputError' 
                                       : 'noneinputError'
                                     } >
                                       이메일 주소로써 유효하지 않거나 저희쪽에서 메일을 발송할 수 없는 문자열을 포함하고있습니다.
                      </div>
                  </div>
                  <button onClick={returnMain} className="returnmain" tabIndex="0">
                    X
                  </button>
              </ModalIner>
          </ModalWrapper>
        </>
    );
}

const ModalOverlay = styled.div`
    box-sizing: border-box;
    display: ${(props) => (props.visible ? 'block' : 'none')};
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 999;
`;

const ModalWrapper = styled.div`
    box-sizing: border-box;
    display: ${(props) => (props.visible ? 'block' : 'none')};
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1000;
    overflow: auto;
    outline: 0;
    display: flex;
    justify-content: center;
    align-items: center;
`;

const ModalIner = styled.div`
    width: 420px;
    height: 666px;
    padding: 40px 45px 30px;
    box-sizing: border-box;
    position: relative;
    box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.5);
    background-color: white;


    .modalOutline {
        width: 100%;

        .inputError {
            position: absolute;
            display: block;
            color: red;
            background-color: white;
            font-family:굴림, gulim, sans-serif;
            font-size: 12px;
            border: 1px solid #e0e0e0;
            box-shadow: 0 2px 12px rgba(0,0,0,.35);
            padding: 18px;
            line-height: 16px;
            width: 316px;
            height: 68px;
            z-index: 5;
            left: 51px;
            right: auto;
            top: 113px;
            bottom: auto;;
        }

        .noneinputError {
            display: none;
            color: white;
        }
    }

    .returnmain {
        position: absolute;
        z-index: 1;
        top: 0;
        right: 0;
        text-align: center;
        width: 48px;
        height: 48px;
        font-size: 25px;
        cursor: pointer;
    }
`;

const LoginImageContainer = styled.div`
    width:328px;
`;

const LoginImgtag = styled.img`
    width: 210px;
    height: 32px;
    margin-right: 20px;
`;

const SignInput = styled.div`
    .signupContainer {
        width: 328px;
        height: 440px;
        display: flex;
        flex-direction: column;

        .welcome {
            color : black;
            font-size: 16px;
            font-family: '굴림, gulim, sans-serif';
            margin: 36px 0 25px;
        }

        .label {
            font-size: 14px;
            font-weight: 600;
            line-height: 18px;
            text-align: left;
            margin: 0;
        }

        .inputValue {
            background-color: white;
            height: 48px;
            margin: 8px 0 16px;
            padding : 4px 4px 4px 8px;
            border: 2px solid #e0e0e0;
            border-radius: 12px;
        }

        .logIntitle {
            color : white;
            background: black;
            width: 100%;
            font-size: 14px;
            font-weight: 700;
            margin: 20px 0;
            padding: 14px 16px 8px;
            border: 1px solid transparent;
            line-height: 18px;
            text-align : center;

            &:hover {
                  background: #525252;
                }
        }

        .passWordFindertitle {
            margin-bottom: 12px;
            
            .passwordfinder {
                font-size: 12px;
                font-family: '굴림, gulim, sans-serif';
                font-weight: 600;
                color: black;
                line-height: 16px;
                margin-left: 5px;

                &:hover{
                    text-decoration: underline;
                }
            }
        }
    }
`;


const ContiNue = styled.div`
    width: 328px;
    height: 32px;
    font-size: 12px;
    font-family: '굴림, gulim, sans-serif'; 

    .textDeco {
        text-decoration: underline;
        color: black;
        text-decoration-style: solid;
        font-weight: 600;
        line-height: 16px;
        margin: 0 5px;
    }

    .Cookie {
        margin: 0 0 0 5px;
    }
`;

export default withRouter(EmailLogin);

 

이렇게 잘 진행하다가 발생한 문제...

 

$ git rebase -i master
fatal: It seems that there is already a rebase-merge directory, and
I wonder if you are in the middle of another rebase.  If that is the
case, please try
        git rebase (--continue | --abort | --skip)
If that is not the case, please
        rm -fr ".git/rebase-merge"
and run me again.  I am stopping in case you still have something
valuable there.

뭔가 중대한 오류가 있다는데, 뭔지 모르겠다;;;

 

내꺼만 날라가면 상관없는데, 남의꺼까지 날라갈까봐;;;

일단 여기까지 수정하였고, hotelpage를 마저 작성하자.
멘토님한테 해당 내용을 질의하였으니 답변올라오면 그때 마저 진행하도록 해야겠다.