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

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

변경 HTML 1개 — pages/login.html. Figma 로그인_1.로그인 프레임 개편분 반영.

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

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

변경 유형

코드	내용
OTP행 재정의	OTP 행의 성격이 이메일 입력 → OTP 인증번호 입력 으로 변경. `#login-email` → `#login-otp` / placeholder `이메일 입력` → `전송된 OTP 인증 번호 입력` / 버튼 `OTP 전송` → `OTP 재전송`
필드 삭제	별도 인증코드 입력행 `.login-code` 블록 통째 제거 — 신규 디자인에 없음
기본노출	OTP 행이 초기 화면에서 숨김 — `.login-form.is-otp-sent` 상태에서만 노출
버튼 라벨 상태화	로그인 버튼 라벨이 단계별로 2종 → `<span class="login-submit-label">`(로그인) / `<span class="login-submit-label-otp">`(OTP 인증번호 로그인) 로 분리, 상태 클래스가 전환

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

파일 (pages/)	OTP행	필드삭제	기본노출	라벨상태화
`login`	3	1	1	2
합계	3	1	1	2

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

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

Figma 프레임	form 클래스	화면
1.로그인_02.입력 후	`login-form`	ID · 비밀번호 2칸 / 버튼 “로그인”
1.로그인_02.입력 후_01.OTP노출	`login-form is-otp-sent`	ID·비밀번호 잠김 + OTP 행 노출 / 버튼 “OTP 인증번호 로그인”
1.로그인_03.오류 메시지	`login-form is-otp-sent is-error`	위 + 오류 메시지 노출 + OTP 입력칸 오류 테두리
(OTP 이전 오류)	`login-form is-error`	입력 단계에서 오류 메시지만 노출

추가 요청

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

C참고 — 마크업 최종 형태

<div class="login-inputs">
  <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-hide"></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-lg btn-otp login-otp-btn">OTP 재전송</button>
  </div>
</div>

<div class="login-actions">
  <button type="submit" class="btn btn-primary btn-block login-submit">
    <span class="login-submit-label">로그인</span>
    <span class="login-submit-label-otp">OTP 인증번호 로그인</span>
  </button>
  <button type="button" class="btn btn-secondary btn-block">회원가입 신청</button>
</div>