Merge pull request #72 from Stack-Knowledge/feature/styleSettings

[Admin, Common] QA

Author: TaerangLee

packages/common/src/components/Header/index.tsx

@@ -18,6 +18,7 @@ interface HeaderProps {
 
 const Header: React.FC<HeaderProps> = ({ role }) => {
   const pathname = usePathname();
+
   if (pathname === '/auth/login') return <></>;
 
   const handleLinkClick = (e: any) => {
@@ -26,6 +27,8 @@ const Header: React.FC<HeaderProps> = ({ role }) => {
     }
   };
 
+  const getIsActive = (targetPath: string) => pathname === targetPath;
+
   return (
     <S.HeaderWrapper>
       <S.HeaderContainer>
@@ -34,41 +37,53 @@ const Header: React.FC<HeaderProps> = ({ role }) => {
           <S.Title>Stack Knowledge</S.Title>
         </S.LogoContainer>
         <S.MenuNav role={role}>
-          <S.MenuItemWrapper href='/' onClick={handleLinkClick}>
+          <S.MenuStrokeItemWrapper href='/' isActive={getIsActive('/')}>
             <HomeIcon />
             <S.ItemTitle>홈</S.ItemTitle>
-          </S.MenuItemWrapper>
+          </S.MenuStrokeItemWrapper>
+
           {role === 'admin' ? (
             <>
-              <S.MenuItemWrapper
+              <S.MenuStrokeItemWrapper
                 href='/mission/scoring'
-                onClick={handleLinkClick}
+                isActive={getIsActive('mission/scoring')}
               >
                 <QuestionIcon />
                 <S.ItemTitle>채점하기</S.ItemTitle>
-              </S.MenuItemWrapper>
-              <S.MenuItemWrapper
+              </S.MenuStrokeItemWrapper>
+
+              <S.MenuFillItemWrapper
                 href='/mission/create'
-                onClick={handleLinkClick}
+                isActive={getIsActive('/mission/create')}
               >
                 <MadeIcon />
                 <S.ItemTitle>만들기</S.ItemTitle>
-              </S.MenuItemWrapper>
+              </S.MenuFillItemWrapper>
             </>
           ) : (
-            <S.MenuItemWrapper href='/mission/list' onClick={handleLinkClick}>
-              <QuestionIcon />
-              <S.ItemTitle>문제</S.ItemTitle>
-            </S.MenuItemWrapper>
+            <>
+              <S.MenuFillItemWrapper
+                href='/mission/list'
+                isActive={getIsActive('/mission/list')}
+              >
+                <QuestionIcon />
+                <S.ItemTitle>문제</S.ItemTitle>
+              </S.MenuFillItemWrapper>
+            </>
           )}
-          <S.MenuItemWrapper href='/shop' onClick={handleLinkClick}>
+
+          <S.MenuFillItemWrapper href='/shop' isActive={getIsActive('/shop')}>
             <ShopIcon />
             <S.ItemTitle>상점</S.ItemTitle>
-          </S.MenuItemWrapper>
-          <S.MenuItemWrapper href='/ranking' onClick={handleLinkClick}>
+          </S.MenuFillItemWrapper>
+
+          <S.MenuFillItemWrapper
+            href='/ranking'
+            isActive={getIsActive('/ranking')}
+          >
             <RankingIcon />
             <S.ItemTitle>랭킹</S.ItemTitle>
-          </S.MenuItemWrapper>
+          </S.MenuFillItemWrapper>
         </S.MenuNav>
       </S.HeaderContainer>
     </S.HeaderWrapper>

packages/common/src/components/Header/style.ts

@@ -34,13 +34,61 @@ export const MenuNav = styled.div`
   gap: ${({ role }) => (role === 'admin' ? '1.5rem' : '2.25rem')};
 `;
 
-export const MenuItemWrapper = styled(Link)`
+export const MenuStrokeItemWrapper = styled(Link)<{ isActive?: boolean }>`
   display: flex;
   align-items: center;
+  color: ${({ isActive, theme }) =>
+    isActive ? theme.color.primary : theme.color.black};
+
+  & svg {
+    path {
+      stroke: ${({ isActive, theme }) =>
+        isActive ? theme.color.primary : theme.color.black};
+    }
+  }
+
+  &:hover {
+    span,
+    & svg {
+      color: ${({ theme }) => theme.color.primary};
+
+      path {
+        stroke: ${({ theme }) => theme.color.primary};
+      }
+    }
+  }
+`;
+
+export const MenuFillItemWrapper = styled(Link)<{ isActive?: boolean }>`
+  ${({ isActive, theme }) => {
+    const activeColor = isActive ? theme.color.primary : theme.color.black;
+    const hoverColor = theme.color.primary;
+    return `
+     display: flex;
+     align-items: center;
+     color:${activeColor};
+
+     & svg {
+       circle { stroke:${activeColor};}
+       
+       rect, path {fill:${activeColor};}
+     }
+
+     &:hover{
+       span,
+       & svg{
+         color:${hoverColor};
+
+         circle{stroke:${hoverColor};}
+
+         rect,path{fill:${hoverColor};}
+       }
+     }
+   `;
+  }}
 `;
 
 export const ItemTitle = styled.span`
   ${({ theme }) => theme.typo.body3};
-  color: ${({ theme }) => theme.color.black};
   margin-left: 0.9375rem;
 `;

projects/admin/src/PageContainer/GradingPage/style.ts

@@ -23,7 +23,8 @@ export const Title = styled.span`
 
 export const SectionContainer = styled.span`
   display: flex;
-  gap: 24.75rem;
+  display: flex;
+  justify-content: space-between;
   padding-bottom: 1.25rem;
 `;