Merge pull request #57 from ananjaemin/54-dockerizing

54 dockerizing

.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

Dockerfile

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

package.json

@@ -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"
   }
-}
+}

src/App.tsx

@@ -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/components/common/Button/styled.ts

@@ -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/components/common/CheckBox/styled.ts

@@ -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/FileBox/index.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;
+`;

src/components/common/FileFind/index.tsx

@@ -9,13 +9,16 @@ type FileFindProps = {
 
 export const FileFind: React.FC<FileFindProps> = ({ handleChangeFile, fileProps }) => (
   <S.FileFindContainer>
-    {fileProps.name != '' && fileProps.size != '' && fileProps.fileType != '' ? (
-      <S.FileFindTextBox placeholders={false}>
-        {'이름:' + fileProps.name + ' / 크기:' + fileProps.size + ' / 타입:' + fileProps.fileType}
-      </S.FileFindTextBox>
-    ) : (
-      <S.FileFindTextBox placeholders={true}>업로드 할 파일을 선택해주세요....</S.FileFindTextBox>
-    )}
+    <S.FileFindTextBox>
+      {fileProps.filename != '' && fileProps.size != '' && fileProps.fileType != ''
+        ? '이름:' +
+          fileProps.filename +
+          ' / 크기:' +
+          fileProps.size +
+          ' / 타입:' +
+          fileProps.fileType
+        : '업로드 할 파일을 선택해주세요....'}
+    </S.FileFindTextBox>
 
     <S.FileFindButton htmlFor="file">찾아보기</S.FileFindButton>
     <input type={'file'} id="file" style={{ display: 'none' }} onChange={handleChangeFile} />

src/components/common/FileFind/styled.ts

@@ -3,24 +3,22 @@ import styled from '@emotion/styled';
 export const FileFindContainer = styled.div`
   width: 100%;
   display: flex;
-  justify-content: space-between;
   align-items: center;
-  margin-top: 20px;
+  margin-top: 2rem;
 `;
 
-export const FileFindTextBox = styled.div<{ placeholders: boolean }>`
-  border: 4px solid var(--color-border);
-  border-radius: 10px;
+export const FileFindTextBox = styled.div`
+  border: 0.4rem solid var(--color-border);
+  border-radius: 1rem;
   width: 45rem;
   height: 4.2rem;
-  background-color: var(--color-text-primary);
-  color: ${(props) =>
-    props.placeholders ? 'var(--color-text-placeholder)' : ' var(--color-text-secondary)'};
+  background-color: var(--color-backgorund-black);
+  color: var(--color-text-placeholder);
   display: flex;
   align-items: center;
   white-space: nowrap;
-  padding-left: 12px;
-  padding-right: 12px;
+  padding-left: 1.2rem;
+  padding-right: 1.2rem;
   font-size: 1.8rem;
   font-weight: 700;
   overflow: auto;
@@ -36,7 +34,7 @@ export const FileFindButton = styled.label`
   display: flex;
   align-items: center;
   justify-content: center;
-  color: var(--color-text-secondary);
+  color: var(--color-text-primary);
   font-size: 2rem;
   font-weight: 700;
   border-radius: 10px;

src/components/common/FileListBox/index.tsx

@@ -1,21 +1,25 @@
 import React from 'react';
 
+import { ReactComponent as LockIcon } from '../../../assets/lockIcon.svg';
 import * as S from './styled';
 
 type FileListBoxProps = {
   filename: string;
   size: string;
   LastModified: any;
+  isEncrypted: boolean;
   click: () => void;
 };
 
 export const FileListBox: React.FC<FileListBoxProps> = ({
   filename,
   size,
   LastModified,
+  isEncrypted,
   click,
 }) => (
   <S.FileListBoxContainer onClick={click}>
+    {isEncrypted ? <LockIcon width={'2.3rem'} style={{ marginRight: '0.5rem' }} /> : <></>}
     파일이름: {filename} / 크기:{size} / 업로드날짜:{LastModified.year}-{LastModified.month}-
     {LastModified.day}
   </S.FileListBoxContainer>

src/components/common/FileListBox/styled.ts

@@ -3,11 +3,12 @@ import styled from '@emotion/styled';
 export const FileListBoxContainer = styled.div`
   background-color: var(--color-backgorund-filelistbox);
   color: var(--color-text-tertiary);
-  border-radius: 10px;
+  border-radius: 1rem;
   padding: 1.2rem 1.2rem 1.2rem 1.2rem;
   display: flex;
   flex-direction: row;
-  align-items: center;
+  justify-content: center;
+  align-items: flex-end;
   font-size: 2.2rem;
   margin-bottom: 1.5rem;
   cursor: pointer;

src/components/common/Navbar/styled.ts

@@ -4,7 +4,7 @@ import { Link } from 'react-router-dom';
 export const NavbarContainer = styled.nav`
   width: 32rem;
   min-width: 250px;
-  margin: 30px auto 30px auto;
+  margin: 3rem auto 3rem auto;
   display: flex;
   justify-content: space-between;
   z-index: 99;

src/components/common/PasswordInput/index.ts

@@ -1,13 +1,18 @@
 import styled from '@emotion/styled';
 
 export const PasswordInput = styled.input`
-  border: 4px solid var(--color-border);
-  border-radius: 10px;
+  border: 0.4rem solid var(--color-border);
+  background-color: var(--color-backgorund-black);
+  color: var(--color-text-placeholder);
+  border-radius: 1rem;
   outline: none;
   width: 100%;
   height: 5rem;
-  padding-left: 12px;
+  padding-left: 1.2rem;
   font-size: 1.8rem;
   font-weight: 700;
-  margin-top: 20px;
+  margin-top: 2rem;
+  &::-webkit-input-placeholder {
+    color: var(--color-text-placeholder);
+  }
 `;

src/components/common/Progress/styled.ts

@@ -11,14 +11,14 @@ export const ProgressBar = styled.div<{ width: number }>`
   min-width: 70rem;
   min-height: 5.6rem;
   background: var(--color-backgorund-progressbar);
-  border-radius: 15px;
+  border-radius: 1.5rem;
   overflow: hidden;
   &::before {
     content: ' ';
     transition: all 1s;
     width: ${(props) => props.width}%;
     height: auto;
-    border-radius: 15px;
+    border-radius: 1.5rem;
     background: #373c62;
   }
 `;
@@ -33,5 +33,5 @@ export const ProgressAnimationBox = styled.div`
   width: 20rem;
   height: 20rem;
   overflow: hidden;
-  margin-bottom: 10px;
+  margin-bottom: 1rem;
 `;