diff --git a/package-lock.json b/package-lock.json index 72660fe..e97322d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -17,6 +17,7 @@ "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", "antd": "^5.11.5", + "aos": "^2.3.4", "apexcharts": "^3.44.0", "axios": "^1.6.2", "bootstrap": "^5.3.2", @@ -35,7 +36,7 @@ "react-redux": "^8.1.3", "react-router-dom": "^6.16.0", "react-scripts": "5.0.1", - "react-thermal-printer": "0.18.1", + "react-thermal-printer": "^0.18.1", "recoil": "^0.7.7", "recoil-persist": "^5.1.0", "redux": "^4.2.1", @@ -6320,6 +6321,16 @@ "node": ">= 8" } }, + "node_modules/aos": { + "version": "2.3.4", + "resolved": "https://registry.npmjs.org/aos/-/aos-2.3.4.tgz", + "integrity": "sha512-zh/ahtR2yME4I51z8IttIt4lC1Nw0ktsFtmeDzID1m9naJnWXhCoARaCgNOGXb5CLy3zm+wqmRAEgMYB5E2HUw==", + "dependencies": { + "classlist-polyfill": "^1.0.3", + "lodash.debounce": "^4.0.6", + "lodash.throttle": "^4.0.1" + } + }, "node_modules/apexcharts": { "version": "3.44.0", "resolved": "https://registry.npmjs.org/apexcharts/-/apexcharts-3.44.0.tgz", @@ -7361,6 +7372,11 @@ "resolved": "https://registry.npmjs.org/cjs-module-lexer/-/cjs-module-lexer-1.2.3.tgz", "integrity": "sha512-0TNiGstbQmCFwt4akjjBg5pLRTSyj/PkWQ1ZoO2zntmg9yLqSRxwEa4iCfQLGjqhiqBfOJa7W/E8wfGrTDmlZQ==" }, + "node_modules/classlist-polyfill": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/classlist-polyfill/-/classlist-polyfill-1.2.0.tgz", + "integrity": "sha512-GzIjNdcEtH4ieA2S8NmrSxv7DfEV5fmixQeyTmqmRmRJPGpRBaSnA2a0VrCjyT8iW8JjEdMbKzDotAJf+ajgaQ==" + }, "node_modules/classnames": { "version": "2.3.2", "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz", @@ -13805,6 +13821,11 @@ "resolved": "https://registry.npmjs.org/lodash.sortby/-/lodash.sortby-4.7.0.tgz", "integrity": "sha512-HDWXG8isMntAyRF5vZ7xKuEvOhT4AhlRt/3czTSjvGUxjYCBVRQY48ViDHyfYz9VIoBkW4TMGQNapx+l3RUwdA==" }, + "node_modules/lodash.throttle": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz", + "integrity": "sha512-wIkUCfVKpVsWo3JSZlc+8MB5it+2AN5W8J7YVMST30UrvcQNZ1Okbj+rbVniijTWE6FGYy4XJq/rHkas8qJMLQ==" + }, "node_modules/lodash.uniq": { "version": "4.5.0", "resolved": "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz", @@ -25029,6 +25050,16 @@ "picomatch": "^2.0.4" } }, + "aos": { + "version": "2.3.4", + "resolved": "https://registry.npmjs.org/aos/-/aos-2.3.4.tgz", + "integrity": "sha512-zh/ahtR2yME4I51z8IttIt4lC1Nw0ktsFtmeDzID1m9naJnWXhCoARaCgNOGXb5CLy3zm+wqmRAEgMYB5E2HUw==", + "requires": { + "classlist-polyfill": "^1.0.3", + "lodash.debounce": "^4.0.6", + "lodash.throttle": "^4.0.1" + } + }, "apexcharts": { "version": "3.44.0", "resolved": "https://registry.npmjs.org/apexcharts/-/apexcharts-3.44.0.tgz", @@ -25770,6 +25801,11 @@ "resolved": "https://registry.npmjs.org/cjs-module-lexer/-/cjs-module-lexer-1.2.3.tgz", "integrity": "sha512-0TNiGstbQmCFwt4akjjBg5pLRTSyj/PkWQ1ZoO2zntmg9yLqSRxwEa4iCfQLGjqhiqBfOJa7W/E8wfGrTDmlZQ==" }, + "classlist-polyfill": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/classlist-polyfill/-/classlist-polyfill-1.2.0.tgz", + "integrity": "sha512-GzIjNdcEtH4ieA2S8NmrSxv7DfEV5fmixQeyTmqmRmRJPGpRBaSnA2a0VrCjyT8iW8JjEdMbKzDotAJf+ajgaQ==" + }, "classnames": { "version": "2.3.2", "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz", @@ -30494,6 +30530,11 @@ "resolved": "https://registry.npmjs.org/lodash.sortby/-/lodash.sortby-4.7.0.tgz", "integrity": "sha512-HDWXG8isMntAyRF5vZ7xKuEvOhT4AhlRt/3czTSjvGUxjYCBVRQY48ViDHyfYz9VIoBkW4TMGQNapx+l3RUwdA==" }, + "lodash.throttle": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz", + "integrity": "sha512-wIkUCfVKpVsWo3JSZlc+8MB5it+2AN5W8J7YVMST30UrvcQNZ1Okbj+rbVniijTWE6FGYy4XJq/rHkas8qJMLQ==" + }, "lodash.uniq": { "version": "4.5.0", "resolved": "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz", diff --git a/package.json b/package.json index 37ff0a3..39143da 100644 --- a/package.json +++ b/package.json @@ -12,6 +12,7 @@ "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", "antd": "^5.11.5", + "aos": "^2.3.4", "apexcharts": "^3.44.0", "axios": "^1.6.2", "bootstrap": "^5.3.2", @@ -30,7 +31,7 @@ "react-redux": "^8.1.3", "react-router-dom": "^6.16.0", "react-scripts": "5.0.1", - "react-thermal-printer": "0.18.1", + "react-thermal-printer": "^0.18.1", "recoil": "^0.7.7", "recoil-persist": "^5.1.0", "redux": "^4.2.1", diff --git a/src/assets/icons/Header/header_logo.png b/src/assets/icons/Header/header_logo.png new file mode 100644 index 0000000..a10208f Binary files /dev/null and b/src/assets/icons/Header/header_logo.png differ diff --git a/src/components/views/Header/HeaderOrder/Header.css b/src/components/views/Header/HeaderOrder/Header.css index 2096fcb..8a6b4f1 100644 --- a/src/components/views/Header/HeaderOrder/Header.css +++ b/src/components/views/Header/HeaderOrder/Header.css @@ -1,7 +1,7 @@ .header { width: 100vw; min-width: 64rem; - height: 5.5rem; + height: 6.5rem; background-color: #2e2d2d; } @@ -15,11 +15,18 @@ width: 100vw; /* width: 64rem; */ /* max-width: 64rem; */ - height: 5.5rem; + height: 6.5rem; background-color: #2e2d2d; z-index: 101; } +@media screen and (max-width: 480px) { + .header2{ + border-bottom-left-radius: 20px; + border-bottom-right-radius: 20px; + } +} + .header2-wrapper { display: flex; justify-content: space-between; @@ -33,6 +40,13 @@ justify-content: space-evenly; } + +@media screen and (max-width: 480px) { + .head-container2{ + width: auto; + } +} + .header-img-wrapper { display: flex; align-items: center; @@ -52,8 +66,10 @@ } .LOGO { - width: 19.1875rem; - height: 4rem; + /* width: 19.1875rem; */ + width: 13rem; + /* height: 4rem; */ + height: 2.5rem; } .store-group { @@ -66,11 +82,33 @@ .store-img__wrapper { margin: 0 0.5625rem; + display: flex; + /* align-items: end; */ +} + +.store_img{ + width: 2rem; + height: 2rem; +} + +.store_close_circle.close{ + background-color: #34C759;; +} + +@media screen and (max-width: 480px) { + .header-img-wrapper{ + display: none; + } +} + +.store_font_wrapper{ + display: flex; + align-items: center; } .header-font { color: #fff; - font-size: 1.875rem; + font-size: 1.25rem; font-family: "Pretendard"; font-weight: 600; } @@ -81,3 +119,9 @@ flex-wrap: wrap; justify-content: space-evenly; } + +@media screen and (max-width: 480px) { + .head-container{ + justify-content: space-between; + } +} \ No newline at end of file diff --git a/src/components/views/Header/HeaderOrder/Header2.jsx b/src/components/views/Header/HeaderOrder/Header2.jsx index e1d1005..b9aacb6 100644 --- a/src/components/views/Header/HeaderOrder/Header2.jsx +++ b/src/components/views/Header/HeaderOrder/Header2.jsx @@ -3,9 +3,9 @@ import { useNavigate } from "react-router-dom"; import { useRecoilState } from "recoil"; import { soundState } from "../../../../Atom/status"; import StoreOff from "../../../../assets/icons/Header/CloseLight.svg"; //영업종료 -import LOGO from "../../../../assets/icons/Header/LOGO.svg"; //로고 import SoundOff from "../../../../assets/icons/Header/SoundOff.svg"; //소리끔 import SoundOn from "../../../../assets/icons/Header/SoundOn.svg"; //소리켬 +import LOGO from "../../../../assets/icons/Header/header_logo.png"; //로고 import "./Header.css"; const Header = () => { @@ -59,9 +59,11 @@ const Header = () => { ) : ( */}
- Close + Close +
+
+
영업종료
-
영업종료
{/* )} */} {sound ? ( diff --git a/src/components/views/Home/OrderBox.jsx b/src/components/views/Home/OrderBox.jsx index 9e12b22..fa5a295 100644 --- a/src/components/views/Home/OrderBox.jsx +++ b/src/components/views/Home/OrderBox.jsx @@ -6,8 +6,8 @@ export default function OrderBox ({ id, category, menu, clicked }) { return( {id} - {category} - + {category} + {menuLen > 1 ? `${menu[0].name} 외 ${menuLen - 1}건` : menu[0].name} @@ -16,11 +16,12 @@ export default function OrderBox ({ id, category, menu, clicked }) { const OrderBoxContainer = styled.div` width: 100%; - height: 50px; + height: 3.75rem; line-height: 50px; // border-top: 0.5px solid ${theme.colors.text}; border-bottom: 1px solid ${theme.colors.text}; display: flex; + align-items: center; background-color: ${(props) => props.clicked && theme.colors.clickColor}; `; @@ -29,11 +30,11 @@ const OrderBoxSpan = styled.span` color: ${theme.colors.title}; width: ${(props) => props.width}; ${(props) => props.size === "big" ? css` - font-size: 1rem; + font-size: 1.1rem; font-family: "Pretendard"; font-weight: 800; ` : css` - font-size: 0.8rem; + font-size: 0.9rem; font-family: "Pretendard"; font-weight: 600; `} diff --git a/src/components/views/Home/OrderContainer.jsx b/src/components/views/Home/OrderContainer.jsx index 9a3d838..ef05288 100644 --- a/src/components/views/Home/OrderContainer.jsx +++ b/src/components/views/Home/OrderContainer.jsx @@ -1,6 +1,8 @@ import React, { useContext } from "react"; import styled from "styled-components"; -// import useFetchWaitInfo from "../../../hooks/useFetchWaitInfo"; +import useFetchCompleteInfo from "../../../hooks/useFetchCompleteInfo"; +import useFetchMakeInfo from "../../../hooks/useFetchMakeInfo"; +import useFetchWaitInfo from "../../../hooks/useFetchWaitInfo"; import { HomeContext } from "../../../pages/OrderManage/Home"; import theme from "../../../style/theme/theme"; import OrderBox from "./OrderBox"; @@ -8,8 +10,12 @@ import OrderBox from "./OrderBox"; export default function OrderContainer () { const context = useContext(HomeContext); - // const waitInfo = useFetchWaitInfo(); - // console.log(waitInfo); + const waitInfo = useFetchWaitInfo(); + const makeInfo = useFetchMakeInfo(); + const completeInfo = useFetchCompleteInfo(); + console.log(waitInfo); + console.log(makeInfo); + console.log(completeInfo); const waitDummyInfo = { @@ -224,38 +230,41 @@ export default function OrderContainer () { {context.status === 1 ? ( <> - 신규 {waitDummyInfo.orders.length}건 - { - waitDummyInfo.orders.map((item) => ( - handleWaitOrderMenu(item.idx)}> - - - )) - } - - 진행 {makeDummyInfo.orders.length}건 - { - makeDummyInfo.orders.map((item) => ( - handleMakeOrderMenu(item.idx)}> - - - )) - } + + 신규 {waitDummyInfo?.orders?.length}건 + { + waitDummyInfo?.orders?.map((item) => ( + handleWaitOrderMenu(item.idx)}> + + + )) + } + + + 진행 {makeDummyInfo?.orders?.length}건 + { + makeDummyInfo?.orders?.map((item) => ( + handleMakeOrderMenu(item.idx)}> + + + )) + } + ) : ( <> { - completeDummyInfo.orders.map((item) => ( + completeDummyInfo?.orders?.map((item) => ( handleCompleteOrderMenu(item.idx)}> { - console.log(e); + setModalIdx(0); // const config = { // withCredentials: true, // }; @@ -62,7 +62,7 @@ export default function ReceiptBox ({children, modalIdx, setModalIdx}) { }; const handleMake = async (e) => { - console.log(e); + setModalIdx(0); // const config = { // withCredentials: true, // }; diff --git a/src/pages/OrderManage/Home.css b/src/pages/OrderManage/Home.css index 9d1b164..e188784 100644 --- a/src/pages/OrderManage/Home.css +++ b/src/pages/OrderManage/Home.css @@ -1,9 +1,9 @@ .home-wrapper { display: flex; position: absolute; - top: 5.5rem; + top: 6.5rem; width: 100vw; - height: calc(100vh - 5.5rem); + height: calc(100vh - 6.5rem); /* height: 100vh; */ } @@ -14,6 +14,10 @@ padding: 3vh 0; } +@media screen and (max-width: 480px) { + .Main-Box{height: 100%;} +} + .status-header { border-bottom: 8px solid #d82356; padding-top: 1.625rem; diff --git a/src/pages/OrderManage/Home.jsx b/src/pages/OrderManage/Home.jsx index 7aeca2f..92d62b7 100644 --- a/src/pages/OrderManage/Home.jsx +++ b/src/pages/OrderManage/Home.jsx @@ -61,9 +61,13 @@ function Home({ defaultValue, defaultStatus, defaultMenu, children }) { const Container = styled.div` display: flex; position: absolute; - top: 5.5rem; + top: 6.5rem; width: 100vw; - height: calc(100vh - 5.5rem); + height: calc(100vh - 6.5rem); + + @media only screen and (max-width: 480px) { + flex-direction: column; + } `; Home.MainHome = MainHome; diff --git a/src/pages/OrderManage/Receipt.css b/src/pages/OrderManage/Receipt.css index 28df925..e3298b6 100644 --- a/src/pages/OrderManage/Receipt.css +++ b/src/pages/OrderManage/Receipt.css @@ -33,6 +33,26 @@ display: none; } + +@media screen and (max-width: 480px) { + .Box{ + /* display: none; */ + width: 100%; + height: calc(100vh - 6.5rem); + position: absolute; + top: 0; + left: 0; + padding: 0; + } + .Box.nonDisplay { + display: none; + } + .rounded-rectangle{ + border-radius: 0; + box-shadow: none; + } +} + .receiptWrapper{ width: 100%; height: 100%; @@ -164,11 +184,11 @@ .modal-wrapper { position: absolute; top: 3vh; - left: 50.7%; + left: 0; /* min-width: 22.125rem; height: 41.25rem; */ - width: 49.3%; + width: 100%; height: calc(100% - 6vh); background-color: rgba(0, 0, 0, 0.5); border-radius: 1.875rem; @@ -176,6 +196,20 @@ display: flex; } +@media screen and (max-width: 480px) { + .modal-wrapper{ + /* display: none; */ + width: 100%; + height: calc(100vh - 6.5rem); + position: absolute; + top: 0; + left: 0; + background-color: rgba(0, 0, 0, 0.5); + + display: flex; + } +} + .modal-box { position: absolute; /* top: 10.45rem; */ @@ -187,6 +221,7 @@ border-radius: 1.875rem; z-index: 101; padding: 2.0625rem 3.25rem; + overflow-y: auto; } .modal-close__wrapper { @@ -198,7 +233,7 @@ display: flex; flex-direction: column; justify-content: center; - height: 25%; + height: 20%; } .modal-box-txt { diff --git a/src/pages/OrderManage/Receipt.jsx b/src/pages/OrderManage/Receipt.jsx index 96bb3f2..a8c681a 100644 --- a/src/pages/OrderManage/Receipt.jsx +++ b/src/pages/OrderManage/Receipt.jsx @@ -1,18 +1,26 @@ -import React, { useState } from "react"; +import AOS from "aos"; +import "aos/dist/aos.css"; +import React, { useContext, useEffect, useState } from "react"; import styled from "styled-components"; import ReceiptBox from "../../components/views/Home/ReciptBox"; import theme from "../../style/theme/theme"; +import { HomeContext } from "./Home"; import "./Receipt.css"; const Receipt = () => { const orderProps = { status: 1, }; + const context = useContext(HomeContext); const [modalIdx, setModalIdx] = useState(0); + useEffect(() => { + AOS.init(); + }) + return ( -
+
{orderProps.status === 1 ? ( diff --git a/src/utils/Auth.jsx b/src/utils/Auth.jsx index 7be23fb..525aaaf 100644 --- a/src/utils/Auth.jsx +++ b/src/utils/Auth.jsx @@ -14,7 +14,6 @@ export default function (SpecificComponent, option, adminRoute = null) { const [isCeo, setIsCeo] = useRecoilState(ceoState); useEffect(() => { - console.log("!"); function fetchAuth() { commonApis.get("/auth", { headers: { diff --git a/yarn.lock b/yarn.lock index c4e294f..dd685cb 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3409,6 +3409,15 @@ anymatch@^3.0.3, anymatch@~3.1.2: normalize-path "^3.0.0" picomatch "^2.0.4" +aos@^2.3.4: + version "2.3.4" + resolved "https://registry.npmjs.org/aos/-/aos-2.3.4.tgz" + integrity sha512-zh/ahtR2yME4I51z8IttIt4lC1Nw0ktsFtmeDzID1m9naJnWXhCoARaCgNOGXb5CLy3zm+wqmRAEgMYB5E2HUw== + dependencies: + classlist-polyfill "^1.0.3" + lodash.debounce "^4.0.6" + lodash.throttle "^4.0.1" + apexcharts@^3.41.0, apexcharts@^3.44.0: version "3.44.0" resolved "https://registry.npmjs.org/apexcharts/-/apexcharts-3.44.0.tgz" @@ -4075,6 +4084,11 @@ cjs-module-lexer@^1.0.0: resolved "https://registry.npmjs.org/cjs-module-lexer/-/cjs-module-lexer-1.2.3.tgz" integrity sha512-0TNiGstbQmCFwt4akjjBg5pLRTSyj/PkWQ1ZoO2zntmg9yLqSRxwEa4iCfQLGjqhiqBfOJa7W/E8wfGrTDmlZQ== +classlist-polyfill@^1.0.3: + version "1.2.0" + resolved "https://registry.npmjs.org/classlist-polyfill/-/classlist-polyfill-1.2.0.tgz" + integrity sha512-GzIjNdcEtH4ieA2S8NmrSxv7DfEV5fmixQeyTmqmRmRJPGpRBaSnA2a0VrCjyT8iW8JjEdMbKzDotAJf+ajgaQ== + classnames@^2.2.1, classnames@^2.2.3, classnames@^2.2.5, classnames@^2.2.6, classnames@^2.3.1, classnames@^2.3.2, classnames@2.x: version "2.3.2" resolved "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz" @@ -5874,11 +5888,6 @@ fs.realpath@^1.0.0: resolved "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz" integrity sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw== -fsevents@^2.3.2, fsevents@~2.3.2: - version "2.3.3" - resolved "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz" - integrity sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw== - function-bind@^1.1.1: version "1.1.1" resolved "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz" @@ -7531,7 +7540,7 @@ locate-path@^6.0.0: dependencies: p-locate "^5.0.0" -lodash.debounce@^4.0.8: +lodash.debounce@^4.0.6, lodash.debounce@^4.0.8: version "4.0.8" resolved "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz" integrity sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow== @@ -7561,6 +7570,11 @@ lodash.sortby@^4.7.0: resolved "https://registry.npmjs.org/lodash.sortby/-/lodash.sortby-4.7.0.tgz" integrity sha512-HDWXG8isMntAyRF5vZ7xKuEvOhT4AhlRt/3czTSjvGUxjYCBVRQY48ViDHyfYz9VIoBkW4TMGQNapx+l3RUwdA== +lodash.throttle@^4.0.1: + version "4.1.1" + resolved "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz" + integrity sha512-wIkUCfVKpVsWo3JSZlc+8MB5it+2AN5W8J7YVMST30UrvcQNZ1Okbj+rbVniijTWE6FGYy4XJq/rHkas8qJMLQ== + lodash.uniq@^4.5.0: version "4.5.0" resolved "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz" @@ -9520,7 +9534,7 @@ react-scripts@5.0.1: optionalDependencies: fsevents "^2.3.2" -react-thermal-printer@0.18.1: +react-thermal-printer@^0.18.1: version "0.18.1" resolved "https://registry.npmjs.org/react-thermal-printer/-/react-thermal-printer-0.18.1.tgz" integrity sha512-5ibDqPYtQhlPRVhv+aNjO2RCjxwfGG30BkH95pEUnzq62RrfZkM2hMfbelnS+PbxA6IotaaZqwsqWD0mx++mtQ==