Refactor: Pages폴더 css/style 및 assets 분리

src/App.js

@@ -1,26 +1,29 @@
 import React, { 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";
 
 // layouts
 import MainLayout from "./layouts/MainLayout";
 import ApplyBanner from "./layouts/applyBanner/ApplyBanner";
+import ScrollToTop from "layouts/ScrollToTop";
 
 // pages
 import Main from "./pages/main_page/Main";
 import Apply from "./pages/apply_page/Apply";
 import Introduce from "./pages/doing_page/Introduce";
-import { Login } from "./pages/login_page/Main";
+import { Login } from "./pages/login_page/Login";
 import ApplyGuide from "./pages/apply_page/applyGuide/ApplyGuide";
 import Not_allow_apply from "pages/Not_allow_page/Not_allow_apply";
 import { MiddleResult } from "pages/result_page/MiddleResult";
 import { FinalResult } from "pages/result_page/FinalResult";
-import ScrollToTop from "layouts/ScrollToTop";
 import NotFound from "pages/NotFound";
+
+// apis
 import { get_recruit_info } from "apis/get_recruit";
-import { useAsync } from "react-async";
 
+// hooks
 import usePageTracking from "./hooks/ga_tracking";
 
 import ReactGA from "react-ga";
@@ -37,9 +40,7 @@ const App = () => {
           <Route path="*" element={<Navigate to="/error" />} />
           <Route path="/" element={<Main />} />
           <Route path="/error" element={<NotFound />} />
-          {/* 추가된 부분 */}
           <Route path="/introduce" element={<Introduce />} />
-          {/* apply페이지 경로 -> <Login /> */}
           <Route path="/notallow" element={<Not_allow_apply />} />
           <Route path="/apply" element={<ApplyCheck />} />
           <Route path="/login" element={<Login />} />
@@ -55,6 +56,7 @@ const App = () => {
   );
 };
 
+// ApplyPage 이동 권한 확인 후 이동
 const ApplyCheck = () => {
   const { data, error, isLoading } = useAsync({ promiseFn: get_recruit_info });
 

src/pages/apply_page/Apply.js

@@ -8,7 +8,7 @@ import { post_resume, update_resume } from "../../apis/resume";
 import NotFound from "pages/NotFound";
 //// pages
 //Login
-import { Login } from "../login_page/Main";
+import { Login } from "../login_page/Login";
 // First Login
 import ApplyFirst from "./ApplyFirst/ApplyFirst";
 // Second Login
@@ -70,7 +70,7 @@ const Apply = () => {
           etc: "",
           interview_requirement: "",
         }
-      : data,
+      : data
   );
 
   const postContent = async () => {
@@ -102,7 +102,7 @@ const Apply = () => {
     }
     if (contents.interview_time_choice.length == 0) {
       alert(
-        "면접시간을 최소 하나 선택해주세요.\n가능하신 시간이 없으면 학회장에게 문의해주세요.",
+        "면접시간을 최소 하나 선택해주세요.\n가능하신 시간이 없으면 학회장에게 문의해주세요."
       );
       return false;
     }

src/pages/apply_page/ApplyFirst/AgreeAbove.css

@@ -37,14 +37,14 @@
 }
 
 .checked{
-    background: url('../Components/img/checkedButton.png');
+    background: url('../../../assets/images/apply/checkedButton.png');
     background-position: center;
     background-repeat: no-repeat;
     background-size: contain;
 }
 
 .unChecked{
-    background: url('../Components/img/unCheckedButton.png');
+    background: url('../../../assets/images/apply/unCheckedButton.png');
     background-position: center;
     background-repeat: no-repeat;
     background-size: contain;

src/pages/doing_page/Introduce_2/Introduce_2.js

@@ -1,9 +1,10 @@
 import React from "react";
 import "../Introduce.css";
 import "./Introduce_2.css";
-import bookmark from "../../doing_page/img/bookmark.png";
-import desktop from "../../doing_page/img/desktop.png";
-import mapPin from "../../doing_page/img/map-pin.png";
+
+import bookmark from "../../../assets/images/doing/bookmark.png";
+import desktop from "../../../assets/images/doing/desktop.png";
+import mapPin from "../../../assets/images/doing/map-pin.png";
 
 const Introduce_2 = () => {
   return (

src/pages/doing_page/Introduce_3/Introduce_3.js

@@ -2,10 +2,6 @@ import React from "react";
 import "../Introduce.css";
 import "./Introduce_3.css";
 import { Container, Row } from "react-bootstrap";
-import imgPicnic from "../../doing_page/img/picnic.png";
-import imgHaek from "../../doing_page/img/haek.png";
-import imgMt from "../../doing_page/img/mt.png";
-import imgParty from "../../doing_page/img/party.png";
 
 const Introduce_3 = () => {
   return (

src/pages/doing_page/Introduce_4/Introduce_4.js

@@ -1,14 +1,16 @@
 import React from "react";
 import "../Introduce.css";
 import "./Introduce_4.css";
-import imgPicnic from "../../doing_page/img/picnic.png";
-import imgHaek from "../../doing_page/img/haek.png";
-import imgMt from "../../doing_page/img/mt.png";
-import imgDiscord from "../../doing_page/img/dic.png";
-import imgParty from "../../doing_page/img/party.png";
-import imgSemina from "../../doing_page/img/semina.jpg";
-import imgFoood from "../../doing_page/img/foood.jpg";
-import imgLogo from "../../doing_page/img/cspcLogo.png";
+
+// images
+import imgPicnic from "../../../assets/images/doing/picnic.png";
+import imgHaek from "../../../assets/images/doing/haek.png";
+import imgMt from "../../../assets/images/doing/mt.png";
+import imgParty from "../../../assets/images/doing/party.png";
+import imgSemina from "../../../assets/images/doing/semina.jpg";
+import imgFoood from "../../../assets/images/doing/food.jpg";
+import imgLogo from "../../../assets/images/doing/cspcLogo.png";
+
 import { Container, Row, Col } from "react-bootstrap";
 
 const Introduce_4 = () => {

src/pages/doing_page/Introduce_5/Introduce_5.js

@@ -1,5 +1,5 @@
 import React from "react";
-import MainApplyCard from "../../main_page/MainApplyCard";
+import MainApplyCard from "../../main_page/ApplyCardMain/MainApplyCard";
 import "../Introduce.css";
 import "./Introduce_5.css";
 

src/pages/login_page/Main.js → src/pages/login_page/Login.js

@@ -1,7 +1,7 @@
 import { LoginForm } from "./components/LoginForm";
 import RecruitProcess from "./components/RecruitProcess";
 import { useAsync } from "react-async";
-import { get_recruit_info } from "./../../apis/get_recruit";
+import { get_recruit_info } from "../../apis/get_recruit";
 import Not_allow_apply from "pages/Not_allow_page/Not_allow_apply";
 export const Login = () => {
   const { data, error, isLoading } = useAsync({ promiseFn: get_recruit_info });

src/pages/main_page/ApplyCardMain/MainApplyCard.css

@@ -0,0 +1,38 @@
+.MainApplyCard {
+    position: relative;
+
+    text-align: center;
+    font-style: normal;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.MainApplyCardBox {
+    position: relative;
+
+    width: 1320px;
+    height: 420px;
+}
+
+.MainApplyCardImg {
+    width: 1300px;
+    height: 258px;
+
+    border-radius: 15px;
+}
+
+.MainApplyCardLetterBox {
+    position: absolute;
+
+    top: 70px;
+    left: 69px;
+
+    font-size: 30px;
+    font-weight: bold;
+}
+
+.WhiteWord {
+    color: #ffffff;
+}

src/pages/main_page/ApplyCardMain/MainApplyCard.js

@@ -0,0 +1,23 @@
+import React from "react";
+
+import img from "../../../assets/images/main/main_apply_img.png";
+
+import GoToApply from "../components/GoToApply";
+
+import "./MainApplyCard.css";
+
+const MainApplyCard = () => {
+  return (
+    <div className="MainApplyCard">
+      <div className="MainApplyCardBox">
+        <img src={img} className="MainApplyCardImg" />
+        <div className="MainApplyCardLetterBox WhiteWord">
+          2024 1학기 신입부원 모집
+        </div>
+        <GoToApply top="169px" left="1042px" />
+      </div>
+    </div>
+  );
+};
+
+export default MainApplyCard;

src/pages/main_page/ImgMain/ImgMain.css

@@ -0,0 +1,136 @@
+.ImgMain {
+    position: relative;
+
+    /* font-family: 'IBMPlexSans-Regular'; */
+    text-align: center;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+}
+
+.ImgMainBox {
+    position: relative;
+
+    width: 1920px;
+    height: 1005px;
+
+    display: flex;
+
+    justify-content: center;
+}
+
+.ImgMainStyle {
+    position: absolute;
+
+    width: 1920px;
+    height: 1005px;
+}
+
+.ImgMainBlackBackgroundStyle {
+    /* position: "relative"; */
+
+    width: 1920px;
+    height: 1005px;
+
+    background: black;
+}
+
+.ImgMainGrayFilterStyle {
+    position: absolute;
+
+    width: 1920px;
+    height: 1005px;
+    /* height: 100%; */
+
+    display: flex;
+    justify-content: center;
+
+    /* background: rgba(100, 10, 200, 0.6); */
+    background: rgba(0, 0, 0, 0.6);
+}
+
+
+.ImgMainLetterBox_1 {
+    position: absolute;
+
+    font-size: 24px;
+    font-weight: bold;
+
+    top: 805px;
+}
+
+.ImgMainLetterBox_2 {
+    position: relative;
+    text-align: left;
+
+    font-weight: bold;
+
+    top: 444px;
+    left: 310px;
+
+    /* width: 466px; */
+    width: 480px;
+    height: 135px;
+}
+
+.ImgMainLetterBox_2_1{
+    display: inline-block;
+}
+
+.ImgMainLetterBox_3 {
+    position: absolute;
+
+    width: 1300px;
+    height: 80px;
+
+    text-align: left;
+
+    justify-content: space-between;
+    display: flex;
+
+    top: 721px;
+}
+
+.ImgMainLetterBox_3_1 {
+    position: relative;
+
+    /* width: 341px; */
+    width: 370px;
+
+    display: inline-block;
+    justify-content: left;
+}
+
+.WhiteWord {
+    color: #ffffff;
+}
+
+.BlueWord {
+    color: #55A9BE;
+}
+
+.ImgMain_1_Title {
+    font-weight: 700;
+    font-size: 24px;
+    line-height: 150%; 
+}
+
+.ImgMain_2_Title {
+    font-weight: 700;
+    font-size: 30px;
+    line-height: 150%;
+}
+
+.ImgMain_3_Title {
+    font-weight: 700;
+    font-size: 30px;
+    line-height: 150%;
+}
+
+.ImgMain_3_Content {
+    font-weight: 400;
+    font-size: 20px;
+    line-height: 150%;
+}

src/pages/main_page/ImgMain/ImgMain.js

@@ -4,12 +4,11 @@ import ImgMain_1 from "./ImgMain_1";
 import ImgMain_2 from "./ImgMain_2";
 import ImgMain_3 from "./ImgMain_3";
 
-// styles
-import "../Main.css";
+import "./ImgMain.css";
 
 const ImgMain = () => {
   return (
-    <div>
+    <div className="ImgMain">
       <ImgMain_1 />
       <ImgMain_2 />
       <ImgMain_3 />