init

.gitignore

@@ -50,3 +50,6 @@ node_modules/
 
 package-lock.json
 yarn.lock
+
+.yarn
+.yarnrc.yml

dist/index.html

@@ -582,11 +582,11 @@
                     <div class="user__details">
                         <div class="input__box">
                             <span class="details">기업명</span>
-                            <input type="text">
+                            <input type="text" name="company_name">
                         </div>
                         <div class="input__box">
                             <span class="details">담당자명</span>
-                            <input type="text">
+                            <input type="text" name="manager_name">
                         </div>
                         <div class="input__box">
                             <span class="details">연락처 <span class="required">(필수)</span></span>
@@ -598,11 +598,11 @@
                         </div>
                         <div class="input__box full">
                             <span class="details">예산범위</span>
-                            <input type="text">
+                            <input type="text" name="budget_range">
                         </div>
                         <div class="input__box full">
                             <span class="details">문의내용</span>
-                            <textarea rows="3"></textarea>
+                            <textarea rows="3" name="contents"></textarea>
                         </div>
                     </div>
 
@@ -617,7 +617,7 @@
                     </div>
 
                     <div class="button">
-                        <input type="submit" value="문의하기">
+                        <button type="submit">문의하기</button>
                     </div>
                 </form>
             </div>
@@ -749,6 +749,23 @@
                 $('#agree').focus();
                 return;
             }
+
+
+            const formData = $('[data-form="request-form"]').serialize()
+
+            $.ajax({
+                url: "/request",
+                type: "POST",
+                data: formData,
+                dataType: "json",
+                success: function() {
+                    alert("상담 신청이 완료되었습니다.")
+                    $('[data-form="request-form"]').reset()
+                },
+                error: function() {
+                    alert("상담 신청도중 오류가 잘생하였습니다.")
+                }
+            })
         })
     });
 

package.json

@@ -4,7 +4,9 @@
   "description": "퍼블리싱용 기본 템플릿",
   "main": "index.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "dev": "ts-node-dev --respawn --transpile-only src-server/server.ts",
+    "build": "tsc",
+    "start": "node dist-server/server.js"
   },
   "repository": {
     "type": "git",
@@ -25,11 +27,21 @@
     "gulp-plumber": "^1.2.1",
     "gulp-rename": "^2.0.0",
     "gulp-sass": "^5.1.0",
-    "node-sass": "^7.0.1",
-    "sass": "^1.32.7",
     "gulp-size": "^3.0.0",
     "gulp-sourcemaps": "^2.6.5",
-    "gulp.spritesmith": "^6.11.0"
+    "gulp.spritesmith": "^6.11.0",
+    "node-sass": "^7.0.1",
+    "sass": "^1.32.7"
   },
-  "dependencies": {}
+  "dependencies": {
+    "@types/express": "^5.0.1",
+    "@types/nodemailer": "^6.4.17",
+    "dotenv": "^16.5.0",
+    "express": "^5.1.0",
+    "nodemailer": "^7.0.3",
+    "path": "^0.12.7",
+    "ts-node": "^10.9.2",
+    "ts-node-dev": "^2.0.0",
+    "typescript": "^5.8.3"
+  }
 }

src-server/email.ts

@@ -0,0 +1,29 @@
+import nodemailer from "nodemailer";
+import dotenv from "dotenv";
+
+dotenv.config();
+
+export const sendEmail = async (to: string, subject: string, text: string) => {
+    const transporter = nodemailer.createTransport({
+        service: "gmail",
+        auth: {
+            user: "wheeparamsoft.mail",
+            pass: "gjyr slpt zwhv whvf",
+        },
+    });
+
+    const mailOptions = {
+        from: "support@wheeparam.com",
+        to,
+        subject,
+        text,
+    };
+
+    try {
+        await transporter.sendMail(mailOptions);
+        console.log(`Email sent to ${to}`);
+    } catch (error) {
+        console.error("Email sending error:", error);
+        throw error;
+    }
+};

src-server/server.ts

@@ -0,0 +1,61 @@
+import express, {Request, Response} from "express";
+import path from "path";
+import dotenv from "dotenv";
+import { sendEmail } from "./email";
+
+dotenv.config();
+
+const app = express();
+const PORT = process.env.PORT || 3070;
+
+// 정적 파일 서빙
+app.use("/", express.static(path.join(__dirname, "../dist")));
+app.use("/assets", express.static(path.join(__dirname, "../dist")));
+
+// JSON 요청을 받기 위한 미들웨어
+app.use(express.json()); // application/json 파싱
+app.use(express.urlencoded({ extended: true })); // application/x-www-form-urlencoded 파싱
+
+
+// /request API
+app.post("/request", async (req: Request, res: Response) => {
+
+    console.log(req)
+    const {
+        type = "",
+        phone = "",
+        company_name = "",
+        manager_name = "",
+        email,
+        budget_range,
+        contents
+    } = await req.body;
+
+
+    if (!email || !contents) {
+        res.status(400).json({ error: "모든 필드가 필요합니다." });
+        return
+    }
+
+    try {
+        await sendEmail(email, `${type} 문의`, `
+            문의 유형: ${type}
+            전화번호: ${phone}
+            회사명: ${company_name}
+            담당자명: ${manager_name}
+            이메일: ${email}
+            예산 범위: ${budget_range}
+            문의 내용: ${contents}
+        `);
+        res.json({ message: "이메일이 성공적으로 전송되었습니다." });
+        return
+    } catch (error) {
+        console.error("이메일 전송 오류:", error);
+        res.status(500).json({ error: "이메일 전송에 실패했습니다." });
+        return
+    }
+});
+
+app.listen(PORT, () => {
+    console.log(`서버가 http://localhost:${PORT} 에서 실행 중입니다.`);
+});

src/html/index.html

@@ -492,11 +492,11 @@
                     <div class="user__details">
                         <div class="input__box">
                             <span class="details">기업명</span>
-                            <input type="text">
+                            <input type="text" name="company_name">
                         </div>
                         <div class="input__box">
                             <span class="details">담당자명</span>
-                            <input type="text">
+                            <input type="text" name="manager_name">
                         </div>
                         <div class="input__box">
                             <span class="details">연락처 <span class="required">(필수)</span></span>
@@ -508,11 +508,11 @@
                         </div>
                         <div class="input__box full">
                             <span class="details">예산범위</span>
-                            <input type="text">
+                            <input type="text" name="budget_range">
                         </div>
                         <div class="input__box full">
                             <span class="details">문의내용</span>
-                            <textarea rows="3"></textarea>
+                            <textarea rows="3" name="contents"></textarea>
                         </div>
                     </div>
 
@@ -527,7 +527,7 @@
                     </div>
 
                     <div class="button">
-                        <input type="submit" value="문의하기">
+                        <button type="submit">문의하기</button>
                     </div>
                 </form>
             </div>
@@ -659,6 +659,23 @@
                 $('#agree').focus();
                 return;
             }
+
+
+            const formData = $('[data-form="request-form"]').serialize()
+
+            $.ajax({
+                url: "/request",
+                type: "POST",
+                data: formData,
+                dataType: "json",
+                success: function() {
+                    alert("상담 신청이 완료되었습니다.")
+                    $('[data-form="request-form"]').reset()
+                },
+                error: function() {
+                    alert("상담 신청도중 오류가 잘생하였습니다.")
+                }
+            })
         })
     });
 

tsconfig.json

@@ -0,0 +1,12 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "CommonJS",
+    "outDir": "./dist-server",
+    "rootDir": "./src-server",
+    "strict": true,
+    "esModuleInterop": true
+  },
+  "include": ["src-server/**/*"],
+  "exclude": ["node_modules"]
+}