Input 컴포넌트

[dldnlee]

사용법:

호출 예시

<InputComponent option="사용할 옵션" placeholder={닉네임 호출시 필수}/>

사용 가능한 옵션

1. "search" = 검색 인풋
2. "email" = 회원가입 이메일 인풋
3. "password" = 회워가입 비밀번호 인풋
   폼에 따른 validation 기능 내장돼있음
4. "passwordConfirm" = 회원가입 비밀번호 확인 인풋

import { Provider, useAtom, atom } from 'jotai';
import Header from '@/components/header/Header';
import InputComponent from '@/components/input/InputComponent';
import SwiperMain from '@/components/swiper/SwiperMain';



export const passwordAtom = atom('');

export default function SearchPage() {
  return (
    <Provider>
      <SearchPageContent />
    </Provider>
  );
}

function SearchPageContent() {
  const [password] = useAtom(passwordAtom);

  return (
    <div className='w-full relative'>
      <SwiperMain />
      <InputComponent option="password" />
    </div>
  );
}

atom만들때 passwordAtom이름으로 지키기

5. "nickname" = 회원가입 닉네임 설정 (placeholder props 필수)

[asdfqaz74]

InputComponent 수정본

Input 컴포넌트 수정을 하였습니다.

수정 내용

• value
  각 input 들의 value 들을 받을 수 있는 속성이 없어서 수정하였습니다.

• 마크업
  본래는 label 속 input 이였습니다. 스타일이 따로 적용되는 곳이 있어서 서로 분리하였습니다.

• focus 시 스타일 적용
  input:focus 시 적용되는 스타일 때문에 몇몇 코드 추가 하였습니다. (ex. usestate)

수정된 코드

• value

<input
  id="email-input"
  type="email"
  className="w-full h-48pxr py-0 px-10pxr bg-gray_150 rounded-md focus:outline-primary mb-30pxr"
  placeholder="이메일을 입력해주세요"
  value={emailValue}

• 마크업

<label />
<input />

• focus

const labelFocusWithin = 'text-black';
const labelFocusWithout = 'text-gray-500';

function useInputMapping({
const [emailValue, setEmailValue] = useState('');

<label
  htmlFor="email-input"
  className={`mb-8pxr ml-2pxr text-foot-em ${isEmailFocused ? labelFocusWithin : labelFocusWithout}`}
>
  이메일
</label>
<input
  id="email-input"
  type="email"
  className="w-full h-48pxr py-0 px-10pxr bg-gray_150 rounded-md focus:outline-primary mb-30pxr"
  placeholder="이메일을 입력해주세요"
  value={emailValue}
  onChange={handleEmailChange}
  onFocus={() => setIsEmailFocused(true)}
  onBlur={() => setIsEmailFocused(false)}
 />