diff --git a/.github/workflows/main_merge.yml b/.github/workflows/main_merge.yml new file mode 100644 index 0000000..078f0e0 --- /dev/null +++ b/.github/workflows/main_merge.yml @@ -0,0 +1,73 @@ +name: Main Server Merge +on: + push: + branches: [ "main" ] + +jobs: + build: + runs-on: ubuntu-latest + steps: + - name: Checkout source code. # Repo checkout + uses: actions/checkout@v3 + + - name: Check Node v # Node v 확인 + run: node -v + + - name: Install dependencies # 의존 파일 설치 + run: npm install + + - name: Set .env from secrets + run: | + echo "PORT=${{ secrets.MAIN_PORT }}" > .env + echo "WDS_SOCKET_PORT=0" >> .env + echo "NODE_PATH=src/" >> .env + echo "REACT_APP_API_ROOT=${{ secrets.MAIN_REACT_APP_API_ROOT }}" >> .env + echo "REACT_APP_HOME_URL=${{ secrets.MAIN_REACT_APP_HOME_URL }}" >> .env + + - name: cat env file + run: cat .env + + - name: Generate build # React Build + run: npm run build + + - name: file copy + uses: actions/upload-artifact@v3 + with: + name: build + path: build + deploy: + needs: build + runs-on: ubuntu-latest + steps: + - name: file download + uses: actions/download-artifact@v3 + with: + name: build + path: build + - name: Upload to S3 + env: + AWS_ACCESS_KEY_ID: ${{ secrets.S3_MAIN_ACCESS_KEY_ID }} + AWS_SECRET_ACCESS_KEY: ${{ secrets.S3_MAIN_SECRET_ACCESS_KEY }} + AWS_DEFAULT_REGION: ap-northeast-2 + BUCKET_NAME: ${{ secrets.S3_BUCKET_NAME }} + run: | + aws s3 sync build s3://$BUCKET_NAME/ --delete \ + --exact-timestamps + # - name: Cloufront cache invalidation + # env: + # AWS_ACCESS_KEY_ID: ${{ secrets.CF_ACCESS_KEY_ID }} + # AWS_SECRET_ACCESS_KEY: ${{ secrets.CF_SECRET_ACCESS_KEY }} + # AWS_DEFAULT_REGION: us-east-1 + # DISTRIBUTION_ID: ${{ secrets.CF_DISTRIBUTION_ID }} + # run: | + # aws cloudfront create-invalidation --distribution-id $DISTRIBUTION_ID --paths "/*" + - name: Discordbot alert # 디스코드 알림 + uses: sarisia/actions-status-discord@v1.13.0 + with: + webhook: ${{ secrets.DISCORD_WEBHOOK }} + content: ${{ (github.actor == 'marinesnow34' && '<@392607023495118862>') || + (github.actor == '1223v' && '<@368775981667844098>') || + (github.actor == 'imi21123' && '<@999337351799128115>') || + (github.actor == 'marina-yhm' && '<@946431150614794240>') || + (github.actor == 'hhhhyelim' && '<@1076887091427946496>') }} + if: always() diff --git a/.github/workflows/main_pr.yml b/.github/workflows/main_pr.yml new file mode 100644 index 0000000..0ec251a --- /dev/null +++ b/.github/workflows/main_pr.yml @@ -0,0 +1,91 @@ +name: Main Server Pull-request + +on: + pull_request: + branches: [ "main" ] + +jobs: + build: + runs-on: ubuntu-latest + steps: + - name: Check branch + run: | + echo "Head branch is: ${{ github.head_ref }}" + echo "Base branch is: ${{ github.base_ref }}" + if [[ "${{ github.head_ref }}" != "test" ]]; then + echo "test 브랜치가 아님" + exit 1 + fi + - name: Checkout source code. # Repo checkout + uses: actions/checkout@v3 + + - name: Check Node v # Node v 확인 + run: node -v + + - name: Install dependencies # 의존 파일 설치 + run: npm install + + - name: Set .env from secrets + run: | + echo "PORT=${{ secrets.MAIN_PORT }}" > .env + echo "WDS_SOCKET_PORT=0" >> .env + echo "NODE_PATH=src/" >> .env + echo "REACT_APP_API_ROOT=${{ secrets.MAIN_REACT_APP_API_ROOT }}" >> .env + echo "REACT_APP_HOME_URL=${{ secrets.MAIN_REACT_APP_HOME_URL }}" >> .env + + - name: cat env file + run: cat .env + + - name: Generate build # React Build + run: npm run build + - name: Discordbot alert # 디스코드 알림 + uses: sarisia/actions-status-discord@v1.13.0 + with: + webhook: ${{ secrets.DISCORD_WEBHOOK }} + content: ${{ (github.actor == 'marinesnow34' && '<@392607023495118862>') || + (github.actor == '1223v' && '<@368775981667844098>') || + (github.actor == 'imi21123' && '<@999337351799128115>') || + (github.actor == 'marina-yhm' && '<@946431150614794240>') || + (github.actor == 'hhhhyelim' && '<@1076887091427946496>') }} + if: always() + + after: + runs-on: ubuntu-latest + needs: build + if: always() + permissions: + contents: read + pull-requests: write + steps: + - name: Comment on failure and close PR + if: needs.build.result == 'failure' + uses: actions/github-script@v6 + with: + github-token: ${{ github.token }} + script: | + github.rest.issues.createComment({ + issue_number: context.issue.number, + owner: context.repo.owner, + repo: context.repo.repo, + body: '빌드 실패' + }); + + github.rest.pulls.update({ + owner: context.repo.owner, + repo: context.repo.repo, + pull_number: context.payload.pull_request.number, + state: 'closed' + }); + + - name: Auto approve pull request + if: needs.build.result == 'success' + uses: actions/github-script@v6 + with: + github-token: ${{ github.token }} + script: | + github.rest.pulls.createReview({ + owner: context.repo.owner, + repo: context.repo.repo, + pull_number: context.payload.pull_request.number, + event: 'APPROVE' + }); diff --git a/.github/workflows/test_merge.yml b/.github/workflows/test_merge.yml new file mode 100644 index 0000000..1f31915 --- /dev/null +++ b/.github/workflows/test_merge.yml @@ -0,0 +1,80 @@ +name: Test Server Merge +on: + push: + branches: [ "test" ] + +jobs: + build: + runs-on: ubuntu-latest + steps: + - name: Checkout source code. # Repo checkout + uses: actions/checkout@v3 + + - name: Check Node v # Node v 확인 + run: node -v + + - name: Install dependencies # 의존 파일 설치 + run: npm install + + - name: Set .env from secrets + run: | + echo "PORT=${{ secrets.TEST_PORT }}" > .env + echo "WDS_SOCKET_PORT=0" >> .env + echo "NODE_PATH=src/" >> .env + echo "REACT_APP_API_ROOT=${{ secrets.TEST_REACT_APP_API_ROOT }}" >> .env + echo "REACT_APP_HOME_URL=${{ secrets.TEST_REACT_APP_HOME_URL }}" >> .env + + - name: cat env file + run: cat .env + + - name: Generate build # React Build + run: npm run build + + - name: file copy + uses: actions/upload-artifact@v3 + with: + name: build + path: build + deploy: + needs: build + runs-on: ubuntu-latest + steps: + - name: file download + uses: actions/download-artifact@v3 + with: + name: build + path: build + - name: Upload to Cloudflare + env: + AWS_ACCESS_KEY_ID: ${{ secrets.CF_ACCESS_KEY_ID }} + AWS_SECRET_ACCESS_KEY: ${{ secrets.CF_SECRET_ACCESS_KEY }} + AWS_DEFAULT_REGION: us-east-1 + BUCKET_NAME: ${{ secrets.CF_BUCKET_NAME }} + ENDPOINT_URL: ${{ secrets.CF_ENDPOINT_URL }} + run: | + aws s3 sync build s3://$BUCKET_NAME/build_ceo \ + --endpoint-url $ENDPOINT_URL --delete \ + --exact-timestamps + + - name: SSH and deploy + uses: appleboy/ssh-action@v1.0.0 + with: + host: ${{ secrets.HOST }} + username: ${{ secrets.USERNAME }} + key: ${{ secrets.SSH_KEY }} + port: ${{ secrets.PORT }} + timeout: 40s # 30초 기본 + script: | + aws s3 sync s3://readyvery-dev-server/build_ceo ./docker/react/build_boss \ + --endpoint-url https://29c6e4b55b1ddb8d2b6e69df21141caa.r2.cloudflarestorage.com --delete \ + --exact-timestamps + - name: Discordbot alert # 디스코드 알림 + uses: sarisia/actions-status-discord@v1.13.0 + with: + webhook: ${{ secrets.DISCORD_WEBHOOK }} + content: ${{ (github.actor == 'marinesnow34' && '<@392607023495118862>') || + (github.actor == '1223v' && '<@368775981667844098>') || + (github.actor == 'imi21123' && '<@999337351799128115>') || + (github.actor == 'marina-yhm' && '<@946431150614794240>') || + (github.actor == 'hhhhyelim' && '<@1076887091427946496>') }} + if: always() diff --git a/.github/workflows/test_pr.yml b/.github/workflows/test_pr.yml new file mode 100644 index 0000000..c1f34fa --- /dev/null +++ b/.github/workflows/test_pr.yml @@ -0,0 +1,83 @@ +name: Test Server Pull-request # Workflow 이름 + +on: + pull_request: + branches: [ "test" ] + +jobs: + build: + runs-on: ubuntu-latest + steps: + - name: Checkout source code. # Repo checkout + uses: actions/checkout@v3 + + - name: Check Node v # Node v 확인 + run: node -v + + - name: Install dependencies # 의존 파일 설치 + run: npm install + + - name: Set .env from secrets + run: | + echo "PORT=${{ secrets.TEST_PORT }}" > .env + echo "WDS_SOCKET_PORT=0" >> .env + echo "NODE_PATH=src/" >> .env + echo "REACT_APP_API_ROOT=${{ secrets.TEST_REACT_APP_API_ROOT }}" >> .env + echo "REACT_APP_HOME_URL=${{ secrets.TEST_REACT_APP_HOME_URL }}" >> .env + + - name: cat env file + run: cat .env + + - name: Generate build # React Build + run: npm run build + - name: Discordbot alert # 디스코드 알림 + uses: sarisia/actions-status-discord@v1.13.0 + with: + webhook: ${{ secrets.DISCORD_WEBHOOK }} + content: ${{ (github.actor == 'marinesnow34' && '<@392607023495118862>') || + (github.actor == '1223v' && '<@368775981667844098>') || + (github.actor == 'imi21123' && '<@999337351799128115>') || + (github.actor == 'marina-yhm' && '<@946431150614794240>') || + (github.actor == 'hhhhyelim' && '<@1076887091427946496>') }} + if: always() + + after: + runs-on: ubuntu-latest + needs: build + if: always() + permissions: + contents: read + pull-requests: write + steps: + - name: Comment on failure and close PR + if: needs.build.result == 'failure' + uses: actions/github-script@v6 + with: + github-token: ${{ github.token }} + script: | + github.rest.issues.createComment({ + issue_number: context.issue.number, + owner: context.repo.owner, + repo: context.repo.repo, + body: '빌드 실패' + }); + + github.rest.pulls.update({ + owner: context.repo.owner, + repo: context.repo.repo, + pull_number: context.payload.pull_request.number, + state: 'closed' + }); + + - name: Auto approve pull request + if: needs.build.result == 'success' + uses: actions/github-script@v6 + with: + github-token: ${{ github.token }} + script: | + github.rest.pulls.createReview({ + owner: context.repo.owner, + repo: context.repo.repo, + pull_number: context.payload.pull_request.number, + event: 'APPROVE' + }); diff --git a/src/assets/icons/img_readyVery.svg b/src/assets/icons/cherry.svg similarity index 84% rename from src/assets/icons/img_readyVery.svg rename to src/assets/icons/cherry.svg index 012f64d..3981ec8 100644 --- a/src/assets/icons/img_readyVery.svg +++ b/src/assets/icons/cherry.svg @@ -1,25 +1,23 @@ - - - - - - - + + + + - - + + - + + - + - + - + diff --git a/src/assets/icons/icon_check.svg b/src/assets/icons/icon_check.svg deleted file mode 100644 index 7b6ec19..0000000 --- a/src/assets/icons/icon_check.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/assets/icons/icon_closeModal.svg b/src/assets/icons/icon_closeModal.svg deleted file mode 100644 index 2369bab..0000000 --- a/src/assets/icons/icon_closeModal.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/assets/icons/icon_downArrow.svg b/src/assets/icons/icon_downArrow.svg deleted file mode 100644 index 91ed8f1..0000000 --- a/src/assets/icons/icon_downArrow.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/assets/icons/icon_kakao.svg b/src/assets/icons/icon_kakao.svg deleted file mode 100644 index e9632f0..0000000 --- a/src/assets/icons/icon_kakao.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/assets/icons/icon_upArrow.svg b/src/assets/icons/icon_upArrow.svg deleted file mode 100644 index 07f2a16..0000000 --- a/src/assets/icons/icon_upArrow.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/assets/icons/small_cherry.svg b/src/assets/icons/small_cherry.svg deleted file mode 100644 index 0ad363c..0000000 --- a/src/assets/icons/small_cherry.svg +++ /dev/null @@ -1,23 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - diff --git a/src/components/views/Header/Header.css b/src/components/views/Header/Header.css index e58e729..0719ff9 100644 --- a/src/components/views/Header/Header.css +++ b/src/components/views/Header/Header.css @@ -1,7 +1,5 @@ .header { - /* width: 100%; */ - min-width: 73.75rem; - /* min-width: 64rem; */ + width: 100%; height: 5.5rem; background-color: #2e2d2d; } @@ -21,14 +19,13 @@ align-items: center; } -.store-img__wrapper{ - margin: 0 0.5625rem; -} - .header-font { color: #fff; + font-family: Pretendard; font-size: 1.875rem; - font-family: "SemiBold"; + font-style: normal; + font-weight: 600; + line-height: 100%; /* 1.875rem */ } .head-container { diff --git a/src/components/views/Header/Header.jsx b/src/components/views/Header/Header.jsx index 244622e..be6e481 100644 --- a/src/components/views/Header/Header.jsx +++ b/src/components/views/Header/Header.jsx @@ -27,13 +27,13 @@ const Header = () => { {!Store ? (
-
Open
-
영업중
+ Open + 영업중
) : (
-
Close
-
영업종료
+ Close + 영업종료
)} {Sound ? ( diff --git a/src/components/views/Inven/InvenBox.jsx b/src/components/views/Inven/InvenBox.jsx deleted file mode 100644 index 0bf9249..0000000 --- a/src/components/views/Inven/InvenBox.jsx +++ /dev/null @@ -1,19 +0,0 @@ -const InvenBox = ({handleModal, invenProps: {category, name, soldOut}}) => { - return( - <> -
- - {!soldOut ? ( -
- ) : ( -
- )} - - {category} - {name} -
- - ); -} - -export default InvenBox; \ No newline at end of file diff --git a/src/components/views/NavBar/NavBar.css b/src/components/views/NavBar/NavBar.css index 09cfb25..bf4d81b 100644 --- a/src/components/views/NavBar/NavBar.css +++ b/src/components/views/NavBar/NavBar.css @@ -1,7 +1,6 @@ .navbar { width: 8.875rem; height: 46.25rem; - /* height: 42.5rem; */ background-color: #2e2d2d; display: flex; diff --git a/src/components/views/NavBar/NavBar.jsx b/src/components/views/NavBar/NavBar.jsx index 61595e7..4bac562 100644 --- a/src/components/views/NavBar/NavBar.jsx +++ b/src/components/views/NavBar/NavBar.jsx @@ -1,6 +1,6 @@ import "bootstrap/dist/css/bootstrap.min.css"; import React from "react"; -import { Link } from "react-router-dom"; +import { Nav } from "react-bootstrap"; import { useRecoilCallback, useRecoilState } from "recoil"; import { storeState } from "../../../Atom/status"; import Home from "../../../assets/icons/Navbar/Home.svg"; //홈 @@ -24,7 +24,7 @@ const NavBar = () => { return (
- + {currentPath === "/" ? (
HomeOn @@ -36,9 +36,9 @@ const NavBar = () => { 홈
)} - + - + {currentPath === "/Inventory" ? (
InvenOn @@ -50,9 +50,9 @@ const NavBar = () => { 재고관리
)} - + - + {currentPath === "/Sales" ? (
SalesOn @@ -64,9 +64,9 @@ const NavBar = () => { 매출관리
)} - + - + {currentPath === "/Mypage" ? (
MypageOn @@ -78,10 +78,10 @@ const NavBar = () => { 마이페이지
)} - +
- + {Store ? (
{ 영업종료
)} - +
); }; diff --git a/src/index.css b/src/index.css index 037be5b..ec2585e 100644 --- a/src/index.css +++ b/src/index.css @@ -5,12 +5,6 @@ body { sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; - - -webkit-user-select:none; - -moz-user-select:none; - -ms-user-select:none; - user-select:none - } code { diff --git a/src/pages/Home/Receipt.css b/src/pages/Home/Receipt.css index e0be4cd..9191df7 100644 --- a/src/pages/Home/Receipt.css +++ b/src/pages/Home/Receipt.css @@ -1,18 +1,20 @@ .rounded-rectangle { width: 100%; /* 너비 설정 */ height: 97%; /* 높이 설정 */ - background-color: #F5F5F5; /* 배경색 설정 */ - border-radius: 1.875rem; /* 모서리를 둥글게 만드는 값 */ + background-color: #f5f5f5; /* 배경색 설정 */ + border-radius: 20px; /* 모서리를 둥글게 만드는 값 */ + text-align: center; /* 가운데 정렬 */ color: #000; /* 텍스트 색상 설정 */ - box-shadow: 0px 0.25rem 0.375rem rgba(0, 0, 0, 0.25); + font-size: 18px; /* 폰트 크기 설정 */ + line-height: 100px; /* 수직 가운데 정렬을 위한 높이 설정 */ + box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5); } .Box { width: 100%; /* 너비 설정 */ height: 100%; /* 높이 설정 */ - /* height: 42.5rem; */ - /* padding-top: 5%; */ - /* padding-left: 0; */ + padding-top: 5%; + padding-left: 0; } .receiptHeader { @@ -48,8 +50,6 @@ font-size: 1.25rem; font-weight: 600; line-height: 130%; /* 1.625rem */ - font-size: 1.75rem; - font-family: "ExtraBold"; letter-spacing: -0.0125rem; } diff --git a/src/pages/Inventory/Inventory.css b/src/pages/Inventory/Inventory.css deleted file mode 100644 index 435245c..0000000 --- a/src/pages/Inventory/Inventory.css +++ /dev/null @@ -1,15 +0,0 @@ -.inven-wrapper{ - display: flex; - -} - -nav{ - width: 8.875rem; - height: 46.25rem; - /* height: 42.5rem; */ - z-index: 1; -} - -main{ - width: calc(100vw - 8.875rem); -} \ No newline at end of file diff --git a/src/pages/Inventory/Inventory.jsx b/src/pages/Inventory/Inventory.jsx index 4f44301..27a84ef 100644 --- a/src/pages/Inventory/Inventory.jsx +++ b/src/pages/Inventory/Inventory.jsx @@ -1,17 +1,19 @@ import React from "react"; +import { Col, Row } from "react-bootstrap"; import NavBar from "../../components/views/NavBar/NavBar"; -import "./Inventory.css"; import MainInven from "./MainInven"; const Inventory = () => { return ( -
- -
+ + -
+ +
); }; diff --git a/src/pages/Inventory/MainInven.css b/src/pages/Inventory/MainInven.css deleted file mode 100644 index 7485d46..0000000 --- a/src/pages/Inventory/MainInven.css +++ /dev/null @@ -1,204 +0,0 @@ -.mainInven-wrapper{ - width: 100%; - /* height: 100%; */ -} - -.mainInven-title__wrapper{ - display: flex; - height: 5.0625rem; - width: 100%; - background-color: #4F4F4F; - border-bottom: 0.5rem solid #d82356; - position: relative; -} - -.mainInven-title__wrapper span{ - font-size: 1.875rem; - font-family: "Bold"; - color: #fff; - text-align: center; - line-height: 4.5625rem; - white-space: nowrap; -} - -.mainInven-title__span1{ - width: 15%; - min-width: 8.3125rem; -} - -.mainInven-title__span2__wrapper{ - width: 25%; - min-width: 17.8125rem; - display: flex; - justify-content: space-between; -} - -.mainInven-title__span2{ - /* width: 25%; */ -} - -.mainInven-title__span3{ - width: 60%; - min-width: 39.625rem; -} - -.mainInven-category__modal{ - position: absolute; - left: calc((100vw - 8.875rem) * 0.275); - display: flex; - flex-direction: column; - width: 17.1875rem; - border-radius: 0 0 0.625rem 0.625rem; - background-color: #4F4F4F; - z-index: 0; -} - -.mainInven-category__modal span{ - width: 17.1875rem; - height: 3.0625rem; - line-height: 3.0625rem; - font-size: 1.5625rem; - font-family: "SemiBold"; - color: #fff; - /* background-color: #4F4F4F; */ -} - -.mainInven-category__line{ - background-color: #dadada; - width: 100%; - height: 0.0625rem; -} - -.mainInven-category-content__wrapper{ - width: 100%; - height: calc(46.25rem - 5.0625rem); - /* height: calc(42.5rem - 5.0625rem); */ - overflow-y: auto; -} - -.mainInven-category-content__wrapper::-webkit-scrollbar { - display: none; -} - -.mainInven-category-content__wrapper { - -ms-overflow-style: none; /* 인터넷 익스플로러 */ - scrollbar-width: none; /* 파이어폭스 */ -} - -.mainInven-category-content__box{ - display: flex; - - width: 100%; - height: 3.6875rem; - border-bottom: #dadada solid 0.125rem; -} - -.mainInven-category-content__box.selected{ - background-color: rgba(216, 35, 86, 0.15); -} - -.mainInven-category-content__box span{ - font-size: 1.5625rem; - font-family: "Medium"; - color: #4f4f4f; - line-height: 3.6875rem; -} - -.mainInven-category-checkbox{ - height: 2.1875rem; - width: 2.1875rem; - border:#dadada solid 0.1875rem; - border-radius: 0.125rem; -} - -.mainInven-category-checkbox.selected{ - background: #d82356 url( "../../assets/icons/icon_check.svg" ) no-repeat center center; - - border: none; -} - -.mainInven-category-content__span1{ - width: 15%; - min-width: 8.3125rem; - - display: flex; - justify-content: center; - align-items: center; -} - -.mainInven-category-content__span2{ - width: 25%; - min-width: 17.8125rem; - - white-space: nowrap; -} - -.mainInven-category-content__span3{ - width: 60%; - min-width: 39.625rem; - - white-space: nowrap; -} - -/* 모달 */ -.modal-wrapper{ - position: absolute; - top: 5.5rem; - bottom: 0; - left: 8.875rem; - right: 0; - height: 46.25rem; - background-color: rgba(0,0,0, 0.5); - - display: flex; -} - -.modal-box{ - position: absolute; - top: calc(50% - 12.15625rem); - left: calc(50% - 17.1875rem); - - width: 34.375rem; - height: 24.3125rem; - background-color: #fff; - border-radius: 2.8125rem; - z-index: 101; - padding: 2.0625rem 3.25rem; -} - -.modal-close__wrapper{ - display: flex; - justify-content: end; -} - -.modal-box-img__wrapper{ - height: 30%; -} - -.modal-box-txt__wrapper{ - height: 30%; -} - -.modal-box-txt{ - font-size: 1.5625rem; - font-family: "SemiBold"; -} - -.modal-box-close-btn__wrapper{ - display: flex; - flex-direction: column; - justify-content: flex-end; - height: 30%; -} - -.modal-box-close-btn{ - width: 19.375rem; - height: 3.125rem; - margin: 0 auto; - color: #fff; - background-color: #d82356; - font-size: 1.5625rem; - font-family: "SemiBold"; - line-height: 3.125rem; - border-radius: 0.5rem; -} \ No newline at end of file diff --git a/src/pages/Inventory/MainInven.jsx b/src/pages/Inventory/MainInven.jsx index acb6886..90b5825 100644 --- a/src/pages/Inventory/MainInven.jsx +++ b/src/pages/Inventory/MainInven.jsx @@ -1,220 +1,11 @@ -import React, { useEffect, useState } from "react"; -import close from "../../assets/icons/icon_closeModal.svg"; -import downArrow from "../../assets/icons/icon_downArrow.svg"; -import upArrow from "../../assets/icons/icon_upArrow.svg"; -import cherry from "../../assets/icons/small_cherry.svg"; -import InvenBox from "../../components/views/Inven/InvenBox"; -import "./MainInven.css"; - - -function MainInven () { - const [category, setCategory] = useState("전체"); - const [isCategoryOpen, setIsCategoryOpen] = useState(false); - const [isModalOpen, setIsModalOpen] = useState(false); - - const categoryList = ["전체", "커피", "논커피", "티", "에이드", "프라페", "스무디", "마카롱", "아이스크림", "와플", "크로플", "베이커리"]; - const chnMenu = () => setIsCategoryOpen(!isCategoryOpen); - - const chnCategory = (e) => { - setCategory(e); - setIsCategoryOpen((prev) => !prev); - } - - const handleModal = () => { - setIsModalOpen((prev) => !prev); - - // /api/v1/inventory [patch] - // /api/v1/inventory [get] - } - - useEffect(() => { - const handleClickOutside = (e) => { - const layerPopup = document.querySelector(".mainInven-category__modal"); - if (layerPopup && !layerPopup.contains(e.target)) { - setIsCategoryOpen(false); - } - }; - - document.addEventListener("mouseup", handleClickOutside); - return () => { - document.removeEventListener("mouseup", handleClickOutside); - }; - }, []); - - const invenList = { - "category" : [ - { - "name" : "커피", - "foodies" : [ - { - "idx" : 123, - "name": "아메리카노", - "soldOut" : true, - - }, - { - "idx" : 133, - "name": "라떼", - "soldOut" : false, - - }, - ], - - }, - { - "name" : "티", - "foodies" : [ - { - "idx" : 124, - "name": "녹차", - "soldOut" : true, - - }, - { - "idx" : 143, - "name": "홍차", - "soldOut" : false, - - }, - ], - - }, - { - "name" : "에이드", - "foodies" : [ - { - "idx" : 125, - "name": "망고 에이드", - "soldOut" : true, - - }, - { - "idx" : 153, - "name": "청포도 에이드", - "soldOut" : false, - - }, - ], - - }, - { - "name" : "프라페", - "foodies" : [ - { - "idx" : 126, - "name": "오레오 프라페", - "soldOut" : true, - - }, - { - "idx" : 163, - "name": "초코 프라페", - "soldOut" : false, - - }, - ], - - }, - { - "name" : "스무디", - "foodies" : [ - { - "idx" : 127, - "name": "무화과 스무디", - "soldOut" : true, - - }, - { - "idx" : 173, - "name": "망고 스무디", - "soldOut" : false, - - }, - ], - - }, - { - "name" : "마카롱", - "foodies" : [ - { - "idx" : 128, - "name": "앙버터 마카롱", - "soldOut" : true, - - }, - { - "idx" : 183, - "name": "로투스 마카롱", - "soldOut" : false, - - }, - ], - - }, - ], - }; +import React from "react"; +const inven = () => { return ( -
-
- 품절 -
- - {category} - {isCategoryOpen ? (downArrow) : (upArrow)} -
- 상품명 -
- - {isCategoryOpen && ( -
- {categoryList.map((e, i) => ( - <> - chnCategory(e)}>{e} -
- - ))} -
- )} - -
- {invenList.category - .filter((cate) => category === "전체" || cate.name === category) - .map((categoryItem) => - categoryItem.foodies.map((foodItem) => ( -
- -
- ) - ))} -
- - {isModalOpen && ( -
-
-
- close -
-
cherry
-
-
품절 처리 시
-
고객님은 해당 메뉴를 주문할 수 없습니다.
-
-
-
확인
-
-
-
- )} +
+

Inventory

); }; -export default MainInven; +export default inven; diff --git a/src/pages/Mypage/MainMypage.css b/src/pages/Mypage/MainMypage.css deleted file mode 100644 index 589cfc9..0000000 --- a/src/pages/Mypage/MainMypage.css +++ /dev/null @@ -1,112 +0,0 @@ -.mypage-main__wrapper{ - display: flex; - flex-direction: column; - - padding: 4.3125rem 4rem 2rem 4rem; - width: 100%; - height: 100%; - - justify-content: space-between; -} - -.mypage-top__wrapper{ - width: 100%; -} - -.mypage-top__txt{ - font-size: 1.25rem; - font-family: "Bold"; - color: #4f4f4f; -} - -.mypage-top__box{ - display: flex; - justify-content: space-between; -} - -.mypage-top-txt__wrapper{ - text-align: start; -} - -.mypage-top-cafe__txt{ - font-size: 1.875rem; - font-family: "Bold"; - white-space: nowrap; -} - -.mypage-top-cafe__txt span{ - font-size: 3.125rem; -} - -.mypage-kakao__wrapper{ - display: flex; - flex-direction: row; - align-items: center; -} - -.mypage-kakao__txt{ - display: flex; - flex-direction: column; - text-align: start; - margin: 0 3.4375rem 0 0.6875rem; -} - -.mypage-kakao__txt span{ - font-size: 1.09rem; - font-family: "Medium"; - color: #838383; -} - -.mypage-kakao-img__box{ - width: 3.625rem; - height: 2.5rem; - border-radius: 0.625rem; - background-color: #d9d9d9; - padding: 0.59375rem 0; -} - -.mypage__line{ - height: 0.15625rem; - width: 100%; - background-color: #dadada; - margin: 1.5625rem 0; -} - -.mypage-content__wrapper{ - width: 100%; - text-align: start; -} - -.mypage-content__wrapper p{ - font-size: 1.875rem; - font-family: "Bold"; - color: #4f4f4f; - margin: 2rem 0; -} - -.mypage-content__box div{ - display: flex; /* 추가: 내부 div들을 가로로 나열하기 위해 Flexbox 사용 */ - justify-content: space-between; - width: 100%; - margin: 0.625rem 0; -} - -.mypage-content__title{ - font-size: 1.875rem; - font-family: "Medium"; - color: #000; - width: 30%; -} - -.mypage-content__txt{ - font-size: 1.5625rem; - font-family: "Light"; - color: #000; - width: 70%; -} - -.mypage-logout__wrapper span{ - font-size: 0.9375rem; - font-family: "Regular"; - color: #838383; -} \ No newline at end of file diff --git a/src/pages/Mypage/MainMypage.jsx b/src/pages/Mypage/MainMypage.jsx index 04ca7d1..d93830f 100644 --- a/src/pages/Mypage/MainMypage.jsx +++ b/src/pages/Mypage/MainMypage.jsx @@ -1,61 +1,9 @@ import React from "react"; -import kakao from "../../assets/icons/icon_kakao.svg"; -import readyvery from "../../assets/icons/img_readyVery.svg"; -import "./MainMypage.css"; const MainMypage = () => { return ( -
-
-
-
- 오늘도 준비된 -
오르다커피 사장님
-
-
-
readyvery
-
- 레디베리 상담 - 매일 00:00 ~ 24:00 -
-
kakao
-
-
- -
- -
-

기본 정보

-
-
- 가게명 - 오르다커피 -
- -
- 가게주소 - 경기 부천시 지봉로 46 백호빌딩 2층 -
- -
- 매장 연락처 - 0507-1358-6887 -
- -
- 영업시간 - 평일 08:40-23:00 / 토요일 11:00-22:00 / 일요일 휴무 -
- -
- 등록 계좌번호 - KB국민은행 22930104331825 -
-
-
-
- -
로그아웃
+
+

Mypage

); }; diff --git a/src/pages/Mypage/Mypage.css b/src/pages/Mypage/Mypage.css deleted file mode 100644 index 2cdbd1a..0000000 --- a/src/pages/Mypage/Mypage.css +++ /dev/null @@ -1,14 +0,0 @@ -.mypage-wrapper{ - display: flex; - -} - -nav{ - width: 8.875rem; - height: 46.25rem; - /* height: 42.5rem; */ -} - -main{ - width: calc(100vw - 8.875rem); -} \ No newline at end of file diff --git a/src/pages/Mypage/Mypage.jsx b/src/pages/Mypage/Mypage.jsx index 3a6e50d..f0de064 100644 --- a/src/pages/Mypage/Mypage.jsx +++ b/src/pages/Mypage/Mypage.jsx @@ -1,17 +1,19 @@ import React from "react"; +import { Col, Row } from "react-bootstrap"; import NavBar from "../../components/views/NavBar/NavBar"; import MainMypage from "./MainMypage"; -import "./Mypage.css"; const Mypage = () => { return ( -
- -
- -
+
+ + + + + + + +
); }; diff --git a/src/pages/Sales/MainSales.css b/src/pages/Sales/MainSales.css deleted file mode 100644 index 708f2ab..0000000 --- a/src/pages/Sales/MainSales.css +++ /dev/null @@ -1,4 +0,0 @@ -.sales-main__wrapper{ - width: 100%; - height: 100%; -} \ No newline at end of file diff --git a/src/pages/Sales/MainSales.jsx b/src/pages/Sales/MainSales.jsx index 46476af..a0181f6 100644 --- a/src/pages/Sales/MainSales.jsx +++ b/src/pages/Sales/MainSales.jsx @@ -1,9 +1,8 @@ import React from "react"; -import "./MainSales.css"; const MainSales = () => { return ( -
+

Sales

); diff --git a/src/pages/Sales/Sales.css b/src/pages/Sales/Sales.css deleted file mode 100644 index 27c1e43..0000000 --- a/src/pages/Sales/Sales.css +++ /dev/null @@ -1,13 +0,0 @@ -.mypage-wrapper{ - display: flex; - -} - -nav{ - width: 8.875rem; - height: 46.25rem; -} - -main{ - width: calc(100vw - 8.875rem); -} \ No newline at end of file diff --git a/src/pages/Sales/Sales.jsx b/src/pages/Sales/Sales.jsx index dfc3465..c15b4fe 100644 --- a/src/pages/Sales/Sales.jsx +++ b/src/pages/Sales/Sales.jsx @@ -1,16 +1,19 @@ import React from "react"; +import { Col, Row } from "react-bootstrap"; import NavBar from "../../components/views/NavBar/NavBar"; -import MainSales from "./MainSales"; +import MainMypage from "../Mypage/MainMypage"; const Sales = () => { return ( -
- -
- -
+
+ + + + + + + +
); };