1
│ ─── contacts ──────────────────────────────── │
2
│                                               │
3
│   Name                                        │
4
│   ┌────────────────────────────────────────┐  │
5
│   │ Value                                  │  │  높이: 40px
6
│   └────────────────────────────────────────┘  │
7
│                                               │
8
│   Email                                       │
9
│   ┌────────────────────────────────────────┐  │
10
│   │ Value                                  │  │
11
│   └────────────────────────────────────────┘  │
12
│                                               │
13
│   Message (textarea)                          │
14
│                                               │
15
│   ┌──────────┐  ┌──────────────────────────┐  │
16
│   │  Cancel  │  │         Submit           │  │
17
│   └──────────┘  └──────────────────────────┘  │

1
import { useState, useRef } from 'react'
2
import emailjs from '@emailjs/browser'
3
import SectionTitle from './SectionTitle'
4

5
const Contact = () => {
6
  const formRef = useRef(null)
7
  const [loading, setLoading] = useState(false)
8

9
  const handleSubmit = (e) => {
10
    e.preventDefault()
11
    setLoading(true)
12

13
    emailjs
14
      .sendForm(
15
        'YOUR_SERVICE_ID',
16
        'YOUR_TEMPLATE_ID',
17
        formRef.current,
18
        { publicKey: 'YOUR_PUBLIC_KEY' }
19
      )
20
      .then(() => {
21
        alert('메시지가 전송되었다!')
22
        formRef.current.reset()
23
      })
24
      .catch((error) => {
25
        alert('전송 실패: ' + error.text)
26
      })
27
      .finally(() => {
28
        setLoading(false)
29
      })
30
  }
31

32
  const handleReset = () => {
33
    formRef.current.reset()
34
  }
35

36
  return (
37
    <section className="contact" id="contacts">
38
      <SectionTitle
39
        title="contacts"
40
        subtitle="끈기와 열정으로 성장하는 오성의입니다."
41
      />
42

43
      <form className="contact-form" ref={formRef} onSubmit={handleSubmit}>
44
        <div className="form-field">
45
          <label className="form-label">Name</label>
46
          <input
47
            className="form-input"
48
            type="text"
49
            name="user_name"
50
            placeholder="이름을 입력하세요"
51
            required
52
          />
53
        </div>
54

55
        <div className="form-field">
56
          <label className="form-label">Email</label>
57
          <input
58
            className="form-input"
59
            type="email"
60
            name="user_email"
61
            placeholder="이메일을 입력하세요"
62
            required
63
          />
64
        </div>
65

66
        <div className="form-field">
67
          <label className="form-label">Message</label>
68
          <textarea
69
            className="form-textarea"
70
            name="message"
71
            placeholder="메시지를 입력하세요"
72
            required
73
          />
74
        </div>
75

76
        <div className="form-buttons">
77
          <button
78
            type="button"
79
            className="form-btn form-btn--cancel"
80
            onClick={handleReset}
81
          >
82
            Cancel
83
          </button>
84
          <button
85
            type="submit"
86
            className="form-btn form-btn--submit"
87
            disabled={loading}
88
          >
89
            {loading ? 'Sending...' : 'Submit'}
90
          </button>
91
        </div>
92
      </form>
93
    </section>
94
  )
95
}
96

97
export default Contact

1
제어 컴포넌트 (useState):
2
  React가 input 값을 직접 관리한다
3
  value={state} + onChange={setState}
4

5
비제어 컴포넌트 (useRef):
6
  HTML form이 값을 스스로 관리한다
7
  React는 ref로 form에 접근만 한다

1
const formRef = useRef(null)
2

3
<form ref={formRef}>
4
  <input name="user_name" />
5
</form>
6

7
emailjs.sendForm('...', '...', formRef.current, { publicKey: '...' })

1
emailjs.sendForm(...)     ← 이메일 전송 요청 (시간이 걸린다)
2
  .then(() => { ... })    ← 성공하면 실행
3
  .catch(() => { ... })   ← 실패하면 실행
4
  .finally(() => { ... }) ← 성공/실패 상관없이 항상 실행

1
택배 접수 (sendForm)
2
  ├─ 배달 완료 (.then)    → "배달되었습니다" 알림
3
  ├─ 배달 실패 (.catch)   → "배달 실패" 알림
4
  └─ 어떤 경우든 (.finally) → 배달 추적 화면 닫기

1
/* src/index.css 에 추가 */
2

3
.contact {
4
  padding: 80px 24px;
5
}
6

7
.contact-form {
8
  width: 320px;
9
  display: flex;
10
  flex-direction: column;
11
  gap: 20px;
12
}
13

14
.form-field {
15
  display: flex;
16
  flex-direction: column;
17
  gap: 6px;
18
}
19

20
.form-label {
21
  font-size: 16px;
22
  font-weight: 500;
23
  color: #1e1e1e;
24
}
25

26
.form-input {
27
  height: 40px;
28
  padding: 0 12px;
29
  border: 1px solid #d0d0d0;
30
  border-radius: 4px;
31
  font-size: 16px;
32
  color: #1e1e1e;
33
  outline: none;
34
  width: 100%;
35
}
36

37
.form-textarea {
38
  height: 80px;
39
  padding: 10px 12px;
40
  border: 1px solid #d0d0d0;
41
  border-radius: 4px;
42
  font-size: 16px;
43
  color: #1e1e1e;
44
  resize: none;
45
  outline: none;
46
  width: 100%;
47
}
48

49
.form-input::placeholder,
50
.form-textarea::placeholder {
51
  color: #b3b3b3;
52
}
53

54
.form-input:focus,
55
.form-textarea:focus {
56
  border-color: #2c2c2c;
57
}
58

59
.form-buttons {
60
  display: flex;
61
  gap: 12px;
62
}
63

64
.form-btn {
65
  height: 40px;
66
  padding: 0 20px;
67
  border: none;
68
  border-radius: 4px;
69
  font-size: 16px;
70
  cursor: pointer;
71
  transition: opacity 0.2s;
72
}
73

74
.form-btn--cancel {
75
  background-color: #f0f0f0;
76
  color: #303030;
77
}
78

79
.form-btn--submit {
80
  flex: 1;
81
  background-color: #2c2c2c;
82
  color: #f5f5f5;
83
}
84

85
.form-btn--submit:disabled {
86
  opacity: 0.5;
87
  cursor: not-allowed;
88
}
89

90
.form-btn:hover:not(:disabled) {
91
  opacity: 0.8;
92
}