This repository contains the frontend implementation for the Capstone-Design project, focusing on delivering a responsive and interactive user experience using React and Redux. It also includes the implementation of a web application that converts a video into a spatial image.
- 특정 공간에서 촬영한 동영상을 모든 방향에서 해당 공간을 볼 수 있는 파노라마 형태의 구(球)형 이미지인 공간 이미지로 변환하는 서비스
- 사용자가 생성한 공간 이미지를 가상 현실 플랫폼의 배경으로 사용할 수 있게 다운로드할 수 있는 서비스
- 사용자가 생성한 공간 이미지를 활용하여 게시글 작성을 통해 손쉽게 공유할 수 있는 서비스
- 게시글에 추천 및 댓글 기능을 통해 다른 사용자와 상호작용할 수 있는 서비스
- Backend API Server: vp-api-server
- Stitching API Server: stitching-api-server
- Git clone repository
git clone https://github.com/iseungho/Capeasy.git
cd Capeasy
- Generate
.envfile
# 윈도우의 경우
echo REACT_APP_SERVER_URL=your_back_end_api_server_url > .env
# Unix-like 시스템(Linux, macOS)의 경우
echo "REACT_APP_SERVER_URL=your_back_end_api_server_url" > .env
- Install modules
npm install
- Run application
npm start
가운데 'Get Started' 버튼을 통해 공간 이미지 제작 서비스를 이용할 수 있습니다.
-
상단 메뉴바에서 Comunity를 선택하면 제작된 공간 이미지 기반의 게시물 리스트를 볼 수 있습니다.
-
About을 선택하면 서비스의 기술적인 내용을 확인할 수 있습니다.
-
우측 상단에 Login 버튼을 통해 회원가입 및 로그인을 진행할 수 있으며, 로그인이 완료된 경우에는 프로필 이미지가 표시됩니다.
-
로그인이 완료된 이후에 프로필 이미지를 선택하면 마이페이지로 이동하거나 로그아웃을 진행할 수 있습니다.
메인 페이지에서 스크롤을 아래로 내리면 서비스 사용 방법에 대해 설명하는 간단한 만화를 볼 수 있습니다.
카카오 및 네이버 계정 기반 회원가입 및 로그인은 현재 지원하지 않습니다.
동영상을 선택하거나 드래그하여 입력할 수 있습니다.
- 동영상 외 다른 형식의 파일을 업로드 할 수 없습니다.
- 공간 이미지로 변환하기 전에 올린 영상을 미리보기 할 수 있습니다.
- 추억 제작하기 버튼을 클릭하여 공간 이미지로 변환할 수 있습니다.
동영상을 공간 이미지로 변환이 완료된 결과 화면입니다.
- VIEW360 뷰어를 통해 VR 환경에서 감상할 수 있습니다.
- 다운로드 버튼을 클릭하여 해당 공간 이미지를 저장할 수 있습니다.
- 저장된 공간 이미지는 가상 현실 플랫폼의 배경으로 사용할 수 있습니다.
- 게시글 작성 버튼을 클릭하여 해당 공간 이미지 기반의 게시글을 작성할 수 있습니다.
게시글에 사용되는 이미지는 변경할 수 없으며, 제목 및 내용을 입력할 수 있습니다.
이렇게 작성된 게시글은 Community 탭에서 확인이 가능합니다.
게시글 추천 및 댓글 기능을 통해 다른 사용자와 상호작용할 수 있습니다.
마이 페이지에서 사용자가 작성한 게시글을 확인할 수 있습니다.
- 프로필 이미지를 클릭하여 프로필 이미지를 변경할 수 있습니다.
- 회원정보 수정 버튼을 클릭하여 사용자의 이메일, 비밀번호, 닉네임을 변경할 수 있습니다.
- 사용언어 및 개발환경 :
