Holding memories close,
Angels in our hearts,
Voices echoing in silence,
Eternal love unbroken,
Never forgotten.
납골당까지 가지 못해도, 개인적으로 세상을 떠난 주변 사람들과의 추억을 공유하고, 계속해서 기억할 수 있도록 만든 웹사이트
- Frondend : React
- 프론트 관련 정보는 여기에서 확인해주세요!
- Backend : Django, Python, MySQL, AWS
고정 글씨 뒤에 화면들은 슬로우 화면으로 매번 바뀜
이건 기본적인 기능이니 별다른 설명은 하지 않겠다. 로그인 시 access token과 refresh token을 발급해 고유의 회원을 만들고, 이 회원마다 가지고 있는 정보를 id 값으로 데이터베이스에 외래 키 사용해 분리하였다. 암호는 해시화하였다.
추모대상의 영정 사진과, 이름, 세상을 떠난 날짜, 좌우명 등을 입력하고 등록할 수 있다.
이를 통해 등록하면 로그인한 home에 그 사용자의 영정 사진과 함께 프로필 카드가 생성되고, 등록된 사람의 프로필에는 반응형으로 기일, 좌우명, 나에게 어떤 사람이었는지에 대한 설명이 번갈아가며 나오게 된다.
로그인한 사용자마다 등록된 프로필 카드는 당연히 다르게 로드된다.
등록 팝업
선택한 프로필 카드
위의 프로필 카드에서 gallery를 클릭하면 내가 등록한 사진들을 볼 수 있는 탭으로 이동한다.
사진을 등록할 때 간단한 메세지를 등록하여 그 사람과의 추억의 순간을 잊지 않도록 메모를 남길 수 있도록 하였다.
그 메모는 해당 사진과 함께 묶어 저장하였으며, 해당 사진에 마우스를 올렸을 때 반투명한 카드와 함께 보이게 된다.
또한 위에 색깔 바꾸는 버튼을 이용해 화면의 색깔을 black/white로 적용할 수 있어, 자기가 원하는 분위기로 볼 수 있다. 이는 모든 화면에 적용된다.
검은화면 예시
밝은화면 예시
해당 사진의 메모
편지를 남기는 사람은 자신이 원하는 이름으로 등록할 수 있도록 models.py에는 access token값을 author로 받아오는 것이 아닌 사용자 입력값으로 받아올 수 있도록 하였다.
편지를 등록하면 다음과 같이 로드된다.
신청받은 고인의 사진을 webcam에 함께 추가하여 네 컷 사진을 남길 수 있도록 만들었다.
예를 들어, 돌아가신 할머니와 생전 함께 사진을 남기지 못한 사람들이 많다. 신청받은 사진을 통해 프레임을 생성하여 고인과 함께 사진 촬영을 할 수 있고,
사진 저장도 가능하게 구현했다.
함께 마지막 사진을 남겨보자 !
