Merge pull request #188 from Pseudo-Lab/feat/api-calls

feat(getcloser): api calls

Author: daclouds

getcloser/frontend/src/app/page1/page.tsx

@@ -8,14 +8,37 @@ import { Label } from '@/components/ui/label';
 import { useFormStore } from '../../store/formStore';
 import { Rows } from 'lucide-react';
 
+import { useRouter } from 'next/navigation';
+
 export default function Page1() {
   const { email, setEmail } = useFormStore();
+  const router = useRouter();
 
-  const handleSubmit = (e: React.FormEvent) => {
+  const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
     console.log('Form Submitted:', { email });
-    // Here you would typically send this data to an API
-    alert('정보가 제출되었습니다! 콘솔을 확인해주세요.');
+
+    try {
+      const response = await fetch(`${process.env.APP_HOST}/api/v1/users/auth`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ email }),
+      });
+
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+      }
+
+      const result = await response.json();
+      console.log('Auth API Response:', result);
+      alert('정보가 제출되었습니다!');
+      router.push('/page2'); // Navigate to page2 after successful submission
+    } catch (error) {
+      console.error('Error submitting form:', error);
+      alert('정보 제출에 실패했습니다.');
+    }
   };
 
   return (
@@ -40,7 +63,7 @@ export default function Page1() {
               onChange={(e) => setEmail(e.target.value)}
             />
           </div>
-          <Link href="/page2"><Button type="submit" className="w-full">정보 제출</Button></Link>
+          <Button type="submit" className="w-full">정보 제출</Button>
 
         </form>
       </main>

getcloser/frontend/src/app/page2/page.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import Link from 'next/link';
 import { useRouter } from 'next/navigation';
 import { Button } from '@/components/ui/button';
@@ -21,6 +21,7 @@ export default function Page2() {
     return initialInputs;
   });
   const [showModal, setShowModal] = useState(false);
+  const timeoutRef = useRef<NodeJS.Timeout | null>(null); // Add timeoutRef
 
   useEffect(() => {
     const hasSeenModal = Cookies.get('doNotShowModalPage2');
@@ -42,6 +43,34 @@ export default function Page2() {
     const newInputs = [...inputs];
     newInputs[index] = value;
     setInputs(newInputs);
+
+    // Clear any existing timeout
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+
+    // Set a new timeout to fetch user data after 3 seconds
+    timeoutRef.current = setTimeout(() => {
+      fetchUserById(index, value);
+    }, 3000);
+  };
+
+  const fetchUserById = async (index: number, id: string) => {
+    if (!id) return; // Don't fetch if ID is empty
+    try {
+      const response = await fetch(`${process.env.APP_HOST}/v1/users/${id}`);
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+      }
+      const userData = await response.json();
+      // Assuming the API returns an object with a 'detail' field as per user's confirmation
+      const newInputs = [...inputs];
+      newInputs[index] = userData.detail || id; // Use fetched detail, or original ID if not found
+      setInputs(newInputs);
+    } catch (error) {
+      console.error(`Error fetching user ${id}:`, error);
+      // Optionally, display an error message to the user
+    }
   };
 
   const handleSolveProblem = () => {
@@ -74,11 +103,17 @@ export default function Page2() {
             <Label htmlFor={`team-email-${index}`}>팀원 {index + 1}</Label>
             {index === 0 && <Label> (나)</Label>}
             <Input
-              id={`team-email-${index}`}
-              type="email"
-              placeholder={`팀원 ${index + 1}의 이메일 주소`}
+              id={`team-id-${index}`}
+              type="id"
+              placeholder={`팀원 ${index + 1}의 번호`}
               value={inputs[index]}
               onChange={(e) => handleInputChange(index, e.target.value)}
+              onBlur={(e) => {
+                if (timeoutRef.current) {
+                  clearTimeout(timeoutRef.current); // Clear any pending debounce
+                }
+                fetchUserById(index, e.target.value); // Fetch immediately on blur
+              }}
               disabled={index === 0}
             />
           </div>