refactor: AppLayout.Root, CardProvider 컴포넌트 계층 재구성

bytrustu · Mar 7, 2024 · 198c108 · 198c108
1 parent dfcd1cc
commit 198c108
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 21 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,17 +1,21 @@
-import { Funnel } from '@/components';
-import { CardListPage, CardAddPage, CardCompletePage } from '@/pages';
+import { AppLayout, CardProvider, Funnel } from '@/components';
+import { CardAddPage, CardCompletePage, CardListPage } from '@/pages';
 
 const App = () => (
-  <Funnel.Root>
-    <Funnel.Step index={0}>
-      <CardListPage />
-    </Funnel.Step>
-    <Funnel.Step index={1}>
-      <CardAddPage />
-    </Funnel.Step>
-    <Funnel.Step index={2}>
-      <CardCompletePage />
-    </Funnel.Step>
-  </Funnel.Root>
+  <AppLayout.Root>
+    <CardProvider>
+      <Funnel.Root>
+        <Funnel.Step index={0}>
+          <CardListPage />
+        </Funnel.Step>
+        <Funnel.Step index={1}>
+          <CardAddPage />
+        </Funnel.Step>
+        <Funnel.Step index={2}>
+          <CardCompletePage />
+        </Funnel.Step>
+      </Funnel.Root>
+    </CardProvider>
+  </AppLayout.Root>
 );
 export default App;
diff --git a/src/main.tsx b/src/main.tsx
@@ -1,14 +1,11 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import App from '@/App';
-import { CardProvider } from '@/components';
 import { GlobalStyles } from '@/shared/styles';
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
     <GlobalStyles />
-    <CardProvider>
-      <App />
-    </CardProvider>
+    <App />
   </React.StrictMode>,
 );
diff --git a/src/pages/CardCompletePage.tsx b/src/pages/CardCompletePage.tsx
@@ -31,7 +31,7 @@ export const CardCompletePage = () => {
   };
 
   return (
-    <AppLayout>
+    <>
       <AppLayout.Header />
       <AppLayout.Body>
         <VStack gap="20px" marginTop="20px">
@@ -68,6 +68,6 @@ export const CardCompletePage = () => {
           )}
         </HStack>
       </AppLayout.Footer>
-    </AppLayout>
+    </>
   );
 };
diff --git a/src/pages/CardListPage.tsx b/src/pages/CardListPage.tsx
@@ -11,7 +11,7 @@ export const CardListPage = () => {
   };
 
   return (
-    <AppLayout>
+    <>
       <AppLayout.Header>
         <Typography variant="headline">보유 카드</Typography>
       </AppLayout.Header>
@@ -32,6 +32,6 @@ export const CardListPage = () => {
           <CardDisplay.Add onClick={handleCardAddPageMove} />
         </VStack>
       </AppLayout.Footer>
-    </AppLayout>
+    </>
   );
 };