팔로우 취소 모달 ui #15

src/components/Modal/modals/FollowNoModal.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import Modal from '../Modal';
+import styled from 'styled-components';
+import sadVector from '../../../assets/sadVector.png';
+
+interface ModalProps {
+  onClose: () => void;
+}
+
+const FollowNoModal: React.FC<ModalProps> = ({ onClose }) => {
+  return (
+    <Modal onClose={onClose}>
+      <Container>
+        <Img src={sadVector} />
+        <Title>팔로우가 취소되었습니다.</Title>
+        <Button onClick={onClose}>문의하기</Button>
+      </Container>
+    </Modal>
+  );
+};
+
+const Button = styled.button`
+  width: 302px;
+  height: 39px;
+  border-radius: 7px;
+  background-color: #c908ff;
+  border: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: #fff;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 700;
+`;
+
+const Title = styled.div`
+  font-family: Pretendard;
+  font-size: 18px;
+  font-style: normal;
+  font-weight: 600;
+  margin-bottom: 158px;
+`;
+
+const Img = styled.img`
+  width: 67px;
+  height: 65px;
+  margin-top: 75px;
+  margin-bottom: 41px;
+`;
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+`;
+
+export default FollowNoModal;