From 31cdb993a243952dd8b7c63c23114897e38504ae Mon Sep 17 00:00:00 2001
From: happppi <102276917+hhbb0081@users.noreply.github.com>
Date: Fri, 17 Nov 2023 16:06:17 +0900
Subject: [PATCH 1/2] =?UTF-8?q?Feat:=20=EC=9E=AC=EA=B3=A0=EA=B4=80?=
=?UTF-8?q?=EB=A6=AC=20&=20=EB=A7=88=EC=9D=B4=ED=8E=98=EC=9D=B4=EC=A7=80?=
=?UTF-8?q?=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/assets/icons/icon_check.svg | 3 +
src/assets/icons/icon_closeModal.svg | 3 +
src/assets/icons/icon_downArrow.svg | 3 +
src/assets/icons/icon_kakao.svg | 3 +
src/assets/icons/icon_upArrow.svg | 3 +
src/assets/icons/img_readyVery.svg | 25 +++
src/assets/icons/small_cherry.svg | 23 +++
src/components/views/Header/Header.css | 41 ++++-
src/components/views/Header/Header.jsx | 8 +-
src/components/views/Header/Header2.jsx | 52 ++++++
src/components/views/Inven/InvenBox.jsx | 19 ++
src/components/views/NavBar/NavBar.css | 1 +
src/pages/Home/DetailHome.css | 3 +-
src/pages/Home/Receipt.css | 27 ++-
src/pages/Home/Receipt.jsx | 5 +
src/pages/Inventory/Inventory.css | 15 ++
src/pages/Inventory/Inventory.jsx | 16 +-
src/pages/Inventory/MainInven.css | 206 ++++++++++++++++++++++
src/pages/Inventory/MainInven.jsx | 219 +++++++++++++++++++++++-
src/pages/Mypage/MainMypage.css | 112 ++++++++++++
src/pages/Mypage/MainMypage.jsx | 56 +++++-
src/pages/Mypage/Mypage.css | 16 ++
src/pages/Mypage/Mypage.jsx | 21 +--
src/pages/Sales/MainSales.css | 0
src/pages/Sales/MainSales.jsx | 3 +-
src/pages/Sales/Sales.css | 13 ++
src/pages/Sales/Sales.jsx | 21 ++-
27 files changed, 862 insertions(+), 55 deletions(-)
create mode 100644 src/assets/icons/icon_check.svg
create mode 100644 src/assets/icons/icon_closeModal.svg
create mode 100644 src/assets/icons/icon_downArrow.svg
create mode 100644 src/assets/icons/icon_kakao.svg
create mode 100644 src/assets/icons/icon_upArrow.svg
create mode 100644 src/assets/icons/img_readyVery.svg
create mode 100644 src/assets/icons/small_cherry.svg
create mode 100644 src/components/views/Header/Header2.jsx
create mode 100644 src/components/views/Inven/InvenBox.jsx
create mode 100644 src/pages/Inventory/Inventory.css
create mode 100644 src/pages/Inventory/MainInven.css
create mode 100644 src/pages/Mypage/MainMypage.css
create mode 100644 src/pages/Mypage/Mypage.css
create mode 100644 src/pages/Sales/MainSales.css
create mode 100644 src/pages/Sales/Sales.css
diff --git a/src/assets/icons/icon_check.svg b/src/assets/icons/icon_check.svg
new file mode 100644
index 0000000..7b6ec19
--- /dev/null
+++ b/src/assets/icons/icon_check.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/assets/icons/icon_closeModal.svg b/src/assets/icons/icon_closeModal.svg
new file mode 100644
index 0000000..2369bab
--- /dev/null
+++ b/src/assets/icons/icon_closeModal.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/assets/icons/icon_downArrow.svg b/src/assets/icons/icon_downArrow.svg
new file mode 100644
index 0000000..91ed8f1
--- /dev/null
+++ b/src/assets/icons/icon_downArrow.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/assets/icons/icon_kakao.svg b/src/assets/icons/icon_kakao.svg
new file mode 100644
index 0000000..e9632f0
--- /dev/null
+++ b/src/assets/icons/icon_kakao.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/assets/icons/icon_upArrow.svg b/src/assets/icons/icon_upArrow.svg
new file mode 100644
index 0000000..07f2a16
--- /dev/null
+++ b/src/assets/icons/icon_upArrow.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/assets/icons/img_readyVery.svg b/src/assets/icons/img_readyVery.svg
new file mode 100644
index 0000000..012f64d
--- /dev/null
+++ b/src/assets/icons/img_readyVery.svg
@@ -0,0 +1,25 @@
+
diff --git a/src/assets/icons/small_cherry.svg b/src/assets/icons/small_cherry.svg
new file mode 100644
index 0000000..0ad363c
--- /dev/null
+++ b/src/assets/icons/small_cherry.svg
@@ -0,0 +1,23 @@
+
diff --git a/src/components/views/Header/Header.css b/src/components/views/Header/Header.css
index 0719ff9..121d6c3 100644
--- a/src/components/views/Header/Header.css
+++ b/src/components/views/Header/Header.css
@@ -1,9 +1,39 @@
.header {
- width: 100%;
+ /* width: 100%; */
+ min-width: 73.75rem;
+ /* min-width: 64rem; */
height: 5.5rem;
background-color: #2e2d2d;
}
+.header2{
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ min-width: 73.75rem;
+ /* min-width: 64rem; */
+ height: 5.5rem;
+ background-color: #2e2d2d;
+ z-index: 101;
+}
+
+.header2-wrapper{
+ display: flex;
+ justify-content: space-between;
+}
+
+.head-container2{
+ width: 23.6rem;
+ display: flex;
+ justify-content: space-evenly;
+}
+
+.header-img-wrapper{
+ display: flex;
+}
+
.LOGO {
width: 19.1875rem;
height: 4rem;
@@ -19,13 +49,14 @@
align-items: center;
}
+.store-img__wrapper{
+ margin: 0 0.5625rem;
+}
+
.header-font {
color: #fff;
- font-family: Pretendard;
font-size: 1.875rem;
- font-style: normal;
- font-weight: 600;
- line-height: 100%; /* 1.875rem */
+ font-family: "SemiBold";
}
.head-container {
diff --git a/src/components/views/Header/Header.jsx b/src/components/views/Header/Header.jsx
index be6e481..361a2ea 100644
--- a/src/components/views/Header/Header.jsx
+++ b/src/components/views/Header/Header.jsx
@@ -27,13 +27,13 @@ const Header = () => {
{!Store ? (
-
-
영업중
+
+
영업중
) : (
-
-
영업종료
+
+
영업종료
)}
{Sound ? (
diff --git a/src/components/views/Header/Header2.jsx b/src/components/views/Header/Header2.jsx
new file mode 100644
index 0000000..6ab9cea
--- /dev/null
+++ b/src/components/views/Header/Header2.jsx
@@ -0,0 +1,52 @@
+import React, { useState } from "react";
+import { useRecoilValue } from "recoil";
+import { storeState } from "../../../Atom/status";
+import StoreOff from "../../../assets/icons/Header/CloseLight.svg"; //영업종료
+import LOGO from "../../../assets/icons/Header/LOGO.svg"; //로고
+import StoreOn from "../../../assets/icons/Header/OpenLight.svg"; //영업중
+import SoundOff from "../../../assets/icons/Header/SoundOff.svg"; //소리끔
+import SoundOn from "../../../assets/icons/Header/SoundOn.svg"; //소리켬
+import "./Header.css";
+
+const Header = () => {
+ const Store = useRecoilValue(storeState);
+ const [Sound, setSound] = useState(1);
+
+ const onClickHandler = (e) => {
+ setSound(!Sound);
+ };
+
+ return (
+
+
+
+
+
+
+ {!Store ? (
+
+ ) : (
+
+ )}
+ {Sound ? (
+
+
+
+ ) : (
+
+
+
+ )}
+
+
+
+ );
+};
+
+export default Header;
diff --git a/src/components/views/Inven/InvenBox.jsx b/src/components/views/Inven/InvenBox.jsx
new file mode 100644
index 0000000..0bf9249
--- /dev/null
+++ b/src/components/views/Inven/InvenBox.jsx
@@ -0,0 +1,19 @@
+const InvenBox = ({handleModal, invenProps: {category, name, soldOut}}) => {
+ return(
+ <>
+
+
+ {!soldOut ? (
+
+ ) : (
+
+ )}
+
+
{category}
+
{name}
+
+ >
+ );
+}
+
+export default InvenBox;
\ No newline at end of file
diff --git a/src/components/views/NavBar/NavBar.css b/src/components/views/NavBar/NavBar.css
index bf4d81b..09cfb25 100644
--- a/src/components/views/NavBar/NavBar.css
+++ b/src/components/views/NavBar/NavBar.css
@@ -1,6 +1,7 @@
.navbar {
width: 8.875rem;
height: 46.25rem;
+ /* height: 42.5rem; */
background-color: #2e2d2d;
display: flex;
diff --git a/src/pages/Home/DetailHome.css b/src/pages/Home/DetailHome.css
index 635635a..ce2a1ea 100644
--- a/src/pages/Home/DetailHome.css
+++ b/src/pages/Home/DetailHome.css
@@ -4,7 +4,8 @@
align-content: flex-start;
width: 100%;
- height: 100%;
+ /* height: 100%; */
+ overflow-y: auto;
}
.listTable {
diff --git a/src/pages/Home/Receipt.css b/src/pages/Home/Receipt.css
index 9191df7..88a4023 100644
--- a/src/pages/Home/Receipt.css
+++ b/src/pages/Home/Receipt.css
@@ -1,20 +1,18 @@
.rounded-rectangle {
width: 100%; /* 너비 설정 */
height: 97%; /* 높이 설정 */
- background-color: #f5f5f5; /* 배경색 설정 */
- border-radius: 20px; /* 모서리를 둥글게 만드는 값 */
- text-align: center; /* 가운데 정렬 */
+ background-color: #F5F5F5; /* 배경색 설정 */
+ border-radius: 1.875rem; /* 모서리를 둥글게 만드는 값 */
color: #000; /* 텍스트 색상 설정 */
- font-size: 18px; /* 폰트 크기 설정 */
- line-height: 100px; /* 수직 가운데 정렬을 위한 높이 설정 */
- box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
+ box-shadow: 0px 0.25rem 0.375rem rgba(0, 0, 0, 0.25);
}
.Box {
width: 100%; /* 너비 설정 */
height: 100%; /* 높이 설정 */
- padding-top: 5%;
- padding-left: 0;
+ /* height: 42.5rem; */
+ /* padding-top: 5%; */
+ /* padding-left: 0; */
}
.receiptHeader {
@@ -33,6 +31,15 @@
letter-spacing: -0.0175rem;
}
+.receipt-btn__wrapper{
+ /* width: 80%;
+ margin: 0 auto; */
+ height: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
.receiptButton {
display: flex;
height: 5.5rem;
@@ -44,12 +51,16 @@
padding: 3% 7% 1% 7%;
}
+
+
.receipt-text {
color: #4f4f4f;
font-family: "Light";
font-size: 1.25rem;
font-weight: 600;
line-height: 130%; /* 1.625rem */
+ font-size: 1.25rem;
+ font-family: "SemiBold";
letter-spacing: -0.0125rem;
}
diff --git a/src/pages/Home/Receipt.jsx b/src/pages/Home/Receipt.jsx
index cce69e8..b5c1789 100644
--- a/src/pages/Home/Receipt.jsx
+++ b/src/pages/Home/Receipt.jsx
@@ -32,6 +32,7 @@ const Receipt = () => {
+
+
+
+
diff --git a/src/pages/Inventory/Inventory.css b/src/pages/Inventory/Inventory.css
new file mode 100644
index 0000000..435245c
--- /dev/null
+++ b/src/pages/Inventory/Inventory.css
@@ -0,0 +1,15 @@
+.inven-wrapper{
+ display: flex;
+
+}
+
+nav{
+ width: 8.875rem;
+ height: 46.25rem;
+ /* height: 42.5rem; */
+ z-index: 1;
+}
+
+main{
+ width: calc(100vw - 8.875rem);
+}
\ No newline at end of file
diff --git a/src/pages/Inventory/Inventory.jsx b/src/pages/Inventory/Inventory.jsx
index 27a84ef..d8e42d5 100644
--- a/src/pages/Inventory/Inventory.jsx
+++ b/src/pages/Inventory/Inventory.jsx
@@ -1,19 +1,19 @@
import React from "react";
-import { Col, Row } from "react-bootstrap";
+import Header from "../../components/views/Header/Header2";
import NavBar from "../../components/views/NavBar/NavBar";
+import "./Inventory.css";
import MainInven from "./MainInven";
const Inventory = () => {
return (
-
-
-
+
+
+
+
-
-
+
);
};
diff --git a/src/pages/Inventory/MainInven.css b/src/pages/Inventory/MainInven.css
new file mode 100644
index 0000000..1c589d3
--- /dev/null
+++ b/src/pages/Inventory/MainInven.css
@@ -0,0 +1,206 @@
+.mainInven-wrapper{
+ width: 100%;
+ /* height: 100%; */
+}
+
+.mainInven-title__wrapper{
+ display: flex;
+ height: 5.0625rem;
+ width: 100%;
+ min-width: calc(73.75rem - 8.875rem);
+ background-color: #4F4F4F;
+ border-bottom: 0.5rem solid #d82356;
+ position: relative;
+}
+
+.mainInven-title__wrapper span{
+ font-size: 1.875rem;
+ font-family: "Bold";
+ color: #fff;
+ text-align: center;
+ line-height: 4.5625rem;
+ white-space: nowrap;
+}
+
+.mainInven-title__span1{
+ width: 15%;
+ min-width: 8.3125rem;
+}
+
+.mainInven-title__span2__wrapper{
+ width: 25%;
+ min-width: 17.8125rem;
+ display: flex;
+ justify-content: space-between;
+}
+
+.mainInven-title__span2{
+ /* width: 25%; */
+}
+
+.mainInven-title__span3{
+ width: 60%;
+ min-width: 39.625rem;
+}
+
+.mainInven-category__modal{
+ position: absolute;
+ left: calc((100vw - 8.875rem) * 0.275);
+ display: flex;
+ flex-direction: column;
+ width: 17.1875rem;
+ border-radius: 0 0 0.625rem 0.625rem;
+ background-color: #4F4F4F;
+ z-index: 0;
+}
+
+.mainInven-category__modal span{
+ width: 17.1875rem;
+ height: 3.0625rem;
+ line-height: 3.0625rem;
+ font-size: 1.5625rem;
+ font-family: "SemiBold";
+ color: #fff;
+ /* background-color: #4F4F4F; */
+}
+
+.mainInven-category__line{
+ background-color: #dadada;
+ width: 100%;
+ height: 0.0625rem;
+}
+
+.mainInven-category-content__wrapper{
+ width: 100%;
+ height: calc(46.25rem - 5.0625rem);
+ /* height: calc(42.5rem - 5.0625rem); */
+ overflow-y: auto;
+}
+
+.mainInven-category-content__wrapper::-webkit-scrollbar {
+ display: none;
+}
+
+.mainInven-category-content__wrapper {
+ -ms-overflow-style: none; /* 인터넷 익스플로러 */
+ scrollbar-width: none; /* 파이어폭스 */
+}
+
+.mainInven-category-content__box{
+ display: flex;
+
+ width: 100%;
+ min-width: calc(73.75rem - 8.875rem);
+ height: 3.6875rem;
+ border-bottom: #dadada solid 0.125rem;
+}
+
+.mainInven-category-content__box.selected{
+ background-color: rgba(216, 35, 86, 0.15);
+}
+
+.mainInven-category-content__box span{
+ font-size: 1.5625rem;
+ font-family: "Medium";
+ color: #4f4f4f;
+ line-height: 3.6875rem;
+}
+
+.mainInven-category-checkbox{
+ height: 2.1875rem;
+ width: 2.1875rem;
+ border:#dadada solid 0.1875rem;
+ border-radius: 0.125rem;
+}
+
+.mainInven-category-checkbox.selected{
+ background: #d82356 url( "../../assets/icons/icon_check.svg" ) no-repeat center center;
+
+ border: none;
+}
+
+.mainInven-category-content__span1{
+ width: 15%;
+ min-width: 8.3125rem;
+
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+.mainInven-category-content__span2{
+ width: 25%;
+ min-width: 17.8125rem;
+
+ white-space: nowrap;
+}
+
+.mainInven-category-content__span3{
+ width: 60%;
+ min-width: 39.625rem;
+
+ white-space: nowrap;
+}
+
+/* 모달 */
+.modal-wrapper{
+ position: absolute;
+ top: 5.5rem;
+ bottom: 0;
+ left: 8.875rem;
+ right: 0;
+ height: 46.25rem;
+ background-color: rgba(0,0,0, 0.5);
+
+ display: flex;
+}
+
+.modal-box{
+ position: absolute;
+ top: calc(50% - 12.15625rem);
+ left: calc(50% - 17.1875rem);
+
+ width: 34.375rem;
+ height: 24.3125rem;
+ background-color: #fff;
+ border-radius: 2.8125rem;
+ z-index: 101;
+ padding: 2.0625rem 3.25rem;
+}
+
+.modal-close__wrapper{
+ display: flex;
+ justify-content: end;
+}
+
+.modal-box-img__wrapper{
+ height: 30%;
+}
+
+.modal-box-txt__wrapper{
+ height: 30%;
+}
+
+.modal-box-txt{
+ font-size: 1.5625rem;
+ font-family: "SemiBold";
+}
+
+.modal-box-close-btn__wrapper{
+ display: flex;
+ flex-direction: column;
+ justify-content: flex-end;
+ height: 30%;
+}
+
+.modal-box-close-btn{
+ width: 19.375rem;
+ height: 3.125rem;
+ margin: 0 auto;
+ color: #fff;
+ background-color: #d82356;
+ font-size: 1.5625rem;
+ font-family: "SemiBold";
+ line-height: 3.125rem;
+ border-radius: 0.5rem;
+}
\ No newline at end of file
diff --git a/src/pages/Inventory/MainInven.jsx b/src/pages/Inventory/MainInven.jsx
index 90b5825..acb6886 100644
--- a/src/pages/Inventory/MainInven.jsx
+++ b/src/pages/Inventory/MainInven.jsx
@@ -1,11 +1,220 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
+import close from "../../assets/icons/icon_closeModal.svg";
+import downArrow from "../../assets/icons/icon_downArrow.svg";
+import upArrow from "../../assets/icons/icon_upArrow.svg";
+import cherry from "../../assets/icons/small_cherry.svg";
+import InvenBox from "../../components/views/Inven/InvenBox";
+import "./MainInven.css";
+
+
+function MainInven () {
+ const [category, setCategory] = useState("전체");
+ const [isCategoryOpen, setIsCategoryOpen] = useState(false);
+ const [isModalOpen, setIsModalOpen] = useState(false);
+
+ const categoryList = ["전체", "커피", "논커피", "티", "에이드", "프라페", "스무디", "마카롱", "아이스크림", "와플", "크로플", "베이커리"];
+ const chnMenu = () => setIsCategoryOpen(!isCategoryOpen);
+
+ const chnCategory = (e) => {
+ setCategory(e);
+ setIsCategoryOpen((prev) => !prev);
+ }
+
+ const handleModal = () => {
+ setIsModalOpen((prev) => !prev);
+
+ // /api/v1/inventory [patch]
+ // /api/v1/inventory [get]
+ }
+
+ useEffect(() => {
+ const handleClickOutside = (e) => {
+ const layerPopup = document.querySelector(".mainInven-category__modal");
+ if (layerPopup && !layerPopup.contains(e.target)) {
+ setIsCategoryOpen(false);
+ }
+ };
+
+ document.addEventListener("mouseup", handleClickOutside);
+ return () => {
+ document.removeEventListener("mouseup", handleClickOutside);
+ };
+ }, []);
+
+ const invenList = {
+ "category" : [
+ {
+ "name" : "커피",
+ "foodies" : [
+ {
+ "idx" : 123,
+ "name": "아메리카노",
+ "soldOut" : true,
+
+ },
+ {
+ "idx" : 133,
+ "name": "라떼",
+ "soldOut" : false,
+
+ },
+ ],
+
+ },
+ {
+ "name" : "티",
+ "foodies" : [
+ {
+ "idx" : 124,
+ "name": "녹차",
+ "soldOut" : true,
+
+ },
+ {
+ "idx" : 143,
+ "name": "홍차",
+ "soldOut" : false,
+
+ },
+ ],
+
+ },
+ {
+ "name" : "에이드",
+ "foodies" : [
+ {
+ "idx" : 125,
+ "name": "망고 에이드",
+ "soldOut" : true,
+
+ },
+ {
+ "idx" : 153,
+ "name": "청포도 에이드",
+ "soldOut" : false,
+
+ },
+ ],
+
+ },
+ {
+ "name" : "프라페",
+ "foodies" : [
+ {
+ "idx" : 126,
+ "name": "오레오 프라페",
+ "soldOut" : true,
+
+ },
+ {
+ "idx" : 163,
+ "name": "초코 프라페",
+ "soldOut" : false,
+
+ },
+ ],
+
+ },
+ {
+ "name" : "스무디",
+ "foodies" : [
+ {
+ "idx" : 127,
+ "name": "무화과 스무디",
+ "soldOut" : true,
+
+ },
+ {
+ "idx" : 173,
+ "name": "망고 스무디",
+ "soldOut" : false,
+
+ },
+ ],
+
+ },
+ {
+ "name" : "마카롱",
+ "foodies" : [
+ {
+ "idx" : 128,
+ "name": "앙버터 마카롱",
+ "soldOut" : true,
+
+ },
+ {
+ "idx" : 183,
+ "name": "로투스 마카롱",
+ "soldOut" : false,
+
+ },
+ ],
+
+ },
+ ],
+ };
-const inven = () => {
return (
-
-
Inventory
+
+
+
품절
+
+
+
{category}
+ {isCategoryOpen ? (
) : (
)}
+
+
상품명
+
+
+ {isCategoryOpen && (
+
+ {categoryList.map((e, i) => (
+ <>
+
chnCategory(e)}>{e}
+
+ >
+ ))}
+
+ )}
+
+
+ {invenList.category
+ .filter((cate) => category === "전체" || cate.name === category)
+ .map((categoryItem) =>
+ categoryItem.foodies.map((foodItem) => (
+
+
+
+ )
+ ))}
+
+
+ {isModalOpen && (
+
+
+
+
+
+
+
+
품절 처리 시
+
고객님은 해당 메뉴를 주문할 수 없습니다.
+
+
+
+
+ )}
);
};
-export default inven;
+export default MainInven;
diff --git a/src/pages/Mypage/MainMypage.css b/src/pages/Mypage/MainMypage.css
new file mode 100644
index 0000000..e45735a
--- /dev/null
+++ b/src/pages/Mypage/MainMypage.css
@@ -0,0 +1,112 @@
+.mypage-main__wrapper{
+ display: flex;
+ flex-direction: column;
+
+ padding: 4.3125rem 4rem 2rem 4rem;
+ width: 100%;
+ height: calc(100% + 5.5rem);
+
+ justify-content: space-between;
+}
+
+.mypage-top__wrapper{
+ width: 100%;
+}
+
+.mypage-top__txt{
+ font-size: 1.25rem;
+ font-family: "Bold";
+ color: #4f4f4f;
+}
+
+.mypage-top__box{
+ display: flex;
+ justify-content: space-between;
+}
+
+.mypage-top-txt__wrapper{
+ text-align: start;
+}
+
+.mypage-top-cafe__txt{
+ font-size: 1.875rem;
+ font-family: "Bold";
+ white-space: nowrap;
+}
+
+.mypage-top-cafe__txt span{
+ font-size: 3.125rem;
+}
+
+.mypage-kakao__wrapper{
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+}
+
+.mypage-kakao__txt{
+ display: flex;
+ flex-direction: column;
+ text-align: start;
+ margin: 0 3.4375rem 0 0.6875rem;
+}
+
+.mypage-kakao__txt span{
+ font-size: 1.09rem;
+ font-family: "Medium";
+ color: #838383;
+}
+
+.mypage-kakao-img__box{
+ width: 3.625rem;
+ height: 2.5rem;
+ border-radius: 0.625rem;
+ background-color: #d9d9d9;
+ padding: 0.59375rem 0;
+}
+
+.mypage__line{
+ height: 0.15625rem;
+ width: 100%;
+ background-color: #dadada;
+ margin: 1.5625rem 0;
+}
+
+.mypage-content__wrapper{
+ width: 100%;
+ text-align: start;
+}
+
+.mypage-content__wrapper p{
+ font-size: 1.875rem;
+ font-family: "Bold";
+ color: #4f4f4f;
+ margin: 2rem 0;
+}
+
+.mypage-content__box div{
+ display: flex; /* 추가: 내부 div들을 가로로 나열하기 위해 Flexbox 사용 */
+ justify-content: space-between;
+ width: 100%;
+ margin: 0.625rem 0;
+}
+
+.mypage-content__title{
+ font-size: 1.875rem;
+ font-family: "Medium";
+ color: #000;
+ width: 30%;
+}
+
+.mypage-content__txt{
+ font-size: 1.5625rem;
+ font-family: "Light";
+ color: #000;
+ width: 70%;
+}
+
+.mypage-logout__wrapper span{
+ font-size: 0.9375rem;
+ font-family: "Regular";
+ color: #838383;
+}
\ No newline at end of file
diff --git a/src/pages/Mypage/MainMypage.jsx b/src/pages/Mypage/MainMypage.jsx
index d93830f..04ca7d1 100644
--- a/src/pages/Mypage/MainMypage.jsx
+++ b/src/pages/Mypage/MainMypage.jsx
@@ -1,9 +1,61 @@
import React from "react";
+import kakao from "../../assets/icons/icon_kakao.svg";
+import readyvery from "../../assets/icons/img_readyVery.svg";
+import "./MainMypage.css";
const MainMypage = () => {
return (
-
-
Mypage
+
+
+
+
+
+
+
+ 레디베리 상담
+ 매일 00:00 ~ 24:00
+
+
+
+
+
+
+
+
+
기본 정보
+
+
+ 가게명
+ 오르다커피
+
+
+
+ 가게주소
+ 경기 부천시 지봉로 46 백호빌딩 2층
+
+
+
+ 매장 연락처
+ 0507-1358-6887
+
+
+
+ 영업시간
+ 평일 08:40-23:00 / 토요일 11:00-22:00 / 일요일 휴무
+
+
+
+ 등록 계좌번호
+ KB국민은행 22930104331825
+
+
+
+
+
+
로그아웃
);
};
diff --git a/src/pages/Mypage/Mypage.css b/src/pages/Mypage/Mypage.css
new file mode 100644
index 0000000..0a5ce43
--- /dev/null
+++ b/src/pages/Mypage/Mypage.css
@@ -0,0 +1,16 @@
+.mypage-wrapper{
+ display: flex;
+
+}
+
+nav{
+ width: 8.875rem;
+ height: 46.25rem;
+ /* height: 42.5rem; */
+ padding-top: 5.5rem;
+}
+
+main{
+ width: calc(100vw - 8.875rem);
+ margin-top: 5.5rem;
+}
\ No newline at end of file
diff --git a/src/pages/Mypage/Mypage.jsx b/src/pages/Mypage/Mypage.jsx
index f0de064..ef02590 100644
--- a/src/pages/Mypage/Mypage.jsx
+++ b/src/pages/Mypage/Mypage.jsx
@@ -1,19 +1,20 @@
import React from "react";
-import { Col, Row } from "react-bootstrap";
+// import { Col, Nav, Row } from "react-bootstrap";
+import Header from "../../components/views/Header/Header2";
import NavBar from "../../components/views/NavBar/NavBar";
import MainMypage from "./MainMypage";
+import "./Mypage.css";
const Mypage = () => {
return (
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
);
};
diff --git a/src/pages/Sales/MainSales.css b/src/pages/Sales/MainSales.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/pages/Sales/MainSales.jsx b/src/pages/Sales/MainSales.jsx
index a0181f6..46476af 100644
--- a/src/pages/Sales/MainSales.jsx
+++ b/src/pages/Sales/MainSales.jsx
@@ -1,8 +1,9 @@
import React from "react";
+import "./MainSales.css";
const MainSales = () => {
return (
-
+
Sales
);
diff --git a/src/pages/Sales/Sales.css b/src/pages/Sales/Sales.css
new file mode 100644
index 0000000..27c1e43
--- /dev/null
+++ b/src/pages/Sales/Sales.css
@@ -0,0 +1,13 @@
+.mypage-wrapper{
+ display: flex;
+
+}
+
+nav{
+ width: 8.875rem;
+ height: 46.25rem;
+}
+
+main{
+ width: calc(100vw - 8.875rem);
+}
\ No newline at end of file
diff --git a/src/pages/Sales/Sales.jsx b/src/pages/Sales/Sales.jsx
index c15b4fe..288369b 100644
--- a/src/pages/Sales/Sales.jsx
+++ b/src/pages/Sales/Sales.jsx
@@ -1,19 +1,18 @@
import React from "react";
-import { Col, Row } from "react-bootstrap";
+import Header from "../../components/views/Header/Header2";
import NavBar from "../../components/views/NavBar/NavBar";
-import MainMypage from "../Mypage/MainMypage";
+import MainSales from "./MainSales";
const Sales = () => {
return (
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
);
};
From 53170d4ea0cbebbde24fbe82c1683dc6f71f16bc Mon Sep 17 00:00:00 2001
From: happppi <102276917+hhbb0081@users.noreply.github.com>
Date: Fri, 17 Nov 2023 16:11:52 +0900
Subject: [PATCH 2/2] =?UTF-8?q?Fix:=20end=20=EC=98=A4=EB=A5=98=20=ED=95=B4?=
=?UTF-8?q?=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.env | 1 -
src/pages/Inventory/MainInven.css | 2 +-
2 files changed, 1 insertion(+), 2 deletions(-)
diff --git a/.env b/.env
index c72c189..ae7f013 100644
--- a/.env
+++ b/.env
@@ -4,4 +4,3 @@ WDS_SOCKET_PORT=0
NODE_PATH=src/
REACT_APP_API_ROOT=http://localhost:8080
REACT_APP_HOME_URL=http://localhost:3000
-
diff --git a/src/pages/Inventory/MainInven.css b/src/pages/Inventory/MainInven.css
index 1c589d3..dabe87c 100644
--- a/src/pages/Inventory/MainInven.css
+++ b/src/pages/Inventory/MainInven.css
@@ -170,7 +170,7 @@
.modal-close__wrapper{
display: flex;
- justify-content: end;
+ justify-content: flex-end;
}
.modal-box-img__wrapper{