feat: add list and delete page

src/App.tsx

@@ -2,7 +2,15 @@ import { Outlet, Route, Routes } from 'react-router-dom';
 import React from 'react';
 import { ToastContainer } from 'react-toastify';
 
-import { ApiListPage, ApiPage, DetailPage, MainPage, CheckPwPage } from './pages';
+import {
+  ApiListPage,
+  ApiPage,
+  DetailPage,
+  MainPage,
+  CheckPwPage,
+  ListPage,
+  DeletePage,
+} from './pages';
 import { DefaultLayout } from './components';
 
 export const App: React.FC = () => {
@@ -17,10 +25,12 @@ export const App: React.FC = () => {
         }
       >
         <Route path="/" element={<MainPage />} />
-        <Route path="/dl/:id" element={<DetailPage />} />
+        <Route path="/list" element={<ListPage />} />
         <Route path="/apiList" element={<ApiListPage />} />
+        <Route path="/dl/:id" element={<DetailPage />} />
         <Route path="/api/:apiId" element={<ApiPage />} />
         <Route path="/checkPw/:id" element={<CheckPwPage />} />
+        <Route path="/del/:id" element={<DeletePage />} />
       </Route>
     </Routes>
   );

src/api/api.ts

@@ -1,7 +1,7 @@
 import axios from 'axios';
 
 export const API_SUFFIX = {
-  BASEURL: import.meta.env.DEV ? 'http://127.0.0.1:5050' : import.meta.env.VITE_BASEURL,
+  BASEURL: import.meta.env.DEV ? 'http://172.30.1.56:5050' : import.meta.env.VITE_BASEURL,
   UPLOAD: '/upload',
   FILE: '/file',
   FILES: '/files',

src/api/file.ts

@@ -12,11 +12,13 @@ export interface FileUploadValues extends UploadOptions {
   file: FormData;
 }
 
-export interface FileUploadResponse extends DataUploadResponse {
+export interface FileResponse extends DataUploadResponse {
   filename: string;
   size: number;
 }
 
+export type FileUploadResponse = FileResponse;
+
 export type GetFileOptions = GetItemOptions;
 
 export interface GetFileResponse extends DataResponse {

src/api/index.ts

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

src/api/list.ts

@@ -0,0 +1,13 @@
+import { API_SUFFIX, instance } from './api';
+import { FileResponse } from './file';
+import { TextResponse } from './text';
+
+export interface DataListResponse {
+  files: FileResponse[];
+  texts: TextResponse[];
+}
+
+export const getList = async (): Promise<DataListResponse> => {
+  const { data } = await instance.get(API_SUFFIX.LIST);
+  return data;
+};

src/api/text.ts

@@ -13,11 +13,13 @@ export interface UploadTextValues extends UploadOptions {
   textData: string;
 }
 
-export interface UploadTextResponse extends DataUploadResponse {
+export interface TextResponse extends DataUploadResponse {
   data: string;
   numberOfText: number;
 }
 
+export type UploadTextResponse = TextResponse;
+
 export interface GetTextResponse extends DataResponse {
   textData: string;
 }
@@ -35,7 +37,7 @@ export const upLoadText = async ({
   timeLimit,
 }: UploadTextValues) => {
   const { data } = await instance.post(
-    `${API_SUFFIX.TEXT}${API_SUFFIX.TEXT_UPLOAD}${password ? `?pw=${password}` : ''}`,
+    `${API_SUFFIX.TEXT_UPLOAD}${password ? `?pw=${password}` : ''}`,
     textData,
     {
       headers: {

src/components/common/DataBox/index.tsx

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

src/components/common/DataBox/styled.ts

@@ -11,6 +11,7 @@ export const DataBoxElement = styled.div`
   flex-wrap: wrap;
   word-break: break-all;
   font-size: 1.3rem;
+  width: fit-content;
   max-width: 100%;
   max-height: 10rem;
   line-height: 1.8rem;

src/components/common/FileDetail/index.tsx

@@ -0,0 +1,87 @@
+import React from 'react';
+
+import { useGetWindowSize } from '@/hooks';
+import { FileResponse } from '@/api';
+
+export interface FileDetailProps {
+  uploadDate: {
+    year: number;
+    month: number;
+    day: number;
+  };
+  fileData: FileResponse;
+  fileSize: string;
+  isDetailPage?: boolean;
+}
+
+export const FileDetail: React.FC<FileDetailProps> = ({
+  uploadDate,
+  fileData,
+  fileSize,
+  isDetailPage,
+}) => {
+  const { windowSize } = useGetWindowSize();
+
+  const calculateMaxFilenameLength = () => {
+    switch (true) {
+      case windowSize > 1250:
+        return 80;
+      case windowSize > 1180:
+        return 60;
+      case windowSize > 768:
+        return 55;
+      case windowSize > 530:
+        return 42;
+      default:
+        return 27;
+    }
+  };
+
+  const getShortFileName = (fileName: string, maxFilenameLength: number) => {
+    const lastDot = fileName.lastIndexOf('.');
+    const fileExtension = lastDot === -1 ? '' : fileName.substring(lastDot + 1);
+
+    if (fileName.length > maxFilenameLength) {
+      return `${fileName.slice(0, maxFilenameLength)}(...).${fileExtension}`;
+    }
+
+    return fileName;
+  };
+
+  const fileName = fileData.filename;
+  const fileNameLength = fileName.length;
+
+  const maxFilenameLength = calculateMaxFilenameLength();
+  const shortFileName = getShortFileName(fileName, maxFilenameLength);
+
+  let detailsText: React.ReactNode;
+
+  if (windowSize < 550 && fileNameLength <= 18) {
+    detailsText = (
+      <>
+        {!isDetailPage ? shortFileName : fileName} / {fileSize} <br />
+        업로드된 날짜: {uploadDate.year}-{uploadDate.month}-{uploadDate.day}
+      </>
+    );
+  } else if (
+    (windowSize > 550 && fileNameLength >= 18) ||
+    (windowSize < 550 && fileNameLength > 30)
+  ) {
+    detailsText = (
+      <>
+        {!isDetailPage ? shortFileName : fileName}
+        <br />
+        {fileSize} / 업로드된 날짜: {uploadDate.year}-{uploadDate.month}-{uploadDate.day}
+      </>
+    );
+  } else {
+    detailsText = (
+      <>
+        {!isDetailPage ? shortFileName : fileName} / {fileSize} / 업로드된 날짜: {uploadDate.year}-
+        {uploadDate.month}-{uploadDate.day}
+      </>
+    );
+  }
+
+  return <>{detailsText}</>;
+};

src/components/common/Navbar/styled.ts

@@ -13,7 +13,7 @@ export const NavbarContainer = styled.div`
   justify-content: center;
   column-gap: 6rem;
   @media screen and (max-width: 500px) {
-    padding: 1.6rem 0;
+    padding-bottom: 1.6rem;
   }
 `;
 

src/components/common/SkeletonUI/index.tsx

@@ -1,5 +1,8 @@
+/** @jsxImportSource @emotion/react */
 import React from 'react';
 
+import { css } from '@emotion/react';
+
 import * as S from './styled';
 
 export interface SkeletonUIProps {
@@ -9,5 +12,13 @@ export interface SkeletonUIProps {
 }
 
 export const SkeletonUI: React.FC<SkeletonUIProps> = ({ width, height, margin }) => {
-  return <S.SkeletonUIElement width={width} height={height} margin={margin} />;
+  return (
+    <S.SkeletonUIElement
+      css={css`
+        min-width: ${width};
+        min-height: ${height};
+        margin: ${margin};
+      `}
+    />
+  );
 };

src/components/common/SkeletonUI/styled.ts

@@ -2,15 +2,8 @@ import styled from '@emotion/styled';
 
 import { colors } from '@/styles';
 
-export const SkeletonUIElement = styled.div<{
-  width: string;
-  height: string;
-  margin: string;
-}>`
+export const SkeletonUIElement = styled.div`
   display: flex;
-  min-width: ${({ width }) => width};
-  min-height: ${({ height }) => height};
-  margin: ${({ margin }) => margin};
   background: ${colors.file};
   border-radius: 0.8rem;
   overflow: hidden;

src/components/common/SkeletonUIBox/index.tsx

@@ -0,0 +1,19 @@
+/** @jsxImportSource @emotion/react */
+import React from 'react';
+
+import { css } from '@emotion/react';
+
+import * as S from './styled';
+export interface SkeletonUIBoxProps {
+  randomWidth: string;
+}
+
+export const SkeletonUIBox: React.FC<SkeletonUIBoxProps> = ({ randomWidth }) => {
+  return (
+    <S.SkeletonUIBoxElement
+      css={css`
+        min-width: ${randomWidth}rem;
+      `}
+    />
+  );
+};

src/components/common/SkeletonUIBox/styled.ts

@@ -0,0 +1,30 @@
+import styled from '@emotion/styled';
+
+import { colors } from '@/styles';
+
+export const SkeletonUIBoxElement = styled.div`
+  display: flex;
+  background-color: ${colors.file};
+  border-radius: 1rem;
+  margin-bottom: 1.5rem;
+  min-height: 3rem;
+  overflow: hidden;
+  &::before {
+    content: ' ';
+    width: 100%;
+    height: auto;
+    animation: loading 2s infinite;
+    box-shadow: 0 0 3rem 3rem rgba(255, 255, 255, 0.3);
+  }
+  @keyframes loading {
+    0% {
+      transform: translateX(-50%);
+    }
+    50% {
+      transform: translateX(100%);
+    }
+    100% {
+      transform: translate(200%);
+    }
+  }
+`;

src/components/common/index.ts

@@ -4,3 +4,4 @@ export * from './SkeletonUI';
 export * from './Button';
 export * from './Password';
 export * from './DataBox';
+export * from './FileDetail';

src/components/index.ts

@@ -1,5 +1,5 @@
 export * from './common';
 export * from './layouts';
 export * from './main';
-export * from './detail';
 export * from './apiList';
+export * from './list';