Merge pull request #84 from wafflestudio/fix/unauthorized-rental-prevention

Fix/unauthorized rental prevention

Author: alinwinskingsleigh-svg

src/components/AdminFAB.tsx

@@ -111,7 +111,6 @@ export function AdminFAB() {
                                                 <div className="apply-name">{app.name}</div>
                                                 <div className="apply-details">
                                                     <span>{app.email}</span>
-                                                    <span>학번: {app.student_id}</span>
                                                 </div>
                                             </div>
                                             <div className="apply-actions">

src/contexts/AuthContext.tsx

@@ -12,6 +12,7 @@ interface AuthState {
     userName: string | null;
     userType: number | null;
     isAdmin: boolean;
+    permission: number | null;
 }
 
 interface AuthContextType extends AuthState {
@@ -26,12 +27,16 @@ interface AuthProviderProps {
 }
 
 export function AuthProvider({ children }: AuthProviderProps) {
-    const [authState, setAuthState] = useState<AuthState>(() => ({
-        isLoggedIn: !!getAccessToken(),
-        userName: getStoredUserName(),
-        userType: getStoredUserType(),
-        isAdmin: getStoredUserType() === 1,
-    }));
+    const [authState, setAuthState] = useState<AuthState>(() => {
+        const userType = getStoredUserType();
+        return {
+            isLoggedIn: !!getAccessToken(),
+            userName: getStoredUserName(),
+            userType: userType,
+            permission: userType, // userType 값을 permission으로도 활용
+            isAdmin: userType === 1,
+        };
+    });
 
     const refreshAuth = useCallback(() => {
         const token = getAccessToken();
@@ -41,6 +46,7 @@ export function AuthProvider({ children }: AuthProviderProps) {
             isLoggedIn: !!token,
             userName,
             userType,
+            permission: userType,
             isAdmin: userType === 1,
         });
     }, []);
@@ -51,6 +57,7 @@ export function AuthProvider({ children }: AuthProviderProps) {
             isLoggedIn: false,
             userName: null,
             userType: null,
+            permission: null,
             isAdmin: false,
         });
     }, []);

src/pages/ItemListPage.tsx

@@ -2,6 +2,7 @@ import { useState, useEffect } from 'react';
 import { useParams, useNavigate } from 'react-router-dom';
 import { getAssets, borrowItem, getPictureUrl, type Asset } from '@/api/client';
 import '@/styles/App.css';
+import { useAuth } from '@/contexts/AuthContext';
 
 const ITEMS_PER_PAGE = 10;
 
@@ -42,8 +43,14 @@ export function ItemListPage() {
         fetchAssets();
     }, [clubIdNum, isValidClubId]);
 
+    const { userType } = useAuth();
+
     // 대여 버튼 클릭 핸들러
     const handleRentClick = (asset: Asset) => {
+        if (userType === 2) {
+            alert('동아리 관리자의 승인이 필요합니다. 승인 후 대여가 가능합니다.');
+        return;
+    }
         setSelectedAsset(asset);
         const defaultDate = new Date();
         // max_rental_days가 설정되어 있으면 그 값을, 아니면 기본 7일

src/pages/ReturnDetailPage.tsx

@@ -77,6 +77,7 @@ export function ReturnDetailPage() {
     const navigate = useNavigate();
     const location = useLocation();
     const locationState = location.state as LocationState | null;
+    const [isLocationVerified, setIsLocationVerified] = useState(false);
     const [isSubmitting, setIsSubmitting] = useState(false);
     const [isCompressing, setIsCompressing] = useState(false);
     const item = locationState?.item;
@@ -238,7 +239,8 @@ export function ReturnDetailPage() {
         }
 
         try {
-            setIsLocating(true); // 로딩 시작
+            setIsLocating(true);
+            setIsLocationVerified(false);
 
             const clubResult = await getClub(item.clubId);
             if (!clubResult.success || !clubResult.data) {
@@ -251,6 +253,7 @@ export function ReturnDetailPage() {
 
             if (!clubData.location_lat || !clubData.location_lng) {
                 console.log("동아리 위치 정보가 없어 인증을 생략합니다.");
+                setIsLocationVerified(false);
                 setIsLocating(false);
                 return;
             }
@@ -274,6 +277,7 @@ export function ReturnDetailPage() {
                         alert(`⚠️ 거리가 너무 멉니다! (현재 거리: ${distance.toFixed(1)}m)\n15m 이내에서 다시 시도해주세요.`);
                     } else {
                         alert('✅ 위치 인증에 성공했습니다!');
+                        setIsLocationVerified(false);
                     }
                     setIsLocating(false);
                 },
@@ -373,14 +377,11 @@ export function ReturnDetailPage() {
                 />
                 <div className="card-actions" style={{ marginTop: '15px' }}>
                     <button
-                        // 인자 없이 호출하도록 수정
                         onClick={handleReturnItem}
                         className="primary-btn"
-                        // isLocating을 불리언(true/false)으로 관리한다면 아래와 같이 수정
                         disabled={isLocating}
                         style={{
                             width: '100%',
-                            // schedule.id 대신 item.id 사용
                             backgroundColor: isLocating ? '#999' : '#373F47',
                             color: 'white',
                             padding: '12px',
@@ -398,6 +399,8 @@ export function ReturnDetailPage() {
                                 <span className="spinner" />
                                 위치 확인 중...
                             </>
+                        ) : isLocationVerified ? (
+                            '✅ 위치 인증 완료'
                         ) : (
                             '📍 위치 인증하기'
                         )}

src/styles/AdminDashboard.css

@@ -6,7 +6,7 @@
 
 /* Club Info Banner */
 .club-info-banner {
-    margin-bottom: 1.5rem;
+    margin-bottom: 2rem;
     padding: 1.25rem 1.5rem;
     background: linear-gradient(135deg, var(--primary-color), #6366f1);
     border-radius: 16px;
@@ -52,10 +52,13 @@
 .admin-tabs {
     display: flex;
     align-items: center;
-    gap: 0.75rem;
+    gap: 0.7rem;
     margin-bottom: 1.5rem;
     border-bottom: 1px solid var(--glass-border);
+    
+    padding-top: 0.5rem;
     padding-bottom: 1rem;
+    padding-left: 3px;
     overflow-x: auto;
     -webkit-overflow-scrolling: touch;
     scrollbar-width: none;