[FEAT] 로그인 페이지 구현

[eunwoo-levi]

🚩 연관 이슈

closed #20

📝 작업 내용

1. LoginPage.tsx 코드 구현

export default function LoginPage() {
  return (
    <DefaultLayout>
      <DefaultLayout.Header>
        <DefaultLayout.Header.Left>헤더</DefaultLayout.Header.Left>
        <DefaultLayout.Header.Center>의회식</DefaultLayout.Header.Center>
        <DefaultLayout.Header.Right>제목</DefaultLayout.Header.Right>
      </DefaultLayout.Header>
      <div className="flex flex-col h-screen items-center justify-center">
        <div className="pb-48">
          <h1 className="text-6xl font-semibold">Debate Timer</h1>
        </div>
        <section className="w-72 flex flex-col gap-8 text-lg font-semibold">
          <input
            id="nickname"
            placeholder="닉네임을 입력해주세요"
            className="text-center bg-slate-300 placeholder-black p-5 rounded-lg"
          />
          <LinkButton />
        </section>
      </div>
    </DefaultLayout>
  );
}

2. LinkButton 컴포넌트를 분리하여 클릭 이벤트에 handleClick 함수를 연결했습니다. 이를 통해 이전에 입력한 닉네임에 해당되는 페이지 생성테이블 페이지로 이동하도록 '/table' 경로로 라우팅되도록 구현했습니다.

import { useNavigate } from 'react-router-dom';

export default function LinkButton() {
  const navigate = useNavigate();

  const handleClick = () => {
    navigate('/table');
  };

  return (
    <button
      onClick={handleClick}
      className="bg-amber-300 p-5 rounded-lg hover:scale-105 transition-transform duration-200"
    >
      로그인
    </button>
  );
}

3. route.tsx에 '/table'로 이동하도록 경로를 추가하였습니다.

const router = createBrowserRouter([
  {
    path: '/',
    element: <TableSetup />,
  },
  {
    path: '/login',
    element: <LoginPage />,
  },
  {
    path: '/table',
    element: <TableListPage />,
  },
]);

export default router;

<리팩토링>
-LinkButton 컴포넌트 재활용성을 위해 url 과 title을 props로 넘겨주는 방식을 택함

export default function LinkButton({ url, title }: LinkButtonProps) {
  const navigate = useNavigate();

  const handleClick = () => {
    navigate(url);
  };

  return (
    <button
      onClick={handleClick}
      className="bg-amber-300 p-5 rounded-lg hover:scale-105 transition-transform duration-200"
    >
      {title}
    </button>
  );
}

          <LinkButton url="/table" title="로그인" />

🏞️ 스크린샷 (선택)

🗣️ 리뷰 요구사항 (선택)

• 이후 백엔드와 API 연동이 되면 nickname을 post요청을 통해 넘길 수 있도록 리팩토링 할 예정입니다.
• 현재는 필요한 기본적인 기능과 UI만 생성하였습니다.
• 스토리북을 통한 컴포넌트 테스트는 이후 추가할 예정입니다.
• 추가적인 피드백이 있으면 부탁드립니다.

[jaeml06]

빠르게 시간에 로그인 페이지를 구현해주셨네요!!
구현해주신 코드에 리뷰 남겼습니다.

[jaeml06]

prettier은 적용이 제대로 된 것 같은데 아직 eslint는 적용되지 않는 것 같아요! vscode상에서 esLint를 사용하기 위해서 확장프로그래밍이 필요로 합니다. https://velog.io/@2_hyeonju/Prettier-ESLint-%EC%99%84%EC%A0%84-%EC%A0%95%EB%B3%B5#eslint-%EC%82%AC%EC%9A%A9%EC%9D%84-%EC%9C%84%ED%95%9C-2%EA%B0%80%EC%A7%80-%EC%A4%80%EB%B9%84 설치해주시고 저장해주시면 자동으로 순서를 변경해줄겁니다!

[eunwoo-levi]

확인하여 적용하였습니다. 감사합니다.

[jaeml06]

중첩 컴포넌트에서 불필요하다고 생각하면 굳이 채울 필요는 없습니다. 그래서 굳이 전부 채울 필요 없이
DefaultLayout.Header.Left만을 사용해서 저의 프로젝트 이름 정도만 작성해도 좋을 것 같아요

[eunwoo-levi]

Figma와이어프레임를 확인하였을때 같은 navbar UI 사용한 것을 확인하여 일단 같게 두었습니다! 이후 필요 시 수정하겠습니다.

[jaeml06]

넵

[jaeml06]

input placeHolder색상을 검은 색이여서 실제로 채워져있는 문자열인지 아닌지 판단하기 어려운 것 같아요! 특히 아래 버튼이랑 디지인이 거의 같으니 그런 것 같아요!
그래서 현재 디자인의 경우

이렇다면 배경색상과 비슷하지만 더 진한 slate-500, 600정도로 하면 사용자가 판단하기 좋을 것 같아요

이미지는 slate-500을 적용한 이미지입니다.

[eunwoo-levi]

이 부분도 Figma에 같은 색상으로 되어 있어 일단 검정색으로 하긴 했지만, 다음부터 고려해서 디자인해야겠네요. 의견 감사합니다. 수정하여 커밋하였습니다.

[jaeml06]

넵 감사합니다.

[jaeml06]

LinkButton 컴포넌트로 로그인 버튼을 분리해주셨네요.
제 경우에는 컴포넌트를 분리하는 기준이 재사용을 높이기 위해서, UI 복잡성이 커서 분리가 필요하다는 판단이 되어서 등이 있습니다. LinkButton의 경우 컴포넌트 이름에 비해 table이라는 페이지로 이동하고 '로그인'이라는 텍스트 때문에 한정적이 기능을 한다고 생각이들어요 그래서 아예 파일명을 LoginButton이라고 변경하던가 아니면
디자인만을 재사용하고 싶다면
const navigate = useNavigate();를 상위에 선언하고 button의 요소를 props로 받아 디자인을 재사용할 수 있습니다.

import { ButtonHTMLAttributes } from 'react';

export default function LinkButton(
  props: ButtonHTMLAttributes<HTMLButtonElement>,
) {
  const { children, ...args } = props;
  return (
    <button
      {...args}
      className="rounded-lg bg-amber-300 p-5 transition-transform duration-200 hover:scale-105"
    >
      {children}
    </button>
  );
}

이 이외에도 linkButton을 재사용성이 높게 만들려면 url주소와 버튼 내부요소를 props로 받으면 더 유연하게 사용할 수 있을 것 같아요!

[eunwoo-levi]

/noti
피드백 반영하여 url과 title를 props로 넘겨주는 방식으로 하여 컴포넌트를 재사용성을 향상시켰습니다.
확인해주시면 감사하겠습니다!

[jaeml06]

넵 확인했습니다 감사합니다.

[i-meant-to-be]

제가 남기고자 했던 피드백(텍스트 필드와 버튼 간 구분이 모호한 부분)을 치코님이 먼저 적어주셔서 저는 승인 남기도록 하겠습니당

[jaeml06]

PR확인했습니다. 일단 button은 확인했습니다. 다만 나머지 리뷰에 대한 의견이 없으셔서 아직 반영이 되지 않는 것인지 아니면 다른 의견이 있는 것인지 파악하기 힘드네요...

[jaeml06]

넵 확인했습니다 감사합니다.

[eunwoo-levi]

@jaeml06

eslint 자동정렬 설정했습니다. 확인 부탁드립니다.