87 lines
2.4 KiB
TypeScript
87 lines
2.4 KiB
TypeScript
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>
|
|
</>
|
|
);
|
|
}; |