Merge pull request #84 from CapstoneDesign24-GQ/feat#83-toggleAnimation

Feat#83 toggle animation
CapstoneDesign24-GQ · Nov 6, 2024 · 53d043b · 53d043b
2 parents 604ea8c + 1d706ef
commit 53d043b
Show file tree

Hide file tree

Showing 5 changed files with 93 additions and 56 deletions.
diff --git a/src/assets/constants/Crops.js b/src/assets/constants/Crops.js
@@ -1,4 +1,8 @@
-export const Crops={
-    header:'작물 선택',
-    elements:['감귤','고추','콩','딸기','사과']
+import { BsQuestionCircleFill } from 'react-icons/bs';
+
+export const Crops = {
+    header: '작물 선택',
+    icon: <BsQuestionCircleFill style={{ margin: '0px' }} size={22} />,
+    toggleHeader: '작물 선택',
+    elements: ['감귤', '고추', '콩', '딸기', '사과']
 }
diff --git a/src/assets/constants/Locations.js b/src/assets/constants/Locations.js
@@ -1,4 +1,8 @@
+import { BsGeoFill } from 'react-icons/bs';
+
 export const Locations={
-    header : '위치 입력(도 단위)',
+    header : '지역 선택(도 단위)',
+    icon:<BsGeoFill style={{ margin: '0px' }} size={22}/>,
+    toggleHeader :'지역 선택',
     elements : ['충청도']
 }
diff --git a/src/components/MainPage/InputDate.js b/src/components/MainPage/InputDate.js
@@ -10,6 +10,12 @@ import { BsCaretDownFill } from 'react-icons/bs';
 import { BsCaretUpFill } from 'react-icons/bs';
 import { IoIosArrowBack, IoIosArrowForward } from 'react-icons/io';
 
+const Container=styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+`;
 
 const InputDiv=styled.button`
   display:flex;
@@ -62,18 +68,33 @@ const ToggleDiv=styled.div`
   flex-direction: column;
   align-items: center;
   justify-content: center;
+
   width: 100%;
+  /* height: 300px; */
+  /* max-height: ${({ isToggled }) => (isToggled ? "300px" : "0px")};
+  overflow: hidden;
+  transition: max-height 0.3s ease-out; */
+  /* transition: height 0.3s ease-out; */
+
+  max-height: ${({ isToggled }) => (isToggled ? "360px" : "0px")};
+  transition: max-height 0.3s ease-out;
+  overflow: hidden;
 
   background-color: ${({theme})=>theme.colors.white};
   border-radius:25px;
   box-shadow:0px 3px 5px #0000002f;
 `;
 const ToggleCalendar=styled(Calendar)`
-  border: none;
+  border: none !important;
   outline: none;
   padding: 5% 2% 5% 2%;
   background-color: transparent;
 
+  height: 100%;
+  /* max-height: ${({ isToggled }) => (isToggled ? "100%" : "0%")}; */
+  transition: height 0.3s ease-out;
+  /* transition: max-height 0.3s ease-out; */
+
   .react-calendar__tile--active {
     background-color: transparent;
     color: white;
@@ -221,10 +242,10 @@ const ToggleCalendar=styled(Calendar)`
   }
 `;
 
-function InputDate( {onToggle,
-  onChange,
+function InputDate( {onToggle,onChange,
   // onClick,
-  value
+  value,
+  header
 } ) {
   const [isToggled, setIsToggled]=useState(false);
   const [selectedDate, setSelectedDate]=useState(value);
@@ -245,23 +266,25 @@ function InputDate( {onToggle,
 
   return (
     <>
-      <InputDiv onClick={handleToggle}>
-        날짜 선택
-        <div className='icon'>
-          {isToggled?<BsCaretUpFill className='icon'/>:<BsCaretDownFill className='icon'/>}
-        </div>
-      </InputDiv>
-      {isToggled&&(
-        <ToggleDiv>
-          <ToggleCalendar
-            selected={selectedDate?new Date(selectedDate):null}
-            onChange={handleDateChange}
-            dateFormate='yyyy-MM-dd'
-            formatDay={(locale,date)=>moment(date).format("DD")}
-          />
-        </ToggleDiv>
-      )}
-      {!isToggled&&(<></>)}
+      <Container>
+        <InputDiv onClick={handleToggle}>
+          {header}
+          <div className='icon'>
+            {isToggled?<BsCaretUpFill className='icon'/>:<BsCaretDownFill className='icon'/>}
+          </div>
+        </InputDiv>
+        {isToggled&&(
+          <ToggleDiv isToggled={isToggled}>
+            <ToggleCalendar
+              selected={selectedDate ? new Date(selectedDate) : null}
+              onChange={handleDateChange}
+              dateFormate='yyyy-MM-dd'
+              formatDay={(locale, date) => moment(date).format("DD")}
+            />
+          </ToggleDiv>
+        )}
+        {!isToggled&&(<></>)}
+      </Container>
     </>
   )
 }

diff --git a/src/components/MainPage/MainToggle.js b/src/components/MainPage/MainToggle.js
@@ -2,7 +2,7 @@ import { useState } from "react";
 import styled from "styled-components";
 import theme from "../../styles/theme";
 
-import { BsCaretDownFill,BsCaretUpFill,BsGeoFill } from "react-icons/bs";
+import { BsCaretDownFill,BsCaretUpFill } from "react-icons/bs";
 
 
 const Container=styled.div`
@@ -58,11 +58,12 @@ const ToggleArrow=styled.div`
 const Toggle=styled.div`
     display: flex;
     flex-direction: column;
-    text-align: center;
     align-items: center;
 
     width: ${({ theme }) => theme.divSizes.mainInputDivWidth};
-    height: 243px;
+    max-height: ${({ isToggled }) => (isToggled ? "300px" : "0px")};
+    overflow: hidden;
+    transition: max-height 0.3s ease-out;
 
     color: ${({ theme }) => theme.colors.darkblue};
     background-color: ${({ theme }) => theme.colors.white};
@@ -82,7 +83,7 @@ const Header=styled.div`
 
     width: 100%;
 
-    margin: 20px 0;
+    margin: 20px 0px 15px 0px;
     padding-left: 20px;
 
     font-size: ${({ theme }) => theme.fontSizes.inputBold};
@@ -112,15 +113,15 @@ const Content=styled.div`
     flex-wrap: wrap;
     gap: 10px;
 
-    margin-top: 15px;
+    padding-bottom: 20px;
 `;
 
 const CropButton=styled.div`
     display: flex;
     align-items: center;
     justify-content: center;
     
-    margin-top: 23px;
+    margin-top: 20px;
 
     width: 100px;
     height: 40px;
@@ -147,18 +148,18 @@ const CropButton=styled.div`
     }
 `;
 
-function MainToggle({onToggle=()=>{},onClick=()=>{},header,elements=[]}){
+function MainToggle({onToggle=()=>{},onClick=()=>{},header,elements=[],icon,toggleHeader}){
     const [isToggled, setIsToggled] = useState(false);
-    const [selectedCrop,setSelectedCrop] = useState(null);
+    const [selectedButton,setSelectedButton] = useState(null);
 
     const handleToggle=()=>{
         setIsToggled((prevState)=>!prevState)
         onToggle(!isToggled); // 토글 상태에 따라 Maindp dkffla
     }
 
-    const handleCrop=(crop)=>{
-        setSelectedCrop(crop);
-        onClick(crop); // 작물 선택 시 부모 컴포넌트에 알림
+    const handleButton=(elem)=>{
+        setSelectedButton(elem);
+        onClick(elem); // 작물 선택 시 부모 컴포넌트에 알림
     }
 
     return(
@@ -170,24 +171,24 @@ function MainToggle({onToggle=()=>{},onClick=()=>{},header,elements=[]}){
                         {isToggled?<BsCaretUpFill size={24}/>:<BsCaretDownFill size={24}/>}
                     </ToggleArrow>
                 </ButtonElement>
-                {isToggled && (
-                    <Toggle>
-                        <Header>
-                            <BsGeoFill className="icon" size={22}/>
-                            <span>{header}</span>
-                        </Header>
-                        <Line />
-                        <Content>
-                            {elements.map((elem)=>(
-                                <CropButton
-                                    key={elem}
-                                    onClick={()=>handleCrop(elem)}
-                                    className={selectedCrop===elem?'active':''}
-                                >{elem}</CropButton>
-                            ))}
-                        </Content>
-                    </Toggle>
-                )}
+                <Toggle isToggled={isToggled}>
+                    <Header>
+                        {icon}
+                        <span>{toggleHeader}</span>
+                    </Header>
+                    <Line />
+                    <Content>
+                        {elements.map((elem) => (
+                            <CropButton
+                                key={elem}
+                                onClick={() => handleButton(elem)}
+                                className={selectedButton === elem ? "active" : ""}
+                            >
+                                {elem}
+                            </CropButton>
+                        ))}
+                    </Content>
+                </Toggle>
             </Container>
         </>
     )

diff --git a/src/pages/main.js b/src/pages/main.js
@@ -136,24 +136,29 @@ const Main = () => {
             value={inputData.location}
             onClick={handleLocationButton}
             onToggle={handleToggle}
-            header={Locations.header}
+            header={inputData.location || Locations.header}
             elements={Locations.elements}
+            icon={Locations.icon}
+            toggleHeader={Locations.toggleHeader}
           />
         </ComponentsContainer>
         <ComponentsContainer>
           <MainToggle 
             value={inputData.crop}
             onClick={handleCropButton}
             onToggle={handleToggle}
-            header={Crops.header}
+            header={inputData.crop || Crops.header}
             elements={Crops.elements}
+            icon={Crops.icon}
+            toggleHeader={Crops.toggleHeader}
           />
         </ComponentsContainer>
         <ComponentsContainer>
           <InputDate
             value={inputData.date}
             onChange={handleDateButton}
             onToggle={handleToggle} // onToggle 함수 추가
+            header={inputData.date || '날짜 선택'}
           />
         </ComponentsContainer>
       </Components>