Merge pull request #53 from Weflo-A/develop

Develop

package.json

@@ -5,6 +5,7 @@
   "dependencies": {
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.0",
+    "@mui/icons-material": "^5.15.11",
     "@mui/material": "^5.15.11",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",

src/Router.tsx

@@ -2,6 +2,7 @@ import { BrowserRouter, Navigate, Route, Routes } from 'react-router-dom';
 import DroneGroupPage from './pages/DroneGroupPage';
 import DroneSearchPage from './pages/DroneSearhPage';
 import NavBar from './components/common/NavBar';
+import EstimatePage from './pages/EstimatePage';
 import DashBoard from './pages/DashBoard';
 
 const Router = () => {
@@ -20,10 +21,22 @@ const Router = () => {
           element={<DroneGroupPage />}
         />
         {/* 드론 [대시보드, 견적서, 부품], 중고거래 */}
-        <Route path='/drone/:id/dashboard' element={<DashBoard />} />
-        <Route path='/drone/:id/dashboard/test' element={<DroneSearchPage />} />
-        <Route path='/drone/:id/estimate' element={<DroneSearchPage />} />
-        <Route path='/drone/:id/parts' element={<DroneSearchPage />} />
+        <Route
+          path='/drone-group/:groupId/drone/:id/dashboard'
+          element={<DashBoard />}
+        />
+        <Route
+          path='/drone-group/:groupId/drone/:id/dashboard/test'
+          element={<DroneSearchPage />}
+        />
+        <Route
+          path='/drone-group/:groupId/drone/:id/estimate'
+          element={<EstimatePage />}
+        />
+        <Route
+          path='/drone-group/:groupId/drone/:id/parts'
+          element={<DroneSearchPage />}
+        />
       </Routes>
     </BrowserRouter>
   );

src/assets/data/estimateDummy.ts

@@ -0,0 +1,74 @@
+export const brokenParts = [
+  {
+    parts: '모터',
+    loc: '구동부 01',
+    score: 2,
+    warning: true,
+  },
+  {
+    parts: 'ESC',
+    loc: '구동부 02',
+    score: 7,
+    warning: true,
+  },
+  {
+    parts: '모터',
+    loc: '구동부 01',
+    score: 20,
+    warning: false,
+  },
+  {
+    parts: '블라이드',
+    loc: '구동부 01',
+    score: 31,
+    warning: false,
+  },
+  {
+    parts: '모터',
+    loc: '구동부 01',
+    score: 20,
+    warning: false,
+  },
+];
+
+export const recycleParts = [
+  {
+    parts: '블레이드',
+    loc: '구동부 01',
+    name: '[DUALSKY] 28x8.0in(FE) Hybrid Carbon Prop',
+    score: 90,
+    price: 135000,
+  },
+  {
+    parts: 'ESC',
+    loc: '구동부 01',
+    name: 'LittleBee 30A-S BLHeli_S ESC',
+    score: 80,
+    warning: true,
+    price: 133000,
+  },
+  {
+    parts: '모터',
+    loc: '구동부 01',
+    name: '[XEON] S2312-920KV Motor',
+    score: 95,
+    warning: false,
+    price: 115000,
+  },
+  {
+    parts: '블라이드',
+    loc: '구동부 01',
+    name: '[DUALSKY] 28x8.0in(FE) Hybrid Carbon Prop',
+    score: 90,
+    warning: false,
+    price: 125000,
+  },
+  {
+    parts: '모터',
+    loc: '구동부 01',
+    name: '[DUALSKY] 28x8.0in(FE) Hybrid Carbon Prop',
+    score: 75,
+    warning: false,
+    price: 155000,
+  },
+];

src/components/common/CheckBox.tsx

@@ -4,7 +4,7 @@ import colors from 'src/constants/colors';
 import styled from 'styled-components';
 
 interface CheckBoxProps {
-  label: string;
+  label?: string;
 }
 
 const CheckBox: React.FC<CheckBoxProps> = ({ label }) => {

src/components/common/Chip.tsx

@@ -1,7 +1,7 @@
 import colors from 'src/constants/colors';
 import styled from 'styled-components';
 
-interface ChipProp {
+interface ChipProp extends React.HTMLAttributes<HTMLDivElement> {
   text: string;
   color?: string;
   background?: string;
@@ -19,9 +19,12 @@ const Chip = ({
   text,
   color = colors.primary100,
   background = colors.primaryOpacity20,
+  ...props
 }: ChipProp) => {
   return (
-    <ChipBox style={{ color: color, background: background }}>{text}</ChipBox>
+    <ChipBox style={{ color: color, background: background, ...props.style }}>
+      {text}
+    </ChipBox>
   );
 };
 

src/components/common/NavBar.tsx

@@ -17,7 +17,7 @@ const NavContainer = styled.div`
   left: 0;
   background: ${colors.secondary};
   padding: 0rem 5rem;
-  z-index: 1000;
+  z-index: 3000;
 `;
 const NavStack = styled.div`
   height: 100%;
@@ -111,23 +111,35 @@ const NavBar = () => {
               <>
                 <MenuItem
                   className={activeMenu === '대시보드' ? 'active' : ''}
-                  onClick={() => handleMenu('대시보드', '/drone/:id/dashboard')}
+                  onClick={() =>
+                    handleMenu(
+                      '대시보드',
+                      '/drone-group/:groupId/drone/:id/dashboard'
+                    )
+                  }
                 >
                   <Typography fontSize='14px' fontWeight='regular'>
                     대시보드
                   </Typography>
                 </MenuItem>
                 <MenuItem
                   className={activeMenu === '견적서' ? 'active' : ''}
-                  onClick={() => handleMenu('견적서', '/drone/:id/estimate')}
+                  onClick={() =>
+                    handleMenu(
+                      '견적서',
+                      '/drone-group/:groupId/drone/:id/estimate'
+                    )
+                  }
                 >
                   <Typography fontSize='14px' fontWeight='regular'>
                     견적서
                   </Typography>
                 </MenuItem>
                 <MenuItem
                   className={activeMenu === '부품' ? 'active' : ''}
-                  onClick={() => handleMenu('부품', '/drone/:id/parts')}
+                  onClick={() =>
+                    handleMenu('부품', '/drone-group/:groupId/drone/:id/parts')
+                  }
                 >
                   <Typography fontSize='14px' fontWeight='regular'>
                     부품

src/components/common/Pagination.tsx

@@ -0,0 +1,91 @@
+import { forwardRef, useImperativeHandle } from 'react';
+import colors from 'src/constants/colors';
+import styled from 'styled-components';
+
+export interface PaginationHandles {
+  goToNextPage: () => void;
+  goToPrevPage: () => void;
+}
+
+interface PaginationProp {
+  postsNum: number;
+  postsPerPage: number;
+  setCurrentPage: (page: number) => void;
+  currentPage: number;
+}
+
+//
+//
+//
+
+const StyledButton = styled.button`
+  padding: 0.375rem 0.75rem;
+  border-radius: 0.5rem;
+  border: none;
+  background: white;
+  color: ${colors.basic500};
+  &:hover {
+    color: ${colors.primary100};
+    background: ${colors.primaryOpacity20};
+  }
+  &.active {
+    color: ${colors.primary100};
+    background: ${colors.primaryOpacity20};
+  }
+`;
+
+//
+//
+//
+
+const Pagination = forwardRef<PaginationHandles, PaginationProp>(
+  ({ postsNum, postsPerPage, setCurrentPage, currentPage }, ref) => {
+    // 페이지 개수 (버튼 개수)
+    const pageList = [];
+    const totalPages = Math.ceil(postsNum / postsPerPage);
+
+    for (let i = 1; i <= totalPages; i++) {
+      pageList.push(i);
+    }
+
+    const goToNextPage = () => {
+      setCurrentPage(currentPage + 1);
+    };
+
+    const goToPrevPage = () => {
+      setCurrentPage(currentPage - 1);
+    };
+
+    if (totalPages === 1) {
+      return null;
+    }
+
+    useImperativeHandle(ref, () => ({
+      goToNextPage,
+      goToPrevPage,
+    }));
+
+    return (
+      <div
+        style={{
+          display: 'flex',
+          width: '100%',
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}
+      >
+        {pageList.map((page) => (
+          <StyledButton
+            key={page}
+            onClick={() => setCurrentPage(page)}
+            className={currentPage === page ? 'active' : ''}
+          >
+            {page}
+          </StyledButton>
+        ))}
+      </div>
+    );
+  }
+);
+
+export default Pagination;