feat: contact 페이지 구현

saver-web/.env.sample

@@ -8,6 +8,8 @@ MYSQL_PASSWORD=<MYSQL_PASSWORD>
 SALT_ROUNDS=10
 GMAIL_USER_NAME=<GMAIL_USER_NAME>
 GMAIL_PASSWORD=<GMAIL_PASSWORD>
+CONTACT_USER_NAME=<CONTACT_USER_NAME>
+CONTACT_PASSWORD=<CONTACT_PASSWORD>
 S3=<S3>
 S3_BUCKET=<S3_BUCKET>
 KAKAO_JS_KEY=<KAKAO_JAVASCRIPT_APP_KEY>

saver-web/controllers/user/settingController.js

@@ -1,15 +1,13 @@
-const {Subscriber } = require('../../models');
+const { Subscriber } = require('../../models');
 const sequelize = require('../../models').sequelize;
-const Sequelize = require("sequelize");
+const Sequelize = require('sequelize');
 const Op = Sequelize.Op;
+const sendContactMail = require('../../lib/sendContactMail');
 
 const getSettingRequest = async (req, res) => {
   const user = await Subscriber.findAll({
     where: { id: req.decoded.userId },
-    attributes: [
-      'email',
-      'alarmStatus',
-    ],
+    attributes: ['email', 'alarmStatus'],
   });
   try {
     res.status(200).json({
@@ -24,23 +22,41 @@ const getSettingRequest = async (req, res) => {
 
 const AlarmOnOffRequest = async (req, res) => {
   var flag = req.params.flag;
-  try{
+  try {
     const result = await Subscriber.update(
-      {alarmStatus: flag},
-      {where: { id: req.decoded.userId}}
+      { alarmStatus: flag },
+      { where: { id: req.decoded.userId } },
     );
-    
+
     res.status(200).json({
       success: true,
     });
-  } catch (error){
+  } catch (error) {
     res.status(400).json({
       succes: false,
-      error
+      error,
     });
   }
-}
+};
 
+const postContactMail = async (req, res) => {
+  try {
+    await sendContactMail(
+      req.body.title,
+      `문의자 이메일: ${req.body.email}\n ---\n${req.body.contents}`,
+    );
+
+    res.status(200).json({
+      success: true,
+    });
+  } catch (error) {
+    console.log(error);
+    res.status(400).json({
+      succes: false,
+      error,
+    });
+  }
+};
 
 module.exports = {
   section: (req, res, next) => {
@@ -50,4 +66,5 @@ module.exports = {
     getUser: getSettingRequest,
     OnOff: AlarmOnOffRequest,
   },
+  postContactMail,
 };

saver-web/lib/sendContactMail.js

@@ -0,0 +1,30 @@
+const nodemailer = require('nodemailer');
+
+module.exports = async (title, contents) => {
+  const myEmail = nodemailer.createTransport({
+    service: 'gmail',
+    auth: {
+      user: process.env.CONTACT_USER_NAME,
+      pass: process.env.CONTACT_PASSWORD,
+    },
+    tls: {
+      rejectUnauthorized: false,
+    },
+  });
+
+  await myEmail.sendMail(
+    {
+      from: `${process.env.CONTACT_USER_NAME}`,
+      to: `${process.env.CONTACT_USER_NAME}`,
+      subject: title,
+      text: contents,
+    },
+    function (error, info) {
+      if (error) {
+        console.log(error);
+      } else {
+        return info.response;
+      }
+    },
+  );
+};

saver-web/public/javascripts/buildSetting.js

@@ -1,28 +1,25 @@
 var buildPoint = document.querySelector('.bookmark_alarm-page');
-const buildStart = async() => {
-    await $.ajax({
-      url: `/setting/getuser`,
-      type: 'get',
-      headers: { 'x-access-token': token },
-      success: function (user) {
-        console.log(user.user);
-         getListTemplate(user.user[0]);
+const buildStart = async () => {
+  await $.ajax({
+    url: `/setting/getuser`,
+    type: 'get',
+    headers: { 'x-access-token': token },
+    success: function (user) {
+      console.log(user.user);
+      getListTemplate(user.user[0]);
+    },
+    error: function (error) {
+      alert(error.response.data.message);
+    },
+  });
+};
 
-      },
-      error: function (error) {
-        alert(error.response.data.message);
-      },
-    });
-  };
+buildStart();
 
-  buildStart();
-
-  function getListTemplate(user) {
-
-
-    buildPoint.insertAdjacentHTML(
-        'beforeend',
-        `
+function getListTemplate(user) {
+  buildPoint.insertAdjacentHTML(
+    'beforeend',
+    `
         <div class="bookmark_alarm-title">
         <!-- <div class="bookmark_alarm-title-col1">
           <div class="topbar__set__icon"></div>
@@ -101,8 +98,8 @@ const buildStart = async() => {
         </div>
         <div class="bookmark_alarm-section white">
         <div class="bookmark_alarm-section-text">
-          <p class="bookmark_alarm-section-text-text">
-          <button type="submit" style="background: #ffffff;" > 제보 및 제안 </button>
+          <p class="bookmark_alarm-section-text-text" , onclick="location.href='/setting/contact'">
+          <button type="submit" style="background: #ffffff;" > 문의 및 제보/제안 </button>
           </p>
         </div>
         </div>
@@ -135,16 +132,14 @@ const buildStart = async() => {
         <div class="bookmark_alarm-section-tap"></div>
         <br/>
         <br/>
-        `
-    );
-  }
+        `,
+  );
+}
 
-  function getAlarmActive(flag)
-  {
-    if (flag == 1) {
-      return ('inactive');
-    }
-    else {
-      return ('active');
-    }
+function getAlarmActive(flag) {
+  if (flag == 1) {
+    return 'inactive';
+  } else {
+    return 'active';
   }
+}

saver-web/public/stylesheets/user/pages/bookmark_alarm.css

@@ -68,6 +68,43 @@
   overflow: hidden;
 }
 
+.contact-section-text {
+  margin-left: 22px;
+  display: grid;
+  grid-template-columns: 50px 20px auto;
+  margin-right: 17px;
+  height: fit-content;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.contact-section-text-one {
+  margin-left: 22px;
+  display: flex;
+  margin-right: 17px;
+  height: fit-content;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.contact-section-text-v-line {
+  height: 100%;
+  width: 0;
+  align-self: center;
+  display: flex;
+  border: solid 1px var(--white-three);
+}
+
+.contact-section-text-h-line {
+  height: 0;
+  width: 100%;
+  display: flex;
+  margin: 0.5px 0 0 0.5px;
+  border: solid 1px var(--white-three);
+}
+
 .bookmark_alarm-section-text-area {
   display: flex;
   flex-direction: column;
@@ -77,6 +114,22 @@
   overflow: hidden;
 }
 
+.contents-section-text-text {
+  margin: 10px 0.5px 8.5px 0;
+  font-family: 'Noto Sans KR', sans-serif;
+  font-size: 16px;
+  font-weight: normal;
+  font-stretch: normal;
+  font-style: normal;
+  line-height: 1.63;
+  letter-spacing: -0.32px;
+  text-align: left;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: auto;
+  color: var(--greyish-brown);
+}
+
 .bookmark_alarm-section-text-text {
   height: 24px;
   margin: 10px 0.5px 8.5px 0;
@@ -108,43 +161,42 @@
   background-color: var(--white-two);
 }
 
-
 .toggleBG.inactive {
-  background: #CCCCCC; 
-  width: 65px; 
-  height: 20px; 
-  border: 1px solid #CCCCCC; 
+  background: #cccccc;
+  width: 65px;
+  height: 20px;
+  border: 1px solid #cccccc;
   border-radius: 10px;
-  float:right;
+  float: right;
 }
 
 .toggleBG.active {
-  background: #09ff00; 
-  width: 65px; 
-  height: 20px; 
-  border: 1px solid #CCCCCC; 
+  background: #09ff00;
+  width: 65px;
+  height: 20px;
+  border: 1px solid #cccccc;
   border-radius: 10px;
-  float:right;
+  float: right;
 }
 
 .toggleFG.inactive {
-  background: #FFFFFF; 
-  width: 20px; 
-  height: 20px; 
-  border: none; 
-  border-radius: 10px; 
-  position: relative; 
+  background: #ffffff;
+  width: 20px;
+  height: 20px;
+  border: none;
+  border-radius: 10px;
+  position: relative;
   left: -45px;
-  float:right;
+  float: right;
 }
 
 .toggleFG.active {
-  background: #FFFFFF; 
-  width: 20px; 
-  height: 20px; 
-  border: none; 
-  border-radius: 10px; 
-  position: relative; 
+  background: #ffffff;
+  width: 20px;
+  height: 20px;
+  border: none;
+  border-radius: 10px;
+  position: relative;
   left: 0px;
-  float:right;
-}
+  float: right;
+}

saver-web/routes/setting.js

@@ -4,10 +4,17 @@ const authMiddleware = require('../middlewares/auth');
 const settingCtrl = require('../controllers/user/settingController');
 
 // 알림페이지 연결
-router.get('/', (req,res)=>{res.render('user/setting', { title: 'slab-saver', layout: 'layout/userLayout' })});
+router.get('/', (req, res) => {
+  res.render('user/setting', { title: 'slab-saver', layout: 'layout/userLayout' });
+});
 router.get('/login', settingCtrl.section);
+router.post('/contact', settingCtrl.postContactMail);
+
+router.get('/contact', (req, res) => {
+  res.render('user/contact', { title: 'slab-saver', layout: 'layout/userLayout' });
+});
+
 router.get('/getuser', authMiddleware, settingCtrl.request.getUser);
 router.post('/alarmOnOff/:flag', authMiddleware, settingCtrl.request.OnOff);
 
-
 module.exports = router;