From 11eff1ebd6f1e97ce10678a9225ccf66ace01a69 Mon Sep 17 00:00:00 2001 From: YoungWoo Kim <77326660+kyw0716@users.noreply.github.com> Date: Mon, 8 May 2023 12:02:59 +0900 Subject: [PATCH] =?UTF-8?q?[=ED=8E=98=EC=9D=B4=EB=A8=BC=EC=B8=A0=20?= =?UTF-8?q?=EB=AF=B8=EC=85=98=20Step=203]=20=EC=84=BC=ED=8A=B8(=EA=B9=80?= =?UTF-8?q?=EC=98=81=EC=9A=B0)=20=EB=AF=B8=EC=85=98=20=EC=A0=9C=EC=B6=9C?= =?UTF-8?q?=ED=95=A9=EB=8B=88=EB=8B=A4.=20(#293)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * style: Array.from.forEach => card.정보.forEach * chore: 배포한 모달 패키지 설치 * refactor: 배포한 모달 패키지 사용 * feat: 로딩 스켈레톤 추가 --- package-lock.json | 180 +++++++++++++++++- package.json | 1 + src/App.tsx | 2 +- src/components/addCardForm/index.tsx | 10 +- src/components/cardViewer/index.tsx | 2 +- src/components/modal/template/BottomSheet.tsx | 57 ------ src/components/providers/ModalProvider.tsx | 38 ---- .../selectCardCompany/CardCompany.tsx | 2 +- .../content => }/selectCardCompany/index.tsx | 6 +- src/components/skeleton/RegisterLoading.tsx | 128 +++++++++++++ src/hooks/useModalContext.ts | 17 -- src/pages/Main.tsx | 4 +- src/pages/register/AddCardNickName.tsx | 57 ++++-- src/pages/register/index.tsx | 12 +- src/stories/Modal/BottomSheet.stories.tsx | 9 +- .../Modal/SelectCardCompanyModal.stories.tsx | 8 +- src/stories/Page/RegisterPage.stories.tsx | 2 +- 17 files changed, 360 insertions(+), 175 deletions(-) delete mode 100644 src/components/modal/template/BottomSheet.tsx delete mode 100644 src/components/providers/ModalProvider.tsx rename src/components/{modal/content => }/selectCardCompany/CardCompany.tsx (92%) rename src/components/{modal/content => }/selectCardCompany/index.tsx (88%) create mode 100644 src/components/skeleton/RegisterLoading.tsx delete mode 100644 src/hooks/useModalContext.ts diff --git a/package-lock.json b/package-lock.json index ad249a3862..e3b66f5e0c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -19,6 +19,7 @@ "web-vitals": "^2.1.4" }, "devDependencies": { + "@kyw0716/woowacourse-scent-modal": "^0.0.5", "@storybook/addon-essentials": "^7.0.5", "@storybook/addon-interactions": "^7.0.5", "@storybook/addon-links": "^7.0.5", @@ -3597,6 +3598,167 @@ "integrity": "sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA==", "dev": true }, + "node_modules/@kyw0716/woowacourse-scent-modal": { + "version": "0.0.5", + "resolved": "https://registry.npmjs.org/@kyw0716/woowacourse-scent-modal/-/woowacourse-scent-modal-0.0.5.tgz", + "integrity": "sha512-DHCebHnO4GpixeXq3eLQzQ/PUuoOyyQqUa3ur/998n3Vr4PpAuxiF13JcHIbFbSJiVzIrDYVvkP0N+mciCi+MA==", + "dev": true, + "dependencies": { + "@testing-library/jest-dom": "^5.16.5", + "@testing-library/react": "^13.4.0", + "@testing-library/user-event": "^13.5.0", + "@types/jest": "^27.5.2", + "@types/node": "^16.18.25", + "@types/react": "^18.2.0", + "@types/react-dom": "^18.2.1", + "@types/styled-components": "^5.1.26", + "react": "^18.2.0", + "react-dom": "^18.2.0", + "react-scripts": "5.0.1", + "styled-components": "^5.3.10", + "typescript": "^4.9.5", + "web-vitals": "^2.1.4" + } + }, + "node_modules/@kyw0716/woowacourse-scent-modal/node_modules/@testing-library/dom": { + "version": "8.20.0", + "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-8.20.0.tgz", + "integrity": "sha512-d9ULIT+a4EXLX3UU8FBjauG9NnsZHkHztXoIcTsOKoOw030fyjheN9svkTULjJxtYag9DZz5Jz5qkWZDPxTFwA==", + "dev": true, + "dependencies": { + "@babel/code-frame": "^7.10.4", + "@babel/runtime": "^7.12.5", + "@types/aria-query": "^5.0.1", + "aria-query": "^5.0.0", + "chalk": "^4.1.0", + "dom-accessibility-api": "^0.5.9", + "lz-string": "^1.4.4", + "pretty-format": "^27.0.2" + }, + "engines": { + "node": ">=12" + } + }, + "node_modules/@kyw0716/woowacourse-scent-modal/node_modules/@testing-library/react": { + "version": "13.4.0", + "resolved": "https://registry.npmjs.org/@testing-library/react/-/react-13.4.0.tgz", + "integrity": "sha512-sXOGON+WNTh3MLE9rve97ftaZukN3oNf2KjDy7YTx6hcTO2uuLHuCGynMDhFwGw/jYf4OJ2Qk0i4i79qMNNkyw==", + "dev": true, + "dependencies": { + "@babel/runtime": "^7.12.5", + "@testing-library/dom": "^8.5.0", + "@types/react-dom": "^18.0.0" + }, + "engines": { + "node": ">=12" + }, + "peerDependencies": { + "react": "^18.0.0", + "react-dom": "^18.0.0" + } + }, + "node_modules/@kyw0716/woowacourse-scent-modal/node_modules/@testing-library/user-event": { + "version": "13.5.0", + "resolved": "https://registry.npmjs.org/@testing-library/user-event/-/user-event-13.5.0.tgz", + "integrity": "sha512-5Kwtbo3Y/NowpkbRuSepbyMFkZmHgD+vPzYB/RJ4oxt5Gj/avFFBYjhw27cqSVPVw/3a67NK1PbiIr9k4Gwmdg==", + "dev": true, + "dependencies": { + "@babel/runtime": "^7.12.5" + }, + "engines": { + "node": ">=10", + "npm": ">=6" + }, + "peerDependencies": { + "@testing-library/dom": ">=7.21.4" + } + }, + "node_modules/@kyw0716/woowacourse-scent-modal/node_modules/@types/jest": { + "version": "27.5.2", + "resolved": "https://registry.npmjs.org/@types/jest/-/jest-27.5.2.tgz", + "integrity": "sha512-mpT8LJJ4CMeeahobofYWIjFo0xonRS/HfxnVEPMPFSQdGUt1uHCnoPT7Zhb+sjDU2wz0oKV0OLUR0WzrHNgfeA==", + "dev": true, + "dependencies": { + "jest-matcher-utils": "^27.0.0", + "pretty-format": "^27.0.0" + } + }, + "node_modules/@kyw0716/woowacourse-scent-modal/node_modules/@types/node": { + "version": "16.18.25", + "resolved": "https://registry.npmjs.org/@types/node/-/node-16.18.25.tgz", + "integrity": "sha512-rUDO6s9Q/El1R1I21HG4qw/LstTHCPO/oQNAwI/4b2f9EWvMnqt4d3HJwPMawfZ3UvodB8516Yg+VAq54YM+eA==", + "dev": true + }, + "node_modules/@kyw0716/woowacourse-scent-modal/node_modules/ansi-styles": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", + "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", + "dev": true, + "dependencies": { + "color-convert": "^2.0.1" + }, + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/chalk/ansi-styles?sponsor=1" + } + }, + "node_modules/@kyw0716/woowacourse-scent-modal/node_modules/chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "dev": true, + "dependencies": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/chalk?sponsor=1" + } + }, + "node_modules/@kyw0716/woowacourse-scent-modal/node_modules/color-convert": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", + "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", + "dev": true, + "dependencies": { + "color-name": "~1.1.4" + }, + "engines": { + "node": ">=7.0.0" + } + }, + "node_modules/@kyw0716/woowacourse-scent-modal/node_modules/color-name": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", + "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", + "dev": true + }, + "node_modules/@kyw0716/woowacourse-scent-modal/node_modules/has-flag": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", + "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", + "dev": true, + "engines": { + "node": ">=8" + } + }, + "node_modules/@kyw0716/woowacourse-scent-modal/node_modules/supports-color": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", + "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", + "dev": true, + "dependencies": { + "has-flag": "^4.0.0" + }, + "engines": { + "node": ">=8" + } + }, "node_modules/@leichtgewicht/ip-codec": { "version": "2.0.4", "resolved": "https://registry.npmjs.org/@leichtgewicht/ip-codec/-/ip-codec-2.0.4.tgz", @@ -7457,9 +7619,9 @@ "integrity": "sha512-EEhsLsD6UsDM1yFhAvy0Cjr6VwmpMWqFBCb9w07wVugF7w9nfajxLuVmngTIpgS6svCnm6Vaw+MZhoDCKnOfsw==" }, "node_modules/@types/react": { - "version": "18.0.38", - "resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.38.tgz", - "integrity": "sha512-ExsidLLSzYj4cvaQjGnQCk4HFfVT9+EZ9XZsQ8Hsrcn8QNgXtpZ3m9vSIC2MWtx7jHictK6wYhQgGh6ic58oOw==", + "version": "18.2.2", + "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.2.tgz", + "integrity": "sha512-4GZH3GLuqdZbDvOW5Pqqe7jgsDrKwkJfZMZLwFcgoz3CVDSvnMeG/Ihe44IbZ5Mqhh1fyTh5e44z6pNjIzzV8g==", "dev": true, "dependencies": { "@types/prop-types": "*", @@ -7468,9 +7630,9 @@ } }, "node_modules/@types/react-dom": { - "version": "18.0.11", - "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.0.11.tgz", - "integrity": "sha512-O38bPbI2CWtgw/OoQoY+BRelw7uysmXbWvw3nLWO21H1HSh+GOlqPuXshJfjmpNlKiiSDG9cc1JZAaMmVdcTlw==", + "version": "18.2.3", + "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.3.tgz", + "integrity": "sha512-hxXEXWxFJXbY0LMj/T69mznqOZJXNtQMqVxIiirVAZnnpeYiD4zt+lPsgcr/cfWg2VLsxZ1y26vigG03prYB+Q==", "dev": true, "dependencies": { "@types/react": "*" @@ -21343,9 +21505,9 @@ } }, "node_modules/styled-components": { - "version": "5.3.9", - "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-5.3.9.tgz", - "integrity": "sha512-Aj3kb13B75DQBo2oRwRa/APdB5rSmwUfN5exyarpX+x/tlM/rwZA2vVk2vQgVSP6WKaZJHWwiFrzgHt+CLtB4A==", + "version": "5.3.10", + "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-5.3.10.tgz", + "integrity": "sha512-3kSzSBN0TiCnGJM04UwO1HklIQQSXW7rCARUk+VyMR7clz8XVlA3jijtf5ypqoDIdNMKx3la4VvaPFR855SFcg==", "dependencies": { "@babel/helper-module-imports": "^7.0.0", "@babel/traverse": "^7.4.5", diff --git a/package.json b/package.json index efd567e675..c30c1a1c2e 100644 --- a/package.json +++ b/package.json @@ -53,6 +53,7 @@ ] }, "devDependencies": { + "@kyw0716/woowacourse-scent-modal": "^0.0.5", "@storybook/addon-essentials": "^7.0.5", "@storybook/addon-interactions": "^7.0.5", "@storybook/addon-links": "^7.0.5", diff --git a/src/App.tsx b/src/App.tsx index 0080eae5cd..4eaaf89b6e 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -3,8 +3,8 @@ import { Main } from './pages/Main'; import { Register } from './pages/register'; import { AddCardNickName } from './pages/register/AddCardNickName'; import { CardInfoProvider } from './components/providers/CardInfoProvider'; -import { ModalProvider } from './components/providers/ModalProvider'; import { CardListProvider } from './components/providers/CardListProvider'; +import { ModalProvider } from '@kyw0716/woowacourse-scent-modal'; function App() { return ( diff --git a/src/components/addCardForm/index.tsx b/src/components/addCardForm/index.tsx index 309513961d..5e1b4cf880 100644 --- a/src/components/addCardForm/index.tsx +++ b/src/components/addCardForm/index.tsx @@ -10,10 +10,10 @@ import { useCardInfoActionContext, useCardInfoValueContext, } from '../../hooks/cardInfoContext'; -import { useModalStateContext } from '../../hooks/useModalContext'; import { v4 } from 'uuid'; import { useCardList } from '../../hooks/useCardList'; import { useFormValidation } from '../../hooks/useFormValidation'; +import { useModalStateContext } from '@kyw0716/woowacourse-scent-modal'; export const AddNewCardForm = () => { const navigate = useNavigate(); @@ -107,14 +107,6 @@ const Style = { width: max-content; `, - // InputContainer: styled.div` - // display: flex; - // flex-direction: column; - - // width: max-content; - - // gap: 19px; - // `, Caption: styled.span` width: 241px; diff --git a/src/components/cardViewer/index.tsx b/src/components/cardViewer/index.tsx index 6e791e8c2e..b08a4cf60d 100644 --- a/src/components/cardViewer/index.tsx +++ b/src/components/cardViewer/index.tsx @@ -1,7 +1,7 @@ import styled from 'styled-components'; import { v4 } from 'uuid'; import { COMPANIES } from '../../constants/cardCompany'; -import { isCompanyId } from '../modal/content/selectCardCompany'; +import { isCompanyId } from '../selectCardCompany'; import { CardViewerProps } from '../../types/card'; interface Props extends CardViewerProps { diff --git a/src/components/modal/template/BottomSheet.tsx b/src/components/modal/template/BottomSheet.tsx deleted file mode 100644 index a1affbde7c..0000000000 --- a/src/components/modal/template/BottomSheet.tsx +++ /dev/null @@ -1,57 +0,0 @@ -import { Fragment, ReactNode } from 'react'; -import styled, { keyframes } from 'styled-components'; -import { useModalActionContext } from '../../../hooks/useModalContext'; - -interface Props { - children: ReactNode; -} - -export const BottomSheet = ({ children }: Props) => { - const { closeModal } = useModalActionContext(); - - return ( - - - {children} - - ); -}; - -const ModalShowKeyframes = keyframes` -from { - opacity: 0; - transform: translateY(100%); - } - to { - opacity: 1; - transform: translateY(0); - } -`; - -const Style = { - BackDrop: styled.div` - width: 100vw; - height: 100vh; - - position: fixed; - top: 0; - left: 0; - - background-color: #0000006d; - `, - Content: styled.div` - width: 100vw; - height: max-content; - - display: flex; - justify-content: center; - position: fixed; - bottom: 0; - left: 0; - - padding: 20px 0; - background-color: white; - - animation: ${ModalShowKeyframes} 0.4s; - `, -}; diff --git a/src/components/providers/ModalProvider.tsx b/src/components/providers/ModalProvider.tsx deleted file mode 100644 index 20c66b8474..0000000000 --- a/src/components/providers/ModalProvider.tsx +++ /dev/null @@ -1,38 +0,0 @@ -import { ReactNode, createContext, useEffect, useMemo, useState } from 'react'; - -interface ModalProps { - children: ReactNode; -} - -export const ModalStateContext = createContext({ - isOpen: false, -}); - -export const ModalActionContext = createContext({ - openModal: () => {}, - closeModal: () => {}, -}); - -export const ModalProvider = ({ children }: ModalProps) => { - const [isOpen, setIsOpen] = useState(false); - - const action = useMemo( - () => ({ - openModal() { - setIsOpen(true); - }, - closeModal() { - setIsOpen(false); - }, - }), - [] - ); - - return ( - - - {children} - - - ); -}; diff --git a/src/components/modal/content/selectCardCompany/CardCompany.tsx b/src/components/selectCardCompany/CardCompany.tsx similarity index 92% rename from src/components/modal/content/selectCardCompany/CardCompany.tsx rename to src/components/selectCardCompany/CardCompany.tsx index 046c707422..33440cb062 100644 --- a/src/components/modal/content/selectCardCompany/CardCompany.tsx +++ b/src/components/selectCardCompany/CardCompany.tsx @@ -1,5 +1,5 @@ import styled from 'styled-components'; -import { COMPANIES } from '../../../../constants/cardCompany'; +import { COMPANIES } from '../../constants/cardCompany'; interface Props { companyId: string; diff --git a/src/components/modal/content/selectCardCompany/index.tsx b/src/components/selectCardCompany/index.tsx similarity index 88% rename from src/components/modal/content/selectCardCompany/index.tsx rename to src/components/selectCardCompany/index.tsx index ba63cd3807..32e210415e 100644 --- a/src/components/modal/content/selectCardCompany/index.tsx +++ b/src/components/selectCardCompany/index.tsx @@ -1,9 +1,9 @@ import styled from 'styled-components'; -import { COMPANIES } from '../../../../constants/cardCompany'; +import { COMPANIES } from '../../constants/cardCompany'; import { CardCompany } from './CardCompany'; import { v4 } from 'uuid'; -import { useCardInfoActionContext } from '../../../../hooks/cardInfoContext'; -import { useModalActionContext } from '../../../../hooks/useModalContext'; +import { useCardInfoActionContext } from '../../hooks/cardInfoContext'; +import { useModalActionContext } from '@kyw0716/woowacourse-scent-modal'; export const isCompanyId = ( id: string | undefined diff --git a/src/components/skeleton/RegisterLoading.tsx b/src/components/skeleton/RegisterLoading.tsx new file mode 100644 index 0000000000..c4ed01aead --- /dev/null +++ b/src/components/skeleton/RegisterLoading.tsx @@ -0,0 +1,128 @@ +import styled, { keyframes } from 'styled-components'; + +export const RegisterLoading = () => { + return ; +}; + +const thumbMove = keyframes` +0% { + left: 60px; + top: 8px; + } + 10% { + left: 20px; + top: 8px; + } + 20% { + left: 10px; + top: 40px; + } + 30% { + left: 50px; + top: 40px; + } + 40% { + left: 50px; + top: 80px; + } + 50% { + left: 20px; + top: 80px; + } + 60% { + left: 10px; + top: 110px; + } + 70% { + left: 60px; + top: 110px; + } + 80% { + left: 75px; + top: 135px; + } + 90% { + left: 45px; + top: 155px; + } + 100% { + left: 25px; + top: 8px; + } +`; + +const clpszp = keyframes` + 0% { + background-position: 5px 5px, 5px 40px, 5px 75px, 5px 110px, 5px 145px; + } + 20% { + background-position: -100px 5px, 5px 40px, 5px 75px, 5px 110px, 5px 145px; + } + 40% { + background-position: -100px 5px, 100px 40px, 5px 75px, 5px 110px, + 5px 145px; + } + 60% { + background-position: -100px 5px, 100px 40px, -100px 75px, 5px 110px, + 5px 145px; + } + 80% { + background-position: -100px 5px, 100px 40px, -100px 75px, 100px 110px, + 5px 145px; + } + 100% { + background-position: -100px 5px, 100px 40px, -100px 75px, 100px 110px, + -100px 145px; + } +`; + +const Phone = styled.div` + & { + width: 112px; + height: 218px; + border-radius: 8px; + background: #fff; + background-image: linear-gradient(#c5eeef 30px, transparent 0), + linear-gradient(#fbf8f1 30px, transparent 0), + linear-gradient(#92dee4 30px, transparent 0), + linear-gradient(#4db7d3 30px, transparent 0), + linear-gradient(#4096c7 30px, transparent 0); + background-repeat: no-repeat; + background-position: 5px 5px, 5px 40px, 5px 75px, 5px 110px, 5px 145px; + background-size: 90px 30px; + border: 6px solid #222; + border-width: 18px 6px 20px; + box-sizing: border-box; + position: relative; + animation: ${clpszp} 4s linear infinite; + } + &:before { + content: ''; + position: absolute; + left: -6px; + top: -18px; + width: 112px; + height: 218px; + border-radius: 8px; + background: linear-gradient( + 80deg, + rgba(0, 0, 0, 0.05) 45%, + rgba(0, 0, 0, 0) 46% + ); + } + &:after { + content: ''; + position: absolute; + box-sizing: border-box; + left: 60px; + top: 8px; + width: 24px; + height: 24px; + z-index: 2; + backdrop-filter: blur(5px); + border-radius: 50%; + background: rgba(0, 0, 0, 0.12); + border: 2px solid rgba(255, 255, 255, 0.2); + animation: ${thumbMove} 4s linear infinite; + } +`; diff --git a/src/hooks/useModalContext.ts b/src/hooks/useModalContext.ts deleted file mode 100644 index 50d34dda39..0000000000 --- a/src/hooks/useModalContext.ts +++ /dev/null @@ -1,17 +0,0 @@ -import { useContext } from 'react'; -import { - ModalActionContext, - ModalStateContext, -} from '../components/providers/ModalProvider'; - -export const useModalStateContext = () => { - const modalState = useContext(ModalStateContext); - - return modalState; -}; - -export const useModalActionContext = () => { - const modalAction = useContext(ModalActionContext); - - return modalAction; -}; diff --git a/src/pages/Main.tsx b/src/pages/Main.tsx index 80c5c016a6..bee5d45735 100644 --- a/src/pages/Main.tsx +++ b/src/pages/Main.tsx @@ -30,7 +30,7 @@ export const Main = () => { const setCardInfo = (card: Card) => { if (card.companyId) setCompanyId(card.companyId); - Array.from({ length: 4 }).forEach((_, i) => { + card.cardNumber.forEach((_, i) => { setCardNumber(i, card.cardNumber[i]); }); @@ -41,7 +41,7 @@ export const Main = () => { setSecurityCode(card.securityCode); - Array.from({ length: 2 }).forEach((_, i) => { + card.password.forEach((_, i) => { setPassword(i, card.password[i]); }); diff --git a/src/pages/register/AddCardNickName.tsx b/src/pages/register/AddCardNickName.tsx index 0d7dd6b7db..220a2f9a51 100644 --- a/src/pages/register/AddCardNickName.tsx +++ b/src/pages/register/AddCardNickName.tsx @@ -8,7 +8,8 @@ import { Layout } from '../../layout'; import { useNavigate } from 'react-router-dom'; import { useLocation } from 'react-router-dom'; import { useCardList } from '../../hooks/useCardList'; -import { useRef } from 'react'; +import { useRef, useState } from 'react'; +import { RegisterLoading } from '../../components/skeleton/RegisterLoading'; export const AddCardNickName = () => { const navigate = useNavigate(); @@ -20,6 +21,8 @@ export const AddCardNickName = () => { const { setNickNameToCard } = useCardList(); + const [isLoading, setIsLoading] = useState(false); + const inputRef = useRef(null); return ( @@ -32,32 +35,44 @@ export const AddCardNickName = () => { setNickNameToCard(cardId, inputRef.current?.value); - navigate('/'); + setIsLoading(true); + + setTimeout(() => { + navigate('/'); + }, 4000); }} > - {state === 'modify' + {isLoading + ? '카드를 등록중입니다!' + : state === 'modify' ? '카드 별명 수정!' : '카드 등록이 완료되었습니다!'} - - - - setNickName(e.target.value)} - value={nickName ?? ''} - placeholder="카드 별명" - /> - - 확인 - + {isLoading ? ( + + ) : ( + <> + + + + setNickName(e.target.value)} + value={nickName ?? ''} + placeholder="카드 별명" + /> + + 확인 + + + )} ); diff --git a/src/pages/register/index.tsx b/src/pages/register/index.tsx index af2e54e43a..d5cffb5d87 100644 --- a/src/pages/register/index.tsx +++ b/src/pages/register/index.tsx @@ -2,18 +2,18 @@ import styled from 'styled-components'; import { AddNewCardForm } from '../../components/addCardForm'; import { Layout } from '../../layout'; import { BackButton } from '../../layout/BackButton'; -import { BottomSheet } from '../../components/modal/template/BottomSheet'; -import { SelectCardCompanyModal } from '../../components/modal/content/selectCardCompany'; -import { - useModalActionContext, - useModalStateContext, -} from '../../hooks/useModalContext'; +import { SelectCardCompanyModal } from '../../components/selectCardCompany'; import { useEffect } from 'react'; import { CardViewer } from '../../components/cardViewer'; import { useCardInfoActionContext, useCardInfoValueContext, } from '../../hooks/cardInfoContext'; +import { + useModalStateContext, + useModalActionContext, + BottomSheet, +} from '@kyw0716/woowacourse-scent-modal'; export const Register = () => { const { openModal } = useModalActionContext(); diff --git a/src/stories/Modal/BottomSheet.stories.tsx b/src/stories/Modal/BottomSheet.stories.tsx index 11ed2024e8..bd78bd9ee2 100644 --- a/src/stories/Modal/BottomSheet.stories.tsx +++ b/src/stories/Modal/BottomSheet.stories.tsx @@ -1,11 +1,10 @@ -import type { Meta } from '@storybook/react'; - -import { BottomSheet } from '../../components/modal/template/BottomSheet'; -import { ModalProvider } from '../../components/providers/ModalProvider'; import { + BottomSheet, + ModalProvider, useModalActionContext, useModalStateContext, -} from '../../hooks/useModalContext'; +} from '@kyw0716/woowacourse-scent-modal'; +import type { Meta } from '@storybook/react'; const meta = { title: 'Example/Modal', diff --git a/src/stories/Modal/SelectCardCompanyModal.stories.tsx b/src/stories/Modal/SelectCardCompanyModal.stories.tsx index 115f63983c..d74e536971 100644 --- a/src/stories/Modal/SelectCardCompanyModal.stories.tsx +++ b/src/stories/Modal/SelectCardCompanyModal.stories.tsx @@ -1,12 +1,12 @@ import type { Meta } from '@storybook/react'; -import { BottomSheet } from '../../components/modal/template/BottomSheet'; -import { SelectCardCompanyModal } from '../../components/modal/content/selectCardCompany'; +import { SelectCardCompanyModal } from '../../components/selectCardCompany'; import { + BottomSheet, + ModalProvider, useModalActionContext, useModalStateContext, -} from '../../hooks/useModalContext'; -import { ModalProvider } from '../../components/providers/ModalProvider'; +} from '@kyw0716/woowacourse-scent-modal'; const meta = { title: 'Example/Modal', diff --git a/src/stories/Page/RegisterPage.stories.tsx b/src/stories/Page/RegisterPage.stories.tsx index a6dfc9cda0..0a5e4d8c07 100644 --- a/src/stories/Page/RegisterPage.stories.tsx +++ b/src/stories/Page/RegisterPage.stories.tsx @@ -2,8 +2,8 @@ import type { Meta } from '@storybook/react'; import { Main } from '../../pages/Main'; import { BrowserRouter } from 'react-router-dom'; import { Register } from '../../pages/register'; -import { ModalProvider } from '../../components/providers/ModalProvider'; import { CardInfoProvider } from '../../components/providers/CardInfoProvider'; +import { ModalProvider } from '@kyw0716/woowacourse-scent-modal'; const meta = { title: 'Example/Page',