[ DDeong ] 1차 완성 / Carousel npm 배포

.vscode/launch.json

@@ -0,0 +1,15 @@
+{
+    // IntelliSense를 사용하여 가능한 특성에 대해 알아보세요.
+    // 기존 특성에 대한 설명을 보려면 가리킵니다.
+    // 자세한 내용을 보려면 https://go.microsoft.com/fwlink/?linkid=830387을(를) 방문하세요.
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "type": "pwa-chrome",
+            "request": "launch",
+            "name": "Launch Chrome against localhost",
+            "url": "http://localhost:3000",
+            "webRoot": "${workspaceFolder}"
+        }
+    ]
+}

package.json

@@ -3,11 +3,13 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@jjunyjjuny/react-carousel": "0.0.2",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-icons": "^4.2.0",
     "react-scripts": "4.0.3",
     "styled-components": "^5.2.3",
     "web-vitals": "^1.0.1"

src/App.js

@@ -1,22 +1,9 @@
-import BestList from "./js/components/bestList/BestList";
+import Main from "./js/components/Main";
 import TestCarousel from "./js/util/TestCarousel";
 function App() {
-  const test = {
-    detail_hash: "HBDEF",
-    image:
-      "http://public.codesquad.kr/jk/storeapp/data/2d3f99a9a35601f4e98837bc4d39b2c8.jpg",
-    alt: "[미노리키친] 규동 250g",
-    delivery_type: ["새벽배송", "전국택배"],
-    title: "[미노리키친] 규동 250g",
-    description: "일본인의 소울푸드! 한국인도 좋아하는 소고기덮밥",
-    n_price: "6,500",
-    s_price: "7,000원",
-    badge: ["이벤트특가"],
-  };
-
   return (
     <>
-      <BestList />
+      <Main />
       <TestCarousel />
     </>
   );

src/js/components/Header.jsx

@@ -0,0 +1,149 @@
+import { useState } from "react";
+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: 360px;
+	height: 23px;
+	top: 50px;
+	left: 246px;
+`;
+const Menu = styled.div``;
+const MenuTitle = styled.div`
+	font-weight: ${(props) => (props.isOn ? "bold" : "normal")};
+	font-size: 16px;
+	line-height: 23px;
+	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;
+	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: #333;
+	&:hover {
+		font-weight: bold;
+	}
+`;
+const Basket = styled.div`
+	position: absolute;
+	top: 50px;
+	left: 1241px;
+	font-weight: normal;
+	font-size: 16px;
+	line-height: 23px;
+	color: #333;
+	&:hover {
+		font-weight: bold;
+	}
+`;
+
+const Header = () => {
+	const [isM1On, setM1On] = useState(false);
+	const [isM2On, setM2On] = useState(false);
+	const [isM3On, setM3On] = useState(false);
+	return (
+		<HeaderWrapper>
+			<Title>banchan</Title>
+			<MenuWrapper>
+				<Menu onMouseEnter={() => setM1On(true)} onMouseLeave={() => setM1On(false)}>
+					<MenuTitle isOn={isM1On}>든든한 메인요리</MenuTitle>
+					<MenuBodyWrapper isOn={isM1On}>
+						<MenuBody>육류 요리</MenuBody>
+						<MenuBody>해산물 요리</MenuBody>
+					</MenuBodyWrapper>
+				</Menu>
+				<Menu onMouseEnter={() => setM2On(true)} onMouseLeave={() => setM2On(false)}>
+					<MenuTitle isOn={isM2On}>뜨끈한 국물요리</MenuTitle>
+					<MenuBodyWrapper isOn={isM2On}>
+						<MenuBody>국/밥/찌개</MenuBody>
+					</MenuBodyWrapper>
+				</Menu>
+				<Menu onMouseEnter={() => setM3On(true)} onMouseLeave={() => setM3On(false)}>
+					<MenuTitle isOn={isM3On}>정갈한 밑반찬</MenuTitle>
+					<MenuBodyWrapper isOn={isM3On}>
+						<MenuBody>나물/무침</MenuBody>
+						<MenuBody>조림/볶음</MenuBody>
+						<MenuBody>절임/장아찌</MenuBody>
+					</MenuBodyWrapper>
+				</Menu>
+			</MenuWrapper>
+			<SearchBar />
+			<SearchBarIcon>
+				<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+					<path d="M11 19C15.4183 19 19 15.4183 19 11C19 6.58172 15.4183 3 11 3C6.58172 3 3 6.58172 3 11C3 15.4183 6.58172 19 11 19Z" stroke="#BDBDBD" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+					<path d="M20.9999 21L16.6499 16.65" stroke="#BDBDBD" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+				</svg>
+			</SearchBarIcon>
+			<Login>로그인</Login>
+			<Basket>장바구니</Basket>
+		</HeaderWrapper>
+	);
+};
+
+export default Header;

src/js/components/Main.jsx

@@ -0,0 +1,39 @@
+import { useState } from "react";
+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;
+	margin-left: 40px;
+`;
+
+const Main = () => {
+	const test = {
+		data: {
+			top_image: "",
+			thumb_images: [""],
+			product_description: "",
+			point: "",
+			delivery_info: "",
+			delivery_fee: "",
+			prices: ["원"],
+			detail_section: [],
+		},
+	};
+	const [modalData, setModalData] = useState(test);
+	const [isModalOn, setModalOn] = useState(false);
+	return (
+		<>
+			<Wrapper isModalOn={isModalOn}>
+				<Header />
+				<BestList setModalData={setModalData} setModalOn={setModalOn} />
+			</Wrapper>
+			<Modal data={modalData.data} isModalOn={isModalOn} setModalOn={setModalOn} />
+		</>
+	);
+};
+
+export default Main;