Feat: TeamNavigation에 props를 추가하다

Author: kikiyeom

src/components/common/TeamNavigationTabs/TeamNavigationTabs.component.tsx

@@ -4,7 +4,11 @@ import * as Styled from './TeamNavigationTabs.styled';
 
 const TEAMS = ['All', 'Design', 'Android', 'iOS', 'Web', 'Node', 'Spring'];
 
-const TeamNavigationTabs = () => {
+interface TeamNavigationTabsProps {
+  allAltText?: string;
+}
+
+const TeamNavigationTabs = ({ allAltText }: TeamNavigationTabsProps) => {
   const [searchParams, setSearchParams] = useSearchParams();
 
   const handleClickTab = (teamParam: string) => {
@@ -23,17 +27,18 @@ const TeamNavigationTabs = () => {
         const teamParam = team === 'All' ? '' : team.toUpperCase();
         const active =
           team === 'All' ? !searchParams.has('team') : searchParams.get('team') === teamParam;
-
+        const isAllAltText = team === 'All' && !!allAltText;
         return (
           <Styled.Tab
             key={index}
             role="link"
             aria-label={`${team} tab`}
             aria-current={active}
             active={active}
+            isAllAltText={isAllAltText}
             onClick={() => handleClickTab(teamParam)}
           >
-            {team}
+            {isAllAltText ? allAltText : team}
           </Styled.Tab>
         );
       })}

src/components/common/TeamNavigationTabs/TeamNavigationTabs.styled.ts

@@ -3,6 +3,7 @@ import styled from '@emotion/styled';
 
 interface StyledNavigationItemProps {
   active: boolean;
+  isAllAltText?: boolean;
 }
 
 export const Tabs = styled.nav`
@@ -15,13 +16,13 @@ export const Tabs = styled.nav`
 `;
 
 export const Tab = styled.button<StyledNavigationItemProps>`
-  ${({ theme, active }) => css`
+  ${({ theme, active, isAllAltText }) => css`
     ${theme.fonts.regular16};
 
     display: flex;
     align-items: center;
     justify-content: center;
-    width: 8rem;
+    width: ${isAllAltText ? '12rem' : '8rem'};
     height: 4rem;
     color: ${active ? theme.colors.purple70 : theme.colors.gray50};
     letter-spacing: -0.08rem;