Tickmark
문서
개발 기록 2026-10-20 docs/devlog/2026-10-20-13-인증-화면과-한글-문구.md GitHub에서 보기

인증 화면과 한글 문구

목표

인증 화면과 안내를 한국어로 바꾸고 디자인 토큰을 적용한다. S1의 필드 오류는 화면설계서 부록 A와 일치시킨다. 이메일 회원가입과 매직 링크, 비밀번호 로그인, 재인증, 설정의 기존 인증 흐름과 라우트는 유지한다.

한 일

파일 변경
lib/tickmark_web/live/user_live/{login,registration,confirmation,settings}.ex 한국어 제목, 필드, 단추, 처리 중 문구와 안내. 인증은 max-w-sm, 설정은 max-w-xl 안에 역할 색상 카드 배치. 기존 폼 id 유지, 제목과 단추 id 추가
lib/tickmark_web/user_auth.ex, controllers/user_session_controller.ex 로그인 필요, 재인증, 잘못된 링크, 인증 실패, 로그인과 로그아웃, 비밀번호 변경 flash만 한국어로 변경
lib/tickmark/accounts/user_notifier.ex 회원가입 확인, 로그인, 이메일 변경 메일의 제목과 본문을 한국어로 변경
priv/gettext/ko/LC_MESSAGES/{errors,default}.po Ecto 기본 msgid 24개와 User 사용자 정의 msgid 3개, 공통 닫기와 작업 문구 번역. 복수형 9개는 msgstr[0] 하나 사용
lib/tickmark/engagements/engagement.ex 필수 입력 검증 분리와 message:만 변경. 회계연도와 수행 중요성 CHECK에도 부록 A 문구 지정
인증 LiveView, UserAuth, 세션 컨트롤러 테스트 한국어 단언으로 변경. 로그인 두 폼과 제목, 회원가입 성공 flash, 만료 링크와 로그인 유지 쿠키 확인
test/tickmark_web/gettext_ko_test.exs translate_error/1 직접 호출, 단수와 복수의 count 보간, 공통 번역 테스트 3개 추가
test/tickmark/{engagements_test.exs}, test/tickmark_web/live/engagement_live_test.exs 기존 영어 검증 문구 단언만 한국어 문구로 교체

결정과 트레이드오프

  • 공통 Ecto와 User 오류는 기존 CoreComponents.translate_error/1의 errors 도메인을 이용한다. User 스키마를 바꾸는 대안 대신 PO만 추가해 context 테스트의 원문 오류 계약을 유지했다.
  • S1의 네 필드 문구는 화면설계서의 한국어를 message:에 직접 지정했다. 화면 전용 문구를 위한 영어 msgid와 번역을 추가하는 간접층 없이 면접에서 검증 규칙과 표시 문구를 함께 설명할 수 있다.
  • 부록 A에 없는 회계연도와 수행 중요성의 빈 값에도 각각 범위 안내와 양수 금액 안내를 사용했다. 회사명과 결산일은 필드별 필수 문구를 사용한다. 필드, cast, 검증 기준과 제약 이름은 바꾸지 않았다.
  • 비밀번호 로그인은 기존 두 제출 단추 대신 "로그인 상태 유지" 체크박스와 "비밀번호로 로그인" 단추로 표현했다. 기존 remember_me 파라미터와 인증 처리를 유지하며, 체크 여부에 따른 쿠키 생성과 미생성을 테스트했다. 매직 링크 확인 화면의 로그인 유지와 이번만 로그인 선택은 그대로 두었다.
  • 공통 header 컴포넌트의 제목이 text-lg이므로 인증 화면 안에 text-xl font-semibold 제목을 직접 두었다. 설정 카드 제목은 text-base, 본문은 text-sm, 보조 안내는 text-muted다. F1 소유 공통 컴포넌트와 CSS는 수정하지 않았다.
  • F1의 로그인 후 홈 리디렉션에 대비해 세션 컨트롤러 테스트 3곳은 로그인 후 /users/settings에서 사용자 메뉴를 확인한다. 로그인 성공의 기존 / 리디렉션 단언은 유지했다.

막힌 점과 해결

  • 작업을 중단한 장애는 없었다. ko 로케일 설정만으로 번역이 생기지 않으므로 누락된 카탈로그를 추가하고 실제 함수 호출로 확인했다.
  • errors.po만 수정하고 다시 컴파일했을 때 Compiling 1 file (.ex)가 출력됐다. Gettext 1.0에서 한국어 단일 복수형 헤더와 PO 변경 감지를 모두 확인했다.

검증

대상 테스트의 실제 출력:

$ MIX_TEST_PARTITION=9 mix test test/tickmark_web/live/user_live test/tickmark_web/gettext_ko_test.exs test/tickmark_web/user_auth_test.exs test/tickmark_web/controllers/user_session_controller_test.exs test/tickmark_web/live/engagement_live_test.exs test/tickmark/engagements_test.exs
Finished in 1.2 seconds (1.2s async, 0.00s sync)
Result: 121 passed

PO만 수정한 뒤 컴파일의 실제 출력:

$ MIX_ENV=test MIX_TEST_PARTITION=9 mix compile --warnings-as-errors
Compiling 1 file (.ex)

최종 precommit의 실제 마지막 출력:

$ MIX_TEST_PARTITION=9 mix precommit
Finished in 18.1 seconds (16.8s async, 1.2s sync)
Result: 523 passed
  • 경고를 오류로 처리하는 컴파일, 미사용 의존성 정리, 포맷과 전체 테스트가 종료 코드 0으로 통과했다.
  • Ecto POT msgid 24개와 번역 항목을 비교해 누락 0개를 확인했다. 복수형 9개 모두 msgstr[0] 하나이며 Plural-Forms: nplurals=1; plural=0; 헤더를 사용한다.
  • git diff --check 통과. mix.lock, 라우터, config, User 스키마는 변경하지 않았다. CSS 파일을 수정하지 않아 별도 에셋 빌드는 실행하지 않았다.
  • 실제 브라우저에서의 시각 확인, F1 테마와 셸을 합친 화면, 운영 메일 발송은 검증하지 않았다. 외부 API와 메일 어댑터 설정을 바꾸지 않았다.

Elixir 학습 포인트

  • Ecto changeset은 오류를 {msgid, opts}로 보관한다. to_form/1과 공통 input 컴포넌트가 translate_error/1을 거치면서만 한국어가 된다. context 테스트의 errors_on/1은 번역을 거치지 않아 원문 단언을 유지한다.
  • 오류 옵션에 count가 있으면 dngettext가 복수형을 선택하고 %{count}를 보간한다. 한국어는 단수와 복수를 나누지 않으므로 단일 번역을 사용하며 1과 12 모두 테스트했다.
  • check_constraint/3의 message:는 DB 제약 실패를 changeset 오류로 옮길 때 쓰인다. 화면의 validate_number와 같은 문구를 지정해 검증 경로가 달라도 안내가 일치한다.
  • phx-trigger-action은 LiveView 처리 뒤 기존 HTTP 인증 폼을 제출한다. 화면만 바꾸면서 기존 이벤트, action과 파라미터를 유지해야 세션과 재인증 처리가 이어진다.

다음 할 일

  • 메인: 브랜치를 통합하고 docs/README.md 색인에 이 문서를 추가한다.
  • 메인: F1 테마와 셸을 합친 뒤 인증 화면의 라이트와 다크 모드, 개발 메일함 안내를 브라우저에서 확인한다.
  • 메인: W6 소유 test/tickmark_web/live/finding_live_test.exs:369의 refute ... "can't be blank"는 한국어 번역 뒤 의미가 약해진다. 해당 파일은 수정하지 않았으며 한국어 일반 오류인 "필수 입력 항목입니다."의 부재를 확인하도록 보강할 수 있다.
  • 메인: 운영 메일 발송과 데모 계정은 배정된 WBS 5.3, 5.4에서 진행한다.

계약 변경 요청: 없음.

관련 커밋

  • 기준 커밋: f5f7f78.
  • 이 문서를 포함한 커밋: feat(auth): 인증 화면과 검증 문구 한글화.