1. 로그인 인풋 구조 단순화

코드 수정 전

<div class="input-group">
<label for="email" class="input-label sr-only">이메일</label>
<div class="input-wrapper">
<input
type="email"
id="email"
name="email"
class="input-field"
placeholder="이메일"
required
/>
</div>
</div>

.input-wrapper {
  border: 1px solid var(--light-gray);
  border-radius: 0.25rem;
  background-color: var(--white);
  padding-block: 0.625rem;
  padding-inline: 1rem;
}

.input-field {
  inline-size: 100%;
  border: none;
  background: none;
  font-size: var(--text-base);
  color: var(--black);
  outline: none;
}

수정 후 (불피요한 래퍼 제거)

<div class="input-group">
  <label for="email" class="input-label sr-only">이메일</label>
  <input
    type="email"
    id="email"
    name="email"
    class="input-field"
    placeholder="이메일"
    required
  />
</div>

.input-field {
  inline-size: 100%;
  font-size: var(--text-base);
  color: var(--black);
  outline: none;

  /* ⬇ input-wrapper 스타일 이식 */
  border: 1px solid var(--light-gray);
  border-radius: 0.25rem;
  background-color: var(--white);
  padding-block: 0.625rem;
  padding-inline: 1rem;
}

• 불필요한 중첩 구조 제거

  기존에 사용하던 div.input-wrapper 요소를 제거하고, 입력 필드(input)를 직접 input-group 안에 배치하여 구조를 더 간결하게 구성하였습니다.

• 스타일 직접 적용으로 일관성 유지

  input-wrapper에 적용되어 있던 border, padding, background-color 등의 시각적 스타일을 input-field 클래스에 직접 적용하였습니다.

  이를 통해 불필요한 래퍼 없이도 기존과 동일한 UI를 유지할 수 있습니다.

• 접근성 및 시맨틱 구조 유지

  label 요소는 그대로 유지하면서 sr-only 클래스로 시각적으로는 숨기고, 스크린 리더 사용자도 접근 가능하게 처리하였습니다.

• 전체 구조 간소화로 유지보수 향상

  중첩된 구조를 제거함으로써 HTML 구조가 더 읽기 쉽고, CSS 관리도 쉬워졌습니다. 이후 컴포넌트 재사용성 향상에도 도움이 됩니다.