풀스택
모바일 청첩장 업데이트
사업성 확장 (베트남)
국내 시장에는 너무 퀄리티 좋은 청첩장이 배포되고 있기 때문에 시장성을 따져 봤을때
한국을 좋아하고 한국의 문화를 따라가고 있는 베트남 시장이 좋은 판매처가 될수 있다고 판단
현재 베트남은 한복이나 한국음식 카페스타일 등 한국형 스타일에 큰 관심이 있는상황에서
세련되고 깔끔한 한국식 모바일 청첩장에 베트남 친화적인 결혼문화를 담아 한국처럼 계좌를 넣고
카카오를 쓰는게 아닌 잘로나 페이스북 메시지 등에 공유가 되는 기능이나 축의금은 qr로 받는 부분 지도나 맵에 그랩 호출하기를 연동하여 서비스 하는 등 사업적 확장을 구성중에 있다.
오늘 작업 요약
청첩장 제작 서비스 wedd의 다양한 버그 수정과 기능 개선, 그리고 R2 스토리지 관리 UI를 새로 구축했다.
1. 커버 하단 텍스트 블록 클릭 불가 버그 수정
문제
커버 섹션에 자유 배치 텍스트 블록을 추가하면 하단 영역의 블록이 클릭이 안 되는 현상이 있었다.
원인
<section> 태그에 overflow-hidden 클래스가 적용되어 있었는데, 이 CSS 속성이 시각적인 클리핑뿐 아니라 포인터 이벤트까지 차단하고 있었다.
해결
시각적 요소(파티클, 이미지, 오버레이)는 overflow:hidden이 적용된 내부 div로 감싸고, 텍스트 오버레이는 그 바깥에 position:absolute로 분리했다. 이렇게 하면 시각적 클리핑은 유지하면서 클릭 이벤트는 정상적으로 받을 수 있다.
2. OG 이미지 교체 및 도메인 수정
작업
index.html의 og:image, og:url을 기존wedd-2o9.pages.dev에서 실제 도메인weinvite.cc로 변경- OG 이미지를 새 디자인으로 교체 (
og-image-v5.jpg)
카카오톡 캐시 이슈
카카오 개발자 도구(developers.kakao.com)에서 캐시 초기화를 해도 카카오톡 앱 내 캐시는 별도로 존재해서 바로 반영이 안 됐다. 파일명을 변경(og-image-v5.jpg)해서 캐시를 우회하는 방식으로 해결했다. 카카오톡 앱 캐시는 시간이 지나야 자연 갱신된다.
3. 섹션(공지사항, 갤러리 등) 새로고침 없이 바로 안 보이는 버그
문제
청첩장 제작 페이지에서 공지사항이나 갤러리 섹션을 추가해도 새로고침 전까지 보이지 않는 현상.
원인
useScrollAnimation 훅이 IntersectionObserver를 사용해 뷰포트 진입 시 애니메이션을 트리거하는데, 제작 페이지(MakePage)의 미리보기 영역이 독립적인 스크롤 컨테이너로 분리되어 있어서 Observer가 뷰포트 기준으로 동작해 이벤트가 발생하지 않는 상황이었다.
해결
1초 후 강제 트리거되는 폴백 타이머 추가. Observer가 정상 동작하면 타이머를 취소하고, 그렇지 않으면 1초 후 자동으로 visible 상태로 전환한다.
4. 텍스트 크기 최대값 확대
변경
자유 배치 텍스트 블록의 글자 크기 슬라이더 최대값을 60px → 120px로 확대.
모바일 모달과 데스크톱 패널 두 곳 모두 수정.
5. R2 스토리지 관리 UI 구축
배경
청첩장 제작 과정에서 이미지를 R2에 업로드하면, 제작을 포기하거나 청첩장을 배포하지 않은 경우 해당 이미지가 고아(orphan) 상태로 남게 된다. 이를 정기적으로 정리할 수 있는 관리자 도구가 필요했다.
구현 내용
wedd 메인 서버 (functions/api/admin/images.ts)
list=1파라미터 추가: R2gallery/하위 전체 오브젝트를 페이지네이션으로 조회- 각 오브젝트의
uploaded타임스탬프를 ISO 문자열로 반환 - 기존 세션 단위 조회/삭제 기능은 그대로 유지
wedding-admin 서버 (wedding-admin/functions/api/images.ts)
- GET: R2 전체 세션 집계 후 D1
orders.upload_session과 비교- 일치하는 세션 → 사용 중 (주문 정보 포함)
- 불일치 세션 → 고아 세션 (파일 수, 용량, 첫 업로드 날짜 포함)
- DELETE: 선택한 고아 세션 삭제. D1에 연결된 세션은 안전장치로 삭제 불가
관리자 UI (wedding-admin/src/pages/StoragePage.tsx)
- 요약 카드: 전체/사용중/고아 세션 수, 고아 용량(MB)
- 고아 세션 탭: 체크박스 다중 선택, 업로드 날짜, 파일 수, 크기, 일괄 삭제
- 사용 중 탭: 세션 ID, 신랑/신부 이름, 주문 상태 배지, 파일 수, 크기, 등록일
6. KV 임시저장 검토 및 D1 전환 계획 수립
현황 파악
현재 임시저장(/api/wedding/save)은 Cloudflare KV에 1년 TTL로 저장된다. 사용하지 않는 임시저장이 계속 쌓이는 문제가 있다.
7일 TTL 시도 → 보류
임시저장에 7일 TTL을 적용하려 했으나, wedding-admin의 영구 배포 기능도 동일한 API를 사용하기 때문에 영구 배포된 청첩장도 7일 후 만료되는 문제가 발생. 별도 구분 로직을 추가해야 하는 복잡도가 생겨 이번 작업에서는 원상복귀.
결정: D1 분리
임시저장만 D1 temp_weddings 테이블로 분리해 7일 자동 만료 처리. 영구 배포(admin)는 KV 그대로 유지.
CREATE TABLE temp_weddings (
slug TEXT PRIMARY KEY,
admin_key TEXT NOT NULL,
data TEXT NOT NULL,
created_at INTEGER NOT NULL,
expires_at INTEGER NOT NULL -- created_at + 7일
);선행 조건: Cloudflare 대시보드에서 D1 DB(wedd-db) 생성 및 Pages 바인딩 설정 필요.
다음 작업 예정
- 임시저장 D1 전환:
temp_weddings테이블, save/[slug] API 수정 - RSVP 고도화: 동반 인원 수, 식사 여부 필드 추가 + 슬라이드 애니메이션
Stack: Cloudflare Pages · Workers · KV · R2 · D1 · React 18 · TypeScript · Tailwind CSS 4
