[TIL] 07/12

✔️ swal tailwind css

// handlesubmit.tsx
  if (
    state.title.trim() === '' ||
    state.subtitle.trim() === '' ||
    state.description.trim() === '' ||
    state.value.trim() === '' ||
    state.material.some((item) => item.name.trim() === '' || item.value.trim() === '')
  ) {
    showSwal({ icon: 'warning', title: '모든 입력칸을 작성해주세요.' });
    return;
  }

  if (!state.thumbnail) {
    showSwal({ icon: 'warning', title: '썸네일을 업로드 해주세요.' });
    return;
  }

// swal.ts
import Swal, { SweetAlertIcon } from 'sweetalert2';

interface SwalOptions {
  icon: SweetAlertIcon;
  title: string;
}

const showSwal = ({ icon, title }: SwalOptions) => {
  Swal.fire({
    icon,
    title,
    customClass: {
      popup: 'w-72 h-68 mb-64',
      title: 'text-base font-bold',
      confirmButton: 'swal2-confirm swal2-styled bg-swal-confirm text-white'
    }
  });
};

export default showSwal;

✔️ useRouter

• a태그(Link 태그) 와 button 태그는 중첩될 수 없다.
  • "/" 페이지로 이동한다는 것은, 브라우저의 히스토리를 추가하는 것이다.
• router.back()을 이용하시면 히스토리 스택을 제거하며 뒤로가는 역할

✔️ useState 묶기

• 전체 state 가 동시에 처리되어야한다면, state를 하나로 묶는것을 고려해봐도 좋다.

✔️ type="button"

• type="button"으로 submit이 되지 않는다는 것을 명시

 		<button
            key={currentLevel}
            type="button"
            onClick={() => setLevel(currentLevel)}
          >

✔️ h 태그

• seo 도 생각해보기
• 필요한 depth 인지 고려할것.
• strong 태그