feat : 시공 문의, 부동산 보고서 개발

.github/workflows/main.yml

@@ -14,6 +14,9 @@ jobs:                                       # Job 설정
       - name: .env setting
         run: |
           echo "REACT_APP_MAP_CLIENT_ID=${{ secrets.REACT_APP_MAP_CLIENT_ID}}" >> .env
+          echo "REACT_APP_SERVICE_ID=${{ secrets.REACT_APP_MAP_CLIENT_ID}}" >> .env
+          echo "REACT_APP_TEMPLATE_ID=${{ secrets.REACT_APP_MAP_CLIENT_ID}}" >> .env
+          echo "REACT_APP_PUBLICKEY_ID=${{ secrets.REACT_APP_MAP_CLIENT_ID}}" >> .env
 
       - name: Install Dependencies          # 의존 파일 설치
         run: npm install

package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@emailjs/browser": "^4.3.3",
     "@emotion/react": "^11.11.3",
     "@emotion/styled": "^11.11.0",
     "@mui/icons-material": "^5.15.5",

public/files.json

@@ -0,0 +1,6 @@
+[
+  {
+    "name": "토스정리.docx",
+    "path": "/reports/토스정리.docx"
+  }
+]

src/App.js

@@ -9,6 +9,8 @@ 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";
+import { MobileReport, Report } from "./pages/Report.js";
+import { Introduce, MobileIntroduce } from "./pages/Introduce.js";
 
 
 
@@ -37,7 +39,9 @@ function App() {
           <Routes>
             <Route path="/" element={isDesktop ? <Main /> : <MobileMain />} />
             <Route path="/about" element={isDesktop ? <About /> : <MobileAbout />} />
-            <Route path="/inqury" element={isDesktop ? <Inquiry /> : <MobileInquiry />} />
+            <Route path="/introduce" element={isDesktop ? <Introduce /> : <MobileIntroduce />} />
+            <Route path="/inquiry" element={isDesktop ? <Inquiry /> : <MobileInquiry />} />
+            <Route path="/report" element={isDesktop ? <Report /> : <MobileReport />} />
           </Routes>
         </div>
         {isDesktop ? <Footer /> : <MobileFooter />}

src/asset/scss/components/management.scss

@@ -114,7 +114,6 @@
               }
               .management-value-writes{
                 font-size:12px;
-                margin-right: 10px;
                 display: inline-block;
               }
             }

src/asset/scss/index.scss

@@ -44,6 +44,7 @@
 @import 'components/directions';
 @import 'components/greeting';
 @import 'components/management';
+
 // Layout
 @import 'layout/header';
 @import 'layout/footer';
@@ -53,4 +54,5 @@
 // Pages
 @import 'pages/about';
 @import 'pages/main';
-@import 'pages/inquiry';
+@import 'pages/inquiry';
+@import 'pages/report';

src/asset/scss/pages/inquiry.scss

@@ -3,11 +3,11 @@
     display : flex;
     flex-direction: column;
     align-items: center;
-    margin : 70px 0;
+    margin-bottom:70px;
 
 
     .inquiry-title{
-      margin-bottom : 70px;
+      margin: 70px 0;
       font-size: 45px;
       font-weight: bold;
     }
@@ -32,6 +32,50 @@
 
       }
 
+      input[type='file'] {
+        display: block;
+        width: 0;
+        height: 0;
+        overflow: hidden;
+      }
+      .inquiry-file-wrapper {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+      .inquiry-file-name {
+        display: flex;
+        align-items: center;
+        padding-left:4px;
+        width: 100%;
+        height: 40px;
+        font-size:12px;
+        border: 1px solid black;
+        color: #999;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        box-sizing: border-box;
+        border-radius: 3px 0 0 3px;
+      }
+
+      .inquiry-file-label {
+        display: flex;
+        background: #999;
+        height: 40px;
+        width: 100px;
+        align-items: center;
+        justify-content: center;
+        font-size: 15px;
+        cursor: pointer;
+        margin : 0;
+        padding: 0;
+        border-radius: 0 3px 3px 0;
+        border-bottom: 1px solid black;
+        border-top: 1px solid black;
+        border-right: 1px solid black;
+      }
+
     }
 
 
@@ -50,23 +94,144 @@
       font-size:20px;
 
     }
+
+    .inquiry-submit-button-wrapper{
+      display: flex;
+      width: 100%;
+      justify-content: center;
+      .inquiry-submit-button{
+        background-color: black;
+        color: white;
+        width: 150px;
+        height: 50px;
+        font-size:20px;
+        text-align: center;
+        border-radius: 15px;
+        position : absolute;
+      }
+    }
+
   }
 }
 
 
+
 @include mobile{
   .inquiry-wrapper{
     display : flex;
     flex-direction: column;
     align-items: center;
-    margin : 30px 0;
+    margin-bottom : 30px;
 
 
     .inquiry-title{
-      margin-bottom : 30px;
+      margin: 30px 0;
       font-size: 25px;
       font-weight: bold;
     }
+    .inquiry-info{
+      display: flex;
+      flex-direction: column;
+      width: 80%;
+      margin-bottom:100px;
+
+      .inquiry-info-title{
+        font-size:20px;
+      }
+      .inquiry-info-require{
+        font-size:15px;
+        margin-bottom: 25px;
+      }
+
+      label{
+        font-size:15px;
+        margin-bottom: 10px;
+      }
+      input,select{
+        height: 25px;
+
+      }
+
+      input[type='file'] {
+        display: block;
+        width: 0;
+        height: 0;
+        overflow: hidden;
+      }
+      .inquiry-file-wrapper {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+      .inquiry-file-name {
+        display: flex;
+        align-items: center;
+        padding-left:4px;
+        width: 100%;
+        height: 40px;
+        font-size:12px;
+        border: 1px solid black;
+        color: #999;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        box-sizing: border-box;
+        border-radius: 3px 0 0 3px;
+      }
+
+      .inquiry-file-label {
+        display: flex;
+        background: #999;
+        height: 40px;
+        width: 100px;
+        align-items: center;
+        justify-content: center;
+        font-size: 15px;
+        cursor: pointer;
+        margin : 0;
+        padding: 0;
+        border-radius: 0 3px 3px 0;
+        border-bottom: 1px solid black;
+        border-top: 1px solid black;
+        border-right: 1px solid black;
+      }
+
+    }
+
+
+    .form-group{
+      display: flex;
+      flex-direction: column;
+      margin-bottom: 15px;
+    }
+
+    .inquiry-info-title{
+      font-size:30px;
+      margin-bottom: 10px;
+    }
+
+    .inquiry-info-require{
+      font-size:20px;
+
+    }
 
+    .inquiry-submit-button-wrapper{
+      display: flex;
+      width: 100%;
+      justify-content: center;
+      .inquiry-submit-button{
+        background-color: black;
+        color: white;
+        width: 120px;
+        height: 40px;
+        font-size:15px;
+        text-align: center;
+        border-radius: 15px;
+        position : absolute;
+      }
+    }
+
   }
-}
+}
+
+