이승윤

style: 검색결과 UI 스타일 추가

1 +import React from 'react';
2 +import { Link } from 'react-router-dom';
3 +import palette from '../../lib/styles/palette';
4 +
5 +const File = ({ filename }) => {
6 + return (
7 + <Link style={{ color: palette.blue6 }} to="/">
8 + {filename}
9 + </Link>
10 + );
11 +};
12 +export default File;
1 +import { Image, Text } from '@mantine/core';
2 +import React from 'react';
3 +
4 +const Thumbnails = () => {
5 + return (
6 + <>
7 + <Text style={{ marginTop: '1rem' }}>문서 이미지</Text>
8 + <div style={{ display: 'flex', justifyContent: 'space-between' }}>
9 + <Image width={200} height={250} radius="md" withPlaceholder />
10 + <Image width={200} height={250} radius="md" withPlaceholder />
11 + <Image width={200} height={250} radius="md" withPlaceholder />
12 + <Image width={200} height={250} radius="md" withPlaceholder />
13 + </div>
14 + </>
15 + );
16 +};
17 +export default Thumbnails;
1 +import React from 'react';
2 +import { Container, Text } from '@mantine/core';
3 +import File from './File';
4 +import Thumbnails from './Thumbnail';
5 +
6 +const Document = () => {
7 + // 파일이름
8 + // 본문 글 미리보기(짧게 ...으로짤림)
9 + // 문서 내 이미지
10 + return (
11 + <Container
12 + style={{
13 + padding: '2rem 4rem',
14 + margin: '2rem 4rem',
15 + border: '1px solid black',
16 + }}
17 + >
18 + <File filename="Sample Document.docx" />
19 + <Text color="green">경로: /샘플부서/샘플폴더/Sample Document.docx</Text>
20 + <Text>
21 + {`네드 로렘(Ned Rorem 1923- )은 현존하는 미국의 대표적인 현대 작곡가이다.
22 + 무엇 가곡 장르를 섭렵한 첫 번째 미국 작곡가로 많은 사람들에
23 + 의해 미국 가곡 작곡가들의 선두에 있다고 여기질 만큼 뛰어난 가곡을 많이
24 + 작곡한 현대 미...`}
25 + </Text>
26 + <Thumbnails />
27 + </Container>
28 + );
29 +};
30 +export default Document;