feat: 시공문의 프로토타입

src/App.js

@@ -8,6 +8,7 @@ import { Header, MobileHeader } from "./components/Header.js"
 import { Footer, MobileFooter } from "./components/Footer.js"
 import { desktopSize } from "./data/style.js"
 import { About, MobileAbout } from "./pages/About.js";
+import { Inquiry, MobileInquiry } from "./pages/Inquiry.js";
 
 
 
@@ -36,6 +37,7 @@ function App() {
           <Routes>
             <Route path="/" element={isDesktop ? <Main /> : <MobileMain />} />
             <Route path="/about" element={isDesktop ? <About /> : <MobileAbout />} />
+            <Route path="/inqury" element={isDesktop ? <Inquiry /> : <MobileInquiry />} />
           </Routes>
         </div>
         {isDesktop ? <Footer /> : <MobileFooter />}

src/asset/scss/index.scss

@@ -52,4 +52,5 @@
 
 // Pages
 @import 'pages/about';
-@import 'pages/main';
+@import 'pages/main';
+@import 'pages/inquiry';

src/asset/scss/pages/inquiry.scss

@@ -0,0 +1,72 @@
+@include desktop{
+  .inquiry-wrapper{
+    display : flex;
+    flex-direction: column;
+    align-items: center;
+    margin : 70px 0;
+
+
+    .inquiry-title{
+      margin-bottom : 70px;
+      font-size: 45px;
+      font-weight: bold;
+    }
+    .inquiry-info{
+      display: flex;
+
+      width: 80%;
+      margin-bottom:100px;
+      .inquiry-info-left{
+        flex:3;
+      }
+      .inquiry-info-right{
+        flex:7;
+      }
+
+      label{
+        font-size:20px;
+        margin-bottom: 10px;
+      }
+      input,select{
+        height: 40px;
+
+      }
+
+    }
+
+
+    .form-group{
+      display: flex;
+      flex-direction: column;
+      margin-bottom: 30px;
+    }
+
+    .inquiry-info-title{
+      font-size:30px;
+      margin-bottom: 10px;
+    }
+
+    .inquiry-info-require{
+      font-size:20px;
+
+    }
+  }
+}
+
+
+@include mobile{
+  .inquiry-wrapper{
+    display : flex;
+    flex-direction: column;
+    align-items: center;
+    margin : 30px 0;
+
+
+    .inquiry-title{
+      margin-bottom : 30px;
+      font-size: 25px;
+      font-weight: bold;
+    }
+
+  }
+}

src/components/Directions.js

@@ -5,8 +5,6 @@ import BusLogo from "../asset/icons/iconBus.svg";
 import SubwayLogo from "../asset/icons/iconSubway.svg";
 
 function Directions() {
-
-
   // 네이버 지도 띄우기
   useEffect(() => {
     const naver = window.naver;

src/components/Header.js

@@ -81,7 +81,7 @@ function Header() {
             <li>부동산보고서</li>
           </ul>
           <ul>
-            <li>시공문의</li>
+            <li><Link to="inqury">시공문의</Link></li>
           </ul>
         </div>
 
@@ -130,6 +130,7 @@ function MobileHeader() {
     else if (index === 1) navigate('/about?click=greeting');
     else if (index === 2) navigate('/about?click=history');
     else if (index === 3) navigate('/about?click=directions');
+    else if (index === 8) navigate('/inqury');
 
 
 
@@ -215,7 +216,7 @@ function MobileHeader() {
               }
             </div>
             <ul className={`menu-sub-details one ${detailsHeights[4] ? 'hover' : ''}`}>
-              <li>시공문의</li>
+              <li><button onClick={() => clickButton(8)}>시공문의</button></li>
             </ul>
           </div>
         </nav>

src/pages/Inquiry.js

@@ -0,0 +1,197 @@
+import React, { useState } from 'react'
+
+function Inquiry() {
+
+  const [name, setName] = useState('');
+  const [emailLocalPart, setEmailLocalPart] = useState('');
+  const [emailDomainPart, setEmailDomainPart] = useState('');
+  const [contactPart1, setContactPart1] = useState('');
+  const [contactPart2, setContactPart2] = useState('');
+  const [contactPart3, setContactPart3] = useState('');
+
+  const [emailTitle, setEmailTitle] = useState('');
+  const [category, setCategory] = useState('');
+  const [content, setContent] = useState('');
+  const [file, setFile] = useState(null);
+
+
+  const [contentLength, setContentLength] = useState(0);
+
+
+  const handleContentChange = (event) => {
+    const newContent = event.target.value;
+    if (newContent.length <= 2000) {
+      setContent(newContent);
+      setContentLength(newContent.length);
+    }
+  };
+
+  const handleCategoryChange = (event) => {
+    setCategory(event.target.value);
+  };
+
+  const handleFileChange = (event) => {
+    const selectedFile = event.target.files[0];
+    setFile(selectedFile);
+  };
+
+  const handleSubmit = (event) => {
+    event.preventDefault();
+    const email = `${emailLocalPart}@${emailDomainPart}`;
+    console.log('Submitted email:', email);
+    // 여기에 폼 제출 로직 추가
+  };
+  return (
+    <div className="inquiry-wrapper">
+      <div className="inquiry-title">시공문의</div>
+      <section className="inquiry-info">
+        <div className="inquiry-info-left">
+          <p className="inquiry-info-title">고객 정보</p>
+          <p className="inquiry-info-require">• 전체 필수 입력</p>
+        </div>
+        <div className="inquiry-info-right">
+          <form onSubmit={handleSubmit}>
+            <div className="form-group">
+              <label htmlFor="name">이름</label>
+              <input type="text" id="name" placeholder='이름을 입력해주세요.' value={name}
+                onChange={(e) => setName(e.target.value)}
+                required />
+            </div>
+            <div className="form-group">
+              <label htmlFor="emailLocalPart">이메일</label>
+              <div style={{ display: 'flex', alignItems: 'center' }}>
+                <input
+                  type="text"
+                  id="emailLocalPart"
+                  placeholder="이메일을 입력해주세요."
+                  value={emailLocalPart}
+                  onChange={(e) => setEmailLocalPart(e.target.value)}
+                  style={{ width: '100%' }}
+                  required
+                />
+                <span style={{ margin: '0 5px' }}>@</span>
+                <input
+                  type="text"
+                  id="emailDomainPart"
+                  list="emailDomains"
+                  placeholder="example.com"
+                  value={emailDomainPart}
+                  onChange={(e) => setEmailDomainPart(e.target.value)}
+                  style={{ width: '100%' }}
+                  required
+                />
+                <datalist id="emailDomains">
+                  <option value="gmail.com">gmail.com</option>
+                  <option value="naver.com">naver.com</option>
+                  <option value="daum.net">daum.net</option>
+                  <option value="hanmail.net">hanmail.net</option>
+                </datalist>
+              </div>
+            </div>
+            <div className="form-group">
+              <label>연락처</label>
+              <div style={{ display: 'flex', alignItems: 'center' }}>
+                <input
+                  type="text"
+                  id="contactPart1"
+                  placeholder=""
+                  value={contactPart1}
+                  onChange={(e) => setContactPart1(e.target.value)}
+                  required
+                  style={{ width: '30%' }}
+                />
+                <span style={{ margin: '0 5px' }}>-</span>
+                <input
+                  type="text"
+                  id="contactPart2"
+                  placeholder=""
+                  value={contactPart2}
+                  onChange={(e) => setContactPart2(e.target.value)}
+                  required
+                  style={{ width: '35%' }}
+                />
+                <span style={{ margin: '0 5px' }}>-</span>
+                <input
+                  type="text"
+                  id="contactPart3"
+                  placeholder=""
+                  value={contactPart3}
+                  onChange={(e) => setContactPart3(e.target.value)}
+                  required
+                  style={{ width: '35%' }}
+                />
+              </div>
+            </div>
+          </form>
+        </div>
+      </section>
+
+      <section className="inquiry-info">
+        <div className="inquiry-info-left">
+          <p className="inquiry-info-title">시공 문의 내용</p>
+          <p className="inquiry-info-require">• 표시 필수 입력</p>
+        </div>
+        <div className="inquiry-info-right">
+          <form onSubmit={handleSubmit}>
+            <div className="form-group">
+              <label htmlFor="category">문의 분류 •</label>
+              <select id="category" value={category} onChange={handleCategoryChange} required>
+                <option value="" disabled>선택하세요</option>
+                <option value="건축사업">건축사업</option>
+                <option value="리모델링사업">리모델링사업</option>
+                <option value="인테리어사업">인테리어사업</option>
+                <option value="기타">기타</option>
+              </select>
+            </div>
+            <div className="form-group">
+              <label htmlFor="emailTitle">제목 •</label>
+              <div style={{ display: 'flex' }}>
+                <input
+                  type="text"
+                  value={emailTitle}
+                  onChange={(e) => setEmailTitle(e.target.value)}
+                  style={{ width: "100%" }}
+                  placeholder="제목을 입력해주세요."
+                  required
+                />
+              </div>
+            </div>
+            <div className="form-group">
+              <label htmlFor="content">문의 내용 • </label>
+              <textarea
+                id="content"
+                value={content}
+                onChange={handleContentChange}
+                placeholder="문의 내용을 입력하세요. (2000자 이내)"
+                maxLength="2000"
+                rows="10"
+                required
+                style={{ width: '100%' }}
+              />
+              <div style={{ textAlign: 'right', marginTop: '5px' }}>{contentLength}/2000</div>
+            </div>
+            <div className="form-group">
+              <label htmlFor="file">파일 첨부</label>
+              <input
+                type="file"
+                id="file"
+                onChange={handleFileChange}
+                accept=".pdf,.doc,.docx,image/*"
+                required
+              />
+            </div>
+          </form>
+        </div>
+      </section>
+      <button>제출</button>
+    </div>
+  )
+}
+
+function MobileInquiry() {
+  return (
+    <div className="inquiry-wrapper">Inquiry</div>
+  )
+}
+
+export { Inquiry, MobileInquiry }