feat: file list Responsive improvements

tempfiles-team · Oct 16, 2023 · 3424ece · 3424ece
1 parent 581f111
commit 3424ece
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 6 deletions.
diff --git a/src/components/common/FileListBox/index.tsx b/src/components/common/FileListBox/index.tsx
@@ -22,8 +22,15 @@ export const FileListBox: React.FC<FileListBoxProps> = ({
 }) => (
   <S.FileListBoxContainer onClick={click}>
     {isEncrypted ? <img src={LockIcon} alt="lock icon"/> : <></>}
-    ID: {fileId} / 파일이름: {filename} / 크기:{size} / 업로드날짜:{uploadDate.year}-
-    {uploadDate.month}-{uploadDate.day}
+    <div className='long'>
+      ID: {fileId} / 파일이름: {filename} / 크기:{size} / 업로드날짜:{uploadDate.year}-
+      {uploadDate.month}-{uploadDate.day}
+    </div>
 
+    <div className='short'>
+      <p>ID: {fileId} / 파일이름: {filename}</p>
+      <p>크기:{size} / 업로드날짜:{uploadDate.year}-
+      {uploadDate.month}-{uploadDate.day}</p>
+    </div>
   </S.FileListBoxContainer>
 );
diff --git a/src/components/common/FileListBox/styled.ts b/src/components/common/FileListBox/styled.ts
@@ -8,7 +8,7 @@ export const FileListBoxContainer = styled.div`
   display: flex;
   flex-direction: row;
   justify-content: center;
-  align-items: flex-end;
+  align-items: center;
   font-size: 2.2rem;
   margin-bottom: 1.5rem;
   cursor: pointer;
@@ -17,4 +17,23 @@ export const FileListBoxContainer = styled.div`
     width: 2.3rem;
     margin-right: 0.5rem;
   }
+
+  .short {
+    display: none;
+  }
+
+
+  @media screen and (max-width: 1100px) {
+    .long {
+      display: none;
+    }
+
+    .short {
+      display: block;
+      p {
+        display: flex;
+        justify-content: center;
+      }
+    }
+  }
 `;
diff --git a/src/pages/checkpw/index.tsx b/src/pages/checkpw/index.tsx
@@ -6,8 +6,8 @@ import { useParams } from 'react-router-dom';
 import { toast } from 'react-toastify';
 import { bindActionCreators } from 'redux';
 
-// import EyeIcon from '../../assets/Eye.svg';
-// import EyeHiddenIcon from '../../assets/EyeHidden.svg';
+import EyeIcon from '../../assets/Eye.svg';
+import EyeHiddenIcon from '../../assets/EyeHidden.svg';
 import { FileBox, Button, SkeletonUI } from '../../components';
 import { actionCreators } from '../../state';
 import { getDate, getFileSize } from '../../utils';
@@ -116,7 +116,7 @@ export const CheckPasswordPage: React.FC = () => {
                 backgroundColor: 'var(--color-background-black)',
               }}
             >
-              {/* {passwordFilter ? <EyeHiddenIcon /> : <EyeIcon />} */}
+              <img src={passwordFilter ? EyeHiddenIcon : EyeIcon} alt="eye icon" />
             </S.EyeIconWrapper>
             <Button
               click={() => {