Skip to content

Commit 09b8c44

Browse files
ananjaeminananjaemin
authored
Merge pull request #21 from ananjaemin/dev
Dev
2 parents 397665b + 8253d8a commit 09b8c44

File tree

18 files changed

+329
-76
lines changed

18 files changed

+329
-76
lines changed

‎src/App.tsx‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,15 @@ import { ToastContainer } from 'react-toastify';
55

66
import 'react-toastify/dist/ReactToastify.css';
77
import { Navbar } from './components';
8-
import { MainPage, SuccessPage, DownloadPage, DeletePage, FileListPage } from './pages';
8+
import {
9+
MainPage,
10+
SuccessPage,
11+
DownloadPage,
12+
DeletePage,
13+
FileListPage,
14+
ApiPage,
15+
NotFoundPage,
16+
} from './pages';
917
import { store } from './state/store';
1018

1119
export const App: React.FC = () => (
@@ -41,6 +49,8 @@ export const App: React.FC = () => (
4149
<Route path="/download" element={<DownloadPage />} />
4250
<Route path="/delete" element={<DeletePage />} />
4351
<Route path="/filelist" element={<FileListPage />} />
52+
<Route path="/api/*" element={<ApiPage />} />
53+
<Route path="*" element={<NotFoundPage />} />
4454
</Route>
4555
</Routes>
4656
</Provider>

‎src/components/common/FileListBox/styled.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import styled from '@emotion/styled';
22

33
export const FileListBoxContainer = styled.div`
44
background-color: var(--color-backgorund-filelistbox);
5-
color: var(--color-text-filelistbox);
5+
color: var(--color-text-tertiary);
66
border-radius: 10px;
77
padding: 1.2rem 1.2rem 1.2rem 1.2rem;
88
display: flex;

‎src/components/common/Navbar/index.tsx‎

Lines changed: 1 addition & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,11 @@
11
import React from 'react';
2-
import { toast } from 'react-toastify';
32

43
import * as S from './styled';
54

65
export const Navbar: React.FC = () => (
76
<S.NavbarContainer>
87
<S.Nav to={'/'}>Upload</S.Nav>
9-
<S.Nav
10-
to={'/'}
11-
onClick={() => {
12-
toast.success('제작중!', {
13-
autoClose: 1000,
14-
position: toast.POSITION.BOTTOM_RIGHT,
15-
});
16-
}}
17-
>
18-
API
19-
</S.Nav>
8+
<S.Nav to={'/api'}>API</S.Nav>
209
<S.Nav to={'/filelist'}>File list</S.Nav>
2110
</S.NavbarContainer>
2211
);

‎src/components/common/Navbar/styled.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ export const NavbarContainer = styled.nav`
77
margin: 30px auto 30px auto;
88
display: flex;
99
justify-content: space-between;
10+
z-index: 99;
1011
`;
1112

1213
export const Nav = styled(Link)`

‎src/components/common/SkeletonUIBox/index.ts‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
import styled from '@emotion/styled';
2+
export const SkeletonUIBox = styled.div<{ randomWitdh: string }>`
3+
display: flex;
4+
background-color: var(--color-backgorund-filelistbox);
5+
border-radius: 10px;
6+
margin-bottom: 1.5rem;
7+
min-height: 4.6rem;
8+
min-width: ${(props) => props.randomWitdh}rem;
9+
overflow: hidden;
10+
&::before {
11+
content: ' ';
12+
width: 100%;
13+
height: auto;
14+
animation: loading 2s infinite;
15+
box-shadow: 0 0 30px 30px rgba(255, 255, 255, 0.3);
16+
}
17+
@keyframes loading {
18+
0% {
19+
transform: translateX(-50%);
20+
}
21+
50% {
22+
transform: translateX(100%);
23+
}
24+
100% {
25+
transform: translate(200%);
26+
}
27+
}
28+
`;
29+
export const SkeletonUIApiBox = styled(SkeletonUIBox)`
30+
min-height: 6.2rem;
31+
margin: 1rem;
32+
`;
33+
34+
export const SkeletonUI = styled.div<{
35+
width: string;
36+
height: string;
37+
margin: string;
38+
}>`
39+
display: flex;
40+
min-width: ${(props) => props.width};
41+
min-height: ${(props) => props.height};
42+
margin: ${(props) => props.margin};
43+
background: var(--color-backgorund-filelistbox);
44+
border-radius: 10px;
45+
overflow: hidden;
46+
&::before {
47+
content: ' ';
48+
width: 100%;
49+
height: auto;
50+
animation: loading 2s infinite;
51+
box-shadow: 0 0 30px 30px rgba(255, 255, 255, 0.3);
52+
}
53+
@keyframes loading {
54+
0% {
55+
transform: translateX(-50%);
56+
}
57+
50% {
58+
transform: translateX(100%);
59+
}
60+
100% {
61+
transform: translate(200%);
62+
}
63+
}
64+
`;

‎src/components/common/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,3 +7,4 @@ export * from './Navbar';
77
export * from './Button';
88
export * from './FileListBox';
99
export * from './Progress';
10+
export * from './SkeletonUIBox';

‎src/pages/api/index.tsx‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
import axios from 'axios';
2+
import React, { useState, useEffect } from 'react';
3+
import { Route, Routes, Link } from 'react-router-dom';
4+
5+
import { SkeletonUIApiBox } from '../../components';
6+
import { ApiPostPage } from '../postApi';
7+
import * as S from './styled';
8+
9+
export const ApiPage: React.FC = () => {
10+
const [loading, setLoading] = useState(false);
11+
const [apiInfo, setApiInfo] = useState<any[]>();
12+
const SkeletonUIRandomWidth = ['40', '50', '55', '45'];
13+
const getApiInfo = async () => {
14+
await axios({
15+
method: 'get',
16+
url: 'https://tfb.minpeter.cf/info',
17+
})
18+
.then((res) => {
19+
setApiInfo(res.data);
20+
setTimeout(() => {
21+
setLoading(true); //loading 확인하고싶으면 false로 바꿔주세요.
22+
}, 1200);
23+
})
24+
.catch((err) => {
25+
console.log(err);
26+
});
27+
};
28+
29+
useEffect(() => {
30+
getApiInfo();
31+
}, []);
32+
33+
return (
34+
<S.ApiPageContainer>
35+
<Routes>
36+
<Route
37+
path="/"
38+
element={
39+
<>
40+
<S.ApiListSection>
41+
{loading ? (
42+
<>
43+
{apiInfo?.map((item, index) => (
44+
<Link key={index} to={item.apiHandler} style={{ textDecoration: 'none' }}>
45+
<S.ApiListBox>{item.apiUrl}</S.ApiListBox>
46+
</Link>
47+
))}
48+
</>
49+
) : (
50+
<>
51+
<SkeletonUIApiBox
52+
randomWitdh={SkeletonUIRandomWidth[Math.floor(Math.random() * 4)]}
53+
/>
54+
<SkeletonUIApiBox
55+
randomWitdh={SkeletonUIRandomWidth[Math.floor(Math.random() * 4)]}
56+
/>
57+
<SkeletonUIApiBox
58+
randomWitdh={SkeletonUIRandomWidth[Math.floor(Math.random() * 4)]}
59+
/>
60+
<SkeletonUIApiBox
61+
randomWitdh={SkeletonUIRandomWidth[Math.floor(Math.random() * 4)]}
62+
/>
63+
</>
64+
)}
65+
</S.ApiListSection>
66+
<S.ApiListSectionShadow />
67+
</>
68+
}
69+
/>
70+
<Route path=":urlApi" element={<ApiPostPage />} />
71+
</Routes>
72+
</S.ApiPageContainer>
73+
);
74+
};

‎src/pages/api/styled.ts‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import styled from '@emotion/styled';
2+
3+
export const ApiPageContainer = styled.div`
4+
display: flex;
5+
align-items: center;
6+
flex-direction: column;
7+
`;
8+
9+
export const ApiListSection = styled.div`
10+
overflow-y: auto;
11+
display: flex;
12+
flex-direction: column;
13+
align-items: center;
14+
max-height: 40rem;
15+
&::-webkit-scrollbar {
16+
display: none;
17+
}
18+
`;
19+
20+
export const ApiListBox = styled.div`
21+
background-color: var(--color-backgorund-filelistbox);
22+
color: var(--color-text-tertiary);
23+
border-radius: 10px;
24+
padding: 2rem 1.4rem 2rem 1.4rem;
25+
margin: 1rem;
26+
display: flex;
27+
flex-direction: row;
28+
align-items: center;
29+
font-size: 2.2rem;
30+
font-weight: 700;
31+
cursor: pointer;
32+
`;
33+
34+
export const ApiListSectionShadow = styled.div`
35+
width: 100%;
36+
height: 6rem;
37+
position: relative;
38+
top: -25px;
39+
background: linear-gradient(180deg, rgba(40, 42, 58, 0) 0%, #282a3a 45.31%);
40+
`;

‎src/pages/download/styled.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ export const DownloadPageButtonSection = styled.div`
1515

1616
export const DonwloadFileBox = styled.div`
1717
background-color: var(--color-backgorund-filelistbox);
18-
color: var(--color-text-filelistbox);
18+
color: var(--color-text-tertiary);
1919
border-radius: 10px;
2020
padding: 1.2rem 1.2rem 1.2rem 1.2rem;
2121
display: flex;

‎src/pages/filelist/index.tsx‎

Lines changed: 9 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { useDispatch } from 'react-redux';
44
import { useNavigate } from 'react-router-dom';
55
import { bindActionCreators } from 'redux';
66

7-
import { FileListBox } from '../../components';
7+
import { FileListBox, SkeletonUIBox } from '../../components';
88
import { actionCreators } from '../../state';
99
import { getFileSize, getShortFileName, getDate } from '../../utils';
1010
import * as S from './styled';
@@ -25,7 +25,7 @@ export const FileListPage: React.FC = () => {
2525
setFileList(res.data.list); //파일리스트 요소 갯수에 따른 핸들링 추가예정
2626
setTimeout(() => {
2727
setLoading(true); //loading 확인하고싶으면 false로 바꿔주세요.
28-
}, 1500);
28+
}, 1200);
2929
})
3030
.catch((err) => {
3131
console.log(err);
@@ -62,27 +62,13 @@ export const FileListPage: React.FC = () => {
6262
) : (
6363
<>
6464
<S.FileListPageContainer>
65-
<S.FileListSkeletonUI
66-
randomWitdh={SkeletonUIRandomWidth[Math.floor(Math.random() * 6)]}
67-
/>
68-
<S.FileListSkeletonUI
69-
randomWitdh={SkeletonUIRandomWidth[Math.floor(Math.random() * 6)]}
70-
/>
71-
<S.FileListSkeletonUI
72-
randomWitdh={SkeletonUIRandomWidth[Math.floor(Math.random() * 6)]}
73-
/>
74-
<S.FileListSkeletonUI
75-
randomWitdh={SkeletonUIRandomWidth[Math.floor(Math.random() * 6)]}
76-
/>
77-
<S.FileListSkeletonUI
78-
randomWitdh={SkeletonUIRandomWidth[Math.floor(Math.random() * 6)]}
79-
/>
80-
<S.FileListSkeletonUI
81-
randomWitdh={SkeletonUIRandomWidth[Math.floor(Math.random() * 6)]}
82-
/>
83-
<S.FileListSkeletonUI
84-
randomWitdh={SkeletonUIRandomWidth[Math.floor(Math.random() * 6)]}
85-
/>
65+
<SkeletonUIBox randomWitdh={SkeletonUIRandomWidth[Math.floor(Math.random() * 6)]} />
66+
<SkeletonUIBox randomWitdh={SkeletonUIRandomWidth[Math.floor(Math.random() * 6)]} />
67+
<SkeletonUIBox randomWitdh={SkeletonUIRandomWidth[Math.floor(Math.random() * 6)]} />
68+
<SkeletonUIBox randomWitdh={SkeletonUIRandomWidth[Math.floor(Math.random() * 6)]} />
69+
<SkeletonUIBox randomWitdh={SkeletonUIRandomWidth[Math.floor(Math.random() * 6)]} />
70+
<SkeletonUIBox randomWitdh={SkeletonUIRandomWidth[Math.floor(Math.random() * 6)]} />
71+
<SkeletonUIBox randomWitdh={SkeletonUIRandomWidth[Math.floor(Math.random() * 6)]} />
8672
</S.FileListPageContainer>
8773
<S.FileListPageBoxShoadow />
8874
</>

0 commit comments

Comments
 (0)