급여 계산기에 비과세 수당 분리하고 광고 슬롯 13개 추가

세 가지 서로 다른 성격의 작업을 한 커밋에 묶어서 밀어넣었다. 기능 추가, 인프라 확장, 화면 정리 — 원래라면 PR 세 개로 쪼갰어야 했는데.

왜 한 커밋에 묶였나

salary.ts에 비과세 수당 로직을 붙이다 보니, 자연스럽게 salary.astro도 손대게 됐고, 거기서 index.astro 메인 레이아웃 군더더기가 눈에 밟혀서 같이 정리했다. 그러다 광고 슬롯 DB 스크립트(deploy/admin-db-add-slots-v2.sql)까지 밀려있던 작업이라 함께 올렸다.

팀원한테 리뷰 요청할 때 이런 커밋은 솔직히 미안하다. diff가 도메인 경계를 넘나들면 리뷰어 입장에서 컨텍스트 스위칭 비용이 올라간다. 이번엔 혼자 치고 나간 거라 넘어갔지만, 규칙으로는 "한 PR = 한 관심사"를 계속 강조하는 편이다.

비과세 수당 계산 — salary.ts

급여 계산기에서 비과세 항목을 별도로 분리해서 처리해야 하는 이유는 명확하다. 과세 표준에 포함되지 않기 때문에, 이걸 총급여에 그냥 합산하면 소득세 계산이 틀려버린다.

일반적으로 비과세 수당 처리는 아래 패턴으로 구현한다:

// salary.ts 의 일반적인 구조 예시
type SalaryInput = {
  baseSalary: number;
  taxableAllowances: number;
  nonTaxableAllowances: number; // 이번에 추가된 항목
};

function calculateTaxBase(input: SalaryInput): number {
  // 비과세 수당은 과세 표준에서 제외
  return input.baseSalary + input.taxableAllowances;
}

function calculateTotalPayment(input: SalaryInput): number {
  // 실수령액 계산 시에는 비과세 포함
  return calculateTaxBase(input) + input.nonTaxableAllowances;
}

taxBase와 totalPayment를 분리해두지 않으면 나중에 공제 계산, 4대보험 산정 기준이 추가될 때마다 함수 내부를 계속 수술하게 된다. 오늘 작업에서도 이 분리를 명확히 하는 게 핵심이었음.

입력 UI(salary.astro)에서 비과세 수당 필드를 별도로 받도록 바꿨는데, 이게 UX 관점에서도 중요하다. 사용자 입장에서 "식대", "차량유지비" 같은 비과세 항목을 어디에 넣어야 하는지 헷갈리는 경우가 많기 때문에, 필드 자체를 분리해서 명시적으로 구분해주는 게 맞다.

광고 슬롯 13개 추가 — SQL + 컴포넌트

deploy/admin-db-add-slots-v2.sql과 AdSlot.astro가 같이 변경됐다. DB에 슬롯 데이터를 먼저 심고, 컴포넌트에서 그 슬롯 ID를 바인딩하는 흐름이다.

SQL 파일명이 v2인 게 눈에 띈다. v1이 이미 있다는 뜻인데, 이런 배포용 SQL 파일은 멱등성(idempotency)을 챙겨두는 게 좋다. INSERT IGNORE 혹은 ON CONFLICT DO NOTHING 처리를 안 해두면, 배포 자동화 파이프라인에서 실수로 두 번 실행됐을 때 중복 데이터가 생긴다. 이번 스크립트에서 그 처리가 들어가 있는지는 별도로 확인이 필요하다.

AdSlot.astro 컴포넌트는 슬롯 ID를 props로 받아서 렌더링하는 구조일 텐데, 슬롯 수가 늘어날수록 Layout.astro에서 배치 관리가 복잡해지기 시작한다. 지금 13개면 아직 괜찮지만, 나중에 슬롯 노출 조건(디바이스, 로그인 여부 등)이 붙기 시작하면 컴포넌트 레벨에서 처리할지, 레이아웃 레벨에서 처리할지 결정이 필요해진다.

메인 정리 — index.astro

"메인 정리"라는 표현이 제일 애매하다. 이런 커밋 메시지가 달린 변경은 대부분 세 가지 중 하나다:

• 불필요한 마크업 제거
• 컴포넌트 분리 또는 인라인 코드 외부화
• 시각적 레이아웃 조정

어떤 경우든 index.astro는 사이트 진입점이라 건드릴 때 부담이 있다. 특히 이번처럼 광고 슬롯 추가와 같은 커밋에 묶여 있으면, 슬롯 배치를 위한 정리인지 별개 정리인지 diff만 보면 구분이 안 된다. 이게 커밋 분리가 필요한 이유 중 하나다.

이번 작업에서 실질적으로 가장 신경 쓴 건 salary.ts의 비과세 분리 로직이었고, 나머지 두 작업은 병렬로 처리한 작업들이다. 다음번엔 기능/인프라/정리 중 하나만 골라서 올리는 걸로.

🛒 이 글과 어울리는 추천 상품

• 기계식키보드 쿠팡에서 보기 →
• 모니터암 쿠팡에서 보기 →
• 사무의자 쿠팡에서 보기 →

*위 링크는 쿠팡파트너스 활동의 일환이며, 일정액의 수수료를 제공받을 수 있습니다.