Feat/responsive 1차

package.json

@@ -13,11 +13,14 @@
     "react-async": "^10.0.1",
     "react-bootstrap": "^2.7.0",
     "react-confetti": "^6.1.0",
+    "react-device-detect": "^2.2.3",
     "react-dom": "^18.2.0",
     "react-ga": "^3.3.1",
     "react-icons": "^4.7.1",
     "react-router-dom": "^6.8.0",
     "react-scripts": "5.0.1",
+    "react-slick": "^0.30.2",
+    "slick-carousel": "^1.8.1",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

src/App.css

@@ -35,4 +35,15 @@
   to {
     transform: rotate(360deg);
   }
+}
+
+.browserApp {
+  min-width: 1920px;
+}
+
+.mobileApp {
+  width: 100vw;
+
+  /* overflow-x: hidden; */
+  /* overflow-y:visible; */
 }

src/App.js

@@ -1,9 +1,11 @@
-import React, { useEffect } from "react";
+import React, { useState, useEffect } from "react";
 import "./App.css";
 import { Routes, Route, Navigate, useLocation } from "react-router-dom";
 import { useAsync } from "react-async";
 import "bootstrap/dist/css/bootstrap.min.css";
 
+import { Container, Row, Col } from "react-bootstrap";
+
 // layouts
 import MainLayout from "./components/Layouts/MainLayout";
 import ApplyBanner from "./components/Layouts/Banner";
@@ -14,47 +16,79 @@ import Main from "./pages/MainPage/Main";
 import Apply from "./pages/ApplyPage/Apply";
 import Introduce from "./pages/IntroducePage/Introduce";
 import { Login } from "./pages/LoginPage/Login";
-import ApplyGuide from "./pages/ApplyPage/components/Guide/ApplyGuide";
+import { ApplyGuide, Mobile_ApplyGuide } from "./pages/ApplyPage/components/Guide/ApplyGuide";
 import NotAllowApply from "pages/NotAllowPage/NotAllowApply";
 import { MiddleResult } from "pages/ResultPage/MiddleResult";
 import { FinalResult } from "pages/ResultPage/FinalResult";
 import NotFound from "pages/NotFound";
 
+//mobile pages
+import Introduce2 from "./mobile/IntroducePage/Introduce";
+import MiddleResult2 from "./mobile/ResultPage/ResultPage/MiddleResult";
+import FinalResult2 from "./mobile/ResultPage/ResultPage/FinalResult";
+
 // apis
 import { get_recruit_info } from "apis/get_recruit";
 
 // hooks
 import usePageTracking from "./hooks/ga_tracking";
 
-import ReactGA from "react-ga";
-
-const gaTrackingId = process.env.REACT_APP_GA_TRACKING_ID;
-ReactGA.initialize(gaTrackingId);
+import { isBrowser, isMobile } from "react-device-detect";
 
 const App = () => {
-  usePageTracking();
   return (
     <ScrollToTop>
+      <RenderContent />
+    </ScrollToTop>
+  );
+};
+
+const RenderContent = () => {
+  if (isBrowser) {
+    return (
+      <div className="browserApp">
+        <Routes>
+          <Route element={<MainLayout />} errorElement={<NotFound></NotFound>}>
+            <Route path="*" element={<Navigate to="/error" />} />
+            <Route path="/" element={<Main />} />
+            <Route path="/error" element={<NotFound />} />
+            <Route path="/introduce" element={<Introduce />} />
+            <Route path="/notallow" element={<NotAllowApply />} />
+            <Route path="/apply" element={<ApplyCheck />} />
+            {/* <Route path="/login" element={<LoginCheck />} /> */}
+            <Route path="/login" element={<Login />} />
+
+            {/* <Route element={<ApplyBanner />}> */}
+            <Route path="/middle" element={<MiddleResult />} />
+            <Route path="/final" element={<FinalResult />} />
+            {/* </Route> */}
+            <Route path="/applyGuide" element={<ApplyGuide />} />
+          </Route>
+        </Routes>
+      </div>
+    );
+  } else if (isMobile) {
+    return (
       <Routes>
         <Route element={<MainLayout />} errorElement={<NotFound></NotFound>}>
           <Route path="*" element={<Navigate to="/error" />} />
           <Route path="/" element={<Main />} />
           <Route path="/error" element={<NotFound />} />
-          <Route path="/introduce" element={<Introduce />} />
+          <Route path="/introduce" element={<Introduce2 />} />
           <Route path="/notallow" element={<NotAllowApply />} />
           <Route path="/apply" element={<ApplyCheck />} />
           {/* <Route path="/login" element={<LoginCheck />} /> */}
           <Route path="/login" element={<Login />} />
 
-          <Route element={<ApplyBanner />}>
-            <Route path="/middle" element={<MiddleResult />} />
-            <Route path="/final" element={<FinalResult />} />
-          </Route>
-          <Route path="/applyGuide" element={<ApplyGuide />} />
+          {/* <Route element={<ApplyBanner />}> */}
+          <Route path="/middle" element={<MiddleResult2 />} />
+          <Route path="/final" element={<FinalResult2 />} />
+          {/* </Route> */}
+          <Route path="/applyGuide" element={<Mobile_ApplyGuide />} />
         </Route>
       </Routes>
-    </ScrollToTop>
-  );
+    );
+  }
 };
 
 // ApplyPage 이동 권한 확인 후 이동

src/components/ApplyCard.js

@@ -10,7 +10,10 @@ const MainApplyCard = () => {
   return (
     <div className="MainApplyCard">
       <div className="MainApplyCardBox">
-        <img src={img} className="MainApplyCardImg" />
+        <img
+          src={"https://dev.cspc.me/media/main_apply_img.png"}
+          className="MainApplyCardImg"
+        />
         <div className="MainApplyCardLetterBox WhiteWord">
           2024 1학기 신입부원 모집
         </div>

src/components/ApplyProgress.js

@@ -32,7 +32,10 @@ const ApplyProgress = () => {
               </div>
             </div>
 
-            <img src={right_vector} className="right1"></img>
+            <img
+              src={"https://dev.cspc.me/media/applyguide_right_vector.png"}
+              className="right1"
+            ></img>
 
             <div className="secondCircle">
               <div className="circleTitle2">면접</div>
@@ -42,7 +45,10 @@ const ApplyProgress = () => {
               </div>
             </div>
 
-            <img src={right_vector} className="right2"></img>
+            <img
+              src={"https://dev.cspc.me/media/applyguide_right_vector.png"}
+              className="right2"
+            ></img>
 
             <div className="thirdCircle">
               <div className="circleTitle2">합류</div>
@@ -61,4 +67,57 @@ const ApplyProgress = () => {
     );
 };
 
-export default ApplyProgress;
+const Mobile_ApplyProgress = () => {
+  const { data, error, isLoading } = useAsync({ promiseFn: get_recruit_info });
+
+  const format = "m/d";
+
+  if (isLoading) return "Loading...";
+  if (error) return `Something went wrong: ${error.message}`;
+  if (data)
+    return (
+      <Container>
+        <Row style={{ marginTop: "5rem" }}>
+          <Col className="M_process">지원 절차</Col>
+        </Row>
+        <Row className="mt-3">
+          <Col className="M_guideLine"></Col>
+        </Row>
+
+        <Row className="mt-5 justify-content-center">
+          <Col className="M_FirstCircle col-4 mx-3">
+            <div className="M_CircleTitle1">서류</div>
+            <div className="M_CircleContent1">
+              {dateFormat(data.start_time, format)} ~{" "}
+              {dateFormat(data.document_deadline, format)}
+            </div>
+          </Col>
+
+          <Col className="M_FirstCircle col-4">
+            <div className="M_CircleTitle1">면접</div>
+            <div className="M_CircleContent1">
+              {dateFormat(data.interview_start_time, format)} ~{" "}
+              {dateFormat(data.interview_end_time, format)}
+            </div>
+          </Col>
+          <Col className="M_FirstCircle col-4 mx-3">
+            <div className="M_CircleTitle1">합류</div>
+            <div className="M_CircleContent1">
+              {dateFormat(data.announce_final_time, "m")}월 중 예정
+            </div>
+          </Col>
+        </Row>
+        <Row>
+          <Col className="mt-5 d-flex justify-content-center">
+            <Link to="/login">
+              <button className="M_ApplyButton">
+                <div className="M_ApplyLetter">지원하기</div>
+              </button>
+            </Link>
+          </Col>
+        </Row>
+      </Container>
+    );
+};
+
+export { ApplyProgress, Mobile_ApplyProgress };