-
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 (
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
);
};