Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Input, Label 공통 컴포넌트 개발 (+ 컨테이너, 훅) #32

Merged
merged 3 commits into from
Jul 15, 2024

Conversation

leeminhee119
Copy link
Member

Input, Label 컴포넌트


🏄🏼‍♂️‍ Summary (요약)

  • Input, Input을 위한 Label, Input과 Label을 포함하는 컨테이너 컴포넌트 개발
  • useInput 훅과 함께 사용

🫨 Describe your Change (변경사항)

관련 변경 파일들입니다!

  • src/component/common/Input/Input.tsx
  • src/component/common/Input/Label.tsx
  • src/component/common/Input/InputLabelContainer.tsx
  • src/hooks/useInput.ts

  • 사용 예시 (Staging.tsx)
      <InputLabelContainer id={"retro"}>
        <Label order={1}>회고 이름</Label>
        <Input onChange={handleChangeName} value={layerName} />
      </InputLabelContainer>
  • InputLabelContainer에 id를 전달하면 라벨과 인풋에 해당 id가 부여됩니다.
  • InputLabelContainer에는 라벨과 인풋을 감싸는 부모 엘리먼트를 포함합니다. (간격 스타일 포함)
  • Labelorder prop 은 라벨에 포함될 넘버링을 나타냅니다. 전달하지 않으면 넘버링 없이 텍스트 라벨만 출력됩니다. (아래 예시)
스크린샷 2024-07-13 오후 11 36 18 스크린샷 2024-07-13 오후 11 36 42

🧐 Issue number and link (참고)

📚 Reference (참조)

@leeminhee119 leeminhee119 added the 🚀 feature New feature or request label Jul 13, 2024
@leeminhee119 leeminhee119 added this to the v1.0.0 milestone Jul 13, 2024
@leeminhee119 leeminhee119 self-assigned this Jul 13, 2024
styles?: Interpolation<Theme>;
} & React.LabelHTMLAttributes<HTMLLabelElement>;

export const Label = ({ id, children, order, styles }: LabelProps) => {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

컴포넌트면 함수 선언문이죠?!

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

오앗 감사합니다 !!

Copy link
Member

@klmhyeonwoo klmhyeonwoo left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

고생하셨습니다요 ✨

Copy link
Collaborator

@sean2337 sean2337 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

확실히 변수명을 깔끔하게 지어주셔서 코드가 가독성이 좋네요!! 최고입니다~~🚀🚀

Comment on lines 3 to 11
type UseInputReturn = [string, (e: React.ChangeEvent<HTMLInputElement>) => void];

export const useInput = (defaultValue?: string): UseInputReturn => {
const [value, setValue] = useState(defaultValue || "");

const handleInputChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
setValue(e.target.value);
}, []);

return [value, handleInputChange];
};
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

해당 부분도 as const로 return type을 설정해봐도 좋을 것 같습니다~!!

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

아이쿠 여기도 수정한다는 걸 깜빡했네요!! 확인 감사합니다!!

Copy link
Collaborator

@donghunee donghunee left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

수고하셨습니다:)

@leeminhee119 leeminhee119 merged commit c8a09a3 into develop Jul 15, 2024
1 check passed
@leeminhee119 leeminhee119 deleted the feature/#11/input branch July 15, 2024 06:47
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
🚀 feature New feature or request
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants