문의하기

src/components/PrivacyModal.jsx

@@ -0,0 +1,83 @@
+import { useEffect } from "react";
+
+export default function PrivacyModal({ onClose }) {
+  useEffect(() => {
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.body.style.overflow = "";
+    };
+  }, []);
+
+  return (
+    <div className="main-contact-modal">
+      <div className="main-contact-modal-dim" onClick={onClose} />
+      <div className="main-contact-modal-card">
+        <div className="main-contact-modal-head">
+          <h3>개인정보처리방침</h3>
+          <button type="button" onClick={onClose}>
+            ×
+          </button>
+        </div>
+        <div className="main-contact-modal-body">
+          <p>
+            '주식회사 팔네트웍스'는(이하 '회사'는) 고객님의 개인정보를 중요시하며, "개인정보보호법" 및 "정보통신망 이용촉진 및 정보보호에 관한 법률"을 준수하고 있습니다. 회사는 개인정보취급방침을 통하여 고객님께서 제공하시는 개인정보가 어떠한 용도와 방식으로 이용되고 있으며, 개인정보보호를 위해 어떠한 조치가 취해지고 있는지 알려드립니다. 회사는 개인정보취급방침을 개정하는 경우 웹사이트 공지사항(또는 개별공지)을 통하여 공지할 것입니다.
+            <br />
+            제 1조. 수집하는 개인정보 항목 회사는 서비스 신청, 상담, 문의 등을 위해 아래와 같은 개인정보를 수집하고 있습니다.
+            <br />
+            <br />
+            가. 수집항목 : 성명, 회사명, 전화번호 혹은 휴대폰번호, 이메일 주소, 접속 로그
+            <br />
+            나. 개인정보 수집방법 : 웹사이트(온라인 문의, 고객 관리 목적의 영업활동
+            <br />
+            <br />
+            제 2조. 개인정보의 수집 및 이용목적
+            <br />
+            회사는 수집한 개인정보를 다음의 목적을 위해 활용합니다.
+            <br />
+            <br />
+            가. 서비스 문의 : 정확한 문의 내용 파악 및 확인, 문의에 대한 답변 진행, 답변 발송, 문의 고객과의 원활한 의사소통
+            <br />
+            나. 고객 관리 : 기술 지원 및 영업담당자 정보, 계약 정보 등의 정보 제공
+            <br />
+            다. 마케팅 및 광고에 활용 : 서비스〮제품〮세미나 및 이벤트 등 광고성 정보 전달, 인구통계 학적 특성에 따른 서비스 제공 및 광고 게재, 뉴스레터 메일 발송
+            <br />
+            <br />
+            제 3조. 개인정보의 보유 및 이용기간
+            <br />
+            회사는 개인정보의 수집 및 이용목적이 달성된 후에는 해당 정보를 지체 없이 파기합니다. 단, 다음의 정보에 대해서는 아래의 이유로 명시한 기간 동안 보존합니다.
+            <br />
+            <br />
+            가 보존 항목 : 성명, 회사명, 전화번호 혹은 휴대폰번호, 이메일 주소, 접속 로그
+            <br />
+            나 보존 근거 : 이용약관 및 전자상거래 등에서의 소비자보호에 관한 법률
+            <br />
+            다 보존 기간 : 5년(단, 수집일로 부터 5년이 경과하여도 계약에 관련된 정보주체의 정보는 계약 기간 동안 보존)
+            <br />
+            제 4조. 개인정보의 파기절차 및 방법
+            <br />
+            회사는 원칙적으로 개인정보 수집 및 이용목적이 달성된 후에는 해당 정보를 지체 없이 파기합니다.
+            <br />
+            <br />
+            제 10조. 개인정보에 관한 민원서비스
+            <br />
+            기타 개인정보침해에 대한 신고나 상담이 필요하신 경우에는 아래 기관에 문의하시기 바랍니다.
+            <br />
+            <br />
+            1. 개인정보분쟁조정위원회 : (국번없이) 1833-6972 (www.kopico.go.kr)
+            <br />
+            2. 개인정보침해신고센터 : (국번없이) 118 (privacy.kisa.or.kr)
+            <br />
+            3. 대검찰청 : (국번없이) 1301 (www.spo.go.kr)
+            <br />
+            4. 경찰청 : (국번없이) 182 (ecrm.cyber.go.kr)
+            <br />
+            <br />
+            공고일자: 2022년 05월 26일
+            <br />
+            시행일자: 2022년 05월 26일
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}

src/css/common.css

@@ -234,3 +234,123 @@ body{overflow-x:hidden;}
   .ht-decade {font-size: 36px;}
   .ht-year {font-size: 26px;}
 }
+/*연혁*/
+
+/* ── Inner Wrap (공통 max-width) ── */
+.inner-wrap {max-width:1440px; margin:0 auto; padding:0 60px;}
+ 
+/* ── 상단 타이틀 ── 공통 */
+.ht-header {text-align:center; padding:80px 0;}
+.ht-header-title {font-size:48px; font-weight:500; letter-spacing:-.04em; color:#000; line-height:1.3; margin-bottom:0;}
+.ht-header-title em {display:inline-block; font-size:60px; font-style:normal;}
+.ht-header-title span {color:var(--color-primary); font-weight:700;}
+.ht-header-title b {font-weight:700;}
+.ht-header-sub {display:inline-block; margin-top:28px; font-size:16px; letter-spacing:-.03em; color:#666; font-weight:500; line-height:1.7; font-style:normal;}
+
+
+/* ── 연혁 카드 박스 ── */
+.ht-card {background:#f7f8fc; border-radius:20px; padding:52px 48px 80px; margin-bottom:80px;}
+
+/* ── Tabs ── */
+.ht-tabs {display:flex; gap:16px; margin-bottom:52px;align-items:center;justify-content:center;}
+.ht-tab {flex:1;max-width:400px;font-size:14px; font-weight:600; padding:9px 26px; border-radius:100px; border:1.5px solid var(--color-primary-border); background:transparent; color:#888; cursor:pointer; transition:all .25s; letter-spacing:.01em;}
+.ht-tab:hover {border-color:var(--color-primary); color:var(--color-primary);}
+.ht-tab.is-active {background:var(--color-primary); border-color:var(--color-primary); color:#fff;}
+
+/* ── Panel ── */
+.ht-panel {display:flex; gap:0 40px; align-items:start; width:fit-content; margin:0 auto;min-width:670px}
+
+/* ── Sidebar ── */
+.ht-sidebar {padding-top:4px;min-width:155px}
+.ht-decade {font-size:52px; font-weight:800; color:#111; line-height:1; letter-spacing:-.03em;}
+.ht-since { font-size:11px; font-weight:500; color:#aaa; letter-spacing:.08em; text-transform:uppercase; margin-top:8px;}
+
+/* ── 중앙 1px 라인 ── */
+.ht-line-col {position:relative; align-self:stretch; width:1px;}
+.ht-line-bg {position:absolute; inset:0; background:var(--color-primary-soft-border); width:1px;}
+.ht-line-fill {position:absolute; top:0; left:0; width:1px; height:100%; background:var(--color-primary);}
+
+/* ── Content ── */
+.ht-content {padding-top:0;}
+
+/* ── Year Group ── */
+.ht-group {position:relative; padding:0 0 72px 0;}
+.ht-group:last-child {padding-bottom:0;}
+
+/* ── Dot ── */
+.ht-dot {position:absolute; left:-44px; top:12px; width:8px; height:8px; border-radius:50%; background:#f7f8fc; border:1.5px solid var(--color-primary-border); transition:background .35s, border-color .35s, transform .35s; z-index:1;}
+.ht-dot.is-active {background:var(--color-primary); border-color:var(--color-primary); transform:scale(1.4);}
+
+/* ── Year ── */
+.ht-year {font-size:40px; font-weight:800; letter-spacing:-.03em; line-height:1; margin:0 0 18px 0;}
+
+/* ── List ── */
+.ht-list {list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px;}
+
+/* ── Item ── */
+.ht-item {display:flex; gap:10px; align-items:baseline;}
+.ht-bullet {width:3px; height:3px; border-radius:50%; background:var(--color-primary); opacity:.4; flex-shrink:0; position:relative; top:-2px;}
+.ht-text {font-size:14px; color:#444; line-height:1.65; word-break:keep-all;}
+
+/* ── Responsive ── */
+@media (max-width: 900px) {
+  .inner-wrap {padding: 0 20px;}
+  .ht-header {padding: 48px 0 32px;}
+  .ht-header-title {font-size: 32px;}
+  .ht-header-title em{font-size:40px}
+  .ht-card {padding: 32px 20px 56px;border-radius: 12px;}
+  .ht-panel {flex-direction:column;gap: 0;min-width:auto}
+  .ht-sidebar {margin-bottom: 32px;min-width:auto;}
+  .ht-line-col {display: none;}
+  .ht-content {padding-left: 20px;border-left: 1px solid var(--color-primary-soft-border);}
+  .ht-dot {left: -24px;}
+  .ht-decade {font-size: 36px;}
+  .ht-year {font-size: 26px;}
+}
+
+
+/* ── Inquiry ── */
+
+.inq-head {padding:80px 0 40px 0;}
+.inq-title {font-size:32px; font-weight:800; color:#111; letter-spacing:-.02em; margin-bottom:12px;}
+.inq-desc {font-size:15px; color:#666; line-height:1.7;}
+
+/* ── Form ── */
+.inq-grid {display:grid; grid-template-columns:1fr 1fr; gap:20px 24px;}
+.inq-field {display:flex; flex-direction:column; gap:8px;}
+.inq-field--full {grid-column:1 / -1;}
+.inq-label {font-size:13px; font-weight:600; color:#333;}
+.inq-label em {color:var(--color-primary); font-style:normal;}
+.inq-input {height:48px; border:1.5px solid var(--color-primary-soft-border); border-radius:8px; padding:0 14px; font-size:14px; color:#111; outline:none; transition:border-color .2s; background:#fff;}
+.inq-input:focus {border-color:var(--color-primary);}
+.inq-input::placeholder {color:#bbb;}
+.inq-textarea {height:160px; border:1.5px solid var(--color-primary-soft-border); border-radius:8px; padding:14px; font-size:14px; color:#111; outline:none; transition:border-color .2s; background:#fff; resize:vertical;}
+.inq-textarea:focus {border-color:var(--color-primary);}
+.inq-textarea::placeholder {color:#bbb;}
+
+/* ── Bottom ── */
+.inq-bottom {margin-top:28px; display:flex; align-items:center; justify-content:space-between; gap:16px;}
+.inq-agree {display:flex; align-items:center; gap:12px;}
+.inq-check {display:flex; align-items:center; gap:8px; cursor:pointer; font-size:14px; color:#444;}
+.inq-check input {accent-color:var(--color-primary); width:16px; height:16px;}
+.inq-privacy-btn {font-size:13px; color:#aaa; text-decoration:underline; background:none; border:none; cursor:pointer; padding:0;}
+.inq-privacy-btn:hover {color:var(--color-primary);}
+.inq-submit {height:48px; padding:0 40px; background:var(--color-primary); color:#fff; border:none; border-radius:8px; font-size:15px; font-weight:600; cursor:pointer; transition:background .2s;}
+.inq-submit:hover {background:var(--color-primary-hover);}
+
+/* ── Responsive ── */
+@media (max-width: 768px) {
+  .inq-grid {
+    grid-template-columns: 1fr;
+  }
+  .inq-bottom {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+  .inq-submit {
+    width: 100%;
+  }
+  .inq-title{font-size:24px}
+  .inq-head {padding:48px 0 32px}
+}
+

src/pages/contact/InquiryPage.jsx

@@ -1,55 +1,123 @@
-import useFadeIn from "../../hooks/useFadeIn";
+import { useState } from "react";
+import { motion as Motion } from "framer-motion";
 import SubHero from "../../components/SubHero";
+import PrivacyModal from "../../components/PrivacyModal";
 
-function InquiryPage() {
-  const ref = useFadeIn();
-  const CONTACT_NAV = [
+const CONTACT_NAV = [
   { label: "문의하기", to: "/contact/inquiry" },
   { label: "채용정보", to: "/contact/recruit" },
-  ];
+];
+
+export default function InquiryPage() {
+  const [isPrivacyOpen, setIsPrivacyOpen] = useState(false);
+  const [form, setForm] = useState({
+    name: "",
+    email: "",
+    phone: "",
+    website: "",
+    title: "",
+    content: "",
+    agree: false,
+  });
+
+  const handleChange = (e) => {
+    const { name, value, type, checked } = e.target;
+    setForm((prev) => ({ ...prev, [name]: type === "checkbox" ? checked : value }));
+  };
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    alert("문의가 접수되었습니다.");
+  };
+
   return (
-    <article ref={ref}>
+    <article>
       <SubHero
-        label="CONTACT US"
         title={
           <>
-            {/* <span style={{ color: "#111" }}>프로젝트 및 협업 문의</span>
-            <br /> */}
             <em>Contact Us</em>
           </>
         }
-        // desc="PAL Networks에 프로젝트 협업이나 기술 도입을 문의하고 싶으시다면
-        // 아래 정보를 통해 편하게 연락 주세요."
         navItems={CONTACT_NAV}
       />
 
       <div className="sub-content">
-        <section className="sub-section">
-          <span className="sub-section-eyebrow sub-fade-in">문의하기</span>
-          {/* <main className="sub-page">
-            <section className="sub-visual">
-              <div className="inner">
-                <h2>문의하기</h2>
-                <p>Inquiry</p>
-              </div>
-            </section>
-
-            <section className="sub-content-section">
-              <div className="inner">
-                <h3>프로젝트 및 협업 문의</h3>
-                <p>
-                  PAL Networks에 프로젝트 협업이나 기술 도입을 문의하고
-                  싶으시다면
+        <div className="inner-wrap">
+          <div className="inq-wrap">
+            {/* 타이틀 */}
+            <Motion.div className="inq-head" initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true, margin: "-60px" }} transition={{ duration: 0.5, ease: [0.4, 0, 0.2, 1] }}>
+              <h2 className="inq-title">
+                프로젝트 협업이나 기술 도입 문의를 남겨주세요.
                 <br />
-                  아래 정보를 통해 편하게 연락 주세요.
-                </p>
+                빠르게 검토 후 연락드리겠습니다.
+              </h2>
+              {/* <p className="inq-desc">
+                -
+              </p> */}
+            </Motion.div>
+
+            {/* 폼 */}
+            <Motion.form className="inq-form" onSubmit={handleSubmit} initial={{ opacity: 0, y: 24 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true, margin: "-60px" }} transition={{ duration: 0.5, delay: 0.15, ease: [0.4, 0, 0.2, 1] }}>
+              <div className="inq-grid">
+                <label className="inq-field">
+                  <span className="inq-label">
+                    이름 <em>*</em>
+                  </span>
+                  <input className="inq-input" type="text" name="name" value={form.name} onChange={handleChange} placeholder="이름을 입력해 주세요." required />
+                </label>
+
+                <label className="inq-field">
+                  <span className="inq-label">
+                    이메일 <em>*</em>
+                  </span>
+                  <input className="inq-input" type="email" name="email" value={form.email} onChange={handleChange} placeholder="이메일을 입력해 주세요." required />
+                </label>
+
+                <label className="inq-field">
+                  <span className="inq-label">연락처</span>
+                  <input className="inq-input" type="tel" name="phone" value={form.phone} onChange={handleChange} placeholder="연락처를 입력해 주세요." />
+                </label>
+
+                <label className="inq-field">
+                  <span className="inq-label">홈페이지</span>
+                  <input className="inq-input" type="url" name="website" value={form.website} onChange={handleChange} placeholder="홈페이지 주소를 입력해 주세요." />
+                </label>
+
+                <label className="inq-field inq-field--full">
+                  <span className="inq-label">
+                    제목 <em>*</em>
+                  </span>
+                  <input className="inq-input" type="text" name="title" value={form.title} onChange={handleChange} placeholder="문의 제목을 입력해 주세요." required />
+                </label>
+
+                <label className="inq-field inq-field--full">
+                  <span className="inq-label">
+                    내용 <em>*</em>
+                  </span>
+                  <textarea className="inq-textarea" name="content" value={form.content} onChange={handleChange} placeholder="문의 내용을 입력해 주세요." required />
+                </label>
+              </div>
+
+              <div className="inq-bottom">
+                <div className="inq-agree">
+                  <label className="inq-check">
+                    <input type="checkbox" name="agree" checked={form.agree} onChange={handleChange} required />
+                    <span>개인정보처리방침에 동의합니다.</span>
+                  </label>
+                  <button type="button" className="inq-privacy-btn" onClick={() => setIsPrivacyOpen(true)}>
+                    개인정보처리방침 보기
+                  </button>
+                </div>
+                <button type="submit" className="inq-submit">
+                  문의하기
+                </button>
               </div>
-            </section>
-          </main> */}
-        </section>
+            </Motion.form>
           </div>
+        </div>
+      </div>
+
+      {isPrivacyOpen && <PrivacyModal onClose={() => setIsPrivacyOpen(false)} />}
     </article>
   );
 }
-
-export default InquiryPage;