💄 DESIGN: 필터 탭 하단 안내 메시지 추가

mihyunLee · Sep 13, 2023 · cf5ff87 · cf5ff87
1 parent 4f7bcaf
commit cf5ff87
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 1 deletion.
diff --git a/src/components/FilterTabs.tsx b/src/components/FilterTabs.tsx
@@ -26,13 +26,16 @@ export default function FilterTabs({ chartDataList, selectedId, setSelectedId }:
           </li>
         ))}
       </TabList>
+      <Message>* 상단의 자치구를 클릭하거나 그래프를 클릭하면 그래프가 필터링 됩니다 :D</Message>
     </TabsBar>
   );
 }
 
 const TabsBar = styled.nav`
   display: flex;
+  flex-direction: column;
   justify-content: center;
+  gap: 14px;
 `;
 
 const TabList = styled.ul`
@@ -54,3 +57,8 @@ const TabButton = styled.button<{ active: boolean }>`
     color: var(--white);
   }
 `;
+
+const Message = styled.span`
+  color: var(--alert);
+  font-size: 14px;
+`;
diff --git a/src/styles/GlobalStyle.ts b/src/styles/GlobalStyle.ts
@@ -16,7 +16,7 @@ const GlobalStyle = createGlobalStyle`
 		--gray300: #989AA1;
 		--blue: #3366FF;
 		--purple: #D4C5F9;
-		--warning: #F15846;
+		--alert: #41D3A7;
 		font-size: 16px;
 	}
 	body{