가맹점 정리

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

@@ -0,0 +1,87 @@
+import { SectionTitleArrow } from '@/entities/common/ui/section-title-arrow';
+import { Escrow, SectionKeys } from '../../model/types';
+import SlideDown from 'react-slidedown';
+import 'react-slidedown/lib/slidedown.css';
+import { useEffect, useState } from 'react';
+
+export interface EscrowSectionProps extends Escrow {
+  type: SectionKeys;
+  title?: string;
+  openChild: SectionKeys | null;
+  setOpenChild: (openChild: SectionKeys | null) => void;
+};
+
+export const EscrowSection = ({
+  type,
+  title,
+  companyName,
+  businessRegistrationNumber,
+  escrowStatus,
+  address,
+  merchantUrl,
+  serviceRegistrationNumber,
+  openChild,
+  setOpenChild
+}: EscrowSectionProps) => {
+
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+
+  const openSection = () => {
+    const status = !isOpen;
+    setIsOpen(status);
+    if(!!status){
+      setOpenChild(type);  
+    }
+    else {
+      setOpenChild(null)
+    }
+  };
+
+  useEffect(() => {
+    if(!!openChild && openChild !== type){
+    setIsOpen(false);
+    }
+  }, [openChild]);
+  
+  return (
+    <>
+      <div className="section">
+        <div className="section-title"
+          onClick={ () => openSection() }
+        >
+          { title } <SectionTitleArrow isOpen={ isOpen }></SectionTitleArrow>
+        </div>
+        <SlideDown className={'my-dropdown-slidedown'}>
+        { isOpen &&
+          <ul className="kv-list">
+            <li className="kv-row">
+              <span className="k">상호</span>
+              <span className="v">{ companyName }</span>
+            </li>
+            <li className="kv-row">
+              <span className="k">사업자번호</span>
+              <span className="v">{ businessRegistrationNumber }</span>
+            </li>
+            <li className="kv-row">
+              <span className="k">NICECROW 가입</span>
+              <span className="v">{ escrowStatus }</span>
+            </li>
+            <li className="kv-row">
+              <span className="k">소재지</span>
+              <span className="v">{ address }</span>
+            </li>
+            <li className="kv-row">
+              <span className="k">URL</span>
+              <span className="v">{ merchantUrl }</span>
+            </li>
+            <li className="kv-row">
+              <span className="k">서비스 등록번호</span>
+              <span className="v">{ serviceRegistrationNumber }</span>
+            </li>
+          </ul>
+        }
+        </SlideDown> 
+      </div>
+    </>
+  );
+};