Merge pull request #115 from boostcampwm-2022/dev

3주차 릴리즈 v0.2

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

@@ -0,0 +1,48 @@
+name: Frontend dev cd
+
+on:
+  push:
+    branches: ['dev']
+    paths:
+      - 'packages/client/**'
+      - '.github/workflows/fe-dev-cd.yml'
+
+jobs:
+  cd:
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: './packages/client'
+
+    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:
+          FE_ENV: ${{ secrets.FE_ENV }}
+        run: echo "$FE_ENV" > .env
+
+      - name: Build
+        run: npm run build
+        env:
+          CI: false
+
+      - 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/client/build/*'
+          target: '~/client/build'
+          strip_components: 3

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

@@ -0,0 +1,36 @@
+name: Frontend dev ci
+
+on:
+  pull_request:
+    branches: [dev]
+    paths:
+      - 'packages/client'
+      # - 'packages/client/**'
+      # - '.github/workflows/fe-dev-ci.yml'
+
+jobs:
+  ci:
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: './packages/client'
+
+    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:
+          FE_ENV: ${{ secrets.FE_ENV }}
+        run: echo "$FE_ENV" > .env
+
+      - name: Test
+        run: npm run test

.gitignore

@@ -181,6 +181,7 @@ dist
 
 node_modules
 package-lock.json
+build
 
 *.sublime*
 

docker-compose.yml

@@ -9,6 +9,8 @@ services:
       - ./packages/server/.prod.env
     ports:
       - 8080:8080
+    environment:
+      MYSQL_HOST: mysql
     depends_on:
       - mysql
 
@@ -24,8 +26,16 @@ services:
     command:
       - --character-set-server=utf8mb4
       - --collation-server=utf8mb4_unicode_ci
+  nginx:
+    container_name: 'nginx'
+    build: ./packages/nginx
+    ports:
+      - 3000:3000
+    volumes:
+      - ./packages/nginx/configs:/etc/nginx
+      - ./packages/client/build:/usr/share/buddah-client
 
 volumes:
   mysql-volume:
-    external:
-      name: mysql-volume
+    external: true
+    name: mysql-volume

packages/client/craco.config.ts

@@ -11,6 +11,7 @@ module.exports = {
       'pages': path.resolve(__dirname, 'src/pages/'),
       'types': path.resolve(__dirname, 'src/types/'),
       'utils': path.resolve(__dirname, 'src/utils/'),
+      'icons': path.resolve(__dirname, 'src/assets/icons/'),
     },
   },
   // jest alias 추가
@@ -24,6 +25,7 @@ module.exports = {
         '^pages/(.*)$': '<rootDir>/src/pages/$1',
         '^types/(.*)$': '<rootDir>/src/types/$1',
         '^utils/(.*)$': '<rootDir>/src/utils/$1',
+        '^icons/(.*)$': '<rootDir>/src/assets/icons/$1',
         '^axios$': require.resolve('axios'),
       },
     },

packages/client/package.json

@@ -17,6 +17,7 @@
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.4.3",
     "react-scripts": "5.0.1",
+    "recoil": "^0.7.6",
     "typescript": "^4.8.4",
     "web-vitals": "^2.1.4"
   },

packages/client/src/App.tsx

@@ -1,15 +1,18 @@
 import { BrowserRouter } from 'react-router-dom';
+import { RecoilRoot } from 'recoil';
 import Router from '@/Router';
 import Layout from '@/Layout';
 
 function App() {
   return (
     <div className="App">
-      <Layout>
-        <BrowserRouter>
-          <Router></Router>
-        </BrowserRouter>
-      </Layout>
+      <RecoilRoot>
+        <Layout>
+          <BrowserRouter>
+            <Router></Router>
+          </BrowserRouter>
+        </Layout>
+      </RecoilRoot>
     </div>
   );
 }

packages/client/src/Router.tsx

@@ -1,7 +1,11 @@
 import { Route, Routes } from 'react-router-dom';
-import Signup from './pages/Signup';
-import Signin from './pages/Signin';
-import OrderList from './pages/customer/OrderList';
+
+import Signup from 'pages/Signup';
+import Signin from 'pages/Signin';
+import OrderList from 'pages/customer/OrderList';
+import MenuList from '@/pages/customer/MenuList';
+import MenuDetail from 'pages/customer/MenuDetail';
+import Cart from 'pages/customer/Cart';
 
 function Router() {
   return (
@@ -10,10 +14,11 @@ function Router() {
       <Route path={'/signup'} element={<Signup />}></Route> {/* 회원가입 */}
       <Route path={'/mypage'} element={<></>}></Route> {/* 마이페이지 */}
       <Route path={'/home'} element={<OrderList />}></Route> {/* 고객 메인 */}
-      <Route path={'/menu'} element={<></>}></Route> {/* 고객 메뉴 목록 */}
-      <Route path={'/menu/:menuId'} element={<></>}></Route>{' '}
+      <Route path={'/menu'} element={<MenuList />}></Route>{' '}
+      {/* 고객 메뉴 목록 */}
+      <Route path={'/menu/:menuId'} element={<MenuDetail />}></Route>{' '}
       {/* 고객 메뉴 상세 */}
-      <Route path={'/cart'} element={<></>}></Route> {/* 고객 장바구니 */}
+      <Route path={'/cart'} element={<Cart />}></Route> {/* 고객 장바구니 */}
       {/* 업주 (전역 상태 관리로 고객과 함께 사용 가능) */}
       <Route path={'/owner/home'} element={<></>}></Route>
       <Route path={'/owner/order'} element={<></>}></Route>