Skip to content

pppp0722/file-viewer-frontend

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

ICTInternship-FileViewer(React + Spring)

ICT Internship(2021) file viewer website front-end & back-end


File Viewer Website






프로젝트 기능

🔑Login

입력한 ID, PW 가 일치하면 인증 세션을 부여 받고, 본문으로 이동합니다.

인증 세션은 해당 창을 닫을 때 까지 유지 되고, 인증 세션이 없으면 본문으로 이동할 수 없습니다.





🏠Home

본문은 root 디렉토리에서 시작합니다.

상단 header 에서는 현재 디렉토리 주소를 출력하고, 로그아웃 버튼이 존재합니다.

body의 좌측 side bar 에서는 모든 디렉토리를 tree 구조로 보여주며, 펼치거나 클릭하여 해당 디렉토리로 이동할 수 있습니다.

body의 우측 view 에서는 현재 디렉토리 내 모든 파일, 디렉토리를 아이콘으로 보여줍니다.





📁View

현재 디렉토리 내 모든 파일, 디렉토리를 아이콘 형식으로 출력합니다.

add 버튼으로 파일 업로드, 디렉토리 생성을 할 수 있습니다.

back 버튼으로 부모 디렉토리로 이동할 수 있습니다.

디렉토리 아이콘을 클릭하면 해당 디렉토리로 이동합니다.

파일 아이콘을 클릭하면 해당 파일을 자세히 볼 수 있는 Detail로 이동합니다.







📖Detail View

아이콘을 클릭하면 해당 파일을 자세하게 열람할 수 있습니다.

이미지의 경우 확대&축소, 배경 색상 변경, 삭제, 다운로드 기능을 사용할 수 있습니다.

동영상, 오디오 파일은 재생, 삭제, 다운로드 기능을 사용할 수 있습니다.

나머지 파일은 삭제, 다운로드 기능을 사용할 수 있습니다.





🎨Change Background

배경색과 이미지, 영상 소스의 색상이 비슷하여 식별이 힘든 상황을 방지하기 위하여 배경 색상을 변경할 수 있는 기능입니다.

상단 3가지 버튼을 통하여 투명한 회색, 흰색, 검은색의 바탕으로 이미지, 영상을 열람할 수 있습니다.





🔎Zoom In & Out

이미지를 확대, 축소하여 열람할 수 있는 기능입니다.

(-) 버튼으로 축소, (+) 버튼으로 확대 가능하며 최대 크기를 벗어날 수 없습니다.

가운데 현재 배율이 표시된 버튼을 클릭하면 원본 크기로 돌아갑니다.





💾Download

다운로드 버튼을 클릭하여 열람하고 있는 파일을 다운로드 받을 수 있습니다.





➕add

add 버튼을 클릭하면 여러가지 이미지, 동영상들을 한번에 업로드 하거나 새 디렉토리를 생성할 수 있는 모달 창을 띄웁니다.

업로드 버튼을 클릭하여 파일들을 선택하여 업로드 하거나, 생성 버튼으로 디렉토리를 생성할 수 있습니다.





🗑Delete

detail에서 delete 버튼을 클릭하여 파일을 삭제할 수 있습니다.



view 에서도 아이콘 hover 시 삭제 버튼이 드러나며 디렉토리, 파일을 삭제할 수 있습니다.

삭제 버튼 클릭 시 되 묻는 alert가 생성되고, 디렉토리 삭제 시 해당 디렉토리 명을 입력해야 삭제할 수 있습니다.





About

ICT Internship File Viewer Frontend (React)

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published