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: AppBar 컴포넌트 #32

Merged
merged 4 commits into from
Jan 20, 2025
Merged

feat: AppBar 컴포넌트 #32

merged 4 commits into from
Jan 20, 2025

Conversation

DongjaJ
Copy link
Collaborator

@DongjaJ DongjaJ commented Jan 20, 2025

이슈 번호

  • close #이슈_번호

작업한 목록을 작성해 주세요

  • 헤더역할을 하는 AppBar 컴포넌트를 추가했습니다

스크린샷

pr 포인트나 궁금한 점을 작성해 주세요

  • 헤더 및 바텀 네비게이션의 max-Width값에 대해 디자이너님께 의견 여쭤봤는데 440px로 해달라는 답변을 받았습니다.
  • left, right, children을 모두 외부에서 입력받는게 낫다고 생각해서 뚫어 놓고 레이아웃만 설정했습니다.
  • default인 상황에는 로고를 고정으로 넣을까도 생각을 해봤는데 내 약통 페이지를 보고 외부에서 주입받도록 했습니다.

연관된 issue: #6

@DongjaJ DongjaJ requested a review from ptq124 as a code owner January 20, 2025 08:26
@DongjaJ DongjaJ linked an issue Jan 20, 2025 that may be closed by this pull request
1 task
@github-actions github-actions bot added the feat label Jan 20, 2025
Copy link

Copy link
Collaborator

@ptq124 ptq124 left a comment

Choose a reason for hiding this comment

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

수고하셨습니다.

Comment on lines +15 to +19
<div {...restProps} className={cx(styles.appBar({ variant }), className)}>
{left && <AppBarElement direction="left">{left}</AppBarElement>}
{children}
{right && <AppBarElement direction="right">{right}</AppBarElement>}
</div>
Copy link
Collaborator

Choose a reason for hiding this comment

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

left center right 별로 다 달라서 외부에서 주입하는 거 잘하신거 같아요. AppBarElement를 통해 재사용성을 높인 부분도 좋네요👍

Comment on lines +5 to +19
base: {
position: 'relative',
height: 44,
display: 'flex',
alignItems: 'center',
maxWidth: 440,
},
variants: {
variant: {
default: [
typography('title_1_22_b'),
{
padding: '0 10px 0 20px',
},
],
Copy link
Collaborator

Choose a reason for hiding this comment

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

리뷰 보고 css 코드 보니까 px을 안붙여도 가능하네요. 동환님 방식이 더 편한거 같습니다.
padding: '0 10px 0 20px', padding 부분은 px을 붙여야지 작동하나요?

@DongjaJ DongjaJ merged commit ea2cec2 into main Jan 20, 2025
8 checks passed
@DongjaJ DongjaJ deleted the feat-6 branch January 20, 2025 15:13
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

feat: appbar 컴포넌트
2 participants