[CP-224] feat: 예약 사진 인증 시 GPS 기반 1차 검증

Author: son-daehyeon

src/modal/reserve-rejected-detail.modal.tsx

@@ -1,3 +1,5 @@
+import { useEffect, useState } from 'react';
+
 import Button from '@/components/button';
 import { FormField } from '@/components/form/form-field';
 import { Input } from '@/components/form/input';
@@ -6,10 +8,12 @@ import GridIconModal from '@/components/modal-container/grid-icon-modal';
 import { ReservationResponse } from '@/api/dto/reservation';
 import { useModalStore } from '@/store/modal.store';
 import { useUserStore } from '@/store/user.store';
+import { checkLocation } from '@/util/gps-validator';
 import { format, parse } from 'date-fns';
 import { ko } from 'date-fns/locale';
 import { TickCircle, Warning2 } from 'iconsax-react';
 import { Folder, Forward } from 'lucide-react';
+import { twMerge } from 'tailwind-merge';
 
 interface ReserveRejectedDetailModalProps {
   reservation: ReservationResponse;
@@ -21,6 +25,15 @@ export default function ReserveRejectedDetailModal({
   const { user } = useUserStore();
   const { closeModal } = useModalStore();
 
+  const [validatedLocation, setValidatedLocation] = useState(false);
+
+  useEffect(() => {
+    (async () => {
+      const validated = await checkLocation();
+      setValidatedLocation(validated);
+    })();
+  }, []);
+
   if (!user) return null;
 
   return (
@@ -55,12 +68,25 @@ export default function ReserveRejectedDetailModal({
             </h3>
           </div>
 
-          <div className="border-system-alarm flex cursor-pointer flex-col items-center gap-1 rounded border border-dashed py-5 hover:bg-gray-50">
-            <div className="flex items-center gap-1.5">
-              <Folder size={22} color="black" />
-              <p className="subtitle2-nanum text-primary-gray-600">파일 선택</p>
-            </div>
-            <p className="body2-nanum text-neutral-500">파일을 여기로 끌어 놓으세요</p>
+          <div
+            className={twMerge(
+              'border-system-alarm flex flex-col items-center gap-1 rounded border border-dashed py-5',
+              validatedLocation && 'cursor-pointer hover:bg-gray-50',
+            )}
+          >
+            {validatedLocation ? (
+              <>
+                <div className="flex items-center gap-1.5">
+                  <Folder size={22} color="black" />
+                  <p className="subtitle2-nanum text-primary-gray-600">파일 선택</p>
+                </div>
+                <p className="body2-nanum text-neutral-500">파일을 여기로 끌어 놓으세요</p>
+              </>
+            ) : (
+              <p className="body2-pretendard text-system-alarm">
+                국민대학교 내부에서만 인증할 수 있습니다.
+              </p>
+            )}
           </div>
         </div>
 

src/modal/reserve-success-detail.modal.tsx

@@ -1,3 +1,5 @@
+import { useEffect, useState } from 'react';
+
 import Button from '@/components/button';
 import { FormField } from '@/components/form/form-field';
 import { Input } from '@/components/form/input';
@@ -6,10 +8,12 @@ import GridIconModal from '@/components/modal-container/grid-icon-modal';
 import { ReservationResponse } from '@/api/dto/reservation';
 import { useModalStore } from '@/store/modal.store';
 import { useUserStore } from '@/store/user.store';
+import { checkLocation } from '@/util/gps-validator';
 import { format, parse } from 'date-fns';
 import { ko } from 'date-fns/locale';
 import { TickCircle, Warning2 } from 'iconsax-react';
 import { Folder, Forward } from 'lucide-react';
+import { twMerge } from 'tailwind-merge';
 
 interface ReserveRejectedDetailModalProps {
   reservation: ReservationResponse;
@@ -21,6 +25,15 @@ export default function ReserveSuccessDetailModal({
   const { user } = useUserStore();
   const { closeModal } = useModalStore();
 
+  const [validatedLocation, setValidatedLocation] = useState(false);
+
+  useEffect(() => {
+    (async () => {
+      const validated = await checkLocation();
+      setValidatedLocation(validated);
+    })();
+  }, []);
+
   if (!user) return null;
 
   return (
@@ -55,12 +68,25 @@ export default function ReserveSuccessDetailModal({
             </h3>
           </div>
 
-          <div className="border-system-alarm3 flex cursor-pointer flex-col items-center gap-1 rounded border border-dashed py-5 hover:bg-gray-50">
-            <div className="flex items-center gap-1.5">
-              <Folder size={22} color="black" />
-              <p className="subtitle2-nanum text-primary-gray-600">파일 선택</p>
-            </div>
-            <p className="body2-nanum text-neutral-500">파일을 여기로 끌어 놓으세요</p>
+          <div
+            className={twMerge(
+              'border-system-alarm3 flex flex-col items-center gap-1 rounded border border-dashed py-5',
+              validatedLocation && 'cursor-pointer hover:bg-gray-50',
+            )}
+          >
+            {validatedLocation ? (
+              <>
+                <div className="flex items-center gap-1.5">
+                  <Folder size={22} color="black" />
+                  <p className="subtitle2-nanum text-primary-gray-600">파일 선택</p>
+                </div>
+                <p className="body2-nanum text-neutral-500">파일을 여기로 끌어 놓으세요</p>
+              </>
+            ) : (
+              <p className="body2-pretendard text-system-alarm3">
+                국민대학교 내부에서만 인증할 수 있습니다.
+              </p>
+            )}
           </div>
         </div>
 

src/util/gps-validator.ts

@@ -0,0 +1,31 @@
+const lat = 37.611142;
+const lng = 126.996427;
+
+const toRad = (value: number) => (value * Math.PI) / 180;
+
+const getDistance = (lat1: number, lon1: number, lat2: number, lon2: number) => {
+  const R = 6371000;
+  const dLat = toRad(lat2 - lat1);
+  const dLon = toRad(lon2 - lon1);
+  const a =
+    Math.sin(dLat / 2) ** 2 +
+    Math.cos(toRad(lat1)) * Math.cos(toRad(lat2)) * Math.sin(dLon / 2) ** 2;
+  const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
+  return R * c;
+};
+
+export const checkLocation = async (): Promise<boolean> => {
+  if (!navigator.geolocation) return true;
+
+  return new Promise((resolve) => {
+    navigator.geolocation.getCurrentPosition(
+      (position) => {
+        const { latitude, longitude } = position.coords;
+        const distance = getDistance(latitude, longitude, lat, lng);
+
+        resolve(distance <= 300);
+      },
+      () => resolve(false),
+    );
+  });
+};