Merge pull request #12 from ananjaemin/main

dev branch update

Author: ananjaemin

src/components/common/FileListBox/index.tsx

@@ -6,11 +6,17 @@ type FileListBoxProps = {
   filename: string;
   size: string;
   LastModified: any;
+  click: () => void;
 };
 
-export const FileListBox: React.FC<FileListBoxProps> = ({ filename, size, LastModified }) => (
-  <S.FileListBoxContainer>
-    파일이름: {filename} / 크기:{size} / 업로드날짜:{LastModified.getFullYear()}-
-    {LastModified.getMonth() + 1}-{LastModified.getDate()}
+export const FileListBox: React.FC<FileListBoxProps> = ({
+  filename,
+  size,
+  LastModified,
+  click,
+}) => (
+  <S.FileListBoxContainer onClick={click}>
+    파일이름: {filename} / 크기:{size} / 업로드날짜:{LastModified.year}-{LastModified.month}-
+    {LastModified.day}
   </S.FileListBoxContainer>
 );

src/pages/download/index.tsx

@@ -1,13 +1,48 @@
-import React from 'react';
+import React, { useEffect } from 'react';
+import { useSelector } from 'react-redux';
+import { useNavigate } from 'react-router-dom';
+import { toast } from 'react-toastify';
 
 import { Button } from '../../components';
+import { RootState } from '../../state/reducers';
+import { getFileSize, getDate } from '../../utils';
 import * as S from './styled';
 
-export const DownloadPage: React.FC = () => (
-  <S.DownloadPageContainer>
-    <S.DownloadPageButtonSection>
-      <Button click={() => {}} bgColor="var(--color-button-secondary)" label="다운로드" />
-      <Button click={() => {}} bgColor="var(--color-button-secondary)" label="신고" />
-    </S.DownloadPageButtonSection>
-  </S.DownloadPageContainer>
-);
+export const DownloadPage: React.FC = () => {
+  const navigate = useNavigate();
+  const downloadFileProps: any = useSelector((state: RootState) => state.DownloadFileProps);
+  const { year, month, day } = getDate(downloadFileProps.LastModified);
+  useEffect(() => {
+    if (
+      downloadFileProps.Name === null ||
+      downloadFileProps.Size === null ||
+      downloadFileProps.LastModified === null
+    ) {
+      navigate(-1);
+    }
+  });
+  return (
+    <S.DownloadPageContainer>
+      <S.DonwloadFileBox>
+        파일이름:{downloadFileProps.Name} / 크기:{getFileSize(downloadFileProps.Size)} / 업로드된
+        날짜:
+        {year}-{month}-{day}
+      </S.DonwloadFileBox>
+      <S.DownloadPageButtonSection>
+        <a href={`https://tfb.minpeter.cf/dl/${downloadFileProps.Name}`}>
+          <Button click={() => {}} bgColor="var(--color-button-primary)" label="다운로드" />
+        </a>
+        <Button
+          click={() => {
+            toast.success('제작중!', {
+              autoClose: 1000,
+              position: toast.POSITION.BOTTOM_RIGHT,
+            });
+          }}
+          bgColor="var(--color-button-secondary)"
+          label="신고"
+        />
+      </S.DownloadPageButtonSection>
+    </S.DownloadPageContainer>
+  );
+};

src/pages/download/styled.ts

@@ -1,12 +1,25 @@
 import styled from '@emotion/styled';
 
 export const DownloadPageContainer = styled.div`
+  display: flex;
+  flex-direction: column;
   width: 100%;
 `;
 
 export const DownloadPageButtonSection = styled.div`
+  display: flex;
   width: 100%;
-  min-width: 300px;
+  justify-content: center;
+  margin-top: 3rem;
+`;
+
+export const DonwloadFileBox = styled.div`
+  background-color: var(--color-backgorund-filelistbox);
+  color: var(--color-text-filelistbox);
+  border-radius: 10px;
+  padding: 1.2rem 1.2rem 1.2rem 1.2rem;
   display: flex;
-  justify-content: space-between;
+  flex-direction: row;
+  align-items: center;
+  font-size: 2.2rem;
 `;

src/pages/filelist/index.tsx

@@ -1,24 +1,31 @@
 import axios from 'axios';
 import React, { useEffect, useState } from 'react';
+import { useDispatch } from 'react-redux';
+import { useNavigate } from 'react-router-dom';
+import { bindActionCreators } from 'redux';
 
 import { FileListBox } from '../../components';
-import { getFileSize, getShortFileName } from '../../utils';
+import { actionCreators } from '../../state';
+import { getFileSize, getShortFileName, getDate } from '../../utils';
 import * as S from './styled';
 
 export const FileListPage: React.FC = () => {
+  const navigate = useNavigate();
   const [loading, setLoading] = useState(false);
   const SkeletonUIRandomWidth = ['50', '55', '60', '65', '70', '75', '80'];
+  const dispatch = useDispatch();
+  const { SetDownloadFileProps } = bindActionCreators(actionCreators, dispatch);
   const [fileList, setFileList] = useState<any[]>();
   const getFileList = async () => {
     await axios({
       method: 'get',
       url: 'https://tfb.minpeter.cf/list',
     })
       .then((res) => {
-        setFileList(res.data.list);
+        setFileList(res.data.list); //파일리스트 요소 갯수에 따른 핸들링 추가예정
         setTimeout(() => {
           setLoading(true); //loading 확인하고싶으면 false로 바꿔주세요.
-        }, 2000);
+        }, 1500);
       })
       .catch((err) => {
         console.log(err);
@@ -37,7 +44,16 @@ export const FileListPage: React.FC = () => {
                 key={index}
                 filename={getShortFileName(item.Name)}
                 size={getFileSize(item.Size)}
-                LastModified={new Date(item.LastModified)}
+                LastModified={getDate(item.LastModified)}
+                click={() => {
+                  SetDownloadFileProps({
+                    Name: item.Name,
+                    Size: item.Size,
+                    LastModified: item.LastModified,
+                    //passowrd 유무 추가예정
+                  });
+                  navigate('/download');
+                }}
               />
             ))}
           </S.FileListPageContainer>

src/state/action-types/index.ts

@@ -1,4 +1,5 @@
 export enum ActionType {
   SusccesFileProps = 'SusccesFileProps',
   DeleteFileName = 'DeleteFileName',
+  DownloadFileProps = 'DownloadFileProps',
 }

src/state/actions-creators/index.ts

@@ -16,3 +16,10 @@ export const SetDeleteFileName = (name: string) => (dispatch: Dispatch<Action>)
     name: name,
   });
 };
+
+export const SetDownloadFileProps = (props: any) => (dispatch: Dispatch<Action>) => {
+  dispatch({
+    type: ActionType.DownloadFileProps,
+    props: props,
+  });
+};

src/state/actions/index.ts

@@ -10,4 +10,9 @@ interface DeleteFileProps {
   name: string;
 }
 
-export type Action = SusccesFileProps | DeleteFileProps;
+interface DownloadFileProps {
+  type: ActionType.DownloadFileProps;
+  props: any;
+}
+
+export type Action = SusccesFileProps | DeleteFileProps | DownloadFileProps;

src/state/reducers/DownloadFileProps.ts

@@ -0,0 +1,16 @@
+import { ActionType } from '../action-types';
+import { Action } from '../actions';
+
+const reducer = (
+  state: any = { Name: null, Size: null, LastModified: null },
+  action: Action,
+): any => {
+  switch (action.type) {
+    case ActionType.DownloadFileProps:
+      return action.props;
+    default:
+      return state;
+  }
+};
+
+export default reducer;

src/state/reducers/index.ts

@@ -1,11 +1,13 @@
 import { combineReducers } from 'redux';
 
 import DeleteFileName from './DeleteFileName';
+import DownloadFileProps from './DownloadFileProps';
 import SuccessFileProps from './SuccessFileProps';
 
 const reducers = combineReducers({
   SuccessFileProps: SuccessFileProps,
   DeleteFileName: DeleteFileName,
+  DownloadFileProps: DownloadFileProps,
 });
 
 export default reducers;

src/utils/getDate.ts

@@ -0,0 +1,4 @@
+export const getDate = (date: string) => {
+  const NewDate = new Date(date);
+  return { year: NewDate.getFullYear(), month: NewDate.getMonth() + 1, day: NewDate.getDay() };
+};