fix: isSelected $ 추가

woowacourse-teams · Jul 25, 2024 · 135243d · 135243d
1 parent 72bee76
commit 135243d
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 6 deletions.
diff --git a/frontend/src/components/Tab/Tab.styled.ts b/frontend/src/components/Tab/Tab.styled.ts
@@ -27,10 +27,10 @@ export const CurrentContentContainer = styled.div`
   animation: ${fadeIn} 0.3s ease-out;
 `;
 
-export const TabContainer = styled.div<{ isSelected: boolean }>`
+export const TabContainer = styled.div<{ $isSelected: boolean }>`
   padding: 10px 20px;
   cursor: pointer;
-  background: ${({ isSelected }) => (isSelected ? 'var(--primary-700)' : 'var(--grey-700)')};
+  background: ${({ $isSelected }) => ($isSelected ? 'var(--primary-700)' : 'var(--grey-700)')};
   font-size: 1.5rem;
   color: white;
   border-radius: 1rem 1rem 0 0;
@@ -39,15 +39,15 @@ export const TabContainer = styled.div<{ isSelected: boolean }>`
     background 0.3s,
     box-shadow 0.3s;
 
-  ${({ isSelected }) =>
-    isSelected &&
+  ${({ $isSelected }) =>
+    $isSelected &&
     `
     box-shadow: 0 0.4rem 0.8rem rgba(0, 0, 0, 0.2);
     animation: tabSelected 0.3s ease-out;
   `}
 
   &:hover {
-    background: ${({ isSelected }) => (isSelected ? 'var(--primary-500)' : 'var(--grey-500)')};
+    background: ${({ $isSelected }) => ($isSelected ? 'var(--primary-500)' : 'var(--grey-500)')};
   }
 
   @keyframes tabSelected {

diff --git a/frontend/src/components/Tab/TabHeader.tsx b/frontend/src/components/Tab/TabHeader.tsx
@@ -9,7 +9,10 @@ interface TabProps extends PropsWithChildren {
 export default function TabHeader({ index, children }: TabProps) {
   const { selectedIndex, handleSelectedIndex } = useTabs();
   return (
-    <S.TabContainer isSelected={selectedIndex === index} onClick={() => handleSelectedIndex(index)}>
+    <S.TabContainer
+      $isSelected={selectedIndex === index}
+      onClick={() => handleSelectedIndex(index)}
+    >
       {children}
     </S.TabContainer>
   );