feat: Main페이지 컨텐츠 수정

src/asset/scss/components/management.scss

@@ -41,8 +41,8 @@
               display: flex;
               justify-content: center;
               align-items: center;
-              width: 125px;
-              height: 125px;
+              width: 180px;
+              height: 180px;
               object-fit: cover;
             }
 

src/asset/scss/components/siteActivityComponent.scss

@@ -17,19 +17,21 @@
 
         .main-info{
           font-size:60px;
-          font-weight: bold;
+          font-weight: 300;
           color: white;
+          margin-bottom: 5px;
         }
         .main-info-unit{
           color: white;
           font-size:30px;
-          font-weight: bold;
+          font-weight: 10;
+          margin-bottom: 10px;
         }
 
         .main-info-unit-writes{
           color: white;
           font-size:15px;
-          font-weight: bold;
+          font-weight: 10;
         }
       }
 
@@ -47,7 +49,6 @@
     height: 80px;
     box-sizing: border-box;
     margin : 5px 0;
-
     .siteActivityComponent-inner{
       display: flex;
 
@@ -56,16 +57,19 @@
 
         .main-info{
           font-size:25px;
-          font-weight: bold;
+          font-weight: 300;
+          margin-bottom: 0.5px;
         }
         .main-info-unit{
           font-size:15px;
-          font-weight: bold;
+          font-weight: 10;
+          margin-bottom: 1px;
         }
 
         .main-info-unit-writes{
-          font-size:15px;
-          font-weight: bold;
+          font-size:10px;
+          font-weight: 10;
+
         }
       }
 

src/asset/scss/pages/main.scss

@@ -49,7 +49,7 @@
       .second-section-writes{
         font-size:20px;
         font-weight: bold;
-        // margin-top:10px;
+        margin-top:20px;
       }
       .siteActivityComponent-wrap{
         display: flex;
@@ -91,6 +91,7 @@
       .second-section-title{
         font-size:30px;
         font-weight: bold;
+        margin-bottom: 10px;
       }
       .second-section-writes{
         font-size:20px;

src/components/SiteActivityComponent.js

@@ -1,8 +1,13 @@
 import React, { useState, useEffect, useRef } from 'react';
 
-import MoneyIcon from '@mui/icons-material/Money';
-import WorkHistoryIcon from '@mui/icons-material/WorkHistory';
-import HomeWorkIcon from '@mui/icons-material/HomeWork';
+import History from "../asset/images/history.png";
+import Project from "../asset/images/project.png";
+import Area from "../asset/images/area.png";
+
+
+import HistoryBlack from "../asset/images/history_black.png";
+import ProjectBlack from "../asset/images/project_black.png";
+import AreaBlack from "../asset/images/area_black.png";
 
 
 
@@ -36,7 +41,7 @@ function SiteActivityComponent(props) {
   useEffect(() => {
     if (isVisible) {
       const start = performance.now(); // 현재 시간을 기록
-      const duration = 3000; // 애니메이션 지속 시간 (1.5초)
+      const duration = 1000; // 애니메이션 지속 시간 (1.5초)
 
       const updateCount = (timestamp) => { // timestamp : requestAnimationFrame 시작시간
         const elapsed = timestamp - start;
@@ -72,9 +77,10 @@ function SiteActivityComponent(props) {
           {props.id === "totalTurnover" && <div className="main-info-unit-writes">Write some words</div>}
           {props.id === "career" && <div className="main-info-unit-writes">Write some words</div>}
         </div>
-        {props.id === "projects" && <HomeWorkIcon sx={{ fontSize: 70, color: "white" }} />}
-        {props.id === "totalTurnover" && <MoneyIcon sx={{ fontSize: 70, color: "white" }} />}
-        {props.id === "career" && <WorkHistoryIcon sx={{ fontSize: 70, color: "white" }} />}
+        {/*props.id === "projects" && <HomeWorkIcon sx={{ fontSize: 70, color: "white" }} />*/}
+        {props.id === "projects" && <img src={Project} alt="history" style={{ width: 70, height: 70 }} />}
+        {props.id === "totalTurnover" && <img src={Area} alt="history" style={{ width: 70, height: 70 }} />}
+        {props.id === "career" && <img src={History} alt="history" style={{ width: 70, height: 70 }} />}
 
       </div>
     </div>
@@ -110,7 +116,7 @@ function MobileSiteActivityComponent(props) {
   useEffect(() => {
     if (isVisible) {
       const start = performance.now(); // 현재 시간을 기록
-      const duration = 3000; // 애니메이션 지속 시간 (1.5초)
+      const duration = 1000; // 애니메이션 지속 시간 (1.5초)
 
       const updateCount = (timestamp) => { // timestamp : requestAnimationFrame 시작시간
         const elapsed = timestamp - start;
@@ -145,9 +151,10 @@ function MobileSiteActivityComponent(props) {
           {props.id === "totalTurnover" && <div className="main-info-unit-writes">Write some words</div>}
           {props.id === "career" && <div className="main-info-unit-writes">Write some words</div>}
         </div>
-        {props.id === "projects" && <HomeWorkIcon sx={{ fontSize: 50 }} />}
-        {props.id === "totalTurnover" && <MoneyIcon sx={{ fontSize: 50 }} />}
-        {props.id === "career" && <WorkHistoryIcon sx={{ fontSize: 50 }} />}
+        {props.id === "projects" && <img src={ProjectBlack} alt="history" style={{ width: 40, height: 40, color: 'black' }} />}
+        {props.id === "totalTurnover" && <img src={AreaBlack} alt="history" style={{ width: 40, height: 40 }} />}
+        {props.id === "career" && <img src={HistoryBlack} alt="history" style={{ width: 40, height: 40 }} />}
+
 
       </div>
     </div>

src/data/string.js

@@ -1,3 +1,8 @@
+// section 2
+export const section2title = "About Drim";
+export const section2Content = "드림은 건축의 완벽함을 추구하며 꾸준히 성장합니다.";
+
+
 // section 3
 export const section3title = "Build Your Dream With Drim";
 export const section3Content = `우리는 건물을 지어내는 일에 그치지 않고, 따뜻하고 친근한 공간을 창조하고자 합니다.

src/pages/Main.js

@@ -1,5 +1,7 @@
 import React, { useRef, useState, useEffect } from "react";
 
+import { section2title, section2Content } from '../data/string'
+
 // component
 import { Slide, MobileSlide } from "../components/Slide";
 import { SiteActivityComponent, MobileSiteActivityComponent } from "../components/SiteActivityComponent";
@@ -67,8 +69,8 @@ function Main() {
       <Slide ref={el => elements.current[0] = el} />
       <section className="second-section" ref={el => elements.current[1] = el}>
         <div className="second-section-wrap">
-          <div className="second-section-title">About us</div>
-          <div className="second-section-writes">Helping our customers create a better world</div>
+          <div className="second-section-title">{section2title}</div>
+          <div className="second-section-writes">{section2Content}</div>
           <div className="siteActivityComponent-wrap">
             <SiteActivityComponent id="projects" count={12} />
             <SiteActivityComponent id="totalTurnover" count={23} />
@@ -92,7 +94,7 @@ function MobileMain() {
       <MobileSlide />
       <section className="second-section">
         <div className="second-section-wrap">
-          <div className="second-section-title">About us</div>
+          <div className="second-section-title">{section2title}</div>
           <div className="siteActivityComponent-wrap">
             <MobileSiteActivityComponent id="projects" count={12} />
             <MobileSiteActivityComponent id="totalTurnover" count={23} />