Skip to content

Letter For You: 타임캡슐 편지를 보내보세요!

Notifications You must be signed in to change notification settings

SeolyeongBae/madcamp_week3

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 

Repository files navigation

LetterForYou

친구에게, 혹은 연인에게 전하고 싶은 말이 있나요? 레터포유를 통해 인터랙티브한 타입캡슐 편지를 보내보세요!

Banner

0. 회원가입 및 로그인


회원가입 로그인
ss_signup ss_login
  • 닉네임, 이메일, 비밀번호를 이용해 회원가입 할 수 있습니다.
  • 이메일과 비밀번호를 이용해 로그인할 수 있습니다.

1. 나의 레터스페이스


메인 레터스페이스
home_animation
  • 사용자의 이름이 레터스페이스 좌측 상단에 표시됩니다!
  • 레터스페이스 주인은 방문자에게 보여줄 한마디를 수정하고 저장할 수 있습니다.
  • 메인에는 도착한 편지들이 Carousel View로 보여집니다. 총 몇 개의 편지가 도착했는지 알 수 있습니다.
  • 맨 처음 ‘+’로 표시된 박스를 누르면 레터스페이스 주인에게 편지를 쓸 수 있습니다.
  • 설정한 날짜가 지나 열어볼 수 있는 편지는 색이 나타납니다. 누르면 화려한 효과와 함께 내용을 볼 수 있습니다.
  • 날짜가 지나지 않아 볼 수 없는 편지는 회색으로 표시되며, 클릭이 불가능합니다.
  • ‘링크 복사’ 버튼을 클릭하여 나의 레터스페이스 링크를 공유할 수 있습니다.
편지 오픈 화면
open_animation
  • 편지 작성자가 지정한 편지지 색상과 효과가 적용되어 보여집니다.
  • 열린 편지를 다시 한 번 클릭하면 편지가 닫힙니다.
  • 열람한 편지는 레터스페이스에서 없어지며, 보관함으로 이동됩니다.

2. 편지 보관함


storage_animation

  • 사용자가 열람한 편지는 연도별, 월별로 분류되어 저장됩니다.
  • 보관함은 해당되는 사용자만 접근이 가능합니다. 이외의 사용자가 접근하면 잘못된 접근이라는 경고 문구가 표시됩니다.
  • 사진 위에 마우스를 올리면 몇 장의 편지가 있는지 확인 할 수 있습니다.
  • 사진을 클릭하면 해당 월의 편지들이 레터스페이스와 동일하게 Carousel View로 보여집니다.
  • 카드를 누르면 flip animation과 함께 내용이 표시됩니다.

3. 편지 쓰기


편지 작성 화면
ss_post
  • 이 편지를 열 수 있는 날짜를 선택합니다.
  • 좌측 버튼을 통해 편지지의 색상을 변경할 수 있습니다. 지정하지 않으면 기본 색상이 적용됩니다.
  • 우측 버튼을 통해서 편지와 제목에 들어갈 효과를 적용할 수 있습니다. 지정하지 않으면 효과는 적용되지 않습니다.
  • 입력 창에 편지 제목, 내용, 보낸 사람을 작성한 후 하단 보내기 버튼을 누르면 해당 레터스페이스의 주인에게 편지가 발송되고, 편지 목록에서 확인할 수 있습니다.
  • css-transition을 사용해서 화면이 전환될 때 위/아래로 뷰가 움직입니다.

Tech stack


  • Frontend: HTML, CSS, JavaScript, React.js
  • Backend Server: Django
  • Database: SQLite

Credit

About

Letter For You: 타임캡슐 편지를 보내보세요!

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • Python 94.1%
  • HTML 2.3%
  • CSS 2.0%
  • JavaScript 1.6%