{"payload":{"feedbackUrl":"https://github.com/orgs/community/discussions/53140","repo":{"id":358479951,"defaultBranch":"main","name":"react-payments","ownerLogin":"woowacourse","currentUserCanPush":false,"isFork":false,"isEmpty":false,"createdAt":"2021-04-16T04:56:28.000Z","ownerAvatar":"https://avatars.githubusercontent.com/u/45747236?v=4","public":true,"private":false,"isOrgOwned":true},"refInfo":{"name":"","listCacheKey":"v0:1713359895.0","currentOid":""},"activityList":{"items":[{"before":"6cea8baa1051a504416ebb85f0dac0123feadaa9","after":"5fd39d729444e3771149752941ea1f50e6544280","ref":"refs/heads/0jenn0","pushedAt":"2024-05-07T08:27:57.000Z","pushType":"pr_merge","commitsCount":1,"pusher":{"login":"JeongBin0227","name":null,"path":"/JeongBin0227","primaryAvatarUrl":"https://avatars.githubusercontent.com/u/45503248?s=80&v=4"},"commit":{"message":"[2단계 - 페이먼츠] 리버(최재희) 미션 제출합니다. (#404)\n\n* Refactor: assets 폴더 안에 images 폴더 생성\r\n\r\n* Refactor: 컴포넌트에서 css 분리\r\n\r\n* Refactor: Input,Tooltip 컴포넌트 Components/common으로 이동\r\n\r\n* Feat: step1 구현\r\n\r\n* Feat: 카드사 선택시 카드 배경색 변경 구현\r\n\r\n* Docs: step2 기능 구현 목록 작성\r\n\r\n* Feat: CVC 입력 컴포넌트 구현\r\n\r\n* Feat: 카드 번호 입력 및 검증완료면 카드사 선택 컴포넌트 렌더링 구현\r\n\r\n* Feat: 카드사 선택시 유효기간 입력 컴포넌트 렌더링 구현\r\n\r\n* Feat: 유효기간 입력시 카드 소유자 이름 입력 컴포넌트 렌더링 구현\r\n\r\n* Feat: 카드 소유자 이름 입력 후 엔터 쳤을 때 CVC 번호 입력 컴포넌트 렌더링 구현\r\n\r\n* Feat: 모든 카드 입력 검증완료시에만 확인 버튼 렌더링 구현\r\n\r\n* Feat: 확인 버튼 누를시 페이지 이동 구현\r\n\r\n* Feat: 카드번호,유효기간 input 입력시 커서 자동으로 넘어가게 구현\r\n\r\n* Feat: CVC 번호 입력 중일 때는 카드 뒷면 보여주기 구현\r\n\r\n* Feat: 비밀번호 입력 폼 구현\r\n\r\n* Style: css 수정\r\n\r\n* Refactor: 각 form 마다 customhook 구현\r\n\r\n* Feat: 폼 렌더링 관리하는 훅 추가\r\n\r\n* Chore: 주석 삭제\r\n\r\n* Refactor: css 이름 수정\r\n\r\n* Refactor: 컴포넌트 이름 수정\r\n\r\n* Feat: CardForm에서 렌더링 커스텀 훅 사용\r\n\r\n* Fix: cvc 번호 3개 받도록 수정\r\n\r\n* Deploy: 배포\r\n\r\n* Deploy: 배포\r\n\r\n* Deploy: 배포\r\n\r\n* Deploy: 배포","shortMessageHtmlLink":"[2단계 - 페이먼츠] 리버(최재희) 미션 제출합니다. (#404)"}},{"before":"2176d1537109ef9ad14a783cdba88a7a7334ef7b","after":"1a1b5c81abf1fa6a9c516966b52491579650b27f","ref":"refs/heads/useon","pushedAt":"2024-05-06T06:50:08.000Z","pushType":"pr_merge","commitsCount":1,"pusher":{"login":"Tanney-102","name":"Tigger","path":"/Tanney-102","primaryAvatarUrl":"https://avatars.githubusercontent.com/u/57767891?s=80&v=4"},"commit":{"message":"[2단계 - 페이먼츠] 썬데이(김유선) 미션 제출합니다. (#401)\n\n* docs: step2 기능구현목록 작성\r\n\r\n* docs: 기능구현목록 수정\r\n\r\n* refactor: 공통 컴포넌트 common 폴더로 이동\r\n\r\n* feat: 공통 Select 컴포넌트 생성\r\n\r\n* feat: 카드사를 선택할 수 있는 기능\r\n\r\n* feat: CVC를 입력할 수 있는 기능\r\n\r\n* feat: 카드 비밀번호 앞 두 자리를 입력할 수 있는 기능\r\n\r\n* feat: 선택한 카드사에 따라 카드 색상이 변경되는 기능\r\n\r\n* feat: 카드 번호 입력이 유효한 경우 카드사 선택 폼이 동적으로 나타나는 기능\r\n\r\n* feat: 카드사를 선택하면 카드 유효 기간 입력 폼이 동적으로 나타나는 기능\r\n\r\n* feat: 카드 유효기간 입력이 유효한 경우 카드 소유자 입력 폼이 동적으로 나타나는 기능\r\n\r\n* feat: 카드 소유자 입력이 유효한 경우 CVC 입력 폼이 동적으로 나타나는 기능\r\n\r\n* feat: CVC 입력이 유효한 경우 비밀 번호 입력 폼이 동적으로 나타나는 기능\r\n\r\n* feat: 비밀 번호 두 자리 입력값 유효성 검증 추가 및 유효성 검사 상수화\r\n\r\n* feat: 모든 폼의 입력값이 유효하면 확인 버튼이 생기는 기능\r\n\r\n* refactor: cardInfo 타입 수정에 따른 로직 수정\r\n\r\n* feat: 입력에 따라 카드 앞면(카드 번호, 카드사, 유효기간, 소유자 이름) 또는 카드 뒷면(CVC)에서 입력된 정보를 미리 확인할 수 있는 기능\r\n\r\n* feat: 입력 필드에서 사용자의 입력이 완료되면 다음 필드로 자동으로 이동하는 기능\r\n\r\n* refactor: 공통 컴포넌트로 Button 컴포넌트 분리 및 디자인 수정\r\n\r\n* design: 스타일 수정\r\n\r\n* fix: button 공통컴포넌트 onClick이 되지 않는 문제 해결\r\n\r\n* chore: react-route-dom 설치\r\n\r\n* feat: route 생성\r\n\r\n* feat: 카드 등록 페이지에서 확인 버튼 클릭시 카드 등록 완료 페이지로 이동하는 기능\r\n\r\n* feat: 카드 등록 완료 페이지 생성 및 카드 등록 완료 페이지에서 확인 버튼을 누르면 카드 등록 페이지로 이동하는 기능\r\n\r\n* feat: useCardForm 커스텀 훅 생성\r\n\r\n* feat: useCardNumbers 커스텀 훅 생성\r\n\r\n* refactor: useCardNumbers 커스텀 훅 인터페이스 수정\r\n\r\n* refactor: useCardCompany 커스텀 훅 생성\r\n\r\n* refactor: useCardExpiration 커스텀 훅으로 분리\r\n\r\n* refactor: useCardUserName 커스텀 훅으로 분리\r\n\r\n* refactor: useCardCVC 커스텀 훅으로 분리\r\n\r\n* refactor: useCardPassword 커스텀 훅으로 분리\r\n\r\n* refactor: useEffect 로직 개선 및 커스텀 훅 분리 적용\r\n\r\n* refactor: useEffect 에서 동적 생성 함수 분리\r\n\r\n* refactor: CVC Input에서 onBlur, onFocus로 카드 프리뷰 상태 업데이트하도록 로직 수정\r\n\r\n* refactor: form 동적 생성 로직 분리\r\n\r\n* fix: console warning 해결\r\n\r\n* refactor: pages 내 디렉토리 이름에 page 삭제\r\n\r\n* feat: 설정되지 않은 url 입력시 잘못된 접근인 것을 안내하고 홈으로 이동 버튼을 누르면 홈으로 이동하는 기능\r\n\r\n* refactor: 타입 수정에 따른 스토리북 수정\r\n\r\n* chore: 배포 브랜치 수정\r\n\r\n* fix: 배포 오류 해결\r\n\r\n* refactor: 불필요한 fragment 삭제\r\n\r\n* refactor: 변수명 수정\r\n\r\n* refactor: 조건문에 들어가는 로직 변수로 분리 및 동적 생성 로직 상수화\r\n\r\n* refactor: 반복되는 로직useInput 커스텀 훅 생성\r\n\r\n* refactor: useInput 커스텀 훅 사용하여 반복 로직 개선\r\n\r\n* refactor: select 컴포넌트 defaultValue prop받도록 수정\r\n\r\n* refactor: 페이지 레벨과 컴포넌트 레벨 사이에 인풋 섹션 컴포넌트로 분리\r\n\r\n* refactor: 동적 생성 상수화 수정 및 폼 로직 수정\r\n\r\n* refactor: 카드 번호 입력과 카드 유효 기간 입력 인풋 자동으로 포커스로 넘어가는 로직 개선\r\n\r\n* fix: 카드 번호 입력시 두번째 입력칸부터 자동으로 넘어가지 않는 문제 해결","shortMessageHtmlLink":"[2단계 - 페이먼츠] 썬데이(김유선) 미션 제출합니다. (#401)"}},{"before":"0ea76d1ecbab110bb9c155b4508ffcf9ea9ff57e","after":"bac34e6a8983d61ff628663f6865859d299a6eba","ref":"refs/heads/todari","pushedAt":"2024-05-06T06:48:45.000Z","pushType":"pr_merge","commitsCount":1,"pusher":{"login":"Tanney-102","name":"Tigger","path":"/Tanney-102","primaryAvatarUrl":"https://avatars.githubusercontent.com/u/57767891?s=80&v=4"},"commit":{"message":"[2단계 - 페이먼츠] 토다리(이태훈) 미션 제출합니다. (#399)\n\n* feat: 카드사 선택 dropdown 추가\r\n\r\n* fix: type이 제대로 불러와지지 않던 문제 해결\r\n\r\n* feat: CVCFormSection, passwordFormSection 추가\r\n\r\n* feat: 각 input 입력 완료에 따른 동적 렌더링 기능 추가\r\n\r\n* refactor: cardInfo state를 useReducer 이용하여 관리하도록 변경\r\n\r\n* design: mainPage 정렬 변경\r\n\r\n* feat: 카드의 뒷면을 볼 수 있는 기능 추가\r\n\r\n* feat: errorMessage 상태를 cardInfo로 이동 및 각 component의 onFocus 및 onBlur 함수 수정\r\n\r\n* feat: BottomFixedButton component 추가\r\n\r\n* design: 전체 width가 100vw가 아니던 오류 수정\r\n\r\n* feat: InputField enter 입력 시 blur 추가\r\n\r\n* feat: 각 FormSection의 autoFocus 추가\r\n\r\n* design: CardInfo 영역 하단의 button에 가려지는 오류 수정\r\n\r\n* feat: 입력 완료 시 다음 focus로 자동으로 넘어가는 기능 추가 및 FormSection을 이용한 refactoring\r\n\r\n* refactor: Component들 공통인 부분 FormSection을 이용하여 재사용\r\n\r\n* refactor: custom Hook 분리\r\n\r\n* remove: 사용하지 않는 코드 삭제\r\n\r\n* refactor: CardNumbersFormSection의 hook 리팩토링\r\n\r\n* refactor: ExpirationDateFormSection 과 useExpirationDateFormSection refactoring\r\n\r\n* feat: FormSection에 onblur 시, validate 하는 로직 추가\r\n\r\n* refactor: 사용하지 않는 errorMessage state 삭제\r\n\r\n* feat: 전체 inputValue를 확인해 버튼을 만들어주는 로직 추가\r\n\r\n* fix: replace 로직 변경\r\n\r\n* fix: cardNumber 변경 시 brand 적용되지 않던 문제 해결\r\n\r\n* chore: react-router-dom 추가\r\n\r\n* feat: react-router 적용\r\n\r\n* fix: useFormSection에서 잘못된 값 상태에 적용되던 오류 수정\r\n\r\n* feat: 비밀번호 두자리 type:password 적용\r\n\r\n* fix: 필요없는 코드 제거\r\n\r\n* feat: inputField의 value를 state에서 바로 받도록 변경\r\n\r\n* refactor: 각 inputField의 value가 statae를 직접 받도록 변경\r\n\r\n* feat: 유효기간 중 월을 입력했을 시, 경계값 내부만 적용되도록 변경\r\n\r\n* fix: 유효기간 월 검증 로직 변경\r\n\r\n* refactor: PaymentsButton 구조 변경\r\n\r\n* feat: complete 페이지 추가\r\n\r\n* feat: 잘못된 경로로 향한 경우, redirect\r\n\r\n* fix: secureNumber의 유틸성을 위해 mask prop 추가\r\n\r\n* refactor: focusedRef 함수 focusNext 내부로 이동\r\n\r\n* refactor: validateCardNumbers let 변수를 제거하는 방향으로 변경\r\n\r\n* fix: 모든 form 입력 확인 로직 수정\r\n\r\n* refactor: 각 FormSection에서의 error, setError을 공통으로 분리\r\n\r\n* refactor: useFormSection을 사용한 hook들과, component들 전체적으로 추상화를 진행한 리팩토링\r\n\r\n* refactor: Reducer 관련 type 정의 위치 변경\r\n\r\n* refactor: cardNumbersFormSection 구조 변경 진행\r\n\r\n* feat: useMultiFormSection hook error input 확인할 수 있도록 변경\r\n\r\n* feat: useCardNumbersFormSection hook에 focus 자동으로 변경하는 기능 추가\r\n\r\n* refactor: useExpirationDateFormSection 구조 변경\r\n\r\n* feat: ExpirationDateFormSection을 사용하는 hook에 맞춰 변경\r\n\r\n* fix: 사용하지 않는 코드 제거\r\n\r\n* fix: update 함수 분리\r\n\r\n* refactor: useFormSection hook 변경\r\n\r\n* refactor: useCVCFormSection hook 및 CVCFormSection component 구조 변경\r\n\r\n* fix: interface 이름 변경\r\n\r\n* refactor: component 파일 props 변경\r\n\r\n* fix: useExpirationDateFormSection 훅 오류 수정\r\n\r\n* fix: cardInfo 오류 수정\r\n\r\n* fix: useCardNumbers hook 수정\r\n\r\n* refactor: useName, usePassword 훅 수정\r\n\r\n* feat: useCVC hook에 ref 추가\r\n\r\n* fix: useFormSection에 updateComplete 추가\r\n\r\n* fix: useMultiFormSelection에 모든 입력이 정상적인지 판단하는 로직 추가\r\n\r\n* refactor: input 여러개인 경우 error 관리 방식 변경","shortMessageHtmlLink":"[2단계 - 페이먼츠] 토다리(이태훈) 미션 제출합니다. (#399)"}},{"before":"9184a0ee155faca915c698471f38725be09abfb0","after":"91f25a88e91395f276f261b56c5f4a3143cc8c64","ref":"refs/heads/soosoo22","pushedAt":"2024-05-04T06:16:09.000Z","pushType":"pr_merge","commitsCount":1,"pusher":{"login":"liswktjs","name":"JASUN LEE","path":"/liswktjs","primaryAvatarUrl":"https://avatars.githubusercontent.com/u/60773373?s=80&v=4"},"commit":{"message":"[2단계 - 페이먼츠] 쑤쑤(현수연) 미션 제출합니다. (#403)\n\n* docs: README.md 작성\r\n\r\nCo-authored-by: soosoo22 \r\n\r\n* docs: README.md - 카드 브랜드 렌더링 관련 내용 수정\r\n\r\nCo-authored-by: soosoo22 \r\n\r\n* docs: 페이먼츠 미션 2단계 기능 목록 작성\r\n\r\n* feat: 카드사 드롭다운 구현 및 카드사에 따른 카드 프리뷰 색상 변경 구현\r\n\r\n* feat: CVC 입력 폼 구현 - 번호를 입력할 경우 카드 프리뷰 뒷면을 보여준다.\r\n\r\n* feat: 비밀번호 입력 폼 구현\r\n\r\n* feat: 각각의 입력 UI가 동적으로 제공되는 기능 구현\r\n\r\n* feat: 유효한 값을 입력한 경우 자동으로 다음 필드로 포커스를 이동시키는 기능 구현\r\n\r\n* feat: 입력 필드를 포커스한 경우 에러 메시지를 띄우는 기능 구현\r\n\r\n* refactor: 카드 번호 입력 폼의 검증 및 상태 관리 개선을 위해 useCardNumberForm 커스텀 훅 분리\r\n\r\n* chore: 불필요한 변수 allInputValid 제거\r\n\r\n* feat: React Router를 이용하여 카드 등록 페이지 및 카드 등록 완료 페이지로 이동 기능 구현\r\n\r\n* chore: styled-components 이름 변경\r\n\r\n* chore: basename 경로 수정\r\n\r\n* feat: 각 컴포넌트에 대한 스토리북 구현\r\n\r\n* chore: react-router-dom 버전 업그레이드\r\n\r\n* feat: useCardCompanyForm 커스텀 훅 분리\r\n\r\n* chore: CardRegistrationPage 컴포넌트 적 용\r\n\r\n* fix: 카드사를 선택했음에도 에러 메시지가 뜨는 문제 해결\r\n\r\n* refactor: 페이지 이동 경로를 상수로 정의\r\n\r\n* feat: Form 카드 정보의 상태 관리와 유효성 검사 로직을 useForm 훅으로 분리\r\n\r\n* refactor: cardCompany와 focusedField의 변경에 따른 로직을 따로 분리\r\n\r\n* refactor: interface를 관심사별로 구별\r\n\r\n* refactor: dependency 배열에 불필요한 상태 제거\r\n\r\n* chore: 변수명 변경\r\n\r\n* refactor: useCardCVCForm hook으로 분리\r\n\r\n* refactor: useCardPasswordForm hook 분리\r\n\r\n* refactor: useExpirationDateForm hook 분리\r\n\r\n* refactor: useCardOwnerForm hook 분리\r\n\r\n* chore: userName 을 cardOwner 로 변수명 변경\r\n\r\n* chore: 스토리북 코드 내 setFocusedField 제거 및 cardOwner 로 변수명 변경\r\n\r\n* refactor: 카드 뒤집히는 효과 추가\r\n\r\n* chore: args에 cardCompany, setCardCompany 추가\r\n\r\n---------\r\n\r\nCo-authored-by: ImxYJL \r\nCo-authored-by: soosoo22 ","shortMessageHtmlLink":"[2단계 - 페이먼츠] 쑤쑤(현수연) 미션 제출합니다. (#403)"}},{"before":"5d14f57f7b1521dfb8c082c2b63340b0b524daa5","after":"35a07b7251d8ddb114cfb8ba03fcf487bba46dec","ref":"refs/heads/yoonkyoungme","pushedAt":"2024-05-03T07:38:52.000Z","pushType":"pr_merge","commitsCount":1,"pusher":{"login":"uk960214","name":"Yo Wook Kim","path":"/uk960214","primaryAvatarUrl":"https://avatars.githubusercontent.com/u/43166681?s=80&v=4"},"commit":{"message":"[2단계 - 페이먼츠] 빙봉(김윤경) 미션 제출합니다. (#400)\n\n* refactor: validateExpiration 함수의 리턴 로직 최적화\r\n\r\n* refactor: 정규표현식 상수화\r\n\r\n* feat: Select 컴포넌트 구현\r\n\r\n* test: Select 컴포넌트 Storybook 구현\r\n\r\n* feat: 커스텀 훅 useCardIssuer 구현\r\n\r\n* feat: CardIssuerInput 컴포넌트 구현\r\n\r\n* test: CardIssuerInput 컴포넌트 Storybook 구현\r\n\r\n* feat: 선택한 카드사의 색상을 CardPreview에 적용\r\n\r\n* design: CardIssuerInput 컴포넌트 스타일 설정\r\n\r\n* feat: 카드사를 선택하지 않은 경우 에러 메시지 표시\r\n\r\n* feat: feat: 커스텀 훅 useCVCInput 구현\r\n\r\n* feat: CVCInput 컴포넌트 구현\r\n\r\n* design: CVCInput 컴포넌트 스타일 설정\r\n\r\n* rename: CardPreview/index -> CardPreview/CardFront\r\n\r\n* feat: CardBack 컴포넌트 구현\r\n\r\n* design: CardBack 컴포넌트 스타일 설정\r\n\r\n* feat: CVCInput 포커스 시 CardBack 표시, 포커스 아웃 시 CardFront 표시 구현\r\n\r\n* eat: 커스텀 훅 usePasswordInput 구현\r\n\r\n* fix: 카드사 미선택 후 선택 시 에러 상태가 갱신되지 않는 문제 수정\r\n\r\n* feat: Button 컴포넌트 구현\r\n\r\n* feat: 모든 카드 정보 입력 필드에 입력 값이 비어있지 않고 에러가 없을 때 버튼 활성화 구현\r\n\r\n* feat: 입력 필드를 채우면 다음 필드 동적 표시 기능 구현\r\n\r\n소유자 이름은 값을 입력 후 Enter 키 입력 시 다음 입력 필드가 동적으로 표시됨\r\n\r\n* feat: autoFocus 적용\r\n\r\n* feat: 커스텀 훅 usePasswordInput 구현\r\n\r\n* init: react-router-dom 설치\r\n\r\n* feat: 카드 등록 폼 및 성공 페이지 라우팅\r\n\r\n- react-router-dom을 사용하여 카드 등록 폼 페이지와 카드 등록 성공 페이지 간의 라우팅 구현\r\n- CardRegisterForm 컴포넌트에서 카드 등록 확인 버튼 클릭 시, 카드 번호와 카드 카드사 정보를 상태로 전달하며 '/card-register-success' 경로로 navigate 함수를 통해 이동\r\n- CardRegisterSuccess 컴포넌트에서 useLocation 훅을 사용하여 전달받은 카드 번호와 카드 발급자 정보를 화면에 표시\r\n\r\n* rename: cardIssuer -> cardCompany (카드사)\r\n\r\n* design: CardRegisterSuccess 컴포넌트 스타일 설정\r\n\r\n* design: Button 컴포넌트 스타일 설정\r\n\r\n* test: Storybook 추가 (CardCompanyInput, CVCInput, PasswordInput, CardBack, Button)\r\n\r\n* remove: 사용하지 않는 파일 삭제 (index.css)\r\n\r\n* fix: 배포 오류 수정 (사용하지 않는 리액트 훅 삭제)\r\n\r\n* fix: 유효 기간 및 카드 번호 수정 시 유효성 검사 미통과에도 확인 버튼이 표시되는 문제 해결\r\n\r\n* rename: cardForm 관련된 커스텀 훅들을 hooks/cardForm 디렉터리로 이동\r\n\r\n* design: 입력 필드의 숫자 스핀 버튼 숨기기\r\n\r\n* refactor: cardForm 관련 커스텀 훅 로직 통일\r\n\r\n* refactor: 입력 필드 오류 메시지 처리 방식 개선\r\n\r\n* refactor: 카드 마크 판별 (visa/master) 정규표현식 상수화\r\n\r\n* refactor: 성능 최적화를 위해 카드 브랜드 식별 로직 개선\r\n\r\n카드 번호 입력 시 매 입력마다 무조건적으로 브랜드 식별 로직을 실행하는 것이 아니라, 사용자가 충분한 길이의 카드 번호를 입력했을 때만 브랜드를 식별하도록 로직을 개선\r\n\r\n* refactor: autoFocus 속성 사용 및 useEffect 사용 지양 (카드 번호, 유효 기간 입력)\r\n\r\n* refactor: 유효 기간 만료 검증 로직 간소화\r\n\r\n* fix: CVC, 비밀번호 입력 시 에러가 아닐 때도 에러 메시지가 뜨는 문제 수정\r\n\r\n* refactor: useCVCInput 훅에서 useCardDirection 훅으로 카드 방향 상태 분리\r\n\r\n- 카드 방향 상태 관리\r\n\r\n* style: 사용되지 않는 div 태그 삭제","shortMessageHtmlLink":"[2단계 - 페이먼츠] 빙봉(김윤경) 미션 제출합니다. (#400)"}},{"before":"6c9aff81676212c17e58914aa93560520f06e177","after":"d6c0b75816b4d111fc35b22e20ccfd85c1d6c25c","ref":"refs/heads/ooherin","pushedAt":"2024-05-02T20:01:51.000Z","pushType":"pr_merge","commitsCount":1,"pusher":{"login":"Tanney-102","name":"Tigger","path":"/Tanney-102","primaryAvatarUrl":"https://avatars.githubusercontent.com/u/57767891?s=80&v=4"},"commit":{"message":"[2단계 - 페이먼츠] - 리안(오혜린) 미션 제출합니다. (#377)\n\n* chore(package.json): dev --host 로 설정\r\n\r\nCo-authored-by: ooherin <555ooherin@naver.com>\r\n\r\n* docs(README): 요구사항 정리\r\n\r\nCo-authored-by: ooherin <555ooherin@naver.com>\r\n\r\n* feat(Input): Input 컴포넌트 추가\r\n\r\nCo-authored-by: ooherin <555ooherin@naver.com>\r\n\r\n* feat(CardForm): CardForm 컴포넌트 생성\r\n\r\nCo-authored-by: ooherin <555ooherin@naver.com>\r\n\r\n* feat(condition): condition 상수관리 파일 추가\r\n\r\nCo-authored-by: Hyerin \r\n\r\nCo-authored-by: ooherin <555ooherin@naver.com>\r\n\r\n* feat(useInput): useInput 커스텀훅 추가\r\n\r\nCo-authored-by: ooherin <555ooherin@naver.com>\r\n\r\n* feat(CardForm): 카드번호, 만료일, 이름 input 단순 추가\r\n\r\nCo-authored-by: ooherin <555ooherin@naver.com>\r\n\r\n* chore: styled-component 추가\r\n\r\nCo-authored-by: ooherin <555ooherin@naver.com>\r\n\r\n* feat(CardForm): InputField 적용\r\n\r\nCo-authored-by: ooherin <555ooherin@naver.com>\r\n\r\n* feat(style): 공통, 리셋 css 파일 설정\r\n\r\nCo-authored-by: skiende74 \r\n\r\n* feat(Input): 인풋 컴포넌트 생성\r\n\r\nCo-authored-by: skiende74 \r\n\r\n* chore(storybook): 스토리북에 theme, global css 설정 적용\r\n\r\nCo-authored-by: skiende74 \r\n\r\n* feat(style): 전역에 공통 css, theme 생성해서 적용\r\n\r\nCo-authored-by: skiende74 \r\n\r\n* fix(style): 공통 스타일 코드 수정\r\n\r\nCo-authored-by: skiende74 \r\n\r\n* feat(InputField): 인풋 필드 컴포넌트 생성\r\n\r\nCo-authored-by: skiende74 \r\n\r\n* fix(CardForm): 변경된 인풋으로 폼 수정\r\n\r\nCo-authored-by: skiende74 \r\n\r\nCo-authored-by: skiende74 \r\n\r\n* feat(CardForm): 인풋 제목, 소제목 추가\r\n\r\nCo-authored-by: skiende74 \r\n\r\n* feat(constants): 인풋 제목 상수화\r\n\r\nCo-authored-by: skiende74 \r\n\r\n* chore(path): 절대 경로로 변경\r\n\r\nCo-authored-by: skiende74 \r\n\r\n* feat(svg): svg 플러그인 설치 및 사용\r\n\r\nCo-authored-by: skiende74 \r\n\r\n* design(CreditCardPreview): 카드 레이아웃 디자인 완료\r\n\r\nCo-authored-by: skiende74 \r\n\r\n* fix(styled-component): props 에러 해결\r\n\r\nCo-authored-by: skiende74 \r\n\r\n* feat(cardInfo): 카드 입력 정보 프리뷰에 동기화\r\n\r\nCo-authored-by: skiende74 \r\n\r\n* docs(README): 요구사항 정리\r\n\r\nCo-authored-by: skiende74 \r\n\r\n* feat(CardPreview): 카드번호 숫자만 입력 가능하게 변경 및 브랜드 로고 표시기능 추가\r\n\r\nCo-authored-by: ooherin <555ooherin@naver.com>\r\n\r\n* feat(CardRegisterForm/Input): 인풋 최대길이를 넘으면 입력을 막음\r\n\r\nCo-authored-by: ooherin <555ooherin@naver.com>\r\n\r\nCo-authored-by: ooherin <555ooherin@naver.com>\r\n\r\n* feat(CardRegisterForm): 포커스에서 벗어났을때 4자리의 번호가 아니면 에러메세지 출력\r\n\r\nCo-authored-by: ooherin <555ooherin@naver.com>\r\n\r\n* feat(CardRegister): 부적절한 유효기간(년/월) 입력시 에러 표시\r\n\r\nCo-authored-by: ooherin <555ooherin@naver.com>\r\n\r\nCo-authored-by: ooherin <555ooherin@naver.com>\r\n\r\n* feat(CardRegister): 소유자 이름이 소문자면 대문자로 변경, 띄어쓰기 2번 발생시 에러메시지출력\r\n\r\nCo-authored-by: ooherin <555ooherin@naver.com>\r\n\r\n* feat(CreditCardPreview): 카드번호는 가운데->왼쪽정렬로 수정.\r\n\r\nCo-authored-by: ooherin <555ooherin@naver.com>\r\n\r\n* feat(useInput): 타당한 길이일때 onChange에러 해제\r\n\r\nCo-authored-by: ooherin <555ooherin@naver.com>\r\n\r\n* docs: 요구사항 체크\r\n\r\nCo-authored-by: skiende74 \r\n\r\n* feat(storybook): 카드 및 폼 컴포넌트 스토리북 생성\r\n\r\nCo-authored-by: skiende74 \r\n\r\n* feat(inputFieldHeader): 인풋 필드 헤더 컴포넌트 생성해서 분리\r\n\r\nCo-authored-by: skiende74 \r\n\r\n* refactor(constants): 일부 비즈니스 숫자 상수화\r\n\r\nCo-authored-by: skiende74 \r\n\r\n* refactor(errorUI): 에러나는 인풋이 여러개일 경우 모두 다 에러 UI 띄움\r\n\r\nCo-authored-by: skiende74 \r\n\r\n* refactor(errorMessage): 에러 메세지 로직 수정\r\n\r\nCo-authored-by: skiende74 \r\n\r\n* refactor(validation): 유효성 검사 로직 재수정\r\n\r\nCo-authored-by: skiende74 \r\n\r\n* fix(storybook): 스토리북 에러 수정\r\n\r\nCo-authored-by: skiende74 \r\n\r\n* fix(validation): 만료 일자 유효성 검사 로직 수정\r\n\r\nCo-authored-by: skiende74 \r\n\r\n* refactor(validation): validation 조건식 수정\r\n\r\nCo-authored-by: skiende74 \r\n\r\n* chore(deploy): 크로마틱 자동 설정파일 생성\r\n\r\nCo-authored-by: skiende74 \r\n\r\n* chore(deploy): 크로마틱 자동 설정파일 수정\r\n\r\nCo-authored-by: skiende74 \r\n\r\n* feat(storybook): 분리한 컴포넌트 스토리북 작성\r\n\r\nCo-authored-by: skiende74 \r\n\r\n* feat(useInput): useInput 훅 함수 생성\r\n\r\nCo-authored-by: skiende74 \r\n\r\n* refactor(expiration): 유효기간 validation 로직 수정\r\n\r\nCo-authored-by: skiende74 \r\n\r\n* style(annonation): 불필요한 주석 제거\r\n\r\nCo-authored-by: skiende74 \r\n\r\n* refactor(validation): 유효기간 유효성 검사 로직 수정\r\n\r\n* feat(CardTypeField): 카드 타입 셀렉트 필드 생성\r\n\r\n* feat(CVC): CVC 번호 필드 생성\r\n\r\n* feat(password): 패스워드 필드 생성\r\n\r\n* refactor(useInput): useInput 에 유효성 검사 로직 추가\r\n\r\n* feat(field): CVC, password 필드 유효성 검사 추가\r\n\r\n* refactor(type): 인풋 타입 사용 필드로 위치 수정\r\n\r\n* feat(isError): 인풋에 isError 속성 생성\r\n\r\n* feat(selectBox): 셀렉트 박스 생성\r\n\r\n* feat(cardType): 카드사에 따라 카드 색상 변경\r\n\r\n* feat(cardPreview): 카드 뒷면 UI 생성 및 연결\r\n\r\n* feat(BasicButton): 기본 버튼 생성\r\n\r\n* feat(router): 라우터 설치 및 생성\r\n\r\n* feat(button): 확인 버튼 및 버튼 속성으로 위치 지정\r\n\r\n* feat(confirm): 등록 확인 페이지 생성및 라우터 연결\r\n\r\n* feat(animation): 확인 애니메이션 추가\r\n\r\n* feat(자동 포커스): 인풋 자동 포커스 기능 추가\r\n\r\n* feat(useInputRefs): ref 커스텀 훅 만들어서 autofocus 기능 수정\r\n\r\n* feat(complete): 모든 인풋 완료시 확인 버튼 로딩 완료\r\n\r\n* feat(cardFilp): 카드 뒤집기 애니메이션 추가\r\n\r\n* feat(useCardRegister): 카드 정보 상태관리하는 훅 만들어서 코드 간소화\r\n\r\n* feat(ownerName): 소유자 이름 입력시 자동 대문자 변환 및, onChange시 에러 메세지 표시\r\n\r\n* feat(validation): 유효성 검사 에러 수정 및 리팩토링\r\n\r\n* feat(url): 라우트 url 상수화\r\n\r\n* feat(storybook): 카드 숫자 및 브랜드 스토리 생성\r\n\r\n* feat(storybook): 카드 프리뷰 및 비밀번호 스토리 생성\r\n\r\n* feat(hook): 불필요한 훅 제거\r\n\r\n* style(annotation): 불필요한 주석 삭제\r\n\r\n* style(storybook): 문제 있는 스토리북 삭제\r\n\r\n* feat(error): 에러 이넘화 수정 및 에러 아닐시 error 구조 수정\r\n\r\n* refactor(cardBrand): 카드사 이름 cardType에서 cardBrandType으로 네이밍 수정\r\n\r\n* feat: 에러 메세지 구조 및 CVC 카드 회전 로직 수정\r\n\r\n* refactor(cardLogo): 카드 프리뷰에서 카드 로고 컴포넌트 분리\r\n\r\n* feat(onChangeCallback): useInput 훅에 onChange시 실행될 함수 인자로 넣어 실행\r\n\r\n* feat(rendering): memo 사용해서 인풋 렌더링 최적화\r\n\r\n* feat(preview): 프리뷰 이름 부분 렌더링 최적화\r\n\r\n* feat(name): 이름 유효성 검사 추가\r\n\r\n* feat(validation): 패스워드 유효성 검사 수정\r\n\r\n* feat(blurEvent): 이름 인풋 onBlur 시에도 enter 되도록 수정\r\n\r\n* feat(controll): 컴포넌트 value 추가해서 제어 컴포넌트로 변경\r\n\r\n* feat(controll): 제어 컴포넌트로 변경\r\n\r\n* feat(progressHook): 폼의 진행상황 관리해주는 hook 생성\r\n\r\n* refactor(numbers, expiration): 일부 필드 구조 리팩토링\r\n\r\n* feat(progressBar): 프로그레스바 추가\r\n\r\n* feat(storybook): 페이지 및 프로그레스 바 스토리 추가\r\n\r\n---------\r\n\r\nCo-authored-by: skiende74 \r\nCo-authored-by: ooherin <555ooherin@naver.com>","shortMessageHtmlLink":"[2단계 - 페이먼츠] - 리안(오혜린) 미션 제출합니다. (#377)"}},{"before":"034d0b874daf53b03d08b3459e7824d79bb82c6b","after":"612b099d432358b5967566bc17dd6c8dfde93590","ref":"refs/heads/jaeml06","pushedAt":"2024-05-02T13:45:58.000Z","pushType":"pr_merge","commitsCount":1,"pusher":{"login":"zigsong","name":"jieun song","path":"/zigsong","primaryAvatarUrl":"https://avatars.githubusercontent.com/u/44080404?s=80&v=4"},"commit":{"message":"[2단계 - 페이먼츠] -치코(이재민) 미션 제출합니다. (#381)\n\n* docs: 기능명세서 작성\r\n\r\n* feat: 동적 Input UI 구현\r\n\r\n* feat: 모든 input 유효성 통과 시, 버튼 생성 로직\r\n\r\n* feat: 사용자 정보가 유효하지 않을 시, 버튼 삭제\r\n\r\n* fix: handleUpdateInput 버그 수정\r\n\r\n* feat: UserNameInput 컴포넌트 연결\r\n\r\n* feat : DropDowm 컴포넌트 구현 및 연결\r\n\r\n* feat: CVC 컴포넌트 생성 및 연결\r\n\r\n* feat : passwordInput 컴포넌트 구현 및 연결\r\n\r\n* feat: 오토포커스 기능 추가\r\n\r\n* refactor: javascript 컨밴션 준수\r\n\r\n* feat: 카드제출 확인 페이지 구현\r\n\r\n* feat: 유효하지 않는 입력시, 입력 불가 기능 구현\r\n\r\n* style: 카드 뒷면 CVC박스 스타일 변경\r\n\r\n* style: CardDropDown 컴포넌트 스타일 적용\r\n\r\n* feat: Button 컴포넌트 LayOut선택 인자 추가\r\n\r\n* style: DropdownHeader '⌃' : '⌄' 이미지로 교체\r\n\r\n* refactor: 파일명 변경\r\n\r\n* refactor: 불필요한 매개변수 제거\r\n\r\n* refactor: 파일명 수정\r\n\r\n* refactor: 불필요한 매개변수 삭제\r\n\r\n* feat: 리액트 라우터 작성\r\n\r\n* chore: 리액트 라우터 설치\r\n\r\n* feat: Input컴포넌트 value 추가\r\n\r\n* refactor: javascript 컨밴션 준수\r\n\r\n* refactor: components 폴더 구조 변경\r\n\r\n* test: stroybook 컴포넌트 테스트 작성\r\n\r\n* test: CardView 스토리북 작성\r\n\r\n* refactor: 불필요한 주석 제거\r\n\r\n* refactor: 불필요한 주석 제거\r\n\r\n* fix: 0입력 시, 에러 발생 문제 해결\r\n\r\n* feat : 첫 번째 0 입력 시, CardView에 반영되지 않은 문제 수정\r\n\r\n* style: Button position 변경\r\n\r\n* refactor: png 파일 svg파일로 교체\r\n\r\n* refactor: 불필요한 impot 삭제\r\n\r\n* refactor: card.stories.tsx 삭제\r\n\r\n* fix: userName 유효성 검사 변경\r\n\r\n* refactor: useRef 배열 생성 방식 변경\r\n\r\n* refactor: 리액트 라우터 path 수정\r\n\r\n* refactor: BottomButton 컴포넌트 명 수정\r\n\r\n* refactor: handleClick()함수명 변경\r\n\r\n* fix: useLayoutEffect를 useEffect로 변경\r\n\r\n* refactor: 불필요한 props 삭제\r\n\r\n* refactor: 반복되는 값 변수로 선언\r\n\r\n* refactor: errorMessages useState 삭제\r\n\r\n* feat: useCardNumbers 커스텀 훅 분리\r\n\r\n* feat: useCardBrand 커스텀 훅 분리\r\n\r\n* feat : 커스텀 훅으로 분리\r\n\r\n* refactor: cardNumer관련 매직넘버 상수화\r\n\r\n* refactor: 매직넘버 상수화\r\n\r\n* fix: 오토 포커스 로직 수정\r\n\r\n* refactor: 불필요한 파일 삭제\r\n\r\n* refactor: 불필요한 함수 삭제\r\n\r\n* fix: 유효성 검사 통과 실패 시, 에러 처리 로직 수정\r\n\r\n* refactor: 스토리 북 수정\r\n\r\n* docs : 구현 목록 최신화\r\n\r\n* fix: 입력 문자열 길이 검사 로직 수정\r\n\r\n* refactor: useCardForm 삭제\r\n\r\n* refactor: 단입 단언 제거\r\n\r\n* fix: input위치가 제대로 반영되지 않는 버그 수정\r\n\r\n* fix: input박스에 에러 표시 위치 수정\r\n\r\n* refactor: DropDown div에서 select태크로 변경","shortMessageHtmlLink":"[2단계 - 페이먼츠] -치코(이재민) 미션 제출합니다. (#381)"}},{"before":"20d07cf26cb7a58ef3487e987ab8c40934e46eb2","after":"ec5cd3e978177bf8126eb5e7e6722f09b04e05f5","ref":"refs/heads/hain-tain","pushedAt":"2024-05-01T14:30:02.000Z","pushType":"pr_merge","commitsCount":1,"pusher":{"login":"liswktjs","name":"JASUN LEE","path":"/liswktjs","primaryAvatarUrl":"https://avatars.githubusercontent.com/u/60773373?s=80&v=4"},"commit":{"message":"[2단계 - 페이먼츠] 헤인(방세린) 미션 제출합니다. (#402)\n\n* feat: Button 생성\r\n\r\n* feat: SelectBox 생성\r\n\r\n* feat: useInput에서 errorMessage 상태로 관리하도록 변경\r\n\r\n* feat: useInput 에서 관리하는 errorMessage로 적용\r\n\r\n* feat: chevron img 추가\r\n\r\n* chore(FormItem): labelText 옵션으로 변경\r\n\r\n* feat: CardIssuer 생성\r\n\r\n* feat: cardIssuer 상수화\r\n\r\n* feat: 기존 cardIssuer 를 cardType 으로 용어 변경\r\n\r\n* feat: App 변경\r\n\r\n* feat: matchCardIssuer 에서 matchCardType 으로 변경\r\n\r\n* feat: check 이미지 svg로 변경 및 우테코 행성이 Logo 추가\r\n\r\n* feat: 카드 번호, 카드 유효기간 input autoFocus 적용\r\n\r\n* feat(CardHolder): 카드 소유자 input autoFocus 설정 및 onEnterHandler 설정 (엔터 눌러야 다음으로 넘어가도록)\r\n\r\n* feat: isComplete라는 상태 추가 및 checkComplete, onFocus 추가\r\n\r\n* feat: CardCvcNumber 및 useCardCvcNumber 생성\r\n\r\n* feat: CardPassword 및 useCardPassword 생성\r\n\r\n* feat: CardPreview 뒷면 추가\r\n\r\n* feat: formItem 동적 생성 및 페이지 분리\r\n\r\n* feat: CardRegistrationPage\r\n\r\n* feat: errorPage\r\n\r\n* feat(SelectBox storybook): placeholder 추가\r\n\r\n* feat(cardIssuer): cardColorMatcher 함수로 변경\r\n\r\n* feat(validateCardInfo): validateNotBlank 추가\r\n\r\n* chore: 배포 설정\r\n\r\n* feat: useCardInfo 생성\r\n\r\n* feat: ProgressBar 설정\r\n\r\n* refactor: route 상수 분리\r\n\r\n* refactor: ErrorPage 파일 명을 404Page 로 변경 및 컴포넌트 명 NotFoundPage 로 변경\r\n\r\n* refactor: cardColorMatcher 함수CardPreview 파일로 이동\r\n\r\n* refactor: 각 상태의 value 와 isComplete 를 각 커스텀 훅에서 리턴하도록 변경\r\n\r\n* refactor: useCardIssuer 생성 및 적용\r\n\r\n* chore: 파일 확장자 변경(커스텀 훅 tsx를 ts로 변경)\r\n\r\n* feat: useCardPreview 생성\r\n\r\n* refactor: isAllComplete으로 변수명 변경 및 공백 추가\r\n\r\n* feat: 엔터키를 눌렀을 떄 callback함수 실행하는 onEnterKeyDown util 함수 생성 및 적용\r\n\r\n* feat(onEnterKeyDown): allowedBlank 추가 (공백인 상태에서 enter를 눌러도 작동시킬 수 있는 선택지를 주기 위해 추가)\r\n\r\n* refactor: cardForm input 메세지 상수화","shortMessageHtmlLink":"[2단계 - 페이먼츠] 헤인(방세린) 미션 제출합니다. (#402)"}},{"before":"7bc7225f217210f686814cd97d38a9f07bd84870","after":"7fcefe1ef7129883a0cdf173315d654ea7beda53","ref":"refs/heads/hwinkr","pushedAt":"2024-05-01T14:17:00.000Z","pushType":"pr_merge","commitsCount":1,"pusher":{"login":"iborymagic","name":"An Hyun Cheol","path":"/iborymagic","primaryAvatarUrl":"https://avatars.githubusercontent.com/u/42052110?s=80&v=4"},"commit":{"message":"[2단계 - 페이먼츠] - 해리(최현웅) 미션 제출합니다. (#383)\n\n* docs(README.md): 기능 요구사항 작성\r\n\r\nCo-authored-by: Fe \r\n\r\n* feat(CardPreview): 사용자가 입력한 카드 번호를 실시간으로 파악할 수 있는 카드 컴포넌트 구현\r\n\r\n* feat(ExpirationDateInput): 카드 유효기간 입력 컴포넌트 구현\r\n\r\n* chore(assets) : 이미지 파일 추가\r\n\r\n* feat(CardOwnerNameInput): 카드 소유자 이름 입력 컴포넌트 구현\r\n\r\n* feat(Layout): 레이아웃 컴포넌트 구현\r\n\r\n* feat(CarNumberInput): 카드 번호 입력 컴포넌트 구현\r\n\r\n* feat(Caption): 공통 Caption 컴포넌트 구현\r\n\r\n* feat(Input): 공통 인풋 컴포넌트 구현\r\n\r\n* feat(InputTitle): 공통 인풋 타이틀 컴포넌트 구현\r\n\r\n* feat(Label): 공통 라벨 컴포넌트 구현\r\n\r\n* chore(assets): 이미지 export 경로 설정\r\n\r\n* feat(useCardLogo): visa, master 카드 로고를 판단하는 커스텀 훅 구현\r\n\r\n* chore(constants): 카드 앱에서 사용하는 상수 설정\r\n\r\n* style(global): 전역으로 사용할 reset css 설정\r\n\r\n* chore(type): 카드 앱에서 공통적으로 사용할 타입 설정\r\n\r\n* feat(validator): 카드 정보 입력 유효성 검증 함수 구현\r\n\r\n* feat(App): 카드 입력 페이지 추가\r\n\r\n* chore: styled-components 설치\r\n\r\n* chore: 사용하지 않는 파일 삭제\r\n\r\nCo-authored-by: Fe \r\n\r\n* feat(CardNumberInput): 카드 번호가 유효하지 않을 경우 에러 피드백 제공 기능 구현\r\n\r\nCo-authored-by: Fe \r\n\r\n* chore: 컴포넌트 이름 변경\r\n\r\n* refactor(CardOwnerNameInput): 사용자 이름 유효성 검사 추가, 유효하지 않은 입력일 경우 입력을 막는 기능 추가\r\n\r\nCo-authored-by: chysis \r\n\r\n* chore: 깃 공동 작업자 추가\r\n\r\nCo-authored-by: chysis \r\n\r\n* style(CardPreview): 스타일 컴포넌트 네이밍 수정\r\n\r\nCo-authored-by: chysis \r\n\r\n* style: css 수정\r\n\r\nCo-authored-by: chysis \r\n\r\n* chore(Input): props 순서 수정\r\n\r\nCo-authored-by: chysis \r\n\r\n* refactor(ExpirationDateInput): 년, 월 입력 유효성 검증 구분 및 레이아웃 스타일 적용\r\n\r\nCo-authored-by: chysis \r\n\r\n* feat(InputPageLayout): PaymentsLayout 이름 수정\r\n\r\nCo-authored-by: chysis \r\n\r\n* chore(constants): 에러 메시지 상수 추가\r\n\r\nCo-authored-by: chysis \r\n\r\n* feat(NewCardInputPage): 새로운 카드 등록 페이지 컴포넌트 네이밍 수정\r\n\r\nCo-authored-by: chysis \r\n\r\n* refactor(cardInputValidator): 년, 월 입력 유효성 검증 함수 구분\r\n\r\nCo-authored-by: chysis \r\n\r\n* refactor(useCardLogo): visa, master 카드 판단 함수 분리\r\n\r\nCo-authored-by: chysis \r\n\r\n* chore(constants): 매직 넘버, 인풋 라벨 상수화\r\n\r\nCo-authored-by: chysis \r\n\r\n* chore(constants): 매직 넘버 상수화 적용\r\n\r\nCo-authored-by: chysis \r\n\r\n* test(common Input): 공통 인풋 컴포넌트 스토리 테스트\r\n\r\n- size props에 따라, 너비가 변경 되는지 테스트\r\n- 입력 에러가 발생했을 경우, 경고 border UI가 렌더링 되는지 테스트\r\n\r\nCo-authored-by: chysis \r\n\r\n* test(CardNumberInput): 16자리 카드 번호를 입력 받는 컴포넌트 스토리 테스트\r\n\r\n- 한글 입력할 경우 입력을 막는 기능 테스트\r\n- 예외가 발생했을 경우, 빨간색 border UI가 렌더링 되는지 테스트\r\n\r\nCo-authored-by: chysis \r\n\r\n* test(CardOwnerNameInput): 카드 소유자 이름 입력 컴포넌트 스토리 테스트\r\n\r\n- 영문 이외의 문자를 입력한 경우 입력을 막는지 테스트\r\n- 15자 이상을 입력한 경우 입력을 막는지 테스트\r\n- 예외가 발생했을 경우 border UI가 렌더링 되는지 테스트\r\n\r\nCo-authored-by: chysis \r\n\r\n* test(common Caption): 공통 Caption 컴포넌트 스토리 테스트\r\n\r\n- type에 따라서 색이 변경 되는지 테스트\r\n\r\nCo-authored-by: chysis \r\n\r\n* test(ExpirationDateInput): 카드 유효 기간 입력 컴포넌트 스토리 테스트\r\n\r\n- 유효하지 않은 기간일 경우 border UI가 렌더링 되는지 테스트\r\n\r\nCo-authored-by: chysis \r\n\r\n* test(CardPreview): 사용자의 입력을 실시간으로 업데이트 하는 카드 컴포넌트 스토리 테스트\r\n\r\n- visa, master 카드 구분 테스트\r\n- 카드 번호 1, 2, 3, 4 구역을 입력했을 떄 자리에 맞게 위치하는지 테스트\r\n- 년, 월, 월/년 입력했을 경우 테스트\r\n\r\nCo-authored-by: chysis \r\n\r\n* chore: 사용하지 않는 파일 삭제\r\n\r\n* chore: 이미지 파일 src 폴더로 이동\r\n\r\n* refactor(Input): 공통 인풋 컴포넌트 props 타입 변경\r\n\r\n* refactor(CardText): text, longText 타입 묶어서 분기 처리하도록 수정\r\n\r\n* feat(util): 비자, 마스터 카드 판단 유틸 함수 구현\r\n\r\n* chore: 이미지 export 경로 설정\r\n\r\n* refactor: 인풋 컴포넌트에 전달하는 props 네이밍 수정\r\n\r\n* refactor(CardPreview): 비자, 마스터 카드 판단하는 유틸 함수 사용\r\n\r\n* chore : delete unused file\r\n\r\n* cchore: 사용하지 않는 파일 삭제\r\n\r\n* choree: 이미지 파일 추가\r\n\r\n- 카드 제출 완료할 경우 체크 이미지\r\n- 404 페이지에서 사용할 카드 이미지\r\n\r\n* feat(FormField): 각 입력 필드 컴포넌트 구현\r\n\r\n- 합성 컴포넌트 패턴 적용\r\n- 유연하게 재사용할 수 있고, 어떤 컴포넌트에 속한지 파악하기 쉽다는 장점이 생겨 도입\r\n\r\n* feat(CardPreview): 카드 프리뷰 컴포넌트 함성 컴포넌트 패턴 적용\r\n\r\n* config: install react-router-dom\r\n\r\n* config: 페이지 이동을 위한 라우터 설정\r\n\r\n* refactor(App): react-router-dom 프로바이더 컴포넌트 적용\r\n\r\n* feat(CardCompanySelectField): 카드사 선택 컴포넌트 구현\r\n\r\n- test: 카드사가 변경될 때마다 카드 프리뷰 컴포넌트 배경색이 변경되는지 테스트\r\n\r\n* feat(CardNumberInputField): 카드 번호 입력 컴포넌트 구현\r\n\r\n- test : 각 입력 필드에 입력이 완료되면 다음 필드로 넘어가는지 테스트\r\n- test : 유효하지 않은 입력값이 입력된 경우, 입력을 막고 에러 피드백을 제공하는지 테스트\r\n\r\n* feat(CardOwnerInputField): 카드 소유자 입력 필드 컴포넌트 구현\r\n\r\n- test: 유효하지 않은 입력값을 입력한 경우 예외 피드백을 제공하는지 테스트\r\n\r\n* feat(CardPasswordInputField): 카드 비밀번호 입력 필드 컴포넌트 구현\r\n\r\n- test:유효하지 않은 입력값을 입력한 경우 예외 피드백을 제공하는지 테스트\r\n\r\n* feat(CVCNumberInputField): CVC 번호 입력 필드 컴포넌트 구현\r\n\r\n* feat(ExpirationDateInputField): 카드 유효기간 입력 필드 컴포넌트 구현\r\n\r\n- test: 유효하지 않은 입력값을 입력한 경우 예외 피드백을 제공하는지 테스트\r\n\r\n* feat(FormProviderDecorator): 스토리북에서 각 입력 필드에 컨텍스트를 제공하기 위한 데코레이터 컴포넌트 구현\r\n\r\n* test(CardPreview): 카드 프리뷰 컴포넌트 UI 테스트\r\n\r\n- 비자, 마스터 카드 구분 테스트\r\n- 카드 번호 각 자리 입력시 미리보기에 반영 되는지 테스트\r\n\r\n* test(Caption): args에 상수를 사용하도록 수정\r\n\r\n* test(Input): inputSize 네이밍 수정 반영\r\n\r\n* chore(AppLayout): overflow 스타일 제거\r\n\r\n* feat(CardPageLayout): 카드 페이지에서 공통적으로 적용되어야 하는 레이아웃 컴포넌트 구현\r\n\r\n* feat(FormResultPageLayout): 폼 결과 페이지에서 공통적으로 적용되어야 하는 레이아웃 컴포넌트 구현\r\n\r\n* feat(CardAddForm Context): 카드 폼에서 사용할 상태, 로직을 관리하는 컨텍스트, 프로바이더 컴포넌트 구현\r\n\r\n* feat(Select): 카드사 선택에 사용되는 셀렉트 컴포넌트 구현\r\n\r\n* chore(constants): 카드 앱에서 사용할 상수 설정\r\n\r\n- 경로, 카드사와 색상 추가\r\n\r\n* feat(useCardAddForm): 각 카드 폼 입력이 유효한지 판단하고, 제출할 수 있는지 판단하는 커스텀 훅 구현\r\n\r\n* feat(useCardAddFormField): 각 카드 폼 입력이 유효한지 판단하고, 폼 필드의 현재 상태를 참조할 수 있도록 하는 커스텀 훅 구현\r\n\r\n* feat(useFieldFocus): 입력 필드가 포거스 상태인지를 판단하는 커스텀 훅 구현\r\n\r\n* feat(CardFormErrorPage): 카드 입력이 완료되지 않았을 경우, 완료 페이지로 이동하면 보여줄 에러 페이지 구현\r\n\r\n* feat(CardFormPage): 새로운 카드 입력 페이지 구현\r\n\r\n- 한 필드의 입력이 완료되면 다음 필드 렌더링 후 autofocus\r\n\r\n* feat(CardFormSuccessPage): 카드 등록 완료 페이지 구현\r\n\r\n- 완료 메시지 전달 후, 확인 버튼 클릭 시 카드 입력 페이지로 라우팅\r\n\r\n* feat(NotFoundPage): 404 페이지 구현\r\n\r\n* style(common): 에러, 404 페이지, 등록 완료 페이지에서 공통적으로 사용할 스타일 모듈 구현\r\n\r\n* config(component type): children props을 받는 컴포넌트에서 사용할 타입 설정\r\n\r\n* config(type-guard): 배열의 요소를 순회하면서 타입을 확인하는 타입 가드 함수 구현\r\n\r\n* feat(cardAddFormValidator): 각 입력 폼 필드가 유효한 입력값을 가진 상태인지 판단하는 유효성 검증 모듈 구현\r\n\r\n* feat(cardInputValidator): 각 폼 입력에 예외가 있는지 판단하는 유효성 검증 모듈 구현\r\n\r\n* test(CVCNumberInputFeild): 카드가 뒤집히는 것을 테스트할 수 있도록 CardPreview 컴포넌트 추가\r\n\r\n* chore: 사용하지 않는 파일 삭제\r\n\r\n* refactor: createBrowserRouter 구조 수정\r\n\r\n* refactor: createBrowserRouter 구조 수정\r\n\r\n* chore: type-guard에 사용되는 함수 폴더 구조 변경\r\n\r\n* chore: 유효성 검증에 의미있는 상수 설정\r\n\r\n* refactor: 상태 구조 변경, 타입 변경\r\n\r\n* refactor: 유효성 검증 함수 재사용, 에러 설정 세분화\r\n\r\n* refactor: cvc 번호 props 타입 수정\r\n\r\n* chore: 레이아웃 구조 수정\r\n\r\n* refactor: react-router-dom의 Outlet 사용\r\n\r\n* chore: 입력 규칙 상수 추가\r\n\r\n* chore: 카드사 데이터 구조 수정\r\n\r\n* chore: CardPageLayout 제거\r\n\r\n* chore: FormAction import 경로 수정\r\n\r\n* chore: 타입 import 경로 숮어\r\n\r\n* chore: 사용하지 않는 파일 삭제\r\n\r\n---------\r\n\r\nCo-authored-by: Fe \r\nCo-authored-by: chysis ","shortMessageHtmlLink":"[2단계 - 페이먼츠] - 해리(최현웅) 미션 제출합니다. (#383)"}},{"before":"a8a77f557da418c7701a819e4762c8c7658d039b","after":"b4ac940f8acf6d38bc11f06bf116adc99b56a2a5","ref":"refs/heads/jinhokim98","pushedAt":"2024-05-01T06:04:01.000Z","pushType":"pr_merge","commitsCount":1,"pusher":{"login":"365kim","name":"Kim Haru","path":"/365kim","primaryAvatarUrl":"https://avatars.githubusercontent.com/u/60066472?s=80&v=4"},"commit":{"message":"[2단계 - 페이먼츠 hooks & state] - 쿠키(김진호) 미션 제출합니다. (#392)\n\n* docs: step2 기능 구현 목록 정리\r\n\r\n* refactor: additionalEffect -> santizeValue로 들어오는 값을 적절히 중간에서 처리함에 대한 의미를 살리도록 변경\r\n\r\n* refactor: label 이름 한글로 변환\r\n\r\n* refactor: children type JSX.Element에서 ReactNode로 변경\r\n\r\n* refactor: formField 별로 컴포넌트 분리\r\n\r\n* chore: svg declare와 화살표 이미지 추가\r\n\r\n* feat: Select 컴포넌트 생성\r\n\r\n* test: 셀렉트 컴포넌트 스토리북 생성\r\n\r\n* fix: select가 되지 않았던 버그 수정\r\n\r\n* feat: 카드사를 입력하는 select input form 생성\r\n\r\n* design: app height 제한 해제\r\n\r\n* design: card brand color 추가\r\n\r\n* feat: 선택한 카드사 별로 카드 색이 변하는 기능\r\n\r\n* fix: valid 조건 추가\r\n\r\n* feat: auto focus 기능 추가\r\n\r\n* feat: 카드번호 입력 첫 번째 요소 autofocus 적용\r\n\r\n* feat: CVC 숫자 입력 기능\r\n\r\n* feat: CVC 숫자 input focus될 때 카드 뒤집는 기능\r\n\r\n* feat: 비밀번호 필드 생성\r\n\r\n* feat: 필드 동적생성 기능 추가\r\n\r\n* fix: toggle useReducer에서 state로 변경\r\n\r\ntab을 눌렀을 때 autoFocus와 중복으로 실행돼서 이상하게 토글되는 현상을 발견해서\r\n\r\n* feat: formError 상태 계산해서 제공\r\n\r\n* feat: Button 컴포넌트 생성\r\n\r\n* feat: Form이 valid할 때 확인 버튼이 보이도록 설정\r\n\r\n* feat: 카드 앞 뒷면 전환시 애니메이션 추가 및 클릭 시 카드전환\r\n\r\n* design: Submit 버튼 위치 조정\r\n\r\n* chore: react-router-dom 라이브러리 설치\r\n\r\n* feat: App의 내용을 CardRegisterForm으로 이동\r\n\r\n* feat: 라우터 셋팅\r\n\r\n* design: heading style 추가\r\n\r\n* feat: 등록 성공화면 퍼블리싱\r\n\r\n* feat: form 초기화 함수 및 현재 상태를 return하는 함수 정의\r\n\r\n* feat: 등록 결과 상태를 넘겨주는 기능 구현\r\n\r\n* feat: fallback 컴포넌트 생성 및 라우팅 미스 시 fallback 보이게 설정\r\n\r\n* feat: success 비정상 접근 시 fallback 보여지도록 설정\r\n\r\n* refactor: 입력 필드 label 수정\r\n\r\n* fix: base url 마지막 / 붙임\r\n\r\n* fix: select label optional로 변경\r\n\r\n* test: 카드브랜드 스토리북 생성\r\n\r\n* test: cvc 숫자 스토리북 생성\r\n\r\n* test: 비밀번호 입력 스토리북 생성\r\n\r\n* refactor: 스토리북 기존 필드 컴포넌트로 교체\r\n\r\n* test: button 스토리북 생성성\r\n\r\n* feat: 버튼 클릭했을 때 색이 변하도록 설정\r\n\r\n* fix: 프리뷰 스토리북 조정\r\n\r\n* refactor: sanitize 오타 수정\r\n\r\n* design: 버튼 호버 및 클릭 시 색 조정\r\n\r\n* refactor: 유효한 입력일 때 바로 다음 필드가 생성되도록 변경, 소유자 이름은 blur로 유지\r\n\r\n* refactor: 버튼 label을 일반 태그처럼 children으로 바꾸는 방식으로 변경\r\n\r\n* refactor: failure, ment -> ErrorMessage로 변수명 수정\r\n\r\n* refactor: fallback, error페이지에서 url 상수화\r\n\r\n* refactor: Form 태그 외부로 내보냄에 따라서 태그 이름 변경\r\n\r\n* design: 상하단 여백 제거\r\n\r\n* fix: props 변경으로 인한 스토리북 조정\r\n\r\n* fix: 라우팅 수정\r\n\r\n* docs: 한다로 어체 변경\r\n\r\n* refactor: select options 상수화\r\n\r\n* refactor: custom select -> html select 태그로 변경\r\n\r\n* refactor: 소유자 이름 placeholder 변경\r\n\r\n* field hooks 내에서 조건 상수화\r\n\r\n* refactor: select onChange 함수를 제공하는 것으로 변경\r\n\r\n* refactor: onChange handler에 맞게 set 함수 이름 조정\r\n\r\n* refactor: select 초기값 null -> 빈 문자열로 수정\r\n\r\n* refactor: 불필요한 undefined 제거\r\n\r\n* fix: select null제거 스토리북에도 반영","shortMessageHtmlLink":"[2단계 - 페이먼츠 hooks & state] - 쿠키(김진호) 미션 제출합니다. (#392)"}},{"before":"4a3e3b93ff9743e7aa66ab4ec4f84d0844c80679","after":"a9a72ac32419e4080a36a5b7459d6f41992a7245","ref":"refs/heads/llqqssttyy","pushedAt":"2024-05-01T05:18:34.000Z","pushType":"pr_merge","commitsCount":1,"pusher":{"login":"365kim","name":"Kim Haru","path":"/365kim","primaryAvatarUrl":"https://avatars.githubusercontent.com/u/60066472?s=80&v=4"},"commit":{"message":"[2단계 - 페이먼츠] 렛서(김다은) 미션 제출합니다. (#390)\n\n* refactor: errMsg -> errorMessage로 이름 변경\r\n\r\n* refactor: 중복으로 관리되던 state 제거 및 validation 중복 로직 개선\r\n\r\n* feat: 카드사 입력 필드 추가\r\n\r\n* refactor: Input 컴포넌트 타입 분리\r\n\r\n* feat: CVC 번호 입력 필드 추가\r\n\r\n* feat: cvc 번호 유효성 검사\r\n\r\n* feat: 비밀번호 입력 필드\r\n\r\n* chore: #app의 height 정의 제거\r\n\r\n* feat: 카드 뒤집기 기능 추가\r\n\r\n* feat: 카드 프리뷰에 cvc 번호 추가\r\n\r\n* refactor: getCardBrand 함수를 CardPreview 컴포넌트와 분리\r\n\r\n* refactor: 카드사 선택에 따라 카드 프리뷰의 배경색이 바뀌는 기능\r\n\r\n* feat: 입력이 완료되면 다음 input으로 자동 포커싱되는 기능\r\n\r\n* refactor: 다음 필드 노출에 관한 정보를 담고 있는 상태 이름 변경 및 역할 분리\r\n\r\n- 기존 `isFormFilled`라는 이름으로 모든 입력이 유효함을 알려주는 상태의 역할을 isFieldFilled, isFieldValid 두 개로 분리해 `isFieldComplete`라는 상태로 관리하도록 함\r\n- 최초로 isFieldComplete가 되는 순간 true가 되는 showNextField 상태 추가로 다음 필드 렌더링을 관리\r\n\r\n* chore: 주석 제거\r\n\r\n* refactor: useFormFieldFocus 훅의 매개변수로 길이를 받는 것으로 수정\r\n\r\n* feat: 폼 제출 버튼 추가 및 라우팅\r\n\r\n* refactor: 폼 전체의 유효성과 입력 진행 상황을 context에 추가\r\n\r\n* feat: 등록 완료 페이지 추가\r\n\r\n* fix: 비밀번호 입력 시 카드가 돌아가지 않는 버그\r\n\r\n* feat: NotFound 페이지 추가\r\n\r\n* test: 입력 필드 및 버튼 스토리 추가\r\n\r\n* test: Button 스토리 args 수정\r\n\r\n* chore: 불필요한 import 및 주석 제거\r\n\r\n* fix: 만료 날짜 값이 없을 때 예외처리\r\n\r\n* fix: 타입 에러 수정\r\n\r\n* chore: Storybook에 스타일 파일 임포트\r\n\r\n* chore: Select의 isRequired 기본값 주석 추가\r\n\r\n* refactor: 하나의 인풋을 가지는 필드의 name을 미리 선언해 타입 단언 없애기\r\n\r\n* refactor: early return으로 조건부 렌더링 명시하기\r\n\r\n* refactor: Password 컴포넌트 early return 조건부 렌더링 명시\r\n\r\n* refactor: 핸들러 명명 체계 수정\r\n\r\n1. 훅 안의 핸들러: on-* -> handleInput-*\r\n2. element 안에 들어가는 핸들러(공통 컴포넌트의 props로 들어오는 핸들러): handle-* -> on-*\r\n\r\n* refactor: INITIAL_VALUES 상수 타입 선언\r\n\r\n* chore: Button theme css 클래스 적용 및 스타일 변경\r\n\r\n* refactor: 카드 정보를 params로 전달하는 대신 state에 전달하도록 수정\r\n\r\n* feat: useAddCardFormContext에서 에러 발생 시 에러 페이지 노출\r\n\r\nuseAddCardFormContext의 context가 null일 때 에러를 던짐으로써 사용하는 곳에서 타입 단언 제거\r\n\r\n* refactor: 필드에 전달되는 initial value에 대한 상수화 제거\r\n\r\ninput의 전체적인 구조를 AddCardForm 컴포넌트에 노출시키기 위함\r\n\r\n* refactor: 변경된 핸들러 이름을 스토리북 코드에 적용\r\n\r\nrelated commit: fa747e23132c9411b7d898bedc681bb1a70535b3\r\n\r\n* refactor: 변경된 핸들러 이름을 select 스토리북 코드에 적용\r\n\r\nrelated commit: fa747e23132c9411b7d898bedc681bb1a70535b3\r\n\r\n* refactor: useFormFieldFocus 내 useEffect 사용을 제거","shortMessageHtmlLink":"[2단계 - 페이먼츠] 렛서(김다은) 미션 제출합니다. (#390)"}},{"before":"30e129d901a23beceb629896b888251bda25cfe3","after":"d549080cc99828b5c002f644500c478869c91b00","ref":"refs/heads/jaymyong66","pushedAt":"2024-05-01T05:13:55.000Z","pushType":"pr_merge","commitsCount":1,"pusher":{"login":"moonheekim0118","name":null,"path":"/moonheekim0118","primaryAvatarUrl":"https://avatars.githubusercontent.com/u/61469664?s=80&v=4"},"commit":{"message":"[2단계 - 페이먼츠] 마스터위(명재위) 미션 제출합니다. (#397)\n\n* chore: eslint-react-plugin 설치, self-closing-comp rule 적용\r\n\r\n* refactor: self-closing-comp 수정, map반복 컴포넌트에 key 추가\r\n\r\n* feat: 카드 회사 데이터 추가\r\n\r\n* feat: 카드 회사 정보 입력 기능\r\n\r\n* feat: 카드 회사 정보에 따른 CardPreview 색 변경\r\n\r\n* feat: CardEnrollForm에서 form 부분을 분리\r\n\r\n* feat: useInput 커스텀 훅\r\n\r\n* feat: CardOwnerName 컴포넌트에 useInput 훅 적용\r\n\r\n* refactor: validate 를 is 키워드로 변경\r\n\r\n* refactor: useCardDateInput 커스텀훅 적용\r\n\r\n* feat: useCardNumber 커스텀훅 적용\r\n\r\n* refactor: Input 컴포넌트를 useInput 커스텀훅에 따라 변경\r\n\r\n* fix: exhaustive-deps 에러 해결\r\n\r\n* feat: form 입력 과정을 step별로 분리\r\n\r\n* feat: 카드 cvc 입력 컴포넌트\r\n\r\n* feat: 카드 cvc 입력에 따른 카드 프리뷰의 뒷면 추가\r\n\r\n* feat: useInput 커스텀훅의 onChange에서 유효한 값만 입력 받는 방식으로 변경\r\n\r\n* feat: CardEnroll 컴포넌트에서 카드 정보 데이터 관리 방식 변경\r\n\r\n기존의 CardInformation 상태를 useInput의 상태로 업데이트 해주는 방식에서 CardInformation을 삭제 후 하나의 상태로 변경\r\n\r\n* feat: CardCVC에 focus, blur시 카드 프리뷰 뒤집기 기능\r\n\r\n* feat: 카드 비밀번호 입력 기능\r\n\r\n* feat: 카드 정보에 유효한 정보 완료시, 제출 버튼 활성화 기능\r\n\r\nuseInput을 map에서 for of로 -> validate을 배열로 순회하며 적용하니, 첫 검사에서 유효하지 않더라도 마지막 검사에서 유효하면 complete 되는 버그\r\n\r\n* feat: FormButton 스타일링\r\n\r\n* feat: react-router 설치\r\n\r\n* feat: 기본 화면으로 카드 등록 폼을 라우팅 설정\r\n\r\n* feat: base 등록 완료 페이지, 에러 페이지 추가\r\n\r\n* feat: 카드 등록 완료 페이지 스타일\r\n\r\n* refactor: SubTitleText 스타일 추가\r\n\r\n* refactor: font-family 중복 제거\r\n\r\nfont가 렌더링 중간에 바뀌어 글자가 움직이는 현상\r\n\r\n* refactor: 카드 프리뷰 그림자 추가\r\n\r\n* refactor: 카드사 select 스타일 변경\r\n\r\n* feat: 카드 등록 버튼을 뷰포트 하단에 고정, 마지막 입력란까지 채우면 버튼이 활성화\r\n\r\n* feat: 동적 UI - focus 구현\r\n\r\n* feat: 등록 완료 페이지에서 확인 버튼 클릭 시, 카드 등록 페이지로\r\n\r\n* feat: CardEnroll 페이지\r\n\r\n* refactor: errorMessage 유틸 함수로 분리\r\n\r\n* refactor: onSubmit 핸들러 useCardForm 커스텀훅으로 이동\r\n\r\n* feat: 경로 및 도메인 상수처리\r\n\r\n* feat: storybook - react router 설정\r\n\r\n* refactor: types d.ts 파일 제거\r\n\r\n* fix: Ref ts 타입 에러 수정","shortMessageHtmlLink":"[2단계 - 페이먼츠] 마스터위(명재위) 미션 제출합니다. (#397)"}},{"before":"e102a57c0cd7491cd28a2db4a4f4971d55b6412e","after":"a005d3d33f81fcd5d649b99a28ccf10e3c9c9bc0","ref":"refs/heads/chosim-dvlpr","pushedAt":"2024-05-01T05:10:37.000Z","pushType":"pr_merge","commitsCount":1,"pusher":{"login":"moonheekim0118","name":null,"path":"/moonheekim0118","primaryAvatarUrl":"https://avatars.githubusercontent.com/u/61469664?s=80&v=4"},"commit":{"message":"[2단계 - 페이먼츠] - 프룬(변민지) 미션 제출합니다. (#391)\n\n* chore: eslint rules 설정\r\n\r\n* refactor: state type 분리 및 함수 인자 개수 조정\r\n\r\n* refactor: period 상수 분리\r\n\r\n* refactor: Input 컴포넌트 함수 형태로 변경\r\n\r\n* refactor: self closing 추가\r\n\r\n* refactor: props 인자 개수 조정 및 inputSection 없을 경우 return하는 로직 추가\r\n\r\n* feat: 카드사 선택 기능 구현\r\n\r\n* feat: CVC 입력 기능 적용 및 숫자 확인 유효성 검사 로직 수정\r\n\r\n* feat: 카드 cvc, 카드사 에러메세지 및 유효성 검사 값 상수화\r\n\r\n* feat: 비밀번호 입력 기능 추가\r\n\r\n* feat: useCompleted 커스텀 훅 생성 및 폼 제출 버튼 생성\r\n\r\n* chore: react router 설치\r\n\r\n* feat: 라우터 적용 및 CardRegister, CardRegisterCompleted 페이지 생성\r\n\r\n* feat: 버튼 클릭 시 페이지 이동 기능 추가\r\n\r\n* feat: FormButton을 button tag로 변경, CardRegisterCompleted 컴포넌트 추가\r\n\r\n- FormButton 삭제\r\n- button tag로 FormButton 대체\r\n- CardRegisterCompleted 추가\r\n- 페이지 이동 기능 추가\r\n\r\n* fix: InputGroupSelector를 InputGroup으로 통합, InputGroupSelector 삭제\r\n\r\n* feat: 클릭 여부 상태 추가 및 input 테두리 css 조건 변경\r\n\r\n* fix: 카드사 선택 버그 해결 및 디자인 수정\r\n\r\n* design: Selector 화살표 추가\r\n\r\n* design: 카드 색상 동적 변경 추가\r\n\r\n* feat: cvc 입력 시 카드 이미지 뒷면 렌더 추가\r\n\r\n* fix: Selector event 타입 에러 해결\r\n\r\n* feat: 404 페이지 추가\r\n\r\n* fix: input 입력 시 validation 작동되도록 수정, useRef 도입\r\n\r\n* test: 스토리북 업데이트 및 CardBackImage, Selector 추가","shortMessageHtmlLink":"[2단계 - 페이먼츠] - 프룬(변민지) 미션 제출합니다. (#391)"}},{"before":"46c86db80d5a736a29379f8e1219728771077228","after":"9acb490bbe009b547e94cc5fb80cfd52c67eeaf6","ref":"refs/heads/ss0526100","pushedAt":"2024-04-30T18:59:52.000Z","pushType":"pr_merge","commitsCount":1,"pusher":{"login":"iborymagic","name":"An Hyun Cheol","path":"/iborymagic","primaryAvatarUrl":"https://avatars.githubusercontent.com/u/42052110?s=80&v=4"},"commit":{"message":"[2단계 - 페이먼츠] 소파(차승하) 미션 제출합니다. (#398)\n\n* build: @emotion/react 설치\r\n\r\nCo-authored-by: ss0526100 \r\n\r\n* docs: 기능 요구 사항 작성\r\n\r\n* feat: css reset 설정\r\n\r\n* feat: useInput 커스텀 훅 제작\r\n\r\n* feat(FormItem): input과 label, errorMessage를 가지는 FormItem 구현\r\n\r\n* feat(CardNumbers): 카드 번호 입력받는 컴포넌트 생성\r\n\r\n* feat(CardExpiredDate): 카드 유효기간 입력받는 컴포넌트 생성\r\n\r\n* feat(CardHolder): 카드 소유자 이름 입력받는 컴포넌트 생성\r\n\r\n* feat(CardForm): 카드 정보 입력받는 form 컴포넌트 생성\r\n\r\n* feat(CardPreview): 카드 프리뷰 컴포넌트 생성\r\n\r\n* feat(SectionTitle): card section title 스타일 컴포넌트 생성\r\n\r\n* feat(validateInput): validate 함수 분리\r\n\r\n* feat(useCardInfo): useContext에서 사용할 cardInfo를 위한 커스텀 훅 구현\r\n\r\n* feat(InputError): Input 유효성 검사 이후 에러 처리를 위해 BlockedInputError 와 NonBlockedInputError 에러 생성\r\n\r\n* feat: 카드 발급사를 반환하는 matchCardIssuer 및 발급사별 이미지를 반환하는 matchCardIssuerImgSrc 생성\r\n\r\n* feat(App): CardInfoContext 생성 및 전체 app 구조 생성\r\n\r\n* feat: message 및 errorMessage 상수 분리\r\n\r\n* docs: 기능 요구 사항 구현 완료 체크\r\n\r\n* feat: SectionTitle stories 생성\r\n\r\n* refactor(CardNumbers): hooks 를 inputs 으로 변수 명 변경\r\n\r\n* feat: input stories 생성\r\n\r\n* feat: CardPreview stories 생성\r\n\r\n* build: 빌드 파일 변경\r\n\r\n* feat:useInput 구현\r\n\r\n* feat:validateInput 구현\r\n\r\n* feat: css 속성 중 color 분리\r\n\r\n* feat:useValidateInput 구현\r\n\r\n* feat:useLastValidValue 구현\r\n\r\n* feat(useCardInfo): 카드 발행사 확인 로직 내부로 옮김\r\n\r\n* style(message): prettier 적용\r\n\r\n* feat(number): 숫자 상수 BOUND 구현\r\n\r\n* feat:InputContainer 구현\r\n\r\n* refactor(checkIsValid): 유효성 검증 로직 분리\r\n\r\n* feat: 배경화면 이쁘게 변경\r\n\r\n* feat(cardExpiredDate): 새로운 custom hook을 이용\r\n\r\n* feat(CardHolder):새로운 custom hook을 이용\r\n\r\n* feat(cardNumbers):새로운 custom hook을 이용\r\n\r\n* style(main):prettier 적용\r\n\r\n* feat(cardPreview): context 삭제 및 상태 외부 주입\r\n\r\n* feat(CardForm): emotion 객체형으로 변경\r\n\r\n* feat(FormItem): emotion 객체형으로 변경\r\n\r\n* feat:textInput 구현\r\n\r\n* feat(App): useContext를 state로 변경 및 emotion 객체로 변경\r\n\r\n* delete(validateInput): 분리되면서 삭제\r\n\r\n* feat(App.css): eof 설정\r\n\r\n* feat(color):gray3 추가\r\n\r\n* feat(TextInput): borderColor로 변경\r\n\r\n* feat:emotion.styled로 변경\r\n\r\n* feat(InputContainer): emotion.styled로 변경\r\n\r\n* feat: CardInfo 내의 타입 export\r\n\r\n* delete(matchCardIssuer): 안쓰는 코드 삭제\r\n\r\n* feat(useValidValue): useEffect 삭제\r\n\r\n* fix(CardPreview): 카드 preview 자식 요소 크기 조절\r\n\r\n* feat(useValidator): Validation을 진행해 오류 여부를 반환하는 커스텀 훅 구현\r\n\r\n* feat(CardExpiredDate):현재 보다 이전의 년도/월을 입력할 경우 오류\r\n\r\n* feat(useInput): setHook을 인자로 받게 구현 및 useEffect 제거\r\n\r\n* feat: aria-invalid 적용\r\n\r\n* feat: body background css 수정\r\n\r\n* feat:useCardInfo 삭제 및 useValidateInput으로 변경\r\n\r\n* feat:useCardInfo 삭제 및 useValidateInput으로 변경\r\n\r\n* feat: useInput 간소화\r\n\r\n* feat(useValidateInput):shouldReflect 삭제 및 오류 확인 간소화\r\n\r\n* feat:AppWrapper 구현\r\n\r\n* feat: 확인 버튼 구현\r\n\r\n* feat: 카드 입력 완료페이지 구현\r\n\r\n* feat: 드랍다운 커스텀 훅 및 컴포넌트 구현\r\n\r\n* feat(CardPreview): 카드 색깔 변경 구현\r\n\r\n* fix(Payments): 하단 버튼 고정 안되는 버그 수정\r\n\r\n* feat: 비밀번호와 cvc 구현\r\n\r\n* delete:matchCardIssuer 삭제\r\n\r\n* fix:Date.getMonth로 인한 오류 수정\r\n\r\n* fix(CardPreview): 이름이 cardPreview를 넘어가던 오류 수정\r\n\r\n* fix(CardPreview): 이름이 cardPreview를 넘어가던 오류 수정\r\n\r\n* feat: passwordInput 적용\r\n\r\n* feat: 키보드 조작 구현\r\n\r\n* feat: esc로 select 닫기 구현\r\n\r\n* refactor: 파일 페이지 별로 정리\r\n\r\n* fix: 이미지 경로 수정\r\n\r\n* feat: cvc 입력 뒷면 구현\r\n\r\n* feat: hashRouter 사용\r\n\r\n* feat(validateInput): validate 함수 분리\r\n\r\n* feat: message 및 errorMessage 상수 분리\r\n\r\n* feat:validateInput 구현\r\n\r\n* feat(useCardInfo): 카드 발행사 확인 로직 내부로 옮김\r\n\r\n* feat: 배경화면 이쁘게 변경\r\n\r\n* delete(validateInput): 분리되면서 삭제\r\n\r\n* feat(App.css): eof 설정\r\n\r\n* feat(useInput): setHook을 인자로 받게 구현 및 useEffect 제거\r\n\r\n* feat: body background css 수정\r\n\r\n* feat:useCardInfo 삭제 및 useValidateInput으로 변경\r\n\r\n* feat:useCardInfo 삭제 및 useValidateInput으로 변경\r\n\r\n* feat: useInput 간소화\r\n\r\n* feat(useValidateInput):shouldReflect 삭제 및 오류 확인 간소화\r\n\r\n* feat:AppWrapper 구현\r\n\r\n* feat: 확인 버튼 구현\r\n\r\n* feat: 카드 입력 완료페이지 구현\r\n\r\n* feat: 드랍다운 커스텀 훅 및 컴포넌트 구현\r\n\r\n* feat(CardPreview): 카드 색깔 변경 구현\r\n\r\n* fix(Payments): 하단 버튼 고정 안되는 버그 수정\r\n\r\n* feat: 비밀번호와 cvc 구현\r\n\r\n* delete:matchCardIssuer 삭제\r\n\r\n* fix:Date.getMonth로 인한 오류 수정\r\n\r\n* fix(CardPreview): 이름이 cardPreview를 넘어가던 오류 수정\r\n\r\n* fix(CardPreview): 이름이 cardPreview를 넘어가던 오류 수정\r\n\r\n* feat: passwordInput 적용\r\n\r\n* feat: 키보드 조작 구현\r\n\r\n* feat: esc로 select 닫기 구현\r\n\r\n* refactor: 파일 페이지 별로 정리\r\n\r\n* fix: 이미지 경로 수정\r\n\r\n* feat: cvc 입력 뒷면 구현\r\n\r\n* feat: hashRouter 사용\r\n\r\n* feat: 반응형 추가\r\n\r\n* feat(App.tsx): 기본 주소 설정\r\n\r\n* refactor: Path 타임 선언 변경\r\n\r\n* feat: wasChanged 변경\r\n\r\n* feat(App.tsx): 추상화 단계 동일화\r\n\r\n* refactor(payments): 상수 사용\r\n\r\n* fix(App.tsx): defaultRoute 복구\r\n\r\n* feat:useRefs 구현 및 사용\r\n\r\n* refactor(useHTMLRefs): 파일 이름 변경\r\n\r\n---------\r\n\r\nCo-authored-by: hain-tain \r\nCo-authored-by: ss0526100 ","shortMessageHtmlLink":"[2단계 - 페이먼츠] 소파(차승하) 미션 제출합니다. (#398)"}},{"before":"81de8102f1bfc70ef6341b0dbbfdeae4f6ca4450","after":"34c427ff5f2e8741d1ec3c99f326d016fdb0f7e9","ref":"refs/heads/pp449","pushedAt":"2024-04-30T17:24:52.000Z","pushType":"pr_merge","commitsCount":1,"pusher":{"login":"JeongBin0227","name":null,"path":"/JeongBin0227","primaryAvatarUrl":"https://avatars.githubusercontent.com/u/45503248?s=80&v=4"},"commit":{"message":"[2단계 - 페이먼츠] - 다르(이상엽) 미션 제출합니다. (#385)\n\n* refactor(storybook): 스토리북 컴포넌트를 카테고리 별 그룹화\r\n\r\n* fix(useInput): 버블링되는 이벤트는 동작하지 않도록 수정\r\n\r\n* feat(useSelect): Select 에 사용되는 훅 추가\r\n\r\n* feat(constants): 상수 정의 추가\r\n- 신용카드 종류 상수 추가\r\n- 카드사 선택 관련 메시지 상수 추가\r\n\r\n* feat(SelectBox): 셀렉트 컴포넌트 구현\r\n\r\n* feat(storybook): 스토리북 디자인 추가 및 SelectBox 스토리북 추가\r\n- 스토리북 preview 의 해상도 크기 확대\r\n\r\n* fix: map 으로 만드는 컴포넌트의 key 값 추가\r\n- InputCreditCardNumber\r\n- InputExpirationPeriod\r\n\r\n* feat(constants): 폼 메시지 및 input 에 쓰이는 값 상수 추가\r\n\r\n* feat(InputCVC): cvc 번호 입력하는 컴포넌트 추가\r\n\r\n* feat(InputPassword): 패스워드 입력하는 컴포넌트 추가\r\n\r\n* feat(Validator): CVC, Password 입력의 에러 및 유효성 검증 로직 추가\r\n\r\n* feat(constants): 인풋 별 최대 입력 개수 상수 정의 및 오타 수정\r\n\r\n* feat(types/CreditCard): 신용카드 데이터 타입 추가\r\n\r\n* feat(useInput): 입력이 완료되었는지에 대한 상태 추가\r\n\r\n* feat(Validator): 입력값이 모두 완료되었는지 확인하는 validator 추가\r\n\r\n* feat(Payments): 각 입력이 완료되면 다음 컴포넌트가 동적으로 렌더링되도록 추가\r\n\r\n* feat(constants): 카드별 색상코드 상수로 정의\r\n\r\n* feat(creditCard): 선택한 카드 종류별 preview Card 의 배경색 변경 기능 추가\r\n\r\n* fix(constants/cardInputLength): cvc 입력 개수가 2개에서 3개로 수정\r\n\r\n* refactor(creditCard): 신용카드 preview 뒷면 추가에 따른 폴더 구조 변경\r\n/components/creditCard -> /components/creditCard/front 로 변경\r\n\r\n* refactor(useInput): 이름을 대문자로 보여주는 처리를 useInput 이 아닌 CreditCardInfo 에서 처리하도록 변경\r\n\r\n* feat(CreditCardBack): preview 카드 뒷면 컴포넌트 추가\r\n\r\n* feat(Payments): CVC 입력 시 카드 preview 뒷면이 보이도록 추가\r\n\r\n* feat: 정해진 길이만큼 입력이 되면 다음 입력에 포커싱이 되도록 추가\r\n\r\n* fix(InputBox): 입력 에러 발생 시 모든 input border 가 빨간색으로 변경되도록 수정\r\n\r\n* feat(normalizeValue): 입력받은 값을 원하는 값으로 변경하는 유틸함수 추가\r\n- 월 입력 시 1 ~ 9 사이의 값만 입력하면 01 ~ 09 값으로 반환\r\n\r\n* feat(useInput): 블러 이벤트 추가\r\n- 입력받은 값을 특정한 포멧팅으로 변경하는 작업\r\n- 에러가 발생하는지 확인\r\n\r\n* feat: 모든 입력 이벤트에 블러 이벤트 추가\r\n\r\n* feat(cardRegistration): 카드 등록하는 페이지 폴더명 변경 및 blur 이벤트 props 전달 추가\r\n\r\n* feat(button): 버튼 컴포넌트 추가\r\n\r\n* chore: 라이브러리 설치\r\n\r\n* feat(CardRegistration): 카드 등록 페이지 파일명 변경 및 제출 버튼 추가\r\n\r\n* feat(CheckBox): 체크박스 컴포넌트 추가\r\n\r\n* feat(SuccessRegistration): 등록 성공 시 보이는 페이지 추가\r\n\r\n* feat(Router): pathname 별 렌더링 페이지 추가\r\n\r\n* feat(storybook): 스토리북 추가된 handleBlur arg 추가 및 Button 컴포넌트 스토리북 구현\r\n\r\n* refactor: 색상 코드를 상수로 일괄 처리\r\n\r\n* refactor: useInput 훅 세분화\r\n- useInput: 모든 Input 컴포넌트에서 사용할 수 있는 훅\r\n- useFormInput: Input 컴포넌트에서 정의된 에러 핸들링을 처리할 수 있는 훅\r\n- useFormInputBlur: Input 컴포넌트에서 정의된 에러 및 blur 이벤트까지 처리할 수 있는 훅\r\n\r\n* feat(isInputComplete): 모든 입력이 완료되었는지 확인하는 기능 추가\r\n\r\n* refactor(CardRegistration): 변경된 훅을 사용하도록 리팩토링\r\n\r\n* refactor(CardRegistration): 카드 뒷면을 보여줄지 확인하는 상태 변수명 변경\r\n\r\n* fix(useFormInputBlur): set 함수 호출을 잘못하던 문제 해결\r\n\r\n* refactor(CardRegistration): 커스텀 훅의 초기값을 상수로 처리하도록 리팩토링\r\n\r\n* chore(useInput): 초기값 인자값의 optional 제거\r\n\r\n* refactor(CardRegistration): 카드 프리뷰 렌더링 컴포넌트 분리\r\n\r\n* feat(Icon): Check 아이콘 뿐만 아닌 공통적으로 아이콘을 사용할 수 있는 컴포넌트 제작\r\n\r\n* refactor: Input 컴포넌트에서 Id 값을 외부에서 주입하도록 리팩토링","shortMessageHtmlLink":"[2단계 - 페이먼츠] - 다르(이상엽) 미션 제출합니다. (#385)"}},{"before":"6e18bfbe72bcdc710f8861a605d81efacdd3ff9e","after":"8adaccebb943ff9a375fe975664b1666344ef4db","ref":"refs/heads/greetings1012","pushedAt":"2024-04-30T16:11:42.000Z","pushType":"pr_merge","commitsCount":1,"pusher":{"login":"Tanney-102","name":"Tigger","path":"/Tanney-102","primaryAvatarUrl":"https://avatars.githubusercontent.com/u/57767891?s=80&v=4"},"commit":{"message":"[2단계 - 페이먼츠] - 파란(안영훈) 미션 제출합니다. (#374)\n\n* chore: eslint, prettier 기본 설정\r\n\r\nCo-authored-by: Pakxe \r\n\r\n* docs: 기능 요구 사항 정리\r\n\r\n* docs: 기능 요구 사항 타이틀 추가\r\n\r\n* docs: 컴포넌트 설계 사항 작성\r\n\r\n* chore: eslint 및 prettier 재설정\r\n\r\n* feat: 각 입력 폼을 가지고 있는 Form 컴포넌트 구현\r\n\r\n* feat: ShelfHeader 구현\r\n\r\n* feat: Input 공통 컴포넌트 구현\r\n\r\n* feat: CardNumbersInputField 구현\r\n\r\n* feat: CardExpirationDateInputField 구현\r\n\r\n* feat: CardOwnerNameInputField 구현\r\n\r\n* feat: App 구현\r\n\r\n* feat: placeholder 상수로 선언\r\n\r\n* feat: Card 구현\r\n\r\n* feat: 각 Input에 제한사항(입력 길이 등) 구현\r\n\r\n* feat: Card에 입력 항목 표시 구현\r\n\r\n* docs: 구현 사항 업데이트\r\n\r\n* feat: 카드 번호 입력 시 에러 핸들링 구현\r\n\r\n* feat: Card에 카드 번호가 나타나도록 구현\r\n\r\n* refactor: date 형식 string[]에서 Record<>로 변경\r\n\r\n* feat: date 형식 및 image 링크 상수로 선언\r\n\r\n* refactor: 수정된 date 형식에 맞게 선언 수정\r\n\r\n* feat: 카드 번호 입력 에러 핸들링 구현\r\n\r\n* feat: 에러 발생 시 테두리 색상 빨간색으로 바뀌는 기능 구현\r\n\r\n* feat: 카드 소유자 이름 에러 핸들링 구현\r\n\r\n* docs: 구현 사항 기능 명세에 반영\r\n\r\n* bug: 연/월 입력 에러 핸들링 수정중\r\n\r\n* feat: 비밀번호 가리는 기호 이미지 상수화\r\n\r\n* design: App 컴포넌트 css 디자인\r\n\r\n* feat: ShelfHeader 구현, 디자인 적용\r\n\r\n* feat: Input 구현, 디자인 적용\r\n\r\n* feat: CardExpirationDateInputField 구현\r\n\r\n* feat: Card 구현 및 디자인 적용\r\n\r\n* feat: Form 구현 및 디자인 적용\r\n\r\n* design: CardNumbersInput 디자인 적용\r\n\r\n* design: CardOwnerNameInputField 디자인 적용\r\n\r\n* design: global.module.css 디자인 구현\r\n\r\n* refactor: 컴포넌트 폴더 정리 및 재분류\r\n\r\n* feat: Card 스토리북 구현\r\n\r\n* refactor: Card 스토리북 데이터 수정\r\n\r\n* feat: storybook 배포를 위해 chromatic 설치\r\n\r\n* storybook: 정적 스토리북 빌드\r\n\r\n* storybook: App 컴포넌트 스토리북 작성\r\n\r\n* storybook: Input 컴포넌트 스토리북 작성\r\n\r\n* storybook: 정적 스토리북 빌드\r\n\r\n* feat: 배포를 위한 gh-pages 설치\r\n\r\n* feat: 타입 오류 해결\r\n\r\n* docs: 기능 명세 업데이트\r\n\r\n* feat: 배포 설정\r\n\r\n* fix: 배포 시 사진이 보이지 않던 오류 해결\r\n\r\n* refactor: 배열 생성을 함수로 선언하여 배열이 계속 생성되는 문제 해결\r\n\r\n* refactor: 카드 종류 판별 메서드 utils로 분리\r\n\r\n* refactor: isFocus를 css 내장 문법으로 교체\r\n\r\n* refactor: filterEnglish, normalizeSpaces 유틸 함수로 분리\r\n\r\n* refactor: 각 event에 맞는 타입 지정\r\n\r\n* refactor: children에 형식 선언\r\n\r\n* refactor: ShelfSection 분리해서 선언\r\n\r\n* style: ShelfSection 분리로 인한 css 분리\r\n\r\n* refactor: 에러 인덱스와 메시지 interface로 선언, 메서드 동작 가독성을 위해 변수명 변경\r\n\r\n* refactor: 각 에러 interface로 선언해 코드 가독성 및 메서드 개선\r\n\r\n* docs: step 2 기능 요구 사항 추가\r\n\r\n* feat: 버튼 컴포넌트 생성\r\n\r\n* feat: 카드 번호를 모두 입력하면 확인 버튼이 등장하는 기능 구현\r\n\r\n* rename: 페이지 추가로 인한 컴포넌트 이름 변경\r\n\r\n* feat: router를 사용하여 페이지네이션 구현\r\n\r\n* feat: 카드 회사 선택 드롭다운 구현\r\n\r\n* feat: 페이지네이션을 이용해 결과 페이지와 카드 정보 입력 페이지 전환 구현\r\n\r\n* refactor: 사용하지 않는 import 제거\r\n\r\n* refactor: 에러 메시지 칸은 에러 여부와 상관없이 항상 있도록 수정\r\n\r\n* feat: CardPasswordInput구현\r\n\r\n* feat: CardCVCInputField 구현\r\n\r\n* feat: 각 form에서 자신이 완료된 상태를 상위로 전달하도록 구현\r\n\r\n* fix: 폴더 이름에 잘못된 공백이 들어있던 오류 수정\r\n\r\n* feat: 카드사 선택에 따라 카드 색상이 바뀌도록 구현\r\n\r\n* style: 카드 추가 완료 페이지 css 작성\r\n\r\n* feat: 각 폼을 완성할 때마다 다음 폼이 등장하는 기능 구현\r\n\r\n* fix: 사용하지 않는 선언 제거\r\n\r\n* style: 카카오뱅크는 완료 화면에서 '카드' 문자가 추가되어 등장하도록 수정\r\n\r\n* feat: input이 여러개인 form에서 앞의 input을 입력하면 자동으로 뒤의 input으로 focus가 넘어가도록 구현\r\n\r\n* feat: 폼 완료 시 포커스 이동 기능 구현\r\n\r\n* style: 디자인 수정 및 안내 문구 추가\r\n\r\n* feat: CVC 표현을 위해 카드 뒷면 컴포넌트 구현\r\n\r\n* feat: useState를 통해 카드 뒷면 보여주는 조건 구현\r\n\r\n* storybook: 각 컴포넌트 스토리보드 구현\r\n\r\n* refactor: 주석 제거\r\n\r\n* refactor: 필요없는 base 도메인 제거\r\n\r\n* docs: 구현된 항목 README.md에 반영\r\n\r\n* storybook: 스토리북 빌드\r\n\r\n* refactor(SubmitButton): 컴포넌트 렌더 여부를 부모 컴포넌트에서 관리하도록 수정\r\n\r\n* refactor(CardLogo): 카드 로고 컴포넌트로 분리\r\n\r\n* refactor: 필요 없는 스타일 제거\r\n\r\n* refactor: window에 직접 eventListener 추가하던 메서드 수정\r\n\r\n* refactor: 필요없는 Button 컴포넌트 삭제\r\n\r\n* refactor: nextSibling이 input인지 검증하는 로직 추가\r\n\r\n* refactor: 명확하지 않은 변수명 수정\r\n\r\n* refactor: 배열로 관리하던 state 객체로 변환\r\n\r\n---------\r\n\r\nCo-authored-by: Pakxe ","shortMessageHtmlLink":"[2단계 - 페이먼츠] - 파란(안영훈) 미션 제출합니다. (#374)"}},{"before":"28140ed5b707288e4e6b2732c526a11d75d3931b","after":"47dd2c41946a9c8b8ac467500798edad3bca58ee","ref":"refs/heads/pakxe","pushedAt":"2024-04-30T15:04:32.000Z","pushType":"pr_merge","commitsCount":1,"pusher":{"login":"uk960214","name":"Yo Wook Kim","path":"/uk960214","primaryAvatarUrl":"https://avatars.githubusercontent.com/u/43166681?s=80&v=4"},"commit":{"message":"[2단계 - 페이먼츠] - 웨디(박세현) 미션 제출합니다. (#380)\n\n* feat: App에 페이지 컴포넌트 넣기\r\n\r\n* style: 불필요한 css 분리\r\n\r\n* feat: 입력받은 문자열이 유효한 카드 회사 중 하나가 맞는지 확인하는 로직 구현\r\n\r\n* feat: 카드 회사 상태를 관리하기 위한 훅 구현\r\n\r\n* chore: 드롭다운 화살표 이미지 추가\r\n\r\n* style: 카드사 테마 색상 선언\r\n\r\n* feat: 카드 미리보기 컴포넌트의 뒷면 구현\r\n\r\n* rename: Card -> CardPreview로 이름 수정\r\n\r\n* feat: DropDown컴포넌트 구현\r\n\r\n* style: DropDown 컴포넌트의 css 작성\r\n\r\n* feat: Input이 ref를 받을 수 있도록 수정\r\n\r\n* feat: 카드사를 선택하는 필드 구현\r\n\r\n* feat: CVC번호를 입력하는 필드 구현\r\n\r\n* feat: 유효성 검사 로직 분리\r\n\r\n* feat: Date를 위한 타입 정의\r\n\r\n* feat: 카드사를 위한 타입 정의\r\n\r\n* feat: 특정 컴포넌트가 선택되었을 때 감지하기 위한 focus context, provider 구현\r\n\r\n* feat: 새 카드를 추가하는 페이지 구현\r\n\r\n* storybook: 새 카드를 등록하는 페이지의 스토리 작성\r\n\r\n* feat: 어떤 항목을 보여줄지 관리하는 쇼케이스 훅 구현\r\n\r\n* feat: 이름 입력을 위한 훅 구현\r\n\r\n* feat: 제한된 길이의 숫자만 입력받는 훅 구현\r\n\r\n* feat: 만료 날짜를 입력받는 훅 구현\r\n\r\n* feat: 드롭다운의 값을 위한 훅 구현\r\n\r\n* feat: 카드 번호를 입력받는 훅 구현\r\n\r\n* feat: 카드사의 기본값을 ''에서 null로 수정\r\n\r\n* feat: 새 카드 추가 페이지에서 사용하는 input들을 관리하는 훅 구현\r\n\r\n* feat: 최소 이름 길이 등 상수 추가\r\n\r\n* feat: 숫자 입력에 대한 길이 안내 문구 등 추가\r\n\r\n* feat: 새 카드 입력창에 필요한 input목록들 상수화\r\n\r\n* feat: 하나의 shelf영역을 위한 컴포넌트 구현\r\n\r\n* style: ShelfSection css 작성\r\n\r\n* feat: 비밀번호를 입력받는 필드 구현\r\n\r\n* feat: 이름에 대한 유효성 검사 로직 분리\r\n\r\n* feat: 카드 번호에 대한 유효성 검사 로직 분리\r\n\r\n* feat: enter를 눌러 다음 입력으로 넘어갈 수 있도록 구현\r\n\r\n* style: BottomButton의 css 작성\r\n\r\n* feat: DropDown 컴포넌트에 타입 추가\r\n\r\n* feat: 선택되는 값이 null일 수도 있으므로 이를 타입에 추가\r\n\r\n* feat: 처음 input 창이 떴을 때 포커스가 가도록 구현\r\n\r\n* fix: 오류가 났음에도 불구하고 valid한 값이라고 평가되는 부분을 수정\r\n\r\n* fix: 오류가 났음에도 불구하고 valid한 값으로 추정되는 부분 수정\r\n\r\n* feat: 카드사 이름 매치 객체에 타입 명시\r\n\r\n* feat: 모든 항목이 유효하다면 다음으로 진행할 수 있는 버튼을 표시하도록 구현\r\n\r\n* feat: 이름의 경우 엔터를 눌러 다음으로 진행할 수 있도록 수정\r\n\r\n* feat: null값이 들어올 수 있음을 표시\r\n\r\n* fix: 이름 입력이 완료된 후에도 안내 메세지가 계속 떠있는 오류를 수정\r\n\r\n* feat: 하단의 폭 전부를 차지하는 버튼 컴포넌트 구현\r\n\r\n* style: 무언가 확인이 완료된 버튼 스타일인 confirm 타입 css작성\r\n\r\n* chore: 불필요한 import 제거\r\n\r\n* feat: state를 reset하는 로직 구현\r\n\r\n* feat: 페이지 라우트 연결\r\n\r\n* feat: 버튼의 기본 attr들을 수용하도록 수정\r\n\r\n* style: 버튼때문에 가려지는 영역을위한 패딩과 안내 메세지 css 추가\r\n\r\n* chore: 작성 완료 페이지에 띄울 이미지 추가\r\n\r\n* style: Button css 작성\r\n\r\n* style: DropDown이 전체 width를 차지하도록 추가\r\n\r\n* feat: DropDown이 전체 width를 차지하도록 감싸주기\r\n\r\n* feat: 타입 작성\r\n\r\n* style: Form css 작성\r\n\r\n* width: 전체 폭을 차지하도록 width 추가\r\n\r\n* chore: 파일 위치 수정\r\n\r\n* feat: 카드 작성 완료 페이지 구현\r\n\r\n* style: 카드 작성 완료 페이지 css 작성\r\n\r\n* chore: TODO 주석 추가\r\n\r\n* storybook: 카드 작성 완료 페이지 스토리 작성\r\n\r\n* feat: 버튼의 타입과 사이즈 타입 작성\r\n\r\n* feat: 입력이 유효한 카드사 이름인지 검증하는 함수 구현\r\n\r\n* chore: 패키지 파일 수정\r\n\r\n* feat: 잘못된 접근일 경우 안내하도록 구현\r\n\r\n* feat: 잘못된 접근임을 알리는 메세지 추가\r\n\r\n* storybook: 불필요한 스토리 제거\r\n\r\n* chore: 불필요한 import 제거\r\n\r\n* feat: useState의 타입 재설정\r\n\r\n* chore: 의존성 재설치\r\n\r\n* chore: 의존성 재설치\r\n\r\n* fix: 오류나는 의존성 optional로 올림\r\n\r\n* chore: 메인 페이지 경로 수정\r\n\r\n* chore: 불필요한 주석 제거\r\n\r\n* chore: 불필요한 주석 제거\r\n\r\n* chore: 불필요한 주석 제거\r\n\r\n* refactor: classnames 라이브러리를 적용해 코드 리펙터링\r\n\r\n* feat: 배열로 ref를 관리하던 부분을 단일 ref로 수정\r\n\r\n* chore: 불필요한 주석 제거\r\n\r\n* refactor: 카드 타입을 src에 넣어서 동적으로 불러올 수 있도록 수정\r\n\r\n* feat: 해당 hex 컬러에 적절한 inner content색을 반환해주는 함수 구현\r\n\r\n* feat: 카드의 배경 색에 맞는 inner content 색을 반환해주는 함수 구현\r\n\r\n* feat: 카드의 타입을 파스칼 케이스로 변경\r\n\r\n* feat: 카드의 inner content 색상을 동적으로 선택하도록 변경\r\n\r\n* style: 하드 코딩된 css 제거\r\n\r\n* style: inner content에 대한 css 작성\r\n\r\n* chore: 이미지 파일 public폴더로 이동\r\n\r\n* feat: 불필요한 분기문 제거\r\n\r\n* feat: useShowCase 안에서 값의 변화를 파악해 쇼케이스를 세팅하도록 수정\r\n\r\n* refactor: 자주 사용되는 값을 객체분해할당으로 분해해 사용\r\n\r\n* feat: useAddNewCardForm 삭제\r\n\r\n* refactor: 유사한 형태로 훅을 사용할 수 있도록 수정\r\n\r\n* fix: cardCompany가 유효한지 검중하는 비교문을 잘못 사용한 부분 수정\r\n\r\n* feat: 유효한 길이의 BIN번호가 입력되었을 때만 카드 로고 컴포넌트를 렌더링하도록 최적화\r\n\r\n* feat: 2길이가 완성되었을 때만 카드 로고를 띄우도록 수정\r\n\r\n* feat: 불필요한 memo 함수 제거\r\n\r\n* chore: js를 사용할 수 있도록 수정\r\n\r\n* chore: classnames 라이브러리 설치\r\n\r\n* chore: 불필요한 TODO 주석 제거\r\n\r\n* fix: 올바른 state를 넘겨주지 않던 부분을 수정\r\n\r\n* chore: 불필요한 콘솔로그 제거","shortMessageHtmlLink":"[2단계 - 페이먼츠] - 웨디(박세현) 미션 제출합니다. (#380)"}},{"before":"23647108f56c21c95cac570ca91cc507a74dde6d","after":"bb252b332f9cb67200f382a9065bbe56142b781a","ref":"refs/heads/healim01","pushedAt":"2024-04-30T14:16:35.000Z","pushType":"pr_merge","commitsCount":1,"pusher":{"login":"uk960214","name":"Yo Wook Kim","path":"/uk960214","primaryAvatarUrl":"https://avatars.githubusercontent.com/u/43166681?s=80&v=4"},"commit":{"message":"[2단계 - 페이먼츠] - 헤일리(최혜림) 미션 제출합니다. (#378)\n\n* docs: step2 기능 명세서\r\n\r\n* style: FieldContainer 공통 컴포넌트로 분리\r\n\r\n* feat: Select CardCompany 컴포넌트 생성\r\n\r\n* feat: 카드 회사별 컴포넌트 색상 변경\r\n\r\n* feat: cvc, password 컴포넌트 생성\r\n\r\n* style: 레이아웃 height 설정\r\n\r\n* feat: 카드 뒤면 컴포넌트 생성\r\n\r\n* chore: common -> container 로 파일 이름 변경\r\n\r\n* feat: router 세팅\r\n\r\n* feat: router link 연결\r\n\r\n* chore: 체크 assets 추가\r\n\r\n* chore: styled components 폴더 이동\r\n\r\n* feat: 카드 등록 확인 버튼\r\n\r\n* feat: 카드 앞뒤면 변환\r\n\r\n* feat: 필드내 입력창 자동 포커스 이동 작업\r\n\r\n* feat: 타입 충족 아닐 시 입력 막기\r\n\r\n* feat: 엔터치면 다음 폼으로 이동\r\n\r\n* feat: 커스텀훅 사용\r\n\r\n* refactor: selected -> default value 로 변경\r\n\r\n* feat: 카드사 선택 onChange 등록\r\n\r\n* feat: 폼 확인 벨리데이션\r\n\r\n* chore: tag p -> div 변경\r\n\r\n* chore: tag div -> span 으로 변경\r\n\r\n* style: center 중심잡기\r\n\r\n* feat: cvc 파트 때만 뒤면 보여주기\r\n\r\n* feat: validation 모두 통과시 확인 버튼 보여주기\r\n\r\n* feat: input 커스텀 훅 분리\r\n\r\n* feat: useInputField 커스텀 훅 분리\r\n\r\n* refactor: formatDate 을 utils 로 분리\r\n\r\n* chore: error 변수 이름 변경\r\n\r\n* feat: step 커스텀 훅 제작\r\n\r\n* feat: step 이동 props 추가\r\n\r\n* chore: 디폴트 boolean 추가\r\n\r\n* refactor: 길이 판별 벨리데이션 추가\r\n\r\n* chore: constants 추가\r\n\r\n* chore: constant 로 분리\r\n\r\n* refactor: step 커스텀 훅과 분리\r\n\r\n* feat: useNextRef 커스텀 훅 생성\r\n\r\n* refactor: 유효기간 벨리데이션 체크\r\n\r\n* chore: 불필요한 코드 삭제\r\n\r\n* feat: 카드 판별 퍼포먼스 개선\r\n\r\n* test: storybook 추가 및 수정\r\n\r\n* build: dist 배포\r\n\r\n* build: 웹 배포\r\n\r\n* build: 웹 배포\r\n\r\n* buil: 웹 배포\r\n\r\n* style: 카드 애니메이션 추가\r\n\r\n* build: 스토리북 크로마틱 배포\r\n\r\n* chore: base url 복구\r\n\r\n* refactor: React Fragment 제거\r\n\r\n* feat: 카드 브랜드 식별 로직 메모이제이션\r\n\r\n* refactor: 삼항 연산자로 수정\r\n\r\n* refactor: 자동 필터링 $ 프리픽스 추가\r\n\r\n* refactor: isCompleted 메서드 수정\r\n\r\n* refactor: 자주 사용하는 변수 선언\r\n\r\n* refactor: useInput 커스텀 훅 관심사 분리\r\n\r\n* refactor: 핸들러 이름 변경\r\n\r\n* refactor: 불필요한 css 지우기\r\n\r\n* refactor: 커스텀 훅 수정\r\n\r\n* chore: dist 추가\r\n\r\n* refactor: default value props 로 전달\r\n\r\n* chore: handleSubmit -> setCanSubmit 으로 수정\r\n\r\n* refactor: 함수 이동","shortMessageHtmlLink":"[2단계 - 페이먼츠] - 헤일리(최혜림) 미션 제출합니다. (#378)"}},{"before":"b617bd3c893bdc0174b00786639c6e7c30a7d831","after":"91adf9a3fb3a6767d17e5a8a67cf6dd6663bd9ed","ref":"refs/heads/00kang","pushedAt":"2024-04-30T11:28:19.000Z","pushType":"pr_merge","commitsCount":1,"pusher":{"login":"iborymagic","name":"An Hyun Cheol","path":"/iborymagic","primaryAvatarUrl":"https://avatars.githubusercontent.com/u/42052110?s=80&v=4"},"commit":{"message":"[2단계 - 페이먼츠] - 초코(강다빈) 미션 제출합니다. (#405)\n\n* 테스트커밋\r\n\r\n* 테스트커밋2\r\n\r\nCo-Authored-By: Lee sang Yeop \r\n\r\n* docs : 피그마 기반 사용할 컴포넌트 설계\r\n\r\nCo-Authored-By: Lee sang Yeop \r\n\r\n* chore : emotion 라이브러리 설치\r\n\r\nCo-Authored-By: Lee sang Yeop \r\n\r\n* feat: CreditCardBrandLogo 컴포넌트 구현\r\n\r\nCo-Authored-By: Lee sang Yeop \r\n\r\n* refactor : creditCard type 파일 분리\r\n\r\n* feat : creditCard 정보 표시\r\n\r\n* refactor : CreditCard 컴포넌트의 인풋 type을 string으로 변환\r\n\r\n* feat : input을 입력받는 커스텀 훅 구현\r\n\r\n* fix : 배열로 생성되는 컴포넌트에 key 값 추가\r\n\r\n* feat : 재사용 가능한 InputBox 컴포넌트 구현\r\n\r\n* feat : 카드 소유자 이름 입력 기능 구현\r\n\r\n* feat : creditCard 입력 type 추가\r\n\r\n* style : InputBox 컴포넌트 스타일 구현\r\n\r\n* style : 카드 소유자 이름 입력 컴포넌트 스타일 추가\r\n\r\n* feat : 유효 기간 입력 컴포넌트 구현\r\n\r\n* feat : 카드 번호 입력 컴포넌트 구현\r\n\r\n* feat : 카드 번호 입력 컴포넌트 구현\r\n\r\nCo-Authored-By: Lee sang Yeop \r\n\r\n* style : 카드 컴포넌트 스타일 추가\r\n\r\nCo-Authored-By: Lee sang Yeop \r\n\r\n* feat : payments 페이지 구현\r\n\r\nCo-Authored-By: Lee sang Yeop \r\n\r\n* docs : 기능 요구 사항 업데이트\r\n\r\nCo-Authored-By: Lee sang Yeop \r\n\r\n* feat : 입력 값의 유효성 검사 진행\r\n\r\n- credit card 번호 확인 유효성 검사\r\n- credit card 유효기간 유효성 검사\r\n- credit card 소유자 이름 유효성 검사\r\n\r\nCo-Authored-By: Lee sang Yeop \r\n\r\n* feat : 유효성 검사에 따른 error 피드백 추가\r\n\r\nCo-Authored-By: Lee sang Yeop \r\n\r\n* style : credit card 정보의 섹션별 높이 지정\r\n\r\nCo-Authored-By: Lee sang Yeop \r\n\r\n* docs : README.md 업데이트\r\n\r\nCo-Authored-By: Lee sang Yeop \r\n\r\n* chore : prettier 세팅\r\n\r\nCo-Authored-By: Lee sang Yeop \r\n\r\n* chore : prettier width 수정\r\n\r\nCo-Authored-By: Lee sang Yeop \r\n\r\n* feat : cardFormType 상수화\r\n\r\nCo-Authored-By: Lee sang Yeop \r\n\r\n* feat : 부호 상수화\r\n\r\nCo-Authored-By: Lee sang Yeop \r\n\r\n* chore : card inputbox name 상수화\r\n\r\nCo-Authored-By: Lee sang Yeop \r\n\r\n* fix : Storybook 서버 오픈 에러 해결\r\n\r\n* refactor : TypeScript: Sort Imports 활용해서 import문 정렬\r\n\r\n* refactor : description이 없을 땐 margin-bottom 속성을 0으로 주기\r\n\r\n* refactor : CreditCardBrandLogo 함수에서 컴포넌트로 수정\r\n\r\n* refactor : inputError 네이밍 isInputError로 변경\r\n\r\n* refactor : inputWidthSize 파일 분리\r\n\r\n* refactor : description이 있을 땐 margin-bottom을 16px 주기\r\n\r\n* refactor : 여러 개의 InputBox가 하나의 레이블을 공유하니 aria-labelledby 속성 사용\r\n\r\n* refactor : CreditCardForm의 props drilling 해결\r\n\r\n- children prop\r\n- concatPeriod에서 formatExpirationPeriod으로 네이밍 변경\r\n\r\n* style : 줄바꿈\r\n\r\n* fix : creditCard 컴포넌트 스타일링 조정\r\n\r\n* chore : eslint 및 prettier 설정\r\n\r\n* docs : step2 기능 요구 사항 정리\r\n\r\n* feat : dropdown 컴포넌트 구현\r\n\r\n* feat: 카드사 선택 폼 컴포넌트 구현\r\n\r\n- 드롭다운 오픈후 카드사 선택하지 않으면 에러 발생\r\n- 선택된 카드사에 따라 카드 배경색 전환\r\n\r\n* feat : 카드 CVC 번호 입력 컴포넌트 구현\r\n\r\n* feat : 카드 CVC 번호 유효성 검사 추가\r\n\r\n* feat : creditCard 뒷면 컴포넌트 구현\r\n\r\n* feat : 입력받은 카드 cvc 번호 CreditCardBack 컴포넌트에 반영하기\r\n\r\n* feat : 카드 비밀번호 입력 컴포넌트 구현\r\n\r\n* refactor : 미리보기 카드의 카드번호 . 으로 마스킹 기능 수정\r\n\r\n* feat : 버튼 컴포넌트 구현\r\n\r\n* feat : 카드 등록 완료 페이지 구현\r\n\r\n* chore : react-router-dom 패키지 설치\r\n\r\n* feat : Payments 페이지에 버튼 컴포넌트 등록\r\n\r\n* feat : react-router를 활용한 페이지 관리\r\n\r\n* refactor : 버튼 컴포넌트 파일 경로 변경\r\n\r\n* refactor : GlobalStyle 파일명 수정\r\n\r\n* refactor : 파일 디렉토리 위치 변경\r\n\r\n* feat : 버튼 스타일 속성 추가\r\n\r\n* feat : router path 상수화\r\n\r\n* feat : 폼에 입력한 카드정보를 PaymentsSuccess 에 보여주기\r\n\r\n* style : 버튼컴포넌트 스타일링\r\n\r\n* feat : 유효성 검사 로직 수정\r\n\r\n- 숫자인지 체크하는 checkIsDigit 메서드\r\n\r\n* feat : password 입력 마스킹 구현\r\n\r\n* feat : Payments 컴포넌트 파일 분리\r\n\r\n---------\r\n\r\nCo-authored-by: Lee sang Yeop ","shortMessageHtmlLink":"[2단계 - 페이먼츠] - 초코(강다빈) 미션 제출합니다. (#405)"}},{"before":"9729ee09198c06723f47502e96fbc99e52a7ac88","after":"e3b040ad85bc537dacb4b6ee188a004a20685deb","ref":"refs/heads/dle234","pushedAt":"2024-04-30T08:59:56.000Z","pushType":"pr_merge","commitsCount":1,"pusher":{"login":"iborymagic","name":"An Hyun Cheol","path":"/iborymagic","primaryAvatarUrl":"https://avatars.githubusercontent.com/u/42052110?s=80&v=4"},"commit":{"message":"[2단계 - 페이먼츠] 해시(김가연) 미션 제출합니다. (#396)\n\n* feat(Select): 카드사 selector 기능 구현\r\n\r\n* feat(CardCVCInput): cvc 입력 구현\r\n\r\n* feat(CardPassword): 카드 비밀번호 입력 구현\r\n\r\n* feat: 카드 입력 Input 동적 생성 구현\r\n\r\n* feat(NavigateButton): 모든 유효성 검사 성공 시 버튼 생성\r\n\r\n* feat(CompleteSubmitFormPage): 버튼 클릭 시 완료 페이지로 이동 기능 구현\r\n\r\n* refactor: useInput 네이밍 수정\r\n\r\n* test: 카드 뒷면, 카드 제출폼, 버튼 컴포넌트 스토리 추기\r\n\r\n* test: 스토리 args 수정\r\n\r\n* refactor: useShow 함수 분리\r\n\r\n* fix: browserRouter 경로 추가\r\n\r\n* fix: vite 환경변수 설정","shortMessageHtmlLink":"[2단계 - 페이먼츠] 해시(김가연) 미션 제출합니다. (#396)"}},{"before":"ffb2d2c46ae96656a732b574e4902c783446182e","after":"2cc7d15a5fef59c64baeffefd0d717e575c2f2a6","ref":"refs/heads/soi-ha","pushedAt":"2024-04-30T06:14:21.000Z","pushType":"pr_merge","commitsCount":1,"pusher":{"login":"JeongBin0227","name":null,"path":"/JeongBin0227","primaryAvatarUrl":"https://avatars.githubusercontent.com/u/45503248?s=80&v=4"},"commit":{"message":"[2단계 - 페이먼츠] 소하(최소연) 미션 제출합니다. (#389)\n\n* refactor: 카드 유효기간 유효성 검사 함수 분리\r\n\r\n* feat: CardCompanyFormSection 구현 및 PaymentsSelectField 컴포넌트 생성\r\n\r\n* feat: CVCFormSection 컴포넌트 구현\r\n\r\n* feat: 입력 값이 없을 시, 에러 발생 기능 추가\r\n\r\n* test: CVCFormSection 스토리북\r\n\r\n* feat: PasswordFormSection 컴포넌트 생성 및 PaymentsInputField type 속성 추가\r\n\r\n* test: PasswordFormSection 스토리북 추가\r\n\r\n* feat: Button 컴포넌트 생성 및 스토리북\r\n\r\n* feat: useSelect 구현\r\n\r\n* feat: CardCompanyFormSelection 컴포넌트 생성\r\n\r\n* feat: CardPreview에 CardCompany 추가하기\r\n\r\n* feat: CVCFormSection 컴포넌트 value값 변경 로직 추가\r\n\r\n* feat: PasswrodFormSection 컴포넌트 value 값 변경 로직 추가\r\n\r\n* refactor: 불필요한 코드 삭제\r\n\r\n* fix: storybook 미 입력된 props 작성\r\n\r\n* feat: input 오토 포커싱 기능 추가\r\n\r\n* design: 카드 뒷면 카드사 색상에 맞춰 변경 및 CVC 색상 변경\r\n\r\n* feat: 모든 입력 값이 유효할 경우 다음 formSection 화면에 렌더링\r\n\r\n* feat: 모든 formSection을 올바르게 입력했을 시, 확인 버튼 활성화\r\n\r\n* test: storybook 테스트 수정\r\n\r\n* feat: 확인 버튼 클릭시 페이지 이동 및 데이터 관리 useContext 사용으로 변경(react-router-dom)\r\n\r\nConfirmPage에서 CardInfo가 필요 했기 때문에 값을 전역에서 관리하고자 context 사용\r\n\r\n* fix: 입력값 앞에 문자열 넣어지는 에러 수정\r\n\r\n* refactor: 카드사 배열 constants 폴더로 이동\r\n\r\n* feat: enter키 누를시 유효성 검사 기능 추가\r\n\r\n* chore: password input에 placeholder 추가\r\n\r\n* feat: select 태그 onKeyDown 기능 추가\r\n\r\n* chore: page 파일의 스타일 파일 위치 변경\r\n\r\n* fix: storybook props 에러 해결\r\n\r\n* fix: bulid중 발생하는 타입 에러 수정\r\n\r\n* fix: 이전 변경 사항 되돌리기\r\n\r\n* refactor: initialzeInputFieldState 배열을 객체로 생성하는 코드 수정\r\n\r\n* refactor: 카드사 이름 출력 코드 명시적으로 수정\r\n\r\n* refactor: checkError 코드 간결하게 수정\r\n\r\n* refactor: useCardInfo의 changeCardInfo에 useCallback 사용하기\r\n\r\n* refactor: style 태그 변수 $ 추가\r\n\r\n* refactor: Button 컴포넌트 type props로 받기 (재활용을 위해)\r\n\r\n* refactor: 불필요한 중복 코드 삭제\r\n\r\n* refactor: 페이지 이동 Link에서 useNavigate로 변경\r\n\r\n* build: 배포를 위한 basename 추가\r\n\r\n* fix: click으로 blur시 유효성 검사 안되는 에러 해결","shortMessageHtmlLink":"[2단계 - 페이먼츠] 소하(최소연) 미션 제출합니다. (#389)"}},{"before":"ea512f0f6e2ee8c82af5ee977fc52c4c8da706ad","after":"5c0bdff451c2219ab0378d23c91292726bac9113","ref":"refs/heads/parkhanyoung","pushedAt":"2024-04-30T03:30:04.000Z","pushType":"pr_merge","commitsCount":1,"pusher":{"login":"JeongBin0227","name":null,"path":"/JeongBin0227","primaryAvatarUrl":"https://avatars.githubusercontent.com/u/45503248?s=80&v=4"},"commit":{"message":"[2단계 - 페이먼츠] - 라이언(박한영) 미션 제출합니다. (#387)\n\n* docs: 스텝 2 구현 사항 정리\r\n\r\n* chore(eslint): no-unused-vars를 warn으로 설정\r\n\r\n* feat(CVCInputContainer): 컴포넌트 구현\r\n\r\n* feat(CVCInputContainer): 컴포넌트 구현\r\n\r\n* feat(App): CVCInputContainer, PasswordInputContainer 추가\r\n\r\n* feat: CVC 입력 값에 대한 상태 관리 및 유효성 검증 기능을 추가\r\n\r\n* feat: 비밀번호 입력 값에 대한 상태 관리 및 유효성 검증 기능 추가\r\n\r\n* refactor: useInput을 도입하여 useCardholdeName, useCardNumbers, useExpiryDate ... 등의 커스텀 훅을 삭제\r\n\r\n* feat(useInput, useDisplayingErrorStatus): 유효성 검증을 실시간으로 수행하도록 하는 useInput 적용 / 보여주는 에러 상태는 blur 시에만 업데이트하도록 displayingErrorStatus 적용\r\n\r\n* refactor(validateExpiryYear): 함수명 수정\r\n\r\n* refactor(CardExpiryDate): useCardExpiryDate 분리\r\n\r\n* refactor: 불필요한 onBlur 함수 선언 제거\r\n\r\n* refactor(useDisplayErrorStatus): useEffect 내 로직 리팩토링\r\n\r\n* fix(useDisplayingErrorStatus): 잘못된 분기 처리 수정\r\n\r\n* chore: 유효성 검증 문구 통일성 있게 수정\r\n\r\n* refactor(useInput, useInputs): 실시간 유효성 검증을 useEffect가 아닌 onChange로 수행 / useInput 반환 값으로 onChange 추가\"\r\n\r\n* feat(SequenceContainer): 순서에 따라 동적으로 인풋을 렌더하는 기능 추가\r\n\r\n* refactor(useCardInfo): useCardInfo를 useCardInfoCompletionStatus와 useCardInfoInputs로 분리\r\n\r\n* refactor(CardInfoForm): App에서 CardInfoForm를 분리\r\n\r\n* feat(CardInfoForm): submit button 스타일링\r\n\r\n* feat: cardInfoForm 제출 버튼 클릭 시 라우팅 기능 추가\r\n\r\n* feat(CardRegisterCompletePage): 카드 등록 완료 페이지 라우팅 기능 추가:\r\n\r\n* feat: cvc 입력 시 카드가 뒤집히는 UI를 구현\r\n\r\n* chore(pages/common): 폴더명 대문자 제거\r\n\r\n* refactor(pages): Container style 변수명 수정\r\n\r\n* refactor(InputContainer): InputSection -> InputContainer 네이밍 통일\r\n\r\n* feat: 카드사 선택 기능 추가\r\n\r\n* refactor: validateCardType를 validator/index.ts에서 export 하도록 수정\r\n\r\n* feat(InputContainer): 내부 마진 관련 수정\r\n\r\n* refactor: 중복된 IInputControl 관련 인터페이스 선언을 제거\r\n\r\n* feat: 인풋 모두 입력 시 포커스 자동 이동 구현\r\n\r\n* chore: 가독성을 위해 import 문 순서 정렬\r\n\r\n* chore: 배포를 위한 경로 수정\r\n\r\n* chore(routePath): 기본 경로를 /으로 수정\r\n\r\n* chore: process.env.NODE_ENV를 상수로 대체\r\n\r\n* docs(REQUIREMENTS2): 구현 사항 체크\r\n\r\n* refactor(useFocusOnInitialRender): 불필요한 isRendered state 제거\r\n\r\n* refactor(styles): styled component를 일반 component와 구분짓기 위해 S 객체로 래핑\r\n\r\n* chore(routePath): BASE 경로 수정\r\n\r\n* refactor(CardInfoForm): completionFlags 선언 중복 제거\r\n\r\n* refactor: useFocusOnInitialRender를 autoFocus로 대체\r\n\r\n* refactor: displayingErrorStatus를 삭제하고, form 제출 여부를 판단하기 위한 실시간 검증을 별도로 수행하는 구조로 개선\r\n\r\n* refactor(CardExpiryDateInputContainer): 가독성 향상을 위한 함수 및 변수 네이밍 구체화\r\n\r\n* refactor(CardNumberInput): 가독성 향상을 위해 카드번호 인풋 생성 로직에서 함수 선언 추가\r\n\r\n* refactor(useCardInfoCompletionStatus): 불필요한 변수 선언을 제거\r\n\r\n* refactor: 컴포넌트 id를 고유하게 만들기(uuid 추가)\r\n+ 인덱스가 아닌 key를 이용하여 값 가져오기(cardNumbers[index] -> cardNumbers[key])\r\n\r\n* feat(cardInfoForm): 카드 정보 제출을 submit 이벤트를 핸들링하는 방식으로 수정\r\n\r\n* refactor(useCardInfoCompletetionStatus): 로직 중복 제거\r\n\r\n* chore(CardPreview.stories): CardType(카드사 유형) 및 isFront(앞뒷면 여부)를 테스트할 수 있도록 추가 구현\r\n\r\n* chore(select.stories): Select 스토리 추가\r\n\r\n* feat(CardExpiryDateInputContainer): 달 입력창에 한자리만 입력할 경우 자동 포맷팅 기능 추가\r\n\r\n* feat(CardPreview): 카드 프리뷰 앞 뒷면 전환 시 애니메이션 추가","shortMessageHtmlLink":"[2단계 - 페이먼츠] - 라이언(박한영) 미션 제출합니다. (#387)"}},{"before":"7526ae66508b8ad5264e9a705162c1395ae72580","after":"1ea759870020f3f7fbb88c92785a0c0079786d13","ref":"refs/heads/simorimi","pushedAt":"2024-04-30T02:10:56.000Z","pushType":"pr_merge","commitsCount":1,"pusher":{"login":"liswktjs","name":"JASUN LEE","path":"/liswktjs","primaryAvatarUrl":"https://avatars.githubusercontent.com/u/60773373?s=80&v=4"},"commit":{"message":"[2단계 - 페이먼츠] - 시모(심호림) 미션 제출합니다. (#379)\n\n* docs: 기능 목록 정리\r\n\r\nCo-authored-by: simorimi \r\n\r\n* chore: eslint, prettier 초기 설정\r\n\r\nCo-authored-by: simorimi \r\n\r\n* refactor: style component prefix Styled로 수정\r\n\r\n* refactor: type 네이밍 postfix에 type추가\r\n\r\n* refactor: 반복되는 타입들에 대한 수정 및 배열 메서드를 이용한 CardNumberInputs 수정\r\n\r\n* docd(README): step2 기능 요구사항 업데이트\r\n\r\n* feat(theme): dropdown 타입 및 typography 추가\r\n\r\n* design(Dropdown): dropdown UI 구현\r\n\r\n* feat(Dropdown): Dropdown component 구현\r\n\r\n* feat(useSelectedCardState): selectedCard 커스텀 훅 구현\r\n\r\n* feat(App): useSelectedCardState 추가\r\n\r\n* rename(CardInformationForm): prefix 수정\r\n\r\n* feat(Message): cardSelect 상수 추가\r\n\r\n* feat(CardInformationForm): cardSelect dropdown 기능 구현\r\n\r\n* feat(theme): card 색상 지정\r\n\r\n* design(CardInformationPreview): 카드 색상 동적 할당\r\n\r\n* feat(Condition): card 상수 추가\r\n\r\n* feat(CardInformationPreview): 카드색상 변경 기능 구현\r\n\r\n* feat(CardInformationForm): 카드 선택 기능 동적 생성 기능 구현\r\n\r\n* feat(CardInformationForm): form 동적 생성 기능 구현\r\n\r\n* design(CardInformationForm): 스크롤 버튼 디자인\r\n\r\n* feat(theme): charcoalGray 색상 추가\r\n\r\n* refactor: style component prefix 수정\r\n\r\n* refactor(CardInformationForm): 카드 정보 동적 생성시 앞 정보를 오류시 해당 단계로 돌아가도록 수정\r\n\r\n* design: position 위치 수정\r\n\r\n* refactor(App): styleComponent prefix 수정\r\n\r\n* design(CardInformationForm): 드랍다운 options 잘리는 문제 수정\r\n\r\n* feat(useCVC): 커스텀 훅 생성\r\n\r\n* feat(theme): cvc 테마 추가\r\n\r\n* refactor: cvc 상수 추가\r\n\r\n* feat(CardInformationForm): cvc 번호 입력 form 기능 구현\r\n\r\n* design(CardInformationPreview): 카드 뒷면 UI 구현\r\n\r\n* feat(CardInformationPreview): 카드 뒷면 UI 구현\r\n\r\n* docs(README): cvc 번호 입력 구현\r\n\r\n* feat(usePassword): 커스텀 훅 구현\r\n\r\n* feat: password 관련 상수 선언\r\n\r\n* feat(App): usePassword 추가\r\n\r\n* feat(CardInformationForm): password 입력 기능 구현\r\n\r\n* feat(theme): submitButton 테마 추가\r\n\r\n* design(CardInformationForm): submitButton UI 구현\r\n\r\n* design(App): position 수정\r\n\r\n* feat(CardInformationForm): submitButton 기능 구현\r\n\r\n* docs(README): 확인 버튼 업데이트\r\n\r\n* design(CardInformationForm): submitButton cursor: pointer 추가\r\n\r\n* feat(useInput): 입력이 유효할 때 다음 필드로 넘어가는 동적 입력 구현\r\n\r\n* feat(CardInformationForm): 동적 입력 UI 구현\r\n\r\n* docs(README): 동적 입력 UI 구현\r\n\r\n* design(style): 순서와 개행의 일관성을 위한 수정\r\n\r\n* rename(App): container 이름 수정\r\n\r\n* refactor(Button): button 컴포넌트화\r\n\r\n* design(button): button 컴포넌트화를 위한 수정\r\n\r\n* feat(Message): button 속성 추가\r\n\r\n* chore: react-router-dom 설치\r\n\r\n* design(Registration): 등록 페이지 컴포넌트 UI구현\r\n\r\n* feat(Registration): 등록 페이지 구현\r\n\r\n* feat(theme): button, phrase 속성 추가\r\n\r\n* chore(registration): 이미지 추가\r\n\r\n* feat(CardInformationForm): useNavigate 훅을 통한 페이지 이동 구현\r\n\r\n* feat(main): BrowserRouter 로 구조 수정\r\n\r\n* refactor(useInput): 불 필요한 import 제거\r\n\r\n* docs(README): 카드 등록 완료 및 네비게이션 업데이트\r\n\r\n* test(App): router로 인해 테스트 진행이 되지 않는 문제로 삭제\r\n\r\n* test(CVC): 스토리북 구현\r\n\r\n* test(Dropdonw): 스토리북 구현\r\n\r\n* test(Password): 스토리북 구현\r\n\r\n* test(SelectedCard): 스토리북 구현\r\n\r\n* test(preview): 스토리북 구현을 위한 리팩토링\r\n\r\n* chore(deploy): 배포를 위한 수정\r\n\r\n* refactor: 폼에서의 상수선언 커스텀 훅으로 이동\r\n\r\n* refactor: style component prefix 수정\r\n\r\n* refactor: 타입을 준수하기윈한 수정\r\n\r\n* refactor: 카드 정보 각 필드별 컴포넌트화\r\n\r\n* refactor: button 네이밍 수정 및 isSubmit props 추가\r\n\r\n* refactor: dropdown의 재사용성을 고려해 핸들러를 외부에서 넣어주도록 수정\r\n\r\n* refactor(CardInformationPreview): 과도한 if문 switch문으로 수정 및 불 필요한 condition 삭제\r\n\r\n* refactor(CardInformationPreview): cardColor state 추가 후 해당 로직 커스텀 훅 내로 이동\r\n\r\n* refactor(CardInformationPreview): Front, BackOfTheCard로 분리\r\n\r\n* refactor(UserName): 사용자 이름 입력 완료시 tap키를 이용하여 다음으로 넘어갈 수 있도록 수정\r\n\r\n* remove(Condition): 불필요한 카드사별 index 삭제\r\n\r\n* feat(useCardInformationAppearedCondition): 커스텀 훅 구현을 통한 form에 있는 로직 분리\r\n\r\n* test: props 변경에 맞게 수정\r\n\r\n---------\r\n\r\nCo-authored-by: 김진호 ","shortMessageHtmlLink":"[2단계 - 페이먼츠] - 시모(심호림) 미션 제출합니다. (#379)"}},{"before":"c99927cfa62ec3c440060cfa0d160fed1f35d697","after":"fa7e41dc61f2dae938f4c723d4cb74b54fb5c828","ref":"refs/heads/cys4585","pushedAt":"2024-04-30T01:21:31.000Z","pushType":"pr_merge","commitsCount":1,"pusher":{"login":"igy95","name":"Kyle","path":"/igy95","primaryAvatarUrl":"https://avatars.githubusercontent.com/u/57053577?s=80&v=4"},"commit":{"message":"[2단계 - 페이먼츠] 수야(최영수) 미션 제출합니다. (#395)\n\n* docs: 2단계 목표, 기능 목록 작성\r\n- 학습 목표, 핵심 기능, 프로그래밍 요구 사항을 작성 -> 이를 잘 지키며 미션을 진행하기 위함\r\n- 기능 목록은 초안으로서, 러프하게 작성함 (각 기능을 개발할 때 해당 기능을 디테일하게 정의하고, 이에 맞게 구현 및 테스트 에정\r\n\r\n* feat: 카드사 선택 기능 구현\r\n- 드롭다운을 통해 카드사 선택 -> 선택된 카드사 정보에 따라 상태 업데이트 -> 카드사 상태에 따라 미리보기 색상 변경\r\n\r\n* refactor: 카드사(cardIssuer) 관련 데이터를 한 맥락으로 이해할 수 있도록 한 파일에서 관리하도록 수정\r\n\r\n* feat: CVC 번호 입력 기능 구현\r\n- 입력 시 카드 미리보기 뒷면이 표시\r\n\r\n* feat: 비밀번호 입력 기능 구현\r\n- 입력된 값은 별표(asterisk)로 마스킹\r\n\r\n* feat: 폼 제출 및 상태 관리 기능 구현\r\n- 각 입력 필드의 유효성을 검사 -> 버튼 활성화/비활성화 결정\r\n\r\n* refactor: Input 에러 상태 관리 방식 수정\r\n- Input 컴포넌트에서 별도로 관리하던 것 삭제 -> 상위 컴포넌트로부터 props로 받도록 수정\r\n\r\n* fix: 폼 제출을 위한 확인 버튼을 활성화하는 로직 문제 해결\r\n- 입력 필드에 에러가 존재하면 비활성화 -> 입력 필드에 모든 값이 채워져있는지도 추가적으로 검사\r\n\r\n* rename: 디렉토리 구조 변경, 컴포넌트 및 파일 이름 수정\r\n\r\n* rename: 컴포넌트 및 파일 이름 수정\r\n\r\n* refactor(CardEnrollForm): 비즈니스 로직 분리\r\n- custom hook으로 로직 분리\r\n\r\n* refactor(CardEnrollForm): 하위 컴포넌트(입력 필드) 비즈니스 로직 분리\r\n\r\n* style: CVC -> Cvc로 네이밍 변경\r\n\r\n* refactor(useEnrollForm): 커스텀 훅 로직 분리\r\n- 각 컴포넌트에 대응하는 custom hook을 별도로 정의\r\n\r\n* refactor(CardPreview): 불필요한 hook 로직 제거\r\n\r\n* style: css 로직을 아래로 이동\r\n\r\n* feat: 카드 등록 완료 페이지 정적 UI 개발\r\n- 라우팅 기능 추가\r\n카드 등록 페이지 정적 UI 구현\r\n- Story로 UI 렌더링 테스트\r\n\r\n* feat: 카드 등록 폼 페이지 <-> 카드 등록 완료 페이지 이동 기능\r\n\r\n* feat: 카드 등록 완료 페이지로 이동하면서 cardInformation 상태 함께 전달\r\n\r\n* feat: 동적으로 입력 UI 단계적으로 랜더링\r\n\r\n* feat: 입력을 완료하면 다음 입력 필드에 자동으로 포커스되는 기능\r\n\r\n* feat(CardEnrollForm): 확인 버튼 화면 하단에 고정\r\n\r\n* refactor: 입력 필드 동적 렌더링 및 자동 포커싱 로직 분리\r\n\r\n* test: 컴포넌트별 UI 테스트 코드 추가\r\n\r\n* Update src/App.tsx\r\n\r\nCo-authored-by: Kyle \r\n\r\n* chore: typescript react router dom > devDependencis로 이동\r\n- 해당 패키지는 개발 단계에서만 필요한 패키지\r\n\r\n* remove(isNumberStartWith): JS 내장 메서드로 제공되는 기능으로, 삭제함\r\n\r\n* comment(CardEnrollForm): 임시 로직(dummy cardInformation 생성)에 대한 주석 부여\r\n\r\n* design: 공통적으로 사용되는 font-family는 global로 선언\r\n\r\n* style: dependencies 타입이름 PascalCase로 변경 (변수명과의 충돌 방지)\r\n\r\n* refactor: CARD_IUSSUERS이 타입으로 사용되기 때문에 enum으로 관리..?\r\n\r\n* refactor(useIsReadyToSubmit): 모든 인풋에 입력값이 있는지, 에러가 없는지에 대한 검사 로직을 각 인풋 필드의 hook에서 검사하도록 수정\r\n\r\n* fix: CardIssuer, useCardPassword 수정 사항 관련 문제 해결\r\n\r\n---------\r\n\r\nCo-authored-by: Kyle ","shortMessageHtmlLink":"[2단계 - 페이먼츠] 수야(최영수) 미션 제출합니다. (#395)"}},{"before":"b5e2a23388bcdd7ce67868e67e6f1d779cae0df9","after":"3f37db04dc31cc058854e5bd66037ba6d5cf6163","ref":"refs/heads/seongjinme","pushedAt":"2024-04-29T16:48:27.000Z","pushType":"pr_merge","commitsCount":1,"pusher":{"login":"yujo11","name":"JO YUN HO","path":"/yujo11","primaryAvatarUrl":"https://avatars.githubusercontent.com/u/61097373?s=80&v=4"},"commit":{"message":"[2단계 - 페이먼츠] 아르(홍성진) 미션 제출합니다. (#394)\n\n* docs: 기능 구현 목록 작성\r\n\r\nCo-authored-by: Seongjin Hong \r\n\r\n* feat: reset.css 추가\r\n\r\nCo-authored-by: Seongjin Hong \r\n\r\n* feat: CardNumberInput 컴포넌트 생성\r\n\r\nCo-authored-by: Seongjin Hong \r\n\r\n* feat: Input 공통 컴포넌트 생성\r\n\r\nCo-authored-by: Seongjin Hong \r\n\r\n* feat: CardExpirationInput 컴포넌트 생성\r\n\r\nCo-authored-by: Seongjin Hong \r\n\r\n* feat: CardOwnerInput 컴포넌트 생성 및 전체 구조 설계\r\n\r\nCo-authored-by: Seongjin Hong \r\n\r\n* feat: CardPreviewBox 컴포넌트 생성 및 전체 구조 설계\r\n\r\nCo-authored-by: Seongjin Hong \r\n\r\n* feat: 카드 소유자 이름 입력 시 카드 프리뷰 업데이트 기능 추가\r\n\r\n* feat: 카드 유효 기간 입력 시 카드 프리뷰 업데이트 기능 추가\r\n\r\nCo-authored-by: Seongjin Hong \r\n\r\n* feat: 카드 번호 입력 시 카드 프리뷰 업데이트 기능 추가\r\n\r\n* feat: Visa, MasterCard에 해당할 시 해당 브랜드 로고 표시 기능 추가\r\n\r\nCo-authored-by: Seongjin Hong \r\n\r\n* docs: 기능 목록 업데이트 및 반영\r\n\r\nCo-authored-by: Seongjin Hong \r\n\r\n* feat: 카드 소유자 이름 유효성 검사 추가\r\n\r\nCo-authored-by: Seongjin Hong \r\n\r\n* feat: 카드 유효기간 월 유효성 검사 추가\r\n\r\nCo-authored-by: Seongjin Hong \r\n\r\n* feat: 카드 유효기간 년도 유효성 검사 추가\r\n\r\nCo-authored-by: Seongjin Hong \r\n\r\n* feat: 카드 번호 유효성 검사 추가\r\n\r\nCo-authored-by: Seongjin Hong \r\n\r\n* docs: 기능 목록 업데이트 및 반영\r\n\r\nCo-authored-by: Seongjin Hong \r\n\r\n* feat: 입력 창 focus 효과 추가\r\n\r\nCo-authored-by: Seongjin Hong \r\n\r\n* feat: 카드 프리뷰 화면 기본 구조 설계\r\n\r\nCo-authored-by: Seongjin Hong \r\n\r\n* fix: 카드 소유자 이름 유효성 검사 시 공백을 허용하지 않는 오류 해결\r\n\r\nCo-authored-by: Seongjin Hong \r\n\r\n* feat: 카드 유효기간 년도 유효성 검사 추가\r\n\r\nCo-authored-by: Seongjin Hong \r\n\r\n* refactor: 스타일 파일 분리\r\n\r\nCo-authored-by: Seongjin Hong \r\n\r\n* refactor: TitleContainer 컴포넌트 분리\r\n\r\nCo-authored-by: Seongjin Hong \r\n\r\n* refactor: InputField 컴포넌트 분리\r\n\r\nCo-authored-by: Seongjin Hong \r\n\r\n* refactor: Input 컴포넌트 스타일 분리 및 간소화\r\n\r\nCo-authored-by: Seongjin Hong \r\n\r\n* refactor: 카드 프리뷰 레이아웃 책임 변경\r\n\r\nCo-authored-by: Seongjin Hong \r\n\r\n* test: Input, InputField 스토리북 테스트 추가\r\n\r\nCo-authored-by: Seongjin Hong \r\n\r\n* test: TitleContainer 스토리북 테스트 추가\r\n\r\nCo-authored-by: Seongjin Hong \r\n\r\n* test: CardPreview 스토리북 테스트 추가\r\n\r\nCo-authored-by: Seongjin Hong \r\n\r\n* fix: 카드 소유자 이름 유효성 검사 시 두 번째 문자가 필수적으로 들어가야 했던 오류 해결\r\n\r\n* test: 테스트 docs 파일 추가\r\n\r\nCo-authored-by: Seongjin Hong \r\n\r\n* test: CardOwnerInput, CardNumberInput, CardExpirationInput 스토리북 테스트 추가\r\n\r\nCo-authored-by: Seongjin Hong \r\n\r\n* fix: 카드 유효기간 유효성 검사 로직 수정\r\n\r\nCo-authored-by: Seongjin Hong \r\n\r\n* fix: 카드 번호 유효성 검사 로직 수정\r\n\r\nCo-authored-by: Seongjin Hong \r\n\r\n* fix: 카드 유효기간 유효성 검사 로직 수정\r\n\r\nCo-authored-by: Seongjin Hong \r\n\r\n* refactor: 에러 메시지 높이 설정 추가\r\n\r\nCo-authored-by: Seongjin Hong \r\n\r\n* refactor: 상수 분리\r\n\r\nCo-authored-by: Seongjin Hong \r\n\r\n* refactor: 시멘틱 태그 적용\r\n\r\nCo-authored-by: Seongjin Hong \r\n\r\n* refactor: 에러 메시지 출력 로직 간소화\r\n\r\nCo-authored-by: Seongjin Hong \r\n\r\n* remove: App.css 제거\r\n\r\nCo-authored-by: Seongjin Hong \r\n\r\n* chore: Github Page 배포 설정 추가\r\n\r\n* chore: 웹페이지 및 스토리북 배포 정보 업데이트\r\n\r\n* chore: Github page에 Storybook 빌드 정보 추가\r\n\r\n* chore: 불필요한 Chromatic 배포 액션 제거\r\n\r\n* chore: 미사용 지역변수 및 매개변수 체크 설정 복원\r\n\r\n* chore: 불필요 패키지(chromatic) 제거\r\n\r\n* refactor: 컴포넌트 구성 파일들을 컴포넌트 단위의 폴더로 묶어 재정리\r\n\r\n* refactor: IDE 상에서 추론 가능한 상태값의 타입 명시 생략 처리\r\n\r\n* refactor: 배열 형태의 state들에 대한 타입 범위를 좁혀서 재정의\r\n\r\n* refactor: 카드번호 집합을 담은 cardNumber 상태에 대한 네이밍 변경 적용 (cardNumber -> cardNumbers)\r\n\r\n* fix: cardNumbers 상태명 변경사항 반영\r\n\r\n* refactor: ![]()
요소 내 불필요한 key 삭제\r\n\r\n* refactor: ![]()
요소 목록에 대한 key값 복원\r\n\r\n* refactor: 상수 관리 파일명 스타일을 PascalCase에서 camelCase로 변경\r\n\r\n* refactor: 누락되었던 상수의 as const 설정 추가\r\n\r\n* refactor: 카드사 구분에 필요한 상수/프로퍼티명 수정 반영\r\n\r\n* refactor: 상수 파일명 변경 미반영사항 수정\r\n\r\n* fix: 파일 대소문자 변경 내용의 미반영 이슈 수정\r\n\r\n* refactor: 카드 번호에 숫자만 입력 가능하도록 수정\r\n\r\n* style: 기본 서체 설정, 텍스트 크기/색상 상수화\r\n\r\n* style: 앱 화면 너비를 모바일 기준으로 재설정\r\n\r\n* chore: Storybook 설정에 모바일 기준 viewport 추가\r\n\r\n* refactor: 카드 브랜드 검증 로직을 유틸 함수로 분리\r\n\r\n* chore: Storybook preview 설정에 누락된 공용 css 추가\r\n\r\n* refactor: 각 입력 컴포넌트의 UI 이외 로직들을 custom hook으로 분리\r\n\r\n* refactor: 각 컴포넌트별 custom hook 적용\r\n\r\n* refactor: 카드번호 난독화 로직에서 삼항연산자 중첩 부분 제거\r\n\r\n* refactor: 컴포넌트별 export 선언 형식 일치화\r\n\r\n* refactor: getCardNumberComponent 로직 간소화\r\n\r\n* docs: 2단계 구현 사항 정리\r\n\r\n* refactor: 비자/마스터카드 검증 함수 및 파일명 수정\r\n\r\n* style: 기능 없는 중복 스타일 파일 삭제\r\n\r\n* style: 2단계에서 추가된 색상 상수 추가\r\n\r\n* style: input 요소에 hover 이벤트시 border 색상 변경되도록 수정\r\n\r\n* refactor: InputField에 넘기는 label과 length prop을 선택요소로 변경\r\n\r\n* feat: 공용 SelectBox 컴포넌트 디자인 및 생성\r\n\r\n* feat: 카드사 입력 기능 구현\r\n\r\n* refactor: 카드사별 색상 정보 추가에 따른 상수 변경 및 코드 반영\r\n\r\n* feat: 카드사 입력값에 따른 프리뷰 카드 배경색 변경 구현\r\n\r\n* feat: CVC 입력 구현\r\n\r\n* feat: 비밀번호 앞 2자리 입력 구현\r\n\r\n* feat: CVC 입력시 카드 프리뷰 화면의 뒷면 전환 구현\r\n\r\n* feat: 사용자의 입력 단계에 따른 입력 컴포넌트 순차 노출 구현\r\n\r\n* style: 색상 상수 추가에 따른 스타일 코드 수정\r\n\r\n* feat: 전체 입력값 검증 통과시 등록 확인 버튼 구현\r\n\r\n* chore: react-router-dom 설치\r\n\r\n* refactor: 카드 등록 컴포넌트명 변경 적용\r\n\r\n* feat: 카드 등록 완료 페이지 및 페이지 간 이동 구현\r\n\r\n* feat: 사용자의 입력 순서에 따른 포커스 이동 구현\r\n\r\n* refactor: 카드 번호 입력에 따른 브랜드 식별 횟수 최적화\r\n\r\n* chore: step2 배포 정보 적용\r\n\r\n* chore: git 대소문자 미구분으로 인한 배포 이슈 수정\r\n\r\n* chore: git 대소문자 미구분으로 인한 배포 이슈 수정(파일명 재변경)\r\n\r\n* fix: background-image의 url 경로 설정시 누락된 쌍따옴표(\") 추가\r\n\r\n* style: 모바일 환경에서 입력 필드 focus시 줌인 현상 방지 코드 추가\r\n\r\n* refactor: 모바일 환경에서 숫자 입력 필드에는 숫자 키보드가 노출되도록 수정\r\n\r\n* refactor: 카드 소유자 입력시 blur 이벤트 기준으로 다음 단계 이동하도록 수정\r\n\r\n* style: 카카오뱅크 선택시 텍스트 색상 변경 적용\r\n\r\n* refactor: 카드 소유자 필드에서 Enter키 입력시 다음 입력 필드로 이동 기능 추가\r\n\r\n* refactor: 컴포넌트별 Storybook 코드 업데이트 적용\r\n\r\n* style: 각 입력 필드 및 등록 완료 페이지에 애니메이션 효과 추가\r\n\r\n* refactor: HTML 템플릿의 기본 언어 속성 변경(en -> ko)\r\n\r\n* refactor: 변수화했던 카드 등록 완료 메시지 요소를 JSX 문에 병합\r\n\r\n* refactor: routing 방식을 v6의 createBrowserRouter 기반으로 업데이트\r\n\r\n* refactor: 각 type 이름을 PascalCase로 수정\r\n\r\n* fix: 입력 카드 정보가 없는 상태로 등록 완료 페이지에 접속할 경우의 에러 수정\r\n\r\n* style: 각 Input container div에 className 및 스타일 부여\r\n\r\n* refactor: 불필요 주석 제거\r\n\r\n* refactor: 입력 처리용 커스텀 훅들의 공통 로직을 useChangeInput으로 추상화\r\n\r\n* refactor: 카드 등록 컴포넌트들의 import 경로 간소화\r\n\r\n---------\r\n\r\nCo-authored-by: anttiey ","shortMessageHtmlLink":"[2단계 - 페이먼츠] 아르(홍성진) 미션 제출합니다. (#394)"}},{"before":"6b67d71d89f9c145e8a3abcf11d2753984203292","after":"1826a895ff59dbbd7a92dd82fe7eefed90f1da18","ref":"refs/heads/lurgi","pushedAt":"2024-04-29T16:37:38.000Z","pushType":"pr_merge","commitsCount":1,"pusher":{"login":"yujo11","name":"JO YUN HO","path":"/yujo11","primaryAvatarUrl":"https://avatars.githubusercontent.com/u/61097373?s=80&v=4"},"commit":{"message":"[2단계 - 페이먼츠] - 러기(박정우) 미션 제출합니다. (#388)\n\n* docs: 스토리 기능 구현 목록\r\n\r\nCo-authored-by: river <0jenn0@users.noreply.github.com>\r\n\r\n* refactor: 확언 삭제\r\n\r\n* refactor: 불필요한 단언 삭제\r\n\r\n* refactor: 불필요한 코드 삭제\r\n\r\n* test: CreditCard 스토리북 작성\r\n\r\n* test: FormInput 스토리 작성\r\n\r\n* refactor: fragment 적용\r\n\r\n* refactor: 불필요한 타입 삭제\r\n\r\n* chore: 불필요한 타입 별칭 삭제\r\n\r\n* docs: Step2 Todo리스트 작성\r\n\r\n* chore: 타입 선언\r\n\r\ntype rebase\r\n\r\n* chore: state추가\r\n\r\n* chore: 타입 수정\r\n\r\nrebase 타입변경\r\n\r\n* docs: 코드 flow 작성\r\n\r\n* docs: 미션 요구 사항 정리\r\n\r\n* chore: 잘못된 경로 수정\r\n\r\nrebase\r\n\r\n* refactor: 상수 컨벤션 변경\r\n\r\n* feat: 입력 필드 렌더링 순서에 대한 상태\r\n\r\n* feat: 카드 앞 뒷면에 대한 상태\r\n\r\n* refactor: input파일 분리\r\n\r\nsquash\r\n\r\n* refactor: FormField 분리\r\n\r\n* feat: 카드사 선택 필드 작성\r\n\r\nsquash\r\n\r\n* feat: cardOwnerField 수정\r\n\r\n* squash\r\n\r\n* feat: 불필요한 타입 삭제 및 cvc 필드 작성\r\n\r\n* feat: password Field 작성\r\n\r\n* feat: input id 수정\r\n\r\n* feat: 스타일 수정\r\n\r\n* feat: cardIssuerInput 스타일 적용\r\n\r\n* docs: 체크 및 추가\r\n\r\n* feat: validator 작성\r\n\r\n* docs: 기능사항 추가\r\n\r\n* docs: 기능 사항 추가\r\n\r\n* feat: cardIssuerInput 작성\r\n\r\n* feat: filed 에러 출력\r\n\r\n* feat: 카드사 변경시 색상 변경\r\n\r\nsqa\r\n\r\n* feat: 정규표현식 수정\r\n\r\n* feat: 앞 뒷면에 따른 preview 변경 로직\r\n\r\n* feat: cvcNumber입력, 뒷면UI 연결\r\n\r\n* refactor: provider이름 변경\r\n\r\n* feat: ref 전역 상태 context 작성\r\n\r\n* feat: cardNumberInput에 대한 동적 UI\r\n\r\n* refactor: 명시적인 상수 분리\r\n\r\n* feat: 입력시 자동으로 focus 넘어가는 기능\r\n\r\n* feat: enter이벤트 추가 및 tab 이벤트\r\n\r\nsquas\r\n\r\n* feat: Render 순서에 대한 렌더링\r\n\r\n* feat: 이베트 삭제\r\n\r\n* feat: Field단위에서의 동적 ui\r\n\r\n* feat: 필드 단위에서의 포커스 작성\r\n\r\n* feat: cvc에서 엔터 입력시 pass로 포커스\r\n\r\n* feat: 확인 버튼 렌더링\r\n\r\n* feat: 확인 버튼 동적 렌더링\r\n\r\n* refactor: 함수 분리\r\n\r\n* feat: input에 name속성 추가\r\n\r\n* feat: router등록\r\n\r\n* feat: lading arrival 페이지 빌드\r\n\r\n* feat: 리디렉션 페이지 작성\r\n\r\n* refactor: 제네릭 및 함수 정리\r\n\r\n* feat: blur이벤트 연결\r\n\r\n* feat: blur이벤트 처리\r\n\r\nsquash\r\n\r\n* feat: 유효성 검증 연결\r\n\r\n* fix: 유효성 검사 수정\r\n\r\n* feat: 유효한 날짜 검증\r\n\r\n* feat: placeholder 값 변경 및 오타 변경\r\n\r\n* feat: 타입 에러 수정\r\n\r\n* chore: react-router에 baseUrl 지정\r\n\r\n* feat: error 핸들링\r\n\r\n* fix: 무한 렌더링 수정\r\n\r\n* feat: navigation url에 민감한 정보 삭제\r\n\r\n* fix: 유효하지 않은 기간 지정시 확인 버튼 나타나는 부분 수정\r\n\r\n* fix: focus에러 수정\r\n\r\n* refactor: context분리\r\n\r\n* refactor: render 순서에 대한 context 리팩터링\r\n\r\n* refactor: renderOrder action에 조건문 추가\r\n\r\n* feat: ownerInput과 cvcInput 연결\r\n\r\n* refactor: 명시적 설명 추가\r\n\r\n* refactor: 불필요한 코드 제거\r\n\r\n* refactor: 필요하지 않은 코드 삭제\r\n\r\n* refactor: domain로직 분리\r\n\r\n* fix: 무한 렌더링 방지\r\n\r\n* refactor: keyCode key로 변경\r\n\r\n* feat: 이름 작성시 자동으로 다음 Field focus\r\n\r\n---------\r\n\r\nCo-authored-by: river <0jenn0@users.noreply.github.com>","shortMessageHtmlLink":"[2단계 - 페이먼츠] - 러기(박정우) 미션 제출합니다. (#388)"}},{"before":"43ee1ee604f6a870e8d2541c3c6c9f5aa58eea9a","after":"eabf2886e33567c4e40e5bdcb9467f04fee5c0a8","ref":"refs/heads/novice0840","pushedAt":"2024-04-29T15:06:03.000Z","pushType":"pr_merge","commitsCount":1,"pusher":{"login":"moonheekim0118","name":null,"path":"/moonheekim0118","primaryAvatarUrl":"https://avatars.githubusercontent.com/u/61469664?s=80&v=4"},"commit":{"message":"[2단계 - 페이먼츠] - 포메(김우성) 미션 제출합니다. (#375)\n\n* docs: 기능 요구사항 문서 추가\r\n\r\n* feat: form 데이터를 관리하는 useForm 커스텀 훅 추가\r\n\r\n* feat: 만료 기한 입력 컴포넌트\r\n\r\n* refactor: 입력 필드 간 UI 통일을 위해 레이아웃을 지정하는 Field 컴포넌트 생성\r\n\r\nCo-Authored-By: novice0840 <111696934+novice0840@users.noreply.github.com>\r\n\r\n* feat: 카드 소유자 이름 입력 필드 추가\r\n\r\nCo-Authored-By: novice0840 <111696934+novice0840@users.noreply.github.com>\r\n\r\n* chore: Field, Input 컴포넌트 스타일링\r\n\r\nCo-Authored-By: novice0840 <111696934+novice0840@users.noreply.github.com>\r\n\r\n* test: 카드 번호 필드 스토리 추가\r\n\r\nCo-Authored-By: novice0840 <111696934+novice0840@users.noreply.github.com>\r\n\r\n* test: 카드 만료일, 소유자 이름 스토리 추가\r\n\r\nCo-Authored-By: novice0840 <111696934+novice0840@users.noreply.github.com>\r\n\r\n* feat: 카드 정보 프리뷰 컴포넌트 추가\r\n\r\nCo-Authored-By: novice0840 <111696934+novice0840@users.noreply.github.com>\r\n\r\n* test: CardPreview 컴포넌트 스토리 추가\r\n\r\nCo-Authored-By: novice0840 <111696934+novice0840@users.noreply.github.com>\r\n\r\n* feat: CardPreview 컴포넌트와 입력 필드 데이터 연동\r\n\r\nCo-Authored-By: novice0840 <111696934+novice0840@users.noreply.github.com>\r\n\r\n* chore: 전체 레이아웃 및 세부 스타일 변경\r\n\r\nCo-Authored-By: novice0840 <111696934+novice0840@users.noreply.github.com>\r\n\r\n* chore: index.css 임포트 위치 변경\r\n\r\n스토리북 서버에서 css variable 적용 불가 이슈로 index.css 임포트 위치를 main.tsx에서 App.tsx로 변경\r\n\r\nCo-Authored-By: novice0840 <111696934+novice0840@users.noreply.github.com>\r\n\r\n* refactor: 컴포넌트에서 상수 분리\r\n\r\nCo-Authored-By: novice0840 <111696934+novice0840@users.noreply.github.com>\r\n\r\n* refactor: Field 컴포넌트를 layout 디렉토리 하위로 이동\r\n\r\nCo-Authored-By: novice0840 <111696934+novice0840@users.noreply.github.com>\r\n\r\n* test: Input 컴포넌트에 대한 story 추가\r\n\r\nCo-Authored-By: novice0840 <111696934+novice0840@users.noreply.github.com>\r\n\r\n* refactor: 입력 필드 간 중복되는 로직을 커스텀 훅 사용으로 제거\r\n\r\nCo-Authored-By: novice0840 <111696934+novice0840@users.noreply.github.com>\r\n\r\n* chore: 주석 제거\r\n\r\nCo-Authored-By: novice0840 <111696934+novice0840@users.noreply.github.com>\r\n\r\n* chore: 사용하지 않는 파일 제거\r\n\r\nCo-Authored-By: novice0840 <111696934+novice0840@users.noreply.github.com>\r\n\r\n* feat: 카드 소유자 이름을 자동으로 대문자로 변환하는 기능\r\n\r\nCo-Authored-By: novice0840 <111696934+novice0840@users.noreply.github.com>\r\n\r\n* docs: 요구사항 문서 업데이트\r\n\r\nCo-Authored-By: novice0840 <111696934+novice0840@users.noreply.github.com>\r\n\r\n* chore: storybook Preview 설정에서 Date matcher 제거\r\n\r\nCo-Authored-By: novice0840 <111696934+novice0840@users.noreply.github.com>\r\n\r\n* refactor: validators 파일 위치 변경\r\n\r\n* refactor: 상수명 변경\r\n\r\n* refactor: cardnumber, expirationDate state 이동\r\n\r\n* refactor: owername state 이동\r\n\r\n* refactor: App component 로직 hooks로 분리\r\n\r\n* refactor: form 별 memo 추가\r\n\r\n* fix: refactor parameter 변경\r\n\r\n* fix: Ownername regex 수정\r\n\r\n* chore: github action yml 파일 추가\r\n\r\n* deploy\r\n\r\n* feat: folder 이름 오타 수정\r\n\r\n* deploy\r\n\r\n* fix: 파일명 수정\r\n\r\n* fix: file 이동\r\n\r\n* fix: vite base 옵션 변경\r\n\r\n* chore: chromatic 추가\r\n\r\n* fix: Input UI skeleton 완료\r\n\r\n* feat: UI 설계\r\n\r\n* feat: 소유자 이름 입력 완료 시 CVC 번호 컴포넌트 마운트\r\n\r\n* feat: CVC 입력 완료 시 비밀번호 컴포넌트 마운트\r\n\r\n* feat: submit button 구현 완료\r\n\r\n* feat: CVC 변경시 프리뷰 배경이미지 변경\r\n\r\n* feat: preview 뒷면 추가\r\n\r\n* feat: 확인 버튼 클릭시 메인 페이지로 리턴 기능 구현\r\n\r\n* fix: 카드 배경 안 바뀌는 버그 수정\r\n\r\n* feat: ownername state 간소화\r\n\r\n* fix: 풀필요한 코드 제거\r\n\r\n* refactor: cardNumbers, expirationdate state 간소화\r\n\r\n* refactor: cardpreview 함수 적용\r\n\r\n* feat: storybook component 추가\r\n\r\n* fix: 안쓰는 파일 삭제\r\n\r\n* fix: 불필요한 파일 제거\r\n\r\n* fix: 파일 복구\r\n\r\n* refactor: component import 방식 변경\r\n\r\n* refactor: autoFocus 간소화\r\n\r\n* refactor: Input component props 변경\r\n\r\n* refactor: select component id 제거\r\n\r\n* refactor: hooks export 방식 변경\r\n\r\n* refactor: changCardNumbers 함수 간소화\r\n\r\n* refactor: useExpirationDate hook 간소화\r\n\r\n* refactor: useInput 유저이름 input에 적용\r\n\r\n* refactor: useOwnerName에 새 input hook 적용\r\n\r\n* chore: viet config 변경\r\n\r\n* fix: 경로 에러 수정\r\n\r\n* fix: vercel 설정 변경\r\n\r\n---------\r\n\r\nCo-authored-by: Kim Da Eun ","shortMessageHtmlLink":"[2단계 - 페이먼츠] - 포메(김우성) 미션 제출합니다. (#375)"}},{"before":"6acc59915ef52d60f62680ec54fddb751f86b041","after":"4b4637d83c5ae0690d0fa9b767b153f6e734baea","ref":"refs/heads/chlwlstlf","pushedAt":"2024-04-29T14:05:35.000Z","pushType":"pr_merge","commitsCount":1,"pusher":{"login":"igy95","name":"Kyle","path":"/igy95","primaryAvatarUrl":"https://avatars.githubusercontent.com/u/57053577?s=80&v=4"},"commit":{"message":"[2단계 - 페이먼츠] - 텐텐(최진실) 미션 제출합니다. (#393)\n\n* chore: 스토리북 세팅\r\n\r\nCo-authored-by: Yuseon Kim(썬데이) \r\n\r\n* docs: 기능 목록 작성\r\n\r\nCo-authored-by: Yuseon Kim(썬데이) \r\n\r\n* feat: 카드 번호 입력 기능 구현\r\n\r\nCo-authored-by: Yuseon Kim(썬데이) \r\n\r\n* refactor: 카드 번호 입력 로직 수정\r\n\r\nCo-authored-by: Yuseon Kim(썬데이) \r\n\r\n* feat: 입력한 카드 번호 미리보기 기능 구현\r\n\r\nCo-authored-by: Yuseon Kim(썬데이) \r\n\r\n* feat: 3, 4번째 카드 번호들 마스킹\r\n\r\nCo-authored-by: Yuseon Kim(썬데이) \r\n\r\n* refactor: 카드 정보 입력 공통 컴포넌트 분리\r\n\r\nCo-authored-by: Yuseon Kim(썬데이) \r\n\r\n* feat: 유효 기간 입력 기능 추가\r\n\r\nCo-authored-by: Yuseon Kim(썬데이) \r\n\r\n* feat: 입력한 유효 기간 미리보기 기능 구현\r\n\r\n* feat: 소유자 이름 입력 기능 구현\r\n\r\n* chore: 스타일드 컴포넌트 설치\r\n\r\nCo-authored-by: Yuseon Kim(썬데이) \r\n\r\n* feat: reset css 적용\r\n\r\n* refactor: 사용하지 않는 파일 제거\r\n\r\n* refactor: 프리뷰의 카드 번호와 유효 기간을 별도의 컴포넌트로 분리\r\n\r\n* feat: 카드 번호에 따른 카드 브랜드 로고 표시\r\n\r\n* design: input 컴포넌트 디자인 구현\r\n\r\nCo-authored-by: Yuseon Kim(썬데이) \r\n\r\n* design: 카드 인풋 섹션 디자인 구현\r\n\r\n* refactor: 유효성 검증 로직 분리\r\n\r\n* refactor: 카드 브랜드, 입력 정보 상수화하기\r\n\r\nCo-authored-by: Yuseon Kim(썬데이) \r\n\r\n* refactor: 카드 넘버 섹션 로직 수정, 필요한 태그 추가\r\n\r\nCo-authored-by: Yuseon Kim(썬데이) \r\n\r\n* refactor: props 네이밍 변경\r\n\r\n* refactor: 인터페이스 타입 수정\r\n\r\n* refactor: 파일명 변경\r\n\r\nCo-authored-by: Yuseon Kim(썬데이) \r\n\r\n* fix: 소유자 이름 띄어쓰기 안 되는 문제 해결\r\n\r\nCo-authored-by: Yuseon Kim(썬데이) \r\n\r\n* feat: input 스토리북 작성 완료\r\n\r\nCo-authored-by: Yuseon Kim(썬데이) \r\n\r\n* fix: 카드 번호 없을 때 날짜가 위에 뜨는 에러 해결\r\n\r\n* feat: 카드 유효기간 스토리북 구현\r\n\r\n* feat: 카드 번호 컴포넌트 스토리북 구현\r\n\r\nCo-authored-by: Yuseon Kim(썬데이) \r\n\r\n* fix: 브랜드 로고 잘못 출력되는 에러 해결\r\n\r\nCo-authored-by: Yuseon Kim(썬데이) \r\n\r\n* feat: 프리뷰 컴포넌트 스토리북 구현\r\n\r\nCo-authored-by: Yuseon Kim(썬데이) \r\n\r\n* feat: 카드 인풋 섹션 컴포넌트 스토리북 구현\r\n\r\nCo-authored-by: Yuseon Kim(썬데이) \r\n\r\n* refactor: 불필요한 스토리북 파일 제거\r\n\r\nCo-authored-by: Yuseon Kim(썬데이) \r\n\r\n* build: 1단계 1차 배포\r\n\r\nCo-authored-by: Yuseon Kim(썬데이) \r\n\r\n* build: 빌드 후 배포\r\n\r\n* build: 1단계 2차 배포\r\n\r\n* docs: 기능 구현사항 수정\r\n\r\n* build: 1단계 3차 배포\r\n\r\n* build: 1단계 4차 배포\r\n\r\n* refactor: 불필요한 주석 제거\r\n\r\n* Delete dist directory\r\n\r\n* Delete storybook-static directory\r\n\r\n* fix: dist 폴더 .gitignore에 추가\r\n\r\n* rename: styles를 styled로 네이밍 변경\r\n\r\n* rename: 스토리북 파일 확장자명 tsx로 변경\r\n\r\n* refactor: styled import 수정\r\n\r\n* refactor: input tag의 속성으로 변경\r\n\r\n* refactor: form 시맨틱 태그 변경\r\n\r\n* refactor: setting 인터페이스 추가, formFields 객체로 묶기\r\n\r\n* fix: placeholder 오류 해결\r\n\r\n* refactor: Input extends 변경\r\n\r\n* refactor: map으로 state 데이터 접근\r\n\r\n* refactor: ICardInfo 인터페이스 네이밍 변경\r\n\r\n* refactor: 유효성 검사 상수화\r\n\r\n* design: 카드 인풋 섹션 레이아웃 수정\r\n\r\n* design: focus 되었을 때 디자인 변경\r\n\r\n* chore: Co-authored 파일 삭제, 배포 브랜치 변경\r\n\r\n* refactor: useEffect를 함수로 변경\r\n\r\n* docs: 2단계 기능 구현 작성\r\n\r\n* feat: 카드 입력 정보 상수화\r\n\r\n* feat: 비밀번호, cvc, 카드사 추가 입력 구현\r\n\r\n* rename: newCardPage 폴더 생성\r\n\r\n* feat: Dropdown 컴포넌트 제작, 조립\r\n\r\n* refactor: svg에서 png로 변경\r\n\r\n* feat: 카드사 별로 카드 색상 변경\r\n\r\n* feat: 입력 유효하면 다음 섹션 띄우기\r\n\r\n* feat: 입력이 유효하면 확인 버튼 띄우기\r\n\r\n* feat: 카드 등록 확인 페이지 만들기\r\n\r\n* feat: 상태관리, 이벤트핸들러 커스텀 훅 만들기\r\n\r\n* feat: 자동으로 input focus 넘어가게 하기\r\n\r\n* refactor: useCallback 삭제\r\n\r\n* feat: 카드 뒷면 cvc 띄우기\r\n\r\n* feat: 숫자만 입력, 영어만 입력 기능 넣기\r\n\r\n* fix: 유효기간 숫자 안 지워지는 에러 수정\r\n\r\n* feat: dropdown 스토리북 생성\r\n\r\n* feat: 카드 프리뷰 스토리북 생성\r\n\r\n* feat: 카드 인풋 섹션 스토리북 작성\r\n\r\n* refactor: 불필요한 주석 제거\r\n\r\n* docs: 기능 구현사항 완료\r\n\r\n* refactor: Dropdown UI로직만 분리\r\n\r\n* refactor: CardCompany 타입 변경\r\n\r\n* refactor: input 썼다 지웠을 때 errorMessage 띄우기\r\n\r\n* design: 폰트 global style로 분리\r\n\r\n* refactor: 카드 색상 객체 타입 지정\r\n\r\n* refactor: 불필요한 Fragment 제거\r\n\r\n* delete: 불필요한 파일 삭제\r\n\r\n* refactor: 커스텀훅 반환값 객체로 변경\r\n\r\n* feat: 사용자 입력 onBlur 함수 추가\r\n\r\n* refactor: 커스텀훅 반환값 interface 분리\r\n\r\n---------\r\n\r\nCo-authored-by: Yuseon Kim(썬데이) ","shortMessageHtmlLink":"[2단계 - 페이먼츠] - 텐텐(최진실) 미션 제출합니다. (#393)"}},{"before":"32e949c592e5e6631a03516b865b0cff0fb95169","after":"7a345f7eed534b44f7a0d2a46b9e122c843b08d4","ref":"refs/heads/chysis","pushedAt":"2024-04-29T13:55:43.000Z","pushType":"pr_merge","commitsCount":1,"pusher":{"login":"igy95","name":"Kyle","path":"/igy95","primaryAvatarUrl":"https://avatars.githubusercontent.com/u/57053577?s=80&v=4"},"commit":{"message":"[2단계 - 페이먼츠] - 에프이(박철민) 미션 제출합니다. (#382)\n\n* refactor: 변경한 props field명 적용\r\n\r\n* chore(Label): 빠져있던 margin-bottom 속성 지정\r\n\r\n* feat: 새로 추가되는 카드 정보 속성 타입과 상수 정의\r\n\r\n* chore(InputPageLayout): 레이아웃 scroll 처리\r\n\r\n* feat: 드롭다운 common 컴포넌트 구현\r\n\r\n* chore: 세부 스타일 변경\r\n\r\n* feat(CardCVCNumberInput): CVC번호 입력 컴포넌트 구현\r\n\r\n* feat(CardPasswordInput): 카드 비밀번호 입력 컴포넌트 구현\r\n\r\n* refactor(Dropdown): 드롭다운 컴포넌트 props 수정 및 구조 변경\r\n\r\n* refactor: 함수형 컴포넌트 내부에 있던 styled component를 바깥으로 이동\r\n\r\n* feat(constants): 카드 색상 인터페이스 정의\r\n\r\n* chore: react-router-dom 패키지 설치\r\n\r\n* feat: Router 생성\r\n\r\n* feat(CardSubmitPage): 카드 제출 페이지 작성\r\n\r\n* chore: 카드 제출 페이지에 사용되는 이미지 추가\r\n\r\n* chore: template literal을 사용하기 위해 스타일 설정\r\n\r\n* feat(constants): router path 상수화\r\n\r\n* feat(NewCardInputPage): input page에 컴포넌트 추가 및 제출 페이지로 라우팅 설정\r\n\r\n* feat(CardSubmitButton): 카드 제출 버튼 컴포넌트 구현\r\n\r\n* feat(CardConfirmButton): 카드 제출 페이지의 확인 버튼 컴포넌트 구현\r\n\r\n* chore(InputPageLayout): 스타일 설정\r\n\r\n* feat(CardPreview): 선택한 카드사에 맞게 카드 색상 변경하는 기능 구현\r\n\r\n* feat: CVC 번호가 입력되는 카드 뒷면 레이아웃 구현\r\n\r\n* refactor: 카드 번호 입력 로직 커스텀 훅으로 분리\r\n\r\n* refactor: 카드 유효기간 입력 로직 커스텀 훅으로 분리리\r\n\r\n* refactor: 카드 소유자 이름 입력 로직 커스텀 훅으로 분리\r\n\r\n* refactor: 카드 CVC 번호 입력 로직 커스텀 훅으로 분리\r\n\r\n* refactor: 카드 비밀번호 입력 로직 커스텀 훅으로 분리\r\n\r\n* feat: 동적 폼 렌더링 기능 구현\r\n\r\n* refactor: 확인 버튼 텍스트를 props로 받도록 수정\r\n\r\n* chore: export문을 파일의 맨 끝으로 이동\r\n\r\n* refactor: 에러 문구 컴포넌트를 반환하는 유틸 함수 분리\r\n\r\n* feat: 올바르지 않은 접근을 할 경우의 에러 페이지 구현\r\n\r\n* test: 수정된 컴포넌트에 맞게 테스트 코드 변경\r\n\r\n* test: 드롭다운 컴포넌트 테스트 코드 작성\r\n\r\n* test: 카드 뒷면 및 카드사별 카드 색상 테스트 코드 작성\r\n\r\n* chore: router 설정 변경\r\n\r\n* chore: router path 주소 상수 변경\r\n\r\n* refactor: router base path 수정\r\n\r\n* chore: 불필요한 import 삭제\r\n\r\n* chore: router path 설정\r\n\r\n* refactor: 불필요한 주석 제거\r\n\r\n* refactor: 사용하지 않는 interface 제거\r\n\r\n* refactor: 공통 Button 컴포넌트를 두어 재사용성을 높이도록 수정\r\n\r\n* refactor: 콜백으로 Boolean을 전달해 직관성을 높이도록 수정\r\n\r\n* refactor: 여러 개의 input이 있는 폼에서 key값 수정\r\n\r\n* refactor: 카드사 정보를 union type으로 관리\r\n\r\n* refactor: 정규식과 매직넘버 상수화\r\n\r\n* refactor: 폼의 완료 상태 판단 로직 수정\r\n\r\n* refactor: 타입 지정과 as const가 겹치는 부분 수정\r\n\r\n* refactor: 소유자 이름 입력 폼에서 포커스가 벗어나는 경우 다음으로 넘어갈 수 있도록 설정\r\n\r\n* refactor: 드롭다운 컴포넌트 및 카드 프리뷰에 CardCompany type 적용\r\n\r\n* feat: 404 html 추가","shortMessageHtmlLink":"[2단계 - 페이먼츠] - 에프이(박철민) 미션 제출합니다. (#382)"}},{"before":"bfe7143fd7d8c722d13982aeae9bedd335cd94a9","after":"e0878016fffb1adba569580be21fc2d918f30438","ref":"refs/heads/imxyjl","pushedAt":"2024-04-29T13:31:30.000Z","pushType":"pr_merge","commitsCount":1,"pusher":{"login":"igy95","name":"Kyle","path":"/igy95","primaryAvatarUrl":"https://avatars.githubusercontent.com/u/57053577?s=80&v=4"},"commit":{"message":"[2단계 - 페이먼츠] - 올리(이예진) 미션 제출합니다. (#386)\n\n* fix: 만료 기간을 판별하는 정규표현식 수정\r\n\r\n* docs: README.md 업데이트 - step2 요구사항 정리\r\n\r\n* docs: README.md에 step2의 핵심 기능 작성\r\n\r\n* feat: 최초에 하나의 폼만 렌더링하고, 폼을 다 채우면 다음 폼이 렌더링되는 동적 폼 UI ver1\r\n\r\n* feat: 카드 번호 입력 input에 자동 포커싱 기능 추가\r\n\r\n* feat: 카드사 선택 기능 구현 및 현재 폼을 작성해야 다음 폼이 렌더링되도록 하는 UI 기능 추가\r\n\r\n* docs: README.md - 지금까지 구현된 사항 업데이트\r\n\r\n* feat: 드롭다운 스타일 추가 - 너비 100%, 테두리 둥글게 수정\r\n\r\n* feat: 모든 Form 요소 중 CVC 입력까지 구현 - CVC Input에 포커스가 들어가는 경우 카드 뒷면이 보이는 기능 구현\r\n\r\n* feat: 비밀번호 입력 Form까지 구현\r\n\r\n* feat: 모든 필드가 유효한 경우에만 폼을 제출하는 확인 버튼을 렌더링하는 기능 구현\r\n\r\n* docs: README.md 업데이트 - 지금까지 구현 완료한 사항 업데이트\r\n\r\n* docs: README.md 수정 - Input 포커싱 조건 수정\r\n\r\n* feat: 유효기간 폼에 Input 자동 포커싱 기능 추가\r\n\r\n* fix: styled-component 관련 warning 해결\r\n\r\n* fix: unique key warning 해결\r\n\r\n* fix: Input 자동 포커싱 버그 수정 - 포커스가 넘어간 상태에서 이전 Input으로 이동해 글자를 지우는 경우 바로 다음 Input으로 이동해버리는 버그 수정\r\n\r\n* fix: 폼이 처음 렌더링된 경우 에러 메세지를 띄우지 않도록 수정\r\n\r\n* feat: 확인 버튼 및 등록 완료 페이지 구현\r\n\r\n* refactor: Input 포커싱 기능을 커스텀 훅으로 분리\r\n\r\n* chore: 불필요한 주석 제거\r\n\r\n* refactor: 카드사, CVC 번호, 비밀번호 폼 상수화\r\n\r\n* chore: 불필요한 주석 삭제\r\n\r\n* refactor: 라우터 이름을 보다 구체적으로 수정 (Router -> PaymentRouter)\r\n\r\n* style: self closed tag를 사용한 곳에서는 모두 self closed tag를 사용하게끔 수정\r\n\r\n* refactor: CVC 번호를 받아올 때 string 타입 단언 제거 - key가 undefined라면 빈 문자열을 반환하도록 수정\r\n\r\n* refactor: FormField의 dropdowns props를 JSX 엘리먼트 배열로 수정\r\n\r\n* refactor: 폼이 한 번 이상 입력을 받았는지를 판별하는 변수 이름을 isEditedOnce로 수정","shortMessageHtmlLink":"[2단계 - 페이먼츠] - 올리(이예진) 미션 제출합니다. (#386)"}}],"hasNextPage":true,"hasPreviousPage":false,"activityType":"all","actor":null,"timePeriod":"all","sort":"DESC","perPage":30,"cursor":"Y3Vyc29yOnYyOpK7MjAyNC0wNS0wN1QwODoyNzo1Ny4wMDAwMDBazwAAAARDU6bB","startCursor":"Y3Vyc29yOnYyOpK7MjAyNC0wNS0wN1QwODoyNzo1Ny4wMDAwMDBazwAAAARDU6bB","endCursor":"Y3Vyc29yOnYyOpK7MjAyNC0wNC0yOVQxMzozMTozMC4wMDAwMDBazwAAAAQ9AiZM"}},"title":"Activity · woowacourse/react-payments"}