feat : 폰트 적용

BeA-Pro · Jun 9, 2024 · d4a2b73 · d4a2b73
1 parent 314b076
commit d4a2b73
Show file tree

Hide file tree

Showing 10 changed files with 189 additions and 14 deletions.
diff --git a/public/index.html b/public/index.html
@@ -24,10 +24,15 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
+    <!-- 네이버 지도 -->
     <script
       type="text/javascript"
       src="https://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=<%=process.env.REACT_APP_MAP_CLIENT_ID%>"
   ></script>
+  <!-- 구글 폰트-->
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:[email protected]&display=swap" rel="stylesheet">
     <title>드림종합건설</title>
   </head>
   <body>

diff --git a/src/App.js b/src/App.js
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react";
-import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
+import { useLocation, BrowserRouter as Router, Routes, Route } from 'react-router-dom';
 
 
 // Desktop
@@ -13,6 +13,15 @@ import { MobileReport, Report } from "./pages/Report.js";
 import { Introduce, MobileIntroduce } from "./pages/Introduce.js";
 import { Content, MobileContent } from "./pages/Content.js";
 
+const ScrollToTop = () => {
+  const { pathname } = useLocation();
+
+  useEffect(() => {
+    window.scrollTo(0, 0);
+  }, [pathname]);
+
+  return null;
+};
 
 
 function App() {
@@ -34,6 +43,7 @@ function App() {
 
   return (
     <Router>
+      <ScrollToTop />
       <div className="wrap">
         {isDesktop ? <Header /> : <MobileHeader />}
         <div className="container">

diff --git a/src/asset/icons/drim-logo.svg b/src/asset/icons/drim-logo.svg
diff --git a/src/asset/scss/base/global.scss b/src/asset/scss/base/global.scss
@@ -2,4 +2,23 @@
 *::before,
 *::after {
   box-sizing: border-box;
-}
+}
+button {
+  cursor: pointer;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+a:visited {
+  color: inherit;
+}
+
+body, tspan {
+  font-family: 'Noto Sans KR', sans-serif;
+  font-optical-sizing: auto;
+  font-style: normal;
+}
+
diff --git a/src/asset/scss/components/buttons.scss b/src/asset/scss/components/buttons.scss
@@ -20,6 +20,7 @@
     border-radius: 30px;
     text-align: center;
     margin-right : 5px;
+    cursor: pointer;
     &.active{
       background-color: black;
       color:white;
@@ -36,5 +37,22 @@
       border-bottom: 2px solid black;
     }
   }
+
+  .introduce-button{
+    width: 80px;
+    height: 30px;
+    background-color: white;
+    border: 1px solid black;
+    color:black;
+    font-size:12px;
+    border-radius: 30px;
+    text-align: center;
+    margin-right : 5px;
+    cursor: pointer;
+    &.active{
+      background-color: black;
+      color:white;
+    }
+  }
 }
 
diff --git a/src/asset/scss/index.scss b/src/asset/scss/index.scss
@@ -24,8 +24,8 @@
 
 
 // Base
-@import 'base/global';
 @import 'base/reset';
+@import 'base/global';
 @import 'base/typography';
 @import 'base/colors';
 

diff --git a/src/asset/scss/layout/header.scss b/src/asset/scss/layout/header.scss
@@ -21,11 +21,13 @@
 
       .Logo{
         height: 50px;
+        cursor: pointer;
       }
 
       ul {
         display : flex;
         li button {
+          cursor: pointer;
           height : $header-size;
           width : 150px;
           text-align: center;
@@ -53,9 +55,8 @@
         ul{
           width: 150px;
           text-align:center;
-
           li {
-            margin : 10px 0 ;
+            margin : 15px 0 ;
           }
           li:hover{
               color : blue;
@@ -92,6 +93,7 @@
 
       .Logo{
         height: 30px;
+        cursor: pointer;
       }
 
       .Menu{height: 20px;}
@@ -102,24 +104,26 @@
       transition-duration: 0.75s;
 
       .menu{
+        font-size:15px;
         .menu-sub{
-          height: 40px;
-          border-top: 1px solid black; 
-          border-bottom: 1px solid black; 
+          height: 35px;
+          border-top: 0.5px solid black; 
+
           display:flex;
           align-items: center;
           justify-content: space-between;
           padding : 0 20px;
-          div{
-            font-size: 18px;
-          }
         }
 
         .menu-sub-details{
           padding: 0 40px;
           display:flex;
           flex-direction:column;
           justify-content: center;
+          border-top: 0.5px solid black; 
+          li {
+            margin : 1.5px 0;
+          }
           &.one{
             // height:30.5px;
             height: 0;
@@ -140,6 +144,7 @@
           }
           &.five{
             // height:92px;
+
             height: 0;
             overflow: hidden;
             transition-duration: 0.75s;

diff --git a/src/asset/scss/pages/introduce.scss b/src/asset/scss/pages/introduce.scss
@@ -36,6 +36,7 @@
     width: calc(100% / 3 - 10px);
     margin: 5px;
     position: relative;
+    cursor: pointer;
 
   }
 
@@ -48,6 +49,63 @@
     font-weight: bold;
   }
 
+  .introduce-content-image{
+    width: 100%;
+    object-fit: cover;
+  }
+}
+
+@include mobile{
+  .introduce-wrapper{
+    display : flex;
+    flex-direction: column;
+    align-items: center;
+    margin-bottom : 30px;
+  }
+
+  .introduce-title{
+    margin: 30px 0;
+    font-size: 25px;
+    font-weight: bold;
+  }
+
+  .introduce-content-wrapper{
+    width: 80%;
+  }
+
+  .introduce-bar{
+    width: 100%;
+    border: 0.5px solid black;
+    height: 0px;
+    margin: 15px 0;
+  }
+
+  .introduce-contents{
+    width: 100%;
+    height: 800px;
+    overflow-y: scroll;
+    overflow-x:hidden;
+    display: flex;
+    flex-wrap: wrap;
+  }
+
+  .introduce-content{
+    width: calc(100% / 3 - 10px);
+    margin: 5px;
+    position: relative;
+    cursor: pointer;
+
+  }
+
+  .introduce-content-title{
+    position: absolute;
+    left: 5px;
+    top: 5px;
+    font-size:12px;
+    color:white;
+    font-weight: bold;
+  }
+
   .introduce-content-image{
     width: 100%;
     object-fit: cover;

diff --git a/src/components/Header.js b/src/components/Header.js
@@ -95,7 +95,7 @@ function Header() {
 
 function MobileHeader() {
   const navigate = useNavigate();
-  const heightsInfo = [168, 92, 70.5, 30.5, 30.5, 0]
+  const heightsInfo = [140, 92, 70.5, 30.5, 30.5, 0]
 
   const [isBottomHover, setIsBottomHover] = useState(false);
   const [height, setHeight] = useState(0)

diff --git a/src/pages/Introduce.js b/src/pages/Introduce.js
@@ -72,10 +72,70 @@ function Introduce() {
 }
 
 function MobileIntroduce() {
+  const location = useLocation();
+  const [introData, setIntroData] = useState([]);
+  const [check, setCheck] = useState([true, false, false, false]);
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    fetch('/introduce.json')
+      .then(response => response.json())
+      .then(data => {
+        setIntroData(data)
+      })
+      .catch(error => console.error('Error fetching file list:', error));
+  }, []);
+
+  useEffect(() => {
+    const queryParams = new URLSearchParams(location.search);
+    const click = queryParams.get('click');
+    console.log(click)
+    if (click === "all") setCheck([true, false, false, false]);
+    else if (click === "architecture") setCheck([false, true, false, false]);
+    else if (click === "remodeling") setCheck([false, false, true, false]);
+    else if (click === "interior") setCheck([false, false, false, true]);
+  }, [location])
+
+  const clickButton = (num) => {
+    if (num === 0) setCheck([true, false, false, false]);
+    else if (num === 1) setCheck([false, true, false, false]);
+    else if (num === 2) setCheck([false, false, true, false]);
+    else if (num === 3) setCheck([false, false, false, true]);
+  }
+
+  const clickImage = (index) => {
+    navigate(`/content?index=${index}`);
+  }
+
   return (
     <div className='introduce-wrapper'>
       <img className="main-image" src={IntroImage} alt="inquiryImage" />
-      Introduce</div>
+      <div className='introduce-title'>사업소개</div>
+      <div className="introduce-content-wrapper">
+        <div className="introduce-buttons-wrapper">
+          <button className={`introduce-button ${check[0] ? 'active' : ''}`} onClick={() => clickButton(0)}>전체</button>
+          <button className={`introduce-button ${check[1] ? 'active' : ''}`} onClick={() => clickButton(1)}>건축</button>
+          <button className={`introduce-button ${check[2] ? 'active' : ''}`} onClick={() => clickButton(2)}>리모델링</button>
+          <button className={`introduce-button ${check[3] ? 'active' : ''}`} onClick={() => clickButton(3)}>인테리어</button>
+        </div>
+        <div className="introduce-bar" />
+        <div className="introduce-contents">
+          {
+            introData.map((intro) => {
+              if (check[0] || check[Number(intro.category)]) {
+                return (
+                  <div key={intro.id} className="introduce-content" onClick={() => clickImage(intro.id)}>
+                    <p className="introduce-content-title">{intro.name}</p>
+                    <img className="introduce-content-image" src={intro.images[0]} alt="introImage" />
+                  </div>
+                );
+              }
+              return null;
+            })
+          }
+        </div>
+      </div>
+    </div>
   )
 }