Merge branch 'style/search-page' into 'develop'

style: document 페이지 스타일 추가



See merge request !13

 import React from 'react';
+import { Anchor } from '@mantine/core';
 import { HiOutlineDocumentDownload } from 'react-icons/hi';
 import palette from '../../lib/styles/palette';
 
 const File = ({ filename, filepath }) => {
   return (
-    <a style={{ color: palette.blue6 }} href={filepath}>
+    <Anchor style={{ color: palette.blue7 }} href={filepath} size="lg">
       {filename}
       <HiOutlineDocumentDownload />
-    </a>
+    </Anchor>
   );
 };
 export default File;

 import { Image, Text } from '@mantine/core';
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import styled from 'styled-components';
+import palette from '../../lib/styles/palette';
 
+const ImageContainer = styled.div`
+  padding: 10px;
+  border: 2px solid ${palette.gray3};
+  display: inline-flex;
+`;
 const ImageWrapper = styled.div`
-  display: flex;
+  box-shadow: 2px 1px 7px 1px rgba(0, 0, 0, 0.4);
+  margin: 10px;
+  border-radius: 10px;
 `;
 const Thumbnails = ({ srcs }) => {
+  const [lists, setLists] = useState([]);
+  const placeholder = () => {
+    if (srcs.length <= 4) {
+      const list = [];
+      const tempImgList = 4 - srcs.length;
+      for (let i = 0; i < tempImgList; i += 1) {
+        list.push(
+          <ImageWrapper>
+            <Image width={200} height={250} radius="md" withPlaceholder />
+          </ImageWrapper>
+        );
+      }
+      setLists(list);
+    }
+  };
+  useEffect(() => {
+    placeholder();
+  }, []);
   return (
     <>
-      <Text style={{ marginTop: '1rem' }}>문서 내 이미지</Text>
-      <ImageWrapper>
+      <Text style={{ marginTop: '1rem' }} size="lg" weight={500}>
+        문서 내 이미지
+      </Text>
+      <ImageContainer>
         {srcs.map(src => (
+          <ImageWrapper>
             <Image
               width={200}
               height={250}
@@ -18,9 +47,12 @@ const Thumbnails = ({ srcs }) => {
               src={src}
               withPlaceholder
             />
-        ))}
           </ImageWrapper>
+        ))}
+        {lists}
+      </ImageContainer>
     </>
   );
 };
+
 export default Thumbnails;

@@ -22,7 +22,7 @@ const Document = () => {
     templist.push(
       <Container
         style={{
-          padding: '2rem 4rem',
+          padding: '2rem 2rem',
           margin: '2rem 4rem',
           border: '1px solid black',
         }}