모아 모아(MOA MOA)
🔗 개발 페이지
🔗 Github 페이지
📌 프로젝트 개요
MoaMoa는 Spotify API를 기반으로 음악이 첨부된 편지를 주고받을 수 있는 온라인 네트워킹 서비스입니다.
사용자는 편지를 작성하고 다양한 옵션으로 편지지와 편지 오브제를 커스터마이징할 수 있습니다. Next.js(15)를 통해 제작되었으며,
SSR,CSR의 조합과 AWS, S3, Docker를 통해 배포가 진행됐습니다.
📌 제작 툴 - Figma, FigJam(유저 플로우)
- Adobe Illustrator
- Adobe Photoshop
- Jira, Slack
📌 참여 인원 | 제작 기간
- Smurfs-village팀(4명)
2024.07 ~ 2024.08
📌 주요 업무- 서비스 기획
- 디자인(UX/UI)
- 프론트엔드 개발
📌 문제 정의 및 해결
📌 디자인 시스템
📌 작업한 페이지
🛠️ 우편함 선택하기, 삭제하기 (/select-moa)
🛠️ 우편함 메인 화면(/mymoa/[id])
🛠️ 편지 상세 모달
편지 다운로드
html-to-image, file-saver 사용,
spotify CORS 문제를 위한 대안 컴포넌트 포함
작성 코드 PR 1
작성 코드 PR 2
작성 코드 PR 3
html-to-image, file-saver 사용,
spotify CORS 문제를 위한 대안 컴포넌트 포함
작성 코드 PR 1
작성 코드 PR 2
작성 코드 PR 3
🛠️ 새로운 우편함 만들기, 편지 작성하기(/create-moa, /create-letter)
🛠️ 작성한 편지, 기한만료 우편함(/sent-letter, /saved-moa)
작성한 편지
작성 코드 PR
작성 코드 PR
🛠️ 친구의 우편함, 알림함(/mymoa/[id], /notification)
🛠️ 친구 목록 페이지, 사이드 바, 404 페이지(/friend-list, Sidebar.tsx, not-found.tsx)
404 오류 페이지
작성 코드 PR
작성 코드 PR
📌 작업 과정
- 피그잼을 통한 기획, 유저 플로우 작성
- Jira를 통한 기능 명세서, task 생성
- Figma에서 와이어프레임, 프로토 타입 제작
- Jira에서 sprint 관리하며 우선 순위대로 작업