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

[FE] 공통 컴포넌트 구현 #31

Merged
merged 4 commits into from
Jul 18, 2023
Merged

Conversation

saejinpark
Copy link

@saejinpark saejinpark commented Jul 18, 2023

[FE] 공통 컴포넌트 구현

의도

프로젝트에서 전반적으로 사용되는 공통 컴포넌트 개발

구체적으로 봐야하는 포인트, 세부적인 변경점

  • 공통 컴포넌트 개발(Buttons, card, Icon ...)
  • 리팩토링
  • 디렉토리 구조

관련 이슈

Copy link

@hjsong333 hjsong333 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 +5 to +22
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 }>`

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} />

Choose a reason for hiding this comment

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

2DigitPlus는 Badge가 알아서 판단해도 괜찮을 것 같습니다.

@hjsong333 hjsong333 merged commit 3052149 into frontend Jul 18, 2023
@hjsong333 hjsong333 deleted the fe/feature/common-component branch July 18, 2023 07:08
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.

2 participants