Capeasy

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

---

목차

• 사용 방법

• 실행 화면과 기능 설명

  ---

사용 방법

1. Git clone repository

git clone https://github.com/iseungho/Capeasy.git

cd Capeasy

2. Generate .env file

# 윈도우의 경우

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

3. Install modules

npm install

4. Run application

npm start

---

실행 화면과 기능 설명

메인 페이지

가운데 'Get Started' 버튼을 통해 공간 이미지 제작 서비스를 이용할 수 있습니다.

• 상단 메뉴바에서 Comunity를 선택하면 제작된 공간 이미지 기반의 게시물 리스트를 볼 수 있습니다.
• About을 선택하면 서비스의 기술적인 내용을 확인할 수 있습니다.
• 우측 상단에 Login 버튼을 통해 회원가입 및 로그인을 진행할 수 있으며, 로그인이 완료된 경우에는 프로필 이미지가 표시됩니다.
• 로그인이 완료된 이후에 프로필 이미지를 선택하면 마이페이지로 이동하거나 로그아웃을 진행할 수 있습니다.

사용 방법

메인 페이지에서 스크롤을 아래로 내리면 서비스 사용 방법에 대해 설명하는 간단한 만화를 볼 수 있습니다.

회원가입 및 로그인 모달

카카오 및 네이버 계정 기반 회원가입 및 로그인은 현재 지원하지 않습니다.

동영상 입력

동영상을 선택하거나 드래그하여 입력할 수 있습니다.

• 동영상 외 다른 형식의 파일을 업로드 할 수 없습니다.
• 공간 이미지로 변환하기 전에 올린 영상을 미리보기 할 수 있습니다.
• 추억 제작하기 버튼을 클릭하여 공간 이미지로 변환할 수 있습니다.

변환 결과

동영상을 공간 이미지로 변환이 완료된 결과 화면입니다.

• VIEW360 뷰어를 통해 VR 환경에서 감상할 수 있습니다.
• 다운로드 버튼을 클릭하여 해당 공간 이미지를 저장할 수 있습니다.
  • 저장된 공간 이미지는 가상 현실 플랫폼의 배경으로 사용할 수 있습니다.
• 게시글 작성 버튼을 클릭하여 해당 공간 이미지 기반의 게시글을 작성할 수 있습니다.

게시글 작성

게시글에 사용되는 이미지는 변경할 수 없으며, 제목 및 내용을 입력할 수 있습니다.

게시글 리스트

이렇게 작성된 게시글은 Community 탭에서 확인이 가능합니다.

게시글 관련 상호작용

게시글 추천 및 댓글 기능을 통해 다른 사용자와 상호작용할 수 있습니다.

마이 페이지

마이 페이지에서 사용자가 작성한 게시글을 확인할 수 있습니다.

• 프로필 이미지를 클릭하여 프로필 이미지를 변경할 수 있습니다.
• 회원정보 수정 버튼을 클릭하여 사용자의 이메일, 비밀번호, 닉네임을 변경할 수 있습니다.

---

기타 사항

• 사용언어 및 개발환경 :