Merge pull request #22 from tempfiles-Team/feature/19-add-detail-page

feat: add detail page

src/App.tsx

@@ -2,7 +2,7 @@ import { Outlet, Route, Routes } from 'react-router-dom';
 import React from 'react';
 import { ToastContainer } from 'react-toastify';
 
-import { MainPage } from './pages';
+import { CheckPwPage, DetailPage, MainPage } from './pages';
 import { DefaultLayout } from './components';
 
 export const App: React.FC = () => {
@@ -17,6 +17,8 @@ export const App: React.FC = () => {
         }
       >
         <Route path="/" element={<MainPage />} />
+        <Route path="/dl/:id" element={<DetailPage />} />
+        <Route path="/checkPw/:id" element={<CheckPwPage />} />
       </Route>
     </Routes>
   );

src/api/api.ts

@@ -4,22 +4,27 @@ export const API_SUFFIX = {
   BASEURL: import.meta.env.DEV ? 'http://127.0.0.1:5050' : import.meta.env.VITE_BASEURL,
   UPLOAD: '/upload',
   FILE: '/file',
+  FILES: '/files',
   TEXT: '/text',
+  TEXTS: '/texts',
+  TEXT_UPLOAD: 'text/new',
   LIST: '/list',
+  DOWNLOAD: '/dl',
+  CHECK_PW: '/checkpw',
 };
 
 export type APIResponseStatusType = 'SUCCESS' | 'FAILED';
 
 export interface APIResponse<T = unknown> {
   status: APIResponseStatusType;
   message: string;
-  result: T;
+  data: T;
 }
 
 export interface APIErrorResponse {
   status: 'FAILED';
   message: string;
-  result?: null;
+  data?: null;
 }
 
 export interface UploadOptions {
@@ -28,14 +33,30 @@ export interface UploadOptions {
   password?: string;
 }
 
-export interface UploadResponse {
+export interface DataUploadResponse {
   downloadCount: number;
   downloadLimit: number;
   expireTime: string;
   id: string;
   isEncrypted: boolean;
   token: string;
   uploadDate: string;
+  provide_token?: boolean;
+}
+
+export interface DataResponse extends DataUploadResponse {
+  delete_url: string;
+  download_url: string;
+}
+
+export interface GetItemOptions {
+  id: string;
+  isEncrypted?: boolean;
+  token?: string;
+}
+
+export interface CommonValue {
+  id: string;
 }
 
 export const instance = axios.create({

src/api/checkPw.ts

@@ -0,0 +1,15 @@
+import { API_SUFFIX, instance } from './api';
+
+export interface CheckPwValues {
+  id: string;
+  password: string;
+}
+
+export interface CheckPwResponse {
+  token: string;
+}
+
+export const checkPw = async ({ id, password }: CheckPwValues) => {
+  const { data } = await instance.post(`${API_SUFFIX.CHECK_PW}/${id}?pw=${password}`);
+  return data;
+};

src/api/file.ts

@@ -1,14 +1,36 @@
-import { API_SUFFIX, UploadOptions, UploadResponse, instance } from './api';
+import {
+  API_SUFFIX,
+  UploadOptions,
+  DataResponse,
+  instance,
+  GetItemOptions,
+  CommonValue,
+  DataUploadResponse,
+} from './api';
 
 export interface FileUploadValues extends UploadOptions {
   file: FormData;
 }
 
-export interface FileUploadResponse extends UploadResponse {
+export interface FileUploadResponse extends DataUploadResponse {
   filename: string;
   size: number;
 }
 
+export type GetFileOptions = GetItemOptions;
+
+export interface GetFileResponse extends DataResponse {
+  delete_url: string;
+  download_url: string;
+  filename: string;
+  provide_token: boolean;
+  size: number;
+}
+
+export type DeleteFileValue = CommonValue;
+
+export type DownloadFileValue = CommonValue;
+
 export const upLoadFile = async ({
   file,
   downloadLimit,
@@ -28,3 +50,20 @@ export const upLoadFile = async ({
   );
   return data;
 };
+
+export const getFile = async ({ id, token, isEncrypted }: GetFileOptions) => {
+  const { data } = await instance.get(
+    `${API_SUFFIX.FILE}/${id}${isEncrypted ? `?token=${token}` : ''}`,
+  );
+  return data;
+};
+
+export const deleteFile = async ({ id }: DeleteFileValue) => {
+  const { data } = await instance.delete(`${API_SUFFIX.FILE}/${id}`);
+  return data;
+};
+
+export const downloadFile = async ({ id }: DownloadFileValue) => {
+  const { data } = await instance.get(`/dl/${id}`);
+  return data;
+};

src/api/index.ts

@@ -1,3 +1,4 @@
 export * from './api';
 export * from './file';
 export * from './text';
+export * from './checkPw';

src/api/text.ts

@@ -1,24 +1,41 @@
 import { UploadOptions } from '@/api';
 
-import { API_SUFFIX, UploadResponse, instance } from './api';
+import {
+  API_SUFFIX,
+  DataResponse,
+  CommonValue,
+  GetItemOptions,
+  instance,
+  DataUploadResponse,
+} from './api';
 
 export interface UploadTextValues extends UploadOptions {
   textData: string;
 }
 
-export interface UploadTextResponse extends UploadResponse {
+export interface UploadTextResponse extends DataUploadResponse {
   data: string;
   numberOfText: number;
 }
 
+export interface GetTextResponse extends DataResponse {
+  textData: string;
+}
+
+export type GetTextOptions = GetItemOptions;
+
+export type DeleteTextValue = CommonValue;
+
+export type DownloadTextValue = CommonValue;
+
 export const upLoadText = async ({
   textData,
   password,
   downloadLimit,
   timeLimit,
 }: UploadTextValues) => {
   const { data } = await instance.post(
-    `${API_SUFFIX.TEXT}/new${password ? `?pw=${password}` : ''}`,
+    `${API_SUFFIX.TEXT}${API_SUFFIX.TEXT_UPLOAD}${password ? `?pw=${password}` : ''}`,
     textData,
     {
       headers: {
@@ -30,3 +47,20 @@ export const upLoadText = async ({
   );
   return data;
 };
+
+export const getText = async ({ id, token, isEncrypted }: GetTextOptions) => {
+  const { data } = await instance.get(
+    `${API_SUFFIX.TEXT}/${id}${isEncrypted ? `?token=${token}` : ''}`,
+  );
+  return data;
+};
+
+export const deleteText = async ({ id }: DeleteTextValue) => {
+  const { data } = await instance.delete(`${API_SUFFIX.TEXT}/${id}`);
+  return data;
+};
+
+export const downloadText = async ({ id }: DownloadTextValue) => {
+  const { data } = await instance.get(`${API_SUFFIX.TEXT}/${id}`);
+  return data;
+};

src/assets/index.ts

@@ -0,0 +1 @@
+export { default as LockSVG } from './lockIcon.svg';

src/atom/checkPw.ts

@@ -0,0 +1,9 @@
+import { atom } from 'recoil';
+
+export const checkPwState = atom({
+  key: 'checkPwState',
+  default: {
+    isEncrypt: false,
+    token: '',
+  },
+});

src/atom/index.ts

@@ -0,0 +1 @@
+export * from './checkPw';

src/components/apiList/ApiBox/index.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+import { ApiItem } from '@/constant';
+import { DataBox } from '@/components';
+
+export interface ApiBoxProps {
+  apiList: ApiItem[];
+}
+
+export const ApiBox: React.FC<ApiBoxProps> = ({ apiList }) => {
+  return (
+    <>
+      {apiList.map((api) => (
+        <DataBox key={api.apiId}>
+          <Link to={`/api${api.apiId}`}>{api.url}</Link>
+        </DataBox>
+      ))}
+    </>
+  );
+};

src/components/apiList/index.ts

@@ -0,0 +1 @@
+export * from './ApiBox';

src/components/common/Button/index.tsx

@@ -4,13 +4,13 @@ import * as S from './styled';
 
 export interface ButtonProps {
   children: React.ReactNode;
+  isPrimary: boolean;
   onClick?: () => void;
-  isTertiary?: boolean;
 }
 
-export const Button: React.FC<ButtonProps> = ({ children, onClick, isTertiary }) => {
+export const Button: React.FC<ButtonProps> = ({ children, isPrimary, onClick }) => {
   return (
-    <S.ButtonElement onClick={onClick} isTertiary={isTertiary}>
+    <S.ButtonElement variant="contained" isPrimary={isPrimary} onClick={onClick}>
       {children}
     </S.ButtonElement>
   );

src/components/common/Button/styled.ts

@@ -1,21 +1,24 @@
 import styled from '@emotion/styled';
+import { Button } from '@mui/material';
 
 import { colors } from '@/styles';
 
-export const ButtonElement = styled.div<{ isTertiary?: boolean }>`
-  padding: 0 1rem;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 100%;
-  font-size: 1.1rem;
-  font-weight: 600;
-  background-color: ${({ isTertiary }) => (isTertiary ? colors.tertiary : colors.primary)};
+export const ButtonElement = styled(Button)<{ isPrimary: boolean }>`
+  background-color: ${({ isPrimary }) => (isPrimary ? colors.primary : colors.tertiary)};
   border-radius: 0.6rem;
-  cursor: pointer;
-  @media screen and (max-width: 630px) {
-    padding: 0 0.6rem;
-    font-size: 0.8rem;
-    font-weight: 600;
+  font-size: 1.3rem;
+  font-weight: 600;
+  height: 3.4rem;
+  border: 0;
+  color: ${colors.white};
+  &:hover {
+    background-color: ${({ isPrimary }) => (isPrimary ? colors.primary : colors.tertiary)};
+  }
+  & > a {
+    color: ${colors.white};
+    text-decoration: none;
+  }
+  @media screen and (max-width: 500px) {
+    font-size: 1.1rem;
   }
 `;

src/components/common/DataBox/index.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+
+import * as S from './styled';
+export interface DataBoxProps {
+  children: React.ReactNode;
+}
+
+export const DataBox: React.FC<DataBoxProps> = ({ children }) => {
+  return <S.DataBoxElement>{children}</S.DataBoxElement>;
+};

src/components/common/DataBox/styled.ts

@@ -0,0 +1,41 @@
+import styled from '@emotion/styled';
+
+import { colors } from '@/styles';
+
+export const DataBoxElement = styled.div`
+  background-color: ${colors.file};
+  color: ${colors.text};
+  border-radius: 0.8rem;
+  padding: 0.6rem;
+  text-align: center;
+  flex-wrap: wrap;
+  word-break: break-all;
+  font-size: 1.3rem;
+  max-width: 100%;
+  max-height: 10rem;
+  line-height: 1.8rem;
+  overflow: auto;
+  cursor: default;
+  display: flex;
+  align-items: center;
+  &::-webkit-scrollbar {
+    z-index: 999;
+    width: 0.4rem;
+  }
+  &::-webkit-scrollbar-track {
+    background-color: transparent;
+    border-radius: 1rem;
+  }
+  &::-webkit-scrollbar-thumb {
+    background-color: #4f4f4f;
+    border-radius: 1rem;
+  }
+  @media screen and (min-width: 700px) and (max-width: 1000px) {
+    max-height: 8rem;
+  }
+  @media screen and (max-width: 500px) {
+    max-height: 8rem;
+    font-size: 1.1rem;
+    font-weight: 600;
+  }
+`;