feat: contact

src/App.tsx

@@ -2,6 +2,7 @@ import classNames from 'classnames/bind'
 import { useEffect, useState } from 'react'
 import styles from './App.module.scss'
 import Calendar from './components/sections/Calendar'
+import Contact from './components/sections/Contact'
 import Heading from './components/sections/Heading'
 import ImageGallery from './components/sections/ImageGallery'
 import Intro from './components/sections/intro'
@@ -78,6 +79,7 @@ function App() {
             <ImageGallery images={galleryImages} />
             <Calendar date={date} />
             <Map location={location} />
+            <Contact groom={groom} bride={bride} />
             {/* {JSON.stringify(wedding)} */}
         </div>
     )

src/components/sections/Contact.module.scss

@@ -0,0 +1,30 @@
+.wrap-contact {
+    display: flex;
+    padding: 8px;
+
+    .wrap-contact-info {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        line-height: 1.3;
+    }
+
+    .wrap-buttons {
+        .button {
+            width: 52px;
+            height: 24px;
+            border: 1px solid var(--black);
+            display: inline-block;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            border-radius: 4px;
+            background-color: #fff;
+            font-weight: 400;
+            margin-bottom: 6px;
+            box-sizing: border-box;
+            color: var(--black);
+            cursor: pointer;
+        }
+    }
+}

src/components/sections/Contact.tsx

@@ -0,0 +1,104 @@
+import classNames from 'classnames/bind'
+import React from 'react'
+import styles from './Contact.module.scss'
+import Section from '../shared/Section'
+import Accordion from '../shared/Accordion'
+import { Account, Wedding } from '@/models/wedding'
+import { CopyToClipboard } from 'react-copy-to-clipboard'
+
+const cx = classNames.bind(styles)
+
+function Contact({
+    groom,
+    bride,
+}: {
+    groom: Wedding['groom']
+    bride: Wedding['bride']
+}) {
+    return (
+        <Section title="연락처 및 마음을 전하실 곳">
+            <Accordion label="신랑측">
+                <ContactInfo
+                    name={groom.name}
+                    account={groom.account}
+                    phoneNumber={groom.phoneNumber}
+                />
+                <ContactInfo
+                    name={groom.parents[0].name}
+                    account={groom.parents[0].account}
+                    phoneNumber={groom.parents[0].phoneNumber}
+                />
+                <ContactInfo
+                    name={groom.parents[1].name}
+                    account={groom.parents[1].account}
+                    phoneNumber={groom.parents[1].phoneNumber}
+                />
+            </Accordion>
+            <Accordion label="신부측">
+                <ContactInfo
+                    name={bride.name}
+                    account={bride.account}
+                    phoneNumber={bride.phoneNumber}
+                />
+                <ContactInfo
+                    name={bride.parents[0].name}
+                    account={bride.parents[0].account}
+                    phoneNumber={bride.parents[0].phoneNumber}
+                />
+                <ContactInfo
+                    name={bride.parents[1].name}
+                    account={bride.parents[1].account}
+                    phoneNumber={bride.parents[1].phoneNumber}
+                />
+            </Accordion>
+        </Section>
+    )
+}
+
+function ContactInfo({
+    name,
+    account,
+    phoneNumber,
+}: {
+    name: string
+    account: Account
+    phoneNumber: string
+}) {
+    return (
+        <div className={cx('wrap-contact')}>
+            <div className={cx('wrap-contact-info')}>
+                <span>{`${account.bankName} | ${account.accountNumber}`}</span>
+                <span>{name}</span>
+            </div>
+            <ul className={cx('wrap-buttons')}>
+                <li>
+                    <a href={`tel: ${phoneNumber}`} className={cx('button')}>
+                        전화
+                    </a>
+                </li>
+                <li>
+                    <CopyToClipboard
+                        onCopy={() => alert('복사되었습니다.')}
+                        text={`${account.bankName} ${account.accountNumber}`}
+                    >
+                        <button className={cx('button')}>복사</button>
+                    </CopyToClipboard>
+                </li>
+                {account.kakaopayLink != null ? (
+                    <li>
+                        <a
+                            href={account.kakaopayLink}
+                            className={cx('button')}
+                            target="_blank"
+                            rel="noreferer noreferrer"
+                        >
+                            송금
+                        </a>
+                    </li>
+                ) : null}
+            </ul>
+        </div>
+    )
+}
+
+export default Contact

src/components/shared/Accordion.module.scss

@@ -0,0 +1,39 @@
+.wrap-accordion {
+
+    margin-bottom: 6px;
+
+    .wrap-header {
+
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 10px;
+        background-color: var(--beige);
+        border-radius: 6px;
+        cursor: pointer;
+
+
+        .icon-arrow-down {
+            width: 20px;
+            height: 20px;
+
+            // transform: rotate(-180deg);
+        }
+    }
+
+    .wrap-content {
+        display: none;
+    }
+}
+
+.wrap-accordion.open {
+    .wrap-header {
+        .icon-arrow-down {
+            transform: rotate(-180deg);
+        }
+    }
+
+    .wrap-content {
+        display: block;
+    }
+}

src/components/shared/Accordion.tsx

@@ -0,0 +1,48 @@
+import classNames from 'classnames/bind'
+import React, { useState } from 'react'
+import styles from './Accordion.module.scss'
+
+type Props = {
+    label: string
+    children: React.ReactNode
+}
+
+const cx = classNames.bind(styles)
+
+function Accordion({ children, label }: Props) {
+    const [expended, setExpended] = useState(false)
+
+    const handleToggle = () => {
+        setExpended((prev) => !prev)
+    }
+
+    return (
+        <div className={cx(['wrap-accordion', expended ? 'open' : ''])}>
+            <div className={cx('wrap-header')} onClick={handleToggle}>
+                <span>{label}</span>
+                <Arrow className={cx('icon-arrow-down')} />
+            </div>
+            <div className={cx('wrap-content')}>{children}</div>
+        </div>
+    )
+}
+
+function Arrow({ className }: { className: string }) {
+    return (
+        <svg
+            className={className}
+            height="20px"
+            id="Layer_1"
+            version="1.1"
+            viewBox="0 0 512 512"
+            width="20px"
+            xmlSpace="preserve"
+            xmlns="http://www.w3.org/2000/svg"
+            xmlnsXlink="http://www.w3.org/1999/xlink"
+        >
+            <polygon points="396.6,160 416,180.7 256,352 96,180.7 115.3,160 256,310.5 " />
+        </svg>
+    )
+}
+
+export default Accordion

src/models/wedding.ts

@@ -30,6 +30,7 @@ export interface Location {
 export interface Account {
     bankName: string
     accountNumber: string
+    kakaopayLink?: string
 }
 
 export interface Person {

src/scss/reset.scss

@@ -132,4 +132,34 @@ q:after {
 table {
     border-collapse: collapse;
     border-spacing: 0;
+}
+
+button {
+    border: none;
+    margin: 0;
+    padding: 0;
+    width: auto;
+    overflow: visible;
+
+    background: transparent;
+    font-family: inherit;
+
+    /* inherit font & color from ancestor */
+    color: inherit;
+    font: inherit;
+
+    /* Normalize `line-height`. Cannot be changed from `normal` in Firefox 4+. */
+    line-height: normal;
+
+    /* Corrects font smoothing for webkit */
+    -webkit-font-smoothing: inherit;
+    -moz-osx-font-smoothing: inherit;
+
+    /* Corrects inability to style clickable `input` types in iOS */
+    -webkit-appearance: none;
+}
+
+a {
+    text-decoration: none;
+    color: var(--black);
 }