인증부터 공유까지 어떤 제품 정책이 구현되어 있는가
이 문서는 6.2 인증부터 6.7 공유까지의 제품 정책을 2026년 7월 22일 프론트엔드 코드와 대조한다. 각 항목은 구현 완료, 부분 구현, 미구현, 정책 충돌로 구분하며 백엔드와 근거리 무선 통신(NFC) 실기기 검증이 필요한 범위도 표시한다.
이 문서가 다루는 범위
이 체크리스트는 기획, 디자인, 프론트엔드, 백엔드 담당자가 구현 차이와 정책 결정을 같은 기준으로 확인하도록 돕는다.
- 목표: 6.2부터 6.7까지 각 정책의 현재 구현 상태를 판정한다
- 대상: 기획, 디자인, 프론트엔드, 백엔드, QA 담당자
- 판정 기준: 현재 프론트엔드 코드, 연결된 API, 저장소의 확정 정책 문서
- 제외 범위: 백엔드 내부의 실제 데이터 삭제와 NFC 실물 카드 인코딩 결과
- 열린 항목: 명함 저장 정책과 실기기 확인 항목
판정 범례
체크 표시는 정책 전체를 만족할 때만 완료로 처리한다.
| 체크 | 판정 | 의미 |
|---|---|---|
[x] | ✅ 구현 | 현재 코드가 정책 전체를 처리한다 |
[ ] | 🟡 부분 구현 | 일부 조건만 처리하거나 추가 검증이 필요하다 |
[ ] | ❌ 미구현 | 실행 경로나 UI가 없다 |
[ ] | ⚠️ 정책 충돌 | 현재 구현 또는 확정 문서가 다른 정책을 사용한다 |
6.2 인증과 계정 정책
인증은 Google 로그인, 명함 등록 확인, 신규 회원 안내, 로그아웃과 계정 탈퇴 흐름을 지원한다.
| 체크 | 판정 | 정책 | 현재 구현과 근거 |
|---|---|---|---|
[x] | ✅ | Google 계정으로만 로그인 | 로그인 UI는 Google OAuth 시작 경로만 제공한다. useLoginFlow.ts |
[x] | ✅ | 로그인 완료 시 명함 등록 여부 자동 확인 | access token 저장 후 GET /me/business-card를 호출한다. 200은 등록, 404는 미등록으로 분기한다. loginComplete.ts, cardRegistration.ts |
[x] | ✅ | 최초 로그인 시 안내 화면과 명함 편집하러 가기 제공 | isNewMember이면 /taple-introduction으로 이동하며 CTA는 /live-studio로 연결된다. NFC 복귀 경로가 있으면 NFC 흐름을 우선한다. |
[x] | ✅ | 로그아웃 후 로그인 화면으로 이동하고 재로그인 허용 | 로그아웃 완료 후 /login으로 이동하며 확인 모달도 같은 동작을 안내한다. MyPage.tsx, myPageInfo.ts |
[x] | ✅ | 탈퇴 시 데이터 영구 삭제와 NFC 비활성화 | 확인 후 DELETE /me/account를 호출한다. 백엔드는 회원·명함 삭제와 NFC 영구 폐기를 처리하며 프론트는 성공 시 인증·쿼리·편집 draft를 초기화한다. |
[x] | ✅ | 탈퇴 완료 후 로그인 첫 화면 이동 | 탈퇴 성공 후 클라이언트 상태를 비우고 /login으로 이동한다. 실패하면 현재 페이지를 유지하고 오류 토스트를 표시한다. MyPage.tsx |
[x] | ✅ | 로그아웃과 탈퇴 전에 취소 가능한 확인 모달 표시 | 두 동작 모두 ConfirmDialog를 열며 취소 버튼, 바깥 영역 클릭, Escape로 닫을 수 있다. |
6.3 프로필 입력 정책
프로필 폼은 세 필수값, 선택 연락처, 전화번호 포맷, 커스텀 진입 검증을 지원한다. 긴 텍스트 렌더링은 추가 작업이 필요하다.
| 체크 | 판정 | 정책 | 현재 구현과 근거 |
|---|---|---|---|
[x] | ✅ | 이름, 직함, 회사는 필수이며 연락처는 선택 입력 | 이름·직함·회사는 필수이고 휴대폰·이메일은 선택이다. 등록된 검증 오류는 Input 오류 상태로 표시하고 빈 연락처는 명함에서 숨긴다. profileEditorForm.ts, NameCard.tsx |
[x] | ✅ | 이름·직함·회사 입력 후에만 명함 커스텀 진입 | 명함 카드 커스텀 버튼은 세 필드를 검증하고 오류가 없을 때만 시트를 연다. CardPreviewSection.tsx |
[x] | ✅ | 이름·직함·회사는 디자인 폰트와 한 줄 말줄임 유지 | 세 필드에 maxLength는 없으며 디자인에 지정된 고정 폰트를 사용한다. 긴 값은 한 줄 말줄임으로 처리한다. NameCard.tsx |
[ ] | ❌ | 한 줄 소개는 최대 2줄, 나머지는 한 줄과 폰트 축소 | 소개 입력은 50자로 제한하지만 카드에서는 한 줄 말줄임으로 표시한다. 다른 필드도 폰트 축소 없이 한 줄 말줄임을 사용한다. |
[x] | ✅ | 휴대폰 번호 입력 시 하이픈 자동 표시 | 숫자 외 문자를 제거하고 최대 11자리의 01x-0000-0000 형태로 포맷한다. phone.ts |
[x] | ✅ | 현재 필드별 글자 수 상한 유지 | 소개는 50자, 텍스트 블록 내용은 500자로 제한한다. 이름·직함·회사·이메일은 별도 상한을 두지 않고 휴대폰은 국내 번호 형식으로 제한한다. |
6.4 링크, 텍스트, 이미지 블록 정책
블록 추가, 개수 표시, 정렬, 다중 이미지, 링크 플랫폼 판별과 프로필 노출을 구현했다.
| 체크 | 판정 | 정책 | 현재 구현과 근거 |
|---|---|---|---|
[x] | ✅ | 링크, 텍스트, 이미지 블록을 여러 개 추가 | 세 섹션 모두 여러 블록을 지원하며 섹션당 최대 5개로 제한한다. editorBlocks.ts |
[x] | ✅ | 새 블록을 펼친 상태로 만들고 Count를 즉시 갱신 | 새 블록은 바로 편집할 수 있도록 open: true로 생성하며 Count는 배열 길이로 즉시 갱신한다. editorBlocks.ts |
[x] | ✅ | 삭제 후 복구 없이 2초 결과 토스트 표시 | 확인 모달 없이 즉시 삭제하고 결과 토스트를 2초간 표시한다. 복구는 제공하지 않는다. LiveStudioPage.tsx |
[x] | ✅ | URL로 대표 사이트를 판별하고 브랜드 또는 기본 아이콘 표시 | 공식 도메인과 하위 도메인으로 대표 사이트를 판별하고 기타 URL에는 기본 체인 아이콘을 표시한다. 주소에 프로토콜이 없으면 HTTPS를 보완하고 HTTP(S) 주소만 새 탭으로 연다. editorBlocks.ts, BlockEditorSection.tsx |
[x] | ✅ | 텍스트 제목을 헤더에 표시하고 줄바꿈 유지 | 제목은 블록 헤더에 표시하며 공개 명함과 미리보기의 본문에 white-space: pre-wrap을 적용한다. LivePreviewPage.style.ts |
[x] | ✅ | 명함 전체 이미지 6장, 블록별 스와이프·순번, 삭제 토스트, 세로 이미지 Dim 처리 | 모든 이미지 블록의 이미지 합계를 6장으로 제한한다. 편집 화면과 공개 뷰어는 블록별 갤러리와 상세 스와이프를 제공하며, 세로 썸네일은 Dim 배경 위에 contain으로 표시한다. |
[x] | ✅ | 모든 유효한 링크를 프로필 아이콘에 표시하고 클릭 시 외부 이동 | 대표 6개 사이트는 브랜드 아이콘, 기타 링크는 체인 아이콘으로 표시한다. 프로필 아이콘과 하단 링크 모두 정규화한 HTTP(S) 주소를 새 탭으로 연다. LivePreviewPage.tsx, PublicBusinessCardPage.tsx |
6.5 명함 그래픽, 컬러, 테마, 로고 정책
명함 구성, 다섯 개 테마, 로고 위치와 자동 저장은 구현돼 있다. 플립 제스처와 서버 결과 기반 로고 토스트는 추가 작업이 필요하다.
| 체크 | 판정 | 정책 | 현재 구현과 근거 |
|---|---|---|---|
[x] | ✅ | 앞면에 회사, 소개, 직함, 이름을 표시하고 로고 여부로 분기 | NameCard가 네 필드를 표시하며 로고가 있을 때만 앞면 좌측 하단에 렌더링한다. 별도 Default·Logo 컴포넌트 대신 조건부 렌더링을 사용한다. |
[x] | ✅ | 뒷면에 회사, 휴대폰, 이메일 표시 | 뒷면에 세 값을 표시하며 휴대폰과 이메일이 없으면 연락처 영역을 숨긴다. NameCard.tsx |
[ ] | 🟡 | 드래그 방향으로 Flip하고 한 번 탭하면 앞면 복귀 | 3D Flip 애니메이션은 있다. 드래그와 카드 탭은 없으며 앞면보기/뒷면보기 버튼으로 전환한다. |
[x] | ✅ | 기본 포함 5개 컬러 테마를 앞·뒤에 즉시 반영하고 자동 저장 | 5개 cardColorThemes를 제공하며 선택 즉시 store와 style API에 반영한다. |
[x] | ✅ | 로고를 125×60px 안에 Fit하고 앞면 좌측 하단 배치 | LogoBox가 최대 크기와 object-fit: contain을 적용한다. NameCard.tsx |
[x] | ✅ | 앨범에서 로고 등록·변경, 즉시 삭제, 결과별 2초 토스트 | 서버 저장 성공 후 성공 토스트를 표시한다. 실패하면 이전 로고를 복원하고 실패 토스트를 표시한다. CardCustomizeSheet.tsx, LiveStudioPage.tsx |
6.6 명함 저장 정책
명함 저장은 PNG 이미지로 통일했다. Live Studio에서는 저장할 면을 선택하고, 공개 명함에서는 앞뒷면 합본을 바로 저장한다.
| 체크 | 판정 | 정책 | 현재 구현과 근거 |
|---|---|---|---|
[x] | ✅ | Live Studio에서 앞면 또는 앞·뒷면 이미지 저장 옵션 제공 | 이미지 저장 버튼을 누르면 Dim 선택 화면에서 앞면 또는 앞뒷면을 고른다. CardCustomizeSheet.tsx, cardImage.ts |
[x] | ✅ | 명함 뷰어에서 앞·뒤를 합친 이미지 한 장 저장 | 저장 버튼을 누르면 앞뒷면을 세로로 합친 580×620 PNG를 바로 내려받는다. PublicBusinessCardPage.tsx, cardImage.ts |
[x] | ✅ | 이미지 저장 완료 토스트를 2초 표시 | Live Studio와 공개 명함 모두 저장 성공·실패 결과를 2초 토스트로 표시한다. CardCustomizeSheet.tsx, PublicBusinessCardPage.tsx |
6.7 공유 정책
공개 명함 링크 공유와 비회원 조회는 구현돼 있다. NFC 실기기 흐름과 카카오톡 문구는 추가 확인이 필요하다.
| 체크 | 판정 | 정책 | 현재 구현과 근거 |
|---|---|---|---|
[x] | ✅ | 뷰어 공유 버튼으로 시스템 공유 시트 호출 | navigator.share()를 호출하며 미지원 환경에서는 링크를 복사한다. PublicBusinessCardPage.tsx |
[ ] | 🟡 | 실물 NFC 태그로 등록된 디지털 명함 즉시 열기 | /nfc/{token} resolve와 /card/{slug} 이동은 구현됐다. 실물 카드 인코딩, 백엔드 상태, iOS·Android 실기기 검증이 필요하다. |
[x] | ✅ | TAPLE 비회원도 명함 조회 | 공개 명함과 NFC resolve API는 인증 없이 요청한다. api.ts |
[x] | ✅ | 카카오톡을 포함한 시스템 공유 유지 | 카카오톡 전용 SDK 없이 제목과 URL을 시스템 공유 시트에 전달한다. 미지원 환경에서는 링크를 복사한다. PublicBusinessCardPage.tsx |
구현 상태 요약
33개 정책을 전체 조건 충족 여부로 집계했다.
| 판정 | 개수 |
|---|---|
| ✅ 구현 | 30 |
| 🟡 부분 구현 | 2 |
| ❌ 미구현 | 1 |
| ⚠️ 정책 충돌 | 0 |
우선 결정할 정책 충돌
현재 확인된 정책 충돌은 없다.
구현 우선순위 제안
정책 충돌을 해결한 뒤 데이터 손실과 막힌 흐름부터 처리한다.
- P0 로그인 분기 정합성: 명함 등록 여부 조회와 로그아웃 후 이동 경로를 확정한다
- P0 저장 정책 확정: 완료. 화면의 저장 동작을 PNG 이미지로 통일했다
- P1 프로필 검증 통일: 연락처 필수 여부, 이메일 형식, 커스텀 진입 가드를 같은 스키마로 관리한다
- P1 링크 노출 수정: 완료. 대표 링크는 브랜드 아이콘, 기타 링크는 체인 아이콘으로 프로필에 표시하고 외부 이동을 연결했다
- P1 블록·이미지 세부 정책 반영: 초기 접힘, 줄바꿈, 이미지 상한과 Fit, 삭제 피드백을 확정안에 맞춘다
- P2 인터랙션 보강: 드래그 Flip, 카드 탭 복귀, 로고 저장 결과 토스트를 추가한다
코드 기준 위치
정책을 변경할 때 다음 파일과 이 체크리스트를 함께 갱신한다.
- 인증 완료:
src/features/login/domain/loginComplete.ts - 계정 관리:
src/features/myPage/pages/MyPage.tsx - 프로필 검증:
src/features/liveStudio/domain/profileEditorForm.ts - 블록 모델:
src/features/liveStudio/domain/editorBlocks.ts - 블록 편집:
src/features/liveStudio/components/BlockEditorSection/BlockEditorSection.tsx - 명함 컴포넌트:
src/shared/ui/NameCard/NameCard.tsx - 카드 커스텀:
src/features/liveStudio/components/CardCustomizeSheet/CardCustomizeSheet.tsx - 공개 명함:
src/features/liveStudio/pages/PublicBusinessCardPage.tsx - NFC 진입:
src/features/liveStudio/pages/NfcTagEntryPage.tsx