diff --git a/index.html b/index.html index 78629bf..9826ee6 100644 --- a/index.html +++ b/index.html @@ -1,19 +1,17 @@ + + + - - - + - + PetEats + - draft | PetEats - + +
- -
- - - - - \ No newline at end of file + + + diff --git a/package-lock.json b/package-lock.json index e3fdd1e..14a3fdb 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,13 +12,17 @@ "@emotion/styled": "^11.10.4", "@mui/icons-material": "^5.10.3", "@tanem/react-nprogress": "^5.0.13", + "aos": "^2.3.4", "axios": "^0.27.2", + "leaflet": "^1.9.4", + "leaflet-control-geocoder": "^2.4.0", "prop-types": "^15.8.1", "react": "^17.0.2", "react-dom": "^17.0.2", "react-router-dom": "^6.3.0", "react-spinners": "^0.13.4", "react-toastify": "^9.0.8", + "taos": "^1.0.3", "vite": "^2.7.2" }, "devDependencies": { @@ -1239,6 +1243,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/arg": { "version": "5.0.2", "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz", @@ -1571,6 +1585,11 @@ "node": ">= 6" } }, + "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/clsx": { "version": "1.2.1", "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz", @@ -3541,6 +3560,22 @@ "language-subtag-registry": "~0.3.2" } }, + "node_modules/leaflet": { + "version": "1.9.4", + "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.9.4.tgz", + "integrity": "sha512-nxS1ynzJOmOlHp+iL3FyWqK89GtNL8U8rvlMOsQdTTssxZwCXh8N2NB3GDQOL+YR3XnWyZAxwQixURb+FA74PA==" + }, + "node_modules/leaflet-control-geocoder": { + "version": "2.4.0", + "resolved": "https://registry.npmjs.org/leaflet-control-geocoder/-/leaflet-control-geocoder-2.4.0.tgz", + "integrity": "sha512-b2QlxuFd40uIDbnoUI3U9fzfnB4yKUYlmsXjquJ2d2YjoJqnyVYcIJeErAVv3kPvX3nI0gzvBq1XHMgSVFrGkQ==", + "optionalDependencies": { + "open-location-code": "^1.0.0" + }, + "peerDependencies": { + "leaflet": "^1.6.0" + } + }, "node_modules/levn": { "version": "0.4.1", "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz", @@ -3583,12 +3618,22 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/lodash.debounce": { + "version": "4.0.8", + "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz", + "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==" + }, "node_modules/lodash.merge": { "version": "4.6.2", "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz", "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==", "dev": true }, + "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/loose-envify": { "version": "1.4.0", "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz", @@ -3828,6 +3873,12 @@ "wrappy": "1" } }, + "node_modules/open-location-code": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/open-location-code/-/open-location-code-1.0.3.tgz", + "integrity": "sha512-DBm14BSn40Ee241n80zIFXIT6+y8Tb0I+jTdosLJ8Sidvr2qONvymwqymVbHV2nS+1gkDZ5eTNpnOIVV0Kn2fw==", + "optional": true + }, "node_modules/optionator": { "version": "0.9.1", "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.1.tgz", @@ -4645,6 +4696,11 @@ "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", "dev": true }, + "node_modules/taos": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/taos/-/taos-1.0.3.tgz", + "integrity": "sha512-+XerePzOoIBCPOFdUok7raniqXHZevaBDEv7y2Zi1RkDe7L/EmRzXuH0ufomP4d0VTJQIsn/Ow0hBItjOcQI0A==" + }, "node_modules/text-table": { "version": "0.2.0", "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz", @@ -5750,6 +5806,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" + } + }, "arg": { "version": "5.0.2", "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz", @@ -5976,6 +6042,11 @@ } } }, + "classlist-polyfill": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/classlist-polyfill/-/classlist-polyfill-1.2.0.tgz", + "integrity": "sha512-GzIjNdcEtH4ieA2S8NmrSxv7DfEV5fmixQeyTmqmRmRJPGpRBaSnA2a0VrCjyT8iW8JjEdMbKzDotAJf+ajgaQ==" + }, "clsx": { "version": "1.2.1", "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz", @@ -7341,6 +7412,19 @@ "language-subtag-registry": "~0.3.2" } }, + "leaflet": { + "version": "1.9.4", + "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.9.4.tgz", + "integrity": "sha512-nxS1ynzJOmOlHp+iL3FyWqK89GtNL8U8rvlMOsQdTTssxZwCXh8N2NB3GDQOL+YR3XnWyZAxwQixURb+FA74PA==" + }, + "leaflet-control-geocoder": { + "version": "2.4.0", + "resolved": "https://registry.npmjs.org/leaflet-control-geocoder/-/leaflet-control-geocoder-2.4.0.tgz", + "integrity": "sha512-b2QlxuFd40uIDbnoUI3U9fzfnB4yKUYlmsXjquJ2d2YjoJqnyVYcIJeErAVv3kPvX3nI0gzvBq1XHMgSVFrGkQ==", + "requires": { + "open-location-code": "^1.0.0" + } + }, "levn": { "version": "0.4.1", "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz", @@ -7371,12 +7455,22 @@ "p-locate": "^5.0.0" } }, + "lodash.debounce": { + "version": "4.0.8", + "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz", + "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==" + }, "lodash.merge": { "version": "4.6.2", "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz", "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==", "dev": true }, + "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==" + }, "loose-envify": { "version": "1.4.0", "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz", @@ -7550,6 +7644,12 @@ "wrappy": "1" } }, + "open-location-code": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/open-location-code/-/open-location-code-1.0.3.tgz", + "integrity": "sha512-DBm14BSn40Ee241n80zIFXIT6+y8Tb0I+jTdosLJ8Sidvr2qONvymwqymVbHV2nS+1gkDZ5eTNpnOIVV0Kn2fw==", + "optional": true + }, "optionator": { "version": "0.9.1", "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.1.tgz", @@ -8087,6 +8187,11 @@ } } }, + "taos": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/taos/-/taos-1.0.3.tgz", + "integrity": "sha512-+XerePzOoIBCPOFdUok7raniqXHZevaBDEv7y2Zi1RkDe7L/EmRzXuH0ufomP4d0VTJQIsn/Ow0hBItjOcQI0A==" + }, "text-table": { "version": "0.2.0", "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz", diff --git a/package.json b/package.json index 1e09c09..e786968 100644 --- a/package.json +++ b/package.json @@ -7,18 +7,22 @@ "preview": "vite preview" }, "dependencies": { + "@emotion/react": "^11.10.4", + "@emotion/styled": "^11.10.4", + "@mui/icons-material": "^5.10.3", + "@tanem/react-nprogress": "^5.0.13", + "aos": "^2.3.4", "axios": "^0.27.2", - "vite": "^2.7.2", + "leaflet": "^1.9.4", + "leaflet-control-geocoder": "^2.4.0", + "prop-types": "^15.8.1", "react": "^17.0.2", "react-dom": "^17.0.2", - "prop-types": "^15.8.1", "react-router-dom": "^6.3.0", - "react-toastify": "^9.0.8", "react-spinners": "^0.13.4", - "@tanem/react-nprogress": "^5.0.13", - "@emotion/react": "^11.10.4", - "@emotion/styled": "^11.10.4", - "@mui/icons-material": "^5.10.3" + "react-toastify": "^9.0.8", + "taos": "^1.0.3", + "vite": "^2.7.2" }, "devDependencies": { "@vitejs/plugin-react": "^1.0.7", @@ -33,4 +37,4 @@ "vitawind": "^2.0.0", "vite": "^2.7.2" } -} \ No newline at end of file +} diff --git a/peteats.txt b/peteats.txt new file mode 100644 index 0000000..8b6f96f --- /dev/null +++ b/peteats.txt @@ -0,0 +1,48 @@ +.______ _______ .___________. _______ ___ .___________. _______. +| _ \ | ____|| || ____| / \ | | / | +| |_) | | |__ `---| |----`| |__ / ^ \ `---| |----` | (----` +| ___/ | __| | | | __| / /_\ \ | | \ \ +| | | |____ | | | |____ / _____ \ | | .----) | +| _| |_______| |__| |_______/__/ \__\ |__| |_______/ + + +ASCII generated by http://www.network-science.de/ascii/ + +恭喜你找到這份文件！ (ﾉ◕ヮ◕)ﾉ*:・ﾟ✧ +底下是本站背後的團隊以及使用的技術 +如果有任何的疑問，還請不吝與我們聯絡 +感謝觀賞 <(_ _)> + +─────────────────────────────────────────────────────────────────────── + +/* TEAM */ + Aya (Front-End Developer) + GitHub: https://github.com/Aya-X + Mail: ayaxong@gmail.com + + Chiaoan (Back-End Developer) + GitHub: https://github.com/oriku0322 + Mail: yuuya82323@gmail.com + + + +/* SUPPORT */ + + Poka (UI Designer) + Site: https://53artwokerstudio.github.io/Hsiao-Yong-Ling-s-Profile + Mail: 53artworkerstudio@gmail.com + + + Justin (Coach) + Site: https://rocketcamp.kktix.cc + + + + 廖洧杰 (Coach) + GitHub: https://github.com/gonsakon + + + +/* SITE */ + Technology: React, React Router, Vite, + Source code: https://github.com/rockets-coding/project-peteats-2022 diff --git a/src/App.jsx b/src/App.jsx index 7d8af3c..5e0ed66 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -25,6 +25,7 @@ function App() { pauseOnFocusLoss draggable pauseOnHover + theme="dark" /> ); diff --git a/src/components/AreaItem.jsx b/src/components/AreaItem.jsx index f3be6a1..804df36 100644 --- a/src/components/AreaItem.jsx +++ b/src/components/AreaItem.jsx @@ -11,6 +11,12 @@ function AreaItem({ item, pageType }) { // #REVIEW: something weird const isPageHome = pageType === 'HOME'; + // const handleScroll = (e) => { + // if (e.scrollToTarget) { + // e.scrollToTarget(); + // } + // }; + if (!item) { return

LOADING...

; } @@ -23,6 +29,7 @@ function AreaItem({ item, pageType }) {
  • {/* /shops/city/:id */} @@ -30,9 +37,9 @@ function AreaItem({ item, pageType }) { {/* #NOTE: setting the height and weight to shows `Square` */} {CityName @@ -52,14 +59,14 @@ function AreaItem({ item, pageType }) { /* end of style-Large */
  • - + {CityName diff --git a/src/components/AreaList.jsx b/src/components/AreaList.jsx index 142a264..08b7ebe 100644 --- a/src/components/AreaList.jsx +++ b/src/components/AreaList.jsx @@ -13,10 +13,10 @@ function AreaList({ pageType }) { useEffect(() => { if (!areaData) { apiHelper.getShopCity().then((res) => { - console.log(res); + // console.log(res); if (res?.data?.Status) { - console.log('getShopCity:::', res?.data); + // console.log('getShopCity:::', res?.data); const { Message } = res.data; // console.log(Message[0]); diff --git a/src/components/CategoryList.jsx b/src/components/CategoryList.jsx index 60a9599..5b03829 100644 --- a/src/components/CategoryList.jsx +++ b/src/components/CategoryList.jsx @@ -51,10 +51,10 @@ function CategoryList({ pageType }) { useEffect(() => { if (!cateData.length) { apiHelper.getShopTag().then((res) => { - console.log(res); + // console.log(res); if (res?.data?.Status) { - console.log('getShopTag:::', res?.data?.Data); + // console.log('getShopTag:::', res?.data?.Data); const { Data } = res.data; if (!isFetch) { diff --git a/src/components/CustomAsyncSelect.jsx b/src/components/CustomAsyncSelect.jsx index 692a3e1..60ad877 100644 --- a/src/components/CustomAsyncSelect.jsx +++ b/src/components/CustomAsyncSelect.jsx @@ -3,6 +3,8 @@ import React, { useEffect, useState } from 'react'; import TextField from '@mui/material/TextField'; import Autocomplete from '@mui/material/Autocomplete'; import CircularProgress from '@mui/material/CircularProgress'; +import InputAdornment from '@mui/material/InputAdornment'; +import SearchIcon from '@mui/icons-material/Search'; function sleep(delay = 0) { return new Promise((resolve) => { @@ -45,7 +47,32 @@ function CustomAsyncSelect({ data }) { return ( theme.palette.getContrastText(theme.palette.background.paper), + }, + }} + // disable the default icon + forcePopupIcon={false} + // popupIcon={() => { + // }} open={open} onOpen={() => { setOpen(true); @@ -59,23 +86,58 @@ function CustomAsyncSelect({ data }) { loading={loading} // JSX-Render renderInput={(params) => ( - - {loading ? ( - - ) : null} - {params.InputProps.endAdornment} - - ), - }} - /> + <> + {/*
    + +
    */} + + + + + ), + endAdornment: ( + <> + {loading ? ( + + ) : null} + {params.InputProps.endAdornment} + + ), + }} + /> + )} + // end of renderInput /> ); } diff --git a/src/components/LayoutFooter.jsx b/src/components/LayoutFooter.jsx index cde6867..399e00d 100644 --- a/src/components/LayoutFooter.jsx +++ b/src/components/LayoutFooter.jsx @@ -1,46 +1,157 @@ -import React from 'react'; +import React, { useEffect } from 'react'; import { Link } from 'react-router-dom'; +import AOS from 'aos'; +import 'aos/dist/aos.css'; + +import GitHubIcon from '@mui/icons-material/GitHub'; +import DesignServices from '@mui/icons-material/DesignServices'; +import ApiIcon from '@mui/icons-material/Api'; + +import FavoriteIcon from '@mui/icons-material/Favorite'; + import LogoLight from '../images/logo-light.png'; +// import GitHubIcon from '../images/icon-github.svg'; +// import FigmaIcon from '../images/icon-figma.png'; +import FigmaIcon from '../images/figma-edited.png'; +import RocketIcon from '../images/rocketcamp_edited-removebg-preview.png'; function LayoutFooter() { + useEffect(() => { + AOS.init(); + }, []); + return (
    -
    +
    PetEats-Logo

    - Copyright © 2022 Pet Eats 配食舖 + Copyright © + + 2022 Pet Eats 配食舖 +

    {/* end of footer-Logo */} -
      -
    • +
      +
        + {/*
      • 關於我們 -
        • + */} -
      • - - 隱私政策 - -
        • +
      • + window.location.assign( + 'http://orid.rocket-coding.com/index.html', + )} + > + {/* 隱私政策 */} + {/* */} + RocketIcon + +
        • -
      • - - 意見回饋 +
      • + window.location.assign( + 'https://peteats.rocket-coding.com/swagger', + )} + // onClick={() => window.location.assign( + // 'https://peteats.rocket-coding.com/swagger/index.html?url=/swagger/v1/swagger.json', + // )} + > + {/* 意見回饋 */} + + +
        • + +
      • + window.location.assign( + 'https://www.figma.com/file/3VZWUjlZisosNjEzdWktz6/Pet-Eats', + )} + > + {/* 隱私政策 */} + {/* */} + FigmaIcon + +
        • + +
      • + {/* */} + window.location.assign( + 'https://github.com/peteats/peteats.github.io', + )} + > + + {/* GitHubIcon */} + +
        • +
      + + {/* text-[#212529] */} + + Made with + {' '} + window.location.assign('https://peteats.github.io/peteats.txt')} + > + -
      • -
    + {' '} + by PetEats. + +
    {/* end of container */}
    diff --git a/src/components/LayoutNavbar.jsx b/src/components/LayoutNavbar.jsx index dcf006f..9ec8850 100644 --- a/src/components/LayoutNavbar.jsx +++ b/src/components/LayoutNavbar.jsx @@ -1,22 +1,49 @@ -import React, { useState } from 'react'; -import { Link } from 'react-router-dom'; +import React, { useEffect, useState } from 'react'; +import { Link, useNavigate } from 'react-router-dom'; + +import MenuIcon from '@mui/icons-material/Menu'; +import PersonIcon from '@mui/icons-material/Person'; +import ShoppingCartOutlinedIcon from '@mui/icons-material/ShoppingCartOutlined'; +import LogoutIcon from '@mui/icons-material/Logout'; + +import apiHelper from '../utils/helpers'; import Logo from '../images/logo-peteats.png'; -function LayoutNavbar() { - const [open, setOpen] = useState(false); +function LayoutNavbar({ token }) { + const navigate = useNavigate(); + const [open, setOpen] = useState(true); + + useEffect(() => { + // #FIXME: missing Navbar on PC + if (open && document.documentElement.scrollWidth < 768) { + setTimeout(() => { + // console.log( + // 'document.documentElement.scrollWidth', + // document.documentElement.scrollWidth, + // ); + // console.log('window.scrollY',window.scrollY ); + // console.log('TOGGLE'); + setOpen(false); + }, 1300); + } + /* end of IF(TRUE) */ + }, [open]); + + // border-b border-gray-200 shadow-lg return (
    • + ))} + + + + ); +} + function MenuOptionList({ itemId, onClickItem }) { // const { itemId } = useParams(); // #TODO: WIP @@ -20,14 +84,14 @@ function MenuOptionList({ itemId, onClickItem }) { let isFetch = false; apiHelper.getMenuItem(itemId).then((res) => { - console.log(res); + // console.log(res); if (res?.data?.Status) { - console.log('getMenuItem:::', res?.data); + // console.log('getMenuItem:::', res?.data); const { Data, DetailList } = res.data; - console.log(DetailList[0]); - console.log(Data.ProductName); + // console.log(DetailList[0]); + // console.log(Data.ProductName); if (!isFetch) { setOptionData(DetailList); @@ -54,35 +118,16 @@ function MenuOptionList({ itemId, onClickItem }) { return ( <> -
    -
    -

    {itemData.ProductName}

    - -

    {`${itemData.Price} 元`}

    -
    + {itemData?.ProductContent} -

    商品選項

    +
    +

    商品選項

    {/* */} @@ -103,7 +148,7 @@ function MenuModalContent({ item, shopId }) { const navigate = useNavigate(); const { - Id, Price, ProductName, imageUrl, + Id, Price, ProductName, imageUrl, ProductContent, } = item; // const [state, dispatch] = useReducer(counterReducer, { count: 1 }); @@ -113,16 +158,15 @@ function MenuModalContent({ item, shopId }) { const thisMsg = useInput(''); - const onClickItem = (optionItemId) => { - console.log('optionItemId:::', optionItemId); - console.log('shopId:::', shopId); - return setClickOptionId(optionItemId); - }; + const onClickItem = (optionItemId) => + // console.log('optionItemId:::', optionItemId); + // console.log('shopId:::', shopId); + setClickOptionId(optionItemId); /* end of onClickItem() */ return (
    - 
    +      
             shopId:::
         {shopId}
         
@@ -138,6 +182,7 @@ function MenuModalContent({ item, shopId }) {
             src={imageUrl}
             alt={ProductName}
             className="h-full w-full rounded-2xl object-cover object-center"
+            // #FIXME:
           />
         ) : (
           {ProductName}
 
             
    {`${Price} 元`}
    
+            {/* 
    {ProductContent}
     */}
           
         ) : (
           
@@ -165,7 +211,7 @@ function MenuModalContent({ item, shopId }) {
 
         {Id ? (
           <>
-            
    商品選項
    
+            {/* 
    商品選項
     */}
             {/* // #TODO: WIP */}
             
           
@@ -230,10 +276,11 @@ function MenuModalContent({ item, shopId }) {
                   dispatch({ type: 'minus' });
                 }}
               >
-                -
+                {/* - */}
+                
               
 
-              
    {state.count}
    
+              
    {state.count}
    
 
               
             
 
@@ -252,7 +300,7 @@ function MenuModalContent({ item, shopId }) {
                 !clickOptionId
                   ? 'cursor-not-allowed bg-gray-400'
                   : 'bg-[#333] hover:bg-[#DB8C8C]'
-              }  m-2 block w-4/5 rounded  px-4 py-1 text-center text-white `}
+              }  m-2 block w-4/5 rounded  px-4 py-2 text-center text-white `}
               // onClick={closeToast}
               onClick={() => {
                 // const optionId = 8;
@@ -262,10 +310,10 @@ function MenuModalContent({ item, shopId }) {
                 return apiHelper
                   .addItemToCart({ clickOptionId, msg, amount })
                   .then((res) => {
-                    console.log(res);
+                    // console.log(res);
 
                     if (res?.data?.Status) {
-                      console.log('addItemToCart:::', res?.data);
+                      // console.log('addItemToCart:::', res?.data);
 
                       // #TODO: Toast-ID
                       // closeToast();
@@ -281,7 +329,7 @@ function MenuModalContent({ item, shopId }) {
                   });
               }}
             >
-              CART
+              加入購物車
             
           
         ) : (
diff --git a/src/components/SectionShopInfo.jsx b/src/components/SectionShopInfo.jsx
index 03b29b8..728814e 100644
--- a/src/components/SectionShopInfo.jsx
+++ b/src/components/SectionShopInfo.jsx
@@ -1,6 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
+import { Rating } from '@mui/material';
+import StarIcon from '@mui/icons-material/Star';
+
 function SectionShopInfo({ data }) {
   const { Message } = data;
   // #REVIEW"
@@ -65,7 +68,19 @@ function SectionShopInfo({ data }) {
               
  • 
                 
    
                   {/* #TODO: */}
-                  {EvaluateStars}
+                  {/*  */}
+
+                  
+                    }
+                  />
+
+                  {/* {EvaluateStars} */}
                 
    
               
    • 
             
diff --git a/src/components/ShopList.jsx b/src/components/ShopList.jsx
index 1cfc05f..4e568b3 100644
--- a/src/components/ShopList.jsx
+++ b/src/components/ShopList.jsx
@@ -35,13 +35,13 @@ function ShopList({ queryType, queryId }) {
   useEffect(() => {
     if (queryType === 'TAG') {
       apiHelper.getShopsByTag(queryId).then((res) => {
-        console.log(res);
+        // console.log(res);
 
         if (res?.data?.Status) {
-          console.log('getShopsByTag:::', res?.data);
+          // console.log('getShopsByTag:::', res?.data);
 
           const { data } = res.data;
-          console.log(data[0]);
+          // console.log(data[0]);
           setShopsData(data);
         }
       });
@@ -49,13 +49,13 @@ function ShopList({ queryType, queryId }) {
 
     if (queryType === 'CITY') {
       apiHelper.getShopsByCity(queryId).then((res) => {
-        console.log(res);
+        // console.log(res);
 
         if (res?.data?.Status) {
-          console.log('getShopsByCity:::', res?.data);
+          // console.log('getShopsByCity:::', res?.data);
 
           const { Data } = res.data;
-          console.log(Data[0]);
+          // console.log(Data[0]);
           setShopsData(Data);
         }
       });
@@ -63,13 +63,13 @@ function ShopList({ queryType, queryId }) {
 
     if (queryType === 'HOT') {
       apiHelper.getShopsHot().then((res) => {
-        console.log(res);
+        // console.log(res);
 
         if (res?.data?.Status) {
-          console.log('getShopsHot:::', res?.data);
+          // console.log('getShopsHot:::', res?.data);
 
           const { Message } = res.data;
-          console.log(Message[0]);
+          // console.log(Message[0]);
           setShopsData(Message);
         }
       });
diff --git a/src/draft/CustomOptionDialog.jsx b/src/draft/CustomOptionDialog.jsx
new file mode 100644
index 0000000..06e0fa9
--- /dev/null
+++ b/src/draft/CustomOptionDialog.jsx
@@ -0,0 +1,158 @@
+import React from 'react';
+
+import TextField from '@mui/material/TextField';
+
+import Dialog from '@mui/material/Dialog';
+import DialogTitle from '@mui/material/DialogTitle';
+import DialogContent from '@mui/material/DialogContent';
+import DialogContentText from '@mui/material/DialogContentText';
+import DialogActions from '@mui/material/DialogActions';
+
+import Button from '@mui/material/Button';
+
+import Autocomplete, { createFilterOptions } from '@mui/material/Autocomplete';
+
+const filter = createFilterOptions();
+
+function CustomOptionDialog({ data }) {
+  // function FreeSoloCreateOptionDialog({ data }) {
+  const [value, setValue] = React.useState(null);
+  const [open, toggleOpen] = React.useState(false);
+
+  const handleClose = () => {
+    setDialogValue({
+      title: '',
+      year: '',
+    });
+
+    toggleOpen(false);
+  };
+
+  const [dialogValue, setDialogValue] = React.useState({
+    title: '',
+    year: '',
+  });
+
+  const handleSubmit = (event) => {
+    event.preventDefault();
+    setValue({
+      title: dialogValue.title,
+      year: parseInt(dialogValue.year, 10),
+    });
+
+    handleClose();
+  };
+
+  return (
+    <>
+       {
+          if (typeof newValue === 'string') {
+            // timeout to avoid instant validation of the dialog's form.
+            setTimeout(() => {
+              toggleOpen(true);
+              setDialogValue({
+                title: newValue,
+                year: '',
+              });
+            });
+          } else if (newValue && newValue.inputValue) {
+            toggleOpen(true);
+            setDialogValue({
+              title: newValue.inputValue,
+              year: '',
+            });
+          } else {
+            setValue(newValue);
+          }
+        }}
+        filterOptions={(options, params) => {
+          const filtered = filter(options, params);
+
+          if (params.inputValue !== '') {
+            filtered.push({
+              inputValue: params.inputValue,
+              title: `Add "${params.inputValue}"`,
+            });
+          }
+
+          return filtered;
+        }}
+        id="free-solo-dialog-demo"
+        options={data}
+        // options={top100Films}
+        getOptionLabel={(option) => {
+          // e.g value selected with enter, right from the input
+          if (typeof option === 'string') {
+            return option;
+          }
+          if (option.inputValue) {
+            return option.inputValue;
+          }
+          return option.title;
+        }}
+        selectOnFocus
+        clearOnBlur
+        handleHomeEndKeys
+        renderOption={(props, option) => 
  • {option.title}
    • }
+        sx={{ width: 300 }}
+        freeSolo
+        renderInput={(params) =>
+        // DOM
+        // console.log('DOM');
+          }
+        // renderInput={(params) => (
+        //   
+        // )}
+      />
+
+      
+        
    
+          Add a new film
+
+          
+            
+              Did you miss any film in our list? Please, add it!
+            
+
+             setDialogValue({
+                ...dialogValue,
+                title: event.target.value,
+              })}
+              label="title"
+              type="text"
+              variant="standard"
+            />
+
+             setDialogValue({
+                ...dialogValue,
+                year: event.target.value,
+              })}
+              label="year"
+              type="number"
+              variant="standard"
+            />
+          
+
+          
+            
+            
+          
+        
    
+          
+    
+  );
+}
+
+// export default FreeSoloCreateOptionDialog;
+export default CustomOptionDialog;
diff --git a/src/draft/CustomSelect.jsx b/src/draft/CustomSelect.jsx
new file mode 100644
index 0000000..164fc75
--- /dev/null
+++ b/src/draft/CustomSelect.jsx
@@ -0,0 +1,50 @@
+import React from 'react';
+
+import Box from '@mui/material/Box';
+import TextField from '@mui/material/TextField';
+import Autocomplete from '@mui/material/Autocomplete';
+
+function CustomSelect({ data }) {
+  return (
+     option.label}
+      renderOption={(props, option) => (
+         img': { mr: 2, flexShrink: 0 } }}
+          {...props}
+        >
+          
+          {option.label}
+          {' '}
+          (
+          {option.code}
+          ) +
+          {option.phone}
+        
+      )}
+      renderInput={(params) => (
+        
+      )}
+    />
+  );
+}
+
+export default CustomSelect;
diff --git a/src/draft/DevDrawer.jsx b/src/draft/DevDrawer.jsx
index e53ed12..3ba6521 100644
--- a/src/draft/DevDrawer.jsx
+++ b/src/draft/DevDrawer.jsx
@@ -90,7 +90,7 @@ function Drawer() {
   // }
 
   const saveToken = ({ JwtToken }) => {
-    console.log('AUTH_TOKEN:::', JwtToken);
+    // console.log('AUTH_TOKEN:::', JwtToken);
     const AUTH_TOKEN = `Bearer ${JwtToken}`;
     // setToken(JwtToken);
     localStorage.setItem('JWT', AUTH_TOKEN);
@@ -141,7 +141,7 @@ function Drawer() {
           
 
           
-          
+
           
           
           
@@ -192,14 +192,14 @@ function Drawer() {
         bg-gray-800/80 p-2 text-center shadow-sm 
         shadow-gray-500/40 `}
         onClick={() => {
-          console.log('LOG-IN');
+          // console.log('LOG-IN');
 
           const data = {
-            Account: 'maord@proton.me',
-            Password: 't8cBTsmY',
+            Account: '',
+            Password: '',
           };
           apiHelper.userLogin(data).then((res) => {
-            console.log(res);
+            // console.log(res);
 
             saveToken(res?.data);
           });
diff --git a/src/draft/DevHome.jsx b/src/draft/DevHome.jsx
index f7c2942..95715ca 100644
--- a/src/draft/DevHome.jsx
+++ b/src/draft/DevHome.jsx
@@ -1,30 +1,86 @@
-import React from 'react';
+import React, { useEffect } from 'react';
+// import React from 'react';
 // import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { useNavigate, useLocation, useMatch } from 'react-router-dom';
 
+import Skeleton from '@mui/material/Skeleton';
+
+import { toast } from 'react-toastify';
+// import Modal from '../components/Modal';
+
+import HomeShops from './backup/HomeShops';
+import HomeIntro from './backup/HomeIntro';
+import HomeArea from './backup/HomeArea';
+import HomeCategory from './backup/HomeCategory';
+import HomeHero from './backup/HomeHero';
 import apiHelper from '../utils/helpers';
 
-import HomeHero from '../components/HomeHero';
-import HomeCategory from '../components/HomeCategory';
-import HomeArea from '../components/HomeArea';
-import HomeIntro from '../components/HomeIntro';
-import HomeShops from '../components/HomeShops';
+function NotifyModal({ children }) {
+  return toast('Custom style', {
+    toastClassName: () => 'relative flex p-1 min-h-20 rounded-md justify-between overflow-hidden cursor-none',
+    bodyClassName: () => 'text-lg font-white font-med block p-3',
+    position: 'bottom-left',
+    autoClose: false,
+    // className: 'black-background',
+    // bodyClassName: 'grow-font-size',
+    // progressClassName: 'fancy-progress-bar',
+  });
+}
 
 function DevBtns() {
+  const ModalTitle = 
    MYtitle
    ;
+
+  const ModalBody = (
+    
  • 
+      
+    
    • 
+  );
+
+  const ModalContent = (
+    
    
+      
    
+        
+      
    
+
+      {/* Modal-Body */}
+      
    
+        
    body
    
+        
    123
    
+      
    
+
+      
    
+        
    123
    
+      
    
+    
    
+  );
+  /* end of JSX-ModalContent */
+
   return (
     
    
       
    
         
+
+      
+
+      {/* 
+        
    123
    
+           */}
+
+      {/*  */}
     
    
   );
 }
 /* end of DevBtns() */
 
 function DevHome() {
+  const navigate = useNavigate();
+  const location = useLocation();
+  const params = new URLSearchParams(location.search);
+  const Guid = params.get('guid')?.toString();
+  const isAuthPath = useMatch('auth-mail');
+  const isResetPath = useMatch('reset-password');
+
+  useEffect(() => {
+    // console.log('isAuth:', isAuthPath);
+
+    if (isAuthPath) {
+      apiHelper.userAuthMail(Guid).then((res) => {
+        // console.log(res);
+        // #TODO:
+        // #FIXME: delay navigate cos too fast
+
+        setTimeout(() => {
+          // console.log('navigate');
+          navigate('/login');
+        }, 5000);
+        /* end of setTimeout() */
+      });
+    }
+
+    if (isResetPath) {
+      // console.log('GUID');
+      alert('!');
+      apiHelper.userResetPassword(Guid).then((res) => {
+        // console.log(res);
+
+        setTimeout(() => {
+          // console.log('navigate');
+          navigate('/login');
+        }, 5000);
+        /* end of setTimeout() */
+      });
+    }
+  }, [location.key]);
+
   return (
     <>
-      {/*  */}
+      
 
       
 
diff --git a/src/draft/DevLogin.jsx b/src/draft/DevLogin.jsx
index 2a9a6c4..72370fa 100644
--- a/src/draft/DevLogin.jsx
+++ b/src/draft/DevLogin.jsx
@@ -1,11 +1,15 @@
-import React from 'react';
+import React, { useState } from 'react';
 
-import { useNavigate } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
 
 import useInput from '../hooks/useInput';
+import useAuth from '../hooks/useAuth';
 import apiHelper from '../utils/helpers';
 
 function DevLogin() {
+  const [isClick, setIsClick] = useState(false);
+  const { token, setToken } = useAuth();
+
   const navigate = useNavigate();
   // const { setToken } = useAuth();
 
@@ -13,16 +17,16 @@ function DevLogin() {
   const password = useInput('');
 
   const saveToken = ({ JwtToken }) => {
-    console.log('AUTH_TOKEN:::', JwtToken);
+    // console.log('AUTH_TOKEN:::', JwtToken);
     const AUTH_TOKEN = `Bearer ${JwtToken}`;
-    // setToken(JwtToken);
+    setToken(AUTH_TOKEN);
     localStorage.setItem('JWT', AUTH_TOKEN);
   };
 
   const submitForm = (event) => {
     event.preventDefault();
-    console.log('email', email.value);
-    console.log('password', password.value);
+    // console.log('email', email.value);
+    // console.log('password', password.value);
 
     const data = {
       Account: email.value,
@@ -32,74 +36,163 @@ function DevLogin() {
     //   Account: 'yuuya82323@gmail.com',
     //   Password: 'Text1234',
     // };
-    console.log('user-input:::', data);
+
+    // {
+    //   Account: 'yuuya82323@gmail.com',
+    //   Password: 'Text1234',
+    // }
+
+    // console.log('user-input:::', data);
 
     apiHelper.userLogin(data).then((res) => {
-      console.log(res);
+      // console.log('userLogin::', res);
       // const { JwtToken } = res?.data ?? null;
       // console.log('JWT::', JwtToken);
-      saveToken(res?.data);
-      navigate('/shops');
+      // #FIXME:
+      // res.data.Status = true;
+
+      if (res?.data?.Status) {
+        saveToken(res?.data);
+
+        navigate('/shops');
+      }
+      /* end of IF(Status) */
     });
     /* end of userLogin() */
   };
 
   return (
-    
    
-      
    LOGIN
    
-
-      
    
-
-      
    
-        
-
-        
-
-        
-
-         {
-            console.log('signup');
-            navigate('/signup');
-          }}
-        />
-      
    
+    
    
+      {!isClick ? (
+        <>
+          
    登入
    
+
+          {/* 
     */}
+
+          
    
+            
+
+            
+
+            
+
+            
+
+             {
+                // console.log('signup');
+                navigate('/signup');
+              }}
+            />
+          
    
+        
+      ) : (
+        <>
+          
    忘記密碼
    
+
+          
+
+          
+        
+      )}
     
    
   );
 }
diff --git a/src/draft/DevMe.jsx b/src/draft/DevMe.jsx
index 08b2490..7261fd4 100644
--- a/src/draft/DevMe.jsx
+++ b/src/draft/DevMe.jsx
@@ -1,15 +1,19 @@
 import React, { useEffect, useState } from 'react';
+import { Link, useNavigate } from 'react-router-dom';
 
 import useInput from '../hooks/useInput';
 import apiHelper from '../utils/helpers';
 
 function DevMe() {
+  const navigate = useNavigate();
+
   const [userData, setUserData] = useState(null);
   const [isEdit, setIsEdit] = useState(false);
 
   const userName = useInput('');
   const phoneNumber = useInput('');
   const address = useInput('');
+  const nickname = useInput('');
 
   const submitForm = (event) => {
     event.preventDefault();
@@ -18,38 +22,71 @@ function DevMe() {
       Name: userName.value,
       MobilePhone: phoneNumber.value,
       Address: address.value,
+      Nickname: nickname.value,
     };
+    // {
+    //   "Name": "string",
+    //   "Nickname": "string",
+    //   "MobilePhone": "string",
+    //   "Address": "string"
+    // }
 
-    console.log('submitForm-', data);
+    // console.log('submitForm-', data);
 
     apiHelper.userEdit(data).then((res) => {
-      console.log(res);
+      // console.log(res);
+
+      if (res?.data?.Status) {
+        // console.log('userEdit:::', res?.data);
+      }
     });
     /* end of userEdit() */
   };
 
   useEffect(() => {
-    apiHelper.userGetInfo().then((res) => {
-      console.log(res);
-      const {
-        data: { userdata: userInfo },
-      } = res;
-
-      console.log('userInfo-', userInfo);
-      setUserData(userInfo);
-
-      const { Name, MobilePhone, Address } = userInfo;
-      userName.setValue(Name);
-      phoneNumber.setValue(MobilePhone);
-      address.setValue(Address);
-    });
-  }, []);
+    let isFetch = false;
+
+    if (!userData) {
+      apiHelper.userGetInfo().then((res) => {
+        // console.log(res);
+
+        if (res?.data?.Status) {
+          // console.log('userGetInfo:::', res?.data);
+
+          const {
+            data: { Userdata: userInfo },
+          } = res;
+          // console.log('userInfo-', userInfo);
+
+          if (!isFetch) {
+            setUserData(userInfo);
+            const {
+              Name, Nickname, MobilePhone, Address,
+            } = userInfo;
+
+            userName.setValue(Name);
+            phoneNumber.setValue(MobilePhone);
+            address.setValue(Address);
+            nickname.setValue(Nickname);
+          }
+          /* end of IF(!isFetch) */
+        }
+      });
+    }
+
+    return () => {
+      isFetch = true;
+      /* end of setTimeout() */
+    };
+  }, [userData]);
 
-  return (
-    
    
-      
    編輯會員資料
    
+  if (!userData) {
+    return 
    LOADING...
    ;
+  }
 
-      
    
+  return (
+    
    
+      
    編輯會員資料
    
 
       
    
         
    
   );
 }
 
diff --git a/src/draft/DevRoutesConfig.jsx b/src/draft/DevRoutesConfig.jsx
new file mode 100644
index 0000000..792bc68
--- /dev/null
+++ b/src/draft/DevRoutesConfig.jsx
@@ -0,0 +1,295 @@
+import React from 'react';
+import { useRoutes } from 'react-router-dom';
+// import { useRoutes, useLocation } from 'react-router-dom';
+
+import LayoutMain from '../pages/LayoutMain';
+import PageHome from '../pages/PageHome';
+
+import RouteNeedAuth from '../pages/RouteNeedAuth';
+import PageShops from '../pages/PageShops';
+import SubShopLayout from '../pages/SubShopLayout';
+import SubShopMenu from '../pages/SubShopMenu';
+import SubShopCart from '../pages/SubShopCart';
+import SubCartLayout from '../pages/SubCartLayout';
+
+import PageNotFound from '../pages/PageNotFound';
+
+// import Modal from '../draft/DraftModal';
+
+// import DevHome from '../draft/DevHome';
+import Draft2 from './Draft2';
+import Draft3 from './Draft3';
+import Draft4 from './Draft4';
+import Draft5 from './Draft5';
+import Draft6 from './Draft6';
+import Draft7 from './Draft7';
+import Draft8 from './Draft8';
+import Draft9 from './Draft9';
+import Draft10 from './Draft10';
+// import DraftShops from '../draft/DraftShops';
+import DraftAreaGrid from './DraftAreaGrid';
+
+import DevPage from './DevPage';
+import DevSignup from './DevSignup';
+import DevLogin from './DevLogin';
+import DevMe from './DevMe';
+import DevSetting from './DevSetting';
+import DevReset from './DevReset';
+// import Redirect from './Redirect';
+import DraftHome from './DraftHome';
+
+function RoutesConfig() {
+  // const location = useLocation();
+  // const background = location.state && location.state.background;
+
+  return useRoutes([
+    {
+      path: '/',
+      element: ,
+
+      children: [
+        {
+          index: true,
+          element: ,
+          // element: ,
+        },
+
+        {
+          path: '/shops',
+          element: ,
+          // element: ,
+          // element: ,
+        },
+        {
+          path: '/shops/tag/:tagId',
+          element: (
+            
+              
+            
+          ),
+          // element: ,
+        },
+        {
+          path: '/shops/city/:cityId',
+          element: (
+            
+              
+            
+          ),
+          // path: '/shops/city/:tagId',
+        },
+        /* end of shops-routes */
+
+        {
+          path: '/shops/:shopId',
+          element: ,
+          //   element: ,
+          //   // element: ,
+          //   // location: background || location,
+          children: [
+            {
+              index: true,
+              element: ,
+            },
+            {
+              path: 'menu/:itemId',
+              // path: 'menu/:itemId/modal',
+              // path: '/shops/:shopId/menu/:itemId',
+              element: ,
+            },
+
+            {
+              path: 'cart',
+              element: ,
+            },
+            {
+              path: 'checkout',
+              element: ,
+            },
+
+            // {
+            //   path: 'cart',
+            //   element: ,
+            //   // element: ,
+            //   children: [
+            //     {
+            //       index: true,
+            //       element: ,
+            //       // element: ,
+            //     },
+            //     {
+            //       path: 'checkout',
+            //       // element: ,
+            //       element: ,
+            //     },
+            //   ],
+            // },
+          ],
+        },
+
+        {
+          path: '/me/cart',
+          element: ,
+        },
+        {
+          path: '/me/checkout',
+          element: ,
+        },
+
+        //   path: '/shops/:shopId/cart/reload',
+        //   path: '/me/cart',
+
+        {
+          path: '/wip',
+          element: ,
+        },
+
+        // {
+        //   path: '/page3',
+        //   element: ,
+        // },
+        // {
+        //   path: '/shops/:shopId/menu/:itemId',
+        //   element: ,
+        //   // location: background,
+        // },
+        // {
+        //   path: '/shops/:shopId/menu/:itemId/:optionId',
+        //   element: ,
+        //   // location: background,
+        // },
+        // {
+        //   path: '/shops/:shopId/menu/:optionId/modal',
+        //   element: ,
+        //   // location: background,
+        // },
+
+        // {
+        //   path: '/page5',
+        //   element: ,
+        // },
+        // {
+        //   path: '/shops/:shopId/checkout',
+        //   element: ,
+        // },
+
+        // {
+        //   path: '/draft',
+        //   element: ,
+        // },
+
+        {
+          path: '/dev',
+          element: ,
+        },
+
+        {
+          path: '/signup',
+          element: ,
+        },
+        {
+          path: '/login',
+          element: ,
+        },
+
+        // /me/settings
+        {
+          path: '/me',
+          element: ,
+          // children: [
+          //   {
+          //     path: '/setting',
+          //     element: ,
+          //   },
+          // ],
+        },
+        {
+          path: '/me/setting',
+          element: ,
+        },
+
+        // {
+        //   path: '/reset-password',
+        //   element: ,
+        // },
+        {
+          path: '/me/new-password',
+          element: ,
+        },
+
+        // {
+        //   path: '/auth-mail',
+        //   element: ,
+        // },
+        {
+          path: '/auth-mail',
+          element: ,
+        },
+        {
+          path: '/reset-password',
+          // #
+          element: ,
+        },
+        // {
+        //   path: '/auth-mail',
+        //   element: ,
+        // },
+
+        // #REVIEW: change the name
+
+        {
+          path: '/page6',
+          element: ,
+        },
+        // {
+        //   path: '/me/orders',
+        //   element: ,
+        // },
+
+        {
+          path: '/page7',
+          element: ,
+        },
+        {
+          path: '/me/orders',
+          element: ,
+        },
+
+        {
+          path: '/page8',
+          element: ,
+        },
+        {
+          path: '/me/orders/:orderId',
+          element: ,
+        },
+
+        {
+          path: '/me/orders/:orderId/review',
+          element: ,
+        },
+        {
+          path: '/page10',
+          element: ,
+        },
+
+        {
+          path: '/*',
+          element: ,
+        },
+      ],
+    },
+    // {
+    //   path: '/layout',
+    //   element: ,
+    //   children: [
+    //     {
+    //       index: true,
+    //       element: ,
+    //     },
+    //   ],
+    // },
+  ]);
+}
+
+export default RoutesConfig;
diff --git a/src/draft/DevSetting.jsx b/src/draft/DevSetting.jsx
index 8729dc6..1c1698b 100644
--- a/src/draft/DevSetting.jsx
+++ b/src/draft/DevSetting.jsx
@@ -1,13 +1,17 @@
-import React from 'react';
-// import React, { useEffect } from 'react';
-import { useLocation } from 'react-router-dom';
+import React, { useEffect } from 'react';
+// import React from 'react';
+import { useNavigate, useLocation, useMatch } from 'react-router-dom';
 
 import apiHelper from '../utils/helpers';
 
 function DevSetting() {
+  const navigate = useNavigate();
   const location = useLocation();
   const params = new URLSearchParams(location.search);
   const Guid = params.get('guid')?.toString();
+  // const isAuth = params.get('auth-mail')?.toString();
+  const isAuthPath = useMatch('auth-mail');
+
   // const Guid = params.get('guid')?.toString();
 
   // const data = {
@@ -15,20 +19,30 @@ function DevSetting() {
   // };
   // const data = Guid;
 
-  // useEffect(() => {}, []);
+  useEffect(() => {
+    // console.log('isAuth:', isAuthPath);
+
+    if (isAuthPath) {
+      apiHelper.userAuthMail(Guid).then((res) => {
+        // console.log(res);
+        navigate('/login');
+      });
+    }
+  }, [location.key]);
 
   return (
-    <>
-      
    SETTING
    
+    
    
+      
    SETTING
    
+
        {
-          console.log('CHECK');
+          // console.log('CHECK');
 
           apiHelper.userCheck().then((res) => {
-            console.log(res);
+            // console.log(res);
           });
         }}
       />
@@ -38,7 +52,7 @@ function DevSetting() {
         value="NEW"
         className="m-2 rounded bg-[#FA3] py-2 px-3 text-center text-xs font-bold text-white transition-all hover:bg-gray-200"
         onClick={() => {
-          console.log('NEW');
+          // console.log('NEW');
 
           const data = {
             Password: 'Bb000000',
@@ -46,7 +60,7 @@ function DevSetting() {
           };
 
           apiHelper.userNewPassword(data).then((res) => {
-            console.log(res);
+            // console.log(res);
           });
         }}
       />
@@ -56,7 +70,7 @@ function DevSetting() {
         value="RESET"
         className="m-2 rounded bg-[#FA3] py-2 px-3 text-center text-xs font-bold text-white transition-all hover:bg-gray-200"
         onClick={() => {
-          console.log('RESET');
+          // console.log('RESET');
 
           const data = {
             Password: 'Bb000000',
@@ -65,7 +79,7 @@ function DevSetting() {
           };
 
           apiHelper.userResetPassword(data).then((res) => {
-            console.log(res);
+            // console.log(res);
           });
         }}
       />
@@ -75,14 +89,14 @@ function DevSetting() {
         value="FORGET"
         className="m-2 rounded bg-[#FA3] py-2 px-3 text-center text-xs font-bold text-white transition-all hover:bg-gray-200"
         onClick={() => {
-          console.log('FORGET');
+          // console.log('FORGET');
 
           const data = {
-            Account: 'maord@pm.me',
+            Account: '',
           };
 
           apiHelper.userForgetPassword(data).then((res) => {
-            console.log(res);
+            // console.log(res);
           });
         }}
       />
@@ -92,38 +106,40 @@ function DevSetting() {
         value="AUTH"
         className="m-2 rounded bg-[#FA3] py-2 px-3 text-center text-xs font-bold text-white transition-all hover:bg-gray-200"
         onClick={() => {
-          console.log('AUTH');
+          // console.log('AUTH');
 
           apiHelper.userAuthMail(Guid).then((res) => {
-            console.log(res);
+            // console.log(res);
           });
         }}
       />
 
-      {/* http://localhost:3000/project-peteats-2022/#/auth-mail
+      
    
+        {/* http://localhost:3000/project-peteats-2022/#/auth-mail
       ?guid=
       fcca70b8-32bd-4a83-a97e-f13f2c9b6b0c */}
-      
    
-        get-auth-mail?：
-        {params.get('auth-mail')}
-      
    
-
-      
    
-        get-guid：
-        {Guid}
-      
    
-
-      
    
-        get-guid：
-        {params.get('guid')}
-      
    
-
-      
    
-        toString：
-        {params.toString()}
-      
    
-      
    
-    
+        
    
+          get-auth-mail?：
+          {params.get('auth-mail')}
+        
    
+
+        
    
+          get-guid：
+          {Guid}
+        
    
+
+        
    
+          get-guid：
+          {params.get('guid')}
+        
    
+
+        
    
+          toString：
+          {params.toString()}
+        
    
+        
    
+      
    
+    
    
   );
 }
 
diff --git a/src/draft/DevShopList.jsx b/src/draft/DevShopList.jsx
index b926e2f..7a34aee 100644
--- a/src/draft/DevShopList.jsx
+++ b/src/draft/DevShopList.jsx
@@ -155,14 +155,13 @@ function ShopList({ queryType, queryId }) {
        */}
       
      
         {/* 
         */}
-        {shopsData.map((item) => {
-          console.log('!', item);
-          // apiHelper.getImg(item?.imageUrl).then((res) => {
-          //   console.log('res:', res);
-          // });
-
-          return ;
-        })}
+        {shopsData.map((item) =>
+        // console.log('!', item);
+        // apiHelper.getImg(item?.imageUrl).then((res) => {
+        //   console.log('res:', res);
+        // });
+
+          )}
       
      
       {' '}
       {/* 
     */}
diff --git a/src/draft/DevSignup.jsx b/src/draft/DevSignup.jsx
index 8bba43c..f633eab 100644
--- a/src/draft/DevSignup.jsx
+++ b/src/draft/DevSignup.jsx
@@ -12,11 +12,12 @@ function DevSignup() {
   const userName = useInput('');
   const phoneNumber = useInput('');
   const address = useInput('');
+  const nickname = useInput('');
 
   const submitForm = (event) => {
     event.preventDefault();
-    console.log('email', email.value);
-    console.log('password', password.value);
+    // console.log('email', email.value);
+    // console.log('password', password.value);
 
     // Account: 'string';
     // Address: 'string';
@@ -29,48 +30,53 @@ function DevSignup() {
       Name: userName.value,
       MobilePhone: phoneNumber.value,
       Address: address.value,
+      Nickname: nickname.value,
     };
 
-    console.log(data);
+    // console.log(data);
     apiHelper.userSignUp(data).then((res) => {
-      console.log(res);
+      // console.log(res);
     });
     /* end of userSignUp() */
   };
 
   return (
-    
    
+    
    
       
    註冊帳號
    
 
       
    
         
 
         
 
         {/*  */}
 
         
+
+        
 
         
 
         
 
         
-                
    
-              
-            );
-          })}
+          {optionData.map((item) => (
+            // console.log(item);
+            
  • 
+              
    
+                
+              
    
+            
    • 
+          ))}
         
       
    
       {/*  */}
@@ -189,11 +187,10 @@ function Msg({
   const [clickOptionId, setClickOptionId] = useState(0);
   const thisMsg = useInput('');
 
-  const onClickItem = (optionItemId) => {
-    console.log('optionItemId:::', optionItemId);
-    console.log('shopId:::', shopId);
-    return setClickOptionId(optionItemId);
-  };
+  const onClickItem = (optionItemId) =>
+    // console.log('optionItemId:::', optionItemId);
+    // console.log('shopId:::', shopId);
+    setClickOptionId(optionItemId);
   /* end of onClickItem() */
 
   return (
@@ -261,10 +258,10 @@ function Msg({
             return apiHelper
               .addItemToCart({ clickOptionId, msg, amount })
               .then((res) => {
-                console.log(res);
+                // console.log(res);
 
                 if (res?.data?.Status) {
-                  console.log('addItemToCart:::', res?.data);
+                  // console.log('addItemToCart:::', res?.data);
 
                   // #TODO: Toast-ID
                   closeToast();
@@ -289,8 +286,8 @@ function Msg({
 
 function toastModal({ itemId, shopId }) {
   // const { itemId } = useParams();
-  console.log('toastModal:', itemId);
-  console.log('shopId::', shopId);
+  // console.log('toastModal:', itemId);
+  // console.log('shopId::', shopId);
 
   const toastConfig = {
     position: 'top-center',
@@ -331,8 +328,8 @@ function SpecItem({ data, onClickItem }) {
   } = data;
 
   const handleItemId = () => {
-    console.log('handleItemId:', Id);
-    console.log('shopId::', shopId);
+    // console.log('handleItemId:', Id);
+    // console.log('shopId::', shopId);
 
     setOpen(true);
     return onClickItem({ itemId: Id, shopId });
@@ -512,9 +509,8 @@ function SectionMenu({ data }) {
   const { shopId } = useParams();
 
   const onClickItem = ({ itemId, shopId }) => {
-    console.log('onClickItem-itemId:', itemId);
-    console.log('shopId::', shopId);
-
+    // console.log('onClickItem-itemId:', itemId);
+    // console.log('shopId::', shopId);
     // return setOpen(true);
     // return toastModal({ itemId, shopId });
   };
@@ -558,7 +554,7 @@ SectionMenu.propTypes = {
 function ShopInfoItem({ title, info }) {
   // function ShopInfoItem({ data }) {
   //   const { title, info } = data;
-  console.log(title);
+  // console.log(title);
 
   // const {
   //   ShopName,
@@ -865,13 +861,13 @@ function Draft3() {
     // setShopInfosData({ Message, menuList, feedback });
 
     apiHelper.getInfoMenu(shopId).then((res) => {
-      console.log(res);
+      // console.log(res);
 
       if (res?.data?.Status) {
-        console.log('getInfoMenu:::', res?.data);
+        // console.log('getInfoMenu:::', res?.data);
 
         const { Message, menuList, feedback } = res.data;
-        console.log('menuList-0:::', menuList[0]);
+        // console.log('menuList-0:::', menuList[0]);
 
         if (!isFetch) {
           setShopInfosData({ Message, menuList, feedback });
diff --git a/src/draft/Draft4.jsx b/src/draft/Draft4.jsx
index 7610079..9baeeec 100644
--- a/src/draft/Draft4.jsx
+++ b/src/draft/Draft4.jsx
@@ -1,18 +1,75 @@
-import React from 'react';
+import React, { useState, useEffect, useReducer } from 'react';
 import PropTypes from 'prop-types';
 
+import {
+  Link, useNavigate, useParams, useLocation,
+} from 'react-router-dom';
+import apiHelper from '../utils/helpers';
+
 import imgStore from '../images/Store.png';
 // import Area from '../images/Area.png';
 
-function SummaryItem() {
+function counterReducer(state, action) {
+  switch (action.type) {
+    case 'plus':
+      return { count: state.count + 1 };
+    case 'minus':
+      return { count: state.count > 2 ? state.count - 1 : 0 };
+
+    default:
+      return { count: 0 };
+  }
+}
+/* end of counterReducer(state, action) */
+
+function Counter({ Amount }) {
+  const [state, dispatch] = useReducer(counterReducer, { count: Amount });
+  // const [state, dispatch] = useReducer(counterReducer, initCount);
+
+  return (
+    <>
+      
+
+      
    
+        Count:
+        {state.count}
+      
    
+
+      
+    
+  );
+}
+/* end of Counter(initCount) */
+
+function SummaryItem({ item, stateCount }) {
+  const { ProductName, Amount, Price } = item;
+
   return (
     
  • 
       
    
-        
    TITLE
    
+        
    {ProductName}
    
 
         
    
-          
    1
    
-          
    PRICE
    
+          
    {Amount}
    
+          {/* 
    {state.count}
     */}
+
+          {/* 
    {stateCount || Amount}
     */}
+          {/* 
    {Price * stateCount || Price * Amount}
     */}
+          
    {Price * Amount}
    
         
    
       
    
     
    • 
@@ -20,7 +77,9 @@ function SummaryItem() {
 }
 /* end of SummaryItem */
 
-function OrderSummaryList() {
+function CartSummary({ data, payment, stateCount }) {
+  const { shopId } = useParams();
+
   return (
     
    
       
    訂單內容
    
@@ -35,86 +94,298 @@ function OrderSummaryList() {
       
       {/* end of RWD-PC-title */}
 
-      
      
+      
        
         {/* #TODO: inject data from Server */}
-        
-        
-        
+        {data.map((item) => (
+          // console.log('Summary');
+          
+        ))}
       
      
 
       
      
         
      PAYMENT
      
 
-        
      $100
      
+        
      {payment}
      
       
      
 
+      
+        CHECKOUT
+      
+
       
     
    
   );
 }
-/* end of OrderSummaryList */
+/* end of CartSummary */
+
+function CartItem({ item, onClickItem }) {
+  const navigate = useNavigate();
+  const { shopId } = useParams();
+  const location = useLocation();
+
+  const {
+    Id, ProductName, Amount, Price, Content, ProductDetailId,
+  } = item;
+  // #FIXME:
+
+  const [state, dispatch] = useReducer(counterReducer, { count: Amount });
+
+  const handleCartEdit = () => {
+    const itemId = Id;
+    const detailId = ProductDetailId;
+    const amount = state.count;
+    const msg = 'edit';
+
+    return apiHelper
+      .editCart({
+        itemId,
+        detailId,
+        amount,
+        msg,
+      })
+      .then((res) => {
+        // console.log(res);
+
+        if (res?.data?.Status) {
+          // console.log('editCart:::', res?.data);
+
+          navigate(0);
+        }
+      });
+  };
+  /* end of handleCartEdit() */
+
+  useEffect(() => {
+    // fetchData()
+  }, [location.key]);
 
-function OrderItem() {
   return (
     
  • 
       
    
         
    
           
    
-            
    TITLE
    
+            
    {ProductName}
    
 
-            $100
+            {Price}
             {/* end of RWD-PC-price */}
           
    
 
           
    
             {/* #REVIEW: wired about flex mix grid of RWD */}
-            
    -
    
-            
    1
    
-            
    +
    
+
+            
+
+            
    +              Amount:
+              {Amount}
+              
    
+              Count:
+              {state.count}
+            
    
+
+            
+
+            {/*  */}
+            {/* 
    -
    
+            
    {Amount}
    
+            
    +
     */}
+
+            
+
+            
           
    
           {/* end of items-Btn */}
         
    
 
-        
    $100
    
+        
    {Price}
    
         {/* end of RWD-mobile-price */}
 
-        info
+        {Content}
       
    
     
    • 
   );
 }
 /* end of OrderItem */
 
-function OrderList() {
+function CartList({ data, onClickItem }) {
   return (
     
    
       
    已選購餐點
    
 
       {/* #TODO: inject data from Server */}
       
      
-        
-        
-        
+        {data.map((item) => (
+          // console.log('cart');
+          
+        ))}
       
    
     
    
   );
 }
-/* end of OrderList */
+/* end of CartList */
+
+function SectionCartInfo() {
+  const location = useLocation();
+  const [cartData, setCartData] = useState([]);
+  const [payment, setPayment] = useState(0);
+
+  const [stateCount, setStateCount] = useState(0);
+
+  const onClickItem = (state) => {
+    // console.log(state);
+
+    setStateCount(() => state + 1);
+  };
+
+  const fetchCart = () => apiHelper.getCart().then((res) => {
+    // console.log(res);
+
+    if (res?.data?.Status) {
+      // console.log('getCart:::', res?.data);
+
+      // const { Message } = res.data;
+      const { Message, total } = res.data;
+      // console.log('cart-ProductDetailId:', Message[0].ProductDetailId);
+      setCartData(Message);
+      setPayment(total);
+    }
+  });
+
+  useEffect(() => {
+    apiHelper.getCart().then((res) => {
+      // console.log(res);
+
+      if (res?.data?.Status) {
+        // console.log('getCart:::', res?.data);
+
+        // const { Message } = res.data;
+        const { Message, total } = res.data;
+        // console.log('cart:', Message[0].ProductDetailId);
+        setCartData(Message);
+        setPayment(total);
+      }
+    });
+    // fetchCart();
+  }, [location.key]);
 
-function SectionOrder() {
   return (
     <>
-      
    
+      
    
         {/* min-h-screen */}
+        
+
         
    
-          
+          
 
-          
+          
         
    
       
    
       {/* end of container */}
@@ -222,8 +493,8 @@ function SectionShopInfo() {
 function Draft4() {
   return (
     <>
-      
-      
+      {/*  */}
+      
     
   );
 }
diff --git a/src/draft/Draft5.jsx b/src/draft/Draft5.jsx
index 04f6717..2879ad4 100644
--- a/src/draft/Draft5.jsx
+++ b/src/draft/Draft5.jsx
@@ -1,17 +1,206 @@
-import React from 'react';
+import React, { useState, useEffect, useRef } from 'react';
+import { Link, useNavigate, useParams } from 'react-router-dom';
+
+import InputLabel from '@mui/material/InputLabel';
+import MenuItem from '@mui/material/MenuItem';
+import FormHelperText from '@mui/material/FormHelperText';
+import FormControl from '@mui/material/FormControl';
+import Select from '@mui/material/Select';
+
+import Radio from '@mui/material/Radio';
+import RadioGroup from '@mui/material/RadioGroup';
+import FormControlLabel from '@mui/material/FormControlLabel';
+// import FormControl from '@mui/material/FormControl';
+import FormLabel from '@mui/material/FormLabel';
+
+import 'leaflet/dist/leaflet.css';
+import L from 'leaflet';
+
+import 'leaflet-control-geocoder/dist/Control.Geocoder.js';
+import 'leaflet-control-geocoder/dist/Control.Geocoder.css';
+
+import apiHelper from '../utils/helpers';
+import useInput from '../hooks/useInput';
 
 import Store from '../images/Store.png';
 import Area from '../images/Area.png';
 
-function SummaryItem() {
+const IMAGE = 'https://fakeimg.pl/400x300/';
+
+function MapLeaflet() {
+  const mapRef = useRef(null);
+  const markerRef = useRef(null);
+  const [address, setAddress] = useState('');
+
+  const [userPosition, setUserPosition] = useState('');
+
+  useEffect(() => {
+    if (navigator.geolocation) {
+      // console.log('GEO-Available');
+
+      navigator.geolocation.getCurrentPosition(
+        (position) => {
+          // console.log(position);
+          const { latitude, longitude } = position.coords;
+          // console.log('Latitude is :', latitude);
+          // console.log('Longitude is :', longitude);
+
+          setUserPosition({ latitude, longitude });
+        },
+        (error) => {
+          console.error('無法獲取地理位置:', error);
+          console.error(`Error Code = ${error.code} - ${error.message}`);
+        },
+      );
+    } else {
+      console.error('瀏覽器不支援地理定位');
+    }
+  }, []);
+
+  useEffect(() => {
+    // console.log('userPosition?.latitude:', userPosition?.latitude);
+
+    const latitude = userPosition?.latitude || 25.03418;
+    const longitude = userPosition?.longitude || 121.564517;
+
+    const mymap = L.map(mapRef.current).setView([latitude, longitude], 17);
+    // const mymap = L.map(mapRef.current).setView([25.03418, 121.564517], 17);
+
+    // 國土測繪中心 臺灣通用電子地圖
+    const OSMUrl = 'https://wmts.nlsc.gov.tw/wmts/EMAP/default/GoogleMapsCompatible/{z}/{y}/{x}';
+
+    // const OSMUrl = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
+    L.tileLayer(OSMUrl).addTo(mymap);
+
+    const greenIcon = new L.Icon({
+      iconUrl:
+        'https://cdn.rawgit.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-green.png',
+      shadowUrl:
+        'https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-shadow.png',
+      iconSize: [25, 41],
+      iconAnchor: [12, 41],
+      popupAnchor: [1, -34],
+      shadowSize: [41, 41],
+    });
+
+    const marker = L.marker([latitude, longitude], {
+      icon: greenIcon,
+      draggable: true,
+    }).addTo(mymap);
+    // const marker = L.marker([25.03418, 121.564517], {
+    //   icon: greenIcon,
+    //   draggable: true,
+    // }).addTo(mymap);
+
+    markerRef.current = marker;
+
+    // 使用反向地理編碼取得地址
+    const geocoder = L.Control.Geocoder.nominatim();
+
+    const updateAddress = (latlng) => {
+      // console.log('latlng', latlng);
+
+      geocoder.reverse(
+        latlng,
+        mymap.options.crs.scale(mymap.getZoom()),
+        (results) => {
+          if (results.length > 0) {
+            setAddress(results[0].name);
+          }
+        },
+      );
+    };
+
+    geocoder.reverse(
+      marker.getLatLng(),
+      mymap.options.crs.scale(mymap.getZoom()),
+      (results) => {
+        if (results.length > 0) {
+          const popupAddress = `${results[0].name}
    ${results[0].html}`;
+          marker.bindPopup(popupAddress).openPopup();
+
+          const {
+            country, city, suburb, road,
+          } = results[0].properties.address;
+          const reversedAddress = `${country} ${city} ${suburb} ${road}`;
+
+          setAddress(reversedAddress);
+          // updateAddress(reversedAddress);
+          // console.log(results[0].name);
+          // console.log('reversedAddress:::', reversedAddress);
+          // console.log(results[0].properties);
+        }
+      },
+    );
+
+    marker.on('dragend', () => {
+      const newLatLng = marker.getLatLng();
+      geocoder.reverse(
+        newLatLng,
+        mymap.options.crs.scale(mymap.getZoom()),
+        (results) => {
+          if (results.length > 0) {
+            marker
+              .bindPopup(`${results[0].name}
    ${results[0].html}`)
+              .openPopup();
+          }
+        },
+      );
+    });
+
+    const handleMarkerDragEnd = (e) => {
+      const markerLatLng = e.target.getLatLng();
+      updateAddress(markerLatLng);
+    };
+
+    marker.on('dragend', handleMarkerDragEnd);
+
+    L.circle([25.03418, 121.564517], {
+      color: 'red',
+      fillColor: '#f03',
+      fillOpacity: 0.5,
+      radius: 10,
+    }).addTo(mymap);
+
+    return () => {
+      mymap.remove();
+    };
+  }, [userPosition]);
+
+  return (
+    <>
+      
    
+      {/* 
     */}
+
+      {/*  setAddress(e.target.value)}
+        onChange={(e) => setAddress(e.target.value)}
+        // onChange={handleInputChange}
+        placeholder="Enter address"
+      /> */}
+    
+  );
+}
+// end of MapLeaflet()
+
+function SummaryItem({ item, stateCount }) {
+  const { ProductName, Amount, Price } = item;
+
   return (
     
  • 
       
    
-        
    TITLE
    
+        
    {ProductName}
    
 
         
    
-          
    1
    
-          
    PRICE
    
+          
    {Amount}
    
+          {/* 
    {state.count}
     */}
+
+          {/* 
    {stateCount || Amount}
     */}
+          {/* 
    {Price * stateCount || Price * Amount}
     */}
+          
    {Price * Amount}
    
         
    
       
    
     
    • 
@@ -19,12 +208,17 @@ function SummaryItem() {
 }
 /* end of SummaryItem */
 
-function OrderSummaryList() {
+function CartSummary({
+  data, payment, stateCount, Freight,
+}) {
+  const { shopId } = useParams();
+  const navigate = useNavigate();
+
   return (
-    
    
+    
    
       
    訂單內容
    
 
-      
    
+      
    
         
    品項
    
 
         
    
@@ -34,37 +228,254 @@ function OrderSummaryList() {
       
    
       {/* end of RWD-PC-title */}
 
-      
      
+      
        
         {/* #TODO: inject data from Server */}
-        
-        
-        
+        {data.map((item) => (
+          // console.log('Summary');
+          
+        ))}
       
      
 
-      
      
-        
      PAYMENT
      
+      
      
+        
      運費
      
 
-        
      $100
      
+        
      {data[0]?.Freight}
      
       
      
 
+      
      
+        
      總金額
      
+
+        
      {payment}
      
+      
      
+
+      {/* 
+        CHECKOUT
+       */}
+
       
     
    
   );
 }
-/* end of OrderSummaryList */
+/* end of CartSummary */
+
+function ControlledRadioButtonsGroup() {
+  const [value, setValue] = React.useState('貨到付款');
+
+  const handleChange = (event) => {
+    setValue(event.target.value);
+  };
+
+  return (
+    
+      
+        
    付款方式
    
+          
+
+      
    
+        
+          }
+            label="貨到付款"
+          />
+          } label="信用卡" />
+          }
+            label="外帶自取"
+          />
+        
+      
    
+        
+  );
+}
+
+function SelectOtherProps() {
+  const [age, setAge] = React.useState('');
+
+  const handleChange = (event) => {
+    setAge(event.target.value);
+  };
+
+  return (
+    
    
+      
+        {/*  */}
+        送餐時間
+
+        
+
+        {/* Required */}
+      
+    
    
+  );
+}
+
+// function SummaryItem() {
+//   return (
+//     
  • 
+//       
    
+//         
    TITLE
    
+
+//         
    
+//           
    1
    
+//           
    PRICE
    
+//         
    
+//       
    
+//     
    • 
+//   );
+// }
+// /* end of SummaryItem */
+
+// function OrderSummaryList() {
+//   return (
+//     
    
+//       
    訂單內容
    
+
+//       
    
+//         
    品項
    
+
+//         
    
+//           
    數量
    
+//           
    金額
    
+//         
    
+//       
    
+//       {/* end of RWD-PC-title */}
+
+//       
      
+//         {/* #TODO: inject data from Server */}
+//         
+//         
+//         
+//       
    
+
+//       
    
+//         
    PAYMENT
    
+
+//         
    $100
    
+//       
    
+
+//       
+//     
    
+//   );
+// }
+// /* end of OrderSummaryList */
 
 function CheckoutDetail() {
+  const [userData, setUserData] = useState(null);
+
+  const userName = useInput('');
+  const phoneNumber = useInput('');
+  const address = useInput('');
+
+  useEffect(() => {
+    let isFetch = false;
+    if (!userData) {
+      apiHelper.userGetInfo().then((res) => {
+        // console.log(res);
+
+        if (res?.data.Status) {
+          const {
+            data: { Userdata: userInfo },
+          } = res;
+          // #REVIEW: destructure
+          // console.log('userInfo-', userInfo);
+
+          if (!isFetch) {
+            setUserData(userInfo);
+            const { Name, MobilePhone, Address } = userInfo;
+            userName.setValue(Name);
+            phoneNumber.setValue(MobilePhone);
+            address.setValue(Address);
+          }
+          /* end of IF(!isFetch) */
+        }
+      });
+    }
+
+    return () => {
+      setTimeout(() => {
+        isFetch = true;
+      }, 300);
+      /* end of setTimeout() */
+    };
+  }, [userData]);
+
+  if (!userData) {
+    return <>LOADING...;
+  }
+
   return (
     
    
       
    
-        
    送餐詳情
    
+        
    送餐詳情
    
+        
 
-         */}
 
         
 
         
 
         
 
-        
    
-          
    MAP
    
-          {/* end of RWD-PC tittle */}
+        
    
+          
+        
    
 
+        {/* 
    MAP
     */}
+        {/* end of RWD-PC tittle */}
+        {/* 
    
           
             random_image
           
-        
    
+        
     */}
       
    
 
       
    
-        
    付款方式
    
+        {/* 
    付款方式
     */}
 
-        
      
+        
+
+        {/* 
        
           
      • 
             
        1
        
           
        • 
@@ -139,7 +562,7 @@ function CheckoutDetail() {
           
      • 
             
        1
        
           
        • 
-        
      
+        
     */}
       
    
 
       
    
@@ -150,7 +573,7 @@ function CheckoutDetail() {
           id=""
           cols="30"
           rows="10"
-          className="block h-16 w-full py-2 px-3"
+          className="block h-16 w-full rounded-sm border-2 border-[#DB8C8C] py-2 px-3"
         />
       
    
     
    
@@ -159,12 +582,61 @@ function CheckoutDetail() {
 /* end of CheckoutDetail() */
 
 function PageCheckout() {
+  const { shopId } = useParams();
+  const [cartData, setCartData] = useState([]);
+  const [payment, setPayment] = useState(0);
+
+  const fetchCart = () => apiHelper.getCart().then((res) => {
+    // console.log(res);
+
+    if (res?.data?.Status) {
+      // console.log('getCart:::', res?.data);
+
+      // const { Message } = res.data;
+      const { Message, total } = res.data;
+      // console.log('cart-ProductDetailId:', Message[0].ProductDetailId);
+      setCartData(Message);
+      setPayment(total);
+    }
+  });
+
+  useEffect(() => {
+    apiHelper.getCart().then((res) => {
+      // console.log(res);
+
+      if (res?.data?.Status) {
+        // console.log('getCart:::', res?.data);
+
+        // const { Message } = res.data;
+        const { Message, total } = res.data;
+        // console.log('cart:', Message[0].ProductDetailId);
+        setCartData(Message);
+        setPayment(total);
+      }
+    });
+    // fetchCart();
+  }, []);
+
   return (
-    
    
+    
    
+      
+
       
    
         
+        {/* {userData && } */}
 
-        
+        {/*  */}
+        
       
    
     
    
   );
diff --git a/src/draft/Draft6.jsx b/src/draft/Draft6.jsx
index 9ed80af..599ce81 100644
--- a/src/draft/Draft6.jsx
+++ b/src/draft/Draft6.jsx
@@ -1,35 +1,123 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
+import { useLocation } from 'react-router-dom';
 
 import Store from '../images/Store.png';
 import Area from '../images/Area.png';
 
+import LoadingContext from '../contexts/LoadingContext';
+
+import apiHelper from '../utils/helpers';
+
 function PageCheckoutResult() {
+  // const location = useLocation();
+
+  // const [orderData, setOrderData] = useState([]);
+  // const { isLoading, setLoading } = LoadingContext.useLoading();
+
+  const [orderData, setOrderData] = useState({});
+
+  useEffect(() => {
+    // console.log('useEffect()');
+    // apiHelper.getHistoryOrder().then((res) => {
+    //   console.log(res);
+    //   if (res?.data?.Status)1 {
+    //     console.log('getHistoryOrder:::', res?.data);
+    //     const { Message } = res.data;
+    //     setOrderData(Message);
+    //   }
+    // });
+  }, [orderData]);
+
+  // const [cateData, setCateData] = useState([]);
+
+  // useEffect(() => {
+  //   if (!cateData.length) {
+  //     apiHelper.getShopTag().then((res) => {
+  //       console.log(res);
+
+  //       if (res?.data?.Status) {
+  //         console.log('getShopTag:::', res?.data?.Data);
+
+  //         const { Data } = res.data;
+  //         setCateData(Data);
+  //       }
+  //     });
+  //   }
+  // }, [cateData]);
+
+  // useEffect(() => {
+  //   let isFetch = false;
+  //   apiHelper.getHistoryOrder().then((res) => {
+  //     console.log(res);
+
+  //     if (res?.data?.Status) {
+  //       console.log('getHistoryOrder:::', res?.data);
+
+  //       const { Message } = res.data;
+  //       console.log(Message[0]);
+
+  //       if (!isFetch) {
+  //         console.log('!isFetch');
+  //         setOrderData(Message);
+  //       }
+  //     }
+  //   });
+  //   return () => {
+  //     isFetch = true;
+  //   };
+  // }, []);
+  // }, [null]);
+
+  // if (!orderData) {
+  // if (orderData.length < 1) {
+  //   return 
    LOADING...
    ;
+  // }
+
   return (
     
    
-      
    
+      
    
         
    
           
    目前訂單進度
    
 
+          
+
           
    
             
      
               
    • 
                 
      
-                  title
-                  string
+                  {orderData.ShopName}
+                  {/* {orderData.Id} */}
                 
      
               
      • 
 
               
    • 
                 
      
-                  title
-                  string
+                  目前訂單進度
+                  {/* {orderData.OrderStatusName} */}
                 
      
               
      • 
 
               
    • 
                 
      
-                  title
-                  string
+                  訂購品項
+                  {/* {orderData.ProductName} */}
                 
      
               
      • 
 
diff --git a/src/draft/Draft7.jsx b/src/draft/Draft7.jsx
index 4cff354..be616cc 100644
--- a/src/draft/Draft7.jsx
+++ b/src/draft/Draft7.jsx
@@ -1,22 +1,35 @@
 import React, { useEffect, useState } from 'react';
 
+import { Link } from 'react-router-dom';
+
+// import L from 'leaflet';
+
 import apiHelper from '../utils/helpers';
+// const IMAGE = 'https://picsum.photos/seed/picsum/200/300';
 
 const IMAGE = 'https://fakeimg.pl/400x300/';
-// const IMAGE = 'https://picsum.photos/seed/picsum/200/300';
 
-function HistoryOrderItem({ item }) {
+function HistoryOrderItem({ item, fakeId }) {
   const {
-    OrderInformationId, ShopName, OrderStatusName, ProductName,
+    OrderInformationId,
+    ShopName,
+    OrderStatusName,
+    ProductName,
+    imageUrl,
+    CreatDate,
+    PaymentName,
   } = item;
 
+  const [orderState, setOrderState] = useState(null);
+
   return (
     <>
+      {/* 
       */}
       
    • 
         
      
           
             {ShopName}
@@ -25,7 +38,7 @@ function HistoryOrderItem({ item }) {
 
         
      
           
      
-            {OrderInformationId}
+            {/* {OrderInformationId} */}
             {ShopName}
           
      
 
@@ -33,45 +46,90 @@ function HistoryOrderItem({ item }) {
             
    • 
               
      
                 訂單編號
-                {OrderStatusName}
+                
+                  {fakeId.length < 5 ? fakeId : fakeId.substring(0, 5)}
+                
+                {/* {fakeId} */}
+                {/* {OrderInformationId} */}
               
      
             
      • 
 
             
    • 
               
      
                 訂單狀態
-                {ProductName}
+                {/* {OrderStatusName} */}
+                
               
      
             
      • 
             
    • 
               
      
                 訂單時間
-                STRING
+                {CreatDate.split('T')[0]}
+                {CreatDate.split('T')[1].substring(0, 8)}
+                {/* {CreatDate} */}
               
      
             
      • 
             
    • 
               
      
                 付款方式
-                STRING
+                {PaymentName}
               
      
             
      • 
           
    
         
    
 
         
    
-          
+           */}
 
-          
+          
         
    
       
       {/* end of Grid */}
@@ -85,23 +143,26 @@ function PageHistoryOrder() {
   // getHistoryOrder
 
   useEffect(() => {
-    apiHelper.getHistoryOrder().then((res) => {
-      console.log(res);
+    apiHelper.getHistoryOrders().then((res) => {
+      // console.log(res);
 
       if (res?.data?.Status) {
-        console.log('getHistoryOrder:::', res?.data);
+        // console.log('getHistoryOrders:::', res?.data);
 
         const { Message } = res.data;
         // console.log(DetailList[0]);
         // console.log(Data[0]);
         setHistoryOrders(Message);
+        // const tmp = { ...Message };
+        // const tmpReverse = tmp.reverse();
+        // setHistoryOrders(tmpReverse);
       }
     });
   }, []);
 
   return (
     <>
-      
    
+      
    
         
    
           
    
             
    
@@ -110,13 +171,12 @@ function PageHistoryOrder() {
 
             
@@ -139,10 +199,13 @@ function PageHistoryOrder() {
         
    
 
         
      
-          {historyOrders.map((item) => {
-            console.log('item-');
+          {historyOrders.map((item, i) => {
+            // console.log('item-');
+            const fakeId = `0${i}0${item.OrderInformationId}`;
+
             return (
-              
+              
+              // 
             );
           })}
           {/*  */}
diff --git a/src/draft/Draft8.jsx b/src/draft/Draft8.jsx
index c19566b..e36bf63 100644
--- a/src/draft/Draft8.jsx
+++ b/src/draft/Draft8.jsx
@@ -1,8 +1,22 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 
-import Store from '../images/Store.png';
-import Area from '../images/Area.png';
+import { useParams } from 'react-router-dom';
+
+import apiHelper from '../utils/helpers';
+
+const FAKE_IMAGE = 'https://fakeimg.pl/400x300/';
+
+function PrintResponse(data) {
+  return (
+    
      
+      
      
+        
      {JSON.stringify(data, null, 2)}
      
+      
      
+    
      
+  );
+}
+/* end of PrintResponse(data) */
 
 function CardWithBorderAndCol({ children }) {
   return (
@@ -17,66 +31,240 @@ CardWithBorderAndCol.propTypes = {
   children: PropTypes.node.isRequired,
 };
 
-function HistoryOrderFormItem() {
+function HistoryOrderFormItem({ restInfos }) {
+  const {
+    OrderStatusName,
+    PaymentName,
+    ProductDeliveryName,
+    CreatDate,
+    Ordersum,
+    Name,
+    MobilePhone,
+    ShopName,
+  } = restInfos;
+
+  if (!restInfos) {
+    return 
      LOADING...
      ;
+  }
+
   return (
-    
    • 
-      
      
-        title
-        string
-      
      
-    
      • 
+    <>
+      {/*  */}
+
+      
    • 
+        
      
+          訂購店家
+          {ShopName}
+        
      
+      
      • 
+
+      
    • 
+        
      
+          訂單狀態
+          {OrderStatusName}
+        
      
+      
      • 
+
+      
    • 
+        
      
+          訂單時間
+          {CreatDate}
+        
      
+      
      • 
+
+      
    • 
+        
      
+          付款方式
+          {PaymentName}
+        
      
+      
      • 
+
+      
    • 
+        
      
+          付款金額
+          {Ordersum}
+        
      
+      
      • 
+
+      
    • 
+        
      
+          提貨姓名
+          {Name}
+        
      
+      
      • 
+
+      
    • 
+        
      
+          聯絡電話
+          {MobilePhone}
+        
      
+      
      • 
+    
   );
 }
 /* end of HistoryOrderFormItem() */
 
+function SectionOrderForm({ data }) {
+  const { Message, ...restInfos } = data;
+  // Message === Array
+
+  if (!data) {
+    return 
      LOADING...
      ;
+  }
+
+  return (
+    <>
+      {/*  */}
+      {/*  */}
+
+      
        
+        {/* #TODO: inject data from Server */}
+        
+      
      
+
+      
      
+        
      送餐地址
      
+        
      {restInfos.Address}
      
+
+        {/* 
+          random_image
+         */}
+      
      
+
+      
      
+        
      備註
      
+        {/* 
      {Memo}
       */}
+        
        
+          {/* #TODO: inject data from Server */}
+          {Message.map((item, i) => {
+            const fakeId = `${i}123`;
+            // console.log('Summary');
+            // return (
      •  
        • );
+          })}
+        
      
+      
      
+    
+  );
+}
+
+function SummaryItem({ item }) {
+  const { ProductName, Amount, Price } = item;
+
+  return (
+    
    • 
+      
      
+        
      {ProductName}
      
+
+        
      
+          
      {Amount}
      
+          
      {Price * Amount}
      
+        
      
+      
      
+    
      • 
+  );
+}
+/* end of SummaryItem */
+
+function SummaryList({ data }) {
+  const { Message, ...restInfos } = data;
+  const { Ordersum } = restInfos;
+
+  return (
+    <>
+      
      訂單內容
      
+      {/*  */}
+
+      
      
+        
      品項
      
+
+        
      
+          
      數量
      
+          
      金額
      
+        
      
+      
      
+      {/* end of RWD-PC-title */}
+
+      
        
+        {/* #TODO: inject data from Server */}
+        {Message.map((item, i) => {
+          const fakeKey = `${i}123`;
+          const fakeId = `0${i}0${item.OrderInformationId}`;
+
+          // console.log('Summary');
+          return ;
+          // return ;
+        })}
+      
      
+
+      
      
+        
      運費
      
+
+        
      {Message[0]?.Freight}
      
+      
      
+
+      
      
+        
      總金額
      
+
+        
      {Ordersum}
      
+      
      
+    
+  );
+}
+/* end of SummaryList() */
+
 function PageHistoryDetail() {
+  const { orderId } = useParams();
+  const [orderRes, setOrderRes] = useState(null);
+
+  // getOrderDetail
+  useEffect(() => {
+    apiHelper.getOrderDetail(orderId).then((res) => {
+      // console.log(res);
+
+      if (res?.data?.Status) {
+        // console.log('getHistoryOrders:::', res?.data);
+
+        const { Message, OrderStatus, Ordersum } = res.data;
+
+        /**
+         * #NOTE: the nested  have to use Spread syntax, or getting undefined
+         */
+        setOrderRes({ Message, ...OrderStatus, Ordersum });
+      }
+    });
+  }, [orderId]);
+
+  if (!orderRes) {
+    return 
      LOADING...
      ;
+  }
+
   return (
     <>
-      
      
-        
      TITTLE
      
+      
      
+        
      詳細訂單
      
+
+        {/*  */}
 
         
      
           
      
             
               
      
                 
      訂單編號
      
-                00000
-              
      
-
-              
        
-                {/* #TODO: inject data from Server */}
-                
-                
-                
-                
-                
-                
-                
-              
      
-
-              
      
-                
      1
      
-                
      2
      
-
-                
-                  random_image
-                
-              
      
 
-              
      
-                
      1
      
-                
      2
      
+                {orderId}
               
      
+              {/* #TODO: */}
+              
                   
           
      
 
           
      
             
-              
      訂單內容
      
+              
                   
           
      
         
      
diff --git a/src/draft/Draft9.jsx b/src/draft/Draft9.jsx
index 06b9040..f9830ca 100644
--- a/src/draft/Draft9.jsx
+++ b/src/draft/Draft9.jsx
@@ -1,12 +1,116 @@
-import React from 'react';
+import React, { useState } from 'react';
+
+import {
+  Link, useNavigate, useParams, useLocation,
+} from 'react-router-dom';
+
+import { Rating, Box } from '@mui/material';
+import StarIcon from '@mui/icons-material/Star';
+
+import useInput from '../hooks/useInput';
+import apiHelper from '../utils/helpers';
 
 import Store from '../images/Store.png';
 import Area from '../images/Area.png';
 
+function CardWithBorderAndCol({ children }) {
+  return (
+    
      
+      {children}
+    
      
+  );
+}
+/* end of CardWithBorderAndCol({ children }) */
+
+// const labels = {
+//   0.5: '0.5',
+//   1: '1',
+//   1.5: '1.5',
+//   2: '2',
+//   2.5: '2.5',
+//   3: '3',
+//   3.5: '3.5',
+//   4: '4',
+//   4.5: '4.5',
+//   5: '5',
+// };
+/* end of labels-Dic */
+
+const labels = {
+  0.5: 'Useless',
+  1: 'Useless+',
+  1.5: 'Poor',
+  2: 'Poor+',
+  2.5: 'Ok',
+  3: 'Ok+',
+  3.5: 'Good',
+  4: 'Good+',
+  4.5: 'Excellent',
+  5: 'Excellent+',
+};
+/* end of labels-Dic */
+
+function getLabelText(value) {
+  return `${value} Star${value !== 1 ? 's' : ''}, ${labels[value]}`;
+}
+/* end of getLabelText() */
+
+function SectionRating() {
+  const [value, setValue] = useState(1);
+  const [hover, setHover] = useState(-1);
+
+  return (
+    <>
+      <>
+         {
+            setValue(newValue);
+          }}
+          onChangeActive={(event, newHover) => {
+            setHover(newHover);
+          }}
+          emptyIcon={}
+        />
+        {value !== null && (
+          {labels[hover !== -1 ? hover : value]}
+        )}
+      
+
+      <>
+        {/* 
      
+        }
+        />
+        {labels[value]} */}
+        {/* end of readOnly-Ver. */}
+      
+    
+  );
+}
+/* end of SectionRating() */
+
 function PageRatingOrder() {
+  const navigate = useNavigate();
+
+  const { orderId } = useParams();
+
+  const [value, setValue] = useState(1);
+  const [tmp, setTmp] = useState('');
+  const [hover, setHover] = useState(-1);
+
+  const comment = useInput('');
+
   return (
     <>
-      
      
+      
      
         
      
           
      
             
      評價此訂單
      
@@ -16,37 +120,117 @@ function PageRatingOrder() {
                 
      
                   
      總體評價星級
      
                   {/* #TODO: Component-ratings */}
-                  
      1-2-3-4-5
      
+                  {/*  */}
+                  
      
+                     {
+                        setValue(newValue);
+                        // comment.value = newValue;
+                      }}
+                      onChangeActive={(event, newHover) => {
+                        setHover(newHover);
+                      }}
+                      emptyIcon={(
+                        
+                      )}
+                    />
+                    {value !== null && (
+                      
+                        {labels[hover !== -1 ? hover : value]}
+                      
+                    )}
+                  
      
                 
      
 
                 
      
-                  
      comment
      
+                  
      您的建議及評價