[2단계 - 페이먼츠] 렛서(김다은) 미션 제출합니다.

.storybook/preview.ts

@@ -1,3 +1,4 @@
+import '../src/index.css';
 import type { Preview } from '@storybook/react';
 
 const preview: Preview = {

package.json

@@ -12,9 +12,11 @@
     "build-storybook": "storybook build"
   },
   "dependencies": {
+    "@types/react-router-dom": "^5.3.3",
     "clsx": "^2.0.0",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.23.0"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^1.3.3",

src/App.tsx

@@ -1,42 +1,11 @@
 import './index.css';
-import styles from './App.module.css';
 
-import { useState } from 'react';
-
-import CardPreview from './components/CardPreview/CardPreview';
-import CardNumberInput from './components/CardNumberInput/CardNumberInput';
-import ExpirationDateInput from './components/ExpirationDateInput/ExpirationDateInput';
-import OwnerNameInput from './components/OwnerNameInput/OwnerNameInput';
+import { Outlet } from 'react-router-dom';
 
 function App() {
-  const [cardInfo, setCardInfo] = useState<CardInfo>({
-    cardNumbers: ['', '', '', ''],
-    expirationDate: ['', ''],
-    ownerName: '',
-  });
-
-  const setCardData = (
-    key: keyof CardInfo,
-    newData: CardInfo[keyof CardInfo]
-  ) => {
-    setCardInfo({ ...cardInfo, [key]: newData });
-  };
-
   return (
-    <div className={styles.app}>
-      <h1 className={styles.title}>카드 추가</h1>
-
-      <CardPreview
-        cardNumbers={cardInfo.cardNumbers}
-        expirationDate={cardInfo.expirationDate}
-        ownerName={cardInfo.ownerName}
-      />
-
-      <form>
-        <CardNumberInput setCardData={setCardData} />
-        <ExpirationDateInput setCardData={setCardData} />
-        <OwnerNameInput setCardData={setCardData} />
-      </form>
+    <div className="app">
+      <Outlet />
     </div>
   );
 }

src/App.module.css → src/components/AddCardForm/AddCardForm.module.css

@@ -1,4 +1,6 @@
-.app {
+.container {
+  position: relative;
+
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -8,9 +10,14 @@
   width: fit-content;
 
   padding: 77px 30px 20px;
+  margin: auto;
 }
 
-.title {
-  visibility: hidden;
+.srOnly {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 0;
   height: 0;
+  overflow: hidden;
 }