diff --git a/src/App.js b/src/App.js index ba63af2..8e86266 100644 --- a/src/App.js +++ b/src/App.js @@ -20,6 +20,8 @@ import ReviewPage from "pages/ReviewPage"; import VisitListPage from "pages/VisitListPage"; import OrderSuccess from "pages/OrderSuccess"; import MyPage from "pages/MyPage"; +import OwnerPage from "owner/pages/OwnerPage"; +import OwnerDetailPage from "owner/pages/OwnerDetailPage"; const App = () => { useEffect(() => { if (window.location.host === "syluv.store") { @@ -82,6 +84,14 @@ const App = () => { path="/oauth/kakao/callback" element={} /> + } + /> + } + /> diff --git a/src/components/Common/NavBar.js b/src/components/Common/NavBar.js index ba2b53b..3d9b7bf 100644 --- a/src/components/Common/NavBar.js +++ b/src/components/Common/NavBar.js @@ -2,9 +2,15 @@ import React from "react"; import styled from "styled-components"; import { ReactComponent as DotIcon } from "assets/images/dot.svg"; -const NavBar = ({ items, selected, handleSelected, num = 0 }) => { +const NavBar = ({ + items, + selected, + handleSelected, + num = 0, + margin = true, +}) => { return ( - + {items.map((item, index) => ( { const NavBarContainer = styled.div` margin-top: 16px; - margin-bottom: 29px; + display: flex; justify-content: center; height: 36px; border-bottom: ${({ theme }) => `1px solid ${theme.color.gray100}`}; + + .margin { + margin-bottom: 29px; + } `; const NavItem = styled.div` diff --git a/src/owner/components/AddModal.js b/src/owner/components/AddModal.js new file mode 100644 index 0000000..8496e6a --- /dev/null +++ b/src/owner/components/AddModal.js @@ -0,0 +1,164 @@ +import styled from "styled-components"; +import add from "assets/images/add-button.png"; +import { useCallback, useState } from "react"; +import Button from "components/Common/Button"; + +const AddModal = ({ onClose = () => {} }) => { + const [menu, setMenu] = useState({ + name: "", + description: "", + price: "", + }); + + const handleChange = useCallback( + (e) => { + const { name, value } = e.target; + setMenu({ + ...menu, + [name]: value, + }); + }, + [menu] + ); + return ( + +
+
+ 사진을 추가해주세요 + add +
+
+
+ 메뉴 + +
+
+ 설명 + +
+
+ 가격 + +
+
+
+
+
+ + ); +}; + +export default AddModal; + +const AddMenu = styled.div` + z-index: 100; + position: fixed; + width: 100dvw; + height: 100dvh; + background-color: rgba(0, 0, 0, 0.5); + top: 0; + left: 0; + + display: flex; + justify-content: center; + align-items: center; + + .buttons { + display: flex; + justify-content: space-between; + gap: 13px; + } + + .body { + width: 400px; + background-color: white; + border-radius: 10px; + padding: 20px; + + @media (max-width: 480px) { + width: calc(100% - 80px); + } + + display: flex; + flex-direction: column; + gap: 24px; + } + + .form { + display: flex; + flex-direction: column; + gap: 20px; + .item { + display: flex; + flex-direction: column; + gap: 12px; + span { + font-size: 16px; + font-weight: ${({ theme }) => theme.fontWeight.semiBold}; + color: ${({ theme }) => theme.color.gray900}; + } + input { + height: 46px; + border: 1px solid ${({ theme }) => theme.color.gray200}; + font-weight: ${({ theme }) => theme.fontWeight.mediaum}; + color: ${({ theme }) => theme.color.gray900}; + border-radius: 8px; + padding: 0 16px; + font-size: 16px; + outline: none; + + &::placeholder { + color: ${({ theme }) => theme.color.gray600}; + } + } + } + } + + .photo { + background-color: ${({ theme }) => theme.color.gray50}; + height: 142px; + + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + gap: 12px; + + border-radius: 8px; + border: 1px solid ${({ theme }) => theme.color.gray200}; + + span { + font-size: 18px; + font-weight: ${({ theme }) => theme.fontWeight.semiBold}; + color: ${({ theme }) => theme.color.gray900}; + } + + img { + &:hover { + cursor: pointer; + transform: scale(1.08); + transition: transform 0.1s; + } + } + } +`; diff --git a/src/owner/components/Menu.js b/src/owner/components/Menu.js new file mode 100644 index 0000000..080da96 --- /dev/null +++ b/src/owner/components/Menu.js @@ -0,0 +1,9 @@ +const Menu = () => { + return ( +
+

Menu

+
+ ); +}; + +export default Menu; diff --git a/src/owner/components/MenuEditTab.js b/src/owner/components/MenuEditTab.js new file mode 100644 index 0000000..022ab8f --- /dev/null +++ b/src/owner/components/MenuEditTab.js @@ -0,0 +1,93 @@ +import { useState } from "react"; +import styled from "styled-components"; +import AddModal from "owner/components/AddModal"; +import Button from "components/Common/Button"; +import MenuItem from "components/Store/MenuItem"; + +const MenuEditTab = ({ item }) => { + const [isAddModalOpen, setIsAddModalOpen] = useState(false); + + return ( + <> + +
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+ + {isAddModalOpen && ( + { + setIsAddModalOpen(false); + }} + /> + )} + +
+
+ + + ); +}; + +export default MenuEditTab; + +const ButtonContainer = styled.div` + position: fixed; + width: 440px; + + margin: 0 20px; + bottom: 20px; + + @media (max-width: 480px) { + width: calc(100% - 40px); + } +`; + +const ListContainer = styled.div` + margin-top: -53px; + margin-bottom: 100px; + .item-wrapper { + padding: 20px 20px 0px 20px; + border-top: 1px solid ${({ theme }) => theme.color.gray100}; + } +`; diff --git a/src/owner/components/Order.js b/src/owner/components/Order.js new file mode 100644 index 0000000..7ccd426 --- /dev/null +++ b/src/owner/components/Order.js @@ -0,0 +1,9 @@ +const Order = () => { + return ( +
+

Order

+
+ ); +}; + +export default Order; diff --git a/src/owner/components/OrderItem.js b/src/owner/components/OrderItem.js new file mode 100644 index 0000000..d656a53 --- /dev/null +++ b/src/owner/components/OrderItem.js @@ -0,0 +1,55 @@ +import styled from "styled-components"; + +const OrderItem = () => { + return ( + +
+ 주문상품 +
+
+ 치즈 참치 김밥 + 2개 +
+ 가격: 5,000원 +
+
+ + ); +}; + +export default OrderItem; + +const Container = styled.div` + border-top: 1px solid ${({ theme }) => theme.color.gray100}; + font-weight: ${({ theme }) => theme.fontWeight.medium}; + color: ${({ theme }) => theme.color.gray900}; + padding: 24px 20px 24px 20px; + font-size: 14px; + + img { + width: 78px; + height: 78px; + border-radius: 12px; + } + + .content { + display: flex; + gap: 12px; + + div { + display: flex; + flex-direction: column; + justify-content: space-between; + gap: 8px; + } + } + .count { + color: ${({ theme }) => theme.color.gray500}; + } + .price { + font-weight: ${({ theme }) => theme.fontWeight.semiBold}; + } + .item-info { + padding: 2px 0px; + } +`; diff --git a/src/owner/components/OrderManageItem.js b/src/owner/components/OrderManageItem.js new file mode 100644 index 0000000..a9114dd --- /dev/null +++ b/src/owner/components/OrderManageItem.js @@ -0,0 +1,91 @@ +import { useNavigate } from "react-router-dom"; +import styled from "styled-components"; + +const OrderManageItem = () => { + const navigate = useNavigate(); + return ( + { + navigate("/owner/1/1"); + }} + > +
+
+ 픽업(16:00) +
+ 08:12 +
준비 중
+
+
+ +
+
+ 매콤 제육볶음x2, 키토김밥, 스시, 오니기리... + 주문번호: B1UD01004L + 토스페이 37,600원(예금주:OOO) +
+ + ); +}; + +export default OrderManageItem; + +const OrderContainer = styled.div` + .header { + display: flex; + justify-content: space-between; + align-items: center; + .left { + display: flex; + flex-direction: column; + gap: 12px; + + .time { + color: ${({ theme }) => theme.color.primary}; + font-size: 16px; + font-weight: ${({ theme }) => theme.fontWeight.semiBold}; + } + + .status { + align-items: center; + display: flex; + gap: 8px; + span { + color: ${({ theme }) => theme.color.gray900}; + font-size: 20px; + font-weight: ${({ theme }) => theme.fontWeight.semiBold}; + } + div { + font-weight: ${({ theme }) => theme.fontWeight.medium}; + border: 1px solid ${({ theme }) => theme.color.primary}; + color: ${({ theme }) => theme.color.primary}; + border-radius: 54px; + padding: 5px 8px; + font-size: 12px; + } + } + } + .right { + width: 80px; + height: 40px; + border-radius: 8px; + border: none; + background-color: ${({ theme }) => theme.color.primary}; + border: 1px solid ${({ theme }) => theme.color.primary}; + color: white; + + font-size: 16px; + font-weight: ${({ theme }) => theme.fontWeight.semiBold}; + cursor: pointer; + } + .before { + color: ${({ theme }) => theme.color.primary}; + background-color: white; + border: 1px solid ${({ theme }) => theme.color.primary}; + } + margin-bottom: 20px; + } + border-bottom: 1px solid ${({ theme }) => theme.color.gray100}; + padding: 0px 20px; + padding-bottom: 30px; +`; diff --git a/src/owner/components/OrderManageTab.js b/src/owner/components/OrderManageTab.js new file mode 100644 index 0000000..48d39b6 --- /dev/null +++ b/src/owner/components/OrderManageTab.js @@ -0,0 +1,68 @@ +import { useState } from "react"; +import styled from "styled-components"; +import OrderManageItem from "./OrderManageItem"; + +const OrderManageTab = () => { + const [selected, setSelected] = useState("신규/진행중"); + return ( + +
+ + +
+ + + + ); +}; + +export default OrderManageTab; + +const Container = styled.div` + .body { + display: flex; + flex-direction: column; + gap: 8px; + + color: ${({ theme }) => theme.color.gray600}; + font-size: 14px; + font-weight: ${({ theme }) => theme.fontWeight.medium}; + } + + margin-top: 130px; + width: 100%; + display: flex; + flex-direction: column; + gap: 35px; + + .button-bar { + margin: 0px 20px; + display: flex; + gap: 7px; + + button { + color: ${({ theme }) => theme.color.gray400}; + font-weight: ${({ theme }) => theme.fontWeight.regular}; + font-size: 14px; + padding: 8px 12px; + border-radius: 54px; + border: 1px solid ${({ theme }) => theme.color.gray400}; + background-color: white; + cursor: pointer; + } + .selected { + color: ${({ theme }) => theme.color.primary}; + border: 1px solid ${({ theme }) => theme.color.primary}; + } + } +`; diff --git a/src/owner/components/OwnerHeader.js b/src/owner/components/OwnerHeader.js new file mode 100644 index 0000000..6213b4d --- /dev/null +++ b/src/owner/components/OwnerHeader.js @@ -0,0 +1,25 @@ +import styled from "styled-components"; + +const OwnerHeader = ({ name }) => { + return ( +
+
{name}
+
+ ); +}; + +export default OwnerHeader; + +const Header = styled.div` + height: 52px; + background-color: white; + display: flex; + align-items: center; + color: ${({ theme }) => theme.color.gray900}; + + .title { + margin-left: 22px; + font-size: 20px; + font-weight: ${({ theme }) => theme.fontWeight.bold}; + } +`; diff --git a/src/owner/pages/OwnerDetailPage.js b/src/owner/pages/OwnerDetailPage.js new file mode 100644 index 0000000..0e9d4c1 --- /dev/null +++ b/src/owner/pages/OwnerDetailPage.js @@ -0,0 +1,105 @@ +import Button from "components/Common/Button"; +import Header from "components/Common/Header"; +import OrderItem from "owner/components/OrderItem"; +import { useNavigate } from "react-router-dom"; +import styled from "styled-components"; + +const OwnerDetailPage = () => { + const navigate = useNavigate(); + return ( + <> +
+ +
+ 주문일시: 2024년 7월 17일 오후 08:12 + 주문번호: B1UD01004L + 고객번호: 010-8634-0405 +
+ + + + +
+ 결제금액 + 63,000원 +
+
+ 결제방법 + 토스페이 +
+ + +