feat(getcloser): implement team member info

Author: daclouds

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

@@ -5,6 +5,7 @@ import React, { useEffect, useState } from 'react';
 import { useFormStore } from '../../store/formStore';
 import { authenticatedFetch } from '../../lib/api';
 import { useNavigationStore } from '../../store/navigationStore';
+import { questions } from '@/lib/constants';
 
 interface TeamMember {
   id: number;
@@ -15,17 +16,11 @@ interface TeamMember {
   linkedin_url?: string;
 }
 
-const questions = [
-  { category: '1', keyword: '관심사', problem: '님의 관심사를 맞춰주세요.', options: [ 'Agentic AI', 'AI Ethics', 'AI Security', 'Causal Inference', 'Computer Graphics', 'Computer Vision', 'Efficient AI', 'LLM/Multimodal', 'Physical AI', 'XAI' ] },
-  { category: '2', keyword: '계절', problem: '님이 좋아하는 계절을 맞춰주세요.', options: ['봄', '여름', '가을', '겨울'] },
-  { category: '3', keyword: 'MBTI', problem: '님의 MBTI 유형을 맞춰주세요.', options: ['INFP', 'ENFP', 'INFJ', 'ENFJ', 'INTJ', 'ENTJ', 'INTP', 'ENTP', 'ISFP', 'ESFP', 'ISTP', 'ESTP', 'ISFJ', 'ESFJ', 'ISTJ', 'ESTJ'] },
-];
-
 interface QuestionInfo {
-    category: string;
-    keyword: string;
-    problem: string;
-    options: string[];
+  category: string;
+  keyword: string;
+  problem: string;
+  options: string[];
 }
 
 const getJsonFromResponse = async (response: Response) => {
@@ -52,7 +47,7 @@ export default function Page3() {
         // Still need to set the question info for rendering options
         if (!currentQuestionInfo) {
           const loadedQuestionCategory = questions.find(q => question.includes(q.problem));
-          if(loadedQuestionCategory) {
+          if (loadedQuestionCategory) {
             setCurrentQuestionInfo(loadedQuestionCategory as QuestionInfo); // Cast to QuestionInfo
           }
         }

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

@@ -7,6 +7,7 @@ import { authenticatedFetch } from '../../lib/api';
 import { useFormStore } from '../../store/formStore';
 import { useNavigationStore } from '../../store/navigationStore';
 import Modal from '@/components/Modal';
+import { questions } from '@/lib/constants';
 
 // Assuming a TeamMember interface for better typing
 interface TeamMember {
@@ -19,16 +20,16 @@ interface TeamMember {
 }
 
 interface TeamData {
-    id: number;
-    team_id: number;
-    name: string;
-    members: TeamMember[];
+  id: number;
+  team_id: number;
+  name: string;
+  members: TeamMember[];
 }
 
 interface ChallengeResult {
   user_id: number;
   question: string;
-  user_answer: string;
+  user_answer?: string;
   correct_answer: string;
   is_correct: boolean;
 }
@@ -229,12 +230,12 @@ export default function Page4() {
                         <p className="text-lg font-semibold">{member.name}</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>
+                            GitHub: <a href={member.github_url} target="_blank" rel="noopener noreferrer" className="text-blue-500 hover:underline" onClick={(e) => e.stopPropagation()}>{member.github_url}</a>
                           </p>
                         )}
                         {member.linkedin_url && (
                           <p className="text-sm text-gray-600">
-                          LinkedIn: <a href={member.linkedin_url} target="_blank" rel="noopener noreferrer" className="text-blue-500 hover:underline">{member.linkedin_url}</a>
+                            LinkedIn: <a href={member.linkedin_url} target="_blank" rel="noopener noreferrer" className="text-blue-500 hover:underline" onClick={(e) => e.stopPropagation()}>{member.linkedin_url}</a>
                           </p>
                         )}
                       </div>
@@ -253,18 +254,28 @@ export default function Page4() {
       </div>
       <Modal
         isOpen={isModalOpen}
-        title="Challenge Result"
+        title={selectedMemberChallenge && teamData ? teamData.members.find(m => m.user_id === selectedMemberChallenge.user_id)?.name || 'Challenge Result' : '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>
+              <p class="mb-2"><strong>Question:</strong> ${(() => {
+              const memberName = teamData?.members.find(m => m.user_id === selectedMemberChallenge.user_id)?.name || '';
+              const questionInfo = questions.find(q => q.category === selectedMemberChallenge.question);
+              const questionText = questionInfo ? questionInfo.problem : selectedMemberChallenge.question;
+              return `${memberName} ${questionText}`;
+            })()}</p>
+              <p class="mb-2"><strong>Keyword:</strong> ${(() => {
+              const questionInfo = questions.find(q => q.category === selectedMemberChallenge.question);
+              return questionInfo ? questionInfo.keyword : 'Unknown';
+            })()}</p>
+              <p class="mb-1"><strong>Your Answer:</strong> <span class="${selectedMemberChallenge.is_correct ? 'text-green-400' : 'text-red-400'}">${selectedMemberChallenge.user_answer || (selectedMemberChallenge.is_correct ? selectedMemberChallenge.correct_answer : 'Unknown')}</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)}
+        showDoNotShowAgain={false}
       />
     </div>
   );

getcloser/frontend/src/components/Modal.tsx

@@ -8,9 +8,10 @@ interface ModalProps {
   onConfirm: () => void;
   onDoNotShowAgain: () => void;
   isOpen: boolean;
+  showDoNotShowAgain?: boolean;
 }
 
-const Modal: React.FC<ModalProps> = ({ title, content, onConfirm, onDoNotShowAgain, isOpen }) => {
+const Modal: React.FC<ModalProps> = ({ title, content, onConfirm, onDoNotShowAgain, isOpen, showDoNotShowAgain = true }) => {
   if (!isOpen) return null;
 
   return (
@@ -19,12 +20,14 @@ const Modal: React.FC<ModalProps> = ({ title, content, onConfirm, onDoNotShowAga
         <h2 className="text-xl font-bold mb-4">{title}</h2>
         <p className="mb-6" dangerouslySetInnerHTML={{ __html: content }}></p>
         <div className="flex justify-end space-x-4">
-          <button
-            onClick={onDoNotShowAgain}
-            className="px-4 py-2 rounded hover:bg-secondary/80"
-          >
-            다시 보지 않기
-          </button>
+          {showDoNotShowAgain && (
+            <button
+              onClick={onDoNotShowAgain}
+              className="px-4 py-2 rounded hover:bg-secondary/80"
+            >
+              다시 보지 않기
+            </button>
+          )}
           <button
             onClick={onConfirm}
             className="px-4 py-2 rounded hover:bg-primary/80"

getcloser/frontend/src/lib/constants.ts

@@ -0,0 +1,5 @@
+export const questions = [
+    { category: '1', keyword: '관심사', problem: '님의 관심사를 맞춰주세요.', options: ['Agentic AI', 'AI Ethics', 'AI Security', 'Causal Inference', 'Computer Graphics', 'Computer Vision', 'Efficient AI', 'LLM/Multimodal', 'Physical AI', 'XAI'] },
+    { category: '2', keyword: '계절', problem: '님이 좋아하는 계절을 맞춰주세요.', options: ['봄', '여름', '가을', '겨울'] },
+    { category: '3', keyword: 'MBTI', problem: '님의 MBTI 유형을 맞춰주세요.', options: ['INFP', 'ENFP', 'INFJ', 'ENFJ', 'INTJ', 'ENTJ', 'INTP', 'ENTP', 'ISFP', 'ESFP', 'ISTP', 'ESTP', 'ISFJ', 'ESFJ', 'ISTJ', 'ESTJ'] },
+];