Develop

host/src/App.tsx

@@ -4,9 +4,10 @@ import { Routes, Route } from 'react-router-dom';
 const Main = loadable(() => import('@pages/Main'));
 const LogIn = loadable(() => import('@pages/LogIn'));
 const SignUp = loadable(() => import('@pages/SignUp'));
-const Acoe = loadable(() => import('@pages/Acoe'));
-const AcoePrivacy = loadable(() => import('./pages/components/AcoePrivacy'));
-const AcoeService = loadable(() => import('./pages/components/AcoeService'));
+const Acoe = loadable(() => import('@layouts/Acoe'));
+const AcoePrivacy = loadable(() => import('@pages/components/AcoePrivacy'));
+const AcoeService = loadable(() => import('@pages/components/AcoeService'));
+const AcoeAdmin = loadable(() => import('@layouts/AcoeAdmin'));
 
 const App = () => (
   <Routes>
@@ -16,6 +17,7 @@ const App = () => (
     <Route path='/acoe' element={<Acoe />} >
       <Route path="privacy" element={<AcoePrivacy />} />
        <Route path="service" element={<AcoeService />} />
+       <Route path="admin" element={<AcoeAdmin/>} />
     </Route>
   </Routes>
 );

host/src/acoe.css

@@ -171,6 +171,12 @@
   margin: 8px
 }
 
+.mg20 {
+  margin: 20px
+}
+
+
+
 .mg40 {
   margin: 40px
 }

host/src/pages/Acoe/index.tsx → host/src/layouts/Acoe.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import AcoeNavbar from '../components/AcoeNavbar'
-import AcoeFooter from '../components/AcoeFooter'
+import AcoeNavbar from '../pages/components/AcoeNavbar'
+import AcoeFooter from '../pages/components/AcoeFooter'
 import 'bootstrap/dist/css/bootstrap.css';
 import { Outlet } from 'react-router-dom';
 

host/src/layouts/AcoeAdmin.tsx

@@ -0,0 +1,27 @@
+import { Tabs, Tab } from 'react-bootstrap'
+import MembersManagement from '@pages/components/MembersManagement'
+import FranchiseManagement from '@pages/components/FranchiseManagement'
+import MemberManagement from '@pages/components/MemberManagement'
+
+
+const AcoeAdmin = () => {
+  return (
+    <Tabs
+      defaultActiveKey="member"
+      id="uncontrolled-tab-example"
+      className="mb-3 mgt10 mg20"
+    >
+      <Tab eventKey="member" title="회원관리">
+        <MembersManagement />
+      </Tab>
+      <Tab eventKey="franchise" title="프렌차이즈 관리">
+        <FranchiseManagement />
+      </Tab>
+      <Tab eventKey="cafe" title="카페 관리">
+        <MemberManagement />
+      </Tab>
+    </Tabs>
+  );
+};
+
+export default AcoeAdmin;

host/src/pages/components/FranchiseManagement.tsx

@@ -0,0 +1,30 @@
+import { Container, Row, Col, Card } from 'react-bootstrap';
+
+const FranchiseManagement = () => {
+
+  const dataArray = [
+    { id: 1, name: 'Item 1', description: 'This is item 1.' },
+    { id: 2, name: 'Item 2', description: 'This is item 2.' },
+    { id: 3, name: 'Item 3', description: 'This is item 3.' },
+  ];
+
+
+  return (
+    <Container>
+      <Row>
+        {dataArray.map((data) => (
+          <Col md={4} key={data.id}>
+            <Card>
+              <Card.Body onClick ={() => console.log(data)}>
+                <Card.Title>{data.name}</Card.Title>
+                <Card.Text>{data.description}</Card.Text>
+              </Card.Body>
+            </Card>
+          </Col>
+        ))}
+      </Row>
+    </Container>
+  );
+};
+
+export default FranchiseManagement;

host/src/pages/components/MemberManagement.tsx

@@ -0,0 +1,9 @@
+import { Container, Row, Col, Card } from 'react-bootstrap';
+
+const MemberManagement = () => {
+  return (
+    <Container></Container>
+  );
+};
+
+export default MemberManagement;

host/src/pages/components/MembersManagement.tsx

@@ -0,0 +1,10 @@
+import { Container, Row, Col, Card } from 'react-bootstrap';
+
+
+const MembersManagement = () => {
+  return (
+    <Container></Container>
+  );
+};
+
+export default MembersManagement;