Merge pull request #57 from ananjaemin/54-dockerizing

54 dockerizing

Author: ananjaemin

.env

@@ -1,2 +1,4 @@
-PUBLIC_URL=/tempfiles-frontend
-REACT_APP_BACKEND_BASEURL= https://tfb.minpeter.cf
+PUBLIC_URL= '/'
+REACT_APP_BACKEND_BASEURL=http://localhost:5000
+# dev - http://localhost:5000
+# main - https://tfb.minpeter.cf

.github/workflows/docker-image.yaml

@@ -0,0 +1,42 @@
+name: Docker Image CI
+
+on:
+  push:
+    branches: ['main']
+  pull_request:
+    branches: ['main']
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Set up Nodejs
+        uses: actions/setup-node@v3
+          with:
+            node-version: 16
+
+      - name: Build
+        run: npm run build
+
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v2
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v2
+
+      - name: Login to Docker Hub
+        uses: docker/login-action@v2
+        with:
+          username: ${{ secrets.DOCKERHUB_USERNAME }}
+          password: ${{ secrets.DOCKERHUB_TOKEN }}
+
+      - name: Build and push
+        uses: docker/build-push-action@v3
+        with:
+          context: .
+          push: true
+          tags: ${{ secrets.DOCKERHUB_USERNAME }}/tempfiles-frontend:latest

.github/workflows/main.yml

@@ -0,0 +1,7 @@
+FROM nginx:latest
+
+COPY build /usr/share/nginx/html
+
+EXPOSE 80
+
+CMD nginx -g 'daemon off;'

Dockerfile

@@ -1,7 +1,7 @@
 {
   "name": "frontend",
   "version": "0.1.0",
-  "homepage": "https://ananjaemin.github.io/tempfiles-frontend/",
+  "homepage": "https://tempfiles.ml/",
   "private": true,
   "dependencies": {
     "@emotion/react": "^11.10.4",
@@ -58,4 +58,4 @@
     "prettier": "^2.7.1",
     "react-scripts": "^5.0.1"
   }
-}
+}

package.json

@@ -7,12 +7,12 @@ import 'react-toastify/dist/ReactToastify.css';
 import { Navbar } from './components';
 import {
   MainPage,
-  SuccessPage,
   DownloadPage,
   DeletePage,
   FileListPage,
   ApiPage,
   NotFoundPage,
+  CheckPasswordPage,
 } from './pages';
 import { store } from './state/store';
 
@@ -45,11 +45,11 @@ export const App: React.FC = () => (
         }
       >
         <Route index element={<MainPage />} />
-        <Route path="/success" element={<SuccessPage />} />
         <Route path="/download" element={<DownloadPage />} />
         <Route path="/delete" element={<DeletePage />} />
         <Route path="/filelist" element={<FileListPage />} />
         <Route path="/api/*" element={<ApiPage />} />
+        <Route path="/checkpw" element={<CheckPasswordPage />} />
         <Route path="*" element={<NotFoundPage />} />
       </Route>
     </Routes>

src/App.tsx

@@ -2,15 +2,15 @@ import styled from '@emotion/styled';
 
 export const ButtonContainer = styled.input<{ bgColor: string }>`
   background-color: ${(props) => props.bgColor};
-  border-radius: 8px;
+  border-radius: 0.8rem;
   outline: none;
   font-size: 2rem;
   font-weight: 700;
   width: 14rem;
   height: 6rem;
   border: 0;
   color: var(--color-text-primary);
-  margin: 0px 10px 0px 10px;
+  margin: 0px 1rem 0px 1rem;
 `;
 
 ButtonContainer.defaultProps = { type: 'button' };

src/assets/lockIcon.svg

@@ -3,15 +3,15 @@ import styled from '@emotion/styled';
 export const CheckBoxContainer = styled.div`
   display: flex;
   align-items: center;
-  margin-right: 40px;
+  margin-right: 4rem;
 `;
 
 export const CheckBoxObject = styled.div<{ isCheck: boolean }>`
   width: 2.4rem;
   height: 2.4rem;
-  padding: 5px;
-  margin: 5px 12px 5px 5px;
-  border-radius: 3px;
+  padding: 0.5rem;
+  margin: 0.5rem 1.2rem 0.5rem 0.5rem;
+  border-radius: 0.3rem;
   background-color: ${(props) =>
     props.isCheck ? 'var(--color-check-true-background)' : 'var(--color-check-false-background)'};
 `;

src/components/common/Button/styled.ts

@@ -0,0 +1,12 @@
+import styled from '@emotion/styled';
+
+export const FileBox = styled.div`
+  background-color: var(--color-backgorund-filelistbox);
+  color: var(--color-text-tertiary);
+  border-radius: 1rem;
+  padding: 1.2rem 1.2rem 1.2rem 1.2rem;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  font-size: 2.2rem;
+`;