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

[공통컴포넌트] Button 10가지 구현 #57

Merged
merged 22 commits into from
Jan 10, 2024

Conversation

hoeun0723
Copy link
Contributor

구현 사항

10가지 종류의 button 구현을 했습니다.

  • btn_login
  • btn_cta_fill
  • btn_cta_small/Stroke
  • btn_next
  • btn_Registration
  • btn_radio
  • btn_logout
  • btn_cta_medium
  • btn_change
  • subtitle

Need Review

  • 각 공통 컴포넌트 별로, disabled 해야하는 경우가 있고, onClick 함수를 넘겨주어서 클릭 이벤트를 설정해야하는 경우를 위해 옵셔널 파라미터로 props를 구현 하였습니다. 상황에 맞도록 사용하면 될 거 같습니다 !
  • 버튼 속 children 값들은 ReactNode로 type값을 하여 단일 태그가 아닌 컴포넌트 형식으로 받을 수 있도록 하였습니다.
    특별히 받아야 하는 값이 있는 컴포넌트의 경우는 옵셔널 적용을 하지 않았습니다. interface를 잘 확인하고 사용해주세요!
  • props를 interface로 정의하기로 했는데, ButtonProps는 type으로밖에 적용이 안되어 그렇게 작성했습니다. 해당 부분 확인해주세요!

@hoeun0723 hoeun0723 added feat💡 기능 구현 common 📦 공통 컴포넌트 labels Jan 9, 2024
@hoeun0723 hoeun0723 self-assigned this Jan 9, 2024
Copy link
Member

@imeureka imeureka left a comment

Choose a reason for hiding this comment

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

왕수고했어요! onClick: () => void; 에 대해서 찾아보고 있어요!
onClick 외에도 다양한 이벤트 핸들러 prop도 존재하고, 이를 잘 활용해보고 싶다는 생각이 들어서요! button 태그의 기본 props들을 확장하여 버튼 컴포넌트를 만들 수 있다면 좀 더 범용성이 넓은 컴포넌트를 만들 수 있을 것 같아요! 이 부분 더 공부해서 리뷰 남겨보도록 해볼게요!

import styled from 'styled-components';

export const Wrapper = styled.button`
${({ theme: { mixin } }) => mixin.inlineFlexBox({ align: 'center', justify: 'center' })}
Copy link
Member

Choose a reason for hiding this comment

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

mixin 사용 짱짱 저는 저번에 코드리뷰 봤을 때 베이직한 공통 틀이 아니면 불필요한 리소스를 들이는 것보다 나을 것 같다는 의견을 봐서 공유해드립니다! 지금은 우린 써도 좋은 거 같아요! 참고로 공유해봅니다!
스크린샷 2024-01-09 오후 6 38 05

Copy link
Contributor Author

Choose a reason for hiding this comment

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

해당 코드 리뷰는 아마 뒤늦게 정해진 부분에 대해서 불필요한 리소스가 든다고 했던게 아닌가 싶어요 !!! (또 다시 분류 해야하는 리소스를 의미하는 것이라고 생각되었습니다 !)
mixin 부분을 미리 의논해두었고, 반복 되어지는 간단한 부분들을 props로 조정할 수도 있도록 초반에 만들어 두었으니 저희는 지속해서 사용해도 될 거 같습니다 ;)

좋은 리프레쉬 감사해요 !!

Copy link
Contributor

Choose a reason for hiding this comment

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

저도 덕분에 mixin 사용 목적에 대해 다시 고민해보는 좋은 기회가 되었어요! 감사합니다~!

return (
<S.Wrapper disabled={disabled} onClick={onClick}>
{children}
<IcRight style={{ width: '24px', height: '24px' }} />
Copy link
Member

Choose a reason for hiding this comment

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

요거 rem으로 하면 더 좋을거같아용

Copy link
Contributor Author

Choose a reason for hiding this comment

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

세상에 빠르게 수정하도록 하겠습니다 !!!

Copy link
Member

@ExceptAnyone ExceptAnyone left a comment

Choose a reason for hiding this comment

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

고생하셨습니다. 저도 본받아서 얼렁 뷰 끝내볼게요!!

Copy link
Contributor

@urjimyu urjimyu left a comment

Choose a reason for hiding this comment

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

공통 양이 많은데 정말 고생 많으셨어요!!!🥺 감사히 쓰겠습니다~!!

@@ -2,7 +2,7 @@ import type { SVGProps } from 'react';
const SvgIcEdit2 = (props: SVGProps<SVGSVGElement>) => (
<svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' {...props}>
<path
stroke='#000'
stroke='currentColor'
Copy link
Contributor

Choose a reason for hiding this comment

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

트러블슈팅 공유 넘 감사했습니다!!

import styled from 'styled-components';

export const Wrapper = styled.button`
${({ theme: { mixin } }) => mixin.inlineFlexBox({ align: 'center', justify: 'center' })}
Copy link
Contributor

Choose a reason for hiding this comment

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

저도 덕분에 mixin 사용 목적에 대해 다시 고민해보는 좋은 기회가 되었어요! 감사합니다~!

type BtnChangeProps = ButtonHTMLAttributes<HTMLButtonElement> & {
disabled?: boolean;
children: React.ReactNode;
onClick?: () => void;
Copy link
Contributor

Choose a reason for hiding this comment

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

공통 섬세하게 만들어줘서 감사해요!!:)

Copy link

PR Preview Action v1.4.6
🚀 Deployed preview to https://SWEET-DEVELOPERS.github.io/sweet-client/pr-preview/pr-57/
on branch gh-pages at 2024-01-10 05:36 UTC

@hoeun0723
Copy link
Contributor Author

머지 하겠습니다 !! : )

@hoeun0723 hoeun0723 merged commit 1318607 into develop Jan 10, 2024
1 check passed
@hoeun0723 hoeun0723 deleted the feat/#38-button_component branch January 31, 2024 11:16
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
common 📦 공통 컴포넌트 feat💡 기능 구현
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[공통컴포넌트] Button 제작
4 participants