feat: 조합 생성하기 인터랙션 및 유효성 검증 구현

[waldls]

📌 관련 이슈번호

close : #19

🔍 구현한 내용

• 조합명 입력 유효성 검증 로직 구현

  • 한글·영문·숫자·공백만 입력 가능하도록 제한하고, 특수문자 및 이모지 입력을 차단했습니다.
  • 조합명은 최대 20자까지 입력 가능하도록 길이 제한을 적용했습니다.
  • 공백만 입력한 경우 조합 생성이 불가능하도록 처리했습니다.
  • 기존에 존재하는 조합명과 중복될 경우 생성되지 않도록 중복 검증 로직을 추가했습니다. (현재는 사무실 세팅으로 하드코딩되어 있습니다.)
  • 한글 입력 조합 중에는 검증이 즉시 실행되지 않도록 처리해 입력 중 오류를 방지했습니다.

• 입력 UX 및 버튼 상태 관리

  • 페이지 진입 시 조합명 입력창에 자동으로 focus 되도록 처리했습니다.
  • 입력값이 유효하지 않을 경우 버튼을 비활성화하고, 이에 맞는 비활성 스타일을 적용했습니다.
  • 유효한 입력 상태에서는 버튼이 활성화되며, Enter 키를 통해서도 조합 생성이 가능하도록 구현했습니다.
  • 입력 상태에 따라 하단 helper text가 안내 문구 또는 에러 메시지로 자연스럽게 전환되도록 구성했습니다.

• 조합 생성 결과 인터랙션 및 애니메이션 구현

  • 조합 생성 시 입력창의 텍스트가 중앙 결과 영역으로 이동하는 floating 애니메이션을 구현했습니다.
  • floating 요소는 style probe를 통해 결과 카드와 동일한 스타일을 적용해 시각적 이질감을 최소화했습니다.
  • 결과 영역은 shrink → stack → done 단계로 전환되며, 크기 변화·이중 테두리·상승 모션이 순차적으로 실행됩니다.
  • 완료 단계에서 조합 생성 완료 안내 문구와 완료 버튼을 노출했습니다.

• 생성 완료 후 사용자 흐름 연결

  • 완료 버튼 클릭 시 기기 검색 페이지(/devices)로 이동하도록 라우팅을 연결했습니다.
  • 애니메이션 종료 타이밍에 맞춰 문구 및 완료 버튼이 노출되도록 시점을 조절했습니다.

• 모션 관련 상수 분리 및 구조 정리

  • 애니메이션에 사용되는 크기, 시간, 이징 값을 COMBO_MOTION 상수로 분리했습니다.
  • 모션 조정 시 로직 수정 없이 수치 변경만으로 튜닝이 가능하도록 구조를 정리했습니다.

📸 스크린샷 or 실행 영상

default.mp4

📢 리뷰어에게

• 해당 브랜치에서 실행해보시고, 동작 측면에서 이상한 부분이 있으면 편하게 말씀해주시면 감사하겠습니다.
• 1, 2, 3단계에 해당하는 에셋은 이미지로 직접 사용해달라는 요청에 따라 이미지 방식으로 적용했습니다.
• 조합 생성 플로우가 한 화면 내에서 모두 완료되므로, 기존의 조합 생성 완료 화면은 제거했습니다. (노션 페이지 라우팅 DB에서도 함께 삭제했습니다.)
• 아래 케이스는 로그인 로직 구현 이후 진행하는 것이 적절하다고 판단해, 이번 작업 범위에서는 제외했습니다.
  i) 로그인 상태에서 [조합 생성하기] 클릭 시 조합이 정상적으로 생성되는 플로우
  ii) 로그아웃 상태에서 [조합 생성하기] 클릭 시 로그인 화면으로 자동 이동하는 플로우

[Seony777]

정말 고생 많으셨습니다! 로컬에서 실행해봤고 말씀하신 기능 다 잘 작동하는 것 같습니다.
애니메이션 부분에서 실행 중에 살짝 왼쪽 아래로 이동하는 부분이 있긴한데 큰 문제는 없어 보여 approve합니다.