-
Notifications
You must be signed in to change notification settings - Fork 0
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
[FE] 공통 컴포넌트 구현 #31
[FE] 공통 컴포넌트 구현 #31
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
공통 컴포넌트 구현 수고하셨습니다.
const Header = styled(({ className }: { className?: string }) => { | ||
return ( | ||
<header className={className}> | ||
<h1 className="blind">헤더</h1> | ||
<a className="logo" href="/"> | ||
TODO LIST | ||
</a> | ||
<Buttons | ||
$Flexible="" | ||
$Type="Ghost" | ||
$ElementPattern="Icon Only" | ||
$States="Enable" | ||
icon="History" | ||
onClick={() => console.log("기록 열기")} | ||
/> | ||
</header> | ||
); | ||
})<{ theme: TTheme }>` |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
const function HaederComponent({ className }: { className?: string }) => {
return (
<header className={className}>
<h1 className="blind">헤더</h1>
<a className="logo" href="/">
TODO LIST
</a>
<Buttons
$Flexible=""
$Type="Ghost"
$ElementPattern="Icon Only"
$States="Enable"
icon="History"
onClick={() => console.log("기록 열기")}
/>
</header>
);
}
const Header = styled(HeaderComponent)`
`
이런 식이 가독성이 더 나아보입니다. 어떠신가요?
<h3 className={className}> | ||
<span className="text-aria"> | ||
<span className="title">{title}</span> | ||
<Badge $2DigitPlus={count > 99} digit={count} /> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
2DigitPlus는 Badge가 알아서 판단해도 괜찮을 것 같습니다.
[FE] 공통 컴포넌트 구현
의도
프로젝트에서 전반적으로 사용되는 공통 컴포넌트 개발
구체적으로 봐야하는 포인트, 세부적인 변경점
관련 이슈