Skip to content
New issue

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

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

Already on GitHub? Sign in to your account

[1단계 - 페이먼츠] 병민(윤병인) 미션 제출합니다. #87

Merged
merged 78 commits into from
May 6, 2022
Merged
Changes from 1 commit
Commits
Show all changes
78 commits
Select commit Hold shift + click to select a range
13b0692
chore: initial setting완료
airman5573 Apr 26, 2022
2cd7296
fix(emotion): jsx pragma와 CRA의 충돌 문제를 해결한다
airman5573 Apr 26, 2022
8c1ad38
chore(storybook): storybook세팅을 한다
airman5573 Apr 26, 2022
aac168d
wip: backup
airman5573 Apr 26, 2022
d3bff97
feat(component): 신용카드 번호를 입력화는 필드를 추가한다
airman5573 Apr 27, 2022
a9a065d
feat(component): 만료일자를 입력하는 필드를 추가한다
airman5573 Apr 27, 2022
b45d53f
feat(component): 카드 소유자의 이름을 입력하는 필드를 추가한다
airman5573 Apr 27, 2022
30dad6f
feat(component): 보안코드를 입력하는 필드를 추가한다
airman5573 Apr 27, 2022
3df7ead
refactor(ui): 비밀정보 입력시 표시될 대체문자를 변경한다
airman5573 Apr 27, 2022
7bf4744
refactor(file-structure): 디렉토리를 복수형으로 변경한다
airman5573 Apr 27, 2022
1dc04c9
feat(component): 비밀번호 입력 필드에 autoFocus기능을 추가한다
airman5573 Apr 27, 2022
273a150
feat(context): context API를 사용해 전역으로 상태를 관리한다
airman5573 Apr 28, 2022
b0bef8b
refactor(utils): util함수를 파일로 분리한다
airman5573 Apr 28, 2022
25208d4
feat(component): 카드 컴포넌트를 추가한다
airman5573 Apr 28, 2022
05c1fde
refactor(utils): util함수를 개선한다
airman5573 Apr 28, 2022
a73a8b1
refactor(component): 카드 번호를 입력하는 컴포넌트에 불필요한 코드를 삭제하고 바뀐 유틸함수를 사용한다
airman5573 Apr 28, 2022
f374d71
refactor(component): presentaional component와 controlled component로 분리한다
airman5573 Apr 28, 2022
186bdf5
feat(component): confirm 버튼을 추가한다
airman5573 Apr 28, 2022
c123368
refactor(cleanup): 불필요한 console을 삭제한다
airman5573 Apr 28, 2022
5790a0c
fix(component): 유효기간을 저장할때 순수하게 숫자만 저장하고 보여줄때 변환해서 보여준다
airman5573 Apr 28, 2022
2e04610
feat(component): navigation을 추가한다
airman5573 Apr 28, 2022
c9028c7
feat(utils): util함수를 추가한다
airman5573 Apr 28, 2022
a2366af
feat(ui): app에 컴포넌트들을 보여준다
airman5573 Apr 28, 2022
b2907df
refactor(component): presentational component와 container component로 …
airman5573 Apr 28, 2022
3c3cae6
refactor(emotion): styled component로 변환한다
airman5573 Apr 28, 2022
e3337ec
refactor(component): 카드 비밀번호 입력하는 필드들을 묶은 component를 생성한다
airman5573 Apr 28, 2022
ec39615
test(storybook): story를 추가한다
airman5573 Apr 28, 2022
b37c160
fix(component): 카드에 표현될 유효기간의 format을 수정한다
airman5573 Apr 28, 2022
b0b97a5
fix(logic): 카드번호 입력시 16글자를 초과하지 않도록 수정한다
airman5573 Apr 28, 2022
739e86c
fix(card-number): 카드 번호 입력시 불편했던 문제들 해결한다
airman5573 Apr 28, 2022
b8eaee9
fix: 이름입력에 스페이스바를 허용한다
airman5573 Apr 28, 2022
10203c0
feat(ui): 카드 정보를 다 체웠을때 기본 카드 테마가 설정된다
airman5573 Apr 28, 2022
7fa1209
feat(storybook): context api를 사용할 수 있도록 설정한다
airman5573 Apr 28, 2022
a098b9b
refactor(storybook): 불필요한 코드를 삭제한다
airman5573 Apr 28, 2022
eb1d742
feat(utils): 유틸 함수를 추가한다
airman5573 Apr 28, 2022
5b4d6d7
fix(card-password): 다른 필드가 다 채워졌을때 비밀번호 필드에 포커싱을 준다
airman5573 Apr 28, 2022
c3c8504
feat(ui): cVC입력시 카드의 뒷면을 보여준다
airman5573 Apr 29, 2022
3a996d4
refactor(cleanup): 불필요한 코드를 삭제한다
airman5573 Apr 29, 2022
ea6f420
chore: 배포 스크립트를 추가한다
airman5573 Apr 29, 2022
fddb4cd
refactor: cVC관련 Type을 설정한다(아까 미처 올리지 못한)
airman5573 Apr 29, 2022
8d8b2e2
chore: cra없이 react프로젝트를 재구성 한다
airman5573 Apr 30, 2022
d2ed97f
refactor(lint): prettier에서 제안하는 방식으로 코드를 변경한다
airman5573 Apr 30, 2022
c63d430
chore(lint): eslint 설정을 수정한다
airman5573 Apr 30, 2022
4f2c4f7
chore(fix): typescript parser option을 추가한다
airman5573 Apr 30, 2022
6c3b611
refactor(cleanup): 사용하지 않는 import를 삭제한다
airman5573 Apr 30, 2022
943bee1
fix: lint오류를 해결한다
airman5573 Apr 30, 2022
2f9da3a
wip:
airman5573 Apr 30, 2022
7534eea
refactor: 파일 포맷팅
airman5573 Apr 30, 2022
fe7a190
fix(eslint): eslint작동시 필요한 플러그인 추가
airman5573 Apr 30, 2022
18da41c
refactor(lint): eslint가 뿜어내는 오류 해결
airman5573 Apr 30, 2022
962b5e4
fix(card-number): 카드번호를 중간에서 입력/삭제시 제대로 삭제가 안되는 문제를 해결한다
airman5573 Apr 30, 2022
b196eda
refactor(ui): 카드 만료일 입력을 개선한다
airman5573 Apr 30, 2022
a19f456
refactor(component): 테스트에 사용했던 컴포넌트를 삭제한다
airman5573 May 1, 2022
7b0e48d
wip: wip
airman5573 May 1, 2022
c572018
chore: ts-loader대신 babel로 typescript를 해석하고 사용한다
airman5573 May 1, 2022
3f623c8
chore(git): dist폴더는 tracking하지 않는다
airman5573 May 1, 2022
b72f635
chore(emotion): css prop으로 스타일을 추가 할 수 있도록 설정한다
airman5573 May 1, 2022
1bc3f22
refactor(lint): ''도 false지만 3항연산자를 쓰고 있으니 boolean으로 처리한다
airman5573 May 1, 2022
ea76029
refactor(lint): 전반적으로 lint가 제시하는 스타일로 수정한다
airman5573 May 1, 2022
bb65511
fix(ui): 비밀번호 입력 필드를 가로로 정렬한다
airman5573 May 1, 2022
ff4c6d0
chore(types): react, react-dom type을 추가한다
airman5573 May 3, 2022
531cb6b
refactor(ui): 카드 입력 필드에 우선적으로 포커스를 준다
airman5573 May 3, 2022
23c8732
refactor(readability): 가독성을 위해 스타일을 뒤로 뺀다
airman5573 May 3, 2022
ae43b69
chore(lint): 변수 선언 전에 해당 변수를 사용하면 안되는 룰을 수정한다
airman5573 May 3, 2022
ef19167
refactor(cleanup): 사용하지 않는 코드를 삭제한다
airman5573 May 3, 2022
d9a2980
refactor(logic): 이름 입력시 처리하는 로직을 단순화한다
airman5573 May 3, 2022
de6e959
refactor(readability): 만료일 입력 로직을 조금 분리한다
airman5573 May 3, 2022
fe67ad7
refactor(cleanup): 컴포넌트 내부에 함수를 정의하지 않고 유틸함수를 사용한다
airman5573 May 3, 2022
497fb82
refactor(readability): 카드번호 입력 로직을 분리한다
airman5573 May 3, 2022
d093c91
refactor(readability): 다른 input컴포넌트와 일관성 있게 함수를 배치한다
airman5573 May 3, 2022
f3476fd
refactor: img src에 base64를 직접 넣어주지 않고 svg를 import해서 사용한다
airman5573 May 3, 2022
8dfb4aa
fix: selectionStart가 0인 경우를 고려하여 null체크를 한다
airman5573 May 3, 2022
a9737ab
refactor(cleanup): console을 삭제한다
airman5573 May 3, 2022
896a8b2
refactor(semantic): div대신 form태그를 사용한다
airman5573 May 3, 2022
b1daba4
chore(git): build폴더를 tracking하지 않는다
airman5573 May 3, 2022
aa048cb
refactor(directory): directory구조를 변경한다
airman5573 May 3, 2022
c7ed7b8
fix(ui): cvc넘버를 안보이게 한다
airman5573 May 3, 2022
9146df0
refactor(naming): fieldset내부 컴포넌트의 이름을 변경한다
airman5573 May 4, 2022
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
refactor: img src에 base64를 직접 넣어주지 않고 svg를 import해서 사용한다
airman5573 committed May 3, 2022

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
commit f3476fdcd95d6f95ed4d2a8b9a2aac9544a99c78
2 changes: 2 additions & 0 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 2 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
@@ -56,6 +56,7 @@
"eslint-plugin-react": "^7.29.4",
"eslint-plugin-react-hooks": "^4.5.0",
"eslint-plugin-storybook": "^0.5.11",
"file-loader": "^6.2.0",
"fork-ts-checker-webpack-plugin": "^7.2.9",
"gh-pages": "^3.2.3",
"html-webpack-plugin": "^5.5.0",
@@ -66,6 +67,7 @@
"sass-loader": "^12.6.0",
"ts-loader": "^9.2.8",
"typescript": "^4.6.4",
"url-loader": "^4.1.1",
"webpack": "^5.72.0",
"webpack-cli": "^4.9.2",
"webpack-dev-server": "^4.8.1"
31 changes: 20 additions & 11 deletions src/components/atoms/BackButton.tsx
Original file line number Diff line number Diff line change
@@ -1,22 +1,31 @@
import { css } from '@emotion/react';
import React from 'react';
import { css } from '@emotion/react';
import styled from '@emotion/styled';
import IconBackArrow from '../../images/back-arrow.svg';

function BackButton() {
return (
<div>
<img
css={style}
src="data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI1MTJweCIgaGVpZ2h0PSI1MTJweCIgdmlld0JveD0iMCAwIDUxMiA1MTIiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwYXRoIGQ9Ik0zNTIgMTI4LjRMMzE5LjcgOTYgMTYwIDI1NmwxNTkuNyAxNjAgMzIuMy0zMi40TDIyNC43IDI1NnoiLz48bWV0YWRhdGE+PHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIiB4bWxuczpyZGZzPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwLzAxL3JkZi1zY2hlbWEjIiB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iPjxyZGY6RGVzY3JpcHRpb24gYWJvdXQ9Imh0dHBzOi8vaWNvbnNjb3V0LmNvbS9sZWdhbCNsaWNlbnNlcyIgZGM6dGl0bGU9ImlvcyxhcnJvdyxiYWNrIiBkYzpkZXNjcmlwdGlvbj0iaW9zLGFycm93LGJhY2siIGRjOnB1Ymxpc2hlcj0iSWNvbnNjb3V0IiBkYzpkYXRlPSIyMDE3LTA5LTI0IiBkYzpmb3JtYXQ9ImltYWdlL3N2Zyt4bWwiIGRjOmxhbmd1YWdlPSJlbiI+PGRjOmNyZWF0b3I+PHJkZjpCYWc+PHJkZjpsaT5CZW5qYW1pbiBKIFNwZXJyeTwvcmRmOmxpPjwvcmRmOkJhZz48L2RjOmNyZWF0b3I+PC9yZGY6RGVzY3JpcHRpb24+PC9yZGY6UkRGPjwvbWV0YWRhdGE+PC9zdmc+"
alt=""
/>
<Button>
<img
src={IconBackArrow}
alt=""
/>
</Button>
</div>
);
}

const style = css({
width: '22px',
height: '22px',
marginRight: '18px',
});
const Button = styled.button`
background-color: inherit;
border: none;
outline: none;
width: 32px;
height: 32px;
cursor: pointer;
img {
width: 100%;
}
`;

export default BackButton;
4 changes: 0 additions & 4 deletions src/components/atoms/card-number/CardNumberInputContainer.tsx
Original file line number Diff line number Diff line change
@@ -103,10 +103,6 @@ function CardNumberInputContainer() {
return;
}

// 1234 - 1234 에서 스페이스바 혹은 -를 제거하는 경우에는 그냥 커서만 왼쪽으로 옮긴다
// -를 기준으로 좌우에 스페이스바를 넣어준다
input.value = transformCardNumber(pureValue, ' - ');

// 입력하는 경우
if (cardNumber.length < pureValue.length) {
return handleInsert(input);
4 changes: 4 additions & 0 deletions src/custom.d.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
declare module "*.svg" {
const content: any;
export default content;
}
1 change: 1 addition & 0 deletions src/images/back-arrow.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
10 changes: 9 additions & 1 deletion webpack.config.js
Original file line number Diff line number Diff line change
@@ -19,7 +19,15 @@ module.exports = {
{
test: /\.(scss)$/,
use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"]
}
},
{
test: /\.svg$/,
use: [
{
loader: 'url-loader',
},
],
},
]
},
plugins: [