[FE] feat: 프론트엔드 home 기능 구현

[d0422]

PR 설명

프론트엔드 home 기능 구현

✅ 완료한 기능 명세

• 홈화면 UI구현
• 방 생성 구현
• 홈화면 -> room 으로 넘어가는 로직 구현
• 방 코드 입력부분에 입력하기 전까지 disable처리
• 홈화면 UI반응형 어느정도 대응
• home 컴포넌트 기능 테스트

📸 스크린샷

기본 접속시

방번호 입력시

방생성 버튼 클릭시

고민과 해결과정

useInput

input로직이 나중에도 필요할 수 있을 텐데 해당 로직에 필요한 훅을 모아서 useInput으로 만들어 주었다.

import { useState } from 'react';

export default function useInput(initialValue: string) {
  const [value, setValue] = useState(initialValue);

  const onChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    if (event.target) setValue(event.target.value);
  };

  return { inputValue: value, onChange };
}

uuid

방을 어떻게 만들어 줄까하다가 uuid 라이브러리를 사용해서 처리해주었다

[crongro]

tailwindcss 잘 활용해보세요~ 편리할듯.

[crongro]

타입정의가 길면 type이나 interface로 선언~

[d0422]

type ButtonProps = {
  children: ReactNode;
  onClick: () => void;
  fontSize: string;
};

선언해주었습니다!

[crongro]

해체할당문법으로 받기.

[d0422]

    const {
      target: { value },
    } = event;

요런 형태로 개선해보았습니다!

[HBSPS]

LGTM!