kmin 과제 제출입니다. #1

kmin-283 · 2021-07-08T07:42:19Z

카드 추가 폼

카드 확인

등록된 카드가 표시된다.

add component -> card container + add 로 분리

path를 alias로 축약해서 "@components"등으로 사용하는데 storybook에서 이 alias를 정상적으로 해결하지 못함. 따라서 .storybook/main.js를 수정하였음.

input form을 위한 label추가

input에 원하는대로 focus를 적용하기 위해 dom을 직접 활용해야 함. 따라서 useRef를 사용했는데 브라우저에서 forwardRef를 사용하라고 함. forwardRef는 일반적으로 ref가 props로 사용될 수 없는데 사용될 수 있도록 만들어준다.

카드번호를 입력하기 위해 초기에 첫 번째 칸에 포커싱된다. 입력을 마칠 때 마다 다음 칸으로 포커싱이 이동된다.

add form의 ref위치를 cardNumberForm에서 cardForm으로 이동하여 카드 번호 컴포넌트와 만료일등 서로 다른 컴포넌트에서 포커싱이 이동될 수 있도록 함

flexCenter의 props interface에 children type 변경 flexColumn의 class-name style 변경

string splice 함수 생성

만료일과 카드 발급자의 위치를 조정하기 위해 생성

미작성된 항목 발견시 해당 돔으로 이동하기 위해 firstNumber ref를 생성하였음

font-family에 "Noto Sans KR"을 적용함

card의 색상을 변경하였음

card의 chip 디자인임

기존 React.ReactChildren에서 JSX.Element를 사용하는 것으로 변경

password에 props를 전달한다.

완료한 항목은 체크

todo에 작성한 내용들 구현

card, input들이 모바일화면으로 봤을 때 중앙에 위치할 수 있도록 수정

virtual keyboard의 확장성을 위해서 ref를 주입받아 사용하도록 변경

cos18

추가적으로 세번째 카드 번호에 이미 4개 번호가 입력된 상태에서, 두번째 카드번호 입력 이후 세번쨰 카드 번호로 넘어갔을 때 시큐리티패드를 나갈 수 없는 오류 등 코드의 양이 많아서 모든 오류 사항을 리뷰드릴수 없었습니다 ㅠㅠ

다음번 코딩하실땐 최소한 프롭을 10개 이하 사용하시면서 처리하는게 좋을 것 같아요. 특히 폼 부분에서 언컨트롤드 작업으로 처리했으면 훨신 깔끔한 코드가 되었을 것 같네요.

cos18 · 2021-07-10T15:35:55Z

src/constant/constant.ts

+const THIS_YEAR = 21;
+const ABSOLUTE = false;
+const NORMAL = true;


이런 변수들은 env로 따로 빼서 관리하면 좋을 것 같습니다!

cos18 · 2021-07-10T15:36:08Z

src/constant/constant.ts

+  Add,
+}
+
+const THIS_YEAR = 21;


이번 년도는 new Date()로 처리 가능할 것 같습니다

cos18 · 2021-07-10T15:43:10Z

src/components/CardTemplate/cardTemplate.tsx

+  const expireDateFormat =
+    expireDate?.length === 4 ? strSplice(expireDate, '/', 0, 2) : expireDate;
+  return (
+    <>


태그가 하나로 이루어진 컴포넌트의 리턴을 한번 더 태그로 감쌀 필요가 없습니다

cos18 · 2021-07-10T15:44:46Z

src/components/CardChip/cardChip.tsx

+
+const CardChip = () => {
+  return (
+    <div className={'card-chip'} />


Suggested change

<div className={'card-chip'} />

<div className='card-chip' />

문자열로만 이루어진 prop은 중괄호로 감쌀 필요가 없습니다

cos18 · 2021-07-10T15:46:01Z

src/components/CardChip/cardChip.tsx

+import React from 'react';
+import './cardChip.css';
+
+const CardChip = () => {


CardTemplate에만 사용하는 CardChip은 굳이 컴포넌트로 나누지 않고 CardTemplate에 같이 넣어도 될 것 같습니다. 해당 내용은 styled-components 적용하시면서 연습해보시면 될것같아요

cos18 · 2021-07-10T16:00:31Z

src/components/CardList/cardList.css

@@ -0,0 +1,4 @@
+.cardList {


과제의 목표가 "모바일 UI/UX"이여서 PC로 접속할시 좀 안이쁘게 랜더링되는것 같은데, 컴포넌트에 max-width 정도를 설정해둔다면 어떨까 싶네요

cos18 · 2021-07-10T16:00:52Z

src/components/CardList/cardList.tsx

+          firstNumbers={card.cardNumber[0]}
+          secondNumbers={card.cardNumber[1]}
+          thirdNumbers={card.cardNumber[2]}
+          fourthNumbers={card.cardNumber[3]}


배열로 전달할 수 있는 방법이 없을까요...?

cos18 · 2021-07-10T16:04:48Z

src/components/CardAddForm/cardAddForm.tsx

+  const [brandName, setBrandName] = useState<string>('purple-card');
+  const [firstNumbers, setFirstNumbers] = useState<string>('');
+  const [secondNumbers, setSecondNumbers] = useState<string>('');
+  const [thirdNumbers, setThirdNumbers] = useState<string>('');
+  const [fourthNumbers, setFourthNumbers] = useState<string>('');
+  const [expireDate, setExpireDate] = useState<string>('');
+  const [publisher, serPublisher] = useState<string>('');
+  const [cvc, setCVC] = useState<string>('');
+  const [password, setPassword] = useState<string>('');


Card interface로 처리했다면 더 깔끔하지 않았을까요?

context api로 card interface를 받아오면 좋았겠다는 말씀이신거죠??

cos18 · 2021-07-10T16:06:37Z

src/components/CardAddForm/cardAddForm.tsx

+  setCardList: Dispatch<SetStateAction<Card[]>>;
+}
+
+const CardAddForm = ({


애초에 입력 폼 자체를 contextAPI로 처리했다면 더욱 더 깔끔할 것 같네요

cos18 · 2021-07-10T16:14:12Z

src/components/share/Button/button.css

+}
+
+.bottom-right {
+  position: fixed;


시큐리티 번호 누르는 키보드 위로 버튼이 뜹니다

KyungHan-Min and others added 30 commits July 4, 2021 23:24

feat: initial setting react, typescript, babel, webpack

dcb0e31

add gitignore

2be16bb

fix: remove .idea, dist

aa60090

webpack.config.ts 수정 \n devServer를 받을 수 있는 타입으로 설정

269a00e

fix: 불필요한 패키지 제거

06b4dd0

feat: storybook init

a17ce88

feat: add card component 생성

e0b9359

feat: Add componenet 생성

27f3f69

fix: add Component position fix

8251705

feat: cardList component 생성

64f7dca

feat: add component 분리

01299e9

add component -> card container + add 로 분리

fix: storybook path resolve 에러 해결

8d478fd

path를 alias로 축약해서 "@components"등으로 사용하는데 storybook에서 이 alias를 정상적으로 해결하지 못함. 따라서 .storybook/main.js를 수정하였음.

feat: label component 추가

ecabc1d

input form을 위한 label추가

feat: flex-space-around 생성

8865f6e

feat: 카드 번호 입력 폼 생성

7775f6e

카드번호를 입력하기 위해 초기에 첫 번째 칸에 포커싱된다. 입력을 마칠 때 마다 다음 칸으로 포커싱이 이동된다.

feat: add form ref 위치 조정

1b59505

add form의 ref위치를 cardNumberForm에서 cardForm으로 이동하여 카드 번호 컴포넌트와 만료일등 서로 다른 컴포넌트에서 포커싱이 이동될 수 있도록 함

feat: cardPublisherForm 추가

ec895d7

refactor: flexColumn, flexCenter 변경

8cdbc2c

flexCenter의 props interface에 children type 변경 flexColumn의 class-name style 변경

feat: utils 생성

55d8de7

string splice 함수 생성

feat: flex-between 컴포넌트 생성

8a69d0d

만료일과 카드 발급자의 위치를 조정하기 위해 생성

feat: firstNumber ref 추가

8e366f2

미작성된 항목 발견시 해당 돔으로 이동하기 위해 firstNumber ref를 생성하였음

feat: password 컴포넌트 생성

bab4125

style: 전체 폰트 적용

77caaa3

font-family에 "Noto Sans KR"을 적용함

style: card style 변경

760403b

card의 색상을 변경하였음

feat: card 컴포넌트 구현

cf9c5f5

style: card chip 추가

97ab44d

card의 chip 디자인임

refactor: cardConatiner children 변경

255cfae

기존 React.ReactChildren에서 JSX.Element를 사용하는 것으로 변경

feat: cvc 컴포넌트 생성

2ca0ddd

feat: expireDate 컴포넌트 생성

a0d5eb1

KyungHan-Min and others added 8 commits July 7, 2021 02:19

feat: password 컴포넌트 props 전달

bd03715

password에 props를 전달한다.

feat: publisher 컴포넌트 props 전달

196a0ff

style: input style 변경

512af16

style: label style 변경

1442ba1

docs: 기능 목록 1차 확인

64f9b9a

완료한 항목은 체크

feat & refactoring: todo 해결과 리팩토링

aba57da

todo에 작성한 내용들 구현

style: 배치 위치 조정

07bc769

card, input들이 모바일화면으로 봤을 때 중앙에 위치할 수 있도록 수정

feat: virtual keyboard 추가

dfa739e

cos18 self-requested a review July 8, 2021 07:42

feat: virtual keyboard ref를 주입받도록 수정

b754beb

virtual keyboard의 확장성을 위해서 ref를 주입받아 사용하도록 변경

cos18 reviewed Jul 10, 2021

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

kmin 과제 제출입니다. #1

kmin 과제 제출입니다. #1

Uh oh!

kmin-283 commented Jul 8, 2021 •

edited by hyo-choi

Loading

Uh oh!

cos18 left a comment

Uh oh!

cos18 Jul 10, 2021

Uh oh!

cos18 Jul 10, 2021

Uh oh!

cos18 Jul 10, 2021

Uh oh!

cos18 Jul 10, 2021

Uh oh!

cos18 Jul 10, 2021

Uh oh!

cos18 Jul 10, 2021

Uh oh!

cos18 Jul 10, 2021

Uh oh!

cos18 Jul 10, 2021

Uh oh!

kmin-283 Jul 12, 2021

Uh oh!

cos18 Jul 10, 2021

Uh oh!

cos18 Jul 10, 2021

Uh oh!

Uh oh!

	<div className={'card-chip'} />
	<div className='card-chip' />

kmin 과제 제출입니다. #1

Are you sure you want to change the base?

kmin 과제 제출입니다. #1

Uh oh!

Conversation

kmin-283 commented Jul 8, 2021 • edited by hyo-choi Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

카드 추가 폼

카드 확인

Uh oh!

cos18 left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

kmin-283 commented Jul 8, 2021 •

edited by hyo-choi

Loading