[Feat]+, - 버튼을 통한 섹션 추가 및 제거

src/components/addTravel/FloatingMenu.tsx

@@ -1,20 +1,14 @@
+// FloatingMenu.tsx
 import styled from '@emotion/styled';
 import { CircleMinus, CirclePlus } from 'lucide-react';
-import { useState } from 'react';
 
-interface FloatingMenu {
+interface FloatingMenuProps {
+  openSections: string[];
+  toggleSection: (section: string) => void;
   onClick: () => void;
 }
 
-export const FloatingMenu = ({ onClick }: FloatingMenu) => {
-  const [openSections, setOpenSections] = useState<string[]>([]);
-
-  const toggleSection = (section: string) => {
-    setOpenSections((prev) =>
-      prev.includes(section) ? prev.filter((item) => item !== section) : [...prev, section],
-    );
-  };
-
+export const FloatingMenu = ({ openSections, toggleSection, onClick }: FloatingMenuProps) => {
   return (
     <MenuContainer>
       <MenuItem>
@@ -85,6 +79,8 @@ export const FloatingMenu = ({ onClick }: FloatingMenu) => {
   );
 };
 
+export default FloatingMenu;
+
 // 스타일 정의
 const MenuContainer = styled.div`
   position: sticky;

src/pages/AddTravel.tsx

@@ -2,20 +2,28 @@ import ChoiceTags from '@/components/addTravel/ChoiceTags';
 import Course from '@/components/addTravel/Course';
 import ScheduleTeam from '@/components/addTravel/ScheduleTeam';
 import Details from '@/components/addTravel/Details';
-import { FloatingMenu } from '@/components/addTravel/FloatingMenu';
-import Introduction from '@/components/addTravel/Introduction';
 import Thumbnail from '@/components/addTravel/Thumbnail';
 import GrayBack from '@/components/GrayBack';
 import { css } from '@emotion/react';
 import { useRef, useState } from 'react';
+import FloatingMenu from '@/components/addTravel/FloatingMenu';
+import Introduction from '@/components/addTravel/Introduction';
 import useImageStore from '@/stores/useImageStore';
 import useImageUpload from '@/hooks/useImageUpload';
 
 const AddTravel = () => {
   const [enabled, setEnabled] = useState(false);
+  const [openSections, setOpenSections] = useState<string[]>([]);
+
   const titleRef = useRef<HTMLInputElement>(null);
   const priceRef = useRef<HTMLInputElement>(null);
   const images = useImageStore((state) => state.images);
+
+  const toggleSection = (section: string) => {
+    setOpenSections((prev) =>
+      prev.includes(section) ? prev.filter((item) => item !== section) : [...prev, section],
+    );
+  };
   const formData = new FormData();
   const { data: uploadedImages } = useImageUpload({ formData, enabled });
 
@@ -62,18 +70,25 @@ const AddTravel = () => {
           <span css={{ marginRight: '5px' }}>원</span>
           <span css={{ fontSize: '14px' }}>/ 1인</span>
         </GrayBack>
-        <Details title={'포함내용'} />
-        <Details title={'미포함내용'} />
-        <Details title={'이용안내'} />
-        <Details title={'FAQ'} />
+
+        {openSections.includes('포함내용') && <Details title={'포함내용'} />}
+        {openSections.includes('미포함내용') && <Details title={'미포함내용'} />}
+        {openSections.includes('이용안내') && <Details title={'이용안내'} />}
+        {openSections.includes('FAQ') && <Details title={'FAQ'} />}
       </div>
-      <FloatingMenu onClick={handleUpload} />
+
+      <FloatingMenu
+        openSections={openSections}
+        toggleSection={toggleSection}
+        onClick={handleUpload}
+      />
     </div>
   );
 };
 
 export default AddTravel;
 
+// 스타일 정의
 const addTravelWrapper = css`
   position: relative;
   width: 680px;