diff --git a/src/components/common/ItemContainer.tsx b/src/components/common/ItemContainer.tsx
index 46e45df..e664bbe 100644
--- a/src/components/common/ItemContainer.tsx
+++ b/src/components/common/ItemContainer.tsx
@@ -6,7 +6,7 @@ const ItemContainer = styled.div`
border-radius: 0.75rem;
border: 1px solid ${colors.basic200};
background: white;
- z-index: 1000;
+ z-index: 500;
`;
export default ItemContainer;
diff --git a/src/components/common/MenuTab.tsx b/src/components/common/MenuTab.tsx
index 94a7d85..7bcc277 100644
--- a/src/components/common/MenuTab.tsx
+++ b/src/components/common/MenuTab.tsx
@@ -6,6 +6,7 @@ import Button from 'src/components/common/Button';
import { Plus } from 'src/assets';
import { useLocation, useNavigate } from 'react-router-dom';
import GroupPopup from '../onboarding/GroupPopup';
+import { useState } from 'react';
import React from 'react';
//
@@ -65,8 +66,15 @@ const MenuTab = ({ groups, drones, type }: MenuTabProps) => {
const location = useLocation();
const isTestDetailPage = location.pathname.includes('/test');
const isEstimatePage = location.pathname.includes('/estimate');
- const [isPopupOpen, setIsPopupOpen] = React.useState(false);
+ const [isPopupOpen, setIsPopupOpen] = useState(false);
+ const handleButtonClick = () => {
+ setIsPopupOpen(true);
+ };
+
+ const handleClosePopup = () => {
+ setIsPopupOpen(false);
+ };
const handleTabMenu = (url: string, id?: string) => {
navigate(url, { state: id });
};
@@ -271,31 +279,29 @@ const MenuTab = ({ groups, drones, type }: MenuTabProps) => {
};
return (
- <>
-
-
- {type === 'monitoring' ? renderDroneSearchTab() : null}
- {type === 'monitoring' ? renderDroneGroupTab() : null}
- {type === 'dashboard' ? renderDroneListTab() : null}
- {type === 'parts' ? renderPartsTab() : null}
- {type === 'trade' ? renderTradeTab() : null}
- {type === 'monitoring' ? (
-
-
- {isPopupOpen && setIsPopupOpen(false)} />}
- >
+
+
+ {type === 'monitoring' ? renderDroneSearchTab() : null}
+ {type === 'monitoring' ? renderDroneGroupTab() : null}
+ {type === 'dashboard' ? renderDroneListTab() : null}
+ {type === 'parts' ? renderPartsTab() : null}
+ {type === 'trade' ? renderTradeTab() : null}
+ {type === 'monitoring' ? (
+
+ {isPopupOpen && }
+
);
};
diff --git a/src/components/common/MenuTabGroup.tsx b/src/components/common/MenuTabGroup.tsx
deleted file mode 100644
index 3981786..0000000
--- a/src/components/common/MenuTabGroup.tsx
+++ /dev/null
@@ -1,94 +0,0 @@
-import { Divider, Typography } from '@mui/material';
-import styled from 'styled-components';
-import colors from 'src/constants/colors';
-import ItemContainer from './ItemContainer';
-import { useNavigate, useParams } from 'react-router-dom';
-
-interface Group {
- name: string;
- drones: { id: number; name: string }[];
-}
-
-interface MenuTabGroupProps {
- groups: Group[];
- type: 'dashboard' | 'parts';
-}
-
-const TabContainer = styled.div`
- width: 100%;
- display: flex;
- flex-direction: column;
- padding: 1rem 0.5rem;
- gap: 1.5rem;
- z-index: 100;
-`;
-
-const TabWrapper = styled.div``;
-
-const TabList = styled.div`
- gap: 0.25rem;
-`;
-
-const TabItem = styled.div<{ selected: boolean }>`
- /* 선택된 상태에 따라 스타일 적용 */
- padding: 0.5rem;
- border-radius: 0.5rem;
- color: ${({ selected }) => (selected ? colors.primary100 : colors.basic400)};
- background-color: ${({ selected }) =>
- selected ? colors.primaryOpacity10 : 'transparent'};
- font-size: '14px';
- font-weight: ${({ selected }) => (selected ? '700' : '400')};
- &:hover {
- cursor: pointer;
- color: ${colors.primary100};
- }
-`;
-
-const MenuTabGroup: React.FC = (props) => {
- const navigate = useNavigate();
- const { id } = useParams();
- const handleTabClick = (id: number) => {
- navigate(`/drone-group/drone/${id}/dashboard`);
- };
-
- const renderGroupTabs = () => {
- return props.groups.map((group, index) => (
-
-
- {group.name}
-
-
-
- {group.drones.map((drone, index) => (
- handleTabClick(drone.id)}
- selected={Number(id) === drone.id}
- >
- {drone.name}
-
- ))}
-
-
- ));
- };
-
- if (!id) {
- return null;
- }
-
- return (
-
- {renderGroupTabs()}
-
- );
-};
-
-export default MenuTabGroup;
diff --git a/src/components/estimate/NewPartsInfoBox.tsx b/src/components/estimate/NewPartsInfoBox.tsx
index 086ee8d..a8e654f 100644
--- a/src/components/estimate/NewPartsInfoBox.tsx
+++ b/src/components/estimate/NewPartsInfoBox.tsx
@@ -28,7 +28,7 @@ interface NewPartsProp {
const PartsInfoBox = styled.div`
width: 100%;
display: flex;
- flex-direciton: row;
+ flex-direction: row;
padding: 1rem;
border-radius: 8px;
border: 1px solid ${colors.basic200};
diff --git a/src/components/estimate/RecyclePartBox.tsx b/src/components/estimate/RecyclePartBox.tsx
index cae10e7..f8732a9 100644
--- a/src/components/estimate/RecyclePartBox.tsx
+++ b/src/components/estimate/RecyclePartBox.tsx
@@ -20,7 +20,8 @@ interface RecyclePartBoxProp {
const PartBox = styled.div`
width: 100%;
display: grid;
- grid-template-columns: 2fr 2fr 5fr 1fr 2fr 1fr;
+ grid-template-columns: 3fr 3fr 7fr 2fr 3fr 1fr;
+ justify-content: flex-start;
border-radius: 0.5rem;
border: 1px solid ${colors.primary100};
background: ${colors.primary10};
diff --git a/src/components/estimate/RecyclePartsList.tsx b/src/components/estimate/RecyclePartsList.tsx
index 7c7d485..b960330 100644
--- a/src/components/estimate/RecyclePartsList.tsx
+++ b/src/components/estimate/RecyclePartsList.tsx
@@ -25,12 +25,14 @@ const PartsBox = styled.div`
const PartsHeader = styled.div`
width: 100%;
display: grid;
- grid-template-columns: 3fr 3fr 7fr 1.5fr 3fr 2fr;
- padding: 0.75rem 1.6875rem;
+ grid-template-columns: 3fr 3fr 7fr 2fr 3fr 1fr;
+ justify-content: flex-start;
+ padding: 0.75rem 3rem 0.75rem 2rem;
width: 100%;
border: 1px solid ${colors.basic100};
border-top-left-radius: 0.75rem;
border-top-right-radius: 0.75rem;
+ text-align: left;
background: white;
/* shaow_sidebar */
box-shadow: 0rem 1.5rem 1.625rem 0rem rgba(66, 82, 110, 0.06);
diff --git a/src/components/onboarding/GroupPopup.tsx b/src/components/onboarding/GroupPopup.tsx
index f09162a..6bcb742 100644
--- a/src/components/onboarding/GroupPopup.tsx
+++ b/src/components/onboarding/GroupPopup.tsx
@@ -10,11 +10,16 @@ interface PopupProps {
}
const GroupPopup: React.FC = ({ onClose }) => {
- const [inputValue, setInputValue] = useState('');
+ const [inputValueId, setInputValueId] = useState('');
+ const [inputValueDate, setInputValueDate] = useState('');
- const handleChange = (value: string) => {
- setInputValue(value);
+ const handleIdChange = (value: string) => {
+ setInputValueId(value);
};
+ const handleDateChange = (value: string) => {
+ setInputValueDate(value);
+ };
+
return (
@@ -29,9 +34,9 @@ const GroupPopup: React.FC = ({ onClose }) => {
필수
@@ -48,13 +53,13 @@ const GroupPopup: React.FC = ({ onClose }) => {
- 시작일
+ 그룹 시작일
필수
@@ -83,7 +88,7 @@ const PopupOverlay = styled.div`
display: flex;
justify-content: center;
align-items: center;
- z-index: 3000;
+ z-index: 1000;
`;
const PopupContent = styled.div`
@@ -170,6 +175,7 @@ const StyledSelect = styled.select`
border: 1px solid ${colors.basic200};
background: ${colors.basic50};
outline: none;
+ padding: 5px;
`;
const StyledMenuItem = styled.option`
diff --git a/src/components/onboarding/Popup.tsx b/src/components/onboarding/Popup.tsx
index 4bc12d7..93322a3 100644
--- a/src/components/onboarding/Popup.tsx
+++ b/src/components/onboarding/Popup.tsx
@@ -10,11 +10,20 @@ interface PopupProps {
}
const Popup: React.FC = ({ onClose }) => {
- const [inputValue, setInputValue] = useState('');
+ const [inputValueId, setInputValueId] = useState('');
+ const [inputValueYear, setInputValueYear] = useState('');
+ const [inputValueUsage, setInputValueUsage] = useState('');
- const handleChange = (value: string) => {
- setInputValue(value);
+ const handleIdChange = (value: string) => {
+ setInputValueId(value);
};
+ const handleYearChange = (value: string) => {
+ setInputValueYear(value);
+ };
+ const handleUsageChange = (value: string) => {
+ setInputValueUsage(value);
+ };
+
return (
@@ -29,9 +38,9 @@ const Popup: React.FC = ({ onClose }) => {
필수
@@ -40,6 +49,9 @@ const Popup: React.FC = ({ onClose }) => {
필수
+
+ 드론 모델을 선택해주세요.
+
EAGLE
MDT-1600
SHIFT
@@ -52,9 +64,9 @@ const Popup: React.FC = ({ onClose }) => {
필수
@@ -63,9 +75,9 @@ const Popup: React.FC = ({ onClose }) => {
필수
@@ -74,6 +86,9 @@ const Popup: React.FC = ({ onClose }) => {
선택
+
+ 소속될 드론 그룹을 선택해주세요.
+
그룹 1
그룹 2
그룹 3
@@ -106,6 +121,7 @@ const PopupOverlay = styled.div`
display: flex;
justify-content: center;
align-items: center;
+ z-index: 1000;
`;
const PopupContent = styled.div`
@@ -192,6 +208,7 @@ const StyledSelect = styled.select`
border: 1px solid ${colors.basic200};
background: ${colors.basic50};
outline: none;
+ padding: 5px;
`;
const StyledMenuItem = styled.option`
diff --git a/src/components/onboarding/droneSearch/FilterLine.tsx b/src/components/onboarding/droneSearch/FilterLine.tsx
index a512cc0..051eaf9 100644
--- a/src/components/onboarding/droneSearch/FilterLine.tsx
+++ b/src/components/onboarding/droneSearch/FilterLine.tsx
@@ -1,5 +1,5 @@
import { Typography } from '@mui/material';
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
import CheckBox from 'src/components/common/CheckBox';
import colors from 'src/constants/colors';
import styled from 'styled-components';
diff --git a/src/pages/EstimatePage.tsx b/src/pages/EstimatePage.tsx
index e9eda2d..a0fbbd2 100644
--- a/src/pages/EstimatePage.tsx
+++ b/src/pages/EstimatePage.tsx
@@ -667,7 +667,7 @@ const EstimatePage = () => {
{droneModel}
- 의
+ 의{' '}
{topSection?.components[0].type ===
topSection?.components[1].type ? (
@@ -678,7 +678,7 @@ const EstimatePage = () => {
{topSection?.components[0].type}
- 와
+ 와{' '}
{topSection?.components[1].type}
@@ -733,14 +733,14 @@ const EstimatePage = () => {
>
- 재사용 가능 부품이 총
+ 재사용 가능 부품이 총{' '}
- {recycleParts.length}개
+ {recycleParts.length}개{' '}
있습니다.
-
+
{[
{ value: 'part', label: '구동부 순' },
{ value: 'score', label: '점수 높은 순' },
@@ -796,4 +796,5 @@ const CalloutBox = styled.div`
padding: 0.5rem 1rem;
border-radius: 0.5rem;
background: ${colors.basic100};
+ margin-right: 10px;
`;