Merge pull request #63 from LikeLion-Hackathon-T1/develop

사장님 뷰 배포

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={<OauthCallback />}
                                 />
+                                <Route
+                                    path="/owner/:storeId"
+                                    element={<OwnerPage />}
+                                />
+                                <Route
+                                    path="/owner/:storeId/:orderId"
+                                    element={<OwnerDetailPage />}
+                                />
                             </Routes>
                         </BrowserRouter>
                     </MobileContainer>

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 (
-        <NavBarContainer>
+        <NavBarContainer className={`${margin ? margin : ""}`}>
             {items.map((item, index) => (
                 <NavItem
                     key={index}
@@ -21,11 +27,15 @@ const NavBar = ({ items, selected, handleSelected, num = 0 }) => {
 
 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`

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 (
+        <AddMenu>
+            <div className="body">
+                <div className="photo">
+                    <span>사진을 추가해주세요</span>
+                    <img src={add} alt="add" />
+                </div>
+                <div className="form">
+                    <div className="item">
+                        <span>메뉴</span>
+                        <input
+                            type="text"
+                            name="name"
+                            value={menu.name}
+                            onChange={handleChange}
+                            placeholder="메뉴 이름을 입력해주세요"
+                        />
+                    </div>
+                    <div className="item">
+                        <span>설명</span>
+                        <input
+                            type="text"
+                            name="description"
+                            value={menu.description}
+                            onChange={handleChange}
+                            placeholder="이 메뉴에 대해 설명해주세요"
+                        />
+                    </div>
+                    <div className="item">
+                        <span>가격</span>
+                        <input
+                            type="text"
+                            name="price"
+                            value={menu.price}
+                            onChange={handleChange}
+                            placeholder="가격을 입력해주세요"
+                        />
+                    </div>
+                </div>
+                <div className="buttons">
+                    <Button text="취소" onClick={() => onClose()} />
+                    <Button text="완료" type="2" onClick={() => onClose()} />
+                </div>
+            </div>
+        </AddMenu>
+    );
+};
+
+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;
+            }
+        }
+    }
+`;

src/owner/components/Menu.js

@@ -0,0 +1,9 @@
+const Menu = () => {
+    return (
+        <div>
+            <h1>Menu</h1>
+        </div>
+    );
+};
+
+export default Menu;

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 (
+        <>
+            <ListContainer>
+                <div className="item-wrapper">
+                    <MenuItem item={item} />
+                </div>
+                <div className="item-wrapper">
+                    <MenuItem item={item} />
+                </div>
+                <div className="item-wrapper">
+                    <MenuItem item={item} />
+                </div>
+                <div className="item-wrapper">
+                    <MenuItem item={item} />
+                </div>
+                <div className="item-wrapper">
+                    <MenuItem item={item} />
+                </div>
+                <div className="item-wrapper">
+                    <MenuItem item={item} />
+                </div>
+                <div className="item-wrapper">
+                    <MenuItem item={item} />
+                </div>
+                <div className="item-wrapper">
+                    <MenuItem item={item} />
+                </div>
+                <div className="item-wrapper">
+                    <MenuItem item={item} />
+                </div>
+                <div className="item-wrapper">
+                    <MenuItem item={item} />
+                </div>
+                <div className="item-wrapper">
+                    <MenuItem item={item} />
+                </div>
+                <div className="item-wrapper">
+                    <MenuItem item={item} />
+                </div>
+            </ListContainer>
+            {isAddModalOpen && (
+                <AddModal
+                    onClose={() => {
+                        setIsAddModalOpen(false);
+                    }}
+                />
+            )}
+            <ButtonContainer>
+                <div className="position">
+                    <Button
+                        text="메뉴 추가"
+                        type="2"
+                        onClick={() => {
+                            setIsAddModalOpen(true);
+                        }}
+                    />
+                </div>
+            </ButtonContainer>
+        </>
+    );
+};
+
+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};
+    }
+`;

src/owner/components/Order.js

@@ -0,0 +1,9 @@
+const Order = () => {
+    return (
+        <div>
+            <h1>Order</h1>
+        </div>
+    );
+};
+
+export default Order;

src/owner/components/OrderItem.js

@@ -0,0 +1,55 @@
+import styled from "styled-components";
+
+const OrderItem = () => {
+    return (
+        <Container>
+            <div className="content">
+                <img src="https://via.placeholder.com/150" alt="주문상품" />
+                <div className="item-info">
+                    <div>
+                        <span>치즈 참치 김밥</span>
+                        <span className="count">2개</span>
+                    </div>
+                    <span className="price">가격: 5,000원</span>
+                </div>
+            </div>
+        </Container>
+    );
+};
+
+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;
+    }
+`;