20260330 fe checkin redirect prob

frontend/src/App.jsx

@@ -1,3 +1,4 @@
+import { useEffect } from 'react';
 import './App.css';
 import { Routes, Route } from 'react-router-dom';
 import Layout from './components/Layout';
@@ -38,6 +39,19 @@ import ProtectedRoute from './components/protectedRoute.jsx';
 import AdminRoute from './components/AdminRoute.jsx';
 
 function App() {
+  useEffect(() => {
+    const setVh = () => {
+      const vh = window.innerHeight * 0.01;
+      document.documentElement.style.setProperty('--vh', `${vh}px`);
+    };
+
+    setVh();
+    window.addEventListener('resize', setVh);
+
+    return () => {
+      window.removeEventListener('resize', setVh);
+    };
+  }, []);
   return (
     <>
       <Routes>
@@ -74,15 +88,19 @@ function App() {
             <Route path="/attendance/admin/qr" element={<QrRenderPage />} />
             {/* <Route path="/attendance/check-in" element={<CheckInPage />} /> */}
           </Route>
-            <Route element={<AdminRoute />}>
-              <Route path="/admin" element={<AdminHome />} />
-              <Route path="/admin/members" element={<AdminMemberManage />} />
-              <Route
-                path="/admin/members/approval" element={<AdminMemberApproval />}
-              />
-              <Route path="/admin/members/upload" element={<AdminExcelUpload />} />
-              <Route path="/admin/dashboard" element={<AdminDashboard />} />
-            </Route>
+          <Route element={<AdminRoute />}>
+            <Route path="/admin" element={<AdminHome />} />
+            <Route path="/admin/members" element={<AdminMemberManage />} />
+            <Route
+              path="/admin/members/approval"
+              element={<AdminMemberApproval />}
+            />
+            <Route
+              path="/admin/members/upload"
+              element={<AdminExcelUpload />}
+            />
+            <Route path="/admin/dashboard" element={<AdminDashboard />} />
+          </Route>
         </Route>
       </Routes>
 

frontend/src/components/AdminRoute.jsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import { Navigate, Outlet } from 'react-router-dom';
+import { Navigate, Outlet, useLocation } from 'react-router-dom';
 import { api } from '../utils/axios';
 
 const isAdminRole = (role) => {
@@ -15,22 +15,29 @@ const AdminRoute = () => {
   const [loading, setLoading] = useState(true);
   const [isAuthorized, setIsAuthorized] = useState(false);
   const [redirectPath, setRedirectPath] = useState(null);
+  const location = useLocation();
 
   useEffect(() => {
     const checkAdmin = async () => {
       try {
         const { data } = await api.get('/api/user/details');
-        setIsAuthorized(isAdminRole(data?.role));
+        const role = data?.role;
+        setIsAuthorized(isAdminRole(role));
       } catch (error) {
         setIsAuthorized(false);
-        setRedirectPath(error?.status === 401 ? '/login' : '/');
+        const returnUrl = encodeURIComponent(
+          location.pathname + location.search
+        );
+        setRedirectPath(
+          error?.status === 401 ? `/login?returnUrl=${returnUrl}` : '/'
+        );
       } finally {
         setLoading(false);
       }
     };
 
     checkAdmin();
-  }, []);
+  }, [location.pathname, location.search]);
 
   if (loading) return <div>로딩 중...</div>;
   if (redirectPath) return <Navigate to={redirectPath} replace />;

frontend/src/components/Layout.jsx

@@ -44,7 +44,7 @@ function Layout() {
   }, [isMobile, isSidebarOpen]);
 
   return (
-    <div style={{ display: 'flex', position: 'relative', minHeight: '100vh' }}>
+    <div style={{ display: 'flex', position: 'relative', minHeight: 'calc(var(--vh, 1vh) * 100)' }}>
       <Header
         isRoot={isRoot}
         onToggleSidebar={() => setIsSidebarOpen(!isSidebarOpen)}

frontend/src/components/Sidebar.jsx

@@ -432,7 +432,7 @@ const Sidebar = ({ isOpen, isRoot, onClose }) => {
               <div>
                 <h2 id="feedback-modal-title">피드백 작성</h2>
                 <p id="feedback-modal-description">
-                  솔직한 피드백은 금융IT팀에게 큰 도움이 됩니다.
+                  솔직한 피드백은 금융IT팀에게 큰 도움이 됩니다. 피드백은 익명으로 저장됩니다. 
                 </p>
               </div>
               <button

frontend/src/components/Sidebar.module.css

@@ -5,6 +5,7 @@
   left: 0;
   width: 100vw;
   height: 100vh;
+  height: calc(var(--vh, 1vh) * 100);
   background-color: transparent;
   z-index: 999;
   display: block;
@@ -23,6 +24,7 @@
   left: 0;
   width: 264px;
   height: 100vh;
+  height: calc(var(--vh, 1vh) * 100);
   padding-top: 110px;
   padding-left: 32px;
   padding-right: 32px;
@@ -76,10 +78,11 @@
   .homeSidebarMenu {
     top: 90px;
     height: calc(100vh - 90px);
+    height: calc(var(--vh, 1vh) * 100 - 90px);
     padding-top: 20px;
     transform: translateX(0);
   }
-  
+
   .closed {
     transform: translateX(0);
   }
@@ -323,7 +326,6 @@
 
 .feedbackTriggerWrap {
   margin-top: auto;
-  padding-top: 12px;
   border-top: 1px solid rgba(255, 255, 255, 0.08);
 }
 
@@ -363,6 +365,7 @@
   padding: 24px 24px 18px;
   box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
   max-height: calc(100vh - 40px);
+  max-height: calc(var(--vh, 1vh) * 100 - 40px);
   overflow-y: auto;
   display: flex;
   flex-direction: column;
@@ -476,6 +479,7 @@
     width: min(540px, calc(100vw - 24px));
     padding: 20px 16px 14px;
     max-height: calc(100vh - 24px);
+    max-height: calc(var(--vh, 1vh) * 100 - 24px);
   }
 
   .feedbackModalHeader h2 {

frontend/src/components/login/LoginForm.jsx

@@ -128,7 +128,14 @@ const LoginForm = () => {
               비밀번호 초기화
             </a>
           </div>
-          <NavLink to="/signup" className={styles.text}>
+          <NavLink
+            to={
+              returnUrl
+                ? `/signup?returnUrl=${encodeURIComponent(returnUrl)}`
+                : '/signup'
+            }
+            className={styles.text}
+          >
             회원가입
           </NavLink>
         </div>

frontend/src/components/protectedRoute.jsx

@@ -1,12 +1,14 @@
-import { Navigate, Outlet } from 'react-router-dom';
+import { Navigate, Outlet, useLocation } from 'react-router-dom';
 import { useAuth } from '../contexts/AuthContext';
 
 const ProtectedRoute = () => {
   const { isLoggedIn, loading } = useAuth();
+  const location = useLocation();
 
   if (loading) return <div>로딩 중...</div>;
   if (!isLoggedIn) {
-    return <Navigate to="/login" replace />;
+    const returnUrl = encodeURIComponent(location.pathname + location.search);
+    return <Navigate to={`/login?returnUrl=${returnUrl}`} replace />;
   }
 
   return <Outlet />;

frontend/src/components/signup/SignUpForm.jsx

@@ -1,5 +1,5 @@
 import { useRef, useState } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate, useSearchParams } from 'react-router-dom';
 import { Eye, EyeOff } from 'lucide-react';
 import styles from '../LoginAndSignUpForm.module.css';
 import sejong_logo from '../../assets/sejong_logo.png';
@@ -48,6 +48,8 @@ const SignUpForm = () => {
   const abortRefSend = useRef(null);
   const abortRefCheck = useRef(null);
   const abortRefSignUp = useRef(null);
+  const [searchParams] = useSearchParams();
+  const returnUrl = searchParams.get('returnUrl');
   const nav = useNavigate();
 
   const handlePasswordChange = (e) => {
@@ -199,7 +201,11 @@ const SignUpForm = () => {
         abortRefSignUp.current.signal
       );
       toast.success('회원가입이 완료되었습니다.');
-      nav('/login');
+      if (returnUrl) {
+        nav(`/login?returnUrl=${encodeURIComponent(returnUrl)}`);
+      } else {
+        nav('/login');
+      }
     } catch (error) {
       console.log(error);
       toast.error('회원가입에 실패하였습니다.');

frontend/src/hooks/useAuthGuard.js

@@ -1,10 +1,11 @@
 import { useEffect } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate, useLocation } from 'react-router-dom';
 import { toast } from 'react-toastify';
 import { api } from '../utils/axios';
 
 export const useAuthGuard = () => {
   const nav = useNavigate();
+  const location = useLocation();
 
   useEffect(() => {
     const checkAuth = async () => {
@@ -16,12 +17,15 @@ export const useAuthGuard = () => {
         // 401 에러만 로그인 페이지로 리다이렉트
         if (error.status === 401) {
           toast.error('로그인 후 이용하실 수 있습니다.');
-          nav('/login');
+          const returnUrl = encodeURIComponent(
+            location.pathname + location.search
+          );
+          nav(`/login?returnUrl=${returnUrl}`);
         }
         // 404나 다른 에러는 무시
       }
     };
 
     checkAuth();
-  }, [nav]);
+  }, [nav, location.pathname, location.search]);
 };

frontend/src/index.css

@@ -52,6 +52,9 @@ html {
 
 #root {
   min-height: 100vh;
+  min-height: calc(var(--vh, 1vh) * 100);
+  margin: 0;
+  padding: 0;
   position: relative;
   background-color: #ffffff !important;
 }

frontend/src/pages/AdminDashboard.module.css

@@ -2,6 +2,7 @@
   display: flex;
   width: 100%;
   min-height: 100vh;
+  min-height: calc(var(--vh, 1vh) * 100);
   background: #f9fafb;
 }
 

frontend/src/pages/AdminHome.module.css

@@ -2,6 +2,7 @@
 	display: flex;
 	width: 100%;
 	min-height: 100vh;
+	min-height: calc(var(--vh, 1vh) * 100);
 	background: #f9fafb;
 }
 

frontend/src/pages/Board.module.css

@@ -15,7 +15,7 @@
   top: 0;
   left: 0;
   width: 100vw;
-  height: 100vh;
+  height: calc(var(--vh, 1vh) * 100);
   background-color: rgba(255, 255, 255, 1);
   z-index: -1;
   pointer-events: none;

frontend/src/pages/Home.module.css

@@ -1,6 +1,7 @@
 .container {
   width: 100vw;
   height: 100vh;
+  height: calc(var(--vh, 1vh) * 100);
   overflow: hidden;
   position: relative;
 }

frontend/src/pages/LoginAndSignUp.module.css

@@ -4,5 +4,6 @@
   justify-content: center;
   align-items: center;
   height: 100vh;
+  height: calc(var(--vh, 1vh) * 100);
   background: #fff;
 }

frontend/src/pages/external/External.module.css

@@ -1,6 +1,7 @@
 .container {
   width: 100%;
   min-height: 100vh;
+  min-height: calc(var(--vh, 1vh) * 100);
   display: flex;
   flex-direction: column;
   background-color: #ffffff;
@@ -60,6 +61,7 @@
   left: 0;
   width: 100vw;
   height: 100vh;
+  height: calc(var(--vh, 1vh) * 100);
   background-color: rgba(0, 0, 0, 0.5);
   z-index: 999;
   animation: fadeIn 0.3s ease;
@@ -80,6 +82,7 @@
   left: 0;
   width: 280px;
   height: 100vh;
+  height: calc(var(--vh, 1vh) * 100);
   background-color: transparent;
   backdrop-filter: blur(20px);
   z-index: 1000;