From 4bc5da1d23032aff7132f929ff100370a49e423e Mon Sep 17 00:00:00 2001 From: GleamingStar Date: Thu, 22 Apr 2021 16:08:40 +0900 Subject: [PATCH 1/2] style: Add Header.jsx --- src/js/components/Header.jsx | 97 ++++++++++++++++++++++++++++++++++++ src/js/components/Main.jsx | 7 ++- src/js/components/header.js | 0 3 files changed, 102 insertions(+), 2 deletions(-) create mode 100644 src/js/components/Header.jsx delete mode 100644 src/js/components/header.js diff --git a/src/js/components/Header.jsx b/src/js/components/Header.jsx new file mode 100644 index 000000000..000684399 --- /dev/null +++ b/src/js/components/Header.jsx @@ -0,0 +1,97 @@ +import styled from "styled-components"; + +const HeaderWrapper = styled.div` + position: relative; + width: 1440px; + height: 122px; + + font-family: Noto Sans KR; + font-style: normal; +`; +const Title = styled.div` + position: absolute; + width: 190px; + height: 58px; + top: 32px; + left: 0px; + + font-weight: 900; + font-size: 40px; + line-height: 58px; + letter-spacing: -0.04em; + text-transform: uppercase; + color: #333333; +`; +const MenuWrapper = styled.div` + display: flex; + flex-direction: row; + align-items: flex-start; + justify-content: space-between; + position: absolute; + padding: 0px; + width: 354px; + height: 23px; + top: 50px; + left: 246px; +`; +const Menu = styled.div` + font-weight: normal; + font-size: 16px; + line-height: 23px; + color: #333333; +`; +const SearchBar = styled.input` + position: absolute; + width: 248px; + height: 40px; + top: 41px; + left: 898px; + border-radius: 5px; + border: none; + background: #f5f5f7; +`; +const SearchBarIcon = styled.div` + position: absolute; + top: 50px; + left: 1116px; +`; +const Login = styled.div` + position: absolute; + top: 50px; + left: 1172px; + font-weight: normal; + font-size: 16px; + line-height: 23px; + color: #333333; +`; +const Basket = styled.div` + position: absolute; + top: 50px; + left: 1241px; + font-weight: normal; + font-size: 16px; + line-height: 23px; + color: #333333; +`; + +const Header = () => ( + + banchan + + 든든한 메인요리 + 뜨끈한 국물요리 + 정갈한 밑반찬 + + + + + + + + + 로그인 + 장바구니 + +); + +export default Header; diff --git a/src/js/components/Main.jsx b/src/js/components/Main.jsx index a617cfe2c..b0941255d 100644 --- a/src/js/components/Main.jsx +++ b/src/js/components/Main.jsx @@ -1,11 +1,13 @@ import { useState } from "react"; -import styled from "styled-components" +import styled from "styled-components"; +import Header from "./Header"; import BestList from "./bestList/BestList"; import Modal from "./Modal/Modal"; const Wrapper = styled.div` filter: ${(props) => (props.isModalOn ? "brightness(40%)" : "brightness(100%)")}; - background-color : #fff; + background-color: #fff; + margin-left: 40px; `; const Main = () => { @@ -26,6 +28,7 @@ const Main = () => { return ( <> +
diff --git a/src/js/components/header.js b/src/js/components/header.js deleted file mode 100644 index e69de29bb..000000000 From 3d10305fc0101e56f3a8bf90dda05712fef157c9 Mon Sep 17 00:00:00 2001 From: GleamingStar Date: Thu, 22 Apr 2021 16:43:42 +0900 Subject: [PATCH 2/2] feat: Add mouseEnter,Leave handler for toggle layer --- src/js/components/Header.jsx | 102 ++++++++++++++++++++++++++--------- 1 file changed, 77 insertions(+), 25 deletions(-) diff --git a/src/js/components/Header.jsx b/src/js/components/Header.jsx index 000684399..0bb0ab6e8 100644 --- a/src/js/components/Header.jsx +++ b/src/js/components/Header.jsx @@ -1,3 +1,4 @@ +import { useState } from "react"; import styled from "styled-components"; const HeaderWrapper = styled.div` @@ -29,16 +30,38 @@ const MenuWrapper = styled.div` justify-content: space-between; position: absolute; padding: 0px; - width: 354px; + width: 360px; height: 23px; top: 50px; left: 246px; `; -const Menu = styled.div` - font-weight: normal; +const Menu = styled.div``; +const MenuTitle = styled.div` + font-weight: ${(props) => (props.isOn ? "bold" : "normal")}; font-size: 16px; line-height: 23px; - color: #333333; + color: #333; +`; +const MenuBodyWrapper = styled.div` + visibility: ${(props) => (props.isOn ? "visible" : "hidden")}; + display: flex; + flex-direction: column; + align-items: flex-start; + position: relative; + top: 16px; + padding: 16px; + background: #fff; + box-shadow: 0px 0px 4px rgba(204, 204, 204, 0.5), 0px 2px 4px rgba(0, 0, 0, 0.25); + z-index: 1; +`; +const MenuBody = styled.div` + font-size: 16px; + line-height: 28px; + color: #828282; + &:hover { + color: #333333; + text-decoration-line: underline; + } `; const SearchBar = styled.input` position: absolute; @@ -62,7 +85,10 @@ const Login = styled.div` font-weight: normal; font-size: 16px; line-height: 23px; - color: #333333; + color: #333; + &:hover { + font-weight: bold; + } `; const Basket = styled.div` position: absolute; @@ -71,27 +97,53 @@ const Basket = styled.div` font-weight: normal; font-size: 16px; line-height: 23px; - color: #333333; + color: #333; + &:hover { + font-weight: bold; + } `; -const Header = () => ( - - banchan - - 든든한 메인요리 - 뜨끈한 국물요리 - 정갈한 밑반찬 - - - - - - - - - 로그인 - 장바구니 - -); +const Header = () => { + const [isM1On, setM1On] = useState(false); + const [isM2On, setM2On] = useState(false); + const [isM3On, setM3On] = useState(false); + return ( + + banchan + + setM1On(true)} onMouseLeave={() => setM1On(false)}> + 든든한 메인요리 + + 육류 요리 + 해산물 요리 + + + setM2On(true)} onMouseLeave={() => setM2On(false)}> + 뜨끈한 국물요리 + + 국/밥/찌개 + + + setM3On(true)} onMouseLeave={() => setM3On(false)}> + 정갈한 밑반찬 + + 나물/무침 + 조림/볶음 + 절임/장아찌 + + + + + + + + + + + 로그인 + 장바구니 + + ); +}; export default Header;