From dafcd237890055f9c3a49147a0bdf04092c6e995 Mon Sep 17 00:00:00 2001 From: happppi <102276917+hhbb0081@users.noreply.github.com> Date: Fri, 17 Nov 2023 14:04:12 +0900 Subject: [PATCH 1/6] =?UTF-8?q?Style:=20=ED=99=88=20=ED=99=94=EB=A9=B4=20?= =?UTF-8?q?=EC=8A=A4=ED=83=80=EC=9D=BC=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .github/workflows/main_merge.yml | 73 --------------------- .github/workflows/main_pr.yml | 91 -------------------------- .github/workflows/test_merge.yml | 80 ---------------------- .github/workflows/test_pr.yml | 83 ----------------------- src/assets/icons/cherry.svg | 23 ------- src/components/views/Header/Header.css | 14 ++-- src/components/views/Header/Header.jsx | 4 +- src/components/views/NavBar/NavBar.css | 1 + src/components/views/NavBar/NavBar.jsx | 22 +++---- src/index.css | 6 ++ src/pages/Home/Receipt.css | 20 +++--- 11 files changed, 37 insertions(+), 380 deletions(-) delete mode 100644 .github/workflows/main_merge.yml delete mode 100644 .github/workflows/main_pr.yml delete mode 100644 .github/workflows/test_merge.yml delete mode 100644 .github/workflows/test_pr.yml delete mode 100644 src/assets/icons/cherry.svg diff --git a/.github/workflows/main_merge.yml b/.github/workflows/main_merge.yml deleted file mode 100644 index 078f0e0..0000000 --- a/.github/workflows/main_merge.yml +++ /dev/null @@ -1,73 +0,0 @@ -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 deleted file mode 100644 index 0ec251a..0000000 --- a/.github/workflows/main_pr.yml +++ /dev/null @@ -1,91 +0,0 @@ -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 deleted file mode 100644 index 1f31915..0000000 --- a/.github/workflows/test_merge.yml +++ /dev/null @@ -1,80 +0,0 @@ -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 deleted file mode 100644 index c1f34fa..0000000 --- a/.github/workflows/test_pr.yml +++ /dev/null @@ -1,83 +0,0 @@ -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/cherry.svg b/src/assets/icons/cherry.svg deleted file mode 100644 index 3981ec8..0000000 --- a/src/assets/icons/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 f6e34b8..bed1fd1 100644 --- a/src/components/views/Header/Header.css +++ b/src/components/views/Header/Header.css @@ -1,5 +1,7 @@ .header { - width: 100%; + /* width: 100%; */ + min-width: 73.75rem; + /* min-width: 64rem; */ height: 5.5rem; background-color: #2e2d2d; } @@ -19,13 +21,15 @@ align-items: center; } +.store-img__wrapper{ + margin: 0 0.5625rem; +} + .font { + /* line-height: 100%; 1.875rem */ color: #fff; - font-family: Pretendard; font-size: 1.875rem; - font-style: normal; - font-weight: 600; - line-height: 100%; /* 1.875rem */ + font-family: "SemiBold"; } .head-container { diff --git a/src/components/views/Header/Header.jsx b/src/components/views/Header/Header.jsx index 02170c8..244622e 100644 --- a/src/components/views/Header/Header.jsx +++ b/src/components/views/Header/Header.jsx @@ -27,12 +27,12 @@ const Header = () => { {!Store ? (
- Open +
Open
영업중
) : (
- Close +
Close
영업종료
)} diff --git a/src/components/views/NavBar/NavBar.css b/src/components/views/NavBar/NavBar.css index cf593fc..f6ab586 100644 --- a/src/components/views/NavBar/NavBar.css +++ b/src/components/views/NavBar/NavBar.css @@ -1,6 +1,7 @@ .navbar { width: 8.875rem; height: 46.25rem; + /* height: 42.5rem; */ background-color: #2e2d2d; display: flex; diff --git a/src/components/views/NavBar/NavBar.jsx b/src/components/views/NavBar/NavBar.jsx index bf91bd1..e9b8a26 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 { Nav } from "react-bootstrap"; +import { Link } from "react-router-dom"; 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 ec2585e..037be5b 100644 --- a/src/index.css +++ b/src/index.css @@ -5,6 +5,12 @@ 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 bd184c8..eaf0b73 100644 --- a/src/pages/Home/Receipt.css +++ b/src/pages/Home/Receipt.css @@ -1,28 +1,24 @@ .rounded-rectangle { width: 100%; /* 너비 설정 */ height: 97%; /* 높이 설정 */ - background-color: #f5f5f5; /* 배경색 설정 */ - border-radius: 20px; /* 모서리를 둥글게 만드는 값 */ - text-align: center; /* 가운데 정렬 */ + background-color: #F5F5F5; /* 배경색 설정 */ + border-radius: 1.875rem; /* 모서리를 둥글게 만드는 값 */ color: #000; /* 텍스트 색상 설정 */ - font-size: 18px; /* 폰트 크기 설정 */ - line-height: 100px; /* 수직 가운데 정렬을 위한 높이 설정 */ - box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5); + box-shadow: 0px 0.25rem 0.375rem rgba(0, 0, 0, 0.25); } .Box { width: 100%; /* 너비 설정 */ height: 100%; /* 높이 설정 */ - padding-top: 5%; - padding-left: 0; + /* height: 42.5rem; */ + /* padding-top: 5%; */ + /* padding-left: 0; */ } .top-font { color: #000; - font-family: Pretendard; - font-size: 1.25rem; - font-style: normal; - font-weight: 700; line-height: 130%; /* 1.625rem */ + font-size: 1.75rem; + font-family: "ExtraBold"; letter-spacing: -0.0125rem; } From ef78a913391958fab4af9e1a788e515e31fe9185 Mon Sep 17 00:00:00 2001 From: happppi <102276917+hhbb0081@users.noreply.github.com> Date: Fri, 17 Nov 2023 14:04:49 +0900 Subject: [PATCH 2/6] =?UTF-8?q?Feat:=20=EC=9E=AC=EA=B3=A0=EA=B4=80?= =?UTF-8?q?=EB=A6=AC=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/icons/icon_check.svg | 3 + src/assets/icons/icon_closeModal.svg | 3 + src/assets/icons/icon_downArrow.svg | 3 + src/assets/icons/icon_kakao.svg | 3 + src/assets/icons/icon_upArrow.svg | 3 + src/assets/icons/img_readyVery.svg | 25 +++ src/assets/icons/small_cherry.svg | 23 +++ src/components/views/Inven/InvenBox.jsx | 19 ++ src/pages/Inventory/Inventory.css | 15 ++ src/pages/Inventory/Inventory.jsx | 14 +- src/pages/Inventory/MainInven.css | 204 ++++++++++++++++++++++ src/pages/Inventory/MainInven.jsx | 219 +++++++++++++++++++++++- 12 files changed, 521 insertions(+), 13 deletions(-) create mode 100644 src/assets/icons/icon_check.svg create mode 100644 src/assets/icons/icon_closeModal.svg create mode 100644 src/assets/icons/icon_downArrow.svg create mode 100644 src/assets/icons/icon_kakao.svg create mode 100644 src/assets/icons/icon_upArrow.svg create mode 100644 src/assets/icons/img_readyVery.svg create mode 100644 src/assets/icons/small_cherry.svg create mode 100644 src/components/views/Inven/InvenBox.jsx create mode 100644 src/pages/Inventory/Inventory.css create mode 100644 src/pages/Inventory/MainInven.css diff --git a/src/assets/icons/icon_check.svg b/src/assets/icons/icon_check.svg new file mode 100644 index 0000000..7b6ec19 --- /dev/null +++ b/src/assets/icons/icon_check.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/icons/icon_closeModal.svg b/src/assets/icons/icon_closeModal.svg new file mode 100644 index 0000000..2369bab --- /dev/null +++ b/src/assets/icons/icon_closeModal.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/icons/icon_downArrow.svg b/src/assets/icons/icon_downArrow.svg new file mode 100644 index 0000000..91ed8f1 --- /dev/null +++ b/src/assets/icons/icon_downArrow.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/icons/icon_kakao.svg b/src/assets/icons/icon_kakao.svg new file mode 100644 index 0000000..e9632f0 --- /dev/null +++ b/src/assets/icons/icon_kakao.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/icons/icon_upArrow.svg b/src/assets/icons/icon_upArrow.svg new file mode 100644 index 0000000..07f2a16 --- /dev/null +++ b/src/assets/icons/icon_upArrow.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/icons/img_readyVery.svg b/src/assets/icons/img_readyVery.svg new file mode 100644 index 0000000..012f64d --- /dev/null +++ b/src/assets/icons/img_readyVery.svg @@ -0,0 +1,25 @@ + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/icons/small_cherry.svg b/src/assets/icons/small_cherry.svg new file mode 100644 index 0000000..0ad363c --- /dev/null +++ b/src/assets/icons/small_cherry.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/components/views/Inven/InvenBox.jsx b/src/components/views/Inven/InvenBox.jsx new file mode 100644 index 0000000..0bf9249 --- /dev/null +++ b/src/components/views/Inven/InvenBox.jsx @@ -0,0 +1,19 @@ +const InvenBox = ({handleModal, invenProps: {category, name, soldOut}}) => { + return( + <> +
+ + {!soldOut ? ( +
+ ) : ( +
+ )} + + {category} + {name} +
+ + ); +} + +export default InvenBox; \ No newline at end of file diff --git a/src/pages/Inventory/Inventory.css b/src/pages/Inventory/Inventory.css new file mode 100644 index 0000000..435245c --- /dev/null +++ b/src/pages/Inventory/Inventory.css @@ -0,0 +1,15 @@ +.inven-wrapper{ + display: flex; + +} + +nav{ + width: 8.875rem; + height: 46.25rem; + /* height: 42.5rem; */ + z-index: 1; +} + +main{ + width: calc(100vw - 8.875rem); +} \ No newline at end of file diff --git a/src/pages/Inventory/Inventory.jsx b/src/pages/Inventory/Inventory.jsx index 27a84ef..4f44301 100644 --- a/src/pages/Inventory/Inventory.jsx +++ b/src/pages/Inventory/Inventory.jsx @@ -1,19 +1,17 @@ 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 new file mode 100644 index 0000000..7485d46 --- /dev/null +++ b/src/pages/Inventory/MainInven.css @@ -0,0 +1,204 @@ +.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 90b5825..acb6886 100644 --- a/src/pages/Inventory/MainInven.jsx +++ b/src/pages/Inventory/MainInven.jsx @@ -1,11 +1,220 @@ -import React from "react"; +import React, { useEffect, useState } from "react"; +import close from "../../assets/icons/icon_closeModal.svg"; +import downArrow from "../../assets/icons/icon_downArrow.svg"; +import upArrow from "../../assets/icons/icon_upArrow.svg"; +import cherry from "../../assets/icons/small_cherry.svg"; +import InvenBox from "../../components/views/Inven/InvenBox"; +import "./MainInven.css"; + + +function MainInven () { + const [category, setCategory] = useState("전체"); + const [isCategoryOpen, setIsCategoryOpen] = useState(false); + const [isModalOpen, setIsModalOpen] = useState(false); + + const categoryList = ["전체", "커피", "논커피", "티", "에이드", "프라페", "스무디", "마카롱", "아이스크림", "와플", "크로플", "베이커리"]; + const chnMenu = () => setIsCategoryOpen(!isCategoryOpen); + + const chnCategory = (e) => { + setCategory(e); + setIsCategoryOpen((prev) => !prev); + } + + const handleModal = () => { + setIsModalOpen((prev) => !prev); + + // /api/v1/inventory [patch] + // /api/v1/inventory [get] + } + + useEffect(() => { + const handleClickOutside = (e) => { + const layerPopup = document.querySelector(".mainInven-category__modal"); + if (layerPopup && !layerPopup.contains(e.target)) { + setIsCategoryOpen(false); + } + }; + + document.addEventListener("mouseup", handleClickOutside); + return () => { + document.removeEventListener("mouseup", handleClickOutside); + }; + }, []); + + const invenList = { + "category" : [ + { + "name" : "커피", + "foodies" : [ + { + "idx" : 123, + "name": "아메리카노", + "soldOut" : true, + + }, + { + "idx" : 133, + "name": "라떼", + "soldOut" : false, + + }, + ], + + }, + { + "name" : "티", + "foodies" : [ + { + "idx" : 124, + "name": "녹차", + "soldOut" : true, + + }, + { + "idx" : 143, + "name": "홍차", + "soldOut" : false, + + }, + ], + + }, + { + "name" : "에이드", + "foodies" : [ + { + "idx" : 125, + "name": "망고 에이드", + "soldOut" : true, + + }, + { + "idx" : 153, + "name": "청포도 에이드", + "soldOut" : false, + + }, + ], + + }, + { + "name" : "프라페", + "foodies" : [ + { + "idx" : 126, + "name": "오레오 프라페", + "soldOut" : true, + + }, + { + "idx" : 163, + "name": "초코 프라페", + "soldOut" : false, + + }, + ], + + }, + { + "name" : "스무디", + "foodies" : [ + { + "idx" : 127, + "name": "무화과 스무디", + "soldOut" : true, + + }, + { + "idx" : 173, + "name": "망고 스무디", + "soldOut" : false, + + }, + ], + + }, + { + "name" : "마카롱", + "foodies" : [ + { + "idx" : 128, + "name": "앙버터 마카롱", + "soldOut" : true, + + }, + { + "idx" : 183, + "name": "로투스 마카롱", + "soldOut" : false, + + }, + ], + + }, + ], + }; -const inven = () => { return ( -
-

Inventory

+
+
+ 품절 +
+ + {category} + {isCategoryOpen ? (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
+
+
품절 처리 시
+
고객님은 해당 메뉴를 주문할 수 없습니다.
+
+
+
확인
+
+
+
+ )}
); }; -export default inven; +export default MainInven; From b85dd7b401cc8431f7ef7f0c8cdd1e1c7d473180 Mon Sep 17 00:00:00 2001 From: happppi <102276917+hhbb0081@users.noreply.github.com> Date: Fri, 17 Nov 2023 14:05:02 +0900 Subject: [PATCH 3/6] =?UTF-8?q?Feat:=20=EB=A7=88=EC=9D=B4=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/Mypage/MainMypage.css | 112 ++++++++++++++++++++++++++++++++ src/pages/Mypage/MainMypage.jsx | 56 +++++++++++++++- src/pages/Mypage/Mypage.css | 14 ++++ src/pages/Mypage/Mypage.jsx | 18 +++-- src/pages/Sales/MainSales.css | 4 ++ src/pages/Sales/MainSales.jsx | 3 +- src/pages/Sales/Sales.css | 13 ++++ src/pages/Sales/Sales.jsx | 19 +++--- 8 files changed, 215 insertions(+), 24 deletions(-) create mode 100644 src/pages/Mypage/MainMypage.css create mode 100644 src/pages/Mypage/Mypage.css create mode 100644 src/pages/Sales/MainSales.css create mode 100644 src/pages/Sales/Sales.css diff --git a/src/pages/Mypage/MainMypage.css b/src/pages/Mypage/MainMypage.css new file mode 100644 index 0000000..589cfc9 --- /dev/null +++ b/src/pages/Mypage/MainMypage.css @@ -0,0 +1,112 @@ +.mypage-main__wrapper{ + display: flex; + flex-direction: column; + + padding: 4.3125rem 4rem 2rem 4rem; + width: 100%; + height: 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 d93830f..04ca7d1 100644 --- a/src/pages/Mypage/MainMypage.jsx +++ b/src/pages/Mypage/MainMypage.jsx @@ -1,9 +1,61 @@ import React from "react"; +import kakao from "../../assets/icons/icon_kakao.svg"; +import readyvery from "../../assets/icons/img_readyVery.svg"; +import "./MainMypage.css"; const MainMypage = () => { return ( -
-

Mypage

+
+
+
+
+ 오늘도 준비된 +
오르다커피 사장님
+
+
+
readyvery
+
+ 레디베리 상담 + 매일 00:00 ~ 24:00 +
+
kakao
+
+
+ +
+ +
+

기본 정보

+
+
+ 가게명 + 오르다커피 +
+ +
+ 가게주소 + 경기 부천시 지봉로 46 백호빌딩 2층 +
+ +
+ 매장 연락처 + 0507-1358-6887 +
+ +
+ 영업시간 + 평일 08:40-23:00 / 토요일 11:00-22:00 / 일요일 휴무 +
+ +
+ 등록 계좌번호 + KB국민은행 22930104331825 +
+
+
+
+ +
로그아웃
); }; diff --git a/src/pages/Mypage/Mypage.css b/src/pages/Mypage/Mypage.css new file mode 100644 index 0000000..2cdbd1a --- /dev/null +++ b/src/pages/Mypage/Mypage.css @@ -0,0 +1,14 @@ +.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 f0de064..3a6e50d 100644 --- a/src/pages/Mypage/Mypage.jsx +++ b/src/pages/Mypage/Mypage.jsx @@ -1,19 +1,17 @@ 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 new file mode 100644 index 0000000..708f2ab --- /dev/null +++ b/src/pages/Sales/MainSales.css @@ -0,0 +1,4 @@ +.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 a0181f6..46476af 100644 --- a/src/pages/Sales/MainSales.jsx +++ b/src/pages/Sales/MainSales.jsx @@ -1,8 +1,9 @@ import React from "react"; +import "./MainSales.css"; const MainSales = () => { return ( -
+

Sales

); diff --git a/src/pages/Sales/Sales.css b/src/pages/Sales/Sales.css new file mode 100644 index 0000000..27c1e43 --- /dev/null +++ b/src/pages/Sales/Sales.css @@ -0,0 +1,13 @@ +.mypage-wrapper{ + display: flex; + +} + +nav{ + width: 8.875rem; + height: 46.25rem; +} + +main{ + width: calc(100vw - 8.875rem); +} \ No newline at end of file diff --git a/src/pages/Sales/Sales.jsx b/src/pages/Sales/Sales.jsx index c15b4fe..dfc3465 100644 --- a/src/pages/Sales/Sales.jsx +++ b/src/pages/Sales/Sales.jsx @@ -1,19 +1,16 @@ import React from "react"; -import { Col, Row } from "react-bootstrap"; import NavBar from "../../components/views/NavBar/NavBar"; -import MainMypage from "../Mypage/MainMypage"; +import MainSales from "./MainSales"; const Sales = () => { return ( -
- - - - - - - - +
+ +
+ +
); }; From f38d6fa2dbab0c6432d3a2e77a2f27b4fe4073de Mon Sep 17 00:00:00 2001 From: Joowon Lim Date: Fri, 17 Nov 2023 14:34:45 +0900 Subject: [PATCH 4/6] =?UTF-8?q?Revert=20"Feat:=20=EC=9E=AC=EA=B3=A0?= =?UTF-8?q?=EA=B4=80=EB=A6=AC=20&=20=EB=A7=88=EC=9D=B4=ED=8E=98=EC=9D=B4?= =?UTF-8?q?=EC=A7=80=20=EC=B6=94=EA=B0=80"?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .github/workflows/main_merge.yml | 73 ++++++ .github/workflows/main_pr.yml | 91 ++++++++ .github/workflows/test_merge.yml | 80 +++++++ .github/workflows/test_pr.yml | 83 +++++++ .../icons/{img_readyVery.svg => cherry.svg} | 24 +- src/assets/icons/icon_check.svg | 3 - src/assets/icons/icon_closeModal.svg | 3 - src/assets/icons/icon_downArrow.svg | 3 - src/assets/icons/icon_kakao.svg | 3 - src/assets/icons/icon_upArrow.svg | 3 - src/assets/icons/small_cherry.svg | 23 -- src/components/views/Header/Header.css | 13 +- src/components/views/Header/Header.jsx | 8 +- src/components/views/Inven/InvenBox.jsx | 19 -- src/components/views/NavBar/NavBar.css | 1 - src/components/views/NavBar/NavBar.jsx | 22 +- src/index.css | 6 - src/pages/Home/Receipt.css | 16 +- src/pages/Inventory/Inventory.css | 15 -- src/pages/Inventory/Inventory.jsx | 14 +- src/pages/Inventory/MainInven.css | 204 ---------------- src/pages/Inventory/MainInven.jsx | 219 +----------------- src/pages/Mypage/MainMypage.css | 112 --------- src/pages/Mypage/MainMypage.jsx | 56 +---- src/pages/Mypage/Mypage.css | 14 -- src/pages/Mypage/Mypage.jsx | 18 +- src/pages/Sales/MainSales.css | 4 - src/pages/Sales/MainSales.jsx | 3 +- src/pages/Sales/Sales.css | 13 -- src/pages/Sales/Sales.jsx | 19 +- 30 files changed, 403 insertions(+), 762 deletions(-) create mode 100644 .github/workflows/main_merge.yml create mode 100644 .github/workflows/main_pr.yml create mode 100644 .github/workflows/test_merge.yml create mode 100644 .github/workflows/test_pr.yml rename src/assets/icons/{img_readyVery.svg => cherry.svg} (84%) delete mode 100644 src/assets/icons/icon_check.svg delete mode 100644 src/assets/icons/icon_closeModal.svg delete mode 100644 src/assets/icons/icon_downArrow.svg delete mode 100644 src/assets/icons/icon_kakao.svg delete mode 100644 src/assets/icons/icon_upArrow.svg delete mode 100644 src/assets/icons/small_cherry.svg delete mode 100644 src/components/views/Inven/InvenBox.jsx delete mode 100644 src/pages/Inventory/Inventory.css delete mode 100644 src/pages/Inventory/MainInven.css delete mode 100644 src/pages/Mypage/MainMypage.css delete mode 100644 src/pages/Mypage/Mypage.css delete mode 100644 src/pages/Sales/MainSales.css delete mode 100644 src/pages/Sales/Sales.css 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 ( -
- -
- -
+
+ + + + + + + +
); }; From 31cdb993a243952dd8b7c63c23114897e38504ae Mon Sep 17 00:00:00 2001 From: happppi <102276917+hhbb0081@users.noreply.github.com> Date: Fri, 17 Nov 2023 16:06:17 +0900 Subject: [PATCH 5/6] =?UTF-8?q?Feat:=20=EC=9E=AC=EA=B3=A0=EA=B4=80?= =?UTF-8?q?=EB=A6=AC=20&=20=EB=A7=88=EC=9D=B4=ED=8E=98=EC=9D=B4=EC=A7=80?= =?UTF-8?q?=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/icons/icon_check.svg | 3 + src/assets/icons/icon_closeModal.svg | 3 + src/assets/icons/icon_downArrow.svg | 3 + src/assets/icons/icon_kakao.svg | 3 + src/assets/icons/icon_upArrow.svg | 3 + src/assets/icons/img_readyVery.svg | 25 +++ src/assets/icons/small_cherry.svg | 23 +++ src/components/views/Header/Header.css | 41 ++++- src/components/views/Header/Header.jsx | 8 +- src/components/views/Header/Header2.jsx | 52 ++++++ src/components/views/Inven/InvenBox.jsx | 19 ++ src/components/views/NavBar/NavBar.css | 1 + src/pages/Home/DetailHome.css | 3 +- src/pages/Home/Receipt.css | 27 ++- src/pages/Home/Receipt.jsx | 5 + src/pages/Inventory/Inventory.css | 15 ++ src/pages/Inventory/Inventory.jsx | 16 +- src/pages/Inventory/MainInven.css | 206 ++++++++++++++++++++++ src/pages/Inventory/MainInven.jsx | 219 +++++++++++++++++++++++- src/pages/Mypage/MainMypage.css | 112 ++++++++++++ src/pages/Mypage/MainMypage.jsx | 56 +++++- src/pages/Mypage/Mypage.css | 16 ++ src/pages/Mypage/Mypage.jsx | 21 +-- src/pages/Sales/MainSales.css | 0 src/pages/Sales/MainSales.jsx | 3 +- src/pages/Sales/Sales.css | 13 ++ src/pages/Sales/Sales.jsx | 21 ++- 27 files changed, 862 insertions(+), 55 deletions(-) create mode 100644 src/assets/icons/icon_check.svg create mode 100644 src/assets/icons/icon_closeModal.svg create mode 100644 src/assets/icons/icon_downArrow.svg create mode 100644 src/assets/icons/icon_kakao.svg create mode 100644 src/assets/icons/icon_upArrow.svg create mode 100644 src/assets/icons/img_readyVery.svg create mode 100644 src/assets/icons/small_cherry.svg create mode 100644 src/components/views/Header/Header2.jsx create mode 100644 src/components/views/Inven/InvenBox.jsx create mode 100644 src/pages/Inventory/Inventory.css create mode 100644 src/pages/Inventory/MainInven.css create mode 100644 src/pages/Mypage/MainMypage.css create mode 100644 src/pages/Mypage/Mypage.css create mode 100644 src/pages/Sales/MainSales.css create mode 100644 src/pages/Sales/Sales.css diff --git a/src/assets/icons/icon_check.svg b/src/assets/icons/icon_check.svg new file mode 100644 index 0000000..7b6ec19 --- /dev/null +++ b/src/assets/icons/icon_check.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/icons/icon_closeModal.svg b/src/assets/icons/icon_closeModal.svg new file mode 100644 index 0000000..2369bab --- /dev/null +++ b/src/assets/icons/icon_closeModal.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/icons/icon_downArrow.svg b/src/assets/icons/icon_downArrow.svg new file mode 100644 index 0000000..91ed8f1 --- /dev/null +++ b/src/assets/icons/icon_downArrow.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/icons/icon_kakao.svg b/src/assets/icons/icon_kakao.svg new file mode 100644 index 0000000..e9632f0 --- /dev/null +++ b/src/assets/icons/icon_kakao.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/icons/icon_upArrow.svg b/src/assets/icons/icon_upArrow.svg new file mode 100644 index 0000000..07f2a16 --- /dev/null +++ b/src/assets/icons/icon_upArrow.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/icons/img_readyVery.svg b/src/assets/icons/img_readyVery.svg new file mode 100644 index 0000000..012f64d --- /dev/null +++ b/src/assets/icons/img_readyVery.svg @@ -0,0 +1,25 @@ + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/icons/small_cherry.svg b/src/assets/icons/small_cherry.svg new file mode 100644 index 0000000..0ad363c --- /dev/null +++ b/src/assets/icons/small_cherry.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/components/views/Header/Header.css b/src/components/views/Header/Header.css index 0719ff9..121d6c3 100644 --- a/src/components/views/Header/Header.css +++ b/src/components/views/Header/Header.css @@ -1,9 +1,39 @@ .header { - width: 100%; + /* width: 100%; */ + min-width: 73.75rem; + /* min-width: 64rem; */ height: 5.5rem; background-color: #2e2d2d; } +.header2{ + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + min-width: 73.75rem; + /* min-width: 64rem; */ + height: 5.5rem; + background-color: #2e2d2d; + z-index: 101; +} + +.header2-wrapper{ + display: flex; + justify-content: space-between; +} + +.head-container2{ + width: 23.6rem; + display: flex; + justify-content: space-evenly; +} + +.header-img-wrapper{ + display: flex; +} + .LOGO { width: 19.1875rem; height: 4rem; @@ -19,13 +49,14 @@ align-items: center; } +.store-img__wrapper{ + margin: 0 0.5625rem; +} + .header-font { color: #fff; - font-family: Pretendard; font-size: 1.875rem; - font-style: normal; - font-weight: 600; - line-height: 100%; /* 1.875rem */ + font-family: "SemiBold"; } .head-container { diff --git a/src/components/views/Header/Header.jsx b/src/components/views/Header/Header.jsx index be6e481..361a2ea 100644 --- a/src/components/views/Header/Header.jsx +++ b/src/components/views/Header/Header.jsx @@ -27,13 +27,13 @@ const Header = () => { {!Store ? (
- Open - 영업중 +
Open
+
영업중
) : (
- Close - 영업종료 +
Close
+
영업종료
)} {Sound ? ( diff --git a/src/components/views/Header/Header2.jsx b/src/components/views/Header/Header2.jsx new file mode 100644 index 0000000..6ab9cea --- /dev/null +++ b/src/components/views/Header/Header2.jsx @@ -0,0 +1,52 @@ +import React, { useState } from "react"; +import { useRecoilValue } from "recoil"; +import { storeState } from "../../../Atom/status"; +import StoreOff from "../../../assets/icons/Header/CloseLight.svg"; //영업종료 +import LOGO from "../../../assets/icons/Header/LOGO.svg"; //로고 +import StoreOn from "../../../assets/icons/Header/OpenLight.svg"; //영업중 +import SoundOff from "../../../assets/icons/Header/SoundOff.svg"; //소리끔 +import SoundOn from "../../../assets/icons/Header/SoundOn.svg"; //소리켬 +import "./Header.css"; + +const Header = () => { + const Store = useRecoilValue(storeState); + const [Sound, setSound] = useState(1); + + const onClickHandler = (e) => { + setSound(!Sound); + }; + + return ( +
+
+
+ LOGO +
+
+ {!Store ? ( +
+
Open
+
영업중
+
+ ) : ( +
+
Close
+
영업종료
+
+ )} + {Sound ? ( +
+ SoundOn +
+ ) : ( +
+ SoundOff +
+ )} +
+
+
+ ); +}; + +export default Header; diff --git a/src/components/views/Inven/InvenBox.jsx b/src/components/views/Inven/InvenBox.jsx new file mode 100644 index 0000000..0bf9249 --- /dev/null +++ b/src/components/views/Inven/InvenBox.jsx @@ -0,0 +1,19 @@ +const InvenBox = ({handleModal, invenProps: {category, name, soldOut}}) => { + return( + <> +
+ + {!soldOut ? ( +
+ ) : ( +
+ )} + + {category} + {name} +
+ + ); +} + +export default InvenBox; \ No newline at end of file diff --git a/src/components/views/NavBar/NavBar.css b/src/components/views/NavBar/NavBar.css index bf4d81b..09cfb25 100644 --- a/src/components/views/NavBar/NavBar.css +++ b/src/components/views/NavBar/NavBar.css @@ -1,6 +1,7 @@ .navbar { width: 8.875rem; height: 46.25rem; + /* height: 42.5rem; */ background-color: #2e2d2d; display: flex; diff --git a/src/pages/Home/DetailHome.css b/src/pages/Home/DetailHome.css index 635635a..ce2a1ea 100644 --- a/src/pages/Home/DetailHome.css +++ b/src/pages/Home/DetailHome.css @@ -4,7 +4,8 @@ align-content: flex-start; width: 100%; - height: 100%; + /* height: 100%; */ + overflow-y: auto; } .listTable { diff --git a/src/pages/Home/Receipt.css b/src/pages/Home/Receipt.css index 9191df7..88a4023 100644 --- a/src/pages/Home/Receipt.css +++ b/src/pages/Home/Receipt.css @@ -1,20 +1,18 @@ .rounded-rectangle { width: 100%; /* 너비 설정 */ height: 97%; /* 높이 설정 */ - background-color: #f5f5f5; /* 배경색 설정 */ - border-radius: 20px; /* 모서리를 둥글게 만드는 값 */ - text-align: center; /* 가운데 정렬 */ + background-color: #F5F5F5; /* 배경색 설정 */ + border-radius: 1.875rem; /* 모서리를 둥글게 만드는 값 */ color: #000; /* 텍스트 색상 설정 */ - font-size: 18px; /* 폰트 크기 설정 */ - line-height: 100px; /* 수직 가운데 정렬을 위한 높이 설정 */ - box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5); + box-shadow: 0px 0.25rem 0.375rem rgba(0, 0, 0, 0.25); } .Box { width: 100%; /* 너비 설정 */ height: 100%; /* 높이 설정 */ - padding-top: 5%; - padding-left: 0; + /* height: 42.5rem; */ + /* padding-top: 5%; */ + /* padding-left: 0; */ } .receiptHeader { @@ -33,6 +31,15 @@ letter-spacing: -0.0175rem; } +.receipt-btn__wrapper{ + /* width: 80%; + margin: 0 auto; */ + height: 100%; + display: flex; + align-items: center; + justify-content: center; +} + .receiptButton { display: flex; height: 5.5rem; @@ -44,12 +51,16 @@ padding: 3% 7% 1% 7%; } + + .receipt-text { color: #4f4f4f; font-family: "Light"; font-size: 1.25rem; font-weight: 600; line-height: 130%; /* 1.625rem */ + font-size: 1.25rem; + font-family: "SemiBold"; letter-spacing: -0.0125rem; } diff --git a/src/pages/Home/Receipt.jsx b/src/pages/Home/Receipt.jsx index cce69e8..b5c1789 100644 --- a/src/pages/Home/Receipt.jsx +++ b/src/pages/Home/Receipt.jsx @@ -32,6 +32,7 @@ const Receipt = () => {
+
+
+
+
diff --git a/src/pages/Inventory/Inventory.css b/src/pages/Inventory/Inventory.css new file mode 100644 index 0000000..435245c --- /dev/null +++ b/src/pages/Inventory/Inventory.css @@ -0,0 +1,15 @@ +.inven-wrapper{ + display: flex; + +} + +nav{ + width: 8.875rem; + height: 46.25rem; + /* height: 42.5rem; */ + z-index: 1; +} + +main{ + width: calc(100vw - 8.875rem); +} \ No newline at end of file diff --git a/src/pages/Inventory/Inventory.jsx b/src/pages/Inventory/Inventory.jsx index 27a84ef..d8e42d5 100644 --- a/src/pages/Inventory/Inventory.jsx +++ b/src/pages/Inventory/Inventory.jsx @@ -1,19 +1,19 @@ import React from "react"; -import { Col, Row } from "react-bootstrap"; +import Header from "../../components/views/Header/Header2"; import NavBar from "../../components/views/NavBar/NavBar"; +import "./Inventory.css"; import MainInven from "./MainInven"; const Inventory = () => { return ( -
- - +
+
+ +
- - +
); }; diff --git a/src/pages/Inventory/MainInven.css b/src/pages/Inventory/MainInven.css new file mode 100644 index 0000000..1c589d3 --- /dev/null +++ b/src/pages/Inventory/MainInven.css @@ -0,0 +1,206 @@ +.mainInven-wrapper{ + width: 100%; + /* height: 100%; */ +} + +.mainInven-title__wrapper{ + display: flex; + height: 5.0625rem; + width: 100%; + min-width: calc(73.75rem - 8.875rem); + background-color: #4F4F4F; + border-bottom: 0.5rem solid #d82356; + position: relative; +} + +.mainInven-title__wrapper span{ + font-size: 1.875rem; + font-family: "Bold"; + color: #fff; + text-align: center; + line-height: 4.5625rem; + white-space: nowrap; +} + +.mainInven-title__span1{ + width: 15%; + min-width: 8.3125rem; +} + +.mainInven-title__span2__wrapper{ + width: 25%; + min-width: 17.8125rem; + display: flex; + justify-content: space-between; +} + +.mainInven-title__span2{ + /* width: 25%; */ +} + +.mainInven-title__span3{ + width: 60%; + min-width: 39.625rem; +} + +.mainInven-category__modal{ + position: absolute; + left: calc((100vw - 8.875rem) * 0.275); + display: flex; + flex-direction: column; + width: 17.1875rem; + border-radius: 0 0 0.625rem 0.625rem; + background-color: #4F4F4F; + z-index: 0; +} + +.mainInven-category__modal span{ + width: 17.1875rem; + height: 3.0625rem; + line-height: 3.0625rem; + font-size: 1.5625rem; + font-family: "SemiBold"; + color: #fff; + /* background-color: #4F4F4F; */ +} + +.mainInven-category__line{ + background-color: #dadada; + width: 100%; + height: 0.0625rem; +} + +.mainInven-category-content__wrapper{ + width: 100%; + height: calc(46.25rem - 5.0625rem); + /* height: calc(42.5rem - 5.0625rem); */ + overflow-y: auto; +} + +.mainInven-category-content__wrapper::-webkit-scrollbar { + display: none; +} + +.mainInven-category-content__wrapper { + -ms-overflow-style: none; /* 인터넷 익스플로러 */ + scrollbar-width: none; /* 파이어폭스 */ +} + +.mainInven-category-content__box{ + display: flex; + + width: 100%; + min-width: calc(73.75rem - 8.875rem); + height: 3.6875rem; + border-bottom: #dadada solid 0.125rem; +} + +.mainInven-category-content__box.selected{ + background-color: rgba(216, 35, 86, 0.15); +} + +.mainInven-category-content__box span{ + font-size: 1.5625rem; + font-family: "Medium"; + color: #4f4f4f; + line-height: 3.6875rem; +} + +.mainInven-category-checkbox{ + height: 2.1875rem; + width: 2.1875rem; + border:#dadada solid 0.1875rem; + border-radius: 0.125rem; +} + +.mainInven-category-checkbox.selected{ + background: #d82356 url( "../../assets/icons/icon_check.svg" ) no-repeat center center; + + border: none; +} + +.mainInven-category-content__span1{ + width: 15%; + min-width: 8.3125rem; + + display: flex; + justify-content: center; + align-items: center; +} + +.mainInven-category-content__span2{ + width: 25%; + min-width: 17.8125rem; + + white-space: nowrap; +} + +.mainInven-category-content__span3{ + width: 60%; + min-width: 39.625rem; + + white-space: nowrap; +} + +/* 모달 */ +.modal-wrapper{ + position: absolute; + top: 5.5rem; + bottom: 0; + left: 8.875rem; + right: 0; + height: 46.25rem; + background-color: rgba(0,0,0, 0.5); + + display: flex; +} + +.modal-box{ + position: absolute; + top: calc(50% - 12.15625rem); + left: calc(50% - 17.1875rem); + + width: 34.375rem; + height: 24.3125rem; + background-color: #fff; + border-radius: 2.8125rem; + z-index: 101; + padding: 2.0625rem 3.25rem; +} + +.modal-close__wrapper{ + display: flex; + justify-content: end; +} + +.modal-box-img__wrapper{ + height: 30%; +} + +.modal-box-txt__wrapper{ + height: 30%; +} + +.modal-box-txt{ + font-size: 1.5625rem; + font-family: "SemiBold"; +} + +.modal-box-close-btn__wrapper{ + display: flex; + flex-direction: column; + justify-content: flex-end; + height: 30%; +} + +.modal-box-close-btn{ + width: 19.375rem; + height: 3.125rem; + margin: 0 auto; + color: #fff; + background-color: #d82356; + font-size: 1.5625rem; + font-family: "SemiBold"; + line-height: 3.125rem; + border-radius: 0.5rem; +} \ No newline at end of file diff --git a/src/pages/Inventory/MainInven.jsx b/src/pages/Inventory/MainInven.jsx index 90b5825..acb6886 100644 --- a/src/pages/Inventory/MainInven.jsx +++ b/src/pages/Inventory/MainInven.jsx @@ -1,11 +1,220 @@ -import React from "react"; +import React, { useEffect, useState } from "react"; +import close from "../../assets/icons/icon_closeModal.svg"; +import downArrow from "../../assets/icons/icon_downArrow.svg"; +import upArrow from "../../assets/icons/icon_upArrow.svg"; +import cherry from "../../assets/icons/small_cherry.svg"; +import InvenBox from "../../components/views/Inven/InvenBox"; +import "./MainInven.css"; + + +function MainInven () { + const [category, setCategory] = useState("전체"); + const [isCategoryOpen, setIsCategoryOpen] = useState(false); + const [isModalOpen, setIsModalOpen] = useState(false); + + const categoryList = ["전체", "커피", "논커피", "티", "에이드", "프라페", "스무디", "마카롱", "아이스크림", "와플", "크로플", "베이커리"]; + const chnMenu = () => setIsCategoryOpen(!isCategoryOpen); + + const chnCategory = (e) => { + setCategory(e); + setIsCategoryOpen((prev) => !prev); + } + + const handleModal = () => { + setIsModalOpen((prev) => !prev); + + // /api/v1/inventory [patch] + // /api/v1/inventory [get] + } + + useEffect(() => { + const handleClickOutside = (e) => { + const layerPopup = document.querySelector(".mainInven-category__modal"); + if (layerPopup && !layerPopup.contains(e.target)) { + setIsCategoryOpen(false); + } + }; + + document.addEventListener("mouseup", handleClickOutside); + return () => { + document.removeEventListener("mouseup", handleClickOutside); + }; + }, []); + + const invenList = { + "category" : [ + { + "name" : "커피", + "foodies" : [ + { + "idx" : 123, + "name": "아메리카노", + "soldOut" : true, + + }, + { + "idx" : 133, + "name": "라떼", + "soldOut" : false, + + }, + ], + + }, + { + "name" : "티", + "foodies" : [ + { + "idx" : 124, + "name": "녹차", + "soldOut" : true, + + }, + { + "idx" : 143, + "name": "홍차", + "soldOut" : false, + + }, + ], + + }, + { + "name" : "에이드", + "foodies" : [ + { + "idx" : 125, + "name": "망고 에이드", + "soldOut" : true, + + }, + { + "idx" : 153, + "name": "청포도 에이드", + "soldOut" : false, + + }, + ], + + }, + { + "name" : "프라페", + "foodies" : [ + { + "idx" : 126, + "name": "오레오 프라페", + "soldOut" : true, + + }, + { + "idx" : 163, + "name": "초코 프라페", + "soldOut" : false, + + }, + ], + + }, + { + "name" : "스무디", + "foodies" : [ + { + "idx" : 127, + "name": "무화과 스무디", + "soldOut" : true, + + }, + { + "idx" : 173, + "name": "망고 스무디", + "soldOut" : false, + + }, + ], + + }, + { + "name" : "마카롱", + "foodies" : [ + { + "idx" : 128, + "name": "앙버터 마카롱", + "soldOut" : true, + + }, + { + "idx" : 183, + "name": "로투스 마카롱", + "soldOut" : false, + + }, + ], + + }, + ], + }; -const inven = () => { return ( -
-

Inventory

+
+
+ 품절 +
+ + {category} + {isCategoryOpen ? (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
+
+
품절 처리 시
+
고객님은 해당 메뉴를 주문할 수 없습니다.
+
+
+
확인
+
+
+
+ )}
); }; -export default inven; +export default MainInven; diff --git a/src/pages/Mypage/MainMypage.css b/src/pages/Mypage/MainMypage.css new file mode 100644 index 0000000..e45735a --- /dev/null +++ b/src/pages/Mypage/MainMypage.css @@ -0,0 +1,112 @@ +.mypage-main__wrapper{ + display: flex; + flex-direction: column; + + padding: 4.3125rem 4rem 2rem 4rem; + width: 100%; + height: calc(100% + 5.5rem); + + justify-content: space-between; +} + +.mypage-top__wrapper{ + width: 100%; +} + +.mypage-top__txt{ + font-size: 1.25rem; + font-family: "Bold"; + color: #4f4f4f; +} + +.mypage-top__box{ + display: flex; + justify-content: space-between; +} + +.mypage-top-txt__wrapper{ + text-align: start; +} + +.mypage-top-cafe__txt{ + font-size: 1.875rem; + font-family: "Bold"; + white-space: nowrap; +} + +.mypage-top-cafe__txt span{ + font-size: 3.125rem; +} + +.mypage-kakao__wrapper{ + display: flex; + flex-direction: row; + align-items: center; +} + +.mypage-kakao__txt{ + display: flex; + flex-direction: column; + text-align: start; + margin: 0 3.4375rem 0 0.6875rem; +} + +.mypage-kakao__txt span{ + font-size: 1.09rem; + font-family: "Medium"; + color: #838383; +} + +.mypage-kakao-img__box{ + width: 3.625rem; + height: 2.5rem; + border-radius: 0.625rem; + background-color: #d9d9d9; + padding: 0.59375rem 0; +} + +.mypage__line{ + height: 0.15625rem; + width: 100%; + background-color: #dadada; + margin: 1.5625rem 0; +} + +.mypage-content__wrapper{ + width: 100%; + text-align: start; +} + +.mypage-content__wrapper p{ + font-size: 1.875rem; + font-family: "Bold"; + color: #4f4f4f; + margin: 2rem 0; +} + +.mypage-content__box div{ + display: flex; /* 추가: 내부 div들을 가로로 나열하기 위해 Flexbox 사용 */ + justify-content: space-between; + width: 100%; + margin: 0.625rem 0; +} + +.mypage-content__title{ + font-size: 1.875rem; + font-family: "Medium"; + color: #000; + width: 30%; +} + +.mypage-content__txt{ + font-size: 1.5625rem; + font-family: "Light"; + color: #000; + width: 70%; +} + +.mypage-logout__wrapper span{ + font-size: 0.9375rem; + font-family: "Regular"; + color: #838383; +} \ No newline at end of file diff --git a/src/pages/Mypage/MainMypage.jsx b/src/pages/Mypage/MainMypage.jsx index d93830f..04ca7d1 100644 --- a/src/pages/Mypage/MainMypage.jsx +++ b/src/pages/Mypage/MainMypage.jsx @@ -1,9 +1,61 @@ import React from "react"; +import kakao from "../../assets/icons/icon_kakao.svg"; +import readyvery from "../../assets/icons/img_readyVery.svg"; +import "./MainMypage.css"; const MainMypage = () => { return ( -
-

Mypage

+
+
+
+
+ 오늘도 준비된 +
오르다커피 사장님
+
+
+
readyvery
+
+ 레디베리 상담 + 매일 00:00 ~ 24:00 +
+
kakao
+
+
+ +
+ +
+

기본 정보

+
+
+ 가게명 + 오르다커피 +
+ +
+ 가게주소 + 경기 부천시 지봉로 46 백호빌딩 2층 +
+ +
+ 매장 연락처 + 0507-1358-6887 +
+ +
+ 영업시간 + 평일 08:40-23:00 / 토요일 11:00-22:00 / 일요일 휴무 +
+ +
+ 등록 계좌번호 + KB국민은행 22930104331825 +
+
+
+
+ +
로그아웃
); }; diff --git a/src/pages/Mypage/Mypage.css b/src/pages/Mypage/Mypage.css new file mode 100644 index 0000000..0a5ce43 --- /dev/null +++ b/src/pages/Mypage/Mypage.css @@ -0,0 +1,16 @@ +.mypage-wrapper{ + display: flex; + +} + +nav{ + width: 8.875rem; + height: 46.25rem; + /* height: 42.5rem; */ + padding-top: 5.5rem; +} + +main{ + width: calc(100vw - 8.875rem); + margin-top: 5.5rem; +} \ No newline at end of file diff --git a/src/pages/Mypage/Mypage.jsx b/src/pages/Mypage/Mypage.jsx index f0de064..ef02590 100644 --- a/src/pages/Mypage/Mypage.jsx +++ b/src/pages/Mypage/Mypage.jsx @@ -1,19 +1,20 @@ import React from "react"; -import { Col, Row } from "react-bootstrap"; +// import { Col, Nav, Row } from "react-bootstrap"; +import Header from "../../components/views/Header/Header2"; import NavBar from "../../components/views/NavBar/NavBar"; import MainMypage from "./MainMypage"; +import "./Mypage.css"; const Mypage = () => { return ( -
- - - - - - - - +
+
+ +
+ +
); }; diff --git a/src/pages/Sales/MainSales.css b/src/pages/Sales/MainSales.css new file mode 100644 index 0000000..e69de29 diff --git a/src/pages/Sales/MainSales.jsx b/src/pages/Sales/MainSales.jsx index a0181f6..46476af 100644 --- a/src/pages/Sales/MainSales.jsx +++ b/src/pages/Sales/MainSales.jsx @@ -1,8 +1,9 @@ import React from "react"; +import "./MainSales.css"; const MainSales = () => { return ( -
+

Sales

); diff --git a/src/pages/Sales/Sales.css b/src/pages/Sales/Sales.css new file mode 100644 index 0000000..27c1e43 --- /dev/null +++ b/src/pages/Sales/Sales.css @@ -0,0 +1,13 @@ +.mypage-wrapper{ + display: flex; + +} + +nav{ + width: 8.875rem; + height: 46.25rem; +} + +main{ + width: calc(100vw - 8.875rem); +} \ No newline at end of file diff --git a/src/pages/Sales/Sales.jsx b/src/pages/Sales/Sales.jsx index c15b4fe..288369b 100644 --- a/src/pages/Sales/Sales.jsx +++ b/src/pages/Sales/Sales.jsx @@ -1,19 +1,18 @@ import React from "react"; -import { Col, Row } from "react-bootstrap"; +import Header from "../../components/views/Header/Header2"; import NavBar from "../../components/views/NavBar/NavBar"; -import MainMypage from "../Mypage/MainMypage"; +import MainSales from "./MainSales"; const Sales = () => { return ( -
- - - - - - - - +
+
+ +
+ +
); }; From 53170d4ea0cbebbde24fbe82c1683dc6f71f16bc Mon Sep 17 00:00:00 2001 From: happppi <102276917+hhbb0081@users.noreply.github.com> Date: Fri, 17 Nov 2023 16:11:52 +0900 Subject: [PATCH 6/6] =?UTF-8?q?Fix:=20end=20=EC=98=A4=EB=A5=98=20=ED=95=B4?= =?UTF-8?q?=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .env | 1 - src/pages/Inventory/MainInven.css | 2 +- 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/.env b/.env index c72c189..ae7f013 100644 --- a/.env +++ b/.env @@ -4,4 +4,3 @@ WDS_SOCKET_PORT=0 NODE_PATH=src/ REACT_APP_API_ROOT=http://localhost:8080 REACT_APP_HOME_URL=http://localhost:3000 - diff --git a/src/pages/Inventory/MainInven.css b/src/pages/Inventory/MainInven.css index 1c589d3..dabe87c 100644 --- a/src/pages/Inventory/MainInven.css +++ b/src/pages/Inventory/MainInven.css @@ -170,7 +170,7 @@ .modal-close__wrapper{ display: flex; - justify-content: end; + justify-content: flex-end; } .modal-box-img__wrapper{