Develop/login page

[cla6shade]

🔥 연관 이슈

#12

🚀 작업 내용

• 재사용 가능한 input류 컴포넌트(button, checkbox, text input)를 만들었습니다. onChange listener 등 dom element에서 사용할 요소들을 props로 넘겨주면 일반 dom element처럼 사용이 가능합니다.

사용 예시:

<Checkbox checked={autologinChecked}
  onChange={() => setAutoLoginChecked(!autologinChecked)}
  label='로그인 상태 유지'
/>

• 로그인 페이지 껍데기 구현이 완료되었습니다. 다만 아직 redux 액션 디스패치나 auth request 등은 구현하지 못했고, PC화면에서의 사용은 고려하지 않은 채로 만들었습니다. 이 부분까지 구현이 완료된 후 merge되면 좋을 것 같습니다.
• utils/index.ts에 limitInputNumber(e, limit)를 추가했습니다. validity check 등 사용될 여지가 많은 메소드들을 이곳에 모아두면 좋을 것 같습니다.

/**
 * input에서 최대 입력가능 글자 수 제한
 * e.g. input에 onChange={e => { limitInputNumber(e, limit) } 추가
 *
 * @param {ChangeEvent<HTMLInputElement>} event
 * @param {int} limit
 */
export const limitInputNumber = (
  event: ChangeEvent<HTMLInputElement>, limit: number) => {
  const value = event.target.value;
  if (value.length > limit) {
    event.target.value = value.slice(0, limit);
  }
};

• 몇몇 컴포넌트의 위치가 변경되었습니다. 본래 @/components/ 하위에 있던 Home과 같은 페이지 컴포넌트가 @/pages/로 이동되었습니다. pages에 대한 alias도 @pages로 등록해놨으니 그대로 사용하시면 될 것 같습니다.
• figma에 정의된 몇가지 색상을 tailwind.config.js에 extends로 정의했습니다.

💬 리뷰 중점사항

• tailwind css를 사용하다 보니 어느샌가 클래스명으로 떡칠이 되어있는 컴포넌트를 발견하게 되었습니다. 사실 재사용성을 고려하여 컴포넌트를 잘 짜면 상관이 없겠지만, 저렇게 클래스명을 마구잡이로 적어놓으니 보기는 안 좋더라고요. 어떻게 정리하면 좋을까요? 의견 부탁드립니다! (사실 저대로 그냥 써도 저는 상관 없습니다. 이 부분은 기중님 의견에 따르겠습니다)
• PC 뷰포트에 대한 전략과 디자인이 어느정도는 필요한 시점이 된 것 같습니다. 따라서 저희가 고려할 수 있는 선택지는 크게 두 가지인 것 같습니다.

1. 최대 너비를 지정해서 특정 크기 이상으로 컴포넌트의 크기가 늘어나지 않도록 설정한 후, 모든 모바일 화면을 만들고, 그 후에 디자이너분들께 PC화면의 디자인 요청
2. 지금까지 디자인된 부분에 대한 PC화면 디자인 요청

어떤 것이 더 나을지 말씀해주시면 감사드리겠습니다. 혹은 더 좋은 의견이 있으시다면 코멘트 부탁드립니다.

감사합니다.