feat: 언어 선택기 및 로그인 버튼 컴포넌트 추가

Author: y00eunji

emotion.d.ts

@@ -1,6 +1,15 @@
 import "@emotion/react";
 import { Theme as MuiTheme } from "@mui/material/styles";
 
+declare module "@mui/material/styles" {
+  interface PaletteColor {
+    nonFocus?: string;
+  }
+  interface SimplePaletteColorOptions {
+    nonFocus?: string;
+  }
+}
+
 declare module "@emotion/react" {
   export interface Theme extends MuiTheme {}
 }

src/components/layout/Header/index.tsx

@@ -1,5 +1,7 @@
 import styled from "@emotion/styled";
 import { useMenu } from "../../../hooks/useMenu";
+import LanguageSelector from "../LanguageSelector";
+import LoginButton from "../LoginButton";
 
 interface SubMenuItem {
   text: string;
@@ -71,17 +73,8 @@ export default function Header({ menus }: HeaderProps) {
         </HeaderNav>
       </nav>
       <HeaderLeft>
-        <HeaderItem>
-          <img
-            src="src/assets/langIcon.png"
-            width={25}
-            height={25}
-            alt="langIcon"
-          />
-          <span>KO</span>
-          <span>EN</span>
-        </HeaderItem>
-        <div>로그인</div>
+        <LanguageSelector />
+        <LoginButton />
       </HeaderLeft>
     </HeaderContainer>
   );
@@ -133,11 +126,11 @@ const HeaderLeft = styled.div`
   gap: 1.125rem;
 `;
 
-const HeaderItem = styled.div`
-  display: flex;
-  align-items: center;
-  gap: 0.625rem;
-`;
+// const HeaderItem = styled.div`
+//   display: flex;
+//   align-items: center;
+//   gap: 0.625rem;
+// `;
 
 const SubMenu = styled.ul`
   position: absolute;

src/components/layout/LanguageSelector/index.tsx

@@ -0,0 +1,42 @@
+import styled from "@emotion/styled";
+import { useState } from "react";
+
+export default function LanguageSelector() {
+  const [selectedLang, setSelectedLang] = useState<"KO" | "EN">("KO");
+
+  return (
+    <LanguageContainer>
+      <img
+        src="src/assets/langIcon.png"
+        width={25}
+        height={25}
+        alt="langIcon"
+      />
+      <LanguageItem
+        isSelected={selectedLang === "KO"}
+        onClick={() => setSelectedLang("KO")}
+      >
+        KO
+      </LanguageItem>
+      <LanguageItem
+        isSelected={selectedLang === "EN"}
+        onClick={() => setSelectedLang("EN")}
+      >
+        EN
+      </LanguageItem>
+    </LanguageContainer>
+  );
+}
+
+const LanguageContainer = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+`;
+
+const LanguageItem = styled.div<{ isSelected: boolean }>`
+  cursor: pointer;
+  color: ${({ isSelected, theme }) =>
+    isSelected ? theme.palette.primary.dark : theme.palette.primary.nonFocus};
+  transition: color 0.2s ease;
+`;

src/components/layout/LoginButton/index.tsx

@@ -0,0 +1,16 @@
+import styled from "@emotion/styled";
+
+export default function LoginButton() {
+  return <LoginButtonStyled>로그인</LoginButtonStyled>;
+}
+
+const LoginButtonStyled = styled.button`
+  background: none;
+  border: none;
+  color: ${({ theme }) => theme.palette.primary.dark};
+  font-size: 0.875rem;
+  font-weight: 500;
+  cursor: pointer;
+  padding: 0;
+  transition: color 0.2s ease;
+`;

src/styles/globalStyles.ts

@@ -11,6 +11,7 @@ export const muiTheme = createTheme({
       main: "#259299",
       light: "#B6D8D7",
       dark: "#126D7F",
+      nonFocus: "#7AB2B3",
     },
     secondary: {
       main: "#259299",