Repository navigation
feat: 인트로 화면 — 복구 코드로 이어하기 - #49
Conversation
Figma "뽀삐" Slide 8(node 227:784, 빈 입력)·9(node 227:909, 입력됨) — 명세 "세션 복구" 화면. 인트로(/)에 복구 코드 입력 + '이어 체험 하러 가기'를 추가한다. - restoreSession API 는 이미 구현돼 있었고 UI 만 없었다 - useRestoreSession 훅 추가: 복구 성공 시 writeCachedSessionId 로 방금 복구한 세션을 "현재 세션"으로 고정한다 — 안 그러면 useSession 의 ensureSession 이 캐시된 세션 ID 와 다르다고 보고 곧장 새 세션을 만들어 방금 복구한 세션을 덮어써 버린다(발견한 버그, 재현·수정) - 같은 이유로 세션별로 구분 저장되지 않는 로컬 임시본도 복구 성공 시 지운다 — 안 그러면 이전 세션 블록이 새로 복구한 세션 것인 양 이어서 자동 저장될 수 있다 - 코드가 비었을 때 버튼 비활성, 잘못된 코드는 오류 안내(Figma 에 없는 상태지만 상식적으로 필요) 세션 "정체성"만 복구한다 — 그 세션에 저장돼 있던 블록 내용을 서버에서 불러오는 API 는 아직 없어(저장만 가능·조회 불가) 새 캔버스로 시작한다. 후속 필요(이슈 #48 본문에 기록). Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
![inryeok-bot[bot]](https://avatars.githubusercontent.com/in/4815249?s=60&v=4){kind=small}
| event.preventDefault(); | ||
| const trimmed = code.trim(); | ||
| if (!trimmed || restore.isPending) return; | ||
| restore.mutate(trimmed, { onSuccess: () => router.push('/experience') }); |
There was a problem hiding this comment.
🔴 HIGH · DATA_INTEGRITY
저장 내용을 복원하지 않고 복구 세션으로 이동합니다
유효한 복구 코드가 확인되면 즉시 /experience로 이동하지만, 변경 코드의 주석대로 해당 세션의 블록을 서버에서 조회하지 않습니다. 따라서 저장된 프로젝트가 있는 세션도 빈 캔버스로 열리며, 이후 자동 저장이나 사용자 편집이 발생하면 복구하려던 서버 데이터를 빈 프로젝트로 덮어쓸 수 있습니다.
세션 ID뿐 아니라 저장된 프로젝트를 조회하여 편집 상태를 초기화한 뒤 이동해야 합니다. 조회 API가 아직 없다면 데이터 복원이 구현되기 전에는 이 흐름을 완전한 복구로 완료시키지 않는 편이 안전합니다.
There was a problem hiding this comment.
8e110fb 에서 수정했습니다. 말씀하신 대로 조회 API가 없는 지금은 이 흐름을 완전한 복구로 끝내지 않는 편을 택했습니다 — 복구 성공 시 곧장 /experience로 보내지 않고, '세션은 확인했지만 저장했던 블록 내용은 아직 못 불러온다(새 캔버스로 시작한다)'는 걸 화면에 분명히 알린 뒤, 사용자가 직접 '새 캔버스로 계속하기'를 눌러야 넘어가도록 바꿨습니다.
| </button> | ||
| {restore.isError && ( | ||
| <p role="alert" className="text-danger text-sm"> | ||
| 복구 코드를 다시 확인해 주세요. |
There was a problem hiding this comment.
🟠 MEDIUM · ERROR_HANDLING
모든 복구 실패를 잘못된 코드로 안내합니다
restore.isError의 원인을 구분하지 않고 항상 복구 코드를 다시 확인하라고 표시합니다. 네트워크 단절, 서버 장애, 응답 파싱 실패 또는 로컬 저장소 쓰기 실패도 동일한 문구가 되어, 유효한 코드를 사용한 사용자가 코드를 잘못 입력했다고 오인하게 됩니다.
서버가 반환한 invalid-code 오류만 현재 문구로 처리하고, 통신·서버·클라이언트 저장 실패에는 재시도 가능한 별도 안내를 제공해야 합니다.
There was a problem hiding this comment.
8e110fb 에서 수정했습니다. restore.error가 ApiError이고 status===401일 때만 '복구 코드를 다시 확인해 주세요'를 보여주고, 그 외(통신·서버 오류 등)는 '확인하는 중 문제가 생겼어요. 잠시 후 다시 시도해 주세요'로 분리했습니다. 500 오류 케이스로 단위 테스트도 추가했습니다.
- HIGH: 복구 성공 시 블록 내용 조회 없이 곧장 /experience 로 넘겨, 사용자가 "완전히 복구됐다"고 오인한 채 편집·자동 저장하면 서버에 남아 있던 진짜 내용을 빈 캔버스로 덮어쓸 위험이 있었다. 조회 API 가 없는 지금은 이 흐름을 "완전한 복구"로 끝내지 않는 게 안전하다는 리뷰 제안대로, 성공 후 곧장 이동하지 않고 "새 캔버스로 시작한다"는 걸 분명히 알린 뒤 사용자가 직접 계속하기를 눌러야 넘어가게 바꿨다. - MEDIUM: invalid-code(401)와 통신·서버 오류를 구분하지 않고 항상 "복구 코드를 다시 확인해 주세요"로 안내해, 유효한 코드를 쓴 사용자도 코드를 잘못 입력했다고 오인할 수 있었다. 401 만 그 문구를 쓰고 나머지는 재시도 안내로 분리했다. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Summary
/)에 복구 코드 입력 + '이어 체험 하러 가기' 버튼을 추가했습니다.restoreSessionAPI는 이미 구현돼 있었고 UI만 없었습니다.writeCachedSessionId)가 안 바뀌어서,/experience로 이동하자마자useSession이 "캐시와 다르다"며 새 세션을 또 만들어 방금 복구한 세션을 덮어쓰고 있었습니다.useRestoreSession에서 캐시를 고정하고, 세션별로 구분되지 않는 로컬 임시본도 함께 지우도록 했습니다.범위 아님(후속 필요): 세션 "정체성"만 복구됩니다. 그 세션에 저장된 블록 내용을 서버에서 불러오는 조회 API가 아직 없어서(저장만 가능), 다른 기기에서 복구해도 캔버스는 새로 시작합니다. 이슈 #48에 후속 필요 사항으로 기록해뒀습니다.
Closes #48
Test plan
npm run typecheck/npm run lint/npm run format:check통과npx vitest run— 121개 테스트 통과 (신규: 빈 입력 시 버튼 비활성, 유효 코드 성공 + 캐시 고정 + 임시본 삭제 확인, 무효 코드 오류 안내)npm run build통과/에서 빈 상태·입력 상태·오류 상태 브라우저 스크린샷 확인 — Figma와 일치