[Team23] Tab section 구현, 컴포넌트 트리 구조 추가

banchan/src/App.jsx

@@ -1,14 +1,18 @@
 import "./App.css";
 import StateProvider from "./components/StateProvider";
 import { createGlobalStyle } from "styled-components";
+import { ThemeProvider } from "styled-components";
+import theme from "./components/utils/styles/theme";
 
 export const GlobalStyle = createGlobalStyle`
   *{
     padding:0; 
     margin:0;
   }
   body{
+    font-family: 'Noto Sans KR';
     box-sizing:border-box;
+
   }
   ol, ul {
     list-style: none;
@@ -17,10 +21,10 @@ export const GlobalStyle = createGlobalStyle`
 
 function App() {
   return (
-    <>
+    <ThemeProvider theme={theme}>
       <GlobalStyle />
       <StateProvider />
-    </>
+    </ThemeProvider>
   );
 }
 

banchan/src/components/StateProvider.jsx

@@ -1,16 +1,17 @@
 import { useState } from "react";
 import Header from "./header/Header";
 import MainPage from "./main/MainPage";
-import styled, { injectGlobal } from "styled-components";
+import Test from "./Test";
 
-const StateProvider = (props) => {
-  const [loginState, setLoginState] = useState(false);
+const StateProvider = () => {
+  // const [loginState, setLoginState] = useState(false);
   // login해서 상태값 받아와야 함
 
   return (
     <>
       <Header />
       <MainPage />
+      <Test />
     </>
   );
 };

banchan/src/components/header/Header.jsx

@@ -1,12 +1,7 @@
 import HeaderLeft from "./headerLeft/HeaderLeft";
 import HeaderRight from "./headerRight/HeaderRight";
 import styled from "styled-components";
-
-const HeaderContainer = styled.div`
-  display: flex;
-  justify-content: space-between;
-  margin: 32px 80px 20px 80px;
-`;
+import { CenterContainer } from "../utils/styles/common";
 
 const Header = () => {
   return (
@@ -17,4 +12,9 @@ const Header = () => {
   );
 };
 
+const HeaderContainer = styled(CenterContainer)`
+  justify-content: space-between;
+  margin: 32px 80px 20px 80px;
+`;
+
 export default Header;

banchan/src/components/header/headerLeft/HeaderLeft.jsx

@@ -1,12 +1,17 @@
-import styled, { ThemeProvider } from "styled-components";
-import theme from "../../utils/constant.js";
+import styled from "styled-components";
 import HeaderNavbar from "./HeaderNavbar.jsx";
+import { CenterContainer } from "../../utils/styles/common.jsx";
 
-const HeaderLeftDiv = styled.div`
-  display: flex;
-  align-items: center;
-  font-family: Noto Sans KR;
-`;
+const HeaderLeft = () => {
+  return (
+    <HeaderLeftDiv>
+      <BanchanTitle>BANCHAN</BanchanTitle>
+      <HeaderNavbar />
+    </HeaderLeftDiv>
+  );
+};
+
+const HeaderLeftDiv = styled(CenterContainer)``;
 
 const BanchanTitle = styled.div`
   color: ${(props) => props.theme.colors.darkGray};
@@ -15,15 +20,4 @@ const BanchanTitle = styled.div`
   margin-right: 12px;
 `;
 
-const HeaderLeft = () => {
-  return (
-    <ThemeProvider theme={theme}>
-      <HeaderLeftDiv>
-        <BanchanTitle>BANCHAN</BanchanTitle>
-        <HeaderNavbar />
-      </HeaderLeftDiv>
-    </ThemeProvider>
-  );
-};
-
 export default HeaderLeft;

banchan/src/components/header/headerLeft/HeaderNavbar.jsx

@@ -1,6 +1,5 @@
 import React from "react";
-import styled, { ThemeProvider } from "styled-components";
-import theme from "../../utils/constant";
+import styled from "styled-components";
 import NavListItems from "./NavListItems";
 
 const HeaderNavbar = (props) => {
@@ -19,21 +18,16 @@ const HeaderNavbar = (props) => {
     },
   ];
 
-  const NavUL = styled.ul`
-    display: flex;
-    color: ${(props) => props.theme.colors.darkGray};
-    font-size: ${(props) => props.theme.fontSizes.S};
-  `;
-
   const navbarList = navLists.map((list, i) => (
     <NavListItems key={i} list={list} />
   ));
 
-  return (
-    <NavUL>
-      <ThemeProvider theme={theme}>{navbarList}</ThemeProvider>
-    </NavUL>
-  );
+  return <NavUL>{navbarList}</NavUL>;
 };
+const NavUL = styled.ul`
+  display: flex;
+  color: ${(props) => props.theme.colors.darkGray};
+  font-size: ${(props) => props.theme.fontSizes.S};
+`;
 
 export default HeaderNavbar;

banchan/src/components/header/headerLeft/NavListItems.jsx

@@ -1,41 +1,8 @@
 import React, { useState } from "react";
-import styled, { ThemeProvider } from "styled-components";
-import theme from "../../utils/constant";
+import styled from "styled-components";
 
 const NavListItems = ({ list }) => {
-  const NavLITitle = styled.span`
-    &:hover {
-      font-weight: bold;
-    }
-  `;
   const [isMouseOver, setIsMouseOver] = useState(false);
-  const NavLI = styled.li`
-    margin: 0 12px;
-  `;
-
-  const NavLIBox = styled.ul`
-    padding: 5px 7px;
-    display: flex;
-    flex-direction: column;
-    min-width: 100px;
-    min-height: 86px;
-    background: #ffffff;
-    box-shadow: 0px 0px 4px rgba(204, 204, 204, 0.5),
-      0px 2px 4px rgba(0, 0, 0, 0.25);
-    position: absolute;
-    top: 65px;
-  `;
-
-  const SubElementsLI = styled.li`
-    margin: 3px 0;
-    &:first-child {
-      font-weight: bold;
-      text-decoration: underline;
-      color: ${(props) => props.theme.colors.darkGray};
-    }
-    color: ${(props) => props.theme.colors.gray};
-    font-weight: "400";
-  `;
 
   const handleMouseEnter = () => {
     setIsMouseOver((isMouseOver) => (isMouseOver = true));
@@ -50,13 +17,45 @@ const NavListItems = ({ list }) => {
   ));
 
   return (
-    <ThemeProvider theme={theme}>
-      <NavLI onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
-        <NavLITitle>{list.title}</NavLITitle>
-        {isMouseOver && <NavLIBox>{listSubElements}</NavLIBox>}
-      </NavLI>
-    </ThemeProvider>
+    <NavLI onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
+      <NavLITitle>{list.title}</NavLITitle>
+      {isMouseOver && <NavLIBox>{listSubElements}</NavLIBox>}
+    </NavLI>
   );
 };
 
+const NavLITitle = styled.span`
+  &:hover {
+    font-weight: bold;
+  }
+`;
+
+const NavLI = styled.li`
+  margin: 0 12px;
+`;
+
+const NavLIBox = styled.ul`
+  padding: 5px 7px;
+  display: flex;
+  flex-direction: column;
+  min-width: 100px;
+  min-height: 86px;
+  background: #ffffff;
+  box-shadow: 0px 0px 4px rgba(204, 204, 204, 0.5),
+    0px 2px 4px rgba(0, 0, 0, 0.25);
+  position: absolute;
+  top: 65px;
+`;
+
+const SubElementsLI = styled.li`
+  margin: 3px 0;
+  &:first-child {
+    font-weight: bold;
+    text-decoration: underline;
+    color: ${(props) => props.theme.colors.darkGray};
+  }
+  color: ${(props) => props.theme.colors.gray};
+  font-weight: "400";
+`;
+
 export default NavListItems;

banchan/src/components/header/headerRight/HeaderRight.jsx

@@ -1,31 +1,44 @@
-import styled, { ThemeProvider } from "styled-components";
-import theme from "../../utils/constant";
+import styled from "styled-components";
+import IconButton from "../../utils/button/IconButton";
+import { CenterContainer } from "../../utils/styles/common";
 
 const HeaderRight = (props) => {
-  const HeaderRightDiv = styled.div`
-    display: flex;
-    align-items: center;
-  `;
-
-  const StyledSpan = styled.span`
-    margin: 0 12px;
-    font-size: ${(props) => props.theme.fontSizes.S};
-    font-family: "Noto Sans KR";
-    cursor: pointer;
-    &:hover {
-      font-weight: bold;
-    }
-  `;
-
+  const tempFn = () => {
+    console.log("hello");
+  };
   return (
     <HeaderRightDiv>
-      <ThemeProvider theme={theme}>
+      <SearchBox>
         <input />
-        <StyledSpan>로그인</StyledSpan>
-        <StyledSpan>장바구니</StyledSpan>
-      </ThemeProvider>
+        <IconButton type="SEARCH" fn={tempFn} />
+      </SearchBox>
+      <StyledSpan>로그인</StyledSpan>
+      <StyledSpan>장바구니</StyledSpan>
     </HeaderRightDiv>
   );
 };
 
+const HeaderRightDiv = styled(CenterContainer)`
+  justify-content: start;
+`;
+
+const StyledSpan = styled.span`
+  margin: 0 12px;
+  font-size: ${(props) => props.theme.fontSizes.S};
+  cursor: pointer;
+  &:hover {
+    font-weight: bold;
+  }
+`;
+const SearchBox = styled(CenterContainer)`
+  justify-content: space-between;
+  border-radius: ${(props) => props.theme.borders.radius};
+  background: ${(props) => props.theme.colors.lightGrayBG};
+  width: 248px;
+  height: 40px;
+  padding: 0 10px 0 15px;
+  input {
+    all: unset;
+  }
+`;
 export default HeaderRight;

banchan/src/components/main/CarouselSection.jsx

@@ -1,17 +1,17 @@
-import { useEffect, useState } from 'react';
-import Card from '../utils/Card';
-import theme from '../utils/constant';
+import { useEffect, useState } from "react";
+import Card from "../utils/Card";
+import theme from "../utils/styles/theme";
 
 const CarouselSection = (props) => {
   const [products, setProducts] = useState([]);
 
   useEffect(() => {
     fetch(
-      'https://h3rb9c0ugl.execute-api.ap-northeast-2.amazonaws.com/develop/baminchan/main'
+      "https://h3rb9c0ugl.execute-api.ap-northeast-2.amazonaws.com/develop/baminchan/main"
     )
       .then((response) => response.json())
       .then((result) => setProducts(result.body))
-      .then((error) => console.log('error', error));
+      .then((error) => console.log("error", error));
   }, []);
 
   return (

banchan/src/components/main/MainPage.jsx

@@ -1,5 +1,13 @@
-import CarouselSection from './CarouselSection';
+import CarouselSection from "./CarouselSection";
+import TabSection from "./tab/TabSection";
 
-const MainPage = (props) => <CarouselSection />;
+const MainPage = (props) => {
+  return (
+    <>
+      <TabSection />
+      <CarouselSection />
+    </>
+  );
+};
 
 export default MainPage;