멤버 초대 모달 추가

src/components/Modal/domain/MemberInvite.module.css

@@ -0,0 +1,90 @@
+@import '@shared/styles/color.css';
+
+.container {
+  position: relative;
+  width: 384px;
+  height: 211px;
+  padding: 40px 24px 32px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+  text-align: center;
+}
+
+.modalContent {
+  border-radius: 24px;
+}
+
+.closeButton {
+  position: absolute;
+  top: 16px;
+  right: 16px;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+}
+
+.title {
+  margin: 8px 0 0;
+  color: var(--Text-Primary, #1e293b);
+  font-family: Pretendard, sans-serif;
+  font-size: 16px;
+  font-weight: 500;
+  line-height: 19px;
+}
+
+.description {
+  margin: 4px 0 16px;
+  color: var(--Text-Secondary, #334155);
+  font-family: Pretendard, sans-serif;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 17px;
+}
+
+.copyButton {
+  display: flex;
+  width: 280px;
+  height: 48px;
+  padding: 14px 24px;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+  border-radius: 16px;
+  border: none;
+  background: var(--color-brand-primary);
+  color: var(--Text-inverse, #fff);
+  font-family: Pretendard, sans-serif;
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 19px;
+  cursor: pointer;
+}
+
+.copyButton:disabled {
+  background: var(--color-interaction-inactive);
+  cursor: not-allowed;
+}
+
+@media (max-width: 480px) {
+  .modalContent {
+    border-radius: 24px 24px 0 0;
+  }
+
+  .container {
+    width: 100%;
+    max-width: 375px;
+    height: 195px;
+    flex-shrink: 0;
+    border-radius: 24px 24px 0 0;
+    background: var(--Background-Primary, #fff);
+    box-sizing: border-box;
+  }
+}

src/components/Modal/domain/MemberInvite.tsx

@@ -0,0 +1,48 @@
+'use client';
+
+import Image from 'next/image';
+import Modal from '../Modal';
+import styles from './MemberInvite.module.css';
+import xMarkBig from '@/assets/icons/xMark/xMarkBig.svg';
+
+export type MemberInviteProps = {
+  isOpen: boolean;
+  onClose: () => void;
+  inviteLink: string;
+  onCopy?: (link: string) => void;
+};
+
+export default function MemberInvite({ isOpen, onClose, inviteLink, onCopy }: MemberInviteProps) {
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(inviteLink);
+    } finally {
+      onCopy?.(inviteLink);
+    }
+  };
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      onClose={onClose}
+      ariaLabelledby="member-invite-title"
+      ariaDescribedby="member-invite-desc"
+      contentClassName={styles.modalContent}
+    >
+      <div className={styles.container}>
+        <button type="button" className={styles.closeButton} onClick={onClose} aria-label="close">
+          <Image src={xMarkBig} alt="" width={24} height={24} />
+        </button>
+        <h2 id="member-invite-title" className={styles.title}>
+          멤버 초대
+        </h2>
+        <p id="member-invite-desc" className={styles.description}>
+          그룹에 참여할 수 있는 링크를 복사합니다.
+        </p>
+        <button type="button" className={styles.copyButton} onClick={handleCopy}>
+          링크 복사하기
+        </button>
+      </div>
+    </Modal>
+  );
+}

src/components/Modal/types/types.ts

@@ -6,6 +6,7 @@ interface BaseModalProps {
   children?: ReactNode;
   ariaDescribedby?: string;
   className?: string;
+  contentClassName?: string;
   closeOnOverlayClick?: boolean;
   closeOnEscape?: boolean;
 }