002: 방과후강사 월보수액 계산기 유지보수 일지

1. 필요경비율 변경 - 처음에는 숫자만 바꾸려고 했었다

업데이트 내역 1은 사실 변경된 필요경비율로 숫자만 바꿔주면 간단했다. 그냥 14.9를 19.3으로만 바꾸면 됨. 왜냐면 기존에 기본값이 적용되게 두고, 변경이 필요할 때만 □수기 변경에 체크하도록 만들어뒀거든.

<div class="field">
  <label class="small">필요경비율(%)</label><br/>
  <div class="inline-row">
    <input id="baseExpenseRate" type="number" step="0.1" value="14.9" disabled />
    <label class="small chk">
      <input type="checkbox" id="chkEditExpenseRate" />
      수기 변경
    </label>
  </div>
</div>

근데 아직 기존 고시 적용기간이 안 지났고, 2026.6월 귀속분 강사료를 이제 지출할 때잖음. 기존 필요경비율을 적용해야 한단 말임. 그래서 아예 드롭박스로 기간별 구간마다 적용되는 필요경비율을 선택할 수 있게 바꾸기로 함.

드롭박스 선택지는 이렇게 4가지:

• 19.3% (2026.7월~2027.6월 귀속분) — 기본 셋팅값
• 14.9% (2025.7월~2026.6월 귀속분)
• 16.5% (2024.7월~2025.6월 귀속분)
• 직접 입력하기

근데 문구가 길어질 예정이니, 필요경비율이랑 같은 행에 산재보험료·기준보수하한값 등이 놓인 게 몹시 거슬리는 것임. (물론 그렇게 모든 항목을 죄다 같은 grid로 묶은 건 당연히 나긴 함 ㅋㅋㅋ) 드롭박스로 바꾸는 김에 UI 배치도 <div class="grid five">에서 손보기로 했다.

• 첫 번째 행: 필요경비율 드롭박스 선택 영역만
• 밑 행: 나머지 항목들 배치(grid)

2. 계산 로직은 그대로여도 일관성을 유지하려면 손댈 곳이 늘어났음

필요경비율을 바꿔도 월보수액 계산 구조 자체는 그대로다. 계산식은 이거고, 사회보험료·원천세 계산 방식도 동일하게 유지.

          필요경비 = 강사료 품의금액*선택한 필요경비율
          월보수액 = 강사료 품의금액 − 필요경비

대신 일관성이 유지되도록 신경 써야 했음. 화면에 표시된 필요경비율과, 실제 계산 결과, 그리고 엑셀 파일로 저장된 결과값에 적용된 경비율이 전부 같아야 하니까. 예를 들어 드롭박스엔 19.3%로 나오는데 계산 결과나 다운로드한 엑셀엔 기존 14.9%로 계산된 값이 나오면 안 되잖음.

3. 틀고정 항목 변경 — 모바일에서 몹시 불-편

내 사이트를 모바일로도 쓰는데, 화면이 작다 보니 쓸데없는 강사명 틀고정 때문에 짜증이 많이 났음. (물론 이것도 내가 틀고정 해놓은 거긴 함 ㅋㅋㅋ) 그래서 CSS sticky 구조도 바꿔야 했다. 테이블 헤더도 같이 손봄.

.sheetlike .sticky-col-1, .sheetlike .sticky-col-2
.sheetlike .sticky-col-1 { left: 0; }
.sheetlike .sticky-col-2 { left: var(--freeze-idx-width); }
.sheetlike thead .sticky-col-1, .sheetlike thead .sticky-col-2
.sheetlike tfoot .sticky-col-1, .sheetlike tfoot .sticky-col-2
.sheetlike .sumrow .sticky-col-1, .sheetlike .sumrow .sticky-col-2

이 구조를 강사료 품의금액 전용 틀고정 class로 바꿨다. 강사명 대신 실제로 스크롤 중에 계속 봐야 하는 품의금액 열을 고정하는 쪽이 훨씬 쓸모 있음.

호고고걱 벌써 8시 10분, 급하다급해. 일단 출근~