Box/URL 추가, 수정, 삭제

작업 전 목표

  • 강력한 보안 : Box 이름, URL 목록 등의 정보는 암호화 하여 저장
  • 상태 관리 단순화 : Tanstack Query로 서버 상태와 로컬 캐시 자동 동기화
  • 사용자 경험 : Optimistic Update로 즉각적인 UI 반응

    • 핵심 구현 패턴

    Tanstack Query Mutation

    로컬 캐시가 아닌 DB의 position을 참조해 동기화 문제 방지

    AES 암호화 방식을 사용하여 Box 이름을 암호화하여 DB에 저장

    invalidateQueries를 이용하여 UI 즉시 업데이트

    데이터 AES 암호화

    link, name, description, favicion 등 모두 암호화

    일반 텍스트 및 URL 데이터를 AES 방식으로 암호화

    Box/URL 추가

    position 캐시 참조시 실제 데이터와 일치하지 않을 수 있기 때문에 DB를 조회하여 기존 최대 position + 1

    DB에 저장할 때 AES 암호화를 사용하고, 데이터를 요청 할 때 다시 복호화 하여 출력

    Box 추가

    URL 추가

    Box/URL 수정

    AES 암호화 후 update 요청 할 때 보안 과정을 거쳐서 본인의 Box/URL만 수정 가능

    Box의 경우 완료 후 setQueryData로 캐시에서 수정한 데이터만 교체하여 즉시 UI 반영

    Box 수정

    URL 수정

    Box/URL 삭제

    delete 요청 시 id 검증을 통해 본인의 데이터만 삭제 가능하게 ㅈ가업

    Box의 경우 완료 후 setQueryData로 캐시에서 해당 데이터만 삭제하여 즉시 UI 반영

    Box 삭제

    URL 삭제