Merge pull request #161 from Weflo-A/develop

Develop
Weflo-A · Mar 10, 2024 · 080dcde · 080dcde
2 parents e637553 + 9517dbc
commit 080dcde
Show file tree

Hide file tree

Showing 10 changed files with 93 additions and 154 deletions.
diff --git 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
@@ -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 (
-    <>
-      <ItemContainer
-        style={{ minWidth: '12.5rem', position: 'fixed', marginTop: '3.25rem' }}
-      >
-        <TabContainer>
-          {type === 'monitoring' ? renderDroneSearchTab() : null}
-          {type === 'monitoring' ? renderDroneGroupTab() : null}
-          {type === 'dashboard' ? renderDroneListTab() : null}
-          {type === 'parts' ? renderPartsTab() : null}
-          {type === 'trade' ? renderTradeTab() : null}
-          {type === 'monitoring' ? (
-            <Button
-              text={
-                <>
-                  <Plus /> 그룹 생성하기
-                </>
-              }
-              buttonType='accentLight'
-              onClick={() => setIsPopupOpen(true)}
-            />
-          ) : null}
-        </TabContainer>
-      </ItemContainer>
-      {isPopupOpen && <GroupPopup onClose={() => setIsPopupOpen(false)} />}
-    </>
+    <ItemContainer
+      style={{ minWidth: '12.5rem', position: 'fixed', marginTop: '3.25rem' }}
+    >
+      <TabContainer>
+        {type === 'monitoring' ? renderDroneSearchTab() : null}
+        {type === 'monitoring' ? renderDroneGroupTab() : null}
+        {type === 'dashboard' ? renderDroneListTab() : null}
+        {type === 'parts' ? renderPartsTab() : null}
+        {type === 'trade' ? renderTradeTab() : null}
+        {type === 'monitoring' ? (
+          <Button
+            text={
+              <>
+                <Plus /> 그룹 생성하기
+              </>
+            }
+            buttonType='accentLight'
+            onClick={handleButtonClick}
+          />
+        ) : null}
+      </TabContainer>
+      {isPopupOpen && <GroupPopup onClose={handleClosePopup} />}
+    </ItemContainer>
   );
 };
 

diff --git a/src/components/common/MenuTabGroup.tsx b/src/components/common/MenuTabGroup.tsx
diff --git 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
@@ -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
@@ -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
@@ -10,11 +10,16 @@ interface PopupProps {
 }
 
 const GroupPopup: React.FC<PopupProps> = ({ 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 (
     <PopupOverlay>
       <PopupContent>
@@ -29,9 +34,9 @@ const GroupPopup: React.FC<PopupProps> = ({ onClose }) => {
               <Essential>필수</Essential>
             </Row>
             <Input
-              value={inputValue}
-              onChange={handleChange}
-              placeholder='Drone ID'
+              value={inputValueId}
+              onChange={handleIdChange}
+              placeholder='드론 ID를 입력해주세요.'
             />
           </Line>
           <Line>
@@ -48,13 +53,13 @@ const GroupPopup: React.FC<PopupProps> = ({ onClose }) => {
           </Line>
           <Line>
             <Row>
-              <PopupText>시작일</PopupText>
+              <PopupText>그룹 시작일</PopupText>
               <Essential>필수</Essential>
             </Row>
             <Input
-              value={inputValue}
-              onChange={handleChange}
-              placeholder='Year'
+              value={inputValueDate}
+              onChange={handleDateChange}
+              placeholder='그룹 시작일을 선택해주세요.'
             />
           </Line>
         </Content>
@@ -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
@@ -10,11 +10,20 @@ interface PopupProps {
 }
 
 const Popup: React.FC<PopupProps> = ({ 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 (
     <PopupOverlay>
       <PopupContent>
@@ -29,9 +38,9 @@ const Popup: React.FC<PopupProps> = ({ onClose }) => {
               <Essential>필수</Essential>
             </Row>
             <Input
-              value={inputValue}
-              onChange={handleChange}
-              placeholder='Drone ID'
+              value={inputValueId}
+              onChange={handleIdChange}
+              placeholder='드론 ID를 입력해주세요.'
             />
           </Line>
           <Line>
@@ -40,6 +49,9 @@ const Popup: React.FC<PopupProps> = ({ onClose }) => {
               <Essential>필수</Essential>
             </Row>
             <StyledSelect>
+              <StyledMenuItem disabled selected value=''>
+                드론 모델을 선택해주세요.
+              </StyledMenuItem>
               <StyledMenuItem>EAGLE</StyledMenuItem>
               <StyledMenuItem>MDT-1600</StyledMenuItem>
               <StyledMenuItem>SHIFT</StyledMenuItem>
@@ -52,9 +64,9 @@ const Popup: React.FC<PopupProps> = ({ onClose }) => {
               <Essential>필수</Essential>
             </Row>
             <Input
-              value={inputValue}
-              onChange={handleChange}
-              placeholder='Year'
+              value={inputValueYear}
+              onChange={handleYearChange}
+              placeholder='연식을 입력해주세요.'
             />
           </Line>
           <Line>
@@ -63,9 +75,9 @@ const Popup: React.FC<PopupProps> = ({ onClose }) => {
               <Essential>필수</Essential>
             </Row>
             <Input
-              value={inputValue}
-              onChange={handleChange}
-              placeholder='Purpose of use'
+              value={inputValueUsage}
+              onChange={handleUsageChange}
+              placeholder='사용 용도를 입력해주세요.'
             />
           </Line>
           <Line>
@@ -74,6 +86,9 @@ const Popup: React.FC<PopupProps> = ({ onClose }) => {
               <Essential>선택</Essential>
             </Row>
             <StyledSelect>
+              <StyledMenuItem disabled selected value=''>
+                소속될 드론 그룹을 선택해주세요.
+              </StyledMenuItem>
               <StyledMenuItem>그룹 1</StyledMenuItem>
               <StyledMenuItem>그룹 2</StyledMenuItem>
               <StyledMenuItem>그룹 3</StyledMenuItem>
@@ -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
@@ -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';