Refactor FileListBox component to use styled.a instead of styled.div

tempfiles-team · Apr 22, 2024 · f435e3c · f435e3c
1 parent 3491802
commit f435e3c
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 31 deletions.
diff --git a/src/components/FileListBox/index.tsx b/src/components/FileListBox/index.tsx
@@ -18,20 +18,18 @@ export function FileListBox({
   setDownloading,
 }: FileListBoxProps) {
   return (
-    <S.FileListBoxContainer>
-      <a
-        style={{ color: 'inherit', textDecoration: 'none' }}
-        href={Backend(downloadUrl)}
-        onClick={async (e) => {
-          e.preventDefault();
-          setDownloading(true);
-          await downloadFile(downloadUrl, filename);
-          setDownloading(false);
-        }}
-      >
-        {filename} / {getFileSize(size)}
-        {downloading && size >= 2000_000 ? ' / 다운로드 중...' : ''}
-      </a>
+    <S.FileListBoxContainer
+      style={{ color: 'inherit', textDecoration: 'none' }}
+      href={Backend(downloadUrl)}
+      onClick={async (e) => {
+        e.preventDefault();
+        setDownloading(true);
+        await downloadFile(downloadUrl, filename);
+        setDownloading(false);
+      }}
+    >
+      {filename} / {getFileSize(size)}
+      {downloading && size >= 2000_000 ? ' / 다운로드 중...' : ''}
     </S.FileListBoxContainer>
   );
 }
diff --git a/src/components/FileListBox/styled.ts b/src/components/FileListBox/styled.ts
@@ -1,15 +1,24 @@
 import styled from '@emotion/styled';
 
-export const FileListBoxContainer = styled.div`
+export const FileListBoxContainer = styled.a`
+  width: fit-content;
+
   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;
   justify-content: center;
-  align-items: flex-start;
+  align-items: center;
+
   font-size: 2.2rem;
-  margin-bottom: 1.5rem;
+  margin: 0.5rem auto;
+
   cursor: pointer;
+
+  text-wrap: balance;
+  text-align: center;
 `;
diff --git a/src/pages/download/index.tsx b/src/pages/download/index.tsx
@@ -70,21 +70,20 @@ export function DownloadPage() {
           </S.IdBox>
           <S.DownloadFileListBoxContainer>
             {fileProps.files.map((file: FileListBoxProps, index: number) => (
-              <div key={index}>
-                <FileListBox
-                  filename={file.filename}
-                  size={file.size}
-                  downloadUrl={file.downloadUrl}
-                  downloading={itemDownloading[index]}
-                  setDownloading={(downloading: boolean) => {
-                    const updatedItemDownloading = [...itemDownloading];
-                    updatedItemDownloading[index] = downloading;
-                    setItemDownloading(updatedItemDownloading);
+              <FileListBox
+                key={index}
+                filename={file.filename}
+                size={file.size}
+                downloadUrl={file.downloadUrl}
+                downloading={itemDownloading[index]}
+                setDownloading={(downloading: boolean) => {
+                  const updatedItemDownloading = [...itemDownloading];
+                  updatedItemDownloading[index] = downloading;
+                  setItemDownloading(updatedItemDownloading);
 
-                    return downloading;
-                  }}
-                />
-              </div>
+                  return downloading;
+                }}
+              />
             ))}
           </S.DownloadFileListBoxContainer>
 

diff --git a/src/pages/download/styled.ts b/src/pages/download/styled.ts
@@ -27,6 +27,9 @@ export const DownloadFileListBoxContainer = styled.div`
   display: flex;
   flex-direction: column;
   align-items: center;
+
+  margin: 0 1rem;
+
   &::-webkit-scrollbar {
     display: none;
   }