Merge pull request #203 from Pseudo-Lab/fix-frontend-my-info

feat(getcloser): implement API calls

Author: daclouds

getcloser/frontend/src/app/layout.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import type { Metadata } from "next";
+
 import { Geist, Geist_Mono, Dongle } from "next/font/google";
 import "./globals.css";
 import { Providers } from './providers';

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

@@ -1,17 +1,15 @@
 'use client';
 
-import Link from 'next/link';
 import Image from 'next/image';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 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 { email, setEmail, setId } = useFormStore();
   const router = useRouter();
 
   const handleSubmit = async (e: React.FormEvent) => {
@@ -33,6 +31,9 @@ export default function Page1() {
 
       const result = await response.json();
       console.log('Auth API Response:', result);
+      if (result.id) {
+        setId(result.id); // Store the ID in the form store
+      }
       alert('정보가 제출되었습니다!');
       router.push('/page2'); // Navigate to page2 after successful submission
     } catch (error) {
@@ -49,7 +50,7 @@ export default function Page1() {
         <div className="items-center text-center" style={{marginBottom: 36}}>
           <p className="text-md mt-1">Pseudo Lab</p>
           <p className="text-md">2nd Grand Gathering</p>
-          <p className="text-md">2025. 11. 15</p>
+          <p className="text-md">2025. 12. 20</p>
         </div>
         <form className="space-y-4" onSubmit={handleSubmit}>
           <div className='items-center text-center'>

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

@@ -1,6 +1,6 @@
 'use client';
 
-import React, { useState, useEffect, useRef } from 'react';
+import React, { useState, useEffect, useRef, useCallback } from 'react';
 import Link from 'next/link';
 import { useRouter } from 'next/navigation';
 import { Button } from '@/components/ui/button';
@@ -11,25 +11,64 @@ import Modal from '@/components/Modal';
 import Cookies from 'js-cookie';
 
 export default function Page2() {
-  const { email } = useFormStore();
+  const { id, setTeamId, setMemberIds } = useFormStore();
   const router = useRouter();
-  const [inputs, setInputs] = useState<string[]>(() => {
-    const initialInputs = Array(5).fill('');
-    if (email) {
-      initialInputs[0] = email;
-    }
+  const [inputs, setInputs] = useState<Array<{ id: string; displayName: string }>>(() => {
+    const initialInputs = Array(5).fill({ id: '', displayName: '' });
     return initialInputs;
   });
   const [showModal, setShowModal] = useState(false);
   const timeoutRef = useRef<NodeJS.Timeout | null>(null); // Add timeoutRef
 
+  const fetchUserById = useCallback(async (index: number, userId: string) => {
+    if (!userId) return; // Don't fetch if ID is empty
+
+    // Prevent adding self as a team member
+    if (index !== 0 && id && Number(userId) === Number(id)) { // Check only for other team members, not self
+      alert(`자기 자신(${userId})을 팀원으로 추가할 수 없습니다.`);
+      const newInputs = [...inputs];
+      newInputs[index] = { id: '', displayName: '' }; // Clear the input field
+      setInputs(newInputs);
+      return;
+    }
+
+    try {
+      const response = await fetch(`/api/v1/users/${userId}`);
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+      }
+      const userData = await response.json();
+      // Assuming the API returns an object with a 'data' field which is the display name
+      const newInputs = [...inputs];
+      newInputs[index] = { id: userId, displayName: userData.data || userId }; // Store both id and display name
+      setInputs(newInputs);
+    } catch (error: unknown) {
+      let errorMessage = '알 수 없는 오류가 발생했습니다.';
+      if (error instanceof Error) {
+        errorMessage = error.message;
+      }
+      console.error(`Error fetching user ${userId}:`, errorMessage);
+      const newInputs = [...inputs];
+      newInputs[index] = { id: userId, displayName: userId }; // Fallback to just ID if fetch fails
+      setInputs(newInputs);
+      // Optionally, display an error message to the user
+    }
+  }, [id, inputs]);
+
   useEffect(() => {
     const hasSeenModal = Cookies.get('doNotShowModalPage2');
     if (!hasSeenModal) {
       setShowModal(true);
     }
   }, []);
 
+  // Effect to pre-fill the first input if ID is available
+  useEffect(() => {
+    if (id && inputs[0].id === '') { // Only fetch if ID exists and input is empty
+      fetchUserById(0, id);
+    }
+  }, [id, fetchUserById, inputs]); // Rerun when id changes
+
   const handleConfirm = () => {
     setShowModal(false);
   };
@@ -41,7 +80,7 @@ export default function Page2() {
 
   const handleInputChange = (index: number, value: string) => {
     const newInputs = [...inputs];
-    newInputs[index] = value;
+    newInputs[index] = { id: value, displayName: value }; // Temporarily set display name to ID
     setInputs(newInputs);
 
     // Clear any existing timeout
@@ -55,28 +94,53 @@ export default function Page2() {
     }, 3000);
   };
 
-  const fetchUserById = async (index: number, id: string) => {
-    if (!id) return; // Don't fetch if ID is empty
+  const handleSolveProblem = async () => {
+    // Step 1: Check if all inputs are filled
+    const allInputsFilled = inputs.every(input => input.id !== '');
+    if (!allInputsFilled) {
+      alert('모든 팀원 ID를 채워주세요.');
+      return;
+    }
+
+    // Step 2: Construct the JSON body
+    const myId = id; // id from useFormStore()
+    const memberIds = inputs.slice(1).map(input => input.id); // Exclude the first input (my_id)
+
+    const requestBody = {
+      my_id: myId,
+      member_ids: memberIds,
+    };
+
+    console.log('Request Body:', requestBody);
+
+    // Step 3: Make the POST request
     try {
-      const response = await fetch(`${process.env.APP_HOST}/v1/users/${id}`);
+      const response = await fetch('/api/v1/teams/create', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(requestBody),
+      });
+
       if (!response.ok) {
-        throw new Error(`HTTP error! status: ${response.status}`);
+        const errorData = await response.json();
+        throw new Error(`HTTP error! status: ${response.status}, message: ${errorData.detail || response.statusText}`);
       }
-      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 = () => {
-    console.log('Inputs:', inputs);
-    // You can add logic here to process the inputs before navigating
-    router.push('/page3');
+      const responseData = await response.json();
+      console.log('Team creation successful:', responseData);
+      setTeamId(responseData.team_id); // Save team_id to store
+      setMemberIds(responseData.members_ids); // Save members_ids to store
+      router.push('/page3'); // Navigate to page3 on success
+    } catch (error: unknown) {
+      console.error('Error creating team:', error);
+      let errorMessage = '알 수 없는 오류가 발생했습니다.';
+      if (error instanceof Error) {
+        errorMessage = error.message;
+      }
+      alert(`팀 생성에 실패했습니다: ${errorMessage}`);
+    }
   };
 
   return (
@@ -95,7 +159,6 @@ export default function Page2() {
         onDoNotShowAgain={handleDoNotShowAgain}
         isOpen={showModal}
       />
-      {email && <p className="mt-4">이메일: <strong>{email}</strong></p>}
 
       <div className="mt-8 space-y-4">
         {[...Array(5)].map((_, index) => (
@@ -106,13 +169,13 @@ export default function Page2() {
               id={`team-id-${index}`}
               type="id"
               placeholder={`팀원 ${index + 1}의 번호`}
-              value={inputs[index]}
+              value={inputs[index].displayName}
               onChange={(e) => handleInputChange(index, e.target.value)}
-              onBlur={(e) => {
+              onBlur={() => {
                 if (timeoutRef.current) {
                   clearTimeout(timeoutRef.current); // Clear any pending debounce
                 }
-                fetchUserById(index, e.target.value); // Fetch immediately on blur
+                fetchUserById(index, inputs[index].id); // Fetch immediately on blur using the stored ID
               }}
               disabled={index === 0}
             />

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

@@ -6,12 +6,58 @@ import { Button } from '@/components/ui/button';
 import { Label } from '@/components/ui/label';
 import { Textarea } from '@/components/ui/textarea';
 import { useFormStore } from '../../store/formStore';
-import React from 'react';
+import React, { useEffect } from 'react'; // Import useEffect
 
 export default function Page3() {
-  const { question, answer, setAnswer } = useFormStore();
+  const { question, answer, setAnswer, id, teamId, memberIds } = useFormStore(); // Destructure new state
   const router = useRouter();
 
+  useEffect(() => {
+    const assignChallenges = async () => {
+      if (!teamId || !id || memberIds.length === 0) {
+        console.warn('Missing teamId, my_id, or memberIds for challenge assignment.');
+        return;
+      }
+
+      const requestBody = {
+        team_id: teamId,
+        my_id: id,
+        members_ids: memberIds,
+      };
+
+      console.log('Assign Challenges Request Body:', requestBody);
+
+      try {
+        const response = await fetch('/api/v1/challenge/assign-challenges', {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify(requestBody),
+        });
+
+        if (!response.ok) {
+          const errorData = await response.json();
+          throw new Error(`HTTP error! status: ${response.status}, message: ${errorData.detail || response.statusText}`);
+        }
+
+        const responseData = await response.json();
+        console.log('Challenge assignment successful:', responseData);
+        // Here you might want to update the question in the store based on responseData
+        // setQuestion(responseData.challenge_question);
+      } catch (error: unknown) {
+        console.error('Error assigning challenges:', error);
+        let errorMessage = '알 수 없는 오류가 발생했습니다.';
+        if (error instanceof Error) {
+          errorMessage = error.message;
+        }
+        alert(`챌린지 할당에 실패했습니다: ${errorMessage}`);
+      }
+    };
+
+    assignChallenges();
+  }, [id, teamId, memberIds]); // Dependencies for useEffect
+
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault();
     console.log('Question:', question, 'Answer:', answer);

getcloser/frontend/src/components/Header.tsx

@@ -1,20 +1,43 @@
 'use client';
 
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import { useFormStore } from '../store/formStore';
 
 export default function Header() {
-  const { email } = useFormStore();
+  const { id } = useFormStore();
+  const [userName, setUserName] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (id) {
+      const fetchUserName = async () => {
+        try {
+          const response = await fetch(`/api/v1/users/${id}`);
+          if (!response.ok) {
+            throw new Error(`HTTP error! status: ${response.status}`);
+          }
+          const userData = await response.json();
+          setUserName(userData.data || null);
+        } catch (error) {
+          console.error(`Error fetching user ${id}:`, error);
+          setUserName(null); // Clear user name on error
+        }
+      };
+      fetchUserName();
+    } else {
+      setUserName(null); // Clear user name if id is empty
+    }
+  }, [id]);
 
   return (
     <header className="py-4 bg-background text-foreground border-b border-border">
       <h1 className="text-3xl font-bold">친해지길바라</h1>
       <p className="text-md mt-1 text-center" style={{ margin: 0, padding: 0, lineHeight: '1em' }}>
         Pseudo Lab<br />
         2nd Grand Gathering<br />
-        2025. 11. 15
+        2025. 12. 20
       </p>
-      {email && <p className="text-sm mt-2"><strong>{email}</strong></p>}
+      {id && userName && <p className="text-sm mt-2">ID: <strong>{id}</strong>, 이름: <strong>{userName}</strong></p>}
+      {id && !userName && <p className="text-sm mt-2">ID: <strong>{id}</strong></p>}
     </header>
   );
 }

getcloser/frontend/src/store/formStore.ts

@@ -2,18 +2,30 @@ import { create } from 'zustand';
 
 interface FormState {
   email: string;
+  id: string;
   question: string;
   answer: string;
+  teamId: string;
+  memberIds: string[];
   setEmail: (email: string) => void;
+  setId: (id: string) => void;
   setQuestion: (question: string) => void;
   setAnswer: (answer: string) => void;
+  setTeamId: (teamId: string) => void;
+  setMemberIds: (memberIds: string[]) => void;
 }
 
 export const useFormStore = create<FormState>((set) => ({
   email: '',
+  id: '',
   question: '',
   answer: '',
+  teamId: '',
+  memberIds: [],
   setEmail: (email) => set({ email }),
+  setId: (id) => set({ id }),
   setQuestion: (question) => set({ question }),
   setAnswer: (answer) => set({ answer }),
+  setTeamId: (teamId) => set({ teamId }),
+  setMemberIds: (memberIds) => set({ memberIds }),
 }));

getcloser/frontend/tailwind.config.ts

@@ -1,5 +1,6 @@
 import type { Config } from 'tailwindcss';
 import defaultTheme from 'tailwindcss/defaultTheme';
+import tailwindAnimate from 'tailwindcss-animate';
 
 const config: Config = {
   darkMode: false,
@@ -79,7 +80,7 @@ const config: Config = {
       },
     },
   },
-  plugins: [require('tailwindcss-animate')],
+  plugins: [tailwindAnimate],
 };
 
 export default config;