Skip to content

Common Components Input

Jump to bottom
Hyunseok Ryu edited this page May 15, 2025 · 1 revision

🧾 Input Components

이 문서는 타임페이에서 사용되는 입력(Input) 컴포넌트에 대해 설명합니다. 이 컴포넌트들은 사용자 입력을 받는 일관된 UI 요소로, 유효성 검사, 스타일링, 에러 피드백을 포함하여 다양한 입력 시나리오를 처리합니다.

Relevant Source Files

1. 📌 Input 컴포넌트 아키텍처

입력 컴포넌트 계층 구조

  • 공통 입력 컴포넌트 (Common)

    • CommonInput
    • InputBox

  • 프로필 편집용 입력 컴포넌트

    • InputInner (숫자형)
    • InputNum (숫자형)
    • InputMap (검색형)
    • NicknameInput
    • GenderInput
    • InputWrapper
    • LocationSwiper

타입 정의

공통 입력 타입 (InputType)

interface InputType {
  value: string | number;
  setValue: React.Dispatch<...>;
  children?: React.ReactNode;
  isError?: boolean;
  setIsError?: React.Dispatch<...>;
}

InputInnerProps는 최대값, 최소값, 가격 여부 등의 유효성 제약 조건을 추가로 포함합니다.

2. 🧱 주요 입력 컴포넌트 설명

2.1 InputBox

  • 입력 필드를 감싸는 컨테이너 역할
  • 내부에 InputNum, InputMap 등 특화 컴포넌트를 포함

🔗 Input-box.tsx

📌 InputNum

  • 숫자만 입력 가능 (예: 가격, 수량)
  • 강조된 배경색과 단위(예: 원) 표시

📌 InputMap

  • 검색용 인풋 (예: 위치 검색)
  • 잘못된 입력 시 시각적 피드백(흔들림, 배경색 변화)

2.2 CommonInput

  • 공통 스타일을 적용한 입력 래퍼
  • 내부에 InputInner 포함
  • 유효성 검사: 최대/최소값, 공란 등
  • 에러 상태 시 애니메이션 + 5초 후 자동 리셋

🔗 common-input.tsx

3. 🧍‍♀️ 프로필 편집 입력 컴포넌트

3.1 InputWrapper

  • 모든 프로필 입력 UI를 감싸는 컨테이너
  • 오렌지색 테두리, 수정 아이콘 포함

🔗 input-wrapper.tsx

3.2 특수 입력들

  • NicknameInput: 최대 5자, onBlur 시 상태 갱신
  • GenderInput: 남/여 전환, 슬라이드 애니메이션 적용
  • LocationSwiper: 위치 선택용 캐러셀, Swiper 사용
  • ProfileImage: 클릭 시 카메라 인터페이스 오픈 (사진 촬영)

🔗 profile-edit-modal.tsx

4. 🚨 유효성 검사 및 에러 처리 흐름

입력 컴포넌트들은 다음과 같은 패턴을 통해 유효성 검사를 수행합니다:

  1. 사용자의 입력 발생
  2. 유효성 검사 실행
  3. 실패 시 isError 상태 true 설정
  4. 에러 피드백: 애니메이션(흔들림), 색상 변화
  5. 5초 후 에러 상태 초기화

검사 항목:

  • 최대/최소값
  • 공백/비어있는 값

5. 🔍 사용 예시 및 맥락

📇 프로필 관리

  • 닉네임, 성별, 나이, 지역, 사진 등 수정 시 입력 컴포넌트 사용

🔗 profile-edit-modal.tsx

🗺️ 위치 검색

  • InputMap을 사용해 위치 검색 기능 구현

🔗 Input-box.tsx

🔢 숫자 입력

  • 가격, 시간, 수량 등 입력 시 InputNum 또는 InputInner 사용

🔗 common-input.tsx

🛠️ 구현 시 유의사항

  • 대부분의 입력 컴포넌트는 부모 컴포넌트에서 상태를 관리
  • 에러 상태 또한 함께 관리하며 타이머로 리셋
  • 스타일링은 styled-components 기반, 테마 색상 일관성 유지
  • 애니메이션은 CSS 전환 또는 Framer Motion 사용
  • 카메라 촬영 기능은 react-html5-camera-photo 라이브러리 활용

✅ 요약

Input 컴포넌트는 다음과 같은 특징을 가집니다:

  • 재사용 가능한 구조와 일관된 스타일 제공
  • 숫자, 검색, 텍스트 등 다양한 입력 방식 대응
  • 에러에 대한 시각적 피드백 제공
  • 프로필 수정, 검색, 수치 입력 등 다양한 기능에 적용됨
Clone this wiki locally