feat(getcloser): display id and username instead of email

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,60 @@ import Modal from '@/components/Modal';
 import Cookies from 'js-cookie';
 
 export default function Page2() {
-  const { email } = useFormStore();
+  const { id } = 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) {
+      console.error(`Error fetching user ${userId}:`, error);
+      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 +76,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,26 +90,8 @@ export default function Page2() {
     }, 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 = () => {
-    console.log('Inputs:', inputs);
+    console.log('Inputs:', inputs.map(input => input.id));
     // You can add logic here to process the inputs before navigating
     router.push('/page3');
   };
@@ -95,7 +112,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 +122,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/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,22 @@ import { create } from 'zustand';
 
 interface FormState {
   email: string;
+  id: string;
   question: string;
   answer: string;
   setEmail: (email: string) => void;
+  setId: (id: string) => void;
   setQuestion: (question: string) => void;
   setAnswer: (answer: string) => void;
 }
 
 export const useFormStore = create<FormState>((set) => ({
   email: '',
+  id: '',
   question: '',
   answer: '',
   setEmail: (email) => set({ email }),
+  setId: (id) => set({ id }),
   setQuestion: (question) => set({ question }),
   setAnswer: (answer) => set({ answer }),
 }));

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;