TR-6, Main Page 반응형 CSS, Login Page 작성

오늘 한 작업

Main Page의 전반적인 반응형 CSS를 다듬었다.

이제 모바일에서도 어느 정도 원활하게 페이지 뷰가 가능하다..

내일 Back-end와의 Login 통신 연결을 위해 Login Page를 작성 했다.

POST로 넘어가야 하는 body를 넘겨줄 수 있게

email, password 작성이 가능하게 페이지를 만들었고,

axios를 이용해 서버와 연결, test까지 완료 했다.

client에 certpem을 추가하고 package.json에서 start 명령을 수정해

로컬환경에서 https 연결이 가능하도록 했다.

어려웠던 부분

• 모바일 device에서 반응형을 적용시키는게 어려웠다.
• email 도메인을 option에서 선택할 수도, 직접 입력할 수도 있게 만들었는데,

email 도메인을 선택한 뒤 곧바로 다시 다른 도메인을 선택했을 때

state에 해당 도메인이 중첩으로 선택되는 것에서 함수 작성이 조금 헷갈렸다.

(직접 입력 기능이 없었다면 아주 손쉽게 해결할 문제였는데, 해당 기능과

약간의 충돌이 있어 생각이 꼬여버렸다)

• ‘직접 입력’을 했을 때 ‘X’를 누르면 다시 도메인 선택이 가능하게 만들어야 하는데, 구현은 했지만 CSS가 5px정도 밀린다. 왜 그런지 좀 더 생각해봐야 할 것 같다.

const handleSelect = (e) => {
  const atIndex = userInfo.email.indexOf("@");
  const justId = userInfo.email.slice(0, atIndex);
  console.log(justId);
  userInfo.email.includes("@")
    ? setUserInfo({
        ...userInfo,
        email: justId + "@" + e.target.value,
      })
    : setUserInfo({
        ...userInfo,
        email: userInfo.email + "@" + e.target.value,
      });
  console.log(userInfo);
  e.target.value === "직접 입력"
    ? setIsSelectSelf(true)
    : setIsSelectSelf(false);
  console.log(userInfo.email);
};

option에서 이메일 도메인을 선택 시 id와 @와 선택한 option의 value를 합쳐

state에 반영해주는 코드다.

만약 도메인을 선택한 상태에서 다시 도메인을 선택하면,

state의 email을 @뒤의 것을 모두 날린 id만 남겨둔 뒤 다시 option의 value를

합쳐주는 방식으로 중첩을 방지했다.

하지만 밑의 “직접 입력” 일 시의 기능은 좀 더 생각 해봐야 한다.

회원 가입 부분과 통일을 시켜 완전히 삭제 시킬 여지도 있다.