deprecated-hongbiii · wjddnjswjd12 · Apr 21, 2021 · Apr 21, 2021 · Apr 21, 2021
diff --git a/banchan/src/App.jsx b/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/theme.js";
 
 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>
   );
 }
 

diff --git a/banchan/src/components/StateProvider.jsx b/banchan/src/components/StateProvider.jsx
@@ -1,9 +1,8 @@
 import { useState } from "react";
 import Header from "./header/Header";
 import MainPage from "./main/MainPage";
-import styled, { injectGlobal } from "styled-components";
 
-const StateProvider = (props) => {
+const StateProvider = () => {
   const [loginState, setLoginState] = useState(false);
   // login해서 상태값 받아와야 함
 

diff --git a/banchan/src/components/header/Header.jsx b/banchan/src/components/header/Header.jsx
@@ -2,12 +2,6 @@ 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;
-`;
-
 const Header = () => {
   return (
     <HeaderContainer>
@@ -17,4 +11,10 @@ const Header = () => {
   );
 };
 
+const HeaderContainer = styled.div`
+  display: flex;
+  justify-content: space-between;
+  margin: 32px 80px 20px 80px;
+`;
+
 export default Header;
diff --git a/banchan/src/components/header/headerLeft/HeaderLeft.jsx b/banchan/src/components/header/headerLeft/HeaderLeft.jsx
@@ -1,11 +1,18 @@
-import styled, { ThemeProvider } from "styled-components";
-import theme from "../../utils/constant.js";
+import styled from "styled-components";
 import HeaderNavbar from "./HeaderNavbar.jsx";
 
+const HeaderLeft = () => {
+  return (
+    <HeaderLeftDiv>
+      <BanchanTitle>BANCHAN</BanchanTitle>
+      <HeaderNavbar />
+    </HeaderLeftDiv>
+  );
+};
+
 const HeaderLeftDiv = styled.div`
   display: flex;
   align-items: center;
-  font-family: Noto Sans KR;
 `;
 
 const BanchanTitle = styled.div`
@@ -14,16 +21,4 @@ const BanchanTitle = styled.div`
   font-weight: 900;
   margin-right: 12px;
 `;
-
-const HeaderLeft = () => {
-  return (
-    <ThemeProvider theme={theme}>
-      <HeaderLeftDiv>
-        <BanchanTitle>BANCHAN</BanchanTitle>
-        <HeaderNavbar />
-      </HeaderLeftDiv>
-    </ThemeProvider>
-  );
-};
-
 export default HeaderLeft;
diff --git a/banchan/src/components/header/headerLeft/HeaderNavbar.jsx b/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;
diff --git a/banchan/src/components/header/headerLeft/NavListItems.jsx b/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;
diff --git a/banchan/src/components/header/headerRight/HeaderRight.jsx b/banchan/src/components/header/headerRight/HeaderRight.jsx
@@ -1,31 +1,27 @@
-import styled, { ThemeProvider } from "styled-components";
-import theme from "../../utils/constant";
+import styled from "styled-components";
 
 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;
-    }
-  `;
-
   return (
     <HeaderRightDiv>
-      <ThemeProvider theme={theme}>
-        <input />
-        <StyledSpan>로그인</StyledSpan>
-        <StyledSpan>장바구니</StyledSpan>
-      </ThemeProvider>
+      <input />
+      <StyledSpan>로그인</StyledSpan>
+      <StyledSpan>장바구니</StyledSpan>
     </HeaderRightDiv>
   );
 };
 
+const HeaderRightDiv = styled.div`
+  display: flex;
+  align-items: center;
+`;
+
+const StyledSpan = styled.span`
+  margin: 0 12px;
+  font-size: ${(props) => props.theme.fontSizes.S};
+  cursor: pointer;
+  &:hover {
+    font-weight: bold;
+  }
+`;
+
 export default HeaderRight;
diff --git a/banchan/src/components/main/CarouselSection.jsx b/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/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 (

diff --git a/banchan/src/components/utils/Card.jsx b/banchan/src/components/utils/Card.jsx
@@ -1,24 +1,18 @@
-import styled from 'styled-components';
-import theme from './constant';
-import Price from './Price';
+import styled from "styled-components";
+import theme from "./theme";
+import Price from "./Price";
 
 const Card = ({ product, cardSize }) => {
   return (
     <StyledLi cardSize={cardSize}>
       <StyledImg cardSize={cardSize} src={product.image} alt="card-image" />
-      <StyledTitle>
-        <span>{product.title}</span>
-      </StyledTitle>
-      <StyledDescription>
-        <span>{product.description}</span>
-      </StyledDescription>
+      <StyledTitle>{product.title}</StyledTitle>
+      <StyledDescription>{product.description}</StyledDescription>
       <Price product={product} />
     </StyledLi>
   );
 };
 
-// ============================= ● Styled components ● =============================
-
 const StyledLi = styled.li`
   width: ${(props) => props.cardSize};
 `;

diff --git a/banchan/src/components/utils/Label.jsx b/banchan/src/components/utils/Label.jsx
@@ -7,14 +7,18 @@ const LABEL_TYPE = {
   LAUNCH: "런칭특가",
 };
 
-const Label = ({ type }) => <StyledLabel type={type}>{LABEL_TYPE[type]}</StyledLabel>;
+const Label = ({ type }) => (
+  <StyledLabel type={type}>{LABEL_TYPE[type]}</StyledLabel>
+);
 
 const StyledLabel = styled.span`
   padding: 4px 16px;
+  border-radius: ${theme.borders.radius};
   color: ${theme.colors.white};
   font-size: ${theme.fontSizes.XS};
   font-weight: bold;
-  background: ${({ type }) => (type === "EVENT" ? theme.colors.green : theme.colors.lightBlue)};
+  background: ${({ type }) =>
+    type === "EVENT" ? theme.colors.green : theme.colors.lightBlue};
 `;
 
 export default Label;
diff --git a/banchan/src/components/utils/Price.jsx b/banchan/src/components/utils/Price.jsx
@@ -1,5 +1,5 @@
-import styled from 'styled-components';
-import theme from './constant';
+import styled from "styled-components";
+import theme from "./theme";
 
 const Price = ({ product }) => {
   const isOnSale = !!product.n_price;
@@ -14,8 +14,6 @@ const Price = ({ product }) => {
   );
 };
 
-// ============================= ● Styled components ● =============================
-
 const StyledPriceWrapper = styled.div`
   display: flex;
   align-items: center;