[페이먼츠 미션 Step 3] 센트(김영우) 미션 제출합니다. (#293)

* style: Array.from.forEach => card.정보.forEach

* chore: 배포한 모달 패키지 설치

* refactor: 배포한 모달 패키지 사용

* feat: 로딩 스켈레톤 추가

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",

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 (

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;
 

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 {

src/components/modal/content/selectCardCompany/CardCompany.tsx → 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;

src/components/modal/content/selectCardCompany/index.tsx → 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