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

[1단계 - 페이먼츠] - 버건디(전태헌) 미션 제출합니다. #343

Merged
merged 40 commits into from
Apr 21, 2024
Merged
Changes from 1 commit
Commits
Show all changes
40 commits
Select commit Hold shift + click to select a range
eac1107
style: prettier 설정
Largopie Apr 16, 2024
a2eaf72
docs: 기능 요구사항 작성
Largopie Apr 16, 2024
bcd9c7d
chore: styled-components, styled-reset 설치
Largopie Apr 16, 2024
cded571
feat: 공용 인풋 컴포넌트 생성
Largopie Apr 16, 2024
6dcf8e2
feat: sr-only 라벨 컴포넌트 생성
Largopie Apr 16, 2024
b5f8195
feat: 글로벌 스타일 설정
Largopie Apr 16, 2024
7173e07
feat(storybook): 인풋 공용 컴포넌트 스토리북 작성
Largopie Apr 16, 2024
4552764
feat: 인풋 섹션 컴포넌트 생성
Largopie Apr 16, 2024
2ea7df5
feat: useCardNumber 커스텀 훅 생성
Largopie Apr 17, 2024
3b17e49
feat: useInput 커스텀 훅 생성
Largopie Apr 17, 2024
7f0e7d1
feat(validate): 숫자 범위 유효성 검사 메서드 구현
Largopie Apr 17, 2024
152e9be
feat: CreditCard 컴포넌트 구현
Largopie Apr 18, 2024
f3b9ee0
refactor(InputSection): description 분기 처리
Largopie Apr 18, 2024
ac06ece
docs: 카드 브랜드 조건 추가
Largopie Apr 18, 2024
17fabd6
feat(validate): 유효성 검사 추가
Largopie Apr 18, 2024
3f86c2a
refactor: useInput 로직 수정
Largopie Apr 18, 2024
4c06f2f
feat: useCardNumber 유효성 검사 로직 추가
Largopie Apr 18, 2024
b323507
refactor: Input 컴포넌트 로직 수정
Largopie Apr 18, 2024
11aeaf6
chore: cardNumbers 타입 수정
Largopie Apr 18, 2024
2185961
feat(App): 컴포넌트 및 상태 바인딩
Largopie Apr 18, 2024
8bd4982
feat: 상수 분리
Largopie Apr 18, 2024
c843b8a
feat: 인풋 컴포넌트 관련 스토리북 작성
Largopie Apr 18, 2024
76a8058
feat: CreditCard 관련 스토리북 작성
Largopie Apr 18, 2024
fecb622
feat: InputSection 관련 스토리북 작성
Largopie Apr 18, 2024
a9f5148
chore: App 컴포넌트 스토리북 중앙 정렬
Largopie Apr 18, 2024
f60738d
feat: useCardImageBrand hook 선언
brgndyy Apr 19, 2024
10a9308
refactor: 공용 컴포넌트 props 타입 변경
brgndyy Apr 19, 2024
420baad
refactor: useInput 커스텀훅 수정
brgndyy Apr 19, 2024
c1d5ea5
refactor: InitialCardNumberState 타입 하위에서 정의로 변경
brgndyy Apr 19, 2024
208b14d
refactor: 변경된 useInput에 맞게 useEffect 선언들 삭제
brgndyy Apr 19, 2024
3f03f3a
refactor: InputSection 컨테이너 스타일 수정
brgndyy Apr 19, 2024
422de20
refactor: 스토리북 layout centered 속성 전역 설정
brgndyy Apr 19, 2024
1c7a8f9
refactor: 스토리북 전역 스타일로 설정
brgndyy Apr 19, 2024
394d204
chore: .nvmrc 및 eslint 설정
brgndyy Apr 19, 2024
456e349
fix: useInput 유효성검사 아예 못받게 설정, App import 변경
brgndyy Apr 19, 2024
edf45ea
fix: CreditCard 스토리북 옵션 수정
brgndyy Apr 19, 2024
a1ff303
refactor: 카드 브랜드 이미지 상태 관리 속성값 변경
brgndyy Apr 19, 2024
10f0b0c
refactor: 스타일 파일 분리
brgndyy Apr 20, 2024
f9ae286
refactor: useCardNumber 핸들러 함수 내 중복 제거
brgndyy Apr 20, 2024
b63c30a
refactor: 카드 브랜드 이미지 로직 useCardNumber로 이동
brgndyy Apr 20, 2024
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 23 additions & 0 deletions src/components/composables/Input.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
import styled from 'styled-components';

type InputProps = {
Copy link

Choose a reason for hiding this comment

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

React.InputHTMLAttributes<HTMLInputElement>와 같이 제공되는 타입을 활용해서 타이핑하면 어떨까요? 혹은 의도해주신 걸까요?

Copy link
Author

Choose a reason for hiding this comment

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

오호 아뇨 생각해보지 못한 부분입니다!

짚어주셔서 감사합니다 하루 🙇

한번 적용시켜보겠습니다~!

value: string;
onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
type: 'text' | 'number' | 'email' | 'password';
placeholder: string;
id: string;
};

const StyledInput = styled.input`
Copy link

Choose a reason for hiding this comment

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

Styled-*를 컨벤션으로 잡아주신거군용~!

Copy link
Author

@brgndyy brgndyy Apr 19, 2024

Choose a reason for hiding this comment

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

앗 처음에 아마 이렇게 작성하고 컨벤션을 놓친 컴포넌트들이 많을거 같은데요..!

한번 검토해보면서 수정해보겠습니다!

짚어주셔서 감사해요 하루~!

border: 1px solid rgba(172, 172, 172, 1);
padding: 8px;
font-size: 0.6875rem;
border-radius: 2px;
height: 32px;
`;

export default function Input({ value, onChange, type, placeholder, id }: InputProps) {
return (
<StyledInput value={value} onChange={onChange} type={type} placeholder={placeholder} id={id} />
);
}