가맹점 정리

src/entities/merchant/ui/section/manager-section.tsx

@@ -0,0 +1,75 @@
+import { SectionTitleArrow } from '@/entities/common/ui/section-title-arrow';
+import { SectionKeys } from '../../model/types';
+import SlideDown from 'react-slidedown';
+import 'react-slidedown/lib/slidedown.css';
+import { useEffect, useState } from 'react';
+
+export interface ManagerSectionProps {
+  type: SectionKeys;
+  title?: string;
+  manager?: string;
+  managerTelephone?: string;
+  managetEmail?: string;
+  openChild: SectionKeys | null;
+  setOpenChild: (openChild: SectionKeys | null) => void;
+};
+
+export const ManagerSection = ({
+  type,
+  title,
+  manager,
+  managerTelephone,
+  managetEmail,
+  openChild,
+  setOpenChild
+}: ManagerSectionProps) => {
+
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+
+  const opeSection = () => {
+    const staus = !isOpen;
+    setIsOpen(staus);
+    if(!!staus){
+      setOpenChild(type);  
+    }
+    else {
+      setOpenChild(null)
+    }
+  };
+
+  useEffect(() => {
+    if(!!openChild && openChild !== type){
+    setIsOpen(false);
+    }
+  }, [openChild]);
+  
+  return (
+    <>
+      <div className="section">
+        <div className="section-title"
+          onClick={ () => opeSection() }
+        >
+          { title } <SectionTitleArrow isOpen={ isOpen }></SectionTitleArrow>
+        </div>
+        <SlideDown className={'my-dropdown-slidedown'}>
+        { isOpen &&
+          <ul className="kv-list">
+            <li className="kv-row">
+              <span className="k">{ manager }</span>
+              <span className="v"></span>
+            </li>
+            <li className="kv-row">
+              <span className="k">{ managerTelephone }</span>
+              <span className="v"></span>
+            </li>
+            <li className="kv-row">
+              <span className="k">{ managetEmail }</span>
+              <span className="v"></span>
+            </li>
+          </ul>
+        }
+        </SlideDown> 
+      </div>
+    </>
+  );
+};