Merge pull request #147 from boostcampwm-2022/dev

4주차 릴리즈 v0.3.0

.github/workflows/be-dev-cd.yml

@@ -0,0 +1,88 @@
+name: Backend dev cd
+
+on:
+  push:
+    branches: ['dev']
+    paths:
+      - 'packages/server/**'
+      - '.github/workflows/be-dev-cd.yml'
+
+jobs:
+  Push-Docker-Image:
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: './packages/server'
+
+    steps:
+      - name: checkout to the branch
+        uses: actions/checkout@v3
+
+      - name: Docker Buildx
+        uses: docker/setup-buildx-action@v2
+
+      - name: Sign In To Docker Registry
+        uses: docker/login-action@v2
+        with:
+          username: ${{secrets.DOCKER_REGISTRY_USERNAME}}
+          password: ${{secrets.BUDDAH_REGISTRY_TOKEN}}
+
+      - name: Build Docker Image And Push
+        uses: docker/build-push-action@v3
+        with:
+          push: true
+          # context 명시를 안해주면 이전 step에서 변경되던 사항들이 적용되지 않는다.
+          context: 'packages/server'
+          tags: |
+            ${{secrets.DOCKER_REGISTRY_USERNAME}}/${{secrets.DOCKER_REPOSITORY}}:latest
+            ${{secrets.DOCKER_REGISTRY_USERNAME}}/${{secrets.DOCKER_REPOSITORY}}:${{ github.sha }}
+
+  Build-And-Transfer:
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: './packages/server'
+
+    steps:
+      - name: checkout to the branch
+        uses: actions/checkout@v3
+
+      - name: install dependencies
+        run: npm install
+
+      - name: build
+        run: npm run build
+
+      - name: move deploy file to dist
+        run: mv ./scripts/dev.deploy.sh dist
+
+      - name: Inject Environment Variables
+        run: echo "$BE_DEV_ENV" > ./dist/.dev.env
+        env:
+          BE_DEV_ENV: ${{ secrets.BE_DEV_ENV }}
+
+      - name: Deploy to Remote Server
+        uses: appleboy/scp-action@master
+        with:
+          host: ${{ secrets.REMOTE_SSH_HOST }}
+          username: ${{ secrets.REMOTE_SSH_USERNAME }}
+          password: ${{ secrets.REMOTE_SSH_PASSWORD }}
+          port: ${{ secrets.REMOTE_SSH_PORT }}
+          source: 'packages/server/dist/*'
+          target: '~/server/dist'
+          strip_components: 3
+
+  Deploy:
+    needs: ['Push-Docker-Image', 'Build-And-Transfer']
+
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Deploy To Server
+        uses: appleboy/ssh-action@master
+        with:
+          host: ${{ secrets.REMOTE_SSH_HOST }}
+          username: ${{ secrets.REMOTE_SSH_USERNAME }}
+          password: ${{ secrets.REMOTE_SSH_PASSWORD }}
+          port: ${{ secrets.REMOTE_SSH_PORT }}
+          script: . ~/server/dist/dev.deploy.sh ${{secrets.DOCKER_REGISTRY_USERNAME}} ${{secrets.DOCKER_REPOSITORY}}

.github/workflows/be-dev-ci.yml

@@ -0,0 +1,37 @@
+name: Backend dev ci
+
+on:
+  pull_request:
+    branches: ['dev']
+    paths:
+      - 'packages/server/**'
+      - '.github/workflows/be-dev-ci.yml'
+
+jobs:
+  ci:
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: './packages/server'
+
+    steps:
+      - name: checkout to the branch
+        uses: actions/checkout@v3
+
+      - name: node set-up
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18.6.0
+
+      - name: Install dependencies
+        run: npm install
+
+      - name: Inject Environment Variables
+        env:
+          BE_DEV_ENV: ${{ secrets.BE_DEV_ENV }}
+        run: echo "$BE_DEV_ENV" > .dev.env
+
+      - name: Test
+        run: npm run test:cov
+        env:
+          CI: false

.github/workflows/fe-dev-ci.yml

@@ -2,11 +2,10 @@ name: Frontend dev ci
 
 on:
   pull_request:
-    branches: [dev]
+    branches: ['dev']
     paths:
-      - 'packages/client'
-      # - 'packages/client/**'
-      # - '.github/workflows/fe-dev-ci.yml'
+      - 'packages/client/**'
+      - '.github/workflows/fe-dev-ci.yml'
 
 jobs:
   ci:
@@ -34,3 +33,5 @@ jobs:
 
       - name: Test
         run: npm run test
+        env:
+          CI: false

packages/client/src/Router.tsx

@@ -2,26 +2,29 @@ import { Route, Routes } from 'react-router-dom';
 
 import Signup from 'pages/Signup';
 import Signin from 'pages/Signin';
-import OrderList from 'pages/customer/OrderList';
-import MenuList from '@/pages/customer/MenuList';
+import MenuList from 'pages/customer/MenuList';
 import MenuDetail from 'pages/customer/MenuDetail';
 import Cart from 'pages/customer/Cart';
+import MyPage from 'pages/MyPage';
+import Home from './pages/Home';
+import AcceptList from './pages/manager/AcceptList';
+import OrderStatus from './pages/customer/OrderStatus';
 
 function Router() {
   return (
     <Routes>
       <Route path={'/'} element={<Signin />}></Route> {/* 로그인 */}
       <Route path={'/signup'} element={<Signup />}></Route> {/* 회원가입 */}
-      <Route path={'/mypage'} element={<></>}></Route> {/* 마이페이지 */}
-      <Route path={'/home'} element={<OrderList />}></Route> {/* 고객 메인 */}
+      <Route path={'/mypage'} element={<MyPage />}></Route> {/* 마이페이지 */}
+      <Route path={'/home'} element={<Home />}></Route> {/* 고객 메인 */}
+      <Route path={'/order/:orderId'} element={<OrderStatus />}></Route>{' '}
+      {/* 주문 현황 */}
       <Route path={'/menu'} element={<MenuList />}></Route>{' '}
       {/* 고객 메뉴 목록 */}
       <Route path={'/menu/:menuId'} element={<MenuDetail />}></Route>{' '}
       {/* 고객 메뉴 상세 */}
       <Route path={'/cart'} element={<Cart />}></Route> {/* 고객 장바구니 */}
-      {/* 업주 (전역 상태 관리로 고객과 함께 사용 가능) */}
-      <Route path={'/owner/home'} element={<></>}></Route>
-      <Route path={'/owner/order'} element={<></>}></Route>
+      <Route path={'/manager/accept'} element={<AcceptList />}></Route>
       <Route path={'*'} element={<></>}></Route> {/* 에러 (404) */}
     </Routes>
   );

packages/client/src/components/Footer/index.spec.tsx

@@ -0,0 +1,36 @@
+import { screen, fireEvent, waitFor } from '@testing-library/react';
+import { server } from '@/mocks/server';
+import { setup } from 'utils/testSetup';
+
+beforeAll(() => server.listen());
+afterEach(() => server.resetHandlers());
+afterAll(() => server.close());
+
+describe('Footer', () => {
+  it('Home 클릭 시 주문내역 화면으로 전환', async () => {
+    setup({ url: '/home' });
+
+    fireEvent.click(screen.getByText('Home'));
+    await waitFor(() => {
+      screen.getByText('주문내역');
+    });
+  });
+
+  it('Order 클릭 시 메뉴 내역 화면으로 전환', async () => {
+    setup({ url: '/home' });
+
+    fireEvent.click(screen.getByText('Order'));
+    await waitFor(() => {
+      screen.getByTestId('menu-list-page');
+    });
+  });
+
+  it('MY 클릭 시 마이페이지 화면으로 전환', async () => {
+    setup({ url: '/home' });
+
+    fireEvent.click(screen.getByText('MY'));
+    await waitFor(() => {
+      screen.getByTestId('my-page');
+    });
+  });
+});

packages/client/src/components/OrderDateList/index.tsx

@@ -0,0 +1,40 @@
+import { useMemo } from 'react';
+
+import OrderList from 'components/OrderList';
+
+import { Order, OrderStatusCode } from '@/types';
+import { Container, ItemContainer } from './styled';
+import useOrderGroup from 'hooks/useOrderDates';
+
+interface Props {
+  list: Order[];
+  status?: OrderStatusCode[];
+}
+
+interface ItemProps {
+  date: string;
+  orders: Order[];
+}
+
+function OrderDateItem({ date, orders }: ItemProps) {
+  return (
+    <ItemContainer>
+      <p>{date}</p>
+      <OrderList date={date} orders={orders} />
+    </ItemContainer>
+  );
+}
+
+function OrderDateList({ list, status }: Props) {
+  const { orderGroup } = useOrderGroup({ list, status });
+
+  const items = useMemo(() => {
+    return Object.keys(orderGroup).map((date) => (
+      <OrderDateItem date={date} orders={orderGroup[date]} key={date} />
+    ));
+  }, [orderGroup]);
+
+  return <Container>{items}</Container>;
+}
+
+export default OrderDateList;

packages/client/src/components/OrderDateList/styled.ts

@@ -0,0 +1,10 @@
+import styled from '@emotion/styled';
+
+export const Container = styled.section`
+  padding: 0 0 3rem 0;
+`;
+
+export const ItemContainer = styled.div`
+  padding: 5%;
+  width: 100%;
+`;