#5 refactor: NavBar Item들을 직접 넘겨주는 방식으로 수정

fe/src/components/NavBar.tsx

@@ -0,0 +1,44 @@
+import React from "react";
+
+type Props = {
+  navItems: React.ReactElement[];
+  style?: React.CSSProperties;
+  children: React.ReactNode;
+};
+
+const NavContext = React.createContext({ navItems: [<div>initial</div>] });
+
+export function NavBar({ navItems, style, children }: Props) {
+  const contextValue = { navItems };
+
+  return (
+    <NavContext.Provider value={contextValue}>
+      <nav style={style}>{children}</nav>
+    </NavContext.Provider>
+  );
+}
+
+export function NavList({
+  children,
+  style,
+}: {
+  children: React.ReactNode;
+  style: React.CSSProperties;
+}) {
+  return <ul style={style}>{children}</ul>;
+}
+
+export function NavItem() {
+  const { navItems } = React.useContext(NavContext);
+
+  return (
+    <>
+      {navItems.map((navItem, idx) => (
+        <li key={idx}>{navItem}</li>
+      ))}
+    </>
+  );
+}
+
+NavBar.NavList = NavList;
+NavBar.NavItem = NavItem;

fe/src/components/common/Header.tsx

@@ -1,27 +1,35 @@
 import TVTickerTapeWidget from "../TradingViewWidgets/TVTickerTape";
-import { NavWrapper } from "../Nav";
+import { NavBar } from "../NavBar";
 import styled from "styled-components";
 import Search from "../Search";
 import UserControls from "../common/UserControls";
 import Routes from "router/Routes";
 
 export default function Header() {
-  const headerNavLinks = [
-    { name: "Portfolio", url: Routes.PORTFOLIO },
-    { name: "Watchlist", url: Routes.WATCHLIST },
-    { name: "Indices", url: Routes.INDICES },
+  const navItemList = [
+    <div
+      style={navItemStyle}
+      onClick={() => console.log("포트폴리오 Dropdown 요소가 들어갈자리")}>
+      Portfolio
+    </div>,
+    <a style={navItemStyle} href={Routes.WATCHLIST}>
+      Watchlist
+    </a>,
+    <a style={navItemStyle} href={Routes.INDICES}>
+      Indices
+    </a>,
   ];
 
   return (
     <>
       <StyledHeader>
         <HeaderLeft>
           <StyledBrandIdentity>FineAnts</StyledBrandIdentity>
-          <NavWrapper style={navStyles} links={headerNavLinks}>
-            <NavWrapper.NavList style={navListStyle}>
-              <NavWrapper.NavItem style={navItemStyle} />
-            </NavWrapper.NavList>
-          </NavWrapper>
+          <NavBar style={navBarStyles} navItems={navItemList}>
+            <NavBar.NavList style={navListStyle}>
+              <NavBar.NavItem />
+            </NavBar.NavList>
+          </NavBar>
         </HeaderLeft>
         <HeaderRight>
           <Search />
@@ -61,7 +69,7 @@ const StyledBrandIdentity = styled.div`
   font-weight: bold;
 `;
 
-const navStyles = {
+const navBarStyles = {
   backgroundColor: "#ffffff",
 };