Merge pull request #11 from yourssu/feat/badge

fix: Badge 관련 story, type 이름 수정
yourssu · Oct 4, 2023 · 2384cac · 2384cac
2 parents b165f89 + 0680e79
commit 2384cac
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 5 deletions.
diff --git a/src/components/Badge/Badge.stories.tsx b/src/components/Badge/Badge.stories.tsx
@@ -18,15 +18,15 @@ const BadgeStory = ({ ...badgeProps }) => {
 };
 
 type Story = StoryObj<typeof Badge>;
-export const withIcon: Story = {
+export const WithIcon: Story = {
   args: {
     children: 'Badge',
     leftIcon: <IcGroundLine />,
   },
   render: BadgeStory,
 };
 
-export const withoutIcon: Story = {
+export const WithoutIcon: Story = {
   args: {
     children: 'Badge',
   },

diff --git a/src/components/Badge/Badge.style.ts b/src/components/Badge/Badge.style.ts
@@ -3,7 +3,7 @@ import { styled } from 'styled-components';
 import { SemanticColor } from '@/style';
 
 interface StyledBadgeProps {
-  backgroundColor: SemanticColor;
+  $backgroundColor: SemanticColor;
 }
 export const StyledBadge = styled.div<StyledBadgeProps>`
   display: flex;
@@ -13,7 +13,7 @@ export const StyledBadge = styled.div<StyledBadgeProps>`
   height: 24px;
   padding: 0 var(--padding);
   border-radius: 2px;
-  background-color: ${({ theme, backgroundColor }) => theme.color[backgroundColor]};
+  background-color: ${({ theme, $backgroundColor }) => theme.color[$backgroundColor]};
 
   ${({ theme }) => theme.typo.caption1};
 `;
diff --git a/src/components/Badge/Badge.tsx b/src/components/Badge/Badge.tsx
@@ -9,7 +9,7 @@ const Badge = ({ color = 'monoItemBG', children = 'Badge', leftIcon }: BadgeProp
       style={{
         padding: leftIcon ? '0 8px' : '0 12px',
       }}
-      backgroundColor={color}
+      $backgroundColor={color}
     >
       {leftIcon && (
         <IconContext.Provider