Merge pull request #278 from Pseudo-Lab/feat/getcloser/frontend/display-member-info

feat(getcloser): display team members info

Author: daclouds

getcloser/frontend/src/app/pages/Page3.tsx

@@ -8,6 +8,15 @@ import { useFormStore } from '../../store/formStore';
 import { authenticatedFetch } from '../../lib/api';
 import { useNavigationStore } from '../../store/navigationStore';
 
+interface TeamMember {
+  id: number;
+  user_id: number;
+  name: string;
+  email: string;
+  github_url?: string;
+  linkedin_url?: string;
+}
+
 const questions = [
   { category: '1', keyword: '관심사', problem: '사용자의 관심사를 맞춰주세요. 예: 기술, 예술, 환경 등' },
   { category: '2', keyword: '취미', problem: '사용자의 취미를 맞춰주세요. 예: 등산, 독서, 요리 등' },
@@ -35,6 +44,30 @@ export default function Page3() {
 
     const initializeChallenge = async () => {
       if (!question && id && teamId) {
+        // Fetch team members to get their names
+        let members: TeamMember[] = [];
+        try {
+          const teamResponse = await authenticatedFetch('/api/v1/teams/me', {
+            method: 'GET',
+            headers: { 'Content-Type': 'application/json' },
+          });
+          if (teamResponse.ok) {
+            const teamData = await teamResponse.json();
+            if (teamData && teamData.members) {
+              members = teamData.members;
+            }
+          } else {
+            console.error('Failed to fetch team data');
+          }
+        } catch (error) {
+          console.error('Error fetching team members:', error);
+        }
+
+        const findMemberName = (userId: number): string => {
+          const member = members.find((m) => m.user_id === userId);
+          return member ? member.name : String(userId); // Fallback to user_id as string
+        };
+
         // 1. Try to restore challenge from localStorage
         const savedChallengeJSON = localStorage.getItem(CHALLENGE_DATA_KEY);
         if (savedChallengeJSON) {
@@ -44,7 +77,8 @@ export default function Page3() {
             if (savedChallenge.category && savedChallenge.assigned_challenge_id) {
               const questionInfo = questions.find((q) => q.category === String(savedChallenge.category));
               if (questionInfo) {
-                setQuestion(questionInfo.problem);
+                const memberName = findMemberName(savedChallenge.user_id);
+                setQuestion([memberName, questionInfo.problem].join(' '));
                 setChallengeId(savedChallenge.assigned_challenge_id);
                 return; // Challenge successfully restored
               }
@@ -61,7 +95,7 @@ export default function Page3() {
           const assignResponse = await authenticatedFetch('/api/v1/challenges/assign', {
             method: 'POST',
             headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ team_id: teamId, my_id: id, members_ids: memberIds }),
+            body: JSON.stringify({ team_id: teamId, my_id: id, members_ids: memberIds.filter((memberId) => memberId !== Number(id)) }),
           });
 
           if (!assignResponse.ok) {
@@ -76,6 +110,7 @@ export default function Page3() {
             const dataToSave = {
               category: String(newChallengeData.my_assigned.category),
               assigned_challenge_id: newChallengeData.my_assigned.assigned_challenge_id,
+              user_id: newChallengeData.my_assigned.user_id,
             };
 
             // Save to localStorage for future restoration
@@ -85,7 +120,8 @@ export default function Page3() {
             // Set state from the new challenge data
             const questionInfo = questions.find((q) => q.category === dataToSave.category);
             if (questionInfo) {
-              setQuestion(questionInfo.problem);
+              const memberName = findMemberName(dataToSave.user_id);
+              setQuestion([memberName, questionInfo.problem].join(' '));
               setChallengeId(dataToSave.assigned_challenge_id);
             }
           } else {

getcloser/frontend/src/app/pages/Page4.tsx

@@ -6,10 +6,12 @@ import Image from 'next/image';
 import { authenticatedFetch } from '../../lib/api';
 import { useFormStore } from '../../store/formStore';
 import { useNavigationStore } from '../../store/navigationStore';
+import Modal from '@/components/Modal';
 
 // Assuming a TeamMember interface for better typing
 interface TeamMember {
   id: number;
+  user_id: number;
   name: string;
   email: string;
   github_url?: string; // Optional
@@ -18,10 +20,19 @@ interface TeamMember {
 
 interface TeamData {
     id: number;
+    team_id: number;
     name: string;
     members: TeamMember[];
 }
 
+interface ChallengeResult {
+  user_id: number;
+  question: string;
+  user_answer: string;
+  correct_answer: string;
+  is_correct: boolean;
+}
+
 export default function Page4() {
   const { id, isCorrect } = useFormStore(); // Added isCorrect
   const { setCurrentPage } = useNavigationStore();
@@ -30,6 +41,8 @@ export default function Page4() {
   const [teamData, setTeamData] = useState<TeamData | null>(null); // State to store team data
   const [clickCount, setClickCount] = useState<number>(0);
   const [lastClickTime, setLastClickTime] = useState<number>(0);
+  const [selectedMemberChallenge, setSelectedMemberChallenge] = useState<ChallengeResult | null>(null);
+  const [isModalOpen, setIsModalOpen] = useState(false);
 
   // This useEffect will set the initial success/failure based on isCorrect from the store
   useEffect(() => {
@@ -104,6 +117,34 @@ export default function Page4() {
     }
   };
 
+  const handleMemberClick = async (memberUserId: number) => {
+    if (!teamData) return;
+    try {
+      const response = await authenticatedFetch(`/api/v1/teams/${teamData.team_id}/members/${memberUserId}/challenge`, {
+        method: 'GET',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+      });
+
+      if (!response.ok) {
+        const errorData = await response.json();
+        throw new Error(`HTTP error! status: ${response.status}, message: ${errorData.detail || response.statusText}`);
+      }
+
+      const data: ChallengeResult = await response.json();
+      setSelectedMemberChallenge(data);
+      setIsModalOpen(true);
+    } catch (error: unknown) {
+      console.error('Error fetching challenge data:', error);
+      if (error instanceof Error) {
+        alert(`Error: ${error.message}`);
+      } else {
+        alert('An unknown error occurred.');
+      }
+    }
+  };
+
   return (
     <div className="container mx-auto p-4">
       <div className="mt-8 text-center">
@@ -126,9 +167,8 @@ export default function Page4() {
                 <h3 className="text-2xl font-bold mb-4">우리 팀원들</h3>
                 <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                   {teamData.members.map((member) => (
-                    <div key={member.id} className="bg-muted p-4 rounded-lg shadow-md">
+                    <div key={member.user_id} className="bg-muted p-4 rounded-lg shadow-md cursor-pointer hover:bg-muted/80" onClick={() => handleMemberClick(member.user_id)}>
                       <p className="text-lg font-semibold">{member.name}</p>
-                      <p className="text-sm text-gray-600">Email: {member.email}</p>
                       {member.github_url && (
                         <p className="text-sm text-gray-600">
                           GitHub: <a href={member.github_url} target="_blank" rel="noopener noreferrer" className="text-blue-500 hover:underline">{member.github_url}</a>
@@ -153,6 +193,21 @@ export default function Page4() {
           </>
         )}
       </div>
+      <Modal
+        isOpen={isModalOpen}
+        title="Challenge Result"
+        content={
+          selectedMemberChallenge
+            ? `
+              <p class="mb-2"><strong>Question:</strong> ${selectedMemberChallenge.question}</p>
+              <p class="mb-1"><strong>Your Answer:</strong> <span class="${selectedMemberChallenge.is_correct ? 'text-green-400' : 'text-red-400'}">${selectedMemberChallenge.user_answer}</span></p>
+              ${!selectedMemberChallenge.is_correct ? `<p class="mb-2"><strong>Correct Answer:</strong> <span class="text-green-400">${selectedMemberChallenge.correct_answer}</span></p>` : ''}
+            `
+            : ''
+        }
+        onConfirm={() => setIsModalOpen(false)}
+        onDoNotShowAgain={() => setIsModalOpen(false)}
+      />
     </div>
   );
 }