첫 커밋

src/entities/business-member/ui/info-contract-manager.tsx

@@ -0,0 +1,53 @@
+import { motion } from 'framer-motion';
+import { BusinessMemberInfoKeys, InfoProps } from '../model/types';
+import { InfoArrow } from './info-arrow';
+
+export const InfoContractManager = ({
+  infoContractManager,
+  show,
+  onClickToShowInfo
+}: InfoProps) => {
+
+  const variants = {
+    hidden: { height: 0, padding: 0, display: 'none' },
+    visible: { height: 'auto', paddingTop: '12px', display: 'block' },
+  };
+
+  const onClickToSetShowInfo = () => {
+    if(!!onClickToShowInfo){
+      onClickToShowInfo(BusinessMemberInfoKeys.InfoContractManager);
+    }
+  };
+
+  return (
+    <>
+      <div className="section">
+        <div className="section-title"
+          onClick={ () => onClickToSetShowInfo() }
+        >
+          계약 담당자 <InfoArrow show={ show }></InfoArrow>
+        </div>
+        <motion.ul 
+          className="kv-list"
+          initial="hidden"
+          animate={ (show)? 'visible': 'hidden' }
+          variants={ variants }
+          transition={{ duration: 0.3 }}
+        >
+          <li className="kv-row">
+            <span className="k">김테스트</span>
+            <span className="v"></span>
+          </li>
+          <li className="kv-row">
+            <span className="k">010-1234-****</span>
+            <span className="v"></span>
+          </li>
+          <li className="kv-row">
+            <span className="k">testkim@nicepay.co.kr</span>
+            <span className="v"></span>
+          </li>
+        </motion.ul>
+      </div>
+    </>
+  );
+};