[ERP project] 세금 계산기

3 minute read

세금 계산기

UI

다음은 해당 기능에 해당하는 부분의 코드와 설명입니다.

1. 키패드 이벤트 관리:

handleNumberClick = (number) => {
  setCurrentOperand((prev) => prev + number);
  setHourlyWage((prev) => prev + number);
};
// 키패드 값 삭제
const handleClearClick = () => {
  setHourlyWage(""); // 키패드 값 초기화
};
// 키패드 하나씩 지운다.
const handleDeleteClick = () => {
  setHourlyWage((prev) => prev.slice(0, -1));
};

handleNumberClick: 사용자가 숫자 버튼을 클릭했을 때 호출되며, 현재 입력된 숫자를 유지하고 hourlyWage 상태에 숫자를 추가합니다.
handleClearClick: “AC” 버튼을 클릭했을 때 호출되며, 입력된 값 및 hourlyWage 상태를 초기화합니다.
handleDeleteClick: “DEL” 버튼을 클릭했을 때 호출되며, 입력된 값 및 hourlyWage 상태에서 마지막 숫자를 삭제합니다.

키패드 이벤트 리스너 관리:

useEffect(() => {
  const handleKeyboardInput = (e) => {
    const key = e.key;
    if (e.target.tagName !== "INPUT") {
      // Check if the event target is not an input element
      if (key === "Backspace" || key === "Delete") {
        // 백스페이스 또는 딜리트 키 입력 시 숫자 삭제 처리
        handleDeleteClick();
      } else {
        // 숫자 이외의 키 입력 시 아무 작업하지 않음
        e.preventDefault(); // 입력 무시
      }
    } else if (
      !/^[0-9]$/.test(key) &&
      key !== "Backspace" &&
      key !== "Delete" &&
      key !== "Enter" &&
      key !== "." &&
      key !== "ArrowLeft" &&
      key !== "ArrowRight" &&
      key !== "ArrowUp" &&
      key !== "ArrowDown"
    ) {
      // 인풋창에 숫자 입력 시 alert 창 띄우기
      alert("숫자만 입력 할 수 있습니다.");

      e.preventDefault(); // 입력 무시
    } else {
      // e.preventDefault(); // 입력 무시
    }
  };
  window.addEventListener("keydown", handleKeyboardInput);

  return () => {
    window.removeEventListener("keydown", handleKeyboardInput);
  };
}, []);

useEffect를 사용하여 키보드 입력 이벤트를 감지하고 처리합니다.
handleKeyboardInput 함수는 키보드 이벤트를 관리하며, 입력된 키에 따라 적절한 동작을 합니다.

입력된 이벤트가 input 엘리먼트에서 발생한 것이 아닌지 확인하고, 숫자 이외의 키 입력 시 경고 창을 띄웁니다.
“Backspace” 또는 “Delete” 키를 누를 경우 handleDeleteClick 함수를 호출하여 숫자를 삭제합니다.

이렇게 구현된 기능은 사용자가 키패드로 숫자를 입력하거나 키보드로 숫자를 입력할 때 올바른 입력을 유지하고, 숫자 이외의 키 입력을 무시하거나 삭제할 수 있도록 도와줍니다. 또한, 입력에 따른 경고 창도 제공하여 사용자에게 안내합니다.

계산결과 확인

const calculateTaxesAndInsurance = (salary) => {
  // 국민연금 계산
  const pension = Math.floor(salary * 0.045);

  // 건강보험료 계산
  const healthInsurance = Math.floor(salary * 0.03545);

  //장기요양
  const jang = Math.floor(salary * 0.03545 * 0.01281);

  // 고용보험료 계산
  const employmentInsurance = Math.floor(salary * 0.009);

  // 산재보험료 계산
  const industrialAccidentInsurance = Math.floor(salary * 0);

  //근로 소득세 (1인가구 공제율 100%)
  const jap = Math.floor(salary * 0.00976);

  //지방 소득세
  const miniJap = Math.floor(jap * 0.1);
  return {
    pension,
    healthInsurance,
    employmentInsurance,
    industrialAccidentInsurance,
    jang,
    jap,
    miniJap,
  };
};

해당 코드는 주어진 연봉을 기반으로 국민연금, 건강보험료, 장기요양, 고용보험료, 산재보험료, 근로소득세, 그리고 지방소득세를 계산하는 함수입니다.

국민연금은 연봉의 4.5%로 계산되어 Math.floor(salary * 0.045)을 통해 계산됩니다.
건강보험료는 연봉의 3.545%로 계산되어 Math.floor(salary * 0.03545)을 통해 계산됩니다.
장기요양은 건강보험료의 1.281%로 계산되어 Math.floor(salary * 0.03545 * 0.01281)을 통해 계산됩니다.
고용보험료는 연봉의 0.9%로 계산되어 Math.floor(salary * 0.009)을 통해 계산됩니다.
산재보험료는 연봉의 0%로 계산되어 Math.floor(salary * 0)을 통해 계산됩니다.
근로소득세는 근로소득에 대한 공제율에 연봉을 곱한 값으로 계산되어 Math.floor(salary * 0.00976)을 통해 계산됩니다.
지방소득세는 근로소득세의 10%로 계산되어 Math.floor(jap * 0.1)을 통해 계산됩니다.

마지막으로, 각 계산된 값을 객체로 반환하여 결과를 출력합니다.

세금 기본 상식 공지 기능

const [title, setTitle] = useState("");
const PayManagementSystemCalculatorTitle = [
  " 우측 계산기에 숫자 입력 후, 좌측 명세서에서 확인가능합니다",
  " 월급여액은 비과세 소득을 제외한 금액이랍니다.",
  " 명세서를 보면 이미 월급에서 세금이 징수된 것을 확인할 수 있어요. 이걸 ‘원천징수’라 합니다",
  " 이미 납부한 세금을 다시 계산해 최종적으로 올해 납부할 세금을 확인, 정산하는 게 '연말정산'이에요",
  " 공제란 세금을 줄이는 걸 의미해요. 공제에는 근로소득공제, 종합소득공제, 세액공제 총 3가지가 있어요.",
  " 소득공제는 세율을 곱하기 전 단계의 소득 금액을 줄여주는 것, 액공제는 세율을 곱해서 나온 세액에서 일정한 금액을 줄여주는 것입니다.",
];
useEffect(() => {
  const randomIndex = Math.floor(
    Math.random() * PayManagementSystemCalculatorTitle.length
  );
  setTitle(PayManagementSystemCalculatorTitle[randomIndex]);
}, []);