diff --git a/src/components/Modal/domain/MemberInvite.module.css b/src/components/Modal/domain/MemberInvite.module.css new file mode 100644 index 0000000..a196476 --- /dev/null +++ b/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; + } +} diff --git a/src/components/Modal/domain/MemberInvite.tsx b/src/components/Modal/domain/MemberInvite.tsx new file mode 100644 index 0000000..82f3e66 --- /dev/null +++ b/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 ( + +
+ +

+ 멤버 초대 +

+

+ 그룹에 참여할 수 있는 링크를 복사합니다. +

+ +
+
+ ); +} diff --git a/src/components/Modal/types/types.ts b/src/components/Modal/types/types.ts index 6c53d07..98b4c1c 100644 --- a/src/components/Modal/types/types.ts +++ b/src/components/Modal/types/types.ts @@ -6,6 +6,7 @@ interface BaseModalProps { children?: ReactNode; ariaDescribedby?: string; className?: string; + contentClassName?: string; closeOnOverlayClick?: boolean; closeOnEscape?: boolean; }