Merge pull request #58 from Kim-s-Crew/feat/teambuilding

add : 이름 변경 기능 추가, WIP toast 추가(#19)

src/apis/student.ts

@@ -51,3 +51,33 @@ export const changeTrack = async ({
     }
   }
 };
+
+interface changeStudentNameData {
+  userId: number;
+  username: string;
+}
+// 수강생 이름 변경
+export const changeStudentName = async ({
+  userId,
+  username,
+}: changeStudentNameData) => {
+  try {
+    const token =
+      typeof window !== 'undefined' ? sessionStorage.getItem('token') : null;
+    const response = await axios.patch(
+      `${process.env.NEXT_PUBLIC_SERVER_URL}/api/users/${userId}/username`,
+      { username },
+      {
+        headers: {
+          'Content-Type': 'application/json', // Add Content-Type header
+          Authorization: `${token}`,
+        },
+      },
+    );
+    return response.data;
+  } catch (err: any) {
+    if (err.response && err.response.data && err.response.data.message) {
+      throw new Error(err.response.data.message);
+    }
+  }
+};

src/app/admin/student/[userId]/page.tsx

@@ -1,25 +1,30 @@
 'use client';
 import { deleteAssessment } from '@/apis/assesment';
 import { getUserData } from '@/apis/auth';
+import { changeStudentName } from '@/apis/student';
 import StudentComment from '@/components/admin/student/StudentComment';
-import StudentInfo from '@/components/admin/student/StudentInfo';
+import StudentTrackInfo from '@/components/admin/student/StudentTrackInfo';
 import Modal from '@/components/ui/Modal';
+import { useWIPToast } from '@/hooks/useToast';
 
-import { Button, Divider, Spacer } from '@nextui-org/react';
+import { Button, Divider, Spacer, user } from '@nextui-org/react';
 import {
   InvalidateQueryFilters,
   useMutation,
   useQuery,
   useQueryClient,
 } from '@tanstack/react-query';
 import { useParams } from 'next/navigation';
-import { useState } from 'react';
+import { useState, useRef, useEffect } from 'react';
 import { toast } from 'react-toastify';
 
 const UserId = () => {
   const queryClient = useQueryClient();
   const param = useParams();
   const [modalOpen, setModalOpen] = useState(false);
+  const [newName, setNewName] = useState('');
+  const [isNameEditing, setIsNameEditing] = useState(false);
+  const nameRef = useRef<HTMLInputElement | null>(null); // ref 생성
   const { userId } = param;
 
   const { data, isLoading } = useQuery({
@@ -43,12 +48,47 @@ const UserId = () => {
     },
   });
 
+  const { mutate: changeNameMutation } = useMutation({
+    mutationFn: changeStudentName,
+    onSuccess: async () => {
+      await queryClient.invalidateQueries([
+        'userData',
+      ] as InvalidateQueryFilters);
+    },
+    onError: (error: any) => {
+      const errorMessage =
+        error.message || '에러가 발생했습니다. 다시 시도해주세요.';
+      toast.error(errorMessage);
+    },
+  });
+
+  const nameChangeHandler = async () => {
+    if (newName === '' || newName.trim().length === 0) {
+      toast.warning('이름을 제대로 입력해주세요.');
+    } else {
+      await changeNameMutation({ userId: +userId, username: newName });
+      setIsNameEditing(false);
+      toast.success('이름이 변경되었습니다.');
+    }
+  };
+
   const deleteAssessmentHandler = async (assessmentId: number) => {
     removeAssessmentMutation(assessmentId);
     setModalOpen(false);
     toast.success('로그가 삭제되었습니다.');
   };
 
+  const handleEditNameClick = () => {
+    setNewName(data.username);
+    setIsNameEditing(true);
+  };
+
+  useEffect(() => {
+    if (isNameEditing && nameRef.current) {
+      nameRef.current.focus(); // input 요소에 포커스를 설정
+    }
+  }, [isNameEditing]);
+
   console.log(data);
 
   if (isLoading) {
@@ -86,8 +126,31 @@ const UserId = () => {
           </div>
         </Modal>
       )}
-      <h1 className='text-2xl font-bold mb-4'>{username}</h1>
-      <StudentInfo
+      <h1 className='text-2xl font-bold '>
+        {isNameEditing ? (
+          <div>
+            <input
+              ref={nameRef}
+              className='w-[150px]'
+              value={newName}
+              onChange={(e) => setNewName(e.target.value)}
+            />
+            <span onClick={nameChangeHandler} className='cursor-pointer'>
+              ✔
+            </span>
+          </div>
+        ) : (
+          <div>
+            <span>{username}</span>
+            <span className='cursor-pointer' onClick={handleEditNameClick}>
+              ✏️
+            </span>
+          </div>
+        )}
+      </h1>
+      <h3>{email}</h3>
+      <Spacer y={2} />
+      <StudentTrackInfo
         trackName={trackName}
         trackWeeks={trackWeeks}
         trackId={trackId}
@@ -129,7 +192,9 @@ const UserId = () => {
       )}
 
       <Divider className='my-6' />
-      <Button color='danger'>수강생 삭제</Button>
+      <Button color='danger' onClick={useWIPToast}>
+        수강생 삭제
+      </Button>
     </div>
   );
 };

src/components/admin/student/StudentInfo.tsx → src/components/admin/student/StudentTrackInfo.tsx

@@ -17,7 +17,7 @@ interface Props {
   trackId: number;
 }
 
-const StudentInfo = ({ trackName, trackWeeks, trackId }: Props) => {
+const StudentTrackInfo = ({ trackName, trackWeeks, trackId }: Props) => {
   const queryClient = useQueryClient();
   const param = useParams();
   const { userId } = param;
@@ -75,4 +75,4 @@ const StudentInfo = ({ trackName, trackWeeks, trackId }: Props) => {
   );
 };
 
-export default StudentInfo;
+export default StudentTrackInfo;

src/components/user/Header.tsx

@@ -11,10 +11,12 @@ import { usePathname, useRouter } from 'next/navigation';
 import { useAuthStore } from '@/zustand/store';
 import { useQuery } from '@tanstack/react-query';
 import { currentUserRawData } from '@/types/types';
+import { useWIPToast } from '@/hooks/useToast';
 
 const Header = () => {
   const router = useRouter();
   const pathname = usePathname();
+  // useWIPToast();
 
   const { data } = useQuery({
     queryKey: ['loggedInUser'],
@@ -47,8 +49,13 @@ const Header = () => {
           <li className={isActive('/user/notice')}>
             <Link href={'/user/notice'}>공지게시판</Link>
           </li>
-          <li className={isActive('/user/schedule')}>
+          {/* <li className={isActive('/user/schedule')}>
             <Link href={'/user/schedule'}>팀 일정</Link>
+          </li> */}
+          <li className={isActive('/user/schedule')}>
+            <span className='cursor-pointer' onClick={useWIPToast}>
+              팀 일정
+            </span>
           </li>
         </ul>
         <div className='flex w-full items-center justify-around'>

src/components/user/team/TeamSection.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import { useWIPToast } from '@/hooks/useToast';
 import {
   Button,
   Dropdown,
@@ -8,7 +9,7 @@ import {
   DropdownTrigger,
   Spacer,
 } from '@nextui-org/react';
-import { useState } from 'react';
+import { use, useState } from 'react';
 
 const TeamSection = () => {
   const [dropDownState, setDropDownState] = useState(false);
@@ -21,7 +22,9 @@ const TeamSection = () => {
         <div className='p-2 round-xl'>
           <Dropdown>
             <DropdownTrigger>
-              <span className='text-xl cursor-pointer'>👎</span>
+              <span onClick={useWIPToast} className='text-xl cursor-pointer'>
+                👎
+              </span>
             </DropdownTrigger>
             {!dropDownState ? (
               <DropdownMenu aria-label='Static Actions'>

src/hooks/useToast.ts

@@ -0,0 +1,13 @@
+import { toast } from 'react-toastify';
+
+export const useWIPToast = () => {
+  toast.warn('🚧 아직 구현되지 않은 기능입니다. 🚧', {
+    position: 'top-right',
+    autoClose: 3000,
+    hideProgressBar: false,
+    closeOnClick: true,
+    pauseOnHover: true,
+    draggable: true,
+    progress: undefined,
+  });
+};