1. 프로젝트 개요

소개: 이사 소비자와 이사 전문가 매칭 서비스

• 한 번의 이사 정보 입력만으로 여러 검증된 이사업체에 동시에 견적 요청이 가능합니다. 쉽고 빠르게 다양한 견적을 받아볼 수 있습니다. 고객이 직접 여러 업체가 제시한 다양한 견적과 조건을 비교하여, 자신의 예산과 필요에 맞는 최적의 이사 서비스를 선택할 수 있습니다. 불필요한 비용 지출을 줄이고, 합리적인 선택이 가능합니다. 모든 업체의 견적과 서비스 조건, 추가 옵션 등을 한 화면에서 비교할 수 있습니다. 가격뿐 아니라 서비스 내용, 일정, 특이사항까지 손쉽게 확인하고 원하는 조건을 선택할 수 있습니다. 실제 이사를 경험한 고객들의 리뷰와 평점을 통해 업체의 신뢰도와 서비스 품질을 확인할 수 있습니다. 생생한 후기를 참고해 믿을 수 있는 업체를 안심하고 선택할 수 있습니다.
• 기술 스텍
• 시스템 아키텍쳐

2. 담당한 작업

FE

BE

3. 기술적 성과

• 공유하기 로그인 없이도 외부에서 접근할 수 있도록 함

  • 공유용 인증 토큰 생성 → 공유 버튼 클릭 시 공유용 링크 생성 api 호출과 함께 토큰 부여

• 토스트 모달 라이브러리가 제공해주는 디자인과 애니메이션으로 쓰지 않고, 우리 사이트에 맞게 직접 커스텀

  toast(<Toast message={message} role={role} />, {
        toastId: TOAST_ID,
        position: "top-center",
        hideProgressBar: true,
        closeButton: false,
        draggable: false,
        pauseOnHover: false,
        transition: Fade,
        style: {
          background: "none",
          boxShadow: "none",
          padding: 0,
          display: "inline-flex",
          width: "auto",
          maxWidth: "95vw",
          justifyContent: "center"
        },
        className: "!bg-transparent !shadow-none !flex !justify-center",
        autoClose: duration
      });
  

4. 문제점 및 해결과정

문제

• 공유하기에서, 기사님 찾기에 있는 기사님 공유하기는 문제 없었다. 왜냐하면, 이 메뉴는 비회원도 접근이 가능해서 인증을 막고 있지 않기 때문이다.
• 그런데, 문제는 견적서 공유하기였다. 견적서 페이지 자체는 회원 전용이기에 인증으로 막혀있다. 그렇기에 공유를 해도 외부에서 접근하려 하면 로그인 페이지가 뜨고, 로그인을 하더라도 랜딩 페이지로 이동돼서 결국 해당 페이지를 볼 방법은 없는 것이다.

고민거리

• 견적서 공유하기 같은 경우, 해당 유저의 개인 정보이기 때문에 로그인으로 막혀 있어야 하는 것은 맞으나, 공유할 때만은 인증으로 안막히게 할 수는 없을까?

• 내가 생각한 방법 1) 라우트 공개를 견적상세 페이지만 풀자.

• 문제점:

  • 식별자 추측(Enumeration) & 대량 크롤링
    • /estimate/123, /estimate/124 같은 규칙이면 비회원이 번호만 올려가며 전부 긁을 위험 있음
    • 봇/스크래퍼가 주소, 이름, 날짜 같은 개인정보를 대량 수집 가능성
  • 권한 범위 통제 불가
    • 라우트를 열어두면 “누가” 접근하는지 모르니, 공유 받은 사람만 보게 하는 스코프 제어 불가
  • 만료·철회 불가
    • 공개 라우트는 TTL(유효기간)이나 즉시 철회(revoke) 같은 컨트롤이 없음
    • 그러나, 공유용 인증 토큰 방식은 exp, 1회용/횟수 제한, 직접 철회가 쉬움
  • 검색엔진/캐시 노출
    • 공개 페이지는 실수로 SEO 인덱싱(검색 노출) 되거나, CDN의 퍼블릭 캐시에 저장될 수 있음
    • 토큰 페이지는 noindex, Cache-Control: no-store 등으로 격리하기 훨씬 쉬움
  • 행동 보호(버튼) 분기 복잡
    • 페이지 안에 “확정하기/취소하기/찜” 같은 쓰기 액션이 있으면 비회원이 보지 못하게 UI/API를 또 따로 막아야 함
    • 토큰 페이지는 보기 전용 스코프로 서버가 단일 정책 적용하기 쉬움

• 내가 생각한 방법 2) 페이스북 공유를 참고해서 하면 어떨까?

  window.open(
        `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(url)}`,
        "_blank",
        "width=600,height=400"
  );
  

  • 다음은 페이스북 공유 로직인데, 공유링크 생성 api 구현하기 전에는 해당 페이지 주소를 가지고 공유하는 방식으로 했었다.
  • 저 링크는 페이스북의 공유용 링크인 것 같다는 생각이 들어서 이처럼 공유 링크를 따로 생성해서 공유용 페이지로 보여줄 수 있도록 하면 되지 않을까라는 생각이 들었다.