[React] 회원가입창 Grid 맛보기

2023년 1월 4일 작성

 

통으로 만들었던 회원가입 화면을 컴포넌트 분리로 다시 만들고 있다. 작업하는 김에 회원가입 창을 이전과 다른 방식으로 만들어보기로 했다. 마켓컬리 사이트에 가보면 회원가입 창에서 아이디, 비밀번호, 비밀번호 확인 등은 span 태그 안에 label 태그로 구성되어 있고, input 창은 div 속에 있고, 버튼 창, 혹은 버튼이 없는 공간에도 div가 만들어져있다.

 

 

그래서 나도 마켓컬리의 방식대로 처음엔 구조를 짰었다.

 

[SignUp.js]
		<div className="signUpSection">
          <div className="nameSection">
            <label htmlFor="email">
              이메일<span className="star">*</span>
            </label>
          </div>
          <div className="inputSection">
            <input
              className="inputValue"
              name="email"
              type="email"
              defaultValue={email}
              placeholder="이메일을 입력해주세요"
            />
            <p className="error">{emailError}</p>
          </div>
          <div className="btnSection">
            <button className="comfirmRepetition">중복확인</button>
          </div>
        </div>
        
        버튼이 아닌 곳은
          <div className="btnSection">
            <div className="none" />
          </div>

 

그러다 보니 쓸데없이 버튼이 없는 곳에도 'none' 클래스네임을 가진 div를 줘야했다. div 세 가지를 만들어놓으니 CSS로 레이아웃을 잡는 것은 편했지만 CSS도 120줄 정도 되고, 같은 너비를 다른 클래스 네임에 몇 번씩 줘야했다. 그래서 이번에는 Grid로 만들어보기로 했다. 아쉽게도 한 줄의 형태를 잡는 거라서 Grid를 다양하게 활용하진 못했다.

 

[SignUpItem.js]

const SignUpItem = ({
  type,
  title,
  name,
  placeholder,
  handleUserInfo,
  onClickCheckEmail,
}) => {
  return (
    <div className="signUpItem">
      <div className="nameSection">
        <label className="inputTitle">
          {title}
          <span className="star">*</span>
        </label>
      </div>
      {title !== '생년월일' && (
        <input
          className="inputSection"
          type={type}
          name={name}
          placeholder={placeholder}
          onChange={handleUserInfo}
        />
      )}
      {title === '생년월일' && (
        <BirthdayInput handleUserInfo={handleUserInfo} />
      )}
      {title === '이메일' && (
        <button className="comfirmRepetition" onClick={onClickCheckEmail}>
          중복확인
        </button>
      )}
    </div>
  );
};

[SignUpItem.scss]

@import './../../../../styles/variables.scss';

.signUpItem {
  display: grid;
  grid-template-columns: 120px 333px 120px;
  grid-column-gap: 10px;
  width: 640px;
  padding: 10px 20px;

  .nameSection {
    padding-top: 20px;
  }

  .inputSection {
    height: 46px;
    padding: 10px;
    border: 1px solid $border-color;
    border-radius: 4px;
  }

  .comfirmRepetition {
    background-color: white;
    border: 1px solid $basic-color;
    border-radius: 4px;
    color: $basic-color;
    cursor: pointer;
  }
}

 

grid-template-columns로 제목, input, 버튼 또는 빈공간의 너비를 잡아준 덕에 확실히 쓸데없는 div 사용이 줄었다. 여태까지 grid의 사용법이 복잡해보여서 flex로만 구조를 잡아왔는데 grid를 사용한다면 좀더 다양한 형태의 레이아웃을 쉽게 잡을 수 있을 듯하다. 다음에 적용할 만한 곳이 있으면 또 grid를 사용해봐야겠다!