퍼블리싱 인계 변경 요약 — 2026-08-12 로그인 화면 개편

HTML 마크업 변경만 정리한 문서입니다. CSS/JS/SVG 는 개발팀 재정의 영역이라 제외 — 단, 상태 클래스는 마크업 계약이라 §B 에 명시합니다.

변경 HTML 1개 — pages/login.html. 디자인 개편(Figma 1.시스템로그인 4개 프레임 신규분) 반영.

※ 인증 플로우가 바뀌었습니다. 기존 “이메일 입력 → OTP 전송 → 6자리 코드 입력”(입력칸 4개) → 변경 “ID·비밀번호 입력 → 로그인 → OTP 인증번호 입력”(입력칸 최대 3개). 이메일 입력칸과 별도 인증코드 입력칸이 없어졌습니다.

A마크업 변경 (pages/login.html)

변경 유형

코드	내용
OTP행 재정의	OTP 행의 성격이 이메일 입력 → OTP 인증번호 입력 으로 변경. `#login-email` → `#login-otp` / placeholder `이메일 입력` → `전송된 OTP 인증 번호 입력` / 버튼 `OTP 전송` → `OTP 재전송`
필드 삭제	별도 인증코드 입력행 `.login-code`(`#login-code`) 블록 통째 제거 — 신규 디자인에 없음
기본노출	OTP 행이 초기 화면에서 숨김 — `.login-form.is-otp-sent` 상태에서만 노출 (Figma 01.입력전 프레임에서 hidden)
버튼 라벨 상태화	로그인 버튼 라벨이 단계별로 2종 → `<span class="login-submit-label">`(로그인) / `<span class="login-submit-label-otp">`(OTP 인증번호 로그인) 로 분리, 상태 클래스가 전환
클래스 정리	OTP 버튼에서 `btn-lg` 제거 — Figma `button/basic_line_L` 은 높이 50 · 글자 15(`btn-lg` 는 16)
아이콘 교체	비밀번호 표시 토글 `ico-contents-hide` → `ico-contents-show` (Figma `contents_show`)
문구	오류 메시지 기본 문구 `OTP 정보가 일치하지 않습니다.` → `비밀번호가 일치하지 않습니다.`

파일별 매트릭스 (숫자 = 해당 유형으로 바뀐 요소 수)

파일 (pages/)	OTP행	필드삭제	기본노출	라벨상태화	클래스정리	아이콘	문구
`login`	3	1	1	2	1	1	1
합계	3	1	1	2	1	1	1

B상태 클래스 (개발 연동 지점)

화면 4종이 한 페이지 + 상태 클래스 로 구현돼 있습니다. <form class="login-card login-form"> 에 아래 클래스를 붙이면 해당 상태가 됩니다. (JS 없이 CSS 로만 전환)

Figma 프레임	form 클래스	화면
01.입력전	`login-form`	ID · 비밀번호 2칸 / 버튼 “로그인”
01.입력후_01오류메시지	`login-form is-error`	위 + 오류 메시지 노출
01.입력후_02OTP	`login-form is-otp-sent`	ID·비밀번호 잠김 + OTP 행 노출 / 버튼 “OTP 인증번호 로그인”
01.입력후_02OTP_오류메시지	`login-form is-otp-sent is-error`	위 + 오류 메시지 노출

추가 요청

is-otp-sent 단계에서 ID·비밀번호 입력칸은 수정 불가 가 디자인 의도입니다. 퍼블에서는 배경만 잠금색(N-100)으로 처리해 뒀으니, 실제 disabled(또는 readonly) 속성은 개발에서 부여해 주세요.
오류 메시지 문구(.login-error span)는 케이스별로 서버 메시지를 넣는 자리입니다. 현재 값은 Figma 예시 문구입니다.
“OTP 재전송” 버튼은 재전송 전용입니다. 최초 OTP 발송은 “로그인” 버튼 이 트리거합니다(디자인상 별도 전송 버튼 없음).

C참고 — 마크업 최종 형태

<div class="login-fields">
  <input type="text" class="input input-lg" id="login-id" placeholder="ID 입력">

  <div class="login-pw">
    <input type="password" class="input input-lg" id="login-pw" placeholder="비밀번호 입력">
    <button type="button" class="login-pw-toggle"><i class="ico ico-contents-show"></i></button>
  </div>

  <!-- OTP 인증번호 — 로그인 시도 후 노출(.login-form.is-otp-sent) -->
  <div class="login-otp">
    <input type="text" class="input input-lg" id="login-otp" placeholder="전송된 OTP 인증 번호 입력">
    <button type="button" class="btn btn-line btn-otp">OTP 재전송</button>
  </div>
</div>

<button type="submit" class="btn btn-primary btn-block btn-navy login-submit">
  <span class="login-submit-label">로그인</span>
  <span class="login-submit-label-otp">OTP 인증번호 로그인</span>
</button>