DOHOON®
페이지를 이동하고 있습니다

개인 프로젝트 2026

Aeppy

Aeppy 프로젝트 대표 이미지

사진·일정·편지를 함께 기록하는 커플 웹앱

PROJECT OVERVIEW

인증과 초대 코드로 두 사용자를 연결하고, 사진·일정·기념일·편지를 함께 관리하는 커플 웹앱입니다. 공용 데이터와 클라이언트 상태를 연결하는 흐름, 실시간 변경 구독과 PWA 구성을 구현했습니다.

구현한 기능

  • 인증·초대 코드 기반 커플 연결
  • 사진·공유 일정·편지 기록 기능
  • Realtime 동기화·PWA 구성
담당 역할
개인 프로젝트 · 기획, 디자인, 프론트엔드 개발
작업 기간
2026
작업 유형
개인 프로젝트
01

2026

주요 구현 내용

개인 프로젝트 · 기획, 디자인, 프론트엔드 개발

Next.jsTypeScriptSupabaseZustandPWA
01

Supabase 인증과 초대 코드 연결

Google·카카오·이메일 인증과 초대 코드 입력을 통한 커플 연결 흐름을 구현했습니다. 로그인 상태를 구독하고, 연결된 커플 정보를 불러오도록 구성했습니다.

02

사진·공유 일정·편지 기록

사진 기록과 공유 일정, 기념일·위시리스트·편지를 조회하고 작성하는 화면을 구성했습니다. 화면의 작업을 Zustand 상태와 Supabase 조회·저장 함수에 연결했습니다.

03

공용 대표이미지 저장과 실시간 상태 동기화

대표이미지를 개인 프로필별로 저장하던 구조에서 커플 공용 데이터로 옮겼습니다. 초기 조회와 변경 구독이 같은 공용 값을 사용하도록 구성했습니다.

변경 전
홈에서 함께 사용하는 대표이미지가 개인 프로필 데이터에 저장돼 있었습니다.
변경
저장·초기 조회를 커플 공용 데이터 기준으로 통일하고, Supabase Realtime 변경 이벤트를 받아 Zustand의 대표이미지 상태를 갱신하도록 연결했습니다.
04

PWA 구성과 정적 리소스 캐시

웹 앱 매니페스트와 서비스 워커를 구성했습니다. 정적 리소스는 캐시하고, 인증 API·HTML·외부 데이터 요청은 캐시 대상에서 제외하도록 처리했습니다.

다음 프로젝트Dog Atlas이름 검색과 생활 조건 필터로 탐색하는 견종도감