Merge pull request #31 from Bamdoliro/feat/#27

Feat/#27

package.json

@@ -10,6 +10,7 @@
     "axios": "^1.6.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-fast-marquee": "^1.6.2",
     "react-router-dom": "^6.18.0",
     "react-scripts": "5.0.1",
     "styled-components": "^6.0.8",

src/components/Header/index.js

@@ -1,96 +1,46 @@
-import styled from "styled-components";
+import * as S from "./style";
 import React from "react";
 import black_logo from "../../assets/black_logo.svg";
 import white_logo from "../../assets/white_logo.svg";
 
 function Header(props) {
+
   const routeItems = ["팀 소개", "팀 문화", "프로젝트", "팀 연혁", "멤버 소개"];
 
   return (
-    <HeaderContainer activeSection={props.activeSection}>
-      <Menu>
-        <Logo
+    <S.HeaderContainer activeSection={props.activeSection}>
+      <S.Menu>
+        <S.Logo
           src={
             props.activeSection === "introduce" ||
             props.activeSection === "culture" ||
             props.activeSection === "projects" ||
-            props.activeSection === "history"
+            props.activeSection === "history" ||
+            props.activeSection === "member"
               ? black_logo
               : white_logo
           }
           alt="logo"
         />
         {routeItems.map((item, index) => (
-          <MenuItem
+          <S.MenuItem
             key={index}
             className={
               props.activeSection === "introduce" ||
               props.activeSection === "culture" ||
               props.activeSection === "projects" ||
-              props.activeSection === "history"
+              props.activeSection === "history" ||
+              props.activeSection === "member"
                 ? "active"
                 : ""
             }
           >
             {item}
-          </MenuItem>
+          </S.MenuItem>
         ))}
-      </Menu>
-    </HeaderContainer>
+      </S.Menu>
+    </S.HeaderContainer>
   );
 }
 
-const HeaderContainer = styled.div`
-  position: fixed;
-  top: 0;
-  z-index: 1000;
-  background-color: ${(props) =>
-    props.activeSection === "introduce" ||
-    props.activeSection === "culture" ||
-    props.activeSection === "projects" ||
-    props.activeSection === "history"
-      ? "rgba(255, 255, 255, 0.06)"
-      : "rgba(62, 61, 63, 0.30)"};
-  border-bottom: 1px solid rgba(62, 61, 63, 0.3);
-  backdrop-filter: blur(5px);
-`;
-
-const Menu = styled.ul`
-  display: flex;
-  align-items: center;
-  color: black;
-  width: 100vw;
-  height: 60px;
-  font-size: 20px;
-  font-weight: 600;
-  margin-left: 170px;
-`;
-
-const MenuItem = styled.li`
-  list-style-type: none;
-  margin-right: 30px;
-  cursor: pointer;
-  position: relative;
-
-  color: ${(props) => (props.className === "active" ? "black" : "white")};
-
-  &:hover::before {
-    content: "";
-    position: absolute;
-    top: -8px;
-    left: -12px;
-    right: -12px;
-    bottom: -8px;
-    background: rgba(238, 238, 238, 0.6);
-    z-index: -1;
-    border-radius: 6px;
-  }
-`;
-
-const Logo = styled.img`
-  width: 170px;
-  height: 20px;
-  margin-right: 570px;
-`;
-
 export default Header;

src/components/Header/style.js

@@ -0,0 +1,55 @@
+import styled from "styled-components";
+
+export const HeaderContainer = styled.div`
+  position: fixed;
+  top: 0;
+  z-index: 1000;
+  background-color: ${(props) =>
+    props.activeSection === "introduce" ||
+    props.activeSection === "culture" ||
+    props.activeSection === "projects" ||
+    props.activeSection === "history" ||
+    props.activeSection === "member"
+      ? "rgba(255, 255, 255, 0.06)"
+      : "rgba(62, 61, 63, 0.30)"};
+  border-bottom: 1px solid rgba(62, 61, 63, 0.3);
+  backdrop-filter: blur(5px);
+`;
+
+export const Menu = styled.ul`
+  display: flex;
+  align-items: center;
+  color: black;
+  width: 100vw;
+  height: 60px;
+  font-size: 20px;
+  font-weight: 600;
+  margin-left: 170px;
+`;
+
+export const MenuItem = styled.li`
+  list-style-type: none;
+  margin-right: 30px;
+  cursor: pointer;
+  position: relative;
+
+  color: ${(props) => (props.className === "active" ? "black" : "white")};
+
+  &:hover::before {
+    content: "";
+    position: absolute;
+    top: -8px;
+    left: -12px;
+    right: -12px;
+    bottom: -8px;
+    background: rgba(238, 238, 238, 0.6);
+    z-index: -1;
+    border-radius: 6px;
+  }
+`;
+
+export const Logo = styled.img`
+  width: 170px;
+  height: 20px;
+  margin-right: 570px;
+`;