사용자 페이지 리팩토링

package.json

@@ -11,11 +11,13 @@
     "axios": "^1.3.5",
     "react": "^18.2.0",
     "react-bootstrap": "^2.7.2",
+    "react-daum-postcode": "^3.1.1",
     "react-dom": "^18.2.0",
     "react-router": "^6.10.0",
     "react-router-dom": "^6.10.0",
     "react-scripts": "5.0.1",
     "reactstrap": "^9.1.8",
+    "three": "^0.152.2",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

src/App.js

@@ -4,26 +4,40 @@ import './App.css';
 
 import LoginPage from "./page/login/LoginPage"
 import RegisterPage from "./page/login/Register";
-import LoginPage2 from "./page/login/LoginPage2"
-
+import LoginPage2 from "./page/login/LoginPage2";
+import FindAddress from "./page/login/FindAddress";
+import CheckDupId from "./page/login/CheckDupId";
 
 import DataManage from "./page/manager/DataManage";
 import OrderManage from "./page/manager/OrderManage";
-import MainPageLayout from "./page/MainPageLayout"
+import MainPageLayout from "./page/MainPageLayout";
+import Upload from "./page/manager/Upload";
+import LoadResultManage from "./page/manager/LoadResultManage";
+import SetPallet from "./page/manager/SetPallet";
+import MainPageLayoutForUser from "./page/MainPageLayoutForUser";
+import GoodsRegister from "./page/user/GoodsRegister";
 
 function App() {
     return (
         <BrowserRouter>
             <Routes>
                 <Route path="/account" element={<LoginPage/>}/>
                 <Route path="/account/Login" element={<LoginPage2/>}/>
-
                 <Route path="/account/Register" element={<RegisterPage/>}/>
 
                 <Route exact path="/" element={<MainPageLayout/>}>
                     <Route path="/data-manage" element={<DataManage/>}/>
                     <Route path="/order-manage" element={<OrderManage/>}/>
+                    <Route path="/load-result-manage" element={<LoadResultManage/>}/>
+                </Route>
+                <Route exact path="/user" element={<MainPageLayoutForUser/>}>
+                    <Route path="/user/goods-register" element={<GoodsRegister/>}/>
                 </Route>
+                <Route path="/SetPallet" element={<SetPallet/>}/>
+                <Route path="/SetPallet" element={<SetPallet/>}/>
+                <Route path="/upload" element={<Upload />}/>
+                <Route path="/account/Register/address" element={<FindAddress />}/>
+                <Route path="/account/Register/checkDup" element={<CheckDupId />}/>
             </Routes>
         </BrowserRouter>
     );

src/component/CheckDupId.module.css

@@ -0,0 +1,19 @@
+.h1 {
+    text-align: center;
+    margin-top: 100px;
+}
+.page_wrapper {
+    background-color: #abcdef;
+    border: 5px solid #abcdef;
+    border-radius:10px;
+    width: 600px;
+    height: 100px;
+    margin-top: 70px;
+    margin-left: 130px;
+}
+.check_form {
+    margin-top: 30px;
+    margin-left:110px;
+    width : 500px;
+    display:flex;
+}

src/component/LoginPage.module.css

@@ -16,15 +16,9 @@
 }
 span {
     font-size:18px;
-    margin-right:25px;
+    /*margin-right:25px;*/
 
 }
-span:hover {
-    color: black;
-}
-
-
-
 
 .page_middle {
     height:600px;
@@ -75,11 +69,9 @@ h2 {
     color : black;
 }
 
-
-
-
 .page_footer {
     height:190px;
     background: #b0b0b0;
     text-align : center;
-}
+}
+

src/component/LoginPage2.module.css

@@ -16,14 +16,8 @@
 }
 span {
     font-size:18px;
-    margin-right:25px;
+    /*margin-right:25px;*/
 }
-span:hover {
-    color: black;
-}
-
-
-
 
 .page_middle {
     height:600px;
@@ -58,13 +52,8 @@ span:hover {
     font-size : 20px;
 }
 
-
-
-
-
-
 .page_footer {
     height:190px;
     background: #b0b0b0;
     text-align : center;
-}
+}

src/component/LoginPageHeader.js

@@ -0,0 +1,35 @@
+import styles from "./LoginPageHeader.module.css";
+import {useNavigate} from "react-router-dom";
+
+
+const LoginPageHeader = (props) => {
+    const navigate = useNavigate();
+
+    const goRegisterPage = () => {
+        navigate('/account/Register');
+    }
+    const goLoginPage = () => {
+        navigate('/account/Login');
+    }
+    const goAccountPage = () => {
+        navigate('/account');
+    }
+    const goMainPage = () => {
+        navigate('/');
+    }
+    return(
+        <header className={styles.page_header}>
+            <h1 onClick={goAccountPage}>Everything Of Container</h1>
+            <nav className={styles.login_navigation}>
+                <span className={styles.login_menu} onClick={goMainPage}>메인페이지</span>
+                <span className={styles.login_menu_tab}> | </span>
+                <span className={styles.login_menu} onClick={goLoginPage}>로그인</span>
+                <span className={styles.login_menu_tab}> | </span>
+                <span className={styles.login_menu} onClick={goRegisterPage}>회원가입</span>
+            </nav>
+        </header>
+
+    )
+}
+
+export default LoginPageHeader;

src/component/LoginPageHeader.module.css

@@ -0,0 +1,30 @@
+.h1:hover {
+    cursor : pointer;
+}
+
+.login_menu_tab {
+    margin-left : 25px;
+    margin-right : 25px;
+}
+
+.login_menu:hover {
+    color : black;
+    cursor : pointer;
+}
+
+.login_navigation {
+    margin-right : 30px;
+}
+
+.page_header {
+    height:75px;
+    padding:1rem;
+    color:white;
+    background: #7F7FD5;
+    background: -webkit-linear-gradient(to right, #91EAE4, #86A8E7, #7F7FD5);
+    background: linear-gradient(to right, #91EAE4, #86A8E7, #7F7FD5);
+    font-weight:bold;
+    display:flex;
+    justify-content:space-between;
+    align-items:center;
+}

src/component/Message.js

@@ -1,7 +1,7 @@
 const Message = (props) => {
     return(
         <div>
-            <p>메세지가 들어갈 부분입니다.</p>
+            <p>Everything of Container</p>
         </div>
     )
 }