METABOX 프로젝트 🚂 - 기억하고 싶은 코드

2차 프로젝트를 진행하면서 기억해놓고 싶은 코드들을 정리해보았다! 🙂

login, signup 모달

로그인과 회원가입의 양식을 살펴보면 같은 input스타일을 사용하는 것을 알 수 있다. input은 모두 같은 유효성 검사를 실시하고 유일하게 회원가입 부분만 email 중복 검사를 실시한다. 같은 input 틀(스타일)을 이용해 login과 signup 두 개의 객체 안에 input에 들어가는 각각의 data를 배열으로 넣었다.

⬇️ src/Nav/Nav.jsx

const INITIAL_INPUT = {
  name: '',
  birthday: '',
  email: '',
  emailOk: '',
  password: '',
  passwordOk: '',
};

function Nav() {
  const [showModal, setShowModal] = useState(false);
  const [isSignUp, setIsSignUp] = useState(false);
  const [loginInput, setLoginInput] = useState(INITIAL_INPUT);

  const LOGIN = {
    type: 'login',
    text: '로그인',
    data: [
      {
        type: 'email',
        name: 'email',
        value: loginInput.email,
        text: '이메일',
        holder: '이메일',
        data: '정확하지 않은 이메일 형식입니다.',
      },
      {
        type: 'password',
        name: 'password',
        value: loginInput.password,
        text: '비밀번호',
        holder: '비밀번호',
        data: '비밀번호는 영문,숫자,특수문자를 조합하여 8~12자로 구성하세요.',
      },
    ],
  };

  const SIGNUP = {
    type: 'signUp',
    text: '회원가입',
    data: [
      {
        type: 'name',
        name: 'name',
        value: loginInput.name,
        text: '이름',
        holder: '이름',
        data: '정확하지 않은 이름입니다.',
      },
      {
        type: 'birthday',
        name: 'birthday',
        value: loginInput.birthday,
        text: '생년월일 8자리 ex) 1990-05-05',
        holder: '생년월일',
        data: '정확하지 않은 생년월일입니다.',
      },
      {
        type: 'email',
        name: 'emailOk',
        value: loginInput.emailOk,
        text: '이메일',
        holder: '이메일',
        data: '정확하지 않은 이메일입니다.',
      },
      {
        type: 'password',
        name: 'password',
        value: loginInput.password,
        text: '비밀번호',
        holder: '비밀번호',
        data: '비밀번호는 영문,숫자,특수문자를 조합하여 8~12자로 구성하세요.',
      },
      {
        type: 'password',
        name: 'passwordOk',
        value: loginInput.passwordOk,
        text: '비밀번호 확인',
        holder: '비밀번호를 다시 한 번 입력해주세요',
        data: '비밀번호를 한 번 더 확인해주세요.',
      },
    ],
  };
  ...중략

state값으로 지정된 issignup 값이 false일 때는 SIGNUP format을, true일 때는 LOGIN format을 반환하여 모달을 보여주었다.

return (
    <>
      <Navigator>
        {showModal && (
          <Modal
            handleModal={handleModal}
            onClickWindow={onClickWindow}
            isSignUp={isSignUp}
            onClickSignUp={onClickSignUp}
            setValues={setValues}
            inputValue={loginInput}

// format 형식을 state값에 따라 다르게 넘겨주었다.
            format={isSignUp ? SIGNUP : LOGIN}
            onSign={onSign}
          />
        )}

---

유효성 검사

로그인/회원가입 부분을 맡으면서 가장 중요하다고 생각한 구현 사항이었다.
사실 이메일이나 비밀번호같은 유효성 검사는 백 쪽에서 진행하기 때문에 프론트에서는 굳이 필요없는 것이 사실이다. 그런데 UI/UX가 중요시 되는 요즘의 웹 사이트에서는 사용자의 입력과 동시에 해당 항목의 유효성 검사 결과(input밑의 빨간 글씨, 빨간 밑줄, 초록 체크 표시 등등)를 바로바로 시각화하여 보여주는 것이 당연시 되고 있다.

유효성 검사가 필요한 항목들의 검사 값을 정규표현식 형식의 상수 데이터로 만들었다. 검사를 실시하는 함수를 만든 후 input의 value값을 받아 함수를 돌린 후 true나 false 로 반환하여 input밑의 (빨간색의) guide text를 보여주었다.

⬇️ src/Modal/Inputs.jsx

//이메일 정규표현식
const emailValid = /^[a-zA-Z\d+-.]+@[a-zA-Z\d+-.]+\.[a-zA-Z]{2,3}$/;
//비밀번호 정규표현식
const pwValid =
  /^(?=.*[A-Za-z])(?=.*\d)(?=.*[$@$!%*#?&])[A-Za-z\d$@$!%*#?&]{8,}$/;
//생년월일 정규표현식
const birthValid =
  /^(19[0-9][0-9]|20\d{2})-(0[0-9]|1[0-2])-(0[1-9]|[1-2][0-9]|3[0-1])$/;

//유효성 검사 함수
function Inputs({ format, setValues, inputValue, onSign }) {
  const isValidInput = item => {
    const { email, emailOk, password, passwordOk, name, birthday } = inputValue;
    const INPUT_VALIDATION_MAP = {
      name: name === '' || (name && name.length > 1),
      birthday: birthday === '' || (birthday && birthValid.test(birthday)),
      email: email === '' || (email && emailValid.test(email)),
      emailOk: emailOk === '' || (emailOk && emailValid.test(emailOk)),
      password: password === '' || (password && pwValid.test(password)),
      passwordOk: passwordOk === '' || (passwordOk && passwordOk === password),
    };

    return INPUT_VALIDATION_MAP[item];
  };

  return (
    <InputAll>
      {format.data.map(input => {
        return (
          <AllInput key={input.id}>
            <Label>{input.text}</Label>
            <InputOver>
              <Input
                onChange={e => setValues(e, input)}
                name={input.name}
                type={input.type}
                placeholder={input.holder}
                value={
                  input.name === 'birthday'
                    ? input.value.replace(/(\d{4})(\d{2})(\d{1})/g, '$1-$2-$3')
                    : input.value
                }
              />
              {input.name === 'emailOk' && (
                <OverlapOk isValidInput={isValidInput}>중복 확인</OverlapOk>
              )}
            </InputOver>
            <GuideText
              name={input.name}
              input={input}
//false를 반환하면 guide text가 나타난다.
              isValidInput={isValidInput}
            />
          </AllInput>
        );
      })}
      <AuthBtn onClick={() => onSign(format)}>{format.text}</AuthBtn>
    </InputAll>
  );
}

생년월일에 하이픈(-) 넣기

로그인/회원가입 부분을 담당하는 백엔드 팀원이 원래 진행했던 생년월일 데이터 방식(900101)에서 년,월,일 사이에 하이픈을 넣은 방식(90-01-01)으로 변경해달라는 요청을 했다.

            <Input
                value={
                  input.name === 'birthday'
                    ? input.value.replace(/(\d{4})(\d{2})(\d{1})/g, '$1-$2-$3')
                    : input.value
                }
              />

해당 input이 name ==='birthday'일 때 정규표현식을 통해 하이픈을 추가했다!

---

customFetch

customFetch 함수를 만들어 Nav.js에 있는 fetch 함수를 조금 더 간단하고 깔끔하게 짤 수 있었다.

⬇️ src/utils/api.js

import { GET_LOGIN } from '../config';

//커스텀패치 함수
export const customFetch = (endpoint, options = {}, { onSuccess } = {}) => {
  const opts = {
    method: 'POST',
    ...options,
  };

  return fetch(GET_LOGIN + endpoint, opts)
    .then(res => res.json())
    .then(res => onSuccess && onSuccess(res));
};

⬇️ src/Nav/Nav.js

  const requestSignIn = loginInput => {
    const { email, password } = loginInput;
    
    //커스텀패치 함수 호출
    customFetch(API.SIGNIN, {
      body: JSON.stringify(
        {
          email: email,
          password: password,
        },
        {
          onSuccess: res => {
            if (res.token) {
              localStorage.setItem('token', res.token);
            }
            if (res.MESSAGE === 'SUCCESS') {
              alert('METABOX에 오신 걸 환영합니다');
              handleModal();
            } else {
              alert('이메일과 비밀번호를 다시 한 번 확인해주세요');
            }
          },
        }
      ),
    });
  };

---

window 클릭시 모달창 닫기

⬇️ src/Nav/Nav.js

  const onClickWindow = e => {
    const clicked = e.target.closest('.modal');
    if (clicked) {
      return;
    }
    handleModal();
  };

여기서 closest는 자신부터 부모 요소 단위로 출발해 , 각 요소가 지정한 선택자에 만족할 때까지 탐색한다. ( 출처 - 공식문서 )

⬇️ src/Modal/Modal.js

function Modal({
  onClickWindow,
}) {
  return (
    <Container onClick={onClickWindow}>
      <ContainerBox className="modal">
        <Form />
      </ContainerBox>
    </Container>
  );
}

따로 이벤트 캡쳐링 버블링 지정을 안해줬음으로 버블링으로 진행이 되고

• 모달을 클릭했을 시 cliked에 <ContainerBox>의 className= "modal"이 들어감
• 모달 외 영역(window 부분) 클릭 시 cliked에 <Container>가 들어감

cliked가 존재하면 : return; ➡️ 모달 그대로
cliked null이면 : false ➡️ handleModal 함수 실행(모달 닫기)

---

추가 로직들👨‍💻

textarea 글자 수 제한

  const isCount = e => {
    const maxText = 50;
    const textVal = e.target.value;
    const textLen = textVal.length;
    setTextCount({ ...textCount, textLen });
    setCommentInput({ ...commentInput, comment: textVal });
    if (textLen > maxText) {
      alert('최대 50자 까지만 입력가능합니다.');
    }
  };

분(minute)으로 받은 시간 시간, 일로 바꿔주는 함수

  const timeToday = value => {
    const minuteTime = value;
    if (minuteTime < 1) return '방금전';
    if (minuteTime < 60) {
      return `${minuteTime}분 전`;
    }
    const hourTime = Math.floor(minuteTime / 60);
    if (hourTime < 24) {
      return `${hourTime}시간 전`;
    }
    const dayTime = Math.floor(minuteTime / 60 / 24);
    if (dayTime < 365) {
      return `${dayTime}일 전`;
    }
    return `${Math.floor(dayTime / 365)}년 전`;
  };

모달창을 띄웠을 때 외부 스크롤 제한

  useEffect(() => {
    document.body.style.cssText = `
      position: fixed;
      top: -${window.scrollY}px;
      overflow-y: hidden;
      width: 100%;`;
    return () => {
      const scrollY = document.body.style.top;
      document.body.style.cssText = '';
      window.scrollTo(0, parseInt(scrollY || '0', 10) * -1);
    };
  }, []);