#1 GeonhaPark | router setting change

knupi-project · Jan 21, 2023 · cac1c94 · cac1c94
1 parent 75f2395
commit cac1c94
Show file tree

Hide file tree

Showing 26 changed files with 127 additions and 126 deletions.
diff --git a/src/components/App.js → src/App.js b/src/components/App.js → src/App.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import { useState, useEffect } from 'react';
-import AppRouter from 'Router';
+import AppRouter from 'routes/Router';
 import Loader from 'components/UI/Loader';
 import { useSelector } from 'react-redux';
 

diff --git a/src/components/Navigation.js b/src/components/Navigation.js
@@ -76,7 +76,7 @@ const Navigation = () => {
           Reservation
         </Link>
         {!loginUser ? (
-          <Link to="/signin" className="nav__usermenu nav__link">
+          <Link to="/auth/signin" className="nav__usermenu nav__link">
             <img
               className="user-login-icon"
               src={process.env.PUBLIC_URL + '/img/user-icon.png'}

diff --git a/src/index.js b/src/index.js
@@ -2,7 +2,7 @@ import React from 'react';
 import ReactDOM from 'react-dom/client';
 import store from 'util/reducer/store';
 import { Provider } from 'react-redux';
-import App from './components/App';
+import App from './App';
 
 import 'stylesheet/App.scss';
 import 'stylesheet/Profile.scss';

diff --git a/src/layouts/auth/Auth.js b/src/layouts/auth/Auth.js
@@ -0,0 +1,26 @@
+import React from 'react';
+import BackButton from 'components/UI/BackButton';
+import { Link } from 'react-router-dom';
+import { Outlet } from 'react-router-dom';
+
+const Auth = () => {
+  return (
+    <div className="sign">
+      <BackButton />
+      <div className="sign-loginbox">
+        <Link to="/">
+          <img
+            src={process.env.PUBLIC_URL + '/img/logo1.png'}
+            width="236"
+            height="82"
+            alt="logo-signsin-title"
+            style={{ marginBottom: '83px' }}
+          />
+        </Link>
+        <Outlet/>
+      </div>
+    </div>
+  );
+};
+
+export default Auth;
diff --git a/src/routes/Layout.js → src/layouts/main/Layout.js b/src/routes/Layout.js → src/layouts/main/Layout.js
diff --git a/src/routes/Profile.js → src/layouts/profile/Profile.js b/src/routes/Profile.js → src/layouts/profile/Profile.js
diff --git a/src/Router.js → src/routes/Router.js b/src/Router.js → src/routes/Router.js
@@ -6,25 +6,27 @@ import {
   Navigate,
   RouterProvider,
 } from 'react-router-dom';
-import Layout from 'routes/Layout';
-import Home from './routes/Home';
-import SignIn from './routes/SignIn';
-import SignUp from './routes/SignUp';
-import Reserve from 'routes/Reserve';
-import ReservePage from 'routes/ReservePage';
-import ReserveCheck from 'routes/ReserveCheck';
-import ReserveComplete from 'routes/ReserveComplete';
-import Profile from 'routes/Profile';
-import UserInfo from 'routes/UserInfo';
-import UserReserve from 'routes/UserReserve';
-import About from 'routes/About';
-import Contact from 'routes/Contact';
-import Error from './components/Error';
+import Layout from 'layouts/main/Layout';
+import Home from '../views/main/Home';
+import SignIn from '../views/auth/SignIn';
+import SignUp from '../views/auth/SignUp';
+import Reserve from 'views/main/reservation/Reservation';
+import ReservePage from 'views/reserve_page/ReservePage';
+import ReserveCheck from 'views/reserve_page/ReserveCheck';
+import ReserveComplete from 'views/reserve_page/ReserveComplete';
+import Profile from 'layouts/profile/Profile';
+import UserInfo from 'views/profile/UserInfo';
+import UserReserve from 'views/profile/UserReserveInfo';
+import About from 'views/main/About';
+import Contact from 'views/main/Contact';
+import Error from '../components/Error';
+import Auth from 'layouts/auth/Auth';
 
 const AppRouter = () => {
   const router = createBrowserRouter(
     createRoutesFromElements(
       <Route path="/" errorElement={<Error />}>
+        <Route path="/" element={<Navigate to="/app/home" />}></Route>
         <Route path="/app" element={<Layout />}>
           <Route path="/app/home" element={<Home />}></Route>
           <Route path="/app/reserve" element={<Reserve />}></Route>
@@ -41,9 +43,10 @@ const AppRouter = () => {
             <Route path="/app/profile/:id/reserve" element={<UserReserve />} />
           </Route>
         </Route>
-        <Route path="/" element={<Navigate to="/app/home" />}></Route>
-        <Route path="/signin" element={<SignIn />} />
-        <Route path="/signup" element={<SignUp />} />
+        <Route path="/auth" element={<Auth />}>
+          <Route path="/auth/signin" element={<SignIn />} />
+          <Route path="/auth/signup" element={<SignUp />} />
+        </Route>
       </Route>
     )
   );

diff --git a/src/routes/SignIn.js → src/views/auth/SignIn.js b/src/routes/SignIn.js → src/views/auth/SignIn.js
@@ -12,8 +12,7 @@ import { db, auth } from 'util/firebaseConfig';
 import { Link, useNavigate } from 'react-router-dom';
 import { useDispatch } from 'react-redux';
 import { setLogIn } from 'util/reducer/loginSlice';
-import SignInButton from 'components/Sign/SignInButton';
-import BackButton from 'components/UI/BackButton';
+import SignInButton from 'views/auth/components/SignInButton';
 
 setPersistence(auth, browserSessionPersistence); // 세션 유지 시 로그인 유지
 const provider = new GoogleAuthProvider(); // 구글 로그인 공급자 생성
@@ -44,39 +43,27 @@ const SignIn = () => {
   };
 
   return (
-    <div className="sign">
-      <BackButton />
-      <div className="sign-loginbox">
-        <Link to="/">
-          <img
-            src={process.env.PUBLIC_URL + '/img/logo1.png'}
-            width="236"
-            height="82"
-            alt="logo-signsin-title"
-            style={{ marginBottom: '83px' }}
-          />
+    <>
+      <div className="sign-loginbox-title">로그인</div>
+      <SignInButton
+        platform="구글"
+        imgSrc={process.env.PUBLIC_URL + '/img/google24.png'}
+        onClick={authHandler}
+      />
+      <div className="rq-msg">
+        <span style={{ marginRight: '3px' }}>아직 계정이 없으신가요 ?</span>
+        <Link to="/auth/signup">
+          <span style={{ color: 'black', fontWeight: 'bold' }}>회원가입</span>
         </Link>
-        <div className="sign-loginbox-title">로그인</div>
-        <SignInButton
-          platform="구글"
-          imgSrc={process.env.PUBLIC_URL + '/img/google24.png'}
-          onClick={authHandler}
-        />
-        <div className="rq-msg">
-          <span style={{ marginRight: '3px' }}>아직 계정이 없으신가요 ?</span>
-          <Link to="/signup">
-            <span style={{ color: 'black', fontWeight: 'bold' }}>회원가입</span>
-          </Link>
-        </div>
-        {authError && (
-          <div className="cf-msg">
-            로그인 중에 문제가 발생했습니다.
-            <br />
-            메세지 : {authError}
-          </div>
-        )}
       </div>
-    </div>
+      {authError && (
+        <div className="cf-msg">
+          로그인 중에 문제가 발생했습니다.
+          <br />
+          메세지 : {authError}
+        </div>
+      )}
+    </>
   );
 };
 

diff --git a/src/routes/SignUp.js → src/views/auth/SignUp.js b/src/routes/SignUp.js → src/views/auth/SignUp.js
@@ -11,11 +11,10 @@ import {
 import { doc, getDoc, setDoc, serverTimestamp } from 'firebase/firestore';
 import { db, auth } from 'util/firebaseConfig';
 import { useDispatch } from 'react-redux';
-import SignUpButton from 'components/Sign/SignUpButton';
-import UserInfoForm from 'components/Sign/UserInfoForm';
-import FormBtn from 'components/Sign/FormBtn';
-import FormInput from 'components/Sign/FormInput';
-import BackButton from 'components/UI/BackButton';
+import SignUpButton from 'views/auth/components/SignUpButton';
+import UserInfoForm from 'views/auth/components/UserInfoForm';
+import FormBtn from 'views/auth/components/FormBtn';
+import FormInput from 'views/auth/components/FormInput';
 
 setPersistence(auth, browserSessionPersistence); // 세션 유지 시 로그인 유지
 const provider = new GoogleAuthProvider(); // 구글 로그인 공급자 생성
@@ -84,73 +83,57 @@ const SignUp = () => {
   }, [isSignUpSuccess]);
 
   return (
-    <div className="sign">
-      <BackButton />
-      <div className="sign-loginbox">
-        <Link to="/">
-          <img
-            src={process.env.PUBLIC_URL + '/img/logo1.png'}
-            width="236"
-            height="82"
-            alt="logo-signsin-title"
-            style={{ marginBottom: '83px' }}
+    <>
+      {!isSignUpSuccess ? (
+        <>
+          <div className="sign-loginbox-title">회원가입</div>
+          <SignUpButton
+            platform="구글"
+            imgSrc={process.env.PUBLIC_URL + '/img/google24.png'}
+            onClick={authHandler}
           />
-        </Link>
-        {!isSignUpSuccess ? (
-          <>
-            <div className="sign-loginbox-title">회원가입</div>
-            <SignUpButton
-              platform="구글"
-              imgSrc={process.env.PUBLIC_URL + '/img/google24.png'}
-              onClick={authHandler}
+          <div className="rq-msg">
+            <span style={{ marginRight: '3px' }}>이미 계정이 있으신가요 ?</span>
+            <Link to="/auth/signin">
+              <span style={{ color: 'black', fontWeight: 'bold' }}>로그인</span>
+            </Link>
+          </div>
+        </>
+      ) : (
+        <>
+          <UserInfoForm onSubmit={formSubmitHandler} platform="구글">
+            <FormInput
+              type="text"
+              title="이름"
+              placeholder="이름을 입력하세요"
+              onChange={nickChangeHandler}
             />
-            <div className="rq-msg">
-              <span style={{ marginRight: '3px' }}>
-                이미 계정이 있으신가요 ?
-              </span>
-              <Link to="/signin">
-                <span style={{ color: 'black', fontWeight: 'bold' }}>
-                  로그인
-                </span>
-              </Link>
+            <FormBtn title="회원가입" />
+            <div
+              style={{
+                display: 'flex',
+                flexDirection: 'column',
+                width: '320px',
+                textAlign: 'left',
+                justifyContent: 'flex-start',
+                alignContent: 'flex-start',
+                alignItems: 'flex-start',
+              }}
+            >
+              회원가입을 누르면 첫 화면으로 이동합니다.
+              <br /> 다시 로그인해주세요.
             </div>
-          </>
-        ) : (
-          <>
-            <UserInfoForm onSubmit={formSubmitHandler} platform="구글">
-              <FormInput
-                type="text"
-                title="이름"
-                placeholder="이름을 입력하세요"
-                onChange={nickChangeHandler}
-              />
-              <FormBtn title="회원가입" />
-              <div
-                style={{
-                  display: 'flex',
-                  flexDirection: 'column',
-                  width: '320px',
-                  textAlign: 'left',
-                  justifyContent: 'flex-start',
-                  alignContent: 'flex-start',
-                  alignItems: 'flex-start',
-                }}
-              >
-                회원가입을 누르면 첫 화면으로 이동합니다.
-                <br /> 다시 로그인해주세요.
-              </div>
-            </UserInfoForm>
-          </>
-        )}
-        {authError && (
-          <div className="cf-msg">
-            회원가입에 실패했습니다.
-            <br />
-            메세지 : {authError}
-          </div>
-        )}
-      </div>
-    </div>
+          </UserInfoForm>
+        </>
+      )}
+      {authError && (
+        <div className="cf-msg">
+          회원가입에 실패했습니다.
+          <br />
+          메세지 : {authError}
+        </div>
+      )}
+    </>
   );
 };
 

diff --git a/src/components/Sign/FormBtn.js → src/views/auth/components/FormBtn.js b/src/components/Sign/FormBtn.js → src/views/auth/components/FormBtn.js
diff --git a/src/components/Sign/FormInput.js → src/views/auth/components/FormInput.js b/src/components/Sign/FormInput.js → src/views/auth/components/FormInput.js
diff --git a/src/components/Sign/SignInButton.js → src/views/auth/components/SignInButton.js b/src/components/Sign/SignInButton.js → src/views/auth/components/SignInButton.js
diff --git a/src/components/Sign/SignUpButton.js → src/views/auth/components/SignUpButton.js b/src/components/Sign/SignUpButton.js → src/views/auth/components/SignUpButton.js
diff --git a/src/components/Sign/UserInfoForm.js → src/views/auth/components/UserInfoForm.js b/src/components/Sign/UserInfoForm.js → src/views/auth/components/UserInfoForm.js
diff --git a/src/routes/About.js → src/views/main/About.js b/src/routes/About.js → src/views/main/About.js
diff --git a/src/routes/Contact.js → src/views/main/Contact.js b/src/routes/Contact.js → src/views/main/Contact.js
diff --git a/src/routes/Home.js → src/views/main/Home.js b/src/routes/Home.js → src/views/main/Home.js
diff --git a/src/routes/Reserve.js → src/views/main/reservation/Reservation.js b/src/routes/Reserve.js → src/views/main/reservation/Reservation.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import { useState } from 'react';
-import ReserveExec from 'components/Reserve/ReserveExec';
-import ReserveStatus from 'components/Reserve/ReserveStatus';
+import ReserveExec from 'views/main/reservation/components/ReservationExec';
+import ReserveStatus from 'views/main/reservation/components/ReservationStatus';
 // import { Link } from 'react-router-dom';
 
 const Reserve = () => {

diff --git a/src/components/Reserve/ReserveExec.js → ...reservation/components/ReservationExec.js b/src/components/Reserve/ReserveExec.js → ...reservation/components/ReservationExec.js
diff --git a/src/components/Reserve/ReserveStatus.js → ...servation/components/ReservationStatus.js b/src/components/Reserve/ReserveStatus.js → ...servation/components/ReservationStatus.js
diff --git a/src/routes/UserInfo.js → src/views/profile/UserInfo.js b/src/routes/UserInfo.js → src/views/profile/UserInfo.js
diff --git a/src/routes/UserReserve.js → src/views/profile/UserReserveInfo.js b/src/routes/UserReserve.js → src/views/profile/UserReserveInfo.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import { useState, useEffect } from 'react';
 import { Link } from 'react-router-dom';
-import ReserveTable from 'components/UserReserve/ReserveTable';
+import ReserveTable from 'views/profile/components/ReserveTable';
 
 const options = {
   weekday: 'short',

diff --git a/src/components/UserReserve/ReserveTable.js → src/views/profile/components/ReserveTable.js b/src/components/UserReserve/ReserveTable.js → src/views/profile/components/ReserveTable.js
diff --git a/src/routes/ReserveCheck.js → src/views/reserve_page/ReserveCheck.js b/src/routes/ReserveCheck.js → src/views/reserve_page/ReserveCheck.js
diff --git a/src/routes/ReserveComplete.js → src/views/reserve_page/ReserveComplete.js b/src/routes/ReserveComplete.js → src/views/reserve_page/ReserveComplete.js
diff --git a/src/routes/ReservePage.js → src/views/reserve_page/ReservePage.js b/src/routes/ReservePage.js → src/views/reserve_page/ReservePage.js
@@ -92,13 +92,15 @@ const ReservePage = () => {
                     <div className="datepickerHeader">
                       <div onClick={decreaseMonth}>
                         <img
+                          alt="달력 왼쪽 화살표"
                           src={process.env.PUBLIC_URL + '/img/back.png'}
                           className="h-6"
                         />
                       </div>
                       <div> {formatDate(date)}</div>
                       <div onClick={increaseMonth}>
                         <img
+                          alt="달력 오른쪽 화살표"
                           src={process.env.PUBLIC_URL + '/img/back.png'}
                           className="h-6"
                           id="h-6_reverse"
@@ -134,7 +136,7 @@ const ReservePage = () => {
                       key={idx}
                       value={idx}
                       className={
-                        'time-block' + (idx == btnActive ? ' active' : '')
+                        'time-block' + (idx === btnActive ? ' active' : '')
                       }
                       onClick={toggleActive}
                       tabIndex="0"