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,57 @@ 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;
-    }
     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('자기 자신을 팀원으로 추가할 수 없습니다.');
+      const newInputs = [...inputs];
+      newInputs[index] = ''; // 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
+      const newInputs = [...inputs];
+      newInputs[index] = userData.data || userId; // Use fetched data, or original ID if not found
+      setInputs(newInputs);
+    } catch (error) {
+      console.error(`Error fetching user ${userId}:`, error);
+      // 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] === '') { // Only fetch if ID exists and input is empty
+      fetchUserById(0, id);
+    }
+  }, [id, fetchUserById, inputs]); // Rerun when id changes
+
   const handleConfirm = () => {
     setShowModal(false);
   };
@@ -55,24 +87,6 @@ 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);
     // You can add logic here to process the inputs before navigating
@@ -95,7 +109,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) => (

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;