{"id":134,"date":"2026-06-26T13:32:51","date_gmt":"2026-06-26T13:32:51","guid":{"rendered":"https:\/\/aabbee.cafe24.com\/?p=134"},"modified":"2026-06-26T13:32:51","modified_gmt":"2026-06-26T13:32:51","slug":"contact","status":"publish","type":"post","link":"https:\/\/coalacoding.com\/?p=134","title":{"rendered":"Contact"},"content":{"rendered":"

07. Contact.jsx \u2014 EmailJS\ub85c \uc774\uba54\uc77c \uc804\uc1a1<\/h1>\n

\uc774\ubc88 \ub2e8\uacc4\uc5d0\uc11c \ud560 \uc77c<\/h2>\n

Contact \ud3fc\uc5d0\uc11c \uc785\ub825\ud55c \ub0b4\uc6a9\uc744 \uc2e4\uc81c \uc774\uba54\uc77c\ub85c \uc804\uc1a1<\/strong>\ud55c\ub2e4.
\nEmailJS \u2014 \ubc31\uc5d4\ub4dc \uc11c\ubc84 \uc5c6\uc774 \ud504\ub860\ud2b8\uc5d4\ub4dc\uc5d0\uc11c \ubc14\ub85c \uc774\uba54\uc77c\uc744 \ubcf4\ub0b4\uc8fc\ub294 \uc11c\ube44\uc2a4\uc774\ub2e4.<\/p>\n

\n

\ud53c\uadf8\ub9c8 \ub514\uc790\uc778 \ubd84\uc11d<\/h2>\n
\u2502 \u2500\u2500\u2500 contacts \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 \u2502\n\u2502                                               \u2502\n\u2502   Name                                        \u2502\n\u2502   \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510  \u2502\n\u2502   \u2502 Value                                  \u2502  \u2502  \ub192\uc774: 40px\n\u2502   \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518  \u2502\n\u2502                                               \u2502\n\u2502   Email                                       \u2502\n\u2502   \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510  \u2502\n\u2502   \u2502 Value                                  \u2502  \u2502\n\u2502   \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518  \u2502\n\u2502                                               \u2502\n\u2502   Message (textarea)                          \u2502\n\u2502                                               \u2502\n\u2502   \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510  \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510  \u2502\n\u2502   \u2502  Cancel  \u2502  \u2502         Submit           \u2502  \u2502\n\u2502   \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518  \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518  \u2502\n<\/code><\/pre>\n
\n
STEP 0 \u2014 EmailJS \uac00\uc785 \ubc0f \uc124\uc815<\/h2>\n
EmailJS\ub97c \uc0ac\uc6a9\ud558\ub824\uba74 3\uac00\uc9c0 \uac12\uc774 \ud544\uc694\ud558\ub2e4.<\/p>\n\n\n\n\n\n\n\n
\uac12<\/th>\n\uc124\uba85<\/th>\n\uc5b4\ub514\uc11c \ucc3e\ub098<\/th>\n<\/tr>\n<\/thead>\n
Service ID<\/td>\n\uc5f0\uacb0\ud55c \uc774\uba54\uc77c \uc11c\ube44\uc2a4 \uc2dd\ubcc4\uc790<\/td>\nEmail Services \uba54\ub274<\/td>\n<\/tr>\n
Template ID<\/td>\n\uc774\uba54\uc77c \ud15c\ud50c\ub9bf \uc2dd\ubcc4\uc790<\/td>\nEmail Templates \uba54\ub274<\/td>\n<\/tr>\n
Public Key<\/td>\n\uacf5\uac1c \uc778\uc99d \ud0a4<\/td>\nAccount > API Keys<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
    \n
  1. \n
    EmailJS \uac00\uc785<\/strong> \u2014 https:\/\/www.emailjs.com<\/a> \uc5d0 \uc811\uc18d\ud558\uc5ec \ubb34\ub8cc \uacc4\uc815\uc744 \ub9cc\ub4e0\ub2e4<\/p>\n<\/li>\n
  2. \n
    \uc774\uba54\uc77c \uc11c\ube44\uc2a4 \uc5f0\uacb0<\/strong> \u2014 Email Services \uba54\ub274\uc5d0\uc11c Gmail \ub4f1 \uc0ac\uc6a9\ud560 \uc774\uba54\uc77c\uc744 \uc5f0\uacb0\ud55c\ub2e4. \uc5f0\uacb0\ud558\uba74 Service ID<\/strong>\uac00 \uc0dd\uae34\ub2e4 (\uc608: service_abc123<\/code>)<\/p>\n<\/li>\n
  3. \n
    \uc774\uba54\uc77c \ud15c\ud50c\ub9bf \ub9cc\ub4e4\uae30<\/strong> \u2014 Email Templates \uba54\ub274\uc5d0\uc11c \uc0c8 \ud15c\ud50c\ub9bf\uc744 \ub9cc\ub4e0\ub2e4. \uc544\ub798\ucc98\ub7fc \uc791\uc131\ud55c\ub2e4<\/p>\n<\/li>\n<\/ol>\n
    Subject: \uc774\ub825\uc11c \uc0ac\uc774\ud2b8\uc5d0\uc11c \uc0c8 \uba54\uc2dc\uc9c0\uac00 \ub3c4\ucc29\ud588\uc2b5\ub2c8\ub2e4\n\nHello,\n\nYou got a new message from {{user_name}} ({{user_email}}):\n\n{{message}}\n\nBest wishes,\nEmailJS team\n<\/code><\/pre>\n
    \n
    Info<\/strong>: {{user_name}}<\/code>, {{user_email}}<\/code>, {{message}}<\/code> \u2014 \uc774\uc911 \uc911\uad04\ud638 \uc548\uc758 \uc774\ub984\uc740 HTML form\uc758 name<\/code> \uc18d\uc131\uacfc \uc77c\uce58\ud574\uc57c \ud55c\ub2e4. \ud3fc\uc5d0\uc11c name="user_name"<\/code>\uc73c\ub85c \ubcf4\ub0b4\uba74 \ud15c\ud50c\ub9bf\uc5d0\uc11c {{user_name}}<\/code>\uc73c\ub85c \ubc1b\ub294\ub2e4.<\/p>\n<\/blockquote>\n
      \n
    1. \n
      Template ID \ud655\uc778<\/strong> \u2014 \ud15c\ud50c\ub9bf\uc744 \uc800\uc7a5\ud558\uba74 Template ID<\/strong>\uac00 \uc0dd\uae34\ub2e4 (\uc608: template_xyz789<\/code>)<\/p>\n<\/li>\n
    2. \n
      Public Key \ud655\uc778<\/strong> \u2014 Account > API Keys \uc5d0\uc11c Public Key<\/strong>\ub97c \ubcf5\uc0ac\ud55c\ub2e4<\/p>\n<\/li>\n<\/ol>\n
      \n
      STEP 1 \u2014 \ud328\ud0a4\uc9c0 \uc124\uce58<\/h2>\n
      npm install @emailjs\/browser\n<\/code><\/pre>\n
      \n
      None<\/strong>: @emailjs\/browser<\/code> \u2014 \ube0c\ub77c\uc6b0\uc800 \ud658\uacbd\uc5d0\uc11c EmailJS API\ub97c \uc0ac\uc6a9\ud560 \uc218 \uc788\uac8c \ud574\uc8fc\ub294 \ub77c\uc774\ube0c\ub7ec\ub9ac\uc774\ub2e4<\/p>\n<\/blockquote>\n
      \n
      STEP 2 \u2014 Contact.jsx \uc791\uc131<\/h2>\n
      import { useState, useRef } from 'react'\nimport emailjs from '@emailjs\/browser'\nimport SectionTitle from '.\/SectionTitle'\n\nconst Contact = () => {\n  const formRef = useRef(null)\n  const [loading, setLoading] = useState(false)\n\n  const handleSubmit = (e) => {\n    e.preventDefault()\n    setLoading(true)\n\n    emailjs\n      .sendForm(\n        'YOUR_SERVICE_ID',\n        'YOUR_TEMPLATE_ID',\n        formRef.current,\n        { publicKey: 'YOUR_PUBLIC_KEY' }\n      )\n      .then(() => {\n        alert('\uba54\uc2dc\uc9c0\uac00 \uc804\uc1a1\ub418\uc5c8\ub2e4!')\n        formRef.current.reset()\n      })\n      .catch((error) => {\n        alert('\uc804\uc1a1 \uc2e4\ud328: ' + error.text)\n      })\n      .finally(() => {\n        setLoading(false)\n      })\n  }\n\n  const handleReset = () => {\n    formRef.current.reset()\n  }\n\n  return (\n    <section className="contact" id="contacts">\n      <SectionTitle\n        title="contacts"\n        subtitle="\ub048\uae30\uc640 \uc5f4\uc815\uc73c\ub85c \uc131\uc7a5\ud558\ub294 \uc624\uc131\uc758\uc785\ub2c8\ub2e4."\n      \/>\n\n      <form className="contact-form" ref={formRef} onSubmit={handleSubmit}>\n        <div className="form-field">\n          <label className="form-label">Name<\/label>\n          <input\n            className="form-input"\n            type="text"\n            name="user_name"\n            placeholder="\uc774\ub984\uc744 \uc785\ub825\ud558\uc138\uc694"\n            required\n          \/>\n        <\/div>\n\n        <div className="form-field">\n          <label className="form-label">Email<\/label>\n          <input\n            className="form-input"\n            type="email"\n            name="user_email"\n            placeholder="\uc774\uba54\uc77c\uc744 \uc785\ub825\ud558\uc138\uc694"\n            required\n          \/>\n        <\/div>\n\n        <div className="form-field">\n          <label className="form-label">Message<\/label>\n          <textarea\n            className="form-textarea"\n            name="message"\n            placeholder="\uba54\uc2dc\uc9c0\ub97c \uc785\ub825\ud558\uc138\uc694"\n            required\n          \/>\n        <\/div>\n\n        <div className="form-buttons">\n          <button\n            type="button"\n            className="form-btn form-btn--cancel"\n            onClick={handleReset}\n          >\n            Cancel\n          <\/button>\n          <button\n            type="submit"\n            className="form-btn form-btn--submit"\n            disabled={loading}\n          >\n            {loading ? 'Sending...' : 'Submit'}\n          <\/button>\n        <\/div>\n      <\/form>\n    <\/section>\n  )\n}\n\nexport default Contact\n<\/code><\/pre>\n
      \n
      None<\/strong>: 1: import { useState, useRef } from 'react'<\/code> \u2014 useState<\/code>\ub294 \uc0c1\ud0dc \uad00\ub9ac, useRef<\/code>\ub294 DOM \uc694\uc18c\ub97c \uc9c1\uc811 \ucc38\uc870\ud560 \ub54c \uc0ac\uc6a9\ud55c\ub2e4<\/p>\n
      2: import emailjs from '@emailjs\/browser'<\/code> \u2014 EmailJS \ub77c\uc774\ube0c\ub7ec\ub9ac\ub97c \uac00\uc838\uc628\ub2e4<\/p>\n
      3: import SectionTitle from '.\/SectionTitle'<\/code> \u2014 \uc774\uc804\uc5d0 \ub9cc\ub4e0 \uc139\uc158 \ud0c0\uc774\ud2c0 \ucef4\ud3ec\ub10c\ud2b8\uc774\ub2e4<\/p>\n
      6: const formRef = useRef(null)<\/code> \u2014 form \ud0dc\uadf8\ub97c \uc9c1\uc811 \ucc38\uc870\ud558\uae30 \uc704\ud55c ref\uc774\ub2e4. EmailJS\uc758 sendForm<\/code>\uc774 form \uc694\uc18c\ub97c \uc9c1\uc811 \uc77d\uc5b4\uc57c \ud558\uae30 \ub54c\ubb38\uc5d0 \ud544\uc694\ud558\ub2e4<\/p>\n
      7: const [loading, setLoading] = useState(false)<\/code> \u2014 \uc804\uc1a1 \uc911\uc778\uc9c0 \uc544\ub2cc\uc9c0 \uc0c1\ud0dc\ub97c \uc800\uc7a5\ud55c\ub2e4. \uc804\uc1a1 \uc911\uc5d0\ub294 \ubc84\ud2bc\uc744 \ube44\ud65c\uc131\ud654\ud55c\ub2e4<\/p>\n
      9: const handleSubmit = (e) => {<\/code> \u2014 \ud3fc\uc744 \uc81c\ucd9c\ud560 \ub54c \uc2e4\ud589\ub418\ub294 \ud568\uc218\uc774\ub2e4<\/p>\n
      10: e.preventDefault()<\/code> \u2014 form \ud0dc\uadf8\uc758 \uae30\ubcf8 \ub3d9\uc791(\ud398\uc774\uc9c0 \uc0c8\ub85c\uace0\uce68)\uc744 \ub9c9\ub294\ub2e4<\/p>\n
      11: setLoading(true)<\/code> \u2014 \uc804\uc1a1 \uc2dc\uc791\uc744 \ud45c\uc2dc\ud55c\ub2e4<\/p>\n
      13~18: emailjs.sendForm(...)<\/code> \u2014 EmailJS\uc5d0 \uc774\uba54\uc77c \uc804\uc1a1\uc744 \uc694\uccad\ud55c\ub2e4<\/p>\n
        \n
      • \uccab \ubc88\uc9f8 \uc778\uc790: Service ID<\/li>\n
      • \ub450 \ubc88\uc9f8 \uc778\uc790: Template ID<\/li>\n
      • \uc138 \ubc88\uc9f8 \uc778\uc790: form DOM \uc694\uc18c (formRef.current<\/code>)<\/li>\n
      • \ub124 \ubc88\uc9f8 \uc778\uc790: Public Key \uac1d\uccb4<\/li>\n<\/ul>\n
        19~21: .then(() => { ... })<\/code> \u2014 \uc804\uc1a1 \uc131\uacf5 \uc2dc \uc54c\ub9bc\uc744 \ub744\uc6b0\uace0, formRef.current.reset()<\/code>\uc73c\ub85c \ud3fc\uc744 \ucd08\uae30\ud654\ud55c\ub2e4<\/p>\n
        22~24: .catch((error) => { ... })<\/code> \u2014 \uc804\uc1a1 \uc2e4\ud328 \uc2dc \uc5d0\ub7ec \uba54\uc2dc\uc9c0\ub97c \ubcf4\uc5ec\uc900\ub2e4<\/p>\n
        25~27: .finally(() => { ... })<\/code> \u2014 \uc131\uacf5\/\uc2e4\ud328 \uc0c1\uad00\uc5c6\uc774 loading \uc0c1\ud0dc\ub97c false<\/code>\ub85c \ub418\ub3cc\ub9b0\ub2e4<\/p>\n
        30~32: const handleReset = () => { ... }<\/code> \u2014 Cancel \ubc84\ud2bc \ud074\ub9ad \uc2dc \ud3fc\uc758 \ubaa8\ub4e0 \uac12\uc744 \ucd08\uae30\ud654\ud55c\ub2e4<\/p>\n
        42: ref={formRef}<\/code> \u2014 form \ud0dc\uadf8\uc5d0 ref\ub97c \uc5f0\uacb0\ud55c\ub2e4. \uc774\uc81c formRef.current<\/code>\ub85c \uc774 form \uc694\uc18c\uc5d0 \uc811\uadfc\ud560 \uc218 \uc788\ub2e4<\/p>\n
        47: name="user_name"<\/code> \u2014 EmailJS \ud15c\ud50c\ub9bf\uc758 {{user_name}}<\/code>\uacfc \ub9e4\uce6d\ub418\ub294 \uc774\ub984\uc774\ub2e4<\/p>\n
        49: required<\/code> \u2014 \ube48 \uce78\uc73c\ub85c \uc81c\ucd9c\ud560 \uc218 \uc5c6\uac8c \ub9c9\ub294\ub2e4<\/p>\n
        75: disabled={loading}<\/code> \u2014 \uc804\uc1a1 \uc911\uc5d0\ub294 \ubc84\ud2bc\uc744 \ud074\ub9ad\ud560 \uc218 \uc5c6\uac8c \ub9c9\ub294\ub2e4. \uc911\ubcf5 \uc804\uc1a1\uc744 \ubc29\uc9c0\ud55c\ub2e4<\/p>\n
        77: {loading ? 'Sending...' : 'Submit'}<\/code> \u2014 \uc0bc\ud56d \uc5f0\uc0b0\uc790\ub85c \uc804\uc1a1 \uc911\uc774\uba74 "Sending…", \uc544\ub2c8\uba74 "Submit"\uc744 \ud45c\uc2dc\ud55c\ub2e4<\/p>\n<\/blockquote>\n
        \n
        Warning<\/strong>: 'YOUR_SERVICE_ID'<\/code>, 'YOUR_TEMPLATE_ID'<\/code>, 'YOUR_PUBLIC_KEY'<\/code>\ub294 \ubc18\ub4dc\uc2dc \ubcf8\uc778\uc758 EmailJS \ub300\uc2dc\ubcf4\ub4dc\uc5d0\uc11c \ubcf5\uc0ac\ud55c \uc2e4\uc81c \uac12\uc73c\ub85c \ubc14\uafd4\uc57c \ud55c\ub2e4.<\/p>\n<\/blockquote>\n
        \n
        \uc0c8\ub85c\uc6b4 \uac1c\ub150: useRef<\/h2>\n
        \uc774\uc804 \ub2e8\uacc4\uc5d0\uc11c\ub294 useState<\/code>\ub85c input \uac12\uc744 \uad00\ub9ac\ud588\ub2e4 (\uc81c\uc5b4 \ucef4\ud3ec\ub10c\ud2b8).
        \n\uc774\ubc88\uc5d0\ub294 useRef<\/code>\ub85c form \uc790\uccb4\ub97c \ucc38\uc870\ud55c\ub2e4 (\ube44\uc81c\uc5b4 \ucef4\ud3ec\ub10c\ud2b8).<\/p>\n
        \uc81c\uc5b4 \ucef4\ud3ec\ub10c\ud2b8 (useState):\n  React\uac00 input \uac12\uc744 \uc9c1\uc811 \uad00\ub9ac\ud55c\ub2e4\n  value={state} + onChange={setState}\n\n\ube44\uc81c\uc5b4 \ucef4\ud3ec\ub10c\ud2b8 (useRef):\n  HTML form\uc774 \uac12\uc744 \uc2a4\uc2a4\ub85c \uad00\ub9ac\ud55c\ub2e4\n  React\ub294 ref\ub85c form\uc5d0 \uc811\uadfc\ub9cc \ud55c\ub2e4\n<\/code><\/pre>\n
        EmailJS\uc758 sendForm<\/code>\uc740 form DOM \uc694\uc18c\ub97c \ud1b5\uc9f8\ub85c \uc77d\uc5b4\uc11c \ub370\uc774\ud130\ub97c \uc218\uc9d1\ud55c\ub2e4.
        \n\uadf8\ub798\uc11c useRef<\/code>\ub85c form\uc744 \ucc38\uc870\ud558\ub294 \ubc29\uc2dd\uc774 \ub354 \uc790\uc5f0\uc2a4\ub7fd\ub2e4.<\/p>\n
        const formRef = useRef(null)\n\n<form ref={formRef}>\n  <input name="user_name" \/>\n<\/form>\n\nemailjs.sendForm('...', '...', formRef.current, { publicKey: '...' })\n<\/code><\/pre>\n
        formRef.current<\/code> \u2014 ref \uc548\uc5d0 \uc800\uc7a5\ub41c \uc2e4\uc81c DOM \uc694\uc18c\uc774\ub2e4. useRef<\/code>\ub294 .current<\/code> \uc18d\uc131\uc5d0 \uac12\uc744 \ub2f4\uc544\ub454\ub2e4.<\/p>\n
        \n
        \uc0c8\ub85c\uc6b4 \uac1c\ub150: Promise (.then \/ .catch \/ .finally)<\/h2>\n
        emailjs.sendForm()<\/code>\uc740 Promise<\/strong>\ub97c \ubc18\ud658\ud55c\ub2e4.
        \nPromise \u2014 \ubbf8\ub798\uc5d0 \uc644\ub8cc\ub420 \uc791\uc5c5\uc744 \ub098\ud0c0\ub0b4\ub294 \uac1d\uccb4\uc774\ub2e4. "\ub098\uc911\uc5d0 \uacb0\uacfc\ub97c \uc54c\ub824\uc904\uac8c"\ub77c\ub294 \uc57d\uc18d\uc774\ub2e4.<\/p>\n
        emailjs.sendForm(...)     \u2190 \uc774\uba54\uc77c \uc804\uc1a1 \uc694\uccad (\uc2dc\uac04\uc774 \uac78\ub9b0\ub2e4)\n  .then(() => { ... })    \u2190 \uc131\uacf5\ud558\uba74 \uc2e4\ud589\n  .catch(() => { ... })   \u2190 \uc2e4\ud328\ud558\uba74 \uc2e4\ud589\n  .finally(() => { ... }) \u2190 \uc131\uacf5\/\uc2e4\ud328 \uc0c1\uad00\uc5c6\uc774 \ud56d\uc0c1 \uc2e4\ud589\n<\/code><\/pre>\n
        \ube44\uc720: \ud0dd\ubc30\ub97c \ubcf4\ub0b4\ub294 \uac83\uacfc \uac19\ub2e4.<\/p>\n
        \ud0dd\ubc30 \uc811\uc218 (sendForm)\n  \u251c\u2500 \ubc30\ub2ec \uc644\ub8cc (.then)    \u2192 "\ubc30\ub2ec\ub418\uc5c8\uc2b5\ub2c8\ub2e4" \uc54c\ub9bc\n  \u251c\u2500 \ubc30\ub2ec \uc2e4\ud328 (.catch)   \u2192 "\ubc30\ub2ec \uc2e4\ud328" \uc54c\ub9bc\n  \u2514\u2500 \uc5b4\ub5a4 \uacbd\uc6b0\ub4e0 (.finally) \u2192 \ubc30\ub2ec \ucd94\uc801 \ud654\uba74 \ub2eb\uae30\n<\/code><\/pre>\n
        \n
        STEP 3 \u2014 CSS \ucd94\uac00<\/h2>\n
        \/* src\/index.css \uc5d0 \ucd94\uac00 *\/\n\n.contact {\n  padding: 80px 24px;\n}\n\n.contact-form {\n  width: 320px;\n  display: flex;\n  flex-direction: column;\n  gap: 20px;\n}\n\n.form-field {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n}\n\n.form-label {\n  font-size: 16px;\n  font-weight: 500;\n  color: #1e1e1e;\n}\n\n.form-input {\n  height: 40px;\n  padding: 0 12px;\n  border: 1px solid #d0d0d0;\n  border-radius: 4px;\n  font-size: 16px;\n  color: #1e1e1e;\n  outline: none;\n  width: 100%;\n}\n\n.form-textarea {\n  height: 80px;\n  padding: 10px 12px;\n  border: 1px solid #d0d0d0;\n  border-radius: 4px;\n  font-size: 16px;\n  color: #1e1e1e;\n  resize: none;\n  outline: none;\n  width: 100%;\n}\n\n.form-input::placeholder,\n.form-textarea::placeholder {\n  color: #b3b3b3;\n}\n\n.form-input:focus,\n.form-textarea:focus {\n  border-color: #2c2c2c;\n}\n\n.form-buttons {\n  display: flex;\n  gap: 12px;\n}\n\n.form-btn {\n  height: 40px;\n  padding: 0 20px;\n  border: none;\n  border-radius: 4px;\n  font-size: 16px;\n  cursor: pointer;\n  transition: opacity 0.2s;\n}\n\n.form-btn--cancel {\n  background-color: #f0f0f0;\n  color: #303030;\n}\n\n.form-btn--submit {\n  flex: 1;\n  background-color: #2c2c2c;\n  color: #f5f5f5;\n}\n\n.form-btn--submit:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.form-btn:hover:not(:disabled) {\n  opacity: 0.8;\n}\n<\/code><\/pre>\n
        \n
        None<\/strong>: 89~92: .form-btn--submit:disabled<\/code> \u2014 disabled<\/code> \uc18d\uc131\uc774 \uc788\uc744 \ub54c\uc758 \uc2a4\ud0c0\uc77c\uc774\ub2e4. \uc804\uc1a1 \uc911\uc5d0\ub294 \ubc18\ud22c\uba85\ud558\uac8c \ubcf4\uc774\uace0 \ucee4\uc11c\uac00 \uae08\uc9c0 \ubaa8\uc591\uc73c\ub85c \ubc14\ub010\ub2e4<\/p>\n
        94~96: .form-btn:hover:not(:disabled)<\/code> \u2014 \ube44\ud65c\uc131\ud654 \uc0c1\ud0dc\uac00 \uc544\ub2d0 \ub54c\ub9cc hover \ud6a8\uacfc\ub97c \uc801\uc6a9\ud55c\ub2e4<\/p>\n<\/blockquote>\n
        \n
        \ube0c\ub77c\uc6b0\uc800 \ud655\uc778<\/h2>\n
          \n
        1. \ud3fc\uc5d0 \uc774\ub984, \uc774\uba54\uc77c, \uba54\uc2dc\uc9c0\ub97c \uc785\ub825\ud55c\ub2e4<\/li>\n
        2. Submit<\/strong> \ubc84\ud2bc\uc744 \ud074\ub9ad\ud55c\ub2e4<\/li>\n
        3. \ubc84\ud2bc\uc774 "Sending…"\uc73c\ub85c \ubc14\ub00c\ub294 \uac83\uc744 \ud655\uc778\ud55c\ub2e4<\/li>\n
        4. "\uba54\uc2dc\uc9c0\uac00 \uc804\uc1a1\ub418\uc5c8\ub2e4!" \uc54c\ub9bc\uc774 \ub728\uba74 \uc131\uacf5\uc774\ub2e4<\/li>\n
        5. EmailJS\uc5d0 \uc5f0\uacb0\ud55c \uc774\uba54\uc77c \ubc1b\uc740\ud3b8\uc9c0\ud568\uc744 \ud655\uc778\ud55c\ub2e4 \u2014 \uc2e4\uc81c \uc774\uba54\uc77c\uc774 \uc640 \uc788\ub2e4<\/li>\n<\/ol>\n
          \n
          Warning<\/strong>: \uc804\uc1a1\uc774 \uc2e4\ud328\ud558\uba74 \ud655\uc778\ud560 \uac83:<\/p>\n