🥞 오늘 한 일

• 최종 프로젝트
  • 주소 복사 기능 제작
  • 공유 모달 제작

기술적 의사결정

공유 모달

기존의 공구 신청 시 사용했던 모달 기능을 그대로 사용했고, 카카오톡 공유하기와 주소 복사 기능만 제작하기로 했기 때문에 만들어둔 카카오톡 공유 버튼을 넣고, 주소 복사 기능을 제작했다. 해당 코드는 다음과 같다.

// ShareModal.tsx
<input value={window.location.href} readOnly />
<button
  onClick={async () => {
    try {
      await navigator.clipboard.writeText(window.location.href);
      Notify.success("링크가 복사되었습니다.");
    } catch (e) {
      Notify.failure("링크를 복사하지 못 했습니다.");
    }
  }}
  >
  링크 복사하기
</button>

찾아보니 현재 링크를 가져올 수 있는 방법으로 windows.location을 사용할 수 있었다. 내가 직접적으로 정해주는 것보다 현재 링크를 바로 가져오는 게 훨씬 낫다고 판단했기에 (공구템뿐만 아니라 자취템에서도 쓰여야하는 코드의 재사용성을 감안하더라도) window.location.href를 사용하여 링크를 readOnly input에 넣어줬다.
또 버튼 클릭 시 링크가 복사되도록 했다. 구글링을 통해 navigator 객체에 대해서 알게 되었고, 특별히 api 설치나 복잡한 방법 필요없이 클립보드에 복사할 수 있는 방법이었기에 사용했다. 성공 여부에 따라 다른 Notify가 나오도록 설정했다.
수정할 부분은 자취템 부분에서도 똑같은 코드로 사용할 수 있도록 제작하는 것. 때문에 파일의 위치도 common같은 폴더로 변경이 되어야할 것 같다.

🍴 돌아보기

더위 먹었는지 집중이 잘 안 된다... 주말이니까 그럴 수 있지. 내일부터는 또 다시 달려보자! 정말 얼마 남지 않았다.

🍳 내일 목표

• 최종 프로젝트
  • UT 테스트 제작
  • 모바일 결제 기능 제작