{"id":819,"date":"2025-07-10T21:32:51","date_gmt":"2025-07-10T12:32:51","guid":{"rendered":"https:\/\/illusion.place\/?page_id=819"},"modified":"2025-11-26T16:10:37","modified_gmt":"2025-11-26T07:10:37","slug":"portfolio","status":"publish","type":"page","link":"https:\/\/illusion.place\/?page_id=819","title":{"rendered":"\uc804\uc8fc\uc815\ubcf4\ubb38\ud654\uc0b0\uc5c5\uc9c4\ud765\uc6d0"},"content":{"rendered":"\n
\"\"<\/span>
\n

FLAT FULL WIDE DISPLAY
\ubab0\uc785\ud615 \ubbf8\ub514\uc5b4\uc544\ud2b8 \ub514\uc2a4\ud50c\ub808\uc774<\/p>\n<\/div><\/div>\n\n\n\n

\"\"<\/span>
\n

0.01mm\uc758 \uc815\uad50\ud55c \uc2e4\uce21 \ubc0f \uc124\uacc4\uc5d0 \uc758\ud55c \uc124\uce58

– \uc804\ubb38\uac00\uac00 \uacf5\uac04\uc744 3D \uce21\ub7c9\ud558\uace0,
5D\ud640\ub85c\uadf8\ub7a8 \uc785\uccb4 \ucee8\ud150\uce20\uc640 \ub514\uc2a4\ud50c\ub808\uc774\ub97c \uc9c1\uc811 \uc81c\uc791\ud558\uc5ec
\uace0\uac1d\uc5d0 \uacf5\uac04\uc5d0 \uc124\uce58\ub97c \uc9c4\ud589\ud558\uc600\uc2b5\ub2c8\ub2e4.<\/p><\/blockquote><\/figure>\n\n\n\n

\n
\n

<\/p>\n<\/blockquote>\n<\/blockquote>\n<\/div><\/div>\n\n\n\n\n\n\n \n ILLUSION – Contact Form<\/title>\n \n <!-- 1. Tailwind CSS -->\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n \n <!-- 2. React & ReactDOM -->\n <script crossorigin src=\"https:\/\/unpkg.com\/react@18\/umd\/react.production.min.js\"><\/script>\n <script crossorigin src=\"https:\/\/unpkg.com\/react-dom@18\/umd\/react-dom.production.min.js\"><\/script>\n \n <!-- 3. Babel -->\n <script src=\"https:\/\/unpkg.com\/@babel\/standalone\/babel.min.js\"><\/script>\n\n <!-- 4. Fonts -->\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Noto+Sans+KR:wght@300;400;500;700;900&display=swap\" rel=\"stylesheet\">\n\n <script>\n tailwind.config = {\n \/\/ [\uc911\uc694] preflight: false\ub85c \uc124\uc815\ud558\uc5ec \uc6cc\ub4dc\ud504\ub808\uc2a4 \uc804\uccb4 \uc2a4\ud0c0\uc77c \ucda9\ub3cc \ubc29\uc9c0\n corePlugins: {\n preflight: false,\n },\n theme: {\n extend: {\n fontFamily: {\n sans: ['Noto Sans KR', 'sans-serif'],\n },\n }\n }\n }\n <\/script>\n <style>\n \/* \uc2a4\ud0c0\uc77c \uaca9\ub9ac: \uc624\uc9c1 #root-contact-form \ub0b4\ubd80 \uc694\uc18c\ub9cc \uc81c\uc5b4 *\/\n \n \/* 1. \ud3fc \ub0b4\ubd80 \uc694\uc18c\ub9cc box-sizing \uc801\uc6a9 (Preflight \ub054\uc73c\ub85c \uc778\ud55c \uc218\ub3d9 \uc801\uc6a9) *\/\n #root-contact-form,\n #root-contact-form * {\n box-sizing: border-box;\n border-width: 0;\n border-style: solid;\n border-color: #e5e7eb; \/* \uae30\ubcf8 \ud14c\ub450\ub9ac \uc0c9\uc0c1 *\/\n }\n\n \/* 2. \ud3fc \ucee8\ud14c\uc774\ub108 *\/\n #root-contact-form {\n width: 100%; \n max-width: 100%; \n margin: 0 auto; \n background-color: transparent; \/* \ubc30\uacbd \ud22c\uba85 *\/\n color: #111; \n position: relative;\n line-height: 1.5; \n font-family: 'Noto Sans KR', sans-serif; \/* \ud3f0\ud2b8 \uac15\uc81c \uc801\uc6a9 *\/\n }\n\n \/* 3. \uc785\ub825\ucc3d \uc2a4\ud0c0\uc77c (\ubc11\uc904\ub9cc \ud45c\uc2dc) *\/\n #root-contact-form input[type=\"text\"], \n #root-contact-form textarea {\n display: block;\n width: 100%;\n background-color: transparent;\n border: none !important; \/* \uc804\uccb4 \ud14c\ub450\ub9ac \uc81c\uac70 *\/\n border-bottom: 2px solid #e5e7eb !important; \/* \ubc11\uc904 *\/\n border-radius: 0 !important;\n padding: 12px 0;\n font-size: 16px;\n color: #111;\n outline: none !important;\n box-shadow: none !important;\n margin: 0;\n }\n \n \/* \ud3ec\ucee4\uc2a4 \ud6a8\uacfc *\/\n #root-contact-form input[type=\"text\"]:focus, \n #root-contact-form textarea:focus {\n border-bottom-color: #9333ea !important; \/* \ubcf4\ub77c\uc0c9 *\/\n outline: none !important;\n box-shadow: none !important;\n }\n\n \/* 4. \ubc84\ud2bc \uc2a4\ud0c0\uc77c (\uba85\uc2dc\uc801 \uc9c0\uc815\uc73c\ub85c \ud14c\ub9c8 \uac04\uc12d \ud68c\ud53c) *\/\n #root-contact-form button[type=\"submit\"] {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n padding: 16px;\n background-color: #9333ea; \/* \ubcf4\ub77c\uc0c9 *\/\n color: white;\n font-weight: 700;\n border-radius: 8px;\n border: none !important;\n cursor: pointer;\n transition: all 0.2s;\n margin-top: 20px;\n font-size: 16px;\n line-height: 1;\n }\n \n #root-contact-form button[type=\"submit\"]:hover {\n background-color: #7e22ce; \/* \uc9c4\ud55c \ubcf4\ub77c\uc0c9 *\/\n transform: translateY(-2px);\n box-shadow: 0 10px 15px -3px rgba(147, 51, 234, 0.2);\n }\n\n #root-contact-form button[type=\"submit\"]:disabled {\n opacity: 0.7;\n cursor: not-allowed;\n transform: none;\n }\n\n \/* 5. \ub77c\ubca8 \uc2a4\ud0c0\uc77c *\/\n #root-contact-form label {\n display: block;\n font-size: 12px;\n font-weight: 700;\n color: #6b7280;\n text-transform: uppercase;\n margin-bottom: 4px;\n letter-spacing: 0.05em;\n }\n\n \/* 6. placeholder \uc0c9\uc0c1 *\/\n #root-contact-form ::placeholder {\n color: #9ca3af;\n opacity: 1;\n }\n <\/style>\n<\/head>\n<body>\n <!-- \ud3fc\uc774 \ub4e4\uc5b4\uac08 \ucee8\ud14c\uc774\ub108 -->\n <div id=\"root-contact-form\"><\/div>\n\n <script type=\"text\/babel\">\n const { useState } = React;\n\n const CF7_FORM_ID = 2145; \n\n \/\/ \uc544\uc774\ucf58\n const Icon = ({ children, className, size = 24, ...props }) => (\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width={size} height={size} viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" className={className} style={{width: size, height: size}} {...props}>{children}<\/svg>\n );\n const ArrowRight = (props) => <Icon {...props}><path d=\"M5 12h14\"\/><path d=\"m12 5 7 7-7 7\"\/><\/Icon>;\n const Loader = (props) => <Icon {...props}><path d=\"M21 12a9 9 0 1 1-6.219-8.56\"\/><\/Icon>;\n\n const ContactForm = () => {\n const [formData, setFormData] = useState({ company: '', contact: '', message: '' });\n const [submitStatus, setSubmitStatus] = useState('idle'); \n\n const handleInputChange = (e) => {\n const { name, value } = e.target;\n setFormData({ ...formData, [name]: value });\n };\n\n const handleCF7Submit = async (e) => {\n e.preventDefault();\n setSubmitStatus('submitting');\n\n const body = new FormData();\n body.append('cf-company', formData.company);\n body.append('cf-contact', formData.contact);\n body.append('cf-message', formData.message);\n body.append('_wpcf7_unit_tag', 'rte'); \n\n const apiUrl = `${window.location.origin}\/?rest_route=\/contact-form-7\/v1\/contact-forms\/${CF7_FORM_ID}\/feedback`;\n\n try {\n const response = await fetch(apiUrl, { method: 'POST', body: body });\n if (!response.ok) throw new Error(`HTTP Error: ${response.status}`);\n const result = await response.json();\n\n if (result.status === 'mail_sent') {\n setSubmitStatus('success');\n setFormData({ company: '', contact: '', message: '' });\n alert('\ubb38\uc758\uac00 \uc131\uacf5\uc801\uc73c\ub85c \uc811\uc218\ub418\uc5c8\uc2b5\ub2c8\ub2e4.');\n } else {\n console.error('CF7 Error:', result);\n setSubmitStatus('error');\n alert('\uc804\uc1a1 \uc2e4\ud328: ' + result.message);\n }\n } catch (error) {\n console.error('Network Error:', error);\n setSubmitStatus('error');\n alert(`\uc624\ub958 \ubc1c\uc0dd: ${error.message}`);\n } finally {\n setSubmitStatus('idle');\n }\n };\n\n return (\n <div className=\"py-12 w-full\">\n <div className=\"max-w-2xl mx-auto text-center mb-12\">\n <h2 className=\"text-3xl md:text-4xl font-bold mb-4 leading-tight\" style={{color: '#111'}}>\n \uadc0\uc0ac\uc758 \uacf5\uac04\ub3c4 <br\/>\n <span style={{color: '#9333ea'}}>\ud601\uc2e0\uc801\uc778 \ube0c\ub79c\ub4dc \uacbd\ud5d8<\/span>\uc774 \ub420 \uc218 \uc788\uc2b5\ub2c8\ub2e4.\n <\/h2>\n <p style={{color: '#6b7280', fontSize: '15px'}}>\n \ub9c9\uc5f0\ud55c \uc544\uc774\ub514\uc5b4\ub9cc \uc788\uc5b4\ub3c4 \uad1c\ucc2e\uc2b5\ub2c8\ub2e4. <br\/>\n \uc77c\ub8e8\uc83c(ILLUSION)\uc774 \ud574\ub2f5\uc744 \uc81c\uc2dc\ud574 \ub4dc\ub9bd\ub2c8\ub2e4.\n <\/p>\n <\/div>\n \n <div className=\"max-w-md mx-auto text-left px-2\">\n <form className=\"space-y-8\" onSubmit={handleCF7Submit}>\n <div className=\"group\">\n <label>\ud68c\uc0ac\uba85 \/ \ub2f4\ub2f9\uc790<\/label>\n <input \n type=\"text\" \n name=\"company\" \n value={formData.company} \n onChange={handleInputChange} \n placeholder=\"\uc785\ub825\ud574\uc8fc\uc138\uc694\" \n required \n disabled={submitStatus === 'submitting'} \n \/>\n <\/div>\n <div className=\"group\">\n <label>\uc5f0\ub77d\ucc98<\/label>\n <input \n type=\"text\" \n name=\"contact\" \n value={formData.contact} \n onChange={handleInputChange} \n placeholder=\"010-0000-0000\" \n required \n disabled={submitStatus === 'submitting'} \n \/>\n <\/div>\n <div className=\"group\">\n <label>\ubb38\uc758 \ub0b4\uc6a9<\/label>\n <textarea \n name=\"message\" \n value={formData.message} \n onChange={handleInputChange} \n style={{height: '100px', resize: 'none'}}\n placeholder=\"\ub0b4\uc6a9\uc744 \uc785\ub825\ud574\uc8fc\uc138\uc694\" \n required \n disabled={submitStatus === 'submitting'}\n ><\/textarea>\n <\/div>\n <div style={{marginTop: '30px'}}>\n <button type=\"submit\" disabled={submitStatus === 'submitting'}>\n {submitStatus === 'submitting' ? (\n <><Loader className=\"animate-spin mr-2\" size={20} \/> \uc804\uc1a1 \uc911...<\/>\n ) : (\n <>\ubb34\ub8cc \ucee8\uc124\ud305 \uc2e0\uccad\ud558\uae30 <ArrowRight size={18} className=\"ml-2\" \/><\/>\n )}\n <\/button>\n <\/div>\n <\/form>\n <\/div>\n <\/div>\n );\n };\n\n const root = ReactDOM.createRoot(document.getElementById('root-contact-form'));\n root.render(<ContactForm \/>);\n <\/script>\n<\/body>\n<\/html>\n\n\n<div class=\"epyt-video-wrapper\"><iframe loading=\"lazy\" style=\"display: block; margin: 0px auto;\" id=\"_ytid_78284\" width=\"800\" height=\"450\" data-origwidth=\"800\" data-origheight=\"450\" src=\"https:\/\/www.youtube.com\/embed\/Einkj9kbc2Q?enablejsapi=1&autoplay=1&cc_load_policy=0&iv_load_policy=3&loop=1&playlist=Einkj9kbc2Q&fs=0&playsinline=1&controls=0&color=white&cc_lang_pref=&rel=-1&autohide=2&theme=dark&\" class=\"__youtube_prefs__ no-lazyload\" title=\"YouTube player\" allow=\"fullscreen; accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen data-no-lazy=\"1\" data-skipgform_ajax_framebjll=\"\"><\/iframe><\/div>\n\n\n<div class=\"wp-block-cover\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"2560\" height=\"1707\" class=\"wp-block-cover__image-background wp-image-961 size-full\" alt=\"\" src=\"https:\/\/i0.wp.com\/illusion.place\/wp-content\/uploads\/2025\/07\/KakaoTalk_20250714_102755268_05-2-scaled.jpg?resize=2560%2C1707&ssl=1\" data-object-fit=\"cover\" srcset=\"https:\/\/i0.wp.com\/illusion.place\/wp-content\/uploads\/2025\/07\/KakaoTalk_20250714_102755268_05-2-scaled.jpg?w=2560&ssl=1 2560w, https:\/\/i0.wp.com\/illusion.place\/wp-content\/uploads\/2025\/07\/KakaoTalk_20250714_102755268_05-2-scaled.jpg?resize=1536%2C1024&ssl=1 1536w, https:\/\/i0.wp.com\/illusion.place\/wp-content\/uploads\/2025\/07\/KakaoTalk_20250714_102755268_05-2-scaled.jpg?resize=2048%2C1365&ssl=1 2048w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><span aria-hidden=\"true\" class=\"wp-block-cover__background has-background-dim\"><\/span><div class=\"wp-block-cover__inner-container is-layout-flow wp-block-cover-is-layout-flow\">\n<p class=\"has-text-align-left has-medium-font-size\"><strong>\uc5b4\ub290\uacf5\uac04\uc774\ub358 \ucd5c\uace0\uc758 \ubab0\uc785\ud6a8\uacfc\ub97c \ubcf4\uc5ec\uc8fc\ub294 \ub514\uc2a4\ud50c\ub808\uc774 \uc194\ub8e8\uc158<\/strong><\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-cover wp-duotone-unset-1\" style=\"font-size:0px;min-height:72px;aspect-ratio:unset;\"><span aria-hidden=\"true\" class=\"wp-block-cover__background has-background-dim-100 has-background-dim\"><\/span><div class=\"wp-block-cover__inner-container is-layout-flow wp-block-cover-is-layout-flow\">\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<div class=\"wp-block-group has-medium-font-size\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<details class=\"wp-block-details has-black-background-color has-background has-medium-font-size is-layout-flow wp-block-details-is-layout-flow\" open><summary>– \uba54\ud0c0\ubc84\uc2a4 \uc544\ucf00\ub370\ubbf8 \uc5b8\ub9ac\uc5bc \ud074\ub798\uc2a4\uc640 \ud568\uaed8\ud55c \uc790\uc0ac\uc758 \ubab0\uc785\ud615 \ub514\uc2a4\ud50c\ub808\uc774 \uc124\uce58<br><br><br><br><\/summary>\n<ul class=\"wp-block-list\">\n<li>\uc804\uc8fc\uc815\ubcf4\ubb38\ud654\uc0b0\uc5c5\uc9c4\ud765\uc6d0 \uc5b8\ub9ac\uc5bc\uc5d4\uc9c4 5.5 \uc911\uac04\uc131\uacfc\ud68c\ub97c \ubbf8\ub514\uc5b4\ud30c\uc0ac\ub4dc\ub85c \ud558\uc5ec<br>\ud559\uc0dd\ub4e4\uc758 \ud3ec\ud2b8\ud3f4\ub9ac\uc624\ub97c \uc790\uc0ac \uc77c\ub8e8\uc83c \ubbf8\ub514\uc5b4\uc6d4\uc744 \ud1b5\ud558\uc5ec,<br>\ubab0\uc785\uac10 \uc788\ub294 \ucee8\ud150\uce20\ub85c \uc804\uc2dc\ub97c \ud558\uc600\uc2b5\ub2c8\ub2e4.<br><br>\ud558\ub2e8\uc758 \uc601\uc0c1\uc744 \ud1b5\ud574, \uc790\uc0ac \uac15\uc0ac\uc9c4\uc774 \ud559\uc0dd\ub4e4\uacfc \uc81c\uc791\ud55c<br>\uc5b8\ub9ac\uc5bc\uc5d4\uc9c4 \uc2dc\ub124\ub9c8\ud2f1 \uad50\uc721\uacb0\uacfc\ubb3c\uacfc \uc601\uc0c1\uc744 \ubcf4\uc2e4 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/li>\n<\/ul>\n<\/details>\n<\/div><\/div>\n<\/div><\/div>\n<\/div><\/div>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-cover aligncenter is-light wp-elements-c38ec1e77cdf1633fb32dd4170f9edbd wp-duotone-unset-2\" style=\"min-height:122px;aspect-ratio:unset;\"><span aria-hidden=\"true\" class=\"wp-block-cover__background has-white-background-color has-background-dim-0 has-background-dim\"><\/span><div class=\"wp-block-cover__inner-container is-layout-flow wp-block-cover-is-layout-flow\">\n<div class=\"wp-block-group is-horizontal is-content-justification-left is-layout-flex wp-container-core-group-is-layout-9cde4f48 wp-block-group-is-layout-flex\">\n<figure class=\"wp-block-image size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"300\" height=\"100\" src=\"https:\/\/i0.wp.com\/illusion.place\/wp-content\/uploads\/2025\/08\/300px-%EC%A0%84%EC%A3%BC%EC%A0%95%EB%B3%B4%EB%AC%B8%ED%99%94%EC%82%B0%EC%97%85%EC%A7%84%ED%9D%A5%EC%9B%90_%EA%B8%80%EC%9E%90.png?resize=300%2C100&ssl=1\" alt=\"\" class=\"wp-image-1565\"\/><\/figure>\n\n\n\n<figure class=\"wp-block-image is-resized wp-container-content-69bc4bdf\"><a href=\"https:\/\/mtvs.kr\/\" target=\"_blank\" rel=\"noreferrer noopener\"><img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/mtvs.kr\/static\/assets\/img\/logo.png?ssl=1\" alt=\"\uba54\ud0c0\ubc84\uc2a4 \uc544\uce74\ub370\ubbf8\" style=\"width:207px;height:auto\"\/><\/a><\/figure>\n\n\n\n<figure class=\"wp-block-image is-resized wp-container-content-69bc4bdf\"><a href=\"https:\/\/www.nipa.kr\/\" target=\"_blank\" rel=\"noreferrer noopener\"><img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/mtvs.kr\/static\/assets\/img\/footer-logo02.png?ssl=1\" alt=\"\uc815\ubcf4\ud1b5\uc2e0\uc0b0\uc5c5\uc9c4\ud765\uc6d0\" style=\"width:210px;height:auto\"\/><\/a><\/figure>\n\n\n\n<figure class=\"wp-block-image is-resized wp-container-content-69bc4bdf\"><a href=\"https:\/\/www.rapa.or.kr\/ft\/main.do\" target=\"_blank\" rel=\"noreferrer noopener\"><img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/mtvs.kr\/static\/assets\/img\/footer-logo03.png?ssl=1\" alt=\"\ud55c\uad6d\uc804\ud30c\uc9c4\ud765\ud611\ud68c\" style=\"width:212px;height:auto\"\/><\/a><\/figure>\n\n\n\n<figure class=\"wp-block-image is-resized wp-container-content-69bc4bdf\"><a href=\"https:\/\/www.msit.go.kr\/\" target=\"_blank\" rel=\"noreferrer noopener\"><img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/mtvs.kr\/static\/assets\/img\/footer-logo01.png?ssl=1\" alt=\"\uacfc\ud559\uae30\uc220\uc815\ubcf4\ud1b5\uc2e0\ubd80\" style=\"width:206px;height:auto\"\/><\/a><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large is-resized wp-container-content-69bc4bdf\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"450\" src=\"https:\/\/i0.wp.com\/illusion.place\/wp-content\/uploads\/2025\/07\/%EC%96%B8%EB%A6%AC%EC%96%BC%EA%B3%B5%EC%9D%B8%EC%9D%B8%EC%A6%9D%EB%A1%9C%EA%B3%A0%EC%9E%90%EC%82%AC%EA%B3%A0%EB%A1%9C%EA%B0%99%EC%9D%B42.png?resize=1024%2C450&ssl=1\" alt=\"\" class=\"wp-image-905\" style=\"width:166px;height:auto\"\/><\/figure>\n<\/div>\n<\/div><\/div>\n\n\n<div class=\"epyt-video-wrapper\"><iframe loading=\"lazy\" style=\"display: block; margin: 0px auto;\" id=\"_ytid_61443\" width=\"800\" height=\"450\" data-origwidth=\"800\" data-origheight=\"450\" src=\"https:\/\/www.youtube.com\/embed\/gtg1UUsyqtU?enablejsapi=1&autoplay=1&cc_load_policy=0&iv_load_policy=3&loop=1&playlist=gtg1UUsyqtU&fs=0&playsinline=1&controls=0&color=white&cc_lang_pref=&rel=-1&autohide=2&theme=dark&\" class=\"__youtube_prefs__ no-lazyload\" title=\"YouTube player\" allow=\"fullscreen; accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen data-no-lazy=\"1\" data-skipgform_ajax_framebjll=\"\"><\/iframe><\/div>\n\n\n<!DOCTYPE html>\n<html lang=\"ko\">\n<head>\n <meta charset=\"UTF-8\">\n <title>ILLUSION – Contact Form<\/title>\n \n <!-- 1. Tailwind CSS -->\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n \n <!-- 2. React & ReactDOM -->\n <script crossorigin src=\"https:\/\/unpkg.com\/react@18\/umd\/react.production.min.js\"><\/script>\n <script crossorigin src=\"https:\/\/unpkg.com\/react-dom@18\/umd\/react-dom.production.min.js\"><\/script>\n \n <!-- 3. Babel -->\n <script src=\"https:\/\/unpkg.com\/@babel\/standalone\/babel.min.js\"><\/script>\n\n <!-- 4. Fonts -->\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Noto+Sans+KR:wght@300;400;500;700;900&display=swap\" rel=\"stylesheet\">\n\n <script>\n tailwind.config = {\n \/\/ [\uc911\uc694] preflight: false\ub85c \uc124\uc815\ud558\uc5ec \uc6cc\ub4dc\ud504\ub808\uc2a4 \uc804\uccb4 \uc2a4\ud0c0\uc77c \ucda9\ub3cc \ubc29\uc9c0\n corePlugins: {\n preflight: false,\n },\n theme: {\n extend: {\n fontFamily: {\n sans: ['Noto Sans KR', 'sans-serif'],\n },\n }\n }\n }\n <\/script>\n <style>\n \/* \uc2a4\ud0c0\uc77c \uaca9\ub9ac: \uc624\uc9c1 #root-contact-form \ub0b4\ubd80 \uc694\uc18c\ub9cc \uc81c\uc5b4 *\/\n \n \/* 1. \ud3fc \ub0b4\ubd80 \uc694\uc18c\ub9cc box-sizing \uc801\uc6a9 (Preflight \ub054\uc73c\ub85c \uc778\ud55c \uc218\ub3d9 \uc801\uc6a9) *\/\n #root-contact-form,\n #root-contact-form * {\n box-sizing: border-box;\n border-width: 0;\n border-style: solid;\n border-color: #e5e7eb; \/* \uae30\ubcf8 \ud14c\ub450\ub9ac \uc0c9\uc0c1 *\/\n }\n\n \/* 2. \ud3fc \ucee8\ud14c\uc774\ub108 *\/\n #root-contact-form {\n width: 100%; \n max-width: 100%; \n margin: 0 auto; \n background-color: transparent; \/* \ubc30\uacbd \ud22c\uba85 *\/\n color: #111; \n position: relative;\n line-height: 1.5; \n font-family: 'Noto Sans KR', sans-serif; \/* \ud3f0\ud2b8 \uac15\uc81c \uc801\uc6a9 *\/\n }\n\n \/* 3. \uc785\ub825\ucc3d \uc2a4\ud0c0\uc77c (\ubc11\uc904\ub9cc \ud45c\uc2dc) *\/\n #root-contact-form input[type=\"text\"], \n #root-contact-form textarea {\n display: block;\n width: 100%;\n background-color: transparent;\n border: none !important; \/* \uc804\uccb4 \ud14c\ub450\ub9ac \uc81c\uac70 *\/\n border-bottom: 2px solid #e5e7eb !important; \/* \ubc11\uc904 *\/\n border-radius: 0 !important;\n padding: 12px 0;\n font-size: 16px;\n color: #111;\n outline: none !important;\n box-shadow: none !important;\n margin: 0;\n }\n \n \/* \ud3ec\ucee4\uc2a4 \ud6a8\uacfc *\/\n #root-contact-form input[type=\"text\"]:focus, \n #root-contact-form textarea:focus {\n border-bottom-color: #9333ea !important; \/* \ubcf4\ub77c\uc0c9 *\/\n outline: none !important;\n box-shadow: none !important;\n }\n\n \/* 4. \ubc84\ud2bc \uc2a4\ud0c0\uc77c (\uba85\uc2dc\uc801 \uc9c0\uc815\uc73c\ub85c \ud14c\ub9c8 \uac04\uc12d \ud68c\ud53c) *\/\n #root-contact-form button[type=\"submit\"] {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n padding: 16px;\n background-color: #9333ea; \/* \ubcf4\ub77c\uc0c9 *\/\n color: white;\n font-weight: 700;\n border-radius: 8px;\n border: none !important;\n cursor: pointer;\n transition: all 0.2s;\n margin-top: 20px;\n font-size: 16px;\n line-height: 1;\n }\n \n #root-contact-form button[type=\"submit\"]:hover {\n background-color: #7e22ce; \/* \uc9c4\ud55c \ubcf4\ub77c\uc0c9 *\/\n transform: translateY(-2px);\n box-shadow: 0 10px 15px -3px rgba(147, 51, 234, 0.2);\n }\n\n #root-contact-form button[type=\"submit\"]:disabled {\n opacity: 0.7;\n cursor: not-allowed;\n transform: none;\n }\n\n \/* 5. \ub77c\ubca8 \uc2a4\ud0c0\uc77c *\/\n #root-contact-form label {\n display: block;\n font-size: 12px;\n font-weight: 700;\n color: #6b7280;\n text-transform: uppercase;\n margin-bottom: 4px;\n letter-spacing: 0.05em;\n }\n\n \/* 6. placeholder \uc0c9\uc0c1 *\/\n #root-contact-form ::placeholder {\n color: #9ca3af;\n opacity: 1;\n }\n <\/style>\n<\/head>\n<body>\n <!-- \ud3fc\uc774 \ub4e4\uc5b4\uac08 \ucee8\ud14c\uc774\ub108 -->\n <div id=\"root-contact-form\"><\/div>\n\n <script type=\"text\/babel\">\n const { useState } = React;\n\n const CF7_FORM_ID = 2145; \n\n \/\/ \uc544\uc774\ucf58\n const Icon = ({ children, className, size = 24, ...props }) => (\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width={size} height={size} viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" className={className} style={{width: size, height: size}} {...props}>{children}<\/svg>\n );\n const ArrowRight = (props) => <Icon {...props}><path d=\"M5 12h14\"\/><path d=\"m12 5 7 7-7 7\"\/><\/Icon>;\n const Loader = (props) => <Icon {...props}><path d=\"M21 12a9 9 0 1 1-6.219-8.56\"\/><\/Icon>;\n\n const ContactForm = () => {\n const [formData, setFormData] = useState({ company: '', contact: '', message: '' });\n const [submitStatus, setSubmitStatus] = useState('idle'); \n\n const handleInputChange = (e) => {\n const { name, value } = e.target;\n setFormData({ ...formData, [name]: value });\n };\n\n const handleCF7Submit = async (e) => {\n e.preventDefault();\n setSubmitStatus('submitting');\n\n const body = new FormData();\n body.append('cf-company', formData.company);\n body.append('cf-contact', formData.contact);\n body.append('cf-message', formData.message);\n body.append('_wpcf7_unit_tag', 'rte'); \n\n const apiUrl = `${window.location.origin}\/?rest_route=\/contact-form-7\/v1\/contact-forms\/${CF7_FORM_ID}\/feedback`;\n\n try {\n const response = await fetch(apiUrl, { method: 'POST', body: body });\n if (!response.ok) throw new Error(`HTTP Error: ${response.status}`);\n const result = await response.json();\n\n if (result.status === 'mail_sent') {\n setSubmitStatus('success');\n setFormData({ company: '', contact: '', message: '' });\n alert('\ubb38\uc758\uac00 \uc131\uacf5\uc801\uc73c\ub85c \uc811\uc218\ub418\uc5c8\uc2b5\ub2c8\ub2e4.');\n } else {\n console.error('CF7 Error:', result);\n setSubmitStatus('error');\n alert('\uc804\uc1a1 \uc2e4\ud328: ' + result.message);\n }\n } catch (error) {\n console.error('Network Error:', error);\n setSubmitStatus('error');\n alert(`\uc624\ub958 \ubc1c\uc0dd: ${error.message}`);\n } finally {\n setSubmitStatus('idle');\n }\n };\n\n return (\n <div className=\"py-12 w-full\">\n <div className=\"max-w-2xl mx-auto text-center mb-12\">\n <h2 className=\"text-3xl md:text-4xl font-bold mb-4 leading-tight\" style={{color: '#111'}}>\n \uadc0\uc0ac\uc758 \uacf5\uac04\ub3c4 <br\/>\n <span style={{color: '#9333ea'}}>\ud601\uc2e0\uc801\uc778 \ube0c\ub79c\ub4dc \uacbd\ud5d8<\/span>\uc774 \ub420 \uc218 \uc788\uc2b5\ub2c8\ub2e4.\n <\/h2>\n <p style={{color: '#6b7280', fontSize: '15px'}}>\n \ub9c9\uc5f0\ud55c \uc544\uc774\ub514\uc5b4\ub9cc \uc788\uc5b4\ub3c4 \uad1c\ucc2e\uc2b5\ub2c8\ub2e4. <br\/>\n \uc77c\ub8e8\uc83c(ILLUSION)\uc774 \ud574\ub2f5\uc744 \uc81c\uc2dc\ud574 \ub4dc\ub9bd\ub2c8\ub2e4.\n <\/p>\n <\/div>\n \n <div className=\"max-w-md mx-auto text-left px-2\">\n <form className=\"space-y-8\" onSubmit={handleCF7Submit}>\n <div className=\"group\">\n <label>\ud68c\uc0ac\uba85 \/ \ub2f4\ub2f9\uc790<\/label>\n <input \n type=\"text\" \n name=\"company\" \n value={formData.company} \n onChange={handleInputChange} \n placeholder=\"\uc785\ub825\ud574\uc8fc\uc138\uc694\" \n required \n disabled={submitStatus === 'submitting'} \n \/>\n <\/div>\n <div className=\"group\">\n <label>\uc5f0\ub77d\ucc98<\/label>\n <input \n type=\"text\" \n name=\"contact\" \n value={formData.contact} \n onChange={handleInputChange} \n placeholder=\"010-0000-0000\" \n required \n disabled={submitStatus === 'submitting'} \n \/>\n <\/div>\n <div className=\"group\">\n <label>\ubb38\uc758 \ub0b4\uc6a9<\/label>\n <textarea \n name=\"message\" \n value={formData.message} \n onChange={handleInputChange} \n style={{height: '100px', resize: 'none'}}\n placeholder=\"\ub0b4\uc6a9\uc744 \uc785\ub825\ud574\uc8fc\uc138\uc694\" \n required \n disabled={submitStatus === 'submitting'}\n ><\/textarea>\n <\/div>\n <div style={{marginTop: '30px'}}>\n <button type=\"submit\" disabled={submitStatus === 'submitting'}>\n {submitStatus === 'submitting' ? (\n <><Loader className=\"animate-spin mr-2\" size={20} \/> \uc804\uc1a1 \uc911...<\/>\n ) : (\n <>\ubb34\ub8cc \ucee8\uc124\ud305 \uc2e0\uccad\ud558\uae30 <ArrowRight size={18} className=\"ml-2\" \/><\/>\n )}\n <\/button>\n <\/div>\n <\/form>\n <\/div>\n <\/div>\n );\n };\n\n const root = ReactDOM.createRoot(document.getElementById('root-contact-form'));\n root.render(<ContactForm \/>);\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>ILLUSION – Contact Form ILLUSION – Contact Form<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"advanced_seo_description":"","jetpack_seo_html_title":"","jetpack_seo_noindex":false,"footnotes":""},"class_list":["post-819","page","type-page","status-publish","hentry"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/illusion.place\/index.php?rest_route=\/wp\/v2\/pages\/819","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/illusion.place\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/illusion.place\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/illusion.place\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/illusion.place\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=819"}],"version-history":[{"count":58,"href":"https:\/\/illusion.place\/index.php?rest_route=\/wp\/v2\/pages\/819\/revisions"}],"predecessor-version":[{"id":2168,"href":"https:\/\/illusion.place\/index.php?rest_route=\/wp\/v2\/pages\/819\/revisions\/2168"}],"wp:attachment":[{"href":"https:\/\/illusion.place\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=819"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}