feat: input component

[nsr1349]

🧩 이슈 번호

• close input pwInput 작성 #41

✅ 작업 사항

인풋하고 패스워드 인풋 만들었습니다.

이런 느낌입니다. 3단계로 사이즈 조절 가능

👩‍💻 공유 포인트 및 논의 사항

어차피 패스워드 용 인풋이 디자인에서 2개 밖에 없는데 모든 input 컴포넌트에 password용 상태가 들어가는게 불편해서 그냥 확장해서 따로 만들어놨습니다. password 컴포넌트에 자식으로 input 을 받을까도 고민해봤는데 그게 오히려 복잡해질 것 같아서 그냥 안했음요
궁금한거 있으면 편하게 물어봐주세여

[netlify]

✅ Deploy Preview for moabam-storybook ready!

Name	Link
🔨 Latest commit	9d190d3
🔍 Latest deploy log	https://app.netlify.com/sites/moabam-storybook/deploys/6541ed1784b615000867b63e
😎 Deploy Preview	https://deploy-preview-42--moabam-storybook.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[bbearcookie]

고생하셨습니다!! 성래님! 😊
Input 컴포넌트는 재활용되기에 굉장히 쉬운만큼 확장성과 관련해서 리뷰를 남겨보았는데.. 한번 확인해주신다면 좋을 것 같아요!

추가적으로, PasswordInput 컴포넌트도 사실 Input 컴포넌트의 확장된 형태이기에 같은 shared 디렉토리에 존재해도 좋겠다는 생각을 했어요!

📂 src
    📂 shared
        📂 Input
            📂 components
              📄 Input.tsx
              📄 Input.stories.tsx
              📄 PasswordInput.tsx
              📄 PasswordInput.stories.tsx
            📄 index.ts

추가로 PR의 제목이 그대로 스쿼시 머지에서 커밋 메시지가 되기 때문에 커밋 컨벤션과 유사하게
feat: ~~~ 형태로 작성하는 건 어떨까요!?

[bbearcookie]

P1:
Input 컴포넌트에 들어가는 props를 직접 명시하셨군요..!
이 경우에는 세 가지 정도의 문제가 생길 수 있을 것 같아요!

1. 추후에 기본 input에 들어가야 할 prop이 더 많아진다면.. 모두 일일히 컴포넌트의 prop을 수정해줘야 하는 문제가 생겨요. 예를 들어서 placeholder, maxLength, min, max 등등..
2. input 태그에는 placeholder, maxLength, ... 등 들어갈 수 있는 prop이 굉장히 많은데, 이걸 IDE가 자동 완성으로 보여주지 못하는 문제가 생겨요!
3. input 태그의 type 에 들어갈 수 있는 값은 한정적이기에 기본적으로 IDE는 자동 완성을 보여주는데요, 현재 방식으로는 type 필드를 string 형태로 받고 있기 때문에 자동 완성을 보여주지 않는 문제가 생겨요!!

그래서, Input 컴포넌트는 정말 재활용할 가능성이 무궁무진한 만큼 최대한 input 기본 베이스를 바탕으로 확장성을 열어둬야 한다고 생각해요!!

Suggested change

	interface InputProps {
	size?: 'sm' | 'base' | 'lg';
	className?: string;
	type?: string;
	name?: string;
	}
	interface InputProps
	extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
	size?: 'sm' | 'base' | 'lg';
	}

리액트에 기본적으로 정의되어 있는 React.InputHTMLAttributes<HTMLInputElement> 타입을 그대로 확장해서 저희가 컴포넌트에 덧붙혀야 하는 추가적인 props만 정의하는 형태입니다!

[bbearcookie]

P1:

위와 같은 Prop 타입을 정의하면, 실제 컴포넌트는 이렇게 정의할 수 있겠네요!
추가적으로, type과 name도 단순히 컴포넌트로 전달하는 것 뿐이기 때문에 명시할 필요도 없어져요!

Suggested change

	const Input = ({
	size = 'base',
	className = '',
	type = 'text',
	name = '',
	...props
	}: PropsWithChildren<InputProps>) => (
	<input
	type={type}
	className={`
	w-full
	rounded-lg
	border
	border-gray-300
	p-3
	shadow-sm
	placeholder:text-gray-400
	focus:border-light-point
	focus:outline-none
	focus:ring-1
	focus:ring-light-point
	dark:focus:border-dark-point
	dark:focus:ring-dark-point
	${className}
	${sizeVariants[size]}
	`}
	name={name}
	{...props}
	/>
	);
	const Input = ({
	size = 'base',
	className,
	...props
	}: PropsWithChildren<InputProps>) => (
	<input
	className={`
	w-full
	rounded-lg
	border
	border-gray-300
	p-3
	shadow-sm
	placeholder:text-gray-400
	focus:border-light-point
	focus:outline-none
	focus:ring-1
	focus:ring-light-point
	dark:focus:border-dark-point
	dark:focus:ring-dark-point
	${className}
	${sizeVariants[size]}
	`}
	{...props}
	/>
	);

[bbearcookie]

P2:
요 부분도 기존의 Input 컴포넌트의 props를 그대로 확장한 형태이기에, 정의된 타입을 재활용해도 좋지 않을까요!?

Suggested change

	interface PasswordInputProps {
	size?: 'sm' | 'base' | 'lg';
	className?: string;
	name?: string;
	}
	import { InputProps } from '@/Input/components/Input';
	interface PasswordInputProps extends InputProps {}

[bbearcookie]

위 타입을 적용한다면 요렇게 간단한 prop이 나올 수 있겠네요!

Suggested change

	const PasswordInput = ({
	size = 'base',
	className = '',
	name = '',
	...props
	}: PropsWithChildren<PasswordInputProps>) => {
	const PasswordInput = ({ ...props }: PropsWithChildren<PasswordInputProps>) => {