From a4f6d47a80682d4d396635f6cfe46183570dfa8c Mon Sep 17 00:00:00 2001
From: hokim <teamgoodaloe@gmail.com>
Date: Mon, 30 Aug 2021 18:28:10 +0900
Subject: [PATCH 1/2] =?UTF-8?q?feat:=20contact=20=ED=8E=98=EC=9D=B4?=
 =?UTF-8?q?=EC=A7=80=20=EA=B5=AC=ED=98=84=20-=EB=A9=94=EC=9D=BC=EC=9D=84?=
 =?UTF-8?q?=20=EB=B3=B4=EB=82=BC=20=EC=88=98=20=EC=9E=88=EB=8A=94=20contac?=
 =?UTF-8?q?t=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 saver-web/.env.sample                         |   2 +
 .../controllers/user/settingController.js     |  43 +++++--
 saver-web/lib/sendContactMail.js              |  30 +++++
 saver-web/public/javascripts/buildSetting.js  |  65 +++++-----
 .../stylesheets/user/pages/bookmark_alarm.css | 104 ++++++++++++----
 saver-web/routes/setting.js                   |  11 +-
 saver-web/views/user/contact.ejs              | 113 ++++++++++++++++++
 saver-web/views/user/setting.ejs              |   4 +-
 8 files changed, 294 insertions(+), 78 deletions(-)
 create mode 100644 saver-web/lib/sendContactMail.js
 create mode 100644 saver-web/views/user/contact.ejs

diff --git a/saver-web/.env.sample b/saver-web/.env.sample
index ee37c0e7..1a9541f2 100644
--- a/saver-web/.env.sample
+++ b/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>
diff --git a/saver-web/controllers/user/settingController.js b/saver-web/controllers/user/settingController.js
index 0e98713b..467b19d4 100644
--- a/saver-web/controllers/user/settingController.js
+++ b/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,
 };
diff --git a/saver-web/lib/sendContactMail.js b/saver-web/lib/sendContactMail.js
new file mode 100644
index 00000000..fc8864ab
--- /dev/null
+++ b/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;
+      }
+    },
+  );
+};
diff --git a/saver-web/public/javascripts/buildSetting.js b/saver-web/public/javascripts/buildSetting.js
index dba317b0..79d94c56 100644
--- a/saver-web/public/javascripts/buildSetting.js
+++ b/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';
   }
+}
diff --git a/saver-web/public/stylesheets/user/pages/bookmark_alarm.css b/saver-web/public/stylesheets/user/pages/bookmark_alarm.css
index 2e6fb56e..64a78cfc 100644
--- a/saver-web/public/stylesheets/user/pages/bookmark_alarm.css
+++ b/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;
-}
\ No newline at end of file
+  float: right;
+}
diff --git a/saver-web/routes/setting.js b/saver-web/routes/setting.js
index fc0cd14f..def4fb39 100644
--- a/saver-web/routes/setting.js
+++ b/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;
diff --git a/saver-web/views/user/contact.ejs b/saver-web/views/user/contact.ejs
new file mode 100644
index 00000000..eddf27c1
--- /dev/null
+++ b/saver-web/views/user/contact.ejs
@@ -0,0 +1,113 @@
+<%- contentFor('styleTag') %>
+<link rel="stylesheet" href="/stylesheets/user/pages/bookmark_alarm.css" />
+
+<%- contentFor('navbar') %> <%- include('./components/nav-back.ejs') %> <%- contentFor('body') %>
+<div>
+
+  <br/>
+  <br/>
+  <br/>
+
+    <div class="bookmark_alarm-title">
+    <div class="bookmark_alarm-title-col2">
+      <p class="bookmark_alarm-title-col2-text">
+        문의 및 제보/제안
+      </p>
+    </div>
+    </div>
+    <div class="bookmark_alarm-section-text-line"></div>
+    <div class="bookmark_alarm-section white" style="flex-direction: column;">
+      <div class="contact-section-text" >
+        <p class="bookmark_alarm-section-text-text" >제목</p>
+        <div class="contact-section-text-v-line"></div>
+        <input id="title" name="title" type="text" placeholder="메일 제목을 적어주세요" class="bookmark_alarm-section-text-text"/>
+          
+      </div>
+      <div class="bookmark_alarm-section-text-line"></div>
+      <div class="contact-section-text">
+        <p class="bookmark_alarm-section-text-text">이메일</p>
+        <div class="contact-section-text-v-line"></div>
+        <input  id="email" name="email" type="text" placeholder="답변 받으실 이메일을 적어주세요" class="bookmark_alarm-section-text-text"/>
+      </div>
+      <div class="bookmark_alarm-section-text-line"></div>
+      <div class="contact-section-text-one ">
+        <p class="bookmark_alarm-section-text-text" style="width: 100%;">
+         내용
+        </p>
+ 
+      </div>
+       <div class="contact-section-text-h-line"></div>
+       <div class="contact-section-text-one">
+        <textarea id="contents" class="contents-section-text-text" rows="15"  placeholder="메일 내용을 적어주세요" style="width:100%;"></textarea>
+      </div>
+    </div>
+
+    <div class="bookmark_alarm-section-text-line"></div>
+    <div class="bookmark_alarm-section-tap"></div>
+
+    <div class="bookmark_alarm-section-text-line"></div>
+    <div class="bookmark_alarm-section white" style="flex-direction: column;">
+      <div class="contact-section-text-one " >
+        <button id='send' class="bookmark_alarm-section-text-text"  style="background: #ffffff;">보내기</button>
+      </div>
+    </div>
+    <div class="bookmark_alarm-section-text-line"></div>
+
+    <br/>
+    <br/>
+
+  </div>
+    <%- contentFor('footer') %> <%- include('./components/foo.ejs') %>
+  </div>
+</div>
+
+<%- contentFor('scriptTag') %>
+<script>
+  window.addEventListener('load',()=>{
+    var email = document.getElementById('email');
+    var title = document.getElementById('title');
+    var contents = document.getElementById('contents');
+
+
+      document.getElementById('send').addEventListener('click',()=>{
+        if (!title.value || title.value== "") {
+          alert('제목이 비어있습니다.');
+          return 0;
+        }
+        if (!email.value || email.value== "") {
+          alert('이메일이 비어있습니다.');
+          return 0;
+        }
+        else if(!email.value.includes('@')){
+          alert('이메일이 유효하지 않습니다.');
+          return 0;
+        }
+        if (!contents.value || contents.value== "") {
+          alert('내용이 비어있습니다.');
+          return 0;
+        }
+
+        axios({
+          method: 'post',
+          url: '/setting/contact',
+          data: {
+            'email': email.value,
+            'title': title.value,
+            'contents': contents.value,
+          }
+        }).then((res) => {
+          location.href = '/setting'
+          alert('메일을 보냈습니다.');
+        }).catch(error => {
+          alert(error.response.data.message);
+        });
+        
+
+      })
+
+
+
+  })
+
+
+</script>
\ No newline at end of file
diff --git a/saver-web/views/user/setting.ejs b/saver-web/views/user/setting.ejs
index 39165624..fd294466 100644
--- a/saver-web/views/user/setting.ejs
+++ b/saver-web/views/user/setting.ejs
@@ -43,8 +43,8 @@
     </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>

From 7e3adc3ca1f85e968ffc2baccd9992d8cddc5d31 Mon Sep 17 00:00:00 2001
From: hokim <teamgoodaloe@gmail.com>
Date: Mon, 30 Aug 2021 18:41:11 +0900
Subject: [PATCH 2/2] =?UTF-8?q?fix:=EB=A9=94=EC=9D=BC=20=EB=B3=B4=EB=82=B4?=
 =?UTF-8?q?=EA=B8=B0=20=EC=84=B1=EA=B3=B5=EC=8B=9C=20=EB=A9=94=EC=84=B8?=
 =?UTF-8?q?=EC=A7=80=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 saver-web/views/user/contact.ejs | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/saver-web/views/user/contact.ejs b/saver-web/views/user/contact.ejs
index eddf27c1..6b9aaf8c 100644
--- a/saver-web/views/user/contact.ejs
+++ b/saver-web/views/user/contact.ejs
@@ -97,7 +97,7 @@
           }
         }).then((res) => {
           location.href = '/setting'
-          alert('메일을 보냈습니다.');
+          alert('메일을 보냈습니다.\n적어주신 메일로 답변 드리겠습니다.');
         }).catch(error => {
           alert(error.response.data.message);
         });