feat: content 페이지 개발

public/introduce.json

@@ -0,0 +1,52 @@
+[
+  {
+    "id" : "0",
+    "name": "거룩한빛운정교회",
+    "category" : "1",
+    "images": ["/introduce/image1-1.png","/introduce/image1-2.png"],
+    "year" : "2021",
+    "buildingArea" : "919.41",
+    "totalFloorArea": "4257.73",
+    "siteArea" : "1895.40",
+    "buildingScale" : "지하 2층 / 지상 4층",
+    "buildingStructure" : "철골콘크리트구조",
+    "mainFinishes" : "점토벽톨"
+  },
+  {
+    "id" : "1",
+    "name": "거룩한빛운정교회",
+    "category" : "1",
+    "images": ["/introduce/image2-1.png"],
+    "year" : "2021",
+    "buildingArea" : "919.41",
+    "totalFloorArea": "4257.73",
+    "siteArea" : "1895.40",
+    "buildingScale" : "지하 2층 / 지상 4층",
+    "buildingStructure" : "철골콘크리트구조",
+    "mainFinishes" : "점토벽톨"
+  },{
+    "id" : "2",
+    "name": "거룩한빛운정교회",
+    "category" : "1",
+    "images": ["/introduce/image1-1.png"],
+    "year" : "2021",
+    "buildingArea" : "919.41",
+    "totalFloorArea": "4257.73",
+    "siteArea" : "1895.40",
+    "buildingScale" : "지하 2층 / 지상 4층",
+    "buildingStructure" : "철골콘크리트구조",
+    "mainFinishes" : "점토벽톨"
+  },{
+    "id" : "3",
+    "name": "거룩한빛운정교회",
+    "category" : "1",
+    "images": ["/introduce/image1-1.png"],
+    "year" : "2021",
+    "buildingArea" : "919.41",
+    "totalFloorArea": "4257.73",
+    "siteArea" : "1895.40",
+    "buildingScale" : "지하 2층 / 지상 4층",
+    "buildingStructure" : "철골콘크리트구조",
+    "mainFinishes" : "점토벽톨"
+  }
+]

src/App.js

@@ -11,6 +11,7 @@ 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";
+import { Content, MobileContent } from "./pages/Content.js";
 
 
 
@@ -42,6 +43,7 @@ function App() {
             <Route path="/introduce" element={isDesktop ? <Introduce /> : <MobileIntroduce />} />
             <Route path="/inquiry" element={isDesktop ? <Inquiry /> : <MobileInquiry />} />
             <Route path="/report" element={isDesktop ? <Report /> : <MobileReport />} />
+            <Route path="/content" element={isDesktop ? <Content /> : <MobileContent />} />
           </Routes>
         </div>
         {isDesktop ? <Footer /> : <MobileFooter />}

src/asset/scss/base/reset.scss

@@ -2,7 +2,7 @@ html, body, div, span, applet, object, iframe,
 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 a, abbr, acronym, address, big, cite, code,
 del, dfn, em, img, ins, kbd, q, s, samp,
-small, strike, strong, sub, sup, tt, var,
+small, strike, strong, sub,  tt, var,
 b, u, i, center,
 dl, dt, dd, ol, ul, li,
 fieldset, form, label, legend,

src/asset/scss/components/buttons.scss

@@ -9,6 +9,22 @@
       border-bottom: 2px solid black;
     }
   }
+
+  .introduce-button{
+    width: 100px;
+    height: 40px;
+    background-color: white;
+    border: 1px solid black;
+    color:black;
+    font-size:15px;
+    border-radius: 30px;
+    text-align: center;
+    margin-right : 5px;
+    &.active{
+      background-color: black;
+      color:white;
+    }
+  }
 }
 
 @include mobile{

src/asset/scss/components/contentImageSlider.scss

@@ -0,0 +1,66 @@
+.contentImageSlider-wrapper {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+}
+
+.contentImageSlider-wrapper2 {
+  width: 80%;
+  position: relative;
+  display: flex;
+  justify-content: center;
+  overflow: hidden;
+}
+
+.contentImageSlider-images {
+  display: flex;
+  transition: transform 0.5s ease-in-out;
+}
+
+.contentImageSlider-image {
+  width: 100%;
+  height: 500px;
+  overflow: hidden;
+  object-fit: contain;
+  flex-shrink: 0;
+}
+
+.contentImageSlider-forward,
+.contentImageSlider-back {
+  position: absolute;
+  top: 50%;
+  width: 36px;
+  height: 36px;
+  opacity: 0.3;
+  z-index: 3;
+  cursor: pointer;
+}
+
+.contentImageSlider-forward {
+  right: 15px;
+}
+
+.contentImageSlider-back {
+  left: 15px;
+}
+
+.contentImageSlider-forward:hover,
+.contentImageSlider-back:hover {
+  opacity: 1;
+}
+
+@include mobile{
+  .contentImageSlider-wrapper2 {
+    width: 100%;
+  }
+  .contentImageSlider-image {
+    height: 300px;
+  }
+  .contentImageSlider-forward,
+.contentImageSlider-back {
+  width: 24px;
+  height: 24px;
+
+}
+
+}

src/asset/scss/index.scss

@@ -44,6 +44,7 @@
 @import 'components/directions';
 @import 'components/greeting';
 @import 'components/management';
+@import 'components/contentImageSlider';
 
 // Layout
 @import 'layout/header';
@@ -55,4 +56,6 @@
 @import 'pages/about';
 @import 'pages/main';
 @import 'pages/inquiry';
-@import 'pages/report';
+@import 'pages/report';
+@import 'pages/introduce';
+@import 'pages/content';

src/asset/scss/pages/content.scss

@@ -0,0 +1,62 @@
+/* Example CSS for the Content component */
+  .content-wrapper {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .content-wrapper-title {
+    margin: 70px 0;
+    font-size: 45px;
+    font-weight: bold;
+  }
+
+  .content-wrapper-information {
+    width: 40%;
+    height: 250px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .content-wrapper-information-title {
+    font-size: 30px;
+    font-weight: bold;
+    margin-bottom: 10px;
+  }
+
+  .content-wrapper-information-details {
+    display: flex;
+    flex-wrap: wrap;
+    border-top : 1px solid black;
+    border-bottom : 1px solid black;
+  }
+
+  .content-wrapper-information-content {
+    flex: 1 1 45%; /* Each li takes up 45% of the width, adjust as needed */
+    margin: 10px; /* Add some margin for spacing */
+    font-size:18px;
+  }
+
+  @include mobile{
+    .content-wrapper-title {
+      margin: 30px 0;
+      font-size: 25px;
+      font-weight: bold;
+    }
+    .content-wrapper-information-title {
+      font-size: 15px;
+      font-weight: bold;
+      margin-bottom: 10px;
+    }
+
+    .content-wrapper-information {
+      width: 60%;
+      height: 300px;
+    }
+
+    .content-wrapper-information-content {
+      font-size:13px;
+    }
+  }

src/asset/scss/pages/introduce.scss

@@ -0,0 +1,55 @@
+@include desktop{
+  .introduce-wrapper{
+    display : flex;
+    flex-direction: column;
+    align-items: center;
+    margin-bottom : 70px;
+  }
+
+  .introduce-title{
+    margin: 70px 0;
+    font-size: 45px;
+    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;
+
+  }
+
+  .introduce-content-title{
+    position: absolute;
+    left: 5px;
+    top: 5px;
+    font-size:20px;
+    color:white;
+    font-weight: bold;
+  }
+
+  .introduce-content-image{
+    width: 100%;
+    object-fit: cover;
+  }
+}

src/asset/scss/pages/report.scss

@@ -22,7 +22,7 @@
       align-items: center;
       overflow-y: scroll;
       overflow-x: hidden;
-      border: 1px solid black;
+      border: 1px solid rgb(105, 105, 105);
       ul{
         width: 100%;
         padding: 15px;

src/components/ContentImageSlider.js

@@ -0,0 +1,49 @@
+import React, { useState } from 'react';
+
+// images
+import Back from "../asset/icons/arrow_back.svg";
+import Forward from "../asset/icons/arrow_forward.svg";
+
+export default function ContentImageSlider({ images }) {
+  const [currentIndex, setCurrentIndex] = useState(0);
+
+  const handleNext = () => {
+    setCurrentIndex((prevIndex) => (prevIndex + 1) % images.length);
+  };
+
+  const handlePrev = () => {
+    setCurrentIndex((prevIndex) => (prevIndex - 1 + images.length) % images.length);
+  };
+
+  return (
+    <div className="contentImageSlider-wrapper">
+      <div className="contentImageSlider-wrapper2">
+        <img
+          className="contentImageSlider-forward"
+          src={Forward}
+          alt="forward"
+          onClick={handleNext}
+        />
+        <img
+          className="contentImageSlider-back"
+          src={Back}
+          alt="back"
+          onClick={handlePrev}
+        />
+        <div
+          className="contentImageSlider-images"
+          style={{ transform: `translateX(-${currentIndex * 100}%)` }}
+        >
+          {images.map((image, index) => (
+            <img
+              key={index}
+              src={image}
+              className="contentImageSlider-image"
+              alt={`Slide ${index}`}
+            />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/Header.js

@@ -26,7 +26,7 @@ function Header() {
 
   const clickMenuButton = (num) => {
     if (num === 0) navigate('/about?click=management');
-    else if (num === 1) navigate('/introduce');
+    else if (num === 1) navigate('/introduce?click=all');
     else if (num === 2) navigate('/report');
     else if (num === 3) navigate('/inquiry')
 
@@ -76,9 +76,9 @@ function Header() {
             </li>
           </ul>
           <ul>
-            <li>건축사업</li>
-            <li>리모델링사업</li>
-            <li>인테리어사업</li>
+            <li><Link to="introduce?click=architecture">건축사업</Link></li>
+            <li><Link to="introduce?click=remodeling">리모델링사업</Link></li>
+            <li><Link to="introduce?click=interior">인테리어사업</Link></li>
           </ul>
           <ul>
             <li><Link to="report">부동산보고서</Link></li>