🧾 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. 🚨 유효성 검사 및 에러 처리 흐름

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

사용자의 입력 발생
유효성 검사 실행
실패 시 isError 상태 true 설정
에러 피드백: 애니메이션(흔들림), 색상 변화
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 컴포넌트는 다음과 같은 특징을 가집니다:

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

Common Components Input - kookmin-sw/capstone-2025-44 GitHub Wiki

🧾 Input Components

Relevant Source Files

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

입력 컴포넌트 계층 구조

타입 정의

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

2.1 `InputBox`

📌 `InputNum`

📌 `InputMap`

2.2 `CommonInput`

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

3.1 `InputWrapper`

3.2 특수 입력들

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

5. 🔍 사용 예시 및 맥락

📇 프로필 관리

🗺️ 위치 검색

🔢 숫자 입력

🛠️ 구현 시 유의사항

✅ 요약

⚠️ GitHub.com Fallback ⚠️

Common Components Input - kookmin-sw/capstone-2025-44 GitHub Wiki

🧾 Input Components

Relevant Source Files

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

입력 컴포넌트 계층 구조

타입 정의

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

2.1 InputBox

📌 InputNum

📌 InputMap

2.2 CommonInput

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

3.1 InputWrapper

3.2 특수 입력들

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

5. 🔍 사용 예시 및 맥락

📇 프로필 관리

🗺️ 위치 검색

🔢 숫자 입력

🛠️ 구현 시 유의사항

✅ 요약

⚠️ **GitHub.com Fallback** ⚠️

2.1 `InputBox`

📌 `InputNum`

📌 `InputMap`

2.2 `CommonInput`

3.1 `InputWrapper`

⚠️ GitHub.com Fallback ⚠️