[Tailwind CSS] 테스트 상세/결과 컴포넌트(feat. SweetAlert2 & MUI Icon)

오늘은 테스트 상세 페이지 & 결과 컴포넌트를 다듬었다. 가운데로 정렬해주고, 텍스트를 감싸는 div에도 width를 설정해주어 글자가 넘치면 줄바꿈 되도록 하였다. 그래도 몇 일 tailwind를 썼다고 처음보다는 덜 뚝딱대는 모습을 보여 뿌듯했다. 익숙해지기만한다면 tailwind처럼 편한 방법이 또 있을까 싶다.

상세 페이지

참고로 아이콘은 Mui Icon을 사용해서 빠르게 넣어주었다.

결과 페이지

공유하기 기능에 적용시킬 예쁜 alert창 라이브러리를 찾았다. 공유하기 버튼을 누르면 url이 클립보드로 복사되도록 구현했다.

const handleCopyURL = () => {
    const currentURL = window.location.href;
    navigator.clipboard
      .writeText(currentURL)
      .then(() => {
        Toast.fire({
          icon: "success",
          title: "URL이 클립보드에 복사되었습니다!",
        });
        console.log("URL copied to clipboard:", currentURL);
      })
      .catch((error) => {
        Toast.fire({
          icon: "fail",
          title: "URL 복사를 실패하였습니다!",
        });
        console.error("Failed to copy URL:", error);
      });
  };

복사가 완료되면 완료되었다는 alert창을 띄우고 싶어 찾아보게 되었다.

https://sweetalert2.github.io/#usage

SweetAlert2

굉장히 다양한 alert 창을 제공해주고 있어 유용하게 잘 쓰일 것 같다. 나는 토스트 창을 선택하여 적용시켜주었다.

  const Toast = Swal.mixin({
    toast: true,
    position: "top",
    showConfirmButton: false,
    timer: 3000,
    timerProgressBar: true,
    didOpen: (toast) => {
      toast.addEventListener("mouseenter", Swal.stopTimer);
      toast.addEventListener("mouseleave", Swal.resumeTimer);
    },
  });

  const handleCopyURL = () => {
    const currentURL = window.location.href;
    navigator.clipboard
      .writeText(currentURL)
      .then(() => {
        Toast.fire({
          icon: "success",
          title: "URL이 클립보드에 복사되었습니다!",
        });
        console.log("URL copied to clipboard:", currentURL);
      })
      .catch((error) => {
        Toast.fire({
          icon: "fail",
          title: "URL 복사를 실패하였습니다!",
        });
        console.error("Failed to copy URL:", error);
      });
  };

짠. 3초간 지속되었다가 자동으로 없어진다.

이제 왠만한 컴포넌트 구성은 끝난 듯하다. 그러면 이제 API 부분을 다듬을 차례.. 먼저 json server로 연습을 하고, 카테고리별로 필터도 해보고 하드코딩한 부분들을 API 요청을 통해 이루어질 수 있게 바꿔야 한다! 

그나저나 연보라색 너무 너무 이쁘다..