Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

페이지 상단 바(TopBar) 컴포넌트 구현 #186

Merged
merged 7 commits into from
May 16, 2024

Conversation

SungHyun627
Copy link
Collaborator

@SungHyun627 SungHyun627 commented May 13, 2024

💡 다음 이슈를 해결했어요.

  • 뒤로 가기 버튼 클릭 시, 이전 페이지로 이동하는 기능 구현

💡 이슈를 처리하면서 추가된 코드가 있어요.

🛠 뒤로 가기 버튼 클릭 시, 이전 페이지로 이동하는 기능 구현

react-router-dom의 navigate를 이용하여, 뒤로 가기 버튼을 통해 이전 페이지로 이동하도록 구현했습니다.

export interface TopBarProps {
  /** 왼쪽방향 아이콘과 제목 사이의 gap */
  gap?: number;

  /** Topbar Title content */
  children?: React.ReactNode;
}

export const TopBar = ({ gap = 12, children }: TopBarProps) => {
  const navigate = useNavigate();
  return (
    <TopbarWrapper gap={gap}>
      <MoveBack onClick={() => navigate(-1)}>
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
          ....
        </svg>
      </MoveBack>
      <TopBarContent>{children}</TopBarContent>
    </TopbarWrapper>
  );
};

🎬 이전 페이지로 이동

✔︎ TopBar 컴포넌트

image

💡 필요한 후속작업이 있어요.

  • 스토리북에서 children으로 컴포넌트를 전달하는 방안 고려

✅ 셀프 체크리스트

  • 브랜치 전략에 맞는 브랜치에 PR을 올리고 있습니다. (master/main이 아닙니다.)
  • 커밋 메세지를 컨벤션에 맞추었습니다.
  • 변경 후 코드는 컴파일러/브라우저 warning/error 가 발생시키지 않습니다.
  • 변경 후 코드는 기존의 테스트를 통과합니다.
  • 테스트 추가가 필요한지 검토해보았고, 필요한 경우 테스트를 추가했습니다.
  • docs 수정이 필요한지 검토해보았고, 필요한 경우 docs를 수정했습니다.

Sorry, something went wrong.

@SungHyun627 SungHyun627 marked this pull request as ready for review May 14, 2024 07:27
Copy link
Collaborator

@hyosin-Jang hyosin-Jang left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@SungHyun627
현님 코드가 정말 깔끔하고 직관적으로 작성되어 있네요! 코드들이 잘 정리되어 있어서 읽는 데 전혀 어려움이 없었습니다 👍

아래 링크에도 남겨놨는데 저희가 페이지마다 wrapper 요소의 이름을 다르게 짓고 있어서 혹시 통일해보는 건 어떨까요?
#193 (review)

@abiriadev
Copy link
Member

abiriadev commented May 14, 2024

필요한 기능을 잘 수행하는 컴포넌트를 만드신 것 같습니다! 특히 navigation을 잘 활용하신 것 같습니다. 👍

@SungHyun627 SungHyun627 merged commit ed1c18a into dev May 16, 2024
3 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants