모아 모아(MOA MOA)
디자인 페이지
MOAMOA DEVELOP
📌 프로젝트 개요
MoaMoa는 Spotify API를 기반으로 음악이 첨부된 편지를 주고받을 수 있는 온라인 네트워킹 서비스입니다.
사용자는 편지를 작성하고 다양한 옵션으로 편지지와 편지 오브제를 커스터마이징할 수 있습니다. Next.js(15)를 통해 제작되었으며,
SSR,CSR의 조합과 AWS, S3, Docker를 통해 배포가 진행됐습니다.
📌 기술 스택 및 툴
Language - TypeScript
Frontend - Next.js 15 (App Router), React 18
- MUI(Material UI), Swiper, SweetAlert2
- html-to-image, react-toastify, framer-motion
- React Context API
Backend / API / DB - Next.js Route Handlers / Server Components
- MySQL
- Prisma
Auth - NextAuth.js
- OAuth Providers: Google, Kakao, Naver
Infra & Tool - Vercel, Github, AWS S3
- Slack, Figma, Jira
- ESLint
External APIs - Spotify Web API
📌 참여 인원 | 제작 기간
- mer’made 팀(4명)
2025.01 ~ 2025.07
📌 주요 기능
- 로그인/회원 가입
- 우편함, 편지 아이콘 디자인 커스터마이징
- 우편함 만들기 및 삭제하기
- 편지 작성하기 (편지지 선택 및 음악 첨부 가능)
- 친구 추가하기 (수락, 거절 가능)
- 받은 편지, 우편함 캡쳐
- 우편함 링크 SNS에 공유하기 및 복사하기
📌 주요 업무- 서비스 기획
- 디자인
- 프론트엔드 개발
- API 구성
📌 업무 세부사항
- 비즈니스 컴포넌트와 UI 컴포넌트 분리 작업
- 보안/권한에 따른 접근 제한 작업(인증에 따른 라우팅, fallback 화면 케이스별 구성)
- Context API를 통한 상태 관리
- 동적 라우팅을 통한 분기처리
- 재사용 컴포넌트 개발 및 스타일링(모달, Alert 창, etc.)
- 링크 복사, 공유하기,화면 캡쳐 및 다운로드 등 다수 기능 구현
- 페이지 다수 구성(상세 내용은 작업한 페이지 참고)
📌 트러블 슈팅 & 코드 스플릿
- 권한 검증 & 편지 목록/상세 데이터 분리 fetch
- Spotify iframe 로딩 깨짐 & 캡쳐 시 CORS 문제 해결
- CORS 에러 서버 측 프록시로 해결
- Next.js 15 쿠키 전달 문제 해결
📌 작업한 페이지
🛠️ 우편함 선택하기, 삭제하기 (/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
📌 작업 과정