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

[FEAT] 페이지 버튼 공통 컴포넌트 구현 #36

Merged
merged 6 commits into from
Jan 13, 2025

Conversation

Taew00k
Copy link
Collaborator

@Taew00k Taew00k commented Jan 13, 2025

🛰️ 관련 이슈

해결한 이슈 번호를 작성해주세요
close #34

🧑‍💻 작업 내용

작업한 내용을 간략히 작성해주세요

  • 페이지 버튼 컴포넌트 현재 페이지/ 그 외 경우로 나누어 구현했습니다
  • 받아야 하는 props: input(int), 현재 페이지(int)
    • 현재 페이지인 경우
      • 배경색이 변경
    • 아닌 경우
      • 그냥 숫자

🗯️ PR 포인트

리뷰어가 특별히 봐주었으면 하는 부분이 있다면 작성해주세요

  • 삼항 연산자로 style이 다르게 적용되도록 했습니다
  • css에서 공통부분은 따로 분리하여 적용했습니다

🚀 알게된 점

기록하며 개발하기!

📖 참고 자료 (선택)

참고했던 문서들 공유하기!

📸 스크린샷 (선택)

  • 현재 페이지인 경우
    image

  • 현재 페이지가 아닌 경우
    image

Copy link

github-actions bot commented Jan 13, 2025

🪷 Storybook 확인 🪷
🔗 https://677fa9af1269762b7858c29f-lwnvolwdqo.chromatic.com/

Copy link
Collaborator

@seong-hui seong-hui left a comment

Choose a reason for hiding this comment

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

숫자 공컴 잘 만들어주셔서 나중에 페이지네이션에 잘 사용할 수 있겠네요!! 짱짱

import pageBtnStyles from './pageBtn.css';

interface PageBtnProps {
pageNum: number;
Copy link
Collaborator

Choose a reason for hiding this comment

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

pageIndex 처럼 네이밍을 하면 더욱 이해하기 쉬울 것 같습니당!

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

넵 반영했습니다~@!

Copy link
Collaborator

@maylh maylh left a comment

Choose a reason for hiding this comment

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

수고하셨습니다 ~ 🤟🏿

}

const meta: Meta<typeof PageBtn> = {
title: 'Common/PageBtn', // 스토리북에서 표시될 경로
Copy link
Collaborator

Choose a reason for hiding this comment

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

주석은 지워주셔도 될 것 같고, 스토리북 경로도 Common/Button/PageBtn 으로 수정하면 좋을 것 같습니다 ~~~!!!

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

반영했습니다~!

Copy link
Collaborator

@bykbyk0401 bykbyk0401 left a comment

Choose a reason for hiding this comment

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

첫번째 공통컴포넌트!! 깔끔하게 잘 구현해주셔서 감사합니다
수고하셨습니다~

@@ -0,0 +1,23 @@
import theme from '@styles/theme.css';
import { styleVariants } from '@vanilla-extract/css';
Copy link
Collaborator

Choose a reason for hiding this comment

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

recipe말고 styleVariants로도 다양한 variants를 가진 스타일을 잘 적용해주신 것 같아요!
새로운 방법도 알게 되어서 좋네요 :)

덕분에 단일 스타일에 대해 정의하는 style과 styleVariants의 차이점에 대해서도 알아보았습니당

@Taew00k Taew00k merged commit 7af1b90 into develop Jan 13, 2025
5 checks passed
@Taew00k Taew00k deleted the feat/#34/page-button-component branch January 13, 2025 17:00
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.

[FEAT] 페이지 버튼 공통 컴포넌트
4 participants