✨ 프로젝트 소개

• 과거에서 온 편지는 🚀 타임캡슐 🚀 컨셉 을 기반으로 추억에 대한 감상을 사용자간 송수신할 수 있는 서비스입니다.
• 소위 '추억팔이 👵🏻 🫧' 라고 불리는 노스탤지어를 계기로 서비스를 기획했습니다.
• 타임캡슐은 이미지, 텍스트, 음악을 포함한 포토덤프 형태로 모아볼 수 있습니다.
• 전송자 본인을 포함한 특정 사용자가 지정한 날짜에 타임캡슐을 조회할 수 있도록 설계했습니다.

💖 Speical Thanks to

이틀간 '과거에서 온 편지' 를 이용해준 98명의 유저들과 사용 피드백

🙋‍♀️ 팀원 및 역할

[FE] 김소연 테마선택, 전송완료 UI	[FE] 이선아 스플래시, 홈, 캡슐 생성, 전송 UI 서버 연동 API, 전역 상태 관리 AWS S3 이미지 저장	[FE] 황영서 캡슐 리스트, 캡슐 상세 UI
[BE] 권승연 AWS RDS, EC2 서버 무중단 배포	[BE] 김민진 DB설계, 사용자 관련 API AWS S3 이미지 저장	[BE] 손채민 캡슐 데이터 관련 API AWS S3 이미지 저장

🛠️ 개발 환경

Front-end

• 컴포넌트화를 통해 추후 유지보수와 재사용성을 고려
• Custom Hook을 통한 삭제 기능 구현 및
• 미디어 쿼리를 통해 다양한 모바일 디바이스 대응
• styled-components를 활용하여 props를 통해 페이지 용도에 따른 스타일링 적용
• Redux를 사용한 사용자 정보, 새로 생성할 캡슐 정보 모듈화 및 관리, redux-thunk와 axios를 통한 api 연동
ㄹ

Back-end

협업 tool

• Notion을 활용한 작업 상황 및 참고 자료, 개발 컨벤션 공유
• Git과 Github를 활용한 버전 관리

🎨 디자인 시스템

🕹️ 페이지별 기능

[시작화면]

1. 서비스 이용을 원하는 유저는 카카오 소셜 로그인 을 통해 간편하게 로그인/회원가입을 할 수 있습니다.
2. 로그인한 유저는 도착한 캡슐 개수 를 확인할 수 있습니다.
3. 계절과 트렌드를 반영한 다양한 테마가 반영된 시작 화면을 통해 서비스가 가진 감성을 유저가 즐길 수 있도록 디자인했으나 구현되어 있진 않습니다.

[새로운 캡슐 생성]

1. 캡슐 테마 를 선택할 수 있습니다. 🎮 레트로 🎮 테마 선택시 캡슐 조회에서 테마가 적용된 ui를 확인할 수 있습니다.
2. 갤러리에 저장된 사진을 첨부하고 텍스트를 입력하여 포토 카드를 최대 5장 생성할 수 있습니다.
3. 유튜브 링크를 첨부하여 캡슐 조회시 음악을 자동 재생할 수 있습니다.
4. 카드를 길게 누르면 삭제 할 수 있습니다.

[캡슐 전송]

1. 캡슐 도착일과 수신자 이메일을 입력합니다. 본인을 포함한 여러 사용자 이메일을 추가할 수 있습니다.
2. 캡슐 전송이 완료되면 시작화면으로 이동합니다.
3. 나에게 보내기를 선택했기 때문에 도착한 캡슐 개수가 늘어있는 것을 확인할 수 있습니다.

[캡슐 목록 및 내용 확인]

1. 시작화면에서 전체 보기 페이지로 이동합니다.
2. 확인하지 않은 캡슐 조회 후, 다시 돌아오면 해당 캡슐은 확인한 캡슐로 이동합니다.

👩‍🔧 개선 목표

1. Custom Hook과 util function 분리
2. 리액트 렌더링 최적화 방안 모색
3. 시작화면과 캡슐 조회에서 다양한 캡슐 테마 ui 적용 구현