diff --git a/src/components/about/contactModal.tsx b/src/components/about/contactModal.tsx new file mode 100644 index 0000000..b5eb751 --- /dev/null +++ b/src/components/about/contactModal.tsx @@ -0,0 +1,77 @@ +import { useState } from "react"; +import { useMousePosition } from "../cursor/Context"; +import { motion } from "framer-motion"; + +const LEADER = [ + { + id: 1, + name: "서하령", + position: "전시 위원장", + email: "shr504@naver.com", + }, + { + id: 2, + name: "고수영", + position: "웹사이트 팀장", + email: "suyoungkko@gmail.com", + }, + { + id: 3, + name: "박민지", + position: "개발자", + email: "minzzi0068@gmail.com", + }, +]; + +const ContactModal = () => { + const { smallEnter, defaultEnter } = useMousePosition(); + const [isOpen, setIsOpen] = useState(false); + + const handleOpen = () => { + setIsOpen(!isOpen); + }; + + return ( + +
+ CONTACT +
+
+ {LEADER.map((item, i, leader) => ( +
+

{item.position}

+
+

{item.name}

+ + {item.email} + +
+
+ ))} +
+
+ ); +}; + +export default ContactModal; diff --git a/src/pages/About.tsx b/src/pages/About.tsx index 3df369c..ad93c32 100644 --- a/src/pages/About.tsx +++ b/src/pages/About.tsx @@ -1,4 +1,5 @@ import AboutMain from "../components/about/AboutMain"; +import ContactModal from "../components/about/contactModal"; import Developer from "../components/about/Developer"; import Executives from "../components/about/Executives"; import Interviews from "../components/about/Interviews"; @@ -18,6 +19,7 @@ const About = () => { + ); };