기능 | 연락처 화면 - ssseok/wedding.invitation GitHub Wiki

목적

  • 하객들이 결혼식 참석 여부를 알리거나 관련 질문을 할 수 있는 통로를 마련합니다.
  • 하객들이 신랑, 신부 및 양가 부모님께 축하 인사를 전할 수 있는 직접적인 방법을 제공합니다.

설치

bunx --bun shadcn@latest add dialog

bunx --bun shadcn@latest add button

코드

import {
  BRIDE_CONTACT,
  BRIDE_FATHER_NAME,
  BRIDE_MOTHER_NAME,
  BRIDE_NAME,
  GROOM_CONTACT,
  GROOM_FATHER_NAME,
  GROOM_MOTHER_NAME,
  GROOM_NAME,
} from '../../config';
import ContactDialog from './contact-dialog';

export default function Contact() {
  return (
    <div className='mb-20'>
      <div className='mt-14 flex items-center justify-center gap-3'>
        <div>
          <div>{GROOM_FATHER_NAME}</div>
          <div>{GROOM_MOTHER_NAME}</div>
        </div>
        <span>의</span>
        <span>차남</span>
        <strong>{GROOM_NAME}</strong>
      </div>
      <div className='mt-5 flex items-center justify-center gap-3'>
        <div>
          <div>{BRIDE_FATHER_NAME}</div>
          <div>{BRIDE_MOTHER_NAME}</div>
        </div>
        <span>의</span>
        <span>장녀</span>
        <strong>{BRIDE_NAME}</strong>
      </div>
      <div className='mt-14 text-center'>
        <ContactDialog groomList={GROOM_CONTACT} priestList={BRIDE_CONTACT} />
      </div>
    </div>
  );
}
import { Button } from '@/common/components/ui/button';
import {
  Dialog,
  DialogContent,
  DialogTitle,
  DialogTrigger,
} from '@/common/components/ui/dialog';

import { Phone } from 'lucide-react';
import { MessageCircleMore } from 'lucide-react';

type Contact = {
  name: string;
  designation: string;
  phone: string;
};

export default function ContactDialog({
  groomList,
  priestList,
}: {
  groomList: Contact[];
  priestList: Contact[];
}) {
  return (
    <Dialog>
      <DialogTrigger asChild>
        <Button variant='outline'>연락하기</Button>
      </DialogTrigger>
      <DialogContent className='top-[50%] w-10/12 rounded-lg border'>
        <DialogTitle className='p-4 text-center'>연락처</DialogTitle>
        <div className='px-6 pb-4 text-sm space-y-4'>
          <div className='space-y-1'>
            {groomList.map((contact, index) => (
              <ContactItem key={index} contact={contact} />
            ))}
          </div>
          <div className='space-y-1'>
            {priestList.map((contact, index) => (
              <ContactItem key={index} contact={contact} />
            ))}
          </div>
        </div>
      </DialogContent>
    </Dialog>
  );
}

function ContactItem({ contact }: { contact: Contact }) {
  return (
    <div className='flex items-center justify-between gap-2'>
      <div className='flex-1'>{contact.designation}</div>
      <div className='flex-1'>{contact.name}</div>
      <div className='flex gap-3 text-gy-8'>
        <a
          href={`tel:${contact.phone}`}
          className='active:opacity-60 hover:opacity-60 transition-opacity'
        >
          <Phone className='w-5 h-5' />
        </a>
        <a
          href={`sms:${contact.phone}`}
          className='active:opacity-60 hover:opacity-60 transition-opacity'
        >
          <MessageCircleMore className='w-5 h-5' />
        </a>
      </div>
    </div>
  );
}
  • 특별한 기능을 가지진 않았습니다. 하지만 새롭게 안 사실은 a태그에 속성인 tel, sms 알 수 있었습니다.
⚠️ **GitHub.com Fallback** ⚠️